@itwin/components-react 3.7.0 → 3.7.1

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

@@ -1,123 +1,123 @@
-/*---------------------------------------------------------------------------------------------
-* 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-button-item {
-  box-sizing: border-box;
-  background-origin: border-box;
-  border-color: transparent;
-  border-style: solid;
-  cursor: pointer;
-  transition: background-color 250ms ease;
-  position: relative;
-  background: transparent;
-
-  height: 100%;
-  width: 100%;
-
-  outline-style: solid;
-  outline-width: 0;
-
-  > .components-icon {
-    font-size: $icon-size;
-    width: 100%;
-    height: 100%;
-    display: grid;
-    align-content: center;
-    justify-content: center;
-    color: $icon-color;
-    filter: $icon-shadow;
-    transition: all 250ms ease;
-
-    img {
-      width: $icon-size;
-      height: $icon-size;
-    }
-  }
-
-  &:focus {
-    color: $hovered-icon-color;
-    background-color: $buic-background-focus-overlay;
-
-    svg {
-      opacity: 1;
-    }
-  }
-
-  &:hover {
-    color: $hovered-icon-color;
-    background-color: $buic-background-hover-overlay;
-
-    svg {
-      opacity: 1;
-    }
-  }
-
-  &:active {
-    color: $active-icon-color;
-    background-color: $buic-background-active-overlay;
-    border: solid 2px $buic-foreground-primary;
-
-    > .components-icon {
-      color: $pressed-icon-color;
-
-      svg {
-        opacity: 1;
-      }
-    }
-  }
-
-  &:active:not(.components-disabled) {
-    background: $buic-background-pressed-overlay;
-    color: $pressed-icon-color;
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
-  }
-
-  &.components-active {
-    color: $active-icon-color;
-    background-color: $buic-background-active-overlay;
-    border: solid 2px $buic-foreground-primary;
-
-    &:not(:active):not(.components-disabled) {
-      transition-duration: 0s;
-
-      > .components-icon {
-        color: $icon-color;
-        transition-duration: 150ms;
-        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
-
-        svg {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &.components-disabled {
-    > .components-icon {
-      color: $disabled-icon-color;
-    }
-
-    &:hover {
-      cursor: auto;
-    }
-
-    &:active {
-      pointer-events: none;
-    }
-  }
-
-  > .components-badge {
-    display: none;
-  }
-}
-
-div.components-toolbar-items-container.components-toolbar-show-decorators .components-toolbar-button-item>.components-badge {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
+/*---------------------------------------------------------------------------------------------
+* 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-button-item {
+  box-sizing: border-box;
+  background-origin: border-box;
+  border-color: transparent;
+  border-style: solid;
+  cursor: pointer;
+  transition: background-color 250ms ease;
+  position: relative;
+  background: transparent;
+
+  height: 100%;
+  width: 100%;
+
+  outline-style: solid;
+  outline-width: 0;
+
+  > .components-icon {
+    font-size: $icon-size;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    color: $icon-color;
+    filter: $icon-shadow;
+    transition: all 250ms ease;
+
+    img {
+      width: $icon-size;
+      height: $icon-size;
+    }
+  }
+
+  &:focus {
+    color: $hovered-icon-color;
+    background-color: $buic-background-focus-overlay;
+
+    svg {
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    color: $hovered-icon-color;
+    background-color: $buic-background-hover-overlay;
+
+    svg {
+      opacity: 1;
+    }
+  }
+
+  &:active {
+    color: $active-icon-color;
+    background-color: $buic-background-active-overlay;
+    border: solid 2px $buic-foreground-primary;
+
+    > .components-icon {
+      color: $pressed-icon-color;
+
+      svg {
+        opacity: 1;
+      }
+    }
+  }
+
+  &:active:not(.components-disabled) {
+    background: $buic-background-pressed-overlay;
+    color: $pressed-icon-color;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
+  }
+
+  &.components-active {
+    color: $active-icon-color;
+    background-color: $buic-background-active-overlay;
+    border: solid 2px $buic-foreground-primary;
+
+    &:not(:active):not(.components-disabled) {
+      transition-duration: 0s;
+
+      > .components-icon {
+        color: $icon-color;
+        transition-duration: 150ms;
+        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
+
+        svg {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &.components-disabled {
+    > .components-icon {
+      color: $disabled-icon-color;
+    }
+
+    &:hover {
+      cursor: auto;
+    }
+
+    &:active {
+      pointer-events: none;
+    }
+  }
+
+  > .components-badge {
+    display: none;
+  }
+}
+
+div.components-toolbar-items-container.components-toolbar-show-decorators .components-toolbar-button-item>.components-badge {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
 }

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

@@ -1,20 +1,20 @@
-/** @packageDocumentation
- * @module ToolSettings
- */
-import "./ItemWrapper.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[ItemWrapper]] component.
- * @internal future
- */
-export interface ItemWrapperProps extends CommonProps {
-    /** Tool setting content. */
-    children?: React.ReactNode;
-}
-/** Used in a [[ItemWrapper]] component to display a setting.
- * @internal future
- */
-export declare function ItemWrapper(props: ItemWrapperProps): JSX.Element;
-/** @internal */
-export declare function useResizeObserverSingleDimension<T extends Element>(onResize: (size: number) => void, useHeight: boolean): (instance: Element | null) => void;
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./ItemWrapper.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[ItemWrapper]] component.
+ * @internal future
+ */
+export interface ItemWrapperProps extends CommonProps {
+    /** Tool setting content. */
+    children?: React.ReactNode;
+}
+/** Used in a [[ItemWrapper]] component to display a setting.
+ * @internal future
+ */
+export declare function ItemWrapper(props: ItemWrapperProps): JSX.Element;
+/** @internal */
+export declare function useResizeObserverSingleDimension<T extends Element>(onResize: (size: number) => void, useHeight: boolean): (instance: Element | null) => void;
 //# sourceMappingURL=ItemWrapper.d.ts.map

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

@@ -1,33 +1,33 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./ItemWrapper.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { useResizeObserver } from "@itwin/core-react";
-import { useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
-import { DirectionHelpers, OrthogonalDirectionHelpers } from "./utilities/Direction";
-/** Used in a [[ItemWrapper]] component to display a setting.
- * @internal future
- */
-export function ItemWrapper(props) {
-    const { expandsTo, direction, overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();
-    const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();
-    const ref = useResizeObserverSingleDimension(onResize, useHeight);
-    const className = classnames("components-toolbar-item-container", hasOverflow && "components-overflown", OrthogonalDirectionHelpers.getCssClassName(hasOverflow ? overflowDirection : direction), DirectionHelpers.getCssClassName(hasOverflow ? overflowExpandsTo : expandsTo), props.className);
-    return (React.createElement("div", { className: className, ref: ref, style: props.style }, props.children));
-}
-/** @internal */
-export function useResizeObserverSingleDimension(onResize, useHeight) {
-    const handleResize = React.useCallback((w, h) => {
-        if (useHeight)
-            return onResize(h);
-        return onResize(w);
-    }, [useHeight, onResize]);
-    return useResizeObserver(handleResize);
-}
+/*---------------------------------------------------------------------------------------------
+* 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 "./ItemWrapper.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { useResizeObserver } from "@itwin/core-react";
+import { useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
+import { DirectionHelpers, OrthogonalDirectionHelpers } from "./utilities/Direction";
+/** Used in a [[ItemWrapper]] component to display a setting.
+ * @internal future
+ */
+export function ItemWrapper(props) {
+    const { expandsTo, direction, overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();
+    const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();
+    const ref = useResizeObserverSingleDimension(onResize, useHeight);
+    const className = classnames("components-toolbar-item-container", hasOverflow && "components-overflown", OrthogonalDirectionHelpers.getCssClassName(hasOverflow ? overflowDirection : direction), DirectionHelpers.getCssClassName(hasOverflow ? overflowExpandsTo : expandsTo), props.className);
+    return (React.createElement("div", { className: className, ref: ref, style: props.style }, props.children));
+}
+/** @internal */
+export function useResizeObserverSingleDimension(onResize, useHeight) {
+    const handleResize = React.useCallback((w, h) => {
+        if (useHeight)
+            return onResize(h);
+        return onResize(w);
+    }, [useHeight, onResize]);
+    return useResizeObserver(handleResize);
+}
 //# sourceMappingURL=ItemWrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ItemWrapper.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,sCAAsC,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAUrF;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,sCAAsC,EAAE,CAAC;IAChH,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,uBAAuB,EAAE,CAAC;IACvE,MAAM,GAAG,GAAG,gCAAgC,CAAiB,QAAQ,EAAE,SAAS,CAAC,CAAC;IAClF,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,WAAW,IAAI,sBAAsB,EACrC,0BAA0B,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,EACvF,gBAAgB,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,EAC7E,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,IAEjB,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,gCAAgC,CAAoB,QAAgC,EAAE,SAAkB;IACtH,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QAC9D,IAAI,SAAS;YACX,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;QACrB,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1B,OAAO,iBAAiB,CAAI,YAAY,CAAC,CAAC;AAC5C,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 \"./ItemWrapper.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps, useResizeObserver } from \"@itwin/core-react\";\nimport { useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\nimport { DirectionHelpers, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\n\n/** Properties of [[ItemWrapper]] component.\n * @internal future\n */\nexport interface ItemWrapperProps extends CommonProps {\n  /** Tool setting content. */\n  children?: React.ReactNode;\n}\n\n/** Used in a [[ItemWrapper]] component to display a setting.\n * @internal future\n */\nexport function ItemWrapper(props: ItemWrapperProps) {\n  const { expandsTo, direction, overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();\n  const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();\n  const ref = useResizeObserverSingleDimension<HTMLDivElement>(onResize, useHeight);\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    hasOverflow && \"components-overflown\",\n    OrthogonalDirectionHelpers.getCssClassName(hasOverflow ? overflowDirection : direction),\n    DirectionHelpers.getCssClassName(hasOverflow ? overflowExpandsTo : expandsTo),\n    props.className,\n  );\n  return (\n    <div\n      className={className}\n      ref={ref}\n      style={props.style}\n    >\n      {props.children}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useResizeObserverSingleDimension<T extends Element>(onResize: (size: number) => void, useHeight: boolean) {\n  const handleResize = React.useCallback((w: number, h: number) => {\n    if (useHeight)\n      return onResize(h);\n    return onResize(w);\n  }, [useHeight, onResize]);\n  return useResizeObserver<T>(handleResize);\n}\n"]}
+{"version":3,"file":"ItemWrapper.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,sCAAsC,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAUrF;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,sCAAsC,EAAE,CAAC;IAChH,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,uBAAuB,EAAE,CAAC;IACvE,MAAM,GAAG,GAAG,gCAAgC,CAAiB,QAAQ,EAAE,SAAS,CAAC,CAAC;IAClF,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,WAAW,IAAI,sBAAsB,EACrC,0BAA0B,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,EACvF,gBAAgB,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,EAC7E,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,IAEjB,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,gCAAgC,CAAoB,QAAgC,EAAE,SAAkB;IACtH,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QAC9D,IAAI,SAAS;YACX,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;QACrB,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1B,OAAO,iBAAiB,CAAI,YAAY,CAAC,CAAC;AAC5C,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 \"./ItemWrapper.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, useResizeObserver } from \"@itwin/core-react\";\r\nimport { useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\r\nimport { DirectionHelpers, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\r\n\r\n/** Properties of [[ItemWrapper]] component.\r\n * @internal future\r\n */\r\nexport interface ItemWrapperProps extends CommonProps {\r\n  /** Tool setting content. */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** Used in a [[ItemWrapper]] component to display a setting.\r\n * @internal future\r\n */\r\nexport function ItemWrapper(props: ItemWrapperProps) {\r\n  const { expandsTo, direction, overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();\r\n  const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();\r\n  const ref = useResizeObserverSingleDimension<HTMLDivElement>(onResize, useHeight);\r\n  const className = classnames(\r\n    \"components-toolbar-item-container\",\r\n    hasOverflow && \"components-overflown\",\r\n    OrthogonalDirectionHelpers.getCssClassName(hasOverflow ? overflowDirection : direction),\r\n    DirectionHelpers.getCssClassName(hasOverflow ? overflowExpandsTo : expandsTo),\r\n    props.className,\r\n  );\r\n  return (\r\n    <div\r\n      className={className}\r\n      ref={ref}\r\n      style={props.style}\r\n    >\r\n      {props.children}\r\n    </div>\r\n  );\r\n}\r\n\r\n/** @internal */\r\nexport function useResizeObserverSingleDimension<T extends Element>(onResize: (size: number) => void, useHeight: boolean) {\r\n  const handleResize = React.useCallback((w: number, h: number) => {\r\n    if (useHeight)\r\n      return onResize(h);\r\n    return onResize(w);\r\n  }, [useHeight, onResize]);\r\n  return useResizeObserver<T>(handleResize);\r\n}\r\n"]}

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

@@ -1,10 +1,10 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-.components-toolbar-item-container {
-  position: relative;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.components-toolbar-item-container {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}

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

@@ -1,21 +1,21 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Items.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-import { OrthogonalDirection } from "./utilities/Direction";
-/** Properties of [[ToolbarItems]] component.
- * @internal
- */
-export interface ToolbarItemsProps extends CommonProps {
-    /** Toolbar items. */
-    children?: React.ReactNode;
-    /** Toolbar items direction. */
-    direction: OrthogonalDirection;
-}
-/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.
- * @internal
- */
-export declare function ToolbarItems(props: ToolbarItemsProps): JSX.Element;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Items.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+import { OrthogonalDirection } from "./utilities/Direction";
+/** Properties of [[ToolbarItems]] component.
+ * @internal
+ */
+export interface ToolbarItemsProps extends CommonProps {
+    /** Toolbar items. */
+    children?: React.ReactNode;
+    /** Toolbar items direction. */
+    direction: OrthogonalDirection;
+}
+/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.
+ * @internal
+ */
+export declare function ToolbarItems(props: ToolbarItemsProps): JSX.Element;
 //# sourceMappingURL=Items.d.ts.map

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

@@ -1,51 +1,51 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Items.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow, TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT, useWidgetOpacityContext, } from "@itwin/core-react";
-import { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from "./ToolbarWithOverflow";
-import { OrthogonalDirectionHelpers } from "./utilities/Direction";
-/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.
- * @internal
- */
-export function ToolbarItems(props) {
-    const ref = React.useRef(null);
-    const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = useToolbarWithOverflowDirectionContext();
-    const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;
-    let toolbarOpacity = useTransparentBackground ? 0 : Number(document.documentElement.style.getPropertyValue("--buic-toolbar-opacity"));
-    let boxShadowOpacity = useTransparentBackground ? 0 : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;
-    let filterBlur = useTransparentBackground ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;
-    let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;
-    const isInitialMount = React.useRef(true);
-    const { onElementRef, proximityScale } = useWidgetOpacityContext();
-    React.useEffect(() => {
-        // istanbul ignore else
-        if (isInitialMount.current) {
-            isInitialMount.current = false;
-            onElementRef(ref);
-        }
-    }, [onElementRef]);
-    if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {
-        toolbarOpacity = calculateToolbarOpacity(proximityScale);
-        boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);
-        filterBlur = calculateBackdropFilterBlur(proximityScale);
-        // istanbul ignore next
-        if (proximityScale < .25)
-            showSeparators = false;
-    }
-    const divStyle = {
-        backgroundColor: getToolbarBackgroundColor(toolbarOpacity),
-        boxShadow: getToolbarBoxShadow(boxShadowOpacity),
-        backdropFilter: getToolbarBackdropFilter(filterBlur),
-        ...props.style,
-    };
-    const className = classnames("components-toolbar-items-container", OrthogonalDirectionHelpers.getCssClassName(props.direction), showSeparators && "components-toolbar-show-decorators", props.className);
-    return (React.createElement("div", { className: className, style: divStyle, ref: ref }, props.children));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Items.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow, TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT, useWidgetOpacityContext, } from "@itwin/core-react";
+import { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from "./ToolbarWithOverflow";
+import { OrthogonalDirectionHelpers } from "./utilities/Direction";
+/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.
+ * @internal
+ */
+export function ToolbarItems(props) {
+    const ref = React.useRef(null);
+    const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = useToolbarWithOverflowDirectionContext();
+    const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;
+    let toolbarOpacity = useTransparentBackground ? 0 : Number(document.documentElement.style.getPropertyValue("--buic-toolbar-opacity"));
+    let boxShadowOpacity = useTransparentBackground ? 0 : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;
+    let filterBlur = useTransparentBackground ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;
+    let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;
+    const isInitialMount = React.useRef(true);
+    const { onElementRef, proximityScale } = useWidgetOpacityContext();
+    React.useEffect(() => {
+        // istanbul ignore else
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            onElementRef(ref);
+        }
+    }, [onElementRef]);
+    if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {
+        toolbarOpacity = calculateToolbarOpacity(proximityScale);
+        boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);
+        filterBlur = calculateBackdropFilterBlur(proximityScale);
+        // istanbul ignore next
+        if (proximityScale < .25)
+            showSeparators = false;
+    }
+    const divStyle = {
+        backgroundColor: getToolbarBackgroundColor(toolbarOpacity),
+        boxShadow: getToolbarBoxShadow(boxShadowOpacity),
+        backdropFilter: getToolbarBackdropFilter(filterBlur),
+        ...props.style,
+    };
+    const className = classnames("components-toolbar-items-container", OrthogonalDirectionHelpers.getCssClassName(props.direction), showSeparators && "components-toolbar-show-decorators", props.className);
+    return (React.createElement("div", { className: className, style: divStyle, ref: ref }, props.children));
+}
 //# sourceMappingURL=Items.js.map

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