@pingux/astro 2.143.0-alpha.1 → 2.143.0-alpha.2

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -7,6 +8,7 @@ import { universalFieldComponentTests } from '../../utils/testUtils/universalFor
 import SearchField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-radio-group';
+var testValue = 'Option';
 var testLabel = 'Test Label';
 var defaultProps = {
   'data-testid': testId,
@@ -16,6 +18,16 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(SearchField, _extends({}, defaultProps, props)));
 };
+var getAutocompleteComponent = function getAutocompleteComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(SearchField, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "1"
+  }, "Option 1"), ___EmotionJSX(Item, {
+    key: "2"
+  }, "Option 2"), ___EmotionJSX(Item, {
+    key: "3"
+  }, "Option 3")));
+};
 universalFieldComponentTests({
   renderComponent: function renderComponent(props) {
     return ___EmotionJSX(SearchField, _extends({}, defaultProps, props));
@@ -216,4 +228,124 @@ test('clear button should not be present is hasNoClearButton=true ', function ()
     hasNoClearButton: true
   });
   expect(screen.queryByRole('button')).not.toBeInTheDocument();
+});
+describe('Autocomplete mode', function () {
+  beforeAll(function () {
+    jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+      return 1000;
+    });
+    jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+      return 1000;
+    });
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
+    jest.spyOn(window.screen, 'width', 'get').mockImplementation(function () {
+      return 1024;
+    });
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+      cb(0);
+      return 0;
+    });
+    jest.useFakeTimers();
+  });
+  afterEach(function () {
+    jest.clearAllMocks();
+  });
+  test('default autocomplete search field', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = screen.getByLabelText(testLabel);
+    var label = screen.getByText(testLabel);
+    expect(search).toBeInstanceOf(HTMLInputElement);
+    expect(label).toBeInstanceOf(HTMLLabelElement);
+    expect(search).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+  });
+  test('autocomplete options appear on user input', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var control = screen.getByLabelText(testLabel);
+    userEvent.type(control, testValue);
+    expect(control).toHaveValue(testValue);
+    expect(screen.queryByText('Option 1')).toBeInTheDocument();
+    expect(screen.queryByText('Option 2')).toBeInTheDocument();
+    expect(screen.queryByText('Option 3')).toBeInTheDocument();
+    fireEvent.change(control, {
+      target: {
+        value: '3'
+      }
+    });
+    expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
+    expect(screen.queryByText('Option 3')).toBeInTheDocument();
+  });
+  test('Allow custom values', function () {
+    var onSubmit = jest.fn();
+    getAutocompleteComponent({
+      mode: 'autocomplete',
+      onSubmit: onSubmit
+    });
+    var control = screen.getByLabelText(testLabel);
+    userEvent.type(control, 'Custom Value{enter}');
+    expect(onSubmit).toHaveBeenCalledWith('Custom Value');
+  });
+  test('clear button works in autocomplete mode', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    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('Down arrow key open listbox popup', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = screen.getByLabelText(testLabel);
+    act(function () {
+      search.focus();
+    });
+    expect(search).toHaveFocus();
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    fireEvent.keyDown(search, {
+      key: 'ArrowDown'
+    });
+    act(function () {
+      jest.runAllTimers();
+    });
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+  });
+  test("No popup when there aren't any options", function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = screen.getByLabelText(testLabel);
+    act(function () {
+      search.focus();
+    });
+    expect(search).toHaveFocus();
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    userEvent.type(search, 'xyz');
+    act(function () {
+      jest.runAllTimers();
+    });
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+    expect(search).toHaveValue('xyz');
+  });
 });

package/lib/components/SearchField/SearchFieldBase.js

@@ -0,0 +1,79 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+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, { forwardRef } from 'react';
+import { useSearchField } from 'react-aria';
+import { useSearchFieldState } from 'react-stately';
+import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import { Box, Icon, IconButton, Input, Label } from '../..';
+import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'SearchField';
+export var SearchFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
+  var autocomplete = props.autocomplete,
+    hasAutoFocus = props.hasAutoFocus,
+    hasNoClearButton = props.hasNoClearButton,
+    icon = props.icon,
+    isExcludedFromTabOrder = props.isExcludedFromTabOrder,
+    label = props.label,
+    controlProps = props.controlProps,
+    iconProps = props.iconProps,
+    labelProps = props.labelProps;
+  usePropWarning(props, 'disabled', 'isDisabled');
+  var searchRef = useLocalOrForwardRef(ref);
+  var state = useSearchFieldState(props);
+  var _useSearchField = useSearchField(_objectSpread({
+      autoComplete: autocomplete,
+      autoFocus: hasAutoFocus,
+      excludeFromTabOrder: isExcludedFromTabOrder
+    }, props), state, searchRef),
+    raLabelProps = _useSearchField.labelProps,
+    raInputProps = _useSearchField.inputProps,
+    clearButtonProps = _useSearchField.clearButtonProps;
+  var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
+      labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
+      controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
+  var handleKeyDownEvent = function handleKeyDownEvent(e) {
+    var key = e.key;
+    if (key === 'Enter' || key === ' ') {
+      state.setValue('');
+    }
+  };
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.search.wrapper"
+  }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
+    variant: "forms.input.search",
+    ref: searchRef
+  }, fieldControlInputProps)), icon && ___EmotionJSX(Icon, _extends({
+    icon: icon,
+    variant: "forms.search.icon",
+    title: {
+      name: 'Search Icon'
+    }
+  }, iconProps)), !hasNoClearButton && state.value !== '' && ___EmotionJSX(IconButton, _extends({
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
+    color: "text.secondary",
+    variant: "searchClearButton"
+  }, clearButtonProps), ___EmotionJSX(Icon, {
+    icon: CloseIcon,
+    title: {
+      name: 'Close Icon'
+    }
+  }))));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.143.0-alpha.1",
+  "version": "2.143.0-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -99,6 +99,7 @@
     "@react-stately/toggle": "^3.8.5",
     "@react-stately/tree": "^3.7.4",
     "@react-stately/virtualizer": "~3.6.5",
+    "@react-types/combobox": "^3.13.8",
     "@react-types/slider": "^3.7.9",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/api": "^7.1.0",