@veracity/vui 1.0.0 → 1.1.0

package/src/pagination/paginationResults.tsx

@@ -7,25 +7,23 @@ import { usePaginationContext } from './context'
 
 /** Displays an action button within the Pagination. */
 export const PaginationResults = vui<'span', TProps>((props, ref) => {
-	const { children, className, ...rest } = props
-	const { count, rangeEnd, rangeStart } = usePaginationContext()
-	const styles = useStyleConfig('Pagination', usePaginationContext())
+  const { children, className, ...rest } = props
+  const { count, rangeEnd, rangeStart } = usePaginationContext()
+  const styles = useStyleConfig('Pagination', usePaginationContext())
 
-	return (
-		<T
-			className={cs('vui-paginationResults', className)}
-			color="grey.80"
-			ref={ref}
-			size="sm"
-			weight="medium"
-			{...styles.results}
-			{...rest}
-		>
-			{children ?? `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`}
-		</T>
-	)
+  return (
+    <T
+      className={cs('vui-paginationResults', className)}
+      color="grey.80"
+      ref={ref}
+      size="sm"
+      weight="medium"
+      {...styles.results}
+      {...rest}
+    >
+      {children ?? `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`}
+    </T>
+  )
 })
 
-PaginationResults.displayName = 'PaginationResults'
-
 export default PaginationResults

package/src/pagination/theme.ts

@@ -9,9 +9,9 @@ const sizes = {}
 const variants = {}
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/pagination/usePagination.ts

@@ -6,44 +6,44 @@ import { UsePaginationProps } from './usePagination.types'
 
 /** Hook to manage pagination data and state in controlled or uncontrolled way. */
 export default function usePagination(props: UsePaginationProps) {
-	const { count, defaultPage = 1, onPageChange: onPageChangeProp, page: pageProp, pageSize } = props
-	const [page, onPageChange, { isControlled, reset }] = useControlled({
-		defaultValue: defaultPage,
-		onChange: onPageChangeProp,
-		value: pageProp
-	})
-
-	// In uncontrolled mode, trigger external callback on the first render for consumer to initialize data.
-	useEffect(() => {
-		!isControlled && onPageChangeProp?.(defaultPage)
-	}, [])
-
-	/** In uncontrolled mode, reset pagination whenever pageSize changes (apart from initialization). */
-	useEffect(() => {
-		isMounted() && reset()
-	}, [pageSize])
-
-	const isMounted = useIsMounted()
-
-	/** How many pages are there in total. */
-	const pageCount = count > 0 && pageSize > 0 ? Math.ceil(count / pageSize) : 0
-	/** Array of navigation items, like buttons or arrows. */
-	const items = getPaginationItems(page, pageCount)
-	/** First item displayed on the current page. */
-	const rangeStart = (page - 1) * pageSize + 1
-	/** Last item displayed on the current page. */
-	const rangeEnd = page === pageCount ? count : page * pageSize
-
-	return {
-		count,
-		items,
-		onPageChange,
-		page,
-		pageCount,
-		pageSize,
-		rangeEnd,
-		rangeStart
-	}
+  const { count, defaultPage = 1, onPageChange: onPageChangeProp, page: pageProp, pageSize } = props
+  const [page, onPageChange, { isControlled, reset }] = useControlled({
+    defaultValue: defaultPage,
+    onChange: onPageChangeProp,
+    value: pageProp
+  })
+
+  // In uncontrolled mode, trigger external callback on the first render for consumer to initialize data.
+  useEffect(() => {
+    !isControlled && onPageChangeProp?.(defaultPage)
+  }, [])
+
+  /** In uncontrolled mode, reset pagination whenever pageSize changes (apart from initialization). */
+  useEffect(() => {
+    isMounted() && reset()
+  }, [pageSize])
+
+  const isMounted = useIsMounted()
+
+  /** How many pages are there in total. */
+  const pageCount = count > 0 && pageSize > 0 ? Math.ceil(count / pageSize) : 0
+  /** Array of navigation items, like buttons or arrows. */
+  const items = getPaginationItems(page, pageCount)
+  /** First item displayed on the current page. */
+  const rangeStart = (page - 1) * pageSize + 1
+  /** Last item displayed on the current page. */
+  const rangeEnd = page === pageCount ? count : page * pageSize
+
+  return {
+    count,
+    items,
+    onPageChange,
+    page,
+    pageCount,
+    pageSize,
+    rangeEnd,
+    rangeStart
+  }
 }
 
 export type UsePaginationReturnType = ReturnType<typeof usePagination>

package/src/pagination/usePagination.types.ts

@@ -1,12 +1,12 @@
 export type UsePaginationProps = {
-	/** Total amount of items being paginated. */
-	count: number
-	/** Starting page in uncontrolled mode. */
-	defaultPage?: number
-	/** Callback triggered by Pagination elements. */
-	onPageChange?: (page: number) => void
-	/** Currently displayed page. */
-	page?: number
-	/** Amount of items per page. */
-	pageSize: number
+  /** Total amount of items being paginated. */
+  count: number
+  /** Starting page in uncontrolled mode. */
+  defaultPage?: number
+  /** Callback triggered by Pagination elements. */
+  onPageChange?: (page: number) => void
+  /** Currently displayed page. */
+  page?: number
+  /** Amount of items per page. */
+  pageSize: number
 }

package/src/panel/panel.tsx

@@ -10,14 +10,12 @@ import { PanelProps } from './panel.types'
  * Supports use cases of showing multiple segments of a page, each focusing on different data type or context.
  */
 export const Panel = vui<'div', PanelProps>((props, ref) => {
-	const { className, ...rest } = omitThemingProps(props)
-	const styles = useStyleConfig('Panel', props)
+  const { className, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Panel', props)
 
-	return (
-		<Box bg="white" borderRadius="md" className={cs('vui-panel', className)} p={2} ref={ref} {...styles} {...rest} />
-	)
+  return (
+    <Box bg="white" borderRadius="md" className={cs('vui-panel', className)} p={2} ref={ref} {...styles} {...rest} />
+  )
 })
 
-Panel.displayName = 'Panel'
-
 export default Panel

package/src/panel/theme.ts

@@ -1,24 +1,24 @@
 const baseStyle = {}
 
 const defaultProps = {
-	variant: 'elevated'
+  variant: 'elevated'
 }
 
 const sizes = {}
 
 const variants = {
-	elevated: {
-		shadow: '1'
-	},
-	outlined: {
-		border: 1,
-		borderColor: 'grey.40'
-	}
+  elevated: {
+    shadow: '1'
+  },
+  outlined: {
+    border: 1,
+    borderColor: 'grey.40'
+  }
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
 }

package/src/popover/consts.ts

@@ -3,39 +3,39 @@ import { Plugin } from 'tippy.js'
 
 /** Closes the popper if 'Escape' is pressed. Tippy plugin. */
 export const closeOnEscPlugin: Plugin = {
-	name: 'closeOnEsc',
-	defaultValue: true,
-	fn({ hide }) {
-		function onKeyDown(e: KeyboardEvent) {
-			if (e.key === 'Escape') {
-				hide()
-			}
-		}
+  name: 'closeOnEsc',
+  defaultValue: true,
+  fn({ hide }) {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        hide()
+      }
+    }
 
-		return {
-			onHide() {
-				document.removeEventListener('keydown', onKeyDown)
-			},
-			onShow() {
-				document.addEventListener('keydown', onKeyDown)
-			}
-		}
-	}
+    return {
+      onHide() {
+        document.removeEventListener('keydown', onKeyDown)
+      },
+      onShow() {
+        document.addEventListener('keydown', onKeyDown)
+      }
+    }
+  }
 }
 
 /** Sets popper width to be the same as reference. Updates on resize, etc. Popper modifier. */
 export const matchWidthModifier: Modifier<'matchWidth', any> = {
-	name: 'matchWidth',
-	enabled: true,
-	phase: 'beforeWrite',
-	requires: ['computeStyles'],
-	fn: ({ state }) => {
-		state.styles.popper.width = `${state.rects.reference.width}px`
-	},
-	effect:
-		({ state }) =>
-		() => {
-			const reference = state.elements.reference as HTMLElement
-			state.elements.popper.style.width = `${reference.offsetWidth}px`
-		}
+  name: 'matchWidth',
+  enabled: true,
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
+  fn: ({ state }) => {
+    state.styles.popper.width = `${state.rects.reference.width}px`
+  },
+  effect:
+    ({ state }) =>
+    () => {
+      const reference = state.elements.reference as HTMLElement
+      state.elements.popper.style.width = `${reference.offsetWidth}px`
+    }
 }

package/src/popover/popover.tsx

@@ -12,13 +12,13 @@ import usePopover from './usePopover'
  * By default, renders provided content only when popover is opened (lazy).
  */
 export default function Popover(props: PopoverProps) {
-	const { children, isLazy = true, ...rest } = props
-	const popoverProps = usePopover(rest)
-	const { close, isOpen, open } = popoverProps
+  const { children, isLazy = true, ...rest } = props
+  const popoverProps = usePopover(rest)
+  const { close, isOpen, open } = popoverProps
 
-	const context = filterUndefined({ isLazy, ...popoverProps })
+  const context = filterUndefined({ isLazy, ...popoverProps })
 
-	return <PopoverProvider value={context}>{runIfFn(children, { close, isOpen, open })}</PopoverProvider>
+  return <PopoverProvider value={context}>{runIfFn(children, { close, isOpen, open })}</PopoverProvider>
 }
 
 Popover.Content = PopoverContent

package/src/popover/popover.types.ts

@@ -7,16 +7,16 @@ import { UsePopoverProps } from './usePopover.types'
 export type PopoverContentProps = BoxProps
 
 export type PopoverProps = UsePopoverProps & {
-	/** Exposes render props to the children. */
-	children?: PopoverRenderProps
-	/** Mounts provided content only when popover is opened for performance. @default true */
-	isLazy?: boolean
+  /** Exposes render props to the children. */
+  children?: PopoverRenderProps
+  /** Mounts provided content only when popover is opened for performance. @default true */
+  isLazy?: boolean
 }
 
 export type PopoverRenderProps = RenderProps<{
-	close: UsePopoverType['close']
-	isOpen: UsePopoverType['isOpen']
-	open: UsePopoverType['open']
+  close: UsePopoverType['close']
+  isOpen: UsePopoverType['isOpen']
+  open: UsePopoverType['open']
 }>
 
 export type PopoverTriggerProps = SystemProps

package/src/popover/popoverContent.tsx

@@ -8,32 +8,30 @@ import { PopoverContentProps } from './popover.types'
 
 /** Displays provided content in an overlaying wrapper. */
 export const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {
-	const { children, className, ...rest } = props
-	const popoverProps = usePopoverContext() ?? {}
-	const { isLazy, isOpen, setPopper } = popoverProps
-	const styles = useStyleConfig('Popover', { ...popoverProps, ...props })
+  const { children, className, ...rest } = props
+  const popoverProps = usePopoverContext() ?? {}
+  const { isLazy, isOpen, setPopper } = popoverProps
+  const styles = useStyleConfig('Popover', { ...popoverProps, ...props })
 
-	const shouldRenderChildren = isLazy ? isOpen : true
+  const shouldRenderChildren = isLazy ? isOpen : true
 
-	return (
-		// Wrapping div prevents an error thrown when conditionally unmounting this component
-		<div data-popover-workaround>
-			<Box
-				bg="white"
-				borderRadius="md"
-				boxShadow="2"
-				className={cs('vui-popoverContent', className)}
-				overflowY="auto"
-				ref={mergeRefs(setPopper, ref)}
-				{...styles.content}
-				{...rest}
-			>
-				{shouldRenderChildren ? children : null}
-			</Box>
-		</div>
-	)
+  return (
+    // Wrapping div prevents an error thrown when conditionally unmounting this component
+    <div data-popover-workaround>
+      <Box
+        bg="white"
+        borderRadius="md"
+        boxShadow="2"
+        className={cs('vui-popoverContent', className)}
+        overflowY="auto"
+        ref={mergeRefs(setPopper, ref)}
+        {...styles.content}
+        {...rest}
+      >
+        {shouldRenderChildren ? children : null}
+      </Box>
+    </div>
+  )
 })
 
-PopoverContent.displayName = 'PopoverContent'
-
 export default PopoverContent

package/src/popover/popoverTrigger.tsx

@@ -12,30 +12,28 @@ import { PopoverTriggerProps } from './popover.types'
  * Can be rendered as any component using the 'as' prop. By default renders as a plain button.
  */
 export const PopoverTrigger = vui<'button', PopoverTriggerProps>((props, ref) => {
-	// @ts-ignore - TS incorrectly doesn't recognize 'as' prop
-	const { as, className, onClick: onClickProp, ...rest } = props
-	const { setReference, ...popoverProps } = usePopoverContext() ?? {}
-	const styles = useStyleConfig('Popover', { ...popoverProps, ...props })
-
-	const Element = as || v.button
-
-	const onClick = (e: MouseEvent<HTMLButtonElement>) => {
-		// Avoids triggering parent's onClick, like when inside a ListItem
-		e.stopPropagation()
-		onClickProp?.(e)
-	}
-
-	return (
-		<Element
-			className={cs('vui-popoverTrigger', className)}
-			onClick={onClick}
-			ref={mergeRefs(setReference, ref)}
-			{...styles.trigger}
-			{...rest}
-		/>
-	)
+  // @ts-ignore - TS incorrectly doesn't recognize 'as' prop
+  const { as, className, onClick: onClickProp, ...rest } = props
+  const { setReference, ...popoverProps } = usePopoverContext() ?? {}
+  const styles = useStyleConfig('Popover', { ...popoverProps, ...props })
+
+  const Element = as || v.button
+
+  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
+    // Avoids triggering parent's onClick, like when inside a ListItem
+    e.stopPropagation()
+    onClickProp?.(e)
+  }
+
+  return (
+    <Element
+      className={cs('vui-popoverTrigger', className)}
+      onClick={onClick}
+      ref={mergeRefs(setReference, ref)}
+      {...styles.trigger}
+      {...rest}
+    />
+  )
 })
 
-PopoverTrigger.displayName = 'PopoverTrigger'
-
 export default PopoverTrigger

package/src/popover/theme.ts

@@ -9,9 +9,9 @@ const sizes = {}
 const variants = {}
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }