@donotdev/components 0.0.11 → 0.0.13
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/advanced/Bento/Bento.d.ts +0 -9
- package/dist/advanced/Bento/Bento.d.ts.map +1 -1
- package/dist/advanced/Bento/Bento.js +10 -0
- package/dist/advanced/Code/Code.d.ts +1 -9
- package/dist/advanced/Code/Code.d.ts.map +1 -1
- package/dist/atomic/Accordion/index.d.ts.map +1 -1
- package/dist/atomic/Accordion/index.js +1 -1
- package/dist/atomic/ActionButton/index.d.ts.map +1 -1
- package/dist/atomic/AlertDialog/AlertDialogPrimitive.d.ts.map +1 -1
- package/dist/atomic/AlertDialog/index.js +2 -2
- package/dist/atomic/Avatar/AvatarPrimitive.d.ts +1 -1
- package/dist/atomic/Avatar/AvatarPrimitive.d.ts.map +1 -1
- package/dist/atomic/Avatar/AvatarPrimitive.js +0 -1
- package/dist/atomic/Blockquote/index.d.ts +1 -9
- package/dist/atomic/Blockquote/index.d.ts.map +1 -1
- package/dist/atomic/Button/index.d.ts +18 -1
- package/dist/atomic/Button/index.d.ts.map +1 -1
- package/dist/atomic/Button/index.js +19 -6
- package/dist/atomic/Calendar/index.d.ts.map +1 -1
- package/dist/atomic/Calendar/index.js +4 -3
- package/dist/atomic/Checkbox/CheckboxPrimitive.d.ts +1 -1
- package/dist/atomic/Checkbox/CheckboxPrimitive.d.ts.map +1 -1
- package/dist/atomic/Checkbox/CheckboxPrimitive.js +0 -1
- package/dist/atomic/Checkbox/index.d.ts +1 -1
- package/dist/atomic/Checkbox/index.d.ts.map +1 -1
- package/dist/atomic/Checkbox/index.js +2 -2
- package/dist/atomic/Collapsible/CollapsiblePrimitive.d.ts +1 -1
- package/dist/atomic/Collapsible/CollapsiblePrimitive.d.ts.map +1 -1
- package/dist/atomic/Collapsible/CollapsiblePrimitive.js +0 -1
- package/dist/atomic/Collapsible/index.d.ts.map +1 -1
- package/dist/atomic/Collapsible/index.js +2 -6
- package/dist/atomic/Combobox/index.d.ts +9 -47
- package/dist/atomic/Combobox/index.d.ts.map +1 -1
- package/dist/atomic/Combobox/index.js +136 -88
- package/dist/atomic/CommandDialog/index.d.ts.map +1 -1
- package/dist/atomic/CommandDialog/index.js +1 -1
- package/dist/atomic/ContextMenu/ContextMenuPrimitive.d.ts +1 -1
- package/dist/atomic/ContextMenu/ContextMenuPrimitive.d.ts.map +1 -1
- package/dist/atomic/ContextMenu/ContextMenuPrimitive.js +0 -1
- package/dist/atomic/ContextMenu/index.d.ts.map +1 -1
- package/dist/atomic/Dialog/DialogPrimitive.d.ts.map +1 -1
- package/dist/atomic/Dialog/index.d.ts.map +1 -1
- package/dist/atomic/Dialog/index.js +2 -2
- package/dist/atomic/DropdownMenu/index.d.ts.map +1 -1
- package/dist/atomic/DropdownMenu/index.js +18 -4
- package/dist/atomic/DualCard/index.d.ts +10 -2
- package/dist/atomic/DualCard/index.d.ts.map +1 -1
- package/dist/atomic/DualCard/index.js +3 -3
- package/dist/atomic/FeatureFallback/index.js +1 -1
- package/dist/atomic/HoverCard/HoverCardPrimitive.d.ts +1 -1
- package/dist/atomic/HoverCard/HoverCardPrimitive.d.ts.map +1 -1
- package/dist/atomic/HoverCard/HoverCardPrimitive.js +0 -1
- package/dist/atomic/HoverCard/index.js +1 -1
- package/dist/atomic/Input/index.d.ts +1 -1
- package/dist/atomic/Input/index.d.ts.map +1 -1
- package/dist/atomic/Input/index.js +13 -22
- package/dist/atomic/Label/FloatingLabel.d.ts +45 -0
- package/dist/atomic/Label/FloatingLabel.d.ts.map +1 -0
- package/dist/atomic/Label/FloatingLabel.js +34 -0
- package/dist/atomic/Label/index.d.ts +5 -1
- package/dist/atomic/Label/index.d.ts.map +1 -1
- package/dist/atomic/Label/index.js +8 -2
- package/dist/atomic/List/index.d.ts +8 -0
- package/dist/atomic/List/index.d.ts.map +1 -1
- package/dist/atomic/List/index.js +1 -1
- package/dist/atomic/NavigationMenu/NavigationMenuPrimitive.d.ts +1 -1
- package/dist/atomic/NavigationMenu/NavigationMenuPrimitive.d.ts.map +1 -1
- package/dist/atomic/NavigationMenu/NavigationMenuPrimitive.js +0 -1
- package/dist/atomic/NavigationMenu/index.d.ts +1 -1
- package/dist/atomic/NavigationMenu/index.d.ts.map +1 -1
- package/dist/atomic/NavigationMenu/index.js +10 -1
- package/dist/atomic/Pagination/index.d.ts +1 -1
- package/dist/atomic/Pagination/index.d.ts.map +1 -1
- package/dist/atomic/PasswordInput/index.d.ts +9 -10
- package/dist/atomic/PasswordInput/index.d.ts.map +1 -1
- package/dist/atomic/PasswordInput/index.js +14 -30
- package/dist/atomic/Popover/index.d.ts +0 -8
- package/dist/atomic/Popover/index.d.ts.map +1 -1
- package/dist/atomic/Popover/index.js +1 -1
- package/dist/atomic/PortalButton/index.d.ts +8 -0
- package/dist/atomic/PortalButton/index.d.ts.map +1 -1
- package/dist/atomic/PortalButton/index.js +1 -1
- package/dist/atomic/Progress/ProgressPrimitive.d.ts +1 -1
- package/dist/atomic/Progress/ProgressPrimitive.d.ts.map +1 -1
- package/dist/atomic/Progress/ProgressPrimitive.js +0 -1
- package/dist/atomic/Progress/index.d.ts +8 -0
- package/dist/atomic/Progress/index.d.ts.map +1 -1
- package/dist/atomic/Progress/index.js +1 -1
- package/dist/atomic/RadioGroup/index.d.ts +0 -9
- package/dist/atomic/RadioGroup/index.d.ts.map +1 -1
- package/dist/atomic/RadioGroup/index.js +2 -2
- package/dist/atomic/ScrollArea/ScrollAreaPrimitive.d.ts +1 -1
- package/dist/atomic/ScrollArea/ScrollAreaPrimitive.d.ts.map +1 -1
- package/dist/atomic/ScrollArea/ScrollAreaPrimitive.js +0 -1
- package/dist/atomic/Section/index.d.ts +0 -32
- package/dist/atomic/Section/index.d.ts.map +1 -1
- package/dist/atomic/Section/index.js +6 -7
- package/dist/atomic/Select/SelectPrimitive.d.ts +1 -1
- package/dist/atomic/Select/SelectPrimitive.d.ts.map +1 -1
- package/dist/atomic/Select/SelectPrimitive.js +0 -1
- package/dist/atomic/Select/index.d.ts +3 -1
- package/dist/atomic/Select/index.d.ts.map +1 -1
- package/dist/atomic/Select/index.js +14 -24
- package/dist/atomic/Separator/SeparatorPrimitive.d.ts +1 -1
- package/dist/atomic/Separator/SeparatorPrimitive.d.ts.map +1 -1
- package/dist/atomic/Separator/SeparatorPrimitive.js +0 -1
- package/dist/atomic/Separator/index.d.ts +1 -1
- package/dist/atomic/Separator/index.d.ts.map +1 -1
- package/dist/atomic/Separator/index.js +0 -1
- package/dist/atomic/Sheet/index.d.ts +3 -1
- package/dist/atomic/Sheet/index.d.ts.map +1 -1
- package/dist/atomic/Sheet/index.js +3 -3
- package/dist/atomic/Skeleton/index.d.ts.map +1 -1
- package/dist/atomic/Skeleton/index.js +6 -3
- package/dist/atomic/Slider/SliderPrimitive.d.ts +1 -1
- package/dist/atomic/Slider/SliderPrimitive.d.ts.map +1 -1
- package/dist/atomic/Slider/SliderPrimitive.js +0 -1
- package/dist/atomic/Slider/index.d.ts +3 -2
- package/dist/atomic/Slider/index.d.ts.map +1 -1
- package/dist/atomic/Slider/index.js +2 -3
- package/dist/atomic/Slot/index.d.ts.map +1 -1
- package/dist/atomic/Stepper/index.js +1 -1
- package/dist/atomic/Switch/SwitchPrimitive.d.ts +1 -1
- package/dist/atomic/Switch/SwitchPrimitive.d.ts.map +1 -1
- package/dist/atomic/Switch/SwitchPrimitive.js +0 -1
- package/dist/atomic/Switch/index.d.ts +21 -6
- package/dist/atomic/Switch/index.d.ts.map +1 -1
- package/dist/atomic/Switch/index.js +27 -9
- package/dist/atomic/Table/index.d.ts +19 -7
- package/dist/atomic/Table/index.d.ts.map +1 -1
- package/dist/atomic/Table/index.js +25 -5
- package/dist/atomic/Tabs/TabsPrimitive.d.ts +1 -1
- package/dist/atomic/Tabs/TabsPrimitive.d.ts.map +1 -1
- package/dist/atomic/Tabs/TabsPrimitive.js +0 -1
- package/dist/atomic/Tabs/index.js +1 -1
- package/dist/atomic/Tag/index.d.ts +8 -0
- package/dist/atomic/Tag/index.d.ts.map +1 -1
- package/dist/atomic/Tag/index.js +1 -1
- package/dist/atomic/Text/index.js +1 -1
- package/dist/atomic/Textarea/index.d.ts.map +1 -1
- package/dist/atomic/ToggleGroup/ToggleGroupPrimitive.d.ts +1 -1
- package/dist/atomic/ToggleGroup/ToggleGroupPrimitive.d.ts.map +1 -1
- package/dist/atomic/Tooltip/TooltipPrimitive.d.ts +1 -1
- package/dist/atomic/Tooltip/TooltipPrimitive.d.ts.map +1 -1
- package/dist/atomic/Tooltip/TooltipPrimitive.js +0 -1
- package/dist/atomic/Tooltip/index.d.ts +6 -12
- package/dist/atomic/Tooltip/index.d.ts.map +1 -1
- package/dist/atomic/Tooltip/index.js +13 -23
- package/dist/atomic/VideoPlayer/index.js +1 -1
- package/dist/atomic/VisuallyHidden/VisuallyHiddenPrimitive.d.ts.map +1 -1
- package/dist/atomic/index.d.ts +2 -3
- package/dist/atomic/index.d.ts.map +1 -1
- package/dist/atomic/index.js +1 -2
- package/dist/hooks/useToast.d.ts +1 -25
- package/dist/hooks/useToast.d.ts.map +1 -1
- package/dist/index.js +4 -4
- package/dist/styles/index.css +627 -68
- package/dist/utils/variants.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/atomic/Combobox/ComboboxPrimitive.d.ts +0 -18
- package/dist/atomic/Combobox/ComboboxPrimitive.d.ts.map +0 -1
- package/dist/atomic/Combobox/ComboboxPrimitive.js +0 -14
|
@@ -1,77 +1,64 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
// packages/components/src/atomic/Combobox/index.tsx
|
|
3
|
-
|
|
4
|
-
* @fileoverview Combobox component
|
|
5
|
-
* @description Accessible combobox with search/filter functionality. Provides a prop-based implementation.
|
|
6
|
-
*
|
|
7
|
-
* @version 0.0.1
|
|
8
|
-
* @since 0.0.1
|
|
9
|
-
* @author AMBROISE PARK Consulting
|
|
10
|
-
*/
|
|
3
|
+
import { Check, ChevronDown, Plus, X } from 'lucide-react';
|
|
11
4
|
import { useState, useMemo, useRef, useEffect, useId, } from 'react';
|
|
12
|
-
import { Check, ChevronDown, X } from 'lucide-react';
|
|
13
|
-
import { cn } from '../../utils/helpers';
|
|
14
5
|
import { CONTROL_VARIANT } from '../../utils/constants';
|
|
15
|
-
import {
|
|
6
|
+
import { cn } from '../../utils/helpers';
|
|
16
7
|
import Input from '../Input';
|
|
17
|
-
import
|
|
18
|
-
import
|
|
8
|
+
import ScrollArea from '../ScrollArea';
|
|
9
|
+
import Spinner from '../Spinner';
|
|
19
10
|
import './Combobox.css';
|
|
20
|
-
|
|
21
|
-
* Default filter function - case-insensitive label search
|
|
22
|
-
*/
|
|
23
|
-
const defaultFilterFn = (option, searchTerm) => {
|
|
24
|
-
return option.label.toLowerCase().includes(searchTerm.toLowerCase());
|
|
25
|
-
};
|
|
26
|
-
/**
|
|
27
|
-
* Accessible combobox component with search/filter functionality.
|
|
28
|
-
* Provides a prop-based implementation to abstract complexity.
|
|
29
|
-
*
|
|
30
|
-
* @component
|
|
31
|
-
* @example
|
|
32
|
-
* ```tsx
|
|
33
|
-
* <Combobox
|
|
34
|
-
* value={value}
|
|
35
|
-
* onValueChange={setValue}
|
|
36
|
-
* placeholder="Select option..."
|
|
37
|
-
* options={[
|
|
38
|
-
* { value: 'option1', label: 'Option 1' },
|
|
39
|
-
* { value: 'option2', label: 'Option 2' }
|
|
40
|
-
* ]}
|
|
41
|
-
* />
|
|
42
|
-
* ```
|
|
43
|
-
* @param {ComboboxProps} props - The props for the combobox
|
|
44
|
-
* @returns {JSX.Element} The rendered combobox
|
|
45
|
-
*/
|
|
46
|
-
const Combobox = ({ value, onValueChange, placeholder = 'Select...', searchPlaceholder = 'Search...', emptyMessage = 'No results found', options = [], trigger, disabled, isLoading, variant, filterFn = defaultFilterFn, multiple = false, label, }) => {
|
|
11
|
+
const Combobox = ({ value, onValueChange, placeholder = 'Select...', emptyMessage = 'No results found', options = [], disabled, isLoading, variant, multiple = false, label, creatable = false, createLabel = 'Create', clearable = false, onOpenChange, onSearchChange, required, }) => {
|
|
47
12
|
const id = useId();
|
|
48
13
|
const [open, setOpen] = useState(false);
|
|
49
14
|
const [search, setSearch] = useState('');
|
|
50
15
|
const [highlightedIndex, setHighlightedIndex] = useState(0);
|
|
16
|
+
const containerRef = useRef(null);
|
|
51
17
|
const inputRef = useRef(null);
|
|
52
18
|
const listRef = useRef(null);
|
|
53
|
-
// Normalize value to array for easier handling
|
|
54
19
|
const selectedValues = useMemo(() => {
|
|
55
20
|
if (!value)
|
|
56
21
|
return [];
|
|
57
22
|
return Array.isArray(value) ? value : [value];
|
|
58
23
|
}, [value]);
|
|
59
|
-
// Filter options based on search
|
|
60
24
|
const filteredOptions = useMemo(() => {
|
|
61
25
|
if (!search)
|
|
62
26
|
return options;
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
27
|
+
const searchLower = search.toLowerCase();
|
|
28
|
+
return options.filter((option) => {
|
|
29
|
+
const labelMatch = option.label.toLowerCase().includes(searchLower);
|
|
30
|
+
const descMatch = option.description?.toLowerCase().includes(searchLower);
|
|
31
|
+
return labelMatch || descMatch;
|
|
32
|
+
});
|
|
33
|
+
}, [options, search]);
|
|
34
|
+
const showCreateOption = useMemo(() => {
|
|
35
|
+
if (!creatable || !search.trim())
|
|
36
|
+
return false;
|
|
37
|
+
const exactMatch = options.some((opt) => opt.value.toLowerCase() === search.toLowerCase() ||
|
|
38
|
+
opt.label.toLowerCase() === search.toLowerCase());
|
|
39
|
+
return !exactMatch;
|
|
40
|
+
}, [creatable, search, options]);
|
|
41
|
+
const displayOptions = useMemo(() => {
|
|
42
|
+
if (showCreateOption) {
|
|
43
|
+
return [
|
|
44
|
+
...filteredOptions,
|
|
45
|
+
{
|
|
46
|
+
value: search.trim(),
|
|
47
|
+
label: `${createLabel} "${search.trim()}"`,
|
|
48
|
+
isCreateOption: true,
|
|
49
|
+
},
|
|
50
|
+
];
|
|
51
|
+
}
|
|
52
|
+
return filteredOptions;
|
|
53
|
+
}, [filteredOptions, showCreateOption, search, createLabel]);
|
|
66
54
|
useEffect(() => {
|
|
67
55
|
if (open) {
|
|
68
|
-
setSearch('');
|
|
69
56
|
setHighlightedIndex(0);
|
|
70
|
-
// Focus input when opened
|
|
71
|
-
setTimeout(() => inputRef.current?.focus(), 0);
|
|
72
57
|
}
|
|
73
|
-
|
|
74
|
-
|
|
58
|
+
else if (!multiple) {
|
|
59
|
+
setSearch('');
|
|
60
|
+
}
|
|
61
|
+
}, [open, multiple]);
|
|
75
62
|
useEffect(() => {
|
|
76
63
|
if (open && listRef.current) {
|
|
77
64
|
const highlightedElement = listRef.current.children[highlightedIndex];
|
|
@@ -80,6 +67,21 @@ const Combobox = ({ value, onValueChange, placeholder = 'Select...', searchPlace
|
|
|
80
67
|
}
|
|
81
68
|
}
|
|
82
69
|
}, [highlightedIndex, open]);
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
setHighlightedIndex(0);
|
|
72
|
+
}, [displayOptions.length]);
|
|
73
|
+
useEffect(() => {
|
|
74
|
+
const handleClickOutside = (e) => {
|
|
75
|
+
if (containerRef.current &&
|
|
76
|
+
!containerRef.current.contains(e.target)) {
|
|
77
|
+
setOpen(false);
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
if (open) {
|
|
81
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
82
|
+
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
83
|
+
}
|
|
84
|
+
}, [open]);
|
|
83
85
|
const handleSelect = (optionValue) => {
|
|
84
86
|
if (multiple) {
|
|
85
87
|
const newValues = selectedValues.includes(optionValue)
|
|
@@ -90,30 +92,43 @@ const Combobox = ({ value, onValueChange, placeholder = 'Select...', searchPlace
|
|
|
90
92
|
else {
|
|
91
93
|
onValueChange?.(optionValue);
|
|
92
94
|
setOpen(false);
|
|
95
|
+
setSearch('');
|
|
96
|
+
inputRef.current?.blur();
|
|
93
97
|
}
|
|
94
98
|
};
|
|
95
99
|
const handleKeyDown = (e) => {
|
|
96
|
-
if (!open)
|
|
97
|
-
return;
|
|
98
100
|
switch (e.key) {
|
|
99
101
|
case 'ArrowDown':
|
|
100
102
|
e.preventDefault();
|
|
101
|
-
|
|
103
|
+
if (!open) {
|
|
104
|
+
setOpen(true);
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
setHighlightedIndex((prev) => (prev + 1) % displayOptions.length);
|
|
108
|
+
}
|
|
102
109
|
break;
|
|
103
110
|
case 'ArrowUp':
|
|
104
111
|
e.preventDefault();
|
|
105
|
-
|
|
112
|
+
if (open) {
|
|
113
|
+
setHighlightedIndex((prev) => (prev - 1 + displayOptions.length) % displayOptions.length);
|
|
114
|
+
}
|
|
106
115
|
break;
|
|
107
116
|
case 'Enter':
|
|
108
117
|
e.preventDefault();
|
|
109
|
-
if (
|
|
110
|
-
|
|
111
|
-
|
|
118
|
+
if (open &&
|
|
119
|
+
displayOptions[highlightedIndex] &&
|
|
120
|
+
!displayOptions[highlightedIndex].disabled) {
|
|
121
|
+
handleSelect(displayOptions[highlightedIndex].value);
|
|
122
|
+
}
|
|
123
|
+
else if (!open) {
|
|
124
|
+
setOpen(true);
|
|
112
125
|
}
|
|
113
126
|
break;
|
|
114
127
|
case 'Escape':
|
|
115
128
|
e.preventDefault();
|
|
116
129
|
setOpen(false);
|
|
130
|
+
setSearch('');
|
|
131
|
+
inputRef.current?.blur();
|
|
117
132
|
break;
|
|
118
133
|
}
|
|
119
134
|
};
|
|
@@ -121,43 +136,76 @@ const Combobox = ({ value, onValueChange, placeholder = 'Select...', searchPlace
|
|
|
121
136
|
e.stopPropagation();
|
|
122
137
|
onValueChange?.(multiple ? [] : '');
|
|
123
138
|
};
|
|
124
|
-
|
|
125
|
-
|
|
139
|
+
const getDisplayValue = () => {
|
|
140
|
+
if (open && search)
|
|
141
|
+
return search;
|
|
126
142
|
if (selectedValues.length === 0)
|
|
127
|
-
return
|
|
128
|
-
if (multiple)
|
|
129
|
-
return
|
|
130
|
-
}
|
|
143
|
+
return '';
|
|
144
|
+
if (multiple)
|
|
145
|
+
return '';
|
|
131
146
|
const selectedOption = options.find((opt) => opt.value === selectedValues[0]);
|
|
132
|
-
return selectedOption?.label ||
|
|
147
|
+
return selectedOption?.label || (creatable ? selectedValues[0] : '');
|
|
133
148
|
};
|
|
134
|
-
const
|
|
149
|
+
const displayValue = getDisplayValue();
|
|
135
150
|
const hasSelection = selectedValues.length > 0;
|
|
136
|
-
const
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
151
|
+
const handleInputChange = (e) => {
|
|
152
|
+
const newValue = e.target.value;
|
|
153
|
+
setSearch(newValue);
|
|
154
|
+
onSearchChange?.(newValue);
|
|
155
|
+
if (!open)
|
|
156
|
+
setOpen(true);
|
|
157
|
+
};
|
|
158
|
+
const handleInputFocus = () => {
|
|
159
|
+
if (!disabled && !isLoading) {
|
|
160
|
+
setOpen(true);
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
const handleInputClick = () => {
|
|
164
|
+
if (!disabled && !isLoading) {
|
|
165
|
+
setOpen(true);
|
|
166
|
+
inputRef.current?.focus();
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
const handleOpenChange = (isOpen) => {
|
|
170
|
+
setOpen(isOpen);
|
|
171
|
+
onOpenChange?.(isOpen);
|
|
172
|
+
};
|
|
173
|
+
return (_jsxs("div", { ref: containerRef, className: cn('dndev-relative', open && 'dndev-combobox-open'), style: { width: '100%' }, children: [_jsxs("div", { className: "dndev-relative", children: [_jsx(Input, { ref: inputRef, id: id, label: label, value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onClick: handleInputClick, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled || isLoading, icon: isLoading ? _jsx(Spinner, {}) : ChevronDown, iconEnd: true, required: required, "data-variant": variant, style: {
|
|
174
|
+
'--chevron-rotation': open ? '180deg' : '0deg',
|
|
175
|
+
} }), clearable && hasSelection && !disabled && (_jsx("button", { type: "button", onClick: handleClear, className: "dndev-absolute", style: {
|
|
176
|
+
insetInlineEnd: 'calc(var(--gap-md) + var(--icon-md) + var(--gap-sm))',
|
|
177
|
+
top: '50%',
|
|
178
|
+
transform: 'translateY(-50%)',
|
|
179
|
+
background: 'none',
|
|
180
|
+
border: 'none',
|
|
181
|
+
cursor: 'pointer',
|
|
182
|
+
padding: 'var(--gap-tight)',
|
|
183
|
+
display: 'flex',
|
|
184
|
+
alignItems: 'center',
|
|
185
|
+
opacity: 0.5,
|
|
186
|
+
zIndex: 1,
|
|
187
|
+
}, "aria-label": "Clear", children: _jsx(X, { style: {
|
|
188
|
+
width: 'var(--size-icon-sm)',
|
|
189
|
+
height: 'var(--size-icon-sm)',
|
|
190
|
+
} }) }))] }), open && (_jsx("div", { className: "dndev-floating dndev-menu-content dndev-z-tooltip dndev-combobox-content", style: {
|
|
191
|
+
position: 'absolute',
|
|
192
|
+
top: '100%',
|
|
193
|
+
insetInlineStart: 0,
|
|
194
|
+
insetInlineEnd: 0,
|
|
195
|
+
width: '100%',
|
|
196
|
+
marginTop: 'var(--gap-tight)',
|
|
197
|
+
padding: 'var(--gap-tight)',
|
|
198
|
+
textAlign: 'start',
|
|
199
|
+
}, "data-glow": "blank", children: _jsx(ScrollArea, { className: "dndev-menu-scroll-area", end: true, children: _jsx("div", { ref: listRef, style: {
|
|
200
|
+
display: 'flex',
|
|
201
|
+
flexDirection: 'column',
|
|
202
|
+
gap: 'var(--gap-none)',
|
|
203
|
+
}, children: displayOptions.length === 0 ? (_jsx("div", { className: "dndev-combobox-empty", style: { textAlign: 'start' }, children: emptyMessage })) : (displayOptions.map((option, index) => {
|
|
157
204
|
const isSelected = selectedValues.includes(option.value);
|
|
158
205
|
const isHighlighted = index === highlightedIndex;
|
|
159
|
-
|
|
160
|
-
|
|
206
|
+
const isCreateOption = option.isCreateOption;
|
|
207
|
+
return (_jsx("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, className: cn('dndev-interactive dndev-combobox-option', isHighlighted && 'dndev-combobox-option-highlighted', isSelected && 'dndev-combobox-option-selected', isCreateOption && 'dndev-combobox-option-create'), onMouseEnter: () => setHighlightedIndex(index), children: option.content ? (option.content) : (_jsxs(_Fragment, { children: [isCreateOption && (_jsx(Plus, { className: "dndev-combobox-option-create-icon" })), _jsxs("div", { className: "dndev-combobox-option-content", children: [_jsx("span", { className: "dndev-combobox-option-label", children: option.label }), option.description && (_jsx("span", { className: "dndev-combobox-option-description", children: option.description }))] }), isSelected && !isCreateOption && (_jsx(Check, { className: "dndev-combobox-option-check" }))] })) }, isCreateOption ? `create-${option.value}` : option.value));
|
|
208
|
+
})) }) }) }))] }));
|
|
161
209
|
};
|
|
162
210
|
export default Combobox;
|
|
163
211
|
export { CONTROL_VARIANT as COMBOBOX_VARIANT };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/CommandDialog/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/CommandDialog/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,kDAAkD;AAClD,eAAO,MAAM,qBAAqB,eAH2B,IAAI,aAIvB,CAAC;AAS3C,MAAM,WAAW,kBAAkB;IACjC,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB;IACrB,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,aAAa,GAAI,4FAUpB,kBAAkB,4CAwEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -15,8 +15,8 @@ const CommandDialogContext = createContext({});
|
|
|
15
15
|
export const useCommandDialogClose = () => useContext(CommandDialogContext).onClose;
|
|
16
16
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
17
17
|
import { X } from 'lucide-react';
|
|
18
|
-
import { cn } from '../../utils/helpers';
|
|
19
18
|
import { useSwipeToClose } from '../../hooks';
|
|
19
|
+
import { cn } from '../../utils/helpers';
|
|
20
20
|
import Button, { BUTTON_VARIANT } from '../Button';
|
|
21
21
|
const CommandDialog = ({ trigger, open, onOpenChange, title, description, children, footer, className, noSwipe = false, }) => {
|
|
22
22
|
const handleClose = () => {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* @author AMBROISE PARK Consulting
|
|
8
8
|
*/
|
|
9
9
|
import * as RadixContextMenu from '@radix-ui/react-context-menu';
|
|
10
|
-
import {
|
|
10
|
+
import type { ComponentProps } from 'react';
|
|
11
11
|
declare const ContextMenuPrimitive: import("react").FC<RadixContextMenu.ContextMenuProps>;
|
|
12
12
|
declare const ContextMenuTriggerPrimitive: import("react").ForwardRefExoticComponent<RadixContextMenu.ContextMenuTriggerProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
13
13
|
declare const ContextMenuGroupPrimitive: import("react").ForwardRefExoticComponent<RadixContextMenu.ContextMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/ContextMenu/ContextMenuPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,gBAAgB,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"ContextMenuPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/ContextMenu/ContextMenuPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,gBAAgB,MAAM,8BAA8B,CAAC;AAKjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,QAAA,MAAM,oBAAoB,uDAAwB,CAAC;AAEnD,QAAA,MAAM,2BAA2B,sIAA2B,CAAC;AAE7D,QAAA,MAAM,yBAAyB,mIAAyB,CAAC;AAEzD,QAAA,MAAM,0BAA0B,6DAA0B,CAAC;AAE3D,QAAA,MAAM,uBAAuB,0DAAuB,CAAC;AAErD,QAAA,MAAM,8BAA8B,wIAA8B,CAAC;AAEnE,QAAA,MAAM,8BAA8B,GAAI,0CAKrC,cAAc,CAAC,OAAO,gBAAgB,CAAC,UAAU,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CASA,CAAC;AAEF,QAAA,MAAM,8BAA8B,GAAI,yBAGrC,cAAc,CAAC,OAAO,gBAAgB,CAAC,UAAU,CAAC,4CAEpD,CAAC;AAEF,QAAA,MAAM,2BAA2B,GAAI,2CAIlC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG;IACnD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC3C,4CAQA,CAAC;AAEF,QAAA,MAAM,wBAAwB,GAAI,gCAI/B,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,GAAG;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAOA,CAAC;AAEF,QAAA,MAAM,gCAAgC,GAAI,4CAKvC,cAAc,CAAC,OAAO,gBAAgB,CAAC,YAAY,CAAC,4CAatD,CAAC;AAEF,QAAA,MAAM,6BAA6B,GAAI,mCAIpC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,4CAYnD,CAAC;AAEF,QAAA,MAAM,yBAAyB,GAAI,gCAIhC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,GAAG;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAMA,CAAC;AAEF,QAAA,MAAM,6BAA6B,GAAI,yBAGpC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,4CAEnD,CAAC;AAEF,QAAA,MAAM,4BAA4B,GAAI,yBAGnC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,4CAEvC,CAAC;AAEF,eAAe,oBAAoB,CAAC;AACpC,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,wBAAwB,EACxB,gCAAgC,EAChC,6BAA6B,EAC7B,yBAAyB,EACzB,6BAA6B,EAC7B,4BAA4B,EAC5B,yBAAyB,EACzB,0BAA0B,EAC1B,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,GAC/B,CAAC"}
|
|
@@ -10,7 +10,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
10
10
|
*/
|
|
11
11
|
import * as RadixContextMenu from '@radix-ui/react-context-menu';
|
|
12
12
|
import { Check, ChevronRight, Circle } from 'lucide-react';
|
|
13
|
-
import {} from 'react';
|
|
14
13
|
import { cn } from '../../utils/helpers';
|
|
15
14
|
const ContextMenuPrimitive = RadixContextMenu.Root;
|
|
16
15
|
const ContextMenuTriggerPrimitive = RadixContextMenu.Trigger;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/ContextMenu/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/ContextMenu/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,uDAAuD;AACvD,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,KAAK,qBAAqB,GAAG,mBAAmB,GAAG;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,uBAAuB,GAAG,mBAAmB,GAAG;IACnD,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC9B,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oDAAoD;AACpD,MAAM,MAAM,mBAAmB,GAC3B,qBAAqB,GACrB,uBAAuB,GACvB,yBAAyB,GACzB,sBAAsB,GACtB,wBAAwB,GACxB,oBAAoB,CAAC;AAEzB,MAAM,WAAW,gBAAgB;IAC/B,+DAA+D;IAC/D,OAAO,EAAE,SAAS,CAAC;IACnB,2CAA2C;IAC3C,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC9B;AA4FD;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,WAAW,GAAI,oBAAoB,gBAAgB,4CAWxD,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/Dialog/DialogPrimitive.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"DialogPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/Dialog/DialogPrimitive.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjE,QAAA,MAAM,MAAM,iDAAuB,CAAC;AACpC,QAAA,MAAM,aAAa,kIAA0B,CAAC;AAC9C,QAAA,MAAM,YAAY,uDAAyB,CAAC;AAC5C,QAAA,MAAM,WAAW,gIAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,GAAI,yBAGpB,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,4CAEhD,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,wCAKpB,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,4CAIA,CAAC;AAEF,QAAA,MAAM,YAAY,GAAI,yBAGnB,cAAc,CAAC,cAAc,CAAC,4CAEhC,CAAC;AAEF,QAAA,MAAM,YAAY,GAAI,yBAGnB,cAAc,CAAC,cAAc,CAAC,4CAEhC,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,yBAGlB,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,4CAE9C,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,yBAGxB,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,4CAEpD,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Dialog/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Dialog/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE7E,OAAe,EAAkB,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AACvE,OAAO,EAGL,aAAa,IAAI,gBAAgB,EAQlC,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAU/E,QAAA,MAAM,aAAa,GAAI,0EAOpB,cAAc,CAAC,OAAO,gBAAgB,CAAC,GAAG;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,4CAyBA,CAAC;AAiCF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAEtE,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,kBAAkB,EAClB,UAAU,GAAG,OAAO,CACrB;IACC,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sIAAsI;IACtI,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE;YACP,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;SACtB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;YACrB,OAAO,CAAC,EAAE,aAAa,CAAC;SACzB,CAAC;KACH,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,MAAM,GAAI,yIAcb,WAAW,4CAyEb,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC1E,YAAY,EAAE,cAAc,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC"}
|
|
@@ -10,9 +10,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
10
10
|
*/
|
|
11
11
|
import { X } from 'lucide-react';
|
|
12
12
|
import { useRef } from 'react';
|
|
13
|
+
import { useSwipeToClose } from '../../hooks';
|
|
13
14
|
import { SURFACE_VARIANT } from '../../utils/constants';
|
|
14
15
|
import { cn, getVariantDataAttrs } from '../../utils/helpers';
|
|
15
|
-
import { useSwipeToClose } from '../../hooks';
|
|
16
16
|
import Button, { BUTTON_VARIANT } from '../Button';
|
|
17
17
|
import { Dialog as Root, DialogTrigger as Trigger, DialogContent as ContentPrimitive, DialogHeader as HeaderPrimitive, DialogFooter as FooterPrimitive, DialogTitle as TitlePrimitive, DialogDescription as DescriptionPrimitive, DialogClose as Close, DialogOverlay as OverlayPrimitive, DialogPortal, } from './DialogPrimitive';
|
|
18
18
|
// Wrapper components that apply dndev-* classes
|
|
@@ -57,7 +57,7 @@ const Dialog = ({ trigger, title, description, children, footer, open, onOpenCha
|
|
|
57
57
|
const variantAttrs = getVariantDataAttrs({
|
|
58
58
|
variant: variant !== SURFACE_VARIANT.DEFAULT ? variant : undefined,
|
|
59
59
|
});
|
|
60
|
-
return (_jsxs(Root, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(Trigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: cn('dndev-surface', className), noSwipe: noSwipe, closeButtonRef: closeButtonRef, onOpenChange: onOpenChange, ...variantAttrs, ...contentProps, children: [title ? (_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }),
|
|
60
|
+
return (_jsxs(Root, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(Trigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: cn('dndev-surface dndev-modal-content', className), noSwipe: noSwipe, closeButtonRef: closeButtonRef, onOpenChange: onOpenChange, ...variantAttrs, ...contentProps, children: [title ? (_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { className: "dndev-sr-only", children: description || 'Dialog content' })] })) : (_jsxs(_Fragment, { children: [_jsx(DialogTitle, { className: "dndev-sr-only", children: "Dialog" }), _jsx(DialogDescription, { className: "dndev-sr-only", children: description || 'Dialog content' })] })), _jsx("div", { className: "dndev-modal-body", children: children }), (footer || actions) && (_jsxs(DialogFooter, { children: [footer, actions && (_jsxs(_Fragment, { children: [actions.cancel && (_jsx(Close, { asChild: true, children: _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, onClick: actions.cancel.onClick, children: actions.cancel.label }) })), actions.confirm && (_jsx(Button, { variant: actions.confirm.variant || BUTTON_VARIANT.PRIMARY, onClick: actions.confirm.onClick, children: actions.confirm.label }))] }))] })), showClose && (_jsx(Close, { ref: closeButtonRef, asChild: true, children: _jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: X, className: "dndev-modal-close", "aria-label": "Close" }) }))] })] }));
|
|
61
61
|
};
|
|
62
62
|
export default Dialog;
|
|
63
63
|
export { SURFACE_VARIANT as DIALOG_VARIANT } from '../../utils/constants';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/DropdownMenu/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/DropdownMenu/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,oBAAoB,CAAC;AAc5B,KAAK,oBAAoB,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,gDAAgD;IAChD,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IACjC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,sBAAsB,GAAG,oBAAoB,GAAG;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,KAAK,uBAAuB,GAAG,oBAAoB,GAAG;IACpD,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAClC,8EAA8E;IAC9E,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAC5B,sBAAsB,GACtB,qBAAqB,GACrB,yBAAyB,GACzB,uBAAuB,CAAC;AAE5B,MAAM,WAAW,iBAAiB;IAChC,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC/B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC1C,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,YAAY,GAAI,+EAQnB,iBAAiB,mDAyQnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -11,10 +11,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
11
11
|
* @author AMBROISE PARK Consulting
|
|
12
12
|
*/
|
|
13
13
|
import { ChevronRight, Check } from 'lucide-react';
|
|
14
|
-
import { Children } from 'react';
|
|
14
|
+
import { Children, isValidElement } from 'react';
|
|
15
15
|
import DropdownMenuPrimitive, { DropdownMenuTriggerPrimitive, DropdownMenuContentPrimitive, DropdownMenuItemPrimitive, DropdownMenuSubPrimitive, DropdownMenuSubTriggerPrimitive, DropdownMenuSubContentPrimitive, DropdownMenuPortalPrimitive, DropdownMenuLabelPrimitive, DropdownMenuSeparatorPrimitive, } from './DropdownMenuPrimitive';
|
|
16
|
-
import ScrollArea from '../ScrollArea';
|
|
17
16
|
import { cn } from '../../utils/helpers';
|
|
17
|
+
import ScrollArea from '../ScrollArea';
|
|
18
18
|
import './DropdownMenu.css';
|
|
19
19
|
/** WCAG: aria-label for icon-only menu items */
|
|
20
20
|
const getIconOnlyAriaLabel = (hasIcon, hasLabel, label, fallback) => {
|
|
@@ -50,7 +50,21 @@ const DropdownMenu = ({ trigger, items = [], children, contentWidth, contentAlig
|
|
|
50
50
|
return null;
|
|
51
51
|
// Normalize children to ensure keys (React.Children.toArray handles this automatically)
|
|
52
52
|
const normalizedChildren = children ? Children.toArray(children) : [];
|
|
53
|
-
|
|
53
|
+
// Wrap children in DropdownMenuItemPrimitive so they trigger auto-close behavior
|
|
54
|
+
// This ensures clicking any child (like GoTo button) closes the dropdown
|
|
55
|
+
const wrappedChildren = normalizedChildren.map((child, index) => {
|
|
56
|
+
// Check if child is already a menu item by checking for data-role attribute
|
|
57
|
+
// (our DropdownMenuItemPrimitive sets data-role="menu-item")
|
|
58
|
+
if (isValidElement(child) &&
|
|
59
|
+
child.props?.['data-role'] === 'menu-item') {
|
|
60
|
+
// Already a menu item, don't wrap
|
|
61
|
+
return child;
|
|
62
|
+
}
|
|
63
|
+
// Wrap child in DropdownMenuItemPrimitive for auto-close behavior
|
|
64
|
+
// Using asChild merges props correctly with the child component
|
|
65
|
+
return (_jsx(DropdownMenuItemPrimitive, { className: "dndev-interactive", asChild: true, children: child }, index));
|
|
66
|
+
});
|
|
67
|
+
const content = (_jsxs(_Fragment, { children: [wrappedChildren, items.length > 0 &&
|
|
54
68
|
items.map((item, index) => {
|
|
55
69
|
// Label item
|
|
56
70
|
if (item.type === 'label') {
|
|
@@ -112,6 +126,6 @@ const DropdownMenu = ({ trigger, items = [], children, contentWidth, contentAlig
|
|
|
112
126
|
'data-state': 'checked',
|
|
113
127
|
}), children: normalItem.children ? (_jsxs(_Fragment, { children: [normalItem.children, IconEnd && (_jsx(IconEnd, { className: "dndev-dropdown-menu-trailing" }))] })) : (_jsxs(_Fragment, { children: [Icon && _jsx(Icon, {}), _jsx("span", { children: normalItem.label }), IconEnd && (_jsx(IconEnd, { className: "dndev-dropdown-menu-trailing" })), normalItem.checked && (_jsx(Check, { className: "dndev-dropdown-menu-checkmark dndev-dropdown-menu-trailing" }))] })) }, index));
|
|
114
128
|
})] }));
|
|
115
|
-
return (_jsxs(DropdownMenuPrimitive, { open: open, onOpenChange: onOpenChange, children: [_jsx(DropdownMenuTriggerPrimitive, { asChild: true, children: trigger }), _jsx(DropdownMenuContentPrimitive, { align: contentAlign, className: "dndev-floating dndev-menu-content dndev-z-tooltip", style: contentWidth ? { width: contentWidth } : undefined, children: _jsx(ScrollArea, { className: "dndev-
|
|
129
|
+
return (_jsxs(DropdownMenuPrimitive, { open: open, onOpenChange: onOpenChange, children: [_jsx(DropdownMenuTriggerPrimitive, { asChild: true, children: trigger }), _jsx(DropdownMenuContentPrimitive, { align: contentAlign, className: "dndev-floating dndev-menu-content dndev-z-tooltip", style: contentWidth ? { width: contentWidth } : undefined, children: _jsx(ScrollArea, { className: "dndev-menu-scroll-area", end: true, children: content }) })] }));
|
|
116
130
|
};
|
|
117
131
|
export default DropdownMenu;
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview DualCard component
|
|
3
|
+
* @description Two-column card layout with vertical separator, responsive to single column on mobile
|
|
4
|
+
*
|
|
5
|
+
* @version 0.0.1
|
|
6
|
+
* @since 0.0.1
|
|
7
|
+
* @author AMBROISE PARK Consulting
|
|
8
|
+
*/
|
|
2
9
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
10
|
import { surfaceVariants } from '../../utils/variants';
|
|
4
|
-
import type { CardContent } from '../Card';
|
|
5
11
|
import type { IconType } from '../../types';
|
|
12
|
+
import type { CardContent } from '../Card';
|
|
13
|
+
import type { ReactNode, HTMLAttributes } from 'react';
|
|
6
14
|
import './DualCard.css';
|
|
7
15
|
export type DualCardVariant = VariantProps<typeof surfaceVariants>['variant'];
|
|
8
16
|
export interface DualCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'>, VariantProps<typeof surfaceVariants> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/DualCard/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/DualCard/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAK7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAKvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,EAAe,WAAW,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;AAE9E,MAAM,WAAW,aACf,SACE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,EACzD,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,QAAQ,0GA4Eb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
|
|
@@ -8,14 +8,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
8
8
|
* @since 0.0.1
|
|
9
9
|
* @author AMBROISE PARK Consulting
|
|
10
10
|
*/
|
|
11
|
-
import { forwardRef } from 'react';
|
|
12
11
|
import {} from 'class-variance-authority';
|
|
12
|
+
import { forwardRef } from 'react';
|
|
13
13
|
import { SURFACE_VARIANT } from '../../utils/constants';
|
|
14
14
|
import { cn, getVariantDataAttrs } from '../../utils/helpers';
|
|
15
15
|
import { surfaceVariants } from '../../utils/variants';
|
|
16
|
-
import Stack from '../Stack';
|
|
17
|
-
import Separator, { SEPARATOR_VARIANT } from '../Separator';
|
|
18
16
|
import { renderCardContent, renderCardHeader } from '../Card';
|
|
17
|
+
import Separator, { SEPARATOR_VARIANT } from '../Separator';
|
|
18
|
+
import Stack from '../Stack';
|
|
19
19
|
import './DualCard.css';
|
|
20
20
|
/**
|
|
21
21
|
* DualCard - Two-column card with vertical separator
|
|
@@ -8,10 +8,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
8
8
|
* @since 0.0.1
|
|
9
9
|
* @author AMBROISE PARK Consulting
|
|
10
10
|
*/
|
|
11
|
-
import Icon from '../Icons/Icon';
|
|
12
11
|
import { cn } from '../../utils/helpers';
|
|
13
12
|
import Button from '../Button';
|
|
14
13
|
import Card from '../Card';
|
|
14
|
+
import Icon from '../Icons/Icon';
|
|
15
15
|
import Stack from '../Stack';
|
|
16
16
|
import './FeatureFallback.css';
|
|
17
17
|
function FeatureFallback({ featureName, message, icon = '🔧', showActionButton = false, actionButtonText, className = '', helpText, }) {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* @author AMBROISE PARK Consulting
|
|
8
8
|
*/
|
|
9
9
|
import * as RadixHoverCard from '@radix-ui/react-hover-card';
|
|
10
|
-
import {
|
|
10
|
+
import type { ComponentProps } from 'react';
|
|
11
11
|
declare const HoverCardPrimitive: ({ openDelay, ...props }: RadixHoverCard.HoverCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
declare const HoverCardTrigger: import("react").ForwardRefExoticComponent<RadixHoverCard.HoverCardTriggerProps & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
13
13
|
declare const HoverCardContent: ({ className, align, sideOffset, ...props }: ComponentProps<typeof RadixHoverCard.Content>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCardPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/HoverCard/HoverCardPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"HoverCardPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/HoverCard/HoverCardPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC;AAI7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,QAAA,MAAM,kBAAkB,GAAI,yBAGzB,cAAc,CAAC,cAAc,4CAE/B,CAAC;AAEF,QAAA,MAAM,gBAAgB,oIAAyB,CAAC;AAEhD,QAAA,MAAM,gBAAgB,GAAI,4CAKvB,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,4CAS/C,CAAC;AAEF,eAAe,kBAAkB,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -9,7 +9,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
9
9
|
* @author AMBROISE PARK Consulting
|
|
10
10
|
*/
|
|
11
11
|
import * as RadixHoverCard from '@radix-ui/react-hover-card';
|
|
12
|
-
import {} from 'react';
|
|
13
12
|
import { cn } from '../../utils/helpers';
|
|
14
13
|
const HoverCardPrimitive = ({ openDelay = 0, ...props }) => (_jsx(RadixHoverCard.Root, { openDelay: openDelay, ...props }));
|
|
15
14
|
const HoverCardTrigger = RadixHoverCard.Trigger;
|
|
@@ -8,8 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
8
8
|
* @since 0.0.1
|
|
9
9
|
* @author AMBROISE PARK Consulting
|
|
10
10
|
*/
|
|
11
|
-
import { cn } from '../../utils/helpers';
|
|
12
11
|
import HoverCardPrimitive, { HoverCardTrigger, HoverCardContent, } from './HoverCardPrimitive';
|
|
12
|
+
import { cn } from '../../utils/helpers';
|
|
13
13
|
/**
|
|
14
14
|
* Accessible hover card component.
|
|
15
15
|
* Shows rich content on hover with smooth animations.
|
|
@@ -32,6 +32,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
32
32
|
* @param {InputProps} props - The props for the input
|
|
33
33
|
* @returns {JSX.Element} The rendered input
|
|
34
34
|
*/
|
|
35
|
-
declare const Input: ({ className, type, icon, iconEnd, label, value, onFocus, onBlur, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
declare const Input: ({ className, type, icon, iconEnd, label, value, onFocus, onBlur, required, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
36
36
|
export default Input;
|
|
37
37
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Input/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Input/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,gDAAgD;IAChD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,KAAK,GAAI,uFAWZ,UAAU,4CAoEZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|