@talxis/base-controls 1.2508.2 → 1.2509.1-alpha.1

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

@@ -1,5 +1,5 @@
 import { mergeStyleSets } from '@fluentui/react';
-import { getJustifyContent } from '../styles.js';
+import { getJustifyContent } from '../../../grid/styles.js';
 
 const getNotificationStyles = (isActionColumn, columnAlignment) => {
     return mergeStyleSets({

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Grid/cells/cell/notifications/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { IColumn } from \"@talxis/client-libraries\"\nimport { getJustifyContent } from \"../../../grid/styles\"\n\nexport const getNotificationStyles = (isActionColumn: boolean, columnAlignment: Required<IColumn['alignment']>) => {\n    return mergeStyleSets({\n        callout: {\n            width: 320,\n            padding: '20px 24px',\n        },\n        calloutContent: {\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 20,\n            '.ms-CommandBar-primaryCommand': {\n                gap: 10\n            }\n        },\n        calloutTitle: {\n            overflow: 'hidden',\n            textOverflow: 'ellipsis'\n        },\n        calloutLink: {\n            'i': {\n                position: 'relative',\n                top: 1,\n                marginRight: 3\n            }\n        },\n        calloutButtons: {\n            display: 'flex',\n            justifyContent: 'flex-end',\n            gap: 8\n        },\n        notificationsRoot: {\n            minWidth: isActionColumn ? 0 : undefined,\n            flex: isActionColumn ? 1 : undefined,\n        },\n        notificationsPrimarySet: {\n            order: 2,\n            justifyContent: isActionColumn ? getJustifyContent(columnAlignment) : undefined\n        }\n    })\n}"],"names":[],"mappings":";;;MAIa,qBAAqB,GAAG,CAAC,cAAuB,EAAE,eAA+C,KAAI;AAC9G,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,OAAO,EAAE;AACL,YAAA,KAAK,EAAE,GAAG;AACV,YAAA,OAAO,EAAE,WAAW;AACvB,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,+BAA+B,EAAE;AAC7B,gBAAA,GAAG,EAAE,EAAE;AACV,aAAA;AACJ,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AAC3B,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,GAAG,EAAE;AACD,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,GAAG,EAAE,CAAC;AACN,gBAAA,WAAW,EAAE,CAAC;AACjB,aAAA;AACJ,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,UAAU;AAC1B,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,iBAAiB,EAAE;YACf,QAAQ,EAAE,cAAc,GAAG,CAAC,GAAG,SAAS;YACxC,IAAI,EAAE,cAAc,GAAG,CAAC,GAAG,SAAS;AACvC,SAAA;AACD,QAAA,uBAAuB,EAAE;AACrB,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,cAAc,EAAE,cAAc,GAAG,iBAAiB,CAAC,eAAe,CAAC,GAAG,SAAS;AAClF,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

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

@@ -1,7 +1,20 @@
 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<{
+    autoSaveBtnRoot: {
+        width: string;
+        height: string;
+    };
+    autoSaveBtnSuccess: {
+        color: string;
+    };
+    autoSafeBtnError: {
+        color: string;
+    };
+    autoSafeBtnTooltipRoot: {
+        width: string;
+        height: string;
+    };
     cellRoot: {
         height: string;
         width: string;
@@ -12,8 +25,16 @@ export declare const getCellStyles: () => import("@fluentui/react").IProcessedSt
     checkbox: {
         marginRight: number;
     };
+    checkBoxContainer: {
+        width: string;
+        height: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        cursor: string;
+    };
 }>;
-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 +44,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/cells/cell/styles.js

@@ -0,0 +1,78 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getCellStyles = (theme) => {
+    return mergeStyleSets({
+        autoSaveBtnRoot: {
+            width: '100%',
+            height: '100%',
+        },
+        autoSaveBtnSuccess: {
+            color: theme.semanticColors.successIcon,
+        },
+        autoSafeBtnError: {
+            color: theme.semanticColors.errorIcon,
+        },
+        autoSafeBtnTooltipRoot: {
+            width: '100%',
+            height: '100%'
+        },
+        cellRoot: {
+            height: '100% !important',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        checkbox: {
+            marginRight: 0.5
+        },
+        checkBoxContainer: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: 'pointer'
+        }
+    });
+};
+const getInnerCellStyles = (isEditing, theme, columnAlignment, isExpanded) => {
+    return mergeStyleSets({
+        innerCellRoot: {
+            flex: 1,
+            display: 'flex',
+            overflow: 'hidden',
+            alignItems: 'center',
+            height: '100%',
+            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
+        },
+        shimmerRoot: {
+            width: '100%',
+            paddingLeft: 10,
+            paddingRight: 10
+        },
+        errorIconRoot: {
+            color: `${theme.semanticColors.errorIcon} !important`
+        },
+        uneditableIconRoot: {
+            color: `${theme.semanticColors.bodyText} !important`
+        }
+    });
+};
+
+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        autoSaveBtnRoot: {\n            width: '100%',\n            height: '100%',\n        },\n        autoSaveBtnSuccess: {\n            color: theme.semanticColors.successIcon,\n        },\n        autoSafeBtnError: {\n            color: theme.semanticColors.errorIcon,\n        },\n        autoSafeBtnTooltipRoot: {\n            width: '100%',\n            height: '100%'\n        },\n        cellRoot: {\n            height: '100% !important',\n            width: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center'\n        },\n        checkbox: {\n            marginRight: 0.5\n        },\n        checkBoxContainer: {\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            cursor: 'pointer'\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,eAAe,EAAE;AACb,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACjB,SAAA;AACD,QAAA,kBAAkB,EAAE;AAChB,YAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;AAC1C,SAAA;AACD,QAAA,gBAAgB,EAAE;AACd,YAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;AACxC,SAAA;AACD,QAAA,sBAAsB,EAAE;AACpB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACjB,SAAA;AACD,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;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,GAAG;AACnB,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;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/{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,82 @@
+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);
+    const [columnHeaderContextualMenuProps, setColumnHeaderContextualMenuProps] = useState(null);
+    const [filterCalloutProps, setFilterCalloutProps] = useState(null);
+    const buttonRef = useRef(null);
+    const rerender = useRerender();
+    useEventEmitter(agGrid, 'onRefresh', rerender);
+    const onClick = () => {
+        if ((!column.isFilterable && column.disableSorting && !column.canBeAggregated)) {
+            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, 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'
+                            }
+                        }
+                    } }) }), 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);\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    const onClick = () => {\n        if ((!column.isFilterable && column.disableSorting && !column.canBeAggregated)) {\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}>\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                    }\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","_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 { DataTypes } from '@talxis/client-libraries';
+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 { column, onDismiss } = { ...props };
+    const aggregationFunctionList = column.metadata.SupportedAggregations;
+    const getItems = () => {
+        const items = [
+            {
+                key: 'sort_asc',
+                checked: column.isSorted && !column.isSortedDescending,
+                disabled: column.disableSorting || column.dataType === DataTypes.MultiSelectOptionSet,
+                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 || column.dataType === DataTypes.MultiSelectOptionSet,
+                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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnHeaderContextualMenu.js","sources":["../../../../../src/components/Grid/column-headers/column-header/ColumnHeaderContextualMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { ContextualMenu, ContextualMenuItemType, IContextualMenuItem, IContextualMenuProps, useTheme } from '@fluentui/react';\nimport { Filter24Regular, ArrowSortUp24Regular, ArrowSortDown24Regular, FilterDismiss24Regular, Dismiss24Regular, Autosum24Regular, GroupList24Regular, AppsList24Regular } from '@fluentui/react-icons';\nimport { getColumnHeaderContextualMenuStyles } from './styles';\nimport { DataTypes } from '@talxis/client-libraries';\nimport { useGridInstance } from '../../grid/useGridInstance';\nimport { IGridColumn } from '../../grid/GridModel';\n\nexport interface IColumnHeaderContextualMenuProps extends Omit<IContextualMenuProps, 'items'> {\n    column: IGridColumn;\n    onDismiss: (e?: Event | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, dismissAll?: boolean, showFilterCallout?: boolean) => void;\n}\n\nexport const ColumnHeaderContextualMenu = (props: IColumnHeaderContextualMenuProps) => {\n    const grid = useGridInstance();\n    const dataset = grid.getDataset();\n    const labels = grid.getLabels();\n    const styles = getColumnHeaderContextualMenuStyles(useTheme());\n    const { column, onDismiss } = { ...props };\n    const aggregationFunctionList = column.metadata!.SupportedAggregations!\n\n    const getItems = (): IContextualMenuItem[] => {\n        const items: IContextualMenuItem[] = [\n            {\n                key: 'sort_asc',\n                checked: column.isSorted && !column.isSortedDescending,\n                disabled: column.disableSorting || column.dataType === DataTypes.MultiSelectOptionSet,\n                text: grid.getColumnSortingLabel(column.name, false),\n                className: styles.item,\n                onRenderIcon: () => <ArrowSortUp24Regular />,\n                onClick: () => grid.sortColumn(column.name, false)\n            },\n            {\n                key: 'sort_desc',\n                checked: column.isSorted && column.isSortedDescending,\n                disabled: column.disableSorting || column.dataType === DataTypes.MultiSelectOptionSet,\n                text: grid.getColumnSortingLabel(column.name, true),\n                className: styles.item,\n                onRenderIcon: () => <ArrowSortDown24Regular />,\n                iconProps: {},\n                onClick: () => grid.sortColumn(column.name, true)\n            },\n            {\n                key: 'divider',\n                itemType: ContextualMenuItemType.Divider\n            },\n            {\n                key: 'filter',\n                className: styles.item,\n                disabled: !column.isFilterable,\n                text: labels['filtermenu-filterby'](),\n                onRenderIcon: () => <Filter24Regular />,\n                onClick: (e) => onDismiss(e, false, true)\n            },\n            ...(column.canBeGrouped ? [\n                {\n                    key: 'divider-grouping',\n                    itemType: ContextualMenuItemType.Divider\n                }, {\n                    key: 'group',\n                    text: column.grouping?.isGrouped ? labels['filtersortmenu-ungroup']() : labels['filtersortmenu-group'](),\n                    onRenderIcon: () => column.grouping?.isGrouped ? <AppsList24Regular /> : <GroupList24Regular />,\n                    onClick: () => grid.toggleColumnGroup(column.name)\n                }\n            ] : []),\n            ...(column.canBeAggregated && aggregationFunctionList.length > 0 ? [\n                {\n                    key: 'divider-aggregation',\n                    itemType: ContextualMenuItemType.Divider\n                },\n                {\n                    key: 'total',\n                    text: labels['filtersortmenu-total'](),\n                    onRenderIcon: () => <Autosum24Regular />,\n                    subMenuProps: {\n                        items: [\n                            ...!column.grouping?.isGrouped ? [\n                                {\n                                    key: 'none',\n                                    className: styles.item,\n                                    checked: !column.aggregation,\n                                    text: labels['filtersortmenu-total-none'](),\n                                    onClick: () => grid.removeAggregation(column.aggregation?.alias!)\n\n                                }\n                            ] : [],\n                            ...aggregationFunctionList.map(aggregationFunction => {\n                                return {\n                                    key: aggregationFunction,\n                                    className: styles.item,\n                                    checked: column.aggregation?.aggregationFunction === aggregationFunction,\n                                    text: labels[`filtersortmenu-total-${aggregationFunction}`](),\n                                    onClick: () => grid.addAggregation(column.name, aggregationFunction)\n                                }\n                            })]\n                    }\n                }\n            ] : []),\n            {\n                key: 'divider-footer',\n                itemType: ContextualMenuItemType.Divider\n            },\n            ...(dataset.sorting.find(x => x.name === column.name) ? [{\n                key: 'clear',\n                text: labels['filtersortmenu-clearsorting'](),\n                onRenderIcon: () => <Dismiss24Regular />,\n                onClick: () => grid.clearColumnSorting(column.name)\n            }] : []),\n            ...(column.isFiltered ? [{\n                key: 'clearFilter',\n                text: labels['filtersortmenu-clearfilter'](),\n                onRenderIcon: () => <FilterDismiss24Regular />,\n                onClick: () => grid.removeColumnFilter(column.name, true)\n            }] : []),\n\n        ];\n        return items\n    }\n    return <ContextualMenu {...props} items={getItems()} />;\n};"],"names":["_jsx"],"mappings":"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"}

package/dist/components/Grid/{filtering/components/FilterCallout → column-headers/column-header}/FilterCallout.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ICalloutProps } from '@fluentui/react';
-import { IGridColumn } from '../../../core/interfaces/IGridColumn';
+import { IGridColumn } from '../../grid/GridModel';
 export interface IFilterCallout extends ICalloutProps {
     column: IGridColumn;
     onDismiss: () => void;

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

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Callout, Text, IconButton } from '@fluentui/react';
+import { DatasetColumnFiltering } from '../../../DatasetControl/Filtering/DatasetColumnFiltering.js';
+import { getClassNames } from '@talxis/react-components';
+import { useEffect } from 'react';
+import { useGridInstance } from '../../grid/useGridInstance.js';
+import { filterCalloutStyles } from './styles.js';
+
+const FilterCallout = (props) => {
+    const { column, onDismiss } = { ...props };
+    const grid = useGridInstance();
+    const dataset = grid.getDataset();
+    const context = grid.getPcfContext();
+    const labels = grid.getLabels();
+    const onColumnFilterSaved = (filter) => {
+        dataset.getDataProvider().executeWithUnsavedChangesBlocker(() => {
+            onDismiss();
+            dataset.filtering.setFilter(filter);
+            dataset.refresh();
+        });
+    };
+    const onRenderConditionValueControl = (props, defaultRender) => {
+        switch (column.dataType) {
+            case 'Lookup.Customer':
+            case 'Lookup.Owner':
+            case 'Lookup.Regarding':
+            case 'Lookup.Simple': {
+                return defaultRender({
+                    ...props,
+                    onOverrideComponentProps: (props) => {
+                        return {
+                            ...props,
+                            onOverrideControlProps: (props) => {
+                                return {
+                                    ...props,
+                                    parameters: {
+                                        ...props.parameters,
+                                        value: {
+                                            ...props.parameters.value,
+                                            //@ts-ignore
+                                            getAllViews: (() => {
+                                                const originalGetAllViews = props.parameters.value.getAllViews;
+                                                //@ts-ignore
+                                                return (...args) => originalGetAllViews(...args, 1);
+                                            })()
+                                        }
+                                    }
+                                };
+                            }
+                        };
+                    }
+                });
+            }
+            default: {
+                return defaultRender(props);
+            }
+        }
+    };
+    useEffect(() => {
+        return () => {
+            if (!column.isFiltered) {
+                grid.removeColumnFilter(column.name);
+            }
+        };
+    }, []);
+    return (jsxs(Callout, { ...props, calloutWidth: 230, className: filterCalloutStyles.root, children: [jsxs("div", { className: filterCalloutStyles.header, children: [jsx(Text, { className: filterCalloutStyles.title, variant: "mediumPlus", children: labels['filtermenu-filterby']() }), jsx(IconButton, { onClick: () => onDismiss(), iconProps: {
+                            iconName: 'ChromeClose',
+                        } })] }), jsx(DatasetColumnFiltering, { parameters: {
+                    ColumnName: {
+                        raw: column.name,
+                    },
+                    Filtering: grid.getFiltering()
+                }, onNotifyOutputChanged: (outputs) => onColumnFilterSaved(outputs), onOverrideComponentProps: (props) => {
+                    return {
+                        ...props,
+                        onRender: (props, defaultRender) => {
+                            return defaultRender({
+                                ...props,
+                                container: {
+                                    ...props.container,
+                                    className: getClassNames([props.container.className, filterCalloutStyles.datasetColumnFilteringRoot]),
+                                },
+                                valueControlsContainer: {
+                                    ...props.valueControlsContainer,
+                                    className: getClassNames([props.valueControlsContainer.className, filterCalloutStyles.valueControlsContainer]),
+                                },
+                                onRenderConditionValueControl: onRenderConditionValueControl,
+                                onRenderButtons: (props, defaultRender) => {
+                                    return defaultRender({
+                                        ...props,
+                                        container: {
+                                            className: getClassNames([props.container.className, filterCalloutStyles.datasetColumnFilteringButtons])
+                                        }
+                                    });
+                                }
+                            });
+                        }
+                    };
+                }, context: context })] }));
+};
+
+export { FilterCallout };
+//# sourceMappingURL=FilterCallout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterCallout.js","sources":["../../../../../src/components/Grid/column-headers/column-header/FilterCallout.tsx"],"sourcesContent":["import { Callout, IconButton, ICalloutProps } from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { DatasetColumnFiltering } from '../../../DatasetControl/Filtering/DatasetColumnFiltering';\nimport { getClassNames } from '@talxis/react-components';\nimport { useEffect } from 'react';\nimport { IGridColumn } from '../../grid/GridModel';\nimport { useGridInstance } from '../../grid/useGridInstance';\nimport { filterCalloutStyles } from './styles';\nimport { ILookup } from '../../../Lookup';\nimport { INestedControlRenderer } from '../../../NestedControlRenderer/interfaces';\n\nexport interface IFilterCallout extends ICalloutProps {\n    column: IGridColumn;\n    onDismiss: () => void;\n}\n\nexport const FilterCallout = (props: IFilterCallout) => {\n    const { column, onDismiss } = { ...props };\n    const grid = useGridInstance();\n    const dataset = grid.getDataset();\n    const context = grid.getPcfContext();\n    const labels = grid.getLabels();\n\n    const onColumnFilterSaved = (filter: ComponentFramework.PropertyHelper.DataSetApi.FilterExpression) => {\n        dataset.getDataProvider().executeWithUnsavedChangesBlocker(() => {\n            onDismiss();\n            dataset.filtering.setFilter(filter);\n            dataset.refresh();\n        })\n    }\n\n    const onRenderConditionValueControl = (props: INestedControlRenderer, defaultRender: (props: INestedControlRenderer) => React.ReactElement) => {\n        switch (column.dataType) {\n            case 'Lookup.Customer':\n            case 'Lookup.Owner':\n            case 'Lookup.Regarding':\n            case 'Lookup.Simple': {\n                return defaultRender({\n                    ...props,\n                    onOverrideComponentProps: (props) => {\n                        return {\n                            ...props,\n                            onOverrideControlProps: (props: ILookup): ILookup => {\n                                return {\n                                    ...props,\n                                    parameters: {\n                                        ...props.parameters,\n                                        value: {\n                                            ...props.parameters.value,\n                                            //@ts-ignore\n                                            getAllViews: (() => {\n                                                const originalGetAllViews = props.parameters.value.getAllViews;\n                                                //@ts-ignore\n                                                return (...args) => originalGetAllViews(...args, 1);\n                                            })()\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n                })\n            }\n            default: {\n                return defaultRender(props);\n            }\n        }\n    }\n\n    useEffect(() => {\n        return () => {\n            if (!column.isFiltered) {\n                grid.removeColumnFilter(column.name)\n            }\n        }\n    }, []);\n\n    return (\n        <Callout\n            {...props}\n            calloutWidth={230}\n            className={filterCalloutStyles.root}>\n            <div className={filterCalloutStyles.header}>\n                <Text className={filterCalloutStyles.title} variant=\"mediumPlus\">{labels['filtermenu-filterby']()}</Text>\n                <IconButton onClick={() => onDismiss()} iconProps={{\n                    iconName: 'ChromeClose',\n                }} />\n            </div>\n            <DatasetColumnFiltering\n                parameters={{\n                    ColumnName: {\n                        raw: column.name,\n                    },\n                    Filtering: grid.getFiltering()\n                }}\n                onNotifyOutputChanged={(outputs) => onColumnFilterSaved(outputs)}\n                onOverrideComponentProps={(props) => {\n                    return {\n                        ...props,\n                        onRender: (props, defaultRender) => {\n                            return defaultRender({\n                                ...props,\n                                container: {\n                                    ...props.container,\n                                    className: getClassNames([props.container.className, filterCalloutStyles.datasetColumnFilteringRoot]),\n                                },\n                                valueControlsContainer: {\n                                    ...props.valueControlsContainer,\n                                    className: getClassNames([props.valueControlsContainer.className, filterCalloutStyles.valueControlsContainer]),\n                                },\n                                onRenderConditionValueControl: onRenderConditionValueControl,\n                                onRenderButtons: (props, defaultRender) => {\n                                    return defaultRender({\n                                        ...props,\n                                        container: {\n                                            className: getClassNames([props.container.className, filterCalloutStyles.datasetColumnFilteringButtons])\n                                        }\n                                    })\n                                }\n                            })\n                        }\n                    }\n                }}\n                context={context} />\n        </Callout>\n    );\n};"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/Grid/column-headers/column-header/styles.d.ts

@@ -0,0 +1,84 @@
+import { ITheme } from "@fluentui/react";
+import { IColumn } from "@talxis/client-libraries";
+export declare const getColumnHeaderStyles: (theme: ITheme, columnAlignment: Required<IColumn['alignment']>) => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        width: string;
+        textAlign: string;
+        height: number;
+        paddingLeft: number;
+        paddingRight: number;
+        justifyContent: string;
+        '.ms-Button-flexContainer': {
+            justifyContent: string;
+            width: string;
+            gap: number;
+            pointerEvents: string;
+        };
+    };
+    labelWrapper: {
+        flex: number;
+        display: string;
+        minWidth: number;
+        justifyContent: string | undefined;
+    };
+    label: {
+        overflow: string;
+        textOverflow: string;
+        cursor: string;
+    };
+    requiredSymbol: {
+        color: string;
+        position: string;
+        top: number;
+        left: number;
+    };
+    filterSortIcons: {
+        display: string;
+        gap: number;
+    };
+    editIcon: {
+        marginRight: number;
+    };
+}>;
+export declare const getColumnHeaderContextualMenuStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+    item: {
+        '& .is-checked': {
+            backgroundColor: string;
+            fontWeight: number;
+        };
+    };
+}>;
+export declare const filterCalloutStyles: import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        minHeight: number;
+        padding: number;
+        '.ms-Callout-main': {
+            display: string;
+            flexDirection: string;
+            minHeight: number;
+            gap: number;
+        };
+        '.TALXIS__combobox__root, [class*="TALXIS__textfield__root"], [class*="TALXIS__tag-picker__root"]': {
+            padding: string;
+        };
+    };
+    title: {
+        fontWeight: number;
+        flexGrow: number;
+    };
+    header: {
+        display: string;
+        i: {
+            fontSize: number;
+        };
+    };
+    valueControlsContainer: {
+        flexGrow: number;
+    };
+    datasetColumnFilteringRoot: {
+        flexGrow: number;
+    };
+    datasetColumnFilteringButtons: {
+        justifyContent: string;
+    };
+}>;