linear-react-components-ui 1.0.10-beta.5 → 1.0.10-beta.7

package/lib/assets/styles/drawers.scss

@@ -132,6 +132,15 @@
         }
       }
     }
+    > .waitingspinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 60px;
+      height: 60px;
+      margin-left: -30px;
+      margin-top: -30px;
+    }
   }
 }
 

package/lib/assets/styles/table.scss

@@ -26,12 +26,18 @@
     &.skeleton-transparency::before {
       @extend %skeleton-transparency;
     }
+    &.-disabled{
+      @extend %component-disabled;
+    }
   }
   > .headercontainer > .innertable > .theader > .trow,
   > .bodycontainer > .innertable > .tbody > .trow,
   > .theader > .trow,
   > .tbody > .trow {
     height: 45px;
+  }  
+  > .tbody > .trow-divider {
+    height: 45px;
   }
   > .headercontainer > .innertable > .theader > .trow > .headercolumn,
   > .bodycontainer > .innertable > .tbody > .trow > .rowcolumn,
@@ -60,6 +66,30 @@
       background-color: $component-bg-selected-color !important;
       color: $font-selected-color;
     }
+    .-divider {
+      color: $font-color-second;
+      font-family: 'Titillium Web';
+      font-weight: 700;
+      font-size: 16px;
+      text-align: center;
+      padding: .35rem;
+      &.-primary {
+        background-color: $primary-color;
+      }
+      &.-warning {
+        background-color: $warning-color;
+      }
+      &.-danger {
+        background-color: $danger-color;
+      }
+      &.-success {
+        background-color: $success-color;
+      }
+      &.-info {
+        background-color: $info-color;
+      }
+    }
+    
     &:hover {
       > .rowcolumn > .rowhover {
         display: table;

package/lib/drawer/Drawer.d.ts

@@ -3,6 +3,6 @@ import { IDrawerProps } from './types.js';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 
-declare const BaseDrawer: ({ position, customClass, children, style, customClassForContent, targetId, closeOnEsc, overlay, permissionAttr, skeletonize, handlerClose, customClassForDrawer, content, title, ...rest }: IDrawerProps) => React__default.ReactPortal;
+declare const BaseDrawer: ({ position, customClass, children, style, customClassForContent, targetId, closeOnEsc, overlay, permissionAttr, skeletonize, handlerClose, customClassForDrawer, content, title, isWaiting, ...rest }: IDrawerProps) => React__default.ReactPortal;
 
 export { BaseDrawer as default };

package/lib/drawer/Drawer.js

@@ -10,7 +10,8 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _helpers = _interopRequireDefault(require("./helpers"));
 var _permissionValidations = require("../permissionValidations");
 var _ = require(".");
-var _excluded = ["position", "customClass", "children", "style", "customClassForContent", "targetId", "closeOnEsc", "overlay", "permissionAttr", "skeletonize", "handlerClose", "customClassForDrawer", "content", "title"];
+var _spinner = _interopRequireDefault(require("../spinner"));
+var _excluded = ["position", "customClass", "children", "style", "customClassForContent", "targetId", "closeOnEsc", "overlay", "permissionAttr", "skeletonize", "handlerClose", "customClassForDrawer", "content", "title", "isWaiting"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,6 +43,8 @@ var BaseDrawer = function BaseDrawer(_ref) {
     customClassForDrawer = _ref$customClassForDr === void 0 ? '' : _ref$customClassForDr,
     content = _ref.content,
     title = _ref.title,
+    _ref$isWaiting = _ref.isWaiting,
+    isWaiting = _ref$isWaiting === void 0 ? false : _ref$isWaiting,
     rest = _objectWithoutProperties(_ref, _excluded);
   var headerProps = _extends({}, rest, {
     title: title
@@ -53,6 +56,22 @@ var BaseDrawer = function BaseDrawer(_ref) {
   var _useState = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)([hideContent], permissionAttr)),
     _useState2 = _slicedToArray(_useState, 1),
     onDenied = _useState2[0];
+  var overlayStyle = isWaiting ? {
+    opacity: 0.4,
+    pointerEvent: 'none',
+    placeContent: 'center'
+  } : {};
+  var getSpinner = function getSpinner() {
+    if (!isWaiting) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "waitingspinner"
+    }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+      style: {
+        width: 60
+      },
+      delayTime: 0
+    }));
+  };
   var setDrawerComponent = function setDrawerComponent(body, randonId) {
     var componentEl = document.createElement('div');
     componentEl.className = 'drawer-component';
@@ -115,11 +134,12 @@ var BaseDrawer = function BaseDrawer(_ref) {
       className: "".concat(position, " ").concat(customClass),
       style: style
     }, /*#__PURE__*/_react.default.createElement("div", {
+      style: overlayStyle,
       "data-testid": "drawercontent",
       className: "drawercontent ".concat(skeletonize ? '-skeletonized' : '', " ").concat(customClassForContent)
     }, title && /*#__PURE__*/_react.default.createElement(_.DrawerHeader, _extends({}, headerProps, {
       customClass: customClassForDrawer
-    })), content ? /*#__PURE__*/_react.default.createElement(_.DrawerContent, null, content) : children)));
+    })), content ? /*#__PURE__*/_react.default.createElement(_.DrawerContent, null, content) : children, getSpinner())));
   };
   return /*#__PURE__*/_reactDom.default.createPortal(drawerContent(), drawerContainerEl.current);
 };

package/lib/drawer/types.d.ts

@@ -17,6 +17,7 @@ interface IDrawerProps extends React__default.HTMLAttributes<HTMLDivElement> {
     closeOnOutsideClick?: boolean;
     content?: string;
     title?: string;
+    isWaiting?: boolean;
 }
 interface IDrawerHeaderProps extends React__default.HTMLAttributes<HTMLDivElement> {
     showCloseButton?: boolean;

package/lib/form/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Field } from './Field.js';
 export { default as FieldNumber } from './FieldNumber.js';
 export { default as FieldArray } from './FieldArray.js';
+export { default as FieldPeriod } from './FieldPeriod.js';
 import { IFormProps } from './types.js';
 import 'react';
 import '../inputs/select/types.js';
@@ -10,6 +11,6 @@ import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
 
-declare const Form: ({ submitOnPressEnterKey, dataSource, securityBeforeUnload, handlerReset, handlerSubmit, handlerValidates, style, customClass, securityTitle, securityText, onDataChange, onValidateForm, externalFieldErrors, onSubmit, skeletonize, disabled, children, }: IFormProps) => JSX.Element;
+declare const Form: ({ submitOnPressEnterKey, dataSource, securityBeforeUnload, handlerReset, handlerSubmit, handlerValidates, style, customClass, securityTitle, securityText, securityData, onDataChange, onValidateForm, externalFieldErrors, onSubmit, skeletonize, disabled, children, }: IFormProps) => JSX.Element;
 
 export { Form as default };

package/lib/form/index.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "FieldNumber", {
     return _FieldNumber.default;
   }
 });
+Object.defineProperty(exports, "FieldPeriod", {
+  enumerable: true,
+  get: function get() {
+    return _FieldPeriod.default;
+  }
+});
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -29,6 +35,7 @@ var _helpers = require("./helpers");
 var _Field = _interopRequireDefault(require("./Field"));
 var _FieldNumber = _interopRequireDefault(require("./FieldNumber"));
 var _FieldArray = _interopRequireDefault(require("./FieldArray"));
+var _FieldPeriod = _interopRequireDefault(require("./FieldPeriod"));
 require("../assets/styles/form.scss");
 var _dialog = require("../dialog");
 var _withFormSecurity = require("./withFormSecurity");
@@ -61,6 +68,7 @@ var Form = function Form(_ref) {
     customClass = _ref.customClass,
     securityTitle = _ref.securityTitle,
     securityText = _ref.securityText,
+    securityData = _ref.securityData,
     onDataChange = _ref.onDataChange,
     onValidateForm = _ref.onValidateForm,
     externalFieldErrors = _ref.externalFieldErrors,
@@ -172,7 +180,7 @@ var Form = function Form(_ref) {
   (0, _react.useEffect)(function () {
     if (!_lodash.default.isEmpty(context)) {
       var onChangedData = context.onChangedData;
-      if (!_lodash.default.isEqual(data, originalData)) {
+      if (securityData && !_lodash.default.isEqual(data, securityData)) {
         onChangedData(true);
       } else {
         onChangedData(false);

package/lib/form/types.d.ts

@@ -32,6 +32,7 @@ interface IFormProps {
     securityBeforeUnload?: boolean;
     securityTitle?: string;
     securityText?: string;
+    securityData?: object;
     externalFieldErrors?: object;
     skeletonize?: boolean;
     disabled?: boolean;

package/lib/form/withFormSecurity.js

@@ -48,7 +48,8 @@ var withFormSecurity = function withFormSecurity(WrappedComponent) {
       showQuestion: showQuestion,
       onConfirmClick: onConfirmClick,
       onUnconfirmClick: onUnconfirmClick,
-      setSecurityBeforeUnload: setSecurityBeforeUnload
+      setSecurityBeforeUnload: setSecurityBeforeUnload,
+      securityBeforeUnload: securityBeforeUnload.current
     };
     return /*#__PURE__*/_react.default.createElement(FormSecurityContext.Provider, {
       value: contextValues

package/lib/inputs/base/InputTextBase.js

@@ -75,6 +75,9 @@ var InputTextBase = function InputTextBase(props) {
   (0, _react.useEffect)(function () {
     if (handlerSetOnDenied) handlerSetOnDenied(onDenied);
   }, []);
+  var applyTabIndex = function applyTabIndex() {
+    return readOnly ? -1 : 0;
+  };
   var shouldDisable = function shouldDisable() {
     return disabled || onDenied.disabled;
   };
@@ -176,7 +179,9 @@ var InputTextBase = function InputTextBase(props) {
   }, type === 'textarea' ? /*#__PURE__*/_react.default.createElement("textarea", _extends({
     rows: props.rows,
     cols: props.cols
-  }, inputProps())) : /*#__PURE__*/_react.default.createElement("input", inputProps()), children), helpers.getRightElements(errorMessages || [], skeletonize, rightElements)), /*#__PURE__*/_react.default.createElement(_hint.default, {
+  }, inputProps())) : /*#__PURE__*/_react.default.createElement("input", _extends({
+    tabIndex: applyTabIndex()
+  }, inputProps())), children), helpers.getRightElements(errorMessages || [], skeletonize, rightElements)), /*#__PURE__*/_react.default.createElement(_hint.default, {
     visible: !!hint,
     customClass: "hint",
     description: hint

package/lib/inputs/multiSelect/ActionButtons.d.ts

@@ -6,6 +6,6 @@ import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 
-declare const ActionButtons: ({ disabled, dropdownOpened, handleOpenClose, handleCheckAll, handleUncheckAll, }: IActionButtonsProps) => JSX.Element;
+declare const ActionButtons: ({ disabled, dropdownOpened, handleOpenClose, handleCheckAll, handleUncheckAll, dropdownAlignButton, }: IActionButtonsProps) => JSX.Element;
 
 export { ActionButtons as default };

package/lib/inputs/multiSelect/ActionButtons.js

@@ -16,7 +16,9 @@ var ActionButtons = function ActionButtons(_ref) {
     dropdownOpened = _ref.dropdownOpened,
     handleOpenClose = _ref.handleOpenClose,
     handleCheckAll = _ref.handleCheckAll,
-    handleUncheckAll = _ref.handleUncheckAll;
+    handleUncheckAll = _ref.handleUncheckAll,
+    _ref$dropdownAlignBut = _ref.dropdownAlignButton,
+    dropdownAlignButton = _ref$dropdownAlignBut === void 0 ? 'left' : _ref$dropdownAlignBut;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_buttons.default, {
     disabled: disabled,
     size: "small",
@@ -32,6 +34,7 @@ var ActionButtons = function ActionButtons(_ref) {
     boxShadow: false,
     customClass: "actionbutton",
     dropdown: true,
+    dropdownAlign: dropdownAlignButton,
     showIconDropdown: false
   }, /*#__PURE__*/_react.default.createElement(_list.default, null, /*#__PURE__*/_react.default.createElement(_list.ListItem, {
     itemId: "1",

package/lib/inputs/multiSelect/Dropdown.js

@@ -143,7 +143,7 @@ var Dropdown = function Dropdown(props) {
       }
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "label"
-    }, item[descriptionKey])));
+    }, typeof descriptionKey === 'string' ? item[descriptionKey] : descriptionKey(item))));
   })));
 };
 var _default = Dropdown;

package/lib/inputs/multiSelect/helper.d.ts

@@ -1,9 +1,11 @@
-import { DataCombo } from '../../@types/DataCombo.js';
+import { GetFilteredParams } from './types.js';
+import 'react';
+import '../../@types/DataCombo.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
 
-declare const getFilteredDataCombo: ({ dataSource, descriptionKey, inputText, }: {
-    dataSource: DataCombo[];
-    descriptionKey: string;
-    inputText: string;
-}) => any[];
+declare const getFilteredDataCombo: ({ dataSource, descriptionKey, inputText, }: GetFilteredParams) => any[];
 
 export { getFilteredDataCombo as default };

package/lib/inputs/multiSelect/helper.js

@@ -9,7 +9,11 @@ var getFilteredDataCombo = function getFilteredDataCombo(_ref) {
     descriptionKey = _ref.descriptionKey,
     inputText = _ref.inputText;
   return dataSource.filter(function (item) {
-    return item[descriptionKey].toLowerCase().indexOf(inputText.toLowerCase()) > -1;
+    var _descriptionKey;
+    if (typeof descriptionKey === 'string') {
+      return item[descriptionKey].toLowerCase().indexOf(inputText.toLowerCase()) > -1;
+    }
+    return ((_descriptionKey = descriptionKey(item)) === null || _descriptionKey === void 0 ? void 0 : _descriptionKey.toLowerCase().indexOf(inputText.toLowerCase())) > -1;
   });
 };
 var _default = getFilteredDataCombo;

package/lib/inputs/multiSelect/index.js

