@veracity/vui 1.0.0 → 1.1.0

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

package/src/table/theme.ts

@@ -1,43 +1,43 @@
 const baseStyle = {}
 
 const defaultProps = {
-	size: 'lg',
-	variant: 'bordered'
+  size: 'lg',
+  variant: 'bordered'
 }
 
 const parts = ['container', 'sortIcon', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr']
 
 const sizes = {
-	lg: {
-		tr: {
-			h: 48
-		}
-	},
-	md: {
-		tr: {
-			h: 40
-		}
-	},
-	sm: {
-		tr: {
-			h: 32
-		}
-	}
+  lg: {
+    tr: {
+      h: 48
+    }
+  },
+  md: {
+    tr: {
+      h: 40
+    }
+  },
+  sm: {
+    tr: {
+      h: 32
+    }
+  }
 }
 
 const variants = {
-	bordered: {
-		td: {
-			borderBottom: '1px solid grey.20'
-		}
-	},
-	striped: {}
+  bordered: {
+    td: {
+      borderBottom: '1px solid grey.20'
+    }
+  },
+  striped: {}
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/table/tr.tsx

@@ -6,30 +6,28 @@ import { useTableContext } from './context'
 import { TrProps } from './table.types'
 
 export const TrBase = styled.trBox`
-	transition-duration: fast;
+  transition-duration: fast;
 `
 
 /** Displays Table row that can contain heading or data cells. */
 export const Tr = vui<'tr', TrProps>((props, ref) => {
-	const { className, isSelected, ...rest } = props
-	const { variant } = useTableContext() ?? {}
-	const styles = useStyleConfig('Table', useTableContext())
+  const { className, isSelected, ...rest } = props
+  const { variant } = useTableContext() ?? {}
+  const styles = useStyleConfig('Table', useTableContext())
 
-	const selectedProps = isSelected ? { bg: 'blue.10' } : {}
+  const selectedProps = isSelected ? { bg: 'blue.10' } : {}
 
-	return (
-		<TrBase
-			className={cs('vui-tr', className)}
-			data-selected={Boolean(isSelected)}
-			data-variant={variant}
-			ref={ref}
-			{...styles.tr}
-			{...selectedProps}
-			{...rest}
-		/>
-	)
+  return (
+    <TrBase
+      className={cs('vui-tr', className)}
+      data-selected={Boolean(isSelected)}
+      data-variant={variant}
+      ref={ref}
+      {...styles.tr}
+      {...selectedProps}
+      {...rest}
+    />
+  )
 })
 
-Tr.displayName = 'Tr'
-
 export default Tr

package/src/table/useTable.ts

@@ -3,19 +3,19 @@ import { UseTableProps } from './useTable.types'
 
 /** Handles controlled/uncontrolled sort of the Table rows. */
 export default function useTable(props: UseTableProps) {
-	const { defaultSort = { key: '', order: 'asc' }, onSortChange: onSortChangeProp, sort: sortProp } = props
-	const [sort, onChange, { isControlled }] = useControlled({
-		defaultValue: defaultSort,
-		onChange: onSortChangeProp,
-		value: sortProp
-	})
+  const { defaultSort = { key: '', order: 'asc' }, onSortChange: onSortChangeProp, sort: sortProp } = props
+  const [sort, onChange, { isControlled }] = useControlled({
+    defaultValue: defaultSort,
+    onChange: onSortChangeProp,
+    value: sortProp
+  })
 
-	const onSortChange = useCallbackRef((key: string) => {
-		const order = sort.key === key ? (sort.order === 'asc' ? 'desc' : 'asc') : 'asc'
-		onChange({ key, order })
-	})
+  const onSortChange = useCallbackRef((key: string) => {
+    const order = sort.key === key ? (sort.order === 'asc' ? 'desc' : 'asc') : 'asc'
+    onChange({ key, order })
+  })
 
-	return { isControlled, onSortChange, sort }
+  return { isControlled, onSortChange, sort }
 }
 
 export type UseTableReturnType = ReturnType<typeof useTable>

package/src/table/useTable.types.ts

@@ -1,10 +1,10 @@
 import { Sort } from '../utils'
 
 export type UseTableProps = {
-	/** Initial sort value in uncontrolled mode. */
-	defaultSort?: Sort
-	/** Callback called with updated value when sort changes. */
-	onSortChange?: (sort: Sort) => void
-	/** Sort value in controlled mode. */
-	sort?: Sort
+  /** Initial sort value in uncontrolled mode. */
+  defaultSort?: Sort
+  /** Callback called with updated value when sort changes. */
+  onSortChange?: (sort: Sort) => void
+  /** Sort value in controlled mode. */
+  sort?: Sort
 }

package/src/tag/tag.tsx

@@ -9,28 +9,28 @@ import TagIcon from './tagIcon'
 import TagText from './tagText'
 
 export const TagBase = styled.spanBox`
-	align-items: center;
-	border-radius: md;
-	display: inline-flex;
-	font-weight: medium;
-	justify-content: center;
-	line-height: normal;
-	max-width: 100%;
-	position: relative;
-	transition-duration: fast;
-	width: fit-content;
-
-	&:focus {
-		border-color: transparent;
-		outline: none;
-	}
-
-	&[aria-disabled='true'] {
-		background-color: disabled.bg;
-		color: disabled.color;
-		cursor: not-allowed;
-		user-select: none;
-	}
+  align-items: center;
+  border-radius: md;
+  display: inline-flex;
+  font-weight: medium;
+  justify-content: center;
+  line-height: normal;
+  max-width: 100%;
+  position: relative;
+  transition-duration: fast;
+  width: fit-content;
+
+  &:focus {
+    border-color: transparent;
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    background-color: disabled.bg;
+    color: disabled.color;
+    cursor: not-allowed;
+    user-select: none;
+  }
 `
 
 /**
@@ -38,103 +38,101 @@ export const TagBase = styled.spanBox`
  * Exposes some props to the children via context.
  */
 export const Tag = vui<'span', TagProps>((props, ref) => {
-	const {
-		casing,
-		children,
-		className,
-		colorScheme = 'blue',
-		disabled,
-		icon,
-		iconLeft,
-		iconRight,
-		isFullWidth,
-		isInteractive = props.onClick !== undefined,
-		isRound,
-		isTruncated = true,
-		itemLeft,
-		itemRight,
-		onClick,
-		onDelete,
-		size = 'md',
-		text,
-		variant = 'subtle',
-		weight,
-		...rest
-	} = props
-	const styles = useStyleConfig('Tag', props)
-	const { activeBg, h, hoverBg, spaceX: spaceXBase = 0, ...tagStyles } = styles.container
-
-	const context = useMemo(
-		() => filterUndefined({ colorScheme, disabled, size, variant }),
-		[colorScheme, disabled, size, variant]
-	)
-
-	const spaceX = spaceXBase / 8
-	const spaceXText = (spaceXBase + 4) / 8
-	const pl = icon || itemLeft || iconLeft ? spaceX : spaceXText
-	const pr = icon || itemRight || iconRight ? spaceX : spaceXText
-
-	const interactiveProps =
-		!disabled && isInteractive
-			? {
-					cursor: 'pointer',
-					hoverBg,
-					activeBg,
-					tabIndex: 0,
-					userSelect: 'none'
-			  }
-			: {}
-
-	const aliasedProps = filterUndefined({
-		borderRadius: isRound ? h / 2 : undefined,
-		'aria-disabled': disabled,
-		fontWeight: weight,
-		textTransform: casing,
-		w: isFullWidth ? '100%' : undefined
-	})
-
-	return (
-		<TagProvider value={context}>
-			<TagBase
-				className={cs('vui-tag', className)}
-				focusRing={2}
-				h={h}
-				isTruncated={isTruncated}
-				onClick={!disabled ? onClick : undefined}
-				pl={pl}
-				pr={pr}
-				ref={ref}
-				{...tagStyles}
-				{...interactiveProps}
-				{...aliasedProps}
-				{...rest}
-			>
-				{isString(icon) ? <TagIcon name={icon} /> : icon}
-
-				{!icon && (
-					<>
-						{itemLeft}
-
-						{isString(iconLeft) ? <TagIcon mr={spaceX} name={iconLeft} /> : iconLeft}
-
-						{children ?? (isReactText(text) ? <TagText {...{ isTruncated, text }} /> : text)}
-
-						{isString(iconRight) ? <TagIcon ml={spaceX} name={iconRight} /> : iconRight}
-
-						{onDelete ? <TagButton ml={spaceX} onClick={onDelete} /> : itemRight}
-					</>
-				)}
-			</TagBase>
-		</TagProvider>
-	)
+  const {
+    casing,
+    children,
+    className,
+    colorScheme = 'blue',
+    disabled,
+    icon,
+    iconLeft,
+    iconRight,
+    isFullWidth,
+    isInteractive = props.onClick !== undefined,
+    isRound,
+    isTruncated = true,
+    itemLeft,
+    itemRight,
+    onClick,
+    onDelete,
+    size = 'md',
+    text,
+    variant = 'subtle',
+    weight,
+    ...rest
+  } = props
+  const styles = useStyleConfig('Tag', props)
+  const { activeBg, h, hoverBg, spaceX: spaceXBase = 0, ...tagStyles } = styles.container
+
+  const context = useMemo(
+    () => filterUndefined({ colorScheme, disabled, size, variant }),
+    [colorScheme, disabled, size, variant]
+  )
+
+  const spaceX = spaceXBase / 8
+  const spaceXText = (spaceXBase + 4) / 8
+  const pl = icon || itemLeft || iconLeft ? spaceX : spaceXText
+  const pr = icon || itemRight || iconRight ? spaceX : spaceXText
+
+  const interactiveProps =
+    !disabled && isInteractive
+      ? {
+          cursor: 'pointer',
+          hoverBg,
+          activeBg,
+          tabIndex: 0,
+          userSelect: 'none'
+        }
+      : {}
+
+  const aliasedProps = filterUndefined({
+    borderRadius: isRound ? h / 2 : undefined,
+    'aria-disabled': disabled,
+    fontWeight: weight,
+    textTransform: casing,
+    w: isFullWidth ? '100%' : undefined
+  })
+
+  return (
+    <TagProvider value={context}>
+      <TagBase
+        className={cs('vui-tag', className)}
+        focusRing={2}
+        h={h}
+        isTruncated={isTruncated}
+        onClick={!disabled ? onClick : undefined}
+        pl={pl}
+        pr={pr}
+        ref={ref}
+        {...tagStyles}
+        {...interactiveProps}
+        {...aliasedProps}
+        {...rest}
+      >
+        {isString(icon) ? <TagIcon name={icon} /> : icon}
+
+        {!icon && (
+          <>
+            {itemLeft}
+
+            {isString(iconLeft) ? <TagIcon mr={spaceX} name={iconLeft} /> : iconLeft}
+
+            {children ?? (isReactText(text) ? <TagText {...{ isTruncated, text }} /> : text)}
+
+            {isString(iconRight) ? <TagIcon ml={spaceX} name={iconRight} /> : iconRight}
+
+            {onDelete ? <TagButton isRound={isRound} ml={spaceX} onClick={onDelete} /> : itemRight}
+          </>
+        )}
+      </TagBase>
+    </TagProvider>
+  )
 }) as VuiComponent<'span', TagProps> & {
-	Button: typeof TagButton
-	Icon: typeof TagIcon
-	Text: typeof TagText
+  Button: typeof TagButton
+  Icon: typeof TagIcon
+  Text: typeof TagText
 }
 
-Tag.displayName = 'Tag'
-
 Tag.Button = TagButton
 Tag.Icon = TagIcon
 Tag.Text = TagText