npm - @itwin/core-react - Versions diffs - 4.0.0-dev.1 → 4.0.0-dev.11 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (728) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadialMenu.js","sourceRoot":"","sources":["../../../../src/core-react/radialmenu/RadialMenu.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,6BAA2B;AAC3B,2CAAoC;AACpC,+BAA+B;AAC/B,0DAAmD;AACnD,0DAAwD;AACxD,0CAAuC;AAEvC,uCAAmD;AAiCnD;;;GAGG;AACH,MAAa,UAAW,SAAQ,KAAK,CAAC,SAA2C;IAa/E,YAAY,KAAsB;QAChC,KAAK,CAAC,KAAK,CAAC,CAAC;QAbP,UAAK,GAA0B,IAAI,CAAC;QACpC,oBAAe,GAAwB,IAAI,CAAC;QAMpD,gBAAgB;QACS,UAAK,GAA8B;YAC1D,OAAO,EAAE,EAAE;SACZ,CAAC;QA+EM,iBAAY,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC9C,IAAI,KAAK,CAAC,GAAG,KAAK,2BAAU,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK;gBACrD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC3C,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;gBAC9G,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,CAAC;QAEF,oDAAoD;QAC7C,WAAM,GAAG,GAAG,EAAE;YACnB,uBAAuB;YACvB,IAAI,IAAI,CAAC,eAAe;gBACtB,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;QAClC,CAAC,CAAC;QAEM,4BAAuB,GAAG,GAAG,EAAE;YACrC,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YACpD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;YAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;YACrC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;YAErC,MAAM,MAAM,GAAG,CAAE,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;YAC7B,MAAM,OAAO,GAAG,IAAI,iBAAO,CAAC,IAAI,aAAK,CAAC,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;YACnF,MAAM,OAAO,GAAoB,EAAE,CAAC;YACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;gBAC1B,OAAO,CAAC,IAAI,CAAC,IAAI,uBAAa,CAAC,OAAO,EAAE,KAAK,GAAG,CAAC,GAAG,MAAM,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;aACxF;YACD,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;QAC7B,CAAC,CAAC;IAzGF,CAAC;IAEe,MAAM;QACpB,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;QAC/C,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QAE5C,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAClH,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;YACpB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YAEnB,IAAI,CAAC,GAAG,CAAC;gBACP,CAAC,GAAG,CAAC,CAAC;YACR,IAAI,CAAC,GAAG,MAAM,CAAC,UAAU,GAAG,KAAK;gBAC/B,CAAC,GAAG,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC;YAChC,IAAI,CAAC,GAAG,CAAC;gBACP,CAAC,GAAG,CAAC,CAAC;YACR,IAAI,CAAC,GAAG,MAAM,CAAC,WAAW,GAAG,KAAK;gBAChC,CAAC,GAAG,MAAM,CAAC,WAAW,GAAG,KAAK,CAAC;SAClC;QAED,MAAM,QAAQ,GAAwB,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QAE/E,OAAO,CACL,6BACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,EACjC,SAAS,EAAE,IAAA,oBAAU,EAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC9F,KAAK,EAAE,QAAQ,iBACH,kBAAkB;YAE9B,6BACE,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAC,KAAK,EAC5C,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAC3B,SAAS,EAAE,4BAA4B,IACtC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACxD,uBAAuB;gBACvB,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC;oBAC5D,OAAO,KAAK,CAAC;gBAEf,MAAM,YAAY,GAAI,KAAiC,CAAC;gBACxD,OAAO,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE;oBACtC,GAAG,EAAE,KAAK;oBACV,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;wBACf,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,KAAK;4BAC/B,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;oBAC9B,CAAC;oBACD,QAAQ,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ;oBACvC,WAAW,EAAE,YAAY,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW;oBACrE,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;iBACzC,CAAC,CAAC;YACL,CAAC,CAAC,CACE,CACF,CACP,CAAC;IACJ,CAAC;IAEe,iBAAiB;QAC/B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACpD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;IACL,CAAC;IAEe,oBAAoB;QAClC,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACvD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC3D,CAAC;IAEe,kBAAkB,CAAC,SAA0B;QAC3D,IAAI,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YACxG,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;IACH,CAAC;;AAxFH,gCAyHC;AAtHe,uBAAY,GAA6B;IACrD,WAAW,EAAE,KAAK;IAClB,QAAQ,EAAE,CAAC,CAAC;CACb,CAAC;AA0IJ;;;GAGG;AACH,MAAa,YAAa,SAAQ,KAAK,CAAC,SAA+C;IAKrF,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJf,gBAAgB;QACS,UAAK,GAAgC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,EAAE,CAAC;QA8DtG,wCAAwC;QACjC,WAAM,GAAG,GAAG,EAAE;YACnB,uBAAuB;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ;gBACrB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;QACnC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAmC,EAAE,EAAE;YAC7D,uBAAuB;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ;gBACrB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,MAAoC,EAAE,EAAE;YAClE,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACjC,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,MAAoC,EAAE,EAAE;YACjE,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAClC,CAAC,CAAC;IA7EF,CAAC;IAEe,MAAM;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;QACxC,IAAI,CAAC,GAAG,IAAI,aAAK,EAAE,CAAC;QACpB,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,IAAI,CAAC,GAAG,EAAE,CAAC;QACX,IAAI,IAAI,GAAG,EAAE,CAAC;QAEd,IAAI,MAAM,EAAE;YACV,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;YACxD,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;YAEnB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;YAC7B,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC;YACvC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAC1D,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;YACxD,CAAC,GAAG,IAAI,aAAK,CAAC,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;YAElE,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;gBAC1B,IAAI,CAAC,GAAG,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;gBACnC,OAAO,CAAC,GAAG,GAAG;oBACZ,CAAC,IAAI,GAAG,CAAC;gBACX,OAAO,CAAC,GAAG,CAAC,GAAG;oBACb,0BAA0B;oBAC1B,CAAC,IAAI,GAAG,CAAC;gBACX,IAAI,CAAC,GAAG,EAAE;oBACR,CAAC,IAAI,GAAG,CAAC;gBACX,IAAI,CAAC,GAAG,CAAC,EAAE;oBACT,CAAC,IAAI,GAAG,CAAC;gBACX,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;aACnC;SACF;QAED,OAAO,CACL,2BACE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,UAAU,EAAE,IAAI,CAAC,eAAe,EAChC,OAAO,EAAE,IAAI,CAAC,YAAY;YAC1B,8BACE,SAAS,EAAE,IAAA,oBAAU,EAAC,yBAAyB,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EACtG,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,CAAC,EAAE,IAAI,GACF;YACP,uCAAe,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,6BAA6B;gBAC9H,gCAAS,EAAE,KAAK,EAAE,8BAA8B,EAAE,EAAE,SAAS,EAAE,mCAAmC;oBAChG,6BAAK,SAAS,EAAC,8BAA8B;wBAC3C,oBAAC,oBAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,CAC/B;oBACN,6BAAK,SAAS,EAAE,iCAAiC,IAC9C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACF,CACQ,CACd,CACL,CAAC;IACJ,CAAC;CAsBF;AArFD,oCAqFC","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"]}
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 /* 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 CHANGED Viewed

@@ -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/cjs/core-react/searchbox/SearchBox.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;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/cjs/core-react/searchbox/SearchBox.js CHANGED Viewed

@@ -13,6 +13,9 @@ const classnames_1 = require("classnames");
 const React = require("react");
 const UiCore_1 = require("../UiCore");
 const appui_abstract_1 = require("@itwin/appui-abstract");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const IconComponent_1 = require("../icons/IconComponent");
+const itwinui_icons_react_1 = require("@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.
@@ -87,15 +90,14 @@ class SearchBox extends React.Component {
     render() {
         const searchClassName = (0, classnames_1.default)("core-searchbox", this.props.className);
         const emptyString = this.state.value === "";
-        const iconClassName = (0, classnames_1.default)("core-searchbox-icon", "icon", {
-            "icon-search": emptyString,
-            "icon-close": !emptyString,
-        });
+        const iconClassName = (0, classnames_1.default)("core-searchbox-icon", "icon");
+        const iconSpec = emptyString ? React.createElement(itwinui_icons_react_1.SvgSearch, null) : React.createElement(itwinui_icons_react_1.SvgClose, null);
         const buttonTitle = UiCore_1.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_1.UiCore.translate("general.search"), role: "searchbox", "data-testid": "core-searchbox-input" }),
+            React.createElement(itwinui_react_1.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_1.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(IconComponent_1.Icon, { iconSpec: iconSpec })))));
     }
     componentWillUnmount() {
         this._unsetTimeout();

package/lib/cjs/core-react/searchbox/SearchBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../src/core-react/searchbox/SearchBox.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAC/B,sCAAmC;AAEnC,0DAAmD;~~AA2BnD~~;;;;GAIG;AACH,MAAa,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,2BAAU,CAAC,MAAM;oBACpB,uBAAuB;oBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;wBACzB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;oBAC5B,MAAM;gBACR,KAAK,2BAAU,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,IAAA,oBAAU,EAAC,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,IAAA,oBAAU,EAC9B,qBAAqB,EACrB,MAAM,~~EACN~~;~~YACE~~,~~aAAa~~,~~EAAE~~,WAAW~~;YAC1B~~,~~YAAY~~,~~EAAE~~,CAAC,~~WAAW;SAC3B~~,~~CACF~~,CAAC;~~QACF~~,MAAM,WAAW,GAAG,eAAM,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,eAAM,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;~~AArHD~~,~~8BAqHC~~","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"]}
1	+ {"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/cjs/core-react/searchbox/SearchBox.scss CHANGED Viewed

@@ -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/cjs/core-react/settings/SettingsContainer.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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 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 CHANGED Viewed

@@ -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,9 @@ div.core-settings-container {
     min-width: 15em;
     height: 100%;
     overflow: auto;
-    >.uicore-tabs-vertical {
+    border-right: 2px solid var(--iui-color-border);
+    > .uicore-tabs-vertical {
       font-size: 16px;
     }
   }
@@ -30,15 +33,15 @@ div.core-settings-container {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background: var(--buic-background-dialog);
+    background: var(--iui-color-background);
     align-content: center;
     .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 +65,4 @@ div.core-settings-container {
       overflow: auto;
     }
   }
-}
+}

package/lib/cjs/core-react/style/baseline.scss CHANGED Viewed

@@ -2,12 +2,10 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/baseline";
+$uicore-baseline: var(--iui-size-s);
+$uicore-line-height: var(--iui-size-l); ///  22px; /// ~1.618;
-$uicore-baseline:                  $iui-baseline;
-$uicore-line-height:               $iui-line-height;    ///  22px; /// ~1.618;
-$uicore-bordered-padding:          $uicore-baseline - 1px;
-$uicore-bordered-padding-large:    $uicore-baseline * 2 - 1px;
-$uicore-unbordered-padding:        $uicore-baseline;
-$uicore-unbordered-padding-large:  $uicore-baseline * 2;
+$uicore-bordered-padding: calc(var(--iui-size-s) - 1px);
+$uicore-bordered-padding-large: calc(var(--iui-size-s) * 2 - 1px);
+$uicore-unbordered-padding: var(--iui-size-s);
+$uicore-unbordered-padding-large: calc(var(--iui-size-s) * 2);

package/lib/cjs/core-react/style/data-viz.scss CHANGED Viewed

@@ -2,22 +2,19 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/color";
-// @warn "data-viz.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/colors' instead.";
 /** iTwin.js Data Visualization Colors */
