@dhis2-ui/select 9.11.0 → 9.11.1-beta.1

package/build/es/multi-select/{multi-select.stories.js → multi-select.prod.stories.js}

@@ -4,17 +4,26 @@ import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 import { MultiSelectOption } from '../index.js';
 import { MultiSelect } from './index.js';
-const description = "\nMultiple selection allows the user to select more than one option from the list. Checkboxes are used to highlight the possibility of making more than one selection. Selected options are displayed as chips inside the input. Make sure to communicate clearly to the user if there is a limit to the number of selectable elements.\n\nUse multiple selection wherever the user needs to make more than one selection. If the multiple selection is complex, requires a defined order or needs to made from different groups, consider using a transfer component instead.\n\nRead more about using `Select` components at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).\n\n```js\nimport { MultiSelect, MultiSelectOption } from '@dhis2/ui'\n```\n\n_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (props-interactive) examples, see individual stories in the 'Canvas' tab._\n";
+const description = `
+Multiple selection allows the user to select more than one option from the list. Checkboxes are used to highlight the possibility of making more than one selection. Selected options are displayed as chips inside the input. Make sure to communicate clearly to the user if there is a limit to the number of selectable elements.
 
+Use multiple selection wherever the user needs to make more than one selection. If the multiple selection is complex, requires a defined order or needs to made from different groups, consider using a transfer component instead.
+
+Read more about using \`Select\` components at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).
+
+\`\`\`js
+import { MultiSelect, MultiSelectOption } from '@dhis2/ui'
+\`\`\`
+
+_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (props-interactive) examples, see individual stories in the 'Canvas' tab._
+`;
 const eventHandler = handlerName => (payload, event) => {
-  console.log("".concat(handlerName, " payload"), payload);
-  console.log("".concat(handlerName, " event"), event);
+  console.log(`${handlerName} payload`, payload);
+  console.log(`${handlerName} event`, event);
 };
-
 const onChange = eventHandler('onChange');
 const onFocus = eventHandler('onFocus');
 const onBlur = eventHandler('onBlur');
-
 const CustomMultiSelectOption = _ref => {
   let {
     label,
@@ -24,7 +33,6 @@ const CustomMultiSelectOption = _ref => {
     onClick: e => onClick({}, e)
   }, label);
 };
-
 CustomMultiSelectOption.propTypes = {
   label: PropTypes.string,
   onClick: PropTypes.func
@@ -61,19 +69,23 @@ export default {
     onChange
   },
   argTypes: {
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     },
-    clearText: { ...requiredIfArgType
+    clearText: {
+      ...requiredIfArgType
     },
-    noMatchText: { ...requiredIfArgType
+    noMatchText: {
+      ...requiredIfArgType
     }
   }
 };
-
 const WithOptionsTemplate = args => /*#__PURE__*/React.createElement(MultiSelect, args, /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "1",
   label: "option one"
@@ -84,16 +96,14 @@ const WithOptionsTemplate = args => /*#__PURE__*/React.createElement(MultiSelect
   value: "3",
   label: "option three"
 }));
-
 const EmptyTemplate = args => /*#__PURE__*/React.createElement(MultiSelect, args);
