@pingux/astro 2.119.0-alpha.2 → 2.119.0-alpha.3

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

@@ -0,0 +1,208 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _hooks = require("../../hooks");
+var _index = require("../../index");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _Pagination = _interopRequireDefault(require("./Pagination"));
+var _PaginationProvider = _interopRequireDefault(require("./PaginationProvider"));
+var _react2 = require("@emotion/react");
+var initialString = '1-10 of 250';
+var mockState = {
+  setOffsetCount: jest.fn()
+};
+var changeFunction = jest.fn();
+var offsetChangeFunc = jest.fn();
+var nextButtonId = 'next-button';
+var prevButtonId = 'prev-button';
+var menuId = 'menu-id';
+var offsetButtonId = 'menu-button';
+var defaultProps = {
+  state: mockState,
+  onPageIndexChange: changeFunction,
+  containerProps: {},
+  totalCount: 250,
+  onOffsetCountChange: offsetChangeFunc,
+  nextButtonProps: {
+    'data-testid': nextButtonId
+  },
+  previousButtonProps: {
+    'data-testid': prevButtonId
+  },
+  offsetMenuProps: {
+    'data-testid': menuId,
+    buttonProps: {
+      'data-testid': offsetButtonId
+    }
+  }
+};
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_Pagination["default"], (0, _extends2["default"])({}, props, defaultProps));
+  }
+});
+var ExampleComponent = function ExampleComponent() {
+  var _usePaginationState = (0, _hooks.usePaginationState)(),
+    paginationState = _usePaginationState.paginationState;
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, null, "Current Page Index:", ' ', paginationState.currentPageIndex), (0, _react2.jsx)(_index.Text, null, "First Rendered Index:", ' ', paginationState.firstRenderedIndex), (0, _react2.jsx)(_index.Text, null, "Last Rendered Index:", ' ', paginationState.lastRenderedIndex));
+};
+var CustomComponents = function CustomComponents() {
+  return (0, _react2.jsx)(_PaginationProvider["default"], null, (0, _react2.jsx)(_Pagination["default"], defaultProps), (0, _react2.jsx)(ExampleComponent, null));
+};
+describe('Pagination Component', function () {
+  var getComponent = function getComponent() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return (0, _testWrapper.render)((0, _react2.jsx)(_Pagination["default"], (0, _extends2["default"])({}, defaultProps, props)));
+  };
+  afterEach(function () {
+    jest.clearAllMocks();
+    offsetChangeFunc.mockClear();
+    changeFunction.mockClear();
+  });
+  it('should render without crashing', function () {
+    getComponent();
+    expect(_testWrapper.screen.getByText(initialString)).toBeInTheDocument();
+  });
+  it('should call setOffsetCount when a menu item is selected', function () {
+    getComponent();
+    var popoverButton = _testWrapper.screen.getByText(initialString);
+    _testWrapper.fireEvent.click(popoverButton);
+    var menuItem = _testWrapper.screen.getByText('Show 25 Results');
+    _testWrapper.fireEvent.click(menuItem);
+    expect(offsetChangeFunc).toHaveBeenCalledWith(25);
+  });
+  it('should call setOffsetCount when a menu item is selected, but custom props', function () {
+    getComponent({
+      offsetOptions: [5, 51, 100]
+    });
+    var popoverButton = _testWrapper.screen.getByText(initialString);
+    _testWrapper.fireEvent.click(popoverButton);
+    var menuItem = _testWrapper.screen.getByText('Show 51 Results');
+    _testWrapper.fireEvent.click(menuItem);
+    expect(offsetChangeFunc).toHaveBeenCalledWith(51);
+  });
+  it('should call previousButtonProps.onClick when previous button is clicked', function () {
+    getComponent();
+    var previousButton = _testWrapper.screen.getByTestId(prevButtonId);
+    _testWrapper.fireEvent.click(previousButton);
+    expect(changeFunction).not.toHaveBeenCalled();
+  });
+  it('should call nextButtonProps.onClick when next button is clicked', function () {
+    getComponent();
+    var nextButton = _testWrapper.screen.getByTestId(nextButtonId);
+    expect(changeFunction).not.toHaveBeenCalled();
+    (0, _testWrapper.act)(function () {
+      _userEvent["default"].click(nextButton);
+    });
+    expect(changeFunction).toHaveBeenCalledTimes(1);
+  });
+  it('should not call change function when prev button is clicked, on first page', function () {
+    getComponent();
+    var previousButton = _testWrapper.screen.getByTestId(prevButtonId);
+    expect(changeFunction).not.toHaveBeenCalled();
+    (0, _testWrapper.act)(function () {
+      _userEvent["default"].click(previousButton);
+    });
+    expect(changeFunction).not.toHaveBeenCalled();
+  });
+  it('should not call change function when next button is clicked, on last page', function () {
+    getComponent({
+      currentPageIndex: 24
+    });
+    var nextButton = _testWrapper.screen.getByTestId(nextButtonId);
+    expect(changeFunction).not.toHaveBeenCalled();
+    (0, _testWrapper.act)(function () {
+      _userEvent["default"].click(nextButton);
+    });
+    expect(changeFunction).not.toHaveBeenCalled();
+  });
+  it('should call change function when prev button is clicked', function () {
+    getComponent({
+      currentPageIndex: 24
+    });
+    var previousButton = _testWrapper.screen.getByTestId(prevButtonId);
+    expect(changeFunction).not.toHaveBeenCalled();
+    (0, _testWrapper.act)(function () {
+      _userEvent["default"].click(previousButton);
+    });
+    expect(changeFunction).toHaveBeenCalledTimes(1);
+  });
+  it('should change offset using keyboard', function () {
+    getComponent();
+    var menuButton = _testWrapper.screen.getByTestId(offsetButtonId);
+
+    // Focus on the next button and press Enter
+    _userEvent["default"].tab();
+    expect(menuButton).toHaveFocus();
+    _testWrapper.fireEvent.keyDown(menuButton, {
+      key: 'Enter',
+      code: 13
+    });
+    _testWrapper.fireEvent.keyUp(menuButton, {
+      key: 'Enter',
+      code: 13
+    });
+    var menuItem = _testWrapper.screen.getByText('Show 25 Results');
+    expect(menuItem).toBeInTheDocument();
+    var menu = _testWrapper.screen.getByRole('menu');
+    var menutItem = _testWrapper.screen.queryAllByRole('menuitemradio')[1];
+    _testWrapper.fireEvent.keyDown(menu, {
+      key: 'ArrowDown'
+    });
+    _testWrapper.fireEvent.keyUp(menu, {
+      key: 'ArrowDown'
+    });
+    _testWrapper.fireEvent.keyDown(menutItem, {
+      key: 'Enter',
+      code: 13
+    });
+    _testWrapper.fireEvent.keyUp(menutItem, {
+      key: 'Enter',
+      code: 13
+    });
+    expect(_testWrapper.screen.getByText('1-25 of 250')).toBeInTheDocument();
+  });
+  it('should navigate using keyboard keys', function () {
+    getComponent();
+    var nextButton = _testWrapper.screen.getByTestId(nextButtonId);
+    var previousButton = _testWrapper.screen.getByTestId(prevButtonId);
+    var menuButton = _testWrapper.screen.getByTestId(offsetButtonId);
+
+    // Focus on the next button and press Enter
+    _userEvent["default"].tab();
+    expect(menuButton).toHaveFocus();
+    _userEvent["default"].tab();
+    expect(nextButton).toHaveFocus();
+    _testWrapper.fireEvent.keyDown(nextButton, {
+      key: 'Enter',
+      code: 13
+    });
+    _testWrapper.fireEvent.keyUp(nextButton, {
+      key: 'Enter',
+      code: 13
+    });
+    expect(_testWrapper.screen.getByText('11-20 of 250')).toBeInTheDocument();
+    _userEvent["default"].tab({
+      shift: true
+    });
+    expect(previousButton).toHaveFocus();
+  });
+  it('clicking the next button changes the rendered page index string', function () {
+    (0, _testWrapper.render)((0, _react2.jsx)(CustomComponents, null));
+    var nextButton = _testWrapper.screen.getByTestId(nextButtonId);
+    expect(_testWrapper.screen.getByText('Current Page Index: 0')).toBeInTheDocument();
+    _userEvent["default"].click(nextButton);
+    expect(_testWrapper.screen.getByText('Current Page Index: 1')).toBeInTheDocument();
+  });
+  it('if fewer than a full page of items is rendered, this is reflected in the text', function () {
+    getComponent({
+      totalCount: 9,
+      offsetCount: 10
+    });
+    expect(_testWrapper.screen.getByText('1-9 of 9')).toBeInTheDocument();
+  });
+});

package/lib/cjs/components/Pagination/PaginationProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PaginationProviderProps } from '../../types/pagination';
+declare const PaginationProvider: (props: PaginationProviderProps) => React.JSX.Element;
+export default PaginationProvider;

package/lib/cjs/components/Pagination/PaginationProvider.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+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");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _PaginationContext = require("../../context/PaginationContext");
+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; }
+var PaginationProvider = function PaginationProvider(props) {
+  var children = props.children;
+  var _useState = (0, _react.useState)(_PaginationContext.defaultState),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    paginationState = _useState2[0],
+    setPaginationState = _useState2[1];
+  var setPaginationStateCallback = (0, _react.useCallback)(function (newState) {
+    setPaginationState(newState);
+  }, []);
+  var contextValue = _react["default"].useMemo(function () {
+    return {
+      paginationState: paginationState,
+      setPaginationState: setPaginationStateCallback
+    };
+  }, [paginationState, setPaginationStateCallback]);
+  return (0, _react2.jsx)(_PaginationContext.PaginationContext.Provider, {
+    value: contextValue
+  }, children);
+};
+var _default = PaginationProvider;
+exports["default"] = _default;

package/lib/cjs/components/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Pagination';
+export * from './Pagination';

package/lib/cjs/components/Pagination/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _context;
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+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 _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Pagination["default"];
+  }
+});
+var _Pagination = _interopRequireWildcard(require("./Pagination"));
+_forEachInstanceProperty(_context = _Object$keys(_Pagination)).call(_context, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Pagination[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Pagination[key];
+    }
+  });
+});
+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; }

package/lib/cjs/context/PaginationContext/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PaginationContextProps } from '../../types/pagination';
+export declare const defaultState: {
+    firstRenderedIndex: number;
+    lastRenderedIndex: number;
+    offsetCount: number;
+    totalCount: number;
+    currentPageIndex: number;
+};
+export declare const PaginationContext: React.Context<PaginationContextProps>;

package/lib/cjs/context/PaginationContext/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultState = exports.PaginationContext = void 0;
+var _react = require("react");
+var defaultState = {
+  firstRenderedIndex: 0,
+  lastRenderedIndex: 0,
+  offsetCount: 0,
+  totalCount: 0,
+  currentPageIndex: 0
+};
+exports.defaultState = defaultState;
+var PaginationContext = /*#__PURE__*/(0, _react.createContext)({
+  paginationState: defaultState
+});
+exports.PaginationContext = PaginationContext;

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

@@ -15,6 +15,8 @@ export { default as useMountTransition } from './useMountTransition';
 export { default as useNavBarPress } from './useNavBarPress';
 export { default as useOverlappingMenuHoverState } from './useOverlappingMenuHoverState';
 export { default as useOverlayPanelState } from './useOverlayPanelState';
+export { default as usePagination } from './usePagination';
+export { default as usePaginationState } from './usePaginationState';
 export { default as useProgressiveState } from './useProgressiveState';
 export { default as usePropWarning } from './usePropWarning';
 export { default as useRockerButton } from './useRockerButton';

package/lib/cjs/hooks/index.js

@@ -107,6 +107,18 @@ _Object$defineProperty(exports, "useOverlayPanelState", {
     return _useOverlayPanelState["default"];
   }
 });
+_Object$defineProperty(exports, "usePagination", {
+  enumerable: true,
+  get: function get() {
+    return _usePagination["default"];
+  }
+});
+_Object$defineProperty(exports, "usePaginationState", {
+  enumerable: true,
+  get: function get() {
+    return _usePaginationState["default"];
+  }
+});
 _Object$defineProperty(exports, "useProgressiveState", {
   enumerable: true,
   get: function get() {
@@ -166,6 +178,8 @@ var _useMountTransition = _interopRequireDefault(require("./useMountTransition")
 var _useNavBarPress = _interopRequireDefault(require("./useNavBarPress"));
 var _useOverlappingMenuHoverState = _interopRequireDefault(require("./useOverlappingMenuHoverState"));
 var _useOverlayPanelState = _interopRequireDefault(require("./useOverlayPanelState"));
+var _usePagination = _interopRequireDefault(require("./usePagination"));
+var _usePaginationState = _interopRequireDefault(require("./usePaginationState"));
 var _useProgressiveState = _interopRequireDefault(require("./useProgressiveState"));
 var _usePropWarning = _interopRequireDefault(require("./usePropWarning"));
 var _useRockerButton = _interopRequireDefault(require("./useRockerButton"));

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

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

package/lib/cjs/hooks/usePagination/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _usePagination["default"];
+  }
+});
+var _usePagination = _interopRequireDefault(require("./usePagination"));