11490031592

Committed 24 Oct 2024 12:00AM UTC coverage: 95.891%. Remained the same

Build # 11490031592

Build Type

Pull #1961

github

Committed by

web-flow

Commit Message

Merge ed6966c4e into 5a6c53c15

Pull Request Pull Request #1961: refactor(dropdowns): use transient props where appropriate

Run Details

3327 of 3692 branches covered (90.11%)

Branch coverage included in aggregate %.

40 of 40 new or added lines in 10 files covered. (100.0%)

1 existing line in 1 file now uncovered.

9904 of 10106 relevant lines covered (98.0%)

242.86 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

98.36

/packages/dropdowns/src/elements/combobox/Combobox.tsx

/**
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

import React, {
  HTMLAttributes,
  InputHTMLAttributes,
  LabelHTMLAttributes,
  forwardRef,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState
} from 'react';
import PropTypes from 'prop-types';
import { ThemeContext } from 'styled-components';
import { IUseComboboxReturnValue, useCombobox } from '@zendeskgarden/container-combobox';
import { DEFAULT_THEME, useText, useWindow } from '@zendeskgarden/react-theming';
import { VALIDATION } from '@zendeskgarden/react-forms';
import ChevronIcon from '@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg';
import { IComboboxProps, IOptionProps } from '../../types';
import { ComboboxContext } from '../../context/useComboboxContext';
import useFieldContext from '../../context/useFieldContext';
import {
  StyledCombobox,
  StyledContainer,
  StyledInputIcon,
  StyledInput,
  StyledInputGroup,
  StyledTagsButton,
  StyledTrigger,
  StyledValue
} from '../../views';
import { Listbox } from './Listbox';
import { TagGroup } from './TagGroup';
import { toOptions } from './utils';

const MAX_TAGS = 4;

/**
 * @extends HTMLAttributes<HTMLDivElement>
 */
