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

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

@@ -4,17 +4,24 @@ import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 import { SingleSelectOption } from '../index.js';
 import { SingleSelect } from './index.js';
-const description = "\nUse a select component wherever the user needs to make a selection of one or more options from a list of 6 or more options. If there are less than 6 options to choose from and space permits, use checkboxes for multiple selection and radio buttons for single selection. If the user needs to make a complex selection with a specific ordering, use a transfer instead.\n\nLearn more about using Selects at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).\n\n```js\nimport { SingleSelect, SingleSelectOption } from '@dhis2/ui'\n```\n\n_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (interactive) examples, see individual stories in the 'Canvas' tab._\n";
+const description = `
+Use a select component wherever the user needs to make a selection of one or more options from a list of 6 or more options. If there are less than 6 options to choose from and space permits, use checkboxes for multiple selection and radio buttons for single selection. If the user needs to make a complex selection with a specific ordering, use a transfer instead.
 
+Learn more about using Selects at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).
+
+\`\`\`js
+import { SingleSelect, SingleSelectOption } from '@dhis2/ui'
+\`\`\`
+
+_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (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 CustomSingleSelectOption = _ref => {
   let {
     label,
@@ -24,7 +31,6 @@ const CustomSingleSelectOption = _ref => {
     onClick: e => onClick({}, e)
   }, label);
 };
-
 CustomSingleSelectOption.propTypes = {
   label: PropTypes.string,
   onClick: PropTypes.func
@@ -61,19 +67,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(SingleSelect, args, /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "1",
   label: "option one"
@@ -84,16 +94,14 @@ const WithOptionsTemplate = args => /*#__PURE__*/React.createElement(SingleSelec
   value: "3",
   label: "option three"
 }));
-
 const EmptyTemplate = args => /*#__PURE__*/React.createElement(SingleSelect, 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 docs as a representative example
-
+};
+// Enable this story as the primary for docs as a representative example
 WithOptionsAndASelection.parameters = {
   docs: {
     disable: false
@@ -104,7 +112,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 +162,6 @@ WithInitialFocus.parameters = {
     disable: true
   }
 };
-WithInitialFocus.storyName = 'With initialFocus';
 export const Dense = WithOptionsTemplate.bind({});
 Dense.args = {
   dense: true,
@@ -177,7 +184,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';
@@ -265,7 +273,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';
@@ -274,7 +283,8 @@ WithPrefix.args = {
   prefix: 'Prefix text'
 };
 export const WithPrefixAndSelection = WithOptionsTemplate.bind({});
-WithPrefixAndSelection.args = { ...WithPrefix.args,
+WithPrefixAndSelection.args = {
+  ...WithPrefix.args,
   ...WithOptionsAndASelection.args
 };
 export const WithRTL = args => {
@@ -308,7 +318,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(SingleSelect, args, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -327,13 +338,15 @@ export const WithDisabledOptionAndOnChange = args => /*#__PURE__*/React.createEl
 }));
 WithDisabledOptionAndOnChange.storyName = 'With disabled option and onChange';
 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(SingleSelect, args, /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "1",

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

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

package/build/es/single-select-field/single-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 { SingleSelect } from '../index.js';
-import i18n from '../locales/index.js'; // TODO: translate
+import i18n from '../locales/index.js';
+import { SingleSelect } from '../single-select/index.js';
 
+// TODO: translate
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 class SingleSelectField extends React.Component {
   render() {
     const {
@@ -91,9 +90,7 @@ class SingleSelectField extends React.Component {
       dense: dense
     }, children)));
   }
-
 }
-
 SingleSelectField.defaultProps = {
   dataTest: 'dhis2-uiwidgets-singleselectfield',
   selected: '',
@@ -107,90 +104,62 @@ SingleSelectField.propTypes = {
   /** Should be `SingleSelectOption` 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 SingleSelect that clears selections when pressed */
   clearable: PropTypes.bool,
   dataTest: PropTypes.string,
-
   /** Makes the SingleSelect smaller */
   dense: PropTypes.bool,
-
   /** Disables the SingleSelect */
   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 SingleSelect */
   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 SingleSelect */
   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 SingleSelect */
   maxHeight: 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 */
   placeholder: PropTypes.string,
-
   /** Leading text to prefix selections */
   prefix: PropTypes.string,
-
   /** Indicates that a selection is required */
   required: PropTypes.bool,
-
   /** Selected item in the SingleSelect (the string should refer to the item's `value` attribute) */
   selected: 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/single-select-field/{single-select-field.stories.js → single-select-field.prod.stories.js}

@@ -2,10 +2,18 @@ import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { SingleSelectOption } from '../index.js';
 import { SingleSelectField } from './index.js';
-const description = "\n`SingleSelectField` is a wrapper around a `SingleSelect` component that adds a label, help text, validation text, and other features.\n\nSee the SingleSelect 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 { SingleSelectField, SingleSelectOption } 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 = `
+\`SingleSelectField\` is a wrapper around a \`SingleSelect\` 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 SingleSelect 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 { SingleSelectField, SingleSelectOption } 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(SingleSelectOption, {
   key: "1",
   value: "1",
@@ -61,24 +69,26 @@ 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
     ...SingleSelectField.defaultProps,
     label: 'Default label',
     children: options,
     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(SingleSelectField, args);
-
 export const Default = Template.bind({});
 export const WithHelpText = Template.bind({});
 WithHelpText.args = {
@@ -87,7 +97,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/single-select-option/single-select-option.js

@@ -3,7 +3,6 @@ import { colors, spacers } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const SingleSelectOption = _ref => {
   let {
     label,
@@ -26,9 +25,8 @@ const SingleSelectOption = _ref => {
   }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3808134379",
     dynamic: [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal700, colors.white, colors.grey500]
-  }, ["div.__jsx-style-dynamic-selector{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:".concat(colors.grey900, ";padding-block:").concat(spacers.dp8, ";padding-inline:").concat(spacers.dp12, ";}"), "div.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey200, ";}"), "div.__jsx-style-dynamic-selector:active,div.active.__jsx-style-dynamic-selector{background-color:".concat(colors.teal700, ";color:").concat(colors.white, ";cursor:auto;}"), "div.disabled.__jsx-style-dynamic-selector{color:".concat(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{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${colors.grey900};padding-block:${spacers.dp8};padding-inline:${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.teal700};color:${colors.white};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;}"]));
 };
-
 SingleSelectOption.defaultProps = {
   dataTest: 'dhis2-uicore-singleselectoption'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.10",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -22,32 +22,32 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
         "@dhis2/d2-i18n": "^1",
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "9.11.0",
-        "@dhis2-ui/button": "9.11.0",
-        "@dhis2-ui/card": "9.11.0",
-        "@dhis2-ui/checkbox": "9.11.0",
-        "@dhis2-ui/chip": "9.11.0",
-        "@dhis2-ui/field": "9.11.0",
-        "@dhis2-ui/input": "9.11.0",
-        "@dhis2-ui/layer": "9.11.0",
-        "@dhis2-ui/loader": "9.11.0",
-        "@dhis2-ui/popper": "9.11.0",
-        "@dhis2-ui/status-icon": "9.11.0",
-        "@dhis2-ui/tooltip": "9.11.0",
+        "@dhis2-ui/box": "9.11.1-beta.10",
+        "@dhis2-ui/button": "9.11.1-beta.10",
+        "@dhis2-ui/card": "9.11.1-beta.10",
+        "@dhis2-ui/checkbox": "9.11.1-beta.10",
+        "@dhis2-ui/chip": "9.11.1-beta.10",
+        "@dhis2-ui/field": "9.11.1-beta.10",
+        "@dhis2-ui/input": "9.11.1-beta.10",
+        "@dhis2-ui/layer": "9.11.1-beta.10",
+        "@dhis2-ui/loader": "9.11.1-beta.10",
+        "@dhis2-ui/popper": "9.11.1-beta.10",
+        "@dhis2-ui/status-icon": "9.11.1-beta.10",
+        "@dhis2-ui/tooltip": "9.11.1-beta.10",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.11.0",
-        "@dhis2/ui-icons": "9.11.0",
+        "@dhis2/ui-constants": "9.11.1-beta.10",
+        "@dhis2/ui-icons": "9.11.1-beta.10",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },