@alfalab/core-components 45.5.0 → 45.6.0-beta.1

package/date-range-input/modern-pcss-raw/components/date-range-input/Component.js

@@ -0,0 +1,209 @@
+import React, { useRef, useState, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import dateFnsIsValid from 'date-fns/isValid';
+import startOfMonth from 'date-fns/startOfMonth';
+import { usePeriod } from '../../../../calendar/modern-pcss-raw/shared';
+import { IconButton } from '../../../../icon-button/modern-pcss-raw';
+import { Popover } from '../../../../popover/modern-pcss-raw';
+import { useDidUpdateEffect } from '@alfalab/hooks';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
+import 'date-fns/parse';
+
+const styles = {"component":"component","calendarContainer":"calendarContainer","calendarResponsive":"calendarResponsive","block":"block","calendarIcon":"calendarIcon"};
+require('./index.css');
+
+/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
+const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, disableUserInput = false, picker, defaultValue = '', value: propValue, onChange, onComplete, onClose, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, InputComponent, Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, view = 'desktop', ...restProps }, ref) => {
+    const inputRef = useRef(null);
+    const iconRef = useRef(null);
+    const calendarRef = useRef(null);
+    const [value, setValue] = useState(propValue || defaultValue);
+    const [open, setOpen] = useState(defaultOpen);
+    const inputDisabled = disabled || readOnly;
+    const calendarResponsive = calendarProps?.responsive ?? true;
+    const { selectedFrom, selectedTo, updatePeriod, resetPeriod, setStart, setEnd } = usePeriod({ onPeriodChange: handlePeriodChange });
+    useEffect(() => {
+        if (value) {
+            setCalendarPeriod(getDates(value));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        setValue((prevValue) => {
+            if (selectedFrom && selectedTo) {
+                const from = parseTimestampToDate(selectedFrom);
+                const to = parseTimestampToDate(selectedTo);
+                return `${from} - ${to}`;
+            }
+            if (selectedFrom && prevValue.length < DATE_FORMAT.length) {
+                return parseTimestampToDate(selectedFrom);
+            }
+            return prevValue;
+        });
+    }, [selectedFrom, selectedTo]);
+    useDidUpdateEffect(() => {
+        const newPropValue = propValue || '';
+        setValue((prevValue) => {
+            if (prevValue === newPropValue) {
+                return prevValue;
+            }
+            const dates = getDates(newPropValue);
+            setCalendarPeriod(dates);
+            return dates.formattedValue;
+        });
+    }, [propValue]);
+    function getDates(val) {
+        const formattedValue = format(val);
+        const dateArr = formattedValue.split('-').map((v) => v.trim());
+        const dateFrom = dateArr[0] ? parseDateString(dateArr[0]) : undefined;
+        const dateTo = dateArr[1] ? parseDateString(dateArr[1]) : undefined;
+        return { formattedValue, dateFrom, dateTo, dateArr };
+    }
+    function setCalendarPeriod({ dateFrom, dateTo }) {
+        setStart(dateFrom?.getTime());
+        setEnd(dateTo?.getTime());
+    }
+    function handlePeriodChange(from, to) {
+        if (from && !to && value.length === DATE_MASK.length) {
+            setValue(parseTimestampToDate(from));
+        }
+        else if ((!from && !to && value.length === DATE_FORMAT.length) ||
+            (from === to && value.length === DATE_MASK.length)) {
+            setValue('');
+        }
+        const dateFrom = from ? new Date(from) : undefined;
+        const dateTo = to ? new Date(to) : undefined;
+        const newValue = [from, to].filter(Boolean)
+            .map((timestamp) => parseTimestampToDate(timestamp))
+            .join(' - ');
+        onChange?.({
+            dateFrom,
+            dateTo,
+            value: newValue,
+        });
+        if (dateFrom && dateTo) {
+            onComplete?.({
+                dateFrom,
+                dateTo,
+                value: newValue,
+            });
+        }
+    }
+    const handleInputWrapperFocus = (event) => {
+        if (view === 'desktop') {
+            if (picker) {
+                setOpen(true);
+            }
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
+        }
+    };
+    const handleBlur = (event) => {
+        if (view === 'desktop') {
+            const target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current?.contains(target) === false &&
+                inputRef.current?.contains(target) === false &&
+                iconRef.current?.contains(target) === false) {
+                setOpen(false);
+                if (onClose) {
+                    onClose();
+                }
+            }
+        }
+    };
+    // eslint-disable-next-line complexity
+    const handleChange = (event) => {
+        const { value: newValue } = event.target;
+        if (newValue.length > DATE_MASK.length)
+            return;
+        // Позволяем вводить только цифры, точки, дефис и пробелы
+        if (/[^\d. -]/.test(newValue)) {
+            return;
+        }
+        const dots = newValue.match(/\./g);
+        const hyphen = newValue.match(/\-/g);
+        // Не даем вводить больше, чем 4 точки и 1 дефис
+        if ((dots && dots.length > 4) || (hyphen && hyphen.length > 1)) {
+            return;
+        }
+        const { formattedValue, dateFrom, dateTo, dateArr } = getDates(newValue);
+        if (!dateFrom && !dateTo) {
+            resetPeriod();
+        }
+        else if (selectedFrom && formattedValue.length < DATE_FORMAT.length) {
+            setStart();
+        }
+        else if (selectedFrom && selectedTo) {
+            setEnd();
+        }
+        else if (dateFrom &&
+            dateFnsIsValid(dateFrom) &&
+            dateArr[0]?.length === DATE_FORMAT.length &&
+            dateFrom.getTime() !== selectedFrom) {
+            setStart(dateFrom.getTime());
+        }
+        else if (dateTo &&
+            dateFnsIsValid(dateTo) &&
+            dateArr[1]?.length === DATE_FORMAT.length &&
+            dateTo.getTime() !== selectedTo) {
+            setEnd(dateTo.getTime());
+        }
+        setValue(formattedValue);
+        onChange?.({ dateFrom, dateTo, value: formattedValue }, event);
+        if (isCompleteDateInput(formattedValue)) {
+            const valid = isValid(formattedValue, dateArr[0], dateArr[1]);
+            if (!valid)
+                return;
+            if (dateFrom && dateTo) {
+                onComplete?.({ dateFrom, dateTo, value: formattedValue }, event);
+            }
+        }
+    };
+    const handleCalendarClose = () => {
+        if (view === 'mobile' && onClose) {
+            onClose();
+        }
+        setOpen(false);
+    };
+    const handleClear = () => {
+        setValue('');
+        resetPeriod();
+    };
+    const handleCalendarChange = (date) => {
+        updatePeriod(date);
+    };
+    const handleCalendarWrapperMouseDown = (event) => {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    };
+    const handleIconButtonClick = () => {
+        if (!open)
+            setOpen(true);
+        if (view === 'desktop' && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    const renderCalendar = () => {
+        const activeMonth = (selectedTo && startOfMonth(selectedTo)) ||
+            (selectedFrom && startOfMonth(selectedFrom));
+        return Calendar ? (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
+            React.createElement(Calendar, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: activeMonth || defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events }))) : null;
+    };
+    return (React.createElement("div", { className: cn(styles.component, className, {
+            [styles.block]: block,
+        }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
+        InputComponent ? (React.createElement(InputComponent, { autoComplete: picker ? 'off' : undefined, ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, rightAddons: React.createElement(React.Fragment, null,
+                rightAddons,
+                picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })) : null,
+        picker &&
+            (view === 'desktop' ? (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
+                    [styles.calendarResponsive]: calendarResponsive,
+                }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar())) : (renderCalendar()))));
+});
+
+export { DateRangeInput };

package/date-range-input/modern-pcss-raw/components/date-range-input/index.css

@@ -0,0 +1,64 @@
+/* hash: 1vv4c */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-m: 8px;
+} :root {
+    --gap-s-neg: -12px;
+} :root {
+} :root {
+} :root {
+    --calendar-width: 344px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+} :root {
+    --calendar-popover-border-radius: var(--border-radius-m);
+} .component {
+    display: inline-block;
+    outline: none;
+    position: relative;
+} .calendarContainer {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-popover-border-radius);
+    border: 1px solid var(--color-light-neutral-300)
+} @media (max-width: 374px) { .calendarContainer {
+        width: 100%;
+        min-width: 288px
+}
+    } .calendarResponsive {
+    width: var(--calendar-width);
+} .block {
+    width: 100%;
+} .calendarIcon {
+    margin-right: var(--gap-s-neg);
+    height: 100%;
+}

package/date-range-input/modern-pcss-raw/components/date-range-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/date-range-input/modern-pcss-raw/components/date-range-input/index.js

@@ -0,0 +1,13 @@
+export { DateRangeInput } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
+import '../../../../calendar/modern-pcss-raw/shared';
+import '../../../../icon-button/modern-pcss-raw';
+import '../../../../popover/modern-pcss-raw';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../../utils/format.js';
+import 'date-fns/parse';

