funda-ui 1.0.522 → 1.0.530

package/Calendar/index.css

@@ -0,0 +1,96 @@
+/* ======================================================
+   <!-- Calendar -->
+/* ====================================================== */
+.custom-calendar {
+  --custom-calendar-wrapper-min-width: 400px;
+  --custom-calendar-border-color: #ddd;
+  --custom-calendar-header-fs: 1.125rem;
+  --custom-calendar-header-bg: #f5f6fa;
+  --custom-calendar-default-border-color: #eee;
+  --custom-calendar-today-border-color: #ddd;
+  --custom-calendar-todayselected-bg: #eee;
+  --custom-calendar-year-month-btn-border-color: #ddd;
+  --custom-calendar-year-month-btn-hover-bg: rgba(0, 58, 166, .2);
+  --custom-calendar-year-month-btn-selected-bg: rgba(0, 58, 166, 1);
+  --custom-calendar-year-month-btn-selected-color: #fff;
+}
+.custom-calendar__wrapper {
+  min-width: var(--custom-calendar-wrapper-min-width);
+  border: 1px solid var(--custom-calendar-border-color);
+}
+.custom-calendar__header {
+  font-size: var(--custom-calendar-header-fs);
+  font-weight: bold;
+  padding: 10px 10px 5px 10px;
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--custom-calendar-header-bg);
+}
+.custom-calendar__body {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.custom-calendar__btn {
+  border: none;
+  outline: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+  cursor: pointer;
+}
+.custom-calendar__btn__btn--prev {
+  transform: rotate(90deg);
+}
+.custom-calendar__btn__btn--next {
+  transform: rotate(-90deg);
+}
+.custom-calendar__btn__btn--today {
+  margin: 1rem;
+}
+.custom-calendar__day {
+  width: 14.2%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 1px solid var(--custom-calendar-default-border-color);
+}
+.custom-calendar__day.today {
+  border: 1px solid var(--custom-calendar-today-border-color);
+}
+.custom-calendar__day.selected {
+  background-color: var(--custom-calendar-todayselected-bg);
+}
+.custom-calendar__month-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 2.5em);
+  margin-top: 45px;
+  grid-gap: 10px;
+}
+.custom-calendar__year-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(5, 2.5em);
+  grid-gap: 5px;
+}
+.custom-calendar__year, .custom-calendar__month {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  font-size: 0.875em;
+  border: 1px solid var(--custom-calendar-year-month-btn-border-color);
+  border-radius: 5px;
+  cursor: pointer;
+}
+.custom-calendar__year:hover, .custom-calendar__year:hover, .custom-calendar__month:hover, .custom-calendar__month:hover {
+  background-color: var(--custom-calendar-year-month-btn-hover-bg);
+}
+.custom-calendar__year.selected, .custom-calendar__year.selected, .custom-calendar__month.selected, .custom-calendar__month.selected {
+  background-color: var(--custom-calendar-year-month-btn-selected-bg);
+  color: var(--custom-calendar-year-month-btn-selected-color);
+}

package/Calendar/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type CalendarProps = {
+    tmpl?: (date: any) => void;
+    militaryTime?: boolean;
+};
+declare const Calendar: (props: CalendarProps) => JSX.Element;
+export default Calendar;

package/Calendar/index.js