@@ -36,7 +36,9 @@ var MultiSelectField = function MultiSelectField(props) {
     descriptionKey = props.descriptionKey,
     value = props.value,
     onBlur = props.onBlur,
-    gridLayout = props.gridLayout;
+    gridLayout = props.gridLayout,
+    _props$dropdownAlignB = props.dropdownAlignButton,
+    dropdownAlignButton = _props$dropdownAlignB === void 0 ? 'left' : _props$dropdownAlignB;
   var componentId = "multiSelect-component".concat(_uuid.default.v1());
   var _useState = (0, _react.useState)(dataSource),
     _useState2 = _slicedToArray(_useState, 2),
@@ -174,7 +176,7 @@ var MultiSelectField = function MultiSelectField(props) {
     } else if (selecteds && selecteds.length > 1) {
       newLabel = 'Múltiplos';
     } else if (selecteds && selecteds.length === 1) {
-      newLabel = selecteds[0][descriptionKey];
+      newLabel = typeof descriptionKey === 'string' ? selecteds[0][descriptionKey] : descriptionKey(selecteds[0]);
     } else {
       newLabel = 'Nenhum selecionado';
     }
@@ -234,6 +236,7 @@ var MultiSelectField = function MultiSelectField(props) {
     },
     handlerSetOnDenied: setOnDeniedValue,
     rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+      dropdownAlignButton: dropdownAlignButton,
       disabled: shouldDisabled(),
       dropdownOpened: opened,
       handleOpenClose: function handleOpenClose() {

package/lib/inputs/multiSelect/types.d.ts

@@ -5,17 +5,24 @@ import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 
+type DescriptionKey = string | ((dataSelected: DataCombo) => string);
+interface GetFilteredParams {
+    dataSource: DataCombo[];
+    descriptionKey: DescriptionKey;
+    inputText: string;
+}
 interface IActionButtonsProps {
     handleOpenClose: () => void;
     handleCheckAll: () => void;
     handleUncheckAll: () => void;
     disabled: boolean;
     dropdownOpened?: boolean;
+    dropdownAlignButton?: 'left' | 'right';
 }
 interface IDropdownMultiSelectProps {
     dataCombo: DataCombo[];
     idKey: string;
-    descriptionKey: string;
+    descriptionKey: DescriptionKey;
     inputValue: string;
     isAllChecked: boolean;
     dropdownWidth: number;
@@ -39,12 +46,13 @@ interface IDropdownMultiSelectProps {
 interface IMultiSelectProps {
     dataSource: DataCombo[];
     idKey: string;
-    descriptionKey: string;
+    descriptionKey: DescriptionKey;
     value?: any[];
     gridLayout?: string;
     onSelect: (data?: string[]) => void;
     onBlur?: (e: CustomInputEvent) => void;
     disabled?: boolean;
+    dropdownAlignButton?: 'left' | 'right';
 }
 
-export { IActionButtonsProps, IDropdownMultiSelectProps, IMultiSelectProps };
+export { DescriptionKey, GetFilteredParams, IActionButtonsProps, IDropdownMultiSelectProps, IMultiSelectProps };

package/lib/inputs/period/index.js

@@ -42,11 +42,11 @@ var PeriodPicker = function PeriodPicker(props) {
       height: '350px'
     } : _props$dialogSize,
     calendarColorStyle = props.calendarColorStyle;
-  var _useState = (0, _react.useState)(props.value && props.value.valueInitial ? (0, _moment.default)(props.value.valueInitial) : undefined),
+  var _useState = (0, _react.useState)(props.value && props.value.initial ? (0, _moment.default)(props.value.initial) : undefined),
     _useState2 = _slicedToArray(_useState, 2),
     valueInitial = _useState2[0],
     setValueInitial = _useState2[1];
-  var _useState3 = (0, _react.useState)(props.value && props.value.valueFinal ? (0, _moment.default)(props.value.valueFinal) : undefined),
+  var _useState3 = (0, _react.useState)(props.value && props.value.final ? (0, _moment.default)(props.value.final) : undefined),
     _useState4 = _slicedToArray(_useState3, 2),
     valueFinal = _useState4[0],
     setValueFinal = _useState4[1];
@@ -119,10 +119,10 @@ var PeriodPicker = function PeriodPicker(props) {
     }
   }, [valueInitial, valueFinal]);
   (0, _react.useEffect)(function () {
-    if (props.value) {
+    if (props.value && !((0, _moment.default)(props.value.initial).isSame(valueInitial) || (0, _moment.default)(props.value.final).isSame(valueFinal))) {
       var _props$value = props.value,
-        valueInitialProp = _props$value.valueInitial,
-        valueFinalProp = _props$value.valueFinal;
+        valueInitialProp = _props$value.initial,
+        valueFinalProp = _props$value.final;
       var newValueInitial;
       var newValueFinal;
       if ((0, _moment.default)(valueInitialProp, 'YYYY-MM-DD', true).isValid()) {
@@ -134,7 +134,7 @@ var PeriodPicker = function PeriodPicker(props) {
       setValueInitial(newValueInitial);
       setValueFinal(newValueFinal);
     }
-  }, [(_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.valueInitial, (_props$value3 = props.value) === null || _props$value3 === void 0 ? void 0 : _props$value3.valueFinal]);
+  }, [(_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.initial, (_props$value3 = props.value) === null || _props$value3 === void 0 ? void 0 : _props$value3.final]);
   var openCalendar = function openCalendar() {
     setShowCalendar(true);
     setShowPeriodSelection(false);
@@ -162,7 +162,7 @@ var PeriodPicker = function PeriodPicker(props) {
     }
   };
   var setValue = function setValue(e, value) {
-    var sholdOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var shouldOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     var changingAux = e ? e.target.name : '';
     var dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
     if (changingAux === 'valueInitial') {
@@ -170,7 +170,7 @@ var PeriodPicker = function PeriodPicker(props) {
     } else {
       setValueFinal(dateObj);
     }
-    if (changingAux === 'valueInitial' && !valueFinal && sholdOpenDropdown) {
+    if (changingAux === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
       var _inputFinalRef$curren;
       if (valueFinal) setChanging(valueFinal);
       setShowCalendar(false);

package/lib/inputs/period/types.d.ts

@@ -30,8 +30,8 @@ interface IPeriodDropdownProps {
 interface IPeriodPickerProps {
     label?: string;
     value?: {
-        valueInitial?: Moment | string;
-        valueFinal?: Moment | string;
+        initial?: Moment | string;
+        final?: Moment | string;
     };
     customClassForLabel?: string;
     labelUppercase?: boolean;

package/lib/inputs/select/Dropdown.js

@@ -118,7 +118,7 @@ var Dropdown = function Dropdown(props) {
       }
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "label"
-    }, item[descriptionKey])));
+    }, typeof descriptionKey === 'string' ? item[descriptionKey] : descriptionKey(item))));
   }), dataCombo && dataCombo.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "notfound"
   }, searchNotFoundText)));

package/lib/inputs/select/helper.d.ts

@@ -1,7 +1,8 @@
-import { DataCombo } from '../../@types/DataCombo.js';
 import { IDropdownSelectProps } from '../types.js';
+import { GetSimpleFilteredParams, GetMultipleFilteredParams } from './types.js';
 import 'react';
 import '../../@types/PermissionAttr.js';
+import '../../@types/DataCombo.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
@@ -10,14 +11,8 @@ import '../../@types/Position.js';
 
 declare const contentClass: (props: IDropdownSelectProps) => string;
 declare const getDropdownItemCssClass: (selected: boolean, disabled: boolean, striped: boolean) => string;
-interface GetFilteredParams {
-    dataSource: DataCombo[];
-    descriptionKey: string;
-    inputText: string;
-    currents: DataCombo[];
-}
-declare const getFilteredSimpleDataCombo: ({ dataSource, descriptionKey, inputText, }: Omit<GetFilteredParams, 'currents'>) => any[];
-declare const getFilteredMultipleDataCombo: ({ dataSource, inputText, descriptionKey, currents, }: GetFilteredParams) => any[];
+declare const getFilteredSimpleDataCombo: ({ dataSource, descriptionKey, inputText, }: Omit<GetSimpleFilteredParams, 'currents'>) => any[];
+declare const getFilteredMultipleDataCombo: ({ dataSource, inputText, descriptionKey, currents, }: GetMultipleFilteredParams) => any[];
 declare const returnDropdownDynamicStyles: ({ selectFieldRef, dropdownMaxHeight, dropdownRef }: IDropdownSelectProps) => {
     maxHeight: number;
     top: number;

package/lib/inputs/select/helper.js

@@ -21,7 +21,12 @@ var getFilteredSimpleDataCombo = function getFilteredSimpleDataCombo(_ref) {
     descriptionKey = _ref.descriptionKey,
     inputText = _ref.inputText;
   return dataSource && dataSource.filter(function (item) {
-    return item[descriptionKey].toLowerCase().indexOf(inputText.toLowerCase()) > -1;
+    var _descriptionKey;
+    if (typeof descriptionKey === 'string') {
+      var _item$descriptionKey;
+      return ((_item$descriptionKey = item[descriptionKey]) === null || _item$descriptionKey === void 0 ? void 0 : _item$descriptionKey.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1;
+    }
+    return ((_descriptionKey = descriptionKey(item)) === null || _descriptionKey === void 0 ? void 0 : _descriptionKey.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1;
   });
 };
 exports.getFilteredSimpleDataCombo = getFilteredSimpleDataCombo;
@@ -31,7 +36,11 @@ var getFilteredMultipleDataCombo = function getFilteredMultipleDataCombo(_ref2)
     descriptionKey = _ref2.descriptionKey,
     currents = _ref2.currents;
   return dataSource.filter(function (item) {
-    return item[descriptionKey].toLowerCase().indexOf(inputText.toLowerCase()) > -1 && !currents.includes(item);
+    var _descriptionKey2;
+    if (typeof descriptionKey === 'string') {
+      return item[descriptionKey].toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase()) > -1 && !currents.includes(item);
+    }
+    return ((_descriptionKey2 = descriptionKey(item)) === null || _descriptionKey2 === void 0 ? void 0 : _descriptionKey2.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1 && !currents.includes(item);
   });
 };
 exports.getFilteredMultipleDataCombo = getFilteredMultipleDataCombo;

package/lib/inputs/select/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _simple = _interopRequireDefault(require("./simple"));
 var _multiple = _interopRequireDefault(require("./multiple"));
 require("../../assets/styles/select.scss");
 var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
+var _simple = _interopRequireDefault(require("./simple"));
 var _excluded = ["gridLayout", "multiple", "value"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -19,15 +19,16 @@ var SelectField = function SelectField(props) {
     multiple = props.multiple,
     value = props.value,
     newProps = _objectWithoutProperties(props, _excluded);
-  var component = multiple ? /*#__PURE__*/_react.default.createElement(_multiple.default, _extends({
+  var component = multiple ? /*#__PURE__*/_react.default.createElement(_multiple.default, _extends({}, newProps, {
     dataSource: props.dataSource ? props.dataSource : [],
     idKey: props.idKey ? props.idKey : '',
+    value: Array.isArray(value) ? value : undefined,
     descriptionKey: props.descriptionKey ? props.descriptionKey : ''
-  }, newProps)) : /*#__PURE__*/_react.default.createElement(_simple.default, _extends({
+  })) : /*#__PURE__*/_react.default.createElement(_simple.default, _extends({}, newProps, {
     idKey: props.idKey ? props.idKey : '',
-    value: value,
+    value: !Array.isArray(value) ? value : undefined,
     descriptionKey: props.descriptionKey ? props.descriptionKey : ''
-  }, newProps));
+  }));
   if (gridLayout !== undefined) {
     return /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
       customClass: "-withinput",

package/lib/inputs/select/multiple/Selecteds.js

@@ -15,7 +15,7 @@ var Selecteds = function Selecteds(_ref) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "selecteditem",
       key: "selected-".concat(selected[idKey])
-    }, selected[descriptionKey], /*#__PURE__*/_react.default.createElement("span", {
+    }, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("span", {
       className: "close",
       role: "button",
       tabIndex: -1,

package/lib/inputs/select/multiple/index.js

@@ -50,7 +50,7 @@ var MultipleSelect = function MultipleSelect(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     selected = _useState6[0],
     setSelected = _useState6[1];
-  var _useState7 = (0, _react.useState)(''),
+  var _useState7 = (0, _react.useState)([]),
     _useState8 = _slicedToArray(_useState7, 2),
     inputValue = _useState8[0],
     setInputValue = _useState8[1];
@@ -79,6 +79,7 @@ var MultipleSelect = function MultipleSelect(props) {
   var dropdownRef = (0, _react.useRef)(null);
   var selectWrapper = (0, _react.useRef)();
   var gridElRef = (0, _react.useRef)();
+  var descriptionKeyIsString = typeof descriptionKey === 'string';
   var onScreenResize = function onScreenResize() {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
@@ -104,12 +105,12 @@ var MultipleSelect = function MultipleSelect(props) {
     if (remoteSearch) {
       if (props.onSearch) props.onSearch(filteredValue);
       setOpened(true);
-      setInputValue(filteredValue);
+      setInputValue([filteredValue]);
     } else {
       var dataComboFilter = dataSource;
-      if (filteredValue !== '') {
+      if (filteredValue.length > 0) {
         dataComboFilter = (0, _helper.getFilteredMultipleDataCombo)({
-          inputText: filteredValue,
+          inputText: [filteredValue],
           dataSource: dataSource,
           descriptionKey: descriptionKey,
           currents: currents
@@ -119,7 +120,7 @@ var MultipleSelect = function MultipleSelect(props) {
       setDataCombo(dataComboFilter);
       setOpened(true);
       if (selectedFilter) setSelected(selectedFilter);
-      setInputValue(filteredValue);
+      setInputValue([filteredValue]);
     }
   };
   var onSelect = function onSelect(select) {
@@ -127,7 +128,7 @@ var MultipleSelect = function MultipleSelect(props) {
     var currentsSelect = [].concat(_toConsumableArray(currents), [select]);
     setCurrents(currentsSelect);
     setDataCombo(dataSource);
-    setInputValue('');
+    setInputValue([]);
     setOpened(false);
     if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(function (i) {
       return i[idKey];
@@ -171,12 +172,14 @@ var MultipleSelect = function MultipleSelect(props) {
         } else {
           index = dataSource && index === 0 ? dataSource.length - 1 : index - 1;
         }
-        if (dataSource && dataSource.length && dataSource[index][props.descriptionKey]) {
-          setInputValue(dataSource[index][props.descriptionKey]);
+        if (dataSource && dataSource.length) {
+          if (descriptionKeyIsString && dataSource[index][descriptionKey]) {
+            setInputValue(dataSource[index][descriptionKey]);
+          } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataSource[index])]);
         }
         if (dataSource) setSelected(dataSource[index]);
       } else if (e.keyCode === constants.keyCodes.BACKSPACE) {
-        if (inputValue === '') {
+        if (inputValue.length === 0) {
           var currentsKeyDown = _lodash.default.dropRight(currents);
           setCurrents(currentsKeyDown);
           if (props.onSelect) props.onSelect(currentsKeyDown.map(function (i) {
@@ -238,7 +241,7 @@ var MultipleSelect = function MultipleSelect(props) {
     ref: componentRef,
     className: "select-component"
   }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
-    value: inputValue,
+    value: inputValue.toString(),
     readOnly: shouldBeReadOnly(),
     onFocus: function onFocus() {
       _onFocus();

package/lib/inputs/select/simple/index.js

@@ -55,7 +55,8 @@ var SimpleSelect = function SimpleSelect(props) {
     searchOnDropdown = _props$searchOnDropdo === void 0 ? false : _props$searchOnDropdo,
     _props$allOptions = props.allOptions,
     allOptions = _props$allOptions === void 0 ? undefined : _props$allOptions;
-  var dataSourceWithAllOptions = allOptions ? [(_ref = {}, _defineProperty(_ref, idKey, allOptions.idValue), _defineProperty(_ref, descriptionKey, allOptions.label), _ref)].concat(_toConsumableArray(dataSource)) : dataSource;
+  var descriptionKeyIsString = typeof descriptionKey === 'string';
+  var dataSourceWithAllOptions = allOptions ? [(_ref = {}, _defineProperty(_ref, idKey, allOptions.idValue), _defineProperty(_ref, descriptionKeyIsString ? descriptionKey : descriptionKey(allOptions.label), allOptions.label), _ref)].concat(_toConsumableArray(dataSource)) : dataSource;
   var _useState = (0, _react.useState)(dataSourceWithAllOptions),
     _useState2 = _slicedToArray(_useState, 2),
     dataCombo = _useState2[0],
@@ -149,7 +150,7 @@ var SimpleSelect = function SimpleSelect(props) {
     if (selectedDropdown === undefined) return;
     setOpened(false);
     setSelected(selectedDropdown);
-    setInputText(selectedDropdown[descriptionKey]);
+    if (descriptionKeyIsString) setInputText(selectedDropdown[descriptionKey]);else setInputText(descriptionKey(selectedDropdown));
     onChange(selectedDropdown);
   };
   var onOpenClose = function onOpenClose() {
@@ -226,16 +227,17 @@ var SimpleSelect = function SimpleSelect(props) {
   (0, _react.useEffect)(function () {
     if (value !== valueFromProps && dataSourceWithAllOptions.length > 0) {
       var newCurrent = null;
-      if (value) {
+      if (value !== undefined) {
         newCurrent = dataSourceWithAllOptions.find(function (i) {
           var _i$idKey;
-          return value && ((_i$idKey = i[idKey]) === null || _i$idKey === void 0 ? void 0 : _i$idKey.toString().toLowerCase()) === (value === null || value === void 0 ? void 0 : value.toString().toLowerCase());
+          return ((_i$idKey = i[idKey]) === null || _i$idKey === void 0 ? void 0 : _i$idKey.toString().toLowerCase()) === value.toString().toLowerCase();
         });
         setValueFromProps(value);
       } else if (dataSourceWithAllOptions.length > 0 && selectFirstOnEnter) {
         newCurrent = dataSourceWithAllOptions[0];
       }
       setSelected(newCurrent);
+      if (descriptionKeyIsString) setInputText(newCurrent ? newCurrent[descriptionKey] : '');else setInputText(newCurrent ? descriptionKey(newCurrent) : '');
     }
   }, [dataSourceWithAllOptions.length, value]);
   (0, _react.useEffect)(function () {

package/lib/inputs/select/types.d.ts

@@ -9,16 +9,17 @@ type AllOptions = {
     idValue?: number | null;
     label: string;
 };
+type DescriptionKey = string | ((dataSelected: DataCombo) => string);
 interface ISimpleSelectProps {
     idKey: string;
-    descriptionKey: string;
+    descriptionKey: DescriptionKey;
     dataSource?: DataCombo[];
     id?: string;
     label?: string;
     placeHolder?: string;
     hint?: string;
-    value?: string | number | boolean | number[];
     textAlign?: TextAlign;
+    value?: number | string;
     errorMessages?: string[];
     showClearButton?: boolean;
     searchOnDropdown?: boolean;
@@ -47,12 +48,13 @@ interface ISimpleSelectProps {
     onFocus?: () => void;
     allOptions?: AllOptions;
 }
-interface ISelectFieldProps extends Omit<ISimpleSelectProps, 'idKey' | 'descriptionKey'> {
+interface ISelectFieldProps extends Omit<ISimpleSelectProps, 'idKey' | 'value' | 'descriptionKey'> {
     multiple?: boolean;
     gridLayout?: string;
-    descriptionKey?: string;
+    descriptionKey?: DescriptionKey;
     idKey?: string;
     dataSource?: DataCombo[];
+    value?: number | number[] | string | string[];
     showClearButton?: boolean;
     searchOnDropdown?: boolean;
     searchNotFoundText?: string;
@@ -67,9 +69,10 @@ interface ISelectFieldProps extends Omit<ISimpleSelectProps, 'idKey' | 'descript
     autoFocus?: boolean;
     disabled?: boolean;
     required?: boolean;
+    onSelect?: (data?: string | string[]) => DataCombo;
 }
 interface IMultipleSelectProps extends Omit<ISimpleSelectProps, 'idKey' | 'value' | 'descriptionKey'> {
-    descriptionKey: string;
+    descriptionKey: DescriptionKey;
     idKey: string;
     dataSource: DataCombo[];
     searchNotFoundText?: string;
@@ -87,9 +90,20 @@ interface IMultipleSelectProps extends Omit<ISimpleSelectProps, 'idKey' | 'value
 }
 interface ISelectedsMultipleProps {
     idKey: string;
-    descriptionKey: string;
+    descriptionKey: DescriptionKey;
     currents: DataCombo[];
     handleOnUnselect: (id: string) => void;
 }
+interface GetFilteredParams {
+    dataSource: DataCombo[];
+    descriptionKey: DescriptionKey;
+    currents: DataCombo[];
+}
+interface GetSimpleFilteredParams extends GetFilteredParams {
+    inputText: number | string;
+}
+interface GetMultipleFilteredParams extends GetFilteredParams {
+    inputText: number[] | string[];
+}
 
-export { AllOptions, IMultipleSelectProps, ISelectFieldProps, ISelectedsMultipleProps, ISimpleSelectProps };
+export { AllOptions, DescriptionKey, GetFilteredParams, GetMultipleFilteredParams, GetSimpleFilteredParams, IMultipleSelectProps, ISelectFieldProps, ISelectedsMultipleProps, ISimpleSelectProps };

package/lib/inputs/types.d.ts

@@ -7,6 +7,7 @@ import { TextAlign } from '../@types/Align.js';
 import '../@types/Period.js';
 import '../@types/Position.js';
 
+type DescriptionKey = string | ((dataSelected: DataCombo) => string);
 interface IAdvancedFilterProps extends Omit<IDrawerProps, 'content'> {
     onStateChange?: (value?: boolean) => void;
     headerTitle?: string;
@@ -99,7 +100,7 @@ interface IMaskHOCProps {
 }
 interface IDropdownSelectProps {
     idKey: string;
-    descriptionKey: string;
+    descriptionKey: DescriptionKey;
     dropdownWidth: number;
     showClearButton?: boolean;
     handleOnSelect: (item?: DataCombo) => void;

package/lib/table/Row.js

@@ -21,7 +21,14 @@ var Row = function Row(props) {
     onMouseEnter = props.onMouseEnter,
     onMouseLeave = props.onMouseLeave,
     _props$rowBorder = props.rowBorder,
-    rowBorder = _props$rowBorder === void 0 ? true : _props$rowBorder;
+    rowBorder = _props$rowBorder === void 0 ? true : _props$rowBorder,
+    divider = props.divider,
+    dividerTitle = props.dividerTitle,
+    dividerStyle = props.dividerStyle,
+    _props$dividerColor = props.dividerColor,
+    dividerColor = _props$dividerColor === void 0 ? 'info' : _props$dividerColor,
+    _props$dividerColSpan = props.dividerColSpan,
+    dividerColSpan = _props$dividerColSpan === void 0 ? 2 : _props$dividerColSpan;
   var _useContext = (0, _react.useContext)(_helpers.default),
     selectedRowId = _useContext.selectedRowId,
     handleSelectRow = _useContext.handleSelectRow,
@@ -41,7 +48,7 @@ var Row = function Row(props) {
   };
   return /*#__PURE__*/_react.default.createElement(_helpers.RowContext.Provider, {
     value: contextValues
-  }, /*#__PURE__*/_react.default.createElement("tr", {
+  }, !divider ? /*#__PURE__*/_react.default.createElement("tr", {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     className: "trow ".concat(customClass, " ").concat(rowId && selectedRowId === rowId ? '-selected' : ''),
@@ -54,7 +61,17 @@ var Row = function Row(props) {
     style: _extends({}, style, {
       height: height
     })
-  }, children));
+  }, children) : /*#__PURE__*/_react.default.createElement("tr", {
+    className: "trow trow-divider"
+  }, vertical ? /*#__PURE__*/_react.default.createElement("th", {
+    colSpan: dividerColSpan,
+    className: "-divider -".concat(dividerColor),
+    style: dividerStyle
+  }, dividerTitle || '') : /*#__PURE__*/_react.default.createElement("td", {
+    colSpan: dividerColSpan,
+    className: "-divider -".concat(dividerColor),
+    style: dividerStyle
+  }, dividerTitle || '')));
 };
 var _default = Row;
 exports.default = _default;

package/lib/table/types.d.ts

@@ -49,6 +49,11 @@ interface ITableRowProps extends Pick<TableHTMLAttributes<HTMLTableRowElement>,
     textAlign?: string;
     displayContent?: 'always' | 'never' | 'onRowHover';
     visible?: boolean;
+    divider?: boolean;
+    dividerTitle?: string;
+    dividerColor?: 'primary' | 'danger' | 'info' | 'success' | 'warning';
+    dividerColSpan?: number;
+    dividerStyle?: CSSProperties;
 }
 interface ITableContext {
     bodyScrollable?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.0.10-beta.5",
+  "version": "1.0.10-beta.7",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",