@itwin/components-react 4.0.0-dev.12 → 4.0.0-dev.14

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

@@ -1,69 +1,73 @@
-"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 ToolSettings
- */
-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.ToolbarOverflowPanel = void 0;
-require("./OverflowPanel.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const core_react_1 = require("@itwin/core-react");
-const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
-const Direction_1 = require("./utilities/Direction");
-/** Displays overflown tool settings.
- * @internal
- */
-// eslint-disable-next-line react/display-name
-function ToolbarOverflowPanel(props) {
-    const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive, expandsTo, overflowExpandsTo, overflowDirection } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
-    const { proximityScale } = (0, core_react_1.useWidgetOpacityContext)();
-    const useTransparentBackground = toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Transparent;
-    let toolbarOpacity = useTransparentBackground ? 0 : core_react_1.TOOLBAR_OPACITY_DEFAULT;
-    let boxShadowOpacity = useTransparentBackground ? 0 : core_react_1.TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;
-    let filterBlur = useTransparentBackground ? 0 : core_react_1.TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;
-    let showSeparators = toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Transparent ? false : true;
-    // istanbul ignore next
-    if (toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {
-        toolbarOpacity = (0, core_react_1.calculateToolbarOpacity)(proximityScale);
-        boxShadowOpacity = (0, core_react_1.calculateBoxShadowOpacity)(proximityScale);
-        filterBlur = (0, core_react_1.calculateBackdropFilterBlur)(proximityScale);
-        if (proximityScale < .25)
-            showSeparators = false;
-    }
-    const divStyle = {
-        backgroundColor: (0, core_react_1.getToolbarBackgroundColor)(toolbarOpacity),
-        boxShadow: (0, core_react_1.getToolbarBoxShadow)(boxShadowOpacity),
-        backdropFilter: (0, core_react_1.getToolbarBackdropFilter)(filterBlur),
-        ...props.style,
-    };
-    const className = (0, classnames_1.default)("components-toolbar-overflow-panel", "components-toolbar-items-container", Direction_1.OrthogonalDirectionHelpers.getCssClassName(overflowDirection), `${Direction_1.OrthogonalDirectionHelpers.getCssClassName(overflowDirection)}-${Direction_1.DirectionHelpers.getCssClassName(expandsTo)}`, showSeparators && "components-toolbar-show-decorators", Direction_1.DirectionHelpers.getCssClassName(overflowExpandsTo), props.className);
-    return (React.createElement("div", { className: className, style: divStyle }, props.children));
-}
-exports.ToolbarOverflowPanel = ToolbarOverflowPanel;
+"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 ToolSettings
+ */
+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.ToolbarOverflowPanel = void 0;
+require("./OverflowPanel.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const core_react_1 = require("@itwin/core-react");
+const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+const Direction_1 = require("./utilities/Direction");
+/** Displays overflown tool settings.
+ * @internal
+ */
+// eslint-disable-next-line react/display-name
+function ToolbarOverflowPanel(props) {
+    const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive, expandsTo, overflowExpandsTo, overflowDirection } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
+    const { proximityScale } = (0, core_react_1.useWidgetOpacityContext)();
+    const useTransparentBackground = toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Transparent;
+    let toolbarOpacity = useTransparentBackground ? 0 : core_react_1.TOOLBAR_OPACITY_DEFAULT;
+    let boxShadowOpacity = useTransparentBackground ? 0 : core_react_1.TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;
+    let filterBlur = useTransparentBackground ? 0 : core_react_1.TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;
+    let showSeparators = toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Transparent ? false : true;
+    // istanbul ignore next
+    if (toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {
+        toolbarOpacity = (0, core_react_1.calculateToolbarOpacity)(proximityScale);
+        boxShadowOpacity = (0, core_react_1.calculateBoxShadowOpacity)(proximityScale);
+        filterBlur = (0, core_react_1.calculateBackdropFilterBlur)(proximityScale);
+        if (proximityScale < .25)
+            showSeparators = false;
+    }
+    const divStyle = {
+        backgroundColor: (0, core_react_1.getToolbarBackgroundColor)(toolbarOpacity),
+        boxShadow: (0, core_react_1.getToolbarBoxShadow)(boxShadowOpacity),
+        backdropFilter: (0, core_react_1.getToolbarBackdropFilter)(filterBlur),
+        ...props.style,
+    };
+    const className = (0, classnames_1.default)("components-toolbar-overflow-panel", "components-toolbar-items-container", Direction_1.OrthogonalDirectionHelpers.getCssClassName(overflowDirection), `${Direction_1.OrthogonalDirectionHelpers.getCssClassName(overflowDirection)}-${Direction_1.DirectionHelpers.getCssClassName(expandsTo)}`, showSeparators && "components-toolbar-show-decorators", Direction_1.DirectionHelpers.getCssClassName(overflowExpandsTo), props.className);
+    return (React.createElement("div", { className: className, style: divStyle }, props.children));
+}
+exports.ToolbarOverflowPanel = ToolbarOverflowPanel;
 //# sourceMappingURL=OverflowPanel.js.map

package/lib/cjs/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,gCAA8B;AAC9B,4DAAoC;AACpC,6CAA+B;AAC/B,kDAK2B;AAE3B,+DAAsG;AACtG,qDAAqF;AAUrF;;GAEG;AACH,8CAA8C;AAC9C,SAAgB,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,EAAE,SAAS,EAC7E,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,IAAA,4DAAsC,GAAE,CAAC;IACpF,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,oCAAuB,GAAE,CAAC;IAErD,MAAM,wBAAwB,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC;IAC7F,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oCAAuB,CAAC;IAC5E,IAAI,gBAAgB,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,+CAAkC,CAAC;IACzF,IAAI,UAAU,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iDAAoC,CAAC;IACrF,IAAI,cAAc,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhG,uBAAuB;IACvB,IAAI,qBAAqB,KAAK,2CAAqB,CAAC,SAAS,IAAI,cAAc,GAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE;QAC7G,cAAc,GAAG,IAAA,oCAAuB,EAAC,cAAc,CAAC,CAAC;QACzD,gBAAgB,GAAG,IAAA,sCAAyB,EAAC,cAAc,CAAC,CAAC;QAC7D,UAAU,GAAG,IAAA,wCAA2B,EAAC,cAAc,CAAC,CAAC;QACzD,IAAI,cAAc,GAAG,GAAG;YACtB,cAAc,GAAG,KAAK,CAAC;KAC1B;IAED,MAAM,QAAQ,GAAwB;QACpC,eAAe,EAAE,IAAA,sCAAyB,EAAC,cAAc,CAAC;QAC1D,SAAS,EAAE,IAAA,gCAAmB,EAAC,gBAAgB,CAAC;QAChD,cAAc,EAAE,IAAA,qCAAwB,EAAC,UAAU,CAAC;QACpD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,oCAAoC,EACpC,sCAA0B,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAC7D,GAAG,sCAA0B,CAAC,eAAe,CAAC,iBAAiB,CAAC,IAAI,4BAAgB,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,EACjH,cAAc,IAAI,oCAAoC,EACtD,4BAAgB,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;AA7CD,oDA6CC","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 {\r\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity,\r\n  CommonProps, 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;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,gCAA8B;AAC9B,4DAAoC;AACpC,6CAA+B;AAC/B,kDAK2B;AAE3B,+DAAsG;AACtG,qDAAqF;AAUrF;;GAEG;AACH,8CAA8C;AAC9C,SAAgB,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,EAAE,SAAS,EAC7E,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,IAAA,4DAAsC,GAAE,CAAC;IACpF,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,oCAAuB,GAAE,CAAC;IAErD,MAAM,wBAAwB,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC;IAC7F,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oCAAuB,CAAC;IAC5E,IAAI,gBAAgB,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,+CAAkC,CAAC;IACzF,IAAI,UAAU,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iDAAoC,CAAC;IACrF,IAAI,cAAc,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhG,uBAAuB;IACvB,IAAI,qBAAqB,KAAK,2CAAqB,CAAC,SAAS,IAAI,cAAc,GAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE;QAC7G,cAAc,GAAG,IAAA,oCAAuB,EAAC,cAAc,CAAC,CAAC;QACzD,gBAAgB,GAAG,IAAA,sCAAyB,EAAC,cAAc,CAAC,CAAC;QAC7D,UAAU,GAAG,IAAA,wCAA2B,EAAC,cAAc,CAAC,CAAC;QACzD,IAAI,cAAc,GAAG,GAAG;YACtB,cAAc,GAAG,KAAK,CAAC;KAC1B;IAED,MAAM,QAAQ,GAAwB;QACpC,eAAe,EAAE,IAAA,sCAAyB,EAAC,cAAc,CAAC;QAC1D,SAAS,EAAE,IAAA,gCAAmB,EAAC,gBAAgB,CAAC;QAChD,cAAc,EAAE,IAAA,qCAAwB,EAAC,UAAU,CAAC;QACpD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,oCAAoC,EACpC,sCAA0B,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAC7D,GAAG,sCAA0B,CAAC,eAAe,CAAC,iBAAiB,CAAC,IAAI,4BAAgB,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,EACjH,cAAc,IAAI,oCAAoC,EACtD,4BAAgB,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;AA7CD,oDA6CC","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 {\r\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity,\r\n  CommonProps, 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"]}

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

@@ -1,51 +1,51 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./PopupItem.scss";
-import * as React from "react";
-import { ActionButton, RelativePosition } from "@itwin/appui-abstract";
-import { ToolbarButtonItemProps } from "./Item";
-/** @public */
-export interface ToolbarPopupContextProps {
-    readonly closePanel: () => void;
-    readonly setSelectedItem?: (buttonItem: ActionButton) => void;
-}
-/**
- * Context used by Toolbar items in popups to close the popup panel.
- * @public
- */
-export declare const ToolbarPopupContext: React.Context<ToolbarPopupContextProps>;
-/**
- * React hook used to retrieve the ToolbarPopupContext.
- *  @public
- */
-export declare function useToolbarPopupContext(): ToolbarPopupContextProps;
-/** Properties of [[PopupItem]] component.
- * @public
- */
-export interface PopupItemProps extends ToolbarButtonItemProps {
-    /** Describes if expandable item triangle indicator should be hidden. */
-    hideIndicator?: boolean;
-    /** Panel of the toolbar. */
-    panel?: React.ReactNode;
-    /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the
-     * content node is unmounted each time the popup is closed. */
-    keepContentsMounted?: boolean;
-}
-/** Popup toolbar item that displays a panel
- * @public
- */
-export declare function PopupItem(props: PopupItemProps): JSX.Element;
-/** @internal */
-interface PopupItemPopupProps {
-    children?: React.ReactNode;
-    isOpen?: boolean;
-    onClose(): void;
-    position: RelativePosition;
-    target?: HTMLElement;
-    keepContentsMounted?: boolean;
-}
-/** @internal */
-export declare function PopupItemPopup(props: PopupItemPopupProps): JSX.Element;
-export {};
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./PopupItem.scss";
+import * as React from "react";
+import { ActionButton, RelativePosition } from "@itwin/appui-abstract";
+import { ToolbarButtonItemProps } from "./Item";
+/** @public */
+export interface ToolbarPopupContextProps {
+    readonly closePanel: () => void;
+    readonly setSelectedItem?: (buttonItem: ActionButton) => void;
+}
+/**
+ * Context used by Toolbar items in popups to close the popup panel.
+ * @public
+ */
+export declare const ToolbarPopupContext: React.Context<ToolbarPopupContextProps>;
+/**
+ * React hook used to retrieve the ToolbarPopupContext.
+ *  @public
+ */
+export declare function useToolbarPopupContext(): ToolbarPopupContextProps;
+/** Properties of [[PopupItem]] component.
+ * @public
+ */
+export interface PopupItemProps extends ToolbarButtonItemProps {
+    /** Describes if expandable item triangle indicator should be hidden. */
+    hideIndicator?: boolean;
+    /** Panel of the toolbar. */
+    panel?: React.ReactNode;
+    /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the
+     * content node is unmounted each time the popup is closed. */
+    keepContentsMounted?: boolean;
+}
+/** Popup toolbar item that displays a panel
+ * @public
+ */
+export declare function PopupItem(props: PopupItemProps): JSX.Element;
+/** @internal */
+interface PopupItemPopupProps {
+    children?: React.ReactNode;
+    isOpen?: boolean;
+    onClose(): void;
+    position: RelativePosition;
+    target?: HTMLElement;
+    keepContentsMounted?: boolean;
+}
+/** @internal */
+export declare function PopupItemPopup(props: PopupItemPopupProps): JSX.Element;
+export {};
 //# sourceMappingURL=PopupItem.d.ts.map

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

@@ -1,106 +1,110 @@
-"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.PopupItemPopup = exports.PopupItem = exports.useToolbarPopupContext = exports.ToolbarPopupContext = void 0;
-require("./PopupItem.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const core_react_1 = require("@itwin/core-react");
-const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
-const PopupItemWithDrag_1 = require("./PopupItemWithDrag");
-/**
- * Context used by Toolbar items in popups to close the popup panel.
- * @public
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-exports.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
- */
-function useToolbarPopupContext() {
-    return React.useContext(exports.ToolbarPopupContext);
-}
-exports.useToolbarPopupContext = useToolbarPopupContext;
-/** Popup toolbar item that displays a panel
- * @public
- */
-function PopupItem(props) {
-    const [isPanelShown, setPanelShown] = React.useState(false);
-    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = (0, ToolbarWithOverflow_1.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 = (0, classnames_1.default)("components-toolbar-button-item", "components-toolbar-expandable-button", props.isDisabled && "components-disabled", props.className);
-    const [targetRef, target] = (0, core_react_1.useRefState)();
-    // istanbul ignore next
-    const handleClose = React.useCallback(() => {
-        processPanelOpenClose(false);
-    }, [processPanelOpenClose]);
-    const { hasOverflow } = (0, ToolbarWithOverflow_1.useToolItemEntryContext)();
-    const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;
-    const { hideIndicator, panel } = props;
-    return (React.createElement(exports.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: (0, PopupItemWithDrag_1.toToolbarPopupRelativePosition)(expandsToDirection, panelAlignment), target: target, keepContentsMounted: props.keepContentsMounted }, panel)));
-}
-exports.PopupItem = PopupItem;
-/** @internal */
-function PopupItemPopup(props) {
-    const isHidden = (0, ToolbarWithOverflow_1.useToolbarPopupAutoHideContext)();
-    const className = (0, classnames_1.default)("components-toolbar-popupItem_popupItemPopup", isHidden && "nz-hidden");
-    return React.createElement(core_react_1.Popup, { className: className, offset: 0, showShadow: false, ...props });
-}
-exports.PopupItemPopup = PopupItemPopup;
+"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.PopupItemPopup = exports.PopupItem = exports.useToolbarPopupContext = exports.ToolbarPopupContext = void 0;
+require("./PopupItem.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const core_react_1 = require("@itwin/core-react");
+const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+const PopupItemWithDrag_1 = require("./PopupItemWithDrag");
+/**
+ * Context used by Toolbar items in popups to close the popup panel.
+ * @public
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.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
+ */
+function useToolbarPopupContext() {
+    return React.useContext(exports.ToolbarPopupContext);
+}
+exports.useToolbarPopupContext = useToolbarPopupContext;
+/** Popup toolbar item that displays a panel
+ * @public
+ */
+function PopupItem(props) {
+    const [isPanelShown, setPanelShown] = React.useState(false);
+    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = (0, ToolbarWithOverflow_1.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 = (0, classnames_1.default)("components-toolbar-button-item", "components-toolbar-expandable-button", props.isDisabled && "components-disabled", props.className);
+    const [targetRef, target] = (0, core_react_1.useRefState)();
+    // istanbul ignore next
+    const handleClose = React.useCallback(() => {
+        processPanelOpenClose(false);
+    }, [processPanelOpenClose]);
+    const { hasOverflow } = (0, ToolbarWithOverflow_1.useToolItemEntryContext)();
+    const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;
+    const { hideIndicator, panel } = props;
+    return (React.createElement(exports.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: (0, PopupItemWithDrag_1.toToolbarPopupRelativePosition)(expandsToDirection, panelAlignment), target: target, keepContentsMounted: props.keepContentsMounted }, panel)));
+}
+exports.PopupItem = PopupItem;
+/** @internal */
+function PopupItemPopup(props) {
+    const isHidden = (0, ToolbarWithOverflow_1.useToolbarPopupAutoHideContext)();
+    const className = (0, classnames_1.default)("components-toolbar-popupItem_popupItemPopup", isHidden && "nz-hidden");
+    return React.createElement(core_react_1.Popup, { className: className, offset: 0, showShadow: false, ...props });
+}
+exports.PopupItemPopup = PopupItemPopup;
 //# sourceMappingURL=PopupItem.js.map

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":["/*---------------------------------------------------------------------------------------------\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"]}

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