linear-react-components-ui 1.1.24-beta.2 → 1.1.25-rc.0

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

@@ -1,8 +1,8 @@
-import { MouseEvent, KeyboardEvent, DragEvent, MutableRefObject, RefObject, CSSProperties } from 'react';
+import { MutableRefObject, MouseEvent, KeyboardEvent, DragEvent, RefObject, CSSProperties } from 'react';
 import { TextAlign } from '../../@types/Align.js';
 import { Period } from '../../@types/Period.js';
 import { PermissionAttr, OnDenied } from '../../@types/PermissionAttr.js';
-import { ITooltipCommonProps } from '../../tooltip/types.js';
+import { WithTooltipProps } from '../../internals/types.js';
 import '../../@types/Position.js';
 
 interface CustomInputEvent {
@@ -20,7 +20,17 @@ interface CustomInputEvent {
         files?: FileList | null;
     };
 }
-interface IBaseProps extends ITooltipCommonProps {
+interface InputLabelProps extends WithTooltipProps {
+    label?: string | string[];
+    customClassForLabel?: string;
+    styleForLabel?: object;
+    labelUppercase?: boolean;
+    required?: boolean;
+    targetRef?: (ref: HTMLSpanElement | null) => void;
+    labelRef?: MutableRefObject<HTMLSpanElement | null>;
+    onHoverLabel?: React.MouseEventHandler<HTMLSpanElement>;
+}
+interface IBaseProps {
     inputHasFocus?: boolean;
     onInputReceiveFocus?: () => void;
     onInputLostFocus?: () => void;
@@ -54,7 +64,7 @@ interface IBaseProps extends ITooltipCommonProps {
     onDragLeave?: (e: DragEvent) => void;
     leftElements?: JSX.Element | JSX.Element[];
     rightElements?: JSX.Element | JSX.Element[];
-    children?: JSX.Element | JSX.Element[];
+    children?: React.ReactNode;
     customClass?: string;
     customClassForWrapper?: string;
     customClassForInputContent?: string;
@@ -72,6 +82,7 @@ interface IBaseProps extends ITooltipCommonProps {
     permissionAttr?: PermissionAttr;
     onDeniedActions?: OnDenied;
     handlerSetOnDenied?: (onDenied: OnDenied) => void;
+    targetRef?: (ref: HTMLDivElement | HTMLInputElement | HTMLTextAreaElement | null) => void;
     gridLayout?: string;
     skeletonize?: boolean;
     style?: CSSProperties;
@@ -89,4 +100,4 @@ interface IBaseProps extends ITooltipCommonProps {
     defaultValue?: string | string[];
 }
 
-export { CustomInputEvent, IBaseProps };
+export { CustomInputEvent, IBaseProps, InputLabelProps };

package/lib/inputs/color/index.js

@@ -71,7 +71,7 @@ const ColorPicker = props => {
       ref: inputRef,
       type: "color",
       defaultValue: color,
-      name: name,
+      name: `${name}-hidden`,
       onClick: e => onButtonClick ? onButtonClick(e) : undefined,
       onInput: onInputChangeDefault
     })],

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

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

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

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

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

@@ -5,7 +5,7 @@ import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const DatePicker: (props: IDatePickerProps) => JSX.Element | null;

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

@@ -4,7 +4,7 @@ import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 interface IDatePickerProps {

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

@@ -5,7 +5,7 @@ import '../../@types/DataCombo.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

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

@@ -5,7 +5,7 @@ import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const DefaultFile: (props: IDefaultFileProps) => JSX.Element;

package/lib/inputs/file/DefaultFile.js

@@ -25,12 +25,35 @@ const DefaultFile = props => {
     inputRef,
     defaultFiles,
     hint = [],
+    multiple,
     onChange
   } = props;
   const getFilesList = files => !files?.length ? [] : _lodash.default.map(files, file => file);
   const [fileList, setFileList] = (0, _react.useState)(defaultFiles);
   const ifExistFiles = fileList instanceof Array && fileList.length > 0;
-  const popUpDescription = () => /*#__PURE__*/_react.default.createElement("div", {
+  const handleChange = e => {
+    e.preventDefault?.();
+    const files = getFilesList(e.target.files);
+    setFileList(files);
+    onChange?.(files, e);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "input-simple-file-container"
+  }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    hint: hint,
+    readOnlyClass: "-disabledVisualApply",
+    customClassForWrapper: "file-wrapper",
+    customClassForInputContent: "file-content -absolute -pointEventDisabled -disabledVisualApply",
+    type: "file",
+    id: id,
+    accept: accept,
+    inputRef: inputRef,
+    onChange: handleChange,
+    rightElements: /*#__PURE__*/_react.default.createElement(_FileButtonSettings.default, {
+      id: id,
+      onBtnClickInsert: () => onBtnClickInsert()
+    })
+  }), multiple && /*#__PURE__*/_react.default.createElement("div", {
     className: `size-position-icon ${!ifExistFiles ? '-disabled-popover' : ''}`
   }, /*#__PURE__*/_react.default.createElement(_popover.default, {
     iconSize: 16
@@ -39,8 +62,7 @@ const DefaultFile = props => {
     key: `${file.name}${file.size}`
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "file-name"
-  }, /*#__PURE__*/_react.default.createElement("span", null, file.name)))))));
-  const buttonRemoveFile = () => /*#__PURE__*/_react.default.createElement(_buttons.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, file.name))))))), /*#__PURE__*/_react.default.createElement(_buttons.default, {
     disabled: !ifExistFiles,
     className: "-pointerEventsRemove",
     transparent: true,
@@ -53,28 +75,6 @@ const DefaultFile = props => {
       customClass: "colorIconUpload",
       name: "close"
     })
-  });
-  const handleChange = e => {
-    e.preventDefault?.();
-    const files = getFilesList(e.target.files);
-    setFileList(files);
-    onChange?.(files, e);
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "input-simple-file-container"
-  }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
-    hint: hint,
-    readOnlyClass: "-disabledVisualApply",
-    customClassForInputContent: "-absolute -pointEventDisabled -disabledVisualApply",
-    type: "file",
-    id: id,
-    accept: accept,
-    inputRef: inputRef,
-    onChange: handleChange,
-    rightElements: /*#__PURE__*/_react.default.createElement(_FileButtonSettings.default, {
-      id: id,
-      onBtnClickInsert: onBtnClickInsert
-    })
-  }), popUpDescription(), buttonRemoveFile()));
+  })));
 };
 var _default = exports.default = DefaultFile;

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

