@itwin/appui-react 4.8.3 → 4.9.0

package/lib/esm/appui-react/layout/footer/snap-mode/Panel.scss

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@import "../variables";
+@import "~@itwin/core-react/lib/cjs/core-react/typography";
+
+.nz-footer-snapMode-panel {
+  background-color: var(--iui-color-background);
+  border-radius: var(--iui-border-radius-1);
+  overflow: hidden;
+  font-size: $text-font-size;
+
+  > .nz-snaps {
+    display: grid;
+    grid-gap: 8px;
+    padding: 8px;
+
+    @include body1;
+  }
+}

package/lib/esm/appui-react/layout/footer/snap-mode/Snap.d.ts

@@ -0,0 +1,26 @@
+/** @packageDocumentation
+ * @module SnapMode
+ */
+import "./Snap.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[Snap]] component.
+ * @internal
+ */
+export interface SnapProps extends CommonProps {
+    /** Label of snap row. */
+    children?: string;
+    /** Snap row icon. */
+    icon?: React.ReactNode;
+    /** Describes if the snap row is active. */
+    isActive?: boolean;
+    /** Function called when the Snap component is clicked. */
+    onClick?: () => void;
+}
+/** Snap row used in [[SnapModePanel]] component.
+ * @internal
+ */
+export declare class Snap extends React.PureComponent<SnapProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Snap.d.ts.map

package/lib/esm/appui-react/layout/footer/snap-mode/Snap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snap.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/snap-mode/Snap.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,IAAK,SAAQ,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC;IACtC,MAAM;CAuBvB"}

package/lib/esm/appui-react/layout/footer/snap-mode/Snap.js

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module SnapMode
+ */
+import "./Snap.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Snap row used in [[SnapModePanel]] component.
+ * @internal
+ */
+export class Snap extends React.PureComponent {
+    render() {
+        const dialogClassName = classnames("nz-footer-snapMode-snap", this.props.isActive && "nz-active", this.props.className);
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { onClick: this.props.onClick, className: dialogClassName, style: this.props.style, role: "button", tabIndex: -1 },
+            this.props.icon === undefined ? undefined : (React.createElement("div", null, this.props.icon)),
+            React.createElement("div", null, this.props.children)));
+    }
+}
+//# sourceMappingURL=Snap.js.map

package/lib/esm/appui-react/layout/footer/snap-mode/Snap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snap.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/snap-mode/Snap.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,KAAK,CAAC,aAAwB;IACtC,MAAM;QACpB,MAAM,eAAe,GAAG,UAAU,CAChC,yBAAyB,EACzB,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,WAAW,EAClC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO;QACL,iEAAiE;QACjE,6BACE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC;YAEX,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAC3C,iCAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAO,CAC7B;YACD,iCAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAC5B,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 SnapMode\n */\n\nimport \"./Snap.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[Snap]] component.\n * @internal\n */\nexport interface SnapProps extends CommonProps {\n  /** Label of snap row. */\n  children?: string;\n  /** Snap row icon. */\n  icon?: React.ReactNode;\n  /** Describes if the snap row is active. */\n  isActive?: boolean;\n  /** Function called when the Snap component is clicked. */\n  onClick?: () => void;\n}\n\n/** Snap row used in [[SnapModePanel]] component.\n * @internal\n */\nexport class Snap extends React.PureComponent<SnapProps> {\n  public override render() {\n    const dialogClassName = classnames(\n      \"nz-footer-snapMode-snap\",\n      this.props.isActive && \"nz-active\",\n      this.props.className\n    );\n\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <div\n        onClick={this.props.onClick}\n        className={dialogClassName}\n        style={this.props.style}\n        role=\"button\"\n        tabIndex={-1}\n      >\n        {this.props.icon === undefined ? undefined : (\n          <div>{this.props.icon}</div>\n        )}\n        <div>{this.props.children}</div>\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/footer/snap-mode/Snap.scss

