@veracity/vui 1.0.0 → 1.1.0

package/src/list/list.tsx

@@ -14,36 +14,34 @@ export const ListBase = styled.ulBox``
 
 /** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
 export const List = vui<'ul', ListProps>((props, ref) => {
-	const { children, className, colorScheme, heading, isInteractive, items, size, variant, ...rest } = props
-	const styles = useStyleConfig('List', props)
-
-	const context = useMemo(
-		() => filterUndefined({ colorScheme, isInteractive, size, variant }),
-		[colorScheme, isInteractive, size, variant]
-	)
-
-	return (
-		<ListProvider value={context}>
-			<ListBase className={cs('vui-list', className)} ref={ref} {...styles.container} {...rest}>
-				{isReactText(heading) ? <ListHeading text={heading} /> : heading}
-
-				{children ??
-					(isArray<ListItemProps>(items)
-						? items.map(({ key, ...props }, index) => <ListItem key={key ?? index} {...props} />)
-						: items)}
-			</ListBase>
-		</ListProvider>
-	)
+  const { children, className, colorScheme, heading, isInteractive, items, size, variant, ...rest } = props
+  const styles = useStyleConfig('List', props)
+
+  const context = useMemo(
+    () => filterUndefined({ colorScheme, isInteractive, size, variant }),
+    [colorScheme, isInteractive, size, variant]
+  )
+
+  return (
+    <ListProvider value={context}>
+      <ListBase className={cs('vui-list', className)} ref={ref} {...styles.container} {...rest}>
+        {isReactText(heading) ? <ListHeading text={heading} /> : heading}
+
+        {children ??
+          (isArray<ListItemProps>(items)
+            ? items.map(({ key, ...props }, index) => <ListItem key={key ?? index} {...props} />)
+            : items)}
+      </ListBase>
+    </ListProvider>
+  )
 }) as VuiComponent<'ul', ListProps> & {
-	Divider: typeof ListDivider
-	Heading: typeof ListHeading
-	Icon: typeof ListIcon
-	Item: typeof ListItem
-	Text: typeof ListText
+  Divider: typeof ListDivider
+  Heading: typeof ListHeading
+  Icon: typeof ListIcon
+  Item: typeof ListItem
+  Text: typeof ListText
 }
 
-List.displayName = 'List'
-
 List.Divider = ListDivider
 List.Heading = ListHeading
 List.Icon = ListIcon

package/src/list/list.types.ts

@@ -7,47 +7,47 @@ import { ThemingProps } from '../theme'
 import { PropsOf } from '../utils'
 
 export type ListProps = SystemProps &
-	ThemingProps<'List'> & {
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'grey'
-		/** Socket displaying a heading above the items. */
-		heading?: React.ReactNode
-		/** Passed to all nested items to make them interactive. */
-		isInteractive?: boolean
-		/** Socket displaying a list of items. */
-		items?: PropsOf<'li', ListItemProps>[] | JSX.Element
-	}
+  ThemingProps<'List'> & {
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'grey'
+    /** Socket displaying a heading above the items. */
+    heading?: React.ReactNode
+    /** Passed to all nested items to make them interactive. */
+    isInteractive?: boolean
+    /** Socket displaying a list of items. */
+    items?: PropsOf<'li', ListItemProps>[] | JSX.Element
+  }
 
 export type ListItemLinkProps = PropsOf<'a', LinkProps> | object
 
 export type ListItemProps = SystemProps &
-	ThemingProps<'List'> & {
-		/** Centers the content vertically and horizontally. @deprecated */
-		center?: boolean
-		/** Centers the content horizontally. @deprecated */
-		centerH?: boolean
-		/** Centers the content vertically. @deprecated */
-		centerV?: boolean
-		/** Available theme colors for this component. */
-		colorScheme?: 'blue' | 'grey'
-		/** Displays content in a column. @deprecated */
-		column?: boolean
-		/** Displays item and its content in disabled state with appropriate styling. */
-		disabled?: boolean
-		/** Socket displaying an icon on the left. */
-		iconLeft?: IconProp | JSX.Element
-		/** Socket displaying an icon on the right. */
-		iconRight?: IconProp | JSX.Element
-		/** Makes item clickable and focusable with appropriate styling. */
-		isInteractive?: boolean
-		/** Displays item in selected state with appropriate styling. */
-		isSelected?: boolean
-		/** Socket displaying a custom item on the left. */
-		itemLeft?: React.ReactNode
-		/** Socket displaying a custom item on the right. */
-		itemRight?: React.ReactNode
-		/** If provided, content is wrapper with a link and the props are provided to the element. */
-		linkProps?: ListItemLinkProps
-		/** Socket displaying text within the item. */
-		text?: ReactText | JSX.Element
-	}
+  ThemingProps<'List'> & {
+    /** Centers the content vertically and horizontally. @deprecated */
+    center?: boolean
+    /** Centers the content horizontally. @deprecated */
+    centerH?: boolean
+    /** Centers the content vertically. @deprecated */
+    centerV?: boolean
+    /** Available theme colors for this component. */
+    colorScheme?: 'blue' | 'grey'
+    /** Displays content in a column. @deprecated */
+    column?: boolean
+    /** Displays item and its content in disabled state with appropriate styling. */
+    disabled?: boolean
+    /** Socket displaying an icon on the left. */
+    iconLeft?: IconProp | JSX.Element
+    /** Socket displaying an icon on the right. */
+    iconRight?: IconProp | JSX.Element
+    /** Makes item clickable and focusable with appropriate styling. */
+    isInteractive?: boolean
+    /** Displays item in selected state with appropriate styling. */
+    isSelected?: boolean
+    /** Socket displaying a custom item on the left. */
+    itemLeft?: React.ReactNode
+    /** Socket displaying a custom item on the right. */
+    itemRight?: React.ReactNode
+    /** If provided, content is wrapper with a link and the props are provided to the element. */
+    linkProps?: ListItemLinkProps
+    /** Socket displaying text within the item. */
+    text?: ReactText | JSX.Element
+  }

