@talxis/base-controls 0.0.1

package/dist/components/DatasetControl/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DatasetControl';
+export * from './interfaces';
+export * from './Paging';

package/dist/components/DatasetControl/index.js

@@ -0,0 +1,4 @@
+export { DatasetControl } from './DatasetControl.js';
+export { DatasetPaging } from './Paging/DatasetPaging.js';
+export { Paging } from './Paging/Paging.js';
+//# sourceMappingURL=index.js.map

package/dist/components/DatasetControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/DatasetControl/interfaces.d.ts

@@ -0,0 +1,32 @@
+import { ThemeProviderProps } from "@fluentui/react";
+import { ITranslation } from "../../hooks";
+import { IControl } from "../../interfaces";
+import { IGridOutputs, IGridParameters } from "../Grid";
+import { gridTranslations } from "../Grid/translations";
+import { datasetControlTranslations } from "./translations";
+import { ITextFieldProps } from "@talxis/react-components";
+import React from "react";
+import { IDatasetPaging } from "./Paging";
+export interface IQuickFindProps {
+    textFieldProps: ITextFieldProps;
+    container: ThemeProviderProps;
+}
+export interface IDatasetControlComponentProps {
+    onDatasetInit: () => void;
+    containerProps: ThemeProviderProps;
+    headerProps: {
+        headerContainerProps: React.HTMLAttributes<HTMLDivElement>;
+        /**
+         * Can be used to override the default header renderer (includes QuickFind).
+         */
+        onRender: (renderQuickFind: () => React.ReactElement) => React.ReactElement;
+        onGetQuickFindProps: (props: IQuickFindProps) => IQuickFindProps;
+    };
+    onRenderPagination: (props: IDatasetPaging, renderPagination: (props: IDatasetPaging) => React.ReactElement<IDatasetPaging>) => React.ReactElement;
+}
+export interface IDatasetControl extends IControl<IGridParameters, IGridOutputs, Partial<ITranslation<typeof datasetControlTranslations & typeof gridTranslations>>, IDatasetControlComponentProps> {
+    /**
+     * Tells the Dataset control which UI component should be used for the dataset.
+     */
+    onGetControlComponent: (props: IControl<IGridParameters, any, any, any>) => React.ReactElement<IControl<any, any, any, any>>;
+}

package/dist/components/DatasetControl/styles.d.ts

@@ -0,0 +1,18 @@
+import { ITheme } from "@talxis/react-components";
+export declare const getDatasetControlStyles: (theme: ITheme, height?: string | null) => import("@fluentui/react").IProcessedStyleSet<{
+    datasetControlRoot: {
+        flexGrow?: number | undefined;
+        display: string;
+        flexDirection: string;
+    };
+    headerRoot: {
+        display: string;
+        paddingLeft: number;
+        paddingTop: number;
+        paddingRight: number;
+        marginBottom: number;
+    };
+    messageBarBtn: {
+        minHeight: string;
+    };
+}>;

package/dist/components/DatasetControl/styles.js

@@ -0,0 +1,29 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getDatasetControlStyles = (theme, height) => {
+    return mergeStyleSets({
+        datasetControlRoot: {
+            display: 'flex',
+            flexDirection: 'column',
+            ...(height === '100%' ? getFullHeightStyles() : {})
+        },
+        headerRoot: {
+            display: 'flex',
+            paddingLeft: 15,
+            paddingTop: 15,
+            paddingRight: 15,
+            marginBottom: 15
+        },
+        messageBarBtn: {
+            minHeight: 'inherit'
+        }
+    });
+};
+const getFullHeightStyles = (theme) => {
+    return {
+        flexGrow: 1
+    };
+};
+
+export { getDatasetControlStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/DatasetControl/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/DatasetControl/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { ITheme } from \"@talxis/react-components\";\n\nexport const getDatasetControlStyles = (theme: ITheme, height?: string | null) => {\n    return mergeStyleSets({\n        datasetControlRoot: {\n            display: 'flex',\n            flexDirection: 'column',\n            ...(height === '100%' ? getFullHeightStyles(theme) : {})\n\n        },\n        headerRoot: {\n            display: 'flex',\n            paddingLeft: 15,\n            paddingTop: 15,\n            paddingRight: 15,\n            marginBottom: 15\n        },\n        messageBarBtn: {\n            minHeight: 'inherit'\n        }\n    });\n}\n\nconst getFullHeightStyles = (theme: ITheme) => {\n    return {\n        flexGrow: 1\n    }\n}"],"names":[],"mappings":";;MAGa,uBAAuB,GAAG,CAAC,KAAa,EAAE,MAAsB,KAAI;AAC7E,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,kBAAkB,EAAE;AAChB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,IAAI,MAAM,KAAK,MAAM,GAAG,mBAAmB,CAAM,CAAC,GAAG,EAAE,CAAC;AAE3D,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,UAAU,EAAE,EAAE;AACd,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA,CAAC,CAAC;AACP,EAAC;AAED,MAAM,mBAAmB,GAAG,CAAC,KAAa,KAAI;IAC1C,OAAO;AACH,QAAA,QAAQ,EAAE,CAAC;KACd,CAAA;AACL,CAAC;;;;"}

