@dhis2-ui/select 10.16.5 → 10.18.0

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

@@ -26,6 +26,8 @@ export function Menu({
   loading,
   loadingText,
   maxHeight,
+  maxWidth,
+  minWidth,
   noMatchText,
   optionUpdateStrategy,
   selectRef,
@@ -34,17 +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;
   }
@@ -53,6 +54,10 @@ export 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.createElement(Layer, {
     onBackdropClick: onClose,
     transparent: true
@@ -62,7 +67,9 @@ export function Menu({
     observeReferenceResize: true
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      width: menuWidth,
+      width: flexible ? 'fit-content' : selectWidth,
+      minWidth: flexible ? flexibleMinWidth : undefined,
+      maxWidth,
       maxHeight
     },
     className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "menu"
@@ -113,6 +120,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/build/es/simple-single-select/simple-single-select.js

@@ -8,6 +8,11 @@ import { Menu } from './menu/index.js';
 import { SelectedValue } from './selected-value/index.js';
 import { optionProp } from './shared-prop-types.js';
 import { useHandleKeyPressOnCombobox, useHandleKeyPressOnFilterInput } from './use-handle-key-press/index.js';
+const defaultSelected = {
+  label: '',
+  value: ''
+};
+const noop = () => undefined;
 function useFocussedOptionIndex({
   filterable,
   filterValue,
@@ -65,22 +70,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
@@ -230,6 +234,8 @@ export function SimpleSingleSelect({
     loading: loading,
     loadingText: menuLoadingText,
     maxHeight: menuMaxHeight,
+    maxWidth: menuMaxWidth,
+    minWidth: menuMinWidth,
     noMatchText: noMatchText,
     optionUpdateStrategy: optionUpdateStrategy,
     options: options,
@@ -287,6 +293,10 @@ SimpleSingleSelect.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/simple-single-select.prod.stories.js

@@ -20,6 +20,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/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/single-select.js

@@ -13,6 +13,8 @@ const SingleSelect = ({
   selected = '',
   tabIndex,
   maxHeight,
+  menuMinWidth,
+  menuMaxWidth,
   inputMaxHeight,
   onChange,
   onFocus,
@@ -66,6 +68,8 @@ const SingleSelect = ({
     menu: menu,
     tabIndex: tabIndex,
     maxHeight: maxHeight,
+    menuMinWidth: menuMinWidth,
+    menuMaxWidth: menuMaxWidth,
     onChange: onChange,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
@@ -110,6 +114,10 @@ SingleSelect.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,
   /** Text to show when filter returns no results. Required if `filterable` prop is true */
   noMatchText: requiredIf(props => props.filterable, PropTypes.string),
   placeholder: PropTypes.string,

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

@@ -462,4 +462,41 @@ export const ShiftedIntoView = args => /*#__PURE__*/React.createElement(React.Fr
   label: "option twelve"
 })), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "1828862170"
-}, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]));
+}, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]));
+export const WithMenuMaxWidth = args => /*#__PURE__*/React.createElement("div", {
+  style: {
+    width: 120
+  }
+}, /*#__PURE__*/React.createElement(SingleSelect, args, /*#__PURE__*/React.createElement(SingleSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/React.createElement(SingleSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/React.createElement(SingleSelectOption, {
+  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(SingleSelect, args, /*#__PURE__*/React.createElement(SingleSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/React.createElement(SingleSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/React.createElement(SingleSelectOption, {
+  value: "3",
+  label: "option three"
+}), /*#__PURE__*/React.createElement(SingleSelectOption, {
+  value: "4",
+  label: "A longer option that exceeds the minimum"
+})));
+WithMenuMinWidth.args = {
+  menuMinWidth: '240px'
+};

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

@@ -36,6 +36,8 @@ class SingleSelectField extends React.Component {
       helpText,
       validationText,
       maxHeight,
+      menuMinWidth,
+      menuMaxWidth,
       inputMaxHeight,
       inputWidth,
       children,
@@ -70,6 +72,8 @@ class SingleSelectField extends React.Component {
       selected: selected,
       tabIndex: tabIndex,
       maxHeight: maxHeight,
+      menuMinWidth: menuMinWidth,
+      menuMaxWidth: menuMaxWidth,
       inputMaxHeight: inputMaxHeight,
       onChange: onChange,
       onFocus: onFocus,
@@ -140,6 +144,10 @@ SingleSelectField.propTypes = {
   loadingText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /** Constrains height of the SingleSelect */
   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 SingleSelect is empty */

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

@@ -173,4 +173,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(SingleSelectOption, {
+    key: "1",
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/React.createElement(SingleSelectOption, {
+    key: "2",
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/React.createElement(SingleSelectOption, {
+    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(SingleSelectOption, {
+    key: "1",
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/React.createElement(SingleSelectOption, {
+    key: "2",
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/React.createElement(SingleSelectOption, {
+    key: "3",
+    value: "3",
+    label: "option three"
+  }), /*#__PURE__*/React.createElement(SingleSelectOption, {
+    key: "4",
+    value: "4",
+    label: "A longer option that exceeds the minimum"
+  })]
+};

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.16.5",
+    "version": "10.18.0",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,21 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "10.16.5",
-        "@dhis2-ui/button": "10.16.5",
-        "@dhis2-ui/card": "10.16.5",
-        "@dhis2-ui/checkbox": "10.16.5",
-        "@dhis2-ui/chip": "10.16.5",
-        "@dhis2-ui/field": "10.16.5",
-        "@dhis2-ui/input": "10.16.5",
-        "@dhis2-ui/layer": "10.16.5",
-        "@dhis2-ui/loader": "10.16.5",
-        "@dhis2-ui/popper": "10.16.5",
-        "@dhis2-ui/status-icon": "10.16.5",
-        "@dhis2-ui/tooltip": "10.16.5",
+        "@dhis2-ui/box": "10.18.0",
+        "@dhis2-ui/button": "10.18.0",
+        "@dhis2-ui/card": "10.18.0",
+        "@dhis2-ui/checkbox": "10.18.0",
+        "@dhis2-ui/chip": "10.18.0",
+        "@dhis2-ui/field": "10.18.0",
+        "@dhis2-ui/input": "10.18.0",
+        "@dhis2-ui/layer": "10.18.0",
+        "@dhis2-ui/loader": "10.18.0",
+        "@dhis2-ui/popper": "10.18.0",
+        "@dhis2-ui/status-icon": "10.18.0",
+        "@dhis2-ui/tooltip": "10.18.0",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.5",
-        "@dhis2/ui-icons": "10.16.5",
+        "@dhis2/ui-constants": "10.18.0",
+        "@dhis2/ui-icons": "10.18.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/src/multi-select/multi-select.js

@@ -15,6 +15,8 @@ const MultiSelect = ({
     selected = staticArr,
     tabIndex,
     maxHeight,
+    menuMinWidth,
+    menuMaxWidth,
     inputMaxHeight,
     onChange,
     onFocus,
@@ -72,6 +74,8 @@ const MultiSelect = ({
                     menu={menu}
                     tabIndex={tabIndex}
                     maxHeight={maxHeight}
+                    menuMinWidth={menuMinWidth}
+                    menuMaxWidth={menuMaxWidth}
                     onChange={onChange}
                     onFocus={onFocus}
                     onKeyDown={onKeyDown}
@@ -131,6 +135,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/src/multi-select/multi-select.prod.stories.js

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

package/src/multi-select-field/multi-select-field.js

@@ -46,6 +46,8 @@ class MultiSelectField extends React.Component {
             helpText,
             validationText,
             maxHeight,
+            menuMinWidth,
+            menuMaxWidth,
             inputMaxHeight,
             inputWidth,
             children,
@@ -81,6 +83,8 @@ class MultiSelectField extends React.Component {
                         selected={selected}
                         tabIndex={tabIndex}
                         maxHeight={maxHeight}
+                        menuMinWidth={menuMinWidth}
+                        menuMaxWidth={menuMaxWidth}
                         inputMaxHeight={inputMaxHeight}
                         onChange={onChange}
                         onFocus={onFocus}
@@ -148,6 +152,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/src/multi-select-field/multi-select-field.prod.stories.js

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