@@ -0,0 +1,48 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+
+.nz-footer-snapMode-snap {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 8px;
+  padding: 4px 8px;
+  align-items: center;
+  cursor: pointer;
+  color: var(--iui-color-text);
+  position: relative;
+
+  > .nz-icon {
+    grid-row: 1;
+    color: var(--iui-color-icon);
+  }
+
+  > .nz-label {
+    grid-row: 1;
+  }
+
+  &.nz-active {
+    color: var(--iui-color-text-accent);
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      background-color: currentColor;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+    }
+  }
+
+  &:hover {
+    color: var(--iui-color-text-accent-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

package/lib/esm/appui-react/layout/footer/tool-assistance/Dialog.d.ts

@@ -0,0 +1,26 @@
+/** @packageDocumentation
+ * @module Footer
+ */
+import "./Dialog.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+export interface ToolAssistanceDialogProps extends CommonProps {
+    /** Items and separators of tool assistance. I.e. [[ToolAssistanceItem]], [[ToolAssistanceSeparator]] */
+    children?: React.ReactNode;
+    /** Dialog title. */
+    title?: string;
+    /** Title bar buttons. I.e. [[TitleBarButton]] */
+    buttons?: React.ReactNode;
+}
+/** Tool assistance dialog used with [[ToolAssistance]] component.
+ * @note This is a presentational component and should be aligned with [[ToolAssistance]] component.
+ * I.e. use [[FooterPopup]] to handle alignment.
+ * @internal
+ */
+export declare class ToolAssistanceDialog extends React.PureComponent<ToolAssistanceDialogProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Dialog.d.ts.map

package/lib/esm/appui-react/layout/footer/tool-assistance/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Dialog.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;AAIrD;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,wGAAwG;IACxG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;GAIG;AACH,qBAAa,oBAAqB,SAAQ,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC;IACtE,MAAM;CAkBvB"}

package/lib/esm/appui-react/layout/footer/tool-assistance/Dialog.js

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Footer
+ */
+import "./Dialog.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Dialog } from "../dialog/Dialog";
+import { TitleBar } from "../dialog/TitleBar";
+/** Tool assistance dialog used with [[ToolAssistance]] component.
+ * @note This is a presentational component and should be aligned with [[ToolAssistance]] component.
+ * I.e. use [[FooterPopup]] to handle alignment.
+ * @internal
+ */
+export class ToolAssistanceDialog extends React.PureComponent {
+    render() {
+        const className = classnames("nz-footer-toolAssistance-dialog", this.props.className);
+        return (React.createElement(Dialog, { className: className, style: this.props.style, titleBar: React.createElement(TitleBar, { title: this.props.title }, this.props.buttons) },
+            React.createElement("div", { className: "nz-content" }, this.props.children)));
+    }
+}
+//# sourceMappingURL=Dialog.js.map

package/lib/esm/appui-react/layout/footer/tool-assistance/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Dialog.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,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAc9C;;;;GAIG;AACH,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,aAAwC;IACtE,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,iCAAiC,EACjC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,oBAAC,MAAM,IACL,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EACN,oBAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAY;YAGpE,6BAAK,SAAS,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAChD,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 Footer\n */\n\nimport \"./Dialog.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Dialog } from \"../dialog/Dialog\";\nimport { TitleBar } from \"../dialog/TitleBar\";\n\n/** Properties of [[ToolAssistanceDialog]] component.\n * @internal\n */\nexport interface ToolAssistanceDialogProps extends CommonProps {\n  /** Items and separators of tool assistance. I.e. [[ToolAssistanceItem]], [[ToolAssistanceSeparator]] */\n  children?: React.ReactNode;\n  /** Dialog title. */\n  title?: string;\n  /** Title bar buttons. I.e. [[TitleBarButton]] */\n  buttons?: React.ReactNode;\n}\n\n/** Tool assistance dialog used with [[ToolAssistance]] component.\n * @note This is a presentational component and should be aligned with [[ToolAssistance]] component.\n * I.e. use [[FooterPopup]] to handle alignment.\n * @internal\n */\nexport class ToolAssistanceDialog extends React.PureComponent<ToolAssistanceDialogProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-toolAssistance-dialog\",\n      this.props.className\n    );\n\n    return (\n      <Dialog\n        className={className}\n        style={this.props.style}\n        titleBar={\n          <TitleBar title={this.props.title}>{this.props.buttons}</TitleBar>\n        }\n      >\n        <div className=\"nz-content\">{this.props.children}</div>\n      </Dialog>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/footer/tool-assistance/Dialog.scss

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/z-index";
+@import "../variables";
+
+.nz-footer-toolAssistance-dialog {
+  min-width: $nz-footer-popup-min-width;
+  min-height: 75px;
+  color: var(--iui-color-border);
+
+  .nz-content {
+    color: var(--iui-color-text);
+    min-width: 250px;
+    max-width: 360px;
+  }
+}

package/lib/esm/appui-react/layout/footer/tool-assistance/Indicator.d.ts

@@ -0,0 +1,27 @@
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./Indicator.scss";
+import * as React from "react";
+import type { FooterIndicatorProps } from "../Indicator";
+/** Properties of [[ToolAssistance]] component.
+ * @internal
+ */
+export interface ToolAssistanceProps extends FooterIndicatorProps {
+    /** Indicator label. */
+    children?: string;
+    /** Indicator icons. */
+    icons?: React.ReactNode;
+    /** Clickable part of the indicator. */
+    indicatorRef?: React.Ref<HTMLDivElement>;
+    /** Function called when indicator is clicked. */
+    onClick?: () => void;
+}
+/** Tool assistance indicator used in [[Footer]] component.
+ * @note Used with [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+export declare class ToolAssistance extends React.PureComponent<ToolAssistanceProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Indicator.d.ts.map

package/lib/esm/appui-react/layout/footer/tool-assistance/Indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Indicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGzD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB;IAC/D,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACzC,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC;IAC1D,MAAM;CAgCvB"}

package/lib/esm/appui-react/layout/footer/tool-assistance/Indicator.js

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./Indicator.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { FooterIndicator } from "../Indicator";
+/** Tool assistance indicator used in [[Footer]] component.
+ * @note Used with [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+export class ToolAssistance extends React.PureComponent {
+    render() {
+        const { children, className, icons, indicatorRef, onClick, title, ...props } = this.props;
+        return (React.createElement(FooterIndicator, { className: classnames("nz-footer-toolAssistance-indicator", className), ...props },
+            React.createElement("div", { className: "nz-indicator", onClick: onClick, ref: indicatorRef, role: "button", tabIndex: -1, title: title },
+                React.createElement("div", { className: "nz-icons" }, icons),
+                children !== undefined && (React.createElement("span", { className: "nz-content" }, children)),
+                React.createElement("div", { className: "nz-triangle" }))));
+    }
+}
+//# sourceMappingURL=Indicator.js.map

package/lib/esm/appui-react/layout/footer/tool-assistance/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Indicator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAgB/C;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,aAAkC;IAC1D,MAAM;QACpB,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,GAAG,IAAI,CAAC,KAAK,CAAC;QACf,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAE,UAAU,CAAC,oCAAoC,EAAE,SAAS,CAAC,KAClE,KAAK;YAET,6BACE,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE,KAAK;gBAEZ,6BAAK,SAAS,EAAC,UAAU,IAAE,KAAK,CAAO;gBACtC,QAAQ,KAAK,SAAS,IAAI,CACzB,8BAAM,SAAS,EAAC,YAAY,IAAE,QAAQ,CAAQ,CAC/C;gBACD,6BAAK,SAAS,EAAC,aAAa,GAAG,CAC3B,CACU,CACnB,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 ToolAssistance\n */\n\nimport \"./Indicator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { FooterIndicatorProps } from \"../Indicator\";\nimport { FooterIndicator } from \"../Indicator\";\n\n/** Properties of [[ToolAssistance]] component.\n * @internal\n */\nexport interface ToolAssistanceProps extends FooterIndicatorProps {\n  /** Indicator label. */\n  children?: string;\n  /** Indicator icons. */\n  icons?: React.ReactNode;\n  /** Clickable part of the indicator. */\n  indicatorRef?: React.Ref<HTMLDivElement>;\n  /** Function called when indicator is clicked. */\n  onClick?: () => void;\n}\n\n/** Tool assistance indicator used in [[Footer]] component.\n * @note Used with [[ToolAssistanceDialog]] component.\n * @internal\n */\nexport class ToolAssistance extends React.PureComponent<ToolAssistanceProps> {\n  public override render() {\n    const {\n      children,\n      className,\n      icons,\n      indicatorRef,\n      onClick,\n      title,\n      ...props\n    } = this.props;\n    return (\n      <FooterIndicator\n        className={classnames(\"nz-footer-toolAssistance-indicator\", className)}\n        {...props}\n      >\n        <div // eslint-disable-line jsx-a11y/click-events-have-key-events\n          className=\"nz-indicator\"\n          onClick={onClick}\n          ref={indicatorRef}\n          role=\"button\"\n          tabIndex={-1}\n          title={title}\n        >\n          <div className=\"nz-icons\">{icons}</div>\n          {children !== undefined && (\n            <span className=\"nz-content\">{children}</span>\n          )}\n          <div className=\"nz-triangle\" />\n        </div>\n      </FooterIndicator>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/footer/tool-assistance/Indicator.scss

@@ -0,0 +1,80 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/geometry";
+@import "../variables";
+
+.nz-footer-toolAssistance-indicator {
+  $triangle-width: 5px;
+  $padding: 2px;
+  $top-bottom-padding: 1px;
+
+  > .nz-indicator {
+    height: 32px;
+    min-width: 20px;
+    position: relative;
+
+    padding: {
+      top: $top-bottom-padding;
+      right: $padding * 2 + $triangle-width;
+      bottom: $top-bottom-padding;
+      left: $padding;
+    }
+
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    > .nz-icons {
+      font-size: $icon-size;
+      display: flex;
+      align-items: center;
+    }
+
+    > .nz-content {
+      margin-left: 8px;
+      font-size: $text-font-size;
+      line-height: 1;
+
+      /* Medium devices */
+      @include for-tablet-portrait-down {
+        font-size: $text-font-size-medium;
+      }
+
+      /* Small devices */
+      @include for-phone-only {
+        font-size: $text-font-size-small;
+      }
+    }
+
+    > .nz-triangle {
+      position: absolute;
+      right: $padding;
+      bottom: $padding;
+      filter: $icon-shadow;
+
+      @include triangle-bottom-right(
+        $triangle-width,
+        $color: var(--iui-color-icon)
+      );
+    }
+
+    &:hover {
+      color: var(--iui-color-text-accent-hover);
+
+      > .nz-triangle {
+        @include triangle-bottom-right(
+          $triangle-width,
+          $color: var(--iui-color-text-accent-hover)
+        );
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/lib/esm/appui-react/layout/footer/tool-assistance/Instruction.d.ts

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./Instruction.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolAssistanceInstruction]] component.
+ * @internal
+ */
+export interface ToolAssistanceInstructionProps extends CommonProps {
+    /** Image for instruction */
+    image: React.ReactNode;
+    /** Indicates whether instruction is new */
+    isNew?: boolean;
+    /** Text for instruction */
+    text: string;
+}
+/** Tool assistance instruction used in [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+export declare class ToolAssistanceInstruction extends React.PureComponent<ToolAssistanceInstructionProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Instruction.d.ts.map

package/lib/esm/appui-react/layout/footer/tool-assistance/Instruction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Instruction.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Instruction.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,WAAW;IACjE,4BAA4B;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,qBAAa,yBAA0B,SAAQ,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC;IAChF,MAAM;CAiBvB"}

package/lib/esm/appui-react/layout/footer/tool-assistance/Instruction.js

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./Instruction.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ToolAssistanceItem } from "./Item";
+import { NewDot } from "./NewDot";
+/** Tool assistance instruction used in [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+export class ToolAssistanceInstruction extends React.PureComponent {
+    render() {
+        const className = classnames("nz-footer-toolAssistance-instruction", this.props.className);
+        const textClassName = this.props.isNew ? "nz-text-new" : undefined;
+        return (React.createElement(ToolAssistanceItem, { className: className, style: this.props.style },
+            React.createElement("span", { className: "nz-image" },
+                this.props.isNew && React.createElement(NewDot, null),
+                this.props.image),
+            React.createElement("span", { className: textClassName }, this.props.text)));
+    }
+}
+//# sourceMappingURL=Instruction.js.map

package/lib/esm/appui-react/layout/footer/tool-assistance/Instruction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Instruction.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Instruction.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAclC;;GAEG;AACH,MAAM,OAAO,yBAA0B,SAAQ,KAAK,CAAC,aAA6C;IAChF,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,sCAAsC,EACtC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;QAEnE,OAAO,CACL,oBAAC,kBAAkB,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC/D,8BAAM,SAAS,EAAC,UAAU;gBACvB,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,oBAAC,MAAM,OAAG;gBAC9B,IAAI,CAAC,KAAK,CAAC,KAAK,CACZ;YACP,8BAAM,SAAS,EAAE,aAAa,IAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAQ,CACrC,CACtB,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 ToolAssistance\n */\n\nimport \"./Instruction.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { ToolAssistanceItem } from \"./Item\";\nimport { NewDot } from \"./NewDot\";\n\n/** Properties of [[ToolAssistanceInstruction]] component.\n * @internal\n */\nexport interface ToolAssistanceInstructionProps extends CommonProps {\n  /** Image for instruction */\n  image: React.ReactNode;\n  /** Indicates whether instruction is new */\n  isNew?: boolean;\n  /** Text for instruction */\n  text: string;\n}\n\n/** Tool assistance instruction used in [[ToolAssistanceDialog]] component.\n * @internal\n */\nexport class ToolAssistanceInstruction extends React.PureComponent<ToolAssistanceInstructionProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-toolAssistance-instruction\",\n      this.props.className\n    );\n    const textClassName = this.props.isNew ? \"nz-text-new\" : undefined;\n\n    return (\n      <ToolAssistanceItem className={className} style={this.props.style}>\n        <span className=\"nz-image\">\n          {this.props.isNew && <NewDot />}\n          {this.props.image}\n        </span>\n        <span className={textClassName}>{this.props.text}</span>\n      </ToolAssistanceItem>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/footer/tool-assistance/Instruction.scss

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-footer-toolAssistance-instruction {
+  display: grid;
+  align-items: center;
+  grid-gap: 6px;
+  grid-auto-flow: column;
+  grid-template-columns: 48px 1fr;
+  line-height: 16px;
+  font-size: $text-font-size;
+  position: relative;
+
+  > .nz-image {
+    margin: auto;
+
+    > .nz-footer-toolAssistance-newDot {
+      position: absolute;
+      top: 12px;
+      left: -2px;
+    }
+  }
+
+  > .nz-text-new {
+    font-weight: bold;
+  }
+}

package/lib/esm/appui-react/layout/footer/tool-assistance/Item.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./Item.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolAssistanceItem]] component.
+ * @internal
+ */
+export interface ToolAssistanceItemProps extends CommonProps {
+    /** Assistance instructions or components */
+    children?: React.ReactNode;
+}
+/** Tool assistance item used in [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+export declare class ToolAssistanceItem extends React.PureComponent<ToolAssistanceItemProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Item.d.ts.map

package/lib/esm/appui-react/layout/footer/tool-assistance/Item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Item.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC;IAClE,MAAM;CAYvB"}

package/lib/esm/appui-react/layout/footer/tool-assistance/Item.js

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./Item.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Tool assistance item used in [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+export class ToolAssistanceItem extends React.PureComponent {
+    render() {
+        const className = classnames("nz-footer-toolAssistance-item", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style }, this.props.children));
+    }
+}
+//# sourceMappingURL=Item.js.map

package/lib/esm/appui-react/layout/footer/tool-assistance/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Item.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,KAAK,CAAC,aAAsC;IAClE,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,+BAA+B,EAC/B,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,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 ToolAssistance\n */\n\nimport \"./Item.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[ToolAssistanceItem]] component.\n * @internal\n */\nexport interface ToolAssistanceItemProps extends CommonProps {\n  /** Assistance instructions or components */\n  children?: React.ReactNode;\n}\n\n/** Tool assistance item used in [[ToolAssistanceDialog]] component.\n * @internal\n */\nexport class ToolAssistanceItem extends React.PureComponent<ToolAssistanceItemProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-toolAssistance-item\",\n      this.props.className\n    );\n\n    return (\n      <div className={className} style={this.props.style}>\n        {this.props.children}\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/footer/tool-assistance/Item.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.
+ *--------------------------------------------------------------------------------------------*/
+.nz-footer-toolAssistance-item {
+  min-height: 27px;
+  padding-left: 5px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+
+  display: grid;
+  align-items: center;
+}

package/lib/esm/appui-react/layout/footer/tool-assistance/NewDot.d.ts

@@ -0,0 +1,13 @@
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./NewDot.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** 'New' dot used in Tool assistance instruction component.
+ * @internal
+ */
+export declare class NewDot extends React.PureComponent<CommonProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=NewDot.d.ts.map

package/lib/esm/appui-react/layout/footer/tool-assistance/NewDot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewDot.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/NewDot.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;AAErD;;GAEG;AACH,qBAAa,MAAO,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IAC1C,MAAM;CAQvB"}

package/lib/esm/appui-react/layout/footer/tool-assistance/NewDot.js

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./NewDot.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** 'New' dot used in Tool assistance instruction component.
+ * @internal
+ */
+export class NewDot extends React.PureComponent {
+    render() {
+        const className = classnames("nz-footer-toolAssistance-newDot", this.props.className);
+        return React.createElement("span", { className: className, style: this.props.style });
+    }
+}
+//# sourceMappingURL=NewDot.js.map

package/lib/esm/appui-react/layout/footer/tool-assistance/NewDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewDot.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/NewDot.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,KAAK,CAAC,aAA0B;IAC1C,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,iCAAiC,EACjC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,8BAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CAAC;IACjE,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 ToolAssistance\n */\n\nimport \"./NewDot.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** 'New' dot used in Tool assistance instruction component.\n * @internal\n */\nexport class NewDot extends React.PureComponent<CommonProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-toolAssistance-newDot\",\n      this.props.className\n    );\n\n    return <span className={className} style={this.props.style} />;\n  }\n}\n"]}

package/lib/esm/appui-react/layout/footer/tool-assistance/NewDot.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.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.nz-footer-toolAssistance-newDot {
+  height: 5px;
+  width: 5px;
+  background-color: $buic-foreground-success;
+  border-radius: 50%;
+  display: inline-block;
+}

package/lib/esm/appui-react/layout/footer/tool-assistance/Separator.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./Separator.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolAssistanceSeparator]] component.
+ * @internal
+ */
+export interface ToolAssistanceSeparatorProps extends CommonProps {
+    /** Separator label. */
+    children?: string;
+}
+/** Tool assistance item separator used in [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+export declare class ToolAssistanceSeparator extends React.PureComponent<ToolAssistanceSeparatorProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Separator.d.ts.map

package/lib/esm/appui-react/layout/footer/tool-assistance/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Separator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,4BAA6B,SAAQ,WAAW;IAC/D,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,uBAAwB,SAAQ,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC;IAC5E,MAAM;CAavB"}