@apipass/design-system 7.4.3 → 7.4.4

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.
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("react");;/* empty css */const n=require("../../primitives/Dialog/Dialog.cjs"),q=require("../../primitives/Input/Input.cjs"),x=require("../../layout/Flex/Flex.cjs"),o=require("../../primitives/Button/Button.cjs");function P({isOpen:a,title:h,message:c,confirmValue:i,confirmValueLabel:j,confirmLabel:u="Confirm",cancelLabel:f="Cancel",isDanger:m=!1,isLoading:r=!1,onConfirm:D,onClose:y}){const[d,t]=C.useState(""),s=i?d===i:!0;function l(){t(""),y()}function g(){s&&(t(""),D())}return a?e.jsx(n.DialogModal,{isOpen:a,onOpenChange:p=>!p&&l(),children:e.jsxs(n.Dialog,{children:[e.jsxs(x.Flex,{direction:"row",alignPrimary:"space-between",alignSecondary:"center",children:[e.jsx(n.DialogTitle,{children:h}),e.jsx(n.DialogClose,{onPress:l})]}),e.jsxs(n.DialogBody,{children:[c&&e.jsx("p",{className:"confirm-dialog-message",dangerouslySetInnerHTML:{__html:c}}),i&&e.jsx(q.InputField,{label:j,value:d,onChange:t,isRequired:!0})]}),e.jsxs(x.Flex,{direction:"row",gap:"200",alignPrimary:"end",className:"confirm-dialog-footer",children:[e.jsx(o.Button,{variant:"neutral",onPress:l,isDisabled:r,children:f}),m?e.jsx(o.ButtonDanger,{variant:"danger-primary",onPress:g,isDisabled:!s||r,children:r?"...":u}):e.jsx(o.Button,{variant:"primary",onPress:g,isDisabled:!s||r,children:r?"...":u})]})]})}):null}exports.ConfirmDialog=P;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react");;/* empty css */const r=require("../../primitives/Dialog/Dialog.cjs"),C=require("../../primitives/Input/Input.cjs"),x=require("../../layout/Flex/Flex.cjs"),a=require("../../primitives/Button/Button.cjs");function q(i){return i.isOpen?e.jsx(v,{...i}):null}function v({title:i,message:l,confirmValue:t,confirmValueLabel:f,confirmLabel:o="Confirm",cancelLabel:j="Cancel",isDanger:h=!1,isLoading:n=!1,onConfirm:m,onClose:c}){const[u,D]=y.useState(""),s=t?u===t:!0;function d(){s&&m()}function g(){n||c()}return e.jsx(r.DialogModal,{isOpen:!0,onOpenChange:p=>!p&&g(),children:e.jsxs(r.Dialog,{children:[e.jsxs(x.Flex,{direction:"row",alignPrimary:"space-between",alignSecondary:"center",children:[e.jsx(r.DialogTitle,{children:i}),e.jsx(r.DialogClose,{onPress:g})]}),e.jsxs(r.DialogBody,{children:[l&&e.jsx("p",{className:"confirm-dialog-message",dangerouslySetInnerHTML:{__html:l}}),t&&e.jsx(C.InputField,{label:f,value:u,onChange:D,isRequired:!0,validationBehavior:"aria"})]}),e.jsxs(x.Flex,{direction:"row",gap:"200",alignPrimary:"end",className:"confirm-dialog-footer",children:[e.jsx(a.Button,{variant:"neutral",onPress:c,isDisabled:n,children:j}),h?e.jsx(a.ButtonDanger,{variant:"danger-primary",onPress:d,isDisabled:!s||n,children:n?"...":o}):e.jsx(a.Button,{variant:"primary",onPress:d,isDisabled:!s||n,children:n?"...":o})]})]})})}exports.ConfirmDialog=q;
2
2
  //# sourceMappingURL=ConfirmDialog.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ConfirmDialog.cjs","sources":["../../../../../src/ui/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import {\n Button,\n ButtonDanger,\n Dialog,\n DialogBody,\n DialogClose,\n DialogModal,\n DialogTitle,\n InputField,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { useState } from \"react\";\nimport \"./confirmdialog.css\";\n\nexport interface ConfirmDialogProps {\n isOpen: boolean;\n title: string;\n message?: string;\n /** If set, user must type this value to enable the confirm button */\n confirmValue?: string;\n confirmValueLabel?: string;\n confirmLabel?: string;\n cancelLabel?: string;\n isDanger?: boolean;\n isLoading?: boolean;\n onConfirm: () => void;\n onClose: () => void;\n}\n\nexport function ConfirmDialog({\n isOpen,\n title,\n message,\n confirmValue,\n confirmValueLabel,\n confirmLabel = \"Confirm\",\n cancelLabel = \"Cancel\",\n isDanger = false,\n isLoading = false,\n onConfirm,\n onClose,\n}: ConfirmDialogProps) {\n const [typed, setTyped] = useState(\"\");\n\n const canConfirm = confirmValue ? typed === confirmValue : true;\n\n function handleClose() {\n setTyped(\"\");\n onClose();\n }\n\n function handleConfirm() {\n if (!canConfirm) return;\n setTyped(\"\");\n onConfirm();\n }\n\n if (!isOpen) return null;\n\n return (\n <DialogModal isOpen={isOpen} onOpenChange={(open) => !open && handleClose()}>\n <Dialog>\n <Flex direction=\"row\" alignPrimary=\"space-between\" alignSecondary=\"center\">\n <DialogTitle>{title}</DialogTitle>\n <DialogClose onPress={handleClose} />\n </Flex>\n <DialogBody>\n {message && (\n <p\n className=\"confirm-dialog-message\"\n dangerouslySetInnerHTML={{ __html: message }}\n />\n )}\n {confirmValue && (\n <InputField\n label={confirmValueLabel}\n value={typed}\n onChange={setTyped}\n isRequired\n />\n )}\n </DialogBody>\n <Flex\n direction=\"row\"\n gap=\"200\"\n alignPrimary=\"end\"\n className=\"confirm-dialog-footer\"\n >\n <Button variant=\"neutral\" onPress={handleClose} isDisabled={isLoading}>\n {cancelLabel}\n </Button>\n {isDanger ? (\n <ButtonDanger\n variant=\"danger-primary\"\n onPress={handleConfirm}\n isDisabled={!canConfirm || isLoading}\n >\n {isLoading ? \"...\" : confirmLabel}\n </ButtonDanger>\n ) : (\n <Button\n variant=\"primary\"\n onPress={handleConfirm}\n isDisabled={!canConfirm || isLoading}\n >\n {isLoading ? \"...\" : confirmLabel}\n </Button>\n )}\n </Flex>\n </Dialog>\n </DialogModal>\n );\n}\n"],"names":["ConfirmDialog","isOpen","title","message","confirmValue","confirmValueLabel","confirmLabel","cancelLabel","isDanger","isLoading","onConfirm","onClose","typed","setTyped","useState","canConfirm","handleClose","handleConfirm","jsx","DialogModal","open","jsxs","Dialog","Flex","DialogTitle","DialogClose","DialogBody","InputField","Button","ButtonDanger"],"mappings":"uWA6BO,SAASA,EAAc,CAC5B,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,aAAAC,EAAe,UACf,YAAAC,EAAc,SACd,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,UAAAC,EACA,QAAAC,CACF,EAAuB,CACrB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAE,EAE/BC,EAAaX,EAAeQ,IAAUR,EAAe,GAE3D,SAASY,GAAc,CACrBH,EAAS,EAAE,EACXF,EAAA,CACF,CAEA,SAASM,GAAgB,CAClBF,IACLF,EAAS,EAAE,EACXH,EAAA,EACF,CAEA,OAAKT,EAGHiB,EAAAA,IAACC,EAAAA,YAAA,CAAY,OAAAlB,EAAgB,aAAemB,GAAS,CAACA,GAAQJ,EAAA,EAC5D,SAAAK,EAAAA,KAACC,EAAAA,OAAA,CACC,SAAA,CAAAD,OAACE,EAAAA,MAAK,UAAU,MAAM,aAAa,gBAAgB,eAAe,SAChE,SAAA,CAAAL,EAAAA,IAACM,EAAAA,aAAa,SAAAtB,CAAA,CAAM,EACpBgB,EAAAA,IAACO,EAAAA,YAAA,CAAY,QAAST,CAAA,CAAa,CAAA,EACrC,SACCU,EAAAA,WAAA,CACE,SAAA,CAAAvB,GACCe,EAAAA,IAAC,IAAA,CACC,UAAU,yBACV,wBAAyB,CAAE,OAAQf,CAAA,CAAQ,CAAA,EAG9CC,GACCc,EAAAA,IAACS,EAAAA,WAAA,CACC,MAAOtB,EACP,MAAOO,EACP,SAAUC,EACV,WAAU,EAAA,CAAA,CACZ,EAEJ,EACAQ,EAAAA,KAACE,EAAAA,KAAA,CACC,UAAU,MACV,IAAI,MACJ,aAAa,MACb,UAAU,wBAEV,SAAA,CAAAL,EAAAA,IAACU,EAAAA,QAAO,QAAQ,UAAU,QAASZ,EAAa,WAAYP,EACzD,SAAAF,CAAA,CACH,EACCC,EACCU,EAAAA,IAACW,EAAAA,aAAA,CACC,QAAQ,iBACR,QAASZ,EACT,WAAY,CAACF,GAAcN,EAE1B,WAAY,MAAQH,CAAA,CAAA,EAGvBY,EAAAA,IAACU,EAAAA,OAAA,CACC,QAAQ,UACR,QAASX,EACT,WAAY,CAACF,GAAcN,EAE1B,WAAY,MAAQH,CAAA,CAAA,CACvB,CAAA,CAAA,CAEJ,CAAA,CACF,CAAA,CACF,EArDkB,IAuDtB"}
1
+ {"version":3,"file":"ConfirmDialog.cjs","sources":["../../../../../src/ui/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import {\n Button,\n ButtonDanger,\n Dialog,\n DialogBody,\n DialogClose,\n DialogModal,\n DialogTitle,\n InputField,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { useState } from \"react\";\nimport \"./confirmdialog.css\";\n\nexport interface ConfirmDialogProps {\n isOpen: boolean;\n title: string;\n message?: string;\n /** If set, user must type this value to enable the confirm button */\n confirmValue?: string;\n confirmValueLabel?: string;\n confirmLabel?: string;\n cancelLabel?: string;\n isDanger?: boolean;\n isLoading?: boolean;\n onConfirm: () => void;\n onClose: () => void;\n}\n\nexport function ConfirmDialog(props: ConfirmDialogProps) {\n if (!props.isOpen) return null;\n\n return <OpenConfirmDialog {...props} />;\n}\n\nfunction OpenConfirmDialog({\n title,\n message,\n confirmValue,\n confirmValueLabel,\n confirmLabel = \"Confirm\",\n cancelLabel = \"Cancel\",\n isDanger = false,\n isLoading = false,\n onConfirm,\n onClose,\n}: ConfirmDialogProps) {\n const [typed, setTyped] = useState(\"\");\n\n const canConfirm = confirmValue ? typed === confirmValue : true;\n\n function handleConfirm() {\n if (!canConfirm) return;\n onConfirm();\n }\n\n function closeUnlessLoading() {\n if (!isLoading) onClose();\n }\n\n return (\n <DialogModal isOpen onOpenChange={(open) => !open && closeUnlessLoading()}>\n <Dialog>\n <Flex direction=\"row\" alignPrimary=\"space-between\" alignSecondary=\"center\">\n <DialogTitle>{title}</DialogTitle>\n <DialogClose onPress={closeUnlessLoading} />\n </Flex>\n <DialogBody>\n {message && (\n <p\n className=\"confirm-dialog-message\"\n dangerouslySetInnerHTML={{ __html: message }}\n />\n )}\n {confirmValue && (\n <InputField\n label={confirmValueLabel}\n value={typed}\n onChange={setTyped}\n isRequired\n // The confirm button already waits for the exact value; native validation would show\n // the browser's own message, in the browser's language.\n validationBehavior=\"aria\"\n />\n )}\n </DialogBody>\n <Flex\n direction=\"row\"\n gap=\"200\"\n alignPrimary=\"end\"\n className=\"confirm-dialog-footer\"\n >\n <Button variant=\"neutral\" onPress={onClose} isDisabled={isLoading}>\n {cancelLabel}\n </Button>\n {isDanger ? (\n <ButtonDanger\n variant=\"danger-primary\"\n onPress={handleConfirm}\n isDisabled={!canConfirm || isLoading}\n >\n {isLoading ? \"...\" : confirmLabel}\n </ButtonDanger>\n ) : (\n <Button\n variant=\"primary\"\n onPress={handleConfirm}\n isDisabled={!canConfirm || isLoading}\n >\n {isLoading ? \"...\" : confirmLabel}\n </Button>\n )}\n </Flex>\n </Dialog>\n </DialogModal>\n );\n}\n"],"names":["ConfirmDialog","props","jsx","OpenConfirmDialog","title","message","confirmValue","confirmValueLabel","confirmLabel","cancelLabel","isDanger","isLoading","onConfirm","onClose","typed","setTyped","useState","canConfirm","handleConfirm","closeUnlessLoading","DialogModal","open","jsxs","Dialog","Flex","DialogTitle","DialogClose","DialogBody","InputField","Button","ButtonDanger"],"mappings":"uWA6BO,SAASA,EAAcC,EAA2B,CACvD,OAAKA,EAAM,OAEJC,MAACC,EAAA,CAAmB,GAAGF,CAAA,CAAO,EAFX,IAG5B,CAEA,SAASE,EAAkB,CACzB,MAAAC,EACA,QAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,aAAAC,EAAe,UACf,YAAAC,EAAc,SACd,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,UAAAC,EACA,QAAAC,CACF,EAAuB,CACrB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAE,EAE/BC,EAAaX,EAAeQ,IAAUR,EAAe,GAE3D,SAASY,GAAgB,CAClBD,GACLL,EAAA,CACF,CAEA,SAASO,GAAqB,CACvBR,GAAWE,EAAA,CAClB,CAEA,OACEX,EAAAA,IAACkB,EAAAA,YAAA,CAAY,OAAM,GAAC,aAAeC,GAAS,CAACA,GAAQF,EAAA,EACnD,SAAAG,EAAAA,KAACC,EAAAA,OAAA,CACC,SAAA,CAAAD,OAACE,EAAAA,MAAK,UAAU,MAAM,aAAa,gBAAgB,eAAe,SAChE,SAAA,CAAAtB,EAAAA,IAACuB,EAAAA,aAAa,SAAArB,CAAA,CAAM,EACpBF,EAAAA,IAACwB,EAAAA,YAAA,CAAY,QAASP,CAAA,CAAoB,CAAA,EAC5C,SACCQ,EAAAA,WAAA,CACE,SAAA,CAAAtB,GACCH,EAAAA,IAAC,IAAA,CACC,UAAU,yBACV,wBAAyB,CAAE,OAAQG,CAAA,CAAQ,CAAA,EAG9CC,GACCJ,EAAAA,IAAC0B,EAAAA,WAAA,CACC,MAAOrB,EACP,MAAOO,EACP,SAAUC,EACV,WAAU,GAGV,mBAAmB,MAAA,CAAA,CACrB,EAEJ,EACAO,EAAAA,KAACE,EAAAA,KAAA,CACC,UAAU,MACV,IAAI,MACJ,aAAa,MACb,UAAU,wBAEV,SAAA,CAAAtB,EAAAA,IAAC2B,EAAAA,QAAO,QAAQ,UAAU,QAAShB,EAAS,WAAYF,EACrD,SAAAF,CAAA,CACH,EACCC,EACCR,EAAAA,IAAC4B,EAAAA,aAAA,CACC,QAAQ,iBACR,QAASZ,EACT,WAAY,CAACD,GAAcN,EAE1B,WAAY,MAAQH,CAAA,CAAA,EAGvBN,EAAAA,IAAC2B,EAAAA,OAAA,CACC,QAAQ,UACR,QAASX,EACT,WAAY,CAACD,GAAcN,EAE1B,WAAY,MAAQH,CAAA,CAAA,CACvB,CAAA,CAAA,CAEJ,CAAA,CACF,CAAA,CACF,CAEJ"}
@@ -1,54 +1,57 @@
1
- import { jsx as r, jsxs as n } from "react/jsx-runtime";
2
- import { useState as b } from "react";
1
+ import { jsx as r, jsxs as i } from "react/jsx-runtime";
2
+ import { useState as v } from "react";
3
3
  /* empty css */
