@veracity/vui 2.27.0 → 2.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "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,20 +25,20 @@
     "@xstyled/styled-components": "2.5.0",
     "@xstyled/system": "2.5.0",
     "@xstyled/util": "2.2.3",
-    "react-focus-lock": "2.12.1",
+    "react-focus-lock": "2.13.2",
     "react-slider": "2.0.6",
     "styled-components": "5.3.11",
     "tippy.js": "6.3.7"
   },
   "devDependencies": {
-    "@types/node": "^20.16.1",
-    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^20.17.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-slider": "^1.3.6",
     "@veracity/eslint-config": "*",
     "@veracity/prettier-config": "*",
     "@veracity/tsconfig": "*",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1"
   },

package/src/checkbox/checkbox.tsx

@@ -75,7 +75,7 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
     isIndeterminate,
     label,
     name,
-    onChange,
+    onChange: onChangeProp,
     required,
     value,
     ...rest
@@ -94,9 +94,9 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
     checked !== undefined && setIsChecked(checked)
   }, [checked])
 
-  function handleOnChange(e: ChangeEvent) {
-    setIsChecked(e.target.checked)
-    onChange?.(e)
+  const onChange = (e: ChangeEvent) => {
+    if (checked === undefined) setIsChecked(e.target.checked)
+    onChangeProp?.(e)
   }
 
   const aliasedProps = filterUndefined({
@@ -124,7 +124,7 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
       >
         <CheckboxInput
           className="vui-checkboxInput"
-          onChange={handleOnChange}
+          onChange={onChange}
           ref={inputRef}
           type="checkbox"
           {...{ checked, defaultChecked, disabled, id, name, required, value }}

package/src/checkbox/theme.ts

@@ -5,6 +5,9 @@ const baseStyle = {
     color: checkboxColors.unchecked,
     hoverColor: checkboxColors.hover,
   },
+  container: {
+    alignItems: 'flext-start',
+  },
 }
 
 const defaultProps = {

package/src/core/vui.ts

@@ -13,10 +13,13 @@ export function vui<C extends React.ElementType, Props = object>(
   const { memoCompare, isMemo = true } = config ?? {}
 
   if (isMemo) {
-    return React.memo(React.forwardRef(component), memoCompare as unknown as any) as unknown as VuiComponent<C, Props>
+    return React.memo(
+      React.forwardRef(component as unknown as any),
+      memoCompare as unknown as any,
+    ) as unknown as VuiComponent<C, Props>
   }
 
-  return React.forwardRef(component) as unknown as VuiComponent<C, Props>
+  return React.forwardRef(component as unknown as any) as unknown as VuiComponent<C, Props>
 }
 
 /** VUI component type, which allows element props inference and extension, 'as' and 'ref'. */

package/src/dialog/dialogCloseButton.tsx

@@ -8,7 +8,7 @@ import { DialogCloseButtonProps } from './dialog.types'
 
 /** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */
 export const DialogCloseButton = vui<'button', DialogCloseButtonProps>((props, ref) => {
-  const { className, ...rest } = props
+  const { className, size = 'md', ...rest } = props
   const { onClose } = useDialogContext() ?? {}
   const styles = useStyleConfig('Dialog', useDialogContext())
 
@@ -19,7 +19,7 @@ export const DialogCloseButton = vui<'button', DialogCloseButtonProps>((props, r
       position="absolute"
       ref={ref}
       right={16}
-      size="sm"
+      size={size}
       top={16}
       variant="tertiaryDark"
       {...styles.closeButton}

package/src/message/consts.ts

@@ -6,10 +6,9 @@ export const iconDictionary = {
 }
 
 export const spacingDictionary = {
-  sm: 4,
-  md: 6,
-  lg: 8,
-  xl: 10,
+  sm: 6,
+  md: 8,
+  lg: 10,
 }
 
 export const messageColors = {

package/src/message/message.tsx

@@ -12,7 +12,7 @@ export const MessageBase = styled.divBox`
 
 /** Displays a simple message text. */
 export const Message = vui<'span', MessageProps>((props, ref) => {
-  const { avatar, children, className, text, size = 'lg', variant = 'info', ...rest } = props
+  const { avatar, children, className, text, size = 'md', variant = 'info', ...rest } = props
   const styles = useStyleConfig('Message', props)
 
   return (
@@ -21,7 +21,7 @@ export const Message = vui<'span', MessageProps>((props, ref) => {
         {avatar ? (
           <Avatar mr="16px" {...avatar} />
         ) : (
-          <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={styles.fontSize} />
+          <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={styles.iconSize} />
         )}
         <Box size={styles.fontSize} w="100%" {...(avatar ? avatarStyles : undefined)}>
           {children ?? text}

package/src/message/theme.ts

@@ -4,20 +4,20 @@ const baseStyle = {}
 
 const defaultProps = {
   variant: 'info',
-  size: 'lg',
+  size: 'md',
 }
 
 const sizes = {
   sm: {
-    fontSize: 'xs',
-  },
-  md: {
+    iconSize: 'md',
     fontSize: 'sm',
   },
-  lg: {
+  md: {
+    iconSize: 'md',
     fontSize: 'md',
   },
-  xl: {
+  lg: {
+    iconSize: 'lg',
     fontSize: 'lg',
   },
 }

package/src/select/select.tsx

@@ -101,7 +101,7 @@ export function Select(props: SelectProps) {
             {selectButton ?? <SelectButton {...selectButtonProps} />}
             <SelectContent overflow="hidden">
               {showOptionsFilter && (
-                <Box mr={2}>
+                <Box>
                   <Input
                     iconLeft="falSearch"
                     id={id}
@@ -111,6 +111,7 @@ export function Select(props: SelectProps) {
                     placeholder="Filter…"
                     size={size}
                     value={query}
+                    w="100%"
                   />
                 </Box>
               )}