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

package/lib/components/Pagination/Pagination.stories.js

@@ -0,0 +1,141 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import React, { useState } from 'react';
+import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
+import usePaginationState from '../../hooks/usePaginationState';
+import { Box, Button, Item, ListView, ListViewItem, Pagination, PaginationProvider, ScrollBox } from '../../index';
+import { animals } from '../ListView/ListView.stories';
+import PaginationReadme from './Pagination.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/Pagination',
+  component: Pagination,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(PaginationReadme, null);
+      }
+    }
+  },
+  argTypes: {
+    totalCount: {
+      control: {
+        type: 'number'
+      }
+    },
+    currentPageIndex: {
+      control: {
+        type: 'number'
+      }
+    },
+    offsetCount: {
+      control: {
+        type: 'number'
+      }
+    },
+    offsetOptions: {
+      control: {
+        type: 'array'
+      }
+    },
+    onPageIndexChange: {},
+    onOffsetCountChange: {}
+  }
+};
+var ExampleComponent = function ExampleComponent() {
+  var _context;
+  var _usePaginationState = usePaginationState(),
+    paginationState = _usePaginationState.paginationState;
+  return ___EmotionJSX(ScrollBox, {
+    maxHeight: "400px"
+  }, ___EmotionJSX(ListView, {
+    items: _mapInstanceProperty(_context = _sliceInstanceProperty(animals).call(animals, paginationState.firstRenderedIndex, paginationState.lastRenderedIndex + 1)).call(_context, function (_item) {
+      return {
+        name: _item.name,
+        key: _item.name,
+        id: _item.name
+      };
+    })
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, ___EmotionJSX(ListViewItem, {
+      data: {
+        text: item.name,
+        icon: FormSelectIcon
+      },
+      iconProps: {
+        color: 'text.secondary'
+      }
+    }));
+  }));
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Box, {
+    sx: {
+      maxWidth: '350px',
+      gap: 'sm'
+    }
+  }, ___EmotionJSX(Pagination, _extends({
+    totalCount: 250
+  }, args)));
+};
+export var WithListView = function WithListView() {
+  return ___EmotionJSX(PaginationProvider, null, ___EmotionJSX(Box, {
+    gap: "sm"
+  }, ___EmotionJSX(ExampleComponent, null), ___EmotionJSX(Pagination, {
+    totalCount: animals.length
+  })));
+};
+export var Controlled = function Controlled() {
+  var _useState = useState(24),
+    _useState2 = _slicedToArray(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  var _useState3 = useState(10),
+    _useState4 = _slicedToArray(_useState3, 2),
+    offsetCount = _useState4[0],
+    setOffsetCount = _useState4[1];
+  return ___EmotionJSX(Box, {
+    sx: {
+      maxWidth: '350px',
+      gap: 'sm'
+    }
+  }, ___EmotionJSX(Button, {
+    onPress: function onPress() {
+      return setIndex(0);
+    }
+  }, "Reset Index"), ___EmotionJSX(Pagination, {
+    totalCount: 250,
+    currentPageIndex: index,
+    offsetCount: offsetCount,
+    onOffsetCountChange: setOffsetCount,
+    onPageIndexChange: function onPageIndexChange(i) {
+      setIndex(i);
+    }
+  }));
+};
+export var CustomOptions = function CustomOptions() {
+  var _useState5 = useState(24),
+    _useState6 = _slicedToArray(_useState5, 2),
+    index = _useState6[0],
+    setIndex = _useState6[1];
+  var testFunc = function testFunc(key) {
+    setIndex(key);
+  };
+  return ___EmotionJSX(Box, {
+    sx: {
+      maxWidth: '350px',
+      gap: 'sm'
+    }
+  }, ___EmotionJSX(Pagination, {
+    totalCount: 250,
+    currentPageIndex: index,
+    offsetOptions: [10, 15, 25, 50, 100],
+    onPageIndexChange: function onPageIndexChange(key) {
+      testFunc(key);
+    }
+  }));
+};

package/lib/components/Pagination/Pagination.styles.js

@@ -0,0 +1,19 @@
+var container = {
+  alignItems: 'center',
+  minWidth: '100%',
+  "with": '100%',
+  ml: 'auto',
+  flexGrow: 1
+};
+var iconWrapper = {
+  ml: 'md'
+};
+var wrapper = {
+  ml: 'auto',
+  alignItems: 'center'
+};
+export default {
+  container: container,
+  iconWrapper: iconWrapper,
+  wrapper: wrapper
+};

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

@@ -0,0 +1,205 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { usePaginationState } from '../../hooks';
+import { Box, Text } from '../../index';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import Pagination from './Pagination';
+import PaginationProvider from './PaginationProvider';
+import { jsx as ___EmotionJSX } from "@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
+    }
+  }
+};
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Pagination, _extends({}, props, defaultProps));
+  }
+});
+var ExampleComponent = function ExampleComponent() {
+  var _usePaginationState = usePaginationState(),
+    paginationState = _usePaginationState.paginationState;
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "Current Page Index:", ' ', paginationState.currentPageIndex), ___EmotionJSX(Text, null, "First Rendered Index:", ' ', paginationState.firstRenderedIndex), ___EmotionJSX(Text, null, "Last Rendered Index:", ' ', paginationState.lastRenderedIndex));
+};
+var CustomComponents = function CustomComponents() {
+  return ___EmotionJSX(PaginationProvider, null, ___EmotionJSX(Pagination, defaultProps), ___EmotionJSX(ExampleComponent, null));
+};
+describe('Pagination Component', function () {
+  var getComponent = function getComponent() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return render(___EmotionJSX(Pagination, _extends({}, defaultProps, props)));
+  };
+  afterEach(function () {
+    jest.clearAllMocks();
+    offsetChangeFunc.mockClear();
+    changeFunction.mockClear();
+  });
+  it('should render without crashing', function () {
+    getComponent();
+    expect(screen.getByText(initialString)).toBeInTheDocument();
+  });
+  it('should call setOffsetCount when a menu item is selected', function () {
+    getComponent();
+    var popoverButton = screen.getByText(initialString);
+    fireEvent.click(popoverButton);
+    var menuItem = screen.getByText('Show 25 Results');
+    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 = screen.getByText(initialString);
+    fireEvent.click(popoverButton);
+    var menuItem = screen.getByText('Show 51 Results');
+    fireEvent.click(menuItem);
+    expect(offsetChangeFunc).toHaveBeenCalledWith(51);
+  });
+  it('should call previousButtonProps.onClick when previous button is clicked', function () {
+    getComponent();
+    var previousButton = screen.getByTestId(prevButtonId);
+    fireEvent.click(previousButton);
+    expect(changeFunction).not.toHaveBeenCalled();
+  });
+  it('should call nextButtonProps.onClick when next button is clicked', function () {
+    getComponent();
+    var nextButton = screen.getByTestId(nextButtonId);
+    expect(changeFunction).not.toHaveBeenCalled();
+    act(function () {
+      userEvent.click(nextButton);
+    });
+    expect(changeFunction).toHaveBeenCalledTimes(1);
+  });
+  it('should not call change function when prev button is clicked, on first page', function () {
+    getComponent();
+    var previousButton = screen.getByTestId(prevButtonId);
+    expect(changeFunction).not.toHaveBeenCalled();
+    act(function () {
+      userEvent.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 = screen.getByTestId(nextButtonId);
+    expect(changeFunction).not.toHaveBeenCalled();
+    act(function () {
+      userEvent.click(nextButton);
+    });
+    expect(changeFunction).not.toHaveBeenCalled();
+  });
+  it('should call change function when prev button is clicked', function () {
+    getComponent({
+      currentPageIndex: 24
+    });
+    var previousButton = screen.getByTestId(prevButtonId);
+    expect(changeFunction).not.toHaveBeenCalled();
+    act(function () {
+      userEvent.click(previousButton);
+    });
+    expect(changeFunction).toHaveBeenCalledTimes(1);
+  });
+  it('should change offset using keyboard', function () {
+    getComponent();
+    var menuButton = screen.getByTestId(offsetButtonId);
+
+    // Focus on the next button and press Enter
+    userEvent.tab();
+    expect(menuButton).toHaveFocus();
+    fireEvent.keyDown(menuButton, {
+      key: 'Enter',
+      code: 13
+    });
+    fireEvent.keyUp(menuButton, {
+      key: 'Enter',
+      code: 13
+    });
+    var menuItem = screen.getByText('Show 25 Results');
+    expect(menuItem).toBeInTheDocument();
+    var menu = screen.getByRole('menu');
+    var menutItem = screen.queryAllByRole('menuitemradio')[1];
+    fireEvent.keyDown(menu, {
+      key: 'ArrowDown'
+    });
+    fireEvent.keyUp(menu, {
+      key: 'ArrowDown'
+    });
+    fireEvent.keyDown(menutItem, {
+      key: 'Enter',
+      code: 13
+    });
+    fireEvent.keyUp(menutItem, {
+      key: 'Enter',
+      code: 13
+    });
+    expect(screen.getByText('1-25 of 250')).toBeInTheDocument();
+  });
+  it('should navigate using keyboard keys', function () {
+    getComponent();
+    var nextButton = screen.getByTestId(nextButtonId);
+    var previousButton = screen.getByTestId(prevButtonId);
+    var menuButton = screen.getByTestId(offsetButtonId);
+
+    // Focus on the next button and press Enter
+    userEvent.tab();
+    expect(menuButton).toHaveFocus();
+    userEvent.tab();
+    expect(nextButton).toHaveFocus();
+    fireEvent.keyDown(nextButton, {
+      key: 'Enter',
+      code: 13
+    });
+    fireEvent.keyUp(nextButton, {
+      key: 'Enter',
+      code: 13
+    });
+    expect(screen.getByText('11-20 of 250')).toBeInTheDocument();
+    userEvent.tab({
+      shift: true
+    });
+    expect(previousButton).toHaveFocus();
+  });
+  it('clicking the next button changes the rendered page index string', function () {
+    render(___EmotionJSX(CustomComponents, null));
+    var nextButton = screen.getByTestId(nextButtonId);
+    expect(screen.getByText('Current Page Index: 0')).toBeInTheDocument();
+    userEvent.click(nextButton);
+    expect(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(screen.getByText('1-9 of 9')).toBeInTheDocument();
+  });
+});

package/lib/components/Pagination/PaginationProvider.js

@@ -0,0 +1,24 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { defaultState, PaginationContext } from '../../context/PaginationContext';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var PaginationProvider = function PaginationProvider(props) {
+  var children = props.children;
+  var _useState = useState(defaultState),
+    _useState2 = _slicedToArray(_useState, 2),
+    paginationState = _useState2[0],
+    setPaginationState = _useState2[1];
+  var setPaginationStateCallback = useCallback(function (newState) {
+    setPaginationState(newState);
+  }, []);
+  var contextValue = React.useMemo(function () {
+    return {
+      paginationState: paginationState,
+      setPaginationState: setPaginationStateCallback
+    };
+  }, [paginationState, setPaginationStateCallback]);
+  return ___EmotionJSX(PaginationContext.Provider, {
+    value: contextValue
+  }, children);
+};
+export default PaginationProvider;

package/lib/components/Pagination/index.js

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

package/lib/context/PaginationContext/index.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+export var defaultState = {
+  firstRenderedIndex: 0,
+  lastRenderedIndex: 0,
+  offsetCount: 0,
+  totalCount: 0,
+  currentPageIndex: 0
+};
+export var PaginationContext = /*#__PURE__*/createContext({
+  paginationState: defaultState
+});

package/lib/fonts.js

@@ -0,0 +1,2 @@
+export var pingitoFont = "\n  @font-face {\n    font-weight: 200;\n    font-family: \"pingito\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.0/css/fonts/Pingito-Light.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 400;\n    font-family: \"pingito\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.0/css/fonts/Pingito-Regular.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 600;\n    font-family: \"pingito\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.0/css/fonts/Pingito-SemiBold.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 700;\n    font-family: \"pingito\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.0/css/fonts/Pingito-Bold.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 900;\n    font-family: \"pingito\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.0/css/fonts/Pingito-ExtraBold.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 200;\n    font-style: italic;\n    font-family: \"pingito\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.0/css/fonts/Pingito-ItalicLight.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 400;\n    font-style: italic;\n    font-family: \"pingito\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.0/css/fonts/Pingito-Italic.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 600;\n    font-style: italic;\n    font-family: \"pingito\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.0/css/fonts/Pingito-ItalicSemiBold.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 700;\n    font-style: italic;\n    font-family: \"pingito\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.0/css/fonts/Pingito-ItalicBold.ttf\");\n    size-adjust: 100%;\n  }\n";
+export var openSansFont = "\n  @font-face {\n    font-weight: 200;\n    font-family: \"Open Sans\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.1/fonts/OpenSans-Light.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 400;\n    font-family: \"Open Sans\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.1/fonts/OpenSans-Regular.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 600;\n    font-family: \"Open Sans\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.1/fonts/OpenSans-SemiBold.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 700;\n    font-family: \"Open Sans\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.1/fonts/OpenSans-Bold.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 900;\n    font-family: \"Open Sans\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.1/fonts/OpenSans-ExtraBold.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 200;\n    font-style: italic;\n    font-family: \"Open Sans\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.1/fonts/OpenSans-LightItalic.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 400;\n    font-style: italic;\n    font-family: \"Open Sans\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.1/fonts/OpenSans-Italic.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 600;\n    font-style: italic;\n    font-family: \"Open Sans\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.1/fonts/OpenSans-SemiBoldItalic.ttf\");\n    size-adjust: 100%;\n  }\n\n  @font-face {\n    font-weight: 700;\n    font-style: italic;\n    font-family: \"Open Sans\";\n    src: url(\"https://assets.pingone.com/ux/end-user/2.19.1/fonts/OpenSans-BoldItalic.ttf\");\n    size-adjust: 100%;\n  }\n";

package/lib/hooks/index.js

@@ -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/hooks/usePagination/index.js

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

package/lib/hooks/usePagination/usePagination.js

@@ -0,0 +1,170 @@
+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 = ["currentPageIndex", "nextButtonProps", "offsetCount", "offsetMenuProps", "offsetOptions", "onOffsetCountChange", "onPageIndexChange", "previousButtonProps", "totalCount"];
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
+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 { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { PaginationContext } from '../../context/PaginationContext';
+import useProgressiveState from '../useProgressiveState';
+var getRangeString = function getRangeString(_ref) {
+  var _context, _context2;
+  var first = _ref.first,
+    last = _ref.last,
+    total = _ref.total;
+  return _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(first + 1, "-")).call(_context2, Math.min(last + 1, total), " of ")).call(_context, total);
+};
+var getNewIndexOnOffsetChange = function getNewIndexOnOffsetChange(_ref2) {
+  var first = _ref2.first,
+    newOffset = _ref2.newOffset;
+  var newLast = Math.floor(first / newOffset);
+  return newLast;
+};
+var defaultOffsetOptions = [10, 25, 50];
+var usePagination = function usePagination(props) {
+  var currentPageIndexProp = props.currentPageIndex,
+    nextButtonProps = props.nextButtonProps,
+    offsetCountProp = props.offsetCount,
+    offsetMenuProps = props.offsetMenuProps,
+    _props$offsetOptions = props.offsetOptions,
+    offsetOptions = _props$offsetOptions === void 0 ? defaultOffsetOptions : _props$offsetOptions,
+    onOffsetCountChange = props.onOffsetCountChange,
+    onPageIndexChange = props.onPageIndexChange,
+    previousButtonProps = props.previousButtonProps,
+    totalCount = props.totalCount,
+    others = _objectWithoutProperties(props, _excluded);
+  var isMountedRef = useRef(false);
+  var initialIndexValue = currentPageIndexProp || 0;
+  var initialOffsetValue = offsetCountProp || 10;
+  var _useProgressiveState = useProgressiveState(currentPageIndexProp, initialIndexValue),
+    _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
+    currentPageIndex = _useProgressiveState2[0],
+    setCurrentPageIndex = _useProgressiveState2[1];
+  var _useProgressiveState3 = useProgressiveState(offsetCountProp, initialOffsetValue),
+    _useProgressiveState4 = _slicedToArray(_useProgressiveState3, 2),
+    offsetCount = _useProgressiveState4[0],
+    setOffsetCount = _useProgressiveState4[1];
+  var _useState = useState(currentPageIndex),
+    _useState2 = _slicedToArray(_useState, 2),
+    firstRenderedIndex = _useState2[0],
+    setFirstRenderedIndex = _useState2[1];
+  var _useState3 = useState((currentPageIndex + 1) * offsetCount - 1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    lastRenderedIndex = _useState4[0],
+    setLastRenderedIndex = _useState4[1];
+  useEffect(function () {
+    var calculatedLastIndex = (currentPageIndex + 1) * offsetCount - 1;
+    setFirstRenderedIndex(currentPageIndex * offsetCount);
+    setLastRenderedIndex(Math.min(calculatedLastIndex, totalCount));
+  }, [currentPageIndex, offsetCount, totalCount]);
+  useEffect(function () {
+    if (isMountedRef.current) {
+      var newIndex = getNewIndexOnOffsetChange({
+        newOffset: offsetCount,
+        first: firstRenderedIndex
+      });
+      setCurrentPageIndex(newIndex);
+      if (onPageIndexChange) {
+        onPageIndexChange(newIndex);
+      }
+    }
+  }, [offsetCount]);
+  useEffect(function () {
+    isMountedRef.current = true;
+  }, []);
+  var lastIndex = Math.ceil(totalCount / offsetCount);
+  var isFirstIndex = currentPageIndex === 0;
+  var isLastIndex = lastIndex - 1 === currentPageIndex;
+  var popoverButtonString = useMemo(function () {
+    return getRangeString({
+      first: firstRenderedIndex,
+      last: lastRenderedIndex,
+      total: totalCount
+    });
+  }, [firstRenderedIndex, lastRenderedIndex, totalCount]);
+  var setOffsetCountCallback = useCallback(function (keys) {
+    if (keys !== null && keys !== void 0 && keys.currentKey) {
+      setOffsetCount(_parseInt(keys.currentKey, 10));
+      if (onOffsetCountChange && isMountedRef.current) {
+        onOffsetCountChange(_parseInt(keys.currentKey, 10));
+      }
+    }
+  }, [setOffsetCount, onOffsetCountChange, isMountedRef]);
+  var paginationState = useMemo(function () {
+    return {
+      isFirstIndex: isFirstIndex,
+      isLastIndex: isLastIndex,
+      firstRenderedIndex: firstRenderedIndex,
+      lastRenderedIndex: lastRenderedIndex,
+      offsetCount: offsetCount,
+      totalCount: totalCount,
+      currentPageIndex: currentPageIndex,
+      popoverButtonString: popoverButtonString,
+      setOffsetCount: setOffsetCountCallback,
+      offsetOptions: offsetOptions
+    };
+  }, [isFirstIndex, isLastIndex, firstRenderedIndex, lastRenderedIndex, offsetCount, totalCount, currentPageIndex, popoverButtonString, setOffsetCountCallback, offsetOptions]);
+  var contextState = useMemo(function () {
+    return {
+      firstRenderedIndex: firstRenderedIndex,
+      lastRenderedIndex: lastRenderedIndex,
+      offsetCount: offsetCount,
+      totalCount: totalCount,
+      currentPageIndex: currentPageIndex
+    };
+  }, [firstRenderedIndex, lastRenderedIndex, offsetCount, totalCount, currentPageIndex]);
+  var _useContext = useContext(PaginationContext),
+    setPaginationState = _useContext.setPaginationState;
+  useEffect(function () {
+    if (setPaginationState) {
+      setPaginationState(_objectSpread({}, contextState));
+    }
+  }, [contextState, setPaginationState]);
+  var nextIndex = function nextIndex() {
+    if (!isLastIndex) {
+      setCurrentPageIndex(currentPageIndex + 1);
+      if (onPageIndexChange) {
+        onPageIndexChange(currentPageIndex + 1);
+      }
+    }
+  };
+  var previousIndex = function previousIndex() {
+    if (!isFirstIndex) {
+      setCurrentPageIndex(currentPageIndex - 1);
+      if (onPageIndexChange) {
+        onPageIndexChange(currentPageIndex - 1);
+      }
+    }
+  };
+  var nextButtonPropsSpread = _objectSpread(_objectSpread({
+    'aria-label': 'Next Page'
+  }, nextButtonProps), {}, {
+    isDisabled: isLastIndex,
+    onPress: nextIndex
+  });
+  var previousButtonPropsSpread = _objectSpread(_objectSpread({
+    'aria-label': 'Previous Page'
+  }, previousButtonProps), {}, {
+    isDisabled: isFirstIndex,
+    onPress: previousIndex
+  });
+  var containerProps = _objectSpread({}, others);
+  return {
+    state: paginationState,
+    previousButtonProps: previousButtonPropsSpread,
+    nextButtonProps: nextButtonPropsSpread,
+    containerProps: containerProps,
+    offsetMenuProps: offsetMenuProps
+  };
+};
+export default usePagination;

package/lib/hooks/usePaginationState/index.js

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

package/lib/hooks/usePaginationState/usePaginationState.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { PaginationContext } from '../../context/PaginationContext';
+var usePaginationState = function usePaginationState() {
+  var _useContext = useContext(PaginationContext),
+    paginationState = _useContext.paginationState;
+  return {
+    paginationState: paginationState
+  };
+};
+export default usePaginationState;

package/lib/index.js

@@ -138,6 +138,8 @@ export * from './components/NumberField';
 export { default as OverlayPanel } from './components/OverlayPanel';
 export * from './components/OverlayPanel';
 export { default as PageHeader } from './components/PageHeader';
+export { default as Pagination } from './components/Pagination';
+export { default as PaginationProvider } from './components/Pagination/PaginationProvider';
 export { default as PanelHeader } from './components/PanelHeader';
 export { default as PanelHeaderCloseButton } from './components/PanelHeader/controls/PanelHeaderCloseButton';
 export { default as PanelHeaderMenu } from './components/PanelHeader/controls/PanelHeaderMenu';
@@ -210,6 +212,7 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';
 export * from './components/TreeView';
+export { PaginationContext } from './context/PaginationContext';
 export { default as NextGenDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as OnyxDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as NextGenTheme } from './styles/themes/next-gen';

package/lib/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -59,6 +59,9 @@ var buttons = {
       color: 'black'
     }
   },
+  paginationMenu: {
+    color: 'text.secondary'
+  },
   neutral: {
     color: 'gray-400'
   },

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'Pagination'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],