@am92/react-design-system 2.5.4 → 2.5.6

package/dist/locale.js

@@ -1 +1,58 @@
-export * from '@mui/material/locale';
+export { amET as DsLocaleAmET } from '@mui/material/locale';
+export { arEG as DsLocaleArEG } from '@mui/material/locale';
+export { arSA as DsLocaleArSA } from '@mui/material/locale';
+export { arSD as DsLocaleArSD } from '@mui/material/locale';
+export { azAZ as DsLocaleAzAZ } from '@mui/material/locale';
+export { bnBD as DsLocaleBnBD } from '@mui/material/locale';
+export { beBY as DsLocaleBeBY } from '@mui/material/locale';
+export { bgBG as DsLocaleBgBG } from '@mui/material/locale';
+export { caES as DsLocaleCaES } from '@mui/material/locale';
+export { csCZ as DsLocaleCsCZ } from '@mui/material/locale';
+export { daDK as DsLocaleDaDK } from '@mui/material/locale';
+export { deDE as DsLocaleDeDE } from '@mui/material/locale';
+export { elGR as DsLocaleElGR } from '@mui/material/locale';
+export { enUS as DsLocaleEnUS } from '@mui/material/locale';
+export { esES as DsLocaleEsES } from '@mui/material/locale';
+export { etEE as DsLocaleEtEE } from '@mui/material/locale';
+export { faIR as DsLocaleFaIR } from '@mui/material/locale';
+export { fiFI as DsLocaleFiFI } from '@mui/material/locale';
+export { frFR as DsLocaleFrFR } from '@mui/material/locale';
+export { heIL as DsLocaleHeIL } from '@mui/material/locale';
+export { hiIN as DsLocaleHiIN } from '@mui/material/locale';
+export { hrHR as DsLocaleHrHR } from '@mui/material/locale';
+export { huHU as DsLocaleHuHU } from '@mui/material/locale';
+export { hyAM as DsLocaleHyAM } from '@mui/material/locale';
+export { idID as DsLocaleIdID } from '@mui/material/locale';
+export { isIS as DsLocaleIsIS } from '@mui/material/locale';
+export { itIT as DsLocaleItIT } from '@mui/material/locale';
+export { jaJP as DsLocaleJaJP } from '@mui/material/locale';
+export { khKH as DsLocaleKhKH } from '@mui/material/locale';
+export { koKR as DsLocaleKoKR } from '@mui/material/locale';
+export { kuCKB as DsLocaleKuCKB } from '@mui/material/locale';
+export { kuLatn as DsLocaleKuLatn } from '@mui/material/locale';
+export { kkKZ as DsLocaleKkKZ } from '@mui/material/locale';
+export { mkMK as DsLocaleMkMK } from '@mui/material/locale';
+export { myMY as DsLocaleMyMY } from '@mui/material/locale';
+export { msMS as DsLocaleMsMS } from '@mui/material/locale';
+export { neNP as DsLocaleNeNP } from '@mui/material/locale';
+export { nbNO as DsLocaleNbNO } from '@mui/material/locale';
+export { nnNO as DsLocaleNnNO } from '@mui/material/locale';
+export { nlNL as DsLocaleNlNL } from '@mui/material/locale';
+export { plPL as DsLocalePlPL } from '@mui/material/locale';
+export { ptBR as DsLocalePtBR } from '@mui/material/locale';
+export { ptPT as DsLocalePtPT } from '@mui/material/locale';
+export { roRO as DsLocaleRoRO } from '@mui/material/locale';
+export { srRS as DsLocaleSrRS } from '@mui/material/locale';
+export { ruRU as DsLocaleRuRU } from '@mui/material/locale';
+export { siLK as DsLocaleSiLK } from '@mui/material/locale';
+export { skSK as DsLocaleSkSK } from '@mui/material/locale';
+export { svSE as DsLocaleSvSE } from '@mui/material/locale';
+export { thTH as DsLocaleThTH } from '@mui/material/locale';
+export { trTR as DsLocaleTrTR } from '@mui/material/locale';
+export { tlTL as DsLocaleTlTL } from '@mui/material/locale';
+export { ukUA as DsLocaleUkUA } from '@mui/material/locale';
+export { urPK as DsLocaleUrPK } from '@mui/material/locale';
+export { viVN as DsLocaleViVN } from '@mui/material/locale';
+export { zhCN as DsLocaleZhCN } from '@mui/material/locale';
+export { zhHK as DsLocaleZhHK } from '@mui/material/locale';
+export { zhTW as DsLocaleZhTW } from '@mui/material/locale';