-$buic-dataviz-skyblue:        $iui-color-dataviz-skyblue;
-$buic-dataviz-celery:	        $iui-color-dataviz-celery;
-$buic-dataviz-froly:	        $iui-color-dataviz-froly;
-$buic-dataviz-steelblue:	    $iui-color-dataviz-steelblue;
-$buic-dataviz-sunglow:	      $iui-color-dataviz-sunglow;
-$buic-dataviz-seabuckthorn:	  $iui-color-dataviz-seabuckthorn;
-$buic-dataviz-montecarlo:	    $iui-color-dataviz-montecarlo;
-$buic-dataviz-poloblue:	      $iui-color-dataviz-poloblue;
-$buic-dataviz-bouquet:	      $iui-color-dataviz-bouquet;
-$buic-dataviz-ash:	          $iui-color-dataviz-ash;
-$buic-dataviz-oak:	          $iui-color-dataviz-oak;
+$buic-dataviz-skyblue:        hsl(204 77% 67%);
+$buic-dataviz-celery:	        hsl(72 51% 56%);
+$buic-dataviz-froly:	        hsl(2 90% 70%);
+$buic-dataviz-steelblue:	    hsl(200 41% 46%);
+$buic-dataviz-sunglow:	      hsl(42 100% 60%);
+$buic-dataviz-seabuckthorn:	  hsl(29 92% 61%);
+$buic-dataviz-montecarlo:	    hsl(176 43% 62%);
+$buic-dataviz-poloblue:	      hsl(211 44% 67%);
+$buic-dataviz-bouquet:	      hsl(305 19% 55%);
+$buic-dataviz-ash:	          hsl(42 15% 75%);
+$buic-dataviz-oak:	          hsl(27 32% 49%);
 // cSpell:ignore dataviz froly seabuckthorn montecarlo poloblue

