groundfloor-react-ui 1.0.21 → 1.2.0

package/components/Inputs/DropdownSelect.js

@@ -116,11 +116,13 @@ const Wrapper = styled.div`
 
         .text-main-alt {
             color:${({ theme }) => theme.textColor} !important;
-            margin-right: 2px;
+            margin-right: 0px;
         }
         .text-more-alt{
             font-size:12px;
             color: ${({ theme }) => theme.neutral['neutral-2']};
+            padding-right: 0px;
+            margin-right: 0px;
 
         }
         .css-mohuvp-dummyInput-DummyInput{
@@ -191,7 +193,7 @@ export const DropdownSelect = ({
   isDisabled,
 
   isLoading,
-
+  id,
   ...props
 }) => {
 
@@ -199,7 +201,17 @@ export const DropdownSelect = ({
 
   const DropdownIndicator = (p) => {
     return (
-      <components.DropdownIndicator {...p}>
+      <components.DropdownIndicator  {...p}>
+        <IconDiv>
+          <Icon icon='triangle-down' color={'black'} size={8} />
+        </IconDiv>
+      </components.DropdownIndicator>
+    );
+  };
+
+  const ClearIndicator = (p) => {
+    return (
+      <components.ClearIndicator {...p}>
         {isClearable ? (
           <IconDiv
             onClick={() => {
@@ -210,10 +222,8 @@ export const DropdownSelect = ({
             <Icon icon='cross-icon' color={'black'} size={8} />
           </IconDiv>
         ) : null}
-        <IconDiv>
-          <Icon icon='triangle-down' color={'black'} size={8} />
-        </IconDiv>
-      </components.DropdownIndicator>
+
+      </components.ClearIndicator>
     );
   };
 
@@ -296,6 +306,16 @@ export const DropdownSelect = ({
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
+      paddingLeft: '0px',
+    }),
+    clearIndicator: (base) => ({
+      ...base,
+      height: `${height}px`,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingLeft: '0px',
+
     }),
     valueContainer: (base) => ({
       ...base,
@@ -316,15 +336,20 @@ export const DropdownSelect = ({
       boxShadow: '0px 6px 20px rgba(56, 66, 100, 0.15)',
       borderRadius: '4.32px',
       fontSize: fontSize + 'px',
+      width: '100%'
     }),
     singleValue: (base) => ({
       ...base,
       fontSize: fontSize + 'px',
       marginLeft: '0px',
+      width: 'auto'
+
     }),
     multiValue: (base) => ({
       ...base,
       marginLeft: '0px',
+      width: 'auto'
+
     }),
     input: (base) => ({
       ...base,
@@ -337,6 +362,8 @@ export const DropdownSelect = ({
       padding: '10px',
       cursor: 'pointer',
       color: '#081348',
+      width: '100%'
+
     }),
     ...props.styles,
   };
@@ -374,11 +401,12 @@ export const DropdownSelect = ({
             Option,
             ValueContainer,
             IndicatorSeparator: () => null,
-            ClearIndicator: () => null,
+            ClearIndicator,
           }}
           className='select-manage-page'
           classNamePrefix='new-select'
           name={'select-dropdown'}
+          id={id}
           onChange={setSelectedValue}
           placeholder={placeHolder}
           value={selectedValue}
@@ -390,6 +418,8 @@ export const DropdownSelect = ({
           closeMenuOnSelect={false}
           isSearchable={true}
           isLoading={isLoading}
+          isClearable={isClearable}
+
           {...props}
         />
       ) : dropdownType === 'asyncSingleSelect' ? (
@@ -401,15 +431,18 @@ export const DropdownSelect = ({
           components={{
             DropdownIndicator,
             IndicatorSeparator: () => null,
-            ClearIndicator: () => null,
+            ClearIndicator,
           }}
           className='select-manage-page'
           classNamePrefix='new-select'
           name={'select-dropdown'}
+          id={id}
           placeholder={placeHolder}
           onChange={setSelectedValue}
           isLoading={isLoading}
           isDisabled={isDisabled}
+          isClearable={isClearable}
+
           {...props}
         />
       ) : dropdownType === 'asyncMultiSelect' ? (
@@ -420,11 +453,12 @@ export const DropdownSelect = ({
             ValueContainer,
             Option,
             IndicatorSeparator: () => null,
-            ClearIndicator: () => null,
+            ClearIndicator,
           }}
           className='select-manage-page'
           classNamePrefix='new-select'
           name={'select-dropdown'}
+          id={id}
           onChange={setSelectedValue}
           placeholder={placeHolder}
           styles={stylesComp}
@@ -437,6 +471,8 @@ export const DropdownSelect = ({
           loadOptions={loadOptions}
           defaultOptions
           onInputChange={onInputChange}
+          isClearable={isClearable}
+
           {...props}
         />
       ) : (
@@ -444,11 +480,12 @@ export const DropdownSelect = ({
           components={{
             DropdownIndicator,
             IndicatorSeparator: () => null,
-            ClearIndicator: () => null,
+            ClearIndicator,
           }}
           className='select-manage-page'
           classNamePrefix='new-select'
           name={'select-dropdown'}
+          id={id}
           options={optionArr}
           placeholder={placeHolder}
           isDisabled={isDisabled}
@@ -459,6 +496,8 @@ export const DropdownSelect = ({
           styles={stylesComp}
           onChange={setSelectedValue}
           isLoading={isLoading}
+          isClearable={isClearable}
+
           {...props}
         />
       )}
@@ -526,7 +565,7 @@ DropdownSelect.propTypes = {
   /**
 *   default dropdown type
 */
-  dropdownType: PropTypes.bool,
+  dropdownType: PropTypes.string,
   /**
 *   disabled or not
 */
@@ -547,6 +586,10 @@ DropdownSelect.propTypes = {
 *   clearable or not
 */
   isClearable: PropTypes.bool,
+  /**
+*   id of the select
+*/
+  id: PropTypes.string,
 
 };
 
@@ -569,5 +612,6 @@ DropdownSelect.defaultProps = {
   isRequired: false,
   dropdownType: 'singleSelect',
   isDisabled: false,
-  isLoading: false
+  isLoading: false,
+  id: ''
 };

package/components/Inputs/DropzoneInput.js

@@ -125,6 +125,7 @@ export const DropzoneInput = ({
     singleFile,
     messageSize,
     additionalText,
+    id,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor;
@@ -242,6 +243,7 @@ export const DropzoneInput = ({
                 <InputFile
                     ref={fileInputRef}
                     type='file'
+                    id={id}
                     multiple={singleFile == true ? false : true}
                     onChange={onFilesAdded}
                     onClick={(e) => (e.target.value = null)}
@@ -426,6 +428,10 @@ DropzoneInput.propTypes = {
     /**
      * Plus icon after file name is for file from local and cloud icon is for file from server
      */
+    /**
+     * id of the file input 
+     */
+     id: PropTypes.string
 };
 
 DropzoneInput.defaultProps = {
@@ -440,4 +446,5 @@ DropzoneInput.defaultProps = {
     customFileNameStyles: {},
     messageSize: 100,
     additionalText: '',
+    id: ''
 };

package/components/Inputs/NumericInput.js

@@ -96,6 +96,7 @@ export const NumericInput = ({
   iconAfter,
   onChange,
   theme,
+  id,
   ...props
 }) => {
   const handleChange = (e) => {
@@ -118,6 +119,7 @@ export const NumericInput = ({
             value={inputValue}
             onChange={handleChange}
             type='number'
+            id={id}
           />
           <div className='input-icon'>{iconAfter}</div>
         </TextBox>
@@ -147,6 +149,10 @@ NumericInput.propTypes = {
    * custom style of input element
    */
   inputStyle: PropTypes.object,
+   /**
+   * id of the number input
+   */
+    id: PropTypes.string,
 };
 
 NumericInput.defaultProps = {
@@ -155,4 +161,5 @@ NumericInput.defaultProps = {
   labelInline: false,
   inputStyle: {},
   inputValue: null,
+  id:''
 };

package/components/Inputs/PasswordInput.js

@@ -43,7 +43,7 @@ TextWrapper.defaultProps = {
 };
 
 const Input = styled.input`
