@apipass/design-system 7.4.3 → 7.4.5
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/dist/lib/embedded-styles.js +2 -2
- package/dist/lib/style.css +1 -1
- package/dist/lib/ui/components/Breadcrumb/Breadcrumb.cjs +1 -1
- package/dist/lib/ui/components/Breadcrumb/Breadcrumb.cjs.map +1 -1
- package/dist/lib/ui/components/Breadcrumb/Breadcrumb.js +17 -8
- package/dist/lib/ui/components/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs +1 -1
- package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs.map +1 -1
- package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.js +48 -45
- package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.js.map +1 -1
- package/dist/types/ui/components/ConfirmDialog/ConfirmDialog.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../../vendor/clsx/dist/clsx.cjs");;/* empty css */const c=require("../../layout/Flex/Flex.cjs"),d=require("../../utils/AnchorOrButton.cjs");function b({items:a,className:l}){const t=a.length-1;return e.jsx("nav",{"aria-label":"Breadcrumb",className:u.clsx(l,"sds-breadcrumb"),children:e.jsx(c.Flex,{alignSecondary:"center",gap:"100",children:a.map((r,n)=>{const s=n===t;return e.jsxs(c.Flex,{className:"breadcrumb-item",alignSecondary:"center",gap:"100",children:[s?e.jsx("span",{className:"breadcrumb-current","aria-current":"page",title:r.label,children:r.label}):e.jsx(d.AnchorOrButton,{...r.href?{href:r.href}:{},onPress:r.onPress,className:"breadcrumb-link",children:e.jsx("span",{title:r.label,children:r.label})}),!s&&e.jsx("span",{className:"breadcrumb-separator","aria-hidden":"true",children:"/"})]},`${r.label}-${n}`)})})})}exports.Breadcrumb=b;
|
|
2
2
|
//# sourceMappingURL=Breadcrumb.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.cjs","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Flex } from \"layout\";\nimport { AnchorOrButton } from \"utils\";\nimport \"./breadcrumb.css\";\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n onPress?: () => void;\n}\n\nexport interface BreadcrumbProps {\n items: BreadcrumbItem[];\n className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n const lastIndex = items.length - 1;\n return (\n <nav aria-label=\"Breadcrumb\" className={clsx(className, \"sds-breadcrumb\")}>\n <Flex alignSecondary=\"center\" gap=\"100\">\n {items.map((item, index) => {\n const isCurrentPage = index === lastIndex;\n return (\n <Flex\n key={`${item.label}-${index}`}\n alignSecondary=\"center\"\n gap=\"100\"\n >\n {isCurrentPage ? (\n <span
|
|
1
|
+
{"version":3,"file":"Breadcrumb.cjs","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Flex } from \"layout\";\nimport { AnchorOrButton } from \"utils\";\nimport \"./breadcrumb.css\";\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n onPress?: () => void;\n}\n\nexport interface BreadcrumbProps {\n items: BreadcrumbItem[];\n className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n const lastIndex = items.length - 1;\n return (\n <nav aria-label=\"Breadcrumb\" className={clsx(className, \"sds-breadcrumb\")}>\n <Flex alignSecondary=\"center\" gap=\"100\">\n {items.map((item, index) => {\n const isCurrentPage = index === lastIndex;\n return (\n <Flex\n key={`${item.label}-${index}`}\n className=\"breadcrumb-item\"\n alignSecondary=\"center\"\n gap=\"100\"\n >\n {isCurrentPage ? (\n <span\n className=\"breadcrumb-current\"\n aria-current=\"page\"\n title={item.label}\n >\n {item.label}\n </span>\n ) : (\n <AnchorOrButton\n {...(item.href ? { href: item.href } : {})}\n onPress={item.onPress}\n className=\"breadcrumb-link\"\n >\n <span title={item.label}>{item.label}</span>\n </AnchorOrButton>\n )}\n {!isCurrentPage && (\n <span className=\"breadcrumb-separator\" aria-hidden=\"true\">\n /\n </span>\n )}\n </Flex>\n );\n })}\n </Flex>\n </nav>\n );\n}\n"],"names":["Breadcrumb","items","className","lastIndex","clsx","Flex","item","index","isCurrentPage","jsxs","jsx","AnchorOrButton"],"mappings":"+RAgBO,SAASA,EAAW,CAAE,MAAAC,EAAO,UAAAC,GAA8B,CAChE,MAAMC,EAAYF,EAAM,OAAS,EACjC,aACG,MAAA,CAAI,aAAW,aAAa,UAAWG,EAAAA,KAAKF,EAAW,gBAAgB,EACtE,eAACG,EAAAA,KAAA,CAAK,eAAe,SAAS,IAAI,MAC/B,WAAM,IAAI,CAACC,EAAMC,IAAU,CAC1B,MAAMC,EAAgBD,IAAUJ,EAChC,OACEM,EAAAA,KAACJ,EAAAA,KAAA,CAEC,UAAU,kBACV,eAAe,SACf,IAAI,MAEH,SAAA,CAAAG,EACCE,EAAAA,IAAC,OAAA,CACC,UAAU,qBACV,eAAa,OACb,MAAOJ,EAAK,MAEX,SAAAA,EAAK,KAAA,CAAA,EAGRI,EAAAA,IAACC,EAAAA,eAAA,CACE,GAAIL,EAAK,KAAO,CAAE,KAAMA,EAAK,IAAA,EAAS,CAAA,EACvC,QAASA,EAAK,QACd,UAAU,kBAEV,eAAC,OAAA,CAAK,MAAOA,EAAK,MAAQ,WAAK,KAAA,CAAM,CAAA,CAAA,EAGxC,CAACE,GACAE,MAAC,OAAA,CAAK,UAAU,uBAAuB,cAAY,OAAO,SAAA,GAAA,CAE1D,CAAA,CAAA,EAzBG,GAAGJ,EAAK,KAAK,IAAIC,CAAK,EAAA,CA6BjC,CAAC,EACH,EACF,CAEJ"}
|
|
@@ -1,31 +1,40 @@
|
|
|
1
1
|
import { jsx as a, jsxs as d } from "react/jsx-runtime";
|
|
2
2
|
import { clsx as t } from "../../../vendor/clsx/dist/clsx.js";
|
|
3
3
|
/* empty css */
|
|
4
|
-
import { Flex as
|
|
4
|
+
import { Flex as c } from "../../layout/Flex/Flex.js";
|
|
5
5
|
import { AnchorOrButton as b } from "../../utils/AnchorOrButton.js";
|
|
6
6
|
function f({ items: e, className: s }) {
|
|
7
7
|
const o = e.length - 1;
|
|
8
|
-
return /* @__PURE__ */ a("nav", { "aria-label": "Breadcrumb", className: t(s, "sds-breadcrumb"), children: /* @__PURE__ */ a(
|
|
9
|
-
const
|
|
8
|
+
return /* @__PURE__ */ a("nav", { "aria-label": "Breadcrumb", className: t(s, "sds-breadcrumb"), children: /* @__PURE__ */ a(c, { alignSecondary: "center", gap: "100", children: e.map((r, l) => {
|
|
9
|
+
const n = l === o;
|
|
10
10
|
return /* @__PURE__ */ d(
|
|
11
|
-
|
|
11
|
+
c,
|
|
12
12
|
{
|
|
13
|
+
className: "breadcrumb-item",
|
|
13
14
|
alignSecondary: "center",
|
|
14
15
|
gap: "100",
|
|
15
16
|
children: [
|
|
16
|
-
|
|
17
|
+
n ? /* @__PURE__ */ a(
|
|
18
|
+
"span",
|
|
19
|
+
{
|
|
20
|
+
className: "breadcrumb-current",
|
|
21
|
+
"aria-current": "page",
|
|
22
|
+
title: r.label,
|
|
23
|
+
children: r.label
|
|
24
|
+
}
|
|
25
|
+
) : /* @__PURE__ */ a(
|
|
17
26
|
b,
|
|
18
27
|
{
|
|
19
28
|
...r.href ? { href: r.href } : {},
|
|
20
29
|
onPress: r.onPress,
|
|
21
30
|
className: "breadcrumb-link",
|
|
22
|
-
children: r.label
|
|
31
|
+
children: /* @__PURE__ */ a("span", { title: r.label, children: r.label })
|
|
23
32
|
}
|
|
24
33
|
),
|
|
25
|
-
!
|
|
34
|
+
!n && /* @__PURE__ */ a("span", { className: "breadcrumb-separator", "aria-hidden": "true", children: "/" })
|
|
26
35
|
]
|
|
27
36
|
},
|
|
28
|
-
`${r.label}-${
|
|
37
|
+
`${r.label}-${l}`
|
|
29
38
|
);
|
|
30
39
|
}) }) });
|
|
31
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.js","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Flex } from \"layout\";\nimport { AnchorOrButton } from \"utils\";\nimport \"./breadcrumb.css\";\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n onPress?: () => void;\n}\n\nexport interface BreadcrumbProps {\n items: BreadcrumbItem[];\n className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n const lastIndex = items.length - 1;\n return (\n <nav aria-label=\"Breadcrumb\" className={clsx(className, \"sds-breadcrumb\")}>\n <Flex alignSecondary=\"center\" gap=\"100\">\n {items.map((item, index) => {\n const isCurrentPage = index === lastIndex;\n return (\n <Flex\n key={`${item.label}-${index}`}\n alignSecondary=\"center\"\n gap=\"100\"\n >\n {isCurrentPage ? (\n <span
|
|
1
|
+
{"version":3,"file":"Breadcrumb.js","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Flex } from \"layout\";\nimport { AnchorOrButton } from \"utils\";\nimport \"./breadcrumb.css\";\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n onPress?: () => void;\n}\n\nexport interface BreadcrumbProps {\n items: BreadcrumbItem[];\n className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n const lastIndex = items.length - 1;\n return (\n <nav aria-label=\"Breadcrumb\" className={clsx(className, \"sds-breadcrumb\")}>\n <Flex alignSecondary=\"center\" gap=\"100\">\n {items.map((item, index) => {\n const isCurrentPage = index === lastIndex;\n return (\n <Flex\n key={`${item.label}-${index}`}\n className=\"breadcrumb-item\"\n alignSecondary=\"center\"\n gap=\"100\"\n >\n {isCurrentPage ? (\n <span\n className=\"breadcrumb-current\"\n aria-current=\"page\"\n title={item.label}\n >\n {item.label}\n </span>\n ) : (\n <AnchorOrButton\n {...(item.href ? { href: item.href } : {})}\n onPress={item.onPress}\n className=\"breadcrumb-link\"\n >\n <span title={item.label}>{item.label}</span>\n </AnchorOrButton>\n )}\n {!isCurrentPage && (\n <span className=\"breadcrumb-separator\" aria-hidden=\"true\">\n /\n </span>\n )}\n </Flex>\n );\n })}\n </Flex>\n </nav>\n );\n}\n"],"names":["Breadcrumb","items","className","lastIndex","clsx","Flex","item","index","isCurrentPage","jsxs","jsx","AnchorOrButton"],"mappings":";;;;;AAgBO,SAASA,EAAW,EAAE,OAAAC,GAAO,WAAAC,KAA8B;AAChE,QAAMC,IAAYF,EAAM,SAAS;AACjC,2BACG,OAAA,EAAI,cAAW,cAAa,WAAWG,EAAKF,GAAW,gBAAgB,GACtE,4BAACG,GAAA,EAAK,gBAAe,UAAS,KAAI,OAC/B,YAAM,IAAI,CAACC,GAAMC,MAAU;AAC1B,UAAMC,IAAgBD,MAAUJ;AAChC,WACE,gBAAAM;AAAA,MAACJ;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,gBAAe;AAAA,QACf,KAAI;AAAA,QAEH,UAAA;AAAA,UAAAG,IACC,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,gBAAa;AAAA,cACb,OAAOJ,EAAK;AAAA,cAEX,UAAAA,EAAK;AAAA,YAAA;AAAA,UAAA,IAGR,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACE,GAAIL,EAAK,OAAO,EAAE,MAAMA,EAAK,KAAA,IAAS,CAAA;AAAA,cACvC,SAASA,EAAK;AAAA,cACd,WAAU;AAAA,cAEV,4BAAC,QAAA,EAAK,OAAOA,EAAK,OAAQ,YAAK,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAGxC,CAACE,KACA,gBAAAE,EAAC,QAAA,EAAK,WAAU,wBAAuB,eAAY,QAAO,UAAA,IAAA,CAE1D;AAAA,QAAA;AAAA,MAAA;AAAA,MAzBG,GAAGJ,EAAK,KAAK,IAAIC,CAAK;AAAA,IAAA;AAAA,EA6BjC,CAAC,GACH,GACF;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
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
|
|
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
|
|
2
|
-
import { useState as
|
|
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
|
|
5
|
-
import { InputField as
|
|
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
|
|
8
|
-
function
|
|
9
|
-
isOpen:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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:
|
|
18
|
+
isDanger: h = !1,
|
|
17
19
|
isLoading: e = !1,
|
|
18
|
-
onConfirm:
|
|
19
|
-
onClose:
|
|
20
|
+
onConfirm: D,
|
|
21
|
+
onClose: s
|
|
20
22
|
}) {
|
|
21
|
-
const [
|
|
22
|
-
function
|
|
23
|
-
|
|
23
|
+
const [c, y] = v(""), a = o ? c === o : !0;
|
|
24
|
+
function d() {
|
|
25
|
+
a && D();
|
|
24
26
|
}
|
|
25
|
-
function
|
|
26
|
-
|
|
27
|
+
function m() {
|
|
28
|
+
e || s();
|
|
27
29
|
}
|
|
28
|
-
return
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
/* @__PURE__ */ r(
|
|
31
|
-
/* @__PURE__ */ r(B, { onPress:
|
|
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__ */
|
|
34
|
-
|
|
35
|
+
/* @__PURE__ */ i(O, { children: [
|
|
36
|
+
t && /* @__PURE__ */ r(
|
|
35
37
|
"p",
|
|
36
38
|
{
|
|
37
39
|
className: "confirm-dialog-message",
|
|
38
|
-
dangerouslySetInnerHTML: { __html:
|
|
40
|
+
dangerouslySetInnerHTML: { __html: t }
|
|
39
41
|
}
|
|
40
42
|
),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
+
o && /* @__PURE__ */ r(
|
|
44
|
+
w,
|
|
43
45
|
{
|
|
44
|
-
label:
|
|
45
|
-
value:
|
|
46
|
-
onChange:
|
|
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__ */
|
|
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:
|
|
60
|
-
|
|
61
|
-
|
|
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:
|
|
65
|
-
isDisabled: !
|
|
66
|
-
children: e ? "..." :
|
|
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:
|
|
73
|
-
isDisabled: !
|
|
74
|
-
children: e ? "..." :
|
|
75
|
+
onPress: d,
|
|
76
|
+
isDisabled: !a || e,
|
|
77
|
+
children: e ? "..." : l
|
|
75
78
|
}
|
|
76
79
|
)
|
|
77
80
|
]
|
|
78
81
|
}
|
|
79
82
|
)
|
|
80
|
-
] }) })
|
|
83
|
+
] }) });
|
|
81
84
|
}
|
|
82
85
|
export {
|
|
83
|
-
|
|
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
|
|
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(
|
|
16
|
+
export declare function ConfirmDialog(props: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element | null;
|