@veracity/vui 2.21.0 → 2.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.21.0",
+  "version": "2.21.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",

package/src/select/select.tsx

@@ -27,6 +27,7 @@ export function Select(props: SelectProps) {
     defaultValue,
     disabled,
     errorText,
+    closeOnScroll,
     helpText,
     id: idProp,
     isInvalid,
@@ -73,9 +74,7 @@ export function Select(props: SelectProps) {
     variant,
     ...selectProps,
   }
-  const onQueryChange = (e: any) => {
-    setQuery(e.target.value?.toLowerCase())
-  }
+  const onQueryChange = (e: any) => setQuery(e.target.value?.toLowerCase())
 
   const filterOptions = (i: SelectOptionData) =>
     !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query)
@@ -115,7 +114,9 @@ export function Select(props: SelectProps) {
             )}
             <SelectGroup maxH={maxHeight} tabIndex={1000}>
               {children ??
-                filteredOptions?.map?.(option => <SelectOption key={option.value} title={option.text} {...option} />)}
+                filteredOptions?.map?.(option => (
+                  <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />
+                ))}
             </SelectGroup>
           </SelectContent>
         </>

package/src/select/select.types.ts

@@ -24,6 +24,8 @@ export type SelectProps = ThemingProps<'Select'> &
   UseSelectProps & {
     /** Select cannot be opened and is styled accordingly. */
     disabled?: boolean
+    /** Hiding the options list on scroll event. Recommended for scrollable containers. */
+    closeOnScroll?: boolean
     /** Socket displaying error text below an input. */
     errorText?: string | React.ReactNode
     /** Socket displaying help text below an input. */
@@ -64,6 +66,8 @@ export type SelectOptionData = {
 }
 
 export type SelectOptionProps = ListItemProps & {
+  /** Hiding the options list on scroll event. */
+  closeOnScroll?: boolean
   /** Currently selected value. Can be a string/number or array of those when using 'isMultiple'.  */
   value?: SelectValue
   /** Hover title text. */

package/src/select/selectOption.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useEffect } from 'react'
 
 import { Checkbox } from '../checkbox'
 import { useStyleConfig, vui } from '../core'
@@ -14,13 +14,15 @@ import { SelectOptionProps } from './select.types'
  * 'onChange' is triggered with a modified click event, which adds 'value' and 'name' properties.
  */
 export const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {
-  const { children, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props
+  const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props
   const { instance } = usePopoverContext() ?? {}
   const { isMultiple, name, onChange, value } = useSelectContext() ?? {}
   const styles = useStyleConfig('Select', useSelectContext())
 
   const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp
 
+  const hide = () => instance?.hide()
+
   const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => {
     const nativeEvent = e.nativeEvent || e
     const clonedEvent = new (nativeEvent.constructor as any)(nativeEvent.type, nativeEvent)
@@ -32,11 +34,20 @@ export const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {
 
     onClickProp?.(e as MouseEvent<HTMLLIElement>)
     onChange?.(clonedEvent)
-    !isMultiple && instance?.hide()
+    !isMultiple && hide()
   })
 
   const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))
 
+  // Hiding the popover on scroll
+  useEffect(() => {
+    if (closeOnScroll) document.addEventListener('scroll', hide, true)
+
+    return () => {
+      if (closeOnScroll) document.removeEventListener('scroll', hide, true)
+    }
+  }, [closeOnScroll])
+
   return (
     <ListItem
       activeBg="skyBlue.active"