@elliemae/ds-pagination 2.3.0-rc.2 → 2.3.1-rc.1

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.
Files changed (8) hide show
  1. package/cjs/parts/Paginator.js +20 -10
  2. package/cjs/parts/PerPageSelector.js +14 -6
  3. package/cjs/styled.js +3 -3
  4. package/esm/parts/Paginator.js +22 -12
  5. package/esm/parts/PerPageSelector.js +15 -7
  6. package/esm/styled.js +4 -4
  7. package/package.json +11 -9
  8. package/types/styled.d.ts +2 -2
package/cjs/parts/Paginator.js CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  var _jsx = require('@babel/runtime/helpers/jsx');
4
4
  require('core-js/modules/web.dom-collections.iterator.js');
5
+ require('core-js/modules/esnext.async-iterator.map.js');
6
+ require('core-js/modules/esnext.iterator.map.js');
5
7
  require('core-js/modules/esnext.async-iterator.reduce.js');
6
8
  require('core-js/modules/esnext.iterator.constructor.js');
7
9
  require('core-js/modules/esnext.iterator.reduce.js');
8
- require('core-js/modules/esnext.async-iterator.map.js');
9
- require('core-js/modules/esnext.iterator.map.js');
10
10
  var react = require('react');
11
11
  var dsIcons = require('@elliemae/ds-icons');
12
12
  var dsUtilities = require('@elliemae/ds-utilities');
@@ -37,7 +37,6 @@ const Paginator = props => {
37
37
  const [isOpened, setIsOpened] = react.useState(false);
38
38
  const btnRef = react.useRef(null);
39
39
  const pageInfoRef = react.useRef(null);
40
- const longestPageDetail = pageDetails.reduce((acc, cur) => acc.length > cur.length ? acc : cur, '');
41
40
  const {
42
41
  width: btnWidth
43
42
  } = dsUtilities.useOnElementResize(btnRef);
@@ -81,6 +80,12 @@ const Paginator = props => {
81
80
  } // eslint-disable-next-line react-hooks/exhaustive-deps
82
81
 
83
82
  }, [isOpened]);
83
+ const [detailWidth, setDetailWidth] = react.useState(0);
84
+ react.useLayoutEffect(() => {
85
+ const invisibleDetails = [...document.body.querySelectorAll('[data-testid="ds-pagination-invisible-detail-for-width-calc"]')];
86
+ const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);
87
+ setDetailWidth(maxWidth);
88
+ }, [pageDetails]);
84
89
  const onKeyDown = usePaginationSearch.usePaginationSearch(pageCount, actionRef);
85
90
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
86
91
  children: [_PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {})), /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
@@ -102,11 +107,11 @@ const Paginator = props => {
102
107
  setIsOpened(false);
103
108
  (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
104
109
  },
105
- customOffset: [0, 2],
106
- startPlacementPreference: "top-end",
110
+ customOffset: [-23, 2],
111
+ startPlacementPreference: "top-start",
107
112
  actionRef: actionRef,
108
113
  onKeyDown: onKeyDown,
109
- minWidth: btnWidth + 23,
114
+ minWidth: pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90,
110
115
  maxHeight: 300,
111
116
  HeaderComp: () => pageDetailsTitle !== '' ? /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
112
117
  cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
@@ -124,7 +129,7 @@ const Paginator = props => {
124
129
  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
125
130
  gutter: "xxs",
126
131
  alignItems: "center",
127
- cols: pageDetails.length !== 0 ? ['auto', 'min-content', 'minmax(100px, 70%)', 'min-content'] : ['auto', 'min-content']
132
+ cols: pageDetails.length !== 0 ? ['auto', 'min-content', 'minmax(0px, 70%)', 'min-content'] : ['auto', 'min-content']
128
133
  }, void 0, /*#__PURE__*/jsxRuntime.jsxs(Grid__default["default"], {
129
134
  alignItems: "center",
130
135
  gutter: "xxxs",
@@ -140,10 +145,15 @@ const Paginator = props => {
140
145
  height: "12px",
141
146
  ml: "8px"
142
147
  })), /*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
143
- fontSize: "13px"
144
- }, void 0, /*#__PURE__*/_jsx__default["default"](styled.InvisibleDetail, {}, void 0, longestPageDetail), /*#__PURE__*/_jsx__default["default"](styled.PaginationDetail, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
148
+ fontSize: "13px",
149
+ w: detailWidth,
150
+ mr: "xxs",
151
+ display: "grid"
152
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
145
153
  value: pageDetails[pageIndex]
146
- }, void 0, pageDetails[pageIndex])))]
154
+ }, void 0, pageDetails[pageIndex]), pageDetails.map(pageDetail => /*#__PURE__*/_jsx__default["default"](styled.InvisibleDetail, {
155
+ "data-testid": "ds-pagination-invisible-detail-for-width-calc"
156
+ }, void 0, pageDetail)))]
147
157
  }), /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
