@itwin/core-react 4.0.0-dev.7 → 4.0.0-dev.9

package/lib/cjs/core-react/popup/Popup.scss

@@ -4,191 +4,191 @@
 *--------------------------------------------------------------------------------------------*/
 @import "../inputs/variables";
 @import "../z-index";
-@import "~@itwin/itwinui-css/scss/style/elevation";
 
 .core-popup {
- top: 0;
- left: 0;
- display: block;
- box-sizing: border-box;
- position: absolute;
- border-radius: 4px;
- border: 1px solid $buic-background-panel-stroke;
- background: $buic-background-panel;
- color: $buic-text-color;
- animation-duration: .2s;
- animation-timing-function: ease;
- animation-fill-mode: forwards;
- cursor: default;
-
- @include uicore-z-index(dialog-popup);
-
- &.core-popup-animation-none {
-  animation-duration: 0s;
- }
-
- &.core-popup-hidden {
-  display: none;
- }
-
- &.core-animation-ended {
-   animation-name: none;
- }
-}
-
-.core-popup.arrow::after, .core-popup.arrow::before {
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- color: $buic-background-panel;
+  top: 0;
+  left: 0;
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  border-radius: var(--iui-border-radius-1);
+  border: 1px solid $buic-background-panel-stroke;
+  background: $buic-background-panel;
+  color: $buic-text-color;
+  animation-duration: 0.2s;
+  animation-timing-function: ease;
+  animation-fill-mode: forwards;
+  cursor: default;
+
+  @include uicore-z-index(dialog-popup);
+
+  &.core-popup-animation-none {
+    animation-duration: 0s;
+  }
+
+  &.core-popup-hidden {
+    display: none;
+  }
+
+  &.core-animation-ended {
+    animation-name: none;
+  }
+}
+
+.core-popup.arrow::after,
+.core-popup.arrow::before {
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  color: $buic-background-panel;
 }
 
 .core-popup.core-popup-bottom-left.arrow::after,
 .core-popup.core-popup-bottom-left.arrow::before {
- bottom: 100%;
- left: 25%;
+  bottom: 100%;
+  left: 25%;
 }
 
 .core-popup.core-popup-bottom-right.arrow::after,
 .core-popup.core-popup-bottom-right.arrow::before {
- bottom: 100%;
- left: 75%;
+  bottom: 100%;
+  left: 75%;
 }
 
 .core-popup.core-popup-bottom.arrow::after,
 .core-popup.core-popup-bottom.arrow::before {
- bottom: 100%;
- left: 50%;
+  bottom: 100%;
+  left: 50%;
 }
 
 .core-popup.core-popup-top.arrow::after,
 .core-popup.core-popup-top.arrow::before {
- top: 100%;
- left: 50%;
+  top: 100%;
+  left: 50%;
 }
 
 .core-popup.core-popup-top-left.arrow::after,
 .core-popup.core-popup-top-left.arrow::before {
- top: 100%;
- left: 25%;
+  top: 100%;
+  left: 25%;
 }
 
 .core-popup.core-popup-top-right.arrow::after,
 .core-popup.core-popup-top-right.arrow::before {
- top: 100%;
- left: 75%;
+  top: 100%;
+  left: 75%;
 }
 
 .core-popup.core-popup-left.arrow::after,
 .core-popup.core-popup-left.arrow::before {
- top: 50%;
- left: 100%;
+  top: 50%;
+  left: 100%;
 }
 
 .core-popup.core-popup-right.arrow::after,
 .core-popup.core-popup-right.arrow::before {
- top: 50%;
- right: 100%;
+  top: 50%;
+  right: 100%;
 }
 
 .core-popup.core-popup-bottom.arrow::before,
 .core-popup.core-popup-bottom-left.arrow::before,
 .core-popup.core-popup-bottom-right.arrow::before {
- border-bottom-color: inherit;
- border-width: 9px;
- margin-left: -9px;
+  border-bottom-color: inherit;
+  border-width: 9px;
+  margin-left: -9px;
 }
 
 .core-popup.core-popup-top.arrow::before,
 .core-popup.core-popup-top-left.arrow::before,
 .core-popup.core-popup-top-right.arrow::before {
- border-top-color: inherit;
- border-width: 9px;
- margin-left: -9px;
+  border-top-color: inherit;
+  border-width: 9px;
+  margin-left: -9px;
 }
 
 .core-popup.core-popup-left.arrow::before {
- border-left-color: inherit;
- border-width: 9px;
- margin-top: -9px;
+  border-left-color: inherit;
+  border-width: 9px;
+  margin-top: -9px;
 }
 
 .core-popup.core-popup-right.arrow::before {
- border-right-color: inherit;
- border-width: 9px;
- margin-top: -9px;
+  border-right-color: inherit;
+  border-width: 9px;
+  margin-top: -9px;
 }
 
 .core-popup.core-popup-bottom.arrow::after,
 .core-popup.core-popup-bottom-left.arrow::after,
 .core-popup.core-popup-bottom-right.arrow::after {
- border-bottom-color: currentColor;
- border-width: 8px;
- margin-left: -8px;
+  border-bottom-color: currentColor;
+  border-width: 8px;
+  margin-left: -8px;
 }
 
 .core-popup.core-popup-top.arrow::after,
 .core-popup.core-popup-top-left.arrow::after,
 .core-popup.core-popup-top-right.arrow::after {
- border-top-color: currentColor;
- border-width: 8px;
- margin-left: -8px;
+  border-top-color: currentColor;
+  border-width: 8px;
+  margin-left: -8px;
 }
 
 .core-popup.core-popup-left.arrow::after {
- border-left-color: currentColor;
- border-width: 8px;
- margin-top: -8px;
+  border-left-color: currentColor;
+  border-width: 8px;
+  margin-top: -8px;
 }
 
 .core-popup.core-popup-right.arrow::after {
- border-right-color: currentColor;
- border-width: 8px;
- margin-top: -8px;
+  border-right-color: currentColor;
+  border-width: 8px;
+  margin-top: -8px;
 }
 
 .core-popup-shadow {
- -webkit-box-shadow: $iui-elevation-16;
- box-shadow: $iui-elevation-16;
- background-clip: padding-box;
+  -webkit-box-shadow: var(--iui-shadow-4);
+  box-shadow: var(--iui-shadow-4);
+  background-clip: padding-box;
 }
 
 .core-popup-top-left {
- transform-origin: left bottom 0px;
- animation-name: animate-corner;
+  transform-origin: left bottom 0px;
+  animation-name: animate-corner;
 }
 
 .core-popup-top-right {
- transform-origin: right bottom 0px;
- animation-name: animate-corner;
+  transform-origin: right bottom 0px;
+  animation-name: animate-corner;
 }
 
 .core-popup-bottom-left {
- transform-origin: left top 0px;
- animation-name: animate-corner;
+  transform-origin: left top 0px;
+  animation-name: animate-corner;
 }
 
 .core-popup-bottom-right {
- transform-origin: right top 0px;
- animation-name: animate-corner;
+  transform-origin: right top 0px;
+  animation-name: animate-corner;
 }
 
 .core-popup-left {
- transform-origin: right;
- animation-name: animate-horizontal;
+  transform-origin: right;
+  animation-name: animate-horizontal;
 }
 
 .core-popup-left-top {
   transform-origin: right top 0px;
   animation-name: animate-corner;
- }
+}
 
 .core-popup-right {
- transform-origin: left;
- animation-name: animate-horizontal;
+  transform-origin: left;
+  animation-name: animate-horizontal;
 }
 
 .core-popup-right-top {
@@ -197,44 +197,44 @@
 }
 
 .core-popup-top {
- transform-origin: bottom;
- animation-name: animate-vertical;
-};
+  transform-origin: bottom;
+  animation-name: animate-vertical;
+}
 
 .core-popup-bottom {
- transform-origin: top;
- animation-name: animate-vertical;
+  transform-origin: top;
+  animation-name: animate-vertical;
 }
 
 @keyframes animate-vertical {
- from {
-   visibility: hidden;
-   transform: scale(1,.5);
- }
- to {
-   visibility: visible;
-   transform: scale(1);
- }
+  from {
+    visibility: hidden;
+    transform: scale(1, 0.5);
+  }
+  to {
+    visibility: visible;
+    transform: scale(1);
+  }
 }
 
 @keyframes animate-corner {
- from {
-   visibility: hidden;
-   transform: scale(.5,.5);
- }
- to {
-   visibility: visible;
-   transform: scale(1,1);
- }
+  from {
+    visibility: hidden;
+    transform: scale(0.5, 0.5);
+  }
+  to {
+    visibility: visible;
+    transform: scale(1, 1);
+  }
 }
 
 @keyframes animate-horizontal {
- from {
-   visibility: hidden;
-   transform: scale(.5,1);
- }
- to {
-   visibility: visible;
-   transform: scale(1,1);
- }
+  from {
+    visibility: hidden;
+    transform: scale(0.5, 1);
+  }
+  to {
+    visibility: visible;
+    transform: scale(1, 1);
+  }
 }

