carbon-react 117.2.2 → 117.3.0

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 (13) hide show
  1. package/esm/components/pager/__internal__/pager-navigation.component.d.ts +3 -1
  2. package/esm/components/pager/__internal__/pager-navigation.component.js +10 -3
  3. package/esm/components/pager/pager.component.d.ts +3 -1
  4. package/esm/components/pager/pager.component.js +3 -0
  5. package/esm/components/pager/pager.style.d.ts +2 -1
  6. package/esm/components/pager/pager.style.js +6 -1
  7. package/lib/components/pager/__internal__/pager-navigation.component.d.ts +3 -1
  8. package/lib/components/pager/__internal__/pager-navigation.component.js +9 -2
  9. package/lib/components/pager/pager.component.d.ts +3 -1
  10. package/lib/components/pager/pager.component.js +3 -0
  11. package/lib/components/pager/pager.style.d.ts +2 -1
  12. package/lib/components/pager/pager.style.js +7 -1
  13. package/package.json +1 -1
package/esm/components/pager/__internal__/pager-navigation.component.d.ts CHANGED
@@ -23,8 +23,10 @@ export interface PagerNavigationProps {
23
23
  showPreviousAndNextButtons?: boolean;
24
24
  /** Should the page count input be shown */
25
25
  showPageCount?: boolean;
26
+ /** If true, page number navigation will be changed to a non-interactive label */
27
+ interactivePageNumber?: boolean;
26
28
  /** If true, sets css property visibility: hidden on all disabled elements */
27
29
  hideDisabledElements?: boolean;
28
30
  }
29
- declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, hideDisabledElements, }: PagerNavigationProps) => JSX.Element;
31
+ declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, interactivePageNumber, hideDisabledElements, }: PagerNavigationProps) => JSX.Element;
30
32
  export default PagerNavigation;
package/esm/components/pager/__internal__/pager-navigation.component.js CHANGED
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
2
2
 
3
3
  import React, { useRef } from "react";
4
4
  import PropTypes from "prop-types";
5
- import { StyledPagerNavigation, StyledPagerNavInner, StyledPagerNoSelect } from "../pager.style";
5
+ import { StyledPagerNavigation, StyledPagerNavInner, StyledPagerNoSelect, StyledPagerNavLabel } from "../pager.style";
6
6
  import NumberInput from "../../number";
7
7
  import Events from "../../../__internal__/utils/helpers/events";
8
8
  import createGuid from "../../../__internal__/utils/helpers/guid";
@@ -22,11 +22,13 @@ const PagerNavigation = ({
22
22
  showFirstAndLastButtons = true,
23
23
  showPreviousAndNextButtons = true,
24
24
  showPageCount = true,
25
+ interactivePageNumber = true,
25
26
  hideDisabledElements = false
26
27
  }) => {
27
28
  const l = useLocale();
28
29
  const guid = useRef(createGuid());
29
30
  const currentPageId = `Pager_${guid.current}`;
31
+ const navLabelString = `${l.pager.pageX()} ${currentPage.toString()} ${l.pager.ofY(pageCount)}`;
30
32
  const hasOnePage = pageCount <= 1;
31
33
  const hasTwoPages = pageCount === 2;
32
34
  const pagerNavigationProps = {
@@ -86,7 +88,7 @@ const PagerNavigation = ({
86
88
  onClick: onLast
87
89
  }, pagerNavigationProps)));
88
90
 
