@kubit-ui-web/react-components/dist/cjs/components/inputSearch/inputSearchStandAlone.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputSearchStandAlone = exports.InputSearchStandAloneComponent = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = 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");
const popover_1 = require("./helpers/popover");
// helpers
// styles
const inputSearch_styled_1 = require("./inputSearch.styled");
const InputSearchStandAloneComponent = ({ error, dataTestId = 'input-search', ...props }, ref) => {
    const inputWrapperRef = (0, react_1.useRef)(null);
    const uniqueId = (0, useId_1.useId)('inputSearch');
    const inputId = props.id ?? uniqueId;
    const ariaControls = `${uniqueId}List`;
    const { refInput, refIcon } = ref;
    const sendRef = { refInput: refInput, refIcon: refIcon };
    const popoverOpen = (0, popover_1.shouldOpenPopover)({
        open: props.open,
        useActionBottomSheet: props.styles?.[props.state]?.useActionBottomSheet?.[props.device],
        options: props.optionList,
        loadingList: props.loadingList,
        noResultText: props.noResultsText,
        hasHighlightedOption: props.hasHighlightedOption && props.highlightedOption !== '',
    });
    return ((0, jsx_runtime_1.jsxs)(inputSearch_styled_1.InputSearchStyled, { "data-testid": dataTestId, 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: sendRef, "aria-controls": popoverOpen ? ariaControls : undefined, "aria-expanded": popoverOpen, "aria-haspopup": role_1.ROLES.LISTBOX, autocomplete: props.autocomplete || input_1.AUTOCOMPLETE_TYPE.OFF, icon: {
                        ...props.icon,
                        onClick: props.icon?.onClick,
                    }, id: inputId, overrideStyles: props.styles, rightIcon: {
                        ...props.rightIcon,
                        onClick: props.rightIcon?.onClick,
                    }, role: role_1.ROLES.COMBOBOX, value: props.searchText, variant: props.inputVariant ?? props.styles?.[props.state]?.inputVariant, onClick: props.onClick }) }), (0, jsx_runtime_1.jsx)(popoverSearchList_1.PopoverSearchList, { ref: ref, "aria-controls": ariaControls, blockBackPopover: props.blockBackPopover, caseSensitive: props.caseSensitive, closeIcon: props.closeIcon, dataTestId: dataTestId, device: props.device, dragIcon: props.dragIcon, elementsToShow: props.elementsToShow, hasHighlightedOption: props.hasHighlightedOption, hasResultTextWrittenByUser: props.hasResultTextWrittenByUser, highlightedOption: props.highlightedOption, initialOptionsLength: props.initialOptionsLength, inputConfiguration: {
                    additionalInfo: props.additionalInfo,
                    label: props.label,
                    secondaryLabel: props.secondaryLabel,
                    helpMessage: props.helpMessage,
                    icon: props.inputPopoverIcon,
                    rightIcon: props.inputPopoverRightIcon,
                    overrideStyles: props.styles,
                    placeholder: props.placeholder,
                    value: props.inputPopoverValue,
                    error: error,
                    errorIcon: props.errorIcon,
                    errorMessage: props.errorMessage,
                    // The variant is the same for all the states
                    variant: props.inputPopoverVariant ?? props.styles?.[props.state]?.inputVariant,
                    onChange: props.onInputPopoverChange,
                    onKeyDown: props.onInputPopoverKeyDown,
                    onIconClick: props.onInputPopoverIconClick,
                }, listOptionsHeight: props.listOptionsHeight, loader: props.loader, loading: props.loadingList, loadingText: props.loadingText, noResultsText: props.noResultsText, open: popoverOpen, optionCheckedIcon: props.optionCheckedIcon, optionList: props.optionList, optionsListDefaultArias: props.optionsListDefaultArias, optionsScreenReaderText: props.optionsScreenReaderText, preventCloseOnClickElements: [
                    refInput?.current,
                    refIcon?.current,
                ], regex: props.regex, searchText: props.searchText, state: props.state, styles: props.styles, sublabel: props.sublabel, titleActionBottomSheet: props.titleActionBottomSheet, value: props.value, onOpenOptions: props.onOpenOptions, onOptionsListKeyDown: props.onOptionsListKeyDown, onValueSelected: props.onValueSelected })] }));
};
exports.InputSearchStandAloneComponent = InputSearchStandAloneComponent;
exports.InputSearchStandAlone = (0, react_1.forwardRef)(exports.InputSearchStandAloneComponent);
//# sourceMappingURL=inputSearchStandAlone.js.map