@loadsmart/loadsmart-ui 6.0.1 → 6.0.3

package/src/components/Calendar/Date.helper.test.ts

@@ -70,8 +70,7 @@ describe('DateHelper', () => {
 
     it('converts single `Date` to array [`value`, `value`]', () => {
       expect(getConstraintRange(new Date('2022-01-28T12:00:00.000Z'))).toEqual([
-        1643371200000,
-        1643371200000,
+        1643371200000, 1643371200000,
       ])
     })
 
@@ -109,13 +108,11 @@ describe('DateHelper', () => {
 
     it('converts a pair [`start`, `end`] to array [`start`, `end`]', () => {
       expect(getConstraintRange([1641038400000, 1643371200000])).toEqual([
-        1641038400000,
-        1643371200000,
+        1641038400000, 1643371200000,
       ])
 
       expect(getConstraintRange(['2022-01-01T12:00:00.000Z', '2022-01-28T12:00:00.000Z'])).toEqual([
-        1641038400000,
-        1643371200000,
+        1641038400000, 1643371200000,
       ])
 
       expect(

package/src/components/Calendar/Month.helper.test.ts

@@ -13,77 +13,77 @@ describe('MonthHelper', () => {
   })
 
   // Checks if all aliases return the expected month
-  ;([
-    {
-      expectedAliases: ['0', 'jan', 'january'],
-      month: MONTH_BY_NAME.january,
-    },
-    {
-      expectedAliases: ['1', 'feb', 'february'],
-      month: MONTH_BY_NAME.february,
-    },
-    {
-      expectedAliases: ['2', 'mar', 'march'],
-      month: MONTH_BY_NAME.march,
-    },
-    {
-      expectedAliases: ['3', 'apr', 'april'],
-      month: MONTH_BY_NAME.april,
-    },
-    {
-      expectedAliases: ['4', 'may', 'may'],
-      month: MONTH_BY_NAME.may,
-    },
-    {
-      expectedAliases: ['5', 'jun', 'june'],
-      month: MONTH_BY_NAME.june,
-    },
-    {
-      expectedAliases: ['6', 'jul', 'july'],
-      month: MONTH_BY_NAME.july,
-    },
-    {
-      expectedAliases: ['7', 'aug', 'august'],
-      month: MONTH_BY_NAME.august,
-    },
-    {
-      expectedAliases: ['8', 'sep', 'september'],
-      month: MONTH_BY_NAME.september,
-    },
-    {
-      expectedAliases: ['9', 'oct', 'october'],
-      month: MONTH_BY_NAME.october,
-    },
-    {
-      expectedAliases: ['10', 'nov', 'november'],
-      month: MONTH_BY_NAME.november,
-    },
-    {
-      expectedAliases: ['11', 'dec', 'december'],
-      month: MONTH_BY_NAME.december,
-    },
-  ] as { expectedAliases: CalendarMonthAlias[]; month: CalendarMonth }[]).forEach(
-    ({ expectedAliases, month }) => {
-      describe(month.name, () => {
-        it(`returns ${month.name} month`, () => {
-          expectedAliases.forEach((alias) => {
-            expect(MonthHelper(alias)).not.toBeNull()
-            expect(MonthHelper(alias).get()).toEqual(month)
-          })
+  ;(
+    [
+      {
+        expectedAliases: ['0', 'jan', 'january'],
+        month: MONTH_BY_NAME.january,
+      },
+      {
+        expectedAliases: ['1', 'feb', 'february'],
+        month: MONTH_BY_NAME.february,
+      },
+      {
+        expectedAliases: ['2', 'mar', 'march'],
+        month: MONTH_BY_NAME.march,
+      },
+      {
+        expectedAliases: ['3', 'apr', 'april'],
+        month: MONTH_BY_NAME.april,
+      },
+      {
+        expectedAliases: ['4', 'may', 'may'],
+        month: MONTH_BY_NAME.may,
+      },
+      {
+        expectedAliases: ['5', 'jun', 'june'],
+        month: MONTH_BY_NAME.june,
+      },
+      {
+        expectedAliases: ['6', 'jul', 'july'],
+        month: MONTH_BY_NAME.july,
+      },
+      {
+        expectedAliases: ['7', 'aug', 'august'],
+        month: MONTH_BY_NAME.august,
+      },
+      {
+        expectedAliases: ['8', 'sep', 'september'],
+        month: MONTH_BY_NAME.september,
+      },
+      {
+        expectedAliases: ['9', 'oct', 'october'],
+        month: MONTH_BY_NAME.october,
+      },
+      {
+        expectedAliases: ['10', 'nov', 'november'],
+        month: MONTH_BY_NAME.november,
+      },
+      {
+        expectedAliases: ['11', 'dec', 'december'],
+        month: MONTH_BY_NAME.december,
+      },
+    ] as { expectedAliases: CalendarMonthAlias[]; month: CalendarMonth }[]
+  ).forEach(({ expectedAliases, month }) => {
+    describe(month.name, () => {
+      it(`returns ${month.name} month`, () => {
+        expectedAliases.forEach((alias) => {
+          expect(MonthHelper(alias)).not.toBeNull()
+          expect(MonthHelper(alias).get()).toEqual(month)
         })
+      })
 
-        it(`compares ${month.name} months correctly`, () => {
-          ALL_MONTHS_ALIASES.forEach((someAlias) => {
-            expectedAliases.forEach((expectedAlias) => {
-              expect(MonthHelper(someAlias).is(expectedAlias)).toBe(
-                expectedAliases.includes(someAlias)
-              )
-            })
+      it(`compares ${month.name} months correctly`, () => {
+        ALL_MONTHS_ALIASES.forEach((someAlias) => {
+          expectedAliases.forEach((expectedAlias) => {
+            expect(MonthHelper(someAlias).is(expectedAlias)).toBe(
+              expectedAliases.includes(someAlias)
+            )
           })
         })
       })
-    }
-  )
+    })
+  })
 
   it('formats correctly', () => {
     const EXPECTED = {

package/src/components/Calendar/Month.helper.ts

@@ -125,9 +125,7 @@ function getAllMonths() {
   })
 }
 
-function MonthHelper(
-  alias: CalendarMonthAlias
-): {
+function MonthHelper(alias: CalendarMonthAlias): {
   get(): CalendarMonth
   format(representation?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'): string
   is(other: CalendarMonthAlias): boolean

package/src/components/Dialog/useDialog.tsx

@@ -6,11 +6,7 @@ export interface useDialogProps {
   onClose?: () => void
 }
 
-function useDialog({
-  open: openProp,
-  onOpen,
-  onClose,
-}: useDialogProps): {
+function useDialog({ open: openProp, onOpen, onClose }: useDialogProps): {
   open: boolean
   show: () => void
   hide: () => void

package/src/components/DragDropFile/DragDropFile.context.tsx

@@ -18,12 +18,10 @@ export const DragDropFileProvider = ({
     [fileList]
   )
 
-  const contextValue = useMemo(() => ({ fileList, onFilesAdded, onRemoveFile, onRetryUpload }), [
-    fileList,
-    onFilesAdded,
-    onRemoveFile,
-    onRetryUpload,
-  ])
+  const contextValue = useMemo(
+    () => ({ fileList, onFilesAdded, onRemoveFile, onRetryUpload }),
+    [fileList, onFilesAdded, onRemoveFile, onRetryUpload]
+  )
 
   return (
     <DragDropFileContext.Provider value={contextValue}>{children}</DragDropFileContext.Provider>

package/src/components/Dropdown/Dropdown.tsx

@@ -70,12 +70,10 @@ export function GenericDropdown(props: GenericDropdownProps): JSX.Element {
     position,
     ...others
   } = props
-  const contextValue = useMemo(() => ({ expanded, toggle, disabled, expandDisabled }), [
-    expanded,
-    toggle,
-    disabled,
-    expandDisabled,
-  ])
+  const contextValue = useMemo(
+    () => ({ expanded, toggle, disabled, expandDisabled }),
+    [expanded, toggle, disabled, expandDisabled]
+  )
   const ref = useRef(null)
 
   const align = useDeprecatedAlignFromMenu(props)

package/src/components/Dropdown/useDropdown.ts

@@ -9,10 +9,7 @@ export interface useDropdownProps {
 
 export interface GenericDropdownProps extends DropdownProps, useDropdownProps {}
 
-function useDropdown({
-  disabled,
-  expandDisabled,
-}: DropdownProps): {
+function useDropdown({ disabled, expandDisabled }: DropdownProps): {
   expanded: boolean
   toggle: () => void
   expand: () => void

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

@@ -601,7 +601,7 @@ export const CustomCreatableOption: Story<SelectProps> = ({ onCreate, ...args }:
 
   const handleCreate = useCallback(
     function handleCreate(query: string) {
-      onCreate?.(query)
+      void onCreate?.(query)
 
       const item: Option = { label: query, value: query } as Option
 
@@ -677,7 +677,7 @@ export const SelectWithFixedCreatableOption: Story<SelectProps> = ({
 
   const handleCreate = useCallback(
     function handleCreate(query: string) {
-      onCreate?.(query)
+      void onCreate?.(query)
     },
     [onCreate]
   )

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

@@ -598,7 +598,7 @@ describe('Select', () => {
     it.each([[{ multiple: false }], [{ multiple: true }]])(
       'does not render the creatable option when onCreate callback is not provided - %s',
       async (args) => {
-        setup({ onCreate: (null as unknown) as undefined, ...args })
+        setup({ onCreate: null as unknown as undefined, ...args })
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
         fire.change(searchInput, {
@@ -649,7 +649,7 @@ describe('Select', () => {
       'does not render creatable option at the end of the list when the onCreate prop is not provided - %s',
       async (args) => {
         setup({
-          onCreate: (null as unknown) as undefined,
+          onCreate: null as unknown as undefined,
           ...args,
         })
         const { label: availableOption } = generator.pickone([...FRUITS])

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

@@ -17,7 +17,7 @@ const Setup = ({ optionProps, selectProps }: Props) => {
   select.query = query
 
   return (
-    <SelectContext.Provider value={(select as unknown) as useSelectReturn}>
+    <SelectContext.Provider value={select as unknown as useSelectReturn}>
       <SelectOption {...optionProps} />
     </SelectContext.Provider>
   )

package/src/components/Select/useSelect.ts

@@ -212,10 +212,10 @@ function useSelect(props: SelectProps): useSelectReturn {
   } = props
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const datasources = useMemo<SelectDatasource<any>[]>(() => getDatasources(props), [
-    props.datasources,
-    props.options,
-  ])
+  const datasources = useMemo<SelectDatasource<any>[]>(
+    () => getDatasources(props),
+    [props.datasources, props.options]
+  )
   const adapters = useMemo<Adapters>(() => extractAdapters(datasources), [datasources])
 
   const selectable = useSelectable({

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

@@ -60,7 +60,7 @@ export const TABLE_ROWS = [
   },
 ]
 
-export type RowFixture = typeof TABLE_ROWS[number]
+export type RowFixture = (typeof TABLE_ROWS)[number]
 
 export const TEST_TABLE_COLUMNS = [
   {

package/src/components/Table/Table.tsx

@@ -324,7 +324,7 @@ function ExpandableTableRow({
 
   let leading: ReactNode = <RotatableIcon name="caret-right" $rotate={open} />
   if (propsLeading) {
-    leading = isFunction(propsLeading) ? propsLeading(open) : propsLeading
+    leading = (isFunction(propsLeading) ? propsLeading(open) : propsLeading) as unknown as ReactNode
   }
 
   function toggle() {

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

@@ -55,6 +55,39 @@ describe('Menu', () => {
     expect(screen.getByRole('link', { name: 'Schedule' })).toHaveAttribute('href', '/schedule')
   })
 
+  it('renders dropdown menu when subitems are provided', () => {
+    const username = 'Username'
+    const link = { label: 'Link', url: '/url' }
+    const action = { label: 'Logout', click: jest.fn() }
+
+    setup({
+      children: (
+        <Menu.Item label={username}>
+          <Menu.SubItem label={link.label} url={link.url} />
+          <Menu.SubItem label={action.label} onClick={action.click} />
+        </Menu.Item>
+      ),
+    })
+
+    expect(screen.getByText(username)).toBeInTheDocument()
+    expect(screen.queryByText(link.label)).not.toBeInTheDocument()
+    expect(screen.queryByText(action.label)).not.toBeInTheDocument()
+
+    user.click(screen.getByRole('button', { name: username }))
+
+    const linkSubItem = screen.getByRole('link', { name: link.label })
+    const buttonSubItem = screen.getByRole('menuitem', { name: action.label })
+
+    expect(linkSubItem).toBeVisible()
+    expect(linkSubItem).toHaveAttribute('href', link.url)
+
+    expect(buttonSubItem).toBeVisible()
+
+    user.click(buttonSubItem)
+
+    expect(action.click).toBeCalled()
+  })
+
   // FIXME: Skipping as it's preventing test pipeline from being finished
   it.skip('renders an accessible dropdown menu when children are provided', () => {
     const username = 'Username'

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

@@ -68,7 +68,7 @@ const MenuDropdownSubItemLink = styled(BaseLink)`
 
 type MenuDropdownSubItemProps = HTMLAttributes<HTMLElement> & {
   label: string
-  url: string
+  url?: string
   icon?: ReactNode
   separator?: boolean
 }
@@ -79,12 +79,16 @@ export function MenuDropdownSubItem({
   url,
   ...rest
 }: MenuDropdownSubItemProps): JSX.Element {
-  return (
+  return url ? (
     <MenuDropdownSubItemLink {...rest} href={url}>
       <DropdownMenuItem tabIndex={-1} leading={<IconWrapper>{icon}</IconWrapper>}>
         {label}
       </DropdownMenuItem>
     </MenuDropdownSubItemLink>
+  ) : (
+    <DropdownMenuItem leading={<IconWrapper>{icon}</IconWrapper>} {...rest}>
+      {label}
+    </DropdownMenuItem>
   )
 }
 

package/src/components/TopNavigation/TopNavigation.stories.tsx

@@ -31,7 +31,10 @@ export function Playground(): JSX.Element {
             url="#"
           />
           <TopNavigation.Menu.Separator />
-          <TopNavigation.Menu.SubItem label="Log Out" url="#" />
+          <TopNavigation.Menu.SubItem
+            label="Logout"
+            onClick={() => alert('Logout button clicked')}
+          />
         </TopNavigation.Menu.Item>
       </TopNavigation.Menu>
     </TopNavigation>

package/src/docs/tools/DragDropFileEvent.stories.mdx

@@ -7,11 +7,7 @@ We have exposed a few helper functions to make it easier to write unit tests for
 The following functions descriptions consider this example:
 
 ```jsx
-<DragDropFileProvider
-  fileList={fileList}
-  onFilesAdded={onFilesAdded}
-  onFileRemoved={onFileRemoved}
->
+<DragDropFileProvider fileList={fileList} onFilesAdded={onFilesAdded} onFileRemoved={onFileRemoved}>
   <DragDropFile.Wrapper>
     <DragDropFile.DropZone
       aria-label="Drag and drop file"

package/src/docs/tools/conditional.stories.mdx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs'
 
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 
 <Meta title="Tools/Conditional & WhenProps" />
 
@@ -20,23 +20,26 @@ Let's consider the following sample button that changes its width based on its `
 const Button = styled.button<ButtonProps>`
   // ...
 
-  width: ${props =>
-    ['primary', 'secondary', 'warning'].includes(props.variant) ? '36px' :
-      props.variant == 'icon' && props.scale == 'default' ? '32px' :
-        props.variant == 'icon' && props.scale == 'large' ? '48px' : '24px'
-   };
+  width: ${(props) =>
+    ['primary', 'secondary', 'warning'].includes(props.variant)
+      ? '36px'
+      : props.variant == 'icon' && props.scale == 'default'
+      ? '32px'
+      : props.variant == 'icon' && props.scale == 'large'
+      ? '48px'
+      : '24px'};
 
   // ...
-`;
+`
 ```
 
 Of course, we could improve how we wrote our conditions, but that would still take some effort to make it easy to read and maintain.
 
-Notice how we use our `props` of interest to determine the final value for our button's width. Well, that's where our `conditional` comes in handy.  It encapsulates the `props` consumption, allowing for a quicker way of writing the conditionals.
+Notice how we use our `props` of interest to determine the final value for our button's width. Well, that's where our `conditional` comes in handy. It encapsulates the `props` consumption, allowing for a quicker way of writing the conditionals.
 
 Our current implementation allows the following types of condition checking:
 
-***Function condition***
+**_Function condition_**
 
 A function that receives the component props as argument and should return a string.
 
@@ -54,7 +57,7 @@ const Button = styled.button<ButtonProps>`
 <Button scale="small" /> // would render style with `height: 24px;`
 ```
 
-***Object condition***
+**_Object condition_**
 
 An object, where the `key` would end up in the result of the `conditional` if `value` evaluates to `true`. Here, the `value` can be either a `boolean` value or a `function` that receives the component props as argument and returns a `boolean`.
 
@@ -79,7 +82,7 @@ const Button = styled.button<ButtonProps>`
 <Button scale="small" /> // would render style with `height: 36px; width: 24px;`
 ```
 
-***Primitive condition***
+**_Primitive condition_**
 
 Any value you want to end up resulting from `conditional`, if _truthy_.
 
@@ -92,13 +95,12 @@ const Button = styled.button<ButtonProps>`
   padding: ${conditional('10px', PADDING_X, false)};
 
   // ...
-`;
-
-<Button /> // would render style with `padding: 10px 20px;`
+`
 
+;<Button /> // would render style with `padding: 10px 20px;`
 ```
 
-***Mixed condition***
+**_Mixed condition_**
 
 Of course, you can also mix and match multiple conditions at will:
 
@@ -151,11 +153,14 @@ _Before_:
 const Button = styled.button<ButtonProps>`
   // ...
 
-  width: ${props =>
-    ['primary', 'secondary', 'warning'].include(props.variant) ? '36px' :
-      props.variant == 'icon' && props.scale == 'default' ? '32px' :
-        props.variant == 'icon' && props.scale == 'large' ? '48px' : '24px'
-   };
+  width: ${(props) =>
+    ['primary', 'secondary', 'warning'].include(props.variant)
+      ? '36px'
+      : props.variant == 'icon' && props.scale == 'default'
+      ? '32px'
+      : props.variant == 'icon' && props.scale == 'large'
+      ? '48px'
+      : '24px'};
 
   // ...
 `
@@ -195,7 +200,7 @@ const Button = styled.button<ButtonProps>`
 
 The values can be represented as follows:
 
-***Array***
+**_Array_**
 
 A collection of values that the prop value should be compared to.
 
@@ -204,26 +209,28 @@ const Button = styled.button<ButtonProps>`
   width: ${conditional({
     '36px': whenProps({ variant: ['primary', 'secondary', 'warning'] }),
   })};
-`;
+`
 ```
 
 In the example above, we'll have `width: 36px;` as a result if the button's `variant` prop is either `'primary'`, `'secondary'`, or `'warning'`.
 
-***Function***
+**_Function_**
 
 A function that receives the prop value as argument and returns a `boolean`.
 
 ```tsx
 const Button = styled.button<ButtonProps>`
   width: ${conditional({
-    '36px': whenProps({ variant: variant => ['primary', 'secondary', 'warning'].includes(variant) }),
+    '36px': whenProps({
+      variant: (variant) => ['primary', 'secondary', 'warning'].includes(variant),
+    }),
   })};
 `
 ```
 
 In the example above, we'll also have `width: 36px;` as a result if the button's `variant` prop is either `'primary'`, `'secondary'`, or `'warning'`.
 
-***Anything else***
+**_Anything else_**
 
 A value to which the component prop will be strictly compared to.
 
@@ -240,5 +247,5 @@ In the example above, we'll have `width: 36px;` as a result only if the button's
 <!-- The usage of this "Component" is intentional to enable react-syntax-highlighter's own highlighter -->
 
 export const Component = () => {
-  return <SyntaxHighlighter/>;
-};
+  return <SyntaxHighlighter />
+}

package/src/hooks/useClickOutside/useClickOutside.ts

@@ -21,7 +21,7 @@ function useClickOutside<T extends HTMLElement>(
   const handleEvent = useCallback(
     function handleEvent(event: MouseEvent | TouchEvent | KeyboardEvent) {
       function hasPressedEsc() {
-        return KeyboardKey((event as unknown) as React.KeyboardEvent).is('ESCAPE')
+        return KeyboardKey(event as unknown as React.KeyboardEvent).is('ESCAPE')
       }
 
       if (!getContainer() || disabled) {

package/src/hooks/useFocusTrap/useFocusTrap.ts

@@ -122,7 +122,7 @@ function useFocusTrap<T extends HTMLElement>(
          * Brace yourselves for the nasty casting from globalThis.KeyboardEvent, which is
          * the type used in the `addEventListener` callback, to React.KeyboardEvent ¯\_(ツ)_/¯
          */
-        const e = (evt as unknown) as React.KeyboardEvent
+        const e = evt as unknown as React.KeyboardEvent
 
         const supportedKeys = [...(keys || ['TAB'])]
 

package/src/hooks/useFocusWithin/useFocusWithin.ts

@@ -12,15 +12,16 @@ export interface useFocusWithinProps {
  * helps with identifying focus within elements.
  * @param {Object} props - Hook props
  */
-function useFocusWithin<T>(
-  props: useFocusWithinProps = {}
-): { ref: RefObject<T>; focused: boolean } {
+function useFocusWithin<T>(props: useFocusWithinProps = {}): {
+  ref: RefObject<T>
+  focused: boolean
+} {
   const { onFocus, onBlur } = props
   const [focused, setFocused] = useState(false)
   const containerRef = useRef<T>(null)
 
   function getContainer() {
-    return (containerRef.current as unknown) as HTMLElement
+    return containerRef.current as unknown as HTMLElement
   }
 
   const handleFocus = useCallback(

package/src/tools/conditional.ts

@@ -78,7 +78,7 @@ function handleConditionObject<P>(condition: ConditionObject<P>, props: P): stri
 
     if (value) {
       const tokenKey = key as ThemeToken
-      const result = (getToken(tokenKey, (props as unknown) as ThemedProps) ?? key) as string
+      const result = (getToken(tokenKey, props as unknown as ThemedProps) ?? key) as string
       return [...acc, result]
     }
 

package/src/utils/toolset/highlightMatch.test.tsx

@@ -25,7 +25,7 @@ describe('Match highligther', () => {
     /*
      This can possibly happen in projects that don't use TypeScript or at runtime.
      */
-    const nullAsString: string = (null as unknown) as string
+    const nullAsString: string = null as unknown as string
     expect(highlightMatch('Label', nullAsString)).toEqual(<>Label</>)
     expect(highlightMatch(nullAsString, 'xyz')).toEqual(<>{null}</>)
   })

package/src/utils/toolset/keyboard.ts

@@ -33,9 +33,7 @@ export function getKeyboardKey(e: KeyboardEvent): KeyboardEvent['key'] {
   return e.key
 }
 
-function KeyboardKey(
-  e: KeyboardEvent
-): {
+function KeyboardKey(e: KeyboardEvent): {
   is(otherKeys: SupportedKey | SupportedKey[]): boolean
 } {
   const key = getKeyboardKey(e)