@syncfusion/ej2-ribbon 22.2.11 → 23.1.36

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.2.11
+*  version : 23.1.36
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@22.2.5",
+  "_id": "@syncfusion/ej2-ribbon@21.22.0",
   "_inBundle": false,
-  "_integrity": "sha512-jPYEE9x4otVzG1p540DS2xI1tX0qB6B/InVj383QyPs67lPMppf9xNhdq5pXH+Q3MF0y6NH88ezpnMFcQ5donA==",
+  "_integrity": "sha512-Q0pcyouzFXSEoCBOwpf7hCIWm4z8gYsUYYLhh1xnwJump+inbNer0fUQKSn4cVXCivYuREWJIn17X8Ln4KY6lQ==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-ribbon",
     "/@syncfusion/ej2-vue-ribbon"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-22.2.5.tgz",
-  "_shasum": "56e59e14946ad866450e8b886f1f81555b3a0bd3",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-ribbon/-/ej2-ribbon-21.22.0.tgz",
+  "_shasum": "02b50c97b7c2a8fc87f88021d6f10de7e632a8dc",
   "_spec": "@syncfusion/ej2-ribbon@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.10",
-    "@syncfusion/ej2-buttons": "~22.2.9",
-    "@syncfusion/ej2-dropdowns": "~22.2.11",
-    "@syncfusion/ej2-lists": "~22.2.11",
-    "@syncfusion/ej2-navigations": "~22.2.11",
-    "@syncfusion/ej2-popups": "~22.2.11",
-    "@syncfusion/ej2-splitbuttons": "~22.2.8"
+    "@syncfusion/ej2-base": "~23.1.36",
+    "@syncfusion/ej2-buttons": "~23.1.36",
+    "@syncfusion/ej2-dropdowns": "~23.1.36",
+    "@syncfusion/ej2-lists": "~23.1.36",
+    "@syncfusion/ej2-navigations": "~23.1.36",
+    "@syncfusion/ej2-popups": "~23.1.36",
+    "@syncfusion/ej2-splitbuttons": "~23.1.36"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "22.2.11",
+  "version": "23.1.36",
   "sideEffects": false
 }

package/src/global.js

@@ -1,3 +1,3 @@
 import * as index from './index';
-index.Ribbon.Inject(index.RibbonButton, index.RibbonDropDown, index.RibbonSplitButton, index.RibbonCheckBox, index.RibbonColorPicker, index.RibbonComboBox, index.RibbonFileMenu);
+index.Ribbon.Inject(index.RibbonButton, index.RibbonDropDown, index.RibbonSplitButton, index.RibbonCheckBox, index.RibbonColorPicker, index.RibbonComboBox, index.RibbonGroupButton, index.RibbonFileMenu, index.RibbonBackstage);
 export * from './index';

package/src/ribbon/base/constant.d.ts

@@ -6,6 +6,8 @@ export declare const ITEM_VERTICAL_CENTER: string;
 /** @hidden */
 export declare const EXPAND_COLLAPSE_ICON: string;
 /** @hidden */
+export declare const BACKSTAGE_CLOSE_ICON: string;
+/** @hidden */
 export declare const OVERFLOW_ICON: string;
 /** @hidden */
 export declare const VERTICAL_DDB: string;
@@ -54,6 +56,14 @@ export declare const RIBBON_MINIMIZE: string;
 /** @hidden */
 export declare const RIBBON_GROUP: string;
 /** @hidden */
+export declare const RIBBON_SINGLE_BUTTON_SELECTION: string;
+/** @hidden */
+export declare const RIBBON_MULTIPLE_BUTTON_SELECTION: string;
+/** @hidden */
+export declare const RIBBON_GROUP_BUTTON: string;
+/** @hidden */
+export declare const RIBBON_GROUP_BUTTON_OVERFLOW_POPUP: string;
+/** @hidden */
 export declare const RIBBON_GROUP_CONTAINER: string;
 /** @hidden */
 export declare const RIBBON_OF_TAB_CONTAINER: string;
@@ -116,6 +126,26 @@ export declare const RIBBON_TEXT_CONTAINER: string;
 /** @hidden */
 export declare const RIBBON_SIMPLIFIED_MODE: string;
 /** @hidden */