@@ -5,7 +5,7 @@ import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const DragDropFile: (props: IDragDropFileProps) => JSX.Element;

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

@@ -5,7 +5,7 @@ import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const File: ({ applyDragDrop, defaultFiles, gridLayout, onBtnClickRemove: onBtnClickRemoveProp, ...rest }: Omit<IFileProps, 'onBtnClickInsert'>) => JSX.Element;

package/lib/inputs/file/File.js

@@ -31,6 +31,7 @@ const File = _ref => {
   const onBtnClickRemove = () => {
     if (inputFileRef.current) {
       inputFileRef.current.value = '';
+      if (onBtnClickRemoveProp) onBtnClickRemoveProp();
     }
     if (onBtnClickRemoveProp) onBtnClickRemoveProp();
   };

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

@@ -5,7 +5,7 @@ import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const FileButtonSettings: (props: IFileButtonSettingsProps) => JSX.Element;

package/lib/inputs/file/FileButtonSettings.js

@@ -16,7 +16,6 @@ const FileButtonSettings = props => {
     onBtnClickInsert
   } = props;
   return /*#__PURE__*/_react.default.createElement("label", {
-    id: "",
     htmlFor: id
   }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
     className: "uploadButton simple-search-file-button -shadowsdisabled -transparent",

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

@@ -5,7 +5,7 @@ import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const transformFilesToFileList: (files: CustomFile) => FileList;

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

@@ -8,7 +8,7 @@ import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 

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

@@ -4,7 +4,7 @@ import { CustomInputEvent } from '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 type CustomFile = FileList | File | File[];

package/lib/inputs/inputHOC.d.ts

@@ -5,7 +5,7 @@ import '../@types/DataCombo.js';
 import './base/types.js';
 import '../@types/Align.js';
 import '../@types/Period.js';
-import '../tooltip/types.js';
+import '../internals/types.js';
 import '../@types/Position.js';
 import '../drawer/types.js';
 import '../@types/Icon.js';

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

@@ -4,7 +4,7 @@ import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const BaseMask: ({ value: valueProp, defaultValue, inputRef, onChange, onComplete, permissionAttr, mask, isDateTimeField, ...rest }: IBaseMaskProps) => JSX.Element;

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

@@ -4,7 +4,7 @@ import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const CnpjField: {

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

@@ -4,7 +4,7 @@ import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const CpfField: {

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

@@ -4,7 +4,7 @@ import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const PhoneField: (props: IPhoneFieldProps) => JSX.Element;

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

@@ -4,7 +4,7 @@ import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const ZipCodeField: (props: IZipCode) => JSX.Element;

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

@@ -5,7 +5,7 @@ import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const getMaskOptions: ({ isDateField, placeholderChar, min, max, lazy, pattern, radix, thousandsSeparator, mapToRadix, scale, normalizeZeros, padFractionalZeros, rightElements, leftElements, isDateTimeField, ...rest }: IBaseMaskProps) => ReactMaskOpts;

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

@@ -9,7 +9,7 @@ import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 

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

@@ -3,7 +3,7 @@ import { TextAlign } from '../../@types/Align.js';
 import { OnDenied, PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 type IBaseMaskProps = {

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

@@ -5,7 +5,7 @@ import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const ActionButtons: ({ disabled, dropdownOpened, handleOpenClose, handleCheckAll, handleUncheckAll, dropdownAlignButton, }: IActionButtonsProps) => JSX.Element;

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

@@ -5,7 +5,7 @@ import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const Dropdown: (props: IDropdownMultiSelectProps) => JSX.Element;

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

@@ -5,7 +5,7 @@ import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const getFilteredDataCombo: ({ dataSource, descriptionKey, inputText, }: GetFilteredParams) => any[];

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

@@ -5,7 +5,7 @@ import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const MultiSelectField: (props: IMultiSelectProps) => JSX.Element;

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

@@ -4,7 +4,7 @@ import { CustomInputEvent } from '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 type DescriptionKey = string | ((dataSelected: DataCombo) => string);

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

@@ -4,7 +4,7 @@ import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';
 import '../../@types/DataCombo.js';

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

@@ -4,7 +4,7 @@ import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';
 import '../../@types/DataCombo.js';

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

@@ -4,7 +4,7 @@ import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';
 import '../../@types/DataCombo.js';

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

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

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

@@ -4,7 +4,7 @@ import { IMaskHOCProps } from '../types.js';
 import { TextAlign } from '../../@types/Align.js';
 import 'react';
 import '../../@types/Period.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';

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

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

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

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

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

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

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

@@ -6,7 +6,7 @@ import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Align.js';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 declare const getCalendarDropdownStyle: ({ topPosition, leftPosition, width }: {

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

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

package/lib/inputs/period/index.js

@@ -43,7 +43,9 @@ const PeriodPicker = props => {
     hintPosition = 'below',
     themePopover = 'light',
     popoverAlign = 'left',
-    gridLayout
+    gridLayout,
+    nameDateInitial = 'valueInitial',
+    nameDateFinal = 'valueFinal'
   } = props;
   const idValueInitial = (0, _react.useId)();
   const idValueFinal = (0, _react.useId)();
@@ -244,7 +246,7 @@ const PeriodPicker = props => {
         name: changingAux
       } = event.target;
       if (value && value.replace(/\D/g, '').trim().length !== 0) {
-        if (changingAux === 'valueInitial') {
+        if (changingAux === nameDateInitial) {
           setValueInitial(undefined);
         } else {
           setValueFinal(undefined);
@@ -268,21 +270,21 @@ const PeriodPicker = props => {
     const dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
     if (showCalendarValueInitial) inputInitialRef.current?.focus();
     if (showCalendarValueFinal) inputFinalRef.current?.focus();
-    if (valueDateName === 'valueFinal' && valueInitial && dateObj.isBefore(valueInitial)) {
+    if (valueDateName === nameDateFinal && valueInitial && dateObj.isBefore(valueInitial)) {
       setValueInitial(dateObj);
       setValueFinal(valueInitial);
       onDateChange({
         initial: dateObj,
         final: valueInitial
       });
-    } else if (valueDateName === 'valueInitial' && valueFinal && dateObj.isAfter(valueFinal)) {
+    } else if (valueDateName === nameDateInitial && valueFinal && dateObj.isAfter(valueFinal)) {
       setValueInitial(valueFinal);
       setValueFinal(dateObj);
       onDateChange({
         initial: valueFinal,
         final: dateObj
       });
-    } else if (valueDateName === 'valueInitial') {
+    } else if (valueDateName === nameDateInitial) {
       setValueInitial(dateObj);
       onDateChange({
         initial: dateObj,
@@ -295,7 +297,7 @@ const PeriodPicker = props => {
         final: dateObj
       });
     }
-    if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
+    if (valueDateName === nameDateInitial && !valueFinal && shouldOpenDropdown) {
       inputFinalRef.current?.focus();
       setTimeout(() => setShowCalendarValueFinal(true), 100);
     }
@@ -405,7 +407,7 @@ const PeriodPicker = props => {
         handlerClose: () => onCloseDateDialog('valueInitial'),
         dialogSize: dialogSize,
         onOpenChange: setShowCalendarValueInitial
-      }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
+      }, getCalendar(valueInitial, calendarColorStyle, nameDateInitial));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
       containerRef: wrapperBaseInputPeriodRef,
@@ -424,7 +426,7 @@ const PeriodPicker = props => {
         handlerClose: () => onCloseDateDialog('valueFinal'),
         dialogSize: dialogSize,
         onOpenChange: setShowCalendarValueFinal
-      }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
+      }, getCalendar(valueFinal, calendarColorStyle, nameDateFinal));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
       containerRef: wrapperBaseInputPeriodRef,

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

@@ -1,11 +1,11 @@
 import { Moment } from 'moment';
-import { ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject, MouseEvent } from 'react';
 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';
-import '../../tooltip/types.js';
+import '../../internals/types.js';
 import '../../@types/Position.js';
 
 type DateTypes = 'today' | 'week' | 'lastweek' | 'last15' | 'month' | 'lastmonth';
@@ -55,11 +55,14 @@ interface IPeriodPickerProps {
     calendarColorStyle?: ColorStyles;
     required?: boolean;
     onChange?: (event?: CustomInputEvent, maskValue?: string, date?: Period) => void;
+    onClick?: (event?: MouseEvent) => void;
     disabled?: boolean;
     permissionAttr?: PermissionAttr;
     errorMessages?: string[];
     name?: string;
     hint?: string;
+    nameDateInitial?: string;
+    nameDateFinal?: string;
     hintPosition?: 'below' | 'onLabelRight';
     onBlur?: (e: CustomInputEvent) => void;
     onFocus?: (e: CustomInputEvent) => void;