@dhis2-ui/select 10.16.5 → 10.18.0

package/build/cjs/simple-single-select-field/simple-single-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.StatusDisabled = exports.Required = exports.InputWidth = exports.Default = void 0;
+exports.default = exports.WithMenuMinWidth = exports.WithMenuMaxWidth = exports.WithHelpText = exports.StatusWarning = exports.StatusValid = exports.StatusError = exports.StatusDisabled = exports.Required = exports.InputWidth = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("./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); }
@@ -49,6 +49,19 @@ const options = [{
   value: '10',
   label: 'ten'
 }];
+const longOptions = [{
+  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'
+}];
 var _default = exports.default = {
   title: 'SimpleSingleSelectField',
   component: _index.SimpleSingleSelectField,
@@ -184,4 +197,42 @@ const InputWidth = () => {
     options: options
   }));
 };
-exports.InputWidth = InputWidth;
+exports.InputWidth = InputWidth;
+const WithMenuMinWidth = () => {
+  var _longOptions$find;
+  const [value, setValue] = (0, _react.useState)('');
+  const valueLabel = value ? (_longOptions$find = longOptions.find(option => option.value === value)) === null || _longOptions$find === void 0 ? void 0 : _longOptions$find.label : '';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 120
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelectField, {
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: longOptions,
+    menuMinWidth: "240px"
+  }));
+};
+exports.WithMenuMinWidth = WithMenuMinWidth;
+const WithMenuMaxWidth = () => {
+  var _longOptions$find2;
+  const [value, setValue] = (0, _react.useState)('');
+  const valueLabel = value ? (_longOptions$find2 = longOptions.find(option => option.value === value)) === null || _longOptions$find2 === void 0 ? void 0 : _longOptions$find2.label : '';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 120
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelectField, {
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: longOptions,
+    menuMaxWidth: "200px"
+  }));
+};
+exports.WithMenuMaxWidth = WithMenuMaxWidth;

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

@@ -52,6 +52,8 @@ describe('<SimpleSingleSelectField />', () => {
       loading: false,
       menuLoadingText: "",
       menuMaxHeight: "",
+      menuMaxWidth: "400px",
+      menuMinWidth: "240px",
       noMatchText: "",
       optionUpdateStrategy: "off",
       placeholder: "",
@@ -89,6 +91,8 @@ describe('<SimpleSingleSelectField />', () => {
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].loading).toBe(false);
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].menuLoadingText).toBe('');
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].menuMaxHeight).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].menuMaxWidth).toBe('400px');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].menuMinWidth).toBe('240px');
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].noMatchText).toBe('');
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].optionUpdateStrategy).toBe('off');
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].placeholder).toBe('');

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

@@ -20,6 +20,8 @@ const SingleSelect = ({
   selected = '',
   tabIndex,
   maxHeight,
+  menuMinWidth,
+  menuMaxWidth,
   inputMaxHeight,
   onChange,
   onFocus,
@@ -73,6 +75,8 @@ const SingleSelect = ({
     menu: menu,
     tabIndex: tabIndex,
     maxHeight: maxHeight,
+    menuMinWidth: menuMinWidth,
+    menuMaxWidth: menuMaxWidth,
     onChange: onChange,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
@@ -118,6 +122,10 @@ SingleSelect.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,
   /** Text to show when filter returns no results. Required if `filterable` prop is true */
   noMatchText: (0, _propTypes.requiredIf)(props => props.filterable, _propTypes2.default.string),
   placeholder: _propTypes2.default.string,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithRTL = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndDisabled = exports.WithOnFocus = exports.WithOnBlur = exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.Dense = exports.DefaultPosition = void 0;
+exports.default = exports.WithRTL = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndDisabled = exports.WithOnFocus = exports.WithOnBlur = 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.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.Dense = exports.DefaultPosition = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -480,4 +480,43 @@ const ShiftedIntoView = args => /*#__PURE__*/_react.default.createElement(_react
 })), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "1828862170"
 }, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]));
