Synchronize baseui

vmatthes · Dec 7, 2022 · a78234b · a78234b
1 parent d81ad7d
commit a78234b
Show file tree

Hide file tree

Showing 299 changed files with 1,533 additions and 196 deletions.
diff --git a/src/a11y/a11y.tsx b/src/a11y/a11y.tsx
@@ -73,6 +73,7 @@ function Violation(props: ViolationProps) {
   React.useEffect(() => {
     const node = document.querySelector(props.target);
     if (node) {
+      // @ts-ignore
       setAnchor(node);
 
       node.setAttribute('style', `border: solid 1px ${theme.colors.negative300};`);
@@ -100,6 +101,7 @@ function Violation(props: ViolationProps) {
         placement={TETHER_PLACEMENT.bottom}
       >
         <ViolationContainer
+          // @ts-ignore
           ref={setPopper}
           $top={`${offset.top}px` || '0px'}
           $left={`${offset.left}px` || '0px'}
@@ -126,8 +128,10 @@ export default function A11y(props: { children: React.ReactNode }) {
       }
 
       const id = requestIdleCallback(() => {
+        // @ts-ignore
         validateNode(child.current).then(setViolations);
       });
+      // @ts-ignore
       setIdleID(id);
     }
   }, [props.children]);

diff --git a/src/accordion/accordion.tsx b/src/accordion/accordion.tsx
@@ -24,6 +24,7 @@ export default class Accordion extends React.Component<AccordionProps, Accordion
     stateReducer: (type, newState) => newState,
   };
 
+  // @ts-ignore
   state = {
     expanded: [],
     ...this.props.initialState,
@@ -128,6 +129,7 @@ export default class Accordion extends React.Component<AccordionProps, Accordion
         renderAll,
         overrides: child.props.overrides || overrides,
         disabled: child.props.disabled || disabled,
+        // @ts-ignore
         onChange: (...args) => this.onPanelChange(key, child.props.onChange, ...args),
       };
       return React.cloneElement(child, props);
@@ -139,6 +141,7 @@ export default class Accordion extends React.Component<AccordionProps, Accordion
     const { Root: RootOverride } = overrides;
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
     return (
+      // @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete
       <Root
         data-baseweb="accordion"
         $disabled={this.props.disabled}

diff --git a/src/accordion/panel.tsx b/src/accordion/panel.tsx
@@ -34,6 +34,7 @@ const Panel = (
     title = '',
     renderAll = false,
   }: PanelProps,
+  // @ts-ignore
   ref
 ) => {
   const [localState, setLocalState] = React.useState<{
@@ -172,7 +173,9 @@ const Panel = (
   return (
     <LocaleContext.Consumer>
       {(locale) => (
+        // @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete
         <PanelContainer {...sharedProps} {...panelContainerProps}>
+          {/* @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete */}
           <Header
             tabIndex={0}
             role="button"
@@ -188,13 +191,15 @@ const Panel = (
             ref={ref}
           >
             {title}
+            {/* @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete */}
             <ToggleIcon
               viewBox="0 0 24 24"
               title={localState.expanded ? locale.accordion.collapse : locale.accordion.expand}
               size={16}
               {...toggleIconProps}
               {...sharedProps}
             >
+              {/* @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete */}
               <ToggleIconGroup {...sharedProps} {...toggleIconGroupProps}>
                 <path
                   fillRule="evenodd"
@@ -209,6 +214,7 @@ const Panel = (
               />
             </ToggleIcon>
           </Header>
+          {/* @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete */}
           <ContentAnimationContainer
             {...sharedProps}
             {...contentAnimationProps}
@@ -219,6 +225,7 @@ const Panel = (
               }
             }}
           >
+            {/* @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete */}
             <Content
               ref={_animateRef}
               {...sharedProps}

diff --git a/src/accordion/stateful-panel.tsx b/src/accordion/stateful-panel.tsx
@@ -12,6 +12,7 @@ import type { StatefulPanelProps } from './types';
 export default function StatefulPanel(props: StatefulPanelProps) {
   const { children, ...restProps } = props;
   return (
+    // @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete
     <StatefulContainer {...restProps}>
       {(componentProps) => <Panel {...componentProps}>{children}</Panel>}
     </StatefulContainer>

diff --git a/src/accordion/stateless-accordion.tsx b/src/accordion/stateless-accordion.tsx
@@ -22,6 +22,7 @@ function StatelessAccordion({
   const { Root: RootOverrides, ...PanelOverrides } = overrides;
   const [Root, rootProps] = getOverrides(RootOverrides, StyledRoot);
   return (
+    // @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete
     <Root data-baseweb="accordion" {...rootProps}>
       {React.Children.map(children, (child, index) => {
         let normalizedChild =
@@ -40,6 +41,7 @@ function StatelessAccordion({
             // Don't bother constructing the wrapper function if no one is listening
             onChange && typeof onChange === 'function'
               ? () => {
+                  // @ts-ignore
                   let next;
                   if (accordion) {
                     if (expanded.includes(key)) {
@@ -54,6 +56,7 @@ function StatelessAccordion({
                       next = [...expanded, key];
                     }
                   }
+                  // @ts-ignore
                   onChange({ key, expanded: next });
                 }
               : onChange,

diff --git a/src/app-nav-bar/__tests__/utils.test.ts b/src/app-nav-bar/__tests__/utils.test.ts
@@ -32,11 +32,15 @@ describe('setItemActive', () => {
     const nextItems = setItemActive(items, nextActive);
 
     expect(nextItems[0].active).toBe(false);
+    // @ts-ignore
     expect(nextItems[0].children[0].active).toBe(false);
+    // @ts-ignore
     expect(nextItems[0].children[1].active).toBe(false);
 
     expect(nextItems[1].active).toBe(true);
+    // @ts-ignore
     expect(nextItems[1].children[0].active).toBe(false);
+    // @ts-ignore
     expect(nextItems[1].children[1].active).toBe(true);
   });
 
@@ -57,11 +61,15 @@ describe('setItemActive', () => {
     const nextItems = setItemActive(items, nextActive);
 
     expect(nextItems[0].active).toBe(true);
+    // @ts-ignore
     expect(nextItems[0].children[0].active).toBe(true);
+    // @ts-ignore
     expect(nextItems[0].children[1].active).toBe(false);
 
     expect(nextItems[1].active).toBe(false);
+    // @ts-ignore
     expect(nextItems[1].children[0].active).toBe(false);
+    // @ts-ignore
     expect(nextItems[1].children[1].active).toBe(false);
   });
 
@@ -71,6 +79,7 @@ describe('setItemActive', () => {
       { label: 'two', info: { id: 2 } },
     ];
     const nextActive = items[0];
+    // @ts-ignore
     const getId = (item) => (item.info ? item.info.id : item.label);
     const nextItems = setItemActive(items, nextActive, getId);
 

diff --git a/src/app-nav-bar/app-nav-bar.tsx b/src/app-nav-bar/app-nav-bar.tsx
@@ -26,30 +26,35 @@ import {
 import type { AppNavBarProps } from './types';
 import { defaultMapItemToNode, mapItemsActive } from './utils';
 
+// @ts-ignore
 function MainMenuItem(props) {
   const { item, kind = KIND.primary, mapItemToNode, onSelect, overrides = {} } = props;
   const [focusVisible, setFocusVisible] = React.useState(false);
 
+  // @ts-ignore
   function handleFocus(event) {
     if (isFocusVisible(event)) {
       setFocusVisible(true);
     }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   function handleBlur(event) {
     if (focusVisible) {
       setFocusVisible(false);
     }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   function handleClick(event) {
     if (onSelect) {
       onSelect(item);
     }
   }
 
+  // @ts-ignore
   function handleKeyDown(event) {
     if (event.key === 'Enter' && onSelect) {
       onSelect(item);
@@ -79,6 +84,7 @@ function MainMenuItem(props) {
   );
 }
 
+// @ts-ignore
 function SecondaryMenu(props) {
   const { items = [], mapItemToNode, onSelect, overrides = {} } = props;
 
@@ -93,6 +99,7 @@ function SecondaryMenu(props) {
       aria-label="Secondary navigation"
       {...secondaryMenuContainerProps}
     >
+      {/* @ts-ignore */}
       {items.map((item, index) => (
         // Replace with a menu item renderer
         <MainMenuItem

diff --git a/src/app-nav-bar/mobile-menu.tsx b/src/app-nav-bar/mobile-menu.tsx
@@ -162,6 +162,7 @@ export default function MobileMenu(props: AppNavBarProps) {
       >
         <MobileMenu
           items={currentNavItems}
+          // @ts-ignore
           onItemSelect={({ item }) => {
             if (item.PARENT_MENU_ITEM) {
               // Remove current parent item selected to return to
@@ -176,6 +177,7 @@ export default function MobileMenu(props: AppNavBarProps) {
                 setCurrentNavItems(items);
               } else {
                 const newParentItem = {
+                  // @ts-ignore
                   ...updatedAncestorNavItems[updatedAncestorNavItems.length - 1],
                   [PARENT_MENU_ITEM]: true,
                 };
@@ -193,6 +195,7 @@ export default function MobileMenu(props: AppNavBarProps) {
 
             if (item.children && item.children.length) {
               const parentItem = { ...item, [PARENT_MENU_ITEM]: true };
+              // @ts-ignore
               setAncestorNavItems([...ancestorNavItems, item]);
               setCurrentNavItems([parentItem, ...item.children]);
               return;

diff --git a/src/app-nav-bar/styled-components.ts b/src/app-nav-bar/styled-components.ts
@@ -52,13 +52,16 @@ export const StyledRoot = styled('div', (props) => {
     for (let i = 0; i < breakpoints.length; i++) {
       const margin = $theme.grid.margins[i];
       if (margin == null) {
+        // @ts-ignore
         margins.push($theme.grid.margins[$theme.grid.margins.length - 1]);
       } else {
+        // @ts-ignore
         margins.push(margin);
       }
     }
   } else {
     for (let i = 0; i < breakpoints.length; i++) {
+      // @ts-ignore
       margins.push($theme.grid.margins);
     }
   }

diff --git a/src/app-nav-bar/user-menu.tsx b/src/app-nav-bar/user-menu.tsx
@@ -33,6 +33,7 @@ const UserMenuListItem = React.forwardRef<any, any>((props, ref) => {
   );
 });
 
+// @ts-ignore
 const svgStyleOverride = ({ $theme }) => ({ paddingLeft: $theme.sizing.scale200 });
 
 export default function UserMenuComponent(
@@ -93,6 +94,7 @@ export default function UserMenuComponent(
       content={({ close }) => (
         <UserMenu
           items={userItems}
+          // @ts-ignore
           onItemSelect={({ item }) => {
             props.onItemSelect(item);
             close();

diff --git a/src/aspect-ratio-box/aspect-ratio-box.tsx b/src/aspect-ratio-box/aspect-ratio-box.tsx
@@ -10,6 +10,7 @@ import { Block, type StyledBlockProps } from '../block';
 import { mergeOverrides } from '../helpers/overrides';
 import type { AspectRatioBoxProps } from './types';
 
+// @ts-ignore
 const aspectRatioBoxStyle = ({ $aspectRatio }) => ({
   position: 'relative',
   '::before': {

diff --git a/src/avatar/__tests__/avatar.test.tsx b/src/avatar/__tests__/avatar.test.tsx
@@ -11,11 +11,13 @@ import { Avatar } from '..';
 
 // manually trigger src load error. jsdom will not fire a load event
 // https://github.com/jsdom/jsdom/issues/1816#issuecomment-310106280
+// @ts-ignore
 function triggerLoadError(container) {
   const img = container.querySelector('img');
   if (img) fireEvent.error(img);
 }
 
+// @ts-ignore
 function triggerLoad(container) {
   const img = container.querySelector('img');
   if (img) fireEvent.load(img);

diff --git a/src/avatar/__tests__/styled-component.test.tsx b/src/avatar/__tests__/styled-component.test.tsx
@@ -23,6 +23,7 @@ describe('Avatar styled Components flow', () => {
   });
 
   test('it provides flow error if we not provide all required props for StyledRoot', () => {
+    // @ts-ignore
     const CustomRoot = (props) => {
       const { children, ...rest } = props;
       // @ts-expect-error missing $didImageFailToLoad prop

diff --git a/src/avatar/avatar.tsx b/src/avatar/avatar.tsx
@@ -15,8 +15,10 @@ import {
 } from './styled-components';
 import type { AvatarProps } from './types';
 
+// @ts-ignore
 function getInitials(name) {
   const words = name.split(' ');
+  // @ts-ignore
   const initials = words.map((word) => word[0]);
   return initials.slice(0, 2).join('').toUpperCase();
 }
@@ -63,6 +65,7 @@ export default function Avatar({
   const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
 
   return (
+    // @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete
     <Root
       aria-label={imageLoaded ? null : name}
       role={imageLoaded ? null : 'img'}
@@ -71,8 +74,10 @@ export default function Avatar({
       data-baseweb="avatar"
       {...rootProps}
     >
+      {/* @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete */}
       <Avatar ref={imageRef} alt={name} $imageLoaded={imageLoaded} $size={size} {...avatarProps} />
 
+      {/* @ts-ignore TS2786 error with web-eats-v2, can remove once React 18 migration complete */}
       {!imageLoaded && <Initials {...initialsProps}>{initials || getInitials(name)}</Initials>}
     </Root>
   );

diff --git a/src/avatar/styled-components.ts b/src/avatar/styled-components.ts
@@ -7,6 +7,7 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles';
 import type { AvatarStyleProps, RootStyleProps, InitialsStyleProps } from './types';
 
+// @ts-ignore
 function getSize(props) {
   const { $size, $theme } = props;
 
@@ -44,6 +45,7 @@ export const Initials = styled<'div', InitialsStyleProps>('div', (props) => ({
 
 Initials.displayName = 'Initials';
 
+// @ts-ignore
 export const Root = styled<'div', RootStyleProps>('div', (props) => {
   const { $didImageFailToLoad } = props;
   const themedSize = getSize(props);