@telus-uds/components-base 2.5.0 → 3.1.0

package/lib/cjs/ActivityIndicator/Spinner.native.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _shared = require("./shared");
+var _A11yInfoProvider = require("../A11yInfoProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ea = _shared.MIN_EMPTY_ANGLE / 2;
+const sa = _shared.MIN_STROKE_ANGLE / 2;
+const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    size,
+    color,
+    thickness,
+    label,
+    isStatic = false
+  } = _ref;
+  const {
+    current: timer
+  } = _react.default.useRef(new _Animated.default.Value(0));
+  const {
+    reduceMotionEnabled
+  } = (0, _A11yInfoProvider.useA11yInfo)();
+  const reduceMotion = reduceMotionEnabled || isStatic;
+  _react.default.useLayoutEffect(() => {
+    const loop = _Animated.default.timing(timer, {
+      duration: _shared.DURATION,
+      easing: _Easing.default.linear,
+      // Animated.loop does not work if useNativeDriver is true on web
+      useNativeDriver: true,
+      toValue: 1,
+      isInteraction: false
+    });
+    if (!reduceMotion) _Animated.default.loop(loop).start();else loop.stop();
+  }, [timer, reduceMotion]);
+  const frames = 60 * _shared.DURATION / 1000;
+  const easing = _Easing.default.bezier(..._shared.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__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: [styles.container],
+    accessible: true,
+    accessibilityLabel: label,
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.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__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+          style: [styles.layer],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+            style: layerStyle,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+              style: [containerStyle, offsetStyle],
+              collapsable: false,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+                style: viewportStyle,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+                  style: containerStyle,
+                  collapsable: false,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+                    style: lineStyle
+                  })
+                })
+              })
+            })
+          })
+        }, index);
+      })
+    })
+  });
+});
+Spinner.displayName = 'Spinner';
+Spinner.propTypes = _shared.propTypes;
+const styles = _StyleSheet.default.create({
+  container: {
+    flexGrow: 0,
+    flexShrink: 0
+  },
+  layer: {
+    ..._StyleSheet.default.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+var _default = exports.default = Spinner;

package/lib/cjs/ActivityIndicator/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _props = require("../utils/props");
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * `ActivityIndicator` renders a visual loading state.
+ * It does not handle positioning or layout of that visual loader.
+ */const ActivityIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    variant,
+    tokens,
+    label,
+    isStatic = false
+  } = _ref;
+  const {
+    size,
+    color,
+    thickness
+  } = (0, _ThemeProvider.useThemeTokens)('ActivityIndicator', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+    ref: ref,
+    size: size,
+    color: color,
+    thickness: thickness,
+    label: label,
+    isStatic: isStatic
+  });
+});
+ActivityIndicator.displayName = 'ActivityIndicator';
+ActivityIndicator.propTypes = {
+  variant: _props.variantProp.propType,
+  tokens: (0, _props.getTokensPropType)('ActivityIndicator'),
+  /**
+   * A visually hidden accessible label describing the action taking place
+   */
+  label: _propTypes.default.string.isRequired,
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: _propTypes.default.bool
+};
+var _default = exports.default = ActivityIndicator;

package/lib/cjs/ActivityIndicator/shared.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.MIN_STROKE_ANGLE = exports.MIN_EMPTY_ANGLE = exports.DURATION = exports.BEZIER = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// these could be specified by the theme
+const DURATION = exports.DURATION = 1800;
+const MIN_EMPTY_ANGLE = exports.MIN_EMPTY_ANGLE = 60;
+const MIN_STROKE_ANGLE = exports.MIN_STROKE_ANGLE = 30;
+const BEZIER = exports.BEZIER = [0.42, 0.0, 0.58, 1.0];
+const propTypes = exports.propTypes = {
+  color: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  size: _propTypes.default.number.isRequired,
+  thickness: _propTypes.default.number.isRequired,
+  isStatic: _propTypes.default.bool
+};

package/lib/cjs/Autocomplete/Autocomplete.js

