@dr.pogodin/react-utils/build/production/shared/components/selectors/NativeDropdown/index.js

Collection of generic ReactJS components and utils

// Implements dropdown based on the native HTML <select> element.
import themed from"@dr.pogodin/react-themes";import{optionValueName}from"../common.js";const defaultTheme={"context":"WbwY1Y","ad":"AP5hsY","hoc":"ODAJeW","dropdown":"wabw76","arrow":"WFSB9z","container":"vE9M8Z","active":"sfLSJA","label":"bQLBhS","option":"wgCtdC","hiddenOption":"ty19C2","select":"ntbzPR","invalid":"_3CzMM4"};/**
 * Implements a themeable dropdown list. Internally it is rendered with help of
 * the standard HTML `<select>` element, thus the styling support is somewhat
 * limited.
 * @param [props] Component properties.
 * @param [props.filter] Options filter function. If provided, only
 * those elements of `options` list will be used by the dropdown, for which this
 * filter returns `true`.
 * @param [props.label] Dropdown label.
 * @param [props.onChange] Selection event handler.
 * @param [props.options=[]] Array of dropdown
 * options. For string elements the option value and name will be the same.
 * It is allowed to mix DropdownOption and string elements in the same option
 * list.
 * @param [props.theme] _Ad hoc_ theme.
 * @param [props.value] Currently selected value.
 * @param [props....]
 * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
 */import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Dropdown=({filter,label,onChange,options,testId,theme,value})=>{let isValidValue=false;const optionElements=[];for(const option of options){if(!filter||filter(option)){const[iValue,iName]=optionValueName(option);isValidValue||=iValue===value;optionElements.push(/*#__PURE__*/_jsx("option",{className:theme.option,value:iValue,children:iName},iValue))}}// NOTE: This element represents the current `value` when it does not match
// any valid option. In Chrome, and some other browsers, we are able to hide
// it from the opened dropdown; in others, e.g. Safari, the best we can do is
// to show it as disabled.
const hiddenOption=isValidValue?null:/*#__PURE__*/_jsx("option",{className:theme.hiddenOption,disabled:true,value:value,children:value},"__reactUtilsHiddenOption");let selectClassName=theme.select;if(!isValidValue)selectClassName+=` ${theme.invalid}`;return/*#__PURE__*/_jsxs("div",{className:theme.container,children:[label===undefined?null:/*#__PURE__*/_jsx("div",{className:theme.label,children:label}),/*#__PURE__*/_jsxs("div",{className:theme.dropdown,children:[/*#__PURE__*/_jsxs("select",{className:selectClassName,"data-testid":process.env.NODE_ENV==="production"?undefined:testId,onChange:onChange,value:value,children:[hiddenOption,optionElements]}),/*#__PURE__*/_jsx("div",{className:theme.arrow})]})]})};export default themed(Dropdown,"Dropdown",defaultTheme);
//# sourceMappingURL=index.js.map