@itwin/appui-react 4.8.3 → 4.9.0

package/lib/esm/appui-react/layout/widget/Widget.js

@@ -0,0 +1,144 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Widget.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { Rectangle, useRefs } from "@itwin/core-react";
+import { useDragWidget } from "../base/DragManager";
+import { getUniqueId, MeasureContext, NineZoneDispatchContext, } from "../base/NineZone";
+import { PanelSideContext } from "../widget-panels/Panel";
+import { useLayout } from "../base/LayoutStore";
+import { getWidgetState } from "../state/internal/WidgetStateHelpers";
+import { useFloatingWidgetId } from "./FloatingWidget";
+/** @internal */
+export function WidgetProvider(props) {
+    return (React.createElement(WidgetIdContext.Provider, { value: props.id }, props.children));
+}
+/** @internal */
+export const Widget = React.forwardRef(function Widget(props, forwardedRef) {
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const side = React.useContext(PanelSideContext);
+    const id = React.useContext(WidgetIdContext);
+    const measureNz = React.useContext(MeasureContext);
+    const floatingWidgetId = useFloatingWidgetId();
+    assert(!!id);
+    const { preferredFloatingWidgetSize, userSized } = useLayout((state) => {
+        const widget = getWidgetState(state, id);
+        const tab = state.tabs[widget.activeTabId];
+        // istanbul ignore next
+        return {
+            preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
+            userSized: tab.userSized ||
+                (tab.isFloatingWidgetResizable && !!tab.preferredFloatingWidgetSize),
+        };
+    }, true);
+    const elementRef = React.useRef(null);
+    const widgetId = floatingWidgetId === undefined ? id : floatingWidgetId;
+    const onDragStart = React.useCallback((updateId, initialPointerPosition, pointerPosition) => {
+        assert(!!elementRef.current);
+        if (floatingWidgetId !== undefined)
+            return;
+        const nzBounds = measureNz();
+        let bounds = Rectangle.create(elementRef.current.getBoundingClientRect());
+        const size = restrainInitialWidgetSize(bounds.getSize(), nzBounds.getSize());
+        bounds = bounds.setSize(size);
+        if (preferredFloatingWidgetSize) {
+            bounds = bounds.setSize(preferredFloatingWidgetSize);
+        }
+        // Pointer is outside of tab area. Need to re-adjust widget bounds so that tab is behind pointer
+        if (initialPointerPosition.x > bounds.right) {
+            const offset = initialPointerPosition.x - bounds.right + 20;
+            bounds = bounds.offsetX(offset);
+        }
+        const dragOffset = initialPointerPosition.getOffsetTo(pointerPosition);
+        bounds = bounds.offset(dragOffset);
+        // Adjust bounds to be relative to 9z origin
+        bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });
+        const newFloatingWidgetId = getUniqueId();
+        updateId(newFloatingWidgetId);
+        assert(!!side);
+        dispatch({
+            type: "PANEL_WIDGET_DRAG_START",
+            newFloatingWidgetId,
+            id,
+            bounds,
+            side,
+            userSized,
+        });
+    }, [
+        dispatch,
+        floatingWidgetId,
+        id,
+        side,
+        measureNz,
+        preferredFloatingWidgetSize,
+        userSized,
+    ]);
+    useDragWidget({
+        widgetId,
+        onDragStart,
+    });
+    React.useEffect(() => {
+        const listener = () => {
+            floatingWidgetId &&
+                dispatch({
+                    type: "FLOATING_WIDGET_BRING_TO_FRONT",
+                    id: floatingWidgetId,
+                });
+        };
+        const element = elementRef.current;
+        // istanbul ignore next
+        element === null || element === void 0 ? void 0 : element.addEventListener("click", listener);
+        return () => {
+            // istanbul ignore next
+            element === null || element === void 0 ? void 0 : element.removeEventListener("click", listener);
+        };
+    }, [dispatch, floatingWidgetId]);
+    const measure = React.useCallback(() => {
+        // istanbul ignore next
+        if (!elementRef.current)
+            return new Rectangle();
+        const bounds = elementRef.current.getBoundingClientRect();
+        return Rectangle.create(bounds);
+    }, []);
+    const widgetContextValue = React.useMemo(() => ({
+        measure,
+    }), [measure]);
+    const ref = useRefs(forwardedRef, elementRef);
+    const className = classnames("nz-widget-widget", props.className);
+    return (React.createElement(WidgetContext.Provider, { value: widgetContextValue },
+        React.createElement("div", { className: className, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onTransitionEnd: props.onTransitionEnd, ref: ref, style: props.style, "data-widget-id": props.widgetId }, props.children)));
+});
+/** @internal */
+export const WidgetIdContext = React.createContext(undefined);
+WidgetIdContext.displayName = "nz:WidgetIdContext";
+/** @internal */
+export const WidgetContext = React.createContext(null);
+WidgetContext.displayName = "nz:WidgetContext";
+const minWidth = 200;
+const minHeight = 200;
+/** @internal */
+export function restrainInitialWidgetSize(size, nzSize) {
+    const width = Math.max(Math.min(nzSize.width / 3, size.width), minWidth);
+    const height = Math.max(Math.min(nzSize.height / 3, size.height), minHeight);
+    return {
+        width,
+        height,
+    };
+}
+/** @internal */
+export function useActiveTabId() {
+    const id = React.useContext(WidgetIdContext);
+    assert(!!id);
+    return useLayout((state) => {
+        const widget = getWidgetState(state, id);
+        return widget.activeTabId;
+    });
+}
+//# sourceMappingURL=Widget.js.map

package/lib/esm/appui-react/layout/widget/Widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Widget.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 \"./Widget.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps, SizeProps } from \"@itwin/core-react\";\nimport { Rectangle, useRefs } from \"@itwin/core-react\";\nimport type { UseDragWidgetArgs } from \"../base/DragManager\";\nimport { useDragWidget } from \"../base/DragManager\";\nimport {\n  getUniqueId,\n  MeasureContext,\n  NineZoneDispatchContext,\n} from \"../base/NineZone\";\nimport type { WidgetState } from \"../state/WidgetState\";\nimport { PanelSideContext } from \"../widget-panels/Panel\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers\";\nimport { useFloatingWidgetId } from \"./FloatingWidget\";\n\n/** @internal */\nexport interface WidgetProviderProps {\n  id: WidgetState[\"id\"];\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function WidgetProvider(props: WidgetProviderProps) {\n  return (\n    <WidgetIdContext.Provider value={props.id}>\n      {props.children}\n    </WidgetIdContext.Provider>\n  );\n}\n\n/** @internal */\nexport interface WidgetProps extends CommonProps {\n  children?: React.ReactNode;\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  onTransitionEnd?(): void;\n  widgetId?: string;\n}\n\n/** @internal */\nexport const Widget = React.forwardRef<HTMLDivElement, WidgetProps>(\n  function Widget(props, forwardedRef) {\n    const dispatch = React.useContext(NineZoneDispatchContext);\n    const side = React.useContext(PanelSideContext);\n    const id = React.useContext(WidgetIdContext);\n    const measureNz = React.useContext(MeasureContext);\n    const floatingWidgetId = useFloatingWidgetId();\n    assert(!!id);\n    const { preferredFloatingWidgetSize, userSized } = useLayout((state) => {\n      const widget = getWidgetState(state, id);\n      const tab = state.tabs[widget.activeTabId];\n      // istanbul ignore next\n      return {\n        preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,\n        userSized:\n          tab.userSized ||\n          (tab.isFloatingWidgetResizable && !!tab.preferredFloatingWidgetSize),\n      };\n    }, true);\n    const elementRef = React.useRef<HTMLDivElement>(null);\n    const widgetId = floatingWidgetId === undefined ? id : floatingWidgetId;\n    const onDragStart = React.useCallback<\n      NonNullable<UseDragWidgetArgs[\"onDragStart\"]>\n    >(\n      (updateId, initialPointerPosition, pointerPosition) => {\n        assert(!!elementRef.current);\n        if (floatingWidgetId !== undefined) return;\n        const nzBounds = measureNz();\n        let bounds = Rectangle.create(\n          elementRef.current.getBoundingClientRect()\n        );\n\n        const size = restrainInitialWidgetSize(\n          bounds.getSize(),\n          nzBounds.getSize()\n        );\n        bounds = bounds.setSize(size);\n\n        if (preferredFloatingWidgetSize) {\n          bounds = bounds.setSize(preferredFloatingWidgetSize);\n        }\n\n        // Pointer is outside of tab area. Need to re-adjust widget bounds so that tab is behind pointer\n        if (initialPointerPosition.x > bounds.right) {\n          const offset = initialPointerPosition.x - bounds.right + 20;\n          bounds = bounds.offsetX(offset);\n        }\n\n        const dragOffset = initialPointerPosition.getOffsetTo(pointerPosition);\n        bounds = bounds.offset(dragOffset);\n\n        // Adjust bounds to be relative to 9z origin\n        bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });\n\n        const newFloatingWidgetId = getUniqueId();\n        updateId(newFloatingWidgetId);\n\n        assert(!!side);\n        dispatch({\n          type: \"PANEL_WIDGET_DRAG_START\",\n          newFloatingWidgetId,\n          id,\n          bounds,\n          side,\n          userSized,\n        });\n      },\n      [\n        dispatch,\n        floatingWidgetId,\n        id,\n        side,\n        measureNz,\n        preferredFloatingWidgetSize,\n        userSized,\n      ]\n    );\n    useDragWidget({\n      widgetId,\n      onDragStart,\n    });\n    React.useEffect(() => {\n      const listener = () => {\n        floatingWidgetId &&\n          dispatch({\n            type: \"FLOATING_WIDGET_BRING_TO_FRONT\",\n            id: floatingWidgetId,\n          });\n      };\n      const element = elementRef.current;\n      // istanbul ignore next\n      element?.addEventListener(\"click\", listener);\n      return () => {\n        // istanbul ignore next\n        element?.removeEventListener(\"click\", listener);\n      };\n    }, [dispatch, floatingWidgetId]);\n    const measure = React.useCallback<WidgetContextArgs[\"measure\"]>(() => {\n      // istanbul ignore next\n      if (!elementRef.current) return new Rectangle();\n      const bounds = elementRef.current.getBoundingClientRect();\n      return Rectangle.create(bounds);\n    }, []);\n    const widgetContextValue = React.useMemo<WidgetContextArgs>(\n      () => ({\n        measure,\n      }),\n      [measure]\n    );\n    const ref = useRefs(forwardedRef, elementRef);\n    const className = classnames(\"nz-widget-widget\", props.className);\n    return (\n      <WidgetContext.Provider value={widgetContextValue}>\n        <div\n          className={className}\n          onMouseEnter={props.onMouseEnter}\n          onMouseLeave={props.onMouseLeave}\n          onTransitionEnd={props.onTransitionEnd}\n          ref={ref}\n          style={props.style}\n          data-widget-id={props.widgetId}\n        >\n          {props.children}\n        </div>\n      </WidgetContext.Provider>\n    );\n  }\n);\n\n/** @internal */\nexport const WidgetIdContext = React.createContext<\n  WidgetState[\"id\"] | undefined\n>(undefined);\nWidgetIdContext.displayName = \"nz:WidgetIdContext\";\n\n/** @internal */\nexport interface WidgetContextArgs {\n  measure: () => Rectangle;\n}\n\n/** @internal */\nexport const WidgetContext = React.createContext<WidgetContextArgs>(null!);\nWidgetContext.displayName = \"nz:WidgetContext\";\n\nconst minWidth = 200;\nconst minHeight = 200;\n\n/** @internal */\nexport function restrainInitialWidgetSize(\n  size: SizeProps,\n  nzSize: SizeProps\n): SizeProps {\n  const width = Math.max(Math.min(nzSize.width / 3, size.width), minWidth);\n  const height = Math.max(Math.min(nzSize.height / 3, size.height), minHeight);\n  return {\n    width,\n    height,\n  };\n}\n\n/** @internal */\nexport function useActiveTabId() {\n  const id = React.useContext(WidgetIdContext);\n  assert(!!id);\n  return useLayout((state) => {\n    const widget = getWidgetState(state, id);\n    return widget.activeTabId;\n  });\n}\n"]}

