@veracity/vui 1.0.0 → 1.1.0

package/src/menu/menu.types.ts

@@ -5,14 +5,14 @@ import { PopoverContentProps, PopoverProps } from '../popover'
 import { ThemingProps } from '../theme'
 
 export type MenuListProps = ListProps & {
-	/** Props object passed to the inner PopoverContent. */
-	contentProps?: PopoverContentProps
-	/** Ref passed to the inner PopoverContent. */
-	contentRef?: RefObject<HTMLDivElement>
+  /** Props object passed to the inner PopoverContent. */
+  contentProps?: PopoverContentProps
+  /** Ref passed to the inner PopoverContent. */
+  contentRef?: RefObject<HTMLDivElement>
 }
 
 export type MenuProps = ThemingProps<'Menu'> &
-	PopoverProps & {
-		/** Content closes when clicking on a list item. */
-		closeOnSelect?: boolean
-	}
+  PopoverProps & {
+    /** Content closes when clicking on a list item. */
+    closeOnSelect?: boolean
+  }

package/src/menu/menuButton.tsx

@@ -8,20 +8,18 @@ import { useMenuContext } from './context'
 
 /** Displays PopoverTrigger as a button. */
 export const MenuButton = vui<'button', ButtonProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Menu', useMenuContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Menu', useMenuContext())
 
-	return (
-		<PopoverTrigger
-			as={TextButton}
-			className={cs('vui-menuButton', className)}
-			ref={ref}
-			{...styles.button}
-			{...rest}
-		/>
-	)
+  return (
+    <PopoverTrigger
+      as={TextButton}
+      className={cs('vui-menuButton', className)}
+      ref={ref}
+      {...styles.button}
+      {...rest}
+    />
+  )
 })
 
-MenuButton.displayName = 'MenuButton'
-
 export default MenuButton

package/src/menu/menuItem.tsx

@@ -8,28 +8,26 @@ import { useMenuContext } from './context'
 
 /** Displays a list item and by default closes the menu on click. */
 export const MenuItem = vui<'li', ListItemProps>((props, ref) => {
-	const { className, onClick: onClickProp, ...rest } = props
-	const { instance } = usePopoverContext() ?? {}
-	const { closeOnSelect, ...menuProps } = useMenuContext() ?? {}
-	const styles = useStyleConfig('Menu', { ...menuProps, ...props })
+  const { className, onClick: onClickProp, ...rest } = props
+  const { instance } = usePopoverContext() ?? {}
+  const { closeOnSelect, ...menuProps } = useMenuContext() ?? {}
+  const styles = useStyleConfig('Menu', { ...menuProps, ...props })
 
-	const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement>) => {
-		onClickProp?.(e)
-		closeOnSelect && instance?.hide()
-	})
+  const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement>) => {
+    onClickProp?.(e)
+    closeOnSelect && instance?.hide()
+  })
 
-	return (
-		<ListItem
-			className={cs('vui-menuItem', className)}
-			isInteractive
-			onClick={onClick}
-			ref={ref}
-			{...styles.item}
-			{...rest}
-		/>
-	)
+  return (
+    <ListItem
+      className={cs('vui-menuItem', className)}
+      isInteractive
+      onClick={onClick}
+      ref={ref}
+      {...styles.item}
+      {...rest}
+    />
+  )
 })
 
-MenuItem.displayName = 'MenuItem'
-
 export default MenuItem

package/src/menu/menuList.tsx

@@ -9,24 +9,22 @@ import { MenuListProps } from './menu.types'
 
 /** Displays a list of menu items in a popover content element. */
 export const MenuList = vui<'ul', MenuListProps>((props, ref) => {
-	const { className, contentProps, contentRef, ...rest } = props
-	const styles = useStyleConfig('Menu', useMenuContext())
+  const { className, contentProps, contentRef, ...rest } = props
+  const styles = useStyleConfig('Menu', useMenuContext())
 
-	return (
-		<PopoverContent ref={contentRef} {...contentProps}>
-			<List className={cs('vui-menuList', className)} py={1} ref={ref} w="100%" {...styles.list} {...rest} />
-		</PopoverContent>
-	)
+  return (
+    <PopoverContent ref={contentRef} {...contentProps}>
+      <List className={cs('vui-menuList', className)} py={1} ref={ref} w="100%" {...styles.list} {...rest} />
+    </PopoverContent>
+  )
 }) as VuiComponent<'ul', MenuListProps> & {
-	Divider: typeof List.Divider
-	Heading: typeof List.Heading
-	Icon: typeof List.Icon
-	Item: typeof List.Item
-	Text: typeof List.Text
+  Divider: typeof List.Divider
+  Heading: typeof List.Heading
+  Icon: typeof List.Icon
+  Item: typeof List.Item
+  Text: typeof List.Text
 }
 
