@pega/cosmos-react-core 9.0.0-build.15.0 → 9.0.0-build.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.styles.js +6 -0
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/lib/components/Menu/Menu.d.ts.map +1 -1
- package/lib/components/Menu/Menu.js +6 -2
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/Menu/Menu.styles.d.ts.map +1 -1
- package/lib/components/Menu/Menu.styles.js +9 -3
- package/lib/components/Menu/Menu.styles.js.map +1 -1
- package/lib/components/SearchInput/SearchInput.d.ts +7 -7
- package/lib/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/lib/components/SearchInput/SearchInput.js +28 -17
- package/lib/components/SearchInput/SearchInput.js.map +1 -1
- package/lib/components/SearchInput/SearchInput.styles.d.ts.map +1 -1
- package/lib/components/SearchInput/SearchInput.styles.js +2 -3
- package/lib/components/SearchInput/SearchInput.styles.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +2 -2
- package/lib/i18n/default.d.ts +2 -2
- package/lib/i18n/default.js +2 -2
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +2 -2
- package/package.json +2 -2
|
@@ -14,11 +14,12 @@ import { createStringMatcher, getFocusables, createClassName } from '../../utils
|
|
|
14
14
|
import VisuallyHiddenText from '../VisuallyHiddenText';
|
|
15
15
|
import Tooltip from '../Tooltip';
|
|
16
16
|
import { ThemeOverride } from '../Configuration';
|
|
17
|
+
import { Button } from '../..';
|
|
17
18
|
import { StyledClearButton, StyledResultsPopover, StyledSearchButton, StyledSearchInput, StyledSearchMenu, StyledSearchResultsContainer, StyledSearchTextInput, StyledSearchFiltersButton, StyledSearchIcon } from './SearchInput.styles';
|
|
18
19
|
registerIcon(searchIcon, timesIcon);
|
|
19
20
|
const SearchInput = forwardRef(function SearchInput(props, ref) {
|
|
20
21
|
const t = useI18n();
|
|
21
|
-
const { value = '',
|
|
22
|
+
const { value = '', defaultFilters, currentFilters, filters = [], onFiltersChange, searchResults, recentSearches, loading: loadingProp, advancedSearchLink, onSearchChange, onSearchSubmit, onKeyDown: onKeyDownProp, searchInputAriaLabel = t('search'), resultsPopover = true, className, ...restProps } = props;
|
|
22
23
|
const id = useUID();
|
|
23
24
|
const listId = useUID();
|
|
24
25
|
const instructionTextId = useUID();
|
|
@@ -30,10 +31,10 @@ const SearchInput = forwardRef(function SearchInput(props, ref) {
|
|
|
30
31
|
const theme = useTheme();
|
|
31
32
|
const [searchMenuOpen, setSearchMenuOpen] = useState(false);
|
|
32
33
|
const [searchResultItems, setSearchResultItems] = useState(undefined);
|
|
33
|
-
const [
|
|
34
|
+
const [selectedFilters, setSelectedFilters] = useState(defaultFilters ?? []);
|
|
34
35
|
const [downPressed, setDownPressed] = useState(false);
|
|
35
|
-
const
|
|
36
|
-
const
|
|
36
|
+
const hasFilters = filters.length > 1;
|
|
37
|
+
const hasFiltersApplied = selectedFilters.length > 0;
|
|
37
38
|
const hasSearchResults = !!(searchResults && searchResults.length);
|
|
38
39
|
const hasRecentSearches = !!(recentSearches && recentSearches.length);
|
|
39
40
|
const showSearchMenu = (value || recentSearches?.length) && (searchResultItems || loadingProp);
|
|
@@ -124,9 +125,9 @@ const SearchInput = forwardRef(function SearchInput(props, ref) {
|
|
|
124
125
|
}
|
|
125
126
|
}, [focus]);
|
|
126
127
|
useEffect(() => {
|
|
127
|
-
if (
|
|
128
|
-
|
|
129
|
-
}, [
|
|
128
|
+
if (currentFilters)
|
|
129
|
+
setSelectedFilters(currentFilters);
|
|
130
|
+
}, [currentFilters]);
|
|
130
131
|
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: true, as: StyledSearchInput, hasFilters: hasFilters, showSubmit: !!onSearchSubmit, className: createClassName('search-input', className, { loading: !!loadingProp }), children: [hasFilters && (_jsxs(_Fragment, { children: [_jsx(ThemeOverride, { theme: {
|
|
131
132
|
components: {
|
|
132
133
|
button: {
|
|
@@ -134,26 +135,36 @@ const SearchInput = forwardRef(function SearchInput(props, ref) {
|
|
|
134
135
|
'secondary-fill-style': 'outline'
|
|
135
136
|
}
|
|
136
137
|
}
|
|
137
|
-
}, children: _jsx(StyledSearchFiltersButton, { ref: filtersRef,
|
|
138
|
-
mode: '
|
|
139
|
-
items:
|
|
138
|
+
}, children: _jsx(StyledSearchFiltersButton, { ref: filtersRef, variant: 'secondary', "aria-label": t('search_in_noun', [selectedFilters.join(', ')]), icon: hasFiltersApplied ? 'filter-on' : 'filter', iconOnly: true, menu: {
|
|
139
|
+
mode: 'multi-select',
|
|
140
|
+
items: filters.map(filter => ({
|
|
140
141
|
primary: filter,
|
|
141
142
|
id: filter,
|
|
142
|
-
selected:
|
|
143
|
+
selected: selectedFilters.includes(filter),
|
|
143
144
|
onClick: () => {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
145
|
+
let newSelectedFilters = [];
|
|
146
|
+
if (selectedFilters.includes(filter)) {
|
|
147
|
+
newSelectedFilters = selectedFilters.filter(f => f !== filter);
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
newSelectedFilters = [...selectedFilters, filter];
|
|
151
|
+
}
|
|
152
|
+
setSelectedFilters(newSelectedFilters);
|
|
153
|
+
onFiltersChange?.(newSelectedFilters);
|
|
147
154
|
}
|
|
148
|
-
}))
|
|
149
|
-
|
|
155
|
+
})),
|
|
156
|
+
footer: (_jsx(Button, { variant: 'link', onClick: () => {
|
|
157
|
+
setSelectedFilters([]);
|
|
158
|
+
onFiltersChange?.([]);
|
|
159
|
+
}, children: t('clear_filters') }))
|
|
160
|
+
}, showSubmit: !!onSearchSubmit }) }), hasFiltersApplied && (_jsx(Tooltip, { target: filtersRef.current, hideDelay: 'none', showDelay: 'none', children: `${t('filters')}: ${selectedFilters.join(', ')}` }))] })), !onSearchSubmit && !hasFiltersApplied && _jsx(StyledSearchIcon, { name: 'search' }), _jsx(StyledSearchTextInput, { id: id, ref: inputRef, "aria-label": searchInputAriaLabel, ...restProps, type: 'search', "aria-autocomplete": 'list', "aria-controls": !!showSearchMenu && resultsPopover ? listId : undefined, "aria-haspopup": 'listbox', "aria-describedby": searchMenuVisible ? instructionTextId : undefined, value: value, onChange: (e) => {
|
|
150
161
|
onSearchChange?.(e.target.value);
|
|
151
162
|
if (e.target.value)
|
|
152
163
|
setSearchMenuOpen(true);
|
|
153
164
|
}, onKeyDown: onKeyDown }), value && (_jsx(StyledClearButton, { icon: true, onClick: () => {
|
|
154
165
|
onSearchChange?.('');
|
|
155
166
|
inputRef.current?.focus();
|
|
156
|
-
}, variant: 'simple', compact: true, label: t('clear'), showSubmit: !!onSearchSubmit, children: _jsx(Icon, { name: 'times' }) })), !onSearchSubmit &&
|
|
167
|
+
}, variant: 'simple', compact: true, label: t('clear'), showSubmit: !!onSearchSubmit, children: _jsx(Icon, { name: 'times' }) })), !onSearchSubmit && hasFiltersApplied && _jsx(StyledSearchIcon, { name: 'search' }), onSearchSubmit && (_jsx(StyledSearchButton, { onClick: () => {
|
|
157
168
|
onSearchSubmit?.(value);
|
|
158
169
|
}, icon: true, label: t('search'), variant: 'simple', children: _jsx(Icon, { name: 'search' }) }))] }), showSearchMenu && resultsPopover && (_jsx(Popover, { as: StyledResultsPopover, target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [sameWidth], onKeyDown: (e) => {
|
|
159
170
|
if (!inputRef.current)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';\nimport type {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n ChangeEvent,\n KeyboardEvent as ReactKeyboardEvent,\n MutableRefObject,\n KeyboardEventHandler\n} from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport type { FormControlProps } from '../FormControl';\nimport {\n useConsolidatedRef,\n useEscape,\n useI18n,\n useOuterEvent,\n useLiveLog,\n useUID,\n useFocusWithin,\n useTheme\n} from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu from '../Menu';\nimport type { MenuItemProps } from '../Menu';\nimport Link from '../Link';\nimport type { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher, getFocusables, createClassName } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Tooltip from '../Tooltip';\nimport { ThemeOverride } from '../Configuration';\n\nimport {\n StyledClearButton,\n StyledResultsPopover,\n StyledSearchButton,\n StyledSearchInput,\n StyledSearchMenu,\n StyledSearchResultsContainer,\n StyledSearchTextInput,\n StyledSearchFiltersButton,\n StyledSearchIcon\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon, timesIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'onClick'>;\n\nexport type SearchFilter =\n | {\n /** A list of user selectable scopes to filter search with. */\n filters: string[];\n /** The default filter for uncontrolled use. */\n defaultFilter?: string;\n currentFilter?: never;\n }\n | {\n /** A list of user selectable scopes to filter search with. */\n filters: string[];\n defaultFilter?: never;\n /** The current filter for controlled use. */\n currentFilter?: string;\n }\n | {\n filters?: never;\n defaultFilter?: never;\n currentFilter?: never;\n };\n\nexport type SearchInputProps = NoChildrenProp &\n BaseProps & {\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 /** Called when user changes scope filter. */\n onFilterChange?: (value: string) => void;\n /** Called when user presses a key. */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\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 } & SearchFilter;\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n function SearchInput(props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) {\n const t = useI18n();\n\n const {\n value = '',\n defaultFilter,\n currentFilter,\n filters,\n onFilterChange,\n searchResults,\n recentSearches,\n loading: loadingProp,\n advancedSearchLink,\n onSearchChange,\n onSearchSubmit,\n onKeyDown: onKeyDownProp,\n searchInputAriaLabel = t('search'),\n resultsPopover = true,\n className,\n ...restProps\n } = props;\n\n const id = useUID();\n const listId = useUID();\n const instructionTextId = useUID();\n const { announcePolite } = useLiveLog();\n const bodyRef = useRef<Element>(document.body);\n const inputRef = useConsolidatedRef(ref);\n const filtersRef = useRef<HTMLDivElement>(null);\n const searchResultsRef = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n\n const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] | undefined>(\n undefined\n );\n const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? t('all'));\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 searchMenuVisible =\n (resultsPopover && showSearchMenu && searchMenuOpen) || (!resultsPopover && showSearchMenu);\n\n const handleEscape = useCallback(\n (e: KeyboardEvent) => {\n if (searchMenuOpen) {\n e.preventDefault();\n e.stopPropagation();\n setSearchMenuOpen(false);\n setDownPressed(false);\n }\n },\n [searchMenuOpen]\n );\n\n useEscape(handleEscape, inputRef, [handleEscape]);\n\n const onKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLInputElement>) => {\n onKeyDownProp?.(e);\n\n switch (e.key) {\n case 'Enter':\n if (!downPressed) {\n onSearchSubmit?.(value);\n }\n break;\n case 'ArrowDown':\n setDownPressed(true);\n setSearchMenuOpen(true);\n break;\n case 'Tab': {\n const forward = !e.shiftKey;\n\n if (forward) {\n const popoverFocusables = getFocusables(searchResultsRef);\n\n if (popoverFocusables.length) {\n e.preventDefault();\n popoverFocusables[0].focus();\n }\n }\n break;\n }\n default:\n break;\n }\n },\n [onSearchSubmit, downPressed, value]\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 listId={listId}\n role='listbox'\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={inputRef.current || undefined}\n pauseDescendantEvaluation={!downPressed}\n aria-label={searchInputAriaLabel || t('search')}\n />\n );\n\n const focus = useFocusWithin([inputRef, searchResultsRef], focused => {\n if (!focused) {\n setDownPressed(false);\n setSearchMenuOpen(false);\n }\n });\n\n useEffect(() => {\n if (focus) {\n setSearchMenuOpen(true);\n }\n }, [focus]);\n\n useEffect(() => {\n if (currentFilter) setSelectedFilter(currentFilter);\n }, [currentFilter]);\n\n return (\n <>\n <Flex\n container\n as={StyledSearchInput}\n hasFilters={hasFilters}\n showSubmit={!!onSearchSubmit}\n className={createClassName('search-input', className, { loading: !!loadingProp })}\n >\n {hasFilters && (\n <>\n <ThemeOverride\n theme={{\n components: {\n button: {\n 'secondary-color': theme.base.palette['foreground-color'],\n 'secondary-fill-style': 'outline'\n }\n }\n }}\n >\n <StyledSearchFiltersButton\n ref={filtersRef}\n text={selectedFilter}\n variant='secondary'\n aria-label={t('search_in_noun', [selectedFilter])}\n menu={{\n mode: 'single-select',\n items: completeFilters.map(filter => ({\n primary: filter,\n id: filter,\n selected: selectedFilter === filter,\n onClick: () => {\n setSelectedFilter(filter);\n onFilterChange?.(filter);\n inputRef.current?.focus();\n }\n }))\n }}\n showSubmit={!!onSearchSubmit}\n />\n </ThemeOverride>\n <Tooltip target={filtersRef.current} hideDelay='none' showDelay='none'>\n {t('search_in')}\n </Tooltip>\n </>\n )}\n\n {!onSearchSubmit && !hasFilters && <StyledSearchIcon name='search' />}\n\n <StyledSearchTextInput\n id={id}\n ref={inputRef}\n aria-label={searchInputAriaLabel}\n {...restProps}\n type='search'\n aria-autocomplete='list'\n aria-controls={!!showSearchMenu && resultsPopover ? listId : undefined}\n aria-haspopup='listbox'\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 />\n\n {value && (\n <StyledClearButton\n icon\n onClick={() => {\n onSearchChange?.('');\n inputRef.current?.focus();\n }}\n variant='simple'\n compact\n label={t('clear')}\n showSubmit={!!onSearchSubmit}\n >\n <Icon name='times' />\n </StyledClearButton>\n )}\n\n {!onSearchSubmit && hasFilters && <StyledSearchIcon name='search' />}\n\n {onSearchSubmit && (\n <StyledSearchButton\n onClick={() => {\n onSearchSubmit?.(value);\n }}\n icon\n label={t('search')}\n variant='simple'\n >\n <Icon name='search' />\n </StyledSearchButton>\n )}\n </Flex>\n\n {showSearchMenu && resultsPopover && (\n <Popover\n as={StyledResultsPopover}\n target={inputRef.current}\n show={searchMenuOpen}\n placement='bottom-start'\n modifiers={[sameWidth]}\n onKeyDown={(e: KeyboardEvent) => {\n if (!inputRef.current) return;\n\n if (e.key === 'Tab') {\n const popoverFocusables = getFocusables(searchResultsRef);\n const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n const forward = !e.shiftKey;\n const isLast = currentIndex === popoverFocusables.length - 1;\n\n if (forward && isLast) {\n e.preventDefault();\n const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n allFocusable[nextIndex]?.focus();\n setDownPressed(false);\n setSearchMenuOpen(false);\n } else if (!forward && currentIndex === 0) {\n e.preventDefault();\n inputRef.current.focus();\n }\n }\n if (e.key === 'Escape') {\n handleEscape(e);\n inputRef.current.focus();\n }\n }}\n ref={searchResultsRef}\n >\n {searchMenu}\n </Popover>\n )}\n\n {!resultsPopover && showSearchMenu && (\n <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n )}\n\n <VisuallyHiddenText id={instructionTextId}>\n {`${t('search_instructions')} `}\n </VisuallyHiddenText>\n </>\n );\n }\n);\n\nexport default SearchInput;\n"]}
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';\nimport type {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n ChangeEvent,\n KeyboardEvent as ReactKeyboardEvent,\n MutableRefObject,\n KeyboardEventHandler\n} from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport type { FormControlProps } from '../FormControl';\nimport {\n useConsolidatedRef,\n useEscape,\n useI18n,\n useOuterEvent,\n useLiveLog,\n useUID,\n useFocusWithin,\n useTheme\n} from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu from '../Menu';\nimport type { MenuItemProps } from '../Menu';\nimport Link from '../Link';\nimport type { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher, getFocusables, createClassName } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Tooltip from '../Tooltip';\nimport { ThemeOverride } from '../Configuration';\nimport { Button } from '../..';\n\nimport {\n StyledClearButton,\n StyledResultsPopover,\n StyledSearchButton,\n StyledSearchInput,\n StyledSearchMenu,\n StyledSearchResultsContainer,\n StyledSearchTextInput,\n StyledSearchFiltersButton,\n StyledSearchIcon\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon, timesIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'onClick'>;\n\nexport type SearchFilter =\n | {\n /** A list of user selectable scopes to filter search with. */\n filters: string[];\n /** The default filter for uncontrolled use. */\n defaultFilters?: string[];\n currentFilters?: never;\n }\n | {\n /** A list of user selectable scopes to filter search with. */\n filters: string[];\n defaultFilters?: never;\n /** The current filter for controlled use. */\n currentFilters?: string[];\n }\n | {\n filters?: never;\n defaultFilters?: never;\n currentFilters?: never;\n };\n\nexport type SearchInputProps = NoChildrenProp &\n BaseProps & {\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 /** Called when user changes scope filter. */\n onFiltersChange?: (value: string[]) => void;\n /** Called when user presses a key. */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\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 } & SearchFilter;\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n function SearchInput(props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) {\n const t = useI18n();\n\n const {\n value = '',\n defaultFilters,\n currentFilters,\n filters = [],\n onFiltersChange,\n searchResults,\n recentSearches,\n loading: loadingProp,\n advancedSearchLink,\n onSearchChange,\n onSearchSubmit,\n onKeyDown: onKeyDownProp,\n searchInputAriaLabel = t('search'),\n resultsPopover = true,\n className,\n ...restProps\n } = props;\n\n const id = useUID();\n const listId = useUID();\n const instructionTextId = useUID();\n const { announcePolite } = useLiveLog();\n const bodyRef = useRef<Element>(document.body);\n const inputRef = useConsolidatedRef(ref);\n const filtersRef = useRef<HTMLDivElement>(null);\n const searchResultsRef = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n\n const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] | undefined>(\n undefined\n );\n const [selectedFilters, setSelectedFilters] = useState(defaultFilters ?? []);\n const [downPressed, setDownPressed] = useState(false);\n\n const hasFilters = filters.length > 1;\n const hasFiltersApplied = selectedFilters.length > 0;\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 searchMenuVisible =\n (resultsPopover && showSearchMenu && searchMenuOpen) || (!resultsPopover && showSearchMenu);\n\n const handleEscape = useCallback(\n (e: KeyboardEvent) => {\n if (searchMenuOpen) {\n e.preventDefault();\n e.stopPropagation();\n setSearchMenuOpen(false);\n setDownPressed(false);\n }\n },\n [searchMenuOpen]\n );\n\n useEscape(handleEscape, inputRef, [handleEscape]);\n\n const onKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLInputElement>) => {\n onKeyDownProp?.(e);\n\n switch (e.key) {\n case 'Enter':\n if (!downPressed) {\n onSearchSubmit?.(value);\n }\n break;\n case 'ArrowDown':\n setDownPressed(true);\n setSearchMenuOpen(true);\n break;\n case 'Tab': {\n const forward = !e.shiftKey;\n\n if (forward) {\n const popoverFocusables = getFocusables(searchResultsRef);\n\n if (popoverFocusables.length) {\n e.preventDefault();\n popoverFocusables[0].focus();\n }\n }\n break;\n }\n default:\n break;\n }\n },\n [onSearchSubmit, downPressed, value]\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 listId={listId}\n role='listbox'\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={inputRef.current || undefined}\n pauseDescendantEvaluation={!downPressed}\n aria-label={searchInputAriaLabel || t('search')}\n />\n );\n\n const focus = useFocusWithin([inputRef, searchResultsRef], focused => {\n if (!focused) {\n setDownPressed(false);\n setSearchMenuOpen(false);\n }\n });\n\n useEffect(() => {\n if (focus) {\n setSearchMenuOpen(true);\n }\n }, [focus]);\n\n useEffect(() => {\n if (currentFilters) setSelectedFilters(currentFilters);\n }, [currentFilters]);\n\n return (\n <>\n <Flex\n container\n as={StyledSearchInput}\n hasFilters={hasFilters}\n showSubmit={!!onSearchSubmit}\n className={createClassName('search-input', className, { loading: !!loadingProp })}\n >\n {hasFilters && (\n <>\n <ThemeOverride\n theme={{\n components: {\n button: {\n 'secondary-color': theme.base.palette['foreground-color'],\n 'secondary-fill-style': 'outline'\n }\n }\n }}\n >\n <StyledSearchFiltersButton\n ref={filtersRef}\n variant='secondary'\n aria-label={t('search_in_noun', [selectedFilters.join(', ')])}\n icon={hasFiltersApplied ? 'filter-on' : 'filter'}\n iconOnly\n menu={{\n mode: 'multi-select',\n items: filters.map(filter => ({\n primary: filter,\n id: filter,\n selected: selectedFilters.includes(filter),\n onClick: () => {\n let newSelectedFilters = [];\n if (selectedFilters.includes(filter)) {\n newSelectedFilters = selectedFilters.filter(f => f !== filter);\n } else {\n newSelectedFilters = [...selectedFilters, filter];\n }\n setSelectedFilters(newSelectedFilters);\n onFiltersChange?.(newSelectedFilters);\n }\n })),\n footer: (\n <Button\n variant='link'\n onClick={() => {\n setSelectedFilters([]);\n onFiltersChange?.([]);\n }}\n >\n {t('clear_filters')}\n </Button>\n )\n }}\n showSubmit={!!onSearchSubmit}\n />\n </ThemeOverride>\n {hasFiltersApplied && (\n <Tooltip target={filtersRef.current} hideDelay='none' showDelay='none'>\n {`${t('filters')}: ${selectedFilters.join(', ')}`}\n </Tooltip>\n )}\n </>\n )}\n\n {!onSearchSubmit && !hasFiltersApplied && <StyledSearchIcon name='search' />}\n\n <StyledSearchTextInput\n id={id}\n ref={inputRef}\n aria-label={searchInputAriaLabel}\n {...restProps}\n type='search'\n aria-autocomplete='list'\n aria-controls={!!showSearchMenu && resultsPopover ? listId : undefined}\n aria-haspopup='listbox'\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 />\n\n {value && (\n <StyledClearButton\n icon\n onClick={() => {\n onSearchChange?.('');\n inputRef.current?.focus();\n }}\n variant='simple'\n compact\n label={t('clear')}\n showSubmit={!!onSearchSubmit}\n >\n <Icon name='times' />\n </StyledClearButton>\n )}\n\n {!onSearchSubmit && hasFiltersApplied && <StyledSearchIcon name='search' />}\n\n {onSearchSubmit && (\n <StyledSearchButton\n onClick={() => {\n onSearchSubmit?.(value);\n }}\n icon\n label={t('search')}\n variant='simple'\n >\n <Icon name='search' />\n </StyledSearchButton>\n )}\n </Flex>\n\n {showSearchMenu && resultsPopover && (\n <Popover\n as={StyledResultsPopover}\n target={inputRef.current}\n show={searchMenuOpen}\n placement='bottom-start'\n modifiers={[sameWidth]}\n onKeyDown={(e: KeyboardEvent) => {\n if (!inputRef.current) return;\n\n if (e.key === 'Tab') {\n const popoverFocusables = getFocusables(searchResultsRef);\n const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n const forward = !e.shiftKey;\n const isLast = currentIndex === popoverFocusables.length - 1;\n\n if (forward && isLast) {\n e.preventDefault();\n const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n allFocusable[nextIndex]?.focus();\n setDownPressed(false);\n setSearchMenuOpen(false);\n } else if (!forward && currentIndex === 0) {\n e.preventDefault();\n inputRef.current.focus();\n }\n }\n if (e.key === 'Escape') {\n handleEscape(e);\n inputRef.current.focus();\n }\n }}\n ref={searchResultsRef}\n >\n {searchMenu}\n </Popover>\n )}\n\n {!resultsPopover && showSearchMenu && (\n <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n )}\n\n <VisuallyHiddenText id={instructionTextId}>\n {`${t('search_instructions')} `}\n </VisuallyHiddenText>\n </>\n );\n }\n);\n\nexport default SearchInput;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,kBAAkB,oLA2B7B,CAAC;AAIH,eAAO,MAAM,yBAAyB;;uDA2BpC,CAAC;AAIH,eAAO,MAAM,iBAAiB,oLAkB5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0KAqB3B,CAAC;AAIH,eAAO,MAAM,qBAAqB;;uDA6BhC,CAAC;AAIH,eAAO,MAAM,iBAAiB;gBAA4B,OAAO;gBAAc,OAAO;
|
|
1
|
+
{"version":3,"file":"SearchInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,kBAAkB,oLA2B7B,CAAC;AAIH,eAAO,MAAM,yBAAyB;;uDA2BpC,CAAC;AAIH,eAAO,MAAM,iBAAiB,oLAkB5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0KAqB3B,CAAC;AAIH,eAAO,MAAM,qBAAqB;;uDA6BhC,CAAC;AAIH,eAAO,MAAM,iBAAiB;gBAA4B,OAAO;gBAAc,OAAO;SA0HrF,CAAC;AAIF,eAAO,MAAM,gBAAgB,yGAI5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,yGAExC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAAe,CAAC;AAEjD,eAAO,MAAM,oBAAoB,yGAAe,CAAC"}
|
|
@@ -51,7 +51,7 @@ export const StyledClearButton = styled(Button)(({ theme: { base: { 'hit-area':
|
|
|
51
51
|
position: absolute;
|
|
52
52
|
inset-block-start: calc((${input.height} - ${hitArea.compact}) / 2);
|
|
53
53
|
|
|
54
|
-
|
|
54
|
+
&& + ${StyledButton} {
|
|
55
55
|
margin-inline-start: 0;
|
|
56
56
|
}
|
|
57
57
|
|
|
@@ -166,7 +166,6 @@ export const StyledSearchInput = styled.div(({ hasFilters, showSubmit, theme })
|
|
|
166
166
|
/* stylelint-enable length-zero-no-unit */
|
|
167
167
|
`}
|
|
168
168
|
`}
|
|
169
|
-
|
|
170
169
|
${StyledSearchTextInput} {
|
|
171
170
|
${showSubmit && !hasFilters
|
|
172
171
|
? css `
|
|
@@ -182,7 +181,7 @@ export const StyledSearchInput = styled.div(({ hasFilters, showSubmit, theme })
|
|
|
182
181
|
`}
|
|
183
182
|
padding-inline-end: calc(
|
|
184
183
|
${theme.components.input.padding} + var(--clear-button-size-plus-gap) +
|
|
185
|
-
|
|
184
|
+
var(--search-icon-end-size)
|
|
186
185
|
);
|
|
187
186
|
--clear-button-size-plus-gap: calc(
|
|
188
187
|
max(${theme.base['hit-area'].compact}, ${theme.base['hit-area']['compact-min']}) +
|
|
@@ -1 +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 MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Input from '../Input';\nimport Icon from '../Icon';\n\nexport const StyledSearchButton = styled(Button)(({\n theme: {\n base: {\n spacing,\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-start: unset;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n border-start-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n padding-inline: ${spacing} calc(1.25 * ${spacing});\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchFiltersButton = styled(MenuButton)(({\n theme: {\n base: {\n spacing,\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-end: unset;\n border-start-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n padding-inline: ${spacing} 0;\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchFiltersButton.defaultProps = defaultThemeProp;\n\nexport const StyledClearButton = styled(Button)(({\n theme: {\n base: { 'hit-area': hitArea },\n components: { input }\n }\n}) => {\n return css`\n position: absolute;\n inset-block-start: calc((${input.height} - ${hitArea.compact}) / 2);\n\n & + ${StyledButton} {\n margin-inline-start: 0;\n }\n\n @media (pointer: coarse) {\n inset-block-start: calc((${hitArea['finger-min']} - ${hitArea.compact}) / 2);\n }\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchIcon = styled(Icon)(({\n theme: {\n base: { 'hit-area': hitArea, palette },\n components: { input }\n }\n}) => {\n const iconColor = tryCatch(() => transparentize(0.3, palette['foreground-color']));\n\n return css`\n position: absolute;\n pointer-events: none;\n color: ${iconColor};\n z-index: 1;\n /* stylelint-disable-next-line unit-allowed-list */\n inset-block-start: calc((${input.height} - max(1.125rem, 14px)) / 2);\n\n @media (pointer: coarse) {\n /* stylelint-disable-next-line unit-allowed-list */\n inset-block-start: calc((${hitArea['finger-min']} - max(1.125rem, 14px)) / 2);\n }\n `;\n});\n\nStyledSearchIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)(({ theme }) => {\n return css`\n flex: 1;\n background-color: transparent;\n border-radius: inherit;\n height: 100%;\n min-height: 100%;\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 box-shadow: ${theme.base.shadow['focus-inset']};\n border-color: ${theme.components['form-control']['border-color']};\n\n :hover {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean; showSubmit: boolean }>(\n ({ hasFilters, showSubmit, theme }) => {\n const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;\n\n return css`\n position: relative;\n background: ${theme.components['form-control']['background-color']};\n min-height: ${theme.components.input.height};\n height: ${theme.components.input.height};\n border-radius: ${borderRadius};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n --button-padding-inner: ${theme.base.spacing};\n --button-padding-outer: calc(${theme.base.spacing} * 1.25);\n /* stylelint-disable-next-line unit-allowed-list */\n --icon-size: max(1.125rem, 14px);\n --min-button-size: ${theme.base['hit-area']['mouse-min']};\n --search-button-size: max(\n var(--button-padding-inner) + var(--icon-size) + var(--button-padding-outer) +\n ${theme.components.button['border-width']},\n var(--min-button-size)\n );\n\n @media (pointer: coarse) {\n --min-button-size: ${theme.base['hit-area']['finger-min']};\n }\n\n ${showSubmit\n ? css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: 0rem;\n --search-icon-end-size: 0rem;\n --search-button-end-size: var(--search-button-size);\n /* stylelint-enable length-zero-no-unit */\n `\n : css`\n ${hasFilters\n ? css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: 0rem;\n --search-icon-end-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-button-end-size: 0rem;\n /* stylelint-enable length-zero-no-unit */\n `\n : css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-icon-end-size: 0rem;\n --search-button-end-size: 0rem;\n /* stylelint-enable length-zero-no-unit */\n `}\n `}\n\n ${StyledSearchTextInput} {\n ${showSubmit && !hasFilters\n ? css`\n padding-inline-start: max(\n ${theme.components.input.padding},\n calc(${theme.base.spacing} * 1.5)\n );\n `\n : css`\n padding-inline-start: calc(\n ${theme.components.input.padding} + var(--search-icon-start-size)\n );\n `}\n padding-inline-end: calc(\n ${theme.components.input.padding} + var(--clear-button-size-plus-gap) +\n var(--search-icon-end-size)\n );\n --clear-button-size-plus-gap: calc(\n max(${theme.base['hit-area'].compact}, ${theme.base['hit-area']['compact-min']}) +\n ${theme.components.input.padding}\n );\n\n &[value=''] {\n /* stylelint-disable-next-line length-zero-no-unit */\n --clear-button-size-plus-gap: 0rem;\n }\n\n ${showSubmit &&\n css`\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n `}\n\n ${hasFilters &&\n css`\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n `}\n }\n\n ${StyledClearButton} {\n inset-inline-end: calc(\n ${theme.components.input.padding} +\n max(var(--search-icon-end-size), var(--search-button-end-size))\n );\n }\n\n ${StyledSearchIcon} {\n --inset: calc(\n max(var(--button-padding-outer), calc((var(--min-button-size) - var(--icon-size)) / 2)) +\n ${theme.components.button['border-width']}\n );\n\n ${hasFilters\n ? css`\n inset-inline-end: var(--inset);\n `\n : css`\n inset-inline-start: var(--inset);\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 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"]}
|
|
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 MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Input from '../Input';\nimport Icon from '../Icon';\n\nexport const StyledSearchButton = styled(Button)(({\n theme: {\n base: {\n spacing,\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-start: unset;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n border-start-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n padding-inline: ${spacing} calc(1.25 * ${spacing});\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchFiltersButton = styled(MenuButton)(({\n theme: {\n base: {\n spacing,\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-end: unset;\n border-start-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n padding-inline: ${spacing} 0;\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchFiltersButton.defaultProps = defaultThemeProp;\n\nexport const StyledClearButton = styled(Button)(({\n theme: {\n base: { 'hit-area': hitArea },\n components: { input }\n }\n}) => {\n return css`\n position: absolute;\n inset-block-start: calc((${input.height} - ${hitArea.compact}) / 2);\n\n && + ${StyledButton} {\n margin-inline-start: 0;\n }\n\n @media (pointer: coarse) {\n inset-block-start: calc((${hitArea['finger-min']} - ${hitArea.compact}) / 2);\n }\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchIcon = styled(Icon)(({\n theme: {\n base: { 'hit-area': hitArea, palette },\n components: { input }\n }\n}) => {\n const iconColor = tryCatch(() => transparentize(0.3, palette['foreground-color']));\n\n return css`\n position: absolute;\n pointer-events: none;\n color: ${iconColor};\n z-index: 1;\n /* stylelint-disable-next-line unit-allowed-list */\n inset-block-start: calc((${input.height} - max(1.125rem, 14px)) / 2);\n\n @media (pointer: coarse) {\n /* stylelint-disable-next-line unit-allowed-list */\n inset-block-start: calc((${hitArea['finger-min']} - max(1.125rem, 14px)) / 2);\n }\n `;\n});\n\nStyledSearchIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)(({ theme }) => {\n return css`\n flex: 1;\n background-color: transparent;\n border-radius: inherit;\n height: 100%;\n min-height: 100%;\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 box-shadow: ${theme.base.shadow['focus-inset']};\n border-color: ${theme.components['form-control']['border-color']};\n\n :hover {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean; showSubmit: boolean }>(\n ({ hasFilters, showSubmit, theme }) => {\n const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;\n\n return css`\n position: relative;\n background: ${theme.components['form-control']['background-color']};\n min-height: ${theme.components.input.height};\n height: ${theme.components.input.height};\n border-radius: ${borderRadius};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n --button-padding-inner: ${theme.base.spacing};\n --button-padding-outer: calc(${theme.base.spacing} * 1.25);\n /* stylelint-disable-next-line unit-allowed-list */\n --icon-size: max(1.125rem, 14px);\n --min-button-size: ${theme.base['hit-area']['mouse-min']};\n --search-button-size: max(\n var(--button-padding-inner) + var(--icon-size) + var(--button-padding-outer) +\n ${theme.components.button['border-width']},\n var(--min-button-size)\n );\n\n @media (pointer: coarse) {\n --min-button-size: ${theme.base['hit-area']['finger-min']};\n }\n\n ${showSubmit\n ? css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: 0rem;\n --search-icon-end-size: 0rem;\n --search-button-end-size: var(--search-button-size);\n /* stylelint-enable length-zero-no-unit */\n `\n : css`\n ${hasFilters\n ? css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: 0rem;\n --search-icon-end-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-button-end-size: 0rem;\n /* stylelint-enable length-zero-no-unit */\n `\n : css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-icon-end-size: 0rem;\n --search-button-end-size: 0rem;\n /* stylelint-enable length-zero-no-unit */\n `}\n `}\n ${StyledSearchTextInput} {\n ${showSubmit && !hasFilters\n ? css`\n padding-inline-start: max(\n ${theme.components.input.padding},\n calc(${theme.base.spacing} * 1.5)\n );\n `\n : css`\n padding-inline-start: calc(\n ${theme.components.input.padding} + var(--search-icon-start-size)\n );\n `}\n padding-inline-end: calc(\n ${theme.components.input.padding} + var(--clear-button-size-plus-gap) +\n var(--search-icon-end-size)\n );\n --clear-button-size-plus-gap: calc(\n max(${theme.base['hit-area'].compact}, ${theme.base['hit-area']['compact-min']}) +\n ${theme.components.input.padding}\n );\n\n &[value=''] {\n /* stylelint-disable-next-line length-zero-no-unit */\n --clear-button-size-plus-gap: 0rem;\n }\n\n ${showSubmit &&\n css`\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n `}\n\n ${hasFilters &&\n css`\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n `}\n }\n\n ${StyledClearButton} {\n inset-inline-end: calc(\n ${theme.components.input.padding} +\n max(var(--search-icon-end-size), var(--search-button-end-size))\n );\n }\n\n ${StyledSearchIcon} {\n --inset: calc(\n max(var(--button-padding-outer), calc((var(--min-button-size) - var(--icon-size)) / 2)) +\n ${theme.components.button['border-width']}\n );\n\n ${hasFilters\n ? css`\n inset-inline-end: var(--inset);\n `\n : css`\n inset-inline-start: var(--inset);\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 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/hooks/useI18n.d.ts
CHANGED
|
@@ -393,15 +393,15 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
393
393
|
collapse_utilities_panel: string;
|
|
394
394
|
primary_summary_fields: string;
|
|
395
395
|
summary_fields: string;
|
|
396
|
-
current_case: string;
|
|
397
396
|
case_type_icon: string;
|
|
398
397
|
case_type: string;
|
|
399
398
|
case_image: string;
|
|
400
399
|
case_tabs: string;
|
|
400
|
+
case_followed: string;
|
|
401
|
+
case_unfollowed: string;
|
|
401
402
|
update_available: string;
|
|
402
403
|
close_preview: string;
|
|
403
404
|
preview_error: string;
|
|
404
|
-
previewed_case: string;
|
|
405
405
|
case_preview_tabs: string;
|
|
406
406
|
agent_switcher: string;
|
|
407
407
|
message_pega_gen_ai_coach: string;
|
package/lib/i18n/default.d.ts
CHANGED
|
@@ -389,15 +389,15 @@ declare const _default: {
|
|
|
389
389
|
collapse_utilities_panel: string;
|
|
390
390
|
primary_summary_fields: string;
|
|
391
391
|
summary_fields: string;
|
|
392
|
-
current_case: string;
|
|
393
392
|
case_type_icon: string;
|
|
394
393
|
case_type: string;
|
|
395
394
|
case_image: string;
|
|
396
395
|
case_tabs: string;
|
|
396
|
+
case_followed: string;
|
|
397
|
+
case_unfollowed: string;
|
|
397
398
|
update_available: string;
|
|
398
399
|
close_preview: string;
|
|
399
400
|
preview_error: string;
|
|
400
|
-
previewed_case: string;
|
|
401
401
|
case_preview_tabs: string;
|
|
402
402
|
agent_switcher: string;
|
|
403
403
|
message_pega_gen_ai_coach: string;
|
package/lib/i18n/default.js
CHANGED
|
@@ -427,16 +427,16 @@ export default {
|
|
|
427
427
|
collapse_utilities_panel: 'Collapse utilities',
|
|
428
428
|
primary_summary_fields: 'Primary summary fields',
|
|
429
429
|
summary_fields: 'Summary fields',
|
|
430
|
-
current_case: 'Current case',
|
|
431
430
|
case_type_icon: '{0} - icon',
|
|
432
431
|
case_type: 'Case type',
|
|
433
432
|
case_image: 'Case image',
|
|
434
433
|
case_tabs: 'Tabs for current case',
|
|
434
|
+
case_followed: 'Followed {0}',
|
|
435
|
+
case_unfollowed: 'Unfollowed {0}',
|
|
435
436
|
update_available: 'Update available',
|
|
436
437
|
/* work:CasePreview */
|
|
437
438
|
close_preview: 'Close preview',
|
|
438
439
|
preview_error: 'Unable to load preview',
|
|
439
|
-
previewed_case: 'Previewed case',
|
|
440
440
|
case_preview_tabs: 'Tabs for previewed case',
|
|
441
441
|
/* work:GenAICoach */
|
|
442
442
|
agent_switcher: '{0}, agent switcher',
|