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

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

@@ -24,27 +24,25 @@ export const FlatPropertyRenderer = (props) => {
     };
     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 }));
+            return (React.createElement(PrimitivePropertyRenderer, { highlight: 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 }));
+                return (React.createElement(PrimitivePropertyRenderer, { highlight: 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);
+                props.onEditCommit?.(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(EditorContainer, { propertyRecord: props.propertyRecord, onCommit: _onEditCommit, onCancel: props.onEditCancel ?? ( /* 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)));
 };
@@ -52,7 +50,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/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":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5E,OAAO,EAAE,eAAe,EAAuB,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAE,sBAAsB,EAAE,MAAM,sDAAsD,CAAC;AAC9F,OAAO,EAAE,yBAAyB,EAA0B,MAAM,yDAAyD,CAAC;AAI5H,OAAO,EAAE,gCAAgC,EAAE,MAAM,oCAAoC,CAAC;AAgCtF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,KAAK,EAAE,EAAE;IACjF,MAAM,EACJ,QAAQ,EACR,4BAA4B,EAC5B,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,SAAS,EACT,GAAG,gBAAgB,EACpB,GAAG,KAAK,CAAC;IAEV,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACjC,oBAAC,YAAY,IACX,cAAc,EAAE,gBAAgB,CAAC,cAAc,EAC/C,WAAW,EAAE,gBAAgB,CAAC,WAAW,EACzC,WAAW,EAAE,gBAAgB,CAAC,WAAW,EACzC,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAC7B,QAAQ,EAAE,QAAQ,EAClB,4BAA4B,EAAE,4BAA4B,EAC1D,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,gBAAgB,CAAC,UAAU,EACvC,kBAAkB,EAAE,gBAAgB,CAAC,kBAAkB,EACvD,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;IAEF,MAAM,sBAAsB,GAA2B;QACrD,GAAG,gBAAgB;QACnB,oBAAoB;QACpB,WAAW,EAAE,KAAK,CAAC,WAAW;KAC/B,CAAC;IACF,QAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,EAAE;QAC9C,KAAK,mBAAmB,CAAC,SAAS;YAChC,OAAO,CAAC,oBAAC,yBAAyB,IAAC,SAAS,EAAE,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,EAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,KAAM,sBAAsB,GAAI,CAAC,CAAC;QAEjI,KAAK,mBAAmB,CAAC,KAAK;YAC5B,uDAAuD;YACvD,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;gBAC/C,OAAO,CAAC,oBAAC,yBAAyB,IAAC,SAAS,EAAE,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,EAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,KAAM,sBAAsB,GAAI,CAAC,CAAC;QAEnI,0CAA0C;QAC1C,KAAK,mBAAmB,CAAC,MAAM;YAC7B,OAAO,CACL,oBAAC,gCAAgC,IAC/B,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,eAAe,EAAE,KAAK,CAAC,kBAAkB,KACrC,sBAAsB,GAC1B,CACH,CAAC;KACL;AACH,CAAC,CAAC;AAuBF,MAAM,YAAY,GAAgC,CAAC,KAAK,EAAE,EAAE;;IAC1D,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;IAE7D,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,MAAM,aAAa,GAAG,CAAC,IAAyB,EAAE,EAAE;;YAClD,0BAA0B;YAC1B,IAAI,KAAK,CAAC,QAAQ;gBAChB,MAAA,KAAK,CAAC,YAAY,+CAAlB,KAAK,EAAgB,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC/C,CAAC,CAAC;QAEF,OAAO,CACL,oBAAC,eAAe,IACd,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAC,0BAA0B,GAAG,EAAE,GAAG,CAAC,CAAC,EACrE,QAAQ,EAAE,IAAI,GACd,CACH,CAAC;KACH;IAED,OAAO,CACL,0CAEI,sBAAsB,CAAC,qBAAqB,CAC1C,KAAK,CAAC,WAAW,EACjB,KAAK,CAAC,cAAc,EACpB,KAAK,CAAC,WAAW,EACjB,KAAK,CAAC,4BAA4B,EAClC,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,kBAAkB,EACxB,KAAK,CAAC,eAAe,EACrB,KAAK,CAAC,SAAS,CAChB,CAEF,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,oBAAoB,CAAC,SAAmB,EAAE,eAA6C;IAC9F,MAAM,wBAAwB,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IACzD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,wBAAwB,CAAC,OAAO,IAAI,SAAS,EAAE;YAClD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,EAAE,CAAC,CAAC;SACvB;QAED,wBAAwB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,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 PropertyGrid\n */\n\nimport * as React from \"react\";\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { Orientation } from \"@itwin/core-react\";\nimport { HighlightingComponentProps } from \"../../../common/HighlightingComponentProps\";\nimport { EditorContainer, PropertyUpdatedArgs } from \"../../../editors/EditorContainer\";\nimport { CommonPropertyRenderer } from \"../../../properties/renderers/CommonPropertyRenderer\";\nimport { PrimitivePropertyRenderer, PrimitiveRendererProps } from \"../../../properties/renderers/PrimitivePropertyRenderer\";\nimport { SharedRendererProps } from \"../../../properties/renderers/PropertyRenderer\";\nimport { PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\nimport { PropertyCategory } from \"../../PropertyDataProvider\";\nimport { FlatNonPrimitivePropertyRenderer } from \"./FlatNonPrimitivePropertyRenderer\";\n\n/** Properties of [[FlatPropertyRenderer]] React component\n * @internal\n */\nexport interface FlatPropertyRendererProps extends SharedRendererProps {\n  category?: PropertyCategory;\n  /** Custom value renderer */\n  propertyValueRendererManager?: PropertyValueRendererManager;\n  /** Multiplier of how much the property is indented to the right */\n  indentation?: number;\n  /** Indicates property is being edited\n   * @beta */\n  isEditing?: boolean;\n  /** Called when property edit is committed.\n   * @beta */\n  onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;\n  /** Called when property edit is cancelled.\n   * @beta */\n  onEditCancel?: () => void;\n  /** Whether property value is displayed in expanded state. */\n  isExpanded: boolean;\n  /** Called when toggling between expanded and collapsed property value display state. */\n  onExpansionToggled: () => void;\n  /** Reports property height changes. */\n  onHeightChanged?: (newHeight: number) => void;\n\n  highlight?: HighlightingComponentProps & { applyOnLabel: boolean, applyOnValue: boolean };\n\n  children?: never;\n}\n\n/**  A React component that renders flat properties\n * @internal\n */\nexport const FlatPropertyRenderer: React.FC<FlatPropertyRendererProps> = (props) => {\n  const {\n    category,\n    propertyValueRendererManager,\n    isEditing,\n    onEditCommit,\n    onEditCancel,\n    onHeightChanged,\n    highlight,\n    ...passthroughProps\n  } = props;\n\n  const valueElementRenderer = () => (\n    <DisplayValue\n      propertyRecord={passthroughProps.propertyRecord}\n      orientation={passthroughProps.orientation}\n      columnRatio={passthroughProps.columnRatio}\n      width={passthroughProps.width}\n      category={category}\n      propertyValueRendererManager={propertyValueRendererManager}\n      isEditing={isEditing}\n      onEditCommit={onEditCommit}\n      onEditCancel={onEditCancel}\n      isExpanded={passthroughProps.isExpanded}\n      onExpansionToggled={passthroughProps.onExpansionToggled}\n      onHeightChanged={onHeightChanged}\n      highlight={highlight}\n    />\n  );\n\n  const primitiveRendererProps: PrimitiveRendererProps = {\n    ...passthroughProps,\n    valueElementRenderer,\n    indentation: props.indentation,\n  };\n  switch (props.propertyRecord.value.valueFormat) {\n    case PropertyValueFormat.Primitive:\n      return (<PrimitivePropertyRenderer highlight={highlight?.applyOnLabel ? highlight : undefined} {...primitiveRendererProps} />);\n\n    case PropertyValueFormat.Array:\n      // If array is empty, render it as a primitive property\n      if (props.propertyRecord.value.items.length === 0)\n        return (<PrimitivePropertyRenderer highlight={highlight?.applyOnLabel ? highlight : undefined} {...primitiveRendererProps} />);\n\n    // eslint-disable-next-line no-fallthrough\n    case PropertyValueFormat.Struct:\n      return (\n        <FlatNonPrimitivePropertyRenderer\n          isExpanded={props.isExpanded}\n          onExpandToggled={props.onExpansionToggled}\n          {...primitiveRendererProps}\n        />\n      );\n  }\n};\n\ninterface DisplayValueProps {\n  isEditing?: boolean;\n  propertyRecord: PropertyRecord;\n\n  orientation: Orientation;\n  columnRatio?: number;\n  /** Pass width to rerender component as property grid width changes */\n  width?: number;\n  indentation?: number;\n  propertyValueRendererManager?: PropertyValueRendererManager;\n  isExpanded?: boolean;\n  onExpansionToggled?: () => void;\n  onHeightChanged?: (newHeight: number) => void;\n\n  category?: PropertyCategory;\n  onEditCancel?: () => void;\n  onEditCommit?: (args: PropertyUpdatedArgs, category: PropertyCategory) => void;\n\n  highlight?: HighlightingComponentProps & { applyOnLabel: boolean, applyOnValue: boolean };\n}\n\nconst DisplayValue: React.FC<DisplayValueProps> = (props) => {\n  useResetHeightOnEdit(props.isEditing, props.onHeightChanged);\n\n  if (props.isEditing) {\n    const _onEditCommit = (args: PropertyUpdatedArgs) => {\n      /* istanbul ignore else */\n      if (props.category)\n        props.onEditCommit?.(args, props.category);\n    };\n\n    return (\n      <EditorContainer\n        propertyRecord={props.propertyRecord}\n        onCommit={_onEditCommit}\n        onCancel={props.onEditCancel ?? (/* istanbul ignore next */() => { })}\n        setFocus={true}\n      />\n    );\n  }\n\n  return (\n    <>\n      {\n        CommonPropertyRenderer.createNewDisplayValue(\n          props.orientation,\n          props.propertyRecord,\n          props.indentation,\n          props.propertyValueRendererManager,\n          props.isExpanded,\n          props.onExpansionToggled,\n          props.onHeightChanged,\n          props.highlight\n        )\n      }\n    </>\n  );\n};\n\nfunction useResetHeightOnEdit(isEditing?: boolean, onHeightChanged?: (newHeight: number) => void) {\n  const previousEditingStatusRef = React.useRef(isEditing);\n  React.useEffect(() => {\n    if (!previousEditingStatusRef.current && isEditing) {\n      onHeightChanged?.(27);\n    }\n\n    previousEditingStatusRef.current = isEditing;\n  });\n}\n"]}
+{"version":3,"file":"FlatPropertyRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/propertygrid/internal/flat-properties/FlatPropertyRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\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  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"]}

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

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

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

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

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

@@ -16,12 +16,11 @@ import { Select } from "@itwin/itwinui-react";
  * @public
  */
 export function ControlledSelectableContent(props) {
-    var _a;
-    const { onSelectedContentIdChanged } = props;
+    const { onSelectedContentIdChanged, disabled } = props;
     const onContentIdSelected = React.useCallback((newValue) => {
         onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);
     }, [onSelectedContentIdChanged]);
-    const selectedContent = (_a = props.children.find((contentDef) => contentDef.id === props.selectedContentId)) !== null && _a !== void 0 ? _a : props.children[0];
+    const selectedContent = props.children.find((contentDef) => contentDef.id === props.selectedContentId) ?? props.children[0];
     const options = React.useMemo(() => {
         return props.children.map((componentDef) => ({
             label: componentDef.label,
@@ -30,8 +29,8 @@ export 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(Select, { onChange: onContentIdSelected, size: "small", className: "components-selectable-content-selector", "aria-label": props.selectAriaLabel, value: selectedContent.id, options: options })),
-        React.createElement("div", { className: "components-selectable-content-wrapper" }, selectedContent === null || selectedContent === void 0 ? void 0 : selectedContent.render())));
+            React.createElement(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())));
 }
 /**
  * An uncontrolled component that accepts a list of child components with ids and labels and
@@ -44,6 +43,6 @@ export function SelectableContent(props) {
     const onSelectedContentIdChanged = React.useCallback((id) => {
         setSelectedContentId(id);
     }, []);
-    return (React.createElement(ControlledSelectableContent, { selectedContentId: selectedContentId, onSelectedContentIdChanged: onSelectedContentIdChanged, selectAriaLabel: props.selectAriaLabel }, props.children));
+    return (React.createElement(ControlledSelectableContent, { selectedContentId: selectedContentId, onSelectedContentIdChanged: onSelectedContentIdChanged, selectAriaLabel: props.selectAriaLabel, disabled: props.disabled }, props.children));
 }
 //# 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":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/* eslint-disable deprecation/deprecation */\n/** @packageDocumentation\n * @module SelectableContent\n */\n\nimport \"./SelectableContent.scss\";\nimport * as React from \"react\";\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\n\n/**\n * A definition for content displayed in [[ControlledSelectableContent]] and\n * [[SelectableContent]] components.\n * @public\n */\nexport interface SelectableContentDefinition {\n  id: string;\n  label: string;\n  render: () => React.ReactNode;\n}\n\n/**\n * [[ControlledSelectableContent]] component properties\n * @public\n */\nexport interface ControlledSelectableContentProps {\n  selectedContentId: string;\n  onSelectedContentIdChanged?: (contentId: string) => void;\n  children: SelectableContentDefinition[];\n  selectAriaLabel?: string;\n}\n\n/**\n * A fully-controlled component that accepts a list of child components with ids and labels and\n * renders a select box at the top, allowing to choose which of the provided child components\n * should be rendered at the bottom.\n * @public\n */\nexport function ControlledSelectableContent(props: ControlledSelectableContentProps) {\n  const { onSelectedContentIdChanged } = props;\n\n  const onContentIdSelected = React.useCallback((newValue: string): void => {\n    onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);\n  }, [onSelectedContentIdChanged]);\n\n  const selectedContent = props.children.find((contentDef) => contentDef.id === props.selectedContentId) ?? props.children[0];\n  const options = React.useMemo(() => {\n    return props.children.map((componentDef) => ({\n      label: componentDef.label,\n      value: componentDef.id,\n    })) as SelectOption<string>[];\n  }, [props.children]);\n\n  return (\n    <div className=\"components-selectable-content\">\n      <div className=\"components-selectable-content-header\">\n        {options.length > 0 &&\n          <Select onChange={onContentIdSelected} size=\"small\"\n            className=\"components-selectable-content-selector\"\n            aria-label={props.selectAriaLabel}\n            value={selectedContent.id}\n            options={options}\n          />\n        }\n      </div>\n      <div className=\"components-selectable-content-wrapper\">\n        {selectedContent?.render()}\n      </div>\n    </div>\n  );\n}\n\n/**\n * [[SelectableContent]] component properties\n * @public\n */\nexport interface SelectableContentProps {\n  defaultSelectedContentId: string;\n  children: SelectableContentDefinition[];\n  selectAriaLabel?: string;\n}\n\n/**\n * An uncontrolled component that accepts a list of child components with ids and labels and\n * renders a select box at the top, allowing to choose which of the provided child components\n * should be rendered at the bottom.\n * @public\n */\nexport function SelectableContent(props: SelectableContentProps) {\n  const [selectedContentId, setSelectedContentId] = React.useState(props.defaultSelectedContentId);\n  const onSelectedContentIdChanged = React.useCallback((id: string) => {\n    setSelectedContentId(id);\n  }, []);\n  return (\n    <ControlledSelectableContent selectedContentId={selectedContentId} onSelectedContentIdChanged={onSelectedContentIdChanged} selectAriaLabel={props.selectAriaLabel}>\n      {props.children}\n    </ControlledSelectableContent>\n  );\n}\n"]}
+{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAyB5D;;;;;GAKG;AACH,MAAM,UAAU,2BAA2B,CAAC,KAAuC;IACjF,MAAM,EAAE,0BAA0B,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEvD,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAQ,EAAE;QACvE,0BAA0B,IAAI,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAEjC,MAAM,eAAe,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5H,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC3C,KAAK,EAAE,YAAY,CAAC,KAAK;YACzB,KAAK,EAAE,YAAY,CAAC,EAAE;SACvB,CAAC,CAA2B,CAAC;IAChC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,6BAAK,SAAS,EAAC,sCAAsC,IAClD,OAAO,CAAC,MAAM,GAAG,CAAC;YACjB,oBAAC,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,EAChB,QAAQ,EAAE,QAAQ,GAClB,CAEA;QACN,6BAAK,SAAS,EAAC,uCAAuC,IACnD,eAAe,EAAE,MAAM,EAAE,CACtB,CACF,CACP,CAAC;AACJ,CAAC;AAaD;;;;;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,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACxL,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  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"]}

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

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

@@ -1,123 +1,92 @@
-/*---------------------------------------------------------------------------------------------
-* 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;
-  cursor: pointer;
-  transition: background-color 250ms 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: $icon-color;
-    filter: $icon-shadow;
-    transition: all 250ms ease;
-
-    img {
-      width: $icon-size;
-      height: $icon-size;
-    }
-  }
-
-  &:focus {
-    color: $hovered-icon-color;
-    background-color: $buic-background-focus-overlay;
-
-    svg {
-      opacity: 1;
-    }
-  }
-
-  &:hover {
-    color: $hovered-icon-color;
-    background-color: $buic-background-hover-overlay;
-
-    svg {
-      opacity: 1;
-    }
-  }
-
-  &:active {
-    color: $active-icon-color;
-    background-color: $buic-background-active-overlay;
-    border: solid 2px $buic-foreground-primary;
-
-    > .components-icon {
-      color: $pressed-icon-color;
-
-      svg {
-        opacity: 1;
-      }
-    }
-  }
-
-  &:active:not(.components-disabled) {
-    background: $buic-background-pressed-overlay;
-    color: $pressed-icon-color;
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
-  }
-
-  &.components-active {
-    color: $active-icon-color;
-    background-color: $buic-background-active-overlay;
-    border: solid 2px $buic-foreground-primary;
-
-    &:not(:active):not(.components-disabled) {
-      transition-duration: 0s;
-
-      > .components-icon {
-        color: $icon-color;
-        transition-duration: 150ms;
-        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
-
-        svg {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &.components-disabled {
-    > .components-icon {
-      color: $disabled-icon-color;
-    }
-
-    &: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/esm/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,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,sCAAsC,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAUrF;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,sCAAsC,EAAE,CAAC;IAChH,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,uBAAuB,EAAE,CAAC;IACvE,MAAM,GAAG,GAAG,gCAAgC,CAAiB,QAAQ,EAAE,SAAS,CAAC,CAAC;IAClF,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,WAAW,IAAI,sBAAsB,EACrC,0BAA0B,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,EACvF,gBAAgB,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;AAED,gBAAgB;AAChB,MAAM,UAAU,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,iBAAiB,CAAI,YAAY,CAAC,CAAC;AAC5C,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 ToolSettings\n */\n\nimport \"./ItemWrapper.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps, useResizeObserver } from \"@itwin/core-react\";\nimport { useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\nimport { DirectionHelpers, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\n\n/** Properties of [[ItemWrapper]] component.\n * @internal future\n */\nexport interface ItemWrapperProps extends CommonProps {\n  /** Tool setting content. */\n  children?: React.ReactNode;\n}\n\n/** Used in a [[ItemWrapper]] component to display a setting.\n * @internal future\n */\nexport function ItemWrapper(props: ItemWrapperProps) {\n  const { expandsTo, direction, overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();\n  const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();\n  const ref = useResizeObserverSingleDimension<HTMLDivElement>(onResize, useHeight);\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    hasOverflow && \"components-overflown\",\n    OrthogonalDirectionHelpers.getCssClassName(hasOverflow ? overflowDirection : direction),\n    DirectionHelpers.getCssClassName(hasOverflow ? overflowExpandsTo : expandsTo),\n    props.className,\n  );\n  return (\n    <div\n      className={className}\n      ref={ref}\n      style={props.style}\n    >\n      {props.children}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useResizeObserverSingleDimension<T extends Element>(onResize: (size: number) => void, useHeight: boolean) {\n  const handleResize = React.useCallback((w: number, h: number) => {\n    if (useHeight)\n      return onResize(h);\n    return onResize(w);\n  }, [useHeight, onResize]);\n  return useResizeObserver<T>(handleResize);\n}\n"]}
+{"version":3,"file":"ItemWrapper.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,sCAAsC,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAUrF;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,sCAAsC,EAAE,CAAC;IAChH,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,uBAAuB,EAAE,CAAC;IACvE,MAAM,GAAG,GAAG,gCAAgC,CAAiB,QAAQ,EAAE,SAAS,CAAC,CAAC;IAClF,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,WAAW,IAAI,sBAAsB,EACrC,0BAA0B,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,EACvF,gBAAgB,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;AAED,gBAAgB;AAChB,MAAM,UAAU,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,iBAAiB,CAAI,YAAY,CAAC,CAAC;AAC5C,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 ToolSettings\r\n */\r\n\r\nimport \"./ItemWrapper.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, 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"]}

package/lib/esm/components-react/toolbar/ItemWrapper.scss

@@ -1,10 +1,10 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-.components-toolbar-item-container {
-  position: relative;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.components-toolbar-item-container {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"Items.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Items.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./Items.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, CommonProps,\n  getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\nimport { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\nimport { OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\n\n/** Properties of [[ToolbarItems]] component.\n * @internal\n */\nexport interface ToolbarItemsProps extends CommonProps {\n  /** Toolbar items. */\n  children?: React.ReactNode;\n  /** Toolbar items direction. */\n  direction: OrthogonalDirection;\n}\n\n/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.\n * @internal\n */\nexport function ToolbarItems(props: ToolbarItemsProps) {\n\n  const ref = React.useRef<HTMLDivElement>(null);\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = useToolbarWithOverflowDirectionContext();\n  const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n\n  let toolbarOpacity = useTransparentBackground ? 0 : Number(document.documentElement.style.getPropertyValue(\"--buic-toolbar-opacity\"));\n  let boxShadowOpacity = useTransparentBackground ? 0 : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  const isInitialMount = React.useRef(true);\n  const { onElementRef, proximityScale } = useWidgetOpacityContext();\n\n  React.useEffect(() => {\n    // istanbul ignore else\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n      onElementRef(ref);\n    }\n  }, [onElementRef]);\n\n  if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    // istanbul ignore next\n    if (proximityScale < .25)\n      showSeparators = false;\n  }\n\n  const divStyle: React.CSSProperties = {\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\n    ...props.style,\n  };\n\n  const className = classnames(\n    \"components-toolbar-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(props.direction),\n    showSeparators && \"components-toolbar-show-decorators\",\n    props.className);\n\n  return (\n    <div\n      className={className}\n      style={divStyle}\n      ref={ref}\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"Items.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Items.tsx"],"names":[],"mappings":"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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 Toolbar\r\n */\r\n\r\nimport \"./Items.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport {\r\n  calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, CommonProps,\r\n  getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow,\r\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\r\n  useWidgetOpacityContext,\r\n} from \"@itwin/core-react\";\r\nimport { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\r\nimport { OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\r\n\r\n/** Properties of [[ToolbarItems]] component.\r\n * @internal\r\n */\r\nexport interface ToolbarItemsProps extends CommonProps {\r\n  /** Toolbar items. */\r\n  children?: React.ReactNode;\r\n  /** Toolbar items direction. */\r\n  direction: OrthogonalDirection;\r\n}\r\n\r\n/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.\r\n * @internal\r\n */\r\nexport function ToolbarItems(props: ToolbarItemsProps) {\r\n\r\n  const ref = React.useRef<HTMLDivElement>(null);\r\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = useToolbarWithOverflowDirectionContext();\r\n  const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\r\n\r\n  let toolbarOpacity = useTransparentBackground ? 0 : Number(document.documentElement.style.getPropertyValue(\"--buic-toolbar-opacity\"));\r\n  let boxShadowOpacity = useTransparentBackground ? 0 : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\r\n  let filterBlur = useTransparentBackground ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\r\n  let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\r\n\r\n  const isInitialMount = React.useRef(true);\r\n  const { onElementRef, proximityScale } = useWidgetOpacityContext();\r\n\r\n  React.useEffect(() => {\r\n    // istanbul ignore else\r\n    if (isInitialMount.current) {\r\n      isInitialMount.current = false;\r\n      onElementRef(ref);\r\n    }\r\n  }, [onElementRef]);\r\n\r\n  if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {\r\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\r\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\r\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\r\n    // istanbul ignore next\r\n    if (proximityScale < .25)\r\n      showSeparators = false;\r\n  }\r\n\r\n  const divStyle: React.CSSProperties = {\r\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\r\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\r\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\r\n    ...props.style,\r\n  };\r\n\r\n  const className = classnames(\r\n    \"components-toolbar-items-container\",\r\n    OrthogonalDirectionHelpers.getCssClassName(props.direction),\r\n    showSeparators && \"components-toolbar-show-decorators\",\r\n    props.className);\r\n\r\n  return (\r\n    <div\r\n      className={className}\r\n      style={divStyle}\r\n      ref={ref}\r\n    >\r\n      {props.children}\r\n    </div>\r\n  );\r\n}\r\n"]}