@weareconceptstudio/form 0.0.3 → 0.0.5

package/dist/index.d.ts

@@ -1,4 +1,6 @@
+export * from "./FormConfig";
 export { default as Form } from "./form";
+export { default as FormBuilder } from "./form/Builder";
 export { default as ErrorMessage } from "./error-message";
 export { default as Input } from "./input";
 export { default as Checkbox } from "./checkbox";
@@ -7,3 +9,4 @@ export { default as DatePicker } from "./date-picker";
 export { default as Radio } from "./radio";
 export { default as Select } from "./select";
 export { default as Upload } from "./upload";
+export { default as PhoneNumber } from "./phone-number";

package/dist/index.js

@@ -1,4 +1,7 @@
+'use client';
+export * from './FormConfig';
 export { default as Form } from './form';
+export { default as FormBuilder } from './form/Builder';
 export { default as ErrorMessage } from './error-message';
 export { default as Input } from './input';
 export { default as Checkbox } from './checkbox';
@@ -7,3 +10,4 @@ export { default as DatePicker } from './date-picker';
 export { default as Radio } from './radio';
 export { default as Select } from './select';
 export { default as Upload } from './upload';
+export { default as PhoneNumber } from './phone-number';

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

@@ -1,4 +1,6 @@
-export const InputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export default BaseInput;
+declare function BaseInput(props: any): React.JSX.Element;
+declare namespace BaseInput {
+    let displayName: string;
+}
 import React from 'react';
-declare const BaseInput: React.ForwardRefExoticComponent<React.RefAttributes<any>>;

package/dist/input/BaseInput/index.js

@@ -1,23 +1,7 @@
-import React, { forwardRef, useRef, cloneElement } from 'react';
-import styled from 'styled-components';
+import React, { useRef, cloneElement } from 'react';
 import classNames from 'classnames';
 import { hasPrefixSuffix, hasAddon } from './utils';
-export const InputContainer = styled.div `
-    .affix-wrapper {
-        position:relative;
-        display:inline-flex;
-
-        .clear-icon {
-            font-size: 12px;
-            cursor: pointer;
-
-            &-hidden {
-                display: none;
-            }
-        }
-    }  
-`;
-const BaseInput = forwardRef((props, forwardRef) => {
+const BaseInput = (props) => {
     const { inputElement: inputEl, addonBefore, addonAfter, prefix, suffix, allowClear, disabled, readOnly, components, value, className, children } = props;
     const inputElement = children ?? inputEl;
     // ======================== Components ======================== //
@@ -31,7 +15,7 @@ const BaseInput = forwardRef((props, forwardRef) => {
     let element = cloneElement(inputElement, {
         className: classNames({
             'base-input': true,
-            [`${inputElement.props.className}`]: inputElement.props.className
+            [`${inputElement.props.className}`]: inputElement.props.className,
         }),
     });
     // ======================== Prefix && Suffix ======================== //
@@ -40,15 +24,13 @@ const BaseInput = forwardRef((props, forwardRef) => {
         if (allowClear) {
             const needClear = !disabled && !readOnly && !!value;
             const clearIconCls = 'clear-icon';
-            const iconNode = typeof allowClear === 'object' && allowClear?.clearIcon
-                ? allowClear.clearIcon
-                : '✖';
+            const iconNode = typeof allowClear === 'object' && allowClear?.clearIcon ? allowClear.clearIcon : '✖';
             clearIcon = (React.createElement("span", { 
                 // onClick={(event) => {
                 //     handleReset?.(event);
                 //     onClear?.();
                 // }}
-                onMouseDown: (e) => e.preventDefault(), role: "button", tabIndex: -1, className: classNames(clearIconCls, {
+                onMouseDown: (e) => e.preventDefault(), role: 'button', tabIndex: -1, className: classNames(clearIconCls, {
                     [`${clearIconCls}-hidden`]: !needClear,
                     [`${clearIconCls}-has-suffix`]: !!suffix,
                 }) }, iconNode));
@@ -57,7 +39,7 @@ const BaseInput = forwardRef((props, forwardRef) => {
             clearIcon,
             suffix));
         element = (React.createElement(AffixWrapperComponent, { ref: containerRef, className: 'affix-wrapper' },
-            prefix && (React.createElement("span", null, prefix)),
+            prefix && React.createElement("span", null, prefix),
             element,
             suffixNode));
     }
@@ -65,19 +47,19 @@ const BaseInput = forwardRef((props, forwardRef) => {
     if (hasAddon(props)) {
         element = (React.createElement(GroupWrapperComponent, { className: 'group-wrapper', ref: groupRef },
             React.createElement(WrapperComponent, null,
-                addonBefore && (React.createElement(GroupAddonComponent, null, addonBefore)),
+                addonBefore && React.createElement(GroupAddonComponent, null, addonBefore),
                 element,
-                addonAfter && (React.createElement(GroupAddonComponent, null, addonAfter)))));
+                addonAfter && React.createElement(GroupAddonComponent, null, addonAfter))));
     }
-    return (React.createElement(InputContainer, { className: classNames({
-            'base-input-container': true,
-            [`${className}-container`]: className
-        }) }, cloneElement(element, {
+    const classString = classNames('base-input-container', {
+        [`${className}-container`]: className,
+    });
+    return (React.createElement("div", { className: classString }, cloneElement(element, {
         className: classNames({
             [element.props.className]: element.props.className,
         }),
     })));
-});
+};
 if (process.env.NODE_ENV !== 'production') {
     BaseInput.displayName = 'BaseInput';
 }

package/dist/input/Input.d.ts

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

package/dist/input/Input.js

@@ -1,20 +1,19 @@
-import React, { forwardRef } from 'react';
-import styled from 'styled-components';
+import React from 'react';
 import BaseInput from './BaseInput';
-const StyledInput = styled.input `
-    box-sizing: border-box;
-    margin: 0;
-    list-style: none;
-    display: inline-block;
-    font-size: 14px;
-    padding: 4px 11px;
-    outline: none;
-`;
-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 })));
-});
+import { useInput } from '../form/hooks/useInput';
+import { useTranslation } from '@weareconceptstudio/core';
+const Input = (props) => {
+    const { name, autoComplete = 'new-password', onChange, onFocus, onBlur, onKeyDown, onKeyUp, disabled, className, type = 'text', placeholder } = props;
+    const { translate } = useTranslation();
+    const { field } = useInput({
+        type,
+        name,
+        onChange,
+        onBlur,
+    });
+    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/Number/index.d.ts

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

package/dist/input/Number/index.js

@@ -1,8 +1,31 @@
-import React, { forwardRef } from 'react';
+import React, { useEffect } from 'react';
 import Input from '../Input';
-const Number = React.forwardRef((props, forwardRef) => {
-    return (React.createElement(Input, { ref: forwardRef, type: 'number', ...props }));
-});
+const Number = (props) => {
+    //! Disable number input scroll
+    useEffect(() => {
+        const handleMouseWheel = (e) => {
+            e.target.blur();
+        };
+        const handleKeyDown = (e) => {
+            const key = e.charCode || e.keyCode;
+            if (key === 38 || key === 40) {
+                e.preventDefault();
+            }
+        };
+        const numberInputs = document.querySelectorAll('input[type="number"]');
+        numberInputs.forEach((input) => {
+            input.addEventListener('mousewheel', handleMouseWheel);
+            input.addEventListener('keydown', handleKeyDown);
+        });
+        return () => {
+            numberInputs.forEach((input) => {
+                input.removeEventListener('mousewheel', handleMouseWheel);
+                input.removeEventListener('keydown', handleKeyDown);
+            });
+        };
+    }, []);
+    return (React.createElement(Input, { type: 'number', ...props }));
+};
 if (process.env.NODE_ENV !== 'production') {
     Number.displayName = 'InputNumber';
 }

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

@@ -1,3 +1,3 @@
 export const eyeIcon: React.JSX.Element;
 export const openEye: React.JSX.Element;
-import React from "react";
+import React from 'react';

package/dist/input/Password/icons.js

@@ -1,6 +1,6 @@
-import React from "react";
-export const eyeIcon = React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" },
-    React.createElement("path", { d: "M15.817 26.533c-8.133 0-14.267-8.8-14.533-9.2s-0.267-1.067 0-1.6c0.267-0.4 6.667-9.067 14.667-9.067 8.133 0 14.267 8.667 14.533 9.067s0.267 1.067 0 1.6c-0.267 0.4-6.667 9.2-14.667 9.2zM4.083 16.533c1.6 2 6.4 7.333 11.733 7.333 5.467 0 10.267-5.333 11.867-7.333-1.6-2-6.4-7.2-11.733-7.2-5.467 0-10.267 5.2-11.867 7.2z" }),
-    React.createElement("path", { d: "M15.952 22.266c-3.2 0-5.733-2.533-5.733-5.733s2.533-5.733 5.733-5.733c3.2 0 5.733 2.533 5.733 5.733s-2.533 5.733-5.733 5.733zM15.952 13.466c-1.733 0-3.067 1.333-3.067 3.067s1.333 3.067 3.067 3.067c1.733 0 3.067-1.333 3.067-3.067s-1.333-3.067-3.067-3.067z" }));
-export const openEye = React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" },
-    React.createElement("path", { d: "M29.983 8.366c-0.533-0.4-1.333-0.4-1.867 0.133 0 0.133-5.867 7.067-12.4 7.067s-12.267-7.067-12.267-7.067c-0.4-0.533-1.333-0.667-1.867-0.267-0.533 0.667-0.667 1.467-0.267 2 0.133 0.133 1.733 2.267 4.4 4.267l-2.933 3.067c-0.533 0.533-0.533 1.333 0 1.867 0.267 0.267 0.533 0.4 0.933 0.4s0.667-0.133 0.933-0.4l3.2-3.333c1.867 1.067 4 2 6.4 2.267l-0.4 4.133c-0.133 0.667 0.4 1.333 1.2 1.467h0.133c0.667 0 1.2-0.533 1.333-1.2l0.4-4.533c2.533-0.267 4.8-1.2 6.8-2.4l2.933 3.067c0.267 0.267 0.667 0.4 0.933 0.4s0.667-0.133 0.933-0.4c0.533-0.533 0.533-1.333 0-1.867l-2.667-2.8c2.533-2 4.133-4 4.267-4.133 0.533-0.4 0.4-1.2-0.133-1.733z" }));
+import React from 'react';
+export const eyeIcon = (React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M15.817 26.533c-8.133 0-14.267-8.8-14.533-9.2s-0.267-1.067 0-1.6c0.267-0.4 6.667-9.067 14.667-9.067 8.133 0 14.267 8.667 14.533 9.067s0.267 1.067 0 1.6c-0.267 0.4-6.667 9.2-14.667 9.2zM4.083 16.533c1.6 2 6.4 7.333 11.733 7.333 5.467 0 10.267-5.333 11.867-7.333-1.6-2-6.4-7.2-11.733-7.2-5.467 0-10.267 5.2-11.867 7.2z' }),
+    React.createElement("path", { d: 'M15.952 22.266c-3.2 0-5.733-2.533-5.733-5.733s2.533-5.733 5.733-5.733c3.2 0 5.733 2.533 5.733 5.733s-2.533 5.733-5.733 5.733zM15.952 13.466c-1.733 0-3.067 1.333-3.067 3.067s1.333 3.067 3.067 3.067c1.733 0 3.067-1.333 3.067-3.067s-1.333-3.067-3.067-3.067z' })));
+export const openEye = (React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M29.983 8.366c-0.533-0.4-1.333-0.4-1.867 0.133 0 0.133-5.867 7.067-12.4 7.067s-12.267-7.067-12.267-7.067c-0.4-0.533-1.333-0.667-1.867-0.267-0.533 0.667-0.667 1.467-0.267 2 0.133 0.133 1.733 2.267 4.4 4.267l-2.933 3.067c-0.533 0.533-0.533 1.333 0 1.867 0.267 0.267 0.533 0.4 0.933 0.4s0.667-0.133 0.933-0.4l3.2-3.333c1.867 1.067 4 2 6.4 2.267l-0.4 4.133c-0.133 0.667 0.4 1.333 1.2 1.467h0.133c0.667 0 1.2-0.533 1.333-1.2l0.4-4.533c2.533-0.267 4.8-1.2 6.8-2.4l2.933 3.067c0.267 0.267 0.667 0.4 0.933 0.4s0.667-0.133 0.933-0.4c0.533-0.533 0.533-1.333 0-1.867l-2.667-2.8c2.533-2 4.133-4 4.267-4.133 0.533-0.4 0.4-1.2-0.133-1.733z' })));

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

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

package/dist/input/Password/index.js

@@ -2,15 +2,15 @@ import React, { useState, useEffect, forwardRef, isValidElement, cloneElement }
 import { omit } from '@weareconceptstudio/core';
 import { eyeIcon, openEye } from './icons';
 import Input from '../Input';
-const defaultIconRender = (visible) => visible ? openEye : eyeIcon;
+const defaultIconRender = (visible) => (visible ? openEye : eyeIcon);
 const actionMap = {
     click: 'onClick',
     hover: 'onMouseOver',
 };
-const Password = forwardRef((props, ref) => {
+const Password = (props) => {
     const { disabled, action = 'click', visibilityToggle = true, iconRender = defaultIconRender } = props;
     const visibilityControlled = typeof visibilityToggle === 'object' && visibilityToggle.visible !== undefined;
-    const [visible, setVisible] = useState(() => visibilityControlled ? visibilityToggle.visible : false);
+    const [visible, setVisible] = useState(() => (visibilityControlled ? visibilityToggle.visible : false));
     useEffect(() => {
         if (visibilityControlled) {
             setVisible(visibilityToggle.visible);
@@ -51,8 +51,8 @@ const Password = forwardRef((props, ref) => {
         type: visible ? 'text' : 'password',
         suffix: suffixIcon,
     };
-    return (React.createElement(Input, { ref: ref, ...omittedProps }));
-});
+    return React.createElement(Input, { ...omittedProps });
+};
 if (process.env.NODE_ENV !== 'production') {
     Password.displayName = 'InputPassword';
 }

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

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

package/dist/input/TextArea/index.js

@@ -1,14 +1,13 @@
-import React, { forwardRef } from 'react';
-import styled from 'styled-components';
+import React from 'react';
 import BaseInput from '../BaseInput';
-const StyledTextArea = styled.textarea `
-    font-size: 14px;
-    padding: 4px 11px;
-`;
-const TextArea = forwardRef((props, forwardRef) => {
+import { useInput } from '../../form/hooks/useInput';
+const TextArea = (props) => {
+    const { field } = useInput({
+        name: props.name,
+    });
     return (React.createElement(BaseInput, { ...props },
-        React.createElement(StyledTextArea, { ...forwardRef, rows: 5 })));
-});
+        React.createElement("textarea", { ...field, rows: 5 })));
+};
 if (process.env.NODE_ENV !== 'production') {
     TextArea.displayName = 'TextArea';
 }

package/dist/input/index.d.ts

@@ -1,2 +1,11 @@
-export default Input;
 import Input from './Input';
+import TextArea from './TextArea';
+import Password from './Password';
+import Number from './Number';
+type InputComponent = typeof Input & {
+    TextArea: typeof TextArea;
+    Password: typeof Password;
+    Number: typeof Number;
+};
+declare const EnhancedInput: InputComponent;
+export default EnhancedInput;

package/dist/input/index.js

@@ -2,7 +2,9 @@ import Input from './Input';
 import TextArea from './TextArea';
 import Password from './Password';
 import Number from './Number';
-Input.TextArea = TextArea;
-Input.Password = Password;
-Input.Number = Number;
-export default Input;
+// Assign the sub-components to the Input component
+const EnhancedInput = Input;
+EnhancedInput.TextArea = TextArea;
+EnhancedInput.Password = Password;
+EnhancedInput.Number = Number;
+export default EnhancedInput;

package/dist/phone-number/index.d.ts

@@ -0,0 +1,7 @@
+export default PhoneNumber;
+declare function PhoneNumber({ name, className, autoComplete }: {
+    name: any;
+    className: any;
+    autoComplete?: string;
+}): React.JSX.Element;
+import React from 'react';

package/dist/phone-number/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import classNames from 'classnames';
+import Input from 'react-phone-number-input/react-hook-form-input';
+import useFormInstance from '../form/hooks/useFormInstance';
+const PhoneNumber = ({ name, className, autoComplete = 'new-password' }) => {
+    const { control } = useFormInstance();
+    //! ClassName
+    const classString = classNames('phone-number-input', {
+        [className]: className,
+    });
+    return (React.createElement(Input, { name: name, country: 'AM', international: true, maxLength: 14, control: control, withCountryCallingCode: true, className: classString, autoComplete: autoComplete }));
+};
+export default PhoneNumber;

package/dist/radio/BaseRadio.js

@@ -1,16 +1,29 @@
 import React, { forwardRef, useContext } from 'react';
-import RadioGroupContext, { RadioOptionTypeContext } from './context';
-import Checkbox from "../checkbox";
-const Radio = forwardRef(({ children, ...restProps }, forwardRef) => {
+import RadioGroupContext from './context';
+import classNames from 'classnames';
+import BaseCheckbox from '../checkbox/BaseCheckbox';
+const Radio = forwardRef(({ prefixCls = 'radio', children, ...props }, forwardRef) => {
     const groupContext = useContext(RadioGroupContext);
+    const onChange = (e) => {
+        props.onChange?.(e);
+        groupContext?.onChange?.(e);
+    };
     const radioProps = {
         ref: forwardRef,
-        ...restProps
+        ...props,
     };
     if (groupContext) {
         radioProps.ref = groupContext.forwardRef;
+        radioProps.checked = props.value === groupContext.value;
+        radioProps.onChange = onChange;
     }
-    return (React.createElement(Checkbox, { type: 'radio', ...radioProps }, children));
+    const wrapperClassString = classNames(`${prefixCls}-wrapper`, {
+        [`${prefixCls}-wrapper-checked`]: radioProps.checked,
+        [`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
+    });
+    return (React.createElement("label", { className: wrapperClassString },
+        React.createElement(BaseCheckbox, { type: 'radio', prefixCls: prefixCls, ...radioProps }),
+        children !== undefined && React.createElement("span", { className: `${prefixCls}-content` }, children)));
 });
 if (process.env.NODE_ENV !== 'production') {
     Radio.displayName = 'Radio';

package/dist/radio/Group.js

@@ -1,20 +1,37 @@
 import React, { forwardRef } from 'react';
+import { useMergedState } from '@weareconceptstudio/core';
 import { RadioGroupContextProvider } from './context';
 import Radio from './BaseRadio';
 const RadioGroup = forwardRef((props, forwardRef) => {
+    const [value, setValue] = useMergedState(props.defaultValue, {
+        value: props.value,
+    });
+    const onRadioChange = (ev) => {
+        const lastValue = value;
+        const val = ev.target.value;
+        if (!('value' in props)) {
+            setValue(val);
+        }
+        const { onChange } = props;
+        if (onChange && val !== lastValue) {
+            onChange(ev);
+        }
+    };
     const { children, options } = props;
     let childrenToRender = children;
     if (options && options.length > 0) {
-        childrenToRender = options.map(option => {
+        childrenToRender = options.map((option) => {
             if (typeof option === 'string' || typeof option === 'number') {
                 return (React.createElement(Radio, { key: option.toString(), value: option }, option));
             }
             return (React.createElement(Radio, { key: `radio-group-value-options-${option.value}`, value: option.value }, option.label));
         });
     }
-    return (React.createElement("div", null,
+    return (React.createElement("div", { className: 'radio-group' },
         React.createElement(RadioGroupContextProvider, { value: {
+                onChange: onRadioChange,
                 forwardRef: forwardRef,
+                value,
             } }, childrenToRender)));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/radio/index.js

@@ -1,5 +1,5 @@
-import BaseRadio from "./BaseRadio";
-import RadioGroup from "./Group";
+import BaseRadio from './BaseRadio';
+import RadioGroup from './Group';
 const Radio = BaseRadio;
 Radio.Group = RadioGroup;
 export default Radio;

package/dist/select/icons.d.ts

@@ -0,0 +1,3 @@
+export const bottom_arrow: React.JSX.Element;
+export const empty: React.JSX.Element;
+import React from 'react';

package/dist/select/icons.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export const bottom_arrow = (React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M15.644 25.954c-0.533 0-1.067-0.178-1.422-0.711l-12.978-15.822c-0.711-0.711-0.533-1.778 0.178-2.489s1.956-0.533 2.489 0.178l11.733 14.222 12.267-14.222c0.711-0.711 1.778-0.889 2.489-0.178s0.889 1.778 0.178 2.489l-13.689 15.822c-0.178 0.356-0.711 0.711-1.244 0.711z' })));
+export const empty = (React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M29.567 5.773v-1.153c0-0.008 0-0.017 0-0.027 0-1.603-1.298-2.903-2.9-2.907h-21.334c-1.587 0.019-2.867 1.31-2.867 2.9 0 0.012 0 0.024 0 0.035l-0-0.002v1.153c-1.414 0.303-2.459 1.538-2.467 3.019v18.414c0 0 0 0 0 0 0 1.713 1.387 3.103 3.1 3.107h25.794c1.716 0 3.107-1.391 3.107-3.107v0-18.413c-0.004-1.473-1.034-2.704-2.413-3.016l-0.021-0.004zM30.667 8.793v5.767h-1.1v-7.393c0.65 0.266 1.1 0.894 1.1 1.627v0zM5.333 3.020h21.333c0.855 0.019 1.54 0.716 1.54 1.573 0 0.010-0 0.019-0 0.028l0-0.001v9.94h-3.82c-0.998 0.001-1.848 0.64-2.162 1.531l-0.005 0.016-0.587 1.687c-0.127 0.388-0.484 0.663-0.906 0.667h-9.46c-0.422-0.003-0.78-0.279-0.905-0.66l-0.002-0.007-0.587-1.687c-0.322-0.908-1.173-1.547-2.173-1.547-0 0-0 0-0 0h-3.833v-9.94c-0-0.008-0-0.017-0-0.027 0-0.867 0.701-1.57 1.567-1.573h0zM2.467 7.167v7.393h-1.133v-5.767c0-0.733 0.45-1.361 1.088-1.622l0.012-0.004zM28.893 28.98h-25.793c-0.977-0.004-1.767-0.796-1.767-1.773 0 0 0 0 0 0v0-11.333h6.267c0.425 0 0.785 0.277 0.911 0.66l0.002 0.007 0.587 1.68c0.319 0.907 1.168 1.546 2.167 1.547h9.46c0.998-0.001 1.848-0.64 2.162-1.531l0.005-0.016 0.587-1.68c0.127-0.388 0.484-0.663 0.906-0.667h6.28v11.333c0 0.979-0.794 1.773-1.773 1.773v0z' }),
+    React.createElement("path", { d: 'M13.020 11.387c0.12 0.12 0.286 0.193 0.469 0.193 0.001 0 0.003 0 0.004 0h-0c0.182-0.001 0.347-0.074 0.467-0.193l-0 0 2.040-2.053 2.033 2c0.12 0.12 0.286 0.193 0.469 0.193 0.001 0 0.003 0 0.004 0h-0c0.182-0.001 0.347-0.074 0.467-0.193l-0 0c0.12-0.12 0.194-0.287 0.194-0.47s-0.074-0.35-0.194-0.47l0 0-2.033-2.040 2.033-2c0.143-0.123 0.233-0.304 0.233-0.506 0-0.368-0.298-0.667-0.667-0.667-0.202 0-0.383 0.090-0.506 0.232l-0.001 0.001-2.033 2.053-2.040-2c-0.123-0.143-0.304-0.233-0.506-0.233-0.368 0-0.667 0.298-0.667 0.667 0 0.202 0.090 0.383 0.232 0.506l0.001 0.001 2 2-2 2.040c-0.12 0.12-0.194 0.287-0.194 0.47s0.074 0.35 0.194 0.47l-0-0z' })));

package/dist/select/index.d.ts

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

package/dist/select/index.js

@@ -1,25 +1,62 @@
-import React, { forwardRef, useState, useCallback } from 'react';
-import ReactSelect from 'react-select';
+import React, { useState } from 'react';
+import ReactSelect, { components } from 'react-select';
+import classNames from 'classnames';
+import { bottom_arrow, empty } from './icons';
+import { useInput } from '../form/hooks/useInput';
 import useFormInstance from '../form/hooks/useFormInstance';
-const Select = forwardRef((props, forwardRef) => {
-    const { name, multiple = false, allowClear = false, allowSearch = true, disabled = false, loading = false, options = [], } = props;
+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 { translate } = useTranslation();
     const formInstance = useFormInstance();
-    const [val, setVal] = useState(formInstance.getValues()[name] || (multiple ? [] : ''));
-    const handleChange = useCallback((newVal) => {
-        let vals;
-        if (multiple) {
-            vals = newVal.map(item => item.value);
-        }
-        else {
-            vals = newVal.value;
-        }
-        formInstance.setValue(name, vals);
-        setVal(vals);
-    }, [name, multiple]);
-    return (React.createElement("div", null,
-        React.createElement("input", { type: 'hidden', ...forwardRef }),
-        React.createElement(ReactSelect, { options: options, onChange: handleChange, value: options.filter((opt) => multiple ? val.includes(opt.value) : opt.value === val), isMulti: multiple, isClearable: allowClear, isSearchable: allowSearch, isDisabled: disabled, isLoading: loading })));
-});
+    let selectProps = {};
+    if (formInstance == null) {
+        const [val, setVal] = useState(value);
+        selectProps = {
+            onChange: (e) => {
+                onChange && onChange(e.value);
+                setVal(e.value);
+            },
+            value: val,
+        };
+    }
+    else {
+        const { field } = useInput({
+            type: 'select',
+            multiple,
+            name,
+            onChange,
+        });
+        selectProps = field;
+    }
+    //! ClassName
+    const classString = classNames('react-select-container', {
+        [className]: className,
+    });
+    //! Custom Placeholder
+    const Placeholder = (props) => {
+        return React.createElement(components.Placeholder, { ...props }, translate(placeholder));
+    };
+    //! Custom DropdownIndicator
+    const DropdownIndicator = (props) => {
+        return React.createElement(components.DropdownIndicator, { ...props }, select_arrow || bottom_arrow);
+    };
+    //! Custom Components
+    const customComponents = {
+        Placeholder,
+        DropdownIndicator,
+    };
+    //! Custom No Options Message
+    const customNoOptionsMessage = () => {
+        return (React.createElement("div", { className: 'no-options-block' },
+            select_empty || empty,
+            React.createElement("p", { className: `no-options` }, 'No Data')));
+    };
+    return (React.createElement(ReactSelect
+    // unstyled
+    // menuIsOpen={true}
+    , { ...selectProps, options: options, isMulti: multiple, isLoading: loading, isDisabled: disabled, className: classString, isClearable: allowClear, isSearchable: allowSearch, components: customComponents, classNamePrefix: 'react-select', noOptionsMessage: customNoOptionsMessage, value: options.filter((opt) => (multiple ? selectProps.value.includes(opt.value) : opt.value === selectProps.value)) }));
+};
 if (process.env.NODE_ENV !== 'production') {
     Select.displayName = 'Select';
 }

package/dist/styles/formStyle.d.ts

@@ -0,0 +1,2 @@
+export default FormStyle;
+declare const FormStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;