@instructure/ui-drilldown 8.56.2-pr-snapshot-1721749364069 → 8.56.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 +1 -1
- package/lib/Drilldown/DrilldownGroup/props.js +2 -2
- package/lib/Drilldown/DrilldownLocator.js +4 -4
- package/lib/Drilldown/DrilldownPage/props.js +2 -2
- package/lib/Drilldown/index.js +47 -40
- package/lib/Drilldown/props.js +9 -8
- package/package.json +20 -20
- package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [8.56.2
|
|
6
|
+
## [8.56.2](https://github.com/instructure/instructure-ui/compare/v8.56.1...v8.56.2) (2024-08-06)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-drilldown
|
|
9
9
|
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var
|
|
9
|
+
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
|
10
10
|
var _DrilldownOption = _interopRequireDefault(require("../DrilldownOption"));
|
|
11
11
|
var _DrilldownSeparator = _interopRequireDefault(require("../DrilldownSeparator"));
|
|
12
12
|
/*
|
|
@@ -35,7 +35,7 @@ var _DrilldownSeparator = _interopRequireDefault(require("../DrilldownSeparator"
|
|
|
35
35
|
|
|
36
36
|
const propTypes = exports.propTypes = {
|
|
37
37
|
id: _propTypes.default.string.isRequired,
|
|
38
|
-
children:
|
|
38
|
+
children: _Children.Children.oneOf([_DrilldownOption.default, _DrilldownSeparator.default]),
|
|
39
39
|
renderGroupTitle: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
40
40
|
withoutSeparators: _propTypes.default.bool,
|
|
41
41
|
disabled: _propTypes.default.bool,
|
|
@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.DrilldownLocator = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
|
|
8
8
|
var _uiTestUtils = require("@instructure/ui-test-utils");
|
|
9
|
-
var _OptionsItemLocator = require("@instructure/ui-options/
|
|
10
|
-
var _PopoverLocator = require("@instructure/ui-popover/
|
|
9
|
+
var _OptionsItemLocator = require("@instructure/ui-options/lib/Options/Item/OptionsItemLocator");
|
|
10
|
+
var _PopoverLocator = require("@instructure/ui-popover/lib/Popover/PopoverLocator");
|
|
11
11
|
var _index = require("./index");
|
|
12
12
|
/*
|
|
13
13
|
* The MIT License (MIT)
|
|
@@ -99,4 +99,4 @@ const customMethods = {
|
|
|
99
99
|
};
|
|
100
100
|
|
|
101
101
|
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
102
|
-
const DrilldownLocator = exports.DrilldownLocator = (0,
|
|
102
|
+
const DrilldownLocator = exports.DrilldownLocator = (0, _locator.locator)(_index.Drilldown.selector, customMethods);
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var
|
|
9
|
+
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
|
10
10
|
var _DrilldownGroup = _interopRequireDefault(require("../DrilldownGroup"));
|
|
11
11
|
var _DrilldownOption = _interopRequireDefault(require("../DrilldownOption"));
|
|
12
12
|
var _DrilldownSeparator = _interopRequireDefault(require("../DrilldownSeparator"));
|
|
@@ -36,7 +36,7 @@ var _DrilldownSeparator = _interopRequireDefault(require("../DrilldownSeparator"
|
|
|
36
36
|
|
|
37
37
|
const propTypes = exports.propTypes = {
|
|
38
38
|
id: _propTypes.default.string.isRequired,
|
|
39
|
-
children:
|
|
39
|
+
children: _Children.Children.oneOf([_DrilldownOption.default, _DrilldownSeparator.default, _DrilldownGroup.default]),
|
|
40
40
|
renderTitle: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
41
41
|
renderActionLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
42
42
|
renderBackButtonLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
package/lib/Drilldown/index.js
CHANGED
|
@@ -9,14 +9,21 @@ exports.default = exports.Drilldown = void 0;
|
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _console = require("@instructure/console");
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var
|
|
12
|
+
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
13
|
+
var _contains = require("@instructure/ui-dom-utils/lib/contains.js");
|
|
14
|
+
var _containsActiveElement = require("@instructure/ui-dom-utils/lib/containsActiveElement.js");
|
|
15
|
+
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
16
|
+
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
|
17
|
+
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
18
|
+
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
|
19
|
+
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
20
|
+
var _View = require("@instructure/ui-view/lib/View");
|
|
21
|
+
var _Options = require("@instructure/ui-options/lib/Options");
|
|
22
|
+
var _Popover = require("@instructure/ui-popover/lib/Popover");
|
|
23
|
+
var _Selectable = require("@instructure/ui-selectable/lib/Selectable");
|
|
24
|
+
var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
|
|
25
|
+
var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
|
|
26
|
+
var _IconCheckSolid = require("@instructure/ui-icons/lib/IconCheckSolid.js");
|
|
20
27
|
var _emotion = require("@instructure/emotion");
|
|
21
28
|
var _DrilldownSeparator = require("./DrilldownSeparator");
|
|
22
29
|
var _DrilldownOption = require("./DrilldownOption");
|
|
@@ -66,7 +73,7 @@ var _dec, _dec2, _dec3, _class, _class2, _IconArrowOpenEndSoli, _IconArrowOpenSt
|
|
|
66
73
|
category: components
|
|
67
74
|
---
|
|
68
75
|
**/
|
|
69
|
-
let Drilldown = exports.Drilldown = (_dec = (0,
|
|
76
|
+
let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Drilldown extends _react.Component {
|
|
70
77
|
constructor(props) {
|
|
71
78
|
super(props);
|
|
72
79
|
this._drilldownRef = null;
|
|
@@ -485,7 +492,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
485
492
|
this.pages.forEach(page => {
|
|
486
493
|
const children = page.props.children;
|
|
487
494
|
this.getChildrenArray(children).forEach(child => {
|
|
488
|
-
if ((0,
|
|
495
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownGroup.DrilldownGroup])) {
|
|
489
496
|
var _this$getChildrenArra;
|
|
490
497
|
const _child$props = child.props,
|
|
491
498
|
groupId = _child$props.id,
|
|
@@ -505,7 +512,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
505
512
|
}
|
|
506
513
|
selectedGroupOptionsMap[groupId] = new Map();
|
|
507
514
|
(_this$getChildrenArra = this.getChildrenArray(groupChildren)) === null || _this$getChildrenArra === void 0 ? void 0 : _this$getChildrenArra.forEach(groupChild => {
|
|
508
|
-
if ((0,
|
|
515
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(groupChild, [_DrilldownOption.DrilldownOption])) {
|
|
509
516
|
const _groupChild$props = groupChild.props,
|
|
510
517
|
optionId = _groupChild$props.id,
|
|
511
518
|
optionValue = _groupChild$props.value,
|
|
@@ -547,8 +554,8 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
547
554
|
|
|
548
555
|
// Back navigation option
|
|
549
556
|
if (this.previousPage) {
|
|
550
|
-
const prevPageTitle = (0,
|
|
551
|
-
const backButtonLabel = (0,
|
|
557
|
+
const prevPageTitle = (0, _callRenderProp.callRenderProp)(this.previousPage.renderTitle);
|
|
558
|
+
const backButtonLabel = (0, _callRenderProp.callRenderProp)(renderBackButtonLabel, prevPageTitle);
|
|
552
559
|
headerChildren.push((0, _emotion.jsx)(_DrilldownOption.DrilldownOption, {
|
|
553
560
|
id: this._headerBackId,
|
|
554
561
|
onOptionClick: this.handleBackButtonClick
|
|
@@ -560,7 +567,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
560
567
|
|
|
561
568
|
// Header title
|
|
562
569
|
if (renderTitle) {
|
|
563
|
-
const title = (0,
|
|
570
|
+
const title = (0, _callRenderProp.callRenderProp)(renderTitle);
|
|
564
571
|
if (title) {
|
|
565
572
|
headerChildren.push((0, _emotion.jsx)(_DrilldownOption.DrilldownOption, {
|
|
566
573
|
id: this._headerTitleId,
|
|
@@ -575,7 +582,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
575
582
|
|
|
576
583
|
// Action label
|
|
577
584
|
if (renderActionLabel) {
|
|
578
|
-
const actionLabel = (0,
|
|
585
|
+
const actionLabel = (0, _callRenderProp.callRenderProp)(renderActionLabel);
|
|
579
586
|
if (actionLabel) {
|
|
580
587
|
headerChildren.push((0, _emotion.jsx)(_DrilldownOption.DrilldownOption, {
|
|
581
588
|
id: this._headerActionId,
|
|
@@ -634,9 +641,9 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
634
641
|
}
|
|
635
642
|
focused() {
|
|
636
643
|
if (this.shown) {
|
|
637
|
-
return (0,
|
|
644
|
+
return (0, _containsActiveElement.containsActiveElement)(this._drilldownRef);
|
|
638
645
|
} else {
|
|
639
|
-
return (0,
|
|
646
|
+
return (0, _containsActiveElement.containsActiveElement)(this._trigger);
|
|
640
647
|
}
|
|
641
648
|
}
|
|
642
649
|
focusOption(id) {
|
|
@@ -715,7 +722,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
715
722
|
/**
|
|
716
723
|
* --- RENDER GROUP ---
|
|
717
724
|
*/
|
|
718
|
-
if ((0,
|
|
725
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownGroup.DrilldownGroup])) {
|
|
719
726
|
const isFirstChild = index === 0;
|
|
720
727
|
const isLastChild = index === pageChildren.length - 1;
|
|
721
728
|
const afterSeparator = lastItemWasSeparator;
|
|
@@ -729,7 +736,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
729
736
|
/**
|
|
730
737
|
* --- RENDER SEPARATOR ---
|
|
731
738
|
*/
|
|
732
|
-
} else if ((0,
|
|
739
|
+
} else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownSeparator.DrilldownSeparator])) {
|
|
733
740
|
// if the last item was separator, we don't want to duplicate it
|
|
734
741
|
if (lastItemWasSeparator) {
|
|
735
742
|
return null;
|
|
@@ -740,7 +747,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
740
747
|
/**
|
|
741
748
|
* --- RENDER OPTION ---
|
|
742
749
|
*/
|
|
743
|
-
} else if ((0,
|
|
750
|
+
} else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownOption.DrilldownOption])) {
|
|
744
751
|
lastItemWasSeparator = false;
|
|
745
752
|
return this.renderOption(child, getOptionProps, getDisabledOptionProps);
|
|
746
753
|
} else {
|
|
@@ -753,7 +760,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
753
760
|
id = _separator$props.id,
|
|
754
761
|
themeOverride = _separator$props.themeOverride,
|
|
755
762
|
props = (0, _objectWithoutProperties2.default)(_separator$props, _excluded3);
|
|
756
|
-
return (0, _emotion.jsx)(
|
|
763
|
+
return (0, _emotion.jsx)(_Options.Options.Separator, Object.assign({}, props, {
|
|
757
764
|
id: id,
|
|
758
765
|
key: id,
|
|
759
766
|
role: "separator"
|
|
@@ -791,7 +798,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
791
798
|
// Props passed to the Option.Item
|
|
792
799
|
let optionProps = {
|
|
793
800
|
// passthrough props
|
|
794
|
-
...(0,
|
|
801
|
+
...(0, _omitProps.omitProps)(option.props, [..._DrilldownOption.DrilldownOption.allowedProps, ..._Options.Options.Item.allowedProps]),
|
|
795
802
|
// props from selectable
|
|
796
803
|
...getOptionProps({
|
|
797
804
|
id,
|
|
@@ -847,13 +854,13 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
847
854
|
// we set a few manually on Options.Item,
|
|
848
855
|
// the rest are passed directly
|
|
849
856
|
if (subPageId) {
|
|
850
|
-
optionProps.renderAfterLabel = _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(
|
|
857
|
+
optionProps.renderAfterLabel = _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, null));
|
|
851
858
|
optionProps['aria-haspopup'] = true;
|
|
852
859
|
optionProps.role = customRole || 'button';
|
|
853
860
|
(0, _console.warn)(!renderAfterLabel, `The prop "renderAfterLabel" is reserved on item with id: "${id}". When it has "subPageId" provided, a navigation arrow will render after the label.`);
|
|
854
861
|
}
|
|
855
862
|
if (id === this._headerBackId) {
|
|
856
|
-
optionProps.renderBeforeLabel = _IconArrowOpenStartSo || (_IconArrowOpenStartSo = (0, _emotion.jsx)(
|
|
863
|
+
optionProps.renderBeforeLabel = _IconArrowOpenStartSo || (_IconArrowOpenStartSo = (0, _emotion.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, null));
|
|
857
864
|
}
|
|
858
865
|
const isOptionControlled = typeof option.props.selected === 'boolean';
|
|
859
866
|
if ((groupProps !== null && groupProps !== void 0 && groupProps.selectableType || isOptionControlled) && groupProps) {
|
|
@@ -864,7 +871,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
864
871
|
isSelected = Boolean(option.props.selected);
|
|
865
872
|
}
|
|
866
873
|
optionProps['aria-checked'] = isSelected;
|
|
867
|
-
optionProps.renderBeforeLabel = (0, _emotion.jsx)(
|
|
874
|
+
optionProps.renderBeforeLabel = (0, _emotion.jsx)(_IconCheckSolid.IconCheckSolid, {
|
|
868
875
|
style: {
|
|
869
876
|
opacity: isSelected ? 1 : 0
|
|
870
877
|
}
|
|
@@ -895,7 +902,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
895
902
|
optionProps.href = href;
|
|
896
903
|
}
|
|
897
904
|
}
|
|
898
|
-
const optionLabel = (0,
|
|
905
|
+
const optionLabel = (0, _callRenderProp.callRenderProp)(children, {
|
|
899
906
|
id,
|
|
900
907
|
variant: optionProps.variant,
|
|
901
908
|
isSelected
|
|
@@ -919,7 +926,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
919
926
|
if (typeof optionProps.renderAfterLabel === 'function' && !((_optionProps$renderAf = optionProps.renderAfterLabel) !== null && _optionProps$renderAf !== void 0 && (_optionProps$renderAf2 = _optionProps$renderAf.prototype) !== null && _optionProps$renderAf2 !== void 0 && _optionProps$renderAf2.isReactComponent)) {
|
|
920
927
|
optionProps.renderAfterLabel = optionProps.renderAfterLabel.bind(null, renderLabelProps);
|
|
921
928
|
}
|
|
922
|
-
const labelInfo = renderLabelInfo && (0,
|
|
929
|
+
const labelInfo = renderLabelInfo && (0, _callRenderProp.callRenderProp)(renderLabelInfo, renderLabelProps);
|
|
923
930
|
const vAlignMap = {
|
|
924
931
|
start: 'flex-start',
|
|
925
932
|
center: 'center',
|
|
@@ -929,7 +936,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
929
936
|
const infoAriaId = `${id}__info`;
|
|
930
937
|
const labelledby = option.props['aria-labelledby'] || labelAriaId;
|
|
931
938
|
const describedby = option.props['aria-describedby'] || (labelInfo ? infoAriaId : void 0);
|
|
932
|
-
return (0, _emotion.jsx)(
|
|
939
|
+
return (0, _emotion.jsx)(_Options.Options.Item, Object.assign({}, optionProps, {
|
|
933
940
|
key: id,
|
|
934
941
|
"aria-labelledby": labelledby,
|
|
935
942
|
"aria-describedby": describedby
|
|
@@ -966,12 +973,12 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
966
973
|
|
|
967
974
|
// add a separator above
|
|
968
975
|
if (needsFirstSeparator) {
|
|
969
|
-
groupChildren.push(_Options$Separator || (_Options$Separator = (0, _emotion.jsx)(
|
|
976
|
+
groupChildren.push(_Options$Separator || (_Options$Separator = (0, _emotion.jsx)(_Options.Options.Separator, null)));
|
|
970
977
|
}
|
|
971
978
|
|
|
972
979
|
// create a sublist as a group
|
|
973
980
|
// (a wrapping list item will be created by Options)
|
|
974
|
-
groupChildren.push((0, _emotion.jsx)(
|
|
981
|
+
groupChildren.push((0, _emotion.jsx)(_Options.Options, {
|
|
975
982
|
id: id,
|
|
976
983
|
key: id,
|
|
977
984
|
role: role,
|
|
@@ -982,9 +989,9 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
982
989
|
,
|
|
983
990
|
themeOverride: themeOverride
|
|
984
991
|
}, this.getChildrenArray(children).map(child => {
|
|
985
|
-
if ((0,
|
|
992
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownSeparator.DrilldownSeparator])) {
|
|
986
993
|
return this.renderSeparator(child);
|
|
987
|
-
} else if ((0,
|
|
994
|
+
} else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownOption.DrilldownOption])) {
|
|
988
995
|
return this.renderOption(child, getOptionProps, getDisabledOptionProps, group.props);
|
|
989
996
|
} else {
|
|
990
997
|
return null;
|
|
@@ -993,7 +1000,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
993
1000
|
|
|
994
1001
|
// add a separator below
|
|
995
1002
|
if (needsLastSeparator) {
|
|
996
|
-
groupChildren.push(_Options$Separator2 || (_Options$Separator2 = (0, _emotion.jsx)(
|
|
1003
|
+
groupChildren.push(_Options$Separator2 || (_Options$Separator2 = (0, _emotion.jsx)(_Options.Options.Separator, null)));
|
|
997
1004
|
}
|
|
998
1005
|
return groupChildren;
|
|
999
1006
|
}
|
|
@@ -1014,7 +1021,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
1014
1021
|
if (!this.currentPage) {
|
|
1015
1022
|
return null;
|
|
1016
1023
|
}
|
|
1017
|
-
return (0, _emotion.jsx)(
|
|
1024
|
+
return (0, _emotion.jsx)(_Selectable.Selectable, {
|
|
1018
1025
|
isShowingOptions: this.shown,
|
|
1019
1026
|
highlightedOptionId: this.state.highlightedOptionId,
|
|
1020
1027
|
selectedOptionId: this.selectedGroupOptionIdsArray,
|
|
@@ -1044,7 +1051,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
1044
1051
|
getListProps,
|
|
1045
1052
|
getOptionProps,
|
|
1046
1053
|
getDisabledOptionProps
|
|
1047
|
-
}) => (0, _emotion.jsx)(
|
|
1054
|
+
}) => (0, _emotion.jsx)(_View.View, Object.assign({
|
|
1048
1055
|
as: "div",
|
|
1049
1056
|
elementRef: this.handleDrilldownRef,
|
|
1050
1057
|
tabIndex: 0,
|
|
@@ -1067,7 +1074,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
1067
1074
|
onBlur: event => {
|
|
1068
1075
|
const target = event.currentTarget;
|
|
1069
1076
|
const related = event.relatedTarget;
|
|
1070
|
-
const containsRelated = (0,
|
|
1077
|
+
const containsRelated = (0, _contains.contains)(target, related);
|
|
1071
1078
|
if (!related || related === this._drilldownRef || related !== target && !containsRelated) {
|
|
1072
1079
|
this.setState({
|
|
1073
1080
|
highlightedOptionId: void 0
|
|
@@ -1079,7 +1086,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
1079
1086
|
highlightedOptionId: void 0
|
|
1080
1087
|
});
|
|
1081
1088
|
}
|
|
1082
|
-
})), (0, _emotion.jsx)(
|
|
1089
|
+
})), (0, _emotion.jsx)(_View.View, {
|
|
1083
1090
|
as: "div",
|
|
1084
1091
|
overflowY: overflowY,
|
|
1085
1092
|
overflowX: overflowX,
|
|
@@ -1095,7 +1102,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
1095
1102
|
elementRef: element => {
|
|
1096
1103
|
this._containerElement = element;
|
|
1097
1104
|
}
|
|
1098
|
-
}, (0, _emotion.jsx)(
|
|
1105
|
+
}, (0, _emotion.jsx)(_Options.Options, Object.assign({}, getListProps(), {
|
|
1099
1106
|
role: "presentation",
|
|
1100
1107
|
as: as
|
|
1101
1108
|
}), this.renderList(getOptionProps, getDisabledOptionProps)))));
|
|
@@ -1122,7 +1129,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
1122
1129
|
onMouseOver = _this$props6.onMouseOver,
|
|
1123
1130
|
offsetX = _this$props6.offsetX,
|
|
1124
1131
|
offsetY = _this$props6.offsetY;
|
|
1125
|
-
return trigger ? (0, _emotion.jsx)(
|
|
1132
|
+
return trigger ? (0, _emotion.jsx)(_Popover.Popover, {
|
|
1126
1133
|
isShowingContent: show,
|
|
1127
1134
|
defaultIsShowingContent: defaultShow,
|
|
1128
1135
|
shouldCloseOnDocumentClick: true,
|
|
@@ -1161,7 +1168,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _uiReactUtils.withDeterministicI
|
|
|
1161
1168
|
popoverRef(el);
|
|
1162
1169
|
}
|
|
1163
1170
|
},
|
|
1164
|
-
renderTrigger: (0,
|
|
1171
|
+
renderTrigger: (0, _safeCloneElement.safeCloneElement)(trigger, {
|
|
1165
1172
|
ref: el => {
|
|
1166
1173
|
this._trigger = el;
|
|
1167
1174
|
},
|
package/lib/Drilldown/props.js
CHANGED
|
@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var
|
|
10
|
-
var
|
|
9
|
+
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
|
10
|
+
var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
|
|
11
|
+
var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
|
|
11
12
|
var _DrilldownPage = require("./DrilldownPage");
|
|
12
13
|
/*
|
|
13
14
|
* The MIT License (MIT)
|
|
@@ -35,7 +36,7 @@ var _DrilldownPage = require("./DrilldownPage");
|
|
|
35
36
|
|
|
36
37
|
const propTypes = exports.propTypes = {
|
|
37
38
|
rootPageId: _propTypes.default.string.isRequired,
|
|
38
|
-
children:
|
|
39
|
+
children: _Children.Children.oneOf([_DrilldownPage.DrilldownPage]),
|
|
39
40
|
id: _propTypes.default.string,
|
|
40
41
|
label: _propTypes.default.string,
|
|
41
42
|
disabled: _propTypes.default.bool,
|
|
@@ -53,19 +54,19 @@ const propTypes = exports.propTypes = {
|
|
|
53
54
|
maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
54
55
|
maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
55
56
|
trigger: _propTypes.default.node,
|
|
56
|
-
placement:
|
|
57
|
+
placement: _PositionPropTypes.PositionPropTypes.placement,
|
|
57
58
|
defaultShow: _propTypes.default.bool,
|
|
58
|
-
show: (0,
|
|
59
|
+
show: (0, _controllable.controllable)(_propTypes.default.bool, 'onToggle', 'defaultShow'),
|
|
59
60
|
onToggle: _propTypes.default.func,
|
|
60
61
|
onSelect: _propTypes.default.func,
|
|
61
62
|
onDismiss: _propTypes.default.func,
|
|
62
63
|
onFocus: _propTypes.default.func,
|
|
63
64
|
onMouseOver: _propTypes.default.func,
|
|
64
65
|
popoverRef: _propTypes.default.func,
|
|
65
|
-
mountNode:
|
|
66
|
-
positionTarget:
|
|
66
|
+
mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
|
|
67
|
+
positionTarget: _PositionPropTypes.PositionPropTypes.mountNode,
|
|
67
68
|
positionContainerDisplay: _propTypes.default.oneOf(['inline-block', 'block']),
|
|
68
|
-
constrain:
|
|
69
|
+
constrain: _PositionPropTypes.PositionPropTypes.constrain,
|
|
69
70
|
shouldHideOnSelect: _propTypes.default.bool,
|
|
70
71
|
shouldContainFocus: _propTypes.default.bool,
|
|
71
72
|
shouldReturnFocus: _propTypes.default.bool,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-drilldown",
|
|
3
|
-
"version": "8.56.2
|
|
3
|
+
"version": "8.56.2",
|
|
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.23.2",
|
|
27
|
-
"@instructure/console": "8.56.2
|
|
28
|
-
"@instructure/emotion": "8.56.2
|
|
29
|
-
"@instructure/shared-types": "8.56.2
|
|
30
|
-
"@instructure/ui-dom-utils": "8.56.2
|
|
31
|
-
"@instructure/ui-icons": "8.56.2
|
|
32
|
-
"@instructure/ui-options": "8.56.2
|
|
33
|
-
"@instructure/ui-popover": "8.56.2
|
|
34
|
-
"@instructure/ui-position": "8.56.2
|
|
35
|
-
"@instructure/ui-prop-types": "8.56.2
|
|
36
|
-
"@instructure/ui-react-utils": "8.56.2
|
|
37
|
-
"@instructure/ui-selectable": "8.56.2
|
|
38
|
-
"@instructure/ui-testable": "8.56.2
|
|
39
|
-
"@instructure/ui-utils": "8.56.2
|
|
40
|
-
"@instructure/ui-view": "8.56.2
|
|
27
|
+
"@instructure/console": "8.56.2",
|
|
28
|
+
"@instructure/emotion": "8.56.2",
|
|
29
|
+
"@instructure/shared-types": "8.56.2",
|
|
30
|
+
"@instructure/ui-dom-utils": "8.56.2",
|
|
31
|
+
"@instructure/ui-icons": "8.56.2",
|
|
32
|
+
"@instructure/ui-options": "8.56.2",
|
|
33
|
+
"@instructure/ui-popover": "8.56.2",
|
|
34
|
+
"@instructure/ui-position": "8.56.2",
|
|
35
|
+
"@instructure/ui-prop-types": "8.56.2",
|
|
36
|
+
"@instructure/ui-react-utils": "8.56.2",
|
|
37
|
+
"@instructure/ui-selectable": "8.56.2",
|
|
38
|
+
"@instructure/ui-testable": "8.56.2",
|
|
39
|
+
"@instructure/ui-utils": "8.56.2",
|
|
40
|
+
"@instructure/ui-view": "8.56.2",
|
|
41
41
|
"prop-types": "^15.8.1"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@instructure/ui-babel-preset": "8.56.2
|
|
45
|
-
"@instructure/ui-color-utils": "8.56.2
|
|
46
|
-
"@instructure/ui-test-locator": "8.56.2
|
|
47
|
-
"@instructure/ui-test-utils": "8.56.2
|
|
48
|
-
"@instructure/ui-themes": "8.56.2
|
|
44
|
+
"@instructure/ui-babel-preset": "8.56.2",
|
|
45
|
+
"@instructure/ui-color-utils": "8.56.2",
|
|
46
|
+
"@instructure/ui-test-locator": "8.56.2",
|
|
47
|
+
"@instructure/ui-test-utils": "8.56.2",
|
|
48
|
+
"@instructure/ui-themes": "8.56.2"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": ">=16.8 <=18"
|