linear-react-components-ui 1.0.10-beta.0 → 1.0.10-beta.10

package/lib/inputs/number/index.d.ts

@@ -4,6 +4,7 @@ import { INumberFieldProps } from './types.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../types.js';
 import '../../@types/DataCombo.js';

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

@@ -2,6 +2,7 @@ import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
 import { IMaskHOCProps } from '../types.js';
 import 'react';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
@@ -9,7 +10,6 @@ import '../../@types/Position.js';
 
 interface INumberFieldProps extends IMaskHOCProps {
     value?: string;
-    textAlign?: string;
     permissionAttr?: PermissionAttr;
     disabled?: boolean;
     onChange?: (e?: CustomInputEvent, maskValue?: string, date?: string | {

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

@@ -5,6 +5,7 @@ import '../../@types/ColorStyles.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 
 declare const Dialog: ({ handlerClose, children, dialogSize }: IDialogProps) => JSX.Element;
 

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

@@ -5,6 +5,7 @@ import '../../@types/ColorStyles.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 
 declare const Dropdown: (props: IPeriodDropdownProps) => React.ReactPortal;
 

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

@@ -5,6 +5,7 @@ import '../../@types/ColorStyles.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 
 declare const PeriodList: ({ selected, handleOnSelect }: IPeriodListProps) => JSX.Element;
 

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

@@ -5,6 +5,7 @@ import '../../@types/ColorStyles.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 
 declare const getCalendarDropdownStyle: ({ topPosition, leftPosition, width }: {
     topPosition: number | string;

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

@@ -5,6 +5,7 @@ import '../../@types/ColorStyles.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 
 declare const PeriodPicker: (props: IPeriodPickerProps) => JSX.Element | null;
 

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

@@ -4,6 +4,7 @@ import { ColorStyles } from '../../@types/ColorStyles.js';
 import { Period } from '../../@types/Period.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
+import '../../@types/Align.js';
 
 type DateTypes = 'today' | 'week' | 'lastweek' | 'last15' | 'month' | 'lastmonth';
 interface IPeriodOptions {
@@ -29,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/search/index.d.ts

@@ -3,6 +3,7 @@ import 'react';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';

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

@@ -3,6 +3,7 @@ import 'react';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';

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

@@ -3,6 +3,7 @@ import 'react';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';

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,22 +1,18 @@
-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';
 import '../../drawer/types.js';
 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.d.ts

@@ -1,4 +1,5 @@
 import { ISelectFieldProps } from './types.js';
+import '../../@types/Align.js';
 import '../../@types/DataCombo.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';

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.d.ts

@@ -1,4 +1,5 @@
 import { ISelectedsMultipleProps } from '../types.js';
+import '../../../@types/Align.js';
 import '../../../@types/DataCombo.js';
 import '../../../@types/PermissionAttr.js';
 import '../../base/types.js';

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.d.ts

@@ -1,4 +1,5 @@
 import { IMultipleSelectProps } from '../types.js';
+import '../../../@types/Align.js';
 import '../../../@types/DataCombo.js';
 import '../../../@types/PermissionAttr.js';
 import '../../base/types.js';

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.d.ts

@@ -1,4 +1,5 @@
 import { ISimpleSelectProps } from '../types.js';
+import '../../../@types/Align.js';
 import '../../../@types/DataCombo.js';
 import '../../../@types/PermissionAttr.js';
 import '../../base/types.js';

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],
@@ -140,7 +141,6 @@ var SimpleSelect = function SimpleSelect(props) {
       if (dataComboFilter && dataComboFilter.length > 0) selectedFilter = dataComboFilter[0];
       setDataCombo(dataComboFilter);
     }
-    onChange(selectedFilter);
     setOpened(true);
     setInputText(valueFilter);
     setSelected(selectedFilter);
@@ -149,7 +149,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() {
@@ -163,9 +163,9 @@ var SimpleSelect = function SimpleSelect(props) {
       setDropdownWidth(dropdownWidthFocus);
     }
   };
-  var onBlur = function onBlur(dataBlur) {
+  var onBlur = function onBlur() {
     if (props.onBlur) {
-      var event = getSelectEvent(dataBlur);
+      var event = getSelectEvent(selected);
       props.onBlur(event);
     }
     if (!insideComponent) {
@@ -228,14 +228,15 @@ var SimpleSelect = function SimpleSelect(props) {
       var newCurrent = null;
       if (value) {
         newCurrent = dataSourceWithAllOptions.find(function (i) {
-          return value && i[idKey].toString().toLowerCase() === value.toString().toLowerCase();
+          var _i$idKey;
+          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);
-      setInputText(newCurrent ? newCurrent[descriptionKey] : '');
+      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

@@ -1,19 +1,25 @@
+import { TextAlign } from '../../@types/Align.js';
 import { DataCombo } from '../../@types/DataCombo.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
 import 'react';
 import '../../@types/Period.js';
 
+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?: string;
+    textAlign?: TextAlign;
+    value?: number | string;
     errorMessages?: string[];
     showClearButton?: boolean;
     searchOnDropdown?: boolean;
@@ -40,17 +46,15 @@ interface ISimpleSelectProps {
     required?: boolean;
     autoFocus?: boolean;
     onFocus?: () => void;
-    allOptions?: {
-        idValue?: number | null;
-        label: string;
-    };
+    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;
@@ -65,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;
@@ -85,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 { IMultipleSelectProps, ISelectFieldProps, ISelectedsMultipleProps, ISimpleSelectProps };
+export { AllOptions, DescriptionKey, GetFilteredParams, GetMultipleFilteredParams, GetSimpleFilteredParams, IMultipleSelectProps, ISelectFieldProps, ISelectedsMultipleProps, ISimpleSelectProps };

package/lib/inputs/text/index.d.ts

@@ -3,6 +3,7 @@ import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
+import '../../@types/Align.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 

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

@@ -3,6 +3,7 @@ import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { IBaseProps, CustomInputEvent } from '../base/types.js';
 import { WithTooltipProps } from '../../internals/types.js';
 import 'react';
+import '../../@types/Align.js';
 import '../../@types/Position.js';
 
 type CommonProperties = Pick<WithTooltipProps, 'tooltip' | 'tooltipPosition' | 'tooltipWidth'>;
@@ -18,7 +19,6 @@ interface ITextField extends IBaseProps, CommonProperties {
     leftElements?: JSX.Element | JSX.Element[];
     rightElements?: JSX.Element | JSX.Element[];
     permissionAttr?: PermissionAttr;
-    textAlign?: string;
     gridLayout?: string;
 }
 

package/lib/inputs/textarea/index.d.ts

@@ -1,6 +1,7 @@
 import { ITextAreaProps } from './types.js';
 import '../base/types.js';
 import 'react';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 

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

@@ -1,5 +1,6 @@
 import { IBaseProps } from '../base/types.js';
 import 'react';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 

package/lib/inputs/types.d.ts

@@ -3,9 +3,11 @@ import { PermissionAttr, OnDenied } from '../@types/PermissionAttr.js';
 import { DataCombo } from '../@types/DataCombo.js';
 import { IBaseProps, CustomInputEvent } from './base/types.js';
 import { IDrawerProps } from '../drawer/types.js';
+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;
@@ -16,7 +18,7 @@ interface ISearchProps extends IBaseProps {
     onReset?: (event?: CustomInputEvent) => void;
     onChange?: (event?: CustomInputEvent) => void;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    textAlign?: string;
+    textAlign?: TextAlign;
     disabled?: boolean;
     readOnly?: boolean;
     value?: string;
@@ -87,7 +89,7 @@ interface IMaskHOCProps {
     customClass?: string;
     customClassForInputContent?: string;
     customClassForLabel?: string;
-    textAlign?: string;
+    textAlign?: TextAlign;
     onBlur?: (e: CustomInputEvent) => void;
     leftElements?: JSX.Element | JSX.Element[];
     rounded?: boolean;
@@ -98,7 +100,7 @@ interface IMaskHOCProps {
 }
 interface IDropdownSelectProps {
     idKey: string;
-    descriptionKey: string;
+    descriptionKey: DescriptionKey;
     dropdownWidth: number;
     showClearButton?: boolean;
     handleOnSelect: (item?: DataCombo) => void;