package/lib/esm/appui-react/layout/widget/Widget.scss

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.nz-widget-widget {
+  background: var(--iui-color-background);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}

package/lib/esm/appui-react/layout/widget/_variables.scss

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/style/breakpoints";
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+$nz-tab-height: 60px;
+$nz-tab-width: 32px;
+$nz-tab-strip-width: 2px;
+$nz-tab-strip-margin: 2px;
+$nz-tab-background-color: $buic-background-tab-inactive;
+$nz-tab-color: $buic-icon-color;
+
+$nz-active-tab-width: 36px;
+
+$nz-collapsed-tab-width: 6px;
+
+$nz-hovered-tab-color: $buic-foreground-primary-tone;
+$nz-active-tab-color: $buic-foreground-primary;
+$nz-tab-shadow: drop-shadow((-0.4px) 0.9px 0 $buic-text-color-reverse);
+$nz-active-tab-shadow: drop-shadow(0 1px 0 $buic-text-color-reverse);
+$nz-tab-no-shadow: drop-shadow(0 0 0 transparent);
+
+$nz-resize-grip-size: 8px;
+$nz-resize-grip-size-large: 14px;
+
+$nz-widget-background-color: $buic-background-widget;
+$nz-widget-border-color: $buic-background-widget-stroke;
+$nz-widget-border-width: 1px;
+$nz-widget-border-radius: var(--iui-border-radius-1);
+$nz-widget-min-size: $nz-tab-height + 10px;
+
+@mixin nz-internal-grip-offset($property) {
+  #{$property}: -$nz-resize-grip-size * 0.5;
+
+  @include for-tablet-landscape-down {
+    #{$property}: -$nz-resize-grip-size-large * 0.5;
+  }
+}
+
+$nz-widget-tab-font-size: 0.9em;
+$nz-widget-tab-height: 2.1em;
+$nz-widget-tab-border-radius: 2px;
+
+$nz-dragged-widget-opacity: 0.6;

