beesoft-components 0.3.0-1 → 0.3.0

package/build/index.js

@@ -64,6 +64,16 @@ function __generator(thisArg, body) {
         } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -30275,7 +30285,7 @@ var DomHandler = (function () {
 }());
 
 function OverlayPanel(_a) {
-    var visible = _a.visible, target = _a.target, _b = _a.targetPosition, targetPosition = _b === void 0 ? DomTargetPosition.BottomLeft : _b, _c = _a.elementAlignment, elementAlignment = _c === void 0 ? DomElementAlignment.TopLeft : _c, _d = _a.shouldTargetCloseOverlay, shouldTargetCloseOverlay = _d === void 0 ? true : _d, _e = _a.shouldMatchTargetWidth, shouldMatchTargetWidth = _e === void 0 ? false : _e, _f = _a.shouldScrollCloseOverlay, shouldScrollCloseOverlay = _f === void 0 ? false : _f, _g = _a.shouldCheckZIndex, shouldCheckZIndex = _g === void 0 ? false : _g, _h = _a.shouldRemainOnScreen, shouldRemainOnScreen = _h === void 0 ? false : _h, _j = _a.unmountWhenHidden, unmountWhenHidden = _j === void 0 ? false : _j, _k = _a.transitionDuration, transitionDuration = _k === void 0 ? 400 : _k, _l = _a.showTransitionOptions, showTransitionOptions = _l === void 0 ? 'cubic-bezier(0, 0, 0.2, 1)' : _l, _m = _a.hideTransitionOptions, hideTransitionOptions = _m === void 0 ? 'linear' : _m, shown = _a.shown, hidden = _a.hidden, markupCreated = _a.markupCreated, children = _a.children;
+    var visible = _a.visible, target = _a.target, _b = _a.targetPosition, targetPosition = _b === void 0 ? DomTargetPosition.BottomLeft : _b, _c = _a.elementAlignment, elementAlignment = _c === void 0 ? DomElementAlignment.TopLeft : _c, _d = _a.shouldTargetCloseOverlay, shouldTargetCloseOverlay = _d === void 0 ? true : _d, _e = _a.shouldMatchTargetWidth, shouldMatchTargetWidth = _e === void 0 ? false : _e, _f = _a.shouldScrollCloseOverlay, shouldScrollCloseOverlay = _f === void 0 ? false : _f, _g = _a.shouldCheckZIndex, shouldCheckZIndex = _g === void 0 ? false : _g, _h = _a.shouldRemainOnScreen, shouldRemainOnScreen = _h === void 0 ? false : _h, _j = _a.unmountWhenHidden, unmountWhenHidden = _j === void 0 ? false : _j, _k = _a.transitionDuration, transitionDuration = _k === void 0 ? 400 : _k, _l = _a.showTransitionOptions, showTransitionOptions = _l === void 0 ? 'cubic-bezier(0, 0, 0.2, 1)' : _l, _m = _a.hideTransitionOptions, hideTransitionOptions = _m === void 0 ? 'linear' : _m, shown = _a.shown, hidden = _a.hidden, isClickedWithin = _a.isClickedWithin, markupCreated = _a.markupCreated, children = _a.children;
     var _o = useState(-1), zIndex = _o[0], setZIndex = _o[1];
     var _p = useState(visible), visibility = _p[0], setVisibility = _p[1];
     var _q = useState(false), dimensionsChangedFlag = _q[0], setDimensionsChangedFlag = _q[1];
@@ -30305,7 +30315,7 @@ function OverlayPanel(_a) {
                 (_b = resizeObserver.current) === null || _b === void 0 ? void 0 : _b.disconnect();
             }
         };
-    }, []);
+    }, [shouldRemainOnScreen]);
     useEffect(function () {
         if (target && shouldScrollCloseOverlay) {
             finalTarget.current = getTargetElement(target);
@@ -30379,7 +30389,14 @@ function OverlayPanel(_a) {
         if (!shouldTargetCloseOverlay && finalTarget.current) {
             otherElements = [finalTarget.current];
         }
-        var clickListener = function (clickedWithin) { return !clickedWithin && setVisibility(false); };
+        var clickListener = function (clickedWithin) {
+            if (clickedWithin) {
+                isClickedWithin === null || isClickedWithin === void 0 ? void 0 : isClickedWithin();
+            }
+            else {
+                setVisibility(false);
+            }
+        };
         listenerRef.current = bindDocumentClickListener(panelRef.current, clickListener, otherElements);
         if (shouldScrollCloseOverlay) {
             scrollListenerRef.current = lodashExports.throttle(function (event) { return panelRef.current && isEventOutsideTarget(event, panelRef.current) && setVisibility(false); }, 100, { leading: true });
@@ -30431,19 +30448,6 @@ function OverlayPanel(_a) {
         } })));
 }
 
-var FormattedInputDefaultFormats;
-(function (FormattedInputDefaultFormats) {
-    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateDayMonthYear"] = 0] = "DateDayMonthYear";
-    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateMonthDayYear"] = 1] = "DateMonthDayYear";
-    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateYearMonthDay"] = 2] = "DateYearMonthDay";
-    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateRangeDayMonthYear"] = 3] = "DateRangeDayMonthYear";
-    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateRangeMonthDayYear"] = 4] = "DateRangeMonthDayYear";
-    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateRangeYearMonthDay"] = 5] = "DateRangeYearMonthDay";
-    FormattedInputDefaultFormats[FormattedInputDefaultFormats["Time12Hour"] = 6] = "Time12Hour";
-    FormattedInputDefaultFormats[FormattedInputDefaultFormats["Time24Hour"] = 7] = "Time24Hour";
-    FormattedInputDefaultFormats[FormattedInputDefaultFormats["Custom"] = 8] = "Custom";
-})(FormattedInputDefaultFormats || (FormattedInputDefaultFormats = {}));
-
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
@@ -30752,7 +30756,7 @@ var InputSlotCollection = (function () {
                 finalSlotIndex = i;
             }
         }
-        return this.inputSlots[finalSlotIndex];
+        return this.inputSlots[finalSlotIndex > -1 ? finalSlotIndex : 0];
     };
     InputSlotCollection.prototype.allSlotsCompleted = function () {
         return this.inputSlots.every(function (slot) { return slot.isComplete; });
@@ -31058,7 +31062,12 @@ var InputRuleProcessor = (function () {
                 this.addToInputSlot(key);
                 inputSlot.isComplete = true;
                 this.formatRenderer.render();
-                this.formatNavigator.moveToNextInputPart();
+                if (!this.formatNavigator.isAtLastPart()) {
+                    this.formatNavigator.moveToNextInputPart();
+                }
+                else {
+                    this.formatNavigator.moveCursorRight();
+                }
             }
             else {
                 this.addToInputSlot(key);
@@ -31201,7 +31210,7 @@ var FormatParser = (function () {
         var _this = this;
         this.isInputFocused = true;
         this.formatRenderer.render();
-        setTimeout(function () { return _this.formatNavigator.setCursorToCurrentPosition(); });
+        setTimeout(function () { return _this.formatNavigator.findCursorPosition(); });
     };
     FormatParser.prototype.inputBlurred = function () {
         this.isInputFocused = false;
@@ -31255,630 +31264,74 @@ var FormatParser = (function () {
     return FormatParser;
 }());
 
-var format$7 = {
-    formatParts: [
-        {
-            characterCount: 2,
-            placeholder: 'D',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 31,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'M',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 12,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 4,
-            placeholder: 'Y',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: true,
-            valueType: FormatValueType.Numeric,
-        },
-    ],
-};
-
-var format$6 = {
-    formatParts: [
-        {
-            characterCount: 2,
-            placeholder: 'M',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 12,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'D',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 31,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 4,
-            placeholder: 'Y',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: true,
-            valueType: FormatValueType.Numeric,
-        },
-    ],
+var FormattedInput = function (props, ref) {
+    var _a = props.value, value = _a === void 0 ? '' : _a, format = props.format, _b = props.readOnly, readOnly = _b === void 0 ? false : _b, _c = props.debounceTime, debounceTime = _c === void 0 ? 800 : _c, _d = props.fillContainer, fillContainer = _d === void 0 ? true : _d, leftElement = props.leftElement, rightElement = props.rightElement, className = props.className, leftElementClassName = props.leftElementClassName, rightElementClassName = props.rightElementClassName, _e = props.isSingleLine, isSingleLine = _e === void 0 ? false : _e, _f = props.allowSingleLineScroll, allowSingleLineScroll = _f === void 0 ? false : _f, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onElementCreate = props.onElementCreate, onLeftElementClick = props.onLeftElementClick, onRightElementClick = props.onRightElementClick;
+    var inputRef = useRef();
+    var inputElementRef = useRef();
+    var formatParser = useRef();
+    useEffect(function () {
+        return function () {
+            var _a;
+            (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.dispose();
+        };
+    }, []);
+    useEffect(function () {
+        var _a;
+        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.inputValuePassed(value);
+    }, [value]);
+    useEffect(function () {
+        var _a, _b, _c;
+        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.dispose();
+        if (format) {
+            formatParser.current = new FormatParser(format, value);
+            if (inputElementRef.current) {
+                (_b = formatParser.current) === null || _b === void 0 ? void 0 : _b.inputElementCreated(inputElementRef.current);
+            }
+            (_c = formatParser.current) === null || _c === void 0 ? void 0 : _c.registerFormatChangeEvent(onFormatChange);
+        }
+    }, [format]);
+    var onFormatChange = useCallback(function (value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }, [onChange]);
+    var onFocusHandler = useCallback(function (event) {
+        var _a;
+        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.inputFocused();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }, [onFocus]);
+    var onBlurHandler = useCallback(function (event) {
+        var _a;
+        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.inputBlurred();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [onBlur]);
+    var onMouseUpHandler = useCallback(function () {
+        var _a;
+        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.mouseUpHandler();
+    }, []);
+    var onKeyDownHandler = useCallback(function (event) {
+        var _a;
+        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.keyDownHandler(event);
+    }, []);
+    var onInputRefCreated = useCallback(function (ref) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.inputElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', onKeyDownHandler);
+        (_d = (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.inputElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseup', onMouseUpHandler);
+        inputRef.current = ref;
+        (_f = (_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.inputElement) === null || _f === void 0 ? void 0 : _f.addEventListener('keydown', onKeyDownHandler);
+        (_h = (_g = inputRef.current) === null || _g === void 0 ? void 0 : _g.inputElement) === null || _h === void 0 ? void 0 : _h.addEventListener('mouseup', onMouseUpHandler);
+        inputElementRef.current = (_j = inputRef.current) === null || _j === void 0 ? void 0 : _j.inputElement;
+    }, []);
+    var focus = useCallback(function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    useImperativeHandle(ref, function () { return ({
+        focus: focus,
+    }); });
+    return (jsx(ContentEditableInput$1, { ref: function (refElement) { return refElement && onInputRefCreated(refElement); }, readOnly: readOnly, debounceTime: debounceTime, fillContainer: fillContainer, leftElement: leftElement, rightElement: rightElement, className: className, leftElementClassName: leftElementClassName, rightElementClassName: rightElementClassName, isSingleLine: isSingleLine, allowSingleLineScroll: allowSingleLineScroll, onFocus: onFocusHandler, onBlur: onBlurHandler, onElementCreate: onElementCreate, onLeftElementClick: onLeftElementClick, onRightElementClick: onRightElementClick }));
 };
+var FormattedInput$1 = memo(forwardRef(FormattedInput));
 
-var format$5 = {
-    formatParts: [
-        {
-            characterCount: 4,
-            placeholder: 'Y',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: true,
-            valueType: FormatValueType.Numeric,
-        },
-        {
-            characterCount: 1,
-            placeholder: '-',
-            inputText: '-',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'M',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 12,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '-',
-            inputText: '-',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'D',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 31,
-            exceedingMaximumValueCausesError: true,
-            padWithZeros: true,
-        },
-    ],
-};
-
-var format$4 = {
-    formatParts: [
-        {
-            characterCount: 2,
-            placeholder: 'D',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 31,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'M',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 12,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 4,
-            placeholder: 'Y',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: true,
-            valueType: FormatValueType.Numeric,
-        },
-        {
-            characterCount: 3,
-            placeholder: ' - ',
-            inputText: ' - ',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'D',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 31,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'M',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 12,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 4,
-            placeholder: 'Y',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: true,
-            valueType: FormatValueType.Numeric,
-        },
-    ],
-};
-
-var format$3 = {
-    formatParts: [
-        {
-            characterCount: 2,
-            placeholder: 'M',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 12,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'D',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 31,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 4,
-            placeholder: 'Y',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: true,
-            valueType: FormatValueType.Numeric,
-        },
-        {
-            characterCount: 3,
-            placeholder: ' - ',
-            inputText: ' - ',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'M',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 12,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'D',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 31,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 4,
-            placeholder: 'Y',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: true,
-            valueType: FormatValueType.Numeric,
-        },
-    ],
-};
-
-var format$2 = {
-    formatParts: [
-        {
-            characterCount: 4,
-            placeholder: 'Y',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: true,
-            valueType: FormatValueType.Numeric,
-        },
-        {
-            characterCount: 1,
-            placeholder: '-',
-            inputText: '-',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'M',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 12,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '-',
-            inputText: '-',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'D',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 31,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 3,
-            placeholder: ' - ',
-            inputText: ' - ',
-            isSeparator: true,
-        },
-        {
-            characterCount: 4,
-            placeholder: 'Y',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: true,
-            valueType: FormatValueType.Numeric,
-        },
-        {
-            characterCount: 1,
-            placeholder: '-',
-            inputText: '-',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'M',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 12,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: '/',
-            inputText: '/',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'D',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 31,
-            exceedingMaximumValueCausesError: true,
-            padWithZeros: true,
-        },
-    ],
-};
-
-var format$1 = {
-    formatParts: [
-        {
-            characterCount: 2,
-            placeholder: 'H',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 12,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: ':',
-            inputText: ':',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'M',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 0,
-            maximumValue: 59,
-            exceedingMaximumValueCausesError: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: ' ',
-            inputText: ' ',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            inputText: '_',
-            isSeparator: false,
-            possibleValues: ['AM', 'PM'],
-        },
-    ],
-};
-
-var format = {
-    formatParts: [
-        {
-            characterCount: 2,
-            placeholder: 'H',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 0,
-            maximumValue: 23,
-            exceedingMaximumValueCausesTab: true,
-            padWithZeros: true,
-        },
-        {
-            characterCount: 1,
-            placeholder: ':',
-            inputText: ':',
-            isSeparator: true,
-        },
-        {
-            characterCount: 2,
-            placeholder: 'M',
-            inputText: '_',
-            isSeparator: false,
-            allCharactersRequired: false,
-            valueType: FormatValueType.Numeric,
-            minimumValue: 1,
-            maximumValue: 59,
-            exceedingMaximumValueCausesError: true,
-            padWithZeros: true,
-        },
-    ],
-};
-
-var FormattedInput = function (props, ref) {
-    var _a = props.value, value = _a === void 0 ? '' : _a, format$8 = props.format, _b = props.defaultFormat, defaultFormat = _b === void 0 ? FormattedInputDefaultFormats.Custom : _b, _c = props.readOnly, readOnly = _c === void 0 ? false : _c, _d = props.debounceTime, debounceTime = _d === void 0 ? 800 : _d, _e = props.fillContainer, fillContainer = _e === void 0 ? true : _e, leftElement = props.leftElement, rightElement = props.rightElement, className = props.className, leftElementClassName = props.leftElementClassName, rightElementClassName = props.rightElementClassName, _f = props.isSingleLine, isSingleLine = _f === void 0 ? false : _f, _g = props.allowSingleLineScroll, allowSingleLineScroll = _g === void 0 ? false : _g, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onElementCreate = props.onElementCreate, onLeftElementClick = props.onLeftElementClick, onRightElementClick = props.onRightElementClick;
-    var inputRef = useRef();
-    var inputElementRef = useRef();
-    var formatParser = useRef();
-    useEffect(function () {
-        return function () {
-            var _a;
-            (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.dispose();
-        };
-    }, []);
-    useEffect(function () {
-        var _a;
-        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.inputValuePassed(value);
-    }, [value]);
-    useEffect(function () {
-        var _a, _b, _c;
-        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.dispose();
-        if (defaultFormat !== FormattedInputDefaultFormats.Custom) {
-            var formatSetting = getPreDefinedFormat(defaultFormat);
-            if (!formatSetting) {
-                throw new Error('The selected format does not exist');
-            }
-            formatParser.current = new FormatParser(formatSetting, value);
-        }
-        else {
-            if (!format$8) {
-                throw new Error('The format property is required when the default format is custom');
-            }
-            formatParser.current = new FormatParser(format$8, value);
-        }
-        if (inputElementRef.current) {
-            (_b = formatParser.current) === null || _b === void 0 ? void 0 : _b.inputElementCreated(inputElementRef.current);
-        }
-        (_c = formatParser.current) === null || _c === void 0 ? void 0 : _c.registerFormatChangeEvent(onFormatChange);
-    }, [defaultFormat, format$8]);
-    var onFormatChange = useCallback(function (value) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(value);
-    }, [onChange]);
-    var getPreDefinedFormat = useCallback(function (format$8) {
-        switch (format$8) {
-            case FormattedInputDefaultFormats.DateDayMonthYear:
-                return format$7;
-            case FormattedInputDefaultFormats.DateMonthDayYear:
-                return format$6;
-            case FormattedInputDefaultFormats.DateYearMonthDay:
-                return format$5;
-            case FormattedInputDefaultFormats.DateRangeDayMonthYear:
-                return format$4;
-            case FormattedInputDefaultFormats.DateRangeMonthDayYear:
-                return format$3;
-            case FormattedInputDefaultFormats.DateRangeYearMonthDay:
-                return format$2;
-            case FormattedInputDefaultFormats.Time12Hour:
-                return format$1;
-            case FormattedInputDefaultFormats.Time24Hour:
-                return format;
-        }
-    }, []);
-    var onFocusHandler = useCallback(function (event) {
-        var _a;
-        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.inputFocused();
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    }, [onFocus]);
-    var onBlurHandler = useCallback(function (event) {
-        var _a;
-        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.inputBlurred();
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-    }, [onBlur]);
-    var onMouseUpHandler = useCallback(function () {
-        var _a;
-        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.mouseUpHandler();
-    }, []);
-    var onKeyDownHandler = useCallback(function (event) {
-        var _a;
-        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.keyDownHandler(event);
-    }, []);
-    var onInputRefCreated = useCallback(function (ref) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.inputElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', onKeyDownHandler);
-        (_d = (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.inputElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseup', onMouseUpHandler);
-        inputRef.current = ref;
-        (_f = (_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.inputElement) === null || _f === void 0 ? void 0 : _f.addEventListener('keydown', onKeyDownHandler);
-        (_h = (_g = inputRef.current) === null || _g === void 0 ? void 0 : _g.inputElement) === null || _h === void 0 ? void 0 : _h.addEventListener('mouseup', onMouseUpHandler);
-        inputElementRef.current = (_j = inputRef.current) === null || _j === void 0 ? void 0 : _j.inputElement;
-    }, []);
-    var focus = useCallback(function () {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    useImperativeHandle(ref, function () { return ({
-        focus: focus,
-    }); });
-    return (jsx(ContentEditableInput$1, { ref: function (refElement) { return refElement && onInputRefCreated(refElement); }, readOnly: readOnly, debounceTime: debounceTime, fillContainer: fillContainer, leftElement: leftElement, rightElement: rightElement, className: className, leftElementClassName: leftElementClassName, rightElementClassName: rightElementClassName, isSingleLine: isSingleLine, allowSingleLineScroll: allowSingleLineScroll, onFocus: onFocusHandler, onBlur: onBlurHandler, onElementCreate: onElementCreate, onLeftElementClick: onLeftElementClick, onRightElementClick: onRightElementClick }));
-};
-var FormattedInput$1 = memo(forwardRef(FormattedInput));
-
-var DateTimeContext = createContext(undefined);
+var DateTimeContext = createContext(undefined);
 
 function getMonthMatrix(matrixDate, locale, loadOtherMonths) {
     var _a, _b;
@@ -32044,25 +31497,6 @@ function loadLocale(localeToLoad) {
         });
     });
 }
-function getDateFormatByLocale(locale) {
-    var year = 2023;
-    var month = 12;
-    var day = 20;
-    var date = new Date(year, month - 1, day);
-    var formattedDate = date.toLocaleDateString(locale, {
-        year: 'numeric',
-        month: 'numeric',
-        day: 'numeric',
-    });
-    return formattedDate.replace("".concat(year), 'YYYY').replace("".concat(month), 'MM').replace("".concat(day), 'DD');
-}
-function uses24HourTimeByLocale(locale) {
-    var date = new Date();
-    var hour = 18;
-    date.setHours(hour);
-    var timeParts = date.toLocaleTimeString(locale).split(':');
-    return timeParts[0] === '18';
-}
 function createDefaultColors() {
     return {
         inputBgColor: 'bsc-bg-white',
@@ -32083,16 +31517,19 @@ function parseDate(dateValue, locale) {
         localDate = parse(dateValue, 'P HH:mm', new Date(), { locale: locale });
         if (!isNaN(localDate.valueOf()))
             return localDate;
-        localDate = parse(dateValue, 'P HH:mm aaa', new Date(), { locale: locale });
+        localDate = parse(dateValue, 'P hh:mm a..aaa', new Date(), { locale: locale });
         if (!isNaN(localDate.valueOf()))
             return localDate;
         localDate = parse(dateValue, 'P HH:mm:ss', new Date(), { locale: locale });
         if (!isNaN(localDate.valueOf()))
             return localDate;
-        localDate = parse(dateValue, 'P HH:mm:ss aaa', new Date(), { locale: locale });
+        localDate = parse(dateValue, 'P hh:mm:ss a..aaa', new Date(), { locale: locale });
         if (!isNaN(localDate.valueOf()))
             return localDate;
         localDate = parse(dateValue, 'P', new Date(), { locale: locale });
+        if (!isNaN(localDate.valueOf()))
+            return localDate;
+        localDate = parse(dateValue, 'P p', new Date(), { locale: locale });
         if (!isNaN(localDate.valueOf()))
             return localDate;
         localDate = parse(dateValue, 'pp', new Date(), { locale: locale });
@@ -32167,7 +31604,7 @@ var DateTimeActionType;
     DateTimeActionType[DateTimeActionType["SetSelectedDateRange"] = 7] = "SetSelectedDateRange";
     DateTimeActionType[DateTimeActionType["SetSelectedStartDate"] = 8] = "SetSelectedStartDate";
     DateTimeActionType[DateTimeActionType["SetSelectedEndDate"] = 9] = "SetSelectedEndDate";
-    DateTimeActionType[DateTimeActionType["SetInputFormat"] = 10] = "SetInputFormat";
+    DateTimeActionType[DateTimeActionType["SetTimeFormat"] = 10] = "SetTimeFormat";
     DateTimeActionType[DateTimeActionType["ClearDates"] = 11] = "ClearDates";
     DateTimeActionType[DateTimeActionType["InitializeDates"] = 12] = "InitializeDates";
 })(DateTimeActionType || (DateTimeActionType = {}));
@@ -32193,16 +31630,13 @@ var reducer = function (state, action) {
             return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate, selectedEndDate: undefined });
         case DateTimeActionType.SetSelectedEndDate:
             return __assign(__assign({}, state), { selectedEndDate: action.selectedEndDate });
-        case DateTimeActionType.SetInputFormat:
-            return __assign(__assign({}, state), { timeFormat: action.inputFormat === FormattedInputDefaultFormats.Time24Hour
-                    ? TimeFormatType.TwentyFourHour
-                    : action.timeFormat || TimeFormatType.TwelveHour, inputFormat: action.inputFormat });
+        case DateTimeActionType.SetTimeFormat:
+            return __assign(__assign({}, state), { timeFormat: action.timeFormat || state.timeFormat });
         case DateTimeActionType.ClearDates:
             return {
                 currentSelector: state.currentSelector,
                 currentViewDate: state.currentViewDate,
                 timeFormat: state.timeFormat,
-                inputFormat: state.inputFormat,
                 dateInitialized: true,
             };
         case DateTimeActionType.InitializeDates:
@@ -32666,17 +32100,341 @@ function DateTimeYearSelector(_a) {
                     }) })) }))] })));
 }
 
