@telus-uds/components-web 2.18.0 → 2.19.0

package/lib/NavigationBar/NavigationSubMenu.js

@@ -13,8 +13,6 @@ var _componentsBase = require("@telus-uds/components-base");
 
 var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
 
-var _Listbox = _interopRequireDefault(require("../Listbox"));
-
 var _useOverlaidPosition = _interopRequireDefault(require("../utils/useOverlaidPosition"));
 
 var _resolveItemSelection = _interopRequireDefault(require("./resolveItemSelection"));
@@ -131,14 +129,14 @@ const NavigationSubMenu = _ref => {
         }, `${id}_icon`)];
       }
     }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Listbox.Overlay, {
         overlaidPosition: overlaidPosition,
         maxWidth: maxWidth,
         minWidth: minWidth,
         isReady: isReady,
         onLayout: onTargetLayout,
         ref: openOverlayRef,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Listbox, {
           items: items,
           firstItemRef: targetRef,
           parentRef: sourceRef,

package/lib/baseExports.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ActivityIndicator", {
     return _componentsBase.ActivityIndicator;
   }
 });
+Object.defineProperty(exports, "Autocomplete", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Autocomplete;
+  }
+});
 Object.defineProperty(exports, "BaseProvider", {
   enumerable: true,
   get: function () {
@@ -135,6 +141,12 @@ Object.defineProperty(exports, "Link", {
     return _componentsBase.Link;
   }
 });
+Object.defineProperty(exports, "Listbox", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Listbox;
+  }
+});
 Object.defineProperty(exports, "MultiSelectFilter", {
   enumerable: true,
   get: function () {

package/lib/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  Autocomplete: true,
   Badge: true,
   Modal: true,
   OrderedList: true,
@@ -33,7 +32,6 @@ var _exportNames = {
   WebVideo: true,
   WaffleGrid: true,
   Spinner: true,
-  Listbox: true,
   VideoPicker: true,
   Video: true,
   StoryCard: true,
@@ -46,12 +44,6 @@ var _exportNames = {
   SkeletonProvider: true,
   WebPortal: true
 };
-Object.defineProperty(exports, "Autocomplete", {
-  enumerable: true,
-  get: function () {
-    return _Autocomplete.default;
-  }
-});
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
   get: function () {
@@ -130,12 +122,6 @@ Object.defineProperty(exports, "List", {
     return _List.default;
   }
 });
-Object.defineProperty(exports, "Listbox", {
-  enumerable: true,
-  get: function () {
-    return _Listbox.default;
-  }
-});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
@@ -293,8 +279,6 @@ Object.defineProperty(exports, "transformGradient", {
   }
 });
 
-var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
-
 var _Badge = _interopRequireDefault(require("./Badge"));
 
 var _Modal = _interopRequireDefault(require("./Modal"));
@@ -349,8 +333,6 @@ var _WaffleGrid = _interopRequireDefault(require("./WaffleGrid"));
 
 var _Spinner = _interopRequireDefault(require("./Spinner"));
 
-var _Listbox = _interopRequireDefault(require("./Listbox"));
-
 var _VideoPicker = _interopRequireDefault(require("./VideoPicker"));
 
 var _Video = _interopRequireDefault(require("./Video"));

package/lib/utils/useOverlaidPosition.js

@@ -205,9 +205,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/NavigationBar/NavigationSubMenu.js

@@ -1,8 +1,7 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Icon, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base';
+import { Icon, useResponsiveProp, useThemeTokens, Listbox } from '@telus-uds/components-base';
 import NavigationItem from './NavigationItem';
-import Listbox from '../Listbox';
 import useOverlaidPosition from '../utils/useOverlaidPosition';
 import resolveItemSelection from './resolveItemSelection';
 /**

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yText, ActivityIndicator, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

package/lib-module/index.js

@@ -1,4 +1,3 @@
-export { default as Autocomplete } from './Autocomplete';
 export { default as Badge } from './Badge';
 export { default as Modal } from './Modal';
 export { default as OrderedList } from './OrderedList';
@@ -26,7 +25,6 @@ export { default as Image } from './Image';
 export { default as WebVideo } from './WebVideo';
 export { default as WaffleGrid } from './WaffleGrid';
 export { default as Spinner } from './Spinner';
-export { default as Listbox } from './Listbox';
 export { default as VideoPicker } from './VideoPicker';
 export { default as Video } from './Video';
 export { default as StoryCard } from './StoryCard';

package/lib-module/utils/useOverlaidPosition.js

@@ -195,9 +195,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.removeEventListener === 'function') {
+      } else if (typeof Dimensions.remove === 'function') {
         // React Native <0.65.0
-        Dimensions.removeEventListener('change', handleDimensionsChange);
+        Dimensions.remove('change', handleDimensionsChange);
       }
 
       setSourceLayout(null);

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.60.0",
+    "@telus-uds/components-base": "1.61.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.18.0"
+  "version": "2.19.0"
 }

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -1,8 +1,7 @@
 import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
-import { Icon, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base'
+import { Icon, useResponsiveProp, useThemeTokens, Listbox } from '@telus-uds/components-base'
 import NavigationItem from './NavigationItem'
-import Listbox from '../Listbox'
 import useOverlaidPosition from '../utils/useOverlaidPosition'
 import resolveItemSelection from './resolveItemSelection'
 

package/src/baseExports.js

@@ -7,6 +7,7 @@ export {
    */
   A11yText,
   ActivityIndicator,
+  Autocomplete,
   Box,
   Button,
   BaseProvider,
@@ -29,6 +30,7 @@ export {
   InputLabel,
   InputSupports,
   Link,
+  Listbox,
   MultiSelectFilter,
   Notification,
   Pagination,

package/src/index.js

@@ -1,4 +1,3 @@
-export { default as Autocomplete } from './Autocomplete'
 export { default as Badge } from './Badge'
 export { default as Modal } from './Modal'
 export { default as OrderedList } from './OrderedList'
@@ -26,7 +25,6 @@ export { default as Image } from './Image'
 export { default as WebVideo } from './WebVideo'
 export { default as WaffleGrid } from './WaffleGrid'
 export { default as Spinner } from './Spinner'
-export { default as Listbox } from './Listbox'
 export { default as VideoPicker } from './VideoPicker'
 export { default as Video } from './Video'
 export { default as StoryCard } from './StoryCard'

package/src/utils/useOverlaidPosition.js

@@ -184,9 +184,9 @@ const useOverlaidPosition = ({
       if (typeof subscription?.remove === 'function') {
         // React Native >=0.65.0
         subscription.remove()
-      } else if (typeof Dimensions.removeEventListener === 'function') {
+      } else if (typeof Dimensions.remove === 'function') {
         // React Native <0.65.0
-        Dimensions.removeEventListener('change', handleDimensionsChange)
+        Dimensions.remove('change', handleDimensionsChange)
       }
       setSourceLayout(null)
       setTargetDimensions(null)

package/lib/Autocomplete/Autocomplete.js

@@ -1,430 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _lodash = require("lodash");
-
-var _componentsBase = require("@telus-uds/components-base");
-
-var _Listbox = _interopRequireDefault(require("../Listbox"));
-
-var _utils = require("../utils");
-
-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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/* eslint-disable react/require-default-props */
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs, _componentsBase.inputSupportsProps, _componentsBase.textInputHandlerProps, _componentsBase.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)(_componentsBase.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)
-      (0, _jsxRuntime.jsx)(_componentsBase.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(item.label.toLowerCase().matchAll(text.toLowerCase()))) === 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__*/(0, _react.forwardRef)((_ref2, ref) => {
-  var _ref3;
-
-  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,
-    ...rest
-  } = _ref2;
-  const {
-    color: resultsTextColor
-  } = (0, _componentsBase.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] = (0, _react.useState)(initialItems); // We need to store the current value as well to be able to highlight it
-
-  const [currentValue, setCurrentValue] = (0, _react.useState)(value ?? initialValue);
-  const inputTokens = {
-    paddingLeft: _constants.INPUT_LEFT_PADDING
-  }; // Setting up the overlay
-
-  const openOverlayRef = (0, _react.useRef)();
-  const [isExpanded, setIsExpanded] = (0, _react.useState)(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
-  const {
-    overlaidPosition,
-    sourceRef: inputRef,
-    targetRef,
-    onTargetLayout,
-    isReady
-  } = (0, _utils.useOverlaidPosition)({
-    isShown: isExpanded,
-    offsets: {
-      vertical: 4
-    }
-  }); // 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, _componentsBase.useCopy)({
-    dictionary: _dictionary.default,
-    copy
-  }); // Tracking input width changes to resize the listbox overlay accordingly
-
-  const [inputWidth, setInputWidth] = (0, _react.useState)();
-  (0, _componentsBase.useSafeLayoutEffect)(() => {
-    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 = (0, _lodash.throttle)(updateInputWidth, 100, {
-      leading: false
-    });
-    updateInputWidth();
-    window.addEventListener('load', updateInputWidth);
-    window.addEventListener('resize', throttledUpdateInputWidth);
-    return () => {
-      window.removeEventListener('load', updateInputWidth);
-      window.removeEventListener('resize', throttledUpdateInputWidth);
-    };
-  }, [inputRef]);
-
-  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
-    } = (_ref5 = isControlled ? items : currentItems) === null || _ref5 === void 0 ? void 0 : _ref5.find(_ref6 => {
-      let {
-        id
-      } = _ref6;
-      return id === selectedId;
-    });
-    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    setCurrentValue(newValue);
-    if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
-    setIsExpanded(false);
-  };
-
-  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);
-    }
-  };
-
-  const {
-    supportsProps,
-    ...selectedProps
-  } = selectProps(rest);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.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__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
-          onChange: handleChange,
-          onClear: onClear,
-          onKeyPress: handleClose,
-          readOnly: readOnly,
-          ref: inputRef,
-          tokens: inputTokens,
-          validation: validation,
-          ...selectedProps,
-          ...props,
-          ...(isControlled ? {
-            value
-          } : {
-            initialValue
-          })
-        });
-      }
-    }), isExpanded && /*#__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: onTargetLayout,
-        ref: openOverlayRef,
-        children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {
-          label: getCopy('loading')
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Suggestions.default, {
-          hasResults: getCopy('hasResults'),
-          id: "autocomplete",
-          items: itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)),
-          noResults: noResults ?? getCopy('noResults'),
-          onClose: handleClose,
-          onSelect: handleSelect,
-          parentRef: inputRef,
-          ref: targetRef
-        })
-      }), (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        // 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();
-        } // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        ,
-        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,
-
-  /**
-   * 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,
-
-  /**
-   * 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,
-
-  /**
-   * Can be used to set the initial items of the component
-   */
-  initialItems: _propTypes.default.arrayOf(_propTypes.default.shape({
-    id: _propTypes.default.string,
-    label: _propTypes.default.string
-  })),
-
-  /**
-   * Initial value for the component
-   */
-  initialValue: _propTypes.default.string,
-
-  /**
-   * Boolean to set if it's readonly or not
-   */
-  readOnly: _propTypes.default.bool,
-
-  /**
-   * Use to visually mark an input as valid or invalid.
-   */
-  validation: _propTypes.default.oneOf(['error', 'success'])
-};
-var _default = Autocomplete;
-exports.default = _default;