package/lib/cjs/core-react/radialmenu/RadialMenu.d.ts

@@ -30,6 +30,8 @@ export interface RadialMenuProps extends CommonProps {
     onBlur?: (event: any) => any;
     /** triggered onKeyUp for <Esc> key */
     onEsc?: (event: any) => any;
+    /** Content */
+    children?: React.ReactNode;
 }
 /** @internal */
 interface RadialMenuState {
@@ -70,6 +72,8 @@ export interface RadialButtonProps extends CommonProps {
     onSelect?: (e: any) => any;
     /** Whether item is highlighted */
     selected?: boolean;
+    /** Content */
+    children?: React.ReactNode;
 }
 /** @internal */
 interface RadialButtonState {

package/lib/cjs/core-react/radialmenu/RadialMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadialMenu.d.ts","sourceRoot":"","sources":["../../../../src/core-react/radialmenu/RadialMenu.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAW,MAAM,WAAW,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,8DAA8D;IAC9D,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;IAC7B,sCAAsC;IACtC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;CAC7B;AAED,gBAAgB;AAChB,UAAU,eAAe;IACvB,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAED;;;GAGG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAGlD;IAEF,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAEvD;gBAEU,KAAK,EAAE,eAAe;IAIlB,MAAM,IAAI,GAAG,CAAC,OAAO;IAqDrB,iBAAiB;IASjB,oBAAoB;IAKpB,kBAAkB,CAAC,SAAS,EAAE,eAAe;IAM7D,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,oDAAoD;IAC7C,MAAM,aAIX;IAEF,OAAO,CAAC,uBAAuB,CAa7B;CACH;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gBAAgB;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wGAAwG;IACxG,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED;;;GAGG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAErF,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAA2C;gBAE1F,KAAK,EAAE,iBAAiB;IAIpB,MAAM,IAAI,GAAG,CAAC,OAAO;IAwDrC,wCAAwC;IACjC,MAAM,aAIX;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,eAAe,CAErB;CACH"}
+{"version":3,"file":"RadialMenu.d.ts","sourceRoot":"","sources":["../../../../src/core-react/radialmenu/RadialMenu.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAW,MAAM,WAAW,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,8DAA8D;IAC9D,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;IAC7B,sCAAsC;IACtC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;IAC5B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,UAAU,eAAe;IACvB,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAED;;;GAGG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAGlD;IAEF,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAEvD;gBAEU,KAAK,EAAE,eAAe;IAIlB,MAAM,IAAI,GAAG,CAAC,OAAO;IAqDrB,iBAAiB;IASjB,oBAAoB;IAKpB,kBAAkB,CAAC,SAAS,EAAE,eAAe;IAM7D,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,oDAAoD;IAC7C,MAAM,aAIX;IAEF,OAAO,CAAC,uBAAuB,CAa7B;CACH;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gBAAgB;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wGAAwG;IACxG,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED;;;GAGG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAErF,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAA2C;gBAE1F,KAAK,EAAE,iBAAiB;IAIpB,MAAM,IAAI,GAAG,CAAC,OAAO;IAwDrC,wCAAwC;IACjC,MAAM,aAIX;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,eAAe,CAErB;CACH"}

package/lib/cjs/core-react/radialmenu/RadialMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadialMenu.js","sourceRoot":"","sources":["../../../../src/core-react/radialmenu/RadialMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module RadialMenu\r\n */\r\n\r\nimport \"./RadialMenu.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { Icon, IconSpec } from \"../icons/IconComponent\";\r\nimport { Point } from \"../utils/Point\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { AnnularSector, Annulus } from \"./Annulus\";\r\n\r\n/** Properties for [[RadialMenu]]\r\n * @public\r\n */\r\nexport interface RadialMenuProps extends CommonProps {\r\n  /** Whether to show RadialMenu */\r\n  opened: boolean;\r\n  /** Radius of inner portion of RadialMenu */\r\n  innerRadius: number;\r\n  /** Radius of outer portion of RadialMenu */\r\n  outerRadius: number;\r\n  /** Optional parameter to specify left position in viewport. */\r\n  left?: number | string;\r\n  /** Optional parameter to specify top position in viewport. */\r\n  top?: number | string;\r\n  /** Whether to rotate labels according to location on the RadialMenu, or to keep labels upright.\r\n   * Default: false\r\n   */\r\n  labelRotate?: boolean;\r\n  /** Which child RadialButton to highlight */\r\n  selected?: number;\r\n  /** triggered in case of onClick events anywhere other than radial menu */\r\n  onBlur?: (event: any) => any;\r\n  /** triggered onKeyUp for <Esc> key */\r\n  onEsc?: (event: any) => any;\r\n}\r\n\r\n/** @internal */\r\ninterface RadialMenuState {\r\n  sectors: AnnularSector[];\r\n}\r\n\r\n/**\r\n * A context menu arranged in a radial layout.\r\n * @public\r\n */\r\nexport class RadialMenu extends React.Component<RadialMenuProps, RadialMenuState> {\r\n  private _root: HTMLDivElement | null = null;\r\n  private _selectedButton: RadialButton | null = null;\r\n  public static defaultProps: Partial<RadialMenuProps> = {\r\n    labelRotate: false,\r\n    selected: -1,\r\n  };\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<RadialMenuState> = {\r\n    sectors: [],\r\n  };\r\n\r\n  constructor(props: RadialMenuProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    const width = 2 * (this.props.outerRadius + 1);\r\n    let x = this.props.left, y = this.props.top;\r\n\r\n    if (this.props.left && this.props.top && typeof this.props.left === \"number\" && typeof this.props.top === \"number\") {\r\n      x = this.props.left;\r\n      y = this.props.top;\r\n\r\n      if (x < 0)\r\n        x = 0;\r\n      if (x > window.innerWidth - width)\r\n        x = window.innerWidth - width;\r\n      if (y < 0)\r\n        y = 0;\r\n      if (y > window.innerHeight - width)\r\n        y = window.innerHeight - width;\r\n    }\r\n\r\n    const divStyle: React.CSSProperties = { left: x, top: y, ...this.props.style };\r\n\r\n    return (\r\n      <div\r\n        ref={(el) => { this._root = el; }}\r\n        className={classnames(\"core-radial-menu\", { opened: this.props.opened }, this.props.className)}\r\n        style={divStyle}\r\n        data-testid=\"core-radial-menu\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://w3.org/2000/svg\" version=\"1.1\"\r\n          width={width} height={width}\r\n          className={\"core-radial-menu-container\"}>\r\n          {React.Children.map(this.props.children, (child, index) => {\r\n            // istanbul ignore next\r\n            if (!child || typeof child !== \"object\" || !(\"props\" in child))\r\n              return child;\r\n\r\n            const childElement = (child as React.ReactElement<any>);\r\n            return React.cloneElement(childElement, {\r\n              key: index,\r\n              ref: (el: any) => {\r\n                if (this.props.selected === index)\r\n                  this._selectedButton = el;\r\n              },\r\n              selected: index === this.props.selected,\r\n              labelRotate: childElement.props.labelRotate || this.props.labelRotate,\r\n              annularSector: this.state.sectors[index],\r\n            });\r\n          })}\r\n        </svg>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  public override componentDidMount() {\r\n    this._generateAnnularSectors();\r\n\r\n    setTimeout(() => {\r\n      window.addEventListener(\"keyup\", this._handleKeyUp);\r\n      window.addEventListener(\"mouseup\", this._handleClick);\r\n    });\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    window.removeEventListener(\"keyup\", this._handleKeyUp);\r\n    window.removeEventListener(\"mouseup\", this._handleClick);\r\n  }\r\n\r\n  public override componentDidUpdate(prevProps: RadialMenuProps) {\r\n    if (prevProps.innerRadius !== this.props.innerRadius || prevProps.outerRadius !== this.props.outerRadius) {\r\n      this._generateAnnularSectors();\r\n    }\r\n  }\r\n\r\n  private _handleKeyUp = (event: KeyboardEvent) => {\r\n    if (event.key === SpecialKey.Escape && this.props.onEsc)\r\n      this.props.onEsc(event);\r\n  };\r\n\r\n  private _handleClick = (event: MouseEvent) => {\r\n    if (event.target instanceof HTMLElement && this._root && !event.target.contains(this._root) && this.props.onBlur)\r\n      this.props.onBlur(event);\r\n  };\r\n\r\n  /** Manually call onSelect of highlighted button. */\r\n  public select = () => {\r\n    // istanbul ignore else\r\n    if (this._selectedButton)\r\n      this._selectedButton.select();\r\n  };\r\n\r\n  private _generateAnnularSectors = () => {\r\n    const n = React.Children.count(this.props.children);\r\n    const angle = 2 * Math.PI / n;\r\n    const outer = this.props.outerRadius;\r\n    const inner = this.props.innerRadius;\r\n\r\n    const offset = - Math.PI / 8;\r\n    const annulus = new Annulus(new Point(outer + 1, outer + 1), inner + 1, outer - 1);\r\n    const sectors: AnnularSector[] = [];\r\n    for (let i = 0; i < n; i++) {\r\n      sectors.push(new AnnularSector(annulus, angle * i + offset, angle * (i + 1) + offset));\r\n    }\r\n    this.setState({ sectors });\r\n  };\r\n}\r\n\r\n/** Properties for [[RadialButton]] component\r\n * @public\r\n */\r\nexport interface RadialButtonProps extends CommonProps {\r\n  /** Whether label is rotated to radial menu. Default: Inherit */\r\n  labelRotate?: boolean;\r\n  /** which icon to display in on the menu button */\r\n  icon?: IconSpec;\r\n  /** @internal */\r\n  annularSector?: AnnularSector;\r\n  /** listens to any onClick event, or any select event, which can be triggered by the select() method. */\r\n  onSelect?: (e: any) => any;\r\n  /** Whether item is highlighted */\r\n  selected?: boolean;\r\n}\r\n\r\n/** @internal */\r\ninterface RadialButtonState {\r\n  hover: boolean;\r\n}\r\n\r\n/**\r\n * Button for use within a [[RadialMenu]]\r\n * @public\r\n */\r\nexport class RadialButton extends React.Component<RadialButtonProps, RadialButtonState> {\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<RadialButtonState> = { hover: this.props.selected || false };\r\n\r\n  constructor(props: RadialButtonProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    const sector = this.props.annularSector;\r\n    let p = new Point();\r\n    let size = 0;\r\n    let t = \"\";\r\n    let path = \"\";\r\n\r\n    if (sector) {\r\n      size = sector.start.p1.getDistanceTo(sector.end.p2) * 2;\r\n      path = sector.path;\r\n\r\n      const parent = sector.parent;\r\n      const { x: cx, y: cy } = parent.center;\r\n      const r = (parent.inner.radius + parent.outer.radius) / 2;\r\n      const angle = (sector.startAngle + sector.endAngle) / 2;\r\n      p = new Point(cx + r * Math.cos(angle), cy + r * Math.sin(angle));\r\n\r\n      if (this.props.labelRotate) {\r\n        let a = angle * 180 / Math.PI + 90;\r\n        while (a > 180)\r\n          a -= 360;\r\n        while (a < -180)\r\n          /* istanbul ignore next */\r\n          a += 360;\r\n        if (a > 90)\r\n          a -= 180;\r\n        if (a < -90)\r\n          a += 180;\r\n        t = `rotate(${a} ${p.x}, ${p.y})`;\r\n      }\r\n    }\r\n\r\n    return (\r\n      <g\r\n        onMouseOver={this._handleMouseOver}\r\n        onMouseOut={this._handleMouseOut}\r\n        onClick={this._handleClick}>\r\n        <path\r\n          className={classnames(\"core-radial-menu-sector\", { selected: this.state.hover }, this.props.className)}\r\n          style={this.props.style}\r\n          d={path}>\r\n        </path>\r\n        <foreignObject transform={t} x={p.x - size / 2} y={p.y - 16} width={size} height={size} className={\"core-radial-menu-button-svg\"}>\r\n          <div {...{ xmlns: \"http://www.w3.org/1999/xhtml\" }} className={\"core-radial-menu-button-container\"}>\r\n            <div className=\"core-radial-menu-button-icon\">\r\n              <Icon iconSpec={this.props.icon} />\r\n            </div>\r\n            <div className={\"core-radial-menu-button-content\"}>\r\n              {this.props.children}\r\n            </div>\r\n          </div>\r\n        </foreignObject>\r\n      </g>\r\n    );\r\n  }\r\n\r\n  /** Manually call this.props.onSelect */\r\n  public select = () => {\r\n    // istanbul ignore else\r\n    if (this.props.onSelect)\r\n      this.props.onSelect(undefined);\r\n  };\r\n\r\n  private _handleClick = (event: React.MouseEvent<SVGElement>) => {\r\n    // istanbul ignore else\r\n    if (this.props.onSelect)\r\n      this.props.onSelect(event);\r\n  };\r\n\r\n  private _handleMouseOver = (_event: React.MouseEvent<SVGElement>) => {\r\n    this.setState({ hover: true });\r\n  };\r\n\r\n  private _handleMouseOut = (_event: React.MouseEvent<SVGElement>) => {\r\n    this.setState({ hover: false });\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"RadialMenu.js","sourceRoot":"","sources":["../../../../src/core-react/radialmenu/RadialMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module RadialMenu\r\n */\r\n\r\nimport \"./RadialMenu.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { Icon, IconSpec } from \"../icons/IconComponent\";\r\nimport { Point } from \"../utils/Point\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { AnnularSector, Annulus } from \"./Annulus\";\r\n\r\n/** Properties for [[RadialMenu]]\r\n * @public\r\n */\r\nexport interface RadialMenuProps extends CommonProps {\r\n  /** Whether to show RadialMenu */\r\n  opened: boolean;\r\n  /** Radius of inner portion of RadialMenu */\r\n  innerRadius: number;\r\n  /** Radius of outer portion of RadialMenu */\r\n  outerRadius: number;\r\n  /** Optional parameter to specify left position in viewport. */\r\n  left?: number | string;\r\n  /** Optional parameter to specify top position in viewport. */\r\n  top?: number | string;\r\n  /** Whether to rotate labels according to location on the RadialMenu, or to keep labels upright.\r\n   * Default: false\r\n   */\r\n  labelRotate?: boolean;\r\n  /** Which child RadialButton to highlight */\r\n  selected?: number;\r\n  /** triggered in case of onClick events anywhere other than radial menu */\r\n  onBlur?: (event: any) => any;\r\n  /** triggered onKeyUp for <Esc> key */\r\n  onEsc?: (event: any) => any;\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** @internal */\r\ninterface RadialMenuState {\r\n  sectors: AnnularSector[];\r\n}\r\n\r\n/**\r\n * A context menu arranged in a radial layout.\r\n * @public\r\n */\r\nexport class RadialMenu extends React.Component<RadialMenuProps, RadialMenuState> {\r\n  private _root: HTMLDivElement | null = null;\r\n  private _selectedButton: RadialButton | null = null;\r\n  public static defaultProps: Partial<RadialMenuProps> = {\r\n    labelRotate: false,\r\n    selected: -1,\r\n  };\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<RadialMenuState> = {\r\n    sectors: [],\r\n  };\r\n\r\n  constructor(props: RadialMenuProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    const width = 2 * (this.props.outerRadius + 1);\r\n    let x = this.props.left, y = this.props.top;\r\n\r\n    if (this.props.left && this.props.top && typeof this.props.left === \"number\" && typeof this.props.top === \"number\") {\r\n      x = this.props.left;\r\n      y = this.props.top;\r\n\r\n      if (x < 0)\r\n        x = 0;\r\n      if (x > window.innerWidth - width)\r\n        x = window.innerWidth - width;\r\n      if (y < 0)\r\n        y = 0;\r\n      if (y > window.innerHeight - width)\r\n        y = window.innerHeight - width;\r\n    }\r\n\r\n    const divStyle: React.CSSProperties = { left: x, top: y, ...this.props.style };\r\n\r\n    return (\r\n      <div\r\n        ref={(el) => { this._root = el; }}\r\n        className={classnames(\"core-radial-menu\", { opened: this.props.opened }, this.props.className)}\r\n        style={divStyle}\r\n        data-testid=\"core-radial-menu\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://w3.org/2000/svg\" version=\"1.1\"\r\n          width={width} height={width}\r\n          className={\"core-radial-menu-container\"}>\r\n          {React.Children.map(this.props.children, (child, index) => {\r\n            // istanbul ignore next\r\n            if (!child || typeof child !== \"object\" || !(\"props\" in child))\r\n              return child;\r\n\r\n            const childElement = (child as React.ReactElement<any>);\r\n            return React.cloneElement(childElement, {\r\n              key: index,\r\n              ref: (el: any) => {\r\n                if (this.props.selected === index)\r\n                  this._selectedButton = el;\r\n              },\r\n              selected: index === this.props.selected,\r\n              labelRotate: childElement.props.labelRotate || this.props.labelRotate,\r\n              annularSector: this.state.sectors[index],\r\n            });\r\n          })}\r\n        </svg>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  public override componentDidMount() {\r\n    this._generateAnnularSectors();\r\n\r\n    setTimeout(() => {\r\n      window.addEventListener(\"keyup\", this._handleKeyUp);\r\n      window.addEventListener(\"mouseup\", this._handleClick);\r\n    });\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    window.removeEventListener(\"keyup\", this._handleKeyUp);\r\n    window.removeEventListener(\"mouseup\", this._handleClick);\r\n  }\r\n\r\n  public override componentDidUpdate(prevProps: RadialMenuProps) {\r\n    if (prevProps.innerRadius !== this.props.innerRadius || prevProps.outerRadius !== this.props.outerRadius) {\r\n      this._generateAnnularSectors();\r\n    }\r\n  }\r\n\r\n  private _handleKeyUp = (event: KeyboardEvent) => {\r\n    if (event.key === SpecialKey.Escape && this.props.onEsc)\r\n      this.props.onEsc(event);\r\n  };\r\n\r\n  private _handleClick = (event: MouseEvent) => {\r\n    if (event.target instanceof HTMLElement && this._root && !event.target.contains(this._root) && this.props.onBlur)\r\n      this.props.onBlur(event);\r\n  };\r\n\r\n  /** Manually call onSelect of highlighted button. */\r\n  public select = () => {\r\n    // istanbul ignore else\r\n    if (this._selectedButton)\r\n      this._selectedButton.select();\r\n  };\r\n\r\n  private _generateAnnularSectors = () => {\r\n    const n = React.Children.count(this.props.children);\r\n    const angle = 2 * Math.PI / n;\r\n    const outer = this.props.outerRadius;\r\n    const inner = this.props.innerRadius;\r\n\r\n    const offset = - Math.PI / 8;\r\n    const annulus = new Annulus(new Point(outer + 1, outer + 1), inner + 1, outer - 1);\r\n    const sectors: AnnularSector[] = [];\r\n    for (let i = 0; i < n; i++) {\r\n      sectors.push(new AnnularSector(annulus, angle * i + offset, angle * (i + 1) + offset));\r\n    }\r\n    this.setState({ sectors });\r\n  };\r\n}\r\n\r\n/** Properties for [[RadialButton]] component\r\n * @public\r\n */\r\nexport interface RadialButtonProps extends CommonProps {\r\n  /** Whether label is rotated to radial menu. Default: Inherit */\r\n  labelRotate?: boolean;\r\n  /** which icon to display in on the menu button */\r\n  icon?: IconSpec;\r\n  /** @internal */\r\n  annularSector?: AnnularSector;\r\n  /** listens to any onClick event, or any select event, which can be triggered by the select() method. */\r\n  onSelect?: (e: any) => any;\r\n  /** Whether item is highlighted */\r\n  selected?: boolean;\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** @internal */\r\ninterface RadialButtonState {\r\n  hover: boolean;\r\n}\r\n\r\n/**\r\n * Button for use within a [[RadialMenu]]\r\n * @public\r\n */\r\nexport class RadialButton extends React.Component<RadialButtonProps, RadialButtonState> {\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<RadialButtonState> = { hover: this.props.selected || false };\r\n\r\n  constructor(props: RadialButtonProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    const sector = this.props.annularSector;\r\n    let p = new Point();\r\n    let size = 0;\r\n    let t = \"\";\r\n    let path = \"\";\r\n\r\n    if (sector) {\r\n      size = sector.start.p1.getDistanceTo(sector.end.p2) * 2;\r\n      path = sector.path;\r\n\r\n      const parent = sector.parent;\r\n      const { x: cx, y: cy } = parent.center;\r\n      const r = (parent.inner.radius + parent.outer.radius) / 2;\r\n      const angle = (sector.startAngle + sector.endAngle) / 2;\r\n      p = new Point(cx + r * Math.cos(angle), cy + r * Math.sin(angle));\r\n\r\n      if (this.props.labelRotate) {\r\n        let a = angle * 180 / Math.PI + 90;\r\n        while (a > 180)\r\n          a -= 360;\r\n        while (a < -180)\r\n          /* istanbul ignore next */\r\n          a += 360;\r\n        if (a > 90)\r\n          a -= 180;\r\n        if (a < -90)\r\n          a += 180;\r\n        t = `rotate(${a} ${p.x}, ${p.y})`;\r\n      }\r\n    }\r\n\r\n    return (\r\n      <g\r\n        onMouseOver={this._handleMouseOver}\r\n        onMouseOut={this._handleMouseOut}\r\n        onClick={this._handleClick}>\r\n        <path\r\n          className={classnames(\"core-radial-menu-sector\", { selected: this.state.hover }, this.props.className)}\r\n          style={this.props.style}\r\n          d={path}>\r\n        </path>\r\n        <foreignObject transform={t} x={p.x - size / 2} y={p.y - 16} width={size} height={size} className={\"core-radial-menu-button-svg\"}>\r\n          <div {...{ xmlns: \"http://www.w3.org/1999/xhtml\" }} className={\"core-radial-menu-button-container\"}>\r\n            <div className=\"core-radial-menu-button-icon\">\r\n              <Icon iconSpec={this.props.icon} />\r\n            </div>\r\n            <div className={\"core-radial-menu-button-content\"}>\r\n              {this.props.children}\r\n            </div>\r\n          </div>\r\n        </foreignObject>\r\n      </g>\r\n    );\r\n  }\r\n\r\n  /** Manually call this.props.onSelect */\r\n  public select = () => {\r\n    // istanbul ignore else\r\n    if (this.props.onSelect)\r\n      this.props.onSelect(undefined);\r\n  };\r\n\r\n  private _handleClick = (event: React.MouseEvent<SVGElement>) => {\r\n    // istanbul ignore else\r\n    if (this.props.onSelect)\r\n      this.props.onSelect(event);\r\n  };\r\n\r\n  private _handleMouseOver = (_event: React.MouseEvent<SVGElement>) => {\r\n    this.setState({ hover: true });\r\n  };\r\n\r\n  private _handleMouseOut = (_event: React.MouseEvent<SVGElement>) => {\r\n    this.setState({ hover: false });\r\n  };\r\n}\r\n"]}

package/lib/cjs/core-react/radialmenu/RadialMenu.scss

@@ -5,7 +5,6 @@
 @import "../z-index";
 @import "../style/themecolors";
 @import "../icons/variables";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
 .core-radial-menu {
   visibility: hidden;
@@ -47,7 +46,7 @@
         .core-radial-menu-button-content {
           cursor: default;
           color: $buic-text-color;
-          font-size: $iui-font-size-small;
+          font-size: var(--iui-font-size-0);
           user-select: none;
         }
       }

package/lib/cjs/core-react/searchbox/SearchBox.scss

@@ -5,7 +5,6 @@
 @import "../style/themecolors";
 @import "../style/variables";
 @import "~@itwin/itwinui-css/scss/inputs/input";
-@import "~@itwin/itwinui-css/scss/style/space";
 @import "~@itwin/itwinui-css/scss/style/typography";
 
 .core-searchbox {
@@ -16,13 +15,13 @@
   //default values (height, width, font-size, color)
   height: $uicore-component-height-normal;
   width: 12em;
-  font-size: $iui-font-size;
+  font-size: var(--iui-font-size-1);
   color: $buic-text-color;
 
   input {
     @include iui-input;
     min-height: $uicore-component-height-normal;
-    padding: $iui-xxs 2em $iui-xxs 12px; //12px from design guide
+    padding: var(--iui-size-3xs) 2em var(--iui-size-3xs) 12px; //12px from design guide
     height: 100%;
     margin: 0;
     color: inherit;
@@ -48,6 +47,5 @@
     &:focus {
       outline: none;
     }
-
   }
 }

package/lib/cjs/core-react/settings/SettingsContainer.js

@@ -17,7 +17,7 @@ const appui_abstract_1 = require("@itwin/appui-abstract");
 const saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {
   if (dataIsDirty) {
     // prompt user to save changes passing in function and arguments to call after saving changes.
-    ModalDialogManager.openDialog(<CustomSavePromptModalDialog customProps={customProps}
+    UiFramework.dialogs.modal.openDialog(<CustomSavePromptModalDialog customProps={customProps}
       onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);
     return;
   }

package/lib/cjs/core-react/settings/SettingsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsContainer.js","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Settings\r\n */\r\n\r\nimport \"./SettingsContainer.scss\";\r\nimport * as React from \"react\";\r\nimport { ActivateSettingsTabEventArgs, ProcessSettingsContainerCloseEventArgs, ProcessSettingsTabActivationEventArgs, SettingsManager, SettingsTabEntry } from \"./SettingsManager\";\r\nimport { VerticalTabs } from \"../tabs/VerticalTabs\";\r\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\r\n\r\n/*  ---------------------------------------------------------------------------------------------------\r\n// A typical implementation of a saveFunction callback\r\nconst saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {\r\n  if (dataIsDirty) {\r\n    // prompt user to save changes passing in function and arguments to call after saving changes.\r\n    ModalDialogManager.openDialog(<CustomSavePromptModalDialog customProps={customProps}\r\n      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);\r\n    return;\r\n  }\r\n  afterSaveFunction(args);\r\n}, []);\r\n---------------------------------------------------------------------------------------------------------- */\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.\r\n * @public\r\n */\r\nexport function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      saveFunction (closeFunc, closeFuncArgs);\r\n    };\r\n    return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.\r\n * @public\r\n */\r\nexport function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsTabActivation = ({tabSelectionFunc, requestedSettingsTabId}: ProcessSettingsTabActivationEventArgs) => {\r\n      saveFunction (tabSelectionFunc, requestedSettingsTabId);\r\n    };\r\n    return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/**\r\n * @public\r\n */\r\nexport interface SettingsContainerProps {\r\n  tabs: SettingsTabEntry[];\r\n  // sets tab to set as active tab\r\n  currentSettingsTab?: SettingsTabEntry;\r\n  // If plugging into a SPA and you need to modify the route, you can pass in additional logic here\r\n  onSettingsTabSelected?: (tab: SettingsTabEntry) => void;\r\n  // The SettingsManager that can have event handlers registered against it so pages can save its settings before the page is closed.\r\n  settingsManager: SettingsManager;\r\n  // if true show tab label as header above page contents.\r\n  showHeader?: boolean;\r\n}\r\n\r\n/**\r\n * SettingsContainer component that displays Setting Tabs on Left and the P\r\n * Note: that SettingsContainer is not rendered if tabs array is empty\r\n * @public\r\n */\r\nexport const SettingsContainer = ({tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader}: SettingsContainerProps) => {\r\n  // sort the tabs based on itemPriority\r\n  tabs = tabs.sort((a, b)=> a.itemPriority - b.itemPriority);\r\n\r\n  const [openTab, setOpenTab] = React.useState(()=>{\r\n    if (currentSettingsTab && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))\r\n      return currentSettingsTab;\r\n    else\r\n      return tabs[0];\r\n  });\r\n\r\n  const processTabSelection = React.useCallback((tab: SettingsTabEntry) => {\r\n    if (ConditionalBooleanValue.getValue(tab.isDisabled))\r\n      return;\r\n    onSettingsTabSelected && onSettingsTabSelected(tab);\r\n    setOpenTab(tab);\r\n  }, [onSettingsTabSelected]);\r\n\r\n  const processTabSelectionById = React.useCallback((tabId: string) => {\r\n    const tabToActivate = tabs.find((tab)=>tab.tabId === tabId);\r\n    tabToActivate && processTabSelection (tabToActivate);\r\n  }, [processTabSelection, tabs]);\r\n\r\n  const onActivateTab =  React.useCallback((tabIndex: number) => {\r\n    const selectedTab = tabs[tabIndex];\r\n    if (openTab && openTab.pageWillHandleCloseRequest)\r\n      settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:selectedTab.tabId, tabSelectionFunc: processTabSelectionById});\r\n    else\r\n      processTabSelection(selectedTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleActivateSettingsTab = ({settingsTabId}: ActivateSettingsTabEventArgs) => {\r\n      const idToFind = settingsTabId.toLowerCase();\r\n      let tabToActivate = tabs.find((tab)=>tab.tabId.toLowerCase() === idToFind);\r\n      if (!tabToActivate)\r\n        tabToActivate = tabs.find((tab)=>tab.label.toLowerCase() === idToFind);\r\n      // istanbul ignore else\r\n      if (tabToActivate) {\r\n        if (openTab && openTab.pageWillHandleCloseRequest)\r\n          settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:tabToActivate.tabId, tabSelectionFunc: processTabSelectionById});\r\n        else\r\n          processTabSelection(tabToActivate);\r\n      }\r\n    };\r\n\r\n    return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      if (openTab && openTab.pageWillHandleCloseRequest)\r\n        settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });\r\n      else\r\n        closeFunc(closeFuncArgs);\r\n    };\r\n    return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);\r\n  }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  const labels=tabs.map((tab)=> {\r\n    return {label:tab.label, subLabel: tab.subLabel, icon: tab.icon,\r\n      tooltip: tab.tooltip, tabId: tab.tabId, disabled: ConditionalBooleanValue.getValue(tab.isDisabled)};\r\n  });\r\n  const activeIndex = tabs.findIndex((tab)=>tab.tabId === openTab.tabId);\r\n  return (\r\n    <div className=\"core-settings-container\">\r\n      <div className=\"core-settings-container-left\">\r\n        <VerticalTabs labels={labels} activeIndex={activeIndex} onActivateTab={onActivateTab} />\r\n      </div>\r\n      <div className=\"core-settings-container-right\">\r\n        {showHeader && <div className=\"core-settings-container-right-header\">\r\n          <span className=\"core-settings-container-main-header\">{openTab.label}</span>\r\n          {openTab.subLabel && <span className=\"core-settings-container-main-sub-header\">{openTab.subLabel}</span>}\r\n        </div>}\r\n        <div className=\"core-settings-container-right-contents\">\r\n          {openTab.page}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"]}
+{"version":3,"file":"SettingsContainer.js","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Settings\r\n */\r\n\r\nimport \"./SettingsContainer.scss\";\r\nimport * as React from \"react\";\r\nimport { ActivateSettingsTabEventArgs, ProcessSettingsContainerCloseEventArgs, ProcessSettingsTabActivationEventArgs, SettingsManager, SettingsTabEntry } from \"./SettingsManager\";\r\nimport { VerticalTabs } from \"../tabs/VerticalTabs\";\r\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\r\n\r\n/*  ---------------------------------------------------------------------------------------------------\r\n// A typical implementation of a saveFunction callback\r\nconst saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {\r\n  if (dataIsDirty) {\r\n    // prompt user to save changes passing in function and arguments to call after saving changes.\r\n    UiFramework.dialogs.modal.openDialog(<CustomSavePromptModalDialog customProps={customProps}\r\n      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);\r\n    return;\r\n  }\r\n  afterSaveFunction(args);\r\n}, []);\r\n---------------------------------------------------------------------------------------------------------- */\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.\r\n * @public\r\n */\r\nexport function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      saveFunction (closeFunc, closeFuncArgs);\r\n    };\r\n    return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.\r\n * @public\r\n */\r\nexport function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsTabActivation = ({tabSelectionFunc, requestedSettingsTabId}: ProcessSettingsTabActivationEventArgs) => {\r\n      saveFunction (tabSelectionFunc, requestedSettingsTabId);\r\n    };\r\n    return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/**\r\n * @public\r\n */\r\nexport interface SettingsContainerProps {\r\n  tabs: SettingsTabEntry[];\r\n  // sets tab to set as active tab\r\n  currentSettingsTab?: SettingsTabEntry;\r\n  // If plugging into a SPA and you need to modify the route, you can pass in additional logic here\r\n  onSettingsTabSelected?: (tab: SettingsTabEntry) => void;\r\n  // The SettingsManager that can have event handlers registered against it so pages can save its settings before the page is closed.\r\n  settingsManager: SettingsManager;\r\n  // if true show tab label as header above page contents.\r\n  showHeader?: boolean;\r\n}\r\n\r\n/**\r\n * SettingsContainer component that displays Setting Tabs on Left and the P\r\n * Note: that SettingsContainer is not rendered if tabs array is empty\r\n * @public\r\n */\r\nexport const SettingsContainer = ({tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader}: SettingsContainerProps) => {\r\n  // sort the tabs based on itemPriority\r\n  tabs = tabs.sort((a, b)=> a.itemPriority - b.itemPriority);\r\n\r\n  const [openTab, setOpenTab] = React.useState(()=>{\r\n    if (currentSettingsTab && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))\r\n      return currentSettingsTab;\r\n    else\r\n      return tabs[0];\r\n  });\r\n\r\n  const processTabSelection = React.useCallback((tab: SettingsTabEntry) => {\r\n    if (ConditionalBooleanValue.getValue(tab.isDisabled))\r\n      return;\r\n    onSettingsTabSelected && onSettingsTabSelected(tab);\r\n    setOpenTab(tab);\r\n  }, [onSettingsTabSelected]);\r\n\r\n  const processTabSelectionById = React.useCallback((tabId: string) => {\r\n    const tabToActivate = tabs.find((tab)=>tab.tabId === tabId);\r\n    tabToActivate && processTabSelection (tabToActivate);\r\n  }, [processTabSelection, tabs]);\r\n\r\n  const onActivateTab =  React.useCallback((tabIndex: number) => {\r\n    const selectedTab = tabs[tabIndex];\r\n    if (openTab && openTab.pageWillHandleCloseRequest)\r\n      settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:selectedTab.tabId, tabSelectionFunc: processTabSelectionById});\r\n    else\r\n      processTabSelection(selectedTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleActivateSettingsTab = ({settingsTabId}: ActivateSettingsTabEventArgs) => {\r\n      const idToFind = settingsTabId.toLowerCase();\r\n      let tabToActivate = tabs.find((tab)=>tab.tabId.toLowerCase() === idToFind);\r\n      if (!tabToActivate)\r\n        tabToActivate = tabs.find((tab)=>tab.label.toLowerCase() === idToFind);\r\n      // istanbul ignore else\r\n      if (tabToActivate) {\r\n        if (openTab && openTab.pageWillHandleCloseRequest)\r\n          settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:tabToActivate.tabId, tabSelectionFunc: processTabSelectionById});\r\n        else\r\n          processTabSelection(tabToActivate);\r\n      }\r\n    };\r\n\r\n    return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      if (openTab && openTab.pageWillHandleCloseRequest)\r\n        settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });\r\n      else\r\n        closeFunc(closeFuncArgs);\r\n    };\r\n    return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);\r\n  }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  const labels=tabs.map((tab)=> {\r\n    return {label:tab.label, subLabel: tab.subLabel, icon: tab.icon,\r\n      tooltip: tab.tooltip, tabId: tab.tabId, disabled: ConditionalBooleanValue.getValue(tab.isDisabled)};\r\n  });\r\n  const activeIndex = tabs.findIndex((tab)=>tab.tabId === openTab.tabId);\r\n  return (\r\n    <div className=\"core-settings-container\">\r\n      <div className=\"core-settings-container-left\">\r\n        <VerticalTabs labels={labels} activeIndex={activeIndex} onActivateTab={onActivateTab} />\r\n      </div>\r\n      <div className=\"core-settings-container-right\">\r\n        {showHeader && <div className=\"core-settings-container-right-header\">\r\n          <span className=\"core-settings-container-main-header\">{openTab.label}</span>\r\n          {openTab.subLabel && <span className=\"core-settings-container-main-sub-header\">{openTab.subLabel}</span>}\r\n        </div>}\r\n        <div className=\"core-settings-container-right-contents\">\r\n          {openTab.page}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"]}

