imbric-theme 0.7.2 → 0.7.4

package/layout/DynamicTable/DynamicTable.js

@@ -101,6 +101,7 @@ export const DynamicTable = ({
                 optionsSelect={addColumsData}
                 placeholder={placeholderDinamicSelect}
                 defaultValue={handleDefaultValue}
+                closeMenuOnSelect={false}
               // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
               /> : null
             }
@@ -108,22 +109,26 @@ export const DynamicTable = ({
           </div>
         ) : null}
 
-        <Horizontal size="md" />
+
 
         {isViewBtn ? (
-          <div className={getStyles('opFunctionBox3')}>
 
-            <Button
-              type={typeBtn}
-              isInline={true}
-              onClick={handleBtn}
-            >
-              {titleBtn}
-            </Button>
+          <>
 
-            <Horizontal size="md" />
+            <div className={getStyles('opFunctionBox3')}>
 
-          </div>
+              <Button
+                type={typeBtn}
+                isInline={true}
+                onClick={handleBtn}
+              >
+                {titleBtn}
+              </Button>
+
+              <Horizontal size="md" />
+
+            </div>
+          </>
         ) : null}
 
 

package/layout/DynamicTable/DynamicTable.module.css

@@ -5,6 +5,10 @@
   width: 100%;
 }
 
+.opFunctionBox3 {
+  margin-left: 16px;
+}
+
 /* .opFunctionBox1 {
   display: inline-flex;
 } */

package/layout/Navbar/Navbar.module.css

@@ -1,4 +1,3 @@
-
 /* .is-playground {
   border: var(--border-width-thick) dashed var(--color-primary);
 } */
@@ -13,6 +12,7 @@
     box-shadow: 0px 1px 4px rgb(100 116 139 / 12%);
     width: calc(100%);
     padding-left: 18px;
+    padding-right: 14px;
     min-height: 51px;
     background-color: #f2fcfc;
 }

package/molecules/ColumnTable/ColumnTable.js

@@ -105,6 +105,7 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
                       onChange={onChangeSelect}
                       optionsSelect={opSelect}
                       placeholder={props.placeholder}
+                      maxMenuHeight={110}
                     />
                     :
                     <Input

package/molecules/ColumnTable/ColumnTable.module.css

@@ -9,6 +9,9 @@
   border-bottom-color: rgba(0, 0, 0, 0.12);
   border-bottom-width: 1px;
   border-bottom-style: solid;
+  border-top-color: rgba(0, 0, 0, 0.12);
+  border-top-width: 1px;
+  border-top-style: solid;
 }
 
 .column-uppercase {

package/molecules/DynamicSelect/DynamicSelect.js

@@ -5,7 +5,25 @@ import styles from './DynamicSelect.module.css'
 import withStyles from '../../hocs/withStyles'
 
 
-export const DynamicSelect = ({ getStyles, optionsSelect, value, defaultValue, placeholder, isMulti, isClearable, isDisabled, isLoading, isRtl, isSearchable, isInline, onChange, onFocus, onBlur, closeMenuOnSelect }) => {
+export const DynamicSelect = ({
+  getStyles,
+  optionsSelect,
+  value,
+  defaultValue,
+  placeholder,
+  isMulti,
+  isClearable,
+  isDisabled,
+  isLoading,
+  isRtl,
+  isSearchable,
+  isInline,
+  onChange,
+  onFocus,
+  onBlur,
+  closeMenuOnSelect,
+  maxMenuHeight
+}) => {
 
 
   const customStyles = {
@@ -13,7 +31,9 @@ export const DynamicSelect = ({ getStyles, optionsSelect, value, defaultValue, p
     option: (base, state) => ({
       ...base,
       cursor: 'pointer',
-      height: '100%',
+      width: "max-content",
+      minWidth: "100%",
+      position: 'relative',
       backgroundColor: state.isSelected ? 'var(--color-primary)' : 'transparent',
       "&:hover": {
         backgroundColor: "var(--color-primary-highlight)",
@@ -52,6 +72,36 @@ export const DynamicSelect = ({ getStyles, optionsSelect, value, defaultValue, p
       textOverflow: 'ellipsis',
     }),
 
+    valueContainer: (base, state) => ({
+      ...base,
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      // display: "inline-grid"
+      // maxHeight: "38px",
+    }),
+
+    container: (base) => ({
+      ...base,
+      // width: "max-content",
+      minWidth: "100%",
+    }),
+
+    menu: (base) => ({
+      ...base,
+      width: "max-content",
+      minWidth: "100%",
+    }),
+
+    // menu: styles => ({ ...styles,                 
+    //   width: '500px'
+    //  })  
+
+    // indicatorsContainer: (provided, state) => ({
+    //   ...provided,
+    //   height: '50px',
+    // }),
+
   }
 
   // const handleChange = (value) => {
@@ -85,6 +135,8 @@ export const DynamicSelect = ({ getStyles, optionsSelect, value, defaultValue, p
         onFocus={onFocus}
         onBlur={onBlur}
         closeMenuOnSelect={closeMenuOnSelect}
+        maxMenuHeight={maxMenuHeight}
+        autosize={true}
       />
     </div>
 
@@ -106,7 +158,8 @@ DynamicSelect.propTypes = {
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  closeMenuOnSelect: PropTypes.bool
+  closeMenuOnSelect: PropTypes.bool,
+  maxMenuHeight: PropTypes.number
 }
 
 DynamicSelect.defaultProps = {
@@ -122,7 +175,8 @@ DynamicSelect.defaultProps = {
   onChange: () => { },
   onFocus: () => { },
   onBlur: () => { },
-  closeMenuOnSelect: true
+  closeMenuOnSelect: true,
+  maxMenuHeight: 300
 }
 
 export default withStyles(styles)(DynamicSelect)

package/molecules/RowTable/RowTable.js

@@ -103,7 +103,7 @@ export const RowTable = ({
     <tbody>
       {slice.map((item, index) => (
 
-        <tr style={{ background: item.colorRow }} className={getStyles({ 'tr-content': isClickRow })} onClick={(e) => { onClickRow(e, item) }} key={index}>
+        <tr style={{ background: item.colorRow }} className={getStyles({ 'tr-content': isClickRow }, 'tr')} onClick={(e) => { onClickRow(e, item) }} key={index}>
 
           {columnsData.map((itemTd, indexTd) => (
             itemTd.activeView ?

package/molecules/RowTable/RowTable.module.css

@@ -4,6 +4,11 @@
 
 }
 
+.tr {
+  /* border: 1px solid rgba(0, 0, 0, 0.1); */
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
 .tbl-content {
   height: max-content;
   overflow-x: auto;
@@ -18,7 +23,7 @@
   font-weight: 300;
   font-size: 12px;
   color: var(--color-font-base);
-  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+  /* border-bottom: solid 1px rgba(0, 0, 0, 0.1); */
   overflow: hidden;
   text-overflow: ellipsis;
   /* white-space: nowrap; */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",