@itwin/appui-react 5.2.0 → 5.3.1

package/lib/appui-react/layout/widget/ToolsArea.js

@@ -8,8 +8,7 @@
 import "./ToolsArea.scss";
 import classnames from "classnames";
 import * as React from "react";
-/** ToolsArea widget is used in ToolsArea (top left) and Navigation (top right) zones of 9-Zone UI.
- * @note Should be placed in [[Zone]] component.
+/** A component that renders toolbars in the top left corner of standard layout.
  * @internal
  */
 export class ToolsArea extends React.PureComponent {
@@ -20,7 +19,7 @@ export class ToolsArea extends React.PureComponent {
         const className = classnames("nz-tools-widget", this.props.className);
         return (React.createElement("div", { className: className, style: this.props.style },
             React.createElement("div", { className: "nz-app-button", onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, button),
-            React.createElement("div", { className: "nz-vertical-toolbar-container", onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, this.props.verticalToolbar),
+            React.createElement("div", { className: classnames("nz-vertical-toolbar-container", !button && "nz-span"), onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, this.props.verticalToolbar),
             React.createElement("div", { className: "nz-horizontal-toolbar-container", onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, this.props.horizontalToolbar)));
     }
 }

package/lib/appui-react/layout/widget/ToolsArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolsArea.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/ToolsArea.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,aAA6B;IAChD,MAAM;QACpB,MAAM,MAAM,GAAG,KAAK,CAAC,cAAc,CAAqB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YACxE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YACxD,CAAC,CAAC,IAAI,CAAC,CAAC,yBAAyB;QACnC,MAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAEtE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAChD,6BACE,SAAS,EAAC,eAAe,EACzB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,MAAM,CACH;YACN,6BACE,SAAS,EAAC,+BAA+B,EACzC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,IAAI,CAAC,KAAK,CAAC,eAAe,CACvB;YACN,6BACE,SAAS,EAAC,iCAAiC,EAC3C,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CACzB,CACF,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./ToolsArea.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport type { ToolbarButtonProps } from \"./tools/button/Button.js\";\n\n/** Properties of [[ToolsArea]] component.\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface ToolsAreaProps extends CommonProps, NoChildrenProps {\n  /**\n   * Button displayed between horizontal and vertical toolbars.\n   * I.e. [[AppButton]] in ToolsArea zone.\n   */\n  button?: React.ReactNode;\n  /** Horizontal toolbar. See [[Toolbar]] */\n  horizontalToolbar?: React.ReactNode;\n  /** Vertical toolbar. See [[Toolbar]] */\n  verticalToolbar?: React.ReactNode;\n  /** Handler for mouse enter */\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Handler for mouse leave */\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/** ToolsArea widget is used in ToolsArea (top left) and Navigation (top right) zones of 9-Zone UI.\n * @note Should be placed in [[Zone]] component.\n * @internal\n */\nexport class ToolsArea extends React.PureComponent<ToolsAreaProps> {\n  public override render() {\n    const button = React.isValidElement<ToolbarButtonProps>(this.props.button)\n      ? React.cloneElement(this.props.button, { small: true })\n      : null; // ensure button is small\n    const className = classnames(\"nz-tools-widget\", this.props.className);\n\n    return (\n      <div className={className} style={this.props.style}>\n        <div\n          className=\"nz-app-button\"\n          onMouseEnter={this.props.onMouseEnter}\n          onMouseLeave={this.props.onMouseLeave}\n        >\n          {button}\n        </div>\n        <div\n          className=\"nz-vertical-toolbar-container\"\n          onMouseEnter={this.props.onMouseEnter}\n          onMouseLeave={this.props.onMouseLeave}\n        >\n          {this.props.verticalToolbar}\n        </div>\n        <div\n          className=\"nz-horizontal-toolbar-container\"\n          onMouseEnter={this.props.onMouseEnter}\n          onMouseLeave={this.props.onMouseLeave}\n        >\n          {this.props.horizontalToolbar}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ToolsArea.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/ToolsArea.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,aAA6B;IAChD,MAAM;QACpB,MAAM,MAAM,GAAG,KAAK,CAAC,cAAc,CAAqB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YACxE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YACxD,CAAC,CAAC,IAAI,CAAC,CAAC,yBAAyB;QACnC,MAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAEtE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAChD,6BACE,SAAS,EAAC,eAAe,EACzB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,MAAM,CACH;YACN,6BACE,SAAS,EAAE,UAAU,CACnB,+BAA+B,EAC/B,CAAC,MAAM,IAAI,SAAS,CACrB,EACD,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,IAAI,CAAC,KAAK,CAAC,eAAe,CACvB;YACN,6BACE,SAAS,EAAC,iCAAiC,EAC3C,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CACzB,CACF,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./ToolsArea.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport type { ToolbarButtonProps } from \"./tools/button/Button.js\";\n\n/** Properties of [[ToolsArea]] component.\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface ToolsAreaProps extends CommonProps, NoChildrenProps {\n  /**\n   * Button displayed between horizontal and vertical toolbars.\n   * I.e. [[AppButton]] in ToolsArea zone.\n   */\n  button?: React.ReactNode;\n  /** Horizontal toolbar. See [[Toolbar]] */\n  horizontalToolbar?: React.ReactNode;\n  /** Vertical toolbar. See [[Toolbar]] */\n  verticalToolbar?: React.ReactNode;\n  /** Handler for mouse enter */\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Handler for mouse leave */\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/** A component that renders toolbars in the top left corner of standard layout.\n * @internal\n */\nexport class ToolsArea extends React.PureComponent<ToolsAreaProps> {\n  public override render() {\n    const button = React.isValidElement<ToolbarButtonProps>(this.props.button)\n      ? React.cloneElement(this.props.button, { small: true })\n      : null; // ensure button is small\n    const className = classnames(\"nz-tools-widget\", this.props.className);\n\n    return (\n      <div className={className} style={this.props.style}>\n        <div\n          className=\"nz-app-button\"\n          onMouseEnter={this.props.onMouseEnter}\n          onMouseLeave={this.props.onMouseLeave}\n        >\n          {button}\n        </div>\n        <div\n          className={classnames(\n            \"nz-vertical-toolbar-container\",\n            !button && \"nz-span\"\n          )}\n          onMouseEnter={this.props.onMouseEnter}\n          onMouseLeave={this.props.onMouseLeave}\n        >\n          {this.props.verticalToolbar}\n        </div>\n        <div\n          className=\"nz-horizontal-toolbar-container\"\n          onMouseEnter={this.props.onMouseEnter}\n          onMouseLeave={this.props.onMouseLeave}\n        >\n          {this.props.horizontalToolbar}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/lib/appui-react/layout/widget/ToolsArea.scss

@@ -13,9 +13,11 @@
 
   display: grid;
   grid-gap: 6px;
-  grid-template:
-    "appButton htools" auto
-    "vtools ." 1fr / auto 1fr;
+  grid-template-areas:
+    "button htools"
+    "vtools .";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
   align-items: start;
   justify-items: start;
 
@@ -25,7 +27,7 @@
   }
 
   > .nz-app-button {
-    grid-area: appButton;
+    grid-area: button;
 
     pointer-events: auto;
     @include nz-widget-opacity;
@@ -38,6 +40,10 @@
     display: inline-flex;
     flex-direction: column;
     @include nz-widget-opacity;
+
+    &.nz-span {
+      grid-row: button / vtools;
+    }
   }
 
   > .nz-horizontal-toolbar-container {

package/lib/appui-react/layout/widget/WidgetAction.d.ts

@@ -0,0 +1,16 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+interface WidgetActionProps extends React.HTMLAttributes<HTMLElement> {
+    label: string;
+    icon: React.JSX.Element;
+    onClick?: () => void;
+}
+/** A widget action rendered in a widget title bar.
+ * Should be used in {@link WidgetActions} component.
+ * @alpha
+ */
+export declare function WidgetAction(props: WidgetActionProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=WidgetAction.d.ts.map

package/lib/appui-react/layout/widget/WidgetAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetAction.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/WidgetAction.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAsBpD"}

package/lib/appui-react/{preview/widget-action-dropdown/Button.js → layout/widget/WidgetAction.js}

@@ -7,17 +7,21 @@
  */
 import * as React from "react";
 import { MenuItem } from "@itwin/itwinui-react";
-import { WidgetActionDropdownContext } from "./MoreButton.js";
-import { TabBarButton } from "../../layout/widget/Button.js";
-/** @internal */
-export function ActionButton(props) {
+import { WidgetActionDropdownContext } from "../../preview/widget-action-dropdown/MoreButton.js";
+import { TabBarButton } from "./Button.js";
+/** A widget action rendered in a widget title bar.
+ * Should be used in {@link WidgetActions} component.
+ * @alpha
+ */
+export function WidgetAction(props) {
+    const { label, icon, onClick, ...rest } = props;
     const dropdownContext = React.useContext(WidgetActionDropdownContext);
     if (dropdownContext !== undefined) {
-        return (React.createElement(MenuItem, { icon: props.icon, onClick: () => {
-                props.onClick?.();
+        return (React.createElement(MenuItem, { startIcon: icon, onClick: () => {
+                onClick?.();
                 dropdownContext.onClose();
-            }, ...props.menuProps }, props.label));
+            }, ...rest }, label));
     }
-    return (React.createElement(TabBarButton, { onClick: props.onClick, label: props.label, ...props.buttonProps }, props.icon));
+    return (React.createElement(TabBarButton, { onClick: onClick, label: label, ...rest }, icon));
 }
-//# sourceMappingURL=Button.js.map
+//# sourceMappingURL=WidgetAction.js.map

package/lib/appui-react/layout/widget/WidgetAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetAction.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/WidgetAction.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,2BAA2B,EAAE,MAAM,oDAAoD,CAAC;AACjG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAS3C;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;IACtE,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;QAClC,OAAO,CACL,oBAAC,QAAQ,IACP,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,EAAE,EAAE,CAAC;gBACZ,eAAe,CAAC,OAAO,EAAE,CAAC;YAC5B,CAAC,KACG,IAAI,IAEP,KAAK,CACG,CACZ,CAAC;IACJ,CAAC;IACD,OAAO,CACL,oBAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,KAAM,IAAI,IACnD,IAAI,CACQ,CAChB,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { MenuItem } from \"@itwin/itwinui-react\";\nimport { WidgetActionDropdownContext } from \"../../preview/widget-action-dropdown/MoreButton.js\";\nimport { TabBarButton } from \"./Button.js\";\nimport type { WidgetActions } from \"./WidgetActions.js\";\n\ninterface WidgetActionProps extends React.HTMLAttributes<HTMLElement> {\n  label: string;\n  icon: React.JSX.Element;\n  onClick?: () => void;\n}\n\n/** A widget action rendered in a widget title bar.\n * Should be used in {@link WidgetActions} component.\n * @alpha\n */\nexport function WidgetAction(props: WidgetActionProps) {\n  const { label, icon, onClick, ...rest } = props;\n  const dropdownContext = React.useContext(WidgetActionDropdownContext);\n  if (dropdownContext !== undefined) {\n    return (\n      <MenuItem\n        startIcon={icon}\n        onClick={() => {\n          onClick?.();\n          dropdownContext.onClose();\n        }}\n        {...rest}\n      >\n        {label}\n      </MenuItem>\n    );\n  }\n  return (\n    <TabBarButton onClick={onClick} label={label} {...rest}>\n      {icon}\n    </TabBarButton>\n  );\n}\n"]}

package/lib/appui-react/layout/widget/WidgetActions.d.ts

@@ -0,0 +1,45 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./WidgetActions.scss";
+import * as React from "react";
+import { Dock } from "./Dock.js";
+import { PinToggle } from "./PinToggle.js";
+import { PopoutToggle } from "./PopoutToggle.js";
+import { PreviewHorizontalPanelAlignButton } from "../../preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign.js";
+import { SendBack } from "./SendBack.js";
+import { MaximizeToggle } from "../../preview/enable-maximized-widget/MaximizeToggle.js";
+import { CloseWidgetButton } from "../../preview/control-widget-visibility/CloseWidgetButton.js";
+import { AddWidgetButton } from "../../preview/control-widget-visibility/AddWidgetButton.js";
+declare const widgetActions: {
+    popout: typeof PopoutToggle;
+    sendBack: typeof SendBack;
+    dock: typeof Dock;
+    pin: typeof PinToggle;
+    maximize: typeof MaximizeToggle;
+    horizontalAlign: typeof PreviewHorizontalPanelAlignButton;
+    closeWidget: typeof CloseWidgetButton;
+    addWidget: typeof AddWidgetButton;
+};
+/** @internal */
+export type WidgetActionId = keyof typeof widgetActions;
+interface WidgetActionSpec {
+    id: WidgetActionId | (string & {});
+    action: React.ComponentType;
+}
+interface WidgetActionsProps {
+    /** Function to modify the default widget actions.
+     * Use {@link WidgetAction} component when adding new widget actions.
+     */
+    modifyActions?: (defaultActions: WidgetActionSpec[]) => WidgetActionSpec[];
+}
+/**
+ * Renders widget actions in the widget title bar.
+ * Should be used in `widgetActions` prop of {@link StandardLayout} component.
+ * @alpha
+ */
+export declare function WidgetActions(props: WidgetActionsProps): React.JSX.Element;
+/** @internal */
+export declare function useWidgetActions(): WidgetActionId[];
+export {};
+//# sourceMappingURL=WidgetActions.d.ts.map

package/lib/appui-react/layout/widget/WidgetActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetActions.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/WidgetActions.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAW,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAgB,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAmB,MAAM,mBAAmB,CAAC;AAClE,OAAO,EACL,iCAAiC,EAElC,MAAM,yEAAyE,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAe,MAAM,eAAe,CAAC;AAKtD,OAAO,EACL,cAAc,EAEf,MAAM,yDAAyD,CAAC;AACjE,OAAO,EACL,iBAAiB,EAElB,MAAM,8DAA8D,CAAC;AACtE,OAAO,EACL,eAAe,EAEhB,MAAM,4DAA4D,CAAC;AAIpE,QAAA,MAAM,aAAa;;;;;;;;;CASlB,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,aAAa,CAAC;AAExD,UAAU,gBAAgB;IACxB,EAAE,EAAE,cAAc,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,UAAU,kBAAkB;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,cAAc,EAAE,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,CAAC;CAC5E;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAsBtD;AAED,gBAAgB;AAChB,wBAAgB,gBAAgB,IAAI,cAAc,EAAE,CAmBnD"}

package/lib/appui-react/layout/widget/{Buttons.js → WidgetActions.js}

@@ -5,46 +5,52 @@
 /** @packageDocumentation
  * @module Widget
  */
-import "./Buttons.scss";
+import "./WidgetActions.scss";
 import * as React from "react";
 import { Dock, useDock } from "./Dock.js";
 import { PinToggle, usePinToggle } from "./PinToggle.js";
 import { PopoutToggle, usePopoutToggle } from "./PopoutToggle.js";
 import { PreviewHorizontalPanelAlignButton, useHorizontalPanelAlignButton, } from "../../preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign.js";
 import { SendBack, useSendBack } from "./SendBack.js";
-import { MoreButton, useDropdownFeatures, } from "../../preview/widget-action-dropdown/MoreButton.js";
+import { MoreButton, useDropdownActions, } from "../../preview/widget-action-dropdown/MoreButton.js";
 import { MaximizeToggle, useMaximizeToggle, } from "../../preview/enable-maximized-widget/MaximizeToggle.js";
 import { CloseWidgetButton, useCloseTab, } from "../../preview/control-widget-visibility/CloseWidgetButton.js";
 import { AddWidgetButton, useAddTab, } from "../../preview/control-widget-visibility/AddWidgetButton.js";
-/** @internal */
-export function TabBarButtons() {
-    const features = useWidgetFeatures();
-    const [sortedFeatures, isDropdown] = useDropdownFeatures(features);
-    const buttons = sortedFeatures.map((feature) => {
-        switch (feature) {
-            case "popout":
-                return React.createElement(PopoutToggle, { key: "popout" });
-            case "maximize":
-                return React.createElement(MaximizeToggle, { key: "maximize" });
-            case "sendBack":
-                return React.createElement(SendBack, { key: "sendBack" });
-            case "dock":
-                return React.createElement(Dock, { key: "dock" });
-            case "horizontalAlign":
-                return React.createElement(PreviewHorizontalPanelAlignButton, { key: "horizontalAlign" });
-            case "pin":
-                return React.createElement(PinToggle, { key: "pin" });
-            case "closeWidget":
-                return React.createElement(CloseWidgetButton, { key: "closeWidget" });
-            case "addWidget":
-                return React.createElement(AddWidgetButton, { key: "addWidget" });
-        }
-        return undefined;
+const widgetActions = {
+    popout: PopoutToggle,
+    sendBack: SendBack,
+    dock: Dock,
+    pin: PinToggle,
+    maximize: MaximizeToggle,
+    horizontalAlign: PreviewHorizontalPanelAlignButton,
+    closeWidget: CloseWidgetButton,
+    addWidget: AddWidgetButton,
+};
+/**
+ * Renders widget actions in the widget title bar.
+ * Should be used in `widgetActions` prop of {@link StandardLayout} component.
+ * @alpha
+ */
+export function WidgetActions(props) {
+    const { modifyActions } = props;
+    const defaultActions = useWidgetActions();
+    const [dropdownActions, isDropdown] = useDropdownActions(defaultActions);
+    const finalActions = React.useMemo(() => {
+        const knownActions = dropdownActions.map((feature) => ({
+            id: feature,
+            action: widgetActions[feature],
+        }));
+        if (!modifyActions)
+            return knownActions;
+        return modifyActions(knownActions);
+    }, [dropdownActions, modifyActions]);
+    const buttons = finalActions.map(({ id, action: Action }) => {
+        return React.createElement(Action, { key: id });
     });
-    return (React.createElement("div", { className: "nz-widget-buttons" }, isDropdown ? React.createElement(MoreButton, null, buttons) : buttons));
+    return (React.createElement("div", { className: "nz-widget-widgetActions" }, isDropdown ? React.createElement(MoreButton, null, buttons) : buttons));
 }
 /** @internal */
-export function useWidgetFeatures() {
+export function useWidgetActions() {
     const popoutToggle = usePopoutToggle();
     const maximizeToggle = useMaximizeToggle();
     const sendBack = useSendBack();
@@ -64,4 +70,4 @@ export function useWidgetFeatures() {
         ...(pinToggle ? ["pin"] : []),
     ];
 }
-//# sourceMappingURL=Buttons.js.map
+//# sourceMappingURL=WidgetActions.js.map

package/lib/appui-react/layout/widget/WidgetActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetActions.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/WidgetActions.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./WidgetActions.scss\";\nimport * as React from \"react\";\nimport { Dock, useDock } from \"./Dock.js\";\nimport { PinToggle, usePinToggle } from \"./PinToggle.js\";\nimport { PopoutToggle, usePopoutToggle } from \"./PopoutToggle.js\";\nimport {\n  PreviewHorizontalPanelAlignButton,\n  useHorizontalPanelAlignButton,\n} from \"../../preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign.js\";\nimport { SendBack, useSendBack } from \"./SendBack.js\";\nimport {\n  MoreButton,\n  useDropdownActions,\n} from \"../../preview/widget-action-dropdown/MoreButton.js\";\nimport {\n  MaximizeToggle,\n  useMaximizeToggle,\n} from \"../../preview/enable-maximized-widget/MaximizeToggle.js\";\nimport {\n  CloseWidgetButton,\n  useCloseTab,\n} from \"../../preview/control-widget-visibility/CloseWidgetButton.js\";\nimport {\n  AddWidgetButton,\n  useAddTab,\n} from \"../../preview/control-widget-visibility/AddWidgetButton.js\";\nimport type { StandardLayout } from \"../../configurableui/ConfigurableUiContent.js\";\nimport type { WidgetAction } from \"./WidgetAction.js\";\n\nconst widgetActions = {\n  popout: PopoutToggle,\n  sendBack: SendBack,\n  dock: Dock,\n  pin: PinToggle,\n  maximize: MaximizeToggle,\n  horizontalAlign: PreviewHorizontalPanelAlignButton,\n  closeWidget: CloseWidgetButton,\n  addWidget: AddWidgetButton,\n};\n\n/** @internal */\nexport type WidgetActionId = keyof typeof widgetActions;\n\ninterface WidgetActionSpec {\n  id: WidgetActionId | (string & {});\n  action: React.ComponentType;\n}\n\ninterface WidgetActionsProps {\n  /** Function to modify the default widget actions.\n   * Use {@link WidgetAction} component when adding new widget actions.\n   */\n  modifyActions?: (defaultActions: WidgetActionSpec[]) => WidgetActionSpec[];\n}\n\n/**\n * Renders widget actions in the widget title bar.\n * Should be used in `widgetActions` prop of {@link StandardLayout} component.\n * @alpha\n */\nexport function WidgetActions(props: WidgetActionsProps) {\n  const { modifyActions } = props;\n  const defaultActions = useWidgetActions();\n  const [dropdownActions, isDropdown] = useDropdownActions(defaultActions);\n  const finalActions = React.useMemo(() => {\n    const knownActions = dropdownActions.map((feature) => ({\n      id: feature,\n      action: widgetActions[feature],\n    }));\n    if (!modifyActions) return knownActions;\n    return modifyActions(knownActions);\n  }, [dropdownActions, modifyActions]);\n\n  const buttons = finalActions.map(({ id, action: Action }) => {\n    return <Action key={id} />;\n  });\n\n  return (\n    <div className=\"nz-widget-widgetActions\">\n      {isDropdown ? <MoreButton>{buttons}</MoreButton> : buttons}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useWidgetActions(): WidgetActionId[] {\n  const popoutToggle = usePopoutToggle();\n  const maximizeToggle = useMaximizeToggle();\n  const sendBack = useSendBack();\n  const dock = useDock();\n  const horizontalPanelAlignButton = useHorizontalPanelAlignButton();\n  const pinToggle = usePinToggle();\n  const closeTab = useCloseTab();\n  const addTab = useAddTab();\n  return [\n    ...(addTab ? ([\"addWidget\"] as const) : []),\n    ...(closeTab ? ([\"closeWidget\"] as const) : []),\n    ...(popoutToggle ? ([\"popout\"] as const) : []),\n    ...(maximizeToggle ? ([\"maximize\"] as const) : []),\n    ...(sendBack ? ([\"sendBack\"] as const) : []),\n    ...(dock ? ([\"dock\"] as const) : []),\n    ...(horizontalPanelAlignButton ? ([\"horizontalAlign\"] as const) : []),\n    ...(pinToggle ? ([\"pin\"] as const) : []),\n  ];\n}\n"]}

package/lib/appui-react/layout/widget/{Buttons.scss → WidgetActions.scss}

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.nz-widget-buttons {
+.nz-widget-widgetActions {
   display: flex;
   align-items: center;
   align-content: center;

package/lib/appui-react/layout/widget-panels/useAnimatePanel.d.ts

@@ -8,6 +8,6 @@ export declare function useAnimatePanel(): {
     size: number;
     handleTransitionEnd: (e: React.TransitionEvent<HTMLDivElement>) => void;
     contentSize: number | undefined;
-    transition: "init" | "transition" | undefined;
+    transition: "transition" | "init" | undefined;
 };
 //# sourceMappingURL=useAnimatePanel.d.ts.map

package/lib/appui-react/preview/control-widget-visibility/CloseWidgetButton.js

@@ -7,7 +7,7 @@
  */
 import * as React from "react";
 import { SvgCloseSmall } from "@itwin/itwinui-icons-react";
-import { ActionButton } from "../widget-action-dropdown/Button.js";
+import { WidgetAction } from "../../layout/widget/WidgetAction.js";
 import { usePreviewFeatures } from "../PreviewFeatures.js";
 import { useActiveTabId } from "../../layout/widget/Widget.js";
 import { NineZoneDispatchContext } from "../../layout/base/NineZone.js";
@@ -15,7 +15,7 @@ import { NineZoneDispatchContext } from "../../layout/base/NineZone.js";
 export function CloseWidgetButton() {
     const id = useActiveTabId();
     const dispatch = React.useContext(NineZoneDispatchContext);
-    return (React.createElement(ActionButton, { icon: React.createElement(SvgCloseSmall, null), label: "Close widget", onClick: () => {
+    return (React.createElement(WidgetAction, { icon: React.createElement(SvgCloseSmall, null), label: "Close widget", onClick: () => {
             dispatch({
                 type: "WIDGET_TAB_HIDE",
                 id,

package/lib/appui-react/preview/control-widget-visibility/CloseWidgetButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloseWidgetButton.js","sourceRoot":"","sources":["../../../../src/appui-react/preview/control-widget-visibility/CloseWidgetButton.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAExE,gBAAgB;AAChB,MAAM,UAAU,iBAAiB;IAC/B,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAE3D,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,EAAE,oBAAC,aAAa,OAAG,EACvB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC;gBACP,IAAI,EAAE,iBAAiB;gBACvB,EAAE;aACH,CAAC,CAAC;QACL,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,WAAW;IACzB,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5B,MAAM,EAAE,uBAAuB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACzD,IAAI,KAAK,CAAC,OAAO,CAAC,uBAAuB,CAAC,EAAE,CAAC;QAC3C,OAAO,uBAAuB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IACD,OAAO,CAAC,CAAC,uBAAuB,CAAC;AACnC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { SvgCloseSmall } from \"@itwin/itwinui-icons-react\";\nimport { ActionButton } from \"../widget-action-dropdown/Button.js\";\nimport { usePreviewFeatures } from \"../PreviewFeatures.js\";\nimport { useActiveTabId } from \"../../layout/widget/Widget.js\";\nimport { NineZoneDispatchContext } from \"../../layout/base/NineZone.js\";\n\n/** @internal */\nexport function CloseWidgetButton() {\n  const id = useActiveTabId();\n  const dispatch = React.useContext(NineZoneDispatchContext);\n\n  return (\n    <ActionButton\n      icon={<SvgCloseSmall />}\n      label=\"Close widget\"\n      onClick={() => {\n        dispatch({\n          type: \"WIDGET_TAB_HIDE\",\n          id,\n        });\n      }}\n    />\n  );\n}\n\n/** @internal */\nexport function useCloseTab() {\n  const id = useActiveTabId();\n  const { controlWidgetVisibility } = usePreviewFeatures();\n  if (Array.isArray(controlWidgetVisibility)) {\n    return controlWidgetVisibility.includes(id);\n  }\n  return !!controlWidgetVisibility;\n}\n"]}
+{"version":3,"file":"CloseWidgetButton.js","sourceRoot":"","sources":["../../../../src/appui-react/preview/control-widget-visibility/CloseWidgetButton.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAExE,gBAAgB;AAChB,MAAM,UAAU,iBAAiB;IAC/B,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAE3D,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,EAAE,oBAAC,aAAa,OAAG,EACvB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC;gBACP,IAAI,EAAE,iBAAiB;gBACvB,EAAE;aACH,CAAC,CAAC;QACL,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,WAAW;IACzB,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5B,MAAM,EAAE,uBAAuB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACzD,IAAI,KAAK,CAAC,OAAO,CAAC,uBAAuB,CAAC,EAAE,CAAC;QAC3C,OAAO,uBAAuB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IACD,OAAO,CAAC,CAAC,uBAAuB,CAAC;AACnC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { SvgCloseSmall } from \"@itwin/itwinui-icons-react\";\nimport { WidgetAction } from \"../../layout/widget/WidgetAction.js\";\nimport { usePreviewFeatures } from \"../PreviewFeatures.js\";\nimport { useActiveTabId } from \"../../layout/widget/Widget.js\";\nimport { NineZoneDispatchContext } from \"../../layout/base/NineZone.js\";\n\n/** @internal */\nexport function CloseWidgetButton() {\n  const id = useActiveTabId();\n  const dispatch = React.useContext(NineZoneDispatchContext);\n\n  return (\n    <WidgetAction\n      icon={<SvgCloseSmall />}\n      label=\"Close widget\"\n      onClick={() => {\n        dispatch({\n          type: \"WIDGET_TAB_HIDE\",\n          id,\n        });\n      }}\n    />\n  );\n}\n\n/** @internal */\nexport function useCloseTab() {\n  const id = useActiveTabId();\n  const { controlWidgetVisibility } = usePreviewFeatures();\n  if (Array.isArray(controlWidgetVisibility)) {\n    return controlWidgetVisibility.includes(id);\n  }\n  return !!controlWidgetVisibility;\n}\n"]}

package/lib/appui-react/preview/enable-maximized-widget/MaximizeToggle.js

@@ -7,7 +7,7 @@
  */
 import * as React from "react";
 import { SvgWindowMaximize, SvgWindowMinimize, } from "@itwin/itwinui-icons-react";
-import { ActionButton } from "../widget-action-dropdown/Button.js";
+import { WidgetAction } from "../../layout/widget/WidgetAction.js";
 import { WidgetIdContext } from "../../layout/widget/Widget.js";
 import { MaximizedWidgetContext } from "./MaximizedWidget.js";
 import { usePreviewFeatures } from "../PreviewFeatures.js";
@@ -28,7 +28,7 @@ export function MaximizeToggle() {
             label: "Maximize",
             iconSpec: React.createElement(SvgWindowMaximize, null),
         };
-    return (React.createElement(ActionButton, { icon: iconSpec, label: label, onClick: () => {
+    return (React.createElement(WidgetAction, { icon: iconSpec, label: label, onClick: () => {
             setMaximizedWidget(id);
         } }));
 }

package/lib/appui-react/preview/enable-maximized-widget/MaximizeToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaximizeToggle.js","sourceRoot":"","sources":["../../../../src/appui-react/preview/enable-maximized-widget/MaximizeToggle.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,gBAAgB;AAChB,MAAM,UAAU,cAAc;IAC5B,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,UAAU,CAC9D,sBAAsB,CACvB,CAAC;IAEF,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAC3B,eAAe,KAAK,QAAQ;QAC1B,CAAC,CAAC;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,oBAAC,iBAAiB,OAAG;SAChC;QACH,CAAC,CAAC;YACE,EAAE,EAAE,QAAQ;YACZ,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,oBAAC,iBAAiB,OAAG;SAChC,CAAC;IAER,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;YACZ,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,iBAAiB;IAC/B,MAAM,EAAE,6BAA6B,EAAE,0BAA0B,EAAE,GACjE,kBAAkB,EAAE,CAAC;IACvB,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IAEzC,IAAI,6BAA6B,IAAI,gBAAgB;QAAE,OAAO,IAAI,CAAC;IACnE,IAAI,0BAA0B,IAAI,aAAa;QAAE,OAAO,IAAI,CAAC;IAC7D,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport {\n  SvgWindowMaximize,\n  SvgWindowMinimize,\n} from \"@itwin/itwinui-icons-react\";\nimport { ActionButton } from \"../widget-action-dropdown/Button.js\";\nimport { WidgetIdContext } from \"../../layout/widget/Widget.js\";\nimport { MaximizedWidgetContext } from \"./MaximizedWidget.js\";\nimport { usePreviewFeatures } from \"../PreviewFeatures.js\";\nimport { useFloatingWidgetId } from \"../../layout/widget/FloatingWidget.js\";\nimport { usePanelWidgetId } from \"../../layout/widget/usePanelWidgetId.js\";\n\n/** @internal */\nexport function MaximizeToggle() {\n  const widgetId = React.useContext(WidgetIdContext);\n  const { maximizedWidget, setMaximizedWidget } = React.useContext(\n    MaximizedWidgetContext\n  );\n\n  const { id, label, iconSpec } =\n    maximizedWidget === widgetId\n      ? {\n          id: undefined,\n          label: \"Restore\",\n          iconSpec: <SvgWindowMinimize />,\n        }\n      : {\n          id: widgetId,\n          label: \"Maximize\",\n          iconSpec: <SvgWindowMaximize />,\n        };\n\n  return (\n    <ActionButton\n      icon={iconSpec}\n      label={label}\n      onClick={() => {\n        setMaximizedWidget(id);\n      }}\n    />\n  );\n}\n\n/** @internal */\nexport function useMaximizeToggle() {\n  const { enableMaximizedFloatingWidget, enableMaximizedPanelWidget } =\n    usePreviewFeatures();\n  const floatingWidgetId = useFloatingWidgetId();\n  const panelWidgetId = usePanelWidgetId();\n\n  if (enableMaximizedFloatingWidget && floatingWidgetId) return true;\n  if (enableMaximizedPanelWidget && panelWidgetId) return true;\n  return false;\n}\n"]}
+{"version":3,"file":"MaximizeToggle.js","sourceRoot":"","sources":["../../../../src/appui-react/preview/enable-maximized-widget/MaximizeToggle.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,gBAAgB;AAChB,MAAM,UAAU,cAAc;IAC5B,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,UAAU,CAC9D,sBAAsB,CACvB,CAAC;IAEF,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAC3B,eAAe,KAAK,QAAQ;QAC1B,CAAC,CAAC;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,oBAAC,iBAAiB,OAAG;SAChC;QACH,CAAC,CAAC;YACE,EAAE,EAAE,QAAQ;YACZ,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,oBAAC,iBAAiB,OAAG;SAChC,CAAC;IAER,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;YACZ,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,iBAAiB;IAC/B,MAAM,EAAE,6BAA6B,EAAE,0BAA0B,EAAE,GACjE,kBAAkB,EAAE,CAAC;IACvB,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IAEzC,IAAI,6BAA6B,IAAI,gBAAgB;QAAE,OAAO,IAAI,CAAC;IACnE,IAAI,0BAA0B,IAAI,aAAa;QAAE,OAAO,IAAI,CAAC;IAC7D,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport {\n  SvgWindowMaximize,\n  SvgWindowMinimize,\n} from \"@itwin/itwinui-icons-react\";\nimport { WidgetAction } from \"../../layout/widget/WidgetAction.js\";\nimport { WidgetIdContext } from \"../../layout/widget/Widget.js\";\nimport { MaximizedWidgetContext } from \"./MaximizedWidget.js\";\nimport { usePreviewFeatures } from \"../PreviewFeatures.js\";\nimport { useFloatingWidgetId } from \"../../layout/widget/FloatingWidget.js\";\nimport { usePanelWidgetId } from \"../../layout/widget/usePanelWidgetId.js\";\n\n/** @internal */\nexport function MaximizeToggle() {\n  const widgetId = React.useContext(WidgetIdContext);\n  const { maximizedWidget, setMaximizedWidget } = React.useContext(\n    MaximizedWidgetContext\n  );\n\n  const { id, label, iconSpec } =\n    maximizedWidget === widgetId\n      ? {\n          id: undefined,\n          label: \"Restore\",\n          iconSpec: <SvgWindowMinimize />,\n        }\n      : {\n          id: widgetId,\n          label: \"Maximize\",\n          iconSpec: <SvgWindowMaximize />,\n        };\n\n  return (\n    <WidgetAction\n      icon={iconSpec}\n      label={label}\n      onClick={() => {\n        setMaximizedWidget(id);\n      }}\n    />\n  );\n}\n\n/** @internal */\nexport function useMaximizeToggle() {\n  const { enableMaximizedFloatingWidget, enableMaximizedPanelWidget } =\n    usePreviewFeatures();\n  const floatingWidgetId = useFloatingWidgetId();\n  const panelWidgetId = usePanelWidgetId();\n\n  if (enableMaximizedFloatingWidget && floatingWidgetId) return true;\n  if (enableMaximizedPanelWidget && panelWidgetId) return true;\n  return false;\n}\n"]}

package/lib/appui-react/preview/widget-action-dropdown/MoreButton.d.ts

@@ -2,7 +2,7 @@
  * @module Widget
  */
 import * as React from "react";
-import type { WidgetFeature } from "../../layout/widget/Buttons.js";
+import type { WidgetActionId } from "../../layout/widget/WidgetActions.js";
 /** @internal */
 export declare function MoreButton(props: React.PropsWithChildren<object>): React.JSX.Element;
 /** @internal */
@@ -10,5 +10,5 @@ export declare const WidgetActionDropdownContext: React.Context<{
     onClose: () => void;
 } | undefined>;
 /** @internal */
-export declare function useDropdownFeatures(features: WidgetFeature[]): readonly [WidgetFeature[], false] | readonly [WidgetFeature[], true];
+export declare function useDropdownActions(actions: WidgetActionId[]): readonly [("popout" | "sendBack" | "dock" | "pin" | "maximize" | "horizontalAlign" | "closeWidget" | "addWidget")[], false] | readonly [("popout" | "sendBack" | "dock" | "pin" | "maximize" | "horizontalAlign" | "closeWidget" | "addWidget")[], true];
 //# sourceMappingURL=MoreButton.d.ts.map

package/lib/appui-react/preview/widget-action-dropdown/MoreButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoreButton.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/preview/widget-action-dropdown/MoreButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEpE,gBAAgB;AAChB,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,qBAmBhE;AAED,gBAAgB;AAChB,eAAO,MAAM,2BAA2B;aAGzB,MAAM,IAAI;cAEb,CAAC;AA2Bb,gBAAgB;AAChB,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,aAAa,EAAE,wEAS5D"}
+{"version":3,"file":"MoreButton.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/preview/widget-action-dropdown/MoreButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE3E,gBAAgB;AAChB,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,qBAmBhE;AAED,gBAAgB;AAChB,eAAO,MAAM,2BAA2B;aAGzB,MAAM,IAAI;cAEb,CAAC;AA2Bb,gBAAgB;AAChB,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,cAAc,EAAE,4PAS3D"}

package/lib/appui-react/preview/widget-action-dropdown/MoreButton.js

@@ -51,13 +51,13 @@ const order = [
     "sendBack",
 ];
 /** @internal */
-export function useDropdownFeatures(features) {
+export function useDropdownActions(actions) {
     const { widgetActionDropdown } = usePreviewFeatures();
     const threshold = widgetActionDropdown?.threshold ?? Infinity;
-    const isDropdown = features.length > threshold;
+    const isDropdown = actions.length > threshold;
     if (!isDropdown)
-        return [features, false];
-    const sorted = [...features].sort((a, b) => order.indexOf(a) - order.indexOf(b));
+        return [actions, false];
+    const sorted = [...actions].sort((a, b) => order.indexOf(a) - order.indexOf(b));
     return [sorted, true];
 }
 //# sourceMappingURL=MoreButton.js.map

package/lib/appui-react/preview/widget-action-dropdown/MoreButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MoreButton.js","sourceRoot":"","sources":["../../../../src/appui-react/preview/widget-action-dropdown/MoreButton.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAGvE,gBAAgB;AAChB,MAAM,UAAU,UAAU,CAAC,KAAsC;IAC/D,OAAO,CACL,oBAAC,YAAY,IACX,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC;YACtB,oBAAC,2BAA2B,CAAC,QAAQ,IAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE;gBAC9D,oBAAC,oBAAoB,OAAG;gBACvB,KAAK,CAAC,QAAQ,CACsB;SACxC;QAGD,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE;YACrE,oBAAC,YAAY,IAAC,KAAK,EAAC,cAAc;gBAChC,oBAAC,eAAe,OAAG,CACN,CACX,CACO,CAChB,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,CAAC,MAAM,2BAA2B,GAAG,KAAK,CAAC,aAAa,CAK5D,SAAS,CAAC,CAAC;AAEb,SAAS,oBAAoB;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;IAC9D,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAClB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAEhD,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAC5B,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACpC,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;IACtC,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS;YAAE,OAAO,EAAE,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IACzB,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,KAAK,GAAoB;IAC7B,KAAK;IACL,UAAU;IACV,QAAQ;IACR,iBAAiB;IACjB,MAAM;IACN,UAAU;CACX,CAAC;AAEF,gBAAgB;AAChB,MAAM,UAAU,mBAAmB,CAAC,QAAyB;IAC3D,MAAM,EAAE,oBAAoB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACtD,MAAM,SAAS,GAAG,oBAAoB,EAAE,SAAS,IAAI,QAAQ,CAAC;IAC9D,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;IAC/C,IAAI,CAAC,UAAU;QAAE,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAU,CAAC;IACnD,MAAM,MAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,IAAI,CAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAC9C,CAAC;IACF,OAAO,CAAC,MAAM,EAAE,IAAI,CAAU,CAAC;AACjC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { SvgMoreVertical } from \"@itwin/itwinui-icons-react\";\nimport { DropdownMenu } from \"@itwin/itwinui-react\";\nimport { TabBarButton } from \"../../layout/widget/Button.js\";\nimport { usePreviewFeatures } from \"../PreviewFeatures.js\";\nimport { useLayout } from \"../../layout/base/LayoutStore.js\";\nimport { PanelSideContext } from \"../../layout/widget-panels/Panel.js\";\nimport type { WidgetFeature } from \"../../layout/widget/Buttons.js\";\n\n/** @internal */\nexport function MoreButton(props: React.PropsWithChildren<object>) {\n  return (\n    <DropdownMenu\n      placement=\"bottom-end\"\n      menuItems={(onClose) => [\n        <WidgetActionDropdownContext.Provider key={0} value={{ onClose }}>\n          <CloseOnPanelCollapse />\n          {props.children}\n        </WidgetActionDropdownContext.Provider>,\n      ]}\n    >\n      {/* TODO: offset is not available for DropdownMenu */}\n      <div style={{ height: \"100%\", display: \"flex\", marginInline: \"0.25em\" }}>\n        <TabBarButton label=\"More actions\">\n          <SvgMoreVertical />\n        </TabBarButton>\n      </div>\n    </DropdownMenu>\n  );\n}\n\n/** @internal */\nexport const WidgetActionDropdownContext = React.createContext<\n  | undefined\n  | {\n      onClose: () => void;\n    }\n>(undefined);\n\nfunction CloseOnPanelCollapse() {\n  const context = React.useContext(WidgetActionDropdownContext);\n  assert(!!context);\n  const side = React.useContext(PanelSideContext);\n\n  const { onClose } = context;\n  const collapsed = useLayout((state) => {\n    if (!side) return false;\n    return state.panels[side].collapsed;\n  });\n  React.useEffect(() => {\n    if (collapsed) onClose();\n  }, [collapsed, onClose]);\n  return null;\n}\n\nconst order: WidgetFeature[] = [\n  \"pin\",\n  \"maximize\",\n  \"popout\",\n  \"horizontalAlign\",\n  \"dock\",\n  \"sendBack\",\n];\n\n/** @internal */\nexport function useDropdownFeatures(features: WidgetFeature[]) {\n  const { widgetActionDropdown } = usePreviewFeatures();\n  const threshold = widgetActionDropdown?.threshold ?? Infinity;\n  const isDropdown = features.length > threshold;\n  if (!isDropdown) return [features, false] as const;\n  const sorted = [...features].sort(\n    (a, b) => order.indexOf(a) - order.indexOf(b)\n  );\n  return [sorted, true] as const;\n}\n"]}
+{"version":3,"file":"MoreButton.js","sourceRoot":"","sources":["../../../../src/appui-react/preview/widget-action-dropdown/MoreButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { SvgMoreVertical } from \"@itwin/itwinui-icons-react\";\nimport { DropdownMenu } from \"@itwin/itwinui-react\";\nimport { TabBarButton } from \"../../layout/widget/Button.js\";\nimport { usePreviewFeatures } from \"../PreviewFeatures.js\";\nimport { useLayout } from \"../../layout/base/LayoutStore.js\";\nimport { PanelSideContext } from \"../../layout/widget-panels/Panel.js\";\nimport type { WidgetActionId } from \"../../layout/widget/WidgetActions.js\";\n\n/** @internal */\nexport function MoreButton(props: React.PropsWithChildren<object>) {\n  return (\n    <DropdownMenu\n      placement=\"bottom-end\"\n      menuItems={(onClose) => [\n        <WidgetActionDropdownContext.Provider key={0} value={{ onClose }}>\n          <CloseOnPanelCollapse />\n          {props.children}\n        </WidgetActionDropdownContext.Provider>,\n      ]}\n    >\n      {/* TODO: offset is not available for DropdownMenu */}\n      <div style={{ height: \"100%\", display: \"flex\", marginInline: \"0.25em\" }}>\n        <TabBarButton label=\"More actions\">\n          <SvgMoreVertical />\n        </TabBarButton>\n      </div>\n    </DropdownMenu>\n  );\n}\n\n/** @internal */\nexport const WidgetActionDropdownContext = React.createContext<\n  | undefined\n  | {\n      onClose: () => void;\n    }\n>(undefined);\n\nfunction CloseOnPanelCollapse() {\n  const context = React.useContext(WidgetActionDropdownContext);\n  assert(!!context);\n  const side = React.useContext(PanelSideContext);\n\n  const { onClose } = context;\n  const collapsed = useLayout((state) => {\n    if (!side) return false;\n    return state.panels[side].collapsed;\n  });\n  React.useEffect(() => {\n    if (collapsed) onClose();\n  }, [collapsed, onClose]);\n  return null;\n}\n\nconst order: WidgetActionId[] = [\n  \"pin\",\n  \"maximize\",\n  \"popout\",\n  \"horizontalAlign\",\n  \"dock\",\n  \"sendBack\",\n];\n\n/** @internal */\nexport function useDropdownActions(actions: WidgetActionId[]) {\n  const { widgetActionDropdown } = usePreviewFeatures();\n  const threshold = widgetActionDropdown?.threshold ?? Infinity;\n  const isDropdown = actions.length > threshold;\n  if (!isDropdown) return [actions, false] as const;\n  const sorted = [...actions].sort(\n    (a, b) => order.indexOf(a) - order.indexOf(b)\n  );\n  return [sorted, true] as const;\n}\n"]}

package/lib/appui-react/toolbar/ToolbarItem.d.ts

@@ -123,6 +123,10 @@ export declare function isToolbarCustomItem(item: ToolbarItem): item is ToolbarC
 export interface ToolbarItemLayouts {
     /** Toolbar item configuration in a standard layout. */
     readonly standard?: StandardLayoutToolbarItem;
+    /** Allow additional layout specific configurations.
+     * @note Use unique keys to avoid conflicts.
+     */
+    readonly [layout: string]: unknown;
 }
 /** Describes toolbar item configuration specific to a standard layout.
  * @public

package/lib/appui-react/toolbar/ToolbarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarItem.d.ts","sourceRoot":"","sources":["../../../src/appui-react/toolbar/ToolbarItem.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ToolbarItem.d.ts","sourceRoot":"","sources":["../../../src/appui-react/toolbar/ToolbarItem.ts"],"names":[],"mappings":"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"}

package/lib/appui-react/toolbar/ToolbarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarItem.js","sourceRoot":"","sources":["../../../src/appui-react/toolbar/ToolbarItem.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAUH;;GAEG;AACH,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,yGAAyG;IACzG,6EAAuB,CAAA;IACvB,8EAA8E;IAC9E,mEAAkB,CAAA;AACpB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,kBAKX;AALD,WAAY,kBAAkB;IAC5B,0BAA0B;IAC1B,uEAAc,CAAA;IACd,wBAAwB;IACxB,mEAAY,CAAA;AACd,CAAC,EALW,kBAAkB,KAAlB,kBAAkB,QAK7B;AAiGD;;GAEG;AACH,MAAM,UAAU,mBAAmB,CACjC,IAAiB;IAEjB,OAAO,SAAS,IAAI,IAAI,CAAC;AAC3B,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAChC,IAAiB;IAEjB,OAAO,OAAO,IAAI,IAAI,CAAC;AACzB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB,CACjC,IAAiB;IAEjB,OAAO,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;AACjE,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport type {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n} from \"@itwin/appui-abstract\";\nimport type { BadgeType, IconSpec } from \"@itwin/core-react\";\nimport type { BadgeKind } from \"@itwin/core-react/internal\";\nimport { UiItemsProvider } from \"../ui-items-provider/UiItemsProvider.js\";\n\n/** Used to specify the usage of the toolbar which determine the toolbar position.\n * @public\n */\nexport enum ToolbarUsage {\n  /** Contains tools to Create Update and Delete content - in AppUI this is in top left of content area. */\n  ContentManipulation = 0,\n  /** Manipulate view/camera - in AppUI this is in top right of content area. */\n  ViewNavigation = 1,\n}\n\n/** Used to specify the orientation of the toolbar.\n * @public\n */\nexport enum ToolbarOrientation {\n  /** Horizontal toolbar. */\n  Horizontal = 0,\n  /** Vertical toolbar. */\n  Vertical = 1,\n}\n\n/** Describes the data needed to insert a UI items into an existing set of UI items.\n * @public\n */\nexport interface CommonToolbarItem {\n  /** Require uniqueId for the item. To ensure uniqueness it is suggested that a namespace prefix of the extension name be used. */\n  readonly id: string;\n  /** Icon of a toolbar item. */\n  readonly iconNode?: React.ReactNode;\n  /** Describes badge. Renders no badge if not specified.\n   * @deprecated in 4.16.0. Use `badgeKind` property instead.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  readonly badge?: BadgeType;\n  /** Specifies the kind of badge, if any, to be rendered. */\n  readonly badgeKind?: BadgeKind;\n  /** Optional description */\n  readonly description?: string | ConditionalStringValue;\n  /** Defines if the item is active (shown with an active stripe/bar). */\n  readonly isActive?: boolean;\n  /** Describes if the item is visible or hidden. The default is for the item to be visible. */\n  readonly isHidden?: boolean | ConditionalBooleanValue;\n  /** Describes if the item is enabled or disabled. The default is for the item to be enabled. */\n  readonly isDisabled?: boolean | ConditionalBooleanValue;\n  /** Specifies the item's grouping value. Items are sorted by group and then item priority. When\n   * group priority changes a separator is inserted. It is recommended using values 10 through 100, incrementing by 10. This\n   * allows extensions enough gaps to insert their own groups. If the value is not specified a groupPriority of 0 is used.\n   */\n  readonly groupPriority?: number;\n  /** Priority within a toolbar or group. */\n  readonly itemPriority: number;\n  /** Describes layout specific configuration of a toolbar item.\n   * @note Only used by {@link UiItemsProvider.getToolbarItems}.\n   */\n  readonly layouts?: ToolbarItemLayouts;\n}\n\n/** Describes the data needed to insert an action button into a toolbar.\n * @public\n */\nexport interface ToolbarActionItem extends CommonToolbarItem {\n  /** Name of icon WebFont entry or if specifying an imported SVG symbol use \"webSvg:\" prefix  to imported symbol Id.\n   * @deprecated in 4.16.0. Use {@link CommonToolbarItem.iconNode} instead and specify `undefined` for this property. This will be made optional in 5.0.0.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  readonly icon: IconSpec;\n  /** label, shown as tool tip on a button or an item label in a group. */\n  readonly label: string | ConditionalStringValue;\n  /** function to run when the button is pressed. */\n  readonly execute: () => void;\n  /** Optional parent tool group to add the tool to. */\n  readonly parentGroupItemId?: string;\n}\n\n/** Describes the data needed to insert a group button into a toolbar.\n * @public\n */\nexport interface ToolbarGroupItem extends CommonToolbarItem {\n  /** Name of icon WebFont entry or if specifying an imported SVG symbol use \"webSvg:\" prefix to imported symbol Id.\n   * @deprecated in 4.16.0. Use {@link CommonToolbarItem.iconNode} instead.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  readonly icon: IconSpec;\n  /** label, shown as tool tip on group button or a group button label in a group panel. */\n  readonly label: string | ConditionalStringValue;\n  /** label shown as the title in at top of group panel. */\n  readonly panelLabel?: string | ConditionalStringValue;\n  /** children of the group */\n  readonly items: ReadonlyArray<ToolbarActionItem | ToolbarGroupItem>;\n  /** Optional parent tool group to add the tool to. */\n  readonly parentGroupItemId?: string;\n}\n\n/** Describes the data needed to insert a custom button into a toolbar.\n * @public\n */\nexport interface ToolbarCustomItem extends CommonToolbarItem {\n  /** Name of icon WebFont entry or if specifying an imported SVG symbol use \"webSvg:\" prefix to imported symbol Id.\n   * @deprecated in 4.16.0. Use {@link CommonToolbarItem.iconNode} instead.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  readonly icon?: IconSpec;\n  /** label, shown as tool tip on group button or a group button label in a group panel. */\n  readonly label?: string | ConditionalStringValue;\n  /** defines the content to display in popup panel */\n  readonly panelContent?: React.ReactNode;\n}\n\n/** Any Button Type that can be inserted into a toolbar.\n * @public\n */\nexport type ToolbarItem =\n  | ToolbarActionItem\n  | ToolbarGroupItem\n  | ToolbarCustomItem;\n\n/** ToolbarActionItem type guard.\n * @public\n */\nexport function isToolbarActionItem(\n  item: ToolbarItem\n): item is ToolbarActionItem {\n  return \"execute\" in item;\n}\n\n/** ToolbarGroupItem type guard.\n * @public\n */\nexport function isToolbarGroupItem(\n  item: ToolbarItem\n): item is ToolbarGroupItem {\n  return \"items\" in item;\n}\n\n/** ToolbarCustomItem type guard.\n * @public\n */\nexport function isToolbarCustomItem(\n  item: ToolbarItem\n): item is ToolbarCustomItem {\n  return !isToolbarActionItem(item) && !isToolbarGroupItem(item);\n}\n\n/** Describes toolbar item configuration specific for each layout.\n * @public\n */\nexport interface ToolbarItemLayouts {\n  /** Toolbar item configuration in a standard layout. */\n  readonly standard?: StandardLayoutToolbarItem;\n}\n\n/** Describes toolbar item configuration specific to a standard layout.\n * @public\n */\nexport interface StandardLayoutToolbarItem {\n  /** Describes toolbar usage. */\n  readonly usage: ToolbarUsage;\n  /** Describes toolbar orientation. */\n  readonly orientation: ToolbarOrientation;\n}\n"]}
+{"version":3,"file":"ToolbarItem.js","sourceRoot":"","sources":["../../../src/appui-react/toolbar/ToolbarItem.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAUH;;GAEG;AACH,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,yGAAyG;IACzG,6EAAuB,CAAA;IACvB,8EAA8E;IAC9E,mEAAkB,CAAA;AACpB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,kBAKX;AALD,WAAY,kBAAkB;IAC5B,0BAA0B;IAC1B,uEAAc,CAAA;IACd,wBAAwB;IACxB,mEAAY,CAAA;AACd,CAAC,EALW,kBAAkB,KAAlB,kBAAkB,QAK7B;AAiGD;;GAEG;AACH,MAAM,UAAU,mBAAmB,CACjC,IAAiB;IAEjB,OAAO,SAAS,IAAI,IAAI,CAAC;AAC3B,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAChC,IAAiB;IAEjB,OAAO,OAAO,IAAI,IAAI,CAAC;AACzB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB,CACjC,IAAiB;IAEjB,OAAO,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;AACjE,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport type {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n} from \"@itwin/appui-abstract\";\nimport type { BadgeType, IconSpec } from \"@itwin/core-react\";\nimport type { BadgeKind } from \"@itwin/core-react/internal\";\nimport { UiItemsProvider } from \"../ui-items-provider/UiItemsProvider.js\";\n\n/** Used to specify the usage of the toolbar which determine the toolbar position.\n * @public\n */\nexport enum ToolbarUsage {\n  /** Contains tools to Create Update and Delete content - in AppUI this is in top left of content area. */\n  ContentManipulation = 0,\n  /** Manipulate view/camera - in AppUI this is in top right of content area. */\n  ViewNavigation = 1,\n}\n\n/** Used to specify the orientation of the toolbar.\n * @public\n */\nexport enum ToolbarOrientation {\n  /** Horizontal toolbar. */\n  Horizontal = 0,\n  /** Vertical toolbar. */\n  Vertical = 1,\n}\n\n/** Describes the data needed to insert a UI items into an existing set of UI items.\n * @public\n */\nexport interface CommonToolbarItem {\n  /** Require uniqueId for the item. To ensure uniqueness it is suggested that a namespace prefix of the extension name be used. */\n  readonly id: string;\n  /** Icon of a toolbar item. */\n  readonly iconNode?: React.ReactNode;\n  /** Describes badge. Renders no badge if not specified.\n   * @deprecated in 4.16.0. Use `badgeKind` property instead.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  readonly badge?: BadgeType;\n  /** Specifies the kind of badge, if any, to be rendered. */\n  readonly badgeKind?: BadgeKind;\n  /** Optional description */\n  readonly description?: string | ConditionalStringValue;\n  /** Defines if the item is active (shown with an active stripe/bar). */\n  readonly isActive?: boolean;\n  /** Describes if the item is visible or hidden. The default is for the item to be visible. */\n  readonly isHidden?: boolean | ConditionalBooleanValue;\n  /** Describes if the item is enabled or disabled. The default is for the item to be enabled. */\n  readonly isDisabled?: boolean | ConditionalBooleanValue;\n  /** Specifies the item's grouping value. Items are sorted by group and then item priority. When\n   * group priority changes a separator is inserted. It is recommended using values 10 through 100, incrementing by 10. This\n   * allows extensions enough gaps to insert their own groups. If the value is not specified a groupPriority of 0 is used.\n   */\n  readonly groupPriority?: number;\n  /** Priority within a toolbar or group. */\n  readonly itemPriority: number;\n  /** Describes layout specific configuration of a toolbar item.\n   * @note Only used by {@link UiItemsProvider.getToolbarItems}.\n   */\n  readonly layouts?: ToolbarItemLayouts;\n}\n\n/** Describes the data needed to insert an action button into a toolbar.\n * @public\n */\nexport interface ToolbarActionItem extends CommonToolbarItem {\n  /** Name of icon WebFont entry or if specifying an imported SVG symbol use \"webSvg:\" prefix  to imported symbol Id.\n   * @deprecated in 4.16.0. Use {@link CommonToolbarItem.iconNode} instead and specify `undefined` for this property. This will be made optional in 5.0.0.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  readonly icon: IconSpec;\n  /** label, shown as tool tip on a button or an item label in a group. */\n  readonly label: string | ConditionalStringValue;\n  /** function to run when the button is pressed. */\n  readonly execute: () => void;\n  /** Optional parent tool group to add the tool to. */\n  readonly parentGroupItemId?: string;\n}\n\n/** Describes the data needed to insert a group button into a toolbar.\n * @public\n */\nexport interface ToolbarGroupItem extends CommonToolbarItem {\n  /** Name of icon WebFont entry or if specifying an imported SVG symbol use \"webSvg:\" prefix to imported symbol Id.\n   * @deprecated in 4.16.0. Use {@link CommonToolbarItem.iconNode} instead.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  readonly icon: IconSpec;\n  /** label, shown as tool tip on group button or a group button label in a group panel. */\n  readonly label: string | ConditionalStringValue;\n  /** label shown as the title in at top of group panel. */\n  readonly panelLabel?: string | ConditionalStringValue;\n  /** children of the group */\n  readonly items: ReadonlyArray<ToolbarActionItem | ToolbarGroupItem>;\n  /** Optional parent tool group to add the tool to. */\n  readonly parentGroupItemId?: string;\n}\n\n/** Describes the data needed to insert a custom button into a toolbar.\n * @public\n */\nexport interface ToolbarCustomItem extends CommonToolbarItem {\n  /** Name of icon WebFont entry or if specifying an imported SVG symbol use \"webSvg:\" prefix to imported symbol Id.\n   * @deprecated in 4.16.0. Use {@link CommonToolbarItem.iconNode} instead.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  readonly icon?: IconSpec;\n  /** label, shown as tool tip on group button or a group button label in a group panel. */\n  readonly label?: string | ConditionalStringValue;\n  /** defines the content to display in popup panel */\n  readonly panelContent?: React.ReactNode;\n}\n\n/** Any Button Type that can be inserted into a toolbar.\n * @public\n */\nexport type ToolbarItem =\n  | ToolbarActionItem\n  | ToolbarGroupItem\n  | ToolbarCustomItem;\n\n/** ToolbarActionItem type guard.\n * @public\n */\nexport function isToolbarActionItem(\n  item: ToolbarItem\n): item is ToolbarActionItem {\n  return \"execute\" in item;\n}\n\n/** ToolbarGroupItem type guard.\n * @public\n */\nexport function isToolbarGroupItem(\n  item: ToolbarItem\n): item is ToolbarGroupItem {\n  return \"items\" in item;\n}\n\n/** ToolbarCustomItem type guard.\n * @public\n */\nexport function isToolbarCustomItem(\n  item: ToolbarItem\n): item is ToolbarCustomItem {\n  return !isToolbarActionItem(item) && !isToolbarGroupItem(item);\n}\n\n/** Describes toolbar item configuration specific for each layout.\n * @public\n */\nexport interface ToolbarItemLayouts {\n  /** Toolbar item configuration in a standard layout. */\n  readonly standard?: StandardLayoutToolbarItem;\n  /** Allow additional layout specific configurations.\n   * @note Use unique keys to avoid conflicts.\n   */\n  readonly [layout: string]: unknown;\n}\n\n/** Describes toolbar item configuration specific to a standard layout.\n * @public\n */\nexport interface StandardLayoutToolbarItem {\n  /** Describes toolbar usage. */\n  readonly usage: ToolbarUsage;\n  /** Describes toolbar orientation. */\n  readonly orientation: ToolbarOrientation;\n}\n"]}

package/lib/appui-react/ui-items-provider/AbstractUiItemsManager.d.ts

@@ -14,7 +14,7 @@ import type { BackstageItem } from "../backstage/BackstageItem.js";
 import type { StatusBarItem } from "../statusbar/StatusBarItem.js";
 /** @internal */
 export declare function createAbstractUiItemsManagerAdapter(): AbstractUiItemsManagerAdapter | undefined;
-type Target = Pick<typeof UiItemsManager, "getWidgets" | "getToolbarButtonItems" | "getStatusBarItems" | "getBackstageItems" | "register" | "getUiItemsProvider" | "registeredProviderIds" | "hasRegisteredProviders" | "unregister" | "onUiProviderRegisteredEvent" | "clearAllProviders">;
+type Target = Pick<typeof UiItemsManager, "getToolbarButtonItems" | "getStatusBarItems" | "getBackstageItems" | "register" | "getUiItemsProvider" | "registeredProviderIds" | "hasRegisteredProviders" | "unregister" | "onUiProviderRegisteredEvent" | "clearAllProviders">;
 declare class AbstractUiItemsManagerAdapter implements Target {
     private readonly _adaptee;
     constructor(_adaptee: typeof AbstractUiItemsManagerType);

package/lib/appui-react/ui-items-provider/AbstractUiItemsManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AbstractUiItemsManager.d.ts","sourceRoot":"","sources":["../../../src/appui-react/ui-items-provider/AbstractUiItemsManager.ts"],"names":[],"mappings":"AAIA;;GAEG;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,KAAK,EAOV,cAAc,IAAI,0BAA0B,EAK7C,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EACV,cAAc,EACd,wBAAwB,EACxB,kCAAkC,EACnC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,YAAY,EACb,MAAM,2BAA2B,CAAC;AAKnC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAuBnE,gBAAgB;AAChB,wBAAgB,mCAAmC,8CAGlD;AAED,KAAK,MAAM,GAAG,IAAI,CAChB,OAAO,cAAc,EACnB,YAAY,GACZ,uBAAuB,GACvB,mBAAmB,GACnB,mBAAmB,GACnB,UAAU,GACV,oBAAoB,GACpB,uBAAuB,GACvB,wBAAwB,GACxB,YAAY,GACZ,6BAA6B,GAC7B,mBAAmB,CACtB,CAAC;AAEF,cAAM,6BAA8B,YAAW,MAAM;IACvC,OAAO,CAAC,QAAQ,CAAC,QAAQ;gBAAR,QAAQ,EAAE,OAAO,0BAA0B;IAEjE,iBAAiB,IAAI,IAAI;IAIhC,IAAW,2BAA2B,IAAI,SAAS,CAAC,kCAAkC,CAAC,CAUtF;IAEM,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAI3C,IAAW,sBAAsB,IAAI,OAAO,CAE3C;IAED,IAAW,qBAAqB,IAAI,MAAM,EAAE,CAE3C;IAEM,QAAQ,CACb,QAAQ,EAAE,eAAe,EACzB,SAAS,CAAC,EAAE,wBAAwB,GAAG,SAAS,GAC/C,IAAI;IAKA,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAQnE,iBAAiB,IAAI,SAAS,YAAY,CAAC,aAAa,CAAC,EAAE;IAa3D,iBAAiB,CACtB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,GACjB,SAAS,YAAY,CAAC,aAAa,CAAC,EAAE;IAalC,qBAAqB,CAC1B,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,kBAAkB,GAC9B,SAAS,YAAY,CAAC,WAAW,CAAC,EAAE;IAkBhC,UAAU,CACf,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,CAAC,EAAE,iBAAiB,GAAG,SAAS,GACtC,SAAS,YAAY,CAAC,MAAM,CAAC,EAAE;CA+CnC;AAgfD;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,eAAe;;;;;;;;;;;EA+CjE"}
+{"version":3,"file":"AbstractUiItemsManager.d.ts","sourceRoot":"","sources":["../../../src/appui-react/ui-items-provider/AbstractUiItemsManager.ts"],"names":[],"mappings":"AAIA;;GAEG;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,KAAK,EAOV,cAAc,IAAI,0BAA0B,EAK7C,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EACV,cAAc,EACd,wBAAwB,EACxB,kCAAkC,EACnC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,YAAY,EACb,MAAM,2BAA2B,CAAC;AAKnC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAuBnE,gBAAgB;AAChB,wBAAgB,mCAAmC,8CAGlD;AAED,KAAK,MAAM,GAAG,IAAI,CAChB,OAAO,cAAc,EACnB,uBAAuB,GACvB,mBAAmB,GACnB,mBAAmB,GACnB,UAAU,GACV,oBAAoB,GACpB,uBAAuB,GACvB,wBAAwB,GACxB,YAAY,GACZ,6BAA6B,GAC7B,mBAAmB,CACtB,CAAC;AAEF,cAAM,6BAA8B,YAAW,MAAM;IACvC,OAAO,CAAC,QAAQ,CAAC,QAAQ;gBAAR,QAAQ,EAAE,OAAO,0BAA0B;IAEjE,iBAAiB,IAAI,IAAI;IAIhC,IAAW,2BAA2B,IAAI,SAAS,CAAC,kCAAkC,CAAC,CAUtF;IAEM,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAI3C,IAAW,sBAAsB,IAAI,OAAO,CAE3C;IAED,IAAW,qBAAqB,IAAI,MAAM,EAAE,CAE3C;IAEM,QAAQ,CACb,QAAQ,EAAE,eAAe,EACzB,SAAS,CAAC,EAAE,wBAAwB,GAAG,SAAS,GAC/C,IAAI;IAKA,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAQnE,iBAAiB,IAAI,SAAS,YAAY,CAAC,aAAa,CAAC,EAAE;IAa3D,iBAAiB,CACtB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,GACjB,SAAS,YAAY,CAAC,aAAa,CAAC,EAAE;IAalC,qBAAqB,CAC1B,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,kBAAkB,GAC9B,SAAS,YAAY,CAAC,WAAW,CAAC,EAAE;IAkBhC,UAAU,CACf,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,CAAC,EAAE,iBAAiB,GAAG,SAAS,GACtC,SAAS,YAAY,CAAC,MAAM,CAAC,EAAE;CA+CnC;AAgfD;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,eAAe;;;;;;;;;;;EA+CjE"}