Skip to content

Commit 16678f9

Browse files
fathima-mirzafathima-mirza
committed
fix: Update optional props in components and readme
1 parent d9825ee commit 16678f9

File tree

15 files changed

+146
-146
lines changed

15 files changed

+146
-146
lines changed

‎README.md‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -144,33 +144,33 @@ The MultiLevelTable component accepts the following props:
144144
| selectable | boolean | No | false | Enable/disable row selection |
145145

146146
#### State Props
147-
| Prop | Type | Required | Description |
148-
|------|------|----------|-------------|
149-
| selectionState | SelectionState | Yes | Current selection state with selected rows and all selected flag |
150-
| searchTerm | string | Yes | Current search term for filtering data |
151-
| selectedFilterValues | Set<string \| number> | Yes | Currently selected filter values |
152-
| deletePopup | object | Yes | Delete confirmation popup state (isOpen, itemId, itemName) |
153-
| bulkDeletePopup | object | Yes | Bulk delete confirmation popup state (isOpen, selectedCount) |
154-
| openDropdowns | Set<string> | Yes | Set of currently open dropdown IDs |
155-
| expandedRows | Set<string \| number> | Yes | Set of currently expanded row IDs |
147+
| Prop | Type | Required | Default | Description |
148+
|------|------|----------|---------|-------------|
149+
| selectionState | SelectionState | No | { selectedRows: new Set(), isAllSelected: false } | Current selection state with selected rows and all selected flag |
150+
| searchTerm | string | No | '' | Current search term for filtering data |
151+
| selectedFilterValues | Set<string \| number> | No | new Set() | Currently selected filter values |
152+
| deletePopup | object | No | { isOpen: false, itemId: null, itemName: '' } | Delete confirmation popup state (isOpen, itemId, itemName) |
153+
| bulkDeletePopup | object | No | { isOpen: false, selectedCount: 0 } | Bulk delete confirmation popup state (isOpen, selectedCount) |
154+
| openDropdowns | Set<string> | No | new Set() | Set of currently open dropdown IDs |
155+
| expandedRows | Set<string \| number> | No | new Set() | Set of currently expanded row IDs |
156156

157157
#### Handler Props
158-
| Prop | Type | Description |
159-
|------|------|-------------|
160-
| onSearchChange | (searchTerm: string) => void | Updates the search term for filtering data |
161-
| onFilterChange | (values: Set<string \| number>) => void | Updates the selected filter values |
162-
| onDeleteClick | (itemId: string \| number, itemName: string) => void | Handles delete button click for a specific row |
163-
| onDeleteConfirm | () => void | Confirms the delete action for the selected row |
164-
| onDeleteCancel | () => void | Cancels the delete action and closes popup |
165-
| onBulkDeleteClick | () => void | Handles bulk delete button click for selected rows |
166-
| onBulkDeleteConfirm | () => void | Confirms the bulk delete action for selected rows |
167-
| onBulkDeleteCancel | () => void | Cancels the bulk delete action and closes popup |
168-
| onDropdownToggle | (buttonId: string, isOpen: boolean) => void | Toggles dropdown open/close state for action buttons |
169-
| onDropdownClose | (buttonId: string) => void | Closes a specific dropdown by ID |
170-
| onButtonClick | (button: ButtonConfig) => void | Handles click events for action buttons (export, filter, etc.) |
171-
| onSelectAll | () => void | Handles select all checkbox click to select/deselect all rows |
172-
| onRowSelect | (rowId: string \| number) => void | Handles individual row selection checkbox click |
173-
| onRowToggle | (rowId: string \| number) => void | Handles row expand/collapse toggle for nested rows |
158+
| Prop | Type | Required | Default | Description |
159+
|------|------|----------|---------|-------------|
160+
| onSearchChange | (searchTerm: string) => void | No | - | Updates the search term for filtering data |
161+
| onFilterChange | (values: Set<string \| number>) => void | No | - | Updates the selected filter values |
162+
| onDeleteClick | (itemId: string \| number, itemName: string) => void | No | - | Handles delete button click for a specific row |
163+
| onDeleteConfirm | () => void | No | - | Confirms the delete action for the selected row |
164+
| onDeleteCancel | () => void | No | - | Cancels the delete action and closes popup |
165+
| onBulkDeleteClick | () => void | No | - | Handles bulk delete button click for selected rows |
166+
| onBulkDeleteConfirm | () => void | No | - | Confirms the bulk delete action for selected rows |
167+
| onBulkDeleteCancel | () => void | No | - | Cancels the bulk delete action and closes popup |
168+
| onDropdownToggle | (buttonId: string, isOpen: boolean) => void | No | - | Toggles dropdown open/close state for action buttons |
169+
| onDropdownClose | (buttonId: string) => void | No | - | Closes a specific dropdown by ID |
170+
| onButtonClick | (button: ButtonConfig) => void | No | - | Handles click events for action buttons (export, filter, etc.) |
171+
| onSelectAll | () => void | No | - | Handles select all checkbox click to select/deselect all rows |
172+
| onRowSelect | (rowId: string \| number) => void | No | - | Handles individual row selection checkbox click |
173+
| onRowToggle | (rowId: string \| number) => void | No | - | Handles row expand/collapse toggle for nested rows |
174174

