@kubit-ui-web/react-components/dist/cjs/components/inputDropdown/inputDropdownStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputDropdownStandAlone = exports.InputDropdownStandAloneComponent = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useId_1 = require("../../hooks/useId/useId");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const role_1 = require("../../types/role/role");
const keyboard_utility_1 = require("../../utils/keyboard/keyboard.utility");
const inputControlled_1 = require("../input/inputControlled");
const input_1 = require("../input/types/input");
const popoverSearchList_1 = require("./components/popoverSearchList");
// styles
const inputDropdown_styled_1 = require("./inputDropdown.styled");
const InputDropdownStandAloneComponent = ({ dataTestId = 'input-dropdown', ...props }, ref) => {
    const inputWrapperRef = react_1.default.useRef(null);
    const uniqueId = (0, useId_1.useId)('inputDropdown');
    const inputId = props.id ?? uniqueId;
    const optionListId = props.open ? `${uniqueId}List` : undefined;
    const { refInput, refIcon } = ref;
    const refs = { refInput, refIcon };
    return ((0, jsx_runtime_1.jsxs)(inputDropdown_styled_1.InputDropdownStyled, { "data-testid": dataTestId, styles: props.styles?.[props.state], onKeyDown: e => {
            if (props.device === breakpoints_1.DeviceBreakpointsType.DESKTOP && (0, keyboard_utility_1.isKeyTabPressed)(e.key)) {
                props.onOpenOptions(false);
            }
        }, children: [(0, jsx_runtime_1.jsx)("div", { ref: inputWrapperRef, children: (0, jsx_runtime_1.jsx)(inputControlled_1.InputControlled, { ...props, ref: refs, "aria-controls": optionListId, "aria-expanded": props.open, "aria-haspopup": role_1.ROLES.LISTBOX, autocomplete: props.autocomplete || (props.allowSearch ?? props.styles?.[props.state]?.allowSearch)
                        ? input_1.AUTOCOMPLETE_TYPE.ON
                        : input_1.AUTOCOMPLETE_TYPE.OFF, icon: { rotate: props.open ? '180deg' : '0deg', ...props.icon }, id: inputId, overrideStyles: props.styles, rightIcon: { rotate: props.open ? '180deg' : '0deg', ...props.rightIcon }, role: role_1.ROLES.COMBOBOX, value: props.searchText, variant: props.inputVariant ?? props.styles?.[props.state]?.inputVariant, onChange: event => props.autocomplete ||
                        ((props.allowSearch ?? props.styles?.[props.state]?.allowSearch) &&
                            props.device === breakpoints_1.DeviceBreakpointsType.DESKTOP)
                        ? props.onChange?.(event)
                        : undefined }) }), (0, jsx_runtime_1.jsx)(popoverSearchList_1.PopoverSearchList, { ref: ref, allowSearch: props.allowSearch, closeIcon: props.closeIcon, device: props.device, dragIcon: props.dragIcon, elementsToShow: props.elementsToShow, hasInputInSearchList: props.hasInputInSearchList, hasResultTextWrittenByUser: props.hasResultTextWrittenByUser, inputPopoverIcon: props.inputPopoverIcon, inputPopoverRightIcon: props.inputPopoverRightIcon, inputPopoverValue: props.inputPopoverValue, label: props.label, listOptionsHeight: props.listOptionsHeight, loader: props.loader, loading: props.loadingList, loadingText: props.loadingText, noResultsText: props.noResultsText, open: props.open, optionList: props.optionList, optionListId: optionListId, preventCloseOnClickElements: [inputWrapperRef.current], searchText: props.searchText, state: props.state, styles: props.styles, value: props.value, onCloseIconTabletMobileClick: props.onCloseIconTabletMobileClick, onInputPopoverChange: props.onInputPopoverChange, onInputPopoverIconClick: props.onInputPopoverIconClick, onOpenOptions: props.onOpenOptions, onValueSelected: props.onValueSelected })] }));
};
exports.InputDropdownStandAloneComponent = InputDropdownStandAloneComponent;
exports.InputDropdownStandAlone = react_1.default.forwardRef(exports.InputDropdownStandAloneComponent);
//# sourceMappingURL=inputDropdownStandAlone.js.map