package/dist/components/DatasetControl/translations.d.ts

@@ -0,0 +1,18 @@
+export declare const datasetControlTranslations: {
+    search: {
+        1029: string;
+        1033: string;
+    };
+    records: {
+        1029: string;
+        1033: string;
+    };
+    generalError: {
+        1029: string;
+        1033: string;
+    };
+    reload: {
+        1029: string;
+        1033: string;
+    };
+};

package/dist/components/DatasetControl/translations.js

@@ -0,0 +1,9 @@
+const datasetControlTranslations = {
+    "search": { 1029: "Vyhledat", 1033: "Search" },
+    "records": { 1029: "záznamy", 1033: "records" },
+    "generalError": { 1029: "Během načítání ovládacího prvku došlo k nečekané chybě", 1033: "An unexpected error occurred while loading the control." },
+    "reload": { 1029: "Obnovit", 1033: "Reload" }
+};
+
+export { datasetControlTranslations };
+//# sourceMappingURL=translations.js.map

package/dist/components/DatasetControl/translations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.js","sources":["../../../src/components/DatasetControl/translations.ts"],"sourcesContent":["export const datasetControlTranslations = {\n    \"search\": { 1029: \"Vyhledat\", 1033: \"Search\" },\n    \"records\": { 1029: \"záznamy\", 1033: \"records\" },\n    \"generalError\": { 1029: \"Během načítání ovládacího prvku došlo k nečekané chybě\", 1033: \"An unexpected error occurred while loading the control.\" },\n    \"reload\": { 1029: \"Obnovit\", 1033: \"Reload\" }\n};\n   \n"],"names":[],"mappings":"AAAa,MAAA,0BAA0B,GAAG;IACtC,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE;IAC9C,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC/C,cAAc,EAAE,EAAE,IAAI,EAAE,wDAAwD,EAAE,IAAI,EAAE,yDAAyD,EAAE;IACnJ,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE;;;;;"}

package/dist/components/DateTime/DateTime.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IDateTime } from "./interfaces";
+export declare const DateTime: (componentProps: IDateTime) => JSX.Element;

package/dist/components/DateTime/DateTime.js