package/dist/x-datepicker/Components/DsDatePicker/DateCalenderHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PickersCalendarHeaderProps } from '@mui/x-date-pickers';
+export declare const DateCalenderHeader: React.ForwardRefExoticComponent<PickersCalendarHeaderProps<Date> & React.RefAttributes<HTMLDivElement>>;

package/dist/x-datepicker/Components/DsDatePicker/DateCalenderHeader.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useThemeProps } from '@mui/system';
+import { useUtils } from '@mui/x-date-pickers/internals';
+import { DsStack, DsIconButton, DsRemixIcon, DsButtonBase, DsTypography } from '../../../Components';
+export const DateCalenderHeader = React.forwardRef(function PickersCalendarHeader(inProps, ref) {
+    // const translations = usePickersTranslations<TDate>()
+    const utils = useUtils();
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MuiPickersCalendarHeader'
+    });
+    const { currentMonth, view } = props;
+    const handleMonthChange = (direction, numberOfMonths) => () => {
+        const { currentMonth, onMonthChange } = props;
+        onMonthChange(utils.addMonths(currentMonth, numberOfMonths), direction);
+    };
+    const handleViewShow = (view) => () => {
+        const { onViewChange } = props;
+        onViewChange && onViewChange(view);
+    };
+    const isYearNavigationDisabled = view === 'month';
+    const isMonthNavigationDisabled = view === 'year';
+    return (_jsxs(DsStack, { direction: "row", justifyContent: "space-between", 
+        // spacing='var(--ds-spacing-frostbite)'
+        sx: { p: 'var(--ds-spacing-frostbite)' }, children: [_jsxs(DsStack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: "var(--ds-spacing-frostbite)", children: [_jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange('left', -1), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-left-line" }) }), _jsxs(DsButtonBase, { disabled: isMonthNavigationDisabled, onClick: handleViewShow('month'), children: [_jsx(DsTypography, { variant: "bodyBoldSmall", color: isMonthNavigationDisabled ? 'text.disabled' : 'text.primary', children: utils.formatByString(currentMonth, utils.formats.monthShort) }), _jsx(DsRemixIcon, { className: "ri-arrow-drop-down-fill", color: isMonthNavigationDisabled ? 'iconDisabled' : 'iconDefault', sx: { mr: 'var(--ds-spacing-quickFreeze)' } })] }), _jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange('right', 1), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-right-line" }) })] }), _jsxs(DsStack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: "var(--ds-spacing-frostbite)", children: [_jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange('left', -12), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-left-line" }) }), _jsxs(DsButtonBase, { disabled: isYearNavigationDisabled, onClick: handleViewShow('year'), children: [_jsx(DsTypography, { variant: "bodyBoldSmall", color: isYearNavigationDisabled ? 'text.disabled' : 'text.primary', children: utils.formatByString(currentMonth, utils.formats.year) }), _jsx(DsRemixIcon, { className: "ri-arrow-drop-down-fill", color: isYearNavigationDisabled ? 'iconDisabled' : 'iconDefault', sx: { mr: 'var(--ds-spacing-quickFreeze)' } })] }), _jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange('right', 12), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-right-line" }) })] })] }));
+});

