carbon-react 111.21.0 → 111.21.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 (7) hide show
  1. package/esm/components/pager/__internal__/pager-navigation.component.js +3 -4
  2. package/esm/components/pager/pager.component.js +9 -3
  3. package/esm/components/pager/pager.style.js +3 -1
  4. package/lib/components/pager/__internal__/pager-navigation.component.js +3 -5
  5. package/lib/components/pager/pager.component.js +9 -2
  6. package/lib/components/pager/pager.style.js +3 -1
  7. package/package.json +1 -1
package/esm/components/pager/__internal__/pager-navigation.component.js CHANGED
@@ -7,7 +7,6 @@ import NumberInput from "../../number";
7
7
  import Events from "../../../__internal__/utils/helpers/events";
8
8
  import createGuid from "../../../__internal__/utils/helpers/guid";
9
9
  import PagerNavigationLink from "./pager-navigation-link.component";
10
- import Label from "../../../__internal__/label";
11
10
  import useLocale from "../../../hooks/__internal__/useLocale";
12
11
 
13
12
  const PagerNavigation = ({
@@ -80,16 +79,16 @@ const PagerNavigation = ({
80
79
  onClick: onLast
81
80
  }, pagerNavigationProps)));
82
81
 
83
- return /*#__PURE__*/React.createElement(StyledPagerNavigation, null, !hasOnePage && renderButtonsBeforeCount(), showPageCount && /*#__PURE__*/React.createElement(StyledPagerNavInner, null, /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.pageX()), /*#__PURE__*/React.createElement(Label, {
82
+ return /*#__PURE__*/React.createElement(StyledPagerNavigation, null, !hasOnePage && renderButtonsBeforeCount(), showPageCount && /*#__PURE__*/React.createElement(StyledPagerNavInner, null, /*#__PURE__*/React.createElement("label", {
84
83
  htmlFor: currentPageId
85
- }, /*#__PURE__*/React.createElement(NumberInput, {
84
+ }, /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.pageX())), /*#__PURE__*/React.createElement(NumberInput, {
86
85
  value: currentPage.toString(),
87
86
  "data-element": "current-page",
88
87
  onChange: handleCurrentPageChange,
89
88
  onBlur: handlePageInputChange,
90
89
  id: currentPageId,
91
90
  onKeyUp: ev => Events.isEnterKey(ev) ? handlePageInputChange(ev) : false
92
- })), /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.ofY(pageCount))), !hasOnePage && renderButtonsAfterCount());
91
+ }), /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.ofY(pageCount))), !hasOnePage && renderButtonsAfterCount());
93
92
  };
94
93
 
