@pnp/spfx-controls-react 3.24.0-beta.2252463 → 3.24.0-beta.2280641

package/lib-commonjs/controls/toolbar/Toolbar.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toolbar = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var omit_1 = tslib_1.__importDefault(require("lodash/omit"));
+var react_northstar_1 = require("@fluentui/react-northstar");
+var ToolbarFilter_1 = require("./ToolbarFilter");
+var ToolbarFind_1 = require("./ToolbarFind");
+var ToolbarTheme_1 = require("./ToolbarTheme");
+require("./toolbar.css");
+var InFlowToolbarItem_1 = require("./InFlowToolbarItem");
+var Toolbar_module_scss_1 = tslib_1.__importDefault(require("./Toolbar.module.scss"));
+var ToolbarActionsUtils_1 = require("./ToolbarActionsUtils");
+var telemetry_1 = require("../../common/telemetry");
+var Icon_1 = require("@fluentui/react/lib/Icon");
+var Toolbar = function (props) {
+    var actionGroups = props.actionGroups, filters = props.filters, selectedFilterIds = props.selectedFilterIds, filtersSingleSelect = props.filtersSingleSelect, find = props.find;
+    var allActions = (0, ToolbarActionsUtils_1.flattenedActions)(actionGroups);
+    var _a = React.useState(false), overflowOpen = _a[0], setOverflowOpen = _a[1];
+    var _b = React.useState(false), filtersOpen = _b[0], setFiltersOpen = _b[1];
+    var _c = React.useState("compact"), layout = _c[0], setLayout = _c[1];
+    var _d = React.useState(false), findActive = _d[0], setFindActive = _d[1];
+    var layoutQuery = React.useRef(null);
+    var onChangeLayout = function () {
+        setLayout(layoutQuery.current && layoutQuery.current.matches ? "verbose" : "compact");
+    };
+    (0, telemetry_1.useTelemetry)('ReactToolbar');
+    React.useLayoutEffect(function () {
+        layoutQuery.current = window.matchMedia("(min-width: 640px)");
+        layoutQuery.current.addEventListener("change", onChangeLayout);
+        onChangeLayout();
+        return function () {
+            if (layoutQuery.current) {
+                layoutQuery.current.removeEventListener("change", onChangeLayout);
+            }
+        };
+    });
+    var inFlowToolbarItems = (0, ToolbarActionsUtils_1.getInFlowToolbarItems)(allActions, function (action) { return React.createElement(InFlowToolbarItem_1.InFlowToolbarItem, { action: action, layout: layout }); });
+    var overflowToolbarItems = (0, ToolbarActionsUtils_1.getOverflowToolbarItems)(allActions, function (action) { return React.createElement(Icon_1.Icon, { iconName: action.iconName }); });
+    var displayFindOnly = find && layout === "compact" && findActive;
+    return (React.createElement(react_northstar_1.ProviderConsumer, { render: function (globalTheme) {
+            if (!globalTheme || globalTheme.fontFaces.length === 0) {
+                globalTheme = react_northstar_1.teamsTheme;
+            }
+            return React.createElement(ToolbarTheme_1.ToolbarTheme, { globalTheme: globalTheme },
+                React.createElement(react_northstar_1.Box, tslib_1.__assign({ className: "extended-toolbar", variables: function (_a) {
+                        var colorScheme = _a.colorScheme, theme = _a.theme;
+                        return ({
+                            backgroundColor: theme === "teamsHighContrastTheme"
+                                ? colorScheme.grey.background
+                                : colorScheme.grey.background2,
+                            elevation: colorScheme.elevations[16],
+                        });
+                    }, styles: {
+                        padding: "0 1.25rem",
+                        marginBottom: "1.25rem",
+                        display: "flex",
+                        justifyContent: "space-between",
+                    } }, (0, omit_1.default)(props, [
+                    "actionGroups",
+                    "filters",
+                    "find",
+                    "filtersSingleSelect",
+                    "onSelectedFiltersChange",
+                    "onFindQueryChange",
+                ])),
+                    !displayFindOnly && (React.createElement(react_northstar_1.Toolbar, { "aria-label": "Extended toolbar", className: "extended-toolbar__near-side " + Toolbar_module_scss_1.default.toolbarButtonStyles, items: inFlowToolbarItems, overflow: true, overflowOpen: overflowOpen, overflowItem: {
+                            title: "More",
+                            menu: InFlowToolbarItem_1.toolbarMenuProps,
+                        }, onOverflowOpenChange: function (event, changeProps) {
+                            if (changeProps && changeProps.overflowOpen) {
+                                setOverflowOpen(changeProps.overflowOpen);
+                                if (changeProps.overflowOpen) {
+                                    setFiltersOpen(false);
+                                }
+                            }
+                            else {
+                                setOverflowOpen(false);
+                            }
+                        }, getOverflowItems: function (startIndex) {
+                            return overflowToolbarItems.slice(startIndex);
+                        }, styles: {
+                            flex: "1 0 0",
+                            overflow: "hidden",
+                            maxWidth: "40rem",
+                            minWidth: "2rem",
+                        } })),
+                    React.createElement(react_northstar_1.Box, { className: "extended-toolbar__far-side", styles: {
+                            flex: displayFindOnly ? "1 1 100%" : "0 1 auto",
+                            display: "flex",
+                            flexFlow: "row nowrap",
+                            overflow: "hidden",
+                            paddingLeft: displayFindOnly ? "0" : "2.5rem",
+                        } },
+                        !displayFindOnly && filters && (React.createElement(ToolbarFilter_1.ToolbarFilter, { layout: layout, filters: filters, selectedFilterIds: selectedFilterIds, singleSelect: !!filtersSingleSelect, open: filtersOpen, onOpenChange: function (_e, changeProps) {
+                                if (changeProps.open) {
+                                    setFiltersOpen(changeProps.open);
+                                    setOverflowOpen(false);
+                                }
+                                else {
+                                    setFiltersOpen(false);
+                                    setOverflowOpen(false);
+                                }
+                            }, onSelectedFiltersChange: props.onSelectedFiltersChange, toolbarMenuProps: InFlowToolbarItem_1.toolbarMenuProps })),
+                        find && (React.createElement(ToolbarFind_1.ToolbarFind, { layout: layout, findActive: findActive, setFindActive: setFindActive, onFindQueryChange: props.onFindQueryChange })))));
+        } }));
+};
+exports.Toolbar = Toolbar;
+//# sourceMappingURL=Toolbar.js.map

package/lib-commonjs/controls/toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../src/controls/toolbar/Toolbar.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAC/B,6DAA+B;AAE/B,6DAMmC;AAGnC,iDAAgD;AAChD,6CAA4C;AAC5C,+CAA8C;AAE9C,yBAAuB;AACvB,yDAA0E;AAC1E,sFAA2C;AAC3C,6DAAiK;AACjK,oDAAsD;AACtD,iDAAgD;AAqCzC,IAAM,OAAO,GAAG,UAAC,KAAoB;IAClC,IAAA,YAAY,GAA4D,KAAK,aAAjE,EAAE,OAAO,GAAmD,KAAK,QAAxD,EAAE,iBAAiB,GAAgC,KAAK,kBAArC,EAAE,mBAAmB,GAAW,KAAK,oBAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;IAEtF,IAAM,UAAU,GAAG,IAAA,sCAAgB,EAAC,YAAY,CAAC,CAAC;IAE5C,IAAA,KAAkC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAtD,YAAY,QAAA,EAAE,eAAe,QAAyB,CAAC;IACxD,IAAA,KAAgC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAApD,WAAW,QAAA,EAAE,cAAc,QAAyB,CAAC;IAEtD,IAAA,KAAsB,KAAK,CAAC,QAAQ,CAAiB,SAAS,CAAC,EAA9D,MAAM,QAAA,EAAE,SAAS,QAA6C,CAAC;IAChE,IAAA,KAA8B,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,EAA3D,UAAU,QAAA,EAAE,aAAa,QAAkC,CAAC;IAEnE,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAE9D,IAAM,cAAc,GAAG;QACrB,SAAS,CACP,WAAW,CAAC,OAAO,IAAI,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAC3E,CAAC;IACJ,CAAC,CAAC;IAEF,IAAA,wBAAY,EAAC,cAAc,CAAC,CAAC;IAE7B,KAAK,CAAC,eAAe,CAAC;QACpB,WAAW,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;QAC9D,WAAW,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAC/D,cAAc,EAAE,CAAC;QACjB,OAAO;YACL,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACxB,WAAW,CAAC,OAAO,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YACpE,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAM,kBAAkB,GAAkB,IAAA,2CAAqB,EAAC,UAAU,EAAE,UAAC,MAAM,IAAK,OAAA,oBAAC,qCAAiB,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,EAArD,CAAqD,CAAC,CAAC;IAE/I,IAAM,oBAAoB,GAAkB,IAAA,6CAAuB,EAAC,UAAU,EAAE,UAAC,MAAM,IAAG,OAAA,oBAAC,WAAI,IAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,GAAI,EAAnC,CAAmC,CAAC,CAAC;IAE/H,IAAM,eAAe,GAAG,IAAI,IAAI,MAAM,KAAK,SAAS,IAAI,UAAU,CAAC;IAEnE,OAAO,CACL,oBAAC,kCAAqB,IACpB,MAAM,EAAE,UAAC,WAAW;YAElB,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACvD,WAAW,GAAG,4BAAU,CAAC;YAC3B,CAAC;YACD,OAAO,oBAAC,2BAAY,IAAC,WAAW,EAAE,WAAW;gBAC3C,oBAAC,qBAAG,qBACF,SAAS,EAAC,kBAAkB,EAC5B,SAAS,EAAE,UAAC,EAA6C;4BAA3C,WAAW,iBAAA,EAAE,KAAK,WAAA;wBAA8B,OAAA,CAAC;4BAC7D,eAAe,EACb,KAAK,KAAK,wBAAwB;gCAChC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU;gCAC7B,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW;4BAClC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,EAAE,CAAC;yBACtC,CAAC;oBAN4D,CAM5D,EACF,MAAM,EAAE;wBACN,OAAO,EAAE,WAAW;wBACpB,YAAY,EAAE,SAAS;wBACvB,OAAO,EAAE,MAAM;wBACf,cAAc,EAAE,eAAe;qBAChC,IACG,IAAA,cAAI,EAAC,KAAK,EAAE;oBACd,cAAc;oBACd,SAAS;oBACT,MAAM;oBACN,qBAAqB;oBACrB,yBAAyB;oBACzB,mBAAmB;iBACpB,CAAC;oBAED,CAAC,eAAe,IAAI,CACnB,oBAAC,yBAAe,kBACH,kBAAkB,EAC7B,SAAS,EAAE,8BAA8B,GAAG,6BAAM,CAAC,mBAAmB,EACtE,KAAK,EAAE,kBAAkB,EACzB,QAAQ,QACR,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE;4BACZ,KAAK,EAAE,MAAM;4BACb,IAAI,EAAE,oCAAgB;yBACvB,EACD,oBAAoB,EAAE,UAAC,KAAK,EAAE,WAAW;4BACvC,IAAI,WAAW,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gCAC5C,eAAe,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;gCAC1C,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;oCAC7B,cAAc,CAAC,KAAK,CAAC,CAAC;gCACxB,CAAC;4BACH,CAAC;iCACG,CAAC;gCACH,eAAe,CAAC,KAAK,CAAC,CAAC;4BACzB,CAAC;wBACH,CAAC,EACD,gBAAgB,EAAE,UAAC,UAAU;4BAC3B,OAAA,oBAAoB,CAAC,KAAK,CAAC,UAAU,CAAC;wBAAtC,CAAsC,EAExC,MAAM,EAAE;4BACN,IAAI,EAAE,OAAO;4BACb,QAAQ,EAAE,QAAQ;4BAClB,QAAQ,EAAE,OAAO;4BACjB,QAAQ,EAAE,MAAM;yBACjB,GACD,CACH;oBACD,oBAAC,qBAAG,IACF,SAAS,EAAC,4BAA4B,EACtC,MAAM,EAAE;4BACN,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;4BAC/C,OAAO,EAAE,MAAM;4BACf,QAAQ,EAAE,YAAY;4BACtB,QAAQ,EAAE,QAAQ;4BAClB,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ;yBAC9C;wBAEA,CAAC,eAAe,IAAI,OAAO,IAAI,CAC9B,oBAAC,6BAAa,IACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,CAAC,CAAC,mBAAmB,EACnC,IAAI,EAAE,WAAW,EACjB,YAAY,EAAE,UAAC,EAAE,EAAE,WAAW;gCAC5B,IAAI,WAAW,CAAC,IAAI,EAAE,CAAC;oCACrB,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oCACjC,eAAe,CAAC,KAAK,CAAC,CAAC;gCACzB,CAAC;qCACI,CAAC;oCACJ,cAAc,CAAC,KAAK,CAAC,CAAC;oCACtB,eAAe,CAAC,KAAK,CAAC,CAAC;gCACzB,CAAC;4BACH,CAAC,EACD,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,EACtD,gBAAgB,EAAE,oCAAgB,GAClC,CACH;wBACA,IAAI,IAAI,CACP,oBAAC,yBAAW,IAER,MAAM,QAAA,EACN,UAAU,YAAA,EACV,aAAa,eAAA,EACb,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,GAE5C,CACH,CACG,CACF,CACO,CAAC;QAClB,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAtJW,QAAA,OAAO,WAsJlB"}

package/lib-commonjs/controls/toolbar/Toolbar.module.scss.css

@@ -0,0 +1,28 @@
+.toolbarButtonStyles {
+  padding: 0.5rem;
+  border-width: 1px;
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 3rem !important;
+  min-width: 0;
+}
+.toolbarButtonStyles:focus:before {
+  top: calc(0.5rem - 1px);
+  bottom: calc(0.5rem - 1px);
+}
+.toolbarButtonStyles:focus:after {
+  top: calc(0.5rem - 1px);
+  bottom: calc(0.5rem - 1px);
+}
+
+.inFlowToolbarItemBox {
+  width: 1rem;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+@media (min-width: 640px) {
+  .inFlowToolbarItemBox {
+    margin-right: 0.5rem;
+  }
+}

package/lib-commonjs/controls/toolbar/ToolbarActionsUtils.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.needsSeparator = needsSeparator;
+exports.flattenedActions = flattenedActions;
+exports.getInFlowToolbarItems = getInFlowToolbarItems;
+exports.getOverflowToolbarItems = getOverflowToolbarItems;
+var tslib_1 = require("tslib");
+var Toolbar_module_scss_1 = tslib_1.__importDefault(require("./Toolbar.module.scss"));
+var slugSeparator = "__";
+function needsSeparator(actionSlug, index, actionSlugs) {
+    if (index === 0) {
+        return false;
+    }
+    else if (actionSlugs[index - 1]) {
+        return actionSlugs[index - 1].split(slugSeparator)[0] !==
+            actionSlug.split(slugSeparator)[0];
+    }
+}
+function flattenedActions(actionGroups) {
+    return Object.keys(actionGroups).reduce(function (acc_i, actionGroupSlug) {
+        var actionGroup = actionGroups[actionGroupSlug];
+        return Object.keys(actionGroup).reduce(function (acc_j, actionSlug) {
+            var action = actionGroup[actionSlug];
+            acc_j["".concat(actionGroupSlug).concat(slugSeparator).concat(actionSlug)] = action;
+            return acc_j;
+        }, acc_i);
+    }, {});
+}
+function getInFlowToolbarItems(allActions, childredFactory) {
+    return Object.keys(allActions).reduce(function (acc, actionSlug, index, actionSlugs) {
+        var action = allActions[actionSlug];
+        acc.push(tslib_1.__assign(tslib_1.__assign({}, action), { key: actionSlug, children: childredFactory(action), title: action.title, "aria-label": action.title, className: "extended-toolbar__near-side__item " + Toolbar_module_scss_1.default.toolbarButtonStyles, styles: {
+                flex: "0 0 auto",
+                margin: "0 .0625rem",
+                display: "inline-flex",
+                justifyContent: "center",
+                alignItems: "center",
+            } }));
+        if (needsSeparator(actionSlug, index, actionSlugs))
+            acc.push({
+                key: "divider".concat(slugSeparator).concat(index),
+                kind: "divider",
+            });
+        return acc;
+    }, []);
+}
+function getOverflowToolbarItems(allActions, childredFactory) {
+    return Object.keys(allActions).reduce(function (acc, actionSlug, index, actionSlugs) {
+        var action = allActions[actionSlug];
+        acc.push({
+            key: actionSlug,
+            content: action.title,
+            icon: childredFactory(action),
+            title: action.title,
+            "aria-label": action.title,
+            styles: { padding: ".375rem .5rem" },
+            onClick: action.onClick
+        });
+        if (needsSeparator(actionSlug, index, actionSlugs))
+            acc.push({
+                key: "divider".concat(slugSeparator).concat(index),
+                kind: "divider",
+                styles: { margin: ".25rem 0", "&:first-child": { display: "none" } },
+            });
+        return acc;
+    }, []);
+}
+//# sourceMappingURL=ToolbarActionsUtils.js.map

package/lib-commonjs/controls/toolbar/ToolbarActionsUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarActionsUtils.js","sourceRoot":"","sources":["../../../src/controls/toolbar/ToolbarActionsUtils.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/controls/toolbar/ToolbarFilter.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarFilter = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var get_1 = tslib_1.__importDefault(require("lodash/get"));
+var react_northstar_1 = require("@fluentui/react-northstar");
+var react_icons_northstar_1 = require("@fluentui/react-icons-northstar");
+var Toolbar_module_scss_1 = tslib_1.__importDefault(require("./Toolbar.module.scss"));
+var treeItemIconStyles = {
+    position: "relative",
+    left: "-1rem",
+    height: "1rem",
+    width: "0",
+    display: "block",
+    pointerEvents: "none",
+};
+var treeItemTitleRenderer = function (Component, _a) {
+    var content = _a.content, expanded = _a.expanded, hasSubtree = _a.hasSubtree, restProps = tslib_1.__rest(_a, ["content", "expanded", "hasSubtree"]);
+    return (React.createElement(Component, tslib_1.__assign({ expanded: expanded, hasSubtree: hasSubtree, styles: {
+            display: "flex",
+            justifyContent: "flex-start",
+            alignItems: "center",
+            padding: "0.325rem 0.875rem 0.325rem 1.125rem",
+        }, selectionIndicator: {
+            styles: { flex: "0 0 auto", marginLeft: "1rem" },
+        } }, restProps),
+        hasSubtree ? (expanded ? (React.createElement(react_icons_northstar_1.TriangleDownIcon, { styles: treeItemIconStyles })) : (React.createElement(react_icons_northstar_1.TriangleEndIcon, { styles: treeItemIconStyles }))) : null,
+        React.createElement(react_northstar_1.Text, { styles: {
+                flex: "1 1 auto",
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+                textOverflow: "ellipsis",
+                pointerEvents: "none",
+                marginRight: ".5rem",
+            }, content: content, className: "extended-toolbar__filters-menu__item__content" })));
+};
+var addSelectableParent = function (items) {
+    return items.map(function (item) {
+        if (item && item.hasOwnProperty("items")) // eslint-disable-line no-prototype-builtins
+            return Object.assign(item, {
+                selectableParent: true,
+                items: addSelectableParent((0, get_1.default)(item, ["items"], [])),
+            });
+        else
+            return item;
+    });
+};
+var findSingleTitle = function (selectedId, filters) {
+    var result = undefined;
+    for (var i = 0; i < filters.length; i += 1) {
+        if ((0, get_1.default)(filters, [i, "id"]) === selectedId) {
+            result = (0, get_1.default)(filters, [i, "title"]);
+            break;
+        }
+        else if (Array.isArray((0, get_1.default)(filters, [i, "items"]))) {
+            var deepResult = findSingleTitle(selectedId, (0, get_1.default)(filters, [i, "items"]));
+            if (deepResult) {
+                result = deepResult;
+                break;
+            }
+        }
+    }
+    return result;
+};
+var getSingleTitle = function (layout, selectedId, filters) {
+    switch (layout) {
+        case "verbose":
+            return (selectedId && findSingleTitle(selectedId, filters)) || "Filter";
+        default:
+        case "compact":
+            return selectedId ? "(1)" : "";
+    }
+};
+var ToolbarFilter = function (props) {
+    var layout = props.layout, filters = props.filters, externalSelectedFilters = props.selectedFilterIds, singleSelect = props.singleSelect, open = props.open, onOpenChange = props.onOpenChange, toolbarMenuProps = props.toolbarMenuProps;
+    var _a = React.useState([]), selectedFilters = _a[0], setSelectedFilters = _a[1];
+    var propagateSetSelectedFilters = function (eventSelectedFilters) {
+        if (props.onSelectedFiltersChange) {
+            var selectedFiltersAfterNotifyingChange = props.onSelectedFiltersChange(eventSelectedFilters);
+            // If Toolbar is used as a controlled component - i.e. selectedFilterIds is defined - then we ignore the value
+            // returned by the onSelectedFiltersChange callback and assume that selectedFilterIds will be updated
+            // to reflect the new set of selected filters.
+            // If Toolbar is uncontrolled then a defined returned value from the onSelectedFilterChange callback will be
+            // used as the new set of selected filters.
+            if (externalSelectedFilters === undefined) {
+                console.log("externalSelectedFilters is undefined");
+                if (selectedFiltersAfterNotifyingChange !== undefined && Array.isArray(selectedFiltersAfterNotifyingChange)) {
+                    setSelectedFilters(selectedFiltersAfterNotifyingChange);
+                }
+                else {
+                    setSelectedFilters(eventSelectedFilters);
+                }
+            }
+        }
+        else {
+            setSelectedFilters(eventSelectedFilters);
+        }
+    };
+    React.useEffect(function () {
+        if (externalSelectedFilters !== undefined) {
+            setSelectedFilters(externalSelectedFilters);
+        }
+    }, [externalSelectedFilters]);
+    var invokerTitle = singleSelect
+        ? getSingleTitle(layout, selectedFilters[0], filters)
+        : "".concat(layout === "verbose" ? "Filter" : "").concat(selectedFilters.length > 0 ? " (".concat(selectedFilters.length, ")") : "");
+    var filtersForTree = singleSelect
+        ? filters
+        : addSelectableParent(filters);
+    var filterInvoker = (React.createElement(react_northstar_1.Button, { text: true, title: "Filter", content: invokerTitle, className: "extended-toolbar__filters-invoker " + Toolbar_module_scss_1.default.toolbarButtonStyles, icon: React.createElement(react_icons_northstar_1.AudienceIcon, { outline: true }), styles: {
+            marginRight: ".5rem",
+            flex: "0 0 auto",
+        }, onClick: function (e) { return onOpenChange(e, { open: !open }); } }));
+    return filters.length ? (React.createElement(react_northstar_1.Popup, tslib_1.__assign({}, toolbarMenuProps, { open: open, onOpenChange: onOpenChange, trigger: layout === "compact" ? (React.createElement(react_northstar_1.Tooltip, { trigger: filterInvoker, content: "Filter", accessibility: react_northstar_1.tooltipAsLabelBehavior })) : (filterInvoker), content: {
+            styles: { width: "13.75rem" },
+            content: (React.createElement(react_northstar_1.Box, { className: "extended-toolbar__filters-menu" },
+                React.createElement(react_northstar_1.Box, { className: "extended-toolbar__filters-menu__header", styles: {
+                        display: "flex",
+                        flexFlow: "row wrap",
+                        alignItems: "center",
+                        padding: "0 .5rem",
+                    } },
+                    React.createElement(react_northstar_1.Text, { content: "Filter", className: "extended-toolbar__filters-menu__title", styles: {
+                            flex: "1 0 auto",
+                            padding: ".5rem 0",
+                        } }),
+                    React.createElement(react_northstar_1.Button, { text: true, primary: true, content: "Clear", "aria-label": "Clear filter", className: "extended-toolbar__filters-menu__clear-action", onClick: function () { return propagateSetSelectedFilters([]); }, styles: {
+                            marginRight: "calc(1px - .5rem)",
+                            padding: ".5rem",
+                            height: "2rem",
+                            minWidth: 0,
+                        }, variables: function (_a) {
+                            var colorScheme = _a.colorScheme, theme = _a.theme;
+                            var color = colorScheme.brand.foreground;
+                            switch (theme) {
+                                case "teamsHighContrastTheme":
+                                    color = colorScheme.grey.foregroundHover;
+                                    break;
+                            }
+                            return { color: color };
+                        } })),
+                React.createElement(react_northstar_1.Divider, { styles: { padding: 0, margin: "0 .5rem" } }),
+                React.createElement(react_northstar_1.Tree, { selectable: true, items: filtersForTree, onSelectedItemIdsChange: function (event, selectProps) {
+                        if (selectProps && selectProps.selectedItemIds) {
+                            var selectedItemIds = selectProps.selectedItemIds;
+                            var nextSelectedFilters = typeof selectedItemIds === "function"
+                                ? selectedItemIds(selectedFilters)
+                                : Array.isArray(selectedItemIds)
+                                    ? selectedItemIds
+                                    : [];
+                            propagateSetSelectedFilters(singleSelect
+                                ? nextSelectedFilters.slice(nextSelectedFilters.length - 1, nextSelectedFilters.length)
+                                : nextSelectedFilters);
+                        }
+                    }, selectedItemIds: selectedFilters, renderItemTitle: treeItemTitleRenderer, className: "extended-toolbar__filters-menu__tree", "aria-labelledby": "extended-toolbar__filters-menu__title", styles: { padding: "0.3125rem 0" } }))),
+        }, trapFocus: {
+            firstFocusableSelector: ".extended-toolbar__filters-menu__tree [data-is-focusable=true]",
+        } }))) : null;
+};
+exports.ToolbarFilter = ToolbarFilter;
+//# sourceMappingURL=ToolbarFilter.js.map

package/lib-commonjs/controls/toolbar/ToolbarFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarFilter.js","sourceRoot":"","sources":["../../../src/controls/toolbar/ToolbarFilter.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/controls/toolbar/ToolbarFind.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarFind = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_northstar_1 = require("@fluentui/react-northstar");
+var react_icons_northstar_1 = require("@fluentui/react-icons-northstar");
+var Toolbar_module_scss_1 = tslib_1.__importDefault(require("./Toolbar.module.scss"));
+var ToolbarFind = function (props) {
+    switch (props.layout) {
+        case "verbose":
+            return (React.createElement(react_northstar_1.Input, { clearable: true, placeholder: "Find", "aria-label": "Find", className: "extended-toolbar__far-side__input", icon: React.createElement(react_icons_northstar_1.SearchIcon, { outline: true }), styles: {
+                    flexShrink: 1,
+                    width: "13.125rem",
+                }, onChange: function (e, inputProps) {
+                    if (props.onFindQueryChange && inputProps)
+                        props.onFindQueryChange(inputProps.value);
+                } }));
+        default:
+        case "compact":
+            return props.findActive ? (React.createElement(React.Fragment, null,
+                React.createElement(react_northstar_1.Input, { autoFocus: true, clearable: true, placeholder: "Find", "aria-label": "Find", className: "extended-toolbar__far-side__input", icon: React.createElement(react_icons_northstar_1.SearchIcon, { outline: true }), styles: {
+                        flexShrink: 1,
+                        flexGrow: 1,
+                        width: "13.125rem",
+                    }, onChange: function (e, inputProps) {
+                        if (props.onFindQueryChange && inputProps)
+                            props.onFindQueryChange(inputProps.value);
+                    } }),
+                React.createElement(react_northstar_1.Button, { text: true, title: "Cancel", content: "Cancel", className: "extended-toolbar__find-cancel " + Toolbar_module_scss_1.default.toolbarButtonStyles, styles: {
+                        marginLeft: "1px",
+                        marginRight: "1px"
+                    }, onClick: function (_e) {
+                        if (props.onFindQueryChange) {
+                            props.onFindQueryChange("");
+                        }
+                        props.setFindActive(false);
+                    } }))) : (React.createElement(react_northstar_1.Tooltip, { trigger: React.createElement(react_northstar_1.Button, { text: true, title: "Find", content: "", className: "extended-toolbar__find-invoker " + Toolbar_module_scss_1.default.toolbarButtonStyles, icon: React.createElement(react_icons_northstar_1.SearchIcon, { outline: true }), styles: {
+                        marginRight: ".5rem",
+                        flex: "0 0 auto",
+                    }, onClick: function (_e) { return props.setFindActive(true); } }), content: "Find", accessibility: react_northstar_1.tooltipAsLabelBehavior }));
+    }
+};
+exports.ToolbarFind = ToolbarFind;
+//# sourceMappingURL=ToolbarFind.js.map

package/lib-commonjs/controls/toolbar/ToolbarFind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarFind.js","sourceRoot":"","sources":["../../../src/controls/toolbar/ToolbarFind.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAE/B,6DAKmC;AACnC,yEAA6D;AAE7D,sFAA2C;AAUpC,IAAM,WAAW,GAAG,UAAC,KAAwB;IAClD,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;QACrB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,uBAAK,IACJ,SAAS,QACT,WAAW,EAAC,MAAM,gBACP,MAAM,EACjB,SAAS,EAAC,mCAAmC,EAC7C,IAAI,EAAE,oBAAC,kCAAU,IAAC,OAAO,SAAG,EAC5B,MAAM,EAAE;oBACN,UAAU,EAAE,CAAC;oBACb,KAAK,EAAE,WAAW;iBACnB,EACD,QAAQ,EAAE,UAAC,CAAC,EAAE,UAAU;oBACtB,IAAI,KAAK,CAAC,iBAAiB,IAAI,UAAU;wBACvC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;gBAC9C,CAAC,GACD,CACH,CAAC;QACJ,QAAQ;QACR,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CACxB;gBACE,oBAAC,uBAAK,IACJ,SAAS,QACT,SAAS,QACT,WAAW,EAAC,MAAM,gBACP,MAAM,EACjB,SAAS,EAAC,mCAAmC,EAC7C,IAAI,EAAE,oBAAC,kCAAU,IAAC,OAAO,SAAG,EAC5B,MAAM,EAAE;wBACN,UAAU,EAAE,CAAC;wBACb,QAAQ,EAAE,CAAC;wBACX,KAAK,EAAE,WAAW;qBACnB,EACD,QAAQ,EAAE,UAAC,CAAC,EAAE,UAAU;wBACtB,IAAI,KAAK,CAAC,iBAAiB,IAAI,UAAU;4BACvC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;oBAC9C,CAAC,GACD;gBACF,oBAAC,wBAAM,IACL,IAAI,QACJ,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAE,gCAAgC,GAAI,6BAAM,CAAC,mBAAmB,EACzE,MAAM,EAAE;wBACN,UAAU,EAAE,KAAK;wBACjB,WAAW,EAAE,KAAK;qBACnB,EACD,OAAO,EAAE,UAAC,EAAE;wBACV,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;4BAC5B,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;wBAC9B,CAAC;wBACD,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBAC7B,CAAC,GACD,CACD,CACJ,CAAC,CAAC,CAAC,CACA,oBAAC,yBAAO,IACN,OAAO,EACL,oBAAC,wBAAM,IACL,IAAI,QACJ,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,EAAE,EACV,SAAS,EAAE,iCAAiC,GAAG,6BAAM,CAAC,mBAAmB,EACzE,IAAI,EAAE,oBAAC,kCAAU,IAAC,OAAO,SAAG,EAC5B,MAAM,EAAE;wBACN,WAAW,EAAE,OAAO;wBACpB,IAAI,EAAE,UAAU;qBACjB,EACD,OAAO,EAAE,UAAC,EAAE,IAAK,OAAA,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,EAAzB,CAAyB,GAC1C,EAEJ,OAAO,EAAC,MAAM,EACd,aAAa,EAAE,wCAAsB,GACrC,CACH,CAAC;IACR,CAAC;AACH,CAAC,CAAC;AA/EW,QAAA,WAAW,eA+EtB"}

package/lib-commonjs/controls/toolbar/ToolbarTheme.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarTheme = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_northstar_1 = require("@fluentui/react-northstar");
+var ThemeUtility_1 = require("../../common/utilities/ThemeUtility");
+var getLocalTheme = function (themeKey) {
+    var buttonRootVariables = function (_a) {
+        var colorScheme = _a.colorScheme, theme = _a.theme;
+        var color = colorScheme.black.foreground;
+        switch (theme) {
+            case "teamsDarkTheme":
+                color = colorScheme.grey.foreground;
+                break;
+            case "teamsHighContrastTheme":
+                color = colorScheme.grey.foregroundHover;
+                break;
+        }
+        return {
+            color: color,
+        };
+    };
+    var menuContentStyles = function (_a) {
+        var theme = _a.theme;
+        var _b = theme.siteVariables, siteThemeKey = _b.theme, colorScheme = _b.colorScheme;
+        return {
+            borderWidth: siteThemeKey === "teamsHighContrastTheme" ? "1px" : 0,
+            boxShadow: colorScheme.elevations[8],
+        };
+    };
+    return {
+        componentVariables: {
+            Button: buttonRootVariables,
+            Input: function (_a) {
+                var colors = _a.colors, colorScheme = _a.colorScheme, theme = _a.theme;
+                return ({
+                    backgroundColor: theme === "teamsDarkTheme"
+                        ? colors.grey[750]
+                        : colorScheme.black.background,
+                });
+            },
+            ToolbarItem: buttonRootVariables,
+            TreeItem: function (_a) {
+                var colorScheme = _a.colorScheme, theme = _a.theme;
+                return ({
+                    color: theme === "teamsHighContrastTheme"
+                        ? colorScheme.grey.backgroundFocus
+                        : colorScheme.grey.background2,
+                });
+            },
+            TreeTitle: function (_a) {
+                var colorScheme = _a.colorScheme;
+                return ({
+                    color: colorScheme.grey.foreground,
+                    // todo: set the hover color as well
+                });
+            },
+        },
+        componentStyles: {
+            ButtonContent: {
+                root: function (_a) {
+                    var variables = _a.variables;
+                    return ({
+                        fontWeight: 400,
+                    });
+                },
+            },
+            Input: {
+                input: {
+                    width: "100%",
+                },
+            },
+            PopupContent: {
+                content: function (cvo) {
+                    return Object.assign(menuContentStyles(cvo), { padding: 0 });
+                },
+            },
+            ToolbarMenu: { root: menuContentStyles },
+            TreeItem: {
+                root: {
+                    paddingLeft: 0,
+                    position: "relative",
+                    "&::before": {
+                        content: '""',
+                        position: "absolute",
+                        top: 0,
+                        right: ".25rem",
+                        bottom: 0,
+                        left: ".25rem",
+                        background: "transparent",
+                        borderRadius: "2px",
+                    },
+                    "&:hover::before": {
+                        background: "currentColor",
+                    },
+                },
+            },
+        },
+    };
+};
+var ToolbarTheme = function (_a) {
+    var globalTheme = _a.globalTheme, children = _a.children;
+    var mainTheme = (globalTheme.siteVariables && globalTheme.siteVariables.theme)
+        ? globalTheme
+        : ThemeUtility_1.themes.teamsTheme;
+    return (React.createElement(react_northstar_1.Provider, { theme: (0, react_northstar_1.mergeThemes)(mainTheme, (0, react_northstar_1.mergeThemes)(ThemeUtility_1.teamsNextVariableAssignments, getLocalTheme(globalTheme.siteVariables.theme))), styles: { background: "transparent" } }, children));
+};
+exports.ToolbarTheme = ToolbarTheme;
+//# sourceMappingURL=ToolbarTheme.js.map

package/lib-commonjs/controls/toolbar/ToolbarTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTheme.js","sourceRoot":"","sources":["../../../src/controls/toolbar/ToolbarTheme.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/controls/toolbar/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Toolbar"), exports);
+tslib_1.__exportStar(require("../../common/model/TAction"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/controls/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/controls/toolbar/index.ts"],"names":[],"mappings":";;;AAAA,oDAA0B;AAE1B,qEAA2C"}

package/lib-commonjs/controls/toolbar/toolbar.css

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+.extended-toolbar__filters-menu .ui-tree__title__selection-indicator {
+  /* ⚠️ `selectionIndicator` does not apply `styles` prop provided */
+  flex: 0 0 auto;
+  -webkit-flex: 0 0 auto;
+}
+
+.extended-toolbar .ui-toolbar__menu {
+  /* ⚠️ `overflowItem` does not apply `offset` prop provided */
+  top: 0.25rem !important;
+}
+
+.extended-toolbar .extended-toolbar__filters-invoker:focus::before,
+.extended-toolbar .extended-toolbar__filters-invoker:focus::after,
+.extended-toolbar .extended-toolbar__find-invoker:focus::before,
+.extended-toolbar .extended-toolbar__find-invoker:focus::after,
+.extended-toolbar .extended-toolbar__find-cancel:focus::before,
+.extended-toolbar .extended-toolbar__find-cancel:focus::after,
+.extended-toolbar .ui-toolbar__item:focus::before,
+.extended-toolbar .ui-toolbar__item:focus::after {
+  /* ⚠️ these rules are not ultimately applied when provided in `styles` prop */
+  top: calc(0.5rem - 1px) !important;
+  bottom: calc(0.5rem - 1px) !important;
+}