@itwin/components-react 4.0.0-dev.2 → 4.0.0-dev.20

package/lib/cjs/components-react/propertygrid/internal/flat-properties/FlatNonPrimitivePropertyRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlatNonPrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/propertygrid/internal/flat-properties/FlatNonPrimitivePropertyRenderer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F;;GAEG;AACH,2EAAyE;AAEzE,6CAA+B;AAC/B,0DAA4D;AAC5D,iGAA8F;AAE9F,6HAA0H;AAC1H,6EAA0E;AAU1E;;GAEG;AACH,MAAa,gCAAiC,SAAQ,KAAK,CAAC,SAAgD;IAC1G,YAAY,KAA4C;QACtD,KAAK,CAAC,KAAK,CAAC,CAAC;QAGP,gBAAW,GAAG,GAAG,EAAE;YACzB,0BAA0B;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;gBACxB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;QACjC,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,0BAA0B;YAC1B,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU;gBACvB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;QACjC,CAAC,CAAC;IAZF,CAAC;IAcO,QAAQ,CAAC,KAA4C;QAC3D,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;QAC3E,MAAM,MAAM,GAAG,+CAAsB,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,CAAC;QAE9H,IAAI,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,YAAY,CAAC;QAC9D,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,KAAK,oCAAmB,CAAC,KAAK;YACtE,YAAY,GAAG,GAAG,YAAY,KAAK,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;QAEhF,OAAO,CACL,oBAAC,qEAAiC,IAChC,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,UAAU,EAAE,IAAI,CAAC,YAAY,EAC7B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,KAAK,IAEjB,YAAY,CACqB,CACrC,CAAC;IACJ,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,6DAA6D;QAC7D,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7C,OAAO,CACL,oBAAC,2BAAY,IACX,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KACnC,KAAK,GACT,CACH,CAAC;IACJ,CAAC;CACF;AAjDD,4EAiDC","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 PropertyGrid\n */\nimport \"../../../properties/renderers/NonPrimitivePropertyRenderer.scss\";\nimport _ from \"lodash\";\nimport * as React from \"react\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { CommonPropertyRenderer } from \"../../../properties/renderers/CommonPropertyRenderer\";\nimport { PrimitiveRendererProps } from \"../../../properties/renderers/PrimitivePropertyRenderer\";\nimport { NonPrimitivePropertyLabelRenderer } from \"../../../properties/renderers/label/NonPrimitivePropertyLabelRenderer\";\nimport { PropertyView } from \"../../../properties/renderers/PropertyView\";\n\n/** Properties of [[FlatNonPrimitivePropertyRenderer]] React component\n * @internal\n */\nexport interface FlatNonPrimitivePropertyRendererProps extends PrimitiveRendererProps {\n  isExpanded: boolean;\n  onExpandToggled: () => void;\n}\n\n/** React Component that renders flat struct and array properties\n * @internal\n */\nexport class FlatNonPrimitivePropertyRenderer extends React.Component<FlatNonPrimitivePropertyRendererProps> {\n  constructor(props: FlatNonPrimitivePropertyRendererProps) {\n    super(props);\n  }\n\n  private _onExpanded = () => {\n    /* istanbul ignore else */\n    if (!this.props.isExpanded)\n      this.props.onExpandToggled();\n  };\n\n  private _onCollapsed = () => {\n    /* istanbul ignore else */\n    if (this.props.isExpanded)\n      this.props.onExpandToggled();\n  };\n\n  private getLabel(props: FlatNonPrimitivePropertyRendererProps): React.ReactNode {\n    const { orientation, indentation, width, columnRatio, columnInfo } = props;\n    const offset = CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, columnInfo?.minLabelWidth);\n\n    let displayLabel = props.propertyRecord.property.displayLabel;\n    if (props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)\n      displayLabel = `${displayLabel} (${props.propertyRecord.value.items.length})`;\n\n    return (\n      <NonPrimitivePropertyLabelRenderer\n        isExpanded={props.isExpanded}\n        onExpand={this._onExpanded}\n        onCollapse={this._onCollapsed}\n        offset={offset}\n        renderColon={false}\n      >\n        {displayLabel}\n      </NonPrimitivePropertyLabelRenderer>\n    );\n  }\n\n  /** @internal */\n  public override render() {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { indentation, ...props } = this.props;\n    return (\n      <PropertyView\n        labelElement={this.getLabel(this.props)}\n        {...props}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"file":"FlatNonPrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/propertygrid/internal/flat-properties/FlatNonPrimitivePropertyRenderer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F;;GAEG;AACH,2EAAyE;AACzE,6CAA+B;AAC/B,0DAA4D;AAC5D,iGAA8F;AAE9F,6HAA0H;AAC1H,6EAA0E;AAU1E;;GAEG;AACH,MAAa,gCAAiC,SAAQ,KAAK,CAAC,SAAgD;IAC1G,YAAY,KAA4C;QACtD,KAAK,CAAC,KAAK,CAAC,CAAC;QAGP,gBAAW,GAAG,GAAG,EAAE;YACzB,0BAA0B;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;gBACxB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;QACjC,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,0BAA0B;YAC1B,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU;gBACvB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;QACjC,CAAC,CAAC;IAZF,CAAC;IAcO,QAAQ,CAAC,KAA4C;QAC3D,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;QAC3E,MAAM,MAAM,GAAG,+CAAsB,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;QAE9H,IAAI,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,YAAY,CAAC;QAC9D,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,KAAK,oCAAmB,CAAC,KAAK;YACtE,YAAY,GAAG,GAAG,YAAY,KAAK,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;QAEhF,OAAO,CACL,oBAAC,qEAAiC,IAChC,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,UAAU,EAAE,IAAI,CAAC,YAAY,EAC7B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,KAAK,IAEjB,YAAY,CACqB,CACrC,CAAC;IACJ,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,6DAA6D;QAC7D,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7C,OAAO,CACL,oBAAC,2BAAY,IACX,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KACnC,KAAK,GACT,CACH,CAAC;IACJ,CAAC;CACF;AAjDD,4EAiDC","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 PropertyGrid\n */\nimport \"../../../properties/renderers/NonPrimitivePropertyRenderer.scss\";\nimport * as React from \"react\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { CommonPropertyRenderer } from \"../../../properties/renderers/CommonPropertyRenderer\";\nimport { PrimitiveRendererProps } from \"../../../properties/renderers/PrimitivePropertyRenderer\";\nimport { NonPrimitivePropertyLabelRenderer } from \"../../../properties/renderers/label/NonPrimitivePropertyLabelRenderer\";\nimport { PropertyView } from \"../../../properties/renderers/PropertyView\";\n\n/** Properties of [[FlatNonPrimitivePropertyRenderer]] React component\n * @internal\n */\nexport interface FlatNonPrimitivePropertyRendererProps extends PrimitiveRendererProps {\n  isExpanded: boolean;\n  onExpandToggled: () => void;\n}\n\n/** React Component that renders flat struct and array properties\n * @internal\n */\nexport class FlatNonPrimitivePropertyRenderer extends React.Component<FlatNonPrimitivePropertyRendererProps> {\n  constructor(props: FlatNonPrimitivePropertyRendererProps) {\n    super(props);\n  }\n\n  private _onExpanded = () => {\n    /* istanbul ignore else */\n    if (!this.props.isExpanded)\n      this.props.onExpandToggled();\n  };\n\n  private _onCollapsed = () => {\n    /* istanbul ignore else */\n    if (this.props.isExpanded)\n      this.props.onExpandToggled();\n  };\n\n  private getLabel(props: FlatNonPrimitivePropertyRendererProps): React.ReactNode {\n    const { orientation, indentation, width, columnRatio, columnInfo } = props;\n    const offset = CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, columnInfo?.minLabelWidth);\n\n    let displayLabel = props.propertyRecord.property.displayLabel;\n    if (props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)\n      displayLabel = `${displayLabel} (${props.propertyRecord.value.items.length})`;\n\n    return (\n      <NonPrimitivePropertyLabelRenderer\n        isExpanded={props.isExpanded}\n        onExpand={this._onExpanded}\n        onCollapse={this._onCollapsed}\n        offset={offset}\n        renderColon={false}\n      >\n        {displayLabel}\n      </NonPrimitivePropertyLabelRenderer>\n    );\n  }\n\n  /** @internal */\n  public override render() {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { indentation, ...props } = this.props;\n    return (\n      <PropertyView\n        labelElement={this.getLabel(this.props)}\n        {...props}\n      />\n    );\n  }\n}\n"]}

package/lib/cjs/components-react/propertygrid/internal/flat-properties/FlatPropertyRenderer.d.ts

@@ -16,14 +16,11 @@ export interface FlatPropertyRendererProps extends SharedRendererProps {
     propertyValueRendererManager?: PropertyValueRendererManager;
     /** Multiplier of how much the property is indented to the right */
     indentation?: number;
-    /** Indicates property is being edited
-     * @beta */
+    /** Indicates property is being edited */
     isEditing?: boolean;
-    /** Called when property edit is committed.
-     * @beta */
+    /** Called when property edit is committed. */
     onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;
-    /** Called when property edit is cancelled.
-     * @beta */
+    /** Called when property edit is cancelled. */
     onEditCancel?: () => void;
     /** Whether property value is displayed in expanded state. */
     isExpanded: boolean;

package/lib/cjs/components-react/propertygrid/internal/flat-properties/FlatPropertyRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlatPropertyRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/propertygrid/internal/flat-properties/FlatPropertyRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AACxF,OAAO,EAAmB,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AACrF,OAAO,EAAE,4BAA4B,EAAE,MAAM,0CAA0C,CAAC;AACxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,mBAAmB;IACpE,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,4BAA4B;IAC5B,4BAA4B,CAAC,EAAE,4BAA4B,CAAC;IAC5D,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;eACW;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;eACW;IACX,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/E;eACW;IACX,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6DAA6D;IAC7D,UAAU,EAAE,OAAO,CAAC;IACpB,wFAAwF;IACxF,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,uCAAuC;IACvC,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,SAAS,CAAC,EAAE,0BAA0B,GAAG;QAAE,YAAY,EAAE,OAAO,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAE,CAAC;IAE1F,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAsDpE,CAAC"}
+{"version":3,"file":"FlatPropertyRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/propertygrid/internal/flat-properties/FlatPropertyRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AACxF,OAAO,EAAmB,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AACrF,OAAO,EAAE,4BAA4B,EAAE,MAAM,0CAA0C,CAAC;AACxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,mBAAmB;IACpE,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,4BAA4B;IAC5B,4BAA4B,CAAC,EAAE,4BAA4B,CAAC;IAC5D,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/E,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6DAA6D;IAC7D,UAAU,EAAE,OAAO,CAAC;IACpB,wFAAwF;IACxF,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,uCAAuC;IACvC,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,SAAS,CAAC,EAAE,0BAA0B,GAAG;QAAE,YAAY,EAAE,OAAO,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAE,CAAC;IAE1F,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAsDpE,CAAC"}

package/lib/cjs/components-react/propertygrid/internal/flat-properties/FlatPropertyRenderer.js

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -46,11 +50,11 @@ const FlatPropertyRenderer = (props) => {
     };
     switch (props.propertyRecord.value.valueFormat) {
         case appui_abstract_1.PropertyValueFormat.Primitive:
-            return (React.createElement(PrimitivePropertyRenderer_1.PrimitivePropertyRenderer, { highlight: (highlight === null || highlight === void 0 ? void 0 : highlight.applyOnLabel) ? highlight : undefined, ...primitiveRendererProps }));
+            return (React.createElement(PrimitivePropertyRenderer_1.PrimitivePropertyRenderer, { highlight: highlight?.applyOnLabel ? highlight : undefined, ...primitiveRendererProps }));
         case appui_abstract_1.PropertyValueFormat.Array:
             // If array is empty, render it as a primitive property
             if (props.propertyRecord.value.items.length === 0)
-                return (React.createElement(PrimitivePropertyRenderer_1.PrimitivePropertyRenderer, { highlight: (highlight === null || highlight === void 0 ? void 0 : highlight.applyOnLabel) ? highlight : undefined, ...primitiveRendererProps }));
+                return (React.createElement(PrimitivePropertyRenderer_1.PrimitivePropertyRenderer, { highlight: highlight?.applyOnLabel ? highlight : undefined, ...primitiveRendererProps }));
         // eslint-disable-next-line no-fallthrough
         case appui_abstract_1.PropertyValueFormat.Struct:
             return (React.createElement(FlatNonPrimitivePropertyRenderer_1.FlatNonPrimitivePropertyRenderer, { isExpanded: props.isExpanded, onExpandToggled: props.onExpansionToggled, ...primitiveRendererProps }));
@@ -58,16 +62,14 @@ const FlatPropertyRenderer = (props) => {
 };
 exports.FlatPropertyRenderer = FlatPropertyRenderer;
 const DisplayValue = (props) => {
-    var _a;
     useResetHeightOnEdit(props.isEditing, props.onHeightChanged);
     if (props.isEditing) {
         const _onEditCommit = (args) => {
-            var _a;
             /* istanbul ignore else */
             if (props.category)
-                (_a = props.onEditCommit) === null || _a === void 0 ? void 0 : _a.call(props, args, props.category);
+                props.onEditCommit?.(args, props.category);
         };
-        return (React.createElement(EditorContainer_1.EditorContainer, { propertyRecord: props.propertyRecord, onCommit: _onEditCommit, onCancel: (_a = props.onEditCancel) !== null && _a !== void 0 ? _a : ( /* istanbul ignore next */() => { }), setFocus: true }));
+        return (React.createElement(EditorContainer_1.EditorContainer, { propertyRecord: props.propertyRecord, onCommit: _onEditCommit, onCancel: props.onEditCancel ?? ( /* istanbul ignore next */() => { }), setFocus: true }));
     }
     return (React.createElement(React.Fragment, null, CommonPropertyRenderer_1.CommonPropertyRenderer.createNewDisplayValue(props.orientation, props.propertyRecord, props.indentation, props.propertyValueRendererManager, props.isExpanded, props.onExpansionToggled, props.onHeightChanged, props.highlight)));
 };
@@ -75,7 +77,7 @@ function useResetHeightOnEdit(isEditing, onHeightChanged) {
     const previousEditingStatusRef = React.useRef(isEditing);
     React.useEffect(() => {
         if (!previousEditingStatusRef.current && isEditing) {
-            onHeightChanged === null || onHeightChanged === void 0 ? void 0 : onHeightChanged(27);
+            onHeightChanged?.(27);
         }
         previousEditingStatusRef.current = isEditing;
     });

package/lib/cjs/components-react/propertygrid/internal/flat-properties/FlatPropertyRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlatPropertyRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/propertygrid/internal/flat-properties/FlatPropertyRenderer.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 PropertyGrid\n */\n\nimport * as React from \"react\";\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { Orientation } from \"@itwin/core-react\";\nimport { HighlightingComponentProps } from \"../../../common/HighlightingComponentProps\";\nimport { EditorContainer, PropertyUpdatedArgs } from \"../../../editors/EditorContainer\";\nimport { CommonPropertyRenderer } from \"../../../properties/renderers/CommonPropertyRenderer\";\nimport { PrimitivePropertyRenderer, PrimitiveRendererProps } from \"../../../properties/renderers/PrimitivePropertyRenderer\";\nimport { SharedRendererProps } from \"../../../properties/renderers/PropertyRenderer\";\nimport { PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\nimport { PropertyCategory } from \"../../PropertyDataProvider\";\nimport { FlatNonPrimitivePropertyRenderer } from \"./FlatNonPrimitivePropertyRenderer\";\n\n/** Properties of [[FlatPropertyRenderer]] React component\n * @internal\n */\nexport interface FlatPropertyRendererProps extends SharedRendererProps {\n  category?: PropertyCategory;\n  /** Custom value renderer */\n  propertyValueRendererManager?: PropertyValueRendererManager;\n  /** Multiplier of how much the property is indented to the right */\n  indentation?: number;\n  /** Indicates property is being edited\n   * @beta */\n  isEditing?: boolean;\n  /** Called when property edit is committed.\n   * @beta */\n  onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;\n  /** Called when property edit is cancelled.\n   * @beta */\n  onEditCancel?: () => void;\n  /** Whether property value is displayed in expanded state. */\n  isExpanded: boolean;\n  /** Called when toggling between expanded and collapsed property value display state. */\n  onExpansionToggled: () => void;\n  /** Reports property height changes. */\n  onHeightChanged?: (newHeight: number) => void;\n\n  highlight?: HighlightingComponentProps & { applyOnLabel: boolean, applyOnValue: boolean };\n\n  children?: never;\n}\n\n/**  A React component that renders flat properties\n * @internal\n */\nexport const FlatPropertyRenderer: React.FC<FlatPropertyRendererProps> = (props) => {\n  const {\n    category,\n    propertyValueRendererManager,\n    isEditing,\n    onEditCommit,\n    onEditCancel,\n    onHeightChanged,\n    highlight,\n    ...passthroughProps\n  } = props;\n\n  const valueElementRenderer = () => (\n    <DisplayValue\n      propertyRecord={passthroughProps.propertyRecord}\n      orientation={passthroughProps.orientation}\n      columnRatio={passthroughProps.columnRatio}\n      width={passthroughProps.width}\n      category={category}\n      propertyValueRendererManager={propertyValueRendererManager}\n      isEditing={isEditing}\n      onEditCommit={onEditCommit}\n      onEditCancel={onEditCancel}\n      isExpanded={passthroughProps.isExpanded}\n      onExpansionToggled={passthroughProps.onExpansionToggled}\n      onHeightChanged={onHeightChanged}\n      highlight={highlight}\n    />\n  );\n\n  const primitiveRendererProps: PrimitiveRendererProps = {\n    ...passthroughProps,\n    valueElementRenderer,\n    indentation: props.indentation,\n  };\n  switch (props.propertyRecord.value.valueFormat) {\n    case PropertyValueFormat.Primitive:\n      return (<PrimitivePropertyRenderer highlight={highlight?.applyOnLabel ? highlight : undefined} {...primitiveRendererProps} />);\n\n    case PropertyValueFormat.Array:\n      // If array is empty, render it as a primitive property\n      if (props.propertyRecord.value.items.length === 0)\n        return (<PrimitivePropertyRenderer highlight={highlight?.applyOnLabel ? highlight : undefined} {...primitiveRendererProps} />);\n\n    // eslint-disable-next-line no-fallthrough\n    case PropertyValueFormat.Struct:\n      return (\n        <FlatNonPrimitivePropertyRenderer\n          isExpanded={props.isExpanded}\n          onExpandToggled={props.onExpansionToggled}\n          {...primitiveRendererProps}\n        />\n      );\n  }\n};\n\ninterface DisplayValueProps {\n  isEditing?: boolean;\n  propertyRecord: PropertyRecord;\n\n  orientation: Orientation;\n  columnRatio?: number;\n  /** Pass width to rerender component as property grid width changes */\n  width?: number;\n  indentation?: number;\n  propertyValueRendererManager?: PropertyValueRendererManager;\n  isExpanded?: boolean;\n  onExpansionToggled?: () => void;\n  onHeightChanged?: (newHeight: number) => void;\n\n  category?: PropertyCategory;\n  onEditCancel?: () => void;\n  onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;\n\n  highlight?: HighlightingComponentProps & { applyOnLabel: boolean, applyOnValue: boolean };\n}\n\nconst DisplayValue: React.FC<DisplayValueProps> = (props) => {\n  useResetHeightOnEdit(props.isEditing, props.onHeightChanged);\n\n  if (props.isEditing) {\n    const _onEditCommit = (args: PropertyUpdatedArgs) => {\n      /* istanbul ignore else */\n      if (props.category)\n        props.onEditCommit?.(args, props.category);\n    };\n\n    return (\n      <EditorContainer\n        propertyRecord={props.propertyRecord}\n        onCommit={_onEditCommit}\n        onCancel={props.onEditCancel ?? (/* istanbul ignore next */() => { })}\n        setFocus={true}\n      />\n    );\n  }\n\n  return (\n    <>\n      {\n        CommonPropertyRenderer.createNewDisplayValue(\n          props.orientation,\n          props.propertyRecord,\n          props.indentation,\n          props.propertyValueRendererManager,\n          props.isExpanded,\n          props.onExpansionToggled,\n          props.onHeightChanged,\n          props.highlight\n        )\n      }\n    </>\n  );\n};\n\nfunction useResetHeightOnEdit(isEditing?: boolean, onHeightChanged?: (newHeight: number) => void) {\n  const previousEditingStatusRef = React.useRef(isEditing);\n  React.useEffect(() => {\n    if (!previousEditingStatusRef.current && isEditing) {\n      onHeightChanged?.(27);\n    }\n\n    previousEditingStatusRef.current = isEditing;\n  });\n}\n"]}
+{"version":3,"file":"FlatPropertyRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/propertygrid/internal/flat-properties/FlatPropertyRenderer.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 PropertyGrid\n */\n\nimport * as React from \"react\";\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { Orientation } from \"@itwin/core-react\";\nimport { HighlightingComponentProps } from \"../../../common/HighlightingComponentProps\";\nimport { EditorContainer, PropertyUpdatedArgs } from \"../../../editors/EditorContainer\";\nimport { CommonPropertyRenderer } from \"../../../properties/renderers/CommonPropertyRenderer\";\nimport { PrimitivePropertyRenderer, PrimitiveRendererProps } from \"../../../properties/renderers/PrimitivePropertyRenderer\";\nimport { SharedRendererProps } from \"../../../properties/renderers/PropertyRenderer\";\nimport { PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\nimport { PropertyCategory } from \"../../PropertyDataProvider\";\nimport { FlatNonPrimitivePropertyRenderer } from \"./FlatNonPrimitivePropertyRenderer\";\n\n/** Properties of [[FlatPropertyRenderer]] React component\n * @internal\n */\nexport interface FlatPropertyRendererProps extends SharedRendererProps {\n  category?: PropertyCategory;\n  /** Custom value renderer */\n  propertyValueRendererManager?: PropertyValueRendererManager;\n  /** Multiplier of how much the property is indented to the right */\n  indentation?: number;\n  /** Indicates property is being edited */\n  isEditing?: boolean;\n  /** Called when property edit is committed. */\n  onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;\n  /** Called when property edit is cancelled. */\n  onEditCancel?: () => void;\n  /** Whether property value is displayed in expanded state. */\n  isExpanded: boolean;\n  /** Called when toggling between expanded and collapsed property value display state. */\n  onExpansionToggled: () => void;\n  /** Reports property height changes. */\n  onHeightChanged?: (newHeight: number) => void;\n\n  highlight?: HighlightingComponentProps & { applyOnLabel: boolean, applyOnValue: boolean };\n\n  children?: never;\n}\n\n/**  A React component that renders flat properties\n * @internal\n */\nexport const FlatPropertyRenderer: React.FC<FlatPropertyRendererProps> = (props) => {\n  const {\n    category,\n    propertyValueRendererManager,\n    isEditing,\n    onEditCommit,\n    onEditCancel,\n    onHeightChanged,\n    highlight,\n    ...passthroughProps\n  } = props;\n\n  const valueElementRenderer = () => (\n    <DisplayValue\n      propertyRecord={passthroughProps.propertyRecord}\n      orientation={passthroughProps.orientation}\n      columnRatio={passthroughProps.columnRatio}\n      width={passthroughProps.width}\n      category={category}\n      propertyValueRendererManager={propertyValueRendererManager}\n      isEditing={isEditing}\n      onEditCommit={onEditCommit}\n      onEditCancel={onEditCancel}\n      isExpanded={passthroughProps.isExpanded}\n      onExpansionToggled={passthroughProps.onExpansionToggled}\n      onHeightChanged={onHeightChanged}\n      highlight={highlight}\n    />\n  );\n\n  const primitiveRendererProps: PrimitiveRendererProps = {\n    ...passthroughProps,\n    valueElementRenderer,\n    indentation: props.indentation,\n  };\n  switch (props.propertyRecord.value.valueFormat) {\n    case PropertyValueFormat.Primitive:\n      return (<PrimitivePropertyRenderer highlight={highlight?.applyOnLabel ? highlight : undefined} {...primitiveRendererProps} />);\n\n    case PropertyValueFormat.Array:\n      // If array is empty, render it as a primitive property\n      if (props.propertyRecord.value.items.length === 0)\n        return (<PrimitivePropertyRenderer highlight={highlight?.applyOnLabel ? highlight : undefined} {...primitiveRendererProps} />);\n\n    // eslint-disable-next-line no-fallthrough\n    case PropertyValueFormat.Struct:\n      return (\n        <FlatNonPrimitivePropertyRenderer\n          isExpanded={props.isExpanded}\n          onExpandToggled={props.onExpansionToggled}\n          {...primitiveRendererProps}\n        />\n      );\n  }\n};\n\ninterface DisplayValueProps {\n  isEditing?: boolean;\n  propertyRecord: PropertyRecord;\n\n  orientation: Orientation;\n  columnRatio?: number;\n  /** Pass width to rerender component as property grid width changes */\n  width?: number;\n  indentation?: number;\n  propertyValueRendererManager?: PropertyValueRendererManager;\n  isExpanded?: boolean;\n  onExpansionToggled?: () => void;\n  onHeightChanged?: (newHeight: number) => void;\n\n  category?: PropertyCategory;\n  onEditCancel?: () => void;\n  onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;\n\n  highlight?: HighlightingComponentProps & { applyOnLabel: boolean, applyOnValue: boolean };\n}\n\nconst DisplayValue: React.FC<DisplayValueProps> = (props) => {\n  useResetHeightOnEdit(props.isEditing, props.onHeightChanged);\n\n  if (props.isEditing) {\n    const _onEditCommit = (args: PropertyUpdatedArgs) => {\n      /* istanbul ignore else */\n      if (props.category)\n        props.onEditCommit?.(args, props.category);\n    };\n\n    return (\n      <EditorContainer\n        propertyRecord={props.propertyRecord}\n        onCommit={_onEditCommit}\n        onCancel={props.onEditCancel ?? (/* istanbul ignore next */() => { })}\n        setFocus={true}\n      />\n    );\n  }\n\n  return (\n    <>\n      {\n        CommonPropertyRenderer.createNewDisplayValue(\n          props.orientation,\n          props.propertyRecord,\n          props.indentation,\n          props.propertyValueRendererManager,\n          props.isExpanded,\n          props.onExpansionToggled,\n          props.onHeightChanged,\n          props.highlight\n        )\n      }\n    </>\n  );\n};\n\nfunction useResetHeightOnEdit(isEditing?: boolean, onHeightChanged?: (newHeight: number) => void) {\n  const previousEditingStatusRef = React.useRef(isEditing);\n  React.useEffect(() => {\n    if (!previousEditingStatusRef.current && isEditing) {\n      onHeightChanged?.(27);\n    }\n\n    previousEditingStatusRef.current = isEditing;\n  });\n}\n"]}

package/lib/cjs/components-react/selectable-content/SelectableContent.d.ts

@@ -22,6 +22,7 @@ export interface ControlledSelectableContentProps {
     onSelectedContentIdChanged?: (contentId: string) => void;
     children: SelectableContentDefinition[];
     selectAriaLabel?: string;
+    disabled?: boolean;
 }
 /**
  * A fully-controlled component that accepts a list of child components with ids and labels and
@@ -38,6 +39,7 @@ export interface SelectableContentProps {
     defaultSelectedContentId: string;
     children: SelectableContentDefinition[];
     selectAriaLabel?: string;
+    disabled?: boolean;
 }
 /**
  * An uncontrolled component that accepts a list of child components with ids and labels and

package/lib/cjs/components-react/selectable-content/SelectableContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableContent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,gCAAgC;IAC/C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,eAgClF;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,wBAAwB,EAAE,MAAM,CAAC;IACjC,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAU9D"}
+{"version":3,"file":"SelectableContent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,gCAAgC;IAC/C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,eAiClF;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,wBAAwB,EAAE,MAAM,CAAC;IACjC,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAU9D"}

package/lib/cjs/components-react/selectable-content/SelectableContent.js

@@ -9,7 +9,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -38,12 +42,11 @@ const itwinui_react_1 = require("@itwin/itwinui-react");
  * @public
  */
 function ControlledSelectableContent(props) {
-    var _a;
-    const { onSelectedContentIdChanged } = props;
+    const { onSelectedContentIdChanged, disabled } = props;
     const onContentIdSelected = React.useCallback((newValue) => {
         onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);
     }, [onSelectedContentIdChanged]);
-    const selectedContent = (_a = props.children.find((contentDef) => contentDef.id === props.selectedContentId)) !== null && _a !== void 0 ? _a : props.children[0];
+    const selectedContent = props.children.find((contentDef) => contentDef.id === props.selectedContentId) ?? props.children[0];
     const options = React.useMemo(() => {
         return props.children.map((componentDef) => ({
             label: componentDef.label,
@@ -52,8 +55,8 @@ function ControlledSelectableContent(props) {
     }, [props.children]);
     return (React.createElement("div", { className: "components-selectable-content" },
         React.createElement("div", { className: "components-selectable-content-header" }, options.length > 0 &&
-            React.createElement(itwinui_react_1.Select, { onChange: onContentIdSelected, size: "small", className: "components-selectable-content-selector", "aria-label": props.selectAriaLabel, value: selectedContent.id, options: options })),
-        React.createElement("div", { className: "components-selectable-content-wrapper" }, selectedContent === null || selectedContent === void 0 ? void 0 : selectedContent.render())));
+            React.createElement(itwinui_react_1.Select, { onChange: onContentIdSelected, size: "small", className: "components-selectable-content-selector", "aria-label": props.selectAriaLabel, value: selectedContent.id, options: options, disabled: disabled })),
+        React.createElement("div", { className: "components-selectable-content-wrapper" }, selectedContent?.render())));
 }
 exports.ControlledSelectableContent = ControlledSelectableContent;
 /**
@@ -67,7 +70,7 @@ function SelectableContent(props) {
     const onSelectedContentIdChanged = React.useCallback((id) => {
         setSelectedContentId(id);
     }, []);
-    return (React.createElement(ControlledSelectableContent, { selectedContentId: selectedContentId, onSelectedContentIdChanged: onSelectedContentIdChanged, selectAriaLabel: props.selectAriaLabel }, props.children));
+    return (React.createElement(ControlledSelectableContent, { selectedContentId: selectedContentId, onSelectedContentIdChanged: onSelectedContentIdChanged, selectAriaLabel: props.selectAriaLabel, disabled: props.disabled }, props.children));
 }
 exports.SelectableContent = SelectableContent;
 //# sourceMappingURL=SelectableContent.js.map

package/lib/cjs/components-react/selectable-content/SelectableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,oCAAkC;AAClC,6CAA+B;AAC/B,wDAA4D;AAwB5D;;;;;GAKG;AACH,SAAgB,2BAA2B,CAAC,KAAuC;;IACjF,MAAM,EAAE,0BAA0B,EAAE,GAAG,KAAK,CAAC;IAE7C,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAQ,EAAE;QACvE,0BAA0B,IAAI,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAEjC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,CAAC,iBAAiB,CAAC,mCAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5H,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC3C,KAAK,EAAE,YAAY,CAAC,KAAK;YACzB,KAAK,EAAE,YAAY,CAAC,EAAE;SACvB,CAAC,CAA2B,CAAC;IAChC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,6BAAK,SAAS,EAAC,sCAAsC,IAClD,OAAO,CAAC,MAAM,GAAG,CAAC;YACjB,oBAAC,sBAAM,IAAC,QAAQ,EAAE,mBAAmB,EAAE,IAAI,EAAC,OAAO,EACjD,SAAS,EAAC,wCAAwC,gBACtC,KAAK,CAAC,eAAe,EACjC,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,OAAO,EAAE,OAAO,GAChB,CAEA;QACN,6BAAK,SAAS,EAAC,uCAAuC,IACnD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,EAAE,CACtB,CACF,CACP,CAAC;AACJ,CAAC;AAhCD,kEAgCC;AAYD;;;;;GAKG;AACH,SAAgB,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IACjG,MAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAClE,oBAAoB,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,oBAAC,2BAA2B,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,IAC9J,KAAK,CAAC,QAAQ,CACa,CAC/B,CAAC;AACJ,CAAC;AAVD,8CAUC","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/* eslint-disable deprecation/deprecation */\n/** @packageDocumentation\n * @module SelectableContent\n */\n\nimport \"./SelectableContent.scss\";\nimport * as React from \"react\";\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\n\n/**\n * A definition for content displayed in [[ControlledSelectableContent]] and\n * [[SelectableContent]] components.\n * @public\n */\nexport interface SelectableContentDefinition {\n  id: string;\n  label: string;\n  render: () => React.ReactNode;\n}\n\n/**\n * [[ControlledSelectableContent]] component properties\n * @public\n */\nexport interface ControlledSelectableContentProps {\n  selectedContentId: string;\n  onSelectedContentIdChanged?: (contentId: string) => void;\n  children: SelectableContentDefinition[];\n  selectAriaLabel?: string;\n}\n\n/**\n * A fully-controlled component that accepts a list of child components with ids and labels and\n * renders a select box at the top, allowing to choose which of the provided child components\n * should be rendered at the bottom.\n * @public\n */\nexport function ControlledSelectableContent(props: ControlledSelectableContentProps) {\n  const { onSelectedContentIdChanged } = props;\n\n  const onContentIdSelected = React.useCallback((newValue: string): void => {\n    onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);\n  }, [onSelectedContentIdChanged]);\n\n  const selectedContent = props.children.find((contentDef) => contentDef.id === props.selectedContentId) ?? props.children[0];\n  const options = React.useMemo(() => {\n    return props.children.map((componentDef) => ({\n      label: componentDef.label,\n      value: componentDef.id,\n    })) as SelectOption<string>[];\n  }, [props.children]);\n\n  return (\n    <div className=\"components-selectable-content\">\n      <div className=\"components-selectable-content-header\">\n        {options.length > 0 &&\n          <Select onChange={onContentIdSelected} size=\"small\"\n            className=\"components-selectable-content-selector\"\n            aria-label={props.selectAriaLabel}\n            value={selectedContent.id}\n            options={options}\n          />\n        }\n      </div>\n      <div className=\"components-selectable-content-wrapper\">\n        {selectedContent?.render()}\n      </div>\n    </div>\n  );\n}\n\n/**\n * [[SelectableContent]] component properties\n * @public\n */\nexport interface SelectableContentProps {\n  defaultSelectedContentId: string;\n  children: SelectableContentDefinition[];\n  selectAriaLabel?: string;\n}\n\n/**\n * An uncontrolled component that accepts a list of child components with ids and labels and\n * renders a select box at the top, allowing to choose which of the provided child components\n * should be rendered at the bottom.\n * @public\n */\nexport function SelectableContent(props: SelectableContentProps) {\n  const [selectedContentId, setSelectedContentId] = React.useState(props.defaultSelectedContentId);\n  const onSelectedContentIdChanged = React.useCallback((id: string) => {\n    setSelectedContentId(id);\n  }, []);\n  return (\n    <ControlledSelectableContent selectedContentId={selectedContentId} onSelectedContentIdChanged={onSelectedContentIdChanged} selectAriaLabel={props.selectAriaLabel}>\n      {props.children}\n    </ControlledSelectableContent>\n  );\n}\n"]}
+{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,oCAAkC;AAClC,6CAA+B;AAC/B,wDAA4D;AAyB5D;;;;;GAKG;AACH,SAAgB,2BAA2B,CAAC,KAAuC;IACjF,MAAM,EAAE,0BAA0B,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEvD,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAQ,EAAE;QACvE,0BAA0B,IAAI,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAEjC,MAAM,eAAe,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5H,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC3C,KAAK,EAAE,YAAY,CAAC,KAAK;YACzB,KAAK,EAAE,YAAY,CAAC,EAAE;SACvB,CAAC,CAA2B,CAAC;IAChC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,6BAAK,SAAS,EAAC,sCAAsC,IAClD,OAAO,CAAC,MAAM,GAAG,CAAC;YACjB,oBAAC,sBAAM,IAAC,QAAQ,EAAE,mBAAmB,EAAE,IAAI,EAAC,OAAO,EACjD,SAAS,EAAC,wCAAwC,gBACtC,KAAK,CAAC,eAAe,EACjC,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,CAEA;QACN,6BAAK,SAAS,EAAC,uCAAuC,IACnD,eAAe,EAAE,MAAM,EAAE,CACtB,CACF,CACP,CAAC;AACJ,CAAC;AAjCD,kEAiCC;AAaD;;;;;GAKG;AACH,SAAgB,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IACjG,MAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAClE,oBAAoB,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,oBAAC,2BAA2B,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACxL,KAAK,CAAC,QAAQ,CACa,CAC/B,CAAC;AACJ,CAAC;AAVD,8CAUC","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/* eslint-disable deprecation/deprecation */\n/** @packageDocumentation\n * @module SelectableContent\n */\n\nimport \"./SelectableContent.scss\";\nimport * as React from \"react\";\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\n\n/**\n * A definition for content displayed in [[ControlledSelectableContent]] and\n * [[SelectableContent]] components.\n * @public\n */\nexport interface SelectableContentDefinition {\n  id: string;\n  label: string;\n  render: () => React.ReactNode;\n}\n\n/**\n * [[ControlledSelectableContent]] component properties\n * @public\n */\nexport interface ControlledSelectableContentProps {\n  selectedContentId: string;\n  onSelectedContentIdChanged?: (contentId: string) => void;\n  children: SelectableContentDefinition[];\n  selectAriaLabel?: string;\n  disabled?: boolean;\n}\n\n/**\n * A fully-controlled component that accepts a list of child components with ids and labels and\n * renders a select box at the top, allowing to choose which of the provided child components\n * should be rendered at the bottom.\n * @public\n */\nexport function ControlledSelectableContent(props: ControlledSelectableContentProps) {\n  const { onSelectedContentIdChanged, disabled } = props;\n\n  const onContentIdSelected = React.useCallback((newValue: string): void => {\n    onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);\n  }, [onSelectedContentIdChanged]);\n\n  const selectedContent = props.children.find((contentDef) => contentDef.id === props.selectedContentId) ?? props.children[0];\n  const options = React.useMemo(() => {\n    return props.children.map((componentDef) => ({\n      label: componentDef.label,\n      value: componentDef.id,\n    })) as SelectOption<string>[];\n  }, [props.children]);\n\n  return (\n    <div className=\"components-selectable-content\">\n      <div className=\"components-selectable-content-header\">\n        {options.length > 0 &&\n          <Select onChange={onContentIdSelected} size=\"small\"\n            className=\"components-selectable-content-selector\"\n            aria-label={props.selectAriaLabel}\n            value={selectedContent.id}\n            options={options}\n            disabled={disabled}\n          />\n        }\n      </div>\n      <div className=\"components-selectable-content-wrapper\">\n        {selectedContent?.render()}\n      </div>\n    </div>\n  );\n}\n\n/**\n * [[SelectableContent]] component properties\n * @public\n */\nexport interface SelectableContentProps {\n  defaultSelectedContentId: string;\n  children: SelectableContentDefinition[];\n  selectAriaLabel?: string;\n  disabled?: boolean;\n}\n\n/**\n * An uncontrolled component that accepts a list of child components with ids and labels and\n * renders a select box at the top, allowing to choose which of the provided child components\n * should be rendered at the bottom.\n * @public\n */\nexport function SelectableContent(props: SelectableContentProps) {\n  const [selectedContentId, setSelectedContentId] = React.useState(props.defaultSelectedContentId);\n  const onSelectedContentIdChanged = React.useCallback((id: string) => {\n    setSelectedContentId(id);\n  }, []);\n  return (\n    <ControlledSelectableContent selectedContentId={selectedContentId} onSelectedContentIdChanged={onSelectedContentIdChanged} selectAriaLabel={props.selectAriaLabel} disabled={props.disabled}>\n      {props.children}\n    </ControlledSelectableContent>\n  );\n}\n"]}

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

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

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

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

@@ -9,14 +9,13 @@
   background-origin: border-box;
   border-color: transparent;
   border-style: solid;
+  border-radius: var(--iui-border-radius-1);
   cursor: pointer;
-  transition: background-color 250ms ease;
+  transition: background-color var(--iui-duration-1) ease;
   position: relative;
   background: transparent;
-
   height: 100%;
   width: 100%;
-
   outline-style: solid;
   outline-width: 0;
 
@@ -27,9 +26,8 @@
     display: grid;
     align-content: center;
     justify-content: center;
-    color: $icon-color;
-    filter: $icon-shadow;
-    transition: all 250ms ease;
+    color: var(--iui-color-icon);
+    transition: color var(--iui-duration-1) ease;
 
     img {
       width: $icon-size;
@@ -37,68 +35,39 @@
     }
   }
 
-  &:focus {
-    color: $hovered-icon-color;
-    background-color: $buic-background-focus-overlay;
-
-    svg {
-      opacity: 1;
-    }
-  }
-
-  &:hover {
-    color: $hovered-icon-color;
-    background-color: $buic-background-hover-overlay;
-
-    svg {
-      opacity: 1;
-    }
-  }
-
-  &:active {
-    color: $active-icon-color;
-    background-color: $buic-background-active-overlay;
-    border: solid 2px $buic-foreground-primary;
-
-    > .components-icon {
-      color: $pressed-icon-color;
-
-      svg {
-        opacity: 1;
-      }
-    }
+  &:not(.components-disabled) > .components-icon {
+    filter: $icon-shadow;
   }
 
-  &:active:not(.components-disabled) {
-    background: $buic-background-pressed-overlay;
-    color: $pressed-icon-color;
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
+  &:focus-visible:not(.components-disabled):not(.components-active),
+  &:hover:not(.components-disabled):not(.components-active),
+  &:active:not(.components-disabled):not(.components-active) {
+    color: var(--iui-color-icon-hover);
+    background-color: var(--iui-color-background-transparent-hover);
   }
 
   &.components-active {
-    color: $active-icon-color;
-    background-color: $buic-background-active-overlay;
-    border: solid 2px $buic-foreground-primary;
+    color: var(--iui-color-icon-accent);
+    background-color: var(--iui-color-background-accent-muted);
+    // background-color: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-5));
+    border: solid 2px var(--iui-color-border-accent);
 
     &:not(:active):not(.components-disabled) {
       transition-duration: 0s;
 
       > .components-icon {
-        color: $icon-color;
-        transition-duration: 150ms;
+        color: var(--iui-color-icon-accent);
+        transition-duration: var(--iui-duration-1);
         transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
-
-        svg {
-          opacity: 1;
-        }
       }
     }
   }
 
   &.components-disabled {
+    cursor: not-allowed;
+
     > .components-icon {
-      color: $disabled-icon-color;
+      color: var(--iui-color-icon-disabled);
     }
 
     &:hover {

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

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

@@ -1 +1 @@
-{"version":3,"file":"ItemWrapper.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,8BAA4B;AAC5B,4DAAoC;AACpC,6CAA+B;AAC/B,kDAAmE;AACnE,+DAAwG;AACxG,qDAAqF;AAUrF;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,IAAA,4DAAsC,GAAE,CAAC;IAChH,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,6CAAuB,GAAE,CAAC;IACvE,MAAM,GAAG,GAAG,gCAAgC,CAAiB,QAAQ,EAAE,SAAS,CAAC,CAAC;IAClF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,WAAW,IAAI,sBAAsB,EACrC,sCAA0B,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,EACvF,4BAAgB,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,EAC7E,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,IAEjB,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AApBD,kCAoBC;AAED,gBAAgB;AAChB,SAAgB,gCAAgC,CAAoB,QAAgC,EAAE,SAAkB;IACtH,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QAC9D,IAAI,SAAS;YACX,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;QACrB,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1B,OAAO,IAAA,8BAAiB,EAAI,YAAY,CAAC,CAAC;AAC5C,CAAC;AAPD,4EAOC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ToolSettings\n */\n\nimport \"./ItemWrapper.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps, useResizeObserver } from \"@itwin/core-react\";\nimport { useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\nimport { DirectionHelpers, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\n\n/** Properties of [[ItemWrapper]] component.\n * @internal future\n */\nexport interface ItemWrapperProps extends CommonProps {\n  /** Tool setting content. */\n  children?: React.ReactNode;\n}\n\n/** Used in a [[ItemWrapper]] component to display a setting.\n * @internal future\n */\nexport function ItemWrapper(props: ItemWrapperProps) {\n  const { expandsTo, direction, overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();\n  const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();\n  const ref = useResizeObserverSingleDimension<HTMLDivElement>(onResize, useHeight);\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    hasOverflow && \"components-overflown\",\n    OrthogonalDirectionHelpers.getCssClassName(hasOverflow ? overflowDirection : direction),\n    DirectionHelpers.getCssClassName(hasOverflow ? overflowExpandsTo : expandsTo),\n    props.className,\n  );\n  return (\n    <div\n      className={className}\n      ref={ref}\n      style={props.style}\n    >\n      {props.children}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useResizeObserverSingleDimension<T extends Element>(onResize: (size: number) => void, useHeight: boolean) {\n  const handleResize = React.useCallback((w: number, h: number) => {\n    if (useHeight)\n      return onResize(h);\n    return onResize(w);\n  }, [useHeight, onResize]);\n  return useResizeObserver<T>(handleResize);\n}\n"]}
+{"version":3,"file":"ItemWrapper.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,8BAA4B;AAC5B,4DAAoC;AACpC,6CAA+B;AAC/B,kDAAmE;AACnE,+DAAwG;AACxG,qDAAqF;AAUrF;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,IAAA,4DAAsC,GAAE,CAAC;IAChH,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,6CAAuB,GAAE,CAAC;IACvE,MAAM,GAAG,GAAG,gCAAgC,CAAiB,QAAQ,EAAE,SAAS,CAAC,CAAC;IAClF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,WAAW,IAAI,sBAAsB,EACrC,sCAA0B,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,EACvF,4BAAgB,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,EAC7E,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,IAEjB,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AApBD,kCAoBC;AAED,gBAAgB;AAChB,SAAgB,gCAAgC,CAAoB,QAAgC,EAAE,SAAkB;IACtH,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QAC9D,IAAI,SAAS;YACX,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;QACrB,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1B,OAAO,IAAA,8BAAiB,EAAI,YAAY,CAAC,CAAC;AAC5C,CAAC;AAPD,4EAOC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ToolSettings\n */\n\nimport \"./ItemWrapper.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps, useResizeObserver } from \"@itwin/core-react\";\nimport { useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\nimport { DirectionHelpers, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\n\n/** Properties of [[ItemWrapper]] component.\n * @internal future\n */\nexport interface ItemWrapperProps extends CommonProps {\n  /** Tool setting content. */\n  children?: React.ReactNode;\n}\n\n/** Used in a [[ItemWrapper]] component to display a setting.\n * @internal future\n */\nexport function ItemWrapper(props: ItemWrapperProps) {\n  const { expandsTo, direction, overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();\n  const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();\n  const ref = useResizeObserverSingleDimension<HTMLDivElement>(onResize, useHeight);\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    hasOverflow && \"components-overflown\",\n    OrthogonalDirectionHelpers.getCssClassName(hasOverflow ? overflowDirection : direction),\n    DirectionHelpers.getCssClassName(hasOverflow ? overflowExpandsTo : expandsTo),\n    props.className,\n  );\n  return (\n    <div\n      className={className}\n      ref={ref}\n      style={props.style}\n    >\n      {props.children}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useResizeObserverSingleDimension<T extends Element>(onResize: (size: number) => void, useHeight: boolean) {\n  const handleResize = React.useCallback((w: number, h: number) => {\n    if (useHeight)\n      return onResize(h);\n    return onResize(w);\n  }, [useHeight, onResize]);\n  return useResizeObserver<T>(handleResize);\n}\n"]}

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

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

@@ -1 +1 @@
-{"version":3,"file":"Items.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Items.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,wBAAsB;AACtB,4DAAoC;AACpC,6CAA+B;AAC/B,kDAK2B;AAC3B,+DAAsG;AACtG,qDAAwF;AAYxF;;GAEG;AACH,SAAgB,YAAY,CAAC,KAAwB;IAEnD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,EAAE,GAAG,IAAA,4DAAsC,GAAE,CAAC;IAClH,MAAM,wBAAwB,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC;IAE7F,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACtI,IAAI,gBAAgB,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,+CAAkC,CAAC;IACzF,IAAI,UAAU,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iDAAoC,CAAC;IACrF,IAAI,cAAc,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhG,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,IAAI,qBAAqB,KAAK,2CAAqB,CAAC,SAAS,IAAI,cAAc,GAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE;QAC7G,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,GAAG;YACtB,cAAc,GAAG,KAAK,CAAC;KAC1B;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,CAAC,CAAC;IAEnB,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,QAAQ,EACf,GAAG,EAAE,GAAG,IAEP,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AArDD,oCAqDC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./Items.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, CommonProps,\n  getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\nimport { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\nimport { OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\n\n/** Properties of [[ToolbarItems]] component.\n * @internal\n */\nexport interface ToolbarItemsProps extends CommonProps {\n  /** Toolbar items. */\n  children?: React.ReactNode;\n  /** Toolbar items direction. */\n  direction: OrthogonalDirection;\n}\n\n/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.\n * @internal\n */\nexport function ToolbarItems(props: ToolbarItemsProps) {\n\n  const ref = React.useRef<HTMLDivElement>(null);\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = useToolbarWithOverflowDirectionContext();\n  const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n\n  let toolbarOpacity = useTransparentBackground ? 0 : Number(document.documentElement.style.getPropertyValue(\"--buic-toolbar-opacity\"));\n  let boxShadowOpacity = useTransparentBackground ? 0 : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  const isInitialMount = React.useRef(true);\n  const { onElementRef, proximityScale } = useWidgetOpacityContext();\n\n  React.useEffect(() => {\n    // istanbul ignore else\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n      onElementRef(ref);\n    }\n  }, [onElementRef]);\n\n  if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    // istanbul ignore next\n    if (proximityScale < .25)\n      showSeparators = false;\n  }\n\n  const divStyle: React.CSSProperties = {\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\n    ...props.style,\n  };\n\n  const className = classnames(\n    \"components-toolbar-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(props.direction),\n    showSeparators && \"components-toolbar-show-decorators\",\n    props.className);\n\n  return (\n    <div\n      className={className}\n      style={divStyle}\n      ref={ref}\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"Items.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Items.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,wBAAsB;AACtB,4DAAoC;AACpC,6CAA+B;AAC/B,kDAK2B;AAC3B,+DAAsG;AACtG,qDAAwF;AAYxF;;GAEG;AACH,SAAgB,YAAY,CAAC,KAAwB;IAEnD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,EAAE,GAAG,IAAA,4DAAsC,GAAE,CAAC;IAClH,MAAM,wBAAwB,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC;IAE7F,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACtI,IAAI,gBAAgB,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,+CAAkC,CAAC;IACzF,IAAI,UAAU,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iDAAoC,CAAC;IACrF,IAAI,cAAc,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhG,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,IAAI,qBAAqB,KAAK,2CAAqB,CAAC,SAAS,IAAI,cAAc,GAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE;QAC7G,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,GAAG;YACtB,cAAc,GAAG,KAAK,CAAC;KAC1B;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,CAAC,CAAC;IAEnB,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,QAAQ,EACf,GAAG,EAAE,GAAG,IAEP,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AArDD,oCAqDC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./Items.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, CommonProps,\n  getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\nimport { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\nimport { OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\n\n/** Properties of [[ToolbarItems]] component.\n * @internal\n */\nexport interface ToolbarItemsProps extends CommonProps {\n  /** Toolbar items. */\n  children?: React.ReactNode;\n  /** Toolbar items direction. */\n  direction: OrthogonalDirection;\n}\n\n/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.\n * @internal\n */\nexport function ToolbarItems(props: ToolbarItemsProps) {\n\n  const ref = React.useRef<HTMLDivElement>(null);\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = useToolbarWithOverflowDirectionContext();\n  const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n\n  let toolbarOpacity = useTransparentBackground ? 0 : Number(document.documentElement.style.getPropertyValue(\"--buic-toolbar-opacity\"));\n  let boxShadowOpacity = useTransparentBackground ? 0 : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  const isInitialMount = React.useRef(true);\n  const { onElementRef, proximityScale } = useWidgetOpacityContext();\n\n  React.useEffect(() => {\n    // istanbul ignore else\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n      onElementRef(ref);\n    }\n  }, [onElementRef]);\n\n  if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    // istanbul ignore next\n    if (proximityScale < .25)\n      showSeparators = false;\n  }\n\n  const divStyle: React.CSSProperties = {\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\n    ...props.style,\n  };\n\n  const className = classnames(\n    \"components-toolbar-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(props.direction),\n    showSeparators && \"components-toolbar-show-decorators\",\n    props.className);\n\n  return (\n    <div\n      className={className}\n      style={divStyle}\n      ref={ref}\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}

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

@@ -2,10 +2,9 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 @import "variables";
 
-$separator-color: $buic-text-color-muted;
+$separator-color: var(--iui-color-border-subtle);
 
 .components-toolbar-items-container {
   $border-radius: var(--iui-border-radius-1);
@@ -15,7 +14,7 @@ $separator-color: $buic-text-color-muted;
   vertical-align: bottom;
   box-sizing: border-box;
 
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35);
+  box-shadow: var(--iui-shadow-1);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   pointer-events: auto;

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

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

@@ -1 +1 @@
-{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Overflow.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,2BAAyB;AACzB,4DAAoC;AACpC,6CAA+B;AAC/B,kDAAqF;AACrF,+DAAgG;AAChG,+CAAiE;AACjE,qDAAkD;AAClD,0DAAyD;AAoBzD;;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,EAAoB,QAAQ,EAAE,SAAS,CAAC,CAAC;IACrF,MAAM,QAAQ,GAAG,IAAA,oDAA8B,GAAE,CAAC;IAClD,MAAM,cAAc,GAAG,IAAA,oBAAU,EAC/B,mCAAmC,EACnC,QAAQ,IAAI,WAAW,CAAC,CAAC;IAE3B,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,6BACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,SAAS;QAEd,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;AA/CD,sDA+CC;AAED,gBAAgB;AAChB,SAAgB,iCAAiC,CAAC,SAAoB;IACpE,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;AAXD,8EAWC","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 { CommonProps, NoChildrenProps, Popup, useRefState } from \"@itwin/core-react\";\nimport { useToolbarPopupAutoHideContext, useToolItemEntryContext } 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 extends CommonProps, 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>(onResize, useHeight);\n  const isHidden = useToolbarPopupAutoHideContext();\n  const popupClassName = classnames(\n    \"components-toolbar-overflow_popup\",\n    isHidden && \"nz-hidden\");\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\n      className={className}\n      ref={targetRef}\n    >\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(expandsTo: Direction): RelativePosition {\n  switch (expandsTo) {\n    case Direction.Bottom:\n      return RelativePosition.Bottom;\n    case Direction.Left:\n      return RelativePosition.Left;\n    case Direction.Right:\n      return RelativePosition.Right;\n    case Direction.Top:\n      return RelativePosition.Top;\n  }\n}\n"]}
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Overflow.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,2BAAyB;AACzB,4DAAoC;AACpC,6CAA+B;AAC/B,kDAAqF;AACrF,+DAAgG;AAChG,+CAAiE;AACjE,qDAAkD;AAClD,0DAAyD;AAoBzD;;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,EAAoB,QAAQ,EAAE,SAAS,CAAC,CAAC;IACrF,MAAM,QAAQ,GAAG,IAAA,oDAA8B,GAAE,CAAC;IAClD,MAAM,cAAc,GAAG,IAAA,oBAAU,EAC/B,mCAAmC,EACnC,QAAQ,IAAI,WAAW,CAAC,CAAC;IAE3B,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,6BACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,SAAS;QAEd,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;AA/CD,sDA+CC;AAED,gBAAgB;AAChB,SAAgB,iCAAiC,CAAC,SAAoB;IACpE,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;AAXD,8EAWC","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 { CommonProps, NoChildrenProps, Popup, useRefState } from \"@itwin/core-react\";\nimport { useToolbarPopupAutoHideContext, useToolItemEntryContext } 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 extends CommonProps, 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>(onResize, useHeight);\n  const isHidden = useToolbarPopupAutoHideContext();\n  const popupClassName = classnames(\n    \"components-toolbar-overflow_popup\",\n    isHidden && \"nz-hidden\");\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\n      className={className}\n      ref={targetRef}\n    >\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(expandsTo: Direction): 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

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/OverflowPanel.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,gCAA8B;AAC9B,4DAAoC;AACpC,6CAA+B;AAC/B,kDAK2B;AAE3B,+DAAsG;AACtG,qDAAqF;AAUrF;;GAEG;AACH,8CAA8C;AAC9C,SAAgB,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,EAAE,SAAS,EAC7E,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,IAAA,4DAAsC,GAAE,CAAC;IACpF,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,oCAAuB,GAAE,CAAC;IAErD,MAAM,wBAAwB,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC;IAC7F,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oCAAuB,CAAC;IAC5E,IAAI,gBAAgB,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,+CAAkC,CAAC;IACzF,IAAI,UAAU,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iDAAoC,CAAC;IACrF,IAAI,cAAc,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhG,uBAAuB;IACvB,IAAI,qBAAqB,KAAK,2CAAqB,CAAC,SAAS,IAAI,cAAc,GAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE;QAC7G,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,GAAG;YACtB,cAAc,GAAG,KAAK,CAAC;KAC1B;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,CAAC,iBAAiB,CAAC,IAAI,4BAAgB,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,EACjH,cAAc,IAAI,oCAAoC,EACtD,4BAAgB,CAAC,eAAe,CAAC,iBAAiB,CAAC,EACnD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,QAAQ,IAEd,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AA7CD,oDA6CC","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 {\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity,\n  CommonProps, getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT, TOOLBAR_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\n\nimport { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\nimport { DirectionHelpers, OrthogonalDirectionHelpers } 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 */\n// eslint-disable-next-line react/display-name\nexport function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps) {\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive, expandsTo,\n    overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();\n  const { proximityScale } = useWidgetOpacityContext();\n\n  const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n  let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT;\n  let boxShadowOpacity = useTransparentBackground ? 0 : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  // istanbul ignore next\n  if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    if (proximityScale < .25)\n      showSeparators = false;\n  }\n\n  const divStyle: React.CSSProperties = {\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\n    ...props.style,\n  };\n\n  const className = classnames(\n    \"components-toolbar-overflow-panel\",\n    \"components-toolbar-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(overflowDirection),\n    `${OrthogonalDirectionHelpers.getCssClassName(overflowDirection)}-${DirectionHelpers.getCssClassName(expandsTo)}`,\n    showSeparators && \"components-toolbar-show-decorators\",\n    DirectionHelpers.getCssClassName(overflowExpandsTo),\n    props.className,\n  );\n\n  return (\n    <div\n      className={className}\n      style={divStyle}\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"OverflowPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/OverflowPanel.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,gCAA8B;AAC9B,4DAAoC;AACpC,6CAA+B;AAC/B,kDAK2B;AAE3B,+DAAsG;AACtG,qDAAqF;AAUrF;;GAEG;AACH,8CAA8C;AAC9C,SAAgB,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,EAAE,SAAS,EAC7E,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,IAAA,4DAAsC,GAAE,CAAC;IACpF,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,oCAAuB,GAAE,CAAC;IAErD,MAAM,wBAAwB,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC;IAC7F,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oCAAuB,CAAC;IAC5E,IAAI,gBAAgB,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,+CAAkC,CAAC;IACzF,IAAI,UAAU,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iDAAoC,CAAC;IACrF,IAAI,cAAc,GAAG,qBAAqB,KAAK,2CAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhG,uBAAuB;IACvB,IAAI,qBAAqB,KAAK,2CAAqB,CAAC,SAAS,IAAI,cAAc,GAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE;QAC7G,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,GAAG;YACtB,cAAc,GAAG,KAAK,CAAC;KAC1B;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,CAAC,iBAAiB,CAAC,IAAI,4BAAgB,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,EACjH,cAAc,IAAI,oCAAoC,EACtD,4BAAgB,CAAC,eAAe,CAAC,iBAAiB,CAAC,EACnD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,QAAQ,IAEd,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AA7CD,oDA6CC","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 {\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity,\n  CommonProps, getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT, TOOLBAR_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\n\nimport { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\nimport { DirectionHelpers, OrthogonalDirectionHelpers } 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 */\n// eslint-disable-next-line react/display-name\nexport function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps) {\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive, expandsTo,\n    overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();\n  const { proximityScale } = useWidgetOpacityContext();\n\n  const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n  let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT;\n  let boxShadowOpacity = useTransparentBackground ? 0 : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  // istanbul ignore next\n  if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    if (proximityScale < .25)\n      showSeparators = false;\n  }\n\n  const divStyle: React.CSSProperties = {\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\n    ...props.style,\n  };\n\n  const className = classnames(\n    \"components-toolbar-overflow-panel\",\n    \"components-toolbar-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(overflowDirection),\n    `${OrthogonalDirectionHelpers.getCssClassName(overflowDirection)}-${DirectionHelpers.getCssClassName(expandsTo)}`,\n    showSeparators && \"components-toolbar-show-decorators\",\n    DirectionHelpers.getCssClassName(overflowExpandsTo),\n    props.className,\n  );\n\n  return (\n    <div\n      className={className}\n      style={divStyle}\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}