-MenuList.displayName = 'MenuList'
-
 MenuList.Divider = List.Divider
 MenuList.Heading = List.Heading
 MenuList.Icon = List.Icon

package/src/menu/theme.ts

@@ -1,30 +1,30 @@
 const baseStyle = {}
 
 const defaultProps = {
-	size: 'md'
+  size: 'md'
 }
 
 const parts = ['button', 'item', 'list']
 
 const sizes = {
-	md: {
-		list: {
-			size: 'sm'
-		}
-	},
-	lg: {
-		list: {
-			size: 'md'
-		}
-	}
+  md: {
+    list: {
+      size: 'sm'
+    }
+  },
+  lg: {
+    list: {
+      size: 'md'
+    }
+  }
 }
 
 const variants = {}
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/modal/focusLock.tsx

@@ -9,40 +9,40 @@ import { FocusLockProps } from './focusLock.types'
  * This behavior enhances accessibility of the Modal component.
  */
 export const FocusLock: FC<FocusLockProps> = props => {
-	const {
-		autoFocus,
-		children,
-		crossFrame,
-		finalFocusRef,
-		initialFocusRef,
-		isDisabled,
-		persistentFocus,
-		returnFocus: returnFocusProp
-	} = props
+  const {
+    autoFocus,
+    children,
+    crossFrame,
+    finalFocusRef,
+    initialFocusRef,
+    isDisabled,
+    persistentFocus,
+    returnFocus: returnFocusProp
+  } = props
 
-	const onActivation = React.useCallback(() => {
-		initialFocusRef?.current?.focus()
-	}, [initialFocusRef])
+  const onActivation = React.useCallback(() => {
+    initialFocusRef?.current?.focus()
+  }, [initialFocusRef])
 
-	const onDeactivation = useCallback(() => {
-		finalFocusRef?.current?.focus()
-	}, [finalFocusRef])
+  const onDeactivation = useCallback(() => {
+    finalFocusRef?.current?.focus()
+  }, [finalFocusRef])
 
-	const returnFocus = returnFocusProp && !finalFocusRef
+  const returnFocus = returnFocusProp && !finalFocusRef
 
-	return (
-		<ReactFocusLock
-			autoFocus={autoFocus}
-			crossFrame={crossFrame}
-			disabled={isDisabled}
-			onActivation={onActivation}
-			onDeactivation={onDeactivation}
-			persistentFocus={persistentFocus}
-			returnFocus={returnFocus}
-		>
-			{children}
-		</ReactFocusLock>
-	)
+  return (
+    <ReactFocusLock
+      autoFocus={autoFocus}
+      crossFrame={crossFrame}
+      disabled={isDisabled}
+      onActivation={onActivation}
+      onDeactivation={onDeactivation}
+      persistentFocus={persistentFocus}
+      returnFocus={returnFocus}
+    >
+      {children}
+    </ReactFocusLock>
+  )
 }
 
 export default FocusLock

package/src/modal/focusLock.types.ts

@@ -1,28 +1,28 @@
 export type FocusableElement = {
-	focus(options?: FocusOptions): void
+  focus(options?: FocusOptions): void
 }
 
 export type FocusLockProps = {
-	/**
-	 * The first focuable element within the 'children' will be auto-focused once 'FocusLock' mounts.
-	 * @default true
-	 */
-	autoFocus?: boolean
-	/**
-	 * Enables aggressive focus capturing within iframes.
-	 * - 'true' keeps focus in the lock, no matter where the lock is active.
-	 * - 'false' allows focus to move outside of iframe, if enabled inside iframe.
-	 * @default true
-	 */
-	crossFrame?: boolean
-	/** 'ref' of the element to return focus to when FocusLock unmounts. */
-	finalFocusRef?: React.RefObject<FocusableElement>
-	/** 'ref' of the element to receive focus initially when FocusLock mounts. */
-	initialFocusRef?: React.RefObject<FocusableElement>
-	/** Disables focus trapping. */
-	isDisabled?: boolean
-	/** Disables text selections inside, and outside focus lock. */
-	persistentFocus?: boolean
-	/** Focus will be returned to the element that triggered the FocusLock once it unmounts. */
-	returnFocus?: boolean
+  /**
+   * The first focuable element within the 'children' will be auto-focused once 'FocusLock' mounts.
+   * @default true
+   */
+  autoFocus?: boolean
+  /**
+   * Enables aggressive focus capturing within iframes.
+   * - 'true' keeps focus in the lock, no matter where the lock is active.
+   * - 'false' allows focus to move outside of iframe, if enabled inside iframe.
+   * @default true
+   */
+  crossFrame?: boolean
+  /** 'ref' of the element to return focus to when FocusLock unmounts. */
+  finalFocusRef?: React.RefObject<FocusableElement>
+  /** 'ref' of the element to receive focus initially when FocusLock mounts. */
+  initialFocusRef?: React.RefObject<FocusableElement>
+  /** Disables focus trapping. */
+  isDisabled?: boolean
+  /** Disables text selections inside, and outside focus lock. */
+  persistentFocus?: boolean
+  /** Focus will be returned to the element that triggered the FocusLock once it unmounts. */
+  returnFocus?: boolean
 }

package/src/modal/modal.tsx