export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
  (
    {
      children,
      activeIndex,
      defaultActiveIndex,
      defaultExpanded,
      endIcon,
      focusInset,
      inputProps: _inputProps,
      inputValue: _inputValue,
      isAutocomplete,
      isBare,
      isCompact,
      isDisabled,
      isEditable,
      isExpanded: _isExpanded,
      isMultiselectable,
      listboxAppendToNode,
      listboxAriaLabel,
      listboxMaxHeight,
      listboxMinHeight,
      listboxZIndex,
      maxHeight,
      maxTags = MAX_TAGS,
      onChange,
      placeholder,
      renderExpandTags,
      renderValue,
      selectionValue,
      startIcon,
      validation,
      ...props
    },
    ref
  ) => {
    const {
      hasHint,
      hasMessage,
      labelProps,
      setLabelProps,
      hintProps,
      setHintProps,
      messageProps,
      setMessageProps
    } = useFieldContext();
    const [isInputHidden, setIsInputHidden] = useState(true);
    const [isLabelHovered, setIsLabelHovered] = useState(false);
    const [isTagGroupExpanded, setIsTagGroupExpanded] = useState(false);
    const [optionTagProps, setOptionTagProps] = useState<Record<string, IOptionProps['tagProps']>>(
      {}
    );
    const options = useMemo(() => {
      const tagProps: Record<string, IOptionProps['tagProps']> = {};
      const retVal = toOptions(children, tagProps);

      if (isMultiselectable) {
        setOptionTagProps(value => ({ ...value, ...tagProps }));
      }

      return retVal;
    }, [children, isMultiselectable]);
    const triggerRef = useRef<HTMLDivElement>(null);
    const inputRef = useRef<HTMLInputElement>(null);
    const listboxRef = useRef<HTMLUListElement>(null);
    /* istanbul ignore next */
    const theme = useContext(ThemeContext) || DEFAULT_THEME;
    const environment = useWindow(theme);
    const {
      activeValue,
      inputValue,
      isExpanded,
      getTriggerProps,
      getHintProps,
      getInputProps,
      getLabelProps,
      getListboxProps,
      getMessageProps,
      getOptionProps,
      getOptGroupProps,
      getTagProps,
      removeSelection,
      selection
    } = useCombobox({
      idPrefix: props.id,
      triggerRef,
      inputRef,
      listboxRef,
      options,
      environment,
      hasHint,
      hasMessage,
      isAutocomplete,
      isEditable,
      isMultiselectable,
      disabled: isDisabled,
      inputValue: _inputValue,
      selectionValue,
      isExpanded: _isExpanded,
      defaultExpanded,
      activeIndex,
      defaultActiveIndex,
      onChange
    });
    const contextValue = useMemo(
      () => ({
        activeValue,
        getOptionProps,
        getOptGroupProps,
        getTagProps,
        isCompact,
        removeSelection
      }),
      [activeValue, getOptionProps, getOptGroupProps, getTagProps, isCompact, removeSelection]
    );
    const hasChevron = useMemo(
      () => !isBare && (isAutocomplete || !isEditable),
      [isAutocomplete, isBare, isEditable]
    );
    const expandTags = useText(
      Combobox,
      { renderExpandTags },
      'renderExpandTags',
      '+ {{value}} more',
      isMultiselectable || false
    );
    const _listboxAriaLabel = useText(
      Combobox,
      { listboxAriaLabel },
      'listboxAriaLabel',
      'Options'
    );
    const triggerProps = {
      ...(getTriggerProps({
        onFocus: () => {
          if (!isDisabled) {
            if (isEditable) {
              setIsInputHidden(false);
            }

            if (isMultiselectable) {
              setIsTagGroupExpanded(true);
            }
          }
        },
        onBlur: event => {
          if (event.relatedTarget === null || !triggerRef.current?.contains(event.relatedTarget)) {
            if (isEditable) {
              setIsInputHidden(true);
            }

            if (isMultiselectable) {
              setIsTagGroupExpanded(false);
            }
          }
        }
      }) as HTMLAttributes<HTMLDivElement>)
    };
    const inputProps = {
      'aria-invalid': validation === 'error' || validation === 'warning',
      hidden: isInputHidden,
      placeholder,
      ...(getInputProps({
        ...(_inputProps as IUseComboboxReturnValue['getInputProps'])
      }) as InputHTMLAttributes<HTMLInputElement>)
    };
    const listboxProps = getListboxProps({
      'aria-label': _listboxAriaLabel!
    }) as HTMLAttributes<HTMLUListElement>;

    useEffect(() => {
      // context callback
      if (!labelProps) {
        const _labelProps = getLabelProps({
          onMouseEnter: () => setIsLabelHovered(true),
          onMouseLeave: () => setIsLabelHovered(false)
        }) as LabelHTMLAttributes<HTMLLabelElement>;

        setLabelProps(_labelProps);
      }

      return () => labelProps && setLabelProps(undefined);
    }, [getLabelProps, labelProps, setLabelProps]);

    useEffect(() => {
      // context callback
      if (!hintProps) {
        const _hintProps = getHintProps() as HTMLAttributes<HTMLDivElement>;

        setHintProps(_hintProps);
      }

      return () => hintProps && setHintProps(undefined);
    }, [getHintProps, hintProps, setHintProps]);

    useEffect(() => {
      // context callback
      if (!messageProps) {
        const _messageProps = getMessageProps() as HTMLAttributes<HTMLDivElement>;

        setMessageProps(_messageProps);
      }

      return () => messageProps && setMessageProps(undefined);
    }, [getMessageProps, messageProps, setMessageProps]);

    return (
      <ComboboxContext.Provider value={contextValue}>
        <StyledCombobox
          $isCompact={isCompact}
          tabIndex={-1} // HACK: otherwise screenreaders can't read the label
          {...props}
          ref={ref}
        >
          <StyledTrigger
            $isAutocomplete={isAutocomplete}
            $isBare={isBare}
            $isCompact={isCompact}
            $isEditable={isEditable}
            $isLabelHovered={isLabelHovered}
            $isMultiselectable={isMultiselectable}
            $maxHeight={maxHeight}
            $focusInset={focusInset}
            $validation={validation}
            {...triggerProps}
          >
            <StyledContainer>
              {!!startIcon && (
                <StyledInputIcon $isLabelHovered={isLabelHovered} $isCompact={isCompact}>
                  {startIcon}
                </StyledInputIcon>
              )}
              <StyledInputGroup>
                {!!isMultiselectable && Array.isArray(selection) && (
                  <TagGroup
                    isDisabled={isDisabled}
                    isExpanded={isTagGroupExpanded}
                    maxTags={maxTags}
                    optionTagProps={optionTagProps}
                    selection={selection}
                  >
                    {selection.length > maxTags && (
                      <StyledTagsButton
                        disabled={isDisabled}
                        hidden={isTagGroupExpanded}
                        $isCompact={isCompact}
                        tabIndex={-1}
                        type="button"
                      >
                        {(() => {
                          const value = selection.length - maxTags;

                          return renderExpandTags
                            ? renderExpandTags(value)
                            : expandTags?.replace('{{value}}', value.toString());
                        })()}
                      </StyledTagsButton>
                    )}
                  </TagGroup>
                )}
                <StyledValue
                  hidden={!isInputHidden}
                  $isAutocomplete={isAutocomplete}
                  $isBare={isBare}
                  $isCompact={isCompact}
                  $isDisabled={isDisabled}
                  $isEditable={isEditable}
                  $isMultiselectable={isMultiselectable}
                  $isPlaceholder={!(inputValue || renderValue)}
                >
                  {renderValue ? renderValue({ selection, inputValue }) : inputValue || placeholder}
                </StyledValue>
                <StyledInput
                  $isBare={isBare}
                  $isCompact={isCompact}
                  $isEditable={isEditable}
                  $isMultiselectable={isMultiselectable}
                  {...inputProps}
                />
              </StyledInputGroup>
              {!!(hasChevron || endIcon) && (
                <StyledInputIcon
                  $isCompact={isCompact}
                  $isEnd
                  $isLabelHovered={isLabelHovered}
                  $isRotated={!!(hasChevron && isExpanded)}
                >
                  {hasChevron ? <ChevronIcon /> : endIcon}
                </StyledInputIcon>
              )}
            </StyledContainer>
          </StyledTrigger>
          <Listbox
            appendToNode={listboxAppendToNode}
            isCompact={isCompact}
            isExpanded={isExpanded}
            maxHeight={listboxMaxHeight}
            minHeight={listboxMinHeight}
            triggerRef={triggerRef}
            zIndex={listboxZIndex}
            {...listboxProps}
          >
            {children}
          </Listbox>
        </StyledCombobox>
      </ComboboxContext.Provider>
    );
  }
);

