@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
36 lines • 3.09 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputDateStandAlone = exports.InputDateStandAloneComponent = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useId_1 = require("../../hooks/useId/useId");
const role_1 = require("../../types/role/role");
const inputControlled_1 = require("../input/inputControlled");
const popoverCalendar_1 = require("./components/popoverCalendar");
// styles
const inputDate_styled_1 = require("./inputDate.styled");
const InputDateStandAloneComponent = ({ dataTestId = 'input-data', maxDate, ...props }, ref) => {
const uniqueId = (0, useId_1.useId)('inputDate');
const inputId = props.id ?? uniqueId;
const ariaControls = props.calendarOpen ? `${inputId}Calendar` : undefined;
const { onWrapperBlur, ...innerInputProps } = props;
return ((0, jsx_runtime_1.jsxs)(inputDate_styled_1.InputDateStyled, { "data-testid": dataTestId, onBlur: onWrapperBlur, children: [(0, jsx_runtime_1.jsx)(inputControlled_1.InputControlled, { ...innerInputProps, ref: ref, "aria-controls": ariaControls, "aria-expanded": props.calendarOpen, icon: {
...props.icon,
altText: props.calendarOpen
? props.configAccesibility?.closeInputIconAriaLabel
: props.configAccesibility?.openInputIconAriaLabel,
}, id: inputId, overrideStyles: props.styles, rightIcon: {
...props.rightIcon,
altText: props.calendarOpen
? props.configAccesibility?.closeInputIconAriaLabel
: props.configAccesibility?.openInputIconAriaLabel,
['aria-haspopup']: true,
['aria-controls']: ariaControls,
}, role: role_1.ROLES.COMBOBOX, variant: props.inputVariant ?? props.styles?.[props.state]?.inputVariant }), (0, jsx_runtime_1.jsx)(popoverCalendar_1.PopoverCalendar, { ref: ref, calendar: props.calendar, calendarOpen: props.calendarOpen, closeIcon: props.closeIcon, configAccesibility: props.configAccesibility, defaultDate: new Date(props.defaultDate ?? maxDate), disabledDates: props.disabledDates, extraCalendarWidth: props.extraCalendarWidth, extraCalendarWidthSide: props.extraCalendarWidthSide, hasRange: props.hasRange, inputId: inputId, label: props.label, labelComponentType: props.labelComponentType, locale: props.locale, maxDate: maxDate, minDate: props.minDate, secondSelectedDate: props.dateFormatted[1], selectedDate: props.dateFormatted[0], state: props.state, styles: props.styles, onCalendarOpen: props.onCalendarOpen, onDateChange: props.onDateChange })] }));
};
exports.InputDateStandAloneComponent = InputDateStandAloneComponent;
exports.InputDateStandAlone = react_1.default.forwardRef(exports.InputDateStandAloneComponent);
//# sourceMappingURL=inputDateStandAlone.js.map