@itwin/components-react 4.0.0-dev.9 → 4.0.1

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

@@ -1,38 +1,38 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Item.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[ToolbarButtonItem]] component.
- * @public
- */
-export interface ToolbarButtonItemProps extends CommonProps {
-    /** button icon. */
-    icon?: React.ReactNode;
-    /** Describes if item is active. */
-    isActive?: boolean;
-    /** Describes if the item is disabled. */
-    isDisabled?: boolean;
-    /** Function called when the item is clicked. */
-    onClick?: () => void;
-    /** Function called when a key is pressed. */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    /** Title for the item. */
-    title: string;
-    /** A badge to draw. */
-    badge?: React.ReactNode;
-    /** If true add a gap before button. Default to false. */
-    addGroupSeparator?: boolean;
-    /** value added to DOM element as a data attribute to hold name of items provider. If specified in `FrontstageProvider` then this will be undefined */
-    providerId?: string;
-    /** value added to DOM element as a data attribute, shows 0 is undefined */
-    itemPriority?: number;
-    /** value added to DOM element as a data attribute */
-    groupPriority?: number;
-}
-/** Toolbar item component. Used in [[Toolbar]] component.
- * @public
- */
-export declare const ToolbarButtonItem: React.MemoExoticComponent<React.FC<ToolbarButtonItemProps>>;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Item.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolbarButtonItem]] component.
+ * @public
+ */
+export interface ToolbarButtonItemProps extends CommonProps {
+    /** button icon. */
+    icon?: React.ReactNode;
+    /** Describes if item is active. */
+    isActive?: boolean;
+    /** Describes if the item is disabled. */
+    isDisabled?: boolean;
+    /** Function called when the item is clicked. */
+    onClick?: () => void;
+    /** Function called when a key is pressed. */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    /** Title for the item. */
+    title: string;
+    /** A badge to draw. */
+    badge?: React.ReactNode;
+    /** If true add a gap before button. Default to false. */
+    addGroupSeparator?: boolean;
+    /** value added to DOM element as a data attribute to hold name of items provider. If specified in `FrontstageProvider` then this will be undefined */
+    providerId?: string;
+    /** value added to DOM element as a data attribute, shows 0 is undefined */
+    itemPriority?: number;
+    /** value added to DOM element as a data attribute */
+    groupPriority?: number;
+}
+/** Toolbar item component. Used in [[Toolbar]] component.
+ * @public
+ */
+export declare const ToolbarButtonItem: React.MemoExoticComponent<React.FC<ToolbarButtonItemProps>>;
 //# sourceMappingURL=Item.d.ts.map

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

@@ -1,22 +1,22 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./Item.scss";
-import classnames from "classnames";
-import * as React from "react";
-/** Toolbar item component. Used in [[Toolbar]] component.
- * @public
- */
-// eslint-disable-next-line react/display-name
-export const ToolbarButtonItem = React.memo((props) => {
-    const className = classnames("components-toolbar-button-item", props.isActive && "components-active", props.isDisabled && "components-disabled", props.className);
-    return (React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "action-tool-button", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, disabled: props.isDisabled, onClick: props.onClick, 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)));
-});
+/*---------------------------------------------------------------------------------------------
+* 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 "./Item.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Toolbar item component. Used in [[Toolbar]] component.
+ * @public
+ */
+// eslint-disable-next-line react/display-name
+export const ToolbarButtonItem = React.memo((props) => {
+    const className = classnames("components-toolbar-button-item", props.isActive && "components-active", props.isDisabled && "components-disabled", props.className);
+    return (React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "action-tool-button", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, disabled: props.isDisabled, onClick: props.onClick, 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)));
+});
 //# sourceMappingURL=Item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Item.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B;;GAEG;AACH,8CAA8C;AAC9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAA6B,EAAE,EAAE;IAChC,MAAM,SAAS,GAAG,UAAU,CAC1B,gCAAgC,EAChC,KAAK,CAAC,QAAQ,IAAI,mBAAmB,EACrC,KAAK,CAAC,UAAU,IAAI,qBAAqB,EACzC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnB,OAAO,CACL,gDACgB,KAAK,CAAC,MAAM,oBACX,oBAAoB,8BACT,KAAK,CAAC,aAAa,wBACzB,KAAK,CAAC,YAAY,2BACf,KAAK,CAAC,UAAU,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK;QAElB,6BAAK,SAAS,EAAC,iBAAiB,IAC7B,KAAK,CAAC,IAAI,CACP;QACL,KAAK,CAAC,KAAK;YACV,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR,CAED,CACV,CAAC;AACJ,CAAC,CAAC,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 Toolbar\r\n */\r\n\r\nimport \"./Item.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\n\r\n/** Properties of [[ToolbarButtonItem]] component.\r\n * @public\r\n */\r\nexport interface ToolbarButtonItemProps extends CommonProps {\r\n  /** button icon. */\r\n  icon?: React.ReactNode;\r\n  /** Describes if item is active. */\r\n  isActive?: boolean;\r\n  /** Describes if the item is disabled. */\r\n  isDisabled?: boolean;\r\n  /** Function called when the item is clicked. */\r\n  onClick?: () => void;\r\n  /** Function called when a key is pressed. */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /** Title for the item. */\r\n  title: string;\r\n  /** A badge to draw. */\r\n  badge?: React.ReactNode;\r\n  /** If true add a gap before button. Default to false. */\r\n  addGroupSeparator?: boolean;\r\n  /** value added to DOM element as a data attribute to hold name of items provider. If specified in `FrontstageProvider` then this will be undefined */\r\n  providerId?: string;\r\n  /** value added to DOM element as a data attribute, shows 0 is undefined */\r\n  itemPriority?: number;\r\n  /** value added to DOM element as a data attribute */\r\n  groupPriority?: number;\r\n}\r\n\r\n/** Toolbar item component. Used in [[Toolbar]] component.\r\n * @public\r\n */\r\n// eslint-disable-next-line react/display-name\r\nexport const ToolbarButtonItem = React.memo<React.FC<ToolbarButtonItemProps>>(\r\n  (props: ToolbarButtonItemProps) => {\r\n    const className = classnames(\r\n      \"components-toolbar-button-item\",\r\n      props.isActive && \"components-active\",\r\n      props.isDisabled && \"components-disabled\",\r\n      props.className);\r\n\r\n    return (\r\n      <button\r\n        data-item-id={props.itemId}\r\n        data-item-type=\"action-tool-button\"\r\n        data-item-group-priority={props.groupPriority}\r\n        data-item-priority={props.itemPriority}\r\n        data-item-provider-id={props.providerId}\r\n        disabled={props.isDisabled}  // this is needed to prevent focusing/keyboard access to disabled buttons\r\n        onClick={props.onClick}\r\n        onKeyDown={props.onKeyDown}\r\n        className={className}\r\n        style={props.style}\r\n        title={props.title}\r\n      >\r\n        <div className=\"components-icon\">\r\n          {props.icon}\r\n        </div>\r\n        {props.badge &&\r\n          <div className=\"components-badge\">\r\n            {props.badge}\r\n          </div>\r\n        }\r\n      </button>\r\n    );\r\n  });\r\n"]}
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Item.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B;;GAEG;AACH,8CAA8C;AAC9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAA6B,EAAE,EAAE;IAChC,MAAM,SAAS,GAAG,UAAU,CAC1B,gCAAgC,EAChC,KAAK,CAAC,QAAQ,IAAI,mBAAmB,EACrC,KAAK,CAAC,UAAU,IAAI,qBAAqB,EACzC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnB,OAAO,CACL,gDACgB,KAAK,CAAC,MAAM,oBACX,oBAAoB,8BACT,KAAK,CAAC,aAAa,wBACzB,KAAK,CAAC,YAAY,2BACf,KAAK,CAAC,UAAU,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK;QAElB,6BAAK,SAAS,EAAC,iBAAiB,IAC7B,KAAK,CAAC,IAAI,CACP;QACL,KAAK,CAAC,KAAK;YACV,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR,CAED,CACV,CAAC;AACJ,CAAC,CAAC,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 Toolbar\n */\n\nimport \"./Item.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[ToolbarButtonItem]] component.\n * @public\n */\nexport interface ToolbarButtonItemProps extends CommonProps {\n  /** button icon. */\n  icon?: React.ReactNode;\n  /** Describes if item is active. */\n  isActive?: boolean;\n  /** Describes if the item is disabled. */\n  isDisabled?: boolean;\n  /** Function called when the item is clicked. */\n  onClick?: () => void;\n  /** Function called when a key is pressed. */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  /** Title for the item. */\n  title: string;\n  /** A badge to draw. */\n  badge?: React.ReactNode;\n  /** If true add a gap before button. Default to false. */\n  addGroupSeparator?: boolean;\n  /** value added to DOM element as a data attribute to hold name of items provider. If specified in `FrontstageProvider` then this will be undefined */\n  providerId?: string;\n  /** value added to DOM element as a data attribute, shows 0 is undefined */\n  itemPriority?: number;\n  /** value added to DOM element as a data attribute */\n  groupPriority?: number;\n}\n\n/** Toolbar item component. Used in [[Toolbar]] component.\n * @public\n */\n// eslint-disable-next-line react/display-name\nexport const ToolbarButtonItem = React.memo<React.FC<ToolbarButtonItemProps>>(\n  (props: ToolbarButtonItemProps) => {\n    const className = classnames(\n      \"components-toolbar-button-item\",\n      props.isActive && \"components-active\",\n      props.isDisabled && \"components-disabled\",\n      props.className);\n\n    return (\n      <button\n        data-item-id={props.itemId}\n        data-item-type=\"action-tool-button\"\n        data-item-group-priority={props.groupPriority}\n        data-item-priority={props.itemPriority}\n        data-item-provider-id={props.providerId}\n        disabled={props.isDisabled}  // this is needed to prevent focusing/keyboard access to disabled buttons\n        onClick={props.onClick}\n        onKeyDown={props.onKeyDown}\n        className={className}\n        style={props.style}\n        title={props.title}\n      >\n        <div className=\"components-icon\">\n          {props.icon}\n        </div>\n        {props.badge &&\n          <div className=\"components-badge\">\n            {props.badge}\n          </div>\n        }\n      </button>\n    );\n  });\n"]}

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

@@ -1,123 +1,92 @@
-/*---------------------------------------------------------------------------------------------
-* 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;
+  border-radius: var(--iui-border-radius-1);
+  cursor: pointer;
+  transition: background-color var(--iui-duration-1) 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: var(--iui-color-icon);
+    transition: color var(--iui-duration-1) ease;
+
+    img {
+      width: $icon-size;
+      height: $icon-size;
+    }
+  }
+
+  &:not(.components-disabled) > .components-icon {
+    filter: $icon-shadow;
+  }
+
+  &:focus-visible:not(.components-disabled):not(.components-active),
+  &:hover:not(.components-disabled):not(.components-active),
+  &:active:not(.components-disabled):not(.components-active) {
+    color: var(--iui-color-icon-hover);
+    background-color: var(--iui-color-background-transparent-hover);
+  }
+
+  &.components-active {
+    color: var(--iui-color-icon-accent);
+    background-color: var(--iui-color-background-accent-muted);
+    // background-color: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-5));
+    border: solid 2px var(--iui-color-border-accent);
+
+    &:not(:active):not(.components-disabled) {
+      transition-duration: 0s;
+
+      > .components-icon {
+        color: var(--iui-color-icon-accent);
+        transition-duration: var(--iui-duration-1);
+        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
+      }
+    }
+  }
+
+  &.components-disabled {
+    cursor: not-allowed;
+
+    > .components-icon {
+      color: var(--iui-color-icon-disabled);
+    }
+
+    &: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":["/*---------------------------------------------------------------------------------------------\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"]}
+{"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"]}

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