@microsoft/sp-top-actions 1.16.1 → 1.17.0-beta.3

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

@@ -3,7 +3,7 @@
   "id": "d5c7f2a5-a8e2-431c-9161-70d4d6396f79",
   "alias": "SpTopActions",
   "componentType": "Library",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "loaderConfig": {
     "internalModuleBaseUrls": [
       "https://localhost:4321/dist/"
@@ -12,7 +12,7 @@
     "scriptResources": {
       "sp-top-actions": {
         "type": "path",
-        "path": "sp-top-actions_none_f5755ff8c36326e27320.js"
+        "path": "sp-top-actions_none_55e41bcef66090aab96f.js"
       }
     }
   }

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

@@ -1,33 +1,203 @@
-import { IPropertyPaneField } from '@microsoft/sp-property-pane/lib/propertyPaneFields/propertyPaneField/IPropertyPaneField';
+import type * as React_2 from 'react';
+
+/**
+ * The configurations used to define a webpart's top actions.
+ *
+ * @public
+ */
+export declare interface ITopActions {
+    /**
+     * List of top actions configurations
+     */
+    readonly topActions: ITopActionsField[];
+    /**
+     * 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: any): void;
+}
+
+/**
+ * TopActions button props.
+ *
+ * @public
+ */
+export declare 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;
+    /* Excluded from this release type: themableSvg */
+}
+
+/**
+ * TopActions Dropdown option props.
+ *
+ * @public
+ */
+export declare 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;
+    /* Excluded from this release type: themableSvg */
+}
+
+/**
+ * TopActions Dropdown icon props.
+ *
+ * @public
+ */
+export declare interface ITopActionsDropdownOptionIconProps {
+    /**
+     * The name of the icon to use from the Office Fabric icon set.
+     */
+    readonly officeFabricIconFontName?: string | null;
+}
+
+/**
+ * TopActions Dropdown props.
+ *
+ * @public
+ */
+export declare 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;
+}
 
 /**
  * Configuration used for a single Top Action command.
- * @beta
+ *
+ * @public
  */
