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

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":["/*---------------------------------------------------------------------------------------------\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 {\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity,\n  CommonProps, getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT, TOOLBAR_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\n\nimport { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\nimport { DirectionHelpers, OrthogonalDirectionHelpers } 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 */\n// eslint-disable-next-line react/display-name\nexport function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps) {\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive, expandsTo,\n    overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();\n  const { proximityScale } = useWidgetOpacityContext();\n\n  const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n  let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT;\n  let boxShadowOpacity = useTransparentBackground ? 0 : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  // istanbul ignore next\n  if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    if (proximityScale < .25)\n      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(overflowDirection)}-${DirectionHelpers.getCssClassName(expandsTo)}`,\n    showSeparators && \"components-toolbar-show-decorators\",\n    DirectionHelpers.getCssClassName(overflowExpandsTo),\n    props.className,\n  );\n\n  return (\n    <div\n      className={className}\n      style={divStyle}\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/cjs/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/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