@dhis2-ui/select 10.16.4 → 10.17.0

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

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

@@ -144,3 +144,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: [
+        <SingleSelectOption key="1" value="1" label="option one" />,
+        <SingleSelectOption key="2" value="2" label="option two" />,
+        <SingleSelectOption
+            key="3"
+            value="3"
+            label="A much longer option label"
+        />,
+    ],
+}
+
+export const WithMenuMinWidth = Template.bind({})
+WithMenuMinWidth.args = {
+    inputWidth: '120px',
+    menuMinWidth: '240px',
+    children: [
+        <SingleSelectOption key="1" value="1" label="option one" />,
+        <SingleSelectOption key="2" value="2" label="option two" />,
+        <SingleSelectOption key="3" value="3" label="option three" />,
+        <SingleSelectOption
+            key="4"
+            value="4"
+            label="A longer option that exceeds the minimum"
+        />,
+    ],
+}