@instructure/ui-drilldown 8.27.0 → 8.27.1-snapshot-13

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 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-13](https://github.com/instructure/instructure-ui/compare/v8.27.0...v8.27.1-snapshot-13) (2022-08-17)
+
+
+### 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))
+
+
+
+
+
 # [8.27.0](https://github.com/instructure/instructure-ui/compare/v8.26.3...v8.27.0) (2022-07-25)
 
 ### Features

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

@@ -1057,6 +1057,8 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
           overflowX = _this$props5.overflowX,
           height = _this$props5.height,
           width = _this$props5.width,
+          minHeight = _this$props5.minHeight,
+          minWidth = _this$props5.minWidth,
           maxHeight = _this$props5.maxHeight,
           maxWidth = _this$props5.maxWidth,
           role = _this$props5.role,
@@ -1100,6 +1102,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         position: "relative",
         borderRadius: "small",
         width: width,
+        minWidth: maxWidth,
         maxWidth: maxWidth,
         role: role,
         "aria-label": label,
@@ -1133,6 +1136,8 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         overflowX: overflowX,
         height: height,
         width: width,
+        minHeight: minHeight,
+        minWidth: minWidth,
         maxHeight: maxHeight,
         maxWidth: maxWidth,
         css: styles === null || styles === void 0 ? void 0 : styles.container,
@@ -1162,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,
@@ -1188,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

@@ -40,6 +40,8 @@ const propTypes = {
   overflowY: PropTypes.oneOf(['auto', 'hidden', 'visible']),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   trigger: PropTypes.node,
@@ -54,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,
@@ -62,6 +65,6 @@ const propTypes = {
   offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-const allowedProps = ['rootPageId', 'children', 'id', 'label', 'disabled', 'rotateFocus', 'as', 'role', 'overflowX', 'overflowY', 'height', 'width', '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'];
+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', '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

@@ -1068,6 +1068,8 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           overflowX = _this$props5.overflowX,
           height = _this$props5.height,
           width = _this$props5.width,
+          minHeight = _this$props5.minHeight,
+          minWidth = _this$props5.minWidth,
           maxHeight = _this$props5.maxHeight,
           maxWidth = _this$props5.maxWidth,
           role = _this$props5.role,
@@ -1111,6 +1113,7 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         position: "relative",
         borderRadius: "small",
         width: width,
+        minWidth: maxWidth,
         maxWidth: maxWidth,
         role: role,
         "aria-label": label,
@@ -1144,6 +1147,8 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         overflowX: overflowX,
         height: height,
         width: width,
+        minHeight: minHeight,
+        minWidth: minWidth,
         maxHeight: maxHeight,
         maxWidth: maxWidth,
         css: styles === null || styles === void 0 ? void 0 : styles.container,
@@ -1173,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,
@@ -1199,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

@@ -55,6 +55,8 @@ const propTypes = {
   overflowY: _propTypes.default.oneOf(['auto', 'hidden', 'visible']),
   height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  minHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  minWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   trigger: _propTypes.default.node,
@@ -69,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,
@@ -78,6 +81,6 @@ const propTypes = {
   offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['rootPageId', 'children', 'id', 'label', 'disabled', 'rotateFocus', 'as', 'role', 'overflowX', 'overflowY', 'height', 'width', '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'];
+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', '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.0",
+  "version": "8.27.1-snapshot-13",
   "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.0",
-    "@instructure/emotion": "8.27.0",
-    "@instructure/shared-types": "8.27.0",
-    "@instructure/ui-dom-utils": "8.27.0",
-    "@instructure/ui-icons": "8.27.0",
-    "@instructure/ui-options": "8.27.0",
-    "@instructure/ui-popover": "8.27.0",
-    "@instructure/ui-position": "8.27.0",
-    "@instructure/ui-prop-types": "8.27.0",
-    "@instructure/ui-react-utils": "8.27.0",
-    "@instructure/ui-selectable": "8.27.0",
-    "@instructure/ui-testable": "8.27.0",
-    "@instructure/ui-utils": "8.27.0",
-    "@instructure/ui-view": "8.27.0",
+    "@instructure/console": "8.27.1-snapshot-13",
+    "@instructure/emotion": "8.27.1-snapshot-13",
+    "@instructure/shared-types": "8.27.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-icons": "8.27.1-snapshot-13",
+    "@instructure/ui-options": "8.27.1-snapshot-13",
+    "@instructure/ui-popover": "8.27.1-snapshot-13",
+    "@instructure/ui-position": "8.27.1-snapshot-13",
+    "@instructure/ui-prop-types": "8.27.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-selectable": "8.27.1-snapshot-13",
+    "@instructure/ui-testable": "8.27.1-snapshot-13",
+    "@instructure/ui-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-view": "8.27.1-snapshot-13",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.27.0",
-    "@instructure/ui-color-utils": "8.27.0",
-    "@instructure/ui-test-locator": "8.27.0",
-    "@instructure/ui-test-utils": "8.27.0",
-    "@instructure/ui-themes": "8.27.0"
+    "@instructure/ui-babel-preset": "8.27.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.27.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-themes": "8.27.1-snapshot-13"
   },
   "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

@@ -1304,6 +1304,8 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       overflowX,
       height,
       width,
+      minHeight,
+      minWidth,
       maxHeight,
       maxWidth,
       role,
@@ -1353,6 +1355,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
             position="relative"
             borderRadius="small"
             width={width}
+            minWidth={maxWidth}
             maxWidth={maxWidth}
             role={role}
             aria-label={label}
@@ -1391,6 +1394,8 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
               overflowX={overflowX}
               height={height}
               width={width}
+              minHeight={minHeight}
+              minWidth={minWidth}
               maxHeight={maxHeight}
               maxWidth={maxWidth}
               css={styles?.container}
@@ -1425,6 +1430,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       mountNode,
       constrain,
       positionTarget,
+      positionContainerDisplay,
       popoverRef,
       disabled,
       onDismiss,
@@ -1451,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

@@ -27,10 +27,12 @@ import PropTypes from 'prop-types'
 
 import { Children, controllable } from '@instructure/ui-prop-types'
 import { PositionPropTypes } from '@instructure/ui-position'
+
 import { Popover } from '@instructure/ui-popover'
-import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type {
   PlacementPropValues,
   PositionConstraint,
@@ -122,6 +124,8 @@ type DrilldownOwnProps = {
   overflowY?: 'auto' | 'hidden' | 'visible'
   height?: string | number
   width?: string | number
+  minHeight?: string | number
+  minWidth?: string | number
   maxHeight?: string | number
   maxWidth?: string | number
 
@@ -212,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.
    */
@@ -300,6 +309,8 @@ const propTypes: PropValidators<PropKeys> = {
   overflowY: PropTypes.oneOf(['auto', 'hidden', 'visible']),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -315,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,
@@ -337,6 +349,8 @@ const allowedProps: AllowedPropKeys = [
   'overflowY',
   'height',
   'width',
+  'minHeight',
+  'minWidth',
   'maxHeight',
   'maxWidth',
 
@@ -355,6 +369,7 @@ const allowedProps: AllowedPropKeys = [
   'popoverRef',
   'mountNode',
   'positionTarget',
+  'positionContainerDisplay',
   'constrain',
   'shouldHideOnSelect',
   'shouldContainFocus',

package/src/index.ts

@@ -23,4 +23,18 @@
  */
 
 export { Drilldown } from './Drilldown'
-export type { DrilldownProps } from './Drilldown/props'
+
+export type {
+  DrilldownProps,
+  PageChild as DrilldownPageChild,
+  GroupChild as DrilldownGroupChild,
+  OptionChild as DrilldownOptionChild,
+  SeparatorChild as DrilldownSeparatorChild
+} from './Drilldown/props'
+export type { DrilldownGroupProps } from './Drilldown/DrilldownGroup/props'
+export type { DrilldownOptionProps } from './Drilldown/DrilldownOption/props'
+export type {
+  DrilldownPageProps,
+  PageChildren as DrilldownPageChildren
+} from './Drilldown/DrilldownPage/props'
+export type { DrilldownSeparatorProps } from './Drilldown/DrilldownSeparator/props'