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

package/lib/components-react/toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAwBzE;;;GAGG;AACH,mDAAmD;AACnD,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,OAAO,oBAAC,wBAAwB,OAAK,KAAK,GAAI,CAAC;AACjD,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 \"./Toolbar.scss\";\nimport * as React from \"react\";\nimport type {\n  CommonToolbarItem,\n  OnItemExecutedFunc,\n} from \"@itwin/appui-abstract\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport type { Direction } from \"./utilities/Direction.js\";\nimport type {\n  ToolbarOpacitySetting,\n  ToolbarPanelAlignment,\n} from \"./InternalToolbarComponent.js\";\nimport { InternalToolbarComponent } from \"./InternalToolbarComponent.js\";\n\n/** Properties of [[Toolbar]] component.\n * @public\n * @deprecated in 4.0.0. Use [ToolbarProps]($appui-react) instead.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ToolbarProps extends CommonProps, NoChildrenProps {\n  /** Describes to which direction the popup panels are expanded, also defines the orientation of the toolbar (Top/Bottom will create an horizontal toolbar, Left/Right will create a vertical toolbar). Defaults to: [[Direction.Bottom]] */\n  expandsTo?: Direction;\n  /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */\n  items: CommonToolbarItem[];\n  /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */\n  panelAlignment?: ToolbarPanelAlignment;\n  /** Use Drag Interaction to open popups with nest action buttons */\n  useDragInteraction?: boolean;\n  /** Determines whether to use mouse proximity to alter the opacity of the toolbar */\n  toolbarOpacitySetting?: ToolbarOpacitySetting;\n  /** Optional function to call on any item execution */\n  onItemExecuted?: OnItemExecutedFunc;\n  /** Optional function to call on any KeyDown events processed by toolbar */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\n/** Component that displays toolbar items.\n * @public\n * @deprecated in 4.0.0. Use [Toolbar]($appui-react) instead.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function Toolbar(props: ToolbarProps) {\n  return <InternalToolbarComponent {...props} />;\n}\n"]}

package/lib/components-react/toolbar/Toolbar.scss

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+.components-toolbar-overflow-sizer {
+  display: inline-block;
+  position: relative;
+
+  &.components-horizontal {
+    width: 100%;
+  }
+
+  &.components-vertical {
+    height: 100%;
+  }
+}

package/lib/components-react/toolbar/ToolbarWithOverflow.d.ts

