@instructure/ui-drilldown 8.27.1-snapshot-7 → 8.27.1-snapshot-15

package/CHANGELOG.md

@@ -3,12 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.27.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.27.0...v8.27.1-snapshot-7) (2022-08-15)
+## [8.27.1-snapshot-15](https://github.com/instructure/instructure-ui/compare/v8.27.0...v8.27.1-snapshot-15) (2022-08-29)
 
 
 ### Features
 
 * **ui-drilldown:** add `minHeight` and `minWidth` props to Drilldown ([7e10b29](https://github.com/instructure/instructure-ui/commit/7e10b2966f4dfb79dfdecca62f12c3f9ba5b62b4))
+* **ui-drilldown:** add `positionContainerDisplay` prop to Drilldown ([834302c](https://github.com/instructure/instructure-ui/commit/834302c1510c96bde8436307465fa480957719bc))
 
 
 

package/es/Drilldown/__examples__/Drilldown.examples.js

@@ -163,6 +163,19 @@ export default {
       defaultShow: true,
       width: '20rem',
       height: '20rem'
+    }, {
+      text: 'with display="block" container',
+      trigger: /*#__PURE__*/React.createElement("button", {
+        key: 1,
+        style: {
+          margin: '30px auto',
+          width: '100%'
+        }
+      }, "a drilldown trigger"),
+      defaultShow: false,
+      width: '20rem',
+      height: '20rem',
+      positionContainerDisplay: 'block'
     }]
   },
 
@@ -191,6 +204,7 @@ export default {
       height: props.customProps.height,
       disabled: props.customProps.disabled,
       trigger: props.customProps.trigger,
+      positionContainerDisplay: props.customProps.positionContainerDisplay,
       ...(props.customProps.trigger ? {
         defaultShow: props.customProps.defaultShow,
         withArrow: props.customProps.withArrow,

package/es/Drilldown/index.js

@@ -1167,6 +1167,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
           mountNode = _this$props6.mountNode,
           constrain = _this$props6.constrain,
           positionTarget = _this$props6.positionTarget,
+          positionContainerDisplay = _this$props6.positionContainerDisplay,
           popoverRef = _this$props6.popoverRef,
           disabled = _this$props6.disabled,
           onDismiss = _this$props6.onDismiss,
@@ -1193,6 +1194,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       placement: placement,
       withArrow: withArrow,
       positionTarget: positionTarget,
+      positionContainerDisplay: positionContainerDisplay,
       constrain: constrain,
       shouldContainFocus: shouldContainFocus,
       shouldReturnFocus: shouldReturnFocus,

package/es/Drilldown/props.js

@@ -56,6 +56,7 @@ const propTypes = {
   popoverRef: PropTypes.func,
   mountNode: PositionPropTypes.mountNode,
   positionTarget: PositionPropTypes.mountNode,
+  positionContainerDisplay: PropTypes.oneOf(['inline-block', 'block']),
   constrain: PositionPropTypes.constrain,
   shouldHideOnSelect: PropTypes.bool,
   shouldContainFocus: PropTypes.bool,
@@ -65,5 +66,5 @@ const propTypes = {
   offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 const allowedProps = ['rootPageId', 'children', 'id', 'label', 'disabled', 'rotateFocus', 'as', 'role', 'overflowX', 'overflowY', 'height', 'width', 'minHeight', 'minWidth', 'maxHeight', 'maxWidth', // Popover version props
-'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'elementRef', 'drilldownRef', 'popoverRef', 'mountNode', 'positionTarget', 'constrain', 'shouldHideOnSelect', 'shouldContainFocus', 'shouldReturnFocus', 'withArrow', 'offsetX', 'offsetY'];
+'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'elementRef', 'drilldownRef', 'popoverRef', 'mountNode', 'positionTarget', 'positionContainerDisplay', 'constrain', 'shouldHideOnSelect', 'shouldContainFocus', 'shouldReturnFocus', 'withArrow', 'offsetX', 'offsetY'];
 export { propTypes, allowedProps };

package/lib/Drilldown/__examples__/Drilldown.examples.js

@@ -152,6 +152,19 @@ var _default = {
       defaultShow: true,
       width: '20rem',
       height: '20rem'
+    }, {
+      text: 'with display="block" container',
+      trigger: /*#__PURE__*/_react.default.createElement("button", {
+        key: 1,
+        style: {
+          margin: '30px auto',
+          width: '100%'
+        }
+      }, "a drilldown trigger"),
+      defaultShow: false,
+      width: '20rem',
+      height: '20rem',
+      positionContainerDisplay: 'block'
     }]
   },
 
@@ -180,6 +193,7 @@ var _default = {
       height: props.customProps.height,
       disabled: props.customProps.disabled,
       trigger: props.customProps.trigger,
+      positionContainerDisplay: props.customProps.positionContainerDisplay,
       ...(props.customProps.trigger ? {
         defaultShow: props.customProps.defaultShow,
         withArrow: props.customProps.withArrow,

package/lib/Drilldown/index.js

@@ -1178,6 +1178,7 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           mountNode = _this$props6.mountNode,
           constrain = _this$props6.constrain,
           positionTarget = _this$props6.positionTarget,
+          positionContainerDisplay = _this$props6.positionContainerDisplay,
           popoverRef = _this$props6.popoverRef,
           disabled = _this$props6.disabled,
           onDismiss = _this$props6.onDismiss,
@@ -1204,6 +1205,7 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       placement: placement,
       withArrow: withArrow,
       positionTarget: positionTarget,
+      positionContainerDisplay: positionContainerDisplay,
       constrain: constrain,
       shouldContainFocus: shouldContainFocus,
       shouldReturnFocus: shouldReturnFocus,

package/lib/Drilldown/props.js

@@ -71,6 +71,7 @@ const propTypes = {
   popoverRef: _propTypes.default.func,
   mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
   positionTarget: _PositionPropTypes.PositionPropTypes.mountNode,
+  positionContainerDisplay: _propTypes.default.oneOf(['inline-block', 'block']),
   constrain: _PositionPropTypes.PositionPropTypes.constrain,
   shouldHideOnSelect: _propTypes.default.bool,
   shouldContainFocus: _propTypes.default.bool,
@@ -81,5 +82,5 @@ const propTypes = {
 };
 exports.propTypes = propTypes;
 const allowedProps = ['rootPageId', 'children', 'id', 'label', 'disabled', 'rotateFocus', 'as', 'role', 'overflowX', 'overflowY', 'height', 'width', 'minHeight', 'minWidth', 'maxHeight', 'maxWidth', // Popover version props
-'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'elementRef', 'drilldownRef', 'popoverRef', 'mountNode', 'positionTarget', 'constrain', 'shouldHideOnSelect', 'shouldContainFocus', 'shouldReturnFocus', 'withArrow', 'offsetX', 'offsetY'];
+'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'elementRef', 'drilldownRef', 'popoverRef', 'mountNode', 'positionTarget', 'positionContainerDisplay', 'constrain', 'shouldHideOnSelect', 'shouldContainFocus', 'shouldReturnFocus', 'withArrow', 'offsetX', 'offsetY'];
 exports.allowedProps = allowedProps;

package/package.json

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

package/src/Drilldown/__examples__/Drilldown.examples.tsx

@@ -177,6 +177,18 @@ export default {
         defaultShow: true,
         width: '20rem',
         height: '20rem'
+      },
+      {
+        text: 'with display="block" container',
+        trigger: (
+          <button key={1} style={{ margin: '30px auto', width: '100%' }}>
+            a drilldown trigger
+          </button>
+        ),
+        defaultShow: false,
+        width: '20rem',
+        height: '20rem',
+        positionContainerDisplay: 'block'
       }
     ]
   },
@@ -207,6 +219,7 @@ export default {
       height: props.customProps.height,
       disabled: props.customProps.disabled,
       trigger: props.customProps.trigger,
+      positionContainerDisplay: props.customProps.positionContainerDisplay,
       ...(props.customProps.trigger
         ? {
             defaultShow: props.customProps.defaultShow,

package/src/Drilldown/index.tsx

@@ -1430,6 +1430,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       mountNode,
       constrain,
       positionTarget,
+      positionContainerDisplay,
       popoverRef,
       disabled,
       onDismiss,
@@ -1456,6 +1457,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
         placement={placement}
         withArrow={withArrow}
         positionTarget={positionTarget}
+        positionContainerDisplay={positionContainerDisplay}
         constrain={constrain}
         shouldContainFocus={shouldContainFocus}
         shouldReturnFocus={shouldReturnFocus}

package/src/Drilldown/props.ts

@@ -216,6 +216,11 @@ type DrilldownOwnProps = {
    */
   positionTarget?: PositionMountNode
 
+  /**
+   * If a trigger is supplied, this prop can set the CSS `display` property on the `<span>` container element of the underlying Position component
+   */
+  positionContainerDisplay?: 'inline-block' | 'block'
+
   /**
    * The parent in which to constrain the placement.
    */
@@ -321,6 +326,7 @@ const propTypes: PropValidators<PropKeys> = {
   popoverRef: PropTypes.func,
   mountNode: PositionPropTypes.mountNode,
   positionTarget: PositionPropTypes.mountNode,
+  positionContainerDisplay: PropTypes.oneOf(['inline-block', 'block']),
   constrain: PositionPropTypes.constrain,
   shouldHideOnSelect: PropTypes.bool,
   shouldContainFocus: PropTypes.bool,
@@ -363,6 +369,7 @@ const allowedProps: AllowedPropKeys = [
   'popoverRef',
   'mountNode',
   'positionTarget',
+  'positionContainerDisplay',
   'constrain',
   'shouldHideOnSelect',
   'shouldContainFocus',