@dhis2-ui/select 10.17.0 → 10.19.0

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

@@ -1,3 +1,4 @@
+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); }
 import '@testing-library/jest-dom';
 import { render, fireEvent, screen } from '@testing-library/react';
 import React, { useState } from 'react';
@@ -142,6 +143,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 => {
+      render(/*#__PURE__*/React.createElement(SimpleSingleSelect, _extends({
+        name: "simple",
+        selected: {
+          value: 'foo',
+          label: 'Foo'
+        },
+        onChange: () => null,
+        options: [{
+          value: 'foo',
+          label: 'Foo'
+        }]
+      }, props)));
+      fireEvent.click(screen.getByRole('combobox'));
+      const listbox = 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 = screen.getByRole('combobox');
+
+      // close the menu
+      fireEvent.click(comboBox);
+
+      // widen the select while the menu is closed, then reopen it
+      offsetWidth.mockReturnValue(300);
+      fireEvent.click(comboBox);
+      const listbox = screen.getByRole('listbox');
+      const menu = listbox.parentNode.parentNode.parentNode;
+      expect(menu.style.minWidth).toBe('max(300px, 240px)');
+    });
+  });
   it('should accept a placeholder', () => {
     render(/*#__PURE__*/React.createElement(SimpleSingleSelect, {
       name: "simple",

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

@@ -101,6 +101,10 @@ SimpleSingleSelectField.propTypes = {
   menuLoadingText: PropTypes.string,
   /** Allows to modify the max height of the menu **/
   menuMaxHeight: 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,
   /** String that will be displayed when the select is being filtered but the options array is empty **/
   noMatchText: requiredIf(props => props.filterable, PropTypes.string),
   /** Allows to override what's rendered inside the `button[role="option"]`.

package/build/es/simple-single-select-field/simple-single-select-field.prod.stories.js

@@ -42,6 +42,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'
+}];
 export default {
   title: 'SimpleSingleSelectField',
   component: SimpleSingleSelectField,
@@ -169,4 +182,40 @@ export const InputWidth = () => {
     onChange: nextValue => setValue(nextValue),
     options: options
   }));
+};
+export const WithMenuMinWidth = () => {
+  var _longOptions$find;
+  const [value, setValue] = 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.createElement("div", {
+    style: {
+      width: 120
+    }
+  }, /*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: longOptions,
+    menuMinWidth: "240px"
+  }));
+};
+export const WithMenuMaxWidth = () => {
+  var _longOptions$find2;
+  const [value, setValue] = 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.createElement("div", {
+    style: {
+      width: 120
+    }
+  }, /*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: longOptions,
+    menuMaxWidth: "200px"
+  }));
 };

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

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

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

@@ -16,17 +16,17 @@ const SingleSelectOption = ({
   "data-test": dataTest,
   "data-value": value,
   "data-label": label,
-  className: _JSXStyle.dynamic([["1307386342", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + (cx(className, {
+  className: _JSXStyle.dynamic([["556453451", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + (cx(className, {
     disabled,
     active
   }) || "")
 }, /*#__PURE__*/React.createElement("span", {
   "aria-hidden": "true",
-  className: _JSXStyle.dynamic([["1307386342", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "checkmark"
+  className: _JSXStyle.dynamic([["556453451", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "checkmark"
 }), /*#__PURE__*/React.createElement("span", {
-  className: _JSXStyle.dynamic([["1307386342", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "content"
+  className: _JSXStyle.dynamic([["556453451", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "content"
 }, label), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "1307386342",
+  id: "556453451",
   dynamic: [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, 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:${colors.grey900};padding-block:${spacers.dp8};padding-inline:6px ${spacers.dp12};}`, `div.__jsx-style-dynamic-selector:hover{background-color:${colors.grey200};}`, `div.__jsx-style-dynamic-selector:active,div.active.__jsx-style-dynamic-selector{background-color:${colors.teal050};cursor:auto;}`, `div.disabled.__jsx-style-dynamic-selector{color:${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'};}`]));
 SingleSelectOption.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "10.17.0",
+    "version": "10.19.0",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,21 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "10.17.0",
-        "@dhis2-ui/button": "10.17.0",
-        "@dhis2-ui/card": "10.17.0",
-        "@dhis2-ui/checkbox": "10.17.0",
-        "@dhis2-ui/chip": "10.17.0",
-        "@dhis2-ui/field": "10.17.0",
-        "@dhis2-ui/input": "10.17.0",
-        "@dhis2-ui/layer": "10.17.0",
-        "@dhis2-ui/loader": "10.17.0",
-        "@dhis2-ui/popper": "10.17.0",
-        "@dhis2-ui/status-icon": "10.17.0",
-        "@dhis2-ui/tooltip": "10.17.0",
+        "@dhis2-ui/box": "10.19.0",
+        "@dhis2-ui/button": "10.19.0",
+        "@dhis2-ui/card": "10.19.0",
+        "@dhis2-ui/checkbox": "10.19.0",
+        "@dhis2-ui/chip": "10.19.0",
+        "@dhis2-ui/field": "10.19.0",
+        "@dhis2-ui/input": "10.19.0",
+        "@dhis2-ui/layer": "10.19.0",
+        "@dhis2-ui/loader": "10.19.0",
+        "@dhis2-ui/popper": "10.19.0",
+        "@dhis2-ui/status-icon": "10.19.0",
+        "@dhis2-ui/tooltip": "10.19.0",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.17.0",
-        "@dhis2/ui-icons": "10.17.0",
+        "@dhis2/ui-constants": "10.19.0",
+        "@dhis2/ui-icons": "10.19.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/src/simple-single-select/__stories__/WithMenuMaxWidth.js

@@ -0,0 +1,24 @@
+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 (
+        <div style={{ width: 120 }}>
+            <SimpleSingleSelect
+                name="simple"
+                selected={selected}
+                onChange={setSelected}
+                options={options}
+                menuMaxWidth="200px"
+            />
+        </div>
+    )
+}

package/src/simple-single-select/__stories__/WithMenuMinWidth.js

@@ -0,0 +1,25 @@
+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 (
+        <div style={{ width: 120 }}>
+            <SimpleSingleSelect
+                name="simple"
+                selected={selected}
+                onChange={setSelected}
+                options={options}
+                menuMinWidth="240px"
+            />
+        </div>
+    )
+}

package/src/simple-single-select/menu/menu.js

@@ -26,6 +26,8 @@ export function Menu({
     loading,
     loadingText,
     maxHeight,
+    maxWidth,
+    minWidth,
     noMatchText,
     optionUpdateStrategy,
     selectRef,
@@ -34,18 +36,16 @@ export function Menu({
     onClose,
     onEndReached,
 }) {
-    const [menuWidth, setWidth] = useState('auto')
+    const [selectWidth, setSelectWidth] = 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
     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
@@ -60,6 +60,14 @@ export function Menu({
 
     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 (
         <Layer onBackdropClick={onClose} transparent>
             <Popper
@@ -67,7 +75,15 @@ export function Menu({
                 placement="bottom-start"
                 observeReferenceResize
             >
-                <div className="menu" style={{ width: menuWidth, maxHeight }}>
+                <div
+                    className="menu"
+                    style={{
+                        width: flexible ? 'fit-content' : selectWidth,
+                        minWidth: flexible ? flexibleMinWidth : undefined,
+                        maxWidth,
+                        maxHeight,
+                    }}
+                >
                     {isEmpty && <Empty>{empty}</Empty>}
 
                     {hasNoFilterMatch && <NoMatch>{noMatchText}</NoMatch>}
@@ -160,6 +176,8 @@ Menu.propTypes = {
     loading: PropTypes.bool,
     loadingText: PropTypes.string,
     maxHeight: PropTypes.string,
+    maxWidth: PropTypes.string,
+    minWidth: PropTypes.string,
     noMatchText: PropTypes.string,
     optionComponent: PropTypes.elementType,
     optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),

package/src/simple-single-select/simple-single-select.js

@@ -12,6 +12,9 @@ import {
     useHandleKeyPressOnFilterInput,
 } from './use-handle-key-press/index.js'
 
+const defaultSelected = { label: '', value: '' }
+const noop = () => undefined
+
 function useFocussedOptionIndex({ filterable, filterValue, options }) {
     const [defaultFocussedOptionIndex, setDefaultFocussedOptionIndex] =
         useState(0)
@@ -75,19 +78,21 @@ export 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
@@ -261,6 +266,8 @@ export function SimpleSingleSelect({
                 loading={loading}
                 loadingText={menuLoadingText}
                 maxHeight={menuMaxHeight}
+                maxWidth={menuMaxWidth}
+                minWidth={menuMinWidth}
                 noMatchText={noMatchText}
                 optionUpdateStrategy={optionUpdateStrategy}
                 options={options}
@@ -342,6 +349,12 @@ SimpleSingleSelect.propTypes = {
     /** Allows to modify the max height of the menu **/
     menuMaxHeight: 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,
+
     /** String that will be displayed when the select is being filtered but the options array is empty **/
     noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
 

package/src/simple-single-select/simple-single-select.prod.stories.js

@@ -22,6 +22,8 @@ export { WithOptionsAndLoadingText } from './__stories__/WithOptionsAndLoadingTe
 export { WithoutOptionsAndLoading } from './__stories__/WithoutOptionsAndLoading.js'
 export { WithManyOptions } from './__stories__/WithManyOptions.js'
 export { WithCustomLowMaxHeight } from './__stories__/WithCustomLowMaxHeight.js'
+export { WithMenuMinWidth } from './__stories__/WithMenuMinWidth.js'
+export { WithMenuMaxWidth } from './__stories__/WithMenuMaxWidth.js'
 export { WithOptionsAndDisabled } from './__stories__/WithOptionsAndDisabled.js'
 export { WithSelectionAndDisabled } from './__stories__/WithSelectionAndDisabled.js'
 export { WithPrefix } from './__stories__/WithPrefix.js'

package/src/simple-single-select/simple-single-select.test.js

@@ -150,6 +150,74 @@ describe('<SimpleSingleSelect />', () => {
         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) => {
+            render(
+                <SimpleSingleSelect
+                    name="simple"
+                    selected={{ value: 'foo', label: 'Foo' }}
+                    onChange={() => null}
+                    options={[{ value: 'foo', label: 'Foo' }]}
+                    {...props}
+                />
+            )
+
+            fireEvent.click(screen.getByRole('combobox'))
+
+            const listbox = 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 = screen.getByRole('combobox')
+
+            // close the menu
+            fireEvent.click(comboBox)
+
+            // widen the select while the menu is closed, then reopen it
+            offsetWidth.mockReturnValue(300)
+            fireEvent.click(comboBox)
+
+            const listbox = screen.getByRole('listbox')
+            const menu = listbox.parentNode.parentNode.parentNode
+            expect(menu.style.minWidth).toBe('max(300px, 240px)')
+        })
+    })
+
     it('should accept a placeholder', () => {
         render(
             <SimpleSingleSelect

package/src/simple-single-select-field/simple-single-select-field.js

@@ -137,6 +137,12 @@ SimpleSingleSelectField.propTypes = {
     /** Allows to modify the max height of the menu **/
     menuMaxHeight: 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,
+
     /** String that will be displayed when the select is being filtered but the options array is empty **/
     noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
 

package/src/simple-single-select-field/simple-single-select-field.prod.stories.js

@@ -26,6 +26,13 @@ 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' },
+]
+
 export default {
     title: 'SimpleSingleSelectField',
     component: SimpleSingleSelectField,
@@ -186,3 +193,45 @@ export const InputWidth = () => {
         </div>
     )
 }
+
+export const WithMenuMinWidth = () => {
+    const [value, setValue] = useState('')
+    const valueLabel = value
+        ? longOptions.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <div style={{ width: 120 }}>
+            <SimpleSingleSelectField
+                name="simple"
+                label="This is the label"
+                value={value}
+                valueLabel={valueLabel}
+                onChange={(nextValue) => setValue(nextValue)}
+                options={longOptions}
+                menuMinWidth="240px"
+            />
+        </div>
+    )
+}
+
+export const WithMenuMaxWidth = () => {
+    const [value, setValue] = useState('')
+    const valueLabel = value
+        ? longOptions.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <div style={{ width: 120 }}>
+            <SimpleSingleSelectField
+                name="simple"
+                label="This is the label"
+                value={value}
+                valueLabel={valueLabel}
+                onChange={(nextValue) => setValue(nextValue)}
+                options={longOptions}
+                menuMaxWidth="200px"
+            />
+        </div>
+    )
+}

package/src/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=""
@@ -91,6 +93,8 @@ describe('<SimpleSingleSelectField />', () => {
         expect(SimpleSingleSelect.mock.calls[0][0].loading).toBe(false)
         expect(SimpleSingleSelect.mock.calls[0][0].menuLoadingText).toBe('')
         expect(SimpleSingleSelect.mock.calls[0][0].menuMaxHeight).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].menuMaxWidth).toBe('400px')
+        expect(SimpleSingleSelect.mock.calls[0][0].menuMinWidth).toBe('240px')
         expect(SimpleSingleSelect.mock.calls[0][0].noMatchText).toBe('')
         expect(SimpleSingleSelect.mock.calls[0][0].optionUpdateStrategy).toBe(
             'off'

package/src/single-select-option/single-select-option.js

@@ -63,9 +63,11 @@ const SingleSelectOption = ({
                 flex-shrink: 0;
                 background-size: contain;
                 background-repeat: no-repeat;
-                background-image: ${active
-                    ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')`
-                    : 'none'};
+                background-image: ${
+                    active
+                        ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')`
+                        : 'none'
+                };
             }
         `}</style>
     </div>