npm - @itwin/core-react - Versions diffs - 4.0.0-dev.8 → 4.0.0-dev.9 - Mend

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

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 (590) hide show

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

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

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

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

@@ -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;
   }

package/lib/esm/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":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAEhE;;;;;;;;;;;6GAW6G;AAE7G;;GAEG;AACH,MAAM,UAAU,qCAAqC,CAAC,eAAgC,EAAE,YAA2E;IACjK,KAAK,CAAC,SAAS,CAAE,GAAE,EAAE;QACnB,MAAM,mCAAmC,GAAG,CAAC,EAAC,SAAS,EAAE,aAAa,EAAyC,EAAE,EAAE;YACjH,YAAY,CAAE,SAAS,EAAE,aAAa,CAAC,CAAC;QAC1C,CAAC,CAAC;QACF,OAAO,eAAe,CAAC,+BAA+B,CAAC,WAAW,CAAC,mCAAmC,CAAC,CAAC;IAC1G,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;AACtC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qCAAqC,CAAC,eAAgC,EAAE,YAA8F;IACpL,KAAK,CAAC,SAAS,CAAE,GAAE,EAAE;QACnB,MAAM,kCAAkC,GAAG,CAAC,EAAC,gBAAgB,EAAE,sBAAsB,EAAwC,EAAE,EAAE;YAC/H,YAAY,CAAE,gBAAgB,EAAE,sBAAsB,CAAC,CAAC;QAC1D,CAAC,CAAC;QACF,OAAO,eAAe,CAAC,8BAA8B,CAAC,WAAW,CAAC,kCAAkC,CAAC,CAAC;IACxG,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;AACtC,CAAC;AAiBD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAC,IAAI,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,eAAe,EAAE,UAAU,EAAyB,EAAE,EAAE;IAC1I,sCAAsC;IACtC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAC,EAAE,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC;IAE3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAE,EAAE;QAC/C,IAAI,kBAAkB,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,kBAAkB,CAAC,UAAU,CAAC;YACxF,OAAO,kBAAkB,CAAC;;YAE1B,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,GAAqB,EAAE,EAAE;QACtE,IAAI,uBAAuB,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;YAClD,OAAO;QACT,qBAAqB,IAAI,qBAAqB,CAAC,GAAG,CAAC,CAAC;QACpD,UAAU,CAAC,GAAG,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,MAAM,uBAAuB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QAClE,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAC,EAAE,CAAA,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAC5D,aAAa,IAAI,mBAAmB,CAAE,aAAa,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC;IAEhC,MAAM,aAAa,GAAI,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QAC5D,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,OAAO,IAAI,OAAO,CAAC,0BAA0B;YAC/C,eAAe,CAAC,8BAA8B,CAAC,IAAI,CAAC,EAAE,sBAAsB,EAAC,WAAW,CAAC,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAC,CAAC,CAAC;;YAE5I,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IAEnF,KAAK,CAAC,SAAS,CAAE,GAAE,EAAE;QACnB,MAAM,yBAAyB,GAAG,CAAC,EAAC,aAAa,EAA+B,EAAE,EAAE;YAClF,MAAM,QAAQ,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC;YAC7C,IAAI,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAC,EAAE,CAAA,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,CAAC;YAC3E,IAAI,CAAC,aAAa;gBAChB,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAC,EAAE,CAAA,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,CAAC;YACzE,uBAAuB;YACvB,IAAI,aAAa,EAAE;gBACjB,IAAI,OAAO,IAAI,OAAO,CAAC,0BAA0B;oBAC/C,eAAe,CAAC,8BAA8B,CAAC,IAAI,CAAC,EAAE,sBAAsB,EAAC,aAAa,CAAC,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAC,CAAC,CAAC;;oBAE9I,mBAAmB,CAAC,aAAa,CAAC,CAAC;aACtC;QACH,CAAC,CAAC;QAEF,OAAO,eAAe,CAAC,qBAAqB,CAAC,WAAW,CAAC,yBAAyB,CAAC,CAAC;IACtF,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,eAAe,EAAE,eAAe,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1H,KAAK,CAAC,SAAS,CAAE,GAAE,EAAE;QACnB,MAAM,4BAA4B,GAAG,CAAC,EAAC,SAAS,EAAE,aAAa,EAAyC,EAAE,EAAE;YAC1G,IAAI,OAAO,IAAI,OAAO,CAAC,0BAA0B;gBAC/C,eAAe,CAAC,+BAA+B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,CAAC;;gBAEnF,SAAS,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC,CAAC;QACF,OAAO,eAAe,CAAC,wBAAwB,CAAC,WAAW,CAAC,4BAA4B,CAAC,CAAC;IAC5F,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,eAAe,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC,CAAC;IAEjG,MAAM,MAAM,GAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAC,EAAE;QAC3B,OAAO,EAAC,KAAK,EAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI;YAC7D,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,uBAAuB,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,EAAC,CAAC;IACxG,CAAC,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAC,EAAE,CAAA,GAAG,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;IACvE,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB;QACtC,6BAAK,SAAS,EAAC,8BAA8B;YAC3C,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,GAAI,CACpF;QACN,6BAAK,SAAS,EAAC,+BAA+B;YAC3C,UAAU,IAAI,6BAAK,SAAS,EAAC,sCAAsC;gBAClE,8BAAM,SAAS,EAAC,qCAAqC,IAAE,OAAO,CAAC,KAAK,CAAQ;gBAC3E,OAAO,CAAC,QAAQ,IAAI,8BAAM,SAAS,EAAC,yCAAyC,IAAE,OAAO,CAAC,QAAQ,CAAQ,CACpG;YACN,6BAAK,SAAS,EAAC,wCAAwC,IACpD,OAAO,CAAC,IAAI,CACT,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC","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/esm/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,7 @@ div.core-settings-container {
     min-width: 15em;
     height: 100%;
     overflow: auto;
