@dhis2-ui/select 7.15.0 → 7.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/build/cjs/multi-select/features/position/index.js +2 -2
  2. package/build/cjs/multi-select/features/position.feature +2 -2
  3. package/build/cjs/multi-select/selection-list.js +3 -0
  4. package/build/cjs/select/loading.js +9 -5
  5. package/build/es/multi-select/features/position/index.js +2 -2
  6. package/build/es/multi-select/features/position.feature +2 -2
  7. package/build/es/multi-select/selection-list.js +3 -0
  8. package/build/es/select/loading.js +8 -5
  9. package/package.json +14 -14
package/build/cjs/multi-select/features/position/index.js CHANGED
@@ -33,14 +33,14 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
33
33
  (0, _steps.When)('an option is clicked', () => {
34
34
  cy.contains('option one').click();
35
35
  });
36
- (0, _steps.Then)('the Input grows in height', () => {
36
+ (0, _steps.Then)('the Input remains the same height', () => {
37
37
  const emptyInputHeight = '@emptyInputHeight';
38
38
  const inputDataTest = '[data-test="dhis2-uicore-select-input"]';
39
39
  cy.getAll(emptyInputHeight, inputDataTest).should(([emptyInputHeight, inputs]) => {
40
40
  expect(inputs.length).to.equal(1);
41
41
  const $input = inputs[0];
42
42
  const inputRect = $input.getBoundingClientRect();
43
- expect(inputRect.height).to.be.greaterThan(emptyInputHeight);
43
+ expect(inputRect.height).to.equal(emptyInputHeight);
44
44
  });
45
45
  });
46
46
  (0, _steps.Then)('the top of the menu is aligned with the bottom of the input', () => {
package/build/cjs/multi-select/features/position.feature CHANGED
@@ -34,14 +34,14 @@ Feature: Position of MultiSelect menu dropdown
34
34
  Then the left of the Menu is aligned with the left of the Input
35
35
  And the Menu and the Input have an equal width
36
36
 
37
- Scenario: Repositioning the menu when the Input grows
37
+ Scenario: Positioning the menu when an option is selected
38
38
  Given a MultiSelect is rendered to which options can be added
39
39
  And the input is empty
40
40
  When the MultiSelect is clicked
41
41
  Then the top of the menu is aligned with the bottom of the input
42
42
  And the left of the Menu is aligned with the left of the Input
43
43
  When an option is clicked
44
- Then the Input grows in height
44
+ Then the Input remains the same height
45
45
  And the top of the menu is aligned with the bottom of the input
46
46
  And the left of the Menu is aligned with the left of the Input
47
47
 
package/build/cjs/multi-select/selection-list.js CHANGED
@@ -52,6 +52,9 @@ const SelectionList = ({
52
52
  key: value,
53
53
  onRemove: onRemove,
54
54
  disabled: isDisabled,
55
+ marginBottom: "0",
56
+ marginLeft: "0",
57
+ marginTop: "0",
55
58
  overflow: true,
56
59
  dense: true
57
60
  }, selectedOption.props.label);
package/build/cjs/select/loading.js CHANGED
@@ -11,6 +11,8 @@ var _loader = require("@dhis2-ui/loader");
11
11
 
12
12
  var _uiConstants = require("@dhis2/ui-constants");
13
13
 
14
+ var _classnames = _interopRequireDefault(require("classnames"));
15
+
14
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
15
17
 
16
18
  var _react = _interopRequireDefault(require("react"));
@@ -23,13 +25,15 @@ const Loading = ({
23
25
  dataTest
24
26
  }) => /*#__PURE__*/_react.default.createElement("div", {
25
27
  "data-test": dataTest,
26
- className: _style.default.dynamic([["1434277130", [_uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]]]) + " " + (className || "")
28
+ className: _style.default.dynamic([["1068210086", [_uiConstants.spacers.dp16, _uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]]]) + " " + ((0, _classnames.default)(className, 'container') || "")
29
+ }, /*#__PURE__*/_react.default.createElement("div", {
30
+ className: _style.default.dynamic([["1068210086", [_uiConstants.spacers.dp16, _uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]]])
27
31
  }, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
28
32
  small: true
29
- }), message, /*#__PURE__*/_react.default.createElement(_style.default, {
30
- id: "1434277130",
31
- dynamic: [_uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]
32
- }, [`div.__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-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:${_uiConstants.colors.grey700};font-family:${_uiConstants.theme.fonts};font-size:13px;padding:${_uiConstants.spacers.dp8} ${_uiConstants.spacers.dp24};}`]));
33
+ })), message, /*#__PURE__*/_react.default.createElement(_style.default, {
34
+ id: "1068210086",
35
+ dynamic: [_uiConstants.spacers.dp16, _uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]
36
+ }, [`.container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${_uiConstants.spacers.dp16};-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:${_uiConstants.colors.grey700};font-family:${_uiConstants.theme.fonts};font-size:13px;padding:${_uiConstants.spacers.dp8} ${_uiConstants.spacers.dp24};}`]));
33
37
 
34
38
  exports.Loading = Loading;
35
39
  Loading.propTypes = {
package/build/es/multi-select/features/position/index.js CHANGED
@@ -29,14 +29,14 @@ When('the window is resized to a greater width', () => {
29
29
  When('an option is clicked', () => {
30
30
  cy.contains('option one').click();
31
31
  });
32
- Then('the Input grows in height', () => {
32
+ Then('the Input remains the same height', () => {
33
33
  const emptyInputHeight = '@emptyInputHeight';
34
34
  const inputDataTest = '[data-test="dhis2-uicore-select-input"]';
35
35
  cy.getAll(emptyInputHeight, inputDataTest).should(([emptyInputHeight, inputs]) => {
36
36
  expect(inputs.length).to.equal(1);
37
37
  const $input = inputs[0];
38
38
  const inputRect = $input.getBoundingClientRect();
39
- expect(inputRect.height).to.be.greaterThan(emptyInputHeight);
39
+ expect(inputRect.height).to.equal(emptyInputHeight);
40
40
  });
41
41
  });
42
42
  Then('the top of the menu is aligned with the bottom of the input', () => {
package/build/es/multi-select/features/position.feature CHANGED
@@ -34,14 +34,14 @@ Feature: Position of MultiSelect menu dropdown
34
34
  Then the left of the Menu is aligned with the left of the Input
35
35
  And the Menu and the Input have an equal width
36
36
 
37
- Scenario: Repositioning the menu when the Input grows
37
+ Scenario: Positioning the menu when an option is selected
38
38
  Given a MultiSelect is rendered to which options can be added
39
39
  And the input is empty
40
40
  When the MultiSelect is clicked
41
41
  Then the top of the menu is aligned with the bottom of the input
42
42
  And the left of the Menu is aligned with the left of the Input
43
43
  When an option is clicked
44
- Then the Input grows in height
44
+ Then the Input remains the same height
45
45
  And the top of the menu is aligned with the bottom of the input
46
46
  And the left of the Menu is aligned with the left of the Input
47
47
 
package/build/es/multi-select/selection-list.js CHANGED
@@ -40,6 +40,9 @@ const SelectionList = ({
40
40
  key: value,
41
41
  onRemove: onRemove,
42
42
  disabled: isDisabled,
43
+ marginBottom: "0",
44
+ marginLeft: "0",
45
+ marginTop: "0",
43
46
  overflow: true,
44
47
  dense: true
45
48
  }, selectedOption.props.label);
package/build/es/select/loading.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _JSXStyle from "styled-jsx/style";
2
2
  import { CircularLoader } from '@dhis2-ui/loader';
3
3
  import { colors, spacers, theme } from '@dhis2/ui-constants';
4
+ import cx from 'classnames';
4
5
  import PropTypes from 'prop-types';
5
6
  import React from 'react';
6
7
  export const Loading = ({
@@ -9,13 +10,15 @@ export const Loading = ({
9
10
  dataTest
10
11
  }) => /*#__PURE__*/React.createElement("div", {
11
12
  "data-test": dataTest,
12
- className: _JSXStyle.dynamic([["1434277130", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (className || "")
13
+ className: _JSXStyle.dynamic([["1068210086", [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (cx(className, 'container') || "")
14
+ }, /*#__PURE__*/React.createElement("div", {
15
+ className: _JSXStyle.dynamic([["1068210086", [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]])
13
16
  }, /*#__PURE__*/React.createElement(CircularLoader, {
14
17
  small: true
15
- }), message, /*#__PURE__*/React.createElement(_JSXStyle, {
16
- id: "1434277130",
17
- dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
18
- }, [`div.__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-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:${colors.grey700};font-family:${theme.fonts};font-size:13px;padding:${spacers.dp8} ${spacers.dp24};}`]));
18
+ })), message, /*#__PURE__*/React.createElement(_JSXStyle, {
19
+ id: "1068210086",
20
+ dynamic: [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
21
+ }, [`.container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${spacers.dp16};-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:${colors.grey700};font-family:${theme.fonts};font-size:13px;padding:${spacers.dp8} ${spacers.dp24};}`]));
19
22
  Loading.propTypes = {
20
23
  dataTest: PropTypes.string.isRequired,
21
24
  className: PropTypes.string,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/select",
3
- "version": "7.15.0",
3
+ "version": "7.16.2",
4
4
  "description": "UI Select",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,19 +33,19 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@dhis2/prop-types": "^3.0.0-beta.1",
36
- "@dhis2-ui/box": "7.15.0",
37
- "@dhis2-ui/button": "7.15.0",
38
- "@dhis2-ui/card": "7.15.0",
39
- "@dhis2-ui/checkbox": "7.15.0",
40
- "@dhis2-ui/chip": "7.15.0",
41
- "@dhis2-ui/field": "7.15.0",
42
- "@dhis2-ui/input": "7.15.0",
43
- "@dhis2-ui/layer": "7.15.0",
44
- "@dhis2-ui/loader": "7.15.0",
45
- "@dhis2-ui/popper": "7.15.0",
46
- "@dhis2-ui/status-icon": "7.15.0",
47
- "@dhis2/ui-constants": "7.15.0",
48
- "@dhis2/ui-icons": "7.15.0",
36
+ "@dhis2-ui/box": "7.16.2",
37
+ "@dhis2-ui/button": "7.16.2",
38
+ "@dhis2-ui/card": "7.16.2",
39
+ "@dhis2-ui/checkbox": "7.16.2",
40
+ "@dhis2-ui/chip": "7.16.2",
41
+ "@dhis2-ui/field": "7.16.2",
42
+ "@dhis2-ui/input": "7.16.2",
43
+ "@dhis2-ui/layer": "7.16.2",
44
+ "@dhis2-ui/loader": "7.16.2",
45
+ "@dhis2-ui/popper": "7.16.2",
46
+ "@dhis2-ui/status-icon": "7.16.2",
47
+ "@dhis2/ui-constants": "7.16.2",
48
+ "@dhis2/ui-icons": "7.16.2",
49
49
  "classnames": "^2.3.1",
50
50
  "prop-types": "^15.7.2"
51
51
  },