@veracity/vui 2.26.0-beta.2 → 2.26.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.26.0-beta.2",
+  "version": "2.26.0-beta.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",
@@ -25,22 +25,22 @@
     "@xstyled/styled-components": "2.5.0",
     "@xstyled/system": "2.5.0",
     "@xstyled/util": "2.2.3",
-    "react-focus-lock": "2.9.7",
+    "react-focus-lock": "2.12.1",
     "react-slider": "2.0.6",
     "styled-components": "5.3.11",
     "tippy.js": "6.3.7"
   },
   "devDependencies": {
-    "@types/node": "^20.11.16",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/node": "^20.16.1",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "@types/react-slider": "^1.3.6",
     "@veracity/eslint-config": "*",
     "@veracity/prettier-config": "*",
     "@veracity/tsconfig": "*",
-    "eslint": "^8.56.0",
-    "prettier": "^3.2.5",
-    "rimraf": "^5.0.5"
+    "eslint": "^8.57.0",
+    "prettier": "^3.3.3",
+    "rimraf": "^6.0.1"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",

package/src/chat/chat.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 
 import Box from '../box'
-import { omitThemingProps, useStyleConfig, vui, VuiComponent } from '../core'
+import { omitThemingProps, styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { Tag } from '../tag'
 import { cs } from '../utils'
 import { ChatInputStatus, ChatProps } from './chat.types'

package/src/chat/chat.types.ts

@@ -45,6 +45,8 @@ export type ChatInputProps = Omit<BoxProps, 'size' | 'variant'> & {
 
 export type ChatInputButtonProps = Omit<ButtonProps, 'size'> & {
   status?: ChatInputStatus
+  onSend?: () => void
+  onStop?: () => void
 }
 
 export type ChatMessageProps = MessageProps & {

package/src/chat/chatInput.tsx

@@ -2,13 +2,37 @@ import { KeyboardEvent, useEffect, useState } from 'react'
 
 import Box from '../box'
 import Button from '../button'
-import { KeyboardKeys, useStyleConfig, vui } from '../core'
+import { KeyboardKeys, styled, useStyleConfig, vui } from '../core'
 import Icon from '../icon'
-import Textarea from '../textarea'
+import { inputColors } from '../input/consts'
+import HelpText from '../input/helpText'
 import { cs } from '../utils'
 import { ChatInputProps, ChatInputStatus } from './chat.types'
 import ChatInputButton from './chatInputButton'
 
+const CustomTextarea = styled.textareaBox`
+  border-radius: none;
+  border-width: 0;
+  outline: none;
+  padding: 0 8px;
+  resize: none;
+  transition-duration: 0;
+  width: 100%;
+  min-height: 1.5em;
+  overflow-y: hidden;
+
+  &::placeholder {
+    padding-top: 8px;
+  }
+
+  /* Disabled state styles */
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: sandstone.79;
+    border-color: sandstone.79;
+  }
+`
 /**
  * Displays a chat interface with messages and actions.
  */
@@ -33,6 +57,8 @@ export const ChatInput = vui<'input', ChatInputProps>((props, ref) => {
   }, [status])
 
   const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === KeyboardKeys.Enter && !value?.length) return e.preventDefault()
+
     if (e.key === KeyboardKeys.Enter && e.ctrlKey) {
       e.stopPropagation()
       if (value?.length && status === ChatInputStatus.Default) onSend?.(value)
@@ -43,38 +69,64 @@ export const ChatInput = vui<'input', ChatInputProps>((props, ref) => {
     }
   }
 
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const textarea = e.target
+    textarea.placeholder = ''
+
+    // Dynamically adjust the height of the textarea
+    textarea.style.height = 'auto' // Set the height based on scrollHeight
+    textarea.style.maxHeight = 'auto' // Reset the height
+    textarea.style.height = `${textarea.scrollHeight}px` // Set the height based on scrollHeight
+    textarea.style.maxHeight = `${textarea.scrollHeight}px` // Set the height based on scrollHeight
+    textarea.style.lineHeight = '2.2' // Set the height based on scrollHeight
+
+    // Update the value
+    if (status === ChatInputStatus.Default) {
+      setValue(textarea.value)
+    }
+  }
+
   const isDisabled = status === ChatInputStatus.Disabled
 
   return (
     <Box className={cs('vui-chat-input')} justifyContent="space-between" ref={ref} {...styles?.input} {...rest}>
-      {!!onNewTopicClick && <Button icon="falPlus" mr={0.5} onClick={() => onNewTopicClick?.()} />}
+      {!!onNewTopicClick && <Button icon="falPlus" mr={1} onClick={() => onNewTopicClick?.()} />}
       {status === ChatInputStatus.Processing ? (
-        <Box borderColor="sandstone.79" borderWidth={1} center justifyContent="flex-start" py={0.5} w="100%">
+        <Box borderColor={inputColors.border} borderWidth={1} center justifyContent="flex-start" py={0.5} w="100%">
           <Icon mx={1} name="fadSpinnerThird" pathFill={['blue.40', 'blue.60']} size="lg" variant="spinning" />
           <Box>{processingMessage}</Box>
         </Box>
       ) : (
-        <Textarea
-          disabled={isDisabled}
-          helpText={helpText}
-          onChange={e => status === ChatInputStatus.Default && setValue(e.target.value)}
-          onKeyDown={onKeyDown}
-          placeholder={placeholder}
-          resize="vertical"
-          value={value}
-          w="100%"
-        />
+        <Box column w="100%">
+          <Box
+            borderColor={inputColors.border}
+            borderWidth={1}
+            center
+            focusWithinRingColor={inputColors.focus}
+            justifyContent="flex-start"
+            w="100%"
+          >
+            <CustomTextarea
+              disabled={isDisabled}
+              onChange={handleTextareaChange}
+              onFocus={handleTextareaChange}
+              onKeyDown={onKeyDown as any}
+              placeholder={placeholder}
+              value={value}
+            />
+            <ChatInputButton
+              disabled={!value?.length}
+              h="100%"
+              onSend={() => {
+                if (value?.length) onSend?.(value)
+              }}
+              onStop={onStop}
+              status={status as ChatInputStatus}
+            />
+          </Box>
+          {!!helpText && <HelpText>{helpText}</HelpText>}
+        </Box>
       )}
-
-      <ChatInputButton
-        disabled={!value?.length}
-        onClick={() => {
-          if (status === ChatInputStatus.Default) {
-            if (value?.length) onSend?.(value)
-          } else onStop?.()
-        }}
-        status={status as ChatInputStatus}
-      />
     </Box>
   )
 })

package/src/chat/chatInputButton.tsx

@@ -8,11 +8,22 @@ import { ChatInputButtonProps, ChatInputStatus } from './chat.types'
 export const ChatInputButton = vui<'button', ChatInputButtonProps>((props, ref) => {
   const styles = useStyleConfig('Chat', props)
 
-  const { status = 'default', onClick } = props
+  const { status = 'default', onSend, onStop } = props
 
-  const icon = status === ChatInputStatus.Processing ? 'falStopCircle' : 'falChevronCircleRight'
+  const icon = status === ChatInputStatus.Processing && onStop ? 'falStopCircle' : 'falChevronCircleRight'
 
-  return <Button icon={icon} ml={0.5} onClick={onClick} ref={ref} variant="tertiaryDark" {...styles?.inputButton} />
+  return (
+    <Button
+      disabled={status === ChatInputStatus.Disabled || (status === ChatInputStatus.Processing && !onStop)}
+      h="100%"
+      icon={icon}
+      ml={1}
+      onClick={() => (status === ChatInputStatus.Processing ? onStop?.() : onSend?.())}
+      ref={ref}
+      variant="tertiaryDark"
+      {...styles?.inputButton}
+    />
+  )
 })
 
 ChatInputButton.displayName = 'ChatInputButton'

package/src/core/vui.ts

@@ -6,7 +6,7 @@ import { PropsOf, RefPropsOf } from '../utils'
  * Component creation utility, which combines forwardRef, memo and ensures correct typing with all props included.
  * Config object allows toggling memoization and providing custom 'areEqual' function.
  */
-export function vui<C extends React.ElementType, Props = {}>(
+export function vui<C extends React.ElementType, Props = object>(
   component: React.ForwardRefRenderFunction<any, PropsOf<C, Props>>,
   config?: VuiComponentConfig<C, Props>,
 ) {
@@ -20,7 +20,7 @@ export function vui<C extends React.ElementType, Props = {}>(
 }
 
 /** VUI component type, which allows element props inference and extension, 'as' and 'ref'. */
-export type VuiComponent<C extends ElementType, Props = {}> = {
+export type VuiComponent<C extends ElementType, Props = object> = {
   // 'as' component call signature
   <AsC extends ElementType>(
     props: PropsWithChildren<RefPropsOf<AsC, Props>> & {
@@ -35,7 +35,7 @@ export type VuiComponent<C extends ElementType, Props = {}> = {
 }
 
 /** Config for VUI component creator helper, which allows toggling memoization and 'areEqual' function. */
-export type VuiComponentConfig<C extends ElementType, Props = {}> = {
+export type VuiComponentConfig<C extends ElementType, Props = object> = {
   isMemo?: boolean
   memoCompare?: (
     prevProps: Readonly<PropsWithChildren<PropsWithoutRef<PropsOf<C, Props>>>>,
@@ -47,7 +47,7 @@ export type VuiComponentConfig<C extends ElementType, Props = {}> = {
  * @deprecated Use FC or plain functions instead. If you need typing for HTML attributes of a given element,
  * use PropsOf type, like: type MyBoxProps = PropsOf<'div', MyProps>
  */
-export type VC<C extends ElementType, Props = {}> = {
+export type VC<C extends ElementType, Props = object> = {
   (props: PropsOf<C, Props>): ReactElement<any, any> | null
 
   defaultProps?: Partial<PropsOf<C, Props>>

package/src/header/headerCreateAccount.tsx

@@ -16,7 +16,7 @@ export const HeaderCreateAccount = vui<'div', HeaderCreateAccountProps>((props,
 
   const screenProps = isMobile ? { borderBottom: '1px solid sandstone.main', p: 2 } : { ml: 3 }
 
-  const linkVariant = isMobile ? 'dark' : styles?.link?.variant ?? 'dark'
+  const linkVariant = isMobile ? 'dark' : (styles?.link?.variant ?? 'dark')
 
   return (
     <Box
@@ -30,7 +30,7 @@ export const HeaderCreateAccount = vui<'div', HeaderCreateAccountProps>((props,
     >
       {children ?? (
         <>
-          <T size="sm" {...styles.text} color={isMobile ? 'darkBlue.main' : styles?.text?.color ?? 'darkBlue.main'}>
+          <T size="sm" {...styles.text} color={isMobile ? 'darkBlue.main' : (styles?.text?.color ?? 'darkBlue.main')}>
             New to Veracity?
           </T>
 

package/src/icons/types.ts

@@ -25,7 +25,8 @@ export type IconDetails = [
   string | string[], // svgPathData
 ]
 
-export type VuiIcon = keyof VuiIcons
-
 /** Base icons collection, which can be extended by the consumer. */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface VuiIcons extends Record<BaseIcon, IconDefinition> {}
+
+export type VuiIcon = keyof VuiIcons

package/src/message/message.tsx

@@ -19,7 +19,7 @@ export const Message = vui<'span', MessageProps>((props, ref) => {
     <MessageBase className={cs('vui-message', className)} ref={ref} {...styles} {...rest}>
       <Box>
         {avatar ? (
-          <Avatar mr="8px" {...avatar} />
+          <Avatar mr="16px" {...avatar} />
         ) : (
           <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={styles.fontSize} />
         )}

package/src/spinner/spinner.tsx

@@ -37,7 +37,7 @@ export const Spinner = vui<'div', SpinnerProps>((props, ref) => {
 
   const circleProps = filterUndefined({
     borderColor: emptyColor,
-    borderWidth: isCustomSize ? thickness ?? 4 : thickness,
+    borderWidth: isCustomSize ? (thickness ?? 4) : thickness,
     h: isCustomSize ? size : undefined,
     w: isCustomSize ? size : undefined,
   })

package/src/theme/types.ts

@@ -23,7 +23,7 @@ export type ZIndex = keyof VuiTheme['zIndices']
 export type VuiThemeDefaults = typeof defaultTheme
 
 /** Can be extended to add new properties to the theme or override default ones  */
-export interface VuiThemeExtensions {}
+export type VuiThemeExtensions = object
 
 /** Defines variant and size types of each component connected to the theme. */
 export type ThemingProps<ThemeComponent extends string = string> = {

package/src/theme/vui.d.ts

@@ -3,5 +3,5 @@ import { VuiTheme } from './types'
 import 'styled-components'
 
 declare module 'styled-components' {
-  export interface DefaultTheme extends VuiTheme {}
+  export type DefaultTheme = VuiTheme
 }

package/src/tree/treeItem.tsx

@@ -69,6 +69,7 @@ export const TreeItem = vui<'li', TreeItemProps>((props, ref) => {
 
     const target = e.target as HTMLDivElement
     const active = target?.closest('.vui-tree')?.getElementsByClassName('vui-treeItem-active')[0] as HTMLDivElement
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     active ? (active.style.backgroundColor = 'transparent') : null
 
     onClickTreeItem?.(id)

package/src/utils/assertion.ts

@@ -8,6 +8,7 @@ export function isArray<T>(value: any): value is T[] {
 }
 
 /** Is value a function. */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export function isFunction<T extends Function = Function>(value: any): value is T {
   return typeof value === 'function'
 }

package/src/utils/types.ts

@@ -52,10 +52,10 @@ export type MouseEvent<T = HTMLElement> = React.MouseEvent<T>
 export type MouseEventHandler<T = HTMLElement> = React.MouseEventHandler<T>
 
 /** Merges component/element base props and custom props */
-export type PropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithoutRef<C>, Props>
+export type PropsOf<C extends ElementType, Props = object> = RightJoinProps<ComponentPropsWithoutRef<C>, Props>
 
 /** Merges component/element base props and custom props including ref */
-export type RefPropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithRef<C>, Props>
+export type RefPropsOf<C extends ElementType, Props = object> = RightJoinProps<ComponentPropsWithRef<C>, Props>
 
 /** Render props of component's children. */
 export type RenderProps<P> = React.ReactNode | ((props: P) => React.ReactNode)