@dhis2-ui/select 8.2.0 → 8.2.1

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

@@ -5,15 +5,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { findOptionChild } from '../select/index.js';
 
-const Selection = ({
-  options,
-  selected,
-  className
-}) => {
+const Selection = _ref => {
+  let {
+    options,
+    selected,
+    className
+  } = _ref;
   const selectedOption = findOptionChild(selected, options);
 
   if (!selectedOption) {
-    const message = `There is no option with the value: "${selected}". ` + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
+    const message = "There is no option with the value: \"".concat(selected, "\". ") + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
     throw new Error(message);
   }
 
@@ -26,7 +27,7 @@ const Selection = ({
   }, icon), label, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2368250986",
     dynamic: [spacers.dp8, spacers.dp16, spacers.dp16]
-  }, [".root.__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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", `.root-icon.__jsx-style-dynamic-selector{margin-right:${spacers.dp8};width:${spacers.dp16};height:${spacers.dp16};overflow:hidden;}`]));
+  }, [".root.__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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".root-icon.__jsx-style-dynamic-selector{margin-right:".concat(spacers.dp8, ";width:").concat(spacers.dp16, ";height:").concat(spacers.dp16, ";overflow:hidden;}")]));
 };
 
 Selection.propTypes = {

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

@@ -9,34 +9,35 @@ import { FilterableMenu } from './filterable-menu.js';
 import { Input } from './input.js';
 import { Menu } from './menu.js';
 
-const SingleSelect = ({
-  className,
-  selected,
-  tabIndex,
-  maxHeight,
-  inputMaxHeight,
-  onChange,
-  onFocus,
-  onBlur,
-  loading,
-  error,
-  warning,
-  valid,
-  disabled,
-  children,
-  clearable,
-  clearText,
-  filterable,
-  filterPlaceholder,
-  placeholder,
-  prefix,
-  empty,
-  loadingText,
-  noMatchText,
-  initialFocus,
-  dense,
-  dataTest
-}) => {
+const SingleSelect = _ref => {
+  let {
+    className,
+    selected,
+    tabIndex,
+    maxHeight,
+    inputMaxHeight,
+    onChange,
+    onFocus,
+    onBlur,
+    loading,
+    error,
+    warning,
+    valid,
+    disabled,
+    children,
+    clearable,
+    clearText,
+    filterable,
+    filterPlaceholder,
+    placeholder,
+    prefix,
+    empty,
+    loadingText,
+    noMatchText,
+    initialFocus,
+    dense,
+    dataTest
+  } = _ref;
   // If the select is filterable, use a filterable menu
   const menu = filterable ? /*#__PURE__*/React.createElement(FilterableMenu, {
     dataTest: dataTest,
@@ -77,7 +78,7 @@ const SingleSelect = ({
     dense: dense
   }, children, loading && /*#__PURE__*/React.createElement(CommonLoading, {
     message: loadingText,
-    dataTest: `${dataTest}-loading`
+    dataTest: "".concat(dataTest, "-loading")
   }))), /*#__PURE__*/React.createElement(StatusIcon, {
     error: error,
     valid: valid,
@@ -85,7 +86,7 @@ const SingleSelect = ({
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2180377457",
     dynamic: [spacers.dp8]
-  }, [`.root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${spacers.dp8};}`, ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
+  }, [".root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp8, ";}"), ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
 
 SingleSelect.defaultProps = {

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

@@ -10,12 +10,15 @@ window.onChange = window.Cypress && window.Cypress.cy.stub();
 window.onFocus = window.Cypress && window.Cypress.cy.stub();
 window.onBlur = window.Cypress && window.Cypress.cy.stub();
 
-const CustomSingleSelectOption = ({
-  label,
-  onClick
-}) => /*#__PURE__*/React.createElement("div", {
-  onClick: e => onClick({}, e)
-}, label);
+const CustomSingleSelectOption = _ref => {
+  let {
+    label,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: e => onClick({}, e)
+  }, label);
+};
 
 CustomSingleSelectOption.propTypes = {
   label: PropTypes.string,
@@ -532,17 +535,23 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
       flexGrow: 1
     }
   }, /*#__PURE__*/React.createElement(SingleSelect, {
-    onChange: ({
-      selected
-    }) => console.log('size changed to ' + selected)
-  }, options.map(({
-    name,
-    id
-  }) => /*#__PURE__*/React.createElement(SingleSelectOption, {
-    key: id,
-    value: id,
-    label: name
-  })))), toggle && /*#__PURE__*/React.createElement("div", {
+    onChange: _ref2 => {
+      let {
+        selected
+      } = _ref2;
+      return console.log('size changed to ' + selected);
+    }
+  }, options.map(_ref3 => {
+    let {
+      name,
+      id
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(SingleSelectOption, {
+      key: id,
+      value: id,
+      label: name
+    });
+  }))), toggle && /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '30px',
       border: '1px solid green'

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

@@ -4,33 +4,26 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { SingleSelectOption } from '../index.js';
 import { SingleSelect } from './index.js';
-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 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 eventHandler = handlerName => (payload, event) => {
-  console.log(`${handlerName} payload`, payload);
-  console.log(`${handlerName} event`, event);
+  console.log("".concat(handlerName, " payload"), payload);
+  console.log("".concat(handlerName, " event"), event);
 };
 
 const onChange = eventHandler('onChange');
 const onFocus = eventHandler('onFocus');
 const onBlur = eventHandler('onBlur');
 
-const CustomSingleSelectOption = ({
-  label,
-  onClick
-}) => /*#__PURE__*/React.createElement("div", {
-  onClick: e => onClick({}, e)
-}, label);
+const CustomSingleSelectOption = _ref => {
+  let {
+    label,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: e => onClick({}, e)
+  }, label);
+};
 
 CustomSingleSelectOption.propTypes = {
   label: PropTypes.string,
@@ -47,7 +40,7 @@ const requiredIfArgType = {
   }
 };
 export default {
-  title: 'Forms/Single Select/Single Select',
+  title: 'Single Select',
   component: SingleSelect,
   parameters: {
     docs: {

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

@@ -2,19 +2,9 @@ import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { SingleSelectOption } from '../index.js';
 import { SingleSelectField } from './index.js';
-const description = `
-\`SingleSelectField\` is a wrapper around a \`SingleSelect\` component that adds a label, help text, validation text, and other features.
+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";
 
-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 onChange = selected => alert("Selected changed to: ".concat(JSON.stringify(selected, null, 2)));
 
 const options = [/*#__PURE__*/React.createElement(SingleSelectOption, {
   key: "1",
@@ -58,7 +48,7 @@ const options = [/*#__PURE__*/React.createElement(SingleSelectOption, {
   label: "ten"
 })];
 export default {
-  title: 'Forms/Single Select/Single Select Field',
+  title: 'Single Select Field',
   component: SingleSelectField,
   subcomponents: {
     SingleSelectOption
@@ -97,7 +87,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

@@ -4,27 +4,30 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const SingleSelectOption = ({
-  label,
-  active,
-  disabled,
-  onClick,
-  className,
-  dataTest,
-  value
-}) => /*#__PURE__*/React.createElement("div", {
-  onClick: e => onClick({}, e),
-  "data-test": dataTest,
-  "data-value": value,
-  "data-label": label,
-  className: _JSXStyle.dynamic([["2046100779", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal700, colors.white, colors.grey500]]]) + " " + (cx(className, {
+const SingleSelectOption = _ref => {
+  let {
+    label,
+    active,
     disabled,
-    active
-  }) || "")
-}, label, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "2046100779",
-  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:${colors.grey900};padding:${spacers.dp8} ${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;}"]));
+    onClick,
+    className,
+    dataTest,
+    value
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: e => onClick({}, e),
+    "data-test": dataTest,
+    "data-value": value,
+    "data-label": label,
+    className: _JSXStyle.dynamic([["2046100779", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal700, colors.white, colors.grey500]]]) + " " + (cx(className, {
+      disabled,
+      active
+    }) || "")
+  }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2046100779",
+    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:").concat(spacers.dp8, " ").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;}"]));
+};
 
 SingleSelectOption.defaultProps = {
   dataTest: 'dhis2-uicore-singleselectoption'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "8.2.0",
+    "version": "8.2.1",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,19 +33,19 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/box": "8.2.0",
-        "@dhis2-ui/button": "8.2.0",
-        "@dhis2-ui/card": "8.2.0",
-        "@dhis2-ui/checkbox": "8.2.0",
-        "@dhis2-ui/chip": "8.2.0",
-        "@dhis2-ui/field": "8.2.0",
-        "@dhis2-ui/input": "8.2.0",
-        "@dhis2-ui/layer": "8.2.0",
-        "@dhis2-ui/loader": "8.2.0",
-        "@dhis2-ui/popper": "8.2.0",
-        "@dhis2-ui/status-icon": "8.2.0",
-        "@dhis2/ui-constants": "8.2.0",
-        "@dhis2/ui-icons": "8.2.0",
+        "@dhis2-ui/box": "8.2.1",
+        "@dhis2-ui/button": "8.2.1",
+        "@dhis2-ui/card": "8.2.1",
+        "@dhis2-ui/checkbox": "8.2.1",
+        "@dhis2-ui/chip": "8.2.1",
+        "@dhis2-ui/field": "8.2.1",
+        "@dhis2-ui/input": "8.2.1",
+        "@dhis2-ui/layer": "8.2.1",
+        "@dhis2-ui/loader": "8.2.1",
+        "@dhis2-ui/popper": "8.2.1",
+        "@dhis2-ui/status-icon": "8.2.1",
+        "@dhis2/ui-constants": "8.2.1",
+        "@dhis2/ui-icons": "8.2.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },