@microsoft/sp-top-actions 1.22.0-beta.1 → 1.22.0-beta.3

package/dist/d5c7f2a5-a8e2-431c-9161-70d4d6396f79.manifest.json

@@ -13,8 +13,8 @@
       "sp-top-actions": {
         "type": "path",
         "path": {
-          "path": "sp-top-actions_none_69a4ebc2610b4b1c3da5.js",
-          "integrity": "sha256-kEl5IcVNiga1/R/8Dns/umI3npuH+q10N9/zCrVIaF4="
+          "path": "sp-top-actions_none_f2da6b2e6f2b73611ecb.js",
+          "integrity": "sha256-QpfFwPsXgklP2yLExX78DC1G1bvE5aDnFDeBnUcLR4E="
         }
       }
     }

package/dist/index-internal-beta.d.ts

@@ -1,4 +1,10 @@
 import type { IMultiStepCoachmark } from '@msinternal/sp-coachmark-utility';
+import type { IToolbarBasicButton } from '@msinternal/sp-toolbar';
+import type { IToolbarButtonBase } from '@msinternal/sp-toolbar';
+import type { IToolbarComboboxButton } from '@msinternal/sp-toolbar';
+import type { IToolbarDropdownButton } from '@msinternal/sp-toolbar';
+import type { IToolbarSplitButton } from '@msinternal/sp-toolbar';
+import type { IToolbarToggleButton } from '@msinternal/sp-toolbar';
 import type * as React_2 from 'react';
 
 /**
@@ -56,8 +62,12 @@ export declare interface ITopActionsButtonProps {
     /* Excluded from this release type: themableSvg */
 }
 
+/* Excluded from this release type: ITopActionsButtonV2Props */
+
 /* Excluded from this release type: _ITopActionsCoachmark */
 
+/* Excluded from this release type: ITopActionsComboboxProps */
+
 /**
  * TopActions Dropdown option props.
  *
@@ -147,6 +157,8 @@ export declare interface ITopActionsDropdownProps {
     readonly titleButton?: ITopActionsButtonProps;
 }
 
+/* Excluded from this release type: ITopActionsDropdownV2Props */
+
 /**
  * Configuration used for a single Top Action command.
  *
@@ -192,14 +204,24 @@ export declare interface ITopActionsField<TProperties = unknown> {
     /* Excluded from this release type: dataAutomationId */
 }
 
+/* Excluded from this release type: ITopActionsFieldCommonProps */
+
+/* Excluded from this release type: ITopActionsSplitProps */
+
+/* Excluded from this release type: ITopActionsToggleProps */
+
 /**
  * Enum for all the supported Top Actions field types.
  *
  * Names should be consistent with those in office-ui-fabric-react, be careful to get letter casing correct.
  *
+ * @privateRemarks
+ * These mirror `PropertyPaneFieldType` in `sp-property-pane`. We use arbitrary values for those without a corresponding field in `PropertyPaneFieldType`.
+ *
  * @public
  */
 export declare enum TopActionsFieldType {
+    /* Excluded from this release type: Toggle */
     /**
      * Choice Group field.
      */
@@ -207,7 +229,9 @@ export declare enum TopActionsFieldType {
     /**
      * Button field.
      */
-    Button = 11
+    Button = 11,
+    /* Excluded from this release type: Split */
+    /* Excluded from this release type: Combobox */
 }
 
 export { }

package/dist/index-internal-public.d.ts

@@ -1,4 +1,10 @@
 import type { IMultiStepCoachmark } from '@msinternal/sp-coachmark-utility';
+import type { IToolbarBasicButton } from '@msinternal/sp-toolbar';
+import type { IToolbarButtonBase } from '@msinternal/sp-toolbar';
+import type { IToolbarComboboxButton } from '@msinternal/sp-toolbar';
+import type { IToolbarDropdownButton } from '@msinternal/sp-toolbar';
+import type { IToolbarSplitButton } from '@msinternal/sp-toolbar';
+import type { IToolbarToggleButton } from '@msinternal/sp-toolbar';
 import type * as React_2 from 'react';
 
 /**
@@ -56,8 +62,12 @@ export declare interface ITopActionsButtonProps {
     /* Excluded from this release type: themableSvg */
 }
 
+/* Excluded from this release type: ITopActionsButtonV2Props */
+
 /* Excluded from this release type: _ITopActionsCoachmark */
 
+/* Excluded from this release type: ITopActionsComboboxProps */
+
 /**
  * TopActions Dropdown option props.
  *
@@ -147,6 +157,8 @@ export declare interface ITopActionsDropdownProps {
     readonly titleButton?: ITopActionsButtonProps;
 }
 
+/* Excluded from this release type: ITopActionsDropdownV2Props */
+
 /**
  * Configuration used for a single Top Action command.
  *
@@ -192,14 +204,24 @@ export declare interface ITopActionsField<TProperties = unknown> {
     /* Excluded from this release type: dataAutomationId */
 }
 
+/* Excluded from this release type: ITopActionsFieldCommonProps */
+
+/* Excluded from this release type: ITopActionsSplitProps */
+
+/* Excluded from this release type: ITopActionsToggleProps */
+
 /**
  * Enum for all the supported Top Actions field types.
  *
  * Names should be consistent with those in office-ui-fabric-react, be careful to get letter casing correct.
  *
+ * @privateRemarks
+ * These mirror `PropertyPaneFieldType` in `sp-property-pane`. We use arbitrary values for those without a corresponding field in `PropertyPaneFieldType`.
+ *
  * @public
  */
 export declare enum TopActionsFieldType {
+    /* Excluded from this release type: Toggle */
     /**
      * Choice Group field.
      */
@@ -207,7 +229,9 @@ export declare enum TopActionsFieldType {
     /**
      * Button field.
      */
-    Button = 11
+    Button = 11,
+    /* Excluded from this release type: Split */
+    /* Excluded from this release type: Combobox */
 }
 
 export { }

package/dist/index-internal.d.ts

@@ -1,4 +1,10 @@
 import type { IMultiStepCoachmark } from '@msinternal/sp-coachmark-utility';
+import type { IToolbarBasicButton } from '@msinternal/sp-toolbar';
+import type { IToolbarButtonBase } from '@msinternal/sp-toolbar';
+import type { IToolbarComboboxButton } from '@msinternal/sp-toolbar';
+import type { IToolbarDropdownButton } from '@msinternal/sp-toolbar';
+import type { IToolbarSplitButton } from '@msinternal/sp-toolbar';
+import type { IToolbarToggleButton } from '@msinternal/sp-toolbar';
 import type * as React_2 from 'react';
 
 /**
@@ -56,8 +62,12 @@ export declare interface ITopActionsButtonProps {
     /* Excluded from this release type: themableSvg */
 }
 
+/* Excluded from this release type: ITopActionsButtonV2Props */
+
 /* Excluded from this release type: _ITopActionsCoachmark */
 
+/* Excluded from this release type: ITopActionsComboboxProps */
+
 /**
  * TopActions Dropdown option props.
  *
@@ -147,6 +157,8 @@ export declare interface ITopActionsDropdownProps {
     readonly titleButton?: ITopActionsButtonProps;
 }
 
+/* Excluded from this release type: ITopActionsDropdownV2Props */
+
 /**
  * Configuration used for a single Top Action command.
  *
@@ -192,14 +204,24 @@ export declare interface ITopActionsField<TProperties = unknown> {
     /* Excluded from this release type: dataAutomationId */
 }
 
+/* Excluded from this release type: ITopActionsFieldCommonProps */
+
+/* Excluded from this release type: ITopActionsSplitProps */
+
+/* Excluded from this release type: ITopActionsToggleProps */
+
 /**
  * Enum for all the supported Top Actions field types.
  *
  * Names should be consistent with those in office-ui-fabric-react, be careful to get letter casing correct.
  *
+ * @privateRemarks
+ * These mirror `PropertyPaneFieldType` in `sp-property-pane`. We use arbitrary values for those without a corresponding field in `PropertyPaneFieldType`.
+ *
  * @public
  */
 export declare enum TopActionsFieldType {
+    /* Excluded from this release type: Toggle */
     /**
      * Choice Group field.
      */
@@ -207,7 +229,9 @@ export declare enum TopActionsFieldType {
     /**
      * Button field.
      */
-    Button = 11
+    Button = 11,
+    /* Excluded from this release type: Split */
+    /* Excluded from this release type: Combobox */
 }
 
 export { }

package/dist/{sp-top-actions_none_69a4ebc2610b4b1c3da5.js → sp-top-actions_none_f2da6b2e6f2b73611ecb.js}

@@ -1 +1 @@
-define("d5c7f2a5-a8e2-431c-9161-70d4d6396f79_1.22.0",[],()=>(()=>{"use strict";var e,t={d:(e,n)=>{for(var a in n)t.o(n,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:n[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};return t.r(n),t.d(n,{TopActionsFieldType:()=>e}),function(e){e[e.Dropdown=10]="Dropdown",e[e.Button=11]="Button"}(e||(e={})),n})());
+define("d5c7f2a5-a8e2-431c-9161-70d4d6396f79_1.22.0",[],()=>(()=>{"use strict";var e,t={d:(e,n)=>{for(var a in n)t.o(n,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:n[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};return t.r(n),t.d(n,{TopActionsFieldType:()=>e}),function(e){e[e.Toggle=5]="Toggle",e[e.Dropdown=10]="Dropdown",e[e.Button=11]="Button",e[e.Split=100]="Split",e[e.Combobox=101]="Combobox"}(e||(e={})),n})());

package/lib-commonjs/ITopActions.js

@@ -1,4 +1,7 @@
-"use strict";
 // Copyright (c) Microsoft Corporation. All rights reserved.
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=ITopActions.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ITopActions.js.map

package/lib-commonjs/index.js

@@ -1,13 +1,20 @@
-"use strict";
 /**
  * Copyright (c) Microsoft Corporation. All rights reserved.
  *
  * TopActions modules index
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./ITopActions"), exports);
-tslib_1.__exportStar(require("./topActionsFields/topActionsField/topActionsField"), exports);
-tslib_1.__exportStar(require("./topActionsFields/topActionsButton/ITopActionsButton"), exports);
-tslib_1.__exportStar(require("./topActionsFields/topActionsDropdown/ITopActionsDropdown"), exports);
-//# sourceMappingURL=index.js.map
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./ITopActions"), exports);
+_export_star._(require("./topActionsFields/topActionsField/topActionsField"), exports);
+_export_star._(require("./topActionsFields/topActionsButton/ITopActionsButton"), exports);
+_export_star._(require("./topActionsFields/topActionsButton/ITopActionsButtonV2"), exports);
+_export_star._(require("./topActionsFields/topActionsCombobox/ITopActionsCombobox"), exports);
+_export_star._(require("./topActionsFields/topActionsDropdown/ITopActionsDropdown"), exports);
+_export_star._(require("./topActionsFields/topActionsDropdown/ITopActionsDropdownV2"), exports);
+_export_star._(require("./topActionsFields/topActionsSplit/ITopActionsSplit"), exports);
+_export_star._(require("./topActionsFields/topActionsToggle/ITopActionsToggle"), exports);
+
+//# sourceMappingURL=./index.js.map

package/lib-commonjs/topActionsFields/topActionsButton/ITopActionsButton.js

@@ -1,4 +1,7 @@
-"use strict";
 // Copyright (c) Microsoft. All rights reserved.
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=ITopActionsButton.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ITopActionsButton.js.map

package/lib-commonjs/topActionsFields/topActionsButton/ITopActionsButtonV2.js

@@ -0,0 +1,7 @@
+// Copyright (c) Microsoft. All rights reserved.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ITopActionsButtonV2.js.map

package/lib-commonjs/topActionsFields/topActionsCombobox/ITopActionsCombobox.js

@@ -0,0 +1,7 @@
+// Copyright (c) Microsoft. All rights reserved.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ITopActionsCombobox.js.map

package/lib-commonjs/topActionsFields/topActionsDropdown/ITopActionsDropdown.js

@@ -1,4 +1,7 @@
-"use strict";
 // Copyright (c) Microsoft. All rights reserved.
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=ITopActionsDropdown.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ITopActionsDropdown.js.map

package/lib-commonjs/topActionsFields/topActionsDropdown/ITopActionsDropdownV2.js

@@ -0,0 +1,7 @@
+// Copyright (c) Microsoft. All rights reserved.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ITopActionsDropdownV2.js.map

package/lib-commonjs/topActionsFields/topActionsField/ITopActionsCoachmark.js

@@ -1,3 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=ITopActionsCoachmark.js.map
+/**
+ * Custom props to add a coachmark to a topActions button
+ *
+ * @internal
+ * @deprecated Use `IMultiStepCoachmark` from sp-coachmark-utility instead. TopActions now uses multi-step coachmarks from sp-coachmark-utility.
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ITopActionsCoachmark.js.map

package/lib-commonjs/topActionsFields/topActionsField/topActionsField.js

@@ -1,23 +1,37 @@
-"use strict";
 // Copyright (c) Microsoft. All rights reserved.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopActionsFieldType = void 0;
-/**
- * Enum for all the supported Top Actions field types.
- *
- * Names should be consistent with those in office-ui-fabric-react, be careful to get letter casing correct.
- *
- * @public
- */
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TopActionsFieldType", {
+    enumerable: true,
+    get: function() {
+        return TopActionsFieldType;
+    }
+});
 var TopActionsFieldType;
-(function (TopActionsFieldType) {
+(function(TopActionsFieldType) {
+    /**
+   * Toggle field.
+   *
+   * @alpha
+   */ TopActionsFieldType[TopActionsFieldType["Toggle"] = 5] = "Toggle";
+    /**
+   * Choice Group field.
+   */ TopActionsFieldType[TopActionsFieldType["Dropdown"] = 10] = "Dropdown";
+    /**
+   * Button field.
+   */ TopActionsFieldType[TopActionsFieldType["Button"] = 11] = "Button";
     /**
-     * Choice Group field.
-     */
-    TopActionsFieldType[TopActionsFieldType["Dropdown"] = 10] = "Dropdown";
+   * Split field.
+   *
+   * @alpha
+   */ TopActionsFieldType[TopActionsFieldType["Split"] = 100] = "Split";
     /**
-     * Button field.
-     */
-    TopActionsFieldType[TopActionsFieldType["Button"] = 11] = "Button";
-})(TopActionsFieldType || (exports.TopActionsFieldType = TopActionsFieldType = {}));
-//# sourceMappingURL=topActionsField.js.map
+   * Combobox field.
+   *
+   * @alpha
+   */ TopActionsFieldType[TopActionsFieldType["Combobox"] = 101] = "Combobox";
+})(TopActionsFieldType || (TopActionsFieldType = {}));
+
+//# sourceMappingURL=./topActionsField.js.map

package/lib-commonjs/topActionsFields/topActionsSplit/ITopActionsSplit.js

@@ -0,0 +1,7 @@
+// Copyright (c) Microsoft. All rights reserved.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ITopActionsSplit.js.map

package/lib-commonjs/topActionsFields/topActionsToggle/ITopActionsToggle.js

@@ -0,0 +1,7 @@
+// Copyright (c) Microsoft. All rights reserved.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ITopActionsToggle.js.map

package/lib-dts/ITopActions.d.ts

@@ -0,0 +1,33 @@
+import type { IMultiStepCoachmark } from '@msinternal/sp-coachmark-utility';
+import type { ITopActionsField } from './topActionsFields/topActionsField/topActionsField';
+import type { ITopActionsCoachmark as _ITopActionsCoachmark } from './topActionsFields/topActionsField/ITopActionsCoachmark';
+/**
+ * The configurations used to define a webpart's top actions.
+ *
+ * @public
+ */
+export interface ITopActions {
+    /**
+     * List of top actions configurations
+     */
+    readonly topActions: ITopActionsField[];
+    /**
+     * @internal
+     * List of coachmark configurations
+     *
+     * @deprecated Use `coachmarksFromUtility` instead. TopActions now uses multi-step coachmarks from sp-coachmark-utility.
+     */
+    readonly coachmarks?: Record<string, _ITopActionsCoachmark>;
+    /**
+     * @internal
+     * List of coachmark configurations. A MultiStepTeachingBubbleComponent will be rendered if coachmarks are passed here.
+     */
+    readonly coachmarksFromUtility?: Record<string, IMultiStepCoachmark>;
+    /**
+     * Triggered once the top action configuration state has been executed for the specified property path
+     * @param actionName - the specified property path that has been altered
+     * @param updatedValue - the updated value passed by top actions for the specified actionName
+     */
+    onExecute(actionName: string, updatedValue: unknown): void;
+}
+//# sourceMappingURL=ITopActions.d.ts.map

package/lib-dts/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ *
+ * TopActions modules index
+ */
+export * from './ITopActions';
+export * from './topActionsFields/topActionsField/topActionsField';
+export type { ITopActionsCoachmark as _ITopActionsCoachmark } from './topActionsFields/topActionsField/ITopActionsCoachmark';
+export * from './topActionsFields/topActionsButton/ITopActionsButton';
+export * from './topActionsFields/topActionsButton/ITopActionsButtonV2';
+export * from './topActionsFields/topActionsCombobox/ITopActionsCombobox';
+export * from './topActionsFields/topActionsDropdown/ITopActionsDropdown';
+export * from './topActionsFields/topActionsDropdown/ITopActionsDropdownV2';
+export * from './topActionsFields/topActionsSplit/ITopActionsSplit';
+export * from './topActionsFields/topActionsToggle/ITopActionsToggle';
+//# sourceMappingURL=index.d.ts.map

package/lib-dts/topActionsFields/topActionsButton/ITopActionsButton.d.ts

@@ -0,0 +1,45 @@
+import type * as React from 'react';
+/**
+ * TopActions button props.
+ *
+ * @public
+ */
+export interface ITopActionsButtonProps {
+    /**
+     * Display text of the element.
+     */
+    readonly text: string;
+    /**
+     * The button icon to display.
+     */
+    readonly icon?: string;
+    /**
+     * Description of the action this button takes.
+     */
+    readonly description?: string;
+    /**
+     * Whether the button is disabled.
+     */
+    readonly disabled?: boolean;
+    /**
+     * The aria label of the button for the benefit of screen readers.
+     */
+    readonly ariaLabel?: string;
+    /**
+     * Detailed description of the button for the benefit of screen readers.
+     *
+     *Button types will need more information provided to screen reader.
+     */
+    readonly ariaDescription?: string;
+    /**
+     * Optional attribute used for when an SVG is used in a Button component
+     * This is necessary to allow the SVG to be themed. This is an element using SVG tags such as:
+     *
+     * <svg width="400" height="110">
+     *   <rect width="300" height="100"/>
+     * </svg>
+     * @internal
+     */
+    readonly themableSvg?: React.ReactElement;
+}
+//# sourceMappingURL=ITopActionsButton.d.ts.map

package/lib-dts/topActionsFields/topActionsButton/ITopActionsButtonV2.d.ts

@@ -0,0 +1,10 @@
+import type { IToolbarBasicButton } from '@msinternal/sp-toolbar';
+import type { ITopActionsFieldCommonProps } from '../topActionsField/topActionsField';
+/**
+ * TopActions basic button props.
+ *
+ * @alpha
+ */
+export interface ITopActionsButtonV2Props extends Pick<IToolbarBasicButton, 'icon' | 'onClick'>, ITopActionsFieldCommonProps {
+}
+//# sourceMappingURL=ITopActionsButtonV2.d.ts.map

package/lib-dts/topActionsFields/topActionsCombobox/ITopActionsCombobox.d.ts

@@ -0,0 +1,10 @@
+import type { IToolbarComboboxButton } from '@msinternal/sp-toolbar';
+import type { ITopActionsFieldCommonProps } from '../topActionsField/topActionsField';
+/**
+ * TopActions combobox props.
+ *
+ * @alpha
+ */
+export interface ITopActionsComboboxProps extends Pick<IToolbarComboboxButton, 'icon' | 'freeform' | 'currentOption' | 'options' | 'onChange' | 'type'>, ITopActionsFieldCommonProps {
+}
+//# sourceMappingURL=ITopActionsCombobox.d.ts.map

package/lib-dts/topActionsFields/topActionsDropdown/ITopActionsDropdown.d.ts

@@ -0,0 +1,98 @@
+import type * as React from 'react';
+import type { ITopActionsButtonProps } from '../topActionsButton/ITopActionsButton';
+/**
+ * TopActions Dropdown props.
+ *
+ * @public
+ */
+export interface ITopActionsDropdownProps {
+    /**
+     * The options for the choice group.
+     */
+    readonly options: ITopActionsDropdownOption[];
+    /**
+     * Adds functionality to create an action dropdown where
+     * the selected choice is not highlighted at the top level.
+     *
+     * The TitleButton is always displayed on the toolbar.
+     */
+    readonly titleButton?: ITopActionsButtonProps;
+}
+/**
+ * TopActions Dropdown option props.
+ *
+ * @public
+ */
+export interface ITopActionsDropdownOption {
+    /**
+     * Title (tooltip) text displayed when hovering over an item.
+     */
+    readonly title?: string;
+    /**
+     * A required key to uniquely identify the option.
+     */
+    readonly key: string | number;
+    /**
+     * The text string for the option.
+     */
+    readonly text: string;
+    /**
+     * The Icon component props for choice field.
+     */
+    readonly iconProps?: ITopActionsDropdownOptionIconProps;
+    /**
+     * The src of image for choice field.
+     */
+    readonly imageSrc?: string;
+    /**
+     * The src of image for choice field which is selected.
+     */
+    readonly selectedImageSrc?: string;
+    /**
+     * The width and height of the image in px for choice field.
+     */
+    readonly imageSize?: {
+        readonly width: number;
+        readonly height: number;
+    };
+    /**
+     * Whether the choice group option is disabled or not.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Whether the choice group option is checked or not.
+     *
+     * Default value is false.
+     */
+    readonly checked?: boolean;
+    /**
+     * The aria label of the choice group option for the benefit of screen readers.
+     */
+    readonly ariaLabel?: string;
+    /**
+     * Optional attribute used for when an SVG is used in a Dropdown component
+     * This is necessary to allow the SVG to be themed. This is an element using SVG tags such as:
+     *
+     * <svg width="400" height="110">
+     *   <rect width="300" height="100"/>
+     * </svg>
+     * @internal
+     */
+    readonly themableSvg?: React.ReactElement;
+    /**
+     * The data-automation-id property for the dropdown option.
+     */
+    readonly dataAutomationId?: string;
+}
+/**
+ * TopActions Dropdown icon props.
+ *
+ * @public
+ */
+export interface ITopActionsDropdownOptionIconProps {
+    /**
+     * The name of the icon to use from the Office Fabric icon set.
+     */
+    readonly officeFabricIconFontName?: string | null;
+}
+//# sourceMappingURL=ITopActionsDropdown.d.ts.map

package/lib-dts/topActionsFields/topActionsDropdown/ITopActionsDropdownV2.d.ts

@@ -0,0 +1,10 @@
+import type { IToolbarDropdownButton } from '@msinternal/sp-toolbar';
+import type { ITopActionsFieldCommonProps } from '../topActionsField/topActionsField';
+/**
+ * TopActions dropdown props.
+ *
+ * @alpha
+ */
+export interface ITopActionsDropdownV2Props extends Pick<IToolbarDropdownButton, 'icon' | 'checkedValues' | 'onChange' | 'popover'>, ITopActionsFieldCommonProps {
+}
+//# sourceMappingURL=ITopActionsDropdownV2.d.ts.map

package/lib-dts/topActionsFields/topActionsField/ITopActionsCoachmark.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Custom props to add a coachmark to a topActions button
+ *
+ * @internal
+ * @deprecated Use `IMultiStepCoachmark` from sp-coachmark-utility instead. TopActions now uses multi-step coachmarks from sp-coachmark-utility.
+ */
+export interface ITopActionsCoachmark {
+    /**
+     * The target property for the coachmark
+     */
+    readonly topActionTitle: string;
+    /**
+     * A headline for the coachmark
+     */
+    readonly headline: string;
+    /**
+     * The content for the coachmark
+     */
+    readonly content: string;
+    /**
+     * The screen reader text for the coachmark
+     */
+    readonly screenReaderText: string;
+    /**
+     * The key for the next coachmark target if multi-step coachmark
+     */
+    readonly nextTarget?: string;
+}
+//# sourceMappingURL=ITopActionsCoachmark.d.ts.map

package/lib-dts/topActionsFields/topActionsField/topActionsField.d.ts

@@ -0,0 +1,95 @@
+import type { IToolbarButtonBase } from '@msinternal/sp-toolbar';
+/**
+ * Configuration used for a single Top Action command.
+ *
+ * @public
+ */
+export interface ITopActionsField<TProperties = unknown> {
+    /**
+     * Display name for the action which can be used in a tooltip or aria-label.
+     */
+    readonly title?: string;
+    /**
+     * Type of the top actions field.
+     */
+    readonly type: TopActionsFieldType;
+    /**
+     * Target property from the web part's property bag.
+     */
+    readonly targetProperty: string;
+    /**
+     * Whether this control should be focused.
+     *
+     * @remarks
+     * The default value is false.
+     */
+    readonly shouldFocus?: boolean;
+    /**
+     * Strongly typed properties object. Specific to each field type.
+     *
+     * @remarks
+     * Example: Dropdown has ITopActionsChoiceGroupProps, Button has ITopActionsButtonProps props.
+     *
+     * @privateRemarks
+     * - These props are from the office-ui-fabric-react.
+     *   These props may not be extensive as the fabric-react ones. This is intentional.
+     *     - We are not including any callbacks as part of the props, as this might end up breaking
+     *       the internal flow and cause unwanted problems.
+     *     - These are in line with property pane props as top actions consumes from the same
+     *       source as property pane.
+     *
+     *   We are including only those which are supported by the web part framework.
+     */
+    readonly properties: TProperties;
+    /**
+     * The data-automation-id for the top action
+     * @internal
+     */
+    readonly dataAutomationId?: string;
+}
+/**
+ * Enum for all the supported Top Actions field types.
+ *
+ * Names should be consistent with those in office-ui-fabric-react, be careful to get letter casing correct.
+ *
+ * @privateRemarks
+ * These mirror `PropertyPaneFieldType` in `sp-property-pane`. We use arbitrary values for those without a corresponding field in `PropertyPaneFieldType`.
+ *
+ * @public
+ */
+export declare enum TopActionsFieldType {
+    /**
+     * Toggle field.
+     *
+     * @alpha
+     */
+    Toggle = 5,
+    /**
+     * Choice Group field.
+     */
+    Dropdown = 10,
+    /**
+     * Button field.
+     */
+    Button = 11,
+    /**
+     * Split field.
+     *
+     * @alpha
+     */
+    Split = 100,
+    /**
+     * Combobox field.
+     *
+     * @alpha
+     */
+    Combobox = 101
+}
+/**
+ * Common props for all top actions fields (except legacy button and dropdown).
+ *
+ * @alpha
+ */
+export interface ITopActionsFieldCommonProps extends Pick<IToolbarButtonBase, 'id' | 'tooltip' | 'label' | 'ariaLabel'>, Partial<Pick<IToolbarButtonBase, 'dataAutomationId' | 'engagementEventName'>> {
+}
+//# sourceMappingURL=topActionsField.d.ts.map

package/lib-dts/topActionsFields/topActionsSplit/ITopActionsSplit.d.ts

@@ -0,0 +1,10 @@
+import type { IToolbarSplitButton } from '@msinternal/sp-toolbar';
+import type { ITopActionsFieldCommonProps } from '../topActionsField/topActionsField';
+/**
+ * TopActions split props.
+ *
+ * @alpha
+ */
+export interface ITopActionsSplitProps extends Pick<IToolbarSplitButton, 'icon' | 'iconFillColor' | 'onClick' | 'secondaryButtonId' | 'secondaryButtonAriaLabel' | 'popover'>, Partial<Pick<IToolbarSplitButton, 'secondaryButtonDataAutomationId' | 'secondaryButtonEngagementEventName'>>, ITopActionsFieldCommonProps {
+}
+//# sourceMappingURL=ITopActionsSplit.d.ts.map

package/lib-dts/topActionsFields/topActionsToggle/ITopActionsToggle.d.ts

@@ -0,0 +1,18 @@
+import type { IToolbarToggleButton } from '@msinternal/sp-toolbar';
+import type { ITopActionsFieldCommonProps } from '../topActionsField/topActionsField';
+/**
+ * TopActions toggle props.
+ *
+ * @alpha
+ */
+export interface ITopActionsToggleProps extends Pick<IToolbarToggleButton, 'icon' | 'name' | 'onClick' | 'secondaryContent'>, ITopActionsFieldCommonProps {
+    /**
+     * Whether or not the toggle button is in an active state.
+     *
+     * @privateRemarks
+     * For top actions, we don't pass an object containing all the buttons' states to a toolbar
+     * component like `sp-rte-toolbars`. Instead, we pass each top action individually.
+     */
+    checked?: boolean;
+}
+//# sourceMappingURL=ITopActionsToggle.d.ts.map

package/lib-esm/ITopActions.js

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+/**
+ * The configurations used to define a webpart's top actions.
+ *
+ * @public
+ */ export { };
+
+//# sourceMappingURL=./ITopActions.js.map

package/lib-esm/index.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ *
+ * TopActions modules index
+ */ export * from './ITopActions';
+export * from './topActionsFields/topActionsField/topActionsField';
+export * from './topActionsFields/topActionsButton/ITopActionsButton';
+export * from './topActionsFields/topActionsButton/ITopActionsButtonV2';
+export * from './topActionsFields/topActionsCombobox/ITopActionsCombobox';
+export * from './topActionsFields/topActionsDropdown/ITopActionsDropdown';
+export * from './topActionsFields/topActionsDropdown/ITopActionsDropdownV2';
+export * from './topActionsFields/topActionsSplit/ITopActionsSplit';
+export * from './topActionsFields/topActionsToggle/ITopActionsToggle';
+
+//# sourceMappingURL=./index.js.map

package/lib-esm/sp-top-actions.manifest.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-component-manifest.schema.json",
+
+  "manifestVersion": 2,
+
+  "id": "d5c7f2a5-a8e2-431c-9161-70d4d6396f79", // <-- Generate a GUID using https://www.guidgen.com/
+  "alias": "SpTopActions", // <-- [YOUR NAME HERE]
+  "componentType": "Library",
+
+  // The "*" instructs the tools take the version from package.json when generating the output manifest.
+  // For a first party web part that is deployed with sp-client, this version is not very meaningful.
+  // We recommend to put "1.0.0" in your package.json and not worry about incrementing it.
+  "version": "*"
+}

package/lib-esm/topActionsFields/topActionsButton/ITopActionsButton.js

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft. All rights reserved.
+/**
+ * TopActions button props.
+ *
+ * @public
+ */ export { };
+
+//# sourceMappingURL=./ITopActionsButton.js.map

package/lib-esm/topActionsFields/topActionsButton/ITopActionsButtonV2.js

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft. All rights reserved.
+/**
+ * TopActions basic button props.
+ *
+ * @alpha
+ */ export { };
+
+//# sourceMappingURL=./ITopActionsButtonV2.js.map

package/lib-esm/topActionsFields/topActionsCombobox/ITopActionsCombobox.js

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft. All rights reserved.
+/**
+ * TopActions combobox props.
+ *
+ * @alpha
+ */ export { };
+
+//# sourceMappingURL=./ITopActionsCombobox.js.map

package/lib-esm/topActionsFields/topActionsDropdown/ITopActionsDropdown.js

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft. All rights reserved.
+/**
+ * TopActions Dropdown icon props.
+ *
+ * @public
+ */ export { };
+
+//# sourceMappingURL=./ITopActionsDropdown.js.map

package/lib-esm/topActionsFields/topActionsDropdown/ITopActionsDropdownV2.js

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft. All rights reserved.
+/**
+ * TopActions dropdown props.
+ *
+ * @alpha
+ */ export { };
+
+//# sourceMappingURL=./ITopActionsDropdownV2.js.map

package/lib-esm/topActionsFields/topActionsField/ITopActionsCoachmark.js

@@ -0,0 +1,8 @@
+/**
+ * Custom props to add a coachmark to a topActions button
+ *
+ * @internal
+ * @deprecated Use `IMultiStepCoachmark` from sp-coachmark-utility instead. TopActions now uses multi-step coachmarks from sp-coachmark-utility.
+ */ export { };
+
+//# sourceMappingURL=./ITopActionsCoachmark.js.map

package/lib-esm/topActionsFields/topActionsField/topActionsField.js

@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft. All rights reserved.
+export var TopActionsFieldType;
+(function(TopActionsFieldType) {
+    /**
+   * Toggle field.
+   *
+   * @alpha
+   */ TopActionsFieldType[TopActionsFieldType["Toggle"] = 5] = "Toggle";
+    /**
+   * Choice Group field.
+   */ TopActionsFieldType[TopActionsFieldType["Dropdown"] = 10] = "Dropdown";
+    /**
+   * Button field.
+   */ TopActionsFieldType[TopActionsFieldType["Button"] = 11] = "Button";
+    /**
+   * Split field.
+   *
+   * @alpha
+   */ TopActionsFieldType[TopActionsFieldType["Split"] = 100] = "Split";
+    /**
+   * Combobox field.
+   *
+   * @alpha
+   */ TopActionsFieldType[TopActionsFieldType["Combobox"] = 101] = "Combobox";
+})(TopActionsFieldType || (TopActionsFieldType = {}));
+
+//# sourceMappingURL=./topActionsField.js.map

package/lib-esm/topActionsFields/topActionsSplit/ITopActionsSplit.js

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft. All rights reserved.
+/**
+ * TopActions split props.
+ *
+ * @alpha
+ */ export { };
+
+//# sourceMappingURL=./ITopActionsSplit.js.map

package/lib-esm/topActionsFields/topActionsToggle/ITopActionsToggle.js

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft. All rights reserved.
+/**
+ * TopActions toggle props.
+ *
+ * @alpha
+ */ export { };
+
+//# sourceMappingURL=./ITopActionsToggle.js.map

package/package.json

@@ -1,19 +1,50 @@
 {
   "name": "@microsoft/sp-top-actions",
-  "version": "1.22.0-beta.1",
+  "version": "1.22.0-beta.3",
   "description": "SharePoint Framework support for the web part top actions user interface.",
   "license": "https://aka.ms/spfx/license",
   "homepage": "http://aka.ms/spfx",
   "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "typings": "dist/index-internal.d.ts",
+  "module": "lib-esm/index.js",
+  "typings": "lib-dts/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib-esm/index.js",
+      "require": "./lib-commonjs/index.js",
+      "types": "./lib-dts/index.d.ts"
+    },
+    "./lib/*.resx": "./lib-esm/*.resx.json",
+    "./lib/*": {
+      "import": "./lib-esm/*.js",
+      "require": "./lib-commonjs/*.js",
+      "types": "./lib-dts/*.d.ts"
+    },
+    "./lib-commonjs/*.resx": "./lib-esm/*.resx.json",
+    "./lib-commonjs/*": {
+      "import": "./lib-esm/*.js",
+      "require": "./lib-commonjs/*.js",
+      "types": "./lib-dts/*.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "lib/*": [
+        "lib-dts/*"
+      ]
+    }
+  },
+  "dependencies": {
+    "@swc/helpers": "0.5.12"
+  },
   "devDependencies": {
-    "@rushstack/heft": "0.73.6",
+    "@rushstack/heft": "0.74.3",
     "@types/react": "17.0.45",
     "@types/react-dom": "17.0.17",
     "eslint": "8.57.1",
     "@msinternal/sp-coachmark-utility": "0.1.0",
-    "@msinternal/spfx-internal-web-build-rig": "0.1.0"
+    "@msinternal/spfx-internal-web-build-rig": "0.1.0",
+    "@msinternal/sp-toolbar": "0.1.0"
   },
   "scripts": {
     "build": "heft build --clean",