@weareconceptstudio/form 0.1.6 → 0.1.7

package/dist/error-message/index.d.ts

@@ -1,12 +1,5 @@
 export default ErrorMessage;
-declare function ErrorMessage({ as, errors, name, message, render, ...rest }: {
-    [x: string]: any;
-    as: any;
-    errors: any;
-    name: any;
-    message: any;
-    render: any;
-}): any;
+declare function ErrorMessage(props: any): any;
 declare namespace ErrorMessage {
     let displayName: string;
 }

package/dist/error-message/index.js

@@ -1,23 +1,24 @@
 import React, { Fragment, isValidElement, cloneElement, createElement } from 'react';
 import { useFormContext, get } from 'react-hook-form';
-const ErrorMessage = ({ as, errors, name, message, render, ...rest }) => {
+const ErrorMessage = (props) => {
+    const { as, errors, name, message, render, ...rest } = props;
     const methods = useFormContext();
     const error = get(errors || methods.formState.errors, name);
     if (!error) {
         return null;
     }
     const { message: messageFromRegister, types } = error;
-    const props = Object.assign({}, rest, {
+    const inlineProps = Object.assign({}, rest, {
         children: messageFromRegister || message,
     });
     return isValidElement(as)
-        ? cloneElement(as, props)
+        ? cloneElement(as, inlineProps)
         : render
             ? render({
                 message: messageFromRegister || message,
                 messages: types,
             })
-            : createElement(as || Fragment, props);
+            : createElement(as || Fragment, inlineProps);
 };
 if (process.env.NODE_ENV !== 'production') {
     ErrorMessage.displayName = 'ErrorMessage';

package/dist/form/Item/index.js

@@ -1,11 +1,15 @@
-import React, { cloneElement, isValidElement } from 'react';
+import React, { cloneElement, isValidElement, useRef } from 'react';
 import lodashGet from 'lodash.get';
 import classNames from 'classnames';
-import { useTranslation } from '@weareconceptstudio/core';
+import { isForwardRefChild, useTranslation } from '@weareconceptstudio/core';
 import ErrorMessage from '../../error-message';
 import { useInput } from '../hooks/useInput';
 import { useRules } from '../hooks/rules';
 const FormItem = ({ label, name, children, className, errorKey, required = true, requiredMessage, rules = [] }) => {
+    if (!isValidElement(children)) {
+        return null;
+    }
+    const childRef = useRef(null);
     const { translate } = useTranslation();
     const { formState } = useInput({
         name,
@@ -15,7 +19,7 @@ const FormItem = ({ label, name, children, className, errorKey, required = true,
             requiredMessage,
             errorKey: errorKey || label,
             // @ts-ignore
-            childType: children?.type?.displayName || children?.type?.name || '',
+            childType: childRef?.current?.childType || '',
         }),
         errorKey: errorKey || label,
     });
@@ -23,15 +27,18 @@ const FormItem = ({ label, name, children, className, errorKey, required = true,
     const classString = classNames('form-item', {
         [className]: className,
         'has-error': hasError,
-        disabled: isValidElement(children) && children.props.disabled,
+        // @ts-ignore
+        disabled: children.props.disabled,
     });
+    // @ts-ignore
+    const inlineProps = isForwardRefChild(children) ? { ref: childRef, name } : { name };
     return (React.createElement("div", { className: classString },
         React.createElement("div", { className: 'form-item-row' },
             label ? (React.createElement("div", { className: 'form-item-label' },
                 React.createElement("label", { htmlFor: name, "data-required": required },
                     translate(label),
                     required ? React.createElement("span", { className: 'required-symbol' }, "*") : null))) : null,
-            React.createElement("div", { className: 'form-item-control' }, isValidElement(children) && cloneElement(children, { name })),
+            React.createElement("div", { className: 'form-item-control' }, cloneElement(children, inlineProps)),
             React.createElement(ErrorMessage, { name: name, as: React.createElement("div", { className: 'error-message' }) }))));
 };
 export default FormItem;

package/dist/input/Input.d.ts

@@ -1,6 +1,3 @@
 export default Input;
-declare function Input(props: any): React.JSX.Element;
-declare namespace Input {
-    let displayName: string;
-}
+declare const Input: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/dist/input/Input.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import BaseInput from './BaseInput';
 import { useInput } from '../form/hooks/useInput';
 import { useTranslation } from '@weareconceptstudio/core';
-const Input = (props) => {
+const Input = forwardRef((props, ref) => {
+    useImperativeHandle(ref, () => ({ childType: 'input' }));
     const { name, autoComplete = 'new-password', onChange, onFocus, onBlur, onKeyDown, onKeyUp, disabled, className, type = 'text', placeholder } = props;
     const { translate } = useTranslation();
     const { field } = useInput({
@@ -13,7 +14,7 @@ const Input = (props) => {
     });
     return (React.createElement(BaseInput, { ...props, value: field.value, disabled: disabled },
         React.createElement("input", { type: type, onFocus: onFocus, onKeyUp: onKeyUp, disabled: disabled, className: className, onKeyDown: onKeyDown, placeholder: translate(placeholder), autoComplete: autoComplete, ...field })));
-};
+});
 if (process.env.NODE_ENV !== 'production') {
     Input.displayName = 'Input';
 }

package/dist/input/TextArea/index.d.ts

@@ -1,6 +1,3 @@
 export default TextArea;
-declare function TextArea(props: any): React.JSX.Element;
-declare namespace TextArea {
-    let displayName: string;
-}
+declare const TextArea: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/dist/input/TextArea/index.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import BaseInput from '../BaseInput';
 import { useInput } from '../../form/hooks/useInput';
 import { useTranslation } from '@weareconceptstudio/core';
-const TextArea = (props) => {
+const TextArea = forwardRef((props, ref) => {
+    useImperativeHandle(ref, () => ({ childType: 'textarea' }));
     const { translate } = useTranslation();
     const { name, placeholder, rows = 5, onChange, onFocus, onBlur, onKeyDown, onKeyUp, disabled, className, autoComplete } = props;
     const input = name ? useInput({ name, onChange, onBlur }) : null;
@@ -12,7 +13,7 @@ const TextArea = (props) => {
     };
     return (React.createElement(BaseInput, { ...props },
         React.createElement("textarea", { ...field, rows: rows, onFocus: onFocus, onKeyUp: onKeyUp, disabled: disabled, className: className, onKeyDown: onKeyDown, autoComplete: autoComplete, placeholder: translate(placeholder) })));
-};
+});
 if (process.env.NODE_ENV !== 'production') {
     TextArea.displayName = 'TextArea';
 }

package/dist/styles/formStyle.js

@@ -395,6 +395,11 @@ const FormStyle = createGlobalStyle `${css `
 		font-weight: 400;
 		color: var(--form_errorMessageColor);
 		transform: translateY(var(--form_errorDistance));
+		text-transform: lowercase;
+
+		&::first-letter {
+			text-transform: uppercase;
+		}
 	}
 
 	/* //! Disabled Styles */

package/dist/upload/UploadButton/index.js

@@ -3,7 +3,7 @@ import { rawFileToAsset } from '../utils';
 import UploadButtonStyle from './style';
 const UploadButton = (props) => {
     const { accept, disabled, multiple, setFileList } = props;
-    const inputRef = useRef();
+    const inputRef = useRef(null);
     const handleFiles = async (files) => {
         const newFiles = [];
         for (let i = 0; i < files.length; i++) {

package/dist/upload/utils.d.ts

@@ -1,4 +1,4 @@
-export function typeFromMime(mime: any): "document" | "image" | "video" | "audio" | "pdf";
+export function typeFromMime(mime: any): "audio" | "video" | "image" | "document" | "pdf";
 export function rawFileToAsset({ rawFile, isReplace }: {
     rawFile: any;
     isReplace?: boolean;

package/package.json

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