upgrade

Zoran Liu · Zoran Liu · commit ebc10218381e · 2022-04-01T21:13:33.000+08:00
diff --git a/apps/docs/src/app/react-components/react-dot/react-dot.component.ts b/apps/docs/src/app/react-components/react-dot/react-dot.component.ts
@@ -38,7 +38,7 @@ import { ReactWrapperComponent } from '@angular-react/core';
     </ReactDot>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
 })
 export class ReactDotComponent extends ReactWrapperComponent<ReactDotProps> {
   @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
diff --git a/libs/core/src/lib/renderer/renderer.ts b/libs/core/src/lib/renderer/renderer.ts
@@ -41,7 +41,13 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 {
   }
 
   createRenderer(element: any, type: RendererType2 | null): Renderer2 {
-    if (type && type.styles.length && type.styles[0] === 'react-renderer') {
+    if (
+      type?.styles?.length
+      && (
+        type.styles[0] === 'react-renderer'
+        || type.styles[0] === 'react-renderer {}'
+      )
+    ) {
       return this.defaultReactRenderer;
     }
 
diff --git a/libs/fabric/lib/components/breadcrumb/breadcrumb.component.ts b/libs/fabric/lib/components/breadcrumb/breadcrumb.component.ts
@@ -40,7 +40,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Breadcrumb>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbProps> implements OnInit {
diff --git a/libs/fabric/lib/components/button/action-button.component.ts b/libs/fabric/lib/components/button/action-button.component.ts
@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </ActionButton>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabActionButtonComponent extends FabBaseButtonComponent {
diff --git a/libs/fabric/lib/components/button/base-button.component.ts b/libs/fabric/lib/components/button/base-button.component.ts
@@ -110,7 +110,7 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButt
         }),
         this._changeableItemsHelper.onChildItemChanged.subscribe(({ key, changes }: CommandBarItemChangedPayload) => {
           const newItems = this.menuItemsDirectives.map(item =>
-            item.key === key ? mergeItemChanges(item, changes) : item
+            item.key === key ? mergeItemChanges<ContextualMenuItemDirective>(item, changes) : item
           );
           setItems(newItems);
 
diff --git a/libs/fabric/lib/components/button/command-bar-button.component.ts b/libs/fabric/lib/components/button/command-bar-button.component.ts
@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </CommandBarButton>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCommandBarButtonComponent extends FabBaseButtonComponent {
diff --git a/libs/fabric/lib/components/button/compound-button.component.ts b/libs/fabric/lib/components/button/compound-button.component.ts
@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </CompoundButton>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCompoundButtonComponent extends FabBaseButtonComponent {
diff --git a/libs/fabric/lib/components/button/default-button.component.ts b/libs/fabric/lib/components/button/default-button.component.ts
@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </DefaultButton>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDefaultButtonComponent extends FabBaseButtonComponent {
diff --git a/libs/fabric/lib/components/button/icon-button.component.ts b/libs/fabric/lib/components/button/icon-button.component.ts
@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </IconButton>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabIconButtonComponent extends FabBaseButtonComponent {
diff --git a/libs/fabric/lib/components/button/messagebar-button.component.ts b/libs/fabric/lib/components/button/messagebar-button.component.ts
@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </MessageBarButton>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMessageBarButtonComponent extends FabBaseButtonComponent {
diff --git a/libs/fabric/lib/components/button/primary-button.component.ts b/libs/fabric/lib/components/button/primary-button.component.ts
@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </PrimaryButton>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPrimaryButtonComponent extends FabBaseButtonComponent {
diff --git a/libs/fabric/lib/components/button/split-button.component.ts b/libs/fabric/lib/components/button/split-button.component.ts
@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </SplitButton>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSplitButtonComponent extends FabBaseButtonComponent {
diff --git a/libs/fabric/lib/components/calendar/calendar.component.ts b/libs/fabric/lib/components/calendar/calendar.component.ts
@@ -56,7 +56,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Calendar>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps> implements AfterContentInit {
diff --git a/libs/fabric/lib/components/callout/callout.component.ts b/libs/fabric/lib/components/callout/callout.component.ts
@@ -63,7 +63,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Callout>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {
diff --git a/libs/fabric/lib/components/callout/focus-trap-callout.component.ts b/libs/fabric/lib/components/callout/focus-trap-callout.component.ts
@@ -66,7 +66,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Callout>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabFocusTrapCalloutComponent extends ReactWrapperComponent<IFocusTrapCalloutProps> {
diff --git a/libs/fabric/lib/components/checkbox/checkbox.component.ts b/libs/fabric/lib/components/checkbox/checkbox.component.ts
@@ -47,7 +47,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Checkbox>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCheckboxComponent extends ReactWrapperComponent<ICheckboxProps> implements OnInit {
diff --git a/libs/fabric/lib/components/choice-group/choice-group.component.ts b/libs/fabric/lib/components/choice-group/choice-group.component.ts
@@ -37,7 +37,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </ChoiceGroup>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupProps> {
diff --git a/libs/fabric/lib/components/combo-box/combo-box.component.ts b/libs/fabric/lib/components/combo-box/combo-box.component.ts
@@ -55,7 +55,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </ComboBox>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabComboBoxComponent extends FabBaseComboBoxComponent {
diff --git a/libs/fabric/lib/components/combo-box/virtualized-combo-box.component.ts b/libs/fabric/lib/components/combo-box/virtualized-combo-box.component.ts
@@ -55,7 +55,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </VirtualizedComboBox>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent {
diff --git a/libs/fabric/lib/components/command-bar/command-bar.component.ts b/libs/fabric/lib/components/command-bar/command-bar.component.ts
@@ -60,7 +60,7 @@ import {
     >
     </CommandBar>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarProps>
@@ -214,10 +214,7 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
   }
 }
 
-// Not using `Omit` here since it confused the TypeScript compiler and it just showed the properties listed here (`renderIcon`, `render` and `data`).
-// The type here is just `Omit` without the generics though.
-export interface ICommandBarItemOptions<TData = any>
-  extends Pick<ICommandBarItemProps, Exclude<KnownKeys<ICommandBarItemProps>, 'onRender' | 'onRenderIcon'>> {
+export interface ICommandBarItemOptions<TData = any> extends Omit<ICommandBarItemProps, 'onRender' | 'onRenderIcon'> {
   readonly renderIcon?: InputRendererOptions<ICommandBarItemOptionsRenderIconContext>;
   readonly render?: InputRendererOptions<ICommandBarItemOptionsRenderContext>;
   readonly data?: TData;
diff --git a/libs/fabric/lib/components/date-picker/date-picker.component.ts b/libs/fabric/lib/components/date-picker/date-picker.component.ts
@@ -64,7 +64,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </DatePicker>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerProps> {
diff --git a/libs/fabric/lib/components/details-list/details-list.component.ts b/libs/fabric/lib/components/details-list/details-list.component.ts
@@ -112,7 +112,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </DetailsList>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListProps>
diff --git a/libs/fabric/lib/components/dialog/dialog.component.ts b/libs/fabric/lib/components/dialog/dialog.component.ts
@@ -44,7 +44,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Dialog>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
@@ -88,7 +88,7 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
       <ReactContent><ng-content></ng-content></ReactContent>
     </DialogFooter>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFooterProps> {
@@ -131,7 +131,7 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
       <ReactContent><ng-content></ng-content></ReactContent>
     </DialogContent>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDialogContentComponent extends ReactWrapperComponent<IDialogContentProps> {
diff --git a/libs/fabric/lib/components/divider/divider.component.ts b/libs/fabric/lib/components/divider/divider.component.ts
@@ -28,7 +28,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </VerticalDivider>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDividerComponent extends ReactWrapperComponent<IVerticalDividerProps> {
diff --git a/libs/fabric/lib/components/dropdown/dropdown.component.ts b/libs/fabric/lib/components/dropdown/dropdown.component.ts
@@ -64,7 +64,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       [Dismiss]="onDismissHandler"
     ></Dropdown>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps> implements OnInit, AfterContentInit {
diff --git a/libs/fabric/lib/components/fabric/fabric.component.ts b/libs/fabric/lib/components/fabric/fabric.component.ts
@@ -23,7 +23,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Fabric>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabFabricComponent extends ReactWrapperComponent<IFabricProps> {
diff --git a/libs/fabric/lib/components/grouped-list/grouped-list.component.ts b/libs/fabric/lib/components/grouped-list/grouped-list.component.ts
@@ -49,7 +49,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </GroupedList>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListProps> implements OnInit {
diff --git a/libs/fabric/lib/components/hover-card/expanding-card.component.ts b/libs/fabric/lib/components/hover-card/expanding-card.component.ts
@@ -46,7 +46,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </ExpandingCard>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabExpandingCardComponent extends ReactWrapperComponent<IExpandingCardProps> implements OnInit {
diff --git a/libs/fabric/lib/components/hover-card/hover-card.component.ts b/libs/fabric/lib/components/hover-card/hover-card.component.ts
@@ -50,7 +50,7 @@ import { omit, Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </HoverCard>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps> {
diff --git a/libs/fabric/lib/components/hover-card/plain-card.component.ts b/libs/fabric/lib/components/hover-card/plain-card.component.ts
@@ -42,7 +42,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </PlainCard>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPlainCardComponent extends ReactWrapperComponent<IPlainCardProps> implements OnInit {
diff --git a/libs/fabric/lib/components/icon/icon.component.ts b/libs/fabric/lib/components/icon/icon.component.ts
@@ -31,7 +31,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Icon>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabIconComponent extends ReactWrapperComponent<IIconProps> {
diff --git a/libs/fabric/lib/components/image/image.component.ts b/libs/fabric/lib/components/image/image.component.ts
@@ -45,7 +45,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Image>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabImageComponent extends ReactWrapperComponent<IImageProps> {
diff --git a/libs/fabric/lib/components/link/link.component.ts b/libs/fabric/lib/components/link/link.component.ts
@@ -48,7 +48,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Disguise>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabLinkComponent extends ReactWrapperComponent<ILinkProps> {
diff --git a/libs/fabric/lib/components/marquee-selection/marquee-selection.component.ts b/libs/fabric/lib/components/marquee-selection/marquee-selection.component.ts
@@ -35,7 +35,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </MarqueeSelection>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMarqueeSelectionComponent extends ReactWrapperComponent<IMarqueeSelectionProps> {
diff --git a/libs/fabric/lib/components/message-bar/message-bar.component.ts b/libs/fabric/lib/components/message-bar/message-bar.component.ts
@@ -40,7 +40,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </MessageBar>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMessageBarComponent extends ReactWrapperComponent<IMessageBarProps> implements OnInit {
diff --git a/libs/fabric/lib/components/modal/modal.component.ts b/libs/fabric/lib/components/modal/modal.component.ts
@@ -52,7 +52,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Modal>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabModalComponent extends ReactWrapperComponent<IModalProps>
diff --git a/libs/fabric/lib/components/nav/nav.component.ts b/libs/fabric/lib/components/nav/nav.component.ts
@@ -35,7 +35,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Nav>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabNavComponent extends ReactWrapperComponent<INavProps> {
diff --git a/libs/fabric/lib/components/panel/panel.component.ts b/libs/fabric/lib/components/panel/panel.component.ts
@@ -62,7 +62,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Panel>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implements OnInit {
diff --git a/libs/fabric/lib/components/persona/persona.component.ts b/libs/fabric/lib/components/persona/persona.component.ts
@@ -90,7 +90,7 @@ export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps
     >
     </Persona>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps> implements OnInit {
@@ -160,7 +160,7 @@ export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps>
     >
     </PersonaCoin>
   `,
-  styles: ['react-renderer'],
+  styles: ['react-renderer {}'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPersonaCoinComponent extends FabPersonaBaseComponent<IPersonaCoinProps> implements OnInit {
diff --git a/libs/fabric/lib/components/pickers/people-picker/people-picker.component.ts b/libs/fabric/lib/components/pickers/people-picker/people-picker.component.ts
diff --git a/libs/fabric/lib/components/pickers/tag-picker/tag-picker.component.ts b/libs/fabric/lib/components/pickers/tag-picker/tag-picker.component.ts
diff --git a/libs/fabric/lib/components/pivot/pivot.component.ts b/libs/fabric/lib/components/pivot/pivot.component.ts
diff --git a/libs/fabric/lib/components/progress-indicator/progress-indicator.component.ts b/libs/fabric/lib/components/progress-indicator/progress-indicator.component.ts
diff --git a/libs/fabric/lib/components/rating/rating.component.ts b/libs/fabric/lib/components/rating/rating.component.ts
diff --git a/libs/fabric/lib/components/search-box/search-box.component.ts b/libs/fabric/lib/components/search-box/search-box.component.ts
diff --git a/libs/fabric/lib/components/shimmer/shimmer.component.ts b/libs/fabric/lib/components/shimmer/shimmer.component.ts
diff --git a/libs/fabric/lib/components/slider/slider.component.ts b/libs/fabric/lib/components/slider/slider.component.ts
diff --git a/libs/fabric/lib/components/spin-button/spin-button.component.ts b/libs/fabric/lib/components/spin-button/spin-button.component.ts
diff --git a/libs/fabric/lib/components/spinner/spinner.component.ts b/libs/fabric/lib/components/spinner/spinner.component.ts
diff --git a/libs/fabric/lib/components/text-field/masked-text-field.component.ts b/libs/fabric/lib/components/text-field/masked-text-field.component.ts
diff --git a/libs/fabric/lib/components/text-field/text-field.component.ts b/libs/fabric/lib/components/text-field/text-field.component.ts
diff --git a/libs/fabric/lib/components/toggle/toggle.component.ts b/libs/fabric/lib/components/toggle/toggle.component.ts
diff --git a/libs/fabric/lib/components/tooltip/tooltip-host.component.ts b/libs/fabric/lib/components/tooltip/tooltip-host.component.ts
diff --git a/libs/semantic-ui/src/lib/button/button.component.ts b/libs/semantic-ui/src/lib/button/button.component.ts

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,13 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 {`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`createRenderer(element: any, type: RendererType2 \| null): Renderer2 {`
`44`		`- if (type && type.styles.length && type.styles[0] === 'react-renderer') {`
	`44`	`+ if (`
	`45`	`+ type?.styles?.length`
	`46`	`+ && (`
	`47`	`+ type.styles[0] === 'react-renderer'`
	`48`	`+ \|\| type.styles[0] === 'react-renderer {}'`
	`49`	`+ )`
	`50`	`+ ) {`
`45`	`51`	`return this.defaultReactRenderer;`
`46`	`52`	`}`
`47`	`53`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';`
`40`	`40`	`>`
`41`	`41`	`</Breadcrumb>`
`42`	`42`	`,
`43`		`- styles: ['react-renderer'],`
	`43`	`+ styles: ['react-renderer {}'],`
`44`	`44`	`changeDetection: ChangeDetectionStrategy.OnPush,`
`45`	`45`	`})`
`46`	`46`	`export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbProps> implements OnInit {`