@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/ActivityIndicator/Spinner.native.js

@@ -1,144 +0,0 @@
-import React from 'react';
-import Animated from "react-native-web/dist/exports/Animated";
-import Easing from "react-native-web/dist/exports/Easing";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
-import { useA11yInfo } from '../A11yInfoProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ea = MIN_EMPTY_ANGLE / 2;
-const sa = MIN_STROKE_ANGLE / 2;
-const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    size,
-    color,
-    thickness,
-    label,
-    isStatic = false
-  } = _ref;
-  const {
-    current: timer
-  } = React.useRef(new Animated.Value(0));
-  const {
-    reduceMotionEnabled
-  } = useA11yInfo();
-  const reduceMotion = reduceMotionEnabled || isStatic;
-  React.useLayoutEffect(() => {
-    const loop = Animated.timing(timer, {
-      duration: DURATION,
-      easing: Easing.linear,
-      // Animated.loop does not work if useNativeDriver is true on web
-      useNativeDriver: true,
-      toValue: 1,
-      isInteraction: false
-    });
-    if (!reduceMotion) Animated.loop(loop).start();else loop.stop();
-  }, [timer, reduceMotion]);
-  const frames = 60 * DURATION / 1000;
-  const easing = Easing.bezier(...BEZIER);
-  const containerStyle = {
-    width: size,
-    height: size / (reduceMotion ? 1.5 : 2),
-    overflow: 'hidden'
-  };
-  const animationFrequency = reduceMotion ? [0] : [0, 1];
-
-  // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [styles.container],
-    accessible: true,
-    accessibilityLabel: label,
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [{
-        width: size,
-        height: size
-      }],
-      collapsable: false,
-      children: animationFrequency.map(index => {
-        const inputRange = Array.from(new Array(frames), (_, frameIndex) => frameIndex / (frames - 1));
-        const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
-          let progress = 2 * frameIndex / (frames - 1);
-          const rotation = index ? +(360 - sa) : -(180 - sa);
-          if (progress > 1.0) {
-            progress = 2.0 - progress;
-          }
-          const direction = index ? -1 : +1;
-          return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
-        });
-        const layerStyle = {
-          width: size,
-          height: size
-        };
-        const viewportStyle = {
-          width: size,
-          height: size
-        };
-        if (!reduceMotion) {
-          layerStyle.transform = [{
-            rotate: timer.interpolate({
-              inputRange: [0, 1],
-              outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
-            })
-          }];
-          viewportStyle.transform = [{
-            translateY: index ? -size / 2 : 0
-          }, {
-            rotate: timer.interpolate({
-              inputRange,
-              outputRange
-            })
-          }];
-        }
-        const offsetStyle = index ? {
-          top: size / 2
-        } : null;
-        const lineStyle = {
-          width: size,
-          height: size,
-          borderColor: color,
-          borderWidth: thickness,
-          borderRadius: size / 2
-        };
-        return /*#__PURE__*/_jsx(Animated.View, {
-          style: [styles.layer],
-          children: /*#__PURE__*/_jsx(Animated.View, {
-            style: layerStyle,
-            children: /*#__PURE__*/_jsx(Animated.View, {
-              style: [containerStyle, offsetStyle],
-              collapsable: false,
-              children: /*#__PURE__*/_jsx(Animated.View, {
-                style: viewportStyle,
-                children: /*#__PURE__*/_jsx(Animated.View, {
-                  style: containerStyle,
-                  collapsable: false,
-                  children: /*#__PURE__*/_jsx(Animated.View, {
-                    style: lineStyle
-                  })
-                })
-              })
-            })
-          })
-        }, index);
-      })
-    })
-  });
-});
-Spinner.displayName = 'Spinner';
-Spinner.propTypes = propTypes;
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 0,
-    flexShrink: 0
-  },
-  layer: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
-export default Spinner;

