@mailstep/design-system 0.13.0-beta.1 → 0.13.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.13.0-beta.1",
+  "version": "0.13.1-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Header/components/UserMenu/index.js

@@ -6,8 +6,8 @@ import { UserInfoBlock } from "./components/UserInfo/index.js";
 import { useLogout } from "./hooks/useLogout.js";
 import { DropdownContentWrap, Line } from "./styles.js";
 import { useRef } from "react";
-import { th, useTheme } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { th, useTheme } from "@xstyled/styled-components";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/Header/components/UserMenu/index.tsx
 const UserMenu = ({ user, onLogout, hasUserMenu, userMenuOverride, withInitials, withChevron, withName, ignoreClickOutsideClosest }) => {

package/ui/Blocks/HidePrint/HidePrint.js

@@ -1,6 +1,6 @@
 import "react";
-import { jsx } from "react/jsx-runtime";
 import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Blocks/HidePrint/HidePrint.tsx
 const HideWrapper = styled.div`
   display: contents;

package/ui/Blocks/ImageList/ImageList.js

@@ -7,8 +7,8 @@ import { useControls } from "./hooks/useControls.js";
 import { useOnElementClick } from "./hooks/useOnElementClick.js";
 import { Control, ImageListContainer } from "./styles.js";
 import { useRef } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import { useDraggable } from "react-use-draggable-scroll";
 //#region packages/ui/Blocks/ImageList/ImageList.tsx
 const ImageList = ({ onImageUpload, onImageRemove, onImageClick, lightBoxAction, lightBoxActionTitle, images, isDisabled, selectable, max }) => {

package/ui/Blocks/LoginPage/LoginPage.js

@@ -5,8 +5,8 @@ import { LoginForm } from "./components/LoginForm.js";
 import "./utils/links.js";
 import { SocialLinks } from "./components/SocialLinks.js";
 import { CardBodyWithLanguage, LanguageBox, LogoWrapper, MailTo, MainLogo, Version, Wrapper } from "./styles.js";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/LoginPage/LoginPage.tsx
 const Login = ({ onSubmit, activeLanguage, onLanguageChange, children, brand, brandVariant, isSubmitting, isSubmitDisabled, withDistributionCenterSelect, distributionCenterOptions, selectedDistributionCenter, onChangeDistributionCenter, languageItems, version, backgroundImage, admin, hasSupport = true, hasSocialLinks = true, withPassword = true, withLogin = true, loginLabel, passwordLabel, formHeader }) => {

package/ui/Blocks/LoginPage/components/LoginForm.js

@@ -2,8 +2,8 @@ import Button from "../../../Elements/Button/Button.js";
 import SingleSelect from "../../../Elements/SingleSelect/SingleSelect.js";
 import { Input } from "../../../Forms/Input/Input.js";
 import { useCallback, useState } from "react";
-import styled$1, { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { x } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/LoginPage/components/LoginForm.tsx

package/ui/Blocks/LoginPage/components/SocialLinks.js

@@ -1,7 +1,7 @@
 import Icon from "../../../Elements/Icon/Icon.js";
 import { FACEBOOK_LINK, INSTAGRAM_LINK, LINKEDIN_LINK, TWITTER_LINK } from "../utils/links.js";
-import styled$1, { th } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { th } from "@xstyled/styled-components";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/LoginPage/components/SocialLinks.tsx
 const SocialLinksWrapper = styled$1.div`

package/ui/Blocks/Modal/Modal.js

@@ -9,8 +9,8 @@ import { Portal } from "../../Elements/Portal/index.js";
 import { ButtonsContainer, ButtonsWrapper, CloseButton, ContentContainer, DialogOverlay, DialogWindow, HeaderContainer, TitleContainer } from "./styles.js";
 import { widthMap } from "./utils.js";
 import { memo, useCallback, useEffect, useMemo } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Blocks/Modal/Modal.tsx
 const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title, titleIcon, onConfirm, confirmLabel, cancelLabel, extraActionLabel, isLoading, isConfirmDisabled, width = "narrow", onClose, hasFooter = true, hasHeader = true, background, ignoreClickOutside = false, closeEverywhere = false, withCloseIcon = true, overlayColor, minWidth, minHeight, maxWidth, maxHeight, variant = "compact", top, name }) => {
 	const closeDialog = useCallback(() => {

package/ui/Blocks/Popover/index.js

@@ -1,8 +1,8 @@
 import { useClickOutside } from "../Modal/hooks/useClickOutside.js";
 import { Portal } from "../../Elements/Portal/index.js";
 import "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import { Popper } from "react-popper";
 //#region packages/ui/Blocks/Popover/index.tsx
 const PopoverWrapper = styled$1.div`

package/ui/Blocks/Scheduler/components/BookedTimeSlots/index.js

@@ -2,8 +2,8 @@ import { getMinutesFromTime } from "../../utils/getMinutesFromTime.js";
 import { convertDateToTime } from "../../utils/convertDateToTime.js";
 import { convertMinutesToDuration } from "../../utils/convertMinutesToDuration.js";
 import { Body, BookedTimeSlot, Header } from "./styles.js";
-import { x } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import get from "lodash/get";
 //#region packages/ui/Blocks/Scheduler/components/BookedTimeSlots/index.tsx
 const BookedTimeSlots = ({ bookedTimeSlots, timeSlotDefinitions, handleTimeSlotClick, time }) => {

package/ui/Blocks/Scheduler/components/DateChanger/index.js

@@ -7,8 +7,8 @@ import Popover from "../../../Popover/index.js";
 import { formatDate } from "../../utils/formatDate.js";
 import { ArrowContainer, DateChangerContainer } from "./styles.js";
 import { useContext, useRef } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Blocks/Scheduler/components/DateChanger/index.tsx
 const DateChanger = ({ isLoading, date, handleChangeDate, closeDatePicker, handleNextDay, handlePrevDay, toggleDatepicker, isDatepickerOpen }) => {
 	const ref = useRef(null);

package/ui/Blocks/SideMenu/components/Footer.js

@@ -2,8 +2,8 @@ import { MenuItems } from "../../../Elements/Icon/icons/MenuItems.js";
 import { Paragraph4 } from "../../../Elements/Typography/Typography.js";
 import "../../../Elements/Typography/index.js";
 import { useCallback } from "react";
-import styled$1, { css } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { css } from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/SideMenu/components/Footer.tsx

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -1,12 +1,12 @@
 import { HamburgerMenu } from "../../../Elements/Icon/icons/HamburgerMenu.js";
 import { MobileCancel } from "../../../Elements/Icon/icons/MobileCancel.js";
 import "react";
-import { css, useTheme, x } from "@xstyled/styled-components";
+import styled from "styled-components";
 import { jsx } from "react/jsx-runtime";
+import { css, useTheme as useTheme$1, x } from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
-import styled$2 from "styled-components";
 //#region packages/ui/Blocks/SideMenu/components/HamburgerMenu.tsx
-const HamburgerMenuWrapper = styled$2(x.div)`
+const HamburgerMenuWrapper = styled(x.div)`
   width: 36px;
   height: 36px;
   border-radius: 70px;
@@ -36,7 +36,7 @@ const HamburgerMenuWrapper = styled$2(x.div)`
   }
 `;
 const HamburgerMenuButton = ({ isLeftMenuOpen, onClick }) => {
-	const theme = useTheme();
+	const theme = useTheme$1();
 	const neutralColor = th$1.color("neutral20")({ theme });
 	return /* @__PURE__ */ jsx(HamburgerMenuWrapper, {
 		mr: "8px",

package/ui/Blocks/SideMenu/components/SubitemTooltip.js

@@ -2,8 +2,8 @@ import { H6 } from "../../../Elements/Typography/Typography.js";
 import { Portal } from "../../../Elements/Portal/index.js";
 import { ItemLinkWrap, TooltipItemLabel, TooltipWrap } from "../styles.js";
 import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
 import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
 import { Popper } from "react-popper";
 //#region packages/ui/Blocks/SideMenu/components/SubitemTooltip.tsx
 const TooltipItem = ({ title, link = "", lightMode }) => {

package/ui/Blocks/Stepper/components/StepItem/index.js

@@ -1,8 +1,8 @@
 import { H7, Paragraph2 } from "../../../../Elements/Typography/Typography.js";
 import { StepCircle } from "../StepCircle/index.js";
 import { ContentWrapper, Line, StepItemContainer } from "./styles.js";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import { Trans } from "@lingui/react";
 import isBoolean from "lodash/isBoolean";
 //#region packages/ui/Blocks/Stepper/components/StepItem/index.tsx

package/ui/Elements/Alert/Alert.js

@@ -1,8 +1,8 @@
 import Icon from "../Icon/Icon.js";
 import "../Icon/index.js";
 import { ActionButton, CloseBtn, Description, IconWrap, LinkWrapper, StyledAlert, Text, Title, VerticalSeparator } from "./styles.js";
-import { th, useTheme, x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { th, useTheme, x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Alert/Alert.tsx
 const alertBackgroundColor = {
 	success: "green10",

package/ui/Elements/Alert/styles.js

@@ -1,9 +1,9 @@
 import Link from "../Link/Link.js";
 import "../Link/index.js";
+import styled from "styled-components";
 import { th, x } from "@xstyled/styled-components";
-import styled$2 from "styled-components";
 //#region packages/ui/Elements/Alert/styles.ts
-const StyledAlert = styled$2(x.div)`
+const StyledAlert = styled(x.div)`
   width: calc(100vw - 20px);
   display: flex;
   min-height: 48px;
@@ -24,32 +24,32 @@ const StyledAlert = styled$2(x.div)`
     width: 100%;
   }
 `;
-const VerticalSeparator = styled$2(x.div)`
+const VerticalSeparator = styled(x.div)`
   width: 4px;
   height: 36px;
   border-radius: 94px;
   background-color: ${({ $colorFill }) => $colorFill};
 `;
-const IconWrap = styled$2(x.div)`
+const IconWrap = styled(x.div)`
   margin: 0 13px 0 9px;
 `;
-const Title = styled$2.span`
+const Title = styled.span`
   font-size: 14px;
   line-height: 18px;
   font-weight: 600;
 `;
-const Text = styled$2.span`
+const Text = styled.span`
   font-size: 14px;
   line-height: 20px;
   font-weight: 400;
 `;
-const LinkWrapper = styled$2(Link)`
+const LinkWrapper = styled(Link)`
   font-size: 14px;
   font-weight: 600;
   color: ${({ $colorFill }) => $colorFill};
   margin-right: 10px;
 `;
-const ActionButton = styled$2.button`
+const ActionButton = styled.button`
   margin-right: 10px;
   font-size: 14px;
   font-weight: 600;
@@ -58,7 +58,7 @@ const ActionButton = styled$2.button`
   background-color: transparent;
   cursor: pointer;
 `;
-const CloseBtn = styled$2.button`
+const CloseBtn = styled.button`
   height: 30px;
   width: 30px;
   display: flex;
@@ -71,7 +71,7 @@ const CloseBtn = styled$2.button`
     cursor: pointer;
   }
 `;
-const Description = styled$2.div`
+const Description = styled.div`
   position: absolute;
   top: 3px;
   right: 8px;

package/ui/Elements/Badge/Badge.js

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
-import styled$1, { css, th, useTheme } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { css, th, useTheme } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Badge/Badge.tsx
 const Circle = styled$1.div`
   min-width: 12px;

package/ui/Elements/BarChartSymbol/BarChartSymbol.js

@@ -1,6 +1,6 @@
 import { Bar } from "./styles.js";
-import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/BarChartSymbol/BarChartSymbol.tsx
 const BarChartSymbol = ({ total = 3, height = 14, minHeight = 7, selected = 3, gap = 2, width = 3, color }) => {
 	return /* @__PURE__ */ jsx(x.div, {

package/ui/Elements/BorderedBox/BorderedBox.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1, { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1, { x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/BorderedBox/BorderedBox.tsx
 const StyledBox = styled$1(x.div)`
   display: flex;

package/ui/Elements/DatePicker/DatePicker.js

@@ -3,10 +3,11 @@ import SpaceAround_default from "../SpaceAround/index.js";
 import Datetime from "./Datetime/DateTime.js";
 import { DatePickerInput } from "./components/DatePickerInput/DatePickerInput.js";
 import "./components/DatePickerInput/index.js";
+import { getInputFormat } from "./utils/getInputFormat.js";
 import { DatePickerBase } from "./styles.js";
 import React, { useCallback, useContext } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import "moment/dist/locale/cs";
 import "moment/dist/locale/el";
 import "moment/dist/locale/it";
@@ -16,9 +17,11 @@ import "moment/dist/locale/sk";
 const defaultDateFormat = "DD.MM.YYYY";
 const DatePicker = ({ name, value, initialViewDate, error, label, disabled, isValidDate, onChange, dateFormat = defaultDateFormat, timeFormat = false, open, secondValue = null, input, icon = true, showInputLabel = false, showCalendarLabel = true, spaceAround = false, className, onClear, onInputChange, ...passProps }) => {
 	const locale = useContext(LanguageContext);
+	const inputFormat = getInputFormat(dateFormat, timeFormat);
 	const handleRenderInput = useCallback((inputProps, openCalendar) => /* @__PURE__ */ jsx(DatePickerInput, {
 		inputProps,
 		openCalendar,
+		format: inputFormat,
 		name,
 		label,
 		error,
@@ -35,7 +38,8 @@ const DatePicker = ({ name, value, initialViewDate, error, label, disabled, isVa
 		icon,
 		showInputLabel,
 		onClear,
-		onInputChange
+		onInputChange,
+		inputFormat
 	]);
 	const handleRenderView = useCallback((_, renderCalendar) => {
 		if (label && !showInputLabel) return /* @__PURE__ */ jsx(x.div, {

package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js

@@ -4,8 +4,8 @@ import { DatePickerRepeatTrans } from "../../utils/constants.js";
 import { FooterRow } from "./FooterRow.js";
 import { FooterRowLabel } from "./FooterRowLabel.js";
 import { useCallback } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
 //#region packages/ui/Elements/DatePicker/Datetime/components/DateRepeater.tsx
 const DateRepeater = ({ onChangeOthers, others, reset }) => {

package/ui/Elements/DatePicker/Datetime/components/Timepicker/Timepicker.js

@@ -4,11 +4,13 @@ import { FooterRowLabel } from "../FooterRowLabel.js";
 import "./constants.js";
 import { TimeButton, TimeField, TimeWrapper } from "./styles.js";
 import { padTime } from "./utils/padTime.js";
+import { isTimeFieldComplete } from "./utils/isTimeFieldComplete.js";
 import { parseTimeField } from "./utils/parseTimeField.js";
 import { sanitizeTimeField } from "./utils/sanitizeTimeField.js";
+import "./utils/index.js";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
 //#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/Timepicker.tsx
 const Timepicker = ({ setTime, value, disabled }) => {
@@ -18,6 +20,7 @@ const Timepicker = ({ setTime, value, disabled }) => {
 	const [minutesValue, setMinutesValue] = useState(padTime(minutes));
 	const isHoursEdited = useRef(false);
 	const isMinutesEdited = useRef(false);
+	const minutesRef = useRef(null);
 	useEffect(() => {
 		if (isHoursEdited.current) return;
 		setHoursValue(padTime(hours));
@@ -72,6 +75,8 @@ const Timepicker = ({ setTime, value, disabled }) => {
 		const parsed = parseTimeField(nextValue, NaN);
 		if (Number.isNaN(parsed) || parsed > 23) return;
 		commitTime("hours", parsed);
+		if (!isTimeFieldComplete(nextValue, parsed, 23)) return;
+		minutesRef.current?.focus();
 	}, [commitTime]);
 	const onMinutesChange = useCallback((e) => {
 		const nextValue = sanitizeTimeField(e.target.value);
@@ -93,14 +98,18 @@ const Timepicker = ({ setTime, value, disabled }) => {
 	}, []);
 	const onHoursBlur = useCallback(() => {
 		isHoursEdited.current = false;
-		const parsed = parseTimeField(hoursValue, NaN);
-		setHoursValue(padTime(!Number.isNaN(parsed) && parsed <= 23 ? parsed : hours));
-	}, [hoursValue, hours]);
+		setHoursValue((prev) => {
+			const parsed = parseTimeField(prev, NaN);
+			return padTime(!Number.isNaN(parsed) && parsed <= 23 ? parsed : hours);
+		});
+	}, [hours]);
 	const onMinutesBlur = useCallback(() => {
 		isMinutesEdited.current = false;
-		const parsed = parseTimeField(minutesValue, NaN);
-		setMinutesValue(padTime(!Number.isNaN(parsed) && parsed <= 59 ? parsed : minutes));
-	}, [minutesValue, minutes]);
+		setMinutesValue((prev) => {
+			const parsed = parseTimeField(prev, NaN);
+			return padTime(!Number.isNaN(parsed) && parsed <= 59 ? parsed : minutes);
+		});
+	}, [minutes]);
 	return /* @__PURE__ */ jsxs(FooterRow, {
 		disabled,
 		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Icon, { icon: "clock" }), /* @__PURE__ */ jsx(FooterRowLabel, { children: i18n._({
@@ -147,6 +156,7 @@ const Timepicker = ({ setTime, value, disabled }) => {
 							children: ":"
 						}),
 						/* @__PURE__ */ jsx(TimeField, {
+							ref: minutesRef,
 							value: minutesValue,
 							disabled,
 							inputMode: "numeric",

package/ui/Elements/DatePicker/Datetime/components/Timepicker/constants.d.ts

@@ -3,3 +3,4 @@ export declare const MINUTES_COUNT = 60;
 export declare const MINUTES_STEP = 5;
 export declare const MAX_HOURS: number;
 export declare const MAX_MINUTES: number;
+export declare const TIME_FIELD_LENGTH = 2;

package/ui/Elements/DatePicker/Datetime/components/Timepicker/constants.js

@@ -4,5 +4,6 @@ const MINUTES_COUNT = 60;
 const MINUTES_STEP = 5;
 const MAX_HOURS = 23;
 const MAX_MINUTES = 59;
+const TIME_FIELD_LENGTH = 2;
 //#endregion
-export { HOURS_COUNT, MAX_HOURS, MAX_MINUTES, MINUTES_COUNT, MINUTES_STEP };
+export { HOURS_COUNT, MAX_HOURS, MAX_MINUTES, MINUTES_COUNT, MINUTES_STEP, TIME_FIELD_LENGTH };

package/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { padTime } from './padTime';
+export { isTimeFieldComplete } from './isTimeFieldComplete';
 export { parseTimeField } from './parseTimeField';
 export { sanitizeTimeField } from './sanitizeTimeField';

package/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/index.js

@@ -1,4 +1,5 @@
 import { padTime } from "./padTime.js";
+import { isTimeFieldComplete } from "./isTimeFieldComplete.js";
 import { parseTimeField } from "./parseTimeField.js";
 import { sanitizeTimeField } from "./sanitizeTimeField.js";
-export { padTime, parseTimeField, sanitizeTimeField };
+export { isTimeFieldComplete, padTime, parseTimeField, sanitizeTimeField };

package/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/isTimeFieldComplete.d.ts

@@ -0,0 +1,3 @@
+type IsTimeFieldCompleteType = (text: string, value: number, max: number) => boolean;
+export declare const isTimeFieldComplete: IsTimeFieldCompleteType;
+export {};

package/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/isTimeFieldComplete.js

@@ -0,0 +1,5 @@
+import "../constants.js";
+//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/isTimeFieldComplete.ts
+const isTimeFieldComplete = (text, value, max) => text.length >= 2 || value * 10 > max;
+//#endregion
+export { isTimeFieldComplete };

package/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/sanitizeTimeField.js

@@ -1,3 +1,4 @@
+import "../constants.js";
 //#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/sanitizeTimeField.ts
 const sanitizeTimeField = (text) => text.replace(/\D/g, "").slice(0, 2);
 //#endregion

package/ui/Elements/DatePicker/components/DatePickerInput/DatePickerInput.d.ts

@@ -1,7 +1,11 @@
-import { type FC, type InputHTMLAttributes } from 'react';
+import { type ChangeEvent, type FC, type InputHTMLAttributes } from 'react';
+type DatetimeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+    onChange?: (event: ChangeEvent<HTMLInputElement> | string) => void;
+};
 type DatePickerInputProps = {
-    inputProps: InputHTMLAttributes<HTMLInputElement>;
+    inputProps: DatetimeInputProps;
     openCalendar: () => void;
+    format: string;
     name?: string;
     label?: string;
     error?: string;

package/ui/Elements/DatePicker/components/DatePickerInput/DatePickerInput.js

@@ -1,14 +1,42 @@
 import Input_default from "../../../../Forms/Input/index.js";
-import { useCallback, useState } from "react";
+import { applyDateMask } from "./utils/applyDateMask.js";
+import { countDigits } from "./utils/countDigits.js";
+import { getMaskedCaretPosition } from "./utils/getMaskedCaretPosition.js";
+import { isMaskableFormat } from "./utils/isMaskableFormat.js";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Elements/DatePicker/components/DatePickerInput/DatePickerInput.tsx
-const DatePickerInput = ({ inputProps, openCalendar, name, label, error, disabled, icon, showInputLabel, onClear, onInputChange }) => {
+const DatePickerInput = ({ inputProps, openCalendar, format, name, label, error, disabled, icon, showInputLabel, onClear, onInputChange }) => {
 	const [typedValue, setTypedValue] = useState(null);
+	const inputRef = useRef(null);
+	const caretPosition = useRef(null);
+	const isMasked = isMaskableFormat(format);
+	useLayoutEffect(() => {
+		if (caretPosition.current === null) return;
+		const caret = caretPosition.current;
+		caretPosition.current = null;
+		inputRef.current?.setSelectionRange(caret, caret);
+	});
 	const handleChange = useCallback((e) => {
-		setTypedValue(e.target.value);
-		inputProps.onChange?.(e);
-		onInputChange?.(e.target.value);
-	}, [inputProps, onInputChange]);
+		if (!isMasked) {
+			setTypedValue(e.target.value);
+			inputProps.onChange?.(e);
+			onInputChange?.(e.target.value);
+			return;
+		}
+		const { value, selectionStart } = e.target;
+		const digitsBeforeCaret = countDigits(value.slice(0, selectionStart ?? value.length));
+		const maskedValue = applyDateMask(value, format);
+		caretPosition.current = getMaskedCaretPosition(maskedValue, digitsBeforeCaret);
+		setTypedValue(maskedValue);
+		inputProps.onChange?.(maskedValue);
+		onInputChange?.(maskedValue);
+	}, [
+		inputProps,
+		onInputChange,
+		isMasked,
+		format
+	]);
 	const handleBlur = useCallback(() => {
 		setTypedValue(null);
 	}, []);
@@ -19,6 +47,7 @@ const DatePickerInput = ({ inputProps, openCalendar, name, label, error, disable
 		error,
 		disabled,
 		isInvalid: !!error,
+		inputRef,
 		onChange: handleChange,
 		onBlur: handleBlur,
 		label: showInputLabel ? label : void 0,

package/ui/Elements/DatePicker/components/DatePickerInput/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const MASKABLE_TOKENS: string[];
+export declare const DIGIT_PATTERN: RegExp;
+export declare const FORMAT_SLOT_PATTERN: RegExp;
+export declare const NON_DIGIT_PATTERN: RegExp;
+export declare const FORMAT_TOKEN_PATTERN: RegExp;

package/ui/Elements/DatePicker/components/DatePickerInput/constants.js

@@ -0,0 +1,16 @@
+//#region packages/ui/Elements/DatePicker/components/DatePickerInput/constants.ts
+const MASKABLE_TOKENS = [
+	"DD",
+	"MM",
+	"YY",
+	"YYYY",
+	"HH",
+	"mm",
+	"ss"
+];
+const DIGIT_PATTERN = /\d/;
+const FORMAT_SLOT_PATTERN = /[A-Za-z]/;
+const NON_DIGIT_PATTERN = /\D/g;
+const FORMAT_TOKEN_PATTERN = /[A-Za-z]+/g;
+//#endregion
+export { DIGIT_PATTERN, FORMAT_SLOT_PATTERN, FORMAT_TOKEN_PATTERN, MASKABLE_TOKENS, NON_DIGIT_PATTERN };

package/ui/Elements/DatePicker/components/DatePickerInput/utils/applyDateMask.d.ts

@@ -0,0 +1,3 @@
+type ApplyDateMaskType = (value: string, format: string) => string;
+export declare const applyDateMask: ApplyDateMaskType;
+export {};

package/ui/Elements/DatePicker/components/DatePickerInput/utils/applyDateMask.js

@@ -0,0 +1,19 @@
+import { FORMAT_SLOT_PATTERN, NON_DIGIT_PATTERN } from "../constants.js";
+//#region packages/ui/Elements/DatePicker/components/DatePickerInput/utils/applyDateMask.ts
+const applyDateMask = (value, format) => {
+	const digits = value.replace(NON_DIGIT_PATTERN, "");
+	let masked = "";
+	let digitIndex = 0;
+	for (const char of format) {
+		if (digitIndex >= digits.length) break;
+		if (FORMAT_SLOT_PATTERN.test(char)) {
+			masked += digits[digitIndex];
+			digitIndex += 1;
+			continue;
+		}
+		masked += char;
+	}
+	return masked;
+};
+//#endregion
+export { applyDateMask };

package/ui/Elements/DatePicker/components/DatePickerInput/utils/countDigits.d.ts

@@ -0,0 +1,3 @@
+type CountDigitsType = (text: string) => number;
+export declare const countDigits: CountDigitsType;
+export {};

package/ui/Elements/DatePicker/components/DatePickerInput/utils/countDigits.js

@@ -0,0 +1,5 @@
+import { NON_DIGIT_PATTERN } from "../constants.js";
+//#region packages/ui/Elements/DatePicker/components/DatePickerInput/utils/countDigits.ts
+const countDigits = (text) => text.replace(NON_DIGIT_PATTERN, "").length;
+//#endregion
+export { countDigits };

package/ui/Elements/DatePicker/components/DatePickerInput/utils/getMaskedCaretPosition.d.ts

@@ -0,0 +1,3 @@
+type GetMaskedCaretPositionType = (maskedValue: string, digitsBeforeCaret: number) => number;
+export declare const getMaskedCaretPosition: GetMaskedCaretPositionType;
+export {};

package/ui/Elements/DatePicker/components/DatePickerInput/utils/getMaskedCaretPosition.js

@@ -0,0 +1,14 @@
+import { DIGIT_PATTERN } from "../constants.js";
+//#region packages/ui/Elements/DatePicker/components/DatePickerInput/utils/getMaskedCaretPosition.ts
+const getMaskedCaretPosition = (maskedValue, digitsBeforeCaret) => {
+	if (digitsBeforeCaret <= 0) return 0;
+	let digits = 0;
+	for (let index = 0; index < maskedValue.length; index += 1) {
+		if (!DIGIT_PATTERN.test(maskedValue[index])) continue;
+		digits += 1;
+		if (digits === digitsBeforeCaret) return index + 1;
+	}
+	return maskedValue.length;
+};
+//#endregion
+export { getMaskedCaretPosition };

package/ui/Elements/DatePicker/components/DatePickerInput/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { applyDateMask } from './applyDateMask';
+export { countDigits } from './countDigits';
+export { getMaskedCaretPosition } from './getMaskedCaretPosition';
+export { isMaskableFormat } from './isMaskableFormat';

package/ui/Elements/DatePicker/components/DatePickerInput/utils/index.js

@@ -0,0 +1,5 @@
+import { applyDateMask } from "./applyDateMask.js";
+import { countDigits } from "./countDigits.js";
+import { getMaskedCaretPosition } from "./getMaskedCaretPosition.js";
+import { isMaskableFormat } from "./isMaskableFormat.js";
+export { applyDateMask, countDigits, getMaskedCaretPosition, isMaskableFormat };

package/ui/Elements/DatePicker/components/DatePickerInput/utils/isMaskableFormat.d.ts

@@ -0,0 +1,3 @@
+type IsMaskableFormatType = (format: string) => boolean;
+export declare const isMaskableFormat: IsMaskableFormatType;
+export {};

package/ui/Elements/DatePicker/components/DatePickerInput/utils/isMaskableFormat.js

@@ -0,0 +1,9 @@
+import { FORMAT_TOKEN_PATTERN, MASKABLE_TOKENS } from "../constants.js";
+//#region packages/ui/Elements/DatePicker/components/DatePickerInput/utils/isMaskableFormat.ts
+const isMaskableFormat = (format) => {
+	const tokens = format.match(FORMAT_TOKEN_PATTERN);
+	if (!tokens?.length) return false;
+	return tokens.every((token) => MASKABLE_TOKENS.includes(token));
+};
+//#endregion
+export { isMaskableFormat };