@canonical/react-components 0.47.1 → 0.47.2
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/dist/__mocks__/nanoid.js +3 -3
- package/dist/components/Accordion/Accordion.js +28 -41
- package/dist/components/Accordion/AccordionSection/AccordionSection.js +18 -18
- package/dist/components/Accordion/AccordionSection/index.js +1 -1
- package/dist/components/Accordion/index.js +1 -1
- package/dist/components/ActionButton/ActionButton.js +34 -66
- package/dist/components/ActionButton/index.js +1 -1
- package/dist/components/ArticlePagination/ArticlePagination.js +10 -12
- package/dist/components/ArticlePagination/index.js +1 -1
- package/dist/components/Badge/Badge.js +24 -29
- package/dist/components/Badge/index.js +1 -1
- package/dist/components/Button/Button.js +21 -26
- package/dist/components/Button/index.js +4 -5
- package/dist/components/Card/Card.js +12 -14
- package/dist/components/Card/index.js +1 -1
- package/dist/components/CheckboxInput/CheckableInput/CheckableInput.js +15 -19
- package/dist/components/CheckboxInput/CheckableInput/index.js +1 -1
- package/dist/components/CheckboxInput/CheckboxInput.js +7 -10
- package/dist/components/CheckboxInput/index.js +1 -1
- package/dist/components/Chip/Chip.js +23 -33
- package/dist/components/Chip/index.js +1 -1
- package/dist/components/Code/Code.js +14 -17
- package/dist/components/Code/index.js +1 -1
- package/dist/components/CodeSnippet/CodeSnippet.js +9 -14
- package/dist/components/CodeSnippet/CodeSnippetBlock.js +24 -29
- package/dist/components/CodeSnippet/CodeSnippetDropdown.js +11 -11
- package/dist/components/CodeSnippet/index.js +2 -2
- package/dist/components/Col/Col.js +24 -26
- package/dist/components/Col/index.js +4 -5
- package/dist/components/ConfirmationButton/ConfirmationButton.js +18 -21
- package/dist/components/ConfirmationButton/index.js +1 -1
- package/dist/components/ConfirmationModal/ConfirmationModal.js +11 -15
- package/dist/components/ConfirmationModal/index.js +1 -1
- package/dist/components/ContextualMenu/ContextualMenu.js +89 -107
- package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts +4 -4
- package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js +97 -107
- package/dist/components/ContextualMenu/ContextualMenuDropdown/index.js +1 -1
- package/dist/components/ContextualMenu/index.js +1 -1
- package/dist/components/EmptyState/EmptyState.js +9 -11
- package/dist/components/EmptyState/index.js +1 -1
- package/dist/components/Field/Field.js +66 -65
- package/dist/components/Field/index.js +1 -1
- package/dist/components/Form/Form.js +9 -11
- package/dist/components/Form/index.js +1 -1
- package/dist/components/Icon/Icon.js +9 -12
- package/dist/components/Icon/index.js +4 -5
- package/dist/components/Input/Input.js +38 -45
- package/dist/components/Input/index.js +1 -1
- package/dist/components/Label/Label.js +9 -11
- package/dist/components/Label/index.js +1 -1
- package/dist/components/Link/Link.js +12 -18
- package/dist/components/Link/index.js +1 -1
- package/dist/components/List/List.js +50 -54
- package/dist/components/List/index.js +1 -1
- package/dist/components/Loader/Loader.js +2 -3
- package/dist/components/Loader/index.js +1 -1
- package/dist/components/MainTable/MainTable.js +87 -104
- package/dist/components/MainTable/index.js +1 -1
- package/dist/components/Modal/Modal.js +37 -38
- package/dist/components/Modal/index.js +1 -1
- package/dist/components/ModularTable/ModularTable.js +63 -77
- package/dist/components/ModularTable/index.js +1 -1
- package/dist/components/Navigation/Navigation.js +63 -97
- package/dist/components/Navigation/NavigationLink/NavigationLink.js +32 -35
- package/dist/components/Navigation/NavigationLink/index.js +1 -1
- package/dist/components/Navigation/NavigationMenu/NavigationMenu.js +26 -45
- package/dist/components/Navigation/NavigationMenu/index.js +1 -1
- package/dist/components/Navigation/index.js +1 -1
- package/dist/components/Notification/Notification.js +49 -59
- package/dist/components/Notification/index.js +4 -5
- package/dist/components/NotificationProvider/NotificationProvider.js +47 -68
- package/dist/components/NotificationProvider/index.js +7 -7
- package/dist/components/NotificationProvider/messageBuilder.js +9 -9
- package/dist/components/NotificationProvider/types.d.ts +1 -0
- package/dist/components/Pagination/Pagination.js +50 -69
- package/dist/components/Pagination/PaginationButton/PaginationButton.js +11 -12
- package/dist/components/Pagination/PaginationButton/index.js +1 -1
- package/dist/components/Pagination/PaginationItem/PaginationItem.js +7 -7
- package/dist/components/Pagination/PaginationItem/index.js +1 -1
- package/dist/components/Pagination/index.js +1 -1
- package/dist/components/PasswordToggle/PasswordToggle.d.ts +1 -1
- package/dist/components/PasswordToggle/PasswordToggle.js +25 -40
- package/dist/components/PasswordToggle/index.js +1 -1
- package/dist/components/RadioInput/RadioInput.js +6 -8
- package/dist/components/RadioInput/index.js +1 -1
- package/dist/components/Row/Row.js +7 -9
- package/dist/components/Row/index.js +1 -1
- package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js +38 -51
- package/dist/components/SearchAndFilter/FilterPanelSection/index.js +1 -1
- package/dist/components/SearchAndFilter/SearchAndFilter.js +75 -135
- package/dist/components/SearchAndFilter/index.js +1 -1
- package/dist/components/SearchAndFilter/utils.js +4 -8
- package/dist/components/SearchBox/SearchBox.js +25 -33
- package/dist/components/SearchBox/index.js +1 -1
- package/dist/components/Select/Select.js +38 -44
- package/dist/components/Select/index.js +1 -1
- package/dist/components/Slider/Slider.js +27 -35
- package/dist/components/Slider/index.js +1 -1
- package/dist/components/Spinner/Spinner.js +10 -15
- package/dist/components/Spinner/index.js +1 -1
- package/dist/components/StatusLabel/StatusLabel.js +11 -13
- package/dist/components/StatusLabel/index.js +4 -5
- package/dist/components/Strip/Strip.js +27 -34
- package/dist/components/Strip/index.js +1 -1
- package/dist/components/SummaryButton/SummaryButton.js +9 -8
- package/dist/components/SummaryButton/index.js +1 -1
- package/dist/components/Switch/Switch.js +7 -10
- package/dist/components/Switch/index.js +1 -1
- package/dist/components/Table/Table.js +9 -13
- package/dist/components/Table/index.js +1 -1
- package/dist/components/TableCell/TableCell.js +11 -17
- package/dist/components/TableCell/index.js +1 -1
- package/dist/components/TableHeader/TableHeader.js +7 -9
- package/dist/components/TableHeader/index.js +1 -1
- package/dist/components/TablePagination/TablePagination.d.ts +37 -0
- package/dist/components/TablePagination/TablePagination.js +125 -0
- package/dist/components/TablePagination/TablePagination.scss +40 -0
- package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.d.ts +16 -0
- package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.js +66 -0
- package/dist/components/TablePagination/TablePaginationControls/index.d.ts +2 -0
- package/dist/components/TablePagination/TablePaginationControls/index.js +13 -0
- package/dist/components/TablePagination/index.d.ts +2 -0
- package/dist/components/TablePagination/index.js +13 -0
- package/dist/components/TableRow/TableRow.js +6 -8
- package/dist/components/TableRow/index.js +1 -1
- package/dist/components/Tabs/Tabs.js +17 -17
- package/dist/components/Tabs/index.js +1 -1
- package/dist/components/Textarea/Textarea.js +51 -45
- package/dist/components/Textarea/index.js +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +5 -1
- package/dist/components/Tooltip/Tooltip.js +76 -79
- package/dist/components/Tooltip/index.js +4 -5
- package/dist/enums.js +2 -3
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js +16 -10
- package/dist/hooks/useId.js +1 -3
- package/dist/hooks/useListener.d.ts +2 -1
- package/dist/hooks/useListener.js +25 -24
- package/dist/hooks/useOnClickOutside.d.ts +12 -0
- package/dist/hooks/useOnClickOutside.js +45 -0
- package/dist/hooks/useOnEscapePressed.d.ts +3 -1
- package/dist/hooks/useOnEscapePressed.js +13 -6
- package/dist/hooks/usePagination.js +17 -29
- package/dist/hooks/usePrevious.js +4 -4
- package/dist/hooks/useThrottle.js +16 -25
- package/dist/hooks/useWindowFitment.js +30 -28
- package/dist/index.d.ts +3 -1
- package/dist/index.js +86 -74
- package/dist/utils.js +6 -13
- package/package.json +42 -35
- package/dist/hooks/useClickOutside.d.ts +0 -6
- package/dist/hooks/useClickOutside.js +0 -32
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -12,53 +11,36 @@ var _NavigationMenu = _interopRequireDefault(require("./NavigationMenu"));
|
|
|
12
11
|
var _SearchBox = _interopRequireDefault(require("../SearchBox"));
|
|
13
12
|
var _hooks = require("../../hooks");
|
|
14
13
|
var _enums = require("../../enums");
|
|
15
|
-
var _excluded = ["url", "src", "title", "icon", "aria-current", "aria-label"],
|
|
16
|
-
_excluded2 = ["fullWidth", "generateLink", "items", "itemsRight", "leftNavProps", "logo", "navProps", "rightNavProps", "searchProps", "theme"];
|
|
17
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
-
function _getRequireWildcardCache(
|
|
19
|
-
function _interopRequireWildcard(
|
|
20
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
21
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
22
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
23
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
24
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
25
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
26
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
27
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
28
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
29
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
30
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
31
17
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
32
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
33
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
34
18
|
/**
|
|
35
19
|
* Narrow the type of the nav item to a NavMenu.
|
|
36
20
|
*/
|
|
37
|
-
|
|
38
|
-
return "items" in item;
|
|
39
|
-
};
|
|
21
|
+
const isMenu = item => "items" in item;
|
|
40
22
|
|
|
41
23
|
/**
|
|
42
24
|
* Narrow the type of the logo prop to LogoProps.
|
|
43
25
|
*/
|
|
44
|
-
|
|
45
|
-
return ! /*#__PURE__*/(0, _react.isValidElement)(logo);
|
|
46
|
-
};
|
|
26
|
+
const isLogoProps = logo => ! /*#__PURE__*/(0, _react.isValidElement)(logo);
|
|
47
27
|
|
|
48
28
|
/**
|
|
49
29
|
* Display the standard logo if the props were provided otherwise display the
|
|
50
30
|
* full element provided.
|
|
51
31
|
*/
|
|
52
|
-
|
|
32
|
+
const generateLogo = (logo, generateLink) => {
|
|
53
33
|
if (isLogoProps(logo)) {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
34
|
+
const {
|
|
35
|
+
url,
|
|
36
|
+
src,
|
|
37
|
+
title,
|
|
38
|
+
icon,
|
|
39
|
+
"aria-current": ariaCurrent,
|
|
40
|
+
"aria-label": ariaLabel,
|
|
41
|
+
...logoProps
|
|
42
|
+
} = logo;
|
|
43
|
+
const content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
62
44
|
className: "p-navigation__logo-tag"
|
|
63
45
|
}, icon !== null && icon !== void 0 ? icon : /*#__PURE__*/_react.default.createElement("img", {
|
|
64
46
|
className: "p-navigation__logo-icon",
|
|
@@ -93,78 +75,69 @@ var generateLogo = function generateLogo(logo, generateLink) {
|
|
|
93
75
|
* @param generateLink The optional function used to generate link components.
|
|
94
76
|
* @returns A list of navigation item elements.
|
|
95
77
|
*/
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
134
|
-
mobileMenuOpen = _useState2[0],
|
|
135
|
-
setMobileMenuOpen = _useState2[1];
|
|
136
|
-
var _useState3 = (0, _react.useState)(false),
|
|
137
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
138
|
-
searchOpen = _useState4[0],
|
|
139
|
-
setSearchOpen = _useState4[1];
|
|
78
|
+
const generateItems = (items, closeMobileMenu, generateLink) => items.map((item, i) => isMenu(item) ? /*#__PURE__*/_react.default.createElement(_NavigationMenu.default, _extends({}, item, {
|
|
79
|
+
generateLink: generateLink,
|
|
80
|
+
key: i
|
|
81
|
+
})) : /*#__PURE__*/_react.default.createElement("li", {
|
|
82
|
+
className: (0, _classnames.default)("p-navigation__item", {
|
|
83
|
+
"is-selected": item.isSelected
|
|
84
|
+
}),
|
|
85
|
+
key: i
|
|
86
|
+
}, /*#__PURE__*/_react.default.createElement(_NavigationLink.default, {
|
|
87
|
+
generateLink: generateLink,
|
|
88
|
+
link: {
|
|
89
|
+
...item,
|
|
90
|
+
className: (0, _classnames.default)("p-navigation__link", item.className),
|
|
91
|
+
onClick: evt => {
|
|
92
|
+
var _item$onClick;
|
|
93
|
+
(_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, evt);
|
|
94
|
+
closeMobileMenu();
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
})));
|
|
98
|
+
const Navigation = _ref => {
|
|
99
|
+
let {
|
|
100
|
+
fullWidth,
|
|
101
|
+
generateLink,
|
|
102
|
+
items,
|
|
103
|
+
itemsRight,
|
|
104
|
+
leftNavProps,
|
|
105
|
+
logo,
|
|
106
|
+
navProps,
|
|
107
|
+
rightNavProps,
|
|
108
|
+
searchProps,
|
|
109
|
+
theme,
|
|
110
|
+
...headerProps
|
|
111
|
+
} = _ref;
|
|
112
|
+
const searchRef = (0, _react.useRef)();
|
|
113
|
+
const [mobileMenuOpen, setMobileMenuOpen] = (0, _react.useState)(false);
|
|
114
|
+
const [searchOpen, setSearchOpen] = (0, _react.useState)(false);
|
|
140
115
|
// Display the search box if the props have been provided.
|
|
141
|
-
|
|
116
|
+
const hasSearch = !!searchProps;
|
|
142
117
|
// Close the mobile menu when the search box is opened.
|
|
143
|
-
|
|
118
|
+
const toggleSearch = open => {
|
|
144
119
|
setSearchOpen(open !== null && open !== void 0 ? open : !searchOpen);
|
|
145
120
|
setMobileMenuOpen(false);
|
|
146
121
|
};
|
|
147
122
|
// Close the search box when the mobile menu is opened.
|
|
148
|
-
|
|
123
|
+
const toggleMobileMenu = () => {
|
|
149
124
|
setMobileMenuOpen(!mobileMenuOpen);
|
|
150
125
|
setSearchOpen(false);
|
|
151
126
|
};
|
|
152
|
-
|
|
127
|
+
const closeMobileMenu = () => {
|
|
153
128
|
if (mobileMenuOpen) {
|
|
154
129
|
setMobileMenuOpen(false);
|
|
155
130
|
}
|
|
156
131
|
};
|
|
157
132
|
// Hide the searchbox when the escape key is pressed.
|
|
158
|
-
(0, _hooks.useOnEscapePressed)(
|
|
159
|
-
|
|
160
|
-
});
|
|
161
|
-
(0, _react.useEffect)(function () {
|
|
133
|
+
(0, _hooks.useOnEscapePressed)(() => toggleSearch(false));
|
|
134
|
+
(0, _react.useEffect)(() => {
|
|
162
135
|
if (searchOpen) {
|
|
163
136
|
var _searchRef$current;
|
|
164
137
|
// Focus on the searchbox when it appears. This done in a useEffect so
|
|
165
138
|
// that the state change to display the searchbox has already occured and
|
|
166
139
|
// the input has been made visible.
|
|
167
|
-
(_searchRef$current = searchRef.current) === null || _searchRef$current === void 0
|
|
140
|
+
(_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus();
|
|
168
141
|
}
|
|
169
142
|
}, [searchOpen]);
|
|
170
143
|
return /*#__PURE__*/_react.default.createElement("header", _extends({}, headerProps, {
|
|
@@ -188,9 +161,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
188
161
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
189
162
|
"aria-label": "Search",
|
|
190
163
|
className: "p-navigation__link--search-toggle",
|
|
191
|
-
onClick:
|
|
192
|
-
return toggleSearch();
|
|
193
|
-
}
|
|
164
|
+
onClick: () => toggleSearch()
|
|
194
165
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
195
166
|
className: "p-navigation__search-label"
|
|
196
167
|
}, "Search"))) : null, (items === null || items === void 0 ? void 0 : items.length) > 0 || (itemsRight === null || itemsRight === void 0 ? void 0 : itemsRight.length) > 0 ? /*#__PURE__*/_react.default.createElement("li", {
|
|
@@ -213,9 +184,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
213
184
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
214
185
|
"aria-label": "Search",
|
|
215
186
|
className: "p-navigation__link--search-toggle",
|
|
216
|
-
onClick:
|
|
217
|
-
return toggleSearch();
|
|
218
|
-
}
|
|
187
|
+
onClick: () => toggleSearch()
|
|
219
188
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
220
189
|
className: "p-navigation__search-label"
|
|
221
190
|
}, "Search"))) : null) : null,
|
|
@@ -231,10 +200,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
231
200
|
// form then this element is overlayed over the whole page.
|
|
232
201
|
hasSearch ? /*#__PURE__*/_react.default.createElement("div", {
|
|
233
202
|
className: "p-navigation__search-overlay",
|
|
234
|
-
onClick:
|
|
235
|
-
return setSearchOpen(false);
|
|
236
|
-
}
|
|
203
|
+
onClick: () => setSearchOpen(false)
|
|
237
204
|
}) : null);
|
|
238
205
|
};
|
|
239
|
-
var _default = Navigation;
|
|
240
|
-
exports.default = _default;
|
|
206
|
+
var _default = exports.default = Navigation;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -8,52 +7,50 @@ exports.default = void 0;
|
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
8
|
var _react = _interopRequireDefault(require("react"));
|
|
10
9
|
var _utils = require("../../../utils");
|
|
11
|
-
var _excluded = ["isSelected"],
|
|
12
|
-
_excluded2 = ["isSelected", "label", "url"],
|
|
13
|
-
_excluded3 = ["isSelected", "label", "url"];
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
11
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
16
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
18
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
20
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
21
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
22
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
23
12
|
/**
|
|
24
13
|
* This component is used internally to display links inside the Navigation component.
|
|
25
14
|
*/
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
15
|
+
const NavigationLink = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
generateLink,
|
|
18
|
+
link
|
|
19
|
+
} = _ref;
|
|
29
20
|
// const ariaCurrent = isSelected ? "page" : undefined;
|
|
30
21
|
if (generateLink) {
|
|
31
|
-
|
|
32
|
-
|
|
22
|
+
const {
|
|
23
|
+
isSelected,
|
|
24
|
+
...linkProps
|
|
25
|
+
} = link;
|
|
33
26
|
// If a function has been provided then use it to generate the link element.
|
|
34
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, generateLink(
|
|
35
|
-
isSelected
|
|
36
|
-
"aria-current": isSelected ? "page" : undefined
|
|
37
|
-
|
|
27
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, generateLink({
|
|
28
|
+
isSelected,
|
|
29
|
+
"aria-current": isSelected ? "page" : undefined,
|
|
30
|
+
...linkProps
|
|
31
|
+
}));
|
|
38
32
|
} else if ((0, _utils.isNavigationAnchor)(link)) {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
33
|
+
const {
|
|
34
|
+
isSelected,
|
|
35
|
+
label,
|
|
36
|
+
url,
|
|
37
|
+
...linkProps
|
|
38
|
+
} = link;
|
|
39
|
+
return /*#__PURE__*/_react.default.createElement("a", _extends({}, linkProps, {
|
|
44
40
|
href: url,
|
|
45
|
-
"aria-current":
|
|
41
|
+
"aria-current": isSelected ? "page" : undefined
|
|
46
42
|
}), label);
|
|
47
43
|
} else if ((0, _utils.isNavigationButton)(link)) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
44
|
+
const {
|
|
45
|
+
isSelected,
|
|
46
|
+
label,
|
|
47
|
+
url,
|
|
48
|
+
...linkProps
|
|
49
|
+
} = link;
|
|
50
|
+
return /*#__PURE__*/_react.default.createElement("button", _extends({}, linkProps, {
|
|
51
|
+
"aria-current": isSelected ? "page" : undefined
|
|
52
|
+
}), label);
|
|
55
53
|
}
|
|
56
54
|
return null;
|
|
57
55
|
};
|
|
58
|
-
var _default = NavigationLink;
|
|
59
|
-
exports.default = _default;
|
|
56
|
+
var _default = exports.default = NavigationLink;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -9,42 +8,26 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
9
|
var _NavigationLink = _interopRequireDefault(require("../NavigationLink"));
|
|
11
10
|
var _hooks = require("../../../hooks");
|
|
12
|
-
var _excluded = ["alignRight", "generateLink", "items", "label"];
|
|
13
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
-
function _getRequireWildcardCache(
|
|
15
|
-
function _interopRequireWildcard(
|
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
14
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
19
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
20
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
21
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
22
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
23
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
24
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
25
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
26
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
27
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
28
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
29
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
30
15
|
/**
|
|
31
16
|
* This component is used internally to display menus inside the Navigation component.
|
|
32
17
|
*/
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
var menuRef = (0, _hooks.useClickOutside)(closeMenu);
|
|
47
|
-
var menuId = (0, _hooks.useId)();
|
|
18
|
+
const NavigationMenu = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
alignRight,
|
|
21
|
+
generateLink,
|
|
22
|
+
items,
|
|
23
|
+
label,
|
|
24
|
+
...props
|
|
25
|
+
} = _ref;
|
|
26
|
+
const [isOpen, setIsOpen] = (0, _react.useState)(false);
|
|
27
|
+
const closeMenu = (0, _react.useCallback)(() => setIsOpen(false), [setIsOpen]);
|
|
28
|
+
const menuRef = (0, _react.useRef)(null);
|
|
29
|
+
(0, _hooks.useOnClickOutside)(menuRef, closeMenu);
|
|
30
|
+
const menuId = (0, _hooks.useId)();
|
|
48
31
|
return /*#__PURE__*/_react.default.createElement("li", _extends({}, props, {
|
|
49
32
|
className: (0, _classnames.default)(props.className, "p-navigation__item--dropdown-toggle", {
|
|
50
33
|
"is-active": isOpen
|
|
@@ -53,7 +36,7 @@ var NavigationMenu = function NavigationMenu(_ref) {
|
|
|
53
36
|
}), /*#__PURE__*/_react.default.createElement("button", {
|
|
54
37
|
"aria-controls": menuId,
|
|
55
38
|
className: "p-navigation__link u-no-margin--right",
|
|
56
|
-
onClick:
|
|
39
|
+
onClick: evt => {
|
|
57
40
|
evt.preventDefault();
|
|
58
41
|
setIsOpen(!isOpen);
|
|
59
42
|
}
|
|
@@ -63,16 +46,14 @@ var NavigationMenu = function NavigationMenu(_ref) {
|
|
|
63
46
|
"p-navigation__dropdown--right": alignRight
|
|
64
47
|
}),
|
|
65
48
|
id: menuId
|
|
66
|
-
}, items.map(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
})));
|
|
49
|
+
}, items.map((item, i) => /*#__PURE__*/_react.default.createElement("li", {
|
|
50
|
+
key: i
|
|
51
|
+
}, /*#__PURE__*/_react.default.createElement(_NavigationLink.default, {
|
|
52
|
+
generateLink: generateLink,
|
|
53
|
+
link: {
|
|
54
|
+
...item,
|
|
55
|
+
className: (0, _classnames.default)("p-navigation__dropdown-item", item.className)
|
|
56
|
+
}
|
|
57
|
+
})))));
|
|
76
58
|
};
|
|
77
|
-
var _default = NavigationMenu;
|
|
78
|
-
exports.default = _default;
|
|
59
|
+
var _default = exports.default = NavigationMenu;
|