@loadsmart/loadsmart-ui 5.0.1 → 5.2.0

package/src/components/Table/Table.stories.tsx

@@ -3,14 +3,16 @@ import React from 'react'
 import { Meta } from '@storybook/react/types-6-0'
 
 import Table, { useSelection } from './Table'
-import type { TableProps } from './Table.types'
+import type { TableColumns, TableProps } from './Table.types'
 import useSortBy from './useSortBy'
 
 import { TABLE_COLUMNS, TABLE_ROWS } from './Table.fixtures'
+import type { RowFixture } from './Table.fixtures'
 
 import { Button } from 'components/Button'
 import { Text } from 'components/Text'
 import { Switch } from 'components/Switch'
+import { Icon } from 'components/Icon'
 
 export default {
   title: 'Components/Table',
@@ -118,7 +120,141 @@ WithSorting.args = {
   scale: 'default',
 }
 
-export function Selection(args: TableProps): JSX.Element {
+export function WithColumnPicker(args: TableProps): JSX.Element {
+  const ID_COLUMNS: TableColumns<RowFixture> = [
+    {
+      title: 'Ref',
+      option: 'Reference',
+      key: 'ref',
+    },
+    {
+      title: 'Seq',
+      option: 'Sequence',
+      key: 'value',
+    },
+  ]
+
+  const [idCol, setIdCol] = React.useState(ID_COLUMNS[0])
+
+  return (
+    <Table {...args}>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeadCell>
+            {idCol.title}
+            <Table.Picker
+              value={idCol}
+              onChange={setIdCol}
+              options={ID_COLUMNS}
+              title="Pick an identifier column"
+            />
+          </Table.HeadCell>
+          <Table.HeadCell>Product Name</Table.HeadCell>
+          <Table.HeadCell>Price</Table.HeadCell>
+          <Table.HeadCell>Owner</Table.HeadCell>
+          <Table.HeadCell>
+            Release Date
+            <Table.Picker trigger={(expanded) => (expanded ? 'close' : 'open')} align="end">
+              <Table.Picker.Item checked option={{ title: 'Release Date', key: 'release-date' }} />
+              <Table.Picker.Item disabled>Example of custom item</Table.Picker.Item>
+            </Table.Picker>
+          </Table.HeadCell>
+        </Table.Row>
+      </Table.Head>
+
+      <Table.Body>
+        {TABLE_ROWS.map((entry) => (
+          <Table.Row>
+            <Table.Cell>{entry[idCol.key]}</Table.Cell>
+            <Table.Cell>{entry.product}</Table.Cell>
+            <Table.Cell>${new Intl.NumberFormat().format(Number(entry.price))}</Table.Cell>
+            <Table.Cell>{entry.owner}</Table.Cell>
+            <Table.Cell>{entry['release-date']}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+
+WithColumnPicker.args = {
+  scale: 'default',
+}
+
+WithColumnPicker.parameters = {
+  docs: {
+    description: {
+      story: `
+#### \`<Table.Picker />\`
+
+This component renders a \`Dropdown\` menu, making it possible for users to select what column should be visible at the moment.
+
+\`\`\`jsx
+interface IMyRow {
+  uuid: string
+  ext_id: string
+  ref: number
+  // other properties...
+}
+
+/* Make sure to import TableColumns generic type if you're using TypeScript */
+const FIRST_COLUMNS: TableColumns<IMyRow> = [
+  { key: 'uuid',   title: 'Id',      option: 'Identifier' },
+  { key: 'ext_id', title: 'Ext. Id', option: 'External Id' },
+  { key: 'ref',    title: 'Ref',     option: 'Reference' },
+]
+
+function MyAmazingTable() {
+  const [pickedColumn, setPickedColumn] = React.useState(FIRST_COLUMNS[0])
+
+  return (
+    <Table>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeadCell>
+            {/* Don't forget to render the title of the current picked column */}
+            {pickedColumn.title}
+
+            <Table.Picker
+              value={pickedColumn}
+              onChange={(option) => setPickedColumn(option)}
+              options={FIRST_COLUMNS}
+              title="Pick an identifier column"
+            />
+          </Table.HeadCell>
+        </Table.Row>
+      </Table.Head>
+
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>
+            {/* The \`key\` property is the accessor of your data interface */}
+            {entry[pickedColumn.key]}
+          </Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+\`\`\`
+
+## Props
+
+| Prop     | Type                                  | Default        | Description                                    |
+|----------|---------------------------------------|----------------|------------------------------------------------|
+| value    | \`TableColumn<T>\`                    | \`undefined\`  | Current picked column                          |
+| onChange | \`(column: TableColumn<T>) => void\`  | \`undefined\`  | Callback that's invoked with the picked column |
+| options  | \`TableColumns<T>\`                   | \`undefined\`  | List of possible columns to pick               |
+        `,
+    },
+  },
+
+  source: {
+    type: 'code',
+  },
+}
+
+export function WithRowSelection(args: TableProps): JSX.Element {
   return (
     <div className="p-4 bg-neutral-white">
       <Table {...args} selection={{ onChange: console.log }}>
@@ -150,7 +286,7 @@ export function Selection(args: TableProps): JSX.Element {
             <Table.Row key={row.value}>
               <Table.Selection.Cell value={row} />
               {Object.keys(row)
-                .slice(1, 5)
+                .slice(1, 6)
                 .map((key, index) => (
                   <Table.Cell key={index}>{row[key]}</Table.Cell>
                 ))}
@@ -162,7 +298,7 @@ export function Selection(args: TableProps): JSX.Element {
   )
 }
 
-Selection.parameters = {
+WithRowSelection.parameters = {
   docs: {
     description: {
       story: `
@@ -214,7 +350,7 @@ It also accepts \`children\`, serving as a placeholder for when there are no sel
   },
 }
 
-Selection.args = {
+WithRowSelection.args = {
   scale: 'default',
 }
 
@@ -235,14 +371,14 @@ function MyCustomSelection() {
   )
 }
 
-const ADVANCED_ROWS = TABLE_ROWS.map((row) => {
+const CUSTOM_SELECTION_ROWS = TABLE_ROWS.map((row) => {
   const advancedRow = { ...row }
   advancedRow._type = 'myRow'
   advancedRow.rowId = advancedRow.value
   return advancedRow
 })
 
-export function AdvancedSelection(): JSX.Element {
+export function WithCustomRowSelection(): JSX.Element {
   return (
     <div className="p-4 bg-neutral-white">
       <Table<MyRow>
@@ -272,13 +408,13 @@ export function AdvancedSelection(): JSX.Element {
         </Table.Head>
 
         <Table.Body>
-          {ADVANCED_ROWS.map((row) => (
+          {CUSTOM_SELECTION_ROWS.map((row) => (
             <Table.Row key={row.value}>
               <Table.Selection.Cell value={row}>
                 {({ selected, toggle }) => <Switch onToggle={toggle} active={selected} />}
               </Table.Selection.Cell>
               {Object.keys(row)
-                .slice(1, 5)
+                .slice(1, 6)
                 .map((key, index) => (
                   <Table.Cell key={index}>{row[key]}</Table.Cell>
                 ))}
@@ -291,29 +427,24 @@ export function AdvancedSelection(): JSX.Element {
   )
 }
 
-AdvancedSelection.parameters = {
+WithCustomRowSelection.parameters = {
   docs: {
     description: {
       story: `
-The \`<Table>\` component accepts a \`selection\` prop, an object for the [\`useSelectable\`*(read more)*](#) hook, where you can specify if it's multiple or single, register an \`onChange\` callback, set your adapters, and even initially selected rows.
-
-### \`selection.multiple\`
-
-\`boolean\`: defaults to \`false\`, if set to \`true\` will render \`radio\` inputs and will only have one selected row.
+The \`<Table>\` component accepts a \`selection\` prop, an object for the \`useSelectable\` hook, where you can specify if it's multiple or single, register an \`onChange\` callback, set your adapters, and even initially selected rows.
 
-### \`selection.onChange\`
+**\`selection\`**
 
-\`function\`: defaults to \`undefined\`, callback that's invoked with the current selected rows for every change.
-
-### \`selection.selected\`
-
-\`array\`: defaults to \`[]\`, set the initial selected rows.
-
-### \`selection.adapters\`
-
-Your object interface doesn't have a \`value\` property, you can provide an adapter for any data type, by implementing a \`getKey\` function that returns your id, like so:
+| Prop     | Type                                         | Default        | Description                                                                                                                                                       |
+|----------|----------------------------------------------|----------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| multiple | \`boolean\`                                  | \`true\`       | If set to \`false\` renders \`radio\` inputs and will only have one selected row at maximum                                                                       |
+| onChange | \`(selected: T[]) => void\`                  | \`undefined\`  | Callback that's invoked with the current selected rows for every change                                                                                           |
+| selected | \`T[]\`                                      | \`[]\`         | Sets the initial selected rows                                                                                                                                    |
+| adapters | \`Record<T['_type'], SelectableAdapter<T>>\` | \`undefined\`  | If your data interface doesn't have a \`value\` property, you can provide an adapter, implementing a \`getKey\` function that returns your id. See example below. |
 
 \`\`\`jsx
+// Example of selection.adapters usage
+
 interface IMyRow {
   myKeyName: string
   _type: string

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

@@ -52,6 +52,35 @@ describe('<Table />', () => {
     })
   })
 
+  describe('Column Picker', () => {
+    it('should pick columns', () => {
+      const onChange = jest.fn()
+      const OPTION_1 = { title: 'Title1', option: 'Option1', key: 'key1' }
+      const OPTION_2 = { title: 'Title2', option: 'Option2', key: 'Key2' }
+
+      setup({
+        children: (
+          <Table.Picker
+            options={[OPTION_1, OPTION_2]}
+            onChange={onChange}
+            value={OPTION_1}
+            title="Pick a column"
+          />
+        ),
+      })
+
+      user.click(screen.getByRole('button', { name: 'Pick a column' }))
+
+      expect(screen.getAllByRole('option')).toHaveLength(2)
+
+      expect(screen.getByRole('option', { selected: true })).toHaveTextContent('Option1')
+
+      user.click(screen.getByRole('option', { name: 'Option2' }))
+
+      expect(onChange).toHaveBeenCalledWith(OPTION_2)
+    })
+  })
+
   describe('Selection', () => {
     it('should accept selections and allow bulk actions', () => {
       const action = jest.fn()

package/src/components/Table/Table.tsx

@@ -1,6 +1,7 @@
 import React, { Children, Fragment, isValidElement, useEffect } from 'react'
 import styled, { css } from 'styled-components'
 import type { ReactNode } from 'react'
+import { isFunction } from '@loadsmart/utils-function'
 
 import { getToken as token } from 'theming'
 import { conditional, whenProps, prop } from 'tools/index'
@@ -10,6 +11,10 @@ import { Checkbox } from 'components/Checkbox'
 import { Radio } from 'components/Radio'
 import { Link } from 'components/Link'
 import { Text } from 'components/Text'
+import { Dropdown } from 'components/Dropdown'
+import { Layout } from 'components/Layout'
+import { Icon } from 'components/Icon'
+import { Children as InternalButton } from 'components/Button/Button'
 
 import {
   isCellSelected,
@@ -28,6 +33,8 @@ import type {
   TableCaptionProps,
   TableSelectionProps,
   SelectionCellProps,
+  TablePickerItemProps,
+  TablePickerProps,
 } from './Table.types'
 
 const StyledTableBody = styled.tbody`
@@ -285,7 +292,9 @@ function TableHeadCell({
       onClick={onClick}
       {...others}
     >
-      {children}
+      <Layout.Group space="xs" align="center">
+        {children}
+      </Layout.Group>
     </StyledTableHeadCell>
   )
 }
@@ -322,6 +331,79 @@ function TableSelectionActions({ buttons, children, ...others }: TableSelectionP
   )
 }
 
+const StyledPickerTrigger = styled(Dropdown.Trigger.Button)`
+  padding: 0;
+
+  ${InternalButton} {
+    margin: ${token('space-2xs')};
+  }
+`
+
+function TablePickerItem<T>({
+  option,
+  checked,
+  children,
+  ...props
+}: TablePickerItemProps<T>): JSX.Element {
+  return (
+    <Dropdown.Item
+      leading={
+        checked ? (
+          <Icon name="check" size="16" color="neutral-darker" />
+        ) : (
+          <Layout.Box padding="s" />
+        )
+      }
+      role="option"
+      aria-selected={checked ? 'true' : 'false'}
+      {...props}
+    >
+      {children || (option && (option.option || option.title || option.key)) || 'Column'}
+    </Dropdown.Item>
+  )
+}
+
+const TriggerIcon = styled(Icon).attrs({
+  name: 'dots-horizontal',
+  size: '12',
+  color: 'neutral-darker',
+})`
+  transform: rotate(90deg);
+`
+
+function TablePicker<T>({
+  value,
+  onChange,
+  options,
+  align,
+  children,
+  trigger: propsTrigger,
+  ...props
+}: TablePickerProps<T>): JSX.Element {
+  return (
+    <Dropdown>
+      <StyledPickerTrigger trailing={null} scale="small" {...props}>
+        {propsTrigger !== undefined ? (
+          ({ expanded }) => (isFunction(propsTrigger) ? propsTrigger(expanded) : propsTrigger)
+        ) : (
+          <TriggerIcon />
+        )}
+      </StyledPickerTrigger>
+      <Dropdown.Menu align={align} role="listbox">
+        {children ||
+          options?.map((option, i) => (
+            <TablePickerItem
+              key={i}
+              option={option}
+              checked={option.key === value?.key}
+              onClick={() => onChange?.(option)}
+            />
+          ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  )
+}
+
 function useIsRowSelected(children: ReactNode): boolean {
   const { selected, config } = useTableSelection()
 
@@ -355,6 +437,8 @@ Table.Selection = {
   HeadCell: SelectionHeadCell,
 }
 Table.SortHandle = TableSortHandle
+TablePicker.Item = TablePickerItem
+Table.Picker = TablePicker
 
 export { useSelection }
 

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

@@ -1,6 +1,8 @@
 import { Selectable } from 'hooks/useSelectable'
-import type { ComponentType, HTMLAttributes } from 'react'
+import type { ComponentType, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
 import React from 'react'
+import type { DropdownMenuItemProps, DropdownMenuProps } from 'components/Dropdown'
+import type { DropdownTriggerButtonProps } from 'components/Dropdown/DropdownTrigger'
 
 import type { TableSelectableRow, TableSelectionConfig } from './Selection'
 
@@ -40,3 +42,39 @@ export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
   scale?: Scale
   selected?: boolean
 }
+
+export type TableColumn<T = Record<string, unknown>> = {
+  /**
+   * The accessor of you entry interface
+   */
+  key: keyof T
+
+  /**
+   * The label that should go in the Header cell
+   */
+  title: ReactNode
+
+  /**
+   * The text of the Dropdown.Item
+   * If omitted, `title` is used
+   */
+  option?: string
+}
+
+export type TableColumns<T> = Array<TableColumn<T>>
+
+export interface TablePickerItemProps<T> extends DropdownMenuItemProps {
+  option?: TableColumn<T>
+  checked?: boolean
+}
+
+export interface TablePickerProps<T>
+  extends PropsWithChildren<
+    Partial<Omit<DropdownTriggerButtonProps, 'onChange' | 'value' | 'children'>>
+  > {
+  value?: TableColumn<T>
+  onChange?: (value: TableColumn<T>) => void
+  options?: TableColumns<T>
+  trigger?: ReactNode | ((expanded: boolean) => ReactNode)
+  align?: DropdownMenuProps['align']
+}

package/src/components/Table/useSortBy.ts

@@ -1,18 +1,18 @@
 import { useCallback, useState } from 'react'
 
 import get from 'utils/toolset/get'
-import type { TableRowGroup, Column, ColumnGroup, SortState } from './useSortBy.types'
+import type { TableRowGroup, SortableColumn, ColumnGroup, SortState } from './useSortBy.types'
 import { SortDirection } from './useSortBy.types'
 
 /**
  * Sort table rows using column keys with Array.prototype.sort() function
  *
- * @param {Column} sortConfig - sorting config including `key` and `isSortedDesc`
+ * @param {SortableColumn} sortConfig - sorting config including `key` and `isSortedDesc`
  * @param {TableRowGroup} tableRowGroup - a group of table rows to be sorted
  *
  * @returns {TableRowGroup} sorted table rows
  */
-function sortRows(sortConfig: Column, tableRowGroup: TableRowGroup): TableRowGroup {
+function sortRows(sortConfig: SortableColumn, tableRowGroup: TableRowGroup): TableRowGroup {
   return [...tableRowGroup].sort((object1, object2) => {
     if (get(object1, sortConfig.key) > get(object2, sortConfig.key)) {
       return sortConfig.order === SortDirection.DESC ? -1 : 1
@@ -41,7 +41,7 @@ function useSortBy(
 ): {
   tableData: TableRowGroup
   columnData: ColumnGroup
-  sortByColumn: (column: Column) => void
+  sortByColumn: (column: SortableColumn) => void
 } {
   const [state, setState] = useState<SortState>({
     sortConfig: { key: '', title: '' },
@@ -51,7 +51,7 @@ function useSortBy(
 
   const { sortConfig, columnGroup: columns, tableRowGroup: tableRows } = state
 
-  const sortByColumn = useCallback((column: Column) => {
+  const sortByColumn = useCallback((column: SortableColumn) => {
     setState(({ columnGroup: columns, ...rest }) => {
       const updatedColumns: ColumnGroup = columns.map((current) => {
         if (!column.isSortable || current.key !== column.key) {

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

@@ -1,16 +1,16 @@
+import type { TableColumn } from './Table.types'
+
 export type TableRowGroup = Array<Record<string, string | number>>
 
-export type Column = {
-  key: string
-  title: string
+export interface SortableColumn extends TableColumn {
   isSortable?: boolean
   order?: SortDirection | null
 }
 
-export type ColumnGroup = Array<Column>
+export type ColumnGroup = Array<SortableColumn>
 
 export interface SortState {
-  sortConfig: Column
+  sortConfig: SortableColumn
   columnGroup: ColumnGroup
   tableRowGroup: TableRowGroup
 }

package/src/hooks/useClickOutside/useClickOutside.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 
 import KeyboardKey from 'utils/toolset/keyboard'
 
@@ -6,7 +6,7 @@ import type { RefObject } from 'react'
 
 function useClickOutside<T extends HTMLElement>(
   container: RefObject<T>,
-  callback: () => void,
+  callback: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void,
   disabled = false
 ): void {
   const [active, setActive] = useState(false)
@@ -19,23 +19,23 @@ function useClickOutside<T extends HTMLElement>(
   )
 
   const handleEvent = useCallback(
-    function handleEvent(e: Event) {
+    function handleEvent(event: MouseEvent | TouchEvent | KeyboardEvent) {
       function hasPressedEsc() {
-        return KeyboardKey((e as unknown) as React.KeyboardEvent).is('ESCAPE')
+        return KeyboardKey((event as unknown) as React.KeyboardEvent).is('ESCAPE')
       }
 
       if (!getContainer() || disabled) {
         return
       }
 
-      const target = e.target as Node
+      const target = event.target as Node
       const hasTarget = getContainer()?.contains(target)
 
       if (!active && hasTarget) {
         setActive(true)
       } else if (active && (!hasTarget || hasPressedEsc())) {
         setActive(false)
-        callback()
+        callback(event)
       }
     },
     [active, callback, disabled, getContainer]

package/src/testing/SelectEvent/SelectEvent.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
-import { waitFor, within, queries, fireEvent } from '@testing-library/dom'
+import { queries, waitFor, within } from '@testing-library/dom'
 import { act } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 // based on https://github.com/romgain/react-select-event/blob/master/src/index.ts
 
@@ -42,7 +43,7 @@ async function expand(input: HTMLElement): Promise<void> {
   }
 
   await act(async () => {
-    fireEvent.click(within(selectContainer).getByTestId('select-trigger-handle'))
+    userEvent.click(within(selectContainer).getByTestId('select-trigger-handle'))
 
     expect(await queries.findByRole(selectContainer, 'listbox')).toBeInTheDocument()
   })
@@ -62,7 +63,7 @@ async function collapse(input: HTMLElement): Promise<void> {
   }
 
   await act(async () => {
-    fireEvent.click(within(selectContainer).getByTestId('select-trigger-handle'))
+    userEvent.click(within(selectContainer).getByTestId('select-trigger-handle'))
 
     await waitFor(() => {
       expect(queries.queryByRole(selectContainer, 'listbox')).not.toBeInTheDocument()
@@ -88,7 +89,7 @@ async function select(option: string, input: HTMLElement): Promise<void> {
 
     // click the option if exists; Select currently closes when an item is clicked.
     if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {
-      fireEvent.click(optionElement)
+      userEvent.click(optionElement)
     }
   })
 
@@ -114,7 +115,7 @@ async function unselect(option: string, input: HTMLElement): Promise<void> {
 
     // ensures that the option exists and IS selected
     if (optionElement && optionElement.getAttribute('aria-selected') == 'true') {
-      fireEvent.click(optionElement)
+      userEvent.click(optionElement)
     }
   })
 
@@ -136,7 +137,7 @@ async function clear(input: HTMLElement): Promise<void> {
     const clearButton = within(selectContainer).getByTestId('select-trigger-clear')
 
     if (clearButton) {
-      fireEvent.click(clearButton)
+      userEvent.click(clearButton)
     }
   })
 }
@@ -151,7 +152,7 @@ async function search(query: string, input: HTMLElement): Promise<void> {
   const selectContainer = getReactSelectContainerFromInput(input)
 
   await act(async () => {
-    fireEvent.change(input, { target: { value: query } })
+    userEvent.type(input, query)
 
     await queries.findAllByRole(selectContainer, 'option')
   })