@@ -14,6 +14,7 @@ export type SelectionItem<T> = {
1414 disabledReason ?: string ;
1515 id ?: string ;
1616 isCustom ?: boolean ;
17+ isDivider ?: boolean ;
1718} ;
1819
1920type SelectionProps < T > = {
@@ -173,77 +174,99 @@ export function Selection<T>({ items, initialValue, onSelect, onClose }: Selecti
173174 heightCollapseRequired || minimalistMode ? "p-0 max-h-[100px]" : "p-2 max-h-[200px]" ,
174175 ) }
175176 >
176- { items ?. map ( ( item , idx ) => (
177- < div
178- key = { `${ item . title } -${ item . subtitle ?? "" } -${ item . description ?? "" } ` }
179- className = { cn (
180- "prompt-selection-item w-full flex flex-col rounded-lg" ,
181- item . disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer" ,
182- idx === selectedIdx && ! item . disabled && "bg-gray-100 dark:!bg-default-200" ,
183- heightCollapseRequired || minimalistMode ? "px-2 py-1" : "p-2" ,
184- ) }
185- role = "button"
186- tabIndex = { item . disabled ? - 1 : 0 }
187- onClick = { ( ) => {
188- if ( item . disabled ) return ;
189- googleAnalytics . fireEvent ( user ?. id , `select_${ normalizeName ( item . title ) } ` , { } ) ;
190- onSelect ?.( item ) ;
191- } }
192- onKeyDown = { ( e ) => {
193- if ( e . key === "Enter" || e . key === " " ) {
194- if ( item . disabled ) return ;
195- googleAnalytics . fireEvent ( user ?. id , `select_${ normalizeName ( item . title ) } ` , { } ) ;
196- onSelect ?.( item ) ;
197- }
198- } }
199- onMouseEnter = { ( ) => {
200- if ( ! isKeyboardNavigation && ! item . disabled ) {
201- setSelectedIdx ( idx ) ;
202- }
203- } }
204- >
177+ { items ?. map ( ( item , idx ) => {
178+ if ( item . isDivider ) {
179+ return (
180+ < div key = { `divider-${ idx } ` } className = "my-1 px-1" >
181+ < div className = "border-t-1 !border-gray-400 dark:!border-default-500" />
182+ </ div >
183+ ) ;
184+ }
185+
186+ return (
205187 < div
188+ key = { `${ item . title } -${ item . subtitle ?? "" } -${ item . description ?? "" } ` }
206189 className = { cn (
207- "font-semibold flex items-center gap-2" ,
208- heightCollapseRequired || minimalistMode ? "text-[0.65rem]" : "text-xs" ,
190+ "prompt-selection-item w-full flex flex-col rounded-lg" ,
191+ item . disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer" ,
192+ idx === selectedIdx && ! item . disabled && "bg-gray-100 dark:!bg-default-200" ,
193+ heightCollapseRequired || minimalistMode ? "px-2 py-1" : "p-2" ,
209194 ) }
195+ role = "button"
196+ tabIndex = { item . disabled ? - 1 : 0 }
197+ onClick = { ( ) => {
198+ if ( item . disabled ) return ;
199+ googleAnalytics . fireEvent ( user ?. id , `select_${ normalizeName ( item . title ) } ` , { } ) ;
200+ onSelect ?.( item ) ;
201+ } }
202+ onKeyDown = { ( e ) => {
203+ if ( e . key === "Enter" || e . key === " " ) {
204+ if ( item . disabled ) return ;
205+ googleAnalytics . fireEvent ( user ?. id , `select_${ normalizeName ( item . title ) } ` , { } ) ;
206+ onSelect ?.( item ) ;
207+ }
208+ } }
209+ onMouseEnter = { ( ) => {
210+ if ( ! isKeyboardNavigation && ! item . disabled ) {
211+ setSelectedIdx ( idx ) ;
212+ }
213+ } }
210214 >
211- < span > { item . title } </ span >
212- { item . disabled && (
213- < svg
214- xmlns = "http://www.w3.org/2000/svg"
215- viewBox = "0 0 24 24"
216- fill = "currentColor"
217- className = "w-3 h-3 text-gray-400"
218- >
219- < path
220- fillRule = "evenodd"
221- d = "M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z"
222- clipRule = "evenodd"
223- />
224- </ svg >
225- ) }
226- { item . subtitle && (
227- < span
228- className = { cn (
229- "text-gray-500 font-normal" ,
230- heightCollapseRequired || minimalistMode ? "text-[0.55rem]" : "text-[0.6rem]" ,
231- ) }
232- >
233- { item . subtitle }
234- </ span >
235- ) }
236- </ div >
237- { ( item . description || item . disabledReason ) && (
238215 < div
239- className = "text-gray-500 text-nowrap whitespace-nowrap text-ellipsis overflow-hidden"
240- style = { { fontSize : heightCollapseRequired || minimalistMode ? "0.5rem" : "0.65rem" } }
216+ className = { cn (
217+ "font-semibold flex items-center gap-2" ,
218+ heightCollapseRequired || minimalistMode ? "text-[0.65rem]" : "text-xs" ,
219+ ) }
241220 >
242- { item . disabledReason || item . description }
221+ < span > { item . title } </ span >
222+ { item . disabled && (
223+ < svg
224+ xmlns = "http://www.w3.org/2000/svg"
225+ viewBox = "0 0 24 24"
226+ fill = "currentColor"
227+ className = "w-3 h-3 text-gray-400"
228+ >
229+ < path
230+ fillRule = "evenodd"
231+ d = "M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z"
232+ clipRule = "evenodd"
233+ />
234+ </ svg >
235+ ) }
236+ { item . subtitle && (
237+ < span
238+ className = { cn (
239+ "text-gray-500 font-normal" ,
240+ heightCollapseRequired || minimalistMode ? "text-[0.55rem]" : "text-[0.6rem]" ,
241+ ) }
242+ >
243+ { ( ( ) => {
244+ const CUSTOM_SUFFIX = " (Custom)" ;
245+ if ( item . subtitle . endsWith ( CUSTOM_SUFFIX ) ) {
246+ const main = item . subtitle . slice ( 0 , - CUSTOM_SUFFIX . length ) ;
247+ return (
248+ < >
249+ < span > { main } </ span >
250+ < span className = "underline ml-1" > { CUSTOM_SUFFIX . trim ( ) } </ span >
251+ </ >
252+ ) ;
253+ }
254+ return < > { item . subtitle } </ > ;
255+ } ) ( ) }
256+ </ span >
257+ ) }
243258 </ div >
244- ) }
245- </ div >
246- ) ) }
259+ { ( item . description || item . disabledReason ) && (
260+ < div
261+ className = "text-gray-500 text-nowrap whitespace-nowrap text-ellipsis overflow-hidden"
262+ style = { { fontSize : heightCollapseRequired || minimalistMode ? "0.5rem" : "0.65rem" } }
263+ >
264+ { item . disabledReason || item . description }
265+ </ div >
266+ ) }
267+ </ div >
268+ ) ;
269+ } ) }
247270 </ div >
248271 ) ;
249272}
0 commit comments