@veracity/vui 2.11.0 → 2.12.0-beta.1

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])
 }

package/src/sidemenu/sidemenu.tsx

@@ -2,26 +2,18 @@ import React, { useEffect, useMemo, useState } from 'react'
 
 import Box from '../box'
 import Button from '../button'
-import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import { useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
-import { cs, filterUndefined } from '../utils'
+import { cs, filterUndefined, isActivePath } from '../utils'
 import { expandedWidth } from './consts'
 import { SidemenuProvider } from './context'
 import { SidemenuItemProps, SidemenuProps } from './sidemenu.types'
 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<'div', SidemenuProps>((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(
@@ -43,12 +35,35 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
   const icon = `falArrow${isExpandedInternal ? 'Left' : 'Right'}`
   const justifyContent = isExpandedInternal ? 'flex-end' : 'center'
 
+  function onItemClick(item: SidemenuItemProps) {
+    item?.onClick?.()
+    if (item?.path) onNavigate?.(item.path)
+  }
+
   return (
     <SidemenuProvider value={context}>
-      <SidemenuBase className={cs('vui-sidemenu', className)} ref={ref} w={w} {...styles.container} {...rest}>
+      <Box
+        className={cs('vui-sidemenu', className)}
+        elevation="3"
+        flexDirection="column"
+        minWidth={0}
+        overflowX="hidden"
+        ref={ref}
+        transitionDuration="normal"
+        w={w}
+        {...styles.container}
+        {...rest}
+      >
         <Box flexDirection="column" flexGrow={1} overflowX="hidden" overflowY="auto" w="100%">
           {items
-            ? items?.map?.((item: SidemenuItemProps, key: number) => <SidemenuItem key={key} {...item} />)
+            ? items?.map?.((item: SidemenuItemProps, key: number) => (
+                <SidemenuItem
+                  isActive={isActivePath(item?.path)}
+                  key={key}
+                  {...item}
+                  onClick={() => onItemClick(item)}
+                />
+              ))
             : children}
         </Box>
         <Box className="vui-sidemenu-bottom" w="100%" {...styles.bottom}>
@@ -63,7 +78,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
             <Icon name={icon} />
           </Button>
         </Box>
-      </SidemenuBase>
+      </Box>
     </SidemenuProvider>
   )
 }) as VuiComponent<'div', SidemenuProps> & {

package/src/sidemenu/sidemenu.types.ts

@@ -13,6 +13,8 @@ export type SidemenuProps = SystemProps &
     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
   }
@@ -30,6 +32,8 @@ export type SidemenuItemProps = BoxProps & {
   isActive?: boolean
   /** On click callback */
   onClick?: () => void
+  /** Router path */
+  path?: string
   /** Title */
   title: string
 }

package/src/sidemenu/sidemenuItem.tsx

@@ -41,6 +41,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((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',
@@ -50,6 +51,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     w: '100%',
     ...styles.item,
     minH: size === 'lg' ? '56px' : '40px',
+    hoverBg: isDark ? 'seaBlue.main' : 'skyBlue.90',
     ...rest
   }
 

package/src/sidemenu/theme.ts

@@ -21,7 +21,9 @@ const sizes = {
 }
 const variants = {
   light: {
-    container: {},
+    container: {
+      bg: 'white'
+    },
     bottom: {
       borderTop: '1px solid lightgray'
     },

package/src/utils/index.ts

@@ -9,3 +9,4 @@ export * from './react'
 export * from './styles'
 export * from './types'
 export * from './uid'
+export * from './window'

package/src/utils/window.ts

@@ -0,0 +1 @@
+export const isActivePath = (path?: string): boolean => !!path && window.location.pathname.includes(path)

package/dist/cjs/modal/focusLock.d.ts

@@ -1,11 +0,0 @@
-import { FC } from 'react';
-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.
- */
-export declare const FocusLock: FC<FocusLockProps & ChildrenProp>;
-export default FocusLock;
-//# sourceMappingURL=focusLock.d.ts.map

package/dist/cjs/modal/focusLock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"focusLock.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAe,MAAM,OAAO,CAAA;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CAmCvD,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/cjs/modal/focusLock.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"focusLock.types.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACjD,6EAA6E;IAC7E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACnD,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA"}

package/dist/cjs/modal/modalStyle.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
-export default _default;
-//# sourceMappingURL=modalStyle.d.ts.map

package/dist/cjs/modal/modalStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"modalStyle.d.ts","sourceRoot":"","sources":["../../../src/modal/modalStyle.ts"],"names":[],"mappings":";AAEA,wBAMC"}

package/dist/cjs/modal/modalStyle.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("../core");
-exports.default = (0, core_1.createGlobalStyle) `
-
-body.vui-no-scroll {
-	overflow: hidden !important;
-	overscroll-behavior: contain;
-}
-`;

package/dist/esm/modal/focusLock.d.ts

@@ -1,11 +0,0 @@
-import { FC } from 'react';
-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.
- */
-export declare const FocusLock: FC<FocusLockProps & ChildrenProp>;
-export default FocusLock;
-//# sourceMappingURL=focusLock.d.ts.map

package/dist/esm/modal/focusLock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"focusLock.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAe,MAAM,OAAO,CAAA;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CAmCvD,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/esm/modal/focusLock.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"focusLock.types.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACjD,6EAA6E;IAC7E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACnD,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA"}

package/dist/esm/modal/modalStyle.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
-export default _default;
-//# sourceMappingURL=modalStyle.d.ts.map

package/dist/esm/modal/modalStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"modalStyle.d.ts","sourceRoot":"","sources":["../../../src/modal/modalStyle.ts"],"names":[],"mappings":";AAEA,wBAMC"}

package/dist/esm/modal/modalStyle.js

@@ -1,8 +0,0 @@
-import { createGlobalStyle } from '../core';
-export default createGlobalStyle `
-
-body.vui-no-scroll {
-	overflow: hidden !important;
-	overscroll-behavior: contain;
-}
-`;

package/src/modal/modalStyle.ts

@@ -1,9 +0,0 @@
-import { createGlobalStyle } from '../core'
-
-export default createGlobalStyle`
-
-body.vui-no-scroll {
-	overflow: hidden !important;
-	overscroll-behavior: contain;
-}
-`