@dhis2-ui/select 9.11.2 → 9.11.4

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 (13) hide show
  1. package/build/cjs/select/menu-wrapper.js +2 -1
  2. package/build/cjs/single-select/single-select.prod.stories.js +2 -1
  3. package/build/cjs/single-select-field/features/can_show_conditionally/index.js +23 -0
  4. package/build/cjs/single-select-field/features/can_show_conditionally.feature +7 -0
  5. package/build/cjs/single-select-field/single-select-field.e2e.stories.js +27 -2
  6. package/build/cjs/single-select-field/single-select-field.prod.stories.js +7 -1
  7. package/build/es/select/menu-wrapper.js +2 -1
  8. package/build/es/single-select/single-select.prod.stories.js +2 -1
  9. package/build/es/single-select-field/features/can_show_conditionally/index.js +21 -0
  10. package/build/es/single-select-field/features/can_show_conditionally.feature +7 -0
  11. package/build/es/single-select-field/single-select-field.e2e.stories.js +25 -1
  12. package/build/es/single-select-field/single-select-field.prod.stories.js +6 -0
  13. package/package.json +15 -15
package/build/cjs/select/menu-wrapper.js CHANGED
@@ -22,7 +22,8 @@ const MenuWrapper = _ref => {
22
22
  } = _ref;
23
23
  return /*#__PURE__*/_react.default.createElement(_layer.Layer, {
24
24
  onBackdropClick: onClick,
25
- transparent: true
25
+ transparent: true,
26
+ disablePortal: true
26
27
  }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
27
28
  reference: selectRef,
28
29
  placement: "bottom-start",
package/build/cjs/single-select/single-select.prod.stories.js CHANGED
@@ -294,7 +294,8 @@ WithOptionsASelectionAndDisabled.args = {
294
294
  WithOptionsASelectionAndDisabled.storyName = 'With options, a selection and disabled';
295
295
  const WithPrefix = exports.WithPrefix = WithOptionsTemplate.bind({});
296
296
  WithPrefix.args = {
297
- prefix: 'Prefix text'
297
+ prefix: 'Prefix text',
298
+ selected: '1'
298
299
  };
299
300
  const WithPrefixAndSelection = exports.WithPrefixAndSelection = WithOptionsTemplate.bind({});
300
301
  WithPrefixAndSelection.args = {
package/build/cjs/single-select-field/features/can_show_conditionally/index.js ADDED
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
4
+ (0, _cypressCucumberPreprocessor.Given)('a Select is hidden initially', () => {
5
+ cy.visitStory('SingleSelectField', 'With hidden parent');
6
+ });
7
+ (0, _cypressCucumberPreprocessor.When)('someone hovers over it to show it', () => {
8
+ cy.get('.container .hiddenSelect').invoke('attr', 'style', 'display: block');
9
+ });
10
+ (0, _cypressCucumberPreprocessor.When)('clicks the select', () => {
11
+ cy.get('[data-test="dhis2-uicore-select"]').click();
12
+ });
13
+ (0, _cypressCucumberPreprocessor.Then)('the select dropdown should be in the correct position', () => {
14
+ cy.get('[data-test="hoverable-select-field"]').should('be.visible');
15
+ cy.get('[data-test="dhis2-uicore-singleselectoption"]').should($selectField => {
16
+ const {
17
+ top,
18
+ left
19
+ } = $selectField.offset();
20
+ expect(top).to.be.greaterThan(0);
21
+ expect(left).to.be.greaterThan(0);
22
+ });
23
+ });
package/build/cjs/single-select-field/features/can_show_conditionally.feature ADDED
@@ -0,0 +1,7 @@
1
+ Feature: Position of SelectField
2
+
3
+ Scenario: Keeps position when parent is hidden initially
4
+ Given a Select is hidden initially
5
+ When someone hovers over it to show it
6
+ And clicks the select
7
+ Then the select dropdown should be in the correct position
package/build/cjs/single-select-field/single-select-field.e2e.stories.js CHANGED
@@ -3,7 +3,8 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.WithoutOptions = exports.WithValidationText = exports.WithLoading = exports.WithLabelAndRequiredStatus = exports.WithLabel = exports.WithHelpText = exports.WithFilterable = exports.WithClearableAndSelectedOption = void 0;
6
+ exports.default = exports.WithoutOptions = exports.WithValidationText = exports.WithLoading = exports.WithLabelAndRequiredStatus = exports.WithLabel = exports.WithHiddenParent = exports.WithHelpText = exports.WithFilterable = exports.WithClearableAndSelectedOption = void 0;
7
+ var _style = _interopRequireDefault(require("styled-jsx/style"));
7
8
  var _react = _interopRequireDefault(require("react"));
8
9
  var _index = require("../index.js");
9
10
  var _index2 = require("./index.js");
@@ -86,4 +87,28 @@ const WithLoading = () => /*#__PURE__*/_react.default.createElement(_index2.Sing
86
87
  });
87
88
  exports.WithLoading = WithLoading;
88
89
  const WithoutOptions = () => /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, null);
89
- exports.WithoutOptions = WithoutOptions;
90
+ exports.WithoutOptions = WithoutOptions;
91
+ const WithHiddenParent = () => {
92
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
93
+ className: "jsx-3657609608" + " " + "container"
94
+ }, /*#__PURE__*/_react.default.createElement("div", {
95
+ className: "jsx-3657609608" + " " + "hoverSpan"
96
+ }, /*#__PURE__*/_react.default.createElement("span", {
97
+ className: "jsx-3657609608"
98
+ }, "Hover over me"), /*#__PURE__*/_react.default.createElement("div", {
99
+ className: "jsx-3657609608" + " " + "hiddenSelect"
100
+ }, /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, {
101
+ dataTest: "hoverable-select-field",
102
+ label: "Choose something",
103
+ onChange: () => {}
104
+ }, /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
105
+ value: "1",
106
+ label: "one"
107
+ }), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
108
+ value: "2",
109
+ label: "two"
110
+ }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
111
+ id: "3657609608"
112
+ }, [".container.jsx-3657609608{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;font-size:1rem;}", ".hiddenSelect.jsx-3657609608{display:none;}", ".hoverSpan.jsx-3657609608:hover .hiddenSelect.jsx-3657609608{display:block;}"]));
113
+ };
114
+ exports.WithHiddenParent = WithHiddenParent;
package/build/cjs/single-select-field/single-select-field.prod.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.WithHelpText = exports.StatusWarning = exports.StatusValid = exports.StatusError = exports.Required = exports.InputWidth = exports.DefaultLoadingText = exports.DefaultFilterPlaceholderAndNoMatchText = exports.DefaultEmpty = exports.DefaultClearText = exports.Default = void 0;
6
+ exports.default = exports.WithHelpText = exports.StatusWarning = exports.StatusValid = exports.StatusError = exports.StatusDisabled = exports.Required = exports.InputWidth = exports.DefaultLoadingText = exports.DefaultFilterPlaceholderAndNoMatchText = exports.DefaultEmpty = exports.DefaultClearText = exports.Default = void 0;
7
7
  var _uiConstants = require("@dhis2/ui-constants");
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _index = require("../index.js");
@@ -129,6 +129,12 @@ StatusError.args = {
129
129
  ...WithHelpText.args
130
130
  };
