@pnp/spfx-controls-react 3.24.0-beta.2252413 → 3.24.0-beta.2252438

package/CHANGELOG.json

@@ -3,7 +3,9 @@
     {
       "version": "3.24.0",
       "changes": {
-        "new": [],
+        "new": [
+          "`KPIControl`: new control `KPIControl` [#2084](https://github.com/pnp/sp-dev-fx-controls-react/pull/2084)"
+        ],
         "enhancements": [],
         "fixes":[
           "`PeoplePicker`: Improving documentation page about external users search [#323](https://github.com/pnp/sp-dev-fx-controls-react/issues/323)",
@@ -12,6 +14,7 @@
       },
       "contributions": [
         "[Antanina Druzhkina](https://github.com/Ateina)",
+        "[joaojmendes](https://github.com/joaojmendes)",
         "[Michaël Maillot](https://github.com/michaelmaillot)",
         "[Nishkalank Bezawada](https://github.com/NishkalankBezawada)"
       ]

package/CHANGELOG.md

@@ -1,28 +1,19 @@
 # Releases
- 
 
 ## 3.24.0
 
+### New control(s)
+
+- `KPIControl`: new control `KPIControl` [#2084](https://github.com/pnp/sp-dev-fx-controls-react/pull/2084)
+
 ### Fixes
 
 - `PeoplePicker`: Improving documentation page about external users search [#323](https://github.com/pnp/sp-dev-fx-controls-react/issues/323)
 - `FolderExplorer`: Updated Folder explorer control documentation to correct a typo. [#2072](https://github.com/pnp/sp-dev-fx-controls-react/pull/2072)
-- `ListItemComments`: Multiline comment doesn't display correctly in ListItemComments control due to missing line break [2078](https://github.com/pnp/sp-dev-fx-controls-react/issues/2078)
-- `ImagePicker`: Imagepicker strings fix [2077](https://github.com/pnp/sp-dev-fx-controls-react/pull/2077)
-- `TreeView`: TreeView Item - pass through imageProps of iconProps to TreeItem   [#2074](https://github.com/pnp/sp-dev-fx-controls-react/issues/2074)
-
-### Enhancements
-
-- `ListItemAttachments`: Add render options for ListItemAttachments [2081](https://github.com/pnp/sp-dev-fx-controls-react/pull/2081)
-
-### New Control(s)
-
-- `GroupPicker`: New GroupPicker Control - select one or multiple M365 Groups [2085](https://github.com/pnp/sp-dev-fx-controls-react/pull/2085)
 
 ### Contributors
 
-Special thanks to our contributors (in alphabetical order): [Antanina Druzhkina](https://github.com/Ateina), [Michaël Maillot](https://github.com/michaelmaillot), [Nishkalank Bezawada](https://github.com/NishkalankBezawada).
-Special thanks to our contributors (in alphabetical order): [Antanina Druzhkina](https://github.com/Ateina),[wuxiaojun514](https://github.com/wuxiaojun514),[Paul Schaeflein](https://github.com/pschaeflein).
+Special thanks to our contributors (in alphabetical order): [Antanina Druzhkina](https://github.com/Ateina), [joaojmendes](https://github.com/joaojmendes), [Michaël Maillot](https://github.com/michaelmaillot), [Nishkalank Bezawada](https://github.com/NishkalankBezawada).
 
 ## 3.23.0
 

package/lib/common/telemetry/version.js

@@ -1,2 +1,2 @@
-export var version = "3.24.0-beta.2252413";
+export var version = "3.24.0-beta.2252438";
 //# sourceMappingURL=version.js.map

package/lib/controls/ListToolbar/FlatItem.d.ts

@@ -0,0 +1,7 @@
+import { IToolbarItem } from './IToolbarItem';
+export interface FlatItem {
+    type: 'item' | 'divider';
+    item?: IToolbarItem;
+    key: string;
+}
+//# sourceMappingURL=FlatItem.d.ts.map

package/lib/controls/ListToolbar/FlatItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlatItem.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/FlatItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;CACb"}

package/lib/controls/ListToolbar/FlatItem.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FlatItem.js.map

package/lib/controls/ListToolbar/FlatItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlatItem.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/FlatItem.ts"],"names":[],"mappings":""}

package/lib/controls/ListToolbar/IListToolbarProps.d.ts

@@ -0,0 +1,27 @@
+import { BaseComponentContext } from "@microsoft/sp-component-base";
+import { IToolbarItem } from "./IToolbarItem";
+import { Theme } from "@fluentui/react";
+/**
+ * Props for the ListToolbar component
+ */
+export interface IListToolbarProps {
+    /** Array of toolbar items */
+    items: IToolbarItem[];
+    /** Far items that appear on the right side of the toolbar */
+    farItems?: IToolbarItem[];
+    /** Whether the toolbar is in a loading state */
+    isLoading?: boolean;
+    /** Aria label for the toolbar */
+    ariaLabel?: string;
+    /** Total count to display (optional) */
+    totalCount?: number;
+    /** Custom class name */
+    className?: string;
+    /** Whether to show dividers between groups */
+    showGroupDividers?: boolean;
+    /** Theme for the toolbar */
+    theme?: Theme;
+    /** Context for the web part */
+    context?: BaseComponentContext;
+}
+//# sourceMappingURL=IListToolbarProps.d.ts.map

package/lib/controls/ListToolbar/IListToolbarProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IListToolbarProps.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IListToolbarProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC;;GAEG;AAEH,MAAM,WAAW,iBAAiB;IAC9B,6BAA6B;IAC7B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+BAA+B;IAC/B,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAClC"}

package/lib/controls/ListToolbar/IListToolbarProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IListToolbarProps.js.map

package/lib/controls/ListToolbar/IListToolbarProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IListToolbarProps.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IListToolbarProps.tsx"],"names":[],"mappings":""}

package/lib/controls/ListToolbar/IToolbarItem.d.ts

@@ -0,0 +1,36 @@
+import { ToolbarButtonProps } from "@fluentui/react-components";
+import * as React from "react";
+/**
+ * Extended toolbar item interface
+ */
+export interface IToolbarItem {
+    /** Unique key for the item */
+    key: string;
+    /** Label text for the button */
+    label?: string;
+    /** Tooltip content */
+    tooltip?: string;
+    /** Icon element */
+    icon?: React.ReactElement;
+    /** Click handler */
+    onClick?: () => void;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Whether to show the item */
+    visible?: boolean;
+    /** Group name - items with the same group will be grouped together */
+    group?: string;
+    /** Whether this is a far item (appears on the right side) */
+    isFarItem?: boolean;
+    /** Button appearance */
+    appearance?: ToolbarButtonProps["appearance"];
+    /** Custom render function for complete control */
+    onRender?: () => React.ReactElement;
+    /** Whether to add a divider after this item */
+    dividerAfter?: boolean;
+    /** Whether to add a divider before this item */
+    dividerBefore?: boolean;
+    /** Aria label override */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=IToolbarItem.d.ts.map

package/lib/controls/ListToolbar/IToolbarItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IToolbarItem.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IToolbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AAEH,MAAM,WAAW,YAAY;IACzB,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,KAAK,CAAC,YAAY,CAAC;IACpC,+CAA+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/lib/controls/ListToolbar/IToolbarItem.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IToolbarItem.js.map

package/lib/controls/ListToolbar/IToolbarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IToolbarItem.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IToolbarItem.tsx"],"names":[],"mappings":""}

package/lib/controls/ListToolbar/IToolbarItemRendererProps.d.ts

@@ -0,0 +1,12 @@
+import { IToolbarItem } from './IToolbarItem';
+export interface IToolbarItemRendererProps {
+    /** The toolbar item to render */
+    item: IToolbarItem;
+    /** Whether the toolbar is in a loading state */
+    isLoading?: boolean;
+    /** CSS class applied to the button root */
+    itemClass?: string;
+    /** CSS class applied to the label text (e.g. to hide on mobile) */
+    labelClass?: string;
+}
+//# sourceMappingURL=IToolbarItemRendererProps.d.ts.map

package/lib/controls/ListToolbar/IToolbarItemRendererProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IToolbarItemRendererProps.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IToolbarItemRendererProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,yBAAyB;IACxC,iCAAiC;IACjC,IAAI,EAAE,YAAY,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/lib/controls/ListToolbar/IToolbarItemRendererProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IToolbarItemRendererProps.js.map

package/lib/controls/ListToolbar/IToolbarItemRendererProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IToolbarItemRendererProps.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IToolbarItemRendererProps.tsx"],"names":[],"mappings":""}

package/lib/controls/ListToolbar/ListToolbar.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { IListToolbarProps } from "./IListToolbarProps";
+export declare const ListToolbar: React.FunctionComponent<IListToolbarProps>;
+//# sourceMappingURL=ListToolbar.d.ts.map

package/lib/controls/ListToolbar/ListToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAuDlE,CAAC"}

package/lib/controls/ListToolbar/ListToolbar.js

@@ -0,0 +1,119 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import * as React from "react";
+import { Provider } from "jotai";
+import { has } from "lodash";
+import { FluentProvider, IdPrefixProvider, teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, } from "@fluentui/react-components";
+import { createV9Theme } from "@fluentui/react-migration-v8-v9";
+import { useTheme } from "@fluentui/react-theme-provider";
+import ListToolbarControl from "./ListToolbarControl";
+export var ListToolbar = function (props) {
+    var themeV8 = props.theme, context = props.context;
+    var _a = React.useState(), theme = _a[0], setTheme = _a[1];
+    var currentSPTheme = useTheme();
+    var _b = React.useState(false), isInitialized = _b[0], setIsInitialized = _b[1];
+    React.useEffect(function () {
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var teamsContext, teamsTheme, error_1;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 4, , 5]);
+                        if (!has(context, "sdks.microsoftTeams.teamsJs.app.getContext")) return [3 /*break*/, 2];
+                        return [4 /*yield*/, ((_a = context.sdks.microsoftTeams) === null || _a === void 0 ? void 0 : _a.teamsJs.app.getContext())];
+                    case 1:
+                        teamsContext = _b.sent();
+                        teamsTheme = teamsContext.app.theme || "default";
+                        switch (teamsTheme) {
+                            case "dark":
+                                setTheme(teamsDarkTheme);
+                                break;
+                            case "contrast":
+                                setTheme(teamsHighContrastTheme);
+                                break;
+                            case "default":
+                                setTheme(teamsLightTheme);
+                                break;
+                            default:
+                                setTheme(teamsLightTheme);
+                                break;
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        if (themeV8 || currentSPTheme) {
+                            setTheme(createV9Theme(themeV8 !== null && themeV8 !== void 0 ? themeV8 : currentSPTheme));
+                        }
+                        else {
+                            setTheme(teamsLightTheme);
+                        }
+                        _b.label = 3;
+                    case 3: return [3 /*break*/, 5];
+                    case 4:
+                        error_1 = _b.sent();
+                        console.warn("ListToolbar: Failed to resolve theme, using default", error_1);
+                        setTheme(teamsLightTheme);
+                        return [3 /*break*/, 5];
+                    case 5:
+                        setIsInitialized(true);
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [context, currentSPTheme, themeV8]);
+    if (!isInitialized)
+        return React.createElement(React.Fragment, null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IdPrefixProvider, { value: "userPicker-" },
+            React.createElement(FluentProvider, { theme: theme },
+                React.createElement(Provider, null,
+                    React.createElement(ListToolbarControl, __assign({}, props)))))));
+};
+//# sourceMappingURL=ListToolbar.js.map

package/lib/controls/ListToolbar/ListToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAA4D;AAC5D,sDAAsD;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,sBAAsB,EACtB,eAAe,GAEhB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK1D,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,IAAM,WAAW,GAA+C,UACrE,KAAmD;IAE3C,IAAO,OAAO,GAAc,KAAK,MAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IACpC,IAAA,KAAoB,KAAK,CAAC,QAAQ,EAAS,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAC;IAClD,IAAM,cAAc,GAAG,QAAQ,EAAE,CAAC;IAC5B,IAAA,KAAoC,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,EAAjE,aAAa,QAAA,EAAE,gBAAgB,QAAkC,CAAC;IAGzE,KAAK,CAAC,SAAS,CAAC;QACd,CAAC;;;;;;;6BAEO,GAAG,CAAC,OAAO,EAAE,4CAA4C,CAAC,EAA1D,wBAA0D;wBACvC,qBAAM,CAAA,MAAC,OAA0B,CAAC,IAAI,CAAC,cAAc,0CAAE,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,CAAA,EAAA;;wBAA9F,YAAY,GAAG,SAA+E;wBAC9F,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,IAAI,SAAS,CAAC;wBACvD,QAAQ,UAAU,EAAE,CAAC;4BACnB,KAAK,MAAM;gCACT,QAAQ,CAAC,cAAc,CAAC,CAAC;gCACzB,MAAM;4BACR,KAAK,UAAU;gCACb,QAAQ,CAAC,sBAAsB,CAAC,CAAC;gCACjC,MAAM;4BACR,KAAK,SAAS;gCACZ,QAAQ,CAAC,eAAe,CAAC,CAAC;gCAC1B,MAAM;4BACR;gCACE,QAAQ,CAAC,eAAe,CAAC,CAAC;gCAC1B,MAAM;wBACV,CAAC;;;wBACI,IAAI,OAAO,IAAI,cAAc,EAAE,CAAC;4BACrC,QAAQ,CAAC,aAAa,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,cAAc,CAAC,CAAC,CAAC;wBACrD,CAAC;6BAAM,CAAC;4BACN,QAAQ,CAAC,eAAe,CAAC,CAAC;wBAC5B,CAAC;;;;;wBAED,OAAO,CAAC,IAAI,CAAC,qDAAqD,EAAE,OAAK,CAAC,CAAC;wBAC3E,QAAQ,CAAC,eAAe,CAAC,CAAC;;;wBAE5B,gBAAgB,CAAC,IAAI,CAAC,CAAC;;;;aACxB,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvC,IAAI,CAAC,aAAa;QAAE,OAAO,yCAAK,CAAC;IAEjC,OAAO,CACL;QACE,oBAAC,gBAAgB,IAAC,KAAK,EAAC,aAAa;YACrC,oBAAC,cAAc,IAAC,KAAK,EAAE,KAAK;gBAC1B,oBAAC,QAAQ;oBACP,oBAAC,kBAAkB,eAAK,KAAK,EAAI,CACxB,CACI,CACE,CAClB,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/ListToolbar/ListToolbarControl.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { IListToolbarProps } from './IListToolbarProps';
+export declare const ListToolbar: React.FunctionComponent<IListToolbarProps>;
+export default ListToolbar;
+//# sourceMappingURL=ListToolbarControl.d.ts.map

package/lib/controls/ListToolbar/ListToolbarControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbarControl.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/ListToolbarControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AASxD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAuMlE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/controls/ListToolbar/ListToolbarControl.js

@@ -0,0 +1,101 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import { ToolbarButton, ToolbarDivider, Tooltip, Badge, Text, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, } from '@fluentui/react-components';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
+import { useListToolbarStyles } from './useListToolbarStyles';
+import { useOverflowIndex } from './useOverflowIndex';
+import { ToolbarItemRenderer } from './ToolbarItemRenderer';
+import { groupItems, flattenWithDividers } from './helpers';
+/* ------------------------------------------------------------------ */
+/*  ListToolbar — main component                                      */
+/* ------------------------------------------------------------------ */
+export var ListToolbar = function (_a) {
+    var items = _a.items, _b = _a.farItems, farItems = _b === void 0 ? [] : _b, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, _d = _a.ariaLabel, ariaLabel = _d === void 0 ? 'Toolbar' : _d, totalCount = _a.totalCount, className = _a.className, _e = _a.showGroupDividers, showGroupDividers = _e === void 0 ? true : _e;
+    var styles = useListToolbarStyles();
+    var toolbarRef = React.useRef(null);
+    var leftRef = React.useRef(null);
+    var rightRef = React.useRef(null);
+    var measureRef = React.useRef(null);
+    // ---- Separate regular vs far items ----
+    var regularItems = React.useMemo(function () { return items.filter(function (i) { return !i.isFarItem && i.visible !== false; }); }, [items]);
+    var allFarItems = React.useMemo(function () {
+        var fromItems = items.filter(function (i) { return i.isFarItem && i.visible !== false; });
+        var fromFar = farItems.filter(function (i) { return i.visible !== false; });
+        return __spreadArray(__spreadArray([], fromItems, true), fromFar, true);
+    }, [items, farItems]);
+    var groupedFarItems = React.useMemo(function () { return groupItems(allFarItems); }, [allFarItems]);
+    // ---- Build flat list of regular items (items + dividers) ----
+    var flatItems = React.useMemo(function () { return flattenWithDividers(regularItems, showGroupDividers); }, [regularItems, showGroupDividers]);
+    // ---- Custom overflow detection ----
+    var overflowIndex = useOverflowIndex(toolbarRef, rightRef, measureRef, flatItems.length);
+    // Determine which actual items (not dividers) are hidden
+    var visibleItemKeys = React.useMemo(function () {
+        var keys = new Set();
+        for (var i = 0; i < overflowIndex && i < flatItems.length; i++) {
+            if (flatItems[i].type === 'item') {
+                keys.add(flatItems[i].key);
+            }
+        }
+        return keys;
+    }, [flatItems, overflowIndex]);
+    var hiddenItems = React.useMemo(function () { return regularItems.filter(function (item) { return !visibleItemKeys.has(item.key); }); }, [regularItems, visibleItemKeys]);
+    var hasOverflow = hiddenItems.length > 0;
+    // ---- Render far items ----
+    var renderFarGroup = function (groupItemsList, groupIndex, isLastGroup) {
+        var elements = [];
+        for (var _i = 0, groupItemsList_1 = groupItemsList; _i < groupItemsList_1.length; _i++) {
+            var item = groupItemsList_1[_i];
+            if (item.dividerBefore) {
+                elements.push(React.createElement(ToolbarDivider, { key: "".concat(item.key, "-divider-before") }));
+            }
+            elements.push(React.createElement(ToolbarItemRenderer, { key: item.key, item: item, isLoading: isLoading, itemClass: styles.farItemButton, labelClass: styles.farItemLabel }));
+            if (item.dividerAfter) {
+                elements.push(React.createElement(ToolbarDivider, { key: "".concat(item.key, "-divider-after") }));
+            }
+        }
+        if (showGroupDividers && !isLastGroup) {
+            elements.push(React.createElement(ToolbarDivider, { key: "group-divider-".concat(groupIndex) }));
+        }
+        return elements;
+    };
+    return (React.createElement("div", { ref: toolbarRef, role: "toolbar", "aria-label": ariaLabel, className: "".concat(styles.toolbar, " ").concat(className || '') },
+        React.createElement("div", { ref: measureRef, className: styles.measureSection, "aria-hidden": "true" }, flatItems.map(function (flat) {
+            if (flat.type === 'divider') {
+                return React.createElement(ToolbarDivider, { key: flat.key });
+            }
+            return (React.createElement(ToolbarItemRenderer, { key: flat.key, item: flat.item, isLoading: isLoading, itemClass: styles.toolbarItem }));
+        })),
+        React.createElement("div", { ref: leftRef, className: styles.leftSection },
+            flatItems.map(function (flat, idx) {
+                if (idx >= overflowIndex)
+                    return null;
+                if (flat.type === 'divider') {
+                    return React.createElement(ToolbarDivider, { key: flat.key });
+                }
+                return (React.createElement(ToolbarItemRenderer, { key: flat.key, item: flat.item, isLoading: isLoading, itemClass: styles.toolbarItem }));
+            }),
+            hasOverflow && (React.createElement(Menu, null,
+                React.createElement(MenuTrigger, { disableButtonEnhancement: true },
+                    React.createElement(Tooltip, { content: "".concat(hiddenItems.length, " more actions"), relationship: "label" },
+                        React.createElement(ToolbarButton, { className: styles.overflowButton, icon: React.createElement(MoreHorizontalRegular, null), "aria-label": "".concat(hiddenItems.length, " more actions") }))),
+                React.createElement(MenuPopover, null,
+                    React.createElement(MenuList, null, hiddenItems.map(function (item) { return (React.createElement(MenuItem, { key: item.key, icon: item.icon, disabled: item.disabled || isLoading, onClick: item.onClick }, item.label || item.tooltip || item.key)); }))))),
+            totalCount !== undefined && totalCount > 0 && (React.createElement(Badge, { appearance: "filled", color: "informative", className: styles.countBadge },
+                React.createElement(Text, { size: 200 },
+                    totalCount,
+                    " items")))),
+        React.createElement("div", { ref: rightRef, className: styles.rightGroup }, allFarItems.length > 0 && (React.createElement("div", { className: styles.farItemsContainer }, Array.from(groupedFarItems.entries()).map(function (_a, groupIndex) {
+            var _groupName = _a[0], groupItemsList = _a[1];
+            return renderFarGroup(groupItemsList, groupIndex, groupIndex === groupedFarItems.size - 1);
+        }))))));
+};
+export default ListToolbar;
+//# sourceMappingURL=ListToolbarControl.js.map

package/lib/controls/ListToolbar/ListToolbarControl.js.map

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

package/lib/controls/ListToolbar/README.md

@@ -0,0 +1,410 @@
+# ListToolbar
+
+A flexible toolbar component for building list and data grid command bars with support for grouping, far items, and custom rendering.
+
+## Description
+
+The `ListToolbar` component provides a powerful and flexible toolbar built with Fluent UI 9 components. It supports item grouping, left/right aligned items, dividers, tooltips, automatic overflow menu, responsive design, loading states, and custom rendering - making it ideal for list views, data grids, and any interface that needs a command bar.
+
+## Features
+
+- ✅ Left and right (far) item alignment
+- ✅ Item grouping with automatic dividers
+- ✅ Individual item dividers (before/after)
+- ✅ Tooltip support
+- ✅ Loading state with disabled items
+- ✅ Custom item rendering
+- ✅ Total count badge display
+- ✅ Visibility control per item
+- ✅ Accessibility support with aria labels
+- ✅ Overflow menu — left items collapse into a "..." menu when space is limited
+- ✅ Responsive design — far item labels auto-hide on small screens
+- ✅ SharePoint & Teams theme support via `theme` and `context` props
+- ✅ Fluent UI 9 theming with automatic Teams dark/high-contrast detection
+
+## Installation
+
+```tsx
+import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+import type { IListToolbarProps, IToolbarItem } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+```
+
+## Props
+
+### IListToolbarProps
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `items` | `IToolbarItem[]` | Yes | - | Array of toolbar items |
+| `farItems` | `IToolbarItem[]` | No | `[]` | Items on the right side |
+| `isLoading` | `boolean` | No | `false` | Loading state (disables items) |
+| `ariaLabel` | `string` | No | `'Toolbar'` | Accessibility label |
+| `totalCount` | `number` | No | - | Display item count badge |
+| `className` | `string` | No | - | Additional CSS class |
+| `showGroupDividers` | `boolean` | No | `true` | Show dividers between groups |
+| `theme` | `Theme` | No | - | Fluent UI v8 theme (auto-converted to v9) |
+| `context` | `BaseComponentContext` | No | - | SPFx component context (enables Teams theme detection) |
+
+### IToolbarItem
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `key` | `string` | Yes | - | Unique identifier |
+| `label` | `string` | No | - | Button text |
+| `tooltip` | `string` | No | - | Tooltip content |
+| `icon` | `ReactElement` | No | - | Icon element |
+| `onClick` | `() => void` | No | - | Click handler |
+| `disabled` | `boolean` | No | `false` | Disable the item |
+| `visible` | `boolean` | No | `true` | Show/hide the item |
+| `group` | `string` | No | `'default'` | Group name for grouping |
+| `isFarItem` | `boolean` | No | `false` | Place on right side |
+| `appearance` | `ToolbarButtonProps['appearance']` | No | - | Button appearance |
+| `onRender` | `() => ReactElement` | No | - | Custom render function |
+| `dividerAfter` | `boolean` | No | `false` | Add divider after item |
+| `dividerBefore` | `boolean` | No | `false` | Add divider before item |
+| `ariaLabel` | `string` | No | - | Accessibility label override |
+
+## Usage Examples
+
+### Basic Toolbar
+
+```tsx
+import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+import { AddRegular, EditRegular, DeleteRegular } from '@fluentui/react-icons';
+
+const BasicToolbar = () => {
+  const items = [
+    { 
+      key: 'new', 
+      label: 'New', 
+      icon: <AddRegular />, 
+      onClick: () => console.log('New clicked') 
+    },
+    { 
+      key: 'edit', 
+      label: 'Edit', 
+      icon: <EditRegular />, 
+      onClick: () => console.log('Edit clicked') 
+    },
+    { 
+      key: 'delete', 
+      label: 'Delete', 
+      icon: <DeleteRegular />, 
+      onClick: () => console.log('Delete clicked') 
+    },
+  ];
+
+  return <ListToolbar items={items} />;
+};
+```
+
+### With Far Items
+
+```tsx
+import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+import { 
+  AddRegular, 
+  FilterRegular, 
+  ArrowSortRegular,
+  SettingsRegular 
+} from '@fluentui/react-icons';
+
+const ToolbarWithFarItems = () => {
+  const items = [
+    { key: 'new', label: 'New Item', icon: <AddRegular />, onClick: () => {} },
+  ];
+
+  const farItems = [
+    { key: 'filter', label: 'Filter', icon: <FilterRegular />, onClick: () => {} },
+    { key: 'sort', label: 'Sort', icon: <ArrowSortRegular />, onClick: () => {} },
+    { key: 'settings', icon: <SettingsRegular />, tooltip: 'Settings', onClick: () => {} },
+  ];
+
+  return <ListToolbar items={items} farItems={farItems} />;
+};
+```
+
+### With Grouping
+
+```tsx
+import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+import { 
+  AddRegular, 
+  EditRegular, 
+  CopyRegular,
+  CutRegular,
+  ClipboardPasteRegular,
+  DeleteRegular 
+} from '@fluentui/react-icons';
+
+const GroupedToolbar = () => {
+  const items = [
+    // File operations group
+    { key: 'new', label: 'New', icon: <AddRegular />, group: 'file', onClick: () => {} },
+    { key: 'edit', label: 'Edit', icon: <EditRegular />, group: 'file', onClick: () => {} },
+    
+    // Clipboard group
+    { key: 'copy', label: 'Copy', icon: <CopyRegular />, group: 'clipboard', onClick: () => {} },
+    { key: 'cut', label: 'Cut', icon: <CutRegular />, group: 'clipboard', onClick: () => {} },
+    { key: 'paste', label: 'Paste', icon: <ClipboardPasteRegular />, group: 'clipboard', onClick: () => {} },
+    
+    // Danger group
+    { key: 'delete', label: 'Delete', icon: <DeleteRegular />, group: 'danger', onClick: () => {} },
+  ];
+
+  return <ListToolbar items={items} showGroupDividers={true} />;
+};
+```
+
+### With Total Count
+
+```tsx
+import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+import { AddRegular, ArrowSyncRegular } from '@fluentui/react-icons';
+
+const ToolbarWithCount = ({ items, totalCount }) => {
+  const toolbarItems = [
+    { key: 'new', label: 'New', icon: <AddRegular />, onClick: () => {} },
+    { key: 'refresh', label: 'Refresh', icon: <ArrowSyncRegular />, onClick: () => {} },
+  ];
+
+  return (
+    <ListToolbar 
+      items={toolbarItems} 
+      totalCount={totalCount}
+    />
+  );
+};
+```
+
+### Loading State
+
+```tsx
+import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+import { AddRegular, DeleteRegular } from '@fluentui/react-icons';
+import { useState } from 'react';
+
+const LoadingToolbar = () => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleAction = async () => {
+    setIsLoading(true);
+    await performAction();
+    setIsLoading(false);
+  };
+
+  const items = [
+    { key: 'new', label: 'New', icon: <AddRegular />, onClick: handleAction },
+    { key: 'delete', label: 'Delete', icon: <DeleteRegular />, onClick: handleAction },
+  ];
+
+  return <ListToolbar items={items} isLoading={isLoading} />;
+};
+```
+
+### Conditional Visibility
+
+```tsx
+import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+import { EditRegular, DeleteRegular, ShareRegular } from '@fluentui/react-icons';
+
+const ConditionalToolbar = ({ selectedItems, canEdit, canDelete }) => {
+  const items = [
+    { 
+      key: 'edit', 
+      label: 'Edit', 
+      icon: <EditRegular />, 
+      visible: selectedItems.length === 1 && canEdit,
+      onClick: () => {} 
+    },
+    { 
+      key: 'delete', 
+      label: 'Delete', 
+      icon: <DeleteRegular />, 
+      visible: selectedItems.length > 0 && canDelete,
+      onClick: () => {} 
+    },
+    { 
+      key: 'share', 
+      label: 'Share', 
+      icon: <ShareRegular />, 
+      visible: selectedItems.length > 0,
+      onClick: () => {} 
+    },
+  ];
+
+  return <ListToolbar items={items} />;
+};
+```
+
+### With Custom Rendering
+
+```tsx
+import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+import { SearchBox, Dropdown, Option } from '@fluentui/react-components';
+import { AddRegular } from '@fluentui/react-icons';
+
+const CustomRenderToolbar = ({ onSearch, onFilterChange }) => {
+  const items = [
+    { key: 'new', label: 'New', icon: <AddRegular />, onClick: () => {} },
+  ];
+
+  const farItems = [
+    {
+      key: 'filter',
+      onRender: () => (
+        <Dropdown placeholder="Filter by status" onOptionSelect={onFilterChange}>
+          <Option value="all">All</Option>
+          <Option value="active">Active</Option>
+          <Option value="completed">Completed</Option>
+        </Dropdown>
+      ),
+    },
+    {
+      key: 'search',
+      onRender: () => (
+        <SearchBox 
+          placeholder="Search..." 
+          onChange={(e, data) => onSearch(data.value)}
+        />
+      ),
+    },
+  ];
+
+  return <ListToolbar items={items} farItems={farItems} />;
+};
+```
+
+### Document Library Toolbar
+
+```tsx
+import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+import { 
+  AddRegular, 
+  ArrowUploadRegular,
+  FolderAddRegular,
+  EditRegular,
+  DeleteRegular,
+  ShareRegular,
+  DownloadRegular,
+  GridRegular,
+  ListRegular
+} from '@fluentui/react-icons';
+
+const DocumentLibraryToolbar = ({ selectedCount, onViewChange, view }) => {
+  const items = [
+    { key: 'new', label: 'New', icon: <AddRegular />, group: 'create', onClick: () => {} },
+    { key: 'upload', label: 'Upload', icon: <ArrowUploadRegular />, group: 'create', onClick: () => {} },
+    { key: 'newFolder', label: 'New Folder', icon: <FolderAddRegular />, group: 'create', onClick: () => {} },
+    
+    // Context-sensitive items
+    { key: 'edit', label: 'Edit', icon: <EditRegular />, group: 'actions', visible: selectedCount === 1, onClick: () => {} },
+    { key: 'share', label: 'Share', icon: <ShareRegular />, group: 'actions', visible: selectedCount > 0, onClick: () => {} },
+    { key: 'download', label: 'Download', icon: <DownloadRegular />, group: 'actions', visible: selectedCount > 0, onClick: () => {} },
+    { key: 'delete', label: 'Delete', icon: <DeleteRegular />, group: 'danger', visible: selectedCount > 0, dividerBefore: true, onClick: () => {} },
+  ];
+
+  const farItems = [
+    { 
+      key: 'gridView', 
+      icon: <GridRegular />, 
+      tooltip: 'Grid view',
+      appearance: view === 'grid' ? 'primary' : undefined,
+      onClick: () => onViewChange('grid') 
+    },
+    { 
+      key: 'listView', 
+      icon: <ListRegular />, 
+      tooltip: 'List view',
+      appearance: view === 'list' ? 'primary' : undefined,
+      onClick: () => onViewChange('list') 
+    },
+  ];
+
+  return (
+    <ListToolbar 
+      items={items} 
+      farItems={farItems}
+      totalCount={selectedCount > 0 ? selectedCount : undefined}
+      ariaLabel="Document library toolbar"
+    />
+  );
+};
+```
+
+### With Dividers
+
+```tsx
+import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+import { 
+  SaveRegular, 
+  ArrowUndoRegular, 
+  ArrowRedoRegular,
+  TextBoldRegular,
+  TextItalicRegular,
+  TextUnderlineRegular
+} from '@fluentui/react-icons';
+
+const EditorToolbar = () => {
+  const items = [
+    { key: 'save', icon: <SaveRegular />, tooltip: 'Save', onClick: () => {}, dividerAfter: true },
+    { key: 'undo', icon: <ArrowUndoRegular />, tooltip: 'Undo', onClick: () => {} },
+    { key: 'redo', icon: <ArrowRedoRegular />, tooltip: 'Redo', onClick: () => {}, dividerAfter: true },
+    { key: 'bold', icon: <TextBoldRegular />, tooltip: 'Bold', onClick: () => {} },
+    { key: 'italic', icon: <TextItalicRegular />, tooltip: 'Italic', onClick: () => {} },
+    { key: 'underline', icon: <TextUnderlineRegular />, tooltip: 'Underline', onClick: () => {} },
+  ];
+
+  return <ListToolbar items={items} showGroupDividers={false} />;
+};
+```
+
+### SPFx Web Part Integration
+
+When used inside a SharePoint Framework web part, pass `context` and `theme` to enable automatic theming (including Teams dark and high-contrast modes):
+
+```tsx
+import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
+import { AddRegular, EditRegular } from '@fluentui/react-icons';
+import { BaseComponentContext } from '@microsoft/sp-component-base';
+
+interface IMyWebPartProps {
+  context: BaseComponentContext;
+}
+
+const MyWebPartToolbar: React.FC<IMyWebPartProps> = ({ context }) => {
+  const items = [
+    { key: 'new', label: 'New', icon: <AddRegular />, onClick: () => {} },
+    { key: 'edit', label: 'Edit', icon: <EditRegular />, onClick: () => {} },
+  ];
+
+  return (
+    <ListToolbar
+      items={items}
+      context={context}
+      ariaLabel="My web part toolbar"
+    />
+  );
+};
+```
+
+> **Note:** When running inside Microsoft Teams, the component automatically detects the Teams theme (default, dark, high-contrast) and applies the matching Fluent UI 9 theme. In SharePoint, it converts the current v8 theme to a v9 theme using `createV9Theme`.
+
+## Notes
+
+- Items with the same `group` value are grouped together
+- Use `isFarItem: true` or the `farItems` prop for right-aligned items
+- `visible: false` completely hides an item from the toolbar
+- `disabled: true` or `isLoading: true` disables item interaction
+- Use `onRender` for complete control over item rendering
+- Tooltips are automatically applied when `tooltip` is provided
+- When space is limited, left-side items automatically collapse into a **"..." overflow menu**
+- Far item labels are **hidden on small screens** (< 768px), showing only icons
+- Pass `context` from your SPFx web part to enable **Teams theme detection**
+- The component wraps content in a `FluentProvider` — no need to add your own
+
+## Related Components
+
+- `ButtonMenu` - For dropdown menu buttons
+- `IconButton` - For icon-only buttons
+- `GenericOverflowMenu` - For overflow menus

package/lib/controls/ListToolbar/ToolbarItemRenderer.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IToolbarItemRendererProps } from './IToolbarItemRendererProps';
+/**
+ * Renders a single toolbar button with optional tooltip and label.
+ */
+export declare const ToolbarItemRenderer: React.FC<IToolbarItemRendererProps>;
+//# sourceMappingURL=ToolbarItemRenderer.d.ts.map

package/lib/controls/ListToolbar/ToolbarItemRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarItemRenderer.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/ToolbarItemRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAExE;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA8CnE,CAAC"}

package/lib/controls/ListToolbar/ToolbarItemRenderer.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ToolbarButton, Tooltip, } from '@fluentui/react-components';
+/**
+ * Renders a single toolbar button with optional tooltip and label.
+ */
+export var ToolbarItemRenderer = function (_a) {
+    var item = _a.item, isLoading = _a.isLoading, itemClass = _a.itemClass, labelClass = _a.labelClass;
+    if (item.visible === false)
+        return null;
+    if (item.onRender)
+        return item.onRender();
+    var labelContent = labelClass ? (React.createElement("span", { className: labelClass }, item.label)) : (item.label);
+    var button = item.label ? (React.createElement(ToolbarButton, { className: itemClass, "aria-label": item.ariaLabel || item.tooltip || item.label, icon: item.icon, onClick: item.onClick, disabled: item.disabled || isLoading, appearance: item.appearance }, labelContent)) : (React.createElement(ToolbarButton, { className: itemClass, "aria-label": item.ariaLabel || item.tooltip || item.key, icon: item.icon, onClick: item.onClick, disabled: item.disabled || isLoading, appearance: item.appearance }));
+    if (item.tooltip) {
+        return (React.createElement(Tooltip, { content: item.tooltip, relationship: "label" }, button));
+    }
+    return button;
+};
+//# sourceMappingURL=ToolbarItemRenderer.js.map

package/lib/controls/ListToolbar/ToolbarItemRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarItemRenderer.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/ToolbarItemRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,aAAa,EACb,OAAO,GACR,MAAM,4BAA4B,CAAC;AAGpC;;GAEG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAwC,UAAC,EAKxE;QAJC,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,SAAS,eAAA,EACT,UAAU,gBAAA;IAEV,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK;QAAE,OAAO,IAAI,CAAC;IACxC,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;IAE1C,IAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,CAChC,8BAAM,SAAS,EAAE,UAAU,IAAG,IAAI,CAAC,KAAK,CAAQ,CACjD,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,KAAK,CACX,CAAC;IAEF,IAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAC1B,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,gBACR,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,EACxD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,UAAU,EAAE,IAAI,CAAC,UAAU,IAE1B,YAAY,CACC,CACjB,CAAC,CAAC,CAAC,CACF,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,gBACR,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,EACtD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,UAAU,EAAE,IAAI,CAAC,UAAU,GAC3B,CACH,CAAC;IAEF,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,YAAY,EAAC,OAAO,IACjD,MAAM,CACC,CACX,CAAC;IACJ,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/lib/controls/ListToolbar/helpers.d.ts

@@ -0,0 +1,5 @@
+import { FlatItem } from './FlatItem';
+import { IToolbarItem } from './IToolbarItem';
+export declare function groupItems(items: IToolbarItem[]): Map<string, IToolbarItem[]>;
+export declare function flattenWithDividers(items: IToolbarItem[], showGroupDividers: boolean): FlatItem[];
+//# sourceMappingURL=helpers.d.ts.map

package/lib/controls/ListToolbar/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C,wBAAgB,UAAU,CACxB,KAAK,EAAE,YAAY,EAAE,GACpB,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAY7B;AAMD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,YAAY,EAAE,EACrB,iBAAiB,EAAE,OAAO,GACzB,QAAQ,EAAE,CAyBZ"}

package/lib/controls/ListToolbar/helpers.js

@@ -0,0 +1,42 @@
+/* ------------------------------------------------------------------ */
+/*  groupItems — groups items by their `group` property               */
+/* ------------------------------------------------------------------ */
+export function groupItems(items) {
+    var groups = new Map();
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+        var item = items_1[_i];
+        var groupName = item.group || 'default';
+        if (!groups.has(groupName)) {
+            groups.set(groupName, []);
+        }
+        groups.get(groupName).push(item);
+    }
+    return groups;
+}
+/* ------------------------------------------------------------------ */
+/*  flattenWithDividers — builds a flat render-list from grouped items */
+/* ------------------------------------------------------------------ */
+export function flattenWithDividers(items, showGroupDividers) {
+    var result = [];
+    var grouped = groupItems(items);
+    var groupEntries = Array.from(grouped.entries());
+    for (var gi = 0; gi < groupEntries.length; gi++) {
+        var _a = groupEntries[gi], groupItemsList = _a[1];
+        var isLastGroup = gi === groupEntries.length - 1;
+        for (var _i = 0, groupItemsList_1 = groupItemsList; _i < groupItemsList_1.length; _i++) {
+            var item = groupItemsList_1[_i];
+            if (item.dividerBefore) {
+                result.push({ type: 'divider', key: "".concat(item.key, "-div-before") });
+            }
+            result.push({ type: 'item', item: item, key: item.key });
+            if (item.dividerAfter) {
+                result.push({ type: 'divider', key: "".concat(item.key, "-div-after") });
+            }
+        }
+        if (showGroupDividers && !isLastGroup) {
+            result.push({ type: 'divider', key: "group-div-".concat(gi) });
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=helpers.js.map

package/lib/controls/ListToolbar/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/helpers.ts"],"names":[],"mappings":"AAGA,wEAAwE;AACxE,wEAAwE;AACxE,wEAAwE;AAExE,MAAM,UAAU,UAAU,CACxB,KAAqB;IAErB,IAAM,MAAM,GAAG,IAAI,GAAG,EAA0B,CAAC;IAEjD,KAAmB,UAAK,EAAL,eAAK,EAAL,mBAAK,EAAL,IAAK,EAAE,CAAC;QAAtB,IAAM,IAAI,cAAA;QACb,IAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC;QAC1C,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,MAAM,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAC5B,CAAC;QACD,MAAM,CAAC,GAAG,CAAC,SAAS,CAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,wEAAwE;AACxE,yEAAyE;AACzE,wEAAwE;AAExE,MAAM,UAAU,mBAAmB,CACjC,KAAqB,EACrB,iBAA0B;IAE1B,IAAM,MAAM,GAAe,EAAE,CAAC;IAC9B,IAAM,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IAClC,IAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;IAEnD,KAAK,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,YAAY,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC;QAC1C,IAAA,KAAqB,YAAY,CAAC,EAAE,CAAC,EAAlC,cAAc,QAAoB,CAAC;QAC5C,IAAM,WAAW,GAAG,EAAE,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QAEnD,KAAmB,UAAc,EAAd,iCAAc,EAAd,4BAAc,EAAd,IAAc,EAAE,CAAC;YAA/B,IAAM,IAAI,uBAAA;YACb,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,UAAG,IAAI,CAAC,GAAG,gBAAa,EAAE,CAAC,CAAC;YAClE,CAAC;YACD,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,MAAA,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YACnD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gBACtB,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,UAAG,IAAI,CAAC,GAAG,eAAY,EAAE,CAAC,CAAC;YACjE,CAAC;QACH,CAAC;QAED,IAAI,iBAAiB,IAAI,CAAC,WAAW,EAAE,CAAC;YACtC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,oBAAa,EAAE,CAAE,EAAE,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/lib/controls/ListToolbar/index.d.ts

@@ -0,0 +1,4 @@
+export { ListToolbar } from "./ListToolbar";
+export type { IListToolbarProps } from "./IListToolbarProps";
+export type { IToolbarItem } from "./IToolbarItem";
+//# sourceMappingURL=index.d.ts.map

package/lib/controls/ListToolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/controls/ListToolbar/index.js

@@ -0,0 +1,2 @@
+export { ListToolbar } from "./ListToolbar";
+//# sourceMappingURL=index.js.map

package/lib/controls/ListToolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib/controls/ListToolbar/useListToolbarStyles.d.ts

@@ -0,0 +1,16 @@
+export interface IListToolbarStyles {
+    toolbar: string;
+    leftSection: string;
+    measureSection: string;
+    rightGroup: string;
+    farItemsContainer: string;
+    countBadge: string;
+    divider: string;
+    toolbarItem: string;
+    toolbarButtonBase: string;
+    overflowButton: string;
+    farItemButton: string;
+    farItemLabel: string;
+}
+export declare const useListToolbarStyles: () => IListToolbarStyles;
+//# sourceMappingURL=useListToolbarStyles.d.ts.map

package/lib/controls/ListToolbar/useListToolbarStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListToolbarStyles.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/useListToolbarStyles.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,QAAO,kBAwGvC,CAAC"}

package/lib/controls/ListToolbar/useListToolbarStyles.js

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from "@emotion/css";
+import { tokens } from "@fluentui/react-components";
+export var useListToolbarStyles = function () {
+    return {
+        /** Outer toolbar container */
+        toolbar: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex !important;\n      flex-wrap: nowrap !important;\n      align-items: center !important;\n      padding: ", " ", ";\n      background-color: ", ";\n      border-bottom: 1px solid ", ";\n      min-height: 48px;\n      gap: ", ";\n      white-space: nowrap;\n      position: relative;\n    "], ["\n      display: flex !important;\n      flex-wrap: nowrap !important;\n      align-items: center !important;\n      padding: ", " ", ";\n      background-color: ", ";\n      border-bottom: 1px solid ", ";\n      min-height: 48px;\n      gap: ", ";\n      white-space: nowrap;\n      position: relative;\n    "])), tokens.spacingVerticalS, tokens.spacingHorizontalM, tokens.colorNeutralBackground1, tokens.colorNeutralStroke2, tokens.spacingHorizontalXS),
+        /** Visible container for regular (left-side) items */
+        leftSection: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: flex !important;\n      flex-wrap: nowrap !important;\n      align-items: center !important;\n      gap: ", ";\n      flex: 0 0 auto !important;\n      min-width: 0;\n    "], ["\n      display: flex !important;\n      flex-wrap: nowrap !important;\n      align-items: center !important;\n      gap: ", ";\n      flex: 0 0 auto !important;\n      min-width: 0;\n    "])), tokens.spacingHorizontalXS),
+        /** Hidden mirror — renders ALL items for unclipped measurement */
+        measureSection: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      display: flex;\n      flex-wrap: nowrap;\n      align-items: center;\n      gap: ", ";\n      position: absolute;\n      top: 0;\n      left: 0;\n      visibility: hidden;\n      pointer-events: none;\n      height: 0;\n      overflow: visible;\n      z-index: -1;\n    "], ["\n      display: flex;\n      flex-wrap: nowrap;\n      align-items: center;\n      gap: ", ";\n      position: absolute;\n      top: 0;\n      left: 0;\n      visibility: hidden;\n      pointer-events: none;\n      height: 0;\n      overflow: visible;\n      z-index: -1;\n    "])), tokens.spacingHorizontalXS),
+        /** Far-items group — pushed to the right edge */
+        rightGroup: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      display: flex !important;\n      flex-wrap: nowrap !important;\n      align-items: center !important;\n      gap: ", ";\n      flex: 0 0 auto !important;\n      margin-left: auto;\n      white-space: nowrap;\n    "], ["\n      display: flex !important;\n      flex-wrap: nowrap !important;\n      align-items: center !important;\n      gap: ", ";\n      flex: 0 0 auto !important;\n      margin-left: auto;\n      white-space: nowrap;\n    "])), tokens.spacingHorizontalXS),
+        /** Inner wrapper for far-items inside rightGroup */
+        farItemsContainer: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n      flex-wrap: nowrap;\n      align-items: center;\n      gap: inherit;\n    "], ["\n      display: flex;\n      flex-wrap: nowrap;\n      align-items: center;\n      gap: inherit;\n    "]))),
+        /** Base style for all ToolbarButton instances */
+        toolbarButtonBase: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      min-width: auto;\n    "], ["\n      min-width: auto;\n    "]))),
+        /** "..." overflow menu trigger button */
+        overflowButton: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      flex-shrink: 0;\n    "], ["\n      flex-shrink: 0;\n    "]))),
+        /** Count badge — hidden on mobile */
+        countBadge: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      flex-shrink: 0;\n      @media (max-width: 768px) {\n        display: none;\n      }\n    "], ["\n      flex-shrink: 0;\n      @media (max-width: 768px) {\n        display: none;\n      }\n    "]))),
+        /** Divider between groups */
+        divider: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      height: 24px;\n      margin: 0 ", ";\n    "], ["\n      height: 24px;\n      margin: 0 ", ";\n    "])), tokens.spacingHorizontalXS),
+        /** Regular toolbar item */
+        toolbarItem: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      flex-shrink: 0;\n      width: fit-content;\n      white-space: nowrap;\n    "], ["\n      flex-shrink: 0;\n      width: fit-content;\n      white-space: nowrap;\n    "]))),
+        /** Far-item button */
+        farItemButton: css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      flex-shrink: 0;\n    "], ["\n      flex-shrink: 0;\n    "]))),
+        /** Label text inside far-item buttons — hidden on mobile */
+        farItemLabel: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      @media (max-width: 768px) {\n        display: none;\n      }\n    "], ["\n      @media (max-width: 768px) {\n        display: none;\n      }\n    "]))),
+    };
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+//# sourceMappingURL=useListToolbarStyles.js.map

package/lib/controls/ListToolbar/useListToolbarStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListToolbarStyles.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/useListToolbarStyles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAiBpD,MAAM,CAAC,IAAM,oBAAoB,GAAG;IAClC,OAAO;QACL,8BAA8B;QAC9B,OAAO,EAAE,GAAG,0XAAA,gIAIC,EAAuB,GAAI,EAAyB,6BAC3C,EAA8B,oCACvB,EAA0B,yCAE9C,EAA0B,gEAGlC,KAPY,MAAM,CAAC,gBAAgB,EAAI,MAAM,CAAC,kBAAkB,EAC3C,MAAM,CAAC,uBAAuB,EACvB,MAAM,CAAC,mBAAmB,EAE9C,MAAM,CAAC,mBAAmB,CAGlC;QAED,sDAAsD;QACtD,WAAW,EAAE,GAAG,iQAAA,4HAIP,EAA0B,gEAGlC,KAHQ,MAAM,CAAC,mBAAmB,CAGlC;QAED,kEAAkE;QAClE,cAAc,EAAE,GAAG,2VAAA,2FAIV,EAA0B,2LASlC,KATQ,MAAM,CAAC,mBAAmB,CASlC;QAED,iDAAiD;QACjD,UAAU,EAAE,GAAG,kSAAA,4HAIN,EAA0B,iGAIlC,KAJQ,MAAM,CAAC,mBAAmB,CAIlC;QAED,oDAAoD;QACpD,iBAAiB,EAAE,GAAG,4KAAA,yGAKrB,IAAA;QAED,iDAAiD;QACjD,iBAAiB,EAAE,GAAG,mGAAA,gCAErB,IAAA;QAED,yCAAyC;QACzC,cAAc,EAAE,GAAG,kGAAA,+BAElB,IAAA;QAED,qCAAqC;QACrC,UAAU,EAAE,GAAG,sKAAA,mGAKd,IAAA;QAED,6BAA6B;QAC7B,OAAO,EAAE,GAAG,uHAAA,yCAEE,EAA0B,SACvC,KADa,MAAM,CAAC,mBAAmB,CACvC;QAED,2BAA2B;QAC3B,WAAW,EAAE,GAAG,2JAAA,sFAIf,IAAA;QAED,sBAAsB;QACtB,aAAa,EAAE,GAAG,oGAAA,+BAEjB,IAAA;QAED,4DAA4D;QAC5D,YAAY,EAAE,GAAG,iJAAA,4EAIhB,IAAA;KACF,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/ListToolbar/useOverflowIndex.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Measures how many flat-list children fit inside the available width.
+ *
+ * Uses three refs:
+ *  - `toolbarRef`  → the outer toolbar; a ResizeObserver watches this
+ *                     for width changes.
+ *  - `rightRef`    → the far-items group; its width is subtracted from
+ *                     the toolbar width to get the available space for
+ *                     regular items.
+ *  - `measureRef`  → a hidden mirror (`visibility:hidden; overflow:visible`)
+ *                     that always renders ALL items so each child's true
+ *                     unclipped width can be read.
+ *
+ * @returns The index in the flat item list at which items start to overflow.
+ */
+export declare function useOverflowIndex(toolbarRef: React.RefObject<HTMLDivElement>, rightRef: React.RefObject<HTMLDivElement>, measureRef: React.RefObject<HTMLDivElement>, itemCount: number, moreButtonWidth?: number): number;
+//# sourceMappingURL=useOverflowIndex.d.ts.map

package/lib/controls/ListToolbar/useOverflowIndex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowIndex.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/useOverflowIndex.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EACzC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAC3C,SAAS,EAAE,MAAM,EACjB,eAAe,GAAE,MAAW,GAC3B,MAAM,CAgFR"}

package/lib/controls/ListToolbar/useOverflowIndex.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+/**
+ * Minimum gap breakpoints based on the toolbar's own pixel width.
+ * Wider toolbars get a larger minimum gap between regular and far items.
+ */
+var GAP_BREAKPOINTS = [
+    { minWidth: 1280, gap: 100 },
+    { minWidth: 1024, gap: 60 },
+    { minWidth: 768, gap: 40 },
+    { minWidth: 480, gap: 24 },
+    { minWidth: 0, gap: 12 },
+];
+function getMinGap(toolbarWidth) {
+    for (var _i = 0, GAP_BREAKPOINTS_1 = GAP_BREAKPOINTS; _i < GAP_BREAKPOINTS_1.length; _i++) {
+        var bp = GAP_BREAKPOINTS_1[_i];
+        if (toolbarWidth > bp.minWidth)
+            return bp.gap;
+    }
+    return GAP_BREAKPOINTS[GAP_BREAKPOINTS.length - 1].gap;
+}
+/**
+ * Measures how many flat-list children fit inside the available width.
+ *
+ * Uses three refs:
+ *  - `toolbarRef`  → the outer toolbar; a ResizeObserver watches this
+ *                     for width changes.
+ *  - `rightRef`    → the far-items group; its width is subtracted from
+ *                     the toolbar width to get the available space for
+ *                     regular items.
+ *  - `measureRef`  → a hidden mirror (`visibility:hidden; overflow:visible`)
+ *                     that always renders ALL items so each child's true
+ *                     unclipped width can be read.
+ *
+ * @returns The index in the flat item list at which items start to overflow.
+ */
+export function useOverflowIndex(toolbarRef, rightRef, measureRef, itemCount, moreButtonWidth) {
+    if (moreButtonWidth === void 0) { moreButtonWidth = 48; }
+    var _a = React.useState(itemCount), overflowIndex = _a[0], setOverflowIndex = _a[1];
+    React.useEffect(function () {
+        var toolbarEl = toolbarRef.current;
+        var rightEl = rightRef.current;
+        var measureEl = measureRef.current;
+        if (!toolbarEl || !measureEl)
+            return;
+        var calculate = function () {
+            var toolbarWidth = toolbarEl.offsetWidth;
+            if (toolbarWidth === 0)
+                return;
+            var toolbarStyle = getComputedStyle(toolbarEl);
+            var paddingLeft = parseFloat(toolbarStyle.paddingLeft || '0');
+            var paddingRight = parseFloat(toolbarStyle.paddingRight || '0');
+            var toolbarGap = parseFloat(toolbarStyle.columnGap || toolbarStyle.gap || '0');
+            var minGap = getMinGap(toolbarWidth);
+            var rightWidth = rightEl ? rightEl.offsetWidth : 0;
+            var rightReserved = rightWidth > 0 ? rightWidth + minGap + toolbarGap : 0;
+            var availableWidth = toolbarWidth - paddingLeft - paddingRight - rightReserved;
+            if (availableWidth <= 0)
+                return;
+            var children = Array.from(measureEl.children);
+            if (children.length === 0) {
+                setOverflowIndex(itemCount);
+                return;
+            }
+            var gap = parseFloat(getComputedStyle(measureEl).columnGap || '0');
+            // Total width of all items in the unclipped mirror
+            var totalWidth = 0;
+            for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
+                var child = children_1[_i];
+                totalWidth += child.offsetWidth;
+            }
+            totalWidth += Math.max(0, children.length - 1) * gap;
+            // If everything fits, show all
+            if (totalWidth <= availableWidth) {
+                setOverflowIndex(children.length);
+                return;
+            }
+            // Otherwise, find how many fit leaving room for the "..." button
+            var budgetWidth = availableWidth - moreButtonWidth;
+            var usedWidth = 0;
+            var fitCount = 0;
+            for (var i = 0; i < children.length; i++) {
+                var childWidth = children[i].offsetWidth;
+                var withGap = i > 0 ? gap : 0;
+                if (usedWidth + withGap + childWidth > budgetWidth)
+                    break;
+                usedWidth += withGap + childWidth;
+                fitCount++;
+            }
+            setOverflowIndex(Math.max(1, fitCount));
+        };
+        var rafId = requestAnimationFrame(calculate);
+        var ro = new ResizeObserver(calculate);
+        ro.observe(toolbarEl);
+        return function () {
+            cancelAnimationFrame(rafId);
+            ro.disconnect();
+        };
+    }, [toolbarRef, rightRef, measureRef, itemCount, moreButtonWidth]);
+    return overflowIndex;
+}
+//# sourceMappingURL=useOverflowIndex.js.map

package/lib/controls/ListToolbar/useOverflowIndex.js.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "3.24.0-beta.2252413",
+  "version": "3.24.0-beta.2252438",
   "engines": {
     "node": ">=22.14.0 < 23.0.0"
   },