@itwin/components-react 4.0.0-dev.1 → 4.0.0-dev.11

package/lib/esm/components-react/table/TableDataProvider.js

@@ -6,23 +6,8 @@
  * @module Table
  */
 import { BeEvent } from "@itwin/core-bentley";
-/* eslint-disable deprecation/deprecation */
-// cSpell:ignore columnfiltering
-/** Filter Renderer for a Table column
- * @deprecated in 3.5. Use the Table component in @itwin/itwinui-react instead, which does not use this interface.
- * @public
- */
-export var FilterRenderer;
-(function (FilterRenderer) {
-    FilterRenderer[FilterRenderer["Numeric"] = 1] = "Numeric";
-    FilterRenderer[FilterRenderer["MultiSelect"] = 2] = "MultiSelect";
-    FilterRenderer[FilterRenderer["SingleSelect"] = 3] = "SingleSelect";
-    FilterRenderer[FilterRenderer["Text"] = 4] = "Text";
-    FilterRenderer[FilterRenderer["MultiValue"] = 5] = "MultiValue";
-})(FilterRenderer || (FilterRenderer = {}));
 /** An event broadcasted on table data changes
- * @deprecated in 3.5. Use the Table component in @itwin/itwinui-react instead, which does not use this class.
- * @public
+ * @public  @deprecated
  */
 export class TableDataChangeEvent extends BeEvent {
 }

package/lib/esm/components-react/table/TableDataProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableDataProvider.js","sourceRoot":"","sources":["../../../../src/components-react/table/TableDataProvider.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAM9C,4CAA4C;AAC5C,gCAAgC;AAEhC;;;GAGG;AACH,MAAM,CAAN,IAAY,cAMX;AAND,WAAY,cAAc;IACxB,yDAAW,CAAA;IACX,iEAAW,CAAA;IACX,mEAAY,CAAA;IACZ,mDAAI,CAAA;IACJ,+DAAU,CAAA;AACZ,CAAC,EANW,cAAc,KAAd,cAAc,QAMzB;AA8GD;;;GAGG;AACH,MAAM,OAAO,oBAAqB,SAAQ,OAAiC;CAAI","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 Table\r\n */\r\n\r\nimport { BeEvent } from \"@itwin/core-bentley\";\r\nimport { PropertyDescription, PropertyRecord } from \"@itwin/appui-abstract\";\r\nimport { HorizontalAlignment, SortDirection } from \"@itwin/core-react\";\r\nimport { ItemColorOverrides, ItemStyle } from \"../properties/ItemStyle\";\r\nimport { CompositeFilterDescriptorCollection, DistinctValueCollection } from \"./columnfiltering/ColumnFiltering\";\r\n\r\n/* eslint-disable deprecation/deprecation */\r\n// cSpell:ignore columnfiltering\r\n\r\n/** Filter Renderer for a Table column\r\n * @deprecated in 3.5. Use the Table component in @itwin/itwinui-react instead, which does not use this interface.\r\n * @public\r\n */\r\nexport enum FilterRenderer {\r\n  Numeric = 1,\r\n  MultiSelect,\r\n  SingleSelect,\r\n  Text,\r\n  MultiValue,\r\n}\r\n\r\n/**\r\n * Column definition provided to Table.\r\n * @deprecated in 3.5. Use the Table component in @itwin/itwinui-react instead, which does not use this interface.\r\n * @public\r\n */\r\nexport interface ColumnDescription {\r\n  /** A unique key for this column. */\r\n  key: string;\r\n\r\n  /** Column header label */\r\n  label: string;\r\n  /** Property description for all cells in the column */\r\n  propertyDescription?: PropertyDescription;\r\n\r\n  /** Preferred initial width of the column */\r\n  width?: number;\r\n\r\n  /** Indicates whether the cells in the column are editable. Defaults to false. */\r\n  editable?: boolean;\r\n  /** Indicates whether the column is resizable. Defaults to false. */\r\n  resizable?: boolean;\r\n  /** Indicates whether the display value for the cell is treated as an icon spec. Defaults to false. */\r\n  icon?: boolean;\r\n\r\n  /** Indicates whether the column is sortable. Defaults to false. */\r\n  sortable?: boolean;\r\n  /** Specifies a secondary sort column to use when cell values are the same. */\r\n  secondarySortColumn?: number;\r\n  /** Indicates whether the column sorting ignores case. Defaults to false. */\r\n  sortIgnoreCase?: boolean;\r\n\r\n  /** Indicates whether the column is filterable. Defaults to false. */\r\n  filterable?: boolean;\r\n  /** Specifies the filter renderer for the column. */\r\n  filterRenderer?: FilterRenderer;\r\n\r\n  /** Show field filters in Multi-Value column filtering popup. Defaults to true. */\r\n  showFieldFilters?: boolean;\r\n  /** Show distinct value checkboxes in Multi-Value column filtering popup. Defaults to true. */\r\n  showDistinctValueFilters?: boolean;\r\n  /** Filtering is case-sensitive in Multi-Value column filtering popup. Defaults to false. */\r\n  filterCaseSensitive?: boolean;\r\n\r\n  /** Sort type for react-table */\r\n  sortType?: string;\r\n}\r\n\r\n/**\r\n * Cell definition provided to Table.\r\n * @deprecated in 3.5. Use the Table component in @itwin/itwinui-react instead, which does not use this interface.\r\n * @public\r\n */\r\nexport interface CellItem {\r\n  /** Key for the column containing the cell */\r\n  key: string;\r\n  /** Property record for the cell */\r\n  record?: PropertyRecord;\r\n\r\n  /** Indicates whether the cell is disabled */\r\n  isDisabled?: boolean;\r\n  /** Specifies the horizontal alignment of the contents of the cell */\r\n  alignment?: HorizontalAlignment;\r\n\r\n  /** Style properties for the contents of the cell */\r\n  style?: ItemStyle;\r\n\r\n  /**\r\n   * Property to specify how many cells were merged to create this cell.\r\n   * Default value is 1.\r\n   * @alpha\r\n   */\r\n  mergedCellsCount?: number;\r\n}\r\n\r\n/**\r\n * Row definition provided to Table.\r\n * @deprecated in 3.5. Use the Table component in @itwin/itwinui-react instead, which does not use this interface.\r\n * @public\r\n */\r\nexport interface RowItem {\r\n  /** A unique key for this row */\r\n  key: string;\r\n  /** Array of cells in the row */\r\n  cells: CellItem[];\r\n  /** Indicates whether the row is disabled */\r\n  isDisabled?: boolean;\r\n  /** Color overrides for all cells in the row */\r\n  colorOverrides?: ItemColorOverrides;\r\n\r\n  /**\r\n   * A key-value pairs data structure that can be used by data provider\r\n   * to store some custom data for this node item.\r\n   */\r\n  extendedData?: { [key: string]: any };\r\n\r\n  /**\r\n   * Get the value from the cell for filtering purposes.\r\n   * If not specified and the value is a primitive, the recordValue.value is returned.\r\n   */\r\n  getValueFromCell?: (columnKey: string) => any;\r\n}\r\n\r\n/** An interface table data change listeners\r\n * @deprecated in 3.5. Use the Table component in @itwin/itwinui-react instead, which does not use this type.\r\n * @public\r\n */\r\nexport declare type TableDataChangesListener = () => void;\r\n\r\n/** An event broadcasted on table data changes\r\n * @deprecated in 3.5. Use the Table component in @itwin/itwinui-react instead, which does not use this class.\r\n * @public\r\n */\r\nexport class TableDataChangeEvent extends BeEvent<TableDataChangesListener> { }\r\n\r\n/**\r\n * TableDataProvider provides data to the Table.\r\n * It also provides support for data Sorting & Filtering.\r\n * @deprecated in 3.5. Use the Table component in @itwin/itwinui-react instead, which does not use this interface.\r\n * @public\r\n */\r\nexport interface TableDataProvider {\r\n  /** Event emitted by the data provider when column data changes */\r\n  onColumnsChanged: TableDataChangeEvent;\r\n  /** Event emitted by the data provider when row data changes */\r\n  onRowsChanged: TableDataChangeEvent;\r\n\r\n  /** Retrieves the column descriptions */\r\n  getColumns(): Promise<ColumnDescription[]>;\r\n  /** Retrieves the row count */\r\n  getRowsCount(): Promise<number>;\r\n  /** Retrieves a specific row by index */\r\n  getRow(rowIndex: number, unfiltered?: boolean): Promise<RowItem>;\r\n\r\n  /** Sorts the rows based on the value in a specific column */\r\n  sort(columnIndex: number, sortDirection: SortDirection): Promise<void>;\r\n\r\n  // Column Filtering methods\r\n\r\n  /** Apply a filter descriptor collection\r\n   */\r\n  applyFilterDescriptors?: (filterDescriptors: CompositeFilterDescriptorCollection) => Promise<void>;\r\n\r\n  /** Gets distinct values in a column\r\n   */\r\n  getDistinctValues?: (columnKey: string, maximumValueCount?: number) => Promise<DistinctValueCollection>;\r\n\r\n  /** Gets property display value expression\r\n   * @alpha\r\n   */\r\n  getPropertyDisplayValueExpression?: (property: string) => string;\r\n}\r\n\r\n/**\r\n * MutableTableDataProvider provides mutation methods for data in the Table.\r\n * Useful for Drag & Drop processing.\r\n * @deprecated in 3.5. Use the Table component in @itwin/itwinui-react instead, which does not use this interface.\r\n * @public\r\n */\r\nexport interface MutableTableDataProvider extends TableDataProvider {\r\n  /** Adds a row to the end */\r\n  addRow(rowItem: RowItem): number;\r\n  /** Inserts a row at a given row index */\r\n  insertRow(rowItem: RowItem, index: number): number;\r\n  /** Deletes a row */\r\n  deleteRow(rowItem: RowItem): void;\r\n  /** Moves a row to a new row index */\r\n  moveRow(rowItem: RowItem, newIndex: number): number;\r\n}\r\n"]}
+{"version":3,"file":"TableDataProvider.js","sourceRoot":"","sources":["../../../../src/components-react/table/TableDataProvider.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,OAAmB;CAAI","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 Table\r\n */\r\n\r\nimport { BeEvent } from \"@itwin/core-bentley\";\r\n\r\n/** An event broadcasted on table data changes\r\n * @public  @deprecated\r\n */\r\nexport class TableDataChangeEvent extends BeEvent<() => void> { }\r\n"]}

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

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

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

