@veracity/vui 2.21.3 → 2.21.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.21.3",
+  "version": "2.21.4",
   "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/select/select.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useId, useState } from 'react'
 
 import { Box } from '../box'
-import { useStyleConfig } from '../core'
 import { Input } from '../input'
 import { helpTextSize } from '../input/consts'
 import HelpText from '../input/helpText'
@@ -97,7 +96,7 @@ export function Select(props: SelectProps) {
       <Popover matchWidth {...rest}>
         <>
           {selectButton ?? <SelectButton {...selectButtonProps} />}
-          <SelectContent>
+          <SelectContent overflow="hidden">
             {showOptionsFilter && (
               <Box mr={2}>
                 <Input
@@ -112,7 +111,7 @@ export function Select(props: SelectProps) {
                 />
               </Box>
             )}
-            <SelectGroup maxH={maxHeight} tabIndex={1000}>
+            <SelectGroup maxH={maxHeight} overflowY="auto" tabIndex={1000}>
               {children ??
                 filteredOptions?.map?.(option => (
                   <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />

package/src/select/selectGroup.tsx

@@ -11,7 +11,7 @@ export const SelectGroup = vui<'ul', SelectGroupProps>((props, ref) => {
   const { className, ...rest } = props
   const styles = useStyleConfig('Select', useSelectContext())
 
-  return <List className={cs('vui-selectGroup', className)} ref={ref} {...styles.group} {...rest} />
+  return <List className={cs('vui-selectGroup', 'vui-allowScroll', className)} ref={ref} {...styles.group} {...rest} />
 }) as VuiComponent<'ul', SelectGroupProps> & {
   Divider: typeof ListDivider
   Heading: typeof ListHeading

package/src/select/selectOption.tsx

@@ -39,7 +39,7 @@ export const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {
 
   const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))
 
-  const onScroll = (e: Event) => !(e.target as HTMLElement)?.className?.includes('vui-selectContent') && hide()
+  const onScroll = (e: Event) => !(e.target as HTMLElement)?.className?.includes('vui-allowScroll') && hide()
 
   // Hiding the popover on scroll
   useEffect(() => {