@flipdish/ui-library 0.36.0 → 0.36.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/molecules/Pagination/components/PaginationBase.cjs +2 -104
- package/dist/components/molecules/Pagination/components/PaginationBase.cjs.map +1 -1
- package/dist/components/molecules/Pagination/components/PaginationBase.d.ts +2 -14
- package/dist/components/molecules/Pagination/components/PaginationBase.d.ts.map +1 -1
- package/dist/components/molecules/Pagination/components/PaginationBase.js +3 -105
- package/dist/components/molecules/Pagination/components/PaginationBase.js.map +1 -1
- package/dist/components/molecules/Pagination/pagination.utils.cjs +89 -0
- package/dist/components/molecules/Pagination/pagination.utils.cjs.map +1 -0
- package/dist/components/molecules/Pagination/pagination.utils.d.ts +32 -0
- package/dist/components/molecules/Pagination/pagination.utils.d.ts.map +1 -0
- package/dist/components/molecules/Pagination/pagination.utils.js +87 -0
- package/dist/components/molecules/Pagination/pagination.utils.js.map +1 -0
- package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.cjs +1 -1
- package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.js +1 -1
- package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.js.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs +5 -3
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js +5 -3
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,104 +3,12 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var pagination_utils = require('../pagination.utils.cjs');
|
|
6
7
|
|
|
7
8
|
const PaginationContext = React.createContext(undefined);
|
|
8
9
|
const PaginationRoot = ({ total, siblingCount = 1, page, onPageChange, children, style, className, 'data-testid': dataTestId, }) => {
|
|
9
|
-
const [pages, setPages] = React.useState([]);
|
|
10
10
|
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'pagination', rootName: 'pagination' });
|
|
11
|
-
const
|
|
12
|
-
const items = [];
|
|
13
|
-
// Calculate the maximum number of pagination elements (pages, potential ellipsis, first and last) to show
|
|
14
|
-
const totalPageNumbers = siblingCount * 2 + 5;
|
|
15
|
-
// If the total number of items to show is greater than or equal to the total pages,
|
|
16
|
-
// we can simply list all pages without needing to collapse with ellipsis
|
|
17
|
-
if (totalPageNumbers >= total) {
|
|
18
|
-
for (let i = 1; i <= total; i++) {
|
|
19
|
-
items.push({
|
|
20
|
-
type: 'page',
|
|
21
|
-
value: i,
|
|
22
|
-
isCurrent: i === page,
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
// Calculate left and right sibling boundaries around the current page
|
|
28
|
-
const leftSiblingIndex = Math.max(page - siblingCount, 1);
|
|
29
|
-
const rightSiblingIndex = Math.min(page + siblingCount, total);
|
|
30
|
-
// Determine if we need to show ellipsis on either side
|
|
31
|
-
const showLeftEllipsis = leftSiblingIndex > 2;
|
|
32
|
-
const showRightEllipsis = rightSiblingIndex < total - 1;
|
|
33
|
-
// Case 1: No left ellipsis, but right ellipsis is needed
|
|
34
|
-
if (!showLeftEllipsis && showRightEllipsis) {
|
|
35
|
-
// Calculate how many page numbers to show starting from the beginning
|
|
36
|
-
const leftItemCount = siblingCount * 2 + 3;
|
|
37
|
-
const leftRange = range(1, leftItemCount);
|
|
38
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
39
|
-
leftRange.forEach((pageNum) => items.push({
|
|
40
|
-
type: 'page',
|
|
41
|
-
value: pageNum,
|
|
42
|
-
isCurrent: pageNum === page,
|
|
43
|
-
}));
|
|
44
|
-
// Insert ellipsis after the left range and add the last page
|
|
45
|
-
items.push({ type: 'ellipsis', key: leftItemCount + 1 });
|
|
46
|
-
items.push({
|
|
47
|
-
type: 'page',
|
|
48
|
-
value: total,
|
|
49
|
-
isCurrent: total === page,
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
// Case 2: Left ellipsis needed, but right ellipsis is not needed
|
|
53
|
-
else if (showLeftEllipsis && !showRightEllipsis) {
|
|
54
|
-
// Determine how many items from the end should be shown
|
|
55
|
-
const rightItemCount = siblingCount * 2 + 3;
|
|
56
|
-
const rightRange = range(total - rightItemCount + 1, total);
|
|
57
|
-
// Always show the first page, then add an ellipsis to indicate skipped pages
|
|
58
|
-
items.push({
|
|
59
|
-
type: 'page',
|
|
60
|
-
value: 1,
|
|
61
|
-
isCurrent: page === 1,
|
|
62
|
-
});
|
|
63
|
-
items.push({ type: 'ellipsis', key: total - rightItemCount });
|
|
64
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
65
|
-
rightRange.forEach((pageNum) => items.push({
|
|
66
|
-
type: 'page',
|
|
67
|
-
value: pageNum,
|
|
68
|
-
isCurrent: pageNum === page,
|
|
69
|
-
}));
|
|
70
|
-
}
|
|
71
|
-
// Case 3: Both left and right ellipsis are needed
|
|
72
|
-
else if (showLeftEllipsis && showRightEllipsis) {
|
|
73
|
-
// Always show the first page
|
|
74
|
-
items.push({
|
|
75
|
-
type: 'page',
|
|
76
|
-
value: 1,
|
|
77
|
-
isCurrent: page === 1,
|
|
78
|
-
});
|
|
79
|
-
// Insert left ellipsis after the first page
|
|
80
|
-
items.push({ type: 'ellipsis', key: leftSiblingIndex - 1 });
|
|
81
|
-
// Show a range of pages around the current page
|
|
82
|
-
const middleRange = range(leftSiblingIndex, rightSiblingIndex);
|
|
83
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
84
|
-
middleRange.forEach((pageNum) => items.push({
|
|
85
|
-
type: 'page',
|
|
86
|
-
value: pageNum,
|
|
87
|
-
isCurrent: pageNum === page,
|
|
88
|
-
}));
|
|
89
|
-
// Insert right ellipsis and finally the last page
|
|
90
|
-
items.push({ type: 'ellipsis', key: rightSiblingIndex + 1 });
|
|
91
|
-
items.push({
|
|
92
|
-
type: 'page',
|
|
93
|
-
value: total,
|
|
94
|
-
isCurrent: total === page,
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
return items;
|
|
99
|
-
}, [total, siblingCount, page]);
|
|
100
|
-
React.useEffect(() => {
|
|
101
|
-
const paginationItems = createPaginationItems();
|
|
102
|
-
setPages(paginationItems);
|
|
103
|
-
}, [createPaginationItems]);
|
|
11
|
+
const pages = pagination_utils.createPaginationItems({ total, siblingCount, page });
|
|
104
12
|
const onPageChangeHandler = (newPage) => {
|
|
105
13
|
onPageChange?.(newPage);
|
|
106
14
|
};
|
|
@@ -113,16 +21,6 @@ const PaginationRoot = ({ total, siblingCount = 1, page, onPageChange, children,
|
|
|
113
21
|
};
|
|
114
22
|
return (jsxRuntime.jsx(PaginationContext.Provider, { value: paginationContextValue, children: jsxRuntime.jsx("nav", { "aria-label": "Pagination Navigation", "data-testid": rootTestId, style: style, className: className, children: children }) }));
|
|
115
23
|
};
|
|
116
|
-
/**
|
|
117
|
-
* Creates an array of numbers from start to end.
|
|
118
|
-
* @param start - The start number.
|
|
119
|
-
* @param end - The end number.
|
|
120
|
-
* @returns An array of numbers from start to end.
|
|
121
|
-
*/
|
|
122
|
-
const range = (start, end) => {
|
|
123
|
-
const length = end - start + 1;
|
|
124
|
-
return Array.from({ length }, (_, index) => index + start);
|
|
125
|
-
};
|
|
126
24
|
const Trigger = ({ children, style, className, asChild = false, direction, ariaLabel }) => {
|
|
127
25
|
const context = React.useContext(PaginationContext);
|
|
128
26
|
if (!context) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationBase.cjs","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"sourcesContent":[null],"names":["createContext","
|
|
1
|
+
{"version":3,"file":"PaginationBase.cjs","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"sourcesContent":[null],"names":["createContext","useResolvedTestId","createPaginationItems","_jsx","useContext","joinTestId","_Fragment","isValidElement","cloneElement"],"mappings":"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"}
|
|
@@ -1,20 +1,8 @@
|
|
|
1
1
|
import type { CSSProperties, FC, ReactNode } from 'react';
|
|
2
|
-
type
|
|
3
|
-
/** The type of the pagination item. */
|
|
4
|
-
type: 'page';
|
|
5
|
-
/** The value of the pagination item. */
|
|
6
|
-
value: number;
|
|
7
|
-
/** Whether the pagination item is the current page. */
|
|
8
|
-
isCurrent: boolean;
|
|
9
|
-
};
|
|
10
|
-
type PaginationEllipsisType = {
|
|
11
|
-
type: 'ellipsis';
|
|
12
|
-
key: number;
|
|
13
|
-
};
|
|
14
|
-
type PaginationItemType = PaginationPage | PaginationEllipsisType;
|
|
2
|
+
import { type PaginationWindowItem } from '../pagination.utils';
|
|
15
3
|
interface PaginationContextType {
|
|
16
4
|
/** The pages of the pagination. */
|
|
17
|
-
pages:
|
|
5
|
+
pages: PaginationWindowItem[];
|
|
18
6
|
/** The current page of the pagination. */
|
|
19
7
|
currentPage: number;
|
|
20
8
|
/** The total number of pages. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,EAAE,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PaginationBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,104 +1,12 @@
|
|
|
1
1
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
3
|
-
import { createContext,
|
|
3
|
+
import { createContext, useContext, isValidElement, cloneElement } from 'react';
|
|
4
|
+
import { createPaginationItems } from '../pagination.utils.js';
|
|
4
5
|
|
|
5
6
|
const PaginationContext = createContext(undefined);
|
|
6
7
|
const PaginationRoot = ({ total, siblingCount = 1, page, onPageChange, children, style, className, 'data-testid': dataTestId, }) => {
|
|
7
|
-
const [pages, setPages] = useState([]);
|
|
8
8
|
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'pagination', rootName: 'pagination' });
|
|
9
|
-
const
|
|
10
|
-
const items = [];
|
|
11
|
-
// Calculate the maximum number of pagination elements (pages, potential ellipsis, first and last) to show
|
|
12
|
-
const totalPageNumbers = siblingCount * 2 + 5;
|
|
13
|
-
// If the total number of items to show is greater than or equal to the total pages,
|
|
14
|
-
// we can simply list all pages without needing to collapse with ellipsis
|
|
15
|
-
if (totalPageNumbers >= total) {
|
|
16
|
-
for (let i = 1; i <= total; i++) {
|
|
17
|
-
items.push({
|
|
18
|
-
type: 'page',
|
|
19
|
-
value: i,
|
|
20
|
-
isCurrent: i === page,
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
// Calculate left and right sibling boundaries around the current page
|
|
26
|
-
const leftSiblingIndex = Math.max(page - siblingCount, 1);
|
|
27
|
-
const rightSiblingIndex = Math.min(page + siblingCount, total);
|
|
28
|
-
// Determine if we need to show ellipsis on either side
|
|
29
|
-
const showLeftEllipsis = leftSiblingIndex > 2;
|
|
30
|
-
const showRightEllipsis = rightSiblingIndex < total - 1;
|
|
31
|
-
// Case 1: No left ellipsis, but right ellipsis is needed
|
|
32
|
-
if (!showLeftEllipsis && showRightEllipsis) {
|
|
33
|
-
// Calculate how many page numbers to show starting from the beginning
|
|
34
|
-
const leftItemCount = siblingCount * 2 + 3;
|
|
35
|
-
const leftRange = range(1, leftItemCount);
|
|
36
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
37
|
-
leftRange.forEach((pageNum) => items.push({
|
|
38
|
-
type: 'page',
|
|
39
|
-
value: pageNum,
|
|
40
|
-
isCurrent: pageNum === page,
|
|
41
|
-
}));
|
|
42
|
-
// Insert ellipsis after the left range and add the last page
|
|
43
|
-
items.push({ type: 'ellipsis', key: leftItemCount + 1 });
|
|
44
|
-
items.push({
|
|
45
|
-
type: 'page',
|
|
46
|
-
value: total,
|
|
47
|
-
isCurrent: total === page,
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
// Case 2: Left ellipsis needed, but right ellipsis is not needed
|
|
51
|
-
else if (showLeftEllipsis && !showRightEllipsis) {
|
|
52
|
-
// Determine how many items from the end should be shown
|
|
53
|
-
const rightItemCount = siblingCount * 2 + 3;
|
|
54
|
-
const rightRange = range(total - rightItemCount + 1, total);
|
|
55
|
-
// Always show the first page, then add an ellipsis to indicate skipped pages
|
|
56
|
-
items.push({
|
|
57
|
-
type: 'page',
|
|
58
|
-
value: 1,
|
|
59
|
-
isCurrent: page === 1,
|
|
60
|
-
});
|
|
61
|
-
items.push({ type: 'ellipsis', key: total - rightItemCount });
|
|
62
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
63
|
-
rightRange.forEach((pageNum) => items.push({
|
|
64
|
-
type: 'page',
|
|
65
|
-
value: pageNum,
|
|
66
|
-
isCurrent: pageNum === page,
|
|
67
|
-
}));
|
|
68
|
-
}
|
|
69
|
-
// Case 3: Both left and right ellipsis are needed
|
|
70
|
-
else if (showLeftEllipsis && showRightEllipsis) {
|
|
71
|
-
// Always show the first page
|
|
72
|
-
items.push({
|
|
73
|
-
type: 'page',
|
|
74
|
-
value: 1,
|
|
75
|
-
isCurrent: page === 1,
|
|
76
|
-
});
|
|
77
|
-
// Insert left ellipsis after the first page
|
|
78
|
-
items.push({ type: 'ellipsis', key: leftSiblingIndex - 1 });
|
|
79
|
-
// Show a range of pages around the current page
|
|
80
|
-
const middleRange = range(leftSiblingIndex, rightSiblingIndex);
|
|
81
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
82
|
-
middleRange.forEach((pageNum) => items.push({
|
|
83
|
-
type: 'page',
|
|
84
|
-
value: pageNum,
|
|
85
|
-
isCurrent: pageNum === page,
|
|
86
|
-
}));
|
|
87
|
-
// Insert right ellipsis and finally the last page
|
|
88
|
-
items.push({ type: 'ellipsis', key: rightSiblingIndex + 1 });
|
|
89
|
-
items.push({
|
|
90
|
-
type: 'page',
|
|
91
|
-
value: total,
|
|
92
|
-
isCurrent: total === page,
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
return items;
|
|
97
|
-
}, [total, siblingCount, page]);
|
|
98
|
-
useEffect(() => {
|
|
99
|
-
const paginationItems = createPaginationItems();
|
|
100
|
-
setPages(paginationItems);
|
|
101
|
-
}, [createPaginationItems]);
|
|
9
|
+
const pages = createPaginationItems({ total, siblingCount, page });
|
|
102
10
|
const onPageChangeHandler = (newPage) => {
|
|
103
11
|
onPageChange?.(newPage);
|
|
104
12
|
};
|
|
@@ -111,16 +19,6 @@ const PaginationRoot = ({ total, siblingCount = 1, page, onPageChange, children,
|
|
|
111
19
|
};
|
|
112
20
|
return (jsx(PaginationContext.Provider, { value: paginationContextValue, children: jsx("nav", { "aria-label": "Pagination Navigation", "data-testid": rootTestId, style: style, className: className, children: children }) }));
|
|
113
21
|
};
|
|
114
|
-
/**
|
|
115
|
-
* Creates an array of numbers from start to end.
|
|
116
|
-
* @param start - The start number.
|
|
117
|
-
* @param end - The end number.
|
|
118
|
-
* @returns An array of numbers from start to end.
|
|
119
|
-
*/
|
|
120
|
-
const range = (start, end) => {
|
|
121
|
-
const length = end - start + 1;
|
|
122
|
-
return Array.from({ length }, (_, index) => index + start);
|
|
123
|
-
};
|
|
124
22
|
const Trigger = ({ children, style, className, asChild = false, direction, ariaLabel }) => {
|
|
125
23
|
const context = useContext(PaginationContext);
|
|
126
24
|
if (!context) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationBase.js","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"sourcesContent":[null],"names":["_jsx","_Fragment"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PaginationBase.js","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"sourcesContent":[null],"names":["_jsx","_Fragment"],"mappings":"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"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const range = (start, end) => {
|
|
4
|
+
const length = end - start + 1;
|
|
5
|
+
return Array.from({ length }, (_, index) => index + start);
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Chooses the page numbers and ellipses shown between the previous and next controls.
|
|
9
|
+
*
|
|
10
|
+
* @param options Current page, total pages and how many siblings stay beside the current page.
|
|
11
|
+
* @returns Items in display order. Every page is listed when they fit; otherwise a run at the start or the end collapses behind one ellipsis, and a page in the middle keeps both.
|
|
12
|
+
*/
|
|
13
|
+
const createPaginationItems = ({ page, total, siblingCount }) => {
|
|
14
|
+
const items = [];
|
|
15
|
+
// Current page, one sibling run on each side, the first and last pages, and two ellipses.
|
|
16
|
+
const totalPageNumbers = siblingCount * 2 + 5;
|
|
17
|
+
if (totalPageNumbers >= total) {
|
|
18
|
+
for (let i = 1; i <= total; i++) {
|
|
19
|
+
items.push({
|
|
20
|
+
type: 'page',
|
|
21
|
+
value: i,
|
|
22
|
+
isCurrent: i === page,
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
return items;
|
|
26
|
+
}
|
|
27
|
+
const leftSiblingIndex = Math.max(page - siblingCount, 1);
|
|
28
|
+
const rightSiblingIndex = Math.min(page + siblingCount, total);
|
|
29
|
+
const showLeftEllipsis = leftSiblingIndex > 2;
|
|
30
|
+
const showRightEllipsis = rightSiblingIndex < total - 1;
|
|
31
|
+
if (!showLeftEllipsis && showRightEllipsis) {
|
|
32
|
+
const leftItemCount = siblingCount * 2 + 3;
|
|
33
|
+
for (const pageNum of range(1, leftItemCount)) {
|
|
34
|
+
items.push({
|
|
35
|
+
type: 'page',
|
|
36
|
+
value: pageNum,
|
|
37
|
+
isCurrent: pageNum === page,
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
items.push({ type: 'ellipsis', key: leftItemCount + 1 });
|
|
41
|
+
items.push({
|
|
42
|
+
type: 'page',
|
|
43
|
+
value: total,
|
|
44
|
+
isCurrent: total === page,
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
else if (showLeftEllipsis && !showRightEllipsis) {
|
|
48
|
+
const rightItemCount = siblingCount * 2 + 3;
|
|
49
|
+
const rightRange = range(total - rightItemCount + 1, total);
|
|
50
|
+
items.push({
|
|
51
|
+
type: 'page',
|
|
52
|
+
value: 1,
|
|
53
|
+
isCurrent: page === 1,
|
|
54
|
+
});
|
|
55
|
+
items.push({ type: 'ellipsis', key: total - rightItemCount });
|
|
56
|
+
for (const pageNum of rightRange) {
|
|
57
|
+
items.push({
|
|
58
|
+
type: 'page',
|
|
59
|
+
value: pageNum,
|
|
60
|
+
isCurrent: pageNum === page,
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
else if (showLeftEllipsis && showRightEllipsis) {
|
|
65
|
+
items.push({
|
|
66
|
+
type: 'page',
|
|
67
|
+
value: 1,
|
|
68
|
+
isCurrent: page === 1,
|
|
69
|
+
});
|
|
70
|
+
items.push({ type: 'ellipsis', key: leftSiblingIndex - 1 });
|
|
71
|
+
for (const pageNum of range(leftSiblingIndex, rightSiblingIndex)) {
|
|
72
|
+
items.push({
|
|
73
|
+
type: 'page',
|
|
74
|
+
value: pageNum,
|
|
75
|
+
isCurrent: pageNum === page,
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
items.push({ type: 'ellipsis', key: rightSiblingIndex + 1 });
|
|
79
|
+
items.push({
|
|
80
|
+
type: 'page',
|
|
81
|
+
value: total,
|
|
82
|
+
isCurrent: total === page,
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
return items;
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
exports.createPaginationItems = createPaginationItems;
|
|
89
|
+
//# sourceMappingURL=pagination.utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.utils.cjs","sources":["../../../../src/components/molecules/Pagination/pagination.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/** One numbered page in the window between the previous and next controls. */
|
|
2
|
+
export interface PaginationPageItem {
|
|
3
|
+
type: 'page';
|
|
4
|
+
/** 1-based page number. */
|
|
5
|
+
value: number;
|
|
6
|
+
/** Whether this page is the one currently selected. */
|
|
7
|
+
isCurrent: boolean;
|
|
8
|
+
}
|
|
9
|
+
/** A collapsed gap. `key` is the page number on the collapsed side of the visible window. */
|
|
10
|
+
export interface PaginationEllipsisItem {
|
|
11
|
+
type: 'ellipsis';
|
|
12
|
+
key: number;
|
|
13
|
+
}
|
|
14
|
+
/** A page button or an ellipsis, in the order the numbered row renders them. */
|
|
15
|
+
export type PaginationWindowItem = PaginationPageItem | PaginationEllipsisItem;
|
|
16
|
+
/** Inputs that decide which page numbers stay visible. */
|
|
17
|
+
export interface PaginationWindowOptions {
|
|
18
|
+
/** 1-based page currently selected. A page outside `1..total` selects nothing. */
|
|
19
|
+
page: number;
|
|
20
|
+
/** Total number of pages. `0` yields no items. */
|
|
21
|
+
total: number;
|
|
22
|
+
/** How many pages stay visible on each side of the current page before the row collapses. */
|
|
23
|
+
siblingCount: number;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Chooses the page numbers and ellipses shown between the previous and next controls.
|
|
27
|
+
*
|
|
28
|
+
* @param options Current page, total pages and how many siblings stay beside the current page.
|
|
29
|
+
* @returns Items in display order. Every page is listed when they fit; otherwise a run at the start or the end collapses behind one ellipsis, and a page in the middle keeps both.
|
|
30
|
+
*/
|
|
31
|
+
export declare const createPaginationItems: ({ page, total, siblingCount }: PaginationWindowOptions) => PaginationWindowItem[];
|
|
32
|
+
//# sourceMappingURL=pagination.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Pagination/pagination.utils.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,6FAA6F;AAC7F,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,gFAAgF;AAChF,MAAM,MAAM,oBAAoB,GAAG,kBAAkB,GAAG,sBAAsB,CAAC;AAE/E,0DAA0D;AAC1D,MAAM,WAAW,uBAAuB;IACtC,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,YAAY,EAAE,MAAM,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,+BAA+B,uBAAuB,KAAG,oBAAoB,EAgFlH,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
const range = (start, end) => {
|
|
2
|
+
const length = end - start + 1;
|
|
3
|
+
return Array.from({ length }, (_, index) => index + start);
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Chooses the page numbers and ellipses shown between the previous and next controls.
|
|
7
|
+
*
|
|
8
|
+
* @param options Current page, total pages and how many siblings stay beside the current page.
|
|
9
|
+
* @returns Items in display order. Every page is listed when they fit; otherwise a run at the start or the end collapses behind one ellipsis, and a page in the middle keeps both.
|
|
10
|
+
*/
|
|
11
|
+
const createPaginationItems = ({ page, total, siblingCount }) => {
|
|
12
|
+
const items = [];
|
|
13
|
+
// Current page, one sibling run on each side, the first and last pages, and two ellipses.
|
|
14
|
+
const totalPageNumbers = siblingCount * 2 + 5;
|
|
15
|
+
if (totalPageNumbers >= total) {
|
|
16
|
+
for (let i = 1; i <= total; i++) {
|
|
17
|
+
items.push({
|
|
18
|
+
type: 'page',
|
|
19
|
+
value: i,
|
|
20
|
+
isCurrent: i === page,
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return items;
|
|
24
|
+
}
|
|
25
|
+
const leftSiblingIndex = Math.max(page - siblingCount, 1);
|
|
26
|
+
const rightSiblingIndex = Math.min(page + siblingCount, total);
|
|
27
|
+
const showLeftEllipsis = leftSiblingIndex > 2;
|
|
28
|
+
const showRightEllipsis = rightSiblingIndex < total - 1;
|
|
29
|
+
if (!showLeftEllipsis && showRightEllipsis) {
|
|
30
|
+
const leftItemCount = siblingCount * 2 + 3;
|
|
31
|
+
for (const pageNum of range(1, leftItemCount)) {
|
|
32
|
+
items.push({
|
|
33
|
+
type: 'page',
|
|
34
|
+
value: pageNum,
|
|
35
|
+
isCurrent: pageNum === page,
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
items.push({ type: 'ellipsis', key: leftItemCount + 1 });
|
|
39
|
+
items.push({
|
|
40
|
+
type: 'page',
|
|
41
|
+
value: total,
|
|
42
|
+
isCurrent: total === page,
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
else if (showLeftEllipsis && !showRightEllipsis) {
|
|
46
|
+
const rightItemCount = siblingCount * 2 + 3;
|
|
47
|
+
const rightRange = range(total - rightItemCount + 1, total);
|
|
48
|
+
items.push({
|
|
49
|
+
type: 'page',
|
|
50
|
+
value: 1,
|
|
51
|
+
isCurrent: page === 1,
|
|
52
|
+
});
|
|
53
|
+
items.push({ type: 'ellipsis', key: total - rightItemCount });
|
|
54
|
+
for (const pageNum of rightRange) {
|
|
55
|
+
items.push({
|
|
56
|
+
type: 'page',
|
|
57
|
+
value: pageNum,
|
|
58
|
+
isCurrent: pageNum === page,
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
else if (showLeftEllipsis && showRightEllipsis) {
|
|
63
|
+
items.push({
|
|
64
|
+
type: 'page',
|
|
65
|
+
value: 1,
|
|
66
|
+
isCurrent: page === 1,
|
|
67
|
+
});
|
|
68
|
+
items.push({ type: 'ellipsis', key: leftSiblingIndex - 1 });
|
|
69
|
+
for (const pageNum of range(leftSiblingIndex, rightSiblingIndex)) {
|
|
70
|
+
items.push({
|
|
71
|
+
type: 'page',
|
|
72
|
+
value: pageNum,
|
|
73
|
+
isCurrent: pageNum === page,
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
items.push({ type: 'ellipsis', key: rightSiblingIndex + 1 });
|
|
77
|
+
items.push({
|
|
78
|
+
type: 'page',
|
|
79
|
+
value: total,
|
|
80
|
+
isCurrent: total === page,
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
return items;
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
export { createPaginationItems };
|
|
87
|
+
//# sourceMappingURL=pagination.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.utils.js","sources":["../../../../src/components/molecules/Pagination/pagination.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
|
@@ -31,7 +31,7 @@ const RadioGroupAvatarCard = ({ items, size = 'sm', indicator = 'radio', commitO
|
|
|
31
31
|
const subtitleId = item.subtitle ? `${groupId}-${testIdUtils.slugifyTestId(item.value)}-subtitle` : undefined;
|
|
32
32
|
return (
|
|
33
33
|
// The card, not the radio, carries the selected ring and the focus outline so the footer sits inside both.
|
|
34
|
-
jsxRuntime.jsxs("div", { ...optionHandlers(item.value, { isDisabled, isReadOnly }), className: cx.cx('flex flex-col rounded-xl bg-primary outline-focus-ring ring-inset has-[>label[data-focus-visible]]:outline-2 has-[>label[data-focus-visible]]:outline-offset-2', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle'), children: [jsxRuntime.jsx(reactAriaComponents.Radio, { isDisabled: item.disabled, value: item.value, "aria-label": item.title, "aria-describedby": subtitleId, "data-testid": optionTestId, className: ({ isDisabled }) => cx.cx('flex cursor-pointer items-center', size === 'md' ? 'gap-4 p-5' : 'gap-3 px-4 py-5', isDisabled && 'cursor-not-allowed'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar.Avatar, { size: size === 'md' ? 'xl' : 'lg', rounded: false, border: true, src: item.src, alt: "", initials: item.initials, placeholderIcon: item.placeholderIcon }), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [jsxRuntime.jsx("span", { className: cx.cx('truncate font-semibold text-primary', size === 'md' ? 'text-lg' : 'text-md'), children: item.title }), item.subtitle && (jsxRuntime.jsx("span", { id: subtitleId, className: cx.cx('truncate text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: item.subtitle }))] }), jsxRuntime.jsx(Indicator, { size: size, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }), item.footer && jsxRuntime.jsx("div", { className:
|
|
34
|
+
jsxRuntime.jsxs("div", { ...optionHandlers(item.value, { isDisabled, isReadOnly }), className: cx.cx('flex flex-col rounded-xl bg-primary outline-focus-ring ring-inset has-[>label[data-focus-visible]]:outline-2 has-[>label[data-focus-visible]]:outline-offset-2', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle'), children: [jsxRuntime.jsx(reactAriaComponents.Radio, { isDisabled: item.disabled, value: item.value, "aria-label": item.title, "aria-describedby": subtitleId, "data-testid": optionTestId, className: ({ isDisabled }) => cx.cx('flex cursor-pointer items-center', size === 'md' ? 'gap-4 p-5' : 'gap-3 px-4 py-5', isDisabled && 'cursor-not-allowed'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar.Avatar, { size: size === 'md' ? 'xl' : 'lg', rounded: false, border: true, src: item.src, alt: "", initials: item.initials, placeholderIcon: item.placeholderIcon }), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [jsxRuntime.jsx("span", { className: cx.cx('truncate font-semibold text-primary', size === 'md' ? 'text-lg' : 'text-md'), children: item.title }), item.subtitle && (jsxRuntime.jsx("span", { id: subtitleId, className: cx.cx('truncate text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: item.subtitle }))] }), jsxRuntime.jsx(Indicator, { size: size, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }), item.footer && (jsxRuntime.jsx("div", { className: cx.cx('flex justify-end border-t border-secondary px-4 py-3', isSelected ? 'mx-0.5' : 'mx-px'), children: item.footer }))] }, item.value));
|
|
35
35
|
}) }));
|
|
36
36
|
};
|
|
37
37
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroupAvatarCard.cjs","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","CheckboxBase","RadioButtonBase","useId","useCommitOnPress","_jsx","AriaRadioGroup","cx","joinTestId","slugifyTestId","_jsxs","AriaRadio","_Fragment","Avatar"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"RadioGroupAvatarCard.cjs","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","CheckboxBase","RadioButtonBase","useId","useCommitOnPress","_jsx","AriaRadioGroup","cx","joinTestId","slugifyTestId","_jsxs","AriaRadio","_Fragment","Avatar"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroupAvatarCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE/E,UAAU,yBAA0B,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IAC3E,uDAAuD;IACvD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iEAAiE;IACjE,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC9B,wIAAwI;IACxI,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,gKAAgK;IAChK,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChE,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,oIAYlC,yBAAyB,
|
|
1
|
+
{"version":3,"file":"RadioGroupAvatarCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE/E,UAAU,yBAA0B,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IAC3E,uDAAuD;IACvD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iEAAiE;IACjE,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC9B,wIAAwI;IACxI,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,gKAAgK;IAChK,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChE,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,oIAYlC,yBAAyB,gCA8E3B,CAAC"}
|
|
@@ -29,7 +29,7 @@ const RadioGroupAvatarCard = ({ items, size = 'sm', indicator = 'radio', commitO
|
|
|
29
29
|
const subtitleId = item.subtitle ? `${groupId}-${slugifyTestId(item.value)}-subtitle` : undefined;
|
|
30
30
|
return (
|
|
31
31
|
// The card, not the radio, carries the selected ring and the focus outline so the footer sits inside both.
|
|
32
|
-
jsxs("div", { ...optionHandlers(item.value, { isDisabled, isReadOnly }), className: cx('flex flex-col rounded-xl bg-primary outline-focus-ring ring-inset has-[>label[data-focus-visible]]:outline-2 has-[>label[data-focus-visible]]:outline-offset-2', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle'), children: [jsx(Radio, { isDisabled: item.disabled, value: item.value, "aria-label": item.title, "aria-describedby": subtitleId, "data-testid": optionTestId, className: ({ isDisabled }) => cx('flex cursor-pointer items-center', size === 'md' ? 'gap-4 p-5' : 'gap-3 px-4 py-5', isDisabled && 'cursor-not-allowed'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(Avatar, { size: size === 'md' ? 'xl' : 'lg', rounded: false, border: true, src: item.src, alt: "", initials: item.initials, placeholderIcon: item.placeholderIcon }), jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [jsx("span", { className: cx('truncate font-semibold text-primary', size === 'md' ? 'text-lg' : 'text-md'), children: item.title }), item.subtitle && (jsx("span", { id: subtitleId, className: cx('truncate text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: item.subtitle }))] }), jsx(Indicator, { size: size, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }), item.footer && jsx("div", { className:
|
|
32
|
+
jsxs("div", { ...optionHandlers(item.value, { isDisabled, isReadOnly }), className: cx('flex flex-col rounded-xl bg-primary outline-focus-ring ring-inset has-[>label[data-focus-visible]]:outline-2 has-[>label[data-focus-visible]]:outline-offset-2', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle'), children: [jsx(Radio, { isDisabled: item.disabled, value: item.value, "aria-label": item.title, "aria-describedby": subtitleId, "data-testid": optionTestId, className: ({ isDisabled }) => cx('flex cursor-pointer items-center', size === 'md' ? 'gap-4 p-5' : 'gap-3 px-4 py-5', isDisabled && 'cursor-not-allowed'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(Avatar, { size: size === 'md' ? 'xl' : 'lg', rounded: false, border: true, src: item.src, alt: "", initials: item.initials, placeholderIcon: item.placeholderIcon }), jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [jsx("span", { className: cx('truncate font-semibold text-primary', size === 'md' ? 'text-lg' : 'text-md'), children: item.title }), item.subtitle && (jsx("span", { id: subtitleId, className: cx('truncate text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: item.subtitle }))] }), jsx(Indicator, { size: size, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }), item.footer && (jsx("div", { className: cx('flex justify-end border-t border-secondary px-4 py-3', isSelected ? 'mx-0.5' : 'mx-px'), children: item.footer }))] }, item.value));
|
|
33
33
|
}) }));
|
|
34
34
|
};
|
|
35
35
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroupAvatarCard.js","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","_jsxs","AriaRadio","_Fragment"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"RadioGroupAvatarCard.js","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","_jsxs","AriaRadio","_Fragment"],"mappings":"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"}
|
|
@@ -8,7 +8,8 @@ var usePanelFocus = require('../hooks/usePanelFocus.cjs');
|
|
|
8
8
|
|
|
9
9
|
/** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
|
|
10
10
|
const SIDE_PANEL_WIDTH = 400;
|
|
11
|
-
|
|
11
|
+
// Critically damped (damping = 2 * sqrt(stiffness)): a lower damping overshoots the width by a pixel and settles back, which reads as a wobble.
|
|
12
|
+
const SPRING = { type: 'spring', damping: 30, stiffness: 220 };
|
|
12
13
|
const DOCKED = {
|
|
13
14
|
closed: { width: 0, x: 0 },
|
|
14
15
|
open: { width: SIDE_PANEL_WIDTH, x: 0 },
|
|
@@ -38,8 +39,9 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, content
|
|
|
38
39
|
return (jsxRuntime.jsx(react.motion.aside, { ref: panelRef, "aria-label": ariaLabel, "data-testid": testId,
|
|
39
40
|
// Focusable by script only, so opening can land on the region without adding a tab stop.
|
|
40
41
|
tabIndex: -1, onFocusCapture: onFocusCapture, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING,
|
|
41
|
-
// overflow-hidden clips the fixed-width content while the panel's own width animates.
|
|
42
|
-
|
|
42
|
+
// overflow-hidden clips the fixed-width content while the panel's own width animates. justify-end pins the content to the
|
|
43
|
+
// right edge, which stays put, so it never sits on the animated fractional left edge where images snap to pixels and shake.
|
|
44
|
+
className: cx.cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsxRuntime.jsx("div", { className: cx.cx('flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsxRuntime.jsx("div", { className: cx.cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
|
|
43
45
|
};
|
|
44
46
|
|
|
45
47
|
exports.SIDE_PANEL_WIDTH = SIDE_PANEL_WIDTH;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelRegion.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","usePanelFocus","useEffect","_jsx","motion","cx"],"mappings":";;;;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"SidePanelRegion.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","usePanelFocus","useEffect","_jsx","motion","cx"],"mappings":";;;;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC;AACA,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAW;AAEvE,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE;CAC/B;AAEV,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;IACpC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;CACrB;AAYV;MACa,eAAe,GAAG,CAAC,EAC9B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,kBAAkB,GACG,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAGC,kBAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAGC,sBAAgB,EAAE;AAC7C,IAAA,MAAM,EAAE,cAAc,EAAE,GAAGC,2BAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC;;AAG5G,IAAA,MAAM,eAAe,GAAGH,YAAM,CAAC,UAAU,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAC,KAAK,CAAC;AACvC,IAAA,IAAI,eAAe,CAAC,OAAO,KAAK,UAAU;AAAE,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;;AAG5E,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpEI,eAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AACvC,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;AAEnD,IAAA,QACEC,cAAA,CAACC,YAAM,CAAC,KAAK,EAAA,EACX,GAAG,EAAE,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,aAAA,EACR,MAAM;;AAEnB,QAAA,QAAQ,EAAE,EAAE,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,YAAY,CAAC,MAAM,EAC5B,OAAO,EAAE,YAAY,CAAC,IAAI,EAC1B,IAAI,EAAE,YAAY,CAAC,MAAM,EACzB,UAAU,EAAE,kBAAkB,IAAI,oBAAoB,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,MAAM;;;QAGjF,SAAS,EAAEC,KAAE,CACX,kJAAkJ,EAClJ,CAAC,SAAS,IAAI,iCAAiC,EAC/C,SAAS,CACV,YAGDF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,KAAE,CAAC,+BAA+B,EAAE,SAAS,GAAG,iCAAiC,GAAG,QAAQ,CAAC,EAAA,QAAA,EAE3GF,cAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAEE,KAAE,CAAC,8BAA8B,EAAE,iBAAiB,CAAC,OAAO,IAAI,4DAA4D,CAAC,EAAA,QAAA,EAEvI,QAAQ,EAAA,EAHJ,UAAU,CAIX,EAAA,CACF,EAAA,CACO;AAEnB;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelRegion.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,4GAA4G;AAC5G,eAAO,MAAM,gBAAgB,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"SidePanelRegion.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,4GAA4G;AAC5G,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAepC,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,2GAA2G;AAC3G,eAAO,MAAM,eAAe,GAAI,sGAQ7B,oBAAoB,gCAoDtB,CAAC"}
|
|
@@ -6,7 +6,8 @@ import { usePanelFocus } from '../hooks/usePanelFocus.js';
|
|
|
6
6
|
|
|
7
7
|
/** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
|
|
8
8
|
const SIDE_PANEL_WIDTH = 400;
|
|
9
|
-
|
|
9
|
+
// Critically damped (damping = 2 * sqrt(stiffness)): a lower damping overshoots the width by a pixel and settles back, which reads as a wobble.
|
|
10
|
+
const SPRING = { type: 'spring', damping: 30, stiffness: 220 };
|
|
10
11
|
const DOCKED = {
|
|
11
12
|
closed: { width: 0, x: 0 },
|
|
12
13
|
open: { width: SIDE_PANEL_WIDTH, x: 0 },
|
|
@@ -36,8 +37,9 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, content
|
|
|
36
37
|
return (jsx(motion.aside, { ref: panelRef, "aria-label": ariaLabel, "data-testid": testId,
|
|
37
38
|
// Focusable by script only, so opening can land on the region without adding a tab stop.
|
|
38
39
|
tabIndex: -1, onFocusCapture: onFocusCapture, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING,
|
|
39
|
-
// overflow-hidden clips the fixed-width content while the panel's own width animates.
|
|
40
|
-
|
|
40
|
+
// overflow-hidden clips the fixed-width content while the panel's own width animates. justify-end pins the content to the
|
|
41
|
+
// right edge, which stays put, so it never sits on the animated fractional left edge where images snap to pixels and shake.
|
|
42
|
+
className: cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsx("div", { className: cx('flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsx("div", { className: cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
|
|
41
43
|
};
|
|
42
44
|
|
|
43
45
|
export { SIDE_PANEL_WIDTH, SidePanelRegion };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelRegion.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"SidePanelRegion.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC;AACA,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAW;AAEvE,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE;CAC/B;AAEV,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;IACpC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;CACrB;AAYV;MACa,eAAe,GAAG,CAAC,EAC9B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,kBAAkB,GACG,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAG,gBAAgB,EAAE;AAC7C,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC;;AAG5G,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC;AACvC,IAAA,IAAI,eAAe,CAAC,OAAO,KAAK,UAAU;AAAE,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;;AAG5E,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpE,SAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AACvC,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;AAEnD,IAAA,QACEA,GAAA,CAAC,MAAM,CAAC,KAAK,EAAA,EACX,GAAG,EAAE,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,aAAA,EACR,MAAM;;AAEnB,QAAA,QAAQ,EAAE,EAAE,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,YAAY,CAAC,MAAM,EAC5B,OAAO,EAAE,YAAY,CAAC,IAAI,EAC1B,IAAI,EAAE,YAAY,CAAC,MAAM,EACzB,UAAU,EAAE,kBAAkB,IAAI,oBAAoB,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,MAAM;;;QAGjF,SAAS,EAAE,EAAE,CACX,kJAAkJ,EAClJ,CAAC,SAAS,IAAI,iCAAiC,EAC/C,SAAS,CACV,YAGDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,GAAG,iCAAiC,GAAG,QAAQ,CAAC,EAAA,QAAA,EAE3GA,GAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,iBAAiB,CAAC,OAAO,IAAI,4DAA4D,CAAC,EAAA,QAAA,EAEvI,QAAQ,EAAA,EAHJ,UAAU,CAIX,EAAA,CACF,EAAA,CACO;AAEnB;;"}
|