odaptos_design_system 1.2.8 → 1.3.1

package/src/SingleSelect/SingleSelect.tsx

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import React, { useEffect, useState } from 'react';
 import { ArrowLineDownIcon, RemoveCircledIcon } from '../Icons';
 import { Text } from '../Typography/Text';
-import './SingleSelect.scss';
+import styles from './SingleSelect.modules.scss';
 
 const CssTextField = styled(TextField)({
   '& .MuiInputBase-input': {
@@ -145,7 +145,7 @@ export const SingleSelect = ({
           text={`${topLabel ? topLabel : ''} ${required ? '*' : ''}`}
           weight="bold"
           size="base"
-          className={'input_top_label'}
+          className={styles.input_top_label}
           required={required}
         />
       )}
@@ -185,11 +185,16 @@ export const SingleSelect = ({
             size="small"
             required={required}
             name={name}
+            error={error}
           />
         )}
-        clearIcon={<RemoveCircledIcon fill="black" />}
-        popupIcon={<ArrowLineDownIcon fill="black" />}
-        className={`newAutocomplete ${className}`}
+        clearIcon={
+          <RemoveCircledIcon fill="black" className={`${styles.icon}`} />
+        }
+        popupIcon={
+          <ArrowLineDownIcon fill="black" className={`${styles.icon}`} />
+        }
+        className={`${styles.newAutocomplete}`}
         {...props}
       />
       {errorText && (
@@ -198,11 +203,16 @@ export const SingleSelect = ({
           color="#F54C4C"
           italic
           text={errorText}
-          className="text-below"
+          className={styles.text_below}
         />
       )}
       {helperText && (
-        <Text size="xs" italic text={helperText} className="text-below" />
+        <Text
+          size="xs"
+          italic
+          text={helperText}
+          className={styles.text_below}
+        />
       )}
     </div>
   );

package/src/Switch/Switch.tsx

@@ -1,8 +1,9 @@
+import React from 'react';
 import { Switch as MuiSwitch } from '@mui/material';
 import { Title } from '../Typography/Title';
 import styles from './Switch.module.scss';
 import { alpha, styled } from '@mui/system';
-import React from 'react';
+
 interface SwitchProps {
   label?: string;
   checked: boolean;

package/src/Table/header.tsx

@@ -1,8 +1,8 @@
+import React from 'react';
 import { Checkbox } from '../Checkbox/Checkbox';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { Text } from '../Typography/Text';
 import styles from './header.modules.scss';
-import React from 'react';
 
 interface HeaderItem {
   name: string;

package/src/Table/index.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { TableHeader } from './header';
 import { TableRows } from './rows';
-import React from 'react';
 
 interface HeaderItem {
   name: string;

package/src/Table/table-cell.tsx

@@ -1,7 +1,7 @@
+import React from 'react';
 import { Checkbox } from '../Checkbox/Checkbox';
 import { Text } from '../Typography/Text';
 import styles from './table-cell.modules.scss';
-import React from 'react';
 
 interface TableCellProps {
   text: string;

package/src/TextInput/{TextInput.scss → TextInput.modules.scss}

@@ -9,6 +9,11 @@
   letter-spacing: var(--sdLetterSpacingButtons);
   text-align: left;
   margin: unset;
+
+  svg {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
 }
 
 input {
@@ -45,6 +50,6 @@ input.input {
   padding: 0.375rem 0.75rem;
 }
 
-.text-below {
+.text_below {
   margin: 0.25rem 0.5rem 0.25rem 0.75rem;
 }

package/src/TextInput/TextInput.tsx

@@ -1,8 +1,8 @@
+import React from 'react';
 import { InputAdornment, TextField } from '@mui/material';
 import { Text } from '../Typography/Text';
-import './TextInput.scss';
+import styles from './TextInput.modules.scss';
 import { styled } from '@mui/material/styles';
-import React from 'react';
 
 const CssTextField = styled(TextField)({
   '& .MuiInputBase-input': {
@@ -151,13 +151,13 @@ export const TextInput = (props: InputProps) => {
   const InputLabelProps = label === undefined ? { shrink: false } : {};
 
   return (
-    <div className={`${className}`} id={id}>
+    <div className={`${className} ${styles.input}`} id={id}>
       {topLabel && (
         <Text
           text={`${topLabel ? topLabel : ''}`}
           weight="bold"
           size="base"
-          className={'input_top_label'}
+          className={styles.input_top_label}
           required={required}
         />
       )}
@@ -190,7 +190,7 @@ export const TextInput = (props: InputProps) => {
         onBlur={onBlur}
         rows={rows}
         multiline={multiline}
-        onKeyPress={(e) => {
+        onKeyPress={(e: any) => {
           if (e.key === 'Enter' && onKeyDown) {
             onKeyDown();
           }
@@ -202,11 +202,16 @@ export const TextInput = (props: InputProps) => {
           color="#F54C4C"
           italic
           text={errorText}
-          className="text-below"
+          className={styles.text_below}
         />
       )}
       {helperText && (
-        <Text size="xs" italic text={helperText} className="text-below" />
+        <Text
+          size="xs"
+          italic
+          text={helperText}
+          className={styles.text_below}
+        />
       )}
     </div>
   );

package/src/Textarea/Textarea.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { TextInput } from '../TextInput/TextInput';
 import { Text } from '../Typography/Text';
-import React from 'react';
+
 import styles from './Textarea.module.scss';
 
 interface TextareaProps {

package/src/Tooltip/Layout/TooltipCustomLayout.tsx

@@ -1,8 +1,8 @@
+import React from 'react';
 import { Button } from '../../Buttons/Button';
 import { IconButton } from '../../Buttons/IconButton';
 import { Text } from '../../Typography/Text';
 import { Title } from '../../Typography/Title';
-import React from 'react';
 
 import styles from './TooltipCustomLayout.module.scss';
 

package/src/hooks/useClickOutside.ts

@@ -1,5 +1,4 @@
-import { useCallback } from 'react';
-import { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 interface Props {
   isOpen: boolean;
@@ -10,7 +9,7 @@ interface Props {
 export const useOnClickOutside = ({ handler, elementRef, isOpen }: Props) => {
   const listener = useCallback(
     (event: any) => {
-      if (!elementRef?.current?.parentElement?.contains(event.target)) {
+      if (elementRef && elementRef.current && elementRef.current.parentElement && !elementRef.current.parentElement.contains(event.target)) {
         handler(event);
       }
     },

package/src/MultiSelect/utils/textInputStyle.ts

@@ -1,78 +0,0 @@
-export const getDisabledStyle = (disabled: boolean | undefined) => {
-  if (disabled) {
-    return {
-      '& .MuiInputLabel-root': {
-        color: 'lightgray',
-        marginTop: '0.5rem',
-      },
-      '& .MuiOutlinedInput-root': {
-        marginTop: '0.5rem',
-        '& .MuiAutocomplete-endAdornment': {
-          height: '99%',
-          marginTop: '-0.20rem',
-          '& .MuiButtonBase-root': {
-            height: '99%',
-            '&:hover': {
-              background: 'transparent',
-            },
-          },
-        },
-        cursor: 'not-allowed',
-        '& > fieldset': {
-          borderColor: 'lightgray',
-          '&:hover': { borderColor: 'lightgray' },
-        },
-        '&:hover fieldset': {
-          borderColor: 'lightgray',
-        },
-        'input:disabled': {
-          cursor: 'not-allowed',
-        },
-        p: {
-          color: 'gray',
-          fontFamily: 'OpenSans',
-          fontSize: '1rem',
-        },
-      },
-    };
-  } else
-    return {
-      '& .MuiInputLabel-root': { marginTop: '0.5rem' },
-      '& .MuiOutlinedInput-root': {
-        marginTop: '0.5rem',
-        '& .MuiAutocomplete-endAdornment': {
-          height: '99%',
-          marginTop: '-0.20rem',
-          '& .MuiButtonBase-root': {
-            height: '99%',
-            '&:hover': {
-              background: 'transparent',
-            },
-          },
-        },
-        p: {
-          fontFamily: 'OpenSans',
-          fontSize: '1rem',
-        },
-      },
-    };
-};
-export const getRequiredStyle = (
-  required: boolean | undefined,
-  topLabel: string | undefined
-) => {
-  if (required && !topLabel) {
-    return {
-      '.MuiFormLabel-asterisk': {
-        color: '#db3131',
-        '&$error': {
-          color: '#db3131',
-        },
-      },
-    };
-  } else if (required && topLabel)
-    return {
-      '.MuiFormLabel-asterisk': { display: 'none' },
-    };
-  else return {};
-};