@uniformdev/design-system 19.178.2-alpha.25 → 19.179.2-alpha.22
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 +331 -1118
- package/dist/index.d.mts +327 -368
- package/dist/index.d.ts +327 -368
- package/dist/index.js +343 -1107
- package/package.json +9 -10
package/dist/esm/index.js
CHANGED
|
@@ -863,7 +863,8 @@ var button = css8`
|
|
|
863
863
|
cursor: pointer;
|
|
864
864
|
display: inline-flex;
|
|
865
865
|
font-weight: var(--fw-medium);
|
|
866
|
-
transition:
|
|
866
|
+
transition:
|
|
867
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
867
868
|
border-color var(--duration-fast) var(--timing-ease-out);
|
|
868
869
|
max-width: max-content;
|
|
869
870
|
gap: var(--spacing-sm);
|
|
@@ -1641,9 +1642,11 @@ var input = (whiteSpaceWrap) => css12`
|
|
|
1641
1642
|
width: 100%;
|
|
1642
1643
|
position: relative;
|
|
1643
1644
|
white-space: ${whiteSpaceWrap};
|
|
1644
|
-
transition:
|
|
1645
|
+
transition:
|
|
1646
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
1645
1647
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
1646
|
-
color var(--duration-fast) var(--timing-ease-out),
|
|
1648
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
1649
|
+
box-shadow var(--duration-fast) var(--timing-ease-out);
|
|
1647
1650
|
|
|
1648
1651
|
&::placeholder {
|
|
1649
1652
|
color: var(--gray-400);
|
|
@@ -1763,7 +1766,8 @@ var toggleInput = css12`
|
|
|
1763
1766
|
background: var(--white);
|
|
1764
1767
|
width: var(--spacing-md);
|
|
1765
1768
|
height: var(--spacing-md);
|
|
1766
|
-
transition:
|
|
1769
|
+
transition:
|
|
1770
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
1767
1771
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
1768
1772
|
color var(--duration-fast) var(--timing-ease-out);
|
|
1769
1773
|
|
|
@@ -2002,7 +2006,9 @@ var addButton = css15`
|
|
|
2002
2006
|
cursor: pointer;
|
|
2003
2007
|
display: inline-flex;
|
|
2004
2008
|
padding: 0;
|
|
2005
|
-
transition:
|
|
2009
|
+
transition:
|
|
2010
|
+
transform var(--duration-fast) var(--timing-ease-out),
|
|
2011
|
+
background var(--duration-slow);
|
|
2006
2012
|
transform: scale(0.95);
|
|
2007
2013
|
width: var(--max-size);
|
|
2008
2014
|
height: var(--max-size);
|
|
@@ -3119,10 +3125,37 @@ var customIcons = {
|
|
|
3119
3125
|
|
|
3120
3126
|
// src/components/Icons/systemIcons.tsx
|
|
3121
3127
|
import { GenIcon as GenIcon2 } from "@react-icons/all-files";
|
|
3128
|
+
import { CgGlobeAlt } from "@react-icons/all-files/cg/CgGlobeAlt";
|
|
3122
3129
|
import { CgList } from "@react-icons/all-files/cg/CgList";
|
|
3123
3130
|
import { CgPen } from "@react-icons/all-files/cg/CgPen";
|
|
3131
|
+
import { TbBinaryTree2 } from "@react-icons/all-files/tb/TbBinaryTree2";
|
|
3124
3132
|
import { TbBox } from "@react-icons/all-files/tb/TbBox";
|
|
3125
3133
|
var uniformComponentIcon = TbBox;
|
|
3134
|
+
var uniformConditionalValuesIcon = TbBinaryTree2;
|
|
3135
|
+
var uniformAiIcon = customIcons["magic-wand"];
|
|
3136
|
+
var uniformLocaleIcon = CgGlobeAlt;
|
|
3137
|
+
var uniformLocaleDisabledIcon = GenIcon2({
|
|
3138
|
+
tag: "svg",
|
|
3139
|
+
attr: { fill: "currentColor", viewBox: "0 0 24 24", role: "img" },
|
|
3140
|
+
child: [
|
|
3141
|
+
{
|
|
3142
|
+
tag: "path",
|
|
3143
|
+
attr: {
|
|
3144
|
+
fillRule: "evenodd",
|
|
3145
|
+
d: "M20.123 15.88A9 9 0 0 0 8.12 3.877l2.787 2.787c.03-.073.06-.145.092-.216.294-.661.592-1.073.823-1.292a.988.988 0 0 1 .178-.14.991.991 0 0 1 .178.14c.23.22.528.63.823 1.292.366.825.665 1.901.838 3.148l3.593 3.594a9.739 9.739 0 0 0 1.548-.665 6.968 6.968 0 0 1-.385 1.827l1.528 1.528ZM14.805 5.585c.691 1.53 1.136 3.62 1.19 5.945a9.939 9.939 0 0 0 1.557-.53c.6-.266.994-.536 1.226-.756a7.016 7.016 0 0 0-3.973-4.66ZM3.877 8.12A9 9 0 0 0 15.88 20.123l-2.787-2.787a7.89 7.89 0 0 1-.092.216c-.294.661-.593 1.073-.823 1.292a.996.996 0 0 1-.178.14.99.99 0 0 1-.178-.14c-.23-.22-.529-.63-.823-1.292-.367-.825-.666-1.901-.838-3.148L6.967 11.21a8.334 8.334 0 0 1-.519-.21c-.6-.266-.995-.536-1.226-.756a6.95 6.95 0 0 1 .183-.596L3.877 8.12Zm5.317 10.295c-.577-1.278-.982-2.947-1.131-4.817-1.183-.256-2.22-.624-3.044-1.073a7.004 7.004 0 0 0 4.175 5.89Z",
|
|
3146
|
+
clipRule: "evenodd"
|
|
3147
|
+
},
|
|
3148
|
+
child: []
|
|
3149
|
+
},
|
|
3150
|
+
{
|
|
3151
|
+
tag: "path",
|
|
3152
|
+
attr: {
|
|
3153
|
+
d: "M20.031 20.031a1.5 1.5 0 0 1-2.121 0L3.06 5.182a1.5 1.5 0 0 1 2.122-2.121L20.03 17.91a1.5 1.5 0 0 1 0 2.121Z"
|
|
3154
|
+
},
|
|
3155
|
+
child: []
|
|
3156
|
+
}
|
|
3157
|
+
]
|
|
3158
|
+
});
|
|
3126
3159
|
var uniformComponentPatternIcon = GenIcon2({
|
|
3127
3160
|
tag: "svg",
|
|
3128
3161
|
attr: {
|
|
@@ -12212,7 +12245,8 @@ var buttonStyle = (bgColor) => css24`
|
|
|
12212
12245
|
display: block;
|
|
12213
12246
|
font-size: var(--fs-sm);
|
|
12214
12247
|
line-height: 1.5;
|
|
12215
|
-
transition:
|
|
12248
|
+
transition:
|
|
12249
|
+
background-color var(--duration-fast) var(--timing-ease-out),
|
|
12216
12250
|
outline var(--duration-fast) var(--timing-ease-out);
|
|
12217
12251
|
outline: 1px solid transparent;
|
|
12218
12252
|
|
|
@@ -12449,7 +12483,6 @@ var Menu = React7.forwardRef(function Menu2({
|
|
|
12449
12483
|
menuItemsContainerCssClasses,
|
|
12450
12484
|
testId,
|
|
12451
12485
|
maxMenuHeight,
|
|
12452
|
-
portalElement,
|
|
12453
12486
|
...props
|
|
12454
12487
|
}, ref) {
|
|
12455
12488
|
const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
|
|
@@ -12460,7 +12493,6 @@ var Menu = React7.forwardRef(function Menu2({
|
|
|
12460
12493
|
BaseMenu,
|
|
12461
12494
|
{
|
|
12462
12495
|
portal: !withoutPortal,
|
|
12463
|
-
portalElement,
|
|
12464
12496
|
unmountOnHide: true,
|
|
12465
12497
|
gutter: 0,
|
|
12466
12498
|
shift: menu.parent ? -4 : 0,
|
|
@@ -12626,7 +12658,8 @@ var CheckboxWithInfoInput = css29`
|
|
|
12626
12658
|
border-radius: var(--rounded-sm);
|
|
12627
12659
|
width: calc(var(--spacing-base) - 2px);
|
|
12628
12660
|
height: calc(var(--spacing-base) - 2px);
|
|
12629
|
-
transition:
|
|
12661
|
+
transition:
|
|
12662
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
12630
12663
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
12631
12664
|
color var(--duration-fast) var(--timing-ease-out);
|
|
12632
12665
|
|
|
@@ -13861,7 +13894,8 @@ var ButtonWithMenuContainer = css38`
|
|
|
13861
13894
|
display: inline-flex;
|
|
13862
13895
|
position: relative;
|
|
13863
13896
|
min-height: 24px;
|
|
13864
|
-
transition:
|
|
13897
|
+
transition:
|
|
13898
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
13865
13899
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
13866
13900
|
background-color var(--duration-fast) var(--timing-ease-out);
|
|
13867
13901
|
|
|
@@ -14842,7 +14876,8 @@ import { css as css48 } from "@emotion/react";
|
|
|
14842
14876
|
var ChipContainer = css48`
|
|
14843
14877
|
border-radius: var(--rounded-full);
|
|
14844
14878
|
display: inline-flex;
|
|
14845
|
-
transition:
|
|
14879
|
+
transition:
|
|
14880
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
14846
14881
|
color var(--duration-fast) var(--timing-ease-out);
|
|
14847
14882
|
position: relative;
|
|
14848
14883
|
|
|
@@ -15118,7 +15153,8 @@ var MultilineChipContainer = css49`
|
|
|
15118
15153
|
--gradient-rgb: var(--accent-primary-dark-rgb);
|
|
15119
15154
|
--gradient-rgb-hover: var(--accent-primary-dark-hover-rgb);
|
|
15120
15155
|
border-radius: var(--rounded-full);
|
|
15121
|
-
background:
|
|
15156
|
+
background:
|
|
15157
|
+
radial-gradient(
|
|
15122
15158
|
farthest-side at 100%,
|
|
15123
15159
|
rgba(var(--gradient-rgb), 0) 0%,
|
|
15124
15160
|
rgba(var(--gradient-rgb), 0.2) 80%,
|
|
@@ -15151,7 +15187,8 @@ var MultilineChipContainer = css49`
|
|
|
15151
15187
|
border: none;
|
|
15152
15188
|
&:hover,
|
|
15153
15189
|
&:focus {
|
|
15154
|
-
background:
|
|
15190
|
+
background:
|
|
15191
|
+
radial-gradient(
|
|
15155
15192
|
farthest-side at 100%,
|
|
15156
15193
|
rgba(var(--gradient-rgb-hover), 0) 0%,
|
|
15157
15194
|
rgba(var(--gradient-rgb-hover), 0.2) 80%,
|
|
@@ -15204,17 +15241,19 @@ var MultilineChip = ({ children, onClick, ...props }) => {
|
|
|
15204
15241
|
|
|
15205
15242
|
// src/components/Counter/Counter.styles.ts
|
|
15206
15243
|
import { css as css50 } from "@emotion/react";
|
|
15207
|
-
var counterContainer = (bgColor) => css50`
|
|
15244
|
+
var counterContainer = (bgColor, hasIcon) => css50`
|
|
15208
15245
|
align-items: center;
|
|
15209
15246
|
border-radius: var(--rounded-full);
|
|
15210
15247
|
border: 1px solid var(--gray-300);
|
|
15211
15248
|
background: ${bgColor};
|
|
15212
|
-
color: var(--typography-base);
|
|
15249
|
+
color: ${bgColor === "var(--accent-dark)" ? "white" : "var(--typography-base)"};
|
|
15213
15250
|
display: inline-flex;
|
|
15214
|
-
|
|
15251
|
+
gap: var(--spacing-xs);
|
|
15252
|
+
font-size: var(--fs-xs);
|
|
15215
15253
|
font-weight: var(--fw-regular);
|
|
15216
15254
|
justify-content: center;
|
|
15217
|
-
|
|
15255
|
+
padding: 4px;
|
|
15256
|
+
width: ${hasIcon ? "auto" : "var(--spacing-base)"};
|
|
15218
15257
|
height: var(--spacing-base);
|
|
15219
15258
|
`;
|
|
15220
15259
|
var counterZeroValue = css50`
|
|
@@ -15238,7 +15277,13 @@ var counterIcon = css50`
|
|
|
15238
15277
|
|
|
15239
15278
|
// src/components/Counter/Counter.tsx
|
|
15240
15279
|
import { jsx as jsx63, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
|
|
15241
|
-
var Counter = ({
|
|
15280
|
+
var Counter = ({
|
|
15281
|
+
count,
|
|
15282
|
+
bgColor = "transparent",
|
|
15283
|
+
icon,
|
|
15284
|
+
iconColor = "auto",
|
|
15285
|
+
...props
|
|
15286
|
+
}) => {
|
|
15242
15287
|
if (typeof count === "undefined") {
|
|
15243
15288
|
return null;
|
|
15244
15289
|
}
|
|
@@ -15247,7 +15292,19 @@ var Counter = ({ count, bgColor = "transparent", ...props }) => {
|
|
|
15247
15292
|
/* @__PURE__ */ jsx63(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
|
|
15248
15293
|
] }) : count;
|
|
15249
15294
|
const formatCount = count === 0 ? /* @__PURE__ */ jsx63("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
|
|
15250
|
-
return /* @__PURE__ */
|
|
15295
|
+
return /* @__PURE__ */ jsxs39("div", { css: counterContainer(bgColor, Boolean(icon)), ...props, children: [
|
|
15296
|
+
icon ? /* @__PURE__ */ jsx63(
|
|
15297
|
+
"span",
|
|
15298
|
+
{
|
|
15299
|
+
css: [
|
|
15300
|
+
iconColor ? functionalColors : void 0,
|
|
15301
|
+
{ color: iconColor ? iconColor === "red" ? "var(--brand-secondary-5)" : iconColor : "inherit" }
|
|
15302
|
+
],
|
|
15303
|
+
children: /* @__PURE__ */ jsx63(Icon, { icon, iconColor: "currentColor", size: "0.6rem" })
|
|
15304
|
+
}
|
|
15305
|
+
) : null,
|
|
15306
|
+
/* @__PURE__ */ jsx63("span", { children: formatCount })
|
|
15307
|
+
] });
|
|
15251
15308
|
};
|
|
15252
15309
|
|
|
15253
15310
|
// src/components/DashedBox/DashedBox.styles.ts
|
|
@@ -19274,7 +19331,8 @@ var inputIconBtn = css88`
|
|
|
19274
19331
|
color: var(--gray-500);
|
|
19275
19332
|
background: none;
|
|
19276
19333
|
display: flex;
|
|
19277
|
-
transition:
|
|
19334
|
+
transition:
|
|
19335
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
19278
19336
|
color var(--duration-fast) var(--timing-ease-out);
|
|
19279
19337
|
|
|
19280
19338
|
&:hover,
|
|
@@ -19448,7 +19506,8 @@ var toggleInput2 = css89`
|
|
|
19448
19506
|
background: var(--white);
|
|
19449
19507
|
width: var(--spacing-base);
|
|
19450
19508
|
height: var(--spacing-base);
|
|
19451
|
-
transition:
|
|
19509
|
+
transition:
|
|
19510
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
19452
19511
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
19453
19512
|
color var(--duration-fast) var(--timing-ease-out);
|
|
19454
19513
|
font-size: var(--fs-sm);
|
|
@@ -19548,7 +19607,8 @@ var dataConnectButton = css89`
|
|
|
19548
19607
|
display: flex;
|
|
19549
19608
|
padding: var(--spacing-sm);
|
|
19550
19609
|
position: relative;
|
|
19551
|
-
transition:
|
|
19610
|
+
transition:
|
|
19611
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
19552
19612
|
outline-color var(--duration-fast) var(--timing-ease-out),
|
|
19553
19613
|
color var(--duration-fast) var(--timing-ease-out);
|
|
19554
19614
|
width: 100%;
|
|
@@ -20247,7 +20307,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
20247
20307
|
};
|
|
20248
20308
|
|
|
20249
20309
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
20250
|
-
import { css as
|
|
20310
|
+
import { css as css98 } from "@emotion/react";
|
|
20251
20311
|
import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
|
|
20252
20312
|
import {
|
|
20253
20313
|
CODE,
|
|
@@ -20259,16 +20319,14 @@ import {
|
|
|
20259
20319
|
UNORDERED_LIST
|
|
20260
20320
|
} from "@lexical/markdown";
|
|
20261
20321
|
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
|
20262
|
-
import { useLexicalComposerContext as
|
|
20322
|
+
import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
|
|
20263
20323
|
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
|
20264
20324
|
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
|
|
20265
20325
|
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
|
|
20266
20326
|
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
|
|
20267
20327
|
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
|
|
20268
20328
|
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
|
20269
|
-
import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
|
|
20270
20329
|
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
|
|
20271
|
-
import { TableCellNode as TableCellNode2, TableNode, TableRowNode as TableRowNode2 } from "@lexical/table";
|
|
20272
20330
|
|
|
20273
20331
|
// ../richtext/dist/index.mjs
|
|
20274
20332
|
var richTextBuiltInElements = [
|
|
@@ -20316,10 +20374,6 @@ var richTextBuiltInElements = [
|
|
|
20316
20374
|
label: "Code Block",
|
|
20317
20375
|
type: "code"
|
|
20318
20376
|
},
|
|
20319
|
-
{
|
|
20320
|
-
label: "Table",
|
|
20321
|
-
type: "table"
|
|
20322
|
-
},
|
|
20323
20377
|
{
|
|
20324
20378
|
label: "Dynamic Token",
|
|
20325
20379
|
type: "variable"
|
|
@@ -20367,7 +20421,7 @@ var getLabelForElement = (type) => {
|
|
|
20367
20421
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
20368
20422
|
import { deepEqual as deepEqual2 } from "fast-equals";
|
|
20369
20423
|
import { ParagraphNode as ParagraphNode2 } from "lexical";
|
|
20370
|
-
import { useEffect as
|
|
20424
|
+
import { useEffect as useEffect21, useRef as useRef12 } from "react";
|
|
20371
20425
|
|
|
20372
20426
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
20373
20427
|
import { CodeNode } from "@lexical/code";
|
|
@@ -20582,46 +20636,6 @@ var codeElement = css95`
|
|
|
20582
20636
|
margin-bottom: 0;
|
|
20583
20637
|
}
|
|
20584
20638
|
`;
|
|
20585
|
-
var tableElement = css95`
|
|
20586
|
-
border-collapse: collapse;
|
|
20587
|
-
border-spacing: 0;
|
|
20588
|
-
border-color: var(--gray-300);
|
|
20589
|
-
border-width: 1px;
|
|
20590
|
-
border-style: solid;
|
|
20591
|
-
margin-bottom: var(--spacing-base);
|
|
20592
|
-
margin-top: 0;
|
|
20593
|
-
|
|
20594
|
-
&:last-child {
|
|
20595
|
-
margin-bottom: 0;
|
|
20596
|
-
}
|
|
20597
|
-
`;
|
|
20598
|
-
var tableCellElement = css95`
|
|
20599
|
-
background-color: var(--white);
|
|
20600
|
-
border-color: var(--gray-300);
|
|
20601
|
-
border-style: solid;
|
|
20602
|
-
border-width: 1px;
|
|
20603
|
-
box-sizing: unset;
|
|
20604
|
-
min-width: 2rem;
|
|
20605
|
-
outline: none;
|
|
20606
|
-
padding: var(--spacing-sm);
|
|
20607
|
-
text-align: start;
|
|
20608
|
-
vertical-align: top;
|
|
20609
|
-
width: 7rem;
|
|
20610
|
-
`;
|
|
20611
|
-
var tableHeaderElement = css95`
|
|
20612
|
-
background-color: var(--gray-100);
|
|
20613
|
-
border-color: var(--gray-300);
|
|
20614
|
-
border-style: solid;
|
|
20615
|
-
border-width: 1px;
|
|
20616
|
-
box-sizing: unset;
|
|
20617
|
-
font-weight: normal;
|
|
20618
|
-
min-width: 2rem;
|
|
20619
|
-
outline: none;
|
|
20620
|
-
padding: var(--spacing-sm);
|
|
20621
|
-
text-align: start;
|
|
20622
|
-
vertical-align: top;
|
|
20623
|
-
width: 7rem;
|
|
20624
|
-
`;
|
|
20625
20639
|
|
|
20626
20640
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
20627
20641
|
import { css as css96 } from "@emotion/react";
|
|
@@ -20977,11 +20991,7 @@ var linkPopoverAnchor = css96`
|
|
|
20977
20991
|
${link}
|
|
20978
20992
|
${linkColorDefault}
|
|
20979
20993
|
`;
|
|
20980
|
-
function LinkNodePlugin({
|
|
20981
|
-
onConnectLink,
|
|
20982
|
-
getBoundPath,
|
|
20983
|
-
positioningAnchorEl
|
|
20984
|
-
}) {
|
|
20994
|
+
function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
20985
20995
|
const parsePath = getBoundPath != null ? getBoundPath : function(path) {
|
|
20986
20996
|
return path;
|
|
20987
20997
|
};
|
|
@@ -21085,11 +21095,9 @@ function LinkNodePlugin({
|
|
|
21085
21095
|
setLinkPopoverState(void 0);
|
|
21086
21096
|
return;
|
|
21087
21097
|
}
|
|
21088
|
-
const elementRect = element.getBoundingClientRect();
|
|
21089
|
-
const positioningAnchorRect = positioningAnchorEl.getBoundingClientRect();
|
|
21090
21098
|
const { x, y } = {
|
|
21091
|
-
x:
|
|
21092
|
-
y:
|
|
21099
|
+
x: element.offsetLeft + LINK_POPOVER_OFFSET_X,
|
|
21100
|
+
y: element.offsetTop + element.clientHeight + LINK_POPOVER_OFFSET_Y
|
|
21093
21101
|
};
|
|
21094
21102
|
setLinkPopoverState({
|
|
21095
21103
|
node: linkNode,
|
|
@@ -21098,7 +21106,7 @@ function LinkNodePlugin({
|
|
|
21098
21106
|
y
|
|
21099
21107
|
}
|
|
21100
21108
|
});
|
|
21101
|
-
}, [editor
|
|
21109
|
+
}, [editor]);
|
|
21102
21110
|
useEffect18(() => {
|
|
21103
21111
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
21104
21112
|
requestAnimationFrame(() => {
|
|
@@ -21238,12 +21246,10 @@ import {
|
|
|
21238
21246
|
import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
|
|
21239
21247
|
import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
|
|
21240
21248
|
import { $setBlocksType } from "@lexical/selection";
|
|
21241
|
-
import { $createTableNodeWithDimensions } from "@lexical/table";
|
|
21242
21249
|
import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
|
|
21243
21250
|
import {
|
|
21244
21251
|
$createParagraphNode,
|
|
21245
21252
|
$getSelection as $getSelection3,
|
|
21246
|
-
$insertNodes,
|
|
21247
21253
|
$isRangeSelection as $isRangeSelection3,
|
|
21248
21254
|
$isRootOrShadowRoot,
|
|
21249
21255
|
COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
|
|
@@ -21253,14 +21259,12 @@ import {
|
|
|
21253
21259
|
import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useState as useState17 } from "react";
|
|
21254
21260
|
import { Fragment as Fragment19, jsx as jsx130, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
|
|
21255
21261
|
var toolbar = css97`
|
|
21256
|
-
${scrollbarStyles}
|
|
21257
21262
|
background: var(--gray-50);
|
|
21258
21263
|
border-radius: var(--rounded-base);
|
|
21259
21264
|
display: flex;
|
|
21260
21265
|
/* We add 1px because we use a 1px wide separator */
|
|
21261
21266
|
gap: calc(var(--spacing-sm) + 1px);
|
|
21262
21267
|
margin: calc(var(--spacing-sm) + var(--spacing-xs)) 0;
|
|
21263
|
-
overflow: auto;
|
|
21264
21268
|
padding: var(--spacing-sm);
|
|
21265
21269
|
position: sticky;
|
|
21266
21270
|
top: calc(var(--spacing-sm) * -2);
|
|
@@ -21268,7 +21272,6 @@ var toolbar = css97`
|
|
|
21268
21272
|
`;
|
|
21269
21273
|
var toolbarGroup = css97`
|
|
21270
21274
|
display: flex;
|
|
21271
|
-
flex-shrink: 0;
|
|
21272
21275
|
gap: var(--spacing-xs);
|
|
21273
21276
|
position: relative;
|
|
21274
21277
|
|
|
@@ -21291,7 +21294,6 @@ var richTextToolbarButton = css97`
|
|
|
21291
21294
|
box-shadow: none;
|
|
21292
21295
|
color: var(--gray-900);
|
|
21293
21296
|
display: flex;
|
|
21294
|
-
flex-shrink: 0;
|
|
21295
21297
|
height: 32px;
|
|
21296
21298
|
justify-content: center;
|
|
21297
21299
|
min-width: 32px;
|
|
@@ -21300,10 +21302,6 @@ var richTextToolbarButton = css97`
|
|
|
21300
21302
|
var richTextToolbarButtonActive = css97`
|
|
21301
21303
|
background: var(--gray-200);
|
|
21302
21304
|
`;
|
|
21303
|
-
var textStyleButton = css97`
|
|
21304
|
-
justify-content: space-between;
|
|
21305
|
-
min-width: 7rem;
|
|
21306
|
-
`;
|
|
21307
21305
|
var toolbarIcon = css97`
|
|
21308
21306
|
color: inherit;
|
|
21309
21307
|
`;
|
|
@@ -21324,7 +21322,7 @@ var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
|
21324
21322
|
]);
|
|
21325
21323
|
var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
|
21326
21324
|
var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
21327
|
-
var RichTextToolbar = ({ config, customControls
|
|
21325
|
+
var RichTextToolbar = ({ config, customControls }) => {
|
|
21328
21326
|
const [editor] = useLexicalComposerContext4();
|
|
21329
21327
|
const {
|
|
21330
21328
|
activeElement,
|
|
@@ -21340,39 +21338,26 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
21340
21338
|
visibleLists,
|
|
21341
21339
|
codeElementVisible,
|
|
21342
21340
|
quoteElementVisible,
|
|
21343
|
-
visibleElementsWithIcons
|
|
21344
|
-
visibleInsertElementsWithIcons,
|
|
21345
|
-
tableElementVisible
|
|
21341
|
+
visibleElementsWithIcons
|
|
21346
21342
|
} = useRichTextToolbarState({ config });
|
|
21347
21343
|
const onSelectElement = (type) => {
|
|
21348
21344
|
if (activeElement === type) {
|
|
21349
21345
|
return;
|
|
21350
21346
|
}
|
|
21351
|
-
editor.
|
|
21352
|
-
|
|
21353
|
-
|
|
21354
|
-
|
|
21355
|
-
|
|
21356
|
-
|
|
21357
|
-
|
|
21358
|
-
|
|
21359
|
-
|
|
21360
|
-
|
|
21361
|
-
|
|
21362
|
-
|
|
21363
|
-
|
|
21364
|
-
|
|
21365
|
-
return;
|
|
21366
|
-
}
|
|
21367
|
-
const { rows, columns } = dimensions;
|
|
21368
|
-
editor.focus(() => {
|
|
21369
|
-
editor.update(() => {
|
|
21370
|
-
$insertNodes([$createTableNodeWithDimensions(rows, columns, false)]);
|
|
21371
|
-
});
|
|
21372
|
-
});
|
|
21373
|
-
});
|
|
21374
|
-
}
|
|
21375
|
-
});
|
|
21347
|
+
editor.update(() => {
|
|
21348
|
+
const selection = $getSelection3();
|
|
21349
|
+
if (!$isRangeSelection3(selection)) {
|
|
21350
|
+
return;
|
|
21351
|
+
}
|
|
21352
|
+
if (HEADING_ELEMENTS.includes(type)) {
|
|
21353
|
+
$setBlocksType(selection, () => $createHeadingNode(type));
|
|
21354
|
+
} else if (type === "paragraph") {
|
|
21355
|
+
$setBlocksType(selection, () => $createParagraphNode());
|
|
21356
|
+
} else if (type === "quote") {
|
|
21357
|
+
$setBlocksType(selection, () => $createQuoteNode());
|
|
21358
|
+
} else if (type === "code") {
|
|
21359
|
+
$setBlocksType(selection, () => $createCodeNode());
|
|
21360
|
+
}
|
|
21376
21361
|
});
|
|
21377
21362
|
};
|
|
21378
21363
|
const updateToolbar = useCallback11(() => {
|
|
@@ -21437,7 +21422,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
21437
21422
|
/* @__PURE__ */ jsxs86(
|
|
21438
21423
|
Menu,
|
|
21439
21424
|
{
|
|
21440
|
-
|
|
21425
|
+
menuLabel: "Elements",
|
|
21426
|
+
menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Text styles", children: [
|
|
21441
21427
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
21442
21428
|
" ",
|
|
21443
21429
|
/* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
@@ -21497,7 +21483,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
21497
21483
|
}
|
|
21498
21484
|
) : null
|
|
21499
21485
|
] }) : null,
|
|
21500
|
-
visibleElementsWithIcons.size > 0
|
|
21486
|
+
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
|
|
21501
21487
|
linkElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21502
21488
|
"button",
|
|
21503
21489
|
{
|
|
@@ -21536,50 +21522,28 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
21536
21522
|
}
|
|
21537
21523
|
) }) : null
|
|
21538
21524
|
] }) : null,
|
|
21539
|
-
|
|
21525
|
+
quoteElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21526
|
+
"button",
|
|
21527
|
+
{
|
|
21528
|
+
onClick: () => {
|
|
21529
|
+
activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
|
|
21530
|
+
},
|
|
21531
|
+
css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
|
|
21532
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "quote" })
|
|
21533
|
+
}
|
|
21534
|
+
) }) : null,
|
|
21535
|
+
codeElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21536
|
+
"button",
|
|
21537
|
+
{
|
|
21538
|
+
onClick: () => {
|
|
21539
|
+
activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
|
|
21540
|
+
},
|
|
21541
|
+
css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
|
|
21542
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "code-slash" })
|
|
21543
|
+
}
|
|
21544
|
+
) }) : null
|
|
21540
21545
|
] }) : null,
|
|
21541
|
-
|
|
21542
|
-
Menu,
|
|
21543
|
-
{
|
|
21544
|
-
menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Insert block element", children: [
|
|
21545
|
-
"Insert",
|
|
21546
|
-
/* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
21547
|
-
] }),
|
|
21548
|
-
placement: "bottom-start",
|
|
21549
|
-
children: [
|
|
21550
|
-
quoteElementVisible ? /* @__PURE__ */ jsx130(
|
|
21551
|
-
MenuItem,
|
|
21552
|
-
{
|
|
21553
|
-
onClick: () => {
|
|
21554
|
-
onSelectElement("quote");
|
|
21555
|
-
},
|
|
21556
|
-
icon: /* @__PURE__ */ jsx130(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
21557
|
-
children: "Quote"
|
|
21558
|
-
}
|
|
21559
|
-
) : null,
|
|
21560
|
-
codeElementVisible ? /* @__PURE__ */ jsx130(
|
|
21561
|
-
MenuItem,
|
|
21562
|
-
{
|
|
21563
|
-
onClick: () => {
|
|
21564
|
-
onSelectElement("code");
|
|
21565
|
-
},
|
|
21566
|
-
icon: /* @__PURE__ */ jsx130(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
21567
|
-
children: "Code"
|
|
21568
|
-
}
|
|
21569
|
-
) : null,
|
|
21570
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx130(
|
|
21571
|
-
MenuItem,
|
|
21572
|
-
{
|
|
21573
|
-
onClick: () => {
|
|
21574
|
-
onSelectElement("table");
|
|
21575
|
-
},
|
|
21576
|
-
icon: /* @__PURE__ */ jsx130(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
21577
|
-
children: "Table"
|
|
21578
|
-
}
|
|
21579
|
-
) : null
|
|
21580
|
-
]
|
|
21581
|
-
}
|
|
21582
|
-
) }) : null
|
|
21546
|
+
customControls ? /* @__PURE__ */ jsx130("div", { css: toolbarGroup, children: customControls }) : null
|
|
21583
21547
|
] });
|
|
21584
21548
|
};
|
|
21585
21549
|
var RichTextToolbar_default = RichTextToolbar;
|
|
@@ -21656,9 +21620,6 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
21656
21620
|
const codeElementVisible = useMemo6(() => {
|
|
21657
21621
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
21658
21622
|
}, [activeElement, enabledBuiltInElements]);
|
|
21659
|
-
const tableElementVisible = useMemo6(() => {
|
|
21660
|
-
return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
|
|
21661
|
-
}, [activeElement, enabledBuiltInElements]);
|
|
21662
21623
|
const visibleElementsWithIcons = useMemo6(() => {
|
|
21663
21624
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
21664
21625
|
if (linkElementVisible) {
|
|
@@ -21669,21 +21630,14 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
21669
21630
|
visibleElements.add(type);
|
|
21670
21631
|
});
|
|
21671
21632
|
}
|
|
21672
|
-
return visibleElements;
|
|
21673
|
-
}, [linkElementVisible, visibleLists]);
|
|
21674
|
-
const visibleInsertElementsWithIcons = useMemo6(() => {
|
|
21675
|
-
const visibleElements = /* @__PURE__ */ new Set();
|
|
21676
21633
|
if (quoteElementVisible) {
|
|
21677
21634
|
visibleElements.add("quote");
|
|
21678
21635
|
}
|
|
21679
21636
|
if (codeElementVisible) {
|
|
21680
21637
|
visibleElements.add("code");
|
|
21681
21638
|
}
|
|
21682
|
-
if (tableElementVisible) {
|
|
21683
|
-
visibleElements.add("table");
|
|
21684
|
-
}
|
|
21685
21639
|
return visibleElements;
|
|
21686
|
-
}, [codeElementVisible, quoteElementVisible,
|
|
21640
|
+
}, [codeElementVisible, linkElementVisible, quoteElementVisible, visibleLists]);
|
|
21687
21641
|
return {
|
|
21688
21642
|
activeFormats,
|
|
21689
21643
|
setActiveFormats,
|
|
@@ -21698,718 +21652,12 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
21698
21652
|
visibleLists,
|
|
21699
21653
|
quoteElementVisible,
|
|
21700
21654
|
codeElementVisible,
|
|
21701
|
-
|
|
21702
|
-
visibleElementsWithIcons,
|
|
21703
|
-
visibleInsertElementsWithIcons
|
|
21655
|
+
visibleElementsWithIcons
|
|
21704
21656
|
};
|
|
21705
21657
|
};
|
|
21706
21658
|
|
|
21707
|
-
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
21708
|
-
import { css as css98 } from "@emotion/react";
|
|
21709
|
-
import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
|
|
21710
|
-
import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
|
|
21711
|
-
import {
|
|
21712
|
-
$deleteTableColumn__EXPERIMENTAL,
|
|
21713
|
-
$deleteTableRow__EXPERIMENTAL,
|
|
21714
|
-
$getTableCellNodeFromLexicalNode,
|
|
21715
|
-
$getTableColumnIndexFromTableCellNode,
|
|
21716
|
-
$getTableNodeFromLexicalNodeOrThrow,
|
|
21717
|
-
$getTableRowIndexFromTableCellNode,
|
|
21718
|
-
$insertTableColumn__EXPERIMENTAL,
|
|
21719
|
-
$insertTableRow__EXPERIMENTAL,
|
|
21720
|
-
$isTableCellNode,
|
|
21721
|
-
$isTableRowNode,
|
|
21722
|
-
$isTableSelection,
|
|
21723
|
-
getTableObserverFromTableElement,
|
|
21724
|
-
TableCellHeaderStates,
|
|
21725
|
-
TableCellNode
|
|
21726
|
-
} from "@lexical/table";
|
|
21727
|
-
import { $getRoot, $getSelection as $getSelection4, $isRangeSelection as $isRangeSelection4 } from "lexical";
|
|
21728
|
-
import { forwardRef as forwardRef22, useCallback as useCallback12, useEffect as useEffect21, useLayoutEffect, useState as useState18 } from "react";
|
|
21729
|
-
import { jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
21730
|
-
function computeSelectionCount(selection) {
|
|
21731
|
-
const selectionShape = selection.getShape();
|
|
21732
|
-
return {
|
|
21733
|
-
columns: selectionShape.toX - selectionShape.fromX + 1,
|
|
21734
|
-
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
21735
|
-
};
|
|
21736
|
-
}
|
|
21737
|
-
var tableActionMenuTrigger = css98`
|
|
21738
|
-
position: absolute;
|
|
21739
|
-
transform: translate(calc(-100% - 1px), 1px);
|
|
21740
|
-
`;
|
|
21741
|
-
var TableActionMenuTrigger = forwardRef22((props, ref) => {
|
|
21742
|
-
const { tableCellEl, positioningAnchorEl, ...rest } = props;
|
|
21743
|
-
const [coordinates, setCoordinates] = useState18({ x: 0, y: 0 });
|
|
21744
|
-
useLayoutEffect(() => {
|
|
21745
|
-
const rect = tableCellEl.getBoundingClientRect();
|
|
21746
|
-
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
21747
|
-
const relativeX = rect.right - parentRect.left;
|
|
21748
|
-
const relativeY = rect.top - parentRect.top;
|
|
21749
|
-
setCoordinates({ x: relativeX, y: relativeY });
|
|
21750
|
-
}, [tableCellEl, positioningAnchorEl]);
|
|
21751
|
-
return /* @__PURE__ */ jsx131(
|
|
21752
|
-
IconButton,
|
|
21753
|
-
{
|
|
21754
|
-
ref,
|
|
21755
|
-
css: [
|
|
21756
|
-
tableActionMenuTrigger,
|
|
21757
|
-
{
|
|
21758
|
-
top: coordinates.y,
|
|
21759
|
-
left: coordinates.x
|
|
21760
|
-
}
|
|
21761
|
-
],
|
|
21762
|
-
size: "xs",
|
|
21763
|
-
buttonType: "unimportant",
|
|
21764
|
-
...rest,
|
|
21765
|
-
children: /* @__PURE__ */ jsx131(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
21766
|
-
}
|
|
21767
|
-
);
|
|
21768
|
-
});
|
|
21769
|
-
TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
|
|
21770
|
-
function TableActionMenu({
|
|
21771
|
-
tableCellNode: _tableCellNode,
|
|
21772
|
-
menuPortalEl,
|
|
21773
|
-
tableCellEl,
|
|
21774
|
-
positioningAnchorEl
|
|
21775
|
-
}) {
|
|
21776
|
-
const [editor] = useLexicalComposerContext5();
|
|
21777
|
-
const [tableCellNode, updateTableCellNode] = useState18(_tableCellNode);
|
|
21778
|
-
const [selectionCounts, updateSelectionCounts] = useState18({
|
|
21779
|
-
columns: 1,
|
|
21780
|
-
rows: 1
|
|
21781
|
-
});
|
|
21782
|
-
const [menuTriggerKey, setMenuTriggerKey] = useState18(0);
|
|
21783
|
-
const incrementMenuTriggerKey = () => {
|
|
21784
|
-
setMenuTriggerKey((key) => key += 1);
|
|
21785
|
-
};
|
|
21786
|
-
useEffect21(() => {
|
|
21787
|
-
return editor.registerMutationListener(
|
|
21788
|
-
TableCellNode,
|
|
21789
|
-
(nodeMutations) => {
|
|
21790
|
-
const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
|
|
21791
|
-
if (nodeUpdated) {
|
|
21792
|
-
editor.getEditorState().read(() => {
|
|
21793
|
-
updateTableCellNode(tableCellNode.getLatest());
|
|
21794
|
-
});
|
|
21795
|
-
}
|
|
21796
|
-
},
|
|
21797
|
-
{ skipInitialization: true }
|
|
21798
|
-
);
|
|
21799
|
-
}, [editor, tableCellNode]);
|
|
21800
|
-
useEffect21(() => {
|
|
21801
|
-
editor.getEditorState().read(() => {
|
|
21802
|
-
const selection = $getSelection4();
|
|
21803
|
-
if ($isTableSelection(selection)) {
|
|
21804
|
-
updateSelectionCounts(computeSelectionCount(selection));
|
|
21805
|
-
}
|
|
21806
|
-
});
|
|
21807
|
-
}, [editor]);
|
|
21808
|
-
const clearTableSelection = useCallback12(() => {
|
|
21809
|
-
editor.update(() => {
|
|
21810
|
-
if (tableCellNode.isAttached()) {
|
|
21811
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
21812
|
-
const tableElement2 = editor.getElementByKey(
|
|
21813
|
-
tableNode.getKey()
|
|
21814
|
-
);
|
|
21815
|
-
if (!tableElement2) {
|
|
21816
|
-
throw new Error("Expected to find tableElement in DOM");
|
|
21817
|
-
}
|
|
21818
|
-
const tableSelection = getTableObserverFromTableElement(tableElement2);
|
|
21819
|
-
if (tableSelection !== null) {
|
|
21820
|
-
tableSelection.clearHighlight();
|
|
21821
|
-
}
|
|
21822
|
-
tableNode.markDirty();
|
|
21823
|
-
updateTableCellNode(tableCellNode.getLatest());
|
|
21824
|
-
}
|
|
21825
|
-
const rootNode = $getRoot();
|
|
21826
|
-
rootNode.selectStart();
|
|
21827
|
-
});
|
|
21828
|
-
}, [editor, tableCellNode]);
|
|
21829
|
-
const insertTableRowAtSelection = useCallback12(
|
|
21830
|
-
(shouldInsertAfter) => {
|
|
21831
|
-
editor.update(() => {
|
|
21832
|
-
$insertTableRow__EXPERIMENTAL(shouldInsertAfter);
|
|
21833
|
-
});
|
|
21834
|
-
incrementMenuTriggerKey();
|
|
21835
|
-
},
|
|
21836
|
-
[editor]
|
|
21837
|
-
);
|
|
21838
|
-
const insertTableColumnAtSelection = useCallback12(
|
|
21839
|
-
(shouldInsertAfter) => {
|
|
21840
|
-
editor.update(() => {
|
|
21841
|
-
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
21842
|
-
$insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
|
|
21843
|
-
}
|
|
21844
|
-
});
|
|
21845
|
-
incrementMenuTriggerKey();
|
|
21846
|
-
},
|
|
21847
|
-
[editor, selectionCounts.columns]
|
|
21848
|
-
);
|
|
21849
|
-
const deleteTableRowAtSelection = useCallback12(() => {
|
|
21850
|
-
editor.update(() => {
|
|
21851
|
-
$deleteTableRow__EXPERIMENTAL();
|
|
21852
|
-
});
|
|
21853
|
-
incrementMenuTriggerKey();
|
|
21854
|
-
}, [editor]);
|
|
21855
|
-
const deleteTableAtSelection = useCallback12(() => {
|
|
21856
|
-
editor.update(() => {
|
|
21857
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
21858
|
-
tableNode.remove();
|
|
21859
|
-
clearTableSelection();
|
|
21860
|
-
});
|
|
21861
|
-
}, [editor, tableCellNode, clearTableSelection]);
|
|
21862
|
-
const deleteTableColumnAtSelection = useCallback12(() => {
|
|
21863
|
-
editor.update(() => {
|
|
21864
|
-
$deleteTableColumn__EXPERIMENTAL();
|
|
21865
|
-
clearTableSelection();
|
|
21866
|
-
});
|
|
21867
|
-
incrementMenuTriggerKey();
|
|
21868
|
-
}, [editor, clearTableSelection]);
|
|
21869
|
-
const toggleTableRowIsHeader = useCallback12(() => {
|
|
21870
|
-
editor.update(() => {
|
|
21871
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
21872
|
-
const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
|
|
21873
|
-
const tableRows = tableNode.getChildren();
|
|
21874
|
-
if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
|
|
21875
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
21876
|
-
}
|
|
21877
|
-
const tableRow2 = tableRows[tableRowIndex];
|
|
21878
|
-
if (!$isTableRowNode(tableRow2)) {
|
|
21879
|
-
throw new Error("Expected table row");
|
|
21880
|
-
}
|
|
21881
|
-
tableRow2.getChildren().forEach((tableCell) => {
|
|
21882
|
-
if (!$isTableCellNode(tableCell)) {
|
|
21883
|
-
throw new Error("Expected table cell");
|
|
21884
|
-
}
|
|
21885
|
-
tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW);
|
|
21886
|
-
});
|
|
21887
|
-
clearTableSelection();
|
|
21888
|
-
});
|
|
21889
|
-
}, [editor, tableCellNode, clearTableSelection]);
|
|
21890
|
-
const toggleTableColumnIsHeader = useCallback12(() => {
|
|
21891
|
-
editor.update(() => {
|
|
21892
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
21893
|
-
const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
|
|
21894
|
-
const tableRows = tableNode.getChildren();
|
|
21895
|
-
const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
|
|
21896
|
-
if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
|
|
21897
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
21898
|
-
}
|
|
21899
|
-
for (let r = 0; r < tableRows.length; r++) {
|
|
21900
|
-
const tableRow2 = tableRows[r];
|
|
21901
|
-
if (!$isTableRowNode(tableRow2)) {
|
|
21902
|
-
throw new Error("Expected table row");
|
|
21903
|
-
}
|
|
21904
|
-
const tableCells = tableRow2.getChildren();
|
|
21905
|
-
if (tableColumnIndex >= tableCells.length) {
|
|
21906
|
-
continue;
|
|
21907
|
-
}
|
|
21908
|
-
const tableCell = tableCells[tableColumnIndex];
|
|
21909
|
-
if (!$isTableCellNode(tableCell)) {
|
|
21910
|
-
throw new Error("Expected table cell");
|
|
21911
|
-
}
|
|
21912
|
-
tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
|
|
21913
|
-
}
|
|
21914
|
-
clearTableSelection();
|
|
21915
|
-
});
|
|
21916
|
-
}, [editor, tableCellNode, clearTableSelection]);
|
|
21917
|
-
const menuItemCss = css98({
|
|
21918
|
-
fontSize: "var(--fs-sm)"
|
|
21919
|
-
});
|
|
21920
|
-
return /* @__PURE__ */ jsxs87(
|
|
21921
|
-
Menu,
|
|
21922
|
-
{
|
|
21923
|
-
menuTrigger: /* @__PURE__ */ jsx131(
|
|
21924
|
-
TableActionMenuTrigger,
|
|
21925
|
-
{
|
|
21926
|
-
tableCellEl,
|
|
21927
|
-
positioningAnchorEl
|
|
21928
|
-
},
|
|
21929
|
-
menuTriggerKey
|
|
21930
|
-
),
|
|
21931
|
-
portalElement: menuPortalEl,
|
|
21932
|
-
maxMenuHeight: "300px",
|
|
21933
|
-
children: [
|
|
21934
|
-
/* @__PURE__ */ jsxs87(
|
|
21935
|
-
MenuItem,
|
|
21936
|
-
{
|
|
21937
|
-
onClick: () => {
|
|
21938
|
-
insertTableRowAtSelection(false);
|
|
21939
|
-
},
|
|
21940
|
-
css: menuItemCss,
|
|
21941
|
-
children: [
|
|
21942
|
-
"Insert ",
|
|
21943
|
-
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
21944
|
-
" above"
|
|
21945
|
-
]
|
|
21946
|
-
}
|
|
21947
|
-
),
|
|
21948
|
-
/* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
|
|
21949
|
-
"Insert ",
|
|
21950
|
-
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
21951
|
-
" below"
|
|
21952
|
-
] }),
|
|
21953
|
-
/* @__PURE__ */ jsx131(MenuItemSeparator, {}),
|
|
21954
|
-
/* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
21955
|
-
"Insert ",
|
|
21956
|
-
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
21957
|
-
" left"
|
|
21958
|
-
] }),
|
|
21959
|
-
/* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
|
|
21960
|
-
"Insert ",
|
|
21961
|
-
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
21962
|
-
" right"
|
|
21963
|
-
] }),
|
|
21964
|
-
/* @__PURE__ */ jsx131(MenuItemSeparator, {}),
|
|
21965
|
-
/* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
21966
|
-
/* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
21967
|
-
/* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
21968
|
-
/* @__PURE__ */ jsx131(MenuItemSeparator, {}),
|
|
21969
|
-
/* @__PURE__ */ jsxs87(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
21970
|
-
(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
21971
|
-
" ",
|
|
21972
|
-
"row header"
|
|
21973
|
-
] }),
|
|
21974
|
-
/* @__PURE__ */ jsxs87(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
|
|
21975
|
-
(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
|
|
21976
|
-
" ",
|
|
21977
|
-
"column header"
|
|
21978
|
-
] })
|
|
21979
|
-
]
|
|
21980
|
-
}
|
|
21981
|
-
);
|
|
21982
|
-
}
|
|
21983
|
-
function TableCellActionMenuContainer({
|
|
21984
|
-
menuPortalEl,
|
|
21985
|
-
positioningAnchorEl
|
|
21986
|
-
}) {
|
|
21987
|
-
const [editor] = useLexicalComposerContext5();
|
|
21988
|
-
const [tableCellNode, setTableMenuCellNode] = useState18(null);
|
|
21989
|
-
const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState18(null);
|
|
21990
|
-
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState18(null);
|
|
21991
|
-
useEffect21(() => {
|
|
21992
|
-
const newPortalEl = document.createElement("div");
|
|
21993
|
-
setTableMenuCellMenuPortalEl(newPortalEl);
|
|
21994
|
-
menuPortalEl.appendChild(newPortalEl);
|
|
21995
|
-
return () => {
|
|
21996
|
-
newPortalEl.remove();
|
|
21997
|
-
};
|
|
21998
|
-
}, [menuPortalEl]);
|
|
21999
|
-
const setTableMenuCellNodeElem = useCallback12((elem) => {
|
|
22000
|
-
if (elem) {
|
|
22001
|
-
_setTableMenuCellNodeEl(elem);
|
|
22002
|
-
} else {
|
|
22003
|
-
_setTableMenuCellNodeEl(null);
|
|
22004
|
-
}
|
|
22005
|
-
}, []);
|
|
22006
|
-
const $moveMenu = useCallback12(() => {
|
|
22007
|
-
const selection = $getSelection4();
|
|
22008
|
-
const nativeSelection = window.getSelection();
|
|
22009
|
-
const activeElement = document.activeElement;
|
|
22010
|
-
if (selection == null) {
|
|
22011
|
-
setTableMenuCellNode(null);
|
|
22012
|
-
return;
|
|
22013
|
-
}
|
|
22014
|
-
const rootElement = editor.getRootElement();
|
|
22015
|
-
if ($isRangeSelection4(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
|
|
22016
|
-
const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
|
|
22017
|
-
if (tableCellNodeFromSelection == null) {
|
|
22018
|
-
setTableMenuCellNode(null);
|
|
22019
|
-
setTableMenuCellNodeElem(null);
|
|
22020
|
-
return;
|
|
22021
|
-
}
|
|
22022
|
-
const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
|
|
22023
|
-
if (tableCellParentNodeDOM == null) {
|
|
22024
|
-
setTableMenuCellNode(null);
|
|
22025
|
-
setTableMenuCellNodeElem(null);
|
|
22026
|
-
return;
|
|
22027
|
-
}
|
|
22028
|
-
setTableMenuCellNode(tableCellNodeFromSelection);
|
|
22029
|
-
setTableMenuCellNodeElem(tableCellParentNodeDOM);
|
|
22030
|
-
} else if (!activeElement) {
|
|
22031
|
-
setTableMenuCellNode(null);
|
|
22032
|
-
setTableMenuCellNodeElem(null);
|
|
22033
|
-
}
|
|
22034
|
-
}, [editor, setTableMenuCellNodeElem]);
|
|
22035
|
-
useEffect21(() => {
|
|
22036
|
-
return editor.registerUpdateListener(() => {
|
|
22037
|
-
editor.getEditorState().read(() => {
|
|
22038
|
-
$moveMenu();
|
|
22039
|
-
});
|
|
22040
|
-
});
|
|
22041
|
-
});
|
|
22042
|
-
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx131(
|
|
22043
|
-
TableActionMenu,
|
|
22044
|
-
{
|
|
22045
|
-
tableCellNode,
|
|
22046
|
-
menuPortalEl: tableCellMenuPortalEl,
|
|
22047
|
-
tableCellEl: tableCellNodeEl,
|
|
22048
|
-
positioningAnchorEl
|
|
22049
|
-
},
|
|
22050
|
-
tableCellNode.getKey()
|
|
22051
|
-
);
|
|
22052
|
-
}
|
|
22053
|
-
function TableActionMenuPlugin({ positioningAnchorEl }) {
|
|
22054
|
-
const isEditable = useLexicalEditable();
|
|
22055
|
-
return isEditable ? /* @__PURE__ */ jsx131(
|
|
22056
|
-
TableCellActionMenuContainer,
|
|
22057
|
-
{
|
|
22058
|
-
menuPortalEl: positioningAnchorEl,
|
|
22059
|
-
positioningAnchorEl
|
|
22060
|
-
}
|
|
22061
|
-
) : null;
|
|
22062
|
-
}
|
|
22063
|
-
|
|
22064
|
-
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
22065
|
-
import { css as css99 } from "@emotion/react";
|
|
22066
|
-
import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
|
|
22067
|
-
import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
|
|
22068
|
-
import {
|
|
22069
|
-
$computeTableMapSkipCellCheck,
|
|
22070
|
-
$getTableNodeFromLexicalNodeOrThrow as $getTableNodeFromLexicalNodeOrThrow2,
|
|
22071
|
-
$getTableRowIndexFromTableCellNode as $getTableRowIndexFromTableCellNode2,
|
|
22072
|
-
$isTableCellNode as $isTableCellNode2,
|
|
22073
|
-
$isTableRowNode as $isTableRowNode2
|
|
22074
|
-
} from "@lexical/table";
|
|
22075
|
-
import { calculateZoomLevel } from "@lexical/utils";
|
|
22076
|
-
import { $getNearestNodeFromDOMNode } from "lexical";
|
|
22077
|
-
import { useCallback as useCallback13, useEffect as useEffect22, useMemo as useMemo7, useRef as useRef12, useState as useState19 } from "react";
|
|
22078
|
-
import { createPortal as createPortal3 } from "react-dom";
|
|
22079
|
-
import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
|
|
22080
|
-
var MIN_ROW_HEIGHT = 33;
|
|
22081
|
-
var MIN_COLUMN_WIDTH = 50;
|
|
22082
|
-
var tableResizer = css99`
|
|
22083
|
-
position: absolute;
|
|
22084
|
-
z-index: var(--z-10);
|
|
22085
|
-
`;
|
|
22086
|
-
var fixedGetDOMCellFromTarget = (node) => {
|
|
22087
|
-
let currentNode = node;
|
|
22088
|
-
while (currentNode != null) {
|
|
22089
|
-
const nodeName = currentNode.nodeName;
|
|
22090
|
-
if (nodeName === "TD" || nodeName === "TH") {
|
|
22091
|
-
const cell2 = currentNode._cell;
|
|
22092
|
-
if (cell2 === void 0) {
|
|
22093
|
-
return {
|
|
22094
|
-
elem: currentNode
|
|
22095
|
-
};
|
|
22096
|
-
}
|
|
22097
|
-
return cell2;
|
|
22098
|
-
}
|
|
22099
|
-
currentNode = currentNode.parentNode;
|
|
22100
|
-
}
|
|
22101
|
-
return null;
|
|
22102
|
-
};
|
|
22103
|
-
function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
22104
|
-
const targetRef = useRef12(null);
|
|
22105
|
-
const resizerRef = useRef12(null);
|
|
22106
|
-
const tableRectRef = useRef12(null);
|
|
22107
|
-
const mouseStartPosRef = useRef12(null);
|
|
22108
|
-
const [mouseCurrentPos, updateMouseCurrentPos] = useState19(null);
|
|
22109
|
-
const [activeCell, updateActiveCell] = useState19(null);
|
|
22110
|
-
const [isMouseDown, updateIsMouseDown] = useState19(false);
|
|
22111
|
-
const [draggingDirection, updateDraggingDirection] = useState19(null);
|
|
22112
|
-
const resetState = useCallback13(() => {
|
|
22113
|
-
updateActiveCell(null);
|
|
22114
|
-
targetRef.current = null;
|
|
22115
|
-
updateDraggingDirection(null);
|
|
22116
|
-
mouseStartPosRef.current = null;
|
|
22117
|
-
tableRectRef.current = null;
|
|
22118
|
-
}, []);
|
|
22119
|
-
const isMouseDownOnEvent = (event) => {
|
|
22120
|
-
return (event.buttons & 1) === 1;
|
|
22121
|
-
};
|
|
22122
|
-
useEffect22(() => {
|
|
22123
|
-
const onMouseMove = (event) => {
|
|
22124
|
-
setTimeout(() => {
|
|
22125
|
-
const target = event.target;
|
|
22126
|
-
if (draggingDirection) {
|
|
22127
|
-
updateMouseCurrentPos({
|
|
22128
|
-
x: event.clientX,
|
|
22129
|
-
y: event.clientY
|
|
22130
|
-
});
|
|
22131
|
-
return;
|
|
22132
|
-
}
|
|
22133
|
-
updateIsMouseDown(isMouseDownOnEvent(event));
|
|
22134
|
-
if (resizerRef.current && resizerRef.current.contains(target)) {
|
|
22135
|
-
return;
|
|
22136
|
-
}
|
|
22137
|
-
if (targetRef.current !== target) {
|
|
22138
|
-
targetRef.current = target;
|
|
22139
|
-
const cell2 = fixedGetDOMCellFromTarget(target);
|
|
22140
|
-
if (cell2 && activeCell !== cell2) {
|
|
22141
|
-
editor.update(() => {
|
|
22142
|
-
const tableCellNode = $getNearestNodeFromDOMNode(cell2.elem);
|
|
22143
|
-
if (!tableCellNode) {
|
|
22144
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
22145
|
-
}
|
|
22146
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
|
|
22147
|
-
const tableElement2 = editor.getElementByKey(tableNode.getKey());
|
|
22148
|
-
if (!tableElement2) {
|
|
22149
|
-
throw new Error("TableCellResizer: Table element not found.");
|
|
22150
|
-
}
|
|
22151
|
-
targetRef.current = target;
|
|
22152
|
-
tableRectRef.current = tableElement2.getBoundingClientRect();
|
|
22153
|
-
updateActiveCell(cell2);
|
|
22154
|
-
});
|
|
22155
|
-
} else if (cell2 == null) {
|
|
22156
|
-
resetState();
|
|
22157
|
-
}
|
|
22158
|
-
}
|
|
22159
|
-
}, 0);
|
|
22160
|
-
};
|
|
22161
|
-
const onMouseDown = () => {
|
|
22162
|
-
setTimeout(() => {
|
|
22163
|
-
updateIsMouseDown(true);
|
|
22164
|
-
}, 0);
|
|
22165
|
-
};
|
|
22166
|
-
const onMouseUp = () => {
|
|
22167
|
-
setTimeout(() => {
|
|
22168
|
-
updateIsMouseDown(false);
|
|
22169
|
-
}, 0);
|
|
22170
|
-
};
|
|
22171
|
-
const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
|
|
22172
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
|
|
22173
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
|
|
22174
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
|
|
22175
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
|
|
22176
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
|
|
22177
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
|
|
22178
|
-
});
|
|
22179
|
-
return () => {
|
|
22180
|
-
removeRootListener();
|
|
22181
|
-
};
|
|
22182
|
-
}, [activeCell, draggingDirection, editor, resetState]);
|
|
22183
|
-
const isHeightChanging = (direction) => {
|
|
22184
|
-
if (direction === "bottom") {
|
|
22185
|
-
return true;
|
|
22186
|
-
}
|
|
22187
|
-
return false;
|
|
22188
|
-
};
|
|
22189
|
-
const updateRowHeight = useCallback13(
|
|
22190
|
-
(heightChange) => {
|
|
22191
|
-
if (!activeCell) {
|
|
22192
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
22193
|
-
}
|
|
22194
|
-
editor.update(
|
|
22195
|
-
() => {
|
|
22196
|
-
const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
|
|
22197
|
-
if (!$isTableCellNode2(tableCellNode)) {
|
|
22198
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
22199
|
-
}
|
|
22200
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
|
|
22201
|
-
const tableRowIndex = $getTableRowIndexFromTableCellNode2(tableCellNode);
|
|
22202
|
-
const tableRows = tableNode.getChildren();
|
|
22203
|
-
if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
|
|
22204
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
22205
|
-
}
|
|
22206
|
-
const tableRow2 = tableRows[tableRowIndex];
|
|
22207
|
-
if (!$isTableRowNode2(tableRow2)) {
|
|
22208
|
-
throw new Error("Expected table row");
|
|
22209
|
-
}
|
|
22210
|
-
let height = tableRow2.getHeight();
|
|
22211
|
-
if (height === void 0) {
|
|
22212
|
-
const rowCells = tableRow2.getChildren();
|
|
22213
|
-
height = Math.min(...rowCells.map((cell2) => {
|
|
22214
|
-
var _a;
|
|
22215
|
-
return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
|
|
22216
|
-
}));
|
|
22217
|
-
}
|
|
22218
|
-
const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
|
|
22219
|
-
tableRow2.setHeight(newHeight);
|
|
22220
|
-
},
|
|
22221
|
-
{ tag: "skip-scroll-into-view" }
|
|
22222
|
-
);
|
|
22223
|
-
},
|
|
22224
|
-
[activeCell, editor]
|
|
22225
|
-
);
|
|
22226
|
-
const getCellNodeWidth = (cell2, activeEditor) => {
|
|
22227
|
-
const width = cell2.getWidth();
|
|
22228
|
-
if (width !== void 0) {
|
|
22229
|
-
return width;
|
|
22230
|
-
}
|
|
22231
|
-
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
22232
|
-
if (domCellNode == null) {
|
|
22233
|
-
return void 0;
|
|
22234
|
-
}
|
|
22235
|
-
const computedStyle = getComputedStyle(domCellNode);
|
|
22236
|
-
return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
|
|
22237
|
-
};
|
|
22238
|
-
const getCellNodeHeight = (cell2, activeEditor) => {
|
|
22239
|
-
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
22240
|
-
return domCellNode == null ? void 0 : domCellNode.clientHeight;
|
|
22241
|
-
};
|
|
22242
|
-
const getCellColumnIndex = (tableCellNode, tableMap) => {
|
|
22243
|
-
for (let row = 0; row < tableMap.length; row++) {
|
|
22244
|
-
for (let column = 0; column < tableMap[row].length; column++) {
|
|
22245
|
-
if (tableMap[row][column].cell === tableCellNode) {
|
|
22246
|
-
return column;
|
|
22247
|
-
}
|
|
22248
|
-
}
|
|
22249
|
-
}
|
|
22250
|
-
};
|
|
22251
|
-
const updateColumnWidth = useCallback13(
|
|
22252
|
-
(widthChange) => {
|
|
22253
|
-
if (!activeCell) {
|
|
22254
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
22255
|
-
}
|
|
22256
|
-
editor.update(
|
|
22257
|
-
() => {
|
|
22258
|
-
const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
|
|
22259
|
-
if (!$isTableCellNode2(tableCellNode)) {
|
|
22260
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
22261
|
-
}
|
|
22262
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
|
|
22263
|
-
const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
|
|
22264
|
-
const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
|
|
22265
|
-
if (columnIndex === void 0) {
|
|
22266
|
-
throw new Error("TableCellResizer: Table column not found.");
|
|
22267
|
-
}
|
|
22268
|
-
for (let row = 0; row < tableMap.length; row++) {
|
|
22269
|
-
const cell2 = tableMap[row][columnIndex];
|
|
22270
|
-
if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
|
|
22271
|
-
const width = getCellNodeWidth(cell2.cell, editor);
|
|
22272
|
-
if (width === void 0) {
|
|
22273
|
-
continue;
|
|
22274
|
-
}
|
|
22275
|
-
const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
|
|
22276
|
-
cell2.cell.setWidth(newWidth);
|
|
22277
|
-
}
|
|
22278
|
-
}
|
|
22279
|
-
},
|
|
22280
|
-
{ tag: "skip-scroll-into-view" }
|
|
22281
|
-
);
|
|
22282
|
-
},
|
|
22283
|
-
[activeCell, editor]
|
|
22284
|
-
);
|
|
22285
|
-
const mouseUpHandler = useCallback13(
|
|
22286
|
-
(direction) => {
|
|
22287
|
-
const handler = (event) => {
|
|
22288
|
-
event.preventDefault();
|
|
22289
|
-
event.stopPropagation();
|
|
22290
|
-
if (!activeCell) {
|
|
22291
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
22292
|
-
}
|
|
22293
|
-
if (mouseStartPosRef.current) {
|
|
22294
|
-
const { x, y } = mouseStartPosRef.current;
|
|
22295
|
-
if (activeCell === null) {
|
|
22296
|
-
return;
|
|
22297
|
-
}
|
|
22298
|
-
const zoom = calculateZoomLevel(event.target);
|
|
22299
|
-
if (isHeightChanging(direction)) {
|
|
22300
|
-
const heightChange = (event.clientY - y) / zoom;
|
|
22301
|
-
updateRowHeight(heightChange);
|
|
22302
|
-
} else {
|
|
22303
|
-
const widthChange = (event.clientX - x) / zoom;
|
|
22304
|
-
updateColumnWidth(widthChange);
|
|
22305
|
-
}
|
|
22306
|
-
resetState();
|
|
22307
|
-
document.removeEventListener("mouseup", handler);
|
|
22308
|
-
}
|
|
22309
|
-
};
|
|
22310
|
-
return handler;
|
|
22311
|
-
},
|
|
22312
|
-
[activeCell, resetState, updateColumnWidth, updateRowHeight]
|
|
22313
|
-
);
|
|
22314
|
-
const toggleResize = useCallback13(
|
|
22315
|
-
(direction) => (event) => {
|
|
22316
|
-
event.preventDefault();
|
|
22317
|
-
event.stopPropagation();
|
|
22318
|
-
if (!activeCell) {
|
|
22319
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
22320
|
-
}
|
|
22321
|
-
mouseStartPosRef.current = {
|
|
22322
|
-
x: event.clientX,
|
|
22323
|
-
y: event.clientY
|
|
22324
|
-
};
|
|
22325
|
-
updateMouseCurrentPos(mouseStartPosRef.current);
|
|
22326
|
-
updateDraggingDirection(direction);
|
|
22327
|
-
document.addEventListener("mouseup", mouseUpHandler(direction));
|
|
22328
|
-
},
|
|
22329
|
-
[activeCell, mouseUpHandler]
|
|
22330
|
-
);
|
|
22331
|
-
const getResizers = useCallback13(() => {
|
|
22332
|
-
if (activeCell) {
|
|
22333
|
-
const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
|
|
22334
|
-
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
22335
|
-
const zoom = calculateZoomLevel(activeCell.elem);
|
|
22336
|
-
const zoneWidth = 10;
|
|
22337
|
-
const styles = {
|
|
22338
|
-
bottom: {
|
|
22339
|
-
backgroundColor: "none",
|
|
22340
|
-
cursor: "row-resize",
|
|
22341
|
-
height: `${zoneWidth}px`,
|
|
22342
|
-
left: `${left - parentRect.left}px`,
|
|
22343
|
-
top: `${top - parentRect.top + height - zoneWidth / 2}px`,
|
|
22344
|
-
width: `${width}px`
|
|
22345
|
-
},
|
|
22346
|
-
right: {
|
|
22347
|
-
backgroundColor: "none",
|
|
22348
|
-
cursor: "col-resize",
|
|
22349
|
-
height: `${height}px`,
|
|
22350
|
-
left: `${left - parentRect.left + width - zoneWidth / 2}px`,
|
|
22351
|
-
top: `${top - parentRect.top}px`,
|
|
22352
|
-
width: `${zoneWidth}px`
|
|
22353
|
-
}
|
|
22354
|
-
};
|
|
22355
|
-
const tableRect = tableRectRef.current;
|
|
22356
|
-
if (draggingDirection && mouseCurrentPos && tableRect) {
|
|
22357
|
-
if (isHeightChanging(draggingDirection)) {
|
|
22358
|
-
styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
|
|
22359
|
-
styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top) / zoom}px`;
|
|
22360
|
-
styles[draggingDirection].height = "3px";
|
|
22361
|
-
styles[draggingDirection].width = `${tableRect.width}px`;
|
|
22362
|
-
} else {
|
|
22363
|
-
styles[draggingDirection].top = `${tableRect.top - parentRect.top}px`;
|
|
22364
|
-
styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
|
|
22365
|
-
styles[draggingDirection].width = "3px";
|
|
22366
|
-
styles[draggingDirection].height = `${tableRect.height}px`;
|
|
22367
|
-
}
|
|
22368
|
-
styles[draggingDirection].backgroundColor = "#adf";
|
|
22369
|
-
}
|
|
22370
|
-
return styles;
|
|
22371
|
-
}
|
|
22372
|
-
return {
|
|
22373
|
-
bottom: null,
|
|
22374
|
-
left: null,
|
|
22375
|
-
right: null,
|
|
22376
|
-
top: null
|
|
22377
|
-
};
|
|
22378
|
-
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
22379
|
-
const resizerStyles = getResizers();
|
|
22380
|
-
return /* @__PURE__ */ jsx132("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs88(Fragment20, { children: [
|
|
22381
|
-
/* @__PURE__ */ jsx132(
|
|
22382
|
-
"div",
|
|
22383
|
-
{
|
|
22384
|
-
css: tableResizer,
|
|
22385
|
-
style: resizerStyles.right || void 0,
|
|
22386
|
-
onMouseDown: toggleResize("right")
|
|
22387
|
-
}
|
|
22388
|
-
),
|
|
22389
|
-
/* @__PURE__ */ jsx132(
|
|
22390
|
-
"div",
|
|
22391
|
-
{
|
|
22392
|
-
css: tableResizer,
|
|
22393
|
-
style: resizerStyles.bottom || void 0,
|
|
22394
|
-
onMouseDown: toggleResize("bottom")
|
|
22395
|
-
}
|
|
22396
|
-
)
|
|
22397
|
-
] }) });
|
|
22398
|
-
}
|
|
22399
|
-
function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
22400
|
-
const [editor] = useLexicalComposerContext6();
|
|
22401
|
-
const isEditable = useLexicalEditable2();
|
|
22402
|
-
return useMemo7(
|
|
22403
|
-
() => isEditable ? createPortal3(
|
|
22404
|
-
/* @__PURE__ */ jsx132(TableCellResizer, { editor, positioningAnchorEl }),
|
|
22405
|
-
positioningAnchorEl
|
|
22406
|
-
) : null,
|
|
22407
|
-
[editor, isEditable, positioningAnchorEl]
|
|
22408
|
-
);
|
|
22409
|
-
}
|
|
22410
|
-
|
|
22411
21659
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22412
|
-
import { Fragment as
|
|
21660
|
+
import { Fragment as Fragment20, jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
22413
21661
|
var ParameterRichText = ({
|
|
22414
21662
|
label,
|
|
22415
21663
|
labelLeadingIcon,
|
|
@@ -22428,16 +21676,13 @@ var ParameterRichText = ({
|
|
|
22428
21676
|
readOnly,
|
|
22429
21677
|
editorWrapperClassName,
|
|
22430
21678
|
editorInputClassName,
|
|
22431
|
-
editorInputWrapperClassName,
|
|
22432
21679
|
editorFooter,
|
|
22433
21680
|
customNodes,
|
|
22434
21681
|
children,
|
|
22435
21682
|
variables,
|
|
22436
|
-
customControls
|
|
22437
|
-
onInsertTable,
|
|
22438
|
-
minimalInteractivity
|
|
21683
|
+
customControls
|
|
22439
21684
|
}) => {
|
|
22440
|
-
return /* @__PURE__ */
|
|
21685
|
+
return /* @__PURE__ */ jsxs87(
|
|
22441
21686
|
ParameterShell,
|
|
22442
21687
|
{
|
|
22443
21688
|
"data-testid": "parameter-richtext",
|
|
@@ -22451,7 +21696,7 @@ var ParameterRichText = ({
|
|
|
22451
21696
|
captionTestId,
|
|
22452
21697
|
menuItems,
|
|
22453
21698
|
children: [
|
|
22454
|
-
/* @__PURE__ */
|
|
21699
|
+
/* @__PURE__ */ jsx131(
|
|
22455
21700
|
ParameterRichTextInner,
|
|
22456
21701
|
{
|
|
22457
21702
|
value,
|
|
@@ -22462,33 +21707,30 @@ var ParameterRichText = ({
|
|
|
22462
21707
|
readOnly,
|
|
22463
21708
|
editorWrapperClassName,
|
|
22464
21709
|
editorInputClassName,
|
|
22465
|
-
editorInputWrapperClassName,
|
|
22466
21710
|
editorFooter,
|
|
22467
21711
|
customNodes,
|
|
22468
21712
|
variables,
|
|
22469
21713
|
customControls,
|
|
22470
|
-
onInsertTable,
|
|
22471
|
-
minimalInteractivity,
|
|
22472
21714
|
children
|
|
22473
21715
|
}
|
|
22474
21716
|
),
|
|
22475
|
-
menuItems ? /* @__PURE__ */
|
|
21717
|
+
menuItems ? /* @__PURE__ */ jsx131(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx131(Fragment20, { children: menuItems }) }) : null
|
|
22476
21718
|
]
|
|
22477
21719
|
}
|
|
22478
21720
|
);
|
|
22479
21721
|
};
|
|
22480
|
-
var editorWrapper =
|
|
21722
|
+
var editorWrapper = css98`
|
|
22481
21723
|
display: flex;
|
|
22482
21724
|
flex-flow: column;
|
|
22483
21725
|
flex-grow: 1;
|
|
22484
21726
|
`;
|
|
22485
|
-
var editorContainer =
|
|
21727
|
+
var editorContainer = css98`
|
|
22486
21728
|
display: flex;
|
|
22487
21729
|
flex-flow: column;
|
|
22488
21730
|
flex-grow: 1;
|
|
22489
21731
|
position: relative;
|
|
22490
21732
|
`;
|
|
22491
|
-
var editorPlaceholder =
|
|
21733
|
+
var editorPlaceholder = css98`
|
|
22492
21734
|
color: var(--gray-500);
|
|
22493
21735
|
font-style: italic;
|
|
22494
21736
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -22499,7 +21741,7 @@ var editorPlaceholder = css100`
|
|
|
22499
21741
|
top: var(--spacing-sm);
|
|
22500
21742
|
user-select: none;
|
|
22501
21743
|
`;
|
|
22502
|
-
var editorInput =
|
|
21744
|
+
var editorInput = css98`
|
|
22503
21745
|
background: var(--white);
|
|
22504
21746
|
border: 1px solid var(--gray-200);
|
|
22505
21747
|
border-radius: var(--rounded-sm);
|
|
@@ -22527,14 +21769,11 @@ var ParameterRichTextInner = ({
|
|
|
22527
21769
|
readOnly,
|
|
22528
21770
|
editorWrapperClassName,
|
|
22529
21771
|
editorInputClassName,
|
|
22530
|
-
editorInputWrapperClassName,
|
|
22531
21772
|
editorFooter,
|
|
22532
21773
|
children,
|
|
22533
21774
|
customNodes,
|
|
22534
21775
|
variables,
|
|
22535
|
-
customControls
|
|
22536
|
-
onInsertTable,
|
|
22537
|
-
minimalInteractivity
|
|
21776
|
+
customControls
|
|
22538
21777
|
}) => {
|
|
22539
21778
|
const lexicalConfig = {
|
|
22540
21779
|
namespace: "uniform",
|
|
@@ -22550,9 +21789,6 @@ var ParameterRichTextInner = ({
|
|
|
22550
21789
|
QuoteNode,
|
|
22551
21790
|
ParagraphNode2,
|
|
22552
21791
|
CustomCodeNode,
|
|
22553
|
-
TableNode,
|
|
22554
|
-
TableCellNode2,
|
|
22555
|
-
TableRowNode2,
|
|
22556
21792
|
...customNodes != null ? customNodes : []
|
|
22557
21793
|
],
|
|
22558
21794
|
theme: {
|
|
@@ -22585,15 +21821,12 @@ var ParameterRichTextInner = ({
|
|
|
22585
21821
|
}
|
|
22586
21822
|
},
|
|
22587
21823
|
quote: blockquoteElement,
|
|
22588
|
-
code: codeElement
|
|
22589
|
-
table: tableElement,
|
|
22590
|
-
tableCell: tableCellElement,
|
|
22591
|
-
tableCellHeader: tableHeaderElement
|
|
21824
|
+
code: codeElement
|
|
22592
21825
|
},
|
|
22593
21826
|
editable: !readOnly
|
|
22594
21827
|
};
|
|
22595
|
-
return /* @__PURE__ */
|
|
22596
|
-
/* @__PURE__ */
|
|
21828
|
+
return /* @__PURE__ */ jsxs87(Fragment20, { children: [
|
|
21829
|
+
/* @__PURE__ */ jsx131("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx131(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx131(
|
|
22597
21830
|
RichText,
|
|
22598
21831
|
{
|
|
22599
21832
|
onChange,
|
|
@@ -22602,11 +21835,8 @@ var ParameterRichTextInner = ({
|
|
|
22602
21835
|
onRichTextInit,
|
|
22603
21836
|
readOnly,
|
|
22604
21837
|
editorInputClassName,
|
|
22605
|
-
editorInputWrapperClassName,
|
|
22606
21838
|
variables,
|
|
22607
21839
|
customControls,
|
|
22608
|
-
onInsertTable,
|
|
22609
|
-
minimalInteractivity,
|
|
22610
21840
|
children
|
|
22611
21841
|
}
|
|
22612
21842
|
) }) }),
|
|
@@ -22629,20 +21859,18 @@ var RichText = ({
|
|
|
22629
21859
|
onRichTextInit,
|
|
22630
21860
|
readOnly,
|
|
22631
21861
|
editorInputClassName,
|
|
22632
|
-
editorInputWrapperClassName,
|
|
22633
21862
|
children,
|
|
22634
21863
|
variables,
|
|
22635
|
-
customControls
|
|
22636
|
-
onInsertTable,
|
|
22637
|
-
minimalInteractivity
|
|
21864
|
+
customControls
|
|
22638
21865
|
}) => {
|
|
22639
|
-
const
|
|
22640
|
-
|
|
21866
|
+
const editorContainerRef = useRef12(null);
|
|
21867
|
+
const [editor] = useLexicalComposerContext5();
|
|
21868
|
+
useEffect21(() => {
|
|
22641
21869
|
if (onRichTextInit) {
|
|
22642
21870
|
onRichTextInit(editor);
|
|
22643
21871
|
}
|
|
22644
21872
|
}, [editor, onRichTextInit]);
|
|
22645
|
-
|
|
21873
|
+
useEffect21(() => {
|
|
22646
21874
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
|
|
22647
21875
|
requestAnimationFrame(() => {
|
|
22648
21876
|
if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -22654,72 +21882,53 @@ var RichText = ({
|
|
|
22654
21882
|
removeUpdateListener();
|
|
22655
21883
|
};
|
|
22656
21884
|
}, [editor, onChange]);
|
|
22657
|
-
|
|
21885
|
+
useEffect21(() => {
|
|
22658
21886
|
editor.setEditable(!readOnly);
|
|
22659
21887
|
}, [editor, readOnly]);
|
|
22660
|
-
|
|
22661
|
-
|
|
22662
|
-
|
|
22663
|
-
|
|
22664
|
-
|
|
22665
|
-
|
|
22666
|
-
|
|
22667
|
-
|
|
22668
|
-
|
|
22669
|
-
|
|
22670
|
-
|
|
22671
|
-
|
|
22672
|
-
|
|
22673
|
-
|
|
22674
|
-
|
|
22675
|
-
|
|
22676
|
-
|
|
22677
|
-
|
|
22678
|
-
|
|
22679
|
-
|
|
22680
|
-
|
|
22681
|
-
|
|
22682
|
-
|
|
22683
|
-
|
|
22684
|
-
|
|
22685
|
-
|
|
22686
|
-
|
|
22687
|
-
|
|
22688
|
-
readOnly ? null : /* @__PURE__ */ jsx133(HistoryPlugin, {}),
|
|
22689
|
-
editorContainerRef ? /* @__PURE__ */ jsx133(
|
|
22690
|
-
LinkNodePlugin,
|
|
22691
|
-
{
|
|
22692
|
-
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
22693
|
-
getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
|
|
22694
|
-
var _a, _b;
|
|
22695
|
-
return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
|
|
22696
|
-
} : void 0,
|
|
22697
|
-
positioningAnchorEl: editorContainerRef
|
|
22698
|
-
}
|
|
22699
|
-
) : null,
|
|
22700
|
-
/* @__PURE__ */ jsx133(ListIndentPlugin, { maxDepth: 4 }),
|
|
22701
|
-
/* @__PURE__ */ jsx133(DisableStylesPlugin, {}),
|
|
22702
|
-
/* @__PURE__ */ jsx133(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
22703
|
-
/* @__PURE__ */ jsx133(Fragment21, { children })
|
|
22704
|
-
]
|
|
22705
|
-
}
|
|
22706
|
-
)
|
|
21888
|
+
return /* @__PURE__ */ jsxs87(Fragment20, { children: [
|
|
21889
|
+
readOnly ? null : /* @__PURE__ */ jsx131(RichTextToolbar_default, { config, customControls }),
|
|
21890
|
+
/* @__PURE__ */ jsxs87("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
|
|
21891
|
+
/* @__PURE__ */ jsx131(
|
|
21892
|
+
RichTextPlugin,
|
|
21893
|
+
{
|
|
21894
|
+
contentEditable: /* @__PURE__ */ jsx131(ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
21895
|
+
placeholder: /* @__PURE__ */ jsx131("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
21896
|
+
ErrorBoundary: LexicalErrorBoundary
|
|
21897
|
+
}
|
|
21898
|
+
),
|
|
21899
|
+
/* @__PURE__ */ jsx131(ListPlugin, {}),
|
|
21900
|
+
readOnly ? null : /* @__PURE__ */ jsx131(HistoryPlugin, {}),
|
|
21901
|
+
/* @__PURE__ */ jsx131(
|
|
21902
|
+
LinkNodePlugin,
|
|
21903
|
+
{
|
|
21904
|
+
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
21905
|
+
getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
|
|
21906
|
+
var _a, _b;
|
|
21907
|
+
return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
|
|
21908
|
+
} : void 0
|
|
21909
|
+
}
|
|
21910
|
+
),
|
|
21911
|
+
/* @__PURE__ */ jsx131(ListIndentPlugin, { maxDepth: 4 }),
|
|
21912
|
+
/* @__PURE__ */ jsx131(DisableStylesPlugin, {}),
|
|
21913
|
+
/* @__PURE__ */ jsx131(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
21914
|
+
/* @__PURE__ */ jsx131(Fragment20, { children })
|
|
21915
|
+
] })
|
|
22707
21916
|
] });
|
|
22708
21917
|
};
|
|
22709
21918
|
|
|
22710
21919
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
22711
|
-
import { forwardRef as
|
|
22712
|
-
import { jsx as
|
|
22713
|
-
var ParameterSelect =
|
|
21920
|
+
import { forwardRef as forwardRef22 } from "react";
|
|
21921
|
+
import { jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
|
|
21922
|
+
var ParameterSelect = forwardRef22(
|
|
22714
21923
|
({ defaultOption, options, ...props }, ref) => {
|
|
22715
21924
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22716
|
-
return /* @__PURE__ */
|
|
21925
|
+
return /* @__PURE__ */ jsx132(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx132(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
22717
21926
|
}
|
|
22718
21927
|
);
|
|
22719
|
-
var ParameterSelectInner =
|
|
21928
|
+
var ParameterSelectInner = forwardRef22(
|
|
22720
21929
|
({ defaultOption, options, ...props }, ref) => {
|
|
22721
21930
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
22722
|
-
return /* @__PURE__ */
|
|
21931
|
+
return /* @__PURE__ */ jsxs88(
|
|
22723
21932
|
"select",
|
|
22724
21933
|
{
|
|
22725
21934
|
css: [input3, selectInput],
|
|
@@ -22728,10 +21937,10 @@ var ParameterSelectInner = forwardRef23(
|
|
|
22728
21937
|
ref,
|
|
22729
21938
|
...props,
|
|
22730
21939
|
children: [
|
|
22731
|
-
defaultOption ? /* @__PURE__ */
|
|
21940
|
+
defaultOption ? /* @__PURE__ */ jsx132("option", { value: "", children: defaultOption }) : null,
|
|
22732
21941
|
options.map((option) => {
|
|
22733
21942
|
var _a;
|
|
22734
|
-
return /* @__PURE__ */
|
|
21943
|
+
return /* @__PURE__ */ jsx132("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
22735
21944
|
})
|
|
22736
21945
|
]
|
|
22737
21946
|
}
|
|
@@ -22740,15 +21949,15 @@ var ParameterSelectInner = forwardRef23(
|
|
|
22740
21949
|
);
|
|
22741
21950
|
|
|
22742
21951
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
22743
|
-
import { forwardRef as
|
|
22744
|
-
import { jsx as
|
|
22745
|
-
var ParameterTextarea =
|
|
21952
|
+
import { forwardRef as forwardRef23 } from "react";
|
|
21953
|
+
import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
|
|
21954
|
+
var ParameterTextarea = forwardRef23((props, ref) => {
|
|
22746
21955
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22747
|
-
return /* @__PURE__ */
|
|
21956
|
+
return /* @__PURE__ */ jsx133(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx133(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
22748
21957
|
});
|
|
22749
|
-
var ParameterTextareaInner =
|
|
21958
|
+
var ParameterTextareaInner = forwardRef23(({ ...props }, ref) => {
|
|
22750
21959
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
22751
|
-
return /* @__PURE__ */
|
|
21960
|
+
return /* @__PURE__ */ jsx133(
|
|
22752
21961
|
"textarea",
|
|
22753
21962
|
{
|
|
22754
21963
|
css: [input3, textarea2],
|
|
@@ -22761,26 +21970,26 @@ var ParameterTextareaInner = forwardRef24(({ ...props }, ref) => {
|
|
|
22761
21970
|
});
|
|
22762
21971
|
|
|
22763
21972
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
22764
|
-
import { forwardRef as
|
|
22765
|
-
import { jsx as
|
|
22766
|
-
var ParameterToggle =
|
|
21973
|
+
import { forwardRef as forwardRef24 } from "react";
|
|
21974
|
+
import { jsx as jsx134, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
|
|
21975
|
+
var ParameterToggle = forwardRef24((props, ref) => {
|
|
22767
21976
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22768
|
-
return /* @__PURE__ */
|
|
21977
|
+
return /* @__PURE__ */ jsx134(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx134(ParameterToggleInner, { ref, ...innerProps }) });
|
|
22769
21978
|
});
|
|
22770
|
-
var ParameterToggleInner =
|
|
21979
|
+
var ParameterToggleInner = forwardRef24(
|
|
22771
21980
|
({ children, ...props }, ref) => {
|
|
22772
21981
|
const { id, label } = useParameterShell();
|
|
22773
|
-
return /* @__PURE__ */
|
|
22774
|
-
/* @__PURE__ */
|
|
22775
|
-
/* @__PURE__ */
|
|
21982
|
+
return /* @__PURE__ */ jsxs89("label", { css: inputToggleLabel2, children: [
|
|
21983
|
+
/* @__PURE__ */ jsx134("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
21984
|
+
/* @__PURE__ */ jsx134("span", { css: inlineLabel2, children: label }),
|
|
22776
21985
|
children
|
|
22777
21986
|
] });
|
|
22778
21987
|
}
|
|
22779
21988
|
);
|
|
22780
21989
|
|
|
22781
21990
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
22782
|
-
import { css as
|
|
22783
|
-
var container3 =
|
|
21991
|
+
import { css as css99, keyframes as keyframes4 } from "@emotion/react";
|
|
21992
|
+
var container3 = css99`
|
|
22784
21993
|
background: var(--gray-50);
|
|
22785
21994
|
margin-block: var(--spacing-sm);
|
|
22786
21995
|
position: relative;
|
|
@@ -22790,13 +21999,13 @@ var container3 = css101`
|
|
|
22790
21999
|
border: solid 1px var(--gray-300);
|
|
22791
22000
|
`;
|
|
22792
22001
|
var themeMap = {
|
|
22793
|
-
primary:
|
|
22002
|
+
primary: css99`
|
|
22794
22003
|
--progress-color: var(--accent-light);
|
|
22795
22004
|
`,
|
|
22796
|
-
secondary:
|
|
22005
|
+
secondary: css99`
|
|
22797
22006
|
--progress-color: var(--accent-alt-light);
|
|
22798
22007
|
`,
|
|
22799
|
-
destructive:
|
|
22008
|
+
destructive: css99`
|
|
22800
22009
|
--progress-color: var(--brand-secondary-5);
|
|
22801
22010
|
`
|
|
22802
22011
|
};
|
|
@@ -22808,10 +22017,10 @@ var slidingBackgroundPosition = keyframes4`
|
|
|
22808
22017
|
background-position: 64px 0;
|
|
22809
22018
|
}
|
|
22810
22019
|
`;
|
|
22811
|
-
var determinate =
|
|
22020
|
+
var determinate = css99`
|
|
22812
22021
|
background-color: var(--progress-color);
|
|
22813
22022
|
`;
|
|
22814
|
-
var indeterminate =
|
|
22023
|
+
var indeterminate = css99`
|
|
22815
22024
|
background-image: linear-gradient(
|
|
22816
22025
|
45deg,
|
|
22817
22026
|
var(--progress-color) 25%,
|
|
@@ -22825,7 +22034,7 @@ var indeterminate = css101`
|
|
|
22825
22034
|
background-size: 64px 64px;
|
|
22826
22035
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
22827
22036
|
`;
|
|
22828
|
-
var bar =
|
|
22037
|
+
var bar = css99`
|
|
22829
22038
|
position: absolute;
|
|
22830
22039
|
inset: 0;
|
|
22831
22040
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -22833,7 +22042,7 @@ var bar = css101`
|
|
|
22833
22042
|
`;
|
|
22834
22043
|
|
|
22835
22044
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
22836
|
-
import { jsx as
|
|
22045
|
+
import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
|
|
22837
22046
|
function ProgressBar({
|
|
22838
22047
|
current,
|
|
22839
22048
|
max,
|
|
@@ -22843,7 +22052,7 @@ function ProgressBar({
|
|
|
22843
22052
|
}) {
|
|
22844
22053
|
const valueNow = Math.min(current, max);
|
|
22845
22054
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
22846
|
-
return /* @__PURE__ */
|
|
22055
|
+
return /* @__PURE__ */ jsx135(
|
|
22847
22056
|
"div",
|
|
22848
22057
|
{
|
|
22849
22058
|
css: container3,
|
|
@@ -22854,7 +22063,7 @@ function ProgressBar({
|
|
|
22854
22063
|
"aria-valuemax": max,
|
|
22855
22064
|
"aria-valuenow": valueNow,
|
|
22856
22065
|
...props,
|
|
22857
|
-
children: /* @__PURE__ */
|
|
22066
|
+
children: /* @__PURE__ */ jsx135(
|
|
22858
22067
|
"div",
|
|
22859
22068
|
{
|
|
22860
22069
|
css: [
|
|
@@ -22873,30 +22082,30 @@ function ProgressBar({
|
|
|
22873
22082
|
}
|
|
22874
22083
|
|
|
22875
22084
|
// src/components/ProgressList/ProgressList.tsx
|
|
22876
|
-
import { css as
|
|
22085
|
+
import { css as css101 } from "@emotion/react";
|
|
22877
22086
|
import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
|
|
22878
22087
|
import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
|
|
22879
22088
|
import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
|
|
22880
|
-
import { useMemo as
|
|
22089
|
+
import { useMemo as useMemo7 } from "react";
|
|
22881
22090
|
|
|
22882
22091
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
22883
|
-
import { css as
|
|
22884
|
-
var progressListStyles =
|
|
22092
|
+
import { css as css100 } from "@emotion/react";
|
|
22093
|
+
var progressListStyles = css100`
|
|
22885
22094
|
display: flex;
|
|
22886
22095
|
flex-direction: column;
|
|
22887
22096
|
gap: var(--spacing-sm);
|
|
22888
22097
|
list-style-type: none;
|
|
22889
22098
|
`;
|
|
22890
|
-
var progressListItemStyles =
|
|
22099
|
+
var progressListItemStyles = css100`
|
|
22891
22100
|
display: flex;
|
|
22892
22101
|
gap: var(--spacing-base);
|
|
22893
22102
|
align-items: center;
|
|
22894
22103
|
`;
|
|
22895
22104
|
|
|
22896
22105
|
// src/components/ProgressList/ProgressList.tsx
|
|
22897
|
-
import { jsx as
|
|
22106
|
+
import { jsx as jsx136, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
|
|
22898
22107
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
22899
|
-
const itemsWithStatus =
|
|
22108
|
+
const itemsWithStatus = useMemo7(() => {
|
|
22900
22109
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
22901
22110
|
return items.map((item, index) => {
|
|
22902
22111
|
let status = "queued";
|
|
@@ -22908,8 +22117,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
22908
22117
|
return { ...item, status };
|
|
22909
22118
|
});
|
|
22910
22119
|
}, [items, inProgressId]);
|
|
22911
|
-
return /* @__PURE__ */
|
|
22912
|
-
return /* @__PURE__ */
|
|
22120
|
+
return /* @__PURE__ */ jsx136("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
22121
|
+
return /* @__PURE__ */ jsx136(
|
|
22913
22122
|
ProgressListItem,
|
|
22914
22123
|
{
|
|
22915
22124
|
status,
|
|
@@ -22929,7 +22138,7 @@ var ProgressListItem = ({
|
|
|
22929
22138
|
errorLevel = "danger",
|
|
22930
22139
|
autoEllipsis = false
|
|
22931
22140
|
}) => {
|
|
22932
|
-
const icon =
|
|
22141
|
+
const icon = useMemo7(() => {
|
|
22933
22142
|
if (error) {
|
|
22934
22143
|
return warningIcon;
|
|
22935
22144
|
}
|
|
@@ -22940,14 +22149,14 @@ var ProgressListItem = ({
|
|
|
22940
22149
|
};
|
|
22941
22150
|
return iconPerStatus[status];
|
|
22942
22151
|
}, [status, error]);
|
|
22943
|
-
const statusStyles =
|
|
22152
|
+
const statusStyles = useMemo7(() => {
|
|
22944
22153
|
if (error) {
|
|
22945
|
-
return errorLevel === "caution" ?
|
|
22154
|
+
return errorLevel === "caution" ? css101`
|
|
22946
22155
|
color: rgb(161, 98, 7);
|
|
22947
22156
|
& svg {
|
|
22948
22157
|
color: rgb(250, 204, 21);
|
|
22949
22158
|
}
|
|
22950
|
-
` :
|
|
22159
|
+
` : css101`
|
|
22951
22160
|
color: rgb(185, 28, 28);
|
|
22952
22161
|
& svg {
|
|
22953
22162
|
color: var(--brand-primary-2);
|
|
@@ -22955,38 +22164,38 @@ var ProgressListItem = ({
|
|
|
22955
22164
|
`;
|
|
22956
22165
|
}
|
|
22957
22166
|
const colorPerStatus = {
|
|
22958
|
-
completed:
|
|
22167
|
+
completed: css101`
|
|
22959
22168
|
opacity: 0.75;
|
|
22960
22169
|
`,
|
|
22961
|
-
inProgress:
|
|
22170
|
+
inProgress: css101`
|
|
22962
22171
|
-webkit-text-stroke-width: thin;
|
|
22963
22172
|
`,
|
|
22964
|
-
queued:
|
|
22173
|
+
queued: css101`
|
|
22965
22174
|
opacity: 0.5;
|
|
22966
22175
|
`
|
|
22967
22176
|
};
|
|
22968
22177
|
return colorPerStatus[status];
|
|
22969
22178
|
}, [status, error, errorLevel]);
|
|
22970
|
-
return /* @__PURE__ */
|
|
22971
|
-
/* @__PURE__ */
|
|
22972
|
-
/* @__PURE__ */
|
|
22179
|
+
return /* @__PURE__ */ jsxs90("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
22180
|
+
/* @__PURE__ */ jsx136(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx136("div", { children: /* @__PURE__ */ jsx136(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
22181
|
+
/* @__PURE__ */ jsxs90("div", { children: [
|
|
22973
22182
|
children,
|
|
22974
|
-
/* @__PURE__ */
|
|
22183
|
+
/* @__PURE__ */ jsx136("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
22975
22184
|
] })
|
|
22976
22185
|
] });
|
|
22977
22186
|
};
|
|
22978
22187
|
|
|
22979
22188
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
22980
|
-
import { css as
|
|
22189
|
+
import { css as css103 } from "@emotion/react";
|
|
22981
22190
|
import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
|
|
22982
|
-
import { useCallback as
|
|
22191
|
+
import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo8, useRef as useRef13, useState as useState18 } from "react";
|
|
22983
22192
|
|
|
22984
22193
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
22985
|
-
import { css as
|
|
22986
|
-
var segmentedControlRootStyles =
|
|
22194
|
+
import { css as css102 } from "@emotion/react";
|
|
22195
|
+
var segmentedControlRootStyles = css102`
|
|
22987
22196
|
position: relative;
|
|
22988
22197
|
`;
|
|
22989
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
22198
|
+
var segmentedControlScrollIndicatorsStyles = css102`
|
|
22990
22199
|
position: absolute;
|
|
22991
22200
|
inset: 0;
|
|
22992
22201
|
z-index: 1;
|
|
@@ -23014,17 +22223,17 @@ var segmentedControlScrollIndicatorsStyles = css104`
|
|
|
23014
22223
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
23015
22224
|
}
|
|
23016
22225
|
`;
|
|
23017
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
22226
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = css102`
|
|
23018
22227
|
&::before {
|
|
23019
22228
|
opacity: 1;
|
|
23020
22229
|
}
|
|
23021
22230
|
`;
|
|
23022
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
22231
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = css102`
|
|
23023
22232
|
&::after {
|
|
23024
22233
|
opacity: 1;
|
|
23025
22234
|
}
|
|
23026
22235
|
`;
|
|
23027
|
-
var segmentedControlWrapperStyles =
|
|
22236
|
+
var segmentedControlWrapperStyles = css102`
|
|
23028
22237
|
overflow-y: auto;
|
|
23029
22238
|
scroll-behavior: smooth;
|
|
23030
22239
|
scrollbar-width: none;
|
|
@@ -23033,7 +22242,7 @@ var segmentedControlWrapperStyles = css104`
|
|
|
23033
22242
|
height: 0px;
|
|
23034
22243
|
}
|
|
23035
22244
|
`;
|
|
23036
|
-
var segmentedControlStyles =
|
|
22245
|
+
var segmentedControlStyles = css102`
|
|
23037
22246
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
23038
22247
|
--segmented-control-border-width: 1px;
|
|
23039
22248
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -23052,14 +22261,14 @@ var segmentedControlStyles = css104`
|
|
|
23052
22261
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
23053
22262
|
font-size: var(--fs-xs);
|
|
23054
22263
|
`;
|
|
23055
|
-
var segmentedControlVerticalStyles =
|
|
22264
|
+
var segmentedControlVerticalStyles = css102`
|
|
23056
22265
|
flex-direction: column;
|
|
23057
22266
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
23058
22267
|
var(--segmented-control-rounded-value) 0 0;
|
|
23059
22268
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
23060
22269
|
var(--segmented-control-rounded-value);
|
|
23061
22270
|
`;
|
|
23062
|
-
var segmentedControlItemStyles =
|
|
22271
|
+
var segmentedControlItemStyles = css102`
|
|
23063
22272
|
&:first-of-type label {
|
|
23064
22273
|
border-radius: var(--segmented-control-first-border-radius);
|
|
23065
22274
|
}
|
|
@@ -23067,10 +22276,10 @@ var segmentedControlItemStyles = css104`
|
|
|
23067
22276
|
border-radius: var(--segmented-control-last-border-radius);
|
|
23068
22277
|
}
|
|
23069
22278
|
`;
|
|
23070
|
-
var segmentedControlInputStyles =
|
|
22279
|
+
var segmentedControlInputStyles = css102`
|
|
23071
22280
|
${accessibleHidden}
|
|
23072
22281
|
`;
|
|
23073
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
22282
|
+
var segmentedControlLabelStyles = (checked, disabled2) => css102`
|
|
23074
22283
|
position: relative;
|
|
23075
22284
|
display: flex;
|
|
23076
22285
|
align-items: center;
|
|
@@ -23137,25 +22346,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css104`
|
|
|
23137
22346
|
`}
|
|
23138
22347
|
}
|
|
23139
22348
|
`;
|
|
23140
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
22349
|
+
var segmentedControlLabelIconOnlyStyles = css102`
|
|
23141
22350
|
padding-inline: 0.5em;
|
|
23142
22351
|
`;
|
|
23143
|
-
var segmentedControlLabelCheckStyles =
|
|
22352
|
+
var segmentedControlLabelCheckStyles = css102`
|
|
23144
22353
|
opacity: 0.5;
|
|
23145
22354
|
`;
|
|
23146
|
-
var segmentedControlLabelContentStyles =
|
|
22355
|
+
var segmentedControlLabelContentStyles = css102`
|
|
23147
22356
|
display: flex;
|
|
23148
22357
|
align-items: center;
|
|
23149
22358
|
justify-content: center;
|
|
23150
22359
|
gap: var(--spacing-sm);
|
|
23151
22360
|
height: 100%;
|
|
23152
22361
|
`;
|
|
23153
|
-
var segmentedControlLabelTextStyles =
|
|
22362
|
+
var segmentedControlLabelTextStyles = css102`
|
|
23154
22363
|
white-space: nowrap;
|
|
23155
22364
|
`;
|
|
23156
22365
|
|
|
23157
22366
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
23158
|
-
import { jsx as
|
|
22367
|
+
import { jsx as jsx137, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
|
|
23159
22368
|
var SegmentedControl = ({
|
|
23160
22369
|
name,
|
|
23161
22370
|
options,
|
|
@@ -23171,9 +22380,9 @@ var SegmentedControl = ({
|
|
|
23171
22380
|
...props
|
|
23172
22381
|
}) => {
|
|
23173
22382
|
const wrapperRef = useRef13(null);
|
|
23174
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] =
|
|
23175
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] =
|
|
23176
|
-
const onOptionChange =
|
|
22383
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState18(false);
|
|
22384
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState18(false);
|
|
22385
|
+
const onOptionChange = useCallback12(
|
|
23177
22386
|
(event) => {
|
|
23178
22387
|
if (event.target.checked) {
|
|
23179
22388
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -23181,19 +22390,19 @@ var SegmentedControl = ({
|
|
|
23181
22390
|
},
|
|
23182
22391
|
[options, onChange]
|
|
23183
22392
|
);
|
|
23184
|
-
const sizeStyles =
|
|
22393
|
+
const sizeStyles = useMemo8(() => {
|
|
23185
22394
|
const map = {
|
|
23186
|
-
sm:
|
|
23187
|
-
md:
|
|
23188
|
-
lg:
|
|
23189
|
-
xl:
|
|
22395
|
+
sm: css103({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
22396
|
+
md: css103({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
22397
|
+
lg: css103({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
22398
|
+
xl: css103({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
23190
22399
|
};
|
|
23191
22400
|
return map[size];
|
|
23192
22401
|
}, [size]);
|
|
23193
|
-
const isIconOnly =
|
|
22402
|
+
const isIconOnly = useMemo8(() => {
|
|
23194
22403
|
return options.every((option) => option && option.icon && !option.label);
|
|
23195
22404
|
}, [options]);
|
|
23196
|
-
|
|
22405
|
+
useEffect22(() => {
|
|
23197
22406
|
const wrapperElement = wrapperRef.current;
|
|
23198
22407
|
const onScroll = () => {
|
|
23199
22408
|
if (!wrapperElement) {
|
|
@@ -23214,8 +22423,8 @@ var SegmentedControl = ({
|
|
|
23214
22423
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
23215
22424
|
};
|
|
23216
22425
|
}, []);
|
|
23217
|
-
return /* @__PURE__ */
|
|
23218
|
-
/* @__PURE__ */
|
|
22426
|
+
return /* @__PURE__ */ jsxs91("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
22427
|
+
/* @__PURE__ */ jsx137("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx137(
|
|
23219
22428
|
"div",
|
|
23220
22429
|
{
|
|
23221
22430
|
css: [
|
|
@@ -23231,12 +22440,12 @@ var SegmentedControl = ({
|
|
|
23231
22440
|
}
|
|
23232
22441
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
23233
22442
|
const isDisabled = disabled2 || option.disabled;
|
|
23234
|
-
return /* @__PURE__ */
|
|
22443
|
+
return /* @__PURE__ */ jsx137(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx137(
|
|
23235
22444
|
"div",
|
|
23236
22445
|
{
|
|
23237
22446
|
css: segmentedControlItemStyles,
|
|
23238
22447
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
23239
|
-
children: /* @__PURE__ */
|
|
22448
|
+
children: /* @__PURE__ */ jsxs91(
|
|
23240
22449
|
"label",
|
|
23241
22450
|
{
|
|
23242
22451
|
css: [
|
|
@@ -23245,7 +22454,7 @@ var SegmentedControl = ({
|
|
|
23245
22454
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
23246
22455
|
],
|
|
23247
22456
|
children: [
|
|
23248
|
-
/* @__PURE__ */
|
|
22457
|
+
/* @__PURE__ */ jsx137(
|
|
23249
22458
|
"input",
|
|
23250
22459
|
{
|
|
23251
22460
|
css: segmentedControlInputStyles,
|
|
@@ -23257,10 +22466,10 @@ var SegmentedControl = ({
|
|
|
23257
22466
|
disabled: isDisabled
|
|
23258
22467
|
}
|
|
23259
22468
|
),
|
|
23260
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */
|
|
23261
|
-
/* @__PURE__ */
|
|
23262
|
-
!option.icon ? null : /* @__PURE__ */
|
|
23263
|
-
!text || hideOptionText ? null : /* @__PURE__ */
|
|
22469
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx137(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
22470
|
+
/* @__PURE__ */ jsxs91("span", { css: segmentedControlLabelContentStyles, children: [
|
|
22471
|
+
!option.icon ? null : /* @__PURE__ */ jsx137(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
22472
|
+
!text || hideOptionText ? null : /* @__PURE__ */ jsx137("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
23264
22473
|
] })
|
|
23265
22474
|
]
|
|
23266
22475
|
}
|
|
@@ -23270,7 +22479,7 @@ var SegmentedControl = ({
|
|
|
23270
22479
|
})
|
|
23271
22480
|
}
|
|
23272
22481
|
) }),
|
|
23273
|
-
/* @__PURE__ */
|
|
22482
|
+
/* @__PURE__ */ jsx137(
|
|
23274
22483
|
"div",
|
|
23275
22484
|
{
|
|
23276
22485
|
css: [
|
|
@@ -23284,18 +22493,18 @@ var SegmentedControl = ({
|
|
|
23284
22493
|
};
|
|
23285
22494
|
|
|
23286
22495
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
23287
|
-
import { css as
|
|
22496
|
+
import { css as css104, keyframes as keyframes5 } from "@emotion/react";
|
|
23288
22497
|
var lightFadingOut = keyframes5`
|
|
23289
22498
|
from { opacity: 0.1; }
|
|
23290
22499
|
to { opacity: 0.025; }
|
|
23291
22500
|
`;
|
|
23292
|
-
var skeletonStyles =
|
|
22501
|
+
var skeletonStyles = css104`
|
|
23293
22502
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
23294
22503
|
background-color: var(--gray-900);
|
|
23295
22504
|
`;
|
|
23296
22505
|
|
|
23297
22506
|
// src/components/Skeleton/Skeleton.tsx
|
|
23298
|
-
import { jsx as
|
|
22507
|
+
import { jsx as jsx138 } from "@emotion/react/jsx-runtime";
|
|
23299
22508
|
var Skeleton = ({
|
|
23300
22509
|
width = "100%",
|
|
23301
22510
|
height = "1.25rem",
|
|
@@ -23303,7 +22512,7 @@ var Skeleton = ({
|
|
|
23303
22512
|
circle = false,
|
|
23304
22513
|
children,
|
|
23305
22514
|
...otherProps
|
|
23306
|
-
}) => /* @__PURE__ */
|
|
22515
|
+
}) => /* @__PURE__ */ jsx138(
|
|
23307
22516
|
"div",
|
|
23308
22517
|
{
|
|
23309
22518
|
css: [
|
|
@@ -23323,11 +22532,11 @@ var Skeleton = ({
|
|
|
23323
22532
|
);
|
|
23324
22533
|
|
|
23325
22534
|
// src/components/Switch/Switch.tsx
|
|
23326
|
-
import { forwardRef as
|
|
22535
|
+
import { forwardRef as forwardRef25 } from "react";
|
|
23327
22536
|
|
|
23328
22537
|
// src/components/Switch/Switch.styles.ts
|
|
23329
|
-
import { css as
|
|
23330
|
-
var SwitchInputContainer =
|
|
22538
|
+
import { css as css105 } from "@emotion/react";
|
|
22539
|
+
var SwitchInputContainer = css105`
|
|
23331
22540
|
cursor: pointer;
|
|
23332
22541
|
display: inline-block;
|
|
23333
22542
|
position: relative;
|
|
@@ -23336,7 +22545,7 @@ var SwitchInputContainer = css107`
|
|
|
23336
22545
|
vertical-align: middle;
|
|
23337
22546
|
user-select: none;
|
|
23338
22547
|
`;
|
|
23339
|
-
var SwitchInput = (size) =>
|
|
22548
|
+
var SwitchInput = (size) => css105`
|
|
23340
22549
|
appearance: none;
|
|
23341
22550
|
border-radius: var(--rounded-full);
|
|
23342
22551
|
background-color: var(--white);
|
|
@@ -23347,7 +22556,8 @@ var SwitchInput = (size) => css107`
|
|
|
23347
22556
|
width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
23348
22557
|
height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
23349
22558
|
margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
|
|
23350
|
-
transition:
|
|
22559
|
+
transition:
|
|
22560
|
+
transform var(--duration-fast) var(--timing-ease-out),
|
|
23351
22561
|
background-color var(--duration-fast) var(--timing-ease-out),
|
|
23352
22562
|
background-image var(--duration-fast) var(--timing-ease-out);
|
|
23353
22563
|
z-index: var(--z-10);
|
|
@@ -23375,7 +22585,7 @@ var SwitchInput = (size) => css107`
|
|
|
23375
22585
|
cursor: not-allowed;
|
|
23376
22586
|
}
|
|
23377
22587
|
`;
|
|
23378
|
-
var SwitchInputDisabled =
|
|
22588
|
+
var SwitchInputDisabled = css105`
|
|
23379
22589
|
opacity: var(--opacity-50);
|
|
23380
22590
|
cursor: not-allowed;
|
|
23381
22591
|
|
|
@@ -23383,7 +22593,7 @@ var SwitchInputDisabled = css107`
|
|
|
23383
22593
|
cursor: not-allowed;
|
|
23384
22594
|
}
|
|
23385
22595
|
`;
|
|
23386
|
-
var SwitchInputLabel = (size) =>
|
|
22596
|
+
var SwitchInputLabel = (size) => css105`
|
|
23387
22597
|
align-items: center;
|
|
23388
22598
|
color: var(--typography-base);
|
|
23389
22599
|
display: inline-flex;
|
|
@@ -23405,32 +22615,32 @@ var SwitchInputLabel = (size) => css107`
|
|
|
23405
22615
|
top: 0;
|
|
23406
22616
|
}
|
|
23407
22617
|
`;
|
|
23408
|
-
var SwitchText = (size) =>
|
|
22618
|
+
var SwitchText = (size) => css105`
|
|
23409
22619
|
color: var(--gray-500);
|
|
23410
22620
|
font-size: var(--fs-sm);
|
|
23411
22621
|
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
23412
22622
|
`;
|
|
23413
22623
|
|
|
23414
22624
|
// src/components/Switch/Switch.tsx
|
|
23415
|
-
import { Fragment as
|
|
23416
|
-
var Switch =
|
|
22625
|
+
import { Fragment as Fragment21, jsx as jsx139, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
|
|
22626
|
+
var Switch = forwardRef25(
|
|
23417
22627
|
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
23418
22628
|
let additionalText = infoText;
|
|
23419
22629
|
if (infoText && toggleText) {
|
|
23420
22630
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
23421
22631
|
}
|
|
23422
|
-
return /* @__PURE__ */
|
|
23423
|
-
/* @__PURE__ */
|
|
22632
|
+
return /* @__PURE__ */ jsxs92(Fragment21, { children: [
|
|
22633
|
+
/* @__PURE__ */ jsxs92(
|
|
23424
22634
|
"label",
|
|
23425
22635
|
{
|
|
23426
22636
|
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
23427
22637
|
children: [
|
|
23428
|
-
/* @__PURE__ */
|
|
23429
|
-
/* @__PURE__ */
|
|
22638
|
+
/* @__PURE__ */ jsx139("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
22639
|
+
/* @__PURE__ */ jsx139("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
23430
22640
|
]
|
|
23431
22641
|
}
|
|
23432
22642
|
),
|
|
23433
|
-
additionalText ? /* @__PURE__ */
|
|
22643
|
+
additionalText ? /* @__PURE__ */ jsx139("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
23434
22644
|
children
|
|
23435
22645
|
] });
|
|
23436
22646
|
}
|
|
@@ -23440,8 +22650,8 @@ var Switch = forwardRef26(
|
|
|
23440
22650
|
import * as React24 from "react";
|
|
23441
22651
|
|
|
23442
22652
|
// src/components/Table/Table.styles.ts
|
|
23443
|
-
import { css as
|
|
23444
|
-
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) =>
|
|
22653
|
+
import { css as css106 } from "@emotion/react";
|
|
22654
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css106`
|
|
23445
22655
|
border-bottom: 1px solid var(--gray-400);
|
|
23446
22656
|
border-collapse: collapse;
|
|
23447
22657
|
min-width: 100%;
|
|
@@ -23461,54 +22671,54 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css108`
|
|
|
23461
22671
|
background-color: var(--gray-50);
|
|
23462
22672
|
}
|
|
23463
22673
|
`;
|
|
23464
|
-
var tableHead =
|
|
22674
|
+
var tableHead = css106`
|
|
23465
22675
|
color: var(--typography-base);
|
|
23466
22676
|
text-align: left;
|
|
23467
22677
|
`;
|
|
23468
|
-
var tableRow =
|
|
22678
|
+
var tableRow = css106`
|
|
23469
22679
|
border-bottom: 1px solid var(--gray-100);
|
|
23470
22680
|
`;
|
|
23471
|
-
var tableCellHead =
|
|
22681
|
+
var tableCellHead = css106`
|
|
23472
22682
|
font-size: var(--fs-sm);
|
|
23473
22683
|
text-transform: uppercase;
|
|
23474
22684
|
font-weight: var(--fw-bold);
|
|
23475
22685
|
`;
|
|
23476
22686
|
|
|
23477
22687
|
// src/components/Table/Table.tsx
|
|
23478
|
-
import { jsx as
|
|
22688
|
+
import { jsx as jsx140 } from "@emotion/react/jsx-runtime";
|
|
23479
22689
|
var Table = React24.forwardRef(
|
|
23480
22690
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
23481
|
-
return /* @__PURE__ */
|
|
22691
|
+
return /* @__PURE__ */ jsx140("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
23482
22692
|
}
|
|
23483
22693
|
);
|
|
23484
22694
|
var TableHead = React24.forwardRef(
|
|
23485
22695
|
({ children, ...otherProps }, ref) => {
|
|
23486
|
-
return /* @__PURE__ */
|
|
22696
|
+
return /* @__PURE__ */ jsx140("thead", { ref, css: tableHead, ...otherProps, children });
|
|
23487
22697
|
}
|
|
23488
22698
|
);
|
|
23489
22699
|
var TableBody = React24.forwardRef(
|
|
23490
22700
|
({ children, ...otherProps }, ref) => {
|
|
23491
|
-
return /* @__PURE__ */
|
|
22701
|
+
return /* @__PURE__ */ jsx140("tbody", { ref, ...otherProps, children });
|
|
23492
22702
|
}
|
|
23493
22703
|
);
|
|
23494
22704
|
var TableFoot = React24.forwardRef(
|
|
23495
22705
|
({ children, ...otherProps }, ref) => {
|
|
23496
|
-
return /* @__PURE__ */
|
|
22706
|
+
return /* @__PURE__ */ jsx140("tfoot", { ref, ...otherProps, children });
|
|
23497
22707
|
}
|
|
23498
22708
|
);
|
|
23499
22709
|
var TableRow = React24.forwardRef(
|
|
23500
22710
|
({ children, ...otherProps }, ref) => {
|
|
23501
|
-
return /* @__PURE__ */
|
|
22711
|
+
return /* @__PURE__ */ jsx140("tr", { ref, css: tableRow, ...otherProps, children });
|
|
23502
22712
|
}
|
|
23503
22713
|
);
|
|
23504
22714
|
var TableCellHead = React24.forwardRef(
|
|
23505
22715
|
({ children, ...otherProps }, ref) => {
|
|
23506
|
-
return /* @__PURE__ */
|
|
22716
|
+
return /* @__PURE__ */ jsx140("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
23507
22717
|
}
|
|
23508
22718
|
);
|
|
23509
22719
|
var TableCellData = React24.forwardRef(
|
|
23510
22720
|
({ children, ...otherProps }, ref) => {
|
|
23511
|
-
return /* @__PURE__ */
|
|
22721
|
+
return /* @__PURE__ */ jsx140("td", { ref, ...otherProps, children });
|
|
23512
22722
|
}
|
|
23513
22723
|
);
|
|
23514
22724
|
|
|
@@ -23520,11 +22730,11 @@ import {
|
|
|
23520
22730
|
TabProvider as AriakitTabProvider,
|
|
23521
22731
|
useTabStore as useAriakitTabStore
|
|
23522
22732
|
} from "@ariakit/react";
|
|
23523
|
-
import { useCallback as
|
|
22733
|
+
import { useCallback as useCallback13, useEffect as useEffect23, useMemo as useMemo9 } from "react";
|
|
23524
22734
|
|
|
23525
22735
|
// src/components/Tabs/Tabs.styles.ts
|
|
23526
|
-
import { css as
|
|
23527
|
-
var tabButtonStyles =
|
|
22736
|
+
import { css as css107 } from "@emotion/react";
|
|
22737
|
+
var tabButtonStyles = css107`
|
|
23528
22738
|
align-items: center;
|
|
23529
22739
|
border: 0;
|
|
23530
22740
|
height: 2.5rem;
|
|
@@ -23541,14 +22751,14 @@ var tabButtonStyles = css109`
|
|
|
23541
22751
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
23542
22752
|
}
|
|
23543
22753
|
`;
|
|
23544
|
-
var tabButtonGroupStyles =
|
|
22754
|
+
var tabButtonGroupStyles = css107`
|
|
23545
22755
|
display: flex;
|
|
23546
22756
|
gap: var(--spacing-base);
|
|
23547
22757
|
border-bottom: 1px solid var(--gray-300);
|
|
23548
22758
|
`;
|
|
23549
22759
|
|
|
23550
22760
|
// src/components/Tabs/Tabs.tsx
|
|
23551
|
-
import { jsx as
|
|
22761
|
+
import { jsx as jsx141 } from "@emotion/react/jsx-runtime";
|
|
23552
22762
|
var useCurrentTab = () => {
|
|
23553
22763
|
const context = useAriakitTabStore();
|
|
23554
22764
|
if (!context) {
|
|
@@ -23564,12 +22774,12 @@ var Tabs = ({
|
|
|
23564
22774
|
manual,
|
|
23565
22775
|
...props
|
|
23566
22776
|
}) => {
|
|
23567
|
-
const selected =
|
|
22777
|
+
const selected = useMemo9(() => {
|
|
23568
22778
|
if (selectedId) return selectedId;
|
|
23569
22779
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
23570
22780
|
}, [selectedId, useHashForState]);
|
|
23571
22781
|
const tab = useAriakitTabStore({ ...props, selectOnMove: !manual, selectedId: selected });
|
|
23572
|
-
const onTabSelect =
|
|
22782
|
+
const onTabSelect = useCallback13(
|
|
23573
22783
|
(value) => {
|
|
23574
22784
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
23575
22785
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -23580,33 +22790,33 @@ var Tabs = ({
|
|
|
23580
22790
|
},
|
|
23581
22791
|
[onSelectedIdChange, useHashForState]
|
|
23582
22792
|
);
|
|
23583
|
-
|
|
22793
|
+
useEffect23(() => {
|
|
23584
22794
|
if (selected && selected !== tab.getState().activeId) {
|
|
23585
22795
|
tab.setSelectedId(selected);
|
|
23586
22796
|
}
|
|
23587
22797
|
}, [selected, tab]);
|
|
23588
|
-
return /* @__PURE__ */
|
|
22798
|
+
return /* @__PURE__ */ jsx141(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
23589
22799
|
};
|
|
23590
22800
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
23591
|
-
return /* @__PURE__ */
|
|
22801
|
+
return /* @__PURE__ */ jsx141(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
|
|
23592
22802
|
};
|
|
23593
22803
|
var TabButton = ({
|
|
23594
22804
|
children,
|
|
23595
22805
|
id,
|
|
23596
22806
|
...props
|
|
23597
22807
|
}) => {
|
|
23598
|
-
return /* @__PURE__ */
|
|
22808
|
+
return /* @__PURE__ */ jsx141(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
23599
22809
|
};
|
|
23600
22810
|
var TabContent = ({
|
|
23601
22811
|
children,
|
|
23602
22812
|
...props
|
|
23603
22813
|
}) => {
|
|
23604
|
-
return /* @__PURE__ */
|
|
22814
|
+
return /* @__PURE__ */ jsx141(AriakitTabPanel, { ...props, children });
|
|
23605
22815
|
};
|
|
23606
22816
|
|
|
23607
22817
|
// src/components/Validation/StatusBullet.styles.ts
|
|
23608
|
-
import { css as
|
|
23609
|
-
var StatusBulletContainer =
|
|
22818
|
+
import { css as css108 } from "@emotion/react";
|
|
22819
|
+
var StatusBulletContainer = css108`
|
|
23610
22820
|
align-items: center;
|
|
23611
22821
|
align-self: center;
|
|
23612
22822
|
color: var(--gray-500);
|
|
@@ -23623,33 +22833,33 @@ var StatusBulletContainer = css110`
|
|
|
23623
22833
|
display: block;
|
|
23624
22834
|
}
|
|
23625
22835
|
`;
|
|
23626
|
-
var StatusBulletBase =
|
|
22836
|
+
var StatusBulletBase = css108`
|
|
23627
22837
|
font-size: var(--fs-sm);
|
|
23628
22838
|
&:before {
|
|
23629
22839
|
width: var(--fs-xs);
|
|
23630
22840
|
height: var(--fs-xs);
|
|
23631
22841
|
}
|
|
23632
22842
|
`;
|
|
23633
|
-
var StatusBulletSmall =
|
|
22843
|
+
var StatusBulletSmall = css108`
|
|
23634
22844
|
font-size: var(--fs-xs);
|
|
23635
22845
|
&:before {
|
|
23636
22846
|
width: var(--fs-xxs);
|
|
23637
22847
|
height: var(--fs-xxs);
|
|
23638
22848
|
}
|
|
23639
22849
|
`;
|
|
23640
|
-
var StatusDraft =
|
|
22850
|
+
var StatusDraft = css108`
|
|
23641
22851
|
&:before {
|
|
23642
22852
|
background: var(--white);
|
|
23643
22853
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
23644
22854
|
}
|
|
23645
22855
|
`;
|
|
23646
|
-
var StatusModified =
|
|
22856
|
+
var StatusModified = css108`
|
|
23647
22857
|
&:before {
|
|
23648
22858
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
23649
22859
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
23650
22860
|
}
|
|
23651
22861
|
`;
|
|
23652
|
-
var StatusError =
|
|
22862
|
+
var StatusError = css108`
|
|
23653
22863
|
color: var(--error);
|
|
23654
22864
|
&:before {
|
|
23655
22865
|
/* TODO: replace this with an svg icon */
|
|
@@ -23662,29 +22872,29 @@ var StatusError = css110`
|
|
|
23662
22872
|
);
|
|
23663
22873
|
}
|
|
23664
22874
|
`;
|
|
23665
|
-
var StatusPublished =
|
|
22875
|
+
var StatusPublished = css108`
|
|
23666
22876
|
&:before {
|
|
23667
22877
|
background: var(--accent-dark);
|
|
23668
22878
|
}
|
|
23669
22879
|
`;
|
|
23670
|
-
var StatusOrphan =
|
|
22880
|
+
var StatusOrphan = css108`
|
|
23671
22881
|
&:before {
|
|
23672
22882
|
background: var(--brand-secondary-5);
|
|
23673
22883
|
}
|
|
23674
22884
|
`;
|
|
23675
|
-
var StatusUnknown =
|
|
22885
|
+
var StatusUnknown = css108`
|
|
23676
22886
|
&:before {
|
|
23677
22887
|
background: var(--gray-800);
|
|
23678
22888
|
}
|
|
23679
22889
|
`;
|
|
23680
|
-
var StatusDeleted =
|
|
22890
|
+
var StatusDeleted = css108`
|
|
23681
22891
|
&:before {
|
|
23682
22892
|
background: var(--error);
|
|
23683
22893
|
}
|
|
23684
22894
|
`;
|
|
23685
22895
|
|
|
23686
22896
|
// src/components/Validation/StatusBullet.tsx
|
|
23687
|
-
import { jsx as
|
|
22897
|
+
import { jsx as jsx142 } from "@emotion/react/jsx-runtime";
|
|
23688
22898
|
var StatusBullet = ({
|
|
23689
22899
|
status,
|
|
23690
22900
|
hideText = false,
|
|
@@ -23704,7 +22914,7 @@ var StatusBullet = ({
|
|
|
23704
22914
|
Deleted: StatusDeleted
|
|
23705
22915
|
};
|
|
23706
22916
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
23707
|
-
return /* @__PURE__ */
|
|
22917
|
+
return /* @__PURE__ */ jsx142(
|
|
23708
22918
|
"span",
|
|
23709
22919
|
{
|
|
23710
22920
|
role: "status",
|
|
@@ -23963,12 +23173,16 @@ export {
|
|
|
23963
23173
|
supports,
|
|
23964
23174
|
textInput,
|
|
23965
23175
|
toast,
|
|
23176
|
+
uniformAiIcon,
|
|
23966
23177
|
uniformComponentIcon,
|
|
23967
23178
|
uniformComponentPatternIcon,
|
|
23968
23179
|
uniformCompositionPatternIcon,
|
|
23180
|
+
uniformConditionalValuesIcon,
|
|
23969
23181
|
uniformContentTypeIcon,
|
|
23970
23182
|
uniformEntryIcon,
|
|
23971
23183
|
uniformEntryPatternIcon,
|
|
23184
|
+
uniformLocaleDisabledIcon,
|
|
23185
|
+
uniformLocaleIcon,
|
|
23972
23186
|
useBreakpoint,
|
|
23973
23187
|
useCloseCurrentDrawer,
|
|
23974
23188
|
useCurrentDrawer,
|
|
@@ -23979,7 +23193,6 @@ export {
|
|
|
23979
23193
|
useOutsideClick,
|
|
23980
23194
|
useParameterShell,
|
|
23981
23195
|
usePopoverComponentContext,
|
|
23982
|
-
useRichTextToolbarState,
|
|
23983
23196
|
useShortcut,
|
|
23984
23197
|
functionalColors as utilityColors,
|
|
23985
23198
|
warningIcon,
|