@loadsmart/loadsmart-ui 5.10.1 → 5.11.0

package/src/components/Link/Link.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
-import renderer from '../../../tests/renderer'
+import renderer from '../../tests/renderer'
 import Link from './Link'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 describe('<Link />', () => {
   describe('default', () => {

package/src/components/Loaders/LoadingBar.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { Story, Meta } from '@storybook/react/types-6-0'
 import { Text } from 'components/Text'
 
-import { LoadingBarProps } from './LoadingBar'
+import type { LoadingBarProps } from './LoadingBar'
 
 import LoadingBar from './LoadingBar'
 
@@ -12,7 +12,7 @@ export default {
   argTypes: {},
 } as Meta
 
-export const Playground: Story<LoadingBarProps> = (args: LoadingBarProps) => {
+export const Playground: Story<LoadingBarProps> = (args) => {
   return (
     <div className="flex flex-col space-y-2">
       <div className="flex items-center">

package/src/components/Loaders/LoadingBar.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './LoadingBar.stories'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { LoadingBarProps } from './LoadingBar'
 

package/src/components/Loaders/LoadingDots.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './LoadingDots.stories'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { LoadingDotsProps } from './LoadingDots'
 

package/src/components/Loaders/Spinner.test.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './Spinner.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { SpinnerProps } from './Spinner'
 

package/src/components/Modal/Modal.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import Modal from './Modal'
-import generator from '../../../tests/generator'
-import renderer, { screen, user } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen, user } from '../../tests/renderer'
 
 const setup = ({ open = false, ...overrides }) =>
   renderer(<Modal open={open} {...overrides} />).render()

package/src/components/Pagination/Pagination.test.tsx

@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 
-import renderer, { screen, fire } from '../../../tests/renderer'
+import renderer, { screen, fire } from '../../tests/renderer'
 
 import Pagination from './Pagination'
 import type { PaginationProps } from './Pagination.types'

package/src/components/Popover/Popover.test.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './Popover.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { PopoverProps } from './Popover'
 

package/src/components/ProgressBar/ProgressBar.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
 
-import renderer from '../../../tests/renderer'
+import renderer from '../../tests/renderer'
 
 import { ProgressBar } from './ProgressBar'
 

package/src/components/Radio/Radio.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import Radio from './Radio'
-import generator from '../../../tests/generator'
-import renderer, { fire } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { fire } from '../../tests/renderer'
 
 const setup = ({ ...overrides }) => renderer(<Radio {...overrides} />).render()
 

package/src/components/Section/Section.test.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react'
 
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 
 import Section from './Section'
 

package/src/components/Section/Sections.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta } from '@storybook/react/types-6-0'
 import Section from './Section'
 import type { SectionProps } from './Section'
 
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 export default {
   title: 'Components/Section',

package/src/components/Select/Select.fixtures.ts

@@ -1,5 +1,5 @@
 import type { SelectableKeyType } from 'hooks/useSelectable'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 import type { SelectDatasource } from './Select.types'
 

package/src/components/Select/Select.stories.tsx

@@ -15,7 +15,7 @@ import type {
   SelectProps,
 } from './Select.types'
 import { useSelect } from '.'
-import generators from '../../../tests/generator'
+import generators from '../../tests/generator'
 
 export default {
   title: 'Components/Select',
@@ -32,7 +32,7 @@ export const Playground: Story<SelectProps> = (args: SelectProps) => {
         <div className="flex-1">
           <Label htmlFor="select-playground">Select your favorite fruit</Label>
           <Select
-            options={FRUITS}
+            options={[...FRUITS]}
             placeholder="Select sync"
             {...omit(args, OMITTED_PROPS)}
             id="select-playground"

package/src/components/Select/Select.test.tsx

@@ -5,8 +5,8 @@ import { render } from '@testing-library/react'
 
 import { SelectableKeyTypeOptions, Fruit, FRUITS, USERS } from './Select.fixtures'
 import * as stories from './Select.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen, fire, waitFor } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen, fire, waitFor } from '../../tests/renderer'
 import selectEvent from '../../testing/SelectEvent'
 
 import type { SelectProps, Option } from './Select.types'
@@ -322,7 +322,10 @@ describe('Select', () => {
         const searchInput = screen.getByLabelText('Select your favorite fruit')
         await selectEvent.select(firstOption.label, searchInput)
 
-        expect(screen.getByTestId('select-trigger-clear-counter')).toHaveTextContent('1')
+        await waitFor(() => {
+          expect(screen.getByTestId('select-trigger-clear-counter')).toHaveTextContent('1')
+        })
+
         expect(screen.getByTitle('1 selected option')).toBeInTheDocument()
 
         await selectEvent.select(secondOption.label, searchInput)
@@ -346,7 +349,9 @@ describe('Select', () => {
         const searchInput = screen.getByLabelText('Select your favorite fruit')
         expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(3)
 
-        expect(screen.getByTestId('select-trigger-clear-counter')).toHaveTextContent('3')
+        await waitFor(() => {
+          expect(screen.getByTestId('select-trigger-clear-counter')).toHaveTextContent('3')
+        })
 
         await selectEvent.unselect(secondOption.label, searchInput)
 
@@ -366,7 +371,9 @@ describe('Select', () => {
         const searchInput = screen.getByLabelText('Select your favorite fruit')
         expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(3)
 
-        expect(screen.getByTestId('select-trigger-clear-counter')).toHaveTextContent('3')
+        await waitFor(() => {
+          expect(screen.getByTestId('select-trigger-clear-counter')).toHaveTextContent('3')
+        })
 
         await selectEvent.clear(searchInput)
 

package/src/components/Select/useSelect.helpers.test.ts

@@ -1,5 +1,5 @@
 import { getDisplayValue, getValue } from './useSelect.helpers'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 import type { SelectAdapter, SelectValue, Option } from './Select.types'
 

package/src/components/SideNavigation/Logo/Logo.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import { Logo } from './'
-import renderer, { screen } from '../../../../tests/renderer'
-import generator from '../../../../tests/generator'
+import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../../tests/generator'
 import type { LogoProps } from './Logo'
 
 const setup = ({ ...overrides }: LogoProps) => renderer(<Logo {...overrides} />).render()

package/src/components/SideNavigation/Menu/Menu.test.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { Menu } from './'
 import type { MenuProps } from './Menu'
-import renderer, { screen } from '../../../../tests/renderer'
-import generator from '../../../../tests/generator'
+import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../../tests/generator'
 import userEvent from '@testing-library/user-event'
 
 function setup(props: MenuProps) {

package/src/components/SideNavigation/Separator/Separator.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { Separator } from './'
-import renderer from '../../../../tests/renderer'
+import renderer from '../../../tests/renderer'
 
 const setup = ({ ...overrides } = {}) => renderer(<Separator {...overrides} />).render()
 

package/src/components/SideNavigation/SideNavigation.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import { SideNavigation } from './'
-import renderer from '../../../tests/renderer'
-import generator from '../../../tests/generator'
+import renderer from '../../tests/renderer'
+import generator from '../../tests/generator'
 import type { SideNavigationProps } from './SideNavigation'
 
 function setup(props: SideNavigationProps) {

package/src/components/Steps/Steps.fixtures.ts

@@ -1,4 +1,4 @@
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 export const STEPS = generator.array(({ index }) => {
   return {

package/src/components/Steps/Steps.test.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { composeStory } from '@storybook/testing-react'
 
 import { STEPS, CONTENTS } from './Steps.fixtures'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 import Meta, { Playground as PlaygroundStory } from './Steps.stories'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { StepsProps } from './Steps'
 import type { Step } from './Steps.types'

package/src/components/Steps/useStep.test.tsx

@@ -1,6 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks'
 
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 import useSteps from './useSteps'
 
 import type { Step } from './Steps.types'

package/src/components/Switch/Switch.test.tsx

@@ -3,7 +3,7 @@ import { composeStories } from '@storybook/testing-react'
 import userEvent from '@testing-library/user-event'
 
 import * as stories from './Switch.stories'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 import type { SwitchProps } from './Switch'
 
 const { Playground } = composeStories(stories)

package/src/components/Table/Table.fixtures.ts

@@ -1,4 +1,4 @@
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 export const TABLE_COLUMNS = [
   {

package/src/components/Table/Table.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import React from 'react'
-import renderer, { screen, user } from '../../../tests/renderer'
+import renderer, { screen, user } from '../../tests/renderer'
 
 import Table from './Table'
 import type { TableProps } from './Table.types'

package/src/components/TablePagination/TablePagination.test.tsx

@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 
 import TablePagination from './TablePagination'
 import type { TablePaginationProps } from './TablePagination.types'

package/src/components/Tabs/Tabs.test.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import renderer, { fire } from '../../../tests/renderer'
+import renderer, { fire } from '../../tests/renderer'
 import { screen } from '@testing-library/react'
 
 import Tabs from './Tabs'

package/src/components/Tag/Tag.stories.tsx

@@ -3,7 +3,7 @@ import Tag, { TagProps } from './Tag'
 import type { Meta } from '@storybook/react/types-6-0'
 
 import { Icon as MirandaIcon } from '../Icon'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 export default {
   title: 'Components/Tag',

package/src/components/Tag/Tag.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import Tag from './Tag'
-import generator from '../../../tests/generator'
-import renderer from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer from '../../tests/renderer'
 
 const setup = ({ ...overrides }) => renderer(<Tag {...overrides} />).render()
 

package/src/components/Text/Text.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import renderer, { screen } from '../../../tests/renderer'
-import generators from '../../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
+import generators from '../../tests/generator'
 import typography from '../../styles/typography'
 
 import { Text } from '.'

package/src/components/TextField/TextField.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import TextField from './TextField'
-import renderer from '../../../tests/renderer'
+import renderer from '../../tests/renderer'
 
 const setup = ({ ...overrides } = {}) => renderer(<TextField {...overrides} />).render()
 

package/src/components/Textarea/Textarea.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Textarea from './Textarea'
-import renderer from '../../../tests/renderer'
+import renderer from '../../tests/renderer'
 
 const setup = ({ ...overrides } = {}) => renderer(<Textarea {...overrides} />).render()
 

package/src/components/Toast/Toast.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
 
-import renderer from '../../../tests/renderer'
-import generator from '../../../tests/generator'
+import renderer from '../../tests/renderer'
+import generator from '../../tests/generator'
 
 import Toast from './Toast'
 

package/src/components/ToggleGroup/Toggle.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import generator from '../../../tests/generator'
-import renderer, { screen, fire } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen, fire } from '../../tests/renderer'
 import Toggle from './Toggle'
 import ToggleGroupContext, { SelectableContext } from './ToggleGroupContext'
 

package/src/components/ToggleGroup/ToggleGroup.test.tsx

@@ -3,8 +3,8 @@ import { composeStories } from '@storybook/testing-react'
 
 import { OPTIONS } from './ToggleGroup.constants'
 import * as stories from './ToggleGroup.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen, fire } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen, fire } from '../../tests/renderer'
 
 import type { ToggleGroupProps, ToggleGroupOptionProps } from './ToggleGroup.types'
 

package/src/components/Tooltip/Tooltip.test.tsx

@@ -3,8 +3,8 @@ import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import Tooltip from './Tooltip'
-import generator from '../../../tests/generator'
-import renderer from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer from '../../tests/renderer'
 
 const setup = ({ ...overrides }) => renderer(<Tooltip message="" {...overrides} />).render()
 

package/src/components/TopNavigation/Logo/Logo.test.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { Logo } from './'
 import type { LogoProps } from './Logo'
-import renderer, { screen } from '../../../../tests/renderer'
-import generators from '../../../../tests/generator'
+import renderer, { screen } from '../../../tests/renderer'
+import generators from '../../../tests/generator'
 
 function setup(props: LogoProps) {
   return renderer(<Logo {...props} />).render()

package/src/components/TopNavigation/Menu/Menu.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ThemeProvider } from 'styled-components'
-import renderer, { screen, user } from '../../../../tests/renderer'
+import renderer, { screen, user } from '../../../tests/renderer'
 import { Menu } from './'
 import type { MenuProps } from './Menu'
 import { Alice } from '../../../theming/themes'

package/src/components/VisuallyHidden/VisuallyHidden.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
 
-import renderer from '../../../tests/renderer'
+import renderer from '../../tests/renderer'
 
 import hiddenStyle from 'styles/hidden'
 import { VisuallyHidden } from './VisuallyHidden'

package/src/hooks/useClickOutside/useClickOutside.test.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import renderer, { screen, fire } from '../../../tests/renderer'
+import renderer, { screen, fire } from '../../tests/renderer'
 
 import useClickOutside from './useClickOutside'
 interface ExperimentProps {

package/src/hooks/useDidMount/useDidMount.test.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 import useDidMount from './useDidMount'
 
 function Experiment() {

package/src/hooks/useFocusTrap/useFocusTrap.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import renderer, { screen, fire, user } from '../../../tests/renderer'
+import renderer, { screen, fire, user } from '../../tests/renderer'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './useFocusTrap.stories'

package/src/hooks/useFocusWithin/useFocusWithin.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import renderer, { screen, fire } from '../../../tests/renderer'
+import renderer, { screen, fire } from '../../tests/renderer'
 
 import useFocusWithin from './useFocusWithin'
 

package/src/hooks/useHeightExpansionToggler/useHeightExpansionToggler.test.tsx

@@ -1,7 +1,7 @@
 import { act, waitFor } from '@testing-library/react'
 import React, { useRef, useState } from 'react'
 
-import renderer, { screen, fire, user } from '../../../tests/renderer'
+import renderer, { screen, fire, user } from '../../tests/renderer'
 
 import useHeightExpansionToggler from './useHeightExpansionToggler'
 

package/src/hooks/useSelectable/SelectableStrategy.test.ts

@@ -1,4 +1,4 @@
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 import createSelectionStrategy from './SelectableStrategy'
 
 import type { Selectable, SelectableAdapter, SelectableKeyType } from './useSelectable.types'

package/src/hooks/useSelectable/useSelectable.test.ts

@@ -1,7 +1,7 @@
 import { renderHook, act } from '@testing-library/react-hooks'
 
 import { createSelectable } from './useSelectable'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 import type { Selectable, SelectableAdapter, SelectableKeyType } from './useSelectable.types'
 

package/src/testing/SelectEvent/SelectEvent.test.tsx

@@ -7,8 +7,8 @@ import {
   useSyncFruits,
   useAsyncUsers,
 } from '../../components/Select/Select.fixtures'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 import Select from '../../components/Select/Select'
 
 import selectEvent from './SelectEvent'