@itwin/components-react 4.0.0-dev.1 → 4.0.0-dev.3

package/lib/esm/components-react/toolbar/PopupItem.js

@@ -1,78 +1,78 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./PopupItem.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Popup, useRefState } from "@itwin/core-react";
-import { useToolbarPopupAutoHideContext, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
-import { toToolbarPopupRelativePosition } from "./PopupItemWithDrag";
-/**
- * Context used by Toolbar items in popups to close the popup panel.
- * @public
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const ToolbarPopupContext = React.createContext({
-    /** function used to close popup panel */
-    closePanel: /* istanbul ignore next */ () => { },
-    /** if popup panel is a GroupButton then this is call to set the selected action item within the panel */
-    setSelectedItem: /* istanbul ignore next */ (_buttonItem) => { },
-});
-/**
- * React hook used to retrieve the ToolbarPopupContext.
- *  @public
- */
-export function useToolbarPopupContext() {
-    return React.useContext(ToolbarPopupContext);
-}
-/** Popup toolbar item that displays a panel
- * @public
- */
-export function PopupItem(props) {
-    const [isPanelShown, setPanelShown] = React.useState(false);
-    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();
-    const processPanelOpenClose = React.useCallback((isOpening) => {
-        setPanelShown((prev) => {
-            // istanbul ignore else
-            if (prev !== isOpening)
-                onPopupPanelOpenClose(isOpening);
-            return isOpening;
-        });
-    }, [setPanelShown, onPopupPanelOpenClose]);
-    // handle open and closing overflow panel
-    const onButtonClick = React.useCallback(() => {
-        processPanelOpenClose(!isPanelShown);
-        // istanbul ignore next
-        if (props.onClick)
-            props.onClick();
-    }, [props, isPanelShown, processPanelOpenClose]);
-    const className = classnames("components-toolbar-button-item", "components-toolbar-expandable-button", props.isDisabled && "components-disabled", props.className);
-    const [targetRef, target] = useRefState();
-    // istanbul ignore next
-    const handleClose = React.useCallback(() => {
-        processPanelOpenClose(false);
-    }, [processPanelOpenClose]);
-    const { hasOverflow } = useToolItemEntryContext();
-    const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;
-    const { hideIndicator, panel } = props;
-    return (React.createElement(ToolbarPopupContext.Provider, { value: {
-            closePanel: () => processPanelOpenClose(false),
-        } },
-        React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "tool-button-popup", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, ref: targetRef, disabled: props.isDisabled, onClick: onButtonClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: props.title },
-            React.createElement("div", { className: "components-icon" }, props.icon),
-            props.badge &&
-                React.createElement("div", { className: "components-badge" }, props.badge),
-            hideIndicator ? /* istanbul ignore next */ undefined : React.createElement("div", { className: "components-triangle" })),
-        React.createElement(PopupItemPopup, { isOpen: isPanelShown, onClose: handleClose, position: toToolbarPopupRelativePosition(expandsToDirection, panelAlignment), target: target, keepContentsMounted: props.keepContentsMounted }, panel)));
-}
-/** @internal */
-export function PopupItemPopup(props) {
-    const isHidden = useToolbarPopupAutoHideContext();
-    const className = classnames("components-toolbar-popupItem_popupItemPopup", isHidden && "nz-hidden");
-    return React.createElement(Popup, { className: className, offset: 0, showShadow: false, ...props });
-}
+/*---------------------------------------------------------------------------------------------
+* 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 "./PopupItem.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Popup, useRefState } from "@itwin/core-react";
+import { useToolbarPopupAutoHideContext, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
+import { toToolbarPopupRelativePosition } from "./PopupItemWithDrag";
+/**
+ * Context used by Toolbar items in popups to close the popup panel.
+ * @public
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const ToolbarPopupContext = React.createContext({
+    /** function used to close popup panel */
+    closePanel: /* istanbul ignore next */ () => { },
+    /** if popup panel is a GroupButton then this is call to set the selected action item within the panel */
+    setSelectedItem: /* istanbul ignore next */ (_buttonItem) => { },
+});
+/**
+ * React hook used to retrieve the ToolbarPopupContext.
+ *  @public
+ */
+export function useToolbarPopupContext() {
+    return React.useContext(ToolbarPopupContext);
+}
+/** Popup toolbar item that displays a panel
+ * @public
+ */
+export function PopupItem(props) {
+    const [isPanelShown, setPanelShown] = React.useState(false);
+    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();
+    const processPanelOpenClose = React.useCallback((isOpening) => {
+        setPanelShown((prev) => {
+            // istanbul ignore else
+            if (prev !== isOpening)
+                onPopupPanelOpenClose(isOpening);
+            return isOpening;
+        });
+    }, [setPanelShown, onPopupPanelOpenClose]);
+    // handle open and closing overflow panel
+    const onButtonClick = React.useCallback(() => {
+        processPanelOpenClose(!isPanelShown);
+        // istanbul ignore next
+        if (props.onClick)
+            props.onClick();
+    }, [props, isPanelShown, processPanelOpenClose]);
+    const className = classnames("components-toolbar-button-item", "components-toolbar-expandable-button", props.isDisabled && "components-disabled", props.className);
+    const [targetRef, target] = useRefState();
+    // istanbul ignore next
+    const handleClose = React.useCallback(() => {
+        processPanelOpenClose(false);
+    }, [processPanelOpenClose]);
+    const { hasOverflow } = useToolItemEntryContext();
+    const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;
+    const { hideIndicator, panel } = props;
+    return (React.createElement(ToolbarPopupContext.Provider, { value: {
+            closePanel: () => processPanelOpenClose(false),
+        } },
+        React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "tool-button-popup", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, ref: targetRef, disabled: props.isDisabled, onClick: onButtonClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: props.title },
+            React.createElement("div", { className: "components-icon" }, props.icon),
+            props.badge &&
+                React.createElement("div", { className: "components-badge" }, props.badge),
+            hideIndicator ? /* istanbul ignore next */ undefined : React.createElement("div", { className: "components-triangle" })),
+        React.createElement(PopupItemPopup, { isOpen: isPanelShown, onClose: handleClose, position: toToolbarPopupRelativePosition(expandsToDirection, panelAlignment), target: target, keepContentsMounted: props.keepContentsMounted }, panel)));
+}
+/** @internal */
+export function PopupItemPopup(props) {
+    const isHidden = useToolbarPopupAutoHideContext();
+    const className = classnames("components-toolbar-popupItem_popupItemPopup", isHidden && "nz-hidden");
+    return React.createElement(Popup, { className: className, offset: 0, showShadow: false, ...props });
+}
 //# sourceMappingURL=PopupItem.js.map

package/lib/esm/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/esm/components-react/toolbar/PopupItem.scss

@@ -1,86 +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 "~@itwin/itwinui-css/scss/style/speed";
-@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: 3px;
-
-  transition: visibility $iui-speed ease, opacity $iui-speed 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/esm/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