@apify/ui-library 1.140.2 → 1.141.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/dist/src/components/floating/menu.d.ts +7 -3
- package/dist/src/components/floating/menu.d.ts.map +1 -1
- package/dist/src/components/floating/menu.js +24 -17
- package/dist/src/components/floating/menu.js.map +1 -1
- package/dist/src/components/floating/menu_components.d.ts +16 -4
- package/dist/src/components/floating/menu_components.d.ts.map +1 -1
- package/dist/src/components/floating/menu_components.js +19 -1
- package/dist/src/components/floating/menu_components.js.map +1 -1
- package/dist/src/components/index.d.ts +1 -0
- package/dist/src/components/index.d.ts.map +1 -1
- package/dist/src/components/index.js +1 -0
- package/dist/src/components/index.js.map +1 -1
- package/dist/src/components/radio_button/index.d.ts +2 -0
- package/dist/src/components/radio_button/index.d.ts.map +1 -0
- package/dist/src/components/radio_button/index.js +2 -0
- package/dist/src/components/radio_button/index.js.map +1 -0
- package/dist/src/components/radio_button/radio_button.d.ts +13 -0
- package/dist/src/components/radio_button/radio_button.d.ts.map +1 -0
- package/dist/src/components/radio_button/radio_button.js +15 -0
- package/dist/src/components/radio_button/radio_button.js.map +1 -0
- package/dist/src/components/radio_button/radio_button.style.d.ts +2 -0
- package/dist/src/components/radio_button/radio_button.style.d.ts.map +1 -0
- package/dist/src/components/radio_button/radio_button.style.js +47 -0
- package/dist/src/components/radio_button/radio_button.style.js.map +1 -0
- package/dist/src/components/table/index.d.ts +2 -2
- package/dist/src/components/table/index.d.ts.map +1 -1
- package/dist/src/components/table/index.js +1 -1
- package/dist/src/components/table/table.js +1 -1
- package/dist/src/components/table/{table_test_ids.d.ts → table.test_ids.d.ts} +1 -1
- package/dist/src/components/table/table.test_ids.d.ts.map +1 -0
- package/dist/src/components/table/table.test_ids.js +16 -0
- package/dist/src/components/table/table.test_ids.js.map +1 -0
- package/dist/src/components/table/{types.d.ts → table.types.d.ts} +1 -1
- package/dist/src/components/table/table.types.d.ts.map +1 -0
- package/dist/src/components/table/table.types.js +2 -0
- package/dist/src/components/table/table.types.js.map +1 -0
- package/dist/src/components/table/table_body.js +1 -1
- package/dist/src/components/table/table_cell.js +1 -1
- package/dist/src/components/table/table_empty_row.js +1 -1
- package/dist/src/components/table/table_error_row.js +1 -1
- package/dist/src/components/table/table_expansion_row.d.ts +1 -1
- package/dist/src/components/table/table_expansion_row.d.ts.map +1 -1
- package/dist/src/components/table/table_expansion_row.js +1 -1
- package/dist/src/components/table/table_foot.js +1 -1
- package/dist/src/components/table/table_head.js +1 -1
- package/dist/src/components/table/table_head_cell.js +1 -1
- package/dist/src/components/table/table_head_row.js +1 -1
- package/dist/src/components/table/table_loading_row.js +1 -1
- package/dist/src/components/table/table_row.d.ts +1 -1
- package/dist/src/components/table/table_row.d.ts.map +1 -1
- package/dist/src/components/table/table_row.js +1 -1
- package/dist/src/components/table/table_wrapper.d.ts +1 -1
- package/dist/src/components/table/table_wrapper.d.ts.map +1 -1
- package/dist/src/components/table/table_wrapper.js +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +4 -3
- package/src/components/floating/menu.tsx +48 -34
- package/src/components/floating/menu_components.tsx +51 -1
- package/src/components/index.ts +1 -0
- package/src/components/radio_button/index.ts +1 -0
- package/src/components/radio_button/radio_button.stories.tsx +57 -0
- package/src/components/radio_button/radio_button.style.ts +48 -0
- package/src/components/radio_button/radio_button.tsx +43 -0
- package/src/components/table/index.ts +2 -2
- package/src/components/table/table.stories.tsx +15 -12
- package/src/components/table/table.test_ids.ts +15 -0
- package/src/components/table/table.tsx +1 -1
- package/src/components/table/table_body.tsx +1 -1
- package/src/components/table/table_cell.tsx +1 -1
- package/src/components/table/table_empty_row.tsx +1 -1
- package/src/components/table/table_error_row.tsx +1 -1
- package/src/components/table/table_expansion_row.tsx +2 -2
- package/src/components/table/table_foot.tsx +1 -1
- package/src/components/table/table_head.tsx +1 -1
- package/src/components/table/table_head_cell.tsx +1 -1
- package/src/components/table/table_head_row.tsx +1 -1
- package/src/components/table/table_loading_row.tsx +1 -1
- package/src/components/table/table_row.tsx +2 -2
- package/src/components/table/table_wrapper.tsx +2 -2
- package/dist/src/components/table/table_test_ids.d.ts.map +0 -1
- package/dist/src/components/table/table_test_ids.js +0 -16
- package/dist/src/components/table/table_test_ids.js.map +0 -1
- package/dist/src/components/table/types.d.ts.map +0 -1
- package/dist/src/components/table/types.js +0 -2
- package/dist/src/components/table/types.js.map +0 -1
- package/src/components/table/table_test_ids.ts +0 -15
- /package/src/components/table/{types.ts → table.types.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apify/ui-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.141.0",
|
|
4
4
|
"description": "React UI library used by apify.com",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
"@floating-ui/react-dom": "^2.1.8",
|
|
33
33
|
"@radix-ui/react-checkbox": "^1.3.3",
|
|
34
34
|
"@radix-ui/react-collapsible": "^1.1.12",
|
|
35
|
+
"@radix-ui/react-radio-group": "^1.3.8",
|
|
35
36
|
"@radix-ui/react-switch": "^1.2.6",
|
|
36
37
|
"@react-hook/resize-observer": "^2.0.2",
|
|
37
38
|
"clsx": "^2.0.0",
|
|
@@ -58,7 +59,7 @@
|
|
|
58
59
|
"styled-components": "^6.1.19"
|
|
59
60
|
},
|
|
60
61
|
"devDependencies": {
|
|
61
|
-
"@apify-packages/types": "^3.
|
|
62
|
+
"@apify-packages/types": "^3.356.0",
|
|
62
63
|
"@storybook/react-vite": "^10.3.5",
|
|
63
64
|
"@types/hast": "^3.0.4",
|
|
64
65
|
"@types/lodash": "^4.14.200",
|
|
@@ -72,5 +73,5 @@
|
|
|
72
73
|
"src",
|
|
73
74
|
"style"
|
|
74
75
|
],
|
|
75
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "0d1fdfbe1cf60fe2c2eff457d75e8bc6fd8843c0"
|
|
76
77
|
}
|
|
@@ -37,12 +37,16 @@ export interface MenuOption {
|
|
|
37
37
|
export interface MenuProps<T = MenuOption> {
|
|
38
38
|
ariaLabel?: string;
|
|
39
39
|
options: T[];
|
|
40
|
-
value?: string;
|
|
40
|
+
value?: string | string[];
|
|
41
41
|
onSelect: (newValue: string, selectedBy: SelectActionType) => void;
|
|
42
42
|
onMenuOpen?: (isOpen: boolean) => void;
|
|
43
|
+
/**
|
|
44
|
+
* Overrides default label, which is selected value || defaultLabel
|
|
45
|
+
*/
|
|
46
|
+
label?: string;
|
|
43
47
|
defaultLabel?: React.ReactNode;
|
|
44
48
|
closeOnSelect?: boolean;
|
|
45
|
-
renderOption?: (option: T) => React.ReactNode;
|
|
49
|
+
renderOption?: (option: T, isSelected: boolean) => React.ReactNode;
|
|
46
50
|
placement?: Placement;
|
|
47
51
|
components?: {
|
|
48
52
|
MenuBase?: React.ElementType;
|
|
@@ -51,7 +55,7 @@ export interface MenuProps<T = MenuOption> {
|
|
|
51
55
|
};
|
|
52
56
|
}
|
|
53
57
|
|
|
54
|
-
const defaultRenderOption = ({ label }: MenuOption) => <Text as="span">{label}</Text>;
|
|
58
|
+
const defaultRenderOption = ({ label }: MenuOption, _isSelected: boolean) => <Text as="span">{label}</Text>;
|
|
55
59
|
|
|
56
60
|
/**
|
|
57
61
|
* This example is a Select taken from https://floating-ui.com/docs/react-examples
|
|
@@ -64,6 +68,7 @@ export const Menu = <T extends MenuOption>({
|
|
|
64
68
|
onSelect,
|
|
65
69
|
onMenuOpen,
|
|
66
70
|
closeOnSelect = true,
|
|
71
|
+
label,
|
|
67
72
|
defaultLabel,
|
|
68
73
|
components,
|
|
69
74
|
renderOption,
|
|
@@ -88,10 +93,16 @@ export const Menu = <T extends MenuOption>({
|
|
|
88
93
|
});
|
|
89
94
|
|
|
90
95
|
const selectedIndex = useMemo(() => {
|
|
96
|
+
if (Array.isArray(value)) return null;
|
|
91
97
|
const foundIndex = options.findIndex((option) => option.value === value);
|
|
92
98
|
return foundIndex < 0 ? null : foundIndex;
|
|
93
99
|
}, [options, value]);
|
|
94
100
|
|
|
101
|
+
const selectedValuesSet = useMemo(() => new Set(Array.isArray(value) ? value : []), [value]);
|
|
102
|
+
|
|
103
|
+
const isItemSelected = (index: number): boolean =>
|
|
104
|
+
Array.isArray(value) ? selectedValuesSet.has(options[index].value) : index === selectedIndex;
|
|
105
|
+
|
|
95
106
|
const [activeIndex, setActiveIndex] = useState<number | null>(null);
|
|
96
107
|
const handleSelect = (newIndex: number, selectedBy: SelectActionType) => {
|
|
97
108
|
onSelect(options[newIndex].value, selectedBy);
|
|
@@ -147,7 +158,7 @@ export const Menu = <T extends MenuOption>({
|
|
|
147
158
|
className={menuClassNames.BASE}
|
|
148
159
|
tabindex="0"
|
|
149
160
|
>
|
|
150
|
-
{selectedIndex !== null ? options[selectedIndex].label : defaultLabel}
|
|
161
|
+
{label ?? (selectedIndex !== null ? options[selectedIndex].label : defaultLabel)}
|
|
151
162
|
</MenuBaseComponent>
|
|
152
163
|
{isOpen && (
|
|
153
164
|
<FloatingPortal>
|
|
@@ -158,36 +169,39 @@ export const Menu = <T extends MenuOption>({
|
|
|
158
169
|
{...getFloatingProps()}
|
|
159
170
|
className={menuClassNames.LIST}
|
|
160
171
|
>
|
|
161
|
-
{options.map((option, i) =>
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
172
|
+
{options.map((option, i) => {
|
|
173
|
+
const isSelected = isItemSelected(i);
|
|
174
|
+
return (
|
|
175
|
+
<MenuItemComponent
|
|
176
|
+
key={option.value}
|
|
177
|
+
$isSelected={isSelected}
|
|
178
|
+
$isActive={i === activeIndex}
|
|
179
|
+
ref={(node: HTMLElement | null) => {
|
|
180
|
+
listRef.current[i] = node;
|
|
181
|
+
}}
|
|
182
|
+
role="option"
|
|
183
|
+
tabIndex={i === activeIndex ? 0 : -1}
|
|
184
|
+
className={menuClassNames.ITEM}
|
|
185
|
+
aria-selected={isSelected && i === activeIndex}
|
|
186
|
+
{...getItemProps({
|
|
187
|
+
onClick: () => handleSelect(i, 'click'), // Handles mouse click
|
|
188
|
+
onKeyDown: (event) => {
|
|
189
|
+
if (event.key === 'Enter') {
|
|
190
|
+
event.preventDefault();
|
|
191
|
+
handleSelect(i, 'enter'); // Handles enter press
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
if (event.key === ' ' && !isTypingRef.current) {
|
|
195
|
+
event.preventDefault();
|
|
196
|
+
handleSelect(i, 'space');
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
})}
|
|
200
|
+
>
|
|
201
|
+
{effectiveRenderOption(option, isSelected)}
|
|
202
|
+
</MenuItemComponent>
|
|
203
|
+
);
|
|
204
|
+
})}
|
|
191
205
|
</MenuComponent>
|
|
192
206
|
</FloatingFocusManager>
|
|
193
207
|
</FloatingPortal>
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { type ReferenceType, type UseFloatingReturn } from '@floating-ui/react';
|
|
2
|
+
import type React from 'react';
|
|
2
3
|
import { forwardRef } from 'react';
|
|
3
4
|
import styled, { css } from 'styled-components';
|
|
4
5
|
|
|
5
|
-
import { ChevronDownIcon } from '@apify/ui-icons';
|
|
6
|
+
import { ChevronDownIcon, CrossIcon } from '@apify/ui-icons';
|
|
6
7
|
|
|
7
8
|
import { theme } from '../../design_system/theme.js';
|
|
9
|
+
import { Badge } from '../badge.js';
|
|
8
10
|
import type { BoxProps } from '../box.js';
|
|
9
11
|
import { Box } from '../box.js';
|
|
10
12
|
|
|
@@ -97,3 +99,51 @@ export const DropdownMenuBaseComponent = forwardRef<HTMLElement, DropdownMenuBas
|
|
|
97
99
|
);
|
|
98
100
|
},
|
|
99
101
|
);
|
|
102
|
+
|
|
103
|
+
const VerticalDivider = styled.div`
|
|
104
|
+
width: 1px;
|
|
105
|
+
align-self: stretch;
|
|
106
|
+
background: ${theme.color.neutral.separatorSubtle};
|
|
107
|
+
`;
|
|
108
|
+
|
|
109
|
+
type DropdownMenuBaseComponentWithCountProps = {
|
|
110
|
+
children: React.ReactNode;
|
|
111
|
+
onClear?: () => void;
|
|
112
|
+
selectedCount?: number;
|
|
113
|
+
} & BoxProps;
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Menu base component WITH dropdown icon and a selected-count badge.
|
|
117
|
+
* Use this variant when the menu supports multi-select and you want to
|
|
118
|
+
* display how many items are selected.
|
|
119
|
+
*/
|
|
120
|
+
export const DropdownMenuBaseComponentWithCount = forwardRef<HTMLElement, DropdownMenuBaseComponentWithCountProps>(
|
|
121
|
+
({ children, onClear, selectedCount, ...props }, ref) => {
|
|
122
|
+
const showCount = onClear && selectedCount !== undefined;
|
|
123
|
+
|
|
124
|
+
return (
|
|
125
|
+
<PlainMenuBaseComponent {...props} ref={ref}>
|
|
126
|
+
{children}
|
|
127
|
+
{showCount && (
|
|
128
|
+
<Badge variant="primary_black" size="extra_small">
|
|
129
|
+
{selectedCount}
|
|
130
|
+
</Badge>
|
|
131
|
+
)}
|
|
132
|
+
{showCount && <VerticalDivider />}
|
|
133
|
+
{onClear ? (
|
|
134
|
+
<CrossIcon
|
|
135
|
+
size="16"
|
|
136
|
+
color={theme.color.neutral.icon}
|
|
137
|
+
onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
|
|
138
|
+
onClick={(e: React.MouseEvent) => {
|
|
139
|
+
e.stopPropagation();
|
|
140
|
+
onClear();
|
|
141
|
+
}}
|
|
142
|
+
/>
|
|
143
|
+
) : (
|
|
144
|
+
<ChevronDownIcon size="16" color={theme.color.neutral.icon} />
|
|
145
|
+
)}
|
|
146
|
+
</PlainMenuBaseComponent>
|
|
147
|
+
);
|
|
148
|
+
},
|
|
149
|
+
);
|
package/src/components/index.ts
CHANGED
|
@@ -27,6 +27,7 @@ export * from './icon_button.js';
|
|
|
27
27
|
export * from './spinner.js';
|
|
28
28
|
export * from './store/index.js';
|
|
29
29
|
export * from './checkbox/index.js';
|
|
30
|
+
export * from './radio_button/index.js';
|
|
30
31
|
export * from './browser_window/index.js';
|
|
31
32
|
export * from './collapsible_card/index.js';
|
|
32
33
|
export * from './select/index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './radio_button.js';
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { type ComponentProps, useState } from 'react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
|
|
4
|
+
import { RadioButtonPrimitive } from './radio_button.js';
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: 'UI-Library/Inputs/RadioButtonPrimitive',
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
const Grid = styled.div`
|
|
11
|
+
margin: 5rem 3rem;
|
|
12
|
+
display: grid;
|
|
13
|
+
grid-template-columns: repeat(1, auto);
|
|
14
|
+
gap: 1.4rem;
|
|
15
|
+
`;
|
|
16
|
+
|
|
17
|
+
const Row = styled.div`
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
gap: 0.8rem;
|
|
21
|
+
`;
|
|
22
|
+
|
|
23
|
+
type ControlledRadioButtonProps = { initialValue?: boolean } & Omit<
|
|
24
|
+
ComponentProps<typeof RadioButtonPrimitive>,
|
|
25
|
+
'value' | 'setValue'
|
|
26
|
+
>;
|
|
27
|
+
|
|
28
|
+
const ControlledRadioButton = ({ initialValue = false, ...props }: ControlledRadioButtonProps) => {
|
|
29
|
+
const [value, setValue] = useState(initialValue);
|
|
30
|
+
return <RadioButtonPrimitive value={value} setValue={setValue} {...props} />;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export const States = () => (
|
|
34
|
+
<Grid>
|
|
35
|
+
<Row>
|
|
36
|
+
<ControlledRadioButton /> Unchecked
|
|
37
|
+
</Row>
|
|
38
|
+
<Row>
|
|
39
|
+
<ControlledRadioButton initialValue /> Checked
|
|
40
|
+
</Row>
|
|
41
|
+
<Row>
|
|
42
|
+
<ControlledRadioButton disabled /> Disabled
|
|
43
|
+
</Row>
|
|
44
|
+
<Row>
|
|
45
|
+
<ControlledRadioButton initialValue disabled /> Checked & disabled
|
|
46
|
+
</Row>
|
|
47
|
+
<Row>
|
|
48
|
+
<ControlledRadioButton readOnly initialValue /> Checked & readonly
|
|
49
|
+
</Row>
|
|
50
|
+
<Row>
|
|
51
|
+
<ControlledRadioButton error="Some error" /> Error
|
|
52
|
+
</Row>
|
|
53
|
+
<Row>
|
|
54
|
+
<ControlledRadioButton initialValue error="Some error" /> Checked + error
|
|
55
|
+
</Row>
|
|
56
|
+
</Grid>
|
|
57
|
+
);
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { css } from 'styled-components';
|
|
2
|
+
|
|
3
|
+
import { theme } from '../../design_system/theme.js';
|
|
4
|
+
|
|
5
|
+
export const radioButtonStyle = css`
|
|
6
|
+
all: unset;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
border: 1px solid ${theme.color.neutral.border};
|
|
9
|
+
border-radius: 50%;
|
|
10
|
+
background-color: ${theme.color.neutral.background};
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
width: 16px;
|
|
15
|
+
height: 16px;
|
|
16
|
+
position: relative;
|
|
17
|
+
flex-shrink: 0;
|
|
18
|
+
|
|
19
|
+
&:hover,
|
|
20
|
+
&:focus {
|
|
21
|
+
border-color: ${theme.color.primary.action};
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&.disabled {
|
|
26
|
+
background-color: ${theme.color.neutral.textDisabled};
|
|
27
|
+
border-color: ${theme.color.neutral.border};
|
|
28
|
+
cursor: not-allowed;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&.error {
|
|
32
|
+
border-color: ${theme.color.danger.action};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&[data-state='checked'] {
|
|
36
|
+
border-color: ${theme.color.primary.action};
|
|
37
|
+
border-width: 4px;
|
|
38
|
+
|
|
39
|
+
&.error {
|
|
40
|
+
border-color: ${theme.color.danger.action};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&.disabled {
|
|
44
|
+
border-color: ${theme.color.neutral.border};
|
|
45
|
+
background-color: ${theme.color.neutral.textDisabled};
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
`;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { type ComponentPropsWithoutRef, type FC } from 'react';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
|
+
|
|
6
|
+
import { radioButtonStyle } from './radio_button.style.js';
|
|
7
|
+
|
|
8
|
+
const RADIO_VALUE = 'checked';
|
|
9
|
+
|
|
10
|
+
const StyledRoot = styled(RadioGroupPrimitive.Root)`
|
|
11
|
+
display: contents;
|
|
12
|
+
`;
|
|
13
|
+
|
|
14
|
+
const StyledRadioItem = styled(RadioGroupPrimitive.Item)`
|
|
15
|
+
${radioButtonStyle}
|
|
16
|
+
`;
|
|
17
|
+
|
|
18
|
+
type RadioButtonBaseProps = Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'value'> & {
|
|
19
|
+
setValue: () => void;
|
|
20
|
+
error?: string;
|
|
21
|
+
readOnly?: boolean;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export type RadioButtonPrimitiveProps = RadioButtonBaseProps & { value: boolean };
|
|
25
|
+
|
|
26
|
+
export const RadioButtonPrimitive: FC<RadioButtonPrimitiveProps> = ({
|
|
27
|
+
value,
|
|
28
|
+
setValue,
|
|
29
|
+
error,
|
|
30
|
+
disabled,
|
|
31
|
+
readOnly,
|
|
32
|
+
className,
|
|
33
|
+
...rest
|
|
34
|
+
}) => (
|
|
35
|
+
<StyledRoot value={value ? RADIO_VALUE : ''} onValueChange={() => setValue()}>
|
|
36
|
+
<StyledRadioItem
|
|
37
|
+
value={RADIO_VALUE}
|
|
38
|
+
disabled={disabled || readOnly}
|
|
39
|
+
className={clsx(className, error && 'error', (disabled || readOnly) && 'disabled')}
|
|
40
|
+
{...rest}
|
|
41
|
+
/>
|
|
42
|
+
</StyledRoot>
|
|
43
|
+
);
|
|
@@ -12,5 +12,5 @@ export { TableEmptyRow } from './table_empty_row.js';
|
|
|
12
12
|
export { TableLoadingRow } from './table_loading_row.js';
|
|
13
13
|
export { TableErrorRow } from './table_error_row.js';
|
|
14
14
|
export { tableClassNames } from './table.styled.js';
|
|
15
|
-
export { tableTestIds } from './
|
|
16
|
-
export type { HorizontallyScrollableTableWrapperProps, TableExpansion, TableRowProps } from './types.js';
|
|
15
|
+
export { tableTestIds } from './table.test_ids.js';
|
|
16
|
+
export type { HorizontallyScrollableTableWrapperProps, TableExpansion, TableRowProps } from './table.types.js';
|
|
@@ -2,18 +2,21 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
|
2
2
|
import { expect, within } from 'storybook/test';
|
|
3
3
|
|
|
4
4
|
import { Text } from '../text/index.js';
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
5
|
+
import {
|
|
6
|
+
HorizontallyScrollableTableWrapper,
|
|
7
|
+
Table,
|
|
8
|
+
TableBody,
|
|
9
|
+
TableCell,
|
|
10
|
+
TableCellLink,
|
|
11
|
+
TableEmptyRow,
|
|
12
|
+
TableErrorRow,
|
|
13
|
+
TableHead,
|
|
14
|
+
TableHeadCell,
|
|
15
|
+
TableHeadRow,
|
|
16
|
+
TableLoadingRow,
|
|
17
|
+
TableRow,
|
|
18
|
+
tableTestIds,
|
|
19
|
+
} from './';
|
|
17
20
|
|
|
18
21
|
// ---------------------------------------------------------------------------
|
|
19
22
|
// Mock data
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export const tableTestIds = {
|
|
2
|
+
TABLE: 'table',
|
|
3
|
+
HEAD: 'table-head',
|
|
4
|
+
HEAD_ROW: 'table-head-row',
|
|
5
|
+
HEAD_CELL: 'table-head-cell',
|
|
6
|
+
BODY: 'table-body',
|
|
7
|
+
ROW: 'table-row',
|
|
8
|
+
CELL: 'table-cell',
|
|
9
|
+
FOOT: 'table-foot',
|
|
10
|
+
WRAPPER: 'table-wrapper',
|
|
11
|
+
EMPTY_ROW: 'table-empty-row',
|
|
12
|
+
LOADING_ROW: 'table-loading-row',
|
|
13
|
+
ERROR_ROW: 'table-error-row',
|
|
14
|
+
EXPANSION_ROW: 'table-expansion-row',
|
|
15
|
+
};
|
|
@@ -2,7 +2,7 @@ import clsx from 'clsx';
|
|
|
2
2
|
import type { FC, HTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
import { StyledTable, tableClassNames } from './table.styled.js';
|
|
5
|
-
import { tableTestIds } from './
|
|
5
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
6
6
|
|
|
7
7
|
export const Table: FC<HTMLAttributes<HTMLTableElement>> = ({ className, ...rest }) => (
|
|
8
8
|
<StyledTable data-test={tableTestIds.TABLE} className={clsx(tableClassNames.TABLE, className)} {...rest} />
|
|
@@ -2,7 +2,7 @@ import clsx from 'clsx';
|
|
|
2
2
|
import type { FC, HTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
import { tableClassNames } from './table.styled.js';
|
|
5
|
-
import { tableTestIds } from './
|
|
5
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
6
6
|
|
|
7
7
|
export const TableBody: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
|
|
8
8
|
<tbody data-test={tableTestIds.BODY} className={clsx(tableClassNames.BODY, className)} {...rest} />
|
|
@@ -5,7 +5,7 @@ import { useContext } from 'react';
|
|
|
5
5
|
import { Link, type LinkProps } from '../link.js';
|
|
6
6
|
import { TableRowLinkContext } from './table.context.js';
|
|
7
7
|
import { tableClassNames } from './table.styled.js';
|
|
8
|
-
import { tableTestIds } from './
|
|
8
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
9
9
|
|
|
10
10
|
export const TableCell: FC<TdHTMLAttributes<HTMLTableCellElement>> = ({ className, children, ...rest }) => {
|
|
11
11
|
const rowLink = useContext(TableRowLinkContext);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { FC, ReactNode } from 'react';
|
|
2
2
|
|
|
3
3
|
import { tableClassNames } from './table.styled.js';
|
|
4
|
-
import { tableTestIds } from './
|
|
4
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
5
5
|
|
|
6
6
|
export const TableEmptyRow: FC<{ colSpan: number; children: ReactNode }> = ({ colSpan, children }) => (
|
|
7
7
|
<tr data-test={tableTestIds.EMPTY_ROW} className={tableClassNames.ROW_EMPTY}>
|
|
@@ -2,7 +2,7 @@ import type { FC, ReactNode } from 'react';
|
|
|
2
2
|
|
|
3
3
|
import { Text } from '../text/index.js';
|
|
4
4
|
import { tableClassNames } from './table.styled.js';
|
|
5
|
-
import { tableTestIds } from './
|
|
5
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
6
6
|
|
|
7
7
|
export const TableErrorRow: FC<{ colSpan: number; children?: ReactNode; error?: Error | null }> = ({
|
|
8
8
|
colSpan,
|
|
@@ -2,8 +2,8 @@ import clsx from 'clsx';
|
|
|
2
2
|
import type { FC, ReactNode } from 'react';
|
|
3
3
|
|
|
4
4
|
import { tableClassNames } from './table.styled.js';
|
|
5
|
-
import { tableTestIds } from './
|
|
6
|
-
import type { TableExpansion } from './types.js';
|
|
5
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
6
|
+
import type { TableExpansion } from './table.types.js';
|
|
7
7
|
|
|
8
8
|
export const TableExpansionRow: FC<{
|
|
9
9
|
colSpan: number;
|
|
@@ -2,7 +2,7 @@ import clsx from 'clsx';
|
|
|
2
2
|
import type { FC, HTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
import { tableClassNames } from './table.styled.js';
|
|
5
|
-
import { tableTestIds } from './
|
|
5
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
6
6
|
|
|
7
7
|
export const TableFoot: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
|
|
8
8
|
<tfoot data-test={tableTestIds.FOOT} className={clsx(tableClassNames.FOOT, className)} {...rest} />
|
|
@@ -2,7 +2,7 @@ import clsx from 'clsx';
|
|
|
2
2
|
import type { FC, HTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
import { tableClassNames } from './table.styled.js';
|
|
5
|
-
import { tableTestIds } from './
|
|
5
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
6
6
|
|
|
7
7
|
export const TableHead: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
|
|
8
8
|
<thead data-test={tableTestIds.HEAD} className={clsx(tableClassNames.HEAD, className)} {...rest} />
|
|
@@ -2,7 +2,7 @@ import clsx from 'clsx';
|
|
|
2
2
|
import type { FC, ThHTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
import { tableClassNames } from './table.styled.js';
|
|
5
|
-
import { tableTestIds } from './
|
|
5
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
6
6
|
|
|
7
7
|
export const TableHeadCell: FC<ThHTMLAttributes<HTMLTableCellElement>> = ({ className, ...rest }) => (
|
|
8
8
|
<th data-test={tableTestIds.HEAD_CELL} className={clsx(tableClassNames.HEAD_CELL, className)} {...rest} />
|
|
@@ -2,7 +2,7 @@ import clsx from 'clsx';
|
|
|
2
2
|
import type { FC, HTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
import { tableClassNames } from './table.styled.js';
|
|
5
|
-
import { tableTestIds } from './
|
|
5
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
6
6
|
|
|
7
7
|
export const TableHeadRow: FC<HTMLAttributes<HTMLTableRowElement>> = ({ className, ...rest }) => (
|
|
8
8
|
<tr data-test={tableTestIds.HEAD_ROW} className={clsx(tableClassNames.HEAD_ROW, className)} {...rest} />
|
|
@@ -2,7 +2,7 @@ import type { FC, ReactNode } from 'react';
|
|
|
2
2
|
|
|
3
3
|
import { InlineSpinner } from '../spinner.js';
|
|
4
4
|
import { tableClassNames } from './table.styled.js';
|
|
5
|
-
import { tableTestIds } from './
|
|
5
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
6
6
|
|
|
7
7
|
export const TableLoadingRow: FC<{ colSpan: number; children?: ReactNode }> = ({ colSpan, children }) => (
|
|
8
8
|
<tr data-test={tableTestIds.LOADING_ROW} className={tableClassNames.ROW_EMPTY}>
|
|
@@ -3,8 +3,8 @@ import type { FC } from 'react';
|
|
|
3
3
|
|
|
4
4
|
import { TableRowLinkContext } from './table.context.js';
|
|
5
5
|
import { tableClassNames } from './table.styled.js';
|
|
6
|
-
import { tableTestIds } from './
|
|
7
|
-
import type { TableRowProps } from './types.js';
|
|
6
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
7
|
+
import type { TableRowProps } from './table.types.js';
|
|
8
8
|
|
|
9
9
|
export const TableRow: FC<TableRowProps> = ({ className, clickable, expanded, to, ...rest }) => {
|
|
10
10
|
const row = (
|
|
@@ -3,8 +3,8 @@ import { useCallback, useEffect, useRef } from 'react';
|
|
|
3
3
|
|
|
4
4
|
import { Box } from '../box.js';
|
|
5
5
|
import { StyledHorizontallyScrollableTableWrapper, StyledTableFooterWrapper, tableClassNames } from './table.styled.js';
|
|
6
|
-
import { tableTestIds } from './
|
|
7
|
-
import type { HorizontallyScrollableTableWrapperProps } from './types.js';
|
|
6
|
+
import { tableTestIds } from './table.test_ids.js';
|
|
7
|
+
import type { HorizontallyScrollableTableWrapperProps } from './table.types.js';
|
|
8
8
|
|
|
9
9
|
export const HorizontallyScrollableTableWrapper: FC<HorizontallyScrollableTableWrapperProps> = ({
|
|
10
10
|
children,
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"table_test_ids.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table_test_ids.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;CAcxB,CAAC"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export const tableTestIds = {
|
|
2
|
-
TABLE: 'Table-table',
|
|
3
|
-
HEAD: 'Table-head',
|
|
4
|
-
HEAD_ROW: 'Table-headRow',
|
|
5
|
-
HEAD_CELL: 'Table-headCell',
|
|
6
|
-
BODY: 'Table-body',
|
|
7
|
-
ROW: 'Table-row',
|
|
8
|
-
CELL: 'Table-cell',
|
|
9
|
-
FOOT: 'Table-foot',
|
|
10
|
-
WRAPPER: 'Table-wrapper',
|
|
11
|
-
EMPTY_ROW: 'Table-emptyRow',
|
|
12
|
-
LOADING_ROW: 'Table-loadingRow',
|
|
13
|
-
ERROR_ROW: 'Table-errorRow',
|
|
14
|
-
EXPANSION_ROW: 'Table-expansionRow',
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=table_test_ids.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"table_test_ids.js","sourceRoot":"","sources":["../../../../src/components/table/table_test_ids.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,eAAe;IACzB,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,YAAY;IAClB,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,eAAe;IACxB,SAAS,EAAE,gBAAgB;IAC3B,WAAW,EAAE,kBAAkB;IAC/B,SAAS,EAAE,gBAAgB;IAC3B,aAAa,EAAE,oBAAoB;CACtC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAErC,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,mBAAmB,CAAC,GAAG;IAC9D,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mGAAmG;IACnG,EAAE,CAAC,EAAE,EAAE,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,uCAAuC,GAAG;IAClD,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;CACvC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/table/types.ts"],"names":[],"mappings":""}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export const tableTestIds = {
|
|
2
|
-
TABLE: 'Table-table',
|
|
3
|
-
HEAD: 'Table-head',
|
|
4
|
-
HEAD_ROW: 'Table-headRow',
|
|
5
|
-
HEAD_CELL: 'Table-headCell',
|
|
6
|
-
BODY: 'Table-body',
|
|
7
|
-
ROW: 'Table-row',
|
|
8
|
-
CELL: 'Table-cell',
|
|
9
|
-
FOOT: 'Table-foot',
|
|
10
|
-
WRAPPER: 'Table-wrapper',
|
|
11
|
-
EMPTY_ROW: 'Table-emptyRow',
|
|
12
|
-
LOADING_ROW: 'Table-loadingRow',
|
|
13
|
-
ERROR_ROW: 'Table-errorRow',
|
|
14
|
-
EXPANSION_ROW: 'Table-expansionRow',
|
|
15
|
-
};
|