@@ -0,0 +1,149 @@
+import { jsx } from 'react/jsx-runtime';
+import { ThemeProvider } from '@fluentui/react';
+import { useRef, useEffect } from 'react';
+import { getDateTimeStyles } from './styles.js';
+import { useDateTime } from './hooks/useDateTime.js';
+import { Calendar } from './components/Calendar.js';
+import { DatePicker } from '@talxis/react-components';
+import { useControlSizing } from '../../hooks/useControlSizing.js';
+import dayjs from 'dayjs';
+
+const DateTime = (componentProps) => {
+    const ref = useRef(null);
+    const onOverrideComponentProps = componentProps.onOverrideComponentProps ?? ((props) => props);
+    const datePickerRef = useRef(null);
+    const context = componentProps.context;
+    const parameters = componentProps.parameters;
+    const [isDateTime, theme, labels, date, patterns] = useDateTime(componentProps, ref);
+    const styles = getDateTimeStyles(theme);
+    const { height, width } = useControlSizing(componentProps.context.mode);
+    const lastInputedTimeString = useRef();
+    useEffect(() => {
+        if (componentProps.parameters.AutoFocus?.raw === true) {
+            datePickerRef.current?.showDatePickerPopup();
+        }
+    }, []);
+    const getRestrictedDates = () => {
+        if (!parameters.RestrictedDates?.raw) {
+            return undefined;
+        }
+        return JSON.parse(parameters.RestrictedDates?.raw).map((x) => new Date(x));
+    };
+    const onOverrideDayCellProps = (element, date, classNames) => {
+        if (!element || !parameters.RestrictedDaysOfWeek?.raw) {
+            return;
+        }
+        const weekDaysToExclude = JSON.parse(parameters.RestrictedDaysOfWeek.raw);
+        if (weekDaysToExclude.includes(date.getDay())) {
+            element.setAttribute('data-is-focusable', 'false');
+            element.classList?.add(classNames.dayOutsideBounds);
+            element.children[0].disabled = true;
+        }
+    };
+    const datePickerProps = onOverrideComponentProps({
+        className: styles.datePicker,
+        componentRef: datePickerRef,
+        hideErrorMessage: !parameters.ShowErrorMessage?.raw,
+        keepCalendarOpenAfterDaySelect: isDateTime,
+        readOnly: context.mode.isControlDisabled,
+        //@ts-ignore - this is a hack to close the calendar when dates get selected on date only fields
+        onSelectDate: isDateTime ? undefined : (newDate) => date.set(newDate),
+        //disable so the user cannot input restricted Dates
+        allowTextInput: !parameters.RestrictedDates?.raw && !parameters.RestrictedDaysOfWeek?.raw,
+        // Lowest date supported by CDS: https://learn.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn996866(v=crm.8)?redirectedfrom=MSDN
+        minDate: new Date('1753-01-01T00:00:00.000Z'),
+        parseDateFromString: (dateString) => {
+            const parsedDate = date.parseDateString(dateString);
+            if (parsedDate instanceof Date) {
+                return parsedDate;
+            }
+            return null;
+        },
+        firstDayOfWeek: componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek,
+        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {
+            key: 'Delete',
+            showOnlyOnHover: true,
+            iconProps: {
+                iconName: 'Cancel'
+            },
+            onClick: () => date.clear()
+        } : undefined,
+        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {
+            key: 'copy',
+            showOnlyOnHover: true,
+            iconProps: {
+                iconName: 'Copy'
+            }
+        } : undefined,
+        calendarAs: (props) => {
+            const calendarProps = {
+                ...props,
+                isMonthPickerVisible: parameters.EnableMonthPicker?.raw !== false,
+                isDayPickerVisible: parameters.EnableDayPicker?.raw !== false,
+                calendarDayProps: {
+                    restrictedDates: getRestrictedDates(),
+                    customDayCellRef: onOverrideDayCellProps
+                },
+                value: date.get(),
+                strings: {
+                    goToToday: labels.goToToday(),
+                    days: JSON.parse(labels.days()),
+                    months: JSON.parse(labels.months()),
+                    shortDays: JSON.parse(labels.shortDays()),
+                    shortMonths: JSON.parse(labels.shortMonths())
+                },
+                timePickerProps: {
+                    dateTimeFormat: patterns.fullDateTimePattern,
+                    autoComplete: "off",
+                    autoCapitalize: "off",
+                    timeFormat: patterns.shortTimePattern,
+                    label: labels.time(),
+                    visible: isDateTime,
+                    errorMessage: labels.invalidTimeInput(),
+                    lastInputedTimeString: lastInputedTimeString.current,
+                    useHour12: patterns.shortTimePattern.endsWith('A'),
+                    onChange: (time) => {
+                        date.set(undefined, time);
+                        lastInputedTimeString.current = time;
+                    },
+                    value: date.get(),
+                    formattedDateTime: date.getFormatted() ?? "",
+                    strings: {
+                        invalidInputErrorMessage: labels.invalidTimeInput()
+                    }
+                },
+                theme: componentProps.context.fluentDesignLanguage?.applicationTheme ?? theme
+            };
+            if (isDateTime) {
+                calendarProps.onSelectDate = (newDate) => date.set(newDate);
+            }
+            return jsx(Calendar, { ...calendarProps });
+        },
+        errorMessage: parameters.value.errorMessage,
+        textField: {
+            value: date.getFormatted() ?? "",
+            onChange: (e, value) => {
+                if (isDateTime) {
+                    const datePart = dayjs(value, patterns.shortDatePattern).format(patterns.shortDatePattern);
+                    const time = value?.split(datePart).pop()?.substring(1);
+                    lastInputedTimeString.current = time;
+                }
+                date.setDateString(value);
+            },
+            placeholder: '---',
+            onNotifyValidationResult: () => null,
+            noValidate: true,
+            styles: {
+                fieldGroup: {
+                    height: height,
+                    width: width
+                }
+            }
+        },
+        value: date.get() ?? undefined
+    });
+    return (jsx(ThemeProvider, { theme: theme, applyTo: "none", ref: ref, children: jsx(DatePicker, { ...datePickerProps }) }));
+};
+
+export { DateTime };
+//# sourceMappingURL=DateTime.js.map

package/dist/components/DateTime/DateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTime.js","sources":["../../../src/components/DateTime/DateTime.tsx"],"sourcesContent":["import { IDateTime } from \"./interfaces\";\nimport { ICalendarDayGridStyles, IDatePicker, IProcessedStyleSet, ThemeProvider } from \"@fluentui/react\";\nimport { useEffect, useRef } from \"react\";\nimport { getDateTimeStyles } from \"./styles\";\nimport { useDateTime } from \"./hooks/useDateTime\";\nimport { Calendar, IInternalCalendarProps } from \"./components/Calendar\";\nimport { DatePicker } from \"@talxis/react-components\";\nimport { useControlSizing } from \"../../hooks/useControlSizing\";\nimport dayjs from \"dayjs\";\n\nexport const DateTime = (componentProps: IDateTime) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const onOverrideComponentProps = componentProps.onOverrideComponentProps ?? ((props) => props);\n    const datePickerRef = useRef<IDatePicker>(null);\n    const context = componentProps.context;\n    const parameters = componentProps.parameters;\n    const [isDateTime, theme, labels, date, patterns] = useDateTime(componentProps, ref);\n    const styles = getDateTimeStyles(theme);\n    const { height, width } = useControlSizing(componentProps.context.mode);\n    const lastInputedTimeString = useRef<string>();\n\n    useEffect(() => {\n        if (componentProps.parameters.AutoFocus?.raw === true) {\n            datePickerRef.current?.showDatePickerPopup();\n        }\n    }, []);\n\n    const getRestrictedDates = (): Date[] | undefined => {\n        if(!parameters.RestrictedDates?.raw) {\n            return undefined;\n        }\n        return JSON.parse(parameters.RestrictedDates?.raw).map((x: string) => new Date(x))\n    }\n    \n    const onOverrideDayCellProps = (element: HTMLElement, date: Date, classNames: IProcessedStyleSet<ICalendarDayGridStyles>) => {\n        if(!element || !parameters.RestrictedDaysOfWeek?.raw) {\n            return;\n        }\n        const weekDaysToExclude: number[] = JSON.parse(parameters.RestrictedDaysOfWeek.raw);\n        if(weekDaysToExclude.includes(date.getDay())) {\n            element.setAttribute('data-is-focusable', 'false');\n            element.classList?.add(classNames.dayOutsideBounds!);\n            (element.children[0] as HTMLButtonElement).disabled = true;\n        }\n    }\n\n    const datePickerProps = onOverrideComponentProps({\n        className: styles.datePicker,\n        componentRef: datePickerRef,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        keepCalendarOpenAfterDaySelect: isDateTime,\n        readOnly: context.mode.isControlDisabled,\n        //@ts-ignore - this is a hack to close the calendar when dates get selected on date only fields\n        onSelectDate: isDateTime ? undefined : (newDate) => date.set(newDate!),\n        //disable so the user cannot input restricted Dates\n        allowTextInput: !parameters.RestrictedDates?.raw && !parameters.RestrictedDaysOfWeek?.raw,\n        // Lowest date supported by CDS: https://learn.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn996866(v=crm.8)?redirectedfrom=MSDN\n        minDate: new Date('1753-01-01T00:00:00.000Z'),\n        parseDateFromString: (dateString) => {\n            const parsedDate = date.parseDateString(dateString);\n            if (parsedDate instanceof Date) {\n                return parsedDate;\n            }\n            return null;\n        },\n        firstDayOfWeek: componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek,\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n            key: 'Delete',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Cancel'\n            },\n            onClick: () => date.clear()\n        } : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n            key: 'copy',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Copy'\n            }\n        } : undefined,\n        calendarAs: (props) => {\n            const calendarProps: IInternalCalendarProps = {\n                ...props,\n                isMonthPickerVisible: parameters.EnableMonthPicker?.raw !== false,\n                isDayPickerVisible: parameters.EnableDayPicker?.raw !== false,\n                calendarDayProps: {\n                    restrictedDates: getRestrictedDates(),\n                    customDayCellRef: onOverrideDayCellProps\n                },\n                value: date.get(),\n                strings: {\n                    goToToday: labels.goToToday(),\n                    days: JSON.parse(labels.days()),\n                    months: JSON.parse(labels.months()),\n                    shortDays: JSON.parse(labels.shortDays()),\n                    shortMonths: JSON.parse(labels.shortMonths())\n                },\n                timePickerProps: {\n                    dateTimeFormat: patterns.fullDateTimePattern,\n                    autoComplete: \"off\",\n                    autoCapitalize: \"off\",\n                    timeFormat: patterns.shortTimePattern,\n                    label: labels.time(),\n                    visible: isDateTime,\n                    errorMessage: labels.invalidTimeInput(),\n                    lastInputedTimeString: lastInputedTimeString.current,\n                    useHour12: patterns.shortTimePattern.endsWith('A'),\n                    onChange: (time?: string) => {\n                        date.set(undefined, time);\n                        lastInputedTimeString.current = time;\n                    },\n                    value: date.get(),\n                    formattedDateTime: date.getFormatted() ?? \"\",\n                    strings: {\n                        invalidInputErrorMessage: labels.invalidTimeInput()\n                    }\n                },\n                theme: componentProps.context.fluentDesignLanguage?.applicationTheme ?? theme\n            };\n            if(isDateTime) {\n                calendarProps.onSelectDate = (newDate) => date.set(newDate)\n            }\n            return <Calendar {...calendarProps} />\n        },\n        errorMessage: parameters.value.errorMessage,\n        textField: {\n            value: date.getFormatted() ?? \"\",\n            onChange: (e, value) => {\n                if(isDateTime) {\n                    const datePart = dayjs(value, patterns.shortDatePattern).format(patterns.shortDatePattern);\n                    const time = value?.split(datePart).pop()?.substring(1);\n                    lastInputedTimeString.current = time;\n                }\n                date.setDateString(value)\n            },\n            placeholder: '---',\n            onNotifyValidationResult: () => null,\n            noValidate: true,\n            styles: {\n                fieldGroup: {\n                    height: height,\n                    width: width\n                }\n            }\n        },\n        value: date.get() ?? undefined\n    });\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\" ref={ref}>\n            <DatePicker {...datePickerProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx"],"mappings":"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"}

