@veracity/vui 2.5.1 → 2.6.1

package/src/select/select.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
+import { Box } from '../box'
+import { Input } from '../input'
 import { Popover } from '../popover'
 import { __DEV__ } from '../utils'
 import { SelectProvider } from './context'
-import { SelectProps } from './select.types'
+import { SelectOptionData, SelectProps } from './select.types'
 import SelectButton from './selectButton'
 import SelectContent from './selectContent'
 import SelectGroup from './selectGroup'
@@ -29,6 +31,7 @@ export function Select(props: SelectProps) {
     placeholder = 'Please select',
     readOnly,
     selectButton,
+    showOptionsFilter,
     size,
     value,
     variant,
@@ -41,6 +44,9 @@ export function Select(props: SelectProps) {
     console.error('<Select /> is used with isMultiple but its value is not an array: ', value)
   }
 
+  const [query, setQuery] = useState<string>('')
+  const [filteredOptions, setFilteredOptions] = useState(options)
+
   const context = {
     disabled,
     isInvalid,
@@ -53,6 +59,16 @@ export function Select(props: SelectProps) {
     variant,
     ...selectProps
   }
+  const onQueryChange = (e: any) => {
+    setQuery(e.target.value?.toLowerCase())
+  }
+
+  const filterOptions = (i: SelectOptionData) =>
+    !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query)
+
+  useEffect(() => {
+    setFilteredOptions(options?.filter(filterOptions))
+  }, [query])
 
   return (
     <SelectProvider value={context}>
@@ -60,9 +76,22 @@ export function Select(props: SelectProps) {
         <>
           {selectButton ?? <SelectButton />}
           <SelectContent>
+            {showOptionsFilter && (
+              <Box mr={2}>
+                <Input
+                  iconLeft="culFilterAlt"
+                  m={1}
+                  mt={0}
+                  onChange={onQueryChange}
+                  placeholder="Filter…"
+                  size="sm"
+                  value={query}
+                />
+              </Box>
+            )}
             <SelectGroup maxH={maxHeight} tabIndex={1000}>
               {children ??
-                options?.map?.(option => <SelectOption key={option.value} title={option.text} {...option} />)}
+                filteredOptions?.map?.(option => <SelectOption key={option.value} title={option.text} {...option} />)}
             </SelectGroup>
           </SelectContent>
         </>

package/src/select/select.types.ts

@@ -38,6 +38,8 @@ export type SelectProps = ThemingProps<'Select'> &
     readOnly?: boolean
     /** Custom select button slot. */
     selectButton?: ReactNode
+    /** Displays a filter input to limit the number of options. */
+    showOptionsFilter?: boolean
   }
 
 export type SelectOptionData = {

package/src/select/selectButton.tsx

@@ -45,7 +45,6 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
       as={LineButton}
       bg="white"
       className={cs('vui-selectButton', className)}
-      colorScheme="prussian"
       disabled={disabled}
       focusRing={2}
       fontWeight="regular"

package/src/sidemenu/consts.ts

@@ -1,8 +1,3 @@
 export const border = '1px solid lightgray'
 
 export const expandedWidth = 64
-
-export const right = {
-  expanded: 16,
-  collapsed: 34
-}

package/src/sidemenu/sidemenu.tsx

@@ -5,7 +5,7 @@ import Button from '../button'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
 import { cs, filterUndefined } from '../utils'
-import { border, expandedWidth, right } from './consts'
+import { border, expandedWidth } from './consts'
 import { SidemenuProvider } from './context'
 import { SidemenuItemProps, SidemenuProps } from './sidemenu.types'
 import SidemenuItem from './sidemenuItem'
@@ -32,13 +32,11 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
     setIsExpandedInternal(isExpanded)
   }, [isExpanded])
 
-  const toggle = () => {
-    setIsExpandedInternal(!isExpandedInternal)
-  }
+  const onToggle = () => setIsExpandedInternal(!isExpandedInternal)
 
   const w = isExpandedInternal ? width : expandedWidth
-  const icon = isExpandedInternal ? 'falArrowLeft' : 'falArrowRight'
-  const iconRight = isExpandedInternal ? right.expanded : right.collapsed
+  const icon = `falArrow${isExpandedInternal ? 'Left' : 'Right'}`
+  const justifyContent = isExpandedInternal ? 'flex-end' : 'center'
 
   return (
     <SidemenuProvider value={context}>
@@ -49,8 +47,8 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
             : children}
         </Box>
         <Box borderTop={border} className="vui-sidemenu-bottom" w="100%">
