@instructure/ui-drilldown 8.28.1-snapshot-2 → 8.28.1-snapshot-4

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.28.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.28.0...v8.28.1-snapshot-2) (2022-09-02)
+## [8.28.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v8.28.0...v8.28.1-snapshot-4) (2022-09-12)
 
-**Note:** Version bump only for package @instructure/ui-drilldown
+
+### Bug Fixes
+
+* support react 18 ([972bb93](https://github.com/instructure/instructure-ui/commit/972bb93d2835fcca3548d624b1ba2497661b4243))
 
 
 

package/es/Drilldown/index.js

@@ -652,6 +652,22 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     return this.props.trigger ? this.state.isShowingPopover : true;
   }
 
+  containsDuplicateChild(children) {
+    let containsDuplicate = false;
+    const childMap = new Map();
+
+    for (const child of children) {
+      if (!childMap.has(child.props.id)) {
+        childMap.set(child.props.id, true);
+      } else {
+        warn(false, `Duplicate id: "${child.props.id}"! Make sure all options have unique ids, otherwise they won't be rendered.`);
+        return containsDuplicate = true;
+      }
+    }
+
+    return containsDuplicate;
+  }
+
   reset() {
     this._activeOptionsMap = {};
     this.setState({
@@ -746,7 +762,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     const currentPage = this.currentPage,
           headerChildren = this.headerChildren;
 
-    if (!currentPage) {
+    if (!currentPage || this.containsDuplicateChild(currentPage.children)) {
       return null;
     }
 
@@ -830,11 +846,6 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     if (!id) {
       warn(false, `Drilldown.Option without id won't be rendered. It is needed to internally track the options.`);
       return null;
-    }
-
-    if (this.getPageChildById(id)) {
-      warn(false, `Duplicate id: "${id}"! Make sure all options have unique ids, otherwise they won't be rendered.`);
-      return null;
     } // Props passed to the Option.Item
 
 

package/lib/Drilldown/index.js

@@ -666,6 +666,22 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     return this.props.trigger ? this.state.isShowingPopover : true;
   }
 
+  containsDuplicateChild(children) {
+    let containsDuplicate = false;
+    const childMap = new Map();
+
+    for (const child of children) {
+      if (!childMap.has(child.props.id)) {
+        childMap.set(child.props.id, true);
+      } else {
+        (0, _console.warn)(false, `Duplicate id: "${child.props.id}"! Make sure all options have unique ids, otherwise they won't be rendered.`);
+        return containsDuplicate = true;
+      }
+    }
+
+    return containsDuplicate;
+  }
+
   reset() {
     this._activeOptionsMap = {};
     this.setState({
@@ -758,7 +774,7 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     const currentPage = this.currentPage,
           headerChildren = this.headerChildren;
 
-    if (!currentPage) {
+    if (!currentPage || this.containsDuplicateChild(currentPage.children)) {
       return null;
     }
 
@@ -841,11 +857,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     if (!id) {
       (0, _console.warn)(false, `Drilldown.Option without id won't be rendered. It is needed to internally track the options.`);
       return null;
-    }
-
-    if (this.getPageChildById(id)) {
-      (0, _console.warn)(false, `Duplicate id: "${id}"! Make sure all options have unique ids, otherwise they won't be rendered.`);
-      return null;
     } // Props passed to the Option.Item
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drilldown",
-  "version": "8.28.1-snapshot-2",
+  "version": "8.28.1-snapshot-4",
   "description": "A drilldown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,28 +24,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.28.1-snapshot-2",
-    "@instructure/emotion": "8.28.1-snapshot-2",
-    "@instructure/shared-types": "8.28.1-snapshot-2",
-    "@instructure/ui-dom-utils": "8.28.1-snapshot-2",
-    "@instructure/ui-icons": "8.28.1-snapshot-2",
-    "@instructure/ui-options": "8.28.1-snapshot-2",
-    "@instructure/ui-popover": "8.28.1-snapshot-2",
-    "@instructure/ui-position": "8.28.1-snapshot-2",
-    "@instructure/ui-prop-types": "8.28.1-snapshot-2",
-    "@instructure/ui-react-utils": "8.28.1-snapshot-2",
-    "@instructure/ui-selectable": "8.28.1-snapshot-2",
-    "@instructure/ui-testable": "8.28.1-snapshot-2",
-    "@instructure/ui-utils": "8.28.1-snapshot-2",
-    "@instructure/ui-view": "8.28.1-snapshot-2",
+    "@instructure/console": "8.28.1-snapshot-4",
+    "@instructure/emotion": "8.28.1-snapshot-4",
+    "@instructure/shared-types": "8.28.1-snapshot-4",
+    "@instructure/ui-dom-utils": "8.28.1-snapshot-4",
+    "@instructure/ui-icons": "8.28.1-snapshot-4",
+    "@instructure/ui-options": "8.28.1-snapshot-4",
+    "@instructure/ui-popover": "8.28.1-snapshot-4",
+    "@instructure/ui-position": "8.28.1-snapshot-4",
+    "@instructure/ui-prop-types": "8.28.1-snapshot-4",
+    "@instructure/ui-react-utils": "8.28.1-snapshot-4",
+    "@instructure/ui-selectable": "8.28.1-snapshot-4",
+    "@instructure/ui-testable": "8.28.1-snapshot-4",
+    "@instructure/ui-utils": "8.28.1-snapshot-4",
+    "@instructure/ui-view": "8.28.1-snapshot-4",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.28.1-snapshot-2",
-    "@instructure/ui-color-utils": "8.28.1-snapshot-2",
-    "@instructure/ui-test-locator": "8.28.1-snapshot-2",
-    "@instructure/ui-test-utils": "8.28.1-snapshot-2",
-    "@instructure/ui-themes": "8.28.1-snapshot-2"
+    "@instructure/ui-babel-preset": "8.28.1-snapshot-4",
+    "@instructure/ui-color-utils": "8.28.1-snapshot-4",
+    "@instructure/ui-test-locator": "8.28.1-snapshot-4",
+    "@instructure/ui-test-utils": "8.28.1-snapshot-4",
+    "@instructure/ui-themes": "8.28.1-snapshot-4"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/Drilldown/index.tsx

@@ -527,6 +527,26 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     return this.props.trigger ? this.state.isShowingPopover : true
   }
 
+  containsDuplicateChild(children: PageChildren[]) {
+    let containsDuplicate = false
+    const childMap = new Map<string, boolean>()
+
+    for (const child of children) {
+      if (!childMap.has(child.props.id)) {
+        childMap.set(child.props.id, true)
+      } else {
+        warn(
+          false,
+          `Duplicate id: "${child.props.id}"! Make sure all options have unique ids, otherwise they won't be rendered.`
+        )
+
+        return (containsDuplicate = true)
+      }
+    }
+
+    return containsDuplicate
+  }
+
   show = (event: React.SyntheticEvent) => {
     if (this._popover) {
       this._popover.show(event as React.UIEvent | React.FocusEvent)
@@ -878,7 +898,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
   ) {
     const { currentPage, headerChildren } = this
 
-    if (!currentPage) {
+    if (!currentPage || this.containsDuplicateChild(currentPage.children)) {
       return null
     }
 
@@ -990,14 +1010,6 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       return null
     }
 
-    if (this.getPageChildById(id)) {
-      warn(
-        false,
-        `Duplicate id: "${id}"! Make sure all options have unique ids, otherwise they won't be rendered.`
-      )
-      return null
-    }
-
     // Props passed to the Option.Item
     let optionProps: Partial<OptionsItemProps> = {
       // passthrough props