@itcase/forms 1.1.28 → 1.1.30

package/dist/itcase-forms.cjs.js

@@ -190,8 +190,8 @@ function useFieldValidationState(props) {
 // looks at what props were in initialProps, if they are there then changes
 function useValidationAppearanceInputProps(props) {
   const {
-    validationStateKey,
-    inputProps
+    inputProps,
+    validationStateKey
   } = props;
 
   // TODO: need to add props that can change during errors in this field
@@ -205,7 +205,7 @@ function useValidationAppearanceInputProps(props) {
     // }
     const updatedInputProps = {};
     if (validationStateKey) {
-      Object.entries(inputProps).forEach(([propKey, propValue]) => {
+      Object.entries(inputProps || {}).forEach(([propKey, propValue]) => {
         // Convert the input property key to "snake_case" format.
         // e.g. "requiredBorderColor" -> "required_border_color".
         const propKeySnake = snakeCase__default.default(propKey);
@@ -1677,12 +1677,6 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
     isDisabled,
     classNameGroupItem,
     fieldProps,
-    iconFill,
-    iconFillHover,
-    iconRevealableHide,
-    iconRevealableShow,
-    iconShape,
-    iconSize,
     inputProps,
     parse,
     showMessage,
@@ -1719,10 +1713,10 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
       }
     }, [onChange, input.onChange]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1759,9 +1753,9 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
       onFocus: input.onFocus
     }, updatedInputProps)), /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
-      size: inputProps.iconSize,
-      iconFill: inputProps.iconFill,
-      SvgImage: isRevealed ? inputProps.iconRevealableHide : inputProps.iconRevealableShow,
+      size: inputProps?.iconSize,
+      iconFill: inputProps?.iconFill,
+      SvgImage: isRevealed ? inputProps?.iconRevealableHide : inputProps?.iconRevealableShow,
       onClick: onClickIconReveal
     }));
   });
