@moda/om 16.1.0 → 16.2.1

package/src/components/VerticalDivider/VerticalDivider.test.tsx

@@ -1,20 +1,19 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { VerticalDivider } from './VerticalDivider';
 
 describe('VerticalDivider', () => {
   it('renders correctly', () => {
-    const component = shallow(<VerticalDivider />);
+    render(<VerticalDivider aria-label="Divider" />);
 
-    expect(component.html()).toContain('<div class="VerticalDivider"></div>');
+    expect(screen.getByLabelText('Divider')).toBeVisible();
   });
 
   it('renders correctly - double', () => {
-    const component = shallow(<VerticalDivider double />);
+    render(<VerticalDivider aria-label="Divider" double />);
 
-    expect(component.html()).toContain(
-      '<div class="VerticalDivider VerticalDivider--double"></div>'
-    );
+    expect(screen.getByLabelText('Divider')).toBeVisible();
+    expect(screen.getByLabelText('Divider')).toHaveClass('VerticalDivider--double');
   });
 });

package/src/hooks/useKeyboardListNavigation.spec.ts

@@ -1,7 +1,7 @@
-import { renderHook, act } from '@testing-library/react';
-import { fireEvent } from '@testing-library/react';
-import { useKeyboardListNavigation } from './useKeyboardListNavigation';
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { renderHook, fireEvent } from '@testing-library/react';
 import { useRef } from 'react';
+import { useKeyboardListNavigation } from './useKeyboardListNavigation';
 
 describe('useKeyboardListNavigation', () => {
   const list = ['first', 'second', 'third', 'fourth'];
@@ -32,9 +32,7 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
 
     expect(result.current.cursor).toBe(1);
     expect(result.current.index).toBe(1);
@@ -48,10 +46,8 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
 
     expect(result.current.cursor).toBe(2);
     expect(result.current.index).toBe(2);
@@ -65,9 +61,7 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowUp' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowUp' });
 
     expect(result.current.cursor).toBe(-1);
     expect(result.current.index).toBe(3);
@@ -81,26 +75,20 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'End' });
-    });
+    fireEvent.keyDown(window, { key: 'End' });
 
     expect(result.current.cursor).toBe(3);
     expect(result.current.index).toBe(3);
     expect(result.current.selected).toBe('fourth');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowUp' });
-      fireEvent.keyDown(window, { key: 'ArrowUp' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowUp' });
+    fireEvent.keyDown(window, { key: 'ArrowUp' });
 
     expect(result.current.cursor).toBe(1);
     expect(result.current.index).toBe(1);
     expect(result.current.selected).toBe('second');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'End' });
-    });
+    fireEvent.keyDown(window, { key: 'End' });
 
     expect(result.current.cursor).toBe(3);
     expect(result.current.index).toBe(3);
@@ -120,26 +108,20 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(-1);
     expect(result.current.selected).toBeUndefined();
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'Home' });
-    });
+    fireEvent.keyDown(window, { key: 'Home' });
 
     expect(result.current.cursor).toBe(0);
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowUp' });
-      fireEvent.keyDown(window, { key: 'ArrowUp' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowUp' });
+    fireEvent.keyDown(window, { key: 'ArrowUp' });
 
     expect(result.current.cursor).toBe(-2);
     expect(result.current.index).toBe(2);
     expect(result.current.selected).toBe('third');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'Home' });
-    });
+    fireEvent.keyDown(window, { key: 'Home' });
 
     expect(result.current.cursor).toBe(0);
     expect(result.current.index).toBe(0);
@@ -158,9 +140,7 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 't' });
-    });
+    fireEvent.keyDown(window, { key: 't' });
 
     expect(result.current.cursor).toBe(2);
     expect(result.current.index).toBe(2);
@@ -171,9 +151,7 @@ describe('useKeyboardListNavigation', () => {
     const onEnter = jest.fn();
     renderHook(() => useKeyboardListNavigation({ list, onEnter }));
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'Enter' });
-    });
+    fireEvent.keyDown(window, { key: 'Enter' });
 
     expect(onEnter).toBeCalledTimes(1);
     expect(onEnter).toHaveBeenCalledWith({
@@ -183,14 +161,10 @@ describe('useKeyboardListNavigation', () => {
       state: { cursor: 0, interactive: false, length: 4 }
     });
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'Enter' });
-    });
+    fireEvent.keyDown(window, { key: 'Enter' });
 
     expect(onEnter).toBeCalledTimes(2);
     expect(onEnter).toHaveBeenLastCalledWith({
@@ -210,15 +184,11 @@ describe('useKeyboardListNavigation', () => {
 
     expect(result.current.cursor).toBe(0);
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
 
     expect(result.current.cursor).toBe(0);
 
-    act(() => {
-      fireEvent.keyDown(div, { key: 'ArrowDown' });
-    });
+    fireEvent.keyDown(div, { key: 'ArrowDown' });
 
     expect(result.current.cursor).toBe(1);
   });
@@ -237,9 +207,7 @@ describe('useKeyboardListNavigation', () => {
       expect(result.current.index).toBe(-1);
       expect(result.current.selected).toBeUndefined();
 
-      act(() => {
-        fireEvent.keyDown(window, { key: 'ArrowDown' });
-      });
+      fireEvent.keyDown(window, { key: 'ArrowDown' });
 
       expect(result.current.cursor).toBe(0);
       expect(result.current.index).toBe(0);
@@ -250,19 +218,13 @@ describe('useKeyboardListNavigation', () => {
       const onEnter = jest.fn();
       renderHook(() => useKeyboardListNavigation({ list, onEnter, waitForInteractive: true }));
 
-      act(() => {
-        fireEvent.keyDown(window, { key: 'Enter' });
-      });
+      fireEvent.keyDown(window, { key: 'Enter' });
 
       expect(onEnter).toBeCalledTimes(0);
 
-      act(() => {
-        fireEvent.keyDown(window, { key: 'ArrowDown' });
-      });
+      fireEvent.keyDown(window, { key: 'ArrowDown' });
 
-      act(() => {
-        fireEvent.keyDown(window, { key: 'Enter' });
-      });
+      fireEvent.keyDown(window, { key: 'Enter' });
 
       expect(onEnter).toBeCalledTimes(1);
     });

package/src/hooks/useKeyboardListNavigation.ts

@@ -56,6 +56,7 @@ export type UseKeyboardListNavigationProps<T> = {
     index: number;
   }): void;
   extractValue?(item: T): string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref?: React.MutableRefObject<any>;
 };
 
@@ -138,6 +139,7 @@ export const useKeyboardListNavigation = <T>({
     };
   }, [handleKeyDown, ref, idleTimeout]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => dispatch({ type: 'RESET', payload: { defaultCursor } }), [list.length]);
 
   const interactiveIndex = waitForInteractive && !state.interactive ? -1 : index;

package/src/hooks/useUpdateEffect.ts

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef } from 'react';
 
 export const useUpdateEffect: typeof useEffect = (effect, deps) => {

package/src/index.ts

@@ -2,6 +2,8 @@ import 'focus-visible';
 
 import { colors, typography, space, breakpoints } from '@moda/tokens';
 
+import { States } from './utilities';
+
 export const tokens = {
   colors,
   typography,
@@ -14,6 +16,4 @@ export { FocusOn } from 'react-focus-on';
 export * from './components';
 export * from './hooks';
 
-import { States } from './utilities';
-
 export const Utilities = { States };

package/src/mixins/font-smoothing/font-smoothing.stories.tsx

@@ -9,22 +9,22 @@ export default { title: 'Mixins/font-smoothing' };
 
 export const Default = () => (
   <Stack space={3}>
-    <div className='Story Mixins font-smoothing--antialiased'>
-      <Text treatment='eyebrow'>@include font-smoothing(antialiased);</Text>
+    <div className="Story Mixins font-smoothing--antialiased">
+      <Text treatment="eyebrow">@include font-smoothing(antialiased);</Text>
     </div>
 
-    <div className='Story Mixins font-smoothing--subpixel'>
-      <Text treatment='eyebrow'>@include font-smoothing(subpixel);</Text>
+    <div className="Story Mixins font-smoothing--subpixel">
+      <Text treatment="eyebrow">@include font-smoothing(subpixel);</Text>
     </div>
 
-    <div className='Story Mixins font-smoothing--antialiased' style={{ backgroundColor: 'black' }}>
-      <Text color='snow' treatment='eyebrow'>
+    <div className="Story Mixins font-smoothing--antialiased" style={{ backgroundColor: 'black' }}>
+      <Text color="snow" treatment="eyebrow">
         @include font-smoothing(antialiased);
       </Text>
     </div>
 
-    <div className='Story Mixins font-smoothing--subpixel' style={{ backgroundColor: 'black' }}>
-      <Text color='snow' treatment='eyebrow'>
+    <div className="Story Mixins font-smoothing--subpixel" style={{ backgroundColor: 'black' }}>
+      <Text color="snow" treatment="eyebrow">
         @include font-smoothing(subpixel);
       </Text>
     </div>

package/src/mixins/overflow-scroll/overflow-scroll.stories.tsx

@@ -5,9 +5,9 @@ import './overflow-scroll.stories.scss';
 export default { title: 'Mixins/overflow-scroll' };
 
 export const Default = () => (
-  <div className='Story Mixins overflow-scroll'>Overflowed on the y axis!</div>
+  <div className="Story Mixins overflow-scroll">Overflowed on the y axis!</div>
 );
 
 export const OverflowX = () => (
-  <div className='Story Mixins overflow-scroll-x'>Overflowed on the x axis!</div>
+  <div className="Story Mixins overflow-scroll-x">Overflowed on the x axis!</div>
 );

package/src/mixins/stack/stack.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
 import React from 'react';
 import { space } from '@moda/tokens';
 
@@ -6,10 +7,8 @@ import './stack.stories.scss';
 export default { title: 'Mixins/stack' };
 
 export const Default = () => (
-  <div className='Story Mixins stack'>
-    <p>
-      Defaults to {`$space: 4`} === {space.scale[4]}
-    </p>
+  <div className="Story Mixins stack">
+    <p>Defaults to $space: 4 === {space.scale[4]}</p>
 
     <span>Notice the different element tags</span>
 
@@ -18,8 +17,8 @@ export const Default = () => (
 );
 
 export const Horizontal = () => (
-  <div className='Story Mixins stack stack--horizontal'>
-    <p>Accepts {`$direction: horizontal`}</p>
+  <div className="Story Mixins stack stack--horizontal">
+    <p>Accepts $direction: horizontal</p>
 
     <span>Notice the different element tags</span>
 

package/src/mixins/thin-underline/thin-underline.stories.tsx

@@ -4,4 +4,4 @@ import './thin-underline.stories.scss';
 
 export default { title: 'Mixins/thin-underline' };
 
-export const Default = () => <div className='Story Mixins thin-underline'>Hello</div>;
+export const Default = () => <div className="Story Mixins thin-underline">Hello</div>;

package/src/mixins/visually-hidden/visually-hidden.stories.tsx

@@ -4,4 +4,4 @@ import './visually-hidden.stories.scss';
 
 export default { title: 'Mixins/visually-hidden' };
 
-export const Default = () => <div className='Story Mixins visually-hidden'>Hello</div>;
+export const Default = () => <div className="Story Mixins visually-hidden">Hello</div>;

package/src/utilities/States/State.tsx

@@ -4,6 +4,7 @@ import { StatesProps } from './StatesProps';
 import './State.scss';
 
 interface Props {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   props: any;
   children: JSX.Element | RenderProps;
 }
@@ -13,10 +14,10 @@ export const State: React.FC<Props> = ({ props, children, ...rest }) => {
   const innerChildren = isRenderProps(children) ? children(props) : children;
 
   return (
-    <div className='State' {...rest}>
+    <div className="State" {...rest}>
       {Specimen}
 
-      <code className='State__props'>
+      <code className="State__props">
         <StatesProps props={props}>{innerChildren}</StatesProps>
       </code>
     </div>

package/src/utilities/States/States.tsx

@@ -4,15 +4,16 @@ import { State } from './State';
 import './States.scss';
 
 export interface Props {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   states?: any[];
   children: JSX.Element | RenderProps;
 }
 
 export const States: React.FC<Props> = ({ states = [{}], children, ...rest }) => {
   return (
-    <div className='States'>
-      {states.map((props, i) => (
-        <State key={i} props={props} {...rest}>
+    <div className="States">
+      {states.map((props, index) => (
+        <State key={index} props={props} {...rest}>
           {children}
         </State>
       ))}

package/src/utilities/States/StatesProps.tsx

@@ -1,22 +1,25 @@
 import React from 'react';
 import { Stack } from '../../components/Stack';
+import { omit } from '../omit';
 import { isRenderProps } from './isRenderProps';
 import { stringifyProps } from './stringifyProps';
-import { omit } from '../omit';
 import './StatesProps.scss';
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 interface Props {
   children: any;
   props: any;
 }
+/* eslint-enable @typescript-eslint/no-explicit-any */
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isEmpty = (obj?: any) => Object.entries(obj || {}).length === 0;
 
 export const StatesProps: React.FC<Props> = ({ props, children }) => {
   const childrenProps = omit(children.props, ...Object.keys(props || {}));
 
   return (
-    <Stack className='StatesProps' space={2} direction='horizontal'>
+    <Stack className="StatesProps" space={2} direction="horizontal">
       <span>{children.type.displayName || children.type.name}</span>
       {!isEmpty(props) && <strong>{stringifyProps(props)}</strong>}
       {!isRenderProps(children) && !isEmpty(childrenProps) && (

package/src/utilities/States/isRenderProps.ts

@@ -1,4 +1,5 @@
 export type RenderProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (props: any): JSX.Element;
 };
 

package/src/utilities/States/stringifyProps.tsx

@@ -4,6 +4,7 @@ const truncate = (string: string, maxLength = 25) => {
   return `${string.substring(0, maxLength)}${ellipsis ? '...' : ''}`;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const stringifyProps = (props: any) => {
   const stringifiedProps = Object.entries(props || {}).reduce((memo: string, [key, value]) => {
     if (key === 'children') return `${memo} children={...}`;