linear-react-components-ui 1.1.26-beta.9 → 1.1.27-rc.0

package/lib/inputs2/date/dateperiodfield/calendarbox.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarBox = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _moment = _interopRequireDefault(require("moment"));
+var _buttons = _interopRequireDefault(require("../../../buttons"));
+var _textContent = _interopRequireDefault(require("../../../textContent"));
+var _context = require("./context");
+var _helpers = require("../helpers");
+var _constants = require("../base/constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CalendarBox = exports.CalendarBox = /*#__PURE__*/_react.default.forwardRef((__, ref) => {
+  const {
+    initialInputId,
+    finalInputId,
+    activeDescendant,
+    calendarBoxOpen,
+    dateContainerRef,
+    calendarDisplayDate,
+    selectedDate,
+    handleChangeNextMonth,
+    handleChangePreviousMonth,
+    handleChangeUpdateDateState,
+    handleChangeActiveDescendant
+  } = (0, _context.useDatePeriodFieldContext)();
+  const {
+    calendarBoxStyles
+  } = (0, _constants.useCalendarPosition)(calendarBoxOpen, dateContainerRef);
+  const weeks = (0, _helpers.generateCalendarWeeks)(calendarDisplayDate);
+  const isInRange = day => selectedDate.inicial && selectedDate.final && day.isAfter(selectedDate.inicial, 'day') && day.isBefore(selectedDate.final, 'day');
+  const isSelected = day => selectedDate.inicial && day.isSame(selectedDate.inicial, 'day') || selectedDate.final && day.isSame(selectedDate.final, 'day');
+  const handleOnMouseDown = event => {
+    var _event$preventDefault;
+    event === null || event === void 0 ? void 0 : (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);
+  };
+  const handleOnClick = (___, daySelected) => {
+    const inputActive = document.activeElement;
+    let inputType = undefined;
+    if ((inputActive === null || inputActive === void 0 ? void 0 : inputActive.id) === initialInputId) inputType = 'initial';
+    if ((inputActive === null || inputActive === void 0 ? void 0 : inputActive.id) === finalInputId) inputType = 'final';
+    if (!_lodash.default.isUndefined(inputType)) {
+      handleChangeUpdateDateState({
+        date: daySelected,
+        inputType
+      });
+      handleChangeActiveDescendant(daySelected.format(_helpers.TOKEN_ISO_FORMAT));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    style: calendarBoxStyles,
+    "aria-expanded": calendarBoxOpen,
+    className: "date-calendar-box",
+    "data-testid": "test-date-period-field-calendar-box"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: initialInputId,
+    className: "date-calendar-box-header"
+  }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    boxShadow: false,
+    type: "button",
+    iconName: "arrow_left",
+    title: "M\xEAs anterior",
+    className: "previous-month",
+    "aria-label": "M\xEAs anterior",
+    onClick: handleChangePreviousMonth,
+    onMouseDown: handleOnMouseDown
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    "aria-live": "polite",
+    className: "month-year"
+  }, /*#__PURE__*/_react.default.createElement(_textContent.default, {
+    "aria-label": calendarDisplayDate.format('MMMM YYYY'),
+    as: "p",
+    "data-testid": "test-date-period-field-calendar-box-month-description"
+  }, calendarDisplayDate.format('MMMM YYYY'))), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    boxShadow: false,
+    type: "button",
+    iconName: "arrow_right",
+    title: "Pr\xF3ximo m\xEAs",
+    className: "next-month",
+    "aria-label": "Pr\xF3ximo m\xEAs",
+    onClick: handleChangeNextMonth,
+    onMouseDown: handleOnMouseDown
+  })), /*#__PURE__*/_react.default.createElement("table", {
+    "aria-label": "Dias da Semana",
+    role: "grid",
+    className: "date-calendar-box-days-of-week"
+  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, _moment.default.weekdaysShort(true).map((day, idx) => /*#__PURE__*/_react.default.createElement("th", {
+    role: "columnheader",
+    key: "day-of-week-".concat(idx + 1)
+  }, day))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-calendar-box-grid-of-days"
+  }, /*#__PURE__*/_react.default.createElement("table", {
+    "aria-label": "Calend\xE1rio",
+    role: "grid"
+  }, /*#__PURE__*/_react.default.createElement("tbody", {
+    className: "weeks"
+  }, weeks.map((week, weekIndex) => /*#__PURE__*/_react.default.createElement("tr", {
+    role: "row",
+    key: weekIndex + 1
+  }, week.map((day, dateIndex) => {
+    var _isInRange, _isSelected;
+    const idActiveDescendant = day.format(_helpers.TOKEN_ISO_FORMAT);
+    const isToday = _lodash.default.isEqual((0, _moment.default)().format(_helpers.TOKEN_ISO_FORMAT), day.format(_helpers.TOKEN_ISO_FORMAT));
+    const inRange = (_isInRange = isInRange(day)) !== null && _isInRange !== void 0 ? _isInRange : false;
+    const hasFocus = _lodash.default.isEqual(activeDescendant, day.format(_helpers.TOKEN_ISO_FORMAT));
+    const hasSelected = (_isSelected = isSelected(day)) !== null && _isSelected !== void 0 ? _isSelected : false;
+    const isCurrentMonth = day.month() === calendarDisplayDate.month();
+    const descriptionDate = day.format('LL');
+    return /*#__PURE__*/_react.default.createElement("td", {
+      role: "gridcell",
+      key: dateIndex
+    }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+      id: idActiveDescendant,
+      type: "button",
+      className: "day-button",
+      boxShadow: false,
+      tabIndex: -1,
+      title: descriptionDate,
+      "aria-label": descriptionDate,
+      "aria-selected": hasSelected,
+      "data-testid": "test-date-period-field-day-button",
+      "data-state-is-today": isToday,
+      "data-state-has-focus": hasFocus,
+      "data-state-is-in-range": inRange,
+      "data-state-is-current-month": isCurrentMonth,
+      label: day.date().toString(),
+      onMouseDown: handleOnMouseDown,
+      onClick: event => {
+        handleOnClick(event, day);
+      }
+    }));
+  })))))));
+});
+CalendarBox.displayName = 'DatePeriodFieldCalendarBox';

