@veracity/vui 1.0.0 → 1.1.1

package/src/table/table.tsx

@@ -17,100 +17,98 @@ import useTable from './useTable'
  * Displays a Table with support for columns, rows and sort.
  */
 export const TableBase = styled.tableBox<TableProps>`
-	border-collapse: separate;
-	border-spacing: 0px;
-	display: table;
-	position: relative;
-	width: 100%;
+  border-collapse: separate;
+  border-spacing: 0px;
+  display: table;
+  position: relative;
+  width: 100%;
 
-	${p =>
-		p.stickyColumn &&
-		css`
-			thead tr:last-of-type th:first-of-type,
-			td:first-of-type {
-				left: 0;
-				position: sticky;
-				z-index: 2;
+  ${p =>
+    p.stickyColumn &&
+    css`
+      thead tr:last-of-type th:first-of-type,
+      td:first-of-type {
+        left: 0;
+        position: sticky;
+        z-index: 2;
 
-				::after {
-					bottom: -1px;
-					box-shadow: inset 10px 0 8px -8px #00000026;
-					content: '';
-					pointer-events: none;
-					position: absolute;
-					right: 0;
-					top: 0;
-					transform: translate(100%);
-					transition: box-shadow 0.3s;
-					width: 10px;
-				}
-			}
+        ::after {
+          bottom: -1px;
+          box-shadow: inset 10px 0 8px -8px #00000026;
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          right: 0;
+          top: 0;
+          transform: translate(100%);
+          transition: box-shadow 0.3s;
+          width: 10px;
+        }
+      }
 
-			thead tr:last-of-type th:first-of-type:not([data-active='true']):not([data-disabled='true']),
-			td:first-of-type {
-				background-color: white;
-			}
-		`}
+      thead tr:last-of-type th:first-of-type:not([data-active='true']):not([data-disabled='true']),
+      td:first-of-type {
+        background-color: white;
+      }
+    `}
 `
 
 /** Displays a Table with support for columns, rows and sort. */
 export const Table = vui<'table', TableProps>((props, ref) => {
-	const {
-		children,
-		className,
-		columns,
-		defaultSort,
-		onSortChange,
-		rows,
-		size,
-		sort: sortProp,
-		stickyColumn,
-		stickyHeader,
-		variant,
-		...rest
-	} = props
-	const styles = useStyleConfig('Table', props)
-	const tableProps = useTable({ defaultSort, onSortChange, sort: sortProp })
-	const { isControlled, sort } = tableProps
+  const {
+    children,
+    className,
+    columns,
+    defaultSort,
+    onSortChange,
+    rows,
+    size,
+    sort: sortProp,
+    stickyColumn,
+    stickyHeader,
+    variant,
+    ...rest
+  } = props
+  const styles = useStyleConfig('Table', props)
+  const tableProps = useTable({ defaultSort, onSortChange, sort: sortProp })
+  const { isControlled, sort } = tableProps
 
-	// Rows are sorted internally only in uncontrolled mode, that is when 'sort' prop is not provided.
-	const sortedRows = useMemo(
-		() => (!isControlled ? rows?.slice().sort(compareBy(sort.key, sort.order)) : rows),
-		[rows, sort, isControlled]
-	)
+  // Rows are sorted internally only in uncontrolled mode, that is when 'sort' prop is not provided.
+  const sortedRows = useMemo(
+    () => (!isControlled ? rows?.slice().sort(compareBy(sort.key, sort.order)) : rows),
+    [rows, sort, isControlled]
+  )
 
-	const context = { ...tableProps, columns, rows: sortedRows, size, stickyColumn, stickyHeader, variant }
+  const context = { ...tableProps, columns, rows: sortedRows, size, stickyColumn, stickyHeader, variant }
 
-	return (
-		<TableProvider value={context}>
-			<TableBase
-				className={cs('vui-table', className)}
-				ref={ref}
-				stickyColumn={stickyColumn}
-				{...styles.container}
-				{...rest}
-			>
-				{children ?? (
-					<>
-						<Thead />
-						<Tbody />
-					</>
-				)}
-			</TableBase>
-		</TableProvider>
-	)
+  return (
+    <TableProvider value={context}>
+      <TableBase
+        className={cs('vui-table', className)}
+        ref={ref}
+        stickyColumn={stickyColumn}
+        {...styles.container}
+        {...rest}
+      >
+        {children ?? (
+          <>
+            <Thead />
+            <Tbody />
+          </>
+        )}
+      </TableBase>
+    </TableProvider>
+  )
 }) as VuiComponent<'table', TableProps> & {
-	SortIcon: typeof TableSortIcon
-	Tbody: typeof Tbody
-	Td: typeof Td
-	Tfoot: typeof Tfoot
-	Th: typeof Th
-	Thead: typeof Thead
-	Tr: typeof Tr
+  SortIcon: typeof TableSortIcon
+  Tbody: typeof Tbody
+  Td: typeof Td
+  Tfoot: typeof Tfoot
+  Th: typeof Th
+  Thead: typeof Thead
+  Tr: typeof Tr
 }
 
-Table.displayName = 'Table'
-
 Table.SortIcon = TableSortIcon
 Table.Tbody = Tbody
 Table.Td = Td

package/src/table/table.types.ts

@@ -6,29 +6,29 @@ import { UseTableReturnType } from './useTable'
 import { UseTableProps } from './useTable.types'
 
 export type TableColumn<T = string> = SystemProps & {
-	/** Unique identifier of a column. */
-	field: T
-	/** Adds content and styling related to sort. */
-	isSortable?: boolean
-	/** Displays given text inside the element. */
-	title?: string
+  /** Unique identifier of a column. */
+  field: T
+  /** Adds content and styling related to sort. */
+  isSortable?: boolean
+  /** Displays given text inside the element. */
+  title?: string
 }
 
 export type TableContext = Pick<TableProps, 'columns' | 'rows' | 'size' | 'stickyColumn' | 'stickyHeader' | 'variant'> &
-	UseTableReturnType
+  UseTableReturnType
 
 export type TableProps = SystemProps &
-	UseTableProps &
-	ThemingProps<'Table'> & {
-		/** Data structure describing the columns. */
-		columns?: TableColumn[] | readonly TableColumn[]
-		/** Data structure describing the rows and their cells. */
-		rows?: any[]
-		/** First column will be sticky when scrolling horizontally. */
-		stickyColumn?: boolean
-		/** Table head will be sticky when scrolling vertically. */
-		stickyHeader?: boolean
-	}
+  UseTableProps &
+  ThemingProps<'Table'> & {
+    /** Data structure describing the columns. */
+    columns?: TableColumn[] | readonly TableColumn[]
+    /** Data structure describing the rows and their cells. */
+    rows?: any[]
+    /** First column will be sticky when scrolling horizontally. */
+    stickyColumn?: boolean
+    /** Table head will be sticky when scrolling vertically. */
+    stickyHeader?: boolean
+  }
 
 export type TbodyProps = SystemProps
 
@@ -37,21 +37,21 @@ export type TdProps = SystemProps
 export type TfootProps = SystemProps
 
 export type ThProps = SystemProps &
-	Partial<TableColumn> & {
-		/** Adds disabled styling. */
-		disabled?: boolean
-		/** Adds interactive styling. */
-		isInteractive?: boolean
-	}
+  Partial<TableColumn> & {
+    /** Adds disabled styling. */
+    disabled?: boolean
+    /** Adds interactive styling. */
+    isInteractive?: boolean
+  }
 
 export type TheadProps = SystemProps & {}
 
 export type TrProps = SystemProps & {
-	/** Adds selected styling. */
-	isSelected?: boolean
+  /** Adds selected styling. */
+  isSelected?: boolean
 }
 
 export type TableSortIconProps = Omit<IconProps, 'order'> & {
-	/** Sort order which controls the icon. */
-	order?: Sort['order']
+  /** Sort order which controls the icon. */
+  order?: Sort['order']
 }

package/src/table/tableSortIcon.tsx

@@ -8,27 +8,25 @@ import { TableSortIconProps } from './table.types'
 
 /** Displays a sort icon with given direction based on sort order. */
 export const TableSortIcon = vui<'svg', TableSortIconProps>((props, ref) => {
-	const { className, order, ...rest } = props
-	const styles = useStyleConfig('Table', useTableContext())
+  const { className, order, ...rest } = props
+  const styles = useStyleConfig('Table', useTableContext())
 
-	// Rotating 1 icon is works better than switching multiple
-	const rotate = order === 'asc' ? 180 : 0
-	const pathFill = order !== undefined ? ['blue.80', 'grey.40'] : 'grey.40'
+  // Rotating 1 icon is works better than switching multiple
+  const rotate = order === 'asc' ? 180 : 0
+  const pathFill = order !== undefined ? ['blue.80', 'grey.40'] : 'grey.40'
 
-	return (
-		<Icon
-			className={cs('vui-tableSortIcon', className)}
-			name="fadSortUp"
-			pathFill={pathFill}
-			ref={ref}
-			rotate={rotate}
-			size="xs"
-			{...styles.tableSortIcon}
-			{...rest}
-		/>
-	)
+  return (
+    <Icon
+      className={cs('vui-tableSortIcon', className)}
+      name="fadSortUp"
+      pathFill={pathFill}
+      ref={ref}
+      rotate={rotate}
+      size="xs"
+      {...styles.tableSortIcon}
+      {...rest}
+    />
+  )
 })
 
-TableSortIcon.displayName = 'TableSortIcon'
-
 export default TableSortIcon

package/src/table/tbody.tsx

@@ -8,43 +8,41 @@ import Td from './td'
 import Tr from './tr'
 
 export const TbodyBase = styled.tbodyBox`
-	tr {
-		:hover td {
-			background-color: grey.20;
-		}
-
-		&[data-selected='true']:hover td {
-			background-color: blue.20;
-		}
-
-		&[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {
-			background-color: grey.10;
-		}
-	}
+  tr {
+    :hover td {
+      background-color: grey.20;
+    }
+
+    &[data-selected='true']:hover td {
+      background-color: blue.20;
+    }
+
+    &[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {
+      background-color: grey.10;
+    }
+  }
 `
 
 /** Displays Table body with built-in support for rows. */
 export const Tbody = vui<'tbody', TbodyProps>((props, ref) => {
-	const { children, className, ...rest } = props
-	const { columns, rows } = useTableContext() ?? {}
-	const styles = useStyleConfig('Table', useTableContext())
-
-	return (
-		<TbodyBase className={cs('vui-tbody', className)} ref={ref} {...styles.tbody} {...rest}>
-			{children ??
-				rows?.map((row, index) => (
-					<Tr key={index}>
-						{columns?.map(column => (
-							<Td key={column.field} {...column}>
-								{row[column.field]}
-							</Td>
-						))}
-					</Tr>
-				))}
-		</TbodyBase>
-	)
+  const { children, className, ...rest } = props
+  const { columns, rows } = useTableContext() ?? {}
+  const styles = useStyleConfig('Table', useTableContext())
+
+  return (
+    <TbodyBase className={cs('vui-tbody', className)} ref={ref} {...styles.tbody} {...rest}>
+      {children ??
+        rows?.map((row, index) => (
+          <Tr key={index}>
+            {columns?.map(column => (
+              <Td key={column.field} {...column}>
+                {row[column.field]}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+    </TbodyBase>
+  )
 })
 
-Tbody.displayName = 'Tbody'
-
 export default Tbody

package/src/table/td.tsx

@@ -6,17 +6,15 @@ import { useTableContext } from './context'
 import { TdProps } from './table.types'
 
 export const TdBase = styled.tdBox`
-	transition-duration: fast;
+  transition-duration: fast;
 `
 
 /** Displays a cell inside Table row. */
 export const Td = vui<'td', TdProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Table', useTableContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Table', useTableContext())
 
-	return <TdBase className={cs('vui-td', className)} px={2} ref={ref} {...styles.td} {...rest} />
+  return <TdBase className={cs('vui-td', className)} px={2} ref={ref} {...styles.td} {...rest} />
 })
 
-Td.displayName = 'Td'
-
 export default Td

package/src/table/tfoot.tsx

@@ -9,12 +9,10 @@ export const TfootBase = styled.tfootBox``
 
 /** Displays Table footer. */
 export const Tfoot = vui<'tfoot', TfootProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Table', useTableContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Table', useTableContext())
 
-	return <TfootBase className={cs('vui-tfoot', className)} ref={ref} {...styles.tfoot} {...rest} />
+  return <TfootBase className={cs('vui-tfoot', className)} ref={ref} {...styles.tfoot} {...rest} />
 })
 
-Tfoot.displayName = 'Tfoot'
-
 export default Tfoot

package/src/table/th.tsx

@@ -8,75 +8,73 @@ import { ThProps } from './table.types'
 import TableSortIcon from './tableSortIcon'
 
 export const ThBase = styled.thBox`
-	font-weight: demi;
-	text-align: left;
-	transition-duration: fast;
+  font-weight: demi;
+  text-align: left;
+  transition-duration: fast;
 `
 
 /** Displays Table heading with support for sort. */
 export const Th = vui<'th', ThProps>((props, ref) => {
-	const {
-		children,
-		className,
-		disabled,
-		field,
-		isInteractive: isInteractiveProp,
-		isSortable,
-		onClick: onClickProp,
-		title,
-		...rest
-	} = props
-	const { onSortChange, sort } = useTableContext() ?? {}
-	const styles = useStyleConfig('Table', useTableContext())
+  const {
+    children,
+    className,
+    disabled,
+    field,
+    isInteractive: isInteractiveProp,
+    isSortable,
+    onClick: onClickProp,
+    title,
+    ...rest
+  } = props
+  const { onSortChange, sort } = useTableContext() ?? {}
+  const styles = useStyleConfig('Table', useTableContext())
 
-	const onClick = isSortable
-		? useCallbackRef((e: MouseEvent<HTMLTableCellElement>) => {
-				onClickProp?.(e)
-				field && onSortChange(field)
-		  })
-		: onClickProp
+  const onClick = isSortable
+    ? useCallbackRef((e: MouseEvent<HTMLTableCellElement>) => {
+        onClickProp?.(e)
+        field && onSortChange(field)
+      })
+    : onClickProp
 
-	const isActive = !disabled && sort?.key === field
-	const sortOrder = isActive ? sort.order : undefined
-	const isInteractive = isInteractiveProp ?? onClick !== undefined
+  const isActive = !disabled && sort?.key === field
+  const sortOrder = isActive ? sort.order : undefined
+  const isInteractive = isInteractiveProp ?? onClick !== undefined
 
-	const activeProps = isActive ? { bg: 'blue.10' } : {}
+  const activeProps = isActive ? { bg: 'blue.10' } : {}
 
-	const disabledProps = disabled ? { bg: 'disabled.bg', color: 'disabled.color', cursor: 'not-allowed' } : {}
+  const disabledProps = disabled ? { bg: 'disabled.bg', color: 'disabled.color', cursor: 'not-allowed' } : {}
 
-	const interactiveProps =
-		!disabled && isInteractive
-			? {
-					cursor: 'pointer',
-					onClick,
-					tabIndex: 0,
-					userSelect: 'none'
-			  }
-			: {}
+  const interactiveProps =
+    !disabled && isInteractive
+      ? {
+          cursor: 'pointer',
+          onClick,
+          tabIndex: 0,
+          userSelect: 'none'
+        }
+      : {}
 
-	return (
-		<ThBase
-			className={cs('vui-th', className)}
-			data-active={isActive}
-			data-disabled={disabled}
-			px={2}
-			ref={ref}
-			{...styles.th}
-			{...activeProps}
-			{...disabledProps}
-			{...interactiveProps}
-			{...rest}
-		>
-			{children ?? (
-				<Box centerV display="inline-flex">
-					{title}
-					{isSortable && <TableSortIcon ml={1} my={0.5} order={sortOrder} />}
-				</Box>
-			)}
-		</ThBase>
-	)
+  return (
+    <ThBase
+      className={cs('vui-th', className)}
+      data-active={isActive}
+      data-disabled={disabled}
+      px={2}
+      ref={ref}
+      {...styles.th}
+      {...activeProps}
+      {...disabledProps}
+      {...interactiveProps}
+      {...rest}
+    >
+      {children ?? (
+        <Box centerV display="inline-flex">
+          {title}
+          {isSortable && <TableSortIcon ml={1} my={0.5} order={sortOrder} />}
+        </Box>
+      )}
+    </ThBase>
+  )
 })
 
-Th.displayName = 'Th'
-
 export default Th

package/src/table/thead.tsx

@@ -8,43 +8,41 @@ import Th from './th'
 import Tr from './tr'
 
 export const TheadBase = styled.theadBox`
-	tr:not(:last-of-type) th {
-		border-bottom: 1px solid grey.20;
-	}
+  tr:not(:last-of-type) th {
+    border-bottom: 1px solid grey.20;
+  }
 
-	tr:last-of-type th {
-		border-bottom: 1px solid grey.40;
-	}
+  tr:last-of-type th {
+    border-bottom: 1px solid grey.40;
+  }
 `
 
 /** Displays Table head with support for columns and sticky. */
 export const Thead = vui<'thead', TheadProps>((props, ref) => {
-	const { children, className, ...rest } = props
-	const { columns, stickyHeader } = useTableContext() ?? {}
-	const styles = useStyleConfig('Table', useTableContext())
-
-	const stickyProps = stickyHeader
-		? {
-				bg: 'white',
-				position: 'sticky',
-				top: 0,
-				zIndex: 3
-		  }
-		: {}
-
-	return (
-		<TheadBase className={cs('vui-thead', className)} ref={ref} {...stickyProps} {...styles.thead} {...rest}>
-			{children ?? (
-				<Tr>
-					{columns?.map(column => (
-						<Th key={column.field} {...column} />
-					))}
-				</Tr>
-			)}
-		</TheadBase>
-	)
+  const { children, className, ...rest } = props
+  const { columns, stickyHeader } = useTableContext() ?? {}
+  const styles = useStyleConfig('Table', useTableContext())
+
+  const stickyProps = stickyHeader
+    ? {
+        bg: 'white',
+        position: 'sticky',
+        top: 0,
+        zIndex: 3
+      }
+    : {}
+
+  return (
+    <TheadBase className={cs('vui-thead', className)} ref={ref} {...stickyProps} {...styles.thead} {...rest}>
+      {children ?? (
+        <Tr>
+          {columns?.map(column => (
+            <Th key={column.field} {...column} />
+          ))}
+        </Tr>
+      )}
+    </TheadBase>
+  )
 })
 
-Thead.displayName = 'Thead'
-
 export default Thead