npm - @itwin/components-react - Versions diffs - 4.3.0 → 4.4.0 - Mend

@itwin/components-react 4.3.0 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupItem.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItem.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA0B;AAC1B,4DAAoC;AACpC,6CAA+B;AAE/B,kDAAuD;AAEvD~~,+DAI+B~~;~~AAC/B~~,2DAAqE;AAQrE;;;GAGG;AACU,QAAA,mBAAmB,GAC9B,KAAK,CAAC,aAAa,CAA2B;IAC5C,yCAAyC;IACzC,UAAU,EAAE,0BAA0B,CAAC,GAAG,EAAE,GAAE,CAAC;IAC/C,yGAAyG;IACzG,eAAe,EAAE,0BAA0B,CAAC,CAC1C,WAAyB,EACzB,EAAE,GAAE,CAAC;CACR,CAAC,CAAC;AAEL;;;GAGG;AACH,SAAgB,sBAAsB;IACpC,OAAO,KAAK,CAAC,UAAU,CAAC,2BAAmB,CAAC,CAAC;AAC/C,CAAC;AAFD,wDAEC;AAeD;;GAEG;AACH,SAAgB,SAAS,CAAC,KAAqB;IAC7C,MAAM,CAAC,YAAY,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,EACJ,SAAS,EACT,iBAAiB,EACjB,cAAc,EACd,qBAAqB,GACtB,GAAG,IAAA,~~4DAAsC~~,GAAE,CAAC;IAC7C,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAC7C,CAAC,SAAkB,EAAE,EAAE;QACrB,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,uBAAuB;YACvB,IAAI,IAAI,KAAK,SAAS;gBAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;YACzD,OAAO,SAAS,CAAC;QACnB,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,aAAa,EAAE,qBAAqB,CAAC,CACvC,CAAC;IAEF,yCAAyC;IACzC,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,qBAAqB,CAAC,CAAC,YAAY,CAAC,CAAC;QACrC,uBAAuB;QACvB,IAAI,KAAK,CAAC,OAAO;YAAE,KAAK,CAAC,OAAO,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,qBAAqB,CAAC,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,gCAAgC,EAChC,sCAAsC,EACtC,KAAK,CAAC,UAAU,IAAI,qBAAqB,EACzC,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,IAAA,wBAAW,GAAqB,CAAC;IAC7D,uBAAuB;IACvB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC5B,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,~~6CAAuB~~,GAAE,CAAC;IAClD,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACvC,OAAO,CACL,oBAAC,2BAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE;YACL,UAAU,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC;SAC/C;QAED,gDACgB,KAAK,CAAC,MAAM,oBACX,mBAAmB,8BACR,KAAK,CAAC,aAAa,wBACzB,KAAK,CAAC,YAAY,2BACf,KAAK,CAAC,UAAU,EACvC,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,KAAK,CAAC,UAAU,EAC1B,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK;YAElB,6BAAK,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAC,IAAI,CAAO;YAClD,KAAK,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,KAAK,CAAO;YACpE,aAAa,CAAC,CAAC,CAAC,0BAA0B,CAAC,SAAS,CAAC,CAAC,CAAC,CACtD,6BAAK,SAAS,EAAC,qBAAqB,GAAG,CACxC,CACM;QACT,oBAAC,cAAc,IACb,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,IAAA,kDAA8B,EACtC,kBAAkB,EAClB,cAAc,CACf,EACD,MAAM,EAAE,MAAM,EACd,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,IAE7C,KAAK,CACS,CACY,CAChC,CAAC;AACJ,CAAC;AAjFD,8BAiFC;AAYD,gBAAgB;AAChB,SAAgB,cAAc,CAAC,KAA0B;IACvD,MAAM,QAAQ,GAAG,IAAA,~~oDAA8B~~,GAAE,CAAC;IAClD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,6CAA6C,EAC7C,QAAQ,IAAI,WAAW,CACxB,CAAC;IAEF,OAAO,CACL,oBAAC,kBAAK,IAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,KAAM,KAAK,GAAI,CACzE,CAAC;AACJ,CAAC;AAVD,wCAUC","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"]}
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 \"./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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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 \"./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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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 \"./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 CHANGED Viewed

@@ -5,8 +5,8 @@ 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.

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

	@@ -1 +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~~"}
1	+ {"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,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;AAED;;;GAGG;AAEH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAE1C"}