wimui 0.58.0 → 0.59.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/ai/PromptInput/PromptInput.cjs +1 -1
- package/dist/components/ai/PromptInput/PromptInput.js +30 -30
- package/dist/components/ai/Terminal/Terminal.cjs +2 -2
- package/dist/components/ai/Terminal/Terminal.js +16 -14
- package/dist/components/data-display/VirtualList/VirtualList.cjs +1 -1
- package/dist/components/data-display/VirtualList/VirtualList.d.ts +2 -0
- package/dist/components/data-display/VirtualList/VirtualList.js +15 -14
- package/dist/components/form/CopyButton/CopyButton.cjs +1 -1
- package/dist/components/form/CopyButton/CopyButton.d.ts +5 -1
- package/dist/components/form/CopyButton/CopyButton.js +17 -15
- package/dist/components/form/Dropzone/Dropzone.cjs +1 -1
- package/dist/components/form/Dropzone/Dropzone.d.ts +7 -1
- package/dist/components/form/Dropzone/Dropzone.js +29 -28
- package/dist/components/form/FileUpload/FileUpload.cjs +1 -1
- package/dist/components/form/FileUpload/FileUpload.d.ts +7 -1
- package/dist/components/form/FileUpload/FileUpload.js +22 -17
- package/dist/components/form/ImageCropper/ImageCropper.cjs +1 -1
- package/dist/components/form/ImageCropper/ImageCropper.js +102 -100
- package/dist/components/form/InlineEdit/InlineEdit.cjs +1 -1
- package/dist/components/form/InlineEdit/InlineEdit.js +62 -60
- package/dist/components/form/QueryBuilder/QueryBuilder.cjs +1 -1
- package/dist/components/form/QueryBuilder/QueryBuilder.d.ts +7 -1
- package/dist/components/form/QueryBuilder/QueryBuilder.js +104 -102
- package/dist/components/form/ThemeToggle/ThemeToggle.cjs +1 -1
- package/dist/components/form/ThemeToggle/ThemeToggle.js +59 -54
- package/dist/components/media/ImageCompare/ImageCompare.cjs +1 -1
- package/dist/components/media/ImageCompare/ImageCompare.js +33 -31
- package/dist/components/navigation/BackTop/BackTop.cjs +1 -1
- package/dist/components/navigation/BackTop/BackTop.d.ts +4 -0
- package/dist/components/navigation/BackTop/BackTop.js +18 -16
- package/dist/llms-full.txt +15 -1
- package/dist/llms.txt +1 -1
- package/dist/wimui.umd.js +4 -4
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/paperclip.cjs"),r=require("../../../icon/send.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../../form/FieldTemplate/FieldTemplate.cjs"),s=require("../../../hooks/useAutoResize.cjs"),c=require("../../_internal/FieldCharacterCount/FieldCharacterCount.cjs"),l=require("./prompt-input.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=u.default.forwardRef(({value:e,defaultValue:p=``,onChange:m,onSubmit:h,placeholder:g,maxLength:_,disabled:v=!1,loading:y=!1,showAttach:b=!1,onAttach:x,maxRows:S=8,fullWidth:C=!1,className:w,style:T,label:E,error:D,required:O,layout:k,id:A,...
|
|
2
|
+
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/paperclip.cjs"),r=require("../../../icon/send.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../../form/FieldTemplate/FieldTemplate.cjs"),s=require("../../../hooks/useAutoResize.cjs"),c=require("../../_internal/FieldCharacterCount/FieldCharacterCount.cjs"),l=require("./prompt-input.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=u.default.forwardRef(({value:e,defaultValue:p=``,onChange:m,onSubmit:h,placeholder:g,maxLength:_,disabled:v=!1,loading:y=!1,showAttach:b=!1,onAttach:x,maxRows:S=8,fullWidth:C=!1,className:w,style:T,label:E,error:D,required:O,layout:k,id:A,"aria-label":j,"aria-labelledby":M,"aria-describedby":N,...P},F)=>{let{t:I}=t.useWimTranslation(a.formNs),L=e!==void 0,[R,z]=u.default.useState(p),B=L?e:R,V=s.useAutoResize(B,S);u.default.useImperativeHandle(F,()=>V.current);let H=g,U=u.default.useId(),W=A||`prompt-input-${U}`,G=D?`${W}-error`:void 0,K=E?`${W}-label`:void 0,q=(0,u.useCallback)(e=>{let t=e.target.value;L||z(t),m?.(t)},[L,m]),J=(0,u.useCallback)(()=>{!B.trim()||v||y||(h?.(B.trim()),L||z(``))},[B,v,y,L,h]),Y=(0,u.useCallback)(e=>{e.key===`Enter`&&!e.shiftKey&&(e.preventDefault(),J())},[J]),X=B.trim().length>0&&!v&&!y;return(0,f.jsx)(o.FieldTemplate,{label:E,error:D,required:O,layout:k,labelId:K,htmlFor:W,errorId:G,className:w,style:C?{width:`100%`,minWidth:0,...T}:T,children:(0,f.jsxs)(`div`,{className:(0,d.default)(`wim-prompt-input`,l.default.root,{[l.default.disabled]:v,[l.default.loading]:y,[l.default.fullWidth]:C,[l.default.danger]:!!D}),...P,children:[(0,f.jsxs)(`div`,{className:(0,d.default)(l.default.inputArea,{[l.default.noAttach]:!b}),children:[b&&(0,f.jsx)(`button`,{type:`button`,className:l.default.actionButton,onClick:x,"aria-label":I(`prompt_input.attach_label`),disabled:v||y,children:(0,f.jsx)(i.Icon,{component:n.default,size:`md`})}),(0,f.jsx)(`textarea`,{id:W,ref:V,className:l.default.textarea,value:B,onChange:q,onKeyDown:Y,placeholder:H,rows:1,disabled:v||y,maxLength:_,"aria-invalid":!!D,"aria-describedby":[N,G].filter(Boolean).join(` `)||void 0,"aria-labelledby":E?K:M,"aria-label":E||M?void 0:j??I(`prompt_input.aria_label`),"aria-required":O}),(0,f.jsx)(`button`,{type:`button`,className:(0,d.default)(l.default.actionButton,l.default.sendButton),onClick:J,disabled:!X,"aria-label":I(`prompt_input.send_label`),children:(0,f.jsx)(i.Icon,{component:r.default,size:`md`})})]}),(0,f.jsx)(c.FieldCharacterCount,{count:B.length,maxLength:_,className:l.default.charCount})]})})});p.displayName=`PromptInput`,exports.PromptInput=p;
|
|
@@ -12,31 +12,31 @@ import l, { useCallback as u } from "react";
|
|
|
12
12
|
import d from "classnames";
|
|
13
13
|
import { jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
14
14
|
//#region src/components/ai/PromptInput/PromptInput.tsx
|
|
15
|
-
var m = l.forwardRef(({ value: m, defaultValue: h = "", onChange: g, onSubmit: _, placeholder: v, maxLength: y, disabled: b = !1, loading: x = !1, showAttach: S = !1, onAttach: C, maxRows: w = 8, fullWidth: T = !1, className: E, style: D, label: O, error: k, required: A, layout: j, id: M,
|
|
16
|
-
let { t:
|
|
17
|
-
l.useImperativeHandle(
|
|
18
|
-
let
|
|
15
|
+
var m = l.forwardRef(({ value: m, defaultValue: h = "", onChange: g, onSubmit: _, placeholder: v, maxLength: y, disabled: b = !1, loading: x = !1, showAttach: S = !1, onAttach: C, maxRows: w = 8, fullWidth: T = !1, className: E, style: D, label: O, error: k, required: A, layout: j, id: M, "aria-label": N, "aria-labelledby": P, "aria-describedby": F, ...I }, L) => {
|
|
16
|
+
let { t: R } = e(i), z = m !== void 0, [B, V] = l.useState(h), H = z ? m : B, U = o(H, w);
|
|
17
|
+
l.useImperativeHandle(L, () => U.current);
|
|
18
|
+
let W = v, G = l.useId(), K = M || `prompt-input-${G}`, q = k ? `${K}-error` : void 0, J = O ? `${K}-label` : void 0, Y = u((e) => {
|
|
19
19
|
let t = e.target.value;
|
|
20
|
-
|
|
21
|
-
}, [
|
|
22
|
-
!
|
|
20
|
+
z || V(t), g?.(t);
|
|
21
|
+
}, [z, g]), X = u(() => {
|
|
22
|
+
!H.trim() || b || x || (_?.(H.trim()), z || V(""));
|
|
23
23
|
}, [
|
|
24
|
-
|
|
24
|
+
H,
|
|
25
25
|
b,
|
|
26
26
|
x,
|
|
27
|
-
|
|
27
|
+
z,
|
|
28
28
|
_
|
|
29
|
-
]),
|
|
30
|
-
e.key === "Enter" && !e.shiftKey && (e.preventDefault(),
|
|
31
|
-
}, [
|
|
29
|
+
]), Z = u((e) => {
|
|
30
|
+
e.key === "Enter" && !e.shiftKey && (e.preventDefault(), X());
|
|
31
|
+
}, [X]), Q = H.trim().length > 0 && !b && !x;
|
|
32
32
|
return /* @__PURE__ */ f(a, {
|
|
33
33
|
label: O,
|
|
34
34
|
error: k,
|
|
35
35
|
required: A,
|
|
36
36
|
layout: j,
|
|
37
|
-
labelId:
|
|
38
|
-
htmlFor:
|
|
39
|
-
errorId:
|
|
37
|
+
labelId: J,
|
|
38
|
+
htmlFor: K,
|
|
39
|
+
errorId: q,
|
|
40
40
|
className: E,
|
|
41
41
|
style: T ? {
|
|
42
42
|
width: "100%",
|
|
@@ -50,7 +50,7 @@ var m = l.forwardRef(({ value: m, defaultValue: h = "", onChange: g, onSubmit: _
|
|
|
50
50
|
[c.fullWidth]: T,
|
|
51
51
|
[c.danger]: !!k
|
|
52
52
|
}),
|
|
53
|
-
...
|
|
53
|
+
...I,
|
|
54
54
|
children: [/* @__PURE__ */ p("div", {
|
|
55
55
|
className: d(c.inputArea, { [c.noAttach]: !S }),
|
|
56
56
|
children: [
|
|
@@ -58,7 +58,7 @@ var m = l.forwardRef(({ value: m, defaultValue: h = "", onChange: g, onSubmit: _
|
|
|
58
58
|
type: "button",
|
|
59
59
|
className: c.actionButton,
|
|
60
60
|
onClick: C,
|
|
61
|
-
"aria-label":
|
|
61
|
+
"aria-label": R("prompt_input.attach_label"),
|
|
62
62
|
disabled: b || x,
|
|
63
63
|
children: /* @__PURE__ */ f(r, {
|
|
64
64
|
component: t,
|
|
@@ -66,28 +66,28 @@ var m = l.forwardRef(({ value: m, defaultValue: h = "", onChange: g, onSubmit: _
|
|
|
66
66
|
})
|
|
67
67
|
}),
|
|
68
68
|
/* @__PURE__ */ f("textarea", {
|
|
69
|
-
id:
|
|
70
|
-
ref:
|
|
69
|
+
id: K,
|
|
70
|
+
ref: U,
|
|
71
71
|
className: c.textarea,
|
|
72
|
-
value:
|
|
73
|
-
onChange:
|
|
74
|
-
onKeyDown:
|
|
75
|
-
placeholder:
|
|
72
|
+
value: H,
|
|
73
|
+
onChange: Y,
|
|
74
|
+
onKeyDown: Z,
|
|
75
|
+
placeholder: W,
|
|
76
76
|
rows: 1,
|
|
77
77
|
disabled: b || x,
|
|
78
78
|
maxLength: y,
|
|
79
79
|
"aria-invalid": !!k,
|
|
80
|
-
"aria-describedby":
|
|
81
|
-
"aria-labelledby": O ?
|
|
82
|
-
"aria-label": O ? void 0 :
|
|
80
|
+
"aria-describedby": [F, q].filter(Boolean).join(" ") || void 0,
|
|
81
|
+
"aria-labelledby": O ? J : P,
|
|
82
|
+
"aria-label": O || P ? void 0 : N ?? R("prompt_input.aria_label"),
|
|
83
83
|
"aria-required": A
|
|
84
84
|
}),
|
|
85
85
|
/* @__PURE__ */ f("button", {
|
|
86
86
|
type: "button",
|
|
87
87
|
className: d(c.actionButton, c.sendButton),
|
|
88
|
-
onClick:
|
|
89
|
-
disabled: !
|
|
90
|
-
"aria-label":
|
|
88
|
+
onClick: X,
|
|
89
|
+
disabled: !Q,
|
|
90
|
+
"aria-label": R("prompt_input.send_label"),
|
|
91
91
|
children: /* @__PURE__ */ f(r, {
|
|
92
92
|
component: n,
|
|
93
93
|
size: "md"
|
|
@@ -95,7 +95,7 @@ var m = l.forwardRef(({ value: m, defaultValue: h = "", onChange: g, onSubmit: _
|
|
|
95
95
|
})
|
|
96
96
|
]
|
|
97
97
|
}), /* @__PURE__ */ f(s, {
|
|
98
|
-
count:
|
|
98
|
+
count: H.length,
|
|
99
99
|
maxLength: y,
|
|
100
100
|
className: c.charCount
|
|
101
101
|
})]
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/check.cjs"),r=require("../../../icon/close.cjs"),i=require("../../../icon/copy.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("../../../i18n/generated/form.cjs"),s=require("./terminal.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d={30:`#2d2d2d`,31:`#e06c75`,32:`#98c379`,33:`#e5c07b`,34:`#61afef`,35:`#c678dd`,36:`#56b6c2`,37:`#abb2bf`,90:`#9aa1ab`,91:`#e06c75`,92:`#98c379`,93:`#e5c07b`,94:`#61afef`,95:`#c678dd`,96:`#56b6c2`,97:`#ffffff`};function f(e){let t=RegExp(`\x1B\\[([0-9;]*)m`,`g`),n=[],r=0,i={},a=0;for(let o of e.matchAll(t)){o.index>r&&n.push((0,u.jsx)(`span`,{style:{color:i.color,fontWeight:i.bold?`bold`:void 0},children:e.slice(r,o.index)},a++));let t=o[1]?o[1].split(`;`).map(Number):[0],s={...i};for(let e of t)e===0?Object.assign(s,{color:void 0,bold:void 0}):e===1?s.bold=!0:d[e]&&(s.color=d[e]);i=s,r=o.index+o[0].length}return r<e.length&&n.push((0,u.jsx)(`span`,{style:{color:i.color,fontWeight:i.bold?`bold`:void 0},children:e.slice(r)},a++)),n.length===1?n[0]:(0,u.jsx)(u.Fragment,{children:n})}var p=c.default.forwardRef(({lines:e=[],title:d,height:p,autoScroll:m=!0,prompt:h=`$`,showCopy:g=!0,showWindowControls:_=!1,onClear:v,className:y,style:b,...
|
|
3
|
-
`);try{await navigator.clipboard.writeText(t),
|
|
2
|
+
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/check.cjs"),r=require("../../../icon/close.cjs"),i=require("../../../icon/copy.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("../../../i18n/generated/form.cjs"),s=require("./terminal.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d={30:`#2d2d2d`,31:`#e06c75`,32:`#98c379`,33:`#e5c07b`,34:`#61afef`,35:`#c678dd`,36:`#56b6c2`,37:`#abb2bf`,90:`#9aa1ab`,91:`#e06c75`,92:`#98c379`,93:`#e5c07b`,94:`#61afef`,95:`#c678dd`,96:`#56b6c2`,97:`#ffffff`};function f(e){let t=RegExp(`\x1B\\[([0-9;]*)m`,`g`),n=[],r=0,i={},a=0;for(let o of e.matchAll(t)){o.index>r&&n.push((0,u.jsx)(`span`,{style:{color:i.color,fontWeight:i.bold?`bold`:void 0},children:e.slice(r,o.index)},a++));let t=o[1]?o[1].split(`;`).map(Number):[0],s={...i};for(let e of t)e===0?Object.assign(s,{color:void 0,bold:void 0}):e===1?s.bold=!0:d[e]&&(s.color=d[e]);i=s,r=o.index+o[0].length}return r<e.length&&n.push((0,u.jsx)(`span`,{style:{color:i.color,fontWeight:i.bold?`bold`:void 0},children:e.slice(r)},a++)),n.length===1?n[0]:(0,u.jsx)(u.Fragment,{children:n})}var p=c.default.forwardRef(({lines:e=[],title:d,height:p,autoScroll:m=!0,prompt:h=`$`,showCopy:g=!0,showWindowControls:_=!1,onClear:v,className:y,style:b,"aria-label":x,"aria-labelledby":S,"aria-describedby":C,...w},T)=>{let{t:E}=t.useWimTranslation(o.formNs),[D,O]=c.default.useState(!1),k=(0,c.useRef)(null);(0,c.useEffect)(()=>{m&&k.current&&(k.current.scrollTop=k.current.scrollHeight)},[e,m]);let A=(0,c.useCallback)(async()=>{let t=e.map(e=>e.type===`input`?`${h} ${e.content}`:e.content).join(`
|
|
3
|
+
`);try{await navigator.clipboard.writeText(t),O(!0),setTimeout(()=>O(!1),2e3)}catch{}},[e,h]);return(0,u.jsxs)(`div`,{ref:T,"data-theme":`dark`,className:(0,l.default)(`wim-terminal`,s.default.root,y),style:{...p==null?{}:{height:p},...b},...w,children:[(0,u.jsxs)(`div`,{className:s.default.titleBar,children:[_&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`span`,{className:s.default.dot,"data-color":`red`,"aria-hidden":`true`}),(0,u.jsx)(`span`,{className:s.default.dot,"data-color":`yellow`,"aria-hidden":`true`}),(0,u.jsx)(`span`,{className:s.default.dot,"data-color":`green`,"aria-hidden":`true`})]}),d&&(0,u.jsx)(`span`,{className:s.default.titleText,children:d}),(0,u.jsxs)(`div`,{className:s.default.titleActions,children:[g&&(0,u.jsx)(`button`,{type:`button`,className:(0,l.default)(s.default.titleBtn,D&&s.default.copied),onClick:A,"aria-label":E(D?`terminal.copied_label`:`terminal.copy_label`),children:(0,u.jsx)(a.Icon,{component:D?n.default:i.default,size:`sm`})}),v&&(0,u.jsx)(`button`,{type:`button`,className:s.default.titleBtn,onClick:v,"aria-label":E(`terminal.clear_label`),children:(0,u.jsx)(a.Icon,{component:r.default,size:`sm`})})]})]}),(0,u.jsx)(`div`,{ref:k,className:s.default.body,role:`log`,"aria-live":`polite`,"aria-label":S?void 0:x??d,"aria-labelledby":S,"aria-describedby":C,tabIndex:0,children:e.map((e,t)=>(0,u.jsxs)(`div`,{className:(0,l.default)(s.default.line,e.type&&s.default[e.type]),children:[e.type===`input`&&(0,u.jsx)(`span`,{className:s.default.prompt,"aria-hidden":`true`,children:h}),(0,u.jsx)(`span`,{className:s.default.content,children:f(e.content)})]},e.id??t))})]})});p.displayName=`Terminal`,exports.Terminal=p;
|
|
@@ -53,26 +53,26 @@ function g(e) {
|
|
|
53
53
|
children: e.slice(r)
|
|
54
54
|
}, a++)), n.length === 1 ? n[0] : /* @__PURE__ */ p(f, { children: n });
|
|
55
55
|
}
|
|
56
|
-
var _ = s.forwardRef(({ lines: h = [], title: _, height: v, autoScroll: y = !0, prompt: b = "$", showCopy: x = !0, showWindowControls: S = !1, onClear: C, className: w, style: T,
|
|
57
|
-
let { t:
|
|
56
|
+
var _ = s.forwardRef(({ lines: h = [], title: _, height: v, autoScroll: y = !0, prompt: b = "$", showCopy: x = !0, showWindowControls: S = !1, onClear: C, className: w, style: T, "aria-label": E, "aria-labelledby": D, "aria-describedby": O, ...k }, A) => {
|
|
57
|
+
let { t: j } = e(a), [M, N] = s.useState(!1), P = u(null);
|
|
58
58
|
l(() => {
|
|
59
|
-
y &&
|
|
59
|
+
y && P.current && (P.current.scrollTop = P.current.scrollHeight);
|
|
60
60
|
}, [h, y]);
|
|
61
|
-
let
|
|
61
|
+
let F = c(async () => {
|
|
62
62
|
let e = h.map((e) => e.type === "input" ? `${b} ${e.content}` : e.content).join("\n");
|
|
63
63
|
try {
|
|
64
|
-
await navigator.clipboard.writeText(e),
|
|
64
|
+
await navigator.clipboard.writeText(e), N(!0), setTimeout(() => N(!1), 2e3);
|
|
65
65
|
} catch {}
|
|
66
66
|
}, [h, b]);
|
|
67
67
|
return /* @__PURE__ */ m("div", {
|
|
68
|
-
ref:
|
|
68
|
+
ref: A,
|
|
69
69
|
"data-theme": "dark",
|
|
70
70
|
className: d("wim-terminal", o.root, w),
|
|
71
71
|
style: {
|
|
72
72
|
...v == null ? {} : { height: v },
|
|
73
73
|
...T
|
|
74
74
|
},
|
|
75
|
-
...
|
|
75
|
+
...k,
|
|
76
76
|
children: [/* @__PURE__ */ m("div", {
|
|
77
77
|
className: o.titleBar,
|
|
78
78
|
children: [
|
|
@@ -101,18 +101,18 @@ var _ = s.forwardRef(({ lines: h = [], title: _, height: v, autoScroll: y = !0,
|
|
|
101
101
|
className: o.titleActions,
|
|
102
102
|
children: [x && /* @__PURE__ */ p("button", {
|
|
103
103
|
type: "button",
|
|
104
|
-
className: d(o.titleBtn,
|
|
105
|
-
onClick:
|
|
106
|
-
"aria-label":
|
|
104
|
+
className: d(o.titleBtn, M && o.copied),
|
|
105
|
+
onClick: F,
|
|
106
|
+
"aria-label": j(M ? "terminal.copied_label" : "terminal.copy_label"),
|
|
107
107
|
children: /* @__PURE__ */ p(i, {
|
|
108
|
-
component:
|
|
108
|
+
component: M ? t : r,
|
|
109
109
|
size: "sm"
|
|
110
110
|
})
|
|
111
111
|
}), C && /* @__PURE__ */ p("button", {
|
|
112
112
|
type: "button",
|
|
113
113
|
className: o.titleBtn,
|
|
114
114
|
onClick: C,
|
|
115
|
-
"aria-label":
|
|
115
|
+
"aria-label": j("terminal.clear_label"),
|
|
116
116
|
children: /* @__PURE__ */ p(i, {
|
|
117
117
|
component: n,
|
|
118
118
|
size: "sm"
|
|
@@ -121,11 +121,13 @@ var _ = s.forwardRef(({ lines: h = [], title: _, height: v, autoScroll: y = !0,
|
|
|
121
121
|
})
|
|
122
122
|
]
|
|
123
123
|
}), /* @__PURE__ */ p("div", {
|
|
124
|
-
ref:
|
|
124
|
+
ref: P,
|
|
125
125
|
className: o.body,
|
|
126
126
|
role: "log",
|
|
127
127
|
"aria-live": "polite",
|
|
128
|
-
"aria-label": _,
|
|
128
|
+
"aria-label": D ? void 0 : E ?? _,
|
|
129
|
+
"aria-labelledby": D,
|
|
130
|
+
"aria-describedby": O,
|
|
129
131
|
tabIndex: 0,
|
|
130
132
|
children: h.map((e, t) => /* @__PURE__ */ m("div", {
|
|
131
133
|
className: d(o.line, e.type && o[e.type]),
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./virtual-list.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=n.default.forwardRef(({items:e,itemHeight:a,height:o,renderItem:s,overscan:c=3,className:l,itemRole:u=`listitem`,role:d=`list`,"aria-label":f,"aria-labelledby":p},
|
|
2
|
+
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./virtual-list.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=n.default.forwardRef(({items:e,itemHeight:a,height:o,renderItem:s,overscan:c=3,className:l,itemRole:u=`listitem`,role:d=`list`,"aria-label":f,"aria-labelledby":p,"aria-describedby":m},h)=>{let g=(0,n.useRef)(null),_=h||g,[v,y]=(0,n.useState)(0),b=typeof o==`number`?o:0;(0,n.useEffect)(()=>{let e=e=>{y(e.target.scrollTop)},t=_.current;return t&&t.addEventListener(`scroll`,e),()=>{t&&t.removeEventListener(`scroll`,e)}},[_]);let x=(0,n.useMemo)(()=>{let t=Math.max(0,Math.floor(v/a)-c),n=b>0?Math.ceil(b/a)+c*2:20;return{startNode:t,endNode:Math.min(e.length,t+n)}},[v,a,b,e.length,c]),S=e.slice(x.startNode,x.endNode),C=e.length*a;return(0,i.jsx)(`div`,{ref:_,className:(0,r.default)(`wim-virtual-list`,t.default.root,l),style:{height:o},role:d,tabIndex:0,"aria-label":f,"aria-labelledby":p,"aria-describedby":m,children:(0,i.jsx)(`div`,{className:t.default.viewport,style:{height:C},children:S.map((n,r)=>{let o=x.startNode+r;return(0,i.jsx)(`div`,{className:t.default.item,style:{height:a,transform:`translateY(${o*a}px)`},role:u,"aria-setsize":e.length,"aria-posinset":o+1,children:s(n,o)},o)})})})});exports.VirtualList=a;
|
|
@@ -20,6 +20,8 @@ export interface VirtualListProps<T> {
|
|
|
20
20
|
"aria-label"?: string;
|
|
21
21
|
/** ID of the element that labels the list */
|
|
22
22
|
"aria-labelledby"?: string;
|
|
23
|
+
/** ID of the element that describes the list */
|
|
24
|
+
"aria-describedby"?: string;
|
|
23
25
|
}
|
|
24
26
|
export declare const VirtualList: <T>(props: VirtualListProps<T> & {
|
|
25
27
|
ref?: React.ForwardedRef<HTMLDivElement>;
|
|
@@ -3,42 +3,43 @@ import e from "./virtual-list.module.js";
|
|
|
3
3
|
import t, { useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
|
|
4
4
|
import o from "classnames";
|
|
5
5
|
import { jsx as s } from "react/jsx-runtime";
|
|
6
|
-
var c = t.forwardRef(({ items: t, itemHeight: c, height: l, renderItem: u, overscan: d = 3, className: f, itemRole: p = "listitem", role: m = "list", "aria-label": h, "aria-labelledby": g },
|
|
7
|
-
let
|
|
6
|
+
var c = t.forwardRef(({ items: t, itemHeight: c, height: l, renderItem: u, overscan: d = 3, className: f, itemRole: p = "listitem", role: m = "list", "aria-label": h, "aria-labelledby": g, "aria-describedby": _ }, v) => {
|
|
7
|
+
let y = i(null), b = v || y, [x, S] = a(0), C = typeof l == "number" ? l : 0;
|
|
8
8
|
n(() => {
|
|
9
9
|
let e = (e) => {
|
|
10
|
-
|
|
11
|
-
}, t =
|
|
10
|
+
S(e.target.scrollTop);
|
|
11
|
+
}, t = b.current;
|
|
12
12
|
return t && t.addEventListener("scroll", e), () => {
|
|
13
13
|
t && t.removeEventListener("scroll", e);
|
|
14
14
|
};
|
|
15
|
-
}, [
|
|
16
|
-
let
|
|
17
|
-
let e = Math.max(0, Math.floor(
|
|
15
|
+
}, [b]);
|
|
16
|
+
let w = r(() => {
|
|
17
|
+
let e = Math.max(0, Math.floor(x / c) - d), n = C > 0 ? Math.ceil(C / c) + d * 2 : 20;
|
|
18
18
|
return {
|
|
19
19
|
startNode: e,
|
|
20
20
|
endNode: Math.min(t.length, e + n)
|
|
21
21
|
};
|
|
22
22
|
}, [
|
|
23
|
-
|
|
23
|
+
x,
|
|
24
24
|
c,
|
|
25
|
-
|
|
25
|
+
C,
|
|
26
26
|
t.length,
|
|
27
27
|
d
|
|
28
|
-
]),
|
|
28
|
+
]), T = t.slice(w.startNode, w.endNode), E = t.length * c;
|
|
29
29
|
return /* @__PURE__ */ s("div", {
|
|
30
|
-
ref:
|
|
30
|
+
ref: b,
|
|
31
31
|
className: o("wim-virtual-list", e.root, f),
|
|
32
32
|
style: { height: l },
|
|
33
33
|
role: m,
|
|
34
34
|
tabIndex: 0,
|
|
35
35
|
"aria-label": h,
|
|
36
36
|
"aria-labelledby": g,
|
|
37
|
+
"aria-describedby": _,
|
|
37
38
|
children: /* @__PURE__ */ s("div", {
|
|
38
39
|
className: e.viewport,
|
|
39
|
-
style: { height:
|
|
40
|
-
children:
|
|
41
|
-
let i =
|
|
40
|
+
style: { height: E },
|
|
41
|
+
children: T.map((n, r) => {
|
|
42
|
+
let i = w.startNode + r;
|
|
42
43
|
return /* @__PURE__ */ s("div", {
|
|
43
44
|
className: e.item,
|
|
44
45
|
style: {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../Button/Button.cjs"),i=require("../../overlay/Tooltip/Tooltip.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=({value:e,size:c=`md`,className:l,"aria-label":u,
|
|
2
|
+
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../Button/Button.cjs"),i=require("../../overlay/Tooltip/Tooltip.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=({value:e,size:c=`md`,className:l,"aria-label":u,"aria-labelledby":d,"aria-describedby":f,copyLabel:p,copiedLabel:m,asChild:h=!1,children:g})=>{let{t:_}=t.useWimTranslation(n.commonNs),[v,y]=(0,a.useState)(!1);(0,a.useEffect)(()=>{if(v){let e=setTimeout(()=>{y(!1)},2e3);return()=>clearTimeout(e)}},[v]);let b=async()=>{try{await navigator.clipboard.writeText(e),y(!0)}catch{}},x=v?m??_(`copied`):p??_(`copy.to_clipboard`);return(0,s.jsxs)(i.Tooltip,{children:[(0,s.jsx)(i.TooltipTrigger,{asChild:!0,children:(0,s.jsx)(r.Button,{asChild:h,variant:`ghost`,size:c,icon:h?void 0:v?`CheckIcon`:`CopyIcon`,intent:v?`success`:`default`,onClick:b,className:(0,o.default)(`wim-copy-button`,l),"aria-label":u||x,"aria-labelledby":d,"aria-describedby":f,children:h?g:void 0})}),(0,s.jsx)(i.TooltipContent,{children:x})]})};exports.CopyButton=c;
|
|
@@ -9,6 +9,10 @@ type CopyButtonProps = {
|
|
|
9
9
|
className?: string;
|
|
10
10
|
/** Accessible label for the button */
|
|
11
11
|
"aria-label"?: string;
|
|
12
|
+
/** ID of the element that labels the button. Takes precedence over `aria-label`. */
|
|
13
|
+
"aria-labelledby"?: string;
|
|
14
|
+
/** ID of the element that describes the button. */
|
|
15
|
+
"aria-describedby"?: string;
|
|
12
16
|
/** Tooltip label before copying */
|
|
13
17
|
copyLabel?: string;
|
|
14
18
|
/** Tooltip label after copying */
|
|
@@ -18,5 +22,5 @@ type CopyButtonProps = {
|
|
|
18
22
|
/** Trigger content when `asChild` is true */
|
|
19
23
|
children?: React.ReactNode;
|
|
20
24
|
};
|
|
21
|
-
export declare const CopyButton: ({ value, size, className, "aria-label": ariaLabel, copyLabel, copiedLabel, asChild, children, }: CopyButtonProps) => React.JSX.Element;
|
|
25
|
+
export declare const CopyButton: ({ value, size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, copyLabel, copiedLabel, asChild, children, }: CopyButtonProps) => React.JSX.Element;
|
|
22
26
|
export {};
|
|
@@ -7,35 +7,37 @@ import { useEffect as o, useState as s } from "react";
|
|
|
7
7
|
import c from "classnames";
|
|
8
8
|
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
9
9
|
//#region src/components/form/CopyButton/CopyButton.tsx
|
|
10
|
-
var d = ({ value: d, size: f = "md", className: p, "aria-label": m,
|
|
11
|
-
let { t:
|
|
10
|
+
var d = ({ value: d, size: f = "md", className: p, "aria-label": m, "aria-labelledby": h, "aria-describedby": g, copyLabel: _, copiedLabel: v, asChild: y = !1, children: b }) => {
|
|
11
|
+
let { t: x } = e(t), [S, C] = s(!1);
|
|
12
12
|
o(() => {
|
|
13
|
-
if (
|
|
13
|
+
if (S) {
|
|
14
14
|
let e = setTimeout(() => {
|
|
15
|
-
|
|
15
|
+
C(!1);
|
|
16
16
|
}, 2e3);
|
|
17
17
|
return () => clearTimeout(e);
|
|
18
18
|
}
|
|
19
|
-
}, [
|
|
20
|
-
let
|
|
19
|
+
}, [S]);
|
|
20
|
+
let w = async () => {
|
|
21
21
|
try {
|
|
22
|
-
await navigator.clipboard.writeText(d),
|
|
22
|
+
await navigator.clipboard.writeText(d), C(!0);
|
|
23
23
|
} catch {}
|
|
24
|
-
},
|
|
24
|
+
}, T = S ? v ?? x("copied") : _ ?? x("copy.to_clipboard");
|
|
25
25
|
return /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(a, {
|
|
26
26
|
asChild: !0,
|
|
27
27
|
children: /* @__PURE__ */ l(n, {
|
|
28
|
-
asChild:
|
|
28
|
+
asChild: y,
|
|
29
29
|
variant: "ghost",
|
|
30
30
|
size: f,
|
|
31
|
-
icon:
|
|
32
|
-
intent:
|
|
33
|
-
onClick:
|
|
31
|
+
icon: y ? void 0 : S ? "CheckIcon" : "CopyIcon",
|
|
32
|
+
intent: S ? "success" : "default",
|
|
33
|
+
onClick: w,
|
|
34
34
|
className: c("wim-copy-button", p),
|
|
35
|
-
"aria-label": m ||
|
|
36
|
-
|
|
35
|
+
"aria-label": m || T,
|
|
36
|
+
"aria-labelledby": h,
|
|
37
|
+
"aria-describedby": g,
|
|
38
|
+
children: y ? b : void 0
|
|
37
39
|
})
|
|
38
|
-
}), /* @__PURE__ */ l(i, { children:
|
|
40
|
+
}), /* @__PURE__ */ l(i, { children: T })] });
|
|
39
41
|
};
|
|
40
42
|
//#endregion
|
|
41
43
|
export { d as CopyButton };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./dropzone.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=({label:e,description:u,accept:d,multiple:f=!1,disabled:p=!1,value:m,onChange:h,className:g,iconName:_=`UploadIcon`,error:v,required:y,layout:b=`vertical`,size:x=`md
|
|
2
|
+
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./dropzone.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=({label:e,description:u,accept:d,multiple:f=!1,disabled:p=!1,value:m,onChange:h,className:g,iconName:_=`UploadIcon`,error:v,required:y,layout:b=`vertical`,size:x=`md`,"aria-label":S,"aria-labelledby":C,"aria-describedby":w})=>{let{t:T}=n.useWimTranslation(i.formNs),E=u??T(`dropzone.description`),D=`wim-dropzone-${s.default.useId()}`,O=e?`${D}-label`:void 0,k=v?`${D}-error`:void 0,A=(0,s.useRef)(null),[j,M]=(0,s.useState)(!1),[N,P]=(0,s.useState)(null),F=()=>{p||A.current?.click()},I=e=>{e.preventDefault(),!p&&M(!0)},L=()=>{M(!1)},R=e=>{if(e.preventDefault(),M(!1),p)return;let t=e.dataTransfer.files;P(t),h&&h(t)},z=e=>{let t=e.target.files;P(t),h&&h(t)},B=m===void 0?N?Array.from(N).map(e=>e.name):[]:m;return(0,l.jsxs)(a.FieldTemplate,{label:e,error:v,required:y,layout:b,labelId:O,errorId:k,className:(0,c.default)(`wim-dropzone`,o.default.container,g),children:[(0,l.jsx)(`input`,{type:`file`,ref:A,accept:d,multiple:f,disabled:p,onChange:z,style:{display:`none`},"aria-hidden":`true`,tabIndex:-1}),(0,l.jsx)(t.InteractiveArea,{size:x,isDragging:j,disabled:p,isClickable:!p,onClick:F,onDragOver:I,onDragLeave:L,onDrop:R,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&F()},"aria-labelledby":O??C,"aria-label":O||C?void 0:S,"aria-describedby":[w,k].filter(Boolean).join(` `)||void 0,"aria-required":y,"aria-invalid":!!v,icon:_&&(0,l.jsx)(r.Icon,{name:_,color:p?`disabled`:`primary`}),description:E,children:B.length>0?(0,l.jsx)(`div`,{className:o.default.fileList,children:B.map((e,t)=>(0,l.jsx)(`span`,{className:o.default.fileName,children:e},t))}):null})]})};exports.Dropzone=u;
|
|
@@ -35,9 +35,15 @@ type DropzoneProps = {
|
|
|
35
35
|
layout?: "vertical" | "horizontal";
|
|
36
36
|
/** Size of the drop area */
|
|
37
37
|
size?: InteractiveAreaProps["size"];
|
|
38
|
+
/** Accessible name for the drop area when no visible `label` is provided. */
|
|
39
|
+
"aria-label"?: string;
|
|
40
|
+
/** ID of the element that labels the drop area when no visible `label` is provided. */
|
|
41
|
+
"aria-labelledby"?: string;
|
|
42
|
+
/** ID of the element that describes the drop area. Announced together with the error message. */
|
|
43
|
+
"aria-describedby"?: string;
|
|
38
44
|
};
|
|
39
45
|
/**
|
|
40
46
|
* Component for uploading files by drag and drop or by clicking.
|
|
41
47
|
*/
|
|
42
|
-
export declare const Dropzone: ({ label, description, accept, multiple, disabled, value, onChange, className, iconName, error, required, layout, size, }: DropzoneProps) => React.JSX.Element;
|
|
48
|
+
export declare const Dropzone: ({ label, description, accept, multiple, disabled, value, onChange, className, iconName, error, required, layout, size, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: DropzoneProps) => React.JSX.Element;
|
|
43
49
|
export {};
|
|
@@ -9,63 +9,64 @@ import o, { useRef as s, useState as c } from "react";
|
|
|
9
9
|
import l from "classnames";
|
|
10
10
|
import { jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
11
11
|
//#region src/components/form/Dropzone/Dropzone.tsx
|
|
12
|
-
var f = ({ label: f, description: p, accept: m, multiple: h = !1, disabled: g = !1, value: _, onChange: v, className: y, iconName: b = "UploadIcon", error: x, required: S, layout: C = "vertical", size: w = "md" }) => {
|
|
13
|
-
let { t:
|
|
14
|
-
g ||
|
|
15
|
-
}, I = (e) => {
|
|
16
|
-
e.preventDefault(), !g && M(!0);
|
|
17
|
-
}, L = () => {
|
|
18
|
-
M(!1);
|
|
19
|
-
}, R = (e) => {
|
|
20
|
-
if (e.preventDefault(), M(!1), g) return;
|
|
21
|
-
let t = e.dataTransfer.files;
|
|
22
|
-
P(t), v && v(t);
|
|
12
|
+
var f = ({ label: f, description: p, accept: m, multiple: h = !1, disabled: g = !1, value: _, onChange: v, className: y, iconName: b = "UploadIcon", error: x, required: S, layout: C = "vertical", size: w = "md", "aria-label": T, "aria-labelledby": E, "aria-describedby": D }) => {
|
|
13
|
+
let { t: O } = t(r), k = p ?? O("dropzone.description"), A = `wim-dropzone-${o.useId()}`, j = f ? `${A}-label` : void 0, M = x ? `${A}-error` : void 0, N = s(null), [P, F] = c(!1), [I, L] = c(null), R = () => {
|
|
14
|
+
g || N.current?.click();
|
|
23
15
|
}, z = (e) => {
|
|
16
|
+
e.preventDefault(), !g && F(!0);
|
|
17
|
+
}, B = () => {
|
|
18
|
+
F(!1);
|
|
19
|
+
}, V = (e) => {
|
|
20
|
+
if (e.preventDefault(), F(!1), g) return;
|
|
21
|
+
let t = e.dataTransfer.files;
|
|
22
|
+
L(t), v && v(t);
|
|
23
|
+
}, H = (e) => {
|
|
24
24
|
let t = e.target.files;
|
|
25
|
-
|
|
26
|
-
},
|
|
25
|
+
L(t), v && v(t);
|
|
26
|
+
}, U = _ === void 0 ? I ? Array.from(I).map((e) => e.name) : [] : _;
|
|
27
27
|
return /* @__PURE__ */ d(i, {
|
|
28
28
|
label: f,
|
|
29
29
|
error: x,
|
|
30
30
|
required: S,
|
|
31
31
|
layout: C,
|
|
32
|
-
labelId:
|
|
33
|
-
errorId:
|
|
32
|
+
labelId: j,
|
|
33
|
+
errorId: M,
|
|
34
34
|
className: l("wim-dropzone", a.container, y),
|
|
35
35
|
children: [/* @__PURE__ */ u("input", {
|
|
36
36
|
type: "file",
|
|
37
|
-
ref:
|
|
37
|
+
ref: N,
|
|
38
38
|
accept: m,
|
|
39
39
|
multiple: h,
|
|
40
40
|
disabled: g,
|
|
41
|
-
onChange:
|
|
41
|
+
onChange: H,
|
|
42
42
|
style: { display: "none" },
|
|
43
43
|
"aria-hidden": "true",
|
|
44
44
|
tabIndex: -1
|
|
45
45
|
}), /* @__PURE__ */ u(e, {
|
|
46
46
|
size: w,
|
|
47
|
-
isDragging:
|
|
47
|
+
isDragging: P,
|
|
48
48
|
disabled: g,
|
|
49
49
|
isClickable: !g,
|
|
50
|
-
onClick:
|
|
51
|
-
onDragOver:
|
|
52
|
-
onDragLeave:
|
|
53
|
-
onDrop:
|
|
50
|
+
onClick: R,
|
|
51
|
+
onDragOver: z,
|
|
52
|
+
onDragLeave: B,
|
|
53
|
+
onDrop: V,
|
|
54
54
|
onKeyDown: (e) => {
|
|
55
|
-
(e.key === "Enter" || e.key === " ") &&
|
|
55
|
+
(e.key === "Enter" || e.key === " ") && R();
|
|
56
56
|
},
|
|
57
|
-
"aria-labelledby":
|
|
58
|
-
"aria-
|
|
57
|
+
"aria-labelledby": j ?? E,
|
|
58
|
+
"aria-label": j || E ? void 0 : T,
|
|
59
|
+
"aria-describedby": [D, M].filter(Boolean).join(" ") || void 0,
|
|
59
60
|
"aria-required": S,
|
|
60
61
|
"aria-invalid": !!x,
|
|
61
62
|
icon: b && /* @__PURE__ */ u(n, {
|
|
62
63
|
name: b,
|
|
63
64
|
color: g ? "disabled" : "primary"
|
|
64
65
|
}),
|
|
65
|
-
description:
|
|
66
|
-
children:
|
|
66
|
+
description: k,
|
|
67
|
+
children: U.length > 0 ? /* @__PURE__ */ u("div", {
|
|
67
68
|
className: a.fileList,
|
|
68
|
-
children:
|
|
69
|
+
children: U.map((e, t) => /* @__PURE__ */ u("span", {
|
|
69
70
|
className: a.fileName,
|
|
70
71
|
children: e
|
|
71
72
|
}, t))
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),r=require("../Button/Button.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./file-upload.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=({label:e,buttonLabel:u,noFileLabel:d,accept:f,multiple:p=!1,disabled:m=!1,value:h,onChange:g,className:_,iconName:v,iconPosition:y,size:b=`md`,error:x,required:S,layout:C=`vertical
|
|
2
|
+
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),r=require("../Button/Button.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./file-upload.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=({label:e,buttonLabel:u,noFileLabel:d,accept:f,multiple:p=!1,disabled:m=!1,value:h,onChange:g,className:_,iconName:v,iconPosition:y,size:b=`md`,error:x,required:S,layout:C=`vertical`,"aria-label":w,"aria-labelledby":T,"aria-describedby":E})=>{let{t:D}=t.useWimTranslation(i.formNs),O=`wim-fileupload-${s.default.useId()}`,k=e?`${O}-label`:void 0,A=x?`${O}-error`:void 0,j=S?`${O}-required`:void 0,M=[E,A,j].filter(Boolean).join(` `)||void 0,N=(0,s.useRef)(null),[P,F]=(0,s.useState)(null),I=()=>{N.current?.click()},L=e=>{let t=e.target.files;F(t),g&&g(t)},R=h===void 0?P?Array.from(P).map(e=>e.name):[]:h,z=R.length>0?R.join(`, `):d??D(`fileupload.no_file`);return(0,l.jsx)(a.FieldTemplate,{label:e,error:x,required:S,layout:C,labelId:k,errorId:A,className:(0,c.default)(`wim-file-upload`,o.default.root,o.default[b],_),children:(0,l.jsxs)(`div`,{className:o.default.controls,children:[(0,l.jsx)(`input`,{type:`file`,ref:N,accept:f,multiple:p,disabled:m,onChange:L,className:o.default.input,"aria-hidden":`true`,tabIndex:-1}),(0,l.jsx)(r.Button,{onClick:I,disabled:m,variant:`outline`,icon:v,iconPosition:y,size:b,"aria-labelledby":k??T,"aria-label":k||T?void 0:w,"aria-describedby":M,"aria-invalid":x?!0:void 0,children:u??D(`fileupload.button`)}),S&&(0,l.jsx)(n.VisuallyHidden,{id:j,children:D(`form.required`)}),(0,l.jsx)(`span`,{className:(0,c.default)(o.default.fileNames,o.default[b],m&&o.default.disabled),"aria-disabled":m||void 0,children:z})]})})};exports.FileUpload=u;
|
|
@@ -39,9 +39,15 @@ type FileUploadProps = {
|
|
|
39
39
|
required?: boolean;
|
|
40
40
|
/** Layout direction of label and field */
|
|
41
41
|
layout?: "vertical" | "horizontal";
|
|
42
|
+
/** Accessible name for the choose-file button when no visible `label` is provided. */
|
|
43
|
+
"aria-label"?: string;
|
|
44
|
+
/** ID of the element that labels the choose-file button when no visible `label` is provided. */
|
|
45
|
+
"aria-labelledby"?: string;
|
|
46
|
+
/** ID of the element that describes the choose-file button. Announced together with the error message. */
|
|
47
|
+
"aria-describedby"?: string;
|
|
42
48
|
};
|
|
43
49
|
/**
|
|
44
50
|
* Component for selecting and uploading files.
|
|
45
51
|
*/
|
|
46
|
-
export declare const FileUpload: ({ label, buttonLabel, noFileLabel, accept, multiple, disabled, value, onChange, className, iconName, iconPosition, size, error, required, layout, }: FileUploadProps) => React.JSX.Element;
|
|
52
|
+
export declare const FileUpload: ({ label, buttonLabel, noFileLabel, accept, multiple, disabled, value, onChange, className, iconName, iconPosition, size, error, required, layout, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: FileUploadProps) => React.JSX.Element;
|
|
47
53
|
export {};
|