@itwin/components-react 3.4.0-dev.43 → 3.4.0-dev.44

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

@@ -1,46 +1,46 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "../../../properties/renderers/NonPrimitivePropertyRenderer.scss";
-import * as React from "react";
-import { PropertyValueFormat } from "@itwin/appui-abstract";
-import { CommonPropertyRenderer } from "../../../properties/renderers/CommonPropertyRenderer";
-import { NonPrimitivePropertyLabelRenderer } from "../../../properties/renderers/label/NonPrimitivePropertyLabelRenderer";
-import { PropertyView } from "../../../properties/renderers/PropertyView";
-/** React Component that renders flat struct and array properties
- * @internal
- */
-export class FlatNonPrimitivePropertyRenderer extends React.Component {
-    constructor(props) {
-        super(props);
-        this._onExpanded = () => {
-            /* istanbul ignore else */
-            if (!this.props.isExpanded)
-                this.props.onExpandToggled();
-        };
-        this._onCollapsed = () => {
-            /* istanbul ignore else */
-            if (this.props.isExpanded)
-                this.props.onExpandToggled();
-        };
-    }
-    getLabel(props) {
-        const { orientation, indentation, width, columnRatio, columnInfo } = props;
-        const offset = CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.minLabelWidth);
-        let displayLabel = props.propertyRecord.property.displayLabel;
-        if (props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)
-            displayLabel = `${displayLabel} (${props.propertyRecord.value.items.length})`;
-        return (React.createElement(NonPrimitivePropertyLabelRenderer, { isExpanded: props.isExpanded, onExpand: this._onExpanded, onCollapse: this._onCollapsed, offset: offset, renderColon: false }, displayLabel));
-    }
-    /** @internal */
-    render() {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { children, indentation, ...props } = this.props;
-        return (React.createElement(PropertyView, { labelElement: this.getLabel(this.props), ...props }));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "../../../properties/renderers/NonPrimitivePropertyRenderer.scss";
+import * as React from "react";
+import { PropertyValueFormat } from "@itwin/appui-abstract";
+import { CommonPropertyRenderer } from "../../../properties/renderers/CommonPropertyRenderer";
+import { NonPrimitivePropertyLabelRenderer } from "../../../properties/renderers/label/NonPrimitivePropertyLabelRenderer";
+import { PropertyView } from "../../../properties/renderers/PropertyView";
+/** React Component that renders flat struct and array properties
+ * @internal
+ */
+export class FlatNonPrimitivePropertyRenderer extends React.Component {
+    constructor(props) {
+        super(props);
+        this._onExpanded = () => {
+            /* istanbul ignore else */
+            if (!this.props.isExpanded)
+                this.props.onExpandToggled();
+        };
+        this._onCollapsed = () => {
+            /* istanbul ignore else */
+            if (this.props.isExpanded)
+                this.props.onExpandToggled();
+        };
+    }
+    getLabel(props) {
+        const { orientation, indentation, width, columnRatio, columnInfo } = props;
+        const offset = CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.minLabelWidth);
+        let displayLabel = props.propertyRecord.property.displayLabel;
+        if (props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)
+            displayLabel = `${displayLabel} (${props.propertyRecord.value.items.length})`;
+        return (React.createElement(NonPrimitivePropertyLabelRenderer, { isExpanded: props.isExpanded, onExpand: this._onExpanded, onCollapse: this._onCollapsed, offset: offset, renderColon: false }, displayLabel));
+    }
+    /** @internal */
+    render() {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { children, indentation, ...props } = this.props;
+        return (React.createElement(PropertyView, { labelElement: this.getLabel(this.props), ...props }));
+    }
+}
 //# sourceMappingURL=FlatNonPrimitivePropertyRenderer.js.map

