@choice-ui/react 1.8.0 → 1.8.1
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/components/emoji-picker/dist/index.d.ts +1 -29
- package/dist/components/emoji-picker/dist/index.js +42 -144
- package/dist/components/icon-button/dist/index.d.ts +1 -1
- package/dist/components/icon-button/dist/index.js +0 -29
- package/dist/components/icon-button/src/tv.js +11 -1
- package/dist/components/textarea/dist/index.js +1 -3
- package/dist/components/tooltip/dist/index.d.ts +0 -2
- package/dist/components/tooltip/dist/index.js +5 -23
- package/package.json +32 -20
- package/dist/components/virtual-select/dist/index.d.ts +0 -48
|
@@ -15,24 +15,12 @@ type VirtualItem = {
|
|
|
15
15
|
emojis: EmojiData[];
|
|
16
16
|
type: "emojis";
|
|
17
17
|
};
|
|
18
|
-
interface CategoryNames {
|
|
19
|
-
activities: string;
|
|
20
|
-
animalsNature: string;
|
|
21
|
-
flags: string;
|
|
22
|
-
foodDrink: string;
|
|
23
|
-
frequentlyUsed: string;
|
|
24
|
-
objects: string;
|
|
25
|
-
smileysPeople: string;
|
|
26
|
-
symbols: string;
|
|
27
|
-
travelPlaces: string;
|
|
28
|
-
}
|
|
29
18
|
interface UseEmojiDataProps {
|
|
30
|
-
categoryNames?: CategoryNames;
|
|
31
19
|
columns: number;
|
|
32
20
|
searchQuery: string;
|
|
33
21
|
showFrequentlyUsed: boolean;
|
|
34
22
|
}
|
|
35
|
-
declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed
|
|
23
|
+
declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed }: UseEmojiDataProps): {
|
|
36
24
|
categorizedData: VirtualItem[];
|
|
37
25
|
categoryIndexMap: Map<EmojiCategory, number>;
|
|
38
26
|
searchResults: {
|
|
@@ -64,22 +52,6 @@ interface EmojiPickerProps {
|
|
|
64
52
|
showFooter?: boolean;
|
|
65
53
|
value?: EmojiData | null;
|
|
66
54
|
variant?: "default" | "dark" | "light";
|
|
67
|
-
i18n?: {
|
|
68
|
-
noEmojisFoundTitle?: string;
|
|
69
|
-
noEmojisFoundDescription?: string;
|
|
70
|
-
footerPickAnEmoji?: string;
|
|
71
|
-
categories?: {
|
|
72
|
-
frequentlyUsed: string;
|
|
73
|
-
smileysPeople: string;
|
|
74
|
-
animalsNature: string;
|
|
75
|
-
foodDrink: string;
|
|
76
|
-
travelPlaces: string;
|
|
77
|
-
activities: string;
|
|
78
|
-
objects: string;
|
|
79
|
-
symbols: string;
|
|
80
|
-
flags: string;
|
|
81
|
-
};
|
|
82
|
-
};
|
|
83
55
|
}
|
|
84
56
|
declare const EmojiPicker: React.NamedExoticComponent<EmojiPickerProps>;
|
|
85
57
|
|
|
@@ -141,7 +141,7 @@ var emojiFooterTv = tcv({
|
|
|
141
141
|
var emojiEmptyTv = tcv({
|
|
142
142
|
slots: {
|
|
143
143
|
container: "flex h-32 flex-col items-center justify-center p-4 text-center",
|
|
144
|
-
title: "text-
|
|
144
|
+
title: "text-heading-display",
|
|
145
145
|
description: "mt-2 w-32"
|
|
146
146
|
},
|
|
147
147
|
variants: {
|
|
@@ -179,20 +179,13 @@ var EmojiCategoryHeader = forwardRef(
|
|
|
179
179
|
);
|
|
180
180
|
}
|
|
181
181
|
);
|
|
182
|
-
|
|
183
|
-
hoveredEmoji,
|
|
184
|
-
selectedEmoji,
|
|
185
|
-
variant = "dark",
|
|
186
|
-
i18n = {
|
|
187
|
-
pickAnEmoji: "Pick an emoji..."
|
|
188
|
-
}
|
|
189
|
-
}) {
|
|
182
|
+
function EmojiFooter({ hoveredEmoji, selectedEmoji, variant = "dark" }) {
|
|
190
183
|
var _a, _b;
|
|
191
184
|
const tv = emojiFooterTv({ variant });
|
|
192
185
|
return /* @__PURE__ */ jsxs("div", { className: tv.footer(), children: [
|
|
193
186
|
/* @__PURE__ */ jsx("div", { className: tv.emojiPreview(), children: ((_a = hoveredEmoji || selectedEmoji) == null ? void 0 : _a.emoji) || /* @__PURE__ */ jsx("div", { className: tv.emojiPreviewEmpty() }) }),
|
|
194
187
|
/* @__PURE__ */ jsxs("div", { className: tv.emojiInfo(), children: [
|
|
195
|
-
/* @__PURE__ */ jsx("div", { className: tv.emojiName(), children: (hoveredEmoji == null ? void 0 : hoveredEmoji.name) || (selectedEmoji == null ? void 0 : selectedEmoji.name) ||
|
|
188
|
+
/* @__PURE__ */ jsx("div", { className: tv.emojiName(), children: (hoveredEmoji == null ? void 0 : hoveredEmoji.name) || (selectedEmoji == null ? void 0 : selectedEmoji.name) || "Pick an emoji..." }),
|
|
196
189
|
hoveredEmoji || selectedEmoji ? /* @__PURE__ */ jsxs("div", { className: tv.emojiCode(), children: [
|
|
197
190
|
":",
|
|
198
191
|
(_b = hoveredEmoji || selectedEmoji) == null ? void 0 : _b.nameUrl,
|
|
@@ -200,7 +193,7 @@ var EmojiFooter = memo(function EmojiFooter2({
|
|
|
200
193
|
] }) : /* @__PURE__ */ jsx(Fragment, {})
|
|
201
194
|
] })
|
|
202
195
|
] });
|
|
203
|
-
}
|
|
196
|
+
}
|
|
204
197
|
var EmojiItem = memo(function EmojiItem2(props) {
|
|
205
198
|
const { emoji, onSelect, onHover, selected = false, variant = "dark" } = props;
|
|
206
199
|
return /* @__PURE__ */ jsx(
|
|
@@ -216,17 +209,11 @@ var EmojiItem = memo(function EmojiItem2(props) {
|
|
|
216
209
|
}
|
|
217
210
|
);
|
|
218
211
|
});
|
|
219
|
-
var EmojiEmpty = memo(function EmojiEmpty2({
|
|
220
|
-
variant = "dark",
|
|
221
|
-
i18n = {
|
|
222
|
-
title: "No emoji found",
|
|
223
|
-
description: "You can search for an emoji by name or use the search bar to find it."
|
|
224
|
-
}
|
|
225
|
-
}) {
|
|
212
|
+
var EmojiEmpty = memo(function EmojiEmpty2({ variant = "dark" }) {
|
|
226
213
|
const tv = emojiEmptyTv({ variant });
|
|
227
214
|
return /* @__PURE__ */ jsxs("div", { className: tv.container(), children: [
|
|
228
|
-
/* @__PURE__ */ jsx("div", { className: tv.title(), children:
|
|
229
|
-
/* @__PURE__ */ jsx("p", { className: tv.description(), children:
|
|
215
|
+
/* @__PURE__ */ jsx("div", { className: tv.title(), children: "No emoji found" }),
|
|
216
|
+
/* @__PURE__ */ jsx("p", { className: tv.description(), children: "You can search for an emoji by name or use the search bar to find it." })
|
|
230
217
|
] });
|
|
231
218
|
});
|
|
232
219
|
var emojis = [
|
|
@@ -11740,15 +11727,15 @@ var emojis = [
|
|
|
11740
11727
|
}
|
|
11741
11728
|
];
|
|
11742
11729
|
var categories = [
|
|
11743
|
-
{ id: "frequently_used" },
|
|
11744
|
-
{ id: "smileys_people", range: [1, 460] },
|
|
11745
|
-
{ id: "animals_nature", range: [465, 591] },
|
|
11746
|
-
{ id: "food_drink", range: [592, 712] },
|
|
11747
|
-
{ id: "travel_places", range: [713, 922] },
|
|
11748
|
-
{ id: "activities", range: [923, 1001] },
|
|
11749
|
-
{ id: "objects", range: [1002, 1234] },
|
|
11750
|
-
{ id: "symbols", range: [1235, 1451] },
|
|
11751
|
-
{ id: "flags", range: [1452, 1719] }
|
|
11730
|
+
{ id: "frequently_used", name: "Frequently used" },
|
|
11731
|
+
{ id: "smileys_people", name: "Smileys & People", range: [1, 460] },
|
|
11732
|
+
{ id: "animals_nature", name: "Animals & Nature", range: [465, 591] },
|
|
11733
|
+
{ id: "food_drink", name: "Food & Drink", range: [592, 712] },
|
|
11734
|
+
{ id: "travel_places", name: "Travel & Places", range: [713, 922] },
|
|
11735
|
+
{ id: "activities", name: "Activities", range: [923, 1001] },
|
|
11736
|
+
{ id: "objects", name: "Objects", range: [1002, 1234] },
|
|
11737
|
+
{ id: "symbols", name: "Symbols", range: [1235, 1451] },
|
|
11738
|
+
{ id: "flags", name: "Flags", range: [1452, 1719] }
|
|
11752
11739
|
];
|
|
11753
11740
|
var STORAGE_KEY = "emoji-picker-frequently-used";
|
|
11754
11741
|
function getEmojiCategory(id) {
|
|
@@ -11782,34 +11769,7 @@ function saveFrequentlyUsedEmoji(emojiId) {
|
|
|
11782
11769
|
} catch {
|
|
11783
11770
|
}
|
|
11784
11771
|
}
|
|
11785
|
-
|
|
11786
|
-
frequentlyUsed: "Frequently used",
|
|
11787
|
-
smileysPeople: "Smileys & People",
|
|
11788
|
-
animalsNature: "Animals & Nature",
|
|
11789
|
-
foodDrink: "Food & Drink",
|
|
11790
|
-
travelPlaces: "Travel & Places",
|
|
11791
|
-
activities: "Activities",
|
|
11792
|
-
objects: "Objects",
|
|
11793
|
-
symbols: "Symbols",
|
|
11794
|
-
flags: "Flags"
|
|
11795
|
-
};
|
|
11796
|
-
var categoryIdToI18nKey = {
|
|
11797
|
-
frequently_used: "frequentlyUsed",
|
|
11798
|
-
smileys_people: "smileysPeople",
|
|
11799
|
-
animals_nature: "animalsNature",
|
|
11800
|
-
food_drink: "foodDrink",
|
|
11801
|
-
travel_places: "travelPlaces",
|
|
11802
|
-
activities: "activities",
|
|
11803
|
-
objects: "objects",
|
|
11804
|
-
symbols: "symbols",
|
|
11805
|
-
flags: "flags"
|
|
11806
|
-
};
|
|
11807
|
-
function useEmojiData({
|
|
11808
|
-
searchQuery,
|
|
11809
|
-
columns,
|
|
11810
|
-
showFrequentlyUsed,
|
|
11811
|
-
categoryNames = defaultCategoryNames
|
|
11812
|
-
}) {
|
|
11772
|
+
function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
|
|
11813
11773
|
const [frequentlyUsed, setFrequentlyUsed] = useState([]);
|
|
11814
11774
|
useEffect(() => {
|
|
11815
11775
|
if (showFrequentlyUsed) {
|
|
@@ -11839,7 +11799,7 @@ function useEmojiData({
|
|
|
11839
11799
|
items.push({
|
|
11840
11800
|
type: "header",
|
|
11841
11801
|
category: "frequently_used",
|
|
11842
|
-
title:
|
|
11802
|
+
title: "Frequently used"
|
|
11843
11803
|
});
|
|
11844
11804
|
for (let i = 0; i < frequentlyUsed.length; i += columns) {
|
|
11845
11805
|
items.push({
|
|
@@ -11854,11 +11814,10 @@ function useEmojiData({
|
|
|
11854
11814
|
(emoji) => emoji.id >= category.range[0] && emoji.id <= category.range[1]
|
|
11855
11815
|
);
|
|
11856
11816
|
if (categoryEmojis.length > 0) {
|
|
11857
|
-
const i18nKey = categoryIdToI18nKey[category.id];
|
|
11858
11817
|
items.push({
|
|
11859
11818
|
type: "header",
|
|
11860
11819
|
category: category.id,
|
|
11861
|
-
title:
|
|
11820
|
+
title: category.name
|
|
11862
11821
|
});
|
|
11863
11822
|
for (let i = 0; i < categoryEmojis.length; i += columns) {
|
|
11864
11823
|
items.push({
|
|
@@ -11869,7 +11828,7 @@ function useEmojiData({
|
|
|
11869
11828
|
}
|
|
11870
11829
|
});
|
|
11871
11830
|
return items;
|
|
11872
|
-
}, [searchQuery, searchResults, frequentlyUsed, columns, showFrequentlyUsed
|
|
11831
|
+
}, [searchQuery, searchResults, frequentlyUsed, columns, showFrequentlyUsed]);
|
|
11873
11832
|
const categoryIndexMap = useMemo(() => {
|
|
11874
11833
|
const map = /* @__PURE__ */ new Map();
|
|
11875
11834
|
categorizedData.forEach((item, index) => {
|
|
@@ -11925,8 +11884,6 @@ function useEmojiScroll({
|
|
|
11925
11884
|
const [currentVisibleCategory, setCurrentVisibleCategory] = useState("frequently_used");
|
|
11926
11885
|
const isScrollingToTarget = useRef(false);
|
|
11927
11886
|
const isInternalUpdate = useRef(false);
|
|
11928
|
-
const scrollingTimeoutRef = useRef(null);
|
|
11929
|
-
const internalUpdateTimeoutRef = useRef(null);
|
|
11930
11887
|
const virtualizer = useVirtualizer({
|
|
11931
11888
|
count: categorizedData.length,
|
|
11932
11889
|
getScrollElement: () => scrollRef.current,
|
|
@@ -11991,10 +11948,7 @@ function useEmojiScroll({
|
|
|
11991
11948
|
align: "start",
|
|
11992
11949
|
behavior: "auto"
|
|
11993
11950
|
});
|
|
11994
|
-
|
|
11995
|
-
clearTimeout(scrollingTimeoutRef.current);
|
|
11996
|
-
}
|
|
11997
|
-
scrollingTimeoutRef.current = setTimeout(() => {
|
|
11951
|
+
setTimeout(() => {
|
|
11998
11952
|
isScrollingToTarget.current = false;
|
|
11999
11953
|
}, 100);
|
|
12000
11954
|
}
|
|
@@ -12007,33 +11961,17 @@ function useEmojiScroll({
|
|
|
12007
11961
|
align: "center",
|
|
12008
11962
|
behavior: "auto"
|
|
12009
11963
|
});
|
|
12010
|
-
|
|
12011
|
-
clearTimeout(scrollingTimeoutRef.current);
|
|
12012
|
-
}
|
|
12013
|
-
scrollingTimeoutRef.current = setTimeout(() => {
|
|
11964
|
+
setTimeout(() => {
|
|
12014
11965
|
isScrollingToTarget.current = false;
|
|
12015
11966
|
}, 100);
|
|
12016
11967
|
}
|
|
12017
11968
|
});
|
|
12018
11969
|
const markInternalUpdate = useEventCallback(() => {
|
|
12019
11970
|
isInternalUpdate.current = true;
|
|
12020
|
-
|
|
12021
|
-
clearTimeout(internalUpdateTimeoutRef.current);
|
|
12022
|
-
}
|
|
12023
|
-
internalUpdateTimeoutRef.current = setTimeout(() => {
|
|
11971
|
+
setTimeout(() => {
|
|
12024
11972
|
isInternalUpdate.current = false;
|
|
12025
11973
|
}, 50);
|
|
12026
11974
|
});
|
|
12027
|
-
useEffect(() => {
|
|
12028
|
-
return () => {
|
|
12029
|
-
if (scrollingTimeoutRef.current) {
|
|
12030
|
-
clearTimeout(scrollingTimeoutRef.current);
|
|
12031
|
-
}
|
|
12032
|
-
if (internalUpdateTimeoutRef.current) {
|
|
12033
|
-
clearTimeout(internalUpdateTimeoutRef.current);
|
|
12034
|
-
}
|
|
12035
|
-
};
|
|
12036
|
-
}, []);
|
|
12037
11975
|
useEffect(() => {
|
|
12038
11976
|
if (value && !searchQuery.trim() && !isInternalUpdate.current) {
|
|
12039
11977
|
scrollToEmoji(value);
|
|
@@ -12058,6 +11996,17 @@ function useEmojiScroll({
|
|
|
12058
11996
|
PADDING
|
|
12059
11997
|
};
|
|
12060
11998
|
}
|
|
11999
|
+
var categoriesWithIcons = [
|
|
12000
|
+
{ id: "frequently_used", name: "Frequently used", icon: /* @__PURE__ */ jsx(EmojiFrequentlyUsed, {}) },
|
|
12001
|
+
{ id: "smileys_people", name: "Smileys & People", icon: /* @__PURE__ */ jsx(EmojiSmileysPeople, {}) },
|
|
12002
|
+
{ id: "animals_nature", name: "Animals & Nature", icon: /* @__PURE__ */ jsx(EmojiAnimalsNature, {}) },
|
|
12003
|
+
{ id: "food_drink", name: "Food & Drink", icon: /* @__PURE__ */ jsx(EmojiFoodDrink, {}) },
|
|
12004
|
+
{ id: "travel_places", name: "Travel & Places", icon: /* @__PURE__ */ jsx(EmojiTravelPlaces, {}) },
|
|
12005
|
+
{ id: "activities", name: "Activities", icon: /* @__PURE__ */ jsx(EmojiActivity, {}) },
|
|
12006
|
+
{ id: "objects", name: "Objects", icon: /* @__PURE__ */ jsx(EmojiObjects, {}) },
|
|
12007
|
+
{ id: "symbols", name: "Symbols", icon: /* @__PURE__ */ jsx(EmojiSymbols, {}) },
|
|
12008
|
+
{ id: "flags", name: "Flags", icon: /* @__PURE__ */ jsx(EmojiFlags, {}) }
|
|
12009
|
+
];
|
|
12061
12010
|
var EmojiPicker = memo(function EmojiPicker2({
|
|
12062
12011
|
value,
|
|
12063
12012
|
onChange,
|
|
@@ -12070,49 +12019,11 @@ var EmojiPicker = memo(function EmojiPicker2({
|
|
|
12070
12019
|
showSearch = true,
|
|
12071
12020
|
showFooter = true,
|
|
12072
12021
|
children,
|
|
12073
|
-
variant = "dark"
|
|
12074
|
-
i18n = {
|
|
12075
|
-
noEmojisFoundTitle: "No emoji found",
|
|
12076
|
-
noEmojisFoundDescription: "You can search for an emoji by name or use the search bar to find it.",
|
|
12077
|
-
footerPickAnEmoji: "Pick an emoji...",
|
|
12078
|
-
categories: {
|
|
12079
|
-
frequentlyUsed: "Frequently used",
|
|
12080
|
-
smileysPeople: "Smileys & People",
|
|
12081
|
-
animalsNature: "Animals & Nature",
|
|
12082
|
-
foodDrink: "Food & Drink",
|
|
12083
|
-
travelPlaces: "Travel & Places",
|
|
12084
|
-
activities: "Activities",
|
|
12085
|
-
objects: "Objects",
|
|
12086
|
-
symbols: "Symbols",
|
|
12087
|
-
flags: "Flags"
|
|
12088
|
-
}
|
|
12089
|
-
}
|
|
12022
|
+
variant = "dark"
|
|
12090
12023
|
}) {
|
|
12091
12024
|
const [searchQuery, setSearchQuery] = useState("");
|
|
12092
12025
|
const [hoveredEmoji, setHoveredEmoji] = useState(null);
|
|
12093
|
-
const safeColumns = Math.max(1, columns);
|
|
12094
12026
|
const tv = emojiTv({ variant });
|
|
12095
|
-
const categoriesWithIcons = useMemo(
|
|
12096
|
-
() => {
|
|
12097
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
12098
|
-
return [
|
|
12099
|
-
{
|
|
12100
|
-
id: "frequently_used",
|
|
12101
|
-
name: (_a = i18n.categories) == null ? void 0 : _a.frequentlyUsed,
|
|
12102
|
-
icon: /* @__PURE__ */ jsx(EmojiFrequentlyUsed, {})
|
|
12103
|
-
},
|
|
12104
|
-
{ id: "smileys_people", name: (_b = i18n.categories) == null ? void 0 : _b.smileysPeople, icon: /* @__PURE__ */ jsx(EmojiSmileysPeople, {}) },
|
|
12105
|
-
{ id: "animals_nature", name: (_c = i18n.categories) == null ? void 0 : _c.animalsNature, icon: /* @__PURE__ */ jsx(EmojiAnimalsNature, {}) },
|
|
12106
|
-
{ id: "food_drink", name: (_d = i18n.categories) == null ? void 0 : _d.foodDrink, icon: /* @__PURE__ */ jsx(EmojiFoodDrink, {}) },
|
|
12107
|
-
{ id: "travel_places", name: (_e = i18n.categories) == null ? void 0 : _e.travelPlaces, icon: /* @__PURE__ */ jsx(EmojiTravelPlaces, {}) },
|
|
12108
|
-
{ id: "activities", name: (_f = i18n.categories) == null ? void 0 : _f.activities, icon: /* @__PURE__ */ jsx(EmojiActivity, {}) },
|
|
12109
|
-
{ id: "objects", name: (_g = i18n.categories) == null ? void 0 : _g.objects, icon: /* @__PURE__ */ jsx(EmojiObjects, {}) },
|
|
12110
|
-
{ id: "symbols", name: (_h = i18n.categories) == null ? void 0 : _h.symbols, icon: /* @__PURE__ */ jsx(EmojiSymbols, {}) },
|
|
12111
|
-
{ id: "flags", name: (_i = i18n.categories) == null ? void 0 : _i.flags, icon: /* @__PURE__ */ jsx(EmojiFlags, {}) }
|
|
12112
|
-
];
|
|
12113
|
-
},
|
|
12114
|
-
[i18n.categories]
|
|
12115
|
-
);
|
|
12116
12027
|
const {
|
|
12117
12028
|
categorizedData,
|
|
12118
12029
|
categoryIndexMap,
|
|
@@ -12120,9 +12031,8 @@ var EmojiPicker = memo(function EmojiPicker2({
|
|
|
12120
12031
|
findEmojiPosition
|
|
12121
12032
|
} = useEmojiData({
|
|
12122
12033
|
searchQuery,
|
|
12123
|
-
columns
|
|
12124
|
-
showFrequentlyUsed
|
|
12125
|
-
categoryNames: i18n.categories
|
|
12034
|
+
columns,
|
|
12035
|
+
showFrequentlyUsed
|
|
12126
12036
|
});
|
|
12127
12037
|
const {
|
|
12128
12038
|
scrollRef,
|
|
@@ -12138,7 +12048,7 @@ var EmojiPicker = memo(function EmojiPicker2({
|
|
|
12138
12048
|
findEmojiPosition,
|
|
12139
12049
|
searchQuery,
|
|
12140
12050
|
value,
|
|
12141
|
-
columns
|
|
12051
|
+
columns
|
|
12142
12052
|
});
|
|
12143
12053
|
const availableCategories = useMemo(() => {
|
|
12144
12054
|
return categoriesWithIcons.filter((category) => {
|
|
@@ -12147,7 +12057,7 @@ var EmojiPicker = memo(function EmojiPicker2({
|
|
|
12147
12057
|
}
|
|
12148
12058
|
return true;
|
|
12149
12059
|
});
|
|
12150
|
-
}, [
|
|
12060
|
+
}, [showFrequentlyUsed]);
|
|
12151
12061
|
const handleEmojiSelect = useEventCallback((emoji) => {
|
|
12152
12062
|
markInternalUpdate();
|
|
12153
12063
|
addToFrequentlyUsed(emoji.id);
|
|
@@ -12163,7 +12073,7 @@ var EmojiPicker = memo(function EmojiPicker2({
|
|
|
12163
12073
|
const rootStyle = {
|
|
12164
12074
|
"--emoji-height": `${height}px`,
|
|
12165
12075
|
"--emoji-padding": `${PADDING2}px`,
|
|
12166
|
-
"--emoji-columns": `${
|
|
12076
|
+
"--emoji-columns": `${columns}`
|
|
12167
12077
|
};
|
|
12168
12078
|
return /* @__PURE__ */ jsxs(
|
|
12169
12079
|
"div",
|
|
@@ -12266,16 +12176,7 @@ var EmojiPicker = memo(function EmojiPicker2({
|
|
|
12266
12176
|
},
|
|
12267
12177
|
virtualItem.key
|
|
12268
12178
|
);
|
|
12269
|
-
}) : /* @__PURE__ */ jsx(
|
|
12270
|
-
EmojiEmpty,
|
|
12271
|
-
{
|
|
12272
|
-
variant,
|
|
12273
|
-
i18n: {
|
|
12274
|
-
title: i18n.noEmojisFoundTitle,
|
|
12275
|
-
description: i18n.noEmojisFoundDescription
|
|
12276
|
-
}
|
|
12277
|
-
}
|
|
12278
|
-
)
|
|
12179
|
+
}) : /* @__PURE__ */ jsx(EmojiEmpty, { variant })
|
|
12279
12180
|
}
|
|
12280
12181
|
)
|
|
12281
12182
|
}
|
|
@@ -12287,10 +12188,7 @@ var EmojiPicker = memo(function EmojiPicker2({
|
|
|
12287
12188
|
{
|
|
12288
12189
|
hoveredEmoji,
|
|
12289
12190
|
selectedEmoji: value || null,
|
|
12290
|
-
variant
|
|
12291
|
-
i18n: {
|
|
12292
|
-
pickAnEmoji: i18n.footerPickAnEmoji
|
|
12293
|
-
}
|
|
12191
|
+
variant
|
|
12294
12192
|
}
|
|
12295
12193
|
),
|
|
12296
12194
|
children
|
|
@@ -14,7 +14,7 @@ interface IconButtonProps extends Omit<HTMLProps<HTMLElement>, "size" | "as"> {
|
|
|
14
14
|
readOnly?: boolean;
|
|
15
15
|
size?: "default" | "large" | "reset";
|
|
16
16
|
tooltip?: TooltipProps;
|
|
17
|
-
variant?: "default" | "secondary" | "solid" | "highlight" | "ghost" | "dark" | "
|
|
17
|
+
variant?: "default" | "secondary" | "solid" | "highlight" | "ghost" | "dark" | "reset";
|
|
18
18
|
}
|
|
19
19
|
declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
20
20
|
|
|
@@ -28,12 +28,6 @@ var iconButtonTv = tcv({
|
|
|
28
28
|
highlight: {},
|
|
29
29
|
ghost: {},
|
|
30
30
|
dark: { button: "text-white" },
|
|
31
|
-
submit: {
|
|
32
|
-
button: [
|
|
33
|
-
"bg-[var(--theme-submit-btn-bg)] text-[var(--theme-submit-btn-text)]",
|
|
34
|
-
"focus-visible:border-transparent"
|
|
35
|
-
]
|
|
36
|
-
},
|
|
37
31
|
reset: {}
|
|
38
32
|
},
|
|
39
33
|
active: {
|
|
@@ -147,29 +141,6 @@ var iconButtonTv = tcv({
|
|
|
147
141
|
variant: "dark",
|
|
148
142
|
disabled: true,
|
|
149
143
|
class: { button: "text-gray-500" }
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
variant: "submit",
|
|
153
|
-
class: {
|
|
154
|
-
button: "focus-visible:shadow-focus"
|
|
155
|
-
}
|
|
156
|
-
},
|
|
157
|
-
{
|
|
158
|
-
variant: "submit",
|
|
159
|
-
focused: true,
|
|
160
|
-
class: {
|
|
161
|
-
button: ["shadow-focus", "border-transparent"]
|
|
162
|
-
}
|
|
163
|
-
},
|
|
164
|
-
{
|
|
165
|
-
variant: "submit",
|
|
166
|
-
loading: true,
|
|
167
|
-
class: { button: "opacity-70" }
|
|
168
|
-
},
|
|
169
|
-
{
|
|
170
|
-
variant: "submit",
|
|
171
|
-
disabled: true,
|
|
172
|
-
class: { button: "opacity-50" }
|
|
173
144
|
}
|
|
174
145
|
],
|
|
175
146
|
defaultVariants: {
|
|
@@ -145,8 +145,18 @@ const iconButtonTv = tcv({
|
|
|
145
145
|
},
|
|
146
146
|
{
|
|
147
147
|
variant: "submit",
|
|
148
|
+
active: false,
|
|
149
|
+
disabled: false,
|
|
150
|
+
class: {
|
|
151
|
+
button: ["focus-visible:shadow-focus", "hover:opacity-70", "active:opacity-70"]
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
variant: "submit",
|
|
156
|
+
active: true,
|
|
157
|
+
disabled: false,
|
|
148
158
|
class: {
|
|
149
|
-
button: "
|
|
159
|
+
button: "opacity-70"
|
|
150
160
|
}
|
|
151
161
|
},
|
|
152
162
|
{
|
|
@@ -10,7 +10,6 @@ interface TooltipProps {
|
|
|
10
10
|
className?: string;
|
|
11
11
|
content?: React.ReactNode;
|
|
12
12
|
disabled?: boolean;
|
|
13
|
-
interactive?: boolean;
|
|
14
13
|
offset?: number;
|
|
15
14
|
onOpenChange?: (open: boolean) => void;
|
|
16
15
|
open?: boolean;
|
|
@@ -24,7 +23,6 @@ interface TooltipProps {
|
|
|
24
23
|
withArrow?: boolean;
|
|
25
24
|
}
|
|
26
25
|
interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
|
|
27
|
-
interactive?: boolean;
|
|
28
26
|
portalId?: string;
|
|
29
27
|
variant?: "default" | "light";
|
|
30
28
|
withArrow?: boolean;
|
|
@@ -128,15 +128,7 @@ var TooltipArrow = forwardRef(function TooltipArrow2({ className, variant = "def
|
|
|
128
128
|
});
|
|
129
129
|
var TooltipContent = forwardRef(
|
|
130
130
|
function TooltipContent2(props, propRef) {
|
|
131
|
-
const {
|
|
132
|
-
className,
|
|
133
|
-
withArrow = true,
|
|
134
|
-
variant = "default",
|
|
135
|
-
children,
|
|
136
|
-
portalId,
|
|
137
|
-
interactive = true,
|
|
138
|
-
...rest
|
|
139
|
-
} = props;
|
|
131
|
+
const { className, withArrow = true, variant = "default", children, portalId, ...rest } = props;
|
|
140
132
|
const state = useTooltipState();
|
|
141
133
|
const ref = useMergeRefs([state.refs.setFloating, propRef]);
|
|
142
134
|
const { isInstantPhase, currentId } = useDelayGroup(state.context, {
|
|
@@ -165,27 +157,19 @@ var TooltipContent = forwardRef(
|
|
|
165
157
|
});
|
|
166
158
|
const tv = useMemo(() => tooltipContentVariants({ variant }), [variant]);
|
|
167
159
|
if (state.disabled || !isMounted) return null;
|
|
168
|
-
const floatingProps = state.getFloatingProps(rest);
|
|
169
160
|
return /* @__PURE__ */ jsx(FloatingPortal, { id: portalId, children: /* @__PURE__ */ jsx(
|
|
170
161
|
"div",
|
|
171
162
|
{
|
|
172
163
|
ref,
|
|
173
|
-
style:
|
|
174
|
-
|
|
175
|
-
pointerEvents: interactive ? void 0 : "none"
|
|
176
|
-
},
|
|
177
|
-
...floatingProps,
|
|
164
|
+
style: state.floatingStyles,
|
|
165
|
+
...state.getFloatingProps(rest),
|
|
178
166
|
className: "z-tooltip",
|
|
179
167
|
children: /* @__PURE__ */ jsxs(
|
|
180
168
|
"div",
|
|
181
169
|
{
|
|
182
170
|
className: tcx(tv.root({ className })),
|
|
183
171
|
"data-state": state.open ? "open" : "closed",
|
|
184
|
-
style:
|
|
185
|
-
...styles,
|
|
186
|
-
pointerEvents: interactive ? void 0 : "none",
|
|
187
|
-
cursor: interactive ? void 0 : "default"
|
|
188
|
-
},
|
|
172
|
+
style: styles,
|
|
189
173
|
children: [
|
|
190
174
|
children,
|
|
191
175
|
withArrow && /* @__PURE__ */ jsx(TooltipArrow, { variant })
|
|
@@ -288,8 +272,7 @@ function TooltipRoot(props) {
|
|
|
288
272
|
withArrow = true,
|
|
289
273
|
variant = "default",
|
|
290
274
|
offset: offset2 = 8,
|
|
291
|
-
portalId = PORTAL_ROOT_ID
|
|
292
|
-
interactive = true
|
|
275
|
+
portalId = PORTAL_ROOT_ID
|
|
293
276
|
} = props;
|
|
294
277
|
const tooltip = useTooltip({
|
|
295
278
|
placement,
|
|
@@ -308,7 +291,6 @@ function TooltipRoot(props) {
|
|
|
308
291
|
variant,
|
|
309
292
|
portalId,
|
|
310
293
|
className,
|
|
311
|
-
interactive,
|
|
312
294
|
children: [
|
|
313
295
|
content,
|
|
314
296
|
shortcut && /* @__PURE__ */ jsx(
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@choice-ui/react",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.1",
|
|
4
4
|
"description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"source": "./app/index.ts",
|
|
8
8
|
"main": "./dist/index.js",
|
|
9
|
-
"types": "./
|
|
9
|
+
"types": "./app/index.ts",
|
|
10
10
|
"files": [
|
|
11
11
|
"dist",
|
|
12
12
|
"README.md",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
],
|
|
15
15
|
"exports": {
|
|
16
16
|
".": {
|
|
17
|
-
"types": "./
|
|
17
|
+
"types": "./app/index.ts",
|
|
18
18
|
"import": "./dist/index.js"
|
|
19
19
|
},
|
|
20
20
|
"./styles/*": "./dist/styles/*",
|
|
@@ -22,10 +22,36 @@
|
|
|
22
22
|
"./llms.txt": "./dist/llms.txt"
|
|
23
23
|
},
|
|
24
24
|
"publishConfig": {
|
|
25
|
-
"access": "public"
|
|
25
|
+
"access": "public",
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
27
|
+
"main": "./dist/index.js",
|
|
28
|
+
"exports": {
|
|
29
|
+
".": {
|
|
30
|
+
"types": "./dist/index.d.ts",
|
|
31
|
+
"import": "./dist/index.js"
|
|
32
|
+
},
|
|
33
|
+
"./styles/*": "./dist/styles/*",
|
|
34
|
+
"./tailwind.css": "./dist/tailwind.css",
|
|
35
|
+
"./llms.txt": "./dist/llms.txt"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
"scripts": {
|
|
39
|
+
"build": "pnpm run clean && pnpm --filter @choice-ui/shared build && vite build",
|
|
40
|
+
"build:watch": "vite build --watch",
|
|
41
|
+
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
|
|
42
|
+
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
|
|
43
|
+
"lint:types": "tsc",
|
|
44
|
+
"clean": "rimraf dist",
|
|
45
|
+
"prepublishOnly": "pnpm run build",
|
|
46
|
+
"plop": "pnpm dlx plop",
|
|
47
|
+
"test": "jest",
|
|
48
|
+
"test:watch": "jest --watch",
|
|
49
|
+
"test:coverage": "jest --coverage",
|
|
50
|
+
"madge": "npx madge --circular --extensions ts app/"
|
|
26
51
|
},
|
|
27
52
|
"dependencies": {
|
|
28
53
|
"@choiceform/icons-react": "^1.3.8",
|
|
54
|
+
"@choice-ui/design-tokens": "workspace:*",
|
|
29
55
|
"classnames": "^2.5.1",
|
|
30
56
|
"tailwind-merge": "^3.3.1",
|
|
31
57
|
"tailwind-variants": "^3.1.0",
|
|
@@ -59,8 +85,7 @@
|
|
|
59
85
|
"remark-breaks": "^4.0.0",
|
|
60
86
|
"remark-math": "^6.0.0",
|
|
61
87
|
"harden-react-markdown": "^1.0.4",
|
|
62
|
-
"shiki": "^3.9.2"
|
|
63
|
-
"@choice-ui/design-tokens": "0.2.13"
|
|
88
|
+
"shiki": "^3.9.2"
|
|
64
89
|
},
|
|
65
90
|
"devDependencies": {
|
|
66
91
|
"@babel/core": "^7.27.1",
|
|
@@ -111,18 +136,5 @@
|
|
|
111
136
|
"peerDependencies": {
|
|
112
137
|
"react": ">=18.0.0",
|
|
113
138
|
"react-dom": ">=18.0.0"
|
|
114
|
-
},
|
|
115
|
-
"scripts": {
|
|
116
|
-
"build": "pnpm run clean && pnpm --filter @choice-ui/shared build && vite build",
|
|
117
|
-
"build:watch": "vite build --watch",
|
|
118
|
-
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
|
|
119
|
-
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
|
|
120
|
-
"lint:types": "tsc",
|
|
121
|
-
"clean": "rimraf dist",
|
|
122
|
-
"plop": "pnpm dlx plop",
|
|
123
|
-
"test": "jest",
|
|
124
|
-
"test:watch": "jest --watch",
|
|
125
|
-
"test:coverage": "jest --coverage",
|
|
126
|
-
"madge": "npx madge --circular --extensions ts app/"
|
|
127
139
|
}
|
|
128
|
-
}
|
|
140
|
+
}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuSearch, MenuTrigger, MenuValue } from '../../menus/src';
|
|
2
|
-
import { FloatingFocusManagerProps } from '@floating-ui/react';
|
|
3
|
-
import { default as React } from 'react';
|
|
4
|
-
interface VirtualSelectOption<T = unknown> {
|
|
5
|
-
value: string;
|
|
6
|
-
label: string;
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
data?: T;
|
|
9
|
-
}
|
|
10
|
-
interface VirtualSelectProps<T = unknown> {
|
|
11
|
-
className?: string;
|
|
12
|
-
closeOnEscape?: boolean;
|
|
13
|
-
disabled?: boolean;
|
|
14
|
-
emptyText?: string;
|
|
15
|
-
focusManagerProps?: Partial<FloatingFocusManagerProps>;
|
|
16
|
-
matchTriggerWidth?: boolean;
|
|
17
|
-
maxHeight?: number;
|
|
18
|
-
onChange?: (value: string) => void;
|
|
19
|
-
onOpenChange?: (open: boolean) => void;
|
|
20
|
-
open?: boolean;
|
|
21
|
-
options: VirtualSelectOption<T>[];
|
|
22
|
-
overscan?: number;
|
|
23
|
-
placeholder?: string;
|
|
24
|
-
placement?: "bottom-start" | "bottom-end";
|
|
25
|
-
portalId?: string;
|
|
26
|
-
readOnly?: boolean;
|
|
27
|
-
renderOption?: (option: VirtualSelectOption<T>, isSelected: boolean) => React.ReactNode;
|
|
28
|
-
renderValue?: (option: VirtualSelectOption<T> | null) => React.ReactNode;
|
|
29
|
-
root?: HTMLElement | null;
|
|
30
|
-
searchPlaceholder?: string;
|
|
31
|
-
size?: "default" | "large";
|
|
32
|
-
value?: string | null;
|
|
33
|
-
variant?: "default" | "light" | "reset";
|
|
34
|
-
}
|
|
35
|
-
interface VirtualSelectComponentType {
|
|
36
|
-
<T = unknown>(props: VirtualSelectProps<T>): React.ReactElement | null;
|
|
37
|
-
displayName?: string;
|
|
38
|
-
Content: typeof MenuContextContent;
|
|
39
|
-
Divider: typeof MenuDivider;
|
|
40
|
-
Empty: typeof MenuEmpty;
|
|
41
|
-
Item: typeof MenuContextItem;
|
|
42
|
-
Search: typeof MenuSearch;
|
|
43
|
-
Trigger: typeof MenuTrigger;
|
|
44
|
-
Value: typeof MenuValue;
|
|
45
|
-
}
|
|
46
|
-
declare const VirtualSelect: VirtualSelectComponentType;
|
|
47
|
-
|
|
48
|
-
export { VirtualSelect, type VirtualSelectOption, type VirtualSelectProps };
|