@instructure/ui-drilldown 10.24.1-snapshot-5 → 10.24.1-snapshot-7

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.
 
-## [10.24.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.24.0...v10.24.1-snapshot-5) (2025-07-30)
+## [10.24.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.24.0...v10.24.1-snapshot-7) (2025-07-30)
 
-**Note:** Version bump only for package @instructure/ui-drilldown
+
+### Bug Fixes
+
+* **ui-view,ui-position,ui-popover:** fix 'stretch' placement in Popover/ContextView ([f65acd5](https://github.com/instructure/instructure-ui/commit/f65acd5da879fb814c2e5a0d22319a502851fff3))
 
 
 

package/es/Drilldown/index.js

@@ -1053,7 +1053,8 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       maxWidth = _this$props6.maxWidth,
       role = _this$props6.role,
       as = _this$props6.as,
-      label = _this$props6.label;
+      label = _this$props6.label,
+      trigger = _this$props6.trigger;
     if (!this.currentPage) {
       return null;
     }
@@ -1087,8 +1088,13 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         getListProps,
         getOptionProps,
         getDisabledOptionProps
-      }) => _jsx(View, {
-        borderWidth: "small",
+      }) => _jsx(View
+      // if there is a trigger the border needs to be rendered by the <Popover>
+      // (because it has an arrow)
+      , {
+        ...(trigger ? {} : {
+          borderWidth: 'small'
+        }),
         as: "div",
         elementRef: this.handleDrilldownRef,
         tabIndex: 0,
@@ -1151,6 +1157,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     });
   }
   render() {
+    var _styles$drilldown;
     // clear temporary option store
     this._activeOptionsMap = {};
     const _this$props7 = this.props,
@@ -1172,8 +1179,14 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       onMouseOver = _this$props7.onMouseOver,
       offsetX = _this$props7.offsetX,
       offsetY = _this$props7.offsetY,
-      shouldSetAriaExpanded = _this$props7.shouldSetAriaExpanded;
+      shouldSetAriaExpanded = _this$props7.shouldSetAriaExpanded,
+      styles = _this$props7.styles;
+    const borderColor = styles === null || styles === void 0 ? void 0 : (_styles$drilldown = styles.drilldown) === null || _styles$drilldown === void 0 ? void 0 : _styles$drilldown.borderColor;
     return trigger ? _jsx(Popover, {
+      themeOverride: {
+        // use here own theme's color
+        borderColor: borderColor
+      },
       shouldSetAriaExpanded: shouldSetAriaExpanded,
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,

package/lib/Drilldown/index.js

@@ -1062,7 +1062,8 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       maxWidth = _this$props6.maxWidth,
       role = _this$props6.role,
       as = _this$props6.as,
-      label = _this$props6.label;
+      label = _this$props6.label,
+      trigger = _this$props6.trigger;
     if (!this.currentPage) {
       return null;
     }
@@ -1096,8 +1097,13 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         getListProps,
         getOptionProps,
         getDisabledOptionProps
-      }) => (0, _jsxRuntime.jsx)(_View.View, {
-        borderWidth: "small",
+      }) => (0, _jsxRuntime.jsx)(_View.View
+      // if there is a trigger the border needs to be rendered by the <Popover>
+      // (because it has an arrow)
+      , {
+        ...(trigger ? {} : {
+          borderWidth: 'small'
+        }),
         as: "div",
         elementRef: this.handleDrilldownRef,
         tabIndex: 0,
@@ -1160,6 +1166,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     });
   }
   render() {
+    var _styles$drilldown;
     // clear temporary option store
     this._activeOptionsMap = {};
     const _this$props7 = this.props,
@@ -1181,8 +1188,14 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       onMouseOver = _this$props7.onMouseOver,
       offsetX = _this$props7.offsetX,
       offsetY = _this$props7.offsetY,
-      shouldSetAriaExpanded = _this$props7.shouldSetAriaExpanded;
+      shouldSetAriaExpanded = _this$props7.shouldSetAriaExpanded,
+      styles = _this$props7.styles;
+    const borderColor = styles === null || styles === void 0 ? void 0 : (_styles$drilldown = styles.drilldown) === null || _styles$drilldown === void 0 ? void 0 : _styles$drilldown.borderColor;
     return trigger ? (0, _jsxRuntime.jsx)(_Popover.Popover, {
+      themeOverride: {
+        // use here own theme's color
+        borderColor: borderColor
+      },
       shouldSetAriaExpanded: shouldSetAriaExpanded,
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drilldown",
-  "version": "10.24.1-snapshot-5",
+  "version": "10.24.1-snapshot-7",
   "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.27.6",
-    "@instructure/console": "10.24.1-snapshot-5",
-    "@instructure/emotion": "10.24.1-snapshot-5",
-    "@instructure/shared-types": "10.24.1-snapshot-5",
-    "@instructure/ui-dom-utils": "10.24.1-snapshot-5",
-    "@instructure/ui-icons": "10.24.1-snapshot-5",
-    "@instructure/ui-options": "10.24.1-snapshot-5",
-    "@instructure/ui-popover": "10.24.1-snapshot-5",
-    "@instructure/ui-position": "10.24.1-snapshot-5",
-    "@instructure/ui-prop-types": "10.24.1-snapshot-5",
-    "@instructure/ui-react-utils": "10.24.1-snapshot-5",
-    "@instructure/ui-selectable": "10.24.1-snapshot-5",
-    "@instructure/ui-testable": "10.24.1-snapshot-5",
-    "@instructure/ui-utils": "10.24.1-snapshot-5",
-    "@instructure/ui-view": "10.24.1-snapshot-5",
+    "@instructure/console": "10.24.1-snapshot-7",
+    "@instructure/emotion": "10.24.1-snapshot-7",
+    "@instructure/shared-types": "10.24.1-snapshot-7",
+    "@instructure/ui-dom-utils": "10.24.1-snapshot-7",
+    "@instructure/ui-icons": "10.24.1-snapshot-7",
+    "@instructure/ui-options": "10.24.1-snapshot-7",
+    "@instructure/ui-popover": "10.24.1-snapshot-7",
+    "@instructure/ui-position": "10.24.1-snapshot-7",
+    "@instructure/ui-prop-types": "10.24.1-snapshot-7",
+    "@instructure/ui-react-utils": "10.24.1-snapshot-7",
+    "@instructure/ui-selectable": "10.24.1-snapshot-7",
+    "@instructure/ui-testable": "10.24.1-snapshot-7",
+    "@instructure/ui-utils": "10.24.1-snapshot-7",
+    "@instructure/ui-view": "10.24.1-snapshot-7",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.24.1-snapshot-5",
-    "@instructure/ui-babel-preset": "10.24.1-snapshot-5",
-    "@instructure/ui-color-utils": "10.24.1-snapshot-5",
-    "@instructure/ui-scripts": "10.24.1-snapshot-5",
-    "@instructure/ui-themes": "10.24.1-snapshot-5",
+    "@instructure/ui-axe-check": "10.24.1-snapshot-7",
+    "@instructure/ui-babel-preset": "10.24.1-snapshot-7",
+    "@instructure/ui-color-utils": "10.24.1-snapshot-7",
+    "@instructure/ui-scripts": "10.24.1-snapshot-7",
+    "@instructure/ui-themes": "10.24.1-snapshot-7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",

package/src/Drilldown/index.tsx

@@ -1367,7 +1367,8 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       maxWidth,
       role,
       as,
-      label
+      label,
+      trigger
     } = this.props
 
     if (!this.currentPage) {
@@ -1405,7 +1406,9 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
           getDisabledOptionProps
         }) => (
           <View
-            borderWidth="small"
+            // if there is a trigger the border needs to be rendered by the <Popover>
+            // (because it has an arrow)
+            {...(trigger ? {} : { borderWidth: 'small' })}
             as="div"
             elementRef={this.handleDrilldownRef}
             tabIndex={0}
@@ -1496,11 +1499,17 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       onMouseOver,
       offsetX,
       offsetY,
-      shouldSetAriaExpanded
+      shouldSetAriaExpanded,
+      styles
     } = this.props
-
+    const borderColor = (styles?.drilldown as { borderColor: string })
+      ?.borderColor
     return trigger ? (
       <Popover
+        themeOverride={{
+          // use here own theme's color
+          borderColor: borderColor
+        }}
         shouldSetAriaExpanded={shouldSetAriaExpanded}
         isShowingContent={show}
         defaultIsShowingContent={defaultShow}

package/src/Drilldown/props.ts

@@ -136,7 +136,13 @@ type DrilldownOwnProps = {
   trigger?: React.ReactNode
 
   /**
-   * If a trigger is supplied, where should the `<Drilldown />` be placed (relative to the trigger)
+   * If a trigger is supplied, where should the `<Drilldown />` be placed
+   * (relative to the trigger)
+   *
+   * `stretch` will stretch the `Drilldown` to the same size as its `trigger`
+   * (provided that the `trigger` is at least as large as the `Drilldown`).
+   * In this case you should not set `width`/`maxHeight`, it will be set
+   * automatically.
    */
   placement?: PlacementPropValues
 

package/src/Drilldown/styles.ts

@@ -51,7 +51,6 @@ const generateStyle = (
       label: 'drilldown',
       overflow: 'visible', // needed for focus ring!
       borderColor: componentTheme.borderColor,
-
       ...(hasHighlightedOption && {
         '&:focus::before': {
           display: 'none'