@itwin/core-react 4.17.0 → 5.0.0-dev.2

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

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

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

@@ -1,55 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-@import "../z-index";
-@import "../style/themecolors";
-@import "../icons/variables";
-
-.core-radial-menu {
-  visibility: hidden;
-  position: fixed;
-
-  @include uicore-z-index(dialog);
-
-  &.opened {
-    visibility: inherit;
-  }
-
-  > .core-radial-menu-container {
-    margin-left: -50%;
-    margin-top: -50%;
-
-    .core-radial-menu-sector {
-      stroke: $buic-background-panel-stroke;
-      fill: $buic-background-control;
-      stroke-width: 1px;
-
-      &.selected {
-        fill: $buic-row-selection;
-      }
-    }
-
-    .core-radial-menu-button-svg {
-      .core-radial-menu-button-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .core-radial-menu-button-icon {
-          height: $uicore-icons-small;
-          width: $uicore-icons-small;
-          line-height: $uicore-icons-small;
-          color: $buic-icon-color;
-        }
-
-        .core-radial-menu-button-content {
-          cursor: default;
-          color: var(--iui-color-text);
-          font-size: var(--iui-font-size-0);
-          user-select: none;
-        }
-      }
-    }
-  }
-}

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

@@ -1,51 +0,0 @@
-/** @packageDocumentation
- * @module SearchBox
- */
-import "./SearchBox.scss";
-import * as React from "react";
-import type { CommonProps } from "../utils/Props";
-/** Properties for [[SearchBox]] component
- * @public
- * @deprecated in 4.12.0. Props of deprecated component {@link SearchBox}.
- */
-export interface SearchBoxProps extends CommonProps {
-    /** Value to set SearchBox to initially */
-    initialValue?: string;
-    /** Placeholder value to show in gray before anything is entered in */
-    placeholder?: string;
-    /** Triggered when the content of SearchBox is changed */
-    onValueChanged: (value: string) => void;
-    /** Frequency to poll for changes in value, in milliseconds */
-    valueChangedDelay?: number;
-    /** Listens for <Enter> keypress */
-    onEnterPressed?: () => void;
-    /** Listens for <Esc> keypress */
-    onEscPressed?: () => void;
-    /** Listens for onClick event for Clear (x) icon */
-    onClear?: () => void;
-}
-interface SearchBoxState {
-    value: string;
-}
-/** 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.
- * @public
- * @deprecated in 4.12.0. Use {@link https://itwinui.bentley.com/docs/searchbox iTwinUI SearchBox} instead.
- */
-export declare class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
-    private _inputElement;
-    private _timeoutId;
-    readonly state: Readonly<SearchBoxState>;
-    constructor(props: SearchBoxProps);
-    render(): React.ReactNode;
-    /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */
-    private _onValueChanged;
-    private _trackChange;
-    private _handleKeyDown;
-    private _handleIconClick;
-    private _unsetTimeout;
-    componentWillUnmount(): void;
-    focus(): void;
-}
-export {};
-//# sourceMappingURL=SearchBox.d.ts.map

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

@@ -1 +0,0 @@
-{"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,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AASlD;;;GAGG;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,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,SAAyB,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,CAEtD;gBAEU,KAAK,EAAE,cAAc;IAIjB,MAAM,IAAI,KAAK,CAAC,SAAS;IAuCzC,6HAA6H;IAC7H,OAAO,CAAC,eAAe,CAarB;IACF,OAAO,CAAC,YAAY,CAclB;IAEF,OAAO,CAAC,cAAc,CASpB;IAEF,OAAO,CAAC,gBAAgB,CAQtB;IAEF,OAAO,CAAC,aAAa,CAKnB;IAEc,oBAAoB;IAI7B,KAAK;CAGb"}

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