package/src/list/listDivider.tsx

@@ -7,12 +7,10 @@ import { useListContext } from './context'
 
 /** Displays a divider line within the List. */
 export const ListDivider = vui<'hr', DividerProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('List', useListContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('List', useListContext())
 
-	return <Divider className={cs('vui-listDivider', className)} my={1} ref={ref} {...styles.divider} {...rest} />
+  return <Divider className={cs('vui-listDivider', className)} my={1} ref={ref} {...styles.divider} {...rest} />
 })
 
-ListDivider.displayName = 'ListDivider'
-
 export default ListDivider

package/src/list/listHeading.tsx

@@ -7,26 +7,24 @@ import { useListContext } from './context'
 
 /** Displays a heading within the List. */
 export const ListHeading = vui<'span', TProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('List', useListContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('List', useListContext())
 
-	return (
-		<T
-			className={cs('vui-listHeading', className)}
-			color="grey.60"
-			display="inline-block"
-			px={2}
-			py={1}
-			ref={ref}
-			size="sm"
-			textTransform="uppercase"
-			weight="medium"
-			{...styles.heading}
-			{...rest}
-		/>
-	)
+  return (
+    <T
+      className={cs('vui-listHeading', className)}
+      color="grey.60"
+      display="inline-block"
+      px={2}
+      py={1}
+      ref={ref}
+      size="sm"
+      textTransform="uppercase"
+      weight="medium"
+      {...styles.heading}
+      {...rest}
+    />
+  )
 })
 
-ListHeading.displayName = 'ListHeading'
-
 export default ListHeading

package/src/list/listIcon.tsx

@@ -7,12 +7,10 @@ import { useListContext } from './context'
 
 /** Displays an icon on the side of the ListItem. */
 export const ListIcon = vui<'svg', IconProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('List', useListContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('List', useListContext())
 
-	return <Icon className={cs('vui-listIcon', className)} ref={ref} {...styles.icon} {...rest} />
+  return <Icon className={cs('vui-listIcon', className)} ref={ref} {...styles.icon} {...rest} />
 })
 
-ListIcon.displayName = 'ListIcon'
-
 export default ListIcon

package/src/list/listItem.tsx

