@uniformdev/design-system 19.14.0 → 19.14.1-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1631 -234
- package/dist/index.d.ts +71 -12
- package/dist/index.js +1602 -232
- package/package.json +12 -2
package/dist/esm/index.js
CHANGED
|
@@ -1386,6 +1386,115 @@ var queryStringIcon = GenIcon({
|
|
|
1386
1386
|
}
|
|
1387
1387
|
]
|
|
1388
1388
|
});
|
|
1389
|
+
var formatBoldIcon = GenIcon({
|
|
1390
|
+
tag: "svg",
|
|
1391
|
+
attr: {
|
|
1392
|
+
role: "img",
|
|
1393
|
+
viewBox: "0 0 24 24"
|
|
1394
|
+
},
|
|
1395
|
+
child: [
|
|
1396
|
+
{
|
|
1397
|
+
tag: "path",
|
|
1398
|
+
attr: {
|
|
1399
|
+
stroke: "currentColor",
|
|
1400
|
+
strokeWidth: "1.5",
|
|
1401
|
+
d: "M 6.9590764,5.7378392 H 8.375 V 19.078125 H 6.9590764 Z m 6.1482616,13.3327078 -4.7292032,10e-7 -0.011048,-1.333333 h 4.7402522 c 1.472733,0 2.666667,-1.193907 2.666667,-2.666667 0,-1.472733 -1.193934,-2.666667 -2.666667,-2.666667 H 9.1073387 v -1.333333 h 3.9999993 c 2.209133,-1e-6 4,1.790867 4,4 -10e-7,2.20914 -1.790867,3.999999 -4,3.999999 z m -2.148261,-6.666042 -4.0000007,10e-7 v -1.333333 h 4.0000007 c 1.472733,-10e-7 2.666667,-1.1939074 2.666667,-2.6666667 0,-1.4727336 -1.193934,-2.666667 -2.666667,-2.6666669 l -4.0000007,-3e-7 v -1.333333 h 4.0000007 c 2.209133,-7e-7 4,1.7908664 4,3.9999999 -1e-6,2.20914 -1.790867,3.999999 -4,3.999999 z"
|
|
1402
|
+
},
|
|
1403
|
+
child: []
|
|
1404
|
+
}
|
|
1405
|
+
]
|
|
1406
|
+
});
|
|
1407
|
+
var layoutListNumberedIcon = GenIcon({
|
|
1408
|
+
tag: "svg",
|
|
1409
|
+
attr: {
|
|
1410
|
+
role: "img",
|
|
1411
|
+
viewBox: "0 0 24 24"
|
|
1412
|
+
},
|
|
1413
|
+
child: [
|
|
1414
|
+
{
|
|
1415
|
+
tag: "path",
|
|
1416
|
+
attr: {
|
|
1417
|
+
fill: "currentColor",
|
|
1418
|
+
d: "M11 15v2h6v-2h-6ZM17 13v-2h-6v2h6ZM17 7v2h-6V7h6ZM6.733 11.252V6.304l-1.027.241V5.67L7.215 5h.706v6.252H6.733ZM5 19v-.83c.381-.316.75-.629 1.107-.938.364-.31.685-.617.965-.92.286-.304.512-.599.679-.885.173-.291.259-.574.259-.848 0-.256-.072-.482-.214-.679-.137-.196-.367-.295-.688-.295-.328 0-.575.108-.741.322-.167.214-.25.473-.25.777H5.008c.012-.459.113-.84.304-1.143.19-.31.443-.54.759-.688.315-.155.67-.232 1.063-.232.637 0 1.131.175 1.482.527.358.345.536.795.536 1.348 0 .346-.08.682-.241 1.01-.155.327-.36.643-.616.946-.256.304-.533.59-.83.858-.299.262-.587.506-.867.732h2.706V19H5Z"
|
|
1419
|
+
},
|
|
1420
|
+
child: []
|
|
1421
|
+
}
|
|
1422
|
+
]
|
|
1423
|
+
});
|
|
1424
|
+
var formatCode = GenIcon({
|
|
1425
|
+
tag: "svg",
|
|
1426
|
+
attr: {
|
|
1427
|
+
role: "img",
|
|
1428
|
+
viewBox: "0 0 24 24"
|
|
1429
|
+
},
|
|
1430
|
+
child: [
|
|
1431
|
+
{
|
|
1432
|
+
tag: "path",
|
|
1433
|
+
attr: {
|
|
1434
|
+
fill: "currentColor",
|
|
1435
|
+
d: "m9.953 16.912-1.36 1.449-6.562-6.16L8.19 5.64l1.458 1.369-4.79 5.104 5.094 4.781v.02ZM14.047 16.912l1.36 1.449 6.562-6.16L15.81 5.64l-1.458 1.369 4.79 5.104-5.094 4.781v.02Z"
|
|
1436
|
+
},
|
|
1437
|
+
child: []
|
|
1438
|
+
}
|
|
1439
|
+
]
|
|
1440
|
+
});
|
|
1441
|
+
var formatStrike = GenIcon({
|
|
1442
|
+
tag: "svg",
|
|
1443
|
+
attr: {
|
|
1444
|
+
role: "img",
|
|
1445
|
+
viewBox: "0 0 24 24"
|
|
1446
|
+
},
|
|
1447
|
+
child: [
|
|
1448
|
+
{
|
|
1449
|
+
tag: "path",
|
|
1450
|
+
attr: {
|
|
1451
|
+
fill: "currentColor",
|
|
1452
|
+
fillRule: "evenodd",
|
|
1453
|
+
clipRule: "evenodd",
|
|
1454
|
+
d: "M12.171 18.878c-.975 0-1.836-.165-2.584-.494-.747-.342-1.336-.823-1.767-1.444-.43-.633-.652-1.4-.665-2.299H9.72c.025.62.247 1.146.665 1.577.43.418 1.02.627 1.767.627.646 0 1.16-.152 1.54-.456.38-.317.57-.735.57-1.254 0-.545-.172-.969-.514-1.273a2.857 2.857 0 0 0-.41-.313h3.273c.156.403.234.874.234 1.415a3.72 3.72 0 0 1-.532 1.938c-.354.595-.88 1.077-1.577 1.444-.697.355-1.552.532-2.565.532ZM7.523 9.55a4.207 4.207 0 0 1-.045-.627c-.013-.785.171-1.457.551-2.014a3.789 3.789 0 0 1 1.596-1.31c.671-.318 1.444-.476 2.318-.476.887 0 1.666.158 2.337.475.684.317 1.216.76 1.596 1.33.393.57.602 1.248.627 2.033H13.9c-.013-.469-.196-.88-.55-1.235-.343-.367-.824-.55-1.445-.55-.532-.014-.981.12-1.349.398-.354.266-.532.659-.532 1.178 0 .31.068.575.203.798H7.523Zm11.71 1h-15v2h15v-2Z"
|
|
1455
|
+
},
|
|
1456
|
+
child: []
|
|
1457
|
+
}
|
|
1458
|
+
]
|
|
1459
|
+
});
|
|
1460
|
+
var formatSuperscript = GenIcon({
|
|
1461
|
+
tag: "svg",
|
|
1462
|
+
attr: {
|
|
1463
|
+
role: "img",
|
|
1464
|
+
viewBox: "0 0 24 24"
|
|
1465
|
+
},
|
|
1466
|
+
child: [
|
|
1467
|
+
{
|
|
1468
|
+
tag: "path",
|
|
1469
|
+
attr: {
|
|
1470
|
+
fill: "currentColor",
|
|
1471
|
+
fillRule: "evenodd",
|
|
1472
|
+
clipRule: "evenodd",
|
|
1473
|
+
d: "M16.192 8.058v.777h4.028v-.878h-2.532c.262-.211.532-.44.81-.685.28-.25.538-.518.778-.802.24-.285.432-.58.576-.886a2.12 2.12 0 0 0 .226-.945c0-.518-.167-.939-.501-1.262-.33-.329-.792-.493-1.388-.493-.368 0-.7.072-.994.217-.296.14-.533.354-.71.644-.18.284-.274.64-.285 1.07h1.036c0-.285.078-.527.234-.728.156-.2.388-.3.694-.3.301 0 .515.091.644.275.133.184.2.396.2.636 0 .256-.08.52-.242.794a4.639 4.639 0 0 1-.635.827c-.262.284-.563.571-.903.861-.334.29-.68.582-1.037.878Zm-8.194 3.716L3.838 18.5h2.735l2.736-4.693L12.33 18.5h2.793l-4.256-6.612L15.028 5.2h-2.736L9.556 9.836 6.573 5.2H3.78l4.218 6.574Z"
|
|
1474
|
+
},
|
|
1475
|
+
child: []
|
|
1476
|
+
}
|
|
1477
|
+
]
|
|
1478
|
+
});
|
|
1479
|
+
var formatSubscript = GenIcon({
|
|
1480
|
+
tag: "svg",
|
|
1481
|
+
attr: {
|
|
1482
|
+
role: "img",
|
|
1483
|
+
viewBox: "0 0 24 24"
|
|
1484
|
+
},
|
|
1485
|
+
child: [
|
|
1486
|
+
{
|
|
1487
|
+
tag: "path",
|
|
1488
|
+
attr: {
|
|
1489
|
+
fill: "currentColor",
|
|
1490
|
+
fillRule: "evenodd",
|
|
1491
|
+
clipRule: "evenodd",
|
|
1492
|
+
d: "M7.998 11.774 3.838 18.5h2.735l2.736-4.693L12.33 18.5h2.793l-4.256-6.612L15.028 5.2h-2.736L9.556 9.836 6.573 5.2H3.78l4.218 6.574Zm8.194 8.157v.777h4.028v-.877h-2.532c.262-.212.532-.44.81-.686.28-.25.538-.518.778-.802.24-.284.432-.58.576-.886a2.12 2.12 0 0 0 .226-.944c0-.519-.167-.94-.501-1.263-.33-.328-.792-.493-1.388-.493-.368 0-.7.073-.994.218-.296.139-.533.354-.71.643-.18.284-.274.641-.285 1.07h1.036c0-.284.078-.526.234-.727.156-.2.388-.301.694-.301.301 0 .515.092.644.276.133.184.2.395.2.635 0 .256-.08.521-.242.794a4.638 4.638 0 0 1-.635.828 10.4 10.4 0 0 1-.903.86c-.334.29-.68.583-1.037.878Z"
|
|
1493
|
+
},
|
|
1494
|
+
child: []
|
|
1495
|
+
}
|
|
1496
|
+
]
|
|
1497
|
+
});
|
|
1389
1498
|
var customIcons = {
|
|
1390
1499
|
"rectangle-rounded": rectangleRoundedIcon,
|
|
1391
1500
|
card: cardIcon,
|
|
@@ -1398,7 +1507,13 @@ var customIcons = {
|
|
|
1398
1507
|
warning: warningIcon,
|
|
1399
1508
|
"info-filled": infoFilledIcon,
|
|
1400
1509
|
settings,
|
|
1401
|
-
"query-string": queryStringIcon
|
|
1510
|
+
"query-string": queryStringIcon,
|
|
1511
|
+
"format-bold": formatBoldIcon,
|
|
1512
|
+
"format-code": formatCode,
|
|
1513
|
+
"format-strike": formatStrike,
|
|
1514
|
+
"format-superscript": formatSuperscript,
|
|
1515
|
+
"format-subscript": formatSubscript,
|
|
1516
|
+
"layout-list-numbered": layoutListNumberedIcon
|
|
1402
1517
|
};
|
|
1403
1518
|
|
|
1404
1519
|
// src/components/AddListButton/AddListButton.styles.ts
|
|
@@ -15300,142 +15415,272 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
15300
15415
|
};
|
|
15301
15416
|
|
|
15302
15417
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
15303
|
-
import {
|
|
15304
|
-
import {
|
|
15305
|
-
|
|
15306
|
-
|
|
15307
|
-
|
|
15308
|
-
|
|
15309
|
-
|
|
15310
|
-
|
|
15311
|
-
|
|
15312
|
-
|
|
15313
|
-
|
|
15314
|
-
|
|
15315
|
-
|
|
15316
|
-
|
|
15317
|
-
|
|
15318
|
-
|
|
15319
|
-
|
|
15320
|
-
|
|
15321
|
-
|
|
15322
|
-
|
|
15323
|
-
|
|
15324
|
-
|
|
15325
|
-
|
|
15326
|
-
|
|
15327
|
-
|
|
15328
|
-
|
|
15329
|
-
|
|
15330
|
-
|
|
15331
|
-
|
|
15332
|
-
|
|
15333
|
-
|
|
15334
|
-
|
|
15335
|
-
|
|
15418
|
+
import { css as css73 } from "@emotion/react";
|
|
15419
|
+
import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
|
|
15420
|
+
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
|
15421
|
+
import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
|
|
15422
|
+
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
|
15423
|
+
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
|
|
15424
|
+
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
|
|
15425
|
+
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
|
|
15426
|
+
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
|
15427
|
+
import { HeadingNode } from "@lexical/rich-text";
|
|
15428
|
+
import { deepEqual as deepEqual2 } from "fast-equals";
|
|
15429
|
+
import { ParagraphNode } from "lexical";
|
|
15430
|
+
import { useEffect as useEffect13, useRef as useRef6 } from "react";
|
|
15431
|
+
|
|
15432
|
+
// src/components/ParameterInputs/rich-text/builtInElements.ts
|
|
15433
|
+
var richTextBuiltInElements = [
|
|
15434
|
+
{
|
|
15435
|
+
label: "Heading 1",
|
|
15436
|
+
type: "h1"
|
|
15437
|
+
},
|
|
15438
|
+
{
|
|
15439
|
+
label: "Heading 2",
|
|
15440
|
+
type: "h2"
|
|
15441
|
+
},
|
|
15442
|
+
{
|
|
15443
|
+
label: "Heading 3",
|
|
15444
|
+
type: "h3"
|
|
15445
|
+
},
|
|
15446
|
+
{
|
|
15447
|
+
label: "Heading 4",
|
|
15448
|
+
type: "h4"
|
|
15449
|
+
},
|
|
15450
|
+
{
|
|
15451
|
+
label: "Heading 5",
|
|
15452
|
+
type: "h5"
|
|
15453
|
+
},
|
|
15454
|
+
{
|
|
15455
|
+
label: "Heading 6",
|
|
15456
|
+
type: "h6"
|
|
15457
|
+
},
|
|
15458
|
+
{
|
|
15459
|
+
label: "Bullet List",
|
|
15460
|
+
type: "unorderedList"
|
|
15461
|
+
},
|
|
15462
|
+
{
|
|
15463
|
+
label: "Numbered List",
|
|
15464
|
+
type: "orderedList"
|
|
15465
|
+
},
|
|
15466
|
+
{
|
|
15467
|
+
label: "Link",
|
|
15468
|
+
type: "link"
|
|
15336
15469
|
}
|
|
15337
|
-
|
|
15338
|
-
var ParameterRichTextInner = forwardRef13(({ ...props }, ref) => {
|
|
15339
|
-
const { id, label, hiddenLabel } = useParameterShell();
|
|
15340
|
-
return /* @__PURE__ */ jsx88(
|
|
15341
|
-
"textarea",
|
|
15342
|
-
{
|
|
15343
|
-
css: [input2, textarea2],
|
|
15344
|
-
id,
|
|
15345
|
-
ref,
|
|
15346
|
-
"aria-label": hiddenLabel ? label : void 0,
|
|
15347
|
-
...props
|
|
15348
|
-
}
|
|
15349
|
-
);
|
|
15350
|
-
});
|
|
15470
|
+
];
|
|
15351
15471
|
|
|
15352
|
-
// src/components/ParameterInputs/
|
|
15353
|
-
|
|
15354
|
-
|
|
15355
|
-
|
|
15356
|
-
|
|
15357
|
-
|
|
15358
|
-
|
|
15359
|
-
|
|
15360
|
-
|
|
15361
|
-
|
|
15362
|
-
|
|
15363
|
-
|
|
15364
|
-
|
|
15365
|
-
|
|
15366
|
-
|
|
15367
|
-
|
|
15368
|
-
|
|
15369
|
-
|
|
15370
|
-
|
|
15371
|
-
|
|
15372
|
-
|
|
15373
|
-
|
|
15374
|
-
|
|
15375
|
-
|
|
15376
|
-
|
|
15377
|
-
|
|
15378
|
-
|
|
15379
|
-
|
|
15380
|
-
|
|
15472
|
+
// src/components/ParameterInputs/rich-text/builtInFormats.ts
|
|
15473
|
+
var richTextBuiltInFormats = [
|
|
15474
|
+
{
|
|
15475
|
+
label: "Bold",
|
|
15476
|
+
type: "bold"
|
|
15477
|
+
},
|
|
15478
|
+
{
|
|
15479
|
+
label: "Italic",
|
|
15480
|
+
type: "italic"
|
|
15481
|
+
},
|
|
15482
|
+
{
|
|
15483
|
+
label: "Underline",
|
|
15484
|
+
type: "underline"
|
|
15485
|
+
},
|
|
15486
|
+
{
|
|
15487
|
+
label: "Strikethrough",
|
|
15488
|
+
type: "strikethrough"
|
|
15489
|
+
},
|
|
15490
|
+
{
|
|
15491
|
+
label: "Code",
|
|
15492
|
+
type: "code"
|
|
15493
|
+
},
|
|
15494
|
+
{
|
|
15495
|
+
label: "Superscript",
|
|
15496
|
+
type: "superscript"
|
|
15497
|
+
},
|
|
15498
|
+
{
|
|
15499
|
+
label: "Subscript",
|
|
15500
|
+
type: "subscript"
|
|
15381
15501
|
}
|
|
15382
|
-
|
|
15502
|
+
];
|
|
15383
15503
|
|
|
15384
|
-
// src/components/ParameterInputs/
|
|
15385
|
-
import {
|
|
15386
|
-
|
|
15387
|
-
|
|
15388
|
-
|
|
15389
|
-
|
|
15390
|
-
|
|
15391
|
-
|
|
15392
|
-
|
|
15393
|
-
|
|
15394
|
-
|
|
15395
|
-
|
|
15396
|
-
|
|
15397
|
-
|
|
15398
|
-
|
|
15399
|
-
|
|
15400
|
-
|
|
15401
|
-
|
|
15402
|
-
);
|
|
15403
|
-
|
|
15504
|
+
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
15505
|
+
import { css as css69 } from "@emotion/css";
|
|
15506
|
+
var textBold = css69`
|
|
15507
|
+
font-weight: 700;
|
|
15508
|
+
`;
|
|
15509
|
+
var textItalic = css69`
|
|
15510
|
+
font-style: italic;
|
|
15511
|
+
`;
|
|
15512
|
+
var textUnderline = css69`
|
|
15513
|
+
text-decoration: underline;
|
|
15514
|
+
`;
|
|
15515
|
+
var textStrikethrough = css69`
|
|
15516
|
+
text-decoration: line-through;
|
|
15517
|
+
`;
|
|
15518
|
+
var textUnderlineStrikethrough = css69`
|
|
15519
|
+
text-decoration: underline line-through;
|
|
15520
|
+
`;
|
|
15521
|
+
var textCode = css69`
|
|
15522
|
+
background-color: var(--gray-100);
|
|
15523
|
+
border-radius: var(--rounded-sm);
|
|
15524
|
+
display: inline-block;
|
|
15525
|
+
font-family: var(--ff-mono);
|
|
15526
|
+
font-size: 94%;
|
|
15527
|
+
padding-left: var(--spacing-xs);
|
|
15528
|
+
padding-right: var(--spacing-xs);
|
|
15529
|
+
`;
|
|
15530
|
+
var textSuperscript = css69`
|
|
15531
|
+
vertical-align: super;
|
|
15532
|
+
font-size: smaller;
|
|
15533
|
+
`;
|
|
15534
|
+
var textSubscript = css69`
|
|
15535
|
+
vertical-align: sub;
|
|
15536
|
+
font-size: smaller;
|
|
15537
|
+
`;
|
|
15538
|
+
var linkElement = css69`
|
|
15539
|
+
${link}
|
|
15540
|
+
${linkColorDefault}
|
|
15541
|
+
text-decoration: underline;
|
|
15542
|
+
`;
|
|
15543
|
+
var h12 = css69`
|
|
15544
|
+
font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
|
|
15545
|
+
`;
|
|
15546
|
+
var h22 = css69`
|
|
15547
|
+
font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
|
|
15548
|
+
`;
|
|
15549
|
+
var h32 = css69`
|
|
15550
|
+
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
15551
|
+
`;
|
|
15552
|
+
var h42 = css69`
|
|
15553
|
+
font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
|
|
15554
|
+
`;
|
|
15555
|
+
var h52 = css69`
|
|
15556
|
+
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
15557
|
+
`;
|
|
15558
|
+
var h62 = css69`
|
|
15559
|
+
font-size: var(--fs-base);
|
|
15560
|
+
`;
|
|
15561
|
+
var heading1Element = css69`
|
|
15562
|
+
${h12}
|
|
15563
|
+
${commonHeadingAttr(true)}
|
|
15564
|
+
${commonLineHeight}
|
|
15565
|
+
`;
|
|
15566
|
+
var heading2Element = css69`
|
|
15567
|
+
${h22}
|
|
15568
|
+
${commonHeadingAttr(true)}
|
|
15569
|
+
${commonLineHeight}
|
|
15570
|
+
`;
|
|
15571
|
+
var heading3Element = css69`
|
|
15572
|
+
${h32}
|
|
15573
|
+
${commonHeadingAttr(true)}
|
|
15574
|
+
${commonLineHeight}
|
|
15575
|
+
`;
|
|
15576
|
+
var heading4Element = css69`
|
|
15577
|
+
${h42}
|
|
15578
|
+
${commonHeadingAttr(true)}
|
|
15579
|
+
${commonLineHeight}
|
|
15580
|
+
`;
|
|
15581
|
+
var heading5Element = css69`
|
|
15582
|
+
${h52}
|
|
15583
|
+
${commonHeadingAttr(true)}
|
|
15584
|
+
${commonLineHeight}
|
|
15585
|
+
`;
|
|
15586
|
+
var heading6Element = css69`
|
|
15587
|
+
${h62}
|
|
15588
|
+
${commonHeadingAttr(true)}
|
|
15589
|
+
${commonLineHeight}
|
|
15590
|
+
`;
|
|
15591
|
+
var paragraphElement = css69`
|
|
15592
|
+
line-height: 1.5;
|
|
15593
|
+
margin-bottom: var(--spacing-base);
|
|
15404
15594
|
|
|
15405
|
-
|
|
15406
|
-
|
|
15407
|
-
import { jsx as jsx91, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
|
|
15408
|
-
var ParameterToggle = forwardRef16((props, ref) => {
|
|
15409
|
-
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15410
|
-
return /* @__PURE__ */ jsx91(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx91(ParameterToggleInner, { ref, ...innerProps }) });
|
|
15411
|
-
});
|
|
15412
|
-
var ParameterToggleInner = forwardRef16(
|
|
15413
|
-
({ ...props }, ref) => {
|
|
15414
|
-
const { id, label } = useParameterShell();
|
|
15415
|
-
return /* @__PURE__ */ jsxs61("label", { css: inputToggleLabel2, children: [
|
|
15416
|
-
/* @__PURE__ */ jsx91("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
15417
|
-
/* @__PURE__ */ jsx91("span", { css: inlineLabel2, children: label })
|
|
15418
|
-
] });
|
|
15595
|
+
&:last-child {
|
|
15596
|
+
margin-bottom: 0;
|
|
15419
15597
|
}
|
|
15420
|
-
|
|
15598
|
+
`;
|
|
15599
|
+
var orderedListElement = css69`
|
|
15600
|
+
${commonLineHeight}
|
|
15601
|
+
display: block;
|
|
15602
|
+
list-style: decimal;
|
|
15603
|
+
list-style-position: outside;
|
|
15604
|
+
margin-bottom: var(--spacing-base);
|
|
15605
|
+
margin-top: 0;
|
|
15606
|
+
padding: 0;
|
|
15421
15607
|
|
|
15422
|
-
|
|
15423
|
-
|
|
15424
|
-
|
|
15425
|
-
PopoverDisclosure,
|
|
15426
|
-
usePopoverState
|
|
15427
|
-
} from "reakit/Popover";
|
|
15428
|
-
import { Portal as Portal2 } from "reakit/Portal";
|
|
15608
|
+
&:last-child {
|
|
15609
|
+
margin-bottom: 0;
|
|
15610
|
+
}
|
|
15429
15611
|
|
|
15430
|
-
|
|
15431
|
-
|
|
15432
|
-
|
|
15433
|
-
|
|
15434
|
-
|
|
15435
|
-
|
|
15612
|
+
ol {
|
|
15613
|
+
list-style-type: upper-alpha;
|
|
15614
|
+
|
|
15615
|
+
ol {
|
|
15616
|
+
list-style-type: lower-alpha;
|
|
15617
|
+
|
|
15618
|
+
ol {
|
|
15619
|
+
list-style-type: upper-roman;
|
|
15620
|
+
|
|
15621
|
+
ol {
|
|
15622
|
+
list-style-type: lower-roman;
|
|
15623
|
+
}
|
|
15624
|
+
}
|
|
15625
|
+
}
|
|
15626
|
+
}
|
|
15436
15627
|
`;
|
|
15437
|
-
var
|
|
15438
|
-
|
|
15628
|
+
var unorderedListElement = css69`
|
|
15629
|
+
${commonLineHeight}
|
|
15630
|
+
display: block;
|
|
15631
|
+
list-style: disc;
|
|
15632
|
+
list-style-position: outside;
|
|
15633
|
+
margin-bottom: var(--spacing-base);
|
|
15634
|
+
margin-top: 0;
|
|
15635
|
+
padding: 0;
|
|
15636
|
+
|
|
15637
|
+
&:last-child {
|
|
15638
|
+
margin-bottom: 0;
|
|
15639
|
+
}
|
|
15640
|
+
|
|
15641
|
+
ul {
|
|
15642
|
+
list-style-type: circle;
|
|
15643
|
+
|
|
15644
|
+
ul {
|
|
15645
|
+
list-style-type: square;
|
|
15646
|
+
}
|
|
15647
|
+
}
|
|
15648
|
+
`;
|
|
15649
|
+
var listItemElement = css69`
|
|
15650
|
+
margin-left: var(--spacing-md);
|
|
15651
|
+
`;
|
|
15652
|
+
var nestedListItemElement = css69`
|
|
15653
|
+
list-style-type: none;
|
|
15654
|
+
`;
|
|
15655
|
+
|
|
15656
|
+
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
15657
|
+
import { css as css71 } from "@emotion/react";
|
|
15658
|
+
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
|
15659
|
+
import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
|
|
15660
|
+
import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister } from "@lexical/utils";
|
|
15661
|
+
import { deepEqual } from "fast-equals";
|
|
15662
|
+
import {
|
|
15663
|
+
$applyNodeReplacement,
|
|
15664
|
+
$getSelection,
|
|
15665
|
+
$isElementNode as $isElementNode2,
|
|
15666
|
+
$isRangeSelection,
|
|
15667
|
+
BLUR_COMMAND,
|
|
15668
|
+
COMMAND_PRIORITY_EDITOR,
|
|
15669
|
+
createCommand,
|
|
15670
|
+
ElementNode as ElementNode2,
|
|
15671
|
+
FOCUS_COMMAND
|
|
15672
|
+
} from "lexical";
|
|
15673
|
+
import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef5, useState as useState9 } from "react";
|
|
15674
|
+
|
|
15675
|
+
// src/components/Popover/Popover.styles.ts
|
|
15676
|
+
import { css as css70 } from "@emotion/react";
|
|
15677
|
+
var PopoverBtn = css70`
|
|
15678
|
+
border: none;
|
|
15679
|
+
background: none;
|
|
15680
|
+
padding: 0;
|
|
15681
|
+
`;
|
|
15682
|
+
var Popover = css70`
|
|
15683
|
+
border-left: var(--spacing-xs) solid var(--brand-secondary-3);
|
|
15439
15684
|
border-radius: var(--rounded-base);
|
|
15440
15685
|
box-shadow: var(--shadow-base);
|
|
15441
15686
|
background: var(--white);
|
|
@@ -15446,8 +15691,1156 @@ var Popover = css69`
|
|
|
15446
15691
|
max-width: 220px;
|
|
15447
15692
|
`;
|
|
15448
15693
|
|
|
15694
|
+
// src/components/ParameterInputs/rich-text/utils.ts
|
|
15695
|
+
import { $isAtNodeEnd } from "@lexical/selection";
|
|
15696
|
+
import {
|
|
15697
|
+
$isElementNode
|
|
15698
|
+
} from "lexical";
|
|
15699
|
+
var getElementNodesInSelection = (selection) => {
|
|
15700
|
+
const nodesInSelection = selection.getNodes();
|
|
15701
|
+
if (nodesInSelection.length === 0) {
|
|
15702
|
+
return /* @__PURE__ */ new Set([
|
|
15703
|
+
selection.anchor.getNode().getParentOrThrow(),
|
|
15704
|
+
selection.focus.getNode().getParentOrThrow()
|
|
15705
|
+
]);
|
|
15706
|
+
}
|
|
15707
|
+
return new Set(nodesInSelection.map((node) => $isElementNode(node) ? node : node.getParentOrThrow()));
|
|
15708
|
+
};
|
|
15709
|
+
var getAncestor = (node, predicate) => {
|
|
15710
|
+
let parent = node;
|
|
15711
|
+
while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent))
|
|
15712
|
+
;
|
|
15713
|
+
return parent;
|
|
15714
|
+
};
|
|
15715
|
+
var getSelectedNode = (selection) => {
|
|
15716
|
+
const anchor = selection.anchor;
|
|
15717
|
+
const focus = selection.focus;
|
|
15718
|
+
const anchorNode = selection.anchor.getNode();
|
|
15719
|
+
const focusNode = selection.focus.getNode();
|
|
15720
|
+
if (anchorNode === focusNode) {
|
|
15721
|
+
return anchorNode;
|
|
15722
|
+
}
|
|
15723
|
+
const isBackward = selection.isBackward();
|
|
15724
|
+
if (isBackward) {
|
|
15725
|
+
return $isAtNodeEnd(focus) ? anchorNode : focusNode;
|
|
15726
|
+
} else {
|
|
15727
|
+
return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
|
|
15728
|
+
}
|
|
15729
|
+
};
|
|
15730
|
+
var richTextIsValueConsideredEmpty = (value) => {
|
|
15731
|
+
if (!value) {
|
|
15732
|
+
return true;
|
|
15733
|
+
}
|
|
15734
|
+
if (value.root.children.length === 0) {
|
|
15735
|
+
return true;
|
|
15736
|
+
}
|
|
15737
|
+
if (value.root.children.length > 1) {
|
|
15738
|
+
return false;
|
|
15739
|
+
}
|
|
15740
|
+
const child = value.root.children[0];
|
|
15741
|
+
if (child.type !== "paragraph") {
|
|
15742
|
+
return false;
|
|
15743
|
+
}
|
|
15744
|
+
return child.children.length === 0;
|
|
15745
|
+
};
|
|
15746
|
+
|
|
15747
|
+
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
15748
|
+
import { Fragment as Fragment13, jsx as jsx88, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
|
|
15749
|
+
var isProjectMapLinkValue = (value) => {
|
|
15750
|
+
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
15751
|
+
value.nodeId && value.path && value.projectMapId
|
|
15752
|
+
);
|
|
15753
|
+
};
|
|
15754
|
+
var isNonProjectMapLinkValue = (value) => {
|
|
15755
|
+
return typeof (value == null ? void 0 : value.type) === "string" && ["url", "tel", "email"].includes(value.type) && Boolean(value.path);
|
|
15756
|
+
};
|
|
15757
|
+
var guessLinkTypeFromPath = (path) => {
|
|
15758
|
+
if (path.startsWith("http://") || path.startsWith("https://")) {
|
|
15759
|
+
return "url";
|
|
15760
|
+
}
|
|
15761
|
+
if (path.startsWith("mailto:") || path.includes("@")) {
|
|
15762
|
+
return "email";
|
|
15763
|
+
}
|
|
15764
|
+
if (path.startsWith("tel:") || path.startsWith("+")) {
|
|
15765
|
+
return "tel";
|
|
15766
|
+
}
|
|
15767
|
+
return "url";
|
|
15768
|
+
};
|
|
15769
|
+
function convertAnchorElement(domNode) {
|
|
15770
|
+
let node = null;
|
|
15771
|
+
if (!isHTMLAnchorElement(domNode)) {
|
|
15772
|
+
return { node };
|
|
15773
|
+
}
|
|
15774
|
+
const textContent = domNode.textContent;
|
|
15775
|
+
if (textContent === null || textContent === "") {
|
|
15776
|
+
return { node };
|
|
15777
|
+
}
|
|
15778
|
+
let linkFromAttribute = domNode.getAttribute("data-link");
|
|
15779
|
+
if (linkFromAttribute) {
|
|
15780
|
+
try {
|
|
15781
|
+
linkFromAttribute = JSON.parse(linkFromAttribute);
|
|
15782
|
+
} catch (e) {
|
|
15783
|
+
}
|
|
15784
|
+
}
|
|
15785
|
+
let path = domNode.getAttribute("href");
|
|
15786
|
+
let projectMapId = void 0;
|
|
15787
|
+
let nodeId = void 0;
|
|
15788
|
+
let type = void 0;
|
|
15789
|
+
let dynamicInputValues = void 0;
|
|
15790
|
+
if (linkFromAttribute && typeof linkFromAttribute === "object") {
|
|
15791
|
+
if ("path" in linkFromAttribute && typeof linkFromAttribute.path === "string") {
|
|
15792
|
+
path = linkFromAttribute.path;
|
|
15793
|
+
}
|
|
15794
|
+
if ("type" in linkFromAttribute && typeof linkFromAttribute.type === "string") {
|
|
15795
|
+
type = linkFromAttribute.type;
|
|
15796
|
+
}
|
|
15797
|
+
if ("projectMapId" in linkFromAttribute && typeof linkFromAttribute.projectMapId === "string") {
|
|
15798
|
+
projectMapId = linkFromAttribute.projectMapId;
|
|
15799
|
+
}
|
|
15800
|
+
if ("nodeId" in linkFromAttribute && typeof linkFromAttribute.nodeId === "string") {
|
|
15801
|
+
nodeId = linkFromAttribute.nodeId;
|
|
15802
|
+
}
|
|
15803
|
+
if ("dynamicInputValues" in linkFromAttribute && typeof linkFromAttribute.dynamicInputValues === "string") {
|
|
15804
|
+
try {
|
|
15805
|
+
dynamicInputValues = JSON.parse(linkFromAttribute.dynamicInputValues);
|
|
15806
|
+
} catch (e) {
|
|
15807
|
+
}
|
|
15808
|
+
}
|
|
15809
|
+
}
|
|
15810
|
+
if (!path) {
|
|
15811
|
+
return { node: null };
|
|
15812
|
+
}
|
|
15813
|
+
if (!type) {
|
|
15814
|
+
type = guessLinkTypeFromPath(path);
|
|
15815
|
+
}
|
|
15816
|
+
if (type === "email" && path.startsWith("mailto:")) {
|
|
15817
|
+
path = path.replace("mailto:", "");
|
|
15818
|
+
} else if (type === "tel" && path.startsWith("tel:")) {
|
|
15819
|
+
path = path.replace("tel:", "");
|
|
15820
|
+
}
|
|
15821
|
+
const value = {
|
|
15822
|
+
type,
|
|
15823
|
+
path,
|
|
15824
|
+
projectMapId,
|
|
15825
|
+
nodeId,
|
|
15826
|
+
dynamicInputValues
|
|
15827
|
+
};
|
|
15828
|
+
if (isProjectMapLinkValue(value)) {
|
|
15829
|
+
node = $createLinkNode(value);
|
|
15830
|
+
} else if (isNonProjectMapLinkValue(value)) {
|
|
15831
|
+
node = $createLinkNode(value);
|
|
15832
|
+
}
|
|
15833
|
+
return { node };
|
|
15834
|
+
}
|
|
15835
|
+
var LinkNode = class extends ElementNode2 {
|
|
15836
|
+
constructor(props, key) {
|
|
15837
|
+
super(key);
|
|
15838
|
+
this.__link = props;
|
|
15839
|
+
}
|
|
15840
|
+
static getType() {
|
|
15841
|
+
return "link";
|
|
15842
|
+
}
|
|
15843
|
+
getLink() {
|
|
15844
|
+
return this.getLatest().__link;
|
|
15845
|
+
}
|
|
15846
|
+
setLink(link2) {
|
|
15847
|
+
const writable = this.getWritable();
|
|
15848
|
+
writable.__link = link2;
|
|
15849
|
+
}
|
|
15850
|
+
static clone(node) {
|
|
15851
|
+
return new LinkNode(node.__link, node.__key);
|
|
15852
|
+
}
|
|
15853
|
+
static importJSON(serializedNode) {
|
|
15854
|
+
const node = $createLinkNode(serializedNode.link);
|
|
15855
|
+
node.setFormat(serializedNode.format);
|
|
15856
|
+
node.setIndent(serializedNode.indent);
|
|
15857
|
+
node.setDirection(serializedNode.direction);
|
|
15858
|
+
return node;
|
|
15859
|
+
}
|
|
15860
|
+
exportJSON() {
|
|
15861
|
+
return {
|
|
15862
|
+
...super.exportJSON(),
|
|
15863
|
+
link: this.getLink(),
|
|
15864
|
+
type: this.getType(),
|
|
15865
|
+
version: 1
|
|
15866
|
+
};
|
|
15867
|
+
}
|
|
15868
|
+
createDOM(config) {
|
|
15869
|
+
const element = document.createElement("a");
|
|
15870
|
+
element.setAttribute("data-link", JSON.stringify(this.__link));
|
|
15871
|
+
if (isNonProjectMapLinkValue(this.__link)) {
|
|
15872
|
+
if (this.__link.type === "url") {
|
|
15873
|
+
element.setAttribute("href", this.__link.path);
|
|
15874
|
+
} else if (this.__link.type === "tel") {
|
|
15875
|
+
element.setAttribute("href", `tel:${this.__link.path}`);
|
|
15876
|
+
} else if (this.__link.type === "email") {
|
|
15877
|
+
element.setAttribute("href", `mailto:${this.__link.path}`);
|
|
15878
|
+
}
|
|
15879
|
+
}
|
|
15880
|
+
addClassNamesToElement(element, config.theme.link);
|
|
15881
|
+
return element;
|
|
15882
|
+
}
|
|
15883
|
+
updateDOM(prevNode, a) {
|
|
15884
|
+
if (!deepEqual(prevNode.__link, this.__link)) {
|
|
15885
|
+
a.setAttribute("data-link", JSON.stringify(this.__link));
|
|
15886
|
+
if (isNonProjectMapLinkValue(this.__link)) {
|
|
15887
|
+
if (this.__link.type === "url") {
|
|
15888
|
+
a.setAttribute("href", this.__link.path);
|
|
15889
|
+
} else if (this.__link.type === "tel") {
|
|
15890
|
+
a.setAttribute("href", `tel:${this.__link.path}`);
|
|
15891
|
+
} else if (this.__link.type === "email") {
|
|
15892
|
+
a.setAttribute("href", `mailto:${this.__link.path}`);
|
|
15893
|
+
}
|
|
15894
|
+
}
|
|
15895
|
+
}
|
|
15896
|
+
return false;
|
|
15897
|
+
}
|
|
15898
|
+
static importDOM() {
|
|
15899
|
+
return {
|
|
15900
|
+
a: () => ({
|
|
15901
|
+
conversion: convertAnchorElement,
|
|
15902
|
+
priority: 1
|
|
15903
|
+
})
|
|
15904
|
+
};
|
|
15905
|
+
}
|
|
15906
|
+
insertNewAfter(selection, restoreSelection = true) {
|
|
15907
|
+
const element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection);
|
|
15908
|
+
if ($isElementNode2(element)) {
|
|
15909
|
+
const linkNode = $createLinkNode(
|
|
15910
|
+
"nodeId" in this.__link ? {
|
|
15911
|
+
nodeId: this.__link.nodeId,
|
|
15912
|
+
projectMapId: this.__link.projectMapId,
|
|
15913
|
+
path: this.__link.path,
|
|
15914
|
+
type: this.__link.type
|
|
15915
|
+
} : {
|
|
15916
|
+
path: this.__link.path,
|
|
15917
|
+
type: this.__link.type
|
|
15918
|
+
}
|
|
15919
|
+
);
|
|
15920
|
+
element.append(linkNode);
|
|
15921
|
+
return linkNode;
|
|
15922
|
+
}
|
|
15923
|
+
return null;
|
|
15924
|
+
}
|
|
15925
|
+
canInsertTextBefore() {
|
|
15926
|
+
return false;
|
|
15927
|
+
}
|
|
15928
|
+
canInsertTextAfter() {
|
|
15929
|
+
return false;
|
|
15930
|
+
}
|
|
15931
|
+
canBeEmpty() {
|
|
15932
|
+
return false;
|
|
15933
|
+
}
|
|
15934
|
+
isInline() {
|
|
15935
|
+
return true;
|
|
15936
|
+
}
|
|
15937
|
+
};
|
|
15938
|
+
function $createLinkNode(props) {
|
|
15939
|
+
return $applyNodeReplacement(new LinkNode(props));
|
|
15940
|
+
}
|
|
15941
|
+
function $isLinkNode(node) {
|
|
15942
|
+
return node instanceof LinkNode;
|
|
15943
|
+
}
|
|
15944
|
+
function removeLinkNode(node) {
|
|
15945
|
+
const children = node.getChildren();
|
|
15946
|
+
for (const child of children) {
|
|
15947
|
+
node.insertBefore(child);
|
|
15948
|
+
}
|
|
15949
|
+
node.remove();
|
|
15950
|
+
}
|
|
15951
|
+
function upsertLinkNode(props) {
|
|
15952
|
+
var _a, _b, _c, _d, _e;
|
|
15953
|
+
const selection = $getSelection();
|
|
15954
|
+
if (!$isRangeSelection(selection)) {
|
|
15955
|
+
return;
|
|
15956
|
+
}
|
|
15957
|
+
const nodes = selection.extract();
|
|
15958
|
+
const touchedNodes = [];
|
|
15959
|
+
for (const node of nodes) {
|
|
15960
|
+
if ($isElementNode2(node) && !node.isInline()) {
|
|
15961
|
+
continue;
|
|
15962
|
+
}
|
|
15963
|
+
const linkNodeAncestor = getLinkAncestor(node);
|
|
15964
|
+
if (!linkNodeAncestor) {
|
|
15965
|
+
const newLinkNode = $createLinkNode(props);
|
|
15966
|
+
node.insertBefore(newLinkNode);
|
|
15967
|
+
newLinkNode.append(node);
|
|
15968
|
+
touchedNodes.push(...[newLinkNode, node]);
|
|
15969
|
+
continue;
|
|
15970
|
+
}
|
|
15971
|
+
if (touchedNodes.some((touchedNode) => touchedNode.is(linkNodeAncestor))) {
|
|
15972
|
+
continue;
|
|
15973
|
+
}
|
|
15974
|
+
linkNodeAncestor.setLink(props);
|
|
15975
|
+
touchedNodes.push(node);
|
|
15976
|
+
}
|
|
15977
|
+
const nodesAlreadyMerged = [];
|
|
15978
|
+
for (const node of touchedNodes) {
|
|
15979
|
+
if (nodesAlreadyMerged.some((mergedNode) => mergedNode.is(node))) {
|
|
15980
|
+
continue;
|
|
15981
|
+
}
|
|
15982
|
+
const candidatesForMerging = $isLinkNode(node) ? (_b = (_a = node.getParent()) == null ? void 0 : _a.getChildren()) != null ? _b : [] : (_e = (_d = (_c = getLinkAncestor(node)) == null ? void 0 : _c.getParent()) == null ? void 0 : _d.getChildren()) != null ? _e : [];
|
|
15983
|
+
for (const candidate of candidatesForMerging) {
|
|
15984
|
+
if (nodesAlreadyMerged.some((mergedNode) => mergedNode.is(candidate))) {
|
|
15985
|
+
continue;
|
|
15986
|
+
}
|
|
15987
|
+
if (!$isLinkNode(candidate)) {
|
|
15988
|
+
break;
|
|
15989
|
+
}
|
|
15990
|
+
const siblings = candidate.getNextSiblings();
|
|
15991
|
+
for (const sibling of siblings) {
|
|
15992
|
+
if (nodesAlreadyMerged.some((mergedNode) => mergedNode.is(sibling))) {
|
|
15993
|
+
continue;
|
|
15994
|
+
}
|
|
15995
|
+
if (!$isLinkNode(sibling)) {
|
|
15996
|
+
break;
|
|
15997
|
+
}
|
|
15998
|
+
if (!deepEqual(sibling.getLink(), candidate.getLink())) {
|
|
15999
|
+
break;
|
|
16000
|
+
}
|
|
16001
|
+
candidate.append(...sibling.getChildren());
|
|
16002
|
+
sibling.remove();
|
|
16003
|
+
nodesAlreadyMerged.push(sibling);
|
|
16004
|
+
}
|
|
16005
|
+
}
|
|
16006
|
+
}
|
|
16007
|
+
}
|
|
16008
|
+
var UPSERT_LINK_NODE_COMMAND = createCommand("UPSERT_LINK_NODE_COMMAND");
|
|
16009
|
+
var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
|
|
16010
|
+
"OPEN_LINK_NODE_MODAL_COMMAND"
|
|
16011
|
+
);
|
|
16012
|
+
var LINK_POPOVER_OFFSET_X = 0;
|
|
16013
|
+
var LINK_POPOVER_OFFSET_Y = 8;
|
|
16014
|
+
var linkPopover = css71`
|
|
16015
|
+
position: absolute;
|
|
16016
|
+
z-index: 5;
|
|
16017
|
+
`;
|
|
16018
|
+
var linkPopoverContainer = css71`
|
|
16019
|
+
${Popover};
|
|
16020
|
+
align-items: center;
|
|
16021
|
+
display: flex;
|
|
16022
|
+
`;
|
|
16023
|
+
var linkPopoverAnchor = css71`
|
|
16024
|
+
${link}
|
|
16025
|
+
${linkColorDefault}
|
|
16026
|
+
`;
|
|
16027
|
+
function LinkNodePlugin({ onConnectLink }) {
|
|
16028
|
+
const [editor] = useLexicalComposerContext();
|
|
16029
|
+
const [linkPopoverState, setLinkPopoverState] = useState9();
|
|
16030
|
+
const linkPopoverElRef = useRef5(null);
|
|
16031
|
+
const [isEditorFocused, setIsEditorFocused] = useState9(false);
|
|
16032
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState9(false);
|
|
16033
|
+
useEffect10(() => {
|
|
16034
|
+
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
16035
|
+
setLinkPopoverState(void 0);
|
|
16036
|
+
return;
|
|
16037
|
+
}
|
|
16038
|
+
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
16039
|
+
useEffect10(() => {
|
|
16040
|
+
if (!editor.hasNodes([LinkNode])) {
|
|
16041
|
+
throw new Error("LinkNode not registered on editor");
|
|
16042
|
+
}
|
|
16043
|
+
return mergeRegister(
|
|
16044
|
+
editor.registerCommand(
|
|
16045
|
+
UPSERT_LINK_NODE_COMMAND,
|
|
16046
|
+
(payload) => {
|
|
16047
|
+
upsertLinkNode(payload);
|
|
16048
|
+
return true;
|
|
16049
|
+
},
|
|
16050
|
+
COMMAND_PRIORITY_EDITOR
|
|
16051
|
+
),
|
|
16052
|
+
editor.registerCommand(
|
|
16053
|
+
OPEN_LINK_NODE_MODAL_COMMAND,
|
|
16054
|
+
() => {
|
|
16055
|
+
onConnectLink({
|
|
16056
|
+
key: "",
|
|
16057
|
+
value: void 0,
|
|
16058
|
+
onSetValue: (newLinkValue) => {
|
|
16059
|
+
editor.update(() => {
|
|
16060
|
+
if (newLinkValue === void 0) {
|
|
16061
|
+
return;
|
|
16062
|
+
}
|
|
16063
|
+
upsertLinkNode(newLinkValue);
|
|
16064
|
+
});
|
|
16065
|
+
}
|
|
16066
|
+
});
|
|
16067
|
+
return true;
|
|
16068
|
+
},
|
|
16069
|
+
COMMAND_PRIORITY_EDITOR
|
|
16070
|
+
),
|
|
16071
|
+
editor.registerCommand(
|
|
16072
|
+
FOCUS_COMMAND,
|
|
16073
|
+
() => {
|
|
16074
|
+
setIsEditorFocused(true);
|
|
16075
|
+
return true;
|
|
16076
|
+
},
|
|
16077
|
+
COMMAND_PRIORITY_EDITOR
|
|
16078
|
+
),
|
|
16079
|
+
editor.registerCommand(
|
|
16080
|
+
BLUR_COMMAND,
|
|
16081
|
+
() => {
|
|
16082
|
+
requestAnimationFrame(() => {
|
|
16083
|
+
if (linkPopoverElRef.current !== null) {
|
|
16084
|
+
const selection = window.getSelection();
|
|
16085
|
+
const range = selection == null ? void 0 : selection.getRangeAt(0);
|
|
16086
|
+
const elementWithinLinkPopoverWasSelected = range !== null && range !== void 0 && range.commonAncestorContainer !== null && linkPopoverElRef.current.contains(range.commonAncestorContainer);
|
|
16087
|
+
const elementWithinLinkPopoverWasFocused = document.activeElement !== null && document.activeElement !== void 0 && linkPopoverElRef.current.contains(document.activeElement);
|
|
16088
|
+
setIsLinkPopoverFocused(
|
|
16089
|
+
elementWithinLinkPopoverWasSelected || elementWithinLinkPopoverWasFocused
|
|
16090
|
+
);
|
|
16091
|
+
}
|
|
16092
|
+
setIsEditorFocused(false);
|
|
16093
|
+
});
|
|
16094
|
+
return true;
|
|
16095
|
+
},
|
|
16096
|
+
COMMAND_PRIORITY_EDITOR
|
|
16097
|
+
)
|
|
16098
|
+
);
|
|
16099
|
+
}, [editor, onConnectLink]);
|
|
16100
|
+
const maybeShowLinkToolbar = useCallback4(() => {
|
|
16101
|
+
if (!editor.isEditable()) {
|
|
16102
|
+
return;
|
|
16103
|
+
}
|
|
16104
|
+
const selection = $getSelection();
|
|
16105
|
+
if (!$isRangeSelection(selection)) {
|
|
16106
|
+
setLinkPopoverState(void 0);
|
|
16107
|
+
return;
|
|
16108
|
+
}
|
|
16109
|
+
const node = getSelectedNode(selection);
|
|
16110
|
+
const linkNode = getLinkAncestor(node);
|
|
16111
|
+
if (linkNode === null) {
|
|
16112
|
+
setLinkPopoverState(void 0);
|
|
16113
|
+
return;
|
|
16114
|
+
}
|
|
16115
|
+
const element = editor.getElementByKey(linkNode.getKey());
|
|
16116
|
+
if (!element) {
|
|
16117
|
+
setLinkPopoverState(void 0);
|
|
16118
|
+
return;
|
|
16119
|
+
}
|
|
16120
|
+
const { x, y } = {
|
|
16121
|
+
x: element.offsetLeft + LINK_POPOVER_OFFSET_X,
|
|
16122
|
+
y: element.offsetTop + element.clientHeight + LINK_POPOVER_OFFSET_Y
|
|
16123
|
+
};
|
|
16124
|
+
setLinkPopoverState({
|
|
16125
|
+
node: linkNode,
|
|
16126
|
+
position: {
|
|
16127
|
+
x,
|
|
16128
|
+
y
|
|
16129
|
+
}
|
|
16130
|
+
});
|
|
16131
|
+
}, [editor]);
|
|
16132
|
+
useEffect10(() => {
|
|
16133
|
+
return editor.registerUpdateListener(({ editorState }) => {
|
|
16134
|
+
requestAnimationFrame(() => {
|
|
16135
|
+
editorState.read(() => {
|
|
16136
|
+
maybeShowLinkToolbar();
|
|
16137
|
+
});
|
|
16138
|
+
});
|
|
16139
|
+
});
|
|
16140
|
+
}, [editor, maybeShowLinkToolbar]);
|
|
16141
|
+
const onEditLinkNode = (node) => {
|
|
16142
|
+
editor.getEditorState().read(() => {
|
|
16143
|
+
onConnectLink({
|
|
16144
|
+
key: node.getKey(),
|
|
16145
|
+
value: node.getLink(),
|
|
16146
|
+
onSetValue: (newLinkValue) => {
|
|
16147
|
+
editor.update(() => {
|
|
16148
|
+
editor.focus();
|
|
16149
|
+
if (newLinkValue === void 0) {
|
|
16150
|
+
removeLinkNode(node);
|
|
16151
|
+
return;
|
|
16152
|
+
}
|
|
16153
|
+
upsertLinkNode(newLinkValue);
|
|
16154
|
+
});
|
|
16155
|
+
}
|
|
16156
|
+
});
|
|
16157
|
+
});
|
|
16158
|
+
};
|
|
16159
|
+
return /* @__PURE__ */ jsxs59(Fragment13, { children: [
|
|
16160
|
+
/* @__PURE__ */ jsx88(
|
|
16161
|
+
NodeEventPlugin,
|
|
16162
|
+
{
|
|
16163
|
+
nodeType: LinkNode,
|
|
16164
|
+
eventType: "click",
|
|
16165
|
+
eventListener: (e) => {
|
|
16166
|
+
e.preventDefault();
|
|
16167
|
+
}
|
|
16168
|
+
}
|
|
16169
|
+
),
|
|
16170
|
+
linkPopoverState ? /* @__PURE__ */ jsx88(
|
|
16171
|
+
"div",
|
|
16172
|
+
{
|
|
16173
|
+
css: linkPopover,
|
|
16174
|
+
style: {
|
|
16175
|
+
left: linkPopoverState.position.x,
|
|
16176
|
+
top: linkPopoverState.position.y
|
|
16177
|
+
},
|
|
16178
|
+
ref: linkPopoverElRef,
|
|
16179
|
+
children: /* @__PURE__ */ jsxs59("div", { css: linkPopoverContainer, children: [
|
|
16180
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx88(
|
|
16181
|
+
"a",
|
|
16182
|
+
{
|
|
16183
|
+
href: `${linkPopoverState.node.__link.type === "email" ? "mailto:" : linkPopoverState.node.__link.type === "tel" ? "tel:" : ""}${linkPopoverState.node.__link.path}`,
|
|
16184
|
+
css: linkPopoverAnchor,
|
|
16185
|
+
target: "_blank",
|
|
16186
|
+
rel: "noopener noreferrer",
|
|
16187
|
+
children: linkPopoverState.node.__link.path
|
|
16188
|
+
}
|
|
16189
|
+
),
|
|
16190
|
+
/* @__PURE__ */ jsx88(
|
|
16191
|
+
Button,
|
|
16192
|
+
{
|
|
16193
|
+
size: "xs",
|
|
16194
|
+
onClick: () => {
|
|
16195
|
+
onEditLinkNode(linkPopoverState.node);
|
|
16196
|
+
},
|
|
16197
|
+
buttonType: "ghost",
|
|
16198
|
+
children: /* @__PURE__ */ jsx88(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
16199
|
+
}
|
|
16200
|
+
)
|
|
16201
|
+
] })
|
|
16202
|
+
}
|
|
16203
|
+
) : null
|
|
16204
|
+
] });
|
|
16205
|
+
}
|
|
16206
|
+
function getLinkAncestor(node) {
|
|
16207
|
+
return getAncestor(node, (ancestor) => {
|
|
16208
|
+
return $isLinkNode(ancestor);
|
|
16209
|
+
});
|
|
16210
|
+
}
|
|
16211
|
+
|
|
16212
|
+
// src/components/ParameterInputs/rich-text/ListIndentPlugin.tsx
|
|
16213
|
+
import { $getListDepth, $isListItemNode, $isListNode } from "@lexical/list";
|
|
16214
|
+
import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
|
|
16215
|
+
import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
|
|
16216
|
+
import {
|
|
16217
|
+
$getSelection as $getSelection2,
|
|
16218
|
+
$isRangeSelection as $isRangeSelection2,
|
|
16219
|
+
COMMAND_PRIORITY_CRITICAL,
|
|
16220
|
+
INDENT_CONTENT_COMMAND
|
|
16221
|
+
} from "lexical";
|
|
16222
|
+
import { useEffect as useEffect11 } from "react";
|
|
16223
|
+
import { jsx as jsx89 } from "@emotion/react/jsx-runtime";
|
|
16224
|
+
function isIndentPermitted(maxDepth) {
|
|
16225
|
+
const selection = $getSelection2();
|
|
16226
|
+
if (!$isRangeSelection2(selection)) {
|
|
16227
|
+
return false;
|
|
16228
|
+
}
|
|
16229
|
+
const elementNodesInSelection = getElementNodesInSelection(selection);
|
|
16230
|
+
let totalDepth = 0;
|
|
16231
|
+
for (const elementNode of elementNodesInSelection) {
|
|
16232
|
+
if ($isListNode(elementNode)) {
|
|
16233
|
+
totalDepth = Math.max($getListDepth(elementNode) + 1, totalDepth);
|
|
16234
|
+
} else if ($isListItemNode(elementNode)) {
|
|
16235
|
+
const parent = elementNode.getParent();
|
|
16236
|
+
if (!$isListNode(parent)) {
|
|
16237
|
+
throw new Error("ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.");
|
|
16238
|
+
}
|
|
16239
|
+
totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
|
|
16240
|
+
}
|
|
16241
|
+
}
|
|
16242
|
+
return totalDepth <= maxDepth;
|
|
16243
|
+
}
|
|
16244
|
+
function ListIndentPlugin({ maxDepth }) {
|
|
16245
|
+
const [editor] = useLexicalComposerContext2();
|
|
16246
|
+
useEffect11(() => {
|
|
16247
|
+
return editor.registerCommand(
|
|
16248
|
+
INDENT_CONTENT_COMMAND,
|
|
16249
|
+
() => !isIndentPermitted(maxDepth),
|
|
16250
|
+
COMMAND_PRIORITY_CRITICAL
|
|
16251
|
+
);
|
|
16252
|
+
}, [editor, maxDepth]);
|
|
16253
|
+
return /* @__PURE__ */ jsx89(TabIndentationPlugin, {});
|
|
16254
|
+
}
|
|
16255
|
+
|
|
16256
|
+
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
16257
|
+
import { css as css72 } from "@emotion/react";
|
|
16258
|
+
import {
|
|
16259
|
+
$isListNode as $isListNode2,
|
|
16260
|
+
INSERT_ORDERED_LIST_COMMAND,
|
|
16261
|
+
INSERT_UNORDERED_LIST_COMMAND,
|
|
16262
|
+
ListNode,
|
|
16263
|
+
REMOVE_LIST_COMMAND
|
|
16264
|
+
} from "@lexical/list";
|
|
16265
|
+
import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
|
|
16266
|
+
import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
|
|
16267
|
+
import { $setBlocksType } from "@lexical/selection";
|
|
16268
|
+
import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
|
|
16269
|
+
import {
|
|
16270
|
+
$createParagraphNode,
|
|
16271
|
+
$getSelection as $getSelection3,
|
|
16272
|
+
$isRangeSelection as $isRangeSelection3,
|
|
16273
|
+
$isRootOrShadowRoot,
|
|
16274
|
+
COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
|
|
16275
|
+
FORMAT_TEXT_COMMAND,
|
|
16276
|
+
SELECTION_CHANGE_COMMAND
|
|
16277
|
+
} from "lexical";
|
|
16278
|
+
import { useCallback as useCallback5, useEffect as useEffect12, useMemo as useMemo2, useState as useState10 } from "react";
|
|
16279
|
+
import { Fragment as Fragment14, jsx as jsx90, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
|
|
16280
|
+
var toolbar = css72`
|
|
16281
|
+
background: var(--gray-50);
|
|
16282
|
+
border-radius: var(--rounded-base);
|
|
16283
|
+
display: flex;
|
|
16284
|
+
/* We add 1px because we use a 1px wide separator */
|
|
16285
|
+
gap: calc(var(--spacing-sm) + 1px);
|
|
16286
|
+
margin: calc(var(--spacing-sm) + var(--spacing-xs)) var(--spacing-sm);
|
|
16287
|
+
padding: var(--spacing-sm);
|
|
16288
|
+
position: sticky;
|
|
16289
|
+
top: 0;
|
|
16290
|
+
z-index: 10;
|
|
16291
|
+
`;
|
|
16292
|
+
var toolbarGroup = css72`
|
|
16293
|
+
display: flex;
|
|
16294
|
+
gap: var(--spacing-xs);
|
|
16295
|
+
position: relative;
|
|
16296
|
+
|
|
16297
|
+
&:not(:first-child)::before {
|
|
16298
|
+
background-color: var(--gray-300);
|
|
16299
|
+
content: '';
|
|
16300
|
+
display: block;
|
|
16301
|
+
height: 24px;
|
|
16302
|
+
left: calc(var(--spacing-xs) * -1);
|
|
16303
|
+
position: absolute;
|
|
16304
|
+
top: 4px;
|
|
16305
|
+
width: 1px;
|
|
16306
|
+
}
|
|
16307
|
+
`;
|
|
16308
|
+
var toolbarButton = css72`
|
|
16309
|
+
align-items: center;
|
|
16310
|
+
appearance: none;
|
|
16311
|
+
border: 0;
|
|
16312
|
+
border-radius: var(--rounded-sm);
|
|
16313
|
+
box-shadow: none;
|
|
16314
|
+
color: var(--gray-900);
|
|
16315
|
+
display: flex;
|
|
16316
|
+
height: 32px;
|
|
16317
|
+
justify-content: center;
|
|
16318
|
+
min-width: 32px;
|
|
16319
|
+
padding: 0 var(--spacing-sm);
|
|
16320
|
+
`;
|
|
16321
|
+
var toolbarButtonActive = css72`
|
|
16322
|
+
background: var(--gray-200);
|
|
16323
|
+
`;
|
|
16324
|
+
var toolbarIcon = css72`
|
|
16325
|
+
color: inherit;
|
|
16326
|
+
`;
|
|
16327
|
+
var toolbarChevron = css72`
|
|
16328
|
+
margin-left: var(--spacing-xs);
|
|
16329
|
+
`;
|
|
16330
|
+
var ToolbarIcon = ({ icon }) => {
|
|
16331
|
+
return /* @__PURE__ */ jsx90(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
16332
|
+
};
|
|
16333
|
+
var RichTextToolbar = ({ config }) => {
|
|
16334
|
+
const [editor] = useLexicalComposerContext3();
|
|
16335
|
+
const enabledBuiltInFormats = richTextBuiltInFormats.filter(
|
|
16336
|
+
(format) => {
|
|
16337
|
+
var _a, _b;
|
|
16338
|
+
return (_b = (_a = config == null ? void 0 : config.formatting) == null ? void 0 : _a.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
16339
|
+
}
|
|
16340
|
+
);
|
|
16341
|
+
const enabledBuiltInElements = richTextBuiltInElements.filter(
|
|
16342
|
+
(element) => {
|
|
16343
|
+
var _a, _b;
|
|
16344
|
+
return (_b = (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
16345
|
+
}
|
|
16346
|
+
);
|
|
16347
|
+
const showToolbar = enabledBuiltInFormats.length > 0 || enabledBuiltInElements.length > 0;
|
|
16348
|
+
const formatsWithIcon = /* @__PURE__ */ new Map([
|
|
16349
|
+
["bold", "format-bold"],
|
|
16350
|
+
["italic", "format-italic"],
|
|
16351
|
+
["underline", "format-underline"],
|
|
16352
|
+
["strikethrough", "format-strike"],
|
|
16353
|
+
["code", "format-code"],
|
|
16354
|
+
["superscript", "format-superscript"],
|
|
16355
|
+
["subscript", "format-subscript"]
|
|
16356
|
+
]);
|
|
16357
|
+
const enabledBuiltInFormatsWithIcon = enabledBuiltInFormats.filter(
|
|
16358
|
+
(format) => formatsWithIcon.has(format.type)
|
|
16359
|
+
);
|
|
16360
|
+
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
16361
|
+
(format) => !formatsWithIcon.has(format.type)
|
|
16362
|
+
);
|
|
16363
|
+
const [activeFormats, setActiveFormats] = useState10([]);
|
|
16364
|
+
const [activeElement, setActiveElement] = useState10("paragraph");
|
|
16365
|
+
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
16366
|
+
(element) => ["h1", "h2", "h3", "h4", "h5", "h6"].includes(element.type)
|
|
16367
|
+
);
|
|
16368
|
+
const elementTypeToLabel = (type) => {
|
|
16369
|
+
var _a;
|
|
16370
|
+
if (type === "paragraph") {
|
|
16371
|
+
return "Normal";
|
|
16372
|
+
}
|
|
16373
|
+
const element = enabledBuiltInElements.find((element2) => element2.type === type);
|
|
16374
|
+
return (_a = element == null ? void 0 : element.label) != null ? _a : type;
|
|
16375
|
+
};
|
|
16376
|
+
const onSelectElement = (type) => {
|
|
16377
|
+
if (activeElement === type) {
|
|
16378
|
+
return;
|
|
16379
|
+
}
|
|
16380
|
+
editor.update(() => {
|
|
16381
|
+
const selection = $getSelection3();
|
|
16382
|
+
if (!$isRangeSelection3(selection)) {
|
|
16383
|
+
return;
|
|
16384
|
+
}
|
|
16385
|
+
if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(type)) {
|
|
16386
|
+
$setBlocksType(selection, () => $createHeadingNode(type));
|
|
16387
|
+
} else if (type === "paragraph") {
|
|
16388
|
+
$setBlocksType(selection, () => $createParagraphNode());
|
|
16389
|
+
}
|
|
16390
|
+
});
|
|
16391
|
+
};
|
|
16392
|
+
const [isLink, setIsLink] = useState10(false);
|
|
16393
|
+
const linkElementEnabled = useMemo2(() => {
|
|
16394
|
+
return enabledBuiltInElements.some((element) => element.type === "link");
|
|
16395
|
+
}, [enabledBuiltInElements]);
|
|
16396
|
+
const enabledLists = useMemo2(() => {
|
|
16397
|
+
return new Set(
|
|
16398
|
+
enabledBuiltInElements.filter((element) => ["orderedList", "unorderedList"].includes(element.type)).map((element) => element.type)
|
|
16399
|
+
);
|
|
16400
|
+
}, [enabledBuiltInElements]);
|
|
16401
|
+
const updateToolbar = useCallback5(() => {
|
|
16402
|
+
const selection = $getSelection3();
|
|
16403
|
+
if (!$isRangeSelection3(selection)) {
|
|
16404
|
+
return;
|
|
16405
|
+
}
|
|
16406
|
+
const newActiveFormats = [];
|
|
16407
|
+
for (const format of enabledBuiltInFormats) {
|
|
16408
|
+
if (selection.hasFormat(format.type)) {
|
|
16409
|
+
newActiveFormats.push(format.type);
|
|
16410
|
+
}
|
|
16411
|
+
}
|
|
16412
|
+
setActiveFormats(newActiveFormats);
|
|
16413
|
+
const anchorNode = selection.anchor.getNode();
|
|
16414
|
+
let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
|
|
16415
|
+
const parent = e.getParent();
|
|
16416
|
+
return parent !== null && $isRootOrShadowRoot(parent);
|
|
16417
|
+
});
|
|
16418
|
+
if (element === null) {
|
|
16419
|
+
element = anchorNode.getTopLevelElementOrThrow();
|
|
16420
|
+
}
|
|
16421
|
+
const elementKey = element.getKey();
|
|
16422
|
+
const elementDOM = editor.getElementByKey(elementKey);
|
|
16423
|
+
if (elementDOM !== null) {
|
|
16424
|
+
if ($isListNode2(element)) {
|
|
16425
|
+
const parentList = $getNearestNodeOfType(anchorNode, ListNode);
|
|
16426
|
+
const type = parentList ? parentList.getListType() : element.getListType();
|
|
16427
|
+
setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
|
|
16428
|
+
} else {
|
|
16429
|
+
const type = $isHeadingNode(element) ? element.getTag() : element.getType();
|
|
16430
|
+
setActiveElement(type);
|
|
16431
|
+
}
|
|
16432
|
+
}
|
|
16433
|
+
const node = getSelectedNode(selection);
|
|
16434
|
+
if (getLinkAncestor(node) !== null) {
|
|
16435
|
+
setIsLink(true);
|
|
16436
|
+
} else {
|
|
16437
|
+
setIsLink(false);
|
|
16438
|
+
}
|
|
16439
|
+
}, [editor, enabledBuiltInFormats]);
|
|
16440
|
+
useEffect12(() => {
|
|
16441
|
+
return editor.registerCommand(
|
|
16442
|
+
SELECTION_CHANGE_COMMAND,
|
|
16443
|
+
(_payload) => {
|
|
16444
|
+
updateToolbar();
|
|
16445
|
+
return false;
|
|
16446
|
+
},
|
|
16447
|
+
COMMAND_PRIORITY_CRITICAL2
|
|
16448
|
+
);
|
|
16449
|
+
}, [editor, updateToolbar]);
|
|
16450
|
+
useEffect12(() => {
|
|
16451
|
+
return editor.registerUpdateListener(({ editorState }) => {
|
|
16452
|
+
requestAnimationFrame(() => {
|
|
16453
|
+
editorState.read(() => {
|
|
16454
|
+
updateToolbar();
|
|
16455
|
+
});
|
|
16456
|
+
});
|
|
16457
|
+
});
|
|
16458
|
+
}, [editor, updateToolbar]);
|
|
16459
|
+
if (!showToolbar) {
|
|
16460
|
+
return null;
|
|
16461
|
+
}
|
|
16462
|
+
return /* @__PURE__ */ jsxs60("div", { css: toolbar, children: [
|
|
16463
|
+
enabledTextualElements.length > 0 ? /* @__PURE__ */ jsx90(
|
|
16464
|
+
Menu,
|
|
16465
|
+
{
|
|
16466
|
+
menuLabel: "Elements",
|
|
16467
|
+
menuTrigger: /* @__PURE__ */ jsxs60("button", { css: toolbarButton, title: "Text formatting", children: [
|
|
16468
|
+
enabledTextualElements.some((textualElement) => textualElement.type === activeElement) ? elementTypeToLabel(activeElement) : elementTypeToLabel("paragraph"),
|
|
16469
|
+
" ",
|
|
16470
|
+
/* @__PURE__ */ jsx90(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
16471
|
+
] }),
|
|
16472
|
+
placement: "bottom-start",
|
|
16473
|
+
children: [
|
|
16474
|
+
{
|
|
16475
|
+
label: "Normal",
|
|
16476
|
+
type: "paragraph"
|
|
16477
|
+
},
|
|
16478
|
+
...enabledTextualElements
|
|
16479
|
+
].map((element) => /* @__PURE__ */ jsx90(
|
|
16480
|
+
MenuItem,
|
|
16481
|
+
{
|
|
16482
|
+
onClick: () => {
|
|
16483
|
+
onSelectElement(element.type);
|
|
16484
|
+
},
|
|
16485
|
+
children: element.label
|
|
16486
|
+
},
|
|
16487
|
+
element.type
|
|
16488
|
+
))
|
|
16489
|
+
}
|
|
16490
|
+
) : null,
|
|
16491
|
+
enabledBuiltInFormatsWithIcon.length > 0 || enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs60("div", { css: toolbarGroup, children: [
|
|
16492
|
+
enabledBuiltInFormatsWithIcon.map((format) => /* @__PURE__ */ jsx90(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx90(
|
|
16493
|
+
"button",
|
|
16494
|
+
{
|
|
16495
|
+
onClick: () => {
|
|
16496
|
+
editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
|
|
16497
|
+
},
|
|
16498
|
+
css: [toolbarButton, activeFormats.includes(format.type) ? toolbarButtonActive : null],
|
|
16499
|
+
children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: formatsWithIcon.get(format.type) })
|
|
16500
|
+
}
|
|
16501
|
+
) }, format.type)),
|
|
16502
|
+
enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx90(
|
|
16503
|
+
Menu,
|
|
16504
|
+
{
|
|
16505
|
+
menuLabel: "Text formatting",
|
|
16506
|
+
menuTrigger: /* @__PURE__ */ jsx90("button", { css: toolbarButton, title: "Text formatting", children: /* @__PURE__ */ jsx90(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
16507
|
+
placement: "bottom-start",
|
|
16508
|
+
children: enabledBuiltInFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx90(
|
|
16509
|
+
MenuItem,
|
|
16510
|
+
{
|
|
16511
|
+
onClick: () => {
|
|
16512
|
+
editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
|
|
16513
|
+
},
|
|
16514
|
+
children: format.label
|
|
16515
|
+
},
|
|
16516
|
+
format.type
|
|
16517
|
+
))
|
|
16518
|
+
}
|
|
16519
|
+
) : null
|
|
16520
|
+
] }) : null,
|
|
16521
|
+
linkElementEnabled || enabledLists.size > 0 ? /* @__PURE__ */ jsxs60("div", { css: toolbarGroup, children: [
|
|
16522
|
+
linkElementEnabled ? /* @__PURE__ */ jsx90(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx90(
|
|
16523
|
+
"button",
|
|
16524
|
+
{
|
|
16525
|
+
onClick: () => {
|
|
16526
|
+
editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
16527
|
+
},
|
|
16528
|
+
css: [toolbarButton, isLink ? toolbarButtonActive : null],
|
|
16529
|
+
children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: "link" })
|
|
16530
|
+
}
|
|
16531
|
+
) }) : null,
|
|
16532
|
+
enabledLists.size > 0 ? /* @__PURE__ */ jsxs60(Fragment14, { children: [
|
|
16533
|
+
enabledLists.has("unorderedList") ? /* @__PURE__ */ jsx90(Tooltip, { title: "Bullet list", placement: "top", children: /* @__PURE__ */ jsx90(
|
|
16534
|
+
"button",
|
|
16535
|
+
{
|
|
16536
|
+
onClick: () => {
|
|
16537
|
+
activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
|
|
16538
|
+
},
|
|
16539
|
+
css: [toolbarButton, activeElement === "unorderedList" ? toolbarButtonActive : null],
|
|
16540
|
+
children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: "layout-list" })
|
|
16541
|
+
}
|
|
16542
|
+
) }) : null,
|
|
16543
|
+
enabledLists.has("orderedList") ? /* @__PURE__ */ jsx90(Tooltip, { title: "Numbered list", placement: "top", children: /* @__PURE__ */ jsx90(
|
|
16544
|
+
"button",
|
|
16545
|
+
{
|
|
16546
|
+
onClick: () => {
|
|
16547
|
+
activeElement === "orderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
|
|
16548
|
+
},
|
|
16549
|
+
css: [toolbarButton, activeElement === "orderedList" ? toolbarButtonActive : null],
|
|
16550
|
+
children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: "layout-list-numbered" })
|
|
16551
|
+
}
|
|
16552
|
+
) }) : null
|
|
16553
|
+
] }) : null
|
|
16554
|
+
] }) : null
|
|
16555
|
+
] });
|
|
16556
|
+
};
|
|
16557
|
+
var RichTextToolbar_default = RichTextToolbar;
|
|
16558
|
+
|
|
16559
|
+
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
16560
|
+
import { Fragment as Fragment15, jsx as jsx91, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
|
|
16561
|
+
var ParameterRichText = ({
|
|
16562
|
+
label,
|
|
16563
|
+
labelLeadingIcon,
|
|
16564
|
+
hiddenLabel,
|
|
16565
|
+
id,
|
|
16566
|
+
errorMessage,
|
|
16567
|
+
caption,
|
|
16568
|
+
errorTestId,
|
|
16569
|
+
captionTestId,
|
|
16570
|
+
menuItems,
|
|
16571
|
+
value,
|
|
16572
|
+
onChange,
|
|
16573
|
+
onConnectLink,
|
|
16574
|
+
config,
|
|
16575
|
+
onRichTextInit,
|
|
16576
|
+
readOnly,
|
|
16577
|
+
editorWrapperClassName,
|
|
16578
|
+
editorInputClassName,
|
|
16579
|
+
editorFooter
|
|
16580
|
+
}) => {
|
|
16581
|
+
return /* @__PURE__ */ jsxs61(
|
|
16582
|
+
ParameterShell,
|
|
16583
|
+
{
|
|
16584
|
+
"data-test-id": "parameter-input",
|
|
16585
|
+
label,
|
|
16586
|
+
hiddenLabel,
|
|
16587
|
+
labelLeadingIcon,
|
|
16588
|
+
id,
|
|
16589
|
+
errorMessage,
|
|
16590
|
+
caption,
|
|
16591
|
+
errorTestId,
|
|
16592
|
+
captionTestId,
|
|
16593
|
+
menuItems,
|
|
16594
|
+
children: [
|
|
16595
|
+
/* @__PURE__ */ jsx91(
|
|
16596
|
+
ParameterRichTextInner,
|
|
16597
|
+
{
|
|
16598
|
+
value,
|
|
16599
|
+
onChange,
|
|
16600
|
+
onConnectLink,
|
|
16601
|
+
config,
|
|
16602
|
+
onRichTextInit,
|
|
16603
|
+
readOnly,
|
|
16604
|
+
editorWrapperClassName,
|
|
16605
|
+
editorInputClassName,
|
|
16606
|
+
editorFooter
|
|
16607
|
+
}
|
|
16608
|
+
),
|
|
16609
|
+
menuItems ? /* @__PURE__ */ jsx91(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx91(Fragment15, { children: menuItems }) }) : null
|
|
16610
|
+
]
|
|
16611
|
+
}
|
|
16612
|
+
);
|
|
16613
|
+
};
|
|
16614
|
+
var editorWrapper = css73`
|
|
16615
|
+
display: flex;
|
|
16616
|
+
flex-flow: column;
|
|
16617
|
+
flex-grow: 1;
|
|
16618
|
+
`;
|
|
16619
|
+
var editorContainer = css73`
|
|
16620
|
+
display: flex;
|
|
16621
|
+
flex-flow: column;
|
|
16622
|
+
flex-grow: 1;
|
|
16623
|
+
position: relative;
|
|
16624
|
+
`;
|
|
16625
|
+
var editorPlaceholder = css73`
|
|
16626
|
+
color: var(--gray-500);
|
|
16627
|
+
font-style: italic;
|
|
16628
|
+
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
16629
|
+
instead of going under the placeholder */
|
|
16630
|
+
left: calc(var(--spacing-sm) + 1px);
|
|
16631
|
+
pointer-events: none;
|
|
16632
|
+
position: absolute;
|
|
16633
|
+
top: var(--spacing-xs);
|
|
16634
|
+
user-select: none;
|
|
16635
|
+
`;
|
|
16636
|
+
var editorInput = css73`
|
|
16637
|
+
background: var(--white);
|
|
16638
|
+
border: 1px solid var(--white);
|
|
16639
|
+
border-radius: var(--rounded-sm);
|
|
16640
|
+
color: var(--gray-700);
|
|
16641
|
+
flex-grow: 1;
|
|
16642
|
+
font-size: var(--fs-base);
|
|
16643
|
+
line-height: 1.2;
|
|
16644
|
+
min-height: 2rem;
|
|
16645
|
+
padding: var(--spacing-xs) var(--spacing-sm);
|
|
16646
|
+
|
|
16647
|
+
&:focus,
|
|
16648
|
+
&:focus-within {
|
|
16649
|
+
border-radius: var(--rounded-md);
|
|
16650
|
+
box-shadow: none;
|
|
16651
|
+
border: 1px solid var(--gray-300);
|
|
16652
|
+
outline: none;
|
|
16653
|
+
}
|
|
16654
|
+
`;
|
|
16655
|
+
var ParameterRichTextInner = ({
|
|
16656
|
+
value,
|
|
16657
|
+
onChange,
|
|
16658
|
+
onConnectLink,
|
|
16659
|
+
config,
|
|
16660
|
+
onRichTextInit,
|
|
16661
|
+
readOnly,
|
|
16662
|
+
editorWrapperClassName,
|
|
16663
|
+
editorInputClassName,
|
|
16664
|
+
editorFooter
|
|
16665
|
+
}) => {
|
|
16666
|
+
const lexicalConfig = {
|
|
16667
|
+
namespace: "uniform",
|
|
16668
|
+
onError: (error) => {
|
|
16669
|
+
console.error(error);
|
|
16670
|
+
},
|
|
16671
|
+
editorState: value ? JSON.stringify(value) : void 0,
|
|
16672
|
+
nodes: [ListNode2, ListItemNode, LinkNode, HeadingNode, ParagraphNode],
|
|
16673
|
+
theme: {
|
|
16674
|
+
text: {
|
|
16675
|
+
bold: textBold,
|
|
16676
|
+
italic: textItalic,
|
|
16677
|
+
underline: textUnderline,
|
|
16678
|
+
subscript: textSubscript,
|
|
16679
|
+
superscript: textSuperscript,
|
|
16680
|
+
strikethrough: textStrikethrough,
|
|
16681
|
+
underlineStrikethrough: textUnderlineStrikethrough,
|
|
16682
|
+
code: textCode
|
|
16683
|
+
},
|
|
16684
|
+
link: linkElement,
|
|
16685
|
+
heading: {
|
|
16686
|
+
h1: heading1Element,
|
|
16687
|
+
h2: heading2Element,
|
|
16688
|
+
h3: heading3Element,
|
|
16689
|
+
h4: heading4Element,
|
|
16690
|
+
h5: heading5Element,
|
|
16691
|
+
h6: heading6Element
|
|
16692
|
+
},
|
|
16693
|
+
paragraph: paragraphElement,
|
|
16694
|
+
list: {
|
|
16695
|
+
ol: orderedListElement,
|
|
16696
|
+
ul: unorderedListElement,
|
|
16697
|
+
listitem: listItemElement,
|
|
16698
|
+
nested: {
|
|
16699
|
+
listitem: nestedListItemElement
|
|
16700
|
+
}
|
|
16701
|
+
}
|
|
16702
|
+
},
|
|
16703
|
+
editable: !readOnly
|
|
16704
|
+
};
|
|
16705
|
+
return /* @__PURE__ */ jsxs61(Fragment15, { children: [
|
|
16706
|
+
/* @__PURE__ */ jsx91("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx91(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx91(
|
|
16707
|
+
RichText,
|
|
16708
|
+
{
|
|
16709
|
+
onChange,
|
|
16710
|
+
onConnectLink,
|
|
16711
|
+
config,
|
|
16712
|
+
onRichTextInit,
|
|
16713
|
+
readOnly,
|
|
16714
|
+
editorInputClassName
|
|
16715
|
+
}
|
|
16716
|
+
) }) }),
|
|
16717
|
+
editorFooter ? editorFooter : null
|
|
16718
|
+
] });
|
|
16719
|
+
};
|
|
16720
|
+
var RichText = ({
|
|
16721
|
+
onChange,
|
|
16722
|
+
onConnectLink,
|
|
16723
|
+
config,
|
|
16724
|
+
onRichTextInit,
|
|
16725
|
+
readOnly,
|
|
16726
|
+
editorInputClassName
|
|
16727
|
+
}) => {
|
|
16728
|
+
const editorContainerRef = useRef6(null);
|
|
16729
|
+
const [editor] = useLexicalComposerContext4();
|
|
16730
|
+
useEffect13(() => {
|
|
16731
|
+
if (onRichTextInit) {
|
|
16732
|
+
onRichTextInit(editor);
|
|
16733
|
+
}
|
|
16734
|
+
}, [editor, onRichTextInit]);
|
|
16735
|
+
useEffect13(() => {
|
|
16736
|
+
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
|
|
16737
|
+
requestAnimationFrame(() => {
|
|
16738
|
+
if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
16739
|
+
onChange == null ? void 0 : onChange(editorState.toJSON());
|
|
16740
|
+
}
|
|
16741
|
+
});
|
|
16742
|
+
});
|
|
16743
|
+
return () => {
|
|
16744
|
+
removeUpdateListener();
|
|
16745
|
+
};
|
|
16746
|
+
}, []);
|
|
16747
|
+
return /* @__PURE__ */ jsxs61(Fragment15, { children: [
|
|
16748
|
+
readOnly ? null : /* @__PURE__ */ jsx91(RichTextToolbar_default, { config }),
|
|
16749
|
+
/* @__PURE__ */ jsxs61("div", { css: editorContainer, ref: editorContainerRef, children: [
|
|
16750
|
+
/* @__PURE__ */ jsx91(
|
|
16751
|
+
RichTextPlugin,
|
|
16752
|
+
{
|
|
16753
|
+
contentEditable: /* @__PURE__ */ jsx91(ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
16754
|
+
placeholder: /* @__PURE__ */ jsx91("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
16755
|
+
ErrorBoundary: LexicalErrorBoundary
|
|
16756
|
+
}
|
|
16757
|
+
),
|
|
16758
|
+
/* @__PURE__ */ jsx91(ListPlugin, {}),
|
|
16759
|
+
readOnly ? null : /* @__PURE__ */ jsx91(HistoryPlugin, {}),
|
|
16760
|
+
/* @__PURE__ */ jsx91(LinkNodePlugin, { onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve() }),
|
|
16761
|
+
/* @__PURE__ */ jsx91(ListIndentPlugin, { maxDepth: 4 })
|
|
16762
|
+
] })
|
|
16763
|
+
] });
|
|
16764
|
+
};
|
|
16765
|
+
|
|
16766
|
+
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
16767
|
+
import { forwardRef as forwardRef13 } from "react";
|
|
16768
|
+
import { jsx as jsx92, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
|
|
16769
|
+
var ParameterSelect = forwardRef13(
|
|
16770
|
+
({ defaultOption, options, ...props }, ref) => {
|
|
16771
|
+
const { shellProps, innerProps } = extractParameterProps(props);
|
|
16772
|
+
return /* @__PURE__ */ jsx92(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx92(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
16773
|
+
}
|
|
16774
|
+
);
|
|
16775
|
+
var ParameterSelectInner = forwardRef13(
|
|
16776
|
+
({ defaultOption, options, ...props }, ref) => {
|
|
16777
|
+
const { id, label, hiddenLabel } = useParameterShell();
|
|
16778
|
+
return /* @__PURE__ */ jsxs62(
|
|
16779
|
+
"select",
|
|
16780
|
+
{
|
|
16781
|
+
css: [input2, selectInput],
|
|
16782
|
+
id,
|
|
16783
|
+
"aria-label": hiddenLabel ? label : void 0,
|
|
16784
|
+
ref,
|
|
16785
|
+
...props,
|
|
16786
|
+
children: [
|
|
16787
|
+
defaultOption ? /* @__PURE__ */ jsx92("option", { value: "", children: defaultOption }) : null,
|
|
16788
|
+
options.map((option) => {
|
|
16789
|
+
var _a;
|
|
16790
|
+
return /* @__PURE__ */ jsx92("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
16791
|
+
})
|
|
16792
|
+
]
|
|
16793
|
+
}
|
|
16794
|
+
);
|
|
16795
|
+
}
|
|
16796
|
+
);
|
|
16797
|
+
|
|
16798
|
+
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
16799
|
+
import { forwardRef as forwardRef14 } from "react";
|
|
16800
|
+
import { jsx as jsx93 } from "@emotion/react/jsx-runtime";
|
|
16801
|
+
var ParameterTextarea = forwardRef14((props, ref) => {
|
|
16802
|
+
const { shellProps, innerProps } = extractParameterProps(props);
|
|
16803
|
+
return /* @__PURE__ */ jsx93(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx93(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
16804
|
+
});
|
|
16805
|
+
var ParameterTextareaInner = forwardRef14(({ ...props }, ref) => {
|
|
16806
|
+
const { id, label, hiddenLabel } = useParameterShell();
|
|
16807
|
+
return /* @__PURE__ */ jsx93(
|
|
16808
|
+
"textarea",
|
|
16809
|
+
{
|
|
16810
|
+
css: [input2, textarea2],
|
|
16811
|
+
id,
|
|
16812
|
+
ref,
|
|
16813
|
+
"aria-label": hiddenLabel ? label : void 0,
|
|
16814
|
+
...props
|
|
16815
|
+
}
|
|
16816
|
+
);
|
|
16817
|
+
});
|
|
16818
|
+
|
|
16819
|
+
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
16820
|
+
import { forwardRef as forwardRef15 } from "react";
|
|
16821
|
+
import { jsx as jsx94, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
|
|
16822
|
+
var ParameterToggle = forwardRef15((props, ref) => {
|
|
16823
|
+
const { shellProps, innerProps } = extractParameterProps(props);
|
|
16824
|
+
return /* @__PURE__ */ jsx94(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx94(ParameterToggleInner, { ref, ...innerProps }) });
|
|
16825
|
+
});
|
|
16826
|
+
var ParameterToggleInner = forwardRef15(
|
|
16827
|
+
({ ...props }, ref) => {
|
|
16828
|
+
const { id, label } = useParameterShell();
|
|
16829
|
+
return /* @__PURE__ */ jsxs63("label", { css: inputToggleLabel2, children: [
|
|
16830
|
+
/* @__PURE__ */ jsx94("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
16831
|
+
/* @__PURE__ */ jsx94("span", { css: inlineLabel2, children: label })
|
|
16832
|
+
] });
|
|
16833
|
+
}
|
|
16834
|
+
);
|
|
16835
|
+
|
|
15449
16836
|
// src/components/Popover/Popover.tsx
|
|
15450
|
-
import {
|
|
16837
|
+
import {
|
|
16838
|
+
Popover as ReakitPopover,
|
|
16839
|
+
PopoverDisclosure,
|
|
16840
|
+
usePopoverState
|
|
16841
|
+
} from "reakit/Popover";
|
|
16842
|
+
import { Portal as Portal2 } from "reakit/Portal";
|
|
16843
|
+
import { Fragment as Fragment16, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
|
|
15451
16844
|
var Popover2 = ({
|
|
15452
16845
|
iconColor = "action",
|
|
15453
16846
|
icon = "info",
|
|
@@ -15459,38 +16852,38 @@ var Popover2 = ({
|
|
|
15459
16852
|
children
|
|
15460
16853
|
}) => {
|
|
15461
16854
|
const popover = usePopoverState({ placement });
|
|
15462
|
-
return /* @__PURE__ */
|
|
15463
|
-
/* @__PURE__ */
|
|
15464
|
-
/* @__PURE__ */
|
|
15465
|
-
/* @__PURE__ */
|
|
16855
|
+
return /* @__PURE__ */ jsxs64(Fragment16, { children: [
|
|
16856
|
+
/* @__PURE__ */ jsxs64(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, "data-test-id": testId, children: [
|
|
16857
|
+
/* @__PURE__ */ jsx95(Icon, { icon, iconColor, size: iconSize }),
|
|
16858
|
+
/* @__PURE__ */ jsx95("span", { hidden: true, children: buttonText })
|
|
15466
16859
|
] }),
|
|
15467
|
-
/* @__PURE__ */
|
|
16860
|
+
/* @__PURE__ */ jsx95(Portal2, { children: /* @__PURE__ */ jsx95(ReakitPopover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
|
|
15468
16861
|
] });
|
|
15469
16862
|
};
|
|
15470
16863
|
|
|
15471
16864
|
// src/components/ProgressList/ProgressList.tsx
|
|
15472
|
-
import { css as
|
|
15473
|
-
import { useMemo as
|
|
16865
|
+
import { css as css75 } from "@emotion/react";
|
|
16866
|
+
import { useMemo as useMemo3 } from "react";
|
|
15474
16867
|
import { CgCheckO as CgCheckO2, CgRadioCheck, CgRecord } from "react-icons/cg";
|
|
15475
16868
|
|
|
15476
16869
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
15477
|
-
import { css as
|
|
15478
|
-
var progressListStyles =
|
|
16870
|
+
import { css as css74 } from "@emotion/react";
|
|
16871
|
+
var progressListStyles = css74`
|
|
15479
16872
|
display: flex;
|
|
15480
16873
|
flex-direction: column;
|
|
15481
16874
|
gap: var(--spacing-sm);
|
|
15482
16875
|
list-style-type: none;
|
|
15483
16876
|
`;
|
|
15484
|
-
var progressListItemStyles =
|
|
16877
|
+
var progressListItemStyles = css74`
|
|
15485
16878
|
display: flex;
|
|
15486
16879
|
gap: var(--spacing-base);
|
|
15487
16880
|
align-items: center;
|
|
15488
16881
|
`;
|
|
15489
16882
|
|
|
15490
16883
|
// src/components/ProgressList/ProgressList.tsx
|
|
15491
|
-
import { jsx as
|
|
16884
|
+
import { jsx as jsx96, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
|
|
15492
16885
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
15493
|
-
const itemsWithStatus =
|
|
16886
|
+
const itemsWithStatus = useMemo3(() => {
|
|
15494
16887
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
15495
16888
|
return items.map((item, index) => {
|
|
15496
16889
|
let status = "queued";
|
|
@@ -15502,8 +16895,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
15502
16895
|
return { ...item, status };
|
|
15503
16896
|
});
|
|
15504
16897
|
}, [items, inProgressId]);
|
|
15505
|
-
return /* @__PURE__ */
|
|
15506
|
-
return /* @__PURE__ */
|
|
16898
|
+
return /* @__PURE__ */ jsx96("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
16899
|
+
return /* @__PURE__ */ jsx96(
|
|
15507
16900
|
ProgressListItem,
|
|
15508
16901
|
{
|
|
15509
16902
|
status,
|
|
@@ -15523,7 +16916,7 @@ var ProgressListItem = ({
|
|
|
15523
16916
|
errorLevel = "danger",
|
|
15524
16917
|
autoEllipsis = false
|
|
15525
16918
|
}) => {
|
|
15526
|
-
const Icon2 =
|
|
16919
|
+
const Icon2 = useMemo3(() => {
|
|
15527
16920
|
if (error) {
|
|
15528
16921
|
return warningIcon;
|
|
15529
16922
|
}
|
|
@@ -15534,14 +16927,14 @@ var ProgressListItem = ({
|
|
|
15534
16927
|
};
|
|
15535
16928
|
return iconPerStatus[status];
|
|
15536
16929
|
}, [status, error]);
|
|
15537
|
-
const statusStyles =
|
|
16930
|
+
const statusStyles = useMemo3(() => {
|
|
15538
16931
|
if (error) {
|
|
15539
|
-
return errorLevel === "caution" ?
|
|
16932
|
+
return errorLevel === "caution" ? css75`
|
|
15540
16933
|
color: rgb(161, 98, 7);
|
|
15541
16934
|
& svg {
|
|
15542
16935
|
color: rgb(250, 204, 21);
|
|
15543
16936
|
}
|
|
15544
|
-
` :
|
|
16937
|
+
` : css75`
|
|
15545
16938
|
color: rgb(185, 28, 28);
|
|
15546
16939
|
& svg {
|
|
15547
16940
|
color: var(--brand-primary-2);
|
|
@@ -15549,35 +16942,35 @@ var ProgressListItem = ({
|
|
|
15549
16942
|
`;
|
|
15550
16943
|
}
|
|
15551
16944
|
const colorPerStatus = {
|
|
15552
|
-
completed:
|
|
16945
|
+
completed: css75`
|
|
15553
16946
|
opacity: 0.75;
|
|
15554
16947
|
`,
|
|
15555
|
-
inProgress:
|
|
16948
|
+
inProgress: css75`
|
|
15556
16949
|
-webkit-text-stroke-width: thin;
|
|
15557
16950
|
`,
|
|
15558
|
-
queued:
|
|
16951
|
+
queued: css75`
|
|
15559
16952
|
opacity: 0.5;
|
|
15560
16953
|
`
|
|
15561
16954
|
};
|
|
15562
16955
|
return colorPerStatus[status];
|
|
15563
16956
|
}, [status, error, errorLevel]);
|
|
15564
|
-
return /* @__PURE__ */
|
|
15565
|
-
/* @__PURE__ */
|
|
15566
|
-
/* @__PURE__ */
|
|
16957
|
+
return /* @__PURE__ */ jsxs65("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
16958
|
+
/* @__PURE__ */ jsx96(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx96("div", { children: /* @__PURE__ */ jsx96(Icon2, { size: 20 }) }) }),
|
|
16959
|
+
/* @__PURE__ */ jsxs65("div", { children: [
|
|
15567
16960
|
children,
|
|
15568
|
-
/* @__PURE__ */
|
|
16961
|
+
/* @__PURE__ */ jsx96("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
15569
16962
|
] })
|
|
15570
16963
|
] });
|
|
15571
16964
|
};
|
|
15572
16965
|
|
|
15573
16966
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
15574
|
-
import { css as
|
|
15575
|
-
import { useCallback as
|
|
16967
|
+
import { css as css77 } from "@emotion/react";
|
|
16968
|
+
import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
|
|
15576
16969
|
import { CgCheck as CgCheck4 } from "react-icons/cg";
|
|
15577
16970
|
|
|
15578
16971
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
15579
|
-
import { css as
|
|
15580
|
-
var segmentedControlStyles =
|
|
16972
|
+
import { css as css76 } from "@emotion/react";
|
|
16973
|
+
var segmentedControlStyles = css76`
|
|
15581
16974
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
15582
16975
|
--segmented-control-border-width: 1px;
|
|
15583
16976
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -15596,14 +16989,14 @@ var segmentedControlStyles = css72`
|
|
|
15596
16989
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
15597
16990
|
font-size: var(--fs-xs);
|
|
15598
16991
|
`;
|
|
15599
|
-
var segmentedControlVerticalStyles =
|
|
16992
|
+
var segmentedControlVerticalStyles = css76`
|
|
15600
16993
|
flex-direction: column;
|
|
15601
16994
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
15602
16995
|
var(--segmented-control-rounded-value) 0 0;
|
|
15603
16996
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
15604
16997
|
var(--segmented-control-rounded-value);
|
|
15605
16998
|
`;
|
|
15606
|
-
var segmentedControlItemStyles =
|
|
16999
|
+
var segmentedControlItemStyles = css76`
|
|
15607
17000
|
&:first-of-type label {
|
|
15608
17001
|
border-radius: var(--segmented-control-first-border-radius);
|
|
15609
17002
|
}
|
|
@@ -15611,10 +17004,10 @@ var segmentedControlItemStyles = css72`
|
|
|
15611
17004
|
border-radius: var(--segmented-control-last-border-radius);
|
|
15612
17005
|
}
|
|
15613
17006
|
`;
|
|
15614
|
-
var segmentedControlInputStyles =
|
|
17007
|
+
var segmentedControlInputStyles = css76`
|
|
15615
17008
|
${accessibleHidden}
|
|
15616
17009
|
`;
|
|
15617
|
-
var segmentedControlLabelStyles =
|
|
17010
|
+
var segmentedControlLabelStyles = css76`
|
|
15618
17011
|
position: relative;
|
|
15619
17012
|
display: flex;
|
|
15620
17013
|
align-items: center;
|
|
@@ -15651,23 +17044,23 @@ var segmentedControlLabelStyles = css72`
|
|
|
15651
17044
|
background-color: var(--gray-400);
|
|
15652
17045
|
}
|
|
15653
17046
|
`;
|
|
15654
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
17047
|
+
var segmentedControlLabelIconOnlyStyles = css76`
|
|
15655
17048
|
padding-inline: 0.5em;
|
|
15656
17049
|
`;
|
|
15657
|
-
var segmentedControlLabelCheckStyles =
|
|
17050
|
+
var segmentedControlLabelCheckStyles = css76`
|
|
15658
17051
|
opacity: 0.5;
|
|
15659
17052
|
`;
|
|
15660
|
-
var segmentedControlLabelContentStyles =
|
|
17053
|
+
var segmentedControlLabelContentStyles = css76`
|
|
15661
17054
|
display: flex;
|
|
15662
17055
|
align-items: center;
|
|
15663
17056
|
justify-content: center;
|
|
15664
17057
|
gap: var(--spacing-sm);
|
|
15665
17058
|
height: 100%;
|
|
15666
17059
|
`;
|
|
15667
|
-
var segmentedControlLabelTextStyles =
|
|
17060
|
+
var segmentedControlLabelTextStyles = css76``;
|
|
15668
17061
|
|
|
15669
17062
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
15670
|
-
import { jsx as
|
|
17063
|
+
import { jsx as jsx97, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
|
|
15671
17064
|
var SegmentedControl = ({
|
|
15672
17065
|
name,
|
|
15673
17066
|
options,
|
|
@@ -15679,7 +17072,7 @@ var SegmentedControl = ({
|
|
|
15679
17072
|
size = "md",
|
|
15680
17073
|
...props
|
|
15681
17074
|
}) => {
|
|
15682
|
-
const onOptionChange =
|
|
17075
|
+
const onOptionChange = useCallback6(
|
|
15683
17076
|
(event) => {
|
|
15684
17077
|
if (event.target.checked) {
|
|
15685
17078
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -15687,18 +17080,18 @@ var SegmentedControl = ({
|
|
|
15687
17080
|
},
|
|
15688
17081
|
[options, onChange]
|
|
15689
17082
|
);
|
|
15690
|
-
const sizeStyles =
|
|
17083
|
+
const sizeStyles = useMemo4(() => {
|
|
15691
17084
|
const map = {
|
|
15692
|
-
sm:
|
|
15693
|
-
md:
|
|
15694
|
-
lg:
|
|
17085
|
+
sm: css77({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
17086
|
+
md: css77({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
17087
|
+
lg: css77({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
|
|
15695
17088
|
};
|
|
15696
17089
|
return map[size];
|
|
15697
17090
|
}, [size]);
|
|
15698
|
-
const isIconOnly =
|
|
17091
|
+
const isIconOnly = useMemo4(() => {
|
|
15699
17092
|
return options.every((option) => option.icon && !option.label);
|
|
15700
17093
|
}, [options]);
|
|
15701
|
-
return /* @__PURE__ */
|
|
17094
|
+
return /* @__PURE__ */ jsx97(
|
|
15702
17095
|
"div",
|
|
15703
17096
|
{
|
|
15704
17097
|
css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
|
|
@@ -15706,11 +17099,11 @@ var SegmentedControl = ({
|
|
|
15706
17099
|
children: options.map((option, index) => {
|
|
15707
17100
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
15708
17101
|
const isDisabled = disabled || option.disabled;
|
|
15709
|
-
return /* @__PURE__ */
|
|
17102
|
+
return /* @__PURE__ */ jsx97(
|
|
15710
17103
|
Tooltip,
|
|
15711
17104
|
{
|
|
15712
17105
|
title: isDisabled || !option.tooltip ? "" : option.tooltip,
|
|
15713
|
-
children: /* @__PURE__ */
|
|
17106
|
+
children: /* @__PURE__ */ jsx97("div", { css: segmentedControlItemStyles, "data-test-id": "container-segmented-control", children: /* @__PURE__ */ jsxs66(
|
|
15714
17107
|
"label",
|
|
15715
17108
|
{
|
|
15716
17109
|
css: [
|
|
@@ -15719,7 +17112,7 @@ var SegmentedControl = ({
|
|
|
15719
17112
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
15720
17113
|
],
|
|
15721
17114
|
children: [
|
|
15722
|
-
/* @__PURE__ */
|
|
17115
|
+
/* @__PURE__ */ jsx97(
|
|
15723
17116
|
"input",
|
|
15724
17117
|
{
|
|
15725
17118
|
css: segmentedControlInputStyles,
|
|
@@ -15731,10 +17124,10 @@ var SegmentedControl = ({
|
|
|
15731
17124
|
disabled: isDisabled
|
|
15732
17125
|
}
|
|
15733
17126
|
),
|
|
15734
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */
|
|
15735
|
-
/* @__PURE__ */
|
|
15736
|
-
!option.icon ? null : /* @__PURE__ */
|
|
15737
|
-
!text ? null : /* @__PURE__ */
|
|
17127
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx97(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
17128
|
+
/* @__PURE__ */ jsxs66("span", { css: segmentedControlLabelContentStyles, children: [
|
|
17129
|
+
!option.icon ? null : /* @__PURE__ */ jsx97(option.icon, { size: "1.5em" }),
|
|
17130
|
+
!text ? null : /* @__PURE__ */ jsx97("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
15738
17131
|
] })
|
|
15739
17132
|
]
|
|
15740
17133
|
}
|
|
@@ -15748,18 +17141,18 @@ var SegmentedControl = ({
|
|
|
15748
17141
|
};
|
|
15749
17142
|
|
|
15750
17143
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
15751
|
-
import { css as
|
|
17144
|
+
import { css as css78, keyframes as keyframes4 } from "@emotion/react";
|
|
15752
17145
|
var lightFadingOut = keyframes4`
|
|
15753
17146
|
from { opacity: 0.1; }
|
|
15754
17147
|
to { opacity: 0.025; }
|
|
15755
17148
|
`;
|
|
15756
|
-
var skeletonStyles =
|
|
17149
|
+
var skeletonStyles = css78`
|
|
15757
17150
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
15758
17151
|
background-color: var(--gray-900);
|
|
15759
17152
|
`;
|
|
15760
17153
|
|
|
15761
17154
|
// src/components/Skeleton/Skeleton.tsx
|
|
15762
|
-
import { jsx as
|
|
17155
|
+
import { jsx as jsx98 } from "@emotion/react/jsx-runtime";
|
|
15763
17156
|
var Skeleton = ({
|
|
15764
17157
|
width = "100%",
|
|
15765
17158
|
height = "1.25rem",
|
|
@@ -15767,7 +17160,7 @@ var Skeleton = ({
|
|
|
15767
17160
|
circle = false,
|
|
15768
17161
|
children,
|
|
15769
17162
|
...otherProps
|
|
15770
|
-
}) => /* @__PURE__ */
|
|
17163
|
+
}) => /* @__PURE__ */ jsx98(
|
|
15771
17164
|
"div",
|
|
15772
17165
|
{
|
|
15773
17166
|
css: [
|
|
@@ -15790,8 +17183,8 @@ var Skeleton = ({
|
|
|
15790
17183
|
import * as React19 from "react";
|
|
15791
17184
|
|
|
15792
17185
|
// src/components/Switch/Switch.styles.ts
|
|
15793
|
-
import { css as
|
|
15794
|
-
var SwitchInputContainer =
|
|
17186
|
+
import { css as css79 } from "@emotion/react";
|
|
17187
|
+
var SwitchInputContainer = css79`
|
|
15795
17188
|
cursor: pointer;
|
|
15796
17189
|
display: inline-block;
|
|
15797
17190
|
position: relative;
|
|
@@ -15800,7 +17193,7 @@ var SwitchInputContainer = css75`
|
|
|
15800
17193
|
vertical-align: middle;
|
|
15801
17194
|
user-select: none;
|
|
15802
17195
|
`;
|
|
15803
|
-
var SwitchInput =
|
|
17196
|
+
var SwitchInput = css79`
|
|
15804
17197
|
appearance: none;
|
|
15805
17198
|
border-radius: var(--rounded-full);
|
|
15806
17199
|
background-color: var(--white);
|
|
@@ -15838,7 +17231,7 @@ var SwitchInput = css75`
|
|
|
15838
17231
|
cursor: not-allowed;
|
|
15839
17232
|
}
|
|
15840
17233
|
`;
|
|
15841
|
-
var SwitchInputDisabled =
|
|
17234
|
+
var SwitchInputDisabled = css79`
|
|
15842
17235
|
opacity: var(--opacity-50);
|
|
15843
17236
|
cursor: not-allowed;
|
|
15844
17237
|
|
|
@@ -15846,7 +17239,7 @@ var SwitchInputDisabled = css75`
|
|
|
15846
17239
|
cursor: not-allowed;
|
|
15847
17240
|
}
|
|
15848
17241
|
`;
|
|
15849
|
-
var SwitchInputLabel =
|
|
17242
|
+
var SwitchInputLabel = css79`
|
|
15850
17243
|
align-items: center;
|
|
15851
17244
|
color: var(--brand-secondary-1);
|
|
15852
17245
|
display: inline-flex;
|
|
@@ -15868,26 +17261,26 @@ var SwitchInputLabel = css75`
|
|
|
15868
17261
|
top: 0;
|
|
15869
17262
|
}
|
|
15870
17263
|
`;
|
|
15871
|
-
var SwitchText =
|
|
17264
|
+
var SwitchText = css79`
|
|
15872
17265
|
color: var(--gray-500);
|
|
15873
17266
|
font-size: var(--fs-sm);
|
|
15874
17267
|
padding-inline: var(--spacing-2xl) 0;
|
|
15875
17268
|
`;
|
|
15876
17269
|
|
|
15877
17270
|
// src/components/Switch/Switch.tsx
|
|
15878
|
-
import { Fragment as
|
|
17271
|
+
import { Fragment as Fragment17, jsx as jsx99, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
|
|
15879
17272
|
var Switch = React19.forwardRef(
|
|
15880
17273
|
({ label, infoText, toggleText, children, ...inputProps }, ref) => {
|
|
15881
17274
|
let additionalText = infoText;
|
|
15882
17275
|
if (infoText && toggleText) {
|
|
15883
17276
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
15884
17277
|
}
|
|
15885
|
-
return /* @__PURE__ */
|
|
15886
|
-
/* @__PURE__ */
|
|
15887
|
-
/* @__PURE__ */
|
|
15888
|
-
/* @__PURE__ */
|
|
17278
|
+
return /* @__PURE__ */ jsxs67(Fragment17, { children: [
|
|
17279
|
+
/* @__PURE__ */ jsxs67("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
|
|
17280
|
+
/* @__PURE__ */ jsx99("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
|
|
17281
|
+
/* @__PURE__ */ jsx99("span", { css: SwitchInputLabel, children: label })
|
|
15889
17282
|
] }),
|
|
15890
|
-
additionalText ? /* @__PURE__ */
|
|
17283
|
+
additionalText ? /* @__PURE__ */ jsx99("p", { css: SwitchText, children: additionalText }) : null,
|
|
15891
17284
|
children
|
|
15892
17285
|
] });
|
|
15893
17286
|
}
|
|
@@ -15897,69 +17290,69 @@ var Switch = React19.forwardRef(
|
|
|
15897
17290
|
import * as React20 from "react";
|
|
15898
17291
|
|
|
15899
17292
|
// src/components/Table/Table.styles.ts
|
|
15900
|
-
import { css as
|
|
15901
|
-
var table =
|
|
17293
|
+
import { css as css80 } from "@emotion/react";
|
|
17294
|
+
var table = css80`
|
|
15902
17295
|
border-bottom: 1px solid var(--gray-400);
|
|
15903
17296
|
border-collapse: collapse;
|
|
15904
17297
|
min-width: 100%;
|
|
15905
17298
|
table-layout: auto;
|
|
15906
17299
|
`;
|
|
15907
|
-
var tableHead =
|
|
17300
|
+
var tableHead = css80`
|
|
15908
17301
|
background: var(--gray-100);
|
|
15909
17302
|
color: var(--brand-secondary-1);
|
|
15910
17303
|
text-align: left;
|
|
15911
17304
|
`;
|
|
15912
|
-
var tableRow =
|
|
17305
|
+
var tableRow = css80`
|
|
15913
17306
|
border-bottom: 1px solid var(--gray-200);
|
|
15914
17307
|
`;
|
|
15915
|
-
var tableCellHead =
|
|
17308
|
+
var tableCellHead = css80`
|
|
15916
17309
|
font-size: var(--fs-sm);
|
|
15917
17310
|
padding: var(--spacing-base) var(--spacing-md);
|
|
15918
17311
|
text-transform: uppercase;
|
|
15919
17312
|
font-weight: var(--fw-bold);
|
|
15920
17313
|
`;
|
|
15921
|
-
var tableCellData =
|
|
17314
|
+
var tableCellData = css80`
|
|
15922
17315
|
padding: var(--spacing-base) var(--spacing-md);
|
|
15923
17316
|
`;
|
|
15924
17317
|
|
|
15925
17318
|
// src/components/Table/Table.tsx
|
|
15926
|
-
import { jsx as
|
|
17319
|
+
import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
|
|
15927
17320
|
var Table = React20.forwardRef(({ children, ...otherProps }, ref) => {
|
|
15928
|
-
return /* @__PURE__ */
|
|
17321
|
+
return /* @__PURE__ */ jsx100("table", { ref, css: table, ...otherProps, children });
|
|
15929
17322
|
});
|
|
15930
17323
|
var TableHead = React20.forwardRef(
|
|
15931
17324
|
({ children, ...otherProps }, ref) => {
|
|
15932
|
-
return /* @__PURE__ */
|
|
17325
|
+
return /* @__PURE__ */ jsx100("thead", { ref, css: tableHead, ...otherProps, children });
|
|
15933
17326
|
}
|
|
15934
17327
|
);
|
|
15935
17328
|
var TableBody = React20.forwardRef(
|
|
15936
17329
|
({ children, ...otherProps }, ref) => {
|
|
15937
|
-
return /* @__PURE__ */
|
|
17330
|
+
return /* @__PURE__ */ jsx100("tbody", { ref, ...otherProps, children });
|
|
15938
17331
|
}
|
|
15939
17332
|
);
|
|
15940
17333
|
var TableFoot = React20.forwardRef(
|
|
15941
17334
|
({ children, ...otherProps }, ref) => {
|
|
15942
|
-
return /* @__PURE__ */
|
|
17335
|
+
return /* @__PURE__ */ jsx100("tfoot", { ref, ...otherProps, children });
|
|
15943
17336
|
}
|
|
15944
17337
|
);
|
|
15945
17338
|
var TableRow = React20.forwardRef(
|
|
15946
17339
|
({ children, ...otherProps }, ref) => {
|
|
15947
|
-
return /* @__PURE__ */
|
|
17340
|
+
return /* @__PURE__ */ jsx100("tr", { ref, css: tableRow, ...otherProps, children });
|
|
15948
17341
|
}
|
|
15949
17342
|
);
|
|
15950
17343
|
var TableCellHead = React20.forwardRef(
|
|
15951
17344
|
({ children, ...otherProps }, ref) => {
|
|
15952
|
-
return /* @__PURE__ */
|
|
17345
|
+
return /* @__PURE__ */ jsx100("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
15953
17346
|
}
|
|
15954
17347
|
);
|
|
15955
17348
|
var TableCellData = React20.forwardRef(
|
|
15956
17349
|
({ children, ...otherProps }, ref) => {
|
|
15957
|
-
return /* @__PURE__ */
|
|
17350
|
+
return /* @__PURE__ */ jsx100("td", { ref, css: tableCellData, ...otherProps, children });
|
|
15958
17351
|
}
|
|
15959
17352
|
);
|
|
15960
17353
|
|
|
15961
17354
|
// src/components/Tabs/Tabs.tsx
|
|
15962
|
-
import { createContext as createContext6, useContext as useContext7, useEffect as
|
|
17355
|
+
import { createContext as createContext6, useContext as useContext7, useEffect as useEffect14, useMemo as useMemo5 } from "react";
|
|
15963
17356
|
import {
|
|
15964
17357
|
Tab as ReakitTab,
|
|
15965
17358
|
TabList as ReakitTabList,
|
|
@@ -15968,8 +17361,8 @@ import {
|
|
|
15968
17361
|
} from "reakit/Tab";
|
|
15969
17362
|
|
|
15970
17363
|
// src/components/Tabs/Tabs.styles.ts
|
|
15971
|
-
import { css as
|
|
15972
|
-
var tabButtonStyles =
|
|
17364
|
+
import { css as css81 } from "@emotion/react";
|
|
17365
|
+
var tabButtonStyles = css81`
|
|
15973
17366
|
align-items: center;
|
|
15974
17367
|
border: 0;
|
|
15975
17368
|
height: 2.5rem;
|
|
@@ -15986,14 +17379,14 @@ var tabButtonStyles = css77`
|
|
|
15986
17379
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
15987
17380
|
}
|
|
15988
17381
|
`;
|
|
15989
|
-
var tabButtonGroupStyles =
|
|
17382
|
+
var tabButtonGroupStyles = css81`
|
|
15990
17383
|
display: flex;
|
|
15991
17384
|
gap: var(--spacing-base);
|
|
15992
17385
|
border-bottom: 1px solid var(--gray-300);
|
|
15993
17386
|
`;
|
|
15994
17387
|
|
|
15995
17388
|
// src/components/Tabs/Tabs.tsx
|
|
15996
|
-
import { jsx as
|
|
17389
|
+
import { jsx as jsx101 } from "@emotion/react/jsx-runtime";
|
|
15997
17390
|
var CurrentTabContext = createContext6(null);
|
|
15998
17391
|
var useCurrentTab = () => {
|
|
15999
17392
|
const context = useContext7(CurrentTabContext);
|
|
@@ -16003,13 +17396,13 @@ var useCurrentTab = () => {
|
|
|
16003
17396
|
return context;
|
|
16004
17397
|
};
|
|
16005
17398
|
var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
|
|
16006
|
-
const selected =
|
|
17399
|
+
const selected = useMemo5(() => {
|
|
16007
17400
|
if (selectedId)
|
|
16008
17401
|
return selectedId;
|
|
16009
17402
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
16010
17403
|
}, [selectedId, useHashForState]);
|
|
16011
17404
|
const tab = useTabState({ ...props, selectedId: selected });
|
|
16012
|
-
|
|
17405
|
+
useEffect14(() => {
|
|
16013
17406
|
var _a;
|
|
16014
17407
|
const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
|
|
16015
17408
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -16017,29 +17410,29 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
|
|
|
16017
17410
|
window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
|
|
16018
17411
|
}
|
|
16019
17412
|
}, [tab.selectedId, onSelectedIdChange, useHashForState]);
|
|
16020
|
-
|
|
17413
|
+
useEffect14(() => {
|
|
16021
17414
|
if (selected && selected !== tab.selectedId) {
|
|
16022
17415
|
tab.setSelectedId(selected);
|
|
16023
17416
|
}
|
|
16024
17417
|
}, [selected]);
|
|
16025
|
-
return /* @__PURE__ */
|
|
17418
|
+
return /* @__PURE__ */ jsx101(CurrentTabContext.Provider, { value: tab, children });
|
|
16026
17419
|
};
|
|
16027
17420
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
16028
17421
|
const currentTab = useCurrentTab();
|
|
16029
|
-
return /* @__PURE__ */
|
|
17422
|
+
return /* @__PURE__ */ jsx101(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
|
|
16030
17423
|
};
|
|
16031
17424
|
var TabButton = ({ children, id, ...props }) => {
|
|
16032
17425
|
const currentTab = useCurrentTab();
|
|
16033
|
-
return /* @__PURE__ */
|
|
17426
|
+
return /* @__PURE__ */ jsx101(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
|
|
16034
17427
|
};
|
|
16035
17428
|
var TabContent = ({ children, ...props }) => {
|
|
16036
17429
|
const currentTab = useCurrentTab();
|
|
16037
|
-
return /* @__PURE__ */
|
|
17430
|
+
return /* @__PURE__ */ jsx101(ReakitTabPanel, { ...props, ...currentTab, children });
|
|
16038
17431
|
};
|
|
16039
17432
|
|
|
16040
17433
|
// src/components/Validation/StatusBullet.styles.ts
|
|
16041
|
-
import { css as
|
|
16042
|
-
var StatusBulletContainer =
|
|
17434
|
+
import { css as css82 } from "@emotion/react";
|
|
17435
|
+
var StatusBulletContainer = css82`
|
|
16043
17436
|
align-items: center;
|
|
16044
17437
|
align-self: center;
|
|
16045
17438
|
color: var(--gray-500);
|
|
@@ -16056,51 +17449,51 @@ var StatusBulletContainer = css78`
|
|
|
16056
17449
|
display: block;
|
|
16057
17450
|
}
|
|
16058
17451
|
`;
|
|
16059
|
-
var StatusBulletBase =
|
|
17452
|
+
var StatusBulletBase = css82`
|
|
16060
17453
|
font-size: var(--fs-sm);
|
|
16061
17454
|
&:before {
|
|
16062
17455
|
width: var(--fs-xs);
|
|
16063
17456
|
height: var(--fs-xs);
|
|
16064
17457
|
}
|
|
16065
17458
|
`;
|
|
16066
|
-
var StatusBulletSmall =
|
|
17459
|
+
var StatusBulletSmall = css82`
|
|
16067
17460
|
font-size: var(--fs-xs);
|
|
16068
17461
|
&:before {
|
|
16069
17462
|
width: var(--fs-xxs);
|
|
16070
17463
|
height: var(--fs-xxs);
|
|
16071
17464
|
}
|
|
16072
17465
|
`;
|
|
16073
|
-
var StatusDraft =
|
|
17466
|
+
var StatusDraft = css82`
|
|
16074
17467
|
&:before {
|
|
16075
17468
|
background: var(--white);
|
|
16076
17469
|
box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
|
|
16077
17470
|
}
|
|
16078
17471
|
`;
|
|
16079
|
-
var StatusModified =
|
|
17472
|
+
var StatusModified = css82`
|
|
16080
17473
|
&:before {
|
|
16081
17474
|
background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
|
|
16082
17475
|
box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
|
|
16083
17476
|
}
|
|
16084
17477
|
`;
|
|
16085
|
-
var StatusError =
|
|
17478
|
+
var StatusError = css82`
|
|
16086
17479
|
color: var(--error);
|
|
16087
17480
|
&:before {
|
|
16088
17481
|
background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
|
|
16089
17482
|
}
|
|
16090
17483
|
`;
|
|
16091
|
-
var StatusPublished =
|
|
17484
|
+
var StatusPublished = css82`
|
|
16092
17485
|
&:before {
|
|
16093
17486
|
background: var(--primary-action-default);
|
|
16094
17487
|
}
|
|
16095
17488
|
`;
|
|
16096
|
-
var StatusOrphan =
|
|
17489
|
+
var StatusOrphan = css82`
|
|
16097
17490
|
&:before {
|
|
16098
17491
|
background: var(--brand-secondary-5);
|
|
16099
17492
|
}
|
|
16100
17493
|
`;
|
|
16101
17494
|
|
|
16102
17495
|
// src/components/Validation/StatusBullet.tsx
|
|
16103
|
-
import { jsx as
|
|
17496
|
+
import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
|
|
16104
17497
|
var StatusBullet = ({
|
|
16105
17498
|
status,
|
|
16106
17499
|
hideText = false,
|
|
@@ -16117,7 +17510,7 @@ var StatusBullet = ({
|
|
|
16117
17510
|
Draft: StatusDraft
|
|
16118
17511
|
};
|
|
16119
17512
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
16120
|
-
return /* @__PURE__ */
|
|
17513
|
+
return /* @__PURE__ */ jsx102(
|
|
16121
17514
|
"span",
|
|
16122
17515
|
{
|
|
16123
17516
|
role: "status",
|
|
@@ -16181,6 +17574,7 @@ export {
|
|
|
16181
17574
|
LimitsBar,
|
|
16182
17575
|
Link,
|
|
16183
17576
|
LinkList,
|
|
17577
|
+
LinkNode,
|
|
16184
17578
|
LinkWithRef,
|
|
16185
17579
|
LoadingCardSkeleton2 as LoadingCardSkeleton,
|
|
16186
17580
|
LoadingIcon,
|
|
@@ -16294,6 +17688,9 @@ export {
|
|
|
16294
17688
|
queryStringIcon,
|
|
16295
17689
|
rectangleRoundedIcon,
|
|
16296
17690
|
replaceUnderscoreInString,
|
|
17691
|
+
richTextBuiltInElements,
|
|
17692
|
+
richTextBuiltInFormats,
|
|
17693
|
+
richTextIsValueConsideredEmpty,
|
|
16297
17694
|
ripple,
|
|
16298
17695
|
scrollbarStyles,
|
|
16299
17696
|
settings,
|