-exports.ShiftedIntoView = ShiftedIntoView;
+exports.ShiftedIntoView = ShiftedIntoView;
+const WithMenuMaxWidth = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: 120
+  }
+}, /*#__PURE__*/_react.default.createElement(_index2.SingleSelect, args, /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  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.SingleSelect, args, /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "3",
+  label: "option three"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "4",
+  label: "A longer option that exceeds the minimum"
+})));
+exports.WithMenuMinWidth = WithMenuMinWidth;
+WithMenuMinWidth.args = {
+  menuMinWidth: '240px'
+};

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

@@ -42,6 +42,8 @@ class SingleSelectField extends _react.default.Component {
       helpText,
       validationText,
       maxHeight,
+      menuMinWidth,
+      menuMaxWidth,
       inputMaxHeight,
       inputWidth,
       children,
@@ -76,6 +78,8 @@ class SingleSelectField extends _react.default.Component {
       selected: selected,
       tabIndex: tabIndex,
       maxHeight: maxHeight,
+      menuMinWidth: menuMinWidth,
+      menuMaxWidth: menuMaxWidth,
       inputMaxHeight: inputMaxHeight,
       onChange: onChange,
       onFocus: onFocus,
@@ -147,6 +151,10 @@ SingleSelectField.propTypes = {
   loadingText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
   /** Constrains height of the SingleSelect */
   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 SingleSelect is empty */

package/build/cjs/single-select-field/single-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.StatusDisabled = 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.StatusDisabled = 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");
@@ -180,4 +180,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.SingleSelectOption, {
+    key: "1",
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+    key: "2",
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+    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.SingleSelectOption, {
+    key: "1",
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+    key: "2",
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+    key: "3",
+    value: "3",
+    label: "option three"
+  }), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+    key: "4",
+    value: "4",
+    label: "A longer option that exceeds the minimum"
+  })]
+};

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

@@ -23,17 +23,17 @@ const SingleSelectOption = ({
   "data-test": dataTest,
   "data-value": value,
   "data-label": label,
-  className: _style.default.dynamic([["1307386342", [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal050, _uiConstants.colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + ((0, _classnames.default)(className, {
+  className: _style.default.dynamic([["556453451", [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal050, _uiConstants.colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + ((0, _classnames.default)(className, {
     disabled,
     active
   }) || "")
 }, /*#__PURE__*/_react.default.createElement("span", {
   "aria-hidden": "true",
-  className: _style.default.dynamic([["1307386342", [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal050, _uiConstants.colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "checkmark"
+  className: _style.default.dynamic([["556453451", [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal050, _uiConstants.colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "checkmark"
 }), /*#__PURE__*/_react.default.createElement("span", {
-  className: _style.default.dynamic([["1307386342", [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal050, _uiConstants.colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "content"
+  className: _style.default.dynamic([["556453451", [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal050, _uiConstants.colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "content"
 }, label), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "1307386342",
+  id: "556453451",
   dynamic: [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal050, _uiConstants.colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']
 }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${_uiConstants.colors.grey900};padding-block:${_uiConstants.spacers.dp8};padding-inline:6px ${_uiConstants.spacers.dp12};}`, `div.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey200};}`, `div.__jsx-style-dynamic-selector:active,div.active.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.teal050};cursor:auto;}`, `div.disabled.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey500};cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}", `div.__jsx-style-dynamic-selector .checkmark.__jsx-style-dynamic-selector{width:16px;height:16px;margin-inline-end:6px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;background-size:contain;background-repeat:no-repeat;background-image:${active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none'};}`]));
 exports.SingleSelectOption = SingleSelectOption;

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

@@ -16,6 +16,8 @@ const MultiSelect = ({
   selected = staticArr,
   tabIndex,
   maxHeight,
+  menuMinWidth,
+  menuMaxWidth,
   inputMaxHeight,
   onChange,
   onFocus,
@@ -71,6 +73,8 @@ const MultiSelect = ({
     menu: menu,
     tabIndex: tabIndex,
     maxHeight: maxHeight,
+    menuMinWidth: menuMinWidth,
+    menuMaxWidth: menuMaxWidth,
     onChange: onChange,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
@@ -115,6 +119,10 @@ MultiSelect.propTypes = {
   loading: PropTypes.bool,
   loadingText: PropTypes.string,
   maxHeight: PropTypes.string,
+  /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) */
+  menuMaxWidth: PropTypes.string,
+  /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) */
+  menuMinWidth: PropTypes.string,
   /** Required if `filterable` prop is `true` */
   noMatchText: requiredIf(props => props.filterable, PropTypes.string),
   placeholder: PropTypes.string,

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

@@ -541,4 +541,41 @@ export const RTL = args => {
 RTL.args = {
   selected: ['1', '2'],
   prefix: 'RTL text'
+};
+export const WithMenuMaxWidth = args => /*#__PURE__*/React.createElement("div", {
+  style: {
+    width: 120
+  }
+}, /*#__PURE__*/React.createElement(MultiSelect, args, /*#__PURE__*/React.createElement(MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/React.createElement(MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/React.createElement(MultiSelectOption, {
+  value: "3",
+  label: "A much longer option label"
+})));
+WithMenuMaxWidth.args = {
+  menuMaxWidth: '200px'
+};
+export const WithMenuMinWidth = args => /*#__PURE__*/React.createElement("div", {
+  style: {
+    width: 120
+  }
+}, /*#__PURE__*/React.createElement(MultiSelect, args, /*#__PURE__*/React.createElement(MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/React.createElement(MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/React.createElement(MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}), /*#__PURE__*/React.createElement(MultiSelectOption, {
+  value: "4",
+  label: "A longer option that exceeds the minimum"
+})));
+WithMenuMinWidth.args = {
+  menuMinWidth: '240px'
 };

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

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

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

@@ -167,4 +167,44 @@ DefaultLoadingText.args = {
   loading: true,
   ...DefaultEmpty.args
 };
-DefaultLoadingText.storyName = 'Default: loadingText';
+DefaultLoadingText.storyName = 'Default: loadingText';
+export const WithMenuMaxWidth = Template.bind({});
+WithMenuMaxWidth.args = {
+  inputWidth: '120px',
+  menuMaxWidth: '200px',
+  children: [/*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: "1",
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: "2",
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: "3",
+    value: "3",
+    label: "A much longer option label"
+  })]
+};
+export const WithMenuMinWidth = Template.bind({});
+WithMenuMinWidth.args = {
+  inputWidth: '120px',
+  menuMinWidth: '240px',
+  children: [/*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: "1",
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: "2",
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: "3",
+    value: "3",
+    label: "option three"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: "4",
+    value: "4",
+    label: "A longer option that exceeds the minimum"
+  })]
+};

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

@@ -7,11 +7,20 @@ import React from 'react';
 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.createElement(Layer, {
     onBackdropClick: onClick,
     transparent: true
@@ -21,18 +30,20 @@ const MenuWrapper = ({
     observeReferenceResize: true
   }, /*#__PURE__*/React.createElement("div", {
     "data-test": `${dataTest}-menuwrapper`,
-    className: _JSXStyle.dynamic([["1871652546", [menuWidth, maxHeight, colors.white, colors.grey200, elevations.popover]]])
+    className: _JSXStyle.dynamic([["3752211706", [width, minWidth, maxWidth, maxHeight, colors.white, colors.grey200, elevations.popover]]])
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1871652546",
-    dynamic: [menuWidth, maxHeight, colors.white, colors.grey200, elevations.popover]
-  }, [`div.__jsx-style-dynamic-selector{width:${menuWidth};height:auto;max-height:${maxHeight};overflow:auto;background:${colors.white};border:1px solid ${colors.grey200};border-radius:3px;box-shadow:${elevations.popover};}`]))));
+    id: "3752211706",
+    dynamic: [width, minWidth, maxWidth, maxHeight, colors.white, colors.grey200, elevations.popover]
+  }, [`div.__jsx-style-dynamic-selector{width:${width};min-width:${minWidth};max-width:${maxWidth};height:auto;max-height:${maxHeight};overflow:auto;background:${colors.white};border:1px solid ${colors.grey200};border-radius:3px;box-shadow:${elevations.popover};}`]))));
 };
 MenuWrapper.propTypes = {
   dataTest: PropTypes.string.isRequired,
-  menuWidth: PropTypes.string.isRequired,
+  inputWidth: PropTypes.string.isRequired,
   selectRef: PropTypes.object.isRequired,
   children: PropTypes.node,
   maxHeight: PropTypes.string,
+  menuMaxWidth: PropTypes.string,
+  menuMinWidth: PropTypes.string,
   onClick: PropTypes.func
 };
 export { MenuWrapper };

package/build/es/select/select.js

@@ -19,7 +19,7 @@ export class Select extends Component {
     super(...args);
     _defineProperty(this, "state", {
       open: false,
-      menuWidth: 'auto'
+      inputWidth: 'auto'
     });
     _defineProperty(this, "selectRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "inputRef", /*#__PURE__*/React.createRef());
@@ -33,10 +33,10 @@ export class Select extends Component {
      * See: https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web
      */
     _defineProperty(this, "onResize", debounce(() => {
-      const menuWidth = this.getMenuWidth();
-      if (this.state.menuWidth !== menuWidth) {
+      const inputWidth = this.getInputWidth();
+      if (this.state.inputWidth !== inputWidth) {
         this.setState({
-          menuWidth
+          inputWidth
         });
       }
     }, 50));
@@ -59,7 +59,7 @@ export class Select extends Component {
     _defineProperty(this, "handleOpen", () => {
       this.setState({
         open: true,
-        menuWidth: this.getMenuWidth()
+        inputWidth: this.getInputWidth()
       });
     });
     _defineProperty(this, "handleClose", () => {
@@ -138,29 +138,29 @@ export class Select extends 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,
@@ -169,6 +169,8 @@ export class Select extends Component {
       onChange,
       tabIndex,
       maxHeight,
+      menuMinWidth,
+      menuMaxWidth,
       error,
       warning,
       valid,
@@ -215,7 +217,9 @@ export class Select extends Component {
       onClick: this.onOutsideClick,
       maxHeight: maxHeight,
       selectRef: this.selectRef,
-      menuWidth: menuWidth,
+      inputWidth: inputWidth,
+      menuMinWidth: menuMinWidth,
+      menuMaxWidth: menuMaxWidth,
       dataTest: `${dataTest}-menu`
     }, menu));
   }
@@ -235,6 +239,8 @@ Select.propTypes = {
   error: sharedPropTypes.statusPropType,
   initialFocus: PropTypes.bool,
   maxHeight: PropTypes.string,
+  menuMaxWidth: PropTypes.string,
+  menuMinWidth: PropTypes.string,
   tabIndex: PropTypes.string,
   valid: sharedPropTypes.statusPropType,
   warning: sharedPropTypes.statusPropType,

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

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+const options = [{
+  value: '1',
+  label: 'option one'
+}, {
+  value: '2',
+  label: 'option two'
+}, {
+  value: '3',
+  label: 'A much longer option label that gets clamped'
+}];
+export const WithMenuMaxWidth = () => {
+  const [selected, setSelected] = useState(null);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 120
+    }
+  }, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: options,
+    menuMaxWidth: "200px"
+  }));
+};

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

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+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'
+}];
+export const WithMenuMinWidth = () => {
+  const [selected, setSelected] = useState(null);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 120
+    }
+  }, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: options,
+    menuMinWidth: "240px"
+  }));
+};