@@ -2629,11 +2623,14 @@ const sendFormDataToServer = async (url, data) => {
 
 const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalForm(props, ref) {
   const {
+    dataTestId,
+    dataTour,
     className,
     type,
     initialValues,
     initialValuesEqual,
     config,
+    validationSchema,
     title,
     titleFill,
     titleTextColor,
@@ -2643,6 +2640,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     descSize,
     descTextColor,
     descTextWeight,
+    buttonGap,
     dataTestIdPrimaryButton,
     dataTourPrimaryButton,
     primaryButton,
@@ -2684,13 +2682,10 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     additionalProps = {},
     buttonDirection = 'vertical',
     buttonFill,
-    buttonGap,
     buttonJustifyContent,
     buttonPadding,
     buttonPosition,
-    dataTestId,
     dataTestIdButtons,
-    dataTour,
     dataTourButtons,
     disableFieldsAutoComplete = false,
     fieldsGap,
@@ -2709,7 +2704,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     notificationCloseButton,
     notificationType,
     renderFieldsWrapper = wrapperChildren => wrapperChildren,
-    validationSchema,
+    shapeStrengthClass,
     before,
     after,
     isLoading,
@@ -2743,16 +2738,16 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
       modifiedSinceLastSubmit
     }) => {
       return /*#__PURE__*/React__default.default.createElement("form", {
-        className: clsx__default.default(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
-        name: formName,
+        className: clsx__default.default(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
+        name: formName
+        // We no need set reference to html element, we need reference to "final-form" instance
+        ,
+        ref: () => onRefFormInstance(form),
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
         "data-test-id": dataTestId,
-        "data-tour": dataTour
-        // We no need set reference to html element, we need reference to "final-form" instance
-        ,
-        ref: () => onRefFormInstance(form),
+        "data-tour": dataTour,
         spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
         style: formStyles,
         onSubmit: handleSubmit
@@ -2781,7 +2776,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
           values: true
         },
         onChange: onChangeFormValues
-      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React__default.default.createElement(Group.Group, {
+      }), Boolean(config && Object.keys(config).length) && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React__default.default.createElement(Group.Group, {
         className: "form__wrapper",
         direction: "vertical",
         gap: fieldsGap || groupGap,
@@ -2798,15 +2793,17 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         itemFill: loaderItemFill,
         shape: loaderShape
       }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group.Group, {
+        dataTestId: dataTestIdButtons,
+        dataTour: dataTourButtons,
         className: "form__button",
         direction: buttonDirection,
         justifyContent: buttonJustifyContent,
         fill: buttonFill,
         padding: buttonPadding,
-        gap: buttonGap,
-        dataTestId: dataTestIdButtons,
-        dataTour: dataTourButtons
+        gap: buttonGap
       }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        dataTestId: dataTestIdPrimaryButton,
+        dataTour: dataTourPrimaryButton,
         className: "form__button-item",
         appearance: primaryButtonAppearance,
         width: "fill",
@@ -2818,10 +2815,10 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
         isDisabled: primaryButtonIsDisabled,
-        dataTestId: dataTestIdPrimaryButton,
-        dataTour: dataTourPrimaryButton,
         loading: primaryButtonIsLoading
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        dataTestId: dataTestIdSecondaryButton,
+        dataTour: dataTourSecondaryButton,
         className: "form__button-item",
         appearance: secondaryButtonAppearance,
         width: "fill",
@@ -2833,11 +2830,11 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextSize: secondaryButtonLabelSize,
         labelTextWeight: secondaryButtonLabelTextWeight,
         isDisabled: secondaryButtonIsDisabled,
-        dataTestId: dataTestIdSecondaryButton,
-        dataTour: dataTourSecondaryButton,
         loading: secondaryButtonIsLoading,
         onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        dataTestId: dataTestIdTertiaryButton,
+        dataTour: dataTourTertiaryButton,
         className: "form__button-item",
         width: "fill",
         size: tertiaryButtonSize,
@@ -2847,8 +2844,6 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextColor: tertiaryButtonLabelTextColor,
         labelTextSize: tertiaryButtonLabelSize,
         labelTextWeight: tertiaryButtonLabelTextWeight,
-        dataTestId: dataTestIdTertiaryButton,
-        dataTour: dataTourTertiaryButton,
         onClick: onClickTertiaryButton
       }) : tertiaryButton), after);
     },

package/dist/itcase-forms.esm.js

@@ -179,8 +179,8 @@ function useFieldValidationState(props) {
 // looks at what props were in initialProps, if they are there then changes
 function useValidationAppearanceInputProps(props) {
   const {
-    validationStateKey,
-    inputProps
+    inputProps,
+    validationStateKey
   } = props;
 
   // TODO: need to add props that can change during errors in this field
@@ -194,7 +194,7 @@ function useValidationAppearanceInputProps(props) {
     // }
     const updatedInputProps = {};
     if (validationStateKey) {
-      Object.entries(inputProps).forEach(([propKey, propValue]) => {
+      Object.entries(inputProps || {}).forEach(([propKey, propValue]) => {
         // Convert the input property key to "snake_case" format.
         // e.g. "requiredBorderColor" -> "required_border_color".
         const propKeySnake = snakeCase(propKey);
@@ -1666,12 +1666,6 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
     isDisabled,
     classNameGroupItem,
     fieldProps,
-    iconFill,
-    iconFillHover,
-    iconRevealableHide,
-    iconRevealableShow,
-    iconShape,
-    iconSize,
     inputProps,
     parse,
     showMessage,
@@ -1708,10 +1702,10 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
       }
     }, [onChange, input.onChange]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1748,9 +1742,9 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
       onFocus: input.onFocus
     }, updatedInputProps)), /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
-      size: inputProps.iconSize,
-      iconFill: inputProps.iconFill,
-      SvgImage: isRevealed ? inputProps.iconRevealableHide : inputProps.iconRevealableShow,
+      size: inputProps?.iconSize,
+      iconFill: inputProps?.iconFill,
+      SvgImage: isRevealed ? inputProps?.iconRevealableHide : inputProps?.iconRevealableShow,
       onClick: onClickIconReveal
     }));
   });
@@ -2618,11 +2612,14 @@ const sendFormDataToServer = async (url, data) => {
 
 const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
   const {
+    dataTestId,
+    dataTour,
     className,
     type,
     initialValues,
     initialValuesEqual,
     config,
+    validationSchema,
     title,
     titleFill,
     titleTextColor,
@@ -2632,6 +2629,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     descSize,
     descTextColor,
     descTextWeight,
+    buttonGap,
     dataTestIdPrimaryButton,
     dataTourPrimaryButton,
     primaryButton,
@@ -2673,13 +2671,10 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     additionalProps = {},
     buttonDirection = 'vertical',
     buttonFill,
-    buttonGap,
     buttonJustifyContent,
     buttonPadding,
     buttonPosition,
-    dataTestId,
     dataTestIdButtons,
-    dataTour,
     dataTourButtons,
     disableFieldsAutoComplete = false,
     fieldsGap,
@@ -2698,7 +2693,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     notificationCloseButton,
     notificationType,
     renderFieldsWrapper = wrapperChildren => wrapperChildren,
-    validationSchema,
+    shapeStrengthClass,
     before,
     after,
     isLoading,
@@ -2732,16 +2727,16 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       modifiedSinceLastSubmit
     }) => {
       return /*#__PURE__*/React.createElement("form", {
-        className: clsx(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
-        name: formName,
+        className: clsx(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
+        name: formName
+        // We no need set reference to html element, we need reference to "final-form" instance
+        ,
+        ref: () => onRefFormInstance(form),
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
         "data-test-id": dataTestId,
-        "data-tour": dataTour
-        // We no need set reference to html element, we need reference to "final-form" instance
-        ,
-        ref: () => onRefFormInstance(form),
+        "data-tour": dataTour,
         spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
         style: formStyles,
         onSubmit: handleSubmit
@@ -2770,7 +2765,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
           values: true
         },
         onChange: onChangeFormValues
-      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React.createElement(React.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React.createElement(Group, {
+      }), Boolean(config && Object.keys(config).length) && /*#__PURE__*/React.createElement(React.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React.createElement(Group, {
         className: "form__wrapper",
         direction: "vertical",
         gap: fieldsGap || groupGap,
@@ -2787,15 +2782,17 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         itemFill: loaderItemFill,
         shape: loaderShape
       }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React.createElement(Group, {
+        dataTestId: dataTestIdButtons,
+        dataTour: dataTourButtons,
         className: "form__button",
         direction: buttonDirection,
         justifyContent: buttonJustifyContent,
         fill: buttonFill,
         padding: buttonPadding,
-        gap: buttonGap,
-        dataTestId: dataTestIdButtons,
-        dataTour: dataTourButtons
+        gap: buttonGap
       }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        dataTestId: dataTestIdPrimaryButton,
+        dataTour: dataTourPrimaryButton,
         className: "form__button-item",
         appearance: primaryButtonAppearance,
         width: "fill",
@@ -2807,10 +2804,10 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
         isDisabled: primaryButtonIsDisabled,
-        dataTestId: dataTestIdPrimaryButton,
-        dataTour: dataTourPrimaryButton,
         loading: primaryButtonIsLoading
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        dataTestId: dataTestIdSecondaryButton,
+        dataTour: dataTourSecondaryButton,
         className: "form__button-item",
         appearance: secondaryButtonAppearance,
         width: "fill",
@@ -2822,11 +2819,11 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextSize: secondaryButtonLabelSize,
         labelTextWeight: secondaryButtonLabelTextWeight,
         isDisabled: secondaryButtonIsDisabled,
-        dataTestId: dataTestIdSecondaryButton,
-        dataTour: dataTourSecondaryButton,
         loading: secondaryButtonIsLoading,
         onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        dataTestId: dataTestIdTertiaryButton,
+        dataTour: dataTourTertiaryButton,
         className: "form__button-item",
         width: "fill",
         size: tertiaryButtonSize,
@@ -2836,8 +2833,6 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextColor: tertiaryButtonLabelTextColor,
         labelTextSize: tertiaryButtonLabelSize,
         labelTextWeight: tertiaryButtonLabelTextWeight,
-        dataTestId: dataTestIdTertiaryButton,
-        dataTour: dataTourTertiaryButton,
         onClick: onClickTertiaryButton
       }) : tertiaryButton), after);
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.28",
+  "version": "1.1.30",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",