v4.17.0

4.17.0 Change Notes

Table of contents:

• @itwin/core-react
  • Deprecations
• @itwin/appui-react
  • Deprecations
  • Additions
  • Changes
• @itwin/components-react
  • Deprecations
  • Additions
  • Changes
• @itwin/imodel-components-react
  • Deprecations

@itwin/core-react

Deprecations

• All SCSS and CSS variables are deprecated in all of AppUI packages. Applications should use iTwinUI variables instead. In the table below you can find the replacements for commonly used variables:

Variable	Replacement
--buic-accessory-hollow	--iui-color-white
--buic-accessory-primary	--iui-color-background-accent-hover or rgb(000, 139, 225)
--buic-accessory-success	--iui-color-background-positive-hover or rgb(083, 162, 026)
--buic-accessory-alert	--iui-color-background-negative-hover or rgb(211, 010, 010)
--buic-accessory-warning	--iui-color-background-warning-hover or rgb(241, 139, 018)
--buic-accessory-primary-tint	--iui-color-border-informational or rgb(165, 215, 245)
--buic-accessory-success-tint	--iui-color-border-positive or rgb(195, 225, 175)
--buic-accessory-alert-tint	--iui-color-border-negative or rgb(239, 169, 169)
--buic-accessory-warning-tint	--iui-color-border-warning or rgb(249, 215, 171)
--buic-background-1	--iui-color-background
--buic-background-2	--iui-color-background-hover
--buic-background-3	--iui-color-background-backdrop
--buic-background-4	--iui-color-background-backdrop-hover
--buic-background-5	--iui-color-background-disabled
--buic-background-editable	--iui-color-background
--buic-background-primary	--iui-color-background-accent
--buic-background-tooltip	hsl(var(--iui-color-background-hsl) / 0.9)
--buic-background-scrollbar	hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4))
--buic-background-scrollbar-hover	hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-3))
--buic-foreground-body-rgb	--iui-color-foreground-hsl
--buic-foreground-body	--iui-color-text
--buic-foreground-body-reverse-rgb	--iui-color-foreground-hsl
--buic-foreground-body-reverse	hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
--buic-foreground-muted	--iui-color-text-muted
--buic-foreground-disabled	--iui-color-text-disabled
--buic-foreground-activehover	--iui-color-text
--buic-inputs-border	hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4))
--buic-inputs-boxshadow	--iui-focus-box-shadow
--buic-popup-boxshadow	--buic-inputs-boxshadow
--buic-foreground-primary	--iui-color-icon-accent
--buic-foreground-primary-tone	--iui-color-text-accent-hover
--buic-foreground-focus	--iui-color-text-accent-hover
--buic-foreground-focus-border	--buic-inputs-border
--buic-focus-boxshadow	hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-4))
--buic-focus-boxshadow-gradient1	hsl(var(--buic-foreground-primary-tone-rgb) / 0)
--buic-focus-boxshadow-gradient2	hsl(var(--buic-foreground-primary-rgb) / 0.65)
--buic-foreground-accessory	--iui-color-white
--buic-foreground-success	--iui-color-text-positive
--buic-foreground-positive	--iui-color-text-positive
--buic-foreground-positive-rgb	--iui-color-positive-hsl
--buic-foreground-alert	--iui-color-text-negative
--buic-foreground-negative	--iui-color-text-negative
--buic-foreground-negative-rgb	--iui-color-negative-hsl
--buic-foreground-warning	--iui-color-text-warning
--buic-foreground-warning-rgb	--iui-color-warning-hsl
--buic-background-focus-overlay	hsl(var(--iui-opacity-6))
--buic-background-hover-overlay	hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-5))
--buic-background-active-overlay	hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-5))
--buic-background-pressed-overlay	hsl(var(--iui-color-accent-hsl) / 0.3)
--buic-background-card	hsl(var(--iui-color-background-hsl) / 0.9)
--buic-background-striped_row	hsl(var(--iui-color-foreground-hsl) / 0.03)
--buic-background-titlebar	--iui-color-background-disabled
--buic-background-dialog-stroke	--iui-color-background-disabled
--buic-background-widget-stroke	--iui-color-background-disabled
--buic-background-control-stroke	--iui-color-background-disabled
--buic-background-panel-stroke	--iui-color-background-disabled
--buic-background-toolbutton-stroke	--iui-color-background-disabled
--buic-background-titlebar-outoffocus	--iui-color-background-backdrop-hover
--buic-background-divider	--iui-color-background-backdrop-hover
--buic-background-widget-element-stroke	--iui-color-background-backdrop-hover
--buic-background-statusbar	--iui-color-background-backdrop-hover
--buic-background-table-header	--iui-color-background-backdrop-hover
--buic-background-control-stroke-disabled	--iui-color-background-backdrop-hover
--buic-background-tab-inactive	--iui-color-background-backdrop
--buic-background-toolbutton-inactive	--iui-color-background-backdrop
--buic-background-context-menu	--iui-color-background-backdrop
--buic-background-widget-panel	--iui-color-background-backdrop
--buic-background-placeholder	--iui-color-background-backdrop
--buic-background-control-disabled	--iui-color-background-backdrop
--buic-background-tab-active	--iui-color-background-hover
--buic-background-dialog	--iui-color-background-hover
--buic-background-widget	--iui-color-background-hover
--buic-background-window	--iui-color-background-hover
--buic-background-toolbar	--iui-color-background-hover
--buic-background-panel	--iui-color-background-hover
--buic-background-control	--iui-color-background
--buic-row-selection	--iui-color-background-accent-muted
--buic-row-hover	--iui-color-background-hover
--buic-button-gradient1	`rgba(var(--iui-color-...

v4.16.5

Release notes

Changes

• Fix Toolbar to avoid rendering of borders when there are no items (#1004)
• Update deprecation message of ToolbarActionItem["icon"] (#1009)
• Fix copyStyles to ignore errors on external resource links (#1011)
• Fix tool conditionals that depend on active viewport when content control APIs are not used (#1015)
• Fix synchronization of lock properties by properly invoking applyToolSettingPropertyChange (#1017)
• Fix undefined property access within StatusBarComposer component (#1019)

Full changelog: 4.16.4...4.16.5

v4.16.4

Release notes

Changes

• Fix link style load timing issue in window popups (backport #994) (#998)

Full changelog: 4.16.3...4.16.4

v4.16.3

Release notes

Changes

• Render MenuItem without item or submenu (backport #989) (#992)

Full changelog: 4.16.2...4.16.3

v4.16.2

Release notes

Changes

• Fixed tool setting editor not updating state after value change (backport #982) (#985)
• Fix new toolbars to handle event ids as case insensitive (backport #980) (#987)
• Increase SelectionCountField margins (#988)

Full changelog: 4.16.1...4.16.2

v4.16.1

Release notes

Changes

• Bump axios (#975)
• Fix useConditionalValue to handle event ids as case insensitive (#973)
• Fix useActiveViewport to correctly return the active viewport (#969)
• Render default navigation aid only if content control is not used (#977)

Full changelog: 4.16.0...4.16.1

v4.16.0

4.16.0 Change Notes

Table of contents:

• @itwin/appui-react
  • Deprecations
  • Additions
  • Changes
  • Fixes
• @itwin/components-react
  • Deprecations
  • Additions
  • Changes
  • Fixes
• @itwin/core-react
  • Deprecations
  • Additions
  • Changes
• @itwin/components-react
  • Additions

@itwin/appui-react

Deprecations

• Deprecated all APIs associated with ConfigurableUiControl class. It is recommended for applications to continue using classId to specify content via content control APIs until all tools and UI elements that are used with that specific content control are refactored. #888

  • AccuDrawWidgetControl class. Use AccuDrawWidget component instead.

  • CubeNavigationAidControl class. Use @itwin/imodel-components-react#CubeNavigationAid component instead.

  • DrawingNavigationAidControl class. Use @itwin/imodel-components-react#DrawingNavigationAid component instead.

  • SheetNavigationAidControl class. Use SheetNavigationAid component instead.

  • StandardRotationNavigationAidControl class. Use StandardRotationNavigationAid component instead.

  • StatusBarWidgetComposerControl class. Use StatusBarComposer component instead.

  • IModelViewportControl class and IModelViewportControlOptions interface and ViewOverlayProps.featureOptions property. Use @itwin/imodel-components-react#ViewportComponent component instead.

    IModelViewportControlOptions previously specified through applicationData property of ContentProps interface can be passed as props to ViewportComponent component.

    // Before
    const content = {
      id: `viewport-1`,
      classId: IModelViewportControl,
      applicationData: {
        viewState: UiFramework.getDefaultViewState,
        iModelConnection: UiFramework.getIModelConnection,
      },
    } satisfies ContentProps;
    
    // After
    function ViewportContent() {
      const [iModel] = React.useState(UiFramework.getIModelConnection());
      const [viewState] = React.useState(UiFramework.getDefaultViewState());
      return <ViewportComponent viewState={viewState} imodel={iModel} />;
    }
    
    const content = {
      id: `viewport-1`,
      classId: "",
      content: <ViewportContent />,
    } satisfies ContentProps;

    DefaultViewOverlay previously configured through IModelViewportControlOptions can be rendered as a sibling of ViewportComponent component. Configuration specified through applicationData.featureOptions.defaultViewOverlay can be passed as props to DefaultViewOverlay component.

    // Before
    const content = {
      id: `viewport-1`,
      classId: IModelViewportControl,
      applicationData: {
        featureOptions: {
          defaultViewOverlay: {
            enableScheduleAnimationViewOverlay: true,
          },
        },
      },
    } satisfies ContentProps;
    
    // After
    function ViewportContent() {
      const [viewport, setViewport] = React.useState<ScreenViewport>();
    
      return (
        <>
          <ViewportComponent viewportRef={(v) => setViewport(v)} />
          {viewport && (
            <DefaultViewOverlay viewport={viewport} scheduleAnimation={true} />
          )}
        </>
      );
    }
    
    const content = {
      id: `viewport-1`,
      classId: "",
      content: <ViewportContent />,
    } satisfies ContentProps;

    To replicate IModelViewportControlOptions.supplyViewOverlay behavior you could use a render prop:

    // Before
    const content = {
      id: `viewport-1`,
      classId: IModelViewportControl,
      applicationData: {
        supplyViewOverlay: () => <>Custom view overlay</>,
      },
    } satisfies ContentProps;
    
    // After
    function ViewportContent(props: {
      renderViewOverlay?: (viewport: ScreenViewport) => React.ReactNode;
    }) {
      const [viewport, setViewport] = React.useState<ScreenViewport>();
      return (
        <>
          <ViewportComponent viewportRef={(v) => setViewport(v)} />
          {viewport && props.renderViewOverlay?.(viewport)}
        </>
      );
    }
    
    const content = {
      id: `viewport-1`,
      classId: "",
      content: (
        <ViewportContent renderViewOverlay={() => <>Custom view overlay</>} />
      ),
    } satisfies ContentProps;

  • ConfigurableUiContentProps.viewOverlay property. Components used in ContentProps.content should control view overlay visibility.

  • ViewportContentControl class. NavigationAidHost component used this class to render navigation aid specific to activated content control and would handle view selection changes. NavigationAidHost is updated to render a default navigation aid depending on the active viewport view when content control is not used (ContentProps.classId is set to an empty string). If a custom navigation aid is needed, applications can provide a custom component via navigationAid prop of ViewToolWidgetComposer or navigationAidHost prop of NavigationWidgetComposer components.

  • FloatingContentControl class. Use UiItemsProvider to provide a floating Widget instead. Additionally, use ContentOverlay component to display the active content indicator.

  • FloatingViewportContent component, useFloatingViewport hook, FloatingViewportContentControl class and related type FloatingViewportContentProps. Wrap @itwin/imodel-components-react#ViewportComponent component with a ContentOverlay instead.

  • FloatingViewportContentWrapper component and related props type FloatingViewportContentWrapperProps. Use ContentOverlay component to display the active content indicator instead.

  • Base classes ConfigurableBase, ConfigurableUiElement, NavigationAidControl, ConfigurableUiControl, ContentControl, StatusBarWidgetControl, WidgetControl, properties WidgetDef.classId, WidgetDef.getWidgetControl, WidgetDef.widgetControl, UiFramework.controls, and related types FrameworkControls, ConfigurableCreateInfo, ConfigurableUiControlConstructor, ConfigurableUiControlType, SupportsViewSelectorChange. Use React components returned by the control instead when defining content in a content group and see inline documentation for suggested replacements.

  • activeContent, oldContent properties of ActiveContentChangedEventArgs interface. Use id property to identify the activated and deactivated contents instead.

  • getContentControl,getContentControlById, getContentControls, getContentNodes, getControlFromElement methods of ContentGroup class. Use contentPropsList property instead.

  • fillLayoutContainer method and rootSplit getter of ContentLayoutDef class that are used internally only.

  • applicationData, classId properties of ContentProps interface. Use content property to specify a React node instead.

  • addFloatingContentControl, contentSupportsCamera, dropFloatingContentControl, getActive, getActiveContentControl, isContent3dView,isContentDrawingView, isContentOrthographicView, isContentSheetView, isContentSpatialView, refreshActive, setActive methods of FrameworkContent. See inline documentation for suggested replacements.

  • ToolInformation, ToolUiProvider classes, activeToolInformation property of FrameworkFrontstages interface without a replacement. New APIs will be added in the future based on submitted use-cases. For simple scenarios, use IModelApp.toolAdmin APIs instead.

  • onContentControlActivatedEvent property of FrameworkFrontstages interface. Use FrameworkContent.onActiveContentChangedEvent instead.

  • SyncUiEventId.ContentControlActivated enum value. Use SyncUiEventId.ActiveContentChanged instead.

  • addFloatingContentControl, contentControls, dropFloatingContentControl, setActiveView, setActiveViewFromViewport, of FrontstageDef class. See inline documentation for suggested replacements.

  • StatusBarFieldId type which is not used in AppUI packages.

  • StatusBarProps interface of a deprecated StatusBar component.

  • ViewSelector.onViewSelectorChangedEvent property. Use onViewSelected prop of ViewSelector component instead.

• Deprecated properties that have BadgeType as type and added replacement properties that use the new BadgeKind type. #899

  • badge property in CommonBackstageItem, CommonStatusBarItem, CommonToolbarItem, Widget. Use badgeKind property instead.
  • badgeType property in CursorMenuItemProps, FrameworkKeyboardShortcut, ItemDefBase, ItemProps, KeyboardShortcutProps. Use badgeKind property instead.
  • badgeType getter in WidgetDef. Use badgeKind getter instead.

• Deprecated APIs that were using IconSpec type. Even though ReactNode is defined in an IconSpec union type, deprecations are needed to prevent unintentional issues when a string is interpreted as a dataURI or web font icon class name. #901

  • AccuDrawUiSettings.angleIcon, AccuDrawUiSettings.distanceIcon, AccuDrawUiSettings.xIcon, AccuDrawUiSettings.yIcon, AccuDrawUiSettings.zIcon, Widget.icon, StatusBarActionItem.icon, StatusBarLabelItem.icon, ToolbarActionItem.icon, ToolbarCustomItem.icon, ToolbarGroupItem.icon BackstageAppButton.icon, CardInfo.iconSpec, FrameworkKeyboardShortcut.iconSpec, ListPickerProps.iconSpec, SheetCardProps.iconSpec, KeyboardShortcutProps.icon, KeyboardShortcutProps.iconSpec, CursorMenuItemProps.icon, CursorMenuItemProps.iconSpec properties. iconSpec getter and setter of WidgetDef...

v4.15.5

Release notes

Changes

• Fix UI visibility when autoHideUi is toggled (#930)

Full changelog: 4.15.4...4.15.5

v4.15.4

Release notes

Changes

• Fix popout widget changing position on second monitor (#918)
• Fix element stacking (#922)

Full changelog: 4.15.3...4.15.4

v4.14.2

Release notes

Changes

• Fix popout widget changing position on second monitor (#919)
• Fix element stacking (#923)

Full changelog: 4.14.1...4.14.2