4
- import { DialogModal as v, Dialog as x, DialogTitle as w, DialogClose as B, DialogBody as S } from "../../primitives/Dialog/Dialog.js";
5
- import { InputField as T } from "../../primitives/Input/Input.js";
4
+ import { DialogModal as P, Dialog as b, DialogTitle as x, DialogClose as B, DialogBody as O } from "../../primitives/Dialog/Dialog.js";
5
+ import { InputField as w } from "../../primitives/Input/Input.js";
6
6
  import { Flex as f } from "../../layout/Flex/Flex.js";
7
- import { Button as p, ButtonDanger as j } from "../../primitives/Button/Button.js";
8
- function R({
9
- isOpen: t,
10
- title: u,
11
- message: s,
12
- confirmValue: i,
13
- confirmValueLabel: h,
14
- confirmLabel: d = "Confirm",
7
+ import { Button as p, ButtonDanger as S } from "../../primitives/Button/Button.js";
8
+ function H(n) {
9
+ return n.isOpen ? /* @__PURE__ */ r(T, { ...n }) : null;
10
+ }
11
+ function T({
12
+ title: n,
13
+ message: t,
14
+ confirmValue: o,
15
+ confirmValueLabel: u,
16
+ confirmLabel: l = "Confirm",
15
17
  cancelLabel: g = "Cancel",
16
- isDanger: D = !1,
18
+ isDanger: h = !1,
17
19
  isLoading: e = !1,
18
- onConfirm: y,
19
- onClose: C
20
+ onConfirm: D,
21
+ onClose: s
20
22
  }) {
21
- const [m, o] = b(""), l = i ? m === i : !0;
22
- function a() {
23
- o(""), C();
23
+ const [c, y] = v(""), a = o ? c === o : !0;
24
+ function d() {
25
+ a && D();
24
26
  }
25
- function c() {
26
- l && (o(""), y());
27
+ function m() {
28
+ e || s();
27
29
  }
28
- return t ? /* @__PURE__ */ r(v, { isOpen: t, onOpenChange: (P) => !P && a(), children: /* @__PURE__ */ n(x, { children: [
29
- /* @__PURE__ */ n(f, { direction: "row", alignPrimary: "space-between", alignSecondary: "center", children: [
30
- /* @__PURE__ */ r(w, { children: u }),
31
- /* @__PURE__ */ r(B, { onPress: a })
30
+ return /* @__PURE__ */ r(P, { isOpen: !0, onOpenChange: (C) => !C && m(), children: /* @__PURE__ */ i(b, { children: [
31
+ /* @__PURE__ */ i(f, { direction: "row", alignPrimary: "space-between", alignSecondary: "center", children: [
32
+ /* @__PURE__ */ r(x, { children: n }),
33
+ /* @__PURE__ */ r(B, { onPress: m })
32
34
  ] }),
33
- /* @__PURE__ */ n(S, { children: [
34
- s && /* @__PURE__ */ r(
35
+ /* @__PURE__ */ i(O, { children: [
36
+ t && /* @__PURE__ */ r(
35
37
  "p",
36
38
  {
37
39
  className: "confirm-dialog-message",
38
- dangerouslySetInnerHTML: { __html: s }
40
+ dangerouslySetInnerHTML: { __html: t }
39
41
  }
40
42
  ),
41
- i && /* @__PURE__ */ r(
42
- T,
43
+ o && /* @__PURE__ */ r(
44
+ w,
43
45
  {
44
- label: h,
45
- value: m,
46
- onChange: o,
47
- isRequired: !0
46
+ label: u,
47
+ value: c,
48
+ onChange: y,
49
+ isRequired: !0,
50
+ validationBehavior: "aria"
48
51
  }
49
52
  )
50
53
  ] }),
51
- /* @__PURE__ */ n(
54
+ /* @__PURE__ */ i(
52
55
  f,
53
56
  {
54
57
  direction: "row",
@@ -56,30 +59,30 @@ function R({
56
59
  alignPrimary: "end",
57
60
  className: "confirm-dialog-footer",
58
61
  children: [
59
- /* @__PURE__ */ r(p, { variant: "neutral", onPress: a, isDisabled: e, children: g }),
60
- D ? /* @__PURE__ */ r(
61
- j,
62
+ /* @__PURE__ */ r(p, { variant: "neutral", onPress: s, isDisabled: e, children: g }),
63
+ h ? /* @__PURE__ */ r(
64
+ S,
62
65
  {
63
66
  variant: "danger-primary",
64
- onPress: c,
65
- isDisabled: !l || e,
66
- children: e ? "..." : d
67
+ onPress: d,
68
+ isDisabled: !a || e,
69
+ children: e ? "..." : l
67
70
  }
68
71
  ) : /* @__PURE__ */ r(
69
72
  p,
70
73
  {
71
74
  variant: "primary",
72
- onPress: c,
73
- isDisabled: !l || e,
74
- children: e ? "..." : d
75
+ onPress: d,
76
+ isDisabled: !a || e,
77
+ children: e ? "..." : l
75
78
  }
76
79
  )
77
80
  ]
78
81
  }
79
82
  )
80
- ] }) }) : null;
83
+ ] }) });
81
84
  }
82
85
  export {
83
- R as ConfirmDialog
86
+ H as ConfirmDialog
84
87
  };
85
88
  //# sourceMappingURL=ConfirmDialog.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ConfirmDialog.js","sources":["../../../../../src/ui/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import {\n Button,\n ButtonDanger,\n Dialog,\n DialogBody,\n DialogClose,\n DialogModal,\n DialogTitle,\n InputField,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { useState } from \"react\";\nimport \"./confirmdialog.css\";\n\nexport interface ConfirmDialogProps {\n isOpen: boolean;\n title: string;\n message?: string;\n /** If set, user must type this value to enable the confirm button */\n confirmValue?: string;\n confirmValueLabel?: string;\n confirmLabel?: string;\n cancelLabel?: string;\n isDanger?: boolean;\n isLoading?: boolean;\n onConfirm: () => void;\n onClose: () => void;\n}\n\nexport function ConfirmDialog({\n isOpen,\n title,\n message,\n confirmValue,\n confirmValueLabel,\n confirmLabel = \"Confirm\",\n cancelLabel = \"Cancel\",\n isDanger = false,\n isLoading = false,\n onConfirm,\n onClose,\n}: ConfirmDialogProps) {\n const [typed, setTyped] = useState(\"\");\n\n const canConfirm = confirmValue ? typed === confirmValue : true;\n\n function handleClose() {\n setTyped(\"\");\n onClose();\n }\n\n function handleConfirm() {\n if (!canConfirm) return;\n setTyped(\"\");\n onConfirm();\n }\n\n if (!isOpen) return null;\n\n return (\n <DialogModal isOpen={isOpen} onOpenChange={(open) => !open && handleClose()}>\n <Dialog>\n <Flex direction=\"row\" alignPrimary=\"space-between\" alignSecondary=\"center\">\n <DialogTitle>{title}</DialogTitle>\n <DialogClose onPress={handleClose} />\n </Flex>\n <DialogBody>\n {message && (\n <p\n className=\"confirm-dialog-message\"\n dangerouslySetInnerHTML={{ __html: message }}\n />\n )}\n {confirmValue && (\n <InputField\n label={confirmValueLabel}\n value={typed}\n onChange={setTyped}\n isRequired\n />\n )}\n </DialogBody>\n <Flex\n direction=\"row\"\n gap=\"200\"\n alignPrimary=\"end\"\n className=\"confirm-dialog-footer\"\n >\n <Button variant=\"neutral\" onPress={handleClose} isDisabled={isLoading}>\n {cancelLabel}\n </Button>\n {isDanger ? (\n <ButtonDanger\n variant=\"danger-primary\"\n onPress={handleConfirm}\n isDisabled={!canConfirm || isLoading}\n >\n {isLoading ? \"...\" : confirmLabel}\n </ButtonDanger>\n ) : (\n <Button\n variant=\"primary\"\n onPress={handleConfirm}\n isDisabled={!canConfirm || isLoading}\n >\n {isLoading ? \"...\" : confirmLabel}\n </Button>\n )}\n </Flex>\n </Dialog>\n </DialogModal>\n );\n}\n"],"names":["ConfirmDialog","isOpen","title","message","confirmValue","confirmValueLabel","confirmLabel","cancelLabel","isDanger","isLoading","onConfirm","onClose","typed","setTyped","useState","canConfirm","handleClose","handleConfirm","jsx","DialogModal","open","jsxs","Dialog","Flex","DialogTitle","DialogClose","DialogBody","InputField","Button","ButtonDanger"],"mappings":";;;;;;;AA6BO,SAASA,EAAc;AAAA,EAC5B,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,SAAAC;AACF,GAAuB;AACrB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAE,GAE/BC,IAAaX,IAAeQ,MAAUR,IAAe;AAE3D,WAASY,IAAc;AACrB,IAAAH,EAAS,EAAE,GACXF,EAAA;AAAA,EACF;AAEA,WAASM,IAAgB;AACvB,IAAKF,MACLF,EAAS,EAAE,GACXH,EAAA;AAAA,EACF;AAEA,SAAKT,IAGH,gBAAAiB,EAACC,GAAA,EAAY,QAAAlB,GAAgB,cAAc,CAACmB,MAAS,CAACA,KAAQJ,EAAA,GAC5D,UAAA,gBAAAK,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAD,EAACE,KAAK,WAAU,OAAM,cAAa,iBAAgB,gBAAe,UAChE,UAAA;AAAA,MAAA,gBAAAL,EAACM,KAAa,UAAAtB,EAAA,CAAM;AAAA,MACpB,gBAAAgB,EAACO,GAAA,EAAY,SAAST,EAAA,CAAa;AAAA,IAAA,GACrC;AAAA,sBACCU,GAAA,EACE,UAAA;AAAA,MAAAvB,KACC,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,yBAAyB,EAAE,QAAQf,EAAA;AAAA,QAAQ;AAAA,MAAA;AAAA,MAG9CC,KACC,gBAAAc;AAAA,QAACS;AAAA,QAAA;AAAA,UACC,OAAOtB;AAAA,UACP,OAAOO;AAAA,UACP,UAAUC;AAAA,UACV,YAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GAEJ;AAAA,IACA,gBAAAQ;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,cAAa;AAAA,QACb,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAL,EAACU,KAAO,SAAQ,WAAU,SAASZ,GAAa,YAAYP,GACzD,UAAAF,EAAA,CACH;AAAA,UACCC,IACC,gBAAAU;AAAA,YAACW;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASZ;AAAA,cACT,YAAY,CAACF,KAAcN;AAAA,cAE1B,cAAY,QAAQH;AAAA,YAAA;AAAA,UAAA,IAGvB,gBAAAY;AAAA,YAACU;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASX;AAAA,cACT,YAAY,CAACF,KAAcN;AAAA,cAE1B,cAAY,QAAQH;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CACF,EAAA,CACF,IArDkB;AAuDtB;"}
1
+ {"version":3,"file":"ConfirmDialog.js","sources":["../../../../../src/ui/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import {\n Button,\n ButtonDanger,\n Dialog,\n DialogBody,\n DialogClose,\n DialogModal,\n DialogTitle,\n InputField,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { useState } from \"react\";\nimport \"./confirmdialog.css\";\n\nexport interface ConfirmDialogProps {\n isOpen: boolean;\n title: string;\n message?: string;\n /** If set, user must type this value to enable the confirm button */\n confirmValue?: string;\n confirmValueLabel?: string;\n confirmLabel?: string;\n cancelLabel?: string;\n isDanger?: boolean;\n isLoading?: boolean;\n onConfirm: () => void;\n onClose: () => void;\n}\n\nexport function ConfirmDialog(props: ConfirmDialogProps) {\n if (!props.isOpen) return null;\n\n return <OpenConfirmDialog {...props} />;\n}\n\nfunction OpenConfirmDialog({\n title,\n message,\n confirmValue,\n confirmValueLabel,\n confirmLabel = \"Confirm\",\n cancelLabel = \"Cancel\",\n isDanger = false,\n isLoading = false,\n onConfirm,\n onClose,\n}: ConfirmDialogProps) {\n const [typed, setTyped] = useState(\"\");\n\n const canConfirm = confirmValue ? typed === confirmValue : true;\n\n function handleConfirm() {\n if (!canConfirm) return;\n onConfirm();\n }\n\n function closeUnlessLoading() {\n if (!isLoading) onClose();\n }\n\n return (\n <DialogModal isOpen onOpenChange={(open) => !open && closeUnlessLoading()}>\n <Dialog>\n <Flex direction=\"row\" alignPrimary=\"space-between\" alignSecondary=\"center\">\n <DialogTitle>{title}</DialogTitle>\n <DialogClose onPress={closeUnlessLoading} />\n </Flex>\n <DialogBody>\n {message && (\n <p\n className=\"confirm-dialog-message\"\n dangerouslySetInnerHTML={{ __html: message }}\n />\n )}\n {confirmValue && (\n <InputField\n label={confirmValueLabel}\n value={typed}\n onChange={setTyped}\n isRequired\n // The confirm button already waits for the exact value; native validation would show\n // the browser's own message, in the browser's language.\n validationBehavior=\"aria\"\n />\n )}\n </DialogBody>\n <Flex\n direction=\"row\"\n gap=\"200\"\n alignPrimary=\"end\"\n className=\"confirm-dialog-footer\"\n >\n <Button variant=\"neutral\" onPress={onClose} isDisabled={isLoading}>\n {cancelLabel}\n </Button>\n {isDanger ? (\n <ButtonDanger\n variant=\"danger-primary\"\n onPress={handleConfirm}\n isDisabled={!canConfirm || isLoading}\n >\n {isLoading ? \"...\" : confirmLabel}\n </ButtonDanger>\n ) : (\n <Button\n variant=\"primary\"\n onPress={handleConfirm}\n isDisabled={!canConfirm || isLoading}\n >\n {isLoading ? \"...\" : confirmLabel}\n </Button>\n )}\n </Flex>\n </Dialog>\n </DialogModal>\n );\n}\n"],"names":["ConfirmDialog","props","jsx","OpenConfirmDialog","title","message","confirmValue","confirmValueLabel","confirmLabel","cancelLabel","isDanger","isLoading","onConfirm","onClose","typed","setTyped","useState","canConfirm","handleConfirm","closeUnlessLoading","DialogModal","open","jsxs","Dialog","Flex","DialogTitle","DialogClose","DialogBody","InputField","Button","ButtonDanger"],"mappings":";;;;;;;AA6BO,SAASA,EAAcC,GAA2B;AACvD,SAAKA,EAAM,SAEJ,gBAAAC,EAACC,GAAA,EAAmB,GAAGF,EAAA,CAAO,IAFX;AAG5B;AAEA,SAASE,EAAkB;AAAA,EACzB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,SAAAC;AACF,GAAuB;AACrB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAE,GAE/BC,IAAaX,IAAeQ,MAAUR,IAAe;AAE3D,WAASY,IAAgB;AACvB,IAAKD,KACLL,EAAA;AAAA,EACF;AAEA,WAASO,IAAqB;AAC5B,IAAKR,KAAWE,EAAA;AAAA,EAClB;AAEA,SACE,gBAAAX,EAACkB,GAAA,EAAY,QAAM,IAAC,cAAc,CAACC,MAAS,CAACA,KAAQF,EAAA,GACnD,UAAA,gBAAAG,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAD,EAACE,KAAK,WAAU,OAAM,cAAa,iBAAgB,gBAAe,UAChE,UAAA;AAAA,MAAA,gBAAAtB,EAACuB,KAAa,UAAArB,EAAA,CAAM;AAAA,MACpB,gBAAAF,EAACwB,GAAA,EAAY,SAASP,EAAA,CAAoB;AAAA,IAAA,GAC5C;AAAA,sBACCQ,GAAA,EACE,UAAA;AAAA,MAAAtB,KACC,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,yBAAyB,EAAE,QAAQG,EAAA;AAAA,QAAQ;AAAA,MAAA;AAAA,MAG9CC,KACC,gBAAAJ;AAAA,QAAC0B;AAAA,QAAA;AAAA,UACC,OAAOrB;AAAA,UACP,OAAOO;AAAA,UACP,UAAUC;AAAA,UACV,YAAU;AAAA,UAGV,oBAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IACrB,GAEJ;AAAA,IACA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,cAAa;AAAA,QACb,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAtB,EAAC2B,KAAO,SAAQ,WAAU,SAAShB,GAAS,YAAYF,GACrD,UAAAF,EAAA,CACH;AAAA,UACCC,IACC,gBAAAR;AAAA,YAAC4B;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASZ;AAAA,cACT,YAAY,CAACD,KAAcN;AAAA,cAE1B,cAAY,QAAQH;AAAA,YAAA;AAAA,UAAA,IAGvB,gBAAAN;AAAA,YAAC2B;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASX;AAAA,cACT,YAAY,CAACD,KAAcN;AAAA,cAE1B,cAAY,QAAQH;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CACF,EAAA,CACF;AAEJ;"}
@@ -13,4 +13,4 @@ export interface ConfirmDialogProps {
13
13
  onConfirm: () => void;
14
14
  onClose: () => void;
15
15
  }
16
- export declare function ConfirmDialog({ isOpen, title, message, confirmValue, confirmValueLabel, confirmLabel, cancelLabel, isDanger, isLoading, onConfirm, onClose, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element | null;
16
+ export declare function ConfirmDialog(props: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element | null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apipass/design-system",
3
- "version": "7.4.3",
3
+ "version": "7.4.4",
4
4
  "type": "module",
5
5
  "description": "APIPass React Design System",
6
6
  "sideEffects": [