package/lib/inputs2/date/dateperiodfield/context.d.ts

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { DatePeriodContextProps } from './types.js';
+import 'moment';
+import '../../../@types/Align.js';
+import '../../../@types/ColorStyles.js';
+import '../../../tooltip/types.js';
+import '../../../@types/Position.js';
+import '../../../@types/PermissionAttr.js';
+import '../types.js';
+
+declare const DatePeriodFieldContext: React__default.Context<DatePeriodContextProps>;
+declare const useDatePeriodFieldContext: () => DatePeriodContextProps;
+
+export { DatePeriodFieldContext, useDatePeriodFieldContext };

package/lib/inputs2/date/dateperiodfield/context.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDatePeriodFieldContext = exports.DatePeriodFieldContext = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DatePeriodFieldContext = exports.DatePeriodFieldContext = /*#__PURE__*/_react.default.createContext({});
+const useDatePeriodFieldContext = () => {
+  const context = _react.default.useContext(DatePeriodFieldContext);
+  if (!context) {
+    throw new Error('useDatePeriodFieldContext must be used within a DatePeriodFieldProvider');
+  }
+  return context;
+};
+exports.useDatePeriodFieldContext = useDatePeriodFieldContext;

package/lib/inputs2/date/dateperiodfield/index.d.ts

@@ -0,0 +1,10 @@
+import 'react';
+export { DatePeriodFieldProps } from './types.js';
+export { I as Input } from '../../../index-c9247c1f.js';
+import 'moment';
+import '../../../@types/Align.js';
+import '../../../@types/ColorStyles.js';
+import '../../../tooltip/types.js';
+import '../../../@types/Position.js';
+import '../../../@types/PermissionAttr.js';
+import '../types.js';

