@loadsmart/loadsmart-ui 5.1.1 → 5.3.0

package/src/components/Dropdown/useDropdown.ts

@@ -1,11 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 
-import type { HTMLAttributes } from 'react'
-
-export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
-  disabled?: boolean
-  onBlur?: () => void
-}
+import type { DropdownProps } from './Dropdown.types'
 
 export interface useDropdownProps {
   expanded: boolean

package/src/components/Icon/Icon.tsx

@@ -20,6 +20,7 @@ import SortIcon from './assets/sort.svg'
 import UploadIcon from './assets/upload.svg'
 import WarningIcon from './assets/warning.svg'
 import DotsHorizontalIcon from './assets/dots-horizontal.svg'
+import CaretRightLastIcon from './assets/caret-right-last.svg'
 
 import type { IconProps as GenericIconProps } from '../IconFactory'
 
@@ -44,6 +45,7 @@ const icons = {
   upload: UploadIcon as JSX.Element,
   warning: WarningIcon as JSX.Element,
   'dots-horizontal': DotsHorizontalIcon as JSX.Element,
+  'caret-right-last': CaretRightLastIcon as JSX.Element,
 }
 
 const Icon = IconFactory(icons)

package/src/components/Icon/assets/caret-right-last.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2501 6.38126L14.1842 10.4471L27.7371 24L14.1842 37.5529L18.2501 41.6187L31.803 28.0659L35.8688 24L31.803 19.9341L18.2501 6.38126Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.2922 38.375L44.1256 38.375L44.1256 9.625L40.2922 9.625L40.2922 38.375Z"/>
+</svg>

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

@@ -11,6 +11,7 @@ import selectEvent from '../../testing/SelectEvent'
 
 import type { SelectProps, Option, GenericOption } from './Select.types'
 import Select from './Select'
+import userEvent from '@testing-library/user-event'
 
 const {
   Playground,
@@ -159,6 +160,27 @@ describe('Select', () => {
         expect(items.length).toBeGreaterThanOrEqual(1)
         expect(items[0]).toHaveTextContent(FRUITS[indexToSearch].label)
       })
+
+      it('calls blur when focus is lost', async () => {
+        const onBlur = jest.fn((event?: MouseEvent | TouchEvent | KeyboardEvent) => event)
+
+        setup({ onBlur })
+
+        const selectInput = screen.getByLabelText('Select your favorite fruit')
+
+        await selectEvent.expand(selectInput)
+
+        userEvent.click(document.body)
+
+        await selectEvent.expand(selectInput)
+
+        userEvent.keyboard('{Escape}{/Escape}')
+
+        expect(onBlur).toHaveBeenCalledTimes(2)
+
+        expect(onBlur).toHaveBeenNthCalledWith(1, new MouseEvent('mousedown'))
+        expect(onBlur).toHaveBeenNthCalledWith(2, new KeyboardEvent('keyup'))
+      })
     })
 
     describe('Single selection', () => {
@@ -839,7 +861,7 @@ describe('Select', () => {
     const setup = (overrides: Partial<SelectProps>) =>
       renderer(<Playground {...overrides} options={SelectableKeyTypeOptions} />).render()
 
-    const expectedValue = (value: any) => ({
+    const expectedValue = (value: unknown) => ({
       target: {
         id: 'select-playground',
         name: 'select-playground',

package/src/components/Select/Select.types.ts

@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import EventLike from 'utils/types/EventLike'
 
-import type { ChangeEvent, FocusEvent, ComponentType, HTMLAttributes } from 'react'
-import type { DropdownProps, DropdownMenuItemProps } from 'components/Dropdown'
+import type { DropdownMenuItemProps, DropdownProps } from 'components/Dropdown'
 import type { TextFieldProps } from 'components/TextField'
 import type {
-  SelectableAdapter,
   Selectable,
+  SelectableAdapter,
   SelectableKeyType,
   SelectableState,
 } from 'hooks/useSelectable'
 import { useSelectableReturn } from 'hooks/useSelectable/useSelectable.types'
+import type { ChangeEvent, ComponentType, FocusEvent, HTMLAttributes } from 'react'
 
 export type Option = Selectable
 export interface GenericOption {
@@ -119,7 +119,7 @@ export type useSelectReturn = {
   getDropdownProps: () => {
     toggle: () => void
     expanded: boolean
-    onBlur: () => void
+    onBlur: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void
   }
   getCreatebleProps: () => CreatableProps
   isCreatable: () => boolean

package/src/components/Select/useSelect.ts

@@ -1,18 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { isFunction } from '@loadsmart/utils-function'
 import { isNil } from '@loadsmart/utils-object'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
-import { GenericAdapter } from './Select.constants'
-import { getValue, getDisplayValue, escapeRegExp, getAdapter } from './useSelect.helpers'
 import { useDropdown } from 'components/Dropdown'
+import { useDidMount } from 'hooks/useDidMount'
 import { useFocusTrap } from 'hooks/useFocusTrap'
 import { SelectableKeyType } from 'hooks/useSelectable'
-import { useSelectable } from './Select.context'
 import to from 'utils/toolset/awaitTo'
-import toArray from 'utils/toolset/toArray'
 import { isThenable } from 'utils/toolset/isThenable'
-import { useDidMount } from 'hooks/useDidMount'
+import toArray from 'utils/toolset/toArray'
+import { GenericAdapter } from './Select.constants'
+import { useSelectable } from './Select.context'
+import { escapeRegExp, getAdapter, getDisplayValue, getValue } from './useSelect.helpers'
 
 import type { ChangeEvent, FocusEvent } from 'react'
 import type {
@@ -191,7 +191,7 @@ function useOptions<T = any>(props: { datasources: SelectDatasource<T>[]; adapte
  */
 function useSelect(props: SelectProps): useSelectReturn {
   const didMount = useDidMount()
-  const { multiple, onQueryChange, onChange, onCreate, id, name, disabled = false } = props
+  const { multiple, onQueryChange, onChange, onCreate, id, name, disabled = false, onBlur } = props
   const dropdown = useDropdown(props)
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -264,17 +264,19 @@ function useSelect(props: SelectProps): useSelectReturn {
       return {
         toggle: dropdown.toggle,
         expanded: dropdown.expanded,
-        onBlur() {
+        onBlur(event?: MouseEvent | TouchEvent | KeyboardEvent) {
           if (!multiple) {
             setQuery(getDisplayValue(adapters, selectable.selected, multiple))
           } else {
             setQuery('')
           }
           options.reset()
+
+          onBlur?.(event)
         },
       }
     },
-    [adapters, dropdown.expanded, dropdown.toggle, multiple, options, selectable.selected]
+    [adapters, dropdown.expanded, dropdown.toggle, multiple, options, selectable.selected, onBlur]
   )
 
   const getTriggerProps = useCallback(

package/src/components/TablePagination/RowsPerPage.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Text } from 'components/Text'
+import { Dropdown, DropdownContext } from 'components/Dropdown'
+import { Layout } from 'components/Layout'
+import { Icon } from 'components/Icon'
+import { RowsPerPageProps } from './TablePagination.types'
+import { ButtonProps } from 'components/Button'
+import { NoPaddingButton } from './TablePagination.styles'
+
+const TriggerButton = (props: Omit<ButtonProps, 'scale' | 'variant'>) => {
+  const { toggle } = React.useContext(DropdownContext)
+
+  return (
+    <NoPaddingButton data-testid="rows-per-page-button" onClick={toggle} {...props}>
+      <Icon name="caret-down" size={16} color="neutral-darker" />
+    </NoPaddingButton>
+  )
+}
+
+function RowsPerPage({
+  page,
+  rowsPerPage,
+  onRowsPerPageChange,
+  labelRowsPerPage,
+  count,
+  rowsPerPageOptions,
+  disabled = false,
+}: RowsPerPageProps): JSX.Element {
+  const getItemsRange = () => {
+    if (!count) {
+      return 0
+    }
+
+    const from = page * rowsPerPage + 1
+    let to = (page + 1) * rowsPerPage
+
+    if (to > count) {
+      to = count
+    }
+
+    return `${from}-${to}`
+  }
+
+  return (
+    <Layout.Group space="s" align="center">
+      <Text variant="caption" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
+        {labelRowsPerPage}
+      </Text>
+      <Text variant="body" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
+        <Text variant="body-bold" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
+          {getItemsRange()}
+        </Text>{' '}
+        of{' '}
+        <Text variant="body-bold" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
+          {count}
+        </Text>
+      </Text>
+      <Dropdown>
+        <TriggerButton disabled={disabled} />
+        <Dropdown.Menu>
+          {rowsPerPageOptions.map((option) => (
+            <Dropdown.Item
+              key={option}
+              onClick={() => onRowsPerPageChange(option)}
+              trailing={option === rowsPerPage && <Icon name="check" size={20} color="accent" />}
+            >
+              {option} per page
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    </Layout.Group>
+  )
+}
+
+export default RowsPerPage

package/src/components/TablePagination/TablePagination.stories.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import TablePagination from './TablePagination'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+import type { TablePaginationProps } from './TablePagination.types'
+import { Layout } from 'components/Layout'
+
+export default {
+  title: 'Components/TablePagination',
+  component: TablePagination,
+  argTypes: {},
+} as Meta
+
+export const Playground: Story<TablePaginationProps> = (args: TablePaginationProps) => {
+  const [page, setPage] = useState(args.page)
+  const [rowsPerPage, setRowsPerPage] = useState(args.rowsPerPage)
+
+  return (
+    <Layout.Group>
+      <TablePagination
+        {...args}
+        onPageChange={(page) => setPage(page)}
+        page={page}
+        rowsPerPage={rowsPerPage}
+        onRowsPerPageChange={setRowsPerPage}
+      />
+    </Layout.Group>
+  )
+}
+
+Playground.args = {
+  page: 0,
+  count: 1004,
+  rowsPerPage: 100,
+  disabled: false,
+  variant: 'default',
+}

package/src/components/TablePagination/TablePagination.styles.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+import { Button } from 'components/Button'
+
+export const NoPaddingButton = styled(Button).attrs({
+  variant: 'tertiary',
+  scale: 'small',
+})`
+  padding: 0;
+
+  > span {
+    margin: 0 !important;
+  }
+`

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

@@ -0,0 +1,112 @@
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+
+import renderer, { screen } from '../../../tests/renderer'
+
+import TablePagination from './TablePagination'
+import { TablePaginationProps } from './TablePagination.types'
+
+describe('TablePagination', () => {
+  const setup = ({ ...overrides }: Partial<TablePaginationProps> = {}) => {
+    const defaultProps: TablePaginationProps = {
+      variant: 'default',
+      count: 1000,
+      onPageChange: jest.fn(),
+      onRowsPerPageChange: jest.fn(),
+      rowsPerPage: 100,
+      page: 0,
+    }
+
+    renderer(<TablePagination {...defaultProps} {...overrides} />).render()
+  }
+
+  it('disables preview page buttons if page = 0', () => {
+    setup()
+
+    expect(screen.getByTitle(/previous page/i)).toBeDisabled()
+    expect(screen.getByTitle(/first page/i)).toBeDisabled()
+  })
+
+  it('disables next and last page buttons if the page is the last one', () => {
+    setup({
+      page: 9,
+    })
+
+    expect(screen.getByTitle(/next page/i)).toBeDisabled()
+    expect(screen.getByTitle(/last page/i)).toBeDisabled()
+  })
+
+  it('calls the onChangePage action after the pagination actions are clicked', () => {
+    const onPageChange = jest.fn()
+    setup({
+      page: 2,
+      onPageChange,
+    })
+
+    userEvent.click(screen.getByTitle(/previous page/i))
+    expect(onPageChange).toHaveBeenLastCalledWith(1)
+    userEvent.click(screen.getByTitle(/first page/i))
+    expect(onPageChange).toHaveBeenLastCalledWith(0)
+    userEvent.click(screen.getByTitle(/next page/i))
+    expect(onPageChange).toHaveBeenLastCalledWith(3)
+    userEvent.click(screen.getByTitle(/last page/i))
+    expect(onPageChange).toHaveBeenLastCalledWith(9)
+
+    userEvent.clear(screen.getByTitle('Page'))
+    userEvent.type(screen.getByTitle('Page'), '5')
+    userEvent.tab()
+    expect(onPageChange).toHaveBeenLastCalledWith(4)
+  })
+
+  it('calls the onRowsPerPageChange with the selected option', () => {
+    const onPageChange = jest.fn()
+    const onRowsPerPageChange = jest.fn()
+    setup({
+      page: 2,
+      onPageChange,
+      onRowsPerPageChange,
+    })
+    userEvent.click(screen.getByTestId('rows-per-page-button'))
+    userEvent.click(screen.getByText(/50 per page/i))
+
+    expect(onRowsPerPageChange).toHaveBeenLastCalledWith(50)
+    expect(onPageChange).toHaveBeenLastCalledWith(0)
+  })
+
+  it('hides some actions for the compact variant', () => {
+    setup({
+      variant: 'compact',
+    })
+
+    expect(screen.queryByTitle(/first page/i)).not.toBeInTheDocument()
+    expect(screen.queryByTitle(/last page/i)).not.toBeInTheDocument()
+    expect(screen.queryByTitle('Page')).not.toBeInTheDocument()
+  })
+
+  it('disables all the buttons when the component is disabled', () => {
+    setup({
+      disabled: true,
+    })
+
+    expect(screen.getByTitle('Page')).toBeDisabled()
+    expect(screen.getByTitle(/previous page/i)).toBeDisabled()
+    expect(screen.getByTitle(/first page/i)).toBeDisabled()
+    expect(screen.getByTitle(/next page/i)).toBeDisabled()
+    expect(screen.getByTitle(/last page/i)).toBeDisabled()
+    expect(screen.getByTestId('rows-per-page-button')).toBeDisabled()
+  })
+
+  it('displays no pages state when no items available', () => {
+    setup({
+      count: 0,
+    })
+
+    expect(screen.getByTitle('Page')).toHaveValue(0)
+    expect(screen.getByTitle('Page')).toBeDisabled()
+    expect(screen.getByTitle(/previous page/i)).toBeDisabled()
+    expect(screen.getByTitle(/first page/i)).toBeDisabled()
+    expect(screen.getByTitle(/next page/i)).toBeDisabled()
+    expect(screen.getByTitle(/last page/i)).toBeDisabled()
+    expect(screen.getByTestId('rows-per-page-button')).toBeDisabled()
+  })
+})

package/src/components/TablePagination/TablePagination.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import { Layout } from 'components/Layout'
+
+import type { TablePaginationProps } from './TablePagination.types'
+import TablePaginationActions from 'components/TablePagination/TablePaginationActions'
+import RowsPerPage from 'components/TablePagination/RowsPerPage'
+
+function TablePagination(props: TablePaginationProps): JSX.Element {
+  const {
+    variant = 'default',
+    count,
+    labelRowsPerPage = 'Rows per page:',
+    onPageChange,
+    onRowsPerPageChange,
+    page,
+    rowsPerPage = 50,
+    rowsPerPageOptions = [10, 25, 50, 100],
+    disabled = false,
+    ...rest
+  } = props
+
+  const handleRowsPerPageChange = (selectedOption: number) => {
+    onRowsPerPageChange(selectedOption)
+    onPageChange(0)
+  }
+
+  return (
+    <Layout.Group space="xl" align="center" justify="space-between" {...rest}>
+      <RowsPerPage
+        page={page}
+        count={count}
+        onRowsPerPageChange={handleRowsPerPageChange}
+        rowsPerPage={rowsPerPage}
+        rowsPerPageOptions={rowsPerPageOptions}
+        labelRowsPerPage={labelRowsPerPage}
+        disabled={disabled || !count}
+      />
+      <TablePaginationActions
+        variant={variant}
+        page={page}
+        onPageChange={onPageChange}
+        rowsPerPage={rowsPerPage}
+        count={count}
+        disabled={disabled || !count}
+      />
+    </Layout.Group>
+  )
+}
+
+export default TablePagination

package/src/components/TablePagination/TablePagination.types.ts

@@ -0,0 +1,59 @@
+import { GroupProps } from 'components/Layout/Group'
+
+export interface TablePaginationProps extends GroupProps {
+  /**
+   * The pagination variant
+   * @default 'default'
+   */
+  variant?: 'compact' | 'default'
+  /**
+   * The total number of paginated items
+   */
+  count: number
+  /**
+   * Customize the rows per page label.
+   * @default 'Rows per page:'
+   */
+  labelRowsPerPage?: string
+  /**
+   * Callback fired when the page is changed.
+   */
+  onPageChange: (page: number) => void
+  /**
+   * Callback fired when the number of rows per page is changed.
+   */
+  onRowsPerPageChange: (rowsPerPage: number) => void
+  /**
+   * The number of rows per page.
+   * @default 50
+   */
+  rowsPerPage?: number
+  /**
+   * The zero-based index of the current page.
+   */
+  page: number
+  /**
+   * Customizes the options of the rows per page select field.
+   * @default [10, 25, 50, 100]
+   */
+  rowsPerPageOptions?: number[]
+  /**
+   * Disable all the pagination actions
+   */
+  disabled?: boolean
+}
+
+export type TablePaginationActionsProps = Omit<
+  TablePaginationProps,
+  'labelRowsPerPage' | 'onRowsPerPageChange' | 'rowsPerPageOptions' | 'rowsPerPage'
+> & {
+  rowsPerPage: number
+}
+
+export type RowsPerPageProps = Omit<
+  TablePaginationProps,
+  'rowsPerPageOptions' | 'onPageChange' | 'rowsPerPage'
+> & {
+  rowsPerPageOptions: number[]
+  rowsPerPage: number
+}

package/src/components/TablePagination/TablePaginationActions.tsx

@@ -0,0 +1,144 @@
+import React, { ChangeEvent, KeyboardEvent, useEffect, useState } from 'react'
+
+import { Layout } from 'components/Layout'
+import { Text } from 'components/Text'
+import { TextField } from 'components/TextField'
+import { TablePaginationActionsProps } from 'components/TablePagination/TablePagination.types'
+import styled from 'styled-components'
+import { Icon, IconProps } from 'components/Icon'
+import Keyboard from 'utils/toolset/keyboard'
+import { NoPaddingButton } from './TablePagination.styles'
+import { prop } from 'tools/index'
+
+export const ActionIcon = styled(Icon).attrs({
+  color: 'neutral-darker',
+  size: '16',
+})<IconProps & { rotate?: number }>`
+  transform: rotate(${prop('rotate', 0)}deg);
+`
+
+function TablePaginationActions({
+  variant = 'default',
+  disabled = false,
+  onPageChange,
+  page,
+  count,
+  rowsPerPage,
+}: TablePaginationActionsProps): JSX.Element {
+  const totalPages = Math.ceil(count / rowsPerPage)
+  const [pageValue, setPageValue] = useState<number | ''>(page + 1)
+  const isCompact = variant === 'compact'
+
+  useEffect(() => {
+    setPageValue(page + 1)
+  }, [page])
+
+  const handleFirstPageClick = () => {
+    onPageChange(0)
+  }
+
+  const handlePreviousPageClick = () => {
+    onPageChange(page - 1)
+  }
+
+  const handleNextPageClick = () => {
+    onPageChange(page + 1)
+  }
+
+  const handleLastPageClick = () => {
+    onPageChange(totalPages - 1)
+  }
+
+  const publishPageChange = () => {
+    if (pageValue && pageValue - 1 !== page) {
+      onPageChange(pageValue - 1)
+    }
+  }
+
+  const handleKeyUp = (e: KeyboardEvent) => {
+    if (Keyboard(e).is('ENTER')) {
+      publishPageChange()
+    }
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (Keyboard(e).is(['E_LOWERCASE', 'DOT', 'MINUS', 'PLUS'])) {
+      e.preventDefault()
+    }
+  }
+
+  const handlePageChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === '') {
+      setPageValue('')
+      return
+    }
+
+    const numberValue = Number(e.target.value)
+
+    if (!numberValue || numberValue < 1 || numberValue > totalPages) return
+
+    setPageValue(numberValue)
+  }
+
+  return (
+    <Layout.Group space="s" align="center">
+      {!isCompact && (
+        <NoPaddingButton
+          onClick={handleFirstPageClick}
+          disabled={page === 0 || disabled}
+          title="First page"
+        >
+          <ActionIcon name="caret-right-last" rotate={180} />
+        </NoPaddingButton>
+      )}
+      <NoPaddingButton
+        onClick={handlePreviousPageClick}
+        disabled={page === 0 || disabled}
+        title="Previous page"
+      >
+        <ActionIcon name="caret-left" />
+      </NoPaddingButton>
+      {!isCompact && (
+        <>
+          <TextField
+            type="number"
+            min={1}
+            max={totalPages}
+            disabled={disabled || totalPages === 1}
+            onChange={handlePageChange}
+            onBlur={publishPageChange}
+            onKeyUp={handleKeyUp}
+            onKeyDown={handleKeyDown}
+            scale="small"
+            value={count ? pageValue : 0}
+            title="Page"
+          />
+          <Text variant="body" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
+            of{' '}
+            <Text variant="body-bold" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
+              {totalPages}
+            </Text>
+          </Text>
+        </>
+      )}
+      <NoPaddingButton
+        onClick={handleNextPageClick}
+        disabled={page >= totalPages - 1 || disabled}
+        title="Next page"
+      >
+        <ActionIcon name="caret-right" />
+      </NoPaddingButton>
+      {!isCompact && (
+        <NoPaddingButton
+          onClick={handleLastPageClick}
+          disabled={page >= totalPages - 1 || disabled}
+          title="Last page"
+        >
+          <ActionIcon name="caret-right-last" />
+        </NoPaddingButton>
+      )}
+    </Layout.Group>
+  )
+}
+
+export default TablePaginationActions

package/src/components/TablePagination/index.ts

@@ -0,0 +1,2 @@
+export { default as TablePagination } from './TablePagination'
+export type { TablePaginationProps } from './TablePagination.types'

package/src/components/Tag/Tag.tsx

@@ -338,7 +338,7 @@ function Tag(props: TagProps): JSX.Element {
   const {
     children,
     leading,
-    size,
+    size = 'default',
     onRemove,
     variant,
     removable,