@instructure/ui-drilldown 10.26.1-snapshot-0 → 10.26.1-snapshot-1

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Drilldown/index.js +14 -7
  3. package/lib/Drilldown/index.js +14 -7
  4. package/package.json +20 -20
  5. package/src/Drilldown/index.tsx +15 -7
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/Drilldown/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
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
- ## [10.26.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1-snapshot-0) (2025-10-02)
6
+ ## [10.26.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1-snapshot-1) (2025-10-06)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-drilldown
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-drilldown:** fix for prevent option selection when Drilldown or its sub-components get disabled prop ([5fc37f6](https://github.com/instructure/instructure-ui/commit/5fc37f6b7c7622ab248a4d1bd575b2bbac97e0a0))
9
12
 
10
13
 
11
14
 
package/es/Drilldown/index.js CHANGED
@@ -228,11 +228,18 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
228
228
  this.handleOptionSelect = (event, {
229
229
  id
230
230
  }) => {
231
+ var _this$currentPage, _selectedOption$group;
231
232
  const selectedOption = this.getPageChildById(id);
232
233
 
233
234
  // TODO: this line can be removed when React 16 is no longer supported
234
235
  event.persist();
235
- if (!id || !selectedOption || selectedOption.props.disabled || event.target.getAttribute('disabled') || event.target.getAttribute('aria-disabled')) {
236
+ if (!id || !selectedOption) {
237
+ event.preventDefault();
238
+ event.stopPropagation();
239
+ return;
240
+ }
241
+ const isOptionDisabled = id !== this._headerBackId && (this.props.disabled || ((_this$currentPage = this.currentPage) === null || _this$currentPage === void 0 ? void 0 : _this$currentPage.disabled) || ((_selectedOption$group = selectedOption.groupProps) === null || _selectedOption$group === void 0 ? void 0 : _selectedOption$group.disabled) || selectedOption.props.disabled);
242
+ if (isOptionDisabled) {
236
243
  event.preventDefault();
237
244
  event.stopPropagation();
238
245
  return;
@@ -357,8 +364,8 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
357
364
  }
358
365
  };
359
366
  this.getFirstOption = () => {
360
- var _this$currentPage;
361
- const children = Children.toArray((_this$currentPage = this.currentPage) === null || _this$currentPage === void 0 ? void 0 : _this$currentPage.children);
367
+ var _this$currentPage2;
368
+ const children = Children.toArray((_this$currentPage2 = this.currentPage) === null || _this$currentPage2 === void 0 ? void 0 : _this$currentPage2.children);
362
369
  const child = children[0];
363
370
  if (!child) return void 0;
364
371
 
@@ -481,14 +488,14 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
481
488
  };
482
489
  }
483
490
  get currentPageAriaLabel() {
484
- var _this$currentPage2;
491
+ var _this$currentPage3;
485
492
  // return, if explicitly set
486
493
  if (this.props['aria-labelledby']) {
487
494
  return this.props['aria-labelledby'];
488
495
  }
489
496
 
490
497
  // if it has title, point to the title label content
491
- if ((_this$currentPage2 = this.currentPage) !== null && _this$currentPage2 !== void 0 && _this$currentPage2.renderTitle) {
498
+ if ((_this$currentPage3 = this.currentPage) !== null && _this$currentPage3 !== void 0 && _this$currentPage3.renderTitle) {
492
499
  return this._headerTitleLabelId;
493
500
  }
494
501
 
@@ -802,7 +809,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
802
809
  });
803
810
  }
804
811
  renderOption(option, getOptionProps, getDisabledOptionProps, groupProps) {
805
- var _this$currentPage3, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
812
+ var _this$currentPage4, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
806
813
  const styles = this.props.styles;
807
814
  let isSelected = false;
808
815
  const _option$props = option.props,
@@ -862,7 +869,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
862
869
  };
863
870
  const isOptionDisabled = id !== this._headerBackId && (
864
871
  // Back nav is never disabled
865
- this.props.disabled || ((_this$currentPage3 = this.currentPage) === null || _this$currentPage3 === void 0 ? void 0 : _this$currentPage3.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
872
+ this.props.disabled || ((_this$currentPage4 = this.currentPage) === null || _this$currentPage4 === void 0 ? void 0 : _this$currentPage4.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
866
873
 
867
874
  // display option as disabled
868
875
  if (isOptionDisabled) {
package/lib/Drilldown/index.js CHANGED
@@ -237,11 +237,18 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
237
237
  this.handleOptionSelect = (event, {
238
238
  id
239
239
  }) => {
240
+ var _this$currentPage, _selectedOption$group;
240
241
  const selectedOption = this.getPageChildById(id);
241
242
 
242
243
  // TODO: this line can be removed when React 16 is no longer supported
243
244
  event.persist();
244
- if (!id || !selectedOption || selectedOption.props.disabled || event.target.getAttribute('disabled') || event.target.getAttribute('aria-disabled')) {
245
+ if (!id || !selectedOption) {
246
+ event.preventDefault();
247
+ event.stopPropagation();
248
+ return;
249
+ }
250
+ const isOptionDisabled = id !== this._headerBackId && (this.props.disabled || ((_this$currentPage = this.currentPage) === null || _this$currentPage === void 0 ? void 0 : _this$currentPage.disabled) || ((_selectedOption$group = selectedOption.groupProps) === null || _selectedOption$group === void 0 ? void 0 : _selectedOption$group.disabled) || selectedOption.props.disabled);
251
+ if (isOptionDisabled) {
245
252
  event.preventDefault();
246
253
  event.stopPropagation();
247
254
  return;
@@ -366,8 +373,8 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
366
373
  }
367
374
  };
368
375
  this.getFirstOption = () => {
369
- var _this$currentPage;
370
- const children = _react.Children.toArray((_this$currentPage = this.currentPage) === null || _this$currentPage === void 0 ? void 0 : _this$currentPage.children);
376
+ var _this$currentPage2;
377
+ const children = _react.Children.toArray((_this$currentPage2 = this.currentPage) === null || _this$currentPage2 === void 0 ? void 0 : _this$currentPage2.children);
371
378
  const child = children[0];
372
379
  if (!child) return void 0;
373
380
 
@@ -490,14 +497,14 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
490
497
  };
491
498
  }
492
499
  get currentPageAriaLabel() {
493
- var _this$currentPage2;
500
+ var _this$currentPage3;
494
501
  // return, if explicitly set
495
502
  if (this.props['aria-labelledby']) {
496
503
  return this.props['aria-labelledby'];
497
504
  }
498
505
 
499
506
  // if it has title, point to the title label content
500
- if ((_this$currentPage2 = this.currentPage) !== null && _this$currentPage2 !== void 0 && _this$currentPage2.renderTitle) {
507
+ if ((_this$currentPage3 = this.currentPage) !== null && _this$currentPage3 !== void 0 && _this$currentPage3.renderTitle) {
501
508
  return this._headerTitleLabelId;
502
509
  }
503
510
 
@@ -811,7 +818,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
811
818
  });
812
819
  }
813
820
  renderOption(option, getOptionProps, getDisabledOptionProps, groupProps) {
814
- var _this$currentPage3, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
821
+ var _this$currentPage4, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
815
822
  const styles = this.props.styles;
816
823
  let isSelected = false;
817
824
  const _option$props = option.props,
@@ -871,7 +878,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
871
878
  };
872
879
  const isOptionDisabled = id !== this._headerBackId && (
873
880
  // Back nav is never disabled
874
- this.props.disabled || ((_this$currentPage3 = this.currentPage) === null || _this$currentPage3 === void 0 ? void 0 : _this$currentPage3.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
881
+ this.props.disabled || ((_this$currentPage4 = this.currentPage) === null || _this$currentPage4 === void 0 ? void 0 : _this$currentPage4.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
875
882
 
876
883
  // display option as disabled
877
884
  if (isOptionDisabled) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-drilldown",
3
- "version": "10.26.1-snapshot-0",
3
+ "version": "10.26.1-snapshot-1",
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.27.6",
27
- "@instructure/console": "10.26.1-snapshot-0",
28
- "@instructure/emotion": "10.26.1-snapshot-0",
29
- "@instructure/shared-types": "10.26.1-snapshot-0",
30
- "@instructure/ui-dom-utils": "10.26.1-snapshot-0",
31
- "@instructure/ui-icons": "10.26.1-snapshot-0",
32
- "@instructure/ui-options": "10.26.1-snapshot-0",
33
- "@instructure/ui-popover": "10.26.1-snapshot-0",
34
- "@instructure/ui-position": "10.26.1-snapshot-0",
35
- "@instructure/ui-prop-types": "10.26.1-snapshot-0",
36
- "@instructure/ui-react-utils": "10.26.1-snapshot-0",
37
- "@instructure/ui-selectable": "10.26.1-snapshot-0",
38
- "@instructure/ui-testable": "10.26.1-snapshot-0",
39
- "@instructure/ui-utils": "10.26.1-snapshot-0",
40
- "@instructure/ui-view": "10.26.1-snapshot-0",
27
+ "@instructure/console": "10.26.1-snapshot-1",
28
+ "@instructure/emotion": "10.26.1-snapshot-1",
29
+ "@instructure/shared-types": "10.26.1-snapshot-1",
30
+ "@instructure/ui-dom-utils": "10.26.1-snapshot-1",
31
+ "@instructure/ui-icons": "10.26.1-snapshot-1",
32
+ "@instructure/ui-options": "10.26.1-snapshot-1",
33
+ "@instructure/ui-popover": "10.26.1-snapshot-1",
34
+ "@instructure/ui-position": "10.26.1-snapshot-1",
35
+ "@instructure/ui-prop-types": "10.26.1-snapshot-1",
36
+ "@instructure/ui-react-utils": "10.26.1-snapshot-1",
37
+ "@instructure/ui-selectable": "10.26.1-snapshot-1",
38
+ "@instructure/ui-testable": "10.26.1-snapshot-1",
39
+ "@instructure/ui-utils": "10.26.1-snapshot-1",
40
+ "@instructure/ui-view": "10.26.1-snapshot-1",
41
41
  "prop-types": "^15.8.1"
42
42
  },
43
43
  "devDependencies": {
44
- "@instructure/ui-axe-check": "10.26.1-snapshot-0",
45
- "@instructure/ui-babel-preset": "10.26.1-snapshot-0",
46
- "@instructure/ui-color-utils": "10.26.1-snapshot-0",
47
- "@instructure/ui-scripts": "10.26.1-snapshot-0",
48
- "@instructure/ui-themes": "10.26.1-snapshot-0",
44
+ "@instructure/ui-axe-check": "10.26.1-snapshot-1",
45
+ "@instructure/ui-babel-preset": "10.26.1-snapshot-1",
46
+ "@instructure/ui-color-utils": "10.26.1-snapshot-1",
47
+ "@instructure/ui-scripts": "10.26.1-snapshot-1",
48
+ "@instructure/ui-themes": "10.26.1-snapshot-1",
49
49
  "@testing-library/jest-dom": "^6.6.3",
50
50
  "@testing-library/react": "^16.0.1",
51
51
  "@testing-library/user-event": "^14.6.1",
package/src/Drilldown/index.tsx CHANGED
@@ -787,13 +787,21 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
787
787
  // TODO: this line can be removed when React 16 is no longer supported
788
788
  event.persist()
789
789
 
790
- if (
791
- !id ||
792
- !selectedOption ||
793
- selectedOption.props.disabled ||
794
- (event.target as HTMLElement).getAttribute('disabled') ||
795
- (event.target as HTMLElement).getAttribute('aria-disabled')
796
- ) {
790
+ if (!id || !selectedOption) {
791
+ event.preventDefault()
792
+ event.stopPropagation()
793
+ return
794
+ }
795
+
796
+ const isOptionDisabled =
797
+ id !== this._headerBackId && (
798
+ this.props.disabled ||
799
+ this.currentPage?.disabled ||
800
+ selectedOption.groupProps?.disabled ||
801
+ selectedOption.props.disabled
802
+ )
803
+
804
+ if (isOptionDisabled) {
797
805
  event.preventDefault()
798
806
  event.stopPropagation()
799
807
  return