@@ -0,0 +1,38 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Toolbar.scss";
+import * as React from "react";
+import type { CommonToolbarItem, OnItemExecutedFunc } from "@itwin/appui-abstract";
+import type { CommonProps, NoChildrenProps } from "@itwin/core-react";
+import type { Direction } from "./utilities/Direction.js";
+import type { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./InternalToolbarComponent.js";
+/** Properties of [[ToolbarWithOverflow]] component.
+ * @public
+ * @deprecated in 4.0.0. Use [ToolbarWithOverflowProps]($appui-react) instead.
+ */
+export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
+    /** Describes to which direction the popup panels are expanded, also defines the orientation of the toolbar (Top/Bottom will create an horizontal toolbar, Left/Right will create a vertical toolbar). Defaults to: [[Direction.Bottom]] */
+    expandsTo?: Direction;
+    /** Describes to which direction the overflow popup panels are expanded. Defaults to: [[Direction.Right]] */
+    overflowExpandsTo?: Direction;
+    /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */
+    items: CommonToolbarItem[];
+    /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */
+    panelAlignment?: ToolbarPanelAlignment;
+    /** Use Drag Interaction to open popups with nest action buttons */
+    useDragInteraction?: boolean;
+    /** Determines whether to use mouse proximity to alter the opacity of the toolbar */
+    toolbarOpacitySetting?: ToolbarOpacitySetting;
+    /** Optional function to call on any item execution */
+    onItemExecuted?: OnItemExecutedFunc;
+    /** Optional function to call on any KeyDown events processed by toolbar */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+/** Component that displays toolbar items, displaying only the elements that can fit in the available space,
+ * and put the other items into a single panel.
+ * @public
+ * @deprecated in 4.0.0. Use [ToolbarWithOverflow]($appui-react) instead.
+ */
+export declare function ToolbarWithOverflow(props: ToolbarWithOverflowProps): React.JSX.Element;
+//# sourceMappingURL=ToolbarWithOverflow.d.ts.map

package/lib/components-react/toolbar/ToolbarWithOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,+BAA+B,CAAC;AAGvC;;;GAGG;AAEH,MAAM,WAAW,wBAAyB,SAAQ,WAAW,EAAE,eAAe;IAC5E,2OAA2O;IAC3O,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,4GAA4G;IAC5G,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,uGAAuG;IACvG,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,sDAAsD;IACtD,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAED;;;;GAIG;AAEH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,qBAQlE"}

package/lib/components-react/toolbar/ToolbarWithOverflow.js

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Toolbar.scss";
+import * as React from "react";
+import { InternalToolbarComponent } from "./InternalToolbarComponent.js";
+/** Component that displays toolbar items, displaying only the elements that can fit in the available space,
+ * and put the other items into a single panel.
+ * @public
+ * @deprecated in 4.0.0. Use [ToolbarWithOverflow]($appui-react) instead.
+ */
+// eslint-disable-next-line deprecation/deprecation
+export function ToolbarWithOverflow(props) {
+    const { overflowExpandsTo, ...internalProps } = props;
+    return (React.createElement(InternalToolbarComponent, { enableOverflow: { overflowExpandsTo }, ...internalProps }));
+}
+//# sourceMappingURL=ToolbarWithOverflow.js.map

package/lib/components-react/toolbar/ToolbarWithOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarWithOverflow.js","sourceRoot":"","sources":["../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AA0BzE;;;;GAIG;AACH,mDAAmD;AACnD,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,iBAAiB,EAAE,GAAG,aAAa,EAAE,GAAG,KAAK,CAAC;IACtD,OAAO,CACL,oBAAC,wBAAwB,IACvB,cAAc,EAAE,EAAE,iBAAiB,EAAE,KACjC,aAAa,GACjB,CACH,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 \"./Toolbar.scss\";\nimport * as React from \"react\";\nimport type {\n  CommonToolbarItem,\n  OnItemExecutedFunc,\n} from \"@itwin/appui-abstract\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport type { Direction } from \"./utilities/Direction.js\";\nimport type {\n  ToolbarOpacitySetting,\n  ToolbarPanelAlignment,\n} from \"./InternalToolbarComponent.js\";\nimport { InternalToolbarComponent } from \"./InternalToolbarComponent.js\";\n\n/** Properties of [[ToolbarWithOverflow]] component.\n * @public\n * @deprecated in 4.0.0. Use [ToolbarWithOverflowProps]($appui-react) instead.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {\n  /** Describes to which direction the popup panels are expanded, also defines the orientation of the toolbar (Top/Bottom will create an horizontal toolbar, Left/Right will create a vertical toolbar). Defaults to: [[Direction.Bottom]] */\n  expandsTo?: Direction;\n  /** Describes to which direction the overflow popup panels are expanded. Defaults to: [[Direction.Right]] */\n  overflowExpandsTo?: Direction;\n  /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */\n  items: CommonToolbarItem[];\n  /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */\n  panelAlignment?: ToolbarPanelAlignment;\n  /** Use Drag Interaction to open popups with nest action buttons */\n  useDragInteraction?: boolean;\n  /** Determines whether to use mouse proximity to alter the opacity of the toolbar */\n  toolbarOpacitySetting?: ToolbarOpacitySetting;\n  /** Optional function to call on any item execution */\n  onItemExecuted?: OnItemExecutedFunc;\n  /** Optional function to call on any KeyDown events processed by toolbar */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\n/** Component that displays toolbar items, displaying only the elements that can fit in the available space,\n * and put the other items into a single panel.\n * @public\n * @deprecated in 4.0.0. Use [ToolbarWithOverflow]($appui-react) instead.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function ToolbarWithOverflow(props: ToolbarWithOverflowProps) {\n  const { overflowExpandsTo, ...internalProps } = props;\n  return (\n    <InternalToolbarComponent\n      enableOverflow={{ overflowExpandsTo }}\n      {...internalProps}\n    />\n  );\n}\n"]}