package/lib/esm/appui-react/layout/widget/tools/button/App.d.ts

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./App.scss";
+import * as React from "react";
+import type { NoChildrenProps, OmitChildrenProp } from "@itwin/core-react";
+import type { ToolbarIconProps } from "./Icon";
+/** Properties of [[BackButton]] component.
+ * @internal
+ */
+export interface AppButtonProps extends OmitChildrenProp<ToolbarIconProps>, NoChildrenProps {
+    /** Indicates whether to use a small App button */
+    small?: boolean;
+    /** Mouse proximity to button */
+    mouseProximity?: number;
+}
+/** App button which displays icon. Used in [[Toolbar]] component.
+ * @note See basic button: [[ToolbarButton]]
+ * @internal
+ */
+export declare class AppButton extends React.PureComponent<AppButtonProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=App.d.ts.map

package/lib/esm/appui-react/layout/widget/tools/button/App.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../../../../src/appui-react/layout/widget/tools/button/App.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAG/C;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,gBAAgB,CAAC,gBAAgB,CAAC,EACxC,eAAe;IACjB,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;IAChD,MAAM;CAsBvB"}

package/lib/esm/appui-react/layout/widget/tools/button/App.js

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./App.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ToolbarIcon } from "./Icon";
+/** App button which displays icon. Used in [[Toolbar]] component.
+ * @note See basic button: [[ToolbarButton]]
+ * @internal
+ */
+export class AppButton extends React.PureComponent {
+    render() {
+        const { className, small, ...props } = this.props;
+        const buttonClassName = small
+            ? classnames("nz-toolbar-button-app-small", className)
+            : classnames("nz-toolbar-button-app", className);
+        return (React.createElement(ToolbarIcon, { className: buttonClassName, icon: this.props.icon, small: !!small, ...props },
+            React.createElement("div", { className: "nz-bars" },
+                React.createElement("div", { className: "nz-bar" }),
+                React.createElement("div", { className: "nz-bar" }),
+                React.createElement("div", { className: "nz-bar" }))));
+    }
+}
+//# sourceMappingURL=App.js.map

package/lib/esm/appui-react/layout/widget/tools/button/App.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../../../../../../../src/appui-react/layout/widget/tools/button/App.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAcrC;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,aAA6B;IAChD,MAAM;QACpB,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAElD,MAAM,eAAe,GAAG,KAAK;YAC3B,CAAC,CAAC,UAAU,CAAC,6BAA6B,EAAE,SAAS,CAAC;YACtD,CAAC,CAAC,UAAU,CAAC,uBAAuB,EAAE,SAAS,CAAC,CAAC;QAEnD,OAAO,CACL,oBAAC,WAAW,IACV,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,KAAK,EAAE,CAAC,CAAC,KAAK,KACV,KAAK;YAET,6BAAK,SAAS,EAAC,SAAS;gBACtB,6BAAK,SAAS,EAAC,QAAQ,GAAG;gBAC1B,6BAAK,SAAS,EAAC,QAAQ,GAAG;gBAC1B,6BAAK,SAAS,EAAC,QAAQ,GAAG,CACtB,CACM,CACf,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./App.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { NoChildrenProps, OmitChildrenProp } from \"@itwin/core-react\";\nimport type { ToolbarIconProps } from \"./Icon\";\nimport { ToolbarIcon } from \"./Icon\";\n\n/** Properties of [[BackButton]] component.\n * @internal\n */\nexport interface AppButtonProps\n  extends OmitChildrenProp<ToolbarIconProps>,\n    NoChildrenProps {\n  /** Indicates whether to use a small App button */\n  small?: boolean;\n  /** Mouse proximity to button */\n  mouseProximity?: number;\n}\n\n/** App button which displays icon. Used in [[Toolbar]] component.\n * @note See basic button: [[ToolbarButton]]\n * @internal\n */\nexport class AppButton extends React.PureComponent<AppButtonProps> {\n  public override render() {\n    const { className, small, ...props } = this.props;\n\n    const buttonClassName = small\n      ? classnames(\"nz-toolbar-button-app-small\", className)\n      : classnames(\"nz-toolbar-button-app\", className);\n\n    return (\n      <ToolbarIcon\n        className={buttonClassName}\n        icon={this.props.icon}\n        small={!!small}\n        {...props}\n      >\n        <div className=\"nz-bars\">\n          <div className=\"nz-bar\" />\n          <div className=\"nz-bar\" />\n          <div className=\"nz-bar\" />\n        </div>\n      </ToolbarIcon>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/widget/tools/button/App.scss

@@ -0,0 +1,79 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+.nz-toolbar-button-app {
+  > .nz-bars {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-flow: column;
+    align-items: flex-start;
+    justify-content: center;
+
+    > .nz-bar {
+      background-color: var(--iui-color-icon);
+      width: $bar-width;
+      height: $bar-height;
+      border-top-right-radius: var(--iui-border-radius-round);
+      border-bottom-right-radius: var(--iui-border-radius-round);
+      filter: $icon-shadow;
+    }
+
+    > .nz-bar:not(:first-child) {
+      margin-top: 5px;
+    }
+  }
+}
+
+.nz-toolbar-button-app-small {
+  width: $mls-small-button-width;
+  height: $mls-small-button-height;
+
+  border-width: 0px;
+  box-shadow: var(--iui-shadow-1);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  margin-bottom: 0;
+
+  > .nz-bars {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-flow: column;
+    align-items: flex-start;
+    justify-content: center;
+
+    > .nz-bar {
+      background-color: var(--iui-color-icon);
+      width: $small-bar-width;
+      height: $small-bar-height;
+      border-top-right-radius: var(--iui-border-radius-round);
+      border-bottom-right-radius: var(--iui-border-radius-round);
+      filter: $icon-shadow;
+    }
+
+    > .nz-bar:not(:first-child) {
+      margin-top: 5px;
+    }
+  }
+}
+
+button.nz-toolbar-button-button.nz-toolbar-button-icon.nz-toolbar-button-icon-small.nz-toolbar-button-app-small {
+  border-width: 0px;
+
+  .core-svg-icon {
+    width: $mls-small-button-icon-size;
+    height: $mls-small-button-icon-size;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/tools/button/Back.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Back.scss";
+import * as React from "react";
+import type { NoChildrenProps, OmitChildrenProp } from "@itwin/core-react";
+import type { ToolbarIconProps } from "./Icon";
+/** Properties of [[BackButton]] component.
+ * @internal
+ */
+export interface BackButtonProps extends OmitChildrenProp<ToolbarIconProps>, NoChildrenProps {
+}
+/** Back button which displays icon. Used in [[Toolbar]] component.
+ * @note See basic button: [[ToolbarButton]]
+ * @internal
+ */
+export declare class BackButton extends React.PureComponent<BackButtonProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Back.d.ts.map

package/lib/esm/appui-react/layout/widget/tools/button/Back.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Back.d.ts","sourceRoot":"","sources":["../../../../../../../src/appui-react/layout/widget/tools/button/Back.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAG/C;;GAEG;AACH,MAAM,WAAW,eACf,SAAQ,gBAAgB,CAAC,gBAAgB,CAAC,EACxC,eAAe;CAAG;AAEtB;;;GAGG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC;IAClD,MAAM;CAMvB"}

package/lib/esm/appui-react/layout/widget/tools/button/Back.js

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./Back.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ToolbarIcon } from "./Icon";
+/** Back button which displays icon. Used in [[Toolbar]] component.
+ * @note See basic button: [[ToolbarButton]]
+ * @internal
+ */
+export class BackButton extends React.PureComponent {
+    render() {
+        const { className, ...props } = this.props;
+        const buttonClassName = classnames("nz-toolbar-button-back", className);
+        return React.createElement(ToolbarIcon, { className: buttonClassName, ...props });
+    }
+}
+//# sourceMappingURL=Back.js.map

package/lib/esm/appui-react/layout/widget/tools/button/Back.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Back.js","sourceRoot":"","sources":["../../../../../../../src/appui-react/layout/widget/tools/button/Back.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AASrC;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,aAA8B;IAClD,MAAM;QACpB,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3C,MAAM,eAAe,GAAG,UAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAC;QAExE,OAAO,oBAAC,WAAW,IAAC,SAAS,EAAE,eAAe,KAAM,KAAK,GAAI,CAAC;IAChE,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./Back.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { NoChildrenProps, OmitChildrenProp } from \"@itwin/core-react\";\nimport type { ToolbarIconProps } from \"./Icon\";\nimport { ToolbarIcon } from \"./Icon\";\n\n/** Properties of [[BackButton]] component.\n * @internal\n */\nexport interface BackButtonProps\n  extends OmitChildrenProp<ToolbarIconProps>,\n    NoChildrenProps {}\n\n/** Back button which displays icon. Used in [[Toolbar]] component.\n * @note See basic button: [[ToolbarButton]]\n * @internal\n */\nexport class BackButton extends React.PureComponent<BackButtonProps> {\n  public override render() {\n    const { className, ...props } = this.props;\n    const buttonClassName = classnames(\"nz-toolbar-button-back\", className);\n\n    return <ToolbarIcon className={buttonClassName} {...props} />;\n  }\n}\n"]}

package/lib/esm/appui-react/layout/widget/tools/button/Back.scss

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+.nz-toolbar-button-back {
+  border-radius: $mls-button-width * 0.5;
+}

package/lib/esm/appui-react/layout/widget/tools/button/Button.d.ts

@@ -0,0 +1,28 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Button.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolbarButton]] component.
+ * @internal
+ */
+export interface ToolbarButtonProps extends CommonProps {
+    /** Button content. */
+    children?: React.ReactNode;
+    /** Function called when the button is clicked. */
+    onClick?: () => void;
+    /** Indicates whether to use a small App button */
+    small?: boolean;
+    /** Mouse proximity to button */
+    mouseProximity?: number;
+    /** Tooltip for button */
+    title?: string;
+}
+/** Basic toolbar button. Used in [[Toolbar]] component.
+ * @internal
+ */
+export declare class ToolbarButton extends React.PureComponent<ToolbarButtonProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Button.d.ts.map

package/lib/esm/appui-react/layout/widget/tools/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../../src/appui-react/layout/widget/tools/button/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAYrD;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC;IACxD,MAAM;CA0CvB"}

package/lib/esm/appui-react/layout/widget/tools/button/Button.js

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./Button.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow, TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT, } from "@itwin/core-react";
+/** Basic toolbar button. Used in [[Toolbar]] component.
+ * @internal
+ */
+export class ToolbarButton extends React.PureComponent {
+    render() {
+        const className = classnames("nz-toolbar-button-button", this.props.className);
+        const buttonStyle = {
+            ...this.props.style,
+        };
+        if (this.props.small) {
+            let backgroundOpacity = Number(document.documentElement.style.getPropertyValue("--buic-toolbar-opacity"));
+            let boxShadowOpacity = TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;
+            let filterBlur = TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;
+            if (this.props.mouseProximity !== undefined) {
+                backgroundOpacity = calculateToolbarOpacity(this.props.mouseProximity);
+                boxShadowOpacity = calculateBoxShadowOpacity(this.props.mouseProximity);
+                filterBlur = calculateBackdropFilterBlur(this.props.mouseProximity);
+            }
+            buttonStyle.backgroundColor =
+                getToolbarBackgroundColor(backgroundOpacity);
+            buttonStyle.boxShadow = getToolbarBoxShadow(boxShadowOpacity);
+            buttonStyle.backdropFilter = getToolbarBackdropFilter(filterBlur);
+        }
+        return (React.createElement("button", { className: className, style: buttonStyle, onClick: this.props.onClick, title: this.props.title },
+            !this.props.small && React.createElement("div", { className: "nz-gradient" }),
+            this.props.children));
+    }
+}
+//# sourceMappingURL=Button.js.map

package/lib/esm/appui-react/layout/widget/tools/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../../../src/appui-react/layout/widget/tools/button/Button.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,EACzB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,mBAAmB,EACnB,oCAAoC,EACpC,kCAAkC,GACnC,MAAM,mBAAmB,CAAC;AAkB3B;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAiC;IACxD,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,0BAA0B,EAC1B,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,MAAM,WAAW,GAAwB;YACvC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;SACpB,CAAC;QAEF,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACpB,IAAI,iBAAiB,GAAG,MAAM,CAC5B,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,gBAAgB,CAC7C,wBAAwB,CACzB,CACF,CAAC;YACF,IAAI,gBAAgB,GAAG,kCAAkC,CAAC;YAC1D,IAAI,UAAU,GAAG,oCAAoC,CAAC;YAEtD,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,EAAE;gBAC3C,iBAAiB,GAAG,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;gBACvE,gBAAgB,GAAG,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;gBACxE,UAAU,GAAG,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;aACrE;YAED,WAAW,CAAC,eAAe;gBACzB,yBAAyB,CAAC,iBAAiB,CAAC,CAAC;YAC/C,WAAW,CAAC,SAAS,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;YAC9D,WAAW,CAAC,cAAc,GAAG,wBAAwB,CAAC,UAAU,CAAC,CAAC;SACnE;QAED,OAAO,CACL,gCACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAEtB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAC,aAAa,GAAG;YACpD,IAAI,CAAC,KAAK,CAAC,QAAQ,CACb,CACV,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./Button.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport {\n  calculateBackdropFilterBlur,\n  calculateBoxShadowOpacity,\n  calculateToolbarOpacity,\n  getToolbarBackdropFilter,\n  getToolbarBackgroundColor,\n  getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT,\n  TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n} from \"@itwin/core-react\";\n\n/** Properties of [[ToolbarButton]] component.\n * @internal\n */\nexport interface ToolbarButtonProps extends CommonProps {\n  /** Button content. */\n  children?: React.ReactNode;\n  /** Function called when the button is clicked. */\n  onClick?: () => void;\n  /** Indicates whether to use a small App button */\n  small?: boolean;\n  /** Mouse proximity to button */\n  mouseProximity?: number;\n  /** Tooltip for button */\n  title?: string;\n}\n\n/** Basic toolbar button. Used in [[Toolbar]] component.\n * @internal\n */\nexport class ToolbarButton extends React.PureComponent<ToolbarButtonProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-toolbar-button-button\",\n      this.props.className\n    );\n    const buttonStyle: React.CSSProperties = {\n      ...this.props.style,\n    };\n\n    if (this.props.small) {\n      let backgroundOpacity = Number(\n        document.documentElement.style.getPropertyValue(\n          \"--buic-toolbar-opacity\"\n        )\n      );\n      let boxShadowOpacity = TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n      let filterBlur = TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n\n      if (this.props.mouseProximity !== undefined) {\n        backgroundOpacity = calculateToolbarOpacity(this.props.mouseProximity);\n        boxShadowOpacity = calculateBoxShadowOpacity(this.props.mouseProximity);\n        filterBlur = calculateBackdropFilterBlur(this.props.mouseProximity);\n      }\n\n      buttonStyle.backgroundColor =\n        getToolbarBackgroundColor(backgroundOpacity);\n      buttonStyle.boxShadow = getToolbarBoxShadow(boxShadowOpacity);\n      buttonStyle.backdropFilter = getToolbarBackdropFilter(filterBlur);\n    }\n\n    return (\n      <button\n        className={className}\n        style={buttonStyle}\n        onClick={this.props.onClick}\n        title={this.props.title}\n      >\n        {!this.props.small && <div className=\"nz-gradient\" />}\n        {this.props.children}\n      </button>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/widget/tools/button/Button.scss

