@ballistix.digital/react-components 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -1135,7 +1135,7 @@ type TAddressInputGroupFormValue = {
     street: string;
     houseNumber: string;
     zipCode: string;
-    busNumber: string;
+    busNumber?: string;
     lat: number;
     lng: number;
     info?: string;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { ArrowPathIcon, ChevronDownIcon, EllipsisVerticalIcon, ExclamationCircleIcon, ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon, ChevronUpIcon, ChevronUpDownIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
-import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, forEach, assign } from 'lodash';
+import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, forEach, assign, intersection, trim, lastIndexOf } from 'lodash';
 import get$1 from 'lodash/get';
 import React, { useState, useMemo, Children, Fragment, useEffect, useCallback, useRef, forwardRef, useImperativeHandle, useReducer, createElement, PureComponent, Component } from 'react';
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -2676,13 +2676,14 @@ var DateMenuForm = function (props) {
         startDate: null,
         endDate: null,
     }), state = _p[0], setState = _p[1];
-    var handleValueChange = function (newValue) {
+    var $datepickerInputRef = useRef(null);
+    var handleValueChange = 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);
@@ -2705,7 +2706,40 @@ var DateMenuForm = function (props) {
     useEffect(function () {
         setState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : { startDate: null, endDate: null });
     }, [defaultValue]);
-    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.container, "data-cy": inputDataCy, children: [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, 
+    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 ||
+                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 (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.container, "data-cy": inputDataCy, ref: $datepickerInputRef, children: [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, 
                         //
@@ -10745,6 +10779,26 @@ var AddressInputGroupForm = function (props) {
                         var zipCode = handleExtractValueWithKey('postal_code');
                         var houseNumber = handleExtractValueWithKey('street_number');
                         var busNumber = handleExtractValueWithKey('post_box');
+                        if (
+                        // if busNumber is not found with the method above, try to find it in the user inputted label
+                        !busNumber &&
+                            (
+                            // if the label contains the houseNumber and city somewhere after the houseNumber
+                            e === null || e === void 0 ? void 0 : e.label.includes(houseNumber)) &&
+                            (e === null || e === void 0 ? void 0 : e.label.split(houseNumber)[1].includes(city))) {
+                            // split the label at the houseNumber and city
+                            var splitLabel = e === null || e === void 0 ? void 0 : e.label.split(houseNumber)[1].split(city)[0];
+                            // replace the zipCode from the label if it came before the city
+                            var replaceZipcode = splitLabel.replace(zipCode, '');
+                            // trim the label
+                            var trimmedLabel = trim(replaceZipcode);
+                            // if the trimmed label is shorter than 3 characters, it's probably the busNumber. Otherwise, something probably went wrong.
+                            if (trimmedLabel.length <= 3) {
+                                busNumber = trimmedLabel.includes(',')
+                                    ? trimmedLabel.substring(0, lastIndexOf(trimmedLabel, ','))
+                                    : trimmedLabel;
+                            }
+                        }
                         var location = {
                             street: street,
                             city: city,