groundfloor-react-ui 1.2.4 → 1.2.6

package/components/DesignComponent/StyledComponent/StyledComponent.js

@@ -312,22 +312,15 @@ export const MultiColumnDiv = styled.div`
   
 `;
 
-
-
-
-export const FormWrapper = ({ customStyles }) => {
-
-  const Wrapper = styled.form`
+const Wrapper = styled.form`
   width: 40vw;
   display: flex;
   justify-content: center;
   flex-direction: column;
   gap: 20px;
   ${({ customStyles }) => customStyles}
-  `;
-  return (
-    <Wrapper customStyles={customStyles}>
-    </Wrapper>
-  );
-};
+`;
 
+export const FormWrapper = ({ customStyles, children }) => {
+  return <Wrapper customStyles={customStyles}>{children}</Wrapper>;
+};

package/components/Form/FormComponent.js

@@ -3,7 +3,9 @@ import { PrimaryButton, SecondaryButton, TinyButton } from '../Button';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import {
   FormContainer,
-  FormWrapper, MultiColumnDiv, MultiColumnWrapper
+  FormWrapper,
+  MultiColumnDiv,
+  MultiColumnWrapper
 } from '../DesignComponent';
 import { Header } from '../Header';
 import {
@@ -25,7 +27,8 @@ import { Rating } from '../Rating';
 import { Table } from '../Tables';
 import { HeaderComponent } from './HeaderComponent';
 
-export const FormComponent = ({ formData, ...props }) => {
+
+export const FormComponent = ({ formData, customStyles, ...props }) => {
   const header = (item) => {
     return (
       <Fragment>
@@ -99,11 +102,15 @@ export const FormComponent = ({ formData, ...props }) => {
   };
 
   const AsyncMultiDropdownInput = (item) => {
-    return <DropdownSelect dropdownType={'asyncMultiSelect'} {...item} {...props} />;
+    return (
+      <DropdownSelect dropdownType={'asyncMultiSelect'} {...item} {...props} />
+    );
   };
 
   const AsyncSingleDropdownInput = (item) => {
-    return <DropdownSelect dropdownType={'asyncSingleSelect'} {...item} {...props} />;
+    return (
+      <DropdownSelect dropdownType={'asyncSingleSelect'} {...item} {...props} />
+    );
   };
 
   const signatureInput = (item) => {
@@ -211,8 +218,8 @@ export const FormComponent = ({ formData, ...props }) => {
 
   return (
     <Fragment>
-      <FormContainer defaultThemeColor={defaultThemeColor} >
-        <FormWrapper onSubmit={handleSubmit}  >
+      <FormContainer defaultThemeColor={defaultThemeColor}>
+        <FormWrapper onSubmit={handleSubmit} customStyles={customStyles}>
           {formData.map((row, i) => {
             if (row.length > 1) {
               return (

package/components/Form/index.js

@@ -2,3 +2,4 @@ export * from './FormComponent';
 export * from './HeaderComponent';
 export * from './SubmitComponent';
 
+

package/components/Inputs/DropdownSelect.js

@@ -118,11 +118,18 @@ const Wrapper = styled.div`
             color:${({ theme }) => theme.textColor} !important;
             margin-right: 0px;
         }
+        .text-main-alt-value {
+          color:${({ theme }) => theme.textColor} !important;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;    
+          
+      }
         .text-more-alt{
             font-size:12px;
             color: ${({ theme }) => theme.neutral['neutral-2']};
             padding-right: 0px;
-            margin-right: 0px;
+          
 
         }
         .css-mohuvp-dummyInput-DummyInput{
@@ -252,20 +259,12 @@ export const DropdownSelect = ({
         )}
 
         {children}
-        {len > 1 && <div className={`text-more-alt`}>&amp; {len - 1} more</div>}
+        {len > 1 && <span className={`text-more-alt`}>&amp; {len - 1} more</span>}
       </components.ValueContainer>
     );
   };
 
-  const ValueContainer = ({ getValue, children, ...props }) => {
-    const len = getValue().length;
-    return (
-      <components.ValueContainer {...props}>
-        {children}
-        {len > 1 && <div className={`text-more-alt`}>&amp; {len - 1} more</div>}
-      </components.ValueContainer>
-    );
-  };
+
 
   const Option = (p) => {
     const checkboxStyle = {
@@ -312,7 +311,7 @@ export const DropdownSelect = ({
 
   const MultiValue = ({ index, ...p }) => {
     const firstSelected = p?.data?.label || 'Select';
-    return !index && <div className='text-main-alt'>{firstSelected}</div>;
+    return !index && <span className='text-main-alt-value'>{firstSelected}</span>;
   };
 
   const stylesComp = {
@@ -321,7 +320,7 @@ export const DropdownSelect = ({
       border: !isValid
         ? '1px solid ' + activeTheme.ui['error']
         : '1px solid ' + activeTheme.border,
-      minWidth: '215px',
+      minWidth: '226px',
       height: `${height}px`,
       minHeight: `${height}px`,
       boxShadow: (state.isSelected || state.isFocused) && 'none',
@@ -350,6 +349,7 @@ export const DropdownSelect = ({
     valueContainer: (base) => ({
       ...base,
       display: 'flex',
+      justifyContent: 'space-between',
       fontSize: fontSize + 'px',
     }),
     indicatorsContainer: (base) => ({
@@ -368,6 +368,7 @@ export const DropdownSelect = ({
       borderRadius: '4.32px',
       fontSize: fontSize + 'px',
       width: '100%',
+      minWidth: '226px',
     }),
     singleValue: (base) => ({
       ...base,
@@ -652,6 +653,9 @@ DropdownSelect.propTypes = {
    *   iconSize of the select
    */
   leftIconSize: PropTypes.number,
+  /**
+  *   to show or hide indicator
+  */
   showIndicator: PropTypes.bool,
 };
 
@@ -679,7 +683,7 @@ DropdownSelect.defaultProps = {
   iconName: 'triangle-down',
   iconColor: 'black',
   iconSize: 8,
-  leftIcon: 'magnifier-icon',
+  leftIcon: '',
   leftIconColor: 'black',
   leftIconSize: 10,
   showIndicator: true,

package/components/Inputs/NumericInput.js

@@ -31,6 +31,7 @@ TextBox.defaultProps = {
 };
 
 const Input = styled.input`
+  width: 85%;
   border: 0;
   outline: 0;
   color: ${({ theme }) => theme.variant['primary-2']};

package/components/Inputs/PasswordInput.js

@@ -43,7 +43,7 @@ TextWrapper.defaultProps = {
 };
 
 const Input = styled.input`
-  width: auto;
+  width: 85%;
   -webkit-text-security:  ${({ showEye }) => showEye ? 'none' : 'disc'}  ;
 
   //Set the styles from the default styles object

package/components/Inputs/TextInput.js

@@ -37,7 +37,7 @@ const TextWrapper = styled.div`
 `;
 
 const Input = styled.input`
-  width: 98%;
+  width: 85%;
   //Set the styles from the default styles object
   ${({ inBuiltCss, defaultInputStyle }) => {
 		return getDefaultStyles(inBuiltCss, defaultInputStyle);

package/components/Modal/ModalComp.js

@@ -7,26 +7,6 @@ import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
 import { Icon } from '../Icon';
 
-const customStyles = {
-  overlay: {
-    zIndex: '999999',
-    backgroundColor: 'rgb(0 0 0 / 30%)'
-  },
-  content: {
-    borderColor: defaultThemeColor.border,
-    top: '50%',
-    left: '50%',
-    right: 'auto',
-    bottom: 'auto',
-    marginRight: '-50%',
-    padding: '0px',
-    transform: 'translate(-50%, -50%)',
-    minWidth: '40vw',
-    maxHeight: '85vh',
-    overflow: 'hidden',
-  },
-};
-
 const ModalClose = styled.button`
   //Set the styles from the default styles object
   ${({ theme, type }) => {
@@ -35,29 +15,19 @@ const ModalClose = styled.button`
   // custom styles
     ${({ customModalCloseStyle }) => customModalCloseStyle}
   //Set the styles from the default styles object
-    &:focus{
-      outline: none;
-      border: none;
-    }
+    &:focus {
+    outline: none;
+    border: none;
+  }
 `;
 
 const ModalHeader = styled.div`
-  .header-title {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-  }
-  .header-description {
-    margin-top: 5px;
-  }
-  h4 {
-    margin-bottom: 0;
-  }
+  margin-top: 10px;
+
   // custom styles
   ${({ customModalHeaderStyle }) => customModalHeaderStyle}
 `;
 const ModalBody = styled.div`
-
   //Set the styles from the default styles object
   ${({ theme, type }) => {
     return getDefaultStyles(theme, type);
@@ -69,7 +39,7 @@ const ModalBody = styled.div`
 const ContentWrapper = styled.div`
   max-height: 60vh;
   overflow-y: auto;
-`
+`;
 
 const ModalFooter = styled.div`
   //Set the styles from the default styles object
@@ -81,27 +51,23 @@ const ModalFooter = styled.div`
 `;
 
 const CommonDiv = styled.div`
-      padding: .5rem 3rem 0rem 3rem;
+  padding: 0.5rem 3rem 0rem 3rem;
 `;
 
 const HeaderWrapper = styled.div`
   position: sticky;
-  background-color: ${({ theme }) => theme.bgColor}; 
-  width: 100%; 
+  background-color: ${({ theme }) => theme.bgColor};
+  width: 100%;
   top: 0px;
-  border-bottom: 1px solid     ${({ theme }) => theme.border}
-
-`
-
+  border-bottom: 1px solid ${({ theme }) => theme.border};
+`;
 
 try {
-  Modal.setAppElement('#root')
-
+  Modal.setAppElement('#root');
 } catch (error) {
-  Modal.setAppElement('#__next')
+  Modal.setAppElement('#__next');
 }
 
-
 export const ModalComp = ({
   modalIsOpen,
   toggleModal,
@@ -113,10 +79,35 @@ export const ModalComp = ({
   customModalHeaderStyle,
   customModalBodyStyle,
   customModalFooterStyle,
+  customWidth,
+  customMinWidth,
+  customMaxWidth,
   ...props
 }) => {
   const activeTheme = useTheme() || defaultThemeColor;
 
+  const customStyles = {
+    overlay: {
+      zIndex: '999999',
+      backgroundColor: 'rgb(0 0 0 / 30%)',
+    },
+    content: {
+      borderColor: defaultThemeColor.border,
+      top: '50%',
+      left: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      marginRight: '-50%',
+      padding: '0px',
+      transform: 'translate(-50%, -50%)',
+      minWidth: customMinWidth,
+      maxHeight: '85vh',
+      overflow: 'hidden',
+      width: customWidth && customWidth,
+      maxWidth: customMaxWidth && customMaxWidth,
+    },
+  };
+
   return (
     <Modal
       isOpen={modalIsOpen}
@@ -149,8 +140,7 @@ export const ModalComp = ({
           type={'modalComp-modal-body'}
           style={customModalBodyStyle}
         >
-          <CommonDiv>        {bodyContent}
-          </CommonDiv>
+          <CommonDiv> {bodyContent}</CommonDiv>
         </ModalBody>
 
         <ModalFooter
@@ -206,6 +196,7 @@ ModalComp.propTypes = {
    *	Modal Footer custom styles
    */
   customModalFooterStyle: PropTypes.object,
+  customMinWidth: PropTypes.string,
 };
 
 ModalComp.defaultProps = {
@@ -219,4 +210,7 @@ ModalComp.defaultProps = {
   customModalHeaderStyle: {},
   customModalBodyStyle: {},
   customModalFooterStyle: {},
+  customMinWidth: '40vw',
+  customWidth: '',
+  customMaxWidth: '',
 };