v0.134.0

Components

Table

Improvements on the table render performance

Breaking Changes

• Table composites are now required to implement the Table component
• onRowClick is defined using the TBodyRow onClick property
• useTableState doesn't receive the useDataView state return anymore, now it only receives the status
• getRowKey doesn't exist anymore, since now the user has full control of the item

Before

import { Table, createColumns, useTableState } from '@vtex/admin-ui'

const columns = createColumns(...)
const items = [...]

function Example() {
  const state = useTableState({
    columns,
    items,
  })

  return <Table state={state} />
}

After

import {
  Table,
  THead,
  THeadCell,
  TBody,
  TBodyRow,
  TBodyCell,
  createColumns,
  useTableState
} from '@vtex/admin-ui'

const columns = createColumns(...)
const items = [...]

function Example() {
  const { getTable, getHeadCell, getBodyCell, data } = useTableState({
    columns,
    items,
  })

  return (
    <Table {...getTable()}>
      <THead>
        {columns.map((column) => {
          <THeadCell {...getHeadCell(column)} />
        })
      </THead>
      <TBody>
        {items.map((item) => (
            <TBodyRow>
              {columns.map((column) => (
                <TBodyCell {...getBodyCell(column, item)} />
              ))}
            </TBodyRow>
        )}
      </TBody>
    </Table>
  )
}

Text resolver improvement

Columns using the Text resolver with descriptions that are too long, it is possible to truncate it by setting the overflow prop.

Usage

const columns = createColumns([
  {
    id: 'productName',
    header: 'Name',
    resolver: {
      type: 'text',
      columnType: 'name',
      overflow: 'ellipsis',
      mapText: (item) => item.productName,
      mapDescription: (item) => item.description,
    },
  },
  // other columns
])

Fixes

• Fixed columns are repositioned when the window is resized to prevent them from being in the wrong position.
• Avoid menu popover from getting stuck on the table when the menu is active (Menu resolver).

Pagination component review

Breaking changes

• Before, when setting the total of items in the pagination the page was reset to the first one. Now when setting the total of items the page remains the same. This change was made due to the many issue we've received regarding this behavior.

Skeleton

Improvements in the UI

DataView

New features

• DataViewActions -> A container to help organize the actions on the Header

Breaking changes

• DataViewControls was renamed to DataViewHeader
• Now all the status messages are defined and translated internally.
• not-found status doesn't have the option to add a suggestion anymore.

Before

import { DataView, DataViewControls, useDataViewState } from '@vtex/admin-ui'

function Example() {
  const view = useDataViewState()

  return (
    <DataView state={view}>
      <DataViewControls>
        <Search id="search" placeholder="Search" state={search} />
        <Flex>
          <Button variant="neutralTertiary">Button 1</Button>
          <Button variant="neutralTertiary">Button 2</Button>
          <Button variant="neutralTertiary">Button 3</Button>
        </Flex>
      </DataViewControls>
      {table}
    </DataView>
  )
}

After

Before

import {
  DataView,
  DataViewHeader,
  DataViewActions,
  useDataViewState,
} from '@vtex/admin-ui'

function Example() {
  const view = useDataViewState()

  return (
    <DataView state={view}>
      <DataViewHeader>
        <Flex justify="space-between">
          <Search id="search" placeholder="Search" state={search} />
          <DataViewActions>
            <Button variant="neutralTertiary">Button 1</Button>
            <Button variant="neutralTertiary">Button 2</Button>
            <Pagination />
          </DataViewActions>
        </Flex>
        <FilterGroup>...</FilterGroup>
      </DataViewHeader>
      {table}
    </DataView>
  )
}

@vtex/admin-ui-form

• export useFieldArray to improve the validation ste

  p