@@ -19,113 +19,111 @@ import { manager, useModalManager } from './modalManager'
  * More about accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
  */
 export const Modal = vui<'div', ModalProps>((props, ref) => {
-	const {
-		allowPinchZoom,
-		children,
-		className,
-		contentProps,
-		disableAutoFocus,
-		disableBackdropClose,
-		disableEscClose,
-		disablePortal,
-		disableReturnFocus,
-		disableScrollLock,
-		disableTrapFocus,
-		finalFocusRef,
-		hideBackdrop,
-		initialFocusRef,
-		isOpen,
-		onBackdropClick: onBackdropClickProp,
-		onClose,
-		onEsc,
-		preserveScrollBar,
-		size,
-		variant,
-		...rest
-	} = props
-	const modalRef = useRef<HTMLElement>(null)
-	const mouseDownTarget = useRef<EventTarget | null>(null)
-
-	useModalManager(modalRef, isOpen)
-
-	if (!isOpen) return null
-
-	const onBackdropClick = (e: MouseEvent) => {
-		e.stopPropagation()
-
-		// Avoid closing modal when click starts inside the content and is released outside
-		if (mouseDownTarget.current !== e.target) return
-
-		if (!manager.isTopModal(modalRef)) return
-
-		!disableBackdropClose && onClose?.()
-
-		onBackdropClickProp?.(e)
-	}
-
-	const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-		if (e.key === 'Escape') {
-			e.stopPropagation()
-
-			!disableEscClose && onClose?.()
-
-			onEsc?.()
-		}
-	}
-
-	const onMouseDown = (e: MouseEvent) => {
-		mouseDownTarget.current = e.target
-	}
-
-	const childProps = {
-		onClick: (e: any) => {
-			e.stopPropagation()
-			children?.props?.onClick?.(e)
-		},
-		tabIndex: children?.props?.tabIndex ?? -1
-	}
-
-	const context = { isOpen, onBackdropClick, onClose, size, variant }
-
-	return (
-		<ModalProvider value={context}>
-			<Portal disablePortal={disablePortal}>
-				<Box
-					className={cs('vui-modal', className)}
-					ref={mergeRefs(ref, modalRef)}
-					{...rest}
-					onKeyDown={callAll(props.onKeyDown, onKeyDown)}
-					onMouseDown={callAll(props.onMouseDown, onMouseDown)}
-				>
-					{!hideBackdrop && <ModalBackdrop />}
-
-					<FocusLock
-						autoFocus={!disableAutoFocus}
-						finalFocusRef={finalFocusRef}
-						initialFocusRef={initialFocusRef}
-						isDisabled={disableTrapFocus}
-						returnFocus={!disableReturnFocus}
-					>
-						<RemoveScroll
-							allowPinchZoom={allowPinchZoom}
-							enabled={!disableScrollLock}
-							forwardProps
-							removeScrollBar={!preserveScrollBar}
-						>
-							<ModalContent {...contentProps}>{cloneElement(children, childProps)}</ModalContent>
-						</RemoveScroll>
-					</FocusLock>
-				</Box>
-			</Portal>
-		</ModalProvider>
-	)
+  const {
+    allowPinchZoom,
+    children,
+    className,
+    contentProps,
+    disableAutoFocus,
+    disableBackdropClose,
+    disableEscClose,
+    disablePortal,
+    disableReturnFocus,
+    disableScrollLock,
+    disableTrapFocus,
+    finalFocusRef,
+    hideBackdrop,
+    initialFocusRef,
+    isOpen,
+    onBackdropClick: onBackdropClickProp,
+    onClose,
+    onEsc,
+    preserveScrollBar,
+    size,
+    variant,
+    ...rest
+  } = props
+  const modalRef = useRef<HTMLElement>(null)
+  const mouseDownTarget = useRef<EventTarget | null>(null)
+
+  useModalManager(modalRef, isOpen)
+
+  if (!isOpen) return null
+
+  const onBackdropClick = (e: MouseEvent) => {
+    e.stopPropagation()
+
+    // Avoid closing modal when click starts inside the content and is released outside
+    if (mouseDownTarget.current !== e.target) return
+
+    if (!manager.isTopModal(modalRef)) return
+
+    !disableBackdropClose && onClose?.()
+
+    onBackdropClickProp?.(e)
+  }
+
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation()
+
+      !disableEscClose && onClose?.()
+
+      onEsc?.()
+    }
+  }
+
+  const onMouseDown = (e: MouseEvent) => {
+    mouseDownTarget.current = e.target
+  }
+
+  const childProps = {
+    onClick: (e: any) => {
+      e.stopPropagation()
+      children?.props?.onClick?.(e)
+    },
+    tabIndex: children?.props?.tabIndex ?? -1
+  }
+
+  const context = { isOpen, onBackdropClick, onClose, size, variant }
+
+  return (
+    <ModalProvider value={context}>
+      <Portal disablePortal={disablePortal}>
+        <Box
+          className={cs('vui-modal', className)}
+          ref={mergeRefs(ref, modalRef)}
+          {...rest}
+          onKeyDown={callAll(props.onKeyDown, onKeyDown)}
+          onMouseDown={callAll(props.onMouseDown, onMouseDown)}
+        >
+          {!hideBackdrop && <ModalBackdrop />}
+
+          <FocusLock
+            autoFocus={!disableAutoFocus}
+            finalFocusRef={finalFocusRef}
+            initialFocusRef={initialFocusRef}
+            isDisabled={disableTrapFocus}
+            returnFocus={!disableReturnFocus}
+          >
+            <RemoveScroll
+              allowPinchZoom={allowPinchZoom}
+              enabled={!disableScrollLock}
+              forwardProps
+              removeScrollBar={!preserveScrollBar}
+            >
+              <ModalContent {...contentProps}>{cloneElement(children, childProps)}</ModalContent>
+            </RemoveScroll>
+          </FocusLock>
+        </Box>
+      </Portal>
+    </ModalProvider>
+  )
 }) as VuiComponent<'div', ModalProps> & {
-	Backdrop: typeof ModalBackdrop
-	Content: typeof ModalContent
+  Backdrop: typeof ModalBackdrop
+  Content: typeof ModalContent
 }
 
-Modal.displayName = 'Modal'
-
 Modal.Backdrop = ModalBackdrop
 Modal.Content = ModalContent
 

package/src/modal/modal.types.ts

@@ -10,41 +10,41 @@ export type ModalContentProps = SystemProps
 export type ModalContext = Pick<ModalProps, 'isOpen' | 'onBackdropClick' | 'onClose' | 'size' | 'variant'>
 
 export type ModalProps = SystemProps &
-	ThemingProps<'Modal'> & {
-		/** Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. */
-		allowPinchZoom?: boolean
-		/** A single child content element. */
-		children: React.ReactElement
-		/** Props passed to internal ModalContent component. */
-		contentProps?: ModalContentProps
-		/** It won't auto-focus the first focuable element within the 'children' once FocusLock mounts. */
-		disableAutoFocus?: boolean
-		/** Clicking Backdrop element will not trigger 'onClose'. */
-		disableBackdropClose?: boolean
-		/** Pressing 'Escape' will not trigger 'onClose'. */
-		disableEscClose?: boolean
-		/** The children will be under the DOM hierarchy of the parent component. */
-		disablePortal?: boolean
-		/** Focus won't be returned to the element that triggered the FocusLock once it unmounts. */
-		disableReturnFocus?: boolean
-		/** Allows scrolling to happen on the content beneath the Modal. */
-		disableScrollLock?: boolean
-		/** Disables FocusLock mechanism and allows focusing elements outside the Modal. */
-		disableTrapFocus?: boolean
-		/** 'ref' of the element to return focus to when FocusLock unmounts. */
-		finalFocusRef?: React.RefObject<FocusableElement>
-		/** Hides the dark backdrop element that is normally displayed beneath modal content. */
-		hideBackdrop?: boolean
-		/** 'ref' of the element to receive focus initially when FocusLock mounts. */
-		initialFocusRef?: React.RefObject<FocusableElement>
-		/** Displays the modal with its content on top of a backdrop. */
-		isOpen?: boolean
-		/** Callback triggered when the backdrop element is clicked. Defaults to onClose. */
-		onBackdropClick?: (e: MouseEvent) => void
-		/** Callback triggered to close the modal. */
-		onClose?: () => void
-		/** Callback triggered when pressing 'Escape' key. Defaults to onClose. */
-		onEsc?: () => void
-		/** Test this prop on Windows scrollbars */
-		preserveScrollBar?: boolean
-	}
+  ThemingProps<'Modal'> & {
+    /** Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. */
+    allowPinchZoom?: boolean
+    /** A single child content element. */
+    children: React.ReactElement
+    /** Props passed to internal ModalContent component. */
+    contentProps?: ModalContentProps
+    /** It won't auto-focus the first focuable element within the 'children' once FocusLock mounts. */
+    disableAutoFocus?: boolean
+    /** Clicking Backdrop element will not trigger 'onClose'. */
+    disableBackdropClose?: boolean
+    /** Pressing 'Escape' will not trigger 'onClose'. */
+    disableEscClose?: boolean
+    /** The children will be under the DOM hierarchy of the parent component. */
+    disablePortal?: boolean
+    /** Focus won't be returned to the element that triggered the FocusLock once it unmounts. */
+    disableReturnFocus?: boolean
+    /** Allows scrolling to happen on the content beneath the Modal. */
+    disableScrollLock?: boolean
+    /** Disables FocusLock mechanism and allows focusing elements outside the Modal. */
+    disableTrapFocus?: boolean
+    /** 'ref' of the element to return focus to when FocusLock unmounts. */
+    finalFocusRef?: React.RefObject<FocusableElement>
+    /** Hides the dark backdrop element that is normally displayed beneath modal content. */
+    hideBackdrop?: boolean
+    /** 'ref' of the element to receive focus initially when FocusLock mounts. */
+    initialFocusRef?: React.RefObject<FocusableElement>
+    /** Displays the modal with its content on top of a backdrop. */
+    isOpen?: boolean
+    /** Callback triggered when the backdrop element is clicked. Defaults to onClose. */
+    onBackdropClick?: (e: MouseEvent) => void
+    /** Callback triggered to close the modal. */
+    onClose?: () => void
+    /** Callback triggered when pressing 'Escape' key. Defaults to onClose. */
+    onEsc?: () => void
+    /** Test this prop on Windows scrollbars */
+    preserveScrollBar?: boolean
+  }

package/src/modal/modalBackdrop.tsx

@@ -7,21 +7,19 @@ import { useModalContext } from './context'
 import { ModalBackdropProps } from './modal.types'
 
 export const ModalBackdropBase = styled.divBox`
-	animation: vui-fadeIn 0.3s ease;
-	background-color: ${hexToRGBA(colors.prussian[80], 0.6)};
-	inset: 0px;
-	position: fixed;
-	z-index: modal;
+  animation: vui-fadeIn 0.3s ease;
+  background-color: ${hexToRGBA(colors.prussian[80], 0.6)};
+  inset: 0px;
+  position: fixed;
+  z-index: modal;
 `
 
 /** Displays a dark overlay underneath modal content, but on top of page content. */
 export const ModalBackdrop = vui<'div', ModalBackdropProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Modal', useModalContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Modal', useModalContext())
 
-	return <ModalBackdropBase className={cs('vui-modalBackdrop', className)} ref={ref} {...styles.backdrop} {...rest} />
+  return <ModalBackdropBase className={cs('vui-modalBackdrop', className)} ref={ref} {...styles.backdrop} {...rest} />
 })
 
-ModalBackdrop.displayName = 'ModalBackdrop'
-
 export default ModalBackdrop