Combobox.displayName = 'Combobox';

Combobox.propTypes = {
  activeIndex: PropTypes.number,
  defaultActiveIndex: PropTypes.number,
  defaultExpanded: PropTypes.bool,
  endIcon: PropTypes.any,
  focusInset: PropTypes.bool,
  id: PropTypes.string,
  inputProps: PropTypes.object,
  inputValue: PropTypes.string,
  isAutocomplete: PropTypes.bool,
  isBare: PropTypes.bool,
  isCompact: PropTypes.bool,
  isDisabled: PropTypes.bool,
  isEditable: PropTypes.bool,
  isExpanded: PropTypes.bool,
  isMultiselectable: PropTypes.bool,
  listboxAppendToNode: PropTypes.any,
  listboxAriaLabel: PropTypes.string,
  listboxMaxHeight: PropTypes.string,
  listboxMinHeight: PropTypes.string,
  listboxZIndex: PropTypes.number,
  maxHeight: PropTypes.string,
  maxTags: PropTypes.number,
  onChange: PropTypes.func,
  placeholder: PropTypes.string,
  renderExpandTags: PropTypes.func,
  renderValue: PropTypes.func,
  selectionValue: PropTypes.any,
  startIcon: PropTypes.any,
  validation: PropTypes.oneOf(VALIDATION)
};

Combobox.defaultProps = {
  isEditable: true,
  listboxMaxHeight: '400px',
  listboxZIndex: 1000,
  maxTags: MAX_TAGS
};

1	/**
2	* Copyright Zendesk, Inc.
3	*
4	* Use of this source code is governed under the Apache License, Version 2.0
5	* found at http://www.apache.org/licenses/LICENSE-2.0.
6	*/
7
8	import React, {
9	HTMLAttributes,
10	InputHTMLAttributes,
11	LabelHTMLAttributes,
12	forwardRef,
13	useContext,
14	useEffect,
15	useMemo,
16	useRef,
17	useState
18	} from 'react';	3✔
19	import PropTypes from 'prop-types';	3✔
20	import { ThemeContext } from 'styled-components';	3✔
21	import { IUseComboboxReturnValue, useCombobox } from '@zendeskgarden/container-combobox';	3✔
22	import { DEFAULT_THEME, useText, useWindow } from '@zendeskgarden/react-theming';	3✔
23	import { VALIDATION } from '@zendeskgarden/react-forms';	3✔
24	import ChevronIcon from '@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg';	3✔
25	import { IComboboxProps, IOptionProps } from '../../types';
26	import { ComboboxContext } from '../../context/useComboboxContext';	3✔
27	import useFieldContext from '../../context/useFieldContext';	3✔
28	import {
29	StyledCombobox,
30	StyledContainer,
31	StyledInputIcon,
32	StyledInput,
33	StyledInputGroup,
34	StyledTagsButton,
35	StyledTrigger,
36	StyledValue
37	} from '../../views';	3✔
38	import { Listbox } from './Listbox';	3✔
39	import { TagGroup } from './TagGroup';	3✔
40	import { toOptions } from './utils';	3✔
41
42	const MAX_TAGS = 4;	3✔
43
44	/**
45	* @extends HTMLAttributes<HTMLDivElement>
46	*/
47	export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(	72✔
48	(
49	{
50	children,
51	activeIndex,
52	defaultActiveIndex,
53	defaultExpanded,
54	endIcon,
55	focusInset,
56	inputProps: _inputProps,
57	inputValue: _inputValue,
58	isAutocomplete,
59	isBare,
60	isCompact,
61	isDisabled,
62	isEditable,
63	isExpanded: _isExpanded,
64	isMultiselectable,
65	listboxAppendToNode,
66	listboxAriaLabel,
67	listboxMaxHeight,
68	listboxMinHeight,
69	listboxZIndex,
70	maxHeight,
71	maxTags = MAX_TAGS,	×
72	onChange,
73	placeholder,
74	renderExpandTags,
75	renderValue,
76	selectionValue,
77	startIcon,
78	validation,
79	...props
80	},
81	ref
82	) => {
83	const {
84	hasHint,
85	hasMessage,
86	labelProps,
87	setLabelProps,
88	hintProps,
89	setHintProps,
90	messageProps,
91	setMessageProps
92	} = useFieldContext();	232✔
93	const [isInputHidden, setIsInputHidden] = useState(true);	228✔
94	const [isLabelHovered, setIsLabelHovered] = useState(false);	228✔
95	const [isTagGroupExpanded, setIsTagGroupExpanded] = useState(false);	228✔
96	const [optionTagProps, setOptionTagProps] = useState<Record<string, IOptionProps['tagProps']>>(	228✔
97	{}
98	);
99	const options = useMemo(() => {	228✔
100	const tagProps: Record<string, IOptionProps['tagProps']> = {};	64✔
101	const retVal = toOptions(children, tagProps);	64✔
102
103	if (isMultiselectable) {	64✔
104	setOptionTagProps(value => ({ ...value, ...tagProps }));	24✔
105	}
106
107	return retVal;	64✔
108	}, [children, isMultiselectable]);
109	const triggerRef = useRef<HTMLDivElement>(null);	228✔
110	const inputRef = useRef<HTMLInputElement>(null);	228✔
111	const listboxRef = useRef<HTMLUListElement>(null);	228✔
112	/* istanbul ignore next */
113	const theme = useContext(ThemeContext) \|\| DEFAULT_THEME;
114	const environment = useWindow(theme);	228✔
115	const {
116	activeValue,
117	inputValue,
118	isExpanded,
119	getTriggerProps,
120	getHintProps,
121	getInputProps,
122	getLabelProps,
123	getListboxProps,
124	getMessageProps,
125	getOptionProps,
126	getOptGroupProps,
127	getTagProps,
128	removeSelection,
129	selection
130	} = useCombobox({	228✔
131	idPrefix: props.id,
132	triggerRef,
133	inputRef,
134	listboxRef,
135	options,
136	environment,
137	hasHint,
138	hasMessage,
139	isAutocomplete,
140	isEditable,
141	isMultiselectable,
142	disabled: isDisabled,
143	inputValue: _inputValue,
144	selectionValue,
145	isExpanded: _isExpanded,
146	defaultExpanded,
147	activeIndex,
148	defaultActiveIndex,
149	onChange
150	});
151	const contextValue = useMemo(	228✔
152	() => ({	221✔
153	activeValue,
154	getOptionProps,
155	getOptGroupProps,
156	getTagProps,
157	isCompact,
158	removeSelection
159	}),
160	[activeValue, getOptionProps, getOptGroupProps, getTagProps, isCompact, removeSelection]
161	);
162	const hasChevron = useMemo(	228✔
163	() => !isBare && (isAutocomplete \|\| !isEditable),	62✔
164	[isAutocomplete, isBare, isEditable]
165	);
166	const expandTags = useText(	228✔
167	Combobox,
168	{ renderExpandTags },
169	'renderExpandTags',
170	'+ {{value}} more',
171	isMultiselectable \|\| false	360✔
172	);
173	const _listboxAriaLabel = useText(	228✔
174	Combobox,
175	{ listboxAriaLabel },
176	'listboxAriaLabel',
177	'Options'
178	);
179	const triggerProps = {	228✔
180	...(getTriggerProps({
181	onFocus: () => {
182	if (!isDisabled) {	56✔
183	if (isEditable) {	55✔
184	setIsInputHidden(false);	55✔
185	}
186
187	if (isMultiselectable) {	55✔
188	setIsTagGroupExpanded(true);	23✔
189	}
190	}
191	},
192	onBlur: event => {
193	if (event.relatedTarget === null \|\| !triggerRef.current?.contains(event.relatedTarget)) {	16✔
194	if (isEditable) {	2✔
195	setIsInputHidden(true);	2✔
196	}
197
198	if (isMultiselectable) {	2✔
199	setIsTagGroupExpanded(false);	1✔
200	}
201	}
202	}
203	}) as HTMLAttributes<HTMLDivElement>)
204	};
205	const inputProps = {	228✔
206	'aria-invalid': validation === 'error' \|\| validation === 'warning',	454✔
207	hidden: isInputHidden,
208	placeholder,
209	...(getInputProps({
210	...(_inputProps as IUseComboboxReturnValue['getInputProps'])
211	}) as InputHTMLAttributes<HTMLInputElement>)
212	};
213	const listboxProps = getListboxProps({	228✔
214	'aria-label': _listboxAriaLabel!
215	}) as HTMLAttributes<HTMLUListElement>;
216
217	useEffect(() => {	228✔
218	// context callback
219	if (!labelProps) {	122✔
220	const _labelProps = getLabelProps({	61✔
221	onMouseEnter: () => setIsLabelHovered(true),	2✔
UNCOV 222	onMouseLeave: () => setIsLabelHovered(false)	×
223	}) as LabelHTMLAttributes<HTMLLabelElement>;
224
225	setLabelProps(_labelProps);	61✔
226	}
227
228	return () => labelProps && setLabelProps(undefined);	122✔
229	}, [getLabelProps, labelProps, setLabelProps]);
230
231	useEffect(() => {	228✔
232	// context callback
233	if (!hintProps) {	122✔
234	const _hintProps = getHintProps() as HTMLAttributes<HTMLDivElement>;	61✔
235
236	setHintProps(_hintProps);	61✔
237	}
238
239	return () => hintProps && setHintProps(undefined);	122✔
240	}, [getHintProps, hintProps, setHintProps]);
241
242	useEffect(() => {	228✔
243	// context callback
244	if (!messageProps) {	122✔
245	const _messageProps = getMessageProps() as HTMLAttributes<HTMLDivElement>;	61✔
246
247	setMessageProps(_messageProps);	61✔
248	}
249
250	return () => messageProps && setMessageProps(undefined);	122✔
251	}, [getMessageProps, messageProps, setMessageProps]);
252
253	return (	228✔
254	<ComboboxContext.Provider value={contextValue}>
255	<StyledCombobox
256	$isCompact={isCompact}
257	tabIndex={-1} // HACK: otherwise screenreaders can't read the label
258	{...props}
259	ref={ref}
260	>
261	<StyledTrigger
262	$isAutocomplete={isAutocomplete}
263	$isBare={isBare}
264	$isCompact={isCompact}
265	$isEditable={isEditable}
266	$isLabelHovered={isLabelHovered}
267	$isMultiselectable={isMultiselectable}
268	$maxHeight={maxHeight}
269	$focusInset={focusInset}
270	$validation={validation}
271	{...triggerProps}
272	>
273	<StyledContainer>
274	{!!startIcon && (	230✔
275	<StyledInputIcon $isLabelHovered={isLabelHovered} $isCompact={isCompact}>
276	{startIcon}
277	</StyledInputIcon>
278	)}
279	<StyledInputGroup>
280	{!!isMultiselectable && Array.isArray(selection) && (	418✔
281	<TagGroup
282	isDisabled={isDisabled}
283	isExpanded={isTagGroupExpanded}
284	maxTags={maxTags}
285	optionTagProps={optionTagProps}
286	selection={selection}
287	>
288	{selection.length > maxTags && (	112✔
289	<StyledTagsButton
290	disabled={isDisabled}
291	hidden={isTagGroupExpanded}
292	$isCompact={isCompact}
293	tabIndex={-1}
294	type="button"
295	>
296	{(() => {
297	const value = selection.length - maxTags;	18✔
298
299	return renderExpandTags	18✔
300	? renderExpandTags(value)
301	: expandTags?.replace('{{value}}', value.toString());
302	})()}
303	</StyledTagsButton>
304	)}
305	</TagGroup>
306	)}
307	<StyledValue
308	hidden={!isInputHidden}
309	$isAutocomplete={isAutocomplete}
310	$isBare={isBare}
311	$isCompact={isCompact}
312	$isDisabled={isDisabled}
313	$isEditable={isEditable}
314	$isMultiselectable={isMultiselectable}
315	$isPlaceholder={!(inputValue \|\| renderValue)}	444✔
316	>
317	{renderValue ? renderValue({ selection, inputValue }) : inputValue \|\| placeholder}	666✔
318	</StyledValue>
319	<StyledInput
320	$isBare={isBare}
321	$isCompact={isCompact}
322	$isEditable={isEditable}
323	$isMultiselectable={isMultiselectable}
324	{...inputProps}
325	/>
326	</StyledInputGroup>
327	{!!(hasChevron \|\| endIcon) && (	686✔
328	<StyledInputIcon
329	$isCompact={isCompact}
330	$isEnd
331	$isLabelHovered={isLabelHovered}
332	$isRotated={!!(hasChevron && isExpanded)}	48✔
333	>
334	{hasChevron ? <ChevronIcon /> : endIcon}	25✔
335	</StyledInputIcon>
336	)}
337	</StyledContainer>
338	</StyledTrigger>
339	<Listbox
340	appendToNode={listboxAppendToNode}
341	isCompact={isCompact}
342	isExpanded={isExpanded}
343	maxHeight={listboxMaxHeight}
344	minHeight={listboxMinHeight}
345	triggerRef={triggerRef}
346	zIndex={listboxZIndex}
347	{...listboxProps}
348	>
349	{children}
350	</Listbox>
351	</StyledCombobox>
352	</ComboboxContext.Provider>
353	);
354	}
355	);
356
357	Combobox.displayName = 'Combobox';	3✔
358
359	Combobox.propTypes = {	3✔
360	activeIndex: PropTypes.number,
361	defaultActiveIndex: PropTypes.number,
362	defaultExpanded: PropTypes.bool,
363	endIcon: PropTypes.any,
364	focusInset: PropTypes.bool,
365	id: PropTypes.string,
366	inputProps: PropTypes.object,
367	inputValue: PropTypes.string,
368	isAutocomplete: PropTypes.bool,
369	isBare: PropTypes.bool,
370	isCompact: PropTypes.bool,
371	isDisabled: PropTypes.bool,
372	isEditable: PropTypes.bool,
373	isExpanded: PropTypes.bool,
374	isMultiselectable: PropTypes.bool,
375	listboxAppendToNode: PropTypes.any,
376	listboxAriaLabel: PropTypes.string,
377	listboxMaxHeight: PropTypes.string,
378	listboxMinHeight: PropTypes.string,
379	listboxZIndex: PropTypes.number,
380	maxHeight: PropTypes.string,
381	maxTags: PropTypes.number,
382	onChange: PropTypes.func,
383	placeholder: PropTypes.string,
384	renderExpandTags: PropTypes.func,
385	renderValue: PropTypes.func,
386	selectionValue: PropTypes.any,
387	startIcon: PropTypes.any,
388	validation: PropTypes.oneOf(VALIDATION)
389	};
390
391	Combobox.defaultProps = {	3✔
392	isEditable: true,
393	listboxMaxHeight: '400px',
394	listboxZIndex: 1000,
395	maxTags: MAX_TAGS
396	};

zendeskgarden / react-components / 11490031592

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous