@redocly/theme/lib/components/Select/SelectInput.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectInputWrapper = void 0;
exports.SelectInput = SelectInput;
const styled_components_1 = __importDefault(require("styled-components"));
const react_1 = __importStar(require("react"));
const Tag_1 = require("../../components/Tag/Tag");
const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
const Button_1 = require("../../components/Button/Button");
function SelectInput(props) {
    const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, } = props;
    const inputRef = (0, react_1.useRef)(null);
    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
    const onChangeHandler = (e) => {
        var _a;
        searchHandler === null || searchHandler === void 0 ? void 0 : searchHandler(e);
        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    };
    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
    const onKeyDownHandler = (e) => {
        var _a;
        if (e.key === 'Backspace' && !searchValue && selectedOptions.length) {
            clearHandler === null || clearHandler === void 0 ? void 0 : clearHandler(selectedOptions[selectedOptions.length - 1]);
            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
        }
    };
    const onClickHandler = (e) => {
        clickHandler === null || clickHandler === void 0 ? void 0 : clickHandler(e);
    };
    const onFocusHandler = (e) => {
        var _a;
        inputFocusHandler === null || inputFocusHandler === void 0 ? void 0 : inputFocusHandler(e);
        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    };
    const onBlurHandler = (e) => {
        inputBlurHandler === null || inputBlurHandler === void 0 ? void 0 : inputBlurHandler(e);
    };
    const onClearAllHandler = (e) => {
        e.stopPropagation();
        clearHandler === null || clearHandler === void 0 ? void 0 : clearHandler();
    };
    const selectTags = selectedOptions.map((option, index) => (react_1.default.createElement(SelectInputTag, { closable: true, tabIndex: 0, key: index, onClose: () => {
            var _a;
            clearHandler === null || clearHandler === void 0 ? void 0 : clearHandler(option);
            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
        } }, option.label || option.value || option.element)));
    const selectInput = (react_1.default.createElement(SelectInternalInput, { value: searchValue ||
            (!multiple && !stickyValue && selectedOptions.length
                ? selectedOptions[0].label || selectedOptions[0].value
                : ''), placeholder: searchValue || (multiple && selectedOptions.length) ? '' : stickyValue || placeholder, onChange: onChangeHandler, onKeyDown: onKeyDownHandler, onBlur: onBlurHandler, ref: (input) => {
            if (!input)
                return;
            inputRef.current = input;
            if (!props.inputRef)
                return;
            if (typeof props.inputRef === 'function') {
                props.inputRef(input);
            }
            else {
                props.inputRef.current = input;
            }
        }, width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%', tabIndex: 0, onFocus: (e) => {
            e.stopPropagation();
        }, onMouseDown: (e) => {
            e.preventDefault();
        } }));
    const simpleValue = selectedOptions.length ? (selectedOptions[0].label || selectedOptions[0].element || selectedOptions[0].value) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
    const multipleValues = selectedOptions.length ? (selectTags) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
    return (react_1.default.createElement(exports.SelectInputWrapper, Object.assign({}, props, { id: id, onFocus: onFocusHandler, onClick: onClickHandler, role: "button", "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-owns": listboxId, "aria-label": "Select option" }),
        !onlyIcon && (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(SelectInputValue, null, multiple ? (searchable ? (react_1.default.createElement(react_1.default.Fragment, null,
                selectTags,
                selectInput)) : (multipleValues)) : searchable ? (selectInput) : (simpleValue)),
            !!(clearable && selectedOptions.length) && (react_1.default.createElement(Button_1.Button, { size: "small", variant: "text", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: onClearAllHandler })))),
        customIcon || icon));
}
exports.SelectInputWrapper = styled_components_1.default.div `
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--select-input-border-radius);
  padding: var(--select-input-padding);
  cursor: pointer;
  gap: var(--select-input-gap);
`;
const SelectInputValue = styled_components_1.default.div `
  width: calc(100% - 20px);
  display: flex;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  flex-wrap: wrap;
  gap: var(--select-input-value-gap);
`;
const SelectInputTag = (0, styled_components_1.default)(Tag_1.Tag) `
  --tag-content-padding: 0;
`;
const SelectInternalInput = styled_components_1.default.input.attrs(() => ({
    type: 'text',
})) `
  outline: none;
  border-radius: var(--select-input-border-radius);
  border: none;
  font-size: var(--select-input-font-size);
  font-weight: var(--select-input-font-weight);
  line-height: var(--select-input-line-height);
  background-color: var(--select-input-bg-color);

  &::placeholder {
    color: var(--select-input-placeholder-color);
  }

  width: ${({ width }) => width || 'auto'};
`;
const SelectInternalInputPlaceholder = styled_components_1.default.div `
  color: var(--select-input-placeholder-color);
  padding-left: 8px;
`;
//# sourceMappingURL=SelectInput.js.map