+export declare const RIBBON_BACKSTAGE_POPUP: string;
+/** @hidden */
+export declare const RIBBON_BACKSTAGE_OPEN: string;
+/** @hidden */
+export declare const RIBBON_BACKSTAGE_CONTENT: string;
+/** @hidden */
+export declare const RIBBON_SELECTED_CONTENT: string;
+/** @hidden */
+export declare const RIBBON_BACKSTAGE: string;
+/** @hidden */
+export declare const RIBBON_BACKSTAGE_MENU: string;
+/** @hidden */
+export declare const RIBBON_BACKSTAGE_TEMPLATE: string;
+/** @hidden */
+export declare const RIBBON_BACKSTAGE_MENU_WRAPPER: string;
+/** @hidden */
+export declare const RIBBON_BACKSTAGE_ITEMS_WRAPPER: string;
+/** @hidden */
+export declare const RIBBON_BACKSTAGE_TEXT_MENU: string;
+/** @hidden */
 export declare const TAB_ID: string;
 /** @hidden */
 export declare const GROUP_ID: string;
@@ -144,10 +174,20 @@ export declare const DROPDOWN_ID: string;
 /** @hidden */
 export declare const RIBBON_FILE_MENU_ID: string;
 /** @hidden */
+export declare const RIBBON_BACKSTAGE_MENU_ID: string;
+/** @hidden */
+export declare const RIBBON_BACKSTAGE_POPUP_ID: string;
+/** @hidden */
 export declare const RIBBON_FILE_MENU_LIST: string;
 /** @hidden */
+export declare const RIBBON_MENU_LIST: string;
+/** @hidden */
+export declare const RIBBON_FOOTER_MENU_LIST: string;
+/** @hidden */
 export declare const RIBBON_HELP_PANE_TEMPLATE_ID: string;
 /** @hidden */
+export declare const RIBBON_GROUP_BUTTON_ID: string;
+/** @hidden */
 export declare const RIBBON_FILE_MENU_WIDTH: string;
 /** @hidden */
 export declare const RIBBON_HELP_PANE_TEMPLATE_WIDTH: string;

package/src/ribbon/base/constant.js

@@ -6,6 +6,8 @@ export var ITEM_VERTICAL_CENTER = 'e-ribbon-vertical-center';
 /** @hidden */
 export var EXPAND_COLLAPSE_ICON = 'e-icons e-drop-icon';
 /** @hidden */
+export var BACKSTAGE_CLOSE_ICON = 'e-icons e-arrow-left';
+/** @hidden */
 export var OVERFLOW_ICON = 'e-icons e-more-horizontal-1';
 /** @hidden */
 export var VERTICAL_DDB = 'e-vertical';
@@ -54,6 +56,14 @@ export var RIBBON_MINIMIZE = 'e-ribbon-minimize';
 /** @hidden */
 export var RIBBON_GROUP = 'e-ribbon-group';
 /** @hidden */
+export var RIBBON_SINGLE_BUTTON_SELECTION = 'e-ribbon-single-selection';
+/** @hidden */
+export var RIBBON_MULTIPLE_BUTTON_SELECTION = 'e-ribbon-multiple-selection';
+/** @hidden */
+export var RIBBON_GROUP_BUTTON = 'e-ribbon-group-button';
+/** @hidden */
+export var RIBBON_GROUP_BUTTON_OVERFLOW_POPUP = 'e-ribbon-group-button-overflow-popup';
+/** @hidden */
 export var RIBBON_GROUP_CONTAINER = 'e-ribbon-group-container';
 /** @hidden */
 export var RIBBON_OF_TAB_CONTAINER = 'e-ribbon-of-tab';
@@ -116,6 +126,26 @@ export var RIBBON_TEXT_CONTAINER = 'e-ribbon-text-container';
 /** @hidden */
 export var RIBBON_SIMPLIFIED_MODE = 'e-ribbon-simplified-mode';
 /** @hidden */
+export var RIBBON_BACKSTAGE_POPUP = 'e-ribbon-backstage-popup';
+/** @hidden */
+export var RIBBON_BACKSTAGE_OPEN = 'e-ribbon-backstage-open';
+/** @hidden */
+export var RIBBON_BACKSTAGE_CONTENT = 'e-ribbon-backstage-content';
+/** @hidden */
+export var RIBBON_SELECTED_CONTENT = 'e-ribbon-selected-content';
+/** @hidden */
+export var RIBBON_BACKSTAGE = 'e-ribbon-backstage';
+/** @hidden */
+export var RIBBON_BACKSTAGE_MENU = 'e-ribbon-backstage-menu';
+/** @hidden */
+export var RIBBON_BACKSTAGE_TEMPLATE = 'e-ribbon-backstage-template';
+/** @hidden */
+export var RIBBON_BACKSTAGE_MENU_WRAPPER = 'e-ribbon-backstage-wrapper';
+/** @hidden */
+export var RIBBON_BACKSTAGE_ITEMS_WRAPPER = 'e-ribbon-backstage-items-wrapper';
+/** @hidden */
+export var RIBBON_BACKSTAGE_TEXT_MENU = 'e-blankicon';
+/** @hidden */
 export var TAB_ID = '_tab';
 /** @hidden */
 export var GROUP_ID = '_group';
@@ -144,10 +174,20 @@ export var DROPDOWN_ID = '_dropdown';
 /** @hidden */
 export var RIBBON_FILE_MENU_ID = '_filemenu';
 /** @hidden */
+export var RIBBON_BACKSTAGE_MENU_ID = '_backstage';
+/** @hidden */
+export var RIBBON_BACKSTAGE_POPUP_ID = '_backstagepopup';
+/** @hidden */
 export var RIBBON_FILE_MENU_LIST = '_filemenulist';
 /** @hidden */
+export var RIBBON_MENU_LIST = '_menulist';
+/** @hidden */
+export var RIBBON_FOOTER_MENU_LIST = '_footermenulist';
+/** @hidden */
 export var RIBBON_HELP_PANE_TEMPLATE_ID = '_helppanetemplate';
 /** @hidden */
+export var RIBBON_GROUP_BUTTON_ID = '_grpbtn';
+/** @hidden */
 export var RIBBON_FILE_MENU_WIDTH = '--fileMenuWidth';
 /** @hidden */
 export var RIBBON_HELP_PANE_TEMPLATE_WIDTH = '--helpTemplateWidth';

package/src/ribbon/base/interface.d.ts

@@ -1,5 +1,5 @@
 import { BaseEventArgs } from '@syncfusion/ej2-base';
-import { RibbonCollectionModel, RibbonGroupModel, RibbonItemModel, RibbonTooltipModel } from '../models';
+import { RibbonCollectionModel, RibbonGroupButtonItemModel, RibbonGroupModel, RibbonItemModel, RibbonTooltipModel } from '../models';
 /**
  * Defines the layout types of ribbon.
  */
@@ -64,7 +64,7 @@ export declare enum DisplayMode {
      */
     Overflow = 1,
     /**
-      * The item appears in classic layout group, simplified layout group, and overflow popup based on ribbon overflow state.
+     * The item appears in classic layout group, simplified layout group, and overflow popup based on ribbon overflow state.
      */
     Auto = 7
 }
@@ -96,11 +96,28 @@ export declare enum RibbonItemType {
      * Renders splitbutton as ribbon item.
      */
     SplitButton = "SplitButton",
+    /**
+     * Renders the group button content as ribbon item.
+     */
+    GroupButton = "GroupButton",
     /**
      * Renders the template content as ribbon item.
      */
     Template = "Template"
 }
+/**
+ * Defines the alignment of the items in the ribbon group.
+ */
+export declare enum RibbonGroupButtonSelection {
+    /**
+     * Allows selecting single button from button group.
+     */
+    Single = "Single",
+    /**
+     * Allows selecting multiple buttons from button group.
+     */
+    Multiple = "Multiple"
+}
 /**
  * Event triggers before selecting the tab item.
  */
@@ -153,6 +170,36 @@ export interface LauncherClickEventArgs extends BaseEventArgs {
      */
     groupId: string;
 }
+/**
+ * Triggers before clicking the button from group button
+ */
+export interface BeforeClickGroupButtonEventArgs extends BaseEventArgs {
+    /**
+     *  Defines whether to cancel the event or not.
+     */
+    cancel: boolean;
+    /**
+     *  Defines the collection of previous selected group button item(s).
+     */
+    previousItems: RibbonGroupButtonItemModel[];
+    /**
+     *  Defines the collection of current selecting group button item(s).
+     */
+    selectingItems: RibbonGroupButtonItemModel[];
+}
+/**
+ * Triggers after clicking the button from group button.
+ */
+export interface ClickGroupButtonEventArgs extends BaseEventArgs {
+    /**
+     *  Defines the collection of previous selected group button item(s).
+     */
+    previousItems: RibbonGroupButtonItemModel[];
+    /**
+     *  Defines the collection of current selected group button item(s).
+     */
+    selectedItems: RibbonGroupButtonItemModel[];
+}
 /** @hidden */
 export interface itemProps {
     item?: RibbonItemModel;

package/src/ribbon/base/interface.js

@@ -66,7 +66,7 @@ export var DisplayMode;
      */
     DisplayMode[DisplayMode["Overflow"] = 1] = "Overflow";
     /**
-      * The item appears in classic layout group, simplified layout group, and overflow popup based on ribbon overflow state.
+     * The item appears in classic layout group, simplified layout group, and overflow popup based on ribbon overflow state.
      */
     DisplayMode[DisplayMode["Auto"] = 7] = "Auto";
 })(DisplayMode || (DisplayMode = {}));
