@eifi1/ui-kit 0.50.1 → 0.51.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/README.md +11 -9
- package/dist/admin/user-roster.js +31 -12
- package/dist/admin/user-roster.js.map +1 -1
- package/dist/auth/verify-email.d.ts +4 -0
- package/dist/auth/verify-email.js.map +1 -1
- package/dist/components/alert-banner.d.ts +9 -0
- package/dist/components/alert-banner.js +9 -5
- package/dist/components/alert-banner.js.map +1 -1
- package/dist/components/button-look.d.ts +4 -19
- package/dist/components/button-look.js +3 -30
- package/dist/components/button-look.js.map +1 -1
- package/dist/components/data-table-fit.js.map +1 -1
- package/dist/components/data-table-virtual.js +1 -0
- package/dist/components/data-table-virtual.js.map +1 -1
- package/dist/components/field-base.d.ts +31 -1
- package/dist/components/field-base.js +28 -0
- package/dist/components/field-base.js.map +1 -1
- package/dist/components/floating-panel.d.ts +6 -13
- package/dist/components/floating-panel.js +2 -9
- package/dist/components/floating-panel.js.map +1 -1
- package/dist/components/icon-button.js +3 -5
- package/dist/components/icon-button.js.map +1 -1
- package/dist/components/select.js +3 -2
- package/dist/components/select.js.map +1 -1
- package/dist/components/stat-tile.d.ts +8 -1
- package/dist/components/stat-tile.js +7 -3
- package/dist/components/stat-tile.js.map +1 -1
- package/dist/eslint/index.js +1 -1
- package/dist/i18n/german.js +2 -0
- package/dist/i18n/german.js.map +1 -1
- package/dist/i18n/kit-labels.d.ts +2 -2
- package/dist/i18n/kit-labels.js.map +1 -1
- package/dist/i18n/locales/en.js +2 -0
- package/dist/i18n/locales/en.js.map +2 -2
- package/dist/i18n/locales/es.js +2 -0
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.js +2 -0
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hu.js +2 -0
- package/dist/i18n/locales/hu.js.map +1 -1
- package/dist/i18n/locales/it.js +2 -0
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/zh.js +2 -0
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/landing/page-seo.d.ts +19 -11
- package/dist/landing/page-seo.js +11 -7
- package/dist/landing/page-seo.js.map +1 -1
- package/dist/landing/public-page.d.ts +57 -0
- package/dist/landing/public-page.js +45 -0
- package/dist/landing/public-page.js.map +1 -0
- package/dist/lib/server-wake.d.ts +3 -2
- package/dist/lib/server-wake.js +19 -13
- package/dist/lib/server-wake.js.map +1 -1
- package/dist/shell/app-shell.d.ts +2 -15
- package/dist/shell/app-shell.js +7 -26
- package/dist/shell/app-shell.js.map +1 -1
- package/dist/shell/dev-menu.d.ts +98 -0
- package/dist/shell/dev-menu.js +133 -0
- package/dist/shell/dev-menu.js.map +1 -0
- package/dist/shell/dev-switchers.d.ts +6 -53
- package/dist/shell/dev-switchers.js +5 -100
- package/dist/shell/dev-switchers.js.map +1 -1
- package/dist/shell/top-bar-actions.d.ts +4 -1
- package/dist/shell/top-bar-actions.js.map +1 -1
- package/dist/shell/top-bar-parts-labels.d.ts +18 -9
- package/dist/shell/top-bar-parts-labels.js +2 -0
- package/dist/shell/top-bar-parts-labels.js.map +1 -1
- package/dist/shell/topbar-action-menu.d.ts +17 -2
- package/dist/shell/topbar-action-menu.js +3 -1
- package/dist/shell/topbar-action-menu.js.map +1 -1
- package/dist/shell.d.ts +3 -1
- package/dist/shell.js +3 -1
- package/dist/shell.js.map +1 -1
- package/dist/theme/palette-presets.d.ts +0 -3
- package/dist/theme/palette-presets.js +0 -2
- package/dist/theme/palette-presets.js.map +1 -1
- package/package.json +1 -1
- package/src/admin/user-roster.tsx +30 -10
- package/src/auth/verify-email.tsx +4 -0
- package/src/components/alert-banner.tsx +37 -10
- package/src/components/button-look.ts +7 -57
- package/src/components/data-table-fit.ts +4 -1
- package/src/components/data-table-virtual.ts +14 -1
- package/src/components/field-base.tsx +53 -1
- package/src/components/floating-panel.tsx +6 -28
- package/src/components/icon-button.tsx +6 -8
- package/src/components/select.tsx +3 -6
- package/src/components/stat-tile.tsx +27 -9
- package/src/i18n/german.ts +2 -0
- package/src/i18n/kit-labels.tsx +2 -2
- package/src/i18n/locales/es.ts +2 -0
- package/src/i18n/locales/fr.ts +2 -0
- package/src/i18n/locales/hu.ts +2 -0
- package/src/i18n/locales/it.ts +2 -0
- package/src/i18n/locales/zh.ts +2 -0
- package/src/index.ts +4 -1
- package/src/landing/page-seo.ts +28 -16
- package/src/landing/public-page.tsx +106 -0
- package/src/lib/server-wake.ts +41 -17
- package/src/shell/app-shell.tsx +11 -48
- package/src/shell/dev-menu.tsx +259 -0
- package/src/shell/dev-switchers.tsx +13 -174
- package/src/shell/top-bar-actions.tsx +4 -1
- package/src/shell/top-bar-parts-labels.ts +20 -9
- package/src/shell/topbar-action-menu.tsx +28 -2
- package/src/shell.ts +5 -1
- package/src/theme/palette-presets.ts +0 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/data-table-virtual.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { RefObject } from \"react\";\n\n// DataTable's row windowing (0.48.2, keksdose dev #632 — Marcel: \"The table is extremely\n// slow. Is it virtualised or is everytime the whole table rendered?\"). Opt-in through\n// `virtualize`: the desktop table renders the rows near the visible part of its scroller\n// (plus `overscan`) and stands spacer rows in for the rest, inside each group's own\n// `<tbody>`, so the sticky group bands keep working as they do on a full table — a band\n// cell's sticky containing block is the TABLE, and the latest band of each level that has\n// scrolled past is the one drawn (Chromium, checked with a probe at the group's middle,\n// its end and the next group's start).\n//\n// What it keeps rendered whatever the scroll: the header, the leading row, the band rows\n// of every group that has a rendered row (and the first day of the period the window\n// starts in, whose band is the period's), every OPEN row (`isExpanded`, so an inline\n// editor keeps its state), the roving tab stop, a row holding the focus, and the row the\n// keyboard is moving to.\n//\n// Heights: each rendered row is measured after render (the distance to the next row's\n// top, which is exact under collapsed borders where a row's own box is half a border\n// short) and remembered by its key; a row never rendered counts as the average of the\n// measured ones, or `estimateRowHeight` before any. The spacers are the sums, so the\n// scroll height settles as rows are seen. Scroll anchoring (the browser's) keeps the rows\n// in view still while a spacer above them is corrected.\n//\n// Column widths: in an auto table layout a column is as wide as its widest RENDERED\n// cell, so rows coming and going would move the columns. The header cells' widths are\n// read after the first render and locked into a `<colgroup>`, only ever growing while the\n// rows scroll (a wider cell arriving widens its column once; one leaving narrows\n// nothing). Re-measured from scratch when the data, the columns, a user width, the text\n// size or the scroller's width change — and when a grown column would push the table\n// past its scroller, which it fit before. A `grow` column and a user-resized one are not\n// locked (the first takes the rest, the second is pinned already).\n\n/** {@link DataTableProps.virtualize}'s options. */\nexport interface DataTableVirtualize {\n /** Rows rendered beyond each edge of the visible part. Default 12. */\n overscan?: number;\n /** A row's height in px before it has been measured. Default: 37 (`comfortable`) /\n * 29 (`compact`) — the kit's one-line rows. */\n estimateRowHeight?: number;\n}\n\n/** One innermost group's run of rows, `[start, end)` in the rows on screen, with the\n * band levels its `<tbody>` opens with. `first` is the index of the innermost group that\n * opens its level-1 group (itself with one level). Ungrouped: one run with no bands. */\nexport interface VirtualGroup {\n start: number;\n end: number;\n bands: readonly (1 | 2)[];\n first: number;\n}\n\n/** A row, or a spacer standing in for the rows between two rendered ones. */\nexport type VirtualItem = { kind: \"row\"; index: number } | { kind: \"gap\"; key: string; height: number };\n\n/** A group's `<tbody>` with its rendered rows, or one spacer `<tbody>` for a run of\n * groups of which nothing is rendered. */\nexport type VirtualBody =\n | { kind: \"spacer\"; key: string; height: number }\n | { kind: \"group\"; group: number; items: VirtualItem[] };\n\nexport interface RowWindow {\n bodies: VirtualBody[];\n /** `aria-rowcount`: every row of the table, header, bands, details and footer included. */\n rowCount: number;\n /** `aria-rowindex` of data row `i`; its detail row (open) is the next one. */\n ariaRow: (i: number) => number;\n /** `aria-rowindex` of group `g`'s band of `level`. */\n ariaBand: (g: number, level: 1 | 2) => number;\n /** The locked widths for the `<colgroup>`, by column key; null while measuring. */\n colWidths: Record<string, number> | null;\n /** Move the focus to row `i`, rendering it first when it is not. */\n focusRow: (i: number) => void;\n}\n\n/** The heights measured so far, by row key; the bands' by level. */\ninterface Measured {\n heights: Map<string | number, number>;\n details: Map<string | number, number>;\n sum: number;\n count: number;\n band: [number, number];\n}\n\nconst SELECT_KEY = \"\\u0000select\";\n/** The `<colgroup>` key of the selection column. */\nexport const VIRTUAL_SELECT_COL = SELECT_KEY;\n\ninterface Model {\n n: number;\n keys: (string | number)[];\n /** Top of row i, from the top of the first group's `<tbody>`. */\n tops: Float64Array;\n /** Full height of row i (its detail row included while open). */\n h: Float64Array;\n /** Top of group g's `<tbody>`; [groups.length] is the total. */\n gTop: Float64Array;\n total: number;\n ariaRows: Int32Array;\n ariaBands: Int32Array;\n rowCount: number;\n}\n\n/** First index whose bottom is below `y` (n when none). */\nfunction firstBelow(m: Model, y: number): number {\n let lo = 0;\n let hi = m.n;\n while (lo < hi) {\n const mid = (lo + hi) >> 1;\n if (m.tops[mid] + m.h[mid] > y) hi = mid;\n else lo = mid + 1;\n }\n return lo;\n}\n\n/** One past the last index whose top is above `y`. */\nfunction lastAbove(m: Model, y: number): number {\n let lo = 0;\n let hi = m.n;\n while (lo < hi) {\n const mid = (lo + hi) >> 1;\n if (m.tops[mid] < y) lo = mid + 1;\n else hi = mid;\n }\n return lo;\n}\n\n/** The `<tbody>`s to render: the groups holding a rendered row (or the period's first\n * day, for its band), and one spacer for each run of groups in between. Pure. */\nexport function planBodies(\n m: Pick<Model, \"n\" | \"tops\" | \"h\" | \"gTop\">,\n groups: readonly VirtualGroup[],\n start: number,\n end: number,\n pinned: readonly number[],\n): VirtualBody[] {\n const rendered = new Set<number>();\n for (let i = Math.max(0, start); i < Math.min(m.n, end); i++) rendered.add(i);\n for (const p of pinned) if (p >= 0 && p < m.n) rendered.add(p);\n const sorted = [...rendered].sort((a, b) => a - b);\n // The group the window starts in, and the first day of its period.\n let anchor = -1;\n if (sorted.length > 0 && start < m.n) {\n const s = Math.max(0, start);\n const g = groups.findIndex((gr) => s >= gr.start && s < gr.end);\n if (g >= 0) anchor = groups[g].first;\n }\n const bottom = (i: number) => m.tops[i] + m.h[i];\n const out: VirtualBody[] = [];\n let k = 0;\n let skippedFrom = -1;\n const flushSkipped = (upTo: number) => {\n if (skippedFrom < 0) return;\n out.push({ kind: \"spacer\", key: `vs:${skippedFrom}`, height: m.gTop[upTo] - m.gTop[skippedFrom] });\n skippedFrom = -1;\n };\n groups.forEach((g, gi) => {\n while (k < sorted.length && sorted[k] < g.start) k++;\n const items: VirtualItem[] = [];\n let prevBottom = m.tops[g.start] ?? m.gTop[gi + 1];\n let any = false;\n while (k < sorted.length && sorted[k] < g.end) {\n const i = sorted[k++];\n const gap = m.tops[i] - prevBottom;\n if (gap > 0.01) items.push({ kind: \"gap\", key: `gap:${i}`, height: gap });\n items.push({ kind: \"row\", index: i });\n prevBottom = bottom(i);\n any = true;\n }\n if (!any && gi !== anchor) {\n if (skippedFrom < 0) skippedFrom = gi;\n return;\n }\n flushSkipped(gi);\n const rest = m.gTop[gi + 1] - prevBottom;\n if (rest > 0.01) items.push({ kind: \"gap\", key: `gap:end:${gi}`, height: rest });\n out.push({ kind: \"group\", group: gi, items });\n });\n flushSkipped(groups.length);\n return out;\n}\n\nexport function useRowWindow<T>({\n enabled,\n rows,\n rowKey,\n groups,\n expanded,\n pinnedKeys,\n scrollerRef,\n tableRef,\n options,\n compact,\n rowsBefore,\n rowsAfter,\n colKeys,\n lockable,\n resetKey,\n}: {\n enabled: boolean;\n /** The rows on screen, in order. */\n rows: T[];\n rowKey: (row: T) => string | number;\n groups: readonly VirtualGroup[];\n /** Indices of the open rows: always rendered, their detail rows counted. */\n expanded: readonly number[];\n /** Keys always rendered (the roving tab stop). */\n pinnedKeys: readonly (string | number | null)[];\n scrollerRef: RefObject<HTMLElement | null>;\n tableRef: RefObject<HTMLTableElement | null>;\n options: DataTableVirtualize;\n compact: boolean;\n /** Rows above the first group: the header, the leading row. */\n rowsBefore: number;\n /** Rows after the last: the totals row. */\n rowsAfter: number;\n /** The header cells' keys, in order (the selection column as {@link VIRTUAL_SELECT_COL}). */\n colKeys: readonly string[];\n /** The keys whose width is locked (not a `grow` column, not a user-resized one). */\n lockable: ReadonlySet<string>;\n /** Anything that re-measures the column widths from scratch when it changes. */\n resetKey: string;\n}): RowWindow | null {\n const overscan = Math.max(1, options.overscan ?? 12);\n const estimate = options.estimateRowHeight ?? (compact ? 29 : 37);\n const n = rows.length;\n\n const [measured, setMeasured] = useState<Measured>(() => ({\n heights: new Map(),\n details: new Map(),\n sum: 0,\n count: 0,\n band: [estimate, estimate * 0.8],\n }));\n const initialEnd = () =>\n Math.min(n, Math.ceil((typeof window === \"undefined\" ? 800 : Math.min(window.innerHeight || 800, 1600)) / estimate) + overscan);\n const [range, setRange] = useState(() => ({ start: 0, end: initialEnd() }));\n const [focusTarget, setFocusTarget] = useState<number | null>(null);\n const [focusKey, setFocusKey] = useState<string | number | null>(null);\n const [scrollerWidth, setScrollerWidth] = useState(0);\n const [lock, setLock] = useState<{ sig: string; widths: Record<string, number> } | null>(null);\n const naturalOverflow = useRef(false);\n\n const expandedSig = expanded.join(\",\");\n const model = useMemo<Model | null>(() => {\n if (!enabled) return null;\n const keys = rows.map(rowKey);\n const avg = measured.count > 0 ? measured.sum / measured.count : estimate;\n const open = new Set(expanded);\n const h = new Float64Array(n);\n for (let i = 0; i < n; i++) {\n h[i] = (measured.heights.get(keys[i]) ?? avg) + (open.has(i) ? (measured.details.get(keys[i]) ?? 0) : 0);\n }\n const tops = new Float64Array(n + 1);\n const gTop = new Float64Array(groups.length + 1);\n const ariaRows = new Int32Array(n);\n const ariaBands = new Int32Array(groups.length * 2);\n let y = 0;\n let aria = rowsBefore + 1;\n groups.forEach((g, gi) => {\n gTop[gi] = y;\n for (const level of g.bands) {\n y += measured.band[level - 1];\n ariaBands[gi * 2 + level - 1] = aria++;\n }\n for (let i = g.start; i < g.end; i++) {\n tops[i] = y;\n y += h[i];\n ariaRows[i] = aria++;\n if (open.has(i)) aria++;\n }\n });\n gTop[groups.length] = y;\n tops[n] = y;\n return { n, keys, tops, h, gTop, total: y, ariaRows, ariaBands, rowCount: aria - 1 + rowsAfter };\n // `expanded` by its signature.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [enabled, rows, rowKey, groups, expandedSig, measured, estimate, n, rowsBefore, rowsAfter]);\n\n // The rows outside the range that stay: open rows, the tab stop, the focused row and\n // the keyboard's target.\n const pinned = useMemo(() => {\n if (!model) return [];\n const out = [...expanded];\n for (const key of [...pinnedKeys, focusKey]) {\n if (key === null) continue;\n const i = model.keys.indexOf(key);\n if (i >= 0) out.push(i);\n }\n if (focusTarget !== null) out.push(focusTarget);\n return out;\n }, [model, expanded, pinnedKeys, focusKey, focusTarget]);\n const pinnedSig = pinned.join(\",\");\n\n const start = Math.min(range.start, n);\n const end = Math.min(range.end, n);\n const bodies = useMemo(\n () => (model ? planBodies(model, groups, start, end, pinned) : []),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [model, groups, start, end, pinnedSig],\n );\n\n const lockSig = `${resetKey}|${scrollerWidth}|${colKeys.join(\",\")}`;\n const colWidths = lock && lock.sig === lockSig ? lock.widths : null;\n\n // What the scroll handler and the frame's measure read: this render's model and lock.\n const latest = useRef({ model, colWidths, lockSig, colKeys, lockable, overscan });\n useLayoutEffect(() => {\n latest.current = { model, colWidths, lockSig, colKeys, lockable, overscan };\n });\n\n // Which rows the visible part of the scroller (and of the window, for a table in a page\n // that scrolls) shows, and a new range around them when the rendered one no longer\n // covers them. Read from the client rects, which a scroll leaves laid out.\n const update = useCallback(() => {\n const { model: m, overscan: over } = latest.current;\n const sc = scrollerRef.current;\n const table = tableRef.current;\n if (!m || !sc || !table) return;\n const origin = table.querySelector<HTMLElement>(\"tbody[data-vt-body]\");\n if (!origin) return;\n const sr = sc.getBoundingClientRect();\n const top = Math.max(sr.top, 0);\n const bottom = Math.min(sr.bottom, window.innerHeight || sr.bottom);\n if (!(bottom > top)) return;\n const o = origin.getBoundingClientRect().top;\n const a = Math.min(firstBelow(m, top - o), m.n);\n const b = Math.max(a, Math.min(lastAbove(m, bottom - o), m.n));\n setRange((prev) =>\n prev.start <= a && prev.end >= b && prev.end <= m.n && prev.end - prev.start <= b - a + 4 * over\n ? prev\n : { start: Math.max(0, a - over), end: Math.min(m.n, b + over) },\n );\n }, [scrollerRef, tableRef]);\n\n // After a render that changed what is drawn: measure the rendered rows and bands, and\n // the header cells for the lock. Not after a render that only ticked a box. In the next\n // animation frame rather than in the commit: there the browser lays the table out once\n // for the frame anyway, where a read in the commit forced a layout of its own, and the\n // re-render the heights cause forced another (Chromium, 3000 rows: 35–130 ms of forced\n // layout per scrolled step, against one layout per frame now).\n const measure = useCallback(() => {\n const { model: m, colWidths: locked, lockSig: sig, colKeys: cols, lockable: lockKeys } = latest.current;\n const table = tableRef.current;\n const sc = scrollerRef.current;\n if (!m || !table || !sc) return;\n const trs = table.rows;\n const rects = Array.from(trs, (tr) => tr.getBoundingClientRect());\n const rowSamples: [string | number, number][] = [];\n const detailSamples: [string | number, number][] = [];\n const bandSamples: [0 | 1, number][] = [];\n for (let k = 0; k < trs.length; k++) {\n const own = rects[k];\n const next = rects[k + 1];\n // The distance to the next row's top: exact under collapsed borders.\n const h = next && next.top > own.top ? next.top - own.top : own.height;\n if (!(h > 0)) continue;\n const ds = trs[k].dataset;\n if (ds.rowIndex !== undefined) {\n const key = m.keys[Number(ds.rowIndex)];\n if (key !== undefined) rowSamples.push([key, h]);\n } else if (ds.rowDetail !== undefined) {\n const key = m.keys[Number(ds.rowDetail)];\n if (key !== undefined) detailSamples.push([key, h]);\n } else if (ds.groupRow === \"1\" || ds.groupRow === \"2\") {\n bandSamples.push([ds.groupRow === \"1\" ? 0 : 1, h]);\n }\n }\n if (rowSamples.length + detailSamples.length + bandSamples.length > 0) {\n setMeasured((prev) => {\n let { heights, details, sum, count } = prev;\n let band = prev.band;\n for (const [key, h] of rowSamples) {\n const old = heights.get(key);\n if (old !== undefined && Math.abs(old - h) <= 0.5) continue;\n if (heights === prev.heights) heights = new Map(heights);\n heights.set(key, h);\n sum += h - (old ?? 0);\n if (old === undefined) count++;\n }\n for (const [key, h] of detailSamples) {\n const old = details.get(key);\n if (old !== undefined && Math.abs(old - h) <= 0.5) continue;\n if (details === prev.details) details = new Map(details);\n details.set(key, h);\n }\n for (const [level, h] of bandSamples) {\n if (Math.abs(band[level] - h) <= 0.5) continue;\n band = level === 0 ? [h, band[1]] : [band[0], h];\n }\n return heights === prev.heights && details === prev.details && band === prev.band\n ? prev\n : { heights, details, sum, count, band };\n });\n }\n // The column lock.\n const cells = table.tHead?.rows[0]?.cells;\n if (!cells || cells.length !== cols.length) return;\n const widths: Record<string, number> = {};\n let anyWidth = false;\n for (let c = 0; c < cells.length; c++) {\n if (!lockKeys.has(cols[c])) continue;\n const w = cells[c].getBoundingClientRect().width;\n if (w > 0) {\n widths[cols[c]] = w;\n anyWidth = true;\n }\n }\n if (!anyWidth) return;\n const over = table.getBoundingClientRect().width > sc.clientWidth + 1;\n if (!locked) {\n naturalOverflow.current = over;\n setLock({ sig, widths });\n } else if (over && !naturalOverflow.current) {\n // A grown column pushed the table past a scroller it fit: measure afresh.\n setLock(null);\n } else {\n let grew = false;\n const merged = { ...locked };\n for (const [key, w] of Object.entries(widths)) {\n if (w > (merged[key] ?? 0) + 0.5) {\n merged[key] = w;\n grew = true;\n }\n }\n if (grew) setLock({ sig, widths: merged });\n }\n }, [scrollerRef, tableRef]);\n\n const frame = useRef(0);\n const schedule = useCallback(() => {\n if (frame.current) return;\n const run = () => {\n frame.current = 0;\n measure();\n update();\n };\n frame.current =\n typeof requestAnimationFrame === \"undefined\" ? -(setTimeout(run, 16) as unknown as number) : requestAnimationFrame(run);\n }, [measure, update]);\n useEffect(\n () => () => {\n if (frame.current > 0) cancelAnimationFrame(frame.current);\n else if (frame.current < 0) clearTimeout(-frame.current);\n frame.current = 0;\n },\n [],\n );\n\n useEffect(() => {\n if (!enabled) return;\n const onScroll = () => update();\n window.addEventListener(\"scroll\", onScroll, { capture: true, passive: true });\n window.addEventListener(\"resize\", onScroll, { passive: true });\n const sc = scrollerRef.current;\n let ro: ResizeObserver | undefined;\n if (sc && typeof ResizeObserver !== \"undefined\") {\n ro = new ResizeObserver(() => {\n setScrollerWidth(Math.round(sc.clientWidth));\n update();\n });\n ro.observe(sc);\n }\n return () => {\n window.removeEventListener(\"scroll\", onScroll, { capture: true });\n window.removeEventListener(\"resize\", onScroll);\n ro?.disconnect();\n };\n }, [enabled, update, scrollerRef]);\n\n // The row holding the focus (a row, or a control in it or in its open detail) stays.\n useEffect(() => {\n const table = tableRef.current;\n if (!enabled || !table) return;\n const onIn = (e: FocusEvent) => {\n const tr = (e.target as Element | null)?.closest?.<HTMLElement>(\"tr[data-row-index], tr[data-row-detail]\");\n const index = tr ? Number(tr.dataset.rowIndex ?? tr.dataset.rowDetail) : NaN;\n const key = Number.isNaN(index) ? undefined : latest.current.model?.keys[index];\n setFocusKey(key ?? null);\n setFocusTarget(null);\n };\n const onOut = (e: FocusEvent) => {\n const to = e.relatedTarget as Node | null;\n if (!to || !table.contains(to)) setFocusKey(null);\n };\n table.addEventListener(\"focusin\", onIn);\n table.addEventListener(\"focusout\", onOut);\n return () => {\n table.removeEventListener(\"focusin\", onIn);\n table.removeEventListener(\"focusout\", onOut);\n };\n }, [enabled, tableRef]);\n\n const dataSig = n > 0 && model ? `${n}:${String(model.keys[0])}:${String(model.keys[n - 1])}` : \"0\";\n const renderSig = `${start}:${end}:${dataSig}:${expandedSig}:${pinnedSig}:${lockSig}:${colWidths ? 1 : 0}`;\n const lastRender = useRef(\"\");\n useLayoutEffect(() => {\n if (!enabled || lastRender.current === renderSig) return;\n lastRender.current = renderSig;\n schedule();\n });\n\n // A new layout (heights measured, rows added): the range may no longer cover the view.\n const total = model?.total ?? 0;\n useLayoutEffect(() => {\n if (enabled) schedule();\n }, [enabled, schedule, total, n]);\n\n // The keyboard's target: rendered (pinned), then focused — its focus scrolls it into\n // view, and the scroll renders the rows around it.\n useLayoutEffect(() => {\n if (focusTarget === null) return;\n // Released by the focus it receives (the `focusin` above), which pins it as the\n // focused row from then on.\n tableRef.current?.querySelector<HTMLElement>(`tr[data-row-index=\"${focusTarget}\"]`)?.focus();\n }, [focusTarget, bodies, tableRef]);\n\n const focusRow = useCallback(\n (i: number) => {\n const el = tableRef.current?.querySelector<HTMLElement>(`tr[data-row-index=\"${i}\"]`);\n if (el) el.focus();\n else setFocusTarget(i);\n },\n [tableRef],\n );\n\n if (!enabled || !model) return null;\n return {\n bodies,\n rowCount: model.rowCount,\n ariaRow: (i) => model.ariaRows[i],\n ariaBand: (g, level) => model.ariaBands[g * 2 + level - 1],\n colWidths,\n focusRow,\n };\n}\n\n/** The roving rows' Arrow/Home/End target over ALL the rows, rendered or not. */\nexport function rowNavTarget(from: number, key: string, n: number): number | null {\n if (n === 0) return null;\n if (key === \"ArrowDown\") return Math.min(n - 1, from + 1);\n if (key === \"ArrowUp\") return Math.max(0, from - 1);\n if (key === \"Home\") return 0;\n if (key === \"End\") return n - 1;\n return null;\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/data-table-virtual.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { RefObject } from \"react\";\n\n// DataTable's row windowing (0.48.2, keksdose dev #632 — Marcel: \"The table is extremely\n// slow. Is it virtualised or is everytime the whole table rendered?\"). Opt-in through\n// `virtualize`: the desktop table renders the rows near the visible part of its scroller\n// (plus `overscan`) and stands spacer rows in for the rest, inside each group's own\n// `<tbody>`, so the sticky group bands keep working as they do on a full table — a band\n// cell's sticky containing block is the TABLE, and the latest band of each level that has\n// scrolled past is the one drawn (Chromium, checked with a probe at the group's middle,\n// its end and the next group's start).\n//\n// What it keeps rendered whatever the scroll: the header, the leading row, the band rows\n// of every group that has a rendered row (and the first day of the period the window\n// starts in, whose band is the period's), every OPEN row (`isExpanded`, so an inline\n// editor keeps its state), the roving tab stop, a row holding the focus, and the row the\n// keyboard is moving to.\n//\n// Heights: each rendered row is measured after render (the distance to the next row's\n// top, which is exact under collapsed borders where a row's own box is half a border\n// short) and remembered by its key; a row never rendered counts as the average of the\n// measured ones, or `estimateRowHeight` before any. The spacers are the sums, so the\n// scroll height settles as rows are seen. Scroll anchoring (the browser's) keeps the rows\n// in view still while a spacer above them is corrected.\n//\n// Column widths: in an auto table layout a column is as wide as its widest RENDERED\n// cell, so rows coming and going would move the columns. The header cells' widths are\n// read after the first render and locked into a `<colgroup>`, only ever growing while the\n// rows scroll (a wider cell arriving widens its column once; one leaving narrows\n// nothing). Re-measured from scratch when the data, the columns, a user width, the text\n// size or the scroller's width change — and when a grown column would push the table\n// past its scroller, which it fit before. A `grow` column and a user-resized one are not\n// locked (the first takes the rest, the second is pinned already). A lock replaced is\n// gone: changing back (a column the fit leaves out and brings back) measures again\n// (0.51, keksdose N2).\n\n/** {@link DataTableProps.virtualize}'s options. */\nexport interface DataTableVirtualize {\n /** Rows rendered beyond each edge of the visible part. Default 12. */\n overscan?: number;\n /** A row's height in px before it has been measured. Default: 37 (`comfortable`) /\n * 29 (`compact`) — the kit's one-line rows. */\n estimateRowHeight?: number;\n}\n\n/** One innermost group's run of rows, `[start, end)` in the rows on screen, with the\n * band levels its `<tbody>` opens with. `first` is the index of the innermost group that\n * opens its level-1 group (itself with one level). Ungrouped: one run with no bands. */\nexport interface VirtualGroup {\n start: number;\n end: number;\n bands: readonly (1 | 2)[];\n first: number;\n}\n\n/** A row, or a spacer standing in for the rows between two rendered ones. */\nexport type VirtualItem = { kind: \"row\"; index: number } | { kind: \"gap\"; key: string; height: number };\n\n/** A group's `<tbody>` with its rendered rows, or one spacer `<tbody>` for a run of\n * groups of which nothing is rendered. */\nexport type VirtualBody =\n | { kind: \"spacer\"; key: string; height: number }\n | { kind: \"group\"; group: number; items: VirtualItem[] };\n\nexport interface RowWindow {\n bodies: VirtualBody[];\n /** `aria-rowcount`: every row of the table, header, bands, details and footer included. */\n rowCount: number;\n /** `aria-rowindex` of data row `i`; its detail row (open) is the next one. */\n ariaRow: (i: number) => number;\n /** `aria-rowindex` of group `g`'s band of `level`. */\n ariaBand: (g: number, level: 1 | 2) => number;\n /** The locked widths for the `<colgroup>`, by column key; null while measuring. */\n colWidths: Record<string, number> | null;\n /** Move the focus to row `i`, rendering it first when it is not. */\n focusRow: (i: number) => void;\n}\n\n/** The heights measured so far, by row key; the bands' by level. */\ninterface Measured {\n heights: Map<string | number, number>;\n details: Map<string | number, number>;\n sum: number;\n count: number;\n band: [number, number];\n}\n\nconst SELECT_KEY = \"\\u0000select\";\n/** The `<colgroup>` key of the selection column. */\nexport const VIRTUAL_SELECT_COL = SELECT_KEY;\n\ninterface Model {\n n: number;\n keys: (string | number)[];\n /** Top of row i, from the top of the first group's `<tbody>`. */\n tops: Float64Array;\n /** Full height of row i (its detail row included while open). */\n h: Float64Array;\n /** Top of group g's `<tbody>`; [groups.length] is the total. */\n gTop: Float64Array;\n total: number;\n ariaRows: Int32Array;\n ariaBands: Int32Array;\n rowCount: number;\n}\n\n/** First index whose bottom is below `y` (n when none). */\nfunction firstBelow(m: Model, y: number): number {\n let lo = 0;\n let hi = m.n;\n while (lo < hi) {\n const mid = (lo + hi) >> 1;\n if (m.tops[mid] + m.h[mid] > y) hi = mid;\n else lo = mid + 1;\n }\n return lo;\n}\n\n/** One past the last index whose top is above `y`. */\nfunction lastAbove(m: Model, y: number): number {\n let lo = 0;\n let hi = m.n;\n while (lo < hi) {\n const mid = (lo + hi) >> 1;\n if (m.tops[mid] < y) lo = mid + 1;\n else hi = mid;\n }\n return lo;\n}\n\n/** The `<tbody>`s to render: the groups holding a rendered row (or the period's first\n * day, for its band), and one spacer for each run of groups in between. Pure. */\nexport function planBodies(\n m: Pick<Model, \"n\" | \"tops\" | \"h\" | \"gTop\">,\n groups: readonly VirtualGroup[],\n start: number,\n end: number,\n pinned: readonly number[],\n): VirtualBody[] {\n const rendered = new Set<number>();\n for (let i = Math.max(0, start); i < Math.min(m.n, end); i++) rendered.add(i);\n for (const p of pinned) if (p >= 0 && p < m.n) rendered.add(p);\n const sorted = [...rendered].sort((a, b) => a - b);\n // The group the window starts in, and the first day of its period.\n let anchor = -1;\n if (sorted.length > 0 && start < m.n) {\n const s = Math.max(0, start);\n const g = groups.findIndex((gr) => s >= gr.start && s < gr.end);\n if (g >= 0) anchor = groups[g].first;\n }\n const bottom = (i: number) => m.tops[i] + m.h[i];\n const out: VirtualBody[] = [];\n let k = 0;\n let skippedFrom = -1;\n const flushSkipped = (upTo: number) => {\n if (skippedFrom < 0) return;\n out.push({ kind: \"spacer\", key: `vs:${skippedFrom}`, height: m.gTop[upTo] - m.gTop[skippedFrom] });\n skippedFrom = -1;\n };\n groups.forEach((g, gi) => {\n while (k < sorted.length && sorted[k] < g.start) k++;\n const items: VirtualItem[] = [];\n let prevBottom = m.tops[g.start] ?? m.gTop[gi + 1];\n let any = false;\n while (k < sorted.length && sorted[k] < g.end) {\n const i = sorted[k++];\n const gap = m.tops[i] - prevBottom;\n if (gap > 0.01) items.push({ kind: \"gap\", key: `gap:${i}`, height: gap });\n items.push({ kind: \"row\", index: i });\n prevBottom = bottom(i);\n any = true;\n }\n if (!any && gi !== anchor) {\n if (skippedFrom < 0) skippedFrom = gi;\n return;\n }\n flushSkipped(gi);\n const rest = m.gTop[gi + 1] - prevBottom;\n if (rest > 0.01) items.push({ kind: \"gap\", key: `gap:end:${gi}`, height: rest });\n out.push({ kind: \"group\", group: gi, items });\n });\n flushSkipped(groups.length);\n return out;\n}\n\nexport function useRowWindow<T>({\n enabled,\n rows,\n rowKey,\n groups,\n expanded,\n pinnedKeys,\n scrollerRef,\n tableRef,\n options,\n compact,\n rowsBefore,\n rowsAfter,\n colKeys,\n lockable,\n resetKey,\n}: {\n enabled: boolean;\n /** The rows on screen, in order. */\n rows: T[];\n rowKey: (row: T) => string | number;\n groups: readonly VirtualGroup[];\n /** Indices of the open rows: always rendered, their detail rows counted. */\n expanded: readonly number[];\n /** Keys always rendered (the roving tab stop). */\n pinnedKeys: readonly (string | number | null)[];\n scrollerRef: RefObject<HTMLElement | null>;\n tableRef: RefObject<HTMLTableElement | null>;\n options: DataTableVirtualize;\n compact: boolean;\n /** Rows above the first group: the header, the leading row. */\n rowsBefore: number;\n /** Rows after the last: the totals row. */\n rowsAfter: number;\n /** The header cells' keys, in order (the selection column as {@link VIRTUAL_SELECT_COL}). */\n colKeys: readonly string[];\n /** The keys whose width is locked (not a `grow` column, not a user-resized one). */\n lockable: ReadonlySet<string>;\n /** Anything that re-measures the column widths from scratch when it changes. */\n resetKey: string;\n}): RowWindow | null {\n const overscan = Math.max(1, options.overscan ?? 12);\n const estimate = options.estimateRowHeight ?? (compact ? 29 : 37);\n const n = rows.length;\n\n const [measured, setMeasured] = useState<Measured>(() => ({\n heights: new Map(),\n details: new Map(),\n sum: 0,\n count: 0,\n band: [estimate, estimate * 0.8],\n }));\n const initialEnd = () =>\n Math.min(n, Math.ceil((typeof window === \"undefined\" ? 800 : Math.min(window.innerHeight || 800, 1600)) / estimate) + overscan);\n const [range, setRange] = useState(() => ({ start: 0, end: initialEnd() }));\n const [focusTarget, setFocusTarget] = useState<number | null>(null);\n const [focusKey, setFocusKey] = useState<string | number | null>(null);\n const [scrollerWidth, setScrollerWidth] = useState(0);\n const [lock, setLock] = useState<{ sig: string; widths: Record<string, number> } | null>(null);\n const naturalOverflow = useRef(false);\n\n const expandedSig = expanded.join(\",\");\n const model = useMemo<Model | null>(() => {\n if (!enabled) return null;\n const keys = rows.map(rowKey);\n const avg = measured.count > 0 ? measured.sum / measured.count : estimate;\n const open = new Set(expanded);\n const h = new Float64Array(n);\n for (let i = 0; i < n; i++) {\n h[i] = (measured.heights.get(keys[i]) ?? avg) + (open.has(i) ? (measured.details.get(keys[i]) ?? 0) : 0);\n }\n const tops = new Float64Array(n + 1);\n const gTop = new Float64Array(groups.length + 1);\n const ariaRows = new Int32Array(n);\n const ariaBands = new Int32Array(groups.length * 2);\n let y = 0;\n let aria = rowsBefore + 1;\n groups.forEach((g, gi) => {\n gTop[gi] = y;\n for (const level of g.bands) {\n y += measured.band[level - 1];\n ariaBands[gi * 2 + level - 1] = aria++;\n }\n for (let i = g.start; i < g.end; i++) {\n tops[i] = y;\n y += h[i];\n ariaRows[i] = aria++;\n if (open.has(i)) aria++;\n }\n });\n gTop[groups.length] = y;\n tops[n] = y;\n return { n, keys, tops, h, gTop, total: y, ariaRows, ariaBands, rowCount: aria - 1 + rowsAfter };\n // `expanded` by its signature.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [enabled, rows, rowKey, groups, expandedSig, measured, estimate, n, rowsBefore, rowsAfter]);\n\n // The rows outside the range that stay: open rows, the tab stop, the focused row and\n // the keyboard's target.\n const pinned = useMemo(() => {\n if (!model) return [];\n const out = [...expanded];\n for (const key of [...pinnedKeys, focusKey]) {\n if (key === null) continue;\n const i = model.keys.indexOf(key);\n if (i >= 0) out.push(i);\n }\n if (focusTarget !== null) out.push(focusTarget);\n return out;\n }, [model, expanded, pinnedKeys, focusKey, focusTarget]);\n const pinnedSig = pinned.join(\",\");\n\n const start = Math.min(range.start, n);\n const end = Math.min(range.end, n);\n const bodies = useMemo(\n () => (model ? planBodies(model, groups, start, end, pinned) : []),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [model, groups, start, end, pinnedSig],\n );\n\n const lockSig = `${resetKey}|${scrollerWidth}|${colKeys.join(\",\")}`;\n // A lock is the table it was measured on, so it goes as soon as the signature moves on\n // — not merely set aside until the signature comes BACK (0.51, keksdose N2). The fit\n // leaves a column out and, measuring the table afresh without it, brings it back in the\n // same frame, before this hook measures anything: the signature was then the old one\n // again, and the column came back at the widths that had ratcheted up while rows\n // scrolled (a wider cell widens its column once), 80–110px more than the fit had just\n // measured (606 + 93 estimated, 778–812 drawn, at 757), and B2's guard kept it out\n // although it fitted. Dropped here, the table it comes back to is drawn as measured,\n // and the next frame locks that. Adjusted during render, as React's \"storing\n // information from previous renders\": an effect would draw the stale widths first.\n if (lock !== null && lock.sig !== lockSig) setLock(null);\n const colWidths = lock && lock.sig === lockSig ? lock.widths : null;\n\n // What the scroll handler and the frame's measure read: this render's model and lock.\n const latest = useRef({ model, colWidths, lockSig, colKeys, lockable, overscan });\n useLayoutEffect(() => {\n latest.current = { model, colWidths, lockSig, colKeys, lockable, overscan };\n });\n\n // Which rows the visible part of the scroller (and of the window, for a table in a page\n // that scrolls) shows, and a new range around them when the rendered one no longer\n // covers them. Read from the client rects, which a scroll leaves laid out.\n const update = useCallback(() => {\n const { model: m, overscan: over } = latest.current;\n const sc = scrollerRef.current;\n const table = tableRef.current;\n if (!m || !sc || !table) return;\n const origin = table.querySelector<HTMLElement>(\"tbody[data-vt-body]\");\n if (!origin) return;\n const sr = sc.getBoundingClientRect();\n const top = Math.max(sr.top, 0);\n const bottom = Math.min(sr.bottom, window.innerHeight || sr.bottom);\n if (!(bottom > top)) return;\n const o = origin.getBoundingClientRect().top;\n const a = Math.min(firstBelow(m, top - o), m.n);\n const b = Math.max(a, Math.min(lastAbove(m, bottom - o), m.n));\n setRange((prev) =>\n prev.start <= a && prev.end >= b && prev.end <= m.n && prev.end - prev.start <= b - a + 4 * over\n ? prev\n : { start: Math.max(0, a - over), end: Math.min(m.n, b + over) },\n );\n }, [scrollerRef, tableRef]);\n\n // After a render that changed what is drawn: measure the rendered rows and bands, and\n // the header cells for the lock. Not after a render that only ticked a box. In the next\n // animation frame rather than in the commit: there the browser lays the table out once\n // for the frame anyway, where a read in the commit forced a layout of its own, and the\n // re-render the heights cause forced another (Chromium, 3000 rows: 35–130 ms of forced\n // layout per scrolled step, against one layout per frame now).\n const measure = useCallback(() => {\n const { model: m, colWidths: locked, lockSig: sig, colKeys: cols, lockable: lockKeys } = latest.current;\n const table = tableRef.current;\n const sc = scrollerRef.current;\n if (!m || !table || !sc) return;\n const trs = table.rows;\n const rects = Array.from(trs, (tr) => tr.getBoundingClientRect());\n const rowSamples: [string | number, number][] = [];\n const detailSamples: [string | number, number][] = [];\n const bandSamples: [0 | 1, number][] = [];\n for (let k = 0; k < trs.length; k++) {\n const own = rects[k];\n const next = rects[k + 1];\n // The distance to the next row's top: exact under collapsed borders.\n const h = next && next.top > own.top ? next.top - own.top : own.height;\n if (!(h > 0)) continue;\n const ds = trs[k].dataset;\n if (ds.rowIndex !== undefined) {\n const key = m.keys[Number(ds.rowIndex)];\n if (key !== undefined) rowSamples.push([key, h]);\n } else if (ds.rowDetail !== undefined) {\n const key = m.keys[Number(ds.rowDetail)];\n if (key !== undefined) detailSamples.push([key, h]);\n } else if (ds.groupRow === \"1\" || ds.groupRow === \"2\") {\n bandSamples.push([ds.groupRow === \"1\" ? 0 : 1, h]);\n }\n }\n if (rowSamples.length + detailSamples.length + bandSamples.length > 0) {\n setMeasured((prev) => {\n let { heights, details, sum, count } = prev;\n let band = prev.band;\n for (const [key, h] of rowSamples) {\n const old = heights.get(key);\n if (old !== undefined && Math.abs(old - h) <= 0.5) continue;\n if (heights === prev.heights) heights = new Map(heights);\n heights.set(key, h);\n sum += h - (old ?? 0);\n if (old === undefined) count++;\n }\n for (const [key, h] of detailSamples) {\n const old = details.get(key);\n if (old !== undefined && Math.abs(old - h) <= 0.5) continue;\n if (details === prev.details) details = new Map(details);\n details.set(key, h);\n }\n for (const [level, h] of bandSamples) {\n if (Math.abs(band[level] - h) <= 0.5) continue;\n band = level === 0 ? [h, band[1]] : [band[0], h];\n }\n return heights === prev.heights && details === prev.details && band === prev.band\n ? prev\n : { heights, details, sum, count, band };\n });\n }\n // The column lock.\n const cells = table.tHead?.rows[0]?.cells;\n if (!cells || cells.length !== cols.length) return;\n const widths: Record<string, number> = {};\n let anyWidth = false;\n for (let c = 0; c < cells.length; c++) {\n if (!lockKeys.has(cols[c])) continue;\n const w = cells[c].getBoundingClientRect().width;\n if (w > 0) {\n widths[cols[c]] = w;\n anyWidth = true;\n }\n }\n if (!anyWidth) return;\n const over = table.getBoundingClientRect().width > sc.clientWidth + 1;\n if (!locked) {\n naturalOverflow.current = over;\n setLock({ sig, widths });\n } else if (over && !naturalOverflow.current) {\n // A grown column pushed the table past a scroller it fit: measure afresh.\n setLock(null);\n } else {\n let grew = false;\n const merged = { ...locked };\n for (const [key, w] of Object.entries(widths)) {\n if (w > (merged[key] ?? 0) + 0.5) {\n merged[key] = w;\n grew = true;\n }\n }\n if (grew) setLock({ sig, widths: merged });\n }\n }, [scrollerRef, tableRef]);\n\n const frame = useRef(0);\n const schedule = useCallback(() => {\n if (frame.current) return;\n const run = () => {\n frame.current = 0;\n measure();\n update();\n };\n frame.current =\n typeof requestAnimationFrame === \"undefined\" ? -(setTimeout(run, 16) as unknown as number) : requestAnimationFrame(run);\n }, [measure, update]);\n useEffect(\n () => () => {\n if (frame.current > 0) cancelAnimationFrame(frame.current);\n else if (frame.current < 0) clearTimeout(-frame.current);\n frame.current = 0;\n },\n [],\n );\n\n useEffect(() => {\n if (!enabled) return;\n const onScroll = () => update();\n window.addEventListener(\"scroll\", onScroll, { capture: true, passive: true });\n window.addEventListener(\"resize\", onScroll, { passive: true });\n const sc = scrollerRef.current;\n let ro: ResizeObserver | undefined;\n if (sc && typeof ResizeObserver !== \"undefined\") {\n ro = new ResizeObserver(() => {\n setScrollerWidth(Math.round(sc.clientWidth));\n update();\n });\n ro.observe(sc);\n }\n return () => {\n window.removeEventListener(\"scroll\", onScroll, { capture: true });\n window.removeEventListener(\"resize\", onScroll);\n ro?.disconnect();\n };\n }, [enabled, update, scrollerRef]);\n\n // The row holding the focus (a row, or a control in it or in its open detail) stays.\n useEffect(() => {\n const table = tableRef.current;\n if (!enabled || !table) return;\n const onIn = (e: FocusEvent) => {\n const tr = (e.target as Element | null)?.closest?.<HTMLElement>(\"tr[data-row-index], tr[data-row-detail]\");\n const index = tr ? Number(tr.dataset.rowIndex ?? tr.dataset.rowDetail) : NaN;\n const key = Number.isNaN(index) ? undefined : latest.current.model?.keys[index];\n setFocusKey(key ?? null);\n setFocusTarget(null);\n };\n const onOut = (e: FocusEvent) => {\n const to = e.relatedTarget as Node | null;\n if (!to || !table.contains(to)) setFocusKey(null);\n };\n table.addEventListener(\"focusin\", onIn);\n table.addEventListener(\"focusout\", onOut);\n return () => {\n table.removeEventListener(\"focusin\", onIn);\n table.removeEventListener(\"focusout\", onOut);\n };\n }, [enabled, tableRef]);\n\n const dataSig = n > 0 && model ? `${n}:${String(model.keys[0])}:${String(model.keys[n - 1])}` : \"0\";\n const renderSig = `${start}:${end}:${dataSig}:${expandedSig}:${pinnedSig}:${lockSig}:${colWidths ? 1 : 0}`;\n const lastRender = useRef(\"\");\n useLayoutEffect(() => {\n if (!enabled || lastRender.current === renderSig) return;\n lastRender.current = renderSig;\n schedule();\n });\n\n // A new layout (heights measured, rows added): the range may no longer cover the view.\n const total = model?.total ?? 0;\n useLayoutEffect(() => {\n if (enabled) schedule();\n }, [enabled, schedule, total, n]);\n\n // The keyboard's target: rendered (pinned), then focused — its focus scrolls it into\n // view, and the scroll renders the rows around it.\n useLayoutEffect(() => {\n if (focusTarget === null) return;\n // Released by the focus it receives (the `focusin` above), which pins it as the\n // focused row from then on.\n tableRef.current?.querySelector<HTMLElement>(`tr[data-row-index=\"${focusTarget}\"]`)?.focus();\n }, [focusTarget, bodies, tableRef]);\n\n const focusRow = useCallback(\n (i: number) => {\n const el = tableRef.current?.querySelector<HTMLElement>(`tr[data-row-index=\"${i}\"]`);\n if (el) el.focus();\n else setFocusTarget(i);\n },\n [tableRef],\n );\n\n if (!enabled || !model) return null;\n return {\n bodies,\n rowCount: model.rowCount,\n ariaRow: (i) => model.ariaRows[i],\n ariaBand: (g, level) => model.ariaBands[g * 2 + level - 1],\n colWidths,\n focusRow,\n };\n}\n\n/** The roving rows' Arrow/Home/End target over ALL the rows, rendered or not. */\nexport function rowNavTarget(from: number, key: string, n: number): number | null {\n if (n === 0) return null;\n if (key === \"ArrowDown\") return Math.min(n - 1, from + 1);\n if (key === \"ArrowUp\") return Math.max(0, from - 1);\n if (key === \"Home\") return 0;\n if (key === \"End\") return n - 1;\n return null;\n}\n"],"mappings":"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","names":[]}
|
|
@@ -9,7 +9,8 @@ import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "
|
|
|
9
9
|
* `useFieldError`, every field's.
|
|
10
10
|
*
|
|
11
11
|
* Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are
|
|
12
|
-
* the three fields' shared parts (`@internal`)
|
|
12
|
+
* the three fields' shared parts (`@internal`), as are the Select's own classes and its
|
|
13
|
+
* `SelectWidthFloor` (0.51).
|
|
13
14
|
*/
|
|
14
15
|
/**
|
|
15
16
|
* The 16 px floor on touch (docs/text-size-harmonization.md §10.1). iOS zooms the page
|
|
@@ -78,6 +79,35 @@ export type FieldChevronProps = Omit<ComponentPropsWithRef<"svg">, "children">;
|
|
|
78
79
|
* and a chevron parked on top of its first word hid exactly the part that says
|
|
79
80
|
* what was picked. */
|
|
80
81
|
export declare function FieldChevron({ className, ...rest }: FieldChevronProps): import("react").JSX.Element;
|
|
82
|
+
/** A native dropdown Select's dress: no native arrow, and `pe-9`, the room the
|
|
83
|
+
* {@link FieldChevron} takes. Shared with {@link SelectWidthFloor}. `@internal` */
|
|
84
|
+
export declare const SELECT_MENU_DRESS = "appearance-none pe-9";
|
|
85
|
+
/** The compact Select (`size="sm"`): the field's colours, a toolbar button's height.
|
|
86
|
+
* `py-0` and a fixed height rather than a smaller padding, so the box is 28px whatever
|
|
87
|
+
* line height the caller's type brings with it. Shared with {@link SelectWidthFloor}.
|
|
88
|
+
* `@internal` */
|
|
89
|
+
export declare const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
|
|
90
|
+
/**
|
|
91
|
+
* The width an UNLABELLED Select needs to show the widest of `values` whole: an invisible,
|
|
92
|
+
* zero-height line under it, in the select's own type, padding, chevron room and border
|
|
93
|
+
* (the same classes), one value per line. Placed beside the Select in the box that sizes
|
|
94
|
+
* it, it holds that box to the widest value, and the `w-full` select fills it. `@internal`
|
|
95
|
+
*
|
|
96
|
+
* Why it takes a sizer (0.51, Kurvenschmiede N5). A `<select>` with a percentage width
|
|
97
|
+
* is a "compressible" element: its min-content contribution is ZERO (CSS Sizing 3
|
|
98
|
+
* §5.2.2), so the auto table layout squeezes its column to the header, and beside a
|
|
99
|
+
* `grow` column every other column IS squeezed to its min-content (data-table-fit.ts).
|
|
100
|
+
* The user roster's role select stood 92px and read "Meml…" and "Admi…" (KS review,
|
|
101
|
+
* 0.49 and 0.50). `min-width: max-content` on the select would hold it instead — but to
|
|
102
|
+
* its widest OPTION, and an unavailable role's option carries its reason ("Customer (owns
|
|
103
|
+
* work)", RoleSelect's `optionDisabledReason`): the column would widen for a text that is
|
|
104
|
+
* never the selected value. So the caller says which values can be selected, in the
|
|
105
|
+
* current language.
|
|
106
|
+
*/
|
|
107
|
+
export declare function SelectWidthFloor({ values, size }: {
|
|
108
|
+
values: readonly string[];
|
|
109
|
+
size?: "sm" | "md";
|
|
110
|
+
}): import("react").JSX.Element | null;
|
|
81
111
|
export declare const FLOATING_LABEL_CLASS: string;
|
|
82
112
|
/**
|
|
83
113
|
* The one place that assembles a labelled field: a `relative` wrapper around the
|
|
@@ -38,6 +38,31 @@ function FieldChevron({ className, ...rest }) {
|
|
|
38
38
|
}
|
|
39
39
|
);
|
|
40
40
|
}
|
|
41
|
+
const SELECT_MENU_DRESS = "appearance-none pe-9";
|
|
42
|
+
const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
|
|
43
|
+
function SelectWidthFloor({ values, size = "md" }) {
|
|
44
|
+
if (values.length === 0) return null;
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
"span",
|
|
47
|
+
{
|
|
48
|
+
"aria-hidden": true,
|
|
49
|
+
"data-select-floor": "",
|
|
50
|
+
className: cn(
|
|
51
|
+
FIELD_BASE,
|
|
52
|
+
SELECT_MENU_DRESS,
|
|
53
|
+
size === "sm" && SELECT_SM,
|
|
54
|
+
// The horizontal box only: no height, no vertical padding or border, not painted.
|
|
55
|
+
"invisible h-0 overflow-hidden border-y-0 py-0 whitespace-nowrap shadow-none"
|
|
56
|
+
),
|
|
57
|
+
children: values.map((value, i) => (
|
|
58
|
+
// The value as generated content, not as text: it is laid out (and so measured)
|
|
59
|
+
// the same, but a test's `getByText("Member")` still finds the one option, and a
|
|
60
|
+
// find-in-page or a copied row does not meet a word nobody sees.
|
|
61
|
+
/* @__PURE__ */ jsx("span", { "data-value": value, className: "block before:content-[attr(data-value)]" }, i)
|
|
62
|
+
))
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
}
|
|
41
66
|
const LABEL_FLOATED_AT_LARGE = "large:text-caption large:leading-tight large:text-secondary large:transition-none";
|
|
42
67
|
const FLOATING_LABEL_CLASS = cn(
|
|
43
68
|
"pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all",
|
|
@@ -215,6 +240,9 @@ export {
|
|
|
215
240
|
FieldGroup,
|
|
216
241
|
FloatingField,
|
|
217
242
|
Label,
|
|
243
|
+
SELECT_MENU_DRESS,
|
|
244
|
+
SELECT_SM,
|
|
245
|
+
SelectWidthFloor,
|
|
218
246
|
fieldBelow,
|
|
219
247
|
hasPlaceholderText,
|
|
220
248
|
useCharacterCountLabels,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/field-base.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n FieldCaption,\n FLOATING_LABEL_STATIC,\n LABEL_ABOVE_AT_LARGE,\n LABEL_ABOVE_BOX,\n STATIC_LABEL_TYPE,\n type FieldHintParts,\n} from \"./field-parts\";\nimport { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from \"./ui-labels\";\n\n/**\n * The field base: what Input, Select and Textarea — and every kit field built on the same\n * look — share (0.34, MOD-2, refactor audit 2026-10). The `FIELD_*` classes, the floating\n * label and its `FloatingField` box, `Label`, the chevron, and the words of the password\n * reveal and the character counter. The message under a wrong field is field-parts'\n * `useFieldError`, every field's.\n *\n * Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are\n * the three fields' shared parts (`@internal`).\n */\n\n/**\n * The 16 px floor on touch (docs/text-size-harmonization.md §10.1). iOS zooms the page\n * when a field under 16 px takes focus, and keksdose's `maximum-scale=1` — which stopped\n * it — goes so pinch zoom works again (WCAG 1.4.4). A zoomed page drops the keyboard\n * inset to 0 (§10.2), so the zoom would put a pinned editor footer behind the keyboard\n * (keksdose #154). So on a coarse pointer a field is at least 16 px, at every text size:\n * `max()` leaves Large and Extra large alone, where `text-sm` is already 17.5 / 21 px.\n *\n * In px on purpose: the threshold is the browser's, in CSS px, whatever the root size.\n * Font size only — the line height keeps `text-sm`'s ratio. Part of {@link FIELD_BASE};\n * add it to any other text-entry control whose type is below 16 px.\n */\nexport const FIELD_TOUCH_TEXT = \"pointer-coarse:text-[length:max(0.875rem,16px)]\";\n\nexport const FIELD_BASE =\n \"block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand \" +\n // The focus line, whole at fractional display scaling (K5 follow-up, keksdose run 78):\n // at 125 % a 1px border covers 1.25 device pixels, and the sides that fall across a\n // pixel boundary read half-strength. A 1px INSET ring in the focus colour beside it\n // doubles the line inward — FIELD_INVALID's border-plus-ring (live #295), and the\n // DatePicker stepper's fix (0.34) — so every side keeps one fully covered device\n // pixel. Inset: nothing outside the field moves or is covered.\n \"focus:ring-1 focus:ring-inset focus:ring-brand \" +\n // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.\n FIELD_TOUCH_TEXT +\n \" \" +\n // A field the user cannot change has to LOOK settled. Without this, `disabled`\n // dimmed the floating label and nothing else — FIELD_BASE's own\n // `text-primary` overrides the browser's grey — so a read-only value\n // sat there at full body-text strength, indistinguishable from one you could retype\n // (Keksdose dev#455/#474).\n \"disabled:cursor-default disabled:bg-surface-2 disabled:text-muted \" +\n // Same for a field that takes focus but refuses keys: `readOnly` is not\n // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n // mean that — see the two-factor code field, which uses it to block an autofill\n // and drops it the moment you focus the field.\n //\n // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n // everything that is not `:read-write`, and only editable inputs/textareas and\n // contenteditable elements are `:read-write`. So `read-only:` matched every\n // `<select>` in the app and every field-styled `<button>` built on this base —\n // the native selects, the date trigger, the entity/currency/multi pickers — and\n // painted them all in the \"you may not edit this\" grey. On one transaction form\n // that made three different-looking families out of one field style: plain\n // inputs, grey selects, grey trigger buttons.\n \"[&[readonly]]:bg-surface-2 [&[readonly]]:text-muted\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n * reason other than \"you may not edit this\". Attribute-scoped for the same reason\n * FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n * cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK =\n \"[&[readonly]]:bg-surface [&[readonly]]:text-primary\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2. At Large the label stands above the field (0.33, §10.17,\n// LABEL_ABOVE_AT_LARGE), so the strip goes and the field is FIELD_BASE's `py-2` again.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1 large:py-2\";\n\n// Error/required highlight for a field that is missing a value — a `--danger`\n// border and matching focus ring so the control itself shows what's wrong, not just\n// a note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, back when this was a hard-coded rose (full =\n// rgb(208,30,78)): left/top/bottom all 208, right 160 then 115 — the side that is\n// supposed to shout, at 55–77% of the others. A border plus a ring is 2 CSS px, so\n// whatever the fraction there is always one fully covered device pixel on every side\n// (re-measured: worst side 241). It is the GEOMETRY that carries that, not the hue,\n// so the fix survives a consumer re-pointing `--danger-border`.\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives.\nexport const FIELD_INVALID =\n \"border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies in the\n * phone layout (`usePhoneLayout()`, `max-md:` at the text size in force) and the field\n * is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n * - A hairline baseline. With the box gone something still has to say \"you can\n * type here\"; it takes the brand colour on focus, where a bordered field would\n * light its whole outline. Each edge is set exactly once (`border-x-0\n * border-t-0 border-b`) so the rule can't hinge on utility order. On focus the\n * line is doubled inward by an inset shadow on that edge alone — FIELD_BASE's\n * inset ring, for the same reason (K5 follow-up: a 1px line reads half-strength at\n * 125 %) — where a ring would draw a box round the figure.\n * - The muted placeholder colour, because a display field is usually empty at\n * the moment it matters most and has nothing else to show.\n * - The label, moved to `sr-only` rather than dropped: display type is legible\n * to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n \"block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\n//\n// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A\n// trigger with nothing chosen and no placeholder renders an EMPTY value span, an\n// empty span has no line box, and the trigger collapsed to its padding — 18px\n// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker\n// and MonthPicker had met the same thing as Keksdose live #294 and patched their\n// own span with a U+00A0). Here, on the shared class, it covers every trigger\n// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height\n// so it tracks whatever type the trigger is set in; the first child is the value\n// in every trigger here (the chevron and the clear button are absolute).\nexport const FIELD_TRIGGER = cn(\n FIELD_BASE,\n \"relative flex items-center justify-between gap-2 text-start hover:bg-hover\",\n \"[&>:first-child]:min-h-[1lh]\",\n);\n\n/** An alias rather than an interface: the chevron adds nothing of its own to an\n * `<svg>`'s props, and an interface declaring no members is the same type wearing a\n * name that suggests otherwise. */\nexport type FieldChevronProps = Omit<ComponentPropsWithRef<\"svg\">, \"children\">;\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pe-9` on the trigger so the value can't run underneath. At the\n * inline END, not the right: a right-to-left form reads the value from the right,\n * and a chevron parked on top of its first word hid exactly the part that says\n * what was picked. */\nexport function FieldChevron({ className, ...rest }: FieldChevronProps) {\n return (\n <ChevronDown\n {...rest}\n // After the spread: the chevron is decoration beside a control that already has\n // a name, and an `aria-hidden` a caller could switch off by accident is a second\n // announcement of the same field.\n aria-hidden\n className={cn(\n \"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\",\n className,\n )}\n />\n );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the field's own surface, so no background chip and nothing to mismatch the card.\n//\n// At Large it is a static label ABOVE the field instead (0.33, §10.17): in flow, so it\n// wraps; always in its floated look, since there is no strip to float into and no\n// placeholder to stand in for; no transition, since it never moves.\nconst LABEL_FLOATED_AT_LARGE =\n \"large:text-caption large:leading-tight large:text-secondary large:transition-none\";\n\nexport const FLOATING_LABEL_CLASS = cn(\n \"pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all\",\n \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n \"peer-disabled:opacity-50\",\n LABEL_ABOVE_AT_LARGE,\n \"large:block\",\n LABEL_FLOATED_AT_LARGE,\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the end edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48). At Large the row stands\n// above the field, as the label alone does, and nothing at the end edge is under it.\nconst FLOATING_ROW_CLASS = cn(\n \"pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all\",\n \"max-w-[calc(100%-3rem)] text-sm text-placeholder\",\n \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n \"peer-disabled:opacity-50\",\n LABEL_ABOVE_AT_LARGE,\n LABEL_FLOATED_AT_LARGE,\n);\n\n/** The static label's row with its \"?\" at the field's end, in the top strip — and at\n * Large above the field (LABEL_ABOVE_AT_LARGE). */\nconst STATIC_ROW_CLASS = cn(\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport interface FloatingFieldProps extends ComponentPropsWithRef<\"div\"> {\n htmlFor?: string;\n label?: ReactNode;\n staticLabel?: boolean;\n /** Keep the label in the accessibility tree but out of the layout — what\n * {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n * field left would have nothing to float in. */\n srOnlyLabel?: boolean;\n /** Something interactive that belongs to the LABEL rather than to the value —\n * in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n * with the label, so it is centred on the label's line by the layout instead\n * of by a hand-tuned `top-…`, and it can never drift when the type changes.\n *\n * It rides an ANIMATED label too, and the two cases place it differently on\n * purpose. A static label has a field-wide strip to itself, so the hint sits\n * at the far end of it and a long label truncates into the gap. An animated\n * one belongs to a control with something at the end edge of the field — a\n * calculator, a stepper — so the hint follows the label instead, and it is\n * the label that gives way (steering-design feedback #48). */\n hint?: ReactNode;\n children: ReactNode;\n}\n\nexport function FloatingField({\n className,\n htmlFor,\n label,\n staticLabel,\n srOnlyLabel,\n hint,\n children,\n ...rest\n}: FloatingFieldProps) {\n const withHint = hint !== undefined && !srOnlyLabel;\n const atEnd = withHint && staticLabel;\n // A label drawn over the field: at Large it stands above it instead (0.33, §10.17),\n // in the first row of this box (LABEL_ABOVE_BOX), though it FOLLOWS the control in\n // the DOM — `peer-*` reads the input before it.\n const above = label !== undefined && !srOnlyLabel;\n const labelEl = label !== undefined && (\n <label\n htmlFor={htmlFor}\n // In the first row at Large, out of LABEL_ABOVE_BOX's rule for the field's parts.\n data-field-label={above && !withHint ? \"\" : undefined}\n className={\n srOnlyLabel\n ? \"sr-only\"\n : atEnd\n ? cn(\"pointer-events-none min-w-0 truncate-until-large\", STATIC_LABEL_TYPE)\n : withHint\n ? \"pointer-events-none min-w-0 truncate-until-large\"\n : staticLabel\n ? FLOATING_LABEL_STATIC\n : FLOATING_LABEL_CLASS\n }\n >\n {label}\n </label>\n );\n return (\n // `relative` is the whole contract of this wrapper — the floating label and every\n // control that hangs off it (a reveal toggle, a chevron) are positioned against\n // this box — so it is merged through `cn` after the spread rather than left where\n // a caller's stray `className` or `style` could unset it. At Large, with a label\n // above, a grid: the label's row over the field's, the field's parts in the latter.\n <div {...rest} className={cn(\"relative\", above && LABEL_ABOVE_BOX, className)}>\n {children}\n {withHint ? (\n // Static: `inset-x-3` rather than `start-3`, so a long label truncates at\n // the field's own end padding instead of running under the chevron.\n // Animated: the row floats with the label and is only as wide as it needs\n // to be. Either way the hint keeps its width (`shrink-0`) and the label\n // is the one that gives way.\n <div data-field-label=\"\" className={atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS}>\n {labelEl}\n <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n </div>\n ) : (\n labelEl\n )}\n </div>\n );\n}\n\nexport interface LabelProps extends ComponentPropsWithRef<\"label\"> {\n /** Draw the required mark after the text. The mark is `aria-hidden`: what a\n * screen reader hears is the control's own `required` / `aria-required`, which\n * the caller still sets — a \"star\" read out as the last word of every name is\n * noise, and a control that is not marked required is not required however its\n * label looks. */\n required?: boolean;\n /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */\n size?: \"sm\" | \"md\";\n /** Dim the label with its control. A label ABOVE its field is not the field's\n * `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */\n disabled?: boolean;\n}\n\n/**\n * The label ABOVE a field, for the places a floating label does not fit: a control\n * the kit did not render (a third-party picker, a range slider, a group of radios),\n * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels\n * above its fields throughout.\n *\n * A new component rather than a mode of {@link FieldLabel}, because the two share\n * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a\n * trigger's `relative` box and has to stay exactly that for every dropdown that\n * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,\n * that a click focuses the control through. Spacing below it belongs to the caller's\n * layout (`space-y-1.5` on the pair, typically), as it would for any block.\n */\nexport function Label({ required, size = \"md\", disabled, className, children, ...rest }: LabelProps) {\n return (\n <label\n {...rest}\n className={cn(\n \"inline-flex items-center gap-0.5 font-medium leading-none text-primary\",\n size === \"sm\" ? \"text-xs\" : \"text-sm\",\n disabled && \"cursor-default opacity-50\",\n className,\n )}\n >\n {children}\n {required && (\n <span aria-hidden className=\"text-danger\">\n *\n </span>\n )}\n </label>\n );\n}\n\n// The message under a field that is wrong, and the wiring that attaches it — `useFieldError`\n// — lives in field-parts since 0.34, every field's (DUP-8, refactor audit 2026-10).\n\n/**\n * @internal A field and its message as one box.\n *\n * The message cannot go INSIDE the field's own `relative` box. The password reveal\n * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on\n * whatever that box contains — put two lines of message in it and the chevron drifts\n * down out of the field, between the value and the text. So the field keeps its box\n * and this wraps the pair.\n *\n * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,\n * which is what keeps the prop additive: it is exactly the DOM it was before the prop\n * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a\n * caller's flex row. A field that DOES take `error` — the key is passed, whatever its\n * value — is wrapped for as long as it is mounted, message or not (`reserve`).\n *\n * It used to wrap only while a message showed, and that cost the control its\n * identity: a fragment and a `<div>` are different elements at the same spot in the\n * tree, so React threw the `<input>` away and mounted a new one every time the message\n * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled\n * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its\n * \"Wrong password\" on change, so the first keystroke of the retry dropped the user out\n * of the field. Keeping the box stops that; the field is never reparented.\n *\n * The other ways to keep it stable were worse. A box on EVERY field changes what every\n * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the\n * field would land on a child of the item instead of the item). A `display: contents`\n * box would keep the flex/grid item, but a contents box takes no margin, so a parent's\n * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password\n * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves\n * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box\n * whenever its message showed, so what changes is only that it keeps it while none\n * does; every such call site in the three apps sits in a block or a `space-y`/grid\n * stack where a full-width block box is the field's own size. The case it does change\n * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a\n * row): that caller already lost the sizing while a message showed, and now sees the\n * same box without one. Pass `error` only where a message can actually appear.\n *\n * `className` is NOT moved out here, for the same reason — it goes on the field, as it\n * always has, so the box cannot silently change what that prop styles.\n */\nexport function FieldGroup({\n errorEl,\n reserve = false,\n children,\n}: {\n errorEl: ReactNode;\n /** The caller passed `error`: keep the box even while there is no message. */\n reserve?: boolean;\n children: ReactNode;\n}) {\n if (errorEl === null && !reserve) return <>{children}</>;\n return (\n <div>\n {children}\n {errorEl}\n </div>\n );\n}\n\n/** The two names the password reveal toggle can wear. See {@link Input}. */\nexport interface PasswordRevealLabels {\n /** While the value is hidden — activating the toggle will show it. */\n show: string;\n /** While the value is shown. */\n hide: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_REVEAL_LABELS };\n\n/**\n * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.\n * The visible \"12/80\" is digits and a slash and is not translated; these are the words\n * a screen reader gets instead of it.\n */\nexport interface CharacterCountLabels {\n /** The counter as part of the field's description, read when focus reaches the\n * field: \"12 of 80 characters\". */\n count: (used: number, max: number) => string;\n /** Said once, politely, on entering the last stretch before the limit: \"8\n * characters left\". */\n remaining: (left: number) => string;\n /** Said once, politely, on reaching the limit. */\n limitReached: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHARACTER_COUNT_LABELS };\n\n/** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter\n * and the limit can never disagree about whether a field is full. */\nfunction textLength(value: unknown): number {\n return value === undefined || value === null ? 0 : String(value).length;\n}\n\n/** @internal The counter's length: the controlled `value`'s, else what the field has been typed\n * to (from `defaultValue` on). `track` is called from the field's change handler. */\nexport function useTypedLength(value: unknown, defaultValue: unknown) {\n const [typed, setTyped] = useState(() => textLength(defaultValue));\n return { used: value !== undefined ? textLength(value) : typed, track: (text: string) => setTyped(text.length) };\n}\n\ntype CountZone = \"ok\" | \"near\" | \"limit\";\n\n/** The last stretch before the limit: a tenth of it, at least 1 and at most 20 — \"8\n * left\" of 80, and 20 of 2,000 rather than 200, which is not \"near\" in any sense a\n * person typing means. */\nfunction nearLimitAt(max: number): number {\n return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));\n}\n\nfunction countZone(used: number, max: number): CountZone {\n if (used >= max) return \"limit\";\n return max - used <= nearLimitAt(max) ? \"near\" : \"ok\";\n}\n\n/**\n * @internal The live \"12/80\" under a field with `showCount` (keksdose K11: the admin broadcast,\n * support replies, canned replies and the handoff note each counted by hand, and one\n * announced every keystroke).\n *\n * Three channels, each saying only what it should:\n * - the digits, `aria-hidden` — \"12 slash 80\" is not a sentence;\n * - a `hidden` \"12 of 80 characters\" on the field's `aria-describedby`, so the count is\n * read with the field when focus reaches it, and never while typing;\n * - a polite live region that speaks ONCE per stretch: on entering the last tenth\n * (\"8 characters left\") and on reaching the limit. A region that changed on every\n * keystroke would talk over the user's own typing echo for the whole message.\n * Nothing is said on mount: a stored note already near its limit is not news.\n */\nexport function CharacterCount({\n id,\n used,\n max,\n labels,\n caption,\n}: {\n id: string;\n used: number;\n max: number;\n labels: CharacterCountLabels;\n caption: ReactNode;\n}) {\n const zone = countZone(used, max);\n // What the live region holds, re-set only when the stretch changes — the previous\n // render's zone kept in state, the pattern React documents for \"adjusting state when\n // a prop changes\", so the region's text (and so the announcement) changes at most\n // once per crossing.\n const [said, setSaid] = useState<{ zone: CountZone; text: string }>({ zone, text: \"\" });\n if (said.zone !== zone) {\n setSaid({\n zone,\n text: zone === \"near\" ? labels.remaining(max - used) : zone === \"limit\" ? labels.limitReached : \"\",\n });\n }\n return (\n // `relative` holds the sr-only region (see sr-only-containment.test).\n <div className=\"relative mt-1 flex items-start gap-2\">\n <div className=\"min-w-0 flex-1\">{caption}</div>\n <span\n aria-hidden\n className={cn(\n \"shrink-0 text-caption leading-tight tabular-nums\",\n zone === \"limit\"\n ? \"text-danger\"\n : zone === \"near\"\n ? \"text-warning\"\n : \"text-muted\",\n )}\n >\n {used}/{max}\n </span>\n <span id={id} hidden>\n {labels.count(used, max)}\n </span>\n <span role=\"status\" className=\"sr-only\">\n {said.text}\n </span>\n </div>\n );\n}\n\n/** @internal What goes under a text field: the caption (beside the counter, when there is one),\n * then the error. `null` when there is nothing, so a field with none keeps exactly the\n * DOM it had (see {@link FieldGroup}). */\nexport function fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode {\n if (counter === null && hint.captionText === undefined && errorEl === null) return null;\n return (\n <>\n {counter ?? <FieldCaption parts={hint} />}\n {errorEl}\n </>\n );\n}\n\n/**\n * @internal kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has\n * floated out of its way — on focus — and transparent until then, while the label sits\n * where the placeholder would be. Without it the field forced `placeholder=\" \"` for the\n * float trick and dropped the caller's text without a word (kastlan's \"note\" field lost\n * its hint). `:placeholder-shown` still drives the float: it matches an empty field\n * whatever the placeholder's text is.\n */\nexport const FLOATING_PLACEHOLDER_ON_FOCUS = \"focus:placeholder:text-placeholder\";\n\n/** @internal A placeholder with something to show. `\"\"` and blanks are the float trick's own\n * `\" \"`, never the caller's hint. */\nexport const hasPlaceholderText = (placeholder: string | undefined): placeholder is string =>\n placeholder !== undefined && placeholder.trim() !== \"\";\n\n/** @internal The counter's words: the `characterCount` namespace — prop > `<UiKitProvider\n * labels>` > English. One place, so the namespace is named once. */\nexport function useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels {\n return useKitLabels(\"characterCount\", DEFAULT_CHARACTER_COUNT_LABELS, prop);\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/field-base.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n FieldCaption,\n FLOATING_LABEL_STATIC,\n LABEL_ABOVE_AT_LARGE,\n LABEL_ABOVE_BOX,\n STATIC_LABEL_TYPE,\n type FieldHintParts,\n} from \"./field-parts\";\nimport { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from \"./ui-labels\";\n\n/**\n * The field base: what Input, Select and Textarea — and every kit field built on the same\n * look — share (0.34, MOD-2, refactor audit 2026-10). The `FIELD_*` classes, the floating\n * label and its `FloatingField` box, `Label`, the chevron, and the words of the password\n * reveal and the character counter. The message under a wrong field is field-parts'\n * `useFieldError`, every field's.\n *\n * Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are\n * the three fields' shared parts (`@internal`), as are the Select's own classes and its\n * `SelectWidthFloor` (0.51).\n */\n\n/**\n * The 16 px floor on touch (docs/text-size-harmonization.md §10.1). iOS zooms the page\n * when a field under 16 px takes focus, and keksdose's `maximum-scale=1` — which stopped\n * it — goes so pinch zoom works again (WCAG 1.4.4). A zoomed page drops the keyboard\n * inset to 0 (§10.2), so the zoom would put a pinned editor footer behind the keyboard\n * (keksdose #154). So on a coarse pointer a field is at least 16 px, at every text size:\n * `max()` leaves Large and Extra large alone, where `text-sm` is already 17.5 / 21 px.\n *\n * In px on purpose: the threshold is the browser's, in CSS px, whatever the root size.\n * Font size only — the line height keeps `text-sm`'s ratio. Part of {@link FIELD_BASE};\n * add it to any other text-entry control whose type is below 16 px.\n */\nexport const FIELD_TOUCH_TEXT = \"pointer-coarse:text-[length:max(0.875rem,16px)]\";\n\nexport const FIELD_BASE =\n \"block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand \" +\n // The focus line, whole at fractional display scaling (K5 follow-up, keksdose run 78):\n // at 125 % a 1px border covers 1.25 device pixels, and the sides that fall across a\n // pixel boundary read half-strength. A 1px INSET ring in the focus colour beside it\n // doubles the line inward — FIELD_INVALID's border-plus-ring (live #295), and the\n // DatePicker stepper's fix (0.34) — so every side keeps one fully covered device\n // pixel. Inset: nothing outside the field moves or is covered.\n \"focus:ring-1 focus:ring-inset focus:ring-brand \" +\n // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.\n FIELD_TOUCH_TEXT +\n \" \" +\n // A field the user cannot change has to LOOK settled. Without this, `disabled`\n // dimmed the floating label and nothing else — FIELD_BASE's own\n // `text-primary` overrides the browser's grey — so a read-only value\n // sat there at full body-text strength, indistinguishable from one you could retype\n // (Keksdose dev#455/#474).\n \"disabled:cursor-default disabled:bg-surface-2 disabled:text-muted \" +\n // Same for a field that takes focus but refuses keys: `readOnly` is not\n // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n // mean that — see the two-factor code field, which uses it to block an autofill\n // and drops it the moment you focus the field.\n //\n // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n // everything that is not `:read-write`, and only editable inputs/textareas and\n // contenteditable elements are `:read-write`. So `read-only:` matched every\n // `<select>` in the app and every field-styled `<button>` built on this base —\n // the native selects, the date trigger, the entity/currency/multi pickers — and\n // painted them all in the \"you may not edit this\" grey. On one transaction form\n // that made three different-looking families out of one field style: plain\n // inputs, grey selects, grey trigger buttons.\n \"[&[readonly]]:bg-surface-2 [&[readonly]]:text-muted\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n * reason other than \"you may not edit this\". Attribute-scoped for the same reason\n * FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n * cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK =\n \"[&[readonly]]:bg-surface [&[readonly]]:text-primary\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2. At Large the label stands above the field (0.33, §10.17,\n// LABEL_ABOVE_AT_LARGE), so the strip goes and the field is FIELD_BASE's `py-2` again.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1 large:py-2\";\n\n// Error/required highlight for a field that is missing a value — a `--danger`\n// border and matching focus ring so the control itself shows what's wrong, not just\n// a note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, back when this was a hard-coded rose (full =\n// rgb(208,30,78)): left/top/bottom all 208, right 160 then 115 — the side that is\n// supposed to shout, at 55–77% of the others. A border plus a ring is 2 CSS px, so\n// whatever the fraction there is always one fully covered device pixel on every side\n// (re-measured: worst side 241). It is the GEOMETRY that carries that, not the hue,\n// so the fix survives a consumer re-pointing `--danger-border`.\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives.\nexport const FIELD_INVALID =\n \"border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies in the\n * phone layout (`usePhoneLayout()`, `max-md:` at the text size in force) and the field\n * is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n * - A hairline baseline. With the box gone something still has to say \"you can\n * type here\"; it takes the brand colour on focus, where a bordered field would\n * light its whole outline. Each edge is set exactly once (`border-x-0\n * border-t-0 border-b`) so the rule can't hinge on utility order. On focus the\n * line is doubled inward by an inset shadow on that edge alone — FIELD_BASE's\n * inset ring, for the same reason (K5 follow-up: a 1px line reads half-strength at\n * 125 %) — where a ring would draw a box round the figure.\n * - The muted placeholder colour, because a display field is usually empty at\n * the moment it matters most and has nothing else to show.\n * - The label, moved to `sr-only` rather than dropped: display type is legible\n * to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n \"block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\n//\n// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A\n// trigger with nothing chosen and no placeholder renders an EMPTY value span, an\n// empty span has no line box, and the trigger collapsed to its padding — 18px\n// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker\n// and MonthPicker had met the same thing as Keksdose live #294 and patched their\n// own span with a U+00A0). Here, on the shared class, it covers every trigger\n// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height\n// so it tracks whatever type the trigger is set in; the first child is the value\n// in every trigger here (the chevron and the clear button are absolute).\nexport const FIELD_TRIGGER = cn(\n FIELD_BASE,\n \"relative flex items-center justify-between gap-2 text-start hover:bg-hover\",\n \"[&>:first-child]:min-h-[1lh]\",\n);\n\n/** An alias rather than an interface: the chevron adds nothing of its own to an\n * `<svg>`'s props, and an interface declaring no members is the same type wearing a\n * name that suggests otherwise. */\nexport type FieldChevronProps = Omit<ComponentPropsWithRef<\"svg\">, \"children\">;\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pe-9` on the trigger so the value can't run underneath. At the\n * inline END, not the right: a right-to-left form reads the value from the right,\n * and a chevron parked on top of its first word hid exactly the part that says\n * what was picked. */\nexport function FieldChevron({ className, ...rest }: FieldChevronProps) {\n return (\n <ChevronDown\n {...rest}\n // After the spread: the chevron is decoration beside a control that already has\n // a name, and an `aria-hidden` a caller could switch off by accident is a second\n // announcement of the same field.\n aria-hidden\n className={cn(\n \"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\",\n className,\n )}\n />\n );\n}\n\n/** A native dropdown Select's dress: no native arrow, and `pe-9`, the room the\n * {@link FieldChevron} takes. Shared with {@link SelectWidthFloor}. `@internal` */\nexport const SELECT_MENU_DRESS = \"appearance-none pe-9\";\n\n/** The compact Select (`size=\"sm\"`): the field's colours, a toolbar button's height.\n * `py-0` and a fixed height rather than a smaller padding, so the box is 28px whatever\n * line height the caller's type brings with it. Shared with {@link SelectWidthFloor}.\n * `@internal` */\nexport const SELECT_SM = \"h-7 py-0 ps-2 pe-7 text-xs\";\n\n/**\n * The width an UNLABELLED Select needs to show the widest of `values` whole: an invisible,\n * zero-height line under it, in the select's own type, padding, chevron room and border\n * (the same classes), one value per line. Placed beside the Select in the box that sizes\n * it, it holds that box to the widest value, and the `w-full` select fills it. `@internal`\n *\n * Why it takes a sizer (0.51, Kurvenschmiede N5). A `<select>` with a percentage width\n * is a \"compressible\" element: its min-content contribution is ZERO (CSS Sizing 3\n * §5.2.2), so the auto table layout squeezes its column to the header, and beside a\n * `grow` column every other column IS squeezed to its min-content (data-table-fit.ts).\n * The user roster's role select stood 92px and read \"Meml…\" and \"Admi…\" (KS review,\n * 0.49 and 0.50). `min-width: max-content` on the select would hold it instead — but to\n * its widest OPTION, and an unavailable role's option carries its reason (\"Customer (owns\n * work)\", RoleSelect's `optionDisabledReason`): the column would widen for a text that is\n * never the selected value. So the caller says which values can be selected, in the\n * current language.\n */\nexport function SelectWidthFloor({ values, size = \"md\" }: { values: readonly string[]; size?: \"sm\" | \"md\" }) {\n if (values.length === 0) return null;\n return (\n <span\n aria-hidden\n data-select-floor=\"\"\n className={cn(\n FIELD_BASE,\n SELECT_MENU_DRESS,\n size === \"sm\" && SELECT_SM,\n // The horizontal box only: no height, no vertical padding or border, not painted.\n \"invisible h-0 overflow-hidden border-y-0 py-0 whitespace-nowrap shadow-none\",\n )}\n >\n {values.map((value, i) => (\n // The value as generated content, not as text: it is laid out (and so measured)\n // the same, but a test's `getByText(\"Member\")` still finds the one option, and a\n // find-in-page or a copied row does not meet a word nobody sees.\n <span key={i} data-value={value} className=\"block before:content-[attr(data-value)]\" />\n ))}\n </span>\n );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the field's own surface, so no background chip and nothing to mismatch the card.\n//\n// At Large it is a static label ABOVE the field instead (0.33, §10.17): in flow, so it\n// wraps; always in its floated look, since there is no strip to float into and no\n// placeholder to stand in for; no transition, since it never moves.\nconst LABEL_FLOATED_AT_LARGE =\n \"large:text-caption large:leading-tight large:text-secondary large:transition-none\";\n\nexport const FLOATING_LABEL_CLASS = cn(\n \"pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all\",\n \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n \"peer-disabled:opacity-50\",\n LABEL_ABOVE_AT_LARGE,\n \"large:block\",\n LABEL_FLOATED_AT_LARGE,\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the end edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48). At Large the row stands\n// above the field, as the label alone does, and nothing at the end edge is under it.\nconst FLOATING_ROW_CLASS = cn(\n \"pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all\",\n \"max-w-[calc(100%-3rem)] text-sm text-placeholder\",\n \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n \"peer-disabled:opacity-50\",\n LABEL_ABOVE_AT_LARGE,\n LABEL_FLOATED_AT_LARGE,\n);\n\n/** The static label's row with its \"?\" at the field's end, in the top strip — and at\n * Large above the field (LABEL_ABOVE_AT_LARGE). */\nconst STATIC_ROW_CLASS = cn(\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport interface FloatingFieldProps extends ComponentPropsWithRef<\"div\"> {\n htmlFor?: string;\n label?: ReactNode;\n staticLabel?: boolean;\n /** Keep the label in the accessibility tree but out of the layout — what\n * {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n * field left would have nothing to float in. */\n srOnlyLabel?: boolean;\n /** Something interactive that belongs to the LABEL rather than to the value —\n * in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n * with the label, so it is centred on the label's line by the layout instead\n * of by a hand-tuned `top-…`, and it can never drift when the type changes.\n *\n * It rides an ANIMATED label too, and the two cases place it differently on\n * purpose. A static label has a field-wide strip to itself, so the hint sits\n * at the far end of it and a long label truncates into the gap. An animated\n * one belongs to a control with something at the end edge of the field — a\n * calculator, a stepper — so the hint follows the label instead, and it is\n * the label that gives way (steering-design feedback #48). */\n hint?: ReactNode;\n children: ReactNode;\n}\n\nexport function FloatingField({\n className,\n htmlFor,\n label,\n staticLabel,\n srOnlyLabel,\n hint,\n children,\n ...rest\n}: FloatingFieldProps) {\n const withHint = hint !== undefined && !srOnlyLabel;\n const atEnd = withHint && staticLabel;\n // A label drawn over the field: at Large it stands above it instead (0.33, §10.17),\n // in the first row of this box (LABEL_ABOVE_BOX), though it FOLLOWS the control in\n // the DOM — `peer-*` reads the input before it.\n const above = label !== undefined && !srOnlyLabel;\n const labelEl = label !== undefined && (\n <label\n htmlFor={htmlFor}\n // In the first row at Large, out of LABEL_ABOVE_BOX's rule for the field's parts.\n data-field-label={above && !withHint ? \"\" : undefined}\n className={\n srOnlyLabel\n ? \"sr-only\"\n : atEnd\n ? cn(\"pointer-events-none min-w-0 truncate-until-large\", STATIC_LABEL_TYPE)\n : withHint\n ? \"pointer-events-none min-w-0 truncate-until-large\"\n : staticLabel\n ? FLOATING_LABEL_STATIC\n : FLOATING_LABEL_CLASS\n }\n >\n {label}\n </label>\n );\n return (\n // `relative` is the whole contract of this wrapper — the floating label and every\n // control that hangs off it (a reveal toggle, a chevron) are positioned against\n // this box — so it is merged through `cn` after the spread rather than left where\n // a caller's stray `className` or `style` could unset it. At Large, with a label\n // above, a grid: the label's row over the field's, the field's parts in the latter.\n <div {...rest} className={cn(\"relative\", above && LABEL_ABOVE_BOX, className)}>\n {children}\n {withHint ? (\n // Static: `inset-x-3` rather than `start-3`, so a long label truncates at\n // the field's own end padding instead of running under the chevron.\n // Animated: the row floats with the label and is only as wide as it needs\n // to be. Either way the hint keeps its width (`shrink-0`) and the label\n // is the one that gives way.\n <div data-field-label=\"\" className={atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS}>\n {labelEl}\n <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n </div>\n ) : (\n labelEl\n )}\n </div>\n );\n}\n\nexport interface LabelProps extends ComponentPropsWithRef<\"label\"> {\n /** Draw the required mark after the text. The mark is `aria-hidden`: what a\n * screen reader hears is the control's own `required` / `aria-required`, which\n * the caller still sets — a \"star\" read out as the last word of every name is\n * noise, and a control that is not marked required is not required however its\n * label looks. */\n required?: boolean;\n /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */\n size?: \"sm\" | \"md\";\n /** Dim the label with its control. A label ABOVE its field is not the field's\n * `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */\n disabled?: boolean;\n}\n\n/**\n * The label ABOVE a field, for the places a floating label does not fit: a control\n * the kit did not render (a third-party picker, a range slider, a group of radios),\n * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels\n * above its fields throughout.\n *\n * A new component rather than a mode of {@link FieldLabel}, because the two share\n * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a\n * trigger's `relative` box and has to stay exactly that for every dropdown that\n * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,\n * that a click focuses the control through. Spacing below it belongs to the caller's\n * layout (`space-y-1.5` on the pair, typically), as it would for any block.\n */\nexport function Label({ required, size = \"md\", disabled, className, children, ...rest }: LabelProps) {\n return (\n <label\n {...rest}\n className={cn(\n \"inline-flex items-center gap-0.5 font-medium leading-none text-primary\",\n size === \"sm\" ? \"text-xs\" : \"text-sm\",\n disabled && \"cursor-default opacity-50\",\n className,\n )}\n >\n {children}\n {required && (\n <span aria-hidden className=\"text-danger\">\n *\n </span>\n )}\n </label>\n );\n}\n\n// The message under a field that is wrong, and the wiring that attaches it — `useFieldError`\n// — lives in field-parts since 0.34, every field's (DUP-8, refactor audit 2026-10).\n\n/**\n * @internal A field and its message as one box.\n *\n * The message cannot go INSIDE the field's own `relative` box. The password reveal\n * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on\n * whatever that box contains — put two lines of message in it and the chevron drifts\n * down out of the field, between the value and the text. So the field keeps its box\n * and this wraps the pair.\n *\n * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,\n * which is what keeps the prop additive: it is exactly the DOM it was before the prop\n * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a\n * caller's flex row. A field that DOES take `error` — the key is passed, whatever its\n * value — is wrapped for as long as it is mounted, message or not (`reserve`).\n *\n * It used to wrap only while a message showed, and that cost the control its\n * identity: a fragment and a `<div>` are different elements at the same spot in the\n * tree, so React threw the `<input>` away and mounted a new one every time the message\n * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled\n * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its\n * \"Wrong password\" on change, so the first keystroke of the retry dropped the user out\n * of the field. Keeping the box stops that; the field is never reparented.\n *\n * The other ways to keep it stable were worse. A box on EVERY field changes what every\n * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the\n * field would land on a child of the item instead of the item). A `display: contents`\n * box would keep the flex/grid item, but a contents box takes no margin, so a parent's\n * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password\n * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves\n * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box\n * whenever its message showed, so what changes is only that it keeps it while none\n * does; every such call site in the three apps sits in a block or a `space-y`/grid\n * stack where a full-width block box is the field's own size. The case it does change\n * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a\n * row): that caller already lost the sizing while a message showed, and now sees the\n * same box without one. Pass `error` only where a message can actually appear.\n *\n * `className` is NOT moved out here, for the same reason — it goes on the field, as it\n * always has, so the box cannot silently change what that prop styles.\n */\nexport function FieldGroup({\n errorEl,\n reserve = false,\n children,\n}: {\n errorEl: ReactNode;\n /** The caller passed `error`: keep the box even while there is no message. */\n reserve?: boolean;\n children: ReactNode;\n}) {\n if (errorEl === null && !reserve) return <>{children}</>;\n return (\n <div>\n {children}\n {errorEl}\n </div>\n );\n}\n\n/** The two names the password reveal toggle can wear. See {@link Input}. */\nexport interface PasswordRevealLabels {\n /** While the value is hidden — activating the toggle will show it. */\n show: string;\n /** While the value is shown. */\n hide: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_REVEAL_LABELS };\n\n/**\n * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.\n * The visible \"12/80\" is digits and a slash and is not translated; these are the words\n * a screen reader gets instead of it.\n */\nexport interface CharacterCountLabels {\n /** The counter as part of the field's description, read when focus reaches the\n * field: \"12 of 80 characters\". */\n count: (used: number, max: number) => string;\n /** Said once, politely, on entering the last stretch before the limit: \"8\n * characters left\". */\n remaining: (left: number) => string;\n /** Said once, politely, on reaching the limit. */\n limitReached: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHARACTER_COUNT_LABELS };\n\n/** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter\n * and the limit can never disagree about whether a field is full. */\nfunction textLength(value: unknown): number {\n return value === undefined || value === null ? 0 : String(value).length;\n}\n\n/** @internal The counter's length: the controlled `value`'s, else what the field has been typed\n * to (from `defaultValue` on). `track` is called from the field's change handler. */\nexport function useTypedLength(value: unknown, defaultValue: unknown) {\n const [typed, setTyped] = useState(() => textLength(defaultValue));\n return { used: value !== undefined ? textLength(value) : typed, track: (text: string) => setTyped(text.length) };\n}\n\ntype CountZone = \"ok\" | \"near\" | \"limit\";\n\n/** The last stretch before the limit: a tenth of it, at least 1 and at most 20 — \"8\n * left\" of 80, and 20 of 2,000 rather than 200, which is not \"near\" in any sense a\n * person typing means. */\nfunction nearLimitAt(max: number): number {\n return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));\n}\n\nfunction countZone(used: number, max: number): CountZone {\n if (used >= max) return \"limit\";\n return max - used <= nearLimitAt(max) ? \"near\" : \"ok\";\n}\n\n/**\n * @internal The live \"12/80\" under a field with `showCount` (keksdose K11: the admin broadcast,\n * support replies, canned replies and the handoff note each counted by hand, and one\n * announced every keystroke).\n *\n * Three channels, each saying only what it should:\n * - the digits, `aria-hidden` — \"12 slash 80\" is not a sentence;\n * - a `hidden` \"12 of 80 characters\" on the field's `aria-describedby`, so the count is\n * read with the field when focus reaches it, and never while typing;\n * - a polite live region that speaks ONCE per stretch: on entering the last tenth\n * (\"8 characters left\") and on reaching the limit. A region that changed on every\n * keystroke would talk over the user's own typing echo for the whole message.\n * Nothing is said on mount: a stored note already near its limit is not news.\n */\nexport function CharacterCount({\n id,\n used,\n max,\n labels,\n caption,\n}: {\n id: string;\n used: number;\n max: number;\n labels: CharacterCountLabels;\n caption: ReactNode;\n}) {\n const zone = countZone(used, max);\n // What the live region holds, re-set only when the stretch changes — the previous\n // render's zone kept in state, the pattern React documents for \"adjusting state when\n // a prop changes\", so the region's text (and so the announcement) changes at most\n // once per crossing.\n const [said, setSaid] = useState<{ zone: CountZone; text: string }>({ zone, text: \"\" });\n if (said.zone !== zone) {\n setSaid({\n zone,\n text: zone === \"near\" ? labels.remaining(max - used) : zone === \"limit\" ? labels.limitReached : \"\",\n });\n }\n return (\n // `relative` holds the sr-only region (see sr-only-containment.test).\n <div className=\"relative mt-1 flex items-start gap-2\">\n <div className=\"min-w-0 flex-1\">{caption}</div>\n <span\n aria-hidden\n className={cn(\n \"shrink-0 text-caption leading-tight tabular-nums\",\n zone === \"limit\"\n ? \"text-danger\"\n : zone === \"near\"\n ? \"text-warning\"\n : \"text-muted\",\n )}\n >\n {used}/{max}\n </span>\n <span id={id} hidden>\n {labels.count(used, max)}\n </span>\n <span role=\"status\" className=\"sr-only\">\n {said.text}\n </span>\n </div>\n );\n}\n\n/** @internal What goes under a text field: the caption (beside the counter, when there is one),\n * then the error. `null` when there is nothing, so a field with none keeps exactly the\n * DOM it had (see {@link FieldGroup}). */\nexport function fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode {\n if (counter === null && hint.captionText === undefined && errorEl === null) return null;\n return (\n <>\n {counter ?? <FieldCaption parts={hint} />}\n {errorEl}\n </>\n );\n}\n\n/**\n * @internal kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has\n * floated out of its way — on focus — and transparent until then, while the label sits\n * where the placeholder would be. Without it the field forced `placeholder=\" \"` for the\n * float trick and dropped the caller's text without a word (kastlan's \"note\" field lost\n * its hint). `:placeholder-shown` still drives the float: it matches an empty field\n * whatever the placeholder's text is.\n */\nexport const FLOATING_PLACEHOLDER_ON_FOCUS = \"focus:placeholder:text-placeholder\";\n\n/** @internal A placeholder with something to show. `\"\"` and blanks are the float trick's own\n * `\" \"`, never the caller's hint. */\nexport const hasPlaceholderText = (placeholder: string | undefined): placeholder is string =>\n placeholder !== undefined && placeholder.trim() !== \"\";\n\n/** @internal The counter's words: the `characterCount` namespace — prop > `<UiKitProvider\n * labels>` > English. One place, so the namespace is named once. */\nexport function useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels {\n return useKitLabels(\"characterCount\", DEFAULT_CHARACTER_COUNT_LABELS, prop);\n}\n"],"mappings":"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","names":[]}
|
|
@@ -76,12 +76,9 @@ export interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTM
|
|
|
76
76
|
* `accent`. `surface`: the page's surface with a hairline border — for a FAB that is a
|
|
77
77
|
* status rather than a call to action, as kastlan's offline pill is (a brand pill would
|
|
78
78
|
* shout "press me" at a user who is merely offline). Ignored while `pressed` is set; a
|
|
79
|
-
* toggle has its own two looks.
|
|
80
|
-
* development build warns once), removed in 0.51.
|
|
79
|
+
* toggle has its own two looks.
|
|
81
80
|
*/
|
|
82
|
-
variant?: "accent" | "surface"
|
|
83
|
-
/** @deprecated 0.49 — use `accent` (same look); removed in 0.51. */
|
|
84
|
-
| "primary";
|
|
81
|
+
variant?: "accent" | "surface";
|
|
85
82
|
/**
|
|
86
83
|
* Hover and focus label in the kit {@link Tooltip}, instead of the native `title` —
|
|
87
84
|
* keksdose has ONE tooltip (dev#523) and wrapped its assistant launcher by hand,
|
|
@@ -129,7 +126,7 @@ export interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTM
|
|
|
129
126
|
* largest of several wins), and `AppShell` pads its `<main>` past it on a phone, so the
|
|
130
127
|
* page's last row no longer ends under the button (keksdose dev#612).
|
|
131
128
|
*/
|
|
132
|
-
export declare function FloatingActionButton({ label, icon, corner, offset, nativeTitle, pressed, extended, live, variant
|
|
129
|
+
export declare function FloatingActionButton({ label, icon, corner, offset, nativeTitle, pressed, extended, live, variant, tooltip, tooltipSide, hideWhenOverlay, className, style, type, title, hidden: hiddenProp, ref, ...rest }: FloatingActionButtonProps): import("react").JSX.Element;
|
|
133
130
|
export interface FloatingPanelProps {
|
|
134
131
|
/** The panel's heading, and its accessible name. */
|
|
135
132
|
title: ReactNode;
|
|
@@ -280,13 +277,9 @@ export interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButto
|
|
|
280
277
|
pressedStyle?: "tint" | "plain";
|
|
281
278
|
/**
|
|
282
279
|
* `accent`: the brand-filled member, for the group's main action (the /transactions
|
|
283
|
-
* "+"), as Button's `accent`. `default` (default): the quiet one.
|
|
284
|
-
* deprecated alias of `accent` (0.49; a development build warns once), removed no
|
|
285
|
-
* earlier than 0.51.
|
|
280
|
+
* "+"), as Button's `accent`. `default` (default): the quiet one.
|
|
286
281
|
*/
|
|
287
|
-
variant?: "default" | "accent"
|
|
288
|
-
/** @deprecated 0.49 — use `accent` (same look); removed in 0.51. */
|
|
289
|
-
| "primary";
|
|
282
|
+
variant?: "default" | "accent";
|
|
290
283
|
/**
|
|
291
284
|
* A count in a dot at the member's top end corner — the /transactions invoices link's
|
|
292
285
|
* pending count. Nothing is drawn for `0` or less; above 99 it reads `99+`. The count
|
|
@@ -318,4 +311,4 @@ export interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButto
|
|
|
318
311
|
* keeps the brand member's fill inside the pill's corners), and the focus ring is inset
|
|
319
312
|
* for the same reason.
|
|
320
313
|
*/
|
|
321
|
-
export declare function FloatingAction({ label, icon, pressed, pressedStyle, variant
|
|
314
|
+
export declare function FloatingAction({ label, icon, pressed, pressedStyle, variant, badge, badgeLabel, badgeTone, tooltip, tooltipSide, href, renderLink, className, type, onClick, ref, ...rest }: FloatingActionProps): import("react").JSX.Element;
|
|
@@ -5,7 +5,6 @@ import { createPortal } from "react-dom";
|
|
|
5
5
|
import { X } from "lucide-react";
|
|
6
6
|
import { cn } from "../lib/cn.js";
|
|
7
7
|
import { FOCUS_RING } from "./focus-ring.js";
|
|
8
|
-
import { warnDeprecatedVariant } from "./button-look.js";
|
|
9
8
|
import { dirOf } from "../lib/direction.js";
|
|
10
9
|
import { registerFloating } from "../lib/floating-stack.js";
|
|
11
10
|
import { useFloatClearance } from "../lib/float-clearance.js";
|
|
@@ -34,10 +33,6 @@ function usePortalDir() {
|
|
|
34
33
|
}, []);
|
|
35
34
|
return [marker, dir];
|
|
36
35
|
}
|
|
37
|
-
function deprecatedPrimary(component) {
|
|
38
|
-
warnDeprecatedVariant(component, "primary", "accent");
|
|
39
|
-
return "accent";
|
|
40
|
-
}
|
|
41
36
|
function FloatingActionButton({
|
|
42
37
|
label,
|
|
43
38
|
icon,
|
|
@@ -47,7 +42,7 @@ function FloatingActionButton({
|
|
|
47
42
|
pressed,
|
|
48
43
|
extended = false,
|
|
49
44
|
live = false,
|
|
50
|
-
variant
|
|
45
|
+
variant = "accent",
|
|
51
46
|
tooltip,
|
|
52
47
|
tooltipSide = "top",
|
|
53
48
|
hideWhenOverlay = true,
|
|
@@ -62,7 +57,6 @@ function FloatingActionButton({
|
|
|
62
57
|
const overlay = useOverlayOpen(hideWhenOverlay);
|
|
63
58
|
const hidden = hiddenProp || overlay || void 0;
|
|
64
59
|
const [marker, dir] = usePortalDir();
|
|
65
|
-
const variant = givenVariant === "primary" ? deprecatedPrimary("FloatingActionButton variant") : givenVariant;
|
|
66
60
|
const toggle = pressed !== void 0;
|
|
67
61
|
const tip = tooltip === true ? label : tooltip === false || tooltip === "" ? void 0 : tooltip;
|
|
68
62
|
const wrapped = tip !== void 0 && tip !== null;
|
|
@@ -332,7 +326,7 @@ function FloatingAction({
|
|
|
332
326
|
icon,
|
|
333
327
|
pressed,
|
|
334
328
|
pressedStyle = "tint",
|
|
335
|
-
variant
|
|
329
|
+
variant = "default",
|
|
336
330
|
badge,
|
|
337
331
|
badgeLabel,
|
|
338
332
|
badgeTone = "warning",
|
|
@@ -351,7 +345,6 @@ function FloatingAction({
|
|
|
351
345
|
const counted = badge !== void 0 && badge > 0;
|
|
352
346
|
const name = counted ? `${label}, ${badgeLabel ?? labels.badge(badge)}` : label;
|
|
353
347
|
const isLink = href !== void 0;
|
|
354
|
-
const variant = givenVariant === "primary" ? deprecatedPrimary("FloatingAction variant") : givenVariant;
|
|
355
348
|
const look = cn(
|
|
356
349
|
"relative flex size-12 items-center justify-center transition-colors",
|
|
357
350
|
"outline-none focus-visible:ring-inset",
|