@pingux/astro 1.31.0-alpha.5 → 1.31.0-alpha.7

package/lib/cjs/components/Chip/Chip.js

@@ -2,13 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -18,6 +30,8 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -36,6 +50,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 /**
  * Chip component.
  * Built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the
@@ -47,7 +65,18 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       textColor = props.textColor,
       textProps = props.textProps,
       label = props.label,
+      align = props.align,
       isUppercase = props.isUppercase;
+
+  var sx = _objectSpread({}, isUppercase && {
+    paddingBottom: '3px'
+  });
+
+  if (align) {
+    sx.position = 'absolute';
+    sx[align] = '15px';
+  }
+
   return (0, _react2.jsx)(_ChipContext.ChipContext.Provider, {
     value: {
       bg: bg
@@ -55,9 +84,7 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isRow: true,
     variant: "boxes.chip",
-    sx: isUppercase && {
-      paddingBottom: '3px'
-    },
+    sx: sx,
     ref: ref
   }, props), (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     variant: "label",
@@ -83,7 +110,10 @@ Chip.propTypes = {
   textProps: _propTypes["default"].shape({}),
 
   /** When true, display chip label as uppercase. */
-  isUppercase: _propTypes["default"].bool
+  isUppercase: _propTypes["default"].bool,
+
+  /** Alignment of chip relative to parent container. */
+  align: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left'])
 };
 Chip.defaultProps = {
   textColor: 'white',

package/lib/cjs/components/Chip/Chip.test.js

@@ -54,4 +54,12 @@ test('renders Chip component with uppercase', function () {
     isUppercase: isUppercase
   });
   expect(_react2.screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
+});
+test('renders Chip component with custom alignment', function () {
+  var align = 'right';
+  getComponent({
+    align: align
+  });
+  expect(_react2.screen.getByTestId(testId)).toHaveStyleRule('position', 'absolute');
+  expect(_react2.screen.getByTestId(testId)).toHaveStyleRule('right', '15px');
 });

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -26,7 +26,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSections = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
+exports["default"] = exports.WithSections = exports.RightAlignedChips = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
@@ -410,4 +410,86 @@ var ControlledMenu = function ControlledMenu() {
   });
 };
 
-exports.ControlledMenu = ControlledMenu;
+exports.ControlledMenu = ControlledMenu;
+
+var RightAlignedChips = function RightAlignedChips(args) {
+  var _useState13 = (0, _react.useState)({
+    name: 'Snail',
+    isSandbox: true
+  }),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      selectedEnvironment = _useState14[0],
+      setSelectedEnvironment = _useState14[1];
+
+  var envNode = (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref9) {
+      var name = _ref9.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  var items = [{
+    name: 'Default'
+  }, {
+    name: 'Kangaroo',
+    isSandbox: true
+  }, {
+    name: 'Snake',
+    isSandbox: true
+  }, {
+    name: 'Snail'
+  }, {
+    name: 'Slug',
+    isSandbox: true
+  }, {
+    name: 'Crow'
+  }, {
+    name: 'Dog'
+  }, {
+    name: 'Crab',
+    isSandbox: true
+  }, {
+    name: 'Fish',
+    isSandbox: true
+  }, {
+    name: 'Turtle',
+    isSandbox: true
+  }, {
+    name: 'Mouse'
+  }];
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], (0, _extends2["default"])({}, args, {
+    items: items,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref10) {
+    var name = _ref10.name,
+        isSandbox = _ref10.isSandbox;
+    return (0, _react2.jsx)(_index.Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40",
+      align: "right"
+    }) : null);
+  });
+};
+
+exports.RightAlignedChips = RightAlignedChips;

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -98,18 +98,22 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
   var buildRequirementsLine = function buildRequirementsLine(req) {
     return (0, _react2.jsx)(_Box["default"], {
+      role: "listitem",
       isRow: true,
       key: req.name,
       alignItems: "center",
-      width: "100%"
+      width: "100%",
+      as: "li"
     }, statusIconRender(req.status), (0, _react2.jsx)(_Text["default"], {
       variant: "bodyWeak"
     }, req.name));
   };
 
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    role: "list",
     p: "lg",
     gap: "md",
+    as: "ul",
     ref: ref
   }, others), (0, _map["default"])(requirements).call(requirements, function (req) {
     return buildRequirementsLine(req);

package/lib/cjs/components/RequirementsList/RequirementsList.test.js

@@ -63,7 +63,7 @@ test('base case requirements list', function () {
 
   var requirementsList = _react2.screen.getByTestId(testId);
 
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('empty variables requirements list', function () {
@@ -73,7 +73,7 @@ test('empty variables requirements list', function () {
 
   var requirementsList = _react2.screen.getByTestId(testId);
 
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('should render default status icon if such passed in props', function () {

package/lib/cjs/components/SearchField/SearchField.js

@@ -105,6 +105,14 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var handleKeyDownEvent = function handleKeyDownEvent(e) {
+    var key = e.key;
+
+    if (key === 'Enter' || key === ' ') {
+      state.setValue('');
+    }
+  };
+
   return (0, _react2.jsx)(_.Box, fieldContainerProps, label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, {
     variant: "forms.search.container"
   }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
@@ -116,6 +124,8 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "forms.search.icon",
     size: 22
   }, iconProps)), !hasNoClearButton && state.value !== '' && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
     sx: {
       position: 'absolute',
       top: 8,

package/lib/cjs/components/SearchField/SearchField.test.js

@@ -242,6 +242,33 @@ test('clear button should be present by default ', function () {
   });
   expect(_testWrapper.screen.getByRole('button')).toBeInTheDocument();
 });
+test('clear button should be keyboard accessible', function () {
+  getComponent();
+
+  var search = _testWrapper.screen.getByLabelText(testLabel);
+
+  _userEvent["default"].type(search, 'clear');
+
+  expect(search).toHaveValue('clear');
+
+  var clearButton = _testWrapper.screen.getByRole('button');
+
+  expect(clearButton).toHaveAttribute('tabindex', '0');
+  (0, _testWrapper.act)(function () {
+    clearButton.focus();
+  });
+  expect(clearButton).toHaveFocus();
+
+  _testWrapper.fireEvent.keyDown(clearButton, {
+    key: 'Enter'
+  });
+
+  _testWrapper.fireEvent.keyUp(clearButton, {
+    key: 'Enter'
+  });
+
+  expect(search).toHaveValue('');
+});
 test('clear button should not be present is hasNoClearButton=true ', function () {
   getComponent({
     value: 'test-value',

package/lib/components/Chip/Chip.js

@@ -1,4 +1,18 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ChipContext } from './ChipContext';
@@ -18,7 +32,18 @@ var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
       textColor = props.textColor,
       textProps = props.textProps,
       label = props.label,
+      align = props.align,
       isUppercase = props.isUppercase;
+
+  var sx = _objectSpread({}, isUppercase && {
+    paddingBottom: '3px'
+  });
+
+  if (align) {
+    sx.position = 'absolute';
+    sx[align] = '15px';
+  }
+
   return ___EmotionJSX(ChipContext.Provider, {
     value: {
       bg: bg
@@ -26,9 +51,7 @@ var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, ___EmotionJSX(Box, _extends({
     isRow: true,
     variant: "boxes.chip",
-    sx: isUppercase && {
-      paddingBottom: '3px'
-    },
+    sx: sx,
     ref: ref
   }, props), ___EmotionJSX(Text, _extends({
     variant: "label",
@@ -53,7 +76,10 @@ Chip.propTypes = {
   textProps: PropTypes.shape({}),
 
   /** When true, display chip label as uppercase. */
-  isUppercase: PropTypes.bool
+  isUppercase: PropTypes.bool,
+
+  /** Alignment of chip relative to parent container. */
+  align: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
 };
 Chip.defaultProps = {
   textColor: 'white',

package/lib/components/Chip/Chip.test.js

@@ -40,4 +40,12 @@ test('renders Chip component with uppercase', function () {
     isUppercase: isUppercase
   });
   expect(screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
+});
+test('renders Chip component with custom alignment', function () {
+  var align = 'right';
+  getComponent({
+    align: align
+  });
+  expect(screen.getByTestId(testId)).toHaveStyleRule('position', 'absolute');
+  expect(screen.getByTestId(testId)).toHaveStyleRule('right', '15px');
 });

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -359,4 +359,83 @@ export var ControlledMenu = function ControlledMenu() {
       bg: "neutral.40"
     }) : null);
   });
+};
+export var RightAlignedChips = function RightAlignedChips(args) {
+  var _useState13 = useState({
+    name: 'Snail',
+    isSandbox: true
+  }),
+      _useState14 = _slicedToArray(_useState13, 2),
+      selectedEnvironment = _useState14[0],
+      setSelectedEnvironment = _useState14[1];
+
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref9) {
+      var name = _ref9.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  var items = [{
+    name: 'Default'
+  }, {
+    name: 'Kangaroo',
+    isSandbox: true
+  }, {
+    name: 'Snake',
+    isSandbox: true
+  }, {
+    name: 'Snail'
+  }, {
+    name: 'Slug',
+    isSandbox: true
+  }, {
+    name: 'Crow'
+  }, {
+    name: 'Dog'
+  }, {
+    name: 'Crab',
+    isSandbox: true
+  }, {
+    name: 'Fish',
+    isSandbox: true
+  }, {
+    name: 'Turtle',
+    isSandbox: true
+  }, {
+    name: 'Mouse'
+  }];
+  return ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
+    items: items,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref10) {
+    var name = _ref10.name,
+        isSandbox = _ref10.isSandbox;
+    return ___EmotionJSX(Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40",
+      align: "right"
+    }) : null);
+  });
 };

package/lib/components/RequirementsList/RequirementsList.js

@@ -63,18 +63,22 @@ var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var buildRequirementsLine = function buildRequirementsLine(req) {
     return ___EmotionJSX(Box, {
+      role: "listitem",
       isRow: true,
       key: req.name,
       alignItems: "center",
-      width: "100%"
+      width: "100%",
+      as: "li"
     }, statusIconRender(req.status), ___EmotionJSX(Text, {
       variant: "bodyWeak"
     }, req.name));
   };
 
   return ___EmotionJSX(Box, _extends({
+    role: "list",
     p: "lg",
     gap: "md",
+    as: "ul",
     ref: ref
   }, others), _mapInstanceProperty(requirements).call(requirements, function (req) {
     return buildRequirementsLine(req);

package/lib/components/RequirementsList/RequirementsList.test.js

@@ -51,7 +51,7 @@ axeTest(getComponent);
 test('base case requirements list', function () {
   getComponent();
   var requirementsList = screen.getByTestId(testId);
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('empty variables requirements list', function () {
@@ -59,7 +59,7 @@ test('empty variables requirements list', function () {
     requirementsList: []
   });
   var requirementsList = screen.getByTestId(testId);
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('should render default status icon if such passed in props', function () {

package/lib/components/SearchField/SearchField.js

@@ -69,6 +69,14 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var handleKeyDownEvent = function handleKeyDownEvent(e) {
+    var key = e.key;
+
+    if (key === 'Enter' || key === ' ') {
+      state.setValue('');
+    }
+  };
+
   return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, {
     variant: "forms.search.container"
   }, ___EmotionJSX(Input, _extends({
@@ -80,6 +88,8 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.search.icon",
     size: 22
   }, iconProps)), !hasNoClearButton && state.value !== '' && ___EmotionJSX(IconButton, _extends({
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
     sx: {
       position: 'absolute',
       top: 8,

package/lib/components/SearchField/SearchField.test.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import SearchField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-radio-group';
@@ -179,6 +179,25 @@ test('clear button should be present by default ', function () {
   });
   expect(screen.getByRole('button')).toBeInTheDocument();
 });
+test('clear button should be keyboard accessible', function () {
+  getComponent();
+  var search = screen.getByLabelText(testLabel);
+  userEvent.type(search, 'clear');
+  expect(search).toHaveValue('clear');
+  var clearButton = screen.getByRole('button');
+  expect(clearButton).toHaveAttribute('tabindex', '0');
+  act(function () {
+    clearButton.focus();
+  });
+  expect(clearButton).toHaveFocus();
+  fireEvent.keyDown(clearButton, {
+    key: 'Enter'
+  });
+  fireEvent.keyUp(clearButton, {
+    key: 'Enter'
+  });
+  expect(search).toHaveValue('');
+});
 test('clear button should not be present is hasNoClearButton=true ', function () {
   getComponent({
     value: 'test-value',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.31.0-alpha.5",
+  "version": "1.31.0-alpha.7",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",