89
- return /*#__PURE__*/React.createElement(StyledPagerNavigation, null, !hasOnePage && renderButtonsBeforeCount(), showPageCount && /*#__PURE__*/React.createElement(StyledPagerNavInner, null, /*#__PURE__*/React.createElement("label", {
91
+ return /*#__PURE__*/React.createElement(StyledPagerNavigation, null, !hasOnePage && renderButtonsBeforeCount(), showPageCount && (interactivePageNumber ? /*#__PURE__*/React.createElement(StyledPagerNavInner, null, /*#__PURE__*/React.createElement("label", {
90
92
  htmlFor: currentPageId
91
93
  }, /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.pageX())), /*#__PURE__*/React.createElement(NumberInput, {
92
94
  value: currentPage.toString(),
@@ -95,12 +97,17 @@ const PagerNavigation = ({
95
97
  onBlur: handlePageInputChange,
96
98
  id: currentPageId,
97
99
  onKeyUp: ev => Events.isEnterKey(ev) ? handlePageInputChange(ev) : false
98
- }), /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.ofY(pageCount))), !hasOnePage && renderButtonsAfterCount());
100
+ }), /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.ofY(pageCount))) : /*#__PURE__*/React.createElement(StyledPagerNavLabel, {
101
+ "data-element": "current-page-label",
102
+ id: currentPageId,
103
+ "aria-live": "polite"
104
+ }, navLabelString)), !hasOnePage && renderButtonsAfterCount());
99
105
  };
100
106
 