@@ -0,0 +1,308 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("react"));
+	else if(typeof define === 'function' && define.amd)
+		define(["react"], factory);
+	else if(typeof exports === 'object')
+		exports["RPB"] = factory(require("react"));
+	else
+		root["RPB"] = factory(root["React"]);
+})(this, (__WEBPACK_EXTERNAL_MODULE__787__) => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 787:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* 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__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+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."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Calendar = function Calendar(props) {
+  var tmpl = props.tmpl,
+    militaryTime = props.militaryTime;
+  var DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+  var DAYS_LEAP = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+  var WEEK = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
+  var WEEK_FULL = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'];
+  var MONTHS = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+  var MONTHS_FULL = ['January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  var now = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return new Date();
+  }, []);
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(now),
+    _useState2 = _slicedToArray(_useState, 2),
+    date = _useState2[0],
+    setDate = _useState2[1];
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(date.getDate()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    day = _useState4[0],
+    setDay = _useState4[1];
+  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(date.getMonth()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    month = _useState6[0],
+    setMonth = _useState6[1];
+  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(date.getFullYear()),
+    _useState8 = _slicedToArray(_useState7, 2),
+    year = _useState8[0],
+    setYear = _useState8[1];
+  var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getStartDayOfMonth(date)),
+    _useState10 = _slicedToArray(_useState9, 2),
+    startDay = _useState10[0],
+    setStartDay = _useState10[1];
+
+  // selection tab
+  // gets the today date time object
+  var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(now.getMonth()),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedMonth = _useState12[0],
+    setSelectedMonth = _useState12[1];
+  var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(now.getFullYear()),
+    _useState14 = _slicedToArray(_useState13, 2),
+    selectedYear = _useState14[0],
+    setSelectedYear = _useState14[1];
+  var _useState15 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
+    _useState16 = _slicedToArray(_useState15, 2),
+    yearsArray = _useState16[0],
+    setYearsCollection = _useState16[1];
+  function setTodayDate() {
+    setDay(now.getDate());
+    setMonth(now.getMonth());
+    setYear(now.getFullYear());
+    setStartDay(getStartDayOfMonth(now));
+  }
+  function getStartDayOfMonth(date) {
+    var startDate = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+    return startDate === 0 ? 7 : startDate;
+  }
+  function isLeapYear(year) {
+    return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
+  }
+  var days = isLeapYear(year) ? DAYS_LEAP : DAYS;
+  function handlePrevChange() {
+    setDate(function (prevState) {
+      var _date = new Date(year, month - 1, day);
+
+      // update
+      setSelectedMonth(_date.getMonth());
+      setSelectedYear(_date.getFullYear());
+      return _date;
+    });
+  }
+  function handleNextChange() {
+    setDate(function (prevState) {
+      var _date = new Date(year, month + 1, day);
+
+      // update
+      setSelectedMonth(_date.getMonth());
+      setSelectedYear(_date.getFullYear());
+      return _date;
+    });
+  }
+  function handleDayChange(e, currentDay) {
+    setDate(new Date(year, month, currentDay));
+  }
+  function handleYearChange(currentValue) {
+    setSelectedYear(currentValue);
+    setYear(currentValue);
+    setDate(new Date(currentValue, month, day));
+  }
+  function handleMonthChange(currentIndex) {
+    setSelectedMonth(currentIndex);
+    setMonth(currentIndex);
+    setDate(new Date(year, currentIndex, day));
+  }
+  function handleTodayChange() {
+    setSelectedMonth(now.getMonth());
+    setSelectedYear(now.getFullYear());
+    setTodayDate();
+  }
+
+  //if user change the selectedYear, then udate the years array that is displayed on year tab view
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    var years = [];
+    for (var y = selectedYear - 10; y < selectedYear + 10; y++) {
+      years.push(y);
+    }
+    setYearsCollection(years);
+  }, [selectedYear]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    setDay(date.getDate());
+    setMonth(date.getMonth());
+    setYear(date.getFullYear());
+    setStartDay(getStartDayOfMonth(date));
+  }, [date]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "custom-calendar"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "custom-calendar__wrapper"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "custom-calendar__header"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    type: "button",
+    className: "custom-calendar__btn custom-calendar__btn--prev",
+    onClick: handlePrevChange
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
+    width: "20px",
+    height: "20px",
+    viewBox: "0 0 29 29"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: "10",
+    strokeWidth: "2",
+    d: "m20.5 11.5-6 6-6-6"
+  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, MONTHS[month], " ", year), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    type: "button",
+    className: "custom-calendar__btn custom-calendar__btn--next",
+    onClick: handleNextChange
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
+    width: "20px",
+    height: "20px",
+    viewBox: "0 0 29 29"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: "10",
+    strokeWidth: "2",
+    d: "m20.5 11.5-6 6-6-6"
+  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "custom-calendar__body"
+  }, WEEK.map(function (d) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "custom-calendar__day",
+      key: d
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("strong", null, d));
+  }), Array(days[month] + (startDay - 1)).fill(null).map(function (_, index) {
+    var d = index - (startDay - 2);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "custom-calendar__day ".concat(d === now.getDate() ? 'today' : '', " ").concat(d === day ? 'selected' : ''),
+      key: index,
+      onClick: function onClick(e) {
+        handleDayChange(e, d);
+      }
+    }, d > 0 ? d : '');
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "custom-calendar__month-container"
+  }, MONTHS_FULL.map(function (month, index) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "custom-calendar__month ".concat(selectedMonth === index ? ' selected' : ''),
+      key: month + index,
+      onClick: function onClick() {
+        handleMonthChange(index);
+      }
+    }, month);
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("hr", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "custom-calendar__year-container"
+  }, yearsArray.map(function (year, index) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "custom-calendar__year ".concat(selectedYear === year ? ' selected' : ''),
+      key: year + index,
+      onClick: function onClick() {
+        handleYearChange(year);
+      }
+    }, year);
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "custom-calendar__today-container"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    type: "button",
+    className: "custom-calendar__btn custom-calendar__btn--today",
+    onClick: handleTodayChange
+  }, "Today")))));
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Calendar);
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/Input/index.d.ts

