@stll/ui 0.18.0 → 0.19.0
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/composer.d.ts +108 -0
- package/dist/components/composer.js +132 -0
- package/dist/components/landing.d.ts +61 -0
- package/dist/components/landing.js +97 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/kanban/band-peek.d.ts +26 -33
- package/dist/kanban/band-peek.js +24 -30
- package/dist/kanban/column-header.d.ts +8 -1
- package/dist/kanban/column-header.js +9 -2
- package/dist/kanban/drag-interactions.d.ts +9 -1
- package/dist/kanban/drag-interactions.js +10 -1
- package/dist/kanban/index.d.ts +2 -2
- package/dist/kanban/index.js +2 -2
- package/dist/kanban/sortable-interactions.d.ts +12 -0
- package/dist/kanban/subgroup-board.d.ts +33 -6
- package/dist/kanban/subgroup-board.js +75 -22
- package/package.json +9 -1
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
//#region src/components/composer.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* The tokens every composer box shares: the chat hero, the chat follow-up
|
|
5
|
+
* bar, the docked bar over documents (inspector chat, file overlay,
|
|
6
|
+
* Template Studio) and the law home's entry box all render one shell from
|
|
7
|
+
* these, so they restyle together. A surface that needs the look imports
|
|
8
|
+
* these rather than copying the classes; a copy is how the boxes drifted
|
|
9
|
+
* apart the first time (44px / `rounded-lg` / 14px in the chat, 38px /
|
|
10
|
+
* `rounded-2xl` / 13px in the inspector).
|
|
11
|
+
*/
|
|
12
|
+
/** Shared responsive size for the two round controls flanking a composer. */
|
|
13
|
+
declare const COMPOSER_CONTROL_BUTTON_SIZE: "icon-sm";
|
|
14
|
+
/** The bordered box: background, radius, border, colour transition. The
|
|
15
|
+
* radius is the docked bar's original `rounded-2xl`: at the compact row's
|
|
16
|
+
* stature it reads as a soft pill, which is the shape the composers were
|
|
17
|
+
* meant to unify on. */
|
|
18
|
+
declare const COMPOSER_BOX_CLASS = "bg-background rounded-2xl border transition-colors";
|
|
19
|
+
/** The box's focus ring in its default (non-anonymized) treatment. */
|
|
20
|
+
declare const COMPOSER_BOX_FOCUS_CLASS = "focus-within:border-ring";
|
|
21
|
+
/**
|
|
22
|
+
* The box's "shield active" treatment when the next send is anonymized: a
|
|
23
|
+
* blue ring replaces the default focus border (both together read as a
|
|
24
|
+
* double ring on click).
|
|
25
|
+
*/
|
|
26
|
+
declare const COMPOSER_BOX_ANONYMIZED_CLASS = "ring-info/40 border-info/40 focus-within:border-info/60 shadow-[0_0_0_4px_rgb(from_var(--color-info)_r_g_b_/_0.08)] ring-1";
|
|
27
|
+
/**
|
|
28
|
+
* The compact (one-line) bar row: its stature, end alignment, control gap
|
|
29
|
+
* and inset. The surface supplies the layout (`grid` for the chat bar's
|
|
30
|
+
* three fixed columns, `flex` for the docked bar's variable leading
|
|
31
|
+
* controls); the row grows with the editor.
|
|
32
|
+
*/
|
|
33
|
+
declare const COMPOSER_COMPACT_ROW_CLASS = "min-h-11 items-end gap-1 px-1.5 py-px";
|
|
34
|
+
/**
|
|
35
|
+
* The compact text cell: one `text-sm` line at `leading-5` plus the
|
|
36
|
+
* vertical inset that makes a single line exactly as tall as the row's
|
|
37
|
+
* inner height (44px row, 1px inset each side ⇒ 42px), so text and controls
|
|
38
|
+
* share one centre. The editable element itself takes `min-h-0` so an empty
|
|
39
|
+
* composer collapses to this one line and grows from there.
|
|
40
|
+
*/
|
|
41
|
+
declare const COMPOSER_COMPACT_TEXT_CELL_CLASS = "relative min-w-0 py-[11px]";
|
|
42
|
+
/** Text stature of the editor and every placeholder painted over it. */
|
|
43
|
+
declare const COMPOSER_TEXT_CLASS = "text-sm leading-5";
|
|
44
|
+
/**
|
|
45
|
+
* The `large` (hero) text well: the padding around the editor. The editor's
|
|
46
|
+
* own stature is `COMPOSER_LARGE_EDITOR_CLASS` (~3 lines of `text-sm` at
|
|
47
|
+
* `leading-5`), applied on the editable element by each surface because the
|
|
48
|
+
* chat editor targets its `.ProseMirror` node while a plain textarea takes
|
|
49
|
+
* it directly.
|
|
50
|
+
*/
|
|
51
|
+
declare const COMPOSER_LARGE_TEXT_WELL_CLASS = "ps-3 pe-3 pt-2 pb-1";
|
|
52
|
+
/** The `large` editable element's stature: three lines before it grows. */
|
|
53
|
+
declare const COMPOSER_LARGE_EDITOR_CLASS = "min-h-15";
|
|
54
|
+
/** The placeholder painted over an empty editor, in either stature. */
|
|
55
|
+
declare const COMPOSER_PLACEHOLDER_CLASS = "text-foreground-placeholder pointer-events-none absolute truncate text-sm";
|
|
56
|
+
/** The `large` action row under the text well: leading controls, trailing send. */
|
|
57
|
+
declare const COMPOSER_LARGE_ACTION_ROW_CLASS = "flex items-center justify-end gap-0.5 px-1.5 pb-1.5";
|
|
58
|
+
/** The leading group of the action row (the (+) menu, or a scope control). */
|
|
59
|
+
declare const COMPOSER_LEADING_GROUP_CLASS = "flex min-w-0 items-center gap-0.5";
|
|
60
|
+
/**
|
|
61
|
+
* The round, foreground-filled primary control at the action row's end:
|
|
62
|
+
* the chat's send/stop/retry button and the law home's submit. `size-7`
|
|
63
|
+
* pins the circle to the (+) trigger's diameter at every breakpoint
|
|
64
|
+
* (`icon-sm` alone is 32px below `sm`), so a row's two round ends match.
|
|
65
|
+
*/
|
|
66
|
+
declare const COMPOSER_SEND_BUTTON_CLASS = "bg-foreground text-background hover:bg-foreground/90 size-7 shrink-0 rounded-full";
|
|
67
|
+
/**
|
|
68
|
+
* A picker in the status row under the box (the chat's matter picker, the
|
|
69
|
+
* law home's scope and jurisdiction): quiet text with a hover surface, so
|
|
70
|
+
* the row stays subordinate to the box above it.
|
|
71
|
+
*/
|
|
72
|
+
declare const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] transition-colors";
|
|
73
|
+
type ComposerStatusRowProps = {
|
|
74
|
+
/** Left cluster: matter picker, web-search / anonymize toggles, ... */
|
|
75
|
+
start?: ReactNode | undefined;
|
|
76
|
+
/** End slot, pinned to the far edge (e.g. the context meter). */
|
|
77
|
+
end?: ReactNode | undefined;
|
|
78
|
+
className?: string | undefined;
|
|
79
|
+
};
|
|
80
|
+
/**
|
|
81
|
+
* The slim status row rendered beneath a composer box: a `text-xs` row with
|
|
82
|
+
* a start cluster and an end slot pinned to the far edge. Shared by every
|
|
83
|
+
* surface so the shell can never drift. Renders nothing when both slots are
|
|
84
|
+
* empty, so a surface with no per-send controls shows no row.
|
|
85
|
+
*/
|
|
86
|
+
declare const ComposerStatusRow: ({ start, end, className }: ComposerStatusRowProps) => import("react").JSX.Element | null;
|
|
87
|
+
type ComposerPickerOption<Value extends string> = {
|
|
88
|
+
label: string;
|
|
89
|
+
value: Value;
|
|
90
|
+
};
|
|
91
|
+
type ComposerPickerProps<Value extends string> = {
|
|
92
|
+
/** The accessible name of the choice, e.g. "Jurisdiction". */
|
|
93
|
+
ariaLabel: string;
|
|
94
|
+
/** The glyph before the current choice, sized `size-3` by the trigger. */
|
|
95
|
+
icon: ReactNode;
|
|
96
|
+
onChange: (value: Value) => void;
|
|
97
|
+
options: readonly ComposerPickerOption<Value>[];
|
|
98
|
+
value: Value;
|
|
99
|
+
};
|
|
100
|
+
/**
|
|
101
|
+
* One choice among a few in the status row under a composer box: the
|
|
102
|
+
* trigger the chat's matter picker renders, with a radio menu behind it.
|
|
103
|
+
* Every picker under a box renders through this so the row reads as one
|
|
104
|
+
* kind of control.
|
|
105
|
+
*/
|
|
106
|
+
declare const ComposerPicker: <Value extends string>({ ariaLabel, icon, onChange, options, value }: ComposerPickerProps<Value>) => import("react").JSX.Element;
|
|
107
|
+
//#endregion
|
|
108
|
+
export { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS, ComposerPicker, ComposerPickerOption, ComposerStatusRow };
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.js";
|
|
3
|
+
import { DropdownMenu as Menu, DropdownMenuContent as MenuPopup, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem as MenuRadioItem, DropdownMenuTrigger as MenuTrigger } from "./menu.js";
|
|
4
|
+
import { ChevronDownIcon } from "lucide-react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/composer.tsx
|
|
7
|
+
/**
|
|
8
|
+
* The tokens every composer box shares: the chat hero, the chat follow-up
|
|
9
|
+
* bar, the docked bar over documents (inspector chat, file overlay,
|
|
10
|
+
* Template Studio) and the law home's entry box all render one shell from
|
|
11
|
+
* these, so they restyle together. A surface that needs the look imports
|
|
12
|
+
* these rather than copying the classes; a copy is how the boxes drifted
|
|
13
|
+
* apart the first time (44px / `rounded-lg` / 14px in the chat, 38px /
|
|
14
|
+
* `rounded-2xl` / 13px in the inspector).
|
|
15
|
+
*/
|
|
16
|
+
/** Shared responsive size for the two round controls flanking a composer. */
|
|
17
|
+
const COMPOSER_CONTROL_BUTTON_SIZE = "icon-sm";
|
|
18
|
+
/** The bordered box: background, radius, border, colour transition. The
|
|
19
|
+
* radius is the docked bar's original `rounded-2xl`: at the compact row's
|
|
20
|
+
* stature it reads as a soft pill, which is the shape the composers were
|
|
21
|
+
* meant to unify on. */
|
|
22
|
+
const COMPOSER_BOX_CLASS = "bg-background rounded-2xl border transition-colors";
|
|
23
|
+
/** The box's focus ring in its default (non-anonymized) treatment. */
|
|
24
|
+
const COMPOSER_BOX_FOCUS_CLASS = "focus-within:border-ring";
|
|
25
|
+
/**
|
|
26
|
+
* The box's "shield active" treatment when the next send is anonymized: a
|
|
27
|
+
* blue ring replaces the default focus border (both together read as a
|
|
28
|
+
* double ring on click).
|
|
29
|
+
*/
|
|
30
|
+
const COMPOSER_BOX_ANONYMIZED_CLASS = "ring-info/40 border-info/40 focus-within:border-info/60 shadow-[0_0_0_4px_rgb(from_var(--color-info)_r_g_b_/_0.08)] ring-1";
|
|
31
|
+
/**
|
|
32
|
+
* The compact (one-line) bar row: its stature, end alignment, control gap
|
|
33
|
+
* and inset. The surface supplies the layout (`grid` for the chat bar's
|
|
34
|
+
* three fixed columns, `flex` for the docked bar's variable leading
|
|
35
|
+
* controls); the row grows with the editor.
|
|
36
|
+
*/
|
|
37
|
+
const COMPOSER_COMPACT_ROW_CLASS = "min-h-11 items-end gap-1 px-1.5 py-px";
|
|
38
|
+
/**
|
|
39
|
+
* The compact text cell: one `text-sm` line at `leading-5` plus the
|
|
40
|
+
* vertical inset that makes a single line exactly as tall as the row's
|
|
41
|
+
* inner height (44px row, 1px inset each side ⇒ 42px), so text and controls
|
|
42
|
+
* share one centre. The editable element itself takes `min-h-0` so an empty
|
|
43
|
+
* composer collapses to this one line and grows from there.
|
|
44
|
+
*/
|
|
45
|
+
const COMPOSER_COMPACT_TEXT_CELL_CLASS = "relative min-w-0 py-[11px]";
|
|
46
|
+
/** Text stature of the editor and every placeholder painted over it. */
|
|
47
|
+
const COMPOSER_TEXT_CLASS = "text-sm leading-5";
|
|
48
|
+
/**
|
|
49
|
+
* The `large` (hero) text well: the padding around the editor. The editor's
|
|
50
|
+
* own stature is `COMPOSER_LARGE_EDITOR_CLASS` (~3 lines of `text-sm` at
|
|
51
|
+
* `leading-5`), applied on the editable element by each surface because the
|
|
52
|
+
* chat editor targets its `.ProseMirror` node while a plain textarea takes
|
|
53
|
+
* it directly.
|
|
54
|
+
*/
|
|
55
|
+
const COMPOSER_LARGE_TEXT_WELL_CLASS = "ps-3 pe-3 pt-2 pb-1";
|
|
56
|
+
/** The `large` editable element's stature: three lines before it grows. */
|
|
57
|
+
const COMPOSER_LARGE_EDITOR_CLASS = "min-h-15";
|
|
58
|
+
/** The placeholder painted over an empty editor, in either stature. */
|
|
59
|
+
const COMPOSER_PLACEHOLDER_CLASS = "text-foreground-placeholder pointer-events-none absolute truncate text-sm";
|
|
60
|
+
/** The `large` action row under the text well: leading controls, trailing send. */
|
|
61
|
+
const COMPOSER_LARGE_ACTION_ROW_CLASS = "flex items-center justify-end gap-0.5 px-1.5 pb-1.5";
|
|
62
|
+
/** The leading group of the action row (the (+) menu, or a scope control). */
|
|
63
|
+
const COMPOSER_LEADING_GROUP_CLASS = "flex min-w-0 items-center gap-0.5";
|
|
64
|
+
/**
|
|
65
|
+
* The round, foreground-filled primary control at the action row's end:
|
|
66
|
+
* the chat's send/stop/retry button and the law home's submit. `size-7`
|
|
67
|
+
* pins the circle to the (+) trigger's diameter at every breakpoint
|
|
68
|
+
* (`icon-sm` alone is 32px below `sm`), so a row's two round ends match.
|
|
69
|
+
*/
|
|
70
|
+
const COMPOSER_SEND_BUTTON_CLASS = "bg-foreground text-background hover:bg-foreground/90 size-7 shrink-0 rounded-full";
|
|
71
|
+
/**
|
|
72
|
+
* A picker in the status row under the box (the chat's matter picker, the
|
|
73
|
+
* law home's scope and jurisdiction): quiet text with a hover surface, so
|
|
74
|
+
* the row stays subordinate to the box above it.
|
|
75
|
+
*/
|
|
76
|
+
const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] transition-colors";
|
|
77
|
+
/**
|
|
78
|
+
* The slim status row rendered beneath a composer box: a `text-xs` row with
|
|
79
|
+
* a start cluster and an end slot pinned to the far edge. Shared by every
|
|
80
|
+
* surface so the shell can never drift. Renders nothing when both slots are
|
|
81
|
+
* empty, so a surface with no per-send controls shows no row.
|
|
82
|
+
*/
|
|
83
|
+
const ComposerStatusRow = ({ start, end, className }) => {
|
|
84
|
+
if (start === void 0 && end === void 0) return null;
|
|
85
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
86
|
+
className: cn("text-muted-foreground mt-1.5 flex items-center justify-between gap-2 px-1 text-xs", className),
|
|
87
|
+
children: [start, end !== void 0 && /* @__PURE__ */ jsx("div", {
|
|
88
|
+
className: "ms-auto",
|
|
89
|
+
children: end
|
|
90
|
+
})]
|
|
91
|
+
});
|
|
92
|
+
};
|
|
93
|
+
/**
|
|
94
|
+
* One choice among a few in the status row under a composer box: the
|
|
95
|
+
* trigger the chat's matter picker renders, with a radio menu behind it.
|
|
96
|
+
* Every picker under a box renders through this so the row reads as one
|
|
97
|
+
* kind of control.
|
|
98
|
+
*/
|
|
99
|
+
const ComposerPicker = ({ ariaLabel, icon, onChange, options, value }) => {
|
|
100
|
+
const current = options.find((option) => option.value === value);
|
|
101
|
+
return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
|
|
102
|
+
"aria-label": ariaLabel,
|
|
103
|
+
className: COMPOSER_PICKER_TRIGGER_CLASS,
|
|
104
|
+
children: [
|
|
105
|
+
/* @__PURE__ */ jsx("span", {
|
|
106
|
+
className: "flex size-3 shrink-0 items-center justify-center [&>svg]:size-3",
|
|
107
|
+
children: icon
|
|
108
|
+
}),
|
|
109
|
+
/* @__PURE__ */ jsx("span", {
|
|
110
|
+
className: "truncate",
|
|
111
|
+
children: current?.label ?? value
|
|
112
|
+
}),
|
|
113
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
114
|
+
"aria-hidden": "true",
|
|
115
|
+
className: "size-3 shrink-0 opacity-70"
|
|
116
|
+
})
|
|
117
|
+
]
|
|
118
|
+
}), /* @__PURE__ */ jsx(MenuPopup, {
|
|
119
|
+
align: "start",
|
|
120
|
+
sideOffset: 6,
|
|
121
|
+
children: /* @__PURE__ */ jsx(MenuRadioGroup, {
|
|
122
|
+
value,
|
|
123
|
+
children: options.map((option) => /* @__PURE__ */ jsx(MenuRadioItem, {
|
|
124
|
+
onClick: () => onChange(option.value),
|
|
125
|
+
value: option.value,
|
|
126
|
+
children: option.label
|
|
127
|
+
}, option.value))
|
|
128
|
+
})
|
|
129
|
+
})] });
|
|
130
|
+
};
|
|
131
|
+
//#endregion
|
|
132
|
+
export { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS, ComposerPicker, ComposerStatusRow };
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from "react";
|
|
2
|
+
//#region src/components/landing.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* A home screen's one shape: a greeting and a box in the upper fold, three
|
|
5
|
+
* columns of what the reader reaches from it below. The chat home and the
|
|
6
|
+
* law home render from these, so a reader who has learned one has learned
|
|
7
|
+
* the other, and the two cannot drift apart.
|
|
8
|
+
*/
|
|
9
|
+
type LandingLayoutProps = {
|
|
10
|
+
/** Header-slot actions that belong to the page rather than the fold. */
|
|
11
|
+
actions?: ReactNode | undefined;
|
|
12
|
+
/** The greeting and the box; centred in the upper fold. */
|
|
13
|
+
hero: ReactNode;
|
|
14
|
+
/** The columns; take the rest of the height, each scrolling on its own. */
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
/** Below the columns, in its own bounded scroll: crawlable navigation. */
|
|
17
|
+
footer?: ReactNode | undefined;
|
|
18
|
+
};
|
|
19
|
+
declare const LandingLayout: ({ actions, hero, children, footer }: LandingLayoutProps) => import("react").JSX.Element;
|
|
20
|
+
type LandingGreetingProps = {
|
|
21
|
+
/** The mark in the tile: the product mark, or the section's icon. */
|
|
22
|
+
icon: ReactNode;
|
|
23
|
+
/** The one line under the tile, as the page's heading. */
|
|
24
|
+
children: ReactNode;
|
|
25
|
+
};
|
|
26
|
+
declare const LandingGreeting: ({ icon, children }: LandingGreetingProps) => import("react").JSX.Element;
|
|
27
|
+
/** A column's heading: an icon and an uppercase label, as a link or a trigger. */
|
|
28
|
+
declare const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-1 text-xs font-semibold tracking-widest uppercase transition-colors outline-none focus-visible:ring-2";
|
|
29
|
+
/** A row of a column, as a link or a button. */
|
|
30
|
+
declare const LANDING_ROW_CLASS = "group hover:bg-accent/50 focus-visible:ring-ring rounded-md px-2 py-1.5 text-start transition-colors outline-none focus-visible:ring-2";
|
|
31
|
+
type LandingSectionProps = {
|
|
32
|
+
children: ReactNode;
|
|
33
|
+
heading: ReactNode;
|
|
34
|
+
};
|
|
35
|
+
/** A column: its heading stays put, its rows scroll beneath it. */
|
|
36
|
+
declare const LandingSection: ({ children, heading }: LandingSectionProps) => import("react").JSX.Element;
|
|
37
|
+
type LandingButtonProps = {
|
|
38
|
+
icon?: ReactElement;
|
|
39
|
+
meta?: ReactNode | undefined;
|
|
40
|
+
onClick: () => void;
|
|
41
|
+
title: ReactNode;
|
|
42
|
+
};
|
|
43
|
+
declare const LandingButton: ({ icon, meta, onClick, title }: LandingButtonProps) => import("react").JSX.Element;
|
|
44
|
+
type LandingItemTextProps = {
|
|
45
|
+
icon?: ReactElement;
|
|
46
|
+
iconTone?: "muted" | "matter" | undefined;
|
|
47
|
+
meta?: ReactNode | undefined;
|
|
48
|
+
title: ReactNode;
|
|
49
|
+
};
|
|
50
|
+
declare const LandingItemText: ({ icon, iconTone, meta, title }: LandingItemTextProps) => import("react").JSX.Element;
|
|
51
|
+
type LandingRowIconProps = {
|
|
52
|
+
children: ReactElement;
|
|
53
|
+
tone?: "muted" | "matter" | undefined;
|
|
54
|
+
};
|
|
55
|
+
declare const LandingRowIcon: ({ children, tone }: LandingRowIconProps) => import("react").JSX.Element;
|
|
56
|
+
type LandingEmptyProps = {
|
|
57
|
+
children: ReactNode;
|
|
58
|
+
};
|
|
59
|
+
declare const LandingEmpty: ({ children }: LandingEmptyProps) => import("react").JSX.Element;
|
|
60
|
+
//#endregion
|
|
61
|
+
export { LANDING_ROW_CLASS, LANDING_SECTION_HEADING_CLASS, LandingButton, LandingEmpty, LandingGreeting, LandingItemText, LandingLayout, LandingRowIcon, LandingSection };
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.js";
|
|
3
|
+
import { ScrollArea } from "./scroll-area.js";
|
|
4
|
+
import { BidiText } from "./bidi-text.js";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/landing.tsx
|
|
7
|
+
const LandingLayout = ({ actions, hero, children, footer }) => /* @__PURE__ */ jsxs("div", {
|
|
8
|
+
className: "mx-auto flex h-full w-full max-w-5xl flex-1 flex-col overflow-hidden",
|
|
9
|
+
children: [actions, /* @__PURE__ */ jsxs("div", {
|
|
10
|
+
className: "@container flex min-h-0 flex-1 flex-col items-center overflow-hidden px-4",
|
|
11
|
+
children: [
|
|
12
|
+
/* @__PURE__ */ jsx(ScrollArea, {
|
|
13
|
+
className: "min-h-72 w-full max-w-2xl shrink basis-[22rem]",
|
|
14
|
+
scrollFade: true,
|
|
15
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
16
|
+
className: "flex min-h-full w-full flex-col items-center justify-center gap-8",
|
|
17
|
+
children: hero
|
|
18
|
+
})
|
|
19
|
+
}),
|
|
20
|
+
/* @__PURE__ */ jsx("div", {
|
|
21
|
+
className: "grid min-h-0 w-full flex-1 auto-rows-fr gap-8 pb-6 @2xl:grid-cols-3",
|
|
22
|
+
children
|
|
23
|
+
}),
|
|
24
|
+
footer !== void 0 && /* @__PURE__ */ jsx(ScrollArea, {
|
|
25
|
+
className: "h-auto max-h-[40vh] w-full shrink-0",
|
|
26
|
+
scrollFade: true,
|
|
27
|
+
children: footer
|
|
28
|
+
})
|
|
29
|
+
]
|
|
30
|
+
})]
|
|
31
|
+
});
|
|
32
|
+
const LandingGreeting = ({ icon, children }) => /* @__PURE__ */ jsxs("div", {
|
|
33
|
+
className: "flex w-full flex-col items-center gap-4 text-center",
|
|
34
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
35
|
+
className: "border-border bg-background text-foreground flex size-12 items-center justify-center rounded-lg border shadow-sm",
|
|
36
|
+
children: icon
|
|
37
|
+
}), /* @__PURE__ */ jsx("h1", {
|
|
38
|
+
className: "text-foreground max-w-md text-center text-lg font-medium",
|
|
39
|
+
children
|
|
40
|
+
})]
|
|
41
|
+
});
|
|
42
|
+
/** A column's heading: an icon and an uppercase label, as a link or a trigger. */
|
|
43
|
+
const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-1 text-xs font-semibold tracking-widest uppercase transition-colors outline-none focus-visible:ring-2";
|
|
44
|
+
/** A row of a column, as a link or a button. */
|
|
45
|
+
const LANDING_ROW_CLASS = "group hover:bg-accent/50 focus-visible:ring-ring rounded-md px-2 py-1.5 text-start transition-colors outline-none focus-visible:ring-2";
|
|
46
|
+
/** A column: its heading stays put, its rows scroll beneath it. */
|
|
47
|
+
const LandingSection = ({ children, heading }) => /* @__PURE__ */ jsxs("section", {
|
|
48
|
+
className: "flex min-h-0 min-w-0 flex-col",
|
|
49
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
50
|
+
className: "mb-3 shrink-0",
|
|
51
|
+
children: heading
|
|
52
|
+
}), /* @__PURE__ */ jsx(ScrollArea, {
|
|
53
|
+
className: "min-h-0 flex-1",
|
|
54
|
+
scrollFade: true,
|
|
55
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
56
|
+
className: "flex flex-col gap-1 pb-4",
|
|
57
|
+
children
|
|
58
|
+
})
|
|
59
|
+
})]
|
|
60
|
+
});
|
|
61
|
+
const LandingButton = ({ icon, meta, onClick, title }) => /* @__PURE__ */ jsx("button", {
|
|
62
|
+
className: LANDING_ROW_CLASS,
|
|
63
|
+
onClick,
|
|
64
|
+
type: "button",
|
|
65
|
+
children: /* @__PURE__ */ jsx(LandingItemText, {
|
|
66
|
+
...icon === void 0 ? {} : { icon },
|
|
67
|
+
meta,
|
|
68
|
+
title
|
|
69
|
+
})
|
|
70
|
+
});
|
|
71
|
+
const LandingItemText = ({ icon, iconTone = "muted", meta, title }) => /* @__PURE__ */ jsxs("span", {
|
|
72
|
+
className: "flex min-w-0 items-start gap-2",
|
|
73
|
+
children: [icon !== void 0 && /* @__PURE__ */ jsx(LandingRowIcon, {
|
|
74
|
+
tone: iconTone,
|
|
75
|
+
children: icon
|
|
76
|
+
}), /* @__PURE__ */ jsxs("span", {
|
|
77
|
+
className: "min-w-0 flex-1",
|
|
78
|
+
children: [/* @__PURE__ */ jsx(BidiText, {
|
|
79
|
+
as: "span",
|
|
80
|
+
className: "text-foreground block truncate text-sm font-medium",
|
|
81
|
+
children: title
|
|
82
|
+
}), meta !== void 0 && meta !== null ? /* @__PURE__ */ jsx("span", {
|
|
83
|
+
className: "text-muted-foreground block truncate text-xs",
|
|
84
|
+
children: meta
|
|
85
|
+
}) : null]
|
|
86
|
+
})]
|
|
87
|
+
});
|
|
88
|
+
const LandingRowIcon = ({ children, tone = "muted" }) => /* @__PURE__ */ jsx("span", {
|
|
89
|
+
className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center transition-colors", tone === "muted" && "text-foreground-muted group-hover:text-muted-foreground"),
|
|
90
|
+
children
|
|
91
|
+
});
|
|
92
|
+
const LandingEmpty = ({ children }) => /* @__PURE__ */ jsx("div", {
|
|
93
|
+
className: "border-border text-muted-foreground rounded-md border border-dashed px-3 py-3 text-sm",
|
|
94
|
+
children
|
|
95
|
+
});
|
|
96
|
+
//#endregion
|
|
97
|
+
export { LANDING_ROW_CLASS, LANDING_SECTION_HEADING_CLASS, LandingButton, LandingEmpty, LandingGreeting, LandingItemText, LandingLayout, LandingRowIcon, LandingSection };
|
package/dist/index.d.ts
CHANGED
|
@@ -79,7 +79,7 @@ import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./kanban/column-hea
|
|
|
79
79
|
import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSortableCellPosition, KanbanVirtualScrollRequest, kanbanKeyboardCoordinates } from "./kanban/sortable-interactions.logic.js";
|
|
80
80
|
import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanCardDragSurfaceProps, KanbanDragCancelEvent, KanbanDragEndEvent, KanbanDragHandle, KanbanDragHandleProps, KanbanDragOverEvent, KanbanDragStartEvent, KanbanSortableActivationMode, KanbanSortableBindings, KanbanSortableBoard, KanbanSortableBoardProps, KanbanSortableColumns, KanbanSortableColumnsProps, KanbanSortableList, KanbanSortableListProps, UseKanbanDropTargetOptions, UseKanbanSortableOptions, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./kanban/sortable-interactions.js";
|
|
81
81
|
import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./kanban/sortable-edge.js";
|
|
82
|
-
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
|
|
82
|
+
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
|
|
83
83
|
import { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./kanban/subgroup-board.js";
|
|
84
84
|
import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./kanban/band-peek.js";
|
|
85
85
|
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext } from "./kanban/virtual-cell.js";
|
|
@@ -94,4 +94,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffS
|
|
|
94
94
|
import { ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone } from "./review/review-out-of-date-notice.js";
|
|
95
95
|
import { ReviewStatusBadge, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant } from "./review/review-status-badge.js";
|
|
96
96
|
import { ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
|
|
97
|
-
export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuildKanbanBoardMatrixParams, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, type ControlSize, type CreateKanbanDropIntentParams, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, type OrderKanbanCellsByColumnsParams, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, UserText, type WorkspaceCompactNavigation, WorkspaceEndRail, type WorkspaceEndRailChatAction, type WorkspaceEndRailProps, type WorkspaceNavigation, WorkspaceShell, type WorkspaceShellProps, type WorkspaceTopBarContext, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
|
|
97
|
+
export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuildKanbanBoardMatrixParams, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, type ControlSize, type CreateKanbanDropIntentParams, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, type OrderKanbanCellsByColumnsParams, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, UserText, type WorkspaceCompactNavigation, WorkspaceEndRail, type WorkspaceEndRailChatAction, type WorkspaceEndRailProps, type WorkspaceNavigation, WorkspaceShell, type WorkspaceShellProps, type WorkspaceTopBarContext, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
|
package/dist/index.js
CHANGED
|
@@ -77,7 +77,7 @@ import { KanbanColumnHeader } from "./kanban/column-header.js";
|
|
|
77
77
|
import { KANBAN_BOARD_COLLISION_DETECTION, kanbanKeyboardCoordinates } from "./kanban/sortable-interactions.logic.js";
|
|
78
78
|
import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./kanban/sortable-interactions.js";
|
|
79
79
|
import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge } from "./kanban/sortable-edge.js";
|
|
80
|
-
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
|
|
80
|
+
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
|
|
81
81
|
import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./kanban/band-peek.js";
|
|
82
82
|
import { KanbanSubgroupBoard } from "./kanban/subgroup-board.js";
|
|
83
83
|
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell } from "./kanban/virtual-cell.js";
|
|
@@ -90,4 +90,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, TRACKED_DELETI
|
|
|
90
90
|
import { ReviewOutOfDateNotice } from "./review/review-out-of-date-notice.js";
|
|
91
91
|
import { ReviewSeverityDot, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
|
|
92
92
|
import { ReviewStatusBadge } from "./review/review-status-badge.js";
|
|
93
|
-
export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, ResourceCalendar, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, UserText, WorkspaceEndRail, WorkspaceShell, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
|
|
93
|
+
export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, ResourceCalendar, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, UserText, WorkspaceEndRail, WorkspaceShell, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
|
|
@@ -1,25 +1,22 @@
|
|
|
1
1
|
//#region src/kanban/band-peek.d.ts
|
|
2
2
|
/**
|
|
3
|
-
* The peek a collapsed band opens while a
|
|
4
|
-
* as a state machine with an injectable scheduler so its timing rules
|
|
5
|
-
* tested without a DOM.
|
|
3
|
+
* The peek a collapsed band opens while a dragged card rests on its folded
|
|
4
|
+
* slot, as a state machine with an injectable scheduler so its timing rules
|
|
5
|
+
* can be tested without a DOM. A plain hover never peeks: the peek exists so
|
|
6
|
+
* a drag can still land on a specific column inside a folded band, and the
|
|
7
|
+
* board only feeds the controller drag events.
|
|
6
8
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* band for a short linger. The band renders as separate elements (its
|
|
15
|
-
* caption, then its columns in each lane), so moving from the caption
|
|
16
|
-
* down into a column crosses an element boundary; without the linger the
|
|
17
|
-
* band would fold under the pointer and the slot would peek it straight
|
|
18
|
-
* back open.
|
|
9
|
+
* One rule keeps a peek from fighting the drag: it ends only after the drag
|
|
10
|
+
* has left every part of the open band for a short linger. The band renders
|
|
11
|
+
* as separate elements (its caption, then its columns in each lane), so
|
|
12
|
+
* moving from the caption down into a column crosses an element boundary;
|
|
13
|
+
* without the linger the band would fold under the card and the slot would
|
|
14
|
+
* peek it straight back open. The end of the drag, wherever it lands, ends
|
|
15
|
+
* the peek at once.
|
|
19
16
|
*/
|
|
20
|
-
/** How long a
|
|
17
|
+
/** How long a dragged card rests on a folded slot before the band peeks open. */
|
|
21
18
|
declare const KANBAN_BAND_PEEK_DELAY_MS = 400;
|
|
22
|
-
/** How long the
|
|
19
|
+
/** How long the drag may be outside an open band before the peek ends. */
|
|
23
20
|
declare const KANBAN_BAND_PEEK_LINGER_MS = 150;
|
|
24
21
|
/** Runs `callback` after `ms`; the returned function cancels it. */
|
|
25
22
|
type BandPeekScheduler = (callback: () => void, ms: number) => () => void;
|
|
@@ -32,21 +29,18 @@ type BandPeekControllerOptions = {
|
|
|
32
29
|
schedule?: BandPeekScheduler;
|
|
33
30
|
};
|
|
34
31
|
type BandPeekController = {
|
|
35
|
-
/**
|
|
36
|
-
|
|
37
|
-
/** The
|
|
38
|
-
|
|
39
|
-
/** The
|
|
40
|
-
|
|
41
|
-
/** The
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
|
|
45
|
-
* under the pointer; it must not peek until the pointer leaves the slot.
|
|
46
|
-
*/
|
|
47
|
-
foldedUnderPointer: (bandId: string) => void;
|
|
32
|
+
/** A dragged card moved over a band's folded slot. */
|
|
33
|
+
slotDragOver: (bandId: string) => void;
|
|
34
|
+
/** The drag left a band's folded slot. */
|
|
35
|
+
slotDragLeave: (bandId: string) => void;
|
|
36
|
+
/** The drag entered a part of a band that is rendered open. */
|
|
37
|
+
openDragEnter: (bandId: string) => void;
|
|
38
|
+
/** The drag left a part of a band that is rendered open. */
|
|
39
|
+
openDragLeave: (bandId: string) => void;
|
|
40
|
+
/** The drag ended (dropped or cancelled), wherever it was. */
|
|
41
|
+
dragEnded: () => void;
|
|
48
42
|
/**
|
|
49
|
-
* The band was folded
|
|
43
|
+
* The band was folded (from its caption, the keyboard, or a controlled
|
|
50
44
|
* caller): any peek ends, and the slot may peek on the next hover.
|
|
51
45
|
*/
|
|
52
46
|
bandFolded: (bandId: string) => void;
|
|
@@ -54,8 +48,7 @@ type BandPeekController = {
|
|
|
54
48
|
bandExpanded: (bandId: string) => void;
|
|
55
49
|
/**
|
|
56
50
|
* A band's folded slot left the DOM (the band expanded or disappeared) so
|
|
57
|
-
* a peek it was about to open
|
|
58
|
-
* applies.
|
|
51
|
+
* a peek it was about to open no longer applies.
|
|
59
52
|
*/
|
|
60
53
|
slotUnmounted: (bandId: string) => void;
|
|
61
54
|
/** Ends any pending timer, for unmount. */
|
package/dist/kanban/band-peek.js
CHANGED
|
@@ -1,25 +1,22 @@
|
|
|
1
1
|
//#region src/kanban/band-peek.ts
|
|
2
2
|
/**
|
|
3
|
-
* The peek a collapsed band opens while a
|
|
4
|
-
* as a state machine with an injectable scheduler so its timing rules
|
|
5
|
-
* tested without a DOM.
|
|
3
|
+
* The peek a collapsed band opens while a dragged card rests on its folded
|
|
4
|
+
* slot, as a state machine with an injectable scheduler so its timing rules
|
|
5
|
+
* can be tested without a DOM. A plain hover never peeks: the peek exists so
|
|
6
|
+
* a drag can still land on a specific column inside a folded band, and the
|
|
7
|
+
* board only feeds the controller drag events.
|
|
6
8
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* band for a short linger. The band renders as separate elements (its
|
|
15
|
-
* caption, then its columns in each lane), so moving from the caption
|
|
16
|
-
* down into a column crosses an element boundary; without the linger the
|
|
17
|
-
* band would fold under the pointer and the slot would peek it straight
|
|
18
|
-
* back open.
|
|
9
|
+
* One rule keeps a peek from fighting the drag: it ends only after the drag
|
|
10
|
+
* has left every part of the open band for a short linger. The band renders
|
|
11
|
+
* as separate elements (its caption, then its columns in each lane), so
|
|
12
|
+
* moving from the caption down into a column crosses an element boundary;
|
|
13
|
+
* without the linger the band would fold under the card and the slot would
|
|
14
|
+
* peek it straight back open. The end of the drag, wherever it lands, ends
|
|
15
|
+
* the peek at once.
|
|
19
16
|
*/
|
|
20
|
-
/** How long a
|
|
17
|
+
/** How long a dragged card rests on a folded slot before the band peeks open. */
|
|
21
18
|
const KANBAN_BAND_PEEK_DELAY_MS = 400;
|
|
22
|
-
/** How long the
|
|
19
|
+
/** How long the drag may be outside an open band before the peek ends. */
|
|
23
20
|
const KANBAN_BAND_PEEK_LINGER_MS = 150;
|
|
24
21
|
const hostScheduler = (callback, ms) => {
|
|
25
22
|
const timer = setTimeout(callback, ms);
|
|
@@ -27,7 +24,6 @@ const hostScheduler = (callback, ms) => {
|
|
|
27
24
|
};
|
|
28
25
|
const createBandPeekController = ({ onChange, delayMs = 400, lingerMs = 150, schedule = hostScheduler }) => {
|
|
29
26
|
let peekingBandId = null;
|
|
30
|
-
let suppressedBandId = null;
|
|
31
27
|
let cancelOpen = null;
|
|
32
28
|
let openingBandId = null;
|
|
33
29
|
let cancelEnd = null;
|
|
@@ -57,8 +53,8 @@ const createBandPeekController = ({ onChange, delayMs = 400, lingerMs = 150, sch
|
|
|
57
53
|
}
|
|
58
54
|
};
|
|
59
55
|
return {
|
|
60
|
-
|
|
61
|
-
if (
|
|
56
|
+
slotDragOver: (bandId) => {
|
|
57
|
+
if (peekingBandId === bandId || openingBandId === bandId) return;
|
|
62
58
|
clearOpenTimer();
|
|
63
59
|
openingBandId = bandId;
|
|
64
60
|
cancelOpen = schedule(() => {
|
|
@@ -68,28 +64,22 @@ const createBandPeekController = ({ onChange, delayMs = 400, lingerMs = 150, sch
|
|
|
68
64
|
setPeeking(bandId);
|
|
69
65
|
}, delayMs);
|
|
70
66
|
},
|
|
71
|
-
|
|
67
|
+
slotDragLeave: (bandId) => {
|
|
72
68
|
if (openingBandId === bandId) clearOpenTimer();
|
|
73
|
-
if (suppressedBandId === bandId) suppressedBandId = null;
|
|
74
69
|
},
|
|
75
|
-
|
|
70
|
+
openDragEnter: (bandId) => {
|
|
76
71
|
if (peekingBandId === bandId) clearEndTimer();
|
|
77
72
|
},
|
|
78
|
-
|
|
73
|
+
openDragLeave: (bandId) => {
|
|
79
74
|
if (peekingBandId !== bandId || cancelEnd !== null) return;
|
|
80
75
|
cancelEnd = schedule(() => {
|
|
81
76
|
cancelEnd = null;
|
|
82
77
|
setPeeking(null);
|
|
83
78
|
}, lingerMs);
|
|
84
79
|
},
|
|
85
|
-
foldedUnderPointer: (bandId) => {
|
|
86
|
-
bandFolded(bandId);
|
|
87
|
-
suppressedBandId = bandId;
|
|
88
|
-
},
|
|
89
80
|
bandFolded,
|
|
90
81
|
bandExpanded: (bandId) => {
|
|
91
82
|
if (openingBandId === bandId) clearOpenTimer();
|
|
92
|
-
if (suppressedBandId === bandId) suppressedBandId = null;
|
|
93
83
|
if (peekingBandId === bandId) {
|
|
94
84
|
clearEndTimer();
|
|
95
85
|
setPeeking(null);
|
|
@@ -97,7 +87,11 @@ const createBandPeekController = ({ onChange, delayMs = 400, lingerMs = 150, sch
|
|
|
97
87
|
},
|
|
98
88
|
slotUnmounted: (bandId) => {
|
|
99
89
|
if (openingBandId === bandId) clearOpenTimer();
|
|
100
|
-
|
|
90
|
+
},
|
|
91
|
+
dragEnded: () => {
|
|
92
|
+
clearOpenTimer();
|
|
93
|
+
clearEndTimer();
|
|
94
|
+
setPeeking(null);
|
|
101
95
|
},
|
|
102
96
|
dispose: () => {
|
|
103
97
|
clearOpenTimer();
|
|
@@ -13,11 +13,18 @@ type KanbanColumnHeaderProps = {
|
|
|
13
13
|
dragHandle?: ReactNode;
|
|
14
14
|
/** Column menu. */
|
|
15
15
|
actions?: ReactNode;
|
|
16
|
+
/** Extra classes, e.g. to opt a caller out of the default row height. */
|
|
17
|
+
className?: string;
|
|
16
18
|
};
|
|
17
19
|
/**
|
|
18
20
|
* The column header row: one rhythm for the swatch, the name, the count, the
|
|
19
21
|
* calculation, and the column's controls, so every board's header lines up.
|
|
22
|
+
*
|
|
23
|
+
* Fixed at `TOOLBAR_ROW_HEIGHT`, the same height as the page header, the view
|
|
24
|
+
* switcher, and the inspector rail's cells, so a column's top edge lines up
|
|
25
|
+
* with every other chrome row above the board. The title clips instead of
|
|
26
|
+
* wrapping so a long name can never grow the row past that height.
|
|
20
27
|
*/
|
|
21
|
-
declare const KanbanColumnHeader: ({ swatch, title, meta, calculation, dragHandle, actions }: KanbanColumnHeaderProps) => import("react").JSX.Element;
|
|
28
|
+
declare const KanbanColumnHeader: ({ swatch, title, meta, calculation, dragHandle, actions, className }: KanbanColumnHeaderProps) => import("react").JSX.Element;
|
|
22
29
|
//#endregion
|
|
23
30
|
export { KanbanColumnHeader, KanbanColumnHeaderProps };
|
|
@@ -1,11 +1,18 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { TOOLBAR_ROW_HEIGHT } from "../inspector/layout-tokens.js";
|
|
1
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
4
|
//#region src/kanban/column-header.tsx
|
|
3
5
|
/**
|
|
4
6
|
* The column header row: one rhythm for the swatch, the name, the count, the
|
|
5
7
|
* calculation, and the column's controls, so every board's header lines up.
|
|
8
|
+
*
|
|
9
|
+
* Fixed at `TOOLBAR_ROW_HEIGHT`, the same height as the page header, the view
|
|
10
|
+
* switcher, and the inspector rail's cells, so a column's top edge lines up
|
|
11
|
+
* with every other chrome row above the board. The title clips instead of
|
|
12
|
+
* wrapping so a long name can never grow the row past that height.
|
|
6
13
|
*/
|
|
7
|
-
const KanbanColumnHeader = ({ swatch, title, meta, calculation, dragHandle, actions }) => /* @__PURE__ */ jsxs("div", {
|
|
8
|
-
className: "flex items-center gap-2 px-3
|
|
14
|
+
const KanbanColumnHeader = ({ swatch, title, meta, calculation, dragHandle, actions, className }) => /* @__PURE__ */ jsxs("div", {
|
|
15
|
+
className: cn("flex items-center gap-2 px-3", TOOLBAR_ROW_HEIGHT, className),
|
|
9
16
|
children: [
|
|
10
17
|
swatch,
|
|
11
18
|
/* @__PURE__ */ jsxs("span", {
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
2
2
|
//#region src/kanban/drag-interactions.d.ts
|
|
3
3
|
type AtlaskitDraggableOptions = Parameters<typeof draggable>[0];
|
|
4
|
+
/**
|
|
5
|
+
* Marks a card drag on the native `DataTransfer` so the board's native
|
|
6
|
+
* `dragover`/`dragenter`/`dragleave` listeners (which also see reorders,
|
|
7
|
+
* file drops, and any other native drag passing over the board) can tell a
|
|
8
|
+
* kanban card drag from everything else. Pragmatic's `getInitialData` never
|
|
9
|
+
* reaches those native events; only data attached this way does.
|
|
10
|
+
*/
|
|
11
|
+
declare const KANBAN_CARD_DRAG_MIME: "application/x-stella-kanban-card";
|
|
4
12
|
type RegisterKanbanCardDragOptions = {
|
|
5
13
|
/** The drag wrapper rendered by `KanbanCardShell`. */
|
|
6
14
|
element: AtlaskitDraggableOptions["element"];
|
|
@@ -32,4 +40,4 @@ type RegisterKanbanBoardAutoScrollOptions = {
|
|
|
32
40
|
/** Register horizontal auto-scroll at the board's overflow boundary. */
|
|
33
41
|
declare const registerKanbanBoardAutoScroll: ({ element, sources }: RegisterKanbanBoardAutoScrollOptions) => (() => void);
|
|
34
42
|
//#endregion
|
|
35
|
-
export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag };
|
|
43
|
+
export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag };
|
|
@@ -6,6 +6,14 @@ import { centerUnderPointer } from "@atlaskit/pragmatic-drag-and-drop/element/ce
|
|
|
6
6
|
import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
|
|
7
7
|
//#region src/kanban/drag-interactions.ts
|
|
8
8
|
/**
|
|
9
|
+
* Marks a card drag on the native `DataTransfer` so the board's native
|
|
10
|
+
* `dragover`/`dragenter`/`dragleave` listeners (which also see reorders,
|
|
11
|
+
* file drops, and any other native drag passing over the board) can tell a
|
|
12
|
+
* kanban card drag from everything else. Pragmatic's `getInitialData` never
|
|
13
|
+
* reaches those native events; only data attached this way does.
|
|
14
|
+
*/
|
|
15
|
+
const KANBAN_CARD_DRAG_MIME = "application/x-stella-kanban-card";
|
|
16
|
+
/**
|
|
9
17
|
* Register the standard kanban card drag source and native preview.
|
|
10
18
|
*
|
|
11
19
|
* Movement remains with the caller: the package does not inspect the drag data
|
|
@@ -15,6 +23,7 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
|
|
|
15
23
|
const registerKanbanCardDrag = ({ element, getInitialData, canDrag, onDragStart, onDrop }) => draggable({
|
|
16
24
|
element,
|
|
17
25
|
getInitialData,
|
|
26
|
+
getInitialDataForExternal: () => ({ [KANBAN_CARD_DRAG_MIME]: "" }),
|
|
18
27
|
...canDrag === void 0 ? {} : { canDrag },
|
|
19
28
|
...onDragStart === void 0 ? {} : { onDragStart },
|
|
20
29
|
...onDrop === void 0 ? {} : { onDrop },
|
|
@@ -50,4 +59,4 @@ const registerKanbanBoardAutoScroll = ({ element, sources }) => {
|
|
|
50
59
|
}));
|
|
51
60
|
};
|
|
52
61
|
//#endregion
|
|
53
|
-
export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag };
|
|
62
|
+
export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, registerKanbanBoardAutoScroll, registerKanbanCardDrag };
|
package/dist/kanban/index.d.ts
CHANGED
|
@@ -9,8 +9,8 @@ import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./column-header.js"
|
|
|
9
9
|
import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSortableCellPosition, KanbanVirtualScrollRequest, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
|
|
10
10
|
import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanCardDragSurfaceProps, KanbanDragCancelEvent, KanbanDragEndEvent, KanbanDragHandle, KanbanDragHandleProps, KanbanDragOverEvent, KanbanDragStartEvent, KanbanSortableActivationMode, KanbanSortableBindings, KanbanSortableBoard, KanbanSortableBoardProps, KanbanSortableColumns, KanbanSortableColumnsProps, KanbanSortableList, KanbanSortableListProps, UseKanbanDropTargetOptions, UseKanbanSortableOptions, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
|
|
11
11
|
import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./sortable-edge.js";
|
|
12
|
-
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
|
|
12
|
+
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
|
|
13
13
|
import { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./subgroup-board.js";
|
|
14
14
|
import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./band-peek.js";
|
|
15
15
|
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext } from "./virtual-cell.js";
|
|
16
|
-
export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
|
|
16
|
+
export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
|
package/dist/kanban/index.js
CHANGED
|
@@ -9,8 +9,8 @@ import { KanbanColumnHeader } from "./column-header.js";
|
|
|
9
9
|
import { KANBAN_BOARD_COLLISION_DETECTION, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
|
|
10
10
|
import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
|
|
11
11
|
import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge } from "./sortable-edge.js";
|
|
12
|
-
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
|
|
12
|
+
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
|
|
13
13
|
import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./band-peek.js";
|
|
14
14
|
import { KanbanSubgroupBoard } from "./subgroup-board.js";
|
|
15
15
|
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell } from "./virtual-cell.js";
|
|
16
|
-
export { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
|
|
16
|
+
export { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
|
|
@@ -40,7 +40,19 @@ type KanbanSortableBoardProps = {
|
|
|
40
40
|
sensors?: DndContextProps["sensors"] | undefined;
|
|
41
41
|
/** Overrides dnd-kit's screen-reader announcements when supplied. */
|
|
42
42
|
accessibility?: DndContextProps["accessibility"] | undefined;
|
|
43
|
+
/**
|
|
44
|
+
* Fires on drag start and on every drag end or cancel; a board over a
|
|
45
|
+
* `KanbanSubgroupBoard` combines the two into that board's `isDragging`
|
|
46
|
+
* (`true` here, `false` on `onDragEnd`/`onDragCancel`).
|
|
47
|
+
*/
|
|
43
48
|
onDragStart?: ((event: KanbanDragStartEvent) => void) | undefined;
|
|
49
|
+
/**
|
|
50
|
+
* Fires whenever dnd-kit's collision detection changes the drop target
|
|
51
|
+
* the drag is over, `event.over` included when it becomes none. A board
|
|
52
|
+
* over a `KanbanSubgroupBoard` maps `event.over?.id ?? null` to a band id
|
|
53
|
+
* (via `KanbanSubgroupCellContext.band`, or a droppable registered for a
|
|
54
|
+
* folded band's slot) to drive that board's `dragOverBandId`.
|
|
55
|
+
*/
|
|
44
56
|
onDragOver?: ((event: KanbanDragOverEvent) => void) | undefined;
|
|
45
57
|
onDragCancel?: ((event: KanbanDragCancelEvent) => void) | undefined;
|
|
46
58
|
/** Called once mounted child drop targets can safely receive input. */
|
|
@@ -16,6 +16,12 @@ type KanbanSubgroupCellContext<TRow> = {
|
|
|
16
16
|
/** Number of rows in this lane/column intersection, including zero. */
|
|
17
17
|
count: number;
|
|
18
18
|
laneValue: string | null;
|
|
19
|
+
/**
|
|
20
|
+
* The band this cell's column belongs to, or `null` outside any band. Lets
|
|
21
|
+
* a host that drives its own drag-and-drop (see `dragOverBandId` on the
|
|
22
|
+
* board) map a cell's droppable id back to the band it should report.
|
|
23
|
+
*/
|
|
24
|
+
band: KanbanColumnBand | null;
|
|
19
25
|
};
|
|
20
26
|
type KanbanSubgroupBandHeaderContext = {
|
|
21
27
|
band: KanbanColumnBand;
|
|
@@ -31,9 +37,9 @@ type KanbanSubgroupBandHeaderContext = {
|
|
|
31
37
|
*/
|
|
32
38
|
folded: boolean;
|
|
33
39
|
/**
|
|
34
|
-
* A custom caption
|
|
35
|
-
*
|
|
36
|
-
*
|
|
40
|
+
* A custom caption may report which way it was activated (pointer vs.
|
|
41
|
+
* keyboard); the board itself has no use for the distinction and passes
|
|
42
|
+
* it through unread, purely as information for a host's own header.
|
|
37
43
|
*/
|
|
38
44
|
onCollapsedChange: (collapsed: boolean, activation?: KanbanBandToggleActivation) => void;
|
|
39
45
|
};
|
|
@@ -82,6 +88,27 @@ type KanbanSubgroupBoardProps<TRow> = {
|
|
|
82
88
|
formatCount?: ((count: number) => ReactNode) | undefined;
|
|
83
89
|
footer?: ReactNode;
|
|
84
90
|
className?: string | undefined;
|
|
91
|
+
/**
|
|
92
|
+
* The band whose folded slot (or, for a peeked band, whose open part) the
|
|
93
|
+
* host's own drag is currently over, or `null` when it is over neither.
|
|
94
|
+
* Omit (`undefined`) when the host does not drive drags itself — the
|
|
95
|
+
* board's native `dragover`/`dragenter`/`dragleave` listeners already feed
|
|
96
|
+
* the peek controller in that case. A host drives its own drag when it
|
|
97
|
+
* builds the drop targets itself (for example a `KanbanSortableBoard`,
|
|
98
|
+
* whose `onDragOver` reports the active `over` droppable); it maps that
|
|
99
|
+
* droppable back to a band id — a folded cell's context and an open
|
|
100
|
+
* cell's context (see `KanbanSubgroupCellContext.band`) both carry the
|
|
101
|
+
* band — and passes it here. The controller treats "over the band" as
|
|
102
|
+
* entering the open band when it is already peeked, and as hovering its
|
|
103
|
+
* folded slot otherwise; leaving it is reported the same way.
|
|
104
|
+
*/
|
|
105
|
+
dragOverBandId?: string | null | undefined;
|
|
106
|
+
/**
|
|
107
|
+
* Whether the host's own drag (see `dragOverBandId`) is in progress.
|
|
108
|
+
* Flipping to `false` ends any peek immediately, mirroring the native
|
|
109
|
+
* `dragend`/`drop` listeners the board installs for its own drags.
|
|
110
|
+
*/
|
|
111
|
+
isDragging?: boolean | undefined;
|
|
85
112
|
} & KanbanSubgroupCollapseControl;
|
|
86
113
|
/**
|
|
87
114
|
* Reusable swimlane layout over the canonical two-axis Kanban matrix.
|
|
@@ -89,12 +116,12 @@ type KanbanSubgroupBoardProps<TRow> = {
|
|
|
89
116
|
* Columns that carry band metadata render under a one-line band caption and
|
|
90
117
|
* can be collapsed as a run: the band folds into one narrow slot in every
|
|
91
118
|
* row, whose cells stay reachable (a host renders its drop target in them),
|
|
92
|
-
* and peeks open while a
|
|
93
|
-
* specific column inside. Every row is laid out span by span with the same
|
|
119
|
+
* and peeks open while a dragged card rests on it, so a drag can still land
|
|
120
|
+
* on a specific column inside; a plain hover never opens it. Every row is laid out span by span with the same
|
|
94
121
|
* widths, which is what keeps captions, headers, counts, and cells aligned
|
|
95
122
|
* in every state; the caption line never grows past its own height, so a
|
|
96
123
|
* folded band costs no vertical space.
|
|
97
124
|
*/
|
|
98
|
-
declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
|
|
125
|
+
declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
|
|
99
126
|
//#endregion
|
|
100
127
|
export { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext };
|
|
@@ -2,10 +2,11 @@ import { cn } from "../lib/utils.js";
|
|
|
2
2
|
import { DirectionalIcon } from "../components/directional-icon.js";
|
|
3
3
|
import { KanbanColumnBandHeader } from "./column-band-header.js";
|
|
4
4
|
import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_CLASS, resolveKanbanColumnBands } from "./column-bands.js";
|
|
5
|
+
import { KANBAN_CARD_DRAG_MIME } from "./drag-interactions.js";
|
|
5
6
|
import { createBandPeekController } from "./band-peek.js";
|
|
6
7
|
import { ChevronDownIcon } from "lucide-react";
|
|
7
8
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
import { useEffect, useMemo, useState } from "react";
|
|
9
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
9
10
|
//#region src/kanban/subgroup-board.tsx
|
|
10
11
|
const groupValueKey = (value) => value === null ? "null" : `value:${value.length}:${value}`;
|
|
11
12
|
const columnKey = (column) => column.type === "group" ? `group:${groupValueKey(column.group.value)}` : `destination:${column.destination.id}`;
|
|
@@ -17,19 +18,48 @@ const rowsIn = (cells) => cells.reduce((sum, cell) => sum + cell.rows.length, 0)
|
|
|
17
18
|
* Columns that carry band metadata render under a one-line band caption and
|
|
18
19
|
* can be collapsed as a run: the band folds into one narrow slot in every
|
|
19
20
|
* row, whose cells stay reachable (a host renders its drop target in them),
|
|
20
|
-
* and peeks open while a
|
|
21
|
-
* specific column inside. Every row is laid out span by span with the same
|
|
21
|
+
* and peeks open while a dragged card rests on it, so a drag can still land
|
|
22
|
+
* on a specific column inside; a plain hover never opens it. Every row is laid out span by span with the same
|
|
22
23
|
* widths, which is what keeps captions, headers, counts, and cells aligned
|
|
23
24
|
* in every state; the caption line never grows past its own height, so a
|
|
24
25
|
* folded band costs no vertical space.
|
|
25
26
|
*/
|
|
26
|
-
const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }) => {
|
|
27
|
+
const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }) => {
|
|
27
28
|
const [collapsedLaneValues, setCollapsedLaneValues] = useState(() => /* @__PURE__ */ new Set());
|
|
28
29
|
const [expandedEmptyLaneValues, setExpandedEmptyLaneValues] = useState(() => /* @__PURE__ */ new Set());
|
|
29
30
|
const [collapsedBandIds, setCollapsedBandIds] = useState(() => /* @__PURE__ */ new Set());
|
|
30
31
|
const [peekingBandId, setPeekingBandId] = useState(null);
|
|
31
32
|
const [peek] = useState(() => createBandPeekController({ onChange: setPeekingBandId }));
|
|
32
33
|
useEffect(() => () => peek.dispose(), [peek]);
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
const end = () => peek.dragEnded();
|
|
36
|
+
window.addEventListener("dragend", end);
|
|
37
|
+
window.addEventListener("drop", end);
|
|
38
|
+
return () => {
|
|
39
|
+
window.removeEventListener("dragend", end);
|
|
40
|
+
window.removeEventListener("drop", end);
|
|
41
|
+
};
|
|
42
|
+
}, [peek]);
|
|
43
|
+
const previousDragOverBandId = useRef(null);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (dragOverBandId === void 0 || dragOverBandId === previousDragOverBandId.current) return;
|
|
46
|
+
const previous = previousDragOverBandId.current;
|
|
47
|
+
previousDragOverBandId.current = dragOverBandId;
|
|
48
|
+
if (previous !== null) if (peekingBandId === previous) peek.openDragLeave(previous);
|
|
49
|
+
else peek.slotDragLeave(previous);
|
|
50
|
+
if (dragOverBandId !== null) if (peekingBandId === dragOverBandId) peek.openDragEnter(dragOverBandId);
|
|
51
|
+
else peek.slotDragOver(dragOverBandId);
|
|
52
|
+
}, [
|
|
53
|
+
dragOverBandId,
|
|
54
|
+
peek,
|
|
55
|
+
peekingBandId
|
|
56
|
+
]);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
if (isDragging === false) {
|
|
59
|
+
previousDragOverBandId.current = null;
|
|
60
|
+
peek.dragEnded();
|
|
61
|
+
}
|
|
62
|
+
}, [isDragging, peek]);
|
|
33
63
|
const { cellsByLaneValue, countByColumnValue, ungroupedCells } = useMemo(() => {
|
|
34
64
|
const laneCells = /* @__PURE__ */ new Map();
|
|
35
65
|
const columnCounts = /* @__PURE__ */ new Map();
|
|
@@ -89,11 +119,9 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
89
119
|
useEffect(() => {
|
|
90
120
|
if (staleBandId !== null) peek.bandExpanded(staleBandId);
|
|
91
121
|
}, [peek, staleBandId]);
|
|
92
|
-
const setBandCollapsed = (band, collapsed
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
else if (viaPointer) peek.foldedUnderPointer(band.id);
|
|
96
|
-
else peek.bandFolded(band.id);
|
|
122
|
+
const setBandCollapsed = (band, collapsed) => {
|
|
123
|
+
if (collapsed) peek.bandFolded(band.id);
|
|
124
|
+
else peek.bandExpanded(band.id);
|
|
97
125
|
if (onBandCollapsedChange) {
|
|
98
126
|
onBandCollapsedChange(band, collapsed);
|
|
99
127
|
return;
|
|
@@ -126,11 +154,15 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
126
154
|
return /* @__PURE__ */ jsx("div", {
|
|
127
155
|
className: "flex gap-3",
|
|
128
156
|
"data-kanban-band": band?.id,
|
|
129
|
-
|
|
130
|
-
|
|
157
|
+
onDragEnter: band === null ? void 0 : (event) => {
|
|
158
|
+
if (isKanbanCardDragEvent(event)) peek.openDragEnter(band.id);
|
|
159
|
+
},
|
|
160
|
+
onDragLeave: band === null ? void 0 : (event) => {
|
|
161
|
+
if (leavesElement(event) && isKanbanCardDragEvent(event)) peek.openDragLeave(band.id);
|
|
162
|
+
},
|
|
131
163
|
children: span.columns.map((column) => /* @__PURE__ */ jsx("div", {
|
|
132
164
|
className: KANBAN_COLUMN_WIDTH_CLASS,
|
|
133
|
-
children: renderColumn(column)
|
|
165
|
+
children: renderColumn(column, band)
|
|
134
166
|
}, columnKey(column)))
|
|
135
167
|
}, spanKey(span));
|
|
136
168
|
})
|
|
@@ -144,7 +176,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
144
176
|
columns: span.columns,
|
|
145
177
|
count: span.columns.reduce((sum, column) => sum + columnCount(column), 0),
|
|
146
178
|
folded,
|
|
147
|
-
onCollapsedChange: (next
|
|
179
|
+
onCollapsedChange: (next) => setBandCollapsed(band, next)
|
|
148
180
|
};
|
|
149
181
|
if (renderBandHeader) return /* @__PURE__ */ jsx(Fragment, { children: renderBandHeader(context) });
|
|
150
182
|
return /* @__PURE__ */ jsx(KanbanColumnBandHeader, {
|
|
@@ -214,8 +246,12 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
214
246
|
className: "border-border/60 shrink-0 border-b",
|
|
215
247
|
"data-kanban-band": band.id,
|
|
216
248
|
style: { width: `${String(spanWidth(span))}px` },
|
|
217
|
-
|
|
218
|
-
|
|
249
|
+
onDragEnter: (event) => {
|
|
250
|
+
if (isKanbanCardDragEvent(event)) peek.openDragEnter(band.id);
|
|
251
|
+
},
|
|
252
|
+
onDragLeave: (event) => {
|
|
253
|
+
if (leavesElement(event) && isKanbanCardDragEvent(event)) peek.openDragLeave(band.id);
|
|
254
|
+
},
|
|
219
255
|
children: bandHeader(band, span)
|
|
220
256
|
}, spanKey(span));
|
|
221
257
|
})
|
|
@@ -229,9 +265,10 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
229
265
|
}),
|
|
230
266
|
ungroupedCells.length === 0 ? null : renderRow({
|
|
231
267
|
className: "pb-1",
|
|
232
|
-
renderColumn: (column) => {
|
|
268
|
+
renderColumn: (column, band) => {
|
|
233
269
|
const cell = ungroupedCells.find((candidate) => columnKey(candidate.coordinate.column) === columnKey(column));
|
|
234
270
|
return cell === void 0 ? null : /* @__PURE__ */ jsx(Fragment, { children: renderCell({
|
|
271
|
+
band,
|
|
235
272
|
cell,
|
|
236
273
|
count: cell.rows.length,
|
|
237
274
|
laneValue: null
|
|
@@ -291,9 +328,10 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
291
328
|
}),
|
|
292
329
|
!collapsed && renderRow({
|
|
293
330
|
className: "pb-1",
|
|
294
|
-
renderColumn: (column) => {
|
|
331
|
+
renderColumn: (column, band) => {
|
|
295
332
|
const cell = cellFor(column);
|
|
296
333
|
return cell === void 0 ? null : /* @__PURE__ */ jsx(Fragment, { children: renderCell({
|
|
334
|
+
band,
|
|
297
335
|
cell,
|
|
298
336
|
count: cell.rows.length,
|
|
299
337
|
laneValue: group.value
|
|
@@ -310,9 +348,20 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
310
348
|
});
|
|
311
349
|
};
|
|
312
350
|
/**
|
|
313
|
-
*
|
|
314
|
-
*
|
|
315
|
-
|
|
351
|
+
* Whether a drag-leave event actually leaves `currentTarget` rather than
|
|
352
|
+
* moving between its descendants, which fire leave/enter pairs of their own.
|
|
353
|
+
*/
|
|
354
|
+
const leavesElement = (event) => !(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget));
|
|
355
|
+
/**
|
|
356
|
+
* Whether a native drag event is a kanban card drag, rather than some other
|
|
357
|
+
* native drag (a column reorder, a file, text) passing over the board. Only
|
|
358
|
+
* a card drag should ever open or hold a band's peek.
|
|
359
|
+
*/
|
|
360
|
+
const isKanbanCardDragEvent = (event) => event.dataTransfer.types.includes(KANBAN_CARD_DRAG_MIME);
|
|
361
|
+
/**
|
|
362
|
+
* The narrow slot a folded band occupies in a row. Its drag events go to
|
|
363
|
+
* the board's peek controller, which decides when a resting drag peeks the
|
|
364
|
+
* band open.
|
|
316
365
|
*/
|
|
317
366
|
const FoldedBandSlot = ({ band, children, className, peek }) => {
|
|
318
367
|
useEffect(() => () => peek.slotUnmounted(band.id), [peek, band.id]);
|
|
@@ -320,8 +369,12 @@ const FoldedBandSlot = ({ band, children, className, peek }) => {
|
|
|
320
369
|
className,
|
|
321
370
|
"data-kanban-band": band.id,
|
|
322
371
|
"data-kanban-band-collapsed": "",
|
|
323
|
-
|
|
324
|
-
|
|
372
|
+
onDragOver: (event) => {
|
|
373
|
+
if (isKanbanCardDragEvent(event)) peek.slotDragOver(band.id);
|
|
374
|
+
},
|
|
375
|
+
onDragLeave: (event) => {
|
|
376
|
+
if (leavesElement(event) && isKanbanCardDragEvent(event)) peek.slotDragLeave(band.id);
|
|
377
|
+
},
|
|
325
378
|
children
|
|
326
379
|
});
|
|
327
380
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stll/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.19.0",
|
|
4
4
|
"description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"base-ui",
|
|
@@ -89,6 +89,10 @@
|
|
|
89
89
|
"types": "./dist/components/command.d.ts",
|
|
90
90
|
"import": "./dist/components/command.js"
|
|
91
91
|
},
|
|
92
|
+
"./composer": {
|
|
93
|
+
"types": "./dist/components/composer.d.ts",
|
|
94
|
+
"import": "./dist/components/composer.js"
|
|
95
|
+
},
|
|
92
96
|
"./control-size": {
|
|
93
97
|
"types": "./dist/lib/control-size.d.ts",
|
|
94
98
|
"import": "./dist/lib/control-size.js"
|
|
@@ -157,6 +161,10 @@
|
|
|
157
161
|
"types": "./dist/components/label.d.ts",
|
|
158
162
|
"import": "./dist/components/label.js"
|
|
159
163
|
},
|
|
164
|
+
"./landing": {
|
|
165
|
+
"types": "./dist/components/landing.d.ts",
|
|
166
|
+
"import": "./dist/components/landing.js"
|
|
167
|
+
},
|
|
160
168
|
"./menu": {
|
|
161
169
|
"types": "./dist/components/menu.d.ts",
|
|
162
170
|
"import": "./dist/components/menu.js"
|