-  width: inherit;
+  width: auto;
   -webkit-text-security:  ${({ showEye }) => showEye ? 'none' : 'disc'}  ;
 
   //Set the styles from the default styles object
@@ -94,6 +94,8 @@ export const PasswordInput = ({
   labelInline,
   isValid,
   rulesStyle,
+  id,
+  showHideIcon,
   ...props
 }) => {
   const [showEye, setShowEye] = useState(false);
@@ -145,17 +147,20 @@ export const PasswordInput = ({
           <Input
             inputStyle={inputStyle}
             type={'text'}
+            id={id}
             showEye={showEye}
             theme={theme}
             defaultInputStyle={'input-wrapper'}
             inBuiltCss={defaultStyles}
             {...props}
           />
+          {showHideIcon === true ? 
           <div className='input-icon' onClick={() => setShowEye(!showEye)}>
-            {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
-          </div>
+          {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
+        </div>: ''
+          }
         </TextWrapper>
-        <div style={{ ...rulesStyle, marginLeft: '5px' }}>{passwordRules}</div>
+        {passwordRules ? <div style={{ ...rulesStyle, marginLeft: '5px' }}>{passwordRules}</div> : ''}
       </div>
       {errMsg.length > 0 && <div className='err-text'>{errMsg}</div>}
     </Form>
@@ -208,6 +213,14 @@ PasswordInput.propTypes = {
    *	styles of password rules
    */
   rulesStyle: PropTypes.object,
+  /**
+   *	id of the password input
+   */
+  id: PropTypes.string,
+  /**
+   *	hide icon shows or not
+   */
+   showHideIcon: PropTypes.bool,
 };
 
 PasswordInput.defaultProps = {
@@ -223,4 +236,7 @@ PasswordInput.defaultProps = {
   inputStyle: {},
   passwordRules: '',
   rulesStyle: {},
-};
+  id: '',
+  showHideIcon: true
+};
+

package/components/Inputs/RadioInput.js

@@ -93,6 +93,9 @@ const WrapperDiv = styled.div`
   align-items: center;
   display: flex;
   gap: 10px;
+
+  // custom styles
+  ${({ WrapperDivStyle }) => WrapperDivStyle}
 `;
 
 const ParentDiv = styled.div`
@@ -117,6 +120,7 @@ export const RadioInput = ({
     inline,
     defaultBorderColor,
     defaultOptionColor,
+    WrapperDivStyle,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor;
@@ -128,7 +132,9 @@ export const RadioInput = ({
                 {options.map((item, i) => {
                     return (
                         <WrapperDiv
+                        WrapperDivStyle={WrapperDivStyle}
                             key={i + Math.random() * 101}
+                            id={item.id}
                             inline={inline}
                             onClick={() => {
                                 !item?.disabled && onChange(item.value);
@@ -206,15 +212,27 @@ RadioInput.propTypes = {
     inline: PropTypes.bool,
     /**
        *	RadioButton Contents i.e:- 
-         [{ label: "First Radio Button", value: "first", disabled:true, disabledColor: '#ae3232' },
-          { label: "Second Radio Button", value: "second" },
-          { label: "Third Radio Button", value: "third" }]
+         [
+    {
+      label: 'First Radio Button',
+      value: 'first',
+      disabled: true,
+      disabledColor: '#ae3232',
+      id: '1'
+    },
+    { label: 'Second Radio Button', value: 'second', id: '2' },
+    { label: 'Third Radio Button', value: 'third', id: '3' },
+  ]
        */
     options: PropTypes.array,
     /**
      *	RadioButton style object
      */
     optionStyle: PropTypes.object,
+    /**
+   *	RadioButton wraperdiv style object
+   */
+   WrapperDivStyle: PropTypes.object,
     /**
      *	RadioButton checked value
      */
@@ -269,4 +287,5 @@ RadioInput.defaultProps = {
     radioInnerCircleStyle: {},
     width: '14px',
     height: '14px',
+    WrapperDivStyle: {}
 };

package/components/Inputs/SearchInput.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon } from '../Icon';
 import { TextInput } from './TextInput';
 
-export const SearchInput = ({ label, placeholder, handleSearch, searchInput, customStylesForm, customStyleObject, textBoxStyle, ...props }) => {
+export const SearchInput = ({ label, placeholder, handleSearch, searchInput, customStylesForm, customStyleObject, textBoxStyle, id, ...props }) => {
 
     return <TextInput
         iconAfter={<Icon icon='magnifier-icon' />}
@@ -11,6 +11,7 @@ export const SearchInput = ({ label, placeholder, handleSearch, searchInput, cus
         placeholder={placeholder}
         ref={searchInput}
         onChange={handleSearch}
+        id={id}
         {...props}
     />
 }

package/components/Inputs/Signature.js

@@ -148,6 +148,7 @@ export const SignatureInput = ({
     setValueForSignatureDrawing,
     imageURL,
     setImageURL,
+    id,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor;
@@ -264,6 +265,7 @@ export const SignatureInput = ({
                         customInputStyle={customInputStyle}
                         onBlur={() => setIsMyInputFocused(false)}
                         onFocus={() => setIsMyInputFocused(true)}
+                        id={id}
                         value={value}
                         defaultColor={defaultColor}
                         theme={activeTheme}
@@ -280,6 +282,7 @@ export const SignatureInput = ({
                     >
                         <SignaturePad
                             ref={pad}
+                            id={id}
                             redrawOnResize
                             height={75}
                             options={{ minWidth: 1, maxWidth: 1, penColor: '#444444' }}
@@ -346,6 +349,10 @@ SignatureInput.propTypes = {
      *	Function that sets Image url of the Signature drawing
      */
     setImageURL: PropTypes.func,
+    /**
+     *	id of the signature input
+     */
+    id: PropTypes.string,
 };
 
 SignatureInput.defaultProps = {
@@ -358,4 +365,5 @@ SignatureInput.defaultProps = {
     imageURL: '',
     setImageURL: () => { },
     setValueForSignatureDrawing: () => { },
+    id: ''
 };

package/components/Inputs/TextArea.js

@@ -82,6 +82,7 @@ export const TextArea = React.forwardRef(
             isValid,
             rows,
             cols,
+            id,
             ...props
         },
         ref
@@ -137,6 +138,7 @@ export const TextArea = React.forwardRef(
                         cols={cols}
                         rows={rows}
                         inBuiltCss={defaultStyles}
+                        id={id}
                         {...props}
                         size='1'
                     />
@@ -189,6 +191,10 @@ TextArea.propTypes = {
      *	custom style of textbox label
      */
     inputStyle: PropTypes.object,
+    /**
+    *	id of the textarea input
+    */
+    id: PropTypes.string,
 };
 
 TextArea.defaultProps = {
@@ -204,4 +210,5 @@ TextArea.defaultProps = {
     inputStyle: {},
     rows: 3,
     // cols: 100
+    id: ''
 };

package/components/Inputs/TextInput.js

@@ -37,7 +37,7 @@ const TextWrapper = styled.div`
 `;
 
 const Input = styled.input`
-  width: inherit;
+  width: 98%;
   //Set the styles from the default styles object
   ${({ inBuiltCss, defaultInputStyle }) => {
 		return getDefaultStyles(inBuiltCss, defaultInputStyle);
@@ -85,6 +85,7 @@ export const TextInput = ({
 	type,
 	theme,
 	isDisabled,
+	id,
 	...props
 }) => {
 
@@ -130,6 +131,7 @@ export const TextInput = ({
 					inputStyle={inputStyle}
 					type={type}
 					theme={theme}
+					id={id}
 					defaultInputStyle={'input-wrapper'}
 					isDisabled={isDisabled}
 					disabled={isDisabled}
@@ -195,7 +197,11 @@ TextInput.propTypes = {
  *	receives theme object
  */
 	theme: PropTypes.object,
-
+	/**
+   *	id of the text input
+   */
+   id: PropTypes.string,
+ 
 };
 
 Input.defaultProps = {
@@ -224,5 +230,6 @@ TextInput.defaultProps = {
 	labelStyle: {},
 	inputStyle: {},
 	type: 'text',
-	isDisabled: false
+	isDisabled: false,
+	id: ''
 };

package/components/Inputs/TimeInput.js

@@ -89,6 +89,7 @@ export const TimeInput = ({
   minute,
   period,
   onChange,
+  id,
   ...props
 }) => {
   const activeTheme = useTheme() || defaultThemeColor;
@@ -121,7 +122,7 @@ export const TimeInput = ({
         {label}
       </Label>
       <div>
-        <TextBox theme={activeTheme} {...props}>
+        <TextBox theme={activeTheme} id={id} {...props}>
           <Input theme={activeTheme} value={hour} onChange={hourChange} />
           :
           <Input theme={activeTheme} value={minute} onChange={minuteChange} />
@@ -166,6 +167,10 @@ TimeInput.propTypes = {
    *	Error Message
    */
   errMsg: PropTypes.string,
+  /**
+   *	id of the time input
+   */
+   id: PropTypes.string,
 };
 
 TimeInput.defaultProps = {
@@ -177,4 +182,5 @@ TimeInput.defaultProps = {
   labelInline: false,
   isValid: true,
   errMsg: '',
+  id: ''
 };

package/components/Inputs/ToggleSwitch.js

@@ -70,6 +70,7 @@ export const ToggleSwitch = ({
     trueLabel,
     falseLabel,
     optionStyle,
+    id,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor;
@@ -140,6 +141,10 @@ ToggleSwitch.propTypes = {
      *	 label when toggle state is not checked
      * */
     falseLabel: PropTypes.string,
+    /**
+    *	id of the Toggle switch
+    */
+    id: PropTypes.string,
 };
 
 ToggleSwitch.defaultProps = {
@@ -148,4 +153,5 @@ ToggleSwitch.defaultProps = {
     falseLabel: 'No',
     customSwitchStyle: {},
     customToggleBoxStyle: {},
+    id: ''
 };

package/components/Inputs/index.js

@@ -1,14 +1,15 @@
-export * from './TextInput';
 export * from './CheckBoxInput';
-export * from './TimeInput';
-export * from './ToggleSwitch';
-export * from './RadioInput';
-export * from './DropzoneInput';
+export * from './ColorInput';
 export * from './DateSelect';
-export * from './Signature';
-export * from './TextArea';
-export * from './NumericInput';
 export * from './DropdownSelect';
+export * from './DropzoneInput';
+export * from './NumericInput';
+export * from './PasswordInput';
+export * from './RadioInput';
 export * from './SearchInput';
-export * from './PasswordInput'
+export * from './Signature';
+export * from './TextArea';
+export * from './TextInput';
+export * from './TimeInput';
+export * from './ToggleSwitch';
 

package/components/Modal/ModalComp.js

@@ -68,7 +68,7 @@ const ModalBody = styled.div`
 
 const ContentWrapper = styled.div`
   max-height: 60vh;
-  overflow-y: scroll;
+  overflow-y: auto;
 `
 
 const ModalFooter = styled.div`