@saas-ui/forms 2.6.1 → 2.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "description": "Fully functional forms for Chakra UI.",
   "source": "src/index.ts",
   "exports": {
@@ -104,7 +104,7 @@
     "@chakra-ui/react-utils": "^2.0.12",
     "@chakra-ui/utils": "^2.0.15",
     "@hookform/resolvers": "^3.3.4",
-    "@saas-ui/core": "2.5.0",
+    "@saas-ui/core": "2.5.2",
     "react-hook-form": "^7.50.1"
   },
   "peerDependencies": {

package/src/base-field.tsx

@@ -57,8 +57,10 @@ export const useBaseField = (props: BaseFieldProps) => {
 export const BaseField: React.FC<BaseFieldProps> = (props) => {
   const { controlProps, label, help, hideLabel, error } = useBaseField(props)
 
+  const isInvalid = !!error || controlProps.isInvalid
+
   return (
-    <FormControl {...controlProps} isInvalid={!!error}>
+    <FormControl {...controlProps} isInvalid={isInvalid}>
       {label && !hideLabel ? <FormLabel>{label}</FormLabel> : null}
       <Box>
         {props.children}

package/src/create-field.tsx

@@ -46,6 +46,7 @@ const _createField = (
         'isInvalid',
         'isReadOnly',
         'help',
+        'hideLabel',
       ].concat(extraProps)
     )
 

package/src/layout.tsx

@@ -5,11 +5,15 @@ import {
   omitThemingProps,
   SimpleGrid,
   SimpleGridProps,
+  ThemingProps,
+  useStyleConfig,
   useTheme,
 } from '@chakra-ui/react'
 import { cx } from '@chakra-ui/utils'
 
-export interface FormLayoutProps extends SimpleGridProps {}
+export interface FormLayoutProps
+  extends ThemingProps<'SuiFormLayout'>,
+    SimpleGridProps {}
 
 interface FormLayoutItemProps {
   children: React.ReactNode
@@ -24,7 +28,6 @@ FormLayoutItem.displayName = 'FormLayoutItem'
 /**
  * Create consistent field spacing and positioning.
  *
- *
  * Renders form items in a `SimpleGrid`
  * @see https://chakra-ui.com/docs/layout/simple-grid
  *
@@ -37,6 +40,8 @@ export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
     spacing: 4,
   }
 
+  const styles = useStyleConfig('SuiFormLayout', props)
+
   const gridProps = omitThemingProps({
     ...defaultProps,
     ...props,
@@ -46,6 +51,10 @@ export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
     <SimpleGrid
       {...gridProps}
       className={cx('sui-form__layout', props.className)}
+      sx={{
+        ...styles,
+        ...props.sx,
+      }}
     >
       {children}
     </SimpleGrid>

package/src/number-input/number-input.test.tsx

@@ -3,4 +3,6 @@ import * as React from 'react'
 import { render, testStories } from '@saas-ui/test-utils'
 import * as stories from './number-input.stories'
 
-testStories<typeof stories>(stories)
+testStories<typeof stories>(stories, {
+  a11y: false,
+})

package/src/select/select.test.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react'
 
-import { render, testStories } from '@saas-ui/test-utils'
+import { testStories } from '@saas-ui/test-utils'
 import * as stories from './select.stories'
 
 const { MaxHeight, ...rest } = stories
 
-testStories<typeof rest>(rest)
+testStories(rest, {
+  a11y: false,
+})