@itwin/components-react 4.0.0-dev.11 → 4.0.0-dev.13

package/lib/cjs/components-react/toolbar/PopupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupItem.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItem.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Toolbar\r\n */\r\n\r\nimport \"./PopupItem.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ActionButton, RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { Popup, useRefState } from \"@itwin/core-react\";\r\nimport { ToolbarButtonItemProps } from \"./Item\";\r\nimport { useToolbarPopupAutoHideContext, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\r\nimport { toToolbarPopupRelativePosition } from \"./PopupItemWithDrag\";\r\n\r\n/** @public */\r\nexport interface ToolbarPopupContextProps {\r\n  readonly closePanel: () => void;\r\n  readonly setSelectedItem?: (buttonItem: ActionButton) => void;\r\n}\r\n\r\n/**\r\n * Context used by Toolbar items in popups to close the popup panel.\r\n * @public\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const ToolbarPopupContext = React.createContext<ToolbarPopupContextProps>({\r\n  /** function used to close popup panel */\r\n  closePanel: /* istanbul ignore next */ () => { },\r\n  /** if popup panel is a GroupButton then this is call to set the selected action item within the panel */\r\n  setSelectedItem: /* istanbul ignore next */  (_buttonItem: ActionButton) => { },\r\n});\r\n\r\n/**\r\n * React hook used to retrieve the ToolbarPopupContext.\r\n *  @public\r\n */\r\nexport function useToolbarPopupContext() {\r\n  return React.useContext(ToolbarPopupContext);\r\n}\r\n\r\n/** Properties of [[PopupItem]] component.\r\n * @public\r\n */\r\nexport interface PopupItemProps extends ToolbarButtonItemProps {\r\n  /** Describes if expandable item triangle indicator should be hidden. */\r\n  hideIndicator?: boolean;\r\n  /** Panel of the toolbar. */\r\n  panel?: React.ReactNode;\r\n  /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the\r\n   * content node is unmounted each time the popup is closed. */\r\n  keepContentsMounted?: boolean;\r\n}\r\n\r\n/** Popup toolbar item that displays a panel\r\n * @public\r\n */\r\nexport function PopupItem(props: PopupItemProps) {\r\n  const [isPanelShown, setPanelShown] = React.useState(false);\r\n  const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();\r\n  const processPanelOpenClose = React.useCallback((isOpening: boolean) => {\r\n    setPanelShown((prev) => {\r\n      // istanbul ignore else\r\n      if (prev !== isOpening)\r\n        onPopupPanelOpenClose(isOpening);\r\n      return isOpening;\r\n    });\r\n  }, [setPanelShown, onPopupPanelOpenClose]);\r\n\r\n  // handle open and closing overflow panel\r\n  const onButtonClick = React.useCallback(() => {\r\n    processPanelOpenClose(!isPanelShown);\r\n    // istanbul ignore next\r\n    if (props.onClick)\r\n      props.onClick();\r\n  }, [props, isPanelShown, processPanelOpenClose]);\r\n  const className = classnames(\r\n    \"components-toolbar-button-item\",\r\n    \"components-toolbar-expandable-button\",\r\n    props.isDisabled && \"components-disabled\",\r\n    props.className);\r\n\r\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\r\n  // istanbul ignore next\r\n  const handleClose = React.useCallback(() => {\r\n    processPanelOpenClose(false);\r\n  }, [processPanelOpenClose]);\r\n  const { hasOverflow } = useToolItemEntryContext();\r\n  const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;\r\n\r\n  const { hideIndicator, panel } = props;\r\n  return (\r\n    <ToolbarPopupContext.Provider value={{\r\n      closePanel: () => processPanelOpenClose(false),\r\n    }}>\r\n      <button\r\n        data-item-id={props.itemId}\r\n        data-item-type=\"tool-button-popup\"\r\n        data-item-group-priority={props.groupPriority}\r\n        data-item-priority={props.itemPriority}\r\n        data-item-provider-id={props.providerId}\r\n        ref={targetRef}\r\n        disabled={props.isDisabled}  // this is needed to prevent focusing/keyboard access to disabled buttons\r\n        onClick={onButtonClick}\r\n        onKeyDown={props.onKeyDown}\r\n        className={className}\r\n        style={props.style}\r\n        title={props.title}\r\n      >\r\n        <div className=\"components-icon\">\r\n          {props.icon}\r\n        </div>\r\n        {props.badge &&\r\n          <div className=\"components-badge\">\r\n            {props.badge}\r\n          </div>\r\n        }\r\n        {hideIndicator ? /* istanbul ignore next */ undefined : <div className=\"components-triangle\" />}\r\n      </button>\r\n      <PopupItemPopup\r\n        isOpen={isPanelShown}\r\n        onClose={handleClose}\r\n        position={toToolbarPopupRelativePosition(expandsToDirection, panelAlignment)}\r\n        target={target}\r\n        keepContentsMounted={props.keepContentsMounted}\r\n      >\r\n        {panel}\r\n      </PopupItemPopup>\r\n    </ToolbarPopupContext.Provider>\r\n  );\r\n}\r\n\r\n/** @internal */\r\ninterface PopupItemPopupProps {\r\n  children?: React.ReactNode;\r\n  isOpen?: boolean;\r\n  onClose(): void;\r\n  position: RelativePosition;\r\n  target?: HTMLElement;\r\n  keepContentsMounted?: boolean;\r\n}\r\n\r\n/** @internal */\r\nexport function PopupItemPopup(props: PopupItemPopupProps) {\r\n  const isHidden = useToolbarPopupAutoHideContext();\r\n  const className = classnames(\r\n    \"components-toolbar-popupItem_popupItemPopup\",\r\n    isHidden && \"nz-hidden\");\r\n\r\n  return <Popup\r\n    className={className}\r\n    offset={0}\r\n    showShadow={false}\r\n    {...props}\r\n  />;\r\n}\r\n"]}
+{"version":3,"file":"PopupItem.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItem.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 Toolbar\n */\n\nimport \"./PopupItem.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ActionButton, RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup, useRefState } from \"@itwin/core-react\";\nimport { ToolbarButtonItemProps } from \"./Item\";\nimport { useToolbarPopupAutoHideContext, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\nimport { toToolbarPopupRelativePosition } from \"./PopupItemWithDrag\";\n\n/** @public */\nexport interface ToolbarPopupContextProps {\n  readonly closePanel: () => void;\n  readonly setSelectedItem?: (buttonItem: ActionButton) => void;\n}\n\n/**\n * Context used by Toolbar items in popups to close the popup panel.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const ToolbarPopupContext = React.createContext<ToolbarPopupContextProps>({\n  /** function used to close popup panel */\n  closePanel: /* istanbul ignore next */ () => { },\n  /** if popup panel is a GroupButton then this is call to set the selected action item within the panel */\n  setSelectedItem: /* istanbul ignore next */  (_buttonItem: ActionButton) => { },\n});\n\n/**\n * React hook used to retrieve the ToolbarPopupContext.\n *  @public\n */\nexport function useToolbarPopupContext() {\n  return React.useContext(ToolbarPopupContext);\n}\n\n/** Properties of [[PopupItem]] component.\n * @public\n */\nexport interface PopupItemProps extends ToolbarButtonItemProps {\n  /** Describes if expandable item triangle indicator should be hidden. */\n  hideIndicator?: boolean;\n  /** Panel of the toolbar. */\n  panel?: React.ReactNode;\n  /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the\n   * content node is unmounted each time the popup is closed. */\n  keepContentsMounted?: boolean;\n}\n\n/** Popup toolbar item that displays a panel\n * @public\n */\nexport function PopupItem(props: PopupItemProps) {\n  const [isPanelShown, setPanelShown] = React.useState(false);\n  const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();\n  const processPanelOpenClose = React.useCallback((isOpening: boolean) => {\n    setPanelShown((prev) => {\n      // istanbul ignore else\n      if (prev !== isOpening)\n        onPopupPanelOpenClose(isOpening);\n      return isOpening;\n    });\n  }, [setPanelShown, onPopupPanelOpenClose]);\n\n  // handle open and closing overflow panel\n  const onButtonClick = React.useCallback(() => {\n    processPanelOpenClose(!isPanelShown);\n    // istanbul ignore next\n    if (props.onClick)\n      props.onClick();\n  }, [props, isPanelShown, processPanelOpenClose]);\n  const className = classnames(\n    \"components-toolbar-button-item\",\n    \"components-toolbar-expandable-button\",\n    props.isDisabled && \"components-disabled\",\n    props.className);\n\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\n  // istanbul ignore next\n  const handleClose = React.useCallback(() => {\n    processPanelOpenClose(false);\n  }, [processPanelOpenClose]);\n  const { hasOverflow } = useToolItemEntryContext();\n  const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;\n\n  const { hideIndicator, panel } = props;\n  return (\n    <ToolbarPopupContext.Provider value={{\n      closePanel: () => processPanelOpenClose(false),\n    }}>\n      <button\n        data-item-id={props.itemId}\n        data-item-type=\"tool-button-popup\"\n        data-item-group-priority={props.groupPriority}\n        data-item-priority={props.itemPriority}\n        data-item-provider-id={props.providerId}\n        ref={targetRef}\n        disabled={props.isDisabled}  // this is needed to prevent focusing/keyboard access to disabled buttons\n        onClick={onButtonClick}\n        onKeyDown={props.onKeyDown}\n        className={className}\n        style={props.style}\n        title={props.title}\n      >\n        <div className=\"components-icon\">\n          {props.icon}\n        </div>\n        {props.badge &&\n          <div className=\"components-badge\">\n            {props.badge}\n          </div>\n        }\n        {hideIndicator ? /* istanbul ignore next */ undefined : <div className=\"components-triangle\" />}\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(expandsToDirection, panelAlignment)}\n        target={target}\n        keepContentsMounted={props.keepContentsMounted}\n      >\n        {panel}\n      </PopupItemPopup>\n    </ToolbarPopupContext.Provider>\n  );\n}\n\n/** @internal */\ninterface PopupItemPopupProps {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  onClose(): void;\n  position: RelativePosition;\n  target?: HTMLElement;\n  keepContentsMounted?: boolean;\n}\n\n/** @internal */\nexport function PopupItemPopup(props: PopupItemPopupProps) {\n  const isHidden = useToolbarPopupAutoHideContext();\n  const className = classnames(\n    \"components-toolbar-popupItem_popupItemPopup\",\n    isHidden && \"nz-hidden\");\n\n  return <Popup\n    className={className}\n    offset={0}\n    showShadow={false}\n    {...props}\n  />;\n}\n"]}

