@zendeskgarden/react-pagination 8.75.1 → 8.76.0

package/dist/esm/styled/CursorPagination/StyledIcon.js

@@ -0,0 +1,36 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { cloneElement, Children } from 'react';
+import styled, { css } from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const marginStyles = props => {
+  const {
+    type,
+    theme
+  } = props;
+  const margin = theme.space.base;
+  if (theme.rtl) {
+    return css(["margin-", ":", "px;"], type === 'last' || type === 'next' ? 'right' : 'left', margin);
+  }
+  return css(["margin-", ":", "px;"], type === 'first' || type === 'previous' ? 'right' : 'left', margin);
+};
+const StyledIcon = styled(_ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return cloneElement(Children.only(children), props);
+}).withConfig({
+  displayName: "StyledIcon",
+  componentId: "sc-2vzk6e-0"
+})(["", " transform:", ";"], marginStyles, props => props.theme.rtl && 'rotate(180deg)');
+StyledIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledIcon };

package/dist/esm/styled/Pagination/StyledGap.js

@@ -0,0 +1,30 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledPage } from './StyledPage.js';
+
+const COMPONENT_ID = 'pagination.gap';
+const sizeStyles = props => {
+  const shift = 2;
+  const marginTop = `-${shift}px`;
+  const fontSize = math(`${props.theme.fontSizes.md} + ${shift}`);
+  return css(["margin-top:", ";font-size:", ";"], marginTop, fontSize);
+};
+const StyledGap = styled(StyledPage).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledGap",
+  componentId: "sc-1hqjltf-0"
+})(["cursor:default;", ";&:hover{background-color:transparent;color:inherit;}", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGap.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGap };

package/dist/esm/styled/Pagination/StyledNavigation.js

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledPage } from './StyledPage.js';
+
+const COMPONENT_ID = 'pagination.navigation';
+const StyledNavigation = styled(StyledPage).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledNavigation",
+  componentId: "sc-184uuwe-0"
+})(["display:flex;align-items:center;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNavigation.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNavigation };

package/dist/esm/styled/Pagination/StyledPage.js

@@ -0,0 +1,28 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledPageBase } from './StyledPageBase.js';
+
+const COMPONENT_ID = 'pagination.page';
+const sizeStyles = props => {
+  const height = `${props.theme.space.base * 8}px`;
+  return css(["min-width:", ";max-width:", ";&[aria-current='true']{max-width:none;}"], height, math(`${height} * 2`));
+};
+const StyledPage = styled(StyledPageBase).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledPage",
+  componentId: "sc-1k0een3-0"
+})(["margin-left:", ";", ";&[aria-current=\"true\"]{font-weight:", ";}&", "{margin-left:0;}", ";"], props => `${props.theme.space.base}px`, props => sizeStyles(props), props => props.theme.fontWeights.semibold, props => props.theme.rtl ? ':last-of-type' : ':first-of-type', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPage.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPage };

package/dist/esm/styled/Pagination/StyledPageBase.js

@@ -0,0 +1,44 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pagination.page';
+const colorStyles = props => {
+  const defaultColor = getColorV8('neutralHue', 600, props.theme);
+  const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme);
+  const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
+  const activeForegroundColor = getColorV8('neutralHue', 800, props.theme);
+  const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
+  const currentForegroundColor = activeForegroundColor;
+  const currentBackgroundColor = hoverBackgroundColor;
+  const currentHoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.16);
+  const currentActiveBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28);
+  return css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='true']{background-color:", ";color:", ";}&[aria-current='true']:hover{background-color:", ";}&[aria-current='true']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
+    theme: props.theme,
+    inset: true
+  }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, getColorV8('grey', 300, props.theme));
+};
+const sizeStyles = props => {
+  const fontSize = props.theme.fontSizes.md;
+  const height = `${props.theme.space.base * 8}px`;
+  const lineHeight = getLineHeight(height, fontSize);
+  const padding = `${props.theme.space.base * 1.5}px`;
+  return css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], padding, height, lineHeight, fontSize);
+};
+const StyledPageBase = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledPageBase",
+  componentId: "sc-lw1w9j-0"
+})(["box-sizing:border-box;display:inline-block;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;visibility:", ";border-radius:", ";cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;user-select:none;", ";&[aria-current='true']{font-weight:", ";}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles(props), props => props.theme.fontWeights.semibold, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPageBase.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPageBase };

package/dist/esm/styled/Pagination/StyledPagination.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pagination.pagination_view';
+const StyledPagination = styled.ul.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledPagination",
+  componentId: "sc-1b7nye9-0"
+})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPagination.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPagination };

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -39,25 +38,10 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-function _extends$4() {
-  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$4.apply(this, arguments);
-}
-
 const COMPONENT_ID$6 = 'pagination.pagination_view';
 const StyledPagination = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.75.1'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledPagination",
   componentId: "sc-1b7nye9-0"
