@itwin/components-react 3.6.0-dev.52 → 3.6.0-dev.53

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

@@ -1,95 +1,95 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Toolbar
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toolbar = void 0;
-require("./Toolbar.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const Items_1 = require("./Items");
-const Direction_1 = require("./utilities/Direction");
-const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
-function getItemWrapperClass(child) {
-    // istanbul ignore else
-    if (React.isValidElement(child)) {
-        if (child.props && child.props.addGroupSeparator)
-            return "components-toolbar-button-add-gap-before";
-    }
-    return "";
-}
-/** Component that displays tool settings as a bar across the top of the content view.
- * @public
- */
-function Toolbar(props) {
-    const expandsTo = props.expandsTo ? props.expandsTo : Direction_1.Direction.Bottom;
-    const useDragInteraction = !!props.useDragInteraction;
-    const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarWithOverflow_1.ToolbarPanelAlignment.Start;
-    const [popupPanelCount, setPopupPanelCount] = React.useState(0);
-    const handlePopupPanelOpenClose = React.useCallback((isOpening) => {
-        // use setTimeout to avoid warning about setting state in Toolbar from render method of PopupItem/PopupItemWithDrag
-        setTimeout(() => {
-            setPopupPanelCount((prev) => {
-                const nextCount = isOpening ? (prev + 1) : (prev - 1);
-                // eslint-disable-next-line no-console
-                // console.log(`new popup count = ${nextCount}`);
-                return nextCount < 0 ? /* istanbul ignore next */ 0 : nextCount;
-            });
-        });
-    }, []);
-    const availableNodes = React.useMemo(() => {
-        return props.items.map((item, index) => {
-            let addGroupSeparator = false;
-            if (index > 0)
-                addGroupSeparator = item.groupPriority !== props.items[index - 1].groupPriority;
-            return (React.createElement(ToolbarWithOverflow_1.ToolbarItemComponent, { key: item.id, item: item, addGroupSeparator: !!addGroupSeparator }));
-        });
-    }, [props.items]);
-    const direction = (0, ToolbarWithOverflow_1.getToolbarDirection)(expandsTo);
-    const className = (0, classnames_1.default)("components-toolbar-overflow-sizer", Direction_1.OrthogonalDirectionHelpers.getCssClassName(direction), props.className);
-    // needed to construct DOM structure identical to ToolbarWithOverflow so same css can be applied.
-    const wrapperClassName = (0, classnames_1.default)("components-toolbar-item-container", Direction_1.OrthogonalDirectionHelpers.getCssClassName(direction));
-    return (React.createElement(ToolbarWithOverflow_1.ToolbarWithOverflowDirectionContext.Provider, { value: {
-            expandsTo, direction, overflowExpandsTo: Direction_1.Direction.Right, panelAlignment, useDragInteraction,
-            toolbarOpacitySetting: props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarWithOverflow_1.ToolbarOpacitySetting.Proximity,
-            overflowDirection: Direction_1.OrthogonalDirection.Horizontal,
-            openPopupCount: popupPanelCount, onPopupPanelOpenClose: handlePopupPanelOpenClose, overflowDisplayActive: false,
-            onItemExecuted: props.onItemExecuted ? props.onItemExecuted : /* istanbul ignore next */ () => { },
-            onKeyDown: props.onKeyDown ? props.onKeyDown : /* istanbul ignore next */ (_e) => { },
-        } },
-        React.createElement(ToolbarWithOverflow_1.ToolbarItemContext.Provider, { value: {
-                hasOverflow: false,
-                useHeight: false,
-                onResize: /* istanbul ignore next */ () => { },
-            } }, (availableNodes.length > 0) &&
-            React.createElement("div", { className: className, style: props.style, onKeyDown: props.onKeyDown, role: "presentation" },
-                React.createElement(Items_1.ToolbarItems, { className: "components-items", direction: direction }, availableNodes.map((child, index) => React.createElement("div", { key: index, className: `${wrapperClassName} ${getItemWrapperClass(child)}` }, child)))))));
-}
-exports.Toolbar = Toolbar;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toolbar
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toolbar = void 0;
+require("./Toolbar.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const Items_1 = require("./Items");
+const Direction_1 = require("./utilities/Direction");
+const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+function getItemWrapperClass(child) {
+    // istanbul ignore else
+    if (React.isValidElement(child)) {
+        if (child.props && child.props.addGroupSeparator)
+            return "components-toolbar-button-add-gap-before";
+    }
+    return "";
+}
+/** Component that displays tool settings as a bar across the top of the content view.
+ * @public
+ */
+function Toolbar(props) {
+    const expandsTo = props.expandsTo ? props.expandsTo : Direction_1.Direction.Bottom;
+    const useDragInteraction = !!props.useDragInteraction;
+    const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarWithOverflow_1.ToolbarPanelAlignment.Start;
+    const [popupPanelCount, setPopupPanelCount] = React.useState(0);
+    const handlePopupPanelOpenClose = React.useCallback((isOpening) => {
+        // use setTimeout to avoid warning about setting state in Toolbar from render method of PopupItem/PopupItemWithDrag
+        setTimeout(() => {
+            setPopupPanelCount((prev) => {
+                const nextCount = isOpening ? (prev + 1) : (prev - 1);
+                // eslint-disable-next-line no-console
+                // console.log(`new popup count = ${nextCount}`);
+                return nextCount < 0 ? /* istanbul ignore next */ 0 : nextCount;
+            });
+        });
+    }, []);
+    const availableNodes = React.useMemo(() => {
+        return props.items.map((item, index) => {
+            let addGroupSeparator = false;
+            if (index > 0)
+                addGroupSeparator = item.groupPriority !== props.items[index - 1].groupPriority;
+            return (React.createElement(ToolbarWithOverflow_1.ToolbarItemComponent, { key: item.id, item: item, addGroupSeparator: !!addGroupSeparator }));
+        });
+    }, [props.items]);
+    const direction = (0, ToolbarWithOverflow_1.getToolbarDirection)(expandsTo);
+    const className = (0, classnames_1.default)("components-toolbar-overflow-sizer", Direction_1.OrthogonalDirectionHelpers.getCssClassName(direction), props.className);
+    // needed to construct DOM structure identical to ToolbarWithOverflow so same css can be applied.
+    const wrapperClassName = (0, classnames_1.default)("components-toolbar-item-container", Direction_1.OrthogonalDirectionHelpers.getCssClassName(direction));
+    return (React.createElement(ToolbarWithOverflow_1.ToolbarWithOverflowDirectionContext.Provider, { value: {
+            expandsTo, direction, overflowExpandsTo: Direction_1.Direction.Right, panelAlignment, useDragInteraction,
+            toolbarOpacitySetting: props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarWithOverflow_1.ToolbarOpacitySetting.Proximity,
+            overflowDirection: Direction_1.OrthogonalDirection.Horizontal,
+            openPopupCount: popupPanelCount, onPopupPanelOpenClose: handlePopupPanelOpenClose, overflowDisplayActive: false,
+            onItemExecuted: props.onItemExecuted ? props.onItemExecuted : /* istanbul ignore next */ () => { },
+            onKeyDown: props.onKeyDown ? props.onKeyDown : /* istanbul ignore next */ (_e) => { },
+        } },
+        React.createElement(ToolbarWithOverflow_1.ToolbarItemContext.Provider, { value: {
+                hasOverflow: false,
+                useHeight: false,
+                onResize: /* istanbul ignore next */ () => { },
+            } }, (availableNodes.length > 0) &&
+            React.createElement("div", { className: className, style: props.style, onKeyDown: props.onKeyDown, role: "presentation" },
+                React.createElement(Items_1.ToolbarItems, { className: "components-items", direction: direction }, availableNodes.map((child, index) => React.createElement("div", { key: index, className: `${wrapperClassName} ${getItemWrapperClass(child)}` }, child)))))));
+}
+exports.Toolbar = Toolbar;
 //# sourceMappingURL=Toolbar.js.map

package/lib/cjs/components-react/toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.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 \"./Toolbar.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport {\r\n  CommonToolbarItem, OnItemExecutedFunc,\r\n} from \"@itwin/appui-abstract\";\r\nimport { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\r\nimport { ToolbarItems } from \"./Items\";\r\nimport { Direction, OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\r\nimport { getToolbarDirection, ToolbarItemComponent, ToolbarItemContext, ToolbarOpacitySetting, ToolbarPanelAlignment, ToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\r\n\r\n/** Properties of [[Toolbar]] component.\r\n * @public\r\n */\r\nexport interface ToolbarProps extends CommonProps, NoChildrenProps {\r\n  /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */\r\n  expandsTo?: Direction;\r\n  /** definitions for items of the toolbar. i.e. [[CommonToolbarItem]]. Items are expected to be already sorted by group and item. */\r\n  items: CommonToolbarItem[];\r\n  /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */\r\n  panelAlignment?: ToolbarPanelAlignment;\r\n  /** Use Drag Interaction to open popups with nest action buttons */\r\n  useDragInteraction?: boolean;\r\n  /** Determines whether to use mouse proximity to alter the opacity of the toolbar */\r\n  toolbarOpacitySetting?: ToolbarOpacitySetting;\r\n  /** Optional function to call on any item execution */\r\n  onItemExecuted?: OnItemExecutedFunc;\r\n  /** Optional function to call on any KeyDown events processed by toolbar */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n}\r\n\r\nfunction getItemWrapperClass(child: React.ReactNode) {\r\n  // istanbul ignore else\r\n  if (React.isValidElement(child)) {\r\n    if (child.props && child.props.addGroupSeparator)\r\n      return \"components-toolbar-button-add-gap-before\";\r\n  }\r\n  return \"\";\r\n}\r\n\r\n/** Component that displays tool settings as a bar across the top of the content view.\r\n * @public\r\n */\r\nexport function Toolbar(props: ToolbarProps) {\r\n  const expandsTo = props.expandsTo ? props.expandsTo : Direction.Bottom;\r\n  const useDragInteraction = !!props.useDragInteraction;\r\n  const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarPanelAlignment.Start;\r\n  const [popupPanelCount, setPopupPanelCount] = React.useState(0);\r\n\r\n  const handlePopupPanelOpenClose = React.useCallback((isOpening: boolean) => {\r\n    // use setTimeout to avoid warning about setting state in Toolbar from render method of PopupItem/PopupItemWithDrag\r\n    setTimeout(() => {\r\n      setPopupPanelCount((prev) => {\r\n        const nextCount = isOpening ? (prev + 1) : (prev - 1);\r\n        // eslint-disable-next-line no-console\r\n        // console.log(`new popup count = ${nextCount}`);\r\n        return nextCount < 0 ? /* istanbul ignore next */ 0 : nextCount;\r\n      });\r\n    });\r\n  }, []);\r\n\r\n  const availableNodes = React.useMemo<React.ReactNode[]>(() => {\r\n    return props.items.map((item, index) => {\r\n      let addGroupSeparator = false;\r\n      if (index > 0)\r\n        addGroupSeparator = item.groupPriority !== props.items[index - 1].groupPriority;\r\n      return (\r\n        <ToolbarItemComponent\r\n          key={item.id}\r\n          item={item}\r\n          addGroupSeparator={!!addGroupSeparator}\r\n        />\r\n      );\r\n    });\r\n  }, [props.items]);\r\n\r\n  const direction = getToolbarDirection(expandsTo);\r\n  const className = classnames(\r\n    \"components-toolbar-overflow-sizer\",\r\n    OrthogonalDirectionHelpers.getCssClassName(direction),\r\n    props.className);\r\n\r\n  // needed to construct DOM structure identical to ToolbarWithOverflow so same css can be applied.\r\n  const wrapperClassName = classnames(\r\n    \"components-toolbar-item-container\",\r\n    OrthogonalDirectionHelpers.getCssClassName(direction),\r\n  );\r\n\r\n  return (\r\n    <ToolbarWithOverflowDirectionContext.Provider value={\r\n      {\r\n        expandsTo, direction, overflowExpandsTo: Direction.Right, panelAlignment, useDragInteraction,\r\n        toolbarOpacitySetting: props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarOpacitySetting.Proximity,\r\n        overflowDirection: OrthogonalDirection.Horizontal,\r\n        openPopupCount: popupPanelCount, onPopupPanelOpenClose: handlePopupPanelOpenClose, overflowDisplayActive: false,\r\n        onItemExecuted: props.onItemExecuted ? props.onItemExecuted : /* istanbul ignore next */ () => { },\r\n        onKeyDown: props.onKeyDown ? props.onKeyDown : /* istanbul ignore next */ (_e: React.KeyboardEvent) => { },\r\n      }\r\n    }>\r\n      <ToolbarItemContext.Provider\r\n        value={{\r\n          hasOverflow: false,\r\n          useHeight: false,\r\n          onResize: /* istanbul ignore next */ () => { },\r\n        }}\r\n      >\r\n        {(availableNodes.length > 0) &&\r\n          <div\r\n            className={className}\r\n            style={props.style}\r\n            onKeyDown={props.onKeyDown}\r\n            role=\"presentation\"\r\n          >\r\n            <ToolbarItems\r\n              className=\"components-items\"\r\n              direction={direction}\r\n            >\r\n              {availableNodes.map((child, index) => <div key={index} className={`${wrapperClassName} ${getItemWrapperClass(child)}`}>{child}</div>)}\r\n            </ToolbarItems>\r\n          </div>\r\n        }\r\n      </ToolbarItemContext.Provider>\r\n    </ToolbarWithOverflowDirectionContext.Provider >\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.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 \"./Toolbar.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  CommonToolbarItem, OnItemExecutedFunc,\n} from \"@itwin/appui-abstract\";\nimport { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport { ToolbarItems } from \"./Items\";\nimport { Direction, OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\nimport { getToolbarDirection, ToolbarItemComponent, ToolbarItemContext, ToolbarOpacitySetting, ToolbarPanelAlignment, ToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\n\n/** Properties of [[Toolbar]] component.\n * @public\n */\nexport interface ToolbarProps extends CommonProps, NoChildrenProps {\n  /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */\n  expandsTo?: Direction;\n  /** definitions for items of the toolbar. i.e. [[CommonToolbarItem]]. Items are expected to be already sorted by group and item. */\n  items: CommonToolbarItem[];\n  /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */\n  panelAlignment?: ToolbarPanelAlignment;\n  /** Use Drag Interaction to open popups with nest action buttons */\n  useDragInteraction?: boolean;\n  /** Determines whether to use mouse proximity to alter the opacity of the toolbar */\n  toolbarOpacitySetting?: ToolbarOpacitySetting;\n  /** Optional function to call on any item execution */\n  onItemExecuted?: OnItemExecutedFunc;\n  /** Optional function to call on any KeyDown events processed by toolbar */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nfunction getItemWrapperClass(child: React.ReactNode) {\n  // istanbul ignore else\n  if (React.isValidElement(child)) {\n    if (child.props && child.props.addGroupSeparator)\n      return \"components-toolbar-button-add-gap-before\";\n  }\n  return \"\";\n}\n\n/** Component that displays tool settings as a bar across the top of the content view.\n * @public\n */\nexport function Toolbar(props: ToolbarProps) {\n  const expandsTo = props.expandsTo ? props.expandsTo : Direction.Bottom;\n  const useDragInteraction = !!props.useDragInteraction;\n  const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarPanelAlignment.Start;\n  const [popupPanelCount, setPopupPanelCount] = React.useState(0);\n\n  const handlePopupPanelOpenClose = React.useCallback((isOpening: boolean) => {\n    // use setTimeout to avoid warning about setting state in Toolbar from render method of PopupItem/PopupItemWithDrag\n    setTimeout(() => {\n      setPopupPanelCount((prev) => {\n        const nextCount = isOpening ? (prev + 1) : (prev - 1);\n        // eslint-disable-next-line no-console\n        // console.log(`new popup count = ${nextCount}`);\n        return nextCount < 0 ? /* istanbul ignore next */ 0 : nextCount;\n      });\n    });\n  }, []);\n\n  const availableNodes = React.useMemo<React.ReactNode[]>(() => {\n    return props.items.map((item, index) => {\n      let addGroupSeparator = false;\n      if (index > 0)\n        addGroupSeparator = item.groupPriority !== props.items[index - 1].groupPriority;\n      return (\n        <ToolbarItemComponent\n          key={item.id}\n          item={item}\n          addGroupSeparator={!!addGroupSeparator}\n        />\n      );\n    });\n  }, [props.items]);\n\n  const direction = getToolbarDirection(expandsTo);\n  const className = classnames(\n    \"components-toolbar-overflow-sizer\",\n    OrthogonalDirectionHelpers.getCssClassName(direction),\n    props.className);\n\n  // needed to construct DOM structure identical to ToolbarWithOverflow so same css can be applied.\n  const wrapperClassName = classnames(\n    \"components-toolbar-item-container\",\n    OrthogonalDirectionHelpers.getCssClassName(direction),\n  );\n\n  return (\n    <ToolbarWithOverflowDirectionContext.Provider value={\n      {\n        expandsTo, direction, overflowExpandsTo: Direction.Right, panelAlignment, useDragInteraction,\n        toolbarOpacitySetting: props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarOpacitySetting.Proximity,\n        overflowDirection: OrthogonalDirection.Horizontal,\n        openPopupCount: popupPanelCount, onPopupPanelOpenClose: handlePopupPanelOpenClose, overflowDisplayActive: false,\n        onItemExecuted: props.onItemExecuted ? props.onItemExecuted : /* istanbul ignore next */ () => { },\n        onKeyDown: props.onKeyDown ? props.onKeyDown : /* istanbul ignore next */ (_e: React.KeyboardEvent) => { },\n      }\n    }>\n      <ToolbarItemContext.Provider\n        value={{\n          hasOverflow: false,\n          useHeight: false,\n          onResize: /* istanbul ignore next */ () => { },\n        }}\n      >\n        {(availableNodes.length > 0) &&\n          <div\n            className={className}\n            style={props.style}\n            onKeyDown={props.onKeyDown}\n            role=\"presentation\"\n          >\n            <ToolbarItems\n              className=\"components-items\"\n              direction={direction}\n            >\n              {availableNodes.map((child, index) => <div key={index} className={`${wrapperClassName} ${getItemWrapperClass(child)}`}>{child}</div>)}\n            </ToolbarItems>\n          </div>\n        }\n      </ToolbarItemContext.Provider>\n    </ToolbarWithOverflowDirectionContext.Provider >\n  );\n}\n"]}

package/lib/cjs/components-react/toolbar/Toolbar.scss

@@ -1,19 +1,19 @@
-/*---------------------------------------------------------------------------------------------
-* 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-overflow-sizer {
-  display: inline-block;
-  position: relative;
-
-  &.components-horizontal {
-    width: 100%
-  }
-
-  &.components-vertical {
-    height: 100%
-  }
+/*---------------------------------------------------------------------------------------------
+* 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-overflow-sizer {
+  display: inline-block;
+  position: relative;
+
+  &.components-horizontal {
+    width: 100%
+  }
+
+  &.components-vertical {
+    height: 100%
+  }
 }

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

@@ -1,151 +1,151 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Toolbar.scss";
-import * as React from "react";
-import { ActionButton, CommonToolbarItem, CustomButtonDefinition, GroupButton, OnItemExecutedFunc } from "@itwin/appui-abstract";
-import { CommonProps, NoChildrenProps } from "@itwin/core-react";
-import { Direction, OrthogonalDirection } from "./utilities/Direction";
-/** Describes the data needed to insert a custom `React` button into an ToolbarWithOverflow.
- * @public
- */
-export interface CustomToolbarItem extends CustomButtonDefinition {
-    /** React node that must result in providing a PopupItem @deprecated use panelContentNode */
-    buttonNode?: React.ReactNode;
-    /** defines the content to display in popup panel */
-    panelContentNode?: React.ReactNode;
-    /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the
-     * content node is unmounted each time the popup is closed. */
-    keepContentsLoaded?: boolean;
-}
-/**
- * Context used by Toolbar items to know if popup panel should be hidden - via AutoHide.
- * @public
- */
-export declare const ToolbarPopupAutoHideContext: React.Context<boolean>;
-/**
- * React hook used to retrieve the ToolbarPopupAutoHideContext.
- *  @public
- */
-export declare function useToolbarPopupAutoHideContext(): boolean;
-/** Describes toolbar item.
- * @public
- */
-export declare type ToolbarItem = ActionButton | GroupButton | CustomToolbarItem;
-/** CustomToolbarItem type guard.
- * @internal
- */
-export declare function isCustomToolbarItem(item: ToolbarItem): item is CustomToolbarItem;
-/** @internal */
-export declare const getToolbarDirection: (expandsTo: Direction) => OrthogonalDirection;
-/** Available alignment modes of [[ToolbarWithOverflow]] panels.
- * @public
- */
-export declare enum ToolbarPanelAlignment {
-    Start = 0,
-    End = 1
-}
-/** Enumeration of Toolbar Opacity setting.
- * @public
- */
-export declare enum ToolbarOpacitySetting {
-    /** Use the default background, box-shadow opacity and backdrop-filter blur */
-    Defaults = 0,
-    /** Alter the opacity from transparent to the defaults based on mouse proximity */
-    Proximity = 1,
-    /** Use a transparent background, box-shadow opacity and backdrop-filter blur */
-    Transparent = 2
-}
-/** Helpers for [[ToolbarPanelAlignment]].
- * @internal
- */
-export declare class ToolbarPanelAlignmentHelpers {
-    /** Class name of [[ToolbarPanelAlignment.Start]] */
-    static readonly START_CLASS_NAME = "components-panel-alignment-start";
-    /** Class name of [[ToolbarPanelAlignment.End]] */
-    static readonly END_CLASS_NAME = "components-panel-alignment-end";
-    /** @returns Class name of specified [[ToolbarPanelAlignment]] */
-    static getCssClassName(panelAlignment: ToolbarPanelAlignment): string;
-}
-/** @internal */
-export interface ToolbarOverflowContextProps {
-    readonly expandsTo: Direction;
-    readonly direction: OrthogonalDirection;
-    readonly overflowExpandsTo: Direction;
-    readonly overflowDirection: OrthogonalDirection;
-    readonly panelAlignment: ToolbarPanelAlignment;
-    readonly useDragInteraction: boolean;
-    readonly toolbarOpacitySetting: ToolbarOpacitySetting;
-    readonly openPopupCount: number;
-    readonly onPopupPanelOpenClose: (isOpening: boolean) => void;
-    readonly overflowDisplayActive: boolean;
-    readonly onItemExecuted: OnItemExecutedFunc;
-    readonly onKeyDown: (e: React.KeyboardEvent) => void;
-}
-/**
- * Context used by Toolbar component to provide Direction to child components.
- * @internal
- */
-export declare const ToolbarWithOverflowDirectionContext: React.Context<ToolbarOverflowContextProps>;
-/** @internal */
-export declare function CustomItem({ item, addGroupSeparator }: {
-    item: CustomToolbarItem;
-    addGroupSeparator: boolean;
-}): JSX.Element | null;
-/** @internal */
-export declare function GroupPopupItem({ item, addGroupSeparator }: {
-    item: GroupButton;
-    addGroupSeparator: boolean;
-}): JSX.Element;
-/** @internal */
-export declare function ActionItem({ item, addGroupSeparator }: {
-    item: ActionButton;
-    addGroupSeparator: boolean;
-}): JSX.Element;
-/** @internal */
-export declare function ToolbarItemComponent({ item, addGroupSeparator }: {
-    item: ToolbarItem;
-    addGroupSeparator: boolean;
-}): JSX.Element | null;
-/** @internal */
-export declare function useToolbarWithOverflowDirectionContext(): ToolbarOverflowContextProps;
-/** Properties of [[ToolbarWithOverflow]] component.
- * @public
- */
-export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
-    /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
-    expandsTo?: Direction;
-    /** Describes to which direction the overflow popup panels are expanded. Defaults to: [[Direction.Right]] */
-    overflowExpandsTo?: Direction;
-    /** definitions for items of the toolbar. i.e. [[CommonToolbarItem]]. Items are expected to be already sorted by group and item. */
-    items: CommonToolbarItem[];
-    /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */
-    panelAlignment?: ToolbarPanelAlignment;
-    /** Use Drag Interaction to open popups with nest action buttons */
-    useDragInteraction?: boolean;
-    /** Determines whether to use mouse proximity to alter the opacity of the toolbar */
-    toolbarOpacitySetting?: ToolbarOpacitySetting;
-    /** Optional function to call on any item execution */
-    onItemExecuted?: OnItemExecutedFunc;
-    /** Optional function to call on any KeyDown events processed by toolbar */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-}
-/** Component that displays tool settings as a bar across the top of the content view.
- * @public
- */
-export declare function ToolbarWithOverflow(props: ToolbarWithOverflowProps): JSX.Element;
-/** Interface toolbars use to define context for its items.
- * @internal
- */
-export interface ToolbarItemContextArgs {
-    readonly hasOverflow: boolean;
-    readonly useHeight: boolean;
-    readonly onResize: (w: number) => void;
-}
-/** Interface toolbars use to define context for its items.
- * @internal
- */
-export declare const ToolbarItemContext: React.Context<ToolbarItemContextArgs>;
-/** @internal */
-export declare function useToolItemEntryContext(): ToolbarItemContextArgs;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Toolbar.scss";
+import * as React from "react";
+import { ActionButton, CommonToolbarItem, CustomButtonDefinition, GroupButton, OnItemExecutedFunc } from "@itwin/appui-abstract";
+import { CommonProps, NoChildrenProps } from "@itwin/core-react";
+import { Direction, OrthogonalDirection } from "./utilities/Direction";
+/** Describes the data needed to insert a custom `React` button into an ToolbarWithOverflow.
+ * @public
+ */
+export interface CustomToolbarItem extends CustomButtonDefinition {
+    /** React node that must result in providing a PopupItem @deprecated use panelContentNode */
+    buttonNode?: React.ReactNode;
+    /** defines the content to display in popup panel */
+    panelContentNode?: React.ReactNode;
+    /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the
+     * content node is unmounted each time the popup is closed. */
+    keepContentsLoaded?: boolean;
+}
+/**
+ * Context used by Toolbar items to know if popup panel should be hidden - via AutoHide.
+ * @public
+ */
+export declare const ToolbarPopupAutoHideContext: React.Context<boolean>;
+/**
+ * React hook used to retrieve the ToolbarPopupAutoHideContext.
+ *  @public
+ */
+export declare function useToolbarPopupAutoHideContext(): boolean;
+/** Describes toolbar item.
+ * @public
+ */
+export declare type ToolbarItem = ActionButton | GroupButton | CustomToolbarItem;
+/** CustomToolbarItem type guard.
+ * @internal
+ */
+export declare function isCustomToolbarItem(item: ToolbarItem): item is CustomToolbarItem;
+/** @internal */
+export declare const getToolbarDirection: (expandsTo: Direction) => OrthogonalDirection;
+/** Available alignment modes of [[ToolbarWithOverflow]] panels.
+ * @public
+ */
+export declare enum ToolbarPanelAlignment {
+    Start = 0,
+    End = 1
+}
+/** Enumeration of Toolbar Opacity setting.
+ * @public
+ */
+export declare enum ToolbarOpacitySetting {
+    /** Use the default background, box-shadow opacity and backdrop-filter blur */
+    Defaults = 0,
+    /** Alter the opacity from transparent to the defaults based on mouse proximity */
+    Proximity = 1,
+    /** Use a transparent background, box-shadow opacity and backdrop-filter blur */
+    Transparent = 2
+}
+/** Helpers for [[ToolbarPanelAlignment]].
+ * @internal
+ */
+export declare class ToolbarPanelAlignmentHelpers {
+    /** Class name of [[ToolbarPanelAlignment.Start]] */
+    static readonly START_CLASS_NAME = "components-panel-alignment-start";
+    /** Class name of [[ToolbarPanelAlignment.End]] */
+    static readonly END_CLASS_NAME = "components-panel-alignment-end";
+    /** @returns Class name of specified [[ToolbarPanelAlignment]] */
+    static getCssClassName(panelAlignment: ToolbarPanelAlignment): string;
+}
+/** @internal */
+export interface ToolbarOverflowContextProps {
+    readonly expandsTo: Direction;
+    readonly direction: OrthogonalDirection;
+    readonly overflowExpandsTo: Direction;
+    readonly overflowDirection: OrthogonalDirection;
+    readonly panelAlignment: ToolbarPanelAlignment;
+    readonly useDragInteraction: boolean;
+    readonly toolbarOpacitySetting: ToolbarOpacitySetting;
+    readonly openPopupCount: number;
+    readonly onPopupPanelOpenClose: (isOpening: boolean) => void;
+    readonly overflowDisplayActive: boolean;
+    readonly onItemExecuted: OnItemExecutedFunc;
+    readonly onKeyDown: (e: React.KeyboardEvent) => void;
+}
+/**
+ * Context used by Toolbar component to provide Direction to child components.
+ * @internal
+ */
+export declare const ToolbarWithOverflowDirectionContext: React.Context<ToolbarOverflowContextProps>;
+/** @internal */
+export declare function CustomItem({ item, addGroupSeparator }: {
+    item: CustomToolbarItem;
+    addGroupSeparator: boolean;
+}): JSX.Element | null;
+/** @internal */
+export declare function GroupPopupItem({ item, addGroupSeparator }: {
+    item: GroupButton;
+    addGroupSeparator: boolean;
+}): JSX.Element;
+/** @internal */
+export declare function ActionItem({ item, addGroupSeparator }: {
+    item: ActionButton;
+    addGroupSeparator: boolean;
+}): JSX.Element;
+/** @internal */
+export declare function ToolbarItemComponent({ item, addGroupSeparator }: {
+    item: ToolbarItem;
+    addGroupSeparator: boolean;
+}): JSX.Element | null;
+/** @internal */
+export declare function useToolbarWithOverflowDirectionContext(): ToolbarOverflowContextProps;
+/** Properties of [[ToolbarWithOverflow]] component.
+ * @public
+ */
+export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
+    /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
+    expandsTo?: Direction;
+    /** Describes to which direction the overflow popup panels are expanded. Defaults to: [[Direction.Right]] */
+    overflowExpandsTo?: Direction;
+    /** definitions for items of the toolbar. i.e. [[CommonToolbarItem]]. Items are expected to be already sorted by group and item. */
+    items: CommonToolbarItem[];
+    /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */
+    panelAlignment?: ToolbarPanelAlignment;
+    /** Use Drag Interaction to open popups with nest action buttons */
+    useDragInteraction?: boolean;
+    /** Determines whether to use mouse proximity to alter the opacity of the toolbar */
+    toolbarOpacitySetting?: ToolbarOpacitySetting;
+    /** Optional function to call on any item execution */
+    onItemExecuted?: OnItemExecutedFunc;
+    /** Optional function to call on any KeyDown events processed by toolbar */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+/** Component that displays tool settings as a bar across the top of the content view.
+ * @public
+ */
+export declare function ToolbarWithOverflow(props: ToolbarWithOverflowProps): JSX.Element;
+/** Interface toolbars use to define context for its items.
+ * @internal
+ */
+export interface ToolbarItemContextArgs {
+    readonly hasOverflow: boolean;
+    readonly useHeight: boolean;
+    readonly onResize: (w: number) => void;
+}
+/** Interface toolbars use to define context for its items.
+ * @internal
+ */
+export declare const ToolbarItemContext: React.Context<ToolbarItemContextArgs>;
+/** @internal */
+export declare function useToolItemEntryContext(): ToolbarItemContextArgs;
 //# sourceMappingURL=ToolbarWithOverflow.d.ts.map