@itwin/components-react 4.0.0-dev.2 → 4.0.0-dev.4

package/lib/esm/components-react/toolbar/groupPanel/tool/Tool.d.ts

@@ -1,39 +1,39 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Tool.scss";
-import * as React from "react";
-import { ActionButton, GroupButton } from "@itwin/appui-abstract";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[GroupTool]] component.
- * @internal
- */
-export interface GroupToolProps extends CommonProps {
-    /** Additional content, besides icon and label. */
-    children?: React.ReactNode;
-    /** Tool icon. */
-    icon?: React.ReactNode;
-    /** Describes if the item is active. */
-    isActive?: boolean;
-    /** Describes if the item is disabled. */
-    isDisabled?: boolean;
-    /** Describes if the item is focused. */
-    isFocused?: boolean;
-    /** Tool label. */
-    label?: string;
-    /** Function called when the item is clicked. */
-    onClick?: (item: GroupButton | ActionButton) => void;
-    /** Function called when pointer up event is received. */
-    onPointerUp?: (item: GroupButton | ActionButton) => void;
-    /** A badge to draw. */
-    badge?: React.ReactNode;
-    /** GroupButton item */
-    item: GroupButton | ActionButton;
-    /** Optional function to call on any KeyDown events processed by toolbar */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-}
-/** Tool entry of tool group panel. Used in [[GroupColumn]].
- * @internal
- */
-export declare function GroupTool(props: GroupToolProps): JSX.Element;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Tool.scss";
+import * as React from "react";
+import { ActionButton, GroupButton } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[GroupTool]] component.
+ * @internal
+ */
+export interface GroupToolProps extends CommonProps {
+    /** Additional content, besides icon and label. */
+    children?: React.ReactNode;
+    /** Tool icon. */
+    icon?: React.ReactNode;
+    /** Describes if the item is active. */
+    isActive?: boolean;
+    /** Describes if the item is disabled. */
+    isDisabled?: boolean;
+    /** Describes if the item is focused. */
+    isFocused?: boolean;
+    /** Tool label. */
+    label?: string;
+    /** Function called when the item is clicked. */
+    onClick?: (item: GroupButton | ActionButton) => void;
+    /** Function called when pointer up event is received. */
+    onPointerUp?: (item: GroupButton | ActionButton) => void;
+    /** A badge to draw. */
+    badge?: React.ReactNode;
+    /** GroupButton item */
+    item: GroupButton | ActionButton;
+    /** Optional function to call on any KeyDown events processed by toolbar */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+/** Tool entry of tool group panel. Used in [[GroupColumn]].
+ * @internal
+ */
+export declare function GroupTool(props: GroupToolProps): JSX.Element;
 //# sourceMappingURL=Tool.d.ts.map

package/lib/esm/components-react/toolbar/groupPanel/tool/Tool.js

@@ -1,37 +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 Toolbar
- */
-import "./Tool.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { useTargeted } from "@itwin/core-react";
-/** Tool entry of tool group panel. Used in [[GroupColumn]].
- * @internal
- */
-export function GroupTool(props) {
-    const ref = React.useRef(null);
-    const targeted = useTargeted(ref);
-    const itemClassName = classnames("components-toolbar-item-expandable-group-tool-item", props.isActive && "components-active", props.isFocused && "components-focused", props.isDisabled && "components-disabled", props.onPointerUp && "components-pointer-up", targeted && "components-targeted", props.className);
-    const handleClick = React.useCallback(() => {
-        // istanbul ignore else
-        if (!props.isDisabled && props.onClick)
-            props.onClick(props.item);
-    }, [props]);
-    const handlePointerUp = React.useCallback(() => {
-        // istanbul ignore else
-        if (!props.isDisabled && props.onPointerUp)
-            props.onPointerUp(props.item);
-    }, [props]);
-    return (React.createElement("div", { className: itemClassName, onClick: handleClick, onKeyDown: props.onKeyDown, onPointerUp: handlePointerUp, "data-item-id": props.item.id, "data-item-type": "popup-tool-panel-item", "data-item-priority": props.item.itemPriority, "data-item-provider-id": props.item.providerId, ref: ref, style: props.style, role: "button", tabIndex: 0 },
-        React.createElement("div", { className: "components-icon" },
-            props.icon,
-            props.badge &&
-                React.createElement("div", { className: "components-badge" }, props.badge)),
-        React.createElement("div", { className: "components-label" }, props.label),
-        props.children));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Tool.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { useTargeted } from "@itwin/core-react";
+/** Tool entry of tool group panel. Used in [[GroupColumn]].
+ * @internal
+ */
+export function GroupTool(props) {
+    const ref = React.useRef(null);
+    const targeted = useTargeted(ref);
+    const itemClassName = classnames("components-toolbar-item-expandable-group-tool-item", props.isActive && "components-active", props.isFocused && "components-focused", props.isDisabled && "components-disabled", props.onPointerUp && "components-pointer-up", targeted && "components-targeted", props.className);
+    const handleClick = React.useCallback(() => {
+        // istanbul ignore else
+        if (!props.isDisabled && props.onClick)
+            props.onClick(props.item);
+    }, [props]);
+    const handlePointerUp = React.useCallback(() => {
+        // istanbul ignore else
+        if (!props.isDisabled && props.onPointerUp)
+            props.onPointerUp(props.item);
+    }, [props]);
+    return (React.createElement("div", { className: itemClassName, onClick: handleClick, onKeyDown: props.onKeyDown, onPointerUp: handlePointerUp, "data-item-id": props.item.id, "data-item-type": "popup-tool-panel-item", "data-item-priority": props.item.itemPriority, "data-item-provider-id": props.item.providerId, ref: ref, style: props.style, role: "button", tabIndex: 0 },
+        React.createElement("div", { className: "components-icon" },
+            props.icon,
+            props.badge &&
+                React.createElement("div", { className: "components-badge" }, props.badge)),
+        React.createElement("div", { className: "components-label" }, props.label),
+        props.children));
+}
 //# sourceMappingURL=Tool.js.map

package/lib/esm/components-react/toolbar/groupPanel/tool/Tool.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tool.js","sourceRoot":"","sources":["../../../../../../src/components-react/toolbar/groupPanel/tool/Tool.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8B7D;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,aAAa,GAAG,UAAU,CAC9B,oDAAoD,EACpD,KAAK,CAAC,QAAQ,IAAI,mBAAmB,EACrC,KAAK,CAAC,SAAS,IAAI,oBAAoB,EACvC,KAAK,CAAC,UAAU,IAAI,qBAAqB,EACzC,KAAK,CAAC,WAAW,IAAI,uBAAuB,EAC5C,QAAQ,IAAI,qBAAqB,EACjC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO;YACpC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,WAAW;YACxC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,6BACE,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,WAAW,EAAE,eAAe,kBACd,KAAK,CAAC,IAAI,CAAC,EAAE,oBACZ,uBAAuB,wBAClB,KAAK,CAAC,IAAI,CAAC,YAAY,2BACpB,KAAK,CAAC,IAAI,CAAC,UAAU,EAC5C,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC;QAEX,6BAAK,SAAS,EAAC,iBAAiB;YAC7B,KAAK,CAAC,IAAI;YACV,KAAK,CAAC,KAAK;gBACV,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR,CAEJ;QACN,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR;QACL,KAAK,CAAC,QAAQ,CACX,CACP,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 Toolbar\n */\n\nimport \"./Tool.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport { CommonProps, useTargeted } from \"@itwin/core-react\";\n\n/** Properties of [[GroupTool]] component.\n * @internal\n */\nexport interface GroupToolProps extends CommonProps {\n  /** Additional content, besides icon and label. */\n  children?: React.ReactNode;\n  /** Tool icon. */\n  icon?: React.ReactNode;\n  /** Describes if the item is active. */\n  isActive?: boolean;\n  /** Describes if the item is disabled. */\n  isDisabled?: boolean;\n  /** Describes if the item is focused. */\n  isFocused?: boolean;\n  /** Tool label. */\n  label?: string;\n  /** Function called when the item is clicked. */\n  onClick?: (item: GroupButton | ActionButton) => void;\n  /** Function called when pointer up event is received. */\n  onPointerUp?: (item: GroupButton | ActionButton) => void;\n  /** A badge to draw. */\n  badge?: React.ReactNode;\n  /** GroupButton item */\n  item: GroupButton | ActionButton;\n  /** Optional function to call on any KeyDown events processed by toolbar */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\n/** Tool entry of tool group panel. Used in [[GroupColumn]].\n * @internal\n */\nexport function GroupTool(props: GroupToolProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const targeted = useTargeted(ref);\n  const itemClassName = classnames(\n    \"components-toolbar-item-expandable-group-tool-item\",\n    props.isActive && \"components-active\",\n    props.isFocused && \"components-focused\",\n    props.isDisabled && \"components-disabled\",\n    props.onPointerUp && \"components-pointer-up\",\n    targeted && \"components-targeted\",\n    props.className);\n\n  const handleClick = React.useCallback(() => {\n    // istanbul ignore else\n    if (!props.isDisabled && props.onClick)\n      props.onClick(props.item);\n  }, [props]);\n\n  const handlePointerUp = React.useCallback(() => {\n    // istanbul ignore else\n    if (!props.isDisabled && props.onPointerUp)\n      props.onPointerUp(props.item);\n  }, [props]);\n\n  return (\n    <div\n      className={itemClassName}\n      onClick={handleClick}\n      onKeyDown={props.onKeyDown}\n      onPointerUp={handlePointerUp}\n      data-item-id={props.item.id}\n      data-item-type=\"popup-tool-panel-item\"\n      data-item-priority={props.item.itemPriority}\n      data-item-provider-id={props.item.providerId}\n      ref={ref}\n      style={props.style}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div className=\"components-icon\">\n        {props.icon}\n        {props.badge &&\n          <div className=\"components-badge\">\n            {props.badge}\n          </div>\n        }\n      </div>\n      <div className=\"components-label\">\n        {props.label}\n      </div>\n      {props.children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"Tool.js","sourceRoot":"","sources":["../../../../../../src/components-react/toolbar/groupPanel/tool/Tool.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8B7D;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,aAAa,GAAG,UAAU,CAC9B,oDAAoD,EACpD,KAAK,CAAC,QAAQ,IAAI,mBAAmB,EACrC,KAAK,CAAC,SAAS,IAAI,oBAAoB,EACvC,KAAK,CAAC,UAAU,IAAI,qBAAqB,EACzC,KAAK,CAAC,WAAW,IAAI,uBAAuB,EAC5C,QAAQ,IAAI,qBAAqB,EACjC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO;YACpC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,WAAW;YACxC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,6BACE,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,WAAW,EAAE,eAAe,kBACd,KAAK,CAAC,IAAI,CAAC,EAAE,oBACZ,uBAAuB,wBAClB,KAAK,CAAC,IAAI,CAAC,YAAY,2BACpB,KAAK,CAAC,IAAI,CAAC,UAAU,EAC5C,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC;QAEX,6BAAK,SAAS,EAAC,iBAAiB;YAC7B,KAAK,CAAC,IAAI;YACV,KAAK,CAAC,KAAK;gBACV,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR,CAEJ;QACN,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR;QACL,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,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 Toolbar\r\n */\r\n\r\nimport \"./Tool.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, useTargeted } from \"@itwin/core-react\";\r\n\r\n/** Properties of [[GroupTool]] component.\r\n * @internal\r\n */\r\nexport interface GroupToolProps extends CommonProps {\r\n  /** Additional content, besides icon and label. */\r\n  children?: React.ReactNode;\r\n  /** Tool icon. */\r\n  icon?: React.ReactNode;\r\n  /** Describes if the item is active. */\r\n  isActive?: boolean;\r\n  /** Describes if the item is disabled. */\r\n  isDisabled?: boolean;\r\n  /** Describes if the item is focused. */\r\n  isFocused?: boolean;\r\n  /** Tool label. */\r\n  label?: string;\r\n  /** Function called when the item is clicked. */\r\n  onClick?: (item: GroupButton | ActionButton) => void;\r\n  /** Function called when pointer up event is received. */\r\n  onPointerUp?: (item: GroupButton | ActionButton) => void;\r\n  /** A badge to draw. */\r\n  badge?: React.ReactNode;\r\n  /** GroupButton item */\r\n  item: GroupButton | ActionButton;\r\n  /** Optional function to call on any KeyDown events processed by toolbar */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n}\r\n\r\n/** Tool entry of tool group panel. Used in [[GroupColumn]].\r\n * @internal\r\n */\r\nexport function GroupTool(props: GroupToolProps) {\r\n  const ref = React.useRef<HTMLDivElement>(null);\r\n  const targeted = useTargeted(ref);\r\n  const itemClassName = classnames(\r\n    \"components-toolbar-item-expandable-group-tool-item\",\r\n    props.isActive && \"components-active\",\r\n    props.isFocused && \"components-focused\",\r\n    props.isDisabled && \"components-disabled\",\r\n    props.onPointerUp && \"components-pointer-up\",\r\n    targeted && \"components-targeted\",\r\n    props.className);\r\n\r\n  const handleClick = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (!props.isDisabled && props.onClick)\r\n      props.onClick(props.item);\r\n  }, [props]);\r\n\r\n  const handlePointerUp = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (!props.isDisabled && props.onPointerUp)\r\n      props.onPointerUp(props.item);\r\n  }, [props]);\r\n\r\n  return (\r\n    <div\r\n      className={itemClassName}\r\n      onClick={handleClick}\r\n      onKeyDown={props.onKeyDown}\r\n      onPointerUp={handlePointerUp}\r\n      data-item-id={props.item.id}\r\n      data-item-type=\"popup-tool-panel-item\"\r\n      data-item-priority={props.item.itemPriority}\r\n      data-item-provider-id={props.item.providerId}\r\n      ref={ref}\r\n      style={props.style}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n    >\r\n      <div className=\"components-icon\">\r\n        {props.icon}\r\n        {props.badge &&\r\n          <div className=\"components-badge\">\r\n            {props.badge}\r\n          </div>\r\n        }\r\n      </div>\r\n      <div className=\"components-label\">\r\n        {props.label}\r\n      </div>\r\n      {props.children}\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/esm/components-react/toolbar/groupPanel/tool/Tool.scss

@@ -1,146 +1,147 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../../../target";
-@import "~@itwin/core-react/lib/cjs/core-react/typography";
-@import "variables";
-
-.components-toolbar-item-expandable-group-tool-item {
-  $label-color: $buic-text-color;
-  $pressed-label-color: $buic-foreground-activehover;
-  $hovered-label-color: $buic-foreground-primary;
-  $focused-label-color: $buic-foreground-primary;
-  $active-label-color: $buic-foreground-primary;
-  $disabled-label-color: $buic-text-color-disabled;
-  $item-height: 32px;
-  $item-border-width: 2px;
-  $active-tool-stripe-height: 22px;
-  $active-tool-stripe-width: 2px;
-  $icon-size: 16px;
-  $space-between-icon-and-label: 32px - 16px;
-
-  white-space: nowrap;
-  height: $item-height;
-  color: $label-color;
-  cursor: pointer;
-  border-radius: var(--iui-border-radius-1);
-  display: flex;
-  align-items: center;
-
-  @include body1;
-
-  @mixin components-active-tool {
-    &:not(.components-disabled) {
-      background: $buic-row-selection;
-      color: $pressed-label-color;
-
-      > .components-icon,
-      .components-label {
-        filter: $no-shadow;
-      }
-    }
-  }
-
-  > .components-icon {
-    width: $icon-size;
-    height: $icon-size;
-    display: inline-block;
-    margin-right: $space-between-icon-and-label;
-    margin-left: 8px;
-    filter: $shadow;
-    position: relative;
-
-    > .components-badge {
-      position: absolute;
-      top: -8px;
-      left: -8px;
-      filter: $no-shadow;
-    }
-  }
-
-  > .components-label {
-    display: inline-block;
-    margin-right: $space-after-label;
-    line-height: $item-height;
-    filter: $shadow;
-
-    &:after {
-      display: block;
-      content: attr(title);
-      font-weight: bold;
-      height: 1px;
-      color: transparent;
-      overflow: hidden;
-      visibility: hidden;
-    }
-  }
-
-  @include components-internal-targeted {
-    &:not(.components-disabled) {
-      color: $hovered-label-color;
-
-      @include body1;
-
-      > .components-icon,
-      .components-label {
-        filter: $shadow;
-      }
-    }
-  }
-
-  &:active {
-    @include components-active-tool;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &.components-pointer-up {
-    @include components-internal-targeted {
-      @include components-active-tool;
-    }
-  }
-
-  &.components-focused:not(.components-disabled) {
-    color: $focused-label-color;
-    border-color: $buic-foreground-primary;
-    border-width: $item-border-width;
-    border-style: solid;
-
-    @include body1;
-
-    > .components-icon,
-    .components-label {
-      filter: $shadow;
-    }
-  }
-
-  &.components-active:not(.components-disabled) {
-    color: $active-label-color;
-
-    @include body1;
-
-    &::before {
-      content: "";
-      background-color: $active-label-color;
-      display: block;
-      position: relative;
-      top: 0;
-      left: $item-border-width + 1;
-      width: $active-tool-stripe-width;
-      height: $active-tool-stripe-height;
-      border-radius: 2px;
-    }
-
-    > .components-icon,
-    .components-label {
-      filter: $no-shadow;
-    }
-  }
-
-  &.components-disabled {
-    color: $disabled-label-color;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../../../target";
+@import "~@itwin/core-react/lib/cjs/core-react/typography";
+@import "variables";
+
+.components-toolbar-item-expandable-group-tool-item {
+  $label-color: $buic-text-color;
+  $pressed-label-color: $buic-foreground-activehover;
+  $hovered-label-color: $buic-foreground-primary;
+  $focused-label-color: $buic-foreground-primary;
+  $active-label-color: $buic-foreground-primary;
+  $disabled-label-color: $buic-text-color-disabled;
+  $item-height: 32px;
+  $item-border-width: 2px;
+  $active-tool-stripe-height: 22px;
+  $active-tool-stripe-width: 2px;
+  $icon-size: 16px;
+  $space-between-icon-and-label: 32px - 16px;
+
+  white-space: nowrap;
+  height: $item-height;
+  color: $label-color;
+  cursor: pointer;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+
+  @include body1;
+
+  @mixin components-active-tool {
+    &:not(.components-disabled) {
+      background: $buic-row-selection;
+      color: $pressed-label-color;
+
+      >.components-icon,
+      .components-label {
+        filter: $no-shadow;
+      }
+    }
+  }
+
+  >.components-icon {
+    width: $icon-size;
+    height: $icon-size;
+    display: inline-block;
+    margin-right: $space-between-icon-and-label;
+    margin-left: 8px;
+    filter: $shadow;
+    position: relative;
+
+    >.components-badge {
+      position: absolute;
+      top: -8px;
+      left: -8px;
+      filter: $no-shadow;
+    }
+  }
+
+  >.components-label {
+    display: inline-block;
+    margin-right: $space-after-label;
+    line-height: $item-height;
+    filter: $shadow;
+
+    &:after {
+      display: block;
+      content: attr(title);
+      font-weight: bold;
+      height: 1px;
+      color: transparent;
+      overflow: hidden;
+      visibility: hidden;
+    }
+  }
+
+  @include components-internal-targeted {
+    &:not(.components-disabled) {
+      color: $hovered-label-color;
+
+      @include body1;
+
+      >.components-icon,
+      .components-label {
+        filter: $shadow;
+      }
+    }
+  }
+
+  &:active {
+    @include components-active-tool;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.components-pointer-up {
+    @include components-internal-targeted {
+      @include components-active-tool;
+    }
+  }
+
+  &.components-focused:not(.components-disabled) {
+    color: $focused-label-color;
+    border-color: $buic-foreground-primary;
+    border-width: $item-border-width;
+    border-style: solid;
+
+    @include body1;
+
+    >.components-icon,
+    .components-label {
+      filter: $shadow;
+    }
+  }
+
+  &.components-active:not(.components-disabled) {
+    color: $active-label-color;
+
+    @include body1;
+
+    &::before {
+      content: '';
+      background-color: $active-label-color;
+      display: block;
+      position: relative;
+      top: 0;
+      left: $item-border-width + 1;
+      width: $active-tool-stripe-width;
+      height: $active-tool-stripe-height;
+      border-radius: 2px;
+    }
+
+    >.components-icon,
+    .components-label {
+      filter: $no-shadow;
+    }
+  }
+
+  &.components-disabled {
+    color: $disabled-label-color;
+  }
+
+}

package/lib/esm/components-react/toolbar/groupPanel/tool/_variables.scss

@@ -1,13 +1,13 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-$no-shadow: none;
-$shadow: drop-shadow(0 1px 0 $buic-foreground-body-reverse);
-$space-after-label: 16px;
-
-$expander-arrow-thickness: 2px;
-$expander-arrow-size-val: 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/core-react/lib/cjs/core-react/style/themecolors";
+
+$no-shadow: none;
+$shadow: drop-shadow(0 1px 0 $buic-foreground-body-reverse);
+$space-after-label: 16px;
+
+$expander-arrow-thickness: 2px;
+$expander-arrow-size-val: 6;
 $space-after-expander: 10px;

package/lib/esm/components-react/toolbar/useDragInteraction.d.ts

@@ -1,15 +1,15 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import * as React from "react";
-/**
- * Hook used on expandable item that require drag or long press to open
- * @param onClick Function called when item is clicked.
- * @param onOpenPanel Function called when item is dragged or long pressed to open panel.
- * @public
- */
-export declare function useDragInteraction(onClick?: () => void, onOpenPanel?: () => void): {
-    handlePointerDown: (e: React.PointerEvent) => void;
-    handleButtonClick: () => void;
-};
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import * as React from "react";
+/**
+ * Hook used on expandable item that require drag or long press to open
+ * @param onClick Function called when item is clicked.
+ * @param onOpenPanel Function called when item is dragged or long pressed to open panel.
+ * @public
+ */
+export declare function useDragInteraction(onClick?: () => void, onOpenPanel?: () => void): {
+    handlePointerDown: (e: React.PointerEvent) => void;
+    handleButtonClick: () => void;
+};
 //# sourceMappingURL=useDragInteraction.d.ts.map