@ultraviolet/ui 1.47.0 → 1.48.0

package/dist/src/components/SelectInputV2/DropdownOption.js

@@ -0,0 +1,135 @@
+import _styled from '@emotion/styled/base';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const StyledInfo = /*#__PURE__*/_styled("div", {
+  target: "e18yw4y80"
+})(process.env.NODE_ENV === "production" ? {
+  name: "13vy23x",
+  styles: "align-content:center"
+} : {
+  name: "13vy23x",
+  styles: "align-content:center",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const DisplayOption = ({
+  option,
+  multiselect,
+  optionalInfoPlacement,
+  descriptionDirection
+}) => {
+  if (descriptionDirection === 'row' && optionalInfoPlacement === 'left') {
+    return jsx(Stack, {
+      gap: 0.5,
+      direction: "row",
+      justifyContent: "left",
+      onClick: event => multiselect ? event.stopPropagation() : null,
+      "data-testid": `option-stack-${option.value}`,
+      children: jsxs(Stack, {
+        gap: 0.5,
+        direction: "row",
+        alignItems: "center",
+        children: [option.optionalInfo ?? null, jsx(Text, {
+          as: "span",
+          variant: "body",
+          placement: "left",
+          children: option.label
+        }), option.description ? jsx(Text, {
+          as: "span",
+          variant: "bodySmall",
+          sentiment: "neutral",
+          placement: "left",
+          prominence: "weak",
+          children: option.description
+        }) : null]
+      })
+    });
+  }
+  if (descriptionDirection === 'row' && optionalInfoPlacement === 'right') {
+    return jsxs(Stack, {
+      gap: 0.5,
+      direction: "row",
+      justifyContent: "space-between",
+      onClick: event => multiselect ? event.stopPropagation() : null,
+      alignItems: "baseline",
+      "data-testid": `option-stack-${option.value}`,
+      children: [jsxs(Stack, {
+        gap: 0.5,
+        direction: "row",
+        children: [jsx(Text, {
+          as: "span",
+          variant: "body",
+          placement: "left",
+          children: option.label
+        }), option.description ? jsx(Text, {
+          as: "span",
+          variant: "bodySmall",
+          sentiment: "neutral",
+          placement: "left",
+          prominence: "weak",
+          children: option.description
+        }) : null]
+      }), option.optionalInfo ? jsx(StyledInfo, {
+        children: option.optionalInfo
+      }) : null]
+    });
+  }
+  if (descriptionDirection === 'column' && optionalInfoPlacement === 'left') {
+    return jsxs(Stack, {
+      gap: 0.5,
+      direction: "row",
+      justifyContent: option.optionalInfo ? 'left' : 'space-between',
+      alignItems: "normal",
+      children: [option.optionalInfo ?? null, jsxs(Stack, {
+        gap: 0.5,
+        direction: "column",
+        onClick: event => multiselect ? event.stopPropagation() : null,
+        "data-testid": `option-stack-${option.value}`,
+        children: [jsx(Text, {
+          as: "span",
+          variant: "body",
+          placement: "left",
+          children: option.label
+        }), option.description ? jsx(Text, {
+          as: "span",
+          variant: "bodySmall",
+          sentiment: "neutral",
+          placement: "left",
+          prominence: "weak",
+          children: option.description
+        }) : null]
+      })]
+    });
+  }
+  return jsxs(Stack, {
+    gap: 0.5,
+    direction: "column",
+    alignItems: "normal",
+    onClick: event => multiselect ? event.stopPropagation() : null,
+    "data-testid": `option-stack-${option.value}`,
+    children: [jsxs(Stack, {
+      gap: 0.5,
+      direction: "row",
+      justifyContent: "space-between",
+      children: [jsx(Text, {
+        as: "span",
+        variant: "body",
+        placement: "left",
+        children: option.label
+      }), option.optionalInfo ? jsx(StyledInfo, {
+        children: option.optionalInfo
+      }) : null]
+    }), option.description ? jsx(Text, {
+      as: "span",
+      variant: "bodySmall",
+      sentiment: "neutral",
+      placement: "left",
+      prominence: "weak",
+      children: option.description
+    }) : null]
+  });
+};
+
+export { DisplayOption };

package/dist/src/components/SelectInputV2/SearchBarDropdown.js

@@ -0,0 +1,119 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '@ultraviolet/icons';
+import { TextInputV2 } from '../TextInputV2/index.js';
+import { useSelectInput } from './SelectInputProvider.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledInput = /*#__PURE__*/_styled(TextInputV2, {
+  target: "e1ag0nf0"
+})("padding-top:", ({
+  theme
+}) => theme.space[1.5], ";padding-bottom:", ({
+  theme
+}) => theme.space[1.5], ";padding-left:", ({
+  theme
+}) => theme.space[2], ";padding-right:", ({
+  theme
+}) => theme.space[2], ";");
+const findClosestOption = (options, searchInput) => {
+  if (searchInput) {
+    if (!Array.isArray(options)) {
+      const possibleOptions = {
+        ...options
+      };
+      Object.keys(possibleOptions).map(group => {
+        possibleOptions[group] = possibleOptions[group].filter(option => !option.disabled);
+        return null;
+      });
+      if (Object.keys(possibleOptions).some(group => possibleOptions[group].length > 0)) {
+        const firstFit = Object.keys(possibleOptions).map(group => possibleOptions[group][0]).filter(value => !!value)[0];
+        return firstFit;
+      }
+    } else {
+      const possibleOptions = [...options].filter(option => !option.disabled);
+      if (possibleOptions.length > 0) {
+        return possibleOptions[0];
+      }
+    }
+  }
+  return null;
+};
+const SearchBarDropdown = ({
+  placeholder,
+  displayedOptions,
+  setSearchBarActive,
+  onChange
+}) => {
+  const {
+    onSearch,
+    setSearchInput,
+    searchInput,
+    options,
+    multiselect,
+    setSelectedData,
+    selectedData
+  } = useSelectInput();
+  const handleChange = search => {
+    if (search.length > 0) {
+      // case insensitive search
+      const regex = RegExp(search, 'i');
+      if (!Array.isArray(options)) {
+        const filteredOptions = {
+          ...options
+        };
+        Object.keys(filteredOptions).map(group => {
+          filteredOptions[group] = filteredOptions[group].filter(option => option.searchText ? option.searchText.match(regex) : option.value.match(regex));
+          return null;
+        });
+        onSearch(filteredOptions);
+      } else {
+        const filteredOptions = [...options].filter(option => option.searchText ? option.searchText.match(regex) : option.value.match(regex));
+        onSearch(filteredOptions);
+      }
+    } else {
+      onSearch(options);
+    }
+    setSearchInput(search);
+  };
+  const handleKeyDown = (key, search) => {
+    if (key === 'Enter') {
+      const closestOption = findClosestOption(displayedOptions, search);
+      if (closestOption) {
+        if (multiselect) {
+          setSelectedData({
+            type: 'selectOption',
+            clickedOption: closestOption,
+            group: !Array.isArray(options) ? Object.keys(options).filter(group => options[group].includes(closestOption))[0] : undefined
+          });
+          onChange?.(selectedData.selectedValues.includes(closestOption) ? selectedData.selectedValues.map(val => val?.value) : [...selectedData.selectedValues, closestOption].map(val => val?.value));
+          setSearchInput(closestOption.searchText ?? closestOption.value);
+        } else {
+          setSelectedData({
+            type: 'selectOption',
+            clickedOption: closestOption
+          });
+          onChange?.(selectedData.selectedValues.map(val => val?.value));
+        }
+      }
+    }
+  };
+  return jsx(StyledInput, {
+    value: searchInput,
+    onChange: event => handleChange(event),
+    placeholder: placeholder,
+    onFocus: () => setSearchBarActive(true),
+    onBlur: () => setSearchBarActive(false),
+    "data-testid": "search-bar",
+    prefix: jsx(Icon, {
+      name: "search",
+      size: "small",
+      sentiment: "neutral"
+    }),
+    onKeyDown: event => handleKeyDown(event.key, searchInput),
+    autoFocus: true,
+    size: "medium",
+    "aria-label": "search-bar"
+  });
+};
+
+export { SearchBarDropdown };

