@pega/cosmos-react-core 3.0.0-dev.5.0 → 3.0.0-dev.6.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.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +1 -1
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/AppShell.styles.d.ts +1 -3
- package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.styles.js +7 -32
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/lib/components/SearchInput/SearchInput.d.ts +3 -10
- package/lib/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/lib/components/SearchInput/SearchInput.js +79 -104
- package/lib/components/SearchInput/SearchInput.js.map +1 -1
- package/lib/components/SearchInput/index.d.ts +1 -1
- package/lib/components/SearchInput/index.d.ts.map +1 -1
- package/lib/components/SearchInput/index.js +1 -1
- package/lib/components/SearchInput/index.js.map +1 -1
- package/lib/hooks/useEscape.d.ts +2 -2
- package/lib/hooks/useEscape.d.ts.map +1 -1
- package/lib/hooks/useEscape.js.map +1 -1
- package/lib/hooks/useEvent.d.ts +3 -3
- package/lib/hooks/useEvent.d.ts.map +1 -1
- package/lib/hooks/useEvent.js +5 -3
- package/lib/hooks/useEvent.js.map +1 -1
- package/lib/hooks/useFocusTrap.js +1 -1
- package/lib/hooks/useFocusTrap.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +0 -5
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +0 -5
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +0 -6
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +0 -10
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/utils/utils.d.ts +2 -2
- package/lib/utils/utils.d.ts.map +1 -1
- package/lib/utils/utils.js +2 -2
- package/lib/utils/utils.js.map +1 -1
- package/package.json +1 -1
- package/lib/components/SearchInput/SearchInput.styles.d.ts +0 -13
- package/lib/components/SearchInput/SearchInput.styles.d.ts.map +0 -1
- package/lib/components/SearchInput/SearchInput.styles.js +0 -122
- package/lib/components/SearchInput/SearchInput.styles.js.map +0 -1
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { FunctionComponent } from 'react';
|
|
2
2
|
import { ForwardProps, NoChildrenProp } from '../../types';
|
|
3
3
|
import { FormControlProps } from '../FormControl';
|
|
4
|
-
import { MenuItemProps } from '../Menu';
|
|
5
|
-
export declare type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;
|
|
6
|
-
export declare type RecentSearch = Pick<MenuItemProps, 'primary' | 'href' | 'onClick'>;
|
|
7
4
|
export interface SearchInputProps extends NoChildrenProp {
|
|
8
5
|
/**
|
|
9
6
|
* Placeholder text. The default value is a locale translation of 'Search…'
|
|
@@ -26,16 +23,12 @@ export interface SearchInputProps extends NoChildrenProp {
|
|
|
26
23
|
* 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.
|
|
27
24
|
*/
|
|
28
25
|
onSearchSubmit?: (value: string) => void;
|
|
29
|
-
defaultFilter?: string;
|
|
30
|
-
filters?: string[];
|
|
31
|
-
onFilterChange?: (value: string) => void;
|
|
32
|
-
searchResults?: SearchResult[];
|
|
33
|
-
recentSearches?: RecentSearch[];
|
|
34
|
-
loading?: boolean;
|
|
35
|
-
advancedSearchHref?: string;
|
|
36
26
|
/** Aria label for search input, used by screen readers. */
|
|
37
27
|
searchInputAriaLabel?: string;
|
|
38
28
|
}
|
|
29
|
+
export declare const StyledSearchIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
30
|
+
export declare const StyledSearchTextInput: import("styled-components").StyledComponent<import("react").FC<import("../Input").InputProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
31
|
+
export declare const StyledSearchInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
39
32
|
declare const SearchInput: FunctionComponent<SearchInputProps & ForwardProps>;
|
|
40
33
|
export default SearchInput;
|
|
41
34
|
//# sourceMappingURL=SearchInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,
|
|
1
|
+
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAOlD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,yGAsB3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,oKA0BhC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAgB5B,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwEnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,132 +1,107 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
2
|
-
import { forwardRef, useState, useCallback, useEffect
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useState, useCallback, useEffect } from 'react';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
4
|
+
import { transparentize } from 'polished';
|
|
5
|
+
import { defaultThemeProp } from '../../theme';
|
|
6
|
+
import Input from '../Input';
|
|
3
7
|
import Icon, { registerIcon } from '../Icon';
|
|
4
8
|
import * as searchIcon from '../Icon/icons/search.icon';
|
|
5
|
-
import { useAfterInitialEffect, useConsolidatedRef, useI18n
|
|
9
|
+
import { useAfterInitialEffect, useConsolidatedRef, useI18n } from '../../hooks';
|
|
6
10
|
import Flex from '../Flex';
|
|
7
|
-
import
|
|
8
|
-
import { sameWidth } from '../Popover/modifiers';
|
|
9
|
-
import Menu from '../Menu';
|
|
10
|
-
import Link from '../Link';
|
|
11
|
-
import Text from '../Text';
|
|
12
|
-
import { StyledCancelButton, StyledSearchButton, StyledSearchFilterText, StyledSearchInput, StyledSearchMenu, StyledSearchTextInput } from './SearchInput.styles';
|
|
11
|
+
import { tryCatch } from '../../utils';
|
|
13
12
|
registerIcon(searchIcon);
|
|
13
|
+
export const StyledSearchIcon = styled.div(props => {
|
|
14
|
+
const { theme: { base, components: { 'search-input': searchInput, 'form-control': formControl } } } = props;
|
|
15
|
+
const iconColor = tryCatch(() => transparentize(0.75, base.palette['foreground-color']));
|
|
16
|
+
return css `
|
|
17
|
+
position: absolute;
|
|
18
|
+
z-index: 1;
|
|
19
|
+
inset-inline-start: 0.0625rem;
|
|
20
|
+
top: 0.0625rem;
|
|
21
|
+
width: calc(${base['hit-area']['mouse-min']} - 0.125rem);
|
|
22
|
+
height: calc(${base['hit-area']['mouse-min']} - 0.125rem);
|
|
23
|
+
border-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});
|
|
24
|
+
padding: 0;
|
|
25
|
+
background: ${formControl['background-color']};
|
|
26
|
+
color: ${iconColor};
|
|
27
|
+
cursor: text;
|
|
28
|
+
line-height: 1;
|
|
29
|
+
`;
|
|
30
|
+
});
|
|
31
|
+
StyledSearchIcon.defaultProps = defaultThemeProp;
|
|
32
|
+
export const StyledSearchTextInput = styled(Input)(props => {
|
|
33
|
+
const { theme } = props;
|
|
34
|
+
const comp = theme.components['search-input'];
|
|
35
|
+
return css `
|
|
36
|
+
position: relative;
|
|
37
|
+
width: 100%;
|
|
38
|
+
height: ${theme.base['hit-area']['mouse-min']};
|
|
39
|
+
min-height: ${theme.base['hit-area']['mouse-min']};
|
|
40
|
+
padding-inline-start: 0;
|
|
41
|
+
padding-inline-end: calc(${theme.base['hit-area']['mouse-min']} - 0.125rem);
|
|
42
|
+
text-indent: calc(${theme.base['hit-area']['mouse-min']} - 0.125rem);
|
|
43
|
+
border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});
|
|
44
|
+
&::-ms-clear {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
|
47
|
+
&::-webkit-search-cancel-button {
|
|
48
|
+
display: none;
|
|
49
|
+
}
|
|
50
|
+
::-webkit-search-decoration {
|
|
51
|
+
-webkit-appearance: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:focus:not([disabled]) {
|
|
55
|
+
box-shadow: none;
|
|
56
|
+
}
|
|
57
|
+
`;
|
|
58
|
+
});
|
|
59
|
+
StyledSearchTextInput.defaultProps = defaultThemeProp;
|
|
60
|
+
export const StyledSearchInput = styled.div(({ theme: { base, components } }) => {
|
|
61
|
+
const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));
|
|
62
|
+
return css `
|
|
63
|
+
position: relative;
|
|
64
|
+
height: ${base['hit-area']['mouse-min']};
|
|
65
|
+
border-radius: calc(${components['search-input']['border-radius']} * ${base['border-radius']});
|
|
66
|
+
|
|
67
|
+
&:focus-within {
|
|
68
|
+
box-shadow: ${base.shadow.focus};
|
|
69
|
+
|
|
70
|
+
${StyledSearchIcon} {
|
|
71
|
+
color: ${iconColor};
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
`;
|
|
75
|
+
});
|
|
76
|
+
StyledSearchInput.defaultProps = defaultThemeProp;
|
|
14
77
|
const SearchInput = forwardRef((props, ref) => {
|
|
15
78
|
const t = useI18n();
|
|
16
|
-
const { defaultValue, value,
|
|
79
|
+
const { defaultValue, value, placeholder = t('search_placeholder_default'), onSearchChange, onSearchSubmit, searchInputAriaLabel, ...restProps } = props;
|
|
17
80
|
const [searchInputValue, setValue] = useState(value || defaultValue || '');
|
|
18
|
-
const [searchMenuOpen, setSearchMenuOpen] = useState(false);
|
|
19
|
-
const [filterMenuOpen, setFilterMenuOpen] = useState(false);
|
|
20
81
|
const innerRef = useConsolidatedRef(ref);
|
|
21
|
-
const createDefaultFilters = useCallback(() => {
|
|
22
|
-
if (filters && filters.length) {
|
|
23
|
-
return [t('all'), ...filters];
|
|
24
|
-
}
|
|
25
|
-
return [];
|
|
26
|
-
}, [filters]);
|
|
27
|
-
const filterRef = useRef(null);
|
|
28
|
-
const [selectedFilter, setSelectedFilter] = useState(() => defaultFilter || '');
|
|
29
|
-
const [completeFilters, setCompleteFilters] = useState(createDefaultFilters);
|
|
30
|
-
const hasFilters = !!completeFilters.length;
|
|
31
|
-
const [searchResultItems, setSearchResultItems] = useState(undefined);
|
|
32
|
-
const [downPressed, setDownPressed] = useState(false);
|
|
33
|
-
const hasSearchResults = !!(searchResults && searchResults.length);
|
|
34
|
-
const hasRecentSearches = !!(recentSearches && recentSearches.length);
|
|
35
|
-
useOuterEvent('click', [filterRef], () => {
|
|
36
|
-
setFilterMenuOpen(false);
|
|
37
|
-
});
|
|
38
82
|
useEffect(() => {
|
|
39
83
|
if (typeof value === 'string' && value !== searchInputValue) {
|
|
40
84
|
setValue(value);
|
|
41
85
|
}
|
|
42
86
|
}, [value]);
|
|
43
|
-
useEffect(() => {
|
|
44
|
-
setDownPressed(false);
|
|
45
|
-
}, [searchInputValue]);
|
|
46
|
-
useEffect(() => {
|
|
47
|
-
setCompleteFilters(createDefaultFilters());
|
|
48
|
-
}, [filters]);
|
|
49
87
|
const onChange = useCallback((e) => {
|
|
50
88
|
setValue(e.target.value);
|
|
51
89
|
}, [searchInputValue]);
|
|
52
|
-
const onSubmit = () => {
|
|
90
|
+
const onSubmit = useCallback(() => {
|
|
53
91
|
onSearchSubmit?.(searchInputValue);
|
|
54
|
-
};
|
|
92
|
+
}, [searchInputValue]);
|
|
55
93
|
const onKeyDown = useCallback((e) => {
|
|
56
94
|
if (e.key === 'Enter') {
|
|
57
95
|
onSubmit();
|
|
58
96
|
}
|
|
59
|
-
|
|
60
|
-
setDownPressed(true);
|
|
61
|
-
}
|
|
62
|
-
}, []);
|
|
97
|
+
}, [searchInputValue]);
|
|
63
98
|
useAfterInitialEffect(() => {
|
|
64
99
|
if (onSearchChange)
|
|
65
100
|
onSearchChange(searchInputValue);
|
|
66
101
|
}, [searchInputValue]);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
items = searchResults.map(res => ({
|
|
71
|
-
id: res.id,
|
|
72
|
-
primary: res.primary,
|
|
73
|
-
secondary: res.secondary,
|
|
74
|
-
href: res.href,
|
|
75
|
-
onClick: res.onClick
|
|
76
|
-
}));
|
|
77
|
-
}
|
|
78
|
-
else if (hasRecentSearches && !searchInputValue) {
|
|
79
|
-
items = recentSearches.map(recentSearch => ({
|
|
80
|
-
id: recentSearch.primary,
|
|
81
|
-
primary: recentSearch.primary,
|
|
82
|
-
href: recentSearch.href,
|
|
83
|
-
onClick: recentSearch.onClick
|
|
84
|
-
}));
|
|
85
|
-
}
|
|
86
|
-
else if (!searchResults && (!recentSearches || recentSearches.length === 0)) {
|
|
87
|
-
items = undefined;
|
|
88
|
-
}
|
|
89
|
-
setSearchResultItems(items);
|
|
90
|
-
}, [searchResults, recentSearches, searchMenuOpen]);
|
|
91
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: true, as: StyledSearchInput, hasFilters: hasFilters, children: [_jsxs(Flex, { as: StyledSearchButton, ref: filterRef, forwardedAs: filters && filters.length ? undefined : 'div', container: {
|
|
92
|
-
justify: 'center',
|
|
93
|
-
alignItems: 'center',
|
|
94
|
-
gap: selectedFilter ? 0.5 : undefined
|
|
95
|
-
}, onClick: () => {
|
|
96
|
-
if (hasFilters) {
|
|
97
|
-
setFilterMenuOpen(true);
|
|
98
|
-
}
|
|
99
|
-
else {
|
|
100
|
-
innerRef.current?.focus();
|
|
101
|
-
}
|
|
102
|
-
}, decoupled: hasFilters, "aria-label": t('select_search_filter'), children: [_jsx(Icon, { name: 'search' }), selectedFilter && _jsx(StyledSearchFilterText, { children: selectedFilter }), hasFilters && _jsx(Icon, { name: 'arrow-micro-down' })] }), _jsx(StyledSearchTextInput, { ref: innerRef, type: 'search', "aria-label": searchInputAriaLabel, placeholder: placeholder, ...restProps, value: searchInputValue, onChange: onChange, onKeyDown: onKeyDown, onFocus: () => setSearchMenuOpen(true), decoupled: hasFilters, onBlur: () => {
|
|
103
|
-
setDownPressed(false);
|
|
104
|
-
setSearchMenuOpen(false);
|
|
105
|
-
} }), searchInputValue && (_jsx(StyledCancelButton, { icon: true, onClick: () => {
|
|
106
|
-
setValue('');
|
|
107
|
-
}, variant: 'text', tabIndex: 0, "aria-label": t('clear_search'), children: _jsx(Icon, { name: 'times' }) }))] }), (searchResultItems || loading) && (_jsx(Popover, { target: innerRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [
|
|
108
|
-
{
|
|
109
|
-
name: 'flip',
|
|
110
|
-
options: {
|
|
111
|
-
fallbackPlacements: ['top-start']
|
|
112
|
-
}
|
|
113
|
-
},
|
|
114
|
-
sameWidth
|
|
115
|
-
], children: _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: advancedSearchHref ? (_jsx(Link, { href: advancedSearchHref, children: t('advanced_search') })) : undefined, accent: hasSearchResults ? new RegExp(value || '', 'g') : undefined, focusControlEl: (downPressed && innerRef.current) || undefined, focusElOnClose: true }) })), hasFilters ? (_jsx(Popover, { target: filterRef.current, show: filterMenuOpen, placement: 'bottom-start', modifiers: [
|
|
116
|
-
{
|
|
117
|
-
name: 'flip',
|
|
118
|
-
options: {
|
|
119
|
-
fallbackPlacements: ['top-start']
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
], children: _jsx(Menu, { mode: 'single-select', items: completeFilters.map(filter => ({
|
|
123
|
-
primary: filter,
|
|
124
|
-
id: filter,
|
|
125
|
-
selected: filter === 'All' ? selectedFilter === '' : selectedFilter === filter
|
|
126
|
-
})), onItemClick: id => {
|
|
127
|
-
setSelectedFilter(id === 'All' ? '' : id);
|
|
128
|
-
onFilterChange?.(id);
|
|
129
|
-
}, focusControlEl: filterRef.current || undefined }) })) : undefined] }));
|
|
102
|
+
return (_jsxs(Flex, { container: true, as: StyledSearchInput, children: [_jsx(StyledSearchTextInput, { ref: innerRef, type: 'search', "aria-label": searchInputAriaLabel, placeholder: placeholder, ...restProps, value: searchInputValue, onChange: onChange, onKeyDown: onKeyDown }), _jsx(Flex, { as: StyledSearchIcon, container: { justify: 'center', alignItems: 'center' }, onClick: () => {
|
|
103
|
+
innerRef.current?.focus();
|
|
104
|
+
}, children: _jsx(Icon, { name: 'search' }) })] }));
|
|
130
105
|
});
|
|
131
106
|
export default SearchInput;
|
|
132
107
|
//# sourceMappingURL=SearchInput.js.map
|
|
@@ -1 +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} from 'react';\n\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport { FormControlProps } from '../FormControl';\nimport { useAfterInitialEffect, useConsolidatedRef, useI18n, useOuterEvent } from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu, { MenuItemProps } from '../Menu';\nimport Link from '../Link';\nimport Text from '../Text';\n\nimport {\n StyledCancelButton,\n StyledSearchButton,\n StyledSearchFilterText,\n StyledSearchInput,\n StyledSearchMenu,\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, '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 /**\n * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n */\n defaultValue?: FormControlProps['defaultValue'];\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 defaultFilter?: string;\n filters?: string[];\n onFilterChange?: (value: string) => void;\n searchResults?: SearchResult[];\n recentSearches?: RecentSearch[];\n loading?: boolean;\n advancedSearchHref?: string;\n /** Aria label for search input, used by screen readers. */\n searchInputAriaLabel?: string;\n}\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n const t = useI18n();\n\n const {\n defaultValue,\n value,\n defaultFilter,\n filters,\n onFilterChange,\n searchResults,\n recentSearches,\n loading,\n advancedSearchHref,\n placeholder = t('search_placeholder_default'),\n onSearchChange,\n onSearchSubmit,\n searchInputAriaLabel,\n ...restProps\n } = props;\n\n const [searchInputValue, setValue] = useState<string>(value || defaultValue || '');\n const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n const [filterMenuOpen, setFilterMenuOpen] = useState(false);\n\n const innerRef = useConsolidatedRef(ref);\n\n const createDefaultFilters = useCallback(() => {\n if (filters && filters.length) {\n return [t('all'), ...filters];\n }\n return [];\n }, [filters]);\n\n const filterRef = useRef<HTMLButtonElement | HTMLDivElement>(null);\n const [selectedFilter, setSelectedFilter] = useState(() => defaultFilter || '');\n const [completeFilters, setCompleteFilters] = useState(createDefaultFilters);\n const hasFilters = !!completeFilters.length;\n\n const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] | undefined>(\n undefined\n );\n const [downPressed, setDownPressed] = useState(false);\n const hasSearchResults = !!(searchResults && searchResults.length);\n const hasRecentSearches = !!(recentSearches && recentSearches.length);\n\n useOuterEvent('click', [filterRef], () => {\n setFilterMenuOpen(false);\n });\n\n useEffect(() => {\n if (typeof value === 'string' && value !== searchInputValue) {\n setValue(value);\n }\n }, [value]);\n\n useEffect(() => {\n setDownPressed(false);\n }, [searchInputValue]);\n\n useEffect(() => {\n setCompleteFilters(createDefaultFilters());\n }, [filters]);\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setValue(e.target.value);\n },\n [searchInputValue]\n );\n\n const onSubmit = () => {\n onSearchSubmit?.(searchInputValue);\n };\n\n const onKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onSubmit();\n }\n if (e.key === 'ArrowDown') {\n setDownPressed(true);\n }\n }, []);\n\n useAfterInitialEffect(() => {\n if (onSearchChange) onSearchChange(searchInputValue);\n }, [searchInputValue]);\n\n useEffect(() => {\n let items: MenuItemProps[] | undefined = [];\n if (hasSearchResults && searchInputValue) {\n items = searchResults.map(res => ({\n id: res.id,\n primary: res.primary,\n secondary: res.secondary,\n href: res.href,\n onClick: res.onClick\n }));\n } else if (hasRecentSearches && !searchInputValue) {\n items = recentSearches.map(recentSearch => ({\n id: recentSearch.primary,\n primary: recentSearch.primary,\n href: recentSearch.href,\n onClick: recentSearch.onClick\n }));\n } else if (!searchResults && (!recentSearches || recentSearches.length === 0)) {\n items = undefined;\n }\n setSearchResultItems(items);\n }, [searchResults, recentSearches, searchMenuOpen]);\n\n return (\n <>\n <Flex container as={StyledSearchInput} hasFilters={hasFilters}>\n <Flex\n as={StyledSearchButton}\n ref={filterRef}\n forwardedAs={filters && filters.length ? undefined : 'div'}\n container={{\n justify: 'center',\n alignItems: 'center',\n gap: selectedFilter ? 0.5 : undefined\n }}\n onClick={() => {\n if (hasFilters) {\n setFilterMenuOpen(true);\n } else {\n innerRef.current?.focus();\n }\n }}\n decoupled={hasFilters}\n aria-label={t('select_search_filter')}\n >\n <Icon name='search' />\n {selectedFilter && <StyledSearchFilterText>{selectedFilter}</StyledSearchFilterText>}\n {hasFilters && <Icon name='arrow-micro-down' />}\n </Flex>\n <StyledSearchTextInput\n ref={innerRef}\n type='search'\n aria-label={searchInputAriaLabel}\n placeholder={placeholder}\n {...restProps}\n value={searchInputValue}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onFocus={() => setSearchMenuOpen(true)}\n decoupled={hasFilters}\n onBlur={() => {\n setDownPressed(false);\n setSearchMenuOpen(false);\n }}\n />\n {searchInputValue && (\n <StyledCancelButton\n icon\n onClick={() => {\n setValue('');\n }}\n variant='text'\n tabIndex={0}\n aria-label={t('clear_search')}\n >\n <Icon name='times' />\n </StyledCancelButton>\n )}\n </Flex>\n {(searchResultItems || loading) && (\n <Popover\n target={innerRef.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 >\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 advancedSearchHref ? (\n <Link href={advancedSearchHref}>{t('advanced_search')}</Link>\n ) : undefined\n }\n accent={hasSearchResults ? new RegExp(value || '', 'g') : undefined}\n focusControlEl={(downPressed && innerRef.current) || undefined}\n focusElOnClose\n />\n </Popover>\n )}\n {hasFilters ? (\n <Popover\n target={filterRef.current}\n show={filterMenuOpen}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n }\n ]}\n >\n <Menu\n mode='single-select'\n items={completeFilters.map(filter => ({\n primary: filter,\n id: filter,\n selected: filter === 'All' ? selectedFilter === '' : selectedFilter === filter\n }))}\n onItemClick={id => {\n setSelectedFilter(id === 'All' ? '' : id);\n onFilterChange?.(id);\n }}\n focusControlEl={filterRef.current || undefined}\n />\n </Popover>\n ) : undefined}\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 {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n forwardRef,\n useState,\n ChangeEvent,\n useCallback,\n KeyboardEvent,\n useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Input from '../Input';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport { FormControlProps } from '../FormControl';\nimport { useAfterInitialEffect, useConsolidatedRef, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(searchIcon);\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 /**\n * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n */\n defaultValue?: FormControlProps['defaultValue'];\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 /** Aria label for search input, used by screen readers. */\n searchInputAriaLabel?: string;\n}\n\nexport const StyledSearchIcon = styled.div(props => {\n const {\n theme: {\n base,\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n } = props;\n const iconColor = tryCatch(() => transparentize(0.75, base.palette['foreground-color']));\n return css`\n position: absolute;\n z-index: 1;\n inset-inline-start: 0.0625rem;\n top: 0.0625rem;\n width: calc(${base['hit-area']['mouse-min']} - 0.125rem);\n height: calc(${base['hit-area']['mouse-min']} - 0.125rem);\n border-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n padding: 0;\n background: ${formControl['background-color']};\n color: ${iconColor};\n cursor: text;\n line-height: 1;\n `;\n});\n\nStyledSearchIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)(props => {\n const { theme } = props;\n const comp = theme.components['search-input'];\n return css`\n position: relative;\n width: 100%;\n height: ${theme.base['hit-area']['mouse-min']};\n min-height: ${theme.base['hit-area']['mouse-min']};\n padding-inline-start: 0;\n padding-inline-end: calc(${theme.base['hit-area']['mouse-min']} - 0.125rem);\n text-indent: calc(${theme.base['hit-area']['mouse-min']} - 0.125rem);\n border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});\n &::-ms-clear {\n display: none;\n }\n &::-webkit-search-cancel-button {\n display: none;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &:focus:not([disabled]) {\n box-shadow: none;\n }\n `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div(({ theme: { base, components } }) => {\n const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n\n return css`\n position: relative;\n height: ${base['hit-area']['mouse-min']};\n border-radius: calc(${components['search-input']['border-radius']} * ${base['border-radius']});\n\n &:focus-within {\n box-shadow: ${base.shadow.focus};\n\n ${StyledSearchIcon} {\n color: ${iconColor};\n }\n }\n `;\n});\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n const t = useI18n();\n\n const {\n defaultValue,\n value,\n placeholder = t('search_placeholder_default'),\n onSearchChange,\n onSearchSubmit,\n searchInputAriaLabel,\n ...restProps\n } = props;\n\n const [searchInputValue, setValue] = useState<string>(value || defaultValue || '');\n\n const innerRef = useConsolidatedRef(ref);\n\n useEffect(() => {\n if (typeof value === 'string' && value !== searchInputValue) {\n setValue(value);\n }\n }, [value]);\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setValue(e.target.value);\n },\n [searchInputValue]\n );\n\n const onSubmit = useCallback(() => {\n onSearchSubmit?.(searchInputValue);\n }, [searchInputValue]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onSubmit();\n }\n },\n [searchInputValue]\n );\n\n useAfterInitialEffect(() => {\n if (onSearchChange) onSearchChange(searchInputValue);\n }, [searchInputValue]);\n\n return (\n <Flex container as={StyledSearchInput}>\n <StyledSearchTextInput\n ref={innerRef}\n type='search'\n aria-label={searchInputAriaLabel}\n placeholder={placeholder}\n {...restProps}\n value={searchInputValue}\n onChange={onChange}\n onKeyDown={onKeyDown}\n />\n <Flex\n as={StyledSearchIcon}\n container={{ justify: 'center', alignItems: 'center' }}\n onClick={() => {\n innerRef.current?.focus();\n }}\n >\n <Icon name='search' />\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default SearchInput;\n"]}
|
|
@@ -1 +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,
|
|
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,eAAe,CAAC"}
|
|
@@ -1 +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,
|
|
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,eAAe,CAAC","sourcesContent":["export { default } from './SearchInput';\nexport { SearchInputProps } from './SearchInput';\nexport { StyledSearchInput } from './SearchInput';\n"]}
|
package/lib/hooks/useEscape.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { DependencyList } from 'react';
|
|
1
|
+
import { DependencyList, RefObject } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* @example useEscape((event) => { do something });
|
|
4
4
|
* @param cb The function that should be executed on keydown keyevent.
|
|
5
5
|
* @param target To which esc event to be attached - Defaults to document
|
|
6
6
|
* @param dependencies List of dependencies
|
|
7
7
|
*/
|
|
8
|
-
declare const useEscape: (cb: (e: KeyboardEvent) => void, target?: HTMLElement | Document | null, dependencies?: DependencyList) => void;
|
|
8
|
+
declare const useEscape: (cb: (e: KeyboardEvent) => void, target?: HTMLElement | RefObject<HTMLElement> | Document | null, dependencies?: DependencyList) => void;
|
|
9
9
|
export default useEscape;
|
|
10
10
|
//# sourceMappingURL=useEscape.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEscape.d.ts","sourceRoot":"","sources":["../../src/hooks/useEscape.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAe,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useEscape.d.ts","sourceRoot":"","sources":["../../src/hooks/useEscape.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAI/D;;;;;GAKG;AAEH,QAAA,MAAM,SAAS,WACL,aAAa,KAAK,IAAI,WACtB,WAAW,GAAG,UAAU,WAAW,CAAC,GAAG,QAAQ,GAAG,IAAI,wCAW/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEscape.js","sourceRoot":"","sources":["../../src/hooks/useEscape.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useEscape.js","sourceRoot":"","sources":["../../src/hooks/useEscape.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,WAAW,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AAEH,MAAM,SAAS,GAAG,CAChB,EAA8B,EAC9B,SAAiE,QAAQ,EACzE,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,EAAE,EAAE,GAAG,YAAY,CAAC,CACtB,CAAC;IAEF,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { DependencyList, RefObject, useCallback } from 'react';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useEscape((event) => { do something });\n * @param cb The function that should be executed on keydown keyevent.\n * @param target To which esc event to be attached - Defaults to document\n * @param dependencies List of dependencies\n */\n\nconst useEscape = (\n cb: (e: KeyboardEvent) => void,\n target: HTMLElement | RefObject<HTMLElement> | Document | null = document,\n dependencies: DependencyList = []\n) => {\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') cb(e);\n },\n [cb, ...dependencies]\n );\n\n useEvent('keydown', onKeydown, { target });\n};\n\nexport default useEscape;\n"]}
|
package/lib/hooks/useEvent.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DependencyList } from 'react';
|
|
1
|
+
import { DependencyList, RefObject } from 'react';
|
|
2
2
|
declare type EventMapForTarget<Target extends EventTarget> = Target extends HTMLElement ? HTMLElementEventMap : Target extends SVGElement ? SVGElementEventMap : Target extends Document ? DocumentEventMap : Target extends Window ? WindowEventMap : {
|
|
3
3
|
[eventType: string]: Event;
|
|
4
4
|
};
|
|
@@ -14,12 +14,12 @@ declare function useEvent<Target extends Document, EventName extends EventNamesF
|
|
|
14
14
|
dependencies: DependencyList;
|
|
15
15
|
}): void;
|
|
16
16
|
declare function useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(eventName: EventName, cb: (e: EventMapForTarget<Target>[EventName]) => void, opts: {
|
|
17
|
-
target: Target | null;
|
|
17
|
+
target: Target | RefObject<Target> | null;
|
|
18
18
|
eventOptions?: AddEventListenerOptions | boolean;
|
|
19
19
|
dependencies?: DependencyList;
|
|
20
20
|
}): void;
|
|
21
21
|
declare function useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target | Document>>(eventName: EventName, cb: (e: EventMapForTarget<Target | Document>[EventName]) => void, opts: {
|
|
22
|
-
target?: Target | null | undefined;
|
|
22
|
+
target?: Target | RefObject<Target> | null | undefined;
|
|
23
23
|
eventOptions?: AddEventListenerOptions | boolean;
|
|
24
24
|
dependencies?: DependencyList;
|
|
25
25
|
}): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEvent.d.ts","sourceRoot":"","sources":["../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAa,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useEvent.d.ts","sourceRoot":"","sources":["../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAK7D,aAAK,iBAAiB,CAAC,MAAM,SAAS,WAAW,IAAI,MAAM,SAAS,WAAW,GAC3E,mBAAmB,GACnB,MAAM,SAAS,UAAU,GACzB,kBAAkB,GAClB,MAAM,SAAS,QAAQ,GACvB,gBAAgB,GAChB,MAAM,SAAS,MAAM,GACrB,cAAc,GACd;IACE,CAAC,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B,CAAC;AACN,aAAK,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,MAAM,iBAAiB,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;AAEtF;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,MAAM,SAAS,QAAQ,EAAE,SAAS,SAAS,mBAAmB,CAAC,MAAM,CAAC,EACtF,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EACrD,IAAI,CAAC,EAAE;IACL,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,EAAE,cAAc,CAAC;CAC9B,GACA,IAAI,CAAC;AAER,iBAAS,QAAQ,CAAC,MAAM,SAAS,WAAW,EAAE,SAAS,SAAS,mBAAmB,CAAC,MAAM,CAAC,EACzF,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EACrD,IAAI,EAAE;IACJ,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B,GACA,IAAI,CAAC;AAER,iBAAS,QAAQ,CACf,MAAM,SAAS,WAAW,EAC1B,SAAS,SAAS,mBAAmB,CAAC,MAAM,GAAG,QAAQ,CAAC,EAExD,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EAChE,IAAI,EAAE;IACJ,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B,GACA,IAAI,CAAC;AA2BR,eAAe,QAAQ,CAAC"}
|
package/lib/hooks/useEvent.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
|
+
import { normalizeElements } from '../utils';
|
|
2
3
|
function useEvent(eventName, cb, { target = document, eventOptions, dependencies = [] } = {}) {
|
|
3
4
|
useEffect(() => {
|
|
4
|
-
|
|
5
|
+
const [element] = normalizeElements([target]);
|
|
6
|
+
if (!element)
|
|
5
7
|
return;
|
|
6
|
-
|
|
8
|
+
element.addEventListener(eventName, cb, eventOptions);
|
|
7
9
|
return () => {
|
|
8
|
-
|
|
10
|
+
element.removeEventListener(eventName, cb, eventOptions);
|
|
9
11
|
};
|
|
10
12
|
}, [eventName, target, cb, eventOptions, ...dependencies]);
|
|
11
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEvent.js","sourceRoot":"","sources":["../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useEvent.js","sourceRoot":"","sources":["../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAsD7C,SAAS,QAAQ,CACf,SAAoB,EACpB,EAAqD,EACrD,EACE,MAAM,GAAG,QAA6B,EACtC,YAAY,EACZ,YAAY,GAAG,EAAE,KAKf,EAAE;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,OAAO,CAAC,GAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;QAC9C,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,EAAmB,EAAE,YAAY,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,EAAmB,EAAE,YAAY,CAAC,CAAC;QAC5E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC;AAC7D,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { DependencyList, RefObject, useEffect } from 'react';\n\nimport { normalizeElements } from '../utils';\n\n// Based on https://github.com/microsoft/TypeScript/issues/33047#issuecomment-704005614\ntype EventMapForTarget<Target extends EventTarget> = Target extends HTMLElement\n ? HTMLElementEventMap\n : Target extends SVGElement\n ? SVGElementEventMap\n : Target extends Document\n ? DocumentEventMap\n : Target extends Window\n ? WindowEventMap\n : {\n [eventType: string]: Event;\n };\ntype EventNamesForTarget<T extends EventTarget> = keyof EventMapForTarget<T> & string;\n\n/**\n * @example useEvent('keydown', (event) => { do something });\n * @param cb The function that should be executed on keydown keyevent.\n * @param options\n */\nfunction useEvent<Target extends Document, EventName extends EventNamesForTarget<Target>>(\n eventName: EventName,\n cb: (e: EventMapForTarget<Target>[EventName]) => void,\n opts?: {\n target?: undefined;\n eventOptions?: AddEventListenerOptions | boolean;\n dependencies: DependencyList;\n }\n): void;\n\nfunction useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(\n eventName: EventName,\n cb: (e: EventMapForTarget<Target>[EventName]) => void,\n opts: {\n target: Target | RefObject<Target> | null;\n eventOptions?: AddEventListenerOptions | boolean;\n dependencies?: DependencyList;\n }\n): void;\n\nfunction useEvent<\n Target extends EventTarget,\n EventName extends EventNamesForTarget<Target | Document>\n>(\n eventName: EventName,\n cb: (e: EventMapForTarget<Target | Document>[EventName]) => void,\n opts: {\n target?: Target | RefObject<Target> | null | undefined;\n eventOptions?: AddEventListenerOptions | boolean;\n dependencies?: DependencyList;\n }\n): void;\n\nfunction useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(\n eventName: EventName,\n cb: (e: EventMapForTarget<Target>[EventName]) => void,\n {\n target = document as unknown as Target,\n eventOptions,\n dependencies = []\n }: {\n target?: Target | RefObject<Target> | null;\n eventOptions?: AddEventListenerOptions | boolean;\n dependencies?: DependencyList;\n } = {}\n) {\n useEffect(() => {\n const [element] = normalizeElements([target]);\n if (!element) return;\n\n element.addEventListener(eventName, cb as EventListener, eventOptions);\n\n return () => {\n element.removeEventListener(eventName, cb as EventListener, eventOptions);\n };\n }, [eventName, target, cb, eventOptions, ...dependencies]);\n}\n\nexport default useEvent;\n"]}
|
|
@@ -24,7 +24,7 @@ const useFocusTrap = (elementRef, attachToDocument = true, dependencies = []) =>
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
}, dependencies);
|
|
27
|
-
useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef
|
|
27
|
+
useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });
|
|
28
28
|
};
|
|
29
29
|
export default useFocusTrap;
|
|
30
30
|
//# sourceMappingURL=useFocusTrap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap.js","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAkB,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CACnB,UAAkC,EAClC,mBAA4B,IAAI,EAChC,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE;QACjD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACnB,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;YAC7C,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC;YAEjF,IACE,CAAC,CAAC,CAAC,QAAQ;gBACX,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,EAC3F;gBACA,cAAc,EAAE,KAAK,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM,IACL,CAAC,CAAC,QAAQ;gBACV,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,cAAc,CAAC,EAC5F;gBACA,aAAa,EAAE,KAAK,EAAE,CAAC;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;SACF;IACH,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"useFocusTrap.js","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAkB,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CACnB,UAAkC,EAClC,mBAA4B,IAAI,EAChC,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE;QACjD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACnB,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;YAC7C,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC;YAEjF,IACE,CAAC,CAAC,CAAC,QAAQ;gBACX,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,EAC3F;gBACA,cAAc,EAAE,KAAK,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM,IACL,CAAC,CAAC,QAAQ;gBACV,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,cAAc,CAAC,EAC5F;gBACA,aAAa,EAAE,KAAK,EAAE,CAAC;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;SACF;IACH,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC;AACxF,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { RefObject, useCallback, DependencyList } from 'react';\n\nimport { getFocusables } from '../utils';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useFocusTrap(elementRef)\n * @param elementRef ref of the element in which focus needs to be retained\n * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true\n * @param dependencies list of variables or functions that will initiate this hook when they are updated.\n */\nconst useFocusTrap = (\n elementRef: RefObject<HTMLElement>,\n attachToDocument: boolean = true,\n dependencies: DependencyList = []\n) => {\n const onKeydown = useCallback((e: KeyboardEvent) => {\n if (e.key === 'Tab') {\n const focusables = getFocusables(elementRef);\n const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;\n\n if (\n !e.shiftKey &&\n (document.activeElement === elementRef.current || document.activeElement === lastFocusable)\n ) {\n firstFocusable?.focus();\n e.preventDefault();\n } else if (\n e.shiftKey &&\n (document.activeElement === elementRef.current || document.activeElement === firstFocusable)\n ) {\n lastFocusable?.focus();\n e.preventDefault();\n }\n }\n }, dependencies);\n\n useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });\n};\n\nexport default useFocusTrap;\n"]}
|
package/lib/hooks/useI18n.d.ts
CHANGED
|
@@ -36,7 +36,6 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
36
36
|
filter_by: string;
|
|
37
37
|
sort_by: string;
|
|
38
38
|
group_by: string;
|
|
39
|
-
all: string;
|
|
40
39
|
view_all: string;
|
|
41
40
|
view_less: string;
|
|
42
41
|
show_more: string;
|
|
@@ -176,10 +175,6 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
176
175
|
location_input_placeholder: string;
|
|
177
176
|
location_not_found_text: string;
|
|
178
177
|
allow_location_permissions_text: string;
|
|
179
|
-
advanced_search: string;
|
|
180
|
-
select_search_filter: string;
|
|
181
|
-
recent_searches: string;
|
|
182
|
-
clear_search: string;
|
|
183
178
|
utilities_summary: string;
|
|
184
179
|
expand_summary_panel: string;
|
|
185
180
|
collapse_summary_panel: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,QAAA,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/lib/i18n/default.d.ts
CHANGED
|
@@ -32,7 +32,6 @@ declare const _default: {
|
|
|
32
32
|
filter_by: string;
|
|
33
33
|
sort_by: string;
|
|
34
34
|
group_by: string;
|
|
35
|
-
all: string;
|
|
36
35
|
view_all: string;
|
|
37
36
|
view_less: string;
|
|
38
37
|
show_more: string;
|
|
@@ -172,10 +171,6 @@ declare const _default: {
|
|
|
172
171
|
location_input_placeholder: string;
|
|
173
172
|
location_not_found_text: string;
|
|
174
173
|
allow_location_permissions_text: string;
|
|
175
|
-
advanced_search: string;
|
|
176
|
-
select_search_filter: string;
|
|
177
|
-
recent_searches: string;
|
|
178
|
-
clear_search: string;
|
|
179
174
|
utilities_summary: string;
|
|
180
175
|
expand_summary_panel: string;
|
|
181
176
|
collapse_summary_panel: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAiwBE"}
|
package/lib/i18n/default.js
CHANGED
|
@@ -37,7 +37,6 @@ export default {
|
|
|
37
37
|
filter_by: 'Filter by',
|
|
38
38
|
sort_by: 'Sort by',
|
|
39
39
|
group_by: 'Group by',
|
|
40
|
-
all: 'All',
|
|
41
40
|
/* Static verb noun */
|
|
42
41
|
view_all: 'View all',
|
|
43
42
|
view_less: 'View less',
|
|
@@ -199,11 +198,6 @@ export default {
|
|
|
199
198
|
location_input_placeholder: 'Enter a location',
|
|
200
199
|
location_not_found_text: 'Location not found',
|
|
201
200
|
allow_location_permissions_text: 'To get current location, allow location permissions for this app',
|
|
202
|
-
/* core:SearchInput */
|
|
203
|
-
advanced_search: 'Advanced search',
|
|
204
|
-
select_search_filter: 'Select search filter',
|
|
205
|
-
recent_searches: 'Recent searches',
|
|
206
|
-
clear_search: 'Clear search',
|
|
207
201
|
/* work:CaseView */
|
|
208
202
|
utilities_summary: 'Utilities summary',
|
|
209
203
|
expand_summary_panel: 'Expand summary panel',
|