@dhis2-ui/pagination 9.2.0 → 9.3.0-alpha.2

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 (11) hide show
  1. package/build/cjs/page-controls.js +9 -5
  2. package/build/cjs/page-select.js +3 -3
  3. package/build/cjs/page-size-select.js +3 -3
  4. package/build/cjs/page-summary.js +4 -4
  5. package/build/cjs/pagination.stories.js +9 -1
  6. package/build/es/page-controls.js +9 -5
  7. package/build/es/page-select.js +3 -3
  8. package/build/es/page-size-select.js +3 -3
  9. package/build/es/page-summary.js +4 -4
  10. package/build/es/pagination.stories.js +5 -0
  11. package/package.json +5 -5
package/build/cjs/page-controls.js CHANGED
@@ -39,7 +39,7 @@ const PageControls = _ref => {
39
39
  } = _ref;
40
40
  return /*#__PURE__*/_react.default.createElement("div", {
41
41
  "data-test": "".concat(dataTest, "-pagecontrols"),
42
- className: _style.default.dynamic([["2407365506", [_uiConstants.spacers.dp4]]])
42
+ className: _style.default.dynamic([["1173955067", [_uiConstants.spacers.dp4]]])
43
43
  }, /*#__PURE__*/_react.default.createElement(_button.Button, {
44
44
  secondary: true,
45
45
  className: "button-previous",
@@ -47,17 +47,21 @@ const PageControls = _ref => {
47
47
  disabled: isPreviousDisabled,
48
48
  onClick: () => onClick(page - 1),
49
49
  dataTest: "".concat(dataTest, "-page-previous")
50
- }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronLeft16, null), translate(previousPageText)), /*#__PURE__*/_react.default.createElement(_button.Button, {
50
+ }, /*#__PURE__*/_react.default.createElement("div", {
51
+ className: _style.default.dynamic([["1173955067", [_uiConstants.spacers.dp4]]]) + " " + "navigator-icon"
52
+ }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronLeft16, null)), translate(previousPageText)), /*#__PURE__*/_react.default.createElement(_button.Button, {
51
53
  secondary: true,
52
54
  className: "button-next",
53
55
  small: true,
54
56
  disabled: isNextDisabled,
55
57
  onClick: () => onClick(page + 1),
56
58
  dataTest: "".concat(dataTest, "-page-next")
57
- }, translate(nextPageText), /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight16, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
58
- id: "2407365506",
59
+ }, translate(nextPageText), /*#__PURE__*/_react.default.createElement("div", {
60
+ className: _style.default.dynamic([["1173955067", [_uiConstants.spacers.dp4]]]) + " " + "navigator-icon"
61
+ }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight16, null))), /*#__PURE__*/_react.default.createElement(_style.default, {
62
+ id: "1173955067",
59
63
  dynamic: [_uiConstants.spacers.dp4]
60
- }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.__jsx-style-dynamic-selector .button-previous{height:32px;padding-left:0;}", "div.__jsx-style-dynamic-selector .button-next{height:32px;padding-right:0;margin-left:".concat(_uiConstants.spacers.dp4, ";}")]));
64
+ }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.__jsx-style-dynamic-selector .button-previous{height:32px;padding-inline-start:0;}", "div.__jsx-style-dynamic-selector .button-next{height:32px;padding-inline-end:0;margin-inline-start:".concat(_uiConstants.spacers.dp4, ";}"), "div.__jsx-style-dynamic-selector .navigator-icon:dir(rtl){-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}"]));
61
65
  };
62
66
 
63
67
  exports.PageControls = PageControls;
package/build/cjs/page-select.js CHANGED
@@ -43,7 +43,7 @@ const PageSelect = _ref => {
43
43
  } = _ref;
44
44
  return /*#__PURE__*/_react.default.createElement("div", {
45
45
  "data-test": "".concat(dataTest, "-gotopage"),
46
- className: _style.default.dynamic([["485717002", [_uiConstants.spacers.dp12]]])
46
+ className: _style.default.dynamic([["599400768", [_uiConstants.spacers.dp12]]])
47
47
  }, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
48
48
  dense: true,
49
49
  disabled: disabled,
@@ -62,9 +62,9 @@ const PageSelect = _ref => {
62
62
  value: availablePage,
63
63
  label: availablePage
64
64
  }))), /*#__PURE__*/_react.default.createElement(_style.default, {
65
- id: "485717002",
65
+ id: "599400768",
66
66
  dynamic: [_uiConstants.spacers.dp12]
67
- }, ["div.__jsx-style-dynamic-selector{margin-right:".concat(_uiConstants.spacers.dp12, ";}")]));
67
+ }, ["div.__jsx-style-dynamic-selector{margin-inline-end:".concat(_uiConstants.spacers.dp12, ";}")]));
68
68
  };
69
69
 
70
70
  exports.PageSelect = PageSelect;
package/build/cjs/page-size-select.js CHANGED
@@ -37,7 +37,7 @@ const PageSizeSelect = _ref => {
37
37
  } = _ref;
38
38
  return /*#__PURE__*/_react.default.createElement("div", {
39
39
  "data-test": "".concat(dataTest, "-pagesize"),
40
- className: _style.default.dynamic([["1934482915", [_uiConstants.spacers.dp12]]])
40
+ className: _style.default.dynamic([["3539890457", [_uiConstants.spacers.dp12]]])
41
41
  }, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
42
42
  dense: true,
43
43
  disabled: disabled,
@@ -56,9 +56,9 @@ const PageSizeSelect = _ref => {
56
56
  value: length,
57
57
  label: length
58
58
  }))), /*#__PURE__*/_react.default.createElement(_style.default, {
59
- id: "1934482915",
59
+ id: "3539890457",
60
60
  dynamic: [_uiConstants.spacers.dp12]
61
- }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-right:".concat(_uiConstants.spacers.dp12, ";-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}")]));
61
+ }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-inline-end:".concat(_uiConstants.spacers.dp12, ";-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}")]));
62
62
  };
63
63
 
64
64
  exports.PageSizeSelect = PageSizeSelect;
package/build/cjs/page-summary.js CHANGED
@@ -45,15 +45,15 @@ const PageSummary = _ref => {
45
45
  });
46
46
  return /*#__PURE__*/_react.default.createElement("div", {
47
47
  "data-test": "".concat(dataTest, "-summary"),
48
- className: _style.default.dynamic([["1022808428", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]]])
48
+ className: _style.default.dynamic([["3973865131", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]]])
49
49
  }, /*#__PURE__*/_react.default.createElement("span", {
50
- className: _style.default.dynamic([["1022808428", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)({
50
+ className: _style.default.dynamic([["3973865131", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)({
51
51
  inactive
52
52
  }) || "")
53
53
  }, summary), /*#__PURE__*/_react.default.createElement(_style.default, {
54
- id: "1022808428",
54
+ id: "3973865131",
55
55
  dynamic: [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]
56
- }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-right:".concat(_uiConstants.spacers.dp12, ";}"), "span.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey700, ";font-size:14px;}"), "span.inactive.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey500, ";}")]));
56
+ }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-inline-end:".concat(_uiConstants.spacers.dp12, ";}"), "span.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey700, ";font-size:14px;}"), "span.inactive.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey500, ";}")]));
57
57
  };
58
58
 
59
59
  exports.PageSummary = PageSummary;
package/build/cjs/pagination.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.WithoutPageSummary = exports.WithoutPageSizeSelect = exports.WithoutGoToPageSelect = exports.WithoutAnySelect = exports.WithCustomPageSummary = exports.PagerAtLastPage = exports.PagerAtFirstPage = exports.NoTotalAtLastPageWithoutPageLength = exports.NoTotalAtLastPage = exports.NoTotal = exports.NarrowWidth = exports.MediumWidth = exports.Disabled = exports.Default = void 0;
6
+ exports.default = exports.WithoutPageSummary = exports.WithoutPageSizeSelect = exports.WithoutGoToPageSelect = exports.WithoutAnySelect = exports.WithCustomPageSummary = exports.RTL = exports.PagerAtLastPage = exports.PagerAtFirstPage = exports.NoTotalAtLastPageWithoutPageLength = exports.NoTotalAtLastPage = exports.NoTotal = exports.NarrowWidth = exports.MediumWidth = exports.Disabled = exports.Default = void 0;
7
7
 
8
8
  var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
9
9
 
@@ -129,4 +129,12 @@ const NarrowWidth = InBox.bind({});
129
129
  exports.NarrowWidth = NarrowWidth;
