@kakadu/components 4.0.7 → 4.1.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/build/components/combobox.js +1 -1
- package/build/components/combobox.mjs +164 -154
- package/build/components/input.d.ts +1 -1
- package/build/components/input.js +2 -2
- package/build/components/input.mjs +98 -96
- package/build/components/popover-menu.js +1 -1
- package/build/components/popover-menu.mjs +1 -1
- package/build/components.css +1 -1
- package/build/hooks/use-media-query.d.ts +1 -0
- package/build/hooks/use-synchronized-value.d.ts +1 -0
- package/build/hooks/use-synchronized-value.js +1 -0
- package/build/{use-synchronized-value-XnIpeq1s.mjs → hooks/use-synchronized-value.mjs} +8 -8
- package/build/hooks/use-throttled.d.ts +2 -0
- package/build/hooks/use-throttled.js +1 -0
- package/build/hooks/use-throttled.mjs +16 -0
- package/build/index.d.ts +6 -2
- package/build/index.js +1 -1
- package/build/index.mjs +36 -32
- package/package.json +1 -1
- package/build/use-synchronized-value-D0_rS5Wp.js +0 -1
|
@@ -1,170 +1,172 @@
|
|
|
1
1
|
import { j as e } from "../jsx-runtime-B4hRZ52C.mjs";
|
|
2
|
-
import { useRef as
|
|
2
|
+
import { useRef as P, useId as fe, useState as T, useLayoutEffect as he, useMemo as H, useEffect as xe, useCallback as h } from "react";
|
|
3
3
|
import { cx as o } from "@kuma-ui/core";
|
|
4
|
-
import
|
|
5
|
-
import { buttonResetStyles as
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { Span as
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import { useCreateNotification as
|
|
14
|
-
const
|
|
15
|
-
function
|
|
16
|
-
as:
|
|
4
|
+
import _ from "../utilities/copy-to-clipboard.mjs";
|
|
5
|
+
import { buttonResetStyles as je, overflowProtectionStyles as te } from "../theme.mjs";
|
|
6
|
+
import be from "../icons/sparkle.mjs";
|
|
7
|
+
import ye from "./button-tooltip.mjs";
|
|
8
|
+
import R from "./text-button.mjs";
|
|
9
|
+
import { Span as F, Paragraph as M } from "./text.mjs";
|
|
10
|
+
import ge from "./collapsible.mjs";
|
|
11
|
+
import ee from "./click-ripples.mjs";
|
|
12
|
+
import ne from "./hover-gradient.mjs";
|
|
13
|
+
import { useCreateNotification as Ne } from "./notification.mjs";
|
|
14
|
+
const ve = "kakadu-components-922159086", Ce = "kakadu-components-25448712", $ = "kakadu-components-1621260869", V = "kakadu-components-4056037255", Se = o(V, "kakadu-components-3245407458"), Ee = o(V, "kakadu-components-1117160492"), Ie = o(V, "kakadu-components-2261792866");
|
|
15
|
+
function Be({
|
|
16
|
+
as: d,
|
|
17
17
|
className: l,
|
|
18
|
-
...
|
|
18
|
+
...m
|
|
19
19
|
}) {
|
|
20
|
-
return /* @__PURE__ */ e.jsx(
|
|
20
|
+
return /* @__PURE__ */ e.jsx(F, { as: d ?? "span", ...m, className: o("kakadu-components-520991867", l) });
|
|
21
21
|
}
|
|
22
|
-
function
|
|
23
|
-
label:
|
|
22
|
+
function we({
|
|
23
|
+
label: d,
|
|
24
24
|
error: l,
|
|
25
|
-
errorId:
|
|
25
|
+
errorId: m,
|
|
26
26
|
warning: c,
|
|
27
|
-
warningId:
|
|
27
|
+
warningId: x,
|
|
28
28
|
information: r,
|
|
29
29
|
informationId: v,
|
|
30
30
|
footnote: a,
|
|
31
31
|
attachments: C,
|
|
32
|
-
className:
|
|
33
|
-
children:
|
|
34
|
-
...
|
|
32
|
+
className: p,
|
|
33
|
+
children: u,
|
|
34
|
+
...k
|
|
35
35
|
}) {
|
|
36
|
-
const
|
|
37
|
-
return /* @__PURE__ */ e.jsx("label", { ...
|
|
38
|
-
/* @__PURE__ */ e.jsx(
|
|
36
|
+
const j = !!l, i = !!c, b = !!r, f = !!a;
|
|
37
|
+
return /* @__PURE__ */ e.jsx("label", { ...k, className: o(ve, p), children: /* @__PURE__ */ e.jsxs("div", { className: "kakadu-components-3146929190", children: [
|
|
38
|
+
/* @__PURE__ */ e.jsx(F, { className: o(te, Ce), children: /* @__PURE__ */ e.jsx("span", { children: d }) }),
|
|
39
39
|
/* @__PURE__ */ e.jsxs("span", { className: "kakadu-components-3298764637", children: [
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
u,
|
|
41
|
+
f ? /* @__PURE__ */ e.jsx(Be, { className: "kakadu-components-613632806", children: a }) : null,
|
|
42
42
|
C
|
|
43
43
|
] }),
|
|
44
|
-
|
|
44
|
+
j || i || b ? /* @__PURE__ */ e.jsx("div", { className: "kakadu-components-2927674627", children: j ? /* @__PURE__ */ e.jsx(M, { id: m, className: Se, children: l instanceof Error ? l.message : l }) : i ? /* @__PURE__ */ e.jsx(M, { id: x, className: Ee, children: c instanceof Error ? c.message : c }) : b ? /* @__PURE__ */ e.jsx(M, { id: v, className: Ie, children: r instanceof Error ? r.message : r }) : null }) : null
|
|
45
45
|
] }) });
|
|
46
46
|
}
|
|
47
|
-
const
|
|
48
|
-
function
|
|
49
|
-
ref:
|
|
47
|
+
const Le = 40, A = "kakadu-components-4233741488";
|
|
48
|
+
function Ge({
|
|
49
|
+
ref: d,
|
|
50
50
|
type: l,
|
|
51
|
-
label:
|
|
51
|
+
label: m,
|
|
52
52
|
error: c,
|
|
53
|
-
warning:
|
|
53
|
+
warning: x,
|
|
54
54
|
information: r,
|
|
55
55
|
footnote: v,
|
|
56
56
|
suggestion: a,
|
|
57
57
|
attachments: C,
|
|
58
|
-
actions:
|
|
59
|
-
hasCopyButton:
|
|
60
|
-
hasClearButton:
|
|
61
|
-
isMultiline:
|
|
58
|
+
actions: p = [],
|
|
59
|
+
hasCopyButton: u,
|
|
60
|
+
hasClearButton: k,
|
|
61
|
+
isMultiline: j,
|
|
62
62
|
onChange: i,
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
children: b,
|
|
64
|
+
className: f,
|
|
65
|
+
...S
|
|
65
66
|
}) {
|
|
66
|
-
const
|
|
67
|
+
const O = P(null), W = P(null), E = P(null), z = Ne(), I = fe(), D = `${I}-error`, G = `${I}-warning`, U = `${I}-information`, {
|
|
67
68
|
value: y,
|
|
68
|
-
disabled:
|
|
69
|
-
} =
|
|
70
|
-
fe(() => {
|
|
71
|
-
typeof s == "string" && S.current && oe(S.current.scrollHeight);
|
|
72
|
-
}, [s]);
|
|
73
|
-
const I = T(() => typeof s == "string" ? `${s} `.split(`
|
|
74
|
-
`) : [], [s]), ce = T(() => I.length, [I]), g = !!c, B = !g && !!j, w = !!r, q = g ? z : B ? D : w ? G : void 0;
|
|
69
|
+
disabled: ae
|
|
70
|
+
} = S, [se, q] = T(""), s = y ?? se, [oe, le] = T(), ce = l === "textarea" || !!j;
|
|
75
71
|
he(() => {
|
|
76
|
-
|
|
72
|
+
typeof s == "string" && E.current && le(E.current.scrollHeight);
|
|
73
|
+
}, [s]);
|
|
74
|
+
const B = H(() => typeof s == "string" ? `${s} `.split(`
|
|
75
|
+
`) : [], [s]), re = H(() => B.length, [B]), g = !!c, w = !g && !!x, L = !!r, J = g ? D : w ? G : L ? U : void 0;
|
|
76
|
+
xe(() => {
|
|
77
|
+
q(typeof y == "string" ? y : "");
|
|
77
78
|
}, [y]);
|
|
78
|
-
const
|
|
79
|
+
const K = h((n) => {
|
|
79
80
|
const {
|
|
80
81
|
value: t
|
|
81
82
|
} = n.target;
|
|
82
|
-
|
|
83
|
-
}, [i]),
|
|
84
|
-
typeof s == "string" && (
|
|
83
|
+
q(t), i == null || i(t, n);
|
|
84
|
+
}, [i]), ie = h(() => {
|
|
85
|
+
typeof s == "string" && (_(s), z({
|
|
85
86
|
type: "success",
|
|
86
87
|
children: "Copied to clipboard."
|
|
87
88
|
}));
|
|
88
|
-
}, [s,
|
|
89
|
-
var
|
|
90
|
-
const t =
|
|
89
|
+
}, [s, z]), N = h((n) => {
|
|
90
|
+
var Y;
|
|
91
|
+
const t = W.current ?? O.current ?? void 0;
|
|
91
92
|
if (t) {
|
|
92
|
-
const
|
|
93
|
-
if (
|
|
94
|
-
|
|
95
|
-
const
|
|
93
|
+
const Z = (Y = Object.getOwnPropertyDescriptor(t instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype, "value")) == null ? void 0 : Y.set;
|
|
94
|
+
if (Z) {
|
|
95
|
+
Z.call(t, n);
|
|
96
|
+
const ke = new Event("input", {
|
|
96
97
|
bubbles: !0
|
|
97
98
|
});
|
|
98
|
-
t.dispatchEvent(
|
|
99
|
+
t.dispatchEvent(ke), t.focus();
|
|
99
100
|
return;
|
|
100
101
|
}
|
|
101
102
|
}
|
|
102
103
|
throw new Error("Unable to set value.");
|
|
103
|
-
}, []),
|
|
104
|
+
}, []), de = h(() => {
|
|
104
105
|
N("");
|
|
105
|
-
}, [N]), [
|
|
106
|
+
}, [N]), [me, pe] = T(""), Q = !!a && me !== a, ue = h(() => {
|
|
106
107
|
if (a) {
|
|
107
108
|
try {
|
|
108
109
|
N(a);
|
|
109
110
|
} catch {
|
|
110
|
-
|
|
111
|
+
_(a);
|
|
111
112
|
}
|
|
112
|
-
|
|
113
|
+
pe(a);
|
|
113
114
|
}
|
|
114
|
-
}, [a, N]),
|
|
115
|
-
return /* @__PURE__ */ e.jsxs(
|
|
116
|
-
/* @__PURE__ */ e.jsx(
|
|
117
|
-
/* @__PURE__ */ e.jsx(
|
|
118
|
-
/* @__PURE__ */ e.jsx(
|
|
119
|
-
/* @__PURE__ */ e.jsx(
|
|
120
|
-
/* @__PURE__ */ e.jsx(
|
|
121
|
-
/* @__PURE__ */ e.jsx(
|
|
115
|
+
}, [a, N]), X = H(() => p.length, [p]);
|
|
116
|
+
return /* @__PURE__ */ e.jsxs(we, { ref: d, label: m, error: c, errorId: D, warning: x, warningId: G, information: r, informationId: U, footnote: v, attachments: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
|
|
117
|
+
/* @__PURE__ */ e.jsx(ge, { isCollapsed: !Q, children: Q ? /* @__PURE__ */ e.jsxs("button", { type: "button", className: o(je, te, "kakadu-components-4141839293"), onClick: ue, children: [
|
|
118
|
+
/* @__PURE__ */ e.jsx(ye, { label: "Apply suggestion" }),
|
|
119
|
+
/* @__PURE__ */ e.jsx(be, { width: 13, height: 13, className: "kakadu-components-1417828741" }),
|
|
120
|
+
/* @__PURE__ */ e.jsx(F, { className: "kakadu-components-1384720019", children: a }),
|
|
121
|
+
/* @__PURE__ */ e.jsx(ee, { className: "kakadu-components-2744733744" }),
|
|
122
|
+
/* @__PURE__ */ e.jsx(ne, {})
|
|
122
123
|
] }) : null }),
|
|
123
124
|
C
|
|
124
125
|
] }), style: {
|
|
125
|
-
"--button-padding": `calc(${
|
|
126
|
+
"--button-padding": `calc(${Le * ((u ? 1 : 0) + (k ? 1 : 0) + X)}px + 6px)`
|
|
126
127
|
}, children: [
|
|
127
128
|
/* @__PURE__ */ e.jsxs("div", { className: "kakadu-components-3146929190", children: [
|
|
128
|
-
|
|
129
|
-
/* @__PURE__ */ e.jsxs("span", { ref:
|
|
130
|
-
|
|
129
|
+
ce ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
|
|
130
|
+
/* @__PURE__ */ e.jsxs("span", { ref: E, "aria-hidden": !0, className: o($, f, "kakadu-components-2033521835"), children: [
|
|
131
|
+
B.map((n, t) => (
|
|
131
132
|
// eslint-disable-next-line react/no-array-index-key
|
|
132
133
|
/* @__PURE__ */ e.jsxs("span", { children: [
|
|
133
134
|
n,
|
|
134
|
-
|
|
135
|
+
re > 1 ? /* @__PURE__ */ e.jsx("br", {}) : null
|
|
135
136
|
] }, t)
|
|
136
137
|
)),
|
|
137
138
|
" "
|
|
138
139
|
] }),
|
|
139
|
-
/* @__PURE__ */ e.jsx("textarea", { ...
|
|
140
|
-
minHeight:
|
|
141
|
-
}, onChange:
|
|
142
|
-
] }) : /* @__PURE__ */ e.jsx("input", { ...
|
|
143
|
-
|
|
144
|
-
/* @__PURE__ */ e.jsx(
|
|
145
|
-
/* @__PURE__ */ e.jsx(
|
|
140
|
+
/* @__PURE__ */ e.jsx("textarea", { ...S, ref: W, rows: 1, "aria-invalid": g, "data-warning": w, "data-information": L, "aria-describedby": J, value: s, className: o($, f, "kakadu-components-2119524139"), style: {
|
|
141
|
+
minHeight: oe
|
|
142
|
+
}, onChange: K })
|
|
143
|
+
] }) : /* @__PURE__ */ e.jsx("input", { ...S, ref: O, type: l ?? "text", value: s, "aria-invalid": g, "data-warning": w, "data-information": L, "aria-describedby": J, className: o($, f), onChange: K }),
|
|
144
|
+
ae ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
|
|
145
|
+
/* @__PURE__ */ e.jsx(ee, { className: "kakadu-components-616311160" }),
|
|
146
|
+
/* @__PURE__ */ e.jsx(ne, { className: "kakadu-components-1962999040" })
|
|
146
147
|
] })
|
|
147
148
|
] }),
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
u || k || X > 0 ? /* @__PURE__ */ e.jsxs("div", { className: "kakadu-components-131986363", children: [
|
|
150
|
+
p.map((n, t) => /* @__PURE__ */ e.jsx(
|
|
151
|
+
R,
|
|
151
152
|
{
|
|
152
153
|
iconLeft: n.icon,
|
|
153
154
|
label: n.label,
|
|
154
155
|
tooltip: n.label,
|
|
155
|
-
className:
|
|
156
|
+
className: A,
|
|
156
157
|
onClick: n.onClick
|
|
157
158
|
},
|
|
158
159
|
n.label + t
|
|
159
160
|
)),
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
] }) : null
|
|
161
|
+
u ? /* @__PURE__ */ e.jsx(R, { iconLeft: "copy", label: "Copy", tooltip: "Copy", className: A, onClick: ie }) : null,
|
|
162
|
+
k ? /* @__PURE__ */ e.jsx(R, { iconLeft: "times", label: "Clear", tooltip: "Clear", className: A, onClick: de }) : null
|
|
163
|
+
] }) : null,
|
|
164
|
+
b
|
|
163
165
|
] });
|
|
164
166
|
}
|
|
165
167
|
export {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
168
|
+
we as InputLabel,
|
|
169
|
+
Ge as default,
|
|
170
|
+
Se as errorParagraph,
|
|
171
|
+
$ as inputStyles
|
|
170
172
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),N=require("@kuma-ui/core"),a=require("react"),S=require("../theme.js"),b=require("../icons/icon.js"),C=require("../use-synchronized-value
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),N=require("@kuma-ui/core"),a=require("react"),S=require("../theme.js"),b=require("../icons/icon.js"),C=require("../hooks/use-synchronized-value.js"),f=require("./popover.js"),F=require("./atom.js"),P=require("./text.js"),w=require("./hover-gradient.js"),K=require("./click-ripples.js"),z=require("./separator.js"),V=require("./decorators.js"),M=require("./spinner.js"),A=require("./skeleton.js"),D=require("./aria-text.js");function q(){const{value:t,setValue:n}=C.default("isKeyboardNavigating");return a.useMemo(()=>({isKeyboardNavigating:t,setIsKeyboardNavigating:n}),[t,n])}const T="kakadu-components-949294122";function H({isLoading:t,label:n,iconLeft:u,iconRight:x,href:o,target:m,shouldCloseOnClick:E=!0,decorators:i=[],submenu:s,className:d,onClick:c,...p}){const{isVisible:j,isPreparingFocus:l,isFocused:r,close:k}=f.usePopoverContext(),{isKeyboardNavigating:v}=q(),R=a.useRef(!0),h=a.useCallback(()=>{R.current=r},[r]),y=a.useCallback(I=>{!v&&!R.current||r&&(c==null||c(I),s?s.show():E&&(k==null||k()))},[v,r,c,s,E,k]),g=a.useMemo(()=>e.jsxRuntimeExports.jsxs(F.default,{as:o&&!t?"a":"button",...p,type:o&&!t?void 0:"button",role:"menuitem",href:o,target:m,inert:!j&&!l||t,disabled:o?void 0:!j&&!l||t,className:N.cx(S.buttonResetStyles,"kakadu-components-1772835671",r&&"kakadu-components-3160069815",v?"kakadu-components-2254977234":r&&"kakadu-components-278139688",d),onClick:y,onPointerDownCapture:h,children:[e.jsxRuntimeExports.jsx(P.Span,{className:"kakadu-components-1109353535",children:t?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(D.default,{children:n}),u?e.jsxRuntimeExports.jsx(M.default,{size:12}):null,e.jsxRuntimeExports.jsx(A.SkeletonInstance,{height:"1em",width:"100%"}),x?e.jsxRuntimeExports.jsx(M.default,{size:12}):null]}):e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[u?e.jsxRuntimeExports.jsx(b.default,{width:12,height:12,type:u}):null,e.jsxRuntimeExports.jsx("span",{className:"kakadu-components-4055589237",children:n}),x?e.jsxRuntimeExports.jsx(b.default,{width:12,height:12,type:x}):null]})}),v||t?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(K.default,{isActive:r,size:100}),e.jsxRuntimeExports.jsx(w.default,{isActive:r,size:150,className:w.normalBlendStyles})]})]}),[o,t,p,m,j,l,r,v,d,y,h,u,n,x]);return e.jsxRuntimeExports.jsx(V.default,{decorators:i,children:s?e.jsxRuntimeExports.jsx(_,{menu:s.popoverMenu,className:"kakadu-components-1861176543",children:g}):g})}function $(t){if("type"in t){if(t.type==="separator")return e.jsxRuntimeExports.jsx(z.default,{});if(t.type==="group")return e.jsxRuntimeExports.jsx(P.Span,{className:"kakadu-components-1499037363",children:t.label})}return e.jsxRuntimeExports.jsx(H,{...t})}function B({items:t}){const{isFocused:n}=f.usePopoverContext(),[u,x]=a.useState([]),{setIsKeyboardNavigating:o}=q(),m=a.useCallback(i=>{i&&x(s=>s.includes(i)?s:[...s,i])},[]),E=a.useCallback(i=>{n&&(i.currentTarget.focus(),o(!1))},[n,o]);return a.useEffect(()=>{if(!n)return;const i=s=>{const d=u.filter(r=>r.isConnected),c=d.length;if(c===0)return;let p;const j=document.activeElement;let l=j?d.indexOf(j):-1;switch(l===-1&&(l=0),s.key){case"ArrowDown":{p=(l+1)%c;break}case"ArrowUp":{p=(l-1+c)%c;break}case"Home":{p=0;break}case"End":{p=c-1;break}case"Tab":{o(!0);return}}if(p!==void 0){s.preventDefault(),s.stopPropagation();const r=d[p];r&&(r.focus(),o(!0))}};return window.addEventListener("keydown",i,{capture:!0}),()=>{window.removeEventListener("keydown",i,{capture:!0})}},[n,u,o]),e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:t.map((i,s)=>e.jsxRuntimeExports.jsx($,{...i,reference:m,onMouseEnter:E},s))})}function G({items:t,...n}){return e.jsxRuntimeExports.jsx(f.default,{...n,as:"nav",role:"menu",innerClassName:"kakadu-components-3600436535",children:e.jsxRuntimeExports.jsx(B,{items:t})})}function O(t){const n=a.useMemo(()=>({items:t}),[t]),{isVisible:u,show:x,close:o,popover:m}=f.usePopover(G,n);return a.useMemo(()=>({isVisible:u,show:x,close:o,popoverMenu:m}),[u,x,o,m])}function _({menu:t,className:n,children:u}){return e.jsxRuntimeExports.jsxs(f.PopoverContainer,{className:n,children:[u,t]})}exports.dangerPopoverMenuItemStyles=T;exports.default=_;exports.usePopoverMenu=O;
|
|
@@ -3,7 +3,7 @@ import { cx as F } from "@kuma-ui/core";
|
|
|
3
3
|
import { useMemo as j, useState as A, useCallback as h, useEffect as K, useRef as z } from "react";
|
|
4
4
|
import { buttonResetStyles as C } from "../theme.mjs";
|
|
5
5
|
import b from "../icons/icon.mjs";
|
|
6
|
-
import
|
|
6
|
+
import D from "../hooks/use-synchronized-value.mjs";
|
|
7
7
|
import V, { PopoverContainer as H, usePopover as T, usePopoverContext as N } from "./popover.mjs";
|
|
8
8
|
import R from "./atom.mjs";
|
|
9
9
|
import { Span as M } from "./text.mjs";
|