@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/SearchInput/SearchInput.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';
 import Icon, { registerIcon } from '../Icon';
 import * as searchIcon from '../Icon/icons/search.icon';
-import { useConsolidatedRef, useEscape, useI18n, useOuterEvent } from '../../hooks';
+import { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useLiveLog, useUID } from '../../hooks';
 import Flex from '../Flex';
 import Popover from '../Popover';
 import { sameWidth } from '../Popover/modifiers';
@@ -10,24 +10,32 @@ import Menu from '../Menu';
 import Link from '../Link';
 import Text from '../Text';
 import { createStringMatcher } from '../../utils';
-import { StyledCancelButton, StyledFiltersPopover, StyledResultsPopover, StyledSearchButton, StyledSearchFilterText, StyledSearchInput, StyledSearchMenu, StyledSearchResultsContainer, StyledSearchTextInput } from './SearchInput.styles';
+import VisuallyHiddenText from '../VisuallyHiddenText';
+import { StyledCancelButton, StyledResultsPopover, StyledSearchButton, StyledSearchFilterText, StyledSearchInput, StyledSearchMenu, StyledSearchResultsContainer, StyledSearchTextInput, StyledMenuButton } from './SearchInput.styles';
 registerIcon(searchIcon);
 const SearchInput = forwardRef((props, ref) => {
     const t = useI18n();
-    const { value = '', defaultFilter, filters, onFilterChange, searchResults, recentSearches, loading, advancedSearchLink, placeholder = t('search_placeholder_default'), onSearchChange, onSearchSubmit, searchInputAriaLabel, resultsPopover = true, ...restProps } = props;
+    const { value = '', defaultFilter, filters, onFilterChange, searchResults, recentSearches, loading: loadingProp, advancedSearchLink, placeholder = t('search_placeholder_default'), onSearchChange, onSearchSubmit, searchInputAriaLabel, resultsPopover = true, ...restProps } = props;
+    const instructionTextId = useUID();
+    const { announcePolite } = useLiveLog();
     const inputRef = useConsolidatedRef(ref);
     const filterButtonRef = useRef(null);
     const filtersRef = useRef(null);
     const searchResultsRef = useRef(null);
     const [searchMenuOpen, setSearchMenuOpen] = useState(false);
     const [filterMenuOpen, setFilterMenuOpen] = useState(false);
+    const [searchResultItems, setSearchResultItems] = useState(undefined);
     const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? '');
+    const [downPressed, setDownPressed] = useState(false);
     const completeFilters = [t('all'), ...(filters ?? [])];
     const hasFilters = completeFilters.length > 1;
-    const [downPressed, setDownPressed] = useState(false);
     const hasSearchResults = !!(searchResults && searchResults.length);
     const hasRecentSearches = !!(recentSearches && recentSearches.length);
-    const [searchResultItems, setSearchResultItems] = useState(undefined);
+    const showSearchMenu = (value || recentSearches?.length) && (searchResultItems || loadingProp);
+    const useRecents = hasRecentSearches && !value;
+    const loading = useRecents ? false : !!loadingProp;
+    const [selectedFilterValue, setSelectedFilterValue] = useState('All');
+    const searchMenuVisible = (resultsPopover && showSearchMenu && searchMenuOpen) || (!resultsPopover && showSearchMenu);
     useEscape(e => {
         e.preventDefault();
         if (searchMenuOpen) {
@@ -38,13 +46,13 @@ const SearchInput = forwardRef((props, ref) => {
         }
     });
     const onKeyDown = useCallback((e) => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && !downPressed) {
             onSearchSubmit?.(value);
         }
         if (e.key === 'ArrowDown') {
             setDownPressed(true);
         }
-    }, [onSearchSubmit, value]);
+    }, [onSearchSubmit, downPressed, value]);
     useOuterEvent('click', [filterButtonRef], () => {
         setFilterMenuOpen(false);
     });
@@ -59,7 +67,7 @@ const SearchInput = forwardRef((props, ref) => {
         if (hasSearchResults && value) {
             items = searchResults;
         }
-        else if (hasRecentSearches && !value) {
+        else if (useRecents) {
             items = recentSearches;
         }
         else if (!searchResults && (!recentSearches || recentSearches.length === 0)) {
@@ -67,28 +75,43 @@ const SearchInput = forwardRef((props, ref) => {
         }
         setSearchResultItems(items);
     }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);
-    const searchMenu = (_jsx(Menu, { as: StyledSearchMenu, header: recentSearches && !value ? (_jsx(Text, { variant: 'secondary', children: t('recent_searches') })) : undefined, mode: 'action', items: searchResultItems ?? [], loading: hasRecentSearches && !value ? false : loading, footer: advancedSearchLink ? (_jsx(Link, { ...advancedSearchLink, children: t('advanced_search') })) : undefined, accent: hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined, focusControlEl: (downPressed && inputRef.current) || undefined, focusElOnClose: true }));
-    const showSearchMenu = (value || recentSearches?.length) && (searchResultItems || loading);
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: true, as: StyledSearchInput, hasFilters: hasFilters, children: [_jsxs(Flex, { as: StyledSearchButton, ref: filterButtonRef, forwardedAs: hasFilters ? undefined : 'div', container: {
+    // Announce results
+    useEffect(() => {
+        if (!searchMenuVisible || loading)
+            return;
+        const timeout = setTimeout(() => {
+            announcePolite({
+                message: t(useRecents ? 'recent_results_count' : 'results_count', [searchResultItems?.length ?? 0], {
+                    count: searchResultItems?.length ?? 0
+                }),
+                type: 'status'
+            });
+        }, 1000);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [loading, searchMenuVisible, searchResultItems]);
+    const searchMenu = (_jsx(Menu, { as: StyledSearchMenu, header: recentSearches && !value ? (_jsx(Text, { variant: 'secondary', children: t('recent_searches') })) : undefined, mode: 'action', items: searchResultItems ?? [], loading: loading, footer: advancedSearchLink ? (_jsx(Link, { ...advancedSearchLink, children: t('advanced_search') })) : undefined, accent: hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined, focusControlEl: (downPressed && inputRef.current) || undefined, "aria-label": searchInputAriaLabel || t('search') }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: true, as: StyledSearchInput, hasFilters: hasFilters, children: [hasFilters ? (_jsx(StyledMenuButton, { text: selectedFilterValue, variant: 'text', icon: 'search', "aria-label": selectedFilterValue === 'All'
+                            ? t('select_search_filter')
+                            : t('selected_search_filter', [selectedFilterValue]), menu: {
+                            mode: 'single-select',
+                            items: completeFilters.map(filter => ({
+                                primary: filter,
+                                id: filter,
+                                selected: filter === t('all') ? selectedFilter === '' : selectedFilter === filter,
+                                onClick: () => {
+                                    setSelectedFilterValue(filter);
+                                    setSelectedFilter(filter === t('all') ? '' : filter);
+                                    onFilterChange?.(filter);
+                                    inputRef.current?.focus();
+                                }
+                            }))
+                        } })) : (_jsxs(Flex, { as: StyledSearchButton, ref: filterButtonRef, forwardedAs: hasFilters ? undefined : 'div', container: {
                             justify: 'center',
                             alignItems: 'center',
                             gap: selectedFilter ? 0.5 : undefined
-                        }, onClick: (e) => {
-                            e.preventDefault();
-                            if (hasFilters) {
-                                setFilterMenuOpen(true);
-                            }
-                            else {
-                                inputRef.current?.focus();
-                            }
-                        }, onBlur: () => {
-                            setFilterMenuOpen(false);
-                            setSearchMenuOpen(false);
-                        }, onKeyDown: (e) => {
-                            if (e.key === 'ArrowDown') {
-                                setFilterMenuOpen(true);
-                            }
-                        }, decoupled: hasFilters, "aria-label": hasFilters ? t('select_search_filter') : undefined, children: [_jsx(Icon, { name: 'search' }), selectedFilter && _jsx(StyledSearchFilterText, { children: selectedFilter }), hasFilters && _jsx(Icon, { name: 'arrow-micro-down' })] }), _jsx(StyledSearchTextInput, { ref: inputRef, type: 'search', "aria-label": searchInputAriaLabel, placeholder: placeholder, ...restProps, value: value, onChange: (e) => {
+                        }, decoupled: hasFilters, "aria-label": hasFilters ? t('select_search_filter') : undefined, children: [_jsx(Icon, { name: 'search' }), selectedFilter && _jsx(StyledSearchFilterText, { children: selectedFilter }), hasFilters && _jsx(Icon, { name: 'arrow-micro-down' })] })), _jsx(StyledSearchTextInput, { ref: inputRef, type: 'search', "aria-label": searchInputAriaLabel, placeholder: placeholder, ...restProps, "aria-describedby": searchMenuVisible ? instructionTextId : undefined, value: value, onChange: (e) => {
                             onSearchChange?.(e.target.value);
                             if (e.target.value)
                                 setSearchMenuOpen(true);
@@ -102,39 +125,9 @@ const SearchInput = forwardRef((props, ref) => {
                         }, autoComplete: 'off' }), value && (_jsx(StyledCancelButton, { icon: true, onClick: () => {
                             onSearchChange?.('');
                             inputRef.current?.focus();
-                        }, variant: 'simple', compact: true, label: t('clear'), children: _jsx(Icon, { name: 'times' }) }))] }), resultsPopover && showSearchMenu && (_jsx(Popover, { as: StyledResultsPopover, target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [
-                    {
-                        name: 'flip',
-                        options: {
-                            fallbackPlacements: ['top-start']
-                        }
-                    },
-                    sameWidth
-                ], onBlur: () => {
+                        }, variant: 'simple', compact: true, label: t('clear'), children: _jsx(Icon, { name: 'times' }) }))] }), showSearchMenu && resultsPopover && (_jsx(Popover, { as: StyledResultsPopover, target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [sameWidth], onBlur: () => {
                     setSearchMenuOpen(false);
-                }, ref: searchResultsRef, children: searchMenu })), !resultsPopover && showSearchMenu && (_jsx(StyledSearchResultsContainer, { children: searchMenu })), hasFilters ? (_jsx(Popover, { ref: filtersRef, as: StyledFiltersPopover, target: filterButtonRef.current, show: filterMenuOpen, placement: 'bottom-start', modifiers: [
-                    {
-                        name: 'flip',
-                        options: {
-                            fallbackPlacements: ['top-start']
-                        }
-                    },
-                    {
-                        name: 'preventOverflow',
-                        options: {
-                            mainAxis: false,
-                            altAxis: true
-                        }
-                    }
-                ], children: _jsx(Menu, { mode: 'single-select', items: completeFilters.map(filter => ({
-                        primary: filter,
-                        id: filter,
-                        selected: filter === t('all') ? selectedFilter === '' : selectedFilter === filter
-                    })), onItemClick: filter => {
-                        setSelectedFilter(filter === t('all') ? '' : filter);
-                        onFilterChange?.(filter);
-                        inputRef.current?.focus();
-                    }, focusControlEl: filterButtonRef.current ?? undefined, focusElOnClose: false }) })) : undefined] }));
+                }, ref: searchResultsRef, children: searchMenu })), !resultsPopover && showSearchMenu && (_jsx(StyledSearchResultsContainer, { children: searchMenu })), searchMenuVisible && (_jsx(VisuallyHiddenText, { id: instructionTextId, children: `${t('search_instructions')} ` }))] }));
 });
 export default SearchInput;
 //# sourceMappingURL=SearchInput.js.map

