@itwin/appui-react 4.8.3 → 4.9.0

package/lib/cjs/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/cjs/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/cjs/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/cjs/appui-react/layout/widget/tools/button/Back.js

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

package/lib/cjs/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,uBAAqB;AACrB,2CAAoC;AACpC,+BAA+B;AAG/B,iCAAqC;AASrC;;;GAGG;AACH,MAAa,UAAW,SAAQ,KAAK,CAAC,aAA8B;IAClD,MAAM;QACpB,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3C,MAAM,eAAe,GAAG,IAAA,oBAAU,EAAC,wBAAwB,EAAE,SAAS,CAAC,CAAC;QAExE,OAAO,oBAAC,kBAAW,IAAC,SAAS,EAAE,eAAe,KAAM,KAAK,GAAI,CAAC;IAChE,CAAC;CACF;AAPD,gCAOC","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/cjs/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/cjs/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/cjs/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/cjs/appui-react/layout/widget/tools/button/Button.js

@@ -0,0 +1,44 @@
+"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.ToolbarButton = void 0;
+require("./Button.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+/** Basic toolbar button. Used in [[Toolbar]] component.
+ * @internal
+ */
+class ToolbarButton extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("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 = core_react_1.TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;
+            let filterBlur = core_react_1.TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;
+            if (this.props.mouseProximity !== undefined) {
+                backgroundOpacity = (0, core_react_1.calculateToolbarOpacity)(this.props.mouseProximity);
+                boxShadowOpacity = (0, core_react_1.calculateBoxShadowOpacity)(this.props.mouseProximity);
+                filterBlur = (0, core_react_1.calculateBackdropFilterBlur)(this.props.mouseProximity);
+            }
+            buttonStyle.backgroundColor =
+                (0, core_react_1.getToolbarBackgroundColor)(backgroundOpacity);
+            buttonStyle.boxShadow = (0, core_react_1.getToolbarBoxShadow)(boxShadowOpacity);
+            buttonStyle.backdropFilter = (0, core_react_1.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));
+    }
+}
+exports.ToolbarButton = ToolbarButton;
+//# sourceMappingURL=Button.js.map

package/lib/cjs/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,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAE/B,kDAS2B;AAkB3B;;GAEG;AACH,MAAa,aAAc,SAAQ,KAAK,CAAC,aAAiC;IACxD,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,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,+CAAkC,CAAC;YAC1D,IAAI,UAAU,GAAG,iDAAoC,CAAC;YAEtD,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,EAAE;gBAC3C,iBAAiB,GAAG,IAAA,oCAAuB,EAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;gBACvE,gBAAgB,GAAG,IAAA,sCAAyB,EAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;gBACxE,UAAU,GAAG,IAAA,wCAA2B,EAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;aACrE;YAED,WAAW,CAAC,eAAe;gBACzB,IAAA,sCAAyB,EAAC,iBAAiB,CAAC,CAAC;YAC/C,WAAW,CAAC,SAAS,GAAG,IAAA,gCAAmB,EAAC,gBAAgB,CAAC,CAAC;YAC9D,WAAW,CAAC,cAAc,GAAG,IAAA,qCAAwB,EAAC,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;AA3CD,sCA2CC","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/cjs/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/cjs/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/cjs/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/cjs/appui-react/layout/widget/tools/button/Expandable.js

@@ -0,0 +1,26 @@
+"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.ExpandableButton = void 0;
+require("./Expandable.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Expandable toolbar button. Used in [[Toolbar]] component.
+ * @internal
+ */
+class ExpandableButton extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("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" })));
+    }
+}
+exports.ExpandableButton = ExpandableButton;
+//# sourceMappingURL=Expandable.js.map

package/lib/cjs/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,6BAA2B;AAC3B,2CAAoC;AACpC,+BAA+B;AAW/B;;GAEG;AACH,MAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9D,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,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;AAdD,4CAcC","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"]}

package/lib/cjs/appui-react/layout/widget/tools/button/Expandable.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/geometry";
+@import "variables";
+
+.nz-widget-tools-button-expandable {
+  $triangle-width: 6px;
+  $triangle-height: $triangle-width;
+  $shadow-vertical-offset: 1px;
+  $margin-from-triangle-to-stroke: 5px;
+  $arrow-shadow: $icon-shadow;
+
+  position: relative;
+  pointer-events: auto;
+
+  &:hover {
+    > .nz-triangle {
+      @include triangle-bottom-right-color($hovered-icon-color);
+    }
+  }
+
+  &:active {
+    > .nz-triangle {
+      filter: $no-shadow;
+
+      @include triangle-bottom-right-color($pressed-icon-color);
+    }
+  }
+
+  > .nz-triangle {
+    border-radius: 0;
+    position: absolute;
+    right: $margin-from-triangle-to-stroke;
+    bottom: $margin-from-triangle-to-stroke;
+    filter: $arrow-shadow;
+    pointer-events: none;
+
+    @include triangle-bottom-right(
+      $width: $triangle-width,
+      $height: $triangle-height,
+      $color: $buic-icon-color
+    );
+  }
+}

package/lib/cjs/appui-react/layout/widget/tools/button/Icon.d.ts

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

package/lib/cjs/appui-react/layout/widget/tools/button/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../../src/appui-react/layout/widget/tools/button/Icon.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAGnD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,mBAAmB;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;IACpD,MAAM;CAevB"}

package/lib/cjs/appui-react/layout/widget/tools/button/Icon.js

@@ -0,0 +1,29 @@
+"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.ToolbarIcon = void 0;
+require("./Icon.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const Button_1 = require("./Button");
+/** Toolbar button which displays icon. Used in [[Toolbar]] component.
+ * @note See basic button: [[ToolbarButton]]
+ * @internal
+ */
+class ToolbarIcon extends React.PureComponent {
+    render() {
+        const { className, small, ...props } = this.props;
+        const buttonClassName = (0, classnames_1.default)("nz-toolbar-button-icon", small && "nz-toolbar-button-icon-small", className);
+        return (React.createElement(Button_1.ToolbarButton, { className: buttonClassName, small: small, ...props },
+            React.createElement("div", { className: "nz-icon" }, this.props.icon),
+            this.props.children));
+    }
+}
+exports.ToolbarIcon = ToolbarIcon;
+//# sourceMappingURL=Icon.js.map

package/lib/cjs/appui-react/layout/widget/tools/button/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../../../../src/appui-react/layout/widget/tools/button/Icon.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,uBAAqB;AACrB,2CAAoC;AACpC,+BAA+B;AAE/B,qCAAyC;AAczC;;;GAGG;AACH,MAAa,WAAY,SAAQ,KAAK,CAAC,aAA+B;IACpD,MAAM;QACpB,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAClD,MAAM,eAAe,GAAG,IAAA,oBAAU,EAChC,wBAAwB,EACxB,KAAK,IAAI,8BAA8B,EACvC,SAAS,CACV,CAAC;QAEF,OAAO,CACL,oBAAC,sBAAa,IAAC,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;YAChE,6BAAK,SAAS,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAO;YAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ,CACN,CACjB,CAAC;IACJ,CAAC;CACF;AAhBD,kCAgBC","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 \"./Icon.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ToolbarButtonProps } from \"./Button\";\nimport { ToolbarButton } from \"./Button\";\n\n/** Properties of [[ToolbarButton]] component.\n * @internal\n */\nexport interface ToolbarIconProps extends ToolbarButtonProps {\n  /** Button icon. */\n  icon?: React.ReactNode;\n  /** Indicates whether to use a small App button */\n  small?: boolean;\n  /** Mouse proximity to button */\n  mouseProximity?: number;\n}\n\n/** Toolbar button which displays icon. Used in [[Toolbar]] component.\n * @note See basic button: [[ToolbarButton]]\n * @internal\n */\nexport class ToolbarIcon extends React.PureComponent<ToolbarIconProps> {\n  public override render() {\n    const { className, small, ...props } = this.props;\n    const buttonClassName = classnames(\n      \"nz-toolbar-button-icon\",\n      small && \"nz-toolbar-button-icon-small\",\n      className\n    );\n\n    return (\n      <ToolbarButton className={buttonClassName} small={small} {...props}>\n        <div className=\"nz-icon\">{this.props.icon}</div>\n        {this.props.children}\n      </ToolbarButton>\n    );\n  }\n}\n"]}

package/lib/cjs/appui-react/layout/widget/tools/button/Icon.scss

@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-icon {
+  font-size: $mls-icon-size;
+
+  > .nz-icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    > * {
+      width: $mls-icon-size;
+      height: $mls-icon-size;
+      color: var(--iui-color-icon);
+      filter: $icon-shadow;
+      display: inline-block;
+    }
+    > .icon.core-svg-icon {
+      & svg {
+        width: $mls-icon-size;
+        height: $mls-icon-size;
+      }
+    }
+  }
+
+  &.nz-toolbar-button-icon-small {
+    font-size: $mls-small-button-icon-size;
+    > .nz-icon {
+      > * {
+        width: $mls-small-button-icon-size;
+        height: $mls-small-button-icon-size;
+      }
+    }
+  }
+
+  &:hover {
+    > .nz-icon {
+      > * {
+        color: var(--iui-color-icon-hover);
+      }
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/tools/button/_variables.scss

@@ -0,0 +1,38 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/themecolors";
+
+// Common
+$button-stroke-width: 2px;
+$button-background-color: $buic-background-toolbar;
+$button-stroke-color: $buic-background-toolbutton-stroke;
+$button-stroke-radius: 3px;
+
+$icon-color: $buic-icon-color;
+$pressed-icon-color: $buic-icon-color-reverse;
+$hovered-icon-color: $buic-foreground-primary-tone;
+$icon-shadow: drop-shadow(0 1px 0 $buic-icon-color-reverse);
+$no-shadow: drop-shadow(0 0 0 transparent);
+
+$bar-width: 8px;
+$bar-height: 2px;
+$bar-right-corner-radius: 1px;
+
+// Mouse + Large screen
+$mls-button-width: 60px;
+$mls-button-height: 60px;
+
+$mls-navigation-aid-width: 60px;
+$mls-navigation-aid-height: 60px;
+
+$mls-icon-size: 36px;
+
+// For ui20 - include 2px for border 40+2=42 due to box-sizing:border-box.
+$mls-small-button-width: 42px;
+$mls-small-button-height: 42px;
+$mls-small-button-icon-size: 24px;
+$mls-small-button-gap: 6px;
+$small-bar-width: 4px;
+$small-bar-height: 2px;

package/lib/cjs/appui-react/layout/widget/useIsToolSettingsTab.d.ts

@@ -0,0 +1,6 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+/** @internal */
+export declare function useIsToolSettingsTab(): boolean;
+//# sourceMappingURL=useIsToolSettingsTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIsToolSettingsTab.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/useIsToolSettingsTab.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAKH,gBAAgB;AAChB,wBAAgB,oBAAoB,YAInC"}

package/lib/cjs/appui-react/layout/widget/useIsToolSettingsTab.js

@@ -0,0 +1,20 @@
+"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 Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsToolSettingsTab = void 0;
+const LayoutStore_1 = require("../base/LayoutStore");
+const Widget_1 = require("./Widget");
+/** @internal */
+function useIsToolSettingsTab() {
+    const activeTabId = (0, Widget_1.useActiveTabId)();
+    const toolSettingsTabId = (0, LayoutStore_1.useLayout)((state) => { var _a; return (_a = state.toolSettings) === null || _a === void 0 ? void 0 : _a.tabId; });
+    return activeTabId === toolSettingsTabId;
+}
+exports.useIsToolSettingsTab = useIsToolSettingsTab;
+//# sourceMappingURL=useIsToolSettingsTab.js.map

package/lib/cjs/appui-react/layout/widget/useIsToolSettingsTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsToolSettingsTab.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/useIsToolSettingsTab.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,qDAAgD;AAChD,qCAA0C;AAE1C,gBAAgB;AAChB,SAAgB,oBAAoB;IAClC,MAAM,WAAW,GAAG,IAAA,uBAAc,GAAE,CAAC;IACrC,MAAM,iBAAiB,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,CAAA,EAAA,CAAC,CAAC;IAC1E,OAAO,WAAW,KAAK,iBAAiB,CAAC;AAC3C,CAAC;AAJD,oDAIC","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 { useLayout } from \"../base/LayoutStore\";\nimport { useActiveTabId } from \"./Widget\";\n\n/** @internal */\nexport function useIsToolSettingsTab() {\n  const activeTabId = useActiveTabId();\n  const toolSettingsTabId = useLayout((state) => state.toolSettings?.tabId);\n  return activeTabId === toolSettingsTabId;\n}\n"]}

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

@@ -0,0 +1,11 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import * as React from "react";
+/** Main app content (i.e. viewport) that will change bounds based on panel pinned settings.
+ * @internal
+ */
+export declare function AppContent(): React.JSX.Element;
+/** @internal */
+export declare function usePanelsAutoCollapse<T extends Element>(): React.Ref<T>;
+//# sourceMappingURL=AppContent.d.ts.map

package/lib/cjs/appui-react/layout/widget-panels/AppContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppContent.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/AppContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;GAEG;AACH,wBAAgB,UAAU,sBA4BzB;AAED,gBAAgB;AAChB,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,OAAO,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAkDvE"}