@citygross/components 0.8.179 → 0.8.181
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/Nav/Nav.d.ts +4 -5
- package/build/@types/components/SearchBar/SearchBar.d.ts +4 -5
- package/build/@types/components/SearchBar/SearchBar.styles.d.ts +1 -0
- package/build/cjs/components/src/components/Nav/Nav.js +4 -6
- package/build/cjs/components/src/components/Nav/Nav.js.map +1 -1
- package/build/cjs/components/src/components/SearchBar/SearchBar.js +20 -16
- package/build/cjs/components/src/components/SearchBar/SearchBar.js.map +1 -1
- package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js +3 -1
- package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js.map +1 -1
- package/build/es/components/src/components/Nav/Nav.js +4 -6
- package/build/es/components/src/components/Nav/Nav.js.map +1 -1
- package/build/es/components/src/components/SearchBar/SearchBar.js +21 -17
- package/build/es/components/src/components/SearchBar/SearchBar.js.map +1 -1
- package/build/es/components/src/components/SearchBar/SearchBar.styles.js +3 -2
- package/build/es/components/src/components/SearchBar/SearchBar.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -11,13 +11,12 @@ export declare type TNav = {
|
|
|
11
11
|
onSearchClick?: () => void;
|
|
12
12
|
overlayTopPosition?: number;
|
|
13
13
|
rightContent?: React.ReactNode;
|
|
14
|
-
searchAriaLabel: string;
|
|
15
14
|
searchCancelLabel?: React.ReactNode;
|
|
16
|
-
searchContainerAriaLabel: string;
|
|
17
15
|
searchContainerRef: React.RefObject<HTMLDivElement>;
|
|
18
16
|
searchIcon?: React.ReactNode;
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
searchInputLabel?: string;
|
|
18
|
+
searchInputRefDesktop: React.RefObject<HTMLInputElement>;
|
|
19
|
+
searchInputRefMobile: React.RefObject<HTMLInputElement>;
|
|
21
20
|
searchIsOpen?: boolean;
|
|
22
21
|
searchOnChange?: ChangeEventHandler<HTMLInputElement>;
|
|
23
22
|
searchOnSubmit?: () => void;
|
|
@@ -26,4 +25,4 @@ export declare type TNav = {
|
|
|
26
25
|
searchValue?: string;
|
|
27
26
|
topPosition?: number;
|
|
28
27
|
};
|
|
29
|
-
export declare const Nav: ({ closeSearch, height, inputIcon, logo, mainLinks, maxWidth, mobileTopPosition, onSearchBlur, onSearchClick, overlayTopPosition, rightContent,
|
|
28
|
+
export declare const Nav: ({ closeSearch, height, inputIcon, logo, mainLinks, maxWidth, mobileTopPosition, onSearchBlur, onSearchClick, overlayTopPosition, rightContent, searchCancelLabel, searchContainerRef, searchIcon, searchInputLabel, searchInputRefDesktop, searchInputRefMobile, searchIsOpen, searchOnChange, searchOnSubmit, searchPlaceHolder, searchResultElement, searchValue, topPosition }: TNav) => JSX.Element;
|
|
@@ -5,12 +5,11 @@ export declare type TSearchBar = styles.TSearchInput & {
|
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
icon?: React.ReactNode;
|
|
7
7
|
inputIcon?: React.ReactNode;
|
|
8
|
-
inputRef?: React.RefObject<HTMLInputElement>;
|
|
9
8
|
isOpen?: boolean;
|
|
10
9
|
mobileTopPosition?: number;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
searchInputLabel?: string;
|
|
11
|
+
searchInputRefDesktop: React.RefObject<HTMLInputElement>;
|
|
12
|
+
searchInputRefMobile: React.RefObject<HTMLInputElement>;
|
|
14
13
|
searchOnSubmit?: () => void;
|
|
15
14
|
} & InputHTMLAttributes<HTMLInputElement>;
|
|
16
|
-
export declare const SearchBar: ({ activeBorderColor, cancelLabel, children, flexGrow, icon, inputIcon,
|
|
15
|
+
export declare const SearchBar: ({ activeBorderColor, cancelLabel, children, flexGrow, icon, inputIcon, inputSize, isOpen, isValid, mobileTopPosition, searchInputLabel, searchInputRefDesktop, searchInputRefMobile, searchOnSubmit, ...props }: TSearchBar) => JSX.Element;
|
|
@@ -20,4 +20,5 @@ export declare const MobileSearchFormContainer: import("styled-components").Styl
|
|
|
20
20
|
export declare const SearchForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, TSearchInput, never>;
|
|
21
21
|
export declare const MobileSearchIconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
22
22
|
export declare const SearchLeftIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
23
|
+
export declare const HiddenLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
|
|
23
24
|
export {};
|
|
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
14
14
|
|
|
15
15
|
var Nav = function (_a) {
|
|
16
16
|
var _b, _c, _d, _e;
|
|
17
|
-
var closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent,
|
|
17
|
+
var closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent, searchCancelLabel = _a.searchCancelLabel, searchContainerRef = _a.searchContainerRef, searchIcon = _a.searchIcon, searchInputLabel = _a.searchInputLabel, searchInputRefDesktop = _a.searchInputRefDesktop, searchInputRefMobile = _a.searchInputRefMobile, searchIsOpen = _a.searchIsOpen, searchOnChange = _a.searchOnChange, searchOnSubmit = _a.searchOnSubmit, searchPlaceHolder = _a.searchPlaceHolder, searchResultElement = _a.searchResultElement, searchValue = _a.searchValue, topPosition = _a.topPosition;
|
|
18
18
|
var navContainerRef = React.useRef(null);
|
|
19
19
|
var navChildContainerRef = React.useRef(null);
|
|
20
20
|
var navRef = React.useRef(null);
|
|
@@ -51,9 +51,7 @@ var Nav = function (_a) {
|
|
|
51
51
|
setLocalWidth(width);
|
|
52
52
|
};
|
|
53
53
|
React.useEffect(function () {
|
|
54
|
-
var debounce = setTimeout(function () {
|
|
55
|
-
checkWidth === null || checkWidth === void 0 ? void 0 : checkWidth();
|
|
56
|
-
}, 300);
|
|
54
|
+
var debounce = setTimeout(function () { return checkWidth === null || checkWidth === void 0 ? void 0 : checkWidth(); }, 300);
|
|
57
55
|
return function () {
|
|
58
56
|
clearTimeout(debounce);
|
|
59
57
|
};
|
|
@@ -99,8 +97,8 @@ var Nav = function (_a) {
|
|
|
99
97
|
: searchIsOpen
|
|
100
98
|
? 'closed'
|
|
101
99
|
: '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, {
|
|
103
|
-
React__default["default"].createElement(SearchBar.SearchBar, { cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon,
|
|
100
|
+
React__default["default"].createElement(Nav_styles.SearchContainer, { isOpen: searchIsOpen, ref: searchContainerRef },
|
|
101
|
+
React__default["default"].createElement(SearchBar.SearchBar, { cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon, 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, searchInputLabel: searchInputLabel, searchInputRefDesktop: searchInputRefDesktop, searchInputRefMobile: searchInputRefMobile, searchOnSubmit: searchOnSubmit, value: searchValue }, searchResultElement))),
|
|
104
102
|
rightContent)),
|
|
105
103
|
React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show: searchIsOpen, overlayTopPosition: overlayTopPosition })));
|
|
106
104
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -6,6 +6,7 @@ var _tslib = require('../../../../_virtual/_tslib.js');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var utils = require('@citygross/utils');
|
|
8
8
|
var styled = require('styled-components');
|
|
9
|
+
var ScreenReader = require('../ScreenReader/ScreenReader.js');
|
|
9
10
|
var SearchBar_styles = require('./SearchBar.styles.js');
|
|
10
11
|
|
|
11
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -14,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
14
15
|
|
|
15
16
|
var SearchBar = function (_a) {
|
|
16
17
|
var _b;
|
|
17
|
-
var activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, children = _a.children, flexGrow = _a.flexGrow, icon = _a.icon, inputIcon = _a.inputIcon,
|
|
18
|
+
var activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, children = _a.children, flexGrow = _a.flexGrow, icon = _a.icon, inputIcon = _a.inputIcon, _c = _a.inputSize, inputSize = _c === void 0 ? 'medium' : _c, isOpen = _a.isOpen, isValid = _a.isValid, mobileTopPosition = _a.mobileTopPosition, searchInputLabel = _a.searchInputLabel, searchInputRefDesktop = _a.searchInputRefDesktop, searchInputRefMobile = _a.searchInputRefMobile, searchOnSubmit = _a.searchOnSubmit, props = _tslib.__rest(_a, ["activeBorderColor", "cancelLabel", "children", "flexGrow", "icon", "inputIcon", "inputSize", "isOpen", "isValid", "mobileTopPosition", "searchInputLabel", "searchInputRefDesktop", "searchInputRefMobile", "searchOnSubmit"]);
|
|
18
19
|
var width = utils.useWindowSize().width;
|
|
19
20
|
var theme = styled.useTheme();
|
|
20
21
|
var isMobile = theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint);
|
|
@@ -44,27 +45,30 @@ var SearchBar = function (_a) {
|
|
|
44
45
|
transition: { duration: 0.1, delay: 0.1, ease: 'linear' }
|
|
45
46
|
}
|
|
46
47
|
};
|
|
48
|
+
var handleSubmit = function (e) {
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
|
|
51
|
+
};
|
|
52
|
+
var renderInputField = function (id, ref) { return (React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ activeBorderColor: activeBorderColor, "aria-describedby": "search-help", "aria-haspopup": "dialog", flexGrow: flexGrow, id: id, inputSize: inputSize, isValid: isValid, ref: ref }, props))); };
|
|
47
53
|
return (React__default["default"].createElement(React.Fragment, null,
|
|
48
|
-
React__default["default"].createElement(
|
|
49
|
-
|
|
50
|
-
e.preventDefault();
|
|
51
|
-
searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
|
|
52
|
-
} },
|
|
53
|
-
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, inputIcon),
|
|
54
|
-
React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ activeBorderColor: activeBorderColor, "aria-expanded": !isMobile && isOpen, "aria-haspopup": "dialog", "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)),
|
|
55
|
-
cancelLabel && (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: "closed", onClick: function (e) { return e.stopPropagation(); }, variants: iconVariants }, cancelLabel))),
|
|
54
|
+
React__default["default"].createElement(ScreenReader.ScreenReader, { id: "search-help", string: "S\u00F6kf\u00F6rslag kommer visas medan du skriver" }),
|
|
55
|
+
React__default["default"].createElement(SearchBar_styles.SearchBarContainer, { activeBorderColor: activeBorderColor, flexGrow: flexGrow, inputSize: inputSize, isOpen: isOpen, role: "search" }, isMobile ? (React__default["default"].createElement(React.Fragment, null,
|
|
56
56
|
React__default["default"].createElement(SearchBar_styles.MobileSearchIconContainer, null,
|
|
57
57
|
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, icon)),
|
|
58
|
-
React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { animate: isOpen ? 'open' : 'closed', initial: "closed", isOpen: isOpen, mobileTopPosition: mobileTopPosition,
|
|
58
|
+
React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { animate: isOpen ? 'open' : 'closed', initial: "closed", isOpen: isOpen, mobileTopPosition: mobileTopPosition, variants: resultVariants },
|
|
59
59
|
React__default["default"].createElement(SearchBar_styles.MobileSearchFormContainer, null,
|
|
60
|
-
React__default["default"].createElement(SearchBar_styles.SearchForm, { onSubmit:
|
|
61
|
-
e.preventDefault();
|
|
62
|
-
searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
|
|
63
|
-
} },
|
|
60
|
+
React__default["default"].createElement(SearchBar_styles.SearchForm, { onSubmit: handleSubmit },
|
|
64
61
|
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, inputIcon),
|
|
65
|
-
React__default["default"].createElement(SearchBar_styles.
|
|
62
|
+
React__default["default"].createElement(SearchBar_styles.HiddenLabel, { htmlFor: "search-input-mobile" }, searchInputLabel || 'Sök'),
|
|
63
|
+
renderInputField('search-input-mobile', searchInputRefMobile),
|
|
66
64
|
cancelLabel && (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) { return e.stopPropagation(); } }, cancelLabel)))),
|
|
67
|
-
children)))
|
|
65
|
+
children))) : (React__default["default"].createElement(React.Fragment, null,
|
|
66
|
+
React__default["default"].createElement(SearchBar_styles.SearchForm, { isOpen: isOpen, onSubmit: handleSubmit },
|
|
67
|
+
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, inputIcon),
|
|
68
|
+
React__default["default"].createElement(SearchBar_styles.HiddenLabel, { htmlFor: "search-input-desktop" }, searchInputLabel || 'Sök'),
|
|
69
|
+
renderInputField('search-input-desktop', searchInputRefDesktop),
|
|
70
|
+
cancelLabel && (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: "closed", onClick: function (e) { return e.stopPropagation(); }, variants: iconVariants }, cancelLabel))),
|
|
71
|
+
React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { animate: isOpen ? 'open' : 'closed', initial: "closed", isOpen: isOpen, mobileTopPosition: mobileTopPosition, variants: resultVariants }, children))))));
|
|
68
72
|
};
|
|
69
73
|
|
|
70
74
|
exports.SearchBar = SearchBar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -128,8 +128,10 @@ var MobileSearchIconContainer = styled__default["default"].div(templateObject_7
|
|
|
128
128
|
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
129
129
|
});
|
|
130
130
|
var SearchLeftIcon = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
131
|
-
var
|
|
131
|
+
var HiddenLabel = styled__default["default"].label(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"], ["\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"])));
|
|
132
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
132
133
|
|
|
134
|
+
exports.HiddenLabel = HiddenLabel;
|
|
133
135
|
exports.MobileSearchFormContainer = MobileSearchFormContainer;
|
|
134
136
|
exports.MobileSearchIconContainer = MobileSearchIconContainer;
|
|
135
137
|
exports.SearchBarContainer = SearchBarContainer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -6,7 +6,7 @@ import { Nav as Nav$1, NavContainer, NavChildContainer, NavMainLinks, SearchCont
|
|
|
6
6
|
|
|
7
7
|
var Nav = function (_a) {
|
|
8
8
|
var _b, _c, _d, _e;
|
|
9
|
-
var closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent,
|
|
9
|
+
var closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent, searchCancelLabel = _a.searchCancelLabel, searchContainerRef = _a.searchContainerRef, searchIcon = _a.searchIcon, searchInputLabel = _a.searchInputLabel, searchInputRefDesktop = _a.searchInputRefDesktop, searchInputRefMobile = _a.searchInputRefMobile, searchIsOpen = _a.searchIsOpen, searchOnChange = _a.searchOnChange, searchOnSubmit = _a.searchOnSubmit, searchPlaceHolder = _a.searchPlaceHolder, searchResultElement = _a.searchResultElement, searchValue = _a.searchValue, topPosition = _a.topPosition;
|
|
10
10
|
var navContainerRef = useRef(null);
|
|
11
11
|
var navChildContainerRef = useRef(null);
|
|
12
12
|
var navRef = useRef(null);
|
|
@@ -43,9 +43,7 @@ var Nav = function (_a) {
|
|
|
43
43
|
setLocalWidth(width);
|
|
44
44
|
};
|
|
45
45
|
useEffect(function () {
|
|
46
|
-
var debounce = setTimeout(function () {
|
|
47
|
-
checkWidth === null || checkWidth === void 0 ? void 0 : checkWidth();
|
|
48
|
-
}, 300);
|
|
46
|
+
var debounce = setTimeout(function () { return checkWidth === null || checkWidth === void 0 ? void 0 : checkWidth(); }, 300);
|
|
49
47
|
return function () {
|
|
50
48
|
clearTimeout(debounce);
|
|
51
49
|
};
|
|
@@ -91,8 +89,8 @@ var Nav = function (_a) {
|
|
|
91
89
|
: searchIsOpen
|
|
92
90
|
? 'closed'
|
|
93
91
|
: '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, {
|
|
95
|
-
React.createElement(SearchBar, { cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon,
|
|
92
|
+
React.createElement(SearchContainer, { isOpen: searchIsOpen, ref: searchContainerRef },
|
|
93
|
+
React.createElement(SearchBar, { cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon, 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, searchInputLabel: searchInputLabel, searchInputRefDesktop: searchInputRefDesktop, searchInputRefMobile: searchInputRefMobile, searchOnSubmit: searchOnSubmit, value: searchValue }, searchResultElement))),
|
|
96
94
|
rightContent)),
|
|
97
95
|
React.createElement(SearchResultOverlay, { show: searchIsOpen, overlayTopPosition: overlayTopPosition })));
|
|
98
96
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,11 +2,12 @@ import { __rest, __assign } from '../../../../_virtual/_tslib.js';
|
|
|
2
2
|
import React, { Fragment } from 'react';
|
|
3
3
|
import { useWindowSize } from '@citygross/utils';
|
|
4
4
|
import { useTheme } from 'styled-components';
|
|
5
|
-
import {
|
|
5
|
+
import { ScreenReader } from '../ScreenReader/ScreenReader.js';
|
|
6
|
+
import { SearchBarContainer, MobileSearchIconContainer, SearchLeftIcon, SearchResultContainer, MobileSearchFormContainer, SearchForm, HiddenLabel, SearchRightLabel, SearchInput } from './SearchBar.styles.js';
|
|
6
7
|
|
|
7
8
|
var SearchBar = function (_a) {
|
|
8
9
|
var _b;
|
|
9
|
-
var activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, children = _a.children, flexGrow = _a.flexGrow, icon = _a.icon, inputIcon = _a.inputIcon,
|
|
10
|
+
var activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, children = _a.children, flexGrow = _a.flexGrow, icon = _a.icon, inputIcon = _a.inputIcon, _c = _a.inputSize, inputSize = _c === void 0 ? 'medium' : _c, isOpen = _a.isOpen, isValid = _a.isValid, mobileTopPosition = _a.mobileTopPosition, searchInputLabel = _a.searchInputLabel, searchInputRefDesktop = _a.searchInputRefDesktop, searchInputRefMobile = _a.searchInputRefMobile, searchOnSubmit = _a.searchOnSubmit, props = __rest(_a, ["activeBorderColor", "cancelLabel", "children", "flexGrow", "icon", "inputIcon", "inputSize", "isOpen", "isValid", "mobileTopPosition", "searchInputLabel", "searchInputRefDesktop", "searchInputRefMobile", "searchOnSubmit"]);
|
|
10
11
|
var width = useWindowSize().width;
|
|
11
12
|
var theme = useTheme();
|
|
12
13
|
var isMobile = theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint);
|
|
@@ -36,27 +37,30 @@ var SearchBar = function (_a) {
|
|
|
36
37
|
transition: { duration: 0.1, delay: 0.1, ease: 'linear' }
|
|
37
38
|
}
|
|
38
39
|
};
|
|
40
|
+
var handleSubmit = function (e) {
|
|
41
|
+
e.preventDefault();
|
|
42
|
+
searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
|
|
43
|
+
};
|
|
44
|
+
var renderInputField = function (id, ref) { return (React.createElement(SearchInput, __assign({ activeBorderColor: activeBorderColor, "aria-describedby": "search-help", "aria-haspopup": "dialog", flexGrow: flexGrow, id: id, inputSize: inputSize, isValid: isValid, ref: ref }, props))); };
|
|
39
45
|
return (React.createElement(Fragment, null,
|
|
40
|
-
React.createElement(
|
|
41
|
-
|
|
42
|
-
e.preventDefault();
|
|
43
|
-
searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
|
|
44
|
-
} },
|
|
45
|
-
React.createElement(SearchLeftIcon, null, inputIcon),
|
|
46
|
-
React.createElement(SearchInput, __assign({ activeBorderColor: activeBorderColor, "aria-expanded": !isMobile && isOpen, "aria-haspopup": "dialog", "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)),
|
|
47
|
-
cancelLabel && (React.createElement(SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: "closed", onClick: function (e) { return e.stopPropagation(); }, variants: iconVariants }, cancelLabel))),
|
|
46
|
+
React.createElement(ScreenReader, { id: "search-help", string: "S\u00F6kf\u00F6rslag kommer visas medan du skriver" }),
|
|
47
|
+
React.createElement(SearchBarContainer, { activeBorderColor: activeBorderColor, flexGrow: flexGrow, inputSize: inputSize, isOpen: isOpen, role: "search" }, isMobile ? (React.createElement(Fragment, null,
|
|
48
48
|
React.createElement(MobileSearchIconContainer, null,
|
|
49
49
|
React.createElement(SearchLeftIcon, null, icon)),
|
|
50
|
-
React.createElement(SearchResultContainer, { animate: isOpen ? 'open' : 'closed', initial: "closed", isOpen: isOpen, mobileTopPosition: mobileTopPosition,
|
|
50
|
+
React.createElement(SearchResultContainer, { animate: isOpen ? 'open' : 'closed', initial: "closed", isOpen: isOpen, mobileTopPosition: mobileTopPosition, variants: resultVariants },
|
|
51
51
|
React.createElement(MobileSearchFormContainer, null,
|
|
52
|
-
React.createElement(SearchForm, { onSubmit:
|
|
53
|
-
e.preventDefault();
|
|
54
|
-
searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
|
|
55
|
-
} },
|
|
52
|
+
React.createElement(SearchForm, { onSubmit: handleSubmit },
|
|
56
53
|
React.createElement(SearchLeftIcon, null, inputIcon),
|
|
57
|
-
React.createElement(
|
|
54
|
+
React.createElement(HiddenLabel, { htmlFor: "search-input-mobile" }, searchInputLabel || 'Sök'),
|
|
55
|
+
renderInputField('search-input-mobile', searchInputRefMobile),
|
|
58
56
|
cancelLabel && (React.createElement(SearchRightLabel, { onClick: function (e) { return e.stopPropagation(); } }, cancelLabel)))),
|
|
59
|
-
children)))
|
|
57
|
+
children))) : (React.createElement(Fragment, null,
|
|
58
|
+
React.createElement(SearchForm, { isOpen: isOpen, onSubmit: handleSubmit },
|
|
59
|
+
React.createElement(SearchLeftIcon, null, inputIcon),
|
|
60
|
+
React.createElement(HiddenLabel, { htmlFor: "search-input-desktop" }, searchInputLabel || 'Sök'),
|
|
61
|
+
renderInputField('search-input-desktop', searchInputRefDesktop),
|
|
62
|
+
cancelLabel && (React.createElement(SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: "closed", onClick: function (e) { return e.stopPropagation(); }, variants: iconVariants }, cancelLabel))),
|
|
63
|
+
React.createElement(SearchResultContainer, { animate: isOpen ? 'open' : 'closed', initial: "closed", isOpen: isOpen, mobileTopPosition: mobileTopPosition, variants: resultVariants }, children))))));
|
|
60
64
|
};
|
|
61
65
|
|
|
62
66
|
export { SearchBar };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -120,7 +120,8 @@ var MobileSearchIconContainer = styled.div(templateObject_7 || (templateObject_7
|
|
|
120
120
|
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
121
121
|
});
|
|
122
122
|
var SearchLeftIcon = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
123
|
-
var
|
|
123
|
+
var HiddenLabel = styled.label(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"], ["\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"])));
|
|
124
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
124
125
|
|
|
125
|
-
export { MobileSearchFormContainer, MobileSearchIconContainer, SearchBarContainer, SearchForm, SearchInput, SearchLeftIcon, SearchResultContainer, SearchRightLabel };
|
|
126
|
+
export { HiddenLabel, MobileSearchFormContainer, MobileSearchIconContainer, SearchBarContainer, SearchForm, SearchInput, SearchLeftIcon, SearchResultContainer, SearchRightLabel };
|
|
126
127
|
//# sourceMappingURL=SearchBar.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.styles.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.181",
|
|
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": "37fb8e046406f8b43352beb8d6dcea0995d062f8"
|
|
78
78
|
}
|