package/dist/{Components → x-datepicker/Components}/DsDatePicker/DatePickerTextField.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { DateFieldProps, DateOrTimeView } from '@mui/x-date-pickers';
-import { DsTextFieldProps } from '../DsTextField';
+import { DateFieldProps } from '@mui/x-date-pickers';
+import { DsTextFieldProps } from '../../../Components';
 export interface DatePickerTextFieldProps extends Omit<DsTextFieldProps, 'margin' | 'onInvalid' | 'onKeyDown' | 'onBlur' | 'onKeyUp' | 'ref'> {
     setOpen?: (open: boolean) => void;
-    InputProps?: DateFieldProps<DateOrTimeView>['InputProps'];
-    ref?: DateFieldProps<DateOrTimeView>['ref'];
+    InputProps?: DateFieldProps<Date>['InputProps'];
+    ref?: DateFieldProps<Date>['ref'];
     focused?: boolean;
     ownerState?: any;
 }

package/dist/x-datepicker/Components/DsDatePicker/DatePickerTextField.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useThemeProps } from '@mui/material';
+import { DsTextField } from '../../../Components';
+export const DatePickerTextField = React.forwardRef((inProps, inputRef) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MuiPickersInput'
+    });
+    const { setOpen, ref, InputProps, focused, ownerState, ...other } = props;
+    const { readOnly } = InputProps || {};
+    return _jsx(DsTextField, { readOnly: readOnly, ...other });
+});

package/dist/x-datepicker/Components/DsDatePicker/DefaultActionBar.d.ts

@@ -0,0 +1,7 @@
+import { PickersActionBarProps } from '@mui/x-date-pickers';
+export declare function DefaultActionBar(props: PickersActionBarProps & {
+    ownerState?: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace DefaultActionBar {
+    var displayName: string;
+}

package/dist/x-datepicker/Components/DsDatePicker/DefaultActionBar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocaleText } from '@mui/x-date-pickers/internals';
+import { DsButtonGroup, DsButton } from '../../../Components';
+export function DefaultActionBar(props) {
+    const { onAccept, onClear, ownerState, actions } = props;
+    const { value } = ownerState || {};
+    if (actions == null || actions?.length === 0) {
+        return null;
+    }
+    const translations = useLocaleText();
+    const isClearVisible = actions.includes('clear');
+    const isConfirmVisible = actions.includes('accept');
+    return (_jsxs(DsButtonGroup, { sx: {
+            gridArea: '3 / 1 / auto / 4',
+            backgroundColor: 'var(--ds-colour-surfaceSecondary)',
+            px: 'var(--ds-spacing-mild)',
+            borderTop: '1px solid var(--ds-colour-strokeDefault)',
+            borderRadius: '0px 0px 16px 16px '
+        }, justifyContent: "space-between", size: "medium", children: [isClearVisible && (_jsx(DsButton, { sx: {
+                    py: 'var(--ds-spacing-glacial)',
+                    px: 'var(--ds-spacing-pleasant)'
+                }, variant: "text", size: "medium", color: "secondary", onClick: onClear, disabled: !value, children: translations.clearButtonLabel })), isConfirmVisible && (_jsx(DsButton, { sx: {
+                    py: 'var(--ds-spacing-glacial)',
+                    px: 'var(--ds-spacing-pleasant)'
+                }, variant: "text", size: "medium", color: "secondary", onClick: onAccept, disabled: !value, children: translations.okButtonLabel }))] }));
+}
+DefaultActionBar.displayName = 'DefaultActionBar';

package/dist/x-datepicker/Components/DsDatePicker/DefaultToolbar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DatePickerToolbarProps } from '@mui/x-date-pickers';
+export declare const DefaultToolbar: React.ForwardRefExoticComponent<DatePickerToolbarProps<Date> & {
+    ownerState?: any;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/x-datepicker/Components/DsDatePicker/DefaultToolbar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useUtils } from '@mui/x-date-pickers/internals';
+import { useThemeProps } from '@mui/system';
+import { useLocaleText } from '@mui/x-date-pickers/internals';
+import { DsStack, DsTypography, DsIconButton, DsRemixIcon } from '../../../Components';
+export const DefaultToolbar = React.forwardRef(function DatePickerToolbar(inProps, ref) {
+    const props = useThemeProps({ props: inProps, name: 'MuiDatePickerToolbar' });
+    const { value, ownerState } = props;
+    const { onCancel } = ownerState;
+    const translations = useLocaleText();
+    const utils = useUtils();
+    const dateText = (value && `: ${utils.formatByString(value, utils.formats.fullDate)}`) || '';
+    return (_jsx(DsStack, { sx: {
+            backgroundColor: 'var(--ds-colour-surfaceSecondary)',
+            padding: 'var(--ds-spacing-cool) var(--ds-spacing-bitterCold)',
+            gridArea: '1 / 2 / auto / 4',
+            borderRadius: '16px 16px 0px 0px',
+            borderBottom: '1px solid var(--ds-colour-strokeDefault)'
+        }, children: _jsxs(DsTypography, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
+            }, variant: "headingBoldExtraSmall", children: [`${translations.datePickerToolbarTitle}${dateText}`, _jsx(DsIconButton, { onClick: onCancel, children: _jsx(DsRemixIcon, { className: "ri-close-line" }) })] }) }));
+});

package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DsDatePickerProps } from './DsDatePicker.Types';
+export declare const DsDatePicker: React.FC<DsDatePickerProps<Date>>;

package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Component.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { DefaultActionBar } from './DefaultActionBar';
+import { DefaultToolbar } from './DefaultToolbar';
+import { DsDatePickerDefaultProps } from './DsDatePicker.Types';
+import { DateCalenderHeader } from './DateCalenderHeader';
+import { DatePickerTextField } from './DatePickerTextField';
+import { getDateFromValue, getErrorFromErrorMap, getValueTypeFromValue } from './utils';
+import { DsInputAdornment, DsIconButton, DsRemixIcon } from '../../../Components';
+import { useThemeProps } from '@mui/system';
+export const DsDatePicker = inProps => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MuiDatePicker'
+    });
+    const [open, setOpen] = useState(false);
+    const [views, setViews] = useState(['day']);
+    const ref = useRef(null);
+    const onOpen = () => setOpen(true);
+    const onClose = () => setOpen(false);
+    const handleChange = (value, context) => {
+        const { onChange, onError, errorMap, name, valueType, format: formatType, views } = props;
+        if (!views)
+            setViews(['day']);
+        if (context.validationError && typeof onError === 'function') {
+            const error = getErrorFromErrorMap(errorMap, context.validationError, value);
+            onError(name, error, context.validationError, getValueTypeFromValue(value, valueType, formatType));
+            return;
+        }
+        if (typeof onChange === 'function' && formatType) {
+            onChange(name, getValueTypeFromValue(value, valueType, formatType));
+        }
+    };
+    const handleError = (error, value) => {
+        const { onError, errorMap, name } = props;
+        if (error && typeof onError === 'function') {
+            const errorMsg = getErrorFromErrorMap(errorMap, error, value);
+            onError(name, errorMsg, error, value);
+        }
+    };
+    const handleViewChange = (value) => {
+        setViews([value, 'day']);
+    };
+    const { onChange, onError, defaultValue, value, valueType, format, views: propViews, disabled, readOnly = false, required, fullWidth, onBlur, onFocus, label, InputLabelProps, labelSupportText, helperText, HelperTextProps, FormControlProps, success, error, LocalizationProviderProps: inLocalizationProviderProps, ...restProps } = props;
+    const LocalizationProviderProps = useThemeProps({
+        props: inLocalizationProviderProps,
+        name: 'MuiLocalizationProvider'
+    });
+    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, ...LocalizationProviderProps, children: _jsx(DatePicker, { ...restProps, slots: {
+                actionBar: DefaultActionBar,
+                toolbar: DefaultToolbar,
+                textField: DatePickerTextField,
+                calendarHeader: DateCalenderHeader,
+                ...props.slots
+            }, slotProps: {
+                ...props.slotProps,
+                day: {
+                    // commented to show current day border highlight
+                    // disableHighlightToday: true,
+                    ...props.slotProps?.day
+                },
+                textField: {
+                    required,
+                    fullWidth,
+                    onBlur,
+                    onFocus,
+                    label,
+                    InputLabelProps,
+                    labelSupportText,
+                    helperText,
+                    HelperTextProps,
+                    FormControlProps,
+                    success,
+                    error,
+                    readOnly,
+                    ...props.slotProps?.textField,
+                    endAdornment: (_jsx(DsInputAdornment, { position: "end", disablePointerEvents: disabled, children: _jsx(DsIconButton, { disabled: disabled, onClick: onOpen, children: _jsx(DsRemixIcon, { className: "ri-calendar-line", fontSize: "bitterCold" }) }) }))
+                },
+                actionBar: ownerState => ({
+                    actions: ownerState.view === 'day' ? ['clear', 'accept'] : [],
+                    ...props.slotProps?.actionBar
+                }),
+                popper: {
+                    anchorEl: ref.current,
+                    // style to unset fixed width
+                    sx: {
+                        '.MuiMonthCalendar-root': {
+                            width: '100%'
+                        }
+                    },
+                    ...props.slotProps?.popper
+                }
+            }, readOnly: readOnly, disabled: disabled, format: format, open: open, reduceAnimations: true, onOpen: onOpen, onClose: onClose, onChange: handleChange, onViewChange: handleViewChange, onError: handleError, views: propViews || views, value: getDateFromValue(value, valueType, format), defaultValue: getDateFromValue(defaultValue, valueType, format), inputRef: ref }) }));
+};
+DsDatePicker.defaultProps = DsDatePickerDefaultProps;

