@weareconceptstudio/form 0.1.6 → 0.1.8

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/Builder/style.js

@@ -1,3 +1,18 @@
 import styled from 'styled-components';
-const BuilderStyle = styled.div ``;
+const BuilderStyle = styled.div `
+	.react-select__value-container {
+		input {
+			width: unset !important;
+			background-color: unset !important;
+			color: unset !important;
+			font-size: unset !important;
+			line-height: unset !important;
+			font-family: unset !important;
+			font-weight: unset !important;
+			border-radius: unset !important;
+			border: unset !important;
+			padding: unset !important;
+		}
+	}
+`;
 export default BuilderStyle;

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/select/index.js

@@ -7,7 +7,7 @@ import useFormInstance from '../form/hooks/useFormInstance';
 import { useTranslation } from '@weareconceptstudio/core';
 import { useFormContext } from '../FormProvider';
 const Select = (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 { name, placeholder, value, onChange, multiple = false, allowClear = false, allowSearch = false, disabled = false, loading = false, options: list = [], className, select_arrow = false, select_empty = false, optionKey, optionValue, optGroup } = props;
     const { selectIcon } = useFormContext();
     const { translate } = useTranslation();
     const formInstance = useFormInstance();
@@ -58,7 +58,7 @@ const Select = (props) => {
     const customStyles = {
         menuList: (provided) => ({
             ...provided,
-            maxHeight: '144px',
+            maxHeight: '200px',
         }),
     };
     const options = useMemo(() => {

package/dist/styles/formStyle.js

@@ -226,9 +226,11 @@ const FormStyle = createGlobalStyle `${css `
 			}
 
 			/* //! Hover */
-			@media (hover: hover) {
-				&:hover {
-					border-color: var(--form_selectBorderHoverColor);
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						border-color: var(--form_selectBorderHoverColor);
+					}
 				}
 			}
 
@@ -291,8 +293,16 @@ const FormStyle = createGlobalStyle `${css `
 					padding: var(--form_inputPadTBL) var(--form_inputPadR) var(--form_inputPadTBL) var(--form_inputPadTBL);
 					background-color: var(--form_selectOptionBgColor);
 
-					&.react-select__option--is-focused {
+					/* &.react-select__option--is-focused {
 						background-color: var(--form_selectOptionFocusBgColor);
+					} */
+
+					@media (pointer: fine) {
+						@media (hover: hover) {
+							&:hover {
+								background-color: var(--form_selectOptionFocusBgColor);
+							}
+						}
 					}
 
 					&.react-select__option--is-selected {
@@ -368,7 +378,7 @@ const FormStyle = createGlobalStyle `${css `
 			input:not(input[type='radio']),
 			textarea {
 				background-color: var(--form_inputErrorBgColor);
-				border: 2px solid var(--form_inputBorderErrorColor);
+				border: 2px solid var(--form_inputBorderErrorColor) !important;
 				color: var(--form_inputErrorColor);
 
 				&::placeholder {
@@ -395,6 +405,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.8",
 	"description": "Concept Studio Form",
 	"author": "Concept Studio",
 	"license": "ISC",