@dinofront/design_system 1.2.1 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordion/Accordion.types.d.ts +7 -7
- package/dist/components/Avatar/Avatar.types.d.ts +26 -1
- package/dist/components/Checkbox/Checkbox.types.d.ts +4 -0
- package/dist/components/DatePicker/DatePicker.types.d.ts +15 -1
- package/dist/components/Divider/index.d.ts +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +7 -2
- package/dist/components/FormContainer/FormContainer.types.d.ts +3 -1
- package/dist/components/MultiSelect/MultiSelect.types.d.ts +17 -7
- package/dist/components/Radio/Radio.types.d.ts +23 -6
- package/dist/components/Radio/index.d.ts +1 -1
- package/dist/components/Select/Select.types.d.ts +16 -5
- package/dist/components/StepIndicator/StepIndicator.types.d.ts +4 -4
- package/dist/components/TableV2/TableV2.d.ts +9 -0
- package/dist/components/TableV2/TableV2.types.d.ts +99 -0
- package/dist/components/TableV2/TableV2.utils.d.ts +14 -0
- package/dist/components/TableV2/TableV2ColumnVisibility.d.ts +6 -0
- package/dist/components/TableV2/TableV2Filter.d.ts +10 -0
- package/dist/components/TableV2/TableV2Pagination.d.ts +7 -0
- package/dist/components/TableV2/TableV2RowActions.d.ts +7 -0
- package/dist/components/TableV2/TableV2Skeleton.d.ts +6 -0
- package/dist/components/TableV2/TableV2Toolbar.d.ts +13 -0
- package/dist/components/TableV2/index.d.ts +9 -0
- package/dist/components/TableV2/useTableV2ColumnDnd.d.ts +24 -0
- package/dist/components/Tabs/Tabs.types.d.ts +7 -7
- package/dist/components/Upload/Upload.d.ts +6 -1
- package/dist/components/Upload/Upload.types.d.ts +14 -2
- package/dist/components/Upload/index.d.ts +2 -2
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/useOnOutsideClick.d.ts +1 -6
- package/dist/icons.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2023 -1220
- package/dist/index.js.map +1 -1
- package/dist/lib/FormContext.d.ts +6 -6
- package/dist/lib/optionValue.d.ts +10 -0
- package/dist/styles.css +59 -1
- package/dist/tailwind/preset.js.map +1 -1
- package/dist/types/base.d.ts +8 -0
- package/package.json +6 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
import { BaseProps } from '../../types';
|
|
2
|
+
import { BaseProps, OptionValue } from '../../types';
|
|
3
3
|
export type AccordionType = 'single' | 'multiple';
|
|
4
|
-
export interface AccordionProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
|
|
4
|
+
export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'>, BaseProps {
|
|
5
5
|
/** `'single'` keeps at most one item open at a time; `'multiple'` allows any number. */
|
|
6
6
|
type?: AccordionType;
|
|
7
|
-
/** Uncontrolled initial open value(s) — a single
|
|
8
|
-
defaultValue?:
|
|
7
|
+
/** Uncontrolled initial open value(s) — a single value for `'single'`, an array for `'multiple'`. */
|
|
8
|
+
defaultValue?: OptionValue | OptionValue[];
|
|
9
9
|
/** Controlled open value(s). Pass alongside `onValueChange` to fully control which item(s) are open. */
|
|
10
|
-
value?:
|
|
11
|
-
onValueChange?: (value:
|
|
10
|
+
value?: OptionValue | OptionValue[];
|
|
11
|
+
onValueChange?: (value: OptionValue | OptionValue[] | undefined) => void;
|
|
12
12
|
/** Animates each panel open/closed. Set `false` for the pre-1.x instant toggle (also restores the plain `hidden` attribute instead of the animated grid wrapper). */
|
|
13
13
|
animated?: boolean;
|
|
14
14
|
/** Renders a Divider between each item's header and its panel content. */
|
|
@@ -17,7 +17,7 @@ export interface AccordionProps extends HTMLAttributes<HTMLDivElement>, BaseProp
|
|
|
17
17
|
}
|
|
18
18
|
export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, BaseProps {
|
|
19
19
|
/** Unique identifier used to track open/closed state within the parent `Accordion`. */
|
|
20
|
-
value:
|
|
20
|
+
value: OptionValue;
|
|
21
21
|
title: ReactNode;
|
|
22
22
|
icon?: ReactNode;
|
|
23
23
|
disabled?: boolean;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { BaseProps } from '../../types';
|
|
3
|
-
|
|
3
|
+
import { UploadRejection } from '../Upload';
|
|
4
|
+
export type AvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
4
5
|
export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
|
|
5
6
|
export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, BaseProps {
|
|
6
7
|
src?: string;
|
|
@@ -10,6 +11,30 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, BaseProps
|
|
|
10
11
|
status?: AvatarStatus;
|
|
11
12
|
shape?: 'circle' | 'square';
|
|
12
13
|
fallback?: ReactNode;
|
|
14
|
+
/** Renders an edit affordance in the bottom-right corner, scaled to `size`, that opens a file picker. */
|
|
15
|
+
editable?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Called with the picked file. `Avatar` shows an immediate local preview
|
|
18
|
+
* (an object URL it creates and revokes itself on replacement/unmount)
|
|
19
|
+
* that takes precedence over `src` until `src` itself changes to a new
|
|
20
|
+
* value, at which point the new `src` wins and the local preview is
|
|
21
|
+
* dropped.
|
|
22
|
+
*/
|
|
23
|
+
onImageChange?: (file: File) => void;
|
|
24
|
+
/**
|
|
25
|
+
* Forwarded to the internal picker. Same matching rules as
|
|
26
|
+
* `UploadProps.accept`, but always enforced here (unlike `Upload`, where
|
|
27
|
+
* enforcement is gated behind `validateFiles`).
|
|
28
|
+
*/
|
|
29
|
+
accept?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Forwarded to the internal picker. Same matching rules as
|
|
32
|
+
* `UploadProps.maxSizeMB`, but always enforced here (unlike `Upload`,
|
|
33
|
+
* where enforcement is gated behind `validateFiles`).
|
|
34
|
+
*/
|
|
35
|
+
maxSizeMB?: number;
|
|
36
|
+
/** Called when the picked file fails `accept`/`maxSizeMB` validation. */
|
|
37
|
+
onReject?: (rejection: UploadRejection) => void;
|
|
13
38
|
}
|
|
14
39
|
export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
|
|
15
40
|
size?: AvatarSize;
|
|
@@ -8,4 +8,8 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
|
|
|
8
8
|
/** Renders the mixed/"some selected" visual state (`aria-checked="mixed"`). */
|
|
9
9
|
indeterminate?: boolean;
|
|
10
10
|
error?: boolean;
|
|
11
|
+
/** Message rendered below the control in the danger style; also implies `error`. Replaces `description` when set. */
|
|
12
|
+
errorText?: ReactNode;
|
|
13
|
+
/** Renders a red asterisk next to `label` and sets `aria-required` on the input, in addition to the native `required` attribute. */
|
|
14
|
+
required?: boolean;
|
|
11
15
|
}
|
|
@@ -7,13 +7,25 @@ export interface DateRange {
|
|
|
7
7
|
}
|
|
8
8
|
export interface DatePickerProps extends BaseProps {
|
|
9
9
|
value?: Date | null;
|
|
10
|
-
onChange?: (date: Date) => void;
|
|
10
|
+
onChange?: (date: Date | null) => void;
|
|
11
|
+
/** Renders a clear affordance in the trigger (in place of the calendar icon) when a value is selected. Fires `onChange(null)` (or `onChangeRange({ start: null, end: null })` in range mode). */
|
|
12
|
+
clearable?: boolean;
|
|
11
13
|
/** Enable range-selection mode. */
|
|
12
14
|
range?: boolean;
|
|
13
15
|
rangeValue?: DateRange;
|
|
14
16
|
onChangeRange?: (range: DateRange) => void;
|
|
15
17
|
size?: DatePickerSize;
|
|
18
|
+
/** BCP-47 locale tag. Derives month names, weekday abbreviations, and the first day of the week. */
|
|
19
|
+
locale?: string;
|
|
20
|
+
/** Trigger display format. Supports `dd`/`MM`/`yyyy` tokens plus a literal
|
|
21
|
+
* separator. Defaults to the pre-existing `'dd.MM.yyyy'`. Applied to both
|
|
22
|
+
* endpoints in range mode. */
|
|
23
|
+
format?: string;
|
|
16
24
|
label?: ReactNode;
|
|
25
|
+
/** Renders a red asterisk next to the label and sets `aria-required` on the trigger. */
|
|
26
|
+
required?: boolean;
|
|
27
|
+
/** Neutral message rendered below the control, replaced by `errorText` when present. */
|
|
28
|
+
helperText?: ReactNode;
|
|
17
29
|
placeholder?: string;
|
|
18
30
|
/** Fill the parent's width (like Input/Select) instead of the intrinsic
|
|
19
31
|
* min-width. Use inside form grids so dates line up with other fields. */
|
|
@@ -26,6 +38,8 @@ export interface DatePickerProps extends BaseProps {
|
|
|
26
38
|
maxDate?: Date;
|
|
27
39
|
/** Individual days that can't be picked. Matched by calendar day; time-of-day is ignored. */
|
|
28
40
|
excludeDates?: Date[];
|
|
41
|
+
/** Arbitrary per-day predicate, evaluated alongside `minDate`/`maxDate`/`excludeDates`. Days it rejects render disabled. */
|
|
42
|
+
filterDate?: (date: Date) => boolean;
|
|
29
43
|
/** Switch the trigger to the danger border/ring styles. */
|
|
30
44
|
error?: boolean;
|
|
31
45
|
/** Message rendered below the control; also switches the trigger to the danger styles. */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Divider } from './Divider';
|
|
2
|
-
export type { DividerColor, DividerOrientation, DividerProps, DividerVariant } from './Divider.types';
|
|
2
|
+
export type { DividerColor, DividerOrientation, DividerProps, DividerVariant, } from './Divider.types';
|
|
@@ -11,8 +11,13 @@ export interface DropdownMenuProps extends HTMLAttributes<HTMLDivElement>, BaseP
|
|
|
11
11
|
/** Controlled open state. Pass alongside `onOpenChange` to fully control the menu. */
|
|
12
12
|
open?: boolean;
|
|
13
13
|
onOpenChange?: (open: boolean) => void;
|
|
14
|
-
/** Anchor the panel to an element the consumer owns instead of `<DropdownTrigger>`'s child.
|
|
15
|
-
|
|
14
|
+
/** Anchor the panel to an element the consumer owns instead of `<DropdownTrigger>`'s child.
|
|
15
|
+
* Accepts either a ref object or the element itself, so consumers holding the anchor as
|
|
16
|
+
* plain `useState<HTMLElement | null>` state don't have to fabricate a `{ current: el }`
|
|
17
|
+
* wrapper every render. If the resolved anchor element is `null` (e.g. it hasn't mounted
|
|
18
|
+
* yet, or was unmounted while the menu is open), the panel positions against the trigger
|
|
19
|
+
* instead of staying un-positioned. */
|
|
20
|
+
anchorRef?: RefObject<HTMLElement | null> | HTMLElement | null;
|
|
16
21
|
}
|
|
17
22
|
export interface DropdownTriggerProps {
|
|
18
23
|
/** A single element cloned with the click handler and `aria-haspopup`/`aria-expanded` that open the menu. */
|
|
@@ -14,5 +14,7 @@ export interface FormContainerProps extends Omit<FormHTMLAttributes<HTMLFormElem
|
|
|
14
14
|
shouldUnregister?: boolean;
|
|
15
15
|
shouldFocusError?: boolean;
|
|
16
16
|
formId?: string;
|
|
17
|
-
onSubmit?: (data: FieldValues, formState: FormState<FieldValues>) => void;
|
|
17
|
+
onSubmit?: (data: FieldValues, formState: FormState<FieldValues>, dirtyFields: FormState<FieldValues>['dirtyFields']) => void;
|
|
18
|
+
/** When this changes, re-validates every field currently holding an error — use to refresh translated validation messages after rebuilding `validationSchema` for a new locale. */
|
|
19
|
+
revalidateKey?: string | number;
|
|
18
20
|
}
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { BaseProps } from '../../types';
|
|
2
|
+
import { BaseProps, OptionValue } from '../../types';
|
|
3
3
|
export type MultiSelectSize = 'sm' | 'md' | 'lg';
|
|
4
4
|
export interface MultiSelectOption {
|
|
5
|
-
value:
|
|
6
|
-
label:
|
|
5
|
+
value: OptionValue;
|
|
6
|
+
label: ReactNode;
|
|
7
|
+
/** Text used for search matching when `label` isn't a plain string. Options where neither this nor a string `label` is available are excluded from `searchable` matching. */
|
|
8
|
+
searchText?: string;
|
|
7
9
|
/** Optional second line under the label in the dropdown. */
|
|
8
10
|
description?: string;
|
|
11
|
+
/** Group heading this option belongs under. Options sharing a group MUST be
|
|
12
|
+
* contiguous in the (filtered) list — the heading is emitted whenever this
|
|
13
|
+
* value changes between consecutive visible options, so a non-contiguous
|
|
14
|
+
* group renders its heading more than once. */
|
|
15
|
+
group?: string;
|
|
9
16
|
/** Optional avatar image — shown on the chip and the dropdown row. */
|
|
10
17
|
avatarSrc?: string;
|
|
11
18
|
/** Non-selectable option (shown dimmed in the list). */
|
|
@@ -16,12 +23,12 @@ export interface MultiSelectOption {
|
|
|
16
23
|
export interface MultiSelectProps extends BaseProps {
|
|
17
24
|
options: MultiSelectOption[];
|
|
18
25
|
/** Selected option values (controlled). */
|
|
19
|
-
value:
|
|
20
|
-
onChange: (values:
|
|
26
|
+
value: OptionValue[];
|
|
27
|
+
onChange: (values: OptionValue[]) => void;
|
|
21
28
|
/** Called with the option that was just added, alongside `onChange` (never instead of it). */
|
|
22
29
|
onAdd?: (option: MultiSelectOption) => void;
|
|
23
30
|
/** Called with the value that was just removed, alongside `onChange` (never instead of it). */
|
|
24
|
-
onRemove?: (value:
|
|
31
|
+
onRemove?: (value: OptionValue) => void;
|
|
25
32
|
size?: MultiSelectSize;
|
|
26
33
|
placeholder?: string;
|
|
27
34
|
/** Placeholder once at least one chip exists. Defaults to "Add another…". */
|
|
@@ -35,7 +42,7 @@ export interface MultiSelectProps extends BaseProps {
|
|
|
35
42
|
errorText?: ReactNode;
|
|
36
43
|
required?: boolean;
|
|
37
44
|
/** Values whose chips can't be removed. */
|
|
38
|
-
lockedValues?:
|
|
45
|
+
lockedValues?: OptionValue[];
|
|
39
46
|
/** Cap on how many can be selected (default: unlimited). */
|
|
40
47
|
max?: number;
|
|
41
48
|
/** Renders an Avatar on every chip and dropdown row, falling back to initials derived from the option's `label` when it has no `avatarSrc`. Default `false` — avatars still render for options that already set `avatarSrc` regardless. */
|
|
@@ -49,4 +56,7 @@ export interface MultiSelectProps extends BaseProps {
|
|
|
49
56
|
id?: string;
|
|
50
57
|
className?: string;
|
|
51
58
|
wrapperClassName?: string;
|
|
59
|
+
/** Shows a spinner in the trailing edge of the chip row and blocks opening the dropdown. Does not set the native `disabled` attribute. */
|
|
60
|
+
loading?: boolean;
|
|
61
|
+
language?: string;
|
|
52
62
|
}
|
|
@@ -1,20 +1,37 @@
|
|
|
1
1
|
import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
import { BaseProps } from '../../types';
|
|
2
|
+
import { BaseProps, OptionValue } from '../../types';
|
|
3
3
|
export type RadioSize = 'md' | 'sm';
|
|
4
|
+
/**
|
|
5
|
+
* A Radio's identity — commonly a string, but numbers and booleans (for
|
|
6
|
+
* yes/no groups) are supported too. Note: like `OptionValue`, values are
|
|
7
|
+
* compared via `String(...)`, so `true` and `'true'` (or `1` and `'1'`) are
|
|
8
|
+
* treated as the same option — don't mix representations within one group.
|
|
9
|
+
*/
|
|
10
|
+
export type RadioValue = OptionValue | boolean;
|
|
4
11
|
export interface RadioGroupProps extends BaseProps {
|
|
5
12
|
name?: string;
|
|
6
13
|
label?: ReactNode;
|
|
7
|
-
value?:
|
|
8
|
-
defaultValue?:
|
|
9
|
-
onChange?: (value:
|
|
14
|
+
value?: RadioValue;
|
|
15
|
+
defaultValue?: RadioValue;
|
|
16
|
+
onChange?: (value: RadioValue) => void;
|
|
10
17
|
disabled?: boolean;
|
|
11
18
|
size?: RadioSize;
|
|
12
19
|
orientation?: 'horizontal' | 'vertical';
|
|
20
|
+
/** Renders a red asterisk next to `label` and sets `aria-required` on the group. */
|
|
21
|
+
required?: boolean;
|
|
22
|
+
/** Cascades to every child `Radio`, OR'd with each `Radio`'s own `error` — unlike `disabled`/`size`, a child cannot opt out with `error={false}`. Implied by `errorText`. */
|
|
23
|
+
error?: boolean;
|
|
24
|
+
/** Message rendered below the group in the danger style; implies `error`. Replaces `helperText` when set. */
|
|
25
|
+
errorText?: ReactNode;
|
|
26
|
+
/** Neutral message rendered below the group, replaced by `errorText` when present. */
|
|
27
|
+
helperText?: ReactNode;
|
|
13
28
|
children: ReactNode;
|
|
14
29
|
className?: string;
|
|
30
|
+
/** Applied to the outermost wrapper, for layout purposes (e.g. grid positioning) — use `className` to target the radiogroup container itself. */
|
|
31
|
+
wrapperClassName?: string;
|
|
15
32
|
}
|
|
16
|
-
export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'name' | 'onChange'>, BaseProps {
|
|
17
|
-
value:
|
|
33
|
+
export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'name' | 'onChange' | 'value'>, BaseProps {
|
|
34
|
+
value: RadioValue;
|
|
18
35
|
size?: RadioSize;
|
|
19
36
|
label?: ReactNode;
|
|
20
37
|
description?: ReactNode;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Radio, RadioGroup } from './Radio';
|
|
2
|
-
export type {
|
|
2
|
+
export type { RadioGroupProps, RadioProps, RadioSize, RadioValue } from './Radio.types';
|
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { BaseProps } from '../../types';
|
|
2
|
+
import { BaseProps, OptionValue } from '../../types';
|
|
3
3
|
export type SelectSize = 'lg' | 'md' | 'sm';
|
|
4
4
|
export interface SelectOption {
|
|
5
|
-
value:
|
|
5
|
+
value: OptionValue;
|
|
6
6
|
label: ReactNode;
|
|
7
|
+
/** Leading icon. When at least one option in the array has one, rendered in
|
|
8
|
+
* a fixed-width column so labels align across all options in that array
|
|
9
|
+
* regardless of which ones have one; icon-less arrays reserve no extra
|
|
10
|
+
* space. Also shown on the closed trigger for the selected option. Sized
|
|
11
|
+
* to 16px automatically. Does not participate in `searchable` text
|
|
12
|
+
* matching. */
|
|
13
|
+
icon?: ReactNode;
|
|
14
|
+
/** Trailing icon, right-aligned in the row. List-only — not mirrored on the
|
|
15
|
+
* trigger. Sized to 16px automatically. Does not participate in
|
|
16
|
+
* `searchable` text matching. */
|
|
17
|
+
rightIcon?: ReactNode;
|
|
7
18
|
disabled?: boolean;
|
|
8
19
|
/** Group heading this option belongs under. Options sharing a group MUST be
|
|
9
20
|
* contiguous in the `options` array — the heading is emitted whenever this
|
|
@@ -15,9 +26,9 @@ export interface SelectOption {
|
|
|
15
26
|
}
|
|
16
27
|
export interface SelectProps extends BaseProps {
|
|
17
28
|
options: SelectOption[];
|
|
18
|
-
value?:
|
|
19
|
-
defaultValue?:
|
|
20
|
-
onChange?: (value:
|
|
29
|
+
value?: OptionValue;
|
|
30
|
+
defaultValue?: OptionValue;
|
|
31
|
+
onChange?: (value: OptionValue) => void;
|
|
21
32
|
placeholder?: string;
|
|
22
33
|
label?: ReactNode;
|
|
23
34
|
/** Content rendered on the label row, right of the label text — e.g. an info tooltip trigger. Rendered as a sibling of the `<label>`, not a child, so an interactive addon never steals focus into the trigger. */
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
import { BaseProps } from '../../types';
|
|
2
|
+
import { BaseProps, OptionValue } from '../../types';
|
|
3
3
|
export type StepIndicatorStatus = 'upcoming' | 'active' | 'completed' | 'rejected';
|
|
4
4
|
export type StepIndicatorMarker = 'number' | 'dot' | 'icon';
|
|
5
5
|
export type StepIndicatorOrientation = 'horizontal' | 'vertical';
|
|
6
6
|
export type StepIndicatorSize = 'lg' | 'sm';
|
|
7
7
|
export interface StepIndicatorItem {
|
|
8
|
-
value:
|
|
8
|
+
value: OptionValue;
|
|
9
9
|
label: ReactNode;
|
|
10
10
|
description?: ReactNode;
|
|
11
11
|
status?: StepIndicatorStatus;
|
|
@@ -15,9 +15,9 @@ export interface StepIndicatorItem {
|
|
|
15
15
|
export interface StepIndicatorProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'>, BaseProps {
|
|
16
16
|
steps: StepIndicatorItem[];
|
|
17
17
|
/** Marks the matching step `aria-current="step"`. */
|
|
18
|
-
activeValue?:
|
|
18
|
+
activeValue?: OptionValue;
|
|
19
19
|
/** Wraps each marker in a `<button>` when set. Omit to render a non-interactive indicator. */
|
|
20
|
-
onStepSelect?: (value:
|
|
20
|
+
onStepSelect?: (value: OptionValue) => void;
|
|
21
21
|
marker?: StepIndicatorMarker;
|
|
22
22
|
orientation?: StepIndicatorOrientation;
|
|
23
23
|
size?: StepIndicatorSize;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactElement, Ref } from 'react';
|
|
2
|
+
import { TableV2Props } from './TableV2.types';
|
|
3
|
+
type TableV2Component = (<TData, TValue = unknown>(props: TableV2Props<TData, TValue> & {
|
|
4
|
+
ref?: Ref<HTMLDivElement>;
|
|
5
|
+
}) => ReactElement) & {
|
|
6
|
+
displayName?: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const TableV2: TableV2Component;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { Column, ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnResizeMode, OnChangeFn, PaginationState, Row, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';
|
|
3
|
+
import { BaseProps } from '../../types';
|
|
4
|
+
export type TableV2Density = 'comfortable' | 'compact';
|
|
5
|
+
export type TableV2Align = 'left' | 'center' | 'right';
|
|
6
|
+
export type TableV2FilterVariant = 'text' | 'select' | 'date' | 'custom';
|
|
7
|
+
export interface TableV2FilterOption {
|
|
8
|
+
label: ReactNode;
|
|
9
|
+
value: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Augments TanStack Table's per-column `meta` with the fields TableV2 reads
|
|
13
|
+
* to render header alignment and the per-column filter row. Declared here
|
|
14
|
+
* (not per-consumer) so every TableV2 column definition gets it for free.
|
|
15
|
+
*/
|
|
16
|
+
declare module '@tanstack/react-table' {
|
|
17
|
+
interface ColumnMeta<TData, TValue> {
|
|
18
|
+
align?: TableV2Align;
|
|
19
|
+
filterVariant?: TableV2FilterVariant;
|
|
20
|
+
/** Options for `filterVariant: 'select'`. */
|
|
21
|
+
filterOptions?: TableV2FilterOption[];
|
|
22
|
+
/** Custom filter input for `filterVariant: 'custom'`. Receives the column and renders its own control. */
|
|
23
|
+
filterComponent?: (column: Column<TData, TValue>) => ReactNode;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
export interface TableV2RowAction<TData> {
|
|
27
|
+
label: ReactNode;
|
|
28
|
+
icon?: ReactNode;
|
|
29
|
+
onSelect: (row: TData) => void;
|
|
30
|
+
destructive?: boolean;
|
|
31
|
+
disabled?: (row: TData) => boolean;
|
|
32
|
+
}
|
|
33
|
+
export interface TableV2Props<TData, TValue = unknown> extends BaseProps {
|
|
34
|
+
data: TData[];
|
|
35
|
+
columns: ColumnDef<TData, TValue>[];
|
|
36
|
+
loading?: boolean;
|
|
37
|
+
/** Renders an inline error state in place of the table body. Clears once falsy again. */
|
|
38
|
+
error?: ReactNode;
|
|
39
|
+
emptyMessage?: ReactNode;
|
|
40
|
+
/** Stable row identity, e.g. for row selection keys. Defaults to row index. */
|
|
41
|
+
getRowId?: (row: TData, index: number) => string;
|
|
42
|
+
enableSorting?: boolean;
|
|
43
|
+
enableMultiSort?: boolean;
|
|
44
|
+
sorting?: SortingState;
|
|
45
|
+
onSortingChange?: OnChangeFn<SortingState>;
|
|
46
|
+
manualSorting?: boolean;
|
|
47
|
+
/** Renders the per-column filter row. Requires `meta.filterVariant` on the columns that should be filterable. */
|
|
48
|
+
enableFiltering?: boolean;
|
|
49
|
+
columnFilters?: ColumnFiltersState;
|
|
50
|
+
onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
|
|
51
|
+
manualFiltering?: boolean;
|
|
52
|
+
enableGlobalFilter?: boolean;
|
|
53
|
+
globalFilter?: string;
|
|
54
|
+
onGlobalFilterChange?: OnChangeFn<string>;
|
|
55
|
+
enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
|
|
56
|
+
enableMultiRowSelection?: boolean;
|
|
57
|
+
rowSelection?: RowSelectionState;
|
|
58
|
+
onRowSelectionChange?: OnChangeFn<RowSelectionState>;
|
|
59
|
+
enableColumnVisibility?: boolean;
|
|
60
|
+
columnVisibility?: VisibilityState;
|
|
61
|
+
onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
|
|
62
|
+
enableColumnOrdering?: boolean;
|
|
63
|
+
columnOrder?: ColumnOrderState;
|
|
64
|
+
onColumnOrderChange?: OnChangeFn<ColumnOrderState>;
|
|
65
|
+
enablePinning?: boolean;
|
|
66
|
+
columnPinning?: ColumnPinningState;
|
|
67
|
+
onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
|
|
68
|
+
enableColumnResizing?: boolean;
|
|
69
|
+
columnResizeMode?: ColumnResizeMode;
|
|
70
|
+
enablePagination?: boolean;
|
|
71
|
+
pageSize?: number;
|
|
72
|
+
pageSizeOptions?: number[];
|
|
73
|
+
pagination?: PaginationState;
|
|
74
|
+
onPaginationChange?: OnChangeFn<PaginationState>;
|
|
75
|
+
manualPagination?: boolean;
|
|
76
|
+
pageCount?: number;
|
|
77
|
+
rowCount?: number;
|
|
78
|
+
enableVirtualization?: boolean;
|
|
79
|
+
estimatedRowHeight?: number;
|
|
80
|
+
/**
|
|
81
|
+
* Scroll viewport height. Applied to the outer scroll container whenever
|
|
82
|
+
* `enableVirtualization` or `stickyHeader` is on, since both need a
|
|
83
|
+
* bounded, scrollable ancestor to have any visible effect.
|
|
84
|
+
* @default 480
|
|
85
|
+
*/
|
|
86
|
+
maxBodyHeight?: number | string;
|
|
87
|
+
onRowClick?: (row: TData) => void;
|
|
88
|
+
/** Replaces the default toolbar entirely. Pass `false` to render no toolbar. */
|
|
89
|
+
toolbar?: ReactNode | false;
|
|
90
|
+
/** Extra actions rendered at the end of the default toolbar, alongside export/column-visibility. Ignored when `toolbar` is set. */
|
|
91
|
+
toolbarActions?: ReactNode;
|
|
92
|
+
searchPlaceholder?: string;
|
|
93
|
+
onRefresh?: () => void;
|
|
94
|
+
onExport?: () => void;
|
|
95
|
+
density?: TableV2Density;
|
|
96
|
+
stickyHeader?: boolean;
|
|
97
|
+
wrapperClassName?: string;
|
|
98
|
+
className?: string;
|
|
99
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { Column, ColumnDef } from '@tanstack/react-table';
|
|
3
|
+
import { TableV2Align, TableV2Density, TableV2RowAction } from './TableV2.types';
|
|
4
|
+
export declare const densityStyles: Record<TableV2Density, string>;
|
|
5
|
+
export declare const alignStyles: Record<TableV2Align, string>;
|
|
6
|
+
/** Prepended to `columns` when `enableRowSelection` is on and no `'select'` column exists already. */
|
|
7
|
+
export declare function createSelectionColumn<TData>(): ColumnDef<TData, unknown>;
|
|
8
|
+
/** A trailing `'actions'` column rendering a kebab menu built from `getActions(row)`. */
|
|
9
|
+
export declare function createRowActionsColumn<TData>(getActions: (row: TData) => TableV2RowAction<TData>[], options?: {
|
|
10
|
+
header?: string;
|
|
11
|
+
size?: number;
|
|
12
|
+
}): ColumnDef<TData, unknown>;
|
|
13
|
+
/** Sticky inline styles for a pinned column/header cell — offsets by the running width of columns pinned ahead of it. */
|
|
14
|
+
export declare function getPinnedStyles<TData, TValue>(column: Column<TData, TValue>): CSSProperties;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Table } from '@tanstack/react-table';
|
|
2
|
+
export interface TableV2ColumnVisibilityMenuProps<TData> {
|
|
3
|
+
table: Table<TData>;
|
|
4
|
+
}
|
|
5
|
+
/** Dropdown letting users toggle which columns are visible. Skips columns marked `enableHiding: false`. */
|
|
6
|
+
export declare function TableV2ColumnVisibilityMenu<TData>({ table, }: TableV2ColumnVisibilityMenuProps<TData>): import("react").JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Column } from '@tanstack/react-table';
|
|
2
|
+
export interface TableV2ColumnFilterProps<TData, TValue> {
|
|
3
|
+
column: Column<TData, TValue>;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Renders the header filter-row input for a single column, driven by
|
|
7
|
+
* `column.columnDef.meta.filterVariant`. Columns without a `filterVariant`
|
|
8
|
+
* render nothing, leaving their filter cell empty.
|
|
9
|
+
*/
|
|
10
|
+
export declare function TableV2ColumnFilter<TData, TValue>({ column, }: TableV2ColumnFilterProps<TData, TValue>): import("react").JSX.Element | null;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Table } from '@tanstack/react-table';
|
|
2
|
+
export interface TableV2PaginationProps<TData> {
|
|
3
|
+
table: Table<TData>;
|
|
4
|
+
pageSizeOptions?: number[];
|
|
5
|
+
}
|
|
6
|
+
/** Footer bar: page-size select, row-range summary, and page controls. Works for both client and manual (server) pagination. */
|
|
7
|
+
export declare function TableV2Pagination<TData>({ table, pageSizeOptions, }: TableV2PaginationProps<TData>): import("react").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TableV2RowAction } from './TableV2.types';
|
|
2
|
+
export interface TableV2RowActionsMenuProps<TData> {
|
|
3
|
+
row: TData;
|
|
4
|
+
actions: TableV2RowAction<TData>[];
|
|
5
|
+
}
|
|
6
|
+
/** Kebab-menu action list for a single row. Used by `createRowActionsColumn`. */
|
|
7
|
+
export declare function TableV2RowActionsMenu<TData>({ row, actions }: TableV2RowActionsMenuProps<TData>): import("react").JSX.Element | null;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export interface TableV2SkeletonProps {
|
|
2
|
+
columnCount: number;
|
|
3
|
+
rowCount?: number;
|
|
4
|
+
}
|
|
5
|
+
/** Skeleton `<tr>` rows rendered in place of the body while `loading` is true. Never a spinner. */
|
|
6
|
+
export declare function TableV2Skeleton({ columnCount, rowCount }: TableV2SkeletonProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { Table } from '@tanstack/react-table';
|
|
3
|
+
export interface TableV2ToolbarProps<TData> {
|
|
4
|
+
table: Table<TData>;
|
|
5
|
+
enableGlobalFilter?: boolean;
|
|
6
|
+
enableColumnVisibility?: boolean;
|
|
7
|
+
searchPlaceholder?: string;
|
|
8
|
+
onRefresh?: () => void;
|
|
9
|
+
onExport?: () => void;
|
|
10
|
+
actions?: ReactNode;
|
|
11
|
+
}
|
|
12
|
+
/** Default toolbar: global search, refresh, export, column visibility, and a custom actions slot. Replace entirely via the `toolbar` prop on `<TableV2>`. */
|
|
13
|
+
export declare function TableV2Toolbar<TData>({ table, enableGlobalFilter, enableColumnVisibility, searchPlaceholder, onRefresh, onExport, actions, }: TableV2ToolbarProps<TData>): import("react").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { TableV2 } from './TableV2';
|
|
2
|
+
export { createSelectionColumn, createRowActionsColumn, getPinnedStyles } from './TableV2.utils';
|
|
3
|
+
export { TableV2RowActionsMenu } from './TableV2RowActions';
|
|
4
|
+
export { TableV2ColumnFilter } from './TableV2Filter';
|
|
5
|
+
export { TableV2ColumnVisibilityMenu } from './TableV2ColumnVisibility';
|
|
6
|
+
export { TableV2Toolbar } from './TableV2Toolbar';
|
|
7
|
+
export { TableV2Pagination } from './TableV2Pagination';
|
|
8
|
+
export { TableV2Skeleton } from './TableV2Skeleton';
|
|
9
|
+
export type { TableV2Align, TableV2Density, TableV2FilterOption, TableV2FilterVariant, TableV2Props, TableV2RowAction, } from './TableV2.types';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { closestCenter, useSensors, DragEndEvent, Modifier } from '@dnd-kit/core';
|
|
3
|
+
import { useSortable } from '@dnd-kit/sortable';
|
|
4
|
+
export interface UseColumnOrderDndOptions {
|
|
5
|
+
columnOrder: string[];
|
|
6
|
+
onColumnOrderChange: (order: string[]) => void;
|
|
7
|
+
}
|
|
8
|
+
export interface UseColumnOrderDndResult {
|
|
9
|
+
sensors: ReturnType<typeof useSensors>;
|
|
10
|
+
collisionDetection: typeof closestCenter;
|
|
11
|
+
modifiers: Modifier[];
|
|
12
|
+
handleDragEnd: (event: DragEndEvent) => void;
|
|
13
|
+
}
|
|
14
|
+
/** Wires a `<DndContext>` for reordering column headers by drag-and-drop. */
|
|
15
|
+
export declare function useColumnOrderDnd({ columnOrder, onColumnOrderChange, }: UseColumnOrderDndOptions): UseColumnOrderDndResult;
|
|
16
|
+
export interface UseDraggableColumnResult {
|
|
17
|
+
setNodeRef: (node: HTMLElement | null) => void;
|
|
18
|
+
attributes: ReturnType<typeof useSortable>['attributes'];
|
|
19
|
+
listeners: ReturnType<typeof useSortable>['listeners'];
|
|
20
|
+
style: CSSProperties;
|
|
21
|
+
isDragging: boolean;
|
|
22
|
+
}
|
|
23
|
+
/** Per-header-cell drag handle, for use inside a `<SortableContext>`. */
|
|
24
|
+
export declare function useDraggableColumn(columnId: string): UseDraggableColumnResult;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
import { BaseProps } from '../../types';
|
|
2
|
+
import { BaseProps, OptionValue } from '../../types';
|
|
3
3
|
import { BadgeProps } from '../Badge';
|
|
4
4
|
export type TabsVariant = 'underline' | 'pills' | 'boxed';
|
|
5
5
|
export type TabsSize = 'lg' | 'md' | 'sm';
|
|
6
6
|
export interface TabsProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
|
|
7
7
|
/** Uncontrolled initial active tab value. Falls back to the first `<Tab>`'s value if omitted. */
|
|
8
|
-
defaultValue?:
|
|
8
|
+
defaultValue?: OptionValue;
|
|
9
9
|
/** Controlled active tab value. Pass alongside `onValueChange` to fully control which tab is active. */
|
|
10
|
-
value?:
|
|
11
|
-
onValueChange?: (value:
|
|
10
|
+
value?: OptionValue;
|
|
11
|
+
onValueChange?: (value: OptionValue) => void;
|
|
12
12
|
variant?: TabsVariant;
|
|
13
13
|
size?: TabsSize;
|
|
14
14
|
/** Disables every tab in the bar at once. OR'd with each `Tab`'s own `disabled`. */
|
|
@@ -20,7 +20,7 @@ export interface TabListProps extends HTMLAttributes<HTMLDivElement>, BaseProps
|
|
|
20
20
|
}
|
|
21
21
|
export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseProps {
|
|
22
22
|
/** Unique identifier matched against the parent `Tabs`'s active value. */
|
|
23
|
-
value:
|
|
23
|
+
value: OptionValue;
|
|
24
24
|
icon?: ReactNode;
|
|
25
25
|
/** Count/indicator rendered after the label. Hidden when `undefined`, `null`, or `false`. */
|
|
26
26
|
badge?: ReactNode;
|
|
@@ -29,13 +29,13 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseP
|
|
|
29
29
|
/** Trailing icon rendered as its own button — e.g. a close-tab X. Rendered as a sibling of the tab button, not a nested one (nesting a button inside a button is invalid HTML). */
|
|
30
30
|
rightIcon?: ReactNode;
|
|
31
31
|
/** Called with this tab's `value` when `rightIcon` is clicked. Does not activate the tab. */
|
|
32
|
-
onRightIconClick?: (value:
|
|
32
|
+
onRightIconClick?: (value: OptionValue) => void;
|
|
33
33
|
/** Accessible name for the `rightIcon` button. Required when `rightIcon` is set. */
|
|
34
34
|
rightIconLabel?: string;
|
|
35
35
|
}
|
|
36
36
|
export interface TabPanelProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
|
|
37
37
|
/** Matched against the parent `Tabs`'s active value; hidden (or unmounted, depending on `keepMounted`) when not active. */
|
|
38
|
-
value:
|
|
38
|
+
value: OptionValue;
|
|
39
39
|
/** Keeps the panel mounted (hidden via the `hidden` attribute) while inactive, instead of unmounting it — preserves scroll position and in-panel state across tab switches. */
|
|
40
40
|
keepMounted?: boolean;
|
|
41
41
|
}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
import { UploadItemProps, UploadProps } from './Upload.types';
|
|
1
|
+
import { FileValidationOptions, UploadItemProps, UploadProps, UploadRejectionReason } from './Upload.types';
|
|
2
|
+
/**
|
|
3
|
+
* Also used by `Avatar`'s `editable` picker — changing these semantics
|
|
4
|
+
* changes both components.
|
|
5
|
+
*/
|
|
6
|
+
export declare function validateSingleFile(file: File, { accept, maxSizeMB }: FileValidationOptions): UploadRejectionReason | null;
|
|
2
7
|
export declare const Upload: import('react').ForwardRefExoticComponent<UploadProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
3
8
|
export declare const UploadItem: import('react').ForwardRefExoticComponent<UploadItemProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { BaseProps } from '../../types';
|
|
3
|
-
export type UploadMode = 'dropzone' | 'button' | 'icon';
|
|
3
|
+
export type UploadMode = 'dropzone' | 'button' | 'icon' | 'view';
|
|
4
4
|
export type UploadRejectionReason = 'size' | 'type' | 'maxFiles' | 'duplicate';
|
|
5
5
|
export interface UploadRejection {
|
|
6
6
|
file: File;
|
|
7
7
|
reason: UploadRejectionReason;
|
|
8
8
|
}
|
|
9
|
+
export interface FileValidationOptions {
|
|
10
|
+
/** Forwarded to `matchesAccept` — same semantics as `UploadProps.accept`. */
|
|
11
|
+
accept?: string;
|
|
12
|
+
/** Same semantics as `UploadProps.maxSizeMB`. */
|
|
13
|
+
maxSizeMB?: number;
|
|
14
|
+
}
|
|
9
15
|
export interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop' | 'onDragEnter' | 'onDragOver' | 'onDragLeave' | 'onKeyDown' | 'role' | 'tabIndex' | 'aria-disabled' | 'aria-invalid'>, BaseProps {
|
|
10
16
|
/** Forwarded to the hidden native `<input type="file">`, e.g. `"image/png,image/jpeg"`. */
|
|
11
17
|
accept?: string;
|
|
@@ -27,7 +33,11 @@ export interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCli
|
|
|
27
33
|
currentFiles?: File[];
|
|
28
34
|
/** Files that failed validation, with the reason. Only called when `validateFiles` is set. */
|
|
29
35
|
onReject?: (rejections: UploadRejection[]) => void;
|
|
30
|
-
/** `
|
|
36
|
+
/** Renders `currentFiles` as `UploadItem`s below the trigger/dropzone. `Upload` stays stateless — `currentFiles` remains the source of truth. */
|
|
37
|
+
showFileList?: boolean;
|
|
38
|
+
/** Called when a self-rendered file-list item's remove button is clicked. Only reachable when `showFileList` is set and `mode` isn't `'view'`. */
|
|
39
|
+
onRemoveFile?: (file: File, index: number) => void;
|
|
40
|
+
/** `'dropzone'` (default) is the drag-and-drop area. `'button'` renders a secondary Button trigger. `'icon'` renders a compact icon-only trigger. `'view'` renders only the label and (with `showFileList`) the file list — no picker, no drag target, no remove affordance. */
|
|
31
41
|
mode?: UploadMode;
|
|
32
42
|
/** Label for the `'button'`-mode trigger. Ignored in other modes. */
|
|
33
43
|
triggerLabel?: ReactNode;
|
|
@@ -54,4 +64,6 @@ export interface UploadItemProps extends HTMLAttributes<HTMLDivElement>, BasePro
|
|
|
54
64
|
onRemove?: () => void;
|
|
55
65
|
/** Image thumbnail URL, rendered in place of the file-type icon. The consumer owns the URL's lifetime (e.g. call `URL.revokeObjectURL` on unmount). Falls back to the file icon on load failure. */
|
|
56
66
|
previewSrc?: string;
|
|
67
|
+
/** Makes the item's name a button, for viewing/downloading the file. */
|
|
68
|
+
onOpen?: () => void;
|
|
57
69
|
}
|