@apipass/design-system 7.4.5 → 7.4.6

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.
Files changed (5) hide show
  1. package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs +1 -1
  2. package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs.map +1 -1
  3. package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.js +12 -11
  4. package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.js.map +1 -1
  5. package/package.json +1 -1
package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs CHANGED
@@ -1,2 +1,2 @@
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;
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:o,confirmValue:t,confirmValueLabel:f,confirmLabel:l="Confirm",cancelLabel:j="Cancel",isDanger:h=!1,isLoading:n=!1,onConfirm:m,onClose:u}){const[c,D]=y.useState(""),s=t?c===t:!0;function d(){s&&m()}function g(){n||u()}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:[o&&e.jsx("p",{className:"confirm-dialog-message",dangerouslySetInnerHTML:{__html:o}}),t&&e.jsx(C.InputField,{label:f,value:c,onChange:D,autoFocus:!0,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:u,isDisabled:n,children:j}),h?e.jsx(a.ButtonDanger,{variant:"danger-primary",onPress:d,isDisabled:!s||n,children:n?"...":l}):e.jsx(a.Button,{variant:"primary",onPress:d,isDisabled:!s||n,children:n?"...":l})]})]})})}exports.ConfirmDialog=q;
2
2
  //# sourceMappingURL=ConfirmDialog.cjs.map
package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs.map CHANGED
@@ -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(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
+ {"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 autoFocus\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,UAAS,GACT,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"}
package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.js CHANGED
@@ -3,16 +3,16 @@ import { useState as v } from "react";
3
3
  /* empty css */
4
4
  import { DialogModal as P, Dialog as b, DialogTitle as x, DialogClose as B, DialogBody as O } from "../../primitives/Dialog/Dialog.js";
5
5
  import { InputField as w } from "../../primitives/Input/Input.js";
6
- import { Flex as f } from "../../layout/Flex/Flex.js";
7
- import { Button as p, ButtonDanger as S } from "../../primitives/Button/Button.js";
6
+ import { Flex as u } from "../../layout/Flex/Flex.js";
7
+ import { Button as f, ButtonDanger as F } from "../../primitives/Button/Button.js";
8
8
  function H(n) {
9
- return n.isOpen ? /* @__PURE__ */ r(T, { ...n }) : null;
9
+ return n.isOpen ? /* @__PURE__ */ r(S, { ...n }) : null;
10
10
  }
11
- function T({
11
+ function S({
12
12
  title: n,
13
13
  message: t,
14
14
  confirmValue: o,
15
- confirmValueLabel: u,
15
+ confirmValueLabel: p,
16
16
  confirmLabel: l = "Confirm",
17
17
  cancelLabel: g = "Cancel",
18
18
  isDanger: h = !1,
@@ -28,7 +28,7 @@ function T({
28
28
  e || s();
29
29
  }
30
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: [
31
+ /* @__PURE__ */ i(u, { direction: "row", alignPrimary: "space-between", alignSecondary: "center", children: [
32
32
  /* @__PURE__ */ r(x, { children: n }),
33
33
  /* @__PURE__ */ r(B, { onPress: m })
34
34
  ] }),
@@ -43,25 +43,26 @@ function T({
43
43
  o && /* @__PURE__ */ r(
44
44
  w,
45
45
  {
46
- label: u,
46
+ label: p,
47
47
  value: c,
48
48
  onChange: y,
49
+ autoFocus: !0,
49
50
  isRequired: !0,
50
51
  validationBehavior: "aria"
51
52
  }
52
53
  )
53
54
  ] }),
54
55
  /* @__PURE__ */ i(
55
- f,
56
+ u,
56
57
  {
57
58
  direction: "row",
58
59
  gap: "200",
59
60
  alignPrimary: "end",
60
61
  className: "confirm-dialog-footer",
61
62
  children: [
62
- /* @__PURE__ */ r(p, { variant: "neutral", onPress: s, isDisabled: e, children: g }),
63
+ /* @__PURE__ */ r(f, { variant: "neutral", onPress: s, isDisabled: e, children: g }),
63
64
  h ? /* @__PURE__ */ r(
64
- S,
65
+ F,
65
66
  {
66
67
  variant: "danger-primary",
67
68
  onPress: d,
@@ -69,7 +70,7 @@ function T({
69
70
  children: e ? "..." : l
70
71
  }
71
72
  ) : /* @__PURE__ */ r(
72
- p,
73
+ f,
73
74
  {
74
75
  variant: "primary",
75
76
  onPress: d,
package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.js.map CHANGED
@@ -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(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;"}
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 autoFocus\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,WAAS;AAAA,UACT,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;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apipass/design-system",
3
- "version": "7.4.5",
3
+ "version": "7.4.6",
4
4
  "type": "module",
5
5
  "description": "APIPass React Design System",
6
6
  "sideEffects": [