package/date-range-input/modern-pcss-raw/desktop/Component.desktop.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { ConditionalProps, DateRangeInputProps } from "../components/date-range-input/index";
+type DateRangeInputDesktopProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose' | 'InputComponent'> & ConditionalProps;
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const DateRangeInputDesktop: React.ForwardRefExoticComponent<DateRangeInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { DateRangeInputDesktopProps, DateRangeInputDesktop };

package/date-range-input/modern-pcss-raw/desktop/Component.desktop.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import { CalendarDesktop } from '../../../calendar/modern-pcss-raw/desktop';
+import { InputDesktop } from '../../../input/modern-pcss-raw/desktop';
+import { DateRangeInput } from '../components/date-range-input/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
+import '../../../calendar/modern-pcss-raw/shared';
+import '../../../icon-button/modern-pcss-raw';
+import '../../../popover/modern-pcss-raw';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../utils/format.js';
+import 'date-fns/parse';
+
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+const DateRangeInputDesktop = forwardRef((props, ref) => (React.createElement(DateRangeInput, { InputComponent: InputDesktop, Calendar: CalendarDesktop, ...props, ref: ref })));
+
+export { DateRangeInputDesktop };

package/date-range-input/modern-pcss-raw/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop";
+export {};

package/date-range-input/modern-pcss-raw/desktop/index.js

@@ -0,0 +1,16 @@
+export { DateRangeInputDesktop } from './Component.desktop.js';
+import 'react';
+import '../../../calendar/modern-pcss-raw/desktop';
+import '../../../input/modern-pcss-raw/desktop';
+import '../components/date-range-input/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
+import '../../../calendar/modern-pcss-raw/shared';
+import '../../../icon-button/modern-pcss-raw';
+import '../../../popover/modern-pcss-raw';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../utils/format.js';
+import 'date-fns/parse';

package/date-range-input/modern-pcss-raw/index.d.ts

@@ -0,0 +1,3 @@
+export { DateRangeInputResponsive as DateRangeInput } from "./Component.responsive";
+export type { DateRangeInputResponsiveProps as DateRangeInputProps } from "./Component.responsive";
+export {};

package/date-range-input/modern-pcss-raw/index.js

@@ -0,0 +1,20 @@
+export { DateRangeInputResponsive as DateRangeInput } from './Component.responsive.js';
+import 'react';
+import '@alfalab/hooks';
+import './desktop/Component.desktop.js';
+import '../../calendar/modern-pcss-raw/desktop';
+import '../../input/modern-pcss-raw/desktop';
+import './components/date-range-input/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
+import '../../calendar/modern-pcss-raw/shared';
+import '../../icon-button/modern-pcss-raw';
+import '../../popover/modern-pcss-raw';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './utils/format.js';
+import 'date-fns/parse';
+import './mobile/Component.mobile.js';
+import '../../calendar/modern-pcss-raw/mobile';
+import '../../input/modern-pcss-raw/mobile';

package/date-range-input/modern-pcss-raw/mobile/Component.mobile.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { ConditionalProps, DateRangeInputProps } from "../components/date-range-input/index";
+type DateRangeInputMobileProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose' | 'InputComponent'> & ConditionalProps;
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const DateRangeInputMobile: React.ForwardRefExoticComponent<DateRangeInputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { DateRangeInputMobileProps, DateRangeInputMobile };

package/date-range-input/modern-pcss-raw/mobile/Component.mobile.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import { CalendarMobile } from '../../../calendar/modern-pcss-raw/mobile';
+import { InputMobile } from '../../../input/modern-pcss-raw/mobile';
+import { DateRangeInput } from '../components/date-range-input/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
+import '../../../calendar/modern-pcss-raw/shared';
+import '../../../icon-button/modern-pcss-raw';
+import '../../../popover/modern-pcss-raw';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../utils/format.js';
+import 'date-fns/parse';
+
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+const DateRangeInputMobile = forwardRef((props, ref) => (React.createElement(DateRangeInput, { InputComponent: InputMobile, Calendar: CalendarMobile, view: 'mobile', ...props, ref: ref })));
+
+export { DateRangeInputMobile };

package/date-range-input/modern-pcss-raw/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile";
+export {};

package/date-range-input/modern-pcss-raw/mobile/index.js

@@ -0,0 +1,16 @@
+export { DateRangeInputMobile } from './Component.mobile.js';
+import 'react';
+import '../../../calendar/modern-pcss-raw/mobile';
+import '../../../input/modern-pcss-raw/mobile';
+import '../components/date-range-input/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
+import '../../../calendar/modern-pcss-raw/shared';
+import '../../../icon-button/modern-pcss-raw';
+import '../../../popover/modern-pcss-raw';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../utils/format.js';
+import 'date-fns/parse';

