@talxis/base-controls 1.2510.1 → 1.2512.1

package/dist/components/Grid/{core/components/Cell → cells/cell}/styles.d.ts

@@ -1,7 +1,6 @@
 import { ITheme } from "@fluentui/react";
 import { IColumn } from "@talxis/client-libraries";
-export declare const getJustifyContent: (columnAlignment: Required<IColumn['alignment']>) => "center" | "flex-start" | "flex-end" | undefined;
-export declare const getCellStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+export declare const getCellStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
     cellRoot: {
         height: string;
         width: string;
@@ -9,11 +8,8 @@ export declare const getCellStyles: () => import("@fluentui/react").IProcessedSt
         alignItems: string;
         justifyContent: string;
     };
-    checkbox: {
-        marginRight: number;
-    };
 }>;
-export declare const getInnerCellStyles: (isEditing: boolean, theme: ITheme, columnAlignment: IColumn['alignment']) => import("@fluentui/react").IProcessedStyleSet<{
+export declare const getInnerCellStyles: (isEditing: boolean, theme: ITheme, columnAlignment: IColumn['alignment'], isExpanded: boolean) => import("@fluentui/react").IProcessedStyleSet<{
     innerCellRoot: {
         flex: number;
         display: string;
@@ -23,6 +19,16 @@ export declare const getInnerCellStyles: (isEditing: boolean, theme: ITheme, col
         marginLeft: number | undefined;
         marginRight: number | undefined;
     };
+    groupToggleButtonRoot: {
+        height: string;
+    };
+    groupToggleButtonIcon: {
+        transition: string;
+        fontSize: number;
+        color: string;
+        fontWeight: number;
+        transform: string;
+    };
     shimmerWrapper: {
         height: number;
     };

package/dist/components/Grid/{core/components/Cell → cells/cell}/styles.js

@@ -1,33 +1,17 @@
 import { mergeStyleSets } from '@fluentui/react';
 
-const getJustifyContent = (columnAlignment) => {
-    switch (columnAlignment) {
-        case 'left': {
-            return 'flex-start';
-        }
-        case 'center': {
-            return 'center';
-        }
-        case 'right': {
-            return 'flex-end';
-        }
-    }
-};
-const getCellStyles = () => {
+const getCellStyles = (theme) => {
     return mergeStyleSets({
         cellRoot: {
-            height: '100%',
+            height: '100% !important',
             width: '100%',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
-        },
-        checkbox: {
-            marginRight: 0.5
         }
     });
 };
-const getInnerCellStyles = (isEditing, theme, columnAlignment) => {
+const getInnerCellStyles = (isEditing, theme, columnAlignment, isExpanded) => {
     return mergeStyleSets({
         innerCellRoot: {
             flex: 1,
@@ -38,6 +22,16 @@ const getInnerCellStyles = (isEditing, theme, columnAlignment) => {
             marginLeft: isEditing ? -1 : undefined,
             marginRight: isEditing ? -1 : undefined,
         },
+        groupToggleButtonRoot: {
+            height: '100%'
+        },
+        groupToggleButtonIcon: {
+            transition: 'transform 0.1s linear',
+            fontSize: 12,
+            color: theme.semanticColors.infoIcon,
+            fontWeight: 600,
+            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+        },
         shimmerWrapper: {
             height: 10
         },
@@ -55,5 +49,5 @@ const getInnerCellStyles = (isEditing, theme, columnAlignment) => {
     });
 };
 
-export { getCellStyles, getInnerCellStyles, getJustifyContent };
+export { getCellStyles, getInnerCellStyles };
 //# sourceMappingURL=styles.js.map

package/dist/components/Grid/cells/cell/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Grid/cells/cell/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\";\nimport { IColumn } from \"@talxis/client-libraries\";\n\nexport const getCellStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        cellRoot: {\n            height: '100% !important',\n            width: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center'\n        }\n    })\n}\n\nexport const getInnerCellStyles = (isEditing: boolean, theme: ITheme, columnAlignment: IColumn['alignment'], isExpanded: boolean) => {\n    return mergeStyleSets({\n        innerCellRoot: {\n            flex: 1,\n            display: 'flex',\n            overflow: 'hidden',\n            alignItems: 'center',\n            height: '100%',\n            marginLeft: isEditing ? - 1 : undefined,\n            marginRight: isEditing ? - 1 : undefined,\n        },\n        groupToggleButtonRoot: {\n            height: '100%'\n        },\n        groupToggleButtonIcon: {\n            transition: 'transform 0.1s linear',\n            fontSize: 12,\n            color: theme.semanticColors.infoIcon,\n            fontWeight: 600,\n            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',\n        },\n        shimmerWrapper: {\n            height: 10\n        },\n        shimmerRoot: {\n            width: '100%',\n            paddingLeft: 10,\n            paddingRight: 10\n        },\n        errorIconRoot: {\n            color: `${theme.semanticColors.errorIcon} !important`\n        },\n        uneditableIconRoot: {\n            color: `${theme.semanticColors.bodyText} !important`\n        }\n    })\n}\n\n"],"names":[],"mappings":";;AAGa,MAAA,aAAa,GAAG,CAAC,KAAa,KAAI;AAC3C,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,QAAQ,EAAE;AACN,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,cAAc,EAAE,QAAQ;AAC3B,SAAA;AACJ,KAAA,CAAC,CAAA;AACN,EAAC;AAEM,MAAM,kBAAkB,GAAG,CAAC,SAAkB,EAAE,KAAa,EAAE,eAAqC,EAAE,UAAmB,KAAI;AAChI,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,aAAa,EAAE;AACX,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,MAAM,EAAE,MAAM;YACd,UAAU,EAAE,SAAS,GAAG,CAAE,CAAC,GAAG,SAAS;YACvC,WAAW,EAAE,SAAS,GAAG,CAAE,CAAC,GAAG,SAAS;AAC3C,SAAA;AACD,QAAA,qBAAqB,EAAE;AACnB,YAAA,MAAM,EAAE,MAAM;AACjB,SAAA;AACD,QAAA,qBAAqB,EAAE;AACnB,YAAA,UAAU,EAAE,uBAAuB;AACnC,YAAA,QAAQ,EAAE,EAAE;AACZ,YAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;AACpC,YAAA,UAAU,EAAE,GAAG;YACf,SAAS,EAAE,UAAU,GAAG,eAAe,GAAG,cAAc;AAC3D,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,KAAK,EAAE,CAAG,EAAA,KAAK,CAAC,cAAc,CAAC,SAAS,CAAa,WAAA,CAAA;AACxD,SAAA;AACD,QAAA,kBAAkB,EAAE;AAChB,YAAA,KAAK,EAAE,CAAG,EAAA,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAa,WAAA,CAAA;AACvD,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/Grid/cells/selection-cell/SelectionCell.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ICellRendererParams } from "@ag-grid-community/core";
+import { IRecord } from "@talxis/client-libraries";
+interface ISelectionCellProps extends ICellRendererParams {
+    record: IRecord;
+}
+export declare const SelectionCell: (props: ISelectionCellProps) => JSX.Element;
+export {};

package/dist/components/Grid/cells/selection-cell/SelectionCell.js

@@ -0,0 +1,78 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import { useRerender, Spinner } from '@talxis/react-components';
+import { ThemeProvider, SpinnerSize, IconButton, Checkbox } from '@fluentui/react';
+import { CheckmarkCircle24Filled, ErrorCircle24Filled } from '@fluentui/react-icons';
+import { getSelectionCellStyles } from './styles.js';
+import { useAgGridInstance } from '../../grid/ag-grid/useAgGridInstance.js';
+import { useGridInstance } from '../../grid/useGridInstance.js';
+import { RecordSaveErrorCallout } from './record-save-error-callout/RecordSaveErrorCallout.js';
+import { useEventEmitter } from '../../../../hooks/useEventEmitter.js';
+
+const SelectionCell = (props) => {
+    const { record } = props;
+    const saveResultButtonId = useMemo(() => `selection_result_${crypto.randomUUID()}`, []);
+    const grid = useGridInstance();
+    const agGrid = useAgGridInstance();
+    const checkBoxRef = useRef(null);
+    const recordSelectionState = agGrid.getRecordSelectionState(props.node);
+    const isRecordSelectionDisabled = grid.isRecordSelectionDisabled(record);
+    const theme = grid.getDefaultCellTheme(record);
+    const styles = useMemo(() => getSelectionCellStyles(theme), []);
+    const rerender = useRerender();
+    const [saveResult, setSaveResult] = useState(null);
+    const [isRecordSaveErrorCalloutVisible, setIsRecordSaveErrorCalloutVisible] = useState(false);
+    const onAfterSaved = (result) => {
+        setSaveResult(result);
+        if (result.success) {
+            setTimeout(() => setSaveResult(null), 2000);
+        }
+    };
+    const onCheckBoxClick = useCallback(e => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!isRecordSelectionDisabled) {
+            record.getDataProvider().toggleSelectedRecordId(record.getRecordId(), { clearExisting: agGrid.getGrid().getSelectionType() === 'single' });
+        }
+    }, []);
+    useEffect(() => {
+        //this needs to be done like this because stopPropagation in React onClick
+        //does not stop the event from propagating to the grid (cause by synthentic events)
+        //https://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events
+        if (checkBoxRef.current) {
+            checkBoxRef.current.addEventListener('click', onCheckBoxClick);
+        }
+        return () => {
+            checkBoxRef.current?.removeEventListener('click', onCheckBoxClick);
+        };
+    }, [saveResult]);
+    useEventEmitter(record, ['onBeforeSaved', 'onAfterSaved'], rerender);
+    useEventEmitter(record, 'onAfterSaved', onAfterSaved);
+    return jsx(ThemeProvider, { theme: theme, className: styles.selectionCellRoot, children: (() => {
+            if (record.getSummarizationType() === 'aggregation') {
+                return jsx(Fragment, {});
+            }
+            if (record.isSaving()) {
+                return jsx(Spinner, { size: SpinnerSize.xSmall });
+            }
+            else if (saveResult) {
+                return (jsxs(Fragment, { children: [jsx(IconButton, { id: saveResultButtonId, onClick: () => setIsRecordSaveErrorCalloutVisible(!saveResult.success), onRenderIcon: () => {
+                                if (saveResult?.success) {
+                                    return jsx(CheckmarkCircle24Filled, { className: styles.saveSuccessBtn });
+                                }
+                                else {
+                                    return jsx(ErrorCircle24Filled, { className: styles.saveErrorBtn });
+                                }
+                            } }), isRecordSaveErrorCalloutVisible &&
+                            jsx(RecordSaveErrorCallout, { record: record, saveResult: saveResult, targetId: saveResultButtonId, onDismiss: () => setIsRecordSaveErrorCalloutVisible(false), onClearSaveResult: () => setSaveResult(null) })] }));
+            }
+            else if (grid.getSelectionType() !== 'none') {
+                return (jsx("div", { ref: checkBoxRef, className: styles.checkBoxContainer, children: jsx(Checkbox, { checked: recordSelectionState === 'checked', disabled: isRecordSelectionDisabled, indeterminate: recordSelectionState === 'indeterminate', styles: {
+                            checkbox: styles.checkBox
+                        } }) }));
+            }
+        })() });
+};
+
+export { SelectionCell };
+//# sourceMappingURL=SelectionCell.js.map

package/dist/components/Grid/cells/selection-cell/SelectionCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionCell.js","sources":["../../../../../src/components/Grid/cells/selection-cell/SelectionCell.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { SelectionCellModel } from \"./SelectionCellModel\";\nimport { ICellRendererParams } from \"@ag-grid-community/core\";\nimport { IRecord, IRecordEvents, IRecordSaveOperationResult } from \"@talxis/client-libraries\";\nimport { Spinner, useRerender } from \"@talxis/react-components\";\nimport { Callout, Checkbox, IconButton, Link, SpinnerSize, Text, ThemeProvider, useTheme } from \"@fluentui/react\";\nimport { useEventEmitter } from \"../../../../hooks\";\nimport { CheckmarkCircle24Filled, ErrorCircle24Filled } from \"@fluentui/react-icons\";\nimport { getSelectionCellStyles } from \"./styles\";\nimport { useAgGridInstance } from \"../../grid/ag-grid/useAgGridInstance\";\nimport { useGridInstance } from \"../../grid/useGridInstance\";\nimport { RecordSaveErrorCallout } from \"./record-save-error-callout/RecordSaveErrorCallout\";\n\ninterface ISelectionCellProps extends ICellRendererParams {\n    record: IRecord;\n}\n\nexport const SelectionCell = (props: ISelectionCellProps) => {\n    const { record } = props;\n    const saveResultButtonId = useMemo(() => `selection_result_${crypto.randomUUID()}`, []);\n    const grid = useGridInstance();\n    const agGrid = useAgGridInstance();\n    const checkBoxRef = useRef<HTMLDivElement>(null);\n    const recordSelectionState = agGrid.getRecordSelectionState(props.node);\n    const isRecordSelectionDisabled = grid.isRecordSelectionDisabled(record);\n    const theme = grid.getDefaultCellTheme(record);\n    const styles = useMemo(() => getSelectionCellStyles(theme), []);\n    const rerender = useRerender();\n    const [saveResult, setSaveResult] = useState<IRecordSaveOperationResult | null>(null);\n    const [isRecordSaveErrorCalloutVisible, setIsRecordSaveErrorCalloutVisible] = useState<boolean>(false);\n\n    const onAfterSaved = (result: IRecordSaveOperationResult) => {\n        setSaveResult(result);\n        if (result.success) {\n            setTimeout(() => setSaveResult(null), 2000);\n        }\n    }\n\n    const onCheckBoxClick = useCallback(e => {\n        e.stopPropagation();\n        e.preventDefault();\n        if (!isRecordSelectionDisabled) {\n            record.getDataProvider().toggleSelectedRecordId(record.getRecordId(), { clearExisting: agGrid.getGrid().getSelectionType() === 'single' });\n        }\n    }, []);\n\n    useEffect(() => {\n        //this needs to be done like this because stopPropagation in React onClick\n        //does not stop the event from propagating to the grid (cause by synthentic events)\n        //https://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events\n        if (checkBoxRef.current) {\n            checkBoxRef.current.addEventListener('click', onCheckBoxClick)\n        }\n        return () => {\n            checkBoxRef.current?.removeEventListener('click', onCheckBoxClick);\n        }\n    }, [saveResult]);\n\n    useEventEmitter<IRecordEvents>(record, ['onBeforeSaved', 'onAfterSaved'], rerender);\n    useEventEmitter<IRecordEvents>(record, 'onAfterSaved', onAfterSaved);\n\n    return <ThemeProvider theme={theme} className={styles.selectionCellRoot}>\n        {(() => {\n            if(record.getSummarizationType() === 'aggregation') {\n                return <></>\n            }\n            if (record.isSaving()) {\n                return <Spinner size={SpinnerSize.xSmall} />\n            }\n            else if (saveResult) {\n                return (\n                    <>\n                        <IconButton\n                            id={saveResultButtonId}\n                            onClick={() => setIsRecordSaveErrorCalloutVisible(!saveResult.success)}\n                            onRenderIcon={() => {\n                                if (saveResult?.success) {\n                                    return <CheckmarkCircle24Filled className={styles.saveSuccessBtn} />\n                                }\n                                else {\n                                    return <ErrorCircle24Filled className={styles.saveErrorBtn} />\n                                }\n                            }}\n                        />\n                        {isRecordSaveErrorCalloutVisible &&\n                            <RecordSaveErrorCallout\n                                record={record}\n                                saveResult={saveResult}\n                                targetId={saveResultButtonId}\n                                onDismiss={() => setIsRecordSaveErrorCalloutVisible(false)}\n                                onClearSaveResult={() => setSaveResult(null)} />\n                        }\n                    </>\n                )\n            }\n            else if (grid.getSelectionType() !== 'none') {\n                return (\n                    <div\n                        ref={checkBoxRef}\n                        className={styles.checkBoxContainer}>\n                        <Checkbox\n                            checked={recordSelectionState === 'checked'}\n                            disabled={isRecordSelectionDisabled}\n                            indeterminate={recordSelectionState === 'indeterminate'}\n                            styles={{\n                                checkbox: styles.checkBox\n                            }} />\n                    </div>\n                )\n            }\n        })()}\n    </ThemeProvider>\n}"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/components/Grid/cells/selection-cell/SelectionCellModel.d.ts

@@ -0,0 +1,7 @@
+import { IRecord } from "@talxis/client-libraries";
+export declare class SelectionCellModel {
+    private _record;
+    constructor(record: IRecord);
+    isLoading(): boolean;
+    getSelectionState(): 'checked' | 'unchecked' | 'intermediate';
+}

package/dist/components/Grid/cells/selection-cell/record-save-error-callout/RecordSaveErrorCallout.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IRecord, IRecordSaveOperationResult } from "@talxis/client-libraries";
+interface IRecordSaveCalloutProps {
+    targetId: string;
+    saveResult: IRecordSaveOperationResult;
+    record: IRecord;
+    onDismiss: () => void;
+    onClearSaveResult: () => void;
+}
+export declare const RecordSaveErrorCallout: (props: IRecordSaveCalloutProps) => JSX.Element;
+export {};

package/dist/components/Grid/cells/selection-cell/record-save-error-callout/RecordSaveErrorCallout.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { getRecordSaveErrorCalloutStyles } from './styles.js';
+import { Callout, Text, ThemeProvider, Link } from '@fluentui/react';
+import { useGridInstance } from '../../../grid/useGridInstance.js';
+import { useControlTheme } from '../../../../../utils/theme/hooks/useControlTheme.js';
+
+const RecordSaveErrorCallout = (props) => {
+    const { saveResult, record, targetId, onDismiss, onClearSaveResult } = props;
+    const styles = useMemo(() => getRecordSaveErrorCalloutStyles(), []);
+    const grid = useGridInstance();
+    const theme = useControlTheme(grid.getPcfContext().fluentDesignLanguage);
+    return jsxs(Callout, { className: styles.errorCallout, theme: theme, onDismiss: onDismiss, target: `#${targetId}`, children: [jsx(Text, { block: true, className: styles.errorCalloutTitle, variant: "xLarge", children: "Record could not be saved" }), jsx(ThemeProvider, { theme: theme, className: styles.errorCalloutContent, children: saveResult.errors?.map((error, i) => {
+                    return jsxs("div", { children: [error.fieldName && jsx(Text, { children: jsxs("strong", { children: [record.getField(error.fieldName).getColumn().displayName, ": "] }) }, i), jsx(Text, { children: error.message })] }, i);
+                }) }), jsx(Link, { className: styles.errorCalloutDismissLink, onClick: onClearSaveResult, children: "Dismiss" })] });
+};
+
+export { RecordSaveErrorCallout };
+//# sourceMappingURL=RecordSaveErrorCallout.js.map

package/dist/components/Grid/cells/selection-cell/record-save-error-callout/RecordSaveErrorCallout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordSaveErrorCallout.js","sources":["../../../../../../src/components/Grid/cells/selection-cell/record-save-error-callout/RecordSaveErrorCallout.tsx"],"sourcesContent":["import { useMemo } from \"react\"\nimport { getRecordSaveErrorCalloutStyles } from \"./styles\"\nimport { Callout, Link, Text, ThemeProvider } from \"@fluentui/react\";\nimport { IRecord, IRecordSaveOperationResult } from \"@talxis/client-libraries\";\nimport { useControlTheme } from \"../../../../../utils\";\nimport { useGridInstance } from \"../../../grid/useGridInstance\";\n\ninterface IRecordSaveCalloutProps {\n    targetId: string;\n    saveResult: IRecordSaveOperationResult;\n    record: IRecord;\n    onDismiss: () => void;\n    onClearSaveResult: () => void;\n}\n\nexport const RecordSaveErrorCallout = (props: IRecordSaveCalloutProps) => {\n    const { saveResult, record, targetId, onDismiss, onClearSaveResult } = props;\n    const styles = useMemo(() => getRecordSaveErrorCalloutStyles(), []);\n    const grid = useGridInstance();\n    const theme = useControlTheme(grid.getPcfContext().fluentDesignLanguage);\n\n    return <Callout\n        className={styles.errorCallout}\n        theme={theme}\n        onDismiss={onDismiss}\n        target={`#${targetId}`}>\n        <Text block className={styles.errorCalloutTitle} variant=\"xLarge\">Record could not be saved</Text>\n        <ThemeProvider theme={theme} className={styles.errorCalloutContent}>\n            {saveResult.errors?.map((error, i) => {\n                return <div key={i}>\n                    {error.fieldName && <Text key={i}><strong>{record.getField(error.fieldName).getColumn().displayName}: </strong></Text>}\n                    <Text>{error.message}</Text>\n                </div>\n            })}\n        </ThemeProvider>\n        <Link className={styles.errorCalloutDismissLink} onClick={onClearSaveResult}>Dismiss</Link>\n    </Callout>\n}"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAea,MAAA,sBAAsB,GAAG,CAAC,KAA8B,KAAI;AACrE,IAAA,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;AAC7E,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,+BAA+B,EAAE,EAAE,EAAE,CAAC,CAAC;AACpE,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,oBAAoB,CAAC,CAAC;AAEzE,IAAA,OAAOA,IAAC,CAAA,OAAO,EACX,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,CAAA,CAAA,EAAI,QAAQ,CAAA,CAAE,EACtB,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAA,IAAA,EAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,EAAC,QAAQ,EAAiC,QAAA,EAAA,2BAAA,EAAA,CAAA,EAClGA,GAAC,CAAA,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,mBAAmB,EAAA,QAAA,EAC7D,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAI;AACjC,oBAAA,OAAOD,yBACF,KAAK,CAAC,SAAS,IAAIC,IAAC,IAAI,EAAA,EAAA,QAAA,EAASD,IAAS,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,CAAC,WAAW,EAAA,IAAA,CAAA,EAAA,CAAY,EAAhF,EAAA,CAAC,CAAsF,EACtHC,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAE,KAAK,CAAC,OAAO,GAAQ,CAFf,EAAA,EAAA,CAAC,CAGZ,CAAA;AACV,iBAAC,CAAC,EACU,CAAA,EAChBA,GAAC,CAAA,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,uBAAuB,EAAE,OAAO,EAAE,iBAAiB,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,IACrF,CAAA;AACd;;;;"}

package/dist/components/Grid/cells/selection-cell/record-save-error-callout/styles.d.ts

@@ -0,0 +1,17 @@
+export declare const getRecordSaveErrorCalloutStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    errorCallout: {
+        width: number;
+        maxWidth: string;
+        padding: string;
+    };
+    errorCalloutDismissLink: {
+        marginTop: number;
+        display: string;
+    };
+    errorCalloutTitle: {
+        marginBottom: number;
+    };
+    errorCalloutContent: {
+        marginTop: number;
+    };
+}>;

package/dist/components/Grid/cells/selection-cell/record-save-error-callout/styles.js

@@ -0,0 +1,24 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getRecordSaveErrorCalloutStyles = () => {
+    return mergeStyleSets({
+        errorCallout: {
+            width: 320,
+            maxWidth: '90%',
+            padding: '20px 24px',
+        },
+        errorCalloutDismissLink: {
+            marginTop: 20,
+            display: 'block'
+        },
+        errorCalloutTitle: {
+            marginBottom: 12
+        },
+        errorCalloutContent: {
+            marginTop: 8
+        },
+    });
+};
+
+export { getRecordSaveErrorCalloutStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/Grid/cells/selection-cell/record-save-error-callout/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Grid/cells/selection-cell/record-save-error-callout/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getRecordSaveErrorCalloutStyles = () => {\n    return mergeStyleSets({\n        errorCallout: {\n            width: 320,\n            maxWidth: '90%',\n            padding: '20px 24px',\n        },\n        errorCalloutDismissLink: {\n            marginTop: 20,\n            display: 'block'\n        },\n        errorCalloutTitle: {\n            marginBottom: 12\n        },\n        errorCalloutContent: {\n            marginTop: 8\n        },\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,+BAA+B,GAAG,MAAK;AAChD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,YAAY,EAAE;AACV,YAAA,KAAK,EAAE,GAAG;AACV,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,WAAW;AACvB,SAAA;AACD,QAAA,uBAAuB,EAAE;AACrB,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,OAAO,EAAE,OAAO;AACnB,SAAA;AACD,QAAA,iBAAiB,EAAE;AACf,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;AACD,QAAA,mBAAmB,EAAE;AACjB,YAAA,SAAS,EAAE,CAAC;AACf,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/Grid/cells/selection-cell/styles.d.ts

@@ -0,0 +1,27 @@
+import { ITheme } from "@fluentui/react";
+export declare const getSelectionCellStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+    selectionCellRoot: {
+        height: string;
+        width: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    saveSuccessBtn: {
+        color: string;
+    };
+    saveErrorBtn: {
+        color: string;
+    };
+    checkBoxContainer: {
+        width: string;
+        height: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        cursor: string;
+    };
+    checkBox: {
+        marginRight: number;
+    };
+}>;

package/dist/components/Grid/cells/selection-cell/styles.js

@@ -0,0 +1,33 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getSelectionCellStyles = (theme) => {
+    return mergeStyleSets({
+        selectionCellRoot: {
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        saveSuccessBtn: {
+            color: theme.semanticColors.successIcon,
+        },
+        saveErrorBtn: {
+            color: theme.semanticColors.errorIcon,
+        },
+        checkBoxContainer: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: 'pointer'
+        },
+        checkBox: {
+            marginRight: 0.5
+        }
+    });
+};
+
+export { getSelectionCellStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/Grid/cells/selection-cell/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Grid/cells/selection-cell/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\"\n\nexport const getSelectionCellStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        selectionCellRoot: {\n            height: '100%',\n            width: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center'\n        },\n        saveSuccessBtn: {\n            color: theme.semanticColors.successIcon,\n        },\n        saveErrorBtn: {\n            color: theme.semanticColors.errorIcon,\n        },\n        checkBoxContainer: {\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            cursor: 'pointer'\n        },\n        checkBox: {\n            marginRight: 0.5\n        }\n    })\n}"],"names":[],"mappings":";;AAEa,MAAA,sBAAsB,GAAG,CAAC,KAAa,KAAI;AACpD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,iBAAiB,EAAE;AACf,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,cAAc,EAAE,QAAQ;AAC3B,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;AAC1C,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;AACxC,SAAA;AACD,QAAA,iBAAiB,EAAE;AACf,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,MAAM,EAAE,SAAS;AACpB,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,GAAG;AACnB,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/Grid/{core/components/ColumnHeader → column-headers/column-header}/ColumnHeader.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IGridColumn } from '../../interfaces/IGridColumn';
+import { IGridColumn } from '../../grid/GridModel';
 export interface IColumnHeader {
     baseColumn: IGridColumn;
 }

package/dist/components/Grid/column-headers/column-header/ColumnHeader.js

@@ -0,0 +1,88 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { useGridInstance } from '../../grid/useGridInstance.js';
+import { ColumnHeaderContextualMenu } from './ColumnHeaderContextualMenu.js';
+import { FilterCallout } from './FilterCallout.js';
+import { useRerender } from '@talxis/react-components';
+import { useAgGridInstance } from '../../grid/ag-grid/useAgGridInstance.js';
+import { useEventEmitter } from '../../../../hooks/useEventEmitter.js';
+import { NestedControlRenderer } from '../../../NestedControlRenderer/NestedControlRenderer.js';
+
+const ColumnHeader = (props) => {
+    const grid = useGridInstance();
+    const agGrid = useAgGridInstance();
+    const column = grid.getGridColumnByName(props.baseColumn.name, true);
+    const [columnHeaderContextualMenuProps, setColumnHeaderContextualMenuProps] = useState(null);
+    const [filterCalloutProps, setFilterCalloutProps] = useState(null);
+    const buttonRef = useRef(null);
+    const rerender = useRerender();
+    useEventEmitter(agGrid, 'onRefresh', rerender);
+    //needs to be called with onTouchEnd as well since ag grid cancels the click event on them
+    const onClick = () => {
+        if ((!column.isFilterable && column.disableSorting && !column.canBeAggregated && !column?.metadata?.CanBeGrouped)) {
+            return;
+        }
+        setColumnHeaderContextualMenuProps({
+            column: column,
+            onDismiss: (e, dismissAll, showFilterCallout) => {
+                setColumnHeaderContextualMenuProps(null);
+                if (!showFilterCallout) {
+                    return;
+                }
+                setFilterCalloutProps({
+                    column: column,
+                    onDismiss: () => {
+                        setFilterCalloutProps(null);
+                    }
+                });
+            }
+        });
+    };
+    const preventDismissOnEvent = (e) => {
+        if (e.type !== 'scroll') {
+            return false;
+        }
+        const target = e.target;
+        //check for vertical scroll
+        if (target?.classList?.contains('ag-body-viewport') || target?.classList?.contains('ag-body-vertical-scroll-viewport')) {
+            return true;
+        }
+        //ios outputs horizontal scroll if focused in callout btn which would result in dismiss of callout
+        if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
+            return true;
+        }
+        return false;
+    };
+    return (jsxs(Fragment, { children: [jsx("div", { ref: buttonRef, onClick: onClick, onTouchEnd: onClick, children: jsx(NestedControlRenderer, { context: grid.getPcfContext(), parameters: {
+                        ControlName: 'GridColumnHeader',
+                        Bindings: {
+                            Column: {
+                                isStatic: true,
+                                value: column,
+                                type: 'Object',
+                            },
+                            Dataset: {
+                                value: grid.getDataset(),
+                                isStatic: true,
+                                type: 'Object',
+                            },
+                            EnableEditing: {
+                                isStatic: true,
+                                value: grid.isEditingEnabled(),
+                                type: 'TwoOptions'
+                            },
+                            Filtering: {
+                                isStatic: true,
+                                value: grid.getFiltering(),
+                                type: 'Object'
+                            }
+                        }
+                    } }) }), columnHeaderContextualMenuProps &&
+                jsx(ColumnHeaderContextualMenu, { target: buttonRef, calloutProps: {
+                        preventDismissOnEvent: preventDismissOnEvent
+                    }, ...columnHeaderContextualMenuProps }), filterCalloutProps &&
+                jsx(FilterCallout, { preventDismissOnEvent: preventDismissOnEvent, target: buttonRef, ...filterCalloutProps })] }));
+};
+
+export { ColumnHeader };
+//# sourceMappingURL=ColumnHeader.js.map

package/dist/components/Grid/column-headers/column-header/ColumnHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnHeader.js","sources":["../../../../../src/components/Grid/column-headers/column-header/ColumnHeader.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { CommandBarButton, Icon, Label, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { useGridInstance } from '../../grid/useGridInstance';\nimport { IGridColumn } from '../../grid/GridModel';\nimport { ColumnHeaderContextualMenu, IColumnHeaderContextualMenuProps } from './ColumnHeaderContextualMenu';\nimport { FilterCallout } from './FilterCallout';\nimport { NestedControlRenderer } from '../../../NestedControlRenderer';\nimport { useRerender } from '@talxis/react-components';\nimport { useAgGridInstance } from '../../grid/ag-grid/useAgGridInstance';\nimport { useEventEmitter } from '../../../../hooks/useEventEmitter';\nimport { IAgGridModelEvents } from '../../grid/ag-grid/AgGridModel';\n\nexport interface IColumnHeader {\n    baseColumn: IGridColumn;\n}\n\nexport const ColumnHeader = (props: IColumnHeader) => {\n    const grid = useGridInstance();\n    const agGrid = useAgGridInstance();\n    const column = grid.getGridColumnByName(props.baseColumn.name, true);\n    const [columnHeaderContextualMenuProps, setColumnHeaderContextualMenuProps] = useState<IColumnHeaderContextualMenuProps | null>(null);\n    const [filterCalloutProps, setFilterCalloutProps] = useState<any | null>(null);\n    const buttonRef = useRef<HTMLDivElement>(null);\n    const rerender = useRerender();\n    useEventEmitter<IAgGridModelEvents>(agGrid, 'onRefresh', rerender);\n\n    //needs to be called with onTouchEnd as well since ag grid cancels the click event on them\n    const onClick = () => {\n        if ((!column.isFilterable && column.disableSorting && !column.canBeAggregated && !column?.metadata?.CanBeGrouped)) {\n            return;\n        }\n        setColumnHeaderContextualMenuProps({\n            column: column,\n            onDismiss: (e, dismissAll, showFilterCallout) => {\n                setColumnHeaderContextualMenuProps(null);\n                if (!showFilterCallout) {\n                    return;\n                }\n                setFilterCalloutProps({\n                    column: column,\n                    onDismiss: () => {\n                        setFilterCalloutProps(null)\n                    }\n                })\n            }\n        });\n    }\n    const preventDismissOnEvent = (e: Event | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element> | React.FocusEvent<Element, Element>) => {\n        if (e.type !== 'scroll') {\n            return false;\n        }\n        const target = e.target as HTMLElement;\n        //check for vertical scroll\n        if (target?.classList?.contains('ag-body-viewport') || target?.classList?.contains('ag-body-vertical-scroll-viewport')) {\n            return true;\n        }\n        //ios outputs horizontal scroll if focused in callout btn which would result in dismiss of callout\n        if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {\n            return true;\n        }\n        return false;\n    }\n    return (\n        <>\n            <div ref={buttonRef} onClick={onClick} onTouchEnd={onClick}>\n                <NestedControlRenderer\n                    context={grid.getPcfContext()}\n                    parameters={{\n                        ControlName: 'GridColumnHeader',\n                        Bindings: {\n                            Column: {\n                                isStatic: true,\n                                value: column,\n                                type: 'Object',\n                            },\n                            Dataset: {\n                                value: grid.getDataset(),\n                                isStatic: true,\n                                type: 'Object',\n                            },\n                            EnableEditing: {\n                                isStatic: true,\n                                value: grid.isEditingEnabled(),\n                                type: 'TwoOptions'\n                            },\n                            Filtering: {\n                                isStatic: true,\n                                value: grid.getFiltering(),\n                                type: 'Object'\n                            }\n                        }\n                    }}\n                />\n            </div>\n            {columnHeaderContextualMenuProps &&\n                <ColumnHeaderContextualMenu\n                    target={buttonRef}\n                    calloutProps={{\n                        preventDismissOnEvent: preventDismissOnEvent\n                    }}\n                    {...columnHeaderContextualMenuProps} />\n            }\n            {filterCalloutProps &&\n                <FilterCallout preventDismissOnEvent={preventDismissOnEvent} target={buttonRef} {...filterCalloutProps} />\n            }\n        </>\n    )\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/components/Grid/{sorting/components/SortingContextualMenu/SortingContextualMenu.d.ts → column-headers/column-header/ColumnHeaderContextualMenu.d.ts}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { IContextualMenuProps } from '@fluentui/react';
-import { IGridColumn } from '../../../core/interfaces/IGridColumn';
-export interface ISortingContextualMenu extends Omit<IContextualMenuProps, 'items'> {
+import { IGridColumn } from '../../grid/GridModel';
+export interface IColumnHeaderContextualMenuProps extends Omit<IContextualMenuProps, 'items'> {
     column: IGridColumn;
     onDismiss: (e?: Event | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, dismissAll?: boolean, showFilterCallout?: boolean) => void;
 }
-export declare const SortingContextualMenu: (props: ISortingContextualMenu) => JSX.Element;
+export declare const ColumnHeaderContextualMenu: (props: IColumnHeaderContextualMenuProps) => JSX.Element;

package/dist/components/Grid/column-headers/column-header/ColumnHeaderContextualMenu.js

@@ -0,0 +1,115 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTheme, ContextualMenu, ContextualMenuItemType } from '@fluentui/react';
+import { ArrowSortUp24Regular, ArrowSortDown24Regular, Filter24Regular, AppsList24Regular, GroupList24Regular, Autosum24Regular, Dismiss24Regular, FilterDismiss24Regular } from '@fluentui/react-icons';
+import { getColumnHeaderContextualMenuStyles } from './styles.js';
+import { useGridInstance } from '../../grid/useGridInstance.js';
+
+const ColumnHeaderContextualMenu = (props) => {
+    const grid = useGridInstance();
+    const dataset = grid.getDataset();
+    const labels = grid.getLabels();
+    const styles = getColumnHeaderContextualMenuStyles(useTheme());
+    const { onDismiss } = { ...props };
+    const column = grid.getGridColumnByName(props.column.name, true);
+    const aggregationFunctionList = column.metadata?.SupportedAggregations ?? [];
+    const getItems = () => {
+        const items = [
+            {
+                key: 'sort_asc',
+                checked: column.isSorted && !column.isSortedDescending,
+                disabled: column.disableSorting,
+                text: grid.getColumnSortingLabel(column.name, false),
+                className: styles.item,
+                onRenderIcon: () => jsx(ArrowSortUp24Regular, {}),
+                onClick: () => grid.sortColumn(column.name, false)
+            },
+            {
+                key: 'sort_desc',
+                checked: column.isSorted && column.isSortedDescending,
+                disabled: column.disableSorting,
+                text: grid.getColumnSortingLabel(column.name, true),
+                className: styles.item,
+                onRenderIcon: () => jsx(ArrowSortDown24Regular, {}),
+                iconProps: {},
+                onClick: () => grid.sortColumn(column.name, true)
+            },
+            {
+                key: 'divider',
+                itemType: ContextualMenuItemType.Divider
+            },
+            {
+                key: 'filter',
+                className: styles.item,
+                disabled: !column.isFilterable,
+                text: labels['filtermenu-filterby'](),
+                onRenderIcon: () => jsx(Filter24Regular, {}),
+                onClick: (e) => onDismiss(e, false, true)
+            },
+            ...(column.canBeGrouped ? [
+                {
+                    key: 'divider-grouping',
+                    itemType: ContextualMenuItemType.Divider
+                }, {
+                    key: 'group',
+                    text: column.grouping?.isGrouped ? labels['filtersortmenu-ungroup']() : labels['filtersortmenu-group'](),
+                    onRenderIcon: () => column.grouping?.isGrouped ? jsx(AppsList24Regular, {}) : jsx(GroupList24Regular, {}),
+                    onClick: () => grid.toggleColumnGroup(column.name)
+                }
+            ] : []),
+            ...(column.canBeAggregated && aggregationFunctionList.length > 0 ? [
+                {
+                    key: 'divider-aggregation',
+                    itemType: ContextualMenuItemType.Divider
+                },
+                {
+                    key: 'total',
+                    text: labels['filtersortmenu-total'](),
+                    onRenderIcon: () => jsx(Autosum24Regular, {}),
+                    subMenuProps: {
+                        items: [
+                            ...!column.grouping?.isGrouped ? [
+                                {
+                                    key: 'none',
+                                    className: styles.item,
+                                    checked: !column.aggregation,
+                                    text: labels['filtersortmenu-total-none'](),
+                                    onClick: () => grid.removeAggregation(column.aggregation?.alias)
+                                }
+                            ] : [],
+                            ...aggregationFunctionList.map(aggregationFunction => {
+                                return {
+                                    key: aggregationFunction,
+                                    className: styles.item,
+                                    checked: column.aggregation?.aggregationFunction === aggregationFunction,
+                                    text: labels[`filtersortmenu-total-${aggregationFunction}`](),
+                                    onClick: () => grid.addAggregation(column.name, aggregationFunction)
+                                };
+                            })
+                        ]
+                    }
+                }
+            ] : []),
+            {
+                key: 'divider-footer',
+                itemType: ContextualMenuItemType.Divider
+            },
+            ...(dataset.sorting.find(x => x.name === column.name) ? [{
+                    key: 'clear',
+                    text: labels['filtersortmenu-clearsorting'](),
+                    onRenderIcon: () => jsx(Dismiss24Regular, {}),
+                    onClick: () => grid.clearColumnSorting(column.name)
+                }] : []),
+            ...(column.isFiltered ? [{
+                    key: 'clearFilter',
+                    text: labels['filtersortmenu-clearfilter'](),
+                    onRenderIcon: () => jsx(FilterDismiss24Regular, {}),
+                    onClick: () => grid.removeColumnFilter(column.name, true)
+                }] : []),
+        ];
+        return items;
+    };
+    return jsx(ContextualMenu, { ...props, items: getItems() });
+};
+
+export { ColumnHeaderContextualMenu };
+//# sourceMappingURL=ColumnHeaderContextualMenu.js.map