@itwin/core-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/esm/core-react/tabs/Tabs.js

@@ -0,0 +1,122 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Tabs
+ */
+import classnames from "classnames";
+import * as React from "react";
+import { Orientation } from "../enums/Orientation";
+import { ItemKeyboardNavigator } from "../focus/ItemKeyboardNavigator";
+import { IconHelper } from "../utils/IconHelper";
+function isTabLabelWithIcon(item) {
+    return (typeof item !== "string") && !!(item).icon;
+}
+function isTabLabel(item) {
+    return (typeof item !== "string");
+}
+/** Tabs meant to represent the current position in a page/section
+ * @public
+ */
+export class Tabs extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._anchorRefs = [];
+        this._handleFocusItem = (index) => {
+            const itemRef = this._anchorRefs[index];
+            // istanbul ignore else
+            if (itemRef && itemRef.current)
+                itemRef.current.focus();
+        };
+        this._handleTabClick = (index) => {
+            this._activateTab(index);
+        };
+        this._activateTab = (index) => {
+            this.props.onActivateTab && this.props.onActivateTab(index);
+            this.setState({ activeIndex: index });
+        };
+        const activeIndex = this.validateActiveIndex(props.activeIndex);
+        this.state = {
+            activeIndex,
+        };
+        props.labels.forEach(() => this._anchorRefs.push(React.createRef()));
+        this._itemKeyboardNavigator = new ItemKeyboardNavigator(this._handleFocusItem, this._activateTab);
+    }
+    validateActiveIndex(idx) {
+        let activeIndex = 0;
+        if (idx && idx >= 0 && idx < this.props.labels.length)
+            activeIndex = idx;
+        return activeIndex;
+    }
+    /** @internal */
+    componentDidMount() {
+        this._itemKeyboardNavigator.itemCount = this.props.labels.length;
+        this._itemKeyboardNavigator.orientation = this.props.orientation;
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (prevProps.labels !== this.props.labels)
+            this._itemKeyboardNavigator.itemCount = this.props.labels.length;
+        if (prevProps.orientation !== this.props.orientation)
+            this._itemKeyboardNavigator.orientation = this.props.orientation;
+        if (prevProps.activeIndex !== this.props.activeIndex) {
+            let hadFocus = false;
+            const element = this._anchorRefs[this.state.activeIndex].current;
+            // istanbul ignore else
+            if (element && document.activeElement === element)
+                hadFocus = true;
+            const activeIndex = this.validateActiveIndex(this.props.activeIndex);
+            this.setState(() => ({ activeIndex }), () => {
+                // istanbul ignore else
+                if (hadFocus) {
+                    const newElement = this._anchorRefs[activeIndex].current;
+                    // istanbul ignore else
+                    if (newElement)
+                        newElement.focus();
+                }
+            });
+        }
+    }
+    /** Handle keydown on tabs */
+    _handleKeyDownEvent(event, index) {
+        this._itemKeyboardNavigator.handleKeyDownEvent(event, index);
+    }
+    /** Handle keyup on tabs */
+    _handleKeyUpEvent(event, index) {
+        this._itemKeyboardNavigator.handleKeyUpEvent(event, index);
+    }
+    /** @internal */
+    render() {
+        const ulClassNames = classnames(this.props.mainClassName, this.props.green && "uicore-tabs-green", this.props.className);
+        const anyIconsPresent = (this.props.labels.reduce((a, b) => a + (isTabLabelWithIcon(b) ? 1 : 0), 0)) > 0;
+        return (React.createElement("ul", { className: ulClassNames, style: this.props.style, role: "tablist", "aria-orientation": this.props.orientation === Orientation.Vertical ? "vertical" : "horizontal" }, this.props.labels.map((label, index) => {
+            let disabled;
+            let tooltipElement;
+            let title;
+            let subLabel;
+            let tabId = "";
+            let icon;
+            if (isTabLabel(label)) {
+                icon = IconHelper.getIconReactNode(label.icon);
+                subLabel = label.subLabel;
+                disabled = label.disabled;
+                tabId = label.tabId;
+                if (React.isValidElement(label.tooltip))
+                    tooltipElement = label.tooltip;
+                else if (typeof label.tooltip === "string")
+                    title = label.tooltip;
+            }
+            return React.createElement("li", { key: index, title: title, className: classnames(index === this.state.activeIndex && "core-active", disabled && "core-tab-item-disabled"), role: "tab", "aria-selected": index === this.state.activeIndex, "data-for": `${tabId}` },
+                tooltipElement,
+                React.createElement("a", { ref: this._anchorRefs[index], tabIndex: index === this.state.activeIndex ? 0 : -1, onClick: () => this._handleTabClick(index), onKeyDown: (event) => this._handleKeyDownEvent(event, index), onKeyUp: (event) => this._handleKeyUpEvent(event, index), "data-testid": `${tabId}`, role: "button" },
+                    " ",
+                    React.createElement("div", { className: classnames("uicore-tabs-inline-label", disabled && "core-tab-item-disabled") },
+                        anyIconsPresent && React.createElement("span", { className: "uicore-tabs-icon" }, icon),
+                        React.createElement("div", { className: "uicore-tabs-label-subLabel-container" },
+                            React.createElement("span", null, (typeof label === "string") ? label : label.label),
+                            subLabel && React.createElement("span", { className: "uicore-tabs-subLabel" }, subLabel)))));
+        })));
+    }
+}
+//# sourceMappingURL=Tabs.js.map

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

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

package/lib/esm/core-react/tabs/VerticalTabs.d.ts

@@ -0,0 +1,10 @@
+/** @packageDocumentation
+ * @module Tabs
+ */
+/// <reference types="react" />
+import { TabsProps } from "./Tabs";
+/** Vertical tabs meant to represent the current position in a page/section
+ * @public
+ */
+export declare function VerticalTabs(props: TabsProps): JSX.Element;
+//# sourceMappingURL=VerticalTabs.d.ts.map

package/lib/esm/core-react/tabs/VerticalTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalTabs.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tabs/VerticalTabs.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGzC;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,eAI5C"}

package/lib/esm/core-react/tabs/VerticalTabs.js

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Tabs
+ */
+import * as React from "react";
+import { Tabs } from "./Tabs";
+import { Orientation } from "../enums/Orientation";
+/** Vertical tabs meant to represent the current position in a page/section
+ * @public
+ */
+export function VerticalTabs(props) {
+    return (React.createElement(Tabs, { mainClassName: "uicore-tabs-vertical", orientation: Orientation.Vertical, ...props }));
+}
+//# sourceMappingURL=VerticalTabs.js.map

package/lib/esm/core-react/tabs/VerticalTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalTabs.js","sourceRoot":"","sources":["../../../../src/core-react/tabs/VerticalTabs.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAgB;IAC3C,OAAO,CACL,oBAAC,IAAI,IAAC,aAAa,EAAC,sBAAsB,EAAC,WAAW,EAAE,WAAW,CAAC,QAAQ,KAAM,KAAK,GAAI,CAC5F,CAAC;AACJ,CAAC","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 Tabs\n */\n\nimport * as React from \"react\";\nimport { Tabs, TabsProps } from \"./Tabs\";\nimport { Orientation } from \"../enums/Orientation\";\n\n/** Vertical tabs meant to represent the current position in a page/section\n * @public\n */\nexport function VerticalTabs(props: TabsProps) {\n  return (\n    <Tabs mainClassName=\"uicore-tabs-vertical\" orientation={Orientation.Vertical} {...props} />\n  );\n}\n"]}

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

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./index";
+
+.uicore-tabs-horizontal { @include uicore-tabs-horizontal; }
+.uicore-tabs-vertical   { @include uicore-tabs-vertical; }

package/lib/esm/core-react/tabs/horizontal.scss

@@ -0,0 +1,77 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+@import "./tabs";
+
+@mixin uicore-tabs-horizontal {
+
+  @include uicore-tabs;
+
+  > li {
+
+    display:        inline-block;
+    margin:         0 -1px 0 0;
+    padding:        0;
+
+    > a {
+
+      line-height:          $uicore-line-height;
+      padding:              9px 14px;
+      margin:               0;
+      border-bottom:        0 none transparent;
+      background:           $buic-background-tab-inactive;
+      text-align:           center;
+
+      $bar-size: 2px;
+
+      .uicore-tabs-inline-label {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+      }
+
+      .uicore-tabs-subLabel {
+        white-space: nowrap;
+      }
+
+      &::after {
+
+        width: 100%;
+        height: $bar-size;
+        top: $bar-size;
+        padding-left: $bar-size;
+        padding-right: $bar-size;
+        box-sizing: border-box;
+        background-clip: content-box;
+      }
+
+      &:focus {
+        background-color: $buic-background-active-overlay;
+        outline: none;
+      }
+    }
+
+    &:not(.core-active) {
+      border-bottom: 1px solid $buic-background-dialog-stroke;
+    }
+
+    &:not(:first-child) {
+      border-left: 1px solid $buic-background-dialog-stroke;
+    }
+
+    &.core-active {
+      > a {
+
+        color:              $buic-foreground-primary;
+        background-color:   $buic-background-tab-active;
+
+        &:focus {
+          background-color: $buic-background-active-overlay;
+        }
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+* 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";

package/lib/esm/core-react/tabs/tabs.scss

@@ -0,0 +1,117 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+@import "../icons/variables";
+@import "~@itwin/itwinui-css/scss/style/speed";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+@mixin uicore-tabs {
+
+  display:            block;
+  list-style:         none;
+  padding:            0;
+  margin:             0;
+  box-sizing:         border-box;
+  border:             none;
+  outline:            none;
+
+  > li {
+
+    display:        block;
+    position:       relative;
+    padding:        0;
+    margin:         0;
+
+    &.core-tab-item-disabled {
+      pointer-events: none;
+    }
+
+    > a {
+
+      display:        block;
+      position:       relative;
+      padding:        $uicore-bordered-padding ( $iui-font-size - 1px ) $uicore-unbordered-padding;
+      margin:         0;
+      line-height:    $uicore-line-height;
+      color:          $buic-text-color;
+      cursor:         pointer;
+
+      .uicore-tabs-inline-label {
+
+        &.core-tab-item-disabled {
+          color: $buic-foreground-disabled;
+
+          .uicore-tabs-subLabel {
+            color: $buic-foreground-disabled;
+          }
+        }
+
+        .uicore-tabs-icon {
+          width: ( $uicore-icons-small + 12px );
+          height: ( $uicore-icons-small + 12px );
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      &::after {
+
+        content:            "";
+        position:           absolute;
+        z-index:            1;
+        transition:         all $iui-speed-fast;
+        top:                0;
+        left:               0;
+        background:         $buic-foreground-primary;
+        opacity:            0;
+      }
+
+      &:hover {
+
+        text-decoration:    none;
+        color:              $buic-foreground-activehover;
+
+        &::after {
+
+          opacity:        1;
+        }
+      }
+    }
+
+    &.core-active {
+
+      > a {
+
+        font-weight:        $iui-font-weight-bold;
+
+        &::after {
+
+          opacity:        1;
+        }
+      }
+    }
+
+    .uicore-tabs-label-subLabel-container {
+      display: flex;
+      flex-direction: column;
+      .uicore-tabs-subLabel {
+        font-size: $iui-font-size-small;
+        font-weight: $iui-font-weight-semibold;
+      }
+    }
+    &:not(.core-active) {
+      .uicore-tabs-label-subLabel-container {
+        .uicore-tabs-subLabel {
+          color: $buic-text-color-muted;
+          font-weight: $iui-font-weight-light;
+        }
+      }
+    }
+  }
+
+  &.uicore-tabs-green > li > a::after {
+    background-color:     $buic-foreground-success;
+  }
+}

package/lib/esm/core-react/tabs/vertical.scss

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+@import "./tabs";
+
+@mixin uicore-tabs-vertical {
+
+  @include uicore-tabs;
+
+  > li {
+
+    display:        block;
+    margin:         0;
+    padding:        0;
+    width:          100%;
+
+    > a {
+
+      line-height:            $uicore-line-height;
+      padding:                14px 20px;
+      background:             $buic-background-tab-inactive;
+      border-width:           0;
+
+      $bar-size: 2px;
+
+      .uicore-tabs-inline-label {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+      }
+
+      &::after {
+
+        height:             100%;
+        width:              $bar-size;
+        left:               $bar-size;
+        padding-top:        $bar-size;
+        padding-bottom:     $bar-size;
+        background-clip:    content-box;
+        box-sizing:         border-box;
+      }
+
+      &:focus {
+        background-color: $buic-background-active-overlay;
+        outline: none;
+      }
+    }
+
+    &.core-active {
+      > a {
+
+        color:              $buic-foreground-primary;
+        background-color:   $buic-background-tab-active;
+
+        &:focus {
+          background-color: $buic-background-active-overlay;
+        }
+      }
+    }
+  }
+
+}

package/lib/esm/core-react/text/BlockText.d.ts

@@ -0,0 +1,10 @@
+/** @packageDocumentation
+ * @module Text
+ */
+/// <reference types="react" />
+import { TextProps } from "./TextProps";
+/** Styled block text React functional component
+ * @public
+ */
+export declare function BlockText(props: TextProps): JSX.Element;
+//# sourceMappingURL=BlockText.d.ts.map

package/lib/esm/core-react/text/BlockText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockText.d.ts","sourceRoot":"","sources":["../../../../src/core-react/text/BlockText.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,eAEzC"}

package/lib/esm/core-react/text/BlockText.js

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Text
+ */
+import * as React from "react";
+import { StyledText } from "./StyledText";
+/** Styled block text React functional component
+ * @public
+ */
+export function BlockText(props) {
+    return React.createElement(StyledText, { ...props, mainClassName: "uicore-text-block" });
+}
+//# sourceMappingURL=BlockText.js.map

package/lib/esm/core-react/text/BlockText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockText.js","sourceRoot":"","sources":["../../../../src/core-react/text/BlockText.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,KAAgB;IACxC,OAAO,oBAAC,UAAU,OAAK,KAAK,EAAE,aAAa,EAAC,mBAAmB,GAAG,CAAC;AACrE,CAAC","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 Text\n */\n\nimport * as React from \"react\";\nimport { StyledText } from \"./StyledText\";\nimport { TextProps } from \"./TextProps\";\n\n/** Styled block text React functional component\n * @public\n */\nexport function BlockText(props: TextProps) {\n  return <StyledText {...props} mainClassName=\"uicore-text-block\" />;\n}\n"]}

package/lib/esm/core-react/text/BodyText.d.ts

@@ -0,0 +1,10 @@
+/** @packageDocumentation
+ * @module Text
+ */
+/// <reference types="react" />
+import { TextProps } from "./TextProps";
+/** Styled body text React functional component
+ * @public
+ */
+export declare function BodyText(props: TextProps): JSX.Element;
+//# sourceMappingURL=BodyText.d.ts.map

package/lib/esm/core-react/text/BodyText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BodyText.d.ts","sourceRoot":"","sources":["../../../../src/core-react/text/BodyText.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,eAExC"}

package/lib/esm/core-react/text/BodyText.js

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Text
+ */
+import * as React from "react";
+import { StyledText } from "./StyledText";
+/** Styled body text React functional component
+ * @public
+ */
+export function BodyText(props) {
+    return React.createElement(StyledText, { ...props, mainClassName: "uicore-text-body" });
+}
+//# sourceMappingURL=BodyText.js.map

package/lib/esm/core-react/text/BodyText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BodyText.js","sourceRoot":"","sources":["../../../../src/core-react/text/BodyText.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAgB;IACvC,OAAO,oBAAC,UAAU,OAAK,KAAK,EAAE,aAAa,EAAC,kBAAkB,GAAG,CAAC;AACpE,CAAC","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 Text\n */\n\nimport * as React from \"react\";\nimport { StyledText } from \"./StyledText\";\nimport { TextProps } from \"./TextProps\";\n\n/** Styled body text React functional component\n * @public\n */\nexport function BodyText(props: TextProps) {\n  return <StyledText {...props} mainClassName=\"uicore-text-body\" />;\n}\n"]}

package/lib/esm/core-react/text/DisabledText.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TextProps } from "./TextProps";
+/** Styled disabled text React functional component
+ * @public
+ */
+export declare function DisabledText(props: TextProps): JSX.Element;
+//# sourceMappingURL=DisabledText.d.ts.map

package/lib/esm/core-react/text/DisabledText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisabledText.d.ts","sourceRoot":"","sources":["../../../../src/core-react/text/DisabledText.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,eAE5C"}

package/lib/esm/core-react/text/DisabledText.js

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Text
+ */
+import * as React from "react";
+import { StyledText } from "./StyledText";
+/** Styled disabled text React functional component
+ * @public
+ */
+export function DisabledText(props) {
+    return React.createElement(StyledText, { ...props, mainClassName: "uicore-text-disabled" });
+}
+//# sourceMappingURL=DisabledText.js.map

package/lib/esm/core-react/text/DisabledText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisabledText.js","sourceRoot":"","sources":["../../../../src/core-react/text/DisabledText.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAgB;IAC3C,OAAO,oBAAC,UAAU,OAAK,KAAK,EAAE,aAAa,EAAC,sBAAsB,GAAG,CAAC;AACxE,CAAC","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 Text\n */\nimport * as React from \"react\";\nimport { StyledText } from \"./StyledText\";\nimport { TextProps } from \"./TextProps\";\n\n/** Styled disabled text React functional component\n * @public\n */\nexport function DisabledText(props: TextProps) {\n  return <StyledText {...props} mainClassName=\"uicore-text-disabled\" />;\n}\n"]}

package/lib/esm/core-react/text/FilteredText.d.ts

@@ -0,0 +1,25 @@
+/** @packageDocumentation
+ * @module Text
+ */
+import * as React from "react";
+import { IMatch } from "@itwin/appui-abstract";
+import { CommonProps } from "../utils/Props";
+import "./FilteredText.scss";
+/** Props supported by [FilteredText] component
+ * @alpha
+ */
+export interface FilteredTextProps extends CommonProps {
+    /** string that matched a filter string */
+    value: string;
+    /** define array of start and end positions of filter matches. */
+    matches?: IMatch[];
+    /** holds class name for matching span text. */
+    matchClassName?: string;
+    /** holds style for matching span text. */
+    matchStyle?: React.CSSProperties;
+}
+/** Component used to highlight filter matches within a text string.
+ * @alpha
+ */
+export declare function FilteredText(props: FilteredTextProps): JSX.Element;
+//# sourceMappingURL=FilteredText.d.ts.map

package/lib/esm/core-react/text/FilteredText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilteredText.d.ts","sourceRoot":"","sources":["../../../../src/core-react/text/FilteredText.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,qBAAqB,CAAC;AAE7B;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAuBpD"}

package/lib/esm/core-react/text/FilteredText.js

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Text
+ */
+// cSpell:ignore focusvalue
+import * as React from "react";
+import classnames from "classnames";
+import "./FilteredText.scss";
+/** Component used to highlight filter matches within a text string.
+ * @alpha
+ */
+export function FilteredText(props) {
+    const { value, className, matches, matchClassName, matchStyle, ...otherProps } = props;
+    // istanbul ignore else
+    if (matches && matches.length > 0) {
+        const spans = [];
+        let startPos = 0;
+        for (const span of matches) {
+            // istanbul ignore else
+            if (span.start !== startPos)
+                spans.push(React.createElement("span", { key: startPos, className: "uicore-partial-filtered-text" }, value.substr(startPos, span.start - startPos)));
+            spans.push(React.createElement("span", { key: span.start, style: matchStyle, className: classnames("uicore-filtered-text-match", matchClassName) }, value.substr(span.start, span.end - span.start)));
+            startPos = span.end;
+        }
+        const endPos = value.length;
+        // istanbul ignore else
+        if (startPos < endPos) {
+            spans.push(React.createElement("span", { key: startPos, className: "uicore-partial-filtered-text" }, value.substr(startPos, endPos - startPos)));
+        }
+        return React.createElement("div", { ...otherProps, className: classnames("uicore-filtered-text", className), title: value }, spans);
+    }
+    return React.createElement("span", { ...otherProps, className: classnames("uicore-filtered-text", className), title: value }, value);
+}
+//# sourceMappingURL=FilteredText.js.map