package/lib/cjs/components-react/toolbar/PopupItem.scss

@@ -1,88 +1,88 @@
-/*---------------------------------------------------------------------------------------------
-* 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/z-index";
-@import "~@itwin/core-react/lib/cjs/core-react/geometry";
-@import "variables";
-
-.components-toolbar-expandable-button {
-  $triangle-width: 4px;
-  $triangle-height: $triangle-width;
-  $shadow-vertical-offset: 1px;
-  $margin-from-triangle-to-stroke: 3px;
-  $arrow-shadow: $icon-shadow;
-  position: relative;
-
-  > * {
-    &:not(.components-triangle) {
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  > .components-triangle {
-    border-radius: 0;
-    position: absolute;
-    right: $margin-from-triangle-to-stroke;
-    bottom: $margin-from-triangle-to-stroke;
-    filter: $arrow-shadow;
-    pointer-events: none;
-
-    @include triangle-bottom-right(
-      $width: $triangle-width,
-      $height: $triangle-height,
-      $color: $buic-icon-color
-    );
-  }
-
-  &:active > .components-triangle {
-    filter: $no-shadow;
-
-    @include triangle-bottom-right-color($pressed-icon-color);
-  }
-
-  &.components-active {
-    &:not(:active):not(.components-disabled) {
-      > .components-triangle {
-        filter: $no-shadow;
-
-        @include triangle-bottom-right-color($active-icon-color);
-      }
-    }
-  }
-
-  &.components-disabled {
-    > .components-triangle {
-      @include triangle-bottom-right-color($disabled-icon-color);
-    }
-  }
-
-  &.components-disabled-drag {
-    > .components-icon {
-      color: $disabled-icon-color;
-    }
-
-    > .components-triangle {
-      @include triangle-bottom-right-color($disabled-icon-color);
-    }
-  }
-}
-
-.components-toolbar-popupItem_popupItemPopup {
-  @include uicore-z-index(toolbar-panels);
-  width: fit-content;
-  background: $buic-background-1;
-  border-color: $buic-background-5;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--iui-border-radius-1);
-
-  transition: visibility var(--iui-duration-2) ease,
-    opacity var(--iui-duration-2) ease;
-
-  &.nz-hidden {
-    opacity: 0;
-    visibility: hidden;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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/z-index";
+@import "~@itwin/core-react/lib/cjs/core-react/geometry";
+@import "variables";
+
+.components-toolbar-expandable-button {
+  $triangle-width: 4px;
+  $triangle-height: $triangle-width;
+  $shadow-vertical-offset: 1px;
+  $margin-from-triangle-to-stroke: 3px;
+  $arrow-shadow: $icon-shadow;
+  position: relative;
+
+  > * {
+    &:not(.components-triangle) {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  > .components-triangle {
+    border-radius: 0;
+    position: absolute;
+    right: $margin-from-triangle-to-stroke;
+    bottom: $margin-from-triangle-to-stroke;
+    filter: $arrow-shadow;
+    pointer-events: none;
+
+    @include triangle-bottom-right(
+      $width: $triangle-width,
+      $height: $triangle-height,
+      $color: $buic-icon-color
+    );
+  }
+
+  &:active > .components-triangle {
+    filter: $no-shadow;
+
+    @include triangle-bottom-right-color($pressed-icon-color);
+  }
+
+  &.components-active {
+    &:not(:active):not(.components-disabled) {
+      > .components-triangle {
+        filter: $no-shadow;
+
+        @include triangle-bottom-right-color($active-icon-color);
+      }
+    }
+  }
+
+  &.components-disabled {
+    > .components-triangle {
+      @include triangle-bottom-right-color($disabled-icon-color);
+    }
+  }
+
+  &.components-disabled-drag {
+    > .components-icon {
+      color: $disabled-icon-color;
+    }
+
+    > .components-triangle {
+      @include triangle-bottom-right-color($disabled-icon-color);
+    }
+  }
+}
+
+.components-toolbar-popupItem_popupItemPopup {
+  @include uicore-z-index(toolbar-panels);
+  width: fit-content;
+  background: $buic-background-1;
+  border-color: $buic-background-5;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--iui-border-radius-1);
+
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
+
+  &.nz-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/lib/cjs/components-react/toolbar/PopupItemWithDrag.d.ts

@@ -1,23 +1,23 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-/// <reference types="react" />
-import "./PopupItem.scss";
-import { GroupButton, RelativePosition } from "@itwin/appui-abstract";
-import { ToolbarButtonItemProps } from "./Item";
-import { ToolbarPanelAlignment } from "./ToolbarWithOverflow";
-import { Direction } from "./utilities/Direction";
-/** Properties of [[PopupItem]] component.
- * @public
- */
-export interface PopupItemWithDragProps extends ToolbarButtonItemProps {
-    /** Panel of the toolbar. */
-    groupItem: GroupButton;
-}
-/** Expandable Group button Item
- * @public
- */
-export declare function PopupItemWithDrag(props: PopupItemWithDragProps): JSX.Element;
-/** @internal */
-export declare function toToolbarPopupRelativePosition(expandsTo: Direction, alignment: ToolbarPanelAlignment): RelativePosition;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+/// <reference types="react" />
+import "./PopupItem.scss";
+import { GroupButton, RelativePosition } from "@itwin/appui-abstract";
+import { ToolbarButtonItemProps } from "./Item";
+import { ToolbarPanelAlignment } from "./ToolbarWithOverflow";
+import { Direction } from "./utilities/Direction";
+/** Properties of [[PopupItem]] component.
+ * @public
+ */
+export interface PopupItemWithDragProps extends ToolbarButtonItemProps {
+    /** Panel of the toolbar. */
+    groupItem: GroupButton;
+}
+/** Expandable Group button Item
+ * @public
+ */
+export declare function PopupItemWithDrag(props: PopupItemWithDragProps): JSX.Element;
+/** @internal */
+export declare function toToolbarPopupRelativePosition(expandsTo: Direction, alignment: ToolbarPanelAlignment): RelativePosition;
 //# sourceMappingURL=PopupItemWithDrag.d.ts.map

package/lib/cjs/components-react/toolbar/PopupItemWithDrag.js

@@ -1,172 +1,176 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toToolbarPopupRelativePosition = exports.PopupItemWithDrag = void 0;
-require("./PopupItem.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const PopupItem_1 = require("./PopupItem");
-const PopupItemsPanel_1 = require("./PopupItemsPanel");
-const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
-const useDragInteraction_1 = require("./useDragInteraction");
-const Direction_1 = require("./utilities/Direction");
-function tryFindActiveAction(item) {
-    for (const childItem of item.items) {
-        // istanbul ignore else
-        if (appui_abstract_1.ToolbarItemUtilities.isActionButton(childItem)) {
-            if (childItem.isActive)
-                return childItem;
-        }
-        else if (appui_abstract_1.ToolbarItemUtilities.isGroupButton(childItem)) {
-            const nestedChild = tryFindActiveAction(childItem);
-            if (nestedChild)
-                return nestedChild;
-        }
-    }
-    return undefined;
-}
-function getFirstAvailableChildActionItem(item) {
-    for (const childItem of item.items) {
-        if (appui_abstract_1.ToolbarItemUtilities.isActionButton(childItem)) {
-            return childItem;
-        }
-        else {
-            // istanbul ignore else
-            if (appui_abstract_1.ToolbarItemUtilities.isGroupButton(childItem)) {
-                const nestedChild = getFirstAvailableChildActionItem(childItem);
-                // istanbul ignore else
-                if (nestedChild)
-                    return nestedChild;
-            }
-        }
-    }
-    return undefined;
-}
-function getActiveAction(item) {
-    const activeItem = tryFindActiveAction(item);
-    if (activeItem)
-        return activeItem;
-    // initially look only in root items
-    for (const childItem of item.items) {
-        // istanbul ignore else
-        if (appui_abstract_1.ToolbarItemUtilities.isActionButton(childItem)) {
-            return childItem;
-        }
-    }
-    // if not found look inside groups
-    return getFirstAvailableChildActionItem(item);
-}
-/** Expandable Group button Item
- * @public
- */
-function PopupItemWithDrag(props) {
-    const [isPanelShown, setPanelShown] = React.useState(false);
-    const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));
-    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
-    React.useEffect(() => {
-        const newActiveAction = getActiveAction(props.groupItem);
-        // istanbul ignore else
-        if (newActiveAction) {
-            // istanbul ignore next
-            if (newActiveAction.isActive) {
-                setActiveAction(newActiveAction);
-            }
-            else {
-                if (activeAction && activeAction.isActive) {
-                    setActiveAction({ ...activeAction, isActive: false });
-                }
-            }
-        }
-    }, [props.groupItem, activeAction]);
-    const processPanelOpenClose = React.useCallback((isOpening) => {
-        setPanelShown((prev) => {
-            // istanbul ignore else
-            if (prev !== isOpening)
-                onPopupPanelOpenClose(isOpening);
-            return isOpening;
-        });
-    }, [setPanelShown, onPopupPanelOpenClose]);
-    // handle open and closing popup panel
-    const onOpenPanel = React.useCallback(() => {
-        processPanelOpenClose(!isPanelShown);
-    }, [isPanelShown, processPanelOpenClose]);
-    // handle open and closing popup panel
-    const onGroupButtonClick = React.useCallback(() => {
-        // only execute action if not disabled
-        activeAction && !appui_abstract_1.ConditionalBooleanValue.getValue(activeAction.isDisabled) && activeAction.execute();
-    }, [activeAction]);
-    const badge = activeAction ? core_react_1.BadgeUtilities.getComponentForBadgeType(activeAction.badgeType) : props.badge;
-    const icon = activeAction ? core_react_1.IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData) : props.icon;
-    const title = activeAction ? appui_abstract_1.ConditionalStringValue.getValue(activeAction.label) : props.title;
-    const isActive = activeAction ? activeAction.isActive : props.isActive;
-    const isDisabled = appui_abstract_1.ConditionalBooleanValue.getValue(activeAction ? activeAction.isDisabled : props.isDisabled);
-    const { handlePointerDown, handleButtonClick } = (0, useDragInteraction_1.useDragInteraction)(onGroupButtonClick, onOpenPanel);
-    const className = (0, classnames_1.default)("components-toolbar-button-item", "components-toolbar-expandable-button", isActive && "components-active", isDisabled && "components-disabled-drag", props.className);
-    const [targetRef, target] = (0, core_react_1.useRefState)();
-    const handleClose = React.useCallback(() => {
-        processPanelOpenClose(false);
-    }, [processPanelOpenClose]);
-    const { hasOverflow } = (0, ToolbarWithOverflow_1.useToolItemEntryContext)();
-    const expandsToDirection = hasOverflow ? /* istanbul ignore next */ overflowExpandsTo : expandsTo;
-    return (React.createElement(PopupItem_1.ToolbarPopupContext.Provider, { value: {
-            closePanel: /* istanbul ignore next */ () => processPanelOpenClose(false),
-            setSelectedItem: /* istanbul ignore next */ (buttonItem) => setActiveAction(buttonItem),
-        } },
-        React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "action-tool-button", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, ref: targetRef, onPointerDown: handlePointerDown, onClick: handleButtonClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: title },
-            React.createElement("div", { className: "components-icon" }, icon),
-            props.badge &&
-                React.createElement("div", { className: "components-badge" }, badge),
-            React.createElement("div", { className: "components-triangle" })),
-        React.createElement(PopupItem_1.PopupItemPopup, { isOpen: isPanelShown, onClose: handleClose, position: toToolbarPopupRelativePosition(expandsToDirection, panelAlignment), target: target },
-            React.createElement(PopupItemsPanel_1.PopupItemsPanel, { groupItem: props.groupItem, activateOnPointerUp: true }))));
-}
-exports.PopupItemWithDrag = PopupItemWithDrag;
-/** @internal */
-function toToolbarPopupRelativePosition(expandsTo, alignment) {
-    // istanbul ignore next
-    switch (expandsTo) {
-        case Direction_1.Direction.Bottom: {
-            if (alignment === ToolbarWithOverflow_1.ToolbarPanelAlignment.End)
-                return appui_abstract_1.RelativePosition.BottomRight;
-            return appui_abstract_1.RelativePosition.BottomLeft;
-        }
-        case Direction_1.Direction.Left:
-            return appui_abstract_1.RelativePosition.LeftTop;
-        case Direction_1.Direction.Right:
-            return appui_abstract_1.RelativePosition.RightTop;
-        case Direction_1.Direction.Top:
-            return appui_abstract_1.RelativePosition.Top;
-    }
-}
-exports.toToolbarPopupRelativePosition = toToolbarPopupRelativePosition;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toToolbarPopupRelativePosition = exports.PopupItemWithDrag = void 0;
+require("./PopupItem.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const PopupItem_1 = require("./PopupItem");
+const PopupItemsPanel_1 = require("./PopupItemsPanel");
+const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+const useDragInteraction_1 = require("./useDragInteraction");
+const Direction_1 = require("./utilities/Direction");
+function tryFindActiveAction(item) {
+    for (const childItem of item.items) {
+        // istanbul ignore else
+        if (appui_abstract_1.ToolbarItemUtilities.isActionButton(childItem)) {
+            if (childItem.isActive)
+                return childItem;
+        }
+        else if (appui_abstract_1.ToolbarItemUtilities.isGroupButton(childItem)) {
+            const nestedChild = tryFindActiveAction(childItem);
+            if (nestedChild)
+                return nestedChild;
+        }
+    }
+    return undefined;
+}
+function getFirstAvailableChildActionItem(item) {
+    for (const childItem of item.items) {
+        if (appui_abstract_1.ToolbarItemUtilities.isActionButton(childItem)) {
+            return childItem;
+        }
+        else {
+            // istanbul ignore else
+            if (appui_abstract_1.ToolbarItemUtilities.isGroupButton(childItem)) {
+                const nestedChild = getFirstAvailableChildActionItem(childItem);
+                // istanbul ignore else
+                if (nestedChild)
+                    return nestedChild;
+            }
+        }
+    }
+    return undefined;
+}
+function getActiveAction(item) {
+    const activeItem = tryFindActiveAction(item);
+    if (activeItem)
+        return activeItem;
+    // initially look only in root items
+    for (const childItem of item.items) {
+        // istanbul ignore else
+        if (appui_abstract_1.ToolbarItemUtilities.isActionButton(childItem)) {
+            return childItem;
+        }
+    }
+    // if not found look inside groups
+    return getFirstAvailableChildActionItem(item);
+}
+/** Expandable Group button Item
+ * @public
+ */
+function PopupItemWithDrag(props) {
+    const [isPanelShown, setPanelShown] = React.useState(false);
+    const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));
+    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
+    React.useEffect(() => {
+        const newActiveAction = getActiveAction(props.groupItem);
+        // istanbul ignore else
+        if (newActiveAction) {
+            // istanbul ignore next
+            if (newActiveAction.isActive) {
+                setActiveAction(newActiveAction);
+            }
+            else {
+                if (activeAction && activeAction.isActive) {
+                    setActiveAction({ ...activeAction, isActive: false });
+                }
+            }
+        }
+    }, [props.groupItem, activeAction]);
+    const processPanelOpenClose = React.useCallback((isOpening) => {
+        setPanelShown((prev) => {
+            // istanbul ignore else
+            if (prev !== isOpening)
+                onPopupPanelOpenClose(isOpening);
+            return isOpening;
+        });
+    }, [setPanelShown, onPopupPanelOpenClose]);
+    // handle open and closing popup panel
+    const onOpenPanel = React.useCallback(() => {
+        processPanelOpenClose(!isPanelShown);
+    }, [isPanelShown, processPanelOpenClose]);
+    // handle open and closing popup panel
+    const onGroupButtonClick = React.useCallback(() => {
+        // only execute action if not disabled
+        activeAction && !appui_abstract_1.ConditionalBooleanValue.getValue(activeAction.isDisabled) && activeAction.execute();
+    }, [activeAction]);
+    const badge = activeAction ? core_react_1.BadgeUtilities.getComponentForBadgeType(activeAction.badgeType) : props.badge;
+    const icon = activeAction ? core_react_1.IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData) : props.icon;
+    const title = activeAction ? appui_abstract_1.ConditionalStringValue.getValue(activeAction.label) : props.title;
+    const isActive = activeAction ? activeAction.isActive : props.isActive;
+    const isDisabled = appui_abstract_1.ConditionalBooleanValue.getValue(activeAction ? activeAction.isDisabled : props.isDisabled);
+    const { handlePointerDown, handleButtonClick } = (0, useDragInteraction_1.useDragInteraction)(onGroupButtonClick, onOpenPanel);
+    const className = (0, classnames_1.default)("components-toolbar-button-item", "components-toolbar-expandable-button", isActive && "components-active", isDisabled && "components-disabled-drag", props.className);
+    const [targetRef, target] = (0, core_react_1.useRefState)();
+    const handleClose = React.useCallback(() => {
+        processPanelOpenClose(false);
+    }, [processPanelOpenClose]);
+    const { hasOverflow } = (0, ToolbarWithOverflow_1.useToolItemEntryContext)();
+    const expandsToDirection = hasOverflow ? /* istanbul ignore next */ overflowExpandsTo : expandsTo;
+    return (React.createElement(PopupItem_1.ToolbarPopupContext.Provider, { value: {
+            closePanel: /* istanbul ignore next */ () => processPanelOpenClose(false),
+            setSelectedItem: /* istanbul ignore next */ (buttonItem) => setActiveAction(buttonItem),
+        } },
+        React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "action-tool-button", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, ref: targetRef, onPointerDown: handlePointerDown, onClick: handleButtonClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: title },
+            React.createElement("div", { className: "components-icon" }, icon),
+            props.badge &&
+                React.createElement("div", { className: "components-badge" }, badge),
+            React.createElement("div", { className: "components-triangle" })),
+        React.createElement(PopupItem_1.PopupItemPopup, { isOpen: isPanelShown, onClose: handleClose, position: toToolbarPopupRelativePosition(expandsToDirection, panelAlignment), target: target },
+            React.createElement(PopupItemsPanel_1.PopupItemsPanel, { groupItem: props.groupItem, activateOnPointerUp: true }))));
+}
+exports.PopupItemWithDrag = PopupItemWithDrag;
+/** @internal */
+function toToolbarPopupRelativePosition(expandsTo, alignment) {
+    // istanbul ignore next
+    switch (expandsTo) {
+        case Direction_1.Direction.Bottom: {
+            if (alignment === ToolbarWithOverflow_1.ToolbarPanelAlignment.End)
+                return appui_abstract_1.RelativePosition.BottomRight;
+            return appui_abstract_1.RelativePosition.BottomLeft;
+        }
+        case Direction_1.Direction.Left:
+            return appui_abstract_1.RelativePosition.LeftTop;
+        case Direction_1.Direction.Right:
+            return appui_abstract_1.RelativePosition.RightTop;
+        case Direction_1.Direction.Top:
+            return appui_abstract_1.RelativePosition.Top;
+    }
+}
+exports.toToolbarPopupRelativePosition = toToolbarPopupRelativePosition;
 //# sourceMappingURL=PopupItemWithDrag.js.map