131
131
  StatusError.storyName = 'Status: Error';
132
+ const StatusDisabled = exports.StatusDisabled = Template.bind({});
133
+ StatusDisabled.args = {
134
+ disabled: true,
135
+ ...WithHelpText.args
136
+ };
137
+ StatusDisabled.storyName = 'Status: Disabled';
132
138
  const Required = exports.Required = Template.bind({});
133
139
  Required.args = {
134
140
  required: true
package/build/es/select/menu-wrapper.js CHANGED
@@ -15,7 +15,8 @@ const MenuWrapper = _ref => {
15
15
  } = _ref;
16
16
  return /*#__PURE__*/React.createElement(Layer, {
17
17
  onBackdropClick: onClick,
18
- transparent: true
18
+ transparent: true,
19
+ disablePortal: true
19
20
  }, /*#__PURE__*/React.createElement(Popper, {
20
21
  reference: selectRef,
21
22
  placement: "bottom-start",
package/build/es/single-select/single-select.prod.stories.js CHANGED
@@ -280,7 +280,8 @@ WithOptionsASelectionAndDisabled.args = {
280
280
  WithOptionsASelectionAndDisabled.storyName = 'With options, a selection and disabled';
281
281
  export const WithPrefix = WithOptionsTemplate.bind({});
282
282
  WithPrefix.args = {
283
- prefix: 'Prefix text'
283
+ prefix: 'Prefix text',
284
+ selected: '1'
284
285
  };
285
286
  export const WithPrefixAndSelection = WithOptionsTemplate.bind({});
286
287
  WithPrefixAndSelection.args = {
package/build/es/single-select-field/features/can_show_conditionally/index.js ADDED
@@ -0,0 +1,21 @@
1
+ import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
2
+ Given('a Select is hidden initially', () => {
3
+ cy.visitStory('SingleSelectField', 'With hidden parent');
4
+ });
5
+ When('someone hovers over it to show it', () => {
6
+ cy.get('.container .hiddenSelect').invoke('attr', 'style', 'display: block');
7
+ });
8
+ When('clicks the select', () => {
9
+ cy.get('[data-test="dhis2-uicore-select"]').click();
10
+ });
11
+ Then('the select dropdown should be in the correct position', () => {
12
+ cy.get('[data-test="hoverable-select-field"]').should('be.visible');
13
+ cy.get('[data-test="dhis2-uicore-singleselectoption"]').should($selectField => {
14
+ const {
15
+ top,
16
+ left
17
+ } = $selectField.offset();
18
+ expect(top).to.be.greaterThan(0);
19
+ expect(left).to.be.greaterThan(0);
20
+ });
21
+ });
package/build/es/single-select-field/features/can_show_conditionally.feature ADDED
@@ -0,0 +1,7 @@
1
+ Feature: Position of SelectField
2
+
3
+ Scenario: Keeps position when parent is hidden initially
4
+ Given a Select is hidden initially
5
+ When someone hovers over it to show it
6
+ And clicks the select
7
+ Then the select dropdown should be in the correct position
package/build/es/single-select-field/single-select-field.e2e.stories.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _JSXStyle from "styled-jsx/style";
1
2
  import React from 'react';
2
3
  import { SingleSelectOption } from '../index.js';
3
4
  import { SingleSelectField } from './index.js';
@@ -71,4 +72,27 @@ export const WithFilterable = () => /*#__PURE__*/React.createElement(SingleSelec
71
72
  export const WithLoading = () => /*#__PURE__*/React.createElement(SingleSelectField, {
72
73
  loading: true
73
74
  });
74
- export const WithoutOptions = () => /*#__PURE__*/React.createElement(SingleSelectField, null);
75
+ export const WithoutOptions = () => /*#__PURE__*/React.createElement(SingleSelectField, null);
76
+ export const WithHiddenParent = () => {
77
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
78
+ className: "jsx-3657609608" + " " + "container"
79
+ }, /*#__PURE__*/React.createElement("div", {
80
+ className: "jsx-3657609608" + " " + "hoverSpan"
81
+ }, /*#__PURE__*/React.createElement("span", {
82
+ className: "jsx-3657609608"
83
+ }, "Hover over me"), /*#__PURE__*/React.createElement("div", {
84
+ className: "jsx-3657609608" + " " + "hiddenSelect"
85
+ }, /*#__PURE__*/React.createElement(SingleSelectField, {
86
+ dataTest: "hoverable-select-field",
87
+ label: "Choose something",
88
+ onChange: () => {}
89
+ }, /*#__PURE__*/React.createElement(SingleSelectOption, {
90
+ value: "1",
91
+ label: "one"
92
+ }), /*#__PURE__*/React.createElement(SingleSelectOption, {
93
+ value: "2",
94
+ label: "two"
95
+ }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
96
+ id: "3657609608"
97
+ }, [".container.jsx-3657609608{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;font-size:1rem;}", ".hiddenSelect.jsx-3657609608{display:none;}", ".hoverSpan.jsx-3657609608:hover .hiddenSelect.jsx-3657609608{display:block;}"]));
98
+ };
package/build/es/single-select-field/single-select-field.prod.stories.js CHANGED
@@ -122,6 +122,12 @@ StatusError.args = {
122
122
  ...WithHelpText.args
123
123
  };
124
124
  StatusError.storyName = 'Status: Error';
125
+ export const StatusDisabled = Template.bind({});
126
+ StatusDisabled.args = {
127
+ disabled: true,
128
+ ...WithHelpText.args
129
+ };
130
+ StatusDisabled.storyName = 'Status: Disabled';
125
131
  export const Required = Template.bind({});
126
132
  Required.args = {
127
133
  required: true
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/select",
3
- "version": "9.11.2",
3
+ "version": "9.11.4",
4
4
  "description": "UI Select",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,21 +33,21 @@
33
33
  "styled-jsx": "^4"
34
34
  },
35
35
  "dependencies": {
36
- "@dhis2-ui/box": "9.11.2",
37
- "@dhis2-ui/button": "9.11.2",
38
- "@dhis2-ui/card": "9.11.2",
39
- "@dhis2-ui/checkbox": "9.11.2",
40
- "@dhis2-ui/chip": "9.11.2",
41
- "@dhis2-ui/field": "9.11.2",
42
- "@dhis2-ui/input": "9.11.2",
43
- "@dhis2-ui/layer": "9.11.2",
44
- "@dhis2-ui/loader": "9.11.2",
45
- "@dhis2-ui/popper": "9.11.2",
46
- "@dhis2-ui/status-icon": "9.11.2",
47
- "@dhis2-ui/tooltip": "9.11.2",
36
+ "@dhis2-ui/box": "9.11.4",
37
+ "@dhis2-ui/button": "9.11.4",
38
+ "@dhis2-ui/card": "9.11.4",
39
+ "@dhis2-ui/checkbox": "9.11.4",
40
+ "@dhis2-ui/chip": "9.11.4",
41
+ "@dhis2-ui/field": "9.11.4",
42
+ "@dhis2-ui/input": "9.11.4",
43
+ "@dhis2-ui/layer": "9.11.4",
44
+ "@dhis2-ui/loader": "9.11.4",
45
+ "@dhis2-ui/popper": "9.11.4",
46
+ "@dhis2-ui/status-icon": "9.11.4",
47
+ "@dhis2-ui/tooltip": "9.11.4",
48
48
  "@dhis2/prop-types": "^3.1.2",
49
- "@dhis2/ui-constants": "9.11.2",
50
- "@dhis2/ui-icons": "9.11.2",
49
+ "@dhis2/ui-constants": "9.11.4",
50
+ "@dhis2/ui-icons": "9.11.4",
51
51
  "classnames": "^2.3.1",
52
52
  "prop-types": "^15.7.2"
53
53
  },