-
 export const WithOptionsAndOnChange = WithOptionsTemplate.bind({});
 WithOptionsAndOnChange.storyName = 'With options and onChange';
 export const WithOptionsAndASelection = WithOptionsTemplate.bind({});
 WithOptionsAndASelection.args = {
   selected: ['1']
-}; // Enable this story as the primary for the docs page
-
+};
+// Enable this story as the primary for the docs page
 WithOptionsAndASelection.parameters = {
   docs: {
     disable: false
@@ -104,7 +114,7 @@ export const WithOnFocus = WithOptionsTemplate.bind({});
 WithOnFocus.args = {
   onFocus
 };
-WithOnFocus.storyName = 'With onFocus';
+WithOnFocus.storyName = 'With on focus';
 export const WithOnBlur = WithOptionsTemplate.bind({});
 WithOnBlur.args = {
   onBlur
@@ -154,7 +164,7 @@ WithInitialFocus.parameters = {
     disable: true
   }
 };
-WithInitialFocus.storyName = 'With initialFocus';
+WithInitialFocus.storyName = 'With initial focus';
 export const Dense = WithOptionsTemplate.bind({});
 Dense.args = {
   dense: true,
@@ -183,7 +193,8 @@ WithOptionsAndLoading.args = {
   loading: true
 };
 export const WithOptionsLoadingAndLoadingText = WithOptionsTemplate.bind({});
-WithOptionsLoadingAndLoadingText.args = { ...WithOptionsAndLoading.args,
+WithOptionsLoadingAndLoadingText.args = {
+  ...WithOptionsAndLoading.args,
   loadingText: 'Loading options'
 };
 WithOptionsLoadingAndLoadingText.storyName = 'With options, loading and loading text';
@@ -271,7 +282,8 @@ WithOptionsAndDisabled.args = {
 };
 WithOptionsAndDisabled.storyName = 'With options and disabled';
 export const WithOptionsASelectionAndDisabled = WithOptionsTemplate.bind({});
-WithOptionsASelectionAndDisabled.args = { ...WithOptionsAndDisabled.args,
+WithOptionsASelectionAndDisabled.args = {
+  ...WithOptionsAndDisabled.args,
   ...WithOptionsAndASelection.args
 };
 WithOptionsASelectionAndDisabled.storyName = 'With options, a selection and disabled';
@@ -280,7 +292,8 @@ WithPrefix.args = {
   prefix: 'Prefix text'
 };
 export const WithPrefixAndSelection = WithOptionsTemplate.bind({});
-WithPrefixAndSelection.args = { ...WithPrefix.args,
+WithPrefixAndSelection.args = {
+  ...WithPrefix.args,
   ...WithOptionsAndASelection.args
 };
 export const WithPlaceholder = WithOptionsTemplate.bind({});
@@ -288,7 +301,8 @@ WithPlaceholder.args = {
   placeholder: 'Placeholder text'
 };
 export const WithPlaceholderAndSelection = WithOptionsTemplate.bind({});
-WithPlaceholderAndSelection.args = { ...WithPlaceholder.args,
+WithPlaceholderAndSelection.args = {
+  ...WithPlaceholder.args,
   ...WithOptionsAndASelection.args
 };
 export const WithDisabledOptionAndOnChange = args => /*#__PURE__*/React.createElement(MultiSelect, args, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -353,13 +367,15 @@ export const WithMultipleSelectionsWrapped = () => {
   })));
 };
 export const WithClearButtonSelectionAndOnChange = WithOptionsTemplate.bind({});
-WithClearButtonSelectionAndOnChange.args = { ...WithOptionsAndASelection.args,
+WithClearButtonSelectionAndOnChange.args = {
+  ...WithOptionsAndASelection.args,
   clearable: true,
   clearText: 'Clear'
 };
 WithClearButtonSelectionAndOnChange.storyName = 'With clear button, selection and onChange';
 export const WithFilterField = WithOptionsTemplate.bind({});
-WithFilterField.args = { ...WithInvalidFilterableOptions.args
+WithFilterField.args = {
+  ...WithInvalidFilterableOptions.args
 };
 export const DefaultPosition = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelect, args, /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "1",

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

@@ -2,7 +2,6 @@ import { Chip } from '@dhis2-ui/chip';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { removeOption, findOptionChild } from '../select/index.js';
-
 const createRemoveHandler = _ref => {
   let {
     selected,
@@ -17,7 +16,6 @@ const createRemoveHandler = _ref => {
     onChange(data, e);
   };
 };
-
 const SelectionList = _ref2 => {
   let {
     selected,
@@ -28,10 +26,8 @@ const SelectionList = _ref2 => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, selected.map(value => {
     const isProduction = process.env.NODE_ENV === 'production';
     const selectedOption = findOptionChild(value, options);
-
     if (!selectedOption) {
-      const message = "There is no option with the value: \"".concat(value, "\". ") + 'Make sure that all the values passed to the selected ' + 'prop match the value of an existing option.';
-
+      const message = `There is no option with the value: "${value}". ` + 'Make sure that all the values passed to the selected ' + 'prop match the value of an existing option.';
       if (isProduction) {
         // Don't crash the app if in production
         console.error(message);
@@ -40,13 +36,15 @@ const SelectionList = _ref2 => {
         throw new Error(message);
       }
     }
+    const isDisabled = selectedOption ?
+    // The chip should be disabled if the option or the select are disabled
+    selectedOption.props.disabled || disabled :
+    // If there is no selected option, just look at the select
+    disabled;
+    // Use the selected value if we do not have a label
+    const label = selectedOption ? selectedOption.props.label : value;
 
-    const isDisabled = selectedOption ? // The chip should be disabled if the option or the select are disabled
-    selectedOption.props.disabled || disabled : // If there is no selected option, just look at the select
-    disabled; // Use the selected value if we do not have a label
-
-    const label = selectedOption ? selectedOption.props.label : value; // Create an onRemove handler, but only if it's not disabled
-
+    // Create an onRemove handler, but only if it's not disabled
     const onRemove = isDisabled ? undefined : createRemoveHandler({
       selected,
       onChange,
@@ -65,7 +63,6 @@ const SelectionList = _ref2 => {
     }, label);
   }));
 };
-
 SelectionList.propTypes = {
   disabled: PropTypes.bool,
   options: PropTypes.node,

package/build/es/multi-select-field/{multi-select-field.stories.e2e.js → multi-select-field.e2e.stories.js}

@@ -1,8 +1,10 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { MultiSelectOption } from '../index.js';
 import { MultiSelectField } from './index.js';
-storiesOf('MultiSelectField', module).add('With label', () => /*#__PURE__*/React.createElement(MultiSelectField, {
+export default {
+  title: 'MultiSelectField'
+};
+export const WithLabel = () => /*#__PURE__*/React.createElement(MultiSelectField, {
   label: "The label"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "1",
@@ -13,7 +15,8 @@ storiesOf('MultiSelectField', module).add('With label', () => /*#__PURE__*/React
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "three"
-}))).add('With help text', () => /*#__PURE__*/React.createElement(MultiSelectField, {
+}));
+export const WithHelpText = () => /*#__PURE__*/React.createElement(MultiSelectField, {
   helpText: "The help text"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "1",
@@ -24,7 +27,8 @@ storiesOf('MultiSelectField', module).add('With label', () => /*#__PURE__*/React
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "three"
-}))).add('With validation text', () => /*#__PURE__*/React.createElement(MultiSelectField, {
+}));
+export const WithValidationText = () => /*#__PURE__*/React.createElement(MultiSelectField, {
   validationText: "The validation text"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "1",
@@ -35,7 +39,8 @@ storiesOf('MultiSelectField', module).add('With label', () => /*#__PURE__*/React
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "three"
-}))).add('With label and required status', () => /*#__PURE__*/React.createElement(MultiSelectField, {
+}));
+export const WithLabelAndRequiredStatus = () => /*#__PURE__*/React.createElement(MultiSelectField, {
   label: "The label",
   required: true
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -47,19 +52,23 @@ storiesOf('MultiSelectField', module).add('With label', () => /*#__PURE__*/React
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "three"
-}))).add('With clearable and selected option', () => /*#__PURE__*/React.createElement(MultiSelectField, {
+}));
+export const WithClearableAndSelectedOption = () => /*#__PURE__*/React.createElement(MultiSelectField, {
   selected: ['1'],
   clearable: true
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
   key: "1",
   value: "1",
   label: "One"
-}))).add('With filterable', () => /*#__PURE__*/React.createElement(MultiSelectField, {
+}));
+export const WithFilterable = () => /*#__PURE__*/React.createElement(MultiSelectField, {
   filterable: true
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
   key: "1",
   value: "1",
   label: "One"
-}))).add('With loading', () => /*#__PURE__*/React.createElement(MultiSelectField, {
+}));
+export const WithLoading = () => /*#__PURE__*/React.createElement(MultiSelectField, {
   loading: true
-})).add('Without options', () => /*#__PURE__*/React.createElement(MultiSelectField, null));
+});
+export const WithoutOptions = () => /*#__PURE__*/React.createElement(MultiSelectField, null);

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

@@ -1,19 +1,18 @@
+import { sharedPropTypes } from '@dhis2/ui-constants';
 import { Box } from '@dhis2-ui/box';
 import { Field } from '@dhis2-ui/field';
-import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { MultiSelect } from '../index.js';
-import i18n from '../locales/index.js'; // TODO: translate
+import i18n from '../locales/index.js';
+import { MultiSelect } from '../multi-select/index.js';
 
+// TODO: translate
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 class MultiSelectField extends React.Component {
   render() {
     const {
@@ -91,9 +90,7 @@ class MultiSelectField extends React.Component {
       dense: dense
     }, children)));
   }
-
 }
