@telus-uds/components-base 1.60.0 → 1.61.0

package/lib/Listbox/index.js

@@ -3,30 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  PressableItem: true
-};
-Object.defineProperty(exports, "PressableItem", {
-  enumerable: true,
-  get: function () {
-    return _PressableItem.default;
-  }
-});
-
-var _ListboxContext = require("./ListboxContext");
+exports.default = void 0;
 
-Object.keys(_ListboxContext).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ListboxContext[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ListboxContext[key];
-    }
-  });
-});
+var _Listbox = _interopRequireDefault(require("./Listbox"));
 
-var _PressableItem = _interopRequireDefault(require("./PressableItem"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _Listbox.default;
+exports.default = _default;

package/lib/TextInput/TextInputBase.js

@@ -375,6 +375,8 @@ exports.default = _default;
 const staticStyles = _StyleSheet.default.create({
   buttonsContainer: {
     position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
     right: 0,
     top: 0,
     bottom: 0,

package/lib/index.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   A11yText: true,
   ActivityIndicator: true,
+  Autocomplete: true,
   Box: true,
   Card: true,
   PressableCardBase: true,
+  Listbox: true,
   Checkbox: true,
   Divider: true,
   ExpandCollapse: true,
@@ -91,6 +93,12 @@ Object.defineProperty(exports, "ActivityIndicator", {
     return _ActivityIndicator.default;
   }
 });
+Object.defineProperty(exports, "Autocomplete", {
+  enumerable: true,
+  get: function () {
+    return _Autocomplete.default;
+  }
+});
 Object.defineProperty(exports, "BaseProvider", {
   enumerable: true,
   get: function () {
@@ -193,6 +201,12 @@ Object.defineProperty(exports, "ListItem", {
     return _List.ListItem;
   }
 });
+Object.defineProperty(exports, "Listbox", {
+  enumerable: true,
+  get: function () {
+    return _Listbox.default;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
@@ -444,6 +458,8 @@ var _A11yText = _interopRequireDefault(require("./A11yText"));
 
 var _ActivityIndicator = _interopRequireDefault(require("./ActivityIndicator"));
 
+var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
+
 var _Box = _interopRequireDefault(require("./Box"));
 
 var _Button = require("./Button");
@@ -476,19 +492,7 @@ Object.keys(_Carousel).forEach(function (key) {
   });
 });
 
-var _Listbox = require("./Listbox");
-
-Object.keys(_Listbox).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Listbox[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Listbox[key];
-    }
-  });
-});
+var _Listbox = _interopRequireDefault(require("./Listbox"));
 
 var _Checkbox = _interopRequireWildcard(require("./Checkbox"));
 

package/lib/utils/useOverlaidPosition.js

@@ -9,6 +9,8 @@ var _react = require("react");
 
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
@@ -182,8 +184,8 @@ const useOverlaidPosition = _ref3 => {
       let {
         window
       } = _ref5;
-      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current.measureInWindow((x, y, width, height) => {
-        // Could add a debouncer here if there's too many rerenders during gradual resizes
+      const measurementFunction = _Platform.default.OS === 'web' ? 'measureInWindow' : 'measure';
+      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current[measurementFunction]((x, y, width, height) => {
         setWindowDimensions(window);
         setSourceLayout({
           x,
@@ -202,9 +204,9 @@ const useOverlaidPosition = _ref3 => {
       if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
         // React Native >=0.65.0
         subscription.remove();
-      } else if (typeof _Dimensions.default.removeEventListener === 'function') {
+      } else if (typeof _Dimensions.default.remove === 'function') {
         // React Native <0.65.0
-        _Dimensions.default.removeEventListener('change', handleDimensionsChange);
+        _Dimensions.default.remove('change', handleDimensionsChange);
       }
 
       setSourceLayout(null);

package/lib-module/Autocomplete/Autocomplete.js

@@ -0,0 +1,448 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef, useRef, useState } 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__*/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 = '',
+    ...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] = useState(initialItems); // We need to store the current value as well to be able to highlight it
+
+  const [currentValue, setCurrentValue] = useState(value ?? initialValue);
+  const inputTokens = {
+    paddingLeft: INPUT_LEFT_PADDING
+  }; // Setting up the overlay
+
+  const openOverlayRef = useRef();
+  const [isExpanded, setIsExpanded] = useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
+  const [isFocused, setisFocused] = useState(false);
+  const [sourceLayout, setSourceLayout] = useState(null);
+  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 = 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] = 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
+      });
+      updateInputWidth();
+      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
+    } = (_ref5 = isControlled ? items : currentItems) === null || _ref5 === void 0 ? void 0 : _ref5.find(_ref6 => {
+      let {
+        id
+      } = _ref6;
+      return id === selectedId;
+    });
+
+    if (!nested) {
+      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;
+  };
+
+  const handleClose = event => {
+    var _openOverlayRef$curre, _openOverlayRef$curre2;
+
+    if (event.type === 'keydown') {
+      if (event.key === 'Escape' || event.key === 27) {
+        setIsExpanded(false);
+      } else if (event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
+        targetRef.current.focus();
+      }
+    } else if (event.type === 'click' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target))) {
+      setIsExpanded(false);
+    } else if (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);
+    } else if (Platform.OS === 'web') {
+      // needed for dropdown to be collapsed when clicking outside on web
+      setIsExpanded(false);
+    }
+  };
+
+  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)
+          } : {}),
+          tokens: inputTokens,
+          validation: validation,
+          ...selectedProps,
+          ...props,
+          ...(isControlled ? {
+            value
+          } : {
+            initialValue
+          })
+        });
+      }
+    }), (isExpanded || hintExpansionEnabled) && /*#__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: getCopy('loading')
+        }) : /*#__PURE__*/_jsx(Suggestions, {
+          hasResults: getCopy('hasResults'),
+          id: "autocomplete",
+          items: 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;

package/lib-module/Autocomplete/Loading.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ActivityIndicator from '../ActivityIndicator';
+import Typography from '../Typography';
+import Box from '../Box';
+import StackView from '../StackView';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Loading = _ref => {
+  let {
+    label
+  } = _ref;
+  return /*#__PURE__*/_jsx(Box, {
+    space: 3,
+    children: /*#__PURE__*/_jsxs(StackView, {
+      direction: "row",
+      space: 2,
+      tokens: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+        variant: {
+          size: 'large'
+        }
+      }), /*#__PURE__*/_jsx(Typography, {
+        children: label
+      })]
+    })
+  });
+};
+
+Loading.propTypes = {
+  label: PropTypes.string
+};
+export default Loading;

package/lib-module/Autocomplete/Suggestions.js

@@ -0,0 +1,66 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import A11yText from '../A11yText';
+import Typography from '../Typography';
+import Box from '../Box';
+import Listbox from '../Listbox';
+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 Suggestions = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    hasResults,
+    items = [],
+    noResults,
+    onClose,
+    onSelect,
+    parentRef
+  } = _ref;
+  const pressableItems = items.map(_ref2 => {
+    let {
+      id,
+      ...rest
+    } = _ref2;
+    return {
+      id,
+      onPress: () => onSelect(id),
+      ...rest
+    };
+  });
+  if (items !== null && items !== void 0 && items.length) return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(A11yText, {
+      accessibilityLiveRegion: "polite",
+      text: hasResults
+    }), /*#__PURE__*/_jsx(Listbox, {
+      items: pressableItems,
+      firstItemRef: ref,
+      parentRef: parentRef,
+      onClose: onClose
+    })]
+  });
+  return /*#__PURE__*/_jsx(Box, {
+    space: 3,
+    children: typeof noResults === 'string' ? /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx(Typography, {
+        accessibilityLiveRegion: "polite",
+        variant: {
+          size: 'small'
+        },
+        children: noResults
+      })
+    }) : noResults
+  });
+});
+Suggestions.displayName = 'Suggestions';
+Suggestions.propTypes = {
+  hasResults: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.node
+  })).isRequired,
+  noResults: PropTypes.node.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  parentRef: PropTypes.object.isRequired
+};
+export default Suggestions;