package/dist/components/DateTime/components/Calendar.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ICalendarProps, ITheme } from "@fluentui/react";
+import { ITimePickerProps } from "@talxis/react-components";
+interface IInternalTimePickerProps extends Omit<ITimePickerProps, 'onChange' | 'defaultValue'> {
+    formattedDateTime: string;
+    visible: boolean;
+    timeFormat: string;
+    dateTimeFormat: string;
+    lastInputedTimeString?: string;
+    theme?: ITheme;
+    onChange: (time?: string) => void;
+}
+export interface IInternalCalendarProps extends ICalendarProps {
+    timePickerProps: IInternalTimePickerProps;
+}
+export declare const Calendar: (props: IInternalCalendarProps) => JSX.Element;
+export {};

package/dist/components/DateTime/components/Calendar.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme, ThemeProvider } from '@fluentui/react';
+import { Calendar as Calendar$1 } from '@fluentui/react/lib/Calendar';
+import { useRef, useState, useEffect } from 'react';
+import { getDateTimeStyles } from '../styles.js';
+import { TimePicker } from '@talxis/react-components';
+import dayjs from 'dayjs';
+
+const Calendar = (props) => {
+    const timePickerProps = props.timePickerProps;
+    const formattedDateTime = timePickerProps.formattedDateTime;
+    const theme = useTheme();
+    const styles = getDateTimeStyles(theme);
+    const timePickerRef = useRef(null);
+    const [error, setError] = useState(false);
+    const getFormattedTime = () => {
+        const dayjsDate = dayjs(formattedDateTime, timePickerProps.dateTimeFormat, true);
+        if (!dayjsDate.isValid()) {
+            return timePickerProps.lastInputedTimeString;
+        }
+        return dayjsDate.format(timePickerProps.timeFormat) ?? "";
+    };
+    const onChange = (event, time) => {
+        const dayjsDate = dayjs(time);
+        let timeValue;
+        if (!dayjsDate.isValid()) {
+            //@ts-ignore - need to access internals to properly show error values
+            timeValue = timePickerRef.current.state.currentPendingValue;
+        }
+        else {
+            timeValue = dayjsDate.format(timePickerProps.timeFormat);
+        }
+        //@ts-ignore - need to access internals to properly show error values
+        timePickerProps.onChange(timeValue);
+    };
+    useEffect(() => {
+        setError(false);
+        if (!timePickerProps.visible) {
+            return;
+        }
+        const formattedTime = getFormattedTime();
+        //@ts-ignore - need to access internals to properly show error values
+        timePickerRef.current.setState({
+            currentPendingValue: getFormattedTime()
+        });
+        if (!formattedTime || !formattedDateTime) {
+            return;
+        }
+        const time = dayjs(formattedTime, timePickerProps.timeFormat, true);
+        if (!time.isValid()) {
+            setError(true);
+        }
+    }, [formattedDateTime]);
+    return (jsxs(ThemeProvider, { theme: props.theme, className: styles.calendarCallout, children: [jsx(Calendar$1, { ...props, value: props.value }), jsx("hr", {}), timePickerProps.visible &&
+                jsx(TimePicker, { ...timePickerProps, errorMessage: error ? timePickerProps.errorMessage : undefined, componentRef: timePickerRef, onFormatDate: (date) => dayjs(date).format(timePickerProps.timeFormat), onChange: onChange, allowFreeform: true, onClick: () => timePickerRef.current?.focus(true), useComboBoxAsMenuWidth: true, styles: {
+                        callout: {
+                            maxHeight: '300px !important'
+                        }
+                    }, increments: 15 })] }));
+};
+
+export { Calendar };
+//# sourceMappingURL=Calendar.js.map

