@instructure/ui-top-nav-bar 8.33.1 → 8.33.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/CHANGELOG.md +4 -0
- package/es/TopNavBar/TopNavBarActionItems/TopNavBarActionItemsLocator.js +4 -2
- package/es/TopNavBar/TopNavBarActionItems/index.js +10 -35
- package/es/TopNavBar/TopNavBarActionItems/props.js +1 -0
- package/es/TopNavBar/TopNavBarActionItems/styles.js +0 -1
- package/es/TopNavBar/TopNavBarActionItems/theme.js +4 -4
- package/es/TopNavBar/TopNavBarBrand/TopNavBarBrandLocator.js +3 -5
- package/es/TopNavBar/TopNavBarBrand/index.js +6 -17
- package/es/TopNavBar/TopNavBarBrand/props.js +1 -0
- package/es/TopNavBar/TopNavBarBrand/styles.js +1 -2
- package/es/TopNavBar/TopNavBarBrand/theme.js +2 -2
- package/es/TopNavBar/TopNavBarContext.js +1 -1
- package/es/TopNavBar/TopNavBarItem/TopNavBarItemLocator.js +12 -15
- package/es/TopNavBar/TopNavBarItem/index.js +49 -136
- package/es/TopNavBar/TopNavBarItem/props.js +1 -0
- package/es/TopNavBar/TopNavBarItem/styles.js +5 -6
- package/es/TopNavBar/TopNavBarItem/theme.js +5 -5
- package/es/TopNavBar/TopNavBarLayout/DesktopLayout/TopNavBarDesktopLayoutLocator.js +3 -6
- package/es/TopNavBar/TopNavBarLayout/DesktopLayout/index.js +6 -20
- package/es/TopNavBar/TopNavBarLayout/DesktopLayout/props.js +5 -2
- package/es/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js +3 -4
- package/es/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js +6 -6
- package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/TopNavBarSmallViewportLayoutLocator.js +8 -16
- package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js +25 -83
- package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/props.js +5 -2
- package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/styles.js +4 -5
- package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js +6 -6
- package/es/TopNavBar/TopNavBarLayout/TopNavBarLayoutLocator.js +3 -1
- package/es/TopNavBar/TopNavBarLayout/index.js +8 -19
- package/es/TopNavBar/TopNavBarLayout/props.js +3 -1
- package/es/TopNavBar/TopNavBarLayout/theme.js +6 -4
- package/es/TopNavBar/TopNavBarLocator.js +2 -1
- package/es/TopNavBar/TopNavBarMenuItems/TopNavBarMenuItemsLocator.js +4 -4
- package/es/TopNavBar/TopNavBarMenuItems/index.js +9 -35
- package/es/TopNavBar/TopNavBarMenuItems/props.js +1 -0
- package/es/TopNavBar/TopNavBarMenuItems/styles.js +0 -1
- package/es/TopNavBar/TopNavBarMenuItems/theme.js +3 -3
- package/es/TopNavBar/TopNavBarUser/TopNavBarUserLocator.js +3 -1
- package/es/TopNavBar/TopNavBarUser/index.js +2 -18
- package/es/TopNavBar/TopNavBarUser/props.js +1 -0
- package/es/TopNavBar/TopNavBarUser/styles.js +0 -1
- package/es/TopNavBar/index.js +4 -12
- package/es/TopNavBar/props.js +1 -0
- package/es/TopNavBar/utils/exampleHelpers.js +9 -17
- package/es/TopNavBar/utils/exampleSvgFiles.js +1 -4
- package/es/TopNavBar/utils/mapItemsForDrilldown.js +16 -25
- package/es/index.js +1 -0
- package/lib/TopNavBar/TopNavBarActionItems/TopNavBarActionItemsLocator.js +3 -6
- package/lib/TopNavBar/TopNavBarActionItems/index.js +10 -55
- package/lib/TopNavBar/TopNavBarActionItems/props.js +1 -6
- package/lib/TopNavBar/TopNavBarActionItems/styles.js +0 -2
- package/lib/TopNavBar/TopNavBarActionItems/theme.js +4 -5
- package/lib/TopNavBar/TopNavBarBrand/TopNavBarBrandLocator.js +1 -8
- package/lib/TopNavBar/TopNavBarBrand/index.js +6 -30
- package/lib/TopNavBar/TopNavBarBrand/props.js +1 -3
- package/lib/TopNavBar/TopNavBarBrand/styles.js +1 -3
- package/lib/TopNavBar/TopNavBarBrand/theme.js +2 -3
- package/lib/TopNavBar/TopNavBarContext.js +0 -2
- package/lib/TopNavBar/TopNavBarItem/TopNavBarItemLocator.js +5 -15
- package/lib/TopNavBar/TopNavBarItem/index.js +49 -162
- package/lib/TopNavBar/TopNavBarItem/props.js +1 -6
- package/lib/TopNavBar/TopNavBarItem/styles.js +5 -7
- package/lib/TopNavBar/TopNavBarItem/theme.js +5 -6
- package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/TopNavBarDesktopLayoutLocator.js +3 -15
- package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/index.js +6 -30
- package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/props.js +5 -4
- package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js +3 -5
- package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js +6 -7
- package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/TopNavBarSmallViewportLayoutLocator.js +5 -21
- package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js +25 -111
- package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/props.js +5 -4
- package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/styles.js +4 -6
- package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js +6 -7
- package/lib/TopNavBar/TopNavBarLayout/TopNavBarLayoutLocator.js +1 -5
- package/lib/TopNavBar/TopNavBarLayout/index.js +8 -30
- package/lib/TopNavBar/TopNavBarLayout/props.js +3 -11
- package/lib/TopNavBar/TopNavBarLayout/theme.js +4 -7
- package/lib/TopNavBar/TopNavBarLocator.js +1 -3
- package/lib/TopNavBar/TopNavBarMenuItems/TopNavBarMenuItemsLocator.js +1 -7
- package/lib/TopNavBar/TopNavBarMenuItems/index.js +9 -52
- package/lib/TopNavBar/TopNavBarMenuItems/props.js +1 -5
- package/lib/TopNavBar/TopNavBarMenuItems/styles.js +0 -2
- package/lib/TopNavBar/TopNavBarMenuItems/theme.js +3 -4
- package/lib/TopNavBar/TopNavBarUser/TopNavBarUserLocator.js +1 -3
- package/lib/TopNavBar/TopNavBarUser/index.js +2 -29
- package/lib/TopNavBar/TopNavBarUser/props.js +1 -5
- package/lib/TopNavBar/TopNavBarUser/styles.js +0 -2
- package/lib/TopNavBar/index.js +3 -27
- package/lib/TopNavBar/props.js +1 -3
- package/lib/TopNavBar/utils/exampleHelpers.js +9 -39
- package/lib/TopNavBar/utils/exampleSvgFiles.js +0 -6
- package/lib/TopNavBar/utils/mapItemsForDrilldown.js +16 -37
- package/lib/index.js +0 -1
- package/package.json +27 -27
- package/tsconfig.build.tsbuildinfo +1 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
var _g, _path, _path2, _path3;
|
|
2
|
-
|
|
3
2
|
/*
|
|
4
3
|
* The MIT License (MIT)
|
|
5
4
|
*
|
|
@@ -23,8 +22,8 @@ var _g, _path, _path2, _path3;
|
|
|
23
22
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
24
23
|
* SOFTWARE.
|
|
25
24
|
*/
|
|
26
|
-
import React from 'react';
|
|
27
25
|
|
|
26
|
+
import React from 'react';
|
|
28
27
|
const getElevateLogo = fill => /*#__PURE__*/React.createElement("svg", {
|
|
29
28
|
id: "elevateLogo",
|
|
30
29
|
width: "90",
|
|
@@ -63,7 +62,6 @@ const getElevateLogo = fill => /*#__PURE__*/React.createElement("svg", {
|
|
|
63
62
|
}), /*#__PURE__*/React.createElement("path", {
|
|
64
63
|
d: "M80.9401 26.8809C80.9401 23.8156 83.1444 21.6397 86.1574 21.6397C88.1792 21.6397 89.4053 22.5318 90.0574 23.4424L88.3618 25.0597C88.1345 24.7133 87.823 24.4322 87.4575 24.2435C87.0919 24.0548 86.6846 23.9649 86.2748 23.9824C84.7096 23.9824 83.5983 25.1418 83.5983 26.8941C83.5983 28.6465 84.7018 29.8059 86.2748 29.8059C86.6855 29.8148 87.0919 29.7189 87.4565 29.527C87.8212 29.335 88.1325 29.0532 88.3618 28.7074L90.0574 30.3247C89.4053 31.2353 88.1792 32.1485 86.1574 32.1485C83.1444 32.1459 80.9401 29.97 80.9401 26.8809Z"
|
|
65
64
|
}))));
|
|
66
|
-
|
|
67
65
|
const getElevateIcon = fill => /*#__PURE__*/React.createElement("svg", {
|
|
68
66
|
id: "elevateIcon",
|
|
69
67
|
width: "40",
|
|
@@ -78,7 +76,6 @@ const getElevateIcon = fill => /*#__PURE__*/React.createElement("svg", {
|
|
|
78
76
|
})), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
|
|
79
77
|
d: "M26.7973 21.0347C26.7966 20.4238 26.5537 19.8382 26.1217 19.4063C25.6898 18.9743 25.1042 18.7314 24.4933 18.7307H24.376C24.3739 17.6701 23.9768 16.6484 23.2623 15.8647C22.5478 15.081 21.567 14.5915 20.5112 14.4916C19.4554 14.3917 18.4002 14.6886 17.5514 15.3244C16.7026 15.9602 16.121 16.8893 15.92 17.9307H15.808C15.0909 17.9307 14.4031 18.2155 13.896 18.7226C13.3889 19.2297 13.104 19.9175 13.104 20.6347C13.104 21.3518 13.3889 22.0396 13.896 22.5467C14.4031 23.0538 15.0909 23.3387 15.808 23.3387H24.4933C25.1044 23.3387 25.6904 23.0959 26.1225 22.6638C26.5546 22.2317 26.7973 21.6457 26.7973 21.0347ZM24.4933 22.0053H15.808C15.4445 22.0053 15.0958 21.8609 14.8388 21.6039C14.5817 21.3468 14.4373 20.9982 14.4373 20.6347C14.4373 20.2711 14.5817 19.9225 14.8388 19.6654C15.0958 19.4084 15.4445 19.264 15.808 19.264H17.1227L17.1627 18.64C17.1878 17.8599 17.5217 17.1217 18.0911 16.5879C18.6605 16.054 19.4186 15.7682 20.1987 15.7933C20.9788 15.8184 21.7169 16.1524 22.2508 16.7218C22.7846 17.2911 23.0704 18.0492 23.0453 18.8293V19.0587C23.0453 19.152 23.0453 19.2453 23.0293 19.3253L22.9627 20.0533H24.4933C24.7508 20.0533 24.9977 20.1556 25.1797 20.3376C25.3617 20.5197 25.464 20.7666 25.464 21.024C25.464 21.2814 25.3617 21.5283 25.1797 21.7104C24.9977 21.8924 24.7508 21.9947 24.4933 21.9947V22.0053Z"
|
|
80
78
|
})));
|
|
81
|
-
|
|
82
79
|
const elevateLogo = getElevateLogo('white');
|
|
83
80
|
const elevateLogoInverse = getElevateLogo('black');
|
|
84
81
|
const elevateIcon = getElevateIcon('white');
|
|
@@ -21,61 +21,58 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import React, { Children } from 'react';
|
|
25
26
|
import { warn } from '@instructure/console';
|
|
26
27
|
import { generateId } from '@instructure/ui-utils';
|
|
27
28
|
import { matchComponentTypes, generateInstanceCounterMap } from '@instructure/ui-react-utils';
|
|
28
29
|
import { Drilldown } from '@instructure/ui-drilldown';
|
|
29
30
|
import { TopNavBarItem } from '../TopNavBarItem';
|
|
30
|
-
|
|
31
31
|
const mapItemsForDrilldown = function (itemList) {
|
|
32
32
|
let options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
|
33
33
|
const submenus = [];
|
|
34
34
|
const currentPageId = options.currentPageId,
|
|
35
|
-
|
|
35
|
+
renderOptionContent = options.renderOptionContent;
|
|
36
36
|
const customPopoverIdMap = generateInstanceCounterMap();
|
|
37
37
|
Children.forEach(itemList, item => {
|
|
38
38
|
if (!item || !matchComponentTypes(item, [TopNavBarItem])) return;
|
|
39
39
|
const _item$props = item.props,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
40
|
+
renderSubmenu = _item$props.renderSubmenu,
|
|
41
|
+
customPopoverConfig = _item$props.customPopoverConfig,
|
|
42
|
+
id = _item$props.id,
|
|
43
|
+
children = _item$props.children,
|
|
44
|
+
status = _item$props.status,
|
|
45
|
+
variant = _item$props.variant,
|
|
46
|
+
href = _item$props.href,
|
|
47
|
+
onClick = _item$props.onClick;
|
|
48
48
|
let submenu = renderSubmenu;
|
|
49
49
|
let customPopover = customPopoverConfig;
|
|
50
50
|
let customPopoverId;
|
|
51
51
|
let optionSubPageId;
|
|
52
52
|
const submenuPages = [];
|
|
53
|
-
|
|
54
53
|
if (submenu) {
|
|
55
54
|
if (!matchComponentTypes(submenu, [Drilldown])) {
|
|
56
55
|
warn(false, `The "renderSubmenu" prop accepts only Drilldown components, but the item with id "${id}" received: "${renderSubmenu}".`);
|
|
57
56
|
submenu = void 0;
|
|
58
|
-
}
|
|
59
|
-
|
|
57
|
+
}
|
|
60
58
|
|
|
59
|
+
// if still has submenu...
|
|
61
60
|
if (submenu) {
|
|
62
61
|
optionSubPageId = submenu.props.rootPageId;
|
|
63
62
|
submenuPages.push(...Children.toArray(submenu.props.children));
|
|
64
63
|
}
|
|
65
64
|
}
|
|
66
|
-
|
|
67
65
|
if (customPopover) {
|
|
68
66
|
if (!customPopover.children) {
|
|
69
67
|
warn(false, `Pass the content of the custom Popover as "customPopoverConfig.children" for the item with id: "${id}".`);
|
|
70
68
|
customPopover = void 0;
|
|
71
69
|
}
|
|
72
|
-
|
|
73
70
|
if (submenu) {
|
|
74
71
|
warn(false, `TopNavBar.Items are not allowed to have both the "renderSubmenu" and "customPopoverConfig" props. For submenus, pass a Drilldown component via the "renderSubmenu" prop, and only use "customPopoverConfig" for custom features. Item with id: "${id}" will ignore the "customPopoverConfig" prop.`);
|
|
75
72
|
customPopover = void 0;
|
|
76
|
-
}
|
|
77
|
-
|
|
73
|
+
}
|
|
78
74
|
|
|
75
|
+
// if still has customPopover...
|
|
79
76
|
if (customPopover) {
|
|
80
77
|
customPopoverId = generateId(`TopNavBarItem__customPopoverOption`, customPopoverIdMap);
|
|
81
78
|
optionSubPageId = customPopoverId;
|
|
@@ -87,21 +84,17 @@ const mapItemsForDrilldown = function (itemList) {
|
|
|
87
84
|
}, customPopover.children)));
|
|
88
85
|
}
|
|
89
86
|
}
|
|
90
|
-
|
|
91
87
|
let ariaCurrent = item.props['aria-current'] || (id === currentPageId ? 'page' : void 0);
|
|
92
|
-
|
|
93
88
|
if (ariaCurrent) {
|
|
94
89
|
if (variant !== 'default') {
|
|
95
90
|
warn(false, `Only \`variant="default"\` items can be set to current/active, but the item with id "${id}" is "${variant}" variant.`);
|
|
96
91
|
ariaCurrent = void 0;
|
|
97
92
|
}
|
|
98
|
-
|
|
99
93
|
if (status === 'disabled') {
|
|
100
94
|
warn(false, `Disabled items can not be set to current/active, but the item with id "${id}" is disabled.`);
|
|
101
95
|
ariaCurrent = void 0;
|
|
102
96
|
}
|
|
103
97
|
}
|
|
104
|
-
|
|
105
98
|
submenus.push({
|
|
106
99
|
item,
|
|
107
100
|
submenuPages,
|
|
@@ -112,7 +105,8 @@ const mapItemsForDrilldown = function (itemList) {
|
|
|
112
105
|
onOptionClick: event => {
|
|
113
106
|
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
114
107
|
},
|
|
115
|
-
children: typeof renderOptionContent === 'function' ? renderOptionContent(children, {
|
|
108
|
+
children: typeof renderOptionContent === 'function' ? renderOptionContent(children, {
|
|
109
|
+
...item.props,
|
|
116
110
|
status: ariaCurrent === 'page' ? 'active' : item.props.status
|
|
117
111
|
}) : children,
|
|
118
112
|
subPageId: optionSubPageId,
|
|
@@ -122,12 +116,10 @@ const mapItemsForDrilldown = function (itemList) {
|
|
|
122
116
|
});
|
|
123
117
|
return submenus;
|
|
124
118
|
};
|
|
125
|
-
|
|
126
119
|
const renderMappedItemDrilldownSubpages = mappedItems => {
|
|
127
120
|
const subPages = mappedItems.map(option => option.submenuPages).filter(submenu => !!submenu);
|
|
128
121
|
return subPages.flat();
|
|
129
122
|
};
|
|
130
|
-
|
|
131
123
|
const renderMappedItemsAsDrilldownOptions = mappedItems => {
|
|
132
124
|
return mappedItems.map(mappedItem => {
|
|
133
125
|
const optionData = mappedItem.optionData;
|
|
@@ -137,6 +129,5 @@ const renderMappedItemsAsDrilldownOptions = mappedItems => {
|
|
|
137
129
|
}), optionData.children);
|
|
138
130
|
});
|
|
139
131
|
};
|
|
140
|
-
|
|
141
132
|
export default mapItemsForDrilldown;
|
|
142
133
|
export { mapItemsForDrilldown, renderMappedItemDrilldownSubpages, renderMappedItemsAsDrilldownOptions };
|
package/es/index.js
CHANGED
|
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.TopNavBarActionItemsLocator = void 0;
|
|
7
|
-
|
|
8
7
|
var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
|
|
9
|
-
|
|
10
8
|
var _TruncateListLocator = require("@instructure/ui-truncate-list/lib/TruncateList/TruncateListLocator");
|
|
11
|
-
|
|
12
9
|
var _TopNavBarItemLocator = require("../TopNavBarItem/TopNavBarItemLocator");
|
|
13
|
-
|
|
14
10
|
var _index = require("./index");
|
|
15
|
-
|
|
16
11
|
/*
|
|
17
12
|
* The MIT License (MIT)
|
|
18
13
|
*
|
|
@@ -41,7 +36,9 @@ var _index = require("./index");
|
|
|
41
36
|
// @ts-expect-error bypass no type definition found error
|
|
42
37
|
|
|
43
38
|
/* eslint-enable no-restricted-imports */
|
|
44
|
-
|
|
39
|
+
|
|
40
|
+
const TopNavBarActionItemsLocator = (0, _locator.locator)(
|
|
41
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
45
42
|
_index.TopNavBarActionItems.selector, {
|
|
46
43
|
findAllActionItems: function () {
|
|
47
44
|
return _TopNavBarItemLocator.TopNavBarItemLocator.findAll(...arguments);
|
|
@@ -1,50 +1,29 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
|
|
5
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = exports.TopNavBarActionItems = void 0;
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
10
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
15
|
-
|
|
16
11
|
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
17
|
-
|
|
18
12
|
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
|
19
|
-
|
|
20
13
|
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
21
|
-
|
|
22
14
|
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
23
|
-
|
|
24
15
|
var _console = require("@instructure/console");
|
|
25
|
-
|
|
26
16
|
var _emotion = require("@instructure/emotion");
|
|
27
|
-
|
|
28
17
|
var _Drilldown = require("@instructure/ui-drilldown/lib/Drilldown");
|
|
29
|
-
|
|
30
18
|
var _IconMoreLine = require("@instructure/ui-icons/lib/IconMoreLine.js");
|
|
31
|
-
|
|
32
19
|
var _TruncateList = require("@instructure/ui-truncate-list/lib/TruncateList");
|
|
33
|
-
|
|
34
20
|
var _TopNavBarItem = require("../TopNavBarItem");
|
|
35
|
-
|
|
36
21
|
var _mapItemsForDrilldown = require("../utils/mapItemsForDrilldown");
|
|
37
|
-
|
|
38
22
|
var _TopNavBarContext = require("../TopNavBarContext");
|
|
39
|
-
|
|
40
23
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
41
|
-
|
|
42
24
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
43
|
-
|
|
44
25
|
var _props = require("./props");
|
|
45
|
-
|
|
46
26
|
var _dec, _dec2, _dec3, _class, _class2;
|
|
47
|
-
|
|
48
27
|
/**
|
|
49
28
|
---
|
|
50
29
|
parent: TopNavBar
|
|
@@ -59,16 +38,13 @@ let TopNavBarActionItems = (_dec = (0, _withDeterministicId.withDeterministicId)
|
|
|
59
38
|
this.ref = null;
|
|
60
39
|
this._hiddenActionItemsMenuId = void 0;
|
|
61
40
|
this._hiddenActionItemsMenuTriggerId = void 0;
|
|
62
|
-
|
|
63
41
|
this.handleRef = el => {
|
|
64
42
|
const elementRef = this.props.elementRef;
|
|
65
43
|
this.ref = el;
|
|
66
|
-
|
|
67
44
|
if (typeof elementRef === 'function') {
|
|
68
45
|
elementRef(el);
|
|
69
46
|
}
|
|
70
47
|
};
|
|
71
|
-
|
|
72
48
|
this.renderOptionContent = (children, itemProps) => {
|
|
73
49
|
const styles = this.props.styles;
|
|
74
50
|
const status = itemProps.status;
|
|
@@ -76,7 +52,6 @@ let TopNavBarActionItems = (_dec = (0, _withDeterministicId.withDeterministicId)
|
|
|
76
52
|
css: status === 'active' ? styles === null || styles === void 0 ? void 0 : styles.dropdownMenuOptionActive : styles === null || styles === void 0 ? void 0 : styles.dropdownMenuOption
|
|
77
53
|
}, children);
|
|
78
54
|
};
|
|
79
|
-
|
|
80
55
|
this._hiddenActionItemsMenuId = props.deterministicId('TopNavBarActionItems-hiddenActionItemsMenu');
|
|
81
56
|
this._hiddenActionItemsMenuTriggerId = props.deterministicId('TopNavBarActionItems-hiddenActionItemsMenuTrigger');
|
|
82
57
|
this.state = {
|
|
@@ -84,45 +59,35 @@ let TopNavBarActionItems = (_dec = (0, _withDeterministicId.withDeterministicId)
|
|
|
84
59
|
visibleActionItemsCount: void 0
|
|
85
60
|
};
|
|
86
61
|
}
|
|
87
|
-
|
|
88
62
|
componentDidMount() {
|
|
89
63
|
var _this$props$makeStyle, _this$props;
|
|
90
|
-
|
|
91
64
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
|
|
92
65
|
}
|
|
93
|
-
|
|
94
66
|
componentDidUpdate(prevProps) {
|
|
95
67
|
var _this$props$makeStyle2, _this$props2;
|
|
96
|
-
|
|
97
68
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
|
|
98
|
-
|
|
99
69
|
if (this.context.layout === 'smallViewport' && _react.default.Children.count(prevProps.children) !== _react.default.Children.count(this.props.children)) {
|
|
100
70
|
this.setState({
|
|
101
71
|
key: this.state.key + 1
|
|
102
72
|
});
|
|
103
73
|
}
|
|
104
74
|
}
|
|
105
|
-
|
|
106
75
|
get makeStylesVariables() {
|
|
107
76
|
return {
|
|
108
77
|
layout: this.context.layout
|
|
109
78
|
};
|
|
110
79
|
}
|
|
111
|
-
|
|
112
80
|
get childrenArray() {
|
|
113
81
|
const children = _react.default.Children.toArray(this.props.children);
|
|
114
|
-
|
|
115
82
|
return children.map(child => {
|
|
116
83
|
if (!(child !== null && child !== void 0 && child.props)) {
|
|
117
84
|
return null;
|
|
118
85
|
}
|
|
119
|
-
|
|
120
86
|
const _child$props = child.props,
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
87
|
+
id = _child$props.id,
|
|
88
|
+
renderAvatar = _child$props.renderAvatar,
|
|
89
|
+
renderIcon = _child$props.renderIcon,
|
|
90
|
+
variant = _child$props.variant;
|
|
126
91
|
if (renderAvatar) {
|
|
127
92
|
(0, _console.warn)(false, `Items in <TopNavBar.ActionItems> are not allowed to have avatars, please remove it from item with the id "${id}".`);
|
|
128
93
|
return (0, _safeCloneElement.safeCloneElement)(child, {
|
|
@@ -130,26 +95,22 @@ let TopNavBarActionItems = (_dec = (0, _withDeterministicId.withDeterministicId)
|
|
|
130
95
|
variant: 'default'
|
|
131
96
|
});
|
|
132
97
|
}
|
|
133
|
-
|
|
134
98
|
if (this.context.layout === 'smallViewport' && variant !== 'icon') {
|
|
135
99
|
if (!renderIcon) {
|
|
136
100
|
(0, _console.error)(false, `Items in <TopNavBar.ActionItems> are required to have the \`renderIcon\` prop, because only the icons are displayed due to the lack of space. Please add an icon to the item with the id "${id}".`);
|
|
137
101
|
return null;
|
|
138
102
|
}
|
|
139
|
-
|
|
140
103
|
return (0, _safeCloneElement.safeCloneElement)(child, {
|
|
141
104
|
variant: 'icon'
|
|
142
105
|
});
|
|
143
106
|
}
|
|
144
|
-
|
|
145
107
|
return child;
|
|
146
108
|
});
|
|
147
109
|
}
|
|
148
|
-
|
|
149
110
|
renderHiddenActionItemsMenu(hiddenItems) {
|
|
150
111
|
const _this$props3 = this.props,
|
|
151
|
-
|
|
152
|
-
|
|
112
|
+
renderHiddenItemsMenuTriggerLabel = _this$props3.renderHiddenItemsMenuTriggerLabel,
|
|
113
|
+
renderHiddenItemsMenuTriggerTooltip = _this$props3.renderHiddenItemsMenuTriggerTooltip;
|
|
153
114
|
const mappedItems = (0, _mapItemsForDrilldown.mapItemsForDrilldown)(hiddenItems, {
|
|
154
115
|
renderOptionContent: this.renderOptionContent
|
|
155
116
|
});
|
|
@@ -171,11 +132,10 @@ let TopNavBarActionItems = (_dec = (0, _withDeterministicId.withDeterministicId)
|
|
|
171
132
|
}, options), ...subPages])
|
|
172
133
|
}, label);
|
|
173
134
|
}
|
|
174
|
-
|
|
175
135
|
renderTruncatedActionItemList() {
|
|
176
136
|
const _this$props4 = this.props,
|
|
177
|
-
|
|
178
|
-
|
|
137
|
+
listLabel = _this$props4.listLabel,
|
|
138
|
+
styles = _this$props4.styles;
|
|
179
139
|
return (0, _emotion.jsx)(_TruncateList.TruncateList, Object.assign({}, (0, _passthroughProps.passthroughProps)((0, _omitProps.omitProps)(this.props, _props.allowedProps)), {
|
|
180
140
|
key: this.state.key // rerender if child count changes
|
|
181
141
|
,
|
|
@@ -192,20 +152,16 @@ let TopNavBarActionItems = (_dec = (0, _withDeterministicId.withDeterministicId)
|
|
|
192
152
|
"aria-label": listLabel
|
|
193
153
|
}), this.childrenArray);
|
|
194
154
|
}
|
|
195
|
-
|
|
196
155
|
render() {
|
|
197
156
|
const _this$props5 = this.props,
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
157
|
+
listLabel = _this$props5.listLabel,
|
|
158
|
+
styles = _this$props5.styles;
|
|
201
159
|
if (!this.childrenArray.length) {
|
|
202
160
|
return null;
|
|
203
161
|
}
|
|
204
|
-
|
|
205
162
|
if (this.context.layout === 'smallViewport') {
|
|
206
163
|
return this.renderTruncatedActionItemList();
|
|
207
164
|
}
|
|
208
|
-
|
|
209
165
|
return (0, _emotion.jsx)("ul", Object.assign({}, (0, _omitProps.omitProps)(this.props, _props.allowedProps), {
|
|
210
166
|
ref: this.handleRef,
|
|
211
167
|
css: styles === null || styles === void 0 ? void 0 : styles.topNavBarActionItems,
|
|
@@ -215,7 +171,6 @@ let TopNavBarActionItems = (_dec = (0, _withDeterministicId.withDeterministicId)
|
|
|
215
171
|
key: item.props.id
|
|
216
172
|
}, item)));
|
|
217
173
|
}
|
|
218
|
-
|
|
219
174
|
}, _class2.displayName = "TopNavBarActionItems", _class2.componentId = 'TopNavBar.ActionItems', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class) || _class);
|
|
220
175
|
exports.TopNavBarActionItems = TopNavBarActionItems;
|
|
221
176
|
var _default = TopNavBarActionItems;
|
|
@@ -1,20 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
|
13
|
-
|
|
14
10
|
var _TopNavBarItem = require("../TopNavBarItem");
|
|
15
|
-
|
|
16
11
|
var _props = require("../TopNavBarItem/props");
|
|
17
|
-
|
|
18
12
|
/*
|
|
19
13
|
* The MIT License (MIT)
|
|
20
14
|
*
|
|
@@ -38,6 +32,7 @@ var _props = require("../TopNavBarItem/props");
|
|
|
38
32
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
39
33
|
* SOFTWARE.
|
|
40
34
|
*/
|
|
35
|
+
|
|
41
36
|
const propTypes = {
|
|
42
37
|
children: _Children.Children.oneOf([_TopNavBarItem.TopNavBarItem]),
|
|
43
38
|
listLabel: _propTypes.default.string,
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
/*
|
|
9
8
|
* The MIT License (MIT)
|
|
10
9
|
*
|
|
@@ -79,6 +78,5 @@ const generateStyle = (componentTheme, _props, state) => {
|
|
|
79
78
|
}
|
|
80
79
|
};
|
|
81
80
|
};
|
|
82
|
-
|
|
83
81
|
var _default = generateStyle;
|
|
84
82
|
exports.default = _default;
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
/*
|
|
9
8
|
* The MIT License (MIT)
|
|
10
9
|
*
|
|
@@ -36,8 +35,8 @@ exports.default = void 0;
|
|
|
36
35
|
*/
|
|
37
36
|
const generateComponentTheme = theme => {
|
|
38
37
|
const typography = theme.typography,
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
spacing = theme.spacing,
|
|
39
|
+
borders = theme.borders;
|
|
41
40
|
const componentVariables = {
|
|
42
41
|
smallViewportActionItemContainerMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxLarge,
|
|
43
42
|
smallViewportActionItemContainerMaxWidth: '50%',
|
|
@@ -46,9 +45,9 @@ const generateComponentTheme = theme => {
|
|
|
46
45
|
smallViewportDropdownMenuActiveOptionIndicatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
|
|
47
46
|
smallViewportDropdownMenuActiveOptionIndicatorColor: 'currentColor'
|
|
48
47
|
};
|
|
49
|
-
return {
|
|
48
|
+
return {
|
|
49
|
+
...componentVariables
|
|
50
50
|
};
|
|
51
51
|
};
|
|
52
|
-
|
|
53
52
|
var _default = generateComponentTheme;
|
|
54
53
|
exports.default = _default;
|
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.TopNavBarBrandLocator = void 0;
|
|
7
|
-
|
|
8
7
|
var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
|
|
9
|
-
|
|
10
8
|
var _uiTestUtils = require("@instructure/ui-test-utils");
|
|
11
|
-
|
|
12
9
|
var _index = require("./index");
|
|
13
|
-
|
|
14
10
|
/*
|
|
15
11
|
* The MIT License (MIT)
|
|
16
12
|
*
|
|
@@ -34,34 +30,31 @@ var _index = require("./index");
|
|
|
34
30
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
35
31
|
* SOFTWARE.
|
|
36
32
|
*/
|
|
33
|
+
|
|
37
34
|
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
38
35
|
const TopNavBarBrandLocator = (0, _locator.locator)(_index.TopNavBarBrand.selector, {
|
|
39
36
|
findContainer: function () {
|
|
40
37
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
41
38
|
args[_key] = arguments[_key];
|
|
42
39
|
}
|
|
43
|
-
|
|
44
40
|
return (0, _uiTestUtils.find)('[class$="-topNavBarBrand__container"]', ...args);
|
|
45
41
|
},
|
|
46
42
|
findBrandNameContainer: function () {
|
|
47
43
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
48
44
|
args[_key2] = arguments[_key2];
|
|
49
45
|
}
|
|
50
|
-
|
|
51
46
|
return (0, _uiTestUtils.find)('[class$="-topNavBarBrand__nameContainer"]', ...args);
|
|
52
47
|
},
|
|
53
48
|
findBrandIconContainer: function () {
|
|
54
49
|
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
55
50
|
args[_key3] = arguments[_key3];
|
|
56
51
|
}
|
|
57
|
-
|
|
58
52
|
return (0, _uiTestUtils.find)('[class$="-topNavBarBrand__iconContainer"]', ...args);
|
|
59
53
|
},
|
|
60
54
|
findScreenReaderLabel: function () {
|
|
61
55
|
for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
|
62
56
|
args[_key4] = arguments[_key4];
|
|
63
57
|
}
|
|
64
|
-
|
|
65
58
|
return (0, _uiTestUtils.find)('[class$="-screenReaderContent"]', ...args);
|
|
66
59
|
}
|
|
67
60
|
});
|
|
@@ -1,38 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
|
|
5
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = exports.TopNavBarBrand = void 0;
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
10
|
var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
|
|
15
|
-
|
|
16
11
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
17
|
-
|
|
18
12
|
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
19
|
-
|
|
20
13
|
var _emotion = require("@instructure/emotion");
|
|
21
|
-
|
|
22
14
|
var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
|
|
23
|
-
|
|
24
15
|
var _View = require("@instructure/ui-view/lib/View");
|
|
25
|
-
|
|
26
16
|
var _TopNavBarContext = require("../TopNavBarContext");
|
|
27
|
-
|
|
28
17
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
29
|
-
|
|
30
18
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
31
|
-
|
|
32
19
|
var _props = require("./props");
|
|
33
|
-
|
|
34
20
|
var _dec, _dec2, _class, _class2;
|
|
35
|
-
|
|
36
21
|
/**
|
|
37
22
|
---
|
|
38
23
|
parent: TopNavBar
|
|
@@ -45,43 +30,35 @@ let TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
45
30
|
constructor() {
|
|
46
31
|
super(...arguments);
|
|
47
32
|
this.ref = null;
|
|
48
|
-
|
|
49
33
|
this.handleRef = el => {
|
|
50
34
|
const elementRef = this.props.elementRef;
|
|
51
35
|
this.ref = el;
|
|
52
|
-
|
|
53
36
|
if (typeof elementRef === 'function') {
|
|
54
37
|
elementRef(el);
|
|
55
38
|
}
|
|
56
39
|
};
|
|
57
40
|
}
|
|
58
|
-
|
|
59
41
|
componentDidMount() {
|
|
60
42
|
var _this$props$makeStyle, _this$props;
|
|
61
|
-
|
|
62
43
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
|
|
63
44
|
}
|
|
64
|
-
|
|
65
45
|
componentDidUpdate() {
|
|
66
46
|
var _this$props$makeStyle2, _this$props2;
|
|
67
|
-
|
|
68
47
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
|
|
69
48
|
}
|
|
70
|
-
|
|
71
49
|
get makeStylesVariables() {
|
|
72
50
|
return {
|
|
73
51
|
layout: this.context.layout
|
|
74
52
|
};
|
|
75
53
|
}
|
|
76
|
-
|
|
77
54
|
render() {
|
|
78
55
|
const _this$props3 = this.props,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
56
|
+
screenReaderLabel = _this$props3.screenReaderLabel,
|
|
57
|
+
renderName = _this$props3.renderName,
|
|
58
|
+
renderIcon = _this$props3.renderIcon,
|
|
59
|
+
href = _this$props3.href,
|
|
60
|
+
onClick = _this$props3.onClick,
|
|
61
|
+
styles = _this$props3.styles;
|
|
85
62
|
const ElementType = (0, _getElementType.getElementType)(TopNavBarBrand, this.props);
|
|
86
63
|
return (0, _emotion.jsx)("div", {
|
|
87
64
|
ref: this.handleRef,
|
|
@@ -108,7 +85,6 @@ let TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
108
85
|
"aria-hidden": "true"
|
|
109
86
|
}, renderName)));
|
|
110
87
|
}
|
|
111
|
-
|
|
112
88
|
}, _class2.displayName = "TopNavBarBrand", _class2.componentId = 'TopNavBar.Brand', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class);
|
|
113
89
|
exports.TopNavBarBrand = TopNavBarBrand;
|
|
114
90
|
var _default = TopNavBarBrand;
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
/*
|
|
13
10
|
* The MIT License (MIT)
|
|
14
11
|
*
|
|
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
32
29
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
33
30
|
* SOFTWARE.
|
|
34
31
|
*/
|
|
32
|
+
|
|
35
33
|
const propTypes = {
|
|
36
34
|
screenReaderLabel: _propTypes.default.string.isRequired,
|
|
37
35
|
renderName: _propTypes.default.node,
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
/*
|
|
9
8
|
* The MIT License (MIT)
|
|
10
9
|
*
|
|
@@ -41,7 +40,7 @@ exports.default = void 0;
|
|
|
41
40
|
*/
|
|
42
41
|
const generateStyle = (componentTheme, props, state) => {
|
|
43
42
|
const nameBackground = props.nameBackground,
|
|
44
|
-
|
|
43
|
+
iconBackground = props.iconBackground;
|
|
45
44
|
const isDesktop = state.layout === 'desktop';
|
|
46
45
|
return {
|
|
47
46
|
topNavBarBrand: {
|
|
@@ -94,6 +93,5 @@ const generateStyle = (componentTheme, props, state) => {
|
|
|
94
93
|
focusOutlineInset: componentTheme.focusOutlineInset
|
|
95
94
|
};
|
|
96
95
|
};
|
|
97
|
-
|
|
98
96
|
var _default = generateStyle;
|
|
99
97
|
exports.default = _default;
|