@@ -0,0 +1,480 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _stringPrototype = _interopRequireDefault(require("string.prototype.matchall"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _Listbox = _interopRequireDefault(require("../Listbox"));
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _TextInput = require("../TextInput");
+var _InputSupports = _interopRequireDefault(require("../InputSupports"));
+var _Loading = _interopRequireDefault(require("./Loading"));
+var _Suggestions = _interopRequireDefault(require("./Suggestions"));
+var _constants = require("./constants");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    zIndex: 100,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    flexGrow: 0,
+    flexShrink: 0
+  }
+});
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.inputSupportsProps, _utils.textInputHandlerProps, _utils.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
+    (0, _jsxRuntime.jsx)(_Typography.default, {
+      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)
+      (0, _jsxRuntime.jsx)(_Typography.default, {
+        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) => {
+    const matches = Array.from((0, _stringPrototype.default)(item.label.toLowerCase(), text.toLowerCase().replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&')))?.map(_ref => {
+      let {
+        index
+      } = _ref;
+      return index;
+    });
+    if (matches?.length) {
+      return [...acc, {
+        ...item,
+        label: highlightAllMatches(item.label, text, matches, color)
+      }];
+    }
+    return [...acc, item];
+  }, []);
+};
+const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    copy = 'en',
+    fullWidth = true,
+    initialItems,
+    initialValue,
+    isLoading = false,
+    items,
+    maxSuggestions = _constants.DEFAULT_MAX_SUGGESTIONS,
+    minToSuggestion = _constants.DEFAULT_MIN_TO_SUGGESTION,
+    noResults,
+    onChange,
+    onClear,
+    onSelect,
+    readOnly,
+    validation,
+    value,
+    helpText = '',
+    loadingLabel,
+    tokens,
+    ...rest
+  } = _ref2;
+  const {
+    color: resultsTextColor,
+    ...restOfTokens
+  } = (0, _ThemeProvider.useThemeTokens)('Autocomplete', tokens, {
+    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.default.useState(initialItems);
+  const [otherItems, setOtherItems] = _react.default.useState(items);
+
+  // We need to store the current value as well to be able to highlight it
+  const [currentValue, setCurrentValue] = _react.default.useState(value ?? initialValue);
+  const inputTokens = {
+    paddingLeft: _constants.INPUT_LEFT_PADDING
+  };
+
+  // Setting up the overlay
+  const openOverlayRef = _react.default.useRef();
+  const [isExpanded, setIsExpanded] = _react.default.useState((value ?? initialValue)?.length >= minToSuggestion);
+  const [isFocused, setisFocused] = _react.default.useState(false);
+  const [sourceLayout, setSourceLayout] = _react.default.useState(null);
+
+  // When it's nested, selected value
+  const [nestedSelectedValue, setNestedSelectedValue] = _react.default.useState(null);
+  const [isInputVisible, setIsInputVisible] = _react.default.useState(true);
+  const {
+    supportsProps,
+    ...selectedProps
+  } = selectProps(rest);
+  const {
+    hint,
+    label: inputLabel
+  } = supportsProps;
+  const hintExpansionEnabled = isFocused && helpText && !currentValue;
+  const {
+    overlaidPosition,
+    sourceRef: inputRef,
+    // targetRef,
+    onTargetLayout,
+    isReady
+  } = (0, _utils.useOverlaidPosition)({
+    isShown: isExpanded || hintExpansionEnabled,
+    offsets: {
+      vertical: _Platform.default.OS !== 'web' && (hint || inputLabel) ? 28 : 4
+    }
+  });
+  const targetRef = _react.default.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 = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  // Tracking input width changes to resize the listbox overlay accordingly
+  const [inputWidth, setInputWidth] = _react.default.useState();
+  (0, _utils.useSafeLayoutEffect)(() => {
+    if (_Platform.default.OS === 'web') {
+      const updateInputWidth = () => {
+        setInputWidth(inputRef?.current?.clientWidth + 4); // adding back all the input borders / outlines
+        setIsExpanded(false); // close the suggestions while the input is changing
+      };
+      const throttledUpdateInputWidth = (0, _lodash.default)(updateInputWidth, 100, {
+        leading: false
+      });
+      throttledUpdateInputWidth();
+      _Dimensions.default.addEventListener('change', throttledUpdateInputWidth);
+      return () => {
+        _Dimensions.default.removeEventListener('change', throttledUpdateInputWidth);
+      };
+    }
+    setInputWidth(sourceLayout?.width);
+    return () => {};
+  }, [inputRef, sourceLayout]);
+  const handleMeasure = event => {
+    onTargetLayout(event);
+    if (_Platform.default.OS !== 'web') {
+      inputRef?.current?.measureInWindow((x, y, width) => {
+        setInputWidth(width);
+      });
+    }
+  };
+  const handleChange = newValue => {
+    onChange?.(newValue || '');
+    setCurrentValue(newValue);
+    setIsExpanded(newValue?.length >= minToSuggestion);
+    if (!isControlled && initialItems !== undefined) {
+      setCurrentItems(initialItems.filter(_ref3 => {
+        let {
+          label
+        } = _ref3;
+        return label?.toLowerCase()?.includes(newValue?.toLowerCase());
+      }));
+    }
+  };
+  const handleSelect = selectedId => {
+    onSelect?.(selectedId);
+    const {
+      label: newValue,
+      nested,
+      title
+    } = (isControlled ? items : currentItems)?.find(_ref4 => {
+      let {
+        id
+      } = _ref4;
+      return id === selectedId;
+    });
+    if (title) return;
+    if (!nested) {
+      setNestedSelectedValue(null);
+      onChange?.(newValue);
+      setIsExpanded(false);
+    }
+    setCurrentValue(newValue);
+    if (!isControlled && 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.default.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.default.useEffect(() => {
+    if (_Platform.default.OS === 'ios' || _Platform.default.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 => {
+    if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !openOverlayRef?.current?.contains(event.target) || event.type === 'touchstart' && openOverlayRef?.current && event.touches[0].target && !openOverlayRef?.current?.contains(event.touches[0].target)) {
+      setIsExpanded(false);
+      setNestedSelectedValue(null);
+    } else if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && 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__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: staticStyles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+      ...supportsProps,
+      accessibilityAutoComplete: "list",
+      accessibilityControls: "autocomplete",
+      accessibilityExpanded: isExpanded,
+      accessibilityRole: "combobox",
+      ...selectedProps,
+      validation: validation,
+      ref: ref,
+      children: _ref5 => {
+        let {
+          inputId,
+          ...props
+        } = _ref5;
+        if (typeof children === 'function') return children({
+          inputId,
+          inputRef,
+          onChange: handleChange,
+          onKeyPress: handleClose,
+          readOnly,
+          tokens: inputTokens,
+          ...selectedProps,
+          ...props,
+          ...(isControlled ? {
+            value
+          } : {
+            initialValue
+          })
+        });
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, {
+          onChange: handleChange,
+          onFocus: () => {
+            setisFocused(true);
+          },
+          onBlur: () => {
+            setisFocused(false);
+          },
+          onClear: onClear,
+          onKeyPress: handleClose,
+          readOnly: readOnly,
+          ref: inputRef,
+          ...(_Platform.default.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
+        overlaidPosition: overlaidPosition,
+        isReady: isReady,
+        minWidth: fullWidth ? inputWidth : _constants.MIN_LISTBOX_WIDTH,
+        maxWidth: inputWidth,
+        onLayout: handleMeasure,
+        tokens: restOfTokens,
+        ref: openOverlayRef,
+        children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {
+          label: loadingLabel ?? getCopy('loading')
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Suggestions.default, {
+          hasResults: getCopy('hasResults'),
+          id: "autocomplete",
+          items: nestedSelectedValue ? itemsToSuggest(highlight(otherItems, nestedSelectedValue, resultsTextColor)) : itemsToShow,
+          noResults: helpTextToShow,
+          onClose: handleClose,
+          onSelect: handleSelect,
+          parentRef: inputRef,
+          ref: targetRef
+        })
+      }), targetRef?.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default
+      // This catches and shifts focus to other interactive elements.
+      , {
+        onFocus: () => targetRef?.current?.focus(),
+        tabIndex: 0
+      })]
+    })]
+  });
+});
+Autocomplete.displayName = 'Autocomplete';
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = _propTypes.default.shape({
+  hasResults: _propTypes.default.string.isRequired,
+  loading: _propTypes.default.string.isRequired,
+  noResults: _propTypes.default.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.default.func,
+  tokens: (0, _utils.getTokensPropType)('Autocomplete'),
+  /**
+   * Copy language identifier
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), dictionaryContentShape]),
+  /**
+   * Set to true in order to display the loading indicator instead of results
+   */
+  isLoading: _propTypes.default.bool,
+  /**
+   * List of items to display as suggestions
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    label: _propTypes.default.string
+  })),
+  /**
+   * Label to display alongside the spinner when in a loading state
+   */
+  loadingLabel: _propTypes.default.string,
+  /**
+   * Minimum number of characters typed for a list of suggestions to appear
+   */
+  minToSuggestion: _propTypes.default.number,
+  /**
+   * Maximum number of suggestions provided at the same time
+   */
+  maxSuggestions: _propTypes.default.number,
+  /**
+   * Text or JSX to render when no results are available
+   */
+  noResults: _propTypes.default.node,
+  /**
+   * Help text to display when the input is focused and empty
+   */
+  helpText: _propTypes.default.string,
+  /**
+   * Handler function to be called when the input value changes
+   */
+  onChange: _propTypes.default.func,
+  /**
+   * Handler function to be called when the clear button (appears if the handler is passed) is pressed
+   */
+  onClear: _propTypes.default.func,
+  /**
+   * Callback function to be called when an item is selected from the list
+   */
+  onSelect: _propTypes.default.func,
+  /**
+   * Input value for controlled usage
+   */
+  value: _propTypes.default.string
+};
+var _default = exports.default = Autocomplete;