101
107
  PagerNavigation.propTypes = {
102
108
  "currentPage": PropTypes.number.isRequired,
103
109
  "hideDisabledElements": PropTypes.bool,
110
+ "interactivePageNumber": PropTypes.bool,
104
111
  "onFirst": PropTypes.func,
105
112
  "onLast": PropTypes.func,
106
113
  "onNext": PropTypes.func,
package/esm/components/pager/pager.component.d.ts CHANGED
@@ -16,6 +16,8 @@ export interface PagerProps {
16
16
  onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
17
17
  /** Current visible page */
18
18
  currentPage?: number | string;
19
+ /** If true, page number navigation will be changed to a non-interactive label */
20
+ interactivePageNumber?: boolean;
19
21
  /** If true, sets css property visibility: hidden on all disabled elements */
20
22
  hideDisabledElements?: boolean;
21
23
  /** Total number of records */
@@ -41,5 +43,5 @@ export interface PagerProps {
41
43
  /** What variant the Pager background should be */
42
44
  variant?: "default" | "alternate";
43
45
  }
44
- export declare const Pager: ({ currentPage, hideDisabledElements, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
46
+ export declare const Pager: ({ currentPage, hideDisabledElements, interactivePageNumber, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
45
47
  export default Pager;
package/esm/components/pager/pager.component.js CHANGED
@@ -12,6 +12,7 @@ import Events from "../../__internal__/utils/helpers/events";
12
12
  const Pager = ({
13
13
  currentPage = 1,
14
14
  hideDisabledElements = false,
15
+ interactivePageNumber = true,
15
16
  pageSizeSelectionOptions = [{
16
17
  id: "10",
17
18
  name: 10
@@ -137,6 +138,7 @@ const Pager = ({
137
138
  }, rest), /*#__PURE__*/React.createElement(StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/React.createElement(PagerNavigation, {
138
139
  pageSize: currentPageSize,
139
140
  currentPage: page,
141
+ interactivePageNumber: interactivePageNumber,
140
142
  hideDisabledElements: hideDisabledElements,
141
143
  setCurrentPage: setPage,
142
144
  onNext: handleOnNext,
@@ -154,6 +156,7 @@ const Pager = ({
154
156
  Pager.propTypes = {
155
157
  "currentPage": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
156
158
  "hideDisabledElements": PropTypes.bool,
159
+ "interactivePageNumber": PropTypes.bool,
157
160
  "onFirst": PropTypes.func,
158
161
  "onLast": PropTypes.func,
159
162
  "onNext": PropTypes.func,
package/esm/components/pager/pager.style.d.ts CHANGED
@@ -9,7 +9,8 @@ declare const StyledPagerSizeOptions: import("styled-components").StyledComponen
9
9
  declare const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
10
10
  declare const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
11
11
  declare const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
12
+ declare const StyledPagerNavLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
12
13
  declare const StyledPagerLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, Pick<StyledPagerProps, "hideDisabledButtons">, never>;
13
14
  declare const StyledPagerNoSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
14
15
  declare const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
15
- export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer, };
16
+ export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerNavLabel, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer, };
package/esm/components/pager/pager.style.js CHANGED
@@ -95,6 +95,11 @@ const StyledPagerNavInner = styled.div`
95
95
  margin-bottom: 0;
96
96
  }
97
97
  `;
98
+ const StyledPagerNavLabel = styled.label`
99
+ white-space: nowrap;
100
+ padding: 9px 12px;
101
+ margin: 4px 0;
102
+ `;
98
103
  const StyledPagerLink = styled(Link)`
99
104
  padding: 0 10px;
100
105
  margin-left: 7px;
@@ -118,4 +123,4 @@ const StyledPagerSummary = styled.div`
118
123
  flex: 1 1 30%;
119
124
  justify-content: flex-end;
120
125
  `;
121
- export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer };
126
+ export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerNavLabel, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer };
package/lib/components/pager/__internal__/pager-navigation.component.d.ts CHANGED
@@ -23,8 +23,10 @@ export interface PagerNavigationProps {
23
23
  showPreviousAndNextButtons?: boolean;
24
24
  /** Should the page count input be shown */
25
25
  showPageCount?: boolean;
26
+ /** If true, page number navigation will be changed to a non-interactive label */
27
+ interactivePageNumber?: boolean;
26
28
  /** If true, sets css property visibility: hidden on all disabled elements */
27
29
  hideDisabledElements?: boolean;
28
30
  }
29
- declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, hideDisabledElements, }: PagerNavigationProps) => JSX.Element;
31
+ declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, interactivePageNumber, hideDisabledElements, }: PagerNavigationProps) => JSX.Element;
30
32
  export default PagerNavigation;
package/lib/components/pager/__internal__/pager-navigation.component.js CHANGED
@@ -42,11 +42,13 @@ const PagerNavigation = ({
42
42
  showFirstAndLastButtons = true,
43
43
  showPreviousAndNextButtons = true,
44
44
  showPageCount = true,
45
+ interactivePageNumber = true,
45
46
  hideDisabledElements = false
46
47
  }) => {
47
48
  const l = (0, _useLocale.default)();
48
49
  const guid = (0, _react.useRef)((0, _guid.default)());
49
50
  const currentPageId = `Pager_${guid.current}`;
51
+ const navLabelString = `${l.pager.pageX()} ${currentPage.toString()} ${l.pager.ofY(pageCount)}`;
50
52
  const hasOnePage = pageCount <= 1;
51
53
  const hasTwoPages = pageCount === 2;
52
54
  const pagerNavigationProps = {
@@ -106,7 +108,7 @@ const PagerNavigation = ({
106
108
  onClick: onLast
107
109
  }, pagerNavigationProps)));
108
110
 
109
- return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavigation, null, !hasOnePage && renderButtonsBeforeCount(), showPageCount && /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavInner, null, /*#__PURE__*/_react.default.createElement("label", {
111
+ return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavigation, null, !hasOnePage && renderButtonsBeforeCount(), showPageCount && (interactivePageNumber ? /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavInner, null, /*#__PURE__*/_react.default.createElement("label", {
110
112
  htmlFor: currentPageId
111
113
  }, /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, null, l.pager.pageX())), /*#__PURE__*/_react.default.createElement(_number.default, {
112
114
  value: currentPage.toString(),
@@ -115,12 +117,17 @@ const PagerNavigation = ({
115
117
  onBlur: handlePageInputChange,
116
118
  id: currentPageId,
117
119
  onKeyUp: ev => _events.default.isEnterKey(ev) ? handlePageInputChange(ev) : false
118
- }), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, null, l.pager.ofY(pageCount))), !hasOnePage && renderButtonsAfterCount());
120
+ }), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, null, l.pager.ofY(pageCount))) : /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavLabel, {
121
+ "data-element": "current-page-label",
122
+ id: currentPageId,
123
+ "aria-live": "polite"
124
+ }, navLabelString)), !hasOnePage && renderButtonsAfterCount());
119
125
  };
120
126
 
121
127
  PagerNavigation.propTypes = {
122
128
  "currentPage": _propTypes.default.number.isRequired,
123
129
  "hideDisabledElements": _propTypes.default.bool,
130
+ "interactivePageNumber": _propTypes.default.bool,
124
131
  "onFirst": _propTypes.default.func,
125
132
  "onLast": _propTypes.default.func,
126
133
  "onNext": _propTypes.default.func,
package/lib/components/pager/pager.component.d.ts CHANGED
@@ -16,6 +16,8 @@ export interface PagerProps {
16
16
  onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
17
17
  /** Current visible page */
18
18
  currentPage?: number | string;
19
+ /** If true, page number navigation will be changed to a non-interactive label */
20
+ interactivePageNumber?: boolean;
19
21
  /** If true, sets css property visibility: hidden on all disabled elements */
20
22
  hideDisabledElements?: boolean;
21
23
  /** Total number of records */
@@ -41,5 +43,5 @@ export interface PagerProps {
41
43
  /** What variant the Pager background should be */
42
44
  variant?: "default" | "alternate";
43
45
  }
44
- export declare const Pager: ({ currentPage, hideDisabledElements, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
46
+ export declare const Pager: ({ currentPage, hideDisabledElements, interactivePageNumber, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
45
47
  export default Pager;
package/lib/components/pager/pager.component.js CHANGED
@@ -32,6 +32,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
32
32
  const Pager = ({
33
33
  currentPage = 1,
34
34
  hideDisabledElements = false,
35
+ interactivePageNumber = true,
35
36
  pageSizeSelectionOptions = [{
36
37
  id: "10",
37
38
  name: 10
@@ -157,6 +158,7 @@ const Pager = ({
157
158
  }, rest), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/_react.default.createElement(_pagerNavigation.default, {
158
159
  pageSize: currentPageSize,
159
160
  currentPage: page,
161
+ interactivePageNumber: interactivePageNumber,
160
162
  hideDisabledElements: hideDisabledElements,
161
163
  setCurrentPage: setPage,
162
164
  onNext: handleOnNext,
@@ -175,6 +177,7 @@ exports.Pager = Pager;
175
177
  Pager.propTypes = {
176
178
  "currentPage": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
177
179
  "hideDisabledElements": _propTypes.default.bool,
180
+ "interactivePageNumber": _propTypes.default.bool,
178
181
  "onFirst": _propTypes.default.func,
179
182
  "onLast": _propTypes.default.func,
180
183
  "onNext": _propTypes.default.func,
package/lib/components/pager/pager.style.d.ts CHANGED
@@ -9,7 +9,8 @@ declare const StyledPagerSizeOptions: import("styled-components").StyledComponen
9
9
  declare const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
10
10
  declare const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
11
11
  declare const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
12
+ declare const StyledPagerNavLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
12
13
  declare const StyledPagerLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, Pick<StyledPagerProps, "hideDisabledButtons">, never>;
13
14
  declare const StyledPagerNoSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
14
15
  declare const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
15
- export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer, };
16
+ export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerNavLabel, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer, };
package/lib/components/pager/pager.style.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledSelectContainer = exports.StyledPagerSummary = exports.StyledPagerNoSelect = exports.StyledPagerLink = exports.StyledPagerNavInner = exports.StyledPagerNavigation = exports.StyledPagerSizeOptionsInner = exports.StyledPagerSizeOptions = exports.StyledPagerContainer = void 0;
6
+ exports.StyledSelectContainer = exports.StyledPagerSummary = exports.StyledPagerNoSelect = exports.StyledPagerLink = exports.StyledPagerNavLabel = exports.StyledPagerNavInner = exports.StyledPagerNavigation = exports.StyledPagerSizeOptionsInner = exports.StyledPagerSizeOptions = exports.StyledPagerContainer = void 0;
7
7
 
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
 
@@ -121,6 +121,12 @@ const StyledPagerNavInner = _styledComponents.default.div`
121
121
  }
122
122
  `;
123
123
  exports.StyledPagerNavInner = StyledPagerNavInner;
124
+ const StyledPagerNavLabel = _styledComponents.default.label`
125
+ white-space: nowrap;
126
+ padding: 9px 12px;
127
+ margin: 4px 0;
128
+ `;
129
+ exports.StyledPagerNavLabel = StyledPagerNavLabel;
124
130
  const StyledPagerLink = (0, _styledComponents.default)(_link.default)`
125
131
  padding: 0 10px;
126
132
  margin-left: 7px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "117.2.2",
3
+ "version": "117.3.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",