@pingux/astro 2.32.0-alpha.4 → 2.32.0-alpha.6

package/lib/cjs/components/Messages/Messages.js

@@ -3,7 +3,7 @@
 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 _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+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");
@@ -15,16 +15,12 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _collections = require("@react-stately/collections");
 var _list = require("@react-stately/list");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _statusProp = require("../../utils/docUtils/statusProp");
@@ -34,51 +30,22 @@ var _react2 = require("@emotion/react");
 var _excluded = ["items", "onClose"];
 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 = _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 _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; }
+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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _context;
   var items = props.items,
     onClose = props.onClose,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useState = (0, _react.useState)([]),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    messages = _useState2[0],
-    setMessages = _useState2[1];
-  var factory = (0, _react.useCallback)(function (nodes) {
-    return new _list.ListCollection(nodes);
-  }, []);
-  var collection = (0, _collections.useCollection)(props, factory);
-  (0, _react.useEffect)(function () {
-    setMessages((0, _from["default"])(collection));
-  }, [collection]);
-  var removeMessage = function removeMessage(key) {
-    setMessages((0, _map["default"])(messages).call(messages, function (item) {
-      return item.key === key ? _objectSpread(_objectSpread({}, item), {}, {
-        props: _objectSpread(_objectSpread({}, item.props), {}, {
-          isHidden: true
-        })
-      }) : item;
-    }));
-    (0, _setTimeout2["default"])(function () {
-      return setMessages((0, _filter["default"])(messages).call(messages, function (item) {
-        return item.key !== key;
-      }));
-    }, 200);
-  };
-  var onCloseHandler = function onCloseHandler(key) {
-    if (onClose) {
-      onClose(key);
-    }
-    removeMessage(key);
-  };
+  var state = (0, _list.useListState)(props);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
     variant: "message.wrapper"
-  }, others), (0, _map["default"])(messages).call(messages, function (item) {
+  }, others), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
     return (0, _react2.jsx)(_Message["default"], {
       key: item.key,
       item: item,
-      onClose: onCloseHandler
+      onClose: onClose
     });
   }));
 });

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

@@ -5,11 +5,11 @@ 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 _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _testUtils = require("react-dom/test-utils");
 var _reactStately = require("react-stately");
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
@@ -101,17 +101,14 @@ test('`onClose` get as first arg key of message', function () {
   expect(onClose).toHaveBeenCalledWith('message1');
 });
 test('click on close button removes message after delay', function () {
-  (0, _testUtils.act)(function () {
-    global.setTimeout = jest.fn(function (cb) {
-      return cb();
-    });
-  });
   getComponent();
   var messages = _testWrapper.screen.getByTestId(testId);
   expect(messages.childElementCount).toBe(2);
   var buttons = _testWrapper.screen.getAllByRole('button');
   _userEvent["default"].click(buttons[0]);
-  expect(messages.childElementCount).toBe(1);
+  (0, _setTimeout2["default"])(function () {
+    expect(messages.childElementCount).toBe(1);
+  }, 200);
 });
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();

package/lib/components/Messages/Messages.js

@@ -1,72 +1,40 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["items", "onClose"];
+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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 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";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["items", "onClose"];
-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 _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import React, { forwardRef, useCallback, useEffect, useState } from 'react';
-import { useCollection } from '@react-stately/collections';
-import { ListCollection } from '@react-stately/list';
+import React, { forwardRef } from 'react';
+import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import Box from '../Box';
 import Message from './Message';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Messages = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context;
   var items = props.items,
     onClose = props.onClose,
     others = _objectWithoutProperties(props, _excluded);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    messages = _useState2[0],
-    setMessages = _useState2[1];
-  var factory = useCallback(function (nodes) {
-    return new ListCollection(nodes);
-  }, []);
-  var collection = useCollection(props, factory);
-  useEffect(function () {
-    setMessages(_Array$from(collection));
-  }, [collection]);
-  var removeMessage = function removeMessage(key) {
-    setMessages(_mapInstanceProperty(messages).call(messages, function (item) {
-      return item.key === key ? _objectSpread(_objectSpread({}, item), {}, {
-        props: _objectSpread(_objectSpread({}, item.props), {}, {
-          isHidden: true
-        })
-      }) : item;
-    }));
-    _setTimeout(function () {
-      return setMessages(_filterInstanceProperty(messages).call(messages, function (item) {
-        return item.key !== key;
-      }));
-    }, 200);
-  };
-  var onCloseHandler = function onCloseHandler(key) {
-    if (onClose) {
-      onClose(key);
-    }
-    removeMessage(key);
-  };
+  var state = useListState(props);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     variant: "message.wrapper"
-  }, others), _mapInstanceProperty(messages).call(messages, function (item) {
+  }, others), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(Message, {
       key: item.key,
       item: item,
-      onClose: onCloseHandler
+      onClose: onClose
     });
   }));
 });

package/lib/components/Messages/Messages.test.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import { Item } from 'react-stately';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import userEvent from '@testing-library/user-event';
@@ -92,17 +92,14 @@ test('`onClose` get as first arg key of message', function () {
   expect(onClose).toHaveBeenCalledWith('message1');
 });
 test('click on close button removes message after delay', function () {
-  act(function () {
-    global.setTimeout = jest.fn(function (cb) {
-      return cb();
-    });
-  });
   getComponent();
   var messages = screen.getByTestId(testId);
   expect(messages.childElementCount).toBe(2);
   var buttons = screen.getAllByRole('button');
   userEvent.click(buttons[0]);
-  expect(messages.childElementCount).toBe(1);
+  _setTimeout(function () {
+    expect(messages.childElementCount).toBe(1);
+  }, 200);
 });
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.32.0-alpha.4",
+  "version": "2.32.0-alpha.6",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",