package/dist/{Components → x-datepicker/Components}/DsDatePicker/DsDatePicker.Overrides.d.ts

@@ -1,4 +1,71 @@
+/// <reference types="date-fns" />
 export declare const DsDatePickerOverrides: {
+    MuiDatePicker: {
+        defaultProps: import("./DsDatePicker.Types").DsDatePickerProps<Date>;
+    };
+    MuiLocalizationProvider: {
+        defaultProps: {
+            adapterLocale: Locale;
+            localeText: {
+                okButtonLabel: string;
+                previousMonth?: string | undefined;
+                nextMonth?: string | undefined;
+                calendarWeekNumberHeaderLabel?: string | undefined;
+                calendarWeekNumberHeaderText?: string | undefined;
+                calendarWeekNumberAriaLabelText?: ((weekNumber: number) => string) | undefined;
+                calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
+                openPreviousView?: string | undefined;
+                openNextView?: string | undefined;
+                calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers").DateView) => string) | undefined;
+                start?: string | undefined;
+                end?: string | undefined;
+                cancelButtonLabel?: string | undefined;
+                clearButtonLabel?: string | undefined;
+                todayButtonLabel?: string | undefined;
+                clockLabelText?: ((view: import("@mui/x-date-pickers").TimeView, time: any, adapter: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                hoursClockNumberText?: ((hours: string) => string) | undefined;
+                minutesClockNumberText?: ((minutes: string) => string) | undefined;
+                secondsClockNumberText?: ((seconds: string) => string) | undefined;
+                selectViewText?: ((view: import("@mui/x-date-pickers/internals/models").TimeViewWithMeridiem) => string) | undefined;
+                openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                fieldClearLabel?: string | undefined;
+                timeTableLabel?: string | undefined;
+                dateTableLabel?: string | undefined;
+                fieldYearPlaceholder?: ((params: {
+                    digitAmount: number;
+                    format: string;
+                }) => string) | undefined;
+                fieldMonthPlaceholder?: ((params: {
+                    contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                    format: string;
+                }) => string) | undefined;
+                fieldDayPlaceholder?: ((params: {
+                    format: string;
+                }) => string) | undefined;
+                fieldWeekDayPlaceholder?: ((params: {
+                    contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                    format: string;
+                }) => string) | undefined;
+                fieldHoursPlaceholder?: ((params: {
+                    format: string;
+                }) => string) | undefined;
+                fieldMinutesPlaceholder?: ((params: {
+                    format: string;
+                }) => string) | undefined;
+                fieldSecondsPlaceholder?: ((params: {
+                    format: string;
+                }) => string) | undefined;
+                fieldMeridiemPlaceholder?: ((params: {
+                    format: string;
+                }) => string) | undefined;
+                datePickerToolbarTitle?: string | undefined;
+                timePickerToolbarTitle?: string | undefined;
+                dateTimePickerToolbarTitle?: string | undefined;
+                dateRangePickerToolbarTitle?: string | undefined;
+            };
+        };
+    };
     MuiPickersPopper: {
         styleOverrides: {
             root: {

package/dist/{Components → x-datepicker/Components}/DsDatePicker/DsDatePicker.Overrides.js

@@ -1,4 +1,12 @@
+import { DsDatePickerLocaleEnUS } from '../../Locale';
+import { DsDatePickerDefaultProps } from './DsDatePicker.Types';
 export const DsDatePickerOverrides = {
+    MuiDatePicker: {
+        defaultProps: DsDatePickerDefaultProps
+    },
+    MuiLocalizationProvider: {
+        defaultProps: DsDatePickerLocaleEnUS.components.MuiLocalizationProvider.defaultProps
+    },
     MuiPickersPopper: {
         styleOverrides: {
             root: {

package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Types.d.ts

@@ -0,0 +1,17 @@
+import { DatePickerProps, DateValidationError, LocalizationProviderProps } from '@mui/x-date-pickers';
+import { DsTextFieldProps } from '../../../Components';
+import { Locale } from 'date-fns';
+export type TErrorMapKeys = Exclude<DateValidationError, null>;
+export type TValue = string | Date | undefined | null;
+export type TValueType = 'date' | 'formattedValue' | 'ISO' | undefined;
+export interface DsDatePickerProps<TDate extends Date> extends Omit<DatePickerProps<TDate>, 'open' | 'onOpen' | 'onClose' | 'yearsPerRow' | 'monthsPerRow' | 'onChange' | 'onError' | 'value' | 'defaultValue'>, Pick<DsTextFieldProps, 'required' | 'fullWidth' | 'label' | 'InputLabelProps' | 'labelSupportText' | 'helperText' | 'HelperTextProps' | 'FormControlProps' | 'success' | 'error' | 'onFocus' | 'onBlur'> {
+    onChange?: (name: string, value: TValue) => void;
+    onError?: (name: string, error: string, errorCode: DateValidationError, value: TValue | null) => void;
+    name: string;
+    value?: TValue;
+    defaultValue?: TValue;
+    valueType?: TValueType;
+    errorMap?: Partial<Record<TErrorMapKeys, string>>;
+    LocalizationProviderProps?: LocalizationProviderProps<Date, Locale>;
+}
+export declare const DsDatePickerDefaultProps: DsDatePickerProps<Date>;

package/dist/{Components → x-datepicker/Components}/DsDatePicker/DsDatePicker.Types.js

@@ -3,9 +3,6 @@ export const DsDatePickerDefaultProps = {
     closeOnSelect: false,
     format: 'dd/MM/yyyy',
     name: '',
-    valueType: 'date'
-};
-export const DsDatePickerDefaultState = {
-    open: false,
-    views: ['day']
+    valueType: 'date',
+    fixedWeekNumber: 6
 };

package/dist/{Components → x-datepicker/Components}/DsDatePicker/utils.js

@@ -1,4 +1,4 @@
-import { format as formatDate, isValid, parse } from 'date-fns';
+import { format as formatDate, formatISO, isValid, parse, parseISO } from 'date-fns';
 import { DsDatePickerDefaultProps } from './DsDatePicker.Types';
 export const getDateFromValue = (value, valueType, format = DsDatePickerDefaultProps.format) => {
     if (value === undefined) {
@@ -27,23 +27,43 @@ export const getDateFromValue = (value, valueType, format = DsDatePickerDefaultP
                 return null;
             }
         }
+        case 'ISO': {
+            const parsedValue = parseISO(value);
+            if (isValid(parsedValue)) {
+                return parsedValue;
+            }
+            else {
+                console.warn(`Expected the value to be of ISO type but recived ${value}. Please check the value passed in your integration.`);
+                return null;
+            }
+        }
     }
 };
 export const getValueTypeFromValue = (value, valueType, format = DsDatePickerDefaultProps.format) => {
     if (value === undefined) {
         return;
     }
-    if (!value) {
-        return null;
-    }
     switch (valueType) {
         case 'date': {
+            if (!value) {
+                return null;
+            }
             return value;
         }
         case 'formattedValue': {
+            if (!value) {
+                return '';
+            }
             const formattedDate = formatDate(value, format);
             return formattedDate;
         }
+        case 'ISO': {
+            if (!value) {
+                return '';
+            }
+            const formattedDate = formatISO(value);
+            return formattedDate;
+        }
     }
 };
 export const getErrorFromErrorMap = (errorMap, error, value) => {

package/dist/x-datepicker/Components/index.d.ts

@@ -0,0 +1 @@
+export * from './DsDatePicker';

package/dist/x-datepicker/Components/index.js

@@ -0,0 +1 @@
+export * from './DsDatePicker';

package/dist/x-datepicker/Locale/DsDatePickerLocaleBeBY.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="date-fns" />
+export declare const DsDatePickerLocaleBeBY: {
+    components: {
+        MuiLocalizationProvider: {
+            defaultProps: {
+                adapterLocale: Locale;
+                localeText: {
+                    okButtonLabel: string;
+                    previousMonth?: string | undefined;
+                    nextMonth?: string | undefined;
+                    calendarWeekNumberHeaderLabel?: string | undefined;
+                    calendarWeekNumberHeaderText?: string | undefined;
+                    calendarWeekNumberAriaLabelText?: ((weekNumber: number) => string) | undefined;
+                    calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
+                    openPreviousView?: string | undefined;
+                    openNextView?: string | undefined;
+                    calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers").DateView) => string) | undefined;
+                    start?: string | undefined;
+                    end?: string | undefined;
+                    cancelButtonLabel?: string | undefined;
+                    clearButtonLabel?: string | undefined;
+                    todayButtonLabel?: string | undefined;
+                    clockLabelText?: ((view: import("@mui/x-date-pickers").TimeView, time: any, adapter: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                    hoursClockNumberText?: ((hours: string) => string) | undefined;
+                    minutesClockNumberText?: ((minutes: string) => string) | undefined;
+                    secondsClockNumberText?: ((seconds: string) => string) | undefined;
+                    selectViewText?: ((view: import("@mui/x-date-pickers/internals/models").TimeViewWithMeridiem) => string) | undefined;
+                    openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                    openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                    fieldClearLabel?: string | undefined;
+                    timeTableLabel?: string | undefined;
+                    dateTableLabel?: string | undefined;
+                    fieldYearPlaceholder?: ((params: {
+                        digitAmount: number;
+                        format: string;
+                    }) => string) | undefined;
+                    fieldMonthPlaceholder?: ((params: {
+                        contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                        format: string;
+                    }) => string) | undefined;
+                    fieldDayPlaceholder?: ((params: {
+                        format: string;
+                    }) => string) | undefined;
+                    fieldWeekDayPlaceholder?: ((params: {
+                        contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                        format: string;
+                    }) => string) | undefined;
+                    fieldHoursPlaceholder?: ((params: {
+                        format: string;
+                    }) => string) | undefined;
+                    fieldMinutesPlaceholder?: ((params: {
+                        format: string;
+                    }) => string) | undefined;
+                    fieldSecondsPlaceholder?: ((params: {
+                        format: string;
+                    }) => string) | undefined;
+                    fieldMeridiemPlaceholder?: ((params: {
+                        format: string;
+                    }) => string) | undefined;
+                    datePickerToolbarTitle?: string | undefined;
+                    timePickerToolbarTitle?: string | undefined;
+                    dateTimePickerToolbarTitle?: string | undefined;
+                    dateRangePickerToolbarTitle?: string | undefined;
+                };
+            };
+        };
+    };
+};

package/dist/x-datepicker/Locale/DsDatePickerLocaleBeBY.js

@@ -0,0 +1,15 @@
+import { beBY } from '@mui/x-date-pickers/locales';
+import be from 'date-fns/locale/be';
+export const DsDatePickerLocaleBeBY = {
+    components: {
+        MuiLocalizationProvider: {
+            defaultProps: {
+                adapterLocale: be,
+                localeText: {
+                    ...beBY.components.MuiLocalizationProvider.defaultProps.localeText,
+                    okButtonLabel: 'Пацвердзіць'
+                }
+            }
+        }
+    }
+};

package/dist/x-datepicker/Locale/DsDatePickerLocaleCaES.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="date-fns" />
+export declare const DsDatePickerLocaleCaES: {
+    components: {
+        MuiLocalizationProvider: {
+            defaultProps: {
+                adapterLocale: Locale;
+                localeText: {
+                    okButtonLabel: string;
+                    previousMonth?: string | undefined;
+                    nextMonth?: string | undefined;
+                    calendarWeekNumberHeaderLabel?: string | undefined;
+                    calendarWeekNumberHeaderText?: string | undefined;
+                    calendarWeekNumberAriaLabelText?: ((weekNumber: number) => string) | undefined;
+                    calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
+                    openPreviousView?: string | undefined;
+                    openNextView?: string | undefined;
+                    calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers").DateView) => string) | undefined;
+                    start?: string | undefined;
+                    end?: string | undefined;
+                    cancelButtonLabel?: string | undefined;
+                    clearButtonLabel?: string | undefined;
+                    todayButtonLabel?: string | undefined;
+                    clockLabelText?: ((view: import("@mui/x-date-pickers").TimeView, time: any, adapter: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                    hoursClockNumberText?: ((hours: string) => string) | undefined;
+                    minutesClockNumberText?: ((minutes: string) => string) | undefined;
+                    secondsClockNumberText?: ((seconds: string) => string) | undefined;
+                    selectViewText?: ((view: import("@mui/x-date-pickers/internals/models").TimeViewWithMeridiem) => string) | undefined;
+                    openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                    openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                    fieldClearLabel?: string | undefined;
+                    timeTableLabel?: string | undefined;
+                    dateTableLabel?: string | undefined;
+                    fieldYearPlaceholder?: ((params: {
+                        digitAmount: number;
+                        format: string;
+                    }) => string) | undefined;
+                    fieldMonthPlaceholder?: ((params: {
+                        contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                        format: string;
+                    }) => string) | undefined;
+                    fieldDayPlaceholder?: ((params: {
+                        format: string;
+                    }) => string) | undefined;
+                    fieldWeekDayPlaceholder?: ((params: {
+                        contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                        format: string;
+                    }) => string) | undefined;
+                    fieldHoursPlaceholder?: ((params: {
+                        format: string;
+                    }) => string) | undefined;
+                    fieldMinutesPlaceholder?: ((params: {
+                        format: string;
+                    }) => string) | undefined;
+                    fieldSecondsPlaceholder?: ((params: {
+                        format: string;
+                    }) => string) | undefined;
+                    fieldMeridiemPlaceholder?: ((params: {
+                        format: string;
+                    }) => string) | undefined;
+                    datePickerToolbarTitle?: string | undefined;
+                    timePickerToolbarTitle?: string | undefined;
+                    dateTimePickerToolbarTitle?: string | undefined;
+                    dateRangePickerToolbarTitle?: string | undefined;
+                };
+            };
+        };
+    };
+};