@veracity/vui 2.11.0 → 2.12.0-beta.0

package/dist/esm/modal/modalManager.js

@@ -1,15 +1,11 @@
 import { useEffect } from 'react';
-import { addBodyClass, removeBodyClass } from '../utils/dom';
+import { useBodyScrollLock } from '../core';
 /** State management for nested modals. */
 class ModalManager {
     constructor() {
         this.modals = [];
-        this.add = (modal) => {
-            this.modals.push(modal);
-        };
-        this.remove = (modal) => {
-            this.modals = this.modals.filter(m => m !== modal);
-        };
+        this.add = (modal) => this.modals.push(modal);
+        this.remove = (modal) => (this.modals = this.modals.filter(m => m !== modal));
         this.isTopModal = (modal) => {
             const topmostModal = this.modals[this.modals.length - 1];
             return topmostModal === modal;
@@ -19,16 +15,17 @@ class ModalManager {
 export const manager = new ModalManager();
 /** Refs of new modals will be automatically added/removed from the state when rendering. */
 export function useModalManager(ref, isOpen, disableScrollLock) {
+    const { setIsScrollLocked } = useBodyScrollLock();
     useEffect(() => {
         if (isOpen) {
             manager.add(ref);
             if (!disableScrollLock)
-                addBodyClass('vui-no-scroll');
+                setIsScrollLocked(true);
         }
         return () => {
             manager.remove(ref);
             if (!disableScrollLock)
-                removeBodyClass('vui-no-scroll');
+                setIsScrollLocked(false);
         };
     }, [isOpen, ref]);
 }

package/dist/esm/sidemenu/sidemenu.d.ts

@@ -2,7 +2,6 @@ import { VuiComponent } from '../core';
 import { SidemenuProps } from './sidemenu.types';
 import SidemenuItem from './sidemenuItem';
 import SidemenuTop from './sidemenuTop';
-export declare const SidemenuBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
 /** A collapsible side menu for navigation. */
 export declare const Sidemenu: VuiComponent<"div", SidemenuProps> & {
     Top: typeof SidemenuTop;

package/dist/esm/sidemenu/sidemenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAKnE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SA+Cd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3D,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SAiEd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}

package/dist/esm/sidemenu/sidemenu.js

@@ -1,23 +1,16 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import Box from '../box';
 import Button from '../button';
-import { styled, useStyleConfig, vui } from '../core';
+import { useStyleConfig, vui } from '../core';
 import Icon from '../icon';
 import { cs, filterUndefined } from '../utils';
 import { expandedWidth } from './consts';
 import { SidemenuProvider } from './context';
 import SidemenuItem from './sidemenuItem';
 import SidemenuTop from './sidemenuTop';
-export const SidemenuBase = styled.divBox `
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  transition-duration: normal;
-  overflow: hidden;
-`;
 /** A collapsible side menu for navigation. */
 export const Sidemenu = vui((props, ref) => {
-    const { children, className, items, isExpanded = false, size, variant, width = 280, ...rest } = props;
+    const { children, className, items, isExpanded = false, size, variant, width = 280, onNavigate, ...rest } = props;
     const [isExpandedInternal, setIsExpandedInternal] = useState(isExpanded);
     const context = useMemo(() => filterUndefined({ size, variant, isExpandedInternal }), [size, variant, isExpandedInternal]);
     const styles = useStyleConfig('Sidemenu', props);
@@ -29,10 +22,15 @@ export const Sidemenu = vui((props, ref) => {
     const w = isExpandedInternal ? width : expandedWidth;
     const icon = `falArrow${isExpandedInternal ? 'Left' : 'Right'}`;
     const justifyContent = isExpandedInternal ? 'flex-end' : 'center';
+    function onItemClick(item) {
+        item?.onClick?.();
+        if (item?.path)
+            onNavigate?.(item.path);
+    }
     return (React.createElement(SidemenuProvider, { value: context },
-        React.createElement(SidemenuBase, { className: cs('vui-sidemenu', className), ref: ref, w: w, ...styles.container, ...rest },
+        React.createElement(Box, { className: cs('vui-sidemenu', className), elevation: "3", flexDirection: "column", minWidth: 0, overflowX: "hidden", ref: ref, transitionDuration: "normal", w: w, ...styles.container, ...rest },
             React.createElement(Box, { flexDirection: "column", flexGrow: 1, overflowX: "hidden", overflowY: "auto", w: "100%" }, items
-                ? items?.map?.((item, key) => React.createElement(SidemenuItem, { key: key, ...item }))
+                ? items?.map?.((item, key) => (React.createElement(SidemenuItem, { key: key, ...item, onClick: () => onItemClick(item) })))
                 : children),
             React.createElement(Box, { className: "vui-sidemenu-bottom", w: "100%", ...styles.bottom },
                 React.createElement(Button, { borderRadius: 0, justifyContent: justifyContent, minH: size === 'lg' ? '56px' : '40px', onClick: onToggle, variant: isDark ? 'tertiaryLight' : 'tertiaryDark', w: "100%" },

package/dist/esm/sidemenu/sidemenu.types.d.ts

@@ -9,6 +9,8 @@ export type SidemenuProps = SystemProps & ThemingProps<'Sidemenu'> & {
     items?: SidemenuItemProps[];
     /** Whether the menu is expanded @default false  */
     isExpanded?: boolean;
+    /** External callback for navigation to the item path, could be a custom function or React Router hook: https://reactrouter.com/en/main/hooks/use-navigate  */
+    onNavigate?: (to: string) => void;
     /** With of the container when the side menu is expanded @default 280  */
     width?: number;
 };
@@ -25,6 +27,8 @@ export type SidemenuItemProps = BoxProps & {
     isActive?: boolean;
     /** On click callback */
     onClick?: () => void;
+    /** Router path */
+    path?: string;
     /** Title */
     title: string;
 };

package/dist/esm/sidemenu/sidemenu.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.types.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC3B,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAEH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG;IACzC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wBAAwB;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA"}
+{"version":3,"file":"sidemenu.types.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC3B,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8JAA8J;IAC9J,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAEH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG;IACzC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wBAAwB;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA"}

package/dist/esm/sidemenu/sidemenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAM7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,wCA6EmB,CAAA;AAE5C,eAAe,YAAY,CAAA"}
+{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAM7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,wCA+EmB,CAAA;AAE5C,eAAe,YAAY,CAAA"}

package/dist/esm/sidemenu/sidemenuItem.js

@@ -29,6 +29,7 @@ export const SidemenuItem = vui((props, ref) => {
         borderRadius: 0,
         borderLeft: '3px solid transparent',
         borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined,
+        bg: isDark ? 'darkBlue.main' : isActive ? 'skyBlue.95' : 'white',
         color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10',
         h: 'auto',
         justifyContent: 'space-between',
@@ -38,6 +39,7 @@ export const SidemenuItem = vui((props, ref) => {
         w: '100%',
         ...styles.item,
         minH: size === 'lg' ? '56px' : '40px',
+        hoverBg: isDark ? 'seaBlue.main' : 'skyBlue.90',
         ...rest
     };
     return (React.createElement(Box, { flexDirection: "column", ref: ref, w: "100%" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.11.0",
+  "version": "2.12.0-beta.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/button/buttonIcon.tsx

@@ -1,16 +1,19 @@
 import React from 'react'
 
 import { useStyleConfig, vui } from '../core'
-import Icon, { IconProps } from '../icon'
+import Icon, { IconProp, IconProps } from '../icon'
 import { cs } from '../utils'
 import { useButtonContext } from './context'
 
+const isConceptualIcon = (name?: IconProp) => name?.startsWith('con')
+
 /** Displays an icon within the Button. */
 export const ButtonIcon = vui<'svg', IconProps>((props, ref) => {
-  const { className, ...rest } = props
+  const { className, name, ...rest } = props
   const styles = useStyleConfig('Button', useButtonContext())
+  const verifiedName = isConceptualIcon(name) ? undefined : name
 
-  return <Icon className={cs('vui-buttonIcon', className)} ref={ref} {...styles.icon} {...rest} />
+  return <Icon className={cs('vui-buttonIcon', className)} name={verifiedName} ref={ref} {...styles.icon} {...rest} />
 })
 
 export default ButtonIcon

package/src/core/vuiProvider/consts.ts

@@ -0,0 +1 @@
+export const noScrollClass = 'vui-no-scroll'

package/src/core/vuiProvider/globalStyle.tsx

@@ -2,6 +2,7 @@ import foundations from '../../theme/foundations'
 import { isObject } from '../../utils'
 import { createGlobalStyle, css } from '../styled'
 import { bounce, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, pulse, spin } from './animations'
+import { noScrollClass } from './consts'
 import fontFaces from './fontFaces'
 
 type GlobalStyleProps = {
@@ -46,6 +47,11 @@ export default createGlobalStyle<GlobalStyleProps>`
     z-index: 1;
   }
 
+  body.${noScrollClass} {
+    overflow: hidden !important;
+    overscroll-behavior: contain;
+  }
+
   //@formatter:off
   ${p =>
     p.globalStyle &&

package/src/core/vuiProvider/index.ts

@@ -1,6 +1,8 @@
 export * from './animations'
 export * from './context'
 export * from './useOfflineMode'
+export * from './useBodyScrollLock'
+export * from './consts'
 export { default as fontFaces } from './fontFaces'
 export { default as GlobalStyle } from './globalStyle'
 export { default as ResetCSS } from './resetCSS'

package/src/core/vuiProvider/useBodyScrollLock.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+import { addBodyClass, removeBodyClass } from '../../utils'
+import { noScrollClass } from './consts'
+
+export const useBodyScrollLock = () => {
+  const [isScrollLocked, setIsScrollLocked] = useState(false)
+
+  const toggleIsScrollLocked = () => setIsScrollLocked(!isScrollLocked)
+
+  useEffect(() => {
+    if (isScrollLocked) addBodyClass(noScrollClass)
+    else removeBodyClass(noScrollClass)
+  }, [isScrollLocked])
+
+  return { isScrollLocked, setIsScrollLocked, toggleIsScrollLocked }
+}

package/src/core/vuiProvider/vuiProvider.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useReducer } from 'react'
 import { ThemeProvider } from 'styled-components'
 
-import ModalStyle from '../../modal/modalStyle'
 import PopoverStyle from '../../popover/popoverStyle'
 import { Portal } from '../../portal'
 import defaultTheme, { VuiTheme } from '../../theme'
@@ -47,7 +46,6 @@ const VuiProvider: FC<VuiProviderProps & ChildrenProp> = ({
         <>
           {resetCSS && <ResetCSS />}
           <GlobalStyle globalStyle={globalStyle} />
-          <ModalStyle />
           <PopoverStyle />
           {children}
           {notifyOffline && <NotifyOffline />}

package/src/definition/definition.tsx

@@ -64,9 +64,6 @@ export const DefinitionHorizontalBase = styled.dlBox`
 export const Definition = vui<'dl', DefinitionProps>((props, ref) => {
   const { orientation = 'horizontal', ...rest } = props as DefinitionProps
   const styles = useStyleConfig('Definition', props)
-
-  console.log('orientation', orientation)
-
   return (
     <>
       {orientation === 'horizontal' && (

package/src/dialog/consts.ts

@@ -31,5 +31,3 @@ export const dialogStatusMapping: DialogStatusMapping = {
 export const containerId = 'vui-dynamic-container'
 
 export const modalClass = 'vui-modal'
-
-export const noScrollClass = 'vui-no-scroll'

package/src/{modal → focusLock}/focusLock.tsx

@@ -5,10 +5,11 @@ import { ChildrenProp } from '../core'
 import { FocusLockProps } from './focusLock.types'
 
 /**
- * Traps the focus within the provided content. That is, tabbing with keyboard will
- * only cycle through the children and won't leave the boundary of the FocusLock.
- * This behavior enhances accessibility of the Modal component.
+ * Traps the focus within the provided content.
+ *
+ * Tabbing using the keyboard will only cycle through the children and won't leave the boundary of the FocusLock wrapper.
  */
+
 export const FocusLock: FC<FocusLockProps & ChildrenProp> = props => {
   const {
     autoFocus,

package/src/focusLock/index.ts

@@ -0,0 +1,3 @@
+export * from './focusLock'
+export { default } from './focusLock'
+export * from './focusLock.types'

package/src/footer/footer.tsx

@@ -4,6 +4,7 @@ import { Box } from '../box'
 import { styled, useDown, useStyleConfig, vui, VuiComponent } from '../core'
 import { Divider } from '../divider'
 import { Link } from '../link'
+import Menu from '../menu'
 import { T } from '../t'
 import { cs } from '../utils'
 import { FooterProvider } from './context'
@@ -97,7 +98,34 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
               >
                 {applicationLinks?.map((link, index) => (
                   <Box flex={{ xs: '0 0 50%', sm: '0 0 auto' }} key={index} minW={70}>
-                    <FooterLink {...link} />
+                    {link.items && (
+                      <Menu isLazy={false} offset={[-16, 9]} placement="top-start" size="lg" {...rest}>
+                        <Menu.Button
+                          as={Link}
+                          className="vui-footerLink-trigger"
+                          pt="3px"
+                          text={link.text}
+                          title={link.text}
+                          {...styles.link}
+                          {...rest}
+                        />
+
+                        <Menu.List maxH={400} right={0} w={320} {...styles.list}>
+                          {link.items.map(({ text, url }, index) => (
+                            <Menu.Item
+                              isTruncated
+                              key={index}
+                              linkProps={{ href: url }}
+                              text={text}
+                              title={text}
+                              {...styles.item}
+                            />
+                          ))}
+                        </Menu.List>
+                      </Menu>
+                    )}
+
+                    {!link.items && <FooterLink {...link} />}
                   </Box>
                 ))}
               </Box>

package/src/footer/footer.types.ts

@@ -18,7 +18,8 @@ export type FooterLinkData = {
   /** Unique name that identifies a link in the links dictionary. */
   id?: string
   text: string
-  url: string
+  url?: string
+  items?: FooterLinkData[]
 }
 
 export type FooterProps = Omit<BoxProps, 'size' | 'variant'> &

package/src/index.ts

@@ -14,6 +14,7 @@ export * from './definition'
 export * from './dialog'
 export * from './divider'
 export * from './dragAndDrop'
+export * from './focusLock'
 export * from './footer'
 export * from './grid'
 export * from './header'

package/src/input/consts.ts

@@ -43,3 +43,10 @@ export const inputStateMapping: InputStateMapping = {
     }
   }
 }
+
+export const displayValueOnlyTextSize = {
+  sm: 'xs',
+  md: 'sm',
+  lg: 'md',
+  xl: 'lg'
+}

package/src/input/input.tsx

@@ -4,7 +4,7 @@ import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
 import AutoCompletePopover from './autoCompletePopover'
-import { inputColors, inputStateMapping } from './consts'
+import { displayValueOnlyTextSize, inputColors, inputStateMapping } from './consts'
 import { InputProvider } from './context'
 import { getInitialCount } from './helpers'
 import HelpText from './helpText'
@@ -67,7 +67,8 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     readOnly,
     required,
     showCount,
-    size,
+    displayValueOnly,
+    size = 'lg',
     state = '',
     stateMapping,
     step,
@@ -113,59 +114,69 @@ export const Input = vui<'div', InputProps>((props, ref) => {
 
   return (
     <InputProvider value={context}>
-      <AutoCompletePopover
-        autoCompleteMaxHeight={autoCompleteMaxHeight}
-        autoCompleteOptions={autoCompleteOptions}
-        filterAutoCompleteOptions={filterAutoCompleteOptions}
-        onAutoCompleteSelect={onAutoCompleteSelect}
-      >
-        <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
-          {itemLeft}
-          {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
-          {children ?? input ?? (
-            <InputInput
-              ref={inputRef}
-              {...{
-                autoFocus,
-                defaultValue,
-                disabled,
-                id,
-                max,
-                maxLength,
-                min,
-                name,
-                onBlur,
-                onChange,
-                onFocus,
-                pattern,
-                placeholder,
-                readOnly,
-                required,
-                step,
-                type
-              }}
-              autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}
-              value={valueInternal}
-              {...inputProps}
-            />
-          )}
-          {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
-          {itemRight}
-          {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
-          {showCount && (
-            <T
-              className="vui-inputCount"
-              color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
-              position="absolute"
-              right={0}
-              size="sm"
-              top="calc(100% + 1px)"
-            >
-              {count} {maxLength ? `/ ${maxLength}` : null}
-            </T>
-          )}
-        </InputBase>
-      </AutoCompletePopover>
+      {displayValueOnly ? (
+        <T
+          className={cs('vui-input-value', className)}
+          size={displayValueOnlyTextSize[size] as 'xs' | 'md' | 'sm' | 'lg'}
+        >
+          {value || defaultValue}
+        </T>
+      ) : (
+        <AutoCompletePopover
+          autoCompleteMaxHeight={autoCompleteMaxHeight}
+          autoCompleteOptions={autoCompleteOptions}
+          filterAutoCompleteOptions={filterAutoCompleteOptions}
+          onAutoCompleteSelect={onAutoCompleteSelect}
+        >
+          <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
+            {itemLeft}
+            {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
+            {children ?? input ?? (
+              <InputInput
+                ref={inputRef}
+                {...{
+                  autoFocus,
+                  defaultValue,
+                  disabled,
+                  id,
+                  max,
+                  maxLength,
+                  min,
+                  name,
+                  onBlur,
+                  onChange,
+                  onFocus,
+                  pattern,
+                  placeholder,
+                  readOnly,
+                  required,
+                  step,
+                  type
+                }}
+                autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}
+                value={valueInternal}
+                {...inputProps}
+              />
+            )}
+            {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
+            {itemRight}
+            {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
+            {showCount && (
+              <T
+                className="vui-inputCount"
+                color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
+                position="absolute"
+                right={0}
+                size="sm"
+                top="calc(100% + 1px)"
+              >
+                {count} {maxLength ? `/ ${maxLength}` : null}
+              </T>
+            )}
+          </InputBase>
+        </AutoCompletePopover>
+      )}
+
       {!!helpText && <HelpText>{helpText}</HelpText>}
       {!!errorText && <HelpText isError>{errorText}</HelpText>}
     </InputProvider>

package/src/input/input.types.ts

@@ -68,6 +68,8 @@ export type InputProps = SystemProps &
     required?: boolean
     /** Displays length of input value if also using maxLength. */
     showCount?: boolean
+    /** Displays the provided value. */
+    displayValueOnly?: boolean
     /** Modifies Input style and content based on the given state. */
     state?: InputState
     /** Object definition of styles and content for each state. */

package/src/modal/index.ts

@@ -1,6 +1,6 @@
 export * from './context'
-export * from './focusLock'
-export * from './focusLock.types'
+export * from '../focusLock/focusLock'
+export * from '../focusLock/focusLock.types'
 export * from './modal'
 export { default as Modal } from './modal'
 export * from './modal.types'

package/src/modal/modal.tsx

@@ -2,10 +2,10 @@ import React, { cloneElement, useRef } from 'react'
 
 import Box from '../box'
 import { vui, VuiComponent } from '../core'
+import FocusLock from '../focusLock'
 import Portal from '../portal'
 import { callAll, cs, KeyboardEvent, mergeRefs, MouseEvent } from '../utils'
 import { ModalProvider } from './context'
-import FocusLock from './focusLock'
 import { ModalProps } from './modal.types'
 import ModalBackdrop from './modalBackdrop'
 import ModalContent from './modalContent'
@@ -95,7 +95,6 @@ export const Modal = vui<'div', ModalProps>((props, ref) => {
           onMouseDown={callAll(props.onMouseDown, onMouseDown)}
         >
           {!hideBackdrop && <ModalBackdrop />}
-
           <FocusLock
             autoFocus={!disableAutoFocus}
             finalFocusRef={finalFocusRef}

package/src/modal/modal.types.ts

@@ -1,9 +1,9 @@
 import { ReactElement } from 'react'
 
+import { FocusableElement } from '../focusLock/focusLock.types'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 import { MouseEvent } from '../utils'
-import { FocusableElement } from './focusLock.types'
 
 export type ModalBackdropProps = SystemProps
 

package/src/modal/modalManager.ts

@@ -1,18 +1,14 @@
 import { Ref, useEffect } from 'react'
 
-import { addBodyClass, removeBodyClass } from '../utils/dom'
+import { useBodyScrollLock } from '../core'
 
 /** State management for nested modals. */
 class ModalManager {
   modals: any[] = []
 
-  add = (modal: any) => {
-    this.modals.push(modal)
-  }
+  add = (modal: any) => this.modals.push(modal)
 
-  remove = (modal: any) => {
-    this.modals = this.modals.filter(m => m !== modal)
-  }
+  remove = (modal: any) => (this.modals = this.modals.filter(m => m !== modal))
 
   isTopModal = (modal: any) => {
     const topmostModal = this.modals[this.modals.length - 1]
@@ -24,15 +20,16 @@ export const manager = new ModalManager()
 
 /** Refs of new modals will be automatically added/removed from the state when rendering. */
 export function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLock?: boolean) {
+  const { setIsScrollLocked } = useBodyScrollLock()
   useEffect(() => {
     if (isOpen) {
       manager.add(ref)
-      if (!disableScrollLock) addBodyClass('vui-no-scroll')
+      if (!disableScrollLock) setIsScrollLocked(true)
     }
 
     return () => {
       manager.remove(ref)
-      if (!disableScrollLock) removeBodyClass('vui-no-scroll')
+      if (!disableScrollLock) setIsScrollLocked(false)
     }
   }, [isOpen, ref])
 }