package/lib/inputs2/date/dateperiodfield/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _gridlayout = _interopRequireDefault(require("../../../gridlayout"));
+var _permissionValidations = require("../../../permissionValidations");
+var _helpers = require("../helpers");
+var _base = require("./base");
+const _excluded = ["onDeniedActions", "permissionAttr", "disabled", "readOnly", "gridLayout"];
+/* eslint-disable @typescript-eslint/no-use-before-define */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const Input = exports.Input = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+      onDeniedActions,
+      permissionAttr,
+      disabled,
+      readOnly,
+      gridLayout
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const onDenied = _react.default.useMemo(() => {
+    return onDeniedActions || (0, _permissionValidations.actionsOnPermissionDenied)(_helpers.options, permissionAttr);
+  }, [onDeniedActions, permissionAttr]);
+  const {
+    hideContent,
+    unvisible
+  } = onDenied;
+  const isReadOnly = Boolean(readOnly || onDenied.readOnly);
+  const isDisabled = Boolean(disabled || onDenied.disabled);
+  const inputProps = _objectSpread({
+    readOnly: isReadOnly,
+    disabled: isDisabled
+  }, props);
+  if (unvisible || hideContent) return null;
+  if (gridLayout) {
+    return /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
+      cols: gridLayout
+    }, /*#__PURE__*/_react.default.createElement(_base.InputBase, _extends({
+      ref: ref
+    }, inputProps)));
+  }
+  return /*#__PURE__*/_react.default.createElement(_base.InputBase, _extends({
+    ref: ref
+  }, inputProps));
+});
+Input.displayName = 'DatePeriodFieldInput';

package/lib/inputs2/date/dateperiodfield/triggers.d.ts

@@ -0,0 +1,6 @@
+declare const Triggers: {
+    (): JSX.Element;
+    displayName: string;
+};
+
+export { Triggers };

