@dhis2-ui/select 9.11.1 → 9.11.3

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/select/menu-wrapper.js +2 -1
  2. package/build/cjs/single-select-field/features/can_show_conditionally/index.js +23 -0
  3. package/build/cjs/single-select-field/features/can_show_conditionally.feature +7 -0
  4. package/build/cjs/single-select-field/single-select-field.e2e.stories.js +27 -2
  5. package/build/es/select/menu-wrapper.js +2 -1
  6. package/build/es/single-select-field/features/can_show_conditionally/index.js +21 -0
  7. package/build/es/single-select-field/features/can_show_conditionally.feature +7 -0
  8. package/build/es/single-select-field/single-select-field.e2e.stories.js +25 -1
  9. 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-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/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-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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/select",
3
- "version": "9.11.1",
3
+ "version": "9.11.3",
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.1",
37
- "@dhis2-ui/button": "9.11.1",
38
- "@dhis2-ui/card": "9.11.1",
39
- "@dhis2-ui/checkbox": "9.11.1",
40
- "@dhis2-ui/chip": "9.11.1",
41
- "@dhis2-ui/field": "9.11.1",
42
- "@dhis2-ui/input": "9.11.1",
43
- "@dhis2-ui/layer": "9.11.1",
44
- "@dhis2-ui/loader": "9.11.1",
45
- "@dhis2-ui/popper": "9.11.1",
46
- "@dhis2-ui/status-icon": "9.11.1",
47
- "@dhis2-ui/tooltip": "9.11.1",
36
+ "@dhis2-ui/box": "9.11.3",
37
+ "@dhis2-ui/button": "9.11.3",
38
+ "@dhis2-ui/card": "9.11.3",
39
+ "@dhis2-ui/checkbox": "9.11.3",
40
+ "@dhis2-ui/chip": "9.11.3",
41
+ "@dhis2-ui/field": "9.11.3",
42
+ "@dhis2-ui/input": "9.11.3",
43
+ "@dhis2-ui/layer": "9.11.3",
44
+ "@dhis2-ui/loader": "9.11.3",
45
+ "@dhis2-ui/popper": "9.11.3",
46
+ "@dhis2-ui/status-icon": "9.11.3",
47
+ "@dhis2-ui/tooltip": "9.11.3",
48
48
  "@dhis2/prop-types": "^3.1.2",
49
- "@dhis2/ui-constants": "9.11.1",
50
- "@dhis2/ui-icons": "9.11.1",
49
+ "@dhis2/ui-constants": "9.11.3",
50
+ "@dhis2/ui-icons": "9.11.3",
51
51
  "classnames": "^2.3.1",
52
52
  "prop-types": "^15.7.2"
53
53
  },