@dhis2-ui/select 10.16.5 → 10.18.0

package/build/cjs/multi-select/multi-select.js

@@ -22,6 +22,8 @@ const MultiSelect = ({
   selected = staticArr,
   tabIndex,
   maxHeight,
+  menuMinWidth,
+  menuMaxWidth,
   inputMaxHeight,
   onChange,
   onFocus,
@@ -77,6 +79,8 @@ const MultiSelect = ({
     menu: menu,
     tabIndex: tabIndex,
     maxHeight: maxHeight,
+    menuMinWidth: menuMinWidth,
+    menuMaxWidth: menuMaxWidth,
     onChange: onChange,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
@@ -122,6 +126,10 @@ MultiSelect.propTypes = {
   loading: _propTypes2.default.bool,
   loadingText: _propTypes2.default.string,
   maxHeight: _propTypes2.default.string,
+  /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) */
+  menuMaxWidth: _propTypes2.default.string,
+  /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) */
+  menuMinWidth: _propTypes2.default.string,
   /** Required if `filterable` prop is `true` */
   noMatchText: (0, _propTypes.requiredIf)(props => props.filterable, _propTypes2.default.string),
   placeholder: _propTypes2.default.string,

package/build/cjs/multi-select/multi-select.prod.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndMultipleSelections = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndDisabled = exports.WithOnFocus = exports.WithOnBlur = exports.WithMultipleSelectionsWrapped = exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.RTL = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.DenseWithSelections = exports.Dense = exports.DefaultPosition = exports.CollapseSelectionAfterThreshold = void 0;
+exports.default = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndMultipleSelections = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndDisabled = exports.WithOnFocus = exports.WithOnBlur = exports.WithMultipleSelectionsWrapped = exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithMenuMinWidth = exports.WithMenuMaxWidth = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.RTL = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.DenseWithSelections = exports.Dense = exports.DefaultPosition = exports.CollapseSelectionAfterThreshold = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -561,4 +561,43 @@ exports.RTL = RTL;
 RTL.args = {
   selected: ['1', '2'],
   prefix: 'RTL text'
+};
+const WithMenuMaxWidth = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: 120
+  }
+}, /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "A much longer option label"
+})));
+exports.WithMenuMaxWidth = WithMenuMaxWidth;
+WithMenuMaxWidth.args = {
+  menuMaxWidth: '200px'
+};
+const WithMenuMinWidth = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: 120
+  }
+}, /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "4",
+  label: "A longer option that exceeds the minimum"
+})));
+exports.WithMenuMinWidth = WithMenuMinWidth;
+WithMenuMinWidth.args = {
+  menuMinWidth: '240px'
 };

package/build/cjs/multi-select-field/multi-select-field.js

