linear-react-components-ui 1.1.18-beta.16 → 1.1.18-beta.17

package/lib/assets/styles/input.scss

@@ -2,7 +2,7 @@
 @import "fonts.scss";
 @import "colors.scss";
 @import "effects";
-.input-base-component > .labelcontainer {
+.input-base-component > .labelcontainer > .text-content {
   margin: 0; 
   padding: 0;
   line-height: 14px;
@@ -115,7 +115,7 @@
 }
 
 .input-base-component.-skeletonized {
-  > .labelcontainer > .label,
+  > .labelcontainer > .text-content > .label,
   > .hint {
     @extend %skeleton-component;
     color: transparent;

package/lib/assets/styles/popover.scss

@@ -38,4 +38,7 @@
       color: rgb(59, 59, 59);
     }
   }
+  &.-hint {
+    width: 100% !important;
+  }
 }

package/lib/checkbox/index.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Label = _interopRequireDefault(require("./Label"));
 var _gridlayout = _interopRequireDefault(require("../gridlayout"));
 var _permissionValidations = require("../permissionValidations");
 require("../assets/styles/checkbox.scss");
 var _errorMessage = require("../inputs/errorMessage");
 var _ = require("..");
+var _textContent = _interopRequireDefault(require("../textContent"));
+var _popover = _interopRequireDefault(require("../popover"));
+var _hint = _interopRequireDefault(require("../hint"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -40,7 +42,11 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tooltipWidth = 'auto',
     skeletonize,
     targetRef,
-    errorMessages
+    errorMessages,
+    customClassForLabel,
+    hintPosition = 'below',
+    themePopover = 'light',
+    popoverAlign = 'left'
   } = _ref;
   const [isChecked, setIsChecked] = (0, _react.useState)(checked);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
@@ -61,26 +67,30 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     };
     return {
       onClick: () => {
-        onChange({
-          target
-        });
+        if (!shouldDisable() && !skeletonize) {
+          setIsChecked(!isChecked);
+          onChange({
+            target
+          });
+        }
       },
       onKeyDown: undefined,
       role: 'checkbox',
       tabIndex: -1
     };
   };
-  const renderInput = () => /*#__PURE__*/_react.default.createElement("div", _extends({}, getProps(), {
+  const renderInput = () => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    "data-skeletonized": skeletonize,
     className: "checkbox-component",
-    "data-skeletonized": skeletonize
-  }), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", _extends({
     "data-testid": "checkbox-container",
     className: "inputcontent",
-    onClick: !shouldDisable() && !skeletonize ? () => setIsChecked(!isChecked) : undefined,
-    tabIndex: -1,
-    role: "checkbox",
-    "aria-checked": "false"
-  }, /*#__PURE__*/_react.default.createElement("input", {
+    "aria-checked": isChecked
+  }, getProps()), /*#__PURE__*/_react.default.createElement("input", {
     id: id || undefined,
     ref: r => {
       if (targetRef) targetRef(r);
@@ -98,14 +108,31 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_.Icon, {
     size: 12,
     name: "checkmark"
-  })), label && /*#__PURE__*/_react.default.createElement(_Label.default, {
-    label: label,
+  })), label && /*#__PURE__*/_react.default.createElement("div", {
+    className: "description"
+  }, /*#__PURE__*/_react.default.createElement(_textContent.default, {
+    required: required,
+    disabled: shouldDisable(),
+    className: customClassForLabel,
     tooltip: tooltip,
     tooltipWidth: tooltipWidth,
-    tooltipPosition: tooltipPosition,
+    tooltipPosition: tooltipPosition
+  }), label, /*#__PURE__*/_react.default.createElement(_textContent.default, null), /*#__PURE__*/_react.default.createElement(_hint.default, {
     disabled: disabled,
-    hint: hint
-  })), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
+    visible: !!hint && hintPosition === 'below',
+    description: hint,
+    customClass: "hint"
+  }))), !!hint && hintPosition === 'onLabelRight' && !skeletonize && /*#__PURE__*/_react.default.createElement(_popover.default, {
+    theme: themePopover,
+    align: popoverAlign,
+    customClass: "-hint",
+    iconColor: "#03bde2",
+    style: {
+      margin: '0px 5px',
+      height: 'auto',
+      width: 20
+    }
+  }, hint)), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
     messages: errorMessages
   }));
   if (onDenied.unvisible) return null;

package/lib/checkbox/types.d.ts

@@ -29,6 +29,7 @@ interface ICheckBoxProps {
     children?: ReactElement;
     autofocus?: boolean;
     hint?: string;
+    hintPosition?: 'below' | 'onLabelRight';
     gridLayout?: string;
     permissionAttr?: PermissionAttr | PermissionAttr[];
     tooltip?: string;
@@ -38,6 +39,9 @@ interface ICheckBoxProps {
     targetRef?: (ref: HTMLInputElement | null) => void;
     targetSpanRef?: (ref: HTMLSpanElement | null) => void;
     errorMessages?: string[] | undefined;
+    customClassForLabel?: string;
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 
 export { ChangeEvent, ICheckBoxProps };

package/lib/form/types.d.ts

@@ -85,7 +85,13 @@ interface IFieldProps extends WithFieldProps {
     autoFocus?: boolean;
     autoCompleteMask?: 'left' | 'right';
     mask?: string;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
+    displayCurrencySymbol?: boolean;
     removeZeroLeft?: boolean;
+    checked?: boolean;
 }
 interface CustomEvent {
     target: {
@@ -122,6 +128,10 @@ interface IFieldArrayProps extends WithFieldProps {
     onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;
     handlerFieldValidade?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
     required?: boolean;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 type PeriodChangeEvent = {
     initial: string;
@@ -155,6 +165,10 @@ interface IFieldPeriodProps extends WithFieldProps {
     handlerFieldValidade?: (name: string, value: object, validatorsArray: PeriodValidator[] | PeriodValidator) => void;
     onChange?: (event: PeriodChangeEvent) => PeriodChangeEvent;
     gridLayout?: string;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 interface FormContextProps {
     skeletonize?: boolean;

package/lib/inputs/base/InputTextBase.js

@@ -13,7 +13,8 @@ var _withTooltip = _interopRequireDefault(require("../../internals/withTooltip")
 var _permissionValidations = require("../../permissionValidations");
 var _hint = _interopRequireDefault(require("../../hint"));
 var _errorMessage = require("../errorMessage");
-var _Label = _interopRequireDefault(require("./Label"));
+var _textContent = _interopRequireDefault(require("../../textContent"));
+var _popover = _interopRequireDefault(require("../../popover"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -43,6 +44,7 @@ const InputTextBase = props => {
     label,
     labelUppercase,
     hint,
+    hintPosition = 'below',
     errorMessages,
     visible = true,
     permissionAttr,
@@ -68,7 +70,9 @@ const InputTextBase = props => {
     onDragLeave,
     onClick,
     readOnlyClass,
-    autoComplete = 'on'
+    autoComplete = 'on',
+    themePopover = 'light',
+    popoverAlign = 'left'
   } = props;
   let propsInput;
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
@@ -195,16 +199,38 @@ const InputTextBase = props => {
     style: {
       textAlign: textAlign === 'center' ? 'left' : textAlign
     }
-  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
+  }, /*#__PURE__*/_react.default.createElement(_textContent.default, {
     labelRef: labelRef,
-    label: label,
     required: required,
+    label: label,
     onHoverLabel: onHoverLabel,
-    customClassForLabel: customClassForLabel,
+    className: customClassForLabel,
     labelUppercase: labelUppercase,
-    tooltip: showTooltip ? label.toString() : undefined,
+    tooltip: label.toString(),
     tooltipPosition: "top"
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-content",
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "label ".concat(customClassForLabel, " ").concat(labelUppercase && ' -uppercase'),
+    style: {
+      alignSelf: 'center'
+    }
+  }, label, required && /*#__PURE__*/_react.default.createElement("span", {
+    className: "-requiredlabel"
+  }, "*"), !!hint && hintPosition === 'onLabelRight' && !skeletonize && /*#__PURE__*/_react.default.createElement(_popover.default, {
+    theme: themePopover,
+    align: popoverAlign,
+    customClass: "-hint",
+    iconColor: "#03bde2",
+    style: {
+      margin: '0px 5px',
+      height: 'auto',
+      width: 20
+    }
+  }, hint))), /*#__PURE__*/_react.default.createElement(_textContent.default, null)), /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "testInputWrapper",
     style: styleForWrapper,
     className: helpers.getInputWrapperClass(_objectSpread(_objectSpread({}, props), {}, {
@@ -226,7 +252,7 @@ const InputTextBase = props => {
     "data-testid": "teste-123"
   }, inputProps())), children), helpers.getRightElements(errorMessages || [], skeletonize, rightElements)), /*#__PURE__*/_react.default.createElement(_hint.default, {
     disabled: disabled,
-    visible: !!hint,
+    visible: !!hint && hintPosition === 'below',
     customClass: "hint",
     description: hint
   }), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {

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

@@ -73,6 +73,7 @@ interface IBaseProps {
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
     inputBaseRef?: RefObject<HTMLDivElement> | ((ref: HTMLDivElement) => void);
     hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
     textAlign?: TextAlign;
     rounded?: boolean;
     errorMessages?: string[] | undefined;
@@ -92,6 +93,8 @@ interface IBaseProps {
     multiple?: boolean;
     readOnlyClass?: string;
     autoComplete?: 'on' | 'off';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 
 export { CustomInputEvent, IBaseProps, InputLabelProps };

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

@@ -9,6 +9,11 @@ interface IColorProps {
     name?: string;
     permissionAttr?: PermissionAttr;
     visible?: boolean;
+    label?: string;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 
 export { IColorProps };

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

@@ -37,6 +37,10 @@ interface IDatePickerProps {
     disabled?: boolean;
     permissionAttr?: PermissionAttr;
     label?: string;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 interface IDateDropdownProps {
     children: ReactNode | ReactNode[];

package/lib/inputs/file/DragDropFile.js

@@ -35,6 +35,7 @@ const DragDropFile = props => {
     showSubtitle = true,
     multiple = false,
     hint = [],
+    hintPosition = 'below',
     errorMessages = [],
     skeletonize = false
   } = props;
@@ -265,7 +266,7 @@ const DragDropFile = props => {
   })), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
     messages: errorMessages
   }), /*#__PURE__*/_react.default.createElement(_hint.default, {
-    visible: !!hint,
+    visible: !!hint && hintPosition === 'below',
     customClass: "hint",
     description: hint
   }));

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

@@ -18,6 +18,7 @@ interface IFileProps {
     label?: string;
     defaultFiles?: CustomFile;
     hint?: string;
+    hintPosition?: 'below' | 'onLabelRight';
     required?: boolean;
     readOnly?: boolean;
     name?: string;
@@ -34,6 +35,8 @@ interface IFileProps {
     errorMessages?: string[];
     skeletonize?: boolean;
     showSubtitle?: boolean;
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 interface IDefaultFileProps extends IFileProps {
     onBtnClickInsert: () => void;

package/lib/inputs/mask/helpers.d.ts

@@ -40,6 +40,10 @@ declare const getMaskOptions: ({ isDateField, placeholderChar, min, max, lazy, p
     autoCompleteMask?: "left" | "right" | undefined;
     definitions?: any;
     mask?: any;
+    hint?: string | string[] | undefined;
+    hintPosition?: "below" | "onLabelRight" | undefined;
+    themePopover?: "light" | "dark" | undefined;
+    popoverAlign?: "left" | "right" | undefined;
     placeholderChar: string;
     min: any;
     max: any;

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

@@ -50,6 +50,10 @@ type IBaseMaskProps = {
     mask?: any;
     min?: any;
     max?: any;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
     pattern?: string;
     mapToRadix?: string[];
     normalizeZeros?: boolean;

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

@@ -56,6 +56,10 @@ interface IMultiSelectProps {
     disabled?: boolean;
     dropdownAlignButton?: 'left' | 'right';
     label?: string;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 
 export { DescriptionKey, GetFilteredParams, IActionButtonsProps, IDropdownMultiSelectProps, IMultiSelectProps };

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

@@ -1,9 +1,9 @@
 import { IBaseNumberProps } from './types.js';
+import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';

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

@@ -1,9 +1,9 @@
 import { ICurrencyProps } from './types.js';
+import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';

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

@@ -1,9 +1,9 @@
 import { IBaseNumberProps } from './types.js';
+import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';

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

@@ -1,11 +1,11 @@
 export { default as CurrencyField } from './Currency.js';
 export { default as DecimalField } from './Decimal.js';
 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/PermissionAttr.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';

package/lib/inputs/number/index.js

@@ -28,10 +28,12 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const NumberField = props => {
   const {
     textAlign = 'left',
-    min,
-    max,
     value = '',
-    removeZeroLeft = true
+    themePopover = 'light',
+    popoverAlign = 'left',
+    removeZeroLeft = true,
+    min,
+    max
   } = props;
   const [numberValue, setNumberValue] = (0, _react.useState)();
   const onChange = event => {
@@ -53,6 +55,8 @@ const NumberField = props => {
   return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
     value: numberValue,
     textAlign: textAlign,
+    themePopover: themePopover,
+    popoverAlign: popoverAlign,
     onChange: onChange,
     type: "number"
   }));

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

@@ -1,9 +1,9 @@
+import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
 import { IMaskHOCProps } from '../types.js';
+import { TextAlign } from '../../@types/Align.js';
 import 'react';
-import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../../@types/DataCombo.js';
@@ -12,8 +12,16 @@ import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
 interface INumberFieldProps extends IMaskHOCProps {
+    value?: string;
+    permissionAttr?: PermissionAttr;
+    disabled?: boolean;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
     onChange?: (e?: CustomInputEvent) => void;
     removeZeroLeft?: boolean;
+    textAlign?: TextAlign;
 }
 interface IBaseNumberProps extends IMaskHOCProps {
     returnFormattedValueOnBlur?: boolean;
@@ -22,6 +30,10 @@ interface IBaseNumberProps extends IMaskHOCProps {
 interface ICurrencyProps extends IMaskHOCProps {
     currencySymbol?: string;
     displayCurrencySymbol?: boolean;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 
 export { IBaseNumberProps, ICurrencyProps, INumberFieldProps };

package/lib/inputs/period/index.js

@@ -17,6 +17,8 @@ var _hint = _interopRequireDefault(require("../../hint"));
 var helperBase = _interopRequireWildcard(require("../base/helpers"));
 require("../../assets/styles/periodpicker.scss");
 var _errorMessage = require("../errorMessage");
+var _textContent = _interopRequireDefault(require("../../textContent"));
+var _popover = _interopRequireDefault(require("../../popover"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -36,7 +38,10 @@ const PeriodPicker = props => {
       width: '350px',
       height: '350px'
     },
-    hint
+    hint,
+    hintPosition = 'below',
+    themePopover = 'light',
+    popoverAlign = 'left'
   } = props;
   const [valueInitial, setValueInitial] = (0, _react.useState)(props.value && (0, _moment.default)(props.value.initial, 'DD/MM/YYYY'));
   const [valueFinal, setValueFinal] = (0, _react.useState)(props.value && (0, _moment.default)(props.value.final, 'DD/MM/YYYY'));
@@ -343,11 +348,33 @@ const PeriodPicker = props => {
     className: "input-base-component"
   }, props.label && /*#__PURE__*/_react.default.createElement("div", {
     className: "labelcontainer"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "label ".concat(props.customClassForLabel, " ").concat(props.labelUppercase && ' -uppercase')
+  }, /*#__PURE__*/_react.default.createElement(_textContent.default, {
+    required: props.required,
+    className: props.customClassForLabel,
+    labelUppercase: props.labelUppercase
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-content",
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "label ".concat(props.customClassForLabel, " ").concat(props.labelUppercase && ' -uppercase'),
+    style: {
+      alignSelf: 'center'
+    }
   }, props.label, props.required && /*#__PURE__*/_react.default.createElement("span", {
     className: "-requiredlabel"
-  }, "*"))), /*#__PURE__*/_react.default.createElement("div", {
+  }, "*"), !!hint && hintPosition === 'onLabelRight' && /*#__PURE__*/_react.default.createElement(_popover.default, {
+    theme: themePopover,
+    align: popoverAlign,
+    iconColor: "#03bde2",
+    customClass: "-hint",
+    style: {
+      margin: '0px 5px',
+      height: 'auto',
+      width: 20
+    }
+  }, hint))), /*#__PURE__*/_react.default.createElement(_textContent.default, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: "periodpicker-component ".concat(helperBase.getInputWrapperClass(_objectSpread(_objectSpread({}, props), {}, {
       value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
       disabled: shouldDisable()
@@ -391,7 +418,7 @@ const PeriodPicker = props => {
     handlerSetOnDenied: denied => setOnDenied(denied),
     required: props.required
   }), getButtonOpen(), getButtonSelectPeriod()), showCalendarValueInitial && getWrapperComponentCalendarValueInitial(), showCalendarValueFinal && getWrapperComponentCalendarValueFinal(), showPeriodSelection && getWrapperComponentPeriodSelection(), /*#__PURE__*/_react.default.createElement(_hint.default, {
-    visible: !!hint,
+    visible: !!hint && hintPosition === 'below',
     customClass: "hint",
     description: hint
   }), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {

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

@@ -59,8 +59,11 @@ interface IPeriodPickerProps {
     errorMessages?: string[];
     name?: string;
     hint?: string;
+    hintPosition?: 'below' | 'onLabelRight';
     onBlur?: (e: CustomInputEvent) => void;
     onFocus?: (e: CustomInputEvent) => void;
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 interface IPeriodListProps {
     handleOnSelect: (value: DateTypes | 'custom', date: Moment[] | null) => void;

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

@@ -13,6 +13,7 @@ var _Selecteds = _interopRequireDefault(require("./Selecteds"));
 var constants = _interopRequireWildcard(require("../../../internals/constants"));
 var _InputTextBase = _interopRequireDefault(require("../../base/InputTextBase"));
 var _helper = require("../helper");
+var _hint = _interopRequireDefault(require("../../../hint"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -25,7 +26,9 @@ const MultipleSelect = props => {
     value = [],
     remoteSearch = false,
     descriptionKey,
-    showClearButton
+    showClearButton,
+    hint,
+    hintPosition = 'below'
   } = props;
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
   const [currents, setCurrents] = (0, _react.useState)([]);
@@ -267,6 +270,10 @@ const MultipleSelect = props => {
     dataCombo: dataCombo,
     currents: currents,
     dropdownWidth: dropdownWidth || 0
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_hint.default, {
+    visible: !!hint && hintPosition === 'below',
+    customClass: "hint",
+    description: hint
+  }));
 };
 var _default = exports.default = MultipleSelect;

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

@@ -50,6 +50,9 @@ interface ISimpleSelectProps {
     onFocus?: () => void;
     allOptions?: AllOptions;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 interface ISelectFieldProps extends Omit<ISimpleSelectProps, 'idKey' | 'value' | 'descriptionKey'> {
     multiple?: boolean;
@@ -90,6 +93,9 @@ interface IMultipleSelectProps extends Omit<ISimpleSelectProps, 'idKey' | 'value
     handlerClear?: () => void;
     disabled?: boolean;
     gridLayout?: string;
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 interface ISelectedsMultipleProps {
     idKey: string;