@@ -1,115 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module SearchBox
- */
-import "./SearchBox.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Key } from "ts-key-enum";
-import { Input } from "@itwin/itwinui-react";
-import { Icon } from "../icons/IconComponent";
-import { SvgClose, SvgSearch } from "@itwin/itwinui-icons-react";
-import { useTranslation } from "../l10n/useTranslation";
-/** 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.
- * @public
- * @deprecated in 4.12.0. Use {@link https://itwinui.bentley.com/docs/searchbox iTwinUI SearchBox} instead.
- */
-export class SearchBox extends React.Component {
-    constructor(props) {
-        super(props);
-        this._inputElement = null;
-        this._timeoutId = 0;
-        this.state = {
-            value: this.props.initialValue || "",
-        };
-        /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */
-        this._onValueChanged = (value, previousValue) => {
-            if (value === previousValue)
-                return;
-            this.setState((_prevState) => {
-                return {
-                    value,
-                };
-            }, () => {
-                this.props.onValueChanged(this.state.value);
-            });
-        };
-        this._trackChange = (_event) => {
-            let value = "";
-            const previousValue = this.state.value;
-            if (this._inputElement)
-                value = this._inputElement.value;
-            if (this.props.valueChangedDelay) {
-                this._unsetTimeout();
-                this._timeoutId = window.setTimeout(() => {
-                    this._onValueChanged(value, previousValue);
-                }, this.props.valueChangedDelay);
-            }
-            else {
-                this._onValueChanged(value, previousValue);
-            }
-        };
-        this._handleKeyDown = (e) => {
-            switch (e.key) {
-                case Key.Escape.valueOf():
-                    if (this.props.onEscPressed)
-                        this.props.onEscPressed();
-                    break;
-                case Key.Enter.valueOf():
-                    if (this.props.onEnterPressed)
-                        this.props.onEnterPressed();
-                    break;
-            }
-        };
-        this._handleIconClick = (_event) => {
-            if (this._inputElement) {
-                const clear = this.state.value !== "";
-                this._inputElement.value = "";
-                if (clear && this.props.onClear)
-                    this.props.onClear();
-                this._inputElement.focus();
-            }
-            this._trackChange();
-        };
-        this._unsetTimeout = () => {
-            if (this._timeoutId) {
-                window.clearTimeout(this._timeoutId);
-                this._timeoutId = 0;
-            }
-        };
-    }
-    render() {
-        const searchClassName = classnames("core-searchbox", this.props.className);
-        const emptyString = this.state.value === "";
-        const iconClassName = classnames("core-searchbox-icon", "icon");
-        const iconSpec = emptyString ? React.createElement(SvgSearch, null) : React.createElement(SvgClose, null);
-        return (React.createElement("div", { className: searchClassName, style: this.props.style, "data-testid": "core-searchbox-instance" },
-            React.createElement(SearchBoxInput, { 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, role: "searchbox", "data-testid": "core-searchbox-input" }),
-            React.createElement(SearchBoxButton, { className: "core-searchbox-button", onClick: this._handleIconClick, role: "button", tabIndex: -1, emptyString: emptyString },
-                React.createElement("span", { className: iconClassName },
-                    React.createElement(Icon, { iconSpec: iconSpec })))));
-    }
-    componentWillUnmount() {
-        this._unsetTimeout();
-    }
-    focus() {
-        if (this._inputElement)
-            this._inputElement.focus();
-    }
-}
-const SearchBoxInput = React.forwardRef(function SearchBoxInput({ placeholder, ...props }, ref) {
-    const { translate } = useTranslation();
-    return (React.createElement(Input, { ref: ref, placeholder: placeholder || translate("general.search"), ...props }));
-});
-function SearchBoxButton({ emptyString, ...props }) {
-    const { translate } = useTranslation();
-    const buttonTitle = translate(emptyString ? "general.search" : "general.clear");
-    return React.createElement("div", { title: buttonTitle, ...props });
-}
-//# sourceMappingURL=SearchBox.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../src/core-react/searchbox/SearchBox.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module SearchBox\n */\n\nimport \"./SearchBox.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { CommonProps } from \"../utils/Props\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport type { IconSpec } from \"../icons/IconComponent\";\nimport { Icon } from \"../icons/IconComponent\";\nimport { SvgClose, SvgSearch } from \"@itwin/itwinui-icons-react\";\nimport { useTranslation } from \"../l10n/useTranslation\";\n\n/* eslint-disable deprecation/deprecation */\n\n/** Properties for [[SearchBox]] component\n * @public\n * @deprecated in 4.12.0. Props of deprecated component {@link SearchBox}.\n */\nexport interface SearchBoxProps extends CommonProps {\n  /** Value to set SearchBox to initially */\n  initialValue?: string;\n  /** Placeholder value to show in gray before anything is entered in */\n  placeholder?: string;\n  /** Triggered when the content of SearchBox is changed */\n  onValueChanged: (value: string) => void;\n  /** Frequency to poll for changes in value, in milliseconds */\n  valueChangedDelay?: number;\n  /** Listens for <Enter> keypress */\n  onEnterPressed?: () => void;\n  /** Listens for <Esc> keypress */\n  onEscPressed?: () => void;\n  /** Listens for onClick event for Clear (x) icon */\n  onClear?: () => void;\n}\n\ninterface SearchBoxState {\n  value: string;\n}\n\n/** Input box for entering text to search for.\n * The SearchBox has an icon right-justified and bounded by the box and shows a Search or Clear icon.\n * @public\n * @deprecated in 4.12.0. Use {@link https://itwinui.bentley.com/docs/searchbox iTwinUI SearchBox} instead.\n */\nexport class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {\n  private _inputElement: HTMLInputElement | null = null;\n  private _timeoutId: number = 0;\n\n  public override readonly state: Readonly<SearchBoxState> = {\n    value: this.props.initialValue || \"\",\n  };\n\n  constructor(props: SearchBoxProps) {\n    super(props);\n  }\n\n  public override render(): React.ReactNode {\n    const searchClassName = classnames(\"core-searchbox\", this.props.className);\n    const emptyString = this.state.value === \"\";\n    const iconClassName = classnames(\"core-searchbox-icon\", \"icon\");\n    const iconSpec: IconSpec = emptyString ? <SvgSearch /> : <SvgClose />;\n    return (\n      <div\n        className={searchClassName}\n        style={this.props.style}\n        data-testid=\"core-searchbox-instance\"\n      >\n        <SearchBoxInput\n          defaultValue={this.props.initialValue}\n          ref={(el) => {\n            this._inputElement = el;\n          }}\n          onChange={this._trackChange}\n          onKeyDown={this._handleKeyDown}\n          onPaste={this._trackChange}\n          onCut={this._trackChange}\n          placeholder={this.props.placeholder}\n          role=\"searchbox\"\n          data-testid=\"core-searchbox-input\"\n        />\n        <SearchBoxButton\n          className=\"core-searchbox-button\"\n          onClick={this._handleIconClick}\n          role=\"button\"\n          tabIndex={-1}\n          emptyString={emptyString}\n        >\n          <span className={iconClassName}>\n            <Icon iconSpec={iconSpec} />\n          </span>\n        </SearchBoxButton>\n      </div>\n    );\n  }\n\n  /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */\n  private _onValueChanged = (value: string, previousValue: string) => {\n    if (value === previousValue) return;\n\n    this.setState(\n      (_prevState) => {\n        return {\n          value,\n        };\n      },\n      () => {\n        this.props.onValueChanged(this.state.value);\n      }\n    );\n  };\n  private _trackChange = (_event?: any): void => {\n    let value = \"\";\n    const previousValue = this.state.value;\n\n    if (this._inputElement) value = this._inputElement.value;\n\n    if (this.props.valueChangedDelay) {\n      this._unsetTimeout();\n      this._timeoutId = window.setTimeout(() => {\n        this._onValueChanged(value, previousValue);\n      }, this.props.valueChangedDelay);\n    } else {\n      this._onValueChanged(value, previousValue);\n    }\n  };\n\n  private _handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case Key.Escape.valueOf():\n        if (this.props.onEscPressed) this.props.onEscPressed();\n        break;\n      case Key.Enter.valueOf():\n        if (this.props.onEnterPressed) this.props.onEnterPressed();\n        break;\n    }\n  };\n\n  private _handleIconClick = (_event: React.MouseEvent<HTMLElement>): void => {\n    if (this._inputElement) {\n      const clear = this.state.value !== \"\";\n      this._inputElement.value = \"\";\n      if (clear && this.props.onClear) this.props.onClear();\n      this._inputElement.focus();\n    }\n    this._trackChange();\n  };\n\n  private _unsetTimeout = (): void => {\n    if (this._timeoutId) {\n      window.clearTimeout(this._timeoutId);\n      this._timeoutId = 0;\n    }\n  };\n\n  public override componentWillUnmount() {\n    this._unsetTimeout();\n  }\n\n  public focus() {\n    if (this._inputElement) this._inputElement.focus();\n  }\n}\n\nconst SearchBoxInput = React.forwardRef<\n  HTMLInputElement,\n  React.ComponentProps<typeof Input>\n>(function SearchBoxInput({ placeholder, ...props }, ref) {\n  const { translate } = useTranslation();\n  return (\n    <Input\n      ref={ref}\n      placeholder={placeholder || translate(\"general.search\")}\n      {...props}\n    />\n  );\n});\n\nfunction SearchBoxButton({\n  emptyString,\n  ...props\n}: React.ComponentProps<\"div\"> & { emptyString: boolean }) {\n  const { translate } = useTranslation();\n  const buttonTitle = translate(\n    emptyString ? \"general.search\" : \"general.clear\"\n  );\n  return <div title={buttonTitle} {...props} />;\n}\n"]}

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