package/lib/components-react/toolbar/_variables.scss

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "~@itwin/core-react/lib/core-react/style/breakpoints";
+
+$components-desktop-item-width: 40px;
+$components-desktop-item-height: 40px;
+
+$components-items-border-width: 1px;
+$components-desktop-space-between-toolbar-items: 1px;
+$components-desktop-separator-gap-between-toolbar-items: 5px;
+$components-desktop-separator-thickness: 1px;
+$components-desktop-separator-center-offset: -3px;
+
+$components-desktop-toolbar-width: 40px;
+$components-desktop-toolbar-height: 40px;
+
+$desktop-tool-stripe-width: 2px;
+$desktop-tool-stripe-height: 30px;
+
+$font-size: var(--iui-font-size-1);
+$icon-size: 16px;
+$icon-color: var(--iui-color-icon);
+$hovered-icon-color: var(--iui-color-icon-hover);
+$pressed-icon-color: var(--iui-color-text);
+$active-icon-color: var(--iui-color-icon-accent);
+$disabled-icon-color: var(--iui-color-icon-disabled);
+$icon-shadow-color: hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2));
+$icon-shadow: drop-shadow(0 1px 0 $icon-shadow-color);
+$no-shadow: drop-shadow(0 0 0 transparent);
+
+$desktop-tool-stripe-width: 2px;
+$desktop-tool-stripe-height: 30px;

package/lib/components-react/toolbar/groupPanel/BackArrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackArrow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/groupPanel/BackArrow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGtE;;GAEG;AAEH,MAAM,WAAW,cAAe,SAAQ,WAAW,EAAE,eAAe;IAClE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;GAEG;AAEH,eAAO,MAAM,SAAS,qDAsBrB,CAAC"}

package/lib/components-react/toolbar/groupPanel/BackArrow.js

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./BackArrow.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { useTargeted } from "@itwin/core-react/internal";
+/** Back arrow used in [[NestedGroup]] component.
+ * @internal
+ */
+// eslint-disable-next-line react/display-name
+export const BackArrow = React.memo((props) => {
+    const ref = React.useRef(null);
+    const targeted = useTargeted(ref);
+    const className = classnames("components-toolbar-item-expandable-group-backArrow", targeted && "components-targeted", props.className);
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("div", { className: className, onClick: props.onClick, onPointerUp: props.onPointerUp, ref: ref, style: props.style, role: "button", tabIndex: -1 }));
+});
+//# sourceMappingURL=BackArrow.js.map

package/lib/components-react/toolbar/groupPanel/BackArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackArrow.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/groupPanel/BackArrow.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAazD;;GAEG;AACH,8CAA8C;AAC9C,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CACjC,CAAC,KAAqB,EAAE,EAAE;IACxB,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,SAAS,GAAG,UAAU,CAC1B,oDAAoD,EACpD,QAAQ,IAAI,qBAAqB,EACjC,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO;IACL,iEAAiE;IACjE,6BACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,GACZ,CACH,CAAC;AACJ,CAAC,CACF,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 \"./BackArrow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport { useTargeted } from \"@itwin/core-react/internal\";\n\n/** Properties of [[BackArrow]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface BackArrowProps extends CommonProps, NoChildrenProps {\n  /** Function called when arrow is clicked. */\n  onClick?: () => void;\n  /** Function called when pointer up event is received. */\n  onPointerUp?: () => void;\n}\n\n/** Back arrow used in [[NestedGroup]] component.\n * @internal\n */\n// eslint-disable-next-line react/display-name\nexport const BackArrow = React.memo<React.FC<BackArrowProps>>(\n  (props: BackArrowProps) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const targeted = useTargeted(ref);\n    const className = classnames(\n      \"components-toolbar-item-expandable-group-backArrow\",\n      targeted && \"components-targeted\",\n      props.className\n    );\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <div\n        className={className}\n        onClick={props.onClick}\n        onPointerUp={props.onPointerUp}\n        ref={ref}\n        style={props.style}\n        role=\"button\"\n        tabIndex={-1}\n      />\n    );\n  }\n);\n"]}

