carbon-react 111.20.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.
- package/esm/components/multi-action-button/multi-action-button.component.d.ts +3 -2
- package/esm/components/multi-action-button/multi-action-button.component.js +105 -2
- package/esm/components/multi-action-button/multi-action-button.style.d.ts +3 -3
- package/esm/components/multi-action-button/multi-action-button.style.js +13 -0
- package/esm/components/pager/__internal__/pager-navigation.component.js +3 -4
- package/esm/components/pager/pager.component.js +9 -3
- package/esm/components/pager/pager.style.js +3 -1
- package/lib/components/multi-action-button/multi-action-button.component.d.ts +3 -2
- package/lib/components/multi-action-button/multi-action-button.component.js +105 -2
- package/lib/components/multi-action-button/multi-action-button.style.d.ts +3 -3
- package/lib/components/multi-action-button/multi-action-button.style.js +14 -0
- package/lib/components/pager/__internal__/pager-navigation.component.js +3 -5
- package/lib/components/pager/pager.component.js +9 -2
- package/lib/components/pager/pager.style.js +3 -1
- package/package.json +1 -1
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { WidthProps } from "styled-system";
|
|
2
3
|
import { SplitButtonProps } from "../split-button";
|
|
3
|
-
export interface MultiActionButtonProps extends Omit<SplitButtonProps, "buttonType"> {
|
|
4
|
+
export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProps, "buttonType"> {
|
|
4
5
|
/** Button type: "primary" | "secondary" | "tertiary" */
|
|
5
6
|
buttonType?: "primary" | "secondary" | "tertiary";
|
|
6
7
|
/** Second text child, renders under main text, only when size is "large" */
|
|
7
8
|
subtext?: string;
|
|
8
9
|
}
|
|
9
|
-
export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
|
|
10
|
+
export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
|
|
10
11
|
export default MultiActionButton;
|
|
@@ -18,6 +18,7 @@ const MultiActionButton = ({
|
|
|
18
18
|
children,
|
|
19
19
|
text,
|
|
20
20
|
subtext,
|
|
21
|
+
width,
|
|
21
22
|
"data-element": dataElement,
|
|
22
23
|
"data-role": dataRole,
|
|
23
24
|
...rest
|
|
@@ -124,7 +125,8 @@ const MultiActionButton = ({
|
|
|
124
125
|
"data-component": "multi-action-button",
|
|
125
126
|
"data-element": dataElement,
|
|
126
127
|
"data-role": dataRole,
|
|
127
|
-
displayed: showAdditionalButtons
|
|
128
|
+
displayed: showAdditionalButtons,
|
|
129
|
+
width: width
|
|
128
130
|
}, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Button, _extends({
|
|
129
131
|
"aria-haspopup": "true",
|
|
130
132
|
"aria-expanded": showAdditionalButtons,
|
|
@@ -621,7 +623,108 @@ MultiActionButton.propTypes = {
|
|
|
621
623
|
"typeof": PropTypes.string,
|
|
622
624
|
"unselectable": PropTypes.oneOf(["off", "on"]),
|
|
623
625
|
"value": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
|
|
624
|
-
"vocab": PropTypes.string
|
|
626
|
+
"vocab": PropTypes.string,
|
|
627
|
+
"width": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
628
|
+
"__@iterator": PropTypes.func.isRequired,
|
|
629
|
+
"anchor": PropTypes.func.isRequired,
|
|
630
|
+
"at": PropTypes.func.isRequired,
|
|
631
|
+
"big": PropTypes.func.isRequired,
|
|
632
|
+
"blink": PropTypes.func.isRequired,
|
|
633
|
+
"bold": PropTypes.func.isRequired,
|
|
634
|
+
"charAt": PropTypes.func.isRequired,
|
|
635
|
+
"charCodeAt": PropTypes.func.isRequired,
|
|
636
|
+
"codePointAt": PropTypes.func.isRequired,
|
|
637
|
+
"concat": PropTypes.func.isRequired,
|
|
638
|
+
"endsWith": PropTypes.func.isRequired,
|
|
639
|
+
"fixed": PropTypes.func.isRequired,
|
|
640
|
+
"fontcolor": PropTypes.func.isRequired,
|
|
641
|
+
"fontsize": PropTypes.func.isRequired,
|
|
642
|
+
"includes": PropTypes.func.isRequired,
|
|
643
|
+
"indexOf": PropTypes.func.isRequired,
|
|
644
|
+
"italics": PropTypes.func.isRequired,
|
|
645
|
+
"lastIndexOf": PropTypes.func.isRequired,
|
|
646
|
+
"length": PropTypes.number.isRequired,
|
|
647
|
+
"link": PropTypes.func.isRequired,
|
|
648
|
+
"localeCompare": PropTypes.func.isRequired,
|
|
649
|
+
"match": PropTypes.func.isRequired,
|
|
650
|
+
"matchAll": PropTypes.func.isRequired,
|
|
651
|
+
"normalize": PropTypes.func.isRequired,
|
|
652
|
+
"padEnd": PropTypes.func.isRequired,
|
|
653
|
+
"padStart": PropTypes.func.isRequired,
|
|
654
|
+
"repeat": PropTypes.func.isRequired,
|
|
655
|
+
"replace": PropTypes.func.isRequired,
|
|
656
|
+
"search": PropTypes.func.isRequired,
|
|
657
|
+
"slice": PropTypes.func.isRequired,
|
|
658
|
+
"small": PropTypes.func.isRequired,
|
|
659
|
+
"split": PropTypes.func.isRequired,
|
|
660
|
+
"startsWith": PropTypes.func.isRequired,
|
|
661
|
+
"strike": PropTypes.func.isRequired,
|
|
662
|
+
"sub": PropTypes.func.isRequired,
|
|
663
|
+
"substr": PropTypes.func.isRequired,
|
|
664
|
+
"substring": PropTypes.func.isRequired,
|
|
665
|
+
"sup": PropTypes.func.isRequired,
|
|
666
|
+
"toLocaleLowerCase": PropTypes.func.isRequired,
|
|
667
|
+
"toLocaleUpperCase": PropTypes.func.isRequired,
|
|
668
|
+
"toLowerCase": PropTypes.func.isRequired,
|
|
669
|
+
"toString": PropTypes.func.isRequired,
|
|
670
|
+
"toUpperCase": PropTypes.func.isRequired,
|
|
671
|
+
"trim": PropTypes.func.isRequired,
|
|
672
|
+
"trimEnd": PropTypes.func.isRequired,
|
|
673
|
+
"trimLeft": PropTypes.func.isRequired,
|
|
674
|
+
"trimRight": PropTypes.func.isRequired,
|
|
675
|
+
"trimStart": PropTypes.func.isRequired,
|
|
676
|
+
"valueOf": PropTypes.func.isRequired
|
|
677
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
678
|
+
"__@iterator": PropTypes.func.isRequired,
|
|
679
|
+
"anchor": PropTypes.func.isRequired,
|
|
680
|
+
"at": PropTypes.func.isRequired,
|
|
681
|
+
"big": PropTypes.func.isRequired,
|
|
682
|
+
"blink": PropTypes.func.isRequired,
|
|
683
|
+
"bold": PropTypes.func.isRequired,
|
|
684
|
+
"charAt": PropTypes.func.isRequired,
|
|
685
|
+
"charCodeAt": PropTypes.func.isRequired,
|
|
686
|
+
"codePointAt": PropTypes.func.isRequired,
|
|
687
|
+
"concat": PropTypes.func.isRequired,
|
|
688
|
+
"endsWith": PropTypes.func.isRequired,
|
|
689
|
+
"fixed": PropTypes.func.isRequired,
|
|
690
|
+
"fontcolor": PropTypes.func.isRequired,
|
|
691
|
+
"fontsize": PropTypes.func.isRequired,
|
|
692
|
+
"includes": PropTypes.func.isRequired,
|
|
693
|
+
"indexOf": PropTypes.func.isRequired,
|
|
694
|
+
"italics": PropTypes.func.isRequired,
|
|
695
|
+
"lastIndexOf": PropTypes.func.isRequired,
|
|
696
|
+
"length": PropTypes.number.isRequired,
|
|
697
|
+
"link": PropTypes.func.isRequired,
|
|
698
|
+
"localeCompare": PropTypes.func.isRequired,
|
|
699
|
+
"match": PropTypes.func.isRequired,
|
|
700
|
+
"matchAll": PropTypes.func.isRequired,
|
|
701
|
+
"normalize": PropTypes.func.isRequired,
|
|
702
|
+
"padEnd": PropTypes.func.isRequired,
|
|
703
|
+
"padStart": PropTypes.func.isRequired,
|
|
704
|
+
"repeat": PropTypes.func.isRequired,
|
|
705
|
+
"replace": PropTypes.func.isRequired,
|
|
706
|
+
"search": PropTypes.func.isRequired,
|
|
707
|
+
"slice": PropTypes.func.isRequired,
|
|
708
|
+
"small": PropTypes.func.isRequired,
|
|
709
|
+
"split": PropTypes.func.isRequired,
|
|
710
|
+
"startsWith": PropTypes.func.isRequired,
|
|
711
|
+
"strike": PropTypes.func.isRequired,
|
|
712
|
+
"sub": PropTypes.func.isRequired,
|
|
713
|
+
"substr": PropTypes.func.isRequired,
|
|
714
|
+
"substring": PropTypes.func.isRequired,
|
|
715
|
+
"sup": PropTypes.func.isRequired,
|
|
716
|
+
"toLocaleLowerCase": PropTypes.func.isRequired,
|
|
717
|
+
"toLocaleUpperCase": PropTypes.func.isRequired,
|
|
718
|
+
"toLowerCase": PropTypes.func.isRequired,
|
|
719
|
+
"toString": PropTypes.func.isRequired,
|
|
720
|
+
"toUpperCase": PropTypes.func.isRequired,
|
|
721
|
+
"trim": PropTypes.func.isRequired,
|
|
722
|
+
"trimEnd": PropTypes.func.isRequired,
|
|
723
|
+
"trimLeft": PropTypes.func.isRequired,
|
|
724
|
+
"trimRight": PropTypes.func.isRequired,
|
|
725
|
+
"trimStart": PropTypes.func.isRequired,
|
|
726
|
+
"valueOf": PropTypes.func.isRequired
|
|
727
|
+
}), PropTypes.string])
|
|
625
728
|
};
|
|
626
729
|
export { MultiActionButton };
|
|
627
730
|
export default MultiActionButton;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import { MultiActionButtonProps } from "./multi-action-button.component";
|
|
2
|
+
declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, Pick<MultiActionButtonProps, "width"> & {
|
|
2
3
|
displayed: boolean;
|
|
3
|
-
}
|
|
4
|
-
declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, StyledMultiActionButtonProps, never>;
|
|
4
|
+
}, never>;
|
|
5
5
|
declare type StyledButtonChildrenContainerProps = {
|
|
6
6
|
align: "left" | "right";
|
|
7
7
|
minWidth: number;
|
|
@@ -3,12 +3,25 @@ import { margin } from "styled-system";
|
|
|
3
3
|
import StyledButton from "../button/button.style";
|
|
4
4
|
import baseTheme from "../../style/themes/base";
|
|
5
5
|
import StyledIcon from "../icon/icon.style";
|
|
6
|
+
import computeWidth from "../../style/utils/width";
|
|
6
7
|
const StyledMultiActionButton = styled.div`
|
|
7
8
|
${margin}
|
|
8
9
|
|
|
9
10
|
display: inline-block;
|
|
10
11
|
position: relative;
|
|
11
12
|
|
|
13
|
+
${({
|
|
14
|
+
width
|
|
15
|
+
}) => width && css`
|
|
16
|
+
${computeWidth({
|
|
17
|
+
width
|
|
18
|
+
})}
|
|
19
|
+
|
|
20
|
+
${StyledButton} {
|
|
21
|
+
width: 100%
|
|
22
|
+
justify-content: space-between;
|
|
23
|
+
}`}
|
|
24
|
+
|
|
12
25
|
& > ${StyledButton} {
|
|
13
26
|
margin: 0;
|
|
14
27
|
|
|
@@ -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(
|
|
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
|
-
})
|
|
91
|
+
}), /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.ofY(pageCount))), !hasOnePage && renderButtonsAfterCount());
|
|
93
92
|
};
|
|
94
93
|
|
|
95
94
|
PagerNavigation.propTypes = {
|
|
@@ -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("
|
|
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);
|
|
@@ -73,7 +73,7 @@ const StyledPagerNavigation = styled.div`
|
|
|
73
73
|
|
|
74
74
|
&& ${StyledInputPresentation} {
|
|
75
75
|
padding: 0;
|
|
76
|
-
margin:
|
|
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;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { WidthProps } from "styled-system";
|
|
2
3
|
import { SplitButtonProps } from "../split-button";
|
|
3
|
-
export interface MultiActionButtonProps extends Omit<SplitButtonProps, "buttonType"> {
|
|
4
|
+
export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProps, "buttonType"> {
|
|
4
5
|
/** Button type: "primary" | "secondary" | "tertiary" */
|
|
5
6
|
buttonType?: "primary" | "secondary" | "tertiary";
|
|
6
7
|
/** Second text child, renders under main text, only when size is "large" */
|
|
7
8
|
subtext?: string;
|
|
8
9
|
}
|
|
9
|
-
export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
|
|
10
|
+
export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
|
|
10
11
|
export default MultiActionButton;
|
|
@@ -39,6 +39,7 @@ const MultiActionButton = ({
|
|
|
39
39
|
children,
|
|
40
40
|
text,
|
|
41
41
|
subtext,
|
|
42
|
+
width,
|
|
42
43
|
"data-element": dataElement,
|
|
43
44
|
"data-role": dataRole,
|
|
44
45
|
...rest
|
|
@@ -145,7 +146,8 @@ const MultiActionButton = ({
|
|
|
145
146
|
"data-component": "multi-action-button",
|
|
146
147
|
"data-element": dataElement,
|
|
147
148
|
"data-role": dataRole,
|
|
148
|
-
displayed: showAdditionalButtons
|
|
149
|
+
displayed: showAdditionalButtons,
|
|
150
|
+
width: width
|
|
149
151
|
}, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_button.default, _extends({
|
|
150
152
|
"aria-haspopup": "true",
|
|
151
153
|
"aria-expanded": showAdditionalButtons,
|
|
@@ -643,7 +645,108 @@ MultiActionButton.propTypes = {
|
|
|
643
645
|
"typeof": _propTypes.default.string,
|
|
644
646
|
"unselectable": _propTypes.default.oneOf(["off", "on"]),
|
|
645
647
|
"value": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.number, _propTypes.default.string]),
|
|
646
|
-
"vocab": _propTypes.default.string
|
|
648
|
+
"vocab": _propTypes.default.string,
|
|
649
|
+
"width": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
650
|
+
"__@iterator": _propTypes.default.func.isRequired,
|
|
651
|
+
"anchor": _propTypes.default.func.isRequired,
|
|
652
|
+
"at": _propTypes.default.func.isRequired,
|
|
653
|
+
"big": _propTypes.default.func.isRequired,
|
|
654
|
+
"blink": _propTypes.default.func.isRequired,
|
|
655
|
+
"bold": _propTypes.default.func.isRequired,
|
|
656
|
+
"charAt": _propTypes.default.func.isRequired,
|
|
657
|
+
"charCodeAt": _propTypes.default.func.isRequired,
|
|
658
|
+
"codePointAt": _propTypes.default.func.isRequired,
|
|
659
|
+
"concat": _propTypes.default.func.isRequired,
|
|
660
|
+
"endsWith": _propTypes.default.func.isRequired,
|
|
661
|
+
"fixed": _propTypes.default.func.isRequired,
|
|
662
|
+
"fontcolor": _propTypes.default.func.isRequired,
|
|
663
|
+
"fontsize": _propTypes.default.func.isRequired,
|
|
664
|
+
"includes": _propTypes.default.func.isRequired,
|
|
665
|
+
"indexOf": _propTypes.default.func.isRequired,
|
|
666
|
+
"italics": _propTypes.default.func.isRequired,
|
|
667
|
+
"lastIndexOf": _propTypes.default.func.isRequired,
|
|
668
|
+
"length": _propTypes.default.number.isRequired,
|
|
669
|
+
"link": _propTypes.default.func.isRequired,
|
|
670
|
+
"localeCompare": _propTypes.default.func.isRequired,
|
|
671
|
+
"match": _propTypes.default.func.isRequired,
|
|
672
|
+
"matchAll": _propTypes.default.func.isRequired,
|
|
673
|
+
"normalize": _propTypes.default.func.isRequired,
|
|
674
|
+
"padEnd": _propTypes.default.func.isRequired,
|
|
675
|
+
"padStart": _propTypes.default.func.isRequired,
|
|
676
|
+
"repeat": _propTypes.default.func.isRequired,
|
|
677
|
+
"replace": _propTypes.default.func.isRequired,
|
|
678
|
+
"search": _propTypes.default.func.isRequired,
|
|
679
|
+
"slice": _propTypes.default.func.isRequired,
|
|
680
|
+
"small": _propTypes.default.func.isRequired,
|
|
681
|
+
"split": _propTypes.default.func.isRequired,
|
|
682
|
+
"startsWith": _propTypes.default.func.isRequired,
|
|
683
|
+
"strike": _propTypes.default.func.isRequired,
|
|
684
|
+
"sub": _propTypes.default.func.isRequired,
|
|
685
|
+
"substr": _propTypes.default.func.isRequired,
|
|
686
|
+
"substring": _propTypes.default.func.isRequired,
|
|
687
|
+
"sup": _propTypes.default.func.isRequired,
|
|
688
|
+
"toLocaleLowerCase": _propTypes.default.func.isRequired,
|
|
689
|
+
"toLocaleUpperCase": _propTypes.default.func.isRequired,
|
|
690
|
+
"toLowerCase": _propTypes.default.func.isRequired,
|
|
691
|
+
"toString": _propTypes.default.func.isRequired,
|
|
692
|
+
"toUpperCase": _propTypes.default.func.isRequired,
|
|
693
|
+
"trim": _propTypes.default.func.isRequired,
|
|
694
|
+
"trimEnd": _propTypes.default.func.isRequired,
|
|
695
|
+
"trimLeft": _propTypes.default.func.isRequired,
|
|
696
|
+
"trimRight": _propTypes.default.func.isRequired,
|
|
697
|
+
"trimStart": _propTypes.default.func.isRequired,
|
|
698
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
699
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
700
|
+
"__@iterator": _propTypes.default.func.isRequired,
|
|
701
|
+
"anchor": _propTypes.default.func.isRequired,
|
|
702
|
+
"at": _propTypes.default.func.isRequired,
|
|
703
|
+
"big": _propTypes.default.func.isRequired,
|
|
704
|
+
"blink": _propTypes.default.func.isRequired,
|
|
705
|
+
"bold": _propTypes.default.func.isRequired,
|
|
706
|
+
"charAt": _propTypes.default.func.isRequired,
|
|
707
|
+
"charCodeAt": _propTypes.default.func.isRequired,
|
|
708
|
+
"codePointAt": _propTypes.default.func.isRequired,
|
|
709
|
+
"concat": _propTypes.default.func.isRequired,
|
|
710
|
+
"endsWith": _propTypes.default.func.isRequired,
|
|
711
|
+
"fixed": _propTypes.default.func.isRequired,
|
|
712
|
+
"fontcolor": _propTypes.default.func.isRequired,
|
|
713
|
+
"fontsize": _propTypes.default.func.isRequired,
|
|
714
|
+
"includes": _propTypes.default.func.isRequired,
|
|
715
|
+
"indexOf": _propTypes.default.func.isRequired,
|
|
716
|
+
"italics": _propTypes.default.func.isRequired,
|
|
717
|
+
"lastIndexOf": _propTypes.default.func.isRequired,
|
|
718
|
+
"length": _propTypes.default.number.isRequired,
|
|
719
|
+
"link": _propTypes.default.func.isRequired,
|
|
720
|
+
"localeCompare": _propTypes.default.func.isRequired,
|
|
721
|
+
"match": _propTypes.default.func.isRequired,
|
|
722
|
+
"matchAll": _propTypes.default.func.isRequired,
|
|
723
|
+
"normalize": _propTypes.default.func.isRequired,
|
|
724
|
+
"padEnd": _propTypes.default.func.isRequired,
|
|
725
|
+
"padStart": _propTypes.default.func.isRequired,
|
|
726
|
+
"repeat": _propTypes.default.func.isRequired,
|
|
727
|
+
"replace": _propTypes.default.func.isRequired,
|
|
728
|
+
"search": _propTypes.default.func.isRequired,
|
|
729
|
+
"slice": _propTypes.default.func.isRequired,
|
|
730
|
+
"small": _propTypes.default.func.isRequired,
|
|
731
|
+
"split": _propTypes.default.func.isRequired,
|
|
732
|
+
"startsWith": _propTypes.default.func.isRequired,
|
|
733
|
+
"strike": _propTypes.default.func.isRequired,
|
|
734
|
+
"sub": _propTypes.default.func.isRequired,
|
|
735
|
+
"substr": _propTypes.default.func.isRequired,
|
|
736
|
+
"substring": _propTypes.default.func.isRequired,
|
|
737
|
+
"sup": _propTypes.default.func.isRequired,
|
|
738
|
+
"toLocaleLowerCase": _propTypes.default.func.isRequired,
|
|
739
|
+
"toLocaleUpperCase": _propTypes.default.func.isRequired,
|
|
740
|
+
"toLowerCase": _propTypes.default.func.isRequired,
|
|
741
|
+
"toString": _propTypes.default.func.isRequired,
|
|
742
|
+
"toUpperCase": _propTypes.default.func.isRequired,
|
|
743
|
+
"trim": _propTypes.default.func.isRequired,
|
|
744
|
+
"trimEnd": _propTypes.default.func.isRequired,
|
|
745
|
+
"trimLeft": _propTypes.default.func.isRequired,
|
|
746
|
+
"trimRight": _propTypes.default.func.isRequired,
|
|
747
|
+
"trimStart": _propTypes.default.func.isRequired,
|
|
748
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
749
|
+
}), _propTypes.default.string])
|
|
647
750
|
};
|
|
648
751
|
var _default = MultiActionButton;
|
|
649
752
|
exports.default = _default;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import { MultiActionButtonProps } from "./multi-action-button.component";
|
|
2
|
+
declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, Pick<MultiActionButtonProps, "width"> & {
|
|
2
3
|
displayed: boolean;
|
|
3
|
-
}
|
|
4
|
-
declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, StyledMultiActionButtonProps, never>;
|
|
4
|
+
}, never>;
|
|
5
5
|
declare type StyledButtonChildrenContainerProps = {
|
|
6
6
|
align: "left" | "right";
|
|
7
7
|
minWidth: number;
|
|
@@ -15,6 +15,8 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
|
|
|
15
15
|
|
|
16
16
|
var _icon = _interopRequireDefault(require("../icon/icon.style"));
|
|
17
17
|
|
|
18
|
+
var _width = _interopRequireDefault(require("../../style/utils/width"));
|
|
19
|
+
|
|
18
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
21
|
|
|
20
22
|
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
@@ -27,6 +29,18 @@ const StyledMultiActionButton = _styledComponents.default.div`
|
|
|
27
29
|
display: inline-block;
|
|
28
30
|
position: relative;
|
|
29
31
|
|
|
32
|
+
${({
|
|
33
|
+
width
|
|
34
|
+
}) => width && (0, _styledComponents.css)`
|
|
35
|
+
${(0, _width.default)({
|
|
36
|
+
width
|
|
37
|
+
})}
|
|
38
|
+
|
|
39
|
+
${_button.default} {
|
|
40
|
+
width: 100%
|
|
41
|
+
justify-content: space-between;
|
|
42
|
+
}`}
|
|
43
|
+
|
|
30
44
|
& > ${_button.default} {
|
|
31
45
|
margin: 0;
|
|
32
46
|
|
|
@@ -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(
|
|
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
|
-
})
|
|
111
|
+
}), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, null, l.pager.ofY(pageCount))), !hasOnePage && renderButtonsAfterCount());
|
|
114
112
|
};
|
|
115
113
|
|
|
116
114
|
PagerNavigation.propTypes = {
|
|
@@ -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("
|
|
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);
|
|
@@ -97,7 +97,7 @@ const StyledPagerNavigation = _styledComponents.default.div`
|
|
|
97
97
|
|
|
98
98
|
&& ${_inputPresentation.default} {
|
|
99
99
|
padding: 0;
|
|
100
|
-
margin:
|
|
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`
|