@arbor-education/design-system.components 4.0.0-react19-alpha.0 → 4.0.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/.github/workflows/pr-review-approve.yaml +2 -1
- package/CHANGELOG.md +18 -0
- package/dist/components/formField/FormField.d.ts +4 -0
- package/dist/components/formField/FormField.d.ts.map +1 -1
- package/dist/components/formField/FormField.js +2 -1
- package/dist/components/formField/FormField.js.map +1 -1
- package/dist/components/formField/FormField.stories.d.ts.map +1 -1
- package/dist/components/formField/FormField.stories.js +10 -7
- package/dist/components/formField/FormField.stories.js.map +1 -1
- package/dist/components/formField/FormField.test.js +14 -0
- package/dist/components/formField/FormField.test.js.map +1 -1
- package/dist/components/formField/inputs/singleFile/SingleFileInput.d.ts +14 -0
- package/dist/components/formField/inputs/singleFile/SingleFileInput.d.ts.map +1 -0
- package/dist/components/formField/inputs/singleFile/SingleFileInput.js +35 -0
- package/dist/components/formField/inputs/singleFile/SingleFileInput.js.map +1 -0
- package/dist/components/formField/inputs/singleFile/SingleFileInput.stories.d.ts +170 -0
- package/dist/components/formField/inputs/singleFile/SingleFileInput.stories.d.ts.map +1 -0
- package/dist/components/formField/inputs/singleFile/SingleFileInput.stories.js +242 -0
- package/dist/components/formField/inputs/singleFile/SingleFileInput.stories.js.map +1 -0
- package/dist/components/formField/inputs/singleFile/SingleFileInput.test.d.ts +2 -0
- package/dist/components/formField/inputs/singleFile/SingleFileInput.test.d.ts.map +1 -0
- package/dist/components/formField/inputs/singleFile/SingleFileInput.test.js +135 -0
- package/dist/components/formField/inputs/singleFile/SingleFileInput.test.js.map +1 -0
- package/dist/components/widgetCalendar/WidgetCalendar.d.ts +1 -0
- package/dist/components/widgetCalendar/WidgetCalendar.d.ts.map +1 -1
- package/dist/components/widgetCalendar/WidgetCalendar.js +1 -1
- package/dist/components/widgetCalendar/WidgetCalendar.js.map +1 -1
- package/dist/components/widgetCalendar/WidgetCalendar.stories.d.ts +2 -0
- package/dist/components/widgetCalendar/WidgetCalendar.stories.d.ts.map +1 -1
- package/dist/components/widgetCalendar/WidgetCalendar.stories.js +39 -1
- package/dist/components/widgetCalendar/WidgetCalendar.stories.js.map +1 -1
- package/dist/components/widgetCalendar/WidgetCalendar.test.js +48 -1
- package/dist/components/widgetCalendar/WidgetCalendar.test.js.map +1 -1
- package/dist/components/widgetCalendar/WidgetCalendarItem.d.ts +1 -0
- package/dist/components/widgetCalendar/WidgetCalendarItem.d.ts.map +1 -1
- package/dist/components/widgetCalendar/WidgetCalendarItem.js +7 -2
- package/dist/components/widgetCalendar/WidgetCalendarItem.js.map +1 -1
- package/dist/index.css +18 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/packageManifest.test.d.ts +2 -0
- package/dist/packageManifest.test.d.ts.map +1 -0
- package/dist/packageManifest.test.js +22 -0
- package/dist/packageManifest.test.js.map +1 -0
- package/package.json +1 -1
- package/src/components/formField/FormField.stories.tsx +10 -7
- package/src/components/formField/FormField.test.tsx +35 -0
- package/src/components/formField/FormField.tsx +5 -0
- package/src/components/formField/inputs/singleFile/SingleFileInput.stories.tsx +339 -0
- package/src/components/formField/inputs/singleFile/SingleFileInput.test.tsx +181 -0
- package/src/components/formField/inputs/singleFile/SingleFileInput.tsx +101 -0
- package/src/components/formField/inputs/singleFile/singleFileInput.scss +17 -0
- package/src/components/widgetCalendar/WidgetCalendar.stories.tsx +43 -1
- package/src/components/widgetCalendar/WidgetCalendar.test.tsx +73 -1
- package/src/components/widgetCalendar/WidgetCalendar.tsx +2 -0
- package/src/components/widgetCalendar/WidgetCalendarItem.tsx +14 -1
- package/src/index.scss +1 -0
- package/src/index.ts +1 -0
- package/src/packageManifest.test.ts +43 -0
- package/.changeset/empty-clocks-jog.md +0 -5
- package/dist/components/combobox/useElementWidth.d.ts +0 -2
- package/dist/components/combobox/useElementWidth.d.ts.map +0 -1
- package/dist/components/combobox/useElementWidth.js +0 -31
- 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 +0 -60
- package/dist/components/icoText/IcoText.stories.d.ts.map +0 -1
- package/dist/components/icoText/IcoText.stories.js +0 -319
- package/dist/components/icoText/IcoText.stories.js.map +0 -1
- package/dist/components/icoText/IcoText.test.d.ts +0 -2
- package/dist/components/icoText/IcoText.test.d.ts.map +0 -1
- package/dist/components/icoText/IcoText.test.js +0 -27
- package/dist/components/icoText/IcoText.test.js.map +0 -1
- package/dist/components/tree-row/TreeRow.d.ts +0 -32
- package/dist/components/tree-row/TreeRow.d.ts.map +0 -1
- package/dist/components/tree-row/TreeRow.js +0 -19
- package/dist/components/tree-row/TreeRow.js.map +0 -1
- package/dist/components/tree-row/TreeRow.stories.d.ts +0 -13
- package/dist/components/tree-row/TreeRow.stories.d.ts.map +0 -1
- package/dist/components/tree-row/TreeRow.stories.js +0 -774
- package/dist/components/tree-row/TreeRow.stories.js.map +0 -1
- package/dist/components/tree-row/TreeRow.test.d.ts +0 -2
- package/dist/components/tree-row/TreeRow.test.d.ts.map +0 -1
- package/dist/components/tree-row/TreeRow.test.js +0 -262
- package/dist/components/tree-row/TreeRow.test.js.map +0 -1
- package/dist/components/tree-row/TreeRowSection.d.ts +0 -12
- package/dist/components/tree-row/TreeRowSection.d.ts.map +0 -1
- package/dist/components/tree-row/TreeRowSection.js +0 -20
- package/dist/components/tree-row/TreeRowSection.js.map +0 -1
- package/dist/utils/PopupParentContext.d.ts +0 -3
- package/dist/utils/PopupParentContext.d.ts.map +0 -1
- package/dist/utils/PopupParentContext.js +0 -6
- package/dist/utils/PopupParentContext.js.map +0 -1
- package/dist/utils/PopupParentContext.stories.d.ts +0 -17
- package/dist/utils/PopupParentContext.stories.d.ts.map +0 -1
- package/dist/utils/PopupParentContext.stories.js +0 -266
- package/dist/utils/PopupParentContext.stories.js.map +0 -1
- package/dist/utils/getDefaultPopupParent.d.ts +0 -2
- package/dist/utils/getDefaultPopupParent.d.ts.map +0 -1
- package/dist/utils/getDefaultPopupParent.js +0 -19
- package/dist/utils/getDefaultPopupParent.js.map +0 -1
|
@@ -227,7 +227,7 @@ const meta = {
|
|
|
227
227
|
description: [
|
|
228
228
|
'Array of `WidgetCalendar.ItemData` objects rendered as event rows. Each item requires `id`,',
|
|
229
229
|
'`eventPrimaryTerm`, `eventPrimaryDefinition`, `eventSecondaryTerm`, `eventDateTime`, and `eventTimeLabel`.',
|
|
230
|
-
'`eventType`, `eventLocation`, `eventSecondaryDefinition`, and `
|
|
230
|
+
'`eventType`, `eventLocation`, `eventSecondaryDefinition`, `buttonA11yText`, and `tooltip` are optional.',
|
|
231
231
|
].join(' '),
|
|
232
232
|
table: {
|
|
233
233
|
type: { summary: 'WidgetCalendar.ItemData[]' },
|
|
@@ -609,6 +609,48 @@ export const WithTooltip: Story = withDescription(
|
|
|
609
609
|
'Adding `tooltip` shows supplementary context alongside the heading. A single event keeps the focus on the tooltip.',
|
|
610
610
|
);
|
|
611
611
|
|
|
612
|
+
export const WithItemTooltips: Story = withDescription(
|
|
613
|
+
{
|
|
614
|
+
args: {
|
|
615
|
+
heading: 'Calendar',
|
|
616
|
+
items: [
|
|
617
|
+
{
|
|
618
|
+
id: 'year-10-10g',
|
|
619
|
+
eventType: 'primary',
|
|
620
|
+
eventPrimaryTerm: 'Class',
|
|
621
|
+
eventPrimaryDefinition: 'Year 10: 10G',
|
|
622
|
+
tooltip: 'Room change — this lesson has moved from Classroom 204',
|
|
623
|
+
...classEventTime,
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
id: 'class-generic',
|
|
627
|
+
eventType: 'secondary',
|
|
628
|
+
eventPrimaryTerm: 'Class',
|
|
629
|
+
eventPrimaryDefinition: 'Class',
|
|
630
|
+
...classEventTime,
|
|
631
|
+
},
|
|
632
|
+
{
|
|
633
|
+
id: 'maths-year-10',
|
|
634
|
+
eventType: 'primary',
|
|
635
|
+
eventPrimaryTerm: 'Class',
|
|
636
|
+
eventPrimaryDefinition: 'Maths: Year 10: 10x/Ma3',
|
|
637
|
+
tooltip: 'Cover teacher: Mrs Stanhope',
|
|
638
|
+
...classEventTime,
|
|
639
|
+
},
|
|
640
|
+
],
|
|
641
|
+
onItemClick: fn(),
|
|
642
|
+
},
|
|
643
|
+
render: args => <WidgetCalendar {...args} />,
|
|
644
|
+
parameters: { controls: { disable: true } },
|
|
645
|
+
},
|
|
646
|
+
[
|
|
647
|
+
'Per-item `tooltip` text, set on `ItemData`, shown on hover or focus of the row. Use it for',
|
|
648
|
+
'short supplementary context that would clutter the row itself — a room change, a cover teacher.',
|
|
649
|
+
'Items without a `tooltip` render exactly as before. Tooltips work on both interactive and',
|
|
650
|
+
'non-interactive rows, and keyboard interaction (Enter/Space) is unaffected.',
|
|
651
|
+
].join(' '),
|
|
652
|
+
);
|
|
653
|
+
|
|
612
654
|
export const Empty: Story = withDescription(
|
|
613
655
|
{
|
|
614
656
|
args: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import '@testing-library/jest-dom/vitest';
|
|
2
|
-
import { fireEvent, render, screen } from '@testing-library/react';
|
|
2
|
+
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
|
3
3
|
import userEvent from '@testing-library/user-event';
|
|
4
4
|
import { describe, expect, test, vi } from 'vitest';
|
|
5
5
|
import { WidgetCalendar } from './WidgetCalendar.js';
|
|
@@ -134,4 +134,76 @@ describe('WidgetCalendar', () => {
|
|
|
134
134
|
|
|
135
135
|
expect(screen.getByRole('heading', { name: 'Nothing scheduled' })).toBeInTheDocument();
|
|
136
136
|
});
|
|
137
|
+
|
|
138
|
+
describe('item tooltips', () => {
|
|
139
|
+
const tooltipItems: WidgetCalendar.ItemData[] = [
|
|
140
|
+
{
|
|
141
|
+
id: 'year-10',
|
|
142
|
+
eventType: 'primary',
|
|
143
|
+
eventPrimaryTerm: 'Class',
|
|
144
|
+
eventPrimaryDefinition: 'Year 10: 10G',
|
|
145
|
+
eventSecondaryTerm: 'Time and location',
|
|
146
|
+
eventDateTime: '2026-06-08T08:45/2026-06-08T09:00',
|
|
147
|
+
eventTimeLabel: '08:45 – 09:00',
|
|
148
|
+
eventLocation: 'Classroom 102',
|
|
149
|
+
tooltip: 'Double maths with Mr Cullen',
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
id: 'class-label',
|
|
153
|
+
eventType: 'secondary',
|
|
154
|
+
eventPrimaryTerm: 'Class',
|
|
155
|
+
eventPrimaryDefinition: 'Class',
|
|
156
|
+
eventSecondaryTerm: 'Time and location',
|
|
157
|
+
eventDateTime: '2026-06-08T10:00/2026-06-08T10:45',
|
|
158
|
+
eventTimeLabel: '10:00 – 10:45',
|
|
159
|
+
eventLocation: 'Hall',
|
|
160
|
+
},
|
|
161
|
+
];
|
|
162
|
+
|
|
163
|
+
test('shows tooltip text when hovering an item with a tooltip', async () => {
|
|
164
|
+
render(
|
|
165
|
+
<WidgetCalendar heading="Calendar" items={tooltipItems} />,
|
|
166
|
+
);
|
|
167
|
+
|
|
168
|
+
await userEvent.hover(screen.getByText('Year 10: 10G'));
|
|
169
|
+
|
|
170
|
+
await waitFor(() => {
|
|
171
|
+
expect(screen.getAllByText('Double maths with Mr Cullen').length).toBeGreaterThan(0);
|
|
172
|
+
});
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
test('does not show tooltip text until the item is hovered', () => {
|
|
176
|
+
render(
|
|
177
|
+
<WidgetCalendar heading="Calendar" items={tooltipItems} />,
|
|
178
|
+
);
|
|
179
|
+
|
|
180
|
+
expect(screen.queryByText('Double maths with Mr Cullen')).not.toBeInTheDocument();
|
|
181
|
+
});
|
|
182
|
+
|
|
183
|
+
test('renders items without a tooltip unchanged', () => {
|
|
184
|
+
render(
|
|
185
|
+
<WidgetCalendar heading="Calendar" items={tooltipItems} />,
|
|
186
|
+
);
|
|
187
|
+
|
|
188
|
+
expect(screen.getByText('10:00 – 10:45')).toBeInTheDocument();
|
|
189
|
+
});
|
|
190
|
+
|
|
191
|
+
test('tooltip does not break item activation on Enter key', () => {
|
|
192
|
+
const onItemClick = vi.fn();
|
|
193
|
+
|
|
194
|
+
render(
|
|
195
|
+
<WidgetCalendar
|
|
196
|
+
heading="Calendar"
|
|
197
|
+
items={tooltipItems}
|
|
198
|
+
onItemClick={onItemClick}
|
|
199
|
+
/>,
|
|
200
|
+
);
|
|
201
|
+
|
|
202
|
+
const item = screen.getByRole('button', { name: 'Open Year 10: 10G' });
|
|
203
|
+
|
|
204
|
+
fireEvent.keyDown(item, { key: 'Enter' });
|
|
205
|
+
|
|
206
|
+
expect(onItemClick).toHaveBeenCalledWith('year-10');
|
|
207
|
+
});
|
|
208
|
+
});
|
|
137
209
|
});
|
|
@@ -15,6 +15,7 @@ type WidgetCalendarItemData = {
|
|
|
15
15
|
eventLocation?: string;
|
|
16
16
|
eventSecondaryDefinition?: React.ReactNode;
|
|
17
17
|
buttonA11yText?: string;
|
|
18
|
+
tooltip?: string;
|
|
18
19
|
};
|
|
19
20
|
|
|
20
21
|
type WidgetCalendarProps = {
|
|
@@ -71,6 +72,7 @@ export const WidgetCalendar = (props: WidgetCalendarProps): React.JSX.Element =>
|
|
|
71
72
|
eventSecondaryDefinition={item.eventSecondaryDefinition}
|
|
72
73
|
buttonA11yText={item.buttonA11yText}
|
|
73
74
|
onItemClick={onItemClick ? () => onItemClick(item.id) : undefined}
|
|
75
|
+
tooltip={item.tooltip}
|
|
74
76
|
/>
|
|
75
77
|
))}
|
|
76
78
|
</ul>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
2
|
import { Icon } from 'Components/icon/Icon';
|
|
3
|
+
import { TooltipWrapper } from 'Components/tooltip/TooltipWrapper';
|
|
3
4
|
import { ENTER_KEY, SPACE_KEY } from 'Utils/keyboardConstants';
|
|
4
5
|
|
|
5
6
|
export type WidgetCalendarEventType = 'primary' | 'secondary';
|
|
@@ -17,6 +18,7 @@ export type WidgetCalendarItemProps = {
|
|
|
17
18
|
buttonA11yText?: string;
|
|
18
19
|
onItemClick?: () => void;
|
|
19
20
|
className?: string;
|
|
21
|
+
tooltip?: string;
|
|
20
22
|
};
|
|
21
23
|
|
|
22
24
|
export const WidgetCalendarItem = (props: WidgetCalendarItemProps): React.JSX.Element => {
|
|
@@ -33,6 +35,7 @@ export const WidgetCalendarItem = (props: WidgetCalendarItemProps): React.JSX.El
|
|
|
33
35
|
buttonA11yText,
|
|
34
36
|
onItemClick,
|
|
35
37
|
className,
|
|
38
|
+
tooltip,
|
|
36
39
|
} = props;
|
|
37
40
|
|
|
38
41
|
const isInteractive = Boolean(onItemClick);
|
|
@@ -61,7 +64,7 @@ export const WidgetCalendarItem = (props: WidgetCalendarItemProps): React.JSX.El
|
|
|
61
64
|
}
|
|
62
65
|
};
|
|
63
66
|
|
|
64
|
-
|
|
67
|
+
const item = (
|
|
65
68
|
<li
|
|
66
69
|
className={classNames(
|
|
67
70
|
'ds-widget-calendar__item',
|
|
@@ -102,4 +105,14 @@ export const WidgetCalendarItem = (props: WidgetCalendarItemProps): React.JSX.El
|
|
|
102
105
|
)}
|
|
103
106
|
</li>
|
|
104
107
|
);
|
|
108
|
+
|
|
109
|
+
if (tooltip) {
|
|
110
|
+
return (
|
|
111
|
+
<TooltipWrapper tooltipContent={tooltip}>
|
|
112
|
+
{item}
|
|
113
|
+
</TooltipWrapper>
|
|
114
|
+
);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
return item;
|
|
105
118
|
};
|
package/src/index.scss
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
@use "components/formField/label/label.scss";
|
|
18
18
|
@use "components/formField/inputs/number/numberInput.scss";
|
|
19
19
|
@use "components/formField/inputs/time/timeInput.scss";
|
|
20
|
+
@use "components/formField/inputs/singleFile/singleFileInput.scss";
|
|
20
21
|
@use "components/formField/inputs/radio/radioButtonInput.scss";
|
|
21
22
|
@use "components/formField/inputs/checkbox/checkboxInput.scss";
|
|
22
23
|
@use "components/formField/inputs/selectDropdown/selectDropdown";
|
package/src/index.ts
CHANGED
|
@@ -35,6 +35,7 @@ export { NumberInput } from 'Components/formField/inputs/number/NumberInput';
|
|
|
35
35
|
export { RadioButtonGroup } from 'Components/formField/inputs/radio/RadioButtonGroup';
|
|
36
36
|
export { RadioButtonInput } from 'Components/formField/inputs/radio/RadioButtonInput';
|
|
37
37
|
export { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
|
|
38
|
+
export { SingleFileInput } from 'Components/formField/inputs/singleFile/SingleFileInput';
|
|
38
39
|
export { Skeleton } from 'Components/skeleton/Skeleton';
|
|
39
40
|
export { TextInput } from 'Components/formField/inputs/text/TextInput';
|
|
40
41
|
export { TextArea } from 'Components/formField/inputs/textArea/TextArea';
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { readFileSync } from 'fs';
|
|
2
|
+
import path from 'path';
|
|
3
|
+
import { describe, expect, test } from 'vitest';
|
|
4
|
+
|
|
5
|
+
type PackageManifest = {
|
|
6
|
+
dependencies?: Record<string, string>;
|
|
7
|
+
peerDependencies?: Record<string, string>;
|
|
8
|
+
peerDependenciesMeta?: Record<string, { optional?: boolean }>;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// Read from disk rather than imported: tsconfig's rootDir is ./src, so a JSON import of the
|
|
12
|
+
// root package.json would fail type-checking.
|
|
13
|
+
const manifest: PackageManifest = JSON.parse(
|
|
14
|
+
readFileSync(path.resolve(__dirname, '../package.json'), 'utf8'),
|
|
15
|
+
);
|
|
16
|
+
|
|
17
|
+
const SUPPORTED_REACT_RANGE = '^18.0.0 || ^19.0.0';
|
|
18
|
+
const REACT_PACKAGES = ['react', 'react-dom'];
|
|
19
|
+
const REACT_TYPE_PACKAGES = ['@types/react', '@types/react-dom'];
|
|
20
|
+
|
|
21
|
+
describe('package.json keeps React as a peer so consumers never get a second React copy', () => {
|
|
22
|
+
test.each([...REACT_PACKAGES, ...REACT_TYPE_PACKAGES])(
|
|
23
|
+
'does not bundle %s as a dependency, which would nest a second copy inside consumers',
|
|
24
|
+
(packageName) => {
|
|
25
|
+
expect(manifest.dependencies ?? {}).not.toHaveProperty([packageName]);
|
|
26
|
+
},
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
test.each(REACT_PACKAGES)(
|
|
30
|
+
'accepts both React 18 and React 19 for %s so either consumer can install it',
|
|
31
|
+
(packageName) => {
|
|
32
|
+
expect(manifest.peerDependencies?.[packageName]).toBe(SUPPORTED_REACT_RANGE);
|
|
33
|
+
},
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
test.each(REACT_TYPE_PACKAGES)(
|
|
37
|
+
'lists %s as an optional peer so JavaScript consumers are not forced to install types',
|
|
38
|
+
(packageName) => {
|
|
39
|
+
expect(manifest.peerDependencies ?? {}).toHaveProperty([packageName]);
|
|
40
|
+
expect(manifest.peerDependenciesMeta?.[packageName]?.optional).toBe(true);
|
|
41
|
+
},
|
|
42
|
+
);
|
|
43
|
+
});
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
"@arbor-education/design-system.components": major
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
MIS-71331 Upgrade to React 19 and move `react` and `react-dom` to `peerDependencies` (`^18.0.0 || ^19.0.0`). Consumers must now provide React themselves, and may run either React 18 or 19; 19 is preferred. `@types/react` and `@types/react-dom` are no longer installed as dependencies; they are declared as optional peer dependencies for TypeScript consumers.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useElementWidth.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/useElementWidth.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,GAC1B,KAAK,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,UAAU,MAAM,KACf,MAkCF,CAAC"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { useCallback, useLayoutEffect, useState } from 'react';
|
|
2
|
-
export const useElementWidth = (ref, watchKey) => {
|
|
3
|
-
const [measurement, setMeasurement] = useState({ width: 0, hasMeasured: false });
|
|
4
|
-
const element = ref.current;
|
|
5
|
-
const update = useCallback(() => {
|
|
6
|
-
const currentElement = ref.current;
|
|
7
|
-
if (!currentElement) {
|
|
8
|
-
setMeasurement({ width: 0, hasMeasured: true });
|
|
9
|
-
return;
|
|
10
|
-
}
|
|
11
|
-
setMeasurement({
|
|
12
|
-
width: currentElement.getBoundingClientRect().width,
|
|
13
|
-
hasMeasured: true,
|
|
14
|
-
});
|
|
15
|
-
}, [ref]);
|
|
16
|
-
useLayoutEffect(() => {
|
|
17
|
-
// Re-run measurement when callers know the element's contents/layout inputs changed.
|
|
18
|
-
update();
|
|
19
|
-
}, [update, watchKey]);
|
|
20
|
-
useLayoutEffect(() => {
|
|
21
|
-
if (!element)
|
|
22
|
-
return;
|
|
23
|
-
const observer = new ResizeObserver(update);
|
|
24
|
-
observer.observe(element);
|
|
25
|
-
return () => {
|
|
26
|
-
observer.disconnect();
|
|
27
|
-
};
|
|
28
|
-
}, [element, update]);
|
|
29
|
-
return measurement.width;
|
|
30
|
-
};
|
|
31
|
-
//# sourceMappingURL=useElementWidth.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useElementWidth.js","sourceRoot":"","sources":["../../../src/components/combobox/useElementWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,GAAwC,EACxC,QAAgB,EACR,EAAE;IACV,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;IACjF,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;IAE5B,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAC;QACnC,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;YAChD,OAAO;QACT,CAAC;QAED,cAAc,CAAC;YACb,KAAK,EAAE,cAAc,CAAC,qBAAqB,EAAE,CAAC,KAAK;YACnD,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,eAAe,CAAC,GAAG,EAAE;QACnB,qFAAqF;QACrF,MAAM,EAAE,CAAC;IACX,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAE1B,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAEtB,OAAO,WAAW,CAAC,KAAK,CAAC;AAC3B,CAAC,CAAC"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
type ComputeTriggerLayoutModelParams = {
|
|
2
|
-
containerWidth: number;
|
|
3
|
-
chipWidths: number[];
|
|
4
|
-
chipGap: number;
|
|
5
|
-
badgeWidth: number;
|
|
6
|
-
ellipsisWidth: number;
|
|
7
|
-
showBadge: boolean;
|
|
8
|
-
safetyBuffer?: number;
|
|
9
|
-
};
|
|
10
|
-
export type TriggerLayoutModel = {
|
|
11
|
-
visibleChipIndices: number[];
|
|
12
|
-
hiddenChipCount: number;
|
|
13
|
-
showBadge: boolean;
|
|
14
|
-
showEllipsis: boolean;
|
|
15
|
-
hasOverflow: boolean;
|
|
16
|
-
};
|
|
17
|
-
export declare const computeTriggerLayoutModel: ({ containerWidth, chipWidths, chipGap, badgeWidth, ellipsisWidth, showBadge, safetyBuffer, }: ComputeTriggerLayoutModelParams) => TriggerLayoutModel;
|
|
18
|
-
type UseVisibleChipsParams = ComputeTriggerLayoutModelParams;
|
|
19
|
-
export declare const useVisibleChips: (params: UseVisibleChipsParams) => TriggerLayoutModel;
|
|
20
|
-
export {};
|
|
21
|
-
//# sourceMappingURL=useVisibleChips.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useVisibleChips.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/useVisibleChips.ts"],"names":[],"mappings":"AAEA,KAAK,+BAA+B,GAAG;IACrC,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAoBF,eAAO,MAAM,yBAAyB,GAAI,8FAQvC,+BAA+B,KAAG,kBAmCpC,CAAC;AAEF,KAAK,qBAAqB,GAAG,+BAA+B,CAAC;AAE7D,eAAO,MAAM,eAAe,GAAI,QAAQ,qBAAqB,KAAG,kBAc7D,CAAC"}
|
|
@@ -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,60 +0,0 @@
|
|
|
1
|
-
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { IcoText } from './IcoText.js';
|
|
3
|
-
declare function IcoTextDocsPage(): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
declare const meta: {
|
|
5
|
-
title: string;
|
|
6
|
-
component: {
|
|
7
|
-
({ children, className }: import("./IcoText.js").IcoTextProps): React.JSX.Element;
|
|
8
|
-
displayName: string;
|
|
9
|
-
} & {
|
|
10
|
-
Heading: {
|
|
11
|
-
({ children, className, ...rest }: import("./IcoText.js").IcoTextHeadingProps): React.JSX.Element;
|
|
12
|
-
displayName: string;
|
|
13
|
-
};
|
|
14
|
-
Paragraph: {
|
|
15
|
-
({ children, className, ...rest }: import("./IcoText.js").IcoTextParagraphProps): React.JSX.Element;
|
|
16
|
-
displayName: string;
|
|
17
|
-
};
|
|
18
|
-
Icon: {
|
|
19
|
-
({ className, color, name, screenReaderText, size, }: import("./IcoText.js").IcoTextIconProps): React.JSX.Element;
|
|
20
|
-
displayName: string;
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
tags: string[];
|
|
24
|
-
parameters: {
|
|
25
|
-
layout: string;
|
|
26
|
-
docs: {
|
|
27
|
-
page: typeof IcoTextDocsPage;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
argTypes: {
|
|
31
|
-
className: {
|
|
32
|
-
control: false;
|
|
33
|
-
description: string;
|
|
34
|
-
table: {
|
|
35
|
-
type: {
|
|
36
|
-
summary: string;
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
children: {
|
|
41
|
-
control: false;
|
|
42
|
-
description: string;
|
|
43
|
-
table: {
|
|
44
|
-
type: {
|
|
45
|
-
summary: string;
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
export default meta;
|
|
52
|
-
type Story = StoryObj<typeof IcoText>;
|
|
53
|
-
export declare const Default: Story;
|
|
54
|
-
export declare const HeadingOnly: Story;
|
|
55
|
-
export declare const WithoutIcon: Story;
|
|
56
|
-
export declare const IconWithScreenReaderText: Story;
|
|
57
|
-
export declare const IconSizes: Story;
|
|
58
|
-
export declare const IconColors: Story;
|
|
59
|
-
export declare const MultipleParagraphs: Story;
|
|
60
|
-
//# sourceMappingURL=IcoText.stories.d.ts.map
|
|
@@ -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,WAAW,CAAC;AA2GpC,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"}
|