@itwin/appui-react 5.31.0 → 5.32.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/lib/appui-react/UiFramework.d.ts.map +1 -1
  3. package/lib/appui-react/UiFramework.js +2 -0
  4. package/lib/appui-react/UiFramework.js.map +1 -1
  5. package/lib/appui-react/UiFramework.json +4 -1
  6. package/lib/appui-react/backstage/Backstage.d.ts +33 -0
  7. package/lib/appui-react/backstage/Backstage.d.ts.map +1 -0
  8. package/lib/appui-react/backstage/Backstage.js +88 -0
  9. package/lib/appui-react/backstage/Backstage.js.map +1 -0
  10. package/lib/appui-react/backstage/Backstage.scss +42 -0
  11. package/lib/appui-react/backstage/BackstageComposer.d.ts +2 -2
  12. package/lib/appui-react/backstage/BackstageComposer.d.ts.map +1 -1
  13. package/lib/appui-react/backstage/BackstageComposer.js +25 -19
  14. package/lib/appui-react/backstage/BackstageComposer.js.map +1 -1
  15. package/lib/appui-react/frontstage/ModalFrontstage.d.ts +1 -1
  16. package/lib/appui-react/frontstage/ModalFrontstage.js.map +1 -1
  17. package/lib/cjs/appui-react/backstage/Backstage.scss +42 -0
  18. package/lib/esm/appui-react/backstage/Backstage.scss +42 -0
  19. package/lib/public/locales/en/UiFramework.json +4 -1
  20. package/package.json +7 -7
  21. package/lib/appui-react/backstage/BackstageComposerItem.d.ts +0 -29
  22. package/lib/appui-react/backstage/BackstageComposerItem.d.ts.map +0 -1
  23. package/lib/appui-react/backstage/BackstageComposerItem.js +0 -66
  24. package/lib/appui-react/backstage/BackstageComposerItem.js.map +0 -1
  25. package/lib/appui-react/layout/backstage/Backstage.d.ts +0 -42
  26. package/lib/appui-react/layout/backstage/Backstage.d.ts.map +0 -1
  27. package/lib/appui-react/layout/backstage/Backstage.js +0 -46
  28. package/lib/appui-react/layout/backstage/Backstage.js.map +0 -1
  29. package/lib/appui-react/layout/backstage/Backstage.scss +0 -90
  30. package/lib/appui-react/layout/backstage/Item.d.ts +0 -38
  31. package/lib/appui-react/layout/backstage/Item.d.ts.map +0 -1
  32. package/lib/appui-react/layout/backstage/Item.js +0 -29
  33. package/lib/appui-react/layout/backstage/Item.js.map +0 -1
  34. package/lib/appui-react/layout/backstage/Item.scss +0 -107
  35. package/lib/appui-react/layout/backstage/Separator.d.ts +0 -13
  36. package/lib/appui-react/layout/backstage/Separator.d.ts.map +0 -1
  37. package/lib/appui-react/layout/backstage/Separator.js +0 -21
  38. package/lib/appui-react/layout/backstage/Separator.js.map +0 -1
  39. package/lib/appui-react/layout/backstage/Separator.scss +0 -10
  40. package/lib/cjs/appui-react/layout/backstage/Backstage.scss +0 -90
  41. package/lib/cjs/appui-react/layout/backstage/Item.scss +0 -107
  42. package/lib/cjs/appui-react/layout/backstage/Separator.scss +0 -10
  43. package/lib/esm/appui-react/layout/backstage/Backstage.scss +0 -90
  44. package/lib/esm/appui-react/layout/backstage/Item.scss +0 -107
  45. package/lib/esm/appui-react/layout/backstage/Separator.scss +0 -10
@@ -1,42 +0,0 @@
1
- /** @packageDocumentation
2
- * @module Backstage
3
- */
4
- import type { CommonProps } from "@itwin/core-react";
5
- import * as React from "react";
6
- import type { SafeAreaInsets } from "../../safearea/SafeAreaInsets.js";
7
- import "./Backstage.scss";
8
- /** Properties of [[Backstage]] component.
9
- * @internal
10
- */
11
- export interface BackstageProps extends CommonProps {
12
- /** Backstage items and separators. I.e. [[BackstageItem]], [[BackstageSeparator]] */
13
- children?: React.ReactNode;
14
- /** Optional footer content. */
15
- footer?: React.ReactNode;
16
- /** Optional header content. I.e. [[UserProfile]] */
17
- header?: React.ReactNode;
18
- /** Describes if the backstage is open. */
19
- isOpen?: boolean;
20
- /** Function called when backstage is closed. */
21
- onClose?: () => void;
22
- /** Describes respected safe area insets. */
23
- safeAreaInsets?: SafeAreaInsets;
24
- /** Describes if a ghosting overlay is shown. */
25
- showOverlay: boolean;
26
- }
27
- /** Default properties of [[Backstage]] component.
28
- * @internal
29
- */
30
- export type BackstageDefaultProps = Pick<BackstageProps, "showOverlay">;
31
- /** Backstage component of 9-Zone UI app.
32
- * @internal
33
- */
34
- export declare class Backstage extends React.PureComponent<BackstageProps> {
35
- static readonly defaultProps: BackstageDefaultProps;
36
- componentDidMount(): void;
37
- componentWillUnmount(): void;
38
- render(): React.JSX.Element;
39
- private _onClose;
40
- private _onEsc;
41
- }
42
- //# sourceMappingURL=Backstage.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Backstage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/backstage/Backstage.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AAEH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,qFAAqF;IACrF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oDAAoD;IACpD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gDAAgD;IAChD,WAAW,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;AAExE;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;IAChE,gBAAuB,YAAY,EAAE,qBAAqB,CAExD;IAEc,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB;IAIpB,MAAM;IAiCtB,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,MAAM,CAIZ;CACH"}
@@ -1,46 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- /** @packageDocumentation
6
- * @module Backstage
7
- */
8
- import classnames from "classnames";
9
- import * as React from "react";
10
- import { Key } from "ts-key-enum";
11
- import { SafeAreaInsetsHelpers } from "../base/SafeAreaInsets.js";
12
- import "./Backstage.scss";
13
- /** Backstage component of 9-Zone UI app.
14
- * @internal
15
- */
16
- export class Backstage extends React.PureComponent {
17
- static defaultProps = {
18
- showOverlay: true,
19
- };
20
- componentDidMount() {
21
- document.addEventListener("keydown", this._onEsc, false);
22
- }
23
- componentWillUnmount() {
24
- document.removeEventListener("keydown", this._onEsc, false);
25
- }
26
- render() {
27
- const overlayClassName = classnames("nz-backstage-backstage_overlay", this.props.isOpen && "nz-open", this.props.showOverlay && "nz-overlay");
28
- const backstageClassName = classnames("nz-backstage-backstage", this.props.isOpen && "nz-open", this.props.safeAreaInsets &&
29
- SafeAreaInsetsHelpers.getCssClassNames(this.props.safeAreaInsets), this.props.className);
30
- return (React.createElement(React.Fragment, null,
31
- React.createElement("div", { className: overlayClassName, onClick: this._onClose, role: "presentation" }),
32
- React.createElement("div", { className: backstageClassName, style: this.props.style },
33
- this.props.header && (React.createElement("div", { className: "nz-header" }, this.props.header)),
34
- React.createElement("ul", { role: "menu" }, this.props.children),
35
- this.props.footer && (React.createElement("div", { className: "nz-footer" }, this.props.footer)))));
36
- }
37
- _onClose = () => {
38
- this.props.onClose && this.props.onClose();
39
- };
40
- _onEsc = (event) => {
41
- if (this.props.isOpen && event.key === Key.Escape.valueOf()) {
42
- this._onClose();
43
- }
44
- };
45
- }
46
- //# sourceMappingURL=Backstage.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Backstage.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/backstage/Backstage.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,kBAAkB,CAAC;AA4B1B;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,aAA6B;IACzD,MAAM,CAAU,YAAY,GAA0B;QAC3D,WAAW,EAAE,IAAI;KAClB,CAAC;IAEc,iBAAiB;QAC/B,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC3D,CAAC;IAEe,oBAAoB;QAClC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC9D,CAAC;IAEe,MAAM;QACpB,MAAM,gBAAgB,GAAG,UAAU,CACjC,gCAAgC,EAChC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,SAAS,EAC9B,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,YAAY,CACvC,CAAC;QACF,MAAM,kBAAkB,GAAG,UAAU,CACnC,wBAAwB,EACxB,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,SAAS,EAC9B,IAAI,CAAC,KAAK,CAAC,cAAc;YACvB,qBAAqB,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,EACnE,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,OAAO,CACL;YACE,6BACE,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,cAAc,GACnB;YACF,6BAAK,SAAS,EAAE,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;gBACxD,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CACpB,6BAAK,SAAS,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAO,CACrD;gBACD,4BAAI,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAM;gBACzC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CACpB,6BAAK,SAAS,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAO,CACrD,CACG,CACL,CACJ,CAAC;IACJ,CAAC;IAEO,QAAQ,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAC7C,CAAC,CAAC;IAEM,MAAM,GAAG,CAAC,KAAoB,EAAQ,EAAE;QAC9C,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5D,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC;IACH,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Backstage\n */\n\nimport type { CommonProps } from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { SafeAreaInsets } from \"../../safearea/SafeAreaInsets.js\";\nimport { SafeAreaInsetsHelpers } from \"../base/SafeAreaInsets.js\";\nimport \"./Backstage.scss\";\n\n/** Properties of [[Backstage]] component.\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface BackstageProps extends CommonProps {\n /** Backstage items and separators. I.e. [[BackstageItem]], [[BackstageSeparator]] */\n children?: React.ReactNode;\n /** Optional footer content. */\n footer?: React.ReactNode;\n /** Optional header content. I.e. [[UserProfile]] */\n header?: React.ReactNode;\n /** Describes if the backstage is open. */\n isOpen?: boolean;\n /** Function called when backstage is closed. */\n onClose?: () => void;\n /** Describes respected safe area insets. */\n safeAreaInsets?: SafeAreaInsets;\n /** Describes if a ghosting overlay is shown. */\n showOverlay: boolean;\n}\n\n/** Default properties of [[Backstage]] component.\n * @internal\n */\nexport type BackstageDefaultProps = Pick<BackstageProps, \"showOverlay\">;\n\n/** Backstage component of 9-Zone UI app.\n * @internal\n */\nexport class Backstage extends React.PureComponent<BackstageProps> {\n public static readonly defaultProps: BackstageDefaultProps = {\n showOverlay: true,\n };\n\n public override componentDidMount(): void {\n document.addEventListener(\"keydown\", this._onEsc, false);\n }\n\n public override componentWillUnmount() {\n document.removeEventListener(\"keydown\", this._onEsc, false);\n }\n\n public override render() {\n const overlayClassName = classnames(\n \"nz-backstage-backstage_overlay\",\n this.props.isOpen && \"nz-open\",\n this.props.showOverlay && \"nz-overlay\"\n );\n const backstageClassName = classnames(\n \"nz-backstage-backstage\",\n this.props.isOpen && \"nz-open\",\n this.props.safeAreaInsets &&\n SafeAreaInsetsHelpers.getCssClassNames(this.props.safeAreaInsets),\n this.props.className\n );\n return (\n <>\n <div\n className={overlayClassName}\n onClick={this._onClose}\n role=\"presentation\"\n />\n <div className={backstageClassName} style={this.props.style}>\n {this.props.header && (\n <div className=\"nz-header\">{this.props.header}</div>\n )}\n <ul role=\"menu\">{this.props.children}</ul>\n {this.props.footer && (\n <div className=\"nz-footer\">{this.props.footer}</div>\n )}\n </div>\n </>\n );\n }\n\n private _onClose = () => {\n this.props.onClose && this.props.onClose();\n };\n\n private _onEsc = (event: KeyboardEvent): void => {\n if (this.props.isOpen && event.key === Key.Escape.valueOf()) {\n this._onClose();\n }\n };\n}\n"]}
@@ -1,90 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- @use "~@itwin/core-react/lib/core-react/z-index" as *;
6
- @use "~@itwin/core-react/lib/core-react/style/breakpoints" as *;
7
- @use "../prefix" as *;
8
- @use "../safearea" as *;
9
- @use "../scrollbar" as *;
10
- @use "variables" as *;
11
-
12
- .nz-backstage-backstage {
13
- display: flex;
14
- flex-direction: column;
15
- position: absolute;
16
- left: 0;
17
- top: 0;
18
- width: $nz-backstage-width;
19
- height: 100%;
20
- font-size: $nz-backstage-item-font-size;
21
- color: var(--iui-color-text);
22
- background-color: var(--iui-color-background);
23
- border-right: 1px solid var(--iui-color-border);
24
- transform: translateX(-100%);
25
- box-sizing: border-box;
26
-
27
- @include uicore-z-index(backstage);
28
- @include nz-transition(transform 0.25s ease);
29
-
30
- &.nz-open {
31
- @include nz-transform(translateX(0%));
32
- }
33
-
34
- @include for-tablet-landscape-down {
35
- font-size: var(--iui-font-size-1);
36
- }
37
-
38
- @include for-phone-only {
39
- font-size: var(--iui-font-size-0);
40
- }
41
-
42
- > ul {
43
- margin: 0;
44
- padding: 0;
45
- list-style: none;
46
- overflow: auto;
47
-
48
- @include nz-scrollbar;
49
- }
50
-
51
- > .nz-header {
52
- border-bottom: $nz-backstage-header-divider-width solid
53
- var(--iui-color-border-subtle);
54
- }
55
-
56
- > .nz-footer {
57
- margin-top: auto;
58
- }
59
-
60
- &.nz-safe-area-top {
61
- @include nz-safe-area-top;
62
- }
63
-
64
- &.nz-safe-area-bottom {
65
- @include nz-safe-area-bottom;
66
- }
67
- }
68
-
69
- .nz-backstage-backstage_overlay {
70
- position: fixed;
71
- width: 100%;
72
- height: 100%;
73
- top: 0;
74
- left: 0;
75
- overflow: hidden;
76
- opacity: 0;
77
- visibility: hidden;
78
- background: transparent;
79
- @include uicore-z-index(backstage);
80
- @include nz-transition(0.25s ease);
81
-
82
- &.nz-open {
83
- visibility: visible;
84
- opacity: 1;
85
- }
86
-
87
- &.nz-overlay {
88
- background-color: $nz-backstage-overlay-background;
89
- }
90
- }
@@ -1,38 +0,0 @@
1
- /** @packageDocumentation
2
- * @module Backstage
3
- */
4
- import type { CommonProps } from "@itwin/core-react";
5
- import * as React from "react";
6
- import type { SafeAreaInsets } from "../../safearea/SafeAreaInsets.js";
7
- import "./Item.scss";
8
- /** Properties of [[BackstageItem]] component.
9
- * @internal
10
- */
11
- export interface BackstageItemProps extends CommonProps {
12
- /** Backstage item label. */
13
- children?: string;
14
- /** Backstage item icon. */
15
- icon?: React.ReactNode;
16
- /** Describes if the item is active. */
17
- isActive?: boolean;
18
- /** Describes if the item is disabled. */
19
- isDisabled?: boolean;
20
- /** Function called when item is clicked. */
21
- onClick?: () => void;
22
- /** Describes respected safe area insets. */
23
- safeAreaInsets?: SafeAreaInsets;
24
- /** Backstage item subtitle. */
25
- subtitle?: string;
26
- /** A badge to draw. */
27
- badge?: React.ReactNode;
28
- providerId?: string;
29
- itemPriority?: number;
30
- groupPriority?: number;
31
- }
32
- /** Item in the [[Backstage]].
33
- * @internal
34
- */
35
- export declare class BackstageItem extends React.PureComponent<BackstageItemProps> {
36
- render(): React.JSX.Element;
37
- }
38
- //# sourceMappingURL=Item.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/backstage/Item.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,aAAa,CAAC;AAErB;;GAEG;AAEH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC;IACxD,MAAM;CAgCvB"}
@@ -1,29 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- /** @packageDocumentation
6
- * @module Backstage
7
- */
8
- import classnames from "classnames";
9
- import * as React from "react";
10
- import { SafeAreaInsetsHelpers } from "../base/SafeAreaInsets.js";
11
- import "./Item.scss";
12
- /** Item in the [[Backstage]].
13
- * @internal
14
- */
15
- export class BackstageItem extends React.PureComponent {
16
- render() {
17
- const className = classnames("nz-backstage-item", this.props.isActive && "nz-active", this.props.isDisabled && "nz-disabled", this.props.safeAreaInsets &&
18
- SafeAreaInsetsHelpers.getCssClassNames(this.props.safeAreaInsets), this.props.className);
19
- return (
20
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events
21
- React.createElement("li", { "data-item-id": this.props.itemId, "data-item-type": "backstage-item", "data-item-group-priority": this.props.groupPriority, "data-item-priority": this.props.itemPriority, "data-item-provider-id": this.props.providerId, className: className, onClick: this.props.onClick, style: this.props.style, role: "menuitem" },
22
- React.createElement("div", { className: "nz-icon" }, this.props.icon),
23
- this.props.badge && React.createElement("div", { className: "nz-badge" }, this.props.badge),
24
- React.createElement("div", null,
25
- React.createElement("span", null, this.props.children),
26
- this.props.subtitle && React.createElement("span", null, this.props.subtitle))));
27
- }
28
- }
29
- //# sourceMappingURL=Item.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/backstage/Item.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,aAAa,CAAC;AA6BrB;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAiC;IACxD,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,mBAAmB,EACnB,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,WAAW,EAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,aAAa,EACtC,IAAI,CAAC,KAAK,CAAC,cAAc;YACvB,qBAAqB,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,EACnE,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO;QACL,iEAAiE;QACjE,4CACgB,IAAI,CAAC,KAAK,CAAC,MAAM,oBAChB,gBAAgB,8BACL,IAAI,CAAC,KAAK,CAAC,aAAa,wBAC9B,IAAI,CAAC,KAAK,CAAC,YAAY,2BACpB,IAAI,CAAC,KAAK,CAAC,UAAU,EAC5C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,IAAI,EAAC,UAAU;YAEf,6BAAK,SAAS,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAO;YAC/C,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAC,UAAU,IAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAO;YACvE;gBACE,kCAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAQ;gBACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,kCAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAQ,CACtD,CACH,CACN,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 Backstage\n */\n\nimport type { CommonProps } from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { SafeAreaInsets } from \"../../safearea/SafeAreaInsets.js\";\nimport { SafeAreaInsetsHelpers } from \"../base/SafeAreaInsets.js\";\nimport \"./Item.scss\";\n\n/** Properties of [[BackstageItem]] component.\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface BackstageItemProps extends CommonProps {\n /** Backstage item label. */\n children?: string;\n /** Backstage item icon. */\n icon?: React.ReactNode;\n /** Describes if the item is active. */\n isActive?: boolean;\n /** Describes if the item is disabled. */\n isDisabled?: boolean;\n /** Function called when item is clicked. */\n onClick?: () => void;\n /** Describes respected safe area insets. */\n safeAreaInsets?: SafeAreaInsets;\n /** Backstage item subtitle. */\n subtitle?: string;\n /** A badge to draw. */\n badge?: React.ReactNode;\n\n providerId?: string;\n itemPriority?: number;\n groupPriority?: number;\n}\n\n/** Item in the [[Backstage]].\n * @internal\n */\nexport class BackstageItem extends React.PureComponent<BackstageItemProps> {\n public override render() {\n const className = classnames(\n \"nz-backstage-item\",\n this.props.isActive && \"nz-active\",\n this.props.isDisabled && \"nz-disabled\",\n this.props.safeAreaInsets &&\n SafeAreaInsetsHelpers.getCssClassNames(this.props.safeAreaInsets),\n this.props.className\n );\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n <li\n data-item-id={this.props.itemId}\n data-item-type=\"backstage-item\"\n data-item-group-priority={this.props.groupPriority}\n data-item-priority={this.props.itemPriority}\n data-item-provider-id={this.props.providerId}\n className={className}\n onClick={this.props.onClick}\n style={this.props.style}\n role=\"menuitem\"\n >\n <div className=\"nz-icon\">{this.props.icon}</div>\n {this.props.badge && <div className=\"nz-badge\">{this.props.badge}</div>}\n <div>\n <span>{this.props.children}</span>\n {this.props.subtitle && <span>{this.props.subtitle}</span>}\n </div>\n </li>\n );\n }\n}\n"]}
@@ -1,107 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- @use "~@itwin/core-react/lib/core-react/style/breakpoints" as *;
6
- @use "../prefix" as *;
7
- @use "../safearea" as *;
8
- @use "variables" as *;
9
-
10
- .nz-backstage-item {
11
- position: relative;
12
- display: flex;
13
- align-items: center;
14
- padding-bottom: $nz-backstage-item-spacing;
15
- padding-top: $nz-backstage-item-spacing;
16
- cursor: pointer;
17
-
18
- @include nz-transition(0.2s ease);
19
-
20
- @include for-tablet-landscape-down {
21
- padding-bottom: $nz-backstage-item-spacing-medium;
22
- padding-top: $nz-backstage-item-spacing-medium;
23
- }
24
-
25
- @include for-phone-only {
26
- padding-bottom: $nz-backstage-item-spacing-small;
27
- padding-top: $nz-backstage-item-spacing-small;
28
- }
29
-
30
- &:hover {
31
- background: var(--iui-color-background-hover);
32
- color: var(--iui-color-text-hover);
33
- }
34
-
35
- &.nz-active {
36
- background: var(--iui-color-background-accent-muted);
37
-
38
- &:before {
39
- content: "";
40
- position: absolute;
41
- top: 0;
42
- left: 0;
43
- height: 100%;
44
- margin-left: $nz-backstage-highlight-bar-spacing-left;
45
- width: $nz-backstage-highlight-bar-spacing-left;
46
- background: var(--iui-color-border-accent);
47
- }
48
- }
49
-
50
- &.nz-disabled {
51
- color: var(--iui-color-text-disabled);
52
- pointer-events: none;
53
- }
54
-
55
- > .nz-icon {
56
- display: flex;
57
- padding-left: $nz-backstage-icon-spacing-left;
58
- padding-right: $nz-backstage-icon-spacing-right;
59
-
60
- svg {
61
- fill: currentColor;
62
- }
63
- }
64
-
65
- > div:last-child {
66
- display: flex;
67
- flex-direction: column;
68
- padding-right: var(--iui-size-s);
69
- overflow: hidden;
70
-
71
- > span {
72
- text-overflow: ellipsis;
73
- white-space: nowrap;
74
- overflow: hidden;
75
- }
76
-
77
- > span:nth-child(2) {
78
- margin-top: var(--iui-size-xs);
79
- font-size: $nz-backstage-subtitle-font-size;
80
- color: var(--iui-color-text-muted);
81
-
82
- @include for-tablet-landscape-down {
83
- font-size: var(--iui-font-size-0);
84
- }
85
-
86
- @include for-phone-only {
87
- font-size: var(--iui-font-size-0) - 1px;
88
- }
89
- }
90
- }
91
-
92
- > .nz-badge {
93
- position: absolute;
94
- top: 1px;
95
- left: 5px;
96
- }
97
-
98
- &.nz-safe-area-left {
99
- @include nz-safe-area-left;
100
-
101
- &.nz-active {
102
- &:before {
103
- @include nz-safe-area-left(left);
104
- }
105
- }
106
- }
107
- }
@@ -1,13 +0,0 @@
1
- /** @packageDocumentation
2
- * @module Backstage
3
- */
4
- import "./Separator.scss";
5
- import * as React from "react";
6
- import type { CommonProps } from "@itwin/core-react";
7
- /** Item separator in the [[Backstage]] component.
8
- * @internal
9
- */
10
- export declare class BackstageSeparator extends React.PureComponent<CommonProps> {
11
- render(): React.JSX.Element;
12
- }
13
- //# sourceMappingURL=Separator.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/backstage/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;AAEH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IACtD,MAAM;CAUvB"}
@@ -1,21 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- /** @packageDocumentation
6
- * @module Backstage
7
- */
8
- import "./Separator.scss";
9
- import classnames from "classnames";
10
- import * as React from "react";
11
- /** Item separator in the [[Backstage]] component.
12
- * @internal
13
- */
14
- // eslint-disable-next-line @typescript-eslint/no-deprecated
15
- export class BackstageSeparator extends React.PureComponent {
16
- render() {
17
- const className = classnames("nz-backstage-separator", this.props.className);
18
- return (React.createElement("li", { className: className, style: this.props.style, role: "separator" }));
19
- }
20
- }
21
- //# sourceMappingURL=Separator.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/backstage/Separator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;GAEG;AACH,4DAA4D;AAC5D,MAAM,OAAO,kBAAmB,SAAQ,KAAK,CAAC,aAA0B;IACtD,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,wBAAwB,EACxB,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,4BAAI,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,WAAW,GAAG,CACvE,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 Backstage\n */\n\nimport \"./Separator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Item separator in the [[Backstage]] component.\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport class BackstageSeparator extends React.PureComponent<CommonProps> {\n public override render() {\n const className = classnames(\n \"nz-backstage-separator\",\n this.props.className\n );\n\n return (\n <li className={className} style={this.props.style} role=\"separator\" />\n );\n }\n}\n"]}
@@ -1,10 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- @use "variables" as *;
6
-
7
- .nz-backstage-separator {
8
- height: $nz-backstage-divider-height;
9
- background-color: var(--iui-color-border-subtle);
10
- }
@@ -1,90 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- @use "~@itwin/core-react/lib/core-react/z-index" as *;
6
- @use "~@itwin/core-react/lib/core-react/style/breakpoints" as *;
7
- @use "../prefix" as *;
8
- @use "../safearea" as *;
9
- @use "../scrollbar" as *;
10
- @use "variables" as *;
11
-
12
- .nz-backstage-backstage {
13
- display: flex;
14
- flex-direction: column;
15
- position: absolute;
16
- left: 0;
17
- top: 0;
18
- width: $nz-backstage-width;
19
- height: 100%;
20
- font-size: $nz-backstage-item-font-size;
21
- color: var(--iui-color-text);
22
- background-color: var(--iui-color-background);
23
- border-right: 1px solid var(--iui-color-border);
24
- transform: translateX(-100%);
25
- box-sizing: border-box;
26
-
27
- @include uicore-z-index(backstage);
28
- @include nz-transition(transform 0.25s ease);
29
-
30
- &.nz-open {
31
- @include nz-transform(translateX(0%));
32
- }
33
-
34
- @include for-tablet-landscape-down {
35
- font-size: var(--iui-font-size-1);
36
- }
37
-
38
- @include for-phone-only {
39
- font-size: var(--iui-font-size-0);
40
- }
41
-
42
- > ul {
43
- margin: 0;
44
- padding: 0;
45
- list-style: none;
46
- overflow: auto;
47
-
48
- @include nz-scrollbar;
49
- }
50
-
51
- > .nz-header {
52
- border-bottom: $nz-backstage-header-divider-width solid
53
- var(--iui-color-border-subtle);
54
- }
55
-
56
- > .nz-footer {
57
- margin-top: auto;
58
- }
59
-
60
- &.nz-safe-area-top {
61
- @include nz-safe-area-top;
62
- }
63
-
64
- &.nz-safe-area-bottom {
65
- @include nz-safe-area-bottom;
66
- }
67
- }
68
-
69
- .nz-backstage-backstage_overlay {
70
- position: fixed;
71
- width: 100%;
72
- height: 100%;
73
- top: 0;
74
- left: 0;
75
- overflow: hidden;
76
- opacity: 0;
77
- visibility: hidden;
78
- background: transparent;
79
- @include uicore-z-index(backstage);
80
- @include nz-transition(0.25s ease);
81
-
82
- &.nz-open {
83
- visibility: visible;
84
- opacity: 1;
85
- }
86
-
87
- &.nz-overlay {
88
- background-color: $nz-backstage-overlay-background;
89
- }
90
- }
@@ -1,107 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- @use "~@itwin/core-react/lib/core-react/style/breakpoints" as *;
6
- @use "../prefix" as *;
7
- @use "../safearea" as *;
8
- @use "variables" as *;
9
-
10
- .nz-backstage-item {
11
- position: relative;
12
- display: flex;
13
- align-items: center;
14
- padding-bottom: $nz-backstage-item-spacing;
15
- padding-top: $nz-backstage-item-spacing;
16
- cursor: pointer;
17
-
18
- @include nz-transition(0.2s ease);
19
-
20
- @include for-tablet-landscape-down {
21
- padding-bottom: $nz-backstage-item-spacing-medium;
22
- padding-top: $nz-backstage-item-spacing-medium;
23
- }
24
-
25
- @include for-phone-only {
26
- padding-bottom: $nz-backstage-item-spacing-small;
27
- padding-top: $nz-backstage-item-spacing-small;
28
- }
29
-
30
- &:hover {
31
- background: var(--iui-color-background-hover);
32
- color: var(--iui-color-text-hover);
33
- }
34
-
35
- &.nz-active {
36
- background: var(--iui-color-background-accent-muted);
37
-
38
- &:before {
39
- content: "";
40
- position: absolute;
41
- top: 0;
42
- left: 0;
43
- height: 100%;
44
- margin-left: $nz-backstage-highlight-bar-spacing-left;
45
- width: $nz-backstage-highlight-bar-spacing-left;
46
- background: var(--iui-color-border-accent);
47
- }
48
- }
49
-
50
- &.nz-disabled {
51
- color: var(--iui-color-text-disabled);
52
- pointer-events: none;
53
- }
54
-
55
- > .nz-icon {
56
- display: flex;
57
- padding-left: $nz-backstage-icon-spacing-left;
58
- padding-right: $nz-backstage-icon-spacing-right;
59
-
60
- svg {
61
- fill: currentColor;
62
- }
63
- }
64
-
65
- > div:last-child {
66
- display: flex;
67
- flex-direction: column;
68
- padding-right: var(--iui-size-s);
69
- overflow: hidden;
70
-
71
- > span {
72
- text-overflow: ellipsis;
73
- white-space: nowrap;
74
- overflow: hidden;
75
- }
76
-
77
- > span:nth-child(2) {
78
- margin-top: var(--iui-size-xs);
79
- font-size: $nz-backstage-subtitle-font-size;
80
- color: var(--iui-color-text-muted);
81
-
82
- @include for-tablet-landscape-down {
83
- font-size: var(--iui-font-size-0);
84
- }
85
-
86
- @include for-phone-only {
87
- font-size: var(--iui-font-size-0) - 1px;
88
- }
89
- }
90
- }
91
-
92
- > .nz-badge {
93
- position: absolute;
94
- top: 1px;
95
- left: 5px;
96
- }
97
-
98
- &.nz-safe-area-left {
99
- @include nz-safe-area-left;
100
-
101
- &.nz-active {
102
- &:before {
103
- @include nz-safe-area-left(left);
104
- }
105
- }
106
- }
107
- }
@@ -1,10 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- @use "variables" as *;
6
-
7
- .nz-backstage-separator {
8
- height: $nz-backstage-divider-height;
9
- background-color: var(--iui-color-border-subtle);
10
- }