@loadsmart/loadsmart-ui 5.10.0 → 5.11.0

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

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

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 import omit from 'lodash.omit'
 
 import { Label } from 'components/Label'
@@ -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/Select.types.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import EventLike from 'utils/types/EventLike'
+import type EventLike from 'utils/types/EventLike'
 
 import type { DropdownMenuItemProps, DropdownProps } from 'components/Dropdown'
 import type { TextFieldProps } from 'components/TextField'
@@ -9,7 +9,7 @@ import type {
   SelectableKeyType,
   SelectableState,
 } from 'hooks/useSelectable'
-import { useSelectableReturn } from 'hooks/useSelectable/useSelectable.types'
+import type { useSelectableReturn } from 'hooks/useSelectable/useSelectable.types'
 import type { ChangeEvent, ComponentType, FocusEvent, HTMLAttributes } from 'react'
 
 export type Option = Selectable

package/src/components/Select/SelectCreatableOption.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { Dropdown } from 'components/Dropdown'
 import { SelectContext } from './Select.context'
-import { SelectCreatableOptionProps } from './Select.types'
+import type { SelectCreatableOptionProps } from './Select.types'
 
 function SelectCreatableOption({ children, ...rest }: SelectCreatableOptionProps): JSX.Element {
   const select =

package/src/components/Select/SelectEmpty.tsx

@@ -2,23 +2,22 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { getToken as token } from 'theming'
-import { SelectEmptyProps } from './Select.types'
+import type { SelectEmptyProps } from './Select.types'
 
 const Wrapper = styled.div`
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-
-  box-sizing: border-box;
-  margin: 0 ${token('space-s')};
   padding: ${token('space-s')};
-
-  color: ${token('color-neutral')};
+  margin: 0 ${token('space-s')};
 
   font-size: 1em;
   line-height: ${token('font-height-3')};
 
+  color: ${token('color-neutral')};
+
   background: ${token('color-transparent')};
 `
 

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

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import SelectOption from './SelectOption'
 import { SelectContext } from './Select.context'
 import useSelect from './useSelect'
-import { Option, SelectOptionProps, SelectProps, useSelectReturn } from './Select.types'
+import type { Option, SelectOptionProps, SelectProps, useSelectReturn } from './Select.types'
 
 type Props = {
   optionProps: SelectOptionProps

package/src/components/Select/SelectTrigger.tsx

@@ -13,19 +13,14 @@ const GenericSelectTrigger = styled(GenericDropdownTrigger)`
 `
 
 const SelectTriggerSearchField = styled(TextField)`
-  ${focusable`
-    box-shadow: none;
-  `}
-
+  flex: 1;
+  height: 100%;
   background-color: transparent;
-
   border: none;
   border-radius: ${token('border-radius-s')} 0 0 ${token('border-radius-s')};
-
-  height: 100%;
-
-  flex: 1;
-
+  ${focusable`
+    box-shadow: none;
+  `}
   ${Trailing} {
     margin: 0 ${token('space-xs')} 0 0;
   }
@@ -37,8 +32,8 @@ const Separator = styled.span`
   margin: 0;
 
   border-right-color: ${token('color-neutral-light')};
-  border-right-width: 1px;
   border-right-style: solid;
+  border-right-width: 1px;
 `
 
 const SelectTrigger = forwardRef<HTMLInputElement, SelectTriggerProps>(function SelectTrigger(

package/src/components/Select/components.tsx

@@ -1,4 +1,4 @@
-import { Components, CreatableOptionType } from './Select.types'
+import type { Components, CreatableOptionType } from './Select.types'
 import SelectCreatableOption from './SelectCreatableOption'
 import SelectEmpty from './SelectEmpty'
 import SelectOption from './SelectOption'

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/Select/useSelect.ts

@@ -7,7 +7,7 @@ import isEmpty from 'utils/toolset/isEmpty'
 import { useDropdown } from 'components/Dropdown'
 import { useDidMount } from 'hooks/useDidMount'
 import { useFocusTrap } from 'hooks/useFocusTrap'
-import { SelectableKeyType } from 'hooks/useSelectable'
+import type { SelectableKeyType } from 'hooks/useSelectable'
 import to from 'utils/toolset/awaitTo'
 import { isThenable } from 'utils/toolset/isThenable'
 import toArray from 'utils/toolset/toArray'

package/src/components/Select/useSelectExternal.ts

@@ -1,7 +1,7 @@
 import { useCallback, useContext } from 'react'
 
 import { SelectContext } from './Select.context'
-import { Option, useSelectExternalReturn } from './Select.types'
+import type { Option, useSelectExternalReturn } from './Select.types'
 
 export function useSelectExternal(): useSelectExternalReturn {
   const select =

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

@@ -1,9 +1,9 @@
 import React from 'react'
 
 import { Menu } from './'
-import { MenuProps } from './Menu'
-import renderer, { screen } from '../../../../tests/renderer'
-import generator from '../../../../tests/generator'
+import type { MenuProps } from './Menu'
+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/Menu/Menu.tsx

@@ -13,11 +13,11 @@ import { styledCompounds } from 'utils/toolset/styledCompounds'
 const MenuTitle = styled.div`
   padding: ${token('space-s')} 0;
   padding-left: ${token('space-l')};
-
-  color: ${token('color-neutral')};
-  font-weight: ${token('font-weight-bold')};
   font-size: ${token('font-size-5')};
+  font-weight: ${token('font-weight-bold')};
   line-height: ${token('font-height-3')};
+
+  color: ${token('color-neutral')};
   text-transform: uppercase;
 `
 

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

@@ -17,23 +17,22 @@ export type MenuBaseItemProps = HTMLAttributes<HTMLElement> & {
 }
 
 const StyledMenuItem = styled.button`
-  ${transition({ duration: '0.25s' })};
-
   display: flex;
-  width: 100%;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
   padding: ${token('space-s')} 0;
   padding-right: ${rem('12px')};
   padding-left: ${token('space-l')};
 
-  color: ${token('color-neutral-white')};
-  font-weight: ${token('font-weight-bold')};
   font-size: ${token('font-size-4')};
+  font-weight: ${token('font-weight-bold')};
   line-height: ${token('font-height-3')};
+  color: ${token('color-neutral-white')};
 
   cursor: pointer;
 
+  ${transition({ duration: '0.25s' })};
   ${focusable`
     color: ${token('color-primary')};
   `}

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

@@ -35,11 +35,10 @@ const StyledIcon = styled(Icon)<IExpandable>`
 `
 
 const ExpandableItems = styled.div<IExpandable>`
-  overflow: hidden;
-  ${transition({ property: 'height' })}
-
   height: ${prop('$height', 0)}px;
+  overflow: hidden;
 
+  ${transition({ property: 'height' })}
   ${MenuLink} {
     padding-left: ${token('space-xl')};
   }

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.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import { Tag } from 'components/Tag'
 import { Icon } from 'components/Icon'

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/ProgressSteps/ProgressStep.tsx

@@ -60,32 +60,18 @@ const ProgressStepContainer = styled.div`
 `
 
 const StepIndicator = styled.span<{ current: boolean; complete: boolean }>`
-  ${transition()}
-
-  ${font({
-    weight: 'font-weight-bold',
-    height: 'steps-indicator-size',
-  })}
-
-  font-size: ${token('font-size-4')};
-
-  height: ${token('steps-indicator-size')};
-  width: ${token('steps-indicator-size')};
-
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  width: ${token('steps-indicator-size')};
+  height: ${token('steps-indicator-size')};
+  font-size: ${token('font-size-4')};
 
-  border-width: 2px;
-  border-style: solid;
-  border-color: ${conditional({
-    'color-accent': whenProps([
-      { current: true, complete: [true, false] },
-      { current: false, complete: true },
-    ]),
+  color: ${conditional({
     'color-neutral': whenProps({ current: false, complete: false }),
+    'color-neutral-white': whenProps({ current: false, complete: true }),
+    'color-accent': whenProps({ current: true }),
   })};
-  border-radius: ${token('border-radius-circle')};
 
   background: ${conditional({
     'color-accent': whenProps([{ current: false, complete: true }]),
@@ -95,41 +81,47 @@ const StepIndicator = styled.span<{ current: boolean; complete: boolean }>`
     ]),
   })};
 
-  color: ${conditional({
+  border-color: ${conditional({
+    'color-accent': whenProps([
+      { current: true, complete: [true, false] },
+      { current: false, complete: true },
+    ]),
     'color-neutral': whenProps({ current: false, complete: false }),
-    'color-neutral-white': whenProps({ current: false, complete: true }),
-    'color-accent': whenProps({ current: true }),
   })};
-`
+  border-style: solid;
+  border-width: 2px;
+  border-radius: ${token('border-radius-circle')};
 
-const StepLabel = styled.span<{ current: boolean; complete: boolean }>`
+  ${transition()}
   ${font({
-    height: 'font-height-2',
+    weight: 'font-weight-bold',
+    height: 'steps-indicator-size',
   })}
+`
 
+const StepLabel = styled.span<{ current: boolean; complete: boolean }>`
   position: relative;
 
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+  justify-content: center;
+
+  margin: ${token('space-xs')} 0 0 0;
+  font-size: ${token('font-size-4')};
   font-weight: ${conditional({
     'font-weight-medium': whenProps({ current: false }),
     'font-weight-bold': whenProps({ current: true }),
   })};
-
   color: ${conditional({
     'color-neutral-darker': whenProps([{ current: true }, { current: false, complete: true }]),
     'color-neutral': whenProps({ current: false, complete: false }),
   })};
-
-  font-size: ${token('font-size-4')};
-
-  display: flex;
-  flex-direction: row;
-
-  align-items: center;
-  justify-content: center;
-
   text-align: center;
-
-  margin: ${token('space-xs')} 0 0 0;
+  ${font({
+    height: 'font-height-2',
+  })}
 `
 
 function ProgressStep(props: { step: Step; current: boolean; indicator: ReactNode }): JSX.Element {

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.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import { Button } from '../Button'
 import { STEPS, CONTENTS } from './Steps.fixtures'

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/Steps.tsx

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren, useEffect } from 'react'
+import React, { useEffect } from 'react'
+import type { PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
 import { check, getPanelRadioID } from './Steps.helpers'

package/src/components/Steps/StepsStep.tsx

@@ -1,4 +1,5 @@
-import React, { Fragment, PropsWithChildren, useContext } from 'react'
+import React, { Fragment, useContext } from 'react'
+import type { PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
 import { getPanelRadioID } from './Steps.helpers'

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.stories.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useState } from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import Switch, { SwitchProps } from './Switch'
 

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/Switch/Switch.tsx

@@ -24,19 +24,8 @@ export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement>, With
 }
 
 const SwitchWrapper = styled.label<WithAdditionalProps>`
-  ${transition()}
-
-  ${font({})};
-
-  user-select: none;
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-
   position: relative;
-
   display: inline-flex;
-
   width: ${conditional({
     'switch-width': whenProps({ scale: 'default' }),
     'switch-large-width': whenProps({ scale: 'large' }),
@@ -45,28 +34,28 @@ const SwitchWrapper = styled.label<WithAdditionalProps>`
     'switch-height': whenProps({ scale: 'default' }),
     'switch-large-height': whenProps({ scale: 'large' }),
   })};
-
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
   background-color: ${conditional({
     'switch-inactive-background-color': whenProps({ active: false }),
     'switch-active-background-color': whenProps({ active: true }),
   })};
-
   border-radius: ${conditional({
     'switch-border-radius': whenProps({ scale: 'default' }),
     'switch-large-border-radius': whenProps({ scale: 'large' }),
   })};
-
+  ${transition()}
+  ${font({})};
   ${hoverable`
     background: ${conditional({
       'switch-inactive-background-color--hover': whenProps({ active: false }),
       'switch-active-background-color--hover': whenProps({ active: true }),
     })};
   `}
-
   ${focusable`
     box-shadow: ${token('switch-outline')}
   `}
-
   ${disableable``}
 `
 
@@ -102,6 +91,7 @@ const Slider = styled.span<WithAdditionalProps>`
       'switch-slider-large-size': whenProps({ scale: 'large' }),
     })};
 
+    content: '';
     background-color: ${token('switch-slider-background-color')};
     border-radius: ${token('switch-slider-border-radius')};
 
@@ -109,8 +99,6 @@ const Slider = styled.span<WithAdditionalProps>`
       timingFunction: 'ease-out',
       duration: '150ms',
     })}
-
-    content: '';
   }
 `
 

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.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import Table, { useSelection } from './Table'
 import type { TableColumns, TableProps } from './Table.types'

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/Table/Table.tsx

@@ -152,10 +152,10 @@ const StyledTable = styled.table<{ scale?: string }>`
 
   white-space: nowrap;
 
-  background-color: ${token('color-neutral-white')};
-
   border-collapse: collapse;
 
+  background-color: ${token('color-neutral-white')};
+
   ${StyledTableBody} ${StyledTableRow},
   ${StyledTableBody} ${StyledExpandableTableRow} {
     height: ${conditional({

package/src/components/Table/Table.types.ts

@@ -1,6 +1,11 @@
-import { Selectable } from 'hooks/useSelectable'
-import type { ComponentType, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
-import React from 'react'
+import type { Selectable } from 'hooks/useSelectable'
+import type {
+  ComponentType,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactNode,
+  ReactElement,
+} from 'react'
 import type { DropdownMenuItemProps, DropdownMenuProps } from 'components/Dropdown'
 import type { DropdownTriggerButtonProps } from 'components/Dropdown/DropdownTrigger'
 
@@ -26,7 +31,7 @@ export interface TableSelectionProps extends HTMLAttributes<HTMLDivElement> {
 export interface SelectionCellProps<T extends Selectable = TableSelectableRow>
   extends HTMLAttributes<HTMLTableCellElement> {
   value?: T
-  children?: (props: { selected: boolean; toggle: () => void }) => React.ReactElement
+  children?: (props: { selected: boolean; toggle: () => void }) => ReactElement
 }
 
 export interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElement> {