@@ -42,6 +42,8 @@ class MultiSelectField extends _react.default.Component {
       helpText,
       validationText,
       maxHeight,
+      menuMinWidth,
+      menuMaxWidth,
       inputMaxHeight,
       inputWidth,
       children,
@@ -76,6 +78,8 @@ class MultiSelectField extends _react.default.Component {
       selected: selected,
       tabIndex: tabIndex,
       maxHeight: maxHeight,
+      menuMinWidth: menuMinWidth,
+      menuMaxWidth: menuMaxWidth,
       inputMaxHeight: inputMaxHeight,
       onChange: onChange,
       onFocus: onFocus,
@@ -147,6 +151,10 @@ MultiSelectField.propTypes = {
   loadingText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
   /** Constrains height of the MultiSelect */
   maxHeight: _propTypes.default.string,
+  /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) */
+  menuMaxWidth: _propTypes.default.string,
+  /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) */
+  menuMinWidth: _propTypes.default.string,
   /** Text to display when there are no filter results */
   noMatchText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
   /** Placeholder text when the MultiSelect is empty */

package/build/cjs/multi-select-field/multi-select-field.prod.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithHelpText = exports.StatusWarning = exports.StatusValid = exports.StatusError = exports.Required = exports.InputWidth = exports.DefaultLoadingText = exports.DefaultFilterPlaceholderAndNoMatchText = exports.DefaultEmpty = exports.DefaultClearText = exports.Default = void 0;
+exports.default = exports.WithMenuMinWidth = exports.WithMenuMaxWidth = exports.WithHelpText = exports.StatusWarning = exports.StatusValid = exports.StatusError = exports.Required = exports.InputWidth = exports.DefaultLoadingText = exports.DefaultFilterPlaceholderAndNoMatchText = exports.DefaultEmpty = exports.DefaultClearText = exports.Default = void 0;
 var _uiConstants = require("@dhis2/ui-constants");
 var _react = _interopRequireDefault(require("react"));
 var _index = require("../index.js");
@@ -174,4 +174,44 @@ DefaultLoadingText.args = {
   loading: true,
   ...DefaultEmpty.args
 };
-DefaultLoadingText.storyName = 'Default: loadingText';
+DefaultLoadingText.storyName = 'Default: loadingText';
+const WithMenuMaxWidth = exports.WithMenuMaxWidth = Template.bind({});
+WithMenuMaxWidth.args = {
+  inputWidth: '120px',
+  menuMaxWidth: '200px',
+  children: [/*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    key: "1",
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    key: "2",
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    key: "3",
+    value: "3",
+    label: "A much longer option label"
+  })]
+};
+const WithMenuMinWidth = exports.WithMenuMinWidth = Template.bind({});
+WithMenuMinWidth.args = {
+  inputWidth: '120px',
+  menuMinWidth: '240px',
+  children: [/*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    key: "1",
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    key: "2",
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    key: "3",
+    value: "3",
+    label: "option three"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    key: "4",
+    value: "4",
+    label: "A longer option that exceeds the minimum"
+  })]
+};

package/build/cjs/select/menu-wrapper.js

@@ -14,11 +14,20 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const MenuWrapper = ({
   children,
   dataTest,
+  inputWidth,
   maxHeight = '280px',
-  menuWidth,
+  menuMaxWidth,
+  menuMinWidth,
   onClick,
   selectRef
 }) => {
+  // menuMinWidth or menuMaxWidth enables flexible sizing (fit-content), with
+  // min-width = max(input, menuMinWidth). Without them, width matches the input.
+  const flexible = menuMinWidth || menuMaxWidth;
+  const width = flexible ? 'fit-content' : inputWidth;
+  const flexibleMinWidth = menuMinWidth ? `max(${inputWidth}, ${menuMinWidth})` : inputWidth;
+  const minWidth = flexible ? flexibleMinWidth : 'auto';
+  const maxWidth = menuMaxWidth || 'none';
   return /*#__PURE__*/_react.default.createElement(_layer.Layer, {
     onBackdropClick: onClick,
     transparent: true
@@ -28,18 +37,20 @@ const MenuWrapper = ({
     observeReferenceResize: true
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-test": `${dataTest}-menuwrapper`,
-    className: _style.default.dynamic([["1871652546", [menuWidth, maxHeight, _uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.popover]]])
+    className: _style.default.dynamic([["3752211706", [width, minWidth, maxWidth, maxHeight, _uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.popover]]])
   }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1871652546",
-    dynamic: [menuWidth, maxHeight, _uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.popover]
-  }, [`div.__jsx-style-dynamic-selector{width:${menuWidth};height:auto;max-height:${maxHeight};overflow:auto;background:${_uiConstants.colors.white};border:1px solid ${_uiConstants.colors.grey200};border-radius:3px;box-shadow:${_uiConstants.elevations.popover};}`]))));
+    id: "3752211706",
+    dynamic: [width, minWidth, maxWidth, maxHeight, _uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.popover]
+  }, [`div.__jsx-style-dynamic-selector{width:${width};min-width:${minWidth};max-width:${maxWidth};height:auto;max-height:${maxHeight};overflow:auto;background:${_uiConstants.colors.white};border:1px solid ${_uiConstants.colors.grey200};border-radius:3px;box-shadow:${_uiConstants.elevations.popover};}`]))));
 };
 exports.MenuWrapper = MenuWrapper;
 MenuWrapper.propTypes = {
   dataTest: _propTypes.default.string.isRequired,
-  menuWidth: _propTypes.default.string.isRequired,
+  inputWidth: _propTypes.default.string.isRequired,
   selectRef: _propTypes.default.object.isRequired,
   children: _propTypes.default.node,
   maxHeight: _propTypes.default.string,
+  menuMaxWidth: _propTypes.default.string,
+  menuMinWidth: _propTypes.default.string,
   onClick: _propTypes.default.func
 };

