@elliemae/ds-pagination 2.3.0-rc.2 → 2.3.0-rc.3

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 (6) hide show
  1. package/cjs/parts/Paginator.js +18 -8
  2. package/cjs/styled.js +3 -3
  3. package/esm/parts/Paginator.js +20 -10
  4. package/esm/styled.js +4 -4
  5. package/package.json +7 -7
  6. 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, {
@@ -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,13 +145,18 @@ 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]))]
147
155
  }), /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
148
156
  color: ['brand-primary', '700']
149
- })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {}))]
157
+ }), pageDetails.map(pageDetail => /*#__PURE__*/_jsx__default["default"](styled.InvisibleDetail, {
158
+ "data-testid": "ds-pagination-invisible-detail-for-width-calc"
159
+ }, void 0, pageDetail))))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {}))]
150
160
  });
151
161
  };
152
162
 
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, {
@@ -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,13 +138,18 @@ 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]))]
140
148
  }), /*#__PURE__*/_jsx(ChevronDown, {
141
149
  color: ['brand-primary', '700']
142
- })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx(PaginationSeparator, {}))]
150
+ }), pageDetails.map(pageDetail => /*#__PURE__*/_jsx(InvisibleDetail, {
151
+ "data-testid": "ds-pagination-invisible-detail-for-width-calc"
152
+ }, void 0, pageDetail))))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx(PaginationSeparator, {}))]
143
153
  });
144
154
  };
145
155
 
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.0-rc.3",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Pagination",
6
6
  "module": "./esm/index.js",
@@ -72,12 +72,12 @@
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",
75
+ "@elliemae/ds-button": "2.3.0-rc.3",
76
+ "@elliemae/ds-dropdownmenu": "2.3.0-rc.3",
77
+ "@elliemae/ds-grid": "2.3.0-rc.3",
78
+ "@elliemae/ds-icons": "2.3.0-rc.3",
79
+ "@elliemae/ds-props-helpers": "2.3.0-rc.3",
80
+ "@elliemae/ds-utilities": "2.3.0-rc.3",
81
81
  "memoize-one": "~5.1.1",
82
82
  "react-desc": "~4.1.3"
83
83
  },
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>;