@@ -2,20 +2,19 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 @import "variables";
 
-$separator-color: $buic-text-color-muted;
+$separator-color: var(--iui-color-border-subtle);
 
 .components-toolbar-items-container {
-  $border-radius: 3px;
+  $border-radius: var(--iui-border-radius-1);
 
   border-radius: $border-radius;
   display: inline-block;
   vertical-align: bottom;
   box-sizing: border-box;
 
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .35);
+  box-shadow: var(--iui-shadow-1);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   pointer-events: auto;
@@ -23,14 +22,14 @@ $separator-color: $buic-text-color-muted;
   &.components-vertical {
     width: $components-desktop-toolbar-width;
 
-    >* {
+    > * {
       height: $components-desktop-item-height;
 
       &:not(:first-child) {
         margin-top: $components-desktop-space-between-toolbar-items;
 
         &:before {
-          content: '';
+          content: "";
           display: block;
           position: absolute;
           pointer-events: none;
@@ -46,7 +45,7 @@ $separator-color: $buic-text-color-muted;
   &.components-horizontal {
     height: $components-desktop-toolbar-height;
 
-    >* {
+    > * {
       display: inline-block;
       height: 100%;
       width: $components-desktop-item-width;
@@ -55,7 +54,7 @@ $separator-color: $buic-text-color-muted;
         margin-left: $components-desktop-space-between-toolbar-items;
 
         &:before {
-          content: '';
+          content: "";
           display: block;
           position: absolute;
           pointer-events: none;
@@ -68,7 +67,7 @@ $separator-color: $buic-text-color-muted;
     }
   }
 
-  >* {
+  > * {
     vertical-align: bottom;
   }
 }
@@ -78,7 +77,8 @@ $separator-color: $buic-text-color-muted;
   margin-left: $components-desktop-separator-gap-between-toolbar-items;
 }
 
-div.components-toolbar-items-container.components-toolbar-show-decorators .components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before::before {
+div.components-toolbar-items-container.components-toolbar-show-decorators
+  .components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before::before {
   width: $components-desktop-separator-thickness;
   background-color: $separator-color;
   left: $components-desktop-separator-center-offset;
@@ -88,8 +88,9 @@ div.components-toolbar-items-container.components-toolbar-show-decorators .compo
   margin-top: $components-desktop-separator-gap-between-toolbar-items;
 }
 
-div.components-toolbar-items-container.components-toolbar-show-decorators .components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before::before {
+div.components-toolbar-items-container.components-toolbar-show-decorators
+  .components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before::before {
   height: $components-desktop-separator-thickness;
   background-color: $separator-color;
   top: $components-desktop-separator-center-offset;
-}
+}

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

@@ -3,7 +3,6 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/z-index";
-@import "~@itwin/itwinui-css/scss/style/speed";
 @import "variables";
 
 .components-toolbar-button-item.components-ellipsis-icon {
@@ -11,7 +10,7 @@
   $ellipsis-size: 4px;
   $ellipsis-spacing: 8px;
 
-  >.components-icon {
+  > .components-icon {
     .components-ellipsis {
       position: relative;
       width: $ellipsis-size;
@@ -21,7 +20,7 @@
     }
 
     .components-ellipsis:before {
-      content: '';
+      content: "";
       position: absolute;
       left: -$ellipsis-spacing;
       width: $ellipsis-size;
@@ -31,7 +30,7 @@
     }
 
     .components-ellipsis:after {
-      content: '';
+      content: "";
       position: absolute;
       left: $ellipsis-spacing;
       width: $ellipsis-size;
@@ -48,7 +47,8 @@
 
   @include uicore-z-index(toolbar-panels);
 
-  transition: visibility $iui-speed ease, opacity $iui-speed ease;
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
 
   &.nz-hidden {
     opacity: 0;

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

@@ -6,7 +6,7 @@
 
 .components-toolbar-overflow-panel {
   background: $buic-background-1;
-   border-radius: 3px;
+  border-radius: var(--iui-border-radius-1);
   display: flex;
   height: unset;
   width: fit-content;
@@ -16,13 +16,13 @@
     right: -$components-items-border-width;
     flex-direction: column;
     top: 100%;
-   }
+  }
 
-   &.components-vertical-components-direction-top {
+  &.components-vertical-components-direction-top {
     right: -$components-items-border-width;
     flex-direction: column;
-    bottom: 100%
-   }
+    bottom: 100%;
+  }
 
   &.components-horizontal-components-direction-right {
     left: 100%;

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

@@ -4,7 +4,6 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/z-index";
 @import "~@itwin/core-react/lib/cjs/core-react/geometry";
-@import "~@itwin/itwinui-css/scss/style/speed";
 @import "variables";
 
 .components-toolbar-expandable-button {
@@ -15,14 +14,14 @@
   $arrow-shadow: $icon-shadow;
   position: relative;
 
-  >* {
+  > * {
     &:not(.components-triangle) {
       height: 100%;
       width: 100%;
     }
   }
 
-  >.components-triangle {
+  > .components-triangle {
     border-radius: 0;
     position: absolute;
     right: $margin-from-triangle-to-stroke;
@@ -30,12 +29,14 @@
     filter: $arrow-shadow;
     pointer-events: none;
 
-    @include triangle-bottom-right($width: $triangle-width,
+    @include triangle-bottom-right(
+      $width: $triangle-width,
       $height: $triangle-height,
-      $color: $buic-icon-color );
+      $color: $buic-icon-color
+    );
   }
 
-  &:active>.components-triangle {
+  &:active > .components-triangle {
     filter: $no-shadow;
 
     @include triangle-bottom-right-color($pressed-icon-color);
@@ -43,7 +44,7 @@
 
   &.components-active {
     &:not(:active):not(.components-disabled) {
-      >.components-triangle {
+      > .components-triangle {
         filter: $no-shadow;
 
         @include triangle-bottom-right-color($active-icon-color);
@@ -52,17 +53,17 @@
   }
 
   &.components-disabled {
-    >.components-triangle {
+    > .components-triangle {
       @include triangle-bottom-right-color($disabled-icon-color);
     }
   }
 
   &.components-disabled-drag {
-    >.components-icon {
+    > .components-icon {
       color: $disabled-icon-color;
     }
 
-    >.components-triangle {
+    > .components-triangle {
       @include triangle-bottom-right-color($disabled-icon-color);
     }
   }
@@ -75,9 +76,10 @@
   border-color: $buic-background-5;
   border-width: 1px;
   border-style: solid;
-  border-radius: 3px;
+  border-radius: var(--iui-border-radius-1);
 
-  transition: visibility $iui-speed ease, opacity $iui-speed ease;
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
 
   &.nz-hidden {
     opacity: 0;

package/lib/esm/components-react/toolbar/ToolbarWithOverflow.d.ts

@@ -10,8 +10,6 @@ import { Direction, OrthogonalDirection } from "./utilities/Direction";
  * @public
  */
 export interface CustomToolbarItem extends CustomButtonDefinition {
-    /** React node that must result in providing a PopupItem @deprecated in 3.x. use panelContentNode */
-    buttonNode?: React.ReactNode;
     /** defines the content to display in popup panel */
     panelContentNode?: React.ReactNode;
     /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the
@@ -88,21 +86,6 @@ export interface ToolbarOverflowContextProps {
  */
 export declare const ToolbarWithOverflowDirectionContext: React.Context<ToolbarOverflowContextProps>;
 /** @internal */
-export declare function CustomItem({ item, addGroupSeparator }: {
-    item: CustomToolbarItem;
-    addGroupSeparator: boolean;
-}): JSX.Element | null;
-/** @internal */
-export declare function GroupPopupItem({ item, addGroupSeparator }: {
-    item: GroupButton;
-    addGroupSeparator: boolean;
-}): JSX.Element;
-/** @internal */
-export declare function ActionItem({ item, addGroupSeparator }: {
-    item: ActionButton;
-    addGroupSeparator: boolean;
-}): JSX.Element;
-/** @internal */
 export declare function ToolbarItemComponent({ item, addGroupSeparator }: {
     item: ToolbarItem;
     addGroupSeparator: boolean;

package/lib/esm/components-react/toolbar/ToolbarWithOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,YAAY,EAAE,iBAAiB,EAAmD,sBAAsB,EACxG,WAAW,EAAE,kBAAkB,EAChC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAkB,WAAW,EAAc,eAAe,EAAW,MAAM,mBAAmB,CAAC;AAStG,OAAO,EAAE,SAAS,EAAoB,mBAAmB,EAA8B,MAAM,uBAAuB,CAAC;AAGrH;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,oGAAoG;IACpG,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;kEAC8D;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;GAGG;AAEH,eAAO,MAAM,2BAA2B,wBAAsC,CAAC;AAE/E;;;GAGG;AACH,wBAAgB,8BAA8B,YAE7C;AAED;;GAEG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzE;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,IAAI,iBAAiB,CAEhF;AAED,gBAAgB;AAChB,eAAO,MAAM,mBAAmB,cAAe,SAAS,KAAG,mBAG1D,CAAC;AAEF;;GAEG;AACH,oBAAY,qBAAqB;IAC/B,KAAK,IAAA;IACL,GAAG,IAAA;CACJ;AAED;;GAEG;AACH,oBAAY,qBAAqB;IAC/B,8EAA8E;IAC9E,QAAQ,IAAA;IACR,kFAAkF;IAClF,SAAS,IAAA;IACT,gFAAgF;IAChF,WAAW,IAAA;CACZ;AAED;;GAEG;AACH,qBAAa,4BAA4B;IACvC,oDAAoD;IACpD,gBAAuB,gBAAgB,sCAAsC;IAC7E,kDAAkD;IAClD,gBAAuB,cAAc,oCAAoC;IAEzE,iEAAiE;WACnD,eAAe,CAAC,cAAc,EAAE,qBAAqB,GAAG,MAAM;CAQ7E;AAED,gBAAgB;AAChB,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,mBAAmB,CAAC;IACxC,QAAQ,CAAC,iBAAiB,EAAE,SAAS,CAAC;IACtC,QAAQ,CAAC,iBAAiB,EAAE,mBAAmB,CAAC;IAChD,QAAQ,CAAC,cAAc,EAAE,qBAAqB,CAAC;IAC/C,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACrC,QAAQ,CAAC,qBAAqB,EAAE,qBAAqB,CAAC;IACtD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,qBAAqB,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,qBAAqB,EAAE,OAAO,CAAC;IACxC,QAAQ,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC5C,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACtD;AAED;;;GAGG;AAEH,eAAO,MAAM,mCAAmC,4CAa9C,CAAC;AAEH,gBAAgB;AAChB,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAAE,sBA8B9G;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAAE,eAkC5G;AAED,gBAAgB;AAChB,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAAE,eAuBzG;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAAE,sBAalH;AAED,gBAAgB;AAChB,wBAAgB,sCAAsC,gCAErD;AAeD;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,WAAW,EAAE,eAAe;IAC5E,oGAAoG;IACpG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,4GAA4G;IAC5G,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,uGAAuG;IACvG,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,sDAAsD;IACtD,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAoLlE;AAqID;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED;;GAEG;AAEH,eAAO,MAAM,kBAAkB,uCAAqD,CAAC;AAErF,gBAAgB;AAChB,wBAAgB,uBAAuB,2BAEtC"}
+{"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"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"}

package/lib/esm/components-react/toolbar/ToolbarWithOverflow.js

@@ -9,7 +9,7 @@ import "./Toolbar.scss";
 import classnames from "classnames";
 import * as React from "react";
 import { ConditionalBooleanValue, ConditionalStringValue, ToolbarItemUtilities, } from "@itwin/appui-abstract";
-import { BadgeUtilities, IconHelper, useRefs } from "@itwin/core-react";
+import { BadgeUtilities, Icon, IconHelper, useRefs } from "@itwin/core-react";
 import { ToolbarButtonItem } from "./Item";
 import { ToolbarItems } from "./Items";
 import { ItemWrapper, useResizeObserverSingleDimension } from "./ItemWrapper";
@@ -20,6 +20,7 @@ import { PopupItemsPanel } from "./PopupItemsPanel";
 import { PopupItemWithDrag } from "./PopupItemWithDrag";
 import { Direction, DirectionHelpers, OrthogonalDirection, OrthogonalDirectionHelpers } from "./utilities/Direction";
 import { UiComponents } from "../UiComponents";
+import { SvgPlaceholder } from "@itwin/itwinui-icons-react";
 /**
  * Context used by Toolbar items to know if popup panel should be hidden - via AutoHide.
  * @public
@@ -37,7 +38,7 @@ export function useToolbarPopupAutoHideContext() {
  * @internal
  */
 export function isCustomToolbarItem(item) {
-    return !!item.isCustom && (("buttonNode" in item) || ("panelContentNode" in item));
+    return !!item.isCustom && ("panelContentNode" in item);
 }
 /** @internal */
 export const getToolbarDirection = (expandsTo) => {
@@ -102,25 +103,18 @@ export const ToolbarWithOverflowDirectionContext = React.createContext({
     onKeyDown: /* istanbul ignore next */ (_e) => void {},
 });
 /** @internal */
-export function CustomItem({ item, addGroupSeparator }) {
+function CustomItem({ item, addGroupSeparator }) {
     const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
     const icon = React.useMemo(() => (item.icon &&
         IconHelper.getIconReactNode(item.icon, item.internalData)) || /* istanbul ignore next */
-        React.createElement("i", { className: "icon icon-placeholder" }), [item.icon, item.internalData]);
+        React.createElement(Icon, { className: "icon", iconSpec: React.createElement(SvgPlaceholder, null) }), [item.icon, item.internalData]);
     const isDisabled = React.useMemo(() => ConditionalBooleanValue.getValue(item.isDisabled), [item.isDisabled]);
     const title = React.useMemo(() => /* istanbul ignore next */ { var _a; /* istanbul ignore next */ return (_a = ConditionalStringValue.getValue(item.label)) !== null && _a !== void 0 ? _a : item.id; }, [item.id, item.label]);
     const badge = React.useMemo(() => BadgeUtilities.getComponentForBadgeType(item.badgeType), [item.badgeType]);
-    if (item.panelContentNode) {
-        return React.createElement(PopupItem, { key: item.id, itemId: item.id, icon: icon, isDisabled: isDisabled, title: title, panel: item.panelContentNode, hideIndicator: useDragInteraction, badge: badge, addGroupSeparator: addGroupSeparator, keepContentsMounted: item.keepContentsLoaded });
-    }
-    // istanbul ignore else
-    if (item.buttonNode)
-        return React.createElement(React.Fragment, null, item.buttonNode);
-    // istanbul ignore next
-    return null;
+    return React.createElement(PopupItem, { key: item.id, itemId: item.id, icon: icon, isDisabled: isDisabled, title: title, panel: item.panelContentNode, hideIndicator: useDragInteraction, badge: badge, addGroupSeparator: addGroupSeparator, keepContentsMounted: item.keepContentsLoaded });
 }
 /** @internal */
-export function GroupPopupItem({ item, addGroupSeparator }) {
+function GroupPopupItem({ item, addGroupSeparator }) {
     const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
     const title = ConditionalStringValue.getValue(item.label);
     const badge = BadgeUtilities.getComponentForBadgeType(item.badgeType);
@@ -131,7 +125,7 @@ export function GroupPopupItem({ item, addGroupSeparator }) {
     return React.createElement(PopupItem, { key: item.id, itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, icon: IconHelper.getIconReactNode(item.icon, item.internalData), isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), title: title, panel: panel, badge: badge, hideIndicator: useDragInteraction, addGroupSeparator: addGroupSeparator });
 }
 /** @internal */
-export function ActionItem({ item, addGroupSeparator }) {
+function ActionItem({ item, addGroupSeparator }) {
     const title = ConditionalStringValue.getValue(item.label);
     const badge = BadgeUtilities.getComponentForBadgeType(item.badgeType);
     const { onItemExecuted } = useToolbarWithOverflowDirectionContext();
@@ -198,6 +192,7 @@ export function ToolbarWithOverflow(props) {
             if (!isMounted.current)
                 return;
             setPopupPanelCount((prev) => {
+                /* istanbul ignore next */
                 const nextCount = isOpening ? (prev + 1) : (prev - 1);
                 // eslint-disable-next-line no-console
                 // console.log(`new popup count = ${nextCount}`);