@zendeskgarden/react-pagination 9.12.3 → 9.12.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/elements/CursorPagination/components/First.js +4 -5
- package/dist/esm/elements/CursorPagination/components/Last.js +4 -5
- package/dist/esm/elements/CursorPagination/components/Next.js +4 -5
- package/dist/esm/elements/CursorPagination/components/Previous.js +4 -5
- package/dist/esm/elements/OffsetPagination/OffsetPagination.js +10 -11
- package/dist/esm/elements/OffsetPagination/components/Next.js +5 -5
- package/dist/esm/elements/OffsetPagination/components/Previous.js +5 -5
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-double-left-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js +4 -4
- package/dist/esm/styled/CursorPagination/StyledCursor.js +3 -3
- package/dist/esm/styled/CursorPagination/StyledCursorPagination.js +3 -3
- package/dist/esm/styled/OffsetPagination/StyledGapListItem.js +6 -7
- package/dist/esm/styled/OffsetPagination/StyledList.js +7 -8
- package/dist/esm/styled/OffsetPagination/StyledListItem.js +3 -3
- package/dist/esm/styled/OffsetPagination/StyledNav.js +1 -1
- package/dist/esm/styled/OffsetPagination/StyledNavigation.js +3 -3
- package/dist/esm/styled/OffsetPagination/StyledPage.js +5 -5
- package/dist/esm/styled/OffsetPagination/StyledPageBase.js +9 -10
- package/dist/index.cjs.js +44 -52
- package/package.json +4 -4
|
@@ -16,11 +16,10 @@ import '../../../styled/OffsetPagination/StyledGapListItem.js';
|
|
|
16
16
|
import '../../../styled/OffsetPagination/StyledNavigation.js';
|
|
17
17
|
import '../../../styled/OffsetPagination/StyledNav.js';
|
|
18
18
|
|
|
19
|
-
const FirstComponent = forwardRef((
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} = _ref;
|
|
19
|
+
const FirstComponent = forwardRef(({
|
|
20
|
+
children,
|
|
21
|
+
...other
|
|
22
|
+
}, ref) => {
|
|
24
23
|
return React__default.createElement(StyledCursor, Object.assign({
|
|
25
24
|
ref: ref
|
|
26
25
|
}, other), React__default.createElement(StyledIcon, {
|
|
@@ -16,11 +16,10 @@ import '../../../styled/OffsetPagination/StyledGapListItem.js';
|
|
|
16
16
|
import '../../../styled/OffsetPagination/StyledNavigation.js';
|
|
17
17
|
import '../../../styled/OffsetPagination/StyledNav.js';
|
|
18
18
|
|
|
19
|
-
const LastComponent = forwardRef((
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} = _ref;
|
|
19
|
+
const LastComponent = forwardRef(({
|
|
20
|
+
children,
|
|
21
|
+
...other
|
|
22
|
+
}, ref) => {
|
|
24
23
|
return React__default.createElement(StyledCursor, Object.assign({
|
|
25
24
|
ref: ref,
|
|
26
25
|
as: "button"
|
|
@@ -16,11 +16,10 @@ import '../../../styled/OffsetPagination/StyledGapListItem.js';
|
|
|
16
16
|
import '../../../styled/OffsetPagination/StyledNavigation.js';
|
|
17
17
|
import '../../../styled/OffsetPagination/StyledNav.js';
|
|
18
18
|
|
|
19
|
-
const NextComponent = forwardRef((
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} = _ref;
|
|
19
|
+
const NextComponent = forwardRef(({
|
|
20
|
+
children,
|
|
21
|
+
...other
|
|
22
|
+
}, ref) => {
|
|
24
23
|
return React__default.createElement(StyledCursor, Object.assign({
|
|
25
24
|
ref: ref,
|
|
26
25
|
as: "button"
|
|
@@ -16,11 +16,10 @@ import '../../../styled/OffsetPagination/StyledGapListItem.js';
|
|
|
16
16
|
import '../../../styled/OffsetPagination/StyledNavigation.js';
|
|
17
17
|
import '../../../styled/OffsetPagination/StyledNav.js';
|
|
18
18
|
|
|
19
|
-
const PreviousComponent = forwardRef((
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} = _ref;
|
|
19
|
+
const PreviousComponent = forwardRef(({
|
|
20
|
+
children,
|
|
21
|
+
...other
|
|
22
|
+
}, ref) => {
|
|
24
23
|
return React__default.createElement(StyledCursor, Object.assign({
|
|
25
24
|
ref: ref,
|
|
26
25
|
as: "button"
|
|
@@ -24,17 +24,16 @@ import { Gap } from './components/Gap.js';
|
|
|
24
24
|
|
|
25
25
|
const PREVIOUS_KEY = 'previous';
|
|
26
26
|
const NEXT_KEY = 'next';
|
|
27
|
-
const OffsetPagination = forwardRef((
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
} = _ref;
|
|
27
|
+
const OffsetPagination = forwardRef(({
|
|
28
|
+
currentPage: controlledCurrentPage,
|
|
29
|
+
totalPages,
|
|
30
|
+
pagePadding = 2,
|
|
31
|
+
pageGap = 2,
|
|
32
|
+
onChange,
|
|
33
|
+
'aria-label': ariaLabel,
|
|
34
|
+
labels,
|
|
35
|
+
...otherProps
|
|
36
|
+
}, ref) => {
|
|
38
37
|
const [focusedItem, setFocusedItem] = useState();
|
|
39
38
|
const [internalCurrentPage, setInternalCurrentPage] = useState(1);
|
|
40
39
|
const navigationLabel = useText(OffsetPagination, {
|
|
@@ -19,8 +19,8 @@ import '../../../styled/OffsetPagination/StyledGapListItem.js';
|
|
|
19
19
|
import { StyledNavigation } from '../../../styled/OffsetPagination/StyledNavigation.js';
|
|
20
20
|
import '../../../styled/OffsetPagination/StyledNav.js';
|
|
21
21
|
|
|
22
|
-
const NextComponent = forwardRef((props, ref) => {
|
|
23
|
-
const ariaLabel = useText(NextComponent, props, 'aria-label', 'Next page');
|
|
22
|
+
const NextComponent$1 = forwardRef((props, ref) => {
|
|
23
|
+
const ariaLabel = useText(NextComponent$1, props, 'aria-label', 'Next page');
|
|
24
24
|
const theme = useContext(ThemeContext);
|
|
25
25
|
return React__default.createElement(StyledNavigation, Object.assign({
|
|
26
26
|
type: "button"
|
|
@@ -29,7 +29,7 @@ const NextComponent = forwardRef((props, ref) => {
|
|
|
29
29
|
ref: ref
|
|
30
30
|
}), theme.rtl ? React__default.createElement(SvgChevronLeftStroke, null) : React__default.createElement(SvgChevronRightStroke, null));
|
|
31
31
|
});
|
|
32
|
-
NextComponent.displayName = 'Pagination.Next';
|
|
33
|
-
const Next = NextComponent;
|
|
32
|
+
NextComponent$1.displayName = 'Pagination.Next';
|
|
33
|
+
const Next$1 = NextComponent$1;
|
|
34
34
|
|
|
35
|
-
export { Next };
|
|
35
|
+
export { Next$1 as Next };
|
|
@@ -19,8 +19,8 @@ import '../../../styled/OffsetPagination/StyledGapListItem.js';
|
|
|
19
19
|
import { StyledNavigation } from '../../../styled/OffsetPagination/StyledNavigation.js';
|
|
20
20
|
import '../../../styled/OffsetPagination/StyledNav.js';
|
|
21
21
|
|
|
22
|
-
const PreviousComponent = forwardRef((props, ref) => {
|
|
23
|
-
const ariaLabel = useText(PreviousComponent, props, 'aria-label', 'Previous page');
|
|
22
|
+
const PreviousComponent$1 = forwardRef((props, ref) => {
|
|
23
|
+
const ariaLabel = useText(PreviousComponent$1, props, 'aria-label', 'Previous page');
|
|
24
24
|
const theme = useContext(ThemeContext);
|
|
25
25
|
return React__default.createElement(StyledNavigation, Object.assign({
|
|
26
26
|
type: "button"
|
|
@@ -29,7 +29,7 @@ const PreviousComponent = forwardRef((props, ref) => {
|
|
|
29
29
|
ref: ref
|
|
30
30
|
}), theme.rtl ? React__default.createElement(SvgChevronRightStroke, null) : React__default.createElement(SvgChevronLeftStroke, null));
|
|
31
31
|
});
|
|
32
|
-
PreviousComponent.displayName = 'Pagination.Previous';
|
|
33
|
-
const Previous = PreviousComponent;
|
|
32
|
+
PreviousComponent$1.displayName = 'Pagination.Previous';
|
|
33
|
+
const Previous$1 = PreviousComponent$1;
|
|
34
34
|
|
|
35
|
-
export { Previous };
|
|
35
|
+
export { Previous$1 as Previous };
|
package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-double-left-stroke.svg.js
CHANGED
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import * as React from 'react';
|
|
8
8
|
|
|
9
|
-
var _path;
|
|
10
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
9
|
+
var _path$1;
|
|
10
|
+
function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
|
|
11
11
|
var SvgChevronDoubleLeftStroke = function SvgChevronDoubleLeftStroke(props) {
|
|
12
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14
14
|
width: 16,
|
|
15
15
|
height: 16,
|
|
16
16
|
focusable: "false",
|
|
17
17
|
viewBox: "0 0 16 16",
|
|
18
18
|
"aria-hidden": "true"
|
|
19
|
-
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
|
|
20
20
|
fill: "currentColor",
|
|
21
21
|
d: "M7.812 13.39a.5.5 0 01-.64-.012l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L4.141 8l3.75 4.688a.5.5 0 01-.079.702zm5 0a.5.5 0 01-.64-.012l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L9.141 8l3.75 4.688a.5.5 0 01-.079.702z"
|
|
22
22
|
})));
|
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import * as React from 'react';
|
|
8
8
|
|
|
9
|
-
var _path;
|
|
10
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
9
|
+
var _path$3;
|
|
10
|
+
function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
|
|
11
11
|
var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
12
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends$3({
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14
14
|
width: 16,
|
|
15
15
|
height: 16,
|
|
16
16
|
focusable: "false",
|
|
17
17
|
viewBox: "0 0 16 16",
|
|
18
18
|
"aria-hidden": "true"
|
|
19
|
-
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
|
|
20
20
|
fill: "currentColor",
|
|
21
21
|
d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
|
|
22
22
|
})));
|
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import * as React from 'react';
|
|
8
8
|
|
|
9
|
-
var _path;
|
|
10
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
9
|
+
var _path$2;
|
|
10
|
+
function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
|
|
11
11
|
var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
|
|
12
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends$2({
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14
14
|
width: 16,
|
|
15
15
|
height: 16,
|
|
16
16
|
focusable: "false",
|
|
17
17
|
viewBox: "0 0 16 16",
|
|
18
18
|
"aria-hidden": "true"
|
|
19
|
-
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
}, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
|
|
20
20
|
fill: "currentColor",
|
|
21
21
|
d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
|
|
22
22
|
})));
|
|
@@ -8,10 +8,10 @@ import styled from 'styled-components';
|
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledPageBase } from '../OffsetPagination/StyledPageBase.js';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'cursor_pagination.cursor';
|
|
11
|
+
const COMPONENT_ID$3 = 'cursor_pagination.cursor';
|
|
12
12
|
const StyledCursor = styled(StyledPageBase).attrs({
|
|
13
|
-
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-id': COMPONENT_ID$3,
|
|
14
|
+
'data-garden-version': '9.12.5',
|
|
15
15
|
as: 'button'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledCursor",
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'cursor_pagination';
|
|
10
|
+
const COMPONENT_ID$4 = 'cursor_pagination';
|
|
11
11
|
const StyledCursorPagination = styled.nav.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$4,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledCursorPagination",
|
|
16
16
|
componentId: "sc-qmfecg-0"
|
|
@@ -9,7 +9,7 @@ import { math } from 'polished';
|
|
|
9
9
|
import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledListItem } from './StyledListItem.js';
|
|
11
11
|
|
|
12
|
-
const COMPONENT_ID = 'pagination.gap';
|
|
12
|
+
const COMPONENT_ID$2 = 'pagination.gap';
|
|
13
13
|
const sizeStyles = props => {
|
|
14
14
|
const shift = 2;
|
|
15
15
|
const fontSize = math(`${props.theme.fontSizes.md} + ${shift}`);
|
|
@@ -18,18 +18,17 @@ const sizeStyles = props => {
|
|
|
18
18
|
const padding = `${props.theme.space.base * 1.5}px`;
|
|
19
19
|
return css(["padding:0 ", ";min-width:", ";max-width:", ";height:", ";line-height:", ";font-size:", ";"], padding, height, math(`${height} * 2`), height, lineHeight, fontSize);
|
|
20
20
|
};
|
|
21
|
-
const colorStyles =
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
} = _ref;
|
|
21
|
+
const colorStyles = ({
|
|
22
|
+
theme
|
|
23
|
+
}) => {
|
|
25
24
|
return css(["color:", ";"], getColor({
|
|
26
25
|
variable: 'foreground.subtle',
|
|
27
26
|
theme
|
|
28
27
|
}));
|
|
29
28
|
};
|
|
30
29
|
const StyledGapListItem = styled(StyledListItem).attrs({
|
|
31
|
-
'data-garden-id': COMPONENT_ID,
|
|
32
|
-
'data-garden-version': '9.12.
|
|
30
|
+
'data-garden-id': COMPONENT_ID$2,
|
|
31
|
+
'data-garden-version': '9.12.5'
|
|
33
32
|
}).withConfig({
|
|
34
33
|
displayName: "StyledGapListItem",
|
|
35
34
|
componentId: "sc-10wd0iz-0"
|
|
@@ -7,22 +7,21 @@
|
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'pagination.list';
|
|
11
|
-
const colorStyles =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
} = _ref;
|
|
10
|
+
const COMPONENT_ID$8 = 'pagination.list';
|
|
11
|
+
const colorStyles$2 = ({
|
|
12
|
+
theme
|
|
13
|
+
}) => {
|
|
15
14
|
return css(["color:", ";"], getColor({
|
|
16
15
|
variable: 'foreground.subtle',
|
|
17
16
|
theme
|
|
18
17
|
}));
|
|
19
18
|
};
|
|
20
19
|
const StyledList = styled.ul.attrs({
|
|
21
|
-
'data-garden-id': COMPONENT_ID,
|
|
22
|
-
'data-garden-version': '9.12.
|
|
20
|
+
'data-garden-id': COMPONENT_ID$8,
|
|
21
|
+
'data-garden-version': '9.12.5'
|
|
23
22
|
}).withConfig({
|
|
24
23
|
displayName: "StyledList",
|
|
25
24
|
componentId: "sc-1uz2jxo-0"
|
|
26
|
-
})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;list-style:none;white-space:nowrap;", " &:focus{outline:none;}", ";"], p => p.theme.rtl && 'rtl', colorStyles, componentStyles);
|
|
25
|
+
})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;list-style:none;white-space:nowrap;", " &:focus{outline:none;}", ";"], p => p.theme.rtl && 'rtl', colorStyles$2, componentStyles);
|
|
27
26
|
|
|
28
27
|
export { StyledList };
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'pagination.list_item';
|
|
10
|
+
const COMPONENT_ID$7 = 'pagination.list_item';
|
|
11
11
|
const StyledListItem = styled.li.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$7,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledListItem",
|
|
16
16
|
componentId: "sc-16j4sju-0"
|
|
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'pagination.pagination_view';
|
|
11
11
|
const StyledNav = styled.nav.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledNav",
|
|
16
16
|
componentId: "sc-ppnpkw-0"
|
|
@@ -8,10 +8,10 @@ import styled from 'styled-components';
|
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledPage } from './StyledPage.js';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'pagination.navigation';
|
|
11
|
+
const COMPONENT_ID$1 = 'pagination.navigation';
|
|
12
12
|
const StyledNavigation = styled(StyledPage).attrs({
|
|
13
|
-
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-id': COMPONENT_ID$1,
|
|
14
|
+
'data-garden-version': '9.12.5'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledNavigation",
|
|
17
17
|
componentId: "sc-1lpl8pp-0"
|
|
@@ -8,17 +8,17 @@ import styled, { css } from 'styled-components';
|
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledPageBase } from './StyledPageBase.js';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'pagination.page';
|
|
12
|
-
const sizeStyles = props => {
|
|
11
|
+
const COMPONENT_ID$5 = 'pagination.page';
|
|
12
|
+
const sizeStyles$1 = props => {
|
|
13
13
|
const height = props.theme.space.base * 8;
|
|
14
14
|
return css(["min-width:", "px;max-width:", "px;&[aria-current='true']{max-width:none;}"], height, height * 2);
|
|
15
15
|
};
|
|
16
16
|
const StyledPage = styled(StyledPageBase).attrs({
|
|
17
|
-
'data-garden-id': COMPONENT_ID,
|
|
18
|
-
'data-garden-version': '9.12.
|
|
17
|
+
'data-garden-id': COMPONENT_ID$5,
|
|
18
|
+
'data-garden-version': '9.12.5'
|
|
19
19
|
}).withConfig({
|
|
20
20
|
displayName: "StyledPage",
|
|
21
21
|
componentId: "sc-sxjfwy-0"
|
|
22
|
-
})(["", ";&[aria-current=\"true\"]{font-weight:", ";}", ";"], props => sizeStyles(props), props => props.theme.fontWeights.semibold, componentStyles);
|
|
22
|
+
})(["", ";&[aria-current=\"true\"]{font-weight:", ";}", ";"], props => sizeStyles$1(props), props => props.theme.fontWeights.semibold, componentStyles);
|
|
23
23
|
|
|
24
24
|
export { StyledPage };
|
|
@@ -5,13 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { componentStyles, getColor, focusStyles
|
|
8
|
+
import { componentStyles, getLineHeight, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'pagination.page';
|
|
11
|
-
const colorStyles =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
} = _ref;
|
|
10
|
+
const COMPONENT_ID$6 = 'pagination.page';
|
|
11
|
+
const colorStyles$1 = ({
|
|
12
|
+
theme
|
|
13
|
+
}) => {
|
|
15
14
|
const disabledColor = getColor({
|
|
16
15
|
variable: 'foreground.disabled',
|
|
17
16
|
theme
|
|
@@ -72,7 +71,7 @@ const colorStyles = _ref => {
|
|
|
72
71
|
inset: true
|
|
73
72
|
}), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, disabledColor);
|
|
74
73
|
};
|
|
75
|
-
const sizeStyles = props => {
|
|
74
|
+
const sizeStyles$2 = props => {
|
|
76
75
|
const fontSize = props.theme.fontSizes.md;
|
|
77
76
|
const height = `${props.theme.space.base * 8}px`;
|
|
78
77
|
const lineHeight = getLineHeight(height, fontSize);
|
|
@@ -80,11 +79,11 @@ const sizeStyles = props => {
|
|
|
80
79
|
return css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], padding, height, lineHeight, fontSize);
|
|
81
80
|
};
|
|
82
81
|
const StyledPageBase = styled.button.attrs({
|
|
83
|
-
'data-garden-id': COMPONENT_ID,
|
|
84
|
-
'data-garden-version': '9.12.
|
|
82
|
+
'data-garden-id': COMPONENT_ID$6,
|
|
83
|
+
'data-garden-version': '9.12.5'
|
|
85
84
|
}).withConfig({
|
|
86
85
|
displayName: "StyledPageBase",
|
|
87
86
|
componentId: "sc-ttwj4u-0"
|
|
88
|
-
})(["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;font-family:inherit;user-select:none;", ";&[aria-current='page']{font-weight:", ";}&::-moz-focus-inner{border:0;}&: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), componentStyles);
|
|
87
|
+
})(["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;font-family:inherit;user-select:none;", ";&[aria-current='page']{font-weight:", ";}&::-moz-focus-inner{border:0;}&:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => props.theme.fontWeights.semibold, props => colorStyles$1(props), componentStyles);
|
|
89
88
|
|
|
90
89
|
export { StyledPageBase };
|
package/dist/index.cjs.js
CHANGED
|
@@ -38,10 +38,9 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
|
38
38
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
39
39
|
|
|
40
40
|
const COMPONENT_ID$8 = 'pagination.list';
|
|
41
|
-
const colorStyles$2 =
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
} = _ref;
|
|
41
|
+
const colorStyles$2 = ({
|
|
42
|
+
theme
|
|
43
|
+
}) => {
|
|
45
44
|
return styled.css(["color:", ";"], reactTheming.getColor({
|
|
46
45
|
variable: 'foreground.subtle',
|
|
47
46
|
theme
|
|
@@ -49,7 +48,7 @@ const colorStyles$2 = _ref => {
|
|
|
49
48
|
};
|
|
50
49
|
const StyledList = styled__default.default.ul.attrs({
|
|
51
50
|
'data-garden-id': COMPONENT_ID$8,
|
|
52
|
-
'data-garden-version': '9.12.
|
|
51
|
+
'data-garden-version': '9.12.5'
|
|
53
52
|
}).withConfig({
|
|
54
53
|
displayName: "StyledList",
|
|
55
54
|
componentId: "sc-1uz2jxo-0"
|
|
@@ -58,17 +57,16 @@ const StyledList = styled__default.default.ul.attrs({
|
|
|
58
57
|
const COMPONENT_ID$7 = 'pagination.list_item';
|
|
59
58
|
const StyledListItem = styled__default.default.li.attrs({
|
|
60
59
|
'data-garden-id': COMPONENT_ID$7,
|
|
61
|
-
'data-garden-version': '9.12.
|
|
60
|
+
'data-garden-version': '9.12.5'
|
|
62
61
|
}).withConfig({
|
|
63
62
|
displayName: "StyledListItem",
|
|
64
63
|
componentId: "sc-16j4sju-0"
|
|
65
64
|
})(["box-sizing:border-box;margin-left:", ";user-select:none;&", "{margin-left:0;}", ";"], props => `${props.theme.space.base}px`, props => props.theme.rtl ? ':last-of-type' : ':first-of-type', reactTheming.componentStyles);
|
|
66
65
|
|
|
67
66
|
const COMPONENT_ID$6 = 'pagination.page';
|
|
68
|
-
const colorStyles$1 =
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
} = _ref;
|
|
67
|
+
const colorStyles$1 = ({
|
|
68
|
+
theme
|
|
69
|
+
}) => {
|
|
72
70
|
const disabledColor = reactTheming.getColor({
|
|
73
71
|
variable: 'foreground.disabled',
|
|
74
72
|
theme
|
|
@@ -138,7 +136,7 @@ const sizeStyles$2 = props => {
|
|
|
138
136
|
};
|
|
139
137
|
const StyledPageBase = styled__default.default.button.attrs({
|
|
140
138
|
'data-garden-id': COMPONENT_ID$6,
|
|
141
|
-
'data-garden-version': '9.12.
|
|
139
|
+
'data-garden-version': '9.12.5'
|
|
142
140
|
}).withConfig({
|
|
143
141
|
displayName: "StyledPageBase",
|
|
144
142
|
componentId: "sc-ttwj4u-0"
|
|
@@ -151,7 +149,7 @@ const sizeStyles$1 = props => {
|
|
|
151
149
|
};
|
|
152
150
|
const StyledPage = styled__default.default(StyledPageBase).attrs({
|
|
153
151
|
'data-garden-id': COMPONENT_ID$5,
|
|
154
|
-
'data-garden-version': '9.12.
|
|
152
|
+
'data-garden-version': '9.12.5'
|
|
155
153
|
}).withConfig({
|
|
156
154
|
displayName: "StyledPage",
|
|
157
155
|
componentId: "sc-sxjfwy-0"
|
|
@@ -160,7 +158,7 @@ const StyledPage = styled__default.default(StyledPageBase).attrs({
|
|
|
160
158
|
const COMPONENT_ID$4 = 'cursor_pagination';
|
|
161
159
|
const StyledCursorPagination = styled__default.default.nav.attrs({
|
|
162
160
|
'data-garden-id': COMPONENT_ID$4,
|
|
163
|
-
'data-garden-version': '9.12.
|
|
161
|
+
'data-garden-version': '9.12.5'
|
|
164
162
|
}).withConfig({
|
|
165
163
|
displayName: "StyledCursorPagination",
|
|
166
164
|
componentId: "sc-qmfecg-0"
|
|
@@ -169,7 +167,7 @@ const StyledCursorPagination = styled__default.default.nav.attrs({
|
|
|
169
167
|
const COMPONENT_ID$3 = 'cursor_pagination.cursor';
|
|
170
168
|
const StyledCursor = styled__default.default(StyledPageBase).attrs({
|
|
171
169
|
'data-garden-id': COMPONENT_ID$3,
|
|
172
|
-
'data-garden-version': '9.12.
|
|
170
|
+
'data-garden-version': '9.12.5',
|
|
173
171
|
as: 'button'
|
|
174
172
|
}).withConfig({
|
|
175
173
|
displayName: "StyledCursor",
|
|
@@ -201,10 +199,9 @@ const sizeStyles = props => {
|
|
|
201
199
|
const padding = `${props.theme.space.base * 1.5}px`;
|
|
202
200
|
return styled.css(["padding:0 ", ";min-width:", ";max-width:", ";height:", ";line-height:", ";font-size:", ";"], padding, height, polished.math(`${height} * 2`), height, lineHeight, fontSize);
|
|
203
201
|
};
|
|
204
|
-
const colorStyles =
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
} = _ref;
|
|
202
|
+
const colorStyles = ({
|
|
203
|
+
theme
|
|
204
|
+
}) => {
|
|
208
205
|
return styled.css(["color:", ";"], reactTheming.getColor({
|
|
209
206
|
variable: 'foreground.subtle',
|
|
210
207
|
theme
|
|
@@ -212,7 +209,7 @@ const colorStyles = _ref => {
|
|
|
212
209
|
};
|
|
213
210
|
const StyledGapListItem = styled__default.default(StyledListItem).attrs({
|
|
214
211
|
'data-garden-id': COMPONENT_ID$2,
|
|
215
|
-
'data-garden-version': '9.12.
|
|
212
|
+
'data-garden-version': '9.12.5'
|
|
216
213
|
}).withConfig({
|
|
217
214
|
displayName: "StyledGapListItem",
|
|
218
215
|
componentId: "sc-10wd0iz-0"
|
|
@@ -221,7 +218,7 @@ const StyledGapListItem = styled__default.default(StyledListItem).attrs({
|
|
|
221
218
|
const COMPONENT_ID$1 = 'pagination.navigation';
|
|
222
219
|
const StyledNavigation = styled__default.default(StyledPage).attrs({
|
|
223
220
|
'data-garden-id': COMPONENT_ID$1,
|
|
224
|
-
'data-garden-version': '9.12.
|
|
221
|
+
'data-garden-version': '9.12.5'
|
|
225
222
|
}).withConfig({
|
|
226
223
|
displayName: "StyledNavigation",
|
|
227
224
|
componentId: "sc-1lpl8pp-0"
|
|
@@ -230,7 +227,7 @@ const StyledNavigation = styled__default.default(StyledPage).attrs({
|
|
|
230
227
|
const COMPONENT_ID = 'pagination.pagination_view';
|
|
231
228
|
const StyledNav = styled__default.default.nav.attrs({
|
|
232
229
|
'data-garden-id': COMPONENT_ID,
|
|
233
|
-
'data-garden-version': '9.12.
|
|
230
|
+
'data-garden-version': '9.12.5'
|
|
234
231
|
}).withConfig({
|
|
235
232
|
displayName: "StyledNav",
|
|
236
233
|
componentId: "sc-ppnpkw-0"
|
|
@@ -318,17 +315,16 @@ const Gap = GapComponent;
|
|
|
318
315
|
|
|
319
316
|
const PREVIOUS_KEY = 'previous';
|
|
320
317
|
const NEXT_KEY = 'next';
|
|
321
|
-
const OffsetPagination = React.forwardRef((
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
} = _ref;
|
|
318
|
+
const OffsetPagination = React.forwardRef(({
|
|
319
|
+
currentPage: controlledCurrentPage,
|
|
320
|
+
totalPages,
|
|
321
|
+
pagePadding = 2,
|
|
322
|
+
pageGap = 2,
|
|
323
|
+
onChange,
|
|
324
|
+
'aria-label': ariaLabel,
|
|
325
|
+
labels,
|
|
326
|
+
...otherProps
|
|
327
|
+
}, ref) => {
|
|
332
328
|
const [focusedItem, setFocusedItem] = React.useState();
|
|
333
329
|
const [internalCurrentPage, setInternalCurrentPage] = React.useState(1);
|
|
334
330
|
const navigationLabel = reactTheming.useText(OffsetPagination, {
|
|
@@ -466,11 +462,10 @@ var SvgChevronDoubleLeftStroke = function SvgChevronDoubleLeftStroke(props) {
|
|
|
466
462
|
})));
|
|
467
463
|
};
|
|
468
464
|
|
|
469
|
-
const FirstComponent = React.forwardRef((
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
} = _ref;
|
|
465
|
+
const FirstComponent = React.forwardRef(({
|
|
466
|
+
children,
|
|
467
|
+
...other
|
|
468
|
+
}, ref) => {
|
|
474
469
|
return React__namespace.default.createElement(StyledCursor, Object.assign({
|
|
475
470
|
ref: ref
|
|
476
471
|
}, other), React__namespace.default.createElement(StyledIcon, {
|
|
@@ -480,11 +475,10 @@ const FirstComponent = React.forwardRef((_ref, ref) => {
|
|
|
480
475
|
FirstComponent.displayName = 'CursorPagination.First';
|
|
481
476
|
const First = FirstComponent;
|
|
482
477
|
|
|
483
|
-
const NextComponent = React.forwardRef((
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
} = _ref;
|
|
478
|
+
const NextComponent = React.forwardRef(({
|
|
479
|
+
children,
|
|
480
|
+
...other
|
|
481
|
+
}, ref) => {
|
|
488
482
|
return React__namespace.default.createElement(StyledCursor, Object.assign({
|
|
489
483
|
ref: ref,
|
|
490
484
|
as: "button"
|
|
@@ -495,11 +489,10 @@ const NextComponent = React.forwardRef((_ref, ref) => {
|
|
|
495
489
|
NextComponent.displayName = 'CursorPagination.Next';
|
|
496
490
|
const Next = NextComponent;
|
|
497
491
|
|
|
498
|
-
const PreviousComponent = React.forwardRef((
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
} = _ref;
|
|
492
|
+
const PreviousComponent = React.forwardRef(({
|
|
493
|
+
children,
|
|
494
|
+
...other
|
|
495
|
+
}, ref) => {
|
|
503
496
|
return React__namespace.default.createElement(StyledCursor, Object.assign({
|
|
504
497
|
ref: ref,
|
|
505
498
|
as: "button"
|
|
@@ -526,11 +519,10 @@ var SvgChevronDoubleRightStroke = function SvgChevronDoubleRightStroke(props) {
|
|
|
526
519
|
})));
|
|
527
520
|
};
|
|
528
521
|
|
|
529
|
-
const LastComponent = React.forwardRef((
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
} = _ref;
|
|
522
|
+
const LastComponent = React.forwardRef(({
|
|
523
|
+
children,
|
|
524
|
+
...other
|
|
525
|
+
}, ref) => {
|
|
534
526
|
return React__namespace.default.createElement(StyledCursor, Object.assign({
|
|
535
527
|
ref: ref,
|
|
536
528
|
as: "button"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-pagination",
|
|
3
|
-
"version": "9.12.
|
|
3
|
+
"version": "9.12.5",
|
|
4
4
|
"description": "Components relating to pagination in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"styled-components": "^5.3.1 || ^6.0.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@zendeskgarden/react-theming": "^9.12.
|
|
36
|
-
"@zendeskgarden/svg-icons": "7.
|
|
35
|
+
"@zendeskgarden/react-theming": "^9.12.5",
|
|
36
|
+
"@zendeskgarden/svg-icons": "7.6.0"
|
|
37
37
|
},
|
|
38
38
|
"keywords": [
|
|
39
39
|
"components",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
47
|
"zendeskgarden:src": "src/index.ts",
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "a4edcee778788b0e30fc17671b95a6e239e27912"
|
|
49
49
|
}
|