175175
#### Additional Props
176176
| Prop | Type | Default | Description |

‎example/src/components/DetailRow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@ import type { ThemeProps } from '../types/theme';
55
interface DetailRowProps {
66
label: string;
77
value: React.ReactNode;
8-
theme: ThemeProps;
8+
theme?: ThemeProps;
99
}
1010

1111
export const DetailRow: React.FC<DetailRowProps> = ({ label, value, theme }) => (
1212
<div className="detail-row">
1313
<span
1414
className="detail-row-label"
1515
style={{
16-
color: theme.colors?.textColor || '#666666',
16+
color: theme?.colors?.textColor || '#666666',
1717
}}
1818
>
1919
{label}
2020
</span>
2121
<div
2222
className="detail-row-value"
2323
style={{
24-
color: theme.colors?.textColor || '#333333',
24+
color: theme?.colors?.textColor || '#333333',
2525
}}
2626
>
2727
{value}

‎example/src/components/ExportDropdown.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { colors } from '../styles/style';
44
import '../styles/ExportDropdown.css';
55

66
interface ExportDropdownProps {
7-
onClose: () => void;
7+
onClose?: () => void;
88
handleExportCSV?: () => void;
99
theme?: {
1010
colors?: {
@@ -24,7 +24,7 @@ export const ExportDropdown: React.FC<ExportDropdownProps> = ({
2424
useEffect(() => {
2525
const handleClickOutside = (event: MouseEvent) => {
2626
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node))
27-
onClose();
27+
onClose?.();
2828
};
2929

3030
document.addEventListener('mousedown', handleClickOutside);
@@ -36,7 +36,7 @@ export const ExportDropdown: React.FC<ExportDropdownProps> = ({
3636
if (handleExportCSV)
3737
handleExportCSV();
3838

39-
onClose();
39+
onClose?.();
4040
};
4141

4242
return (

‎example/src/components/FilterDropdown.tsx‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@ import '../styles/FilterDropdown.css';
55

66
interface FilterDropdownProps {
77
// State props
8-
tempSelectedValues: Set<string | number>;
9-
selectedCategory: string | null;
10-
categories: Array<{
8+
tempSelectedValues?: Set<string | number>;
9+
selectedCategory?: string | null;
10+
categories?: Array<{
1111
key: string;
1212
title: string;
1313
count: number;
1414
}>;
15-
categoryFilterOptions: FilterOption[];
15+
categoryFilterOptions?: FilterOption[];
1616

1717
// Handler props
18-
onClose: () => void;
19-
onApply: (values: Set<string | number>) => void;
20-
onCancel: () => void;
21-
onReset: () => void;
22-
onCategoryChange: (categoryKey: string) => void;
23-
onSelectAll: () => void;
24-
onOptionChange: (value: string | number) => void;
18+
onClose?: () => void;
19+
onApply?: (values: Set<string | number>) => void;
20+
onCancel?: () => void;
21+
onReset?: () => void;
22+
onCategoryChange?: (categoryKey: string) => void;
23+
onSelectAll?: () => void;
24+
onOptionChange?: (value: string | number) => void;
2525

2626
// Configuration props
2727
title?: string;
@@ -48,10 +48,10 @@ interface FilterDropdownProps {
4848

4949
export const FilterDropdown: React.FC<FilterDropdownProps> = ({
5050
// State props
51-
tempSelectedValues,
52-
selectedCategory,
53-
categories,
54-
categoryFilterOptions,
51+
tempSelectedValues = new Set(),
52+
selectedCategory = null,
53+
categories = [],
54+
categoryFilterOptions = [],
5555

5656
// Handler props
5757
onClose,
@@ -80,7 +80,7 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = ({
8080
useEffect(() => {
8181
const handleClickOutside = (event: MouseEvent) => {
8282
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node))
83-
onClose();
83+
onClose?.();
8484
};
8585

8686
document.addEventListener('mousedown', handleClickOutside);
@@ -91,17 +91,17 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = ({
9191
}, [onClose]);
9292

9393
const handleApply = () => {
94-
onApply(tempSelectedValues);
95-
onClose();
94+
onApply?.(tempSelectedValues);
95+
onClose?.();
9696
};
9797

9898
const handleCancel = () => {
99-
onCancel();
100-
onClose();
99+
onCancel?.();
100+
onClose?.();
101101
};
102102

103103
const handleResetFilters = () => {
104-
onReset();
104+
onReset?.();
105105
};
106106

107107
return (
@@ -169,7 +169,7 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = ({
169169
<div
170170
key={category.key}
171171
className={`category-item ${isSelected ? 'selected' : ''}`}
172-
onClick={() => onCategoryChange(category.key)}
172+
onClick={() => onCategoryChange?.(category.key)}
173173
style={{
174174
cursor: 'pointer',
175175
backgroundColor: isSelected ? '#F3F3FF' : 'transparent',
@@ -209,7 +209,7 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = ({
209209
ref={(input) => {
210210
if (input) input.indeterminate = isIndeterminate;
211211
}}
212-
onChange={onSelectAll}
212+
onChange={() => onSelectAll?.()}
213213
style={{
214214
borderColor: theme?.table?.filter?.borderColor || '#E5E7EB',
215215
}}
@@ -238,7 +238,7 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = ({
238238
<input
239239
type="checkbox"
240240
checked={isSelected}
241-
onChange={() => onOptionChange(option.value)}
241+
onChange={() => onOptionChange?.(option.value)}
242242
style={{
243243
borderColor: theme?.table?.filter?.borderColor || '#E5E7EB',
244244
}}

‎example/src/components/Popup.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@ import '../styles/Popup.css';
66

77
interface PopupButton {
88
text: string;
9-
onClick: () => void;
9+
onClick?: () => void;
1010
variant?: 'primary' | 'secondary';
1111
disabled?: boolean;
1212
}
1313

1414
interface PopupProps {
1515
isOpen: boolean;
16-
onClose: () => void;
17-
icon: React.ComponentType<{ width?: number; height?: number }>;
16+
onClose?: () => void;
17+
icon?: React.ComponentType<{ width?: number; height?: number }>;
1818
title?: string;
19-
text: string;
20-
buttons: PopupButton[];
19+
text?: string;
20+
buttons?: PopupButton[];
2121
theme?: ThemeProps;
2222
}
2323

@@ -27,20 +27,20 @@ export const Popup: React.FC<PopupProps> = ({
2727
icon: Icon,
2828
title,
2929
text,
30-
buttons,
30+
buttons = [],
3131
theme,
3232
}) => {
3333
const popupRef = useRef<HTMLDivElement>(null);
3434

3535
useEffect(() => {
3636
const handleClickOutside = (event: MouseEvent) => {
3737
if (popupRef.current && !popupRef.current.contains(event.target as Node))
38-
onClose();
38+
onClose?.();
3939
};
4040

4141
const handleEscapeKey = (event: KeyboardEvent) => {
4242
if (event.key === 'Escape')
43-
onClose();
43+
onClose?.();
4444
};
4545

4646
if (isOpen) {
@@ -57,7 +57,7 @@ export const Popup: React.FC<PopupProps> = ({
5757
}, [isOpen, onClose]);
5858

5959
const renderIcon = () => {
60-
return <Icon width={48} height={48} />;
60+
return Icon ? <Icon width={48} height={48} /> : null;
6161
};
6262

6363
if (!isOpen) return null;
@@ -84,9 +84,11 @@ export const Popup: React.FC<PopupProps> = ({
8484
</div>
8585

8686
<div className="popup-content">
87-
<p className="popup-text" style={{ color: theme?.colors?.textColor || colors.borderDark }}>
88-
{text}
89-
</p>
87+
{text && (
88+
<p className="popup-text" style={{ color: theme?.colors?.textColor || colors.borderDark }}>
89+
{text}
90+
</p>
91+
)}
9092
</div>
9193

9294
<div className="popup-footer">
@@ -99,11 +101,11 @@ export const Popup: React.FC<PopupProps> = ({
99101
style={{
100102
backgroundColor: button.variant === 'primary'
101103
? (theme?.colors?.primaryColor || colors.primary)
102-
: (theme?.colors?.background || colors.backgroundWhite),
104+
: 'transparent',
103105
color: button.variant === 'primary'
104106
? '#ffffff'
105107
: (theme?.colors?.textColor || colors.borderDark),
106-
borderColor: theme?.colors?.borderColor || colors.borderDark,
108+
borderColor: theme?.colors?.borderColor || colors.borderFilter,
107109
}}
108110
>
109111
{button.text}

‎example/src/components/RowDetailsPopup.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import '../styles/RowDetailsPopup.css';
88

99
interface RowDetailsPopupProps {
1010
isOpen: boolean;
11-
onClose: () => void;
11+
onClose?: () => void;
1212
item: DataItem | null;
13-
theme: ThemeProps;
13+
theme?: ThemeProps;
1414
}
1515

1616
export const RowDetailsPopup: React.FC<RowDetailsPopupProps> = ({
@@ -80,20 +80,20 @@ export const RowDetailsPopup: React.FC<RowDetailsPopupProps> = ({
8080
<div
8181
className="row-details-popup"
8282
style={{
83-
backgroundColor: theme.colors?.background || '#ffffff',
83+
backgroundColor: theme?.colors?.background || '#ffffff',
8484
}}
8585
>
8686
{/* Header */}
8787
<div
8888
className="row-details-popup-header"
8989
style={{
90-
borderBottomColor: theme.colors?.borderColor || '#e0e0e0',
90+
borderBottomColor: theme?.colors?.borderColor || '#e0e0e0',
9191
}}
9292
>
9393
<h2
9494
className="row-details-popup-title"
9595
style={{
96-
color: theme.colors?.textColor || '#333333',
96+
color: theme?.colors?.textColor || '#333333',
9797
}}
9898
>
9999
Resource Details
@@ -102,7 +102,7 @@ export const RowDetailsPopup: React.FC<RowDetailsPopupProps> = ({
102102
onClick={onClose}
103103
className="row-details-popup-close-button"
104104
style={{
105-
color: theme.colors?.textColor || '#333333',
105+
color: theme?.colors?.textColor || '#333333',
106106
}}
107107
>
108108
×
@@ -125,7 +125,7 @@ export const RowDetailsPopup: React.FC<RowDetailsPopupProps> = ({
125125
<span
126126
className="detail-row-value-monospace"
127127
style={{
128-
color: theme.colors?.textColor || '#666666',
128+
color: theme?.colors?.textColor || '#666666',
129129
}}
130130
>
131131
{item.id}
@@ -170,7 +170,7 @@ export const RowDetailsPopup: React.FC<RowDetailsPopupProps> = ({
170170
<span
171171
className="detail-row-value-small"
172172
style={{
173-
color: theme.colors?.textColor || '#666666',
173+
color: theme?.colors?.textColor || '#666666',
174174
}}
175175
>
176176
{item.children.length} item{item.children.length !== 1 ? 's' : ''}
@@ -196,15 +196,15 @@ export const RowDetailsPopup: React.FC<RowDetailsPopupProps> = ({
196196
<div
197197
className="row-details-popup-footer"
198198
style={{
199-
borderTopColor: theme.colors?.borderColor || '#e0e0e0',
199+
borderTopColor: theme?.colors?.borderColor || '#e0e0e0',
200200
}}
201201
>
202202
<button
203203
onClick={onClose}
204204
className="row-details-popup-close-action"
205205
style={{
206-
color: theme.colors?.textColor || '#666666',
207-
borderColor: theme.colors?.borderColor || '#e0e0e0',
206+
color: theme?.colors?.textColor || '#666666',
207+
borderColor: theme?.colors?.borderColor || '#e0e0e0',
208208
}}
209209
>
210210
Close

0 commit comments

Comments
 (0)