@@ -1,47 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-@import "../style/themecolors";
-
-.core-searchbox {
-  font-family: var(--iui-font-sans);
-  display: flex;
-  align-items: center;
-  position: relative;
-  //default values (height, width, font-size, color)
-  height: 28px;
-  width: 12em;
-  font-size: var(--iui-font-size-1);
-  color: var(--iui-color-text);
-
-  input {
-    min-height: 28px;
-    padding: var(--iui-size-3xs) 2em var(--iui-size-3xs) 12px; //12px from design guide
-    height: 100%;
-    margin: 0;
-    color: inherit;
-    font-size: inherit;
-    box-sizing: border-box;
-  }
-
-  .core-searchbox-button {
-    position: absolute;
-    height: 100%;
-    right: 0;
-    width: 2em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    cursor: pointer;
-
-    &:hover span {
-      color: var(--iui-color-text-accent);
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-}

package/lib/esm/core-react/settings/SettingsContainer.d.ts

@@ -1,35 +0,0 @@
-/** @packageDocumentation
- * @module Settings
- */
-import "./SettingsContainer.scss";
-import * as React from "react";
-import type { SettingsManager, SettingsTabEntry } from "./SettingsManager";
-/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.
- * @public
- * @deprecated in 4.16.0. Use {@link SettingsManager} instead.
- */
-export declare function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void): void;
-/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.
- * @public
- * @deprecated in 4.16.0. Use {@link SettingsManager} instead.
- */
-export declare function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void): void;
-/**
- * Properties of {@link SettingsContainer} component.
- * @public
- * @deprecated in 4.16.0. Props of deprecated component {@link SettingsContainer}.
- */
-export interface SettingsContainerProps {
-    tabs: SettingsTabEntry[];
-    currentSettingsTab?: SettingsTabEntry;
-    onSettingsTabSelected?: (tab: SettingsTabEntry) => void;
-    settingsManager: SettingsManager;
-    showHeader?: boolean;
-}
-/** Component that displays setting tabs on the left and the setting page on the right.
- * Note: that SettingsContainer is not rendered if tabs array is empty.
- * @public
- * @deprecated in 4.16.0. Used internally by {@link @itwin/appui-react#SettingsModalFrontstage}.
- */
-export declare const SettingsContainer: ({ tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader, }: SettingsContainerProps) => React.JSX.Element;
-//# sourceMappingURL=SettingsContainer.d.ts.map

package/lib/esm/core-react/settings/SettingsContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SettingsContainer.d.ts","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsContainer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAmB3E;;;GAGG;AACH,wBAAgB,qCAAqC,CACnD,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,aAAa,CAAC,EAAE,GAAG,KAAK,IAAI,QAS5E;AAED;;;GAGG;AACH,wBAAgB,qCAAqC,CACnD,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,CACZ,gBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,EACrC,sBAAsB,CAAC,EAAE,MAAM,KAC5B,IAAI,QASV;AAED;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,gBAAgB,EAAE,CAAC;IAEzB,kBAAkB,CAAC,EAAE,gBAAgB,CAAC;IAEtC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAExD,eAAe,EAAE,eAAe,CAAC;IAEjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,sFAM3B,sBAAsB,sBAyIxB,CAAC"}

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

@@ -1,149 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Settings
- */
-import "./SettingsContainer.scss";
-import * as React from "react";
-import { VerticalTabs } from "../tabs/VerticalTabs";
-import { ConditionalBooleanValue } from "@itwin/appui-abstract";
-/* eslint-disable deprecation/deprecation */
-/*  ---------------------------------------------------------------------------------------------------
-// A typical implementation of a saveFunction callback
-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.
-    UiFramework.dialogs.modal.openDialog(<CustomSavePromptModalDialog customProps={customProps}
-      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);
-    return;
-  }
-  afterSaveFunction(args);
-}, []);
----------------------------------------------------------------------------------------------------------- */
-/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.
- * @public
- * @deprecated in 4.16.0. Use {@link SettingsManager} instead.
- */
-export function useSaveBeforeClosingSettingsContainer(settingsManager, saveFunction) {
-    React.useEffect(() => {
-        return settingsManager.onProcessSettingsContainerClose.addListener(({ closeFunc, closeFuncArgs }) => {
-            saveFunction(closeFunc, closeFuncArgs);
-        });
-    }, [saveFunction, settingsManager]);
-}
-/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.
- * @public
- * @deprecated in 4.16.0. Use {@link SettingsManager} instead.
- */
-export function useSaveBeforeActivatingNewSettingsTab(settingsManager, saveFunction) {
-    React.useEffect(() => {
-        return settingsManager.onProcessSettingsTabActivation.addListener(({ tabSelectionFunc, requestedSettingsTabId }) => {
-            saveFunction(tabSelectionFunc, requestedSettingsTabId);
-        });
-    }, [saveFunction, settingsManager]);
-}
-/** Component that displays setting tabs on the left and the setting page on the right.
- * Note: that SettingsContainer is not rendered if tabs array is empty.
- * @public
- * @deprecated in 4.16.0. Used internally by {@link @itwin/appui-react#SettingsModalFrontstage}.
- */
-export const SettingsContainer = ({ tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader, }) => {
-    // sort the tabs based on itemPriority
-    tabs = tabs.sort((a, b) => a.itemPriority - b.itemPriority);
-    const [openTab, setOpenTab] = React.useState(() => {
-        if (currentSettingsTab &&
-            !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))
-            return currentSettingsTab;
-        else
-            return tabs[0];
-    });
-    const processTabSelection = React.useCallback((tab) => {
-        if (ConditionalBooleanValue.getValue(tab.isDisabled))
-            return;
-        onSettingsTabSelected && onSettingsTabSelected(tab);
-        setOpenTab(tab);
-    }, [onSettingsTabSelected]);
-    const processTabSelectionById = React.useCallback((tabId) => {
-        const tabToActivate = tabs.find((tab) => tab.tabId === tabId);
-        tabToActivate && processTabSelection(tabToActivate);
-    }, [processTabSelection, tabs]);
-    const onActivateTab = React.useCallback((tabIndex) => {
-        const selectedTab = tabs[tabIndex];
-        if (openTab && openTab.pageWillHandleCloseRequest)
-            settingsManager.onProcessSettingsTabActivation.emit({
-                requestedSettingsTabId: selectedTab.tabId,
-                tabSelectionFunc: processTabSelectionById,
-            });
-        else
-            processTabSelection(selectedTab);
-    }, [
-        openTab,
-        processTabSelection,
-        processTabSelectionById,
-        settingsManager,
-        tabs,
-    ]);
-    React.useEffect(() => {
-        return settingsManager.onActivateSettingsTab.addListener(({ settingsTabId }) => {
-            const idToFind = settingsTabId.toLowerCase();
-            let tabToActivate = tabs.find((tab) => tab.tabId.toLowerCase() === idToFind);
-            if (!tabToActivate)
-                tabToActivate = tabs.find((tab) => tab.label.toLowerCase() === idToFind);
-            if (tabToActivate) {
-                if (openTab && openTab.pageWillHandleCloseRequest)
-                    settingsManager.onProcessSettingsTabActivation.emit({
-                        requestedSettingsTabId: tabToActivate.tabId,
-                        tabSelectionFunc: processTabSelectionById,
-                    });
-                else
-                    processTabSelection(tabToActivate);
-            }
-        });
-    }, [
-        openTab,
-        processTabSelection,
-        processTabSelectionById,
-        settingsManager,
-        settingsManager.onActivateSettingsTab,
-        tabs,
-    ]);
-    React.useEffect(() => {
-        return settingsManager.onCloseSettingsContainer.addListener(({ closeFunc, closeFuncArgs }) => {
-            if (openTab && openTab.pageWillHandleCloseRequest)
-                settingsManager.onProcessSettingsContainerClose.emit({
-                    closeFunc,
-                    closeFuncArgs,
-                });
-            else
-                closeFunc(closeFuncArgs);
-        });
-    }, [
-        openTab,
-        processTabSelection,
-        settingsManager,
-        settingsManager.onActivateSettingsTab,
-        tabs,
-    ]);
-    const labels = tabs.map((tab) => {
-        return {
-            label: tab.label,
-            subLabel: tab.subLabel,
-            icon: tab.icon,
-            tooltip: tab.tooltip,
-            tabId: tab.tabId,
-            disabled: ConditionalBooleanValue.getValue(tab.isDisabled),
-        };
-    });
-    const activeIndex = tabs.findIndex((tab) => tab.tabId === openTab.tabId);
-    return (React.createElement("div", { className: "core-settings-container" },
-        React.createElement("div", { className: "core-settings-container-left" },
-            React.createElement(VerticalTabs, { labels: labels, activeIndex: activeIndex, onActivateTab: onActivateTab })),
-        React.createElement("div", { className: "core-settings-container-right" },
-            showHeader && (React.createElement("div", { className: "core-settings-container-right-header" },
-                React.createElement("span", { className: "core-settings-container-main-header" }, openTab.label),
-                openTab.subLabel && (React.createElement("span", { className: "core-settings-container-main-sub-header" }, openTab.subLabel)))),
-            React.createElement("div", { className: "core-settings-container-right-contents" }, openTab.page))));
-};
-//# sourceMappingURL=SettingsContainer.js.map

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

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

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

@@ -1,68 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-
-@import "../style/themecolors";
-
-div.core-settings-container {
-  display: flex;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-  }
-
-  .core-settings-container-left {
-    min-width: 15em;
-    height: 100%;
-    overflow: auto;
-    border-right: 2px solid var(--iui-color-border);
-
-    > .uicore-tabs-vertical {
-      font-size: 16px;
-    }
-  }
-  .core-settings-container-right {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background: var(--iui-color-background);
-    align-content: center;
-
-    .core-settings-container-right-header {
-      display: flex;
-      width: 100%;
-      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;
-
-      .core-settings-container-main-sub-header {
-        position: relative;
-        padding-left: 20px;
-
-        &::before {
-          content: "-";
-          position: absolute;
-          left: 10px;
-          transform: translateX(-50%);
-        }
-      }
-    }
-
-    .core-settings-container-right-contents {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-    }
-  }
-}