@dhis2-ui/select 10.10.0-alpha.1 → 10.10.0-alpha.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 (8) hide show
  1. package/build/cjs/simple-single-select/__stories__/WithScrollingParent.js +36 -0
  2. package/build/cjs/simple-single-select/simple-single-select.prod.stories.js +7 -0
  3. package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js +9 -3
  4. package/build/es/simple-single-select/__stories__/WithScrollingParent.js +27 -0
  5. package/build/es/simple-single-select/simple-single-select.prod.stories.js +2 -1
  6. package/build/es/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js +9 -3
  7. package/package.json +15 -15
  8. package/types/index.d.ts +1 -1
package/build/cjs/simple-single-select/__stories__/WithScrollingParent.js ADDED
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.WithScrollingParent = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _simpleSingleSelect = require("../simple-single-select.js");
9
+ var _options = require("./options.js");
10
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
11
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
+ const WithScrollingParent = () => {
13
+ const [selected, setSelected] = (0, _react.useState)(null);
14
+ const [selected2, setSelected2] = (0, _react.useState)(null);
15
+ return /*#__PURE__*/_react.default.createElement("div", {
16
+ style: {
17
+ overflow: 'scroll',
18
+ height: '200px'
19
+ }
20
+ }, /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
21
+ tabIndex: "1",
22
+ inputMaxHeight: "50px",
23
+ name: "simple",
24
+ selected: selected,
25
+ onChange: setSelected,
26
+ options: _options.fiveOptions
27
+ }), /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
28
+ tabIndex: "2",
29
+ inputMaxHeight: "50px",
30
+ name: "simple2",
31
+ selected: selected2,
32
+ onChange: setSelected2,
33
+ options: _options.fiveOptions
34
+ }), /*#__PURE__*/_react.default.createElement("div", null, "Some text to force a window with scrolling (to validate the KeyDown on the combo box does not scroll the whole window)", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "Some text to force scrolling", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "Some text to force scrolling"));
35
+ };
36
+ exports.WithScrollingParent = WithScrollingParent;
package/build/cjs/simple-single-select/simple-single-select.prod.stories.js CHANGED
@@ -165,6 +165,12 @@ Object.defineProperty(exports, "WithRTL", {
165
165
  return _WithRTL.WithRTL;
166
166
  }
167
167
  });
