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

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

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _collections = require("@react-stately/collections");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
@@ -10,6 +11,7 @@ var _universalFormSubmitTest = require("../../utils/testUtils/universalFormSubmi
 var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 var testId = 'test-radio-group';
+var testValue = 'Option';
 var testLabel = 'Test Label';
 var defaultProps = {
   'data-testid': testId,
@@ -19,6 +21,16 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
 };
+var getAutocompleteComponent = function getAutocompleteComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+    key: "1"
+  }, "Option 1"), (0, _react2.jsx)(_collections.Item, {
+    key: "2"
+  }, "Option 2"), (0, _react2.jsx)(_collections.Item, {
+    key: "3"
+  }, "Option 3")));
+};
 (0, _universalFormSubmitTest.universalFieldComponentTests)({
   renderComponent: function renderComponent(props) {
     return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props));
@@ -219,4 +231,124 @@ test('clear button should not be present is hasNoClearButton=true ', function ()
     hasNoClearButton: true
   });
   expect(_testWrapper.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 = _testWrapper.screen.getByLabelText(testLabel);
+    var label = _testWrapper.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 = _testWrapper.screen.getByLabelText(testLabel);
+    _userEvent["default"].type(control, testValue);
+    expect(control).toHaveValue(testValue);
+    expect(_testWrapper.screen.queryByText('Option 1')).toBeInTheDocument();
+    expect(_testWrapper.screen.queryByText('Option 2')).toBeInTheDocument();
+    expect(_testWrapper.screen.queryByText('Option 3')).toBeInTheDocument();
+    _testWrapper.fireEvent.change(control, {
+      target: {
+        value: '3'
+      }
+    });
+    expect(_testWrapper.screen.queryByText('Option 1')).not.toBeInTheDocument();
+    expect(_testWrapper.screen.queryByText('Option 2')).not.toBeInTheDocument();
+    expect(_testWrapper.screen.queryByText('Option 3')).toBeInTheDocument();
+  });
+  test('Allow custom values', function () {
+    var onSubmit = jest.fn();
+    getAutocompleteComponent({
+      mode: 'autocomplete',
+      onSubmit: onSubmit
+    });
+    var control = _testWrapper.screen.getByLabelText(testLabel);
+    _userEvent["default"].type(control, 'Custom Value{enter}');
+    expect(onSubmit).toHaveBeenCalledWith('Custom Value');
+  });
+  test('clear button works in autocomplete mode', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    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('Down arrow key open listbox popup', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = _testWrapper.screen.getByLabelText(testLabel);
+    (0, _testWrapper.act)(function () {
+      search.focus();
+    });
+    expect(search).toHaveFocus();
+    expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+    _testWrapper.fireEvent.keyDown(search, {
+      key: 'ArrowDown'
+    });
+    (0, _testWrapper.act)(function () {
+      jest.runAllTimers();
+    });
+    expect(_testWrapper.screen.getByRole('listbox')).toBeInTheDocument();
+    expect(_testWrapper.screen.getByText('Option 1')).toBeInTheDocument();
+  });
+  test("No popup when there aren't any options", function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = _testWrapper.screen.getByLabelText(testLabel);
+    (0, _testWrapper.act)(function () {
+      search.focus();
+    });
+    expect(search).toHaveFocus();
+    expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+    _userEvent["default"].type(search, 'xyz');
+    (0, _testWrapper.act)(function () {
+      jest.runAllTimers();
+    });
+    expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(_testWrapper.screen.queryByText('Option 1')).not.toBeInTheDocument();
+    expect(search).toHaveValue('xyz');
+  });
 });

package/lib/cjs/components/SearchField/SearchFieldBase.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SearchFieldProps, SearchItem } from '../../types';
+export declare const SearchFieldBase: React.ForwardRefExoticComponent<SearchFieldProps<SearchItem> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,91 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchFieldBase = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _reactStately = require("react-stately");
+var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
+var _ = require("../..");
+var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
+var displayName = 'SearchField';
+var SearchFieldBase = /*#__PURE__*/(0, _react.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;
+  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+  var searchRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var state = (0, _reactStately.useSearchFieldState)(props);
+  var _useSearchField = (0, _reactAria.useSearchField)(_objectSpread({
+      autoComplete: autocomplete,
+      autoFocus: hasAutoFocus,
+      excludeFromTabOrder: isExcludedFromTabOrder
+    }, props), state, searchRef),
+    raLabelProps = _useSearchField.labelProps,
+    raInputProps = _useSearchField.inputProps,
+    clearButtonProps = _useSearchField.clearButtonProps;
+  var _useField = (0, _hooks.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 (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "forms.search.wrapper"
+  }, fieldControlWrapperProps), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
+    variant: "forms.input.search",
+    ref: searchRef
+  }, fieldControlInputProps)), icon && (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
+    icon: icon,
+    variant: "forms.search.icon",
+    title: {
+      name: 'Search Icon'
+    }
+  }, iconProps)), !hasNoClearButton && state.value !== '' && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
+    color: "text.secondary",
+    variant: "searchClearButton"
+  }, clearButtonProps), (0, _react2.jsx)(_.Icon, {
+    icon: _CloseIcon["default"],
+    title: {
+      name: 'Close Icon'
+    }
+  }))));
+});
+exports.SearchFieldBase = SearchFieldBase;

package/lib/cjs/components/Stepper/Step.js

@@ -39,7 +39,7 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: className
   }), status === COMPLETED && !isHovered ? (0, _react2.jsx)(_index.Icon, {
     icon: _CheckBoldIcon["default"],
-    size: 23,
+    size: "sm",
     color: "text.primaryLight",
     title: {
       name: 'Check Bold Icon'

package/lib/cjs/components/Stepper/Stepper.styles.js

@@ -91,6 +91,7 @@ var stepBase = {
   fontSize: '17px',
   fontWeight: 3,
   cursor: 'pointer',
+  fontFamily: 'standard',
   '&[aria-expanded="true"]': {
     backgroundColor: 'active',
     borderColor: 'active',

package/lib/cjs/components/Switch/Switch.js

@@ -13,6 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -24,21 +25,30 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * **Note: Requires a label. It's recommended to use `SwitchField` for a complete solution.**
  */var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var inputProps = props.inputProps;
+  var inputProps = props.inputProps,
+    isSelected = props.isSelected;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
+      isSelected: isSelected
+    }),
+    classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    className: classNames,
     variant: "forms.switch.container"
   }, props), (0, _react2.jsx)(_reactAria.VisuallyHidden, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "input"
   }, inputProps, {
     ref: ref
   }))), (0, _react2.jsx)(_Box["default"], {
+    className: classNames,
     variant: "forms.switch.thumbContainer"
   }, (0, _react2.jsx)(_Box["default"], {
+    className: classNames,
     variant: "forms.switch.thumb"
   })));
 });
 Switch.propTypes = {
-  inputProps: _propTypes["default"].shape({})
+  inputProps: _propTypes["default"].shape({}),
+  isSelected: _propTypes["default"].bool
 };
 Switch.displayName = 'Switch';
 var _default = Switch;

package/lib/cjs/components/Switch/Switch.styles.js

@@ -58,7 +58,7 @@ var thumb = {
   transitionTimingFunction: 'ease-out',
   transitionDuration: '0.1s',
   transform: 'translateX(0)',
-  'label.is-selected &': {
+  '&.is-selected': {
     transform: 'translateX(20px)',
     borderColor: 'active'
   }

package/lib/cjs/components/SwitchField/SwitchField.js

@@ -61,8 +61,9 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       'aria-label': others['aria-label'] || 'switch-field'
     }), state, switchRef),
     inputProps = _useSwitch.inputProps;
+  var isSelected = (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false;
   var statusClasses = {
-    isSelected: (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false
+    isSelected: isSelected
   };
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({
       statusClasses: statusClasses
@@ -77,7 +78,10 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     'aria-controls': others['aria-controls'],
     'aria-errormessage': others['aria-errormessage']
   };
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps, {
+    alignSelf: "top",
+    alignItems: "start"
+  }), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
     variant: "forms.switch.label"
   }, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, fieldControlWrapperProps, {
     sx: _objectSpread(_objectSpread({}, fieldControlWrapperProps.sx), {}, {
@@ -85,6 +89,7 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     })
   }), (0, _react2.jsx)(_.Switch, (0, _extends2["default"])({
     ref: switchRef,
+    isSelected: isSelected,
     inputProps: fieldControlInputProps,
     name: name
   }, unhandledAriaProps, (0, _omit["default"])(others, 'data-pendo-id', 'aria-label')))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {

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

@@ -59,13 +59,25 @@ var _default = {
 };
 exports["default"] = _default;
 var tabs = [{
-  name: 'Tab 1',
-  children: (0, _react2.jsx)(_index.Text, null, "Tab 1 body")
+  name: 'Overview',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }, {
-  name: 'Tab 2',
-  children: (0, _react2.jsx)(_index.Text, null, "Tab 2 body")
+  name: 'Configuration',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Resources',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Policies',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Attribute Mappings',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Access',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }, {
-  name: 'Tab 3',
+  name: 'Integration',
   children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }];
 var customTabs = [{
@@ -96,7 +108,11 @@ var Controlled = function Controlled() {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     currentTab = _useState2[0],
     setCurrentTab = _useState2[1];
-  return (0, _react2.jsx)(_index.Tabs, {
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      maxWidth: '500px'
+    }
+  }, (0, _react2.jsx)(_index.Tabs, {
     selectedKey: currentTab,
     onSelectionChange: setCurrentTab,
     items: tabs
@@ -106,7 +122,7 @@ var Controlled = function Controlled() {
       title: item.name,
       textValue: item.name
     }, item.children);
-  });
+  }));
 };
 exports.Controlled = Controlled;
 var Centered = function Centered() {

package/lib/cjs/components/Text/Text.stories.d.ts

@@ -3,5 +3,6 @@ import { TextProps } from '../../types';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<TextProps>;
+export declare const Onyx: StoryFn<TextProps>;
 export declare const CustomWidth: StoryFn;
 export declare const CustomStyle: StoryFn;