@fungi.computer/caps 0.3.0 → 0.3.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type HTMLAttributes } from "react";
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from "react";
|
|
2
2
|
/** Caller-provided command menu item data. */
|
|
3
3
|
export type CommandMenuItem = {
|
|
4
4
|
description?: string;
|
|
@@ -7,6 +7,8 @@ export type CommandMenuItem = {
|
|
|
7
7
|
label: string;
|
|
8
8
|
/** Key hint shown before the label, e.g. `z` in a which-key list. */
|
|
9
9
|
shortcut?: string;
|
|
10
|
+
/** Decorative leading visual, such as a thumbnail, shown before the label. */
|
|
11
|
+
media?: ReactNode;
|
|
10
12
|
};
|
|
11
13
|
/** Props accepted by CommandMenu. */
|
|
12
14
|
export type CommandMenuProps = Omit<HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> & {
|
|
@@ -15,6 +17,12 @@ export type CommandMenuProps = Omit<HTMLAttributes<HTMLUListElement>, "children"
|
|
|
15
17
|
onSelect: (id: string) => void;
|
|
16
18
|
/** Caller-owned selected state; distinct from local keyboard focus. */
|
|
17
19
|
selected?: string;
|
|
20
|
+
/**
|
|
21
|
+
* `end` (default) sets each description at the row's end. `inline` keeps the
|
|
22
|
+
* label at its own width and starts the description right after it,
|
|
23
|
+
* truncated, so long descriptions never push the row's text apart.
|
|
24
|
+
*/
|
|
25
|
+
descriptionPlacement?: "end" | "inline";
|
|
18
26
|
};
|
|
19
27
|
/** A single-focus listbox with local navigation and caller-owned selection. */
|
|
20
28
|
export declare const CommandMenu: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> & {
|
|
@@ -23,4 +31,10 @@ export declare const CommandMenu: import("react").ForwardRefExoticComponent<Omit
|
|
|
23
31
|
onSelect: (id: string) => void;
|
|
24
32
|
/** Caller-owned selected state; distinct from local keyboard focus. */
|
|
25
33
|
selected?: string;
|
|
34
|
+
/**
|
|
35
|
+
* `end` (default) sets each description at the row's end. `inline` keeps the
|
|
36
|
+
* label at its own width and starts the description right after it,
|
|
37
|
+
* truncated, so long descriptions never push the row's text apart.
|
|
38
|
+
*/
|
|
39
|
+
descriptionPlacement?: "end" | "inline";
|
|
26
40
|
} & import("react").RefAttributes<HTMLUListElement>>;
|
|
@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useId, useCallback, useImperativeHandle, useRef,
|
|
|
3
3
|
import { useGlide } from "../lib/glide.js";
|
|
4
4
|
import { useSelectableCollection } from "../components/selectable.js";
|
|
5
5
|
/** A single-focus listbox with local navigation and caller-owned selection. */
|
|
6
|
-
export const CommandMenu = forwardRef(function CommandMenu({ className, items, onKeyDown, onSelect, selected, ...props }, ref) {
|
|
6
|
+
export const CommandMenu = forwardRef(function CommandMenu({ className, descriptionPlacement = "end", items, onKeyDown, onSelect, selected, ...props }, ref) {
|
|
7
7
|
const instanceId = useId();
|
|
8
8
|
const list = useRef(null);
|
|
9
9
|
useImperativeHandle(ref, () => list.current);
|
|
@@ -66,5 +66,11 @@ export const CommandMenu = forwardRef(function CommandMenu({ className, items, o
|
|
|
66
66
|
].join(" "), "aria-keyshortcuts": item.shortcut, "data-search-option": item.id, id: optionId(item.id), onClick: () => {
|
|
67
67
|
if (!item.disabled)
|
|
68
68
|
onSelect(item.id);
|
|
69
|
-
}, role: "option", children: [item.shortcut ? (_jsx("kbd", { className: "kbd kbd-sm min-w-6 shrink-0", children: item.shortcut })) : null, _jsx("span", {
|
|
69
|
+
}, role: "option", children: [item.shortcut ? (_jsx("kbd", { className: "kbd kbd-sm min-w-6 shrink-0", children: item.shortcut })) : null, item.media ? (_jsx("span", { "aria-hidden": "true", className: "flex shrink-0", children: item.media })) : null, _jsx("span", { className: descriptionPlacement === "inline"
|
|
70
|
+
? "max-w-[50%] shrink-0 truncate"
|
|
71
|
+
: "flex-1 truncate", children: item.label }), item.description ? (_jsx("span", { className: descriptionPlacement === "inline"
|
|
72
|
+
? "min-w-0 flex-1 truncate text-xs text-base-content"
|
|
73
|
+
: "text-xs text-base-content", title: descriptionPlacement === "inline"
|
|
74
|
+
? item.description
|
|
75
|
+
: undefined, children: item.description })) : null] }) }, item.id))) }));
|
|
70
76
|
});
|
package/dist/styles.css
CHANGED
|
@@ -52,6 +52,14 @@ optional shortcut?: string;
|
|
|
52
52
|
|
|
53
53
|
Key hint shown before the label, e.g. `z` in a which-key list.
|
|
54
54
|
|
|
55
|
+
##### media?
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
optional media?: ReactNode;
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Decorative leading visual, such as a thumbnail, shown before the label.
|
|
62
|
+
|
|
55
63
|
---
|
|
56
64
|
|
|
57
65
|
### CommandMenuProps
|
|
@@ -68,11 +76,12 @@ Props accepted by CommandMenu.
|
|
|
68
76
|
|
|
69
77
|
#### Type Declaration
|
|
70
78
|
|
|
71
|
-
| Name
|
|
72
|
-
|
|
|
73
|
-
| `items`
|
|
74
|
-
| `onSelect()`
|
|
75
|
-
| `selected?`
|
|
79
|
+
| Name | Type | Description |
|
|
80
|
+
| ----------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
81
|
+
| `items` | readonly [`CommandMenuItem`](#commandmenuitem)[] | - |
|
|
82
|
+
| `onSelect()` | (`id`) => `void` | Called after a non-disabled item is selected. |
|
|
83
|
+
| `selected?` | `string` | Caller-owned selected state; distinct from local keyboard focus. |
|
|
84
|
+
| `descriptionPlacement?` | `"end"` \| `"inline"` | `end` (default) sets each description at the row's end. `inline` keeps the label at its own width and starts the description right after it, truncated, so long descriptions never push the row's text apart. |
|
|
76
85
|
|
|
77
86
|
## Variables
|
|
78
87
|
|