@sonardigital/carbon-ui 1.2.27 → 1.2.29

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@sonardigital/carbon-ui",
-   "version": "1.2.27",
+   "version": "1.2.29",
    "description": "",
    "main": "src/index.ts",
    "files": [
@@ -59,6 +59,7 @@
       "@mui/material": "^7.3.2",
       "@mui/x-date-pickers": "^8.12.0",
       "@sonardigital/cli": "^1.6.4",
+      "@sonardigital/hooks": "^1.1.6",
       "dayjs": "^1.11.18",
       "eslint-plugin-react": "^7.34.3",
       "eslint-plugin-storybook": "^0.8.0",

package/src/components/form/fields/FormDatePicker.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@mui/material';
+import { FormHelperText, Stack } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import { FormLabel } from '../layout';
 import { FormError } from '../layout/FormError';
@@ -9,12 +9,14 @@ interface FormDatePickerProps extends Omit<
    'value' | 'onChange'
 > {
    name: string;
+   helperText?: string;
    label: string;
 }
 
 export function FormDatePicker({
    name,
    label,
+   helperText,
    ...props
 }: FormDatePickerProps): React.ReactElement {
    return (
@@ -27,6 +29,7 @@ export function FormDatePicker({
                   {fieldState.error && (
                      <FormError label={fieldState.error?.message ?? ''} />
                   )}
+                  {helperText && <FormHelperText>{helperText}</FormHelperText>}
                </Stack>
             </FormLabel>
          )}

package/src/components/form/fields/FormInput.tsx

@@ -1,4 +1,9 @@
-import { Stack, TextField, TextFieldProps } from '@mui/material';
+import {
+   FormHelperText,
+   Stack,
+   TextField,
+   TextFieldProps,
+} from '@mui/material';
 import { Controller } from 'react-hook-form';
 import { FormLabel } from '../layout';
 import { FormError } from '../layout/FormError';
@@ -11,6 +16,7 @@ interface FormInputProps extends TextFieldProps<'standard'> {
 export function FormInput({
    name,
    label,
+   helperText,
    ...props
 }: FormInputProps): React.ReactElement {
    return (
@@ -23,6 +29,9 @@ export function FormInput({
                   {fieldState.error && (
                      <FormError label={fieldState.error?.message ?? ''} />
                   )}
+                  {helperText && (
+                     <FormHelperText>{helperText}</FormHelperText>
+                  )}
                </Stack>
             </FormLabel>
          )}

package/src/components/form/fields/FormMultiselect.tsx

@@ -1,4 +1,4 @@
-import { AutocompleteProps, Stack } from '@mui/material';
+import { AutocompleteProps, FormHelperText, Stack } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import { FormLabel } from '../layout';
 import { FormError } from '../layout/FormError';
@@ -22,6 +22,7 @@ export function FormMultiselect({
    name,
    label,
    options,
+   helperText,
    ...rest
 }: MultiselectAutocompleteProps): React.ReactElement {
    return (
@@ -42,6 +43,9 @@ export function FormMultiselect({
                      {fieldState.error && (
                         <FormError label={fieldState.error?.message ?? ''} />
                      )}
+                     {helperText && (
+                        <FormHelperText>{helperText}</FormHelperText>
+                     )}
                   </Stack>
                </FormLabel>
             );

package/src/components/form/fields/FormNumber.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@mui/material';
+import { FormHelperText, Stack } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import { FormLabel } from '../layout';
 import { FormError } from '../layout/FormError';
@@ -7,12 +7,14 @@ import { NumberInput } from '../../inputs/Number';
 
 interface FormNumberProps extends Omit<NumberProps, 'onChange'> {
    name: string;
+   helperText?: string;
    label: string;
 }
 
 export function FormNumber({
    name,
    label,
+   helperText,
    ...props
 }: FormNumberProps): React.ReactElement {
    return (
@@ -25,6 +27,7 @@ export function FormNumber({
                   {fieldState.error && (
                      <FormError label={fieldState.error?.message ?? ''} />
                   )}
+                  {helperText && <FormHelperText>{helperText}</FormHelperText>}
                </Stack>
             </FormLabel>
          )}

package/src/components/form/fields/FormPassword.tsx

@@ -1,4 +1,4 @@
-import { OutlinedInput, Stack } from '@mui/material';
+import { FormHelperText, OutlinedInput, Stack } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import { FormLabel } from '../layout';
 import { FormError } from '../layout/FormError';
@@ -9,9 +9,11 @@ import { Cursor } from '../../atoms';
 export function FormPassword({
    name,
    label,
+   helperText,
 }: {
    name: string;
    label: string;
+   helperText?: string;
 }): React.ReactElement {
    const [isVisible, setIsVisible] = useState(false);
    return (
@@ -48,6 +50,7 @@ export function FormPassword({
                   {fieldState.error && (
                      <FormError label={fieldState.error?.message ?? ''} />
                   )}
+                  {helperText && <FormHelperText>{helperText}</FormHelperText>}
                </Stack>
             </FormLabel>
          )}

package/src/components/form/fields/FormSelect.tsx

@@ -1,8 +1,10 @@
-import { AutocompleteProps, Stack } from '@mui/material';
+import { AutocompleteProps, FormHelperText, Stack } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import { FormLabel } from '../layout';
 import { FormError } from '../layout/FormError';
 import { SelectAutocomplete } from '../../inputs';
+import { useDebounce } from '@sonardigital/hooks';
+import { useState } from 'react';
 
 // eslint-disable-next-line
 interface SelectAutocompleteProps extends Omit<
@@ -16,6 +18,7 @@ interface SelectAutocompleteProps extends Omit<
 > {
    name: string;
    label: string;
+   onDebounce?: (value: string) => void;
    placeholder?: string;
    options?: { label: string; value: string | number }[];
    helperText?: string;
@@ -26,8 +29,14 @@ export function FormSelect({
    name,
    label,
    options,
+   helperText,
+   onDebounce,
    ...rest
 }: SelectAutocompleteProps): React.ReactElement {
+   const [search, setSearch] = useState('');
+
+   useDebounce(search, 500, onDebounce);
+
    return (
       <Controller
          name={name}
@@ -41,11 +50,15 @@ export function FormSelect({
                         {...rest}
                         options={options}
                         value={value}
+                        onInputChange={(value) => setSearch((value?.target as HTMLInputElement)?.value ?? '')}
                         onChange={onChange}
                      />
                      {fieldState.error && (
                         <FormError label={fieldState.error?.message ?? ''} />
                      )}
+                     {helperText && (
+                        <FormHelperText>{helperText}</FormHelperText>
+                     )}
                   </Stack>
                </FormLabel>
             );

package/src/components/form/fields/FormSwitch.tsx

@@ -1,4 +1,4 @@
-import { Stack, SwitchProps, Typography } from '@mui/material';
+import { FormHelperText, Stack, SwitchProps, Typography } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import { FormError } from '../layout/FormError';
 import { Switch } from '../../inputs/Switch';
@@ -6,11 +6,13 @@ import { Switch } from '../../inputs/Switch';
 interface FormSwitchProps extends SwitchProps {
    name: string;
    label: string;
+   helperText?: string;
 }
 
 export function FormSwitch({
    name,
    label,
+   helperText,
    ...props
 }: FormSwitchProps): React.ReactElement {
    return (
@@ -38,6 +40,7 @@ export function FormSwitch({
                {fieldState.error && (
                   <FormError label={fieldState.error?.message ?? ''} />
                )}
+               {helperText && <FormHelperText>{helperText}</FormHelperText>}
             </Stack>
          )}
       />

package/src/components/form/fields/FormTextArea.tsx

@@ -1,4 +1,5 @@
 import {
+   FormHelperText,
    Stack,
    TextareaAutosize,
    TextareaAutosizeProps,
@@ -11,11 +12,13 @@ import { FormError } from '../layout/FormError';
 interface FormTextareaProps extends TextareaAutosizeProps {
    name: string;
    label: string;
+   helperText?: string;
 }
 
 export function FormTextarea({
    name,
    label,
+   helperText,
    ...props
 }: FormTextareaProps): React.ReactElement {
    const theme = useTheme();
@@ -37,6 +40,7 @@ export function FormTextarea({
                   {fieldState.error && (
                      <FormError label={fieldState.error?.message ?? ''} />
                   )}
+                  {helperText && <FormHelperText>{helperText}</FormHelperText>}
                </Stack>
             </FormLabel>
          )}