@vkzstudio/muza-ui 1.0.43 → 1.0.44
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.d.ts +42 -6
- package/dist/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/components/Button/Button.d.ts +71 -17
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/DataTable/DataTable.d.ts +52 -15
- package/dist/components/DataTable/DataTable.d.ts.map +1 -1
- package/dist/components/DatePicker/DatePicker.d.ts +69 -36
- package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker/DatePicker.stories.d.ts.map +1 -1
- package/dist/components/EdgeButton/EdgeButton.d.ts +10 -11
- package/dist/components/EdgeButton/EdgeButton.d.ts.map +1 -1
- package/dist/components/ExpandableTable/ExpandableTable.d.ts +73 -8
- package/dist/components/ExpandableTable/ExpandableTable.d.ts.map +1 -1
- package/dist/components/ExpandableTable/ExpandableTable.stories.d.ts +3 -0
- package/dist/components/ExpandableTable/ExpandableTable.stories.d.ts.map +1 -1
- package/dist/components/ExpandableTable/index.d.ts +1 -1
- package/dist/components/ExpandableTable/index.d.ts.map +1 -1
- package/dist/components/FileUpload/FileItem.d.ts +16 -0
- package/dist/components/FileUpload/FileItem.d.ts.map +1 -1
- package/dist/components/FileUpload/FileUpload.d.ts +105 -42
- package/dist/components/FileUpload/FileUpload.d.ts.map +1 -1
- package/dist/components/FileUpload/index.d.ts +1 -1
- package/dist/components/FileUpload/index.d.ts.map +1 -1
- package/dist/components/Input/Input.d.ts +33 -34
- package/dist/components/Input/Input.d.ts.map +1 -1
- package/dist/components/Input/Input.stories.d.ts.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.d.ts +50 -23
- package/dist/components/MultiSelect/MultiSelect.d.ts.map +1 -1
- package/dist/components/Reorderable/Reorderable.d.ts +48 -1
- package/dist/components/Reorderable/Reorderable.d.ts.map +1 -1
- package/dist/components/ReorderableTable/ReorderableTable.d.ts +34 -17
- package/dist/components/ReorderableTable/ReorderableTable.d.ts.map +1 -1
- package/dist/components/ReorderableTable/ReorderableTable.stories.d.ts.map +1 -1
- package/dist/components/Select/Select.d.ts +38 -21
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/index.d.ts +1 -1
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/TextEditor/TextEditor.d.ts +82 -46
- package/dist/components/TextEditor/TextEditor.d.ts.map +1 -1
- package/dist/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
- package/dist/components/TextEditor/index.d.ts +1 -1
- package/dist/components/TextEditor/index.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.d.ts +41 -10
- package/dist/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.stories.d.ts.map +1 -1
- package/dist/muza-ui.css +1 -1
- package/package.json +1 -1
|
@@ -1,31 +1,53 @@
|
|
|
1
1
|
import { default as React, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Single selectable option in the MultiSelect dropdown.
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* const option: IMultiSelectOption = {
|
|
7
|
+
* value: 'food',
|
|
8
|
+
* label: 'Food & Dining',
|
|
9
|
+
* icon: <Cutlery />,
|
|
10
|
+
* disabled: false,
|
|
11
|
+
* }
|
|
12
|
+
*/
|
|
13
|
+
export interface IMultiSelectOption {
|
|
14
|
+
/** Unique value identifying the option. Matched against `value` to determine selection. */
|
|
15
|
+
value: string;
|
|
16
|
+
/** Display content rendered inside the dropdown item and inside the selected tag. */
|
|
17
|
+
label: ReactNode;
|
|
18
|
+
/** Prevents the option from being toggled. Still visible in the dropdown. */
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
/** Icon rendered before the label inside the dropdown item. */
|
|
21
|
+
icon?: ReactNode;
|
|
22
|
+
}
|
|
2
23
|
/**
|
|
3
24
|
* Props for the MultiSelect component.
|
|
4
25
|
*/
|
|
5
26
|
export interface IMultiSelectProps {
|
|
6
|
-
/** Label
|
|
27
|
+
/** Label rendered above the select via FormField. */
|
|
7
28
|
label?: string;
|
|
8
|
-
/** Helper text
|
|
29
|
+
/** Helper text rendered below the select. Switches to error color when `error` is true. */
|
|
9
30
|
hint?: string;
|
|
10
|
-
/** Applies error
|
|
31
|
+
/** Applies error border and switches `hint` to error color. @default false */
|
|
11
32
|
error?: boolean;
|
|
12
|
-
/** Marks the field as required
|
|
33
|
+
/** Marks the field as required. Renders an asterisk next to the label and sets `aria-required`. @default false */
|
|
13
34
|
required?: boolean;
|
|
14
35
|
/** Hides the required asterisk even when `required` is true. @default false */
|
|
15
36
|
disableRequiredAsterisk?: boolean;
|
|
16
|
-
/**
|
|
37
|
+
/** Reserved slot for content rendered after the selected values. Not currently rendered. */
|
|
17
38
|
suffix?: ReactNode;
|
|
18
|
-
/** Icon or element
|
|
39
|
+
/** Icon or element rendered before the selected tags or placeholder inside the trigger. */
|
|
19
40
|
prefix?: ReactNode;
|
|
20
|
-
/** Placeholder
|
|
41
|
+
/** Placeholder rendered when no options are selected. @default translations.select.placeholder */
|
|
21
42
|
placeholder?: string;
|
|
22
|
-
/** Text
|
|
43
|
+
/** Text rendered inside the dropdown when `options` is empty. @default translations.select.noOptions */
|
|
23
44
|
emptyMessage?: string;
|
|
24
|
-
/** Controls height and padding. @default 'base' */
|
|
45
|
+
/** Controls trigger height and padding. @default 'base' */
|
|
25
46
|
size?: 'xs' | 'sm' | 'base' | 'lg';
|
|
26
47
|
/**
|
|
27
|
-
*
|
|
48
|
+
* Selectable options rendered inside the dropdown.
|
|
28
49
|
*
|
|
50
|
+
* @see IMultiSelectOption
|
|
29
51
|
* @example
|
|
30
52
|
* <MultiSelect options={[
|
|
31
53
|
* { value: 'a', label: 'Option A' },
|
|
@@ -33,25 +55,30 @@ export interface IMultiSelectProps {
|
|
|
33
55
|
* { value: 'c', label: 'Option C', icon: <Icon /> },
|
|
34
56
|
* ]} />
|
|
35
57
|
*/
|
|
36
|
-
options:
|
|
37
|
-
|
|
38
|
-
label: ReactNode;
|
|
39
|
-
disabled?: boolean;
|
|
40
|
-
icon?: ReactNode;
|
|
41
|
-
}>;
|
|
42
|
-
/** Prevents interaction and applies disabled styling. */
|
|
58
|
+
options: IMultiSelectOption[];
|
|
59
|
+
/** Prevents interaction and applies disabled styling. @default false */
|
|
43
60
|
disabled?: boolean;
|
|
44
|
-
/** Maximum number of tag chips
|
|
61
|
+
/** Maximum number of tag chips rendered before overflow collapses into a `+N` counter tag. @default 2 */
|
|
45
62
|
maxNumberOfVisibleTags?: number;
|
|
46
|
-
/**
|
|
63
|
+
/**
|
|
64
|
+
* Currently selected option values. Use with `onChange` for controlled mode.
|
|
65
|
+
*
|
|
66
|
+
* @example
|
|
67
|
+
* <MultiSelect value={['apple', 'banana']} onChange={setValue} options={...} />
|
|
68
|
+
*/
|
|
47
69
|
value?: string[];
|
|
48
|
-
/**
|
|
70
|
+
/**
|
|
71
|
+
* Fires when the selection changes. Receives the full updated array of selected values.
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* <MultiSelect onChange={(values) => setSelected(values)} />
|
|
75
|
+
*/
|
|
49
76
|
onChange?: (value: string[]) => void;
|
|
50
|
-
/** Extra content rendered inline next to the label (e.g. a tooltip icon). */
|
|
77
|
+
/** Extra content rendered inline next to the label (e.g. a tooltip icon). Takes precedence over `infoTooltip`. */
|
|
51
78
|
labelExtra?: ReactNode;
|
|
52
|
-
/** Tooltip content
|
|
79
|
+
/** Tooltip content rendered in an info icon next to the label. Ignored if `labelExtra` is provided. */
|
|
53
80
|
infoTooltip?: string;
|
|
54
|
-
/** Distance in pixels from viewport edge before the dropdown repositions.
|
|
81
|
+
/** Distance in pixels from the viewport edge before the dropdown repositions. Forwarded to Radix `collisionPadding`. */
|
|
55
82
|
collisionPadding?: number;
|
|
56
83
|
}
|
|
57
84
|
export declare const MultiSelect: React.ForwardRefExoticComponent<IMultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAgBd;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,
|
|
1
|
+
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAgBd;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBAAkB;IACjC,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAA;IACb,qFAAqF;IACrF,KAAK,EAAE,SAAS,CAAA;IAChB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,kHAAkH;IAClH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,4FAA4F;IAC5F,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wGAAwG;IACxG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;;;;;OAUG;IACH,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yGAAyG;IACzG,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,kHAAkH;IAClH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,uGAAuG;IACvG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wHAAwH;IACxH,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,WAAW,6FAkOvB,CAAA"}
|
|
@@ -32,19 +32,40 @@ export interface ReorderableGroupProps<T> {
|
|
|
32
32
|
* Fires when items are reordered with the new array order.
|
|
33
33
|
* Required unless `onSync` is provided, in which case it becomes an optional
|
|
34
34
|
* pass-through for immediate local feedback.
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* const [items, setItems] = useState(initialItems)
|
|
38
|
+
* <ReorderableGroup values={items} onReorder={setItems}>...</ReorderableGroup>
|
|
35
39
|
*/
|
|
36
40
|
onReorder?: (newOrder: T[]) => void;
|
|
37
41
|
/**
|
|
38
42
|
* Debounced sync callback. Fires once after the user finishes reordering
|
|
39
43
|
* (`syncDelay` ms after the last reorder event). When provided, the component
|
|
40
44
|
* manages internal state and blocks external `values` updates while sync is pending.
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* // Persist new order to the server after the user finishes dragging
|
|
48
|
+
* <ReorderableGroup
|
|
49
|
+
* values={serverItems}
|
|
50
|
+
* onSync={(order) => api.saveOrder(order)}
|
|
51
|
+
* syncDelay={500}
|
|
52
|
+
* >
|
|
53
|
+
* {(items) => items.map(item => <ReorderableItem key={item.id} value={item}>...</ReorderableItem>)}
|
|
54
|
+
* </ReorderableGroup>
|
|
41
55
|
*/
|
|
42
56
|
onSync?: (newOrder: T[]) => void;
|
|
43
57
|
/** Milliseconds to wait after the last reorder event before calling `onSync`. @default 300 */
|
|
44
58
|
syncDelay?: number;
|
|
45
59
|
/**
|
|
46
|
-
*
|
|
60
|
+
* Fires when the internal sync pending state changes.
|
|
47
61
|
* Useful for showing loading indicators or disabling other interactions during sync.
|
|
62
|
+
*
|
|
63
|
+
* @example
|
|
64
|
+
* <ReorderableGroup
|
|
65
|
+
* values={items}
|
|
66
|
+
* onSync={handleSync}
|
|
67
|
+
* onSyncPendingChange={setIsSyncing}
|
|
68
|
+
* >...</ReorderableGroup>
|
|
48
69
|
*/
|
|
49
70
|
onSyncPendingChange?: (isPending: boolean) => void;
|
|
50
71
|
/** Fires when a pointer drag interaction starts (handle grab or direct item drag). */
|
|
@@ -64,6 +85,14 @@ export interface ReorderableGroupProps<T> {
|
|
|
64
85
|
/**
|
|
65
86
|
* Wraps children with AnimatePresence to enable exit animations on ReorderableItems.
|
|
66
87
|
* Pass `true` for defaults (`mode="popLayout"`, `initial={false}`) or an object for custom config.
|
|
88
|
+
*
|
|
89
|
+
* @default false
|
|
90
|
+
* @example
|
|
91
|
+
* // Enable defaults
|
|
92
|
+
* <ReorderableGroup animatePresence values={items} onReorder={setItems}>...</ReorderableGroup>
|
|
93
|
+
*
|
|
94
|
+
* // Custom AnimatePresence config
|
|
95
|
+
* <ReorderableGroup animatePresence={{ mode: 'wait' }} values={items} onReorder={setItems}>...</ReorderableGroup>
|
|
67
96
|
*/
|
|
68
97
|
animatePresence?: boolean | Omit<AnimatePresenceProps, 'children'>;
|
|
69
98
|
/** Additional CSS classes. */
|
|
@@ -88,6 +117,16 @@ declare const ReorderableGroup: <T>(props: ReorderableGroupProps<T> & {
|
|
|
88
117
|
type ReorderableItemElement = 'li' | 'div' | 'tr';
|
|
89
118
|
/**
|
|
90
119
|
* Custom animation configuration for enter/exit transitions on a ReorderableItem.
|
|
120
|
+
* Passed to a ReorderableItem via the `animation` prop. Any omitted field falls back
|
|
121
|
+
* to the built-in default (opacity + scale fade).
|
|
122
|
+
*
|
|
123
|
+
* @example
|
|
124
|
+
* const slideIn: ReorderableItemAnimationConfig = {
|
|
125
|
+
* initial: { opacity: 0, x: -20 },
|
|
126
|
+
* animate: { opacity: 1, x: 0 },
|
|
127
|
+
* exit: { opacity: 0, x: 20 },
|
|
128
|
+
* transition: { duration: 0.15, ease: 'easeOut' },
|
|
129
|
+
* }
|
|
91
130
|
*/
|
|
92
131
|
export interface ReorderableItemAnimationConfig {
|
|
93
132
|
/** Mount animation state (motion `initial`). Set `false` to skip enter animation. */
|
|
@@ -128,6 +167,10 @@ export interface ReorderableItemProps<T> {
|
|
|
128
167
|
* - Object: merges with defaults — only override what you need.
|
|
129
168
|
* - `false` or omitted: no animation unless the parent group has `animatePresence` enabled,
|
|
130
169
|
* in which case defaults are applied automatically.
|
|
170
|
+
*
|
|
171
|
+
* @see ReorderableItemAnimationConfig
|
|
172
|
+
* @example
|
|
173
|
+
* <ReorderableItem animation={{ initial: { opacity: 0, x: -20 } }} value={item}>...</ReorderableItem>
|
|
131
174
|
*/
|
|
132
175
|
animation?: boolean | ReorderableItemAnimationConfig;
|
|
133
176
|
/** Additional CSS classes. */
|
|
@@ -139,6 +182,10 @@ export interface ReorderableItemProps<T> {
|
|
|
139
182
|
/**
|
|
140
183
|
* Controls Motion's layout animation mode.
|
|
141
184
|
* Use `"position"` to animate only position and prevent scale distortion when item height changes.
|
|
185
|
+
*
|
|
186
|
+
* @example
|
|
187
|
+
* // Prevent scale distortion on items with dynamic height
|
|
188
|
+
* <ReorderableItem layout="position" value={item}>...</ReorderableItem>
|
|
142
189
|
*/
|
|
143
190
|
layout?: true | 'position';
|
|
144
191
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Reorderable.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,EAIjB,KAAK,YAAY,EACjB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAA;AACd,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,eAAe,EAEpB,KAAK,mBAAmB,EAGzB,MAAM,cAAc,CAAA;AAWrB,UAAU,4BAA4B,CAAC,CAAC,GAAG,OAAO;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,CAAC,EAAE,CAAA;IACZ,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IACnC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAcD,QAAA,MAAM,mBAAmB,GAAI,CAAC,OACW,4BAA4B,CAAC,CAAC,CAAC,CAAA;AAExE,UAAU,2BAA2B;IACnC,YAAY,EAAE,YAAY,CAAA;IAC1B,oBAAoB,EAAE,OAAO,CAAA;IAC7B,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAA;CACtC;AAKD,QAAA,MAAM,kBAAkB,mCAMvB,CAAA;AAMD,KAAK,uBAAuB,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,CAAA;AAE5D;;;GAGG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC;;;;OAIG;IACH,MAAM,EAAE,CAAC,EAAE,CAAA;IACX
|
|
1
|
+
{"version":3,"file":"Reorderable.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { ForwardedRef, ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* Column definition for ReorderableTable.
|
|
3
|
+
* Column definition for the ReorderableTable. Describes how a single column's
|
|
4
|
+
* header and body cells are derived from row data.
|
|
4
5
|
*
|
|
5
|
-
* @typeParam T -
|
|
6
|
+
* @typeParam T - The type of data objects in each row
|
|
6
7
|
*
|
|
7
8
|
* @example
|
|
8
9
|
* const columns: ReorderableTableColumn<User>[] = [
|
|
@@ -13,17 +14,19 @@ import { ForwardedRef, ReactNode } from 'react';
|
|
|
13
14
|
export interface ReorderableTableColumn<T> {
|
|
14
15
|
/** Property key from the row data object to display in this column. */
|
|
15
16
|
dataKey: keyof T;
|
|
16
|
-
/**
|
|
17
|
+
/** Header content rendered in the table head for this column. */
|
|
17
18
|
title: ReactNode;
|
|
18
|
-
/** Applies custom CSS classes to cells in this column. */
|
|
19
|
+
/** Applies custom CSS classes to both header and body cells in this column. */
|
|
19
20
|
className?: string;
|
|
20
21
|
/**
|
|
21
|
-
* Controls text truncation via line clamping.
|
|
22
|
-
*
|
|
22
|
+
* Controls text truncation via line clamping. `true` or `1` applies a
|
|
23
|
+
* single-line clamp, `2` applies a two-line clamp. Only used when `render`
|
|
24
|
+
* is omitted (the default Typography renderer honors this prop).
|
|
23
25
|
*/
|
|
24
26
|
lineClamp?: boolean | 1 | 2;
|
|
25
27
|
/**
|
|
26
|
-
* Custom cell renderer. When omitted, the raw data value is rendered
|
|
28
|
+
* Custom cell renderer. When omitted, the raw data value is rendered inside
|
|
29
|
+
* a Typography component.
|
|
27
30
|
*
|
|
28
31
|
* @example
|
|
29
32
|
* render: (value, rowData, rowIndex) => <Tag>{value}</Tag>
|
|
@@ -34,7 +37,7 @@ export interface ReorderableTableColumn<T> {
|
|
|
34
37
|
* Props for the ReorderableTable component.
|
|
35
38
|
* Extends standard table attributes except `children` (rows are generated from `data`).
|
|
36
39
|
*
|
|
37
|
-
* @typeParam T -
|
|
40
|
+
* @typeParam T - The type of data objects in each row; must include an `id` field used as the React key
|
|
38
41
|
* @see ReorderableTableColumn
|
|
39
42
|
*/
|
|
40
43
|
export interface ReorderableTableProps<T extends {
|
|
@@ -44,27 +47,37 @@ export interface ReorderableTableProps<T extends {
|
|
|
44
47
|
data: T[];
|
|
45
48
|
/**
|
|
46
49
|
* Fires when rows are reordered. Receives the full array in its new order.
|
|
47
|
-
* Optional when `onSync` is provided
|
|
50
|
+
* Optional when `onSync` is provided — in sync mode `onSync` is the primary
|
|
51
|
+
* handler and `onReorder` becomes a pass-through for immediate local feedback.
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* onReorder={(newOrder) => setRows(newOrder)}
|
|
48
55
|
*/
|
|
49
56
|
onReorder?: (newOrder: T[]) => void;
|
|
50
57
|
/**
|
|
51
58
|
* Debounced sync callback. Fires once after the user finishes reordering
|
|
52
59
|
* (`syncDelay` ms after the last reorder event). When provided, the component
|
|
53
60
|
* manages internal state and blocks external `data` updates while sync is pending.
|
|
61
|
+
*
|
|
62
|
+
* @example
|
|
63
|
+
* onSync={(newOrder) => api.saveOrder(newOrder)}
|
|
54
64
|
*/
|
|
55
65
|
onSync?: (newOrder: T[]) => void;
|
|
56
66
|
/** Milliseconds to wait after the last reorder event before calling `onSync`. @default 300 */
|
|
57
67
|
syncDelay?: number;
|
|
58
68
|
/**
|
|
59
|
-
*
|
|
60
|
-
*
|
|
69
|
+
* Fires when the internal sync pending state changes. Useful for showing
|
|
70
|
+
* loading indicators or disabling other interactions during sync.
|
|
61
71
|
*/
|
|
62
72
|
onSyncPendingChange?: (isPending: boolean) => void;
|
|
63
73
|
/** Fires when a pointer drag interaction starts. */
|
|
64
74
|
onDragStart?: () => void;
|
|
65
75
|
/** Fires when a pointer drag interaction ends. */
|
|
66
76
|
onDragEnd?: () => void;
|
|
67
|
-
/**
|
|
77
|
+
/**
|
|
78
|
+
* Column definitions describing headers and cell rendering.
|
|
79
|
+
* @see ReorderableTableColumn
|
|
80
|
+
*/
|
|
68
81
|
columns: ReorderableTableColumn<T>[];
|
|
69
82
|
/** Displays the table header row. @default false */
|
|
70
83
|
showHeader?: boolean;
|
|
@@ -72,7 +85,8 @@ export interface ReorderableTableProps<T extends {
|
|
|
72
85
|
disabled?: boolean;
|
|
73
86
|
/**
|
|
74
87
|
* Determines whether a specific row is disabled based on its data and index.
|
|
75
|
-
* Disabled rows cannot be dragged but may still shift when other
|
|
88
|
+
* Disabled rows cannot be dragged but may still shift position when other
|
|
89
|
+
* rows are reordered around them.
|
|
76
90
|
*
|
|
77
91
|
* @example
|
|
78
92
|
* isRowDisabled={(row) => row.status === 'inactive'}
|
|
@@ -85,14 +99,17 @@ export interface ReorderableTableProps<T extends {
|
|
|
85
99
|
/** Enables enter/exit animations when rows are added or removed. @default false */
|
|
86
100
|
animateItems?: boolean;
|
|
87
101
|
/**
|
|
88
|
-
* Controls Motion's layout animation mode on rows.
|
|
89
|
-
*
|
|
102
|
+
* Controls Motion's layout animation mode on rows. Use `"position"` to
|
|
103
|
+
* animate only position and prevent scale distortion when row height changes.
|
|
90
104
|
*/
|
|
91
105
|
layout?: true | 'position';
|
|
92
106
|
/**
|
|
93
107
|
* Fires when a row is clicked. Does not fire when the click originates from
|
|
94
|
-
* the drag handle. Clicks inside interactive children (buttons, links
|
|
95
|
-
* call `event.stopPropagation()` to avoid double-firing.
|
|
108
|
+
* the drag handle column. Clicks inside interactive children (buttons, links,
|
|
109
|
+
* inputs) should call `event.stopPropagation()` to avoid double-firing.
|
|
110
|
+
*
|
|
111
|
+
* @example
|
|
112
|
+
* onRowClick={(rowData, rowIndex) => navigate(`/items/${rowData.id}`)}
|
|
96
113
|
*/
|
|
97
114
|
onRowClick?: (rowData: T, rowIndex: number) => void;
|
|
98
115
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReorderableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAWrE
|
|
1
|
+
{"version":3,"file":"ReorderableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAWrE;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,iEAAiE;IACjE,KAAK,EAAE,SAAS,CAAA;IAChB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAA;CACxE;AAED;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CACtE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,wFAAwF;IACxF,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IACnC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IAChC,8FAA8F;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;;OAGG;IACH,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAA;IACpC,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uFAAuF;IACvF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,UAAU,CAAA;IAC1B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACpD;AAkQD,QAAA,MAAM,gBAAgB,EAAwC,CAC5D,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAEjC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACvE,KAAK,CAAC,YAAY,CACtB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReorderableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAc3D,OAAO,EACL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAA;AAE3B,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;CAC9B;AAyCD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,
|
|
1
|
+
{"version":3,"file":"ReorderableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAc3D,OAAO,EACL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAA;AAE3B,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;CAC9B;AAyCD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CA0EvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,OAAO,EAAE,KAkHrB,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,KAuL1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAsG3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA2G7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA0H1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkG3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAA"}
|
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
import { default as React, ReactNode } from 'react';
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* A single option in the {@link Select} dropdown.
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* const options: ISelectOption[] = [
|
|
7
|
+
* { value: 'a', label: 'Option A' },
|
|
8
|
+
* { value: 'b', label: 'Option B', disabled: true, icon: <Icon /> },
|
|
9
|
+
* ]
|
|
10
|
+
*/
|
|
11
|
+
export interface ISelectOption {
|
|
12
|
+
/** Unique value identifying the option. Passed to `onChange` when selected. */
|
|
13
|
+
value: string;
|
|
14
|
+
/** Visible label rendered inside the dropdown item and in the trigger when selected. */
|
|
15
|
+
label: ReactNode;
|
|
16
|
+
/** Prevents the option from being selected and applies disabled styling. @default false */
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
/** Icon rendered before the option label inside the dropdown. */
|
|
19
|
+
icon?: ReactNode;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Props for the Select component.
|
|
23
|
+
*/
|
|
3
24
|
export interface ISelectProps {
|
|
4
25
|
/** Label text displayed above the select trigger. */
|
|
5
26
|
label?: string;
|
|
@@ -7,13 +28,13 @@ export interface ISelectProps {
|
|
|
7
28
|
hint?: string;
|
|
8
29
|
/** Applies error styling to the trigger border and hint text. @default false */
|
|
9
30
|
error?: boolean;
|
|
10
|
-
/** Marks the field as required. */
|
|
31
|
+
/** Marks the field as required and shows an asterisk next to the label. @default false */
|
|
11
32
|
required?: boolean;
|
|
12
33
|
/** Hides the required asterisk even when `required` is true. @default false */
|
|
13
34
|
disableRequiredAsterisk?: boolean;
|
|
14
|
-
/** Element
|
|
35
|
+
/** Element rendered after the selected value inside the trigger. */
|
|
15
36
|
suffix?: ReactNode;
|
|
16
|
-
/** Icon or element
|
|
37
|
+
/** Icon or element rendered before the selected value inside the trigger. */
|
|
17
38
|
prefix?: ReactNode;
|
|
18
39
|
/** Text shown when no option is selected. @default translations.select.placeholder */
|
|
19
40
|
placeholder?: string;
|
|
@@ -22,35 +43,31 @@ export interface ISelectProps {
|
|
|
22
43
|
/** Controls trigger height and padding. @default 'base' */
|
|
23
44
|
size?: 'xs' | 'sm' | 'base' | 'lg';
|
|
24
45
|
/**
|
|
25
|
-
* Array of selectable
|
|
46
|
+
* Array of selectable options.
|
|
47
|
+
* @see ISelectOption
|
|
26
48
|
*
|
|
27
49
|
* @example
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
50
|
+
* <Select
|
|
51
|
+
* options={[
|
|
52
|
+
* { value: 'a', label: 'Option A' },
|
|
53
|
+
* { value: 'b', label: 'Option B', disabled: true, icon: <Icon /> },
|
|
54
|
+
* ]}
|
|
55
|
+
* />
|
|
34
56
|
*/
|
|
35
|
-
options:
|
|
36
|
-
value: string;
|
|
37
|
-
label: ReactNode;
|
|
38
|
-
disabled?: boolean;
|
|
39
|
-
icon?: ReactNode;
|
|
40
|
-
}>;
|
|
57
|
+
options: ISelectOption[];
|
|
41
58
|
/** Prevents interaction and applies disabled styling. @default false */
|
|
42
59
|
disabled?: boolean;
|
|
43
|
-
/**
|
|
60
|
+
/** Controlled selected value. Must match a `value` field in `options`. */
|
|
44
61
|
value?: string;
|
|
45
62
|
/** Fires when the selected value changes. Receives the new value string. */
|
|
46
63
|
onChange?: (value: string) => void;
|
|
47
64
|
/** Scrolls the dropdown to the selected option when opened. @default false */
|
|
48
65
|
shouldScrollToSelectedOption?: boolean;
|
|
49
|
-
/** Distance in pixels from viewport edge before the dropdown repositions. Passed to Radix collision padding. */
|
|
66
|
+
/** Distance in pixels from the viewport edge before the dropdown repositions. Passed to Radix collision padding. */
|
|
50
67
|
collisionPadding?: number;
|
|
51
|
-
/** Extra content rendered inline next to the label (e.g. a tooltip icon). */
|
|
68
|
+
/** Extra content rendered inline next to the label (e.g. a tooltip icon). Overrides `infoTooltip` when both are provided. */
|
|
52
69
|
labelExtra?: ReactNode;
|
|
53
|
-
/** Tooltip content shown in an info icon next to the label.
|
|
70
|
+
/** Tooltip content shown in an info icon next to the label. Ignored when `labelExtra` is provided. */
|
|
54
71
|
infoTooltip?: string;
|
|
55
72
|
}
|
|
56
73
|
export declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAed,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAed;;;;;;;;GAQG;AACH,MAAM,WAAW,aAAa;IAC5B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAA;IACb,wFAAwF;IACxF,KAAK,EAAE,SAAS,CAAA;IAChB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qGAAqG;IACrG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;;;;;;OAWG;IACH,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,8EAA8E;IAC9E,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC,oHAAoH;IACpH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,6HAA6H;IAC7H,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,MAAM,wFAyMlB,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Select, type ISelectProps } from './Select';
|
|
1
|
+
export { Select, type ISelectOption, type ISelectProps } from './Select';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAA"}
|