@weareconceptstudio/form 0.0.2 → 0.0.3

package/dist/checkbox/index.d.ts

@@ -1,3 +1,3 @@
 export default Checkbox;
 declare const Checkbox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+import React from 'react';

package/dist/checkbox/index.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-const Checkbox = React.forwardRef(({ type = 'checkbox', children, ...restProps }, forwardRef) => {
+import React, { forwardRef } from 'react';
+const Checkbox = forwardRef(({ type = 'checkbox', children, ...restProps }, forwardRef) => {
     return (React.createElement("label", null,
         React.createElement("input", { type: type, ...forwardRef, ...restProps }),
         children !== undefined && React.createElement("span", null, children)));

package/dist/color-picker/index.d.ts

@@ -1,3 +1,3 @@
 export default ColorPicker;
 declare const ColorPicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+import React from 'react';

package/dist/color-picker/index.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-const ColorPicker = React.forwardRef((props, forwardRef) => {
+import React, { forwardRef } from 'react';
+const ColorPicker = forwardRef((props, forwardRef) => {
     return (React.createElement("input", { type: 'color', ...forwardRef }));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/date-picker/index.d.ts

@@ -1,3 +1,3 @@
 export default DatePicker;
 declare const DatePicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+import React from 'react';

package/dist/date-picker/index.js

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
 /*
     types - default=date,datetime-local,month,time,week
 *
 */
-const DatePicker = React.forwardRef(({ type = 'date' }, forwardRef) => {
+const DatePicker = forwardRef(({ type = 'date' }, forwardRef) => {
     return (React.createElement("input", { type: type, ...forwardRef }));
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -7,3 +7,6 @@ declare function ErrorMessage({ as, errors, name, message, render, ...rest }: {
     message: any;
     render: any;
 }): any;
+declare namespace ErrorMessage {
+    let displayName: string;
+}

package/dist/error-message/index.js

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

package/dist/form/BaseForm.d.ts

@@ -15,4 +15,7 @@ declare function BaseForm({ initialValues: defaultValues, values, children, onSu
     shouldUseNativeValidation: any;
     shouldUnregister: any;
 }): React.JSX.Element;
-import * as React from "react";
+declare namespace BaseForm {
+    let displayName: string;
+}
+import React from 'react';

package/dist/form/BaseForm.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { FormProvider, useForm } from "react-hook-form";
 import styled from 'styled-components';
 // initialValues: object || async () => fetch('/api-endpoint')
@@ -63,4 +63,7 @@ const BaseForm = ({ initialValues: defaultValues, values, children, onSubmit, la
     return (React.createElement(FormProvider, { ...methods },
         React.createElement(StyledForm, { onSubmit: methods.handleSubmit(onSubmit), className: layout }, children)));
 };
+if (process.env.NODE_ENV !== 'production') {
+    BaseForm.displayName = 'BaseForm';
+}
 export default BaseForm;

package/dist/form/Item/index.d.ts

@@ -6,6 +6,6 @@ declare function FormItem({ label, name, children, rules }: {
     rules?: {};
 }): React.JSX.Element;
 declare namespace FormItem {
-    const displayName: string;
+    let displayName: string;
 }
-import React from "react";
+import React from 'react';

package/dist/form/Item/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { cloneElement, isValidElement } from 'react';
 //* HOC's
 import { useFormContext } from "react-hook-form";
 //* Components
@@ -10,12 +10,12 @@ const FormItem = ({ label, name, children, rules = {} }) => {
         React.createElement("div", { className: "form-item-row" },
             React.createElement("div", { className: "form-item-label" },
                 React.createElement("label", { htmlFor: name }, label)),
-            React.createElement("div", { className: 'form-item-control' }, React.cloneElement(children, {
+            React.createElement("div", { className: 'form-item-control' }, isValidElement(children) && cloneElement(children, {
                 ref: innerRef,
                 name,
                 value: getValues()[name]
             })),
-            React.createElement(ErrorMessage, { name: name, as: 'span' }))));
+            React.createElement(ErrorMessage, { name: name, as: React.createElement("div", { className: 'error-message' }) }))));
 };
 if (process.env.NODE_ENV !== 'production') {
     FormItem.displayName = 'FormItem';

package/dist/form/hooks/useFormInstance.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { useFormContext } from 'react-hook-form';
 export default function useFormInstance() {
     const methods = useFormContext();

package/dist/form/index.d.ts

@@ -1,5 +1,5 @@
 export default Form;
-declare const Form: ({ initialValues: defaultValues, values, children, onSubmit, layout, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, }: {
+declare function Form({ initialValues: defaultValues, values, children, onSubmit, layout, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, }: {
     initialValues: any;
     values: any;
     children: any;
@@ -14,4 +14,5 @@ declare const Form: ({ initialValues: defaultValues, values, children, onSubmit,
     delayError: any;
     shouldUseNativeValidation: any;
     shouldUnregister: any;
-}) => import("react").JSX.Element;
+}): import("react").JSX.Element;
+declare namespace Form { }

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

@@ -1,4 +1,4 @@
 export const InputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export default BaseInput;
-import * as React from "react";
+import React from 'react';
 declare const BaseInput: React.ForwardRefExoticComponent<React.RefAttributes<any>>;

package/dist/input/BaseInput/index.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React, { forwardRef, useRef, cloneElement } from 'react';
 import styled from 'styled-components';
-import clsx from 'classnames';
+import classNames from 'classnames';
 import { hasPrefixSuffix, hasAddon } from './utils';
 export const InputContainer = styled.div `
     .affix-wrapper {
@@ -17,20 +17,22 @@ export const InputContainer = styled.div `
         }
     }  
 `;
-const BaseInput = React.forwardRef((props, forwardRef) => {
+const BaseInput = forwardRef((props, forwardRef) => {
     const { inputElement: inputEl, addonBefore, addonAfter, prefix, suffix, allowClear, disabled, readOnly, components, value, className, children } = props;
     const inputElement = children ?? inputEl;
     // ======================== Components ======================== //
-    const AffixWrapperComponent = components?.affixWrapper || 'span';
-    const GroupWrapperComponent = components?.groupWrapper || 'span';
-    const WrapperComponent = components?.wrapper || 'span';
-    const GroupAddonComponent = components?.groupAddon || 'span';
+    const AffixWrapperComponent = components?.affixWrapper || 'div';
+    const GroupWrapperComponent = components?.groupWrapper || 'div';
+    const WrapperComponent = components?.wrapper || 'div';
+    const GroupAddonComponent = components?.groupAddon || 'div';
     // ======================== Refs ======================== //
-    const containerRef = React.useRef(null);
-    const groupRef = React.useRef(null);
-    let element = React.cloneElement(inputElement, {
-        // ...props,
-        className: `base-input`
+    const containerRef = useRef(null);
+    const groupRef = useRef(null);
+    let element = cloneElement(inputElement, {
+        className: classNames({
+            'base-input': true,
+            [`${inputElement.props.className}`]: inputElement.props.className
+        }),
     });
     // ======================== Prefix && Suffix ======================== //
     if (hasPrefixSuffix(props)) {
@@ -46,7 +48,7 @@ const BaseInput = React.forwardRef((props, forwardRef) => {
                 //     handleReset?.(event);
                 //     onClear?.();
                 // }}
-                onMouseDown: (e) => e.preventDefault(), role: "button", tabIndex: -1, className: clsx(clearIconCls, {
+                onMouseDown: (e) => e.preventDefault(), role: "button", tabIndex: -1, className: classNames(clearIconCls, {
                     [`${clearIconCls}-hidden`]: !needClear,
                     [`${clearIconCls}-has-suffix`]: !!suffix,
                 }) }, iconNode));
@@ -61,14 +63,19 @@ const BaseInput = React.forwardRef((props, forwardRef) => {
     }
     // ======================== Addon (Before && After) ======================== //
     if (hasAddon(props)) {
-        element = (React.createElement(GroupWrapperComponent, { ref: groupRef },
+        element = (React.createElement(GroupWrapperComponent, { className: 'group-wrapper', ref: groupRef },
             React.createElement(WrapperComponent, null,
                 addonBefore && (React.createElement(GroupAddonComponent, null, addonBefore)),
                 element,
                 addonAfter && (React.createElement(GroupAddonComponent, null, addonAfter)))));
     }
-    return (React.createElement(InputContainer, null, React.cloneElement(element, {
-        className: clsx(element.props?.className, className) || null,
+    return (React.createElement(InputContainer, { className: classNames({
+            'base-input-container': true,
+            [`${className}-container`]: className
+        }) }, cloneElement(element, {
+        className: classNames({
+            [element.props.className]: element.props.className,
+        }),
     })));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/input/Input.d.ts

@@ -1,3 +1,3 @@
 export default Input;
 declare const Input: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+import React from 'react';

package/dist/input/Input.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import BaseInput from './BaseInput';
 const StyledInput = styled.input `
@@ -10,9 +10,12 @@ const StyledInput = styled.input `
     padding: 4px 11px;
     outline: none;
 `;
-const Input = React.forwardRef((props, forwardRef) => {
+const Input = forwardRef((props, forwardRef) => {
     const { autoComplete, onChange, onFocus, onBlur, onPressEnter, onKeyDown, onKeyUp, disabled, className, type = 'text', placeholder, value, } = props;
     return (React.createElement(BaseInput, { ...props, value: value, disabled: disabled },
         React.createElement(StyledInput, { type: type, autoComplete: autoComplete, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onPressEnter: onPressEnter, onKeyDown: onKeyDown, onKeyUp: onKeyUp, disabled: disabled, className: className, placeholder: placeholder, ...forwardRef })));
 });
+if (process.env.NODE_ENV !== 'production') {
+    Input.displayName = 'Input';
+}
 export default Input;

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

@@ -1,3 +1,3 @@
 export default Number;
 declare const Number: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+import React from 'react';

package/dist/input/Number/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
 import Input from '../Input';
 const Number = React.forwardRef((props, forwardRef) => {
     return (React.createElement(Input, { ref: forwardRef, type: 'number', ...props }));

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

@@ -1,3 +1,3 @@
 export default Password;
 declare const Password: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+import React from 'react';

package/dist/input/Password/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useState, useEffect, forwardRef, isValidElement, cloneElement } from 'react';
 import { omit } from '@weareconceptstudio/core';
 import { eyeIcon, openEye } from './icons';
 import Input from '../Input';
@@ -7,11 +7,11 @@ const actionMap = {
     click: 'onClick',
     hover: 'onMouseOver',
 };
-const Password = React.forwardRef((props, ref) => {
+const Password = forwardRef((props, ref) => {
     const { disabled, action = 'click', visibilityToggle = true, iconRender = defaultIconRender } = props;
     const visibilityControlled = typeof visibilityToggle === 'object' && visibilityToggle.visible !== undefined;
-    const [visible, setVisible] = React.useState(() => visibilityControlled ? visibilityToggle.visible : false);
-    React.useEffect(() => {
+    const [visible, setVisible] = useState(() => visibilityControlled ? visibilityToggle.visible : false);
+    useEffect(() => {
         if (visibilityControlled) {
             setVisible(visibilityToggle.visible);
         }
@@ -42,7 +42,7 @@ const Password = React.forwardRef((props, ref) => {
                 e.preventDefault();
             },
         };
-        return React.cloneElement(React.isValidElement(icon) ? icon : React.createElement("span", null, icon), iconProps);
+        return cloneElement(isValidElement(icon) ? icon : React.createElement("span", null, icon), iconProps);
     };
     const suffixIcon = visibilityToggle && getIcon();
     const { className, ...restProps } = props;

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

@@ -1,3 +1,3 @@
 export default TextArea;
 declare const TextArea: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+import React from 'react';

package/dist/input/TextArea/index.js

@@ -1,11 +1,11 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import BaseInput from '../BaseInput';
 const StyledTextArea = styled.textarea `
     font-size: 14px;
     padding: 4px 11px;
 `;
-const TextArea = React.forwardRef((props, forwardRef) => {
+const TextArea = forwardRef((props, forwardRef) => {
     return (React.createElement(BaseInput, { ...props },
         React.createElement(StyledTextArea, { ...forwardRef, rows: 5 })));
 });

package/dist/input/index.d.ts

@@ -1,2 +1,2 @@
 export default Input;
-import Input from "./Input";
+import Input from './Input';

package/dist/radio/BaseRadio.d.ts

@@ -1,3 +1,3 @@
 export default Radio;
 declare const Radio: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+import React from 'react';

package/dist/radio/BaseRadio.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React, { forwardRef, useContext } from 'react';
 import RadioGroupContext, { RadioOptionTypeContext } from './context';
 import Checkbox from "../checkbox";
-const Radio = React.forwardRef(({ children, ...restProps }, forwardRef) => {
-    const groupContext = React.useContext(RadioGroupContext);
+const Radio = forwardRef(({ children, ...restProps }, forwardRef) => {
+    const groupContext = useContext(RadioGroupContext);
     const radioProps = {
         ref: forwardRef,
         ...restProps

package/dist/radio/Group.d.ts

@@ -1,3 +1,3 @@
 export default RadioGroup;
 declare const RadioGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+import React from 'react';

package/dist/radio/Group.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
 import { RadioGroupContextProvider } from './context';
 import Radio from './BaseRadio';
-const RadioGroup = React.forwardRef((props, forwardRef) => {
+const RadioGroup = forwardRef((props, forwardRef) => {
     const { children, options } = props;
     let childrenToRender = children;
     if (options && options.length > 0) {
@@ -17,4 +17,7 @@ const RadioGroup = React.forwardRef((props, forwardRef) => {
                 forwardRef: forwardRef,
             } }, childrenToRender)));
 });
+if (process.env.NODE_ENV !== 'production') {
+    RadioGroup.displayName = 'RadioGroup';
+}
 export default RadioGroup;

package/dist/radio/context.d.ts

@@ -2,5 +2,5 @@ export const RadioGroupContextProvider: React.Provider<any>;
 export default RadioGroupContext;
 export const RadioOptionTypeContext: React.Context<any>;
 export const RadioOptionTypeContextProvider: React.Provider<any>;
-import * as React from "react";
+import React from 'react';
 declare const RadioGroupContext: React.Context<any>;

package/dist/radio/context.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
-const RadioGroupContext = React.createContext(null);
+import React, { createContext } from 'react';
+const RadioGroupContext = createContext(null);
 export const RadioGroupContextProvider = RadioGroupContext.Provider;
 export default RadioGroupContext;
-export const RadioOptionTypeContext = React.createContext(null);
+export const RadioOptionTypeContext = createContext(null);
 export const RadioOptionTypeContextProvider = RadioOptionTypeContext.Provider;

package/dist/select/index.d.ts

@@ -1,3 +1,3 @@
 export default Select;
 declare const Select: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+import React from 'react';

package/dist/select/index.js

@@ -1,11 +1,11 @@
-import * as React from 'react';
+import React, { forwardRef, useState, useCallback } from 'react';
 import ReactSelect from 'react-select';
 import useFormInstance from '../form/hooks/useFormInstance';
-const Select = React.forwardRef((props, forwardRef) => {
+const Select = forwardRef((props, forwardRef) => {
     const { name, multiple = false, allowClear = false, allowSearch = true, disabled = false, loading = false, options = [], } = props;
     const formInstance = useFormInstance();
-    const [val, setVal] = React.useState(formInstance.getValues()[name] || (multiple ? [] : ''));
-    const handleChange = React.useCallback((newVal) => {
+    const [val, setVal] = useState(formInstance.getValues()[name] || (multiple ? [] : ''));
+    const handleChange = useCallback((newVal) => {
         let vals;
         if (multiple) {
             vals = newVal.map(item => item.value);

package/dist/upload/index.d.ts

@@ -1,3 +1,3 @@
 export default Upload;
 declare const Upload: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+import React from 'react';

package/dist/upload/index.js

@@ -1,6 +1,9 @@
-import * as React from 'react';
-const Upload = React.forwardRef((props, forwardRef) => {
+import React, { forwardRef } from 'react';
+const Upload = forwardRef((props, forwardRef) => {
     return (React.createElement("div", null,
         React.createElement("input", { type: 'file', ...forwardRef })));
 });
+if (process.env.NODE_ENV !== 'production') {
+    Upload.displayName = 'Upload';
+}
 export default Upload;

package/package.json

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