-          <Button borderRadius={0} onClick={toggle} variant="tertiaryDark" w="100%">
-            <Icon name={icon} position="absolute" right={iconRight} />
+          <Button borderRadius={0} justifyContent={justifyContent} onClick={onToggle} variant="tertiaryDark" w="100%">
+            <Icon name={icon} />
           </Button>
         </Box>
       </SidemenuBase>

package/src/system/effects.ts

@@ -15,6 +15,7 @@ export type OpacityProps = {
 type BoxShadowProp = SystemProp<ShadowGetter | AnyString, VuiTheme>
 export type BoxShadowProps = {
   boxShadow?: BoxShadowProp
+  elevation?: BoxShadowProp
   hoverBoxShadow?: BoxShadowProp
 }
 

package/src/tabs/consts.ts

@@ -0,0 +1,17 @@
+import { Dict } from '../utils'
+
+export const tabsColors = {
+  activeBg: 'skyBlue.main',
+  border: 'sandstone.main',
+  color: 'sandstone.10',
+  hover: 'skyBlue.hover',
+  main: 'seaBlue.main'
+}
+
+export const iconSizeMapper: Dict = {
+  sm: 'xs',
+  md: 'sm',
+  lg: 'md',
+  xl: 'lg',
+  xxl: 'xl'
+}

package/src/tabs/tab.tsx

@@ -11,13 +11,10 @@ export const TabBase = styled.divBox`
 /**
  * Implements a Tab component
  */
-export const Tab = vui<'div', TabProps>((props, ref) => {
-  const { children, className } = props
-  return (
-    <TabBase className={cs('vui-tab', className)} ref={ref}>
-      {children}
-    </TabBase>
-  )
-})
+export const Tab = vui<'div', TabProps>(({ children, className }, ref) => (
+  <TabBase className={cs('vui-tab', className)} ref={ref}>
+    {children}
+  </TabBase>
+))
 
 export default Tab

package/src/tabs/tabs.tsx

@@ -13,7 +13,7 @@ export const TabsBase = styled.divBox<TabsProps>`
 `
 
 /**
- * Implements Tabs navigation to switch between views.
+ * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**
  */
 export const Tabs = vui<'div', TabsProps>((props, ref) => {
   const { activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props

package/src/tabs/tabs.types.ts

@@ -24,6 +24,7 @@ export type TabProps = SystemProps &
     id?: number
     title: ReactNode
     disabled?: boolean
+    className?: string
     onClick?: () => void
   }
 

package/src/tabs/tabsNavBar.tsx

@@ -5,16 +5,11 @@ import { vui } from '../core'
 import { Icon } from '../icon'
 import { List, ListItem } from '../list'
 import { cs, Dict } from '../utils'
-import { NavBarIconSize, TabNavBarProps } from './tabs.types'
+import { iconSizeMapper, tabsColors } from './consts'
+import { NavBarIconSize, TabNavBarProps, TabProps } from './tabs.types'
 import theme from './theme'
 
-const iconSizeMapper: Dict = {
-  sm: 'xs',
-  md: 'sm',
-  lg: 'md',
-  xl: 'lg',
-  xxl: 'xl'
-}
+const { activeBg, border, color, hover, main } = tabsColors
 
 export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
   const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props
@@ -28,9 +23,11 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
   const py = sizes[size ?? 'md'].tabsNavBar.py
   const iconMarginRight = size === 'xxl' ? '16px' : '8px'
 
+  const isActive = (tab: TabProps) => !tab.disabled && tab.id === activeNavItem
+
   return (
     <List
-      borderBottom={showBorder ? '1px solid sandstone.79' : 'none'}
+      borderBottom={showBorder ? `1px solid ${border}` : 'none'}
       className={cs('vui-tabsNavBar')}
       display="flex"
       isInteractive
@@ -40,14 +37,16 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
     >
       {tabs?.map?.(tab => (
         <ListItem
-          activeBg="skyBlue.90"
+          activeBg={tab.disabled ? undefined : activeBg}
+          bg="white"
           className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}
-          color="seaBlue.main"
+          color={isActive(tab) ? main : color}
           disabled={tab.disabled}
           display="inline-flex"
           fontSize={fontSize}
+          fontWeight={500}
           h={h}
-          hoverBg="skyBlue.85"
+          hoverBg={tab.disabled ? undefined : hover}
           key={tab.id}
           onClick={() => onNavItemClick?.(tab.id || 0)}
           position="relative"
@@ -58,10 +57,10 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
             {!!tab.icon && <Icon mr={iconMarginRight} name={tab.icon} size={iconSize} />}
             {tab.title}
           </Box>
-          {!tab.disabled && tab.id === activeNavItem && (
+          {isActive(tab) && (
             <Box
               animation={animationDirection}
-              bg="seaBlue.main"
+              bg={main}
               bottom="-1px"
               h={borderWidth}
               left={0}

package/src/theme/foundations/shadows.ts

@@ -3,6 +3,7 @@ import { grey } from './colors'
 
 const greyLight = hexToRGBA(grey[80], 0.4)
 const greyDark = hexToRGBA(grey[80], 0.6)
+const modal = hexToRGBA('#000000', 0.15)
 
 export default {
   '0': `0 0 0 0 #fff`,
@@ -21,5 +22,6 @@ export default {
   l1: `-2px 0 5px 0 ${greyLight}`,
   l2: `-4px 0 12px 0 ${greyLight}`,
   l3: `-7px 0 20px 0 ${greyDark}`,
-  l4: `-12px 0 30px 0 ${greyDark}`
+  l4: `-12px 0 30px 0 ${greyDark}`,
+  modal: `0 12px 30px 0 ${modal}`
 }

package/src/theme/types.ts

@@ -4,6 +4,7 @@ export type Animation = keyof VuiTheme['animations']
 export type Border = keyof VuiTheme['borders']
 export type Color = keyof VuiTheme['colors']
 export type Component = keyof VuiTheme['components']
+export type Elevation = keyof VuiTheme['shadows']
 export type Font = keyof VuiTheme['fonts']
 export type FontSize = keyof VuiTheme['fontSizes']
 export type FontWeight = keyof VuiTheme['fontWeights']

package/src/utils/styles.ts

@@ -5,6 +5,17 @@ export function cs(...classNames: any[]) {
   return classNames.filter(Boolean).join(' ')
 }
 
+/** Parses HSL color code. */
+export function parseHSL(color: string) {
+  const regexp = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g
+  const res = regexp?.exec?.(color)?.slice?.(1)
+  return { h: Number(res?.[0]) || 0, s: Number(res?.[1]) || 0, l: Number(res?.[2]) || 0 }
+}
+
+/** Builds RGBA string. */
+export const buildRGBA = (r: number, g: number, b: number, alpha?: number) =>
+  alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
+
 /** Converts hex color value to rgb with optional alpha property. */
 export function hexToRGBA(hex: string, alpha?: number) {
   let hexStr = hex
@@ -21,7 +32,52 @@ export function hexToRGBA(hex: string, alpha?: number) {
   const g = parseInt(hexStr.slice(2, 4), 16)
   const b = parseInt(hexStr.slice(4, 6), 16)
 
-  return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
+  return buildRGBA(r, g, b, alpha)
+}
+
+/** Converts hsl color value to rgb with optional alpha property. */
+export function HSLToRGBA(h: number, s: number, l: number, alpha?: number) {
+  s /= 100
+  l /= 100
+
+  const c = (1 - Math.abs(2 * l - 1)) * s,
+    x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
+    m = l - c / 2
+
+  let r = 0,
+    g = 0,
+    b = 0
+
+  if (0 <= h && h < 60) {
+    r = c
+    g = x
+    b = 0
+  } else if (60 <= h && h < 120) {
+    r = x
+    g = c
+    b = 0
+  } else if (120 <= h && h < 180) {
+    r = 0
+    g = c
+    b = x
+  } else if (180 <= h && h < 240) {
+    r = 0
+    g = x
+    b = c
+  } else if (240 <= h && h < 300) {
+    r = x
+    g = 0
+    b = c
+  } else if (300 <= h && h < 360) {
+    r = c
+    g = 0
+    b = x
+  }
+  r = Math.round((r + m) * 255)
+  g = Math.round((g + m) * 255)
+  b = Math.round((b + m) * 255)
+
+  return buildRGBA(r, g, b, alpha)
 }
 
 /** Styling to add ellipsis for long texts. */