@itwin/components-react 4.1.0 → 4.2.0

package/lib/esm/components-react/toolbar/OverflowPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/OverflowPanel.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,2BAA2B,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,mBAAmB,EACzJ,oCAAoC,EAAE,kCAAkC,EAAE,uBAAuB,EACjG,uBAAuB,GACxB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,qBAAqB,EAAE,sCAAsC,EAAE,MAAM,uBAAuB,CAAC;AACtG,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAUrF;;GAEG;AACH,8CAA8C;AAC9C,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,EAAE,SAAS,EAC7E,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,sCAAsC,EAAE,CAAC;IACpF,MAAM,EAAE,cAAc,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAErD,MAAM,wBAAwB,GAAG,qBAAqB,KAAK,qBAAqB,CAAC,WAAW,CAAC;IAC7F,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAC5E,IAAI,gBAAgB,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kCAAkC,CAAC;IACzF,IAAI,UAAU,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oCAAoC,CAAC;IACrF,IAAI,cAAc,GAAG,qBAAqB,KAAK,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhG,uBAAuB;IACvB,IAAI,qBAAqB,KAAK,qBAAqB,CAAC,SAAS,IAAI,cAAc,GAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE;QAC7G,cAAc,GAAG,uBAAuB,CAAC,cAAc,CAAC,CAAC;QACzD,gBAAgB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;QAC7D,UAAU,GAAG,2BAA2B,CAAC,cAAc,CAAC,CAAC;QACzD,IAAI,cAAc,GAAG,GAAG;YACtB,cAAc,GAAG,KAAK,CAAC;KAC1B;IAED,MAAM,QAAQ,GAAwB;QACpC,eAAe,EAAE,yBAAyB,CAAC,cAAc,CAAC;QAC1D,SAAS,EAAE,mBAAmB,CAAC,gBAAgB,CAAC;QAChD,cAAc,EAAE,wBAAwB,CAAC,UAAU,CAAC;QACpD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,oCAAoC,EACpC,0BAA0B,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAC7D,GAAG,0BAA0B,CAAC,eAAe,CAAC,iBAAiB,CAAC,IAAI,gBAAgB,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,EACjH,cAAc,IAAI,oCAAoC,EACtD,gBAAgB,CAAC,eAAe,CAAC,iBAAiB,CAAC,EACnD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,QAAQ,IAEd,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module ToolSettings\r\n */\r\n\r\nimport \"./OverflowPanel.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport type {\r\n  CommonProps} from \"@itwin/core-react\";\r\nimport {\r\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow,\r\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT, TOOLBAR_OPACITY_DEFAULT,\r\n  useWidgetOpacityContext,\r\n} from \"@itwin/core-react\";\r\n\r\nimport { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\r\nimport { DirectionHelpers, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\r\n\r\n/** Properties of [[ToolbarOverflowPanel]] component.\r\n * @internal\r\n */\r\nexport interface ToolbarOverflowPanelProps extends CommonProps {\r\n  /** Panel content. */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** Displays overflown tool settings.\r\n * @internal\r\n */\r\n// eslint-disable-next-line react/display-name\r\nexport function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps) {\r\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive, expandsTo,\r\n    overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();\r\n  const { proximityScale } = useWidgetOpacityContext();\r\n\r\n  const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\r\n  let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT;\r\n  let boxShadowOpacity = useTransparentBackground ? 0 : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\r\n  let filterBlur = useTransparentBackground ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\r\n  let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\r\n\r\n  // istanbul ignore next\r\n  if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {\r\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\r\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\r\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\r\n    if (proximityScale < .25)\r\n      showSeparators = false;\r\n  }\r\n\r\n  const divStyle: React.CSSProperties = {\r\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\r\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\r\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\r\n    ...props.style,\r\n  };\r\n\r\n  const className = classnames(\r\n    \"components-toolbar-overflow-panel\",\r\n    \"components-toolbar-items-container\",\r\n    OrthogonalDirectionHelpers.getCssClassName(overflowDirection),\r\n    `${OrthogonalDirectionHelpers.getCssClassName(overflowDirection)}-${DirectionHelpers.getCssClassName(expandsTo)}`,\r\n    showSeparators && \"components-toolbar-show-decorators\",\r\n    DirectionHelpers.getCssClassName(overflowExpandsTo),\r\n    props.className,\r\n  );\r\n\r\n  return (\r\n    <div\r\n      className={className}\r\n      style={divStyle}\r\n    >\r\n      {props.children}\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"OverflowPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/OverflowPanel.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,EACzB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,mBAAmB,EACnB,oCAAoC,EACpC,kCAAkC,EAClC,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,qBAAqB,EACrB,sCAAsC,GACvC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,gBAAgB,EAChB,0BAA0B,GAC3B,MAAM,uBAAuB,CAAC;AAU/B;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EACJ,qBAAqB,EACrB,cAAc,EACd,qBAAqB,EACrB,SAAS,EACT,iBAAiB,EACjB,iBAAiB,GAClB,GAAG,sCAAsC,EAAE,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAErD,MAAM,wBAAwB,GAC5B,qBAAqB,KAAK,qBAAqB,CAAC,WAAW,CAAC;IAC9D,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAC5E,IAAI,gBAAgB,GAAG,wBAAwB;QAC7C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,kCAAkC,CAAC;IACvC,IAAI,UAAU,GAAG,wBAAwB;QACvC,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,oCAAoC,CAAC;IACzC,IAAI,cAAc,GAChB,qBAAqB,KAAK,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,uBAAuB;IACvB,IACE,qBAAqB,KAAK,qBAAqB,CAAC,SAAS;QACzD,cAAc,GAAG,CAAC;QAClB,CAAC,qBAAqB,EACtB;QACA,cAAc,GAAG,uBAAuB,CAAC,cAAc,CAAC,CAAC;QACzD,gBAAgB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;QAC7D,UAAU,GAAG,2BAA2B,CAAC,cAAc,CAAC,CAAC;QACzD,IAAI,cAAc,GAAG,IAAI;YAAE,cAAc,GAAG,KAAK,CAAC;KACnD;IAED,MAAM,QAAQ,GAAwB;QACpC,eAAe,EAAE,yBAAyB,CAAC,cAAc,CAAC;QAC1D,SAAS,EAAE,mBAAmB,CAAC,gBAAgB,CAAC;QAChD,cAAc,EAAE,wBAAwB,CAAC,UAAU,CAAC;QACpD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,oCAAoC,EACpC,0BAA0B,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAC7D,GAAG,0BAA0B,CAAC,eAAe,CAC3C,iBAAiB,CAClB,IAAI,gBAAgB,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,EAClD,cAAc,IAAI,oCAAoC,EACtD,gBAAgB,CAAC,eAAe,CAAC,iBAAiB,CAAC,EACnD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,IACvC,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 ToolSettings\n */\n\nimport \"./OverflowPanel.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport {\n  calculateBackdropFilterBlur,\n  calculateBoxShadowOpacity,\n  calculateToolbarOpacity,\n  getToolbarBackdropFilter,\n  getToolbarBackgroundColor,\n  getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT,\n  TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  TOOLBAR_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\n\nimport {\n  ToolbarOpacitySetting,\n  useToolbarWithOverflowDirectionContext,\n} from \"./ToolbarWithOverflow\";\nimport {\n  DirectionHelpers,\n  OrthogonalDirectionHelpers,\n} from \"./utilities/Direction\";\n\n/** Properties of [[ToolbarOverflowPanel]] component.\n * @internal\n */\nexport interface ToolbarOverflowPanelProps extends CommonProps {\n  /** Panel content. */\n  children?: React.ReactNode;\n}\n\n/** Displays overflown tool settings.\n * @internal\n */\nexport function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps) {\n  const {\n    toolbarOpacitySetting,\n    openPopupCount,\n    overflowDisplayActive,\n    expandsTo,\n    overflowExpandsTo,\n    overflowDirection,\n  } = useToolbarWithOverflowDirectionContext();\n  const { proximityScale } = useWidgetOpacityContext();\n\n  const useTransparentBackground =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n  let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT;\n  let boxShadowOpacity = useTransparentBackground\n    ? 0\n    : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground\n    ? 0\n    : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  // istanbul ignore next\n  if (\n    toolbarOpacitySetting === ToolbarOpacitySetting.Proximity &&\n    openPopupCount < 1 &&\n    !overflowDisplayActive\n  ) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    if (proximityScale < 0.25) showSeparators = false;\n  }\n\n  const divStyle: React.CSSProperties = {\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\n    ...props.style,\n  };\n\n  const className = classnames(\n    \"components-toolbar-overflow-panel\",\n    \"components-toolbar-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(overflowDirection),\n    `${OrthogonalDirectionHelpers.getCssClassName(\n      overflowDirection\n    )}-${DirectionHelpers.getCssClassName(expandsTo)}`,\n    showSeparators && \"components-toolbar-show-decorators\",\n    DirectionHelpers.getCssClassName(overflowExpandsTo),\n    props.className\n  );\n\n  return (\n    <div className={className} style={divStyle}>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/esm/components-react/toolbar/OverflowPanel.scss

@@ -1,37 +1,37 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "variables";
-
-.components-toolbar-overflow-panel {
-  background: $buic-background-1;
-  border-radius: var(--iui-border-radius-1);
-  display: flex;
-  height: unset;
-  width: fit-content;
-  padding: unset;
-
-  &.components-vertical-components-direction-bottom {
-    right: -$components-items-border-width;
-    flex-direction: column;
-    top: 100%;
-  }
-
-  &.components-vertical-components-direction-top {
-    right: -$components-items-border-width;
-    flex-direction: column;
-    bottom: 100%;
-  }
-
-  &.components-horizontal-components-direction-right {
-    left: 100%;
-    bottom: -$components-items-border-width;
-    flex-direction: row;
-  }
-  &.components-horizontal-components-direction-left {
-    right: 100%;
-    bottom: -$components-items-border-width;
-    flex-direction: row;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+.components-toolbar-overflow-panel {
+  background: $buic-background-1;
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  height: unset;
+  width: fit-content;
+  padding: unset;
+
+  &.components-vertical-components-direction-bottom {
+    right: -$components-items-border-width;
+    flex-direction: column;
+    top: 100%;
+  }
+
+  &.components-vertical-components-direction-top {
+    right: -$components-items-border-width;
+    flex-direction: column;
+    bottom: 100%;
+  }
+
+  &.components-horizontal-components-direction-right {
+    left: 100%;
+    bottom: -$components-items-border-width;
+    flex-direction: row;
+  }
+  &.components-horizontal-components-direction-left {
+    right: 100%;
+    bottom: -$components-items-border-width;
+    flex-direction: row;
+  }
+}

package/lib/esm/components-react/toolbar/PopupItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupItem.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAIrD,cAAc;AACd,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAChC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,KAAK,IAAI,CAAC;CAC/D;AAED;;;GAGG;AAEH,eAAO,MAAM,mBAAmB,yCAK9B,CAAC;AAEH;;;GAGG;AACH,wBAAgB,sBAAsB,6BAErC;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,sBAAsB;IAC5D,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;kEAC8D;IAC9D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAyE9C;AAED,gBAAgB;AAChB,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,IAAI,IAAI,CAAC;IAChB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAYxD"}
+{"version":3,"file":"PopupItem.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAQrD,cAAc;AACd,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAChC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,KAAK,IAAI,CAAC;CAC/D;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,yCAQ5B,CAAC;AAEL;;;GAGG;AACH,wBAAgB,sBAAsB,6BAErC;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,sBAAsB;IAC5D,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;kEAC8D;IAC9D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAiF9C;AAED,gBAAgB;AAChB,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,IAAI,IAAI,CAAC;IAChB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAUxD"}

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

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -9,13 +9,12 @@ 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 { 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 */ () => { },
@@ -34,7 +33,7 @@ export function useToolbarPopupContext() {
  */
 export function PopupItem(props) {
     const [isPanelShown, setPanelShown] = React.useState(false);
-    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();
+    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose, } = useToolbarWithOverflowDirectionContext();
     const processPanelOpenClose = React.useCallback((isOpening) => {
         setPanelShown((prev) => {
             // istanbul ignore else
@@ -64,15 +63,14 @@ export function PopupItem(props) {
         } },
         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" })),
+            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 });
+    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 type { ActionButton, RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { Popup, useRefState } from \"@itwin/core-react\";\r\nimport type { 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 type { ActionButton, RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup, useRefState } from \"@itwin/core-react\";\nimport type { ToolbarButtonItemProps } from \"./Item\";\nimport {\n  useToolbarPopupAutoHideContext,\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} 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 */\nexport const ToolbarPopupContext =\n  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 */ (\n      _buttonItem: ActionButton\n    ) => {},\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 {\n    expandsTo,\n    overflowExpandsTo,\n    panelAlignment,\n    onPopupPanelOpenClose,\n  } = useToolbarWithOverflowDirectionContext();\n  const processPanelOpenClose = React.useCallback(\n    (isOpening: boolean) => {\n      setPanelShown((prev) => {\n        // istanbul ignore else\n        if (prev !== isOpening) onPopupPanelOpenClose(isOpening);\n        return isOpening;\n      });\n    },\n    [setPanelShown, onPopupPanelOpenClose]\n  );\n\n  // handle open and closing overflow panel\n  const onButtonClick = React.useCallback(() => {\n    processPanelOpenClose(!isPanelShown);\n    // istanbul ignore next\n    if (props.onClick) 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\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\n      value={{\n        closePanel: () => processPanelOpenClose(false),\n      }}\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\">{props.icon}</div>\n        {props.badge && <div className=\"components-badge\">{props.badge}</div>}\n        {hideIndicator ? /* istanbul ignore next */ undefined : (\n          <div className=\"components-triangle\" />\n        )}\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(\n          expandsToDirection,\n          panelAlignment\n        )}\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\n  return (\n    <Popup className={className} offset={0} showShadow={false} {...props} />\n  );\n}\n"]}

package/lib/esm/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/esm/components-react/toolbar/PopupItemWithDrag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupItemWithDrag.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,kBAAkB,CAAC;AAG1B,OAAO,KAAK,EAAgB,WAAW,EAAC,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAmD,gBAAgB,EAAwB,MAAM,uBAAuB,CAAC;AAEhI,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAGrD,OAAO,EAAE,qBAAqB,EAAmE,MAAM,uBAAuB,CAAC;AAE/H,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;IACpE,4BAA4B;IAC5B,SAAS,EAAE,WAAW,CAAC;CACxB;AAmDD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAsG9D;AAED,gBAAgB;AAChB,wBAAgB,8BAA8B,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,qBAAqB,GAAG,gBAAgB,CAevH"}
+{"version":3,"file":"PopupItemWithDrag.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,kBAAkB,CAAC;AAG1B,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAGL,gBAAgB,EAEjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAGrD,OAAO,EACL,qBAAqB,EAGtB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;IACpE,4BAA4B;IAC5B,SAAS,EAAE,WAAW,CAAC;CACxB;AAiDD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAmI9D;AAED,gBAAgB;AAChB,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,qBAAqB,GAC/B,gBAAgB,CAelB"}

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

@@ -1,18 +1,18 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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 { ConditionalBooleanValue, ConditionalStringValue, RelativePosition, ToolbarItemUtilities } from "@itwin/appui-abstract";
+import { ConditionalBooleanValue, ConditionalStringValue, RelativePosition, ToolbarItemUtilities, } from "@itwin/appui-abstract";
 import { BadgeUtilities, IconHelper, useRefState } from "@itwin/core-react";
 import { PopupItemPopup, ToolbarPopupContext } from "./PopupItem";
 import { PopupItemsPanel } from "./PopupItemsPanel";
-import { ToolbarPanelAlignment, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
+import { ToolbarPanelAlignment, useToolbarWithOverflowDirectionContext, useToolItemEntryContext, } from "./ToolbarWithOverflow";
 import { useDragInteraction } from "./useDragInteraction";
 import { Direction } from "./utilities/Direction";
 function tryFindActiveAction(item) {
@@ -67,7 +67,7 @@ function getActiveAction(item) {
 export function PopupItemWithDrag(props) {
     const [isPanelShown, setPanelShown] = React.useState(false);
     const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));
-    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();
+    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose, } = useToolbarWithOverflowDirectionContext();
     React.useEffect(() => {
         const newActiveAction = getActiveAction(props.groupItem);
         // istanbul ignore else
@@ -98,11 +98,19 @@ export function PopupItemWithDrag(props) {
     // handle open and closing popup panel
     const onGroupButtonClick = React.useCallback(() => {
         // only execute action if not disabled
-        activeAction && !ConditionalBooleanValue.getValue(activeAction.isDisabled) && activeAction.execute();
+        activeAction &&
+            !ConditionalBooleanValue.getValue(activeAction.isDisabled) &&
+            activeAction.execute();
     }, [activeAction]);
-    const badge = activeAction ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType) : props.badge;
-    const icon = activeAction ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData) : props.icon;
-    const title = activeAction ? ConditionalStringValue.getValue(activeAction.label) : props.title;
+    const badge = activeAction
+        ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType)
+        : props.badge;
+    const icon = activeAction
+        ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData)
+        : props.icon;
+    const title = activeAction
+        ? ConditionalStringValue.getValue(activeAction.label)
+        : props.title;
     const isActive = activeAction ? activeAction.isActive : props.isActive;
     const isDisabled = ConditionalBooleanValue.getValue(activeAction ? activeAction.isDisabled : props.isDisabled);
     const { handlePointerDown, handleButtonClick } = useDragInteraction(onGroupButtonClick, onOpenPanel);
@@ -112,15 +120,16 @@ export function PopupItemWithDrag(props) {
         processPanelOpenClose(false);
     }, [processPanelOpenClose]);
     const { hasOverflow } = useToolItemEntryContext();
-    const expandsToDirection = hasOverflow ? /* istanbul ignore next */ overflowExpandsTo : expandsTo;
+    const expandsToDirection = hasOverflow
+        ? /* istanbul ignore next */ overflowExpandsTo
+        : expandsTo;
     return (React.createElement(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),
+            props.badge && React.createElement("div", { className: "components-badge" }, badge),
             React.createElement("div", { className: "components-triangle" })),
         React.createElement(PopupItemPopup, { isOpen: isPanelShown, onClose: handleClose, position: toToolbarPopupRelativePosition(expandsToDirection, panelAlignment), target: target },
             React.createElement(PopupItemsPanel, { groupItem: props.groupItem, activateOnPointerUp: true }))));

package/lib/esm/components-react/toolbar/PopupItemWithDrag.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupItemWithDrag.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.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 type { ActionButton, GroupButton} from \"@itwin/appui-abstract\";\r\nimport { ConditionalBooleanValue, ConditionalStringValue, RelativePosition, ToolbarItemUtilities } from \"@itwin/appui-abstract\";\r\nimport { BadgeUtilities, IconHelper, useRefState } from \"@itwin/core-react\";\r\nimport type { ToolbarButtonItemProps } from \"./Item\";\r\nimport { PopupItemPopup, ToolbarPopupContext } from \"./PopupItem\";\r\nimport { PopupItemsPanel } from \"./PopupItemsPanel\";\r\nimport { ToolbarPanelAlignment, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\r\nimport { useDragInteraction } from \"./useDragInteraction\";\r\nimport { Direction } from \"./utilities/Direction\";\r\n\r\n/** Properties of [[PopupItem]] component.\r\n * @public\r\n */\r\nexport interface PopupItemWithDragProps extends ToolbarButtonItemProps {\r\n  /** Panel of the toolbar. */\r\n  groupItem: GroupButton;\r\n}\r\n\r\nfunction tryFindActiveAction(item: GroupButton): ActionButton | undefined {\r\n  for (const childItem of item.items) {\r\n    // istanbul ignore else\r\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\r\n      if (childItem.isActive)\r\n        return childItem;\r\n    } else if (ToolbarItemUtilities.isGroupButton(childItem)) {\r\n      const nestedChild = tryFindActiveAction(childItem);\r\n      if (nestedChild)\r\n        return nestedChild;\r\n    }\r\n  }\r\n  return undefined;\r\n}\r\n\r\nfunction getFirstAvailableChildActionItem(item: GroupButton): ActionButton | undefined {\r\n  for (const childItem of item.items) {\r\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\r\n      return childItem;\r\n    } else {\r\n      // istanbul ignore else\r\n      if (ToolbarItemUtilities.isGroupButton(childItem)) {\r\n        const nestedChild = getFirstAvailableChildActionItem(childItem);\r\n        // istanbul ignore else\r\n        if (nestedChild)\r\n          return nestedChild;\r\n      }\r\n    }\r\n  }\r\n  return undefined;\r\n}\r\n\r\nfunction getActiveAction(item: GroupButton): ActionButton | undefined {\r\n  const activeItem = tryFindActiveAction(item);\r\n  if (activeItem)\r\n    return activeItem;\r\n\r\n  // initially look only in root items\r\n  for (const childItem of item.items) {\r\n    // istanbul ignore else\r\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\r\n      return childItem;\r\n    }\r\n  }\r\n\r\n  // if not found look inside groups\r\n  return getFirstAvailableChildActionItem(item);\r\n}\r\n\r\n/** Expandable Group button Item\r\n * @public\r\n */\r\nexport function PopupItemWithDrag(props: PopupItemWithDragProps) {\r\n  const [isPanelShown, setPanelShown] = React.useState(false);\r\n  const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));\r\n  const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();\r\n\r\n  React.useEffect(() => {\r\n    const newActiveAction = getActiveAction(props.groupItem);\r\n    // istanbul ignore else\r\n    if (newActiveAction) {\r\n      // istanbul ignore next\r\n      if (newActiveAction.isActive) {\r\n        setActiveAction(newActiveAction);\r\n      } else {\r\n        if (activeAction && activeAction.isActive) {\r\n          setActiveAction({ ...activeAction, isActive: false });\r\n        }\r\n      }\r\n    }\r\n  }, [props.groupItem, activeAction]);\r\n\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 popup panel\r\n  const onOpenPanel = React.useCallback(() => {\r\n    processPanelOpenClose(!isPanelShown);\r\n  }, [isPanelShown, processPanelOpenClose]);\r\n\r\n  // handle open and closing popup panel\r\n  const onGroupButtonClick = React.useCallback(() => {\r\n    // only execute action if not disabled\r\n    activeAction && !ConditionalBooleanValue.getValue(activeAction.isDisabled) && activeAction.execute();\r\n  }, [activeAction]);\r\n\r\n  const badge = activeAction ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType) : props.badge;\r\n  const icon = activeAction ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData) : props.icon;\r\n  const title = activeAction ? ConditionalStringValue.getValue(activeAction.label) : props.title;\r\n  const isActive = activeAction ? activeAction.isActive : props.isActive;\r\n  const isDisabled = ConditionalBooleanValue.getValue(activeAction ? activeAction.isDisabled : props.isDisabled);\r\n\r\n  const { handlePointerDown, handleButtonClick } = useDragInteraction(onGroupButtonClick, onOpenPanel);\r\n\r\n  const className = classnames(\r\n    \"components-toolbar-button-item\",\r\n    \"components-toolbar-expandable-button\",\r\n    isActive && \"components-active\",\r\n    isDisabled && \"components-disabled-drag\",\r\n    props.className);\r\n\r\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\r\n  const handleClose = React.useCallback(() => {\r\n    processPanelOpenClose(false);\r\n  }, [processPanelOpenClose]);\r\n  const { hasOverflow } = useToolItemEntryContext();\r\n  const expandsToDirection = hasOverflow ? /* istanbul ignore next */ overflowExpandsTo : expandsTo;\r\n\r\n  return (\r\n    <ToolbarPopupContext.Provider value={{\r\n      closePanel: /* istanbul ignore next */ () => processPanelOpenClose(false),\r\n      setSelectedItem: /* istanbul ignore next */ (buttonItem: ActionButton) => setActiveAction(buttonItem),\r\n    }\r\n    }>\r\n      <button\r\n        data-item-id={props.itemId}\r\n        data-item-type=\"action-tool-button\"\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        onPointerDown={handlePointerDown}\r\n        onClick={handleButtonClick}\r\n        onKeyDown={props.onKeyDown}\r\n        className={className}\r\n        style={props.style}\r\n        title={title}\r\n      >\r\n        <div className=\"components-icon\">\r\n          {icon}\r\n        </div>\r\n        {props.badge &&\r\n          <div className=\"components-badge\">\r\n            {badge}\r\n          </div>\r\n        }\r\n        <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      >\r\n        <PopupItemsPanel groupItem={props.groupItem} activateOnPointerUp={true} />\r\n      </PopupItemPopup>\r\n    </ToolbarPopupContext.Provider>\r\n  );\r\n}\r\n\r\n/** @internal */\r\nexport function toToolbarPopupRelativePosition(expandsTo: Direction, alignment: ToolbarPanelAlignment): RelativePosition {\r\n  // istanbul ignore next\r\n  switch (expandsTo) {\r\n    case Direction.Bottom: {\r\n      if (alignment === ToolbarPanelAlignment.End)\r\n        return RelativePosition.BottomRight;\r\n      return RelativePosition.BottomLeft;\r\n    }\r\n    case Direction.Left:\r\n      return RelativePosition.LeftTop;\r\n    case Direction.Right:\r\n      return RelativePosition.RightTop;\r\n    case Direction.Top:\r\n      return RelativePosition.Top;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"PopupItemWithDrag.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.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 type { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n  RelativePosition,\n  ToolbarItemUtilities,\n} from \"@itwin/appui-abstract\";\nimport { BadgeUtilities, IconHelper, useRefState } from \"@itwin/core-react\";\nimport type { ToolbarButtonItemProps } from \"./Item\";\nimport { PopupItemPopup, ToolbarPopupContext } from \"./PopupItem\";\nimport { PopupItemsPanel } from \"./PopupItemsPanel\";\nimport {\n  ToolbarPanelAlignment,\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./ToolbarWithOverflow\";\nimport { useDragInteraction } from \"./useDragInteraction\";\nimport { Direction } from \"./utilities/Direction\";\n\n/** Properties of [[PopupItem]] component.\n * @public\n */\nexport interface PopupItemWithDragProps extends ToolbarButtonItemProps {\n  /** Panel of the toolbar. */\n  groupItem: GroupButton;\n}\n\nfunction tryFindActiveAction(item: GroupButton): ActionButton | undefined {\n  for (const childItem of item.items) {\n    // istanbul ignore else\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      if (childItem.isActive) return childItem;\n    } else if (ToolbarItemUtilities.isGroupButton(childItem)) {\n      const nestedChild = tryFindActiveAction(childItem);\n      if (nestedChild) return nestedChild;\n    }\n  }\n  return undefined;\n}\n\nfunction getFirstAvailableChildActionItem(\n  item: GroupButton\n): ActionButton | undefined {\n  for (const childItem of item.items) {\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      return childItem;\n    } else {\n      // istanbul ignore else\n      if (ToolbarItemUtilities.isGroupButton(childItem)) {\n        const nestedChild = getFirstAvailableChildActionItem(childItem);\n        // istanbul ignore else\n        if (nestedChild) return nestedChild;\n      }\n    }\n  }\n  return undefined;\n}\n\nfunction getActiveAction(item: GroupButton): ActionButton | undefined {\n  const activeItem = tryFindActiveAction(item);\n  if (activeItem) return activeItem;\n\n  // initially look only in root items\n  for (const childItem of item.items) {\n    // istanbul ignore else\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      return childItem;\n    }\n  }\n\n  // if not found look inside groups\n  return getFirstAvailableChildActionItem(item);\n}\n\n/** Expandable Group button Item\n * @public\n */\nexport function PopupItemWithDrag(props: PopupItemWithDragProps) {\n  const [isPanelShown, setPanelShown] = React.useState(false);\n  const [activeAction, setActiveAction] = React.useState(\n    getActiveAction(props.groupItem)\n  );\n  const {\n    expandsTo,\n    overflowExpandsTo,\n    panelAlignment,\n    onPopupPanelOpenClose,\n  } = useToolbarWithOverflowDirectionContext();\n\n  React.useEffect(() => {\n    const newActiveAction = getActiveAction(props.groupItem);\n    // istanbul ignore else\n    if (newActiveAction) {\n      // istanbul ignore next\n      if (newActiveAction.isActive) {\n        setActiveAction(newActiveAction);\n      } else {\n        if (activeAction && activeAction.isActive) {\n          setActiveAction({ ...activeAction, isActive: false });\n        }\n      }\n    }\n  }, [props.groupItem, activeAction]);\n\n  const processPanelOpenClose = React.useCallback(\n    (isOpening: boolean) => {\n      setPanelShown((prev) => {\n        // istanbul ignore else\n        if (prev !== isOpening) onPopupPanelOpenClose(isOpening);\n        return isOpening;\n      });\n    },\n    [setPanelShown, onPopupPanelOpenClose]\n  );\n\n  // handle open and closing popup panel\n  const onOpenPanel = React.useCallback(() => {\n    processPanelOpenClose(!isPanelShown);\n  }, [isPanelShown, processPanelOpenClose]);\n\n  // handle open and closing popup panel\n  const onGroupButtonClick = React.useCallback(() => {\n    // only execute action if not disabled\n    activeAction &&\n      !ConditionalBooleanValue.getValue(activeAction.isDisabled) &&\n      activeAction.execute();\n  }, [activeAction]);\n\n  const badge = activeAction\n    ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType)\n    : props.badge;\n  const icon = activeAction\n    ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData)\n    : props.icon;\n  const title = activeAction\n    ? ConditionalStringValue.getValue(activeAction.label)\n    : props.title;\n  const isActive = activeAction ? activeAction.isActive : props.isActive;\n  const isDisabled = ConditionalBooleanValue.getValue(\n    activeAction ? activeAction.isDisabled : props.isDisabled\n  );\n\n  const { handlePointerDown, handleButtonClick } = useDragInteraction(\n    onGroupButtonClick,\n    onOpenPanel\n  );\n\n  const className = classnames(\n    \"components-toolbar-button-item\",\n    \"components-toolbar-expandable-button\",\n    isActive && \"components-active\",\n    isDisabled && \"components-disabled-drag\",\n    props.className\n  );\n\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\n  const handleClose = React.useCallback(() => {\n    processPanelOpenClose(false);\n  }, [processPanelOpenClose]);\n  const { hasOverflow } = useToolItemEntryContext();\n  const expandsToDirection = hasOverflow\n    ? /* istanbul ignore next */ overflowExpandsTo\n    : expandsTo;\n\n  return (\n    <ToolbarPopupContext.Provider\n      value={{\n        closePanel: /* istanbul ignore next */ () =>\n          processPanelOpenClose(false),\n        setSelectedItem: /* istanbul ignore next */ (\n          buttonItem: ActionButton\n        ) => setActiveAction(buttonItem),\n      }}\n    >\n      <button\n        data-item-id={props.itemId}\n        data-item-type=\"action-tool-button\"\n        data-item-group-priority={props.groupPriority}\n        data-item-priority={props.itemPriority}\n        data-item-provider-id={props.providerId}\n        ref={targetRef}\n        onPointerDown={handlePointerDown}\n        onClick={handleButtonClick}\n        onKeyDown={props.onKeyDown}\n        className={className}\n        style={props.style}\n        title={title}\n      >\n        <div className=\"components-icon\">{icon}</div>\n        {props.badge && <div className=\"components-badge\">{badge}</div>}\n        <div className=\"components-triangle\" />\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(\n          expandsToDirection,\n          panelAlignment\n        )}\n        target={target}\n      >\n        <PopupItemsPanel\n          groupItem={props.groupItem}\n          activateOnPointerUp={true}\n        />\n      </PopupItemPopup>\n    </ToolbarPopupContext.Provider>\n  );\n}\n\n/** @internal */\nexport function toToolbarPopupRelativePosition(\n  expandsTo: Direction,\n  alignment: ToolbarPanelAlignment\n): RelativePosition {\n  // istanbul ignore next\n  switch (expandsTo) {\n    case Direction.Bottom: {\n      if (alignment === ToolbarPanelAlignment.End)\n        return RelativePosition.BottomRight;\n      return RelativePosition.BottomLeft;\n    }\n    case Direction.Left:\n      return RelativePosition.LeftTop;\n    case Direction.Right:\n      return RelativePosition.RightTop;\n    case Direction.Top:\n      return RelativePosition.Top;\n  }\n}\n"]}

package/lib/esm/components-react/toolbar/PopupItemsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupItemsPanel.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemsPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,KAAK,EAAgB,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAuBtE,UAAU,oBAAoB;IAC5B,SAAS,EAAE,WAAW,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAyI1D"}
+{"version":3,"file":"PopupItemsPanel.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemsPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAwBvE,UAAU,oBAAoB;IAC5B,SAAS,EAAE,WAAW,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAsK1D"}