package/lib/cjs/core-react/settings/SettingsContainer.scss

@@ -4,7 +4,6 @@
 *--------------------------------------------------------------------------------------------*/
 
 @import "../style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
 div.core-settings-container {
   display: flex;
@@ -12,7 +11,9 @@ div.core-settings-container {
   height: 100%;
   width: 100%;
 
-  *, *:before, *:after {
+  *,
+  *:before,
+  *:after {
     box-sizing: inherit;
   }
 
@@ -20,7 +21,7 @@ div.core-settings-container {
     min-width: 15em;
     height: 100%;
     overflow: auto;
-    >.uicore-tabs-vertical {
+    > .uicore-tabs-vertical {
       font-size: 16px;
     }
   }
@@ -36,9 +37,9 @@ div.core-settings-container {
     .core-settings-container-right-header {
       display: flex;
       width: 100%;
-      height: ($iui-font-size-title * 2);
-      font-size: $iui-font-size-title;
-      font-weight: $iui-font-weight-semibold;
+      height: calc(var(--iui-font-size-4) * 2);
+      font-size: var(--iui-font-size-4);
+      font-weight: var(--iui-font-weight-semibold);
       padding-left: 15px;
       align-items: center;
 
@@ -62,4 +63,4 @@ div.core-settings-container {
       overflow: auto;
     }
   }
-}
+}