techsbcn-storybook 0.17.3 → 0.19.0

package/dist/components/fields/SelectFieldComponent/SelectAsyncField.d.ts

@@ -21,6 +21,7 @@ interface SelectAsyncFieldProps {
     label?: string;
     menuPlacement?: MenuPlacement;
     value?: any[];
+    getOptionLabel?: (option: any) => any;
 }
 export declare const SelectAsyncField: React.FunctionComponent<SelectAsyncFieldProps>;
 export {};

package/dist/components/fields/SelectFieldComponent/SelectField.d.ts

@@ -11,6 +11,7 @@ interface SelectFieldProps {
     disabled?: boolean;
     onChange?: (value: any, name: string) => void;
     onChangeValue?: (value: any) => void;
+    onChangeOption?: (option: any, name?: string) => void;
     invalid?: boolean;
     isClearable?: boolean;
     helperText?: string;
@@ -20,6 +21,8 @@ interface SelectFieldProps {
     menuPlacement?: MenuPlacement;
     isLoading?: boolean;
     value?: any[];
+    getOptionLabel?: (option: any) => any;
+    addExtraOption?: any;
 }
 export declare const SelectField: React.FunctionComponent<SelectFieldProps>;
 export {};

package/dist/components/layouts/DrawerLayout/DrawerSidebar/DrawerSidebar.d.ts

@@ -5,6 +5,7 @@ interface DrawerSidebarProps {
     open?: boolean;
     headerComponents?: React.ReactNode;
     footerComponents?: React.ReactNode;
+    children?: React.ReactNode;
 }
 export declare const DrawerSidebar: React.FC<DrawerSidebarProps>;
 export {};

package/dist/components/layouts/MainLayoutSimple/MainLayoutSimple.d.ts

@@ -4,6 +4,7 @@ interface MainLayoutSimpleProps {
     lateralComponent?: React.ReactNode;
     mainComponent: any;
     headerComponent?: React.ReactNode;
+    children?: React.ReactNode;
 }
 export declare const MainLayoutSimple: React.FC<MainLayoutSimpleProps>;
 export {};

package/dist/components/layouts/Standard/AppHeader/AppHeader.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import './AppHeader.scss';
 interface AppHeaderProps {
     handleDrawerOpen: () => void;
+    children?: React.ReactNode;
 }
 export declare const AppHeader: React.FC<AppHeaderProps>;
 export {};

package/dist/components/layouts/Standard/AppSidebar/AppSidebar.d.ts

@@ -5,6 +5,7 @@ interface AppSidebarProps {
     open?: boolean;
     headerComponents?: React.ReactNode;
     footerComponents?: React.ReactNode;
+    children?: React.ReactNode;
 }
 export declare const AppSidebar: React.FC<AppSidebarProps>;
 export {};

package/dist/components/modals/ModalComponent.d.ts

@@ -12,6 +12,7 @@ interface ModalComponentProps {
     loading?: boolean;
     onHide: () => void;
     dividers?: boolean;
+    children?: React.ReactNode;
 }
 export declare const ModalComponent: React.FC<ModalComponentProps>;
 export {};

package/dist/components/wrappers/MainWrapperComponent/MainWrapperComponent.d.ts

@@ -7,6 +7,7 @@ interface MainWrapperComponentProps {
     loadingProgressBar?: boolean;
     headerProps?: SearchComponentProps;
     divider?: boolean;
+    children?: React.ReactNode;
 }
 export declare const MainWrapperComponent: React.FC<MainWrapperComponentProps>;
 export {};

package/dist/components/wrappers/PublicFormWrapper/PublicFormWrapper.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import './PublicFormWrapper.scss';
 interface PublicFormWrapperProps {
     className?: string;
+    children?: React.ReactNode;
 }
 export declare const PublicFormWrapper: React.FC<PublicFormWrapperProps>;
 export {};

package/dist/techsbcn-storybook.cjs.development.js

@@ -294,7 +294,7 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
   })) : React__default.createElement(React__default.Fragment, null))));
 };
 
-var css_248z$4 = ".table-component .paper-container {\n  box-shadow: none;\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root {\n  padding: 0 !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .Mui-checked {\n  color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n  color: #212529 !important;\n}\n.table-component .paper-container .table-container {\n  border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container.with-scroll {\n  max-height: 68vh;\n}\n.table-component .paper-container .table-container .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container .table-column:last-child {\n  border-right: none !important;\n  border-radius: 0 5px 5px 0;\n}\n.table-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: 1rem !important;\n  padding: 10px !important;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 2px solid #e0e0e0;\n}\n.table-component .paper-container .table-container .table-column .table-header-cell {\n  color: black;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-component .paper-container .table-container .table-rows.row-click {\n  cursor: pointer;\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows .Mui-selected {\n  background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n  padding: 6px !important;\n  overflow: hidden;\n}\n.table-component .paper-container .table-container .table-rows .img-table {\n  width: 100%;\n  height: 110px;\n}\n.table-component .paper-container .table-container .table-rows .img-table img {\n  object-fit: contain;\n}\n.table-component .paper-container .table-container .table-rows .actions {\n  float: right;\n}\n.table-component .paper-container .table-container .table-rows .btn-action {\n  color: rgba(0, 0, 0, 0.54);\n  display: inline-block;\n  text-decoration: none;\n  font-size: 1.6em !important;\n  padding: 0px 7px;\n  cursor: pointer;\n}\n.table-component .paper-container .MuiTable-root.loading {\n  opacity: 0.5;\n}\n.table-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n  width: 80px !important;\n  height: 80px !important;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 5px;\n  margin: auto;\n  color: grey;\n}\n.table-component .paper-container .MuiTablePagination-root {\n  overflow: unset;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiToolbar-root {\n  justify-content: center !important;\n  flex-wrap: wrap;\n  padding: 0px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiTablePagination-spacer {\n  flex: 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page {\n  border-radius: 0px;\n  margin: 1px;\n  color: white !important;\n  background-color: #3f4d67;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page.Mui-selected {\n  background-color: #3299C7;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li button {\n  padding: 14px;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-child(2) .MuiPaginationItem-page {\n  border-radius: 5px 0 0 5px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-last-child(2) .MuiPaginationItem-page {\n  border-radius: 0 5px 5px 0 !important;\n}\n@media (max-width: 992px) {\n  .table-component .paper-container .table-container {\n    max-height: 60vh;\n    border-top: 1px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .MuiTable-root {\n    border-collapse: collapse !important;\n  }\n  .table-component .paper-container .table-container .MuiTableHead-root {\n    display: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows {\n    border-bottom: 2px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n    width: auto;\n    border-bottom: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n    font-size: 1rem;\n    vertical-align: top;\n    width: 50%;\n    height: auto;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n    display: inline-block;\n  }\n  .table-component .paper-container .table-container .table-rows .table-cell {\n    display: block !important;\n  }\n  .table-component .paper-container .table-container .table-rows .format-value {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 50%;\n    max-width: 299px;\n  }\n}";
+var css_248z$4 = ".table-component .paper-container {\n  box-shadow: none;\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root {\n  padding: 0 !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .Mui-checked {\n  color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n  color: #212529 !important;\n}\n.table-component .paper-container .table-container {\n  border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container.with-scroll {\n  max-height: 68vh;\n}\n.table-component .paper-container .table-container .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container .table-column:last-child {\n  border-right: none !important;\n  border-radius: 0 5px 5px 0;\n}\n.table-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: 1rem !important;\n  padding: 10px !important;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 2px solid #e0e0e0;\n}\n.table-component .paper-container .table-container .table-column .table-header-cell {\n  color: black;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-component .paper-container .table-container .table-rows.row-click {\n  cursor: pointer;\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows .Mui-selected {\n  background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n  padding: 6px !important;\n  overflow: hidden;\n}\n.table-component .paper-container .table-container .table-rows .img-table {\n  width: 100%;\n  height: 110px;\n}\n.table-component .paper-container .table-container .table-rows .img-table img {\n  object-fit: contain;\n}\n.table-component .paper-container .table-container .table-rows .actions {\n  float: right;\n}\n.table-component .paper-container .table-container .table-rows .btn-action {\n  color: rgba(0, 0, 0, 0.54);\n  display: inline-block;\n  text-decoration: none;\n  font-size: 1.6em !important;\n  padding: 0px 7px;\n  cursor: pointer;\n}\n.table-component .paper-container .table-container .table-rows .format-value {\n  font-size: 1rem;\n}\n.table-component .paper-container .MuiTable-root.loading {\n  opacity: 0.5;\n}\n.table-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n  width: 80px !important;\n  height: 80px !important;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 5px;\n  margin: auto;\n  color: grey;\n}\n.table-component .paper-container .MuiTablePagination-root {\n  overflow: unset;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiToolbar-root {\n  justify-content: center !important;\n  flex-wrap: wrap;\n  padding: 0px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiTablePagination-spacer {\n  flex: 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page {\n  border-radius: 0px;\n  margin: 1px;\n  color: white !important;\n  background-color: #3f4d67;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page.Mui-selected {\n  background-color: #3299C7;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li button {\n  padding: 14px;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-child(2) .MuiPaginationItem-page {\n  border-radius: 5px 0 0 5px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-last-child(2) .MuiPaginationItem-page {\n  border-radius: 0 5px 5px 0 !important;\n}\n@media (max-width: 992px) {\n  .table-component .paper-container .table-container {\n    max-height: 60vh;\n    border-top: 1px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .MuiTable-root {\n    border-collapse: collapse !important;\n  }\n  .table-component .paper-container .table-container .MuiTableHead-root {\n    display: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows {\n    border-bottom: 2px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n    width: auto;\n    border-bottom: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n    font-size: 1rem;\n    vertical-align: top;\n    width: 50%;\n    height: auto;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n    display: inline-block;\n  }\n  .table-component .paper-container .table-container .table-rows .table-cell {\n    display: block !important;\n  }\n  .table-component .paper-container .table-container .table-rows .format-value {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 50%;\n    max-width: 299px;\n  }\n}";
 styleInject(css_248z$4);
 
 var css_248z$5 = ".text-field-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 25px !important;\n}\n.text-field-component .MuiInputBase-root.no-border {\n  border: none !important;\n  padding: 0 !important;\n  width: fit-content !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: #666666 !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid #3299C7;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n  color: #666666;\n}";
