@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.
Files changed (189) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/component-library.md +77 -14
  3. package/dist/components/articleCard/ArticleCard.d.ts +2 -2
  4. package/dist/components/articleCard/ArticleCard.d.ts.map +1 -1
  5. package/dist/components/articleCard/ArticleCard.js +3 -3
  6. package/dist/components/articleCard/ArticleCard.js.map +1 -1
  7. package/dist/components/articleCard/ArticleCard.stories.d.ts +11 -3
  8. package/dist/components/articleCard/ArticleCard.stories.d.ts.map +1 -1
  9. package/dist/components/articleCard/ArticleCard.stories.js +16 -11
  10. package/dist/components/articleCard/ArticleCard.stories.js.map +1 -1
  11. package/dist/components/combobox/Combobox.js +1 -1
  12. package/dist/components/combobox/Combobox.js.map +1 -1
  13. package/dist/components/combobox/Combobox.stories.d.ts +4 -0
  14. package/dist/components/combobox/Combobox.stories.d.ts.map +1 -1
  15. package/dist/components/combobox/Combobox.stories.js +144 -12
  16. package/dist/components/combobox/Combobox.stories.js.map +1 -1
  17. package/dist/components/combobox/Combobox.test.js +22 -0
  18. package/dist/components/combobox/Combobox.test.js.map +1 -1
  19. package/dist/components/combobox/ComboboxButtonTrigger.d.ts +4 -4
  20. package/dist/components/combobox/ComboboxButtonTrigger.d.ts.map +1 -1
  21. package/dist/components/combobox/ComboboxButtonTrigger.js +35 -40
  22. package/dist/components/combobox/ComboboxButtonTrigger.js.map +1 -1
  23. package/dist/components/combobox/ComboboxTrigger.d.ts.map +1 -1
  24. package/dist/components/combobox/ComboboxTrigger.js +11 -4
  25. package/dist/components/combobox/ComboboxTrigger.js.map +1 -1
  26. package/dist/components/combobox/useVisibleTriggerTags.d.ts +21 -0
  27. package/dist/components/combobox/useVisibleTriggerTags.d.ts.map +1 -0
  28. package/dist/components/combobox/useVisibleTriggerTags.js +46 -0
  29. package/dist/components/combobox/useVisibleTriggerTags.js.map +1 -0
  30. package/dist/components/combobox/useVisibleTriggerTags.test.d.ts +2 -0
  31. package/dist/components/combobox/useVisibleTriggerTags.test.d.ts.map +1 -0
  32. package/dist/components/combobox/useVisibleTriggerTags.test.js +81 -0
  33. package/dist/components/combobox/useVisibleTriggerTags.test.js.map +1 -0
  34. package/dist/components/filterBar/FilterBar.d.ts +71 -0
  35. package/dist/components/filterBar/FilterBar.d.ts.map +1 -0
  36. package/dist/components/filterBar/FilterBar.js +89 -0
  37. package/dist/components/filterBar/FilterBar.js.map +1 -0
  38. package/dist/components/filterBar/FilterBar.stories.d.ts +170 -0
  39. package/dist/components/filterBar/FilterBar.stories.d.ts.map +1 -0
  40. package/dist/components/filterBar/FilterBar.stories.js +894 -0
  41. package/dist/components/filterBar/FilterBar.stories.js.map +1 -0
  42. package/dist/components/filterBar/FilterBar.test.d.ts +2 -0
  43. package/dist/components/filterBar/FilterBar.test.d.ts.map +1 -0
  44. package/dist/components/filterBar/FilterBar.test.js +164 -0
  45. package/dist/components/filterBar/FilterBar.test.js.map +1 -0
  46. package/dist/components/icon/allowedIcons.d.ts +1 -0
  47. package/dist/components/icon/allowedIcons.d.ts.map +1 -1
  48. package/dist/components/icon/allowedIcons.js +2 -1
  49. package/dist/components/icon/allowedIcons.js.map +1 -1
  50. package/dist/components/iconText/IconText.d.ts +43 -0
  51. package/dist/components/iconText/IconText.d.ts.map +1 -0
  52. package/dist/components/iconText/IconText.js +29 -0
  53. package/dist/components/iconText/IconText.js.map +1 -0
  54. package/dist/components/{icoText/IcoText.stories.d.ts → iconText/IconText.stories.d.ts} +8 -9
  55. package/dist/components/iconText/IconText.stories.d.ts.map +1 -0
  56. package/dist/components/{icoText/IcoText.stories.js → iconText/IconText.stories.js} +81 -81
  57. package/dist/components/iconText/IconText.stories.js.map +1 -0
  58. package/dist/components/iconText/IconText.test.d.ts +2 -0
  59. package/dist/components/iconText/IconText.test.d.ts.map +1 -0
  60. package/dist/components/{icoText/IcoText.test.js → iconText/IconText.test.js} +6 -6
  61. package/dist/components/iconText/IconText.test.js.map +1 -0
  62. package/dist/components/modal/Modal.d.ts +1 -0
  63. package/dist/components/modal/Modal.d.ts.map +1 -1
  64. package/dist/components/modal/Modal.js +2 -2
  65. package/dist/components/modal/Modal.js.map +1 -1
  66. package/dist/components/table/cellRenderers/ComboboxCellRenderer.test.d.ts.map +1 -1
  67. package/dist/components/table/cellRenderers/ComboboxCellRenderer.test.js +13 -2
  68. package/dist/components/table/cellRenderers/ComboboxCellRenderer.test.js.map +1 -1
  69. package/dist/components/tag/Tag.d.ts +14 -1
  70. package/dist/components/tag/Tag.d.ts.map +1 -1
  71. package/dist/components/tag/Tag.js +9 -3
  72. package/dist/components/tag/Tag.js.map +1 -1
  73. package/dist/components/tag/Tag.stories.d.ts +1 -1
  74. package/dist/components/tag/Tag.stories.d.ts.map +1 -1
  75. package/dist/components/tag/Tag.stories.js +3 -3
  76. package/dist/components/tag/Tag.stories.js.map +1 -1
  77. package/dist/components/tag/Tag.test.js +36 -5
  78. package/dist/components/tag/Tag.test.js.map +1 -1
  79. package/dist/components/tagList/TagList.d.ts +49 -0
  80. package/dist/components/tagList/TagList.d.ts.map +1 -0
  81. package/dist/components/tagList/TagList.js +114 -0
  82. package/dist/components/tagList/TagList.js.map +1 -0
  83. package/dist/components/tagList/TagList.stories.d.ts +130 -0
  84. package/dist/components/tagList/TagList.stories.d.ts.map +1 -0
  85. package/dist/components/tagList/TagList.stories.js +443 -0
  86. package/dist/components/tagList/TagList.stories.js.map +1 -0
  87. package/dist/components/{icoText/IcoText.test.d.ts → tagList/TagList.test.d.ts} +1 -1
  88. package/dist/components/tagList/TagList.test.d.ts.map +1 -0
  89. package/dist/components/tagList/TagList.test.js +246 -0
  90. package/dist/components/tagList/TagList.test.js.map +1 -0
  91. package/dist/components/tagList/useTagListCollapsedLayout.d.ts +19 -0
  92. package/dist/components/tagList/useTagListCollapsedLayout.d.ts.map +1 -0
  93. package/dist/components/tagList/useTagListCollapsedLayout.js +48 -0
  94. package/dist/components/tagList/useTagListCollapsedLayout.js.map +1 -0
  95. package/dist/components/tagList/useVisibleTags.d.ts +18 -0
  96. package/dist/components/tagList/useVisibleTags.d.ts.map +1 -0
  97. package/dist/components/tagList/useVisibleTags.js +41 -0
  98. package/dist/components/tagList/useVisibleTags.js.map +1 -0
  99. package/dist/index.css +272 -13
  100. package/dist/index.css.map +1 -1
  101. package/dist/index.d.ts +4 -1
  102. package/dist/index.d.ts.map +1 -1
  103. package/dist/index.js +3 -1
  104. package/dist/index.js.map +1 -1
  105. package/dist/utils/hooks/useElementWidth.d.ts.map +1 -0
  106. package/dist/{components/combobox → utils/hooks}/useElementWidth.js +0 -1
  107. package/dist/utils/hooks/useElementWidth.js.map +1 -0
  108. package/dist/utils/hooks/useMeasuredChildWidths.d.ts +8 -0
  109. package/dist/utils/hooks/useMeasuredChildWidths.d.ts.map +1 -0
  110. package/dist/utils/hooks/useMeasuredChildWidths.js +26 -0
  111. package/dist/utils/hooks/useMeasuredChildWidths.js.map +1 -0
  112. package/dist/utils/hooks/useRovingFocus.d.ts +18 -0
  113. package/dist/utils/hooks/useRovingFocus.d.ts.map +1 -0
  114. package/dist/utils/hooks/useRovingFocus.js +130 -0
  115. package/dist/utils/hooks/useRovingFocus.js.map +1 -0
  116. package/dist/utils/hooks/useRovingFocus.test.d.ts +2 -0
  117. package/dist/utils/hooks/useRovingFocus.test.d.ts.map +1 -0
  118. package/dist/utils/hooks/useRovingFocus.test.js +59 -0
  119. package/dist/utils/hooks/useRovingFocus.test.js.map +1 -0
  120. package/dist/utils/spacedWidths.d.ts +3 -0
  121. package/dist/utils/spacedWidths.d.ts.map +1 -0
  122. package/dist/utils/spacedWidths.js +28 -0
  123. package/dist/utils/spacedWidths.js.map +1 -0
  124. package/dist/utils/spacedWidths.test.d.ts +2 -0
  125. package/dist/utils/spacedWidths.test.d.ts.map +1 -0
  126. package/dist/utils/spacedWidths.test.js +17 -0
  127. package/dist/utils/spacedWidths.test.js.map +1 -0
  128. package/package.json +1 -1
  129. package/src/components/articleCard/ArticleCard.stories.tsx +17 -12
  130. package/src/components/articleCard/ArticleCard.tsx +9 -9
  131. package/src/components/combobox/Combobox.stories.tsx +186 -12
  132. package/src/components/combobox/Combobox.test.tsx +53 -0
  133. package/src/components/combobox/Combobox.tsx +3 -3
  134. package/src/components/combobox/ComboboxButtonTrigger.tsx +52 -56
  135. package/src/components/combobox/ComboboxTrigger.tsx +19 -16
  136. package/src/components/combobox/combobox.scss +8 -3
  137. package/src/components/combobox/useVisibleTriggerTags.test.tsx +91 -0
  138. package/src/components/combobox/useVisibleTriggerTags.ts +83 -0
  139. package/src/components/filterBar/FilterBar.stories.tsx +1199 -0
  140. package/src/components/filterBar/FilterBar.test.tsx +248 -0
  141. package/src/components/filterBar/FilterBar.tsx +298 -0
  142. package/src/components/filterBar/filterBar.scss +143 -0
  143. package/src/components/icon/allowedIcons.tsx +3 -1
  144. package/src/components/{icoText/IcoText.stories.tsx → iconText/IconText.stories.tsx} +112 -112
  145. package/src/components/{icoText/IcoText.test.tsx → iconText/IconText.test.tsx} +10 -10
  146. package/src/components/{icoText/IcoText.tsx → iconText/IconText.tsx} +27 -20
  147. package/src/components/modal/Modal.tsx +5 -1
  148. package/src/components/table/cellRenderers/ComboboxCellRenderer.test.tsx +20 -3
  149. package/src/components/tag/Tag.stories.tsx +4 -4
  150. package/src/components/tag/Tag.test.tsx +62 -5
  151. package/src/components/tag/Tag.tsx +61 -3
  152. package/src/components/tag/tag.scss +80 -9
  153. package/src/components/tagList/TagList.stories.tsx +564 -0
  154. package/src/components/tagList/TagList.test.tsx +342 -0
  155. package/src/components/tagList/TagList.tsx +296 -0
  156. package/src/components/tagList/tagList.scss +56 -0
  157. package/src/components/tagList/useTagListCollapsedLayout.ts +83 -0
  158. package/src/components/tagList/useVisibleTags.ts +74 -0
  159. package/src/index.scss +3 -1
  160. package/src/index.ts +13 -1
  161. package/src/tokens.scss +3 -1
  162. package/src/{components/combobox → utils/hooks}/useElementWidth.ts +0 -1
  163. package/src/utils/hooks/useMeasuredChildWidths.ts +39 -0
  164. package/src/utils/hooks/useRovingFocus.test.tsx +105 -0
  165. package/src/utils/hooks/useRovingFocus.ts +163 -0
  166. package/src/utils/spacedWidths.test.ts +20 -0
  167. package/src/utils/spacedWidths.ts +37 -0
  168. package/dist/components/combobox/useElementWidth.d.ts.map +0 -1
  169. package/dist/components/combobox/useElementWidth.js.map +0 -1
  170. package/dist/components/combobox/useVisibleChips.d.ts +0 -21
  171. package/dist/components/combobox/useVisibleChips.d.ts.map +0 -1
  172. package/dist/components/combobox/useVisibleChips.js +0 -59
  173. package/dist/components/combobox/useVisibleChips.js.map +0 -1
  174. package/dist/components/combobox/useVisibleChips.test.d.ts +0 -2
  175. package/dist/components/combobox/useVisibleChips.test.d.ts.map +0 -1
  176. package/dist/components/combobox/useVisibleChips.test.js +0 -81
  177. package/dist/components/combobox/useVisibleChips.test.js.map +0 -1
  178. package/dist/components/icoText/IcoText.d.ts +0 -37
  179. package/dist/components/icoText/IcoText.d.ts.map +0 -1
  180. package/dist/components/icoText/IcoText.js +0 -29
  181. package/dist/components/icoText/IcoText.js.map +0 -1
  182. package/dist/components/icoText/IcoText.stories.d.ts.map +0 -1
  183. package/dist/components/icoText/IcoText.stories.js.map +0 -1
  184. package/dist/components/icoText/IcoText.test.d.ts.map +0 -1
  185. package/dist/components/icoText/IcoText.test.js.map +0 -1
  186. package/src/components/combobox/useVisibleChips.test.tsx +0 -91
  187. package/src/components/combobox/useVisibleChips.ts +0 -100
  188. /package/dist/{components/combobox → utils/hooks}/useElementWidth.d.ts +0 -0
  189. /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,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=useVisibleChips.test.d.ts.map
@@ -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
- );