-export declare type ActionConfiguration<TProperties = any> = Readonly<IPropertyPaneField<TProperties>> & {
+export declare interface ITopActionsField<TProperties = any> {
     /**
-     *  Display name for the action which can be used in a tooltip or aria-label.
+     * 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 configurations used to define a webpart's top actions.
- * For consistency between the Property Pane and the CanvasTopAction,
- * top action configurations are based on IPropertyPaneField data structure.
- * @beta
+ * 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
  */
-export declare interface ITopActions {
+export declare enum TopActionsFieldType {
     /**
-     * List of PropertyPane top actions
+     * Choice Group field.
      */
-    readonly topActions: ActionConfiguration[];
+    Dropdown = 10,
     /**
-     * Fired once the top action configuration state has changed for the specified property path
-     * @param actionName - the specified property path that has been altered
-     * @param newValue - the new value for the specified actionName
+     * Button field.
      */
-    onExecute(actionName: string, newValue: any): void;
+    Button = 11
 }
 
 export { }

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

@@ -1,7 +1,203 @@
-import { IPropertyPaneField } from '@microsoft/sp-property-pane/lib/propertyPaneFields/propertyPaneField/IPropertyPaneField';
+import type * as React_2 from 'react';
 
-/* Excluded from this release type: ActionConfiguration */
+/**
+ * The configurations used to define a webpart's top actions.
+ *
+ * @public
+ */
+export declare interface ITopActions {
+    /**
+     * List of top actions configurations
+     */
+    readonly topActions: ITopActionsField[];
+    /**
+     * 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: any): void;
+}
 
-/* Excluded from this release type: ITopActions */
+/**
+ * TopActions button props.
+ *
+ * @public
+ */
+export declare 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;
+    /* Excluded from this release type: themableSvg */
+}
+
+/**
+ * TopActions Dropdown option props.
+ *
+ * @public
+ */
+export declare 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;
+    /* Excluded from this release type: themableSvg */
+}
+
+/**
+ * TopActions Dropdown icon props.
+ *
+ * @public
+ */
+export declare interface ITopActionsDropdownOptionIconProps {
+    /**
+     * The name of the icon to use from the Office Fabric icon set.
+     */
+    readonly officeFabricIconFontName?: string | null;
+}
+
+/**
+ * TopActions Dropdown props.
+ *
+ * @public
+ */
+export declare 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;
+}
+
+/**
+ * Configuration used for a single Top Action command.
+ *
+ * @public
+ */
+export declare interface ITopActionsField<TProperties = any> {
+    /**
+     * 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;
+}
+
+/**
+ * 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
+ */
+export declare enum TopActionsFieldType {
+    /**
+     * Choice Group field.
+     */
+    Dropdown = 10,
+    /**
+     * Button field.
+     */
+    Button = 11
+}
 
 export { }

package/dist/index-internal.d.ts

@@ -1,7 +1,203 @@
-import { IPropertyPaneField } from '@microsoft/sp-property-pane/lib/propertyPaneFields/propertyPaneField/IPropertyPaneField';
+import type * as React_2 from 'react';
 
-/* Excluded from this release type: ActionConfiguration */
+/**
+ * The configurations used to define a webpart's top actions.
+ *
+ * @public
+ */
+export declare interface ITopActions {
+    /**
+     * List of top actions configurations
+     */
+    readonly topActions: ITopActionsField[];
+    /**
+     * 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: any): void;
+}
 
-/* Excluded from this release type: ITopActions */
+/**
+ * TopActions button props.
+ *
+ * @public
+ */
+export declare 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;
+    /* Excluded from this release type: themableSvg */
+}
+
+/**
+ * TopActions Dropdown option props.
+ *
+ * @public
+ */
+export declare 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;
+    /* Excluded from this release type: themableSvg */
+}
+
+/**
+ * TopActions Dropdown icon props.
+ *
+ * @public
+ */
+export declare interface ITopActionsDropdownOptionIconProps {
+    /**
+     * The name of the icon to use from the Office Fabric icon set.
+     */
+    readonly officeFabricIconFontName?: string | null;
+}
+
+/**
+ * TopActions Dropdown props.
+ *
+ * @public
+ */
+export declare 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;
+}
+
+/**
+ * Configuration used for a single Top Action command.
+ *
+ * @public
+ */
+export declare interface ITopActionsField<TProperties = any> {
+    /**
+     * 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;
+}
+
+/**
+ * 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
+ */
+export declare enum TopActionsFieldType {
+    /**
+     * Choice Group field.
+     */
+    Dropdown = 10,
+    /**
+     * Button field.
+     */
+    Button = 11
+}
 
 export { }

package/dist/{sp-top-actions_none_f5755ff8c36326e27320.js → sp-top-actions_none_55e41bcef66090aab96f.js}

@@ -1 +1 @@
-define("d5c7f2a5-a8e2-431c-9161-70d4d6396f79_1.16.1",[],function(){return function(e){var t={};function n(a){if(t[a])return t[a].exports;var i=t[a]={i:a,l:!1,exports:{}};return e[a].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(a,i,function(t){return e[t]}.bind(null,i));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="mwqp")}({mwqp:function(e,t,n){"use strict";n.r(t)}})});
+define("d5c7f2a5-a8e2-431c-9161-70d4d6396f79_1.17.0",[],function(){return function(e){var t={};function n(a){if(t[a])return t[a].exports;var i=t[a]={i:a,l:!1,exports:{}};return e[a].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(a,i,function(t){return e[t]}.bind(null,i));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="mwqp")}({mwqp:function(e,t,n){"use strict";var a;n.r(t),n.d(t,"TopActionsFieldType",function(){return a}),function(e){e[e.Dropdown=10]="Dropdown",e[e.Button=11]="Button"}(a||(a={}))}})});

package/dist/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.31.2"
+      "packageVersion": "7.34.4"
     }
   ]
 }

package/lib-commonjs/index.js

@@ -7,4 +7,7 @@
 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

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

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

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

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

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

@@ -0,0 +1,23 @@
+"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
+ */
+var TopActionsFieldType;
+(function (TopActionsFieldType) {
+    /**
+     * Choice Group field.
+     */
+    TopActionsFieldType[TopActionsFieldType["Dropdown"] = 10] = "Dropdown";
+    /**
+     * Button field.
+     */
+    TopActionsFieldType[TopActionsFieldType["Button"] = 11] = "Button";
+})(TopActionsFieldType = exports.TopActionsFieldType || (exports.TopActionsFieldType = {}));
+//# sourceMappingURL=topActionsField.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/sp-top-actions",
-  "version": "1.16.1",
+  "version": "1.17.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",
@@ -8,14 +8,11 @@
   "module": "lib/index.js",
   "typings": "dist/index-internal.d.ts",
   "devDependencies": {
-    "@ms/spfx-internal-web-build-rig": "0.1.0",
-    "@odsp-web-tools/internal-node-rig": "0.1.0",
-    "@rushstack/heft": "0.47.11",
+    "@rushstack/heft": "0.49.7",
     "@types/react": "17.0.45",
-    "@types/react-dom": "17.0.17"
-  },
-  "dependencies": {
-    "@microsoft/sp-property-pane": "1.16.1"
+    "@types/react-dom": "17.0.17",
+    "@ms/spfx-internal-web-build-rig": "0.1.0",
+    "@odsp-web-tools/internal-node-rig": "0.1.0"
   },
   "scripts": {
     "build": "heft test --clean",