package/date-range-input/modern-pcss-raw/utils/format.d.ts

@@ -0,0 +1,8 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteDateInput: (input: string) => boolean;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+declare const isValid: (inputValue: string, dateFrom: string, dateTo: string) => boolean;
+declare const format: (value: string) => string;
+declare const parseTimestampToDate: (timestamp: number) => string;
+export { DATE_FORMAT, DATE_MASK, isCompleteDateInput, parseDateString, isValid, format, parseTimestampToDate };

package/date-range-input/modern-pcss-raw/utils/format.js

@@ -0,0 +1,81 @@
+import dateFnsIsValid from 'date-fns/isValid';
+import parse from 'date-fns/parse';
+
+/* eslint-disable no-useless-escape */
+const DATE_FORMAT = 'dd.MM.yyyy';
+const DATE_MASK = [
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    ' ',
+    '-',
+    ' ',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+];
+const isCompleteDateInput = (input) => input.length === DATE_MASK.length;
+const parseDateString = (value, dateFormat = DATE_FORMAT) => parse(value, dateFormat, new Date());
+const isValid = (inputValue, dateFrom, dateTo) => !inputValue ||
+    (isCompleteDateInput(inputValue) &&
+        dateFnsIsValid(parseDateString(dateFrom)) &&
+        dateFnsIsValid(parseDateString(dateTo)));
+const format = (value) => value
+    .replace(/^(\d\d)(\d)$/, '$1.$2') // 121 => 12.1
+    .replace(/^(\d\d)\.(\d\d)(\d)$/, '$1.$2.$3') // 12.122 => 12.12.2
+    .replace(/^(\d\d)\d\.(.*)/, '$1.$2') // 123.12.2005 => 12.12.2005
+    .replace(/^(\d\d\.\d\d)\d\.(.*)/, '$1.$2') // 12.123.2005 => 12.12.2005
+    .replace(/\.$/, '') // 12. => 12
+    .replace(/\ $/, '') // 1 2 => 12
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)(\d) - (\d.*)/, '$1 - $3') // 12.12.20051 - 12.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) (\d)- (\d.*)/, '$1 - $3') // 12.12.2005 1- 12.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) -(\d) (\d.*)/, '$1 - $3') // 12.12.2005 -1 12.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d)(\d\d.\d\d.\d\d\d)/, '$1 - $3') // 12.12.2005 - 112.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d)(\d\d.\d.\d\d\d\d)/, '$1 - $3') // 12.12.2005 - 112.1.2001 => 12.12.2005 - 12.1.2001
+    .replace(/^(\d\d\.\d\d)(\d\d\d\d)/, '$1.$2') // 12.122005 => 12.12.2005
+    .replace(/^(\d\d)(\d\d\.\d\d\d\d)/, '$1.$2') // 1212.2005 => 12.12.2005
+    .replace(/^(\d\d)(\d.*)/, '$1.$2') // 1212 => 12.12
+    .replace(/^(\d\d.\d\d)(\d.*)/, '$1.$2') // 12.122 => 12.12.2
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)(\d)/, '$1 - $2') // 12.12.20056 => 12.12.2005 - 6
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d\d)(\d)/, '$1 - $2.$3') // 12.12.2005 - 123 => 12.12.2005 - 12.3
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d\d).(\d\d)(\d)/, '$1 - $2.$3.$4') // 12.12.2005 - 12.123 => 12.12.2005 - 12.12.3
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)- (\d.*)/, '$1 - $2') // 12.12.2005- 12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) -(\d.*)/, '$1 - $2') // 12.12.2005 -12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) -/, '$1') // 12.12.2005 - => 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) (\d.*)/, '$1 - $2') // 12.12.2005 12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)  {2}(\d.*)/, '$1 - $2') // 12.12.2005  12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)-/, '$1') // 12.12.2005- => 12.12.2005
+    .replace(/^(\d\.\d\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.12.2005123123 => 1.12.2005
+    .replace(/^(\d\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 01.2.20055125125 => 01.2.2005
+    .replace(/^(\d)\.(\d\d)([0-9]*)\.(\d\d\d\d)/, '$1.$2.$4') // 1.123123.2005 => 1.12.2005
+    .replace(/^(\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.2.20055125125 => 1.2.2005
+    .replace(/^()\.(\d)\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3'); // .2.2005123123 => .2.2005
+const parseTimestampToDate = (timestamp) => {
+    const date = new Date(timestamp);
+    const year = date.getFullYear();
+    let month = date.getMonth() + 1;
+    let day = date.getDate();
+    if (month < 10) {
+        month = `0${month}`;
+    }
+    if (day < 10) {
+        day = `0${day}`;
+    }
+    return `${day}.${month}.${year}`;
+};
+
+export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate };

package/date-range-input/modern-pcss-raw/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./format";

package/date-range-input/modern-pcss-raw/utils/index.js

@@ -0,0 +1,3 @@
+export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate } from './format.js';
+import 'date-fns/isValid';
+import 'date-fns/parse';

package/date-time-input/components/date-time-input/Component.js

@@ -17,7 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"date-time-input__component_vykf6","calendarContainer":"date-time-input__calendarContainer_vykf6","calendarResponsive":"date-time-input__calendarResponsive_vykf6","block":"date-time-input__block_vykf6","calendarIcon":"date-time-input__calendarIcon_vykf6"};
+var styles = {"component":"date-time-input__component_1l5mq","calendarContainer":"date-time-input__calendarContainer_1l5mq","calendarResponsive":"date-time-input__calendarResponsive_1l5mq","block":"date-time-input__block_1l5mq","calendarIcon":"date-time-input__calendarIcon_1l5mq"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */

package/date-time-input/components/date-time-input/index.css

@@ -41,24 +41,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-time-input__component_vykf6 {
+} .date-time-input__component_1l5mq {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-time-input__calendarContainer_vykf6 {
+} .date-time-input__calendarContainer_1l5mq {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300)
-} @media (max-width: 374px) { .date-time-input__calendarContainer_vykf6 {
+} @media (max-width: 374px) { .date-time-input__calendarContainer_1l5mq {
         width: 100%;
         min-width: 288px
 }
-    } .date-time-input__calendarResponsive_vykf6 {
+    } .date-time-input__calendarResponsive_1l5mq {
     width: var(--calendar-width);
-} .date-time-input__block_vykf6 {
+} .date-time-input__block_1l5mq {
     width: 100%;
-} .date-time-input__calendarIcon_vykf6 {
+} .date-time-input__calendarIcon_1l5mq {
     margin-right: var(--gap-s-neg);
     height: 100%;
 }

package/date-time-input/esm/components/date-time-input/Component.js

@@ -11,7 +11,7 @@ import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isC
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-var styles = {"component":"date-time-input__component_vykf6","calendarContainer":"date-time-input__calendarContainer_vykf6","calendarResponsive":"date-time-input__calendarResponsive_vykf6","block":"date-time-input__block_vykf6","calendarIcon":"date-time-input__calendarIcon_vykf6"};
+var styles = {"component":"date-time-input__component_1l5mq","calendarContainer":"date-time-input__calendarContainer_1l5mq","calendarResponsive":"date-time-input__calendarResponsive_1l5mq","block":"date-time-input__block_1l5mq","calendarIcon":"date-time-input__calendarIcon_1l5mq"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */

package/date-time-input/esm/components/date-time-input/index.css

@@ -41,24 +41,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-time-input__component_vykf6 {
+} .date-time-input__component_1l5mq {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-time-input__calendarContainer_vykf6 {
+} .date-time-input__calendarContainer_1l5mq {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300)
-} @media (max-width: 374px) { .date-time-input__calendarContainer_vykf6 {
+} @media (max-width: 374px) { .date-time-input__calendarContainer_1l5mq {
         width: 100%;
         min-width: 288px
 }
-    } .date-time-input__calendarResponsive_vykf6 {
+    } .date-time-input__calendarResponsive_1l5mq {
     width: var(--calendar-width);
-} .date-time-input__block_vykf6 {
+} .date-time-input__block_1l5mq {
     width: 100%;
-} .date-time-input__calendarIcon_vykf6 {
+} .date-time-input__calendarIcon_1l5mq {
     margin-right: var(--gap-s-neg);
     height: 100%;
 }

package/date-time-input/modern/components/date-time-input/Component.js

@@ -10,7 +10,7 @@ import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isC
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-const styles = {"component":"date-time-input__component_vykf6","calendarContainer":"date-time-input__calendarContainer_vykf6","calendarResponsive":"date-time-input__calendarResponsive_vykf6","block":"date-time-input__block_vykf6","calendarIcon":"date-time-input__calendarIcon_vykf6"};
+const styles = {"component":"date-time-input__component_1l5mq","calendarContainer":"date-time-input__calendarContainer_1l5mq","calendarResponsive":"date-time-input__calendarResponsive_1l5mq","block":"date-time-input__block_1l5mq","calendarIcon":"date-time-input__calendarIcon_1l5mq"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */