@itwin/appui-react 4.10.0 → 4.12.0

package/lib/cjs/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.d.ts

@@ -0,0 +1,6 @@
+import "./useContentAlwaysMaxSize.scss";
+/** @internal */
+export declare function useContentAlwaysMaxSize(): {
+    "uifw-preview-contentAlwaysMaxSize": boolean | undefined;
+};
+//# sourceMappingURL=useContentAlwaysMaxSize.d.ts.map

package/lib/cjs/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentAlwaysMaxSize.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.tsx"],"names":[],"mappings":"AAIA,OAAO,gCAAgC,CAAC;AAGxC,gBAAgB;AAChB,wBAAgB,uBAAuB;;EAKtC"}

package/lib/cjs/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContentAlwaysMaxSize = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+require("./useContentAlwaysMaxSize.scss");
+const PreviewFeatures_1 = require("../PreviewFeatures");
+/** @internal */
+function useContentAlwaysMaxSize() {
+    const { contentAlwaysMaxSize } = (0, PreviewFeatures_1.usePreviewFeatures)();
+    return {
+        "uifw-preview-contentAlwaysMaxSize": contentAlwaysMaxSize,
+    };
+}
+exports.useContentAlwaysMaxSize = useContentAlwaysMaxSize;
+//# sourceMappingURL=useContentAlwaysMaxSize.js.map

package/lib/cjs/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentAlwaysMaxSize.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.tsx"],"names":[],"mappings":";;;AAAA;;;gGAGgG;AAChG,0CAAwC;AACxC,wDAAwD;AAExD,gBAAgB;AAChB,SAAgB,uBAAuB;IACrC,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAA,oCAAkB,GAAE,CAAC;IACtD,OAAO;QACL,mCAAmC,EAAE,oBAAoB;KAC1D,CAAC;AACJ,CAAC;AALD,0DAKC","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 *--------------------------------------------------------------------------------------------*/\nimport \"./useContentAlwaysMaxSize.scss\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\n\n/** @internal */\nexport function useContentAlwaysMaxSize() {\n  const { contentAlwaysMaxSize } = usePreviewFeatures();\n  return {\n    \"uifw-preview-contentAlwaysMaxSize\": contentAlwaysMaxSize,\n  };\n}\n"]}

package/lib/cjs/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.scss

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@layer appui.preview {
+  .uifw-preview-contentAlwaysMaxSize {
+    grid-row: 1 / -1;
+    grid-column: 1 / -1;
+  }
+}

package/lib/cjs/appui-react/preview/enable-maximized-widget/useMaximizedWidget.d.ts

@@ -8,16 +8,16 @@ import type { PanelSide } from "../../layout/widget-panels/PanelTypes";
 export declare function useIsMaximizedWidget(): boolean;
 /** @internal */
 export declare function useMaximizedPanelLayout(side: PanelSide): {
-    "preview-maximized-panel-layout": boolean;
+    "uifw-preview-enableMaximizedWidget_panel-layout": boolean;
 };
 /** @internal */
 export declare function useMaximizedPanel(side: PanelSide): {
-    "preview-maximized-panel": true;
+    "uifw-preview-enableMaximizedWidget_panel": true;
 } | undefined;
 /** @internal */
 export declare function useMaximizedSection(widgetId: WidgetState["id"]): {
-    "preview-maximized-section": boolean;
-    "preview-maximized-section-sibling": boolean;
+    "uifw-preview-enableMaximizedWidget_section": boolean;
+    "uifw-preview-enableMaximizedWidget_section-sibling": boolean;
 } | undefined;
 /** @internal */
 export declare function useMaximizedFloatingWidget(): {
@@ -29,7 +29,7 @@ export declare function useMaximizedFloatingWidget(): {
         "max-width"?: undefined;
     };
     classNames: {
-        "preview-maximized-floatingWidget"?: undefined;
+        "uifw-preview-enableMaximizedWidget_floatingWidget"?: undefined;
     };
 } | {
     style: {
@@ -40,11 +40,11 @@ export declare function useMaximizedFloatingWidget(): {
         "max-width": string;
     };
     classNames: {
-        "preview-maximized-floatingWidget": boolean;
+        "uifw-preview-enableMaximizedWidget_floatingWidget": boolean;
     };
 };
 /** @internal */
 export declare function useMaximizedWidgetTabBarHandle(): {
-    "preview-maximized-widget-tabBar": boolean;
+    "uifw-preview-enableMaximizedWidget_widget-tabBar": boolean;
 };
 //# sourceMappingURL=useMaximizedWidget.d.ts.map

package/lib/cjs/appui-react/preview/enable-maximized-widget/useMaximizedWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMaximizedWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/enable-maximized-widget/useMaximizedWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AASnC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAGvE,gBAAgB;AAChB,wBAAgB,oBAAoB,YAMnC;AAED,gBAAgB;AAChB,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,SAAS;;EAKtD;AAED,gBAAgB;AAChB,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,SAAS;;cAMhD;AAED,gBAAgB;AAChB,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC;;;cAQ9D;AAqCD,gBAAgB;AAChB,wBAAgB,0BAA0B;;;;;;;;;;;;;;;;;;;;;;EAkBzC;AAED,gBAAgB;AAChB,wBAAgB,8BAA8B;;EAK7C"}
+{"version":3,"file":"useMaximizedWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/enable-maximized-widget/useMaximizedWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AASnC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAGvE,gBAAgB;AAChB,wBAAgB,oBAAoB,YAMnC;AAED,gBAAgB;AAChB,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,SAAS;;EAKtD;AAED,gBAAgB;AAChB,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,SAAS;;cAMhD;AAED,gBAAgB;AAChB,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC;;;cAU9D;AAqCD,gBAAgB;AAChB,wBAAgB,0BAA0B;;;;;;;;;;;;;;;;;;;;;;EAkBzC;AAED,gBAAgB;AAChB,wBAAgB,8BAA8B;;EAK7C"}

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

@@ -28,7 +28,7 @@ exports.useIsMaximizedWidget = useIsMaximizedWidget;
 function useMaximizedPanelLayout(side) {
     const location = useMaximizedPanelWidgetLocation();
     return {
-        "preview-maximized-panel-layout": location?.side === side,
+        "uifw-preview-enableMaximizedWidget_panel-layout": (location === null || location === void 0 ? void 0 : location.side) === side,
     };
 }
 exports.useMaximizedPanelLayout = useMaximizedPanelLayout;
@@ -38,7 +38,7 @@ function useMaximizedPanel(side) {
     if (!isMaximized)
         return undefined;
     return {
-        "preview-maximized-panel": isMaximized,
+        "uifw-preview-enableMaximizedWidget_panel": isMaximized,
     };
 }
 exports.useMaximizedPanel = useMaximizedPanel;
@@ -48,14 +48,14 @@ function useMaximizedSection(widgetId) {
     if (!location)
         return undefined;
     return {
-        "preview-maximized-section": location.widgetId === widgetId,
-        "preview-maximized-section-sibling": location.widgetId !== widgetId,
+        "uifw-preview-enableMaximizedWidget_section": location.widgetId === widgetId,
+        "uifw-preview-enableMaximizedWidget_section-sibling": location.widgetId !== widgetId,
     };
 }
 exports.useMaximizedSection = useMaximizedSection;
 function useIsMaximizedPanel(side) {
     const location = useMaximizedPanelWidgetLocation();
-    return location?.side === side;
+    return (location === null || location === void 0 ? void 0 : location.side) === side;
 }
 function useMaximizedPanelWidgetLocation() {
     const location = useMaximizedWidgetLocation();
@@ -100,7 +100,7 @@ function useMaximizedFloatingWidget() {
             "max-height": "unset",
             "max-width": "unset",
         },
-        classNames: { "preview-maximized-floatingWidget": true },
+        classNames: { "uifw-preview-enableMaximizedWidget_floatingWidget": true },
     };
 }
 exports.useMaximizedFloatingWidget = useMaximizedFloatingWidget;
@@ -108,7 +108,7 @@ exports.useMaximizedFloatingWidget = useMaximizedFloatingWidget;
 function useMaximizedWidgetTabBarHandle() {
     const isMaximizedWidget = useIsMaximizedWidget();
     return {
-        "preview-maximized-widget-tabBar": isMaximizedWidget,
+        "uifw-preview-enableMaximizedWidget_widget-tabBar": isMaximizedWidget,
     };
 }
 exports.useMaximizedWidgetTabBarHandle = useMaximizedWidgetTabBarHandle;

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

@@ -1 +1 @@
-{"version":3,"file":"useMaximizedWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/enable-maximized-widget/useMaximizedWidget.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 \"./useMaximizedWidget.scss\";\nimport * as React from \"react\";\nimport { WidgetIdContext } from \"../../layout/widget/Widget\";\nimport { MaximizedWidgetContext } from \"./MaximizedWidget\";\nimport { useLayout } from \"../../layout/base/LayoutStore\";\nimport {\n  getWidgetLocation,\n  isPanelWidgetLocation,\n} from \"../../layout/state/WidgetLocation\";\nimport type { WidgetState } from \"../../layout/state/WidgetState\";\nimport type { PanelSide } from \"../../layout/widget-panels/PanelTypes\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\n\n/** @internal */\nexport function useIsMaximizedWidget() {\n  const widgetId = React.useContext(WidgetIdContext);\n  const maximizedWidgetId = useMaximizedWidgetId();\n  if (maximizedWidgetId === undefined) return false;\n\n  return widgetId === maximizedWidgetId;\n}\n\n/** @internal */\nexport function useMaximizedPanelLayout(side: PanelSide) {\n  const location = useMaximizedPanelWidgetLocation();\n  return {\n    \"preview-maximized-panel-layout\": location?.side === side,\n  };\n}\n\n/** @internal */\nexport function useMaximizedPanel(side: PanelSide) {\n  const isMaximized = useIsMaximizedPanel(side);\n  if (!isMaximized) return undefined;\n  return {\n    \"preview-maximized-panel\": isMaximized,\n  };\n}\n\n/** @internal */\nexport function useMaximizedSection(widgetId: WidgetState[\"id\"]) {\n  const location = useMaximizedPanelWidgetLocation();\n  if (!location) return undefined;\n\n  return {\n    \"preview-maximized-section\": location.widgetId === widgetId,\n    \"preview-maximized-section-sibling\": location.widgetId !== widgetId,\n  };\n}\n\nfunction useIsMaximizedPanel(side: PanelSide) {\n  const location = useMaximizedPanelWidgetLocation();\n  return location?.side === side;\n}\n\nfunction useMaximizedPanelWidgetLocation() {\n  const location = useMaximizedWidgetLocation();\n\n  if (!location) return undefined;\n  if (!isPanelWidgetLocation(location)) return undefined;\n\n  return location;\n}\n\nfunction useMaximizedWidgetLocation() {\n  const widgetId = useMaximizedWidgetId();\n  const location = useLayout((state) => {\n    if (!widgetId) return undefined;\n    return getWidgetLocation(state, widgetId);\n  }, true);\n\n  if (!widgetId || !location) return undefined;\n  return { ...location, widgetId };\n}\n\nfunction useMaximizedWidgetId() {\n  const { maximizedWidget } = React.useContext(MaximizedWidgetContext);\n  const preview = usePreviewFeatures();\n  const enabled =\n    preview.enableMaximizedFloatingWidget || preview.enableMaximizedPanelWidget;\n  if (!enabled) return undefined;\n\n  return maximizedWidget;\n}\n\n/** @internal */\nexport function useMaximizedFloatingWidget() {\n  const isMaximizedWidget = useIsMaximizedWidget();\n  if (!isMaximizedWidget)\n    return {\n      style: {},\n      classNames: {},\n    };\n\n  return {\n    style: {\n      transform: \"unset\",\n      height: \"unset\",\n      width: \"unset\",\n      \"max-height\": \"unset\",\n      \"max-width\": \"unset\",\n    },\n    classNames: { \"preview-maximized-floatingWidget\": true },\n  };\n}\n\n/** @internal */\nexport function useMaximizedWidgetTabBarHandle() {\n  const isMaximizedWidget = useIsMaximizedWidget();\n  return {\n    \"preview-maximized-widget-tabBar\": isMaximizedWidget,\n  };\n}\n"]}
+{"version":3,"file":"useMaximizedWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/enable-maximized-widget/useMaximizedWidget.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 \"./useMaximizedWidget.scss\";\nimport * as React from \"react\";\nimport { WidgetIdContext } from \"../../layout/widget/Widget\";\nimport { MaximizedWidgetContext } from \"./MaximizedWidget\";\nimport { useLayout } from \"../../layout/base/LayoutStore\";\nimport {\n  getWidgetLocation,\n  isPanelWidgetLocation,\n} from \"../../layout/state/WidgetLocation\";\nimport type { WidgetState } from \"../../layout/state/WidgetState\";\nimport type { PanelSide } from \"../../layout/widget-panels/PanelTypes\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\n\n/** @internal */\nexport function useIsMaximizedWidget() {\n  const widgetId = React.useContext(WidgetIdContext);\n  const maximizedWidgetId = useMaximizedWidgetId();\n  if (maximizedWidgetId === undefined) return false;\n\n  return widgetId === maximizedWidgetId;\n}\n\n/** @internal */\nexport function useMaximizedPanelLayout(side: PanelSide) {\n  const location = useMaximizedPanelWidgetLocation();\n  return {\n    \"uifw-preview-enableMaximizedWidget_panel-layout\": location?.side === side,\n  };\n}\n\n/** @internal */\nexport function useMaximizedPanel(side: PanelSide) {\n  const isMaximized = useIsMaximizedPanel(side);\n  if (!isMaximized) return undefined;\n  return {\n    \"uifw-preview-enableMaximizedWidget_panel\": isMaximized,\n  };\n}\n\n/** @internal */\nexport function useMaximizedSection(widgetId: WidgetState[\"id\"]) {\n  const location = useMaximizedPanelWidgetLocation();\n  if (!location) return undefined;\n\n  return {\n    \"uifw-preview-enableMaximizedWidget_section\":\n      location.widgetId === widgetId,\n    \"uifw-preview-enableMaximizedWidget_section-sibling\":\n      location.widgetId !== widgetId,\n  };\n}\n\nfunction useIsMaximizedPanel(side: PanelSide) {\n  const location = useMaximizedPanelWidgetLocation();\n  return location?.side === side;\n}\n\nfunction useMaximizedPanelWidgetLocation() {\n  const location = useMaximizedWidgetLocation();\n\n  if (!location) return undefined;\n  if (!isPanelWidgetLocation(location)) return undefined;\n\n  return location;\n}\n\nfunction useMaximizedWidgetLocation() {\n  const widgetId = useMaximizedWidgetId();\n  const location = useLayout((state) => {\n    if (!widgetId) return undefined;\n    return getWidgetLocation(state, widgetId);\n  }, true);\n\n  if (!widgetId || !location) return undefined;\n  return { ...location, widgetId };\n}\n\nfunction useMaximizedWidgetId() {\n  const { maximizedWidget } = React.useContext(MaximizedWidgetContext);\n  const preview = usePreviewFeatures();\n  const enabled =\n    preview.enableMaximizedFloatingWidget || preview.enableMaximizedPanelWidget;\n  if (!enabled) return undefined;\n\n  return maximizedWidget;\n}\n\n/** @internal */\nexport function useMaximizedFloatingWidget() {\n  const isMaximizedWidget = useIsMaximizedWidget();\n  if (!isMaximizedWidget)\n    return {\n      style: {},\n      classNames: {},\n    };\n\n  return {\n    style: {\n      transform: \"unset\",\n      height: \"unset\",\n      width: \"unset\",\n      \"max-height\": \"unset\",\n      \"max-width\": \"unset\",\n    },\n    classNames: { \"uifw-preview-enableMaximizedWidget_floatingWidget\": true },\n  };\n}\n\n/** @internal */\nexport function useMaximizedWidgetTabBarHandle() {\n  const isMaximizedWidget = useIsMaximizedWidget();\n  return {\n    \"uifw-preview-enableMaximizedWidget_widget-tabBar\": isMaximizedWidget,\n  };\n}\n"]}

package/lib/cjs/appui-react/preview/enable-maximized-widget/useMaximizedWidget.scss

@@ -5,32 +5,32 @@
 @import "~@itwin/core-react/lib/cjs/core-react/z-index";
 
 @layer appui.preview.enable-maximized-widget {
-  .preview-maximized-panel-layout {
+  .uifw-preview-enableMaximizedWidget_panel-layout {
     grid-row: 1 / -1;
     grid-column: 1 / -1;
 
     z-index: uicore-get-z-index(dragged-widget) + 1;
   }
 
-  .preview-maximized-panel {
+  .uifw-preview-enableMaximizedWidget_panel {
     height: 100%;
   }
 
-  .preview-maximized-section {
+  .uifw-preview-enableMaximizedWidget_section {
     flex: 1;
   }
 
-  .preview-maximized-section-sibling {
+  .uifw-preview-enableMaximizedWidget_section-sibling {
     display: none;
   }
 
-  .preview-maximized-floatingWidget {
+  .uifw-preview-enableMaximizedWidget_floatingWidget {
     opacity: 1;
     border-radius: unset;
     inset: 0;
   }
 
-  .preview-maximized-widget-tabBar {
+  .uifw-preview-enableMaximizedWidget_widget-tabBar {
     pointer-events: none;
   }
 }

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

@@ -90,7 +90,7 @@ function PreviewHorizontalPanelAlignButton() {
     ].map((align) => {
         return (React.createElement(itwinui_react_1.MenuItem, { key: align, onClick: () => {
                 setAlignment(side, align);
-                onClose?.();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
             }, icon: getIcon(side, align), isSelected: alignments[side] === align }, capitalize(align)));
     });
     const dropdownContext = React.useContext(MoreButton_1.WidgetActionDropdownContext);

package/lib/cjs/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 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"]}

package/lib/cjs/appui-react/preview/horizontal-panel-alignment/useHorizontalPanelAlignment.js

@@ -21,7 +21,7 @@ function useHorizontalPanelAlignment(side) {
                 "data-preview-horizontal-panel-align-bottom": alignments.bottom,
             },
             classNames: {
-                [`preview-${side}`]: true,
+                [`uifw-preview-horizontalPanelAlignment_${side}`]: true,
             },
         }
         : {};

package/lib/cjs/appui-react/preview/horizontal-panel-alignment/useHorizontalPanelAlignment.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHorizontalPanelAlignment.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/horizontal-panel-alignment/useHorizontalPanelAlignment.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,8CAA4C;AAC5C,+BAA+B;AAC/B,+EAA4E;AAG5E,gBAAgB;AAChB,SAAgB,2BAA2B,CAAC,IAAe;IACzD,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yDAA2B,CAAC,CAAC;IAE9E,OAAO,OAAO;QACZ,CAAC,CAAC;YACE,UAAU,EAAE;gBACV,yCAAyC,EAAE,UAAU,CAAC,GAAG;gBACzD,4CAA4C,EAAE,UAAU,CAAC,MAAM;aAChE;YACD,UAAU,EAAE;gBACV,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,IAAI;aAC1B;SACF;QACH,CAAC,CAAC,EAAE,CAAC;AACT,CAAC;AAdD,kEAcC","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 WidgetPanels\n */\n\nimport \"./useHorizontalPanelAlignment.scss\";\nimport * as React from \"react\";\nimport { HorizontalPanelAlignContext } from \"./PreviewHorizontalPanelAlign\";\nimport type { PanelSide } from \"../../layout/widget-panels/PanelTypes\";\n\n/** @internal */\nexport function useHorizontalPanelAlignment(side: PanelSide) {\n  const { enabled, alignments } = React.useContext(HorizontalPanelAlignContext);\n\n  return enabled\n    ? {\n        attributes: {\n          \"data-preview-horizontal-panel-align-top\": alignments.top,\n          \"data-preview-horizontal-panel-align-bottom\": alignments.bottom,\n        },\n        classNames: {\n          [`preview-${side}`]: true,\n        },\n      }\n    : {};\n}\n"]}
+{"version":3,"file":"useHorizontalPanelAlignment.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/horizontal-panel-alignment/useHorizontalPanelAlignment.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,8CAA4C;AAC5C,+BAA+B;AAC/B,+EAA4E;AAG5E,gBAAgB;AAChB,SAAgB,2BAA2B,CAAC,IAAe;IACzD,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yDAA2B,CAAC,CAAC;IAE9E,OAAO,OAAO;QACZ,CAAC,CAAC;YACE,UAAU,EAAE;gBACV,yCAAyC,EAAE,UAAU,CAAC,GAAG;gBACzD,4CAA4C,EAAE,UAAU,CAAC,MAAM;aAChE;YACD,UAAU,EAAE;gBACV,CAAC,yCAAyC,IAAI,EAAE,CAAC,EAAE,IAAI;aACxD;SACF;QACH,CAAC,CAAC,EAAE,CAAC;AACT,CAAC;AAdD,kEAcC","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 WidgetPanels\n */\n\nimport \"./useHorizontalPanelAlignment.scss\";\nimport * as React from \"react\";\nimport { HorizontalPanelAlignContext } from \"./PreviewHorizontalPanelAlign\";\nimport type { PanelSide } from \"../../layout/widget-panels/PanelTypes\";\n\n/** @internal */\nexport function useHorizontalPanelAlignment(side: PanelSide) {\n  const { enabled, alignments } = React.useContext(HorizontalPanelAlignContext);\n\n  return enabled\n    ? {\n        attributes: {\n          \"data-preview-horizontal-panel-align-top\": alignments.top,\n          \"data-preview-horizontal-panel-align-bottom\": alignments.bottom,\n        },\n        classNames: {\n          [`uifw-preview-horizontalPanelAlignment_${side}`]: true,\n        },\n      }\n    : {};\n}\n"]}

package/lib/cjs/appui-react/preview/horizontal-panel-alignment/useHorizontalPanelAlignment.scss

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 @layer appui.preview.horizontal-panel-alignment {
-  .preview-left {
+  .uifw-preview-horizontalPanelAlignment_left {
     &[data-preview-horizontal-panel-align-top="right"],
     &[data-preview-horizontal-panel-align-top="center"] {
       grid-row-start: ts-end;
@@ -14,7 +14,7 @@
     }
   }
 
-  .preview-right {
+  .uifw-preview-horizontalPanelAlignment_right {
     &[data-preview-horizontal-panel-align-top="left"],
     &[data-preview-horizontal-panel-align-top="center"] {
       grid-row-start: ts-end;
@@ -25,7 +25,7 @@
     }
   }
 
-  .preview-top {
+  .uifw-preview-horizontalPanelAlignment_top {
     &[data-preview-horizontal-panel-align-top="right"],
     &[data-preview-horizontal-panel-align-top="center"] {
       grid-column-start: lp-end;
@@ -36,7 +36,7 @@
     }
   }
 
-  .preview-bottom {
+  .uifw-preview-horizontalPanelAlignment_bottom {
     &[data-preview-horizontal-panel-align-bottom="right"],
     &[data-preview-horizontal-panel-align-bottom="center"] {
       grid-column-start: lp-end;

package/lib/cjs/appui-react/preview/new-toolbars/ActionItem.d.ts

@@ -0,0 +1,12 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import * as React from "react";
+import type { ToolbarActionItem } from "../../toolbar/ToolbarItem";
+/** @internal */
+export interface ActionItemProps {
+    item: ToolbarActionItem;
+}
+/** @internal */
+export declare const ActionItem: React.ForwardRefExoticComponent<ActionItemProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ActionItem.d.ts.map

package/lib/cjs/appui-react/preview/new-toolbars/ActionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionItem.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/ActionItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAKnE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,gBAAgB;AAChB,eAAO,MAAM,UAAU,2FAgBtB,CAAC"}

package/lib/cjs/appui-react/preview/new-toolbars/ActionItem.js

@@ -0,0 +1,25 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toolbar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionItem = void 0;
+const React = require("react");
+const OverflowButton_1 = require("./OverflowButton");
+const Item_1 = require("./Item");
+const GroupItem_1 = require("./GroupItem");
+/** @internal */
+exports.ActionItem = React.forwardRef(function ActionItem({ item }, ref) {
+    const overflowContext = React.useContext(OverflowButton_1.ToolGroupOverflowContext);
+    if (overflowContext) {
+        return React.createElement(GroupItem_1.GroupMenuItem, { item: item, onClose: overflowContext.onClose });
+    }
+    return (React.createElement(Item_1.Item, { ref: ref, item: item, onClick: () => {
+            item.execute();
+        } }));
+});
+//# sourceMappingURL=ActionItem.js.map

package/lib/cjs/appui-react/preview/new-toolbars/ActionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionItem.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/ActionItem.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAE/B,qDAA4D;AAC5D,iCAA8B;AAC9B,2CAA4C;AAO5C,gBAAgB;AACH,QAAA,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG;IAC/B,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,yCAAwB,CAAC,CAAC;IACnE,IAAI,eAAe,EAAE;QACnB,OAAO,oBAAC,yBAAa,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,CAAC,OAAO,GAAI,CAAC;KACxE;IACD,OAAO,CACL,oBAAC,WAAI,IACH,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,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 * as React from \"react\";\nimport type { ToolbarActionItem } from \"../../toolbar/ToolbarItem\";\nimport { ToolGroupOverflowContext } from \"./OverflowButton\";\nimport { Item } from \"./Item\";\nimport { GroupMenuItem } from \"./GroupItem\";\n\n/** @internal */\nexport interface ActionItemProps {\n  item: ToolbarActionItem;\n}\n\n/** @internal */\nexport const ActionItem = React.forwardRef<HTMLButtonElement, ActionItemProps>(\n  function ActionItem({ item }, ref) {\n    const overflowContext = React.useContext(ToolGroupOverflowContext);\n    if (overflowContext) {\n      return <GroupMenuItem item={item} onClose={overflowContext.onClose} />;\n    }\n    return (\n      <Item\n        ref={ref}\n        item={item}\n        onClick={() => {\n          item.execute();\n        }}\n      />\n    );\n  }\n);\n"]}

package/lib/cjs/appui-react/preview/new-toolbars/Badge.d.ts

@@ -0,0 +1,9 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Badge.scss";
+import * as React from "react";
+import type { ToolbarItem } from "../../toolbar/ToolbarItem";
+/** @internal */
+export declare function Badge({ badge }: Pick<ToolbarItem, "badge">): React.JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

package/lib/cjs/appui-react/preview/new-toolbars/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/Badge.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,gBAAgB;AAChB,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,qBAM1D"}

package/lib/cjs/appui-react/{statusbar/Popup.js → preview/new-toolbars/Badge.js}

@@ -4,17 +4,17 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
- * @module StatusBar
+ * @module Toolbar
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusBarPopup = void 0;
+exports.Badge = void 0;
+require("./Badge.scss");
 const React = require("react");
-const Popup_1 = require("../layout/footer/Popup");
-/** Popup component used in [[StatusBar]] component.
- * @beta
- */
-function StatusBarPopup(props) {
-    return React.createElement(Popup_1.FooterPopup, { ...props });
+const core_react_1 = require("@itwin/core-react");
+/** @internal */
+function Badge({ badge }) {
+    return (React.createElement("div", { className: "uifw-toolbar-group-badge" },
+        React.createElement(core_react_1.Badge, { type: badge })));
 }
-exports.StatusBarPopup = StatusBarPopup;
-//# sourceMappingURL=Popup.js.map
+exports.Badge = Badge;
+//# sourceMappingURL=Badge.js.map

package/lib/cjs/appui-react/preview/new-toolbars/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/Badge.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,wBAAsB;AACtB,+BAA+B;AAC/B,kDAAuD;AAGvD,gBAAgB;AAChB,SAAgB,KAAK,CAAC,EAAE,KAAK,EAA8B;IACzD,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B;QACvC,oBAAC,kBAAS,IAAC,IAAI,EAAE,KAAK,GAAI,CACtB,CACP,CAAC;AACJ,CAAC;AAND,sBAMC","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 \"./Badge.scss\";\nimport * as React from \"react\";\nimport { Badge as CoreBadge } from \"@itwin/core-react\";\nimport type { ToolbarItem } from \"../../toolbar/ToolbarItem\";\n\n/** @internal */\nexport function Badge({ badge }: Pick<ToolbarItem, \"badge\">) {\n  return (\n    <div className=\"uifw-toolbar-group-badge\">\n      <CoreBadge type={badge} />\n    </div>\n  );\n}\n"]}

package/lib/cjs/appui-react/preview/new-toolbars/Badge.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-group-badge {
+  position: absolute;
+  left: -1px;
+  top: -1px;
+
+  svg {
+    fill: currentColor;
+  }
+}

package/lib/cjs/appui-react/preview/new-toolbars/CustomItem.d.ts

@@ -0,0 +1,12 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import * as React from "react";
+import type { ToolbarCustomItem } from "../../toolbar/ToolbarItem";
+/** @internal */
+export interface CustomItemProps {
+    item: ToolbarCustomItem;
+}
+/** @internal */
+export declare const CustomItem: React.ForwardRefExoticComponent<CustomItemProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=CustomItem.d.ts.map

package/lib/cjs/appui-react/preview/new-toolbars/CustomItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomItem.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/CustomItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAOnE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,gBAAgB;AAChB,eAAO,MAAM,UAAU,2FA2BtB,CAAC"}

package/lib/cjs/appui-react/preview/new-toolbars/CustomItem.js

@@ -0,0 +1,36 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toolbar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomItem = void 0;
+const React = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const ExpandIndicator_1 = require("./ExpandIndicator");
+const Item_1 = require("./Item");
+const GroupItem_1 = require("./GroupItem");
+const OverflowButton_1 = require("./OverflowButton");
+const Toolbar_1 = require("./Toolbar");
+/** @internal */
+exports.CustomItem = React.forwardRef(function CustomItem({ item }, ref) {
+    const placement = (0, GroupItem_1.usePopoverPlacement)();
+    const context = React.useContext(Toolbar_1.ToolbarContext);
+    const overflowContext = React.useContext(OverflowButton_1.ToolGroupOverflowContext);
+    if (overflowContext) {
+        return React.createElement(GroupItem_1.GroupMenuItem, { item: item, onClose: overflowContext.onClose });
+    }
+    return (React.createElement(itwinui_react_1.DropdownMenu, { menuItems: () => {
+            return [
+                React.createElement(itwinui_react_1.MenuExtraContent, { key: 0 }, item.panelContent),
+            ];
+        }, placement: placement, onVisibleChange: (newVisible) => {
+            context === null || context === void 0 ? void 0 : context.setPopoverOpen(newVisible);
+        } },
+        React.createElement(Item_1.Item, { ref: ref, item: item },
+            React.createElement(ExpandIndicator_1.ExpandIndicator, null))));
+});
+//# sourceMappingURL=CustomItem.js.map

package/lib/cjs/appui-react/preview/new-toolbars/CustomItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomItem.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/CustomItem.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,wDAAsE;AAEtE,uDAAoD;AACpD,iCAA8B;AAC9B,2CAAiE;AACjE,qDAA4D;AAC5D,uCAA2C;AAO3C,gBAAgB;AACH,QAAA,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG;IAC/B,MAAM,SAAS,GAAG,IAAA,+BAAmB,GAAE,CAAC;IACxC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAc,CAAC,CAAC;IACjD,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,yCAAwB,CAAC,CAAC;IAEnE,IAAI,eAAe,EAAE;QACnB,OAAO,oBAAC,yBAAa,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,CAAC,OAAO,GAAI,CAAC;KACxE;IACD,OAAO,CACL,oBAAC,4BAAY,IACX,SAAS,EAAE,GAAG,EAAE;YACd,OAAO;gBACL,oBAAC,gCAAgB,IAAC,GAAG,EAAE,CAAC,IAAG,IAAI,CAAC,YAAY,CAAoB;aACjE,CAAC;QACJ,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,CAAC,UAAU,EAAE,EAAE;YAC9B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;QAED,oBAAC,WAAI,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI;YACxB,oBAAC,iCAAe,OAAG,CACd,CACM,CAChB,CAAC;AACJ,CAAC,CACF,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 * as React from \"react\";\nimport { DropdownMenu, MenuExtraContent } from \"@itwin/itwinui-react\";\nimport type { ToolbarCustomItem } from \"../../toolbar/ToolbarItem\";\nimport { ExpandIndicator } from \"./ExpandIndicator\";\nimport { Item } from \"./Item\";\nimport { GroupMenuItem, usePopoverPlacement } from \"./GroupItem\";\nimport { ToolGroupOverflowContext } from \"./OverflowButton\";\nimport { ToolbarContext } from \"./Toolbar\";\n\n/** @internal */\nexport interface CustomItemProps {\n  item: ToolbarCustomItem;\n}\n\n/** @internal */\nexport const CustomItem = React.forwardRef<HTMLButtonElement, CustomItemProps>(\n  function CustomItem({ item }, ref) {\n    const placement = usePopoverPlacement();\n    const context = React.useContext(ToolbarContext);\n    const overflowContext = React.useContext(ToolGroupOverflowContext);\n\n    if (overflowContext) {\n      return <GroupMenuItem item={item} onClose={overflowContext.onClose} />;\n    }\n    return (\n      <DropdownMenu\n        menuItems={() => {\n          return [\n            <MenuExtraContent key={0}>{item.panelContent}</MenuExtraContent>,\n          ];\n        }}\n        placement={placement}\n        onVisibleChange={(newVisible) => {\n          context?.setPopoverOpen(newVisible);\n        }}\n      >\n        <Item ref={ref} item={item}>\n          <ExpandIndicator />\n        </Item>\n      </DropdownMenu>\n    );\n  }\n);\n"]}

package/lib/cjs/appui-react/preview/new-toolbars/ExpandIndicator.d.ts

@@ -0,0 +1,5 @@
+import "./ExpandIndicator.scss";
+import * as React from "react";
+/** @internal */
+export declare function ExpandIndicator(): React.JSX.Element;
+//# sourceMappingURL=ExpandIndicator.d.ts.map

package/lib/cjs/appui-react/preview/new-toolbars/ExpandIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/ExpandIndicator.tsx"],"names":[],"mappings":"AAIA,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,gBAAgB;AAChB,wBAAgB,eAAe,sBAE9B"}

package/lib/cjs/appui-react/preview/new-toolbars/ExpandIndicator.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandIndicator = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+require("./ExpandIndicator.scss");
+const React = require("react");
+/** @internal */
+function ExpandIndicator() {
+    return React.createElement("div", { className: "uifw-toolbar-group-expandIndicator" });
+}
+exports.ExpandIndicator = ExpandIndicator;
+//# sourceMappingURL=ExpandIndicator.js.map

package/lib/cjs/appui-react/preview/new-toolbars/ExpandIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandIndicator.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/ExpandIndicator.tsx"],"names":[],"mappings":";;;AAAA;;;gGAGgG;AAChG,kCAAgC;AAChC,+BAA+B;AAE/B,gBAAgB;AAChB,SAAgB,eAAe;IAC7B,OAAO,6BAAK,SAAS,EAAC,oCAAoC,GAAG,CAAC;AAChE,CAAC;AAFD,0CAEC","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 *--------------------------------------------------------------------------------------------*/\nimport \"./ExpandIndicator.scss\";\nimport * as React from \"react\";\n\n/** @internal */\nexport function ExpandIndicator() {\n  return <div className=\"uifw-toolbar-group-expandIndicator\" />;\n}\n"]}

package/lib/cjs/appui-react/preview/new-toolbars/ExpandIndicator.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/geometry";
+
+.uifw-toolbar-group-expandIndicator {
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+
+  @include triangle-bottom-right(
+    $width: 5px,
+    $height: 5px,
+    $color: currentColor
+  );
+}

package/lib/cjs/appui-react/preview/new-toolbars/GroupItem.d.ts

@@ -0,0 +1,22 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import * as React from "react";
+import type { ToolbarItem } from "../../toolbar/ToolbarItem";
+import { type ToolbarGroupItem } from "../../toolbar/ToolbarItem";
+/** @internal */
+export interface GroupItemProps {
+    item: ToolbarGroupItem;
+}
+/** @internal */
+export declare const GroupItem: React.ForwardRefExoticComponent<GroupItemProps & React.RefAttributes<HTMLButtonElement>>;
+/** @internal */
+export declare function usePopoverPlacement(): "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
+interface GroupMenuItemProps {
+    item: ToolbarItem;
+    onClose?: () => void;
+}
+/** @internal */
+export declare function GroupMenuItem({ item, onClose }: GroupMenuItemProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=GroupItem.d.ts.map

package/lib/cjs/appui-react/preview/new-toolbars/GroupItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupItem.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/GroupItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAC;AAQnC,gBAAgB;AAChB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,gBAAgB,CAAC;CACxB;AAED,gBAAgB;AAChB,eAAO,MAAM,SAAS,0FAyBrB,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,mBAAmB,kIAKlC;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gBAAgB;AAChB,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,kBAAkB,4BA6BlE"}