@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
49 lines • 3.33 kB
JavaScript
/* eslint-disable jsx-a11y/click-events-have-key-events */
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React, { forwardRef } from "react";
import { Floating } from "../../../overlays/floating/Floating.js";
import { useRenameCSS } from "../../../theme/Theme.js";
import { useMergeRefs } from "../../../util/hooks/index.js";
import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext.js";
import SelectedOptions from "../SelectedOptions/SelectedOptions.js";
import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext.js";
import Input from "./Input.js";
import { useInputContext } from "./Input.context.js";
import ToggleListButton from "./ToggleListButton.js";
export const InputController = forwardRef((props, ref) => {
const {
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Remove when prop has been removed from ComboboxProps.
clearButton,
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Remove when prop has been removed from ComboboxProps.
clearButtonLabel, toggleListButton = true, inputClassName, shouldShowSelectedOptions = true } = props, rest = __rest(props, ["clearButton", "clearButtonLabel", "toggleListButton", "inputClassName", "shouldShowSelectedOptions"]);
const { cn } = useRenameCSS();
const { focusInput, inputProps, size = "medium", inputRef, toggleOpenButtonRef, readOnly, setAnchorRef, } = useInputContext();
const { activeDecendantId, toggleIsListOpen } = useFilteredOptionsContext();
const { selectedOptions } = useSelectedOptionsContext();
const mergedInputRef = useMergeRefs(inputRef, ref);
return (React.createElement(Floating.Anchor, { asChild: true, ref: setAnchorRef },
React.createElement("div", { className: cn("navds-combobox__wrapper-inner navds-text-field__input", {
"navds-combobox__wrapper-inner--virtually-unfocused": activeDecendantId !== undefined,
}), onClick: () => {
if (inputProps.disabled || readOnly) {
return;
}
toggleIsListOpen(true);
focusInput();
} },
!shouldShowSelectedOptions ? (React.createElement(Input, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName, readOnly: readOnly }, rest))) : (React.createElement(SelectedOptions, { selectedOptions: selectedOptions, size: size },
React.createElement(Input, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName, shouldShowSelectedOptions: shouldShowSelectedOptions, readOnly: readOnly }, rest)))),
toggleListButton && React.createElement(ToggleListButton, { ref: toggleOpenButtonRef }))));
});
//# sourceMappingURL=InputController.js.map