@tonyarbor/components 0.1.0 → 0.2.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/dist/Banner.d.mts +59 -0
- package/dist/Banner.d.ts +59 -0
- package/dist/Banner.js +222 -0
- package/dist/Banner.js.map +1 -0
- package/dist/Banner.mjs +7 -0
- package/dist/Banner.mjs.map +1 -0
- package/dist/Checkbox.d.mts +52 -0
- package/dist/Checkbox.d.ts +52 -0
- package/dist/Checkbox.js +194 -0
- package/dist/Checkbox.js.map +1 -0
- package/dist/Checkbox.mjs +7 -0
- package/dist/Checkbox.mjs.map +1 -0
- package/dist/Combobox.d.mts +67 -0
- package/dist/Combobox.d.ts +67 -0
- package/dist/Combobox.js +329 -0
- package/dist/Combobox.js.map +1 -0
- package/dist/Combobox.mjs +7 -0
- package/dist/Combobox.mjs.map +1 -0
- package/dist/DatePicker.d.mts +68 -0
- package/dist/DatePicker.d.ts +68 -0
- package/dist/DatePicker.js +490 -0
- package/dist/DatePicker.js.map +1 -0
- package/dist/DatePicker.mjs +7 -0
- package/dist/DatePicker.mjs.map +1 -0
- package/dist/NumericInput.d.mts +68 -0
- package/dist/NumericInput.d.ts +68 -0
- package/dist/NumericInput.js +319 -0
- package/dist/NumericInput.js.map +1 -0
- package/dist/NumericInput.mjs +7 -0
- package/dist/NumericInput.mjs.map +1 -0
- package/dist/Pagination.d.mts +36 -0
- package/dist/Pagination.d.ts +36 -0
- package/dist/Pagination.js +301 -0
- package/dist/Pagination.js.map +1 -0
- package/dist/Pagination.mjs +7 -0
- package/dist/Pagination.mjs.map +1 -0
- package/dist/Radio.d.mts +48 -0
- package/dist/Radio.d.ts +48 -0
- package/dist/Radio.js +194 -0
- package/dist/Radio.js.map +1 -0
- package/dist/Radio.mjs +7 -0
- package/dist/Radio.mjs.map +1 -0
- package/dist/Table.d.mts +80 -0
- package/dist/Table.d.ts +80 -0
- package/dist/Table.js +347 -0
- package/dist/Table.js.map +1 -0
- package/dist/Table.mjs +8 -0
- package/dist/Table.mjs.map +1 -0
- package/dist/TableControls.d.mts +76 -0
- package/dist/TableControls.d.ts +76 -0
- package/dist/TableControls.js +461 -0
- package/dist/TableControls.js.map +1 -0
- package/dist/TableControls.mjs +7 -0
- package/dist/TableControls.mjs.map +1 -0
- package/dist/TableFooterPagination.d.mts +56 -0
- package/dist/TableFooterPagination.d.ts +56 -0
- package/dist/TableFooterPagination.js +499 -0
- package/dist/TableFooterPagination.js.map +1 -0
- package/dist/TableFooterPagination.mjs +7 -0
- package/dist/TableFooterPagination.mjs.map +1 -0
- package/dist/Tabs.d.mts +50 -0
- package/dist/Tabs.d.ts +50 -0
- package/dist/Tabs.js +187 -0
- package/dist/Tabs.js.map +1 -0
- package/dist/Tabs.mjs +7 -0
- package/dist/Tabs.mjs.map +1 -0
- package/dist/TextArea.d.mts +64 -0
- package/dist/TextArea.d.ts +64 -0
- package/dist/TextArea.js +171 -0
- package/dist/TextArea.js.map +1 -0
- package/dist/TextArea.mjs +7 -0
- package/dist/TextArea.mjs.map +1 -0
- package/dist/Toast.d.mts +48 -0
- package/dist/Toast.d.ts +48 -0
- package/dist/Toast.js +169 -0
- package/dist/Toast.js.map +1 -0
- package/dist/Toast.mjs +7 -0
- package/dist/Toast.mjs.map +1 -0
- package/dist/Toggle.d.mts +48 -0
- package/dist/Toggle.d.ts +48 -0
- package/dist/Toggle.js +291 -0
- package/dist/Toggle.js.map +1 -0
- package/dist/Toggle.mjs +7 -0
- package/dist/Toggle.mjs.map +1 -0
- package/dist/Tooltip.d.mts +32 -0
- package/dist/Tooltip.d.ts +32 -0
- package/dist/Tooltip.js +109 -0
- package/dist/Tooltip.js.map +1 -0
- package/dist/Tooltip.mjs +7 -0
- package/dist/Tooltip.mjs.map +1 -0
- package/dist/chunk-52TG3BFX.mjs +463 -0
- package/dist/chunk-52TG3BFX.mjs.map +1 -0
- package/dist/chunk-5BUXFTPW.mjs +283 -0
- package/dist/chunk-5BUXFTPW.mjs.map +1 -0
- package/dist/chunk-7OWLBYNM.mjs +293 -0
- package/dist/chunk-7OWLBYNM.mjs.map +1 -0
- package/dist/chunk-AI2U34CF.mjs +159 -0
- package/dist/chunk-AI2U34CF.mjs.map +1 -0
- package/dist/chunk-C25FFMRQ.mjs +255 -0
- package/dist/chunk-C25FFMRQ.mjs.map +1 -0
- package/dist/chunk-CUTYEIFE.mjs +158 -0
- package/dist/chunk-CUTYEIFE.mjs.map +1 -0
- package/dist/chunk-DULH2KRW.mjs +133 -0
- package/dist/chunk-DULH2KRW.mjs.map +1 -0
- package/dist/chunk-G5NVKF2G.mjs +434 -0
- package/dist/chunk-G5NVKF2G.mjs.map +1 -0
- package/dist/chunk-M6DVBEEL.mjs +158 -0
- package/dist/chunk-M6DVBEEL.mjs.map +1 -0
- package/dist/chunk-MBUMR2XJ.mjs +135 -0
- package/dist/chunk-MBUMR2XJ.mjs.map +1 -0
- package/dist/chunk-MNH2TGUX.mjs +73 -0
- package/dist/chunk-MNH2TGUX.mjs.map +1 -0
- package/dist/chunk-RRMG2SSZ.mjs +265 -0
- package/dist/chunk-RRMG2SSZ.mjs.map +1 -0
- package/dist/chunk-U4JXKZZG.mjs +186 -0
- package/dist/chunk-U4JXKZZG.mjs.map +1 -0
- package/dist/chunk-W55QJIAN.mjs +467 -0
- package/dist/chunk-W55QJIAN.mjs.map +1 -0
- package/dist/chunk-YV4OXFIM.mjs +151 -0
- package/dist/chunk-YV4OXFIM.mjs.map +1 -0
- package/dist/index.d.mts +22 -1
- package/dist/index.d.ts +22 -1
- package/dist/index.js +3559 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +61 -1
- package/package.json +81 -3
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface TableFooterPaginationProps {
|
|
4
|
+
/**
|
|
5
|
+
* Current page number (1-indexed)
|
|
6
|
+
*/
|
|
7
|
+
currentPage: number;
|
|
8
|
+
/**
|
|
9
|
+
* Total number of pages
|
|
10
|
+
*/
|
|
11
|
+
totalPages: number;
|
|
12
|
+
/**
|
|
13
|
+
* Callback when page changes
|
|
14
|
+
*/
|
|
15
|
+
onPageChange: (page: number) => void;
|
|
16
|
+
/**
|
|
17
|
+
* Total number of results
|
|
18
|
+
*/
|
|
19
|
+
totalResults: number;
|
|
20
|
+
/**
|
|
21
|
+
* Number of results currently showing
|
|
22
|
+
*/
|
|
23
|
+
currentResults: number;
|
|
24
|
+
/**
|
|
25
|
+
* Items per page
|
|
26
|
+
*/
|
|
27
|
+
itemsPerPage: number;
|
|
28
|
+
/**
|
|
29
|
+
* Callback when items per page changes
|
|
30
|
+
*/
|
|
31
|
+
onItemsPerPageChange?: (itemsPerPage: number) => void;
|
|
32
|
+
/**
|
|
33
|
+
* Callback when expand table is clicked
|
|
34
|
+
*/
|
|
35
|
+
onExpandTable?: () => void;
|
|
36
|
+
/**
|
|
37
|
+
* Custom className
|
|
38
|
+
*/
|
|
39
|
+
className?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Custom style
|
|
42
|
+
*/
|
|
43
|
+
style?: React.CSSProperties;
|
|
44
|
+
/**
|
|
45
|
+
* Test ID for testing
|
|
46
|
+
*/
|
|
47
|
+
'data-testid'?: string;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* TableFooterPagination component - Arbor Design System
|
|
51
|
+
*
|
|
52
|
+
* A table footer component with result count, pagination, and table controls.
|
|
53
|
+
*/
|
|
54
|
+
declare const TableFooterPagination: React.ForwardRefExoticComponent<TableFooterPaginationProps & React.RefAttributes<HTMLDivElement>>;
|
|
55
|
+
|
|
56
|
+
export { TableFooterPagination, type TableFooterPaginationProps };
|
|
@@ -0,0 +1,499 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/TableFooterPagination/index.ts
|
|
31
|
+
var TableFooterPagination_exports = {};
|
|
32
|
+
__export(TableFooterPagination_exports, {
|
|
33
|
+
TableFooterPagination: () => TableFooterPagination
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(TableFooterPagination_exports);
|
|
36
|
+
|
|
37
|
+
// src/TableFooterPagination/TableFooterPagination.tsx
|
|
38
|
+
var React = __toESM(require("react"));
|
|
39
|
+
var import_clsx = require("clsx");
|
|
40
|
+
var import_lucide_react = require("lucide-react");
|
|
41
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
|
+
var containerStyles = {
|
|
43
|
+
display: "flex",
|
|
44
|
+
alignItems: "center",
|
|
45
|
+
justifyContent: "space-between",
|
|
46
|
+
backgroundColor: "white",
|
|
47
|
+
paddingTop: "4px",
|
|
48
|
+
paddingBottom: 0,
|
|
49
|
+
paddingLeft: 0,
|
|
50
|
+
paddingRight: 0,
|
|
51
|
+
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
|
52
|
+
};
|
|
53
|
+
var textStyles = {
|
|
54
|
+
fontSize: "13px",
|
|
55
|
+
fontWeight: 400,
|
|
56
|
+
lineHeight: "1.5",
|
|
57
|
+
color: "#2f2f2f",
|
|
58
|
+
minWidth: "165px"
|
|
59
|
+
};
|
|
60
|
+
var paginationWrapperStyles = {
|
|
61
|
+
display: "flex",
|
|
62
|
+
alignItems: "center",
|
|
63
|
+
justifyContent: "center",
|
|
64
|
+
gap: "8px",
|
|
65
|
+
minWidth: "165px",
|
|
66
|
+
flexWrap: "wrap"
|
|
67
|
+
};
|
|
68
|
+
var paginationButtonStyles = {
|
|
69
|
+
width: "32px",
|
|
70
|
+
height: "32px",
|
|
71
|
+
minWidth: "32px",
|
|
72
|
+
minHeight: "32px",
|
|
73
|
+
maxWidth: "32px",
|
|
74
|
+
maxHeight: "32px",
|
|
75
|
+
borderRadius: "99px",
|
|
76
|
+
border: "none",
|
|
77
|
+
background: "white",
|
|
78
|
+
cursor: "pointer",
|
|
79
|
+
display: "flex",
|
|
80
|
+
alignItems: "center",
|
|
81
|
+
justifyContent: "center",
|
|
82
|
+
padding: 0,
|
|
83
|
+
transition: "background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out",
|
|
84
|
+
flexShrink: 0,
|
|
85
|
+
WebkitTapHighlightColor: "transparent",
|
|
86
|
+
outline: "none"
|
|
87
|
+
};
|
|
88
|
+
var paginationButtonDisabledStyles = {
|
|
89
|
+
cursor: "not-allowed",
|
|
90
|
+
opacity: 0.5
|
|
91
|
+
};
|
|
92
|
+
var paginationLabelStyles = {
|
|
93
|
+
fontSize: "13px",
|
|
94
|
+
fontWeight: 400,
|
|
95
|
+
lineHeight: "1.5",
|
|
96
|
+
color: "#2f2f2f"
|
|
97
|
+
};
|
|
98
|
+
var paginationInputWrapperStyles = {
|
|
99
|
+
display: "flex",
|
|
100
|
+
alignItems: "center",
|
|
101
|
+
gap: "8px"
|
|
102
|
+
};
|
|
103
|
+
var paginationInputStyles = {
|
|
104
|
+
width: "60px",
|
|
105
|
+
paddingTop: "12px",
|
|
106
|
+
paddingBottom: "12px",
|
|
107
|
+
paddingLeft: "16px",
|
|
108
|
+
paddingRight: "16px",
|
|
109
|
+
fontSize: "13px",
|
|
110
|
+
fontWeight: 400,
|
|
111
|
+
lineHeight: "1.5",
|
|
112
|
+
color: "#2f2f2f",
|
|
113
|
+
backgroundColor: "white",
|
|
114
|
+
border: "1px solid #dfdfdf",
|
|
115
|
+
borderRadius: "8px",
|
|
116
|
+
fontFamily: "inherit",
|
|
117
|
+
textAlign: "center",
|
|
118
|
+
outline: "none"
|
|
119
|
+
};
|
|
120
|
+
var paginationInputFocusStyles = {
|
|
121
|
+
boxShadow: "0px 0px 0px 3px #3cad51"
|
|
122
|
+
};
|
|
123
|
+
var rightAlignedStyles = {
|
|
124
|
+
display: "flex",
|
|
125
|
+
gap: "16px",
|
|
126
|
+
alignItems: "center",
|
|
127
|
+
justifyContent: "flex-end",
|
|
128
|
+
minWidth: "165px"
|
|
129
|
+
};
|
|
130
|
+
var perPageButtonStyles = {
|
|
131
|
+
height: "32px",
|
|
132
|
+
backgroundColor: "white",
|
|
133
|
+
border: "1px solid #d1d1d1",
|
|
134
|
+
borderRadius: "8px",
|
|
135
|
+
display: "flex",
|
|
136
|
+
alignItems: "center",
|
|
137
|
+
gap: "8px",
|
|
138
|
+
paddingLeft: "12px",
|
|
139
|
+
paddingRight: "8px",
|
|
140
|
+
paddingTop: "8px",
|
|
141
|
+
paddingBottom: "8px",
|
|
142
|
+
cursor: "pointer",
|
|
143
|
+
transition: "background-color 0.2s ease-in-out",
|
|
144
|
+
outline: "none"
|
|
145
|
+
};
|
|
146
|
+
var perPageTextStyles = {
|
|
147
|
+
fontSize: "13px",
|
|
148
|
+
fontWeight: 600,
|
|
149
|
+
lineHeight: "1.5",
|
|
150
|
+
color: "#2f2f2f",
|
|
151
|
+
textAlign: "center"
|
|
152
|
+
};
|
|
153
|
+
var expandButtonStyles = {
|
|
154
|
+
height: "32px",
|
|
155
|
+
minHeight: "32px",
|
|
156
|
+
backgroundColor: "#efefef",
|
|
157
|
+
border: "none",
|
|
158
|
+
borderRadius: "99px",
|
|
159
|
+
display: "flex",
|
|
160
|
+
alignItems: "center",
|
|
161
|
+
justifyContent: "center",
|
|
162
|
+
paddingLeft: "16px",
|
|
163
|
+
paddingRight: "16px",
|
|
164
|
+
paddingTop: 0,
|
|
165
|
+
paddingBottom: 0,
|
|
166
|
+
gap: 0,
|
|
167
|
+
cursor: "pointer",
|
|
168
|
+
transition: "background-color 0.2s ease-in-out",
|
|
169
|
+
outline: "none"
|
|
170
|
+
};
|
|
171
|
+
var expandButtonTextStyles = {
|
|
172
|
+
fontSize: "13px",
|
|
173
|
+
fontWeight: 600,
|
|
174
|
+
lineHeight: "1.5",
|
|
175
|
+
color: "#2f2f2f",
|
|
176
|
+
textAlign: "center"
|
|
177
|
+
};
|
|
178
|
+
var TableFooterPagination = React.forwardRef(
|
|
179
|
+
({
|
|
180
|
+
currentPage,
|
|
181
|
+
totalPages,
|
|
182
|
+
onPageChange,
|
|
183
|
+
totalResults,
|
|
184
|
+
currentResults,
|
|
185
|
+
itemsPerPage,
|
|
186
|
+
onItemsPerPageChange,
|
|
187
|
+
onExpandTable,
|
|
188
|
+
className,
|
|
189
|
+
style,
|
|
190
|
+
"data-testid": dataTestId
|
|
191
|
+
}, ref) => {
|
|
192
|
+
const [inputValue, setInputValue] = React.useState(currentPage.toString());
|
|
193
|
+
const [focusedButton, setFocusedButton] = React.useState(null);
|
|
194
|
+
const [hoveredButton, setHoveredButton] = React.useState(null);
|
|
195
|
+
const [activeButton, setActiveButton] = React.useState(null);
|
|
196
|
+
const [inputFocused, setInputFocused] = React.useState(false);
|
|
197
|
+
const [perPageHovered, setPerPageHovered] = React.useState(false);
|
|
198
|
+
const [expandHovered, setExpandHovered] = React.useState(false);
|
|
199
|
+
React.useEffect(() => {
|
|
200
|
+
setInputValue(currentPage.toString());
|
|
201
|
+
}, [currentPage]);
|
|
202
|
+
const handleFirstPage = () => {
|
|
203
|
+
if (currentPage !== 1) {
|
|
204
|
+
onPageChange(1);
|
|
205
|
+
}
|
|
206
|
+
};
|
|
207
|
+
const handlePreviousPage = () => {
|
|
208
|
+
if (currentPage > 1) {
|
|
209
|
+
onPageChange(currentPage - 1);
|
|
210
|
+
}
|
|
211
|
+
};
|
|
212
|
+
const handleNextPage = () => {
|
|
213
|
+
if (currentPage < totalPages) {
|
|
214
|
+
onPageChange(currentPage + 1);
|
|
215
|
+
}
|
|
216
|
+
};
|
|
217
|
+
const handleLastPage = () => {
|
|
218
|
+
if (currentPage !== totalPages) {
|
|
219
|
+
onPageChange(totalPages);
|
|
220
|
+
}
|
|
221
|
+
};
|
|
222
|
+
const handleInputChange = (e) => {
|
|
223
|
+
const value = e.target.value;
|
|
224
|
+
if (value === "" || /^\d+$/.test(value)) {
|
|
225
|
+
setInputValue(value);
|
|
226
|
+
}
|
|
227
|
+
};
|
|
228
|
+
const handleInputBlur = () => {
|
|
229
|
+
setInputFocused(false);
|
|
230
|
+
const pageNumber = parseInt(inputValue, 10);
|
|
231
|
+
if (isNaN(pageNumber) || pageNumber < 1) {
|
|
232
|
+
setInputValue(currentPage.toString());
|
|
233
|
+
} else if (pageNumber > totalPages) {
|
|
234
|
+
setInputValue(totalPages.toString());
|
|
235
|
+
onPageChange(totalPages);
|
|
236
|
+
} else if (pageNumber !== currentPage) {
|
|
237
|
+
onPageChange(pageNumber);
|
|
238
|
+
}
|
|
239
|
+
};
|
|
240
|
+
const handleInputKeyDown = (e) => {
|
|
241
|
+
if (e.key === "Enter") {
|
|
242
|
+
handleInputBlur();
|
|
243
|
+
e.target.blur();
|
|
244
|
+
}
|
|
245
|
+
};
|
|
246
|
+
const getButtonStyle = (buttonName, disabled) => {
|
|
247
|
+
if (disabled) {
|
|
248
|
+
return { ...paginationButtonStyles, ...paginationButtonDisabledStyles };
|
|
249
|
+
}
|
|
250
|
+
const isHovered = hoveredButton === buttonName;
|
|
251
|
+
const isFocused = focusedButton === buttonName;
|
|
252
|
+
const isActive = activeButton === buttonName;
|
|
253
|
+
const style2 = {
|
|
254
|
+
...paginationButtonStyles
|
|
255
|
+
};
|
|
256
|
+
if (isHovered && !isFocused && !isActive) {
|
|
257
|
+
style2.backgroundColor = "#efefef";
|
|
258
|
+
}
|
|
259
|
+
if (isActive && !isFocused) {
|
|
260
|
+
style2.backgroundColor = "transparent";
|
|
261
|
+
}
|
|
262
|
+
if (isFocused) {
|
|
263
|
+
style2.boxShadow = "0px 0px 0px 3px #3cad51";
|
|
264
|
+
style2.backgroundColor = "rgba(255, 255, 255, 0.01)";
|
|
265
|
+
}
|
|
266
|
+
return style2;
|
|
267
|
+
};
|
|
268
|
+
const isFirstDisabled = currentPage === 1;
|
|
269
|
+
const isPreviousDisabled = currentPage === 1;
|
|
270
|
+
const isNextDisabled = currentPage === totalPages;
|
|
271
|
+
const isLastDisabled = currentPage === totalPages;
|
|
272
|
+
const resultText = currentResults === totalResults ? `Showing ${totalResults} results` : `Showing ${currentResults} of ${totalResults} results`;
|
|
273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
274
|
+
"div",
|
|
275
|
+
{
|
|
276
|
+
ref,
|
|
277
|
+
className: (0, import_clsx.clsx)("arbor-table-footer-pagination", className),
|
|
278
|
+
style: { ...containerStyles, ...style },
|
|
279
|
+
"data-testid": dataTestId,
|
|
280
|
+
children: [
|
|
281
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyles, children: resultText }),
|
|
282
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: paginationWrapperStyles, children: [
|
|
283
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
284
|
+
"button",
|
|
285
|
+
{
|
|
286
|
+
type: "button",
|
|
287
|
+
onClick: handleFirstPage,
|
|
288
|
+
disabled: isFirstDisabled,
|
|
289
|
+
onMouseEnter: () => setHoveredButton("first"),
|
|
290
|
+
onMouseLeave: () => setHoveredButton(null),
|
|
291
|
+
onMouseDown: () => setActiveButton("first"),
|
|
292
|
+
onMouseUp: () => setActiveButton(null),
|
|
293
|
+
onFocus: () => setFocusedButton("first"),
|
|
294
|
+
onBlur: () => setFocusedButton(null),
|
|
295
|
+
style: getButtonStyle("first", isFirstDisabled),
|
|
296
|
+
"aria-label": "Go to first page",
|
|
297
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
298
|
+
"svg",
|
|
299
|
+
{
|
|
300
|
+
width: "16",
|
|
301
|
+
height: "16",
|
|
302
|
+
viewBox: "0 0 16 16",
|
|
303
|
+
fill: "none",
|
|
304
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
305
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
306
|
+
"path",
|
|
307
|
+
{
|
|
308
|
+
d: "M7 12L3 8L7 4M11 12L7 8L11 4",
|
|
309
|
+
stroke: "#2f2f2f",
|
|
310
|
+
strokeWidth: "1.5",
|
|
311
|
+
strokeLinecap: "round",
|
|
312
|
+
strokeLinejoin: "round"
|
|
313
|
+
}
|
|
314
|
+
)
|
|
315
|
+
}
|
|
316
|
+
)
|
|
317
|
+
}
|
|
318
|
+
),
|
|
319
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
320
|
+
"button",
|
|
321
|
+
{
|
|
322
|
+
type: "button",
|
|
323
|
+
onClick: handlePreviousPage,
|
|
324
|
+
disabled: isPreviousDisabled,
|
|
325
|
+
onMouseEnter: () => setHoveredButton("previous"),
|
|
326
|
+
onMouseLeave: () => setHoveredButton(null),
|
|
327
|
+
onMouseDown: () => setActiveButton("previous"),
|
|
328
|
+
onMouseUp: () => setActiveButton(null),
|
|
329
|
+
onFocus: () => setFocusedButton("previous"),
|
|
330
|
+
onBlur: () => setFocusedButton(null),
|
|
331
|
+
style: getButtonStyle("previous", isPreviousDisabled),
|
|
332
|
+
"aria-label": "Go to previous page",
|
|
333
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
334
|
+
"svg",
|
|
335
|
+
{
|
|
336
|
+
width: "16",
|
|
337
|
+
height: "16",
|
|
338
|
+
viewBox: "0 0 16 16",
|
|
339
|
+
fill: "none",
|
|
340
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
341
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
342
|
+
"path",
|
|
343
|
+
{
|
|
344
|
+
d: "M10 12L6 8L10 4",
|
|
345
|
+
stroke: "#2f2f2f",
|
|
346
|
+
strokeWidth: "1.5",
|
|
347
|
+
strokeLinecap: "round",
|
|
348
|
+
strokeLinejoin: "round"
|
|
349
|
+
}
|
|
350
|
+
)
|
|
351
|
+
}
|
|
352
|
+
)
|
|
353
|
+
}
|
|
354
|
+
),
|
|
355
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: paginationInputWrapperStyles, children: [
|
|
356
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: paginationLabelStyles, children: "Page" }),
|
|
357
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
358
|
+
"input",
|
|
359
|
+
{
|
|
360
|
+
type: "text",
|
|
361
|
+
value: inputValue,
|
|
362
|
+
onChange: handleInputChange,
|
|
363
|
+
onBlur: handleInputBlur,
|
|
364
|
+
onFocus: () => setInputFocused(true),
|
|
365
|
+
onKeyDown: handleInputKeyDown,
|
|
366
|
+
style: {
|
|
367
|
+
...paginationInputStyles,
|
|
368
|
+
...inputFocused && paginationInputFocusStyles
|
|
369
|
+
},
|
|
370
|
+
"aria-label": `Page ${currentPage} of ${totalPages}`
|
|
371
|
+
}
|
|
372
|
+
),
|
|
373
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: paginationLabelStyles, children: [
|
|
374
|
+
"of ",
|
|
375
|
+
totalPages
|
|
376
|
+
] })
|
|
377
|
+
] }),
|
|
378
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
379
|
+
"button",
|
|
380
|
+
{
|
|
381
|
+
type: "button",
|
|
382
|
+
onClick: handleNextPage,
|
|
383
|
+
disabled: isNextDisabled,
|
|
384
|
+
onMouseEnter: () => setHoveredButton("next"),
|
|
385
|
+
onMouseLeave: () => setHoveredButton(null),
|
|
386
|
+
onMouseDown: () => setActiveButton("next"),
|
|
387
|
+
onMouseUp: () => setActiveButton(null),
|
|
388
|
+
onFocus: () => setFocusedButton("next"),
|
|
389
|
+
onBlur: () => setFocusedButton(null),
|
|
390
|
+
style: getButtonStyle("next", isNextDisabled),
|
|
391
|
+
"aria-label": "Go to next page",
|
|
392
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
393
|
+
"svg",
|
|
394
|
+
{
|
|
395
|
+
width: "16",
|
|
396
|
+
height: "16",
|
|
397
|
+
viewBox: "0 0 16 16",
|
|
398
|
+
fill: "none",
|
|
399
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
400
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
401
|
+
"path",
|
|
402
|
+
{
|
|
403
|
+
d: "M6 4L10 8L6 12",
|
|
404
|
+
stroke: "#2f2f2f",
|
|
405
|
+
strokeWidth: "1.5",
|
|
406
|
+
strokeLinecap: "round",
|
|
407
|
+
strokeLinejoin: "round"
|
|
408
|
+
}
|
|
409
|
+
)
|
|
410
|
+
}
|
|
411
|
+
)
|
|
412
|
+
}
|
|
413
|
+
),
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
415
|
+
"button",
|
|
416
|
+
{
|
|
417
|
+
type: "button",
|
|
418
|
+
onClick: handleLastPage,
|
|
419
|
+
disabled: isLastDisabled,
|
|
420
|
+
onMouseEnter: () => setHoveredButton("last"),
|
|
421
|
+
onMouseLeave: () => setHoveredButton(null),
|
|
422
|
+
onMouseDown: () => setActiveButton("last"),
|
|
423
|
+
onMouseUp: () => setActiveButton(null),
|
|
424
|
+
onFocus: () => setFocusedButton("last"),
|
|
425
|
+
onBlur: () => setFocusedButton(null),
|
|
426
|
+
style: getButtonStyle("last", isLastDisabled),
|
|
427
|
+
"aria-label": "Go to last page",
|
|
428
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
429
|
+
"svg",
|
|
430
|
+
{
|
|
431
|
+
width: "16",
|
|
432
|
+
height: "16",
|
|
433
|
+
viewBox: "0 0 16 16",
|
|
434
|
+
fill: "none",
|
|
435
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
436
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
437
|
+
"path",
|
|
438
|
+
{
|
|
439
|
+
d: "M9 4L13 8L9 12M5 4L9 8L5 12",
|
|
440
|
+
stroke: "#2f2f2f",
|
|
441
|
+
strokeWidth: "1.5",
|
|
442
|
+
strokeLinecap: "round",
|
|
443
|
+
strokeLinejoin: "round"
|
|
444
|
+
}
|
|
445
|
+
)
|
|
446
|
+
}
|
|
447
|
+
)
|
|
448
|
+
}
|
|
449
|
+
)
|
|
450
|
+
] }),
|
|
451
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: rightAlignedStyles, children: [
|
|
452
|
+
onItemsPerPageChange && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
453
|
+
"button",
|
|
454
|
+
{
|
|
455
|
+
type: "button",
|
|
456
|
+
onClick: () => onItemsPerPageChange(itemsPerPage),
|
|
457
|
+
onMouseEnter: () => setPerPageHovered(true),
|
|
458
|
+
onMouseLeave: () => setPerPageHovered(false),
|
|
459
|
+
style: {
|
|
460
|
+
...perPageButtonStyles,
|
|
461
|
+
backgroundColor: perPageHovered ? "#f5f5f5" : "white"
|
|
462
|
+
},
|
|
463
|
+
"aria-label": "Items per page",
|
|
464
|
+
children: [
|
|
465
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: perPageTextStyles, children: [
|
|
466
|
+
itemsPerPage,
|
|
467
|
+
" per page"
|
|
468
|
+
] }),
|
|
469
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { size: 16, color: "#2f2f2f" })
|
|
470
|
+
]
|
|
471
|
+
}
|
|
472
|
+
),
|
|
473
|
+
onExpandTable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
474
|
+
"button",
|
|
475
|
+
{
|
|
476
|
+
type: "button",
|
|
477
|
+
onClick: onExpandTable,
|
|
478
|
+
onMouseEnter: () => setExpandHovered(true),
|
|
479
|
+
onMouseLeave: () => setExpandHovered(false),
|
|
480
|
+
style: {
|
|
481
|
+
...expandButtonStyles,
|
|
482
|
+
backgroundColor: expandHovered ? "#e5e5e5" : "#efefef"
|
|
483
|
+
},
|
|
484
|
+
"aria-label": "Expand table",
|
|
485
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: expandButtonTextStyles, children: "Expand table" })
|
|
486
|
+
}
|
|
487
|
+
)
|
|
488
|
+
] })
|
|
489
|
+
]
|
|
490
|
+
}
|
|
491
|
+
);
|
|
492
|
+
}
|
|
493
|
+
);
|
|
494
|
+
TableFooterPagination.displayName = "TableFooterPagination";
|
|
495
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
496
|
+
0 && (module.exports = {
|
|
497
|
+
TableFooterPagination
|
|
498
|
+
});
|
|
499
|
+
//# sourceMappingURL=TableFooterPagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/TableFooterPagination/index.ts","../src/TableFooterPagination/TableFooterPagination.tsx"],"sourcesContent":["export { TableFooterPagination } from './TableFooterPagination';\nexport type { TableFooterPaginationProps } from './TableFooterPagination';\n","import * as React from 'react';\nimport { clsx } from 'clsx';\nimport { ChevronDown } from 'lucide-react';\n\nexport interface TableFooterPaginationProps {\n /**\n * Current page number (1-indexed)\n */\n currentPage: number;\n /**\n * Total number of pages\n */\n totalPages: number;\n /**\n * Callback when page changes\n */\n onPageChange: (page: number) => void;\n /**\n * Total number of results\n */\n totalResults: number;\n /**\n * Number of results currently showing\n */\n currentResults: number;\n /**\n * Items per page\n */\n itemsPerPage: number;\n /**\n * Callback when items per page changes\n */\n onItemsPerPageChange?: (itemsPerPage: number) => void;\n /**\n * Callback when expand table is clicked\n */\n onExpandTable?: () => void;\n /**\n * Custom className\n */\n className?: string;\n /**\n * Custom style\n */\n style?: React.CSSProperties;\n /**\n * Test ID for testing\n */\n 'data-testid'?: string;\n}\n\nconst containerStyles: React.CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n backgroundColor: 'white',\n paddingTop: '4px',\n paddingBottom: 0,\n paddingLeft: 0,\n paddingRight: 0,\n fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n};\n\nconst textStyles: React.CSSProperties = {\n fontSize: '13px',\n fontWeight: 400,\n lineHeight: '1.5',\n color: '#2f2f2f',\n minWidth: '165px',\n};\n\nconst paginationWrapperStyles: React.CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: '8px',\n minWidth: '165px',\n flexWrap: 'wrap',\n};\n\nconst paginationButtonStyles: React.CSSProperties = {\n width: '32px',\n height: '32px',\n minWidth: '32px',\n minHeight: '32px',\n maxWidth: '32px',\n maxHeight: '32px',\n borderRadius: '99px',\n border: 'none',\n background: 'white',\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: 0,\n transition: 'background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out',\n flexShrink: 0,\n WebkitTapHighlightColor: 'transparent',\n outline: 'none',\n};\n\nconst paginationButtonDisabledStyles: React.CSSProperties = {\n cursor: 'not-allowed',\n opacity: 0.5,\n};\n\nconst paginationLabelStyles: React.CSSProperties = {\n fontSize: '13px',\n fontWeight: 400,\n lineHeight: '1.5',\n color: '#2f2f2f',\n};\n\nconst paginationInputWrapperStyles: React.CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n};\n\nconst paginationInputStyles: React.CSSProperties = {\n width: '60px',\n paddingTop: '12px',\n paddingBottom: '12px',\n paddingLeft: '16px',\n paddingRight: '16px',\n fontSize: '13px',\n fontWeight: 400,\n lineHeight: '1.5',\n color: '#2f2f2f',\n backgroundColor: 'white',\n border: '1px solid #dfdfdf',\n borderRadius: '8px',\n fontFamily: 'inherit',\n textAlign: 'center',\n outline: 'none',\n};\n\nconst paginationInputFocusStyles: React.CSSProperties = {\n boxShadow: '0px 0px 0px 3px #3cad51',\n};\n\nconst rightAlignedStyles: React.CSSProperties = {\n display: 'flex',\n gap: '16px',\n alignItems: 'center',\n justifyContent: 'flex-end',\n minWidth: '165px',\n};\n\nconst perPageButtonStyles: React.CSSProperties = {\n height: '32px',\n backgroundColor: 'white',\n border: '1px solid #d1d1d1',\n borderRadius: '8px',\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n paddingLeft: '12px',\n paddingRight: '8px',\n paddingTop: '8px',\n paddingBottom: '8px',\n cursor: 'pointer',\n transition: 'background-color 0.2s ease-in-out',\n outline: 'none',\n};\n\nconst perPageTextStyles: React.CSSProperties = {\n fontSize: '13px',\n fontWeight: 600,\n lineHeight: '1.5',\n color: '#2f2f2f',\n textAlign: 'center',\n};\n\nconst expandButtonStyles: React.CSSProperties = {\n height: '32px',\n minHeight: '32px',\n backgroundColor: '#efefef',\n border: 'none',\n borderRadius: '99px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n paddingLeft: '16px',\n paddingRight: '16px',\n paddingTop: 0,\n paddingBottom: 0,\n gap: 0,\n cursor: 'pointer',\n transition: 'background-color 0.2s ease-in-out',\n outline: 'none',\n};\n\nconst expandButtonTextStyles: React.CSSProperties = {\n fontSize: '13px',\n fontWeight: 600,\n lineHeight: '1.5',\n color: '#2f2f2f',\n textAlign: 'center',\n};\n\n/**\n * TableFooterPagination component - Arbor Design System\n *\n * A table footer component with result count, pagination, and table controls.\n */\nexport const TableFooterPagination = React.forwardRef<\n HTMLDivElement,\n TableFooterPaginationProps\n>(\n (\n {\n currentPage,\n totalPages,\n onPageChange,\n totalResults,\n currentResults,\n itemsPerPage,\n onItemsPerPageChange,\n onExpandTable,\n className,\n style,\n 'data-testid': dataTestId,\n },\n ref\n ) => {\n const [inputValue, setInputValue] = React.useState(currentPage.toString());\n const [focusedButton, setFocusedButton] = React.useState<string | null>(null);\n const [hoveredButton, setHoveredButton] = React.useState<string | null>(null);\n const [activeButton, setActiveButton] = React.useState<string | null>(null);\n const [inputFocused, setInputFocused] = React.useState(false);\n const [perPageHovered, setPerPageHovered] = React.useState(false);\n const [expandHovered, setExpandHovered] = React.useState(false);\n\n React.useEffect(() => {\n setInputValue(currentPage.toString());\n }, [currentPage]);\n\n const handleFirstPage = () => {\n if (currentPage !== 1) {\n onPageChange(1);\n }\n };\n\n const handlePreviousPage = () => {\n if (currentPage > 1) {\n onPageChange(currentPage - 1);\n }\n };\n\n const handleNextPage = () => {\n if (currentPage < totalPages) {\n onPageChange(currentPage + 1);\n }\n };\n\n const handleLastPage = () => {\n if (currentPage !== totalPages) {\n onPageChange(totalPages);\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value;\n if (value === '' || /^\\d+$/.test(value)) {\n setInputValue(value);\n }\n };\n\n const handleInputBlur = () => {\n setInputFocused(false);\n const pageNumber = parseInt(inputValue, 10);\n if (isNaN(pageNumber) || pageNumber < 1) {\n setInputValue(currentPage.toString());\n } else if (pageNumber > totalPages) {\n setInputValue(totalPages.toString());\n onPageChange(totalPages);\n } else if (pageNumber !== currentPage) {\n onPageChange(pageNumber);\n }\n };\n\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n handleInputBlur();\n (e.target as HTMLInputElement).blur();\n }\n };\n\n const getButtonStyle = (\n buttonName: string,\n disabled: boolean\n ): React.CSSProperties => {\n if (disabled) {\n return { ...paginationButtonStyles, ...paginationButtonDisabledStyles };\n }\n\n const isHovered = hoveredButton === buttonName;\n const isFocused = focusedButton === buttonName;\n const isActive = activeButton === buttonName;\n\n const style: React.CSSProperties = {\n ...paginationButtonStyles,\n };\n\n if (isHovered && !isFocused && !isActive) {\n style.backgroundColor = '#efefef';\n }\n\n if (isActive && !isFocused) {\n style.backgroundColor = 'transparent';\n }\n\n if (isFocused) {\n style.boxShadow = '0px 0px 0px 3px #3cad51';\n style.backgroundColor = 'rgba(255, 255, 255, 0.01)';\n }\n\n return style;\n };\n\n const isFirstDisabled = currentPage === 1;\n const isPreviousDisabled = currentPage === 1;\n const isNextDisabled = currentPage === totalPages;\n const isLastDisabled = currentPage === totalPages;\n\n const resultText =\n currentResults === totalResults\n ? `Showing ${totalResults} results`\n : `Showing ${currentResults} of ${totalResults} results`;\n\n return (\n <div\n ref={ref}\n className={clsx('arbor-table-footer-pagination', className)}\n style={{ ...containerStyles, ...style }}\n data-testid={dataTestId}\n >\n {/* Left section - Results count */}\n <div style={textStyles}>{resultText}</div>\n\n {/* Middle section - Pagination */}\n <div style={paginationWrapperStyles}>\n <button\n type=\"button\"\n onClick={handleFirstPage}\n disabled={isFirstDisabled}\n onMouseEnter={() => setHoveredButton('first')}\n onMouseLeave={() => setHoveredButton(null)}\n onMouseDown={() => setActiveButton('first')}\n onMouseUp={() => setActiveButton(null)}\n onFocus={() => setFocusedButton('first')}\n onBlur={() => setFocusedButton(null)}\n style={getButtonStyle('first', isFirstDisabled)}\n aria-label=\"Go to first page\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7 12L3 8L7 4M11 12L7 8L11 4\"\n stroke=\"#2f2f2f\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </button>\n\n <button\n type=\"button\"\n onClick={handlePreviousPage}\n disabled={isPreviousDisabled}\n onMouseEnter={() => setHoveredButton('previous')}\n onMouseLeave={() => setHoveredButton(null)}\n onMouseDown={() => setActiveButton('previous')}\n onMouseUp={() => setActiveButton(null)}\n onFocus={() => setFocusedButton('previous')}\n onBlur={() => setFocusedButton(null)}\n style={getButtonStyle('previous', isPreviousDisabled)}\n aria-label=\"Go to previous page\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"#2f2f2f\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </button>\n\n <div style={paginationInputWrapperStyles}>\n <span style={paginationLabelStyles}>Page</span>\n <input\n type=\"text\"\n value={inputValue}\n onChange={handleInputChange}\n onBlur={handleInputBlur}\n onFocus={() => setInputFocused(true)}\n onKeyDown={handleInputKeyDown}\n style={{\n ...paginationInputStyles,\n ...(inputFocused && paginationInputFocusStyles),\n }}\n aria-label={`Page ${currentPage} of ${totalPages}`}\n />\n <span style={paginationLabelStyles}>of {totalPages}</span>\n </div>\n\n <button\n type=\"button\"\n onClick={handleNextPage}\n disabled={isNextDisabled}\n onMouseEnter={() => setHoveredButton('next')}\n onMouseLeave={() => setHoveredButton(null)}\n onMouseDown={() => setActiveButton('next')}\n onMouseUp={() => setActiveButton(null)}\n onFocus={() => setFocusedButton('next')}\n onBlur={() => setFocusedButton(null)}\n style={getButtonStyle('next', isNextDisabled)}\n aria-label=\"Go to next page\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"#2f2f2f\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </button>\n\n <button\n type=\"button\"\n onClick={handleLastPage}\n disabled={isLastDisabled}\n onMouseEnter={() => setHoveredButton('last')}\n onMouseLeave={() => setHoveredButton(null)}\n onMouseDown={() => setActiveButton('last')}\n onMouseUp={() => setActiveButton(null)}\n onFocus={() => setFocusedButton('last')}\n onBlur={() => setFocusedButton(null)}\n style={getButtonStyle('last', isLastDisabled)}\n aria-label=\"Go to last page\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 4L13 8L9 12M5 4L9 8L5 12\"\n stroke=\"#2f2f2f\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n {/* Right section - Controls */}\n <div style={rightAlignedStyles}>\n {onItemsPerPageChange && (\n <button\n type=\"button\"\n onClick={() => onItemsPerPageChange(itemsPerPage)}\n onMouseEnter={() => setPerPageHovered(true)}\n onMouseLeave={() => setPerPageHovered(false)}\n style={{\n ...perPageButtonStyles,\n backgroundColor: perPageHovered ? '#f5f5f5' : 'white',\n }}\n aria-label=\"Items per page\"\n >\n <span style={perPageTextStyles}>{itemsPerPage} per page</span>\n <ChevronDown size={16} color=\"#2f2f2f\" />\n </button>\n )}\n\n {onExpandTable && (\n <button\n type=\"button\"\n onClick={onExpandTable}\n onMouseEnter={() => setExpandHovered(true)}\n onMouseLeave={() => setExpandHovered(false)}\n style={{\n ...expandButtonStyles,\n backgroundColor: expandHovered ? '#e5e5e5' : '#efefef',\n }}\n aria-label=\"Expand table\"\n >\n <span style={expandButtonTextStyles}>Expand table</span>\n </button>\n )}\n </div>\n </div>\n );\n }\n);\n\nTableFooterPagination.displayName = 'TableFooterPagination';\n"],"mappings":"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","names":["style"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/Tabs.d.mts
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface TabItem {
|
|
4
|
+
/**
|
|
5
|
+
* The label text for the tab
|
|
6
|
+
*/
|
|
7
|
+
label: string;
|
|
8
|
+
/**
|
|
9
|
+
* Optional icon component
|
|
10
|
+
*/
|
|
11
|
+
icon?: React.ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Value to identify this tab
|
|
14
|
+
*/
|
|
15
|
+
value: string;
|
|
16
|
+
}
|
|
17
|
+
interface TabsProps {
|
|
18
|
+
/**
|
|
19
|
+
* Array of tab items to display
|
|
20
|
+
*/
|
|
21
|
+
tabs: TabItem[];
|
|
22
|
+
/**
|
|
23
|
+
* Currently active tab value
|
|
24
|
+
*/
|
|
25
|
+
activeTab?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Callback when tab is clicked
|
|
28
|
+
*/
|
|
29
|
+
onTabChange?: (value: string) => void;
|
|
30
|
+
/**
|
|
31
|
+
* Custom className
|
|
32
|
+
*/
|
|
33
|
+
className?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Custom style
|
|
36
|
+
*/
|
|
37
|
+
style?: React.CSSProperties;
|
|
38
|
+
/**
|
|
39
|
+
* Test ID for testing
|
|
40
|
+
*/
|
|
41
|
+
'data-testid'?: string;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Tabs component - Arbor Design System
|
|
45
|
+
*
|
|
46
|
+
* Horizontal tabs with support for icons and various states.
|
|
47
|
+
*/
|
|
48
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
49
|
+
|
|
50
|
+
export { type TabItem, Tabs, type TabsProps };
|