@dhis2-ui/select 7.14.1 → 7.15.1

package/build/cjs/multi-select/features/position/index.js

@@ -33,14 +33,14 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.When)('an option is clicked', () => {
   cy.contains('option one').click();
 });
-(0, _steps.Then)('the Input grows in height', () => {
+(0, _steps.Then)('the Input remains the same height', () => {
   const emptyInputHeight = '@emptyInputHeight';
   const inputDataTest = '[data-test="dhis2-uicore-select-input"]';
   cy.getAll(emptyInputHeight, inputDataTest).should(([emptyInputHeight, inputs]) => {
     expect(inputs.length).to.equal(1);
     const $input = inputs[0];
     const inputRect = $input.getBoundingClientRect();
-    expect(inputRect.height).to.be.greaterThan(emptyInputHeight);
+    expect(inputRect.height).to.equal(emptyInputHeight);
   });
 });
 (0, _steps.Then)('the top of the menu is aligned with the bottom of the input', () => {

package/build/cjs/multi-select/features/position.feature

@@ -34,14 +34,14 @@ Feature: Position of MultiSelect menu dropdown
         Then the left of the Menu is aligned with the left of the Input
         And the Menu and the Input have an equal width
 
-    Scenario: Repositioning the menu when the Input grows
+    Scenario: Positioning the menu when an option is selected
         Given a MultiSelect is rendered to which options can be added
         And the input is empty
         When the MultiSelect is clicked
         Then the top of the menu is aligned with the bottom of the input
         And the left of the Menu is aligned with the left of the Input
         When an option is clicked
-        Then the Input grows in height
+        Then the Input remains the same height
         And the top of the menu is aligned with the bottom of the input
         And the left of the Menu is aligned with the left of the Input
 

package/build/cjs/multi-select/multi-select.js

@@ -7,12 +7,12 @@ exports.MultiSelect = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
+var _statusIcon = require("@dhis2-ui/status-icon");
+
 var _propTypes = require("@dhis2/prop-types");
 
 var _uiConstants = require("@dhis2/ui-constants");
 
-var _uiIcons = require("@dhis2/ui-icons");
-
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -27,43 +27,6 @@ var _menu = require("./menu.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StatusIcon = ({
-  error,
-  warning,
-  valid,
-  defaultTo
-}) => {
-  if (error) {
-    return /*#__PURE__*/_react.default.createElement(_uiIcons.IconErrorFilled24, {
-      color: _uiConstants.theme.error
-    });
-  }
-
-  if (warning) {
-    return /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningFilled24, {
-      color: _uiConstants.theme.warning
-    });
-  }
-
-  if (valid) {
-    return /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckmark24, {
-      color: _uiConstants.theme.valid
-    });
-  }
-
-  return defaultTo;
-};
-
-StatusIcon.defaultProps = {
-  defaultTo: null
-};
-StatusIcon.propTypes = {
-  defaultTo: _propTypes2.default.element,
-  error: _propTypes2.default.bool,
-  valid: _propTypes2.default.bool,
-  warning: _propTypes2.default.bool
-};
-
 const MultiSelect = ({
   className,
   selected,
@@ -104,9 +67,9 @@ const MultiSelect = ({
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
-    className: _style.default.dynamic([["196189569", [_uiConstants.spacers.dp8]]]) + " " + "root"
+    className: _style.default.dynamic([["2180377457", [_uiConstants.spacers.dp8]]]) + " " + "root"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["196189569", [_uiConstants.spacers.dp8]]]) + " " + "root-input"
+    className: _style.default.dynamic([["2180377457", [_uiConstants.spacers.dp8]]]) + " " + "root-input"
   }, /*#__PURE__*/_react.default.createElement(_index.Select, {
     className: className,
     selected: selected,
@@ -133,14 +96,14 @@ const MultiSelect = ({
   }, children, loading && /*#__PURE__*/_react.default.createElement(_index.Loading, {
     message: loadingText,
     dataTest: `${dataTest}-loading`
-  }))), /*#__PURE__*/_react.default.createElement(StatusIcon, {
+  }))), /*#__PURE__*/_react.default.createElement(_statusIcon.StatusIcon, {
     error: error,
     valid: valid,
     warning: warning
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "196189569",
+    id: "2180377457",
     dynamic: [_uiConstants.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;}", `.root-input.__jsx-style-dynamic-selector{margin-right:${_uiConstants.spacers.dp8};-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:${_uiConstants.spacers.dp8};}`, ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
 
 exports.MultiSelect = MultiSelect;

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

@@ -52,6 +52,9 @@ const SelectionList = ({
     key: value,
     onRemove: onRemove,
     disabled: isDisabled,
+    marginBottom: "0",
+    marginLeft: "0",
+    marginTop: "0",
     overflow: true,
     dense: true
   }, selectedOption.props.label);

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

@@ -7,12 +7,12 @@ exports.SingleSelect = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
+var _statusIcon = require("@dhis2-ui/status-icon");
+
 var _propTypes = require("@dhis2/prop-types");
 
 var _uiConstants = require("@dhis2/ui-constants");
 
-var _uiIcons = require("@dhis2/ui-icons");
-
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -27,43 +27,6 @@ var _menu = require("./menu.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StatusIcon = ({
-  error,
-  warning,
-  valid,
-  defaultTo
-}) => {
-  if (error) {
-    return /*#__PURE__*/_react.default.createElement(_uiIcons.IconErrorFilled24, {
-      color: _uiConstants.theme.error
-    });
-  }
-
-  if (warning) {
-    return /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningFilled24, {
-      color: _uiConstants.theme.warning
-    });
-  }
-
-  if (valid) {
-    return /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckmark24, {
-      color: _uiConstants.theme.valid
-    });
-  }
-
-  return defaultTo;
-};
-
-StatusIcon.defaultProps = {
-  defaultTo: null
-};
-StatusIcon.propTypes = {
-  defaultTo: _propTypes2.default.element,
-  error: _propTypes2.default.bool,
-  valid: _propTypes2.default.bool,
-  warning: _propTypes2.default.bool
-};
-
 const SingleSelect = ({
   className,
   selected,
@@ -104,9 +67,9 @@ const SingleSelect = ({
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
-    className: _style.default.dynamic([["196189569", [_uiConstants.spacers.dp8]]]) + " " + "root"
+    className: _style.default.dynamic([["2180377457", [_uiConstants.spacers.dp8]]]) + " " + "root"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["196189569", [_uiConstants.spacers.dp8]]]) + " " + "root-input"
+    className: _style.default.dynamic([["2180377457", [_uiConstants.spacers.dp8]]]) + " " + "root-input"
   }, /*#__PURE__*/_react.default.createElement(_index.Select, {
     className: className,
     selected: selected,
@@ -133,14 +96,14 @@ const SingleSelect = ({
   }, children, loading && /*#__PURE__*/_react.default.createElement(_index.Loading, {
     message: loadingText,
     dataTest: `${dataTest}-loading`
-  }))), /*#__PURE__*/_react.default.createElement(StatusIcon, {
+  }))), /*#__PURE__*/_react.default.createElement(_statusIcon.StatusIcon, {
     error: error,
     valid: valid,
     warning: warning
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "196189569",
+    id: "2180377457",
     dynamic: [_uiConstants.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;}", `.root-input.__jsx-style-dynamic-selector{margin-right:${_uiConstants.spacers.dp8};-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:${_uiConstants.spacers.dp8};}`, ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
 
 exports.SingleSelect = SingleSelect;

package/build/es/multi-select/features/position/index.js

@@ -29,14 +29,14 @@ When('the window is resized to a greater width', () => {
 When('an option is clicked', () => {
   cy.contains('option one').click();
 });
-Then('the Input grows in height', () => {
+Then('the Input remains the same height', () => {
   const emptyInputHeight = '@emptyInputHeight';
   const inputDataTest = '[data-test="dhis2-uicore-select-input"]';
   cy.getAll(emptyInputHeight, inputDataTest).should(([emptyInputHeight, inputs]) => {
     expect(inputs.length).to.equal(1);
     const $input = inputs[0];
     const inputRect = $input.getBoundingClientRect();
-    expect(inputRect.height).to.be.greaterThan(emptyInputHeight);
+    expect(inputRect.height).to.equal(emptyInputHeight);
   });
 });
 Then('the top of the menu is aligned with the bottom of the input', () => {

package/build/es/multi-select/features/position.feature

@@ -34,14 +34,14 @@ Feature: Position of MultiSelect menu dropdown
         Then the left of the Menu is aligned with the left of the Input
         And the Menu and the Input have an equal width
 
-    Scenario: Repositioning the menu when the Input grows
+    Scenario: Positioning the menu when an option is selected
         Given a MultiSelect is rendered to which options can be added
         And the input is empty
         When the MultiSelect is clicked
         Then the top of the menu is aligned with the bottom of the input
         And the left of the Menu is aligned with the left of the Input
         When an option is clicked
-        Then the Input grows in height
+        Then the Input remains the same height
         And the top of the menu is aligned with the bottom of the input
         And the left of the Menu is aligned with the left of the Input
 

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

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
+import { StatusIcon } from '@dhis2-ui/status-icon';
 import { requiredIf } from '@dhis2/prop-types';
-import { theme, spacers, sharedPropTypes } from '@dhis2/ui-constants';
-import { IconErrorFilled24, IconWarningFilled24, IconCheckmark24 } from '@dhis2/ui-icons';
+import { spacers, sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Loading as CommonLoading, Select } from '../select/index.js';
@@ -9,43 +9,6 @@ import { FilterableMenu } from './filterable-menu.js';
 import { Input } from './input.js';
 import { Menu } from './menu.js';
 
-const StatusIcon = ({
-  error,
-  warning,
-  valid,
-  defaultTo
-}) => {
-  if (error) {
-    return /*#__PURE__*/React.createElement(IconErrorFilled24, {
-      color: theme.error
-    });
-  }
-
-  if (warning) {
-    return /*#__PURE__*/React.createElement(IconWarningFilled24, {
-      color: theme.warning
-    });
-  }
-
-  if (valid) {
-    return /*#__PURE__*/React.createElement(IconCheckmark24, {
-      color: theme.valid
-    });
-  }
-
-  return defaultTo;
-};
-
-StatusIcon.defaultProps = {
-  defaultTo: null
-};
-StatusIcon.propTypes = {
-  defaultTo: PropTypes.element,
-  error: PropTypes.bool,
-  valid: PropTypes.bool,
-  warning: PropTypes.bool
-};
-
 const MultiSelect = ({
   className,
   selected,
@@ -86,9 +49,9 @@ const MultiSelect = ({
   });
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["196189569", [spacers.dp8]]]) + " " + "root"
+    className: _JSXStyle.dynamic([["2180377457", [spacers.dp8]]]) + " " + "root"
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["196189569", [spacers.dp8]]]) + " " + "root-input"
+    className: _JSXStyle.dynamic([["2180377457", [spacers.dp8]]]) + " " + "root-input"
   }, /*#__PURE__*/React.createElement(Select, {
     className: className,
     selected: selected,
@@ -120,9 +83,9 @@ const MultiSelect = ({
     valid: valid,
     warning: warning
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "196189569",
+    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;}", `.root-input.__jsx-style-dynamic-selector{margin-right:${spacers.dp8};-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:${spacers.dp8};}`, ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
 
 MultiSelect.defaultProps = {

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

@@ -40,6 +40,9 @@ const SelectionList = ({
     key: value,
     onRemove: onRemove,
     disabled: isDisabled,
+    marginBottom: "0",
+    marginLeft: "0",
+    marginTop: "0",
     overflow: true,
     dense: true
   }, selectedOption.props.label);

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

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
+import { StatusIcon } from '@dhis2-ui/status-icon';
 import { requiredIf } from '@dhis2/prop-types';
-import { theme, spacers, sharedPropTypes } from '@dhis2/ui-constants';
-import { IconErrorFilled24, IconWarningFilled24, IconCheckmark24 } from '@dhis2/ui-icons';
+import { spacers, sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Loading as CommonLoading, Select } from '../select/index.js';
@@ -9,43 +9,6 @@ import { FilterableMenu } from './filterable-menu.js';
 import { Input } from './input.js';
 import { Menu } from './menu.js';
 
-const StatusIcon = ({
-  error,
-  warning,
-  valid,
-  defaultTo
-}) => {
-  if (error) {
-    return /*#__PURE__*/React.createElement(IconErrorFilled24, {
-      color: theme.error
-    });
-  }
-
-  if (warning) {
-    return /*#__PURE__*/React.createElement(IconWarningFilled24, {
-      color: theme.warning
-    });
-  }
-
-  if (valid) {
-    return /*#__PURE__*/React.createElement(IconCheckmark24, {
-      color: theme.valid
-    });
-  }
-
-  return defaultTo;
-};
-
-StatusIcon.defaultProps = {
-  defaultTo: null
-};
-StatusIcon.propTypes = {
-  defaultTo: PropTypes.element,
-  error: PropTypes.bool,
-  valid: PropTypes.bool,
-  warning: PropTypes.bool
-};
-
 const SingleSelect = ({
   className,
   selected,
@@ -86,9 +49,9 @@ const SingleSelect = ({
   });
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["196189569", [spacers.dp8]]]) + " " + "root"
+    className: _JSXStyle.dynamic([["2180377457", [spacers.dp8]]]) + " " + "root"
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["196189569", [spacers.dp8]]]) + " " + "root-input"
+    className: _JSXStyle.dynamic([["2180377457", [spacers.dp8]]]) + " " + "root-input"
   }, /*#__PURE__*/React.createElement(Select, {
     className: className,
     selected: selected,
@@ -120,9 +83,9 @@ const SingleSelect = ({
     valid: valid,
     warning: warning
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "196189569",
+    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;}", `.root-input.__jsx-style-dynamic-selector{margin-right:${spacers.dp8};-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:${spacers.dp8};}`, ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
 
 SingleSelect.defaultProps = {

package/package.json

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