@firecms/ui 3.0.0-tw4.2 → 3.0.0-tw4.3
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/index.es.js +3 -3
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +3 -3
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
- package/src/components/MultiSelect.tsx +62 -59
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@firecms/ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "3.0.0-tw4.
|
|
4
|
+
"version": "3.0.0-tw4.3",
|
|
5
5
|
"description": "Awesome Firebase/Firestore-based headless open-source CMS",
|
|
6
6
|
"funding": {
|
|
7
7
|
"url": "https://github.com/sponsors/firecmsco"
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
"index.css",
|
|
116
116
|
"tailwind.config.js"
|
|
117
117
|
],
|
|
118
|
-
"gitHead": "
|
|
118
|
+
"gitHead": "cd0162fc6759a7e55df77471c3433d89894ce2a1",
|
|
119
119
|
"publishConfig": {
|
|
120
120
|
"access": "public"
|
|
121
121
|
}
|
|
@@ -264,73 +264,75 @@ export const MultiSelect = React.forwardRef<
|
|
|
264
264
|
/>}
|
|
265
265
|
<div className={cls("px-2 h-full flex items-center")}>
|
|
266
266
|
<KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
|
|
267
|
-
|
|
267
|
+
className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
|
|
268
268
|
</div>
|
|
269
269
|
</div>
|
|
270
270
|
</div>
|
|
271
271
|
) : (
|
|
272
272
|
<div className="flex items-center justify-between w-full mx-auto">
|
|
273
273
|
<span className="text-sm">
|
|
274
|
-
|
|
274
|
+
{placeholder}
|
|
275
275
|
</span>
|
|
276
276
|
<div className={cls("px-2 h-full flex items-center")}>
|
|
277
277
|
<KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
|
|
278
|
-
|
|
278
|
+
className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
|
|
279
279
|
</div>
|
|
280
280
|
</div>
|
|
281
281
|
)}
|
|
282
282
|
</button>
|
|
283
283
|
</PopoverPrimitive.Trigger>
|
|
284
|
-
<PopoverPrimitive.
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
<
|
|
292
|
-
<
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
<CommandPrimitive.
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
284
|
+
<PopoverPrimitive.Portal>
|
|
285
|
+
<PopoverPrimitive.Content
|
|
286
|
+
className={cls("z-50 overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin)}
|
|
287
|
+
align="start"
|
|
288
|
+
sideOffset={8}
|
|
289
|
+
onEscapeKeyDown={() => onPopoverOpenChange(false)}
|
|
290
|
+
>
|
|
291
|
+
<CommandPrimitive>
|
|
292
|
+
<div className={"flex flex-row items-center"}>
|
|
293
|
+
<CommandPrimitive.Input
|
|
294
|
+
className={cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow text-surface-accent-900 dark:text-white")}
|
|
295
|
+
placeholder="Search..."
|
|
296
|
+
onKeyDown={handleInputKeyDown}
|
|
297
|
+
/>
|
|
298
|
+
{selectedValues.length > 0 && (
|
|
299
|
+
<div
|
|
300
|
+
onClick={handleClear}
|
|
301
|
+
className="text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark">
|
|
302
|
+
Clear
|
|
303
|
+
</div>
|
|
304
|
+
)}
|
|
305
|
+
</div>
|
|
306
|
+
<Separator orientation={"horizontal"} className={"my-0"} />
|
|
307
|
+
<CommandPrimitive.List>
|
|
308
|
+
<CommandPrimitive.Empty className={"px-4 py-2"}>
|
|
309
|
+
No results found.
|
|
310
|
+
</CommandPrimitive.Empty>
|
|
311
|
+
<CommandPrimitive.Group>
|
|
312
|
+
{includeSelectAll && <CommandPrimitive.Item
|
|
313
|
+
key="all"
|
|
314
|
+
onSelect={toggleAll}
|
|
315
|
+
className={
|
|
316
|
+
cls(
|
|
317
|
+
"flex flex-row items-center gap-1.5",
|
|
318
|
+
"cursor-pointer",
|
|
319
|
+
"m-1",
|
|
320
|
+
"ring-offset-transparent",
|
|
321
|
+
"p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2",
|
|
322
|
+
"aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
|
|
323
|
+
"cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"
|
|
324
|
+
)
|
|
325
|
+
}
|
|
326
|
+
>
|
|
327
|
+
<InnerCheckBox checked={selectedValues.length === allValues.length} />
|
|
328
|
+
<span className={"text-sm text-text-secondary dark:text-text-secondary-dark"}>(Select All)</span>
|
|
329
|
+
</CommandPrimitive.Item>}
|
|
330
|
+
{children}
|
|
331
|
+
</CommandPrimitive.Group>
|
|
332
|
+
</CommandPrimitive.List>
|
|
333
|
+
</CommandPrimitive>
|
|
334
|
+
</PopoverPrimitive.Content>
|
|
335
|
+
</PopoverPrimitive.Portal>
|
|
334
336
|
</PopoverPrimitive.Root>
|
|
335
337
|
</MultiSelectContext.Provider>
|
|
336
338
|
);
|
|
@@ -346,10 +348,10 @@ export interface MultiSelectItemProps<T extends MultiSelectValue = string> {
|
|
|
346
348
|
}
|
|
347
349
|
|
|
348
350
|
export function MultiSelectItem<T extends MultiSelectValue = string>({
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
351
|
+
children,
|
|
352
|
+
value,
|
|
353
|
+
className
|
|
354
|
+
}: MultiSelectItemProps<T>) {
|
|
353
355
|
const context = React.useContext(MultiSelectContext);
|
|
354
356
|
if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
|
|
355
357
|
const {
|
|
@@ -376,10 +378,11 @@ export function MultiSelectItem<T extends MultiSelectValue = string>({
|
|
|
376
378
|
"p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2",
|
|
377
379
|
"aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
|
|
378
380
|
"cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
|
|
381
|
+
"text-surface-accent-700 dark:text-surface-accent-300",
|
|
379
382
|
className
|
|
380
383
|
)}
|
|
381
384
|
>
|
|
382
|
-
<InnerCheckBox checked={isSelected}/>
|
|
385
|
+
<InnerCheckBox checked={isSelected} />
|
|
383
386
|
{children}
|
|
384
387
|
</CommandPrimitive.Item>;
|
|
385
388
|
}
|
|
@@ -398,7 +401,7 @@ function InnerCheckBox({ checked }: { checked: boolean }) {
|
|
|
398
401
|
(checked) ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
|
|
399
402
|
(checked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200")
|
|
400
403
|
)}>
|
|
401
|
-
{checked && <CheckIcon size={16} className={"absolute"}/>}
|
|
404
|
+
{checked && <CheckIcon size={16} className={"absolute"} />}
|
|
402
405
|
</div>
|
|
403
406
|
</div>
|
|
404
407
|
}
|