@weareconceptstudio/form 0.0.7 → 0.0.8

package/dist/form/BaseForm.d.ts

@@ -16,8 +16,5 @@ interface BaseFormProps<T extends FieldValues> {
     shouldUnregister?: boolean;
     className?: string;
 }
-declare const BaseForm: {
-    <T extends FieldValues>({ initialValues: defaultValues, values, children, onSubmit, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, className, }: BaseFormProps<T>): React.JSX.Element;
-    displayName: string;
-};
+declare const BaseForm: React.ForwardRefExoticComponent<BaseFormProps<FieldValues> & React.RefAttributes<any>>;
 export default BaseForm;

package/dist/form/BaseForm.js

@@ -1,8 +1,8 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, forwardRef, useImperativeHandle } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Text } from '@weareconceptstudio/core';
 import classNames from 'classnames';
-const BaseForm = ({ initialValues: defaultValues, values, children, onSubmit, mode = 'onChange', reValidateMode = 'onChange', errors, resetOptions, criteriaMode = 'firstError', shouldFocusError, delayError = 0, shouldUseNativeValidation, shouldUnregister, className, }) => {
+const BaseForm = forwardRef(({ initialValues: defaultValues, values, children, onSubmit, mode = 'onChange', reValidateMode = 'onChange', errors, resetOptions, criteriaMode = 'firstError', shouldFocusError, delayError = 0, shouldUseNativeValidation, shouldUnregister, className }, ref) => {
     const methods = useForm({
         mode,
         errors,
@@ -38,14 +38,18 @@ const BaseForm = ({ initialValues: defaultValues, values, children, onSubmit, mo
             }
         });
     }, [methods, onSubmit]);
+    useImperativeHandle(ref, () => ({
+        ...methods,
+        submit: () => methods.handleSubmit(handleSubmit)(),
+    }));
     return (React.createElement(FormProvider, { ...methods },
-        methods.formState.errors.root?.serverError && (React.createElement("div", { className: "global-error-wrap" },
+        methods.formState.errors.root?.serverError && (React.createElement("div", { className: 'global-error-wrap' },
             React.createElement(Text, { className: 'backend-error', text: methods.formState.errors.root?.serverError.message }),
             React.createElement(Text, { className: 'frontend-error', text: 'globalError' }))),
         React.createElement("form", { onSubmit: methods.handleSubmit(handleSubmit), className: classNames({
                 [className]: !!className,
             }) }, children)));
-};
+});
 if (process.env.NODE_ENV !== 'production') {
     BaseForm.displayName = 'BaseForm';
 }

package/dist/select/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import ReactSelect, { components } from 'react-select';
 import classNames from 'classnames';
 import { bottom_arrow, empty } from './icons';
@@ -6,7 +6,7 @@ import { useInput } from '../form/hooks/useInput';
 import useFormInstance from '../form/hooks/useFormInstance';
 import { useTranslation } from '@weareconceptstudio/core';
 const Select = (props) => {
-    const { name, placeholder, value, onChange, multiple = false, allowClear = false, allowSearch = true, disabled = false, loading = false, options = [], className, select_arrow = false, select_empty = false } = props;
+    const { name, placeholder, value, onChange, multiple = false, allowClear = false, allowSearch = true, disabled = false, loading = false, options: list = [], className, select_arrow = false, select_empty = false, optionKey, optionValue, optGroup } = props;
     const { translate } = useTranslation();
     const formInstance = useFormInstance();
     let selectProps = {};
@@ -52,6 +52,33 @@ const Select = (props) => {
             select_empty || empty,
             React.createElement("p", { className: `no-options` }, 'No Data')));
     };