@@ -0,0 +1,52 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+.nz-toolbar-button-button {
+  box-sizing: border-box;
+  width: $mls-button-width;
+  height: $mls-button-height;
+
+  &.nz-toolbar-button-icon-small {
+    width: $mls-small-button-width;
+    height: $mls-small-button-height;
+  }
+
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  background: var(--iui-color-background);
+  border-radius: var(--iui-border-radius-1);
+
+  border: {
+    width: 1px;
+    color: var(--iui-color-border-foreground);
+    radius: var(--iui-border-radius-1);
+    style: solid;
+  }
+
+  pointer-events: auto;
+
+  > .nz-gradient {
+    background: linear-gradient(
+      to bottom,
+      var(--iui-color-background),
+      var(--iui-color-background-zebra)
+    );
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.nz-toolbar-button-background:hover {
+  background-color: var(--iui-color-background-hover);
+}

package/lib/esm/appui-react/layout/widget/tools/button/Expandable.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Expandable.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ExpandableButton]] component.
+ * @internal
+ */
+export interface ExpandableButtonProps extends CommonProps {
+    /** One of toolbar buttons. I.e. [[Item]] */
+    children?: React.ReactNode;
+}
+/** Expandable toolbar button. Used in [[Toolbar]] component.
+ * @internal
+ */
+export declare class ExpandableButton extends React.PureComponent<ExpandableButtonProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Expandable.d.ts.map

package/lib/esm/appui-react/layout/widget/tools/button/Expandable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expandable.d.ts","sourceRoot":"","sources":["../../../../../../../src/appui-react/layout/widget/tools/button/Expandable.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;IAC9D,MAAM;CAavB"}

package/lib/esm/appui-react/layout/widget/tools/button/Expandable.js

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./Expandable.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Expandable toolbar button. Used in [[Toolbar]] component.
+ * @internal
+ */
+export class ExpandableButton extends React.PureComponent {
+    render() {
+        const className = classnames("nz-widget-tools-button-expandable", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style },
+            this.props.children,
+            React.createElement("div", { className: "nz-triangle" })));
+    }
+}
+//# sourceMappingURL=Expandable.js.map

package/lib/esm/appui-react/layout/widget/tools/button/Expandable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expandable.js","sourceRoot":"","sources":["../../../../../../../src/appui-react/layout/widget/tools/button/Expandable.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9D,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ;YACpB,6BAAK,SAAS,EAAC,aAAa,GAAG,CAC3B,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./Expandable.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[ExpandableButton]] component.\n * @internal\n */\nexport interface ExpandableButtonProps extends CommonProps {\n  /** One of toolbar buttons. I.e. [[Item]] */\n  children?: React.ReactNode;\n}\n\n/** Expandable toolbar button. Used in [[Toolbar]] component.\n * @internal\n */\nexport class ExpandableButton extends React.PureComponent<ExpandableButtonProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-widget-tools-button-expandable\",\n      this.props.className\n    );\n\n    return (\n      <div className={className} style={this.props.style}>\n        {this.props.children}\n        <div className=\"nz-triangle\" />\n      </div>\n    );\n  }\n}\n"]}