@pingux/astro 1.21.0-alpha.0 → 1.21.0-alpha.3

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -62,7 +62,7 @@ var _Loader = _interopRequireDefault(require("../Loader"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["controlProps", "containerProps", "hasAutoFocus", "helperText", "isDisabled", "isReadOnly", "isOpen", "label", "labelProps", "loadingState", "status", "style", "inputRef", "inputProps", "triggerRef", "triggerProps", "menuTrigger", "onInputChange", "onLoadMore", "onOpenChange", "onSelectionChange", "wrapperProps"];
+var _excluded = ["controlProps", "containerProps", "hasAutoFocus", "helperText", "isDisabled", "isReadOnly", "isOpen", "label", "labelProps", "loadingState", "status", "style", "inputWrapperRef", "inputRef", "inputProps", "triggerRef", "triggerProps", "menuTrigger", "onInputChange", "onLoadMore", "onOpenChange", "onSelectionChange", "wrapperProps"];
 
 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); }
 
@@ -85,6 +85,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       loadingState = props.loadingState,
       status = props.status,
       style = props.style,
+      inputWrapperRef = props.inputWrapperRef,
       inputRef = props.inputRef,
       inputProps = props.inputProps,
       triggerRef = props.triggerRef,
@@ -188,6 +189,9 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: inputRef,
     slots: {
       inContainer: button
+    },
+    wrapperProps: {
+      ref: inputWrapperRef
     }
   }))));
 });
@@ -203,6 +207,7 @@ ComboBoxInput.propTypes = {
   label: _propTypes["default"].node,
   labelProps: _propTypes["default"].shape({}),
   loadingState: _propTypes["default"].oneOf((0, _values["default"])(_loadingStates["default"])),
+  inputWrapperRef: _propTypes["default"].shape({}),
   inputRef: _propTypes["default"].shape({}),
   triggerProps: _propTypes["default"].shape({}),
   triggerRef: _propTypes["default"].shape({}),

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -160,6 +160,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var buttonRef = (0, _react.useRef)();
   var listBoxRef = (0, _react.useRef)();
   var inputRef = (0, _react.useRef)();
+  var inputWrapperRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
@@ -228,7 +229,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       otherListBoxProps = (0, _objectWithoutProperties2["default"])(listBoxProps, _excluded);
 
   var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
-    targetRef: inputRef,
+    targetRef: inputWrapperRef,
     overlayRef: popoverRef,
     scrollRef: listBoxRef,
     placement: "".concat(direction, " end"),
@@ -259,12 +260,12 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var onResize = (0, _react.useCallback)(function () {
     /* istanbul ignore next */
-    if (inputRef.current) {
-      setMenuWidth(inputRef.current.offsetWidth);
+    if (inputWrapperRef.current) {
+      setMenuWidth(inputWrapperRef.current.offsetWidth);
     }
-  }, [inputRef, setMenuWidth]);
+  }, [inputWrapperRef, setMenuWidth]);
   (0, _utils.useResizeObserver)({
-    ref: inputRef,
+    ref: inputWrapperRef,
     onResize: onResize
   });
   (0, _utils.useLayoutEffect)(onResize, [onResize]);
@@ -300,6 +301,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isOpen: state.isOpen,
     inputProps: inputProps,
     labelProps: labelProps,
+    inputWrapperRef: inputWrapperRef,
     inputRef: inputRef,
     triggerProps: buttonProps,
     triggerRef: buttonRef,

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

@@ -46,6 +46,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@testing-library/react");
+
 var _jestAxe = require("jest-axe");
 
 var _i18n = require("@react-aria/i18n");
@@ -58,7 +60,7 @@ var _index = require("../../index");
 
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 
-var _react2 = require("@emotion/react");
+var _react3 = 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); }
 
@@ -66,7 +68,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context7, _context8; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context7 = ownKeys(Object(source), !0)).call(_context7, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var items = [{
   name: 'Aardvark',
@@ -90,8 +92,8 @@ var getComponent = function getComponent() {
       _ref$renderFn = _ref.renderFn,
       renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
 
-  return renderFn((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, defaultProps, props), function (item) {
-    return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({}, item, {
+  return renderFn((0, _react3.jsx)(_index.OverlayProvider, null, (0, _react3.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, defaultProps, props), function (item) {
+    return (0, _react3.jsx)(_index.Item, (0, _extends2["default"])({}, item, {
       key: item.id,
       "data-id": item.name
     }), item.name);
@@ -114,12 +116,12 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
       return startsWith(item.name, filterValue);
     });
   }, [startsWith, filterValue]);
-  return (0, _react2.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, defaultProps, {
+  return (0, _react3.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, defaultProps, {
     items: filteredItems,
     inputValue: filterValue,
     onInputChange: setFilterValue
   }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react3.jsx)(_index.Item, {
       id: item.id
     }, item.name);
   });
@@ -158,7 +160,7 @@ var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
     setSelectedKey(key);
   };
 
-  return (0, _react2.jsx)(_index.ComboBoxField, {
+  return (0, _react3.jsx)(_index.ComboBoxField, {
     label: "Example label",
     defaultItems: options,
     inputValue: inputValue,
@@ -167,7 +169,7 @@ var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
     onSelectionChange: onSelectionChange,
     hasAddOption: true
   }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react3.jsx)(_index.Item, {
       key: item.name
     }, item.name);
   });
@@ -530,7 +532,7 @@ test('should be able to use controlled filtering', /*#__PURE__*/(0, _asyncToGene
     while (1) {
       switch (_context2.prev = _context2.next) {
         case 0:
-          (0, _testWrapper.render)((0, _react2.jsx)(ComboBoxWithCustomFilter, null));
+          (0, _testWrapper.render)((0, _react3.jsx)(ComboBoxWithCustomFilter, null));
           input = _testWrapper.screen.queryByRole('combobox'); // Should list all without filterable input
 
           _userEvent["default"].type(input, '{arrowdown}');
@@ -637,6 +639,63 @@ test('should show in input "textValue" if provided', /*#__PURE__*/(0, _asyncToGe
     }
   }, _callee3);
 })));
+test('option list should be opened on scroll input value', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+  var options, otherItems, input;
+  return _regenerator["default"].wrap(function _callee4$(_context5) {
+    while (1) {
+      switch (_context5.prev = _context5.next) {
+        case 0:
+          otherItems = [{
+            name: 'Short item name one',
+            id: '1'
+          }, {
+            name: 'Short item name two',
+            id: '2'
+          }, {
+            name: 'Short item name three',
+            id: '3'
+          }, {
+            name: 'This is very very very long item name',
+            id: '4'
+          }];
+          getComponent({
+            defaultItems: otherItems
+          });
+          input = _testWrapper.screen.queryByRole('combobox');
+
+          _userEvent["default"].type(input, '{arrowdown}');
+
+          options = _testWrapper.screen.queryAllByRole('option');
+          expect(options).toHaveLength(otherItems.length);
+
+          _userEvent["default"].type(input, 'This is very very very long item name');
+
+          _react2.fireEvent.scroll(input, {
+            target: {
+              scrollX: 10
+            }
+          });
+
+          options = _testWrapper.screen.queryAllByRole('option');
+          expect(options.length).toBe(1);
+          expect(options[0]).toHaveTextContent(otherItems[3].name);
+
+          _react2.fireEvent.scroll(window, {
+            target: {
+              scrollX: 10
+            }
+          });
+
+          options = _testWrapper.screen.queryAllByRole('option');
+          expect(options.length).toBe(0);
+
+        case 14:
+        case "end":
+          return _context5.stop();
+      }
+    }
+  }, _callee4);
+})));
 describe('loadingState', function () {
   it('combobox should not render a loader if menu is not open', function () {
     var _getComponent = getComponent({
@@ -1004,7 +1063,7 @@ test('onSelectionChange works properly with custom value', function () {
   expect(onSelectionChange).toHaveBeenCalledWith('');
 });
 test('add option shows when "hasAddOption" is provided', function () {
-  (0, _testWrapper.render)((0, _react2.jsx)(ComboBoxWithAddOption, null));
+  (0, _testWrapper.render)((0, _react3.jsx)(ComboBoxWithAddOption, null));
 
   var input = _testWrapper.screen.queryByRole('combobox');
 
@@ -1025,7 +1084,7 @@ test('add option shows when "hasAddOption" is provided', function () {
   expect(option).toHaveTextContent("ADD: ".concat(inputValue));
 });
 test('if "hasAddOption" is provided, then custom value is added to listbox on blur', function () {
-  (0, _testWrapper.render)((0, _react2.jsx)(ComboBoxWithAddOption, null));
+  (0, _testWrapper.render)((0, _react3.jsx)(ComboBoxWithAddOption, null));
 
   var input = _testWrapper.screen.queryByRole('combobox');
 
@@ -1049,26 +1108,26 @@ test('if "hasAddOption" is provided, then custom value is added to listbox on bl
 
   expect(options[options.length - 1]).toHaveTextContent(inputValue);
 });
-test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
   var _getComponent6, container, results;
 
-  return _regenerator["default"].wrap(function _callee4$(_context5) {
+  return _regenerator["default"].wrap(function _callee5$(_context6) {
     while (1) {
-      switch (_context5.prev = _context5.next) {
+      switch (_context6.prev = _context6.next) {
         case 0:
           jest.useRealTimers();
           _getComponent6 = getComponent(), container = _getComponent6.container;
-          _context5.next = 4;
+          _context6.next = 4;
           return (0, _jestAxe.axe)(container);
 
         case 4:
-          results = _context5.sent;
+          results = _context6.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context5.stop();
+          return _context6.stop();
       }
     }
-  }, _callee4);
+  }, _callee5);
 })));

package/lib/cjs/styles/forms/input.js

@@ -179,8 +179,10 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   borderWidth: 1,
   flexDirection: 'row!important',
   flexWrap: 'wrap',
-  left: 3,
-  p: 10,
+  left: 2,
+  pt: 6,
+  pr: 10,
+  pb: 5,
   pl: 12,
   '&.has-no-status-indicator': {
     left: 0
@@ -193,14 +195,14 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
     position: 'absolute',
     bg: 'active',
     width: 3,
-    top: 0,
+    top: -1,
     left: -3,
-    bottom: 0
+    bottom: -1
   },
   '> input': {
     border: 'none',
     flex: 1,
-    height: 30,
+    height: 27,
     lineHeight: '100%',
     p: 5,
     '&.is-focused': {

package/lib/cjs/styles/forms/switch.js

@@ -1,12 +1,37 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+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
 });
 
 exports.thumbContainer = exports.thumb = exports.label = exports.container = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _buttons = require("../variants/buttons");
+
+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 label = {
   alignItems: 'center',
   fontSize: 'md',
@@ -33,12 +58,7 @@ var thumbContainer = {
     bg: 'active',
     borderColor: 'active'
   },
-  '.is-focused &': {
-    boxShadow: 'focus'
-  },
-  '&:focus': {
-    outline: 'none'
-  }
+  '.is-focused &, &:focus': _objectSpread({}, _buttons.defaultFocus)
 };
 exports.thumbContainer = thumbContainer;
 var thumb = {

package/lib/cjs/styles/variants/boxes.js

@@ -168,7 +168,8 @@ var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
 
 var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
   py: 3,
-  pr: 0
+  pr: 0,
+  my: 3
 });
 
 var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {

package/lib/cjs/styles/variants/buttons.js

@@ -22,7 +22,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = void 0;
+exports.defaultFocus = exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
@@ -73,6 +73,7 @@ var defaultFocus = {
   outlineColor: 'active',
   outlineOffset: '4px'
 };
+exports.defaultFocus = defaultFocus;
 var navItemButton = {
   textDecoration: 'none',
   outline: 'none',

package/lib/components/ComboBox/ComboBoxInput.js

@@ -12,7 +12,7 @@ import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["controlProps", "containerProps", "hasAutoFocus", "helperText", "isDisabled", "isReadOnly", "isOpen", "label", "labelProps", "loadingState", "status", "style", "inputRef", "inputProps", "triggerRef", "triggerProps", "menuTrigger", "onInputChange", "onLoadMore", "onOpenChange", "onSelectionChange", "wrapperProps"];
+var _excluded = ["controlProps", "containerProps", "hasAutoFocus", "helperText", "isDisabled", "isReadOnly", "isOpen", "label", "labelProps", "loadingState", "status", "style", "inputWrapperRef", "inputRef", "inputProps", "triggerRef", "triggerProps", "menuTrigger", "onInputChange", "onLoadMore", "onOpenChange", "onSelectionChange", "wrapperProps"];
 
 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; }
 
@@ -42,6 +42,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
       loadingState = props.loadingState,
       status = props.status,
       style = props.style,
+      inputWrapperRef = props.inputWrapperRef,
       inputRef = props.inputRef,
       inputProps = props.inputProps,
       triggerRef = props.triggerRef,
@@ -147,6 +148,9 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputRef,
     slots: {
       inContainer: button
+    },
+    wrapperProps: {
+      ref: inputWrapperRef
     }
   }))));
 });
@@ -162,6 +166,7 @@ ComboBoxInput.propTypes = {
   label: PropTypes.node,
   labelProps: PropTypes.shape({}),
   loadingState: PropTypes.oneOf(_Object$values(loadingStates)),
+  inputWrapperRef: PropTypes.shape({}),
   inputRef: PropTypes.shape({}),
   triggerProps: PropTypes.shape({}),
   triggerRef: PropTypes.shape({}),

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -113,6 +113,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var buttonRef = useRef();
   var listBoxRef = useRef();
   var inputRef = useRef();
+  var inputWrapperRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
@@ -181,7 +182,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       otherListBoxProps = _objectWithoutProperties(listBoxProps, _excluded);
 
   var _useOverlayPosition = useOverlayPosition({
-    targetRef: inputRef,
+    targetRef: inputWrapperRef,
     overlayRef: popoverRef,
     scrollRef: listBoxRef,
     placement: "".concat(direction, " end"),
@@ -212,12 +213,12 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var onResize = useCallback(function () {
     /* istanbul ignore next */
-    if (inputRef.current) {
-      setMenuWidth(inputRef.current.offsetWidth);
+    if (inputWrapperRef.current) {
+      setMenuWidth(inputWrapperRef.current.offsetWidth);
     }
-  }, [inputRef, setMenuWidth]);
+  }, [inputWrapperRef, setMenuWidth]);
   useResizeObserver({
-    ref: inputRef,
+    ref: inputWrapperRef,
     onResize: onResize
   });
   useLayoutEffect(onResize, [onResize]);
@@ -254,6 +255,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     isOpen: state.isOpen,
     inputProps: inputProps,
     labelProps: labelProps,
+    inputWrapperRef: inputWrapperRef,
     inputRef: inputRef,
     triggerProps: buttonProps,
     triggerRef: buttonRef,

package/lib/components/ComboBoxField/ComboBoxField.test.js

@@ -18,9 +18,10 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 
 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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context7, _context8; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(source), !0)).call(_context7, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState, useMemo } from 'react';
+import { fireEvent } from '@testing-library/react';
 import { axe } from 'jest-axe';
 import { useFilter } from '@react-aria/i18n';
 import userEvent from '@testing-library/user-event';
@@ -509,6 +510,56 @@ test('should show in input "textValue" if provided', /*#__PURE__*/_asyncToGenera
     }
   }, _callee3);
 })));
+test('option list should be opened on scroll input value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+  var options, otherItems, input;
+  return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+    while (1) {
+      switch (_context5.prev = _context5.next) {
+        case 0:
+          otherItems = [{
+            name: 'Short item name one',
+            id: '1'
+          }, {
+            name: 'Short item name two',
+            id: '2'
+          }, {
+            name: 'Short item name three',
+            id: '3'
+          }, {
+            name: 'This is very very very long item name',
+            id: '4'
+          }];
+          getComponent({
+            defaultItems: otherItems
+          });
+          input = screen.queryByRole('combobox');
+          userEvent.type(input, '{arrowdown}');
+          options = screen.queryAllByRole('option');
+          expect(options).toHaveLength(otherItems.length);
+          userEvent.type(input, 'This is very very very long item name');
+          fireEvent.scroll(input, {
+            target: {
+              scrollX: 10
+            }
+          });
+          options = screen.queryAllByRole('option');
+          expect(options.length).toBe(1);
+          expect(options[0]).toHaveTextContent(otherItems[3].name);
+          fireEvent.scroll(window, {
+            target: {
+              scrollX: 10
+            }
+          });
+          options = screen.queryAllByRole('option');
+          expect(options.length).toBe(0);
+
+        case 14:
+        case "end":
+          return _context5.stop();
+      }
+    }
+  }, _callee4);
+})));
 describe('loadingState', function () {
   it('combobox should not render a loader if menu is not open', function () {
     var _getComponent = getComponent({
@@ -858,26 +909,26 @@ test('if "hasAddOption" is provided, then custom value is added to listbox on bl
   var options = screen.queryAllByRole('option');
   expect(options[options.length - 1]).toHaveTextContent(inputValue);
 });
-test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
   var _getComponent6, container, results;
 
-  return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+  return _regeneratorRuntime.wrap(function _callee5$(_context6) {
     while (1) {
-      switch (_context5.prev = _context5.next) {
+      switch (_context6.prev = _context6.next) {
         case 0:
           jest.useRealTimers();
           _getComponent6 = getComponent(), container = _getComponent6.container;
-          _context5.next = 4;
+          _context6.next = 4;
           return axe(container);
 
         case 4:
-          results = _context5.sent;
+          results = _context6.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context5.stop();
+          return _context6.stop();
       }
     }
-  }, _callee4);
+  }, _callee5);
 })));

package/lib/styles/forms/input.js

@@ -157,8 +157,10 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   borderWidth: 1,
   flexDirection: 'row!important',
   flexWrap: 'wrap',
-  left: 3,
-  p: 10,
+  left: 2,
+  pt: 6,
+  pr: 10,
+  pb: 5,
   pl: 12,
   '&.has-no-status-indicator': {
     left: 0
@@ -171,14 +173,14 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
     position: 'absolute',
     bg: 'active',
     width: 3,
-    top: 0,
+    top: -1,
     left: -3,
-    bottom: 0
+    bottom: -1
   },
   '> input': {
     border: 'none',
     flex: 1,
-    height: 30,
+    height: 27,
     lineHeight: '100%',
     p: 5,
     '&.is-focused': {

package/lib/styles/forms/switch.js

@@ -1,3 +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 _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 { defaultFocus } from '../variants/buttons';
 export var label = {
   alignItems: 'center',
   fontSize: 'md',
@@ -22,12 +37,7 @@ export var thumbContainer = {
     bg: 'active',
     borderColor: 'active'
   },
-  '.is-focused &': {
-    boxShadow: 'focus'
-  },
-  '&:focus': {
-    outline: 'none'
-  }
+  '.is-focused &, &:focus': _objectSpread({}, defaultFocus)
 };
 export var thumb = {
   width: 20,

package/lib/styles/variants/boxes.js

@@ -148,7 +148,8 @@ var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
 
 var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
   py: 3,
-  pr: 0
+  pr: 0,
+  my: 3
 });
 
 var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {

package/lib/styles/variants/buttons.js

@@ -48,7 +48,7 @@ var defaultHover = {
   color: 'accent.40',
   boxShadow: 'standard'
 };
-var defaultFocus = {
+export var defaultFocus = {
   outline: '1px solid',
   outlineColor: 'active',
   outlineOffset: '4px'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.21.0-alpha.0",
+  "version": "1.21.0-alpha.3",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",