@veracity/vui 2.8.4 → 2.9.0-beta.1

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

@@ -1,15 +1,15 @@
 import React, { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
 /** Type for a a no-op function stub. */
-export declare type AnyFunction = (...args: any[]) => any;
+export type AnyFunction = (...args: any[]) => any;
 /** Type for any number without breaking autocompletion. */
-export declare type AnyNumber = number & {};
+export type AnyNumber = number & {};
 /** Type for any string without breaking autocompletion. */
-export declare type AnyString = string & {};
+export type AnyString = string & {};
 /** Type of change event defaulted to input element */
-export declare type ChangeEvent<T = HTMLInputElement> = React.ChangeEvent<T>;
+export type ChangeEvent<T = HTMLInputElement> = React.ChangeEvent<T>;
 /** Type of change event handler defaulted to input element */
-export declare type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEventHandler<T>;
-export declare type CreateContextOptions = {
+export type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEventHandler<T>;
+export type CreateContextOptions = {
     /** Message displayed when context is used outside of the provider */
     errorMessage?: string;
     /** Accessing context outside of provider won't throw error */
@@ -18,32 +18,32 @@ export declare type CreateContextOptions = {
     name?: string;
 };
 /** Return value of the createContext function. */
-export declare type CreateContextReturn<T> = [React.Provider<T>, () => T];
+export type CreateContextReturn<T> = [React.Provider<T>, () => T];
 /** Basic dictionary typing. */
-export declare type Dict<T = any> = Record<string, T>;
+export type Dict<T = any> = Record<string, T>;
 /** Classic application's environment names. */
-export declare type Environment = 'Prod' | 'Stag' | 'Test';
+export type Environment = 'Prod' | 'Stag' | 'Test';
 /** Type of blur/focus event defaulted to any html element */
-export declare type FocusEvent<T = HTMLElement> = React.FocusEvent<T>;
+export type FocusEvent<T = HTMLElement> = React.FocusEvent<T>;
 /** Type of blur/focus event handler defaulted to any html element */
-export declare type FocusEventHandler<T = HTMLElement> = React.FocusEventHandler<T>;
+export type FocusEventHandler<T = HTMLElement> = React.FocusEventHandler<T>;
 /** Type of keyboard event defaulted to any html element */
-export declare type KeyboardEvent<T = HTMLElement> = React.KeyboardEvent<T>;
+export type KeyboardEvent<T = HTMLElement> = React.KeyboardEvent<T>;
 /** Type of keyboard event handler defaulted to any html element */
-export declare type KeyboardEventHandler<T = HTMLElement> = React.KeyboardEventHandler<T>;
+export type KeyboardEventHandler<T = HTMLElement> = React.KeyboardEventHandler<T>;
 /** Type of mouse event defaulted to any html element */
-export declare type MouseEvent<T = HTMLElement> = React.MouseEvent<T>;
+export type MouseEvent<T = HTMLElement> = React.MouseEvent<T>;
 /** Type of mouse event handler defaulted to any html element */
-export declare type MouseEventHandler<T = HTMLElement> = React.MouseEventHandler<T>;
+export type MouseEventHandler<T = HTMLElement> = React.MouseEventHandler<T>;
 /** Merges component/element base props and custom props */
-export declare type PropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithoutRef<C>, Props>;
+export type PropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithoutRef<C>, Props>;
 /** Merges component/element base props and custom props including ref */
-export declare type RefPropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithRef<C>, Props>;
+export type RefPropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithRef<C>, Props>;
 /** Render props of component's children. */
-export declare type RenderProps<P> = React.ReactNode | ((props: P) => React.ReactNode);
+export type RenderProps<P> = React.ReactNode | ((props: P) => React.ReactNode);
 /** Merges props definitions, overriding source keys */
-export declare type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;
-export declare type Sort<T = string> = {
+export type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;
+export type Sort<T = string> = {
     key: T;
     order: 'asc' | 'desc';
 };

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.8.4",
+  "version": "2.9.0-beta.1",
   "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",
@@ -26,8 +26,8 @@
     "@xstyled/styled-components": "2.5.0",
     "@xstyled/system": "2.5.0",
     "@xstyled/util": "2.2.3",
-    "react-focus-lock": "2.8.1",
-    "styled-components": "5.3.3",
+    "react-focus-lock": "2.9.4",
+    "styled-components": "5.3.6",
     "tippy.js": "6.3.7"
   },
   "peerDependencies": {

package/src/accordion/accordion.tsx

@@ -16,28 +16,37 @@ export const AccordionBase = styled.divBox`
 
 /** Allows to show and hide sections of related content on a page. */
 export const Accordion = vui<'div', AccordionProps>((props, ref) => {
-  const { children, className, itemTitleHoverBg = 'blue.10', items, orientation = 'vertical', size, ...rest } = props
+  const { children, className, items, orientation = 'vertical', iconPosition = 'end', size, variant, ...rest } = props
   const styles = useStyleConfig('Accordion', props)
-
-  const context = useMemo(() => filterUndefined({ size }), [size])
-
+  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])
   const aliasedProps = filterUndefined<AccordionProps>({})
-
+  const isVertical = orientation === 'vertical'
   return (
     <AccordionProvider value={context}>
-      <AccordionBase className={cs('vui-accordion', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
-        {orientation === 'vertical' ? (
+      <AccordionBase
+        borderLeft={
+          isVertical
+            ? undefined
+            : `1px solid transparent
+        `
+        }
+        borderTop={isVertical ? `1px solid transparent` : undefined}
+        className={cs('vui-accordion', className)}
+        ref={ref}
+        {...styles.container}
+        {...aliasedProps}
+        {...rest}
+      >
+        {isVertical ? (
           <List w="100%">
             {items
               ? items?.map?.((item: AccordionItemProps, key: number) => (
-                  <AccordionItem itemTitleHoverBg={itemTitleHoverBg} key={key} {...item} />
+                  <AccordionItem iconPosition={iconPosition} key={key} {...item} />
                 ))
               : children}
           </List>
         ) : items ? (
-          items?.map?.((item: AccordionItemProps, key: number) => (
-            <AccordionItemHorizontal itemTitleHoverBg={itemTitleHoverBg} key={key} {...item} />
-          ))
+          items?.map?.((item: AccordionItemProps, key: number) => <AccordionItemHorizontal key={key} {...item} />)
         ) : (
           children
         )}

package/src/accordion/accordion.types.ts

@@ -5,15 +5,16 @@ import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type AccordionOrientation = 'vertical' | 'horizontal'
+export type AccordionIconPosition = 'end' | 'start'
 
 export type AccordionProps = SystemProps &
   ThemingProps<'Accordion'> & {
-    /** Items AccordionOrientation @default 'vertical' */
+    /** Items AccordionOrientation @default "vertical" */
     orientation?: AccordionOrientation
-    /** Hover color for the item title @default "blue.10" */
-    itemTitleHoverBg?: string
     /** Collection of Accordion items */
     items?: AccordionItemProps[]
+    /** Icon position for vertical orientation @default "end" */
+    iconPosition?: AccordionIconPosition
   }
 
 export type AccordionItemId = string | number
@@ -36,8 +37,8 @@ export type AccordionItemProps = ListItemProps & {
   contentPx?: string | number
   /** Collapsed state */
   collapsed?: boolean
-  /** Hover color for the item title @default "blue.10" */
-  itemTitleHoverBg?: string
+  /** The icon position @default "end" */
+  iconPosition?: AccordionIconPosition
   /** Title */
   title?: string | ReactNode
   /** Collapse change state */
@@ -47,4 +48,5 @@ export type AccordionItemProps = ListItemProps & {
 export type AccordionItemArrowProps = {
   collapsed?: boolean
   orientation?: AccordionOrientation
+  color?: string
 }

package/src/accordion/accordionItem.tsx

@@ -17,7 +17,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
     content,
     disabled,
     id,
-    itemTitleHoverBg = 'blue.10',
+    iconPosition = 'end',
     title,
     onToggle,
     ...rest
@@ -37,11 +37,18 @@ export const AccordionItem = (props: AccordionItemProps) => {
     }
   }
 
+  const isIconStart = iconPosition === 'start'
+  const isIconEnd = iconPosition === 'end'
+
   return (
     <ListItem
-      borderBottom="1px solid grey.40"
+      borderBottom="1px solid transparent"
+      borderColor={styles.item.borderColor}
       className={cs('vui-accordion-item', className)}
+      color="yellow"
       disabled={disabled}
+      disabledBg={styles.item.disabledBg}
+      disabledColor={styles.item.disabledColor}
       flexDirection="column"
       h="auto"
       id={`${id}`}
@@ -50,18 +57,34 @@ export const AccordionItem = (props: AccordionItemProps) => {
       {...rest}
     >
       <Box
+        color="yellow"
         cursor={disabled ? 'not-allowed' : 'pointer'}
-        hoverBg={itemTitleHoverBg}
-        justifyContent="space-between"
+        hoverBg={
+          disabled
+            ? 'transparent'
+            : collapsedInternal
+            ? styles.item.itemTitleHoverBg
+            : styles.item.expandedItemTitleHoverBg
+        }
+        justifyContent={iconPosition === 'start' ? 'initial' : 'space-between'}
         onClick={toggle}
         px={2}
         w="100%"
         {...styles.item}
       >
-        <Box fontWeight={typeof title === 'string' ? '500' : 'inherit'}>{title}</Box>
-        <Box>
-          <AccordionItemArrow collapsed={collapsedInternal} />
+        {isIconStart && (
+          <Box>
+            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} />
+          </Box>
+        )}
+        <Box fontWeight={typeof title === 'string' ? '500' : 'inherit'} ml={isIconStart ? 2 : 0}>
+          {title}
         </Box>
+        {isIconEnd && (
+          <Box>
+            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} />
+          </Box>
+        )}
       </Box>
       {!collapsedInternal && (
         <Box mb={2} mt={2} px={2} py={1} w="100%">

package/src/accordion/accordionItemArrow.tsx

@@ -14,8 +14,12 @@ const names = {
   }
 }
 
-const AccordionItemArrow = ({ collapsed, orientation = 'vertical' }: AccordionItemArrowProps) => (
-  <Icon name={names[orientation][collapsed ? 'collapsed' : 'expanded']} size="xs" />
+const AccordionItemArrow = ({
+  collapsed,
+  color = 'sandstone.10',
+  orientation = 'vertical'
+}: AccordionItemArrowProps) => (
+  <Icon name={names[orientation][collapsed ? 'collapsed' : 'expanded']} pathFill={color} size="sm" />
 )
 
 export default React.memo(AccordionItemArrow)

package/src/accordion/accordionItemHorizontal.tsx

@@ -9,19 +9,8 @@ import { useAccordionContext } from './context'
 
 /** An accordion item (horizontal AccordionOrientation). */
 export const AccordionItemHorizontal = (props: AccordionItemProps) => {
-  const {
-    className,
-    children,
-    collapsed,
-    content,
-    disabled,
-    id,
-    contentPx,
-    itemTitleHoverBg = 'blue.10',
-    title,
-    onToggle,
-    ...rest
-  } = omitThemingProps(props)
+  const { className, children, collapsed, content, disabled, id, contentPx, title, onToggle, ...rest } =
+    omitThemingProps(props)
   const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)
 
   const styles = useStyleConfig('Accordion', useAccordionContext())
@@ -46,7 +35,7 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
     <Box
       alignItems={collapsedInternal ? 'normal' : 'baseline'}
       bg={disabled ? 'disabled.bg' : undefined}
-      borderRight="1px solid grey.40"
+      borderRight="1px solid transparent"
       className={cs('vui-accordion-item-horizontal', className)}
       color={disabled ? 'disabled.color' : undefined}
       column
@@ -54,15 +43,21 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
       id={`${id}`}
       maxW={collapsedInternal ? styles.item.minH : 'auto'}
       minW={styles.item.minH}
-      p={0}
       transitionDuration="0ms"
       userSelect={disabled ? 'none' : undefined}
+      {...styles.item}
+      p={0}
       {...rest}
     >
       <Box
-        {...styles.item}
         cursor={cursor}
-        hoverBg={itemTitleHoverBg}
+        hoverBg={
+          disabled
+            ? 'transparent'
+            : collapsedInternal
+            ? styles.item.itemTitleHoverBg
+            : styles.item.expandedItemTitleHoverBg
+        }
         justifyContent="space-between"
         minH={styles.item.minH}
         onClick={toggle}

package/src/accordion/theme.ts

@@ -1,7 +1,8 @@
 const baseStyle = {}
 
 const defaultProps = {
-  size: 'md'
+  size: 'md',
+  variant: 'light'
 }
 
 const sizes = {
@@ -25,7 +26,38 @@ const sizes = {
   }
 }
 
-const variants = {}
+const variants = {
+  light: {
+    container: {
+      bg: 'white',
+      borderColor: 'sandstone.main'
+    },
+    item: {
+      borderColor: 'sandstone.main',
+      itemTitleHoverBg: 'skyBlue.95',
+      expandedItemTitleHoverBg: 'skyBlue.90'
+    },
+    icon: {
+      color: 'sandstone.10'
+    }
+  },
+  dark: {
+    container: {
+      bg: 'darkBlue.main',
+      borderColor: 'white',
+      color: 'white'
+    },
+    item: {
+      borderColor: 'white',
+      disabledBg: 'transparent',
+      itemTitleHoverBg: 'seaBlue.35',
+      expandedItemTitleHoverBg: 'seaBlue.25'
+    },
+    icon: {
+      color: 'digiGreen.main'
+    }
+  }
+}
 
 export default {
   baseStyle,

package/src/button/button.tsx

@@ -24,7 +24,6 @@ const StateWrapper = styled.span`
 
 export const ButtonBase = styled.buttonBox<ButtonProps>`
   align-items: center;
-  border-radius: none;
   display: inline-flex;
   flex-shrink: 0;
   font-weight: medium;
@@ -132,7 +131,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     : {}
 
   const aliasedProps = filterUndefined({
-    borderRadius: isRound ? h / 2 : 0,
+    borderRadius: isRound ? h / 2 : styles?.container?.borderRadius || 0,
     boxShadow: isElevated ? '2' : undefined,
     minW: icon ? 0 : undefined,
     pointerEvents: hasState ? 'none' : undefined,
@@ -144,7 +143,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
       <ButtonBase
         aria-label={ariaLabel}
         borderWidth={border}
-        className={cs('vui-button', className, isActive && activeClassName)}
+        className={cs('vui-button', className, isActive && activeClassName, `vui-button-variant-${variantProp}`)}
         disabled={disabled}
         focusRing={3}
         h={h}

package/src/button/theme.ts

@@ -282,6 +282,23 @@ const variants = {
       activeBg: 'landGreen.85',
       color: 'landGreen.30'
     }
+  },
+
+  // buttonGroupRounded is an internal variant, used in buttonGroup;
+  buttonGroupRounded: {
+    container: {
+      bg: 'white',
+      borderColor: 'sandstone.79',
+      color: 'sandstone.10',
+      hoverBg: 'seaBlue.20',
+      hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
+      hoverColor: 'white',
+      activeBg: 'seaBlue.35',
+      activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
+      activeColor: 'white',
+      borderRadius: 'round',
+      marginRight: '22px'
+    }
   }
 }
 

package/src/buttonGroup/buttonGroup.tsx

@@ -6,7 +6,7 @@ import { ButtonGroupProps } from './buttonGroup.types'
 import { ButtonGroupProvider } from './context'
 import { getInnerBorderColor } from './helpers'
 
-export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorderColor: string }>`
+export const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`
   display: flex;
 
   // Border color between Buttons
@@ -16,23 +16,19 @@ export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorder
 
   // First Button
   > *:first-of-type:not(:last-of-type) {
-    border-bottom-right-radius: 0;
     border-right-width: 1px;
-    border-top-right-radius: 0;
   }
 
   // Middle Buttons
   > *:not(:first-of-type):not(:last-of-type) {
     border-left-width: 0px;
-    border-radius: 0;
     border-right-width: 1px;
   }
 
   // Last Button
   > *:not(:first-of-type):last-of-type {
-    border-bottom-left-radius: 0;
     border-left-width: 0px;
-    border-top-left-radius: 0;
+    margin-right: 0;
   }
 
   // Border color
@@ -42,9 +38,22 @@ export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorder
   }
 
   //
-  > .${activeClassName} {
+  > .${activeClassName}.vui-button-variant-secondaryDark {
     background-color: ${p => th.color('skyBlue.90')};
   }
+
+  > .${activeClassName}.vui-button-variant-buttonGroupRounded {
+    background-color: ${p => th.color('seaBlue.main')};
+    color: ${p => th.color('white')};
+  }
+
+  > .${activeClassName}.vui-button-variant-buttonGroupRounded:hover {
+    background-color: ${p => th.color('seaBlue.20')};
+  }
+
+  > .${activeClassName}.vui-button-variant-buttonGroupRounded:active {
+    background-color: ${p => th.color('seaBlue.35')};
+  }
 `
 
 /**
@@ -52,14 +61,22 @@ export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorder
  * Exposes some props to the children via context.
  */
 export const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {
-  const { className, disabled, innerBorderColor, size, variant = 'secondaryDark', ...rest } = props
+  const { className, disabled, innerBorderColor, size, variant = 'default', ...rest } = props
 
-  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
+  const context = useMemo(
+    () =>
+      filterUndefined({
+        disabled,
+        size,
+        variant: variant === 'default' ? 'secondaryDark' : 'buttonGroupRounded'
+      }),
+    [disabled, size, variant]
+  )
 
   return (
     <ButtonGroupProvider value={context}>
       <ButtonGroupBase
-        className={cs('vui-buttonGroup', className)}
+        className={cs('vui-buttonGroup', className, `vui-buttonGroup-variant-${variant}`)}
         {...{ innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}
         {...rest}
       />

package/src/buttonGroup/buttonGroup.types.ts

@@ -9,4 +9,6 @@ export type ButtonGroupProps = SystemProps &
     disabled?: boolean
     /** Border color between the buttons. */
     innerBorderColor?: string
+    /** variant of the button-group. */
+    variant?: string
   }

package/src/dialog/dialogHeader.tsx

@@ -37,7 +37,7 @@ export const DialogHeader = vui<'div', DialogHeaderProps>((props, ref) => {
         <>
           {isJsx(icon) ? icon : showIcon && <DialogIcon {...icon} />}
 
-          {isJsx(title) ? title : title && <DialogTitle {...title} />}
+          {isJsx(title) ? title : title && <DialogTitle {...(title as any)} />}
 
           {isJsx(closeButton) ? closeButton : showCloseButton && <DialogCloseButton />}
         </>

package/src/header/theme.ts

@@ -42,7 +42,9 @@ const variants = {
       },
       link: {
         color: 'darkBlue.main',
-        borderColor: 'darkBlue.main'
+        borderColor: 'darkBlue.main',
+        hoverColor: 'darkBlue.main',
+        activeColor: 'darkBlue.main'
       }
     },
     logo: {
@@ -54,16 +56,21 @@ const variants = {
       color: 'darkBlue.main'
     },
     mobileToggle: {
-      color: 'darkBlue.main'
+      color: 'darkBlue.main',
+      hoverColor: 'darkBlue.main',
+      activeColor: 'darkBlue.main'
     },
     notifications: {
       container: {
-        color: 'darkBlue.main'
+        color: 'darkBlue.main',
+        hoverColor: 'darkBlue.main'
       }
     },
     services: {
       button: {
-        color: 'darkBlue.main'
+        color: 'darkBlue.main',
+        hoverColor: 'darkBlue.main',
+        activeColor: 'darkBlue.main'
       },
       list: {
         variant: 'blue'
@@ -102,7 +109,11 @@ const variants = {
       },
       link: {
         color: 'white',
-        borderColor: 'digiGreen.main'
+        borderColor: 'digiGreen.main',
+        hoverBg: 'seaBlue.25',
+        hoverColor: 'white',
+        activeBg: 'seaBlue.35',
+        activeColor: 'white'
       }
     },
     logo: {
@@ -117,12 +128,19 @@ const variants = {
       top: '100%'
     },
     mobileToggle: {
-      color: 'white'
+      color: 'white',
+      hoverBg: 'seaBlue.25',
+      hoverColor: 'white',
+      activeBg: 'seaBlue.35',
+      activeColor: 'white'
     },
     notifications: {
       container: {
         variant: 'solid',
         color: 'white',
+        hoverBg: 'seaBlue.25',
+        hoverColor: 'white',
+        activeBg: 'seaBlue.35',
         borderColor: 'transparent'
       },
       icon: {
@@ -131,7 +149,11 @@ const variants = {
     },
     services: {
       button: {
-        color: 'white'
+        color: 'white',
+        hoverBg: 'seaBlue.25',
+        hoverColor: 'white',
+        activeBg: 'seaBlue.35',
+        activeColor: 'white'
       },
       list: {
         variant: 'blue'

package/src/heading/heading.types.ts

@@ -12,7 +12,7 @@ export type HeadingProps = SystemProps &
     /** Alias for textDecoration prop. @deprecated */
     decoration?: TypographyProps['textDecoration']
     /** Displays given text if no children are provided. */
-    text?: React.ReactText
+    text?: React.ReactNode
     /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight']
   }

package/src/input/input.tsx

@@ -94,6 +94,11 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     onChangeProp?.(e)
   }
 
+  function onAutoCompleteSelect(value: string) {
+    const e = { target: { value } }
+    onChange(e as unknown as ChangeEvent)
+  }
+
   const aliasedProps = filterUndefined({
     'aria-disabled': disabled,
     bg: readOnly ? inputColors.disabled : undefined,
@@ -163,7 +168,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
           <Popover.Content>
             <List>
               {autoCompleteOptions.filter(filterAutoCompleteOptions).map((i: string) => (
-                <List.Item cursor="pointer" hoverBg="skyBlue.hover" key={i} onClick={() => setValueInternal(i)}>
+                <List.Item cursor="pointer" hoverBg="skyBlue.hover" key={i} onClick={() => onAutoCompleteSelect(i)}>
                   {i}
                 </List.Item>
               ))}

package/src/input/inputInput.tsx

@@ -36,7 +36,7 @@ export const InputInput = vui<'input', InputInputProps>((props, ref) => {
   return (
     <InputInputBase
       aria-label="input-text"
-      autoComplete="false"
+      autoComplete="off"
       className={cs('vui-inputInput', className)}
       ref={ref}
       {...styles.input}