148
158
  color: ['brand-primary', '700']
149
159
  })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {}))]
package/cjs/parts/PerPageSelector.js CHANGED
@@ -4,6 +4,9 @@ var _jsx = require('@babel/runtime/helpers/jsx');
4
4
  require('core-js/modules/esnext.async-iterator.map.js');
5
5
  require('core-js/modules/esnext.iterator.map.js');
6
6
  require('core-js/modules/web.dom-collections.iterator.js');
7
+ require('core-js/modules/esnext.async-iterator.reduce.js');
8
+ require('core-js/modules/esnext.iterator.constructor.js');
9
+ require('core-js/modules/esnext.iterator.reduce.js');
7
10
  var react = require('react');
8
11
  var memoize = require('memoize-one');
9
12
  var dsUtilities = require('@elliemae/ds-utilities');
@@ -57,9 +60,14 @@ const PerPageSelector = props => {
57
60
  } // eslint-disable-next-line react-hooks/exhaustive-deps
58
61
 
59
62
  }, [isOpened]);
60
- const {
61
- width
62
- } = dsUtilities.useOnElementResize(btnRef);
63
+ const width = react.useMemo(() => {
64
+ const maxLength = options.reduce((acc, cur) => {
65
+ var _length, _cur$label;
66
+
67
+ return Math.max(acc, (_length = cur === null || cur === void 0 ? void 0 : (_cur$label = cur.label) === null || _cur$label === void 0 ? void 0 : _cur$label.length) !== null && _length !== void 0 ? _length : 0);
68
+ }, 0);
69
+ return maxLength * 6 + 90;
70
+ }, [options]);
63
71
  return /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
64
72
  isOpened: isOpened,
65
73
  options: options,
@@ -79,10 +87,10 @@ const PerPageSelector = props => {
79
87
  setIsOpened(false);
80
88
  (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
81
89
  },
82
- customOffset: [0, 2],
83
- startPlacementPreference: "top-end",
90
+ customOffset: [10, 2],
91
+ startPlacementPreference: "top-start",
84
92
  actionRef: actionRef,
85
- minWidth: width + 25,
93
+ minWidth: width,
86
94
  maxHeight: 300,
87
95
  HeaderComp: () => 'Per Page'
88
96
  }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
package/cjs/styled.js CHANGED
@@ -33,13 +33,13 @@ const PaginationSeparator = /*#__PURE__*/styled__default["default"](Grid__defaul
33
33
  })(["background-color:", ";width:1px;height:", ";"], props => props.theme.colors.neutral[300], props => props.height || '30px');
34
34
  const PaginationBoldText = /*#__PURE__*/styled__default["default"].span.withConfig({
35
35
  componentId: "sc-mxz59e-3"
36
- })(["font-weight:", ";", " ", " position:relative;"], props => props.theme.fontWeights.semibold, styledComponents.typography, styledComponents.space);
36
+ })(["font-weight:", ";", " ", " ", " ", " position:relative;"], props => props.theme.fontWeights.semibold, styledComponents.typography, styledComponents.space, styledComponents.sizing, styledComponents.layout);
37
37
  const InvisibleDetail = /*#__PURE__*/styled__default["default"].div.withConfig({
38
38
  componentId: "sc-mxz59e-4"
39
- })(["opacity:0;padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
39
+ })(["opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;"]);
40
40
  const PaginationDetail = /*#__PURE__*/styled__default["default"].span.withConfig({
41
41
  componentId: "sc-mxz59e-5"
42
- })(["position:absolute;top:0;left:0;width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
42
+ })(["text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
43
43
  const PaginationDropdownButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
44
44
  componentId: "sc-mxz59e-6"
45
45
  })(["height:42px;display:grid;grid-auto-flow:column;justify-content:center;align-items:center;position:relative;padding-left:16px;padding-right:16px;grid-gap:8px;font-size:13px;color:", ";cursor:pointer;border-radius:0;font-weight:", ";:focus{", "}white-space:nowrap;"], props => props.theme.colors.neutral[700], props => props.theme.fontWeights.regular, styledFocusCss);
package/esm/parts/Paginator.js CHANGED
@@ -1,17 +1,17 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'core-js/modules/web.dom-collections.iterator.js';
3
+ import 'core-js/modules/esnext.async-iterator.map.js';
4
+ import 'core-js/modules/esnext.iterator.map.js';
3
5
  import 'core-js/modules/esnext.async-iterator.reduce.js';
4
6
  import 'core-js/modules/esnext.iterator.constructor.js';
5
7
  import 'core-js/modules/esnext.iterator.reduce.js';
6
- import 'core-js/modules/esnext.async-iterator.map.js';
7
- import 'core-js/modules/esnext.iterator.map.js';
8
- import { useState, useRef, useMemo, useEffect } from 'react';
8
+ import { useState, useRef, useMemo, useEffect, useLayoutEffect } from 'react';
9
9
  import { Checkmark, ChevronDown } from '@elliemae/ds-icons';
10
10
  import { useOnElementResize } from '@elliemae/ds-utilities';
11
11
  import Grid from '@elliemae/ds-grid';
12
12
  import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
13
13
  import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
14
- import { PaginationSeparator, PaginationDropdownButton, PaginationBoldText, InvisibleDetail, PaginationDetail } from '../styled.js';
14
+ import { PaginationSeparator, PaginationDropdownButton, PaginationBoldText, InvisibleDetail } from '../styled.js';
15
15
  import { usePaginationSearch } from '../hooks/usePaginationSearch.js';
16
16
  import { jsxs, Fragment } from 'react/jsx-runtime';
17
17
 
@@ -30,7 +30,6 @@ const Paginator = props => {
30
30
  const [isOpened, setIsOpened] = useState(false);
31
31
  const btnRef = useRef(null);
32
32
  const pageInfoRef = useRef(null);
33
- const longestPageDetail = pageDetails.reduce((acc, cur) => acc.length > cur.length ? acc : cur, '');
34
33
  const {
35
34
  width: btnWidth
36
35
  } = useOnElementResize(btnRef);
@@ -74,6 +73,12 @@ const Paginator = props => {
74
73
  } // eslint-disable-next-line react-hooks/exhaustive-deps
75
74
 
76
75
  }, [isOpened]);
76
+ const [detailWidth, setDetailWidth] = useState(0);
77
+ useLayoutEffect(() => {
78
+ const invisibleDetails = [...document.body.querySelectorAll('[data-testid="ds-pagination-invisible-detail-for-width-calc"]')];
79
+ const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);
80
+ setDetailWidth(maxWidth);
81
+ }, [pageDetails]);
77
82
  const onKeyDown = usePaginationSearch(pageCount, actionRef);
78
83
  return /*#__PURE__*/jsxs(Fragment, {
79
84
  children: [_PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx(PaginationSeparator, {})), /*#__PURE__*/_jsx(DSDropdownMenuV2, {
@@ -95,11 +100,11 @@ const Paginator = props => {
95
100
  setIsOpened(false);
96
101
  (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
97
102
  },
98
- customOffset: [0, 2],
99
- startPlacementPreference: "top-end",
103
+ customOffset: [-23, 2],
104
+ startPlacementPreference: "top-start",
100
105
  actionRef: actionRef,
101
106
  onKeyDown: onKeyDown,
102
- minWidth: btnWidth + 23,
107
+ minWidth: pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90,
103
108
  maxHeight: 300,
104
109
  HeaderComp: () => pageDetailsTitle !== '' ? /*#__PURE__*/_jsx(Grid, {
105
110
  cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
@@ -117,7 +122,7 @@ const Paginator = props => {
117
122
  }, void 0, /*#__PURE__*/_jsx(Grid, {
118
123
  gutter: "xxs",
119
124
  alignItems: "center",
120
- cols: pageDetails.length !== 0 ? ['auto', 'min-content', 'minmax(100px, 70%)', 'min-content'] : ['auto', 'min-content']
125
+ cols: pageDetails.length !== 0 ? ['auto', 'min-content', 'minmax(0px, 70%)', 'min-content'] : ['auto', 'min-content']
121
126
  }, void 0, /*#__PURE__*/jsxs(Grid, {
122
127
  alignItems: "center",
123
128
  gutter: "xxxs",
@@ -133,10 +138,15 @@ const Paginator = props => {
133
138
  height: "12px",
134
139
  ml: "8px"
135
140
  })), /*#__PURE__*/_jsx(PaginationBoldText, {
136
- fontSize: "13px"
137
- }, void 0, /*#__PURE__*/_jsx(InvisibleDetail, {}, void 0, longestPageDetail), /*#__PURE__*/_jsx(PaginationDetail, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
141
+ fontSize: "13px",
142
+ w: detailWidth,
143
+ mr: "xxs",
144
+ display: "grid"
145
+ }, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
138
146
  value: pageDetails[pageIndex]
139
- }, void 0, pageDetails[pageIndex])))]
147
+ }, void 0, pageDetails[pageIndex]), pageDetails.map(pageDetail => /*#__PURE__*/_jsx(InvisibleDetail, {
148
+ "data-testid": "ds-pagination-invisible-detail-for-width-calc"
149
+ }, void 0, pageDetail)))]
140
150
  }), /*#__PURE__*/_jsx(ChevronDown, {
141
151
  color: ['brand-primary', '700']
142
152
  })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx(PaginationSeparator, {}))]
package/esm/parts/PerPageSelector.js CHANGED
@@ -2,9 +2,12 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'core-js/modules/esnext.async-iterator.map.js';
3
3
  import 'core-js/modules/esnext.iterator.map.js';
4
4
  import 'core-js/modules/web.dom-collections.iterator.js';
5
+ import 'core-js/modules/esnext.async-iterator.reduce.js';
6
+ import 'core-js/modules/esnext.iterator.constructor.js';
7
+ import 'core-js/modules/esnext.iterator.reduce.js';
5
8
  import { useState, useMemo, useRef, useEffect } from 'react';
6
9
  import memoize from 'memoize-one';
7
- import { range, useOnElementResize } from '@elliemae/ds-utilities';
10
+ import { range } from '@elliemae/ds-utilities';
8
11
  import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
9
12
  import { ChevronDown } from '@elliemae/ds-icons';
10
13
  import { PaginationDropdownButton } from '../styled.js';
@@ -50,9 +53,14 @@ const PerPageSelector = props => {
50
53
  } // eslint-disable-next-line react-hooks/exhaustive-deps
51
54
 
52
55
  }, [isOpened]);
