var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { lazy, Suspense, useState, useMemo, useCallback } from 'react';
import { makeStyles, Slide, Typography, Collapse, Divider, LinearProgress, lighten, } from '@material-ui/core';
import { StandardTitle } from '../../dataDisplay/typography/StandardTitle';
import { FluentIconButton } from '../../inputs/buttons/FluentIconButton';
import { SearchIcon, ChevronRightIcon, MaximumValueIcon, ChevronFold10Icon, ChevronUnfold10Icon, GroupListIcon, FilterIcon, MoreVerticalIcon, SaveIcon, DeleteIcon, ClearIcon, } from '@fluentui/react-icons';
import { ToolBarButton } from '../../inputs/buttons/ToolBarButton';
import { PrimaryActionButton } from '../../inputs/buttons/PrimaryActionButton';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import ArrowBackIcon from '@material-ui/icons/esm/ArrowBack';
import { PAHExport } from './ui/PAHExport';
import { StatusChip } from '../../dataDisplay/status/StatusChip';
import { useShellStore } from '../../../stores/shellStore';
// Lazy-load UdpTablist — it's a stencil web-component wrapper that drags in
// ~574 KB udp-fluent-icon + ~12 KB udp-fluent-tablist + Fluent web-components
// runtime. Most uses of PrimaryActionHeader don't render fluent tabs.
const UdpTablist = lazy(() => import('../../fluent-web-components/UdpTablist').then((m) => ({ default: m.UdpTablist })));
import { useAllTeleporters } from './ui/teleporter';
/** Matches legacy UdpTabs `{ id: index, ...tab }` id used in onChange. */
function legacyTabSelectionId(tab, index) {
    return (tab === null || tab === void 0 ? void 0 : tab.id) !== undefined && (tab === null || tab === void 0 ? void 0 : tab.id) !== null ? tab.id : index;
}
function normalizeTabsForFluentTablist(tabList) {
    if (!Array.isArray(tabList) || tabList.length === 0) {
        return [];
    }
    return tabList.map((tab, index) => {
        var _a;
        return (Object.assign(Object.assign({}, tab), { id: String(legacyTabSelectionId(tab, index)), label: (_a = tab === null || tab === void 0 ? void 0 : tab.label) !== null && _a !== void 0 ? _a : '' }));
    });
}
function resolveFluentActiveId(tabList, value, normalizedTabs) {
    if (!normalizedTabs.length) {
        return '';
    }
    if (value === false || value === undefined || value === null) {
        return normalizedTabs[0].id;
    }
    const matchIndex = tabList.findIndex((t, i) => legacyTabSelectionId(t, i) === value);
    if (matchIndex >= 0) {
        return normalizedTabs[matchIndex].id;
    }
    if (typeof value === 'number' &&
        Number.isInteger(value) &&
        value >= 0 &&
        value < normalizedTabs.length) {
        return normalizedTabs[value].id;
    }
    return String(value);
}
function tabVariantToFluentDefaults(tabVariant) {
    switch (tabVariant) {
        case 'block':
            return {
                appearance: 'contained',
                size: 'small',
                overflowStrategy: 'collapse',
            };
        case 'spread':
            return {
                appearance: 'transparent',
                size: 'medium',
                overflowStrategy: 'collapse',
            };
        default:
            return {
                appearance: 'transparent',
                size: 'small',
                overflowStrategy: 'collapse',
            };
    }
}
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        [theme.breakpoints.between('xs', 'sm')]: {
            height: 50,
        },
        minHeight: '48px',
    },
    title: {
        margin: theme.spacing(2),
    },
    titleWrapper: {
        paddingLeft: 12,
        paddingRight: (props) => (props.single ? theme.spacing(2) : 0),
        display: 'flex',
        alignItems: 'center',
    },
    subHeaderWrapper: {
        // display: 'flex',
        // justifyContent: 'flex-end',
        // marginTop: props => props.single && 6,
        width: '100%',
        minWidth: 0,
        marginTop: 0,
        [theme.breakpoints.down('xs')]: {
            justifyContent: 'flex-start',
        },
    },
    subHeader: {
        minWidth: (props) => props.subheader && 320,
        marginLeft: theme.spacing(2),
        [theme.breakpoints.between('sm', 'lg')]: {
            display: 'none',
        },
        [theme.breakpoints.down('xs')]: {
            display: 'none',
        },
    },
    denseSubtitle: {
        marginTop: theme.spacing(1.2),
        marginLeft: theme.spacing(2),
        // [theme.breakpoints.up('xl')]: {
        //   display: 'none'
        // },
        // [theme.breakpoints.down('xs')]: {
        //   display: 'none'
        // }
    },
    /** Trailing controls (search, secondaries, PAB): pinned right without a flex:1 spacer stealing tab width */
    actionRowTrail: {
        display: 'flex',
        alignItems: 'center',
        marginLeft: 'auto',
        flexShrink: 0,
    },
    actionRow: {
        display: 'flex',
        flex: 1,
        alignItems: 'center',
        minWidth: 0,
        width: '100%',
        // [theme.breakpoints.up('lg')]: {
        //   width: '100%',
        // },
        // paddingBottom: props => props.hidePAB && theme.spacing(2),
    },
    secondaryButtons: {
        display: 'flex',
        [theme.breakpoints.down('sm')]: {
            display: 'none',
        },
        alignItems: 'center',
    },
    secondaryButtonsMobile: {
        display: 'flex',
        padding: theme.spacing(1),
        background: theme.palette.divider,
        [theme.breakpoints.up('sm')]: {
            display: 'none',
        },
    },
    search: {
        marginRight: theme.spacing(2),
        marginTop: theme.spacing(3),
        flex: 1,
    },
    close: {
        marginRight: theme.spacing(2),
    },
    pab: {
        display: 'flex',
        alignItems: 'center',
    },
    titleOnly: {
        paddingBottom: theme.spacing(1),
    },
    advancedOptions: {
        backgroundColor: '#EEEEEE',
        width: '100%',
    },
    tabPageButtons: {
        height: 50,
        borderTop: `1px solid ${theme.palette.divider}`,
        paddingLeft: theme.spacing(2),
        backgroundColor: '#EEEEEE',
    },
    divider: {
        height: 25,
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(2),
    },
    functionIcons: {
        fontSize: 18,
        color: theme.palette.secondary.main,
    },
    tabRow: {
        flex: 1,
        minWidth: 0,
        minHeight: '48px',
        alignSelf: 'stretch',
        contain: 'inline-size',
    },
    fullTabs: {
        flex: 1,
        minWidth: 0,
        minHeight: '48px',
        alignSelf: 'stretch',
        contain: 'inline-size',
    },
    iconButton: {
        marginTop: 9,
        marginLeft: 4,
    },
    titleWrapperBack: {
        display: 'flex',
        flex: (props) => props.title && 1,
    },
    buttomButtonRow: {
        display: 'flex',
        width: '100%',
    },
    bottomButtonsLeft: {
        display: 'flex',
        flex: 1,
        // width: '100%',
        justifyContent: 'flex-start',
    },
    bottomButtonsRigth: {
        display: 'flex',
        justifyContent: 'flex-end',
    },
    single: {
        display: 'flex',
    },
    containerStyle: {
        background: lighten(theme.palette.secondary.light, 0.9),
        padding: theme.spacing(1),
        paddingLeft: theme.spacing(2),
        borderTop: `1px solid ${theme.palette.divider} `,
    },
    gridControlLineUp: {
        display: 'flex',
        alignItems: 'center',
        marginRight: theme.spacing(2),
    },
    additionalTitleComponent: {
        marginLeft: theme.spacing(2),
    },
}));
export const PrimaryActionHeader = (props) => {
    const classes = useStyles(props);
    const { buttonLabel, title, subheader, handleClick, secondaryButtons, hidePAB = false, search, searchField, expandOptions, handleMouseLeave, expandedContent, handleChange, value, tabList, tabs, resizeGrid, collapse, expandAllItems, groups, showGroups, grid, clickBack, topRowSecondary, bottomRowSecondary, bottomRowSecondaryRight, loading, openGroups, openFilter, altInputs, loadingVal, exportGrid, openSearch = false, styleSearch, stepper, pabDisabled, switcher, single, lowerTray, lowerTraySearch, lowerTrayGrid, upperTrayGrid, exportCSV, exportExcel, exportPDF, expand, expandGrid, collapseGrid, resize, gridApi, saveGridConfig, deleteGridConfig, clearGridConfig, hideActionRow = false, allowAdditionalTitleComponent = false, allowAdditionalRightComponent = true, StatusChipProps = null, tabProps = {}, tabVariant, additionalComponentId = '' } = props, otherProps = __rest(props, ["buttonLabel", "title", "subheader", "handleClick", "secondaryButtons", "hidePAB", "search", "searchField", "expandOptions", "handleMouseLeave", "expandedContent", "handleChange", "value", "tabList", "tabs", "resizeGrid", "collapse", "expandAllItems", "groups", "showGroups", "grid", "clickBack", "topRowSecondary", "bottomRowSecondary", "bottomRowSecondaryRight", "loading", "openGroups", "openFilter", "altInputs", "loadingVal", "exportGrid", "openSearch", "styleSearch", "stepper", "pabDisabled", "switcher", "single", "lowerTray", "lowerTraySearch", "lowerTrayGrid", "upperTrayGrid", "exportCSV", "exportExcel", "exportPDF", "expand", "expandGrid", "collapseGrid", "resize", "gridApi", "saveGridConfig", "deleteGridConfig", "clearGridConfig", "hideActionRow", "allowAdditionalTitleComponent", "allowAdditionalRightComponent", "StatusChipProps", "tabProps", "tabVariant", "additionalComponentId"]);
    const [searchExpanded, setSearchExpanded] = useState(openSearch);
    const currentContainerId = useShellStore((state) => state.currentContainerId);
    const allTeleporters = useAllTeleporters();
    const expandSearch = () => {
        setSearchExpanded(!searchExpanded);
    };
    const normalizedFluentTabs = useMemo(() => normalizeTabsForFluentTablist(tabList), [tabList]);
    const fluentActiveId = useMemo(() => resolveFluentActiveId(tabList, value, normalizedFluentTabs), [tabList, value, normalizedFluentTabs]);
    const fluentTablistDefaults = useMemo(() => tabVariantToFluentDefaults(tabVariant), [tabVariant]);
    const handleFluentTabChange = useCallback((e) => {
        if (!handleChange) {
            return;
        }
        const newFluentId = e.detail;
        const idx = normalizedFluentTabs.findIndex((t) => t.id === newFluentId);
        if (idx < 0) {
            return;
        }
        const legacySecondArg = legacyTabSelectionId(tabList[idx], idx);
        handleChange(e, legacySecondArg);
    }, [handleChange, normalizedFluentTabs, tabList]);
    const gridControlsExpand = [
        {
            label: '',
            aria: 'expand',
            component: ChevronUnfold10Icon,
            click: expandGrid,
            id: 1,
        },
    ];
    const gridControlsResize = [
        {
            label: '',
            aria: 'resize',
            component: MaximumValueIcon,
            click: resizeGrid,
            id: 2,
        },
    ];
    const gridControlsCollapse = [
        {
            label: '',
            aria: 'collapse',
            component: ChevronFold10Icon,
            click: collapseGrid,
            id: 3,
        },
    ];
    const gridControlsGroup = [
        {
            label: 'Group',
            component: GroupListIcon,
            click: openGroups,
            id: 4,
        },
    ];
    const gridControlsFilter = [
        {
            label: 'Filter',
            component: FilterIcon,
            click: openFilter,
            id: 5,
        },
    ];
    const gridControlsSave = [
        {
            label: 'Save Grid Configuration',
            component: SaveIcon,
            click: saveGridConfig,
            id: 6,
        },
    ];
    const gridControlsDelete = [
        {
            label: 'Delete Grid Configuration',
            component: DeleteIcon,
            click: deleteGridConfig,
            id: 7,
        },
    ];
    const gridControlsClear = [
        {
            label: 'Clear Grid Configuration',
            component: ClearIcon,
            click: clearGridConfig,
            id: 8,
        },
    ];
    const gridControlsExport = (React.createElement("div", null, React.createElement(PAHExport, { exportCSV: exportCSV || (() => gridApi === null || gridApi === void 0 ? void 0 : gridApi.exportDataAsCsv()), exportExcel: exportExcel || (() => gridApi === null || gridApi === void 0 ? void 0 : gridApi.exportDataAsExcel()), exportPDF: exportPDF })));
    const gridControlExpand = gridControlsExpand && (React.createElement("div", null, gridControlsExpand.map((item) => {
        return (React.createElement(ToolBarButton, { label: item.label, title: item.label, expanded: true, component: item.component, click: item.click, aria: item.aria, key: item.id }));
    })));
    const gridControlResize = gridControlsResize && (React.createElement("div", null, gridControlsResize.map((item) => {
        return (React.createElement(ToolBarButton, { label: item.label, title: item.label, expanded: true, component: item.component, click: item.click, aria: item.aria, key: item.id }));
    })));
    const gridControlCollapse = gridControlsCollapse && (React.createElement("div", null, gridControlsCollapse.map((item) => {
        return (React.createElement(ToolBarButton, { label: item.label, title: item.label, expanded: true, component: item.component, click: item.click, aria: item.aria, key: item.id }));
    })));
    const gridControlSave = gridControlsSave && (React.createElement("div", null, gridControlsSave.map((item) => {
        return (React.createElement(ToolBarButton, { label: item.label, title: item.label, expanded: true, component: item.component, click: item.click, aria: item.aria, key: item.id }));
    })));
    const gridControlDelete = gridControlsDelete && (React.createElement("div", null, gridControlsDelete.map((item) => {
        return (React.createElement(ToolBarButton, { label: item.label, title: item.label, expanded: true, component: item.component, click: item.click, aria: item.aria, key: item.id }));
    })));
    const gridControlClear = gridControlsClear && (React.createElement("div", null, gridControlsClear.map((item) => {
        return (React.createElement(ToolBarButton, { label: item.label, title: item.label, expanded: true, component: item.component, click: item.click, aria: item.aria, key: item.id }));
    })));
    const searchToggle = (React.createElement(React.Fragment, null, React.createElement("div", { style: { display: 'flex' } }, searchExpanded && (React.createElement(FluentIconButton, { click: expandSearch, "aria-label": "close search", className: classes.close, icon: ChevronRightIcon, onClick: expandSearch, size: "small" }))), React.createElement("div", { className: classes.search, style: { flex: 1 } }, React.createElement("div", null, searchExpanded && (React.createElement("div", null, React.createElement(Slide, { direction: "left", in: expandSearch, mountOnEnter: true, unmountOnExit: true }, React.createElement("div", { className: classes.searchWrapper }, searchField))))))));
    const LowerTrayShell = ({ children }) => {
        return React.createElement("div", { className: classes.containerStyle }, children);
    };
    const GridControlLineUp = () => {
        return (React.createElement("div", { className: classes.gridControlLineUp }, saveGridConfig && gridControlSave, deleteGridConfig && gridControlDelete, clearGridConfig && gridControlClear, expandGrid && gridControlExpand, resizeGrid && gridControlResize, collapseGrid && gridControlCollapse, exportGrid && gridControlsExport));
    };
    const additionalTitleTeleportedComponents = useMemo(() => {
        const components = [];
        allTeleporters.forEach(([targetId, location, teleporter]) => {
            const Target = teleporter.Target;
            if (targetId === additionalComponentId && location === 'title') {
                components.push(React.createElement("div", { key: targetId, className: "teleport-target" }, React.createElement(Target, null)));
            }
        });
        return components;
    }, [additionalComponentId, allTeleporters]);
    return (React.createElement("div", { key: currentContainerId }, React.createElement("div", { className: single && classes.single }, React.createElement("div", { className: classes.titleWrapperBack }, clickBack && (React.createElement("div", { className: classes.iconButton }, React.createElement(FluentIconButton, { icon: ArrowBackIcon, onClick: clickBack }))), title && (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.titleWrapper }, React.createElement(StandardTitle, { removeMarginTop: single }, title), single && subheader && (React.createElement(Typography, { className: classes.denseSubtitle, variant: "subtitle1", component: "h2" }, subheader)), allowAdditionalTitleComponent && (React.createElement("div", { className: classes.additionalTitleComponent }, additionalTitleTeleportedComponents.map((value) => {
        return value;
    })))))), !title && allowAdditionalTitleComponent && (React.createElement("div", { className: classes.additionalTitleComponent }, additionalTitleTeleportedComponents.map((value) => {
        return value;
    }))), StatusChipProps && (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.titleWrapper }, React.createElement(StatusChip, { label: StatusChipProps === null || StatusChipProps === void 0 ? void 0 : StatusChipProps.label, status: StatusChipProps === null || StatusChipProps === void 0 ? void 0 : StatusChipProps.status }))))), React.createElement("div", { className: classes.subHeaderWrapper }, stepper, !hideActionRow && (React.createElement("div", { className: classes.actionRow }, !single && subheader && (React.createElement(Typography, { className: classes.denseSubtitle, variant: "subtitle1", component: "h2" }, subheader)), React.createElement("div", { className: grid ? classes.tabRow : classes.fullTabs }, normalizedFluentTabs.length > 0 && (React.createElement(Suspense, { fallback: null }, React.createElement(UdpTablist, Object.assign({}, fluentTablistDefaults, (tabProps && typeof tabProps === 'object' ? tabProps : {}), { tabList: normalizedFluentTabs, activeId: fluentActiveId, onTabChange: handleFluentTabChange, style: { width: '100%', minWidth: 0 } }))))), React.createElement("div", { className: classes.actionRowTrail }, search && searchToggle, React.createElement("div", { className: classes.secondaryButtons }, !searchExpanded && search && (React.createElement(ToolBarButton, { label: "Search", component: SearchIcon, click: expandSearch })), search && React.createElement(Divider, { orientation: "vertical", className: classes.divider }), (expandGrid ||
        resizeGrid ||
        collapseGrid ||
        exportGrid ||
        saveGridConfig ||
        deleteGridConfig ||
        clearGridConfig) &&
        upperTrayGrid && React.createElement(GridControlLineUp, { expand: expand }), grid &&
        openFilter &&
        gridControlsFilter.map((item) => {
            return (React.createElement(ToolBarButton, { label: item.label, title: item.label, expanded: true, component: item.component, click: item.click, aria: item.aria, key: item.id }));
        }), grid &&
        openGroups &&
        gridControlsGroup.map((item) => {
            return (React.createElement(ToolBarButton, { label: item.label, title: item.label, expanded: true, component: item.component, click: item.click, aria: item.aria, key: item.id }));
        }), grid && searchExpanded && (React.createElement("div", null, React.createElement(FluentIconButton, { id: "udpRecord-PrimaryActionHeader-ClosePanel", udprecordid: "udpRecord-PrimaryActionHeader-ClosePanel", icon: MoreVerticalIcon, "aria-label": "Close Panel" }))), secondaryButtons &&
        !tabs &&
        secondaryButtons.map((item, index) => {
            var _a;
            return (React.createElement(ToolBarButton, { label: item.label, expanded: searchExpanded, component: item.component, click: item.click, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, aria: item.label, disabled: item.disabled }));
        })), React.createElement("div", null, allowAdditionalRightComponent &&
        allTeleporters.map(([targetId, location, teleporter]) => {
            const Target = teleporter.Target;
            if (targetId === additionalComponentId && location === 'right') {
                return (React.createElement("div", { key: targetId, className: "teleport-target" }, React.createElement(Target, null)));
            }
            else {
                return null;
            }
        })), !hidePAB && (React.createElement("div", { className: classes.pab }, topRowSecondary &&
        topRowSecondary.map((item, index) => {
            var _a;
            return (React.createElement(ToolBarButton, { label: item.label, expanded: searchExpanded, component: item.component, click: item.click, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, aria: item.label }));
        }), React.createElement(PrimaryActionButton, Object.assign({ disabled: pabDisabled, onClick: handleClick }, otherProps), buttonLabel))))))), React.createElement("div", { className: clsx(classes.secondaryButtons, (altInputs || bottomRowSecondary) && classes.tabPageButtons) }, React.createElement("div", { className: classes.buttomButtonRow }, React.createElement("div", { className: classes.bottomButtonsLeft }, bottomRowSecondary &&
        bottomRowSecondary.map((item, index) => {
            var _a;
            return (React.createElement(ToolBarButton, { label: item.label, expanded: !tabs && searchExpanded, component: item.component, click: item.click, key: (_a = item.id) !== null && _a !== void 0 ? _a : index }));
        })), React.createElement("div", { className: classes.bottomButtonsRigth }, bottomRowSecondaryRight &&
        bottomRowSecondaryRight.map((item, index) => {
            var _a;
            return (React.createElement(ToolBarButton, { label: item.label, expanded: !tabs && searchExpanded, component: item.component, click: item.click, key: (_a = item.id) !== null && _a !== void 0 ? _a : index }));
        })), altInputs), React.createElement("div", null, showGroups && React.createElement(Divider, null), showGroups && groups)), React.createElement(Collapse, { in: expandOptions, timeout: "auto" }, React.createElement("div", { onMouseLeave: handleMouseLeave }, React.createElement("div", { className: classes.advancedOptions }, expandedContent))), loading && React.createElement(LinearProgress, { value: loadingVal })), lowerTray && (React.createElement(LowerTrayShell, null, React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, React.createElement("div", { style: { display: 'flex' } }, !searchExpanded && lowerTraySearch && (React.createElement(ToolBarButton, { label: "Search", component: SearchIcon, click: expandSearch })), searchToggle), lowerTrayGrid && React.createElement(GridControlLineUp, null)))), React.createElement("div", { className: classes.secondaryButtonsMobile }, secondaryButtons &&
        !tabs &&
        secondaryButtons.map((item, index) => {
            var _a;
            return (React.createElement(ToolBarButton, { label: item.label, expanded: searchExpanded, component: item.component, click: item.click, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, aria: item.label, disabled: item.disabled }));
        }))));
};
PrimaryActionHeader.propTypes = {
    /**
     * Primary action button label
     */
    buttonLabel: PropTypes.string,
    /**
     * Page title
     */
    title: PropTypes.string.isRequired,
    /**
     * Page subtitle
     */
    subheader: PropTypes.string,
    /**
     * Primary action button function
     */
    handleClick: PropTypes.func,
    /**
     * prop for mapped secondary button data
     */
    secondaryButtons: PropTypes.arrayOf(PropTypes.shape({
        label: PropTypes.string,
        component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
        click: PropTypes.func,
        key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    })),
    /**
     * Hides Primary Action Button (not recommended)
     */
    hidePAB: PropTypes.bool,
    /**
     * Allows search option to display
     */
    search: PropTypes.bool,
    /**
     * Search field designed to fit header space
     */
    searchField: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
    /**
     * If true, expanded space for advanced search is open
     */
    expandOptions: PropTypes.func,
    /**
     * Function to close expanded space when the user mouse leaves
     */
    handleMouseLeave: PropTypes.string,
    /**
     * The contents of the expanded search
     */
    expandedContent: PropTypes.node,
    /**
     * Handle change option for tabs (when the tab prop is active)
     */
    handleChange: PropTypes.string,
    /**
     * Sends value that determines what tab content is visable (when the tab prop is active)
     */
    value: PropTypes.oneOfType([PropTypes.node, PropTypes.oneOf([false])]),
    /**
     * Prop to pass an array of tab lables to display tabs (when the tab prop is active)
     */
    tabList: PropTypes.node,
    /**
     * Prop option to display tabs. Tabs are available when true. Also provides additional formatting.
     */
    tabs: PropTypes.bool,
    /**
     * Click event to resize grid to fit (when using the PAH to display a grid).
     */
    resizeGrid: PropTypes.func,
    /**
     * Click event to collapse Ag Grid when grouped (when using the PAH to display a grid).
     */
    collapse: PropTypes.func,
    /**
     * Click event to expand Ag Grid when grouped (when using the PAH to display a grid).
     */
    expandAllItems: PropTypes.func,
    /**
     * Click event to save Ag Grid configurations (e.g. filters, sorting, column widths, etc.) when using the PAH to display a grid.
     */
    saveGridConfig: PropTypes.func,
    /**
     * Click event to delete Ag Grid configurations (e.g. filters, sorting, column widths, etc.) when using the PAH to display a grid.
     */
    deleteGridConfig: PropTypes.func,
    /**
     * Click event to clear Ag Grid configurations (e.g. filters, sorting, column widths, etc.) when using the PAH to display a grid.
     */
    clearGridConfig: PropTypes.func,
    /**
     * Prop that accepts a component of groups (when using the PAH to display a grid).
     */
    groups: PropTypes.node,
    /**
     * Prop option to display grid. Grid formatting is available when true.
     */
    grid: PropTypes.bool,
    /**
     * Prop option to display grid. Grid formatting is available when true.
     */
    otherProps: PropTypes.any,
    /**
     * Prop option to show secondary buttons on top row.
     */
    bottomRowSecondary: PropTypes.array,
    /**
     * Prop option to show secondary buttons on bottom row.
     */
    topRowSecondary: PropTypes.array,
    /**
     * Exposes onClick for back arrow. Only displays arrow when a function is provided.
     */
    clickBack: PropTypes.func,
    /**
     * Toggles visaiblity for loading progress bar.
     */
    loading: PropTypes.bool,
    /**
     * The value of progress loading.
     */
    loadingVal: PropTypes.number,
    /**
     * Exposes function to open group options.
     */
    openGroups: PropTypes.func,
    /**
     * Exposes function to open filter options.
     */
    openFilter: PropTypes.func,
    /**
     * Alternate method to include toolbar inputs.
     */
    altInputs: PropTypes.node,
    /**
     * If true, actionRow will be hidden
     */
    hideActionRow: PropTypes.bool,
    /**
     * Props forwarded to UdpTablist (Fluent); overrides tabVariant defaults.
     */
    tabProps: PropTypes.object,
    /**
     * Determines if the primary action header should be multiple rows
     */
    single: PropTypes.bool,
};
PrimaryActionHeader.defaultProps = {
    hidePAB: false,
};
//# sourceMappingURL=PrimaryActionHeader.js.map