package/lib/esm/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,OAAO,iEAAiE,CAAC;AAEzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,sDAAsD,CAAC;AAE9F,OAAO,EAAE,iCAAiC,EAAE,MAAM,uEAAuE,CAAC;AAC1H,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAU1E;;GAEG;AACH,MAAM,OAAO,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,sBAAsB,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,mBAAmB,CAAC,KAAK;YACtE,YAAY,GAAG,GAAG,YAAY,KAAK,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;QAEhF,OAAO,CACL,oBAAC,iCAAiC,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,QAAQ,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACvD,OAAO,CACL,oBAAC,YAAY,IACX,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KACnC,KAAK,GACT,CACH,CAAC;IACJ,CAAC;CACF","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 _ from \"lodash\";\r\nimport * as React from \"react\";\r\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { CommonPropertyRenderer } from \"../../../properties/renderers/CommonPropertyRenderer\";\r\nimport { 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 { children, 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;;;+FAG+F;AAC/F;;GAEG;AACH,OAAO,iEAAiE,CAAC;AAEzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,sDAAsD,CAAC;AAE9F,OAAO,EAAE,iCAAiC,EAAE,MAAM,uEAAuE,CAAC;AAC1H,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAU1E;;GAEG;AACH,MAAM,OAAO,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,sBAAsB,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,mBAAmB,CAAC,KAAK;YACtE,YAAY,GAAG,GAAG,YAAY,KAAK,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;QAEhF,OAAO,CACL,oBAAC,iCAAiC,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,QAAQ,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACvD,OAAO,CACL,oBAAC,YAAY,IACX,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KACnC,KAAK,GACT,CACH,CAAC;IACJ,CAAC;CACF","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 { children, indentation, ...props } = this.props;\n    return (\n      <PropertyView\n        labelElement={this.getLabel(this.props)}\n        {...props}\n      />\n    );\n  }\n}\n"]}

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

@@ -1,44 +1,44 @@
-/** @packageDocumentation
- * @module PropertyGrid
- */
-import * as React from "react";
-import { HighlightingComponentProps } from "../../../common/HighlightingComponentProps";
-import { PropertyUpdatedArgs } from "../../../editors/EditorContainer";
-import { SharedRendererProps } from "../../../properties/renderers/PropertyRenderer";
-import { PropertyValueRendererManager } from "../../../properties/ValueRendererManager";
-import { PropertyCategory } from "../../PropertyDataProvider";
-/** Properties of [[FlatPropertyRenderer]] React component
- * @internal
- */
-export interface FlatPropertyRendererProps extends SharedRendererProps {
-    category?: PropertyCategory;
-    /** Custom value renderer */
-    propertyValueRendererManager?: PropertyValueRendererManager;
-    /** Multiplier of how much the property is indented to the right */
-    indentation?: number;
-    /** Indicates property is being edited
-     * @beta */
-    isEditing?: boolean;
-    /** Called when property edit is committed.
-     * @beta */
-    onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;
-    /** Called when property edit is cancelled.
-     * @beta */
-    onEditCancel?: () => void;
-    /** Whether property value is displayed in expanded state. */
-    isExpanded: boolean;
-    /** Called when toggling between expanded and collapsed property value display state. */
-    onExpansionToggled: () => void;
-    /** Reports property height changes. */
-    onHeightChanged?: (newHeight: number) => void;
-    highlight?: HighlightingComponentProps & {
-        applyOnLabel: boolean;
-        applyOnValue: boolean;
-    };
-    children?: never;
-}
-/**  A React component that renders flat properties
- * @internal
- */
-export declare const FlatPropertyRenderer: React.FC<FlatPropertyRendererProps>;
+/** @packageDocumentation
+ * @module PropertyGrid
+ */
+import * as React from "react";
+import { HighlightingComponentProps } from "../../../common/HighlightingComponentProps";
+import { PropertyUpdatedArgs } from "../../../editors/EditorContainer";
+import { SharedRendererProps } from "../../../properties/renderers/PropertyRenderer";
+import { PropertyValueRendererManager } from "../../../properties/ValueRendererManager";
+import { PropertyCategory } from "../../PropertyDataProvider";
+/** Properties of [[FlatPropertyRenderer]] React component
+ * @internal
+ */
+export interface FlatPropertyRendererProps extends SharedRendererProps {
+    category?: PropertyCategory;
+    /** Custom value renderer */
+    propertyValueRendererManager?: PropertyValueRendererManager;
+    /** Multiplier of how much the property is indented to the right */
+    indentation?: number;
+    /** Indicates property is being edited
+     * @beta */
+    isEditing?: boolean;
+    /** Called when property edit is committed.
+     * @beta */
+    onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;
+    /** Called when property edit is cancelled.
+     * @beta */
+    onEditCancel?: () => void;
+    /** Whether property value is displayed in expanded state. */
+    isExpanded: boolean;
+    /** Called when toggling between expanded and collapsed property value display state. */
+    onExpansionToggled: () => void;
+    /** Reports property height changes. */
+    onHeightChanged?: (newHeight: number) => void;
+    highlight?: HighlightingComponentProps & {
+        applyOnLabel: boolean;
+        applyOnValue: boolean;
+    };
+    children?: never;
+}
+/**  A React component that renders flat properties
+ * @internal
+ */
+export declare const FlatPropertyRenderer: React.FC<FlatPropertyRendererProps>;
 //# sourceMappingURL=FlatPropertyRenderer.d.ts.map

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