package/dist/components/DateTime/components/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sources":["../../../../src/components/DateTime/components/Calendar.tsx"],"sourcesContent":["import { ICalendarProps, IComboBox, ITheme, ThemeProvider } from \"@fluentui/react\";\nimport { useTheme } from \"@fluentui/react\";\nimport { Calendar as CalendarBase } from '@fluentui/react/lib/Calendar';\nimport { useEffect, useRef, useState } from \"react\";\nimport { getDateTimeStyles } from \"../styles\";\nimport { ITimePickerProps, TimePicker } from \"@talxis/react-components\";\nimport dayjs from \"dayjs\";\nimport React from 'react';\n\ninterface IInternalTimePickerProps extends Omit<ITimePickerProps, 'onChange' | 'defaultValue'> {\n    formattedDateTime: string;\n    visible: boolean;\n    timeFormat: string;\n    dateTimeFormat: string;\n    lastInputedTimeString?: string;\n    theme?: ITheme\n    onChange: (time?: string) => void;\n}\n\nexport interface IInternalCalendarProps extends ICalendarProps {\n    timePickerProps: IInternalTimePickerProps;\n}\n\nexport const Calendar = (props: IInternalCalendarProps) => {\n    const timePickerProps = props.timePickerProps;\n    const formattedDateTime = timePickerProps.formattedDateTime;\n    const theme = useTheme();\n    const styles = getDateTimeStyles(theme);\n    const timePickerRef = useRef<IComboBox>(null);\n    const [error, setError] = useState(false);\n\n    const getFormattedTime = () => {\n        const dayjsDate = dayjs(formattedDateTime, timePickerProps.dateTimeFormat, true);\n        if (!dayjsDate.isValid()) {\n            return timePickerProps.lastInputedTimeString;\n        }\n        return dayjsDate.format(timePickerProps.timeFormat) ?? \"\";\n    };\n\n    const onChange = (event: React.FormEvent<IComboBox>, time: Date) => {\n        const dayjsDate = dayjs(time);\n        let timeValue;\n        if (!dayjsDate.isValid()) {\n            //@ts-ignore - need to access internals to properly show error values\n            timeValue = timePickerRef.current.state.currentPendingValue;\n        }\n        else {\n            timeValue = dayjsDate.format(timePickerProps.timeFormat);\n        }\n        //@ts-ignore - need to access internals to properly show error values\n        timePickerProps.onChange(timeValue);\n\n    }\n\n    useEffect(() => {\n        setError(false);\n        if (!timePickerProps.visible) {\n            return;\n        }\n        const formattedTime = getFormattedTime();\n        //@ts-ignore - need to access internals to properly show error values\n        timePickerRef.current.setState({\n            currentPendingValue: getFormattedTime()\n        })\n        if(!formattedTime || !formattedDateTime) {\n            return;\n        }\n        const time = dayjs(formattedTime, timePickerProps.timeFormat, true);\n        if (!time.isValid()) {\n            setError(true);\n        }\n    }, [formattedDateTime]);\n\n\n    return (\n        <ThemeProvider theme={props.theme} className={styles.calendarCallout}>\n            <CalendarBase {...props} value={props.value} />\n            <hr />\n            {timePickerProps.visible &&\n                <TimePicker\n                    {...timePickerProps}\n                    errorMessage={error ? timePickerProps.errorMessage : undefined}\n                    componentRef={timePickerRef}\n                    onFormatDate={(date) => dayjs(date).format(timePickerProps.timeFormat)}\n                    onChange={onChange}\n                    allowFreeform\n                    onClick={() => timePickerRef.current?.focus(true)}\n                    useComboBoxAsMenuWidth\n                    styles={{\n                        callout: {\n                            maxHeight: '300px !important'\n                        }\n                    }}\n                    increments={15}\n                />\n            }\n        </ThemeProvider>\n    );\n};\n"],"names":["_jsxs","_jsx","CalendarBase"],"mappings":"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"}

package/dist/components/DateTime/hooks/useDateTime.d.ts

@@ -0,0 +1,32 @@
+import { IDateTime } from "../interfaces";
+import { ITranslation } from "../../../hooks";
+import { ITheme } from "@talxis/react-components";
+export declare const useDateTime: (props: IDateTime, ref: React.RefObject<HTMLDivElement>) => [boolean, ITheme, ITranslation<Partial<import("../../..").ITranslations<{
+    time: {
+        1029: string;
+        1033: string;
+    };
+    goToToday: {
+        1029: string;
+        1033: string;
+    };
+    invalidTimeInput: {
+        1029: string;
+        1033: string;
+    };
+    days: string[];
+    months: string[];
+    shortDays: string[];
+    shortMonths: string[];
+}>>>, {
+    get: () => Date | undefined;
+    getFormatted: () => string | undefined;
+    set: (date?: Date, time?: string) => void;
+    setDateString: (value: string | undefined) => void;
+    clear: () => void;
+    parseDateString: (dateString: string) => Date | string;
+}, {
+    shortDatePattern: string;
+    shortTimePattern: string;
+    fullDateTimePattern: string;
+}];

package/dist/components/DateTime/hooks/useDateTime.js

@@ -0,0 +1,150 @@
+import { useRef, useEffect } from 'react';
+import { useInputBasedControl } from '../../../hooks/useInputBasedControl.js';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { getDefaultDateTimeTranslations } from '../translations.js';
+
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+const useDateTime = (props, ref) => {
+    const boundValue = props.parameters.value;
+    const context = props.context;
+    const behavior = boundValue.attributes.Behavior;
+    const format = boundValue.attributes.Format ?? boundValue.type;
+    const dateFormattingInfo = context.userSettings.dateFormattingInfo;
+    const lastValidDateRef = useRef(undefined);
+    const isDateTime = (() => {
+        switch (format) {
+            case 'DateAndTime':
+            case 'Date and Time':
+            case 'DateAndTime.DateAndTime':
+            case 'datetime': {
+                return true;
+            }
+            default: {
+                return false;
+            }
+        }
+    })();
+    //MS returns the pattern without correct separator and they do this during formatting
+    const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\//g, dateFormattingInfo.dateSeparator).toUpperCase();
+    const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');
+    const formatting = (() => {
+        if (isDateTime) {
+            return `${shortDatePattern} ${shortTimePattern}`;
+        }
+        return shortDatePattern;
+    })();
+    const formatDate = (date) => {
+        if (date instanceof Date) {
+            if (isDateTime) {
+                //should handle the time zone conversion
+                return context.formatting.formatTime(date, behavior);
+            }
+            return context.formatting.formatDateShort(date);
+        }
+        return date;
+    };
+    useEffect(() => {
+        if (boundValue.raw instanceof Date) {
+            lastValidDateRef.current = boundValue.raw;
+        }
+    }, [boundValue.raw]);
+    const getDate = () => {
+        if (boundValue.raw instanceof Date) {
+            if (behavior === 3) {
+                //the date in javascript gets automatically adjusted to local time zone
+                //this will make it think that the date already came in local time, thus not adjusting the time
+                const date = new Date(boundValue.raw.toISOString().replace('Z', ''));
+                return date;
+            }
+            return boundValue.raw;
+        }
+        if (boundValue.error) {
+            return lastValidDateRef.current;
+        }
+        return undefined;
+    };
+    const dateExtractor = (value) => {
+        if (value instanceof Date) {
+            return value;
+        }
+        const dayjsDate = dayjs(value, formatting, true);
+        if (!dayjsDate.isValid()) {
+            const dayJsDateNoWhiteSpace = dayjs(value?.replaceAll(' ', ''), formatting.replaceAll(' ', ''));
+            if (!dayJsDateNoWhiteSpace.isValid()) {
+                return value;
+            }
+            else {
+                return dayJsDateNoWhiteSpace.toDate();
+            }
+        }
+        return dayjsDate.toDate();
+    };
+    const clearDate = () => {
+        onNotifyOutputChanged({
+            value: undefined
+        });
+    };
+    const selectDate = (date, time) => {
+        //onSelectDate can trigger on initial click with empty date, do not continue in this case
+        //for clearing dates, date.clear should be used
+        if (!date && !time) {
+            return;
+        }
+        let dayjsDate = dayjs(date ?? getDate());
+        //date selected from calendar, keep the original time
+        if (!time) {
+            time = dayjs(getDate()).format(shortTimePattern);
+        }
+        const dayjsTime = dayjs(time, shortTimePattern, true);
+        let invalidDateString;
+        if (!dayjsTime.isValid()) {
+            invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`;
+        }
+        dayjsDate = dayjsDate.hour(dayjsTime.hour());
+        dayjsDate = dayjsDate.minute(dayjsTime.minute());
+        onNotifyOutputChanged({
+            value: dateExtractor(invalidDateString ?? dayjsDate.toDate())
+        });
+    };
+    const { value, labels, theme, setValue, onNotifyOutputChanged } = useInputBasedControl('DateTime', props, {
+        formatter: formatDate,
+        valueExtractor: dateExtractor,
+        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)
+    });
+    useEffect(() => {
+        const onBlur = () => {
+            onNotifyOutputChanged({
+                value: dateExtractor(value)
+            });
+        };
+        const input = ref.current?.querySelector('input');
+        input?.addEventListener('blur', onBlur);
+        return () => {
+            input?.removeEventListener('blur', onBlur);
+        };
+    }, [value]);
+    return [
+        isDateTime,
+        theme,
+        labels,
+        {
+            get: getDate,
+            clear: clearDate,
+            getFormatted: () => value,
+            set: selectDate,
+            setDateString: setValue,
+            parseDateString: (dateString) => dateExtractor(dateString)
+        },
+        {
+            shortDatePattern: shortDatePattern,
+            shortTimePattern: shortTimePattern,
+            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`
+        }
+    ];
+};
+
+export { useDateTime };
+//# sourceMappingURL=useDateTime.js.map

