@instructure/ui-drilldown 8.24.1-snapshot.17 → 8.24.1-snapshot.19
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/es/Drilldown/DrilldownOption/index.js +0 -1
- package/es/Drilldown/index.js +0 -1
- package/lib/Drilldown/DrilldownOption/index.js +0 -1
- package/lib/Drilldown/index.js +0 -1
- package/package.json +21 -21
- package/src/Drilldown/DrilldownOption/index.tsx +0 -1
- package/src/Drilldown/README.md +33 -27
- package/src/Drilldown/index.tsx +1 -3
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Drilldown/DrilldownOption/index.d.ts +0 -1
- package/types/Drilldown/DrilldownOption/index.d.ts.map +1 -1
- package/types/Drilldown/index.d.ts.map +1 -1
|
@@ -51,7 +51,6 @@ let DrilldownOption = (_dec = withStyle(null, optionsItemThemeGenerator), _dec(_
|
|
|
51
51
|
disabled: false,
|
|
52
52
|
beforeLabelContentVAlign: 'start',
|
|
53
53
|
afterLabelContentVAlign: 'start',
|
|
54
|
-
descriptionRole: 'note',
|
|
55
54
|
as: 'li',
|
|
56
55
|
role: 'menuitem'
|
|
57
56
|
}, _class2)) || _class);
|
package/es/Drilldown/index.js
CHANGED
|
@@ -36,7 +36,6 @@ let DrilldownOption = (_dec = (0, _emotion.withStyle)(null, _uiOptions.optionsIt
|
|
|
36
36
|
disabled: false,
|
|
37
37
|
beforeLabelContentVAlign: 'start',
|
|
38
38
|
afterLabelContentVAlign: 'start',
|
|
39
|
-
descriptionRole: 'note',
|
|
40
39
|
as: 'li',
|
|
41
40
|
role: 'menuitem'
|
|
42
41
|
}, _class2)) || _class);
|
package/lib/Drilldown/index.js
CHANGED
|
@@ -1003,7 +1003,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
|
|
|
1003
1003
|
alignSelf: vAlignMap[afterLabelContentVAlign]
|
|
1004
1004
|
}
|
|
1005
1005
|
}, (0, _emotion.jsx)("span", {
|
|
1006
|
-
role: "note",
|
|
1007
1006
|
id: infoAriaId
|
|
1008
1007
|
}, labelInfo)) : null));
|
|
1009
1008
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-drilldown",
|
|
3
|
-
"version": "8.24.1-snapshot.
|
|
3
|
+
"version": "8.24.1-snapshot.19+102c13da9",
|
|
4
4
|
"description": "A drilldown menu component",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,28 +24,28 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.13.10",
|
|
27
|
-
"@instructure/console": "8.24.1-snapshot.
|
|
28
|
-
"@instructure/emotion": "8.24.1-snapshot.
|
|
29
|
-
"@instructure/shared-types": "8.24.1-snapshot.
|
|
30
|
-
"@instructure/ui-dom-utils": "8.24.1-snapshot.
|
|
31
|
-
"@instructure/ui-icons": "8.24.1-snapshot.
|
|
32
|
-
"@instructure/ui-options": "8.24.1-snapshot.
|
|
33
|
-
"@instructure/ui-popover": "8.24.1-snapshot.
|
|
34
|
-
"@instructure/ui-position": "8.24.1-snapshot.
|
|
35
|
-
"@instructure/ui-prop-types": "8.24.1-snapshot.
|
|
36
|
-
"@instructure/ui-react-utils": "8.24.1-snapshot.
|
|
37
|
-
"@instructure/ui-selectable": "8.24.1-snapshot.
|
|
38
|
-
"@instructure/ui-testable": "8.24.1-snapshot.
|
|
39
|
-
"@instructure/ui-utils": "8.24.1-snapshot.
|
|
40
|
-
"@instructure/ui-view": "8.24.1-snapshot.
|
|
27
|
+
"@instructure/console": "8.24.1-snapshot.19+102c13da9",
|
|
28
|
+
"@instructure/emotion": "8.24.1-snapshot.19+102c13da9",
|
|
29
|
+
"@instructure/shared-types": "8.24.1-snapshot.19+102c13da9",
|
|
30
|
+
"@instructure/ui-dom-utils": "8.24.1-snapshot.19+102c13da9",
|
|
31
|
+
"@instructure/ui-icons": "8.24.1-snapshot.19+102c13da9",
|
|
32
|
+
"@instructure/ui-options": "8.24.1-snapshot.19+102c13da9",
|
|
33
|
+
"@instructure/ui-popover": "8.24.1-snapshot.19+102c13da9",
|
|
34
|
+
"@instructure/ui-position": "8.24.1-snapshot.19+102c13da9",
|
|
35
|
+
"@instructure/ui-prop-types": "8.24.1-snapshot.19+102c13da9",
|
|
36
|
+
"@instructure/ui-react-utils": "8.24.1-snapshot.19+102c13da9",
|
|
37
|
+
"@instructure/ui-selectable": "8.24.1-snapshot.19+102c13da9",
|
|
38
|
+
"@instructure/ui-testable": "8.24.1-snapshot.19+102c13da9",
|
|
39
|
+
"@instructure/ui-utils": "8.24.1-snapshot.19+102c13da9",
|
|
40
|
+
"@instructure/ui-view": "8.24.1-snapshot.19+102c13da9",
|
|
41
41
|
"prop-types": "^15"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@instructure/ui-babel-preset": "8.24.1-snapshot.
|
|
45
|
-
"@instructure/ui-color-utils": "8.24.1-snapshot.
|
|
46
|
-
"@instructure/ui-test-locator": "8.24.1-snapshot.
|
|
47
|
-
"@instructure/ui-test-utils": "8.24.1-snapshot.
|
|
48
|
-
"@instructure/ui-themes": "8.24.1-snapshot.
|
|
44
|
+
"@instructure/ui-babel-preset": "8.24.1-snapshot.19+102c13da9",
|
|
45
|
+
"@instructure/ui-color-utils": "8.24.1-snapshot.19+102c13da9",
|
|
46
|
+
"@instructure/ui-test-locator": "8.24.1-snapshot.19+102c13da9",
|
|
47
|
+
"@instructure/ui-test-utils": "8.24.1-snapshot.19+102c13da9",
|
|
48
|
+
"@instructure/ui-themes": "8.24.1-snapshot.19+102c13da9"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": ">=16.8 <=17"
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"access": "public"
|
|
55
55
|
},
|
|
56
56
|
"sideEffects": false,
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "102c13da991ad65ffde83ca7e0f23cbb760b8c68"
|
|
58
58
|
}
|
package/src/Drilldown/README.md
CHANGED
|
@@ -103,19 +103,19 @@ example: true
|
|
|
103
103
|
---
|
|
104
104
|
<Drilldown rootPageId='root' width="20rem" maxHeight="30rem">
|
|
105
105
|
<Drilldown.Page id="root">
|
|
106
|
-
<Drilldown.Option id="
|
|
106
|
+
<Drilldown.Option id="linkExampleOption1" href="/#Options">
|
|
107
107
|
Options component
|
|
108
108
|
</Drilldown.Option>
|
|
109
|
-
<Drilldown.Option id="
|
|
109
|
+
<Drilldown.Option id="linkExampleOption2"href="/#Menu">
|
|
110
110
|
Menu component
|
|
111
111
|
</Drilldown.Option>
|
|
112
|
-
<Drilldown.Option id="
|
|
112
|
+
<Drilldown.Option id="linkExampleOption3" href="/#Select">
|
|
113
113
|
Options component
|
|
114
114
|
</Drilldown.Option>
|
|
115
|
-
<Drilldown.Option id="
|
|
115
|
+
<Drilldown.Option id="linkExampleOption4" href="/#SimpleSelect" disabled>
|
|
116
116
|
SimpleSelect component
|
|
117
117
|
</Drilldown.Option>
|
|
118
|
-
<Drilldown.Option id="
|
|
118
|
+
<Drilldown.Option id="linkExampleOption5" href="/#TreeBrowser">
|
|
119
119
|
TreeBrowser component
|
|
120
120
|
</Drilldown.Option>
|
|
121
121
|
</Drilldown.Page>
|
|
@@ -131,7 +131,7 @@ example: true
|
|
|
131
131
|
<Drilldown rootPageId='root' width="20rem" maxHeight="30rem">
|
|
132
132
|
<Drilldown.Page id="root">
|
|
133
133
|
<Drilldown.Option
|
|
134
|
-
id="
|
|
134
|
+
id="renderElementExampleOption1"
|
|
135
135
|
description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
|
|
136
136
|
renderBeforeLabel={IconCheckSolid}
|
|
137
137
|
renderAfterLabel={IconArrowOpenEndSolid}
|
|
@@ -141,7 +141,7 @@ example: true
|
|
|
141
141
|
Option
|
|
142
142
|
</Drilldown.Option>
|
|
143
143
|
<Drilldown.Option
|
|
144
|
-
id="
|
|
144
|
+
id="renderElementExampleOption2"
|
|
145
145
|
description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
|
|
146
146
|
renderBeforeLabel={IconCheckSolid}
|
|
147
147
|
renderAfterLabel={IconArrowOpenEndSolid}
|
|
@@ -151,7 +151,7 @@ example: true
|
|
|
151
151
|
Option
|
|
152
152
|
</Drilldown.Option>
|
|
153
153
|
<Drilldown.Option
|
|
154
|
-
id="
|
|
154
|
+
id="renderElementExampleOption3"
|
|
155
155
|
description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
|
|
156
156
|
renderBeforeLabel={IconCheckSolid}
|
|
157
157
|
renderAfterLabel={IconArrowOpenEndSolid}
|
|
@@ -564,13 +564,13 @@ class BackNavigationExample extends React.Component {
|
|
|
564
564
|
renderTitle={showTitle && 'Root page'}
|
|
565
565
|
renderActionLabel={showAction && 'Action!'}
|
|
566
566
|
>
|
|
567
|
-
<Drilldown.Option id="
|
|
567
|
+
<Drilldown.Option id="BackNavigationRoot1" subPageId='secondPage'>
|
|
568
568
|
Option
|
|
569
569
|
</Drilldown.Option>
|
|
570
|
-
<Drilldown.Option id="
|
|
570
|
+
<Drilldown.Option id="BackNavigationRoot2" subPageId='secondPage'>
|
|
571
571
|
Option
|
|
572
572
|
</Drilldown.Option>
|
|
573
|
-
<Drilldown.Option id="
|
|
573
|
+
<Drilldown.Option id="BackNavigationRoot3" subPageId='secondPage'>
|
|
574
574
|
Option
|
|
575
575
|
</Drilldown.Option>
|
|
576
576
|
</Drilldown.Page>
|
|
@@ -583,9 +583,15 @@ class BackNavigationExample extends React.Component {
|
|
|
583
583
|
? ((prevPageTitle) => prevPageTitle ? `Back to ${prevPageTitle}` : 'Back')
|
|
584
584
|
: undefined}
|
|
585
585
|
>
|
|
586
|
-
<Drilldown.Option id="
|
|
587
|
-
|
|
588
|
-
|
|
586
|
+
<Drilldown.Option id="BackNavigationSecondPage1">
|
|
587
|
+
Option
|
|
588
|
+
</Drilldown.Option>
|
|
589
|
+
<Drilldown.Option id="BackNavigationSecondPage2">
|
|
590
|
+
Option
|
|
591
|
+
</Drilldown.Option>
|
|
592
|
+
<Drilldown.Option id="BackNavigationSecondPage3">
|
|
593
|
+
Option
|
|
594
|
+
</Drilldown.Option>
|
|
589
595
|
</Drilldown.Page>
|
|
590
596
|
</Drilldown>
|
|
591
597
|
</Flex.Item>
|
|
@@ -997,13 +1003,13 @@ class DisabledExample extends React.Component {
|
|
|
997
1003
|
disabled={disabledPages}
|
|
998
1004
|
>
|
|
999
1005
|
<Drilldown.Option
|
|
1000
|
-
id="
|
|
1006
|
+
id="disabledOption1"
|
|
1001
1007
|
subPageId='secondPage'
|
|
1002
1008
|
disabled={disabledOptions}
|
|
1003
1009
|
>
|
|
1004
1010
|
Option with subPage navigation
|
|
1005
1011
|
</Drilldown.Option>
|
|
1006
|
-
<Drilldown.Option id="
|
|
1012
|
+
<Drilldown.Option id="disabledOption2" disabled={disabledOptions}>
|
|
1007
1013
|
Option
|
|
1008
1014
|
</Drilldown.Option>
|
|
1009
1015
|
<Drilldown.Group
|
|
@@ -1105,13 +1111,13 @@ example: true
|
|
|
1105
1111
|
shouldHideOnSelect={false}
|
|
1106
1112
|
>
|
|
1107
1113
|
<Drilldown.Page id="root" renderTitle='Should not hide on select'>
|
|
1108
|
-
<Drilldown.Option id="
|
|
1114
|
+
<Drilldown.Option id="shouldHideOption1">
|
|
1109
1115
|
Option
|
|
1110
1116
|
</Drilldown.Option>
|
|
1111
|
-
<Drilldown.Option id="
|
|
1117
|
+
<Drilldown.Option id="shouldHideOption2">
|
|
1112
1118
|
Option
|
|
1113
1119
|
</Drilldown.Option>
|
|
1114
|
-
<Drilldown.Option id="
|
|
1120
|
+
<Drilldown.Option id="shouldHideOption3">
|
|
1115
1121
|
Option
|
|
1116
1122
|
</Drilldown.Option>
|
|
1117
1123
|
<Drilldown.Option
|
|
@@ -1152,14 +1158,14 @@ example: true
|
|
|
1152
1158
|
maxHeight="30rem"
|
|
1153
1159
|
>
|
|
1154
1160
|
<Drilldown.Page id="Root Page" renderTitle='Root page'>
|
|
1155
|
-
<Drilldown.Option id="
|
|
1161
|
+
<Drilldown.Option id="navRootOption1" subPageId='Page Two'>
|
|
1156
1162
|
Go to Page Two
|
|
1157
1163
|
</Drilldown.Option>
|
|
1158
|
-
<Drilldown.Option id="
|
|
1164
|
+
<Drilldown.Option id="navRootOption2" subPageId='Page Three'>
|
|
1159
1165
|
Go to Page Three
|
|
1160
1166
|
</Drilldown.Option>
|
|
1161
1167
|
<Drilldown.Option
|
|
1162
|
-
id="
|
|
1168
|
+
id="navRootOption3"
|
|
1163
1169
|
onOptionClick={(_event, args) => {
|
|
1164
1170
|
console.log(args.pageHistory)
|
|
1165
1171
|
const nav = args.goToPage('Page Two')
|
|
@@ -1172,11 +1178,11 @@ example: true
|
|
|
1172
1178
|
</Drilldown.Page>
|
|
1173
1179
|
|
|
1174
1180
|
<Drilldown.Page id="Page Two" renderTitle='Page Two'>
|
|
1175
|
-
<Drilldown.Option id="
|
|
1181
|
+
<Drilldown.Option id="navPage2Option1" subPageId='Page Three'>
|
|
1176
1182
|
Go to Page Three
|
|
1177
1183
|
</Drilldown.Option>
|
|
1178
1184
|
<Drilldown.Option
|
|
1179
|
-
id="
|
|
1185
|
+
id="navPage2Option2"
|
|
1180
1186
|
onOptionClick={(_event, args) => {
|
|
1181
1187
|
console.log(args.pageHistory)
|
|
1182
1188
|
const nav = args.goToPreviousPage()
|
|
@@ -1187,7 +1193,7 @@ example: true
|
|
|
1187
1193
|
Manual "Back" navigation
|
|
1188
1194
|
</Drilldown.Option>
|
|
1189
1195
|
<Drilldown.Option
|
|
1190
|
-
id="
|
|
1196
|
+
id="navPage2Option3"
|
|
1191
1197
|
onOptionClick={(_event, args) => {
|
|
1192
1198
|
console.log(args.pageHistory)
|
|
1193
1199
|
const nav = args.goToPage('Page Three')
|
|
@@ -1201,7 +1207,7 @@ example: true
|
|
|
1201
1207
|
|
|
1202
1208
|
<Drilldown.Page id="Page Three" renderTitle='Page Three'>
|
|
1203
1209
|
<Drilldown.Option
|
|
1204
|
-
id="
|
|
1210
|
+
id="navPage3Option1"
|
|
1205
1211
|
onOptionClick={(_event, args) => {
|
|
1206
1212
|
console.log(args.pageHistory)
|
|
1207
1213
|
const nav = args.goToPage(args.pageHistory[0])
|
|
@@ -1212,7 +1218,7 @@ example: true
|
|
|
1212
1218
|
Manual "Back" navigation
|
|
1213
1219
|
</Drilldown.Option>
|
|
1214
1220
|
<Drilldown.Option
|
|
1215
|
-
id="
|
|
1221
|
+
id="navPage3Option2"
|
|
1216
1222
|
onOptionClick={(_event, args) => {
|
|
1217
1223
|
console.log(args.pageHistory)
|
|
1218
1224
|
const nav = args.goToPreviousPage()
|
package/src/Drilldown/index.tsx
CHANGED
|
@@ -1205,9 +1205,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
|
|
|
1205
1205
|
style={{ alignSelf: vAlignMap[afterLabelContentVAlign!] }}
|
|
1206
1206
|
>
|
|
1207
1207
|
{/* this container span is needed for correct vAlign */}
|
|
1208
|
-
<span
|
|
1209
|
-
{labelInfo}
|
|
1210
|
-
</span>
|
|
1208
|
+
<span id={infoAriaId}>{labelInfo}</span>
|
|
1211
1209
|
</span>
|
|
1212
1210
|
) : null}
|
|
1213
1211
|
</div>
|