@kakadu/components 3.4.0 → 3.5.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/build/components/button.d.ts +2 -1
- package/build/components/button.js +1 -1
- package/build/components/button.mjs +46 -45
- package/build/components/hover-gradient.js +1 -1
- package/build/components/hover-gradient.mjs +20 -20
- package/build/components/icon-button.d.ts +2 -1
- package/build/components/icon-button.js +1 -1
- package/build/components/icon-button.mjs +19 -18
- package/build/components/popover-menu.js +1 -1
- package/build/components/popover-menu.mjs +87 -85
- package/build/components/popover.js +1 -1
- package/build/components/popover.mjs +11 -11
- package/build/components/text-button.d.ts +2 -1
- package/build/components/text-button.js +1 -1
- package/build/components/text-button.mjs +26 -25
- package/package.json +1 -1
|
@@ -24,6 +24,7 @@ type BaseButtonProperties = Omit<HTMLProps<HTMLButtonElement>, 'children'> & {
|
|
|
24
24
|
readonly iconRight?: IconType | ReactNode;
|
|
25
25
|
readonly isLoading?: boolean;
|
|
26
26
|
readonly isSkeleton?: boolean;
|
|
27
|
+
readonly isSkeletonAnimated?: boolean;
|
|
27
28
|
readonly hasMovingGradients?: boolean;
|
|
28
29
|
readonly movingGradientsCount?: number;
|
|
29
30
|
readonly hasMovingStars?: boolean;
|
|
@@ -36,5 +37,5 @@ export type ButtonProperties = BaseButtonProperties & ({
|
|
|
36
37
|
children?: never;
|
|
37
38
|
label: string;
|
|
38
39
|
});
|
|
39
|
-
export default function Button({ type, variant, href, target, rel, disabled, className, children, label, tooltip, tooltipPosition, iconLeft, iconRight, isLoading, isSkeleton, hasMovingGradients, movingGradientsCount, hasMovingStars, movingStarsCount, ...properties }: ButtonProperties): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
export default function Button({ type, variant, href, target, rel, disabled, className, children, label, tooltip, tooltipPosition, iconLeft, iconRight, isLoading, isSkeleton, isSkeletonAnimated, hasMovingGradients, movingGradientsCount, hasMovingStars, movingStarsCount, ...properties }: ButtonProperties): import("react/jsx-runtime").JSX.Element;
|
|
40
41
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),R=require("react"),u=require("@kuma-ui/core"),$=require("../theme.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),R=require("react"),u=require("@kuma-ui/core"),$=require("../theme.js"),C=require("../icons/icon.js"),F=require("./spinner.js"),O=require("./moving-gradients.js"),P=require("./moving-stars.js"),H=require("./theme-setter.js"),J=require("./click-ripples.js"),E=require("./hover-gradient.js"),K=require("./button-tooltip.js"),Q=require("./aria-text.js"),U=require("./atom.js"),X=require("./skeleton.js");function f({isLoading:s,size:n,className:o}){return e.jsxRuntimeExports.jsx("div",{className:u.cx("kakadu-components-2832510379",s&&"kakadu-components-4114685569",o),children:e.jsxRuntimeExports.jsx("div",{className:"kakadu-components-920467642",children:e.jsxRuntimeExports.jsx(F.RevealSpinner,{isVisible:s,size:n})})})}var v=(s=>(s.primary="primary",s.secondary="secondary",s.warning="warning",s.danger="danger",s))(v||{});function b({icon:s,variant:n="primary",className:o,...c}){return e.jsxRuntimeExports.jsx("div",{...c,className:u.cx("kakadu-components-2658660333",n==="secondary"&&"kakadu-components-3469662110",o),children:typeof s=="string"?e.jsxRuntimeExports.jsx(C.default,{width:14,height:14,type:s}):s})}const S="kakadu-components-2244098950",Y="kakadu-components-3923184173",g="kakadu-components-317965671",q="kakadu-components-1978976872";function Z({type:s,variant:n="primary",href:o,target:c,rel:h,disabled:_,className:N,children:t,label:w,tooltip:i,tooltipPosition:B,iconLeft:m,iconRight:d,isLoading:x,isSkeleton:r,isSkeletonAnimated:M=!0,hasMovingGradients:D=!1,movingGradientsCount:l=4,hasMovingStars:I=!1,movingStarsCount:p=10,...T}){const k=R.useId(),j=R.useRef(null),G=H.useIsDarkMode(j),z=s??"button",A=D&&l>0,W=I&&p>0,a=o&&!r,y=!!_||!!x||!!r;return e.jsxRuntimeExports.jsxs("div",{className:"kakadu-components-3559664923",children:[e.jsxRuntimeExports.jsxs(U.default,{...T,as:a?"a":"button",type:a?void 0:z,href:a?o:void 0,target:a?c:void 0,rel:a?h:void 0,"aria-describedby":i?k:void 0,disabled:a?void 0:y,className:u.cx($.effectStyles,"kakadu-components-3709284365",!!m&&"kakadu-components-2735110382",!t&&"kakadu-components-3621693630",n==="secondary"&&S,n==="warning"&&g,n==="danger"&&q,r&&"kakadu-components-2662775151",N),children:[m?e.jsxRuntimeExports.jsx(b,{variant:n,icon:m,className:t?"kakadu-components-136489413":void 0}):null,t?e.jsxRuntimeExports.jsx("div",{ref:j,className:"kakadu-components-207477259",children:t}):e.jsxRuntimeExports.jsx(Q.default,{children:w}),d?e.jsxRuntimeExports.jsx(b,{variant:n,icon:d,className:t?"kakadu-components-3631501803":void 0}):null,e.jsxRuntimeExports.jsx(f,{isLoading:x}),A&&e.jsxRuntimeExports.jsx(O.default,{opacity:G?.4:.3,maximumGradientsCount:l,className:u.cx("kakadu-components-2055737617",n==="secondary"&&"kakadu-components-2972748387")}),W&&e.jsxRuntimeExports.jsx(P.default,{maximumStarsCount:p,className:"kakadu-components-1226008615"}),y?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(J.default,{size:t?void 0:50}),e.jsxRuntimeExports.jsx(E.default,{size:t?void 0:50,className:n==="secondary"?E.normalBlendStyles:void 0})]}),i?e.jsxRuntimeExports.jsx(K.default,{id:k,label:i,position:B}):null]}),r?e.jsxRuntimeExports.jsx("div",{className:"kakadu-components-3422055155",children:e.jsxRuntimeExports.jsx(X.SkeletonInstance,{width:"100%",height:"100%",isAnimated:M})}):null]})}exports.ButtonLoader=f;exports.ButtonVariant=v;exports.buttonDangerStyles=q;exports.buttonSecondaryStyles=S;exports.buttonSuccessStyles=Y;exports.buttonWarningStyles=g;exports.default=Z;
|
|
@@ -1,81 +1,82 @@
|
|
|
1
1
|
import { j as o } from "../jsx-runtime-B4hRZ52C.mjs";
|
|
2
|
-
import { useId as
|
|
2
|
+
import { useId as R, useRef as T } from "react";
|
|
3
3
|
import { cx as m } from "@kuma-ui/core";
|
|
4
|
-
import { effectStyles as
|
|
5
|
-
import
|
|
6
|
-
import { RevealSpinner as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { useIsDarkMode as
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import { SkeletonInstance as
|
|
16
|
-
function
|
|
4
|
+
import { effectStyles as z } from "../theme.mjs";
|
|
5
|
+
import C from "../icons/icon.mjs";
|
|
6
|
+
import { RevealSpinner as E } from "./spinner.mjs";
|
|
7
|
+
import F from "./moving-gradients.mjs";
|
|
8
|
+
import H from "./moving-stars.mjs";
|
|
9
|
+
import { useIsDarkMode as W } from "./theme-setter.mjs";
|
|
10
|
+
import q from "./click-ripples.mjs";
|
|
11
|
+
import J, { normalBlendStyles as K } from "./hover-gradient.mjs";
|
|
12
|
+
import O from "./button-tooltip.mjs";
|
|
13
|
+
import P from "./aria-text.mjs";
|
|
14
|
+
import Q from "./atom.mjs";
|
|
15
|
+
import { SkeletonInstance as U } from "./skeleton.mjs";
|
|
16
|
+
function X({
|
|
17
17
|
isLoading: s,
|
|
18
18
|
size: n,
|
|
19
19
|
className: a
|
|
20
20
|
}) {
|
|
21
|
-
return /* @__PURE__ */ o.jsx("div", { className: m("kakadu-components-2832510379", s && "kakadu-components-4114685569", a), children: /* @__PURE__ */ o.jsx("div", { className: "kakadu-components-920467642", children: /* @__PURE__ */ o.jsx(
|
|
21
|
+
return /* @__PURE__ */ o.jsx("div", { className: m("kakadu-components-2832510379", s && "kakadu-components-4114685569", a), children: /* @__PURE__ */ o.jsx("div", { className: "kakadu-components-920467642", children: /* @__PURE__ */ o.jsx(E, { isVisible: s, size: n }) }) });
|
|
22
22
|
}
|
|
23
|
-
var
|
|
23
|
+
var Y = /* @__PURE__ */ ((s) => (s.primary = "primary", s.secondary = "secondary", s.warning = "warning", s.danger = "danger", s))(Y || {});
|
|
24
24
|
function j({
|
|
25
25
|
icon: s,
|
|
26
26
|
variant: n = "primary",
|
|
27
27
|
className: a,
|
|
28
|
-
...
|
|
28
|
+
...d
|
|
29
29
|
}) {
|
|
30
|
-
return /* @__PURE__ */ o.jsx("div", { ...
|
|
30
|
+
return /* @__PURE__ */ o.jsx("div", { ...d, className: m("kakadu-components-2658660333", n === "secondary" && "kakadu-components-3469662110", a), children: typeof s == "string" ? /* @__PURE__ */ o.jsx(C, { width: 14, height: 14, type: s }) : s });
|
|
31
31
|
}
|
|
32
|
-
const
|
|
33
|
-
function
|
|
32
|
+
const Z = "kakadu-components-2244098950", ko = "kakadu-components-3923184173", _ = "kakadu-components-317965671", $ = "kakadu-components-1978976872";
|
|
33
|
+
function xo({
|
|
34
34
|
type: s,
|
|
35
35
|
variant: n = "primary",
|
|
36
36
|
href: a,
|
|
37
|
-
target:
|
|
37
|
+
target: d,
|
|
38
38
|
rel: v,
|
|
39
39
|
disabled: b,
|
|
40
40
|
className: g,
|
|
41
41
|
children: e,
|
|
42
42
|
label: N,
|
|
43
|
-
tooltip:
|
|
43
|
+
tooltip: c,
|
|
44
44
|
tooltipPosition: h,
|
|
45
45
|
iconLeft: i,
|
|
46
|
-
iconRight:
|
|
47
|
-
isLoading:
|
|
46
|
+
iconRight: u,
|
|
47
|
+
isLoading: p,
|
|
48
48
|
isSkeleton: r,
|
|
49
|
-
|
|
49
|
+
isSkeletonAnimated: S = !0,
|
|
50
|
+
hasMovingGradients: w = !1,
|
|
50
51
|
movingGradientsCount: l = 4,
|
|
51
|
-
hasMovingStars:
|
|
52
|
+
hasMovingStars: B = !1,
|
|
52
53
|
movingStarsCount: k = 10,
|
|
53
|
-
...
|
|
54
|
+
...I
|
|
54
55
|
}) {
|
|
55
|
-
const x =
|
|
56
|
+
const x = R(), f = T(null), M = W(f), A = s ?? "button", D = w && l > 0, G = B && k > 0, t = a && !r, y = !!b || !!p || !!r;
|
|
56
57
|
return /* @__PURE__ */ o.jsxs("div", { className: "kakadu-components-3559664923", children: [
|
|
57
|
-
/* @__PURE__ */ o.jsxs(
|
|
58
|
+
/* @__PURE__ */ o.jsxs(Q, { ...I, as: t ? "a" : "button", type: t ? void 0 : A, href: t ? a : void 0, target: t ? d : void 0, rel: t ? v : void 0, "aria-describedby": c ? x : void 0, disabled: t ? void 0 : y, className: m(z, "kakadu-components-3709284365", !!i && "kakadu-components-2735110382", !e && "kakadu-components-3621693630", n === "secondary" && Z, n === "warning" && _, n === "danger" && $, r && "kakadu-components-2662775151", g), children: [
|
|
58
59
|
i ? /* @__PURE__ */ o.jsx(j, { variant: n, icon: i, className: e ? "kakadu-components-136489413" : void 0 }) : null,
|
|
59
|
-
e ? /* @__PURE__ */ o.jsx("div", { ref: f, className: "kakadu-components-207477259", children: e }) : /* @__PURE__ */ o.jsx(
|
|
60
|
-
|
|
61
|
-
/* @__PURE__ */ o.jsx(
|
|
62
|
-
D && /* @__PURE__ */ o.jsx(
|
|
63
|
-
|
|
60
|
+
e ? /* @__PURE__ */ o.jsx("div", { ref: f, className: "kakadu-components-207477259", children: e }) : /* @__PURE__ */ o.jsx(P, { children: N }),
|
|
61
|
+
u ? /* @__PURE__ */ o.jsx(j, { variant: n, icon: u, className: e ? "kakadu-components-3631501803" : void 0 }) : null,
|
|
62
|
+
/* @__PURE__ */ o.jsx(X, { isLoading: p }),
|
|
63
|
+
D && /* @__PURE__ */ o.jsx(F, { opacity: M ? 0.4 : 0.3, maximumGradientsCount: l, className: m("kakadu-components-2055737617", n === "secondary" && "kakadu-components-2972748387") }),
|
|
64
|
+
G && /* @__PURE__ */ o.jsx(H, { maximumStarsCount: k, className: "kakadu-components-1226008615" }),
|
|
64
65
|
y ? null : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
|
|
65
|
-
/* @__PURE__ */ o.jsx(
|
|
66
|
-
/* @__PURE__ */ o.jsx(
|
|
66
|
+
/* @__PURE__ */ o.jsx(q, { size: e ? void 0 : 50 }),
|
|
67
|
+
/* @__PURE__ */ o.jsx(J, { size: e ? void 0 : 50, className: n === "secondary" ? K : void 0 })
|
|
67
68
|
] }),
|
|
68
|
-
|
|
69
|
+
c ? /* @__PURE__ */ o.jsx(O, { id: x, label: c, position: h }) : null
|
|
69
70
|
] }),
|
|
70
|
-
r ? /* @__PURE__ */ o.jsx("div", { className: "kakadu-components-3422055155", children: /* @__PURE__ */ o.jsx(
|
|
71
|
+
r ? /* @__PURE__ */ o.jsx("div", { className: "kakadu-components-3422055155", children: /* @__PURE__ */ o.jsx(U, { width: "100%", height: "100%", isAnimated: S }) }) : null
|
|
71
72
|
] });
|
|
72
73
|
}
|
|
73
74
|
export {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
75
|
+
X as ButtonLoader,
|
|
76
|
+
Y as ButtonVariant,
|
|
77
|
+
$ as buttonDangerStyles,
|
|
78
|
+
Z as buttonSecondaryStyles,
|
|
79
|
+
ko as buttonSuccessStyles,
|
|
80
|
+
_ as buttonWarningStyles,
|
|
81
|
+
xo as default
|
|
81
82
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("../jsx-runtime-BB_1_6y_.js"),t=require("react"),x=require("@kuma-ui/core"),$="kakadu-components-2608453841";function q({isActive:i=!0,size:k=200,className:E,...g}){const l=t.useRef(null),n=t.useRef(null),[b,s]=t.useState(!1),[o,j]=t.useState();return t.useEffect(()=>{if(!i){s(!1);return}const c=l.current;if(!c)return;n.current||(n.current=c.parentElement);const e=n.current;if(!e)return;const a=f=>{const S=f.target;if(!e.contains(S))return;const y=e.getBoundingClientRect(),{clientX:r,clientY:u}=f,{left:d,right:L,top:v,bottom:R}=y;r>d&&r<L&&u>v&&u<R&&(s(!0),j([r-d,u-v]))},m=()=>{s(!1)};return e.addEventListener("mousemove",a),e.addEventListener("mouseleave",m),()=>{e.removeEventListener("mousemove",a),e.removeEventListener("mouseleave",m)}},[i]),p.jsxRuntimeExports.jsx("div",{...g,ref:l,className:x.cx("kakadu-components-1237006455",E),children:o?p.jsxRuntimeExports.jsx("div",{style:{"--size":`${k}px`,"--offset-x":`${o[0]}px`,"--offset-y":`${o[1]}px`},className:x.cx("kakadu-components-611160091",b&&"kakadu-components-3627966847")}):null})}exports.default=q;exports.normalBlendStyles=$;
|
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import { j as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { cx as
|
|
1
|
+
import { j as p } from "../jsx-runtime-B4hRZ52C.mjs";
|
|
2
|
+
import { useRef as v, useState as x, useEffect as N } from "react";
|
|
3
|
+
import { cx as k } from "@kuma-ui/core";
|
|
4
4
|
const z = "kakadu-components-2608453841";
|
|
5
5
|
function C({
|
|
6
|
-
isActive:
|
|
6
|
+
isActive: i = !0,
|
|
7
7
|
size: E = 200,
|
|
8
8
|
className: g,
|
|
9
9
|
...L
|
|
10
10
|
}) {
|
|
11
|
-
const
|
|
11
|
+
const a = v(null), t = v(null), [b, n] = x(!1), [s, j] = x();
|
|
12
12
|
return N(() => {
|
|
13
|
-
if (!
|
|
13
|
+
if (!i) {
|
|
14
14
|
n(!1);
|
|
15
15
|
return;
|
|
16
16
|
}
|
|
17
|
-
const
|
|
18
|
-
if (!
|
|
17
|
+
const u = a.current;
|
|
18
|
+
if (!u)
|
|
19
19
|
return;
|
|
20
|
-
t.current || (t.current =
|
|
20
|
+
t.current || (t.current = u.parentElement);
|
|
21
21
|
const e = t.current;
|
|
22
22
|
if (!e)
|
|
23
23
|
return;
|
|
24
|
-
const c = (
|
|
25
|
-
const y =
|
|
24
|
+
const c = (m) => {
|
|
25
|
+
const y = m.target;
|
|
26
26
|
if (!e.contains(y))
|
|
27
27
|
return;
|
|
28
28
|
const $ = e.getBoundingClientRect(), {
|
|
29
29
|
clientX: o,
|
|
30
30
|
clientY: r
|
|
31
|
-
} =
|
|
32
|
-
left:
|
|
31
|
+
} = m, {
|
|
32
|
+
left: f,
|
|
33
33
|
right: h,
|
|
34
|
-
top:
|
|
34
|
+
top: d,
|
|
35
35
|
bottom: B
|
|
36
36
|
} = $;
|
|
37
|
-
o >
|
|
38
|
-
},
|
|
37
|
+
o > f && o < h && r > d && r < B && (n(!0), j([o - f, r - d]));
|
|
38
|
+
}, l = () => {
|
|
39
39
|
n(!1);
|
|
40
40
|
};
|
|
41
|
-
return e.addEventListener("mousemove", c), e.addEventListener("mouseleave",
|
|
42
|
-
e.removeEventListener("mousemove", c), e.removeEventListener("mouseleave",
|
|
41
|
+
return e.addEventListener("mousemove", c), e.addEventListener("mouseleave", l), () => {
|
|
42
|
+
e.removeEventListener("mousemove", c), e.removeEventListener("mouseleave", l);
|
|
43
43
|
};
|
|
44
|
-
}, []), /* @__PURE__ */
|
|
44
|
+
}, [i]), /* @__PURE__ */ p.jsx("div", { ...L, ref: a, className: k("kakadu-components-1237006455", g), children: s ? /* @__PURE__ */ p.jsx("div", { style: {
|
|
45
45
|
"--size": `${E}px`,
|
|
46
46
|
"--offset-x": `${s[0]}px`,
|
|
47
47
|
"--offset-y": `${s[1]}px`
|
|
48
|
-
}, className:
|
|
48
|
+
}, className: k("kakadu-components-611160091", b && "kakadu-components-3627966847") }) : null });
|
|
49
49
|
}
|
|
50
50
|
export {
|
|
51
51
|
C as default,
|
|
@@ -14,5 +14,6 @@ export type IconButtonProperties = HTMLProps<HTMLButtonElement> & {
|
|
|
14
14
|
readonly tooltipPosition?: ButtonTooltipPosition;
|
|
15
15
|
readonly isLoading?: boolean;
|
|
16
16
|
readonly isSkeleton?: boolean;
|
|
17
|
+
readonly isSkeletonAnimated?: boolean;
|
|
17
18
|
};
|
|
18
|
-
export default function IconButton({ icon, variant, label, tooltipPosition, disabled, isLoading, isSkeleton, className, ...properties }: IconButtonProperties): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export default function IconButton({ icon, variant, label, tooltipPosition, disabled, isLoading, isSkeleton, isSkeletonAnimated, className, ...properties }: IconButtonProperties): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../jsx-runtime-BB_1_6y_.js"),s=require("react"),n=require("@kuma-ui/core"),i=require("../icons/icon.js"),R=require("../theme.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../jsx-runtime-BB_1_6y_.js"),s=require("react"),n=require("@kuma-ui/core"),i=require("../icons/icon.js"),R=require("../theme.js"),I=require("./theme-setter.js"),u=require("./button.js"),T=require("./button-tooltip.js"),B=require("./click-ripples.js"),S=require("./hover-gradient.js"),D=require("./skeleton.js");var b=(e=>(e.default="default",e.success="success",e.warning="warning",e.danger="danger",e))(b||{});function M({icon:e,variant:o="default",label:m,tooltipPosition:g,disabled:y,isLoading:x,isSkeleton:l,isSkeletonAnimated:E=!0,className:q,...w}){const p=s.useId(),_=I.useIsDarkMode(),[r,N]=s.useState(e),[k,d]=s.useState(!1),f=s.useRef(e),c=s.useRef(null);s.useEffect(()=>{f.current=e},[e]);const a=s.useCallback(()=>{c.current&&(clearTimeout(c.current),c.current=null)},[]);s.useEffect(()=>{if(r===e){d(h=>h&&!1);return}d(!0),a(),c.current=setTimeout(()=>{d(!1),N(f.current)},370)},[r,e,a]),s.useEffect(()=>()=>{a()},[a]);const j=!!y||!!x||!!l;return t.jsxRuntimeExports.jsxs("div",{className:"kakadu-components-4096632152",children:[t.jsxRuntimeExports.jsxs("button",{...w,type:"button","aria-label":m,"aria-describedby":p,disabled:j,className:n.cx(R.buttonResetStyles,R.effectStyles,"kakadu-components-1951951921",o==="default"&&n.cx(u.buttonSecondaryStyles,"kakadu-components-1561784812"),o==="success"&&n.cx(u.buttonSuccessStyles,"kakadu-components-1398421429"),o==="warning"&&n.cx(u.buttonWarningStyles,"kakadu-components-1872098090"),o==="danger"&&n.cx(u.buttonDangerStyles,"kakadu-components-2064536093"),l&&"kakadu-components-2662775151",q),children:[t.jsxRuntimeExports.jsxs("span",{"data-theme":o==="default"?_?"dark":"light":"dark",className:"kakadu-components-3040141419",children:[t.jsxRuntimeExports.jsx(i.default,{width:16,height:16,type:r,className:n.cx(i.iconShadowStyles,"kakadu-components-1562914001",k&&"kakadu-components-2360250719")}),r===e?null:t.jsxRuntimeExports.jsx(i.default,{width:16,height:16,type:e,className:n.cx(i.iconShadowStyles,"kakadu-components-1224061930",k&&"kakadu-components-2519520784")})]}),t.jsxRuntimeExports.jsx(u.ButtonLoader,{isLoading:x,size:14}),t.jsxRuntimeExports.jsx(T.default,{id:p,label:m,position:g}),j?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(B.default,{size:50}),t.jsxRuntimeExports.jsx(S.default,{size:50,className:o==="default"?S.normalBlendStyles:void 0})]})]}),l?t.jsxRuntimeExports.jsx("div",{className:"kakadu-components-3422055155",children:t.jsxRuntimeExports.jsx(D.SkeletonInstance,{width:"100%",height:"100%",isAnimated:E})}):null]})}exports.IconButtonVariant=b;exports.default=M;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { j as s } from "../jsx-runtime-B4hRZ52C.mjs";
|
|
2
|
-
import { useId as
|
|
2
|
+
import { useId as D, useState as x, useRef as g, useEffect as l, useCallback as T } from "react";
|
|
3
3
|
import { cx as t } from "@kuma-ui/core";
|
|
4
4
|
import j, { iconShadowStyles as y } from "../icons/icon.mjs";
|
|
5
|
-
import { buttonResetStyles as
|
|
6
|
-
import { useIsDarkMode as
|
|
7
|
-
import { ButtonLoader as
|
|
5
|
+
import { buttonResetStyles as z, effectStyles as C } from "../theme.mjs";
|
|
6
|
+
import { useIsDarkMode as E } from "./theme-setter.mjs";
|
|
7
|
+
import { ButtonLoader as M, buttonSecondaryStyles as v, buttonSuccessStyles as A, buttonWarningStyles as F, buttonDangerStyles as G } from "./button.mjs";
|
|
8
8
|
import H from "./button-tooltip.mjs";
|
|
9
9
|
import P from "./click-ripples.mjs";
|
|
10
10
|
import W, { normalBlendStyles as q } from "./hover-gradient.mjs";
|
|
11
|
-
import { SkeletonInstance as
|
|
12
|
-
var
|
|
13
|
-
function
|
|
11
|
+
import { SkeletonInstance as J } from "./skeleton.mjs";
|
|
12
|
+
var K = /* @__PURE__ */ ((e) => (e.default = "default", e.success = "success", e.warning = "warning", e.danger = "danger", e))(K || {});
|
|
13
|
+
function se({
|
|
14
14
|
icon: e,
|
|
15
15
|
variant: o = "default",
|
|
16
16
|
label: d,
|
|
@@ -18,14 +18,15 @@ function ee({
|
|
|
18
18
|
disabled: b,
|
|
19
19
|
isLoading: m,
|
|
20
20
|
isSkeleton: u,
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
isSkeletonAnimated: w = !0,
|
|
22
|
+
className: N,
|
|
23
|
+
...R
|
|
23
24
|
}) {
|
|
24
|
-
const i =
|
|
25
|
+
const i = D(), I = E(), [n, B] = x(e), [p, c] = x(!1), f = g(e), a = g(null);
|
|
25
26
|
l(() => {
|
|
26
27
|
f.current = e;
|
|
27
28
|
}, [e]);
|
|
28
|
-
const r =
|
|
29
|
+
const r = T(() => {
|
|
29
30
|
a.current && (clearTimeout(a.current), a.current = null);
|
|
30
31
|
}, []);
|
|
31
32
|
l(() => {
|
|
@@ -34,29 +35,29 @@ function ee({
|
|
|
34
35
|
return;
|
|
35
36
|
}
|
|
36
37
|
c(!0), r(), a.current = setTimeout(() => {
|
|
37
|
-
c(!1),
|
|
38
|
+
c(!1), B(f.current);
|
|
38
39
|
}, 370);
|
|
39
40
|
}, [n, e, r]), l(() => () => {
|
|
40
41
|
r();
|
|
41
42
|
}, [r]);
|
|
42
43
|
const k = !!b || !!m || !!u;
|
|
43
44
|
return /* @__PURE__ */ s.jsxs("div", { className: "kakadu-components-4096632152", children: [
|
|
44
|
-
/* @__PURE__ */ s.jsxs("button", { ...
|
|
45
|
-
/* @__PURE__ */ s.jsxs("span", { "data-theme": o === "default" ?
|
|
45
|
+
/* @__PURE__ */ s.jsxs("button", { ...R, type: "button", "aria-label": d, "aria-describedby": i, disabled: k, className: t(z, C, "kakadu-components-1951951921", o === "default" && t(v, "kakadu-components-1561784812"), o === "success" && t(A, "kakadu-components-1398421429"), o === "warning" && t(F, "kakadu-components-1872098090"), o === "danger" && t(G, "kakadu-components-2064536093"), u && "kakadu-components-2662775151", N), children: [
|
|
46
|
+
/* @__PURE__ */ s.jsxs("span", { "data-theme": o === "default" ? I ? "dark" : "light" : "dark", className: "kakadu-components-3040141419", children: [
|
|
46
47
|
/* @__PURE__ */ s.jsx(j, { width: 16, height: 16, type: n, className: t(y, "kakadu-components-1562914001", p && "kakadu-components-2360250719") }),
|
|
47
48
|
n === e ? null : /* @__PURE__ */ s.jsx(j, { width: 16, height: 16, type: e, className: t(y, "kakadu-components-1224061930", p && "kakadu-components-2519520784") })
|
|
48
49
|
] }),
|
|
49
|
-
/* @__PURE__ */ s.jsx(
|
|
50
|
+
/* @__PURE__ */ s.jsx(M, { isLoading: m, size: 14 }),
|
|
50
51
|
/* @__PURE__ */ s.jsx(H, { id: i, label: d, position: S }),
|
|
51
52
|
k ? null : /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
|
|
52
53
|
/* @__PURE__ */ s.jsx(P, { size: 50 }),
|
|
53
54
|
/* @__PURE__ */ s.jsx(W, { size: 50, className: o === "default" ? q : void 0 })
|
|
54
55
|
] })
|
|
55
56
|
] }),
|
|
56
|
-
u ? /* @__PURE__ */ s.jsx("div", { className: "kakadu-components-3422055155", children: /* @__PURE__ */ s.jsx(
|
|
57
|
+
u ? /* @__PURE__ */ s.jsx("div", { className: "kakadu-components-3422055155", children: /* @__PURE__ */ s.jsx(J, { width: "100%", height: "100%", isAnimated: w }) }) : null
|
|
57
58
|
] });
|
|
58
59
|
}
|
|
59
60
|
export {
|
|
60
|
-
|
|
61
|
-
|
|
61
|
+
K as IconButtonVariant,
|
|
62
|
+
se as default
|
|
62
63
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../jsx-runtime-BB_1_6y_.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../jsx-runtime-BB_1_6y_.js"),q=require("@kuma-ui/core"),a=require("react"),I=require("../theme.js"),h=require("../icons/icon.js"),j=require("./popover.js"),N=require("./atom.js"),y=require("./text.js"),b=require("./hover-gradient.js"),S=require("./click-ripples.js"),_=require("./separator.js"),C=require("./decorators.js"),k=new Set;function w(){const[e,n]=a.useState(!1),u=a.useCallback(s=>{n(s);for(const c of k)c(s)},[]);return a.useEffect(()=>{const s=c=>{n(c)};return k.add(s),()=>{k.delete(s)}},[]),a.useMemo(()=>({isKeyboardNavigating:e,setIsKeyboardNavigating:u}),[e,u])}function K({label:e,iconLeft:n,iconRight:u,href:s,shouldCloseOnClick:c=!0,decorators:v=[],submenu:p,className:i,onClick:r,...f}){const{isVisible:d,isFocused:o,close:x}=j.usePopoverContext(),{isKeyboardNavigating:l}=w(),m=a.useRef(!0),E=a.useCallback(()=>{m.current=o},[o]),R=a.useCallback(P=>{!l&&!m.current||o&&(r==null||r(P),p?p.show():c&&(x==null||x()))},[l,o,r,p,c,x]),g=a.useMemo(()=>t.jsxRuntimeExports.jsxs(N.default,{as:s?"a":"button",...f,type:s?void 0:"button",role:"menuitem",href:s,disabled:s?void 0:!d,className:q.cx(I.buttonResetStyles,"kakadu-components-4075327442",o&&"kakadu-components-3160069815",l?"kakadu-components-2043829669":o&&"kakadu-components-2862719809",i),onClick:R,onPointerDownCapture:E,children:[t.jsxRuntimeExports.jsxs(y.Span,{className:"kakadu-components-1109353535",children:[n?t.jsxRuntimeExports.jsx(h.default,{width:12,height:12,type:n}):null,t.jsxRuntimeExports.jsx("span",{className:"kakadu-components-913703148",children:e}),u?t.jsxRuntimeExports.jsx(h.default,{width:12,height:12,type:u}):null]}),l?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(S.default,{isActive:o,size:100}),t.jsxRuntimeExports.jsx(b.default,{isActive:o,size:150,className:b.normalBlendStyles})]})]}),[s,f,d,l,i,R,E,n,e,u,o]);return t.jsxRuntimeExports.jsx(C.default,{decorators:v,children:p?t.jsxRuntimeExports.jsx(M,{menu:p.popoverMenu,className:"kakadu-components-1861176543",children:g}):g})}function A(e){if("type"in e){if(e.type==="separator")return t.jsxRuntimeExports.jsx(_.default,{});if(e.type==="group")return t.jsxRuntimeExports.jsx(y.Span,{className:"kakadu-components-1499037363",children:e.label})}return t.jsxRuntimeExports.jsx(K,{...e})}function D({items:e}){const{isFocused:n}=j.usePopoverContext(),[u,s]=a.useState([]),{setIsKeyboardNavigating:c}=w(),v=a.useCallback(i=>{i&&s(r=>r.includes(i)?r:[...r,i])},[]),p=a.useCallback(i=>{n&&(i.currentTarget.focus(),c(!1))},[n,c]);return a.useEffect(()=>{if(!n)return;const i=r=>{const f=u.filter(m=>m.isConnected),d=f.length;if(d===0)return;let o;const x=document.activeElement;let l=x?f.indexOf(x):-1;switch(l===-1&&(l=0),r.key){case"ArrowDown":{o=(l+1)%d;break}case"ArrowUp":{o=(l-1+d)%d;break}case"Home":{o=0;break}case"End":{o=d-1;break}case"Tab":{c(!0);return}}if(o!==void 0){r.preventDefault(),r.stopPropagation();const m=f[o];m&&(m.focus(),c(!0))}};return window.addEventListener("keydown",i,{capture:!0}),()=>{window.removeEventListener("keydown",i,{capture:!0})}},[n,u,c]),t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:e.map((i,r)=>t.jsxRuntimeExports.jsx(A,{...i,reference:v,onMouseEnter:p},r))})}function F({items:e,...n}){return t.jsxRuntimeExports.jsx(j.default,{...n,as:"nav",role:"menu",innerClassName:"kakadu-components-3600436535",children:t.jsxRuntimeExports.jsx(D,{items:e})})}function T(e){const n=a.useMemo(()=>({items:e}),[e]),{show:u,popover:s}=j.usePopover(F,n);return a.useMemo(()=>({show:u,popoverMenu:s}),[u,s])}function M({menu:e,className:n,children:u}){return t.jsxRuntimeExports.jsxs(j.PopoverContainer,{className:n,children:[u,e]})}exports.default=M;exports.usePopoverMenu=T;
|
|
@@ -1,113 +1,115 @@
|
|
|
1
1
|
import { j as n } from "../jsx-runtime-B4hRZ52C.mjs";
|
|
2
|
-
import { cx as
|
|
3
|
-
import { useMemo as
|
|
4
|
-
import { buttonResetStyles as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { Span as
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
2
|
+
import { cx as S } from "@kuma-ui/core";
|
|
3
|
+
import { useMemo as x, useState as b, useCallback as v, useEffect as I, useRef as K } from "react";
|
|
4
|
+
import { buttonResetStyles as A } from "../theme.mjs";
|
|
5
|
+
import y from "../icons/icon.mjs";
|
|
6
|
+
import C, { PopoverContainer as D, usePopover as F, usePopoverContext as P } from "./popover.mjs";
|
|
7
|
+
import H from "./atom.mjs";
|
|
8
|
+
import { Span as N } from "./text.mjs";
|
|
9
|
+
import R, { normalBlendStyles as z } from "./hover-gradient.mjs";
|
|
10
|
+
import L from "./click-ripples.mjs";
|
|
11
|
+
import T from "./separator.mjs";
|
|
12
|
+
import V from "./decorators.mjs";
|
|
13
13
|
const j = /* @__PURE__ */ new Set();
|
|
14
|
-
function
|
|
15
|
-
const [e, t] =
|
|
14
|
+
function M() {
|
|
15
|
+
const [e, t] = b(!1), a = v((o) => {
|
|
16
16
|
t(o);
|
|
17
17
|
for (const c of j)
|
|
18
18
|
c(o);
|
|
19
19
|
}, []);
|
|
20
|
-
return
|
|
20
|
+
return I(() => {
|
|
21
21
|
const o = (c) => {
|
|
22
22
|
t(c);
|
|
23
23
|
};
|
|
24
24
|
return j.add(o), () => {
|
|
25
25
|
j.delete(o);
|
|
26
26
|
};
|
|
27
|
-
}, []),
|
|
27
|
+
}, []), x(() => ({
|
|
28
28
|
isKeyboardNavigating: e,
|
|
29
|
-
setIsKeyboardNavigating:
|
|
30
|
-
}), [e,
|
|
29
|
+
setIsKeyboardNavigating: a
|
|
30
|
+
}), [e, a]);
|
|
31
31
|
}
|
|
32
|
-
function
|
|
32
|
+
function B({
|
|
33
33
|
label: e,
|
|
34
34
|
iconLeft: t,
|
|
35
|
-
iconRight:
|
|
35
|
+
iconRight: a,
|
|
36
36
|
href: o,
|
|
37
37
|
shouldCloseOnClick: c = !0,
|
|
38
38
|
decorators: k = [],
|
|
39
|
-
submenu:
|
|
40
|
-
className:
|
|
41
|
-
onClick:
|
|
39
|
+
submenu: l,
|
|
40
|
+
className: i,
|
|
41
|
+
onClick: s,
|
|
42
42
|
...f
|
|
43
43
|
}) {
|
|
44
44
|
const {
|
|
45
|
-
isVisible:
|
|
46
|
-
isFocused:
|
|
47
|
-
close:
|
|
48
|
-
} =
|
|
49
|
-
isKeyboardNavigating:
|
|
50
|
-
} =
|
|
51
|
-
|
|
52
|
-
}, [
|
|
53
|
-
|
|
54
|
-
|
|
45
|
+
isVisible: d,
|
|
46
|
+
isFocused: r,
|
|
47
|
+
close: m
|
|
48
|
+
} = P(), {
|
|
49
|
+
isKeyboardNavigating: u
|
|
50
|
+
} = M(), p = K(!0), g = v(() => {
|
|
51
|
+
p.current = r;
|
|
52
|
+
}, [r]), h = v((E) => {
|
|
53
|
+
!u && !p.current || r && (s == null || s(E), l ? l.show() : c && (m == null || m()));
|
|
54
|
+
}, [u, r, s, l, c, m]), w = x(() => /* @__PURE__ */ n.jsxs(H, { as: o ? "a" : "button", ...f, type: o ? void 0 : "button", role: "menuitem", href: o, disabled: o ? void 0 : !d, className: S(A, "kakadu-components-4075327442", r && "kakadu-components-3160069815", u ? "kakadu-components-2043829669" : r && "kakadu-components-2862719809", i), onClick: h, onPointerDownCapture: g, children: [
|
|
55
|
+
/* @__PURE__ */ n.jsxs(N, { className: "kakadu-components-1109353535", children: [
|
|
56
|
+
t ? /* @__PURE__ */ n.jsx(y, { width: 12, height: 12, type: t }) : null,
|
|
55
57
|
/* @__PURE__ */ n.jsx("span", { className: "kakadu-components-913703148", children: e }),
|
|
56
|
-
|
|
58
|
+
a ? /* @__PURE__ */ n.jsx(y, { width: 12, height: 12, type: a }) : null
|
|
57
59
|
] }),
|
|
58
|
-
|
|
59
|
-
/* @__PURE__ */ n.jsx(
|
|
60
|
-
/* @__PURE__ */ n.jsx(
|
|
60
|
+
u ? null : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
|
|
61
|
+
/* @__PURE__ */ n.jsx(L, { isActive: r, size: 100 }),
|
|
62
|
+
/* @__PURE__ */ n.jsx(R, { isActive: r, size: 150, className: z })
|
|
61
63
|
] })
|
|
62
|
-
] }), [o, f, u,
|
|
63
|
-
return /* @__PURE__ */ n.jsx(
|
|
64
|
+
] }), [o, f, d, u, i, h, g, t, e, a, r]);
|
|
65
|
+
return /* @__PURE__ */ n.jsx(V, { decorators: k, children: l ? /* @__PURE__ */ n.jsx(J, { menu: l.popoverMenu, className: "kakadu-components-1861176543", children: w }) : w });
|
|
64
66
|
}
|
|
65
|
-
function
|
|
67
|
+
function G(e) {
|
|
66
68
|
if ("type" in e) {
|
|
67
69
|
if (e.type === "separator")
|
|
68
|
-
return /* @__PURE__ */ n.jsx(
|
|
70
|
+
return /* @__PURE__ */ n.jsx(T, {});
|
|
69
71
|
if (e.type === "group")
|
|
70
|
-
return /* @__PURE__ */ n.jsx(
|
|
72
|
+
return /* @__PURE__ */ n.jsx(N, { className: "kakadu-components-1499037363", children: e.label });
|
|
71
73
|
}
|
|
72
|
-
return /* @__PURE__ */ n.jsx(
|
|
74
|
+
return /* @__PURE__ */ n.jsx(B, { ...e });
|
|
73
75
|
}
|
|
74
|
-
function
|
|
76
|
+
function U({
|
|
75
77
|
items: e
|
|
76
78
|
}) {
|
|
77
79
|
const {
|
|
78
80
|
isFocused: t
|
|
79
|
-
} =
|
|
81
|
+
} = P(), [a, o] = b([]), {
|
|
80
82
|
setIsKeyboardNavigating: c
|
|
81
|
-
} =
|
|
82
|
-
|
|
83
|
-
}, []),
|
|
84
|
-
t && (
|
|
83
|
+
} = M(), k = v((i) => {
|
|
84
|
+
i && o((s) => s.includes(i) ? s : [...s, i]);
|
|
85
|
+
}, []), l = v((i) => {
|
|
86
|
+
t && (i.currentTarget.focus(), c(!1));
|
|
85
87
|
}, [t, c]);
|
|
86
|
-
return
|
|
88
|
+
return I(() => {
|
|
87
89
|
if (!t)
|
|
88
90
|
return;
|
|
89
|
-
const
|
|
90
|
-
const f =
|
|
91
|
-
if (
|
|
91
|
+
const i = (s) => {
|
|
92
|
+
const f = a.filter((p) => p.isConnected), d = f.length;
|
|
93
|
+
if (d === 0)
|
|
92
94
|
return;
|
|
93
|
-
let
|
|
94
|
-
const
|
|
95
|
-
let
|
|
96
|
-
switch (
|
|
95
|
+
let r;
|
|
96
|
+
const m = document.activeElement;
|
|
97
|
+
let u = m ? f.indexOf(m) : -1;
|
|
98
|
+
switch (u === -1 && (u = 0), s.key) {
|
|
97
99
|
case "ArrowDown": {
|
|
98
|
-
|
|
100
|
+
r = (u + 1) % d;
|
|
99
101
|
break;
|
|
100
102
|
}
|
|
101
103
|
case "ArrowUp": {
|
|
102
|
-
|
|
104
|
+
r = (u - 1 + d) % d;
|
|
103
105
|
break;
|
|
104
106
|
}
|
|
105
107
|
case "Home": {
|
|
106
|
-
|
|
108
|
+
r = 0;
|
|
107
109
|
break;
|
|
108
110
|
}
|
|
109
111
|
case "End": {
|
|
110
|
-
|
|
112
|
+
r = d - 1;
|
|
111
113
|
break;
|
|
112
114
|
}
|
|
113
115
|
case "Tab": {
|
|
@@ -115,58 +117,58 @@ function B({
|
|
|
115
117
|
return;
|
|
116
118
|
}
|
|
117
119
|
}
|
|
118
|
-
if (
|
|
119
|
-
|
|
120
|
-
const p = f[
|
|
120
|
+
if (r !== void 0) {
|
|
121
|
+
s.preventDefault(), s.stopPropagation();
|
|
122
|
+
const p = f[r];
|
|
121
123
|
p && (p.focus(), c(!0));
|
|
122
124
|
}
|
|
123
125
|
};
|
|
124
|
-
return window.addEventListener("keydown",
|
|
126
|
+
return window.addEventListener("keydown", i, {
|
|
125
127
|
capture: !0
|
|
126
128
|
}), () => {
|
|
127
|
-
window.removeEventListener("keydown",
|
|
129
|
+
window.removeEventListener("keydown", i, {
|
|
128
130
|
capture: !0
|
|
129
131
|
});
|
|
130
132
|
};
|
|
131
|
-
}, [t,
|
|
132
|
-
|
|
133
|
+
}, [t, a, c]), /* @__PURE__ */ n.jsx(n.Fragment, { children: e.map((i, s) => /* @__PURE__ */ n.jsx(
|
|
134
|
+
G,
|
|
133
135
|
{
|
|
134
|
-
...
|
|
136
|
+
...i,
|
|
135
137
|
reference: k,
|
|
136
|
-
onMouseEnter:
|
|
138
|
+
onMouseEnter: l
|
|
137
139
|
},
|
|
138
|
-
|
|
140
|
+
s
|
|
139
141
|
)) });
|
|
140
142
|
}
|
|
141
|
-
function
|
|
143
|
+
function q({
|
|
142
144
|
items: e,
|
|
143
145
|
...t
|
|
144
146
|
}) {
|
|
145
|
-
return /* @__PURE__ */ n.jsx(
|
|
147
|
+
return /* @__PURE__ */ n.jsx(C, { ...t, as: "nav", role: "menu", innerClassName: "kakadu-components-3600436535", children: /* @__PURE__ */ n.jsx(U, { items: e }) });
|
|
146
148
|
}
|
|
147
|
-
function
|
|
148
|
-
const t =
|
|
149
|
+
function re(e) {
|
|
150
|
+
const t = x(() => ({
|
|
149
151
|
items: e
|
|
150
152
|
}), [e]), {
|
|
151
|
-
show:
|
|
153
|
+
show: a,
|
|
152
154
|
popover: o
|
|
153
|
-
} =
|
|
154
|
-
return
|
|
155
|
-
show:
|
|
155
|
+
} = F(q, t);
|
|
156
|
+
return x(() => ({
|
|
157
|
+
show: a,
|
|
156
158
|
popoverMenu: o
|
|
157
|
-
}), [
|
|
159
|
+
}), [a, o]);
|
|
158
160
|
}
|
|
159
|
-
function
|
|
161
|
+
function J({
|
|
160
162
|
menu: e,
|
|
161
163
|
className: t,
|
|
162
|
-
children:
|
|
164
|
+
children: a
|
|
163
165
|
}) {
|
|
164
|
-
return /* @__PURE__ */ n.jsxs(
|
|
165
|
-
|
|
166
|
+
return /* @__PURE__ */ n.jsxs(D, { className: t, children: [
|
|
167
|
+
a,
|
|
166
168
|
e
|
|
167
169
|
] });
|
|
168
170
|
}
|
|
169
171
|
export {
|
|
170
|
-
|
|
171
|
-
|
|
172
|
+
J as default,
|
|
173
|
+
re as usePopoverMenu
|
|
172
174
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("../jsx-runtime-BB_1_6y_.js"),l=require("@kuma-ui/core"),e=require("react"),H=require("../focus-trap-react-CcpTuiJi.js"),g=require("./atom.js"),z=e.createContext({isVisible:!1,isFocused:!1}),{Provider:U}=z;function G(){return e.useContext(z)}function J({as:r,className:s,...o}){return n.jsxRuntimeExports.jsx(g.default,{as:r??g.defaultAtomElementType,...o,className:l.cx("kakadu-components-2845019685",s)})}function K({as:r,isVisible:s,label:o,shouldCloseOnOutsideClick:f=!0,shouldCloseOnEscapePress:c=!0,children:m,className:p,innerClassName:x,onClose:a,...v}){const b=e.useRef(null),F=e.useRef(null),[I,k]=e.useState(!1),[S,B]=e.useState(!1),[u,R]=e.useState(!1),C=e.useCallback(t=>{b.current=t,R(!1)},[]),j=e.useRef(null),M=e.useCallback(t=>{t&&(j.current=t)},[]),W=e.useMemo(()=>({initialFocus:()=>j.current??void 0,
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("../jsx-runtime-BB_1_6y_.js"),l=require("@kuma-ui/core"),e=require("react"),H=require("../focus-trap-react-CcpTuiJi.js"),g=require("./atom.js"),z=e.createContext({isVisible:!1,isFocused:!1}),{Provider:U}=z;function G(){return e.useContext(z)}function J({as:r,className:s,...o}){return n.jsxRuntimeExports.jsx(g.default,{as:r??g.defaultAtomElementType,...o,className:l.cx("kakadu-components-2845019685",s)})}function K({as:r,isVisible:s,label:o,shouldCloseOnOutsideClick:f=!0,shouldCloseOnEscapePress:c=!0,children:m,className:p,innerClassName:x,onClose:a,...v}){const b=e.useRef(null),F=e.useRef(null),[I,k]=e.useState(!1),[S,B]=e.useState(!1),[u,R]=e.useState(!1),C=e.useCallback(t=>{b.current=t,R(!1)},[]),j=e.useRef(null),M=e.useCallback(t=>{t&&(j.current=t)},[]),W=e.useMemo(()=>({initialFocus:()=>j.current??void 0,onPostActivate(){var t;k(!0),(t=j.current)==null||t.focus()},clickOutsideDeactivates:f,escapeDeactivates:c,onPostUnpause(){k(!0)},onPause(){k(!1)},onDeactivate(){R(!1),k(!1)}}),[f,c]),[q,N]=e.useState(s??!1),$=e.useMemo(()=>({isVisible:q,isFocused:I,setInitialFocus:M,close:C}),[q,I,M,C]),[i,L]=e.useState("center");return e.useEffect(()=>{const t=F.current;if(t){const w=()=>{const O=t.offsetParent,E=O instanceof HTMLElement?O.getBoundingClientRect():null,y=t.getBoundingClientRect();if(!E){L("center");return}const P=16,D=window.innerWidth-P,T=E.left+E.width/2-y.width/2,V=T+y.width,A=T<P,_=V>D;let d="center";if(A&&_){const h=P-T;d=V-D>h?"right":"left"}else _?d="right":A&&(d="left");L(h=>h===d?h:d)};return w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}}},[]),e.useEffect(()=>{s&&(B(!0),N(!0))},[s]),e.useEffect(()=>{if(s){const t=setTimeout(()=>{R(!0)},100);return()=>{clearTimeout(t)}}R(!1)},[s]),e.useEffect(()=>{if(S&&!u){const t=setTimeout(()=>{a==null||a(b.current??void 0),N(!1)},370);return()=>{clearTimeout(t)}}},[S,u,a]),n.jsxRuntimeExports.jsx(g.default,{reference:F,as:r??g.defaultAtomElementType,role:"dialog","aria-hidden":!u,"aria-label":o??"Popover",...v,className:l.cx("kakadu-components-3920007758",i==="left"&&"kakadu-components-611400930",i==="right"&&"kakadu-components-944244368",u&&"kakadu-components-1399012551",p),children:n.jsxRuntimeExports.jsxs("div",{className:l.cx("kakadu-components-1118152266",u&&"kakadu-components-231244945"),children:[n.jsxRuntimeExports.jsx("div",{className:l.cx("kakadu-components-1951789226",i==="left"&&"kakadu-components-1495725644",i==="right"&&"kakadu-components-4235689197")}),n.jsxRuntimeExports.jsx(H.focusTrapReactExports.FocusTrap,{active:u,focusTrapOptions:W,children:n.jsxRuntimeExports.jsxs("div",{className:l.cx("kakadu-components-2488426662",x),children:[n.jsxRuntimeExports.jsx(U,{value:$,children:m}),n.jsxRuntimeExports.jsx("div",{className:l.cx("kakadu-components-3252390100",i==="left"&&"kakadu-components-3754561431",i==="right"&&"kakadu-components-2265262600")})]})})]})})}function Q(r,s){const[o,f]=e.useState(!1),c=e.useRef(void 0),m=e.useCallback(async()=>(f(!0),new Promise(a=>{c.current=a})),[]),p=e.useCallback(a=>{var v;f(!1),(v=c.current)==null||v.call(c,a),c.current=void 0},[]),x=e.useMemo(()=>n.jsxRuntimeExports.jsx(r,{...s,isVisible:o,onClose:p}),[r,s,o,p]);return e.useMemo(()=>({isVisible:o,show:m,popover:x}),[o,m,x])}exports.PopoverContainer=J;exports.default=K;exports.usePopover=Q;exports.usePopoverContext=G;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { j as n } from "../jsx-runtime-B4hRZ52C.mjs";
|
|
2
2
|
import { cx as u } from "@kuma-ui/core";
|
|
3
|
-
import { createContext as Y, useRef as j, useState as l, useCallback as
|
|
3
|
+
import { createContext as Y, useRef as j, useState as l, useCallback as P, useMemo as R, useEffect as w, useContext as Z } from "react";
|
|
4
4
|
import { f as _ } from "../focus-trap-react-DYXrtbDH.mjs";
|
|
5
5
|
import q, { defaultAtomElementType as G } from "./atom.mjs";
|
|
6
6
|
const J = Y({
|
|
@@ -31,19 +31,19 @@ function ie({
|
|
|
31
31
|
onClose: a,
|
|
32
32
|
...v
|
|
33
33
|
}) {
|
|
34
|
-
const N = j(null), L = j(null), [D, h] = l(!1), [O, K] = l(!1), [r, x] = l(!1), V =
|
|
34
|
+
const N = j(null), L = j(null), [D, h] = l(!1), [O, K] = l(!1), [r, x] = l(!1), V = P((e) => {
|
|
35
35
|
N.current = e, x(!1);
|
|
36
|
-
}, []), T = j(null), A =
|
|
36
|
+
}, []), T = j(null), A = P((e) => {
|
|
37
37
|
e && (T.current = e);
|
|
38
|
-
}, []), Q =
|
|
38
|
+
}, []), Q = R(() => ({
|
|
39
39
|
initialFocus: () => T.current ?? void 0,
|
|
40
|
-
|
|
40
|
+
onPostActivate() {
|
|
41
41
|
var e;
|
|
42
42
|
h(!0), (e = T.current) == null || e.focus();
|
|
43
43
|
},
|
|
44
44
|
clickOutsideDeactivates: d,
|
|
45
45
|
escapeDeactivates: o,
|
|
46
|
-
|
|
46
|
+
onPostUnpause() {
|
|
47
47
|
h(!0);
|
|
48
48
|
},
|
|
49
49
|
onPause() {
|
|
@@ -52,7 +52,7 @@ function ie({
|
|
|
52
52
|
onDeactivate() {
|
|
53
53
|
x(!1), h(!1);
|
|
54
54
|
}
|
|
55
|
-
}), [d, o]), [y, z] = l(t ?? !1), X =
|
|
55
|
+
}), [d, o]), [y, z] = l(t ?? !1), X = R(() => ({
|
|
56
56
|
isVisible: y,
|
|
57
57
|
isFocused: D,
|
|
58
58
|
setInitialFocus: A,
|
|
@@ -109,13 +109,13 @@ function ie({
|
|
|
109
109
|
] }) });
|
|
110
110
|
}
|
|
111
111
|
function ue(c, t) {
|
|
112
|
-
const [s, d] = l(!1), o = j(void 0), m =
|
|
112
|
+
const [s, d] = l(!1), o = j(void 0), m = P(async () => (d(!0), new Promise((a) => {
|
|
113
113
|
o.current = a;
|
|
114
|
-
})), []), p =
|
|
114
|
+
})), []), p = P((a) => {
|
|
115
115
|
var v;
|
|
116
116
|
d(!1), (v = o.current) == null || v.call(o, a), o.current = void 0;
|
|
117
|
-
}, []), k =
|
|
118
|
-
return
|
|
117
|
+
}, []), k = R(() => /* @__PURE__ */ n.jsx(c, { ...t, isVisible: s, onClose: p }), [c, t, s, p]);
|
|
118
|
+
return R(() => ({
|
|
119
119
|
isVisible: s,
|
|
120
120
|
show: m,
|
|
121
121
|
popover: k
|
|
@@ -11,6 +11,7 @@ type BaseTextButtonProperties = Omit<HTMLProps<HTMLButtonElement>, 'children'> &
|
|
|
11
11
|
readonly tooltip?: string;
|
|
12
12
|
readonly tooltipPosition?: ButtonTooltipPosition;
|
|
13
13
|
readonly isSkeleton?: boolean;
|
|
14
|
+
readonly isSkeletonAnimated?: boolean;
|
|
14
15
|
};
|
|
15
16
|
export type TextButtonProperties = BaseTextButtonProperties & ({
|
|
16
17
|
children: ReactNode;
|
|
@@ -19,5 +20,5 @@ export type TextButtonProperties = BaseTextButtonProperties & ({
|
|
|
19
20
|
children?: never;
|
|
20
21
|
label: string;
|
|
21
22
|
});
|
|
22
|
-
export default function TextButton({ iconLeft, iconRight, variant, tooltip, tooltipPosition, href, target, rel, disabled, isSkeleton, className, children, label, ...properties }: TextButtonProperties): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export default function TextButton({ iconLeft, iconRight, variant, tooltip, tooltipPosition, href, target, rel, disabled, isSkeleton, isSkeletonAnimated, className, children, label, ...properties }: TextButtonProperties): import("react/jsx-runtime").JSX.Element;
|
|
23
24
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),a=require("@kuma-ui/core"),i=require("../icons/icon.js"),m=require("./flex.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),a=require("@kuma-ui/core"),i=require("../icons/icon.js"),m=require("./flex.js"),h=require("./text.js"),B=require("./click-ripples.js"),c=require("./hover-gradient.js"),f=require("./button-tooltip.js"),b=require("./aria-text.js"),N=require("./atom.js"),g=require("./skeleton.js");var d=(t=>(t.primary="primary",t.delete="delete",t))(d||{});const w="kakadu-components-4017654514";function S({iconLeft:t,iconRight:n,variant:p="primary",tooltip:u,tooltipPosition:j,href:x,target:k,rel:E,disabled:v,isSkeleton:r,isSkeletonAnimated:R=!0,className:y,children:s,label:q,..._}){const l=!!v||!!r,o=x&&!r;return e.jsxRuntimeExports.jsxs("div",{className:a.cx("kakadu-components-1400843519",s&&(t||n)?a.cx(!!t&&"kakadu-components-497190725",!!n&&"kakadu-components-3729381008"):"kakadu-components-3866032606"),children:[e.jsxRuntimeExports.jsxs(N.default,{..._,as:o?"a":"button",type:o?void 0:"button",href:o?x:void 0,target:o?k:void 0,rel:o?E:void 0,disabled:o?void 0:l,className:a.cx(h.textShadowStyles,"kakadu-components-2081390622",p==="delete"&&w,r&&"kakadu-components-2662775151",y),children:[e.jsxRuntimeExports.jsxs(m.default,{direction:"row",gap:.5,alignment:m.FlexAlignment.center,children:[t?e.jsxRuntimeExports.jsx("div",{className:a.cx("kakadu-components-743909038",s?"kakadu-components-1285017646":"kakadu-components-1475172827"),children:typeof t=="string"?e.jsxRuntimeExports.jsx(i.default,{width:14,height:14,type:t}):t}):null,s?e.jsxRuntimeExports.jsx("span",{className:"kakadu-components-3068418250",children:s}):e.jsxRuntimeExports.jsx(b.default,{children:q}),n?e.jsxRuntimeExports.jsx("div",{className:a.cx("kakadu-components-743909038",s?"kakadu-components-2421728947":"kakadu-components-1475172827"),children:typeof n=="string"?e.jsxRuntimeExports.jsx(i.default,{width:14,height:14,type:n}):n}):null]}),e.jsxRuntimeExports.jsxs("span",{className:"kakadu-components-1970948853",children:[l?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(B.default,{size:s?void 0:50}),e.jsxRuntimeExports.jsx(c.default,{size:s?void 0:50,className:c.normalBlendStyles})]}),u?e.jsxRuntimeExports.jsx(f.default,{label:u,position:j}):null]})]}),r?e.jsxRuntimeExports.jsx("div",{className:"kakadu-components-1970948853",children:e.jsxRuntimeExports.jsx(g.SkeletonInstance,{width:"100%",height:"100%",isAnimated:R})}):null]})}exports.TextButtonVariant=d;exports.default=S;
|
|
@@ -1,52 +1,53 @@
|
|
|
1
1
|
import { j as o } from "../jsx-runtime-B4hRZ52C.mjs";
|
|
2
2
|
import { cx as n } from "@kuma-ui/core";
|
|
3
3
|
import p from "../icons/icon.mjs";
|
|
4
|
-
import
|
|
5
|
-
import { textShadowStyles as
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import { SkeletonInstance as
|
|
12
|
-
var
|
|
13
|
-
const
|
|
14
|
-
function
|
|
4
|
+
import B, { FlexAlignment as h } from "./flex.mjs";
|
|
5
|
+
import { textShadowStyles as N } from "./text.mjs";
|
|
6
|
+
import b from "./click-ripples.mjs";
|
|
7
|
+
import g, { normalBlendStyles as w } from "./hover-gradient.mjs";
|
|
8
|
+
import A from "./button-tooltip.mjs";
|
|
9
|
+
import F from "./aria-text.mjs";
|
|
10
|
+
import z from "./atom.mjs";
|
|
11
|
+
import { SkeletonInstance as C } from "./skeleton.mjs";
|
|
12
|
+
var D = /* @__PURE__ */ ((e) => (e.primary = "primary", e.delete = "delete", e))(D || {});
|
|
13
|
+
const I = "kakadu-components-4017654514";
|
|
14
|
+
function Q({
|
|
15
15
|
iconLeft: e,
|
|
16
16
|
iconRight: s,
|
|
17
17
|
variant: i = "primary",
|
|
18
18
|
tooltip: r,
|
|
19
|
-
tooltipPosition:
|
|
19
|
+
tooltipPosition: u,
|
|
20
20
|
href: l,
|
|
21
|
-
target:
|
|
21
|
+
target: k,
|
|
22
22
|
rel: c,
|
|
23
23
|
disabled: x,
|
|
24
24
|
isSkeleton: m,
|
|
25
|
-
|
|
25
|
+
isSkeletonAnimated: j = !0,
|
|
26
|
+
className: v,
|
|
26
27
|
children: a,
|
|
27
|
-
label:
|
|
28
|
-
...
|
|
28
|
+
label: y,
|
|
29
|
+
...f
|
|
29
30
|
}) {
|
|
30
31
|
const d = !!x || !!m, t = l && !m;
|
|
31
32
|
return /* @__PURE__ */ o.jsxs("div", { className: n("kakadu-components-1400843519", a && (e || s) ? n(!!e && "kakadu-components-497190725", !!s && "kakadu-components-3729381008") : "kakadu-components-3866032606"), children: [
|
|
32
|
-
/* @__PURE__ */ o.jsxs(
|
|
33
|
-
/* @__PURE__ */ o.jsxs(
|
|
33
|
+
/* @__PURE__ */ o.jsxs(z, { ...f, as: t ? "a" : "button", type: t ? void 0 : "button", href: t ? l : void 0, target: t ? k : void 0, rel: t ? c : void 0, disabled: t ? void 0 : d, className: n(N, "kakadu-components-2081390622", i === "delete" && I, m && "kakadu-components-2662775151", v), children: [
|
|
34
|
+
/* @__PURE__ */ o.jsxs(B, { direction: "row", gap: 0.5, alignment: h.center, children: [
|
|
34
35
|
e ? /* @__PURE__ */ o.jsx("div", { className: n("kakadu-components-743909038", a ? "kakadu-components-1285017646" : "kakadu-components-1475172827"), children: typeof e == "string" ? /* @__PURE__ */ o.jsx(p, { width: 14, height: 14, type: e }) : e }) : null,
|
|
35
|
-
a ? /* @__PURE__ */ o.jsx("span", { className: "kakadu-components-3068418250", children: a }) : /* @__PURE__ */ o.jsx(
|
|
36
|
+
a ? /* @__PURE__ */ o.jsx("span", { className: "kakadu-components-3068418250", children: a }) : /* @__PURE__ */ o.jsx(F, { children: y }),
|
|
36
37
|
s ? /* @__PURE__ */ o.jsx("div", { className: n("kakadu-components-743909038", a ? "kakadu-components-2421728947" : "kakadu-components-1475172827"), children: typeof s == "string" ? /* @__PURE__ */ o.jsx(p, { width: 14, height: 14, type: s }) : s }) : null
|
|
37
38
|
] }),
|
|
38
39
|
/* @__PURE__ */ o.jsxs("span", { className: "kakadu-components-1970948853", children: [
|
|
39
40
|
d ? null : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
|
|
40
|
-
/* @__PURE__ */ o.jsx(
|
|
41
|
-
/* @__PURE__ */ o.jsx(
|
|
41
|
+
/* @__PURE__ */ o.jsx(b, { size: a ? void 0 : 50 }),
|
|
42
|
+
/* @__PURE__ */ o.jsx(g, { size: a ? void 0 : 50, className: w })
|
|
42
43
|
] }),
|
|
43
|
-
r ? /* @__PURE__ */ o.jsx(
|
|
44
|
+
r ? /* @__PURE__ */ o.jsx(A, { label: r, position: u }) : null
|
|
44
45
|
] })
|
|
45
46
|
] }),
|
|
46
|
-
m ? /* @__PURE__ */ o.jsx("div", { className: "kakadu-components-1970948853", children: /* @__PURE__ */ o.jsx(
|
|
47
|
+
m ? /* @__PURE__ */ o.jsx("div", { className: "kakadu-components-1970948853", children: /* @__PURE__ */ o.jsx(C, { width: "100%", height: "100%", isAnimated: j }) }) : null
|
|
47
48
|
] });
|
|
48
49
|
}
|
|
49
50
|
export {
|
|
50
|
-
|
|
51
|
-
|
|
51
|
+
D as TextButtonVariant,
|
|
52
|
+
Q as default
|
|
52
53
|
};
|