@itwin/appui-react 4.13.3 → 4.14.0

package/lib/esm/appui-react/popup/ToolbarPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarPopup.js","sourceRoot":"","sources":["../../../../src/appui-react/popup/ToolbarPopup.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 Popup\n */\n\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { RequireAtLeastOne } from \"@itwin/core-bentley\";\nimport type { Orientation, SizeProps } from \"@itwin/core-react\";\nimport { DivWithOutsideClick, FocusTrap, Point, Size } from \"@itwin/core-react\";\nimport {\n  Direction,\n  ToolbarOpacitySetting,\n  ToolbarPanelAlignment,\n} from \"@itwin/components-react\";\nimport { CursorPopup } from \"../cursor/cursorpopup/CursorPopup\";\nimport type { PopupPropsBase } from \"./PopupManager\";\nimport { PopupManager } from \"./PopupManager\";\nimport { PositionPopup } from \"./PositionPopup\";\nimport type { ToolbarItem } from \"../toolbar/ToolbarItem\";\nimport { Toolbar } from \"../toolbar/Toolbar\";\nimport { WrapperContext } from \"../configurableui/ConfigurableUiContent\";\nimport { mapToPlacement, type Placement } from \"../utils/Placement\";\n\n/** Props for a popup toolbar\n * @beta */\nexport type ToolbarPopupProps = Omit<PopupPropsBase, \"el\"> & {\n  items: ToolbarItem[];\n  orientation: Orientation;\n  onCancel: () => void;\n  onItemExecuted: (item: any) => void;\n  el?: HTMLElement;\n} & RequireAtLeastOne<{\n    relativePosition: RelativePosition; // @deprecated in 4.11.x. Please use placement instead.\n    placement: Placement;\n  }>;\n\n/** @internal */\ninterface ToolbarPopupState {\n  size: Size;\n}\n\n/** Popup component for Toolbar\n * @beta\n */\nexport class ToolbarPopup extends React.PureComponent<\n  ToolbarPopupProps,\n  ToolbarPopupState\n> {\n  /** @internal */\n  public static override contextType = WrapperContext;\n  /** @internal */\n  public declare context: React.ContextType<typeof WrapperContext>;\n\n  /** @internal */\n  public override readonly state = {\n    size: new Size(-1, -1),\n  };\n\n  private _onSizeKnown = (newSize: SizeProps) => {\n    // istanbul ignore else\n    if (!this.state.size.equals(newSize))\n      this.setState({ size: Size.create(newSize) });\n  };\n\n  private _handleKeyDown = (\n    event: React.KeyboardEvent<HTMLDivElement>\n  ): void => {\n    switch (event.key) {\n      case Key.Escape.valueOf():\n        this._cancel();\n        break;\n    }\n  };\n\n  private _cancel() {\n    // istanbul ignore else\n    if (this.props.onCancel) {\n      this.props.onCancel();\n    }\n  }\n\n  public override render() {\n    let point = PopupManager.getPopupPosition(\n      this.props.el ?? this.context,\n      this.props.pt,\n      new Point(),\n      this.state.size\n    );\n    const popupRect = CursorPopup.getPopupRect(\n      point,\n      this.props.offset,\n      this.state.size,\n      this.props.placement ?? mapToPlacement(this.props.relativePosition)\n    );\n    point = new Point(popupRect.left, popupRect.top);\n    return (\n      <PositionPopup\n        key={this.props.id}\n        className=\"uifw-no-border\"\n        point={point}\n        onSizeKnown={this._onSizeKnown}\n      >\n        {/* eslint-disable-next-line deprecation/deprecation */}\n        <DivWithOutsideClick\n          onOutsideClick={this.props.onCancel}\n          onKeyDown={this._handleKeyDown}\n        >\n          <FocusTrap active={true} returnFocusOnDeactivate={true}>\n            <Toolbar\n              expandsTo={Direction.Bottom}\n              panelAlignment={ToolbarPanelAlignment.Start}\n              items={this.props.items}\n              useDragInteraction={true}\n              toolbarOpacitySetting={ToolbarOpacitySetting.Defaults}\n              onItemExecuted={this.props.onItemExecuted}\n            />\n          </FocusTrap>\n        </DivWithOutsideClick>\n      </PositionPopup>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ToolbarPopup.js","sourceRoot":"","sources":["../../../../src/appui-react/popup/ToolbarPopup.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 Popup\n */\n\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { RequireAtLeastOne } from \"@itwin/core-bentley\";\nimport type { Orientation, SizeProps } from \"@itwin/core-react\";\nimport { DivWithOutsideClick, FocusTrap, Point, Size } from \"@itwin/core-react\";\nimport {\n  Direction,\n  ToolbarOpacitySetting,\n  ToolbarPanelAlignment,\n} from \"@itwin/components-react\";\nimport { CursorPopup } from \"../cursor/cursorpopup/CursorPopup\";\nimport type { PopupPropsBase } from \"./PopupManager\";\nimport { PopupManager } from \"./PopupManager\";\nimport { PositionPopup } from \"./PositionPopup\";\nimport type { ToolbarItem } from \"../toolbar/ToolbarItem\";\nimport { Toolbar } from \"../toolbar/Toolbar\";\nimport { WrapperContext } from \"../configurableui/ConfigurableUiContent\";\nimport { mapToPlacement, type Placement } from \"../utils/Placement\";\n\n/** Props for a popup toolbar\n * @beta */\nexport type ToolbarPopupProps = Omit<PopupPropsBase, \"el\"> & {\n  items: ToolbarItem[];\n  orientation: Orientation;\n  onCancel: () => void;\n  onItemExecuted: (item: any) => void;\n  el?: HTMLElement;\n} & RequireAtLeastOne<{\n    relativePosition: RelativePosition; // @deprecated in 4.11.x. Please use placement instead.\n    placement: Placement;\n  }>;\n\n/** @internal */\ninterface ToolbarPopupState {\n  size: Size;\n}\n\n/** Popup component for Toolbar\n * @beta\n */\nexport class ToolbarPopup extends React.PureComponent<\n  ToolbarPopupProps,\n  ToolbarPopupState\n> {\n  /** @internal */\n  public static override contextType = WrapperContext;\n  /** @internal */\n  public declare context: React.ContextType<typeof WrapperContext>;\n\n  /** @internal */\n  public override readonly state = {\n    size: new Size(-1, -1),\n  };\n\n  private _onSizeKnown = (newSize: SizeProps) => {\n    if (!this.state.size.equals(newSize))\n      this.setState({ size: Size.create(newSize) });\n  };\n\n  private _handleKeyDown = (\n    event: React.KeyboardEvent<HTMLDivElement>\n  ): void => {\n    switch (event.key) {\n      case Key.Escape.valueOf():\n        this._cancel();\n        break;\n    }\n  };\n\n  private _cancel() {\n    if (this.props.onCancel) {\n      this.props.onCancel();\n    }\n  }\n\n  public override render() {\n    let point = PopupManager.getPopupPosition(\n      this.props.el ?? this.context,\n      this.props.pt,\n      new Point(),\n      this.state.size\n    );\n    const popupRect = CursorPopup.getPopupRect(\n      point,\n      this.props.offset,\n      this.state.size,\n      this.props.placement ?? mapToPlacement(this.props.relativePosition)\n    );\n    point = new Point(popupRect.left, popupRect.top);\n    return (\n      <PositionPopup\n        key={this.props.id}\n        className=\"uifw-no-border\"\n        point={point}\n        onSizeKnown={this._onSizeKnown}\n      >\n        {/* eslint-disable-next-line deprecation/deprecation */}\n        <DivWithOutsideClick\n          onOutsideClick={this.props.onCancel}\n          onKeyDown={this._handleKeyDown}\n        >\n          <FocusTrap active={true} returnFocusOnDeactivate={true}>\n            <Toolbar\n              expandsTo={Direction.Bottom}\n              panelAlignment={ToolbarPanelAlignment.Start}\n              items={this.props.items}\n              useDragInteraction={true}\n              toolbarOpacitySetting={ToolbarOpacitySetting.Defaults}\n              onItemExecuted={this.props.onItemExecuted}\n            />\n          </FocusTrap>\n        </DivWithOutsideClick>\n      </PositionPopup>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/preview/PreviewFeatures.d.ts

@@ -5,28 +5,28 @@ import * as React from "react";
 import type { WidgetDef } from "../widgets/WidgetDef";
 /** List of known preview features. */
 interface KnownPreviewFeatures {
-    /** If true, the panels and tool settings will always be rendered over the content.
+    /** If `true`, the panels and tool settings will always be rendered over the content.
      * The content will never change size.
      *
      * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/672
      */
     contentAlwaysMaxSize: boolean;
-    /** If true, the floating widget will have a "maximize" button. Use `enableMaximizedPanelWidget` to enable the feature for panel widgets.
+    /** If `true`, the floating widget will have a "maximize" button. Use `enableMaximizedPanelWidget` to enable the feature for panel widgets.
      *
      * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/673
      */
     enableMaximizedFloatingWidget: boolean;
-    /** If true, the panel widget will have a "maximize" button. Use `enableMaximizedFloatingWidget` to enable the feature for floating widgets.
+    /** If `true`, the panel widget will have a "maximize" button. Use `enableMaximizedFloatingWidget` to enable the feature for floating widgets.
      *
      * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/673
      */
     enableMaximizedPanelWidget: boolean;
-    /** If true, the active tab of a dragged widget will become active when dropped in a container.
+    /** If `true`, the active tab of a dragged widget will become active when dropped in a container.
      *
      * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/679
      */
     activateDroppedTab: boolean;
-    /** If true, the horizontal panels will have an additional "Align" button.
+    /** If `true`, the horizontal panels will have an additional "Align" button.
      *
      * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/706
      */
@@ -38,14 +38,19 @@ interface KnownPreviewFeatures {
     widgetActionDropdown: {
         threshold: number;
     };
-    /** If true, the [[Toolbar]] component will be replaced by a new iTwinUI based toolbar. */
+    /** If `true`, the [[Toolbar]] component will be replaced by a new iTwinUI based toolbar. */
     newToolbars: boolean;
     /** If `true`, popout widgets will not be rendered in a separate element tree, instead widget content will be re-parented to a popout content container.
-     * Alternatively, an array of widget ids can be provided to only re-parent specific widgets.
+     * Alternatively, an array of widget ids can be specified to only re-parent specific widgets.
      * @note Use {@link useTransientState} to save and restore DOM transient state when re-parenting widgets.
      * @note There is a known limitation where iTwinUI v2 popover elements will be rendered in the main window. Prefer using iTwinUI v3 when using this feature.
      */
     reparentPopoutWidgets: boolean | WidgetDef["id"][];
+    /** If `true`, additional UI elements are rendered to allow the end user of the layout to control widget visibility.
+     * Alternatively, an array of widget ids can be specified to only control specific widgets.
+     * @note Use {@link UiItemsManager} APIs to manage what widgets are available to the end-user.
+     */
+    controlWidgetVisibility: boolean | WidgetDef["id"][];
 }
 /** List of preview features that can be enabled/disabled.
  * This list is expected to change over time, the interface is made

package/lib/esm/appui-react/preview/PreviewFeatures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewFeatures.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/preview/PreviewFeatures.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,sCAAsC;AACtC,UAAU,oBAAoB;IAC5B;;;;OAIG;IACH,oBAAoB,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,6BAA6B,EAAE,OAAO,CAAC;IACvC;;;OAGG;IACH,0BAA0B,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,wBAAwB,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,oBAAoB,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,0FAA0F;IAC1F,WAAW,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,qBAAqB,EAAE,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;CACpD;AAgBD;;;;;GAKG;AACH,MAAM,WAAW,eAAgB,SAAQ,OAAO,CAAC,oBAAoB,CAAC;IACpE,CAAC,WAAW,EAAE,MAAM,GAAG,GAAG,CAAC;CAC5B;AAuDD;;GAEG;AACH,wBAAgB,kBAAkB,oBAEjC;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,qBAgB9B"}
+{"version":3,"file":"PreviewFeatures.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/preview/PreviewFeatures.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGtD,sCAAsC;AACtC,UAAU,oBAAoB;IAC5B;;;;OAIG;IACH,oBAAoB,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,6BAA6B,EAAE,OAAO,CAAC;IACvC;;;OAGG;IACH,0BAA0B,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,wBAAwB,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,oBAAoB,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,4FAA4F;IAC5F,WAAW,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,qBAAqB,EAAE,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;IACnD;;;OAGG;IACH,uBAAuB,EAAE,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;CACtD;AAiBD;;;;;GAKG;AACH,MAAM,WAAW,eAAgB,SAAQ,OAAO,CAAC,oBAAoB,CAAC;IACpE,CAAC,WAAW,EAAE,MAAM,GAAG,GAAG,CAAC;CAC5B;AAuDD;;GAEG;AACH,wBAAgB,kBAAkB,oBAEjC;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,qBAgB9B"}

package/lib/esm/appui-react/preview/PreviewFeatures.js

@@ -21,6 +21,7 @@ const knownFeaturesObject = {
     widgetActionDropdown: undefined,
     newToolbars: undefined,
     reparentPopoutWidgets: undefined,
+    controlWidgetVisibility: undefined,
 };
 /** Trim an object to only contain known feature keys.
  * @param previewFeatures object potentially containing unknown features

package/lib/esm/appui-react/preview/PreviewFeatures.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewFeatures.js","sourceRoot":"","sources":["../../../../src/appui-react/preview/PreviewFeatures.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 Utilities\n */\n\nimport * as React from \"react\";\nimport { create } from \"zustand\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport { UiFramework } from \"../UiFramework\";\nimport type { useTransientState } from \"../widget-panels/useTransientState\";\nimport type { WidgetDef } from \"../widgets/WidgetDef\";\n\n/** List of known preview features. */\ninterface KnownPreviewFeatures {\n  /** If true, the panels and tool settings will always be rendered over the content.\n   * The content will never change size.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/672\n   */\n  contentAlwaysMaxSize: boolean;\n  /** If true, the floating widget will have a \"maximize\" button. Use `enableMaximizedPanelWidget` to enable the feature for panel widgets.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/673\n   */\n  enableMaximizedFloatingWidget: boolean;\n  /** If true, the panel widget will have a \"maximize\" button. Use `enableMaximizedFloatingWidget` to enable the feature for floating widgets.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/673\n   */\n  enableMaximizedPanelWidget: boolean;\n  /** If true, the active tab of a dragged widget will become active when dropped in a container.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/679\n   */\n  activateDroppedTab: boolean;\n  /** If true, the horizontal panels will have an additional \"Align\" button.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/706\n   */\n  horizontalPanelAlignment: boolean;\n  /** If enabled, a dropdown menu will be rendered for widgets that exceed the specified threshold of title bar buttons.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/723\n   */\n  widgetActionDropdown: { threshold: number };\n  /** If true, the [[Toolbar]] component will be replaced by a new iTwinUI based toolbar. */\n  newToolbars: boolean;\n  /** If `true`, popout widgets will not be rendered in a separate element tree, instead widget content will be re-parented to a popout content container.\n   * Alternatively, an array of widget ids can be provided to only re-parent specific widgets.\n   * @note Use {@link useTransientState} to save and restore DOM transient state when re-parenting widgets.\n   * @note There is a known limitation where iTwinUI v2 popover elements will be rendered in the main window. Prefer using iTwinUI v3 when using this feature.\n   */\n  reparentPopoutWidgets: boolean | WidgetDef[\"id\"][];\n}\n\n/** Object used trim to only known features at runtime.\n * @internal\n */\nconst knownFeaturesObject: Record<keyof KnownPreviewFeatures, undefined> = {\n  activateDroppedTab: undefined,\n  contentAlwaysMaxSize: undefined,\n  enableMaximizedFloatingWidget: undefined,\n  enableMaximizedPanelWidget: undefined,\n  horizontalPanelAlignment: undefined,\n  widgetActionDropdown: undefined,\n  newToolbars: undefined,\n  reparentPopoutWidgets: undefined,\n};\n\n/** List of preview features that can be enabled/disabled.\n * This list is expected to change over time, the interface is made\n * so that new features can be added or removed without breaking existing code.\n * A console warning will simply appear if unknown features are passed.\n * @beta\n */\nexport interface PreviewFeatures extends Partial<KnownPreviewFeatures> {\n  [featureName: string]: any;\n}\n\n/** Trim an object to only contain known feature keys.\n * @param previewFeatures object potentially containing unknown features\n * @returns object containing only known features\n * @internal\n */\nfunction trimToKnownFeaturesOnly(previewFeatures: PreviewFeatures) {\n  const knownFeatureKeys = Object.keys(knownFeaturesObject);\n  const [knownFeatures, unknownFeatures] = Object.entries(\n    previewFeatures\n  ).reduce(\n    ([known, unknown], [key, value]) => {\n      if (knownFeatureKeys.includes(key)) {\n        known[key] = value;\n      } else {\n        unknown.push(key);\n      }\n      return [known, unknown];\n    },\n    [{}, []] as [PreviewFeatures, string[]]\n  );\n  if (Object.keys(unknownFeatures).length > 0) {\n    Logger.logWarning(\n      UiFramework.loggerCategory(trimToKnownFeaturesOnly),\n      `Features used in \"setPreviewFeatures\" are unknown or no longer in preview`,\n      {\n        unknownFeatures,\n      }\n    );\n  }\n  return knownFeatures;\n}\n\ninterface PreviewFeaturesState {\n  previewFeatures: PreviewFeatures;\n  setPreviewFeatures: (previewFeatures: PreviewFeatures) => void;\n}\n\n/** Preview features store used by `UiFramework.previewFeatures` and `UiFramework.setPreviewFeatures()` APIs to manage the preview features.\n * Use `usePreviewFeatures` hook to access the preview features set from a react component.\n * Use `usePreviewFeaturesStore.getState().previewFeatures` to access the preview features set from a non-react component.\n * Use `usePreviewFeaturesStore.subscribe()` to subscribe to changes to the preview features set from a non-react component.\n * @internal\n */\nconst usePreviewFeaturesStore = create<PreviewFeaturesState>((set) => {\n  return {\n    previewFeatures: {},\n    setPreviewFeatures: (newPreviewFeatures: PreviewFeatures) => {\n      const previewFeatures = trimToKnownFeaturesOnly(newPreviewFeatures);\n      set({ previewFeatures });\n    },\n  };\n});\n\n/** Hook to access the preview features set.\n * @internal\n */\nexport function usePreviewFeatures() {\n  return usePreviewFeaturesStore((state) => state.previewFeatures);\n}\n\n/** Props for PreviewFeaturesProvider.\n * @beta\n */\nexport interface PreviewFeaturesProviderProps {\n  children?: React.ReactNode;\n  features?: PreviewFeatures;\n}\n\n/** Set which preview features are enabled. These features are not yet ready for production use nor have\n * a proper API defined yet.\n * The available set of features are defined in the [[PreviewFeatures]] interface.\n *\n * This component should wrap the Provider component.\n *\n * ```tsx\n * <PreviewFeaturesProvider features={{ enableMaximizedFloatingWidget: true }}>\n *   <Provider store={UiFramework.store}>\n *    [...]\n *     <ConfigurableUIContent />\n *    [/...]\n *   </Provider>\n * </PreviewFeaturesProvider>\n * ```\n * @beta\n */\nexport function PreviewFeaturesProvider({\n  children,\n  features,\n}: PreviewFeaturesProviderProps) {\n  const setPreviewFeatures = usePreviewFeaturesStore(\n    (state) => state.setPreviewFeatures\n  );\n  React.useEffect(() => {\n    setPreviewFeatures(features ?? {});\n  }, [features, setPreviewFeatures]);\n\n  // Clear preview features when unmounting.\n  React.useEffect(\n    () => () => {\n      setPreviewFeatures({});\n    },\n    [setPreviewFeatures]\n  );\n  return <>{children}</>;\n}\n"]}
+{"version":3,"file":"PreviewFeatures.js","sourceRoot":"","sources":["../../../../src/appui-react/preview/PreviewFeatures.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 Utilities\n */\n\nimport * as React from \"react\";\nimport { create } from \"zustand\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport { UiFramework } from \"../UiFramework\";\nimport type { useTransientState } from \"../widget-panels/useTransientState\";\nimport type { WidgetDef } from \"../widgets/WidgetDef\";\nimport type { UiItemsManager } from \"../ui-items-provider/UiItemsManager\";\n\n/** List of known preview features. */\ninterface KnownPreviewFeatures {\n  /** If `true`, the panels and tool settings will always be rendered over the content.\n   * The content will never change size.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/672\n   */\n  contentAlwaysMaxSize: boolean;\n  /** If `true`, the floating widget will have a \"maximize\" button. Use `enableMaximizedPanelWidget` to enable the feature for panel widgets.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/673\n   */\n  enableMaximizedFloatingWidget: boolean;\n  /** If `true`, the panel widget will have a \"maximize\" button. Use `enableMaximizedFloatingWidget` to enable the feature for floating widgets.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/673\n   */\n  enableMaximizedPanelWidget: boolean;\n  /** If `true`, the active tab of a dragged widget will become active when dropped in a container.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/679\n   */\n  activateDroppedTab: boolean;\n  /** If `true`, the horizontal panels will have an additional \"Align\" button.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/706\n   */\n  horizontalPanelAlignment: boolean;\n  /** If enabled, a dropdown menu will be rendered for widgets that exceed the specified threshold of title bar buttons.\n   *\n   * Discuss or upvote this feature: https://github.com/iTwin/appui/discussions/723\n   */\n  widgetActionDropdown: { threshold: number };\n  /** If `true`, the [[Toolbar]] component will be replaced by a new iTwinUI based toolbar. */\n  newToolbars: boolean;\n  /** If `true`, popout widgets will not be rendered in a separate element tree, instead widget content will be re-parented to a popout content container.\n   * Alternatively, an array of widget ids can be specified to only re-parent specific widgets.\n   * @note Use {@link useTransientState} to save and restore DOM transient state when re-parenting widgets.\n   * @note There is a known limitation where iTwinUI v2 popover elements will be rendered in the main window. Prefer using iTwinUI v3 when using this feature.\n   */\n  reparentPopoutWidgets: boolean | WidgetDef[\"id\"][];\n  /** If `true`, additional UI elements are rendered to allow the end user of the layout to control widget visibility.\n   * Alternatively, an array of widget ids can be specified to only control specific widgets.\n   * @note Use {@link UiItemsManager} APIs to manage what widgets are available to the end-user.\n   */\n  controlWidgetVisibility: boolean | WidgetDef[\"id\"][];\n}\n\n/** Object used trim to only known features at runtime.\n * @internal\n */\nconst knownFeaturesObject: Record<keyof KnownPreviewFeatures, undefined> = {\n  activateDroppedTab: undefined,\n  contentAlwaysMaxSize: undefined,\n  enableMaximizedFloatingWidget: undefined,\n  enableMaximizedPanelWidget: undefined,\n  horizontalPanelAlignment: undefined,\n  widgetActionDropdown: undefined,\n  newToolbars: undefined,\n  reparentPopoutWidgets: undefined,\n  controlWidgetVisibility: undefined,\n};\n\n/** List of preview features that can be enabled/disabled.\n * This list is expected to change over time, the interface is made\n * so that new features can be added or removed without breaking existing code.\n * A console warning will simply appear if unknown features are passed.\n * @beta\n */\nexport interface PreviewFeatures extends Partial<KnownPreviewFeatures> {\n  [featureName: string]: any;\n}\n\n/** Trim an object to only contain known feature keys.\n * @param previewFeatures object potentially containing unknown features\n * @returns object containing only known features\n * @internal\n */\nfunction trimToKnownFeaturesOnly(previewFeatures: PreviewFeatures) {\n  const knownFeatureKeys = Object.keys(knownFeaturesObject);\n  const [knownFeatures, unknownFeatures] = Object.entries(\n    previewFeatures\n  ).reduce(\n    ([known, unknown], [key, value]) => {\n      if (knownFeatureKeys.includes(key)) {\n        known[key] = value;\n      } else {\n        unknown.push(key);\n      }\n      return [known, unknown];\n    },\n    [{}, []] as [PreviewFeatures, string[]]\n  );\n  if (Object.keys(unknownFeatures).length > 0) {\n    Logger.logWarning(\n      UiFramework.loggerCategory(trimToKnownFeaturesOnly),\n      `Features used in \"setPreviewFeatures\" are unknown or no longer in preview`,\n      {\n        unknownFeatures,\n      }\n    );\n  }\n  return knownFeatures;\n}\n\ninterface PreviewFeaturesState {\n  previewFeatures: PreviewFeatures;\n  setPreviewFeatures: (previewFeatures: PreviewFeatures) => void;\n}\n\n/** Preview features store used by `UiFramework.previewFeatures` and `UiFramework.setPreviewFeatures()` APIs to manage the preview features.\n * Use `usePreviewFeatures` hook to access the preview features set from a react component.\n * Use `usePreviewFeaturesStore.getState().previewFeatures` to access the preview features set from a non-react component.\n * Use `usePreviewFeaturesStore.subscribe()` to subscribe to changes to the preview features set from a non-react component.\n * @internal\n */\nconst usePreviewFeaturesStore = create<PreviewFeaturesState>((set) => {\n  return {\n    previewFeatures: {},\n    setPreviewFeatures: (newPreviewFeatures: PreviewFeatures) => {\n      const previewFeatures = trimToKnownFeaturesOnly(newPreviewFeatures);\n      set({ previewFeatures });\n    },\n  };\n});\n\n/** Hook to access the preview features set.\n * @internal\n */\nexport function usePreviewFeatures() {\n  return usePreviewFeaturesStore((state) => state.previewFeatures);\n}\n\n/** Props for PreviewFeaturesProvider.\n * @beta\n */\nexport interface PreviewFeaturesProviderProps {\n  children?: React.ReactNode;\n  features?: PreviewFeatures;\n}\n\n/** Set which preview features are enabled. These features are not yet ready for production use nor have\n * a proper API defined yet.\n * The available set of features are defined in the [[PreviewFeatures]] interface.\n *\n * This component should wrap the Provider component.\n *\n * ```tsx\n * <PreviewFeaturesProvider features={{ enableMaximizedFloatingWidget: true }}>\n *   <Provider store={UiFramework.store}>\n *    [...]\n *     <ConfigurableUIContent />\n *    [/...]\n *   </Provider>\n * </PreviewFeaturesProvider>\n * ```\n * @beta\n */\nexport function PreviewFeaturesProvider({\n  children,\n  features,\n}: PreviewFeaturesProviderProps) {\n  const setPreviewFeatures = usePreviewFeaturesStore(\n    (state) => state.setPreviewFeatures\n  );\n  React.useEffect(() => {\n    setPreviewFeatures(features ?? {});\n  }, [features, setPreviewFeatures]);\n\n  // Clear preview features when unmounting.\n  React.useEffect(\n    () => () => {\n      setPreviewFeatures({});\n    },\n    [setPreviewFeatures]\n  );\n  return <>{children}</>;\n}\n"]}

package/lib/esm/appui-react/preview/control-widget-visibility/AddWidgetButton.d.ts

@@ -0,0 +1,15 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** @internal */
+export declare const label = "Add widget";
+/** @internal */
+export declare function AddWidgetButton(): React.JSX.Element | null;
+/** @internal */
+export declare function useAddTab(): boolean;
+/** Returns hidden tabs whose visibility can be manipulated by the end user.
+ * @internal
+ */
+export declare function useUserControlledHiddenTabs(): import("../../layout/state/TabState").TabState[];
+//# sourceMappingURL=AddWidgetButton.d.ts.map

package/lib/esm/appui-react/preview/control-widget-visibility/AddWidgetButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddWidgetButton.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/control-widget-visibility/AddWidgetButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,gBAAgB;AAChB,eAAO,MAAM,KAAK,eAAe,CAAC;AAElC,gBAAgB;AAChB,wBAAgB,eAAe,6BA+C9B;AAED,gBAAgB;AAChB,wBAAgB,SAAS,YAKxB;AAED;;GAEG;AACH,wBAAgB,2BAA2B,qDAuB1C"}

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

@@ -0,0 +1,83 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { usePreviewFeatures } from "../PreviewFeatures";
+import { DropdownMenu, MenuItem } from "@itwin/itwinui-react";
+import { TabBarButton } from "../../layout/widget/Button";
+import { useLayout } from "../../layout/base/LayoutStore";
+import { getTabLocation } from "../../layout/state/TabLocation";
+import { SvgAdd } from "@itwin/itwinui-icons-react";
+import { NineZoneDispatchContext } from "../../layout/base/NineZone";
+import { WidgetIdContext } from "../../layout/widget/Widget";
+import { WidgetActionDropdownContext } from "../widget-action-dropdown/MoreButton";
+/** @internal */
+export const label = "Add widget";
+/** @internal */
+export function AddWidgetButton() {
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const widgetId = React.useContext(WidgetIdContext);
+    const dropdownContext = React.useContext(WidgetActionDropdownContext);
+    const tabs = useUserControlledHiddenTabs();
+    if (!widgetId)
+        return null;
+    const getMenuItems = (close) => tabs.map((tab) => {
+        return (React.createElement(MenuItem, { key: tab.id, onClick: () => {
+                dispatch({
+                    type: "WIDGET_TAB_ADD_TO_WIDGET",
+                    id: tab.id,
+                    widgetId,
+                });
+                dispatch({
+                    type: "WIDGET_TAB_OPEN",
+                    id: tab.id,
+                });
+                close?.();
+            } }, tab.label));
+    });
+    const icon = React.createElement(SvgAdd, null);
+    if (dropdownContext !== undefined) {
+        return (React.createElement(MenuItem, { startIcon: icon, subMenuItems: getMenuItems(dropdownContext.onClose) }, label));
+    }
+    return (React.createElement(DropdownMenu, { menuItems: (close) => getMenuItems(close) },
+        React.createElement(TabBarButton, { label: label }, icon)));
+}
+/** @internal */
+export function useAddTab() {
+    const tabs = useUserControlledHiddenTabs();
+    const { controlWidgetVisibility } = usePreviewFeatures();
+    if (tabs.length === 0)
+        return false;
+    return !!controlWidgetVisibility;
+}
+/** Returns hidden tabs whose visibility can be manipulated by the end user.
+ * @internal
+ */
+export function useUserControlledHiddenTabs() {
+    const { controlWidgetVisibility } = usePreviewFeatures();
+    const hiddenTabs = useLayout((state) => {
+        if (!controlWidgetVisibility)
+            return [];
+        const tabs = Object.values(state.tabs);
+        const toolSettingsTabId = state.toolSettings?.tabId;
+        return tabs.filter((tab) => {
+            if (tab.id === toolSettingsTabId)
+                return false;
+            const location = getTabLocation(state, tab.id);
+            // Tab is visible.
+            if (!!location)
+                return false;
+            // Case where only specific tabs are user-controlled.
+            if (Array.isArray(controlWidgetVisibility)) {
+                return controlWidgetVisibility.includes(tab.id);
+            }
+            return true;
+        });
+    }, true);
+    return hiddenTabs;
+}
+//# sourceMappingURL=AddWidgetButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddWidgetButton.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/control-widget-visibility/AddWidgetButton.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 { usePreviewFeatures } from \"../PreviewFeatures\";\nimport { DropdownMenu, MenuItem } from \"@itwin/itwinui-react\";\nimport { TabBarButton } from \"../../layout/widget/Button\";\nimport { useLayout } from \"../../layout/base/LayoutStore\";\nimport { getTabLocation } from \"../../layout/state/TabLocation\";\nimport { SvgAdd } from \"@itwin/itwinui-icons-react\";\nimport { NineZoneDispatchContext } from \"../../layout/base/NineZone\";\nimport { WidgetIdContext } from \"../../layout/widget/Widget\";\nimport { WidgetActionDropdownContext } from \"../widget-action-dropdown/MoreButton\";\n\n/** @internal */\nexport const label = \"Add widget\";\n\n/** @internal */\nexport function AddWidgetButton() {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const widgetId = React.useContext(WidgetIdContext);\n  const dropdownContext = React.useContext(WidgetActionDropdownContext);\n  const tabs = useUserControlledHiddenTabs();\n\n  if (!widgetId) return null;\n\n  const getMenuItems = (close?: () => void) =>\n    tabs.map((tab) => {\n      return (\n        <MenuItem\n          key={tab.id}\n          onClick={() => {\n            dispatch({\n              type: \"WIDGET_TAB_ADD_TO_WIDGET\",\n              id: tab.id,\n              widgetId,\n            });\n            dispatch({\n              type: \"WIDGET_TAB_OPEN\",\n              id: tab.id,\n            });\n            close?.();\n          }}\n        >\n          {tab.label}\n        </MenuItem>\n      );\n    });\n\n  const icon = <SvgAdd />;\n  if (dropdownContext !== undefined) {\n    return (\n      <MenuItem\n        startIcon={icon}\n        subMenuItems={getMenuItems(dropdownContext.onClose)}\n      >\n        {label}\n      </MenuItem>\n    );\n  }\n  return (\n    <DropdownMenu menuItems={(close) => getMenuItems(close)}>\n      <TabBarButton label={label}>{icon}</TabBarButton>\n    </DropdownMenu>\n  );\n}\n\n/** @internal */\nexport function useAddTab() {\n  const tabs = useUserControlledHiddenTabs();\n  const { controlWidgetVisibility } = usePreviewFeatures();\n  if (tabs.length === 0) return false;\n  return !!controlWidgetVisibility;\n}\n\n/** Returns hidden tabs whose visibility can be manipulated by the end user.\n * @internal\n */\nexport function useUserControlledHiddenTabs() {\n  const { controlWidgetVisibility } = usePreviewFeatures();\n  const hiddenTabs = useLayout((state) => {\n    if (!controlWidgetVisibility) return [];\n\n    const tabs = Object.values(state.tabs);\n    const toolSettingsTabId = state.toolSettings?.tabId;\n    return tabs.filter((tab) => {\n      if (tab.id === toolSettingsTabId) return false;\n\n      const location = getTabLocation(state, tab.id);\n      // Tab is visible.\n      if (!!location) return false;\n\n      // Case where only specific tabs are user-controlled.\n      if (Array.isArray(controlWidgetVisibility)) {\n        return controlWidgetVisibility.includes(tab.id);\n      }\n\n      return true;\n    });\n  }, true);\n  return hiddenTabs;\n}\n"]}

package/lib/esm/appui-react/preview/control-widget-visibility/CloseWidgetButton.d.ts

@@ -0,0 +1,9 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** @internal */
+export declare function CloseWidgetButton(): React.JSX.Element;
+/** @internal */
+export declare function useCloseTab(): boolean;
+//# sourceMappingURL=CloseWidgetButton.d.ts.map

package/lib/esm/appui-react/preview/control-widget-visibility/CloseWidgetButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseWidgetButton.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/control-widget-visibility/CloseWidgetButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,gBAAgB;AAChB,wBAAgB,iBAAiB,sBAgBhC;AAED,gBAAgB;AAChB,wBAAgB,WAAW,YAO1B"}

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

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { SvgCloseSmall } from "@itwin/itwinui-icons-react";
+import { ActionButton } from "../widget-action-dropdown/Button";
+import { usePreviewFeatures } from "../PreviewFeatures";
+import { useActiveTabId } from "../../layout/widget/Widget";
+import { NineZoneDispatchContext } from "../../layout/base/NineZone";
+/** @internal */
+export function CloseWidgetButton() {
+    const id = useActiveTabId();
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    return (React.createElement(ActionButton, { icon: React.createElement(SvgCloseSmall, null), label: "Close widget", onClick: () => {
+            dispatch({
+                type: "WIDGET_TAB_HIDE",
+                id,
+            });
+        } }));
+}
+/** @internal */
+export function useCloseTab() {
+    const id = useActiveTabId();
+    const { controlWidgetVisibility } = usePreviewFeatures();
+    if (Array.isArray(controlWidgetVisibility)) {
+        return controlWidgetVisibility.includes(id);
+    }
+    return !!controlWidgetVisibility;
+}
+//# sourceMappingURL=CloseWidgetButton.js.map

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

@@ -0,0 +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,kCAAkC,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAErE,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\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\nimport { useActiveTabId } from \"../../layout/widget/Widget\";\nimport { NineZoneDispatchContext } from \"../../layout/base/NineZone\";\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"]}

package/lib/esm/appui-react/preview/control-widget-visibility/NavigationWidget.d.ts

@@ -0,0 +1,10 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./NavigationWidget.scss";
+import * as React from "react";
+/** Displays a dropdown button to un-hide widgets in the bottom-right corner of the navigation widget area.
+ * @internal
+ */
+export declare function NavigationWidget({ children }: React.PropsWithChildren<{}>): React.JSX.Element;
+//# sourceMappingURL=NavigationWidget.d.ts.map

package/lib/esm/appui-react/preview/control-widget-visibility/NavigationWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/control-widget-visibility/NavigationWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,qBAsCzE"}

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

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./NavigationWidget.scss";
+import * as React from "react";
+import { DropdownButton, MenuItem } from "@itwin/itwinui-react";
+import { SvgAdd } from "@itwin/itwinui-icons-react";
+import { label, useUserControlledHiddenTabs } from "./AddWidgetButton";
+import { NineZoneDispatchContext } from "../../layout/base/NineZone";
+import { useLayout } from "../../layout/base/LayoutStore";
+import { panelSides } from "../../layout/widget-panels/Panel";
+/** Displays a dropdown button to un-hide widgets in the bottom-right corner of the navigation widget area.
+ * @internal
+ */
+export function NavigationWidget({ children }) {
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const tabs = useUserControlledHiddenTabs();
+    const hasWidgets = useHasWidgets();
+    const showAdd = tabs.length > 0 && !hasWidgets;
+    return (React.createElement("div", { className: "uifw-preview-navigationWidget" },
+        children,
+        React.createElement("div", null, showAdd && (React.createElement(DropdownButton, { className: "uifw-preview-navigationWidget_add", startIcon: React.createElement(SvgAdd, null), menuItems: (close) => tabs.map((tab) => {
+                return (React.createElement(MenuItem, { key: tab.id, onClick: () => {
+                        dispatch({
+                            type: "WIDGET_TAB_SHOW",
+                            id: tab.id,
+                        });
+                        close();
+                    } }, tab.label));
+            }) }, label)))));
+}
+/** Returns `false` if there are no floating widgets or panel sections. */
+function useHasWidgets() {
+    return useLayout((state) => {
+        if (state.floatingWidgets.allIds.length > 0)
+            return true;
+        for (const side of panelSides) {
+            const panel = state.panels[side];
+            if (panel.widgets.length > 0) {
+                return true;
+            }
+        }
+        return false;
+    });
+}
+//# sourceMappingURL=NavigationWidget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/control-widget-visibility/NavigationWidget.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAE9D;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAA+B;IACxE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC3D,MAAM,IAAI,GAAG,2BAA2B,EAAE,CAAC;IAC3C,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IAC/C,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC3C,QAAQ;QACT,iCACG,OAAO,IAAI,CACV,oBAAC,cAAc,IACb,SAAS,EAAC,mCAAmC,EAC7C,SAAS,EAAE,oBAAC,MAAM,OAAG,EACrB,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CACnB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;gBACf,OAAO,CACL,oBAAC,QAAQ,IACP,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,CAAC;4BACP,IAAI,EAAE,iBAAiB;4BACvB,EAAE,EAAE,GAAG,CAAC,EAAE;yBACX,CAAC,CAAC;wBACH,KAAK,EAAE,CAAC;oBACV,CAAC,IAEA,GAAG,CAAC,KAAK,CACD,CACZ,CAAC;YACJ,CAAC,CAAC,IAGH,KAAK,CACS,CAClB,CACG,CACF,CACP,CAAC;AACJ,CAAC;AAED,0EAA0E;AAC1E,SAAS,aAAa;IACpB,OAAO,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACzB,IAAI,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO,IAAI,CAAC;QAEzD,KAAK,MAAM,IAAI,IAAI,UAAU,EAAE,CAAC;YAC9B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC7B,OAAO,IAAI,CAAC;YACd,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,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 \"./NavigationWidget.scss\";\nimport * as React from \"react\";\nimport { DropdownButton, MenuItem } from \"@itwin/itwinui-react\";\nimport { SvgAdd } from \"@itwin/itwinui-icons-react\";\nimport { label, useUserControlledHiddenTabs } from \"./AddWidgetButton\";\nimport { NineZoneDispatchContext } from \"../../layout/base/NineZone\";\nimport { useLayout } from \"../../layout/base/LayoutStore\";\nimport { panelSides } from \"../../layout/widget-panels/Panel\";\n\n/** Displays a dropdown button to un-hide widgets in the bottom-right corner of the navigation widget area.\n * @internal\n */\nexport function NavigationWidget({ children }: React.PropsWithChildren<{}>) {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const tabs = useUserControlledHiddenTabs();\n  const hasWidgets = useHasWidgets();\n  const showAdd = tabs.length > 0 && !hasWidgets;\n  return (\n    <div className=\"uifw-preview-navigationWidget\">\n      {children}\n      <div>\n        {showAdd && (\n          <DropdownButton\n            className=\"uifw-preview-navigationWidget_add\"\n            startIcon={<SvgAdd />}\n            menuItems={(close) =>\n              tabs.map((tab) => {\n                return (\n                  <MenuItem\n                    key={tab.id}\n                    onClick={() => {\n                      dispatch({\n                        type: \"WIDGET_TAB_SHOW\",\n                        id: tab.id,\n                      });\n                      close();\n                    }}\n                  >\n                    {tab.label}\n                  </MenuItem>\n                );\n              })\n            }\n          >\n            {label}\n          </DropdownButton>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** Returns `false` if there are no floating widgets or panel sections. */\nfunction useHasWidgets() {\n  return useLayout((state) => {\n    if (state.floatingWidgets.allIds.length > 0) return true;\n\n    for (const side of panelSides) {\n      const panel = state.panels[side];\n      if (panel.widgets.length > 0) {\n        return true;\n      }\n    }\n    return false;\n  });\n}\n"]}

package/lib/esm/appui-react/{layout/base/Ellipsis.scss → preview/control-widget-visibility/NavigationWidget.scss}

@@ -2,19 +2,16 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.nz-base-ellipsis {
-  display: flex;
-  flex-direction: row;
-
-  > .nz-dot {
-    $size: 0.25em;
-    width: $size;
-    height: $size;
-    border-radius: 50%;
-    background-color: currentColor;
+@layer appui.preview {
+  .uifw-preview-navigationWidget {
+    display: grid;
+    grid-gap: 6px;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto;
+  }
 
-    &:not(:first-child) {
-      margin-left: 3px;
-    }
+  .uifw-preview-navigationWidget_add {
+    pointer-events: all;
+    float: right;
   }
 }

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

@@ -17,18 +17,18 @@ import { usePanelWidgetId } from "../../layout/widget/usePanelWidgetId";
 export function MaximizeToggle() {
     const widgetId = React.useContext(WidgetIdContext);
     const { maximizedWidget, setMaximizedWidget } = React.useContext(MaximizedWidgetContext);
-    const { id, title, iconSpec } = maximizedWidget === widgetId
+    const { id, label, iconSpec } = maximizedWidget === widgetId
         ? {
             id: undefined,
-            title: "Restore",
+            label: "Restore",
             iconSpec: React.createElement(SvgWindowMinimize, null),
         }
         : {
             id: widgetId,
-            title: "Maximize",
+            label: "Maximize",
             iconSpec: React.createElement(SvgWindowMaximize, null),
         };
-    return (React.createElement(ActionButton, { icon: iconSpec, title: title, onClick: () => {
+    return (React.createElement(ActionButton, { icon: iconSpec, label: label, onClick: () => {
             setMaximizedWidget(id);
         } }));
 }

package/lib/esm/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,kCAAkC,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,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\";\nimport { WidgetIdContext } from \"../../layout/widget/Widget\";\nimport { MaximizedWidgetContext } from \"./MaximizedWidget\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\nimport { useFloatingWidgetId } from \"../../layout/widget/FloatingWidget\";\nimport { usePanelWidgetId } from \"../../layout/widget/usePanelWidgetId\";\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, title, iconSpec } =\n    maximizedWidget === widgetId\n      ? {\n          id: undefined,\n          title: \"Restore\",\n          iconSpec: <SvgWindowMinimize />,\n        }\n      : {\n          id: widgetId,\n          title: \"Maximize\",\n          iconSpec: <SvgWindowMaximize />,\n        };\n\n  return (\n    <ActionButton\n      icon={iconSpec}\n      title={title}\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,kCAAkC,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,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\";\nimport { WidgetIdContext } from \"../../layout/widget/Widget\";\nimport { MaximizedWidgetContext } from \"./MaximizedWidget\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\nimport { useFloatingWidgetId } from \"../../layout/widget/FloatingWidget\";\nimport { usePanelWidgetId } from \"../../layout/widget/usePanelWidgetId\";\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"]}

package/lib/esm/appui-react/preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign.js

@@ -77,7 +77,7 @@ export function PreviewHorizontalPanelAlignButton() {
     assert(!!side);
     assert(isHorizontalPanelSide(side));
     const { alignments, setAlignment } = React.useContext(HorizontalPanelAlignContext);
-    const title = "Align panel";
+    const label = "Align panel";
     const getMenuItems = (onClose) => [
         HorizontalAlignment.Justify,
         HorizontalAlignment.Center,
@@ -91,10 +91,10 @@ export function PreviewHorizontalPanelAlignButton() {
     });
     const dropdownContext = React.useContext(WidgetActionDropdownContext);
     if (dropdownContext !== undefined) {
-        return (React.createElement(MenuItem, { icon: getIcon(side, alignments[side]), subMenuItems: getMenuItems() }, title));
+        return (React.createElement(MenuItem, { icon: getIcon(side, alignments[side]), subMenuItems: getMenuItems(dropdownContext.onClose) }, label));
     }
     return (React.createElement(DropdownMenu, { menuItems: (close) => getMenuItems(close) },
-        React.createElement(TabBarButton, { title: title }, getIcon(side, alignments[side]))));
+        React.createElement(TabBarButton, { label: label }, getIcon(side, alignments[side]))));
 }
 /** @internal */
 export function useHorizontalPanelAlignButton() {

package/lib/esm/appui-react/preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewHorizontalPanelAlign.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign.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 { HorizontalAlignment } from \"@itwin/core-react\";\nimport { DropdownMenu, MenuItem } from \"@itwin/itwinui-react\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../../layout/widget-panels/Panel\";\nimport type {\n  HorizontalPanelSide,\n  PanelSide,\n} from \"../../layout/widget-panels/PanelTypes\";\nimport { WidgetActionDropdownContext } from \"../widget-action-dropdown/MoreButton\";\nimport { TabBarButton } from \"../../layout/widget/Button\";\nimport { useMainPanelWidgetId } from \"../../layout/widget/usePanelWidgetId\";\nimport { useIsMaximizedWidget } from \"../enable-maximized-widget/useMaximizedWidget\";\n\n/** Default value used when not provided or disabled. */\nconst defaultAlignments = {\n  top: HorizontalAlignment.Justify,\n  bottom: HorizontalAlignment.Justify,\n};\n\n/** @internal */\nexport const HorizontalPanelAlignContext = React.createContext<{\n  enabled: boolean;\n  alignments: {\n    [side in HorizontalPanelSide]: HorizontalAlignment;\n  };\n  setAlignment: (\n    panel: PanelSide | undefined,\n    alignment: HorizontalAlignment\n  ) => void;\n}>({\n  enabled: false,\n  alignments: defaultAlignments,\n  setAlignment: () => {},\n});\n\n/** Preview horizontal panel alignment feature provider.\n * @internal\n */\nexport function PreviewHorizontalPanelAlignFeatureProvider({\n  enabled,\n  children,\n}: {\n  enabled?: boolean;\n  children?: React.ReactNode;\n}) {\n  const [alignments, setAlignments] = React.useState<{\n    [x in HorizontalPanelSide]: HorizontalAlignment;\n  }>({\n    top: HorizontalAlignment.Justify,\n    bottom: HorizontalAlignment.Justify,\n  });\n  const setAlignment = React.useCallback(\n    (panel: PanelSide | undefined, alignment: HorizontalAlignment) => {\n      if (!panel || !isHorizontalPanelSide(panel)) return;\n      setAlignments((prev) => ({\n        ...prev,\n        [panel]: alignment,\n      }));\n    },\n    []\n  );\n  return (\n    <HorizontalPanelAlignContext.Provider\n      value={{\n        enabled: !!enabled,\n        alignments: enabled ? alignments : defaultAlignments,\n        setAlignment,\n      }}\n    >\n      {children}\n    </HorizontalPanelAlignContext.Provider>\n  );\n}\n\nfunction SvgSide(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm11 7H1V3h10v6Zm4 4h-3V3h3v10Z\" />\n    </svg>\n  );\n}\n\nfunction SvgJustify(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm4 7H1V3h3v6Zm1 0V3h6v6H5Zm10 0h-3V3h3v6Z\" />\n    </svg>\n  );\n}\n\nfunction SvgCenter(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm4 11H1V3h3v10Zm1-4V3h6v6H5Zm10 4h-3V3h3v10Z\" />\n    </svg>\n  );\n}\n\nfunction getIcon(side: HorizontalPanelSide, alignment: HorizontalAlignment) {\n  const scaleY = side === \"top\" ? \"-1\" : \"1\";\n  if (alignment === HorizontalAlignment.Justify)\n    return <SvgJustify transform={`scale(1, ${scaleY})`} />;\n  if (alignment === HorizontalAlignment.Center)\n    return <SvgCenter transform={`scale(1, ${scaleY})`} />;\n  const scaleX = alignment === HorizontalAlignment.Left ? \"1\" : \"-1\";\n  return <SvgSide transform={`scale(${scaleX}, ${scaleY})`} />;\n}\n\nfunction capitalize(s: string) {\n  return s.charAt(0).toUpperCase() + s.slice(1);\n}\n\n/** @internal */\nexport function PreviewHorizontalPanelAlignButton() {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  assert(isHorizontalPanelSide(side));\n  const { alignments, setAlignment } = React.useContext(\n    HorizontalPanelAlignContext\n  );\n  const title = \"Align panel\";\n\n  const getMenuItems = (onClose?: () => void) =>\n    [\n      HorizontalAlignment.Justify,\n      HorizontalAlignment.Center,\n      HorizontalAlignment.Left,\n      HorizontalAlignment.Right,\n    ].map((align) => {\n      return (\n        <MenuItem\n          key={align}\n          onClick={() => {\n            setAlignment(side, align);\n            onClose?.();\n          }}\n          icon={getIcon(side, align)}\n          isSelected={alignments[side] === align}\n        >\n          {capitalize(align)}\n        </MenuItem>\n      );\n    });\n  const dropdownContext = React.useContext(WidgetActionDropdownContext);\n  if (dropdownContext !== undefined) {\n    return (\n      <MenuItem\n        icon={getIcon(side, alignments[side])}\n        subMenuItems={getMenuItems()}\n      >\n        {title}\n      </MenuItem>\n    );\n  }\n  return (\n    <DropdownMenu menuItems={(close) => getMenuItems(close)}>\n      <TabBarButton title={title}>\n        {getIcon(side, alignments[side])}\n      </TabBarButton>\n    </DropdownMenu>\n  );\n}\n\n/** @internal */\nexport function useHorizontalPanelAlignButton() {\n  const side = React.useContext(PanelSideContext);\n  const { enabled } = React.useContext(HorizontalPanelAlignContext);\n  const isMainPanelWidget = !!useMainPanelWidgetId();\n  const isMaximizedWidget = useIsMaximizedWidget();\n\n  if (!side) return false;\n  const isHorizontalPanel = isHorizontalPanelSide(side);\n  return (\n    enabled && isHorizontalPanel && isMainPanelWidget && !isMaximizedWidget\n  );\n}\n"]}
+{"version":3,"file":"PreviewHorizontalPanelAlign.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign.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 { HorizontalAlignment } from \"@itwin/core-react\";\nimport { DropdownMenu, MenuItem } from \"@itwin/itwinui-react\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../../layout/widget-panels/Panel\";\nimport type {\n  HorizontalPanelSide,\n  PanelSide,\n} from \"../../layout/widget-panels/PanelTypes\";\nimport { WidgetActionDropdownContext } from \"../widget-action-dropdown/MoreButton\";\nimport { TabBarButton } from \"../../layout/widget/Button\";\nimport { useMainPanelWidgetId } from \"../../layout/widget/usePanelWidgetId\";\nimport { useIsMaximizedWidget } from \"../enable-maximized-widget/useMaximizedWidget\";\n\n/** Default value used when not provided or disabled. */\nconst defaultAlignments = {\n  top: HorizontalAlignment.Justify,\n  bottom: HorizontalAlignment.Justify,\n};\n\n/** @internal */\nexport const HorizontalPanelAlignContext = React.createContext<{\n  enabled: boolean;\n  alignments: {\n    [side in HorizontalPanelSide]: HorizontalAlignment;\n  };\n  setAlignment: (\n    panel: PanelSide | undefined,\n    alignment: HorizontalAlignment\n  ) => void;\n}>({\n  enabled: false,\n  alignments: defaultAlignments,\n  setAlignment: () => {},\n});\n\n/** Preview horizontal panel alignment feature provider.\n * @internal\n */\nexport function PreviewHorizontalPanelAlignFeatureProvider({\n  enabled,\n  children,\n}: {\n  enabled?: boolean;\n  children?: React.ReactNode;\n}) {\n  const [alignments, setAlignments] = React.useState<{\n    [x in HorizontalPanelSide]: HorizontalAlignment;\n  }>({\n    top: HorizontalAlignment.Justify,\n    bottom: HorizontalAlignment.Justify,\n  });\n  const setAlignment = React.useCallback(\n    (panel: PanelSide | undefined, alignment: HorizontalAlignment) => {\n      if (!panel || !isHorizontalPanelSide(panel)) return;\n      setAlignments((prev) => ({\n        ...prev,\n        [panel]: alignment,\n      }));\n    },\n    []\n  );\n  return (\n    <HorizontalPanelAlignContext.Provider\n      value={{\n        enabled: !!enabled,\n        alignments: enabled ? alignments : defaultAlignments,\n        setAlignment,\n      }}\n    >\n      {children}\n    </HorizontalPanelAlignContext.Provider>\n  );\n}\n\nfunction SvgSide(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm11 7H1V3h10v6Zm4 4h-3V3h3v10Z\" />\n    </svg>\n  );\n}\n\nfunction SvgJustify(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm4 7H1V3h3v6Zm1 0V3h6v6H5Zm10 0h-3V3h3v6Z\" />\n    </svg>\n  );\n}\n\nfunction SvgCenter(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm4 11H1V3h3v10Zm1-4V3h6v6H5Zm10 4h-3V3h3v10Z\" />\n    </svg>\n  );\n}\n\nfunction getIcon(side: HorizontalPanelSide, alignment: HorizontalAlignment) {\n  const scaleY = side === \"top\" ? \"-1\" : \"1\";\n  if (alignment === HorizontalAlignment.Justify)\n    return <SvgJustify transform={`scale(1, ${scaleY})`} />;\n  if (alignment === HorizontalAlignment.Center)\n    return <SvgCenter transform={`scale(1, ${scaleY})`} />;\n  const scaleX = alignment === HorizontalAlignment.Left ? \"1\" : \"-1\";\n  return <SvgSide transform={`scale(${scaleX}, ${scaleY})`} />;\n}\n\nfunction capitalize(s: string) {\n  return s.charAt(0).toUpperCase() + s.slice(1);\n}\n\n/** @internal */\nexport function PreviewHorizontalPanelAlignButton() {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  assert(isHorizontalPanelSide(side));\n  const { alignments, setAlignment } = React.useContext(\n    HorizontalPanelAlignContext\n  );\n  const label = \"Align panel\";\n\n  const getMenuItems = (onClose?: () => void) =>\n    [\n      HorizontalAlignment.Justify,\n      HorizontalAlignment.Center,\n      HorizontalAlignment.Left,\n      HorizontalAlignment.Right,\n    ].map((align) => {\n      return (\n        <MenuItem\n          key={align}\n          onClick={() => {\n            setAlignment(side, align);\n            onClose?.();\n          }}\n          icon={getIcon(side, align)}\n          isSelected={alignments[side] === align}\n        >\n          {capitalize(align)}\n        </MenuItem>\n      );\n    });\n  const dropdownContext = React.useContext(WidgetActionDropdownContext);\n  if (dropdownContext !== undefined) {\n    return (\n      <MenuItem\n        icon={getIcon(side, alignments[side])}\n        subMenuItems={getMenuItems(dropdownContext.onClose)}\n      >\n        {label}\n      </MenuItem>\n    );\n  }\n  return (\n    <DropdownMenu menuItems={(close) => getMenuItems(close)}>\n      <TabBarButton label={label}>\n        {getIcon(side, alignments[side])}\n      </TabBarButton>\n    </DropdownMenu>\n  );\n}\n\n/** @internal */\nexport function useHorizontalPanelAlignButton() {\n  const side = React.useContext(PanelSideContext);\n  const { enabled } = React.useContext(HorizontalPanelAlignContext);\n  const isMainPanelWidget = !!useMainPanelWidgetId();\n  const isMaximizedWidget = useIsMaximizedWidget();\n\n  if (!side) return false;\n  const isHorizontalPanel = isHorizontalPanelSide(side);\n  return (\n    enabled && isHorizontalPanel && isMainPanelWidget && !isMaximizedWidget\n  );\n}\n"]}

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

@@ -5,7 +5,7 @@ import * as React from "react";
 import { MenuItem } from "@itwin/itwinui-react";
 import { TabBarButton } from "../../layout/widget/Button";
 interface ActionButtonProps {
-    title?: string;
+    label?: string;
     icon: React.JSX.Element;
     onClick?: () => void;
     menuProps?: React.ComponentProps<typeof MenuItem>;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/widget-action-dropdown/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;CACzD;AAED,gBAAgB;AAChB,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAkBpD"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/widget-action-dropdown/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;CACzD;AAED,gBAAgB;AAChB,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAyBpD"}

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

@@ -13,8 +13,11 @@ import { TabBarButton } from "../../layout/widget/Button";
 export function ActionButton(props) {
     const dropdownContext = React.useContext(WidgetActionDropdownContext);
     if (dropdownContext !== undefined) {
-        return (React.createElement(MenuItem, { icon: props.icon, onClick: props.onClick, ...props.menuProps }, props.title));
+        return (React.createElement(MenuItem, { icon: props.icon, onClick: () => {
+                props.onClick?.();
+                dropdownContext.onClose();
+            }, ...props.menuProps }, props.label));
     }
-    return (React.createElement(TabBarButton, { onClick: props.onClick, title: props.title, ...props.buttonProps }, props.icon));
+    return (React.createElement(TabBarButton, { onClick: props.onClick, label: props.label, ...props.buttonProps }, props.icon));
 }
 //# sourceMappingURL=Button.js.map