@@ -860,7 +860,7 @@ TableComponent.defaultProps = {
   showTotalCount: true
 };
 
-var css_248z$6 = ".table-simple-component .paper-container {\n  box-shadow: none;\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root {\n  padding: 0 !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .Mui-checked {\n  color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n  color: #212529 !important;\n}\n.table-simple-component .paper-container .table-container {\n  border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container.with-scroll {\n  max-height: 68vh;\n}\n.table-simple-component .paper-container .table-container .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container .table-column:last-child {\n  border-right: none !important;\n  border-radius: 0 5px 5px 0;\n}\n.table-simple-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: 1rem !important;\n  padding: 10px !important;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 2px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container .table-column .table-header-cell {\n  color: black;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click {\n  cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows .Mui-selected {\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n  padding: 6px !important;\n  overflow: hidden;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table {\n  width: 100%;\n  height: 110px;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table img {\n  object-fit: contain;\n}\n.table-simple-component .paper-container .table-container .table-rows .actions {\n  float: right;\n}\n.table-simple-component .paper-container .table-container .table-rows .btn-action {\n  color: rgba(0, 0, 0, 0.54);\n  display: inline-block;\n  text-decoration: none;\n  font-size: 1.6em !important;\n  padding: 0px 7px;\n  cursor: pointer;\n}\n.table-simple-component .paper-container .MuiTable-root.loading {\n  opacity: 0.5;\n}\n.table-simple-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n  width: 80px !important;\n  height: 80px !important;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 5px;\n  margin: auto;\n  color: grey;\n}\n@media (max-width: 992px) {\n  .table-simple-component .paper-container .table-container {\n    max-height: 60vh;\n    border-top: 1px solid #cccccc;\n  }\n  .table-simple-component .paper-container .table-container .MuiTable-root {\n    border-collapse: collapse !important;\n  }\n  .table-simple-component .paper-container .table-container .MuiTableHead-root {\n    display: none !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows {\n    border-bottom: 2px solid #cccccc;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n    width: auto;\n    border-bottom: none !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n    font-size: 1rem;\n    vertical-align: top;\n    width: 50%;\n    height: auto;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n    display: inline-block;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .table-cell {\n    display: block !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .format-value {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 50%;\n    max-width: 299px;\n  }\n}";
+var css_248z$6 = ".table-simple-component .paper-container {\n  box-shadow: none;\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root {\n  padding: 0 !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .Mui-checked {\n  color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n  color: #212529 !important;\n}\n.table-simple-component .paper-container .table-container {\n  border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container.with-scroll {\n  max-height: 68vh;\n}\n.table-simple-component .paper-container .table-container .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container .table-column:last-child {\n  border-right: none !important;\n  border-radius: 0 5px 5px 0;\n}\n.table-simple-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: 1rem !important;\n  padding: 10px !important;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 2px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container .table-column .table-header-cell {\n  color: black;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click {\n  cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows .Mui-selected {\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n  padding: 6px !important;\n  overflow: hidden;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table {\n  width: 100%;\n  height: 110px;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table img {\n  object-fit: contain;\n}\n.table-simple-component .paper-container .table-container .table-rows .actions {\n  float: right;\n}\n.table-simple-component .paper-container .table-container .table-rows .btn-action {\n  color: rgba(0, 0, 0, 0.54);\n  display: inline-block;\n  text-decoration: none;\n  font-size: 1.6em !important;\n  padding: 0px 7px;\n  cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows .format-value {\n  font-size: 1rem;\n}\n.table-simple-component .paper-container .MuiTable-root.loading {\n  opacity: 0.5;\n}\n.table-simple-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n  width: 80px !important;\n  height: 80px !important;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 5px;\n  margin: auto;\n  color: grey;\n}\n@media (max-width: 992px) {\n  .table-simple-component .paper-container .table-container {\n    max-height: 60vh;\n    border-top: 1px solid #cccccc;\n  }\n  .table-simple-component .paper-container .table-container .MuiTable-root {\n    border-collapse: collapse !important;\n  }\n  .table-simple-component .paper-container .table-container .MuiTableHead-root {\n    display: none !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows {\n    border-bottom: 2px solid #cccccc;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n    width: auto;\n    border-bottom: none !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n    font-size: 1rem;\n    vertical-align: top;\n    width: 50%;\n    height: auto;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n    display: inline-block;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .table-cell {\n    display: block !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .format-value {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 50%;\n    max-width: 299px;\n  }\n}";
 styleInject(css_248z$6);
 
 var SimpleTableComponent = function SimpleTableComponent(props) {
@@ -1621,6 +1621,10 @@ var css_248z$f = ".select-field .MuiFormLabel-root {\n  color: #666666 !importan
 styleInject(css_248z$f);
 
 var SelectField = function SelectField(props) {
+  var getOptions = function getOptions() {
+    return props.addExtraOption ? [props.addExtraOption].concat(props.options) : props.options;
+  };
+
   return React__default.createElement(_.Box, {
     className: "select-field",
     display: "flex",
@@ -1630,7 +1634,7 @@ var SelectField = function SelectField(props) {
     isMulti: props.isMulti,
     name: props.name,
     placeholder: props.placeholder,
-    options: props.options,
+    options: getOptions(),
     className: "basic-multi-select  " + (props.className ? props.className : '') + " " + (props.invalid ? 'has-error' : ''),
     classNamePrefix: "custom-select select",
     onChange: function onChange(option) {
@@ -1640,6 +1644,7 @@ var SelectField = function SelectField(props) {
       props.onChangeValue && props.onChangeValue(option && option.length > 0 ? option.map(function (o) {
         return o.value;
       }) : option ? option.value : option);
+      props.onChangeOption && props.onChangeOption(option, props.name);
     },
     ref: props.inputRef,
     isDisabled: props.disabled,
@@ -1647,7 +1652,8 @@ var SelectField = function SelectField(props) {
     isSearchable: props.isSearchable,
     isLoading: props.isLoading,
     menuPlacement: props.menuPlacement,
-    value: props.value
+    value: props.value,
+    getOptionLabel: props.getOptionLabel
   }), props.helperText && React__default.createElement("div", {
     className: "helper-text " + (props.invalid ? 'has-error' : '')
   }, props.helperText));
@@ -2543,7 +2549,8 @@ var SelectAsyncField = function SelectAsyncField(props) {
     isClearable: props.isClearable,
     loadOptions: loadOptions,
     menuPlacement: props.menuPlacement,
-    value: props.value
+    value: props.value,
+    getOptionLabel: props.getOptionLabel
   }), props.helperText && React__default.createElement("div", {
     className: "helper-text " + (props.invalid ? 'has-error' : '')
   }, props.helperText));