@dhis2-ui/select 10.16.5 → 10.17.0

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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "10.16.5",
+    "version": "10.17.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.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/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.5",
-        "@dhis2/ui-icons": "10.16.5",
+        "@dhis2/ui-constants": "10.17.0",
+        "@dhis2/ui-icons": "10.17.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"
+        />,
+    ],
+}

package/src/select/menu-wrapper.js

@@ -7,11 +7,23 @@ 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 (
         <Layer onBackdropClick={onClick} transparent>
             <Popper
@@ -24,7 +36,9 @@ const MenuWrapper = ({
 
                     <style jsx>{`
                         div {
-                            width: ${menuWidth};
+                            width: ${width};
+                            min-width: ${minWidth};
+                            max-width: ${maxWidth};
                             height: auto;
                             max-height: ${maxHeight};
                             overflow: auto;
@@ -42,10 +56,12 @@ const MenuWrapper = ({
 
 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,
 }
 

package/src/select/select.js

@@ -15,7 +15,7 @@ const DOWN_KEY = 40
 export class Select extends Component {
     state = {
         open: false,
-        menuWidth: 'auto',
+        inputWidth: 'auto',
     }
 
     static defaultProps = {
@@ -30,7 +30,7 @@ export class Select extends Component {
             this.inputRef.current.focus()
         }
 
-        this.setState({ menuWidth: this.getMenuWidth() })
+        this.setState({ inputWidth: this.getInputWidth() })
         window.addEventListener('resize', this.onResize)
     }
 
@@ -48,21 +48,21 @@ export class Select extends Component {
      * See: https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web
      */
     onResize = debounce(() => {
-        const menuWidth = this.getMenuWidth()
+        const inputWidth = this.getInputWidth()
 
-        if (this.state.menuWidth !== menuWidth) {
-            this.setState({ menuWidth })
+        if (this.state.inputWidth !== inputWidth) {
+            this.setState({ inputWidth })
         }
     }, 50)
 
-    getMenuWidth() {
+    getInputWidth() {
         const { offsetWidth } = this.inputRef.current
-        const { menuWidth } = this.state
+        const { inputWidth } = this.state
 
-        if (offsetWidth && `${offsetWidth}px` !== menuWidth) {
+        if (offsetWidth && `${offsetWidth}px` !== inputWidth) {
             return `${offsetWidth}px`
         }
-        return menuWidth
+        return inputWidth
     }
 
     handleFocusInput = () => {
@@ -82,7 +82,7 @@ export class Select extends Component {
     handleOpen = () => {
         this.setState({
             open: true,
-            menuWidth: this.getMenuWidth(),
+            inputWidth: this.getInputWidth(),
         })
     }
 
@@ -159,7 +159,7 @@ export class Select extends Component {
     }
 
     render() {
-        const { open, menuWidth } = this.state
+        const { open, inputWidth } = this.state
         const {
             children,
             className,
@@ -167,6 +167,8 @@ export class Select extends Component {
             onChange,
             tabIndex,
             maxHeight,
+            menuMinWidth,
+            menuMaxWidth,
             error,
             warning,
             valid,
@@ -220,7 +222,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}
@@ -246,6 +250,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/src/single-select/single-select.js

@@ -13,6 +13,8 @@ const SingleSelect = ({
     selected = '',
     tabIndex,
     maxHeight,
+    menuMinWidth,
+    menuMaxWidth,
     inputMaxHeight,
     onChange,
     onFocus,
@@ -68,6 +70,8 @@ const SingleSelect = ({
                     menu={menu}
                     tabIndex={tabIndex}
                     maxHeight={maxHeight}
+                    menuMinWidth={menuMinWidth}
+                    menuMaxWidth={menuMaxWidth}
                     onChange={onChange}
                     onFocus={onFocus}
                     onKeyDown={onKeyDown}
@@ -127,6 +131,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/src/single-select/single-select.prod.stories.js

@@ -356,3 +356,29 @@ export const ShiftedIntoView = (args) => (
         `}</style>
     </>
 )
+
+export const WithMenuMaxWidth = (args) => (
+    <div style={{ width: 120 }}>
+        <SingleSelect {...args}>
+            <SingleSelectOption value="1" label="option one" />
+            <SingleSelectOption value="2" label="option two" />
+            <SingleSelectOption value="3" label="A much longer option label" />
+        </SingleSelect>
+    </div>
+)
+WithMenuMaxWidth.args = { menuMaxWidth: '200px' }
+
+export const WithMenuMinWidth = (args) => (
+    <div style={{ width: 120 }}>
+        <SingleSelect {...args}>
+            <SingleSelectOption value="1" label="option one" />
+            <SingleSelectOption value="2" label="option two" />
+            <SingleSelectOption value="3" label="option three" />
+            <SingleSelectOption
+                value="4"
+                label="A longer option that exceeds the minimum"
+            />
+        </SingleSelect>
+    </div>
+)
+WithMenuMinWidth.args = { menuMinWidth: '240px' }