@itwin/components-react 4.1.0 → 4.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"FlatNonPrimitivePropertyRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/propertygrid/internal/flat-properties/FlatNonPrimitivePropertyRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,iEAAiE,CAAC;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yDAAyD,CAAC;AAItG;;GAEG;AACH,MAAM,WAAW,qCAAsC,SAAQ,sBAAsB;IACnF,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,qBAAa,gCAAiC,SAAQ,KAAK,CAAC,SAAS,CAAC,qCAAqC,CAAC;gBAC9F,KAAK,EAAE,qCAAqC;IAIxD,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,QAAQ;IAqBhB,gBAAgB;IACA,MAAM;CAUvB"}
+{"version":3,"file":"FlatNonPrimitivePropertyRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/propertygrid/internal/flat-properties/FlatNonPrimitivePropertyRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,iEAAiE,CAAC;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yDAAyD,CAAC;AAItG;;GAEG;AACH,MAAM,WAAW,qCACf,SAAQ,sBAAsB;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,qBAAa,gCAAiC,SAAQ,KAAK,CAAC,SAAS,CAAC,qCAAqC,CAAC;gBAC9F,KAAK,EAAE,qCAAqC;IAIxD,OAAO,CAAC,WAAW,CAGjB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,QAAQ;IA6BhB,gBAAgB;IACA,MAAM;CAIvB"}

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

@@ -25,9 +25,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlatNonPrimitivePropertyRenderer = void 0;
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module PropertyGrid
  */
@@ -56,7 +56,7 @@ class FlatNonPrimitivePropertyRenderer extends React.Component {
     }
     getLabel(props) {
         const { orientation, indentation, width, columnRatio, columnInfo } = props;
-        const offset = CommonPropertyRenderer_1.CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.minLabelWidth);
+        const offset = CommonPropertyRenderer_1.CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, columnInfo?.minLabelWidth);
         let displayLabel = props.propertyRecord.property.displayLabel;
         if (props.propertyRecord.value.valueFormat === appui_abstract_1.PropertyValueFormat.Array)
             displayLabel = `${displayLabel} (${props.propertyRecord.value.items.length})`;
@@ -64,9 +64,8 @@ class FlatNonPrimitivePropertyRenderer extends React.Component {
     }
     /** @internal */
     render() {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { indentation, ...props } = this.props;
-        return (React.createElement(PropertyView_1.PropertyView, { labelElement: this.getLabel(this.props), ...props }));
+        return React.createElement(PropertyView_1.PropertyView, { labelElement: this.getLabel(this.props), ...props });
     }
 }
 exports.FlatNonPrimitivePropertyRenderer = FlatNonPrimitivePropertyRenderer;

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;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,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":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module PropertyGrid\r\n */\r\nimport \"../../../properties/renderers/NonPrimitivePropertyRenderer.scss\";\r\nimport * as React from \"react\";\r\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { CommonPropertyRenderer } from \"../../../properties/renderers/CommonPropertyRenderer\";\r\nimport type { PrimitiveRendererProps } from \"../../../properties/renderers/PrimitivePropertyRenderer\";\r\nimport { NonPrimitivePropertyLabelRenderer } from \"../../../properties/renderers/label/NonPrimitivePropertyLabelRenderer\";\r\nimport { PropertyView } from \"../../../properties/renderers/PropertyView\";\r\n\r\n/** Properties of [[FlatNonPrimitivePropertyRenderer]] React component\r\n * @internal\r\n */\r\nexport interface FlatNonPrimitivePropertyRendererProps extends PrimitiveRendererProps {\r\n  isExpanded: boolean;\r\n  onExpandToggled: () => void;\r\n}\r\n\r\n/** React Component that renders flat struct and array properties\r\n * @internal\r\n */\r\nexport class FlatNonPrimitivePropertyRenderer extends React.Component<FlatNonPrimitivePropertyRendererProps> {\r\n  constructor(props: FlatNonPrimitivePropertyRendererProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _onExpanded = () => {\r\n    /* istanbul ignore else */\r\n    if (!this.props.isExpanded)\r\n      this.props.onExpandToggled();\r\n  };\r\n\r\n  private _onCollapsed = () => {\r\n    /* istanbul ignore else */\r\n    if (this.props.isExpanded)\r\n      this.props.onExpandToggled();\r\n  };\r\n\r\n  private getLabel(props: FlatNonPrimitivePropertyRendererProps): React.ReactNode {\r\n    const { orientation, indentation, width, columnRatio, columnInfo } = props;\r\n    const offset = CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, columnInfo?.minLabelWidth);\r\n\r\n    let displayLabel = props.propertyRecord.property.displayLabel;\r\n    if (props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)\r\n      displayLabel = `${displayLabel} (${props.propertyRecord.value.items.length})`;\r\n\r\n    return (\r\n      <NonPrimitivePropertyLabelRenderer\r\n        isExpanded={props.isExpanded}\r\n        onExpand={this._onExpanded}\r\n        onCollapse={this._onCollapsed}\r\n        offset={offset}\r\n        renderColon={false}\r\n      >\r\n        {displayLabel}\r\n      </NonPrimitivePropertyLabelRenderer>\r\n    );\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    const { indentation, ...props } = this.props;\r\n    return (\r\n      <PropertyView\r\n        labelElement={this.getLabel(this.props)}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"FlatNonPrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/propertygrid/internal/flat-properties/FlatNonPrimitivePropertyRenderer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;gGAGgG;AAChG;;GAEG;AACH,2EAAyE;AACzE,6CAA+B;AAC/B,0DAA4D;AAC5D,iGAA8F;AAE9F,6HAA0H;AAC1H,6EAA0E;AAW1E;;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;gBAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;QAC3D,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,0BAA0B;YAC1B,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU;gBAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1D,CAAC,CAAC;IAVF,CAAC;IAYO,QAAQ,CACd,KAA4C;QAE5C,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;QAC3E,MAAM,MAAM,GAAG,+CAAsB,CAAC,cAAc,CAClD,WAAW,EACX,WAAW,EACX,KAAK,EACL,WAAW,EACX,UAAU,EAAE,aAAa,CAC1B,CAAC;QAEF,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,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7C,OAAO,oBAAC,2BAAY,IAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI,CAAC;IAC9E,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 type { 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\n  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) this.props.onExpandToggled();\n  };\n\n  private _onCollapsed = () => {\n    /* istanbul ignore else */\n    if (this.props.isExpanded) this.props.onExpandToggled();\n  };\n\n  private getLabel(\n    props: FlatNonPrimitivePropertyRendererProps\n  ): React.ReactNode {\n    const { orientation, indentation, width, columnRatio, columnInfo } = props;\n    const offset = CommonPropertyRenderer.getLabelOffset(\n      indentation,\n      orientation,\n      width,\n      columnRatio,\n      columnInfo?.minLabelWidth\n    );\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    const { indentation, ...props } = this.props;\n    return <PropertyView labelElement={this.getLabel(this.props)} {...props} />;\n  }\n}\n"]}

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;AAI/B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAC7F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAK5E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AAC1F,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0CAA0C,CAAC;AAC7F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAGnE;;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"}
+{"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;AAI/B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAC7F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAK5E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AAC1F,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0CAA0C,CAAC;AAC7F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAGnE;;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,CACb,IAAI,EAAE,mBAAmB,EACzB,QAAQ,EAAE,gBAAgB,KACvB,IAAI,CAAC;IACV,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;QACvC,YAAY,EAAE,OAAO,CAAC;QACtB,YAAY,EAAE,OAAO,CAAC;KACvB,CAAC;IAEF,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAkEpE,CAAC"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module PropertyGrid
  */
@@ -50,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 }));
@@ -62,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)));
 };
@@ -79,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":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module PropertyGrid\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport type { PropertyRecord} from \"@itwin/appui-abstract\";\r\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport type { Orientation } from \"@itwin/core-react\";\r\nimport type { HighlightingComponentProps } from \"../../../common/HighlightingComponentProps\";\r\nimport type { PropertyUpdatedArgs } from \"../../../editors/EditorContainer\";\r\nimport { EditorContainer } from \"../../../editors/EditorContainer\";\r\nimport { CommonPropertyRenderer } from \"../../../properties/renderers/CommonPropertyRenderer\";\r\nimport type { PrimitiveRendererProps } from \"../../../properties/renderers/PrimitivePropertyRenderer\";\r\nimport { PrimitivePropertyRenderer } from \"../../../properties/renderers/PrimitivePropertyRenderer\";\r\nimport type { SharedRendererProps } from \"../../../properties/renderers/PropertyRenderer\";\r\nimport type { PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\r\nimport type { PropertyCategory } from \"../../PropertyDataProvider\";\r\nimport { FlatNonPrimitivePropertyRenderer } from \"./FlatNonPrimitivePropertyRenderer\";\r\n\r\n/** Properties of [[FlatPropertyRenderer]] React component\r\n * @internal\r\n */\r\nexport interface FlatPropertyRendererProps extends SharedRendererProps {\r\n  category?: PropertyCategory;\r\n  /** Custom value renderer */\r\n  propertyValueRendererManager?: PropertyValueRendererManager;\r\n  /** Multiplier of how much the property is indented to the right */\r\n  indentation?: number;\r\n  /** Indicates property is being edited */\r\n  isEditing?: boolean;\r\n  /** Called when property edit is committed. */\r\n  onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;\r\n  /** Called when property edit is cancelled. */\r\n  onEditCancel?: () => void;\r\n  /** Whether property value is displayed in expanded state. */\r\n  isExpanded: boolean;\r\n  /** Called when toggling between expanded and collapsed property value display state. */\r\n  onExpansionToggled: () => void;\r\n  /** Reports property height changes. */\r\n  onHeightChanged?: (newHeight: number) => void;\r\n\r\n  highlight?: HighlightingComponentProps & { applyOnLabel: boolean, applyOnValue: boolean };\r\n\r\n  children?: never;\r\n}\r\n\r\n/**  A React component that renders flat properties\r\n * @internal\r\n */\r\nexport const FlatPropertyRenderer: React.FC<FlatPropertyRendererProps> = (props) => {\r\n  const {\r\n    category,\r\n    propertyValueRendererManager,\r\n    isEditing,\r\n    onEditCommit,\r\n    onEditCancel,\r\n    onHeightChanged,\r\n    highlight,\r\n    ...passthroughProps\r\n  } = props;\r\n\r\n  const valueElementRenderer = () => (\r\n    <DisplayValue\r\n      propertyRecord={passthroughProps.propertyRecord}\r\n      orientation={passthroughProps.orientation}\r\n      columnRatio={passthroughProps.columnRatio}\r\n      width={passthroughProps.width}\r\n      category={category}\r\n      propertyValueRendererManager={propertyValueRendererManager}\r\n      isEditing={isEditing}\r\n      onEditCommit={onEditCommit}\r\n      onEditCancel={onEditCancel}\r\n      isExpanded={passthroughProps.isExpanded}\r\n      onExpansionToggled={passthroughProps.onExpansionToggled}\r\n      onHeightChanged={onHeightChanged}\r\n      highlight={highlight}\r\n    />\r\n  );\r\n\r\n  const primitiveRendererProps: PrimitiveRendererProps = {\r\n    ...passthroughProps,\r\n    valueElementRenderer,\r\n    indentation: props.indentation,\r\n  };\r\n  switch (props.propertyRecord.value.valueFormat) {\r\n    case PropertyValueFormat.Primitive:\r\n      return (<PrimitivePropertyRenderer highlight={highlight?.applyOnLabel ? highlight : undefined} {...primitiveRendererProps} />);\r\n\r\n    case PropertyValueFormat.Array:\r\n      // If array is empty, render it as a primitive property\r\n      if (props.propertyRecord.value.items.length === 0)\r\n        return (<PrimitivePropertyRenderer highlight={highlight?.applyOnLabel ? highlight : undefined} {...primitiveRendererProps} />);\r\n\r\n    // eslint-disable-next-line no-fallthrough\r\n    case PropertyValueFormat.Struct:\r\n      return (\r\n        <FlatNonPrimitivePropertyRenderer\r\n          isExpanded={props.isExpanded}\r\n          onExpandToggled={props.onExpansionToggled}\r\n          {...primitiveRendererProps}\r\n        />\r\n      );\r\n  }\r\n};\r\n\r\ninterface DisplayValueProps {\r\n  isEditing?: boolean;\r\n  propertyRecord: PropertyRecord;\r\n\r\n  orientation: Orientation;\r\n  columnRatio?: number;\r\n  /** Pass width to rerender component as property grid width changes */\r\n  width?: number;\r\n  indentation?: number;\r\n  propertyValueRendererManager?: PropertyValueRendererManager;\r\n  isExpanded?: boolean;\r\n  onExpansionToggled?: () => void;\r\n  onHeightChanged?: (newHeight: number) => void;\r\n\r\n  category?: PropertyCategory;\r\n  onEditCancel?: () => void;\r\n  onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;\r\n\r\n  highlight?: HighlightingComponentProps & { applyOnLabel: boolean, applyOnValue: boolean };\r\n}\r\n\r\nconst DisplayValue: React.FC<DisplayValueProps> = (props) => {\r\n  useResetHeightOnEdit(props.isEditing, props.onHeightChanged);\r\n\r\n  if (props.isEditing) {\r\n    const _onEditCommit = (args: PropertyUpdatedArgs) => {\r\n      /* istanbul ignore else */\r\n      if (props.category)\r\n        props.onEditCommit?.(args, props.category);\r\n    };\r\n\r\n    return (\r\n      <EditorContainer\r\n        propertyRecord={props.propertyRecord}\r\n        onCommit={_onEditCommit}\r\n        onCancel={props.onEditCancel ?? (/* istanbul ignore next */() => { })}\r\n        setFocus={true}\r\n      />\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      {\r\n        CommonPropertyRenderer.createNewDisplayValue(\r\n          props.orientation,\r\n          props.propertyRecord,\r\n          props.indentation,\r\n          props.propertyValueRendererManager,\r\n          props.isExpanded,\r\n          props.onExpansionToggled,\r\n          props.onHeightChanged,\r\n          props.highlight\r\n        )\r\n      }\r\n    </>\r\n  );\r\n};\r\n\r\nfunction useResetHeightOnEdit(isEditing?: boolean, onHeightChanged?: (newHeight: number) => void) {\r\n  const previousEditingStatusRef = React.useRef(isEditing);\r\n  React.useEffect(() => {\r\n    if (!previousEditingStatusRef.current && isEditing) {\r\n      onHeightChanged?.(27);\r\n    }\r\n\r\n    previousEditingStatusRef.current = isEditing;\r\n  });\r\n}\r\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 type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport type { Orientation } from \"@itwin/core-react\";\nimport type { HighlightingComponentProps } from \"../../../common/HighlightingComponentProps\";\nimport type { PropertyUpdatedArgs } from \"../../../editors/EditorContainer\";\nimport { EditorContainer } from \"../../../editors/EditorContainer\";\nimport { CommonPropertyRenderer } from \"../../../properties/renderers/CommonPropertyRenderer\";\nimport type { PrimitiveRendererProps } from \"../../../properties/renderers/PrimitivePropertyRenderer\";\nimport { PrimitivePropertyRenderer } from \"../../../properties/renderers/PrimitivePropertyRenderer\";\nimport type { SharedRendererProps } from \"../../../properties/renderers/PropertyRenderer\";\nimport type { PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\nimport type { 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?: (\n    args: PropertyUpdatedArgs,\n    category: PropertyCategory\n  ) => 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 & {\n    applyOnLabel: boolean;\n    applyOnValue: boolean;\n  };\n\n  children?: never;\n}\n\n/**  A React component that renders flat properties\n * @internal\n */\nexport const FlatPropertyRenderer: React.FC<FlatPropertyRendererProps> = (\n  props\n) => {\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 (\n        <PrimitivePropertyRenderer\n          highlight={highlight?.applyOnLabel ? highlight : undefined}\n          {...primitiveRendererProps}\n        />\n      );\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 (\n          <PrimitivePropertyRenderer\n            highlight={highlight?.applyOnLabel ? highlight : undefined}\n            {...primitiveRendererProps}\n          />\n        );\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?: (\n    args: PropertyUpdatedArgs,\n    category: PropertyCategory\n  ) => void;\n\n  highlight?: HighlightingComponentProps & {\n    applyOnLabel: boolean;\n    applyOnValue: boolean;\n  };\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) 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      {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\nfunction useResetHeightOnEdit(\n  isEditing?: boolean,\n  onHeightChanged?: (newHeight: number) => void\n) {\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.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;AAI/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"}
+{"version":3,"file":"SelectableContent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/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,CACzC,KAAK,EAAE,gCAAgC,eA0CxC;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,eAiB9D"}

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

@@ -1,9 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/* eslint-disable deprecation/deprecation */
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module SelectableContent
  */
@@ -42,12 +41,11 @@ const itwinui_react_1 = require("@itwin/itwinui-react");
  * @public
  */
 function ControlledSelectableContent(props) {
-    var _a;
     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,
@@ -55,9 +53,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, disabled: disabled })),
-        React.createElement("div", { className: "components-selectable-content-wrapper" }, selectedContent === null || selectedContent === void 0 ? void 0 : selectedContent.render())));
+        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, disabled: disabled }))),
+        React.createElement("div", { className: "components-selectable-content-wrapper" }, selectedContent?.render())));
 }
 exports.ControlledSelectableContent = ControlledSelectableContent;
 /**

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;AAE/B,wDAA8C;AAyB9C;;;;;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,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,EAChB,QAAQ,EAAE,QAAQ,GAClB,CAEA;QACN,6BAAK,SAAS,EAAC,uCAAuC,IACnD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,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":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module SelectableContent\r\n */\r\n\r\nimport \"./SelectableContent.scss\";\r\nimport * as React from \"react\";\r\nimport type { SelectOption } from \"@itwin/itwinui-react\";\r\nimport { Select } from \"@itwin/itwinui-react\";\r\n\r\n/**\r\n * A definition for content displayed in [[ControlledSelectableContent]] and\r\n * [[SelectableContent]] components.\r\n * @public\r\n */\r\nexport interface SelectableContentDefinition {\r\n  id: string;\r\n  label: string;\r\n  render: () => React.ReactNode;\r\n}\r\n\r\n/**\r\n * [[ControlledSelectableContent]] component properties\r\n * @public\r\n */\r\nexport interface ControlledSelectableContentProps {\r\n  selectedContentId: string;\r\n  onSelectedContentIdChanged?: (contentId: string) => void;\r\n  children: SelectableContentDefinition[];\r\n  selectAriaLabel?: string;\r\n  disabled?: boolean;\r\n}\r\n\r\n/**\r\n * A fully-controlled component that accepts a list of child components with ids and labels and\r\n * renders a select box at the top, allowing to choose which of the provided child components\r\n * should be rendered at the bottom.\r\n * @public\r\n */\r\nexport function ControlledSelectableContent(props: ControlledSelectableContentProps) {\r\n  const { onSelectedContentIdChanged, disabled } = props;\r\n\r\n  const onContentIdSelected = React.useCallback((newValue: string): void => {\r\n    onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);\r\n  }, [onSelectedContentIdChanged]);\r\n\r\n  const selectedContent = props.children.find((contentDef) => contentDef.id === props.selectedContentId) ?? props.children[0];\r\n  const options = React.useMemo(() => {\r\n    return props.children.map((componentDef) => ({\r\n      label: componentDef.label,\r\n      value: componentDef.id,\r\n    })) as SelectOption<string>[];\r\n  }, [props.children]);\r\n\r\n  return (\r\n    <div className=\"components-selectable-content\">\r\n      <div className=\"components-selectable-content-header\">\r\n        {options.length > 0 &&\r\n          <Select onChange={onContentIdSelected} size=\"small\"\r\n            className=\"components-selectable-content-selector\"\r\n            aria-label={props.selectAriaLabel}\r\n            value={selectedContent.id}\r\n            options={options}\r\n            disabled={disabled}\r\n          />\r\n        }\r\n      </div>\r\n      <div className=\"components-selectable-content-wrapper\">\r\n        {selectedContent?.render()}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\n/**\r\n * [[SelectableContent]] component properties\r\n * @public\r\n */\r\nexport interface SelectableContentProps {\r\n  defaultSelectedContentId: string;\r\n  children: SelectableContentDefinition[];\r\n  selectAriaLabel?: string;\r\n  disabled?: boolean;\r\n}\r\n\r\n/**\r\n * An uncontrolled component that accepts a list of child components with ids and labels and\r\n * renders a select box at the top, allowing to choose which of the provided child components\r\n * should be rendered at the bottom.\r\n * @public\r\n */\r\nexport function SelectableContent(props: SelectableContentProps) {\r\n  const [selectedContentId, setSelectedContentId] = React.useState(props.defaultSelectedContentId);\r\n  const onSelectedContentIdChanged = React.useCallback((id: string) => {\r\n    setSelectedContentId(id);\r\n  }, []);\r\n  return (\r\n    <ControlledSelectableContent selectedContentId={selectedContentId} onSelectedContentIdChanged={onSelectedContentIdChanged} selectAriaLabel={props.selectAriaLabel} disabled={props.disabled}>\r\n      {props.children}\r\n    </ControlledSelectableContent>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,oCAAkC;AAClC,6CAA+B;AAE/B,wDAA8C;AAyB9C;;;;;GAKG;AACH,SAAgB,2BAA2B,CACzC,KAAuC;IAEvC,MAAM,EAAE,0BAA0B,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEvD,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAC3C,CAAC,QAAgB,EAAQ,EAAE;QACzB,0BAA0B,IAAI,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IACrE,CAAC,EACD,CAAC,0BAA0B,CAAC,CAC7B,CAAC;IAEF,MAAM,eAAe,GACnB,KAAK,CAAC,QAAQ,CAAC,IAAI,CACjB,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,CAAC,iBAAiB,CAC1D,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACzB,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,IAAI,CACrB,oBAAC,sBAAM,IACL,QAAQ,EAAE,mBAAmB,EAC7B,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,wCAAwC,gBACtC,KAAK,CAAC,eAAe,EACjC,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,CACH,CACG;QACN,6BAAK,SAAS,EAAC,uCAAuC,IACnD,eAAe,EAAE,MAAM,EAAE,CACtB,CACF,CACP,CAAC;AACJ,CAAC;AA3CD,kEA2CC;AAaD;;;;;GAKG;AACH,SAAgB,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAC9D,KAAK,CAAC,wBAAwB,CAC/B,CAAC;IACF,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,IAC1B,iBAAiB,EAAE,iBAAiB,EACpC,0BAA0B,EAAE,0BAA0B,EACtD,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAEvB,KAAK,CAAC,QAAQ,CACa,CAC/B,CAAC;AACJ,CAAC;AAjBD,8CAiBC","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 SelectableContent\n */\n\nimport \"./SelectableContent.scss\";\nimport * as React from \"react\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Select } 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(\n  props: ControlledSelectableContentProps\n) {\n  const { onSelectedContentIdChanged, disabled } = props;\n\n  const onContentIdSelected = React.useCallback(\n    (newValue: string): void => {\n      onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);\n    },\n    [onSelectedContentIdChanged]\n  );\n\n  const selectedContent =\n    props.children.find(\n      (contentDef) => contentDef.id === props.selectedContentId\n    ) ?? 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\n            onChange={onContentIdSelected}\n            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(\n    props.defaultSelectedContentId\n  );\n  const onSelectedContentIdChanged = React.useCallback((id: string) => {\n    setSelectedContentId(id);\n  }, []);\n  return (\n    <ControlledSelectableContent\n      selectedContentId={selectedContentId}\n      onSelectedContentIdChanged={onSelectedContentIdChanged}\n      selectAriaLabel={props.selectAriaLabel}\n      disabled={props.disabled}\n    >\n      {props.children}\n    </ControlledSelectableContent>\n  );\n}\n"]}

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

@@ -1,20 +1,20 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-.components-selectable-content {
-  display: flex;
-  flex-direction: column;
-
-  .components-selectable-content-header {
-    .components-selectable-content-selector {
-      width: 100%;
-    }
-  }
-
-  .components-selectable-content-wrapper {
-    flex-grow: 1;
-    overflow: hidden;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.components-selectable-content {
+  display: flex;
+  flex-direction: column;
+
+  .components-selectable-content-header {
+    .components-selectable-content-selector {
+      width: 100%;
+    }
+  }
+
+  .components-selectable-content-wrapper {
+    flex-grow: 1;
+    overflow: hidden;
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Item.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,mBAAmB;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC7C,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sJAAsJ;IACtJ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AAEH,eAAO,MAAM,iBAAiB,6DAgC1B,CAAC"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Item.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,mBAAmB;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC7C,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sJAAsJ;IACtJ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AAEH,eAAO,MAAM,iBAAiB,6DA4B7B,CAAC"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Toolbar
  */
@@ -45,7 +45,6 @@ exports.ToolbarButtonItem = React.memo((props) => {
     const className = (0, classnames_1.default)("components-toolbar-button-item", props.isActive && "components-active", props.isDisabled && "components-disabled", props.className);
     return (React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "action-tool-button", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, disabled: props.isDisabled, onClick: props.onClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: props.title },
         React.createElement("div", { className: "components-icon" }, props.icon),
-        props.badge &&
-            React.createElement("div", { className: "components-badge" }, props.badge)));
+        props.badge && React.createElement("div", { className: "components-badge" }, props.badge)));
 });
 //# sourceMappingURL=Item.js.map

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":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Toolbar\r\n */\r\n\r\nimport \"./Item.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport type { CommonProps } from \"@itwin/core-react\";\r\n\r\n/** Properties of [[ToolbarButtonItem]] component.\r\n * @public\r\n */\r\nexport interface ToolbarButtonItemProps extends CommonProps {\r\n  /** button icon. */\r\n  icon?: React.ReactNode;\r\n  /** Describes if item is active. */\r\n  isActive?: boolean;\r\n  /** Describes if the item is disabled. */\r\n  isDisabled?: boolean;\r\n  /** Function called when the item is clicked. */\r\n  onClick?: () => void;\r\n  /** Function called when a key is pressed. */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /** Title for the item. */\r\n  title: string;\r\n  /** A badge to draw. */\r\n  badge?: React.ReactNode;\r\n  /** If true add a gap before button. Default to false. */\r\n  addGroupSeparator?: boolean;\r\n  /** value added to DOM element as a data attribute to hold name of items provider. If specified in `FrontstageProvider` then this will be undefined */\r\n  providerId?: string;\r\n  /** value added to DOM element as a data attribute, shows 0 is undefined */\r\n  itemPriority?: number;\r\n  /** value added to DOM element as a data attribute */\r\n  groupPriority?: number;\r\n}\r\n\r\n/** Toolbar item component. Used in [[Toolbar]] component.\r\n * @public\r\n */\r\n// eslint-disable-next-line react/display-name\r\nexport const ToolbarButtonItem = React.memo<React.FC<ToolbarButtonItemProps>>(\r\n  (props: ToolbarButtonItemProps) => {\r\n    const className = classnames(\r\n      \"components-toolbar-button-item\",\r\n      props.isActive && \"components-active\",\r\n      props.isDisabled && \"components-disabled\",\r\n      props.className);\r\n\r\n    return (\r\n      <button\r\n        data-item-id={props.itemId}\r\n        data-item-type=\"action-tool-button\"\r\n        data-item-group-priority={props.groupPriority}\r\n        data-item-priority={props.itemPriority}\r\n        data-item-provider-id={props.providerId}\r\n        disabled={props.isDisabled}  // this is needed to prevent focusing/keyboard access to disabled buttons\r\n        onClick={props.onClick}\r\n        onKeyDown={props.onKeyDown}\r\n        className={className}\r\n        style={props.style}\r\n        title={props.title}\r\n      >\r\n        <div className=\"components-icon\">\r\n          {props.icon}\r\n        </div>\r\n        {props.badge &&\r\n          <div className=\"components-badge\">\r\n            {props.badge}\r\n          </div>\r\n        }\r\n      </button>\r\n    );\r\n  });\r\n"]}
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Item.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;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,CAChB,CAAC;IAEF,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,IAAE,KAAK,CAAC,IAAI,CAAO;QAClD,KAAK,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,KAAK,CAAO,CAC9D,CACV,CAAC;AACJ,CAAC,CACF,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 type { 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\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\">{props.icon}</div>\n        {props.badge && <div className=\"components-badge\">{props.badge}</div>}\n      </button>\n    );\n  }\n);\n"]}

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

@@ -1,92 +1,94 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "variables";
-
-.components-toolbar-button-item {
-  box-sizing: border-box;
-  background-origin: border-box;
-  border-color: transparent;
-  border-style: solid;
-  border-radius: var(--iui-border-radius-1);
-  cursor: pointer;
-  transition: background-color var(--iui-duration-1) ease;
-  position: relative;
-  background: transparent;
-  height: 100%;
-  width: 100%;
-  outline-style: solid;
-  outline-width: 0;
-
-  > .components-icon {
-    font-size: $icon-size;
-    width: 100%;
-    height: 100%;
-    display: grid;
-    align-content: center;
-    justify-content: center;
-    color: var(--iui-color-icon);
-    transition: color var(--iui-duration-1) ease;
-
-    img {
-      width: $icon-size;
-      height: $icon-size;
-    }
-  }
-
-  &:not(.components-disabled) > .components-icon {
-    filter: $icon-shadow;
-  }
-
-  &:focus-visible:not(.components-disabled):not(.components-active),
-  &:hover:not(.components-disabled):not(.components-active),
-  &:active:not(.components-disabled):not(.components-active) {
-    color: var(--iui-color-icon-hover);
-    background-color: var(--iui-color-background-transparent-hover);
-  }
-
-  &.components-active {
-    color: var(--iui-color-icon-accent);
-    background-color: var(--iui-color-background-accent-muted);
-    // background-color: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-5));
-    border: solid 2px var(--iui-color-border-accent);
-
-    &:not(:active):not(.components-disabled) {
-      transition-duration: 0s;
-
-      > .components-icon {
-        color: var(--iui-color-icon-accent);
-        transition-duration: var(--iui-duration-1);
-        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
-      }
-    }
-  }
-
-  &.components-disabled {
-    cursor: not-allowed;
-
-    > .components-icon {
-      color: var(--iui-color-icon-disabled);
-    }
-
-    &:hover {
-      cursor: auto;
-    }
-
-    &:active {
-      pointer-events: none;
-    }
-  }
-
-  > .components-badge {
-    display: none;
-  }
-}
-
-div.components-toolbar-items-container.components-toolbar-show-decorators .components-toolbar-button-item>.components-badge {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+.components-toolbar-button-item {
+  box-sizing: border-box;
+  background-origin: border-box;
+  border-color: transparent;
+  border-style: solid;
+  border-radius: var(--iui-border-radius-1);
+  cursor: pointer;
+  transition: background-color var(--iui-duration-1) ease;
+  position: relative;
+  background: transparent;
+  height: 100%;
+  width: 100%;
+  outline-style: solid;
+  outline-width: 0;
+
+  > .components-icon {
+    font-size: $icon-size;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    color: var(--iui-color-icon);
+    transition: color var(--iui-duration-1) ease;
+
+    img {
+      width: $icon-size;
+      height: $icon-size;
+    }
+  }
+
+  &:not(.components-disabled) > .components-icon {
+    filter: $icon-shadow;
+  }
+
+  &:focus-visible:not(.components-disabled):not(.components-active),
+  &:hover:not(.components-disabled):not(.components-active),
+  &:active:not(.components-disabled):not(.components-active) {
+    color: var(--iui-color-icon-hover);
+    background-color: var(--iui-color-background-transparent-hover);
+  }
+
+  &.components-active {
+    color: var(--iui-color-icon-accent);
+    background-color: var(--iui-color-background-accent-muted);
+    // background-color: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-5));
+    border: solid 2px var(--iui-color-border-accent);
+
+    &:not(:active):not(.components-disabled) {
+      transition-duration: 0s;
+
+      > .components-icon {
+        color: var(--iui-color-icon-accent);
+        transition-duration: var(--iui-duration-1);
+        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
+      }
+    }
+  }
+
+  &.components-disabled {
+    cursor: not-allowed;
+
+    > .components-icon {
+      color: var(--iui-color-icon-disabled);
+    }
+
+    &:hover {
+      cursor: auto;
+    }
+
+    &:active {
+      pointer-events: none;
+    }
+  }
+
+  > .components-badge {
+    display: none;
+  }
+}
+
+div.components-toolbar-items-container.components-toolbar-show-decorators
+  .components-toolbar-button-item
+  > .components-badge {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"ItemWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAKpD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAoBlD;AAED,gBAAgB;AAChB,wBAAgB,gCAAgC,CAAC,CAAC,SAAS,OAAO,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAAE,SAAS,EAAE,OAAO,sCAOvH"}
+{"version":3,"file":"ItemWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWrD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAwBlD;AAED,gBAAgB;AAChB,wBAAgB,gCAAgC,CAAC,CAAC,SAAS,OAAO,EAChE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAChC,SAAS,EAAE,OAAO,sCAUnB"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module ToolSettings
  */

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;AAE/B,kDAAsD;AACtD,+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":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module ToolSettings\r\n */\r\n\r\nimport \"./ItemWrapper.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport type { CommonProps} from \"@itwin/core-react\";\r\nimport { useResizeObserver } from \"@itwin/core-react\";\r\nimport { useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\r\nimport { DirectionHelpers, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\r\n\r\n/** Properties of [[ItemWrapper]] component.\r\n * @internal future\r\n */\r\nexport interface ItemWrapperProps extends CommonProps {\r\n  /** Tool setting content. */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** Used in a [[ItemWrapper]] component to display a setting.\r\n * @internal future\r\n */\r\nexport function ItemWrapper(props: ItemWrapperProps) {\r\n  const { expandsTo, direction, overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();\r\n  const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();\r\n  const ref = useResizeObserverSingleDimension<HTMLDivElement>(onResize, useHeight);\r\n  const className = classnames(\r\n    \"components-toolbar-item-container\",\r\n    hasOverflow && \"components-overflown\",\r\n    OrthogonalDirectionHelpers.getCssClassName(hasOverflow ? overflowDirection : direction),\r\n    DirectionHelpers.getCssClassName(hasOverflow ? overflowExpandsTo : expandsTo),\r\n    props.className,\r\n  );\r\n  return (\r\n    <div\r\n      className={className}\r\n      ref={ref}\r\n      style={props.style}\r\n    >\r\n      {props.children}\r\n    </div>\r\n  );\r\n}\r\n\r\n/** @internal */\r\nexport function useResizeObserverSingleDimension<T extends Element>(onResize: (size: number) => void, useHeight: boolean) {\r\n  const handleResize = React.useCallback((w: number, h: number) => {\r\n    if (useHeight)\r\n      return onResize(h);\r\n    return onResize(w);\r\n  }, [useHeight, onResize]);\r\n  return useResizeObserver<T>(handleResize);\r\n}\r\n"]}
+{"version":3,"file":"ItemWrapper.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,8BAA4B;AAC5B,4DAAoC;AACpC,6CAA+B;AAE/B,kDAAsD;AACtD,+DAG+B;AAC/B,qDAG+B;AAU/B;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAClE,IAAA,4DAAsC,GAAE,CAAC;IAC3C,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,6CAAuB,GAAE,CAAC;IACvE,MAAM,GAAG,GAAG,gCAAgC,CAC1C,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,WAAW,IAAI,sBAAsB,EACrC,sCAA0B,CAAC,eAAe,CACxC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAC5C,EACD,4BAAgB,CAAC,eAAe,CAC9B,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAC5C,EACD,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACpD,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAxBD,kCAwBC;AAED,gBAAgB;AAChB,SAAgB,gCAAgC,CAC9C,QAAgC,EAChC,SAAkB;IAElB,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACvB,IAAI,SAAS;YAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;QAClC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,CAAC,CACtB,CAAC;IACF,OAAO,IAAA,8BAAiB,EAAI,YAAY,CAAC,CAAC;AAC5C,CAAC;AAZD,4EAYC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ToolSettings\n */\n\nimport \"./ItemWrapper.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\nimport {\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./ToolbarWithOverflow\";\nimport {\n  DirectionHelpers,\n  OrthogonalDirectionHelpers,\n} from \"./utilities/Direction\";\n\n/** Properties of [[ItemWrapper]] component.\n * @internal future\n */\nexport interface ItemWrapperProps extends CommonProps {\n  /** Tool setting content. */\n  children?: React.ReactNode;\n}\n\n/** Used in a [[ItemWrapper]] component to display a setting.\n * @internal future\n */\nexport function ItemWrapper(props: ItemWrapperProps) {\n  const { expandsTo, direction, overflowExpandsTo, overflowDirection } =\n    useToolbarWithOverflowDirectionContext();\n  const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();\n  const ref = useResizeObserverSingleDimension<HTMLDivElement>(\n    onResize,\n    useHeight\n  );\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    hasOverflow && \"components-overflown\",\n    OrthogonalDirectionHelpers.getCssClassName(\n      hasOverflow ? overflowDirection : direction\n    ),\n    DirectionHelpers.getCssClassName(\n      hasOverflow ? overflowExpandsTo : expandsTo\n    ),\n    props.className\n  );\n  return (\n    <div className={className} ref={ref} style={props.style}>\n      {props.children}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useResizeObserverSingleDimension<T extends Element>(\n  onResize: (size: number) => void,\n  useHeight: boolean\n) {\n  const handleResize = React.useCallback(\n    (w: number, h: number) => {\n      if (useHeight) return onResize(h);\n      return onResize(w);\n    },\n    [useHeight, onResize]\n  );\n  return useResizeObserver<T>(handleResize);\n}\n"]}