@@ -1,60 +1,60 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import * as React from "react";
-import { PropertyValueFormat } from "@itwin/appui-abstract";
-import { EditorContainer } from "../../../editors/EditorContainer";
-import { CommonPropertyRenderer } from "../../../properties/renderers/CommonPropertyRenderer";
-import { PrimitivePropertyRenderer } from "../../../properties/renderers/PrimitivePropertyRenderer";
-import { FlatNonPrimitivePropertyRenderer } from "./FlatNonPrimitivePropertyRenderer";
-/**  A React component that renders flat properties
- * @internal
- */
-export const FlatPropertyRenderer = (props) => {
-    const { category, propertyValueRendererManager, isEditing, onEditCommit, onEditCancel, onHeightChanged, highlight, ...passthroughProps } = props;
-    const valueElementRenderer = () => (React.createElement(DisplayValue, { propertyRecord: passthroughProps.propertyRecord, orientation: passthroughProps.orientation, columnRatio: passthroughProps.columnRatio, width: passthroughProps.width, category: category, propertyValueRendererManager: propertyValueRendererManager, isEditing: isEditing, onEditCommit: onEditCommit, onEditCancel: onEditCancel, isExpanded: passthroughProps.isExpanded, onExpansionToggled: passthroughProps.onExpansionToggled, onHeightChanged: onHeightChanged, highlight: highlight }));
-    const primitiveRendererProps = {
-        ...passthroughProps,
-        valueElementRenderer,
-        indentation: props.indentation,
-    };
-    switch (props.propertyRecord.value.valueFormat) {
-        case PropertyValueFormat.Primitive:
-            return (React.createElement(PrimitivePropertyRenderer, { highlight: (highlight === null || highlight === void 0 ? void 0 : highlight.applyOnLabel) ? highlight : undefined, ...primitiveRendererProps }));
-        case PropertyValueFormat.Array:
-            // If array is empty, render it as a primitive property
-            if (props.propertyRecord.value.items.length === 0)
-                return (React.createElement(PrimitivePropertyRenderer, { highlight: (highlight === null || highlight === void 0 ? void 0 : highlight.applyOnLabel) ? highlight : undefined, ...primitiveRendererProps }));
-        // eslint-disable-next-line no-fallthrough
-        case PropertyValueFormat.Struct:
-            return (React.createElement(FlatNonPrimitivePropertyRenderer, { isExpanded: props.isExpanded, onExpandToggled: props.onExpansionToggled, ...primitiveRendererProps }));
-    }
-};
-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);
-        };
-        return (React.createElement(EditorContainer, { propertyRecord: props.propertyRecord, onCommit: _onEditCommit, onCancel: (_a = props.onEditCancel) !== null && _a !== void 0 ? _a : ( /* istanbul ignore next */() => { }), setFocus: true }));
-    }
-    return (React.createElement(React.Fragment, null, CommonPropertyRenderer.createNewDisplayValue(props.orientation, props.propertyRecord, props.indentation, props.propertyValueRendererManager, props.isExpanded, props.onExpansionToggled, props.onHeightChanged, props.highlight)));
-};
-function useResetHeightOnEdit(isEditing, onHeightChanged) {
-    const previousEditingStatusRef = React.useRef(isEditing);
-    React.useEffect(() => {
-        if (!previousEditingStatusRef.current && isEditing) {
-            onHeightChanged === null || onHeightChanged === void 0 ? void 0 : onHeightChanged(27);
-        }
-        previousEditingStatusRef.current = isEditing;
-    });
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import { PropertyValueFormat } from "@itwin/appui-abstract";
+import { EditorContainer } from "../../../editors/EditorContainer";
+import { CommonPropertyRenderer } from "../../../properties/renderers/CommonPropertyRenderer";
+import { PrimitivePropertyRenderer } from "../../../properties/renderers/PrimitivePropertyRenderer";
+import { FlatNonPrimitivePropertyRenderer } from "./FlatNonPrimitivePropertyRenderer";
+/**  A React component that renders flat properties
+ * @internal
+ */
+export const FlatPropertyRenderer = (props) => {
+    const { category, propertyValueRendererManager, isEditing, onEditCommit, onEditCancel, onHeightChanged, highlight, ...passthroughProps } = props;
+    const valueElementRenderer = () => (React.createElement(DisplayValue, { propertyRecord: passthroughProps.propertyRecord, orientation: passthroughProps.orientation, columnRatio: passthroughProps.columnRatio, width: passthroughProps.width, category: category, propertyValueRendererManager: propertyValueRendererManager, isEditing: isEditing, onEditCommit: onEditCommit, onEditCancel: onEditCancel, isExpanded: passthroughProps.isExpanded, onExpansionToggled: passthroughProps.onExpansionToggled, onHeightChanged: onHeightChanged, highlight: highlight }));
+    const primitiveRendererProps = {
+        ...passthroughProps,
+        valueElementRenderer,
+        indentation: props.indentation,
+    };
+    switch (props.propertyRecord.value.valueFormat) {
+        case PropertyValueFormat.Primitive:
+            return (React.createElement(PrimitivePropertyRenderer, { highlight: (highlight === null || highlight === void 0 ? void 0 : highlight.applyOnLabel) ? highlight : undefined, ...primitiveRendererProps }));
+        case PropertyValueFormat.Array:
+            // If array is empty, render it as a primitive property
+            if (props.propertyRecord.value.items.length === 0)
+                return (React.createElement(PrimitivePropertyRenderer, { highlight: (highlight === null || highlight === void 0 ? void 0 : highlight.applyOnLabel) ? highlight : undefined, ...primitiveRendererProps }));
+        // eslint-disable-next-line no-fallthrough
+        case PropertyValueFormat.Struct:
+            return (React.createElement(FlatNonPrimitivePropertyRenderer, { isExpanded: props.isExpanded, onExpandToggled: props.onExpansionToggled, ...primitiveRendererProps }));
+    }
+};
+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);
+        };
+        return (React.createElement(EditorContainer, { propertyRecord: props.propertyRecord, onCommit: _onEditCommit, onCancel: (_a = props.onEditCancel) !== null && _a !== void 0 ? _a : ( /* istanbul ignore next */() => { }), setFocus: true }));
+    }
+    return (React.createElement(React.Fragment, null, CommonPropertyRenderer.createNewDisplayValue(props.orientation, props.propertyRecord, props.indentation, props.propertyValueRendererManager, props.isExpanded, props.onExpansionToggled, props.onHeightChanged, props.highlight)));
+};
+function useResetHeightOnEdit(isEditing, onHeightChanged) {
+    const previousEditingStatusRef = React.useRef(isEditing);
+    React.useEffect(() => {
+        if (!previousEditingStatusRef.current && isEditing) {
+            onHeightChanged === null || onHeightChanged === void 0 ? void 0 : onHeightChanged(27);
+        }
+        previousEditingStatusRef.current = isEditing;
+    });
+}
 //# sourceMappingURL=FlatPropertyRenderer.js.map

