@ballistix.digital/react-components 9.12.2-rc-426.0 → 9.12.2

package/dist/index.js

@@ -5619,11 +5619,8 @@ var $c1ef7dd4f2207e4b$export$2e2bcd8739ae039 = $c1ef7dd4f2207e4b$var$styles;
 
 
 const $4013d091ad44178a$var$DateRangeMenu = (props)=>{
-    const { name: name = 'date-menu-form', size: size = 'compact', label: label, i18n: i18n = 'en', description: description, hint: hint, placeholder: placeholder, separator: separator, startFrom: startFrom, displayFormat: displayFormat = 'DD.MM.YYYY', direction: direction = 'down', minDate: minDate, maxDate: maxDate, startWeekOn: startWeekOn = 'mon', icon: icon = (isEmpty)=>isEmpty ? (0, $iA2ta$reactjsxruntime.jsx)((0, $cbf4b156892acb71$export$2e2bcd8739ae039), {
+    const { name: name = 'date-menu-form', size: size = 'compact', label: label, i18n: i18n = 'en', description: description, hint: hint, placeholder: placeholder, separator: separator, startFrom: startFrom, displayFormat: displayFormat = 'DD.MM.YYYY', direction: direction = 'down', minDate: minDate, maxDate: maxDate, startWeekOn: startWeekOn = 'mon', icon: icon = ()=>(0, $iA2ta$reactjsxruntime.jsx)((0, $cbf4b156892acb71$export$2e2bcd8739ae039), {
             accessor: "calendar"
-        }) : (0, $iA2ta$reactjsxruntime.jsx)((0, $cbf4b156892acb71$export$2e2bcd8739ae039), {
-            accessor: "xmark",
-            className: "text-black"
         }), required: required, value: defaultValue, error: error, type: type = 'normal', isRequired: isRequired = false, isTouched: isTouched = false, isDisabled: isDisabled, isSolo: isSolo = false, isRanged: isRanged = true, onChange: onChange, onClear: onClear, onBlur: onBlur, onClick: onClick, styles: stylesOverrides } = props;
     const isValid = error === undefined;
     const [state, setState] = (0, $iA2ta$react.useState)(defaultValue ?? {
@@ -5644,6 +5641,16 @@ const $4013d091ad44178a$var$DateRangeMenu = (props)=>{
         onChange,
         onClear
     ]);
+    const hasValue = Boolean(state?.startDate || state?.endDate);
+    const handleClear = (0, $iA2ta$react.useCallback)((event)=>{
+        event.stopPropagation();
+        handleValueChange({
+            startDate: null,
+            endDate: null
+        });
+    }, [
+        handleValueChange
+    ]);
     const handleGenerateStyle = ()=>{
         const result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $c1ef7dd4f2207e4b$export$2e2bcd8739ae039).base);
         const keys = (0, $iA2ta$lodash.concat)((0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $c1ef7dd4f2207e4b$export$2e2bcd8739ae039).base), (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $3369f7d596d23d58$export$2e2bcd8739ae039).base), (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $65bb4d593718fcda$export$2e2bcd8739ae039).base));
@@ -5668,6 +5675,16 @@ const $4013d091ad44178a$var$DateRangeMenu = (props)=>{
         const allowedCharacters = '0123456789';
         const separators = `./-${separator}`;
         const callback = (event)=>{
+            if (event.key === 'Backspace' || event.key === 'Delete') {
+                const hadValue = Boolean(input && input.value.length > 0);
+                setTimeout(()=>{
+                    if (hadValue && input && input.value.length === 0) handleValueChange({
+                        startDate: null,
+                        endDate: null
+                    });
+                }, 0);
+                return;
+            }
             if (input?.value === null || input?.value === undefined || (0, $iA2ta$lodash.intersection)(input.value.split(''), separators.split('')).length > 0 || isRanged) return;
             if (allowedCharacters.includes(event.key) && input?.value.length >= 7) {
                 const newValue = input.value + event.key;
@@ -5685,7 +5702,9 @@ const $4013d091ad44178a$var$DateRangeMenu = (props)=>{
             }
         };
         if (input) input.addEventListener('keydown', callback);
-        return ()=>removeEventListener('keydown', callback);
+        return ()=>{
+            if (input) input.removeEventListener('keydown', callback);
+        };
     }, [
         handleValueChange,
         isRanged,
@@ -5709,28 +5728,42 @@ const $4013d091ad44178a$var$DateRangeMenu = (props)=>{
                 ref: $datepickerInputRef,
                 onClick: onClick,
                 children: [
-                    (0, $iA2ta$reactjsxruntime.jsx)((0, ($parcel$interopDefault($iA2ta$ballistixdigitalreacttailwindcssdatepicker))), {
-                        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,
-                        //
-                        onChange: handleValueChange,
-                        //
-                        inputClassName: styles.input,
-                        startWeekOn: startWeekOn
+                    (0, $iA2ta$reactjsxruntime.jsxs)("div", {
+                        className: "relative",
+                        children: [
+                            (0, $iA2ta$reactjsxruntime.jsx)((0, ($parcel$interopDefault($iA2ta$ballistixdigitalreacttailwindcssdatepicker))), {
+                                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,
+                                //
+                                onChange: handleValueChange,
+                                //
+                                inputClassName: styles.input,
+                                startWeekOn: startWeekOn
+                            }),
+                            hasValue && !isDisabled && (0, $iA2ta$reactjsxruntime.jsx)("button", {
+                                type: "button",
+                                "aria-label": "Clear date",
+                                onClick: handleClear,
+                                className: "absolute inset-y-0 right-9 flex items-center px-2 text-gray-400 hover:text-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500",
+                                children: (0, $iA2ta$reactjsxruntime.jsx)((0, $cbf4b156892acb71$export$2e2bcd8739ae039), {
+                                    accessor: "xmark"
+                                })
+                            })
+                        ]
                     }),
                     (0, $iA2ta$reactjsxruntime.jsx)((0, $dfbd7d015eae4218$export$2e2bcd8739ae039), {
                         isHidden: isSolo,