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

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -26,6 +26,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     heading = item.heading;
   var navBarState = useNavBarContext();
   var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx,
     icons = _useGetTheme.icons;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
@@ -61,7 +62,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     "data-testid": heading
   }, icon && ___EmotionJSX(Icon, {
     icon: icon,
-    size: "sm",
+    size: isOnyx ? 'icon-200' : 'sm',
     sx: {
       mr: 'sm',
       color: getIconColor(),
@@ -78,7 +79,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     }
   }, ___EmotionJSX(Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: navStyles.navBarItemHeaderIconSize,
+    size: isOnyx ? 'icon-100' : navStyles.navBarItemHeaderIconSize,
     sx: {
       color: getIconColor(),
       fill: getIconColor()
@@ -96,6 +97,8 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {
     customIcon = item.customIcon;
   var navBarState = useNavBarContext();
   var navStyles = navBarState.navStyles;
+  var _useGetTheme2 = useGetTheme(),
+    isOnyx = _useGetTheme2.themeState.isOnyx;
   return ___EmotionJSX(Box, {
     variant: navStyles.navBarItemHeader,
     className: className,
@@ -103,7 +106,7 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {
     "data-testid": heading
   }, icon && ___EmotionJSX(Icon, {
     icon: icon,
-    size: "sm",
+    size: isOnyx ? 'icon-200' : 'sm',
     sx: {
       mr: 'sm',
       color: 'neutral.95',
@@ -123,7 +126,7 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {
     }
   }, customIcon && ___EmotionJSX(Icon, {
     icon: customIcon,
-    size: "sm",
+    size: isOnyx ? 'icon-200' : 'sm',
     sx: {
       color: 'neutral.95',
       fill: 'neutral.95'

package/lib/components/NavBarSection/NavBarItemHeader.test.js

@@ -0,0 +1,83 @@
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _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 React from 'react';
+import ViewDashboard from '@pingux/mdi-react/ViewDashboardIcon';
+import { useGetTheme } from '../../hooks';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import NavBar from '../NavBar';
+import NavBarSection from './NavBarSection';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var data = [{
+  'data-id': 'dashboard-data-id',
+  heading: 'Dashboard',
+  icon: ViewDashboard,
+  key: 'Dashboard',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles', 'Dashboard Unique']
+}];
+var mockTheme = {
+  themeState: {
+    isOnyx: false
+  },
+  icons: {
+    MenuDown: function MenuDown() {
+      return ___EmotionJSX("span", null, "MenuDown");
+    },
+    MenuUp: function MenuUp() {
+      return ___EmotionJSX("span", null, "MenuUp");
+    }
+  }
+};
+jest.mock('../../hooks/useGetTheme', function () {
+  return {
+    __esModule: true,
+    "default": jest.fn()
+  };
+});
+var NavBarWithSection = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return ___EmotionJSX(NavBar, null, ___EmotionJSX(NavBarSection, _extends({
+    ref: ref
+  }, props, {
+    items: data
+  })));
+});
+var getComponent = function getComponent() {
+  return render(___EmotionJSX(NavBarWithSection, null));
+};
+describe('NavItemHeader', function () {
+  beforeEach(function () {
+    jest.clearAllMocks();
+    useGetTheme.mockReturnValue(mockTheme);
+  });
+  it('should render Icon', function () {
+    getComponent();
+    var icon = screen.getByTestId('Dashboard').querySelector('svg');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute('width', '20px');
+  });
+});
+describe('NavItemHeader', function () {
+  beforeEach(function () {
+    jest.clearAllMocks();
+    useGetTheme.mockReturnValue(_objectSpread(_objectSpread({}, mockTheme), {}, {
+      themeState: {
+        isOnyx: true
+      }
+    }));
+  });
+  it('should render Icon', function () {
+    getComponent();
+    var icon = screen.getByTestId('Dashboard').querySelector('svg');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute('width', 'icon-200');
+  });
+});

package/lib/components/Pagination/Pagination.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["setOffsetCount", "offsetOptions"];
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { forwardRef } from 'react';
+import ChevronLeftIcon from '@pingux/mdi-react/ChevronLeftIcon';
+import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
+import { useLocalOrForwardRef } from '../../hooks';
+import usePagination from '../../hooks/usePagination';
+import { Box, Button, Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var RangeSelectPopover = /*#__PURE__*/forwardRef(function (props, ref) {
+  var state = props.state,
+    buttonProps = props.buttonProps;
+  var setOffsetCount = state.setOffsetCount,
+    offsetOptions = state.offsetOptions,
+    others = _objectWithoutProperties(state, _excluded);
+  var menuRef = useLocalOrForwardRef(ref);
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
+    sx: {
+      flexGrow: 1
+    }
+  }, ___EmotionJSX(PopoverMenu, {
+    ref: menuRef
+  }, ___EmotionJSX(Button, _extends({}, buttonProps, {
+    variant: "paginationMenu"
+  }), state.popoverButtonString), ___EmotionJSX(Menu, _extends({
+    onSelectionChange: setOffsetCount,
+    selectionMode: "single"
+  }, others), _mapInstanceProperty(offsetOptions).call(offsetOptions, function (option) {
+    return ___EmotionJSX(Item, {
+      key: option,
+      textValue: "".concat(option)
+    }, "Show", ' ', option, ' ', "Results");
+  })))));
+});
+var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _usePagination = usePagination(props),
+    state = _usePagination.state,
+    previousButtonProps = _usePagination.previousButtonProps,
+    nextButtonProps = _usePagination.nextButtonProps,
+    containerProps = _usePagination.containerProps,
+    offsetMenuProps = _usePagination.offsetMenuProps;
+  var paginationRef = useLocalOrForwardRef(ref);
+  return ___EmotionJSX(Box, _extends({
+    isRow: true,
+    variant: "pagination.container"
+  }, containerProps, {
+    ref: paginationRef
+  }), ___EmotionJSX(Box, {
+    variant: "pagination.wrapper",
+    isRow: true
+  }, ___EmotionJSX(RangeSelectPopover, _extends({}, offsetMenuProps, {
+    state: state
+  })), ___EmotionJSX(Box, {
+    variant: "pagination.iconWrapper",
+    isRow: true
+  }, ___EmotionJSX(IconButton, previousButtonProps, ___EmotionJSX(Icon, {
+    icon: ChevronLeftIcon
+  })), ___EmotionJSX(IconButton, nextButtonProps, ___EmotionJSX(Icon, {
+    icon: ChevronRightIcon
+  })))));
+});
+export default Pagination;

package/lib/components/Pagination/Pagination.mdx

@@ -0,0 +1,68 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Pagination/Pagination" />
+
+# Pagination
+
+The Pagination component allows users to navigate through large datasets by dividing them into smaller, more manageable pages. It provides controls for navigating between pages and selecting the number of items displayed per page.
+
+### Features
+
+- Customizable offset options to control the number of items displayed per page.
+- Next/Previous navigation buttons for seamless page transitions.
+- Works in both controlled and uncontrolled states.
+- Integrates with `PaginationContext` for managing state.
+
+### Required Components
+
+This component requires the following components:
+- `PaginationProvider`
+- `ListView` (optional for displaying paginated data)
+
+### Accessibility
+
+This component adheres to the [WCAG 2.1 - 2.4.4 Link Purpose (In Context)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html) accessibility guidelines.
+
+#### Keyboard Navigation
+
+| Key           | Functions                          |
+|---------------|-----------------------------------|
+| Tab           | Moves focus between controls.    |
+| Enter         | Activates the focused control.   |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- **`aria-label`**: Provides an accessible name for the pagination controls.
+- **`aria-disabled`**: Indicates when navigation buttons are disabled.
+- **`aria-live`**: Updates screen readers with changes in pagination state.
+
+### Usage
+
+```tsx
+import { Pagination, PaginationProvider } from '@pingux/astro';
+
+<PaginationProvider>
+  <Pagination totalCount={250} />
+  <ListView
+    items={animals.slice(paginationState.firstRenderedIndex, paginationState.lastRenderedIndex).map(item => ({
+      name: item.name,
+      key: item.name,
+      id: item.name,
+    }))}
+  >
+    {(item) => (
+      <Item key={item.name}>
+        <ListViewItem
+          data={{
+            text: item.name,
+            icon: FormSelectIcon,
+          }}
+          iconProps={{
+            color: 'text.secondary',
+          }}
+        />
+      </Item>
+    )}
+  </ListView>
+</PaginationProvider>

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/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';