@arbor-education/design-system.components 0.21.1 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/component-library.md +77 -14
- package/dist/components/articleCard/ArticleCard.d.ts +2 -2
- package/dist/components/articleCard/ArticleCard.d.ts.map +1 -1
- package/dist/components/articleCard/ArticleCard.js +3 -3
- package/dist/components/articleCard/ArticleCard.js.map +1 -1
- package/dist/components/articleCard/ArticleCard.stories.d.ts +11 -3
- package/dist/components/articleCard/ArticleCard.stories.d.ts.map +1 -1
- package/dist/components/articleCard/ArticleCard.stories.js +16 -11
- package/dist/components/articleCard/ArticleCard.stories.js.map +1 -1
- package/dist/components/combobox/Combobox.js +1 -1
- package/dist/components/combobox/Combobox.js.map +1 -1
- package/dist/components/combobox/Combobox.stories.d.ts +4 -0
- package/dist/components/combobox/Combobox.stories.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.stories.js +144 -12
- package/dist/components/combobox/Combobox.stories.js.map +1 -1
- package/dist/components/combobox/Combobox.test.js +22 -0
- package/dist/components/combobox/Combobox.test.js.map +1 -1
- package/dist/components/combobox/ComboboxButtonTrigger.d.ts +4 -4
- package/dist/components/combobox/ComboboxButtonTrigger.d.ts.map +1 -1
- package/dist/components/combobox/ComboboxButtonTrigger.js +35 -40
- package/dist/components/combobox/ComboboxButtonTrigger.js.map +1 -1
- package/dist/components/combobox/ComboboxTrigger.d.ts.map +1 -1
- package/dist/components/combobox/ComboboxTrigger.js +11 -4
- package/dist/components/combobox/ComboboxTrigger.js.map +1 -1
- package/dist/components/combobox/useVisibleTriggerTags.d.ts +21 -0
- package/dist/components/combobox/useVisibleTriggerTags.d.ts.map +1 -0
- package/dist/components/combobox/useVisibleTriggerTags.js +46 -0
- package/dist/components/combobox/useVisibleTriggerTags.js.map +1 -0
- package/dist/components/combobox/useVisibleTriggerTags.test.d.ts +2 -0
- package/dist/components/combobox/useVisibleTriggerTags.test.d.ts.map +1 -0
- package/dist/components/combobox/useVisibleTriggerTags.test.js +81 -0
- package/dist/components/combobox/useVisibleTriggerTags.test.js.map +1 -0
- package/dist/components/filterBar/FilterBar.d.ts +71 -0
- package/dist/components/filterBar/FilterBar.d.ts.map +1 -0
- package/dist/components/filterBar/FilterBar.js +89 -0
- package/dist/components/filterBar/FilterBar.js.map +1 -0
- package/dist/components/filterBar/FilterBar.stories.d.ts +170 -0
- package/dist/components/filterBar/FilterBar.stories.d.ts.map +1 -0
- package/dist/components/filterBar/FilterBar.stories.js +894 -0
- package/dist/components/filterBar/FilterBar.stories.js.map +1 -0
- package/dist/components/filterBar/FilterBar.test.d.ts +2 -0
- package/dist/components/filterBar/FilterBar.test.d.ts.map +1 -0
- package/dist/components/filterBar/FilterBar.test.js +164 -0
- package/dist/components/filterBar/FilterBar.test.js.map +1 -0
- package/dist/components/icon/allowedIcons.d.ts +1 -0
- package/dist/components/icon/allowedIcons.d.ts.map +1 -1
- package/dist/components/icon/allowedIcons.js +2 -1
- package/dist/components/icon/allowedIcons.js.map +1 -1
- package/dist/components/iconText/IconText.d.ts +43 -0
- package/dist/components/iconText/IconText.d.ts.map +1 -0
- package/dist/components/iconText/IconText.js +29 -0
- package/dist/components/iconText/IconText.js.map +1 -0
- package/dist/components/{icoText/IcoText.stories.d.ts → iconText/IconText.stories.d.ts} +8 -9
- package/dist/components/iconText/IconText.stories.d.ts.map +1 -0
- package/dist/components/{icoText/IcoText.stories.js → iconText/IconText.stories.js} +81 -81
- package/dist/components/iconText/IconText.stories.js.map +1 -0
- package/dist/components/iconText/IconText.test.d.ts +2 -0
- package/dist/components/iconText/IconText.test.d.ts.map +1 -0
- package/dist/components/{icoText/IcoText.test.js → iconText/IconText.test.js} +6 -6
- package/dist/components/iconText/IconText.test.js.map +1 -0
- package/dist/components/modal/Modal.d.ts +1 -0
- package/dist/components/modal/Modal.d.ts.map +1 -1
- package/dist/components/modal/Modal.js +2 -2
- package/dist/components/modal/Modal.js.map +1 -1
- package/dist/components/table/cellRenderers/ComboboxCellRenderer.test.d.ts.map +1 -1
- package/dist/components/table/cellRenderers/ComboboxCellRenderer.test.js +13 -2
- package/dist/components/table/cellRenderers/ComboboxCellRenderer.test.js.map +1 -1
- package/dist/components/tag/Tag.d.ts +14 -1
- package/dist/components/tag/Tag.d.ts.map +1 -1
- package/dist/components/tag/Tag.js +9 -3
- package/dist/components/tag/Tag.js.map +1 -1
- package/dist/components/tag/Tag.stories.d.ts +1 -1
- package/dist/components/tag/Tag.stories.d.ts.map +1 -1
- package/dist/components/tag/Tag.stories.js +3 -3
- package/dist/components/tag/Tag.stories.js.map +1 -1
- package/dist/components/tag/Tag.test.js +36 -5
- package/dist/components/tag/Tag.test.js.map +1 -1
- package/dist/components/tagList/TagList.d.ts +49 -0
- package/dist/components/tagList/TagList.d.ts.map +1 -0
- package/dist/components/tagList/TagList.js +114 -0
- package/dist/components/tagList/TagList.js.map +1 -0
- package/dist/components/tagList/TagList.stories.d.ts +130 -0
- package/dist/components/tagList/TagList.stories.d.ts.map +1 -0
- package/dist/components/tagList/TagList.stories.js +443 -0
- package/dist/components/tagList/TagList.stories.js.map +1 -0
- package/dist/components/{icoText/IcoText.test.d.ts → tagList/TagList.test.d.ts} +1 -1
- package/dist/components/tagList/TagList.test.d.ts.map +1 -0
- package/dist/components/tagList/TagList.test.js +246 -0
- package/dist/components/tagList/TagList.test.js.map +1 -0
- package/dist/components/tagList/useTagListCollapsedLayout.d.ts +19 -0
- package/dist/components/tagList/useTagListCollapsedLayout.d.ts.map +1 -0
- package/dist/components/tagList/useTagListCollapsedLayout.js +48 -0
- package/dist/components/tagList/useTagListCollapsedLayout.js.map +1 -0
- package/dist/components/tagList/useVisibleTags.d.ts +18 -0
- package/dist/components/tagList/useVisibleTags.d.ts.map +1 -0
- package/dist/components/tagList/useVisibleTags.js +41 -0
- package/dist/components/tagList/useVisibleTags.js.map +1 -0
- package/dist/index.css +272 -13
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/utils/hooks/useElementWidth.d.ts.map +1 -0
- package/dist/{components/combobox → utils/hooks}/useElementWidth.js +0 -1
- package/dist/utils/hooks/useElementWidth.js.map +1 -0
- package/dist/utils/hooks/useMeasuredChildWidths.d.ts +8 -0
- package/dist/utils/hooks/useMeasuredChildWidths.d.ts.map +1 -0
- package/dist/utils/hooks/useMeasuredChildWidths.js +26 -0
- package/dist/utils/hooks/useMeasuredChildWidths.js.map +1 -0
- package/dist/utils/hooks/useRovingFocus.d.ts +18 -0
- package/dist/utils/hooks/useRovingFocus.d.ts.map +1 -0
- package/dist/utils/hooks/useRovingFocus.js +130 -0
- package/dist/utils/hooks/useRovingFocus.js.map +1 -0
- package/dist/utils/hooks/useRovingFocus.test.d.ts +2 -0
- package/dist/utils/hooks/useRovingFocus.test.d.ts.map +1 -0
- package/dist/utils/hooks/useRovingFocus.test.js +59 -0
- package/dist/utils/hooks/useRovingFocus.test.js.map +1 -0
- package/dist/utils/spacedWidths.d.ts +3 -0
- package/dist/utils/spacedWidths.d.ts.map +1 -0
- package/dist/utils/spacedWidths.js +28 -0
- package/dist/utils/spacedWidths.js.map +1 -0
- package/dist/utils/spacedWidths.test.d.ts +2 -0
- package/dist/utils/spacedWidths.test.d.ts.map +1 -0
- package/dist/utils/spacedWidths.test.js +17 -0
- package/dist/utils/spacedWidths.test.js.map +1 -0
- package/package.json +1 -1
- package/src/components/articleCard/ArticleCard.stories.tsx +17 -12
- package/src/components/articleCard/ArticleCard.tsx +9 -9
- package/src/components/combobox/Combobox.stories.tsx +186 -12
- package/src/components/combobox/Combobox.test.tsx +53 -0
- package/src/components/combobox/Combobox.tsx +3 -3
- package/src/components/combobox/ComboboxButtonTrigger.tsx +52 -56
- package/src/components/combobox/ComboboxTrigger.tsx +19 -16
- package/src/components/combobox/combobox.scss +8 -3
- package/src/components/combobox/useVisibleTriggerTags.test.tsx +91 -0
- package/src/components/combobox/useVisibleTriggerTags.ts +83 -0
- package/src/components/filterBar/FilterBar.stories.tsx +1199 -0
- package/src/components/filterBar/FilterBar.test.tsx +248 -0
- package/src/components/filterBar/FilterBar.tsx +298 -0
- package/src/components/filterBar/filterBar.scss +143 -0
- package/src/components/icon/allowedIcons.tsx +3 -1
- package/src/components/{icoText/IcoText.stories.tsx → iconText/IconText.stories.tsx} +112 -112
- package/src/components/{icoText/IcoText.test.tsx → iconText/IconText.test.tsx} +10 -10
- package/src/components/{icoText/IcoText.tsx → iconText/IconText.tsx} +27 -20
- package/src/components/modal/Modal.tsx +5 -1
- package/src/components/table/cellRenderers/ComboboxCellRenderer.test.tsx +20 -3
- package/src/components/tag/Tag.stories.tsx +4 -4
- package/src/components/tag/Tag.test.tsx +62 -5
- package/src/components/tag/Tag.tsx +61 -3
- package/src/components/tag/tag.scss +80 -9
- package/src/components/tagList/TagList.stories.tsx +564 -0
- package/src/components/tagList/TagList.test.tsx +342 -0
- package/src/components/tagList/TagList.tsx +296 -0
- package/src/components/tagList/tagList.scss +56 -0
- package/src/components/tagList/useTagListCollapsedLayout.ts +83 -0
- package/src/components/tagList/useVisibleTags.ts +74 -0
- package/src/index.scss +3 -1
- package/src/index.ts +13 -1
- package/src/tokens.scss +3 -1
- package/src/{components/combobox → utils/hooks}/useElementWidth.ts +0 -1
- package/src/utils/hooks/useMeasuredChildWidths.ts +39 -0
- package/src/utils/hooks/useRovingFocus.test.tsx +105 -0
- package/src/utils/hooks/useRovingFocus.ts +163 -0
- package/src/utils/spacedWidths.test.ts +20 -0
- package/src/utils/spacedWidths.ts +37 -0
- package/dist/components/combobox/useElementWidth.d.ts.map +0 -1
- package/dist/components/combobox/useElementWidth.js.map +0 -1
- package/dist/components/combobox/useVisibleChips.d.ts +0 -21
- package/dist/components/combobox/useVisibleChips.d.ts.map +0 -1
- package/dist/components/combobox/useVisibleChips.js +0 -59
- package/dist/components/combobox/useVisibleChips.js.map +0 -1
- package/dist/components/combobox/useVisibleChips.test.d.ts +0 -2
- package/dist/components/combobox/useVisibleChips.test.d.ts.map +0 -1
- package/dist/components/combobox/useVisibleChips.test.js +0 -81
- package/dist/components/combobox/useVisibleChips.test.js.map +0 -1
- package/dist/components/icoText/IcoText.d.ts +0 -37
- package/dist/components/icoText/IcoText.d.ts.map +0 -1
- package/dist/components/icoText/IcoText.js +0 -29
- package/dist/components/icoText/IcoText.js.map +0 -1
- package/dist/components/icoText/IcoText.stories.d.ts.map +0 -1
- package/dist/components/icoText/IcoText.stories.js.map +0 -1
- package/dist/components/icoText/IcoText.test.d.ts.map +0 -1
- package/dist/components/icoText/IcoText.test.js.map +0 -1
- package/src/components/combobox/useVisibleChips.test.tsx +0 -91
- package/src/components/combobox/useVisibleChips.ts +0 -100
- /package/dist/{components/combobox → utils/hooks}/useElementWidth.d.ts +0 -0
- /package/src/components/{icoText/icoText.scss → iconText/iconText.scss} +0 -0
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
const fitCount = (availableWidth, chipWidths, chipGap) => {
|
|
3
|
-
if (availableWidth <= 0 || chipWidths.length === 0)
|
|
4
|
-
return 0;
|
|
5
|
-
let used = 0;
|
|
6
|
-
let count = 0;
|
|
7
|
-
for (let i = 0; i < chipWidths.length; i += 1) {
|
|
8
|
-
const required = chipWidths[i] + (i > 0 ? chipGap : 0);
|
|
9
|
-
if (used + required > availableWidth)
|
|
10
|
-
break;
|
|
11
|
-
used += required;
|
|
12
|
-
count += 1;
|
|
13
|
-
}
|
|
14
|
-
return count;
|
|
15
|
-
};
|
|
16
|
-
export const computeTriggerLayoutModel = ({ containerWidth, chipWidths, chipGap, badgeWidth, ellipsisWidth, showBadge, safetyBuffer = 1, }) => {
|
|
17
|
-
const selectedCount = chipWidths.length;
|
|
18
|
-
const shouldShowBadge = showBadge && selectedCount > 0;
|
|
19
|
-
if (selectedCount === 0 || containerWidth <= 0) {
|
|
20
|
-
return {
|
|
21
|
-
visibleChipIndices: [],
|
|
22
|
-
hiddenChipCount: 0,
|
|
23
|
-
showBadge: shouldShowBadge,
|
|
24
|
-
showEllipsis: false,
|
|
25
|
-
hasOverflow: false,
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
const badgeReserve = shouldShowBadge
|
|
29
|
-
? badgeWidth + chipGap
|
|
30
|
-
: 0;
|
|
31
|
-
const availableWithoutEllipsis = Math.max(0, containerWidth - badgeReserve - safetyBuffer);
|
|
32
|
-
const countWithoutEllipsis = fitCount(availableWithoutEllipsis, chipWidths, chipGap);
|
|
33
|
-
const hasOverflow = countWithoutEllipsis < selectedCount;
|
|
34
|
-
const ellipsisReserve = hasOverflow
|
|
35
|
-
? ellipsisWidth + chipGap
|
|
36
|
-
: 0;
|
|
37
|
-
const availableForChips = Math.max(0, containerWidth - badgeReserve - ellipsisReserve - safetyBuffer);
|
|
38
|
-
const visibleCount = fitCount(availableForChips, chipWidths, chipGap);
|
|
39
|
-
return {
|
|
40
|
-
visibleChipIndices: Array.from({ length: visibleCount }, (_, index) => index),
|
|
41
|
-
hiddenChipCount: Math.max(0, selectedCount - visibleCount),
|
|
42
|
-
showBadge: shouldShowBadge,
|
|
43
|
-
showEllipsis: visibleCount < selectedCount,
|
|
44
|
-
hasOverflow: visibleCount < selectedCount,
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
export const useVisibleChips = (params) =>
|
|
48
|
-
// Deps list each field instead of `[params]`: callers often pass a new `params` object every
|
|
49
|
-
// render; depending on object identity would rerun the layout every time even when values are unchanged.
|
|
50
|
-
useMemo(() => computeTriggerLayoutModel(params), [
|
|
51
|
-
params.badgeWidth,
|
|
52
|
-
params.chipGap,
|
|
53
|
-
params.chipWidths,
|
|
54
|
-
params.containerWidth,
|
|
55
|
-
params.ellipsisWidth,
|
|
56
|
-
params.safetyBuffer,
|
|
57
|
-
params.showBadge,
|
|
58
|
-
]);
|
|
59
|
-
//# sourceMappingURL=useVisibleChips.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useVisibleChips.js","sourceRoot":"","sources":["../../../src/components/combobox/useVisibleChips.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useVisibleChips.test.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/useVisibleChips.test.tsx"],"names":[],"mappings":""}
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import { describe, expect, test } from 'vitest';
|
|
2
|
-
import { computeTriggerLayoutModel } from './useVisibleChips.js';
|
|
3
|
-
describe('computeTriggerLayoutModel', () => {
|
|
4
|
-
test('shows all chips and no ellipsis when there is no overflow', () => {
|
|
5
|
-
const result = computeTriggerLayoutModel({
|
|
6
|
-
containerWidth: 300,
|
|
7
|
-
chipWidths: [70, 80, 60],
|
|
8
|
-
chipGap: 4,
|
|
9
|
-
badgeWidth: 24,
|
|
10
|
-
ellipsisWidth: 12,
|
|
11
|
-
showBadge: true,
|
|
12
|
-
});
|
|
13
|
-
expect(result).toEqual({
|
|
14
|
-
visibleChipIndices: [0, 1, 2],
|
|
15
|
-
hiddenChipCount: 0,
|
|
16
|
-
showBadge: true,
|
|
17
|
-
showEllipsis: false,
|
|
18
|
-
hasOverflow: false,
|
|
19
|
-
});
|
|
20
|
-
});
|
|
21
|
-
test('reserves badge and ellipsis before fitting chips when overflow exists', () => {
|
|
22
|
-
const result = computeTriggerLayoutModel({
|
|
23
|
-
containerWidth: 160,
|
|
24
|
-
chipWidths: [60, 60, 60],
|
|
25
|
-
chipGap: 4,
|
|
26
|
-
badgeWidth: 24,
|
|
27
|
-
ellipsisWidth: 12,
|
|
28
|
-
showBadge: true,
|
|
29
|
-
});
|
|
30
|
-
expect(result.visibleChipIndices).toEqual([0]);
|
|
31
|
-
expect(result.hiddenChipCount).toBe(2);
|
|
32
|
-
expect(result.showEllipsis).toBe(true);
|
|
33
|
-
expect(result.hasOverflow).toBe(true);
|
|
34
|
-
});
|
|
35
|
-
test('allows zero chips when badge and ellipsis take priority in tiny space', () => {
|
|
36
|
-
const result = computeTriggerLayoutModel({
|
|
37
|
-
containerWidth: 36,
|
|
38
|
-
chipWidths: [80, 80],
|
|
39
|
-
chipGap: 4,
|
|
40
|
-
badgeWidth: 24,
|
|
41
|
-
ellipsisWidth: 12,
|
|
42
|
-
showBadge: true,
|
|
43
|
-
});
|
|
44
|
-
expect(result.visibleChipIndices).toEqual([]);
|
|
45
|
-
expect(result.hiddenChipCount).toBe(2);
|
|
46
|
-
expect(result.showEllipsis).toBe(true);
|
|
47
|
-
});
|
|
48
|
-
test('reserving badge space reduces visible count', () => {
|
|
49
|
-
const withBadge = computeTriggerLayoutModel({
|
|
50
|
-
containerWidth: 180,
|
|
51
|
-
chipWidths: [60, 60, 60],
|
|
52
|
-
chipGap: 4,
|
|
53
|
-
badgeWidth: 24,
|
|
54
|
-
ellipsisWidth: 12,
|
|
55
|
-
showBadge: true,
|
|
56
|
-
});
|
|
57
|
-
const withoutBadge = computeTriggerLayoutModel({
|
|
58
|
-
containerWidth: 180,
|
|
59
|
-
chipWidths: [60, 60, 60],
|
|
60
|
-
chipGap: 4,
|
|
61
|
-
badgeWidth: 24,
|
|
62
|
-
ellipsisWidth: 12,
|
|
63
|
-
showBadge: false,
|
|
64
|
-
});
|
|
65
|
-
expect(withoutBadge.visibleChipIndices.length).toBeGreaterThanOrEqual(withBadge.visibleChipIndices.length);
|
|
66
|
-
});
|
|
67
|
-
test('uses safety buffer to avoid a clipped final chip on boundary widths', () => {
|
|
68
|
-
const result = computeTriggerLayoutModel({
|
|
69
|
-
containerWidth: 195.5,
|
|
70
|
-
chipWidths: [73.4, 73.4, 20],
|
|
71
|
-
chipGap: 4,
|
|
72
|
-
badgeWidth: 24.2,
|
|
73
|
-
ellipsisWidth: 11.6,
|
|
74
|
-
showBadge: true,
|
|
75
|
-
safetyBuffer: 1,
|
|
76
|
-
});
|
|
77
|
-
expect(result.visibleChipIndices).toEqual([0]);
|
|
78
|
-
expect(result.showEllipsis).toBe(true);
|
|
79
|
-
});
|
|
80
|
-
});
|
|
81
|
-
//# sourceMappingURL=useVisibleChips.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useVisibleChips.test.js","sourceRoot":"","sources":["../../../src/components/combobox/useVisibleChips.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import type { IconName } from '../icon/allowedIcons.js';
|
|
2
|
-
import { Icon } from '../icon/Icon.js';
|
|
3
|
-
export type IcoTextProps = {
|
|
4
|
-
children?: React.ReactNode;
|
|
5
|
-
className?: string;
|
|
6
|
-
};
|
|
7
|
-
export type IcoTextHeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
};
|
|
10
|
-
export type IcoTextParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
|
|
11
|
-
children: React.ReactNode;
|
|
12
|
-
};
|
|
13
|
-
export type IcoTextIconProps = {
|
|
14
|
-
className?: string;
|
|
15
|
-
color?: Icon.Props['color'];
|
|
16
|
-
name: IconName;
|
|
17
|
-
screenReaderText?: string;
|
|
18
|
-
size?: 12 | 16 | 24;
|
|
19
|
-
};
|
|
20
|
-
export declare const IcoText: {
|
|
21
|
-
({ children, className }: IcoTextProps): React.JSX.Element;
|
|
22
|
-
displayName: string;
|
|
23
|
-
} & {
|
|
24
|
-
Heading: {
|
|
25
|
-
({ children, className, ...rest }: IcoTextHeadingProps): React.JSX.Element;
|
|
26
|
-
displayName: string;
|
|
27
|
-
};
|
|
28
|
-
Paragraph: {
|
|
29
|
-
({ children, className, ...rest }: IcoTextParagraphProps): React.JSX.Element;
|
|
30
|
-
displayName: string;
|
|
31
|
-
};
|
|
32
|
-
Icon: {
|
|
33
|
-
({ className, color, name, screenReaderText, size, }: IcoTextIconProps): React.JSX.Element;
|
|
34
|
-
displayName: string;
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
//# sourceMappingURL=IcoText.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IcoText.d.ts","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG5C,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CACrB,CAAC;AAgEF,eAAO,MAAM,OAAO;8BA1B0B,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;2CAhC3E,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;2CAUvC,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;8DAYzC,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;CAwCrC,CAAC"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import classNames from 'classnames';
|
|
3
|
-
import { Icon } from '../icon/Icon.js';
|
|
4
|
-
import { Children, isValidElement } from 'react';
|
|
5
|
-
const IcoTextHeading = ({ children, className, ...rest }) => (_jsx("h4", { className: classNames('ds-ico-text__heading', className), ...rest, children: children }));
|
|
6
|
-
const IcoTextParagraph = ({ children, className, ...rest }) => (_jsx("p", { className: classNames('ds-ico-text__paragraph', className), ...rest, children: children }));
|
|
7
|
-
const IcoTextIcon = ({ className, color, name, screenReaderText, size = 24, }) => (_jsx(Icon, { name: name, className: classNames('ds-ico-text__icon', className), color: color, screenReaderText: screenReaderText, size: size }));
|
|
8
|
-
const IcoTextRoot = ({ children, className }) => {
|
|
9
|
-
const iconChildren = [];
|
|
10
|
-
const contentChildren = [];
|
|
11
|
-
Children.forEach(children, (child) => {
|
|
12
|
-
if (isValidElement(child) && child.type === IcoTextIcon) {
|
|
13
|
-
iconChildren.push(child);
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
contentChildren.push(child);
|
|
17
|
-
});
|
|
18
|
-
return (_jsxs("div", { className: classNames('ds-ico-text', className), children: [iconChildren, _jsx("div", { className: "ds-ico-text__content", children: contentChildren })] }));
|
|
19
|
-
};
|
|
20
|
-
IcoTextHeading.displayName = 'IcoText.Heading';
|
|
21
|
-
IcoTextParagraph.displayName = 'IcoText.Paragraph';
|
|
22
|
-
IcoTextIcon.displayName = 'IcoText.Icon';
|
|
23
|
-
IcoTextRoot.displayName = 'IcoText';
|
|
24
|
-
export const IcoText = Object.assign(IcoTextRoot, {
|
|
25
|
-
Heading: IcoTextHeading,
|
|
26
|
-
Paragraph: IcoTextParagraph,
|
|
27
|
-
Icon: IcoTextIcon,
|
|
28
|
-
});
|
|
29
|
-
//# sourceMappingURL=IcoText.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IcoText.js","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAuBjD,MAAM,cAAc,GAAG,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACa,EAAqB,EAAE,CAAC,CAC5C,aAAI,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,KAAM,IAAI,YACnE,QAAQ,GACN,CACN,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACe,EAAqB,EAAE,CAAC,CAC9C,YAAG,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAAM,IAAI,YACpE,QAAQ,GACP,CACL,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,gBAAgB,EAChB,IAAI,GAAG,EAAE,GACQ,EAAqB,EAAE,CAAC,CACzC,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,EACrD,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAgB,EAAqB,EAAE;IAC/E,MAAM,YAAY,GAAsB,EAAE,CAAC;IAC3C,MAAM,eAAe,GAAsB,EAAE,CAAC;IAE9C,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnC,IAAI,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YACxD,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzB,OAAO;QACT,CAAC;QAED,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,aACjD,YAAY,EACb,cAAK,SAAS,EAAC,sBAAsB,YAAE,eAAe,GAAO,IACzD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAC/C,gBAAgB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AACnD,WAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AACzC,WAAW,CAAC,WAAW,GAAG,SAAS,CAAC;AAEpC,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;IAChD,OAAO,EAAE,cAAc;IACvB,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,WAAW;CAClB,CAAC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IcoText.stories.d.ts","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AA2GvC,iBAAS,eAAe,4CAyBvB;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAsEtC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAqCtC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAuCvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2BxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA4BhC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IcoText.stories.js","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IcoText.test.d.ts","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.test.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IcoText.test.js","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,IAAI,CAAC,wFAAwF,EAAE,GAAG,EAAE;QAClG,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,OAAO,gCAAgC,EAChD,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,EAAC,OAAO,GAAG,EACpD,KAAC,OAAO,CAAC,SAAS,0CAA4C,EAC9D,sCAAqB,EACrB,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,EAAC,YAAY,GAAG,IACjD,CACX,CAAC;QAEF,MAAM,IAAI,GAAG,SAAS,CAAC,aAAa,CAAiB,cAAc,CAAC,CAAC;QACrE,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAiB,uBAAuB,CAAC,CAAC;QAEjF,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;QAC/D,CAAC;QAED,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC,6BAA6B,CAAC,IAAI,EAAE,CAAC,CAAC;QAE7F,MAAM,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACrC,MAAM,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACvE,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;YACnC,MAAM,CACJ,WAAW,CAAC,uBAAuB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,2BAA2B,CAChF,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAChB,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;QAC9F,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjF,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAClE,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { describe, expect, test } from 'vitest';
|
|
2
|
-
import { computeTriggerLayoutModel } from './useVisibleChips.js';
|
|
3
|
-
|
|
4
|
-
describe('computeTriggerLayoutModel', () => {
|
|
5
|
-
test('shows all chips and no ellipsis when there is no overflow', () => {
|
|
6
|
-
const result = computeTriggerLayoutModel({
|
|
7
|
-
containerWidth: 300,
|
|
8
|
-
chipWidths: [70, 80, 60],
|
|
9
|
-
chipGap: 4,
|
|
10
|
-
badgeWidth: 24,
|
|
11
|
-
ellipsisWidth: 12,
|
|
12
|
-
showBadge: true,
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
expect(result).toEqual({
|
|
16
|
-
visibleChipIndices: [0, 1, 2],
|
|
17
|
-
hiddenChipCount: 0,
|
|
18
|
-
showBadge: true,
|
|
19
|
-
showEllipsis: false,
|
|
20
|
-
hasOverflow: false,
|
|
21
|
-
});
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
test('reserves badge and ellipsis before fitting chips when overflow exists', () => {
|
|
25
|
-
const result = computeTriggerLayoutModel({
|
|
26
|
-
containerWidth: 160,
|
|
27
|
-
chipWidths: [60, 60, 60],
|
|
28
|
-
chipGap: 4,
|
|
29
|
-
badgeWidth: 24,
|
|
30
|
-
ellipsisWidth: 12,
|
|
31
|
-
showBadge: true,
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
expect(result.visibleChipIndices).toEqual([0]);
|
|
35
|
-
expect(result.hiddenChipCount).toBe(2);
|
|
36
|
-
expect(result.showEllipsis).toBe(true);
|
|
37
|
-
expect(result.hasOverflow).toBe(true);
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
test('allows zero chips when badge and ellipsis take priority in tiny space', () => {
|
|
41
|
-
const result = computeTriggerLayoutModel({
|
|
42
|
-
containerWidth: 36,
|
|
43
|
-
chipWidths: [80, 80],
|
|
44
|
-
chipGap: 4,
|
|
45
|
-
badgeWidth: 24,
|
|
46
|
-
ellipsisWidth: 12,
|
|
47
|
-
showBadge: true,
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
expect(result.visibleChipIndices).toEqual([]);
|
|
51
|
-
expect(result.hiddenChipCount).toBe(2);
|
|
52
|
-
expect(result.showEllipsis).toBe(true);
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
test('reserving badge space reduces visible count', () => {
|
|
56
|
-
const withBadge = computeTriggerLayoutModel({
|
|
57
|
-
containerWidth: 180,
|
|
58
|
-
chipWidths: [60, 60, 60],
|
|
59
|
-
chipGap: 4,
|
|
60
|
-
badgeWidth: 24,
|
|
61
|
-
ellipsisWidth: 12,
|
|
62
|
-
showBadge: true,
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
const withoutBadge = computeTriggerLayoutModel({
|
|
66
|
-
containerWidth: 180,
|
|
67
|
-
chipWidths: [60, 60, 60],
|
|
68
|
-
chipGap: 4,
|
|
69
|
-
badgeWidth: 24,
|
|
70
|
-
ellipsisWidth: 12,
|
|
71
|
-
showBadge: false,
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
expect(withoutBadge.visibleChipIndices.length).toBeGreaterThanOrEqual(withBadge.visibleChipIndices.length);
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
test('uses safety buffer to avoid a clipped final chip on boundary widths', () => {
|
|
78
|
-
const result = computeTriggerLayoutModel({
|
|
79
|
-
containerWidth: 195.5,
|
|
80
|
-
chipWidths: [73.4, 73.4, 20],
|
|
81
|
-
chipGap: 4,
|
|
82
|
-
badgeWidth: 24.2,
|
|
83
|
-
ellipsisWidth: 11.6,
|
|
84
|
-
showBadge: true,
|
|
85
|
-
safetyBuffer: 1,
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
expect(result.visibleChipIndices).toEqual([0]);
|
|
89
|
-
expect(result.showEllipsis).toBe(true);
|
|
90
|
-
});
|
|
91
|
-
});
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
|
|
3
|
-
type ComputeTriggerLayoutModelParams = {
|
|
4
|
-
containerWidth: number;
|
|
5
|
-
chipWidths: number[];
|
|
6
|
-
chipGap: number;
|
|
7
|
-
badgeWidth: number;
|
|
8
|
-
ellipsisWidth: number;
|
|
9
|
-
showBadge: boolean;
|
|
10
|
-
safetyBuffer?: number;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export type TriggerLayoutModel = {
|
|
14
|
-
visibleChipIndices: number[];
|
|
15
|
-
hiddenChipCount: number;
|
|
16
|
-
showBadge: boolean;
|
|
17
|
-
showEllipsis: boolean;
|
|
18
|
-
hasOverflow: boolean;
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
const fitCount = (
|
|
22
|
-
availableWidth: number,
|
|
23
|
-
chipWidths: number[],
|
|
24
|
-
chipGap: number,
|
|
25
|
-
): number => {
|
|
26
|
-
if (availableWidth <= 0 || chipWidths.length === 0) return 0;
|
|
27
|
-
|
|
28
|
-
let used = 0;
|
|
29
|
-
let count = 0;
|
|
30
|
-
for (let i = 0; i < chipWidths.length; i += 1) {
|
|
31
|
-
const required = chipWidths[i]! + (i > 0 ? chipGap : 0);
|
|
32
|
-
if (used + required > availableWidth) break;
|
|
33
|
-
used += required;
|
|
34
|
-
count += 1;
|
|
35
|
-
}
|
|
36
|
-
return count;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export const computeTriggerLayoutModel = ({
|
|
40
|
-
containerWidth,
|
|
41
|
-
chipWidths,
|
|
42
|
-
chipGap,
|
|
43
|
-
badgeWidth,
|
|
44
|
-
ellipsisWidth,
|
|
45
|
-
showBadge,
|
|
46
|
-
safetyBuffer = 1,
|
|
47
|
-
}: ComputeTriggerLayoutModelParams): TriggerLayoutModel => {
|
|
48
|
-
const selectedCount = chipWidths.length;
|
|
49
|
-
const shouldShowBadge = showBadge && selectedCount > 0;
|
|
50
|
-
|
|
51
|
-
if (selectedCount === 0 || containerWidth <= 0) {
|
|
52
|
-
return {
|
|
53
|
-
visibleChipIndices: [],
|
|
54
|
-
hiddenChipCount: 0,
|
|
55
|
-
showBadge: shouldShowBadge,
|
|
56
|
-
showEllipsis: false,
|
|
57
|
-
hasOverflow: false,
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
const badgeReserve = shouldShowBadge
|
|
62
|
-
? badgeWidth + chipGap
|
|
63
|
-
: 0;
|
|
64
|
-
|
|
65
|
-
const availableWithoutEllipsis = Math.max(0, containerWidth - badgeReserve - safetyBuffer);
|
|
66
|
-
const countWithoutEllipsis = fitCount(availableWithoutEllipsis, chipWidths, chipGap);
|
|
67
|
-
const hasOverflow = countWithoutEllipsis < selectedCount;
|
|
68
|
-
|
|
69
|
-
const ellipsisReserve = hasOverflow
|
|
70
|
-
? ellipsisWidth + chipGap
|
|
71
|
-
: 0;
|
|
72
|
-
const availableForChips = Math.max(0, containerWidth - badgeReserve - ellipsisReserve - safetyBuffer);
|
|
73
|
-
const visibleCount = fitCount(availableForChips, chipWidths, chipGap);
|
|
74
|
-
|
|
75
|
-
return {
|
|
76
|
-
visibleChipIndices: Array.from({ length: visibleCount }, (_, index) => index),
|
|
77
|
-
hiddenChipCount: Math.max(0, selectedCount - visibleCount),
|
|
78
|
-
showBadge: shouldShowBadge,
|
|
79
|
-
showEllipsis: visibleCount < selectedCount,
|
|
80
|
-
hasOverflow: visibleCount < selectedCount,
|
|
81
|
-
};
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
type UseVisibleChipsParams = ComputeTriggerLayoutModelParams;
|
|
85
|
-
|
|
86
|
-
export const useVisibleChips = (params: UseVisibleChipsParams): TriggerLayoutModel =>
|
|
87
|
-
// Deps list each field instead of `[params]`: callers often pass a new `params` object every
|
|
88
|
-
// render; depending on object identity would rerun the layout every time even when values are unchanged.
|
|
89
|
-
useMemo(
|
|
90
|
-
() => computeTriggerLayoutModel(params),
|
|
91
|
-
[
|
|
92
|
-
params.badgeWidth,
|
|
93
|
-
params.chipGap,
|
|
94
|
-
params.chipWidths,
|
|
95
|
-
params.containerWidth,
|
|
96
|
-
params.ellipsisWidth,
|
|
97
|
-
params.safetyBuffer,
|
|
98
|
-
params.showBadge,
|
|
99
|
-
],
|
|
100
|
-
);
|
|
File without changes
|
|
File without changes
|