@dhis2-ui/select 10.10.0-alpha.1 → 10.10.0-alpha.3

package/build/cjs/simple-single-select/__stories__/WithMultipleSelectsAndScrollableParent.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithMultipleSelectsAndScrollableParent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.js");
+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); }
+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; }
+// simulating when the first option value is not empty string
+const fiveOptions = [{
+  label: 'None',
+  value: 'unknown'
+}, ..._options.fiveOptions.slice(1)];
+const WithMultipleSelectsAndScrollableParent = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  const [selected2, setSelected2] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      overflow: 'scroll',
+      height: '250px'
+    }
+  }, "Selected value from first select: ", JSON.stringify(selected), /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    inputMaxHeight: "50px",
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  }), /*#__PURE__*/_react.default.createElement("br", null), "Selected value from second select: ", JSON.stringify(selected2), /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    inputMaxHeight: "50px",
+    name: "simple",
+    selected: selected2,
+    onChange: setSelected2,
+    options: fiveOptions,
+    clearable: true,
+    onClear: () => setSelected2(null)
+  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("input", {
+    type: "text",
+    placeholder: "just another field"
+  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__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), "Some more text..", /*#__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"));
+};
+exports.WithMultipleSelectsAndScrollableParent = WithMultipleSelectsAndScrollableParent;

package/build/cjs/simple-single-select/__stories__/WithScrollingParent.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithScrollingParent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.js");
+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); }
+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; }
+const WithScrollingParent = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  const [selected2, setSelected2] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      overflow: 'scroll',
+      height: '200px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    tabIndex: "1",
+    inputMaxHeight: "50px",
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: _options.fiveOptions
+  }), /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    tabIndex: "2",
+    inputMaxHeight: "50px",
+    name: "simple2",
+    selected: selected2,
+    onChange: setSelected2,
+    options: _options.fiveOptions
+  }), /*#__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"));
+};
+exports.WithScrollingParent = WithScrollingParent;

package/build/cjs/simple-single-select/selected-value/clear-button.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ClearButton = ClearButtonWithTooltip;
+exports.ClearButton = ClearButton;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
-var _tooltip = require("@dhis2-ui/tooltip");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../../locales/index.js"));
@@ -21,7 +20,16 @@ function ClearButton(_ref) {
     "aria-label": _index.default.t('{{clearText}}', {
       clearText
     }),
+    title: _index.default.t('{{clearText}}', {
+      clearText
+    }),
     "data-test": dataTest,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === 'space') {
+        // otherwise, Enter propagates to parent menu and opens the combo
+        e.stopPropagation();
+      }
+    },
     onClick: e => {
       e.stopPropagation();
       onClear();
@@ -47,28 +55,4 @@ ClearButton.propTypes = {
   clearText: _propTypes.default.string.isRequired,
   onClear: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string
-};
-function ClearButtonWithTooltip(_ref2) {
-  let {
-    onClear,
-    clearText,
-    dataTest
-  } = _ref2;
-  const clearButton = /*#__PURE__*/_react.default.createElement(ClearButton, {
-    onClear: onClear,
-    dataTest: dataTest,
-    clearText: clearText
-  });
-  if (!clearText) {
-    return clearButton;
-  }
-  return /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
-    openDelay: 500,
-    content: clearText
-  }, clearButton);
-}
-ClearButtonWithTooltip.propTypes = {
-  clearText: _propTypes.default.string.isRequired,
-  onClear: _propTypes.default.func.isRequired,
-  dataTest: _propTypes.default.string
 };

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

@@ -119,6 +119,9 @@ function SimpleSingleSelect(_ref2) {
     if (selectedOptionIndex !== focussedOptionIndex) {
       setFocussedOptionIndex(selectedOptionIndex);
     }
+    if (selectedOptionIndex === -1) {
+      setFocussedOptionIndex(0);
+    }
     setExpanded(true);
   }, [options, selectedValue, focussedOptionIndex, setFocussedOptionIndex]);
   const toggleMenu = (0, _react.useCallback)(() => {

package/build/cjs/simple-single-select/simple-single-select.prod.stories.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "WithManyOptions", {
     return _WithManyOptions.WithManyOptions;
   }
 });
+Object.defineProperty(exports, "WithMultipleSelectsAndScrollableParent", {
+  enumerable: true,
+  get: function () {
+    return _WithMultipleSelectsAndScrollableParent.WithMultipleSelectsAndScrollableParent;
+  }
+});
 Object.defineProperty(exports, "WithNoMatchText", {
   enumerable: true,
   get: function () {
@@ -222,6 +228,7 @@ var _WithNoMatchText = require("./__stories__/WithNoMatchText.js");
 var _DefaultPosition = require("./__stories__/DefaultPosition.js");
 var _FlippedPosition = require("./__stories__/FlippedPosition.js");
 var _ShiftedIntoView = require("./__stories__/ShiftedIntoView.js");
+var _WithMultipleSelectsAndScrollableParent = require("./__stories__/WithMultipleSelectsAndScrollableParent.js");
 var _default = exports.default = {
   title: 'Simple Single Select',
   component: _simpleSingleSelect.SimpleSingleSelect

package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js

@@ -98,13 +98,13 @@ function useHandleKeyPressOnCombobox(_ref2) {
     focussedOptionIndex,
     setFocussedOptionIndex
   });
-  const handleKeyPress = (0, _react.useCallback)(_ref3 => {
-    let {
+  const handleKeyPress = (0, _react.useCallback)(event => {
+    const {
       key,
       altKey,
       ctrlKey,
       metaKey
-    } = _ref3;
+    } = event;
     if (disabled || loading) {
       return;
     }
@@ -123,6 +123,12 @@ function useHandleKeyPressOnCombobox(_ref2) {
       closeMenu();
       return;
     }
+
+    // ! This is necessary for cases where the parent window is scrollable
+    // ! otherwise the ArrowDown/Up would change the combo but also scroll the window
+    if (key === 'ArrowDown' || key === 'ArrowUp' || key === ' ') {
+      event.preventDefault();
+    }
     if (expanded && (key === 'Escape' || key === 'Enter' || key === ' ' && !typing || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey)) {
       if (value !== options[focussedOptionIndex].value) {
         selectFocussedOption();

package/build/es/simple-single-select/__stories__/WithMultipleSelectsAndScrollableParent.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions as originalOptions } from './options.js';
+
+// simulating when the first option value is not empty string
+const fiveOptions = [{
+  label: 'None',
+  value: 'unknown'
+}, ...originalOptions.slice(1)];
+export const WithMultipleSelectsAndScrollableParent = () => {
+  const [selected, setSelected] = useState(null);
+  const [selected2, setSelected2] = useState(null);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: 'scroll',
+      height: '250px'
+    }
+  }, "Selected value from first select: ", JSON.stringify(selected), /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    inputMaxHeight: "50px",
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  }), /*#__PURE__*/React.createElement("br", null), "Selected value from second select: ", JSON.stringify(selected2), /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    inputMaxHeight: "50px",
+    name: "simple",
+    selected: selected2,
+    onChange: setSelected2,
+    options: fiveOptions,
+    clearable: true,
+    onClear: () => setSelected2(null)
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "just another field"
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__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), "Some more text..", /*#__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"));
+};

package/build/es/simple-single-select/__stories__/WithScrollingParent.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const WithScrollingParent = () => {
+  const [selected, setSelected] = useState(null);
+  const [selected2, setSelected2] = useState(null);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: 'scroll',
+      height: '200px'
+    }
+  }, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    tabIndex: "1",
+    inputMaxHeight: "50px",
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  }), /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    tabIndex: "2",
+    inputMaxHeight: "50px",
+    name: "simple2",
+    selected: selected2,
+    onChange: setSelected2,
+    options: fiveOptions
+  }), /*#__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"));
+};

package/build/es/simple-single-select/selected-value/clear-button.js

@@ -1,6 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
 import { colors, theme } from '@dhis2/ui-constants';
-import { Tooltip } from '@dhis2-ui/tooltip';
 import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from '../../locales/index.js';
@@ -14,7 +13,16 @@ function ClearButton(_ref) {
     "aria-label": i18n.t('{{clearText}}', {
       clearText
     }),
+    title: i18n.t('{{clearText}}', {
+      clearText
+    }),
     "data-test": dataTest,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === 'space') {
+        // otherwise, Enter propagates to parent menu and opens the combo
+        e.stopPropagation();
+      }
+    },
     onClick: e => {
       e.stopPropagation();
       onClear();
@@ -41,28 +49,4 @@ ClearButton.propTypes = {
   onClear: PropTypes.func.isRequired,
   dataTest: PropTypes.string
 };
-function ClearButtonWithTooltip(_ref2) {
-  let {
-    onClear,
-    clearText,
-    dataTest
-  } = _ref2;
-  const clearButton = /*#__PURE__*/React.createElement(ClearButton, {
-    onClear: onClear,
-    dataTest: dataTest,
-    clearText: clearText
-  });
-  if (!clearText) {
-    return clearButton;
-  }
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    openDelay: 500,
-    content: clearText
-  }, clearButton);
-}
-ClearButtonWithTooltip.propTypes = {
-  clearText: PropTypes.string.isRequired,
-  onClear: PropTypes.func.isRequired,
-  dataTest: PropTypes.string
-};
-export { ClearButtonWithTooltip as ClearButton };
+export { ClearButton };

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

@@ -110,6 +110,9 @@ export function SimpleSingleSelect(_ref2) {
     if (selectedOptionIndex !== focussedOptionIndex) {
       setFocussedOptionIndex(selectedOptionIndex);
     }
+    if (selectedOptionIndex === -1) {
+      setFocussedOptionIndex(0);
+    }
     setExpanded(true);
   }, [options, selectedValue, focussedOptionIndex, setFocussedOptionIndex]);
   const toggleMenu = useCallback(() => {

package/build/es/simple-single-select/simple-single-select.prod.stories.js

@@ -33,4 +33,5 @@ export { WithFilterField } from './__stories__/WithFilterField.js';
 export { WithNoMatchText } from './__stories__/WithNoMatchText.js';
 export { DefaultPosition } from './__stories__/DefaultPosition.js';
 export { FlippedPosition } from './__stories__/FlippedPosition.js';
-export { ShiftedIntoView } from './__stories__/ShiftedIntoView.js';
+export { ShiftedIntoView } from './__stories__/ShiftedIntoView.js';
+export { WithMultipleSelectsAndScrollableParent } from './__stories__/WithMultipleSelectsAndScrollableParent.js';

package/build/es/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js

@@ -92,13 +92,13 @@ export function useHandleKeyPressOnCombobox(_ref2) {
     focussedOptionIndex,
     setFocussedOptionIndex
   });
-  const handleKeyPress = useCallback(_ref3 => {
-    let {
+  const handleKeyPress = useCallback(event => {
+    const {
       key,
       altKey,
       ctrlKey,
       metaKey
-    } = _ref3;
+    } = event;
     if (disabled || loading) {
       return;
     }
@@ -117,6 +117,12 @@ export function useHandleKeyPressOnCombobox(_ref2) {
       closeMenu();
       return;
     }
+
+    // ! This is necessary for cases where the parent window is scrollable
+    // ! otherwise the ArrowDown/Up would change the combo but also scroll the window
+    if (key === 'ArrowDown' || key === 'ArrowUp' || key === ' ') {
+      event.preventDefault();
+    }
     if (expanded && (key === 'Escape' || key === 'Enter' || key === ' ' && !typing || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey)) {
       if (value !== options[focussedOptionIndex].value) {
         selectFocussedOption();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "10.10.0-alpha.1",
+    "version": "10.10.0-alpha.3",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,21 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "10.10.0-alpha.1",
-        "@dhis2-ui/button": "10.10.0-alpha.1",
-        "@dhis2-ui/card": "10.10.0-alpha.1",
-        "@dhis2-ui/checkbox": "10.10.0-alpha.1",
-        "@dhis2-ui/chip": "10.10.0-alpha.1",
-        "@dhis2-ui/field": "10.10.0-alpha.1",
-        "@dhis2-ui/input": "10.10.0-alpha.1",
-        "@dhis2-ui/layer": "10.10.0-alpha.1",
-        "@dhis2-ui/loader": "10.10.0-alpha.1",
-        "@dhis2-ui/popper": "10.10.0-alpha.1",
-        "@dhis2-ui/status-icon": "10.10.0-alpha.1",
-        "@dhis2-ui/tooltip": "10.10.0-alpha.1",
+        "@dhis2-ui/box": "10.10.0-alpha.3",
+        "@dhis2-ui/button": "10.10.0-alpha.3",
+        "@dhis2-ui/card": "10.10.0-alpha.3",
+        "@dhis2-ui/checkbox": "10.10.0-alpha.3",
+        "@dhis2-ui/chip": "10.10.0-alpha.3",
+        "@dhis2-ui/field": "10.10.0-alpha.3",
+        "@dhis2-ui/input": "10.10.0-alpha.3",
+        "@dhis2-ui/layer": "10.10.0-alpha.3",
+        "@dhis2-ui/loader": "10.10.0-alpha.3",
+        "@dhis2-ui/popper": "10.10.0-alpha.3",
+        "@dhis2-ui/status-icon": "10.10.0-alpha.3",
+        "@dhis2-ui/tooltip": "10.10.0-alpha.3",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.10.0-alpha.1",
-        "@dhis2/ui-icons": "10.10.0-alpha.1",
+        "@dhis2/ui-constants": "10.10.0-alpha.3",
+        "@dhis2/ui-icons": "10.10.0-alpha.3",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/types/index.d.ts

@@ -323,7 +323,7 @@ type SimpleSingleSelectCustomOptionProp = (props: {
 
 export interface SimpleSingleSelectProps {
     /** necessary for IDs that are required for accessibility **/
-    idPrefix: string.isRequired
+    name: string.isRequired
 
     /** An array of options **/
     options: Array<{