130
130
  NarrowWidth.args = { ...pagers.atTenthPage,
131
131
  boxWidth: 100
132
+ };
133
+
134
+ const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
135
+ dir: "rtl"
136
+ }, /*#__PURE__*/_react.default.createElement(_pagination.Pagination, args));
137
+
138
+ exports.RTL = RTL;
139
+ RTL.args = { ...pagers.atTenthPage
132
140
  };
package/build/es/page-controls.js CHANGED
@@ -25,7 +25,7 @@ const PageControls = _ref => {
25
25
  } = _ref;
26
26
  return /*#__PURE__*/React.createElement("div", {
27
27
  "data-test": "".concat(dataTest, "-pagecontrols"),
28
- className: _JSXStyle.dynamic([["2407365506", [spacers.dp4]]])
28
+ className: _JSXStyle.dynamic([["1173955067", [spacers.dp4]]])
29
29
  }, /*#__PURE__*/React.createElement(Button, {
30
30
  secondary: true,
31
31
  className: "button-previous",
@@ -33,17 +33,21 @@ const PageControls = _ref => {
33
33
  disabled: isPreviousDisabled,
34
34
  onClick: () => onClick(page - 1),
35
35
  dataTest: "".concat(dataTest, "-page-previous")
36
- }, /*#__PURE__*/React.createElement(IconChevronLeft16, null), translate(previousPageText)), /*#__PURE__*/React.createElement(Button, {
36
+ }, /*#__PURE__*/React.createElement("div", {
37
+ className: _JSXStyle.dynamic([["1173955067", [spacers.dp4]]]) + " " + "navigator-icon"
38
+ }, /*#__PURE__*/React.createElement(IconChevronLeft16, null)), translate(previousPageText)), /*#__PURE__*/React.createElement(Button, {
37
39
  secondary: true,
38
40
  className: "button-next",
39
41
  small: true,
40
42
  disabled: isNextDisabled,
41
43
  onClick: () => onClick(page + 1),
42
44
  dataTest: "".concat(dataTest, "-page-next")
43
- }, translate(nextPageText), /*#__PURE__*/React.createElement(IconChevronRight16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
44
- id: "2407365506",
45
+ }, translate(nextPageText), /*#__PURE__*/React.createElement("div", {
46
+ className: _JSXStyle.dynamic([["1173955067", [spacers.dp4]]]) + " " + "navigator-icon"
47
+ }, /*#__PURE__*/React.createElement(IconChevronRight16, null))), /*#__PURE__*/React.createElement(_JSXStyle, {
48
+ id: "1173955067",
45
49
  dynamic: [spacers.dp4]
46
- }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.__jsx-style-dynamic-selector .button-previous{height:32px;padding-left:0;}", "div.__jsx-style-dynamic-selector .button-next{height:32px;padding-right:0;margin-left:".concat(spacers.dp4, ";}")]));
50
+ }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.__jsx-style-dynamic-selector .button-previous{height:32px;padding-inline-start:0;}", "div.__jsx-style-dynamic-selector .button-next{height:32px;padding-inline-end:0;margin-inline-start:".concat(spacers.dp4, ";}"), "div.__jsx-style-dynamic-selector .navigator-icon:dir(rtl){-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}"]));
47
51
  };
48
52
 
49
53
  PageControls.propTypes = {
package/build/es/page-select.js CHANGED
@@ -27,7 +27,7 @@ const PageSelect = _ref => {
27
27
  } = _ref;
28
28
  return /*#__PURE__*/React.createElement("div", {
29
29
  "data-test": "".concat(dataTest, "-gotopage"),
30
- className: _JSXStyle.dynamic([["485717002", [spacers.dp12]]])
30
+ className: _JSXStyle.dynamic([["599400768", [spacers.dp12]]])
31
31
  }, /*#__PURE__*/React.createElement(SingleSelect, {
32
32
  dense: true,
33
33
  disabled: disabled,
@@ -46,9 +46,9 @@ const PageSelect = _ref => {
46
46
  value: availablePage,
47
47
  label: availablePage
48
48
  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
49
- id: "485717002",
49
+ id: "599400768",
50
50
  dynamic: [spacers.dp12]
51
- }, ["div.__jsx-style-dynamic-selector{margin-right:".concat(spacers.dp12, ";}")]));
51
+ }, ["div.__jsx-style-dynamic-selector{margin-inline-end:".concat(spacers.dp12, ";}")]));
52
52
  };
53
53
 
54
54
  PageSelect.propTypes = {
package/build/es/page-size-select.js CHANGED
@@ -23,7 +23,7 @@ const PageSizeSelect = _ref => {
23
23
  } = _ref;
24
24
  return /*#__PURE__*/React.createElement("div", {
25
25
  "data-test": "".concat(dataTest, "-pagesize"),
26
- className: _JSXStyle.dynamic([["1934482915", [spacers.dp12]]])
26
+ className: _JSXStyle.dynamic([["3539890457", [spacers.dp12]]])
27
27
  }, /*#__PURE__*/React.createElement(SingleSelect, {
28
28
  dense: true,
29
29
  disabled: disabled,
@@ -42,9 +42,9 @@ const PageSizeSelect = _ref => {
42
42
  value: length,
43
43
  label: length
44
44
  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
45
- id: "1934482915",
45
+ id: "3539890457",
46
46
  dynamic: [spacers.dp12]
47
- }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-right:".concat(spacers.dp12, ";-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}")]));
47
+ }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-inline-end:".concat(spacers.dp12, ";-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}")]));
48
48
  };
49
49
 
50
50
  PageSizeSelect.propTypes = {
package/build/es/page-summary.js CHANGED
@@ -32,15 +32,15 @@ const PageSummary = _ref => {
32
32
  });
33
33
  return /*#__PURE__*/React.createElement("div", {
34
34
  "data-test": "".concat(dataTest, "-summary"),
35
- className: _JSXStyle.dynamic([["1022808428", [spacers.dp12, colors.grey700, colors.grey500]]])
35
+ className: _JSXStyle.dynamic([["3973865131", [spacers.dp12, colors.grey700, colors.grey500]]])
36
36
  }, /*#__PURE__*/React.createElement("span", {
37
- className: _JSXStyle.dynamic([["1022808428", [spacers.dp12, colors.grey700, colors.grey500]]]) + " " + (cx({
37
+ className: _JSXStyle.dynamic([["3973865131", [spacers.dp12, colors.grey700, colors.grey500]]]) + " " + (cx({
38
38
  inactive
39
39
  }) || "")
40
40
  }, summary), /*#__PURE__*/React.createElement(_JSXStyle, {
41
- id: "1022808428",
41
+ id: "3973865131",
42
42
  dynamic: [spacers.dp12, colors.grey700, colors.grey500]
43
- }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-right:".concat(spacers.dp12, ";}"), "span.__jsx-style-dynamic-selector{color:".concat(colors.grey700, ";font-size:14px;}"), "span.inactive.__jsx-style-dynamic-selector{color:".concat(colors.grey500, ";}")]));
43
+ }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-inline-end:".concat(spacers.dp12, ";}"), "span.__jsx-style-dynamic-selector{color:".concat(colors.grey700, ";font-size:14px;}"), "span.inactive.__jsx-style-dynamic-selector{color:".concat(colors.grey500, ";}")]));
44
44
  };
45
45
 
46
46
  PageSummary.propTypes = {
package/build/es/pagination.stories.js CHANGED
@@ -97,4 +97,9 @@ MediumWidth.args = { ...pagers.atTenthPage,
97
97
  export const NarrowWidth = InBox.bind({});
98
98
  NarrowWidth.args = { ...pagers.atTenthPage,
99
99
  boxWidth: 100
100
+ };
101
+ export const RTL = args => /*#__PURE__*/React.createElement("div", {
102
+ dir: "rtl"
103
+ }, /*#__PURE__*/React.createElement(Pagination, args));
104
+ RTL.args = { ...pagers.atTenthPage
100
105
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/pagination",
3
- "version": "9.2.0",
3
+ "version": "9.3.0-alpha.2",
4
4
  "description": "UI Pagination",
5
5
  "repository": {
6
6
  "type": "git",
@@ -34,10 +34,10 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@dhis2/prop-types": "^3.1.2",
37
- "@dhis2-ui/button": "9.2.0",
38
- "@dhis2-ui/select": "9.2.0",
39
- "@dhis2/ui-constants": "9.2.0",
40
- "@dhis2/ui-icons": "9.2.0",
37
+ "@dhis2-ui/button": "9.3.0-alpha.2",
38
+ "@dhis2-ui/select": "9.3.0-alpha.2",
39
+ "@dhis2/ui-constants": "9.3.0-alpha.2",
40
+ "@dhis2/ui-icons": "9.3.0-alpha.2",
41
41
  "classnames": "^2.3.1",
42
42
  "prop-types": "^15.7.2"
43
43
  },