95
94
  PagerNavigation.propTypes = {
package/esm/components/pager/pager.component.js CHANGED
@@ -1,11 +1,12 @@
1
1
  function _extends() { _extends = Object.assign || 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.apply(this, arguments); }
2
2
 
3
- import React, { useState, useCallback, useEffect } from "react";
3
+ import React, { useState, useCallback, useEffect, useRef } from "react";
4
4
  import PropTypes from "prop-types";
5
5
  import { Select } from "../select";
6
6
  import PagerNavigation from "./__internal__/pager-navigation.component";
7
7
  import Option from "../select/option/option.component";
8
8
  import useLocale from "../../hooks/__internal__/useLocale";
9
+ import createGuid from "../../__internal__/utils/helpers/guid";
9
10
  import { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSummary, StyledPagerSizeOptionsInner, StyledSelectContainer } from "./pager.style";
10
11
  import Events from "../../__internal__/utils/helpers/events";
11
12
 
@@ -45,6 +46,8 @@ const Pager = ({
45
46
  const [page, setPage] = useState(currentPage);
46
47
  const [currentPageSize, setCurrentPageSize] = useState(pageSize);
47
48
  const [value, setValue] = useState(pageSize);
49
+ const guid = useRef(createGuid());
50
+ const pageSizeSelectId = `Pager_size_selector_${guid.current}`;
48
51
  const getPageCount = useCallback(() => {
49
52
  if (Number(totalRecords) < 0 || Number.isNaN(Number(totalRecords))) {
50
53
  return 1;
@@ -110,7 +113,8 @@ const Pager = ({
110
113
  onChange: ev => setValue(ev.target.value),
111
114
  onBlur: () => setValue(currentPageSize),
112
115
  onKeyDown: handleKeyDown,
113
- "data-element": "page-select"
116
+ "data-element": "page-select",
117
+ id: pageSizeSelectId
114
118
  }, pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/React.createElement(Option, {
115
119
  key: sizeOption.id,
116
120
  text: sizeOption.id,
@@ -120,7 +124,9 @@ const Pager = ({
120
124
  };
121
125
 
122
126
  const renderPageSizeOptions = () => {
123
- return showPageSizeSelection && /*#__PURE__*/React.createElement(StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && /*#__PURE__*/React.createElement("span", null, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && /*#__PURE__*/React.createElement("div", null, l.pager.records(currentPageSize, false)));
127
+ return showPageSizeSelection && /*#__PURE__*/React.createElement(StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && /*#__PURE__*/React.createElement("label", {
128
+ htmlFor: pageSizeSelectId
129
+ }, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && /*#__PURE__*/React.createElement("div", null, l.pager.records(currentPageSize, false)));
124
130
  };
125
131
 
126
132
  const renderTotalRecords = () => showTotalRecords && l.pager.records(totalRecords);
package/esm/components/pager/pager.style.js CHANGED
@@ -73,7 +73,7 @@ const StyledPagerNavigation = styled.div`
73
73
 
74
74
  && ${StyledInputPresentation} {
75
75
  padding: 0;
76
- margin: 8px 4px 0 4px;
76
+ margin: 4px;
77
77
  height: 26px;
78
78
  line-height: 26px;
79
79
  min-height: 24px;
@@ -89,6 +89,7 @@ const StyledPagerNavInner = styled.div`
89
89
  display: flex;
90
90
  align-items: center;
91
91
  padding: 0 12px;
92
+ margin: 4px 0;
92
93
 
93
94
  && ${StyledFormField} {
94
95
  margin-bottom: 0;
@@ -102,6 +103,7 @@ const StyledPagerLinkStyles = styled(Link)`
102
103
  const StyledPagerNoSelect = styled.div`
103
104
  user-select: none;
104
105
  white-space: nowrap;
106
+ font-weight: normal;
105
107
  `;
106
108
  const StyledPagerSummary = styled.div`
107
109
  display: flex;
package/lib/components/pager/__internal__/pager-navigation.component.js CHANGED
@@ -19,8 +19,6 @@ var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/
19
19
 
20
20
  var _pagerNavigationLink = _interopRequireDefault(require("./pager-navigation-link.component"));
21
21
 
22
- var _label = _interopRequireDefault(require("../../../__internal__/label"));
23
-
24
22
  var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
25
23
 
26
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -101,16 +99,16 @@ const PagerNavigation = ({
101
99
  onClick: onLast
102
100
  }, pagerNavigationProps)));
103
101
 
104
- return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavigation, null, !hasOnePage && renderButtonsBeforeCount(), showPageCount && /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavInner, null, /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, null, l.pager.pageX()), /*#__PURE__*/_react.default.createElement(_label.default, {
102
+ return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavigation, null, !hasOnePage && renderButtonsBeforeCount(), showPageCount && /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavInner, null, /*#__PURE__*/_react.default.createElement("label", {
105
103
  htmlFor: currentPageId
106
- }, /*#__PURE__*/_react.default.createElement(_number.default, {
104
+ }, /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, null, l.pager.pageX())), /*#__PURE__*/_react.default.createElement(_number.default, {
107
105
  value: currentPage.toString(),
108
106
  "data-element": "current-page",
109
107
  onChange: handleCurrentPageChange,
110
108
  onBlur: handlePageInputChange,
111
109
  id: currentPageId,
112
110
  onKeyUp: ev => _events.default.isEnterKey(ev) ? handlePageInputChange(ev) : false
113
- })), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, null, l.pager.ofY(pageCount))), !hasOnePage && renderButtonsAfterCount());
111
+ }), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, null, l.pager.ofY(pageCount))), !hasOnePage && renderButtonsAfterCount());
114
112
  };
115
113
 
116
114
  PagerNavigation.propTypes = {
package/lib/components/pager/pager.component.js CHANGED
@@ -17,6 +17,8 @@ var _option = _interopRequireDefault(require("../select/option/option.component"
17
17
 
18
18
  var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
19
19
 
20
+ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
21
+
20
22
  var _pager = require("./pager.style");
21
23
 
22
24
  var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
@@ -65,6 +67,8 @@ const Pager = ({
65
67
  const [page, setPage] = (0, _react.useState)(currentPage);
66
68
  const [currentPageSize, setCurrentPageSize] = (0, _react.useState)(pageSize);
67
69
  const [value, setValue] = (0, _react.useState)(pageSize);
70
+ const guid = (0, _react.useRef)((0, _guid.default)());
71
+ const pageSizeSelectId = `Pager_size_selector_${guid.current}`;
68
72
  const getPageCount = (0, _react.useCallback)(() => {
69
73
  if (Number(totalRecords) < 0 || Number.isNaN(Number(totalRecords))) {
70
74
  return 1;
@@ -130,7 +134,8 @@ const Pager = ({
130
134
  onChange: ev => setValue(ev.target.value),
131
135
  onBlur: () => setValue(currentPageSize),
132
136
  onKeyDown: handleKeyDown,
133
- "data-element": "page-select"
137
+ "data-element": "page-select",
138
+ id: pageSizeSelectId
134
139
  }, pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/_react.default.createElement(_option.default, {
135
140
  key: sizeOption.id,
136
141
  text: sizeOption.id,
@@ -140,7 +145,9 @@ const Pager = ({
140
145
  };
141
146
 
142
147
  const renderPageSizeOptions = () => {
143
- return showPageSizeSelection && /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && /*#__PURE__*/_react.default.createElement("span", null, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && /*#__PURE__*/_react.default.createElement("div", null, l.pager.records(currentPageSize, false)));
148
+ return showPageSizeSelection && /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && /*#__PURE__*/_react.default.createElement("label", {
149
+ htmlFor: pageSizeSelectId
150
+ }, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && /*#__PURE__*/_react.default.createElement("div", null, l.pager.records(currentPageSize, false)));
144
151
  };
145
152
 
146
153
  const renderTotalRecords = () => showTotalRecords && l.pager.records(totalRecords);
package/lib/components/pager/pager.style.js CHANGED
@@ -97,7 +97,7 @@ const StyledPagerNavigation = _styledComponents.default.div`
97
97
 
98
98
  && ${_inputPresentation.default} {
99
99
  padding: 0;
100
- margin: 8px 4px 0 4px;
100
+ margin: 4px;
101
101
  height: 26px;
102
102
  line-height: 26px;
103
103
  min-height: 24px;
@@ -114,6 +114,7 @@ const StyledPagerNavInner = _styledComponents.default.div`
114
114
  display: flex;
115
115
  align-items: center;
116
116
  padding: 0 12px;
117
+ margin: 4px 0;
117
118
 
118
119
  && ${_formField.default} {
119
120
  margin-bottom: 0;
@@ -129,6 +130,7 @@ exports.StyledPagerLinkStyles = StyledPagerLinkStyles;
129
130
  const StyledPagerNoSelect = _styledComponents.default.div`
130
131
  user-select: none;
131
132
  white-space: nowrap;
133
+ font-weight: normal;
132
134
  `;
133
135
  exports.StyledPagerNoSelect = StyledPagerNoSelect;
134
136
  const StyledPagerSummary = _styledComponents.default.div`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "111.21.0",
3
+ "version": "111.21.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",