-
 MultiSelectField.defaultProps = {
   selected: [],
   dataTest: 'dhis2-uiwidgets-multiselectfield',
@@ -107,90 +104,62 @@ MultiSelectField.propTypes = {
   /** Should be `MultiSelectOption` components */
   children: PropTypes.node,
   className: PropTypes.string,
-
   /** Label for the button that clears selections */
   clearText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
   /** Adds a button to the MultiSelect that clears selections when pressed */
   clearable: PropTypes.bool,
   dataTest: PropTypes.string,
-
   /** Makes the MultiSelect smaller */
   dense: PropTypes.bool,
-
   /** Disables the MultiSelect */
   disabled: PropTypes.bool,
-
   /** Text to display when there are no options */
   empty: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
   /** Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props */
   error: sharedPropTypes.statusPropType,
-
   /** Placeholder text to show in the filter field when it is empty */
   filterPlaceholder: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
   /** Adds a field to filter options */
   filterable: PropTypes.bool,
-
   /** Useful guiding text to display below the MultiSelect */
   helpText: PropTypes.string,
-
   /** Grabs initial focus on the page */
   initialFocus: PropTypes.bool,
-
   /** Constrains the height of the input */
   inputMaxHeight: PropTypes.string,
-
   /** Sets the width of the input. Can be any valid CSS measurement */
   inputWidth: PropTypes.string,
-
   /** Text for the label above the MultiSelect */
   label: PropTypes.string,
-
   /** Applies a loading appearance to the dropdown options */
   loading: PropTypes.bool,
-
   /** Text to display when `loading` is true */
   loadingText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
   /** Constrains height of the MultiSelect */
   maxHeight: 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 */
   placeholder: PropTypes.string,
-
   /** Leading text to prefix selections */
   prefix: PropTypes.string,
-
   /** Indicates that a selection is required */
   required: PropTypes.bool,
-
   /** Selected items in the MultiSelect (each string should refer to the item's `value` attribute) */
   selected: PropTypes.arrayOf(PropTypes.string),
   tabIndex: PropTypes.string,
-
   /** Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props */
   valid: sharedPropTypes.statusPropType,
-
   /** Text to provide form validation feedback. Receives styles according to validation status */
   validationText: PropTypes.string,
-
   /** Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props */
   warning: sharedPropTypes.statusPropType,
-
   /** Called with signature `({ selected: [String] }, event)` */
   onBlur: PropTypes.func,
-
   /** Called with signature `({ selected: [String] }, event)` */
   onChange: PropTypes.func,
-
   /** Called with signature `({ selected: [String] }, event)` */
   onFocus: PropTypes.func,
-
   /** Called with signature `({ selected: [String] }, event)` */
   onKeyDown: PropTypes.func
 };

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

@@ -2,10 +2,18 @@ import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { MultiSelectOption } from '../index.js';
 import { MultiSelectField } from './index.js';
-const description = "\n`MultiSelectField` is a wrapper around a `MultiSelect` component that adds a label, help text, validation text, and other features.\n\nSee the MultiSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md#multiple-selection).\n\n```js\nimport { MultiSelectField, MultiSelectOption } from '@dhis2/ui'\n```\n\n_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._\n";
+const description = `
+\`MultiSelectField\` is a wrapper around a \`MultiSelect\` component that adds a label, help text, validation text, and other features.
 
-const onChange = selected => alert("Selected changed to: ".concat(JSON.stringify(selected, null, 2)));
+See the MultiSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md#multiple-selection).
 
+\`\`\`js
+import { MultiSelectField, MultiSelectOption } from '@dhis2/ui'
+\`\`\`
+
+_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._
+`;
+const onChange = selected => alert(`Selected changed to: ${JSON.stringify(selected, null, 2)}`);
 const options = [/*#__PURE__*/React.createElement(MultiSelectOption, {
   key: "1",
   value: "1",
@@ -61,7 +69,8 @@ export default {
     }
   },
   // default args for stories
-  args: { // Fix default prop issues - causes 'i18n is not defined' error
+  args: {
+    // Fix default prop issues - causes 'i18n is not defined' error
     ...MultiSelectField.defaultProps,
     label: 'Default label',
     selected: ['1'],
@@ -69,17 +78,18 @@ export default {
     onChange: onChange
   },
   argTypes: {
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(MultiSelectField, args);
-
 export const Default = Template.bind({});
 export const WithHelpText = Template.bind({});
 WithHelpText.args = {
@@ -88,7 +98,7 @@ WithHelpText.args = {
 WithHelpText.parameters = {
   docs: {
     description: {
-      story: "_**Note**: The dropdowns in the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._"
+      story: `_**Note**: The dropdowns in the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._`
     }
   }
 };

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

@@ -1,6 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
-import { Checkbox } from '@dhis2-ui/checkbox';
 import { colors, spacers } from '@dhis2/ui-constants';
+import { Checkbox } from '@dhis2-ui/checkbox';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -11,10 +11,9 @@ const {
 } = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2013783366"
-  }, [".jsx-2013783366{padding:".concat(spacers.dp8, " ").concat(spacers.dp12, ";}")]),
+  }, [`.jsx-2013783366{padding:${spacers.dp8} ${spacers.dp12};}`]),
   className: "jsx-2013783366"
 };
-
 const MultiSelectOption = _ref => {
   let {
     label,
@@ -43,9 +42,8 @@ const MultiSelectOption = _ref => {
   }), styles, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3813980210",
     dynamic: [colors.grey200]
-  }, ["div.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey200, ";}"), "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
+  }, [`div.__jsx-style-dynamic-selector:hover{background-color:${colors.grey200};}`, "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
 };
-
 MultiSelectOption.defaultProps = {
   dataTest: 'dhis2-uicore-multiselectoption'
 };

package/build/es/select/debounce/debounce.js

@@ -1,31 +1,26 @@
 var _this = this;
-
 /**
  * Returns a function, that, as long as it continues to be invoked, will not be triggered. The
  * function will be called after it stops being called for N milliseconds. If `immediate` is
  * passed, trigger the function on the leading edge, instead of the trailing.
  */
+
 export const debounce = (func, wait, immediate) => {
   let timeout;
   return function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     const context = _this;
-
     const later = () => {
       timeout = null;
-
       if (!immediate) {
         func.apply(context, args);
       }
     };
-
     const callNow = immediate && !timeout;
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
-
     if (callNow) {
       func.apply(context, args);
     }

package/build/es/select/empty.js

@@ -2,7 +2,6 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, spacers, theme } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const Empty = _ref => {
   let {
     message,
@@ -15,9 +14,8 @@ const Empty = _ref => {
   }, message, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3788156646",
     dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
-  }, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey700, ";font-family:").concat(theme.fonts, ";font-size:13px;line-height:16px;padding-block:").concat(spacers.dp8, ";padding-inline:").concat(spacers.dp24, ";text-align:center;}")]));
+  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey700};font-family:${theme.fonts};font-size:13px;line-height:16px;padding-block:${spacers.dp8};padding-inline:${spacers.dp24};text-align:center;}`]));
 };
-
 Empty.propTypes = {
   dataTest: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,

package/build/es/select/filter-input.js

@@ -1,9 +1,8 @@
 import _JSXStyle from "styled-jsx/style";
-import { Input } from '@dhis2-ui/input';
 import { spacers, colors } from '@dhis2/ui-constants';
+import { Input } from '@dhis2-ui/input';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const FilterInput = _ref => {
   let {
     value,
@@ -26,9 +25,8 @@ const FilterInput = _ref => {
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "730881408",
     dynamic: [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:".concat(colors.white, ";padding-block-start:").concat(spacers.dp8, ";padding-inline-end:").concat(spacers.dp8, ";padding-block-end:").concat(spacers.dp4, ";padding-inline-start:").concat(spacers.dp8, ";z-index:1;}")]));
+  }, [`div.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:${colors.white};padding-block-start:${spacers.dp8};padding-inline-end:${spacers.dp8};padding-block-end:${spacers.dp4};padding-inline-start:${spacers.dp8};z-index:1;}`]));
 };
-
 FilterInput.propTypes = {
   dataTest: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,