@@ -99,8 +99,26 @@ export var RibbonItemType;
      * Renders splitbutton as ribbon item.
      */
     RibbonItemType["SplitButton"] = "SplitButton";
+    /**
+     * Renders the group button content as ribbon item.
+     */
+    RibbonItemType["GroupButton"] = "GroupButton";
     /**
      * Renders the template content as ribbon item.
      */
     RibbonItemType["Template"] = "Template";
 })(RibbonItemType || (RibbonItemType = {}));
+/**
+ * Defines the alignment of the items in the ribbon group.
+ */
+export var RibbonGroupButtonSelection;
+(function (RibbonGroupButtonSelection) {
+    /**
+     * Allows selecting single button from button group.
+     */
+    RibbonGroupButtonSelection["Single"] = "Single";
+    /**
+     * Allows selecting multiple buttons from button group.
+     */
+    RibbonGroupButtonSelection["Multiple"] = "Multiple";
+})(RibbonGroupButtonSelection || (RibbonGroupButtonSelection = {}));

package/src/ribbon/base/ribbon-model.d.ts

@@ -1,4 +1,4 @@
-import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, RibbonItem, RibbonCollection, RibbonGroup } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { CheckBox } from '@syncfusion/ej2-buttons';
+import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { CheckBox } from '@syncfusion/ej2-buttons';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -32,6 +32,13 @@ export interface RibbonModel extends ComponentModel{
      */
     fileMenu?: FileMenuSettingsModel;
 
+    /**
+     * Defines the properties of ribbon backstage.
+     *
+     * @default {}
+     */
+    backStageMenu?: BackStageMenuModel;
+
     /**
      * Defines the icon CSS for the launcher icon button in group header.
      *
@@ -87,10 +94,20 @@ export interface RibbonModel extends ComponentModel{
      * The help pane appears on the right side of the ribbon header row.
      *
      * @default ''
+     * @angularType string | object | HTMLElement
+     * @reactType string | function | JSX.Element | HTMLElement
+     * @vueType string | function | HTMLElement
      * @aspType string
      */
     helpPaneTemplate?: string | HTMLElement | Function;
 
+    /**
+     * Defines whether to show the layout switcher button or not.
+     *
+     * @default false
+     */
+    hideLayoutSwitcher?: boolean;
+
     /**
      * Event triggers before selecting the tab item.
      *
@@ -126,4 +143,11 @@ export interface RibbonModel extends ComponentModel{
      */
     launcherIconClick?: EmitType<LauncherClickEventArgs>;
 
+    /**
+     * Event triggers once the Ribbon Component rendering is completed.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
 }

package/src/ribbon/base/ribbon.d.ts

@@ -1,11 +1,11 @@
 import { Component, EmitType } from '@syncfusion/ej2-base';
 import { INotifyPropertyChanged, ModuleDeclaration } from '@syncfusion/ej2-base';
 import { Tab, TabAnimationSettingsModel } from '@syncfusion/ej2-navigations';
-import { RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettingsModel } from '../models/index';
+import { RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettingsModel, BackStageMenuModel } from '../models/index';
 import { RibbonModel } from './ribbon-model';
 import { ExpandCollapseEventArgs, LauncherClickEventArgs, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';
-import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton } from '../items/index';
-import { RibbonFileMenu } from '../modules/index';
+import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';
+import { RibbonFileMenu, RibbonBackstage } from '../modules/index';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 /**
  * The Ribbon Component is a structured layout to manage tools with tabs and groups.
@@ -34,6 +34,12 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * @default {}
      */
     fileMenu: FileMenuSettingsModel;
+    /**
+     * Defines the properties of ribbon backstage.
+     *
+     * @default {}
+     */
+    backStageMenu: BackStageMenuModel;
     /**
      * Defines the icon CSS for the launcher icon button in group header.
      *
@@ -82,9 +88,18 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * The help pane appears on the right side of the ribbon header row.
      *
      * @default ''
+     * @angularType string | object | HTMLElement
+     * @reactType string | function | JSX.Element | HTMLElement
+     * @vueType string | function | HTMLElement
      * @aspType string
      */
     helpPaneTemplate: string | HTMLElement | Function;
+    /**
+     * Defines whether to show the layout switcher button or not.
+     *
+     * @default false
+     */
+    hideLayoutSwitcher: boolean;
     /**
      * Event triggers before selecting the tab item.
      *
@@ -115,6 +130,12 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * @event launcherIconClick
      */
     launcherIconClick: EmitType<LauncherClickEventArgs>;
+    /**
+     * Event triggers once the Ribbon Component rendering is completed.
+     *
+     * @event created
+     */
+    created: EmitType<Event>;
     /**
      * The `ribbonButtonModule` is used to create and manipulate buttons in ribbon item.
      */
@@ -143,6 +164,14 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * The `ribbonFileMenuModule` is used to create and manipulate the ribbon file menu.
      */
     ribbonFileMenuModule: RibbonFileMenu;
+    /**
+     * The `ribbonBackstageModule` is used to create and manipulate the ribbon backstage.
+     */
+    ribbonBackstageModule: RibbonBackstage;
+    /**
+     * The `ribbonGroupButtonModule` is used to create and manipulate group button in ribbon item.
+     */
+    ribbonGroupButtonModule: RibbonGroupButton;
     private itemIndex;
     private idIndex;
     private isAddRemove;
@@ -224,6 +253,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
     private checkGroupExpanding;
     private checkSmallToMedium;
     private checkMediumToLarge;
+    private handleContentSize;
     private setItemSize;
     private createOverflowDropdown;
     private removeOverflowDropdown;
@@ -274,6 +304,36 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * @returns {void}
      */
     selectTab(tabId: string): void;
+    /**
+     * Shows a specific tab in the ribbon.
+     *
+     * @param {string} tabId - The ID of the tab to be shown.
+     * @returns {void}
+     */
+    showTab(tabId: string): void;
+    /**
+     * Hides a specific tab in the ribbon.
+     *
+     * @param {string} tabId - The ID of the tab to be hidden.
+     * @returns {void}
+     */
+    hideTab(tabId: string): void;
+    private showHideTab;
+    /**
+     * Enables a specific tab in the ribbon.
+     *
+     * @param {string} tabId - The ID of the tab to be enabled.
+     * @returns {void}
+     */
+    enableTab(tabId: string): void;
+    /**
+     * Disables a specific tab in the ribbon.
+     *
+     * @param {string} tabId - The ID of the tab to be disabled.
+     * @returns {void}
+     */
+    disableTab(tabId: string): void;
+    private enableDisableTab;
     /**
      * Adds the ribbon tab.
      *
@@ -307,6 +367,36 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * @returns {void}
      */
     removeGroup(groupId: string): void;
+    /**
+     * Hides a specific group within a ribbon tab.
+     *
+     * @param {string} groupID - The ID of the group to be hidden.
+     * @returns {void}
+     */
+    hideGroup(groupID: string): void;
+    /**
+     * Shows a specific group within a ribbon tab.
+     *
+     * @param {string} groupID - The ID of the group to be shown.
+     * @returns {void}
+     */
+    showGroup(groupID: string): void;
+    private showHideGroup;
+    /**
+     * Disables a specific group within a ribbon tab.
+     *
+     * @param {string} groupID - The ID of the group to be disabled.
+     * @returns {void}
+     */
+    disableGroup(groupID: string): void;
+    /**
+     * Enables a specific group within a ribbon tab.
+     *
+     * @param {string} groupID - The ID of the group to be enabled.
+     * @returns {void}
+     */
+    enableGroup(groupID: string): void;
+    private enableDisableGroup;
     /**
      * adds the ribbon collection.
      *
@@ -341,6 +431,21 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * @returns {void}
      */
     removeItem(itemId: string): void;
+    /**
+     * Hides a specific ribbon item.
+     *
+     * @param {string} itemId - The ID of the item to be hidden.
+     * @returns {void}
+     */
+    hideItem(itemId: string): void;
+    /**
+     * Shows a specific ribbon item.
+     *
+     * @param {string} itemId - The ID of the item to be shown.
+     * @returns {void}
+     */
+    showItem(itemId: string): void;
+    private showHideItem;
     /**
      * tab - Gets the ribbon tab to be updated. The id of the tab is a required property. Other properties are optional.
      *