@homefile/components-v2 2.24.21 → 2.24.22

package/dist/components/forms/dynamicForm/fields/CurrencyField.js

@@ -5,7 +5,7 @@ import { Flex, Input } from '@chakra-ui/react';
 import { FormIcon, LabeledField } from '../../..';
 export const CurrencyField = ({ label, id, icon, placeholder, value, }) => {
     const { control } = useFormContext();
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field }) => {
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", w: "full", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field }) => {
                     return (_jsx(LabeledField, { label: label, children: _jsx(NumericFormat, Object.assign({}, field, { customInput: Input, thousandSeparator: true, decimalScale: 2, fixedDecimalScale: true, prefix: "$", placeholder: placeholder, textAlign: "right", _placeholder: { color: 'gray.2' }, onValueChange: ({ floatValue }) => {
                                 field.onChange(floatValue);
                             } })) }));

package/dist/components/forms/dynamicForm/fields/NumberField.js

@@ -5,7 +5,7 @@ import { FieldDescription, LabeledField } from '../../..';
 export const NumberField = ({ description, icon, id, label, placeholder, value, }) => {
     const { control } = useFormContext();
     const hasDescriptionAndIcon = Boolean(description) && Boolean(icon);
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [hasDescriptionAndIcon && (_jsx(FieldDescription, { description: description, icon: icon })), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", w: "full", children: [hasDescriptionAndIcon && (_jsx(FieldDescription, { description: description, icon: icon })), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                     return (_jsx(LabeledField, { label: label, children: _jsx(Input, { onChange: (e) => {
                                 const value = e.target.valueAsNumber;
                                 const isNumber = !isNaN(value);

package/dist/components/forms/dynamicForm/fields/TextField.js

@@ -4,7 +4,7 @@ import { Flex } from '@chakra-ui/react';
 import { FormIcon, TextInput } from '../../..';
 export const TextField = ({ id, icon, placeholder = '', label, type = 'text', showIcon = false, value, }) => {
     const { control } = useFormContext();
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [showIcon && icon && _jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", w: "full", children: [showIcon && icon && _jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                     return (_jsx(TextInput, { handleChange: onChange, placeholder: placeholder, type: type, value: value, label: label }));
                 } })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.24.21",
+  "version": "2.24.22",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/forms/dynamicForm/fields/CurrencyField.tsx

@@ -1,5 +1,5 @@
 import { Controller, useFormContext } from 'react-hook-form'
-import {NumericFormat} from 'react-number-format'
+import { NumericFormat } from 'react-number-format'
 import { Flex, Input } from '@chakra-ui/react'
 import { TextFieldI } from '@/interfaces'
 import { FormIcon, LabeledField } from '@/components'
@@ -14,13 +14,13 @@ export const CurrencyField = ({
   const { control } = useFormContext()
 
   return (
-    <Flex align="center" gap="base" flex="auto">
+    <Flex align="center" gap="base" flex="auto" w="full">
       <FormIcon icon={icon} />
       <Controller
         control={control}
         name={id}
         defaultValue={value}
-        render={({ field}) => {
+        render={({ field }) => {
           return (
             <LabeledField label={label}>
               <NumericFormat

package/src/components/forms/dynamicForm/fields/NumberField.tsx

@@ -14,7 +14,7 @@ export const NumberField = ({
   const { control } = useFormContext()
   const hasDescriptionAndIcon = Boolean(description) && Boolean(icon)
   return (
-    <Flex align="center" gap="base" flex="auto">
+    <Flex align="center" gap="base" flex="auto" w="full">
       {hasDescriptionAndIcon && (
         <FieldDescription description={description} icon={icon} />
       )}

package/src/components/forms/dynamicForm/fields/TextField.tsx

@@ -14,7 +14,7 @@ export const TextField = ({
 }: TextFieldI) => {
   const { control } = useFormContext()
   return (
-    <Flex align="center" gap="base" flex="auto">
+    <Flex align="center" gap="base" flex="auto" w="full">
       {showIcon && icon && <FormIcon icon={icon} />}
       <Controller
         control={control}