package/lib/cjs/core-react/style/mixins.scss CHANGED Viewed

@@ -2,19 +2,18 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/mixins";
 @mixin no-link {
   text-decoration:      none;
-  color:                $buic-text-color;
+  color:                var(--iui-color-text);
   &:link,
   &:visited,
   &:hover,
   &:active {
-    color:              $buic-text-color;
+    color:              var(--iui-color-text);
     text-decoration:    none;
   }
 }

package/lib/cjs/core-react/style/opacity.scss CHANGED Viewed

@@ -2,16 +2,15 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 /// Opacity stops:
-$uicore-opacity-1:          var(--iui-opacity-1);
-$uicore-opacity-2:          var(--iui-opacity-2);
-$uicore-opacity-3:          var(--iui-opacity-3);
-$uicore-opacity-4:          var(--iui-opacity-4);
-$uicore-opacity-5:          var(--iui-opacity-5);
-$uicore-opacity-6:          var(--iui-opacity-6);
+$uicore-opacity-1: var(--iui-opacity-1);
+$uicore-opacity-2: var(--iui-opacity-2);
+$uicore-opacity-3: var(--iui-opacity-3);
+$uicore-opacity-4: var(--iui-opacity-4);
+$uicore-opacity-5: var(--iui-opacity-5);
+$uicore-opacity-6: var(--iui-opacity-6);
-$uicore-opacity-muted:      $uicore-opacity-3;
-$uicore-opacity-disabled:   $uicore-opacity-4;
-$uicore-opacity-boxshadow:  $uicore-opacity-4;
+$uicore-opacity-muted: $uicore-opacity-3;
+$uicore-opacity-disabled: $uicore-opacity-4;
+$uicore-opacity-boxshadow: $uicore-opacity-4;

package/lib/cjs/core-react/style/space.scss CHANGED Viewed

@@ -2,16 +2,12 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/space";
-// @warn "space.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/space' instead.";
-$uicore-xxs:           $iui-xxs;    // 2px
-$uicore-xs:            $iui-xs;     // 4px
-$uicore-s:             $iui-s;      // 8px
-$uicore-sm:            $iui-sm;     // 12px
-$uicore-m:             $iui-m;      // 16px
-$uicore-l:             $iui-l;      // 24px
-$uicore-xl:            $iui-xl;     // 32px
-$uicore-xxl:           $iui-xxl;    // 64px
-$uicore-3xl:           $iui-3xl;    // 96px
+$uicore-xxs: var(--iui-size-3xs); // 2px
+$uicore-xs: var(--iui-size-2xs); // 4px
+$uicore-s: var(--iui-size-xs); // 8px
+$uicore-sm: var(--iui-size-s); // 12px
+$uicore-m: var(--iui-size-m); // 16px
+$uicore-l: var(--iui-size-l); // 24px
+$uicore-xl: var(--iui-size-xl); // 32px
+$uicore-xxl: var(--iui-size-2xl); // 64px
+$uicore-3xl: var(--iui-size-3xl); // 96px

package/lib/cjs/core-react/style/speed.scss CHANGED Viewed

@@ -2,12 +2,8 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/speed";
-// @warn "speed.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/space' instead.";
 /// Animation speed:
-$uicore-speed-fast:   $iui-speed-fast;
-$uicore-speed:        $iui-speed;
-$uicore-speed-slow:   $iui-speed-slow;
+$uicore-speed-fast: var(--iui-duration-1);
+$uicore-speed: var(--iui-duration-2);
+$uicore-speed-slow: var(--iui-duration-3);

package/lib/cjs/core-react/style/themecolors.scss CHANGED Viewed

@@ -5,12 +5,6 @@
 // cspell:ignore scrollbar titlebar toolbutton outoffocus boxshadow mediumgray
-$buic-background-1-rgb:                   var(--buic-background-1-rgb);
-$buic-background-2-rgb:                   var(--buic-background-2-rgb);
-$buic-background-3-rgb:                   var(--buic-background-3-rgb);
-$buic-background-4-rgb:                   var(--buic-background-4-rgb);
-$buic-background-5-rgb:                   var(--buic-background-5-rgb);
 $buic-background-1:                       var(--buic-background-1);
 $buic-background-2:                       var(--buic-background-2);
 $buic-background-3:                       var(--buic-background-3);

package/lib/cjs/core-react/style/typography.scss CHANGED Viewed

@@ -2,42 +2,38 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/typography";
-// @warn "typography.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/typography' instead.";
 /// Constants ------------------------------------------------------------------
-$uicore-sans:                      $iui-sans;
-$uicore-monospace:                 $iui-monospace;
+$uicore-sans: var(--iui-font-sans);
+$uicore-monospace: var(--iui-font-mono);
-$uicore-font-family:               $iui-font-family;
+$uicore-font-family: var(--iui-font-sans);
-$uicore-font-size:                 $iui-font-size;
-$uicore-font-size-small:           $iui-font-size-small;
-$uicore-font-size-leading:         $iui-font-size-leading;
-$uicore-font-size-subheading:      $iui-font-size-subheading;
-$uicore-font-size-title:           $iui-font-size-title;
-$uicore-font-size-headline:        $iui-font-size-headline;
+$uicore-font-size: var(--iui-font-size-1);
+$uicore-font-size-small: var(--iui-font-size-0);
+$uicore-font-size-leading: var(--iui-font-size-2);
+$uicore-font-size-subheading: var(--iui-font-size-3);
+$uicore-font-size-title: var(--iui-font-size-4);
+$uicore-font-size-headline: var(--iui-font-size-5);
-$uicore-cap-size:                  $iui-cap-size;
-$uicore-cap-size-small:            $iui-cap-size-small;
-$uicore-cap-size-leading:          $iui-cap-size-leading;
-$uicore-cap-size-subheading:       $iui-cap-size-subheading;
-$uicore-cap-size-title:            $iui-cap-size-title;
-$uicore-cap-size-headline:         $iui-cap-size-headline;
+//TODO review this cap part
+$uicore-cap-size: var(--iui-font-size-1);
+$uicore-cap-size-small: var(--iui-font-size-0);
+$uicore-cap-size-leading: var(--iui-font-size-2);
+$uicore-cap-size-subheading: var(--iui-font-size-3);
+$uicore-cap-size-title: var(--iui-font-size-4);
+$uicore-cap-size-headline: var(--iui-font-size-5);
-$uicore-font-weight-light:         $iui-font-weight-light;
-$uicore-font-weight-normal:        $iui-font-weight-normal;
-$uicore-font-weight-semibold:      $iui-font-weight-semibold;
-$uicore-font-weight-bold:          $iui-font-weight-bold;
+$uicore-font-weight-light: var(--iui-font-weight-light);
+$uicore-font-weight-normal: var(--iui-font-weight-normal);
+$uicore-font-weight-semibold: var(--iui-font-weight-semibold);
+$uicore-font-weight-bold: var(--iui-font-weight-bold);
 /// Font loading helpers -------------------------------------------------------
 /// See: https://www.zachleat.com/web/comprehensive-webfonts
-$uicore-font-loaded-class:         $iui-font-loaded-class;
+$uicore-font-loaded-class: var(--iui-font-sans);
 @mixin uicore-font-family {
-  @include iui-font-family;
+  font-family: var(--iui-font-sans);
 }

package/lib/cjs/core-react/style/variables.scss CHANGED Viewed

@@ -2,12 +2,8 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/variables";
+$uicore-border-radius: var(--iui-border-radius-1);
-// @warn "variables.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/variables' instead.";
-$uicore-border-radius:    $iui-border-radius;
-$uicore-component-height-small:   24px;
-$uicore-component-height-normal:  28px;
-$uicore-component-height-large:   32px;
+$uicore-component-height-small: 24px;
+$uicore-component-height-normal: 28px;
+$uicore-component-height-large: 32px;