package/dist/src/components/SelectInputV2/SelectBar.js

@@ -0,0 +1,269 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '@ultraviolet/icons';
+import { useRef, useState, useMemo, useEffect } from 'react';
+import { Button } from '../Button/index.js';
+import { Stack } from '../Stack/index.js';
+import { Tag } from '../Tag/index.js';
+import { Text } from '../Text/index.js';
+import { useSelectInput } from './SelectInputProvider.js';
+import { INPUT_SIZE_HEIGHT, SIZES_TAG } from './types.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const StateStack = /*#__PURE__*/_styled(Stack, {
+  target: "ejy0aca3"
+})("padding-right:", ({
+  theme
+}) => theme.space['2'], ";display:flex;");
+const StyledInputWrapper = /*#__PURE__*/_styled(Stack, {
+  target: "ejy0aca2"
+})("display:flex;padding:", ({
+  theme
+}) => theme.space[1], ";padding-right:0;padding-left:", ({
+  theme
+}) => theme.space[2], ";cursor:pointer;box-shadow:none;background:", ({
+  theme
+}) => theme.colors.neutral.background, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";&:hover,:focus{border-color:", ({
+  theme
+}) => theme.colors.primary.borderHover, ";outline:none;}&[data-readonly='true']{background:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";border-color:", ({
+  theme
+}) => theme.colors.neutral.border, ";cursor:default;}&[data-disabled='true']{background:", ({
+  theme
+}) => theme.colors.neutral.backgroundDisabled, ";border-color:", ({
+  theme
+}) => theme.colors.neutral.borderDisabled, ";cursor:not-allowed;}&[data-size='small']{height:", INPUT_SIZE_HEIGHT.small, "px;}&[data-size='medium']{height:", INPUT_SIZE_HEIGHT.medium, "px;}&[data-size='larger']{height:", INPUT_SIZE_HEIGHT.large, "px;}&[data-state='neutral']{border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";}&[data-state='success']{border:1px solid ", ({
+  theme
+}) => theme.colors.success.border, ";}&[data-state='danger']{border:1px solid ", ({
+  theme
+}) => theme.colors.danger.border, ";}&:not([data-disabled='true']):not([data-readonly]):hover{border-color:", ({
+  theme
+}) => theme.colors.primary.border, ";}&:not([data-disabled='true']):not([data-readonly]):active{box-shadow:", ({
+  theme
+}) => theme.shadows.focusPrimary, ";}&[data-dropdownvisible='true']{box-shadow:", ({
+  theme
+}) => theme.shadows.focusPrimary, ";border-color:", ({
+  theme
+}) => theme.colors.primary.borderHover, ";}");
+const CustomTag = /*#__PURE__*/_styled(Tag, {
+  target: "ejy0aca1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1snt5jp",
+  styles: "height:fit-content;width:fit-content"
+} : {
+  name: "1snt5jp",
+  styles: "height:fit-content;width:fit-content",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledPlaceholder = /*#__PURE__*/_styled(Text, {
+  target: "ejy0aca0"
+})("color:", ({
+  theme
+}) => theme.colors.neutral.textWeak, ";text-size:", ({
+  theme
+}) => theme.typography.body.fontSize, ";display:flex;flex:1;align-self:center;&[data-disabled='true']{color:", ({
+  theme
+}) => theme.colors.neutral.textWeakDisabled, ";}");
+const isValidSelectedValue = (selectedValue, options) => !Array.isArray(options) ? Object.keys(options).some(group => options[group].some(option => option === selectedValue && !option.disabled)) : options.some(option => option === selectedValue && !option.disabled);
+const DisplayValues = ({
+  multiselect,
+  refTag,
+  nonOverflowedValues,
+  disabled,
+  readOnly,
+  onChange,
+  overflowed,
+  overflowAmount,
+  setSelectedData,
+  selectedData,
+  size
+}) => multiselect ? jsxs(Stack, {
+  direction: "row",
+  gap: "1",
+  wrap: "nowrap",
+  ref: refTag,
+  alignItems: "center",
+  children: [nonOverflowedValues.map(option => jsx(CustomTag, {
+    "data-testid": "selected-options-tags",
+    sentiment: "neutral",
+    disabled: disabled,
+    onClose: !readOnly ? event => {
+      event.stopPropagation();
+      setSelectedData({
+        type: 'selectOption',
+        clickedOption: option
+      });
+      const newSelectedValues = selectedData.selectedValues?.filter(val => val !== option);
+      onChange?.(newSelectedValues.map(val => val?.value));
+    } : undefined,
+    children: option?.label
+  }, option?.value)), overflowed ? jsxs(Tag, {
+    sentiment: "neutral",
+    disabled: disabled,
+    "data-testid": "plus-tag",
+    "aria-label": "Plus tag",
+    children: [jsx(Icon, {
+      name: "plus"
+    }), overflowAmount]
+  }, "+") : null]
+}) : jsx(Text, {
+  as: "p",
+  variant: size === 'large' ? 'body' : 'bodySmall',
+  children: selectedData.selectedValues[0]?.label
+});
+const SelectBar = ({
+  size,
+  clearable,
+  disabled,
+  readOnly,
+  placeholder,
+  success,
+  error,
+  onChange,
+  autoFocus,
+  innerRef
+}) => {
+  const {
+    isDropdownVisible,
+    setIsDropdownVisible,
+    options,
+    multiselect,
+    selectedData,
+    setSelectedData
+  } = useSelectInput();
+  const openable = !(readOnly || disabled);
+  const refTag = useRef(null);
+  const width = innerRef.current?.offsetWidth;
+  const [overflowed, setOverflowed] = useState(false);
+  const [overflowAmount, setOverflowAmount] = useState(0);
+  const [nonOverflowedValues, setNonOverFlowedValues] = useState(selectedData.selectedValues[0] ? [selectedData.selectedValues[0]] : []);
+  const state = useMemo(() => {
+    if (error) {
+      return 'danger';
+    }
+    if (success) {
+      return 'success';
+    }
+    return 'neutral';
+  }, [error, success]);
+  useEffect(() => {
+    // When too many items are selected, too avoid overflow, compute the number of tags to display and add a + tag
+    let tagsWidth = 0;
+    let computedOverflowAmount = 0;
+    let computedNonOverflowedValues = [];
+    const newSelectedValues = selectedData.selectedValues.filter(selectedValue => isValidSelectedValue(selectedValue, options));
+    for (const selectedValue of newSelectedValues) {
+      if (selectedValue && selectedValue.label && width && isValidSelectedValue(selectedValue, options)) {
+        const lengthValue = selectedValue.value.length; // Find a better way to find the number of displayed characters?
+        const totalTagWidth = SIZES_TAG.tagWidth + SIZES_TAG.letterWidth * lengthValue;
+        if (totalTagWidth + tagsWidth > width - 100) {
+          computedOverflowAmount += 1;
+          setOverflowAmount(computedOverflowAmount);
+        } else {
+          computedNonOverflowedValues = [...computedNonOverflowedValues, selectedValue];
+          setNonOverFlowedValues(computedNonOverflowedValues);
+          tagsWidth += totalTagWidth;
+        }
+      }
+    }
+    if (computedOverflowAmount === 0) {
+      setOverflowed(false);
+    } else {
+      setOverflowed(true);
+    }
+    setOverflowAmount(computedOverflowAmount);
+  }, [options, selectedData.selectedValues, width]);
+  useEffect(() => {
+    setSelectedData({
+      type: 'update'
+    });
+  }, [setSelectedData, options]);
+  return jsxs(StyledInputWrapper, {
+    "data-disabled": disabled,
+    "data-readonly": readOnly,
+    "data-size": size,
+    "data-dropdownvisible": isDropdownVisible,
+    "data-state": state,
+    direction: "row",
+    wrap: "nowrap",
+    gap: "1",
+    justifyContent: "space-between",
+    alignItems: "center",
+    onClick: openable ? () => setIsDropdownVisible(!isDropdownVisible) : undefined,
+    "data-testid": "select-bar",
+    autoFocus: autoFocus,
+    onKeyDown: event => {
+      if (event.key === 'ArrowDown') {
+        if (!isDropdownVisible) {
+          setIsDropdownVisible(true);
+        } else {
+          document.getElementById(`option-0`)?.focus();
+        }
+      }
+      return ['Enter', ' '].includes(event.key) && openable ? setIsDropdownVisible(!isDropdownVisible) : null;
+    },
+    ref: innerRef,
+    "aria-labelledby": "select bar",
+    "aria-haspopup": "listbox",
+    "aria-expanded": isDropdownVisible,
+    "aria-controls": "select-dropdown",
+    tabIndex: 0,
+    children: [selectedData.selectedValues.length > 0 ? jsx(DisplayValues, {
+      multiselect: multiselect,
+      refTag: refTag,
+      nonOverflowedValues: nonOverflowedValues,
+      disabled: disabled,
+      readOnly: readOnly,
+      selectedData: selectedData,
+      setSelectedData: setSelectedData,
+      onChange: onChange,
+      overflowed: overflowed,
+      overflowAmount: overflowAmount,
+      size: size
+    }) : jsx(StyledPlaceholder, {
+      as: "p",
+      variant: size === 'large' ? 'body' : 'bodySmall',
+      "data-disabled": disabled,
+      children: placeholder
+    }), jsxs(StateStack, {
+      direction: "row",
+      gap: 1,
+      alignItems: "center",
+      children: [error ? jsx(Icon, {
+        name: "alert",
+        sentiment: "danger"
+      }) : null, success && !error ? jsx(Icon, {
+        name: "checkbox-circle-outline",
+        sentiment: "success"
+      }) : null, clearable && selectedData.selectedValues.length > 0 ? jsx(Button, {
+        "aria-label": "clear value",
+        disabled: disabled || ![selectedData.selectedValues[0]] || readOnly,
+        variant: "ghost",
+        size: "small",
+        icon: "close",
+        onClick: event => {
+          event.stopPropagation();
+          setSelectedData({
+            type: 'clearAll'
+          });
+          onChange?.([]);
+        },
+        sentiment: "neutral",
+        "data-testid": "clear-all"
+      }) : null, jsx(Icon, {
+        "aria-label": "show dropdown",
+        size: "small",
+        name: "arrow-down",
+        sentiment: "neutral",
+        disabled: disabled || readOnly
+      })]
+    })]
+  });
+};
+
+export { SelectBar };

package/dist/src/components/SelectInputV2/SelectInputProvider.js

@@ -0,0 +1,153 @@
+import { useState, useReducer, useMemo, createContext, useContext } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const SelectInputContext = /*#__PURE__*/createContext({
+  options: [],
+  multiselect: false,
+  onSearch: () => {},
+  isDropdownVisible: false,
+  setIsDropdownVisible: () => {},
+  searchInput: '',
+  setSearchInput: () => {},
+  selectAll: {
+    label: ''
+  },
+  selectAllGroup: false,
+  numberOfOptions: 0,
+  displayedOptions: [],
+  selectedData: {
+    allSelected: false,
+    selectedGroups: [],
+    selectedValues: []
+  },
+  setSelectedData: () => {}
+});
+const useSelectInput = () => useContext(SelectInputContext);
+const SelectInputProvider = ({
+  options,
+  multiselect,
+  selectAll,
+  value,
+  selectAllGroup,
+  numberOfOptions,
+  children
+}) => {
+  const defaultValue = value ? [value] : [];
+  const [displayedOptions, setDisplayedOptions] = useState(options);
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const [searchInput, setSearchInput] = useState('');
+  const allValues = [];
+  const allGroups = [];
+  if (!Array.isArray(options)) {
+    Object.keys(options).map(group => options[group].map(option => {
+      if (!option.disabled) {
+        allValues.push(option);
+      }
+      return null;
+    }));
+    Object.keys(options).forEach(group => allGroups.push(group));
+  } else {
+    options.map(option => allValues.push(option));
+  }
+  const reducer = (state, action) => {
+    switch (action.type) {
+      case 'selectAll':
+        if (state.allSelected) {
+          return {
+            selectedValues: [],
+            allSelected: false,
+            selectedGroups: []
+          };
+        }
+        return {
+          selectedValues: allValues,
+          allSelected: true,
+          selectedGroups: allGroups
+        };
+      case 'selectGroup':
+        if (!Array.isArray(options)) {
+          if (state.selectedGroups.includes(action.selectedGroup)) {
+            return {
+              selectedValues: [...state.selectedValues].filter(selectedValue => !options[action.selectedGroup].includes(selectedValue)),
+              allSelected: false,
+              selectedGroups: state.selectedGroups.filter(selectedGroup => selectedGroup !== action.selectedGroup)
+            };
+          }
+          const newSelectedValues = [...state.selectedValues];
+          options[action.selectedGroup].map(option => newSelectedValues.includes(option) || option.disabled ? null : newSelectedValues.push(option));
+          return {
+            selectedValues: newSelectedValues,
+            allSelected: newSelectedValues.length === numberOfOptions,
+            selectedGroups: [...state.selectedGroups, action.selectedGroup]
+          };
+        }
+        return state;
+      case 'selectOption':
+        if (multiselect) {
+          if (state.selectedValues.includes(action.clickedOption)) {
+            return {
+              selectedValues: state.selectedValues.filter(val => val !== action.clickedOption),
+              allSelected: false,
+              selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter(selectedGroup => selectedGroup !== action.group) : []
+            };
+          }
+          return {
+            selectedValues: [...state.selectedValues, action.clickedOption],
+            allSelected: state.selectedValues.length + 1 === numberOfOptions,
+            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every(option => [...state.selectedValues, action.clickedOption].includes(option) || option.disabled) ? [...state.selectedGroups, action.group] : state.selectedGroups
+          };
+        }
+        return {
+          selectedValues: [action.clickedOption],
+          allSelected: false,
+          selectedGroups: state.selectedGroups
+        };
+      case 'clearAll':
+        return {
+          selectedGroups: [],
+          selectedValues: [],
+          allSelected: false
+        };
+      case 'update':
+        // update the selected values to only keep non-disabled one
+        return {
+          selectedGroups: state.selectedGroups,
+          allSelected: state.allSelected,
+          selectedValues: state.selectedValues.filter(selectedValue => {
+            if (!Array.isArray(options)) {
+              return Object.keys(options).some(group => options[group].some(option => option === selectedValue && !option.disabled));
+            }
+            return options.some(option => option === selectedValue && !option.disabled);
+          })
+        };
+      default:
+        return state;
+    }
+  };
+  const [selectedData, setSelectedData] = useReducer(reducer, {
+    selectedValues: defaultValue,
+    allSelected: false,
+    selectedGroups: []
+  });
+  const providerValue = useMemo(() => ({
+    onSearch: setDisplayedOptions,
+    isDropdownVisible,
+    setIsDropdownVisible,
+    searchInput,
+    setSearchInput,
+    options,
+    multiselect,
+    selectAll,
+    selectAllGroup,
+    numberOfOptions,
+    displayedOptions,
+    selectedData,
+    setSelectedData
+  }), [displayedOptions, isDropdownVisible, multiselect, numberOfOptions, options, searchInput, selectAll, selectAllGroup, selectedData]);
+  return jsx(SelectInputContext.Provider, {
+    value: providerValue,
+    children: children
+  });
+};
+
+export { SelectInputProvider, useSelectInput };