168
+ Object.defineProperty(exports, "WithScrollingParent", {
169
+ enumerable: true,
170
+ get: function () {
171
+ return _WithScrollingParent.WithScrollingParent;
172
+ }
173
+ });
168
174
  Object.defineProperty(exports, "WithSelection", {
169
175
  enumerable: true,
170
176
  get: function () {
@@ -222,6 +228,7 @@ var _WithNoMatchText = require("./__stories__/WithNoMatchText.js");
222
228
  var _DefaultPosition = require("./__stories__/DefaultPosition.js");
223
229
  var _FlippedPosition = require("./__stories__/FlippedPosition.js");
224
230
  var _ShiftedIntoView = require("./__stories__/ShiftedIntoView.js");
231
+ var _WithScrollingParent = require("./__stories__/WithScrollingParent.js");
225
232
  var _default = exports.default = {
226
233
  title: 'Simple Single Select',
227
234
  component: _simpleSingleSelect.SimpleSingleSelect
package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js CHANGED
@@ -98,13 +98,13 @@ function useHandleKeyPressOnCombobox(_ref2) {
98
98
  focussedOptionIndex,
99
99
  setFocussedOptionIndex
100
100
  });
101
- const handleKeyPress = (0, _react.useCallback)(_ref3 => {
102
- let {
101
+ const handleKeyPress = (0, _react.useCallback)(event => {
102
+ const {
103
103
  key,
104
104
  altKey,
105
105
  ctrlKey,
106
106
  metaKey
107
- } = _ref3;
107
+ } = event;
108
108
  if (disabled || loading) {
109
109
  return;
110
110
  }
@@ -123,6 +123,12 @@ function useHandleKeyPressOnCombobox(_ref2) {
123
123
  closeMenu();
124
124
  return;
125
125
  }
126
+
127
+ // ! This is necessary for cases where the parent window is scrollable
128
+ // ! otherwise the ArrowDown/Up would change the combo but also scroll the window
129
+ if (key === 'ArrowDown' || key === 'ArrowUp' || key === ' ') {
130
+ event.preventDefault();
131
+ }
126
132
  if (expanded && (key === 'Escape' || key === 'Enter' || key === ' ' && !typing || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey)) {
127
133
  if (value !== options[focussedOptionIndex].value) {
128
134
  selectFocussedOption();
package/build/es/simple-single-select/__stories__/WithScrollingParent.js ADDED
@@ -0,0 +1,27 @@
1
+ import React, { useState } from 'react';
2
+ import { SimpleSingleSelect } from '../simple-single-select.js';
3
+ import { fiveOptions } from './options.js';
4
+ export const WithScrollingParent = () => {
5
+ const [selected, setSelected] = useState(null);
6
+ const [selected2, setSelected2] = useState(null);
7
+ return /*#__PURE__*/React.createElement("div", {
8
+ style: {
9
+ overflow: 'scroll',
10
+ height: '200px'
11
+ }
12
+ }, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
13
+ tabIndex: "1",
14
+ inputMaxHeight: "50px",
15
+ name: "simple",
16
+ selected: selected,
17
+ onChange: setSelected,
18
+ options: fiveOptions
19
+ }), /*#__PURE__*/React.createElement(SimpleSingleSelect, {
20
+ tabIndex: "2",
21
+ inputMaxHeight: "50px",
22
+ name: "simple2",
23
+ selected: selected2,
24
+ onChange: setSelected2,
25
+ options: fiveOptions
26
+ }), /*#__PURE__*/React.createElement("div", null, "Some text to force a window with scrolling (to validate the KeyDown on the combo box does not scroll the whole window)", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Some text to force scrolling", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Some text to force scrolling"));
27
+ };
package/build/es/simple-single-select/simple-single-select.prod.stories.js CHANGED
@@ -33,4 +33,5 @@ export { WithFilterField } from './__stories__/WithFilterField.js';
33
33
  export { WithNoMatchText } from './__stories__/WithNoMatchText.js';
34
34
  export { DefaultPosition } from './__stories__/DefaultPosition.js';
35
35
  export { FlippedPosition } from './__stories__/FlippedPosition.js';
36
- export { ShiftedIntoView } from './__stories__/ShiftedIntoView.js';
36
+ export { ShiftedIntoView } from './__stories__/ShiftedIntoView.js';
37
+ export { WithScrollingParent } from './__stories__/WithScrollingParent.js';
package/build/es/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js CHANGED
@@ -92,13 +92,13 @@ export function useHandleKeyPressOnCombobox(_ref2) {
92
92
  focussedOptionIndex,
93
93
  setFocussedOptionIndex
94
94
  });
95
- const handleKeyPress = useCallback(_ref3 => {
96
- let {
95
+ const handleKeyPress = useCallback(event => {
96
+ const {
97
97
  key,
98
98
  altKey,
99
99
  ctrlKey,
100
100
  metaKey
101
- } = _ref3;
101
+ } = event;
102
102
  if (disabled || loading) {
103
103
  return;
104
104
  }
@@ -117,6 +117,12 @@ export function useHandleKeyPressOnCombobox(_ref2) {
117
117
  closeMenu();
118
118
  return;
119
119
  }
120
+
121
+ // ! This is necessary for cases where the parent window is scrollable
122
+ // ! otherwise the ArrowDown/Up would change the combo but also scroll the window
123
+ if (key === 'ArrowDown' || key === 'ArrowUp' || key === ' ') {
124
+ event.preventDefault();
125
+ }
120
126
  if (expanded && (key === 'Escape' || key === 'Enter' || key === ' ' && !typing || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey)) {
121
127
  if (value !== options[focussedOptionIndex].value) {
122
128
  selectFocussedOption();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/select",
3
- "version": "10.10.0-alpha.1",
3
+ "version": "10.10.0-alpha.2",
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": "10.10.0-alpha.1",
37
- "@dhis2-ui/button": "10.10.0-alpha.1",
38
- "@dhis2-ui/card": "10.10.0-alpha.1",
39
- "@dhis2-ui/checkbox": "10.10.0-alpha.1",
40
- "@dhis2-ui/chip": "10.10.0-alpha.1",
41
- "@dhis2-ui/field": "10.10.0-alpha.1",
42
- "@dhis2-ui/input": "10.10.0-alpha.1",
43
- "@dhis2-ui/layer": "10.10.0-alpha.1",
44
- "@dhis2-ui/loader": "10.10.0-alpha.1",
45
- "@dhis2-ui/popper": "10.10.0-alpha.1",
46
- "@dhis2-ui/status-icon": "10.10.0-alpha.1",
47
- "@dhis2-ui/tooltip": "10.10.0-alpha.1",
36
+ "@dhis2-ui/box": "10.10.0-alpha.2",
37
+ "@dhis2-ui/button": "10.10.0-alpha.2",
38
+ "@dhis2-ui/card": "10.10.0-alpha.2",
39
+ "@dhis2-ui/checkbox": "10.10.0-alpha.2",
40
+ "@dhis2-ui/chip": "10.10.0-alpha.2",
41
+ "@dhis2-ui/field": "10.10.0-alpha.2",
42
+ "@dhis2-ui/input": "10.10.0-alpha.2",
43
+ "@dhis2-ui/layer": "10.10.0-alpha.2",
44
+ "@dhis2-ui/loader": "10.10.0-alpha.2",
45
+ "@dhis2-ui/popper": "10.10.0-alpha.2",
46
+ "@dhis2-ui/status-icon": "10.10.0-alpha.2",
47
+ "@dhis2-ui/tooltip": "10.10.0-alpha.2",
48
48
  "@dhis2/prop-types": "^3.1.2",
49
- "@dhis2/ui-constants": "10.10.0-alpha.1",
50
- "@dhis2/ui-icons": "10.10.0-alpha.1",
49
+ "@dhis2/ui-constants": "10.10.0-alpha.2",
50
+ "@dhis2/ui-icons": "10.10.0-alpha.2",
51
51
  "classnames": "^2.3.1",
52
52
  "prop-types": "^15.7.2"
53
53
  },
package/types/index.d.ts CHANGED
@@ -323,7 +323,7 @@ type SimpleSingleSelectCustomOptionProp = (props: {
323
323
 
324
324
  export interface SimpleSingleSelectProps {
325
325
  /** necessary for IDs that are required for accessibility **/
326
- idPrefix: string.isRequired
326
+ name: string.isRequired
327
327
 
328
328
  /** An array of options **/
329
329
  options: Array<{