53
- const {
54
- width
55
- } = useOnElementResize(btnRef);
56
+ const width = useMemo(() => {
57
+ const maxLength = options.reduce((acc, cur) => {
58
+ var _length, _cur$label;
59
+
60
+ return Math.max(acc, (_length = cur === null || cur === void 0 ? void 0 : (_cur$label = cur.label) === null || _cur$label === void 0 ? void 0 : _cur$label.length) !== null && _length !== void 0 ? _length : 0);
61
+ }, 0);
62
+ return maxLength * 6 + 90;
63
+ }, [options]);
56
64
  return /*#__PURE__*/_jsx(DSDropdownMenuV2, {
57
65
  isOpened: isOpened,
58
66
  options: options,
@@ -72,10 +80,10 @@ const PerPageSelector = props => {
72
80
  setIsOpened(false);
73
81
  (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
74
82
  },
75
- customOffset: [0, 2],
76
- startPlacementPreference: "top-end",
83
+ customOffset: [10, 2],
84
+ startPlacementPreference: "top-start",
77
85
  actionRef: actionRef,
78
- minWidth: width + 25,
86
+ minWidth: width,
79
87
  maxHeight: 300,
80
88
  HeaderComp: () => 'Per Page'
81
89
  }, void 0, /*#__PURE__*/_jsx("div", {
package/esm/styled.js CHANGED
@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLit
2
2
  import Grid from '@elliemae/ds-grid';
3
3
  import { DSButtonV2 } from '@elliemae/ds-button';
4
4
  import styled from 'styled-components';
5
- import { typography, space } from '@xstyled/styled-components';
5
+ import { typography, space, sizing, layout } from '@xstyled/styled-components';
6
6
  import { css } from '@elliemae/ds-system';
7
7
 
8
8
  var _templateObject;
@@ -23,13 +23,13 @@ const PaginationSeparator = /*#__PURE__*/styled(Grid).withConfig({
23
23
  })(["background-color:", ";width:1px;height:", ";"], props => props.theme.colors.neutral[300], props => props.height || '30px');
24
24
  const PaginationBoldText = /*#__PURE__*/styled.span.withConfig({
25
25
  componentId: "sc-mxz59e-3"
26
- })(["font-weight:", ";", " ", " position:relative;"], props => props.theme.fontWeights.semibold, typography, space);
26
+ })(["font-weight:", ";", " ", " ", " ", " position:relative;"], props => props.theme.fontWeights.semibold, typography, space, sizing, layout);
27
27
  const InvisibleDetail = /*#__PURE__*/styled.div.withConfig({
28
28
  componentId: "sc-mxz59e-4"
29
- })(["opacity:0;padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
29
+ })(["opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;"]);
30
30
  const PaginationDetail = /*#__PURE__*/styled.span.withConfig({
31
31
  componentId: "sc-mxz59e-5"
32
- })(["position:absolute;top:0;left:0;width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
32
+ })(["text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
33
33
  const PaginationDropdownButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
34
34
  componentId: "sc-mxz59e-6"
35
35
  })(["height:42px;display:grid;grid-auto-flow:column;justify-content:center;align-items:center;position:relative;padding-left:16px;padding-right:16px;grid-gap:8px;font-size:13px;color:", ";cursor:pointer;border-radius:0;font-weight:", ";:focus{", "}white-space:nowrap;"], props => props.theme.colors.neutral[700], props => props.theme.fontWeights.regular, styledFocusCss);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-pagination",
3
- "version": "2.3.0-rc.2",
3
+ "version": "2.3.1-rc.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Pagination",
6
6
  "module": "./esm/index.js",
@@ -72,14 +72,16 @@
72
72
  "build": "node ../../scripts/build/build.js"
73
73
  },
74
74
  "dependencies": {
75
- "@elliemae/ds-button": "2.3.0-rc.2",
76
- "@elliemae/ds-dropdownmenu": "2.3.0-rc.2",
77
- "@elliemae/ds-grid": "2.3.0-rc.2",
78
- "@elliemae/ds-icons": "2.3.0-rc.2",
79
- "@elliemae/ds-props-helpers": "2.3.0-rc.2",
80
- "@elliemae/ds-utilities": "2.3.0-rc.2",
81
- "memoize-one": "~5.1.1",
82
- "react-desc": "~4.1.3"
75
+ "@elliemae/ds-button": "2.3.1-rc.1",
76
+ "@elliemae/ds-dropdownmenu": "2.3.1-rc.1",
77
+ "@elliemae/ds-grid": "2.3.1-rc.1",
78
+ "@elliemae/ds-icons": "2.3.1-rc.1",
79
+ "@elliemae/ds-props-helpers": "2.3.1-rc.1",
80
+ "@elliemae/ds-system": "2.3.1-rc.1",
81
+ "@elliemae/ds-truncated-tooltip-text": "2.3.1-rc.1",
82
+ "@elliemae/ds-utilities": "2.3.1-rc.1",
83
+ "@xstyled/styled-components": "~3.1.1",
84
+ "memoize-one": "~5.1.1"
83
85
  },
84
86
  "devDependencies": {
85
87
  "styled-components": "~5.3.3",
package/types/styled.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  /// <reference types="react" />
2
- import { TypographyProps, SpaceProps } from '@xstyled/styled-components';
2
+ import { TypographyProps, SpaceProps, SizingProps, LayoutProps } from '@xstyled/styled-components';
3
3
  export declare const PaginationContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
4
4
  export declare const PaginationWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
5
5
  export declare const PaginationSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
6
- export declare const PaginationBoldText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TypographyProps<import("@xstyled/system").Theme> & SpaceProps<import("@xstyled/system").Theme>, never>;
6
+ export declare const PaginationBoldText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TypographyProps<import("@xstyled/system").Theme> & SpaceProps<import("@xstyled/system").Theme> & SizingProps<import("@xstyled/system").Theme> & LayoutProps<import("@xstyled/system").Theme>, never>;
7
7
  export declare const InvisibleDetail: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
8
8
  export declare const PaginationDetail: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
9
9
  export declare const PaginationDropdownButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;