@itwin/components-react 4.3.1 → 4.5.0

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

@@ -38,14 +38,14 @@ require("./ItemWrapper.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const core_react_1 = require("@itwin/core-react");
-const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+const InternalToolbarComponent_1 = require("./InternalToolbarComponent");
 const Direction_1 = require("./utilities/Direction");
 /** Used in a [[ItemWrapper]] component to display a setting.
  * @internal future
  */
 function ItemWrapper(props) {
-    const { expandsTo, direction, overflowExpandsTo, overflowDirection } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
-    const { hasOverflow, onResize, useHeight } = (0, ToolbarWithOverflow_1.useToolItemEntryContext)();
+    const { expandsTo, direction, overflowExpandsTo, overflowDirection } = (0, InternalToolbarComponent_1.useToolbarWithOverflowDirectionContext)();
+    const { hasOverflow, onResize, useHeight } = (0, InternalToolbarComponent_1.useToolItemEntryContext)();
     const ref = useResizeObserverSingleDimension(onResize, useHeight);
     const className = (0, classnames_1.default)("components-toolbar-item-container", hasOverflow && "components-overflown", Direction_1.OrthogonalDirectionHelpers.getCssClassName(hasOverflow ? overflowDirection : direction), Direction_1.DirectionHelpers.getCssClassName(hasOverflow ? overflowExpandsTo : expandsTo), props.className);
     return (React.createElement("div", { className: className, ref: ref, style: props.style }, props.children));

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

@@ -1 +1 @@
-{"version":3,"file":"ItemWrapper.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,8BAA4B;AAC5B,4DAAoC;AACpC,6CAA+B;AAE/B,kDAAsD;AACtD,+DAG+B;AAC/B,qDAG+B;AAU/B;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAClE,IAAA,4DAAsC,GAAE,CAAC;IAC3C,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,6CAAuB,GAAE,CAAC;IACvE,MAAM,GAAG,GAAG,gCAAgC,CAC1C,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,WAAW,IAAI,sBAAsB,EACrC,sCAA0B,CAAC,eAAe,CACxC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAC5C,EACD,4BAAgB,CAAC,eAAe,CAC9B,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAC5C,EACD,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACpD,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAxBD,kCAwBC;AAED,gBAAgB;AAChB,SAAgB,gCAAgC,CAC9C,QAAgC,EAChC,SAAkB;IAElB,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACvB,IAAI,SAAS;YAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;QAClC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,CAAC,CACtB,CAAC;IACF,OAAO,IAAA,8BAAiB,EAAI,YAAY,CAAC,CAAC;AAC5C,CAAC;AAZD,4EAYC","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 type { CommonProps } from \"@itwin/core-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\nimport {\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./ToolbarWithOverflow\";\nimport {\n  DirectionHelpers,\n  OrthogonalDirectionHelpers,\n} 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 } =\n    useToolbarWithOverflowDirectionContext();\n  const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();\n  const ref = useResizeObserverSingleDimension<HTMLDivElement>(\n    onResize,\n    useHeight\n  );\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    hasOverflow && \"components-overflown\",\n    OrthogonalDirectionHelpers.getCssClassName(\n      hasOverflow ? overflowDirection : direction\n    ),\n    DirectionHelpers.getCssClassName(\n      hasOverflow ? overflowExpandsTo : expandsTo\n    ),\n    props.className\n  );\n  return (\n    <div className={className} ref={ref} style={props.style}>\n      {props.children}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useResizeObserverSingleDimension<T extends Element>(\n  onResize: (size: number) => void,\n  useHeight: boolean\n) {\n  const handleResize = React.useCallback(\n    (w: number, h: number) => {\n      if (useHeight) return onResize(h);\n      return onResize(w);\n    },\n    [useHeight, onResize]\n  );\n  return useResizeObserver<T>(handleResize);\n}\n"]}
+{"version":3,"file":"ItemWrapper.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,8BAA4B;AAC5B,4DAAoC;AACpC,6CAA+B;AAE/B,kDAAsD;AACtD,yEAGoC;AACpC,qDAG+B;AAU/B;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAClE,IAAA,iEAAsC,GAAE,CAAC;IAC3C,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,kDAAuB,GAAE,CAAC;IACvE,MAAM,GAAG,GAAG,gCAAgC,CAC1C,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,WAAW,IAAI,sBAAsB,EACrC,sCAA0B,CAAC,eAAe,CACxC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAC5C,EACD,4BAAgB,CAAC,eAAe,CAC9B,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAC5C,EACD,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACpD,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAxBD,kCAwBC;AAED,gBAAgB;AAChB,SAAgB,gCAAgC,CAC9C,QAAgC,EAChC,SAAkB;IAElB,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACvB,IAAI,SAAS;YAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;QAClC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,CAAC,CACtB,CAAC;IACF,OAAO,IAAA,8BAAiB,EAAI,YAAY,CAAC,CAAC;AAC5C,CAAC;AAZD,4EAYC","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 type { CommonProps } from \"@itwin/core-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\nimport {\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./InternalToolbarComponent\";\nimport {\n  DirectionHelpers,\n  OrthogonalDirectionHelpers,\n} 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 } =\n    useToolbarWithOverflowDirectionContext();\n  const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();\n  const ref = useResizeObserverSingleDimension<HTMLDivElement>(\n    onResize,\n    useHeight\n  );\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    hasOverflow && \"components-overflown\",\n    OrthogonalDirectionHelpers.getCssClassName(\n      hasOverflow ? overflowDirection : direction\n    ),\n    DirectionHelpers.getCssClassName(\n      hasOverflow ? overflowExpandsTo : expandsTo\n    ),\n    props.className\n  );\n  return (\n    <div className={className} ref={ref} style={props.style}>\n      {props.children}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useResizeObserverSingleDimension<T extends Element>(\n  onResize: (size: number) => void,\n  useHeight: boolean\n) {\n  const handleResize = React.useCallback(\n    (w: number, h: number) => {\n      if (useHeight) return onResize(h);\n      return onResize(w);\n    },\n    [useHeight, onResize]\n  );\n  return useResizeObserver<T>(handleResize);\n}\n"]}

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

@@ -38,15 +38,15 @@ require("./Items.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const core_react_1 = require("@itwin/core-react");
-const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+const InternalToolbarComponent_1 = require("./InternalToolbarComponent");
 const Direction_1 = require("./utilities/Direction");
 /** Toolbar items container. Used in [[ToolbarWithOverflow]] component.
  * @internal
  */
 function ToolbarItems(props) {
     const ref = React.useRef(null);
-    const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
-    const useTransparentBackground = toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Transparent;
+    const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = (0, InternalToolbarComponent_1.useToolbarWithOverflowDirectionContext)();
+    const useTransparentBackground = toolbarOpacitySetting === InternalToolbarComponent_1.ToolbarOpacitySetting.Transparent;
     let toolbarOpacity = useTransparentBackground
         ? 0
         : Number(document.documentElement.style.getPropertyValue("--buic-toolbar-opacity"));
@@ -56,7 +56,7 @@ function ToolbarItems(props) {
     let filterBlur = useTransparentBackground
         ? 0
         : core_react_1.TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;
-    let showSeparators = toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Transparent ? false : true;
+    let showSeparators = toolbarOpacitySetting === InternalToolbarComponent_1.ToolbarOpacitySetting.Transparent ? false : true;
     const isInitialMount = React.useRef(true);
     const { onElementRef, proximityScale } = (0, core_react_1.useWidgetOpacityContext)();
     React.useEffect(() => {
@@ -66,7 +66,7 @@ function ToolbarItems(props) {
             onElementRef(ref);
         }
     }, [onElementRef]);
-    if (toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Proximity &&
+    if (toolbarOpacitySetting === InternalToolbarComponent_1.ToolbarOpacitySetting.Proximity &&
         openPopupCount < 1 &&
         !overflowDisplayActive) {
         toolbarOpacity = (0, core_react_1.calculateToolbarOpacity)(proximityScale);

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

@@ -1 +1 @@
-{"version":3,"file":"Items.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Items.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,wBAAsB;AACtB,4DAAoC;AACpC,6CAA+B;AAE/B,kDAU2B;AAC3B,+DAG+B;AAE/B,qDAAmE;AAYnE;;GAEG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,EAAE,GACpE,IAAA,4DAAsC,GAAE,CAAC;IAC3C,MAAM,wBAAwB,GAC5B,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC;IAE9D,IAAI,cAAc,GAAG,wBAAwB;QAC3C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,MAAM,CACJ,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,gBAAgB,CAC7C,wBAAwB,CACzB,CACF,CAAC;IACN,IAAI,gBAAgB,GAAG,wBAAwB;QAC7C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,+CAAkC,CAAC;IACvC,IAAI,UAAU,GAAG,wBAAwB;QACvC,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,iDAAoC,CAAC;IACzC,IAAI,cAAc,GAChB,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,IAAA,oCAAuB,GAAE,CAAC;IAEnE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,uBAAuB;QACvB,IAAI,cAAc,CAAC,OAAO,EAAE;YAC1B,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;YAC/B,YAAY,CAAC,GAAG,CAAC,CAAC;SACnB;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,IACE,qBAAqB,KAAK,2CAAqB,CAAC,SAAS;QACzD,cAAc,GAAG,CAAC;QAClB,CAAC,qBAAqB,EACtB;QACA,cAAc,GAAG,IAAA,oCAAuB,EAAC,cAAc,CAAC,CAAC;QACzD,gBAAgB,GAAG,IAAA,sCAAyB,EAAC,cAAc,CAAC,CAAC;QAC7D,UAAU,GAAG,IAAA,wCAA2B,EAAC,cAAc,CAAC,CAAC;QACzD,uBAAuB;QACvB,IAAI,cAAc,GAAG,IAAI;YAAE,cAAc,GAAG,KAAK,CAAC;KACnD;IAED,MAAM,QAAQ,GAAwB;QACpC,eAAe,EAAE,IAAA,sCAAyB,EAAC,cAAc,CAAC;QAC1D,SAAS,EAAE,IAAA,gCAAmB,EAAC,gBAAgB,CAAC;QAChD,cAAc,EAAE,IAAA,qCAAwB,EAAC,UAAU,CAAC;QACpD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,oCAAoC,EACpC,sCAA0B,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,EAC3D,cAAc,IAAI,oCAAoC,EACtD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IACjD,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAjED,oCAiEC","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 type { CommonProps } from \"@itwin/core-react\";\nimport {\n  calculateBackdropFilterBlur,\n  calculateBoxShadowOpacity,\n  calculateToolbarOpacity,\n  getToolbarBackdropFilter,\n  getToolbarBackgroundColor,\n  getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT,\n  TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\nimport {\n  ToolbarOpacitySetting,\n  useToolbarWithOverflowDirectionContext,\n} from \"./ToolbarWithOverflow\";\nimport type { OrthogonalDirection } from \"./utilities/Direction\";\nimport { 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  const ref = React.useRef<HTMLDivElement>(null);\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } =\n    useToolbarWithOverflowDirectionContext();\n  const useTransparentBackground =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n\n  let toolbarOpacity = useTransparentBackground\n    ? 0\n    : Number(\n        document.documentElement.style.getPropertyValue(\n          \"--buic-toolbar-opacity\"\n        )\n      );\n  let boxShadowOpacity = useTransparentBackground\n    ? 0\n    : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground\n    ? 0\n    : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators =\n    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 (\n    toolbarOpacitySetting === ToolbarOpacitySetting.Proximity &&\n    openPopupCount < 1 &&\n    !overflowDisplayActive\n  ) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    // istanbul ignore next\n    if (proximityScale < 0.25) 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\n  return (\n    <div className={className} style={divStyle} ref={ref}>\n      {props.children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"Items.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Items.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,wBAAsB;AACtB,4DAAoC;AACpC,6CAA+B;AAE/B,kDAU2B;AAC3B,yEAGoC;AAEpC,qDAAmE;AAYnE;;GAEG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,EAAE,GACpE,IAAA,iEAAsC,GAAE,CAAC;IAC3C,MAAM,wBAAwB,GAC5B,qBAAqB,KAAK,gDAAqB,CAAC,WAAW,CAAC;IAE9D,IAAI,cAAc,GAAG,wBAAwB;QAC3C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,MAAM,CACJ,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,gBAAgB,CAC7C,wBAAwB,CACzB,CACF,CAAC;IACN,IAAI,gBAAgB,GAAG,wBAAwB;QAC7C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,+CAAkC,CAAC;IACvC,IAAI,UAAU,GAAG,wBAAwB;QACvC,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,iDAAoC,CAAC;IACzC,IAAI,cAAc,GAChB,qBAAqB,KAAK,gDAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,IAAA,oCAAuB,GAAE,CAAC;IAEnE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,uBAAuB;QACvB,IAAI,cAAc,CAAC,OAAO,EAAE;YAC1B,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;YAC/B,YAAY,CAAC,GAAG,CAAC,CAAC;SACnB;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,IACE,qBAAqB,KAAK,gDAAqB,CAAC,SAAS;QACzD,cAAc,GAAG,CAAC;QAClB,CAAC,qBAAqB,EACtB;QACA,cAAc,GAAG,IAAA,oCAAuB,EAAC,cAAc,CAAC,CAAC;QACzD,gBAAgB,GAAG,IAAA,sCAAyB,EAAC,cAAc,CAAC,CAAC;QAC7D,UAAU,GAAG,IAAA,wCAA2B,EAAC,cAAc,CAAC,CAAC;QACzD,uBAAuB;QACvB,IAAI,cAAc,GAAG,IAAI;YAAE,cAAc,GAAG,KAAK,CAAC;KACnD;IAED,MAAM,QAAQ,GAAwB;QACpC,eAAe,EAAE,IAAA,sCAAyB,EAAC,cAAc,CAAC;QAC1D,SAAS,EAAE,IAAA,gCAAmB,EAAC,gBAAgB,CAAC;QAChD,cAAc,EAAE,IAAA,qCAAwB,EAAC,UAAU,CAAC;QACpD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,oCAAoC,EACpC,sCAA0B,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,EAC3D,cAAc,IAAI,oCAAoC,EACtD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IACjD,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAjED,oCAiEC","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 type { CommonProps } from \"@itwin/core-react\";\nimport {\n  calculateBackdropFilterBlur,\n  calculateBoxShadowOpacity,\n  calculateToolbarOpacity,\n  getToolbarBackdropFilter,\n  getToolbarBackgroundColor,\n  getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT,\n  TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\nimport {\n  ToolbarOpacitySetting,\n  useToolbarWithOverflowDirectionContext,\n} from \"./InternalToolbarComponent\";\nimport type { OrthogonalDirection } from \"./utilities/Direction\";\nimport { 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  const ref = React.useRef<HTMLDivElement>(null);\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } =\n    useToolbarWithOverflowDirectionContext();\n  const useTransparentBackground =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n\n  let toolbarOpacity = useTransparentBackground\n    ? 0\n    : Number(\n        document.documentElement.style.getPropertyValue(\n          \"--buic-toolbar-opacity\"\n        )\n      );\n  let boxShadowOpacity = useTransparentBackground\n    ? 0\n    : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground\n    ? 0\n    : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators =\n    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 (\n    toolbarOpacitySetting === ToolbarOpacitySetting.Proximity &&\n    openPopupCount < 1 &&\n    !overflowDisplayActive\n  ) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    // istanbul ignore next\n    if (proximityScale < 0.25) 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\n  return (\n    <div className={className} style={divStyle} ref={ref}>\n      {props.children}\n    </div>\n  );\n}\n"]}

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

@@ -38,7 +38,7 @@ require("./Overflow.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const core_react_1 = require("@itwin/core-react");
-const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+const InternalToolbarComponent_1 = require("./InternalToolbarComponent");
 const ItemWrapper_1 = require("./ItemWrapper");
 const Direction_1 = require("./utilities/Direction");
 const appui_abstract_1 = require("@itwin/appui-abstract");
@@ -46,10 +46,10 @@ const appui_abstract_1 = require("@itwin/appui-abstract");
  * @internal
  */
 function ToolbarOverflowButton(props) {
-    const { onResize, useHeight } = (0, ToolbarWithOverflow_1.useToolItemEntryContext)();
+    const { onResize, useHeight } = (0, InternalToolbarComponent_1.useToolItemEntryContext)();
     const [targetRef, target] = (0, core_react_1.useRefState)();
     const ref = (0, ItemWrapper_1.useResizeObserverSingleDimension)(onResize, useHeight);
-    const isHidden = (0, ToolbarWithOverflow_1.useToolbarPopupAutoHideContext)();
+    const isHidden = (0, InternalToolbarComponent_1.useToolbarPopupAutoHideContext)();
     const popupClassName = (0, classnames_1.default)("components-toolbar-overflow_popup", isHidden && "nz-hidden");
     const className = (0, classnames_1.default)("components-toolbar-item-container", "components-toolbar-overflow-button", props.className);
     const buttonClassName = (0, classnames_1.default)("components-toolbar-button-item", "components-ellipsis-icon");

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

@@ -1 +1 @@
-{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Overflow.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,2BAAyB;AACzB,4DAAoC;AACpC,6CAA+B;AAE/B,kDAAuD;AACvD,+DAG+B;AAC/B,+CAAiE;AACjE,qDAAkD;AAClD,0DAAyD;AAsBzD;;GAEG;AACH,SAAgB,qBAAqB,CAAC,KAAiC;IACrE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,6CAAuB,GAAE,CAAC;IAC1D,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,IAAA,wBAAW,GAAkB,CAAC;IAC1D,MAAM,GAAG,GAAG,IAAA,8CAAgC,EAC1C,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,QAAQ,GAAG,IAAA,oDAA8B,GAAE,CAAC;IAClD,MAAM,cAAc,GAAG,IAAA,oBAAU,EAC/B,mCAAmC,EACnC,QAAQ,IAAI,WAAW,CACxB,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,oCAAoC,EACpC,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,MAAM,eAAe,GAAG,IAAA,oBAAU,EAChC,gCAAgC,EAChC,0BAA0B,CAC3B,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS;QACvC,gCACE,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK;YAElB,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,qBAAqB,GAAG,CACnC,CACC;QACT,oBAAC,kBAAK,IACJ,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,CAAC,EACT,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,iCAAiC,CAAC,KAAK,CAAC,SAAS,CAAC,EAC5D,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,SAAS,CACV,CACJ,CACP,CAAC;AACJ,CAAC;AAhDD,sDAgDC;AAED,gBAAgB;AAChB,SAAgB,iCAAiC,CAC/C,SAAoB;IAEpB,QAAQ,SAAS,EAAE;QACjB,KAAK,qBAAS,CAAC,MAAM;YACnB,OAAO,iCAAgB,CAAC,MAAM,CAAC;QACjC,KAAK,qBAAS,CAAC,IAAI;YACjB,OAAO,iCAAgB,CAAC,IAAI,CAAC;QAC/B,KAAK,qBAAS,CAAC,KAAK;YAClB,OAAO,iCAAgB,CAAC,KAAK,CAAC;QAChC,KAAK,qBAAS,CAAC,GAAG;YAChB,OAAO,iCAAgB,CAAC,GAAG,CAAC;KAC/B;AACH,CAAC;AAbD,8EAaC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ToolSettings\n */\n\nimport \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport { Popup, useRefState } from \"@itwin/core-react\";\nimport {\n  useToolbarPopupAutoHideContext,\n  useToolItemEntryContext,\n} from \"./ToolbarWithOverflow\";\nimport { useResizeObserverSingleDimension } from \"./ItemWrapper\";\nimport { Direction } from \"./utilities/Direction\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\n\n/** Properties of [[ToolbarOverflowButton]] component.\n * @internal\n */\nexport interface ToolbarOverflowButtonProps\n  extends CommonProps,\n    NoChildrenProps {\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Function called when panel is closed. */\n  onClose?: () => void;\n  /** Describes if the panel is open. */\n  open?: boolean;\n  /** Panel expand direction. */\n  expandsTo: Direction;\n  /** Panel element containing the overflown buttons */\n  panelNode?: React.ReactNode;\n  /** Title for the item. */\n  title?: string;\n}\n\n/** Button to toggle display of overflown tools.\n * @internal\n */\nexport function ToolbarOverflowButton(props: ToolbarOverflowButtonProps) {\n  const { onResize, useHeight } = useToolItemEntryContext();\n  const [targetRef, target] = useRefState<HTMLDivElement>();\n  const ref = useResizeObserverSingleDimension<HTMLButtonElement>(\n    onResize,\n    useHeight\n  );\n  const isHidden = useToolbarPopupAutoHideContext();\n  const popupClassName = classnames(\n    \"components-toolbar-overflow_popup\",\n    isHidden && \"nz-hidden\"\n  );\n\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    \"components-toolbar-overflow-button\",\n    props.className\n  );\n  const buttonClassName = classnames(\n    \"components-toolbar-button-item\",\n    \"components-ellipsis-icon\"\n  );\n  return (\n    <div className={className} ref={targetRef}>\n      <button\n        ref={ref}\n        onClick={props.onClick}\n        className={buttonClassName}\n        style={props.style}\n        title={props.title}\n      >\n        <div className=\"components-icon\">\n          <div className=\"components-ellipsis\" />\n        </div>\n      </button>\n      <Popup\n        className={popupClassName}\n        offset={0}\n        showShadow={false}\n        isOpen={props.open}\n        onClose={props.onClose}\n        position={toToolbarOverflowRelativePosition(props.expandsTo)}\n        target={target}\n      >\n        {props.panelNode}\n      </Popup>\n    </div>\n  );\n}\n\n/** @internal */\nexport function toToolbarOverflowRelativePosition(\n  expandsTo: Direction\n): RelativePosition {\n  switch (expandsTo) {\n    case Direction.Bottom:\n      return RelativePosition.Bottom;\n    case Direction.Left:\n      return RelativePosition.Left;\n    case Direction.Right:\n      return RelativePosition.Right;\n    case Direction.Top:\n      return RelativePosition.Top;\n  }\n}\n"]}
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Overflow.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,2BAAyB;AACzB,4DAAoC;AACpC,6CAA+B;AAE/B,kDAAuD;AACvD,yEAGoC;AACpC,+CAAiE;AACjE,qDAAkD;AAClD,0DAAyD;AAsBzD;;GAEG;AACH,SAAgB,qBAAqB,CAAC,KAAiC;IACrE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,kDAAuB,GAAE,CAAC;IAC1D,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,IAAA,wBAAW,GAAkB,CAAC;IAC1D,MAAM,GAAG,GAAG,IAAA,8CAAgC,EAC1C,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,QAAQ,GAAG,IAAA,yDAA8B,GAAE,CAAC;IAClD,MAAM,cAAc,GAAG,IAAA,oBAAU,EAC/B,mCAAmC,EACnC,QAAQ,IAAI,WAAW,CACxB,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,oCAAoC,EACpC,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,MAAM,eAAe,GAAG,IAAA,oBAAU,EAChC,gCAAgC,EAChC,0BAA0B,CAC3B,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS;QACvC,gCACE,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK;YAElB,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,qBAAqB,GAAG,CACnC,CACC;QACT,oBAAC,kBAAK,IACJ,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,CAAC,EACT,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,iCAAiC,CAAC,KAAK,CAAC,SAAS,CAAC,EAC5D,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,SAAS,CACV,CACJ,CACP,CAAC;AACJ,CAAC;AAhDD,sDAgDC;AAED,gBAAgB;AAChB,SAAgB,iCAAiC,CAC/C,SAAoB;IAEpB,QAAQ,SAAS,EAAE;QACjB,KAAK,qBAAS,CAAC,MAAM;YACnB,OAAO,iCAAgB,CAAC,MAAM,CAAC;QACjC,KAAK,qBAAS,CAAC,IAAI;YACjB,OAAO,iCAAgB,CAAC,IAAI,CAAC;QAC/B,KAAK,qBAAS,CAAC,KAAK;YAClB,OAAO,iCAAgB,CAAC,KAAK,CAAC;QAChC,KAAK,qBAAS,CAAC,GAAG;YAChB,OAAO,iCAAgB,CAAC,GAAG,CAAC;KAC/B;AACH,CAAC;AAbD,8EAaC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ToolSettings\n */\n\nimport \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport { Popup, useRefState } from \"@itwin/core-react\";\nimport {\n  useToolbarPopupAutoHideContext,\n  useToolItemEntryContext,\n} from \"./InternalToolbarComponent\";\nimport { useResizeObserverSingleDimension } from \"./ItemWrapper\";\nimport { Direction } from \"./utilities/Direction\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\n\n/** Properties of [[ToolbarOverflowButton]] component.\n * @internal\n */\nexport interface ToolbarOverflowButtonProps\n  extends CommonProps,\n    NoChildrenProps {\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Function called when panel is closed. */\n  onClose?: () => void;\n  /** Describes if the panel is open. */\n  open?: boolean;\n  /** Panel expand direction. */\n  expandsTo: Direction;\n  /** Panel element containing the overflown buttons */\n  panelNode?: React.ReactNode;\n  /** Title for the item. */\n  title?: string;\n}\n\n/** Button to toggle display of overflown tools.\n * @internal\n */\nexport function ToolbarOverflowButton(props: ToolbarOverflowButtonProps) {\n  const { onResize, useHeight } = useToolItemEntryContext();\n  const [targetRef, target] = useRefState<HTMLDivElement>();\n  const ref = useResizeObserverSingleDimension<HTMLButtonElement>(\n    onResize,\n    useHeight\n  );\n  const isHidden = useToolbarPopupAutoHideContext();\n  const popupClassName = classnames(\n    \"components-toolbar-overflow_popup\",\n    isHidden && \"nz-hidden\"\n  );\n\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    \"components-toolbar-overflow-button\",\n    props.className\n  );\n  const buttonClassName = classnames(\n    \"components-toolbar-button-item\",\n    \"components-ellipsis-icon\"\n  );\n  return (\n    <div className={className} ref={targetRef}>\n      <button\n        ref={ref}\n        onClick={props.onClick}\n        className={buttonClassName}\n        style={props.style}\n        title={props.title}\n      >\n        <div className=\"components-icon\">\n          <div className=\"components-ellipsis\" />\n        </div>\n      </button>\n      <Popup\n        className={popupClassName}\n        offset={0}\n        showShadow={false}\n        isOpen={props.open}\n        onClose={props.onClose}\n        position={toToolbarOverflowRelativePosition(props.expandsTo)}\n        target={target}\n      >\n        {props.panelNode}\n      </Popup>\n    </div>\n  );\n}\n\n/** @internal */\nexport function toToolbarOverflowRelativePosition(\n  expandsTo: Direction\n): RelativePosition {\n  switch (expandsTo) {\n    case Direction.Bottom:\n      return RelativePosition.Bottom;\n    case Direction.Left:\n      return RelativePosition.Left;\n    case Direction.Right:\n      return RelativePosition.Right;\n    case Direction.Top:\n      return RelativePosition.Top;\n  }\n}\n"]}

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

@@ -38,15 +38,15 @@ require("./OverflowPanel.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const core_react_1 = require("@itwin/core-react");
-const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+const InternalToolbarComponent_1 = require("./InternalToolbarComponent");
 const Direction_1 = require("./utilities/Direction");
 /** Displays overflown tool settings.
  * @internal
  */
 function ToolbarOverflowPanel(props) {
-    const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive, expandsTo, overflowExpandsTo, overflowDirection, } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
+    const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive, expandsTo, overflowExpandsTo, overflowDirection, } = (0, InternalToolbarComponent_1.useToolbarWithOverflowDirectionContext)();
     const { proximityScale } = (0, core_react_1.useWidgetOpacityContext)();
-    const useTransparentBackground = toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Transparent;
+    const useTransparentBackground = toolbarOpacitySetting === InternalToolbarComponent_1.ToolbarOpacitySetting.Transparent;
     let toolbarOpacity = useTransparentBackground ? 0 : core_react_1.TOOLBAR_OPACITY_DEFAULT;
     let boxShadowOpacity = useTransparentBackground
         ? 0
@@ -54,9 +54,9 @@ function ToolbarOverflowPanel(props) {
     let filterBlur = useTransparentBackground
         ? 0
         : core_react_1.TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;
-    let showSeparators = toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Transparent ? false : true;
+    let showSeparators = toolbarOpacitySetting === InternalToolbarComponent_1.ToolbarOpacitySetting.Transparent ? false : true;
     // istanbul ignore next
-    if (toolbarOpacitySetting === ToolbarWithOverflow_1.ToolbarOpacitySetting.Proximity &&
+    if (toolbarOpacitySetting === InternalToolbarComponent_1.ToolbarOpacitySetting.Proximity &&
         openPopupCount < 1 &&
         !overflowDisplayActive) {
         toolbarOpacity = (0, core_react_1.calculateToolbarOpacity)(proximityScale);

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/OverflowPanel.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,gCAA8B;AAC9B,4DAAoC;AACpC,6CAA+B;AAE/B,kDAW2B;AAE3B,+DAG+B;AAC/B,qDAG+B;AAU/B;;GAEG;AACH,SAAgB,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EACJ,qBAAqB,EACrB,cAAc,EACd,qBAAqB,EACrB,SAAS,EACT,iBAAiB,EACjB,iBAAiB,GAClB,GAAG,IAAA,4DAAsC,GAAE,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,oCAAuB,GAAE,CAAC;IAErD,MAAM,wBAAwB,GAC5B,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC;IAC9D,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oCAAuB,CAAC;IAC5E,IAAI,gBAAgB,GAAG,wBAAwB;QAC7C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,+CAAkC,CAAC;IACvC,IAAI,UAAU,GAAG,wBAAwB;QACvC,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,iDAAoC,CAAC;IACzC,IAAI,cAAc,GAChB,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,uBAAuB;IACvB,IACE,qBAAqB,KAAK,2CAAqB,CAAC,SAAS;QACzD,cAAc,GAAG,CAAC;QAClB,CAAC,qBAAqB,EACtB;QACA,cAAc,GAAG,IAAA,oCAAuB,EAAC,cAAc,CAAC,CAAC;QACzD,gBAAgB,GAAG,IAAA,sCAAyB,EAAC,cAAc,CAAC,CAAC;QAC7D,UAAU,GAAG,IAAA,wCAA2B,EAAC,cAAc,CAAC,CAAC;QACzD,IAAI,cAAc,GAAG,IAAI;YAAE,cAAc,GAAG,KAAK,CAAC;KACnD;IAED,MAAM,QAAQ,GAAwB;QACpC,eAAe,EAAE,IAAA,sCAAyB,EAAC,cAAc,CAAC;QAC1D,SAAS,EAAE,IAAA,gCAAmB,EAAC,gBAAgB,CAAC;QAChD,cAAc,EAAE,IAAA,qCAAwB,EAAC,UAAU,CAAC;QACpD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,oCAAoC,EACpC,sCAA0B,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAC7D,GAAG,sCAA0B,CAAC,eAAe,CAC3C,iBAAiB,CAClB,IAAI,4BAAgB,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,EAClD,cAAc,IAAI,oCAAoC,EACtD,4BAAgB,CAAC,eAAe,CAAC,iBAAiB,CAAC,EACnD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,IACvC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AA3DD,oDA2DC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ToolSettings\n */\n\nimport \"./OverflowPanel.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport {\n  calculateBackdropFilterBlur,\n  calculateBoxShadowOpacity,\n  calculateToolbarOpacity,\n  getToolbarBackdropFilter,\n  getToolbarBackgroundColor,\n  getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT,\n  TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  TOOLBAR_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\n\nimport {\n  ToolbarOpacitySetting,\n  useToolbarWithOverflowDirectionContext,\n} from \"./ToolbarWithOverflow\";\nimport {\n  DirectionHelpers,\n  OrthogonalDirectionHelpers,\n} from \"./utilities/Direction\";\n\n/** Properties of [[ToolbarOverflowPanel]] component.\n * @internal\n */\nexport interface ToolbarOverflowPanelProps extends CommonProps {\n  /** Panel content. */\n  children?: React.ReactNode;\n}\n\n/** Displays overflown tool settings.\n * @internal\n */\nexport function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps) {\n  const {\n    toolbarOpacitySetting,\n    openPopupCount,\n    overflowDisplayActive,\n    expandsTo,\n    overflowExpandsTo,\n    overflowDirection,\n  } = useToolbarWithOverflowDirectionContext();\n  const { proximityScale } = useWidgetOpacityContext();\n\n  const useTransparentBackground =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n  let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT;\n  let boxShadowOpacity = useTransparentBackground\n    ? 0\n    : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground\n    ? 0\n    : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  // istanbul ignore next\n  if (\n    toolbarOpacitySetting === ToolbarOpacitySetting.Proximity &&\n    openPopupCount < 1 &&\n    !overflowDisplayActive\n  ) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    if (proximityScale < 0.25) showSeparators = false;\n  }\n\n  const divStyle: React.CSSProperties = {\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\n    ...props.style,\n  };\n\n  const className = classnames(\n    \"components-toolbar-overflow-panel\",\n    \"components-toolbar-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(overflowDirection),\n    `${OrthogonalDirectionHelpers.getCssClassName(\n      overflowDirection\n    )}-${DirectionHelpers.getCssClassName(expandsTo)}`,\n    showSeparators && \"components-toolbar-show-decorators\",\n    DirectionHelpers.getCssClassName(overflowExpandsTo),\n    props.className\n  );\n\n  return (\n    <div className={className} style={divStyle}>\n      {props.children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"OverflowPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/OverflowPanel.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,gCAA8B;AAC9B,4DAAoC;AACpC,6CAA+B;AAE/B,kDAW2B;AAE3B,yEAGoC;AACpC,qDAG+B;AAU/B;;GAEG;AACH,SAAgB,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EACJ,qBAAqB,EACrB,cAAc,EACd,qBAAqB,EACrB,SAAS,EACT,iBAAiB,EACjB,iBAAiB,GAClB,GAAG,IAAA,iEAAsC,GAAE,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,oCAAuB,GAAE,CAAC;IAErD,MAAM,wBAAwB,GAC5B,qBAAqB,KAAK,gDAAqB,CAAC,WAAW,CAAC;IAC9D,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oCAAuB,CAAC;IAC5E,IAAI,gBAAgB,GAAG,wBAAwB;QAC7C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,+CAAkC,CAAC;IACvC,IAAI,UAAU,GAAG,wBAAwB;QACvC,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,iDAAoC,CAAC;IACzC,IAAI,cAAc,GAChB,qBAAqB,KAAK,gDAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,uBAAuB;IACvB,IACE,qBAAqB,KAAK,gDAAqB,CAAC,SAAS;QACzD,cAAc,GAAG,CAAC;QAClB,CAAC,qBAAqB,EACtB;QACA,cAAc,GAAG,IAAA,oCAAuB,EAAC,cAAc,CAAC,CAAC;QACzD,gBAAgB,GAAG,IAAA,sCAAyB,EAAC,cAAc,CAAC,CAAC;QAC7D,UAAU,GAAG,IAAA,wCAA2B,EAAC,cAAc,CAAC,CAAC;QACzD,IAAI,cAAc,GAAG,IAAI;YAAE,cAAc,GAAG,KAAK,CAAC;KACnD;IAED,MAAM,QAAQ,GAAwB;QACpC,eAAe,EAAE,IAAA,sCAAyB,EAAC,cAAc,CAAC;QAC1D,SAAS,EAAE,IAAA,gCAAmB,EAAC,gBAAgB,CAAC;QAChD,cAAc,EAAE,IAAA,qCAAwB,EAAC,UAAU,CAAC;QACpD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,oCAAoC,EACpC,sCAA0B,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAC7D,GAAG,sCAA0B,CAAC,eAAe,CAC3C,iBAAiB,CAClB,IAAI,4BAAgB,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,EAClD,cAAc,IAAI,oCAAoC,EACtD,4BAAgB,CAAC,eAAe,CAAC,iBAAiB,CAAC,EACnD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,IACvC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AA3DD,oDA2DC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ToolSettings\n */\n\nimport \"./OverflowPanel.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport {\n  calculateBackdropFilterBlur,\n  calculateBoxShadowOpacity,\n  calculateToolbarOpacity,\n  getToolbarBackdropFilter,\n  getToolbarBackgroundColor,\n  getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT,\n  TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  TOOLBAR_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\n\nimport {\n  ToolbarOpacitySetting,\n  useToolbarWithOverflowDirectionContext,\n} from \"./InternalToolbarComponent\";\nimport {\n  DirectionHelpers,\n  OrthogonalDirectionHelpers,\n} from \"./utilities/Direction\";\n\n/** Properties of [[ToolbarOverflowPanel]] component.\n * @internal\n */\nexport interface ToolbarOverflowPanelProps extends CommonProps {\n  /** Panel content. */\n  children?: React.ReactNode;\n}\n\n/** Displays overflown tool settings.\n * @internal\n */\nexport function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps) {\n  const {\n    toolbarOpacitySetting,\n    openPopupCount,\n    overflowDisplayActive,\n    expandsTo,\n    overflowExpandsTo,\n    overflowDirection,\n  } = useToolbarWithOverflowDirectionContext();\n  const { proximityScale } = useWidgetOpacityContext();\n\n  const useTransparentBackground =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n  let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT;\n  let boxShadowOpacity = useTransparentBackground\n    ? 0\n    : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground\n    ? 0\n    : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  // istanbul ignore next\n  if (\n    toolbarOpacitySetting === ToolbarOpacitySetting.Proximity &&\n    openPopupCount < 1 &&\n    !overflowDisplayActive\n  ) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    if (proximityScale < 0.25) showSeparators = false;\n  }\n\n  const divStyle: React.CSSProperties = {\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\n    ...props.style,\n  };\n\n  const className = classnames(\n    \"components-toolbar-overflow-panel\",\n    \"components-toolbar-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(overflowDirection),\n    `${OrthogonalDirectionHelpers.getCssClassName(\n      overflowDirection\n    )}-${DirectionHelpers.getCssClassName(expandsTo)}`,\n    showSeparators && \"components-toolbar-show-decorators\",\n    DirectionHelpers.getCssClassName(overflowExpandsTo),\n    props.className\n  );\n\n  return (\n    <div className={className} style={divStyle}>\n      {props.children}\n    </div>\n  );\n}\n"]}

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

@@ -38,7 +38,7 @@ require("./PopupItem.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const core_react_1 = require("@itwin/core-react");
-const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+const InternalToolbarComponent_1 = require("./InternalToolbarComponent");
 const PopupItemWithDrag_1 = require("./PopupItemWithDrag");
 /**
  * Context used by Toolbar items in popups to close the popup panel.
@@ -63,7 +63,7 @@ exports.useToolbarPopupContext = useToolbarPopupContext;
  */
 function PopupItem(props) {
     const [isPanelShown, setPanelShown] = React.useState(false);
-    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose, } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
+    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose, } = (0, InternalToolbarComponent_1.useToolbarWithOverflowDirectionContext)();
     const processPanelOpenClose = React.useCallback((isOpening) => {
         setPanelShown((prev) => {
             // istanbul ignore else
@@ -85,7 +85,7 @@ function PopupItem(props) {
     const handleClose = React.useCallback(() => {
         processPanelOpenClose(false);
     }, [processPanelOpenClose]);
-    const { hasOverflow } = (0, ToolbarWithOverflow_1.useToolItemEntryContext)();
+    const { hasOverflow } = (0, InternalToolbarComponent_1.useToolItemEntryContext)();
     const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;
     const { hideIndicator, panel } = props;
     return (React.createElement(exports.ToolbarPopupContext.Provider, { value: {
@@ -100,7 +100,7 @@ function PopupItem(props) {
 exports.PopupItem = PopupItem;
 /** @internal */
 function PopupItemPopup(props) {
-    const isHidden = (0, ToolbarWithOverflow_1.useToolbarPopupAutoHideContext)();
+    const isHidden = (0, InternalToolbarComponent_1.useToolbarPopupAutoHideContext)();
     const className = (0, classnames_1.default)("components-toolbar-popupItem_popupItemPopup", isHidden && "nz-hidden");
     return (React.createElement(core_react_1.Popup, { className: className, offset: 0, showShadow: false, ...props }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PopupItem.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItem.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 \"./PopupItem.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ActionButton, RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup, useRefState } from \"@itwin/core-react\";\nimport type { ToolbarButtonItemProps } from \"./Item\";\nimport {\n  useToolbarPopupAutoHideContext,\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./ToolbarWithOverflow\";\nimport { toToolbarPopupRelativePosition } from \"./PopupItemWithDrag\";\n\n/** @public */\nexport interface ToolbarPopupContextProps {\n  readonly closePanel: () => void;\n  readonly setSelectedItem?: (buttonItem: ActionButton) => void;\n}\n\n/**\n * Context used by Toolbar items in popups to close the popup panel.\n * @public\n */\nexport const ToolbarPopupContext =\n  React.createContext<ToolbarPopupContextProps>({\n    /** function used to close popup panel */\n    closePanel: /* istanbul ignore next */ () => {},\n    /** if popup panel is a GroupButton then this is call to set the selected action item within the panel */\n    setSelectedItem: /* istanbul ignore next */ (\n      _buttonItem: ActionButton\n    ) => {},\n  });\n\n/**\n * React hook used to retrieve the ToolbarPopupContext.\n *  @public\n */\nexport function useToolbarPopupContext() {\n  return React.useContext(ToolbarPopupContext);\n}\n\n/** Properties of [[PopupItem]] component.\n * @public\n */\nexport interface PopupItemProps extends ToolbarButtonItemProps {\n  /** Describes if expandable item triangle indicator should be hidden. */\n  hideIndicator?: boolean;\n  /** Panel of the toolbar. */\n  panel?: React.ReactNode;\n  /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the\n   * content node is unmounted each time the popup is closed. */\n  keepContentsMounted?: boolean;\n}\n\n/** Popup toolbar item that displays a panel\n * @public\n */\nexport function PopupItem(props: PopupItemProps) {\n  const [isPanelShown, setPanelShown] = React.useState(false);\n  const {\n    expandsTo,\n    overflowExpandsTo,\n    panelAlignment,\n    onPopupPanelOpenClose,\n  } = useToolbarWithOverflowDirectionContext();\n  const processPanelOpenClose = React.useCallback(\n    (isOpening: boolean) => {\n      setPanelShown((prev) => {\n        // istanbul ignore else\n        if (prev !== isOpening) onPopupPanelOpenClose(isOpening);\n        return isOpening;\n      });\n    },\n    [setPanelShown, onPopupPanelOpenClose]\n  );\n\n  // handle open and closing overflow panel\n  const onButtonClick = React.useCallback(() => {\n    processPanelOpenClose(!isPanelShown);\n    // istanbul ignore next\n    if (props.onClick) props.onClick();\n  }, [props, isPanelShown, processPanelOpenClose]);\n  const className = classnames(\n    \"components-toolbar-button-item\",\n    \"components-toolbar-expandable-button\",\n    props.isDisabled && \"components-disabled\",\n    props.className\n  );\n\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\n  // istanbul ignore next\n  const handleClose = React.useCallback(() => {\n    processPanelOpenClose(false);\n  }, [processPanelOpenClose]);\n  const { hasOverflow } = useToolItemEntryContext();\n  const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;\n\n  const { hideIndicator, panel } = props;\n  return (\n    <ToolbarPopupContext.Provider\n      value={{\n        closePanel: () => processPanelOpenClose(false),\n      }}\n    >\n      <button\n        data-item-id={props.itemId}\n        data-item-type=\"tool-button-popup\"\n        data-item-group-priority={props.groupPriority}\n        data-item-priority={props.itemPriority}\n        data-item-provider-id={props.providerId}\n        ref={targetRef}\n        disabled={props.isDisabled} // this is needed to prevent focusing/keyboard access to disabled buttons\n        onClick={onButtonClick}\n        onKeyDown={props.onKeyDown}\n        className={className}\n        style={props.style}\n        title={props.title}\n      >\n        <div className=\"components-icon\">{props.icon}</div>\n        {props.badge && <div className=\"components-badge\">{props.badge}</div>}\n        {hideIndicator ? /* istanbul ignore next */ undefined : (\n          <div className=\"components-triangle\" />\n        )}\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(\n          expandsToDirection,\n          panelAlignment\n        )}\n        target={target}\n        keepContentsMounted={props.keepContentsMounted}\n      >\n        {panel}\n      </PopupItemPopup>\n    </ToolbarPopupContext.Provider>\n  );\n}\n\n/** @internal */\ninterface PopupItemPopupProps {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  onClose(): void;\n  position: RelativePosition;\n  target?: HTMLElement;\n  keepContentsMounted?: boolean;\n}\n\n/** @internal */\nexport function PopupItemPopup(props: PopupItemPopupProps) {\n  const isHidden = useToolbarPopupAutoHideContext();\n  const className = classnames(\n    \"components-toolbar-popupItem_popupItemPopup\",\n    isHidden && \"nz-hidden\"\n  );\n\n  return (\n    <Popup className={className} offset={0} showShadow={false} {...props} />\n  );\n}\n"]}
+{"version":3,"file":"PopupItem.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItem.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 \"./PopupItem.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ActionButton, RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup, useRefState } from \"@itwin/core-react\";\nimport type { ToolbarButtonItemProps } from \"./Item\";\nimport {\n  useToolbarPopupAutoHideContext,\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./InternalToolbarComponent\";\nimport { toToolbarPopupRelativePosition } from \"./PopupItemWithDrag\";\n\n/** @public */\nexport interface ToolbarPopupContextProps {\n  readonly closePanel: () => void;\n  readonly setSelectedItem?: (buttonItem: ActionButton) => void;\n}\n\n/**\n * Context used by Toolbar items in popups to close the popup panel.\n * @public\n */\nexport const ToolbarPopupContext =\n  React.createContext<ToolbarPopupContextProps>({\n    /** function used to close popup panel */\n    closePanel: /* istanbul ignore next */ () => {},\n    /** if popup panel is a GroupButton then this is call to set the selected action item within the panel */\n    setSelectedItem: /* istanbul ignore next */ (\n      _buttonItem: ActionButton\n    ) => {},\n  });\n\n/**\n * React hook used to retrieve the ToolbarPopupContext.\n *  @public\n */\nexport function useToolbarPopupContext() {\n  return React.useContext(ToolbarPopupContext);\n}\n\n/** Properties of [[PopupItem]] component.\n * @public\n */\nexport interface PopupItemProps extends ToolbarButtonItemProps {\n  /** Describes if expandable item triangle indicator should be hidden. */\n  hideIndicator?: boolean;\n  /** Panel of the toolbar. */\n  panel?: React.ReactNode;\n  /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the\n   * content node is unmounted each time the popup is closed. */\n  keepContentsMounted?: boolean;\n}\n\n/** Popup toolbar item that displays a panel\n * @public\n */\nexport function PopupItem(props: PopupItemProps) {\n  const [isPanelShown, setPanelShown] = React.useState(false);\n  const {\n    expandsTo,\n    overflowExpandsTo,\n    panelAlignment,\n    onPopupPanelOpenClose,\n  } = useToolbarWithOverflowDirectionContext();\n  const processPanelOpenClose = React.useCallback(\n    (isOpening: boolean) => {\n      setPanelShown((prev) => {\n        // istanbul ignore else\n        if (prev !== isOpening) onPopupPanelOpenClose(isOpening);\n        return isOpening;\n      });\n    },\n    [setPanelShown, onPopupPanelOpenClose]\n  );\n\n  // handle open and closing overflow panel\n  const onButtonClick = React.useCallback(() => {\n    processPanelOpenClose(!isPanelShown);\n    // istanbul ignore next\n    if (props.onClick) props.onClick();\n  }, [props, isPanelShown, processPanelOpenClose]);\n  const className = classnames(\n    \"components-toolbar-button-item\",\n    \"components-toolbar-expandable-button\",\n    props.isDisabled && \"components-disabled\",\n    props.className\n  );\n\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\n  // istanbul ignore next\n  const handleClose = React.useCallback(() => {\n    processPanelOpenClose(false);\n  }, [processPanelOpenClose]);\n  const { hasOverflow } = useToolItemEntryContext();\n  const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;\n\n  const { hideIndicator, panel } = props;\n  return (\n    <ToolbarPopupContext.Provider\n      value={{\n        closePanel: () => processPanelOpenClose(false),\n      }}\n    >\n      <button\n        data-item-id={props.itemId}\n        data-item-type=\"tool-button-popup\"\n        data-item-group-priority={props.groupPriority}\n        data-item-priority={props.itemPriority}\n        data-item-provider-id={props.providerId}\n        ref={targetRef}\n        disabled={props.isDisabled} // this is needed to prevent focusing/keyboard access to disabled buttons\n        onClick={onButtonClick}\n        onKeyDown={props.onKeyDown}\n        className={className}\n        style={props.style}\n        title={props.title}\n      >\n        <div className=\"components-icon\">{props.icon}</div>\n        {props.badge && <div className=\"components-badge\">{props.badge}</div>}\n        {hideIndicator ? /* istanbul ignore next */ undefined : (\n          <div className=\"components-triangle\" />\n        )}\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(\n          expandsToDirection,\n          panelAlignment\n        )}\n        target={target}\n        keepContentsMounted={props.keepContentsMounted}\n      >\n        {panel}\n      </PopupItemPopup>\n    </ToolbarPopupContext.Provider>\n  );\n}\n\n/** @internal */\ninterface PopupItemPopupProps {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  onClose(): void;\n  position: RelativePosition;\n  target?: HTMLElement;\n  keepContentsMounted?: boolean;\n}\n\n/** @internal */\nexport function PopupItemPopup(props: PopupItemPopupProps) {\n  const isHidden = useToolbarPopupAutoHideContext();\n  const className = classnames(\n    \"components-toolbar-popupItem_popupItemPopup\",\n    isHidden && \"nz-hidden\"\n  );\n\n  return (\n    <Popup className={className} offset={0} showShadow={false} {...props} />\n  );\n}\n"]}

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

@@ -6,7 +6,7 @@ import "./PopupItem.scss";
 import type { GroupButton } from "@itwin/appui-abstract";
 import { RelativePosition } from "@itwin/appui-abstract";
 import type { ToolbarButtonItemProps } from "./Item";
-import { ToolbarPanelAlignment } from "./ToolbarWithOverflow";
+import { ToolbarPanelAlignment } from "./InternalToolbarComponent";
 import { Direction } from "./utilities/Direction";
 /** Properties of [[PopupItem]] component.
  * @public

package/lib/cjs/components-react/toolbar/PopupItemWithDrag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupItemWithDrag.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,kBAAkB,CAAC;AAG1B,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAGL,gBAAgB,EAEjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAGrD,OAAO,EACL,qBAAqB,EAGtB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;IACpE,4BAA4B;IAC5B,SAAS,EAAE,WAAW,CAAC;CACxB;AAiDD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAmI9D;AAED,gBAAgB;AAChB,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,qBAAqB,GAC/B,gBAAgB,CAelB"}
+{"version":3,"file":"PopupItemWithDrag.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,kBAAkB,CAAC;AAG1B,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAGL,gBAAgB,EAEjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAGrD,OAAO,EACL,qBAAqB,EAGtB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;IACpE,4BAA4B;IAC5B,SAAS,EAAE,WAAW,CAAC;CACxB;AAiDD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAmI9D;AAED,gBAAgB;AAChB,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,qBAAqB,GAC/B,gBAAgB,CAelB"}

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

@@ -41,7 +41,7 @@ const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_react_1 = require("@itwin/core-react");
 const PopupItem_1 = require("./PopupItem");
 const PopupItemsPanel_1 = require("./PopupItemsPanel");
-const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+const InternalToolbarComponent_1 = require("./InternalToolbarComponent");
 const useDragInteraction_1 = require("./useDragInteraction");
 const Direction_1 = require("./utilities/Direction");
 function tryFindActiveAction(item) {
@@ -96,7 +96,7 @@ function getActiveAction(item) {
 function PopupItemWithDrag(props) {
     const [isPanelShown, setPanelShown] = React.useState(false);
     const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));
-    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose, } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
+    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose, } = (0, InternalToolbarComponent_1.useToolbarWithOverflowDirectionContext)();
     React.useEffect(() => {
         const newActiveAction = getActiveAction(props.groupItem);
         // istanbul ignore else
@@ -148,7 +148,7 @@ function PopupItemWithDrag(props) {
     const handleClose = React.useCallback(() => {
         processPanelOpenClose(false);
     }, [processPanelOpenClose]);
-    const { hasOverflow } = (0, ToolbarWithOverflow_1.useToolItemEntryContext)();
+    const { hasOverflow } = (0, InternalToolbarComponent_1.useToolItemEntryContext)();
     const expandsToDirection = hasOverflow
         ? /* istanbul ignore next */ overflowExpandsTo
         : expandsTo;
@@ -169,7 +169,7 @@ function toToolbarPopupRelativePosition(expandsTo, alignment) {
     // istanbul ignore next
     switch (expandsTo) {
         case Direction_1.Direction.Bottom: {
-            if (alignment === ToolbarWithOverflow_1.ToolbarPanelAlignment.End)
+            if (alignment === InternalToolbarComponent_1.ToolbarPanelAlignment.End)
                 return appui_abstract_1.RelativePosition.BottomRight;
             return appui_abstract_1.RelativePosition.BottomLeft;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"PopupItemWithDrag.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.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 \"./PopupItem.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n  RelativePosition,\n  ToolbarItemUtilities,\n} from \"@itwin/appui-abstract\";\nimport { BadgeUtilities, IconHelper, useRefState } from \"@itwin/core-react\";\nimport type { ToolbarButtonItemProps } from \"./Item\";\nimport { PopupItemPopup, ToolbarPopupContext } from \"./PopupItem\";\nimport { PopupItemsPanel } from \"./PopupItemsPanel\";\nimport {\n  ToolbarPanelAlignment,\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./ToolbarWithOverflow\";\nimport { useDragInteraction } from \"./useDragInteraction\";\nimport { Direction } from \"./utilities/Direction\";\n\n/** Properties of [[PopupItem]] component.\n * @public\n */\nexport interface PopupItemWithDragProps extends ToolbarButtonItemProps {\n  /** Panel of the toolbar. */\n  groupItem: GroupButton;\n}\n\nfunction tryFindActiveAction(item: GroupButton): ActionButton | undefined {\n  for (const childItem of item.items) {\n    // istanbul ignore else\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      if (childItem.isActive) return childItem;\n    } else if (ToolbarItemUtilities.isGroupButton(childItem)) {\n      const nestedChild = tryFindActiveAction(childItem);\n      if (nestedChild) return nestedChild;\n    }\n  }\n  return undefined;\n}\n\nfunction getFirstAvailableChildActionItem(\n  item: GroupButton\n): ActionButton | undefined {\n  for (const childItem of item.items) {\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      return childItem;\n    } else {\n      // istanbul ignore else\n      if (ToolbarItemUtilities.isGroupButton(childItem)) {\n        const nestedChild = getFirstAvailableChildActionItem(childItem);\n        // istanbul ignore else\n        if (nestedChild) return nestedChild;\n      }\n    }\n  }\n  return undefined;\n}\n\nfunction getActiveAction(item: GroupButton): ActionButton | undefined {\n  const activeItem = tryFindActiveAction(item);\n  if (activeItem) return activeItem;\n\n  // initially look only in root items\n  for (const childItem of item.items) {\n    // istanbul ignore else\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      return childItem;\n    }\n  }\n\n  // if not found look inside groups\n  return getFirstAvailableChildActionItem(item);\n}\n\n/** Expandable Group button Item\n * @public\n */\nexport function PopupItemWithDrag(props: PopupItemWithDragProps) {\n  const [isPanelShown, setPanelShown] = React.useState(false);\n  const [activeAction, setActiveAction] = React.useState(\n    getActiveAction(props.groupItem)\n  );\n  const {\n    expandsTo,\n    overflowExpandsTo,\n    panelAlignment,\n    onPopupPanelOpenClose,\n  } = useToolbarWithOverflowDirectionContext();\n\n  React.useEffect(() => {\n    const newActiveAction = getActiveAction(props.groupItem);\n    // istanbul ignore else\n    if (newActiveAction) {\n      // istanbul ignore next\n      if (newActiveAction.isActive) {\n        setActiveAction(newActiveAction);\n      } else {\n        if (activeAction && activeAction.isActive) {\n          setActiveAction({ ...activeAction, isActive: false });\n        }\n      }\n    }\n  }, [props.groupItem, activeAction]);\n\n  const processPanelOpenClose = React.useCallback(\n    (isOpening: boolean) => {\n      setPanelShown((prev) => {\n        // istanbul ignore else\n        if (prev !== isOpening) onPopupPanelOpenClose(isOpening);\n        return isOpening;\n      });\n    },\n    [setPanelShown, onPopupPanelOpenClose]\n  );\n\n  // handle open and closing popup panel\n  const onOpenPanel = React.useCallback(() => {\n    processPanelOpenClose(!isPanelShown);\n  }, [isPanelShown, processPanelOpenClose]);\n\n  // handle open and closing popup panel\n  const onGroupButtonClick = React.useCallback(() => {\n    // only execute action if not disabled\n    activeAction &&\n      !ConditionalBooleanValue.getValue(activeAction.isDisabled) &&\n      activeAction.execute();\n  }, [activeAction]);\n\n  const badge = activeAction\n    ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType)\n    : props.badge;\n  const icon = activeAction\n    ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData)\n    : props.icon;\n  const title = activeAction\n    ? ConditionalStringValue.getValue(activeAction.label)\n    : props.title;\n  const isActive = activeAction ? activeAction.isActive : props.isActive;\n  const isDisabled = ConditionalBooleanValue.getValue(\n    activeAction ? activeAction.isDisabled : props.isDisabled\n  );\n\n  const { handlePointerDown, handleButtonClick } = useDragInteraction(\n    onGroupButtonClick,\n    onOpenPanel\n  );\n\n  const className = classnames(\n    \"components-toolbar-button-item\",\n    \"components-toolbar-expandable-button\",\n    isActive && \"components-active\",\n    isDisabled && \"components-disabled-drag\",\n    props.className\n  );\n\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\n  const handleClose = React.useCallback(() => {\n    processPanelOpenClose(false);\n  }, [processPanelOpenClose]);\n  const { hasOverflow } = useToolItemEntryContext();\n  const expandsToDirection = hasOverflow\n    ? /* istanbul ignore next */ overflowExpandsTo\n    : expandsTo;\n\n  return (\n    <ToolbarPopupContext.Provider\n      value={{\n        closePanel: /* istanbul ignore next */ () =>\n          processPanelOpenClose(false),\n        setSelectedItem: /* istanbul ignore next */ (\n          buttonItem: ActionButton\n        ) => setActiveAction(buttonItem),\n      }}\n    >\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        ref={targetRef}\n        onPointerDown={handlePointerDown}\n        onClick={handleButtonClick}\n        onKeyDown={props.onKeyDown}\n        className={className}\n        style={props.style}\n        title={title}\n      >\n        <div className=\"components-icon\">{icon}</div>\n        {props.badge && <div className=\"components-badge\">{badge}</div>}\n        <div className=\"components-triangle\" />\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(\n          expandsToDirection,\n          panelAlignment\n        )}\n        target={target}\n      >\n        <PopupItemsPanel\n          groupItem={props.groupItem}\n          activateOnPointerUp={true}\n        />\n      </PopupItemPopup>\n    </ToolbarPopupContext.Provider>\n  );\n}\n\n/** @internal */\nexport function toToolbarPopupRelativePosition(\n  expandsTo: Direction,\n  alignment: ToolbarPanelAlignment\n): RelativePosition {\n  // istanbul ignore next\n  switch (expandsTo) {\n    case Direction.Bottom: {\n      if (alignment === ToolbarPanelAlignment.End)\n        return RelativePosition.BottomRight;\n      return RelativePosition.BottomLeft;\n    }\n    case Direction.Left:\n      return RelativePosition.LeftTop;\n    case Direction.Right:\n      return RelativePosition.RightTop;\n    case Direction.Top:\n      return RelativePosition.Top;\n  }\n}\n"]}
+{"version":3,"file":"PopupItemWithDrag.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.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 \"./PopupItem.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n  RelativePosition,\n  ToolbarItemUtilities,\n} from \"@itwin/appui-abstract\";\nimport { BadgeUtilities, IconHelper, useRefState } from \"@itwin/core-react\";\nimport type { ToolbarButtonItemProps } from \"./Item\";\nimport { PopupItemPopup, ToolbarPopupContext } from \"./PopupItem\";\nimport { PopupItemsPanel } from \"./PopupItemsPanel\";\nimport {\n  ToolbarPanelAlignment,\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./InternalToolbarComponent\";\nimport { useDragInteraction } from \"./useDragInteraction\";\nimport { Direction } from \"./utilities/Direction\";\n\n/** Properties of [[PopupItem]] component.\n * @public\n */\nexport interface PopupItemWithDragProps extends ToolbarButtonItemProps {\n  /** Panel of the toolbar. */\n  groupItem: GroupButton;\n}\n\nfunction tryFindActiveAction(item: GroupButton): ActionButton | undefined {\n  for (const childItem of item.items) {\n    // istanbul ignore else\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      if (childItem.isActive) return childItem;\n    } else if (ToolbarItemUtilities.isGroupButton(childItem)) {\n      const nestedChild = tryFindActiveAction(childItem);\n      if (nestedChild) return nestedChild;\n    }\n  }\n  return undefined;\n}\n\nfunction getFirstAvailableChildActionItem(\n  item: GroupButton\n): ActionButton | undefined {\n  for (const childItem of item.items) {\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      return childItem;\n    } else {\n      // istanbul ignore else\n      if (ToolbarItemUtilities.isGroupButton(childItem)) {\n        const nestedChild = getFirstAvailableChildActionItem(childItem);\n        // istanbul ignore else\n        if (nestedChild) return nestedChild;\n      }\n    }\n  }\n  return undefined;\n}\n\nfunction getActiveAction(item: GroupButton): ActionButton | undefined {\n  const activeItem = tryFindActiveAction(item);\n  if (activeItem) return activeItem;\n\n  // initially look only in root items\n  for (const childItem of item.items) {\n    // istanbul ignore else\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      return childItem;\n    }\n  }\n\n  // if not found look inside groups\n  return getFirstAvailableChildActionItem(item);\n}\n\n/** Expandable Group button Item\n * @public\n */\nexport function PopupItemWithDrag(props: PopupItemWithDragProps) {\n  const [isPanelShown, setPanelShown] = React.useState(false);\n  const [activeAction, setActiveAction] = React.useState(\n    getActiveAction(props.groupItem)\n  );\n  const {\n    expandsTo,\n    overflowExpandsTo,\n    panelAlignment,\n    onPopupPanelOpenClose,\n  } = useToolbarWithOverflowDirectionContext();\n\n  React.useEffect(() => {\n    const newActiveAction = getActiveAction(props.groupItem);\n    // istanbul ignore else\n    if (newActiveAction) {\n      // istanbul ignore next\n      if (newActiveAction.isActive) {\n        setActiveAction(newActiveAction);\n      } else {\n        if (activeAction && activeAction.isActive) {\n          setActiveAction({ ...activeAction, isActive: false });\n        }\n      }\n    }\n  }, [props.groupItem, activeAction]);\n\n  const processPanelOpenClose = React.useCallback(\n    (isOpening: boolean) => {\n      setPanelShown((prev) => {\n        // istanbul ignore else\n        if (prev !== isOpening) onPopupPanelOpenClose(isOpening);\n        return isOpening;\n      });\n    },\n    [setPanelShown, onPopupPanelOpenClose]\n  );\n\n  // handle open and closing popup panel\n  const onOpenPanel = React.useCallback(() => {\n    processPanelOpenClose(!isPanelShown);\n  }, [isPanelShown, processPanelOpenClose]);\n\n  // handle open and closing popup panel\n  const onGroupButtonClick = React.useCallback(() => {\n    // only execute action if not disabled\n    activeAction &&\n      !ConditionalBooleanValue.getValue(activeAction.isDisabled) &&\n      activeAction.execute();\n  }, [activeAction]);\n\n  const badge = activeAction\n    ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType)\n    : props.badge;\n  const icon = activeAction\n    ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData)\n    : props.icon;\n  const title = activeAction\n    ? ConditionalStringValue.getValue(activeAction.label)\n    : props.title;\n  const isActive = activeAction ? activeAction.isActive : props.isActive;\n  const isDisabled = ConditionalBooleanValue.getValue(\n    activeAction ? activeAction.isDisabled : props.isDisabled\n  );\n\n  const { handlePointerDown, handleButtonClick } = useDragInteraction(\n    onGroupButtonClick,\n    onOpenPanel\n  );\n\n  const className = classnames(\n    \"components-toolbar-button-item\",\n    \"components-toolbar-expandable-button\",\n    isActive && \"components-active\",\n    isDisabled && \"components-disabled-drag\",\n    props.className\n  );\n\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\n  const handleClose = React.useCallback(() => {\n    processPanelOpenClose(false);\n  }, [processPanelOpenClose]);\n  const { hasOverflow } = useToolItemEntryContext();\n  const expandsToDirection = hasOverflow\n    ? /* istanbul ignore next */ overflowExpandsTo\n    : expandsTo;\n\n  return (\n    <ToolbarPopupContext.Provider\n      value={{\n        closePanel: /* istanbul ignore next */ () =>\n          processPanelOpenClose(false),\n        setSelectedItem: /* istanbul ignore next */ (\n          buttonItem: ActionButton\n        ) => setActiveAction(buttonItem),\n      }}\n    >\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        ref={targetRef}\n        onPointerDown={handlePointerDown}\n        onClick={handleButtonClick}\n        onKeyDown={props.onKeyDown}\n        className={className}\n        style={props.style}\n        title={title}\n      >\n        <div className=\"components-icon\">{icon}</div>\n        {props.badge && <div className=\"components-badge\">{badge}</div>}\n        <div className=\"components-triangle\" />\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(\n          expandsToDirection,\n          panelAlignment\n        )}\n        target={target}\n      >\n        <PopupItemsPanel\n          groupItem={props.groupItem}\n          activateOnPointerUp={true}\n        />\n      </PopupItemPopup>\n    </ToolbarPopupContext.Provider>\n  );\n}\n\n/** @internal */\nexport function toToolbarPopupRelativePosition(\n  expandsTo: Direction,\n  alignment: ToolbarPanelAlignment\n): RelativePosition {\n  // istanbul ignore next\n  switch (expandsTo) {\n    case Direction.Bottom: {\n      if (alignment === ToolbarPanelAlignment.End)\n        return RelativePosition.BottomRight;\n      return RelativePosition.BottomLeft;\n    }\n    case Direction.Left:\n      return RelativePosition.LeftTop;\n    case Direction.Right:\n      return RelativePosition.RightTop;\n    case Direction.Top:\n      return RelativePosition.Top;\n  }\n}\n"]}

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

@@ -46,7 +46,7 @@ const Title_1 = require("./groupPanel/Title");
 const Expander_1 = require("./groupPanel/tool/Expander");
 const Tool_1 = require("./groupPanel/tool/Tool");
 const PopupItem_1 = require("./PopupItem");
-const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+const InternalToolbarComponent_1 = require("./InternalToolbarComponent");
 function getNumItemsInColumn(numTotalItems) {
     if (numTotalItems <= 6)
         return numTotalItems;
@@ -92,7 +92,7 @@ function PopupItemsPanel(props) {
         }
     }, [groupArray]);
     const { closePanel, setSelectedItem } = (0, PopupItem_1.useToolbarPopupContext)();
-    const { onItemExecuted, onKeyDown } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
+    const { onItemExecuted, onKeyDown } = (0, InternalToolbarComponent_1.useToolbarWithOverflowDirectionContext)();
     const handleOnPointerUp = React.useCallback(
     /* istanbul ignore next */ (panelItem) => {
         // istanbul ignore else

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

@@ -1 +1 @@
-{"version":3,"file":"PopupItemsPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemsPanel.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 classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n  ToolbarItemUtilities,\n} from \"@itwin/appui-abstract\";\nimport { BadgeUtilities, IconHelper } from \"@itwin/core-react\";\nimport { BackArrow } from \"./groupPanel/BackArrow\";\nimport { GroupColumn } from \"./groupPanel/Column\";\nimport { Columns } from \"./groupPanel/Columns\";\nimport { Panel } from \"./groupPanel/Panel\";\nimport { Title } from \"./groupPanel/Title\";\nimport { GroupToolExpander } from \"./groupPanel/tool/Expander\";\nimport { GroupTool } from \"./groupPanel/tool/Tool\";\nimport { useToolbarPopupContext } from \"./PopupItem\";\nimport { useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\n\nfunction getNumItemsInColumn(numTotalItems: number): number {\n  if (numTotalItems <= 6) return numTotalItems;\n  if (numTotalItems <= 24) return Math.ceil(numTotalItems / 2);\n  if (numTotalItems <= 36) return Math.ceil(numTotalItems / 3);\n  return Math.ceil(numTotalItems / 4);\n}\n\ninterface PopupItemsPanelProps {\n  groupItem: GroupButton;\n  activateOnPointerUp?: boolean;\n}\n\n/** Component that displays a list of tools in a panel.\n * @internal future\n */\nexport function PopupItemsPanel(props: PopupItemsPanelProps) {\n  const [groupArray, setGroupArray] = React.useState([props.groupItem]);\n  const activeGroup = React.useMemo(() => groupArray[0], [groupArray]);\n  const items = React.useMemo(() => activeGroup.items, [activeGroup]);\n\n  const preferredNumItemsInColumn = getNumItemsInColumn(items.length);\n\n  // Divide items equally between columns.\n  const numberOfColumns = Math.ceil(items.length / preferredNumItemsInColumn);\n  const numItemsPerColumn = Math.ceil(items.length / numberOfColumns);\n\n  const columnToItems = React.useMemo(\n    () =>\n      items.reduce<ReadonlyArray<ReadonlyArray<GroupButton | ActionButton>>>(\n        (acc, item, index) => {\n          const columnIndex = Math.floor(index / numItemsPerColumn);\n          if (columnIndex >= acc.length) {\n            return [...acc, [item]];\n          }\n          return [\n            ...acc.slice(0, columnIndex),\n            [...acc[columnIndex], item],\n            ...acc.slice(columnIndex + 1),\n          ];\n        },\n        []\n      ),\n    [items, numItemsPerColumn]\n  );\n\n  const handleGroupItemClick = React.useCallback(\n    (item: GroupButton | ActionButton) => {\n      // istanbul ignore else\n      if (ToolbarItemUtilities.isGroupButton(item)) {\n        // push group to front of array\n        setGroupArray([item, ...groupArray]);\n      }\n    },\n    [groupArray]\n  );\n\n  const handleBackArrowClick = React.useCallback(() => {\n    // istanbul ignore else\n    if (groupArray.length > 1) {\n      setGroupArray(groupArray.slice(1));\n    }\n  }, [groupArray]);\n\n  const { closePanel, setSelectedItem } = useToolbarPopupContext();\n  const { onItemExecuted, onKeyDown } =\n    useToolbarWithOverflowDirectionContext();\n\n  const handleOnPointerUp = React.useCallback(\n    /* istanbul ignore next */ (panelItem: GroupButton | ActionButton) => {\n      // istanbul ignore else\n      if (ToolbarItemUtilities.isActionButton(panelItem)) {\n        props.activateOnPointerUp &&\n          setSelectedItem &&\n          setSelectedItem(panelItem);\n        props.activateOnPointerUp && panelItem.execute();\n        onItemExecuted(panelItem);\n        props.activateOnPointerUp && closePanel();\n      }\n    },\n    [props.activateOnPointerUp, setSelectedItem, closePanel, onItemExecuted]\n  );\n\n  const handleActionItemClick = React.useCallback(\n    (panelItem: GroupButton | ActionButton) => {\n      // istanbul ignore else\n      if (ToolbarItemUtilities.isActionButton(panelItem)) {\n        setSelectedItem && setSelectedItem(panelItem);\n        panelItem.execute();\n        onItemExecuted(panelItem);\n        closePanel();\n      }\n    },\n    [setSelectedItem, closePanel, onItemExecuted]\n  );\n\n  // istanbul ignore next - NEEDSWORK add complete tests\n  const handleOnKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      onKeyDown(e);\n    },\n    [onKeyDown]\n  );\n\n  // build n-number of columns\n  const columns = React.useMemo(\n    () =>\n      columnToItems.map((columnItems, columnIndex) => (\n        <GroupColumn key={columnIndex}>\n          {columnItems.map((panelItem) => {\n            const badge = BadgeUtilities.getComponentForBadgeType(\n              panelItem.badgeType\n            );\n            const icon = IconHelper.getIconReactNode(\n              panelItem.icon,\n              panelItem.internalData\n            );\n            const label = ConditionalStringValue.getValue(panelItem.label);\n            if (ToolbarItemUtilities.isGroupButton(panelItem)) {\n              return (\n                <GroupToolExpander\n                  isDisabled={ConditionalBooleanValue.getValue(\n                    panelItem.isDisabled\n                  )}\n                  key={panelItem.id}\n                  label={label}\n                  icon={icon}\n                  badge={badge}\n                  item={panelItem}\n                  onClick={handleGroupItemClick}\n                />\n              );\n            }\n\n            return (\n              <GroupTool\n                isDisabled={ConditionalBooleanValue.getValue(\n                  panelItem.isDisabled\n                )}\n                isActive={!!panelItem.isActive}\n                key={panelItem.id}\n                label={label}\n                icon={icon}\n                item={panelItem}\n                onClick={handleActionItemClick}\n                onPointerUp={handleOnPointerUp}\n                badge={badge}\n              />\n            );\n          })}\n        </GroupColumn>\n      )),\n    [\n      columnToItems,\n      handleActionItemClick,\n      handleGroupItemClick,\n      handleOnPointerUp,\n    ]\n  );\n\n  // ensure we have a panel title for nested groups\n  const titleString = activeGroup.panelLabel\n    ? activeGroup.panelLabel\n    : activeGroup.label;\n  const panelTitle = React.useMemo(\n    () => ConditionalStringValue.getValue(titleString),\n    [titleString]\n  );\n  const className = classnames(\n    1 === groupArray.length && \"components-toolbar-item-expandable-group-group\",\n    groupArray.length > 1 && \"components-toolbar-item-expandable-group-nested\"\n  );\n\n  return (\n    <Panel className={className} onKeyDown={handleOnKeyDown}>\n      {groupArray.length > 1 && (\n        <BackArrow className=\"components-back\" onClick={handleBackArrowClick} />\n      )}\n      {panelTitle && <Title>{panelTitle}</Title>}\n      {columns && <Columns>{columns}</Columns>}\n    </Panel>\n  );\n}\n"]}
+{"version":3,"file":"PopupItemsPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemsPanel.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 classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n  ToolbarItemUtilities,\n} from \"@itwin/appui-abstract\";\nimport { BadgeUtilities, IconHelper } from \"@itwin/core-react\";\nimport { BackArrow } from \"./groupPanel/BackArrow\";\nimport { GroupColumn } from \"./groupPanel/Column\";\nimport { Columns } from \"./groupPanel/Columns\";\nimport { Panel } from \"./groupPanel/Panel\";\nimport { Title } from \"./groupPanel/Title\";\nimport { GroupToolExpander } from \"./groupPanel/tool/Expander\";\nimport { GroupTool } from \"./groupPanel/tool/Tool\";\nimport { useToolbarPopupContext } from \"./PopupItem\";\nimport { useToolbarWithOverflowDirectionContext } from \"./InternalToolbarComponent\";\n\nfunction getNumItemsInColumn(numTotalItems: number): number {\n  if (numTotalItems <= 6) return numTotalItems;\n  if (numTotalItems <= 24) return Math.ceil(numTotalItems / 2);\n  if (numTotalItems <= 36) return Math.ceil(numTotalItems / 3);\n  return Math.ceil(numTotalItems / 4);\n}\n\ninterface PopupItemsPanelProps {\n  groupItem: GroupButton;\n  activateOnPointerUp?: boolean;\n}\n\n/** Component that displays a list of tools in a panel.\n * @internal future\n */\nexport function PopupItemsPanel(props: PopupItemsPanelProps) {\n  const [groupArray, setGroupArray] = React.useState([props.groupItem]);\n  const activeGroup = React.useMemo(() => groupArray[0], [groupArray]);\n  const items = React.useMemo(() => activeGroup.items, [activeGroup]);\n\n  const preferredNumItemsInColumn = getNumItemsInColumn(items.length);\n\n  // Divide items equally between columns.\n  const numberOfColumns = Math.ceil(items.length / preferredNumItemsInColumn);\n  const numItemsPerColumn = Math.ceil(items.length / numberOfColumns);\n\n  const columnToItems = React.useMemo(\n    () =>\n      items.reduce<ReadonlyArray<ReadonlyArray<GroupButton | ActionButton>>>(\n        (acc, item, index) => {\n          const columnIndex = Math.floor(index / numItemsPerColumn);\n          if (columnIndex >= acc.length) {\n            return [...acc, [item]];\n          }\n          return [\n            ...acc.slice(0, columnIndex),\n            [...acc[columnIndex], item],\n            ...acc.slice(columnIndex + 1),\n          ];\n        },\n        []\n      ),\n    [items, numItemsPerColumn]\n  );\n\n  const handleGroupItemClick = React.useCallback(\n    (item: GroupButton | ActionButton) => {\n      // istanbul ignore else\n      if (ToolbarItemUtilities.isGroupButton(item)) {\n        // push group to front of array\n        setGroupArray([item, ...groupArray]);\n      }\n    },\n    [groupArray]\n  );\n\n  const handleBackArrowClick = React.useCallback(() => {\n    // istanbul ignore else\n    if (groupArray.length > 1) {\n      setGroupArray(groupArray.slice(1));\n    }\n  }, [groupArray]);\n\n  const { closePanel, setSelectedItem } = useToolbarPopupContext();\n  const { onItemExecuted, onKeyDown } =\n    useToolbarWithOverflowDirectionContext();\n\n  const handleOnPointerUp = React.useCallback(\n    /* istanbul ignore next */ (panelItem: GroupButton | ActionButton) => {\n      // istanbul ignore else\n      if (ToolbarItemUtilities.isActionButton(panelItem)) {\n        props.activateOnPointerUp &&\n          setSelectedItem &&\n          setSelectedItem(panelItem);\n        props.activateOnPointerUp && panelItem.execute();\n        onItemExecuted(panelItem);\n        props.activateOnPointerUp && closePanel();\n      }\n    },\n    [props.activateOnPointerUp, setSelectedItem, closePanel, onItemExecuted]\n  );\n\n  const handleActionItemClick = React.useCallback(\n    (panelItem: GroupButton | ActionButton) => {\n      // istanbul ignore else\n      if (ToolbarItemUtilities.isActionButton(panelItem)) {\n        setSelectedItem && setSelectedItem(panelItem);\n        panelItem.execute();\n        onItemExecuted(panelItem);\n        closePanel();\n      }\n    },\n    [setSelectedItem, closePanel, onItemExecuted]\n  );\n\n  // istanbul ignore next - NEEDSWORK add complete tests\n  const handleOnKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      onKeyDown(e);\n    },\n    [onKeyDown]\n  );\n\n  // build n-number of columns\n  const columns = React.useMemo(\n    () =>\n      columnToItems.map((columnItems, columnIndex) => (\n        <GroupColumn key={columnIndex}>\n          {columnItems.map((panelItem) => {\n            const badge = BadgeUtilities.getComponentForBadgeType(\n              panelItem.badgeType\n            );\n            const icon = IconHelper.getIconReactNode(\n              panelItem.icon,\n              panelItem.internalData\n            );\n            const label = ConditionalStringValue.getValue(panelItem.label);\n            if (ToolbarItemUtilities.isGroupButton(panelItem)) {\n              return (\n                <GroupToolExpander\n                  isDisabled={ConditionalBooleanValue.getValue(\n                    panelItem.isDisabled\n                  )}\n                  key={panelItem.id}\n                  label={label}\n                  icon={icon}\n                  badge={badge}\n                  item={panelItem}\n                  onClick={handleGroupItemClick}\n                />\n              );\n            }\n\n            return (\n              <GroupTool\n                isDisabled={ConditionalBooleanValue.getValue(\n                  panelItem.isDisabled\n                )}\n                isActive={!!panelItem.isActive}\n                key={panelItem.id}\n                label={label}\n                icon={icon}\n                item={panelItem}\n                onClick={handleActionItemClick}\n                onPointerUp={handleOnPointerUp}\n                badge={badge}\n              />\n            );\n          })}\n        </GroupColumn>\n      )),\n    [\n      columnToItems,\n      handleActionItemClick,\n      handleGroupItemClick,\n      handleOnPointerUp,\n    ]\n  );\n\n  // ensure we have a panel title for nested groups\n  const titleString = activeGroup.panelLabel\n    ? activeGroup.panelLabel\n    : activeGroup.label;\n  const panelTitle = React.useMemo(\n    () => ConditionalStringValue.getValue(titleString),\n    [titleString]\n  );\n  const className = classnames(\n    1 === groupArray.length && \"components-toolbar-item-expandable-group-group\",\n    groupArray.length > 1 && \"components-toolbar-item-expandable-group-nested\"\n  );\n\n  return (\n    <Panel className={className} onKeyDown={handleOnKeyDown}>\n      {groupArray.length > 1 && (\n        <BackArrow className=\"components-back\" onClick={handleBackArrowClick} />\n      )}\n      {panelTitle && <Title>{panelTitle}</Title>}\n      {columns && <Columns>{columns}</Columns>}\n    </Panel>\n  );\n}\n"]}

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

@@ -5,14 +5,14 @@ import "./Toolbar.scss";
 import * as React from "react";
 import type { CommonToolbarItem, OnItemExecutedFunc } from "@itwin/appui-abstract";
 import type { CommonProps, NoChildrenProps } from "@itwin/core-react";
-import { Direction } from "./utilities/Direction";
-import { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./ToolbarWithOverflow";
+import type { Direction } from "./utilities/Direction";
+import type { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./InternalToolbarComponent";
 /** Properties of [[Toolbar]] component.
  * @public
  * @deprecated in 4.0. Use [ToolbarProps]($appui-react) instead.
  */
 export interface ToolbarProps extends CommonProps, NoChildrenProps {
-    /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
+    /** Describes to which direction the popup panels are expanded, also defines the orientation of the toolbar (Top/Bottom will create an horizontal toolbar, Left/Right will create a vertical toolbar). Defaults to: [[Direction.Bottom]] */
     expandsTo?: Direction;
     /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */
     items: CommonToolbarItem[];

package/lib/cjs/components-react/toolbar/Toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEtE,OAAO,EACL,SAAS,EAGV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAIL,qBAAqB,EACrB,qBAAqB,EAEtB,MAAM,uBAAuB,CAAC;AAE/B;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE,oGAAoG;IACpG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uGAAuG;IACvG,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,sDAAsD;IACtD,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAWD;;;GAGG;AAEH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAqG1C"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAGpC;;;GAGG;AAEH,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE,2OAA2O;IAC3O,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uGAAuG;IACvG,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,sDAAsD;IACtD,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAED;;;GAGG;AAEH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAE1C"}