package/lib/components/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  forwardRef,\n  useState,\n  ChangeEvent,\n  useCallback,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n  MouseEvent\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useEscape, useI18n, useOuterEvent } from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu, { MenuItemProps } from '../Menu';\nimport Link, { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher } from '../../utils';\n\nimport {\n  StyledCancelButton,\n  StyledFiltersPopover,\n  StyledResultsPopover,\n  StyledSearchButton,\n  StyledSearchFilterText,\n  StyledSearchInput,\n  StyledSearchMenu,\n  StyledSearchResultsContainer,\n  StyledSearchTextInput\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'onClick'>;\n\nexport interface SearchInputProps extends NoChildrenProp {\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default \"Search…\"\n   */\n  placeholder?: FormControlProps['placeholder'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: FormControlProps['value'];\n  /** Called when the SearchInput value changes. */\n  onSearchChange?: (value: string) => void;\n  /**\n   * Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n   * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n   */\n  onSearchSubmit?: (value: string) => void;\n  /** A list of user selectable scopes to filter search with. */\n  filters?: string[];\n  /** The selected scope filter on initial render. */\n  defaultFilter?: string;\n  /** Called when user changes scope filter. */\n  onFilterChange?: (value: string) => void;\n  /** A list of matching results presented in the input's dropdown menu. */\n  searchResults?: SearchResult[];\n  /** A list of recent searches presented in the input's dropdown menu. */\n  recentSearches?: RecentSearch[];\n  /** Places the menu into an indeterminate loading state. */\n  loading?: boolean;\n  /** Prop passed to the advanced search page link. */\n  advancedSearchLink?: OmitStrict<LinkProps, 'children'>;\n  /** Aria label for search input, used by screen readers. */\n  searchInputAriaLabel?: string;\n  /**\n   * Boolean for determining for whether the search results will render in a popover.\n   * @default true\n   */\n  resultsPopover?: boolean;\n}\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n    const t = useI18n();\n\n    const {\n      value = '',\n      defaultFilter,\n      filters,\n      onFilterChange,\n      searchResults,\n      recentSearches,\n      loading,\n      advancedSearchLink,\n      placeholder = t('search_placeholder_default'),\n      onSearchChange,\n      onSearchSubmit,\n      searchInputAriaLabel,\n      resultsPopover = true,\n      ...restProps\n    } = props;\n\n    const inputRef = useConsolidatedRef(ref);\n    const filterButtonRef = useRef<HTMLButtonElement>(null);\n    const filtersRef = useRef<HTMLDivElement>(null);\n    const searchResultsRef = useRef<HTMLDivElement>(null);\n\n    const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n    const [filterMenuOpen, setFilterMenuOpen] = useState(false);\n\n    const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? '');\n    const completeFilters = [t('all'), ...(filters ?? [])];\n    const hasFilters = completeFilters.length > 1;\n    const [downPressed, setDownPressed] = useState(false);\n    const hasSearchResults = !!(searchResults && searchResults.length);\n    const hasRecentSearches = !!(recentSearches && recentSearches.length);\n\n    const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] | undefined>(\n      undefined\n    );\n\n    useEscape(e => {\n      e.preventDefault();\n      if (searchMenuOpen) {\n        setSearchMenuOpen(false);\n      }\n      if (filterMenuOpen) {\n        setFilterMenuOpen(false);\n      }\n    });\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') {\n          onSearchSubmit?.(value);\n        }\n        if (e.key === 'ArrowDown') {\n          setDownPressed(true);\n        }\n      },\n      [onSearchSubmit, value]\n    );\n\n    useOuterEvent('click', [filterButtonRef], () => {\n      setFilterMenuOpen(false);\n    });\n\n    useOuterEvent('click', [searchResultsRef, inputRef, filtersRef], () => {\n      setSearchMenuOpen(false);\n    });\n\n    useEffect(() => {\n      setDownPressed(false);\n    }, [value]);\n\n    useEffect(() => {\n      let items: MenuItemProps[] | undefined = [];\n      if (hasSearchResults && value) {\n        items = searchResults;\n      } else if (hasRecentSearches && !value) {\n        items = recentSearches;\n      } else if (!searchResults && (!recentSearches || recentSearches.length === 0)) {\n        items = undefined;\n      }\n      setSearchResultItems(items);\n    }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);\n\n    const searchMenu = (\n      <Menu\n        as={StyledSearchMenu}\n        header={\n          recentSearches && !value ? (\n            <Text variant='secondary'>{t('recent_searches')}</Text>\n          ) : undefined\n        }\n        mode='action'\n        items={searchResultItems ?? []}\n        loading={hasRecentSearches && !value ? false : loading}\n        footer={\n          advancedSearchLink ? (\n            <Link {...advancedSearchLink}>{t('advanced_search')}</Link>\n          ) : undefined\n        }\n        accent={hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined}\n        focusControlEl={(downPressed && inputRef.current) || undefined}\n        focusElOnClose\n      />\n    );\n\n    const showSearchMenu = (value || recentSearches?.length) && (searchResultItems || loading);\n\n    return (\n      <>\n        <Flex container as={StyledSearchInput} hasFilters={hasFilters}>\n          <Flex\n            as={StyledSearchButton}\n            ref={filterButtonRef}\n            forwardedAs={hasFilters ? undefined : 'div'}\n            container={{\n              justify: 'center',\n              alignItems: 'center',\n              gap: selectedFilter ? 0.5 : undefined\n            }}\n            onClick={(e: MouseEvent) => {\n              e.preventDefault();\n              if (hasFilters) {\n                setFilterMenuOpen(true);\n              } else {\n                inputRef.current?.focus();\n              }\n            }}\n            onBlur={() => {\n              setFilterMenuOpen(false);\n              setSearchMenuOpen(false);\n            }}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (e.key === 'ArrowDown') {\n                setFilterMenuOpen(true);\n              }\n            }}\n            decoupled={hasFilters}\n            aria-label={hasFilters ? t('select_search_filter') : undefined}\n          >\n            <Icon name='search' />\n            {selectedFilter && <StyledSearchFilterText>{selectedFilter}</StyledSearchFilterText>}\n            {hasFilters && <Icon name='arrow-micro-down' />}\n          </Flex>\n          <StyledSearchTextInput\n            ref={inputRef}\n            type='search'\n            aria-label={searchInputAriaLabel}\n            placeholder={placeholder}\n            {...restProps}\n            value={value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => {\n              onSearchChange?.(e.target.value);\n              if (e.target.value) setSearchMenuOpen(true);\n            }}\n            onKeyDown={onKeyDown}\n            onFocus={() => {\n              setSearchMenuOpen(true);\n            }}\n            decoupled={hasFilters}\n            onBlur={() => {\n              setDownPressed(false);\n              if (!advancedSearchLink) {\n                setSearchMenuOpen(false);\n              }\n            }}\n            autoComplete='off'\n          />\n          {value && (\n            <StyledCancelButton\n              icon\n              onClick={() => {\n                onSearchChange?.('');\n                inputRef.current?.focus();\n              }}\n              variant='simple'\n              compact\n              label={t('clear')}\n            >\n              <Icon name='times' />\n            </StyledCancelButton>\n          )}\n        </Flex>\n        {resultsPopover && showSearchMenu && (\n          <Popover\n            as={StyledResultsPopover}\n            target={inputRef.current}\n            show={searchMenuOpen}\n            placement='bottom-start'\n            modifiers={[\n              {\n                name: 'flip',\n                options: {\n                  fallbackPlacements: ['top-start']\n                }\n              },\n              sameWidth\n            ]}\n            onBlur={() => {\n              setSearchMenuOpen(false);\n            }}\n            ref={searchResultsRef}\n          >\n            {searchMenu}\n          </Popover>\n        )}\n        {!resultsPopover && showSearchMenu && (\n          <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n        )}\n        {hasFilters ? (\n          <Popover\n            ref={filtersRef}\n            as={StyledFiltersPopover}\n            target={filterButtonRef.current}\n            show={filterMenuOpen}\n            placement='bottom-start'\n            modifiers={[\n              {\n                name: 'flip',\n                options: {\n                  fallbackPlacements: ['top-start']\n                }\n              },\n              {\n                name: 'preventOverflow',\n                options: {\n                  mainAxis: false,\n                  altAxis: true\n                }\n              }\n            ]}\n          >\n            <Menu\n              mode='single-select'\n              items={completeFilters.map(filter => ({\n                primary: filter,\n                id: filter,\n                selected: filter === t('all') ? selectedFilter === '' : selectedFilter === filter\n              }))}\n              onItemClick={filter => {\n                setSelectedFilter(filter === t('all') ? '' : filter);\n                onFilterChange?.(filter);\n                inputRef.current?.focus();\n              }}\n              focusControlEl={filterButtonRef.current ?? undefined}\n              focusElOnClose={false}\n            />\n          </Popover>\n        ) : undefined}\n      </>\n    );\n  }\n);\n\nexport default SearchInput;\n"]}
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  forwardRef,\n  useState,\n  ChangeEvent,\n  useCallback,\n  KeyboardEvent,\n  useEffect,\n  useRef\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport { FormControlProps } from '../FormControl';\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useI18n,\n  useOuterEvent,\n  useLiveLog,\n  useUID\n} from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu, { MenuItemProps } from '../Menu';\nimport Link, { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport {\n  StyledCancelButton,\n  StyledResultsPopover,\n  StyledSearchButton,\n  StyledSearchFilterText,\n  StyledSearchInput,\n  StyledSearchMenu,\n  StyledSearchResultsContainer,\n  StyledSearchTextInput,\n  StyledMenuButton\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'onClick'>;\n\nexport interface SearchInputProps extends NoChildrenProp {\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default 'Search…'\n   */\n  placeholder?: FormControlProps['placeholder'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: FormControlProps['value'];\n  /** Called when the SearchInput value changes. */\n  onSearchChange?: (value: string) => void;\n  /**\n   * Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n   * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n   */\n  onSearchSubmit?: (value: string) => void;\n  /** A list of user selectable scopes to filter search with. */\n  filters?: string[];\n  /** The selected scope filter on initial render. */\n  defaultFilter?: string;\n  /** Called when user changes scope filter. */\n  onFilterChange?: (value: string) => void;\n  /** A list of matching results presented in the input's dropdown menu. */\n  searchResults?: SearchResult[];\n  /** A list of recent searches presented in the input's dropdown menu. */\n  recentSearches?: RecentSearch[];\n  /** Places the menu into an indeterminate loading state. */\n  loading?: boolean;\n  /** Prop passed to the advanced search page link. */\n  advancedSearchLink?: OmitStrict<LinkProps, 'children'>;\n  /** Aria label for search input, used by screen readers. */\n  searchInputAriaLabel?: string;\n  /**\n   * Boolean for determining for whether the search results will render in a popover.\n   * @default true\n   */\n  resultsPopover?: boolean;\n}\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n    const t = useI18n();\n\n    const {\n      value = '',\n      defaultFilter,\n      filters,\n      onFilterChange,\n      searchResults,\n      recentSearches,\n      loading: loadingProp,\n      advancedSearchLink,\n      placeholder = t('search_placeholder_default'),\n      onSearchChange,\n      onSearchSubmit,\n      searchInputAriaLabel,\n      resultsPopover = true,\n      ...restProps\n    } = props;\n    const instructionTextId = useUID();\n    const { announcePolite } = useLiveLog();\n    const inputRef = useConsolidatedRef(ref);\n    const filterButtonRef = useRef<HTMLButtonElement>(null);\n    const filtersRef = useRef<HTMLDivElement>(null);\n    const searchResultsRef = useRef<HTMLDivElement>(null);\n\n    const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n    const [filterMenuOpen, setFilterMenuOpen] = useState(false);\n    const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] | undefined>(\n      undefined\n    );\n    const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? '');\n    const [downPressed, setDownPressed] = useState(false);\n\n    const completeFilters = [t('all'), ...(filters ?? [])];\n    const hasFilters = completeFilters.length > 1;\n    const hasSearchResults = !!(searchResults && searchResults.length);\n    const hasRecentSearches = !!(recentSearches && recentSearches.length);\n    const showSearchMenu = (value || recentSearches?.length) && (searchResultItems || loadingProp);\n    const useRecents = hasRecentSearches && !value;\n    const loading = useRecents ? false : !!loadingProp;\n    const [selectedFilterValue, setSelectedFilterValue] = useState('All');\n    const searchMenuVisible =\n      (resultsPopover && showSearchMenu && searchMenuOpen) || (!resultsPopover && showSearchMenu);\n\n    useEscape(e => {\n      e.preventDefault();\n      if (searchMenuOpen) {\n        setSearchMenuOpen(false);\n      }\n      if (filterMenuOpen) {\n        setFilterMenuOpen(false);\n      }\n    });\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && !downPressed) {\n          onSearchSubmit?.(value);\n        }\n        if (e.key === 'ArrowDown') {\n          setDownPressed(true);\n        }\n      },\n      [onSearchSubmit, downPressed, value]\n    );\n\n    useOuterEvent('click', [filterButtonRef], () => {\n      setFilterMenuOpen(false);\n    });\n\n    useOuterEvent('click', [searchResultsRef, inputRef, filtersRef], () => {\n      setSearchMenuOpen(false);\n    });\n\n    useEffect(() => {\n      setDownPressed(false);\n    }, [value]);\n\n    useEffect(() => {\n      let items: MenuItemProps[] | undefined = [];\n      if (hasSearchResults && value) {\n        items = searchResults;\n      } else if (useRecents) {\n        items = recentSearches;\n      } else if (!searchResults && (!recentSearches || recentSearches.length === 0)) {\n        items = undefined;\n      }\n      setSearchResultItems(items);\n    }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);\n\n    // Announce results\n    useEffect(() => {\n      if (!searchMenuVisible || loading) return;\n\n      const timeout = setTimeout(() => {\n        announcePolite({\n          message: t(\n            useRecents ? 'recent_results_count' : 'results_count',\n            [searchResultItems?.length ?? 0],\n            {\n              count: searchResultItems?.length ?? 0\n            }\n          ),\n          type: 'status'\n        });\n      }, 1000);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }, [loading, searchMenuVisible, searchResultItems]);\n\n    const searchMenu = (\n      <Menu\n        as={StyledSearchMenu}\n        header={\n          recentSearches && !value ? (\n            <Text variant='secondary'>{t('recent_searches')}</Text>\n          ) : undefined\n        }\n        mode='action'\n        items={searchResultItems ?? []}\n        loading={loading}\n        footer={\n          advancedSearchLink ? (\n            <Link {...advancedSearchLink}>{t('advanced_search')}</Link>\n          ) : undefined\n        }\n        accent={hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined}\n        focusControlEl={(downPressed && inputRef.current) || undefined}\n        aria-label={searchInputAriaLabel || t('search')}\n      />\n    );\n    return (\n      <>\n        <Flex container as={StyledSearchInput} hasFilters={hasFilters}>\n          {hasFilters ? (\n            <StyledMenuButton\n              text={selectedFilterValue}\n              variant='text'\n              icon='search'\n              aria-label={\n                selectedFilterValue === 'All'\n                  ? t('select_search_filter')\n                  : t('selected_search_filter', [selectedFilterValue])\n              }\n              menu={{\n                mode: 'single-select',\n                items: completeFilters.map(filter => ({\n                  primary: filter,\n                  id: filter,\n                  selected: filter === t('all') ? selectedFilter === '' : selectedFilter === filter,\n                  onClick: () => {\n                    setSelectedFilterValue(filter);\n                    setSelectedFilter(filter === t('all') ? '' : filter);\n                    onFilterChange?.(filter);\n                    inputRef.current?.focus();\n                  }\n                }))\n              }}\n            />\n          ) : (\n            <Flex\n              as={StyledSearchButton}\n              ref={filterButtonRef}\n              forwardedAs={hasFilters ? undefined : 'div'}\n              container={{\n                justify: 'center',\n                alignItems: 'center',\n                gap: selectedFilter ? 0.5 : undefined\n              }}\n              decoupled={hasFilters}\n              aria-label={hasFilters ? t('select_search_filter') : undefined}\n            >\n              <Icon name='search' />\n              {selectedFilter && <StyledSearchFilterText>{selectedFilter}</StyledSearchFilterText>}\n              {hasFilters && <Icon name='arrow-micro-down' />}\n            </Flex>\n          )}\n\n          <StyledSearchTextInput\n            ref={inputRef}\n            type='search'\n            aria-label={searchInputAriaLabel}\n            placeholder={placeholder}\n            {...restProps}\n            aria-describedby={searchMenuVisible ? instructionTextId : undefined}\n            value={value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => {\n              onSearchChange?.(e.target.value);\n              if (e.target.value) setSearchMenuOpen(true);\n            }}\n            onKeyDown={onKeyDown}\n            onFocus={() => {\n              setSearchMenuOpen(true);\n            }}\n            decoupled={hasFilters}\n            onBlur={() => {\n              setDownPressed(false);\n              if (!advancedSearchLink) {\n                setSearchMenuOpen(false);\n              }\n            }}\n            autoComplete='off'\n          />\n          {value && (\n            <StyledCancelButton\n              icon\n              onClick={() => {\n                onSearchChange?.('');\n                inputRef.current?.focus();\n              }}\n              variant='simple'\n              compact\n              label={t('clear')}\n            >\n              <Icon name='times' />\n            </StyledCancelButton>\n          )}\n        </Flex>\n        {showSearchMenu && resultsPopover && (\n          <Popover\n            as={StyledResultsPopover}\n            target={inputRef.current}\n            show={searchMenuOpen}\n            placement='bottom-start'\n            modifiers={[sameWidth]}\n            onBlur={() => {\n              setSearchMenuOpen(false);\n            }}\n            ref={searchResultsRef}\n          >\n            {searchMenu}\n          </Popover>\n        )}\n        {!resultsPopover && showSearchMenu && (\n          <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n        )}\n        {searchMenuVisible && (\n          <VisuallyHiddenText id={instructionTextId}>\n            {`${t('search_instructions')} `}\n          </VisuallyHiddenText>\n        )}\n      </>\n    );\n  }\n);\n\nexport default SearchInput;\n"]}

package/lib/components/SearchInput/SearchInput.styles.d.ts

@@ -1,8 +1,13 @@
 export declare const StyledSearchButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {
     decoupled: boolean;
 }, never>;
+export declare const StyledMenuButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../..").ForwardProps & import("../MenuButton").MenuButtonProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCancelButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSearchTextInput: import("styled-components").StyledComponent<import("react").FC<import("../Input").InputProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {
+export declare const StyledSearchTextInput: import("styled-components").StyledComponent<import("react").FC<import("../Input").InputProps & import("../..").ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+}, import("styled-components").DefaultTheme, {
     decoupled: boolean;
 }, never>;
 export declare const StyledSearchInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {

package/lib/components/SearchInput/SearchInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,kBAAkB;eAAmC,OAAO;SA+BxE,CAAC;AAIF,eAAO,MAAM,kBAAkB,qMAW7B,CAAC;AAIH,eAAO,MAAM,qBAAqB;eAA8B,OAAO;SA2CrE,CAAC;AAIH,eAAO,MAAM,iBAAiB;gBAA4B,OAAO;SA+BhE,CAAC;AAIF,eAAO,MAAM,gBAAgB,yGAI5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,0GAKlC,CAAC;AAEF,eAAO,MAAM,4BAA4B,yGAExC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAAe,CAAC;AAEjD,eAAO,MAAM,oBAAoB,yGAAe,CAAC"}
+{"version":3,"file":"SearchInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,kBAAkB;eAAmC,OAAO;SA+BxE,CAAC;AAIF,eAAO,MAAM,gBAAgB;;uDA0B5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,qMAW7B,CAAC;AAIH,eAAO,MAAM,qBAAqB;;;eAA8B,OAAO;SA2CrE,CAAC;AAIH,eAAO,MAAM,iBAAiB;gBAA4B,OAAO;SA+BhE,CAAC;AAIF,eAAO,MAAM,gBAAgB,yGAI5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,0GAKlC,CAAC;AAEF,eAAO,MAAM,4BAA4B,yGAExC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAAe,CAAC;AAEjD,eAAO,MAAM,oBAAoB,yGAAe,CAAC"}

package/lib/components/SearchInput/SearchInput.styles.js

@@ -1,5 +1,6 @@
 import { transparentize } from 'polished';
 import styled, { css } from 'styled-components';
+import MenuButton from '../MenuButton';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import Button from '../Button';
@@ -17,7 +18,7 @@ export const StyledSearchButton = styled(BareButton)(({ theme: { base, component
           `
         : css `
             border: none;
-            padding-right: 0;
+            padding-inline-end: 0;
           `}
       color: ${iconColor};
       position: relative;
@@ -30,6 +31,27 @@ export const StyledSearchButton = styled(BareButton)(({ theme: { base, component
     `;
 });
 StyledSearchButton.defaultProps = defaultThemeProp;
+export const StyledMenuButton = styled(MenuButton)(({ theme: { base, components: { 'search-input': searchInput, 'form-control': formControl, input } } }) => {
+    const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));
+    return css `
+      border-start-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});
+      border-end-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});
+      padding-inline-start: ${base.spacing};
+      border: ${input['border-width']} solid ${input['border-color']};
+      color: ${iconColor};
+      position: relative;
+      z-index: 2;
+      &:hover {
+        text-decoration: none;
+      }
+
+      &:focus:enabled {
+        border-color: ${formControl[':focus']['border-color']};
+        box-shadow: ${formControl[':focus']['box-shadow']};
+      }
+    `;
+});
+StyledMenuButton.defaultProps = defaultThemeProp;
 export const StyledCancelButton = styled(Button)(({ theme }) => {
     return css `
     position: absolute;

package/lib/components/SearchInput/SearchInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Button from '../Button';\nimport BareButton from '../Button/BareButton';\nimport Input from '../Input';\n\nexport const StyledSearchButton = styled(BareButton)<{ decoupled: boolean }>(\n  ({\n    theme: {\n      base,\n      components: { 'search-input': searchInput, 'form-control': formControl, input }\n    },\n    decoupled\n  }) => {\n    const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n    return css`\n      border-start-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n      border-end-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n      padding: ${input.padding};\n      ${decoupled\n        ? css`\n            border: ${input['border-width']} solid ${input['border-color']};\n          `\n        : css`\n            border: none;\n            padding-right: 0;\n          `}\n      color: ${iconColor};\n      position: relative;\n      z-index: 2;\n\n      &:focus:not([disabled]) {\n        border-color: ${formControl[':focus']['border-color']};\n        box-shadow: ${formControl[':focus']['box-shadow']};\n      }\n    `;\n  }\n);\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledCancelButton = styled(Button)(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-inline-end: calc(\n      (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n    );\n    inset-block-start: calc(\n      (${theme.components.input.height} - ${theme.base['hit-area'].compact}) / 2\n    );\n    z-index: 3;\n  `;\n});\n\nStyledCancelButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)<{ decoupled: boolean }>(props => {\n  const { theme, decoupled } = props;\n  const comp = theme.components['search-input'];\n  return css`\n    flex: 1;\n    background: transparent;\n    padding-inline-end: calc(${theme.base['hit-area'].finger});\n    border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n    ${decoupled\n      ? css`\n          border-inline-start: none;\n        `\n      : css`\n          border: none;\n        `}\n    height: 100%;\n    min-height: 100%;\n    position: relative;\n    z-index: 1;\n\n    &::-ms-clear {\n      display: none;\n    }\n\n    &::-webkit-search-cancel-button {\n      display: none;\n    }\n\n    ::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &:focus:not([disabled]) {\n      z-index: 2;\n      ${!decoupled &&\n      css`\n        border: none;\n        box-shadow: none;\n      `}\n    }\n  `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean }>(\n  ({\n    theme: {\n      base,\n      components: { input, 'form-control': formControl, 'search-input': searchInput }\n    },\n    hasFilters\n  }) => {\n    return css`\n      background: ${formControl['background-color']};\n      min-height: ${input.height};\n      position: relative;\n      height: ${input.height};\n      border-radius: calc(${searchInput['border-radius']} * ${base['border-radius']});\n      ${hasFilters\n        ? css`\n            border: none;\n          `\n        : css`\n            border: ${input['border-width']} solid ${input['border-color']};\n          `}\n\n      ${!hasFilters &&\n      css`\n        :focus-within {\n          border-color: ${base.palette.light};\n          box-shadow: ${formControl[':focus']['box-shadow']};\n        }\n      `}\n    `;\n  }\n);\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchMenu = styled.div`\n  header {\n    border-bottom: none;\n  }\n`;\n\nexport const StyledSearchFilterText = styled.span`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: 10ch;\n`;\n\nexport const StyledSearchResultsContainer = styled.div`\n  padding-top: ${props => props.theme.base.spacing};\n`;\n\nStyledSearchResultsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFiltersPopover = styled.div``;\n\nexport const StyledResultsPopover = styled.div``;\n"]}
+{"version":3,"file":"SearchInput.styles.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Button from '../Button';\nimport BareButton from '../Button/BareButton';\nimport Input from '../Input';\n\nexport const StyledSearchButton = styled(BareButton)<{ decoupled: boolean }>(\n  ({\n    theme: {\n      base,\n      components: { 'search-input': searchInput, 'form-control': formControl, input }\n    },\n    decoupled\n  }) => {\n    const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n    return css`\n      border-start-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n      border-end-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n      padding: ${input.padding};\n      ${decoupled\n        ? css`\n            border: ${input['border-width']} solid ${input['border-color']};\n          `\n        : css`\n            border: none;\n            padding-inline-end: 0;\n          `}\n      color: ${iconColor};\n      position: relative;\n      z-index: 2;\n\n      &:focus:not([disabled]) {\n        border-color: ${formControl[':focus']['border-color']};\n        box-shadow: ${formControl[':focus']['box-shadow']};\n      }\n    `;\n  }\n);\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledMenuButton = styled(MenuButton)(\n  ({\n    theme: {\n      base,\n      components: { 'search-input': searchInput, 'form-control': formControl, input }\n    }\n  }) => {\n    const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n    return css`\n      border-start-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n      border-end-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n      padding-inline-start: ${base.spacing};\n      border: ${input['border-width']} solid ${input['border-color']};\n      color: ${iconColor};\n      position: relative;\n      z-index: 2;\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus:enabled {\n        border-color: ${formControl[':focus']['border-color']};\n        box-shadow: ${formControl[':focus']['box-shadow']};\n      }\n    `;\n  }\n);\n\nStyledMenuButton.defaultProps = defaultThemeProp;\n\nexport const StyledCancelButton = styled(Button)(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-inline-end: calc(\n      (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n    );\n    inset-block-start: calc(\n      (${theme.components.input.height} - ${theme.base['hit-area'].compact}) / 2\n    );\n    z-index: 3;\n  `;\n});\n\nStyledCancelButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)<{ decoupled: boolean }>(props => {\n  const { theme, decoupled } = props;\n  const comp = theme.components['search-input'];\n  return css`\n    flex: 1;\n    background: transparent;\n    padding-inline-end: calc(${theme.base['hit-area'].finger});\n    border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n    ${decoupled\n      ? css`\n          border-inline-start: none;\n        `\n      : css`\n          border: none;\n        `}\n    height: 100%;\n    min-height: 100%;\n    position: relative;\n    z-index: 1;\n\n    &::-ms-clear {\n      display: none;\n    }\n\n    &::-webkit-search-cancel-button {\n      display: none;\n    }\n\n    ::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &:focus:not([disabled]) {\n      z-index: 2;\n      ${!decoupled &&\n      css`\n        border: none;\n        box-shadow: none;\n      `}\n    }\n  `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean }>(\n  ({\n    theme: {\n      base,\n      components: { input, 'form-control': formControl, 'search-input': searchInput }\n    },\n    hasFilters\n  }) => {\n    return css`\n      background: ${formControl['background-color']};\n      min-height: ${input.height};\n      position: relative;\n      height: ${input.height};\n      border-radius: calc(${searchInput['border-radius']} * ${base['border-radius']});\n      ${hasFilters\n        ? css`\n            border: none;\n          `\n        : css`\n            border: ${input['border-width']} solid ${input['border-color']};\n          `}\n\n      ${!hasFilters &&\n      css`\n        :focus-within {\n          border-color: ${base.palette.light};\n          box-shadow: ${formControl[':focus']['box-shadow']};\n        }\n      `}\n    `;\n  }\n);\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchMenu = styled.div`\n  header {\n    border-bottom: none;\n  }\n`;\n\nexport const StyledSearchFilterText = styled.span`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: 10ch;\n`;\n\nexport const StyledSearchResultsContainer = styled.div`\n  padding-top: ${props => props.theme.base.spacing};\n`;\n\nStyledSearchResultsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFiltersPopover = styled.div``;\n\nexport const StyledResultsPopover = styled.div``;\n"]}

package/lib/components/SearchInput/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from './SearchInput';
-export { SearchInputProps } from './SearchInput';
+export type { SearchInputProps } from './SearchInput';
 export { StyledSearchInput } from './SearchInput.styles';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/SearchInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/SearchInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { default } from './SearchInput';\nexport { SearchInputProps } from './SearchInput';\nexport { StyledSearchInput } from './SearchInput.styles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { default } from './SearchInput';\nexport type { SearchInputProps } from './SearchInput';\nexport { StyledSearchInput } from './SearchInput.styles';\n"]}

package/lib/components/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent, Ref, ReactNode, ChangeEventHandler } from 'react';
-import { Action, ForwardProps } from '../../types';
+import { Action, BaseProps, ForwardProps, TestIdProp } from '../../types';
 import { FormControlProps } from '../FormControl';
-export interface SelectProps {
+export interface SelectProps extends BaseProps, TestIdProp {
     /** Pass Options components as children to render the options of the Select list. */
     children: ReactNode;
     /** Called when an Option is chosen within the list. */
@@ -45,6 +45,8 @@ export declare const StyledSelect: import("styled-components").StyledComponent<"
     status: boolean;
     readOnly: boolean;
 }, never>;
-declare const Select: FunctionComponent<SelectProps & ForwardProps>;
-export default Select;
+declare const _default: FunctionComponent<SelectProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
+export default _default;
 //# sourceMappingURL=Select.d.ts.map

package/lib/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EACH,SAAS,EACT,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAqB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIrE,MAAM,WAAW,WAAW;IAC1B,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACjD,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY;YAA2B,OAAO;cAAY,OAAO;SAiD5E,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAgFzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EACH,SAAS,EACT,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,EAAqB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAOrE,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,UAAU;IACxD,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACjD,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY;YAA2B,OAAO;cAAY,OAAO;SAiD5E,CAAC;;;;AA2FH,wBAAqD"}

package/lib/components/Select/Select.js

@@ -4,8 +4,10 @@ import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
-import { useDirection, useI18n, useUID } from '../../hooks';
+import { useDirection, useI18n, useTestIds, useUID } from '../../hooks';
 import VisuallyHiddenText from '../VisuallyHiddenText';
+import { withTestIds } from '../../utils';
+import { getSelectTestIds } from './Select.test-ids';
 export const StyledSelect = styled.select(props => {
     const { readOnly } = props;
     const { base, components: { 'form-control': { 'foreground-color': fg }, select } } = props.theme;
@@ -22,7 +24,7 @@ export const StyledSelect = styled.select(props => {
     padding-inline-start: ${select.padding};
     padding-inline-end: calc(4 * ${base.spacing});
 
-    /* cSpell:disable-next-line */
+    /* cspell:disable-next-line */
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: calc(2 * ${base.spacing}) auto;
@@ -53,8 +55,9 @@ StyledSelect.defaultProps = defaultThemeProp;
 const Select = forwardRef((props, ref) => {
     const uid = useUID();
     const t = useI18n();
-    const { additionalInfo, children, id = uid, label, labelHidden, info, status, required = false, disabled = false, readOnly = false, actions, onResolveSuggestion, ...restProps } = props;
-    const Comp = (_jsx(StyledFormControl, { ...restProps, as: StyledSelect, hasSuggestion: status === 'pending' && !!onResolveSuggestion, id: id, status: status, required: required, disabled: disabled, label: label, readOnly: readOnly, ref: ref, onMouseDown: readOnly
+    const { testId, additionalInfo, children, id = uid, label, labelHidden, info, status, required = false, disabled = false, readOnly = false, actions, onResolveSuggestion, ...restProps } = props;
+    const testIds = useTestIds(testId, getSelectTestIds);
+    const Comp = (_jsx(StyledFormControl, { "data-testid": testIds.control, ...restProps, as: StyledSelect, hasSuggestion: status === 'pending' && !!onResolveSuggestion, id: id, status: status, required: required, disabled: disabled, label: label, readOnly: readOnly, ref: ref, onMouseDown: readOnly
             ? (e) => {
                 e.preventDefault();
             }
@@ -66,6 +69,7 @@ const Select = forwardRef((props, ref) => {
             }
             : undefined, children: children }));
     return label ? (_jsx(FormField, { ...{
+            testId: testIds,
             label: (_jsxs(_Fragment, { children: [label, readOnly && _jsx(VisuallyHiddenText, { children: ` ${t('read_only')}` })] })),
             labelHidden,
             id,
@@ -79,5 +83,5 @@ const Select = forwardRef((props, ref) => {
             additionalInfo
         }, children: Comp })) : (Comp);
 });
-export default Select;
+export default withTestIds(Select, getSelectTestIds);
 //# sourceMappingURL=Select.js.map

package/lib/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  ChangeEventHandler,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ForwardProps } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl, FormControlProps } from '../FormControl';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface SelectProps {\n  /** Pass Options components as children to render the options of the Select list. */\n  children: ReactNode;\n  /** Called when an Option is chosen within the list. */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: FormControlProps['value'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass an array of Action objects to append button(s) inline with the Select. */\n  actions?: Action[];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** A ref to the select element. */\n  ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{ status: boolean; readOnly: boolean }>(props => {\n  const { readOnly } = props;\n  const {\n    base,\n    components: {\n      'form-control': { 'foreground-color': fg },\n      select\n    }\n  } = props.theme;\n  const foreground = encodeURIComponent(fg);\n  const { rtl } = useDirection();\n\n  return css`\n    appearance: none;\n    -webkit-appearance: none;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    height: ${select.height};\n    min-height: ${base['hit-area']['mouse-min']};\n    padding-inline-start: ${select.padding};\n    padding-inline-end: calc(4 * ${base.spacing});\n\n    /* cSpell:disable-next-line */\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-size: calc(2 * ${base.spacing}) auto;\n    background-position: ${rtl ? base.spacing : `calc(100% - ${base.spacing}) `} 60%;\n    border-width: ${select['border-width']};\n    border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n    ${readOnly &&\n    css`\n      background-image: none;\n    `}\n\n    ${!props.status &&\n    css`\n      border-color: ${select['border-color']};\n    `}\n\n    &::-ms-expand {\n      display: none;\n    }\n\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: FunctionComponent<SelectProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SelectProps>, ref: SelectProps['ref']) => {\n    const uid = useUID();\n    const t = useI18n();\n\n    const {\n      additionalInfo,\n      children,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      actions,\n      onResolveSuggestion,\n      ...restProps\n    } = props;\n\n    const Comp = (\n      <StyledFormControl\n        {...restProps}\n        as={StyledSelect}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        id={id}\n        status={status}\n        required={required}\n        disabled={disabled}\n        label={label}\n        readOnly={readOnly}\n        ref={ref}\n        onMouseDown={\n          readOnly\n            ? (e: MouseEvent<HTMLSelectElement>) => {\n                e.preventDefault();\n              }\n            : undefined\n        }\n        onKeyDown={\n          readOnly\n            ? (e: KeyboardEvent) => {\n                // TODO: Consideration is needed for key modifiers, e.g. \"ctrl p\"\n                if (!['Escape', 'Tab', 'Space'].includes(e.key)) e.preventDefault();\n              }\n            : undefined\n        }\n      >\n        {children}\n      </StyledFormControl>\n    );\n\n    return label ? (\n      <FormField\n        {...{\n          label: (\n            <>\n              {label}\n              {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n            </>\n          ),\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          readOnly,\n          actions,\n          onResolveSuggestion,\n          additionalInfo\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default Select;\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  ChangeEventHandler,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, BaseProps, ForwardProps, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl, FormControlProps } from '../FormControl';\nimport { useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { withTestIds } from '../../utils';\n\nimport { getSelectTestIds } from './Select.test-ids';\n\nexport interface SelectProps extends BaseProps, TestIdProp {\n  /** Pass Options components as children to render the options of the Select list. */\n  children: ReactNode;\n  /** Called when an Option is chosen within the list. */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: FormControlProps['value'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass an array of Action objects to append button(s) inline with the Select. */\n  actions?: Action[];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** A ref to the select element. */\n  ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{ status: boolean; readOnly: boolean }>(props => {\n  const { readOnly } = props;\n  const {\n    base,\n    components: {\n      'form-control': { 'foreground-color': fg },\n      select\n    }\n  } = props.theme;\n  const foreground = encodeURIComponent(fg);\n  const { rtl } = useDirection();\n\n  return css`\n    appearance: none;\n    -webkit-appearance: none;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    height: ${select.height};\n    min-height: ${base['hit-area']['mouse-min']};\n    padding-inline-start: ${select.padding};\n    padding-inline-end: calc(4 * ${base.spacing});\n\n    /* cspell:disable-next-line */\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-size: calc(2 * ${base.spacing}) auto;\n    background-position: ${rtl ? base.spacing : `calc(100% - ${base.spacing}) `} 60%;\n    border-width: ${select['border-width']};\n    border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n    ${readOnly &&\n    css`\n      background-image: none;\n    `}\n\n    ${!props.status &&\n    css`\n      border-color: ${select['border-color']};\n    `}\n\n    &::-ms-expand {\n      display: none;\n    }\n\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: FunctionComponent<SelectProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SelectProps>, ref: SelectProps['ref']) => {\n    const uid = useUID();\n    const t = useI18n();\n\n    const {\n      testId,\n      additionalInfo,\n      children,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      actions,\n      onResolveSuggestion,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getSelectTestIds);\n\n    const Comp = (\n      <StyledFormControl\n        data-testid={testIds.control}\n        {...restProps}\n        as={StyledSelect}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        id={id}\n        status={status}\n        required={required}\n        disabled={disabled}\n        label={label}\n        readOnly={readOnly}\n        ref={ref}\n        onMouseDown={\n          readOnly\n            ? (e: MouseEvent<HTMLSelectElement>) => {\n                e.preventDefault();\n              }\n            : undefined\n        }\n        onKeyDown={\n          readOnly\n            ? (e: KeyboardEvent) => {\n                // TODO: Consideration is needed for key modifiers, e.g. \"ctrl p\"\n                if (!['Escape', 'Tab', 'Space'].includes(e.key)) e.preventDefault();\n              }\n            : undefined\n        }\n      >\n        {children}\n      </StyledFormControl>\n    );\n\n    return label ? (\n      <FormField\n        {...{\n          testId: testIds,\n          label: (\n            <>\n              {label}\n              {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n            </>\n          ),\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          readOnly,\n          actions,\n          onResolveSuggestion,\n          additionalInfo\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(Select, getSelectTestIds);\n"]}

package/lib/components/Select/Select.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getSelectTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+//# sourceMappingURL=Select.test-ids.d.ts.map

package/lib/components/Select/Select.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,wKAA6D,CAAC"}

package/lib/components/Select/Select.test-ids.js

@@ -0,0 +1,4 @@
+import { createTestIds } from '../../utils';
+import { elements } from '../FormField/FormField.test-ids';
+export const getSelectTestIds = createTestIds('select', ['control', ...elements]);
+//# sourceMappingURL=Select.test-ids.js.map

package/lib/components/Select/Select.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.test-ids.js","sourceRoot":"","sources":["../../../src/components/Select/Select.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,GAAG,QAAQ,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\nimport { elements } from '../FormField/FormField.test-ids';\n\nexport const getSelectTestIds = createTestIds('select', ['control', ...elements] as const);\n"]}

package/lib/components/Select/index.d.ts

@@ -1,3 +1,5 @@
-export { default, SelectProps } from './Select';
-export { default as Option, OptionProps } from './Option';
+export { default } from './Select';
+export type { SelectProps } from './Select';
+export { default as Option } from './Option';
+export type { OptionProps } from './Option';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/lib/components/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAe,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAe,MAAM,UAAU,CAAC","sourcesContent":["export { default, SelectProps } from './Select';\nexport { default as Option, OptionProps } from './Option';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './Select';\nexport type { SelectProps } from './Select';\nexport { default as Option } from './Option';\nexport type { OptionProps } from './Option';\n"]}

package/lib/components/Sentiment/index.d.ts

@@ -1,4 +1,3 @@
-export { default } from './Sentiment';
-export { StyledSentiment } from './Sentiment';
-export { SentimentProps } from './Sentiment';
+export { default, StyledSentiment } from './Sentiment';
+export type { SentimentProps } from './Sentiment';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Sentiment/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sentiment/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sentiment/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/lib/components/Sentiment/index.js

@@ -1,3 +1,2 @@
-export { default } from './Sentiment';
-export { StyledSentiment } from './Sentiment';
+export { default, StyledSentiment } from './Sentiment';
 //# sourceMappingURL=index.js.map