+    const options = useMemo(() => {
+        const newOptions = [];
+        const labelKey = optionKey ?? 'name';
+        const valueKey = optionValue ?? 'id';
+        if (optGroup) {
+            Object.keys(list).map((obj) => {
+                newOptions.push({
+                    label: obj,
+                    options: list[obj].map((option) => {
+                        return {
+                            label: option[labelKey],
+                            value: option[valueKey],
+                        };
+                    }),
+                });
+            });
+        }
+        else {
+            list?.map((option) => {
+                newOptions.push({
+                    label: option[labelKey],
+                    value: option[valueKey],
+                });
+            });
+        }
+        return newOptions;
+    }, [list, optionKey, optionValue, optGroup]);
     return (React.createElement(ReactSelect
     // unstyled
     // menuIsOpen={true}

package/dist/styles/formStyle.js

@@ -7,6 +7,8 @@ const FormStyle = createGlobalStyle `${css `
 		--form_errorSize: var(--sp2x);
 		--form_passwordIconSize: var(--sp4x);
 
+		--form_errorDistance: var(--sp1x);
+
 		//! Select fix height size
 		--form_emptyPadTB: var(--sp5x);
 		--form_emptyIconSize: var(--sp7x);
@@ -383,6 +385,7 @@ const FormStyle = createGlobalStyle `${css `
 		font-family: var(--form_Font);
 		font-weight: 400;
 		color: var(--form_errorMessageColor);
+		transform: translateY(var(--form_errorDistance));
 	}
 
 	/* //! Disabled Styles */
@@ -444,6 +447,8 @@ const FormStyle = createGlobalStyle `${css `
 			--form_errorSize: var(--sp2x);
 			--form_passwordIconSize: var(--sp3x);
 
+			--form_errorDistance: var(--sp1x);
+
 			//! Select fix height size
 			--form_emptyPadTB: var(--sp5x);
 			--form_emptyIconSize: var(--sp6x);
@@ -465,6 +470,8 @@ const FormStyle = createGlobalStyle `${css `
 			--form_errorSize: var(--sp2x);
 			--form_passwordIconSize: var(--sp3x);
 
+			--form_errorDistance: var(--sp0-5x);
+
 			//! Select fix height size
 			--form_emptyPadTB: var(--sp6x);
 			--form_emptyIconSize: var(--sp6x);
@@ -486,6 +493,8 @@ const FormStyle = createGlobalStyle `${css `
 			--form_errorSize: var(--sp2x);
 			--form_passwordIconSize: var(--sp3x);
 
+			--form_errorDistance: var(--sp0-5x);
+
 			//! Select fix height size
 			--form_emptyPadTB: var(--sp5x);
 			--form_emptyIconSize: var(--sp6x);
@@ -507,6 +516,8 @@ const FormStyle = createGlobalStyle `${css `
 			--form_errorSize: var(--sp1-5x);
 			--form_passwordIconSize: var(--sp2-5x);
 
+			--form_errorDistance: var(--sp0-5x);
+
 			//! Select fix height size
 			--form_emptyPadTB: var(--sp4x);
 			--form_emptyIconSize: var(--sp6x);
@@ -528,6 +539,8 @@ const FormStyle = createGlobalStyle `${css `
 			--form_errorSize: var(--sp1-5x);
 			--form_passwordIconSize: var(--sp2-5x);
 
+			--form_errorDistance: var(--sp0-5x);
+
 			//! Select fix height size
 			--form_emptyPadTB: var(--sp4x);
 			--form_emptyIconSize: var(--sp5x);
@@ -549,6 +562,8 @@ const FormStyle = createGlobalStyle `${css `
 			--form_errorSize: var(--sp1-5x);
 			--form_passwordIconSize: var(--sp2-5x);
 
+			--form_errorDistance: var(--sp0-5x);
+
 			//! Select fix height size
 			--form_emptyPadTB: var(--sp4x);
 			--form_emptyIconSize: var(--sp5x);
@@ -570,6 +585,8 @@ const FormStyle = createGlobalStyle `${css `
 			--form_errorSize: var(--sp1-5x);
 			--form_passwordIconSize: var(--sp2-5x);
 
+			--form_errorDistance: var(--sp0-5x);
+
 			//! Select fix height size
 			--form_emptyPadTB: var(--sp4x);
 			--form_emptyIconSize: var(--sp5x);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@weareconceptstudio/form",
-	"version": "0.0.7",
+	"version": "0.0.8",
 	"description": "Concept Studio Form",
 	"author": "Concept Studio",
 	"license": "ISC",