@tensor_1/react 2.10.0 → 2.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chart.cjs +3 -12
- package/dist/components/Alert.js +7 -15
- package/dist/components/AppShell.d.ts +1 -3
- package/dist/components/AppShell.js +1 -3
- package/dist/components/Avatar.js +1 -2
- package/dist/components/Button.js +16 -32
- package/dist/components/Card.d.ts +1 -3
- package/dist/components/Card.js +2 -2
- package/dist/components/Chart.js +3 -12
- package/dist/components/CommandPalette.d.ts +2 -4
- package/dist/components/CommandPalette.js +13 -66
- package/dist/components/Comments.d.ts +1 -5
- package/dist/components/Comments.js +1 -1
- package/dist/components/Composer.d.ts +1 -8
- package/dist/components/Composer.js +2 -7
- package/dist/components/DetailLayout.js +1 -1
- package/dist/components/Drawer.d.ts +4 -3
- package/dist/components/Drawer.js +4 -6
- package/dist/components/Field.js +3 -6
- package/dist/components/Inbox.d.ts +3 -13
- package/dist/components/Inbox.js +3 -61
- package/dist/components/Input.d.ts +2 -13
- package/dist/components/Input.js +5 -20
- package/dist/components/Kanban.d.ts +3 -15
- package/dist/components/Kanban.js +10 -42
- package/dist/components/Meter.d.ts +1 -3
- package/dist/components/Meter.js +1 -9
- package/dist/components/Modal.d.ts +5 -3
- package/dist/components/Modal.js +4 -6
- package/dist/components/NavFavourites.js +0 -11
- package/dist/components/PageHeader.d.ts +1 -3
- package/dist/components/PageHeader.js +2 -2
- package/dist/components/Peek.d.ts +4 -3
- package/dist/components/Peek.js +6 -9
- package/dist/components/Progress.d.ts +1 -3
- package/dist/components/Progress.js +3 -5
- package/dist/components/Radio.d.ts +1 -3
- package/dist/components/Radio.js +2 -6
- package/dist/components/Sidebar.js +2 -4
- package/dist/components/Spinner.d.ts +1 -3
- package/dist/components/Spinner.js +3 -3
- package/dist/components/Stat.js +1 -5
- package/dist/components/States.d.ts +1 -3
- package/dist/components/States.js +2 -8
- package/dist/components/Table.d.ts +2 -9
- package/dist/components/Table.js +6 -10
- package/dist/components/Tabs.d.ts +1 -13
- package/dist/components/Tabs.js +3 -78
- package/dist/components/Timeline.d.ts +3 -3
- package/dist/components/Timeline.js +3 -3
- package/dist/components/Toast.js +5 -42
- package/dist/components/Tooltip.d.ts +1 -3
- package/dist/components/Tooltip.js +5 -44
- package/dist/components/Tree.d.ts +0 -2
- package/dist/components/Tree.js +4 -26
- package/dist/hooks/useDialog.d.ts +1 -1
- package/dist/hooks/useDialog.js +2 -17
- package/dist/hooks/useTable.d.ts +0 -5
- package/dist/hooks/useTable.js +1 -20
- package/dist/index.cjs +162 -616
- package/dist/index.d.cts +37 -127
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -2
- package/dist/tree-model.d.ts +0 -4
- package/dist/tree-model.js +0 -8
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { RefObject, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes,
|
|
2
|
+
import { RefObject, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, CSSProperties, HTMLAttributes, AnchorHTMLAttributes, TdHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
declare function cx(...args: (string | false | null | undefined | 0)[]): string;
|
|
5
5
|
|
|
6
|
-
declare function useDialog(open: boolean
|
|
6
|
+
declare function useDialog(open: boolean): React.RefObject<HTMLDialogElement>;
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* uix table engine — framework-agnostic, dependency-free logic for data grids.
|
|
@@ -114,11 +114,6 @@ interface UseTableResult<T> {
|
|
|
114
114
|
pinned: ReadonlySet<string>;
|
|
115
115
|
/** header select-all tri-state over the current derived rows. */
|
|
116
116
|
selectAll: SelectAllState;
|
|
117
|
-
/**
|
|
118
|
-
* Screen-reader status text reflecting the latest change — "Sorted by {field}, {dir}",
|
|
119
|
-
* "{n} results" (filter/search), "{n} selected". Pass to `<TableWrap announcement>` (UIX-A11Y-2).
|
|
120
|
-
*/
|
|
121
|
-
announcement: string;
|
|
122
117
|
/** cycle a column's sort; pass additive (⇧-click) to keep it as a secondary key. */
|
|
123
118
|
toggleSort: (field: string, additive?: boolean) => void;
|
|
124
119
|
setSort: (keys: SortKey[]) => void;
|
|
@@ -246,19 +241,8 @@ interface InputGroupProps {
|
|
|
246
241
|
leadingIcon?: ReactNode;
|
|
247
242
|
trailingIcon?: ReactNode;
|
|
248
243
|
className?: string;
|
|
249
|
-
/** Injected by `<Field>` when it wraps the group; forwarded onto the child control. */
|
|
250
|
-
id?: string;
|
|
251
|
-
'aria-describedby'?: string;
|
|
252
|
-
'aria-invalid'?: AriaAttributes['aria-invalid'];
|
|
253
|
-
'aria-required'?: AriaAttributes['aria-required'];
|
|
254
244
|
}
|
|
255
|
-
|
|
256
|
-
* Icon-adorned wrapper for a child `<Input>`. The control is passed as `children`, so
|
|
257
|
-
* `<Field>`'s injected `id`/`aria-*` land on this wrapper — they're forwarded onto the
|
|
258
|
-
* single child element (the child's own props win) so label/message association survives
|
|
259
|
-
* the extra div (UIX-A11Y-3).
|
|
260
|
-
*/
|
|
261
|
-
declare function InputGroup({ children, leadingIcon, trailingIcon, className, id, 'aria-describedby': describedBy, 'aria-invalid': invalid, 'aria-required': required, }: InputGroupProps): react.JSX.Element;
|
|
245
|
+
declare function InputGroup({ children, leadingIcon, trailingIcon, className }: InputGroupProps): react.JSX.Element;
|
|
262
246
|
|
|
263
247
|
interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
264
248
|
invalid?: boolean;
|
|
@@ -283,10 +267,8 @@ declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttri
|
|
|
283
267
|
interface RadioGroupProps {
|
|
284
268
|
children: ReactNode;
|
|
285
269
|
className?: string;
|
|
286
|
-
/** Group name; when set the group renders as fieldset/legend so it's announced with each radio. */
|
|
287
|
-
label?: ReactNode;
|
|
288
270
|
}
|
|
289
|
-
declare function RadioGroup({ children, className
|
|
271
|
+
declare function RadioGroup({ children, className }: RadioGroupProps): react.JSX.Element;
|
|
290
272
|
|
|
291
273
|
interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
292
274
|
label?: ReactNode;
|
|
@@ -305,25 +287,28 @@ interface FieldProps {
|
|
|
305
287
|
}
|
|
306
288
|
declare function Field({ label, hint, error, success, required, children, className, htmlFor }: FieldProps): react.JSX.Element;
|
|
307
289
|
|
|
308
|
-
interface ModalProps
|
|
290
|
+
interface ModalProps {
|
|
309
291
|
open: boolean;
|
|
310
292
|
onClose?: () => void;
|
|
311
293
|
title?: ReactNode;
|
|
312
294
|
children?: ReactNode;
|
|
313
295
|
footer?: ReactNode;
|
|
296
|
+
className?: string;
|
|
297
|
+
style?: CSSProperties;
|
|
314
298
|
}
|
|
315
|
-
declare function Modal({ open, onClose, title, children, footer, className,
|
|
299
|
+
declare function Modal({ open, onClose, title, children, footer, className, style }: ModalProps): react.JSX.Element;
|
|
316
300
|
|
|
317
|
-
interface DrawerProps
|
|
301
|
+
interface DrawerProps {
|
|
318
302
|
open: boolean;
|
|
319
303
|
onClose?: () => void;
|
|
320
304
|
title?: ReactNode;
|
|
321
305
|
children?: ReactNode;
|
|
322
306
|
footer?: ReactNode;
|
|
307
|
+
className?: string;
|
|
323
308
|
}
|
|
324
|
-
declare function Drawer({ open, onClose, title, children, footer, className
|
|
309
|
+
declare function Drawer({ open, onClose, title, children, footer, className }: DrawerProps): react.JSX.Element;
|
|
325
310
|
|
|
326
|
-
interface PeekProps
|
|
311
|
+
interface PeekProps {
|
|
327
312
|
open: boolean;
|
|
328
313
|
onClose?: () => void;
|
|
329
314
|
title?: ReactNode;
|
|
@@ -332,25 +317,22 @@ interface PeekProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
|
|
|
332
317
|
onNavPrev?: () => void;
|
|
333
318
|
onNavNext?: () => void;
|
|
334
319
|
hint?: string;
|
|
320
|
+
className?: string;
|
|
335
321
|
}
|
|
336
|
-
declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className
|
|
322
|
+
declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className }: PeekProps): react.JSX.Element;
|
|
337
323
|
|
|
338
324
|
interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
339
325
|
title?: ReactNode;
|
|
340
|
-
/** Element for the title — pick a real heading to slot the card into the page outline (UIX-A11Y-4). Default `div` keeps legacy rendering. */
|
|
341
|
-
titleAs?: 'h2' | 'h3' | 'h4' | 'div';
|
|
342
326
|
subtitle?: ReactNode;
|
|
343
327
|
headerAction?: ReactNode;
|
|
344
328
|
footer?: ReactNode;
|
|
345
329
|
children?: ReactNode;
|
|
346
330
|
}
|
|
347
|
-
declare function Card({ title,
|
|
331
|
+
declare function Card({ title, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
|
|
348
332
|
|
|
349
333
|
interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
350
334
|
eyebrow?: ReactNode;
|
|
351
335
|
title: ReactNode;
|
|
352
|
-
/** Heading level for the title — drop to `h2` when the page already owns an `h1` (UIX-A11Y-4). */
|
|
353
|
-
as?: 'h1' | 'h2';
|
|
354
336
|
/** Supporting copy under the title. */
|
|
355
337
|
subtitle?: ReactNode;
|
|
356
338
|
/** Right-aligned action area (buttons, menus). */
|
|
@@ -360,7 +342,7 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
|
360
342
|
* Page header — eyebrow / title / subtitle + actions row, over `.uix-page-header`.
|
|
361
343
|
* The hairline + breathing room below come from the component CSS.
|
|
362
344
|
*/
|
|
363
|
-
declare function PageHeader({ eyebrow, title, subtitle, actions,
|
|
345
|
+
declare function PageHeader({ eyebrow, title, subtitle, actions, className, ...props }: PageHeaderProps): react.JSX.Element;
|
|
364
346
|
|
|
365
347
|
interface DetailLayoutProps extends HTMLAttributes<HTMLDivElement> {
|
|
366
348
|
/** The narrow trailing column (record meta, side panels). */
|
|
@@ -447,18 +429,6 @@ interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
|
447
429
|
disabled?: boolean;
|
|
448
430
|
}
|
|
449
431
|
declare function Tab({ value, children, disabled, className, onClick, ...props }: TabProps): react.JSX.Element;
|
|
450
|
-
interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
|
|
451
|
-
/** The owning `<Tab>`'s value — the panel renders only while that tab is selected. */
|
|
452
|
-
value: string;
|
|
453
|
-
children?: ReactNode;
|
|
454
|
-
}
|
|
455
|
-
/**
|
|
456
|
-
* The tabpanel paired with a `<Tab>` by `value` (UIX-A11Y-2): labelled by its tab,
|
|
457
|
-
* `tabIndex 0` so Tab from the tablist lands in the content, rendered only while
|
|
458
|
-
* selected. Place it as a direct child of `<Tabs>` — it is hoisted out of the tablist —
|
|
459
|
-
* or anywhere the Tabs context reaches.
|
|
460
|
-
*/
|
|
461
|
-
declare function TabPanel({ value, children, ...props }: TabPanelProps): react.JSX.Element | null;
|
|
462
432
|
|
|
463
433
|
type ShellNav = 'full' | 'rail' | 'hidden';
|
|
464
434
|
interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
|
|
@@ -476,13 +446,11 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
476
446
|
onExitFocus?: () => void;
|
|
477
447
|
/** Drop the content gutter so a genuinely wide table runs edge-to-edge. */
|
|
478
448
|
mainBleed?: boolean;
|
|
479
|
-
/** id given to `<main>` and targeted by the skip link. Override on collision (UIX-A11Y-2). */
|
|
480
|
-
mainId?: string;
|
|
481
449
|
sidebar?: ReactNode;
|
|
482
450
|
topbar?: ReactNode;
|
|
483
451
|
children?: ReactNode;
|
|
484
452
|
}
|
|
485
|
-
declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed,
|
|
453
|
+
declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
|
|
486
454
|
|
|
487
455
|
interface SidebarProps extends HTMLAttributes<HTMLElement> {
|
|
488
456
|
collapsed?: boolean;
|
|
@@ -616,10 +584,8 @@ declare function Alert({ tone, title, icon, children, className, ...props }: Ale
|
|
|
616
584
|
interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
|
|
617
585
|
size?: 'md' | 'lg';
|
|
618
586
|
accent?: boolean;
|
|
619
|
-
/** Announced loading text (default "Loading…"). */
|
|
620
|
-
label?: string;
|
|
621
587
|
}
|
|
622
|
-
declare function Spinner({ size, accent,
|
|
588
|
+
declare function Spinner({ size, accent, className, ...props }: SpinnerProps): react.JSX.Element;
|
|
623
589
|
|
|
624
590
|
type ToastTone = 'success' | 'danger' | 'info';
|
|
625
591
|
interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
@@ -637,14 +603,9 @@ interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
637
603
|
declare function Toaster({ children, className, ...props }: ToasterProps): react.JSX.Element;
|
|
638
604
|
|
|
639
605
|
interface TableWrapProps extends HTMLAttributes<HTMLDivElement> {
|
|
640
|
-
/**
|
|
641
|
-
* Polite live-region text for table state changes — "Sorted by …", "N results",
|
|
642
|
-
* "N selected". Pass `useTable().announcement` straight through (UIX-A11Y-2).
|
|
643
|
-
*/
|
|
644
|
-
announcement?: string;
|
|
645
606
|
children?: ReactNode;
|
|
646
607
|
}
|
|
647
|
-
declare function TableWrap({
|
|
608
|
+
declare function TableWrap({ children, className, ...props }: TableWrapProps): react.JSX.Element;
|
|
648
609
|
type TableDensity = 'compact' | 'standard' | 'comfortable';
|
|
649
610
|
type SortDirection = 'ascending' | 'descending' | 'none';
|
|
650
611
|
interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
|
|
@@ -693,11 +654,9 @@ interface RowActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
693
654
|
declare function RowAction({ children, className, type, ...props }: RowActionProps): react.JSX.Element;
|
|
694
655
|
interface ExpandToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
695
656
|
expanded?: boolean;
|
|
696
|
-
/** id of the detail row this toggle controls → `aria-controls` (UIX-A11Y-2). */
|
|
697
|
-
controls?: string;
|
|
698
657
|
}
|
|
699
658
|
/** Chevron button that expands/collapses an inline detail row. */
|
|
700
|
-
declare function ExpandToggle({ expanded,
|
|
659
|
+
declare function ExpandToggle({ expanded, className, type, ...props }: ExpandToggleProps): react.JSX.Element;
|
|
701
660
|
/** Emphasised primary cell text. */
|
|
702
661
|
declare function CellStrong({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
|
|
703
662
|
/** Secondary line under a primary cell value (muted, meta size). */
|
|
@@ -739,10 +698,8 @@ interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
739
698
|
max?: number;
|
|
740
699
|
/** Continuous slide animation when the amount of work is unknown. */
|
|
741
700
|
indeterminate?: boolean;
|
|
742
|
-
/** Accessible name — rendered as `aria-label` (an explicit `aria-label` prop wins). */
|
|
743
|
-
label?: string;
|
|
744
701
|
}
|
|
745
|
-
declare function Progress({ value, max, indeterminate,
|
|
702
|
+
declare function Progress({ value, max, indeterminate, className, ...props }: ProgressProps): react.JSX.Element;
|
|
746
703
|
|
|
747
704
|
/** Fill color tone for the meter bar. Defaults to `success` (green). */
|
|
748
705
|
type MeterTone = 'success' | 'warning' | 'danger' | 'attention' | 'overdue';
|
|
@@ -751,11 +708,9 @@ interface MeterProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
751
708
|
value?: number;
|
|
752
709
|
/** Threshold tone applied via `data-tone` on the fill element. `success` is the implicit default (no attribute). */
|
|
753
710
|
tone?: MeterTone;
|
|
754
|
-
/** Accessible name — rendered as `aria-label` (an explicit `aria-label` prop wins). */
|
|
755
|
-
label?: string;
|
|
756
711
|
}
|
|
757
712
|
/** Horizontal utilization / threshold bar backed by `.uix-meter`. */
|
|
758
|
-
declare function Meter({ value, tone,
|
|
713
|
+
declare function Meter({ value, tone, className, ...props }: MeterProps): react.JSX.Element;
|
|
759
714
|
|
|
760
715
|
interface StatTrend {
|
|
761
716
|
direction: 'up' | 'down';
|
|
@@ -785,9 +740,7 @@ interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
785
740
|
* Tooltip whose bubble renders in the top layer via the native Popover API, so it
|
|
786
741
|
* escapes any `overflow: hidden/scroll` ancestor that would clip the old CSS-only
|
|
787
742
|
* `[data-uix-tip]` tooltip (UIX-FIX-02). Positioned by the shared overlay engine
|
|
788
|
-
* (flip/shift), shown on hover and keyboard focus, dismissed on blur or Escape
|
|
789
|
-
* (document-level, per WCAG 1.4.13), and hoverable: the bubble stays open while
|
|
790
|
-
* the pointer is over it (UIX-A11Y-1).
|
|
743
|
+
* (flip/shift), shown on hover and keyboard focus, dismissed on blur or Escape.
|
|
791
744
|
*/
|
|
792
745
|
declare function Tooltip({ label, placement, className, children, ...props }: TooltipProps): react.JSX.Element;
|
|
793
746
|
|
|
@@ -821,11 +774,9 @@ declare function Skeleton({ variant, width, height, className, style, ...props }
|
|
|
821
774
|
interface LoadingStateProps extends HTMLAttributes<HTMLDivElement> {
|
|
822
775
|
/** Number of skeleton rows to render. */
|
|
823
776
|
rows?: number;
|
|
824
|
-
/** Announced loading text (default "Loading"). */
|
|
825
|
-
label?: string;
|
|
826
777
|
}
|
|
827
778
|
/** A stack of skeleton rows for list/section loading. `role="status"`. */
|
|
828
|
-
declare function LoadingState({ rows,
|
|
779
|
+
declare function LoadingState({ rows, className, ...props }: LoadingStateProps): react.JSX.Element;
|
|
829
780
|
|
|
830
781
|
interface LabelProps extends HTMLAttributes<HTMLSpanElement> {
|
|
831
782
|
/** Any CSS color or a `--uix-chart-*` var; sets `--label-color`. */
|
|
@@ -865,11 +816,7 @@ declare function UserChip({ avatar, name, sub, className, children, ...props }:
|
|
|
865
816
|
interface CommentsProps extends HTMLAttributes<HTMLDivElement> {
|
|
866
817
|
children?: ReactNode;
|
|
867
818
|
}
|
|
868
|
-
/**
|
|
869
|
-
* Comment thread container over `.uix-comments`. role="log" is an implicit polite
|
|
870
|
-
* live region: comments appended after initial render are announced, the initial
|
|
871
|
-
* list is not (UIX-A11Y-3). Pass `role` to override.
|
|
872
|
-
*/
|
|
819
|
+
/** Comment thread container over `.uix-comments`. */
|
|
873
820
|
declare function Comments({ children, className, ...props }: CommentsProps): react.JSX.Element;
|
|
874
821
|
interface CommentProps extends HTMLAttributes<HTMLDivElement> {
|
|
875
822
|
/** Usually an `<Avatar />` (the grid reserves the leading column). */
|
|
@@ -883,8 +830,6 @@ declare function Comment({ avatar, author, meta, children, className, ...props }
|
|
|
883
830
|
|
|
884
831
|
interface ComposerProps extends HTMLAttributes<HTMLDivElement> {
|
|
885
832
|
children?: ReactNode;
|
|
886
|
-
/** Accessible name for the child `<textarea>`; applied as its `aria-label`. */
|
|
887
|
-
label?: string;
|
|
888
833
|
}
|
|
889
834
|
/**
|
|
890
835
|
* Composer surface over `.uix-composer` — a single box that owns the
|
|
@@ -892,13 +837,8 @@ interface ComposerProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
892
837
|
* `<ComposerBar>` inside; the descendant `textarea` picks up the composer's
|
|
893
838
|
* padding/typography automatically, so the input never reads as a second
|
|
894
839
|
* nested box.
|
|
895
|
-
*
|
|
896
|
-
* A placeholder is not an accessible name, so the composer labels a bare child
|
|
897
|
-
* `<textarea>` with `label` (default "Add a comment"); a textarea that brings its
|
|
898
|
-
* own `aria-label`/`aria-labelledby` — or an `id` (likely tied to an external
|
|
899
|
-
* `<label htmlFor>`) — is left untouched (UIX-A11Y-3).
|
|
900
840
|
*/
|
|
901
|
-
declare function Composer({ children, className,
|
|
841
|
+
declare function Composer({ children, className, ...props }: ComposerProps): react.JSX.Element;
|
|
902
842
|
interface ComposerBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
903
843
|
children?: ReactNode;
|
|
904
844
|
}
|
|
@@ -930,12 +870,12 @@ interface SegmentedOptionProps extends Omit<ButtonHTMLAttributes<HTMLButtonEleme
|
|
|
930
870
|
*/
|
|
931
871
|
declare function SegmentedOption({ value, children, className, onClick, ...props }: SegmentedOptionProps): react.JSX.Element;
|
|
932
872
|
|
|
933
|
-
interface TimelineProps extends HTMLAttributes<
|
|
873
|
+
interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
|
|
934
874
|
children?: ReactNode;
|
|
935
875
|
}
|
|
936
|
-
/** Activity timeline container over `.uix-timeline`.
|
|
876
|
+
/** Activity timeline container over `.uix-timeline`. */
|
|
937
877
|
declare function Timeline({ children, className, ...props }: TimelineProps): react.JSX.Element;
|
|
938
|
-
interface TimelineItemProps extends HTMLAttributes<
|
|
878
|
+
interface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
939
879
|
/**
|
|
940
880
|
* Custom rail node — an icon puck, an avatar, a tinted dot. Defaults to the
|
|
941
881
|
* accent `.uix-timeline__node` dot. Supply this to make a heterogeneous feed
|
|
@@ -999,9 +939,7 @@ interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
999
939
|
}
|
|
1000
940
|
/**
|
|
1001
941
|
* ⌘K command palette surface over `.uix-cmdk`. Presentational: mount it inside a
|
|
1002
|
-
* Modal/Popover and wire search + keyboard selection in the consumer.
|
|
1003
|
-
* a combobox over the listbox of `CommandItem`s; spreads override every default, so
|
|
1004
|
-
* consumers already passing their own roles/labels keep working.
|
|
942
|
+
* Modal/Popover and wire search + keyboard selection in the consumer.
|
|
1005
943
|
*/
|
|
1006
944
|
declare function CommandPalette({ inputProps, children, className, ...props }: CommandPaletteProps): react.JSX.Element;
|
|
1007
945
|
interface CommandGroupProps {
|
|
@@ -1018,27 +956,17 @@ interface CommandItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1018
956
|
children?: ReactNode;
|
|
1019
957
|
}
|
|
1020
958
|
/** A single command row over `.uix-cmdk__item`. */
|
|
1021
|
-
declare function CommandItem({ icon, shortcut, active, children, className,
|
|
959
|
+
declare function CommandItem({ icon, shortcut, active, children, className, ...props }: CommandItemProps): react.JSX.Element;
|
|
1022
960
|
|
|
1023
961
|
interface InboxProps extends HTMLAttributes<HTMLDivElement> {
|
|
1024
|
-
/**
|
|
1025
|
-
* Which pane a narrow viewport (<700px) shows: 'list' (default, matches the old
|
|
1026
|
-
* behaviour) or 'detail'. Consumers should render a Back control in the detail pane
|
|
1027
|
-
* on narrow viewports to return to the list (UIX-A11Y-2).
|
|
1028
|
-
*/
|
|
1029
|
-
view?: 'list' | 'detail';
|
|
1030
962
|
children?: ReactNode;
|
|
1031
963
|
}
|
|
1032
964
|
/** Two-pane inbox master-detail container backed by `.uix-inbox`. Place `<InboxList>` and `<InboxDetail>` as children. */
|
|
1033
|
-
declare function Inbox({
|
|
965
|
+
declare function Inbox({ children, className, ...props }: InboxProps): react.JSX.Element;
|
|
1034
966
|
interface InboxListProps extends HTMLAttributes<HTMLDivElement> {
|
|
1035
967
|
children?: ReactNode;
|
|
1036
968
|
}
|
|
1037
|
-
/**
|
|
1038
|
-
* Left-pane item list. Place `<InboxItem>` children here. A keyboard listbox
|
|
1039
|
-
* (UIX-A11Y-2): the list is the single tab stop; ArrowUp/ArrowDown/Home/End move the
|
|
1040
|
-
* active option via `aria-activedescendant`, Enter/Space click it.
|
|
1041
|
-
*/
|
|
969
|
+
/** Left-pane item list. Place `<InboxItem>` children here. */
|
|
1042
970
|
declare function InboxList({ children, className, ...props }: InboxListProps): react.JSX.Element;
|
|
1043
971
|
interface InboxItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
1044
972
|
/** Primary subject / title line. */
|
|
@@ -1054,7 +982,7 @@ interface InboxItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1054
982
|
children?: ReactNode;
|
|
1055
983
|
}
|
|
1056
984
|
/** A single inbox row with subject, preview excerpt, optional leading slot, and unread/selected states. */
|
|
1057
|
-
declare function InboxItem({ subject, preview, leading, unread, selected, children, className,
|
|
985
|
+
declare function InboxItem({ subject, preview, leading, unread, selected, children, className, ...props }: InboxItemProps): react.JSX.Element;
|
|
1058
986
|
interface InboxDetailProps extends HTMLAttributes<HTMLDivElement> {
|
|
1059
987
|
children?: ReactNode;
|
|
1060
988
|
}
|
|
@@ -1062,39 +990,25 @@ interface InboxDetailProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1062
990
|
declare function InboxDetail({ children, className, ...props }: InboxDetailProps): react.JSX.Element;
|
|
1063
991
|
|
|
1064
992
|
interface KanbanProps extends HTMLAttributes<HTMLDivElement> {
|
|
1065
|
-
/**
|
|
1066
|
-
* Polite live-region text for keyboard moves (UIX-A11Y-2). `onMove` implementations
|
|
1067
|
-
* should set it, e.g. "Card X moved to Doing, position 2 of 4".
|
|
1068
|
-
*/
|
|
1069
|
-
announcement?: string;
|
|
1070
993
|
children?: ReactNode;
|
|
1071
994
|
}
|
|
1072
|
-
declare function Kanban({
|
|
995
|
+
declare function Kanban({ children, className, ...props }: KanbanProps): react.JSX.Element;
|
|
1073
996
|
interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
1074
997
|
title?: ReactNode;
|
|
1075
998
|
count?: number;
|
|
1076
999
|
children?: ReactNode;
|
|
1077
1000
|
}
|
|
1078
1001
|
declare function KanbanColumn({ title, count, children, className, ...props }: KanbanColumnProps): react.JSX.Element;
|
|
1079
|
-
type KanbanMoveDirection = 'up' | 'down' | 'left' | 'right';
|
|
1080
1002
|
interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
1081
1003
|
title?: ReactNode;
|
|
1082
1004
|
meta?: ReactNode;
|
|
1083
|
-
/**
|
|
1084
|
-
* Keyboard move contract (UIX-A11Y-2): when provided, Alt+Arrow on the focused card
|
|
1085
|
-
* calls it — the same accelerator convention as NavFavourites row moves. Pair with
|
|
1086
|
-
* the board-level `announcement` so SR users hear the result.
|
|
1087
|
-
*/
|
|
1088
|
-
onMove?: (dir: KanbanMoveDirection) => void;
|
|
1089
1005
|
children?: ReactNode;
|
|
1090
1006
|
}
|
|
1091
|
-
declare function KanbanCard({ title, meta, children, className,
|
|
1007
|
+
declare function KanbanCard({ title, meta, children, className, ...props }: KanbanCardProps): react.JSX.Element;
|
|
1092
1008
|
|
|
1093
1009
|
interface TreeNodeData {
|
|
1094
1010
|
id: string;
|
|
1095
1011
|
label: ReactNode;
|
|
1096
|
-
/** Plain-text label for keyboard typeahead when `label` is not a string (UIX-A11Y-2). */
|
|
1097
|
-
typeaheadLabel?: string;
|
|
1098
1012
|
icon?: ReactNode;
|
|
1099
1013
|
children?: TreeNodeData[];
|
|
1100
1014
|
}
|
|
@@ -1143,10 +1057,6 @@ declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, se
|
|
|
1143
1057
|
interface TreeLike<T> {
|
|
1144
1058
|
id: string;
|
|
1145
1059
|
children?: T[];
|
|
1146
|
-
/** The display label — typeahead matches it only when it is a plain string (UIX-A11Y-2). */
|
|
1147
|
-
label?: unknown;
|
|
1148
|
-
/** Explicit typeahead text for nodes whose `label` is not a string (rich ReactNode labels). */
|
|
1149
|
-
typeaheadLabel?: string;
|
|
1150
1060
|
}
|
|
1151
1061
|
interface FlatNode<T> {
|
|
1152
1062
|
node: T;
|
|
@@ -1360,4 +1270,4 @@ interface StatusRowProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1360
1270
|
/** Status row — indicator + name + trailing meta (`.uix-status-row`). */
|
|
1361
1271
|
declare function StatusRow({ indicator, name, meta, className, ...props }: StatusRowProps): react.JSX.Element;
|
|
1362
1272
|
|
|
1363
|
-
export { Alert, type AlertProps, type AlertTone, type Align, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BulkBar, type BulkBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, CellStrong, CellSub, Checkbox, type CheckboxProps, type ColumnFilter, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, Composer, ComposerBar, type ComposerBarProps, type ComposerProps, ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, EventRow, type EventRowProps, ExpandToggle, type ExpandToggleProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, Field, type FieldProps, type FilterKind, type FilterOp, type FlatNode, Highlighted, type HighlightedProps, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type
|
|
1273
|
+
export { Alert, type AlertProps, type AlertTone, type Align, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BulkBar, type BulkBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, CellStrong, CellSub, Checkbox, type CheckboxProps, type ColumnFilter, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, Composer, ComposerBar, type ComposerBarProps, type ComposerProps, ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, EventRow, type EventRowProps, ExpandToggle, type ExpandToggleProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, Field, type FieldProps, type FilterKind, type FilterOp, type FlatNode, Highlighted, type HighlightedProps, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Mark, type MarkProps, Meter, type MeterProps, type MeterTone, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NewsLead, type NewsLeadProps, Note, type NoteProps, type NoteTone, NoticeQueue, type NoticeQueueProps, PageHeader, type PageHeaderProps, PageIntro, type PageIntroProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, type Placement, Popover, type PopoverProps, type PositionOptions, type PositionResult, type Primitive, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Rect, ResourceGrid, type ResourceGridProps, type Row, RowAction, type RowActionProps, RowActions, type RowActionsProps, SectionHead, type SectionHeadProps, type Segment, Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps, Select, type SelectAllState, type SelectProps, type ShellNav, type Side, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, type Size, Skeleton, type SkeletonProps, type SortDir, type SortDirection, type SortKey, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, StatLine, type StatLineItem, type StatLineProps, type StatProps, type StatTrend, StatusPill, type StatusPillProps, StatusRow, type StatusRowProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeLike, type TreeNavAction, type TreeNodeData, type TreeNodeProps, type TreeProps, type UseAnchoredPositionOptions, type UseTableOptions, type UseTableResult, UserChip, type UserChipProps, type ViewState, type VirtualWindow, applyFilters, clampWidth, computePosition, cx, flattenTree, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, treeNav, useAnchoredPosition, useDialog, useTable, virtualWindow };
|
package/dist/index.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export { PageHeader, PageHeaderProps } from './components/PageHeader.js';
|
|
|
19
19
|
export { DetailLayout, DetailLayoutProps } from './components/DetailLayout.js';
|
|
20
20
|
export { List, ListItem, ListItemProps, ListProps } from './components/List.js';
|
|
21
21
|
export { DescriptionItem, DescriptionItemProps, DescriptionList, DescriptionListItem, DescriptionListProps } from './components/DescriptionList.js';
|
|
22
|
-
export { Tab,
|
|
22
|
+
export { Tab, TabProps, Tabs, TabsProps } from './components/Tabs.js';
|
|
23
23
|
export { AppShell, AppShellProps, ShellNav } from './components/AppShell.js';
|
|
24
24
|
export { NavGroup, NavGroupProps, NavItem, NavItemProps, Sidebar, SidebarProps, SidebarSection, SidebarSectionProps, SubNavItem, SubNavItemProps } from './components/Sidebar.js';
|
|
25
25
|
export { StarButton, StarButtonProps } from './components/StarButton.js';
|
|
@@ -46,7 +46,7 @@ export { Note, NoteProps, NoteTone, Prose, ProseProps } from './components/Prose
|
|
|
46
46
|
export { Popover, PopoverProps } from './components/Popover.js';
|
|
47
47
|
export { CommandGroup, CommandGroupProps, CommandItem, CommandItemProps, CommandPalette, CommandPaletteProps } from './components/CommandPalette.js';
|
|
48
48
|
export { Inbox, InboxDetail, InboxDetailProps, InboxItem, InboxItemProps, InboxList, InboxListProps, InboxProps } from './components/Inbox.js';
|
|
49
|
-
export { Kanban, KanbanCard, KanbanCardProps, KanbanColumn, KanbanColumnProps,
|
|
49
|
+
export { Kanban, KanbanCard, KanbanCardProps, KanbanColumn, KanbanColumnProps, KanbanProps } from './components/Kanban.js';
|
|
50
50
|
export { Tree, TreeNodeData, TreeNodeProps, TreeProps } from './components/Tree.js';
|
|
51
51
|
export { FlatNode, TreeLike, TreeNavAction, flattenTree, treeNav } from './tree-model.js';
|
|
52
52
|
export { ContentList, ContentListItem, ContentListItemProps, ContentListProps, EventRow, EventRowProps, FeaturedRundown, FeaturedRundownItem, FeaturedRundownItemProps, FeaturedRundownProps, FeaturedStage, FeaturedStageProps, NewsLead, NewsLeadProps, NoticeQueue, NoticeQueueProps, PageIntro, PageIntroProps, ResourceGrid, ResourceGridProps, SectionHead, SectionHeadProps, StatLine, StatLineItem, StatLineProps, StatusRow, StatusRowProps } from './components/EditorialHome.js';
|
package/dist/index.js
CHANGED
|
@@ -19,7 +19,7 @@ import { PageHeader } from "./components/PageHeader.js";
|
|
|
19
19
|
import { DetailLayout } from "./components/DetailLayout.js";
|
|
20
20
|
import { List, ListItem } from "./components/List.js";
|
|
21
21
|
import { DescriptionList, DescriptionItem } from "./components/DescriptionList.js";
|
|
22
|
-
import { Tabs, Tab
|
|
22
|
+
import { Tabs, Tab } from "./components/Tabs.js";
|
|
23
23
|
import { AppShell } from "./components/AppShell.js";
|
|
24
24
|
import { Sidebar, SidebarSection, NavItem, NavGroup, SubNavItem } from "./components/Sidebar.js";
|
|
25
25
|
import { StarButton } from "./components/StarButton.js";
|
|
@@ -162,7 +162,6 @@ export {
|
|
|
162
162
|
SubNavItem,
|
|
163
163
|
Switch,
|
|
164
164
|
Tab,
|
|
165
|
-
TabPanel,
|
|
166
165
|
Table,
|
|
167
166
|
TableWrap,
|
|
168
167
|
Tabs,
|
package/dist/tree-model.d.ts
CHANGED
|
@@ -11,10 +11,6 @@
|
|
|
11
11
|
interface TreeLike<T> {
|
|
12
12
|
id: string;
|
|
13
13
|
children?: T[];
|
|
14
|
-
/** The display label — typeahead matches it only when it is a plain string (UIX-A11Y-2). */
|
|
15
|
-
label?: unknown;
|
|
16
|
-
/** Explicit typeahead text for nodes whose `label` is not a string (rich ReactNode labels). */
|
|
17
|
-
typeaheadLabel?: string;
|
|
18
14
|
}
|
|
19
15
|
interface FlatNode<T> {
|
|
20
16
|
node: T;
|
package/dist/tree-model.js
CHANGED
|
@@ -40,14 +40,6 @@ function treeNav(flat, currentId, key) {
|
|
|
40
40
|
case " ":
|
|
41
41
|
return cur.hasChildren ? { toggleId: cur.node.id, selectId: cur.node.id } : { selectId: cur.node.id };
|
|
42
42
|
default:
|
|
43
|
-
if (key.length === 1) {
|
|
44
|
-
const q = key.toLowerCase();
|
|
45
|
-
for (let step = 1; step <= flat.length; step++) {
|
|
46
|
-
const f = flat[(idx + step) % flat.length];
|
|
47
|
-
const label = f.node.typeaheadLabel ?? (typeof f.node.label === "string" ? f.node.label : void 0);
|
|
48
|
-
if (label != null && label.toLowerCase().startsWith(q)) return { focusId: f.node.id };
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
43
|
return {};
|
|
52
44
|
}
|
|
53
45
|
}
|