package/lib/components-react/toolbar/groupPanel/BackArrow.scss

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "sass:math";
+@use "../../target" as *;
+@use "variables" as *;
+
+.components-toolbar-item-expandable-group-backArrow {
+  $border: solid $back-arrow-thickness currentColor;
+  $size: math.sqrt($back-arrow-size-val * $back-arrow-size-val * 8) * 0.5 + px;
+
+  width: 15px;
+  height: 20px;
+
+  @include components-internal-targeted {
+    cursor: pointer;
+
+    &:after {
+      color: var(--iui-color-text-accent);
+    }
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    position: relative;
+    left: 3px;
+    top: 3px;
+    color: var(--iui-color-text);
+    width: $size;
+    height: $size;
+    border-top: $border;
+    border-left: $border;
+    margin-left: $back-arrow-thickness;
+    margin-top: $back-arrow-thickness;
+    box-sizing: border-box;
+    transform: rotate(-45deg);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

package/lib/components-react/toolbar/groupPanel/Column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/groupPanel/Column.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AAEH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAWlD"}

package/lib/components-react/toolbar/groupPanel/Column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/groupPanel/Column.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,SAAS,GAAG,UAAU,CAC1B,iDAAiD,EACjD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAC1C,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 \"./Column.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[GroupColumn]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface GroupColumnProps extends CommonProps {\n  /** Actual content. I.e. tool items: [[GroupToolExpander]], [[GroupTool]] */\n  children?: React.ReactNode;\n}\n\n/** Tool group column. Used in [[Group]] components.\n * @internal\n */\nexport function GroupColumn(props: GroupColumnProps) {\n  const className = classnames(\n    \"components-toolbar-item-expandable-group-column\",\n    props.className\n  );\n\n  return (\n    <div className={className} style={props.style}>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/components-react/toolbar/groupPanel/Columns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/groupPanel/Columns.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AAEH,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBAW1C"}

package/lib/components-react/toolbar/groupPanel/Columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Columns.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/groupPanel/Columns.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;GAEG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,SAAS,GAAG,UAAU,CAC1B,kDAAkD,EAClD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAC1C,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 \"./Columns.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[Columns]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ColumnsProps extends CommonProps {\n  /** Actual columns. I.e. [[GroupColumn]] */\n  children?: React.ReactNode;\n}\n\n/** Columns of tool group. Used in [[Group]], [[NestedGroup]] components.\n * @internal\n */\nexport function Columns(props: ColumnsProps) {\n  const className = classnames(\n    \"components-toolbar-item-expandable-group-columns\",\n    props.className\n  );\n\n  return (\n    <div className={className} style={props.style}>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/components-react/toolbar/groupPanel/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/groupPanel/Panel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AAEH,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,qBAiBtC"}

package/lib/components-react/toolbar/groupPanel/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/groupPanel/Panel.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,cAAc,CAAC;AACtB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;GAEG;AACH,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,SAAS,GAAG,UAAU,CAC1B,gDAAgD,EAChD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO;IACL,2EAA2E;IAC3E,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAC,QAAQ,IAEZ,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 \"./Panel.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[Panel]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface PanelProps extends CommonProps {\n  /** Panel content. */\n  children?: React.ReactNode;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\n/** Basic panel used in Toolbar popups. Used as base in [[Group]] and [[NestedGroup]] components.\n * @internal\n */\nexport function Panel(props: PanelProps) {\n  const className = classnames(\n    \"components-toolbar-item-expandable-group-panel\",\n    props.className\n  );\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div\n      className={className}\n      style={props.style}\n      onKeyDown={props.onKeyDown}\n      role=\"region\"\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/components-react/toolbar/groupPanel/Panel.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.components-toolbar-item-expandable-group-panel {
+  line-height: normal;
+  background: var(--iui-color-background);
+  padding: 8px;
+  border-radius: var(--iui-border-radius-1);
+  pointer-events: auto;
+  border: 1px solid var(--iui-color-border);
+  font-size: $font-size;
+}

package/lib/components-react/toolbar/groupPanel/Title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/groupPanel/Title.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AAEH,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,qBAWtC"}

package/lib/components-react/toolbar/groupPanel/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/groupPanel/Title.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,cAAc,CAAC;AACtB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;GAEG;AACH,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,SAAS,GAAG,UAAU,CAC1B,gDAAgD,EAChD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAC1C,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 \"./Title.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[Title]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface TitleProps extends CommonProps {\n  /** Actual title. */\n  children?: React.ReactNode;\n}\n\n/** Tool group title.\n * @internal\n */\nexport function Title(props: TitleProps) {\n  const className = classnames(\n    \"components-toolbar-item-expandable-group-title\",\n    props.className\n  );\n\n  return (\n    <div className={className} style={props.style}>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/components-react/toolbar/groupPanel/Title.scss

@@ -0,0 +1,33 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.components-toolbar-item-expandable-group-title {
+  white-space: nowrap;
+  text-align: center;
+  color: var(--iui-color-text);
+  margin-bottom: 9px;
+  margin-left: $title-horizontal-margin;
+  margin-right: $title-horizontal-margin;
+
+  @include title;
+}
+
+.components-toolbar-item-expandable-group-nested {
+  position: relative;
+
+  .components-back {
+    position: absolute;
+    left: 10px;
+    top: 8px;
+  }
+
+  > .components-toolbar-item-expandable-group-title {
+    /* Contributes to space available for back arrow */
+    min-height: 14px;
+    margin-left: $title-horizontal-back-arrow-margin;
+    margin-right: $title-horizontal-back-arrow-margin;
+  }
+}

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

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
+@forward "~@itwin/core-react/lib/core-react/typography";
+@forward "../variables";
+
+$panel-padding-left: 16px;
+$panel-padding-right: 8px;
+$panel-padding-top: $panel-padding-right;
+$panel-padding-bottom: 12px;
+$title-color: var(--iui-color-text);
+$back-arrow-thickness: 2px;
+$back-arrow-size-val: 6;
+$title-horizontal-margin: 20px;
+$title-horizontal-back-arrow-margin: 28px;

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