package/lib-module/ActivityIndicator/index.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils/props';
-import Spinner from './Spinner';
-
-/**
- * `ActivityIndicator` renders a visual loading state.
- * It does not handle positioning or layout of that visual loader.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const ActivityIndicator = _ref => {
-  let {
-    variant,
-    tokens,
-    label,
-    isStatic = false
-  } = _ref;
-  const {
-    size,
-    color,
-    thickness
-  } = useThemeTokens('ActivityIndicator', tokens, variant);
-  return /*#__PURE__*/_jsx(Spinner, {
-    size: size,
-    color: color,
-    thickness: thickness,
-    label: label,
-    isStatic: isStatic
-  });
-};
-ActivityIndicator.propTypes = {
-  variant: variantProp.propType,
-  tokens: getTokensPropType('ActivityIndicator'),
-  /**
-   * A visually hidden accessible label describing the action taking place
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * If true, it should render a static spinner
-   */
-  isStatic: PropTypes.bool
-};
-export default ActivityIndicator;

package/lib-module/ActivityIndicator/shared.js

@@ -1,14 +0,0 @@
-import PropTypes from 'prop-types';
-
-// these could be specified by the theme
-export const DURATION = 1800;
-export const MIN_EMPTY_ANGLE = 60;
-export const MIN_STROKE_ANGLE = 30;
-export const BEZIER = [0.42, 0.0, 0.58, 1.0];
-export const propTypes = {
-  color: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  thickness: PropTypes.number.isRequired,
-  isStatic: PropTypes.bool
-};

package/lib-module/Autocomplete/Autocomplete.js

@@ -1,481 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Dimensions from "react-native-web/dist/exports/Dimensions";
-import Platform from "react-native-web/dist/exports/Platform";
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import throttle from 'lodash.throttle';
-import matchAll from 'string.prototype.matchall';
-import { inputSupportsProps, selectSystemProps, textInputProps, textInputHandlerProps, useCopy, htmlAttrs, useOverlaidPosition, useSafeLayoutEffect } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import Listbox from '../Listbox';
-import Typography from '../Typography';
-import { TextInput } from '../TextInput';
-import InputSupports from '../InputSupports';
-import Loading from './Loading';
-import Suggestions from './Suggestions';
-import { DEFAULT_MAX_SUGGESTIONS, DEFAULT_MIN_TO_SUGGESTION, INPUT_LEFT_PADDING, MIN_LISTBOX_WIDTH } from './constants';
-import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const staticStyles = StyleSheet.create({
-  container: {
-    zIndex: 100,
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    flexGrow: 0,
-    flexShrink: 0
-  }
-});
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, inputSupportsProps, textInputHandlerProps, textInputProps]);
-
-// Returns JSX to display a bold string `str` with unbolded occurrences of the
-// `substring` based in the array of `matchIndexes` provided
-const highlightAllMatches = function (str) {
-  let substring = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  let matchIndexes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  let resultsTextColor = arguments.length > 3 ? arguments[3] : undefined;
-  return (
-    /*#__PURE__*/
-    // Wrapping all in bold
-    _jsx(Typography, {
-      variant: {
-        bold: false
-      },
-      tokens: {
-        color: resultsTextColor
-      },
-      children: matchIndexes.reduce((acc, matchIndex, index) => [...acc,
-      // Add a piece of the string up to the first occurrence of the substring
-      index === 0 && (str.slice(0, matchIndex) ?? ''),
-      /*#__PURE__*/
-      // Unbold the occurrence of the substring (while keeping the original casing)
-      _jsx(Typography, {
-        variant: {
-          bold: true
-        },
-        tokens: {
-          color: resultsTextColor
-        },
-        children: str.slice(matchIndex, matchIndex + substring.length)
-      }, matchIndex),
-      // Add the rest of the string until the next occurrence or the end of it
-      str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length)], [])
-    })
-  );
-};
-const highlight = function () {
-  let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  let color = arguments.length > 2 ? arguments[2] : undefined;
-  return items.reduce((acc, item) => {
-    var _Array$from;
-    const matches = (_Array$from = Array.from(matchAll(item.label.toLowerCase(), text.toLowerCase().replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&')))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(_ref => {
-      let {
-        index
-      } = _ref;
-      return index;
-    });
-    if (matches !== null && matches !== void 0 && matches.length) {
-      return [...acc, {
-        ...item,
-        label: highlightAllMatches(item.label, text, matches, color)
-      }];
-    }
-    return [...acc, item];
-  }, []);
-};
-const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  var _ref3;
-  let {
-    children,
-    copy = 'en',
-    fullWidth = true,
-    initialItems,
-    initialValue,
-    isLoading = false,
-    items,
-    maxSuggestions = DEFAULT_MAX_SUGGESTIONS,
-    minToSuggestion = DEFAULT_MIN_TO_SUGGESTION,
-    noResults,
-    onChange,
-    onClear,
-    onSelect,
-    readOnly,
-    validation,
-    value,
-    helpText = '',
-    loadingLabel,
-    ...rest
-  } = _ref2;
-  const {
-    color: resultsTextColor
-  } = useThemeTokens('Search', {}, {
-    focus: true
-  });
-  // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
-  // but we also need to adjust suggestions based on the mode:
-  // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
-  // - in uncontrolled mode we filter the suggestions ourselves based on the `initialItems`
-  //   prop and the text entered
-  const isControlled = value !== undefined;
-
-  // We need to store current items for uncontrolled usage
-  const [currentItems, setCurrentItems] = React.useState(initialItems);
-  const [otherItems, setOtherItems] = React.useState(items);
-
-  // We need to store the current value as well to be able to highlight it
-  const [currentValue, setCurrentValue] = React.useState(value ?? initialValue);
-  const inputTokens = {
-    paddingLeft: INPUT_LEFT_PADDING
-  };
-
-  // Setting up the overlay
-  const openOverlayRef = React.useRef();
-  const [isExpanded, setIsExpanded] = React.useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
-  const [isFocused, setisFocused] = React.useState(false);
-  const [sourceLayout, setSourceLayout] = React.useState(null);
-
-  // When it's nested, selected value
-  const [nestedSelectedValue, setNestedSelectedValue] = React.useState(null);
-  const [isInputVisible, setIsInputVisible] = React.useState(true);
-  const {
-    supportsProps,
-    ...selectedProps
-  } = selectProps(rest);
-  const {
-    hint,
-    label: inputLabel
-  } = supportsProps;
-  const hintExpansionEnabled = isFocused && helpText && !currentValue;
-  const {
-    overlaidPosition,
-    sourceRef: inputRef,
-    // targetRef,
-    onTargetLayout,
-    isReady
-  } = useOverlaidPosition({
-    isShown: isExpanded || hintExpansionEnabled,
-    offsets: {
-      vertical: Platform.OS !== 'web' && (hint || inputLabel) ? 28 : 4
-    }
-  });
-  const targetRef = React.useRef(null);
-  // We limit the number of suggestions displayed to avoid huge lists
-  // TODO: add a way to make the `Listbox` occupy fixed height and be scrollable
-  // within that height, which will unlock similar behaviour for `AutoComplete` as well
-  const itemsToSuggest = function () {
-    let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    return maxSuggestions ? data.slice(0, maxSuggestions) : [...data];
-  };
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  // Tracking input width changes to resize the listbox overlay accordingly
-  const [inputWidth, setInputWidth] = React.useState();
-  useSafeLayoutEffect(() => {
-    if (Platform.OS === 'web') {
-      const updateInputWidth = () => {
-        var _inputRef$current;
-        setInputWidth((inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.clientWidth) + 4); // adding back all the input borders / outlines
-        setIsExpanded(false); // close the suggestions while the input is changing
-      };
-
-      const throttledUpdateInputWidth = throttle(updateInputWidth, 100, {
-        leading: false
-      });
-      throttledUpdateInputWidth();
-      Dimensions.addEventListener('change', throttledUpdateInputWidth);
-      return () => {
-        Dimensions.removeEventListener('change', throttledUpdateInputWidth);
-      };
-    }
-    setInputWidth(sourceLayout === null || sourceLayout === void 0 ? void 0 : sourceLayout.width);
-    return () => {};
-  }, [inputRef, sourceLayout]);
-  const handleMeasure = event => {
-    onTargetLayout(event);
-    if (Platform.OS !== 'web') {
-      var _inputRef$current2;
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.measureInWindow((x, y, width) => {
-        setInputWidth(width);
-      });
-    }
-  };
-  const handleChange = newValue => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(newValue || '');
-    setCurrentValue(newValue);
-    setIsExpanded((newValue === null || newValue === void 0 ? void 0 : newValue.length) >= minToSuggestion);
-    if (!isControlled && initialItems !== undefined) {
-      setCurrentItems(initialItems.filter(_ref4 => {
-        var _label$toLowerCase;
-        let {
-          label
-        } = _ref4;
-        return label === null || label === void 0 ? void 0 : (_label$toLowerCase = label.toLowerCase()) === null || _label$toLowerCase === void 0 ? void 0 : _label$toLowerCase.includes(newValue === null || newValue === void 0 ? void 0 : newValue.toLowerCase());
-      }));
-    }
-  };
-  const handleSelect = selectedId => {
-    var _ref5;
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedId);
-    const {
-      label: newValue,
-      nested,
-      title
-    } = (_ref5 = isControlled ? items : currentItems) === null || _ref5 === void 0 ? void 0 : _ref5.find(_ref6 => {
-      let {
-        id
-      } = _ref6;
-      return id === selectedId;
-    });
-    if (title) return;
-    if (!nested) {
-      setNestedSelectedValue(null);
-      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-      setIsExpanded(false);
-    }
-    setCurrentValue(newValue);
-    if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
-    if (nested) setNestedSelectedValue(newValue);
-    inputRef.current.focus();
-  };
-
-  /**
-   * When an item that is nested equal "true" is selected this useEffect is executed.
-   * The nested item is added to the item list at the top, the if validates it doesn't exist
-   * within the list, if doesn't exist the nested item is added to the top of the list,
-   * the nested item is added with an id equal "0"
-   */
-  React.useEffect(() => {
-    if (nestedSelectedValue && !items.find(item => item.id === 0)) {
-      const tmpItems = [...items];
-      tmpItems.unshift({
-        label: nestedSelectedValue,
-        title: true,
-        id: 0
-      });
-      setOtherItems(tmpItems.map(item => {
-        return {
-          ...item,
-          nestedChild: item.id !== 0
-        };
-      }));
-    }
-  }, [nestedSelectedValue, items]);
-  React.useEffect(() => {
-    if (Platform.OS === 'ios' || Platform.OS === 'android') {
-      return undefined;
-    }
-    const observer = new IntersectionObserver(entries => {
-      const [entry] = entries;
-      setIsInputVisible(entry.isIntersecting);
-      if (!entry.isIntersecting) {
-        setIsExpanded(false);
-      }
-    });
-    const currentInputRef = inputRef.current;
-    if (currentInputRef) {
-      observer.observe(currentInputRef);
-    }
-    return () => {
-      if (currentInputRef) {
-        observer.unobserve(currentInputRef);
-      }
-    };
-  }, [inputRef]);
-  const handleClose = event => {
-    var _openOverlayRef$curre, _openOverlayRef$curre2;
-    if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target)) || event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
-      setIsExpanded(false);
-      setNestedSelectedValue(null);
-    } else if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
-      event.preventDefault();
-      targetRef.current.focus();
-    }
-  };
-  const itemsToShow = currentValue ? itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)) : [];
-  const helpTextToShow = isFocused && !currentValue ? helpText : noResults ?? getCopy('noResults');
-  return /*#__PURE__*/_jsxs(View, {
-    style: staticStyles.container,
-    children: [/*#__PURE__*/_jsx(InputSupports, {
-      ...supportsProps,
-      accessibilityAutoComplete: "list",
-      accessibilityControls: "autocomplete",
-      accessibilityExpanded: isExpanded,
-      accessibilityRole: "combobox",
-      ...selectedProps,
-      validation: validation,
-      ref: ref,
-      children: _ref7 => {
-        let {
-          inputId,
-          ...props
-        } = _ref7;
-        if (typeof children === 'function') return children({
-          inputId,
-          inputRef,
-          onChange: handleChange,
-          onKeyPress: handleClose,
-          readOnly,
-          tokens: inputTokens,
-          ...selectedProps,
-          ...props,
-          ...(isControlled ? {
-            value
-          } : {
-            initialValue
-          })
-        });
-        return /*#__PURE__*/_jsx(TextInput, {
-          onChange: handleChange,
-          onFocus: () => {
-            setisFocused(true);
-          },
-          onBlur: () => {
-            setisFocused(false);
-          },
-          onClear: onClear,
-          onKeyPress: handleClose,
-          readOnly: readOnly,
-          ref: inputRef,
-          ...(Platform.OS !== 'web' ? {
-            onLayout: event => {
-              setSourceLayout(event.nativeEvent.layout);
-              const {
-                y,
-                height
-              } = event.nativeEvent.layout;
-              if (y >= 0 && height > 0) {
-                setIsInputVisible(true);
-              } else {
-                setIsInputVisible(false);
-                setIsExpanded(false);
-              }
-            }
-          } : {}),
-          tokens: inputTokens,
-          validation: validation,
-          ...selectedProps,
-          ...props,
-          ...(isControlled ? {
-            value
-          } : {
-            initialValue
-          })
-        });
-      }
-    }), (isExpanded || hintExpansionEnabled) && isInputVisible && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Listbox.Overlay, {
-        overlaidPosition: overlaidPosition,
-        isReady: isReady,
-        minWidth: fullWidth ? inputWidth : MIN_LISTBOX_WIDTH,
-        maxWidth: inputWidth,
-        onLayout: handleMeasure,
-        ref: openOverlayRef,
-        children: isLoading ? /*#__PURE__*/_jsx(Loading, {
-          label: loadingLabel ?? getCopy('loading')
-        }) : /*#__PURE__*/_jsx(Suggestions, {
-          hasResults: getCopy('hasResults'),
-          id: "autocomplete",
-          items: nestedSelectedValue ? itemsToSuggest(highlight(otherItems, nestedSelectedValue, resultsTextColor)) : itemsToShow,
-          noResults: helpTextToShow,
-          onClose: handleClose,
-          onSelect: handleSelect,
-          parentRef: inputRef,
-          ref: targetRef
-        })
-      }), (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) && /*#__PURE__*/_jsx(View
-      // This catches and shifts focus to other interactive elements.
-      , {
-        onFocus: () => {
-          var _targetRef$current;
-          return targetRef === null || targetRef === void 0 ? void 0 : (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
-        },
-        tabIndex: 0
-      })]
-    })]
-  });
-});
-Autocomplete.displayName = 'Autocomplete';
-
-// If a language dictionary entry is provided, it must contain every key
-const dictionaryContentShape = PropTypes.shape({
-  hasResults: PropTypes.string.isRequired,
-  loading: PropTypes.string.isRequired,
-  noResults: PropTypes.string.isRequired
-});
-Autocomplete.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Can be used to provide a function that renders a custom input:
-   * <Autocomplete items={items} value={currentValue}>
-   *   {({ inputId, inputRef, onChange, onKeyPress, readOnly, tokens, value }) => (
-   *     <Search
-   *       nativeID={inputId}
-   *       ref={inputRef}
-   *       onChange={onChange}
-   *       onKeyPress={onKeyPress}
-   *       readOnly={readOnly}
-   *       tokens={tokens}
-   *       value={value}
-   *     />
-   *   )}
-   * </Autocomplete>
-   */
-  children: PropTypes.func,
-  /**
-   * Copy language identifier
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
-  /**
-   * Set to true in order to display the loading indicator instead of results
-   */
-  isLoading: PropTypes.bool,
-  /**
-   * List of items to display as suggestions
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.string
-  })),
-  /**
-   * Label to display alongside the spinner when in a loading state
-   */
-  loadingLabel: PropTypes.string,
-  /**
-   * Minimum number of characters typed for a list of suggestions to appear
-   */
-  minToSuggestion: PropTypes.number,
-  /**
-   * Maximum number of suggestions provided at the same time
-   */
-  maxSuggestions: PropTypes.number,
-  /**
-   * Text or JSX to render when no results are available
-   */
-  noResults: PropTypes.node,
-  /**
-   * Help text to display when the input is focused and empty
-   */
-  helpText: PropTypes.string,
-  /**
-   * Handler function to be called when the input value changes
-   */
-  onChange: PropTypes.func,
-  /**
-   * Handler function to be called when the clear button (appears if the handler is passed) is pressed
-   */
-  onClear: PropTypes.func,
-  /**
-   * Callback function to be called when an item is selected from the list
-   */
-  onSelect: PropTypes.func,
-  /**
-   * Input value for controlled usage
-   */
-  value: PropTypes.string
-};
-export default Autocomplete;