@@ -10,30 +10,30 @@ import ListText from './listText'
 
 /** Used as optional content wrapper when list item should be a link. */
 const ListItemLink = vui<'a', LinkProps>((props, ref) => (
-	<Link
-		borderRadius="none"
-		className="vui-listItemLink"
-		h="100%"
-		px={2}
-		ref={ref}
-		variant="plain"
-		w="100%"
-		{...props}
-	/>
+  <Link
+    borderRadius="none"
+    className="vui-listItemLink"
+    h="100%"
+    px={2}
+    ref={ref}
+    variant="plain"
+    w="100%"
+    {...props}
+  />
 ))
 
 export const ListItemBase = styled.liBox`
-	display: flex;
-	line-height: normal;
-	outline: none;
-	transition-duration: fast;
-
-	&[aria-disabled='true'] {
-		background-color: disabled.bg;
-		color: disabled.color;
-		cursor: not-allowed;
-		user-select: none;
-	}
+  display: flex;
+  line-height: normal;
+  outline: none;
+  transition-duration: fast;
+
+  &[aria-disabled='true'] {
+    background-color: disabled.bg;
+    color: disabled.color;
+    cursor: not-allowed;
+    user-select: none;
+  }
 `
 
 /**
@@ -41,84 +41,82 @@ export const ListItemBase = styled.liBox`
  * Optionally wraps the content with an <a> element when rendering a link.
  */
 export const ListItem = vui<'li', ListItemProps>((props, ref) => {
-	const mergedProps = { ...useListContext(), ...props }
-	const {
-		children,
-		center,
-		centerH,
-		centerV = true,
-		className,
-		column,
-		disabled,
-		iconLeft,
-		iconRight,
-		isInteractive: isInteractiveProp,
-		isSelected,
-		isTruncated,
-		itemLeft,
-		itemRight,
-		linkProps,
-		onClick,
-		text,
-		...rest
-	} = mergedProps
-	const styles = useStyleConfig('List', useListContext())
-	const { activeBg, hoverBg, selectedBg, ...itemStyles } = styles.item
-
-	const isLinkItem = linkProps !== undefined
-	const isInteractive = isInteractiveProp || isLinkItem || onClick !== undefined
-	const alignItems = (center || (column ? centerH : centerV)) && 'center'
-	const flexDirection = column && 'column'
-	const justifyContent = (center || (column ? centerV : centerH)) && 'center'
-
-	const ContentWrapper = isLinkItem ? ListItemLink : Fragment
-
-	const interactiveProps =
-		!disabled && isInteractive
-			? {
-					cursor: 'pointer',
-					focusVisibleRing: 2,
-					hoverBg,
-					activeBg,
-					tabIndex: !isLinkItem ? 0 : undefined,
-					userSelect: 'none'
-			  }
-			: {}
-
-	const aliasedProps = filterUndefined({
-		alignItems,
-		bg: isSelected ? selectedBg : undefined,
-		'aria-disabled': disabled,
-		flexDirection,
-		justifyContent,
-		px: isLinkItem ? 0 : undefined
-	})
-
-	return (
-		<ListItemBase
-			className={cs('vui-listItem', className)}
-			onClick={!disabled ? onClick : undefined}
-			ref={ref}
-			{...itemStyles}
-			{...interactiveProps}
-			{...aliasedProps}
-			{...rest}
-		>
-			<ContentWrapper {...linkProps}>
-				{itemLeft}
-
-				{isString(iconLeft) ? <ListIcon mr={1} name={iconLeft} /> : iconLeft}
-
-				{children ?? (isReactText(text) ? <ListText {...{ isTruncated, text }} /> : text)}
-
-				{isString(iconRight) ? <ListIcon ml="auto" name={iconRight} /> : iconRight}
-
-				{itemRight}
-			</ContentWrapper>
-		</ListItemBase>
-	)
+  const mergedProps = { ...useListContext(), ...props }
+  const {
+    children,
+    center,
+    centerH,
+    centerV = true,
+    className,
+    column,
+    disabled,
+    iconLeft,
+    iconRight,
+    isInteractive: isInteractiveProp,
+    isSelected,
+    isTruncated,
+    itemLeft,
+    itemRight,
+    linkProps,
+    onClick,
+    text,
+    ...rest
+  } = mergedProps
+  const styles = useStyleConfig('List', useListContext())
+  const { activeBg, hoverBg, selectedBg, ...itemStyles } = styles.item
+
+  const isLinkItem = linkProps !== undefined
+  const isInteractive = isInteractiveProp || isLinkItem || onClick !== undefined
+  const alignItems = (center || (column ? centerH : centerV)) && 'center'
+  const flexDirection = column && 'column'
+  const justifyContent = (center || (column ? centerV : centerH)) && 'center'
+
+  const ContentWrapper = isLinkItem ? ListItemLink : Fragment
+
+  const interactiveProps =
+    !disabled && isInteractive
+      ? {
+          cursor: 'pointer',
+          focusVisibleRing: 2,
+          hoverBg,
+          activeBg,
+          tabIndex: !isLinkItem ? 0 : undefined,
+          userSelect: 'none'
+        }
+      : {}
+
+  const aliasedProps = filterUndefined({
+    alignItems,
+    bg: isSelected ? selectedBg : undefined,
+    'aria-disabled': disabled,
+    flexDirection,
+    justifyContent,
+    px: isLinkItem ? 0 : undefined
+  })
+
+  return (
+    <ListItemBase
+      className={cs('vui-listItem', className)}
+      onClick={!disabled ? onClick : undefined}
+      ref={ref}
+      {...itemStyles}
+      {...interactiveProps}
+      {...aliasedProps}
+      {...rest}
+    >
+      <ContentWrapper {...linkProps}>
+        {itemLeft}
+
+        {isString(iconLeft) ? <ListIcon mr={1} name={iconLeft} /> : iconLeft}
+
+        {children ?? (isReactText(text) ? <ListText {...{ isTruncated, text }} /> : text)}
+
+        {isString(iconRight) ? <ListIcon ml="auto" name={iconRight} /> : iconRight}
+
+        {itemRight}
+      </ContentWrapper>
+    </ListItemBase>
+  )
 })
 
-ListItem.displayName = 'ListItem'
-
 export default ListItem

package/src/list/listText.tsx

@@ -7,12 +7,10 @@ import { useListContext } from './context'
 
 /** Displays text within the ListItem. */
 export const ListText = vui<'span', TProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('List', useListContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('List', useListContext())
 
-	return <T className={cs('vui-listText', className)} fontSize="inherit" ref={ref} {...styles.text} {...rest} />
+  return <T className={cs('vui-listText', className)} fontSize="inherit" ref={ref} {...styles.text} {...rest} />
 })
 
-ListText.displayName = 'ListText'
-
 export default ListText

package/src/list/theme.ts

@@ -1,97 +1,97 @@
 import { Dict } from '../utils'
 
 function variantDefault(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const item: Dict = {
-		activeBg: `${c}.30`,
-		hoverBg: `${c}.20`,
-		selectedBg: `${c}.10`,
-		px: 2
-	}
+  const item: Dict = {
+    activeBg: `${c}.30`,
+    hoverBg: `${c}.20`,
+    selectedBg: `${c}.10`,
+    px: 2
+  }
 
-	return { item }
+  return { item }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'blue',
-	size: 'md',
-	variant: 'default'
+  colorScheme: 'blue',
+  size: 'md',
+  variant: 'default'
 }
 
 const parts = ['container', 'divider', 'heading', 'icon', 'item', 'text']
 
 const sizes = {
-	sm: {
-		icon: {
-			size: 'sm'
-		},
-		item: {
-			fontSize: 'md',
-			h: 32
-		}
-	},
-	md: {
-		icon: {
-			size: 'md'
-		},
-		item: {
-			fontSize: 'md',
-			h: 40
-		}
-	},
-	lg: {
-		item: {
-			fontSize: 'md',
-			h: 48
-		},
-		icon: {
-			size: 'lg'
-		}
-	},
-	xl: {
-		item: {
-			fontSize: 'lg',
-			h: 56
-		},
-		icon: {
-			scale: 2
-		}
-	}
+  sm: {
+    icon: {
+      size: 'sm'
+    },
+    item: {
+      fontSize: 'md',
+      h: 32
+    }
+  },
+  md: {
+    icon: {
+      size: 'md'
+    },
+    item: {
+      fontSize: 'md',
+      h: 40
+    }
+  },
+  lg: {
+    item: {
+      fontSize: 'md',
+      h: 48
+    },
+    icon: {
+      size: 'lg'
+    }
+  },
+  xl: {
+    item: {
+      fontSize: 'lg',
+      h: 56
+    },
+    icon: {
+      scale: 2
+    }
+  }
 }
 
 const variants = {
-	default: variantDefault,
-	ordered: {
-		container: {
-			as: 'ol',
-			listStyleType: 'decimal',
-			pl: 3
-		},
-		item: {
-			display: 'list-item',
-			h: ''
-		}
-	},
-	unordered: {
-		container: {
-			as: 'ul',
-			listStyleType: 'disc',
-			pl: 3
-		},
-		item: {
-			display: 'list-item',
-			h: ''
-		}
-	}
+  default: variantDefault,
+  ordered: {
+    container: {
+      as: 'ol',
+      listStyleType: 'decimal',
+      pl: 3
+    },
+    item: {
+      display: 'list-item',
+      h: ''
+    }
+  },
+  unordered: {
+    container: {
+      as: 'ul',
+      listStyleType: 'disc',
+      pl: 3
+    },
+    item: {
+      display: 'list-item',
+      h: ''
+    }
+  }
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/menu/menu.tsx

@@ -9,18 +9,20 @@ import MenuItem from './menuItem'
 import MenuList from './menuList'
 
 /** Wraps Popover component and exposes some props to the children via context. */
-export default function Menu(props: MenuProps) {
-	const { closeOnSelect = true, size, variant, ...rest } = props
+export function Menu(props: MenuProps) {
+  const { closeOnSelect = true, size, variant, ...rest } = props
 
-	const context = useMemo(() => filterUndefined({ closeOnSelect, size, variant }), [closeOnSelect, size, variant])
+  const context = useMemo(() => filterUndefined({ closeOnSelect, size, variant }), [closeOnSelect, size, variant])
 
-	return (
-		<MenuProvider value={context}>
-			<Popover {...rest} />
-		</MenuProvider>
-	)
+  return (
+    <MenuProvider value={context}>
+      <Popover {...rest} />
+    </MenuProvider>
+  )
 }
 
 Menu.Button = MenuButton
 Menu.Item = MenuItem
 Menu.List = MenuList
+
+export default Menu