@dhis2-ui/select 10.12.4 → 10.12.6

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

@@ -17,6 +17,10 @@ const WithClearButton = () => {
   return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
     clearable: true,
     name: "simple",
+    onClear: () => setSelected({
+      label: '',
+      value: ''
+    }),
     selected: selected,
     onChange: setSelected,
     options: _options.fiveOptions

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

@@ -153,7 +153,9 @@ function SimpleSingleSelect(_ref2) {
     listBoxRef,
     focussedOptionIndex,
     setFocussedOptionIndex,
-    selectFocussedOption
+    selectFocussedOption,
+    clearable,
+    onClear
   });
   const handleKeyDownOnFilterInput = (0, _index4.useHandleKeyPressOnFilterInput)({
     value: selectedValue,

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

@@ -2,9 +2,10 @@
 
 require("@testing-library/jest-dom");
 var _react = require("@testing-library/react");
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 var _simpleSingleSelect = require("./simple-single-select.js");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
 describe('<SimpleSingleSelect />', () => {
   beforeAll(() => {
     const consoleError = console.error;
@@ -620,6 +621,93 @@ describe('<SimpleSingleSelect />', () => {
       label: 'Foo'
     });
   });
+  describe('Clear the selected value when ESCAPE is pressed', () => {
+    it('should clear the selected value when closed, clearable and user presses Escape', () => {
+      function TestSelect() {
+        const [selected, setSelected] = (0, _react2.useState)({
+          label: 'Foo',
+          value: 'foo'
+        });
+        return /*#__PURE__*/_react2.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+          clearable: true,
+          name: "simple",
+          selected: selected,
+          onClear: () => setSelected({
+            label: '',
+            value: ''
+          }),
+          options: [{
+            value: '',
+            label: 'None'
+          }, {
+            value: 'foo',
+            label: 'Foo'
+          }, {
+            value: 'bar',
+            label: 'Bar'
+          }]
+        });
+      }
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(TestSelect, null));
+
+      // menu is closed
+      expect(_react.screen.queryByRole('listbox')).toBeNull();
+
+      // there are selected value
+      expect(_react.screen.getByText('Foo')).toBeInTheDocument();
+
+      // press Escape once to clear the selected value
+      _react.fireEvent.keyDown(_react.screen.getByRole('combobox'), {
+        key: 'Escape'
+      });
+
+      // the value is cleared
+      expect(_react.screen.queryByText('Foo')).toBeNull();
+    });
+    it('should clear the selected value when open and ESCAPE is pressed twice', () => {
+      const onClear = jest.fn();
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+        clearable: true,
+        name: "simple",
+        selected: {
+          value: 'bar',
+          label: 'Bar'
+        },
+        onChange: () => {},
+        onClear: onClear,
+        clearText: "Clear",
+        options: [{
+          value: '',
+          label: 'None'
+        }, {
+          value: 'foo',
+          label: 'Foo'
+        }, {
+          value: 'bar',
+          label: 'Bar'
+        }]
+      }));
+      const comboBox = _react.screen.getByRole('combobox');
+
+      // open the menu
+      expect(comboBox.attributes.getNamedItem('aria-expanded').value).toBe('false');
+      _react.fireEvent.click(comboBox);
+      expect(comboBox.attributes.getNamedItem('aria-expanded').value).toBe('true');
+
+      // The first escape should close the combo BUT not call clear
+      _react.fireEvent.keyDown(_react.screen.getByRole('combobox'), {
+        key: 'Escape'
+      });
+      expect(comboBox.attributes.getNamedItem('aria-expanded').value).toBe('false');
+      expect(onClear).not.toHaveBeenCalledWith();
+
+      // The second escape should call clear
+      _react.fireEvent.keyDown(_react.screen.getByRole('combobox'), {
+        key: 'Escape'
+      });
+      expect(onClear).toHaveBeenCalledWith();
+    });
+  });
   it('should not select the next option when closed, disabled and user presses ArrowDown', () => {
     const onChange = jest.fn();
     (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {

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

@@ -45,7 +45,9 @@ function useHandleKeyPressOnCombobox(_ref2) {
     focussedOptionIndex,
     setFocussedOptionIndex,
     selectFocussedOption,
-    onChange
+    onChange,
+    clearable,
+    onClear
   } = _ref2;
   const {
     onTyping,
@@ -136,6 +138,10 @@ function useHandleKeyPressOnCombobox(_ref2) {
       closeMenu();
       return;
     }
+    if (!expanded && clearable && key === 'Escape') {
+      onClear === null || onClear === void 0 ? void 0 : onClear();
+      return;
+    }
     if (!expanded && (key === ' ' && !typing || key === 'Enter' || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey)) {
       openMenu();
       return;

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

@@ -9,6 +9,10 @@ export const WithClearButton = () => {
   return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
     clearable: true,
     name: "simple",
+    onClear: () => setSelected({
+      label: '',
+      value: ''
+    }),
     selected: selected,
     onChange: setSelected,
     options: fiveOptions

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

@@ -144,7 +144,9 @@ export function SimpleSingleSelect(_ref2) {
     listBoxRef,
     focussedOptionIndex,
     setFocussedOptionIndex,
-    selectFocussedOption
+    selectFocussedOption,
+    clearable,
+    onClear
   });
   const handleKeyDownOnFilterInput = useHandleKeyPressOnFilterInput({
     value: selectedValue,

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

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { render, fireEvent, screen } from '@testing-library/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { SimpleSingleSelect } from './simple-single-select.js';
 describe('<SimpleSingleSelect />', () => {
   beforeAll(() => {
@@ -617,6 +617,93 @@ describe('<SimpleSingleSelect />', () => {
       label: 'Foo'
     });
   });
+  describe('Clear the selected value when ESCAPE is pressed', () => {
+    it('should clear the selected value when closed, clearable and user presses Escape', () => {
+      function TestSelect() {
+        const [selected, setSelected] = useState({
+          label: 'Foo',
+          value: 'foo'
+        });
+        return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+          clearable: true,
+          name: "simple",
+          selected: selected,
+          onClear: () => setSelected({
+            label: '',
+            value: ''
+          }),
+          options: [{
+            value: '',
+            label: 'None'
+          }, {
+            value: 'foo',
+            label: 'Foo'
+          }, {
+            value: 'bar',
+            label: 'Bar'
+          }]
+        });
+      }
+      render(/*#__PURE__*/React.createElement(TestSelect, null));
+
+      // menu is closed
+      expect(screen.queryByRole('listbox')).toBeNull();
+
+      // there are selected value
+      expect(screen.getByText('Foo')).toBeInTheDocument();
+
+      // press Escape once to clear the selected value
+      fireEvent.keyDown(screen.getByRole('combobox'), {
+        key: 'Escape'
+      });
+
+      // the value is cleared
+      expect(screen.queryByText('Foo')).toBeNull();
+    });
+    it('should clear the selected value when open and ESCAPE is pressed twice', () => {
+      const onClear = jest.fn();
+      render(/*#__PURE__*/React.createElement(SimpleSingleSelect, {
+        clearable: true,
+        name: "simple",
+        selected: {
+          value: 'bar',
+          label: 'Bar'
+        },
+        onChange: () => {},
+        onClear: onClear,
+        clearText: "Clear",
+        options: [{
+          value: '',
+          label: 'None'
+        }, {
+          value: 'foo',
+          label: 'Foo'
+        }, {
+          value: 'bar',
+          label: 'Bar'
+        }]
+      }));
+      const comboBox = screen.getByRole('combobox');
+
+      // open the menu
+      expect(comboBox.attributes.getNamedItem('aria-expanded').value).toBe('false');
+      fireEvent.click(comboBox);
+      expect(comboBox.attributes.getNamedItem('aria-expanded').value).toBe('true');
+
+      // The first escape should close the combo BUT not call clear
+      fireEvent.keyDown(screen.getByRole('combobox'), {
+        key: 'Escape'
+      });
+      expect(comboBox.attributes.getNamedItem('aria-expanded').value).toBe('false');
+      expect(onClear).not.toHaveBeenCalledWith();
+
+      // The second escape should call clear
+      fireEvent.keyDown(screen.getByRole('combobox'), {
+        key: 'Escape'
+      });
+      expect(onClear).toHaveBeenCalledWith();
+    });
+  });
   it('should not select the next option when closed, disabled and user presses ArrowDown', () => {
     const onChange = jest.fn();
     render(/*#__PURE__*/React.createElement(SimpleSingleSelect, {

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

@@ -39,7 +39,9 @@ export function useHandleKeyPressOnCombobox(_ref2) {
     focussedOptionIndex,
     setFocussedOptionIndex,
     selectFocussedOption,
-    onChange
+    onChange,
+    clearable,
+    onClear
   } = _ref2;
   const {
     onTyping,
@@ -130,6 +132,10 @@ export function useHandleKeyPressOnCombobox(_ref2) {
       closeMenu();
       return;
     }
+    if (!expanded && clearable && key === 'Escape') {
+      onClear === null || onClear === void 0 ? void 0 : onClear();
+      return;
+    }
     if (!expanded && (key === ' ' && !typing || key === 'Enter' || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey)) {
       openMenu();
       return;

package/package.json

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