package/lib/esm/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 { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { Orientation } from \"@itwin/core-react\";\r\nimport { HighlightingComponentProps } from \"../../../common/HighlightingComponentProps\";\r\nimport { EditorContainer, PropertyUpdatedArgs } from \"../../../editors/EditorContainer\";\r\nimport { CommonPropertyRenderer } from \"../../../properties/renderers/CommonPropertyRenderer\";\r\nimport { PrimitivePropertyRenderer, PrimitiveRendererProps } from \"../../../properties/renderers/PrimitivePropertyRenderer\";\r\nimport { SharedRendererProps } from \"../../../properties/renderers/PropertyRenderer\";\r\nimport { PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\r\nimport { 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   * @beta */\r\n  isEditing?: boolean;\r\n  /** Called when property edit is committed.\r\n   * @beta */\r\n  onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;\r\n  /** Called when property edit is cancelled.\r\n   * @beta */\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 { 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"]}

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

@@ -1,49 +1,49 @@
-/** @packageDocumentation
- * @module SelectableContent
- */
-import "./SelectableContent.scss";
-import * as React from "react";
-/**
- * A definition for content displayed in [[ControlledSelectableContent]] and
- * [[SelectableContent]] components.
- * @public
- */
-export interface SelectableContentDefinition {
-    id: string;
-    label: string;
-    render: () => React.ReactNode;
-}
-/**
- * [[ControlledSelectableContent]] component properties
- * @public
- */
-export interface ControlledSelectableContentProps {
-    selectedContentId: string;
-    onSelectedContentIdChanged?: (contentId: string) => void;
-    children: SelectableContentDefinition[];
-    selectAriaLabel?: string;
-}
-/**
- * A fully-controlled component that accepts a list of child components with ids and labels and
- * renders a select box at the top, allowing to choose which of the provided child components
- * should be rendered at the bottom.
- * @public
- */
-export declare function ControlledSelectableContent(props: ControlledSelectableContentProps): JSX.Element;
-/**
- * [[SelectableContent]] component properties
- * @public
- */
-export interface SelectableContentProps {
-    defaultSelectedContentId: string;
-    children: SelectableContentDefinition[];
-    selectAriaLabel?: string;
-}
-/**
- * An uncontrolled component that accepts a list of child components with ids and labels and
- * renders a select box at the top, allowing to choose which of the provided child components
- * should be rendered at the bottom.
- * @public
- */
-export declare function SelectableContent(props: SelectableContentProps): JSX.Element;
+/** @packageDocumentation
+ * @module SelectableContent
+ */
+import "./SelectableContent.scss";
+import * as React from "react";
+/**
+ * A definition for content displayed in [[ControlledSelectableContent]] and
+ * [[SelectableContent]] components.
+ * @public
+ */
+export interface SelectableContentDefinition {
+    id: string;
+    label: string;
+    render: () => React.ReactNode;
+}
+/**
+ * [[ControlledSelectableContent]] component properties
+ * @public
+ */
+export interface ControlledSelectableContentProps {
+    selectedContentId: string;
+    onSelectedContentIdChanged?: (contentId: string) => void;
+    children: SelectableContentDefinition[];
+    selectAriaLabel?: string;
+}
+/**
+ * A fully-controlled component that accepts a list of child components with ids and labels and
+ * renders a select box at the top, allowing to choose which of the provided child components
+ * should be rendered at the bottom.
+ * @public
+ */
+export declare function ControlledSelectableContent(props: ControlledSelectableContentProps): JSX.Element;
+/**
+ * [[SelectableContent]] component properties
+ * @public
+ */
+export interface SelectableContentProps {
+    defaultSelectedContentId: string;
+    children: SelectableContentDefinition[];
+    selectAriaLabel?: string;
+}
+/**
+ * An uncontrolled component that accepts a list of child components with ids and labels and
+ * renders a select box at the top, allowing to choose which of the provided child components
+ * should be rendered at the bottom.
+ * @public
+ */
+export declare function SelectableContent(props: SelectableContentProps): JSX.Element;
 //# sourceMappingURL=SelectableContent.d.ts.map

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

@@ -1,49 +1,49 @@
-/*---------------------------------------------------------------------------------------------
-* 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 */
-/** @packageDocumentation
- * @module SelectableContent
- */
-import "./SelectableContent.scss";
-import * as React from "react";
-import { Select } from "@itwin/itwinui-react";
-/**
- * A fully-controlled component that accepts a list of child components with ids and labels and
- * renders a select box at the top, allowing to choose which of the provided child components
- * should be rendered at the bottom.
- * @public
- */
-export function ControlledSelectableContent(props) {
-    var _a;
-    const { onSelectedContentIdChanged } = 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 options = React.useMemo(() => {
-        return props.children.map((componentDef) => ({
-            label: componentDef.label,
-            value: componentDef.id,
-        }));
-    }, [props.children]);
-    return (React.createElement("div", { className: "components-selectable-content" },
-        React.createElement("div", { className: "components-selectable-content-header" }, options.length > 0 &&
-            React.createElement(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())));
-}
-/**
- * An uncontrolled component that accepts a list of child components with ids and labels and
- * renders a select box at the top, allowing to choose which of the provided child components
- * should be rendered at the bottom.
- * @public
- */
-export function SelectableContent(props) {
-    const [selectedContentId, setSelectedContentId] = React.useState(props.defaultSelectedContentId);
-    const onSelectedContentIdChanged = React.useCallback((id) => {
-        setSelectedContentId(id);
-    }, []);
-    return (React.createElement(ControlledSelectableContent, { selectedContentId: selectedContentId, onSelectedContentIdChanged: onSelectedContentIdChanged, selectAriaLabel: props.selectAriaLabel }, props.children));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 */
+/** @packageDocumentation
+ * @module SelectableContent
+ */
+import "./SelectableContent.scss";
+import * as React from "react";
+import { Select } from "@itwin/itwinui-react";
+/**
+ * A fully-controlled component that accepts a list of child components with ids and labels and
+ * renders a select box at the top, allowing to choose which of the provided child components
+ * should be rendered at the bottom.
+ * @public
+ */
+export function ControlledSelectableContent(props) {
+    var _a;
+    const { onSelectedContentIdChanged } = 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 options = React.useMemo(() => {
+        return props.children.map((componentDef) => ({
+            label: componentDef.label,
+            value: componentDef.id,
+        }));
+    }, [props.children]);
+    return (React.createElement("div", { className: "components-selectable-content" },
+        React.createElement("div", { className: "components-selectable-content-header" }, options.length > 0 &&
+            React.createElement(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())));
+}
+/**
+ * An uncontrolled component that accepts a list of child components with ids and labels and
+ * renders a select box at the top, allowing to choose which of the provided child components
+ * should be rendered at the bottom.
+ * @public
+ */
+export function SelectableContent(props) {
+    const [selectedContentId, setSelectedContentId] = React.useState(props.defaultSelectedContentId);
+    const onSelectedContentIdChanged = React.useCallback((id) => {
+        setSelectedContentId(id);
+    }, []);
+    return (React.createElement(ControlledSelectableContent, { selectedContentId: selectedContentId, onSelectedContentIdChanged: onSelectedContentIdChanged, selectAriaLabel: props.selectAriaLabel }, props.children));
+}
 //# sourceMappingURL=SelectableContent.js.map

package/lib/esm/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,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAwB5D;;;;;GAKG;AACH,MAAM,UAAU,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,MAAM,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;AAYD;;;;;GAKG;AACH,MAAM,UAAU,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","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 { Select, SelectOption } 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}\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 } = 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          />\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}\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}>\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;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAwB5D;;;;;GAKG;AACH,MAAM,UAAU,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,MAAM,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;AAYD;;;;;GAKG;AACH,MAAM,UAAU,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","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"]}