package/dist/components/DateTime/hooks/useDateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDateTime.js","sources":["../../../../src/components/DateTime/hooks/useDateTime.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useInputBasedControl } from \"../../../hooks/useInputBasedControl\";\nimport { IDateTime, IDateTimeOutputs, IDateTimeParameters} from \"../interfaces\";\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { getDefaultDateTimeTranslations } from \"../translations\";\nimport {ITranslation } from \"../../../hooks\";\nimport { ITheme } from \"@talxis/react-components\";\n\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\n\nexport const useDateTime = (props: IDateTime, ref: React.RefObject<HTMLDivElement>): [\n    boolean,\n    ITheme,\n    ITranslation<Required<IDateTime>['translations']>,\n    {\n        get: () => Date | undefined;\n        getFormatted: () => string | undefined;\n        set: (date?: Date, time?: string) => void;\n        setDateString: (value: string | undefined) => void;\n        clear: () => void;\n        parseDateString: (dateString: string) => Date | string;\n    },\n    {\n        shortDatePattern: string\n        shortTimePattern: string;\n        fullDateTimePattern: string;\n    },\n] => {\n\n    const boundValue = props.parameters.value;\n    const context = props.context;\n    const behavior = boundValue.attributes.Behavior;\n    const format = boundValue.attributes.Format ?? boundValue.type;\n    const dateFormattingInfo = context.userSettings.dateFormattingInfo;\n    const lastValidDateRef = useRef<Date | undefined>(undefined);\n    \n    const isDateTime = (() => {\n        switch (format) {\n            case 'DateAndTime':\n            case 'Date and Time':\n            case 'DateAndTime.DateAndTime':\n            case 'datetime': {\n                return true;\n            }\n            default: {\n                return false;\n            }\n        }\n    })();\n\n    //MS returns the pattern without correct separator and they do this during formatting\n    const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\\//g, dateFormattingInfo.dateSeparator).toUpperCase();\n    const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');\n    const formatting = (() => {\n        if (isDateTime) {\n            return `${shortDatePattern} ${shortTimePattern}`;\n        }\n        return shortDatePattern;\n    })();\n\n    const formatDate = (date: Date | undefined | null | string): string | undefined | null => {\n        if (date instanceof Date) {\n            if (isDateTime) {\n                //should handle the time zone conversion\n                return context.formatting.formatTime(date, behavior);\n            }\n            return context.formatting.formatDateShort(date);\n        }\n        return date;\n    };\n\n    useEffect(() => {\n        if (boundValue.raw instanceof Date) {\n            lastValidDateRef.current = boundValue.raw;\n        }\n    }, [boundValue.raw]);\n\n    const getDate = (): Date | undefined => {\n        if (boundValue.raw instanceof Date) {\n            if (behavior === 3) {\n                //the date in javascript gets automatically adjusted to local time zone\n                //this will make it think that the date already came in local time, thus not adjusting the time\n                const date = new Date(boundValue.raw.toISOString().replace('Z', ''));\n                return date;\n            }\n            return boundValue.raw;\n        }\n        if(boundValue.error) {\n            return lastValidDateRef.current;\n        }\n        return undefined;\n    };\n\n    const dateExtractor = (value: string | Date): Date | string => {\n        if (value instanceof Date) {\n            return value;\n        }\n        const dayjsDate = dayjs(value, formatting, true);\n        if (!dayjsDate.isValid()) {\n            const dayJsDateNoWhiteSpace = dayjs(value?.replaceAll(' ', ''), formatting.replaceAll(' ', ''));\n            if(!dayJsDateNoWhiteSpace.isValid()) {\n                return value;\n            }\n            else {\n                return dayJsDateNoWhiteSpace.toDate();\n            }\n        }\n        return dayjsDate.toDate();\n    };\n\n    const clearDate = () => {\n        onNotifyOutputChanged({\n            value: undefined\n        });\n    };\n\n    const selectDate = (date?: Date, time?: string) => {\n        //onSelectDate can trigger on initial click with empty date, do not continue in this case\n        //for clearing dates, date.clear should be used\n        if(!date && !time) {\n            return;\n        }\n        let dayjsDate = dayjs(date ?? getDate());\n        //date selected from calendar, keep the original time\n        if (!time) {\n            time = dayjs(getDate()).format(shortTimePattern);\n        }\n        const dayjsTime = dayjs(time, shortTimePattern, true);\n        let invalidDateString;\n        if(!dayjsTime.isValid()) {\n            invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`\n        }\n        dayjsDate = dayjsDate.hour(dayjsTime.hour());\n        dayjsDate = dayjsDate.minute(dayjsTime.minute());\n        onNotifyOutputChanged({\n            value: dateExtractor(invalidDateString ?? dayjsDate.toDate()) as any\n        });\n    };\n    const {value, labels, theme, setValue, onNotifyOutputChanged} = useInputBasedControl<string | undefined, IDateTimeParameters, IDateTimeOutputs, Required<IDateTime>['translations']>('DateTime', props, {\n        formatter: formatDate,\n        valueExtractor: dateExtractor,\n        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)\n    });\n\n\n    useEffect(() => {\n        const onBlur = () => {\n            onNotifyOutputChanged({\n                value: dateExtractor(value!) as any\n            });\n        };\n        const input = ref.current?.querySelector('input');\n        input?.addEventListener('blur', onBlur);\n        return () => {\n            input?.removeEventListener('blur', onBlur);\n        };\n    }, [value]);\n\n    return [\n        isDateTime,\n        theme,\n        labels,\n        {\n            get: getDate,\n            clear: clearDate,\n            getFormatted: () => value,\n            set: selectDate,\n            setDateString: setValue,\n            parseDateString: (dateString: string) => dateExtractor(dateString)\n        },\n        {\n            shortDatePattern: shortDatePattern,\n            shortTimePattern: shortTimePattern,\n            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n        }\n    ]\n};"],"names":[],"mappings":"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"}

package/dist/components/DateTime/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DateTime';
+export * from './hooks/useDateTime';
+export * from './interfaces';

package/dist/components/DateTime/index.js

@@ -0,0 +1,3 @@
+export { DateTime } from './DateTime.js';
+export { useDateTime } from './hooks/useDateTime.js';
+//# sourceMappingURL=index.js.map

package/dist/components/DateTime/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}