@@ -0,0 +1,17 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Expander.scss";
+import * as React from "react";
+import type { NoChildrenProps } from "@itwin/core-react";
+import type { GroupToolProps } from "./Tool.js";
+/** Properties of [[GroupToolExpander]] component.
+ * @internal
+ */
+export interface GroupToolExpanderProps extends Omit<GroupToolProps, "isActive" | "children">, NoChildrenProps {
+}
+/** Expandable entry of tool group panel. Used in [[GroupColumn]] to select nested Groups.
+ * @internal
+ */
+export declare const GroupToolExpander: React.MemoExoticComponent<React.FC<GroupToolExpanderProps>>;
+//# sourceMappingURL=Expander.d.ts.map

package/lib/components-react/toolbar/groupPanel/tool/Expander.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/tool/Expander.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,CAAC,EACnD,eAAe;CAAG;AAEtB;;GAEG;AAEH,eAAO,MAAM,iBAAiB,6DAe7B,CAAC"}

package/lib/components-react/toolbar/groupPanel/tool/Expander.js

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Expander.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { GroupTool } from "./Tool.js";
+/** Expandable entry of tool group panel. Used in [[GroupColumn]] to select nested Groups.
+ * @internal
+ */
+// eslint-disable-next-line react/display-name
+export const GroupToolExpander = React.memo((props) => {
+    const { className, ...otherProps } = props;
+    const expanderClassName = classnames("components-toolbar-item-expandable-group-tool-expander", className);
+    return (React.createElement(GroupTool, { className: expanderClassName, ...otherProps },
+        React.createElement("div", { className: "components-expansion-indicator" })));
+});
+//# sourceMappingURL=Expander.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.js","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/tool/Expander.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAStC;;GAEG;AACH,8CAA8C;AAC9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAA6B,EAAE,EAAE;IAChC,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE3C,MAAM,iBAAiB,GAAG,UAAU,CAClC,wDAAwD,EACxD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,iBAAiB,KAAM,UAAU;QACrD,6BAAK,SAAS,EAAC,gCAAgC,GAAG,CACxC,CACb,CAAC;AACJ,CAAC,CACF,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 \"./Expander.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { NoChildrenProps } from \"@itwin/core-react\";\nimport type { GroupToolProps } from \"./Tool.js\";\nimport { GroupTool } from \"./Tool.js\";\n\n/** Properties of [[GroupToolExpander]] component.\n * @internal\n */\nexport interface GroupToolExpanderProps\n  extends Omit<GroupToolProps, \"isActive\" | \"children\">,\n    NoChildrenProps {} // eslint-disable-line deprecation/deprecation\n\n/** Expandable entry of tool group panel. Used in [[GroupColumn]] to select nested Groups.\n * @internal\n */\n// eslint-disable-next-line react/display-name\nexport const GroupToolExpander = React.memo<React.FC<GroupToolExpanderProps>>(\n  (props: GroupToolExpanderProps) => {\n    const { className, ...otherProps } = props;\n\n    const expanderClassName = classnames(\n      \"components-toolbar-item-expandable-group-tool-expander\",\n      className\n    );\n\n    return (\n      <GroupTool className={expanderClassName} {...otherProps}>\n        <div className=\"components-expansion-indicator\" />\n      </GroupTool>\n    );\n  }\n);\n"]}

