@ballistix.digital/react-components 1.0.0 → 1.0.1

package/dist/index.js

@@ -2678,13 +2678,14 @@ var DateMenuForm = function (props) {
         startDate: null,
         endDate: null,
     }), state = _p[0], setState = _p[1];
-    var handleValueChange = function (newValue) {
+    var $datepickerInputRef = React.useRef(null);
+    var handleValueChange = React.useCallback(function (newValue) {
         setState(newValue);
         onChange && onChange(newValue);
         setTimeout(function () {
             onBlur && onBlur();
         }, 50);
-    };
+    }, [onBlur, onChange]);
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$6.base);
         var keys = calculateNestedKeys(styles$6.base);
@@ -2707,7 +2708,40 @@ var DateMenuForm = function (props) {
     React.useEffect(function () {
         setState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : { startDate: null, endDate: null });
     }, [defaultValue]);
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, "data-cy": inputDataCy, children: [jsxRuntime.jsx(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon, 
+    React.useEffect(function () {
+        var _a;
+        var input = (_a = $datepickerInputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+        var allowedCharacters = '0123456789';
+        var separators = "./-".concat(separator);
+        var callback = function (event) {
+            if ((input === null || input === void 0 ? void 0 : input.value) === null ||
+                (input === null || input === void 0 ? void 0 : input.value) === undefined ||
+                lodash.intersection(input.value.split(''), separators.split('')).length > 0 ||
+                isRanged) {
+                return;
+            }
+            if (allowedCharacters.includes(event.key) && (input === null || input === void 0 ? void 0 : input.value.length) >= 7) {
+                var newValue = input.value + event.key;
+                var day = newValue.substring(0, 2);
+                var month = newValue.substring(2, 4);
+                var year = newValue.substring(4, 8);
+                var newDate = new Date("".concat(year, "-").concat(month, "-").concat(day));
+                if (isNaN(newDate.getTime()))
+                    return;
+                input.blur();
+                handleValueChange({
+                    startDate: "".concat(year, "-").concat(month, "-").concat(day),
+                    endDate: "".concat(year, "-").concat(month, "-").concat(day),
+                });
+                setTimeout(function () { return input.focus(); }, 100);
+            }
+        };
+        if (input) {
+            input.addEventListener('keydown', callback);
+        }
+        return function () { return removeEventListener('keydown', callback); };
+    }, [handleValueChange, isRanged, separator]);
+    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, "data-cy": inputDataCy, ref: $datepickerInputRef, children: [jsxRuntime.jsx(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon, 
                         //
                         value: state, 
                         //