@wallarm-org/design-system 0.74.0 → 0.76.0-rc-fix-select-multiple-reopen-flake.1
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/Calendar/CalendarInputHeader.js +8 -4
- package/dist/components/FeedbackPulse/FeedbackPulse.d.ts +18 -0
- package/dist/components/FeedbackPulse/FeedbackPulse.js +300 -0
- package/dist/components/FeedbackPulse/FeedbackPulseProgress.d.ts +8 -0
- package/dist/components/FeedbackPulse/FeedbackPulseProgress.js +46 -0
- package/dist/components/FeedbackPulse/classes.d.ts +1 -0
- package/dist/components/FeedbackPulse/classes.js +4 -0
- package/dist/components/FeedbackPulse/index.d.ts +1 -0
- package/dist/components/FeedbackPulse/index.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/metadata/components.json +60 -2
- package/package.json +1 -1
|
@@ -48,12 +48,14 @@ const SingleDateInputInner = ({ api, readonly, showTime, timeRef, commitValue })
|
|
|
48
48
|
onChange: handleDateTimeChange,
|
|
49
49
|
readOnly: readonly,
|
|
50
50
|
granularity: "minute",
|
|
51
|
-
showTimeDropdown: true
|
|
51
|
+
showTimeDropdown: true,
|
|
52
|
+
showIcon: false
|
|
52
53
|
}) : /*#__PURE__*/ jsx(DateInput, {
|
|
53
54
|
value: inputValue,
|
|
54
55
|
onChange: handleChange,
|
|
55
56
|
readOnly: readonly,
|
|
56
|
-
granularity: "day"
|
|
57
|
+
granularity: "day",
|
|
58
|
+
showIcon: false
|
|
57
59
|
})
|
|
58
60
|
});
|
|
59
61
|
};
|
|
@@ -102,7 +104,8 @@ const RangeDateInputInner = ({ api, readonly })=>{
|
|
|
102
104
|
value: startValue,
|
|
103
105
|
onChange: handleStartChange,
|
|
104
106
|
readOnly: readonly,
|
|
105
|
-
granularity: "day"
|
|
107
|
+
granularity: "day",
|
|
108
|
+
showIcon: false
|
|
106
109
|
}),
|
|
107
110
|
/*#__PURE__*/ jsx("span", {
|
|
108
111
|
className: "flex items-center justify-center shrink-0 basis-20 font-sans text-sm leading-sm text-text-secondary",
|
|
@@ -113,7 +116,8 @@ const RangeDateInputInner = ({ api, readonly })=>{
|
|
|
113
116
|
value: endValue,
|
|
114
117
|
onChange: handleEndChange,
|
|
115
118
|
readOnly: readonly,
|
|
116
|
-
granularity: "day"
|
|
119
|
+
granularity: "day",
|
|
120
|
+
showIcon: false
|
|
117
121
|
})
|
|
118
122
|
]
|
|
119
123
|
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { type FC, type Ref } from 'react';
|
|
2
|
+
import type { TestableProps } from '../../utils/testId';
|
|
3
|
+
export type FeedbackPulseCloseReason = 'submit' | 'dismiss';
|
|
4
|
+
export interface FeedbackPulseProps extends TestableProps {
|
|
5
|
+
open: boolean;
|
|
6
|
+
onOpenChange: (open: boolean, reason?: FeedbackPulseCloseReason) => void;
|
|
7
|
+
onSubmit: (result: {
|
|
8
|
+
score: number;
|
|
9
|
+
comment?: string;
|
|
10
|
+
}) => void;
|
|
11
|
+
question?: string;
|
|
12
|
+
scaleLabels?: readonly [string, string];
|
|
13
|
+
showComment?: boolean;
|
|
14
|
+
dismissDuration?: number;
|
|
15
|
+
confirmationText?: string;
|
|
16
|
+
ref?: Ref<HTMLDivElement>;
|
|
17
|
+
}
|
|
18
|
+
export declare const FeedbackPulse: FC<FeedbackPulseProps>;
|
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
3
|
+
import { Portal } from "@ark-ui/react/portal";
|
|
4
|
+
import { Presence } from "@ark-ui/react/presence";
|
|
5
|
+
import { Check, X } from "../../icons/index.js";
|
|
6
|
+
import { cn } from "../../utils/cn.js";
|
|
7
|
+
import { Button } from "../Button/index.js";
|
|
8
|
+
import { Textarea } from "../Textarea/index.js";
|
|
9
|
+
import { ToggleButton } from "../ToggleButton/index.js";
|
|
10
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
|
|
11
|
+
import { feedbackPulseVariants } from "./classes.js";
|
|
12
|
+
import { FeedbackPulseProgress } from "./FeedbackPulseProgress.js";
|
|
13
|
+
const DEFAULT_QUESTION = 'How easy was it to use this feature?';
|
|
14
|
+
const DEFAULT_LABELS = [
|
|
15
|
+
'Very difficult',
|
|
16
|
+
'Very easy'
|
|
17
|
+
];
|
|
18
|
+
const DEFAULT_CONFIRMATION = 'Thanks a lot! — Wallarm Team';
|
|
19
|
+
const DEFAULT_DISMISS_MS = 5000;
|
|
20
|
+
const SCORES = [
|
|
21
|
+
1,
|
|
22
|
+
2,
|
|
23
|
+
3,
|
|
24
|
+
4,
|
|
25
|
+
5
|
|
26
|
+
];
|
|
27
|
+
const FeedbackPulse = ({ open, onOpenChange, onSubmit, question = DEFAULT_QUESTION, scaleLabels = DEFAULT_LABELS, showComment = true, dismissDuration = DEFAULT_DISMISS_MS, confirmationText = DEFAULT_CONFIRMATION, 'data-testid': testId, ref })=>{
|
|
28
|
+
const [phase, setPhase] = useState('rating');
|
|
29
|
+
const [score, setScore] = useState(null);
|
|
30
|
+
const [comment, setComment] = useState('');
|
|
31
|
+
const [paused, setPaused] = useState(false);
|
|
32
|
+
const [revealDone, setRevealDone] = useState(false);
|
|
33
|
+
const scaleRef = useRef(null);
|
|
34
|
+
const submittedCloseRef = useRef(null);
|
|
35
|
+
const cardRef = useRef(null);
|
|
36
|
+
const morphFromRef = useRef(null);
|
|
37
|
+
const setCardRef = useCallback((node)=>{
|
|
38
|
+
cardRef.current = node;
|
|
39
|
+
if ('function' == typeof ref) ref(node);
|
|
40
|
+
else if (ref) ref.current = node;
|
|
41
|
+
}, [
|
|
42
|
+
ref
|
|
43
|
+
]);
|
|
44
|
+
useEffect(()=>{
|
|
45
|
+
if (open) {
|
|
46
|
+
setPhase('rating');
|
|
47
|
+
setScore(null);
|
|
48
|
+
setComment('');
|
|
49
|
+
setPaused(false);
|
|
50
|
+
}
|
|
51
|
+
}, [
|
|
52
|
+
open
|
|
53
|
+
]);
|
|
54
|
+
useEffect(()=>{
|
|
55
|
+
if ('submitted' === phase) submittedCloseRef.current?.focus();
|
|
56
|
+
}, [
|
|
57
|
+
phase
|
|
58
|
+
]);
|
|
59
|
+
useEffect(()=>{
|
|
60
|
+
if ('feedback' !== phase) return void setRevealDone(false);
|
|
61
|
+
const timer = setTimeout(()=>setRevealDone(true), 250);
|
|
62
|
+
return ()=>clearTimeout(timer);
|
|
63
|
+
}, [
|
|
64
|
+
phase
|
|
65
|
+
]);
|
|
66
|
+
useLayoutEffect(()=>{
|
|
67
|
+
const el = cardRef.current;
|
|
68
|
+
const from = morphFromRef.current;
|
|
69
|
+
morphFromRef.current = null;
|
|
70
|
+
if (!el || 'submitted' !== phase || null == from) return;
|
|
71
|
+
const prefersReduced = "u" > typeof window && 'function' == typeof window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
72
|
+
const to = el.getBoundingClientRect().height;
|
|
73
|
+
if (prefersReduced || Math.abs(from - to) < 1) return;
|
|
74
|
+
el.style.height = `${from}px`;
|
|
75
|
+
const ac = new AbortController();
|
|
76
|
+
const raf = requestAnimationFrame(()=>{
|
|
77
|
+
el.style.transition = 'height 200ms ease-out';
|
|
78
|
+
el.style.height = `${to}px`;
|
|
79
|
+
});
|
|
80
|
+
let failsafe = 0;
|
|
81
|
+
const reset = ()=>{
|
|
82
|
+
cancelAnimationFrame(raf);
|
|
83
|
+
clearTimeout(failsafe);
|
|
84
|
+
ac.abort();
|
|
85
|
+
el.style.height = '';
|
|
86
|
+
el.style.transition = '';
|
|
87
|
+
};
|
|
88
|
+
failsafe = window.setTimeout(reset, 400);
|
|
89
|
+
el.addEventListener('transitionend', (e)=>{
|
|
90
|
+
if ('height' === e.propertyName) reset();
|
|
91
|
+
}, {
|
|
92
|
+
signal: ac.signal
|
|
93
|
+
});
|
|
94
|
+
return reset;
|
|
95
|
+
}, [
|
|
96
|
+
phase
|
|
97
|
+
]);
|
|
98
|
+
const tid = (slot)=>testId ? `${testId}--${slot}` : void 0;
|
|
99
|
+
const handleSelect = (value)=>{
|
|
100
|
+
setScore(value);
|
|
101
|
+
setPhase('feedback');
|
|
102
|
+
};
|
|
103
|
+
const handleScaleKeyDown = (e)=>{
|
|
104
|
+
const current = score ?? 1;
|
|
105
|
+
let next = null;
|
|
106
|
+
if ('ArrowRight' === e.key || 'ArrowUp' === e.key) next = Math.min(current + 1, 5);
|
|
107
|
+
else if ('ArrowLeft' === e.key || 'ArrowDown' === e.key) next = Math.max(current - 1, 1);
|
|
108
|
+
if (null != next) {
|
|
109
|
+
e.preventDefault();
|
|
110
|
+
handleSelect(next);
|
|
111
|
+
scaleRef.current?.querySelector(`[data-score="${next}"]`)?.focus();
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
const handleSend = ()=>{
|
|
115
|
+
if (null == score) return;
|
|
116
|
+
const trimmed = comment.trim();
|
|
117
|
+
morphFromRef.current = cardRef.current?.getBoundingClientRect().height ?? null;
|
|
118
|
+
onSubmit({
|
|
119
|
+
score,
|
|
120
|
+
comment: trimmed ? trimmed : void 0
|
|
121
|
+
});
|
|
122
|
+
setPhase('submitted');
|
|
123
|
+
};
|
|
124
|
+
useEffect(()=>{
|
|
125
|
+
if (!open || 'submitted' === phase) return;
|
|
126
|
+
const handleEscape = (e)=>{
|
|
127
|
+
if ('Escape' === e.key) onOpenChange(false, 'dismiss');
|
|
128
|
+
};
|
|
129
|
+
document.addEventListener('keydown', handleEscape);
|
|
130
|
+
return ()=>document.removeEventListener('keydown', handleEscape);
|
|
131
|
+
}, [
|
|
132
|
+
open,
|
|
133
|
+
phase,
|
|
134
|
+
onOpenChange
|
|
135
|
+
]);
|
|
136
|
+
return /*#__PURE__*/ jsx(Portal, {
|
|
137
|
+
children: /*#__PURE__*/ jsx(Presence, {
|
|
138
|
+
present: open,
|
|
139
|
+
asChild: true,
|
|
140
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
141
|
+
ref: setCardRef,
|
|
142
|
+
"data-slot": "feedback-pulse",
|
|
143
|
+
"data-testid": testId,
|
|
144
|
+
role: "dialog",
|
|
145
|
+
"aria-label": question,
|
|
146
|
+
className: feedbackPulseVariants(),
|
|
147
|
+
onMouseEnter: ()=>setPaused(true),
|
|
148
|
+
onMouseLeave: ()=>setPaused(false),
|
|
149
|
+
children: 'submitted' === phase ? /*#__PURE__*/ jsxs(Fragment, {
|
|
150
|
+
children: [
|
|
151
|
+
/*#__PURE__*/ jsx(FeedbackPulseProgress, {
|
|
152
|
+
duration: dismissDuration,
|
|
153
|
+
paused: paused,
|
|
154
|
+
onComplete: ()=>onOpenChange(false, 'submit'),
|
|
155
|
+
"data-testid": tid('progress')
|
|
156
|
+
}),
|
|
157
|
+
/*#__PURE__*/ jsxs("div", {
|
|
158
|
+
className: "relative z-10 flex items-center gap-8",
|
|
159
|
+
"aria-live": "polite",
|
|
160
|
+
children: [
|
|
161
|
+
/*#__PURE__*/ jsx(Check, {
|
|
162
|
+
size: "md",
|
|
163
|
+
className: "shrink-0 text-icon-success"
|
|
164
|
+
}),
|
|
165
|
+
/*#__PURE__*/ jsx("span", {
|
|
166
|
+
className: "flex-1 text-sm font-medium text-text-primary",
|
|
167
|
+
children: confirmationText
|
|
168
|
+
}),
|
|
169
|
+
/*#__PURE__*/ jsxs(Tooltip, {
|
|
170
|
+
children: [
|
|
171
|
+
/*#__PURE__*/ jsx(TooltipTrigger, {
|
|
172
|
+
asChild: true,
|
|
173
|
+
children: /*#__PURE__*/ jsx(Button, {
|
|
174
|
+
ref: submittedCloseRef,
|
|
175
|
+
variant: "ghost",
|
|
176
|
+
color: "neutral",
|
|
177
|
+
size: "small",
|
|
178
|
+
"aria-label": "Close",
|
|
179
|
+
"data-testid": tid('close'),
|
|
180
|
+
onClick: ()=>onOpenChange(false, 'submit'),
|
|
181
|
+
children: /*#__PURE__*/ jsx(X, {})
|
|
182
|
+
})
|
|
183
|
+
}),
|
|
184
|
+
/*#__PURE__*/ jsx(TooltipContent, {
|
|
185
|
+
children: "Close"
|
|
186
|
+
})
|
|
187
|
+
]
|
|
188
|
+
})
|
|
189
|
+
]
|
|
190
|
+
})
|
|
191
|
+
]
|
|
192
|
+
}) : /*#__PURE__*/ jsxs(Fragment, {
|
|
193
|
+
children: [
|
|
194
|
+
/*#__PURE__*/ jsxs("div", {
|
|
195
|
+
className: "flex items-start justify-between gap-8",
|
|
196
|
+
children: [
|
|
197
|
+
/*#__PURE__*/ jsx("span", {
|
|
198
|
+
className: "flex-1 text-sm font-medium text-text-primary",
|
|
199
|
+
children: question
|
|
200
|
+
}),
|
|
201
|
+
/*#__PURE__*/ jsxs(Tooltip, {
|
|
202
|
+
children: [
|
|
203
|
+
/*#__PURE__*/ jsx(TooltipTrigger, {
|
|
204
|
+
asChild: true,
|
|
205
|
+
children: /*#__PURE__*/ jsx(Button, {
|
|
206
|
+
variant: "ghost",
|
|
207
|
+
color: "neutral",
|
|
208
|
+
size: "small",
|
|
209
|
+
"aria-label": "Close",
|
|
210
|
+
"data-testid": tid('close'),
|
|
211
|
+
onClick: ()=>onOpenChange(false, 'dismiss'),
|
|
212
|
+
children: /*#__PURE__*/ jsx(X, {})
|
|
213
|
+
})
|
|
214
|
+
}),
|
|
215
|
+
/*#__PURE__*/ jsx(TooltipContent, {
|
|
216
|
+
children: "Close"
|
|
217
|
+
})
|
|
218
|
+
]
|
|
219
|
+
})
|
|
220
|
+
]
|
|
221
|
+
}),
|
|
222
|
+
/*#__PURE__*/ jsxs("div", {
|
|
223
|
+
children: [
|
|
224
|
+
/*#__PURE__*/ jsxs("div", {
|
|
225
|
+
className: "flex flex-col gap-4",
|
|
226
|
+
children: [
|
|
227
|
+
/*#__PURE__*/ jsx("div", {
|
|
228
|
+
ref: scaleRef,
|
|
229
|
+
role: "radiogroup",
|
|
230
|
+
"aria-label": question,
|
|
231
|
+
"data-testid": tid('scale'),
|
|
232
|
+
className: "flex gap-8",
|
|
233
|
+
onKeyDown: handleScaleKeyDown,
|
|
234
|
+
children: SCORES.map((n)=>/*#__PURE__*/ jsx(ToggleButton, {
|
|
235
|
+
variant: "outline",
|
|
236
|
+
color: "neutral",
|
|
237
|
+
size: "small",
|
|
238
|
+
fullWidth: true,
|
|
239
|
+
active: score === n,
|
|
240
|
+
role: "radio",
|
|
241
|
+
"aria-checked": score === n,
|
|
242
|
+
"aria-label": String(n),
|
|
243
|
+
"data-score": n,
|
|
244
|
+
"data-testid": tid(`score-${n}`),
|
|
245
|
+
tabIndex: score === n || null == score && 1 === n ? 0 : -1,
|
|
246
|
+
onToggle: ()=>handleSelect(n),
|
|
247
|
+
children: n
|
|
248
|
+
}, n))
|
|
249
|
+
}),
|
|
250
|
+
/*#__PURE__*/ jsxs("div", {
|
|
251
|
+
className: "flex justify-between",
|
|
252
|
+
children: [
|
|
253
|
+
/*#__PURE__*/ jsx("span", {
|
|
254
|
+
className: "text-sm font-normal text-text-secondary",
|
|
255
|
+
children: scaleLabels[0]
|
|
256
|
+
}),
|
|
257
|
+
/*#__PURE__*/ jsx("span", {
|
|
258
|
+
className: "text-sm font-normal text-text-secondary",
|
|
259
|
+
children: scaleLabels[1]
|
|
260
|
+
})
|
|
261
|
+
]
|
|
262
|
+
})
|
|
263
|
+
]
|
|
264
|
+
}),
|
|
265
|
+
/*#__PURE__*/ jsx("div", {
|
|
266
|
+
inert: 'feedback' !== phase,
|
|
267
|
+
className: cn('grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none', 'feedback' === phase ? 'mt-8 grid-rows-[1fr]' : 'grid-rows-[0fr]'),
|
|
268
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
269
|
+
className: cn('flex flex-col gap-8', revealDone ? 'overflow-visible' : 'overflow-hidden'),
|
|
270
|
+
children: [
|
|
271
|
+
showComment && /*#__PURE__*/ jsx(Textarea, {
|
|
272
|
+
placeholder: "Tell us why? (optional)",
|
|
273
|
+
value: comment,
|
|
274
|
+
onChange: (e)=>setComment(e.target.value),
|
|
275
|
+
"data-testid": tid('comment')
|
|
276
|
+
}),
|
|
277
|
+
/*#__PURE__*/ jsx("div", {
|
|
278
|
+
className: "flex justify-end",
|
|
279
|
+
children: /*#__PURE__*/ jsx(Button, {
|
|
280
|
+
variant: "primary",
|
|
281
|
+
color: "brand",
|
|
282
|
+
size: "medium",
|
|
283
|
+
"data-testid": tid('send'),
|
|
284
|
+
onClick: handleSend,
|
|
285
|
+
children: "Send"
|
|
286
|
+
})
|
|
287
|
+
})
|
|
288
|
+
]
|
|
289
|
+
})
|
|
290
|
+
})
|
|
291
|
+
]
|
|
292
|
+
})
|
|
293
|
+
]
|
|
294
|
+
})
|
|
295
|
+
})
|
|
296
|
+
})
|
|
297
|
+
});
|
|
298
|
+
};
|
|
299
|
+
FeedbackPulse.displayName = 'FeedbackPulse';
|
|
300
|
+
export { FeedbackPulse };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
|
3
|
+
import { cn } from "../../utils/cn.js";
|
|
4
|
+
const FeedbackPulseProgress = ({ duration, paused = false, onComplete, 'data-testid': testId })=>{
|
|
5
|
+
const [progress, setProgress] = useState(0);
|
|
6
|
+
const elapsedRef = useRef(0);
|
|
7
|
+
const lastTickRef = useRef(0);
|
|
8
|
+
const rafRef = useRef(0);
|
|
9
|
+
const pausedRef = useRef(paused);
|
|
10
|
+
const onCompleteRef = useRef(onComplete);
|
|
11
|
+
pausedRef.current = paused;
|
|
12
|
+
onCompleteRef.current = onComplete;
|
|
13
|
+
useEffect(()=>{
|
|
14
|
+
lastTickRef.current = performance.now();
|
|
15
|
+
let done = false;
|
|
16
|
+
const tick = (now)=>{
|
|
17
|
+
if (!pausedRef.current) elapsedRef.current += now - lastTickRef.current;
|
|
18
|
+
lastTickRef.current = now;
|
|
19
|
+
const fraction = Math.min(elapsedRef.current / duration, 1);
|
|
20
|
+
setProgress(fraction);
|
|
21
|
+
if (fraction < 1) rafRef.current = requestAnimationFrame(tick);
|
|
22
|
+
else if (!done) {
|
|
23
|
+
done = true;
|
|
24
|
+
onCompleteRef.current();
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
rafRef.current = requestAnimationFrame(tick);
|
|
28
|
+
return ()=>cancelAnimationFrame(rafRef.current);
|
|
29
|
+
}, [
|
|
30
|
+
duration
|
|
31
|
+
]);
|
|
32
|
+
return /*#__PURE__*/ jsx("div", {
|
|
33
|
+
"aria-hidden": true,
|
|
34
|
+
"data-slot": "feedback-pulse-progress",
|
|
35
|
+
"data-testid": testId,
|
|
36
|
+
className: cn('pointer-events-none absolute inset-0 overflow-hidden rounded-12'),
|
|
37
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
38
|
+
className: "h-full bg-states-primary-default-alt transition-none",
|
|
39
|
+
style: {
|
|
40
|
+
width: `${100 * progress}%`
|
|
41
|
+
}
|
|
42
|
+
})
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
FeedbackPulseProgress.displayName = 'FeedbackPulseProgress';
|
|
46
|
+
export { FeedbackPulseProgress };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const feedbackPulseVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { cva } from "class-variance-authority";
|
|
2
|
+
import { cn } from "../../utils/cn.js";
|
|
3
|
+
const feedbackPulseVariants = cva(cn('fixed bottom-24 right-24 z-50 w-[400px] max-w-[calc(100vw-32px)]', 'flex flex-col gap-8 overflow-hidden p-12', 'rounded-12 border border-border-primary-light bg-bg-surface-2 text-text-primary shadow-md', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom data-[state=open]:duration-300', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom data-[state=closed]:duration-150', 'motion-reduce:animate-none motion-reduce:transition-none'));
|
|
4
|
+
export { feedbackPulseVariants };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { FeedbackPulse, type FeedbackPulseCloseReason, type FeedbackPulseProps, } from './FeedbackPulse';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { FeedbackPulse } from "./FeedbackPulse.js";
|
package/dist/index.d.ts
CHANGED
|
@@ -31,6 +31,7 @@ export { DateRangeEndValue, DateRangeInput, type DateRangeInputProps, DateRangeP
|
|
|
31
31
|
export { Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerFooter, DrawerFooterControls, type DrawerFooterControlsProps, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerPositioner, type DrawerPositionerProps, type DrawerProps, DrawerResizeHandle, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, drawerContentVariants, drawerPositionerVariants, useDrawerContext, } from './components/Drawer';
|
|
32
32
|
export { DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, } from './components/DropdownMenu';
|
|
33
33
|
export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustration, EmptyStateLink, EmptyStateMessage, EmptyStateTitle, } from './components/EmptyState';
|
|
34
|
+
export { FeedbackPulse, type FeedbackPulseCloseReason, type FeedbackPulseProps, } from './components/FeedbackPulse';
|
|
34
35
|
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from './components/Field';
|
|
35
36
|
export { type Condition, type ExprNode, type FieldMetadata, type FieldType, FilterInput, FilterInputChip, type FilterInputChipData, type FilterInputChipProps, type FilterInputChipVariant, FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, type FilterInputProps, type FilterOperator, type Group, } from './components/FilterInput';
|
|
36
37
|
export { Flex, type FlexProps } from './components/Flex';
|
package/dist/index.js
CHANGED
|
@@ -20,6 +20,7 @@ export { DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparato
|
|
|
20
20
|
export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, drawerContentVariants, drawerPositionerVariants, useDrawerContext } from "./components/Drawer/index.js";
|
|
21
21
|
export { DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem } from "./components/DropdownMenu/index.js";
|
|
22
22
|
export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustration, EmptyStateLink, EmptyStateMessage, EmptyStateTitle } from "./components/EmptyState/index.js";
|
|
23
|
+
export { FeedbackPulse } from "./components/FeedbackPulse/index.js";
|
|
23
24
|
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./components/Field/index.js";
|
|
24
25
|
export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu } from "./components/FilterInput/index.js";
|
|
25
26
|
export { Flex } from "./components/Flex/index.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
3
|
-
"generatedAt": "2026-07-
|
|
2
|
+
"version": "0.75.0",
|
|
3
|
+
"generatedAt": "2026-07-15T10:08:00.577Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -29672,6 +29672,59 @@
|
|
|
29672
29672
|
}
|
|
29673
29673
|
]
|
|
29674
29674
|
},
|
|
29675
|
+
{
|
|
29676
|
+
"name": "FeedbackPulse",
|
|
29677
|
+
"importPath": "@wallarm-org/design-system/FeedbackPulse",
|
|
29678
|
+
"props": [
|
|
29679
|
+
{
|
|
29680
|
+
"name": "open",
|
|
29681
|
+
"type": "boolean",
|
|
29682
|
+
"required": true
|
|
29683
|
+
},
|
|
29684
|
+
{
|
|
29685
|
+
"name": "question",
|
|
29686
|
+
"type": "string | undefined",
|
|
29687
|
+
"required": false,
|
|
29688
|
+
"defaultValue": "DEFAULT_QUESTION"
|
|
29689
|
+
},
|
|
29690
|
+
{
|
|
29691
|
+
"name": "scaleLabels",
|
|
29692
|
+
"type": "readonly [string, string] | undefined",
|
|
29693
|
+
"required": false,
|
|
29694
|
+
"defaultValue": "DEFAULT_LABELS"
|
|
29695
|
+
},
|
|
29696
|
+
{
|
|
29697
|
+
"name": "showComment",
|
|
29698
|
+
"type": "boolean | undefined",
|
|
29699
|
+
"required": false,
|
|
29700
|
+
"defaultValue": "true"
|
|
29701
|
+
},
|
|
29702
|
+
{
|
|
29703
|
+
"name": "dismissDuration",
|
|
29704
|
+
"type": "number | undefined",
|
|
29705
|
+
"required": false,
|
|
29706
|
+
"defaultValue": "DEFAULT_DISMISS_MS"
|
|
29707
|
+
},
|
|
29708
|
+
{
|
|
29709
|
+
"name": "confirmationText",
|
|
29710
|
+
"type": "string | undefined",
|
|
29711
|
+
"required": false,
|
|
29712
|
+
"defaultValue": "DEFAULT_CONFIRMATION"
|
|
29713
|
+
}
|
|
29714
|
+
],
|
|
29715
|
+
"variants": [],
|
|
29716
|
+
"subComponents": [],
|
|
29717
|
+
"examples": [
|
|
29718
|
+
{
|
|
29719
|
+
"name": "Playground",
|
|
29720
|
+
"code": "args => {\n const [open, setOpen] = useState(true);\n return (\n <div\n style={{\n display: 'flex',\n minHeight: '100vh',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <Button variant='outline' color='neutral' onClick={() => setOpen(true)}>\n Show FeedbackPulse\n </Button>\n <FeedbackPulse\n {...args}\n open={open}\n onOpenChange={next => setOpen(next)}\n onSubmit={r => console.log('submitted', r)}\n data-testid='feedback-pulse'\n />\n </div>\n );\n}"
|
|
29721
|
+
},
|
|
29722
|
+
{
|
|
29723
|
+
"name": "Rating",
|
|
29724
|
+
"code": "() => (\n <div style={{ minHeight: '100vh' }}>\n <FeedbackPulse open onOpenChange={() => {}} onSubmit={() => {}} data-testid='feedback-pulse' />\n </div>\n)"
|
|
29725
|
+
}
|
|
29726
|
+
]
|
|
29727
|
+
},
|
|
29675
29728
|
{
|
|
29676
29729
|
"name": "Field",
|
|
29677
29730
|
"importPath": "@wallarm-org/design-system/Field",
|
|
@@ -34352,6 +34405,11 @@
|
|
|
34352
34405
|
"code": "args => {\n const [dateTime, setDateTime] = useState<CalendarDateTime | null>(\n new CalendarDateTime(2026, 6, 15, 14, 30),\n );\n const dateTimeLabel = dateTime\n ? format(\n new Date(dateTime.year, dateTime.month - 1, dateTime.day, dateTime.hour, dateTime.minute),\n 'd MMM, yyyy h:mm a',\n )\n : '—';\n return (\n <div className='w-[320px]'>\n <DateFormatProvider order='day-first' hourCycle={12}>\n <Attribute>\n <AttributeLabel>Date & Time</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n value={dateTime}\n onValueCommit={v => setDateTime(v as CalendarDateTime | null)}\n data-testid='datetime'\n >\n <InlineEditPreview>\n <InlineEditPreviewValue>{dateTimeLabel}</InlineEditPreviewValue>\n <InlineEditPreviewIcon>\n <Calendar size='md' />\n </InlineEditPreviewIcon>\n </InlineEditPreview>\n <InlineEditControl>\n <InlineEditDateTime>\n <CalendarTrigger>\n <DateInputTrigger granularity='minute' />\n </CalendarTrigger>\n <CalendarContent>\n <CalendarBody>\n <CalendarInputHeader />\n <CalendarGrids />\n </CalendarBody>\n </CalendarContent>\n </InlineEditDateTime>\n </InlineEditControl>\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n </DateFormatProvider>\n </div>\n );\n}",
|
|
34353
34406
|
"description": "`InlineEditDateTime` in isolation."
|
|
34354
34407
|
},
|
|
34408
|
+
{
|
|
34409
|
+
"name": "HorizontalLayout",
|
|
34410
|
+
"code": "args => {\n const [name, setName] = useState('Checkout API');\n const [role, setRole] = useState<string[]>(['editor']);\n const roleLabel = roleItems.find(i => i.value === (role[0] ?? ''))?.label ?? '';\n return (\n <div className='flex w-[420px] flex-col gap-8'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Name</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n value={name}\n onValueCommit={v => setName(v as string)}\n data-testid='horizontal-text'\n >\n <InlineEditPreview>{name}</InlineEditPreview>\n <InlineEditControl>\n <InlineEditInput aria-label='Name' />\n </InlineEditControl>\n <InlineEditError />\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Role</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n value={role}\n onValueCommit={v => setRole(v as string[])}\n data-testid='horizontal-select'\n >\n <InlineEditPreview>\n <InlineEditPreviewValue>{roleLabel}</InlineEditPreviewValue>\n <InlineEditPreviewIcon>\n <ChevronDown size='md' />\n </InlineEditPreviewIcon>\n </InlineEditPreview>\n <InlineEditControl>\n <InlineEditSelect items={roleItems}>\n <SelectButton size='inline-edit' />\n <SelectPositioner>\n <SelectContent>{renderSelectOptions(roleItems)}</SelectContent>\n </SelectPositioner>\n </InlineEditSelect>\n </InlineEditControl>\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n </div>\n );\n}",
|
|
34411
|
+
"description": "`InlineEdit` inside a horizontal `Attribute` — label on the left, value/editor on the right."
|
|
34412
|
+
},
|
|
34355
34413
|
{
|
|
34356
34414
|
"name": "States",
|
|
34357
34415
|
"code": "args => (\n <div className='flex w-[420px] flex-col gap-12'>\n <Attribute>\n <AttributeLabel>Name</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n defaultValue='Checkout API and ABC'\n status='loading'\n data-testid='loading'\n >\n <InlineEditPreview>Checkout API and ABC</InlineEditPreview>\n <InlineEditControl>\n <InlineEditInput />\n </InlineEditControl>\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Name</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n defaultValue='Checkout API and ABC'\n status='saved'\n data-testid='saved'\n >\n <InlineEditPreview>Checkout API and ABC</InlineEditPreview>\n <InlineEditControl>\n <InlineEditInput />\n </InlineEditControl>\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Name</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n defaultValue='Checkout API and ABC'\n defaultEdit\n status='error'\n data-testid='error'\n >\n <InlineEditPreview>Checkout API and ABC</InlineEditPreview>\n <InlineEditControl>\n <InlineEditInput />\n </InlineEditControl>\n <InlineEditError>An error message.</InlineEditError>\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n </div>\n)",
|
package/package.json
CHANGED