@@ -91,7 +75,7 @@ const sizeStyles$2 = props => {
 };
 const StyledPageBase = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.75.1'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledPageBase",
   componentId: "sc-lw1w9j-0"
@@ -107,7 +91,7 @@ const sizeStyles$1 = props => {
 };
 const StyledPage = styled__default.default(StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.75.1'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledPage",
   componentId: "sc-1k0een3-0"
@@ -119,7 +103,7 @@ StyledPage.defaultProps = {
 const COMPONENT_ID$3 = 'cursor_pagination';
 const StyledCursorPagination = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.75.1'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledCursorPagination",
   componentId: "sc-qmfecg-0"
@@ -131,7 +115,7 @@ StyledCursorPagination.defaultProps = {
 const COMPONENT_ID$2 = 'cursor_pagination.cursor';
 const StyledCursor = styled__default.default(StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.75.1',
+  'data-garden-version': '8.76.0',
   as: 'button'
 }).withConfig({
   displayName: "StyledCursor",
@@ -175,7 +159,7 @@ const sizeStyles = props => {
 };
 const StyledGap = styled__default.default(StyledPage).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.75.1'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledGap",
   componentId: "sc-1hqjltf-0"
@@ -187,7 +171,7 @@ StyledGap.defaultProps = {
 const COMPONENT_ID = 'pagination.navigation';
 const StyledNavigation = styled__default.default(StyledPage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.75.1'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledNavigation",
   componentId: "sc-184uuwe-0"
@@ -231,7 +215,7 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
 const PreviousComponent$1 = React.forwardRef((props, ref) => {
   const ariaLabel = reactTheming.useText(PreviousComponent$1, props, 'aria-label', 'Previous page');
   const theme = React.useContext(styled.ThemeContext);
-  return React__namespace.default.createElement(StyledNavigation, _extends$4({}, props, {
+  return React__namespace.default.createElement(StyledNavigation, Object.assign({}, props, {
     "aria-label": ariaLabel,
     ref: ref
   }), theme.rtl ? React__namespace.default.createElement(SvgChevronRightStroke, null) : React__namespace.default.createElement(SvgChevronLeftStroke, null));
@@ -242,7 +226,7 @@ const Previous$1 = PreviousComponent$1;
 const NextComponent$1 = React.forwardRef((props, ref) => {
   const ariaLabel = reactTheming.useText(NextComponent$1, props, 'aria-label', 'Next page');
   const theme = React.useContext(styled.ThemeContext);
-  return React__namespace.default.createElement(StyledNavigation, _extends$4({}, props, {
+  return React__namespace.default.createElement(StyledNavigation, Object.assign({}, props, {
     "aria-label": ariaLabel,
     ref: ref
   }), theme.rtl ? React__namespace.default.createElement(SvgChevronLeftStroke, null) : React__namespace.default.createElement(SvgChevronRightStroke, null));
@@ -253,7 +237,7 @@ const Next$1 = NextComponent$1;
 const PageComponent = React.forwardRef((props, ref) => {
   const text = props['aria-current'] ? `Current page, page ${props.children}` : `Page ${props.children}`;
   const ariaLabel = reactTheming.useText(PageComponent, props, 'aria-label', text);
-  return React__namespace.default.createElement(StyledPage, _extends$4({}, props, {
+  return React__namespace.default.createElement(StyledPage, Object.assign({}, props, {
     "aria-label": ariaLabel,
     ref: ref
   }));
@@ -261,7 +245,7 @@ const PageComponent = React.forwardRef((props, ref) => {
 PageComponent.displayName = 'Pagination.Page';
 const Page = PageComponent;
 
-const GapComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledGap, _extends$4({}, props, {
+const GapComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledGap, Object.assign({}, props, {
   ref: ref
 }), "\u2026"));
 GapComponent.displayName = 'Pagination.Gap';
@@ -339,7 +323,7 @@ const Pagination = React.forwardRef((_ref, ref) => {
       }),
       'aria-label': undefined
     };
-    return React__namespace.default.createElement(Previous$1, _extends$4({
+    return React__namespace.default.createElement(Previous$1, Object.assign({
       isFocused: focusedItem === PREVIOUS_KEY
     }, getTransformedProps('previous', props), {
       ref: focusRef
@@ -360,13 +344,13 @@ const Pagination = React.forwardRef((_ref, ref) => {
       }),
       'aria-label': undefined
     };
-    return React__namespace.default.createElement(Next$1, _extends$4({
+    return React__namespace.default.createElement(Next$1, Object.assign({
       isFocused: focusedItem === NEXT_KEY
     }, getTransformedProps('next', props), {
       ref: focusRef
     }));
   };
-  const createGap = pageIndex => React__namespace.default.createElement(Gap, _extends$4({
+  const createGap = pageIndex => React__namespace.default.createElement(Gap, Object.assign({
     key: `gap-${pageIndex}`
   }, getTransformedProps('gap')));
   const createPage = pageIndex => {
@@ -381,7 +365,7 @@ const Pagination = React.forwardRef((_ref, ref) => {
       'aria-label': undefined,
       title: pageIndex
     };
-    return React__namespace.default.createElement(Page, _extends$4({
+    return React__namespace.default.createElement(Page, Object.assign({
       key: pageIndex
     }, getTransformedProps('page', props, pageIndex), {
       ref: focusRef
@@ -431,7 +415,7 @@ const Pagination = React.forwardRef((_ref, ref) => {
     }
     return pages;
   };
-  return React__namespace.default.createElement(StyledPagination, _extends$4({}, getContainerProps({
+  return React__namespace.default.createElement(StyledPagination, Object.assign({}, getContainerProps({
     role: null
   }), otherProps, {
     ref: ref
@@ -472,7 +456,7 @@ const FirstComponent = React.forwardRef((_ref, ref) => {
     children,
     ...other
   } = _ref;
-  return React__namespace.default.createElement(StyledCursor, _extends$4({
+  return React__namespace.default.createElement(StyledCursor, Object.assign({
     ref: ref
   }, other), React__namespace.default.createElement(StyledIcon, {
     type: "first"
@@ -486,7 +470,7 @@ const NextComponent = React.forwardRef((_ref, ref) => {
     children,
     ...other
   } = _ref;
-  return React__namespace.default.createElement(StyledCursor, _extends$4({
+  return React__namespace.default.createElement(StyledCursor, Object.assign({
     ref: ref,
     as: "button"
   }, other), React__namespace.default.createElement("span", null, children), React__namespace.default.createElement(StyledIcon, {
@@ -501,7 +485,7 @@ const PreviousComponent = React.forwardRef((_ref, ref) => {
     children,
     ...other
   } = _ref;
-  return React__namespace.default.createElement(StyledCursor, _extends$4({
+  return React__namespace.default.createElement(StyledCursor, Object.assign({
     ref: ref,
     as: "button"
   }, other), React__namespace.default.createElement(StyledIcon, {
@@ -532,7 +516,7 @@ const LastComponent = React.forwardRef((_ref, ref) => {
     children,
     ...other
   } = _ref;
-  return React__namespace.default.createElement(StyledCursor, _extends$4({
+  return React__namespace.default.createElement(StyledCursor, Object.assign({
     ref: ref,
     as: "button"
   }, other), React__namespace.default.createElement("span", null, children), React__namespace.default.createElement(StyledIcon, {
@@ -542,7 +526,7 @@ const LastComponent = React.forwardRef((_ref, ref) => {
 LastComponent.displayName = 'CursorPagination.Last';
 const Last = LastComponent;
 
-const CursorPaginationComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledCursorPagination, _extends$4({
+const CursorPaginationComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledCursorPagination, Object.assign({
   ref: ref
 }, props)));
 CursorPaginationComponent.displayName = 'CursorPagination';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-pagination",
-  "version": "8.75.1",
+  "version": "8.76.0",
   "description": "Components relating to pagination in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -27,13 +27,13 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": "^8.75.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.75.1",
+    "@zendeskgarden/react-theming": "^8.76.0",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "8e2bb36bcfef722db47a135fc987f72597be5000"
+  "gitHead": "3e52650c39fd1085a2e97b40a43eed7bc1e21937"
 }