From 26674e70c66b686d0f0baa569b186292c41e5726 Mon Sep 17 00:00:00 2001
From: Andrew Tatomyr <andrew.tatomyr@redocly.com>
Date: Fri, 15 Sep 2023 13:28:35 +0300
Subject: [PATCH] fix: more cases for react18 and cli integration (#2416)

---
 demo/ComboBox.tsx                                        | 8 ++++----
 src/common-elements/schema.ts                            | 6 +++---
 src/components/Schema/OneOfSchema.tsx                    | 4 ++--
 src/components/StickySidebar/StickyResponsiveSidebar.tsx | 6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/demo/ComboBox.tsx b/demo/ComboBox.tsx
index 433329082c..97d2b25b67 100644
--- a/demo/ComboBox.tsx
+++ b/demo/ComboBox.tsx
@@ -6,8 +6,8 @@
 import * as React from 'react';
 import styled from '../src/styled-components';
 
-const DropDownItem = styled.li<{ active?: boolean }>`
-  ${(props: any) => (props.active ? 'background-color: #eee' : '')};
+const DropDownItem = styled.li<{ $active?: boolean }>`
+  ${(props: any) => (props.$active ? 'background-color: #eee' : '')};
   padding: 13px 16px;
   &:hover {
     background-color: #eee;
@@ -31,7 +31,7 @@ const DropDownList = styled.ul`
   list-style: none;
   margin: 4px 0 0 0;
   padding: 5px 0;
-  font-family: Roboto,sans-serif;
+  font-family: Roboto, sans-serif;
   overflow: hidden;
 `;
 
@@ -183,7 +183,7 @@ export default class ComboBox extends React.Component<ComboBoxProps, ComboBoxSta
   renderOption = (option: { value: string; label: string }, idx: number) => {
     return (
       <DropDownItem
-        active={idx === this.state.activeItemIdx}
+        $active={idx === this.state.activeItemIdx}
         key={option.value}
         // tslint:disable-next-line
         onMouseDown={() => {
diff --git a/src/common-elements/schema.ts b/src/common-elements/schema.ts
index 6fcd282454..b48ce43dbe 100644
--- a/src/common-elements/schema.ts
+++ b/src/common-elements/schema.ts
@@ -15,7 +15,7 @@ export const OneOfLabel = styled.span`
 }
 `;
 
-export const OneOfButton = styled.button<{ active: boolean; deprecated: boolean }>`
+export const OneOfButton = styled.button<{ $active: boolean; $deprecated: boolean }>`
   display: inline-block;
   margin-right: 10px;
   margin-bottom: 5px;
@@ -29,10 +29,10 @@ export const OneOfButton = styled.button<{ active: boolean; deprecated: boolean
     box-shadow: 0 0 0 1px ${props => props.theme.colors.primary.main};
   }
 
-  ${({ deprecated }) => (deprecated && deprecatedCss) || ''};
+  ${({ $deprecated }) => ($deprecated && deprecatedCss) || ''};
 
   ${props => {
-    if (props.active) {
+    if (props.$active) {
       return `
       color: white;
       background-color: ${props.theme.colors.primary.main};
diff --git a/src/components/Schema/OneOfSchema.tsx b/src/components/Schema/OneOfSchema.tsx
index cec76d3c6b..bcaa056d64 100644
--- a/src/components/Schema/OneOfSchema.tsx
+++ b/src/components/Schema/OneOfSchema.tsx
@@ -23,8 +23,8 @@ export class OneOfButton extends React.Component<OneOfButtonProps> {
     const { idx, schema, subSchema } = this.props;
     return (
       <StyledOneOfButton
-        deprecated={subSchema.deprecated}
-        active={idx === schema.activeOneOf}
+        $deprecated={subSchema.deprecated}
+        $active={idx === schema.activeOneOf}
         onClick={this.activateOneOf}
       >
         {subSchema.title || subSchema.typePrefix + subSchema.displayType}
diff --git a/src/components/StickySidebar/StickyResponsiveSidebar.tsx b/src/components/StickySidebar/StickyResponsiveSidebar.tsx
index 930cdeef91..1718128bb4 100644
--- a/src/components/StickySidebar/StickyResponsiveSidebar.tsx
+++ b/src/components/StickySidebar/StickyResponsiveSidebar.tsx
@@ -25,7 +25,7 @@ export interface StickySidebarState {
 
 const stickyfill = Stickyfill && Stickyfill();
 
-const StyledStickySidebar = styled.div<{ open?: boolean }>`
+const StyledStickySidebar = styled.div<{ $open?: boolean }>`
   width: ${props => props.theme.sidebar.width};
   background-color: ${props => props.theme.sidebar.backgroundColor};
   overflow: hidden;
@@ -45,7 +45,7 @@ const StyledStickySidebar = styled.div<{ open?: boolean }>`
     z-index: 20;
     width: 100%;
     background: ${({ theme }) => theme.sidebar.backgroundColor};
-    display: ${props => (props.open ? 'flex' : 'none')};
+    display: ${props => (props.$open ? 'flex' : 'none')};
   `};
 
   @media print {
@@ -130,7 +130,7 @@ export class StickyResponsiveSidebar extends React.Component<
     return (
       <>
         <StyledStickySidebar
-          open={open}
+          $open={open}
           className={this.props.className}
           style={{
             top,