@itwin/core-react 4.0.0-dev.1 → 4.0.0-dev.11

package/lib/esm/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 var(--iui-color-border);
+  background: var(--iui-color-background);
+  color: var(--iui-color-text);
+  animation-duration: var(--iui-duration-1);
+  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: var(--iui-color-background);
 }
 
 .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/esm/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/esm/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/esm/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/esm/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;
@@ -46,8 +45,8 @@
 
         .core-radial-menu-button-content {
           cursor: default;
-          color: $buic-text-color;
-          font-size: $iui-font-size-small;
+          color: var(--iui-color-text);
+          font-size: var(--iui-font-size-0);
           user-select: none;
         }
       }

package/lib/esm/core-react/searchbox/SearchBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/searchbox/SearchBox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gBAAgB;AAChB,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAC5E,OAAO,CAAC,aAAa,CAAiC;IACtD,OAAO,CAAC,UAAU,CAAa;IAE/B,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,CAA4C;gBAExF,KAAK,EAAE,cAAc;IAIjC,gBAAgB;IACA,MAAM,IAAI,KAAK,CAAC,SAAS;IAiCzC,6HAA6H;IAC7H,OAAO,CAAC,eAAe,CAUrB;IACF,OAAO,CAAC,YAAY,CAclB;IAEF,OAAO,CAAC,cAAc,CAapB;IAEF,OAAO,CAAC,gBAAgB,CAWtB;IAEF,OAAO,CAAC,aAAa,CAKnB;IAEc,oBAAoB;IAI7B,KAAK;CAKb"}
+{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/searchbox/SearchBox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAM7C;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gBAAgB;AAChB,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAC5E,OAAO,CAAC,aAAa,CAAiC;IACtD,OAAO,CAAC,UAAU,CAAa;IAE/B,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,CAA4C;gBAExF,KAAK,EAAE,cAAc;IAIjC,gBAAgB;IACA,MAAM,IAAI,KAAK,CAAC,SAAS;IA8BzC,6HAA6H;IAC7H,OAAO,CAAC,eAAe,CAUrB;IACF,OAAO,CAAC,YAAY,CAclB;IAEF,OAAO,CAAC,cAAc,CAapB;IAEF,OAAO,CAAC,gBAAgB,CAWtB;IAEF,OAAO,CAAC,aAAa,CAKnB;IAEc,oBAAoB;IAI7B,KAAK;CAKb"}

package/lib/esm/core-react/searchbox/SearchBox.js

@@ -10,6 +10,9 @@ import classnames from "classnames";
 import * as React from "react";
 import { UiCore } from "../UiCore";
 import { SpecialKey } from "@itwin/appui-abstract";
+import { Input } from "@itwin/itwinui-react";
+import { Icon } from "../icons/IconComponent";
+import { SvgClose, SvgSearch } from "@itwin/itwinui-icons-react";
 /**
  * Input box for entering text to search for.
  * The SearchBox has an icon right-justified and bounded by the box and shows a Search or Clear icon.
@@ -84,15 +87,14 @@ export class SearchBox extends React.Component {
     render() {
         const searchClassName = classnames("core-searchbox", this.props.className);
         const emptyString = this.state.value === "";
-        const iconClassName = classnames("core-searchbox-icon", "icon", {
-            "icon-search": emptyString,
-            "icon-close": !emptyString,
-        });
+        const iconClassName = classnames("core-searchbox-icon", "icon");
+        const iconSpec = emptyString ? React.createElement(SvgSearch, null) : React.createElement(SvgClose, null);
         const buttonTitle = UiCore.translate(emptyString ? "general.search" : "general.clear");
         return (React.createElement("div", { className: searchClassName, style: this.props.style, "data-testid": "core-searchbox-instance" },
-            React.createElement("input", { defaultValue: this.props.initialValue, ref: (el) => { this._inputElement = el; }, onChange: this._trackChange, onKeyDown: this._handleKeyDown, onPaste: this._trackChange, onCut: this._trackChange, placeholder: this.props.placeholder ? this.props.placeholder : UiCore.translate("general.search"), role: "searchbox", "data-testid": "core-searchbox-input" }),
+            React.createElement(Input, { defaultValue: this.props.initialValue, ref: (el) => { this._inputElement = el; }, onChange: this._trackChange, onKeyDown: this._handleKeyDown, onPaste: this._trackChange, onCut: this._trackChange, placeholder: this.props.placeholder ? this.props.placeholder : UiCore.translate("general.search"), role: "searchbox", "data-testid": "core-searchbox-input" }),
             React.createElement("div", { className: "core-searchbox-button", onClick: this._handleIconClick, role: "button", tabIndex: -1, title: buttonTitle },
-                React.createElement("span", { className: iconClassName }))));
+                React.createElement("span", { className: iconClassName },
+                    React.createElement(Icon, { iconSpec: iconSpec })))));
     }
     componentWillUnmount() {
         this._unsetTimeout();

package/lib/esm/core-react/searchbox/SearchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../src/core-react/searchbox/SearchBox.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AA2BnD;;;;GAIG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAyC;IAO5E,YAAY,KAAqB;QAC/B,KAAK,CAAC,KAAK,CAAC,CAAC;QAPP,kBAAa,GAA4B,IAAI,CAAC;QAC9C,eAAU,GAAW,CAAC,CAAC;QAE/B,gBAAgB;QACS,UAAK,GAA6B,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,EAAE,CAAC;QAwCpG,6HAA6H;QACrH,oBAAe,GAAG,CAAC,KAAa,EAAE,aAAqB,EAAE,EAAE;YACjE,uBAAuB;YACvB,IAAI,KAAK,KAAK,aAAa;gBACzB,OAAO;YAET,IAAI,CAAC,QAAQ,CAAC,CAAC,UAAU,EAAE,EAAE;gBAC3B,OAAO;oBACL,KAAK;iBACN,CAAC;YACJ,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7D,CAAC,CAAC;QACM,iBAAY,GAAG,CAAC,MAAY,EAAQ,EAAE;YAC5C,IAAI,KAAK,GAAG,EAAE,CAAC;YACf,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;YAEvC,uBAAuB;YACvB,IAAI,IAAI,CAAC,aAAa;gBACpB,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;YAEnC,IAAI,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE;gBAChC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;aAC1H;iBAAM;gBACL,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;aAC5C;QACH,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,CAAsB,EAAE,EAAE;YAClD,QAAQ,CAAC,CAAC,GAAG,EAAE;gBACb,KAAK,UAAU,CAAC,MAAM;oBACpB,uBAAuB;oBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;wBACzB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;oBAC5B,MAAM;gBACR,KAAK,UAAU,CAAC,KAAK;oBACnB,uBAAuB;oBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc;wBAC3B,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;oBAC9B,MAAM;aACT;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,MAAqC,EAAQ,EAAE;YACzE,uBAAuB;YACvB,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;gBACtC,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,EAAE,CAAC;gBAC9B,uBAAuB;gBACvB,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;oBAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACvB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;aAC5B;YACD,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBACrC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;IAjGF,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,MAAM,eAAe,GAAG,UAAU,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC3E,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;QAC5C,MAAM,aAAa,GAAG,UAAU,CAC9B,qBAAqB,EACrB,MAAM,EACN;YACE,aAAa,EAAE,WAAW;YAC1B,YAAY,EAAE,CAAC,WAAW;SAC3B,CACF,CAAC;QACF,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;QACvF,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,iBAAc,yBAAyB;YAC7F,+BACE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,CAAC,CAAC,EACzC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACjG,IAAI,EAAC,WAAW,iBACJ,sBAAsB,GAC3B;YAET,6BAAK,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW;gBACnH,8BAAM,SAAS,EAAE,aAAa,GAAI,CAC9B,CACF,CACP,CAAC;IACJ,CAAC;IAiEe,oBAAoB;QAClC,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEM,KAAK;QACV,uBAAuB;QACvB,IAAI,IAAI,CAAC,aAAa;YACpB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IAC/B,CAAC;CACF","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 SearchBox\r\n */\r\n\r\nimport \"./SearchBox.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { UiCore } from \"../UiCore\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\n\r\n/** Properties for [[SearchBox]] component\r\n * @public\r\n */\r\nexport interface SearchBoxProps extends CommonProps {\r\n  /** Value to set SearchBox to initially */\r\n  initialValue?: string;\r\n  /** Placeholder value to show in gray before anything is entered in */\r\n  placeholder?: string;\r\n  /** Triggered when the content of SearchBox is changed */\r\n  onValueChanged: (value: string) => void;\r\n  /** Frequency to poll for changes in value, in milliseconds */\r\n  valueChangedDelay?: number;\r\n  /** Listens for <Enter> keypress */\r\n  onEnterPressed?: () => void;\r\n  /** Listens for <Esc> keypress */\r\n  onEscPressed?: () => void;\r\n  /** Listens for onClick event for Clear (x) icon */\r\n  onClear?: () => void;\r\n}\r\n\r\n/** @internal */\r\ninterface SearchBoxState {\r\n  value: string;\r\n}\r\n\r\n/**\r\n * Input box for entering text to search for.\r\n * The SearchBox has an icon right-justified and bounded by the box and shows a Search or Clear icon.\r\n * @public\r\n */\r\nexport class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {\r\n  private _inputElement: HTMLInputElement | null = null;\r\n  private _timeoutId: number = 0;\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<SearchBoxState> = { value: this.props.initialValue || \"\" };\r\n\r\n  constructor(props: SearchBoxProps) {\r\n    super(props);\r\n  }\r\n\r\n  /** @internal */\r\n  public override render(): React.ReactNode {\r\n    const searchClassName = classnames(\"core-searchbox\", this.props.className);\r\n    const emptyString = this.state.value === \"\";\r\n    const iconClassName = classnames(\r\n      \"core-searchbox-icon\",\r\n      \"icon\",\r\n      {\r\n        \"icon-search\": emptyString,\r\n        \"icon-close\": !emptyString,\r\n      },\r\n    );\r\n    const buttonTitle = UiCore.translate(emptyString ? \"general.search\" : \"general.clear\");\r\n    return (\r\n      <div className={searchClassName} style={this.props.style} data-testid=\"core-searchbox-instance\">\r\n        <input\r\n          defaultValue={this.props.initialValue}\r\n          ref={(el) => { this._inputElement = el; }}\r\n          onChange={this._trackChange}\r\n          onKeyDown={this._handleKeyDown}\r\n          onPaste={this._trackChange}\r\n          onCut={this._trackChange}\r\n          placeholder={this.props.placeholder ? this.props.placeholder : UiCore.translate(\"general.search\")}\r\n          role=\"searchbox\"\r\n          data-testid=\"core-searchbox-input\"\r\n        ></input>\r\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n        <div className=\"core-searchbox-button\" onClick={this._handleIconClick} role=\"button\" tabIndex={-1} title={buttonTitle}>\r\n          <span className={iconClassName} />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */\r\n  private _onValueChanged = (value: string, previousValue: string) => {\r\n    // istanbul ignore else\r\n    if (value === previousValue)\r\n      return;\r\n\r\n    this.setState((_prevState) => {\r\n      return {\r\n        value,\r\n      };\r\n    }, () => { this.props.onValueChanged(this.state.value); });\r\n  };\r\n  private _trackChange = (_event?: any): void => {\r\n    let value = \"\";\r\n    const previousValue = this.state.value;\r\n\r\n    // istanbul ignore else\r\n    if (this._inputElement)\r\n      value = this._inputElement.value;\r\n\r\n    if (this.props.valueChangedDelay) {\r\n      this._unsetTimeout();\r\n      this._timeoutId = window.setTimeout(() => { this._onValueChanged(value, previousValue); }, this.props.valueChangedDelay);\r\n    } else {\r\n      this._onValueChanged(value, previousValue);\r\n    }\r\n  };\r\n\r\n  private _handleKeyDown = (e: React.KeyboardEvent) => {\r\n    switch (e.key) {\r\n      case SpecialKey.Escape:\r\n        // istanbul ignore else\r\n        if (this.props.onEscPressed)\r\n          this.props.onEscPressed();\r\n        break;\r\n      case SpecialKey.Enter:\r\n        // istanbul ignore else\r\n        if (this.props.onEnterPressed)\r\n          this.props.onEnterPressed();\r\n        break;\r\n    }\r\n  };\r\n\r\n  private _handleIconClick = (_event: React.MouseEvent<HTMLElement>): void => {\r\n    // istanbul ignore else\r\n    if (this._inputElement) {\r\n      const clear = this.state.value !== \"\";\r\n      this._inputElement.value = \"\";\r\n      // istanbul ignore else\r\n      if (clear && this.props.onClear)\r\n        this.props.onClear();\r\n      this._inputElement.focus();\r\n    }\r\n    this._trackChange();\r\n  };\r\n\r\n  private _unsetTimeout = (): void => {\r\n    if (this._timeoutId) {\r\n      window.clearTimeout(this._timeoutId);\r\n      this._timeoutId = 0;\r\n    }\r\n  };\r\n\r\n  public override componentWillUnmount() {\r\n    this._unsetTimeout();\r\n  }\r\n\r\n  public focus() {\r\n    // istanbul ignore else\r\n    if (this._inputElement)\r\n      this._inputElement.focus();\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../src/core-react/searchbox/SearchBox.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 SearchBox\r\n */\r\n\r\nimport \"./SearchBox.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { UiCore } from \"../UiCore\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { Icon, IconSpec } from \"../icons/IconComponent\";\r\nimport { SvgClose, SvgSearch } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Properties for [[SearchBox]] component\r\n * @public\r\n */\r\nexport interface SearchBoxProps extends CommonProps {\r\n  /** Value to set SearchBox to initially */\r\n  initialValue?: string;\r\n  /** Placeholder value to show in gray before anything is entered in */\r\n  placeholder?: string;\r\n  /** Triggered when the content of SearchBox is changed */\r\n  onValueChanged: (value: string) => void;\r\n  /** Frequency to poll for changes in value, in milliseconds */\r\n  valueChangedDelay?: number;\r\n  /** Listens for <Enter> keypress */\r\n  onEnterPressed?: () => void;\r\n  /** Listens for <Esc> keypress */\r\n  onEscPressed?: () => void;\r\n  /** Listens for onClick event for Clear (x) icon */\r\n  onClear?: () => void;\r\n}\r\n\r\n/** @internal */\r\ninterface SearchBoxState {\r\n  value: string;\r\n}\r\n\r\n/**\r\n * Input box for entering text to search for.\r\n * The SearchBox has an icon right-justified and bounded by the box and shows a Search or Clear icon.\r\n * @public\r\n */\r\nexport class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {\r\n  private _inputElement: HTMLInputElement | null = null;\r\n  private _timeoutId: number = 0;\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<SearchBoxState> = { value: this.props.initialValue || \"\" };\r\n\r\n  constructor(props: SearchBoxProps) {\r\n    super(props);\r\n  }\r\n\r\n  /** @internal */\r\n  public override render(): React.ReactNode {\r\n    const searchClassName = classnames(\"core-searchbox\", this.props.className);\r\n    const emptyString = this.state.value === \"\";\r\n    const iconClassName = classnames(\r\n      \"core-searchbox-icon\",\r\n      \"icon\",\r\n    );\r\n    const iconSpec: IconSpec = emptyString ? <SvgSearch /> : <SvgClose />;\r\n    const buttonTitle = UiCore.translate(emptyString ? \"general.search\" : \"general.clear\");\r\n    return (\r\n      <div className={searchClassName} style={this.props.style} data-testid=\"core-searchbox-instance\">\r\n        <Input\r\n          defaultValue={this.props.initialValue}\r\n          ref={(el) => { this._inputElement = el; }}\r\n          onChange={this._trackChange}\r\n          onKeyDown={this._handleKeyDown}\r\n          onPaste={this._trackChange}\r\n          onCut={this._trackChange}\r\n          placeholder={this.props.placeholder ? this.props.placeholder : UiCore.translate(\"general.search\")}\r\n          role=\"searchbox\"\r\n          data-testid=\"core-searchbox-input\"\r\n        />\r\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n        <div className=\"core-searchbox-button\" onClick={this._handleIconClick} role=\"button\" tabIndex={-1} title={buttonTitle}>\r\n          <span className={iconClassName}><Icon iconSpec={iconSpec} /></span>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */\r\n  private _onValueChanged = (value: string, previousValue: string) => {\r\n    // istanbul ignore else\r\n    if (value === previousValue)\r\n      return;\r\n\r\n    this.setState((_prevState) => {\r\n      return {\r\n        value,\r\n      };\r\n    }, () => { this.props.onValueChanged(this.state.value); });\r\n  };\r\n  private _trackChange = (_event?: any): void => {\r\n    let value = \"\";\r\n    const previousValue = this.state.value;\r\n\r\n    // istanbul ignore else\r\n    if (this._inputElement)\r\n      value = this._inputElement.value;\r\n\r\n    if (this.props.valueChangedDelay) {\r\n      this._unsetTimeout();\r\n      this._timeoutId = window.setTimeout(() => { this._onValueChanged(value, previousValue); }, this.props.valueChangedDelay);\r\n    } else {\r\n      this._onValueChanged(value, previousValue);\r\n    }\r\n  };\r\n\r\n  private _handleKeyDown = (e: React.KeyboardEvent) => {\r\n    switch (e.key) {\r\n      case SpecialKey.Escape:\r\n        // istanbul ignore else\r\n        if (this.props.onEscPressed)\r\n          this.props.onEscPressed();\r\n        break;\r\n      case SpecialKey.Enter:\r\n        // istanbul ignore else\r\n        if (this.props.onEnterPressed)\r\n          this.props.onEnterPressed();\r\n        break;\r\n    }\r\n  };\r\n\r\n  private _handleIconClick = (_event: React.MouseEvent<HTMLElement>): void => {\r\n    // istanbul ignore else\r\n    if (this._inputElement) {\r\n      const clear = this.state.value !== \"\";\r\n      this._inputElement.value = \"\";\r\n      // istanbul ignore else\r\n      if (clear && this.props.onClear)\r\n        this.props.onClear();\r\n      this._inputElement.focus();\r\n    }\r\n    this._trackChange();\r\n  };\r\n\r\n  private _unsetTimeout = (): void => {\r\n    if (this._timeoutId) {\r\n      window.clearTimeout(this._timeoutId);\r\n      this._timeoutId = 0;\r\n    }\r\n  };\r\n\r\n  public override componentWillUnmount() {\r\n    this._unsetTimeout();\r\n  }\r\n\r\n  public focus() {\r\n    // istanbul ignore else\r\n    if (this._inputElement)\r\n      this._inputElement.focus();\r\n  }\r\n}\r\n"]}

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

@@ -4,25 +4,21 @@
 *--------------------------------------------------------------------------------------------*/
 @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 {
-  @include iui-font-family;
+  font-family: var(--iui-font-sans);
   display: flex;
   align-items: center;
   position: relative;
   //default values (height, width, font-size, color)
   height: $uicore-component-height-normal;
   width: 12em;
-  font-size: $iui-font-size;
-  color: $buic-text-color;
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
 
   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;
@@ -42,12 +38,11 @@
     cursor: pointer;
 
     &:hover span {
-      color: $buic-foreground-primary;
+      color: var(--iui-color-text-accent);
     }
 
     &:focus {
       outline: none;
     }
-
   }
 }

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

@@ -14,7 +14,7 @@ import { ConditionalBooleanValue } from "@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;
   }