@instructure/ui-drilldown 9.1.1-snapshot-12 → 9.1.1-snapshot-14

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.
 
-## [9.1.1-snapshot-12](https://github.com/instructure/instructure-ui/compare/v9.1.0...v9.1.1-snapshot-12) (2024-07-05)
+## [9.1.1-snapshot-14](https://github.com/instructure/instructure-ui/compare/v9.1.0...v9.1.1-snapshot-14) (2024-07-05)
 
-**Note:** Version bump only for package @instructure/ui-drilldown
+
+### Bug Fixes
+
+* **ui-drilldown:** index drilldown options to always preserve the correct order ([3159d06](https://github.com/instructure/instructure-ui/commit/3159d06eb7aad8573c2227f379af1e716b09e391))
 
 
 

package/es/Drilldown/index.js

@@ -396,7 +396,10 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     };
   }
   get activeOptionIds() {
-    return Object.keys(this._activeOptionsMap);
+    const orderedKeys = Object.keys(this._activeOptionsMap).sort((a, b) => {
+      return this._activeOptionsMap[a].index - this._activeOptionsMap[b].index;
+    });
+    return orderedKeys;
   }
   get activeOptions() {
     return Object.values(this._activeOptionsMap);
@@ -831,11 +834,13 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       };
     }
 
-    // track as valid active option if not the title
-    if (id !== this._headerTitleId) {
+    // track as valid active option if not the title and the map doesn't already contain the id
+    if (id !== this._headerTitleId && !this._activeOptionsMap[id]) {
+      // store index to know the order of ids later; js objects doesn't preserve order
       this._activeOptionsMap[id] = {
         ...option,
-        ...optionData
+        ...optionData,
+        index: Object.keys(this._activeOptionsMap).length + 1
       };
     }
     const customRole = role !== DrilldownOption.defaultProps.role ? role : void 0;

package/lib/Drilldown/index.js

@@ -406,7 +406,10 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     };
   }
   get activeOptionIds() {
-    return Object.keys(this._activeOptionsMap);
+    const orderedKeys = Object.keys(this._activeOptionsMap).sort((a, b) => {
+      return this._activeOptionsMap[a].index - this._activeOptionsMap[b].index;
+    });
+    return orderedKeys;
   }
   get activeOptions() {
     return Object.values(this._activeOptionsMap);
@@ -841,11 +844,13 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       };
     }
 
-    // track as valid active option if not the title
-    if (id !== this._headerTitleId) {
+    // track as valid active option if not the title and the map doesn't already contain the id
+    if (id !== this._headerTitleId && !this._activeOptionsMap[id]) {
+      // store index to know the order of ids later; js objects doesn't preserve order
       this._activeOptionsMap[id] = {
         ...option,
-        ...optionData
+        ...optionData,
+        index: Object.keys(this._activeOptionsMap).length + 1
       };
     }
     const customRole = role !== _DrilldownOption.DrilldownOption.defaultProps.role ? role : void 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drilldown",
-  "version": "9.1.1-snapshot-12",
+  "version": "9.1.1-snapshot-14",
   "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.24.5",
-    "@instructure/console": "9.1.1-snapshot-12",
-    "@instructure/emotion": "9.1.1-snapshot-12",
-    "@instructure/shared-types": "9.1.1-snapshot-12",
-    "@instructure/ui-dom-utils": "9.1.1-snapshot-12",
-    "@instructure/ui-icons": "9.1.1-snapshot-12",
-    "@instructure/ui-options": "9.1.1-snapshot-12",
-    "@instructure/ui-popover": "9.1.1-snapshot-12",
-    "@instructure/ui-position": "9.1.1-snapshot-12",
-    "@instructure/ui-prop-types": "9.1.1-snapshot-12",
-    "@instructure/ui-react-utils": "9.1.1-snapshot-12",
-    "@instructure/ui-selectable": "9.1.1-snapshot-12",
-    "@instructure/ui-testable": "9.1.1-snapshot-12",
-    "@instructure/ui-utils": "9.1.1-snapshot-12",
-    "@instructure/ui-view": "9.1.1-snapshot-12",
+    "@instructure/console": "9.1.1-snapshot-14",
+    "@instructure/emotion": "9.1.1-snapshot-14",
+    "@instructure/shared-types": "9.1.1-snapshot-14",
+    "@instructure/ui-dom-utils": "9.1.1-snapshot-14",
+    "@instructure/ui-icons": "9.1.1-snapshot-14",
+    "@instructure/ui-options": "9.1.1-snapshot-14",
+    "@instructure/ui-popover": "9.1.1-snapshot-14",
+    "@instructure/ui-position": "9.1.1-snapshot-14",
+    "@instructure/ui-prop-types": "9.1.1-snapshot-14",
+    "@instructure/ui-react-utils": "9.1.1-snapshot-14",
+    "@instructure/ui-selectable": "9.1.1-snapshot-14",
+    "@instructure/ui-testable": "9.1.1-snapshot-14",
+    "@instructure/ui-utils": "9.1.1-snapshot-14",
+    "@instructure/ui-view": "9.1.1-snapshot-14",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.1.1-snapshot-12",
-    "@instructure/ui-color-utils": "9.1.1-snapshot-12",
-    "@instructure/ui-test-locator": "9.1.1-snapshot-12",
-    "@instructure/ui-test-utils": "9.1.1-snapshot-12",
-    "@instructure/ui-themes": "9.1.1-snapshot-12"
+    "@instructure/ui-babel-preset": "9.1.1-snapshot-14",
+    "@instructure/ui-color-utils": "9.1.1-snapshot-14",
+    "@instructure/ui-test-locator": "9.1.1-snapshot-14",
+    "@instructure/ui-test-utils": "9.1.1-snapshot-14",
+    "@instructure/ui-themes": "9.1.1-snapshot-14"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/Drilldown/index.tsx

@@ -85,7 +85,7 @@ type OptionData = {
 
 // Contains the Option ComponentElement and the extra data we need track on it,
 // but don't want to expose as props
-type MappedOption = OptionChild & OptionData
+type MappedOption = OptionChild & OptionData & { index: number }
 
 // Contains the props object of the Page
 // with the `children` transformed into an array
@@ -248,7 +248,10 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
   }
 
   get activeOptionIds() {
-    return Object.keys(this._activeOptionsMap)
+    const orderedKeys = Object.keys(this._activeOptionsMap).sort((a, b) => {
+      return this._activeOptionsMap[a].index - this._activeOptionsMap[b].index
+    })
+    return orderedKeys
   }
 
   get activeOptions() {
@@ -1076,9 +1079,14 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       optionProps = { ...optionProps, ...getDisabledOptionProps() }
     }
 
-    // track as valid active option if not the title
-    if (id !== this._headerTitleId) {
-      this._activeOptionsMap[id] = { ...option, ...optionData }
+    // track as valid active option if not the title and the map doesn't already contain the id
+    if (id !== this._headerTitleId && !this._activeOptionsMap[id]) {
+      // store index to know the order of ids later; js objects doesn't preserve order
+      this._activeOptionsMap[id] = {
+        ...option,
+        ...optionData,
+        index: Object.keys(this._activeOptionsMap).length + 1
+      }
     }
 
     const customRole =