package/build/cjs/select/select.js

@@ -26,7 +26,7 @@ class Select extends _react.Component {
     super(...args);
     _defineProperty(this, "state", {
       open: false,
-      menuWidth: 'auto'
+      inputWidth: 'auto'
     });
     _defineProperty(this, "selectRef", /*#__PURE__*/_react.default.createRef());
     _defineProperty(this, "inputRef", /*#__PURE__*/_react.default.createRef());
@@ -40,10 +40,10 @@ class Select extends _react.Component {
      * See: https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web
      */
     _defineProperty(this, "onResize", (0, _debounce.debounce)(() => {
-      const menuWidth = this.getMenuWidth();
-      if (this.state.menuWidth !== menuWidth) {
+      const inputWidth = this.getInputWidth();
+      if (this.state.inputWidth !== inputWidth) {
         this.setState({
-          menuWidth
+          inputWidth
         });
       }
     }, 50));
@@ -66,7 +66,7 @@ class Select extends _react.Component {
     _defineProperty(this, "handleOpen", () => {
       this.setState({
         open: true,
-        menuWidth: this.getMenuWidth()
+        inputWidth: this.getInputWidth()
       });
     });
     _defineProperty(this, "handleClose", () => {
@@ -145,29 +145,29 @@ class Select extends _react.Component {
       this.inputRef.current.focus();
     }
     this.setState({
-      menuWidth: this.getMenuWidth()
+      inputWidth: this.getInputWidth()
     });
     window.addEventListener('resize', this.onResize);
   }
   componentWillUnmount() {
     window.removeEventListener('resize', this.onResize);
   }
-  getMenuWidth() {
+  getInputWidth() {
     const {
       offsetWidth
     } = this.inputRef.current;
     const {
-      menuWidth
+      inputWidth
     } = this.state;
-    if (offsetWidth && `${offsetWidth}px` !== menuWidth) {
+    if (offsetWidth && `${offsetWidth}px` !== inputWidth) {
       return `${offsetWidth}px`;
     }
-    return menuWidth;
+    return inputWidth;
   }
   render() {
     const {
       open,
-      menuWidth
+      inputWidth
     } = this.state;
     const {
       children,
@@ -176,6 +176,8 @@ class Select extends _react.Component {
       onChange,
       tabIndex,
       maxHeight,
+      menuMinWidth,
+      menuMaxWidth,
       error,
       warning,
       valid,
@@ -222,7 +224,9 @@ class Select extends _react.Component {
       onClick: this.onOutsideClick,
       maxHeight: maxHeight,
       selectRef: this.selectRef,
-      menuWidth: menuWidth,
+      inputWidth: inputWidth,
+      menuMinWidth: menuMinWidth,
+      menuMaxWidth: menuMaxWidth,
       dataTest: `${dataTest}-menu`
     }, menu));
   }
@@ -243,6 +247,8 @@ Select.propTypes = {
   error: _uiConstants.sharedPropTypes.statusPropType,
   initialFocus: _propTypes.default.bool,
   maxHeight: _propTypes.default.string,
+  menuMaxWidth: _propTypes.default.string,
+  menuMinWidth: _propTypes.default.string,
   tabIndex: _propTypes.default.string,
   valid: _uiConstants.sharedPropTypes.statusPropType,
   warning: _uiConstants.sharedPropTypes.statusPropType,

package/build/cjs/simple-single-select/__stories__/WithMenuMaxWidth.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithMenuMaxWidth = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const options = [{
+  value: '1',
+  label: 'option one'
+}, {
+  value: '2',
+  label: 'option two'
+}, {
+  value: '3',
+  label: 'A much longer option label that gets clamped'
+}];
+const WithMenuMaxWidth = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 120
+    }
+  }, /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: options,
+    menuMaxWidth: "200px"
+  }));
+};
+exports.WithMenuMaxWidth = WithMenuMaxWidth;

package/build/cjs/simple-single-select/__stories__/WithMenuMinWidth.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithMenuMinWidth = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const options = [{
+  value: '1',
+  label: 'option one'
+}, {
+  value: '2',
+  label: 'option two'
+}, {
+  value: '3',
+  label: 'option three'
+}, {
+  value: '4',
+  label: 'A longer option that exceeds the minimum'
+}];
+const WithMenuMinWidth = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 120
+    }
+  }, /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: options,
+    menuMinWidth: "240px"
+  }));
+};
+exports.WithMenuMinWidth = WithMenuMinWidth;

package/build/cjs/simple-single-select/menu/menu.js

@@ -34,6 +34,8 @@ function Menu({
   loading,
   loadingText,
   maxHeight,
+  maxWidth,
+  minWidth,
   noMatchText,
   optionUpdateStrategy,
   selectRef,
@@ -42,17 +44,16 @@ function Menu({
   onClose,
   onEndReached
 }) {
-  const [menuWidth, setWidth] = (0, _react.useState)('auto');
+  const [selectWidth, setSelectWidth] = (0, _react.useState)();
   const dataTestPrefix = `${dataTest}-menu`;
+
+  // Re-measuring whenever `hidden` changes keeps the width current when the
+  // select's container has been resized since the menu was last opened
   (0, _react.useEffect)(() => {
     if (selectRef) {
-      const callback = () => setWidth(`${selectRef.offsetWidth}px`);
-      callback(); // We want to know the width as soon as the
-
-      selectRef.addEventListener('resize', callback);
-      return () => selectRef.removeEventListener('resize', callback);
+      setSelectWidth(`${selectRef.offsetWidth}px`);
     }
-  }, [selectRef]);
+  }, [selectRef, hidden]);
   if (hidden) {
     return null;
   }
@@ -61,6 +62,10 @@ function Menu({
   // we're in the process of loading options
   !loading;
   const isEmpty = !options.length && !filterValue;
+  const flexible = Boolean(minWidth || maxWidth);
+  // We never want the menu narrower than the select, so a maxWidth below
+  // the select's width intentionally has no effect
+  const flexibleMinWidth = minWidth && selectWidth ? `max(${selectWidth}, ${minWidth})` : minWidth || selectWidth;
   return /*#__PURE__*/_react.default.createElement(_layer.Layer, {
     onBackdropClick: onClose,
     transparent: true
@@ -70,7 +75,9 @@ function Menu({
     observeReferenceResize: true
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: menuWidth,
+      width: flexible ? 'fit-content' : selectWidth,
+      minWidth: flexible ? flexibleMinWidth : undefined,
+      maxWidth,
       maxHeight
     },
     className: _style.default.dynamic([["2949029222", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]]]) + " " + "menu"
@@ -121,6 +128,8 @@ Menu.propTypes = {
   loading: _propTypes.default.bool,
   loadingText: _propTypes.default.string,
   maxHeight: _propTypes.default.string,
+  maxWidth: _propTypes.default.string,
+  minWidth: _propTypes.default.string,
   noMatchText: _propTypes.default.string,
   optionComponent: _propTypes.default.elementType,
   optionUpdateStrategy: _propTypes.default.oneOf(['off', 'polite', 'assertive']),

package/build/cjs/simple-single-select/simple-single-select.js

@@ -16,6 +16,11 @@ var _sharedPropTypes = require("./shared-prop-types.js");
 var _index4 = require("./use-handle-key-press/index.js");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultSelected = {
+  label: '',
+  value: ''
+};
+const noop = () => undefined;
 function useFocussedOptionIndex({
   filterable,
   filterValue,
@@ -73,22 +78,21 @@ function SimpleSingleSelect({
   loading = false,
   menuLoadingText: _menuLoadingText = '',
   menuMaxHeight = '288px',
+  menuMaxWidth,
+  menuMinWidth,
   noMatchText: _noMatchText = '',
   optionUpdateStrategy = 'polite',
   placeholder = '',
   prefix = '',
-  selected = {
-    label: '',
-    value: ''
-  },
+  selected = defaultSelected,
   tabIndex = '0',
   valid = false,
   warning = false,
-  onBlur = () => undefined,
-  onClear = () => undefined,
-  onEndReached = () => undefined,
-  onFilterChange = () => undefined,
-  onFocus = () => undefined
+  onBlur = noop,
+  onClear = noop,
+  onEndReached = noop,
+  onFilterChange = noop,
+  onFocus = noop
 }) {
   // We can't translate with default props as the translation function would
   // be called before we get any translations from the consuming app/lib
@@ -238,6 +242,8 @@ function SimpleSingleSelect({
     loading: loading,
     loadingText: menuLoadingText,
     maxHeight: menuMaxHeight,
+    maxWidth: menuMaxWidth,
+    minWidth: menuMinWidth,
     noMatchText: noMatchText,
     optionUpdateStrategy: optionUpdateStrategy,
     options: options,
@@ -295,6 +301,10 @@ SimpleSingleSelect.propTypes = {
   menuLoadingText: _propTypes2.default.string,
   /** Allows to modify the max height of the menu **/
   menuMaxHeight: _propTypes2.default.string,
+  /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) **/
+  menuMaxWidth: _propTypes2.default.string,
+  /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) **/
+  menuMinWidth: _propTypes2.default.string,
   /** String that will be displayed when the select is being filtered but the options array is empty **/
   noMatchText: (0, _propTypes.requiredIf)(props => props.filterable, _propTypes2.default.string),
   /** Allows to override what's rendered inside the `button[role="option"]`.

package/build/cjs/simple-single-select/simple-single-select.prod.stories.js

@@ -99,6 +99,18 @@ Object.defineProperty(exports, "WithManyOptions", {
     return _WithManyOptions.WithManyOptions;
   }
 });
+Object.defineProperty(exports, "WithMenuMaxWidth", {
+  enumerable: true,
+  get: function () {
+    return _WithMenuMaxWidth.WithMenuMaxWidth;
+  }
+});
+Object.defineProperty(exports, "WithMenuMinWidth", {
+  enumerable: true,
+  get: function () {
+    return _WithMenuMinWidth.WithMenuMinWidth;
+  }
+});
 Object.defineProperty(exports, "WithMultipleSelectsAndScrollableParent", {
   enumerable: true,
   get: function () {
@@ -226,6 +238,8 @@ var _WithOptionsAndLoadingText = require("./__stories__/WithOptionsAndLoadingTex
 var _WithoutOptionsAndLoading = require("./__stories__/WithoutOptionsAndLoading.js");
 var _WithManyOptions = require("./__stories__/WithManyOptions.js");
 var _WithCustomLowMaxHeight = require("./__stories__/WithCustomLowMaxHeight.js");
+var _WithMenuMinWidth = require("./__stories__/WithMenuMinWidth.js");
+var _WithMenuMaxWidth = require("./__stories__/WithMenuMaxWidth.js");
 var _WithOptionsAndDisabled = require("./__stories__/WithOptionsAndDisabled.js");
 var _WithSelectionAndDisabled = require("./__stories__/WithSelectionAndDisabled.js");
 var _WithPrefix = require("./__stories__/WithPrefix.js");

package/build/cjs/simple-single-select/simple-single-select.test.js

@@ -5,6 +5,7 @@ var _react = require("@testing-library/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _simpleSingleSelect = require("./simple-single-select.js");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 describe('<SimpleSingleSelect />', () => {
   beforeAll(() => {
     const consoleError = console.error;
@@ -145,6 +146,67 @@ describe('<SimpleSingleSelect />', () => {
     const menu = listbox.parentNode.parentNode.parentNode;
     expect(menu.style.maxHeight).toBe('100px');
   });
+  describe('dropdown menu width', () => {
+    let offsetWidth;
+    beforeEach(() => {
+      // The menu's width is derived from the select's measured width,
+      // which is always 0 in jsdom
+      offsetWidth = jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(120);
+    });
+    afterEach(() => {
+      offsetWidth.mockRestore();
+    });
+    const renderAndOpen = props => {
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_simpleSingleSelect.SimpleSingleSelect, _extends({
+        name: "simple",
+        selected: {
+          value: 'foo',
+          label: 'Foo'
+        },
+        onChange: () => null,
+        options: [{
+          value: 'foo',
+          label: 'Foo'
+        }]
+      }, props)));
+      _react.fireEvent.click(_react.screen.getByRole('combobox'));
+      const listbox = _react.screen.getByRole('listbox');
+      return listbox.parentNode.parentNode.parentNode;
+    };
+    it('should match the width of the select by default', () => {
+      const menu = renderAndOpen();
+      expect(menu.style.width).toBe('120px');
+    });
+    it('should not be narrower than menuMinWidth or the select', () => {
+      const menu = renderAndOpen({
+        menuMinWidth: '240px'
+      });
+      expect(menu.style.minWidth).toBe('max(120px, 240px)');
+    });
+    it('should not be wider than menuMaxWidth', () => {
+      const menu = renderAndOpen({
+        menuMaxWidth: '200px'
+      });
+      expect(menu.style.maxWidth).toBe('200px');
+      expect(menu.style.minWidth).toBe('120px');
+    });
+    it('should re-measure the select when the menu is reopened', () => {
+      renderAndOpen({
+        menuMinWidth: '240px'
+      });
+      const comboBox = _react.screen.getByRole('combobox');
+
+      // close the menu
+      _react.fireEvent.click(comboBox);
+
+      // widen the select while the menu is closed, then reopen it
+      offsetWidth.mockReturnValue(300);
+      _react.fireEvent.click(comboBox);
+      const listbox = _react.screen.getByRole('listbox');
+      const menu = listbox.parentNode.parentNode.parentNode;
+      expect(menu.style.minWidth).toBe('max(300px, 240px)');
+    });
+  });
   it('should accept a placeholder', () => {
     (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
       name: "simple",

package/build/cjs/simple-single-select-field/simple-single-select-field.js

@@ -108,6 +108,10 @@ SimpleSingleSelectField.propTypes = {
   menuLoadingText: _propTypes2.default.string,
   /** Allows to modify the max height of the menu **/
   menuMaxHeight: _propTypes2.default.string,
+  /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) **/
+  menuMaxWidth: _propTypes2.default.string,
+  /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) **/
+  menuMinWidth: _propTypes2.default.string,
   /** String that will be displayed when the select is being filtered but the options array is empty **/
   noMatchText: (0, _propTypes.requiredIf)(props => props.filterable, _propTypes2.default.string),
   /** Allows to override what's rendered inside the `button[role="option"]`.