@apipass/design-system 7.4.5 → 7.4.7

package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs

@@ -1,2 +1,2 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react");;/* empty css                    */const i=require("../../primitives/Dialog/Dialog.cjs"),C=require("../../primitives/Input/Input.cjs"),x=require("../../layout/Flex/Flex.cjs"),l=require("../../primitives/Button/Button.cjs");function v(t){return t.isOpen?e.jsx(q,{...t}):null}function q({title:t,message:u,confirmValue:o,confirmValueLabel:j,confirmLabel:c="Confirm",cancelLabel:m="Cancel",isDanger:p=!1,isLoading:n=!1,onConfirm:h,onClose:d}){const[g,D]=y.useState(""),a=o?g===o:!0;function s(){!a||n||h()}function f(){n||d()}return e.jsx(i.DialogModal,{isOpen:!0,onOpenChange:r=>!r&&f(),children:e.jsxs(i.Dialog,{children:[e.jsxs(x.Flex,{direction:"row",alignPrimary:"space-between",alignSecondary:"center",children:[e.jsx(i.DialogTitle,{children:t}),e.jsx(i.DialogClose,{onPress:f})]}),e.jsxs(i.DialogBody,{children:[u&&e.jsx("p",{className:"confirm-dialog-message",dangerouslySetInnerHTML:{__html:u}}),o&&e.jsx(C.InputField,{label:j,value:g,onChange:D,autoFocus:!0,onKeyDown:r=>{r.continuePropagation(),r.key==="Enter"&&!r.repeat&&!r.nativeEvent.isComposing&&s()},isRequired:!0,validationBehavior:"aria"})]}),e.jsxs(x.Flex,{direction:"row",gap:"200",alignPrimary:"end",className:"confirm-dialog-footer",children:[e.jsx(l.Button,{variant:"neutral",onPress:d,isDisabled:n,children:m}),p?e.jsx(l.ButtonDanger,{variant:"danger-primary",onPress:s,isDisabled:!a||n,children:n?"...":c}):e.jsx(l.Button,{variant:"primary",onPress:s,isDisabled:!a||n,children:n?"...":c})]})]})})}exports.ConfirmDialog=v;
 //# sourceMappingURL=ConfirmDialog.cjs.map

package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs.map

@@ -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"}
+{"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 || isLoading) 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              onKeyDown={(e) => {\n                // React Aria stops every key by default; Escape must still reach the modal.\n                e.continuePropagation();\n                if (e.key === \"Enter\" && !e.repeat && !e.nativeEvent.isComposing) handleConfirm();\n              }}\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","e","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,CACnB,CAACD,GAAcN,GACnBC,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,UAAYc,GAAM,CAEhBA,EAAE,oBAAA,EACEA,EAAE,MAAQ,SAAW,CAACA,EAAE,QAAU,CAACA,EAAE,YAAY,aAAaX,EAAA,CACpE,EACA,WAAU,GAGV,mBAAmB,MAAA,CAAA,CACrB,EAEJ,EACAI,EAAAA,KAACE,EAAAA,KAAA,CACC,UAAU,MACV,IAAI,MACJ,aAAa,MACb,UAAU,wBAEV,SAAA,CAAAtB,EAAAA,IAAC4B,EAAAA,QAAO,QAAQ,UAAU,QAASjB,EAAS,WAAYF,EACrD,SAAAF,CAAA,CACH,EACCC,EACCR,EAAAA,IAAC6B,EAAAA,aAAA,CACC,QAAQ,iBACR,QAASb,EACT,WAAY,CAACD,GAAcN,EAE1B,WAAY,MAAQH,CAAA,CAAA,EAGvBN,EAAAA,IAAC4B,EAAAA,OAAA,CACC,QAAQ,UACR,QAASZ,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

@@ -1,57 +1,61 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
 import { useState as v } from "react";
 /* empty css                  */
-import { DialogModal as P, Dialog as b, DialogTitle as x, DialogClose as B, DialogBody as O } from "../../primitives/Dialog/Dialog.js";
-import { InputField as w } from "../../primitives/Input/Input.js";
+import { DialogModal as P, Dialog as b, DialogTitle as w, DialogClose as x, DialogBody as B } from "../../primitives/Dialog/Dialog.js";
+import { InputField as O } from "../../primitives/Input/Input.js";
 import { Flex as f } from "../../layout/Flex/Flex.js";
-import { Button as p, ButtonDanger as S } from "../../primitives/Button/Button.js";
-function H(n) {
-  return n.isOpen ? /* @__PURE__ */ r(T, { ...n }) : null;
+import { Button as p, ButtonDanger as F } from "../../primitives/Button/Button.js";
+function k(i) {
+  return i.isOpen ? /* @__PURE__ */ e(S, { ...i }) : null;
 }
-function T({
-  title: n,
-  message: t,
-  confirmValue: o,
-  confirmValueLabel: u,
-  confirmLabel: l = "Confirm",
-  cancelLabel: g = "Cancel",
-  isDanger: h = !1,
-  isLoading: e = !1,
-  onConfirm: D,
-  onClose: s
+function S({
+  title: i,
+  message: s,
+  confirmValue: t,
+  confirmValueLabel: g,
+  confirmLabel: c = "Confirm",
+  cancelLabel: h = "Cancel",
+  isDanger: D = !1,
+  isLoading: r = !1,
+  onConfirm: y,
+  onClose: m
 }) {
-  const [c, y] = v(""), a = o ? c === o : !0;
-  function d() {
-    a && D();
+  const [d, C] = v(""), a = t ? d === t : !0;
+  function l() {
+    !a || r || y();
   }
-  function m() {
-    e || s();
+  function u() {
+    r || m();
   }
-  return /* @__PURE__ */ r(P, { isOpen: !0, onOpenChange: (C) => !C && m(), children: /* @__PURE__ */ i(b, { children: [
-    /* @__PURE__ */ i(f, { direction: "row", alignPrimary: "space-between", alignSecondary: "center", children: [
-      /* @__PURE__ */ r(x, { children: n }),
-      /* @__PURE__ */ r(B, { onPress: m })
+  return /* @__PURE__ */ e(P, { isOpen: !0, onOpenChange: (n) => !n && u(), children: /* @__PURE__ */ o(b, { children: [
+    /* @__PURE__ */ o(f, { direction: "row", alignPrimary: "space-between", alignSecondary: "center", children: [
+      /* @__PURE__ */ e(w, { children: i }),
+      /* @__PURE__ */ e(x, { onPress: u })
     ] }),
-    /* @__PURE__ */ i(O, { children: [
-      t && /* @__PURE__ */ r(
+    /* @__PURE__ */ o(B, { children: [
+      s && /* @__PURE__ */ e(
         "p",
         {
           className: "confirm-dialog-message",
-          dangerouslySetInnerHTML: { __html: t }
+          dangerouslySetInnerHTML: { __html: s }
         }
       ),
-      o && /* @__PURE__ */ r(
-        w,
+      t && /* @__PURE__ */ e(
+        O,
         {
-          label: u,
-          value: c,
-          onChange: y,
+          label: g,
+          value: d,
+          onChange: C,
+          autoFocus: !0,
+          onKeyDown: (n) => {
+            n.continuePropagation(), n.key === "Enter" && !n.repeat && !n.nativeEvent.isComposing && l();
+          },
           isRequired: !0,
           validationBehavior: "aria"
         }
       )
     ] }),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ o(
       f,
       {
         direction: "row",
@@ -59,22 +63,22 @@ function T({
         alignPrimary: "end",
         className: "confirm-dialog-footer",
         children: [
-          /* @__PURE__ */ r(p, { variant: "neutral", onPress: s, isDisabled: e, children: g }),
-          h ? /* @__PURE__ */ r(
-            S,
+          /* @__PURE__ */ e(p, { variant: "neutral", onPress: m, isDisabled: r, children: h }),
+          D ? /* @__PURE__ */ e(
+            F,
             {
               variant: "danger-primary",
-              onPress: d,
-              isDisabled: !a || e,
-              children: e ? "..." : l
+              onPress: l,
+              isDisabled: !a || r,
+              children: r ? "..." : c
             }
-          ) : /* @__PURE__ */ r(
+          ) : /* @__PURE__ */ e(
             p,
             {
               variant: "primary",
-              onPress: d,
-              isDisabled: !a || e,
-              children: e ? "..." : l
+              onPress: l,
+              isDisabled: !a || r,
+              children: r ? "..." : c
             }
           )
         ]
@@ -83,6 +87,6 @@ function T({
   ] }) });
 }
 export {
-  H as ConfirmDialog
+  k as ConfirmDialog
 };
 //# sourceMappingURL=ConfirmDialog.js.map

package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.js.map

@@ -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;"}
+{"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 || isLoading) 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              onKeyDown={(e) => {\n                // React Aria stops every key by default; Escape must still reach the modal.\n                e.continuePropagation();\n                if (e.key === \"Enter\" && !e.repeat && !e.nativeEvent.isComposing) handleConfirm();\n              }}\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","e","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,IAAI,CAACD,KAAcN,KACnBC,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,WAAW,CAACc,MAAM;AAEhB,YAAAA,EAAE,oBAAA,GACEA,EAAE,QAAQ,WAAW,CAACA,EAAE,UAAU,CAACA,EAAE,YAAY,eAAaX,EAAA;AAAA,UACpE;AAAA,UACA,YAAU;AAAA,UAGV,oBAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IACrB,GAEJ;AAAA,IACA,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,cAAa;AAAA,QACb,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAtB,EAAC4B,KAAO,SAAQ,WAAU,SAASjB,GAAS,YAAYF,GACrD,UAAAF,EAAA,CACH;AAAA,UACCC,IACC,gBAAAR;AAAA,YAAC6B;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASb;AAAA,cACT,YAAY,CAACD,KAAcN;AAAA,cAE1B,cAAY,QAAQH;AAAA,YAAA;AAAA,UAAA,IAGvB,gBAAAN;AAAA,YAAC4B;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASZ;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

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "7.4.5",
+  "version": "7.4.7",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [