@pingux/astro 2.32.0-alpha.1 → 2.32.0-alpha.3

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 _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _filterInstanceProperty2 = 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,12 +15,16 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 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");
@@ -30,22 +34,51 @@ 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 = _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; }
+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; }
 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 state = (0, _list.useListState)(props);
+  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);
+  };
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
     variant: "message.wrapper"
-  }, others), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+  }, others), (0, _map["default"])(messages).call(messages, function (item) {
     return (0, _react2.jsx)(_Message["default"], {
       key: item.key,
       item: item,
-      onClose: onClose
+      onClose: onCloseHandler
     });
   }));
 });

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,14 +101,17 @@ 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]);
-  (0, _setTimeout2["default"])(function () {
-    expect(messages.childElementCount).toBe(1);
-  }, 200);
+  expect(messages.childElementCount).toBe(1);
 });
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();

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

@@ -172,7 +172,7 @@ var Expandable = function Expandable() {
       fontSize: 'sm',
       fontWeight: 500,
       color: 'text.secondary',
-      '> div': {
+      '& > div:first-child': {
         order: 2
       }
     },
@@ -184,15 +184,6 @@ var Expandable = function Expandable() {
       gap: 'md',
       width: isExpanded ? '100%' : '400px',
       transition: 'width 500ms'
-    },
-    footer: {
-      marginTop: 'auto',
-      padding: '15px 25px',
-      button: {
-        width: '65px',
-        height: '38px',
-        border: '0 !important'
-      }
     }
   };
   var multivaluesFieldItems = [{
@@ -346,17 +337,12 @@ var Expandable = function Expandable() {
     label: "Log field Description",
     defaultValue: "The Value of the Text Input"
   }));
-  var footer = (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.footer
-  }, (0, _react2.jsx)(_index.Button, {
+  var footer = (0, _react2.jsx)(_index.ButtonBar, null, (0, _react2.jsx)(_index.Button, {
     onPress: onCloseHandler,
-    sx: sx.footer.button,
     variant: "primary"
   }, "Save"), (0, _react2.jsx)(_index.Button, {
     onPress: onCloseHandler,
-    sx: sx.footer.button,
-    variant: "text"
+    variant: "link"
   }, "Cancel"));
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen

package/lib/cjs/hooks/useFallbackImage/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useFallbackImage';

package/lib/cjs/hooks/useFallbackImage/useFallbackImage.d.ts

@@ -0,0 +1,10 @@
+export interface UseFallbackImageProps {
+    src: string;
+    onImageLoad: () => void;
+    onImageError: () => void;
+    fallbackTimeout: number;
+    onFallbackTimeout: () => void;
+    fallbackImage?: string | object | null;
+}
+declare const useFallbackImage: ({ src: imageSrc, onImageLoad, onImageError, fallbackTimeout, onFallbackTimeout, }: UseFallbackImageProps) => HTMLImageElement;
+export default useFallbackImage;

package/lib/cjs/hooks/useFallbackImage/useFallbackImage.js

@@ -27,8 +27,7 @@ var useFallbackImage = function useFallbackImage(_ref) {
     };
   }, []);
   (0, _react.useEffect)(function () {
-    var timeoutId = 0;
-    timeoutId = (0, _setTimeout2["default"])(onFallbackTimeout, fallbackTimeout);
+    var timeoutId = (0, _setTimeout2["default"])(onFallbackTimeout, fallbackTimeout);
     return function () {
       return clearTimeout(timeoutId);
     };

package/lib/cjs/hooks/useFallbackImage/useFallbackImage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/hooks/useFallbackImage/useFallbackImage.test.js

@@ -11,27 +11,27 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _reactHooks = require("@testing-library/react-hooks");
-var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));
+var _ = _interopRequireDefault(require("."));
 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 defaultProps = {
   src: 'test-src',
-  fallbackImage: 'test-fallback-src',
   onImageLoad: jest.fn(),
   onImageError: jest.fn(),
   fallbackTimeout: 5,
-  onFallbackTimeout: jest.fn()
+  onFallbackTimeout: jest.fn(),
+  fallbackImage: 'test-fallback-src'
 };
-test('should return node if all props are correct ', function () {
+test('should return node if all props are correct', function () {
   var _renderHook = (0, _reactHooks.renderHook)(function () {
-      return (0, _useFallbackImage["default"])(defaultProps);
+      return (0, _["default"])(defaultProps);
     }),
-    current = _renderHook.result.current;
-  expect(current).toBeInstanceOf(HTMLImageElement);
+    result = _renderHook.result;
+  expect(result.current).toBeInstanceOf(HTMLImageElement);
 });
 test('should not trigger onImageLoad if no fallback passed', function () {
   (0, _reactHooks.renderHook)(function () {
-    return (0, _useFallbackImage["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+    return (0, _["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
       fallbackImage: null
     }));
   });
@@ -39,7 +39,7 @@ test('should not trigger onImageLoad if no fallback passed', function () {
 });
 test('should not trigger onImageLoad if component unmounted', function () {
   var _renderHook2 = (0, _reactHooks.renderHook)(function () {
-      return (0, _useFallbackImage["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      return (0, _["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
         fallbackImage: null
       }));
     }),

package/lib/components/Messages/Messages.js

@@ -1,40 +1,72 @@
-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 React, { forwardRef } from 'react';
-import { useListState } from '@react-stately/list';
+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 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 state = useListState(props);
+  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);
+  };
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     variant: "message.wrapper"
-  }, others), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+  }, others), _mapInstanceProperty(messages).call(messages, function (item) {
     return ___EmotionJSX(Message, {
       key: item.key,
       item: item,
-      onClose: onClose
+      onClose: onCloseHandler
     });
   }));
 });

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,14 +92,17 @@ 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]);
-  _setTimeout(function () {
-    expect(messages.childElementCount).toBe(1);
-  }, 200);
+  expect(messages.childElementCount).toBe(1);
 });
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -11,7 +11,7 @@ import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import CogIcon from '@pingux/mdi-react/CogIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useOverlayPanelState } from '../../hooks';
-import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, ListView, ListViewItem, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
+import { Avatar, Box, Breadcrumbs, Button, ButtonBar, ColorField, IconButton, ListView, ListViewItem, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
 import OverlayPanelReadme from './OverlayPanel.mdx';
@@ -156,7 +156,7 @@ export var Expandable = function Expandable() {
       fontSize: 'sm',
       fontWeight: 500,
       color: 'text.secondary',
-      '> div': {
+      '& > div:first-child': {
         order: 2
       }
     },
@@ -168,15 +168,6 @@ export var Expandable = function Expandable() {
       gap: 'md',
       width: isExpanded ? '100%' : '400px',
       transition: 'width 500ms'
-    },
-    footer: {
-      marginTop: 'auto',
-      padding: '15px 25px',
-      button: {
-        width: '65px',
-        height: '38px',
-        border: '0 !important'
-      }
     }
   };
   var multivaluesFieldItems = [{
@@ -330,17 +321,12 @@ export var Expandable = function Expandable() {
     label: "Log field Description",
     defaultValue: "The Value of the Text Input"
   }));
-  var footer = ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.footer
-  }, ___EmotionJSX(Button, {
+  var footer = ___EmotionJSX(ButtonBar, null, ___EmotionJSX(Button, {
     onPress: onCloseHandler,
-    sx: sx.footer.button,
     variant: "primary"
   }, "Save"), ___EmotionJSX(Button, {
     onPress: onCloseHandler,
-    sx: sx.footer.button,
-    variant: "text"
+    variant: "link"
   }, "Cancel"));
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen

package/lib/hooks/useFallbackImage/useFallbackImage.js

@@ -19,8 +19,7 @@ var useFallbackImage = function useFallbackImage(_ref) {
     };
   }, []);
   useEffect(function () {
-    var timeoutId = 0;
-    timeoutId = _setTimeout(onFallbackTimeout, fallbackTimeout);
+    var timeoutId = _setTimeout(onFallbackTimeout, fallbackTimeout);
     return function () {
       return clearTimeout(timeoutId);
     };

package/lib/hooks/useFallbackImage/useFallbackImage.test.js

@@ -10,21 +10,21 @@ 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 { renderHook } from '@testing-library/react-hooks';
-import useFallbackImage from './useFallbackImage';
+import useFallbackImage from '.';
 var defaultProps = {
   src: 'test-src',
-  fallbackImage: 'test-fallback-src',
   onImageLoad: jest.fn(),
   onImageError: jest.fn(),
   fallbackTimeout: 5,
-  onFallbackTimeout: jest.fn()
+  onFallbackTimeout: jest.fn(),
+  fallbackImage: 'test-fallback-src'
 };
-test('should return node if all props are correct ', function () {
+test('should return node if all props are correct', function () {
   var _renderHook = renderHook(function () {
       return useFallbackImage(defaultProps);
     }),
-    current = _renderHook.result.current;
-  expect(current).toBeInstanceOf(HTMLImageElement);
+    result = _renderHook.result;
+  expect(result.current).toBeInstanceOf(HTMLImageElement);
 });
 test('should not trigger onImageLoad if no fallback passed', function () {
   renderHook(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.32.0-alpha.1",
+  "version": "2.32.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -123,6 +123,7 @@
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/cache": "^11.4.0",
     "@emotion/eslint-plugin": "^11.2.0",
+    "@react-stately/collections": "^3.10.2",
     "@storybook/addon-a11y": "^7.1.0",
     "@storybook/addon-console": "^2.0.0",
     "@storybook/addon-docs": "^7.1.0",