-    >.uicore-tabs-vertical {
+    > .uicore-tabs-vertical {
       font-size: 16px;
     }
   }
@@ -36,9 +37,9 @@ div.core-settings-container {
     .core-settings-container-right-header {
       display: flex;
       width: 100%;
-      height: ($iui-font-size-title * 2);
-      font-size: $iui-font-size-title;
-      font-weight: $iui-font-weight-semibold;
+      height: calc(var(--iui-font-size-4) * 2);
+      font-size: var(--iui-font-size-4);
+      font-weight: var(--iui-font-weight-semibold);
       padding-left: 15px;
       align-items: center;
@@ -62,4 +63,4 @@ div.core-settings-container {
       overflow: auto;
     }
   }
-}
+}

package/lib/esm/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/esm/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/esm/core-react/style/itwinui-overrides.scss CHANGED Viewed

@@ -6,7 +6,6 @@
 @import "../inputs/variables";
 @import "./themecolors";
 @import "./variables";
-@import "~@itwin/itwinui-css/scss/style/space";
 // Override some iTwinUI-css padding and minimums for iTwin.js applications

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

@@ -2,7 +2,6 @@
 * 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 {

package/lib/esm/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/esm/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/esm/core-react/style/speed.scss CHANGED Viewed

@@ -2,12 +2,11 @@
 * 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/esm/core-react/style/typography.scss CHANGED Viewed

@@ -8,36 +8,37 @@
 /// Constants ------------------------------------------------------------------
-$uicore-sans:                      $iui-sans;
-$uicore-monospace:                 $iui-monospace;
-$uicore-font-family:               $iui-font-family;
-$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-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;
-$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-sans: var(--iui-font-sans);
+$uicore-monospace: var(--iui-font-mono);
+$uicore-font-family: var(--iui-font-sans);
+$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);
+//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: 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;
+//TODO review this
+$uicore-font-loaded-class: var(--iui-font-sans);
 @mixin uicore-font-family {
   @include iui-font-family;
 }

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

@@ -2,12 +2,11 @@
 * 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";
 // @warn "variables.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/variables' instead.";
-$uicore-border-radius:    $iui-border-radius;
+$uicore-border-radius: var(--iui-border-radius-1);
-$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;

package/lib/esm/core-react/tabs/Tabs.d.ts CHANGED Viewed

@@ -17,7 +17,7 @@ export interface TabLabel {
     tooltip?: string | JSX.Element;
     disabled?: boolean;
 }