+var DateTimeFormatCreator = (function () {
+    function DateTimeFormatCreator(dateSelection, localeCode) {
+        this.dateSelection = dateSelection;
+        var year = 2023;
+        var month = 12;
+        var day = 20;
+        var date = new Date(year, month - 1, day);
+        var format = date.toLocaleDateString(localeCode, {
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+        });
+        this.dateFormat = format.replace("".concat(year), 'YYYY').replace("".concat(month), 'MM').replace("".concat(day), 'DD');
+        var time = new Date();
+        var hour = 18;
+        var minute = 24;
+        var second = 37;
+        var milliseconds = 317;
+        time.setHours(hour, minute, second, milliseconds);
+        var testTimeFormat = time.toLocaleTimeString(localeCode);
+        this.use24HourTime = testTimeFormat.startsWith('18');
+        this.timeFormat = testTimeFormat
+            .replace("".concat(this.use24HourTime ? hour : '6'), 'HH')
+            .replace("".concat(minute), 'MM')
+            .replace("".concat(second), 'SS')
+            .replace("".concat(milliseconds), 'LLL');
+        this.createDateParts();
+    }
+    Object.defineProperty(DateTimeFormatCreator.prototype, "is24HourTime", {
+        get: function () {
+            return this.use24HourTime;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DateTimeFormatCreator.prototype.createInputFormat = function () {
+        var inputFormat = {
+            deleteShiftsFormatPart: false,
+            formatParts: [],
+        };
+        switch (this.dateSelection) {
+            case DateSelectionType.DateOnly:
+                return this.createDateFormat(inputFormat);
+            case DateSelectionType.TimeOnly:
+                return this.createTimeFormat(inputFormat);
+            case DateSelectionType.DateRange:
+                return this.createDateRangeFormat(inputFormat);
+            case DateSelectionType.DateTime:
+                return this.createDateTimeFormat(inputFormat);
+        }
+    };
+    DateTimeFormatCreator.prototype.createDateFormat = function (inputFormat) {
+        var _a, _b, _c;
+        if (this.dateFormat.startsWith('MM')) {
+            (_a = inputFormat.formatParts).push.apply(_a, this.createMonthDayYearFormatParts());
+        }
+        else if (this.dateFormat.startsWith('DD')) {
+            (_b = inputFormat.formatParts).push.apply(_b, this.createDayMonthYearFormatParts());
+        }
+        else {
+            (_c = inputFormat.formatParts).push.apply(_c, this.createYearMonthDayFormatParts());
+        }
+        return inputFormat;
+    };
+    DateTimeFormatCreator.prototype.createTimeFormat = function (inputFormat) {
+        var _a, _b;
+        if (!this.use24HourTime) {
+            (_a = inputFormat.formatParts).push.apply(_a, this.createTwelveHourFormatParts());
+        }
+        else {
+            (_b = inputFormat.formatParts).push.apply(_b, this.createTwentyFourHourFormatParts());
+        }
+        return inputFormat;
+    };
+    DateTimeFormatCreator.prototype.createDateRangeFormat = function (inputFormat) {
+        var _a;
+        var formatParts = [];
+        if (this.dateFormat.startsWith('MM')) {
+            formatParts.push.apply(formatParts, this.createMonthDayYearFormatParts());
+        }
+        else if (this.dateFormat.startsWith('DD')) {
+            formatParts.push.apply(formatParts, this.createDayMonthYearFormatParts());
+        }
+        else {
+            formatParts.push.apply(formatParts, this.createYearMonthDayFormatParts());
+        }
+        var dividerPart = {
+            characterCount: 3,
+            placeholder: ' - ',
+            inputText: ' - ',
+            isSeparator: true,
+        };
+        (_a = inputFormat.formatParts).push.apply(_a, __spreadArray(__spreadArray(__spreadArray([], formatParts, false), [dividerPart], false), formatParts, false));
+        return inputFormat;
+    };
+    DateTimeFormatCreator.prototype.createDateTimeFormat = function (inputFormat) {
+        var _a, _b, _c, _d, _e;
+        if (this.dateFormat.startsWith('MM')) {
+            (_a = inputFormat.formatParts).push.apply(_a, this.createMonthDayYearFormatParts());
+        }
+        else if (this.dateFormat.startsWith('DD')) {
+            (_b = inputFormat.formatParts).push.apply(_b, this.createDayMonthYearFormatParts());
+        }
+        else {
+            (_c = inputFormat.formatParts).push.apply(_c, this.createYearMonthDayFormatParts());
+        }
+        var dividerPart = {
+            characterCount: 1,
+            placeholder: ' ',
+            inputText: ' ',
+            isSeparator: true,
+        };
+        inputFormat.formatParts.push(dividerPart);
+        if (!this.use24HourTime) {
+            (_d = inputFormat.formatParts).push.apply(_d, this.createTwelveHourFormatParts());
+        }
+        else {
+            (_e = inputFormat.formatParts).push.apply(_e, this.createTwentyFourHourFormatParts());
+        }
+        return inputFormat;
+    };
+    DateTimeFormatCreator.prototype.createMonthDayYearFormatParts = function () {
+        if (this.monthPart && this.dayPart && this.yearPart) {
+            var tempDateFormat = this.dateFormat.replace('MM', '');
+            var placeholderIndex = tempDateFormat.indexOf('DD');
+            var placeholderText = tempDateFormat.substring(0, placeholderIndex);
+            tempDateFormat = tempDateFormat.replace(placeholderText, '').replace('DD', '');
+            var placeholder1 = {
+                characterCount: placeholderText.length,
+                placeholder: placeholderText,
+                inputText: placeholderText,
+                isSeparator: true,
+            };
+            placeholderIndex = tempDateFormat.indexOf('YYYY');
+            placeholderText = tempDateFormat.substring(0, placeholderIndex);
+            var placeholder2 = {
+                characterCount: placeholderText.length,
+                placeholder: placeholderText,
+                inputText: placeholderText,
+                isSeparator: true,
+            };
+            return [this.monthPart, placeholder1, this.dayPart, placeholder2, this.yearPart];
+        }
+        return [];
+    };
+    DateTimeFormatCreator.prototype.createDayMonthYearFormatParts = function () {
+        if (this.monthPart && this.dayPart && this.yearPart) {
+            var tempDateFormat = this.dateFormat.replace('DD', '');
+            var placeholderIndex = tempDateFormat.indexOf('MM');
+            var placeholderText = tempDateFormat.substring(0, placeholderIndex);
+            tempDateFormat = tempDateFormat.replace(placeholderText, '').replace('MM', '');
+            var placeholder1 = {
+                characterCount: placeholderText.length,
+                placeholder: placeholderText,
+                inputText: placeholderText,
+                isSeparator: true,
+            };
+            placeholderIndex = tempDateFormat.indexOf('YYYY');
+            placeholderText = tempDateFormat.substring(0, placeholderIndex);
+            var placeholder2 = {
+                characterCount: placeholderText.length,
+                placeholder: placeholderText,
+                inputText: placeholderText,
+                isSeparator: true,
+            };
+            return [this.dayPart, placeholder1, this.monthPart, placeholder2, this.yearPart];
+        }
+        return [];
+    };
+    DateTimeFormatCreator.prototype.createYearMonthDayFormatParts = function () {
+        if (this.monthPart && this.dayPart && this.yearPart) {
+            var tempDateFormat = this.dateFormat.replace('YYYY', '');
+            var placeholderIndex = tempDateFormat.indexOf('MM');
+            var placeholderText = tempDateFormat.substring(0, placeholderIndex);
+            tempDateFormat = tempDateFormat.replace(placeholderText, '').replace('MM', '');
+            var placeholder1 = {
+                characterCount: placeholderText.length,
+                placeholder: placeholderText,
+                inputText: placeholderText,
+                isSeparator: true,
+            };
+            placeholderIndex = tempDateFormat.indexOf('DD');
+            placeholderText = tempDateFormat.substring(0, placeholderIndex);
+            var placeholder2 = {
+                characterCount: placeholderText.length,
+                placeholder: placeholderText,
+                inputText: placeholderText,
+                isSeparator: true,
+            };
+            return [this.yearPart, placeholder1, this.monthPart, placeholder2, this.dayPart];
+        }
+        return [];
+    };
+    DateTimeFormatCreator.prototype.createTwelveHourFormatParts = function () {
+        if (this.twelveHourPart && this.minutePart && this.meridianPart) {
+            var tempTimeFormat = this.timeFormat.replace('HH', '');
+            var placeholderIndex = tempTimeFormat.indexOf('MM');
+            var placeholderText = tempTimeFormat.substring(0, placeholderIndex);
+            var placeholder1 = {
+                characterCount: placeholderText.length,
+                placeholder: placeholderText,
+                inputText: placeholderText,
+                isSeparator: true,
+            };
+            var placeholder2 = {
+                characterCount: 1,
+                placeholder: ' ',
+                inputText: ' ',
+                isSeparator: true,
+            };
+            return [this.twelveHourPart, placeholder1, this.minutePart, placeholder2, this.meridianPart];
+        }
+        return [];
+    };
+    DateTimeFormatCreator.prototype.createTwentyFourHourFormatParts = function () {
+        if (this.twentyFourHourPart && this.minutePart) {
+            var tempTimeFormat = this.timeFormat.replace('HH', '');
+            var placeholderIndex = tempTimeFormat.indexOf('MM');
+            var placeholderText = tempTimeFormat.substring(0, placeholderIndex);
+            var placeholder1 = {
+                characterCount: placeholderText.length,
+                placeholder: placeholderText,
+                inputText: placeholderText,
+                isSeparator: true,
+            };
+            return [this.twentyFourHourPart, placeholder1, this.minutePart];
+        }
+        return [];
+    };
+    DateTimeFormatCreator.prototype.createDateParts = function () {
+        this.monthPart = {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        };
+        this.dayPart = {
+            characterCount: 2,
+            placeholder: 'D',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 31,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        };
+        this.yearPart = {
+            characterCount: 4,
+            placeholder: 'Y',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: true,
+            valueType: FormatValueType.Numeric,
+        };
+        this.twelveHourPart = {
+            characterCount: 2,
+            placeholder: 'H',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        };
+        this.twentyFourHourPart = {
+            characterCount: 2,
+            placeholder: 'H',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 0,
+            maximumValue: 23,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        };
+        this.minutePart = {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 0,
+            maximumValue: 59,
+            exceedingMaximumValueCausesError: true,
+            padWithZeros: true,
+        };
+        this.meridianPart = {
+            characterCount: 2,
+            inputText: '_',
+            isSeparator: false,
+            valueType: FormatValueType.Text,
+            possibleValues: ['AM', 'PM'],
+        };
+    };
+    return DateTimeFormatCreator;
+}());
+
+var useGetDateTimeFormat = function (dateSelection, localeCode) {
+    var _a;
+    var _b = useState(), inputFormat = _b[0], setInputFormat = _b[1];
+    var formatCreator = useRef();
+    useEffect(function () {
+        if (localeCode && !inputFormat) {
+            formatCreator.current = new DateTimeFormatCreator(dateSelection, localeCode);
+            setInputFormat(formatCreator.current.createInputFormat());
+        }
+    }, [localeCode]);
+    return [inputFormat, (_a = formatCreator.current) === null || _a === void 0 ? void 0 : _a.is24HourTime];
+};
+
 function DateTime(_a) {
     var _b;
     var value = _a.value, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, label = _a.label, _d = _a.useDefaultDateValue, useDefaultDateValue = _d === void 0 ? false : _d, _e = _a.useFormattedInput, useFormattedInput = _e === void 0 ? false : _e, _f = _a.allowClear, allowClear = _f === void 0 ? false : _f, locale = _a.locale, className = _a.className, _g = _a.dateSelection, dateSelection = _g === void 0 ? DateSelectionType.DateTime : _g, dateFormat = _a.dateFormat, timeConstraints = _a.timeConstraints, icon = _a.icon, _h = _a.iconPosition, iconPosition = _h === void 0 ? CalendarIconPosition.Right : _h, inputElement = _a.inputElement, _j = _a.colors, colors = _j === void 0 ? createDefaultColors() : _j, selectableDate = _a.selectableDate, isValidDate = _a.isValidDate, onChange = _a.onChange, calendarTemplate = _a.calendarTemplate, dateScrollerTemplate = _a.dateScrollerTemplate, inputTemplate = _a.inputTemplate;
     var _k = useState(false), selectorOpen = _k[0], setSelectorOpen = _k[1];
-    var _l = useState(), dropDownTarget = _l[0], setDropDownTarget = _l[1];
+    var _l = useState(), localeCode = _l[0], setLocaleCode = _l[1];
+    var _m = useState(), dropDownTarget = _m[0], setDropDownTarget = _m[1];
     var isFormattedInput = useRef();
     var inputElementChanged = useRef(false);
     var language = useRef(locale || getBrowserLanguage());
     var loadedLocale = useRef();
     var inputElementRef = useRef();
     var dropDownTargetRef = useRef();
+    var _o = useGetDateTimeFormat(dateSelection, localeCode), inputFormat = _o[0], use24HourTime = _o[1];
     var contextProps = useRef({
         calendarTemplate: calendarTemplate,
         dateScrollerTemplate: dateScrollerTemplate,
@@ -32702,64 +32460,13 @@ function DateTime(_a) {
         }
     }, [value, loadedLocale.current]);
     useEffect(function () {
-        if (dateSelection && loadedLocale.current && loadedLocale.current.code) {
-            var dateFormatString = getDateFormatByLocale(loadedLocale.current.code);
-            if (dateSelection === DateSelectionType.DateOnly) {
-                if (dateFormatString === 'DD/MM/YYYY') {
-                    dispatcher({
-                        type: DateTimeActionType.SetInputFormat,
-                        inputFormat: FormattedInputDefaultFormats.DateDayMonthYear,
-                    });
-                }
-                else if (dateFormatString === 'MM/DD/YYYY') {
-                    dispatcher({
-                        type: DateTimeActionType.SetInputFormat,
-                        inputFormat: FormattedInputDefaultFormats.DateMonthDayYear,
-                    });
-                }
-                else if (dateFormatString === 'YYYY/MM/DD') {
-                    dispatcher({
-                        type: DateTimeActionType.SetInputFormat,
-                        inputFormat: FormattedInputDefaultFormats.DateYearMonthDay,
-                    });
-                }
-            }
-            else if (dateSelection === DateSelectionType.TimeOnly) {
-                if (uses24HourTimeByLocale(loadedLocale.current.code)) {
-                    dispatcher({
-                        type: DateTimeActionType.SetInputFormat,
-                        inputFormat: FormattedInputDefaultFormats.Time24Hour,
-                    });
-                }
-                else {
-                    dispatcher({
-                        type: DateTimeActionType.SetInputFormat,
-                        inputFormat: FormattedInputDefaultFormats.Time12Hour,
-                    });
-                }
-            }
-            else if (dateSelection === DateSelectionType.DateRange) {
-                if (dateFormatString === 'DD/MM/YYYY') {
-                    dispatcher({
-                        type: DateTimeActionType.SetInputFormat,
-                        inputFormat: FormattedInputDefaultFormats.DateRangeDayMonthYear,
-                    });
-                }
-                else if (dateFormatString === 'MM/DD/YYYY') {
-                    dispatcher({
-                        type: DateTimeActionType.SetInputFormat,
-                        inputFormat: FormattedInputDefaultFormats.DateRangeMonthDayYear,
-                    });
-                }
-                else if (dateFormatString === 'YYYY/MM/DD') {
-                    dispatcher({
-                        type: DateTimeActionType.SetInputFormat,
-                        inputFormat: FormattedInputDefaultFormats.DateRangeYearMonthDay,
-                    });
-                }
-            }
+        if (use24HourTime) {
+            dispatcher({
+                type: DateTimeActionType.SetTimeFormat,
+                timeFormat: use24HourTime ? TimeFormatType.TwentyFourHour : TimeFormatType.TwelveHour,
+            });
         }
-    }, [dateSelection, loadedLocale.current]);
+    }, [use24HourTime]);
     useEffect(function () {
         if (inputElement) {
             inputElementRef.current = inputElement;
@@ -32768,6 +32475,7 @@ function DateTime(_a) {
     var loadLocaleObject = function (localeToLoad) {
         loadLocale(localeToLoad)
             .then(function (locale) {
+            setLocaleCode(locale.code);
             loadedLocale.current = locale;
             var defaultDate = getDateValue();
             if (value || useDefaultDateValue) {
@@ -32806,11 +32514,21 @@ function DateTime(_a) {
         timeFormat: TimeFormatType.TwelveHour,
         dateInitialized: false,
     };
-    var _m = useReducer(reducer, initialState), state = _m[0], dispatcher = _m[1];
+    var _p = useReducer(reducer, initialState), state = _p[0], dispatcher = _p[1];
     var onFocus = function () {
         setDropDownElement();
         setSelectorOpen(true);
     };
+    var onBlur = useMemo(function () {
+        return lodashExports.debounce(function () {
+            setSelectorOpen(false);
+        }, 250);
+    }, []);
+    var onCalendarClick = useMemo(function () {
+        return lodashExports.debounce(function () {
+            onBlur.cancel();
+        }, 5);
+    }, [onBlur]);
     var onInput = function (event) {
         var dateString = event.target.innerText;
         onDateStringChange(dateString);
@@ -32852,7 +32570,7 @@ function DateTime(_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange();
         }
     };
-    var onCalendarClick = function () {
+    var onCalendarIconClick = function () {
         setDropDownElement();
         setSelectorOpen(!selectorOpen);
     };
@@ -32960,10 +32678,10 @@ function DateTime(_a) {
         ? {}
         : iconPosition === CalendarIconPosition.Right
             ? {
-                rightElement: (jsxs("div", __assign({ className: "bsc-flex" }, { children: [allowClear && !readOnly && (jsx("div", { children: jsx(FontAwesomeIcon, { className: "bsc-cursor-pointer bsc-text-sm", icon: ['fas', 'times'], size: "sm", onClick: onClearClick }) })), jsx("div", __assign({ className: "bsc-ml-2" }, { children: icon || (jsx(FontAwesomeIcon, { className: !readOnly ? 'bsc-cursor-pointer' : undefined, icon: ['far', 'calendar-alt'], onClick: !readOnly ? onCalendarClick : undefined })) }))] }))),
+                rightElement: (jsxs("div", __assign({ className: "bsc-flex" }, { children: [allowClear && !readOnly && (jsx("div", { children: jsx(FontAwesomeIcon, { className: "bsc-cursor-pointer bsc-text-sm", icon: ['fas', 'times'], size: "sm", onClick: onClearClick }) })), jsx("div", __assign({ className: "bsc-ml-2" }, { children: icon || (jsx(FontAwesomeIcon, { className: !readOnly ? 'bsc-cursor-pointer' : undefined, icon: ['far', 'calendar-alt'], onClick: !readOnly ? onCalendarIconClick : undefined })) }))] }))),
             }
             : {
-                leftElement: (jsxs("div", __assign({ className: "bsc-flex" }, { children: [jsx("div", __assign({ className: "bsc-mr-2" }, { children: icon || (jsx(FontAwesomeIcon, { className: !readOnly ? 'bsc-cursor-pointer' : undefined, icon: ['far', 'calendar-alt'], onClick: !readOnly ? onCalendarClick : undefined })) })), allowClear && !readOnly && (jsx("div", { children: jsx(FontAwesomeIcon, { className: "bsc-cursor-pointer bsc-text-sm", icon: ['fas', 'times'], size: "sm", onClick: onClearClick }) }))] }))),
+                leftElement: (jsxs("div", __assign({ className: "bsc-flex" }, { children: [jsx("div", __assign({ className: "bsc-mr-2" }, { children: icon || (jsx(FontAwesomeIcon, { className: !readOnly ? 'bsc-cursor-pointer' : undefined, icon: ['far', 'calendar-alt'], onClick: !readOnly ? onCalendarIconClick : undefined })) })), allowClear && !readOnly && (jsx("div", { children: jsx(FontAwesomeIcon, { className: "bsc-cursor-pointer bsc-text-sm", icon: ['fas', 'times'], size: "sm", onClick: onClearClick }) }))] }))),
             };
     var inputTemplateProps = {
         label: label,
@@ -32981,7 +32699,7 @@ function DateTime(_a) {
         _b["".concat((colors === null || colors === void 0 ? void 0 : colors.readOnlyInputBgColor) || 'bsc-bg-gray-200')] = readOnly,
         _b["".concat((colors === null || colors === void 0 ? void 0 : colors.inputBgColor) || 'bsc-bg-white')] = !readOnly,
         _b), "dark:bsc-bg-black ".concat(colors === null || colors === void 0 ? void 0 : colors.inputBorderColor, " bc-dt-input"), className);
-    return (jsx(DateTimeContext.Provider, __assign({ value: contextProps.current }, { children: jsxs("div", __assign({ className: "bc-date-time" }, { children: [label && jsx("label", __assign({ className: "dark:bsc-text-white bc-dt-label" }, { children: label })), jsx(TemplateOutlet, __assign({ props: inputTemplateProps, template: template }, { children: useFormattedInput === false || state.inputFormat === undefined ? (jsx(ContentEditableInput$1, __assign({ value: getValue(), readOnly: readOnly, className: inputStyles, onFocus: onFocus, onInput: onInput, onElementCreate: function (element) { return onInputElementCreated(element, false); } }, inputProps))) : (jsx(FormattedInput$1, __assign({ value: getValue(), readOnly: readOnly, className: inputStyles, onFocus: onFocus, onChange: onFormatStringChange, onElementCreate: function (element) { return onInputElementCreated(element, true); }, defaultFormat: state.inputFormat }, inputProps))) })), jsx(OverlayPanel, __assign({ visible: selectorOpen, target: dropDownTarget, shouldTargetCloseOverlay: false, shouldScrollCloseOverlay: true, shouldCheckZIndex: true, shouldRemainOnScreen: true, hidden: onDateTimeHidden, unmountWhenHidden: true }, { children: jsxs(Fragment, { children: [state.currentSelector === DateTimeActionType.DaySelector &&
+    return (jsx(DateTimeContext.Provider, __assign({ value: contextProps.current }, { children: jsxs("div", __assign({ className: "bc-date-time" }, { children: [label && jsx("label", __assign({ className: "dark:bsc-text-white bc-dt-label" }, { children: label })), jsx(TemplateOutlet, __assign({ props: inputTemplateProps, template: template }, { children: useFormattedInput === false ? (jsx(ContentEditableInput$1, __assign({ value: getValue(), readOnly: readOnly, className: inputStyles, onFocus: onFocus, onBlur: onBlur, onInput: onInput, onElementCreate: function (element) { return onInputElementCreated(element, false); } }, inputProps))) : (jsx(FormattedInput$1, __assign({ value: getValue(), readOnly: readOnly, className: inputStyles, format: inputFormat, onFocus: onFocus, onBlur: onBlur, onChange: onFormatStringChange, onElementCreate: function (element) { return onInputElementCreated(element, true); } }, inputProps))) })), jsx(OverlayPanel, __assign({ visible: selectorOpen, target: dropDownTarget, shouldTargetCloseOverlay: false, shouldScrollCloseOverlay: true, shouldCheckZIndex: true, shouldRemainOnScreen: true, hidden: onDateTimeHidden, isClickedWithin: onCalendarClick, unmountWhenHidden: true }, { children: jsxs(Fragment, { children: [state.currentSelector === DateTimeActionType.DaySelector &&
                                 canShowDateSelectors &&
                                 state.dateInitialized &&
                                 loadedLocale.current && (jsx(DateTimeDaySelector, { selectedDate: state.selectedDate, viewDate: state.currentViewDate, locale: loadedLocale.current, showTimeSelector: dateSelection === DateSelectionType.DateTime, selectableDate: selectableDate, isValidDate: isValidDate, dispatcher: dispatcher, onChange: onChange })), state.currentSelector === DateTimeActionType.MonthSelector &&