package/lib/components-react/toolbar/groupPanel/tool/Expander.scss

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "sass:math";
+@use "variables" as *;
+
+.components-toolbar-item-expandable-group-tool-expander {
+  > .components-expansion-indicator {
+    $border: solid $expander-arrow-thickness currentColor;
+    $size: math.sqrt($expander-arrow-size-val * $expander-arrow-size-val * 8) *
+      0.5 + px;
+
+    width: $size;
+    height: $size;
+    border-top: $border;
+    border-left: $border;
+    margin-left: $expander-arrow-thickness;
+    margin-top: $expander-arrow-thickness;
+    margin-right: $space-after-expander;
+    box-sizing: border-box;
+    transform: rotate(135deg);
+  }
+
+  &:active:not(.components-disabled) {
+    > .components-expansion-indicator {
+      filter: $no-shadow;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tool.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/tool/Tool.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;GAEG;AAEH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,kDAAkD;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,YAAY,KAAK,IAAI,CAAC;IACrD,yDAAyD;IACzD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,YAAY,KAAK,IAAI,CAAC;IACzD,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uBAAuB;IACvB,IAAI,EAAE,WAAW,GAAG,YAAY,CAAC;IACjC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA8C9C"}

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

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/internal";
+/** 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(() => {
+        if (!props.isDisabled && props.onClick)
+            props.onClick(props.item);
+    }, [props]);
+    const handlePointerUp = React.useCallback(() => {
+        if (!props.isDisabled && props.onPointerUp)
+            props.onPointerUp(props.item);
+    }, [props]);
+    const providerId = "providerId" in props.item ? props.item.providerId : undefined;
+    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": 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/components-react/toolbar/groupPanel/tool/Tool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tool.js","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/tool/Tool.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AA+BzD;;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,CAChB,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO;YAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,WAAW;YAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC5E,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,UAAU,GACd,YAAY,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,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,UAAU,EACjC,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,IAAI,6BAAK,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,KAAK,CAAO,CACjE;QACN,6BAAK,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,KAAK,CAAO;QACpD,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 type { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useTargeted } from \"@itwin/core-react/internal\";\n\n/** Properties of [[GroupTool]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\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\n  const handleClick = React.useCallback(() => {\n    if (!props.isDisabled && props.onClick) props.onClick(props.item);\n  }, [props]);\n\n  const handlePointerUp = React.useCallback(() => {\n    if (!props.isDisabled && props.onPointerUp) props.onPointerUp(props.item);\n  }, [props]);\n\n  const providerId =\n    \"providerId\" in props.item ? props.item.providerId : undefined;\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={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 && <div className=\"components-badge\">{props.badge}</div>}\n      </div>\n      <div className=\"components-label\">{props.label}</div>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/components-react/toolbar/groupPanel/tool/Tool.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/typography" as *;
+@use "../../../target" as *;
+@use "variables" as *;
+
+.components-toolbar-item-expandable-group-tool-item {
+  $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: var(--iui-color-text);
+  cursor: pointer;
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  align-items: center;
+
+  @include body1;
+
+  @mixin components-active-tool {
+    &:not(.components-disabled) {
+      background: var(--iui-color-background-hover);
+      color: var(--iui-color-text-accent-hover);
+    }
+  }
+
+  > .components-icon {
+    width: $icon-size;
+    height: $icon-size;
+    display: inline-block;
+    margin-right: $space-between-icon-and-label;
+    margin-left: 8px;
+    position: relative;
+
+    > .components-badge {
+      position: absolute;
+      top: -8px;
+      left: -8px;
+    }
+  }
+
+  > .components-label {
+    display: inline-block;
+    margin-right: $space-after-label;
+    line-height: $item-height;
+
+    &: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: var(--iui-color-text-hover);
+
+      @include body1;
+    }
+  }
+
+  &: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: var(--iui-color-text-accent);
+    border-color: var(--iui-color-border-accent);
+    border-width: $item-border-width;
+    border-style: solid;
+
+    @include body1;
+  }
+
+  &.components-active:not(.components-disabled) {
+    color: var(--iui-color-text-accent);
+
+    @include body1;
+
+    &::before {
+      content: "";
+      background-color: var(--iui-color-border-accent);
+      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-disabled {
+    color: var(--iui-color-text-disabled);
+  }
+}

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

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
+
+$no-shadow: none;
+$shadow: drop-shadow(
+  0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+);
+$space-after-label: 16px;
+
+$expander-arrow-thickness: 2px;
+$expander-arrow-size-val: 6;
+$space-after-expander: 10px;

package/lib/components-react/toolbar/useConditionalSynchedItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConditionalSynchedItems.d.ts","sourceRoot":"","sources":["../../../src/components-react/toolbar/useConditionalSynchedItems.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAiFnD;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,EAAE,GAAG;IAAE,KAAK,EAAE,CAAC,EAAE,CAAA;CAAE,EACtE,KAAK,EAAE,SAAS,CAAC,EAAE,EACnB,WAAW,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC,IAAI,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAAE,KAAK,IAAI,CAAC,gBAyB5E"}