@talxis/base-controls 1.2502.1 → 1.2503.2

package/dist/components/DatasetControl/DatasetControl.js

@@ -1,16 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useMemo, useEffect } from 'react';
-import { ThemeProvider } from '@fluentui/react';
-import { TextField } from '@talxis/react-components';
+import { useRef, useMemo } from 'react';
+import { ThemeProvider, MessageBar, MessageBarButton, MessageBarType } from '@fluentui/react';
 import { datasetControlTranslations } from './translations.js';
 import { getDatasetControlStyles } from './styles.js';
-import { useRerender } from '../../hooks/useRerender.js';
-import { useControl } from '../../hooks/useControl.js';
+import { QuickFind } from './QuickFind/QuickFind.js';
+import { ErrorBoundary } from './ErrorBoundary.js';
+import { useRerender } from '@talxis/react-components';
 import { Grid } from '../Grid/Grid.js';
+import { useControl } from '../../hooks/useControl.js';
 
 const DatasetControl = (props) => {
     const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);
-    const [query, setQuery] = useState("");
     const rerender = useRerender();
     const dataset = props.parameters.Grid;
     const injectedContextRef = useRef(props.context);
@@ -20,8 +20,21 @@ const DatasetControl = (props) => {
     dataset._setRenderer(() => rerender());
     //we need to have a way to customize the init behavior from above
     const componentProps = onOverrideComponentProps({
-        onDatasetInit: () => dataset.refresh()
+        onDatasetInit: () => {
+            if (dataset.paging.pageNumber > 1) {
+                dataset.paging.loadExactPage(dataset.paging.pageNumber);
+            }
+            else {
+                dataset.refresh();
+            }
+        }
     });
+    const renderErrorMessageBar = (onReset) => {
+        jsx(MessageBar, { isMultiline: false, actions: jsx(MessageBarButton, { className: styles.messageBarBtn, text: labels.reload(), onClick: () => {
+                    onReset?.();
+                    dataset.refresh();
+                } }), messageBarType: MessageBarType.error, children: dataset.errorMessage || labels.generalError() });
+    };
     useMemo(() => {
         //@ts-ignore - private property
         injectedContextRef.current = dataset._patchContext(props.context);
@@ -29,34 +42,8 @@ const DatasetControl = (props) => {
     useMemo(() => {
         componentProps.onDatasetInit();
     }, []);
-    useEffect(() => {
-        setQuery(dataset.getSearchQuery?.() ?? '');
-    }, [dataset.getSearchQuery?.()]);
-    const onSearch = (query) => {
-        dataset.setSearchQuery?.(query ?? "");
-        dataset.refresh();
-    };
     return (jsxs(ThemeProvider, { theme: theme, applyTo: "none", className: styles.root, children: [props.parameters.EnableQuickFind?.raw &&
-                jsx(TextField, { className: styles.quickFind, value: query, placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`, deleteButtonProps: query ? {
-                        key: 'delete',
-                        iconProps: {
-                            iconName: 'Cancel'
-                        },
-                        onClick: () => {
-                            setQuery("");
-                            onSearch(undefined);
-                        }
-                    } : undefined, suffixItems: [{
-                            key: 'search',
-                            iconProps: {
-                                iconName: 'Search'
-                            },
-                            onClick: () => onSearch(query)
-                        }], onKeyUp: (e) => {
-                        if (e.key === 'Enter') {
-                            onSearch(query);
-                        }
-                    }, onChange: (e, newValue) => setQuery(newValue) }), jsx(Grid, { ...props, context: injectedContextRef.current })] }));
+                jsx(QuickFind, { dataset: dataset, labels: labels }), jsx(ErrorBoundary, { fallback: (resetError) => { renderErrorMessageBar(() => resetError()); }, children: jsx(Grid, { ...props, context: injectedContextRef.current }) })] }));
 };
 
 export { DatasetControl };

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

@@ -1 +1 @@
-{"version":3,"file":"DatasetControl.js","sources":["../../../src/components/DatasetControl/DatasetControl.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Grid } from \"../Grid\";\nimport { useControl } from \"../../hooks\";\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { TextField } from \"@talxis/react-components\";\nimport { datasetControlTranslations } from \"./translations\";\nimport { getDatasetControlStyles } from \"./styles\";\nimport { IDatasetControl } from \"./interfaces\";\nimport { useRerender } from \"../../hooks/useRerender\";\n\nexport const DatasetControl = (props: IDatasetControl) => {\n    const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);\n    const [query, setQuery] = useState<string | undefined>(\"\");\n    const rerender = useRerender();\n    const dataset = props.parameters.Grid;\n    const injectedContextRef = useRef(props.context);\n    const styles = useMemo(() => getDatasetControlStyles(), []);\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    //@ts-ignore - private property\n    dataset._setRenderer(() => rerender());\n\n    //we need to have a way to customize the init behavior from above\n    const componentProps = onOverrideComponentProps({\n        onDatasetInit: () => dataset.refresh()\n    })\n\n    useMemo(() => {\n        //@ts-ignore - private property\n        injectedContextRef.current = dataset._patchContext(props.context);\n    }, [props.context]);\n\n    useMemo(() => {\n        componentProps.onDatasetInit();\n    }, []);\n\n    useEffect(() => {\n        setQuery(dataset.getSearchQuery?.() ?? '');\n    }, [dataset.getSearchQuery?.()])\n\n    const onSearch = (query?: string) => {\n        dataset.setSearchQuery?.(query ?? \"\");\n        dataset.refresh();\n    }\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\" className={styles.root}>\n            {props.parameters.EnableQuickFind?.raw &&\n                <TextField\n                    className={styles.quickFind}\n                    value={query}\n                    placeholder={`${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`}\n                    deleteButtonProps={query ? {\n                        key: 'delete',\n                        iconProps: {\n                            iconName: 'Cancel'\n                        },\n                        onClick: () => {\n                            setQuery(\"\");\n                            onSearch(undefined);\n                        }\n                    } : undefined}\n                    suffixItems={[{\n                        key: 'search',\n                        iconProps: {\n                            iconName: 'Search'\n                        },\n                        onClick: () => onSearch(query)\n                    }]}\n                    onKeyUp={(e) => {\n                        if (e.key === 'Enter') {\n                            onSearch(query);\n                        }\n                    }}\n                    onChange={(e, newValue) => setQuery(newValue)} />\n            }\n            <Grid \n            {...props} \n            context={injectedContextRef.current} />\n        </ThemeProvider>\n    )\n}"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"DatasetControl.js","sources":["../../../src/components/DatasetControl/DatasetControl.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Grid } from \"../Grid\";\nimport { useControl } from \"../../hooks\";\nimport { MessageBar, MessageBarButton, MessageBarType, ThemeProvider } from \"@fluentui/react\";\nimport { datasetControlTranslations } from \"./translations\";\nimport { getDatasetControlStyles } from \"./styles\";\nimport { IDatasetControl } from \"./interfaces\";\nimport { QuickFind } from \"./QuickFind/QuickFind\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport { useRerender } from \"@talxis/react-components\";\n\nexport const DatasetControl = (props: IDatasetControl) => {\n  const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);\n  const rerender = useRerender();\n  const dataset = props.parameters.Grid;\n  const injectedContextRef = useRef(props.context);\n  const styles = useMemo(() => getDatasetControlStyles(), []);\n  const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n  //@ts-ignore - private property\n  dataset._setRenderer(() => rerender());\n\n  //we need to have a way to customize the init behavior from above\n  const componentProps = onOverrideComponentProps({\n    onDatasetInit: () => {\n      if (dataset.paging.pageNumber > 1) {\n        dataset.paging.loadExactPage(dataset.paging.pageNumber)\n      }\n      else {\n        dataset.refresh();\n      }\n    }\n  });\n\n  const renderErrorMessageBar = (onReset?: () => void) => {\n    <MessageBar\n      isMultiline={false}\n      actions={<MessageBarButton className={styles.messageBarBtn} text={labels.reload()} onClick={() => {\n        onReset?.();\n        dataset.refresh();\n      }} />}\n      messageBarType={MessageBarType.error}>\n      {dataset.errorMessage || labels.generalError()}\n    </MessageBar>\n  }\n\n  useMemo(() => {\n    //@ts-ignore - private property\n    injectedContextRef.current = dataset._patchContext(props.context);\n  }, [props.context]);\n\n  useMemo(() => {\n    componentProps.onDatasetInit();\n  }, []);\n\n\n  return (\n    <ThemeProvider theme={theme} applyTo=\"none\" className={styles.root}>\n      {props.parameters.EnableQuickFind?.raw &&\n        <QuickFind dataset={dataset} labels={labels} />\n      }\n      {/*       {dataset.error && renderErrorMessageBar()} */}\n      <ErrorBoundary fallback={(resetError: () => void) => { renderErrorMessageBar(() => resetError()) }}>\n        <Grid\n          {...props}\n          context={injectedContextRef.current} />\n      </ErrorBoundary>\n    </ThemeProvider>\n  )\n}"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;AAWa,MAAA,cAAc,GAAG,CAAC,KAAsB,KAAI;AACvD,IAAA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,EAAE,0BAA0B,CAAC,CAAC;AAC1F,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAC/B,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IACtC,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACjD,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,uBAAuB,EAAE,EAAE,EAAE,CAAC,CAAC;AAC5D,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;;IAEtF,OAAO,CAAC,YAAY,CAAC,MAAM,QAAQ,EAAE,CAAC,CAAC;;IAGvC,MAAM,cAAc,GAAG,wBAAwB,CAAC;QAC9C,aAAa,EAAE,MAAK;AAClB,YAAA,IAAI,OAAO,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,EAAE;gBACjC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;AACxD,aAAA;AACI,iBAAA;gBACH,OAAO,CAAC,OAAO,EAAE,CAAC;AACnB,aAAA;SACF;AACF,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,qBAAqB,GAAG,CAAC,OAAoB,KAAI;QACrDA,GAAC,CAAA,UAAU,EACT,EAAA,WAAW,EAAE,KAAK,EAClB,OAAO,EAAEA,GAAA,CAAC,gBAAgB,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,MAAK;oBAC/F,OAAO,IAAI,CAAC;oBACZ,OAAO,CAAC,OAAO,EAAE,CAAC;AACpB,iBAAC,GAAI,EACL,cAAc,EAAE,cAAc,CAAC,KAAK,EAAA,QAAA,EACnC,OAAO,CAAC,YAAY,IAAI,MAAM,CAAC,YAAY,EAAE,GACnC,CAAA;AACf,KAAC,CAAA;IAED,OAAO,CAAC,MAAK;;QAEX,kBAAkB,CAAC,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACpE,KAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpB,OAAO,CAAC,MAAK;QACX,cAAc,CAAC,aAAa,EAAE,CAAC;KAChC,EAAE,EAAE,CAAC,CAAC;IAGP,QACEC,IAAC,CAAA,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAC/D,QAAA,EAAA,CAAA,KAAK,CAAC,UAAU,CAAC,eAAe,EAAE,GAAG;gBACpCD,GAAC,CAAA,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,EAGjDA,GAAC,CAAA,aAAa,IAAC,QAAQ,EAAE,CAAC,UAAsB,KAAI,EAAG,qBAAqB,CAAC,MAAM,UAAU,EAAE,CAAC,CAAA,EAAE,EAChG,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAA,GACC,KAAK,EACT,OAAO,EAAE,kBAAkB,CAAC,OAAO,EAAI,CAAA,EAAA,CAC3B,CACF,EAAA,CAAA,EACjB;AACH;;;;"}

package/dist/components/DatasetControl/ErrorBoundary.js

@@ -0,0 +1,33 @@
+import React__default from 'react';
+
+class ErrorBoundary extends React__default.Component {
+    constructor(props) {
+      super(props);
+      this.state = { hasError: false };
+    }
+  
+    static getDerivedStateFromError(error) {
+      // Update state so the next render will show the fallback UI.
+      return { hasError: true };
+    }
+  
+    componentDidCatch(error, info) {
+        console.error(error);
+    }
+
+    resetError() {
+      this.setState({ hasError: false });
+    }
+  
+    render() {
+      if (this.state.hasError) {
+        // You can render any custom fallback UI
+        return this.props.fallback(() => this.resetError());
+      }
+  
+      return this.props.children;
+    }
+  }
+
+export { ErrorBoundary };
+//# sourceMappingURL=ErrorBoundary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sources":["../../../src/components/DatasetControl/ErrorBoundary.js"],"sourcesContent":["import React from 'react';\n\nexport class ErrorBoundary extends React.Component {\n    constructor(props) {\n      super(props);\n      this.state = { hasError: false };\n    }\n  \n    static getDerivedStateFromError(error) {\n      // Update state so the next render will show the fallback UI.\n      return { hasError: true };\n    }\n  \n    componentDidCatch(error, info) {\n        console.error(error);\n    }\n\n    resetError() {\n      this.setState({ hasError: false });\n    }\n  \n    render() {\n      if (this.state.hasError) {\n        // You can render any custom fallback UI\n        return this.props.fallback(() => this.resetError());\n      }\n  \n      return this.props.children;\n    }\n  }"],"names":["React"],"mappings":";;AAEO,MAAM,aAAa,SAASA,cAAK,CAAC,SAAS,CAAC;AACnD,IAAI,WAAW,CAAC,KAAK,EAAE;AACvB,MAAM,KAAK,CAAC,KAAK,CAAC,CAAC;AACnB,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AACvC,KAAK;AACL;AACA,IAAI,OAAO,wBAAwB,CAAC,KAAK,EAAE;AAC3C;AACA,MAAM,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAChC,KAAK;AACL;AACA,IAAI,iBAAiB,CAAC,KAAK,EAAE,IAAI,EAAE;AACnC,QAAQ,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAC7B,KAAK;AACL;AACA,IAAI,UAAU,GAAG;AACjB,MAAM,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AACzC,KAAK;AACL;AACA,IAAI,MAAM,GAAG;AACb,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AAC/B;AACA,QAAQ,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;AAC5D,OAAO;AACP;AACA,MAAM,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;AACjC,KAAK;AACL;;;;"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IDataset } from "@talxis/client-libraries";
+import { datasetControlTranslations } from "../translations";
+import { ITranslation } from "../../../hooks";
+interface IQuickFindProps {
+    labels: ITranslation<typeof datasetControlTranslations>;
+    dataset: IDataset;
+}
+export declare const QuickFind: (props: IQuickFindProps) => JSX.Element;
+export {};

package/dist/components/DatasetControl/QuickFind/QuickFind.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { TextField } from '@talxis/react-components';
+import { useState, useEffect } from 'react';
+
+const QuickFind = (props) => {
+    const { dataset, labels } = { ...props };
+    const [query, setQuery] = useState('');
+    const onSearch = (query) => {
+        dataset.setSearchQuery?.(query ?? "");
+        dataset.refresh();
+    };
+    useEffect(() => {
+        setQuery(dataset.getSearchQuery?.() ?? '');
+    }, [dataset.getSearchQuery?.()]);
+    return jsx(TextField, { value: query, placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`, deleteButtonProps: query ? {
+            key: 'delete',
+            iconProps: {
+                iconName: 'Cancel'
+            },
+            onClick: () => {
+                setQuery("");
+                onSearch(undefined);
+            }
+        } : undefined, suffixItems: [{
+                key: 'search',
+                iconProps: {
+                    iconName: 'Search'
+                },
+                onClick: () => onSearch(query)
+            }], onKeyUp: (e) => {
+            if (e.key === 'Enter') {
+                onSearch(query);
+            }
+        }, onChange: (e, newValue) => setQuery(newValue ?? '') });
+};
+
+export { QuickFind };
+//# sourceMappingURL=QuickFind.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickFind.js","sources":["../../../../src/components/DatasetControl/QuickFind/QuickFind.tsx"],"sourcesContent":["import { IDataset } from \"@talxis/client-libraries\";\nimport { TextField } from \"@talxis/react-components\";\nimport { datasetControlTranslations } from \"../translations\";\nimport { ITranslation } from \"../../../hooks\";\nimport { useEffect, useState } from \"react\";\n\ninterface IQuickFindProps {\n    labels: ITranslation<typeof datasetControlTranslations>\n    dataset: IDataset;\n}\n\nexport const QuickFind = (props: IQuickFindProps) => {\n    const {dataset, labels} = {...props};\n    const [query, setQuery] = useState<string>('');\n\n    const onSearch = (query?: string) => {\n        dataset.setSearchQuery?.(query ?? \"\");\n        dataset.refresh();\n    }\n\n    useEffect(() => {\n        setQuery(dataset.getSearchQuery?.() ?? '');\n    }, [dataset.getSearchQuery?.()])\n\n    return <TextField\n    value={query}\n    placeholder={`${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`}\n    deleteButtonProps={query ? {\n        key: 'delete',\n        iconProps: {\n            iconName: 'Cancel'\n        },\n        onClick: () => {\n            setQuery(\"\");\n            onSearch(undefined);\n        }\n    } : undefined}\n    suffixItems={[{\n        key: 'search',\n        iconProps: {\n            iconName: 'Search'\n        },\n        onClick: () => onSearch(query)\n    }]}\n    onKeyUp={(e) => {\n        if (e.key === 'Enter') {\n            onSearch(query);\n        }\n    }}\n    onChange={(e, newValue) => setQuery(newValue ?? '')} />\n}"],"names":["_jsx"],"mappings":";;;;AAWa,MAAA,SAAS,GAAG,CAAC,KAAsB,KAAI;IAChD,MAAM,EAAC,OAAO,EAAE,MAAM,EAAC,GAAG,EAAC,GAAG,KAAK,EAAC,CAAC;IACrC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;AAE/C,IAAA,MAAM,QAAQ,GAAG,CAAC,KAAc,KAAI;QAChC,OAAO,CAAC,cAAc,GAAG,KAAK,IAAI,EAAE,CAAC,CAAC;QACtC,OAAO,CAAC,OAAO,EAAE,CAAC;AACtB,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;QACX,QAAQ,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,EAAE,CAAC,CAAC;KAC9C,EAAE,CAAC,OAAO,CAAC,cAAc,IAAI,CAAC,CAAC,CAAA;AAEhC,IAAA,OAAOA,GAAC,CAAA,SAAS,EACjB,EAAA,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,CAAG,EAAA,MAAM,CAAC,MAAM,EAAE,CAAI,CAAA,EAAA,OAAO,CAAC,WAAW,EAAE,EAAE,qBAAqB,IAAI,MAAM,CAAC,OAAO,EAAE,CAAA,GAAA,CAAK,EACxG,iBAAiB,EAAE,KAAK,GAAG;AACvB,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,SAAS,EAAE;AACP,gBAAA,QAAQ,EAAE,QAAQ;AACrB,aAAA;YACD,OAAO,EAAE,MAAK;gBACV,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACb,QAAQ,CAAC,SAAS,CAAC,CAAC;aACvB;AACJ,SAAA,GAAG,SAAS,EACb,WAAW,EAAE,CAAC;AACV,gBAAA,GAAG,EAAE,QAAQ;AACb,gBAAA,SAAS,EAAE;AACP,oBAAA,QAAQ,EAAE,QAAQ;AACrB,iBAAA;AACD,gBAAA,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC;AACjC,aAAA,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,KAAI;AACX,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;AACnB,aAAA;AACL,SAAC,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC,GAAI,CAAA;AAC3D;;;;"}

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

@@ -4,5 +4,7 @@ export declare const getDatasetControlStyles: () => import("@fluentui/react").IP
         flexDirection: string;
         gap: number;
     };
-    quickFind: {};
+    messageBarBtn: {
+        minHeight: string;
+    };
 }>;

package/dist/components/DatasetControl/styles.js

@@ -7,8 +7,8 @@ const getDatasetControlStyles = () => {
             flexDirection: 'column',
             gap: 15
         },
-        quickFind: {
-        //alignSelf: 'flex-end'
+        messageBarBtn: {
+            minHeight: 'inherit'
         }
     });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../src/components/DatasetControl/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getDatasetControlStyles = () => {\n    return mergeStyleSets({\n        root: {\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 15\n        },\n        quickFind: {\n            //alignSelf: 'flex-end'\n        }\n    });\n}"],"names":[],"mappings":";;AAEO,MAAM,uBAAuB,GAAG,MAAK;AACxC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACV,SAAA;AACD,QAAA,SAAS,EAAE;;AAEV,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../src/components/DatasetControl/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getDatasetControlStyles = () => {\n    return mergeStyleSets({\n        root: {\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 15\n        },\n        messageBarBtn: {\n            minHeight: 'inherit'\n        }\n    });\n}"],"names":[],"mappings":";;AAEO,MAAM,uBAAuB,GAAG,MAAK;AACxC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACV,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}

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

@@ -7,4 +7,12 @@ export declare const datasetControlTranslations: {
         1029: string;
         1033: string;
     };
+    generalError: {
+        1029: string;
+        1033: string;
+    };
+    reload: {
+        1029: string;
+        1033: string;
+    };
 };

package/dist/components/DatasetControl/translations.js

@@ -1,6 +1,8 @@
 const datasetControlTranslations = {
     "search": { 1029: "Vyhledat", 1033: "Search" },
-    "records": { 1029: "záznamy", 1033: "records" }
+    "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 };

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

@@ -1 +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};\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;;;;;"}
+{"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.js

@@ -94,7 +94,8 @@ const DateTime = (componentProps) => {
                         strings: {
                             invalidInputErrorMessage: labels.invalidTimeInput()
                         }
-                    }
+                    },
+                    theme: componentProps.context.fluentDesignLanguage?.applicationTheme ?? theme
                 };
                 if (isDateTime) {
                     calendarProps.onSelectDate = (newDate) => date.set(newDate);

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

@@ -1 +1 @@
-{"version":3,"file":"DateTime.js","sources":["../../../src/components/DateTime/DateTime.tsx"],"sourcesContent":["\nimport { 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 React from 'react';\nimport { useControlSizing } from \"../../hooks/useControlSizing\";\nimport dayjs from \"dayjs\";\n\nexport const DateTime = (componentProps: IDateTime) => {\n    const ref = useRef<HTMLDivElement>(null);\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    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    return (\n        <ThemeProvider theme={theme} applyTo=\"none\" ref={ref}>\n            <DatePicker\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                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                {\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                    };\n                    if(isDateTime) {\n                        calendarProps.onSelectDate = (newDate) => date.set(newDate)\n                    }\n                   return <Calendar {...calendarProps} />\n                    }\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                }\n                value={date.get() ?? undefined}\n            />\n        </ThemeProvider>\n    );\n};\n\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"DateTime.js","sources":["../../../src/components/DateTime/DateTime.tsx"],"sourcesContent":["\nimport { 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 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    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    return (\n        <ThemeProvider theme={theme} applyTo=\"none\" ref={ref}>\n            <DatePicker\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                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                {\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                }\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                }\n                value={date.get() ?? undefined}\n            />\n        </ThemeProvider>\n    );\n};\n\n"],"names":["_jsx"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ICalendarProps } from "@fluentui/react";
+import { ICalendarProps, ITheme } from "@fluentui/react";
 import { ITimePickerProps } from "@talxis/react-components";
 interface IInternalTimePickerProps extends Omit<ITimePickerProps, 'onChange' | 'defaultValue'> {
     formattedDateTime: string;
@@ -7,6 +7,7 @@ interface IInternalTimePickerProps extends Omit<ITimePickerProps, 'onChange' | '
     timeFormat: string;
     dateTimeFormat: string;
     lastInputedTimeString?: string;
+    theme?: ITheme;
     onChange: (time?: string) => void;
 }
 export interface IInternalCalendarProps extends ICalendarProps {

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useTheme } from '@fluentui/react';
+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';
@@ -51,12 +51,12 @@ const Calendar = (props) => {
             setError(true);
         }
     }, [formattedDateTime]);
-    return (jsxs("div", { 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, useComboBoxAsMenuWidth: true, styles: {
+    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, allowFreeform: true })] }));
+                    }, increments: 15 })] }));
 };
 
 export { Calendar };

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../src/components/DateTime/components/Calendar.tsx"],"sourcesContent":["import { ICalendarProps, IComboBox } 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    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        <div 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                    useComboBoxAsMenuWidth\n                    styles={{\n                        callout: {\n                            maxHeight: '300px !important'\n                        }\n                    }}\n                    increments={15}\n                    allowFreeform\n                />\n            }\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx","CalendarBase"],"mappings":"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"}
+{"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.js

@@ -11,7 +11,7 @@ const useDateTime = (props, ref) => {
     const boundValue = props.parameters.value;
     const context = props.context;
     const behavior = boundValue.attributes.Behavior;
-    const format = boundValue.attributes.Format;
+    const format = boundValue.attributes.Format ?? boundValue.type;
     const dateFormattingInfo = context.userSettings.dateFormattingInfo;
     const lastValidDateRef = useRef(undefined);
     const isDateTime = (() => {
@@ -46,22 +46,6 @@ const useDateTime = (props, ref) => {
         }
         return date;
     };
-    const { value, labels, theme, setValue, onNotifyOutputChanged } = useInputBasedControl('DateTime', props, {
-        formatter: formatDate,
-        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]);
     useEffect(() => {
         if (boundValue.raw instanceof Date) {
             lastValidDateRef.current = boundValue.raw;
@@ -125,6 +109,23 @@ const useDateTime = (props, ref) => {
             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,

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

@@ -1 +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    },\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;\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    const {value, labels, theme, setValue, onNotifyOutputChanged} = useInputBasedControl<string | undefined, IDateTimeParameters, IDateTimeOutputs, Required<IDateTime>['translations']>('DateTime', props, {\n        formatter: formatDate,\n        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)\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    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    return [\n        isDateTime,\n        theme,\n        labels,\n        {\n            get: getDate,\n            clear: clearDate,\n            getFormatted: () => value,\n            set: selectDate,\n            setDateString: setValue\n        },\n        {\n            shortDatePattern: shortDatePattern,\n            shortTimePattern: shortTimePattern,\n            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n        }\n    ]\n};"],"names":[],"mappings":"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"}
+{"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    },\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        },\n        {\n            shortDatePattern: shortDatePattern,\n            shortTimePattern: shortTimePattern,\n            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n        }\n    ]\n};"],"names":[],"mappings":"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"}

package/dist/components/Decimal/Decimal.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { TextField } from '@talxis/react-components';
 import { useInputBasedControl } from '../../hooks/useInputBasedControl.js';
-import { useRef, useEffect, useMemo } from 'react';
+import { useRef, useMemo, useEffect } from 'react';
 import numeral from 'numeral';
 import { CURRENCY_POSITIVE_PATTERN, CURRENCY_NEGATIVE_PATTERN, NUMBER_NEGATIVE_PATTERN } from '../../constants.js';
 import { ThemeProvider } from '@fluentui/react';
@@ -51,6 +51,9 @@ const Decimal = (props) => {
         if (typeof value === 'number') {
             return value;
         }
+        if (value === initialFormattedValue) {
+            return boundValue.raw;
+        }
         const str = value?.replace(/\s/g, '');
         Numeral.decimal(numberFormatting);
         let positivePattern;
@@ -92,6 +95,7 @@ const Decimal = (props) => {
         formatter: formatter,
         valueExtractor: extractNumericPart
     });
+    const initialFormattedValue = useMemo(() => value, []);
     const getSuffixItems = () => {
         if (context.mode.isControlDisabled || !parameters.EnableSpinButton?.raw) {
             return undefined;