package/lib/inputs2/date/dateperiodfield/triggers.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Triggers = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _moment = _interopRequireDefault(require("moment"));
+var _buttons = _interopRequireDefault(require("../../../buttons"));
+var BaseDate = _interopRequireWildcard(require("../base"));
+var _list = _interopRequireWildcard(require("../../../list"));
+var _context = require("./context");
+var _helpers = require("../helpers");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Triggers = () => {
+  const {
+    initialInputId,
+    initialInputRef,
+    finalInputRef,
+    isReadOnly,
+    isDisabled,
+    selectedDate,
+    calendarBoxOpen,
+    showCalendarButton,
+    skeletonize,
+    showPredefinedPeriodsButton,
+    showClearDateButton,
+    hasValidPeriodSelected,
+    handleChangeCalendarBoxState,
+    handleChangeActiveDescendant,
+    handleChangeCalendarDisplayDate,
+    handleOnClickClearSelectedPeriod,
+    handleChangeUpdateDateStateWithPredefinedPeriod
+  } = (0, _context.useDatePeriodFieldContext)();
+  const shouldHavePermitClickOnTrigger = !isReadOnly && !isDisabled;
+  const handleOnClickTriggerSelectPredefinedPeriods = (event, periodSelected) => {
+    var _event$preventDefault;
+    if (!shouldHavePermitClickOnTrigger) event === null || event === void 0 ? void 0 : (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);else {
+      if (periodSelected) handleChangeUpdateDateStateWithPredefinedPeriod(periodSelected);
+    }
+  };
+  const handleOnClickTriggerCalendar = event => {
+    var _initialInputRef$curr, _finalInputRef$curren, _initialInputRef$curr3;
+    if (!shouldHavePermitClickOnTrigger) event.preventDefault();else {
+      handleChangeCalendarBoxState(!calendarBoxOpen);
+      if (!calendarBoxOpen) {
+        var _document$activeEleme;
+        switch ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.id) {
+          case (_initialInputRef$curr = initialInputRef.current) === null || _initialInputRef$curr === void 0 ? void 0 : _initialInputRef$curr.id:
+            {
+              var _selectedDate$inicial, _selectedDate$inicial2, _initialInputRef$curr2;
+              handleChangeActiveDescendant(((_selectedDate$inicial = selectedDate.inicial) !== null && _selectedDate$inicial !== void 0 ? _selectedDate$inicial : (0, _moment.default)()).format(_helpers.TOKEN_ISO_FORMAT));
+              handleChangeCalendarDisplayDate((_selectedDate$inicial2 = selectedDate.inicial) !== null && _selectedDate$inicial2 !== void 0 ? _selectedDate$inicial2 : (0, _moment.default)());
+              (_initialInputRef$curr2 = initialInputRef.current) === null || _initialInputRef$curr2 === void 0 ? void 0 : _initialInputRef$curr2.focus();
+              break;
+            }
+          case (_finalInputRef$curren = finalInputRef.current) === null || _finalInputRef$curren === void 0 ? void 0 : _finalInputRef$curren.id:
+            {
+              var _selectedDate$final, _selectedDate$final2, _finalInputRef$curren2;
+              handleChangeActiveDescendant(((_selectedDate$final = selectedDate.final) !== null && _selectedDate$final !== void 0 ? _selectedDate$final : (0, _moment.default)()).format(_helpers.TOKEN_ISO_FORMAT));
+              handleChangeCalendarDisplayDate((_selectedDate$final2 = selectedDate.final) !== null && _selectedDate$final2 !== void 0 ? _selectedDate$final2 : (0, _moment.default)());
+              (_finalInputRef$curren2 = finalInputRef.current) === null || _finalInputRef$curren2 === void 0 ? void 0 : _finalInputRef$curren2.focus();
+              break;
+            }
+          default:
+            (_initialInputRef$curr3 = initialInputRef.current) === null || _initialInputRef$curr3 === void 0 ? void 0 : _initialInputRef$curr3.focus();
+            break;
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(BaseDate.Triggers, {
+    clearButtonTestId: "test-date-period-field-trigger-clean-selected-period",
+    calendarButtonTestId: "test-date-period-field-trigger-open-calendar",
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    skeletonize: skeletonize,
+    inputFieldId: initialInputId,
+    calendarBoxOpen: calendarBoxOpen,
+    showClearButton: showClearDateButton,
+    showCalendarButton: showCalendarButton,
+    hasValidDateSelection: false,
+    hasValidPeriodSelected: hasValidPeriodSelected,
+    onClearSelectedDate: handleOnClickClearSelectedPeriod,
+    onClickTriggerCalendar: handleOnClickTriggerCalendar
+  }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    "data-testid": "test-date-period-field-trigger-select-predefined-periods",
+    className: "select-predefined-periods",
+    dropdown: true,
+    transparent: true,
+    boxShadow: false,
+    showIconDropdown: false,
+    visible: showPredefinedPeriodsButton,
+    type: "button",
+    title: "Selecionar Periodos Pr\xE9 Definidos",
+    tabIndex: -1,
+    disabled: isDisabled,
+    "aria-label": "Selecionar Periodos Pr\xE9 Definidos",
+    "aria-controls": initialInputId,
+    "aria-readonly": isReadOnly,
+    "data-state-read-only": isReadOnly,
+    "data-state-visible": showPredefinedPeriodsButton,
+    iconName: "more1",
+    dropdownAlign: "right",
+    onMouseDown: event => {
+      event.preventDefault();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_list.default, {
+    condensed: true
+  }, _helpers.PERIOD_OPTIONS_LIST.map(period => /*#__PURE__*/_react.default.createElement(_list.ListItem, {
+    key: period.id,
+    itemId: period.id,
+    text: period.label,
+    onMouseDown: event => {
+      var _event$preventDefault2;
+      event === null || event === void 0 ? void 0 : (_event$preventDefault2 = event.preventDefault) === null || _event$preventDefault2 === void 0 ? void 0 : _event$preventDefault2.call(event);
+    },
+    onClick: event => {
+      handleOnClickTriggerSelectPredefinedPeriods(event, period.id);
+    }
+  })))));
+};
+exports.Triggers = Triggers;
+Triggers.displayName = 'DatePeriodFieldTriggers';

package/lib/inputs2/date/dateperiodfield/types.d.ts

@@ -0,0 +1,103 @@
+import React__default from 'react';
+import { Moment } from 'moment';
+import { TextAlign } from '../../../@types/Align.js';
+import { ColorTheme } from '../../../@types/ColorStyles.js';
+import { ITooltipCommonProps } from '../../../tooltip/types.js';
+import { HintPosition, Position } from '../../../@types/Position.js';
+import { PermissionAttr, OnDenied } from '../../../@types/PermissionAttr.js';
+import { DateValueReturnType } from '../types.js';
+
+type DatePeriodTypes = 'today' | 'week' | 'lastweek' | 'last15' | 'month' | 'lastmonth';
+type PeriodOptions = {
+    id: DatePeriodTypes;
+    label?: string;
+};
+type InputType = 'initial' | 'final';
+type SelectedDateType = {
+    inicial: Moment | null;
+    final: Moment | null;
+};
+type UpdateDateStateParams = {
+    date: Moment;
+    inputType: InputType;
+    typing?: boolean;
+};
+type InputHTMLProps = Omit<React__default.ComponentPropsWithoutRef<'input'>, 'type' | 'multiple' | 'value'>;
+interface DatePeriodFieldBaseProps extends InputHTMLProps, ITooltipCommonProps {
+    value?: any;
+    initialName?: string;
+    initialRef?: React__default.MutableRefObject<HTMLInputElement | null>;
+    finalName?: string;
+    finalRef?: React__default.MutableRefObject<HTMLInputElement | null>;
+    hint?: string;
+    label?: string;
+    errors?: string[];
+    customClass?: string;
+    customClassLabel?: string;
+    customClassWrapper?: string;
+    customClassInputContainer?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    undigitable?: boolean;
+    skeletonize?: boolean;
+    labelUppercase?: boolean;
+    showCalendarButton?: boolean;
+    openCalendarOnFocus?: boolean;
+    shouldCloseOnSelect?: boolean;
+    showClearDateButton?: boolean;
+    showPredefinedPeriodsButton?: boolean;
+    returnValueType?: DateValueReturnType;
+    textAlign?: TextAlign;
+    hintPosition?: HintPosition;
+    themePopover?: ColorTheme;
+    popoverAlign?: Extract<Position, 'left' | 'right'>;
+}
+interface DatePeriodFieldProps extends DatePeriodFieldBaseProps {
+    gridLayout?: string;
+    permissionAttr?: PermissionAttr;
+    onDeniedActions?: OnDenied;
+}
+interface DatePeriodContextProps {
+    initialInputId: string;
+    finalInputId: string;
+    activeDescendant: string;
+    isReadOnly: boolean;
+    isDisabled: boolean;
+    undigitable: boolean;
+    skeletonize: boolean;
+    calendarBoxOpen: boolean;
+    showCalendarButton: boolean;
+    openCalendarOnFocus: boolean;
+    hasValidationErrors: boolean;
+    showClearDateButton: boolean;
+    hasValidPeriodSelected: boolean;
+    showPredefinedPeriodsButton: boolean;
+    selectedDate: SelectedDateType;
+    calendarDisplayDate: Moment;
+    initialInputRef: React__default.RefObject<HTMLInputElement | null>;
+    finalInputRef: React__default.RefObject<HTMLInputElement | null>;
+    dateContainerRef: React__default.RefObject<HTMLDivElement | null>;
+    handleChangeUpdateDateState: (params: UpdateDateStateParams) => void;
+    handleChangeNextMonth: () => void;
+    handleChangePreviousMonth: () => void;
+    handleChangeCalendarBoxState: (value: boolean) => void;
+    handleChangeActiveDescendant: (value: string) => void;
+    handleChangeCalendarDisplayDate: (value: Moment) => void;
+    handleOnClickClearSelectedPeriod: () => void;
+    handleChangeUpdateDateStateWithPredefinedPeriod: (period: DatePeriodTypes) => void;
+}
+declare enum Keys {
+    arrowLeft = "ArrowLeft",
+    arrowRight = "ArrowRight",
+    arrowUp = "ArrowUp",
+    arrowDown = "ArrowDown",
+    pageUp = "PageUp",
+    pageDown = "PageDown",
+    home = "Home",
+    end = "End",
+    escape = "Escape",
+    enter = "Enter"
+}
+
+export { DatePeriodContextProps, DatePeriodFieldBaseProps, DatePeriodFieldProps, DatePeriodTypes, InputType, Keys, PeriodOptions, SelectedDateType, UpdateDateStateParams };

package/lib/inputs2/date/dateperiodfield/types.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Keys = void 0;
+let Keys = exports.Keys = /*#__PURE__*/function (Keys) {
+  Keys["arrowLeft"] = "ArrowLeft";
+  Keys["arrowRight"] = "ArrowRight";
+  Keys["arrowUp"] = "ArrowUp";
+  Keys["arrowDown"] = "ArrowDown";
+  Keys["pageUp"] = "PageUp";
+  Keys["pageDown"] = "PageDown";
+  Keys["home"] = "Home";
+  Keys["end"] = "End";
+  Keys["escape"] = "Escape";
+  Keys["enter"] = "Enter";
+  return Keys;
+}({});

package/lib/inputs2/date/helpers.d.ts

@@ -0,0 +1,21 @@
+import * as lodash from 'lodash';
+import { Moment } from 'moment';
+import { PeriodOptions } from './dateperiodfield/types.js';
+import 'react';
+import '../../@types/Align.js';
+import '../../@types/ColorStyles.js';
+import '../../tooltip/types.js';
+import '../../@types/Position.js';
+import '../../@types/PermissionAttr.js';
+import './types.js';
+
+declare const TOKEN_MASK = "00/00/0000";
+declare const TOKEN_ISO_FORMAT = "YYYY-MM-DD";
+declare const TOKEN_PTBR_FORMAT = "DD/MM/YYYY";
+declare const options: string[];
+declare const NAVIGATION_KEYS: string[];
+declare const PERIOD_OPTIONS_LIST: PeriodOptions[];
+declare const isWithinBounds: (date: Moment, minDate?: string, maxDate?: string) => boolean;
+declare const generateCalendarWeeks: ((monthSelected: Moment) => Moment[][]) & lodash.MemoizedFunction;
+
+export { NAVIGATION_KEYS, PERIOD_OPTIONS_LIST, TOKEN_ISO_FORMAT, TOKEN_MASK, TOKEN_PTBR_FORMAT, generateCalendarWeeks, isWithinBounds, options };

package/lib/inputs2/date/helpers.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.options = exports.isWithinBounds = exports.generateCalendarWeeks = exports.TOKEN_PTBR_FORMAT = exports.TOKEN_MASK = exports.TOKEN_ISO_FORMAT = exports.PERIOD_OPTIONS_LIST = exports.NAVIGATION_KEYS = void 0;
+var _moment = _interopRequireDefault(require("moment"));
+var _memoize = _interopRequireDefault(require("lodash/memoize"));
+var _permissionValidations = require("../../permissionValidations");
+var _types = require("./types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TOKEN_MASK = exports.TOKEN_MASK = '00/00/0000';
+const TOKEN_ISO_FORMAT = exports.TOKEN_ISO_FORMAT = 'YYYY-MM-DD';
+const TOKEN_PTBR_FORMAT = exports.TOKEN_PTBR_FORMAT = 'DD/MM/YYYY';
+const options = exports.options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
+const NAVIGATION_KEYS = exports.NAVIGATION_KEYS = [_types.Keys.arrowLeft, _types.Keys.arrowRight, _types.Keys.arrowUp, _types.Keys.arrowDown, _types.Keys.pageUp, _types.Keys.pageDown, _types.Keys.home, _types.Keys.end, _types.Keys.escape, _types.Keys.enter];
+const PERIOD_OPTIONS_LIST = exports.PERIOD_OPTIONS_LIST = [{
+  id: 'today',
+  label: 'Hoje'
+}, {
+  id: 'week',
+  label: 'Semana Atual'
+}, {
+  id: 'lastweek',
+  label: 'Última Semana'
+}, {
+  id: 'last15',
+  label: 'Últimos 15 dias'
+}, {
+  id: 'month',
+  label: 'Mês atual'
+}, {
+  id: 'lastmonth',
+  label: 'Último Mês'
+}];
+const isWithinBounds = (date, minDate, maxDate) => {
+  if (minDate) {
+    const min = (0, _moment.default)(minDate, TOKEN_ISO_FORMAT);
+    if (date.isBefore(min, 'day')) return false;
+  }
+  if (maxDate) {
+    const max = (0, _moment.default)(maxDate, TOKEN_ISO_FORMAT);
+    if (date.isAfter(max, 'day')) return false;
+  }
+  return true;
+};
+exports.isWithinBounds = isWithinBounds;
+const generateCalendarWeeks = exports.generateCalendarWeeks = (0, _memoize.default)(monthSelected => {
+  const startOfCalendar = monthSelected.clone().startOf('month').startOf('week');
+  const endOfCalendar = monthSelected.clone().endOf('month').endOf('week');
+  const weeks = [];
+  let currentWeek = startOfCalendar.clone();
+  while (currentWeek.isSameOrBefore(endOfCalendar, 'day')) {
+    const week = [];
+    for (let days = 0; days < 7; days++) {
+      week.push(currentWeek.clone());
+      currentWeek.add(1, 'day');
+    }
+    weeks.push(week);
+  }
+  return weeks;
+}, monthSelected => monthSelected.format('YYYY-MM'));

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

@@ -0,0 +1,60 @@
+import { ColorTheme } from '../../@types/ColorStyles.js';
+import { HintPosition, Position } from '../../@types/Position.js';
+
+type DateValueReturnType = 'default' | 'iso';
+declare enum Keys {
+    arrowLeft = "ArrowLeft",
+    arrowRight = "ArrowRight",
+    arrowUp = "ArrowUp",
+    arrowDown = "ArrowDown",
+    pageUp = "PageUp",
+    pageDown = "PageDown",
+    home = "Home",
+    end = "End",
+    escape = "Escape",
+    enter = "Enter"
+}
+interface BaseDateInputRootProps extends React.ComponentPropsWithoutRef<'div'> {
+    customClassWrapper?: string;
+    hasValidationErrors?: boolean;
+}
+interface BaseDateInputLabelProps extends React.ComponentPropsWithoutRef<'span'> {
+    hint?: string;
+    customClassLabel?: string;
+    skeletonize?: boolean;
+    label?: string;
+    inputId?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    required?: boolean;
+    labelUppercase?: boolean;
+    hasHintMessages?: boolean;
+    hintPosition?: HintPosition;
+    themePopover?: ColorTheme;
+    popoverAlign?: Extract<Position, 'left' | 'right'>;
+}
+interface BaseDateInputContainerProps extends React.ComponentPropsWithoutRef<'div'> {
+    skeletonize?: boolean;
+    customClassInputContainer?: string;
+}
+type InputHTMLProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'multiple'>;
+interface BaseDateInputProps extends InputHTMLProps {
+    customClass?: string;
+}
+interface BaseDateInputTriggersProps extends React.ComponentPropsWithoutRef<'div'> {
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    skeletonize?: boolean;
+    inputFieldId?: string;
+    calendarBoxOpen?: boolean;
+    showClearButton?: boolean;
+    showCalendarButton?: boolean;
+    hasValidDateSelection?: boolean;
+    hasValidPeriodSelected?: boolean;
+    clearButtonTestId?: string;
+    calendarButtonTestId?: string;
+    onClearSelectedDate: () => void;
+    onClickTriggerCalendar: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export { BaseDateInputContainerProps, BaseDateInputLabelProps, BaseDateInputProps, BaseDateInputRootProps, BaseDateInputTriggersProps, DateValueReturnType, Keys };

package/lib/inputs2/date/types.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Keys = void 0;
+let Keys = exports.Keys = /*#__PURE__*/function (Keys) {
+  Keys["arrowLeft"] = "ArrowLeft";
+  Keys["arrowRight"] = "ArrowRight";
+  Keys["arrowUp"] = "ArrowUp";
+  Keys["arrowDown"] = "ArrowDown";
+  Keys["pageUp"] = "PageUp";
+  Keys["pageDown"] = "PageDown";
+  Keys["home"] = "Home";
+  Keys["end"] = "End";
+  Keys["escape"] = "Escape";
+  Keys["enter"] = "Enter";
+  return Keys;
+}({});