@citygross/components 0.8.177 → 0.8.178
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/build/@types/components/SearchBar/SearchBar.d.ts +2 -1
- package/build/cjs/components/src/components/Nav/Nav.js +2 -2
- package/build/cjs/components/src/components/SearchBar/SearchBar.js +9 -14
- package/build/cjs/components/src/components/SearchBar/SearchBar.js.map +1 -1
- package/build/es/components/src/components/Nav/Nav.js +2 -2
- package/build/es/components/src/components/SearchBar/SearchBar.js +9 -14
- package/build/es/components/src/components/SearchBar/SearchBar.js.map +1 -1
- package/package.json +2 -2
|
@@ -9,7 +9,8 @@ export declare type TSearchBar = styles.TSearchInput & {
|
|
|
9
9
|
isOpen?: boolean;
|
|
10
10
|
mobileTopPosition?: number;
|
|
11
11
|
resultBoxTopPosition?: string;
|
|
12
|
+
searchAriaLabel?: string;
|
|
12
13
|
searchInputMobileRef?: React.RefObject<HTMLInputElement>;
|
|
13
14
|
searchOnSubmit?: () => void;
|
|
14
15
|
} & InputHTMLAttributes<HTMLInputElement>;
|
|
15
|
-
export declare const SearchBar: ({ activeBorderColor, cancelLabel, children, flexGrow, icon, inputIcon, inputRef, inputSize, isOpen, isValid, mobileTopPosition, resultBoxTopPosition, searchInputMobileRef, searchOnSubmit, value, ...props }: TSearchBar) => JSX.Element;
|
|
16
|
+
export declare const SearchBar: ({ activeBorderColor, cancelLabel, children, flexGrow, icon, inputIcon, inputRef, inputSize, isOpen, isValid, mobileTopPosition, resultBoxTopPosition, searchAriaLabel, searchInputMobileRef, searchOnSubmit, value, ...props }: TSearchBar) => JSX.Element;
|
|
@@ -99,8 +99,8 @@ var Nav = function (_a) {
|
|
|
99
99
|
: searchIsOpen
|
|
100
100
|
? 'closed'
|
|
101
101
|
: 'open', initial: "open" }, (_e = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _e === void 0 ? void 0 : _e.map(function (link) { return link; })),
|
|
102
|
-
React__default["default"].createElement(Nav_styles.SearchContainer, { "aria-
|
|
103
|
-
React__default["default"].createElement(SearchBar.SearchBar, {
|
|
102
|
+
React__default["default"].createElement(Nav_styles.SearchContainer, { "aria-label": searchContainerAriaLabel, "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
|
|
103
|
+
React__default["default"].createElement(SearchBar.SearchBar, { cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon, inputRef: searchInputRef, isOpen: searchIsOpen, mobileTopPosition: mobileTopPosition, onBlur: onSearchBlur, onChange: searchOnChange, onClick: function () { return onSearchClick === null || onSearchClick === void 0 ? void 0 : onSearchClick(); }, onKeyDown: function (e) { return e.key === 'Enter' && (onSearchClick === null || onSearchClick === void 0 ? void 0 : onSearchClick()); }, placeholder: searchPlaceHolder, searchAriaLabel: searchAriaLabel, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, value: searchValue }, searchResultElement))),
|
|
104
104
|
rightContent)),
|
|
105
105
|
React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show: searchIsOpen, overlayTopPosition: overlayTopPosition })));
|
|
106
106
|
};
|
|
@@ -13,26 +13,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
14
|
|
|
15
15
|
var SearchBar = function (_a) {
|
|
16
|
-
var _b
|
|
17
|
-
var activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, children = _a.children, flexGrow = _a.flexGrow, icon = _a.icon, inputIcon = _a.inputIcon, inputRef = _a.inputRef,
|
|
16
|
+
var _b;
|
|
17
|
+
var activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, children = _a.children, flexGrow = _a.flexGrow, icon = _a.icon, inputIcon = _a.inputIcon, inputRef = _a.inputRef, _c = _a.inputSize, inputSize = _c === void 0 ? 'medium' : _c, isOpen = _a.isOpen, isValid = _a.isValid, mobileTopPosition = _a.mobileTopPosition, resultBoxTopPosition = _a.resultBoxTopPosition, searchAriaLabel = _a.searchAriaLabel, searchInputMobileRef = _a.searchInputMobileRef, searchOnSubmit = _a.searchOnSubmit, value = _a.value, props = _tslib.__rest(_a, ["activeBorderColor", "cancelLabel", "children", "flexGrow", "icon", "inputIcon", "inputRef", "inputSize", "isOpen", "isValid", "mobileTopPosition", "resultBoxTopPosition", "searchAriaLabel", "searchInputMobileRef", "searchOnSubmit", "value"]);
|
|
18
18
|
var width = utils.useWindowSize().width;
|
|
19
19
|
var theme = styled.useTheme();
|
|
20
|
+
var isMobile = theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint);
|
|
20
21
|
var resultVariants = {
|
|
21
22
|
closed: {
|
|
22
23
|
height: '0',
|
|
23
24
|
transition: { duration: 0, ease: 'linear' }
|
|
24
25
|
},
|
|
25
26
|
open: {
|
|
26
|
-
height:
|
|
27
|
-
? '100%'
|
|
28
|
-
: 'auto',
|
|
27
|
+
height: isMobile ? '100%' : 'auto',
|
|
29
28
|
transition: {
|
|
30
|
-
duration:
|
|
31
|
-
|
|
32
|
-
: 0.2,
|
|
33
|
-
delay: theme.constants && width < ((_d = theme.constants) === null || _d === void 0 ? void 0 : _d.headerBreakpoint)
|
|
34
|
-
? 0
|
|
35
|
-
: 0.1,
|
|
29
|
+
duration: isMobile ? 0 : 0.2,
|
|
30
|
+
delay: isMobile ? 0 : 0.1,
|
|
36
31
|
ease: 'linear'
|
|
37
32
|
}
|
|
38
33
|
}
|
|
@@ -50,13 +45,13 @@ var SearchBar = function (_a) {
|
|
|
50
45
|
}
|
|
51
46
|
};
|
|
52
47
|
return (React__default["default"].createElement(React.Fragment, null,
|
|
53
|
-
React__default["default"].createElement(SearchBar_styles.SearchBarContainer, { activeBorderColor: activeBorderColor, flexGrow: flexGrow, inputSize: inputSize, isOpen: isOpen, role: "search" },
|
|
48
|
+
React__default["default"].createElement(SearchBar_styles.SearchBarContainer, { activeBorderColor: activeBorderColor, "aria-expanded": isOpen, flexGrow: flexGrow, inputSize: inputSize, isOpen: isOpen, role: "search" },
|
|
54
49
|
React__default["default"].createElement(SearchBar_styles.SearchForm, { hideInMobile: true, isOpen: isOpen, onSubmit: function (e) {
|
|
55
50
|
e.preventDefault();
|
|
56
51
|
searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
|
|
57
52
|
} },
|
|
58
53
|
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, inputIcon),
|
|
59
|
-
React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, id: "search-input", inputSize: inputSize, isValid: isValid, ref: inputRef, value: value }, props)),
|
|
54
|
+
React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ activeBorderColor: activeBorderColor, "aria-hidden": isMobile, "aria-label": !isMobile ? searchAriaLabel : undefined, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, id: "search-input-desktop", inputSize: inputSize, isValid: isValid, ref: inputRef, value: value }, props)),
|
|
60
55
|
cancelLabel && (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: "closed", onClick: function (e) { return e.stopPropagation(); }, variants: iconVariants }, cancelLabel))),
|
|
61
56
|
React__default["default"].createElement(SearchBar_styles.MobileSearchIconContainer, null,
|
|
62
57
|
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, icon)),
|
|
@@ -67,7 +62,7 @@ var SearchBar = function (_a) {
|
|
|
67
62
|
searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
|
|
68
63
|
} },
|
|
69
64
|
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, inputIcon),
|
|
70
|
-
React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, isValid: isValid, ref: searchInputMobileRef, value: value, tabIndex: isOpen ? 0 : -1 }, props)),
|
|
65
|
+
React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ activeBorderColor: activeBorderColor, "aria-hidden": !isMobile, "aria-label": isMobile ? searchAriaLabel : undefined, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, id: "search-input-mobile", isValid: isValid, ref: searchInputMobileRef, value: value, tabIndex: isOpen ? 0 : -1 }, props)),
|
|
71
66
|
cancelLabel && (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) { return e.stopPropagation(); } }, cancelLabel)))),
|
|
72
67
|
children))));
|
|
73
68
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -91,8 +91,8 @@ var Nav = function (_a) {
|
|
|
91
91
|
: searchIsOpen
|
|
92
92
|
? 'closed'
|
|
93
93
|
: 'open', initial: "open" }, (_e = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _e === void 0 ? void 0 : _e.map(function (link) { return link; })),
|
|
94
|
-
React.createElement(SearchContainer, { "aria-
|
|
95
|
-
React.createElement(SearchBar, {
|
|
94
|
+
React.createElement(SearchContainer, { "aria-label": searchContainerAriaLabel, "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
|
|
95
|
+
React.createElement(SearchBar, { cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon, inputRef: searchInputRef, isOpen: searchIsOpen, mobileTopPosition: mobileTopPosition, onBlur: onSearchBlur, onChange: searchOnChange, onClick: function () { return onSearchClick === null || onSearchClick === void 0 ? void 0 : onSearchClick(); }, onKeyDown: function (e) { return e.key === 'Enter' && (onSearchClick === null || onSearchClick === void 0 ? void 0 : onSearchClick()); }, placeholder: searchPlaceHolder, searchAriaLabel: searchAriaLabel, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, value: searchValue }, searchResultElement))),
|
|
96
96
|
rightContent)),
|
|
97
97
|
React.createElement(SearchResultOverlay, { show: searchIsOpen, overlayTopPosition: overlayTopPosition })));
|
|
98
98
|
};
|
|
@@ -5,26 +5,21 @@ import { useTheme } from 'styled-components';
|
|
|
5
5
|
import { SearchBarContainer, SearchForm, SearchLeftIcon, SearchInput, SearchRightLabel, MobileSearchIconContainer, SearchResultContainer, MobileSearchFormContainer } from './SearchBar.styles.js';
|
|
6
6
|
|
|
7
7
|
var SearchBar = function (_a) {
|
|
8
|
-
var _b
|
|
9
|
-
var activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, children = _a.children, flexGrow = _a.flexGrow, icon = _a.icon, inputIcon = _a.inputIcon, inputRef = _a.inputRef,
|
|
8
|
+
var _b;
|
|
9
|
+
var activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, children = _a.children, flexGrow = _a.flexGrow, icon = _a.icon, inputIcon = _a.inputIcon, inputRef = _a.inputRef, _c = _a.inputSize, inputSize = _c === void 0 ? 'medium' : _c, isOpen = _a.isOpen, isValid = _a.isValid, mobileTopPosition = _a.mobileTopPosition, resultBoxTopPosition = _a.resultBoxTopPosition, searchAriaLabel = _a.searchAriaLabel, searchInputMobileRef = _a.searchInputMobileRef, searchOnSubmit = _a.searchOnSubmit, value = _a.value, props = __rest(_a, ["activeBorderColor", "cancelLabel", "children", "flexGrow", "icon", "inputIcon", "inputRef", "inputSize", "isOpen", "isValid", "mobileTopPosition", "resultBoxTopPosition", "searchAriaLabel", "searchInputMobileRef", "searchOnSubmit", "value"]);
|
|
10
10
|
var width = useWindowSize().width;
|
|
11
11
|
var theme = useTheme();
|
|
12
|
+
var isMobile = theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint);
|
|
12
13
|
var resultVariants = {
|
|
13
14
|
closed: {
|
|
14
15
|
height: '0',
|
|
15
16
|
transition: { duration: 0, ease: 'linear' }
|
|
16
17
|
},
|
|
17
18
|
open: {
|
|
18
|
-
height:
|
|
19
|
-
? '100%'
|
|
20
|
-
: 'auto',
|
|
19
|
+
height: isMobile ? '100%' : 'auto',
|
|
21
20
|
transition: {
|
|
22
|
-
duration:
|
|
23
|
-
|
|
24
|
-
: 0.2,
|
|
25
|
-
delay: theme.constants && width < ((_d = theme.constants) === null || _d === void 0 ? void 0 : _d.headerBreakpoint)
|
|
26
|
-
? 0
|
|
27
|
-
: 0.1,
|
|
21
|
+
duration: isMobile ? 0 : 0.2,
|
|
22
|
+
delay: isMobile ? 0 : 0.1,
|
|
28
23
|
ease: 'linear'
|
|
29
24
|
}
|
|
30
25
|
}
|
|
@@ -42,13 +37,13 @@ var SearchBar = function (_a) {
|
|
|
42
37
|
}
|
|
43
38
|
};
|
|
44
39
|
return (React.createElement(Fragment, null,
|
|
45
|
-
React.createElement(SearchBarContainer, { activeBorderColor: activeBorderColor, flexGrow: flexGrow, inputSize: inputSize, isOpen: isOpen, role: "search" },
|
|
40
|
+
React.createElement(SearchBarContainer, { activeBorderColor: activeBorderColor, "aria-expanded": isOpen, flexGrow: flexGrow, inputSize: inputSize, isOpen: isOpen, role: "search" },
|
|
46
41
|
React.createElement(SearchForm, { hideInMobile: true, isOpen: isOpen, onSubmit: function (e) {
|
|
47
42
|
e.preventDefault();
|
|
48
43
|
searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
|
|
49
44
|
} },
|
|
50
45
|
React.createElement(SearchLeftIcon, null, inputIcon),
|
|
51
|
-
React.createElement(SearchInput, __assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, id: "search-input", inputSize: inputSize, isValid: isValid, ref: inputRef, value: value }, props)),
|
|
46
|
+
React.createElement(SearchInput, __assign({ activeBorderColor: activeBorderColor, "aria-hidden": isMobile, "aria-label": !isMobile ? searchAriaLabel : undefined, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, id: "search-input-desktop", inputSize: inputSize, isValid: isValid, ref: inputRef, value: value }, props)),
|
|
52
47
|
cancelLabel && (React.createElement(SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: "closed", onClick: function (e) { return e.stopPropagation(); }, variants: iconVariants }, cancelLabel))),
|
|
53
48
|
React.createElement(MobileSearchIconContainer, null,
|
|
54
49
|
React.createElement(SearchLeftIcon, null, icon)),
|
|
@@ -59,7 +54,7 @@ var SearchBar = function (_a) {
|
|
|
59
54
|
searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
|
|
60
55
|
} },
|
|
61
56
|
React.createElement(SearchLeftIcon, null, inputIcon),
|
|
62
|
-
React.createElement(SearchInput, __assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, isValid: isValid, ref: searchInputMobileRef, value: value, tabIndex: isOpen ? 0 : -1 }, props)),
|
|
57
|
+
React.createElement(SearchInput, __assign({ activeBorderColor: activeBorderColor, "aria-hidden": !isMobile, "aria-label": isMobile ? searchAriaLabel : undefined, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, id: "search-input-mobile", isValid: isValid, ref: searchInputMobileRef, value: value, tabIndex: isOpen ? 0 : -1 }, props)),
|
|
63
58
|
cancelLabel && (React.createElement(SearchRightLabel, { onClick: function (e) { return e.stopPropagation(); } }, cancelLabel)))),
|
|
64
59
|
children))));
|
|
65
60
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.178",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"react-slick": "^0.30.1",
|
|
75
75
|
"slick-carousel": "^1.8.1"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "a1ca070b44e1f0641435b990b4bd7e6c30ae44e7"
|
|
78
78
|
}
|