-/** Properties for the [[HorizontalTabs]] and [[VerticalTabs]] components
+/** Properties for the [[VerticalTabs]] component
  * @public
  */
 export interface TabsProps extends React.AllHTMLAttributes<HTMLUListElement>, CommonProps {

package/lib/esm/core-react/tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/core-react/tabs/Tabs.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 Tabs\r\n /\r\n\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Orientation } from \"../enums/Orientation\";\r\nimport { ItemKeyboardNavigator } from \"../focus/ItemKeyboardNavigator\";\r\nimport { IconHelper } from \"../utils/IconHelper\";\r\n\r\n/** TabLabel provides ability to define label, icon, and tooltip for a tab entry. The tooltip can be defined as JSX\|Element\r\n * to support react-tooltip component or a string that will be use to set the title property.\r\n * @public\r\n /\r\nexport interface TabLabel {\r\n label: string;\r\n subLabel?: string;\r\n icon?: string \| JSX.Element;\r\n tabId: string; / optional id added to tab so it can be used by react-tooltip /\r\n /* tooltip allows JSX.Element to support styled tooltips like react-tooltip. /\r\n tooltip?: string \| JSX.Element;\r\n disabled?: boolean;\r\n}\r\n\r\nfunction isTabLabelWithIcon(item: string \| TabLabel): item is TabLabel {\r\n return (typeof item !== \"string\") && !!(item).icon;\r\n}\r\n\r\nfunction isTabLabel(item: string \| TabLabel): item is TabLabel {\r\n return (typeof item !== \"string\");\r\n}\r\n\r\n/* Properties for the [[HorizontalTabs]] and [[VerticalTabs]] components\r\n * @public\r\n /\r\nexport interface TabsProps extends React.AllHTMLAttributes<HTMLUListElement>, CommonProps {\r\n /* Text shown for each tab\r\n * @public /\r\n labels: Array<string \| TabLabel>;\r\n /* Handler for activating a tab /\r\n onActivateTab?: (index: number) => any;\r\n /* Index of the initial active tab /\r\n activeIndex?: number;\r\n /* Indicates whether the bar on the active tab is green instead of the default blue /\r\n green?: boolean;\r\n}\r\n\r\n/* State for [[Tabs]] component\r\n * @internal\r\n /\r\ninterface TabsState {\r\n activeIndex: number;\r\n}\r\n\r\n/* Properties for the base [[Tabs]] component\r\n * @public\r\n /\r\nexport interface MainTabsProps extends TabsProps {\r\n /* Main CSS class name /\r\n mainClassName: string;\r\n /* Orientation of the Tabs list /\r\n orientation: Orientation;\r\n}\r\n\r\n/* Tabs meant to represent the current position in a page/section\r\n * @public\r\n /\r\nexport class Tabs extends React.PureComponent<MainTabsProps, TabsState> {\r\n private _anchorRefs: Array<React.RefObject<HTMLAnchorElement>> = [];\r\n private _itemKeyboardNavigator: ItemKeyboardNavigator;\r\n\r\n constructor(props: MainTabsProps) {\r\n super(props);\r\n\r\n const activeIndex = this.validateActiveIndex(props.activeIndex);\r\n this.state = {\r\n activeIndex,\r\n };\r\n\r\n props.labels.forEach(() => this._anchorRefs.push(React.createRef<HTMLAnchorElement>()));\r\n this._itemKeyboardNavigator = new ItemKeyboardNavigator(this._handleFocusItem, this._activateTab);\r\n }\r\n\r\n private validateActiveIndex(idx?: number): number {\r\n let activeIndex = 0;\r\n if (idx && idx >= 0 && idx < this.props.labels.length)\r\n activeIndex = idx;\r\n return activeIndex;\r\n }\r\n\r\n /* @internal /\r\n public override componentDidMount() {\r\n this._itemKeyboardNavigator.itemCount = this.props.labels.length;\r\n this._itemKeyboardNavigator.orientation = this.props.orientation;\r\n }\r\n\r\n /* @internal /\r\n public override componentDidUpdate(prevProps: MainTabsProps) {\r\n if (prevProps.labels !== this.props.labels)\r\n this._itemKeyboardNavigator.itemCount = this.props.labels.length;\r\n\r\n if (prevProps.orientation !== this.props.orientation)\r\n this._itemKeyboardNavigator.orientation = this.props.orientation;\r\n\r\n if (prevProps.activeIndex !== this.props.activeIndex) {\r\n let hadFocus = false;\r\n const element = this._anchorRefs[this.state.activeIndex].current;\r\n // istanbul ignore else\r\n if (element && document.activeElement === element)\r\n hadFocus = true;\r\n const activeIndex = this.validateActiveIndex(this.props.activeIndex);\r\n\r\n this.setState(\r\n () => ({ activeIndex }),\r\n () => {\r\n // istanbul ignore else\r\n if (hadFocus) {\r\n const newElement = this._anchorRefs[activeIndex].current;\r\n // istanbul ignore else\r\n if (newElement)\r\n newElement.focus();\r\n }\r\n });\r\n }\r\n }\r\n\r\n private _handleFocusItem = (index: number) => {\r\n const itemRef = this._anchorRefs[index];\r\n // istanbul ignore else\r\n if (itemRef && itemRef.current)\r\n itemRef.current.focus();\r\n };\r\n\r\n private _handleTabClick = (index: number) => {\r\n this._activateTab(index);\r\n };\r\n\r\n /* Handle keydown on tabs /\r\n private _handleKeyDownEvent(event: React.KeyboardEvent, index: number) {\r\n this._itemKeyboardNavigator.handleKeyDownEvent(event, index);\r\n }\r\n\r\n /* Handle keyup on tabs /\r\n private _handleKeyUpEvent(event: React.KeyboardEvent, index: number) {\r\n this._itemKeyboardNavigator.handleKeyUpEvent(event, index);\r\n }\r\n\r\n private _activateTab = (index: number) => {\r\n this.props.onActivateTab && this.props.onActivateTab(index);\r\n this.setState({ activeIndex: index });\r\n };\r\n\r\n /* @internal /\r\n public override render(): JSX.Element {\r\n const ulClassNames = classnames(\r\n this.props.mainClassName,\r\n this.props.green && \"uicore-tabs-green\",\r\n this.props.className,\r\n );\r\n\r\n const anyIconsPresent = (this.props.labels.reduce((a, b) => a + (isTabLabelWithIcon(b) ? 1 : 0), 0)) > 0;\r\n\r\n return (\r\n <ul className={ulClassNames} style={this.props.style}\r\n role=\"tablist\"\r\n aria-orientation={this.props.orientation === Orientation.Vertical ? \"vertical\" : \"horizontal\"}\r\n >\r\n {this.props.labels.map((label, index) => {\r\n let disabled;\r\n let tooltipElement: JSX.Element \| undefined;\r\n let title: string \| undefined;\r\n let subLabel: string \| undefined;\r\n let tabId = \"\";\r\n let icon;\r\n if (isTabLabel(label)) {\r\n icon = IconHelper.getIconReactNode(label.icon);\r\n subLabel = label.subLabel;\r\n disabled = label.disabled;\r\n tabId = label.tabId;\r\n if (React.isValidElement(label.tooltip))\r\n tooltipElement = label.tooltip;\r\n else if (typeof label.tooltip === \"string\")\r\n title = label.tooltip;\r\n }\r\n return <li key={index} title={title}\r\n className={classnames(index === this.state.activeIndex && \"core-active\", disabled && \"core-tab-item-disabled\")}\r\n role=\"tab\"\r\n aria-selected={index === this.state.activeIndex}\r\n data-for={`${tabId}`} / to support react-tooltip /\r\n >\r\n {tooltipElement}\r\n {/ eslint-disable-next-line jsx-a11y/anchor-is-valid */}\r\n <a ref={this._anchorRefs[index]}\r\n tabIndex={index === this.state.activeIndex ? 0 : -1}\r\n onClick={() => this._handleTabClick(index)}\r\n onKeyDown={(event) => this._handleKeyDownEvent(event, index)}\r\n onKeyUp={(event) => this._handleKeyUpEvent(event, index)}\r\n data-testid={`${tabId}`}\r\n role=\"button\"\r\n > <div className={classnames(\"uicore-tabs-inline-label\", disabled && \"core-tab-item-disabled\")}>\r\n {anyIconsPresent && <span className=\"uicore-tabs-icon\">{icon}</span>}\r\n <div className=\"uicore-tabs-label-subLabel-container\">\r\n <span>{(typeof label === \"string\") ? label : label.label}</span>\r\n {subLabel && <span className=\"uicore-tabs-subLabel\">{subLabel}</span>}\r\n </div>\r\n </div>\r\n </a>\r\n </li>;\r\n }\r\n )}\r\n </ul>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/core-react/tabs/Tabs.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 Tabs\r\n /\r\n\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Orientation } from \"../enums/Orientation\";\r\nimport { ItemKeyboardNavigator } from \"../focus/ItemKeyboardNavigator\";\r\nimport { IconHelper } from \"../utils/IconHelper\";\r\n\r\n/** TabLabel provides ability to define label, icon, and tooltip for a tab entry. The tooltip can be defined as JSX\|Element\r\n * to support react-tooltip component or a string that will be use to set the title property.\r\n * @public\r\n /\r\nexport interface TabLabel {\r\n label: string;\r\n subLabel?: string;\r\n icon?: string \| JSX.Element;\r\n tabId: string; / optional id added to tab so it can be used by react-tooltip /\r\n /* tooltip allows JSX.Element to support styled tooltips like react-tooltip. /\r\n tooltip?: string \| JSX.Element;\r\n disabled?: boolean;\r\n}\r\n\r\nfunction isTabLabelWithIcon(item: string \| TabLabel): item is TabLabel {\r\n return (typeof item !== \"string\") && !!(item).icon;\r\n}\r\n\r\nfunction isTabLabel(item: string \| TabLabel): item is TabLabel {\r\n return (typeof item !== \"string\");\r\n}\r\n\r\n/* Properties for the [[VerticalTabs]] component\r\n * @public\r\n /\r\nexport interface TabsProps extends React.AllHTMLAttributes<HTMLUListElement>, CommonProps {\r\n /* Text shown for each tab\r\n * @public /\r\n labels: Array<string \| TabLabel>;\r\n /* Handler for activating a tab /\r\n onActivateTab?: (index: number) => any;\r\n /* Index of the initial active tab /\r\n activeIndex?: number;\r\n /* Indicates whether the bar on the active tab is green instead of the default blue /\r\n green?: boolean;\r\n}\r\n\r\n/* State for [[Tabs]] component\r\n * @internal\r\n /\r\ninterface TabsState {\r\n activeIndex: number;\r\n}\r\n\r\n/* Properties for the base [[Tabs]] component\r\n * @public\r\n /\r\nexport interface MainTabsProps extends TabsProps {\r\n /* Main CSS class name /\r\n mainClassName: string;\r\n /* Orientation of the Tabs list /\r\n orientation: Orientation;\r\n}\r\n\r\n/* Tabs meant to represent the current position in a page/section\r\n * @public\r\n /\r\nexport class Tabs extends React.PureComponent<MainTabsProps, TabsState> {\r\n private _anchorRefs: Array<React.RefObject<HTMLAnchorElement>> = [];\r\n private _itemKeyboardNavigator: ItemKeyboardNavigator;\r\n\r\n constructor(props: MainTabsProps) {\r\n super(props);\r\n\r\n const activeIndex = this.validateActiveIndex(props.activeIndex);\r\n this.state = {\r\n activeIndex,\r\n };\r\n\r\n props.labels.forEach(() => this._anchorRefs.push(React.createRef<HTMLAnchorElement>()));\r\n this._itemKeyboardNavigator = new ItemKeyboardNavigator(this._handleFocusItem, this._activateTab);\r\n }\r\n\r\n private validateActiveIndex(idx?: number): number {\r\n let activeIndex = 0;\r\n if (idx && idx >= 0 && idx < this.props.labels.length)\r\n activeIndex = idx;\r\n return activeIndex;\r\n }\r\n\r\n /* @internal /\r\n public override componentDidMount() {\r\n this._itemKeyboardNavigator.itemCount = this.props.labels.length;\r\n this._itemKeyboardNavigator.orientation = this.props.orientation;\r\n }\r\n\r\n /* @internal /\r\n public override componentDidUpdate(prevProps: MainTabsProps) {\r\n if (prevProps.labels !== this.props.labels)\r\n this._itemKeyboardNavigator.itemCount = this.props.labels.length;\r\n\r\n if (prevProps.orientation !== this.props.orientation)\r\n this._itemKeyboardNavigator.orientation = this.props.orientation;\r\n\r\n if (prevProps.activeIndex !== this.props.activeIndex) {\r\n let hadFocus = false;\r\n const element = this._anchorRefs[this.state.activeIndex].current;\r\n // istanbul ignore else\r\n if (element && document.activeElement === element)\r\n hadFocus = true;\r\n const activeIndex = this.validateActiveIndex(this.props.activeIndex);\r\n\r\n this.setState(\r\n () => ({ activeIndex }),\r\n () => {\r\n // istanbul ignore else\r\n if (hadFocus) {\r\n const newElement = this._anchorRefs[activeIndex].current;\r\n // istanbul ignore else\r\n if (newElement)\r\n newElement.focus();\r\n }\r\n });\r\n }\r\n }\r\n\r\n private _handleFocusItem = (index: number) => {\r\n const itemRef = this._anchorRefs[index];\r\n // istanbul ignore else\r\n if (itemRef && itemRef.current)\r\n itemRef.current.focus();\r\n };\r\n\r\n private _handleTabClick = (index: number) => {\r\n this._activateTab(index);\r\n };\r\n\r\n /* Handle keydown on tabs /\r\n private _handleKeyDownEvent(event: React.KeyboardEvent, index: number) {\r\n this._itemKeyboardNavigator.handleKeyDownEvent(event, index);\r\n }\r\n\r\n /* Handle keyup on tabs /\r\n private _handleKeyUpEvent(event: React.KeyboardEvent, index: number) {\r\n this._itemKeyboardNavigator.handleKeyUpEvent(event, index);\r\n }\r\n\r\n private _activateTab = (index: number) => {\r\n this.props.onActivateTab && this.props.onActivateTab(index);\r\n this.setState({ activeIndex: index });\r\n };\r\n\r\n /* @internal /\r\n public override render(): JSX.Element {\r\n const ulClassNames = classnames(\r\n this.props.mainClassName,\r\n this.props.green && \"uicore-tabs-green\",\r\n this.props.className,\r\n );\r\n\r\n const anyIconsPresent = (this.props.labels.reduce((a, b) => a + (isTabLabelWithIcon(b) ? 1 : 0), 0)) > 0;\r\n\r\n return (\r\n <ul className={ulClassNames} style={this.props.style}\r\n role=\"tablist\"\r\n aria-orientation={this.props.orientation === Orientation.Vertical ? \"vertical\" : \"horizontal\"}\r\n >\r\n {this.props.labels.map((label, index) => {\r\n let disabled;\r\n let tooltipElement: JSX.Element \| undefined;\r\n let title: string \| undefined;\r\n let subLabel: string \| undefined;\r\n let tabId = \"\";\r\n let icon;\r\n if (isTabLabel(label)) {\r\n icon = IconHelper.getIconReactNode(label.icon);\r\n subLabel = label.subLabel;\r\n disabled = label.disabled;\r\n tabId = label.tabId;\r\n if (React.isValidElement(label.tooltip))\r\n tooltipElement = label.tooltip;\r\n else if (typeof label.tooltip === \"string\")\r\n title = label.tooltip;\r\n }\r\n return <li key={index} title={title}\r\n className={classnames(index === this.state.activeIndex && \"core-active\", disabled && \"core-tab-item-disabled\")}\r\n role=\"tab\"\r\n aria-selected={index === this.state.activeIndex}\r\n data-for={`${tabId}`} / to support react-tooltip /\r\n >\r\n {tooltipElement}\r\n {/ eslint-disable-next-line jsx-a11y/anchor-is-valid */}\r\n <a ref={this._anchorRefs[index]}\r\n tabIndex={index === this.state.activeIndex ? 0 : -1}\r\n onClick={() => this._handleTabClick(index)}\r\n onKeyDown={(event) => this._handleKeyDownEvent(event, index)}\r\n onKeyUp={(event) => this._handleKeyUpEvent(event, index)}\r\n data-testid={`${tabId}`}\r\n role=\"button\"\r\n > <div className={classnames(\"uicore-tabs-inline-label\", disabled && \"core-tab-item-disabled\")}>\r\n {anyIconsPresent && <span className=\"uicore-tabs-icon\">{icon}</span>}\r\n <div className=\"uicore-tabs-label-subLabel-container\">\r\n <span>{(typeof label === \"string\") ? label : label.label}</span>\r\n {subLabel && <span className=\"uicore-tabs-subLabel\">{subLabel}</span>}\r\n </div>\r\n </div>\r\n </a>\r\n </li>;\r\n }\r\n )}\r\n </ul>\r\n );\r\n }\r\n}\r\n"]}

package/lib/esm/core-react/tabs/classes.scss CHANGED Viewed

@@ -4,5 +4,4 @@
 *--------------------------------------------------------------------------------------------*/
 @import "./index";
-.uicore-tabs-horizontal { @include uicore-tabs-horizontal; }
 .uicore-tabs-vertical   { @include uicore-tabs-vertical; }

package/lib/esm/core-react/tabs/index.scss CHANGED Viewed

@@ -2,5 +2,4 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "./horizontal";
 @import "./vertical";