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

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

@@ -1 +1 @@
-{"version":3,"file":"Items.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Items.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 \"./Items.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport {\r\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, CommonProps,\r\n  getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow,\r\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\r\n  useWidgetOpacityContext,\r\n} from \"@itwin/core-react\";\r\nimport { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\r\nimport { OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\r\n\r\n/** Properties of [[ToolbarItems]] component.\r\n * @internal\r\n */\r\nexport interface ToolbarItemsProps extends CommonProps {\r\n  /** Toolbar items. */\r\n  children?: React.ReactNode;\r\n  /** Toolbar items direction. */\r\n  direction: OrthogonalDirection;\r\n}\r\n\r\n/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.\r\n * @internal\r\n */\r\nexport function ToolbarItems(props: ToolbarItemsProps) {\r\n\r\n  const ref = React.useRef<HTMLDivElement>(null);\r\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = useToolbarWithOverflowDirectionContext();\r\n  const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\r\n\r\n  let toolbarOpacity = useTransparentBackground ? 0 : Number(document.documentElement.style.getPropertyValue(\"--buic-toolbar-opacity\"));\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  const isInitialMount = React.useRef(true);\r\n  const { onElementRef, proximityScale } = useWidgetOpacityContext();\r\n\r\n  React.useEffect(() => {\r\n    // istanbul ignore else\r\n    if (isInitialMount.current) {\r\n      isInitialMount.current = false;\r\n      onElementRef(ref);\r\n    }\r\n  }, [onElementRef]);\r\n\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    // istanbul ignore next\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-items-container\",\r\n    OrthogonalDirectionHelpers.getCssClassName(props.direction),\r\n    showSeparators && \"components-toolbar-show-decorators\",\r\n    props.className);\r\n\r\n  return (\r\n    <div\r\n      className={className}\r\n      style={divStyle}\r\n      ref={ref}\r\n    >\r\n      {props.children}\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"Items.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Items.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 \"./Items.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, CommonProps,\n  getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\nimport { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\nimport { OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\n\n/** Properties of [[ToolbarItems]] component.\n * @internal\n */\nexport interface ToolbarItemsProps extends CommonProps {\n  /** Toolbar items. */\n  children?: React.ReactNode;\n  /** Toolbar items direction. */\n  direction: OrthogonalDirection;\n}\n\n/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.\n * @internal\n */\nexport function ToolbarItems(props: ToolbarItemsProps) {\n\n  const ref = React.useRef<HTMLDivElement>(null);\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = useToolbarWithOverflowDirectionContext();\n  const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n\n  let toolbarOpacity = useTransparentBackground ? 0 : Number(document.documentElement.style.getPropertyValue(\"--buic-toolbar-opacity\"));\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  const isInitialMount = React.useRef(true);\n  const { onElementRef, proximityScale } = useWidgetOpacityContext();\n\n  React.useEffect(() => {\n    // istanbul ignore else\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n      onElementRef(ref);\n    }\n  }, [onElementRef]);\n\n  if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    // istanbul ignore next\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-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(props.direction),\n    showSeparators && \"components-toolbar-show-decorators\",\n    props.className);\n\n  return (\n    <div\n      className={className}\n      style={divStyle}\n      ref={ref}\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}

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

@@ -1,96 +1,96 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "variables";
-
-$separator-color: var(--iui-color-border-subtle);
-
-.components-toolbar-items-container {
-  $border-radius: var(--iui-border-radius-1);
-
-  border-radius: $border-radius;
-  display: inline-block;
-  vertical-align: bottom;
-  box-sizing: border-box;
-
-  box-shadow: var(--iui-shadow-1);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  pointer-events: auto;
-
-  &.components-vertical {
-    width: $components-desktop-toolbar-width;
-
-    > * {
-      height: $components-desktop-item-height;
-
-      &:not(:first-child) {
-        margin-top: $components-desktop-space-between-toolbar-items;
-
-        &:before {
-          content: "";
-          display: block;
-          position: absolute;
-          pointer-events: none;
-          height: $components-desktop-space-between-toolbar-items;
-          width: 100%;
-          left: 0;
-          top: -$components-desktop-space-between-toolbar-items;
-        }
-      }
-    }
-  }
-
-  &.components-horizontal {
-    height: $components-desktop-toolbar-height;
-
-    > * {
-      display: inline-block;
-      height: 100%;
-      width: $components-desktop-item-width;
-
-      &:not(:first-child) {
-        margin-left: $components-desktop-space-between-toolbar-items;
-
-        &:before {
-          content: "";
-          display: block;
-          position: absolute;
-          pointer-events: none;
-          width: $components-desktop-space-between-toolbar-items;
-          height: 100%;
-          left: -$components-desktop-space-between-toolbar-items;
-          top: 0;
-        }
-      }
-    }
-  }
-
-  > * {
-    vertical-align: bottom;
-  }
-}
-
-/* modifications to the style to support the appearance of a tool button separator  */
-.components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before {
-  margin-left: $components-desktop-separator-gap-between-toolbar-items;
-}
-
-div.components-toolbar-items-container.components-toolbar-show-decorators
-  .components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before::before {
-  width: $components-desktop-separator-thickness;
-  background-color: $separator-color;
-  left: $components-desktop-separator-center-offset;
-}
-
-.components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before {
-  margin-top: $components-desktop-separator-gap-between-toolbar-items;
-}
-
-div.components-toolbar-items-container.components-toolbar-show-decorators
-  .components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before::before {
-  height: $components-desktop-separator-thickness;
-  background-color: $separator-color;
-  top: $components-desktop-separator-center-offset;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+$separator-color: var(--iui-color-border-subtle);
+
+.components-toolbar-items-container {
+  $border-radius: var(--iui-border-radius-1);
+
+  border-radius: $border-radius;
+  display: inline-block;
+  vertical-align: bottom;
+  box-sizing: border-box;
+
+  box-shadow: var(--iui-shadow-1);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  pointer-events: auto;
+
+  &.components-vertical {
+    width: $components-desktop-toolbar-width;
+
+    > * {
+      height: $components-desktop-item-height;
+
+      &:not(:first-child) {
+        margin-top: $components-desktop-space-between-toolbar-items;
+
+        &:before {
+          content: "";
+          display: block;
+          position: absolute;
+          pointer-events: none;
+          height: $components-desktop-space-between-toolbar-items;
+          width: 100%;
+          left: 0;
+          top: -$components-desktop-space-between-toolbar-items;
+        }
+      }
+    }
+  }
+
+  &.components-horizontal {
+    height: $components-desktop-toolbar-height;
+
+    > * {
+      display: inline-block;
+      height: 100%;
+      width: $components-desktop-item-width;
+
+      &:not(:first-child) {
+        margin-left: $components-desktop-space-between-toolbar-items;
+
+        &:before {
+          content: "";
+          display: block;
+          position: absolute;
+          pointer-events: none;
+          width: $components-desktop-space-between-toolbar-items;
+          height: 100%;
+          left: -$components-desktop-space-between-toolbar-items;
+          top: 0;
+        }
+      }
+    }
+  }
+
+  > * {
+    vertical-align: bottom;
+  }
+}
+
+/* modifications to the style to support the appearance of a tool button separator  */
+.components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before {
+  margin-left: $components-desktop-separator-gap-between-toolbar-items;
+}
+
+div.components-toolbar-items-container.components-toolbar-show-decorators
+  .components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before::before {
+  width: $components-desktop-separator-thickness;
+  background-color: $separator-color;
+  left: $components-desktop-separator-center-offset;
+}
+
+.components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before {
+  margin-top: $components-desktop-separator-gap-between-toolbar-items;
+}
+
+div.components-toolbar-items-container.components-toolbar-show-decorators
+  .components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before::before {
+  height: $components-desktop-separator-thickness;
+  background-color: $separator-color;
+  top: $components-desktop-separator-center-offset;
+}

package/lib/esm/components-react/toolbar/Overflow.d.ts

@@ -1,32 +1,32 @@
-/** @packageDocumentation
- * @module ToolSettings
- */
-import "./Overflow.scss";
-import * as React from "react";
-import { CommonProps, NoChildrenProps } from "@itwin/core-react";
-import { Direction } from "./utilities/Direction";
-import { RelativePosition } from "@itwin/appui-abstract";
-/** Properties of [[ToolbarOverflowButton]] component.
- * @internal
- */
-export interface ToolbarOverflowButtonProps extends CommonProps, NoChildrenProps {
-    /** Function called when button is clicked. */
-    onClick?: () => void;
-    /** Function called when panel is closed. */
-    onClose?: () => void;
-    /** Describes if the panel is open. */
-    open?: boolean;
-    /** Panel expand direction. */
-    expandsTo: Direction;
-    /** Panel element containing the overflown buttons */
-    panelNode?: React.ReactNode;
-    /** Title for the item. */
-    title?: string;
-}
-/** Button to toggle display of overflown tools.
- * @internal
- */
-export declare function ToolbarOverflowButton(props: ToolbarOverflowButtonProps): JSX.Element;
-/** @internal */
-export declare function toToolbarOverflowRelativePosition(expandsTo: Direction): RelativePosition;
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./Overflow.scss";
+import * as React from "react";
+import { CommonProps, NoChildrenProps } from "@itwin/core-react";
+import { Direction } from "./utilities/Direction";
+import { RelativePosition } from "@itwin/appui-abstract";
+/** Properties of [[ToolbarOverflowButton]] component.
+ * @internal
+ */
+export interface ToolbarOverflowButtonProps extends CommonProps, NoChildrenProps {
+    /** Function called when button is clicked. */
+    onClick?: () => void;
+    /** Function called when panel is closed. */
+    onClose?: () => void;
+    /** Describes if the panel is open. */
+    open?: boolean;
+    /** Panel expand direction. */
+    expandsTo: Direction;
+    /** Panel element containing the overflown buttons */
+    panelNode?: React.ReactNode;
+    /** Title for the item. */
+    title?: string;
+}
+/** Button to toggle display of overflown tools.
+ * @internal
+ */
+export declare function ToolbarOverflowButton(props: ToolbarOverflowButtonProps): JSX.Element;
+/** @internal */
+export declare function toToolbarOverflowRelativePosition(expandsTo: Direction): RelativePosition;
 //# sourceMappingURL=Overflow.d.ts.map

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

@@ -1,46 +1,46 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "./Overflow.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Popup, useRefState } from "@itwin/core-react";
-import { useToolbarPopupAutoHideContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
-import { useResizeObserverSingleDimension } from "./ItemWrapper";
-import { Direction } from "./utilities/Direction";
-import { RelativePosition } from "@itwin/appui-abstract";
-/** Button to toggle display of overflown tools.
- * @internal
- */
-export function ToolbarOverflowButton(props) {
-    const { onResize, useHeight } = useToolItemEntryContext();
-    const [targetRef, target] = useRefState();
-    const ref = useResizeObserverSingleDimension(onResize, useHeight);
-    const isHidden = useToolbarPopupAutoHideContext();
-    const popupClassName = classnames("components-toolbar-overflow_popup", isHidden && "nz-hidden");
-    const className = classnames("components-toolbar-item-container", "components-toolbar-overflow-button", props.className);
-    const buttonClassName = classnames("components-toolbar-button-item", "components-ellipsis-icon");
-    return (React.createElement("div", { className: className, ref: targetRef },
-        React.createElement("button", { ref: ref, onClick: props.onClick, className: buttonClassName, style: props.style, title: props.title },
-            React.createElement("div", { className: "components-icon" },
-                React.createElement("div", { className: "components-ellipsis" }))),
-        React.createElement(Popup, { className: popupClassName, offset: 0, showShadow: false, isOpen: props.open, onClose: props.onClose, position: toToolbarOverflowRelativePosition(props.expandsTo), target: target }, props.panelNode)));
-}
-/** @internal */
-export function toToolbarOverflowRelativePosition(expandsTo) {
-    switch (expandsTo) {
-        case Direction.Bottom:
-            return RelativePosition.Bottom;
-        case Direction.Left:
-            return RelativePosition.Left;
-        case Direction.Right:
-            return RelativePosition.Right;
-        case Direction.Top:
-            return RelativePosition.Top;
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./Overflow.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Popup, useRefState } from "@itwin/core-react";
+import { useToolbarPopupAutoHideContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
+import { useResizeObserverSingleDimension } from "./ItemWrapper";
+import { Direction } from "./utilities/Direction";
+import { RelativePosition } from "@itwin/appui-abstract";
+/** Button to toggle display of overflown tools.
+ * @internal
+ */
+export function ToolbarOverflowButton(props) {
+    const { onResize, useHeight } = useToolItemEntryContext();
+    const [targetRef, target] = useRefState();
+    const ref = useResizeObserverSingleDimension(onResize, useHeight);
+    const isHidden = useToolbarPopupAutoHideContext();
+    const popupClassName = classnames("components-toolbar-overflow_popup", isHidden && "nz-hidden");
+    const className = classnames("components-toolbar-item-container", "components-toolbar-overflow-button", props.className);
+    const buttonClassName = classnames("components-toolbar-button-item", "components-ellipsis-icon");
+    return (React.createElement("div", { className: className, ref: targetRef },
+        React.createElement("button", { ref: ref, onClick: props.onClick, className: buttonClassName, style: props.style, title: props.title },
+            React.createElement("div", { className: "components-icon" },
+                React.createElement("div", { className: "components-ellipsis" }))),
+        React.createElement(Popup, { className: popupClassName, offset: 0, showShadow: false, isOpen: props.open, onClose: props.onClose, position: toToolbarOverflowRelativePosition(props.expandsTo), target: target }, props.panelNode)));
+}
+/** @internal */
+export function toToolbarOverflowRelativePosition(expandsTo) {
+    switch (expandsTo) {
+        case Direction.Bottom:
+            return RelativePosition.Bottom;
+        case Direction.Left:
+            return RelativePosition.Left;
+        case Direction.Right:
+            return RelativePosition.Right;
+        case Direction.Top:
+            return RelativePosition.Top;
+    }
+}
 //# sourceMappingURL=Overflow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Overflow.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAgC,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrF,OAAO,EAAE,8BAA8B,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChG,OAAO,EAAE,gCAAgC,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAoBzD;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAiC;IACrE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAC1D,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,WAAW,EAAkB,CAAC;IAC1D,MAAM,GAAG,GAAG,gCAAgC,CAAoB,QAAQ,EAAE,SAAS,CAAC,CAAC;IACrF,MAAM,QAAQ,GAAG,8BAA8B,EAAE,CAAC;IAClD,MAAM,cAAc,GAAG,UAAU,CAC/B,mCAAmC,EACnC,QAAQ,IAAI,WAAW,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,oCAAoC,EACpC,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,MAAM,eAAe,GAAG,UAAU,CAChC,gCAAgC,EAChC,0BAA0B,CAC3B,CAAC;IACF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,SAAS;QAEd,gCACE,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK;YAElB,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,qBAAqB,GAAG,CACnC,CACC;QACT,oBAAC,KAAK,IACJ,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,CAAC,EACT,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,iCAAiC,CAAC,KAAK,CAAC,SAAS,CAAC,EAC5D,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,SAAS,CACV,CACJ,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,iCAAiC,CAAC,SAAoB;IACpE,QAAQ,SAAS,EAAE;QACjB,KAAK,SAAS,CAAC,MAAM;YACnB,OAAO,gBAAgB,CAAC,MAAM,CAAC;QACjC,KAAK,SAAS,CAAC,IAAI;YACjB,OAAO,gBAAgB,CAAC,IAAI,CAAC;QAC/B,KAAK,SAAS,CAAC,KAAK;YAClB,OAAO,gBAAgB,CAAC,KAAK,CAAC;QAChC,KAAK,SAAS,CAAC,GAAG;YAChB,OAAO,gBAAgB,CAAC,GAAG,CAAC;KAC/B;AACH,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 \"./Overflow.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, NoChildrenProps, Popup, useRefState } from \"@itwin/core-react\";\r\nimport { useToolbarPopupAutoHideContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\r\nimport { useResizeObserverSingleDimension } from \"./ItemWrapper\";\r\nimport { Direction } from \"./utilities/Direction\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\n\r\n/** Properties of [[ToolbarOverflowButton]] component.\r\n * @internal\r\n */\r\nexport interface ToolbarOverflowButtonProps extends CommonProps, NoChildrenProps {\r\n  /** Function called when button is clicked. */\r\n  onClick?: () => void;\r\n  /** Function called when panel is closed. */\r\n  onClose?: () => void;\r\n  /** Describes if the panel is open. */\r\n  open?: boolean;\r\n  /** Panel expand direction. */\r\n  expandsTo: Direction;\r\n  /** Panel element containing the overflown buttons */\r\n  panelNode?: React.ReactNode;\r\n  /** Title for the item. */\r\n  title?: string;\r\n}\r\n\r\n/** Button to toggle display of overflown tools.\r\n * @internal\r\n */\r\nexport function ToolbarOverflowButton(props: ToolbarOverflowButtonProps) {\r\n  const { onResize, useHeight } = useToolItemEntryContext();\r\n  const [targetRef, target] = useRefState<HTMLDivElement>();\r\n  const ref = useResizeObserverSingleDimension<HTMLButtonElement>(onResize, useHeight);\r\n  const isHidden = useToolbarPopupAutoHideContext();\r\n  const popupClassName = classnames(\r\n    \"components-toolbar-overflow_popup\",\r\n    isHidden && \"nz-hidden\");\r\n\r\n  const className = classnames(\r\n    \"components-toolbar-item-container\",\r\n    \"components-toolbar-overflow-button\",\r\n    props.className,\r\n  );\r\n  const buttonClassName = classnames(\r\n    \"components-toolbar-button-item\",\r\n    \"components-ellipsis-icon\",\r\n  );\r\n  return (\r\n    <div\r\n      className={className}\r\n      ref={targetRef}\r\n    >\r\n      <button\r\n        ref={ref}\r\n        onClick={props.onClick}\r\n        className={buttonClassName}\r\n        style={props.style}\r\n        title={props.title}\r\n      >\r\n        <div className=\"components-icon\">\r\n          <div className=\"components-ellipsis\" />\r\n        </div>\r\n      </button>\r\n      <Popup\r\n        className={popupClassName}\r\n        offset={0}\r\n        showShadow={false}\r\n        isOpen={props.open}\r\n        onClose={props.onClose}\r\n        position={toToolbarOverflowRelativePosition(props.expandsTo)}\r\n        target={target}\r\n      >\r\n        {props.panelNode}\r\n      </Popup>\r\n    </div>\r\n  );\r\n}\r\n\r\n/** @internal */\r\nexport function toToolbarOverflowRelativePosition(expandsTo: Direction): RelativePosition {\r\n  switch (expandsTo) {\r\n    case Direction.Bottom:\r\n      return RelativePosition.Bottom;\r\n    case Direction.Left:\r\n      return RelativePosition.Left;\r\n    case Direction.Right:\r\n      return RelativePosition.Right;\r\n    case Direction.Top:\r\n      return RelativePosition.Top;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Overflow.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAgC,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrF,OAAO,EAAE,8BAA8B,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChG,OAAO,EAAE,gCAAgC,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAoBzD;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAiC;IACrE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAC1D,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,WAAW,EAAkB,CAAC;IAC1D,MAAM,GAAG,GAAG,gCAAgC,CAAoB,QAAQ,EAAE,SAAS,CAAC,CAAC;IACrF,MAAM,QAAQ,GAAG,8BAA8B,EAAE,CAAC;IAClD,MAAM,cAAc,GAAG,UAAU,CAC/B,mCAAmC,EACnC,QAAQ,IAAI,WAAW,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,oCAAoC,EACpC,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,MAAM,eAAe,GAAG,UAAU,CAChC,gCAAgC,EAChC,0BAA0B,CAC3B,CAAC;IACF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,SAAS;QAEd,gCACE,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK;YAElB,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,qBAAqB,GAAG,CACnC,CACC;QACT,oBAAC,KAAK,IACJ,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,CAAC,EACT,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,iCAAiC,CAAC,KAAK,CAAC,SAAS,CAAC,EAC5D,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,SAAS,CACV,CACJ,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,iCAAiC,CAAC,SAAoB;IACpE,QAAQ,SAAS,EAAE;QACjB,KAAK,SAAS,CAAC,MAAM;YACnB,OAAO,gBAAgB,CAAC,MAAM,CAAC;QACjC,KAAK,SAAS,CAAC,IAAI;YACjB,OAAO,gBAAgB,CAAC,IAAI,CAAC;QAC/B,KAAK,SAAS,CAAC,KAAK;YAClB,OAAO,gBAAgB,CAAC,KAAK,CAAC;QAChC,KAAK,SAAS,CAAC,GAAG;YAChB,OAAO,gBAAgB,CAAC,GAAG,CAAC;KAC/B;AACH,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 \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps, NoChildrenProps, Popup, useRefState } from \"@itwin/core-react\";\nimport { useToolbarPopupAutoHideContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\nimport { useResizeObserverSingleDimension } from \"./ItemWrapper\";\nimport { Direction } from \"./utilities/Direction\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\n\n/** Properties of [[ToolbarOverflowButton]] component.\n * @internal\n */\nexport interface ToolbarOverflowButtonProps extends CommonProps, NoChildrenProps {\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Function called when panel is closed. */\n  onClose?: () => void;\n  /** Describes if the panel is open. */\n  open?: boolean;\n  /** Panel expand direction. */\n  expandsTo: Direction;\n  /** Panel element containing the overflown buttons */\n  panelNode?: React.ReactNode;\n  /** Title for the item. */\n  title?: string;\n}\n\n/** Button to toggle display of overflown tools.\n * @internal\n */\nexport function ToolbarOverflowButton(props: ToolbarOverflowButtonProps) {\n  const { onResize, useHeight } = useToolItemEntryContext();\n  const [targetRef, target] = useRefState<HTMLDivElement>();\n  const ref = useResizeObserverSingleDimension<HTMLButtonElement>(onResize, useHeight);\n  const isHidden = useToolbarPopupAutoHideContext();\n  const popupClassName = classnames(\n    \"components-toolbar-overflow_popup\",\n    isHidden && \"nz-hidden\");\n\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    \"components-toolbar-overflow-button\",\n    props.className,\n  );\n  const buttonClassName = classnames(\n    \"components-toolbar-button-item\",\n    \"components-ellipsis-icon\",\n  );\n  return (\n    <div\n      className={className}\n      ref={targetRef}\n    >\n      <button\n        ref={ref}\n        onClick={props.onClick}\n        className={buttonClassName}\n        style={props.style}\n        title={props.title}\n      >\n        <div className=\"components-icon\">\n          <div className=\"components-ellipsis\" />\n        </div>\n      </button>\n      <Popup\n        className={popupClassName}\n        offset={0}\n        showShadow={false}\n        isOpen={props.open}\n        onClose={props.onClose}\n        position={toToolbarOverflowRelativePosition(props.expandsTo)}\n        target={target}\n      >\n        {props.panelNode}\n      </Popup>\n    </div>\n  );\n}\n\n/** @internal */\nexport function toToolbarOverflowRelativePosition(expandsTo: Direction): RelativePosition {\n  switch (expandsTo) {\n    case Direction.Bottom:\n      return RelativePosition.Bottom;\n    case Direction.Left:\n      return RelativePosition.Left;\n    case Direction.Right:\n      return RelativePosition.Right;\n    case Direction.Top:\n      return RelativePosition.Top;\n  }\n}\n"]}

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

@@ -1,57 +1,57 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "variables";
-
-.components-toolbar-button-item.components-ellipsis-icon {
-  position: relative;
-  $ellipsis-size: 4px;
-  $ellipsis-spacing: 8px;
-
-  > .components-icon {
-    .components-ellipsis {
-      position: relative;
-      width: $ellipsis-size;
-      height: $ellipsis-size;
-      border-radius: 50%;
-      background-color: currentColor;
-    }
-
-    .components-ellipsis:before {
-      content: "";
-      position: absolute;
-      left: -$ellipsis-spacing;
-      width: $ellipsis-size;
-      height: $ellipsis-size;
-      border-radius: 50%;
-      background-color: currentColor;
-    }
-
-    .components-ellipsis:after {
-      content: "";
-      position: absolute;
-      left: $ellipsis-spacing;
-      width: $ellipsis-size;
-      height: $ellipsis-size;
-      border-radius: 50%;
-      background-color: currentColor;
-    }
-  }
-}
-
-.components-toolbar-overflow_popup {
-  border: none;
-  background: none;
-
-  @include uicore-z-index(toolbar-panels);
-
-  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 "variables";
+
+.components-toolbar-button-item.components-ellipsis-icon {
+  position: relative;
+  $ellipsis-size: 4px;
+  $ellipsis-spacing: 8px;
+
+  > .components-icon {
+    .components-ellipsis {
+      position: relative;
+      width: $ellipsis-size;
+      height: $ellipsis-size;
+      border-radius: 50%;
+      background-color: currentColor;
+    }
+
+    .components-ellipsis:before {
+      content: "";
+      position: absolute;
+      left: -$ellipsis-spacing;
+      width: $ellipsis-size;
+      height: $ellipsis-size;
+      border-radius: 50%;
+      background-color: currentColor;
+    }
+
+    .components-ellipsis:after {
+      content: "";
+      position: absolute;
+      left: $ellipsis-spacing;
+      width: $ellipsis-size;
+      height: $ellipsis-size;
+      border-radius: 50%;
+      background-color: currentColor;
+    }
+  }
+}
+
+.components-toolbar-overflow_popup {
+  border: none;
+  background: none;
+
+  @include uicore-z-index(toolbar-panels);
+
+  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/OverflowPanel.d.ts

@@ -1,18 +1,18 @@
-/** @packageDocumentation
- * @module ToolSettings
- */
-import "./OverflowPanel.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[ToolbarOverflowPanel]] component.
- * @internal
- */
-export interface ToolbarOverflowPanelProps extends CommonProps {
-    /** Panel content. */
-    children?: React.ReactNode;
-}
-/** Displays overflown tool settings.
- * @internal
- */
-export declare function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps): JSX.Element;
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./OverflowPanel.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolbarOverflowPanel]] component.
+ * @internal
+ */
+export interface ToolbarOverflowPanelProps extends CommonProps {
+    /** Panel content. */
+    children?: React.ReactNode;
+}
+/** Displays overflown tool settings.
+ * @internal
+ */
+export declare function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps): JSX.Element;
 //# sourceMappingURL=OverflowPanel.d.ts.map