@@ -34,6 +34,8 @@ declare type InputProps = {
     tabIndex?: number;
     [key: `data-${string}`]: string | undefined;
     onChangeCallback?: (e: any) => void;
+    onInputCallback?: (e: any) => void;
+    onKeyPressedCallback?: (e: any) => void;
     onChange?: (e: any, param: any) => void;
     onBlur?: (e: any, param: any) => void;
     onFocus?: (e: any, param: any) => void;

package/Input/index.js

@@ -96,7 +96,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-var _excluded = ["wrapperClassName", "controlClassName", "type", "disabled", "required", "placeholder", "pattern", "readOnly", "value", "label", "units", "name", "step", "min", "max", "src", "size", "minLength", "maxLength", "alt", "id", "iconLeft", "iconRight", "autoComplete", "style", "tabIndex", "onChangeCallback", "onChange", "onBlur", "onFocus"];
+var _excluded = ["wrapperClassName", "controlClassName", "type", "disabled", "required", "placeholder", "pattern", "readOnly", "value", "label", "units", "name", "step", "min", "max", "src", "size", "minLength", "maxLength", "alt", "id", "iconLeft", "iconRight", "autoComplete", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "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."); }
@@ -135,6 +135,8 @@ var Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
     style = props.style,
     tabIndex = props.tabIndex,
     onChangeCallback = props.onChangeCallback,
+    onInputCallback = props.onInputCallback,
+    onKeyPressedCallback = props.onKeyPressedCallback,
     onChange = props.onChange,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
@@ -178,6 +180,12 @@ var Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
 
     //
     onChange === null || onChange === void 0 ? void 0 : onChange(event, onComposition);
+
+    // It fires in real time as the user enters
+    if (typeof onInputCallback === 'function') {
+      var newData = onInputCallback(event);
+      setChangedVal(newData);
+    }
   }
   function handleBlur(event) {
     var el = event.target;
@@ -192,12 +200,18 @@ var Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, onComposition);
 
-    //
+    // It fires when focus is lost
     if (typeof onChangeCallback === 'function') {
       var newData = onChangeCallback(event);
       setChangedVal(newData);
     }
   }
+  function handleKeyPressed(event) {
+    if (typeof onKeyPressedCallback === 'function') {
+      var newData = onKeyPressedCallback(event);
+      setChangedVal(newData);
+    }
+  }
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
     // update default value
     //--------------
@@ -245,6 +259,7 @@ var Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
     onFocus: handleFocus,
     onBlur: handleBlur,
     onChange: handleChange,
+    onKeyDown: handleKeyPressed,
     onCompositionStart: handleComposition,
     onCompositionUpdate: handleComposition,
     onCompositionEnd: handleComposition,

package/ModalDialog/index.js

@@ -613,8 +613,6 @@ var ModalDialog = function ModalDialog(props) {
         };
       };
       onOpen === null || onOpen === void 0 ? void 0 : onOpen(null, _callback(null));
-    } else {
-      handleCloseWin(null);
     }
 
     // Pass the function to be called

package/MultiFuncSelect/index.js

@@ -867,11 +867,14 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
 
   //
   function fixContentHeight() {
-    if (listContentRef.current === null) return;
     setTimeout(function () {
-      var _displayedItems = listContentRef.current.querySelectorAll('.list-group-item');
-      var _displayedHeight = _displayedItems[0].clientHeight * _displayedItems.length;
-      listContentRef.current.style.height = _displayedHeight + 'px';
+      if (listContentRef.current !== null) {
+        var _displayedItems = listContentRef.current.querySelectorAll('.list-group-item');
+        if (typeof _displayedItems[0] !== 'undefined') {
+          var _displayedHeight = _displayedItems[0].clientHeight * _displayedItems.length;
+          listContentRef.current.style.height = _displayedHeight + 'px';
+        }
+      }
     }, 0);
   }
   function getPlacement(el) {

package/README.md

@@ -49,6 +49,7 @@ Here is a table of the components and their status.
 | [Tooltip ✅](packages/Tooltip/README.md) |  |  |  |
 | [Digital Clock ✅](packages/DigitalClock/README.md) |  |  |  |
 | [Tree ✅🔥](packages/Tree/README.md) |  |  |  |
+| [Calendar ✅](packages/Calendar/README.md) |  |  |  |
 
 
 

package/Radio/index.d.ts

@@ -7,7 +7,7 @@ declare module 'react' {
 interface OptionConfig {
     [propName: string]: string | number;
 }
-declare type RadioOptionChangeFnType = (arg1: any, arg2: any) => void;
+declare type RadioOptionChangeFnType = (arg1: any, arg2: any, arg3?: any) => void;
 declare type RadioProps = {
     wrapperClassName?: string;
     value?: string;

package/Radio/index.js

@@ -257,6 +257,7 @@ var Radio = function Radio(props) {
   }
   function handleChange(event) {
     var val = event.target.value;
+    var currentIndex = event.target.dataset.index;
 
     //----
     // update value
@@ -268,8 +269,10 @@ var Radio = function Radio(props) {
 
     //
     if (typeof onChange === 'function') {
-      onChange(event, dataInit[event.target.selectedIndex]);
-      event.target.blur();
+      onChange(event, val, dataInit[currentIndex]);
+    }
+    if (typeof onClick === 'function') {
+      onClick(event, val, dataInit[currentIndex]);
     }
   }
   function handleBlur(event) {
@@ -293,6 +296,7 @@ var Radio = function Radio(props) {
       className: "form-check-input",
       id: "field-".concat(uniqueID, "-").concat(index),
       name: name,
+      "data-index": index,
       value: "".concat(item.value),
       required: requiredVal,
       disabled: disabled || null,

package/RangeSlider/index.js

@@ -158,7 +158,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         var react__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_1465__(787);
         /* harmony import */
         var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_1465__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-        var _excluded = ["wrapperClassName", "controlClassName", "type", "disabled", "required", "placeholder", "pattern", "readOnly", "value", "label", "units", "name", "step", "min", "max", "src", "size", "minLength", "maxLength", "alt", "id", "iconLeft", "iconRight", "autoComplete", "style", "tabIndex", "onChangeCallback", "onChange", "onBlur", "onFocus"];
+        var _excluded = ["wrapperClassName", "controlClassName", "type", "disabled", "required", "placeholder", "pattern", "readOnly", "value", "label", "units", "name", "step", "min", "max", "src", "size", "minLength", "maxLength", "alt", "id", "iconLeft", "iconRight", "autoComplete", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "onChange", "onBlur", "onFocus"];
         function _extends() {
           _extends = Object.assign ? Object.assign.bind() : function (target) {
             for (var i = 1; i < arguments.length; i++) {
@@ -277,6 +277,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             style = props.style,
             tabIndex = props.tabIndex,
             onChangeCallback = props.onChangeCallback,
+            onInputCallback = props.onInputCallback,
+            onKeyPressedCallback = props.onKeyPressedCallback,
             onChange = props.onChange,
             onBlur = props.onBlur,
             onFocus = props.onFocus,
@@ -320,6 +322,12 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
             //
             onChange === null || onChange === void 0 ? void 0 : onChange(event, onComposition);
+
+            // It fires in real time as the user enters
+            if (typeof onInputCallback === 'function') {
+              var newData = onInputCallback(event);
+              setChangedVal(newData);
+            }
           }
           function handleBlur(event) {
             var el = event.target;
@@ -334,12 +342,18 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             //
             onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, onComposition);
 
-            //
+            // It fires when focus is lost
             if (typeof onChangeCallback === 'function') {
               var newData = onChangeCallback(event);
               setChangedVal(newData);
             }
           }
+          function handleKeyPressed(event) {
+            if (typeof onKeyPressedCallback === 'function') {
+              var newData = onKeyPressedCallback(event);
+              setChangedVal(newData);
+            }
+          }
           (0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
             // update default value
             //--------------
@@ -387,6 +401,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             onFocus: handleFocus,
             onBlur: handleBlur,
             onChange: handleChange,
+            onKeyDown: handleKeyPressed,
             onCompositionStart: handleComposition,
             onCompositionUpdate: handleComposition,
             onCompositionEnd: handleComposition,

package/Table/index.js

@@ -1164,6 +1164,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           }
           function handleChange(event) {
             var val = event.target.value;
+            var currentIndex = event.target.dataset.index;
 
             //----
             // update value
@@ -1175,8 +1176,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
             //
             if (typeof onChange === 'function') {
-              onChange(event, dataInit[event.target.selectedIndex]);
-              event.target.blur();
+              onChange(event, val, dataInit[currentIndex]);
+            }
+            if (typeof onClick === 'function') {
+              onClick(event, val, dataInit[currentIndex]);
             }
           }
           function handleBlur(event) {
@@ -1200,6 +1203,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
               className: "form-check-input",
               id: "field-".concat(uniqueID, "-").concat(index),
               name: name,
+              "data-index": index,
               value: "".concat(item.value),
               required: requiredVal,
               disabled: disabled || null,

package/Textarea/index.d.ts

@@ -24,6 +24,8 @@ interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
     tabIndex?: number;
     [key: `data-${string}`]: string | undefined;
     onChangeCallback?: (e: any) => void;
+    onInputCallback?: (e: any) => void;
+    onKeyPressedCallback?: (e: any) => void;
     onChange?: (e: any) => void;
     onBlur?: (e: any) => void;
     onFocus?: (e: any) => void;