@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/index.js
CHANGED
|
@@ -1593,12 +1593,16 @@ __export(src_exports, {
|
|
|
1593
1593
|
supports: () => supports,
|
|
1594
1594
|
textInput: () => textInput,
|
|
1595
1595
|
toast: () => import_react_toastify.toast,
|
|
1596
|
+
uniformAiIcon: () => uniformAiIcon,
|
|
1596
1597
|
uniformComponentIcon: () => uniformComponentIcon,
|
|
1597
1598
|
uniformComponentPatternIcon: () => uniformComponentPatternIcon,
|
|
1598
1599
|
uniformCompositionPatternIcon: () => uniformCompositionPatternIcon,
|
|
1600
|
+
uniformConditionalValuesIcon: () => uniformConditionalValuesIcon,
|
|
1599
1601
|
uniformContentTypeIcon: () => uniformContentTypeIcon,
|
|
1600
1602
|
uniformEntryIcon: () => uniformEntryIcon,
|
|
1601
1603
|
uniformEntryPatternIcon: () => uniformEntryPatternIcon,
|
|
1604
|
+
uniformLocaleDisabledIcon: () => uniformLocaleDisabledIcon,
|
|
1605
|
+
uniformLocaleIcon: () => uniformLocaleIcon,
|
|
1602
1606
|
useBreakpoint: () => useBreakpoint,
|
|
1603
1607
|
useCloseCurrentDrawer: () => useCloseCurrentDrawer,
|
|
1604
1608
|
useCurrentDrawer: () => useCurrentDrawer,
|
|
@@ -1609,7 +1613,6 @@ __export(src_exports, {
|
|
|
1609
1613
|
useOutsideClick: () => useOutsideClick,
|
|
1610
1614
|
useParameterShell: () => useParameterShell,
|
|
1611
1615
|
usePopoverComponentContext: () => usePopoverComponentContext,
|
|
1612
|
-
useRichTextToolbarState: () => useRichTextToolbarState,
|
|
1613
1616
|
useShortcut: () => useShortcut,
|
|
1614
1617
|
utilityColors: () => functionalColors,
|
|
1615
1618
|
warningIcon: () => warningIcon,
|
|
@@ -2513,7 +2516,8 @@ var button = import_react10.css`
|
|
|
2513
2516
|
cursor: pointer;
|
|
2514
2517
|
display: inline-flex;
|
|
2515
2518
|
font-weight: var(--fw-medium);
|
|
2516
|
-
transition:
|
|
2519
|
+
transition:
|
|
2520
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
2517
2521
|
border-color var(--duration-fast) var(--timing-ease-out);
|
|
2518
2522
|
max-width: max-content;
|
|
2519
2523
|
gap: var(--spacing-sm);
|
|
@@ -3300,9 +3304,11 @@ var input = (whiteSpaceWrap) => import_react17.css`
|
|
|
3300
3304
|
width: 100%;
|
|
3301
3305
|
position: relative;
|
|
3302
3306
|
white-space: ${whiteSpaceWrap};
|
|
3303
|
-
transition:
|
|
3307
|
+
transition:
|
|
3308
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
3304
3309
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
3305
|
-
color var(--duration-fast) var(--timing-ease-out),
|
|
3310
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
3311
|
+
box-shadow var(--duration-fast) var(--timing-ease-out);
|
|
3306
3312
|
|
|
3307
3313
|
&::placeholder {
|
|
3308
3314
|
color: var(--gray-400);
|
|
@@ -3422,7 +3428,8 @@ var toggleInput = import_react17.css`
|
|
|
3422
3428
|
background: var(--white);
|
|
3423
3429
|
width: var(--spacing-md);
|
|
3424
3430
|
height: var(--spacing-md);
|
|
3425
|
-
transition:
|
|
3431
|
+
transition:
|
|
3432
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
3426
3433
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
3427
3434
|
color var(--duration-fast) var(--timing-ease-out);
|
|
3428
3435
|
|
|
@@ -3666,7 +3673,9 @@ var addButton = import_react21.css`
|
|
|
3666
3673
|
cursor: pointer;
|
|
3667
3674
|
display: inline-flex;
|
|
3668
3675
|
padding: 0;
|
|
3669
|
-
transition:
|
|
3676
|
+
transition:
|
|
3677
|
+
transform var(--duration-fast) var(--timing-ease-out),
|
|
3678
|
+
background var(--duration-slow);
|
|
3670
3679
|
transform: scale(0.95);
|
|
3671
3680
|
width: var(--max-size);
|
|
3672
3681
|
height: var(--max-size);
|
|
@@ -4789,10 +4798,37 @@ var customIcons = {
|
|
|
4789
4798
|
// src/components/Icons/systemIcons.tsx
|
|
4790
4799
|
init_emotion_jsx_shim();
|
|
4791
4800
|
var import_all_files2 = require("@react-icons/all-files");
|
|
4801
|
+
var import_CgGlobeAlt2 = require("@react-icons/all-files/cg/CgGlobeAlt");
|
|
4792
4802
|
var import_CgList2 = require("@react-icons/all-files/cg/CgList");
|
|
4793
4803
|
var import_CgPen2 = require("@react-icons/all-files/cg/CgPen");
|
|
4804
|
+
var import_TbBinaryTree2 = require("@react-icons/all-files/tb/TbBinaryTree2");
|
|
4794
4805
|
var import_TbBox = require("@react-icons/all-files/tb/TbBox");
|
|
4795
4806
|
var uniformComponentIcon = import_TbBox.TbBox;
|
|
4807
|
+
var uniformConditionalValuesIcon = import_TbBinaryTree2.TbBinaryTree2;
|
|
4808
|
+
var uniformAiIcon = customIcons["magic-wand"];
|
|
4809
|
+
var uniformLocaleIcon = import_CgGlobeAlt2.CgGlobeAlt;
|
|
4810
|
+
var uniformLocaleDisabledIcon = (0, import_all_files2.GenIcon)({
|
|
4811
|
+
tag: "svg",
|
|
4812
|
+
attr: { fill: "currentColor", viewBox: "0 0 24 24", role: "img" },
|
|
4813
|
+
child: [
|
|
4814
|
+
{
|
|
4815
|
+
tag: "path",
|
|
4816
|
+
attr: {
|
|
4817
|
+
fillRule: "evenodd",
|
|
4818
|
+
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",
|
|
4819
|
+
clipRule: "evenodd"
|
|
4820
|
+
},
|
|
4821
|
+
child: []
|
|
4822
|
+
},
|
|
4823
|
+
{
|
|
4824
|
+
tag: "path",
|
|
4825
|
+
attr: {
|
|
4826
|
+
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"
|
|
4827
|
+
},
|
|
4828
|
+
child: []
|
|
4829
|
+
}
|
|
4830
|
+
]
|
|
4831
|
+
});
|
|
4796
4832
|
var uniformComponentPatternIcon = (0, import_all_files2.GenIcon)({
|
|
4797
4833
|
tag: "svg",
|
|
4798
4834
|
attr: {
|
|
@@ -13908,7 +13944,8 @@ var buttonStyle = (bgColor) => import_react32.css`
|
|
|
13908
13944
|
display: block;
|
|
13909
13945
|
font-size: var(--fs-sm);
|
|
13910
13946
|
line-height: 1.5;
|
|
13911
|
-
transition:
|
|
13947
|
+
transition:
|
|
13948
|
+
background-color var(--duration-fast) var(--timing-ease-out),
|
|
13912
13949
|
outline var(--duration-fast) var(--timing-ease-out);
|
|
13913
13950
|
outline: 1px solid transparent;
|
|
13914
13951
|
|
|
@@ -14151,7 +14188,6 @@ var Menu = React7.forwardRef(function Menu2({
|
|
|
14151
14188
|
menuItemsContainerCssClasses,
|
|
14152
14189
|
testId,
|
|
14153
14190
|
maxMenuHeight,
|
|
14154
|
-
portalElement,
|
|
14155
14191
|
...props
|
|
14156
14192
|
}, ref) {
|
|
14157
14193
|
const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
|
|
@@ -14162,7 +14198,6 @@ var Menu = React7.forwardRef(function Menu2({
|
|
|
14162
14198
|
import_react37.Menu,
|
|
14163
14199
|
{
|
|
14164
14200
|
portal: !withoutPortal,
|
|
14165
|
-
portalElement,
|
|
14166
14201
|
unmountOnHide: true,
|
|
14167
14202
|
gutter: 0,
|
|
14168
14203
|
shift: menu.parent ? -4 : 0,
|
|
@@ -14337,7 +14372,8 @@ var CheckboxWithInfoInput = import_react41.css`
|
|
|
14337
14372
|
border-radius: var(--rounded-sm);
|
|
14338
14373
|
width: calc(var(--spacing-base) - 2px);
|
|
14339
14374
|
height: calc(var(--spacing-base) - 2px);
|
|
14340
|
-
transition:
|
|
14375
|
+
transition:
|
|
14376
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
14341
14377
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
14342
14378
|
color var(--duration-fast) var(--timing-ease-out);
|
|
14343
14379
|
|
|
@@ -15595,7 +15631,8 @@ var ButtonWithMenuContainer = import_react57.css`
|
|
|
15595
15631
|
display: inline-flex;
|
|
15596
15632
|
position: relative;
|
|
15597
15633
|
min-height: 24px;
|
|
15598
|
-
transition:
|
|
15634
|
+
transition:
|
|
15635
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
15599
15636
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
15600
15637
|
background-color var(--duration-fast) var(--timing-ease-out);
|
|
15601
15638
|
|
|
@@ -16599,7 +16636,8 @@ var import_react69 = require("@emotion/react");
|
|
|
16599
16636
|
var ChipContainer = import_react69.css`
|
|
16600
16637
|
border-radius: var(--rounded-full);
|
|
16601
16638
|
display: inline-flex;
|
|
16602
|
-
transition:
|
|
16639
|
+
transition:
|
|
16640
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
16603
16641
|
color var(--duration-fast) var(--timing-ease-out);
|
|
16604
16642
|
position: relative;
|
|
16605
16643
|
|
|
@@ -16879,7 +16917,8 @@ var MultilineChipContainer = import_react70.css`
|
|
|
16879
16917
|
--gradient-rgb: var(--accent-primary-dark-rgb);
|
|
16880
16918
|
--gradient-rgb-hover: var(--accent-primary-dark-hover-rgb);
|
|
16881
16919
|
border-radius: var(--rounded-full);
|
|
16882
|
-
background:
|
|
16920
|
+
background:
|
|
16921
|
+
radial-gradient(
|
|
16883
16922
|
farthest-side at 100%,
|
|
16884
16923
|
rgba(var(--gradient-rgb), 0) 0%,
|
|
16885
16924
|
rgba(var(--gradient-rgb), 0.2) 80%,
|
|
@@ -16912,7 +16951,8 @@ var MultilineChipContainer = import_react70.css`
|
|
|
16912
16951
|
border: none;
|
|
16913
16952
|
&:hover,
|
|
16914
16953
|
&:focus {
|
|
16915
|
-
background:
|
|
16954
|
+
background:
|
|
16955
|
+
radial-gradient(
|
|
16916
16956
|
farthest-side at 100%,
|
|
16917
16957
|
rgba(var(--gradient-rgb-hover), 0) 0%,
|
|
16918
16958
|
rgba(var(--gradient-rgb-hover), 0.2) 80%,
|
|
@@ -16969,17 +17009,19 @@ init_emotion_jsx_shim();
|
|
|
16969
17009
|
// src/components/Counter/Counter.styles.ts
|
|
16970
17010
|
init_emotion_jsx_shim();
|
|
16971
17011
|
var import_react71 = require("@emotion/react");
|
|
16972
|
-
var counterContainer = (bgColor) => import_react71.css`
|
|
17012
|
+
var counterContainer = (bgColor, hasIcon) => import_react71.css`
|
|
16973
17013
|
align-items: center;
|
|
16974
17014
|
border-radius: var(--rounded-full);
|
|
16975
17015
|
border: 1px solid var(--gray-300);
|
|
16976
17016
|
background: ${bgColor};
|
|
16977
|
-
color: var(--typography-base);
|
|
17017
|
+
color: ${bgColor === "var(--accent-dark)" ? "white" : "var(--typography-base)"};
|
|
16978
17018
|
display: inline-flex;
|
|
16979
|
-
|
|
17019
|
+
gap: var(--spacing-xs);
|
|
17020
|
+
font-size: var(--fs-xs);
|
|
16980
17021
|
font-weight: var(--fw-regular);
|
|
16981
17022
|
justify-content: center;
|
|
16982
|
-
|
|
17023
|
+
padding: 4px;
|
|
17024
|
+
width: ${hasIcon ? "auto" : "var(--spacing-base)"};
|
|
16983
17025
|
height: var(--spacing-base);
|
|
16984
17026
|
`;
|
|
16985
17027
|
var counterZeroValue = import_react71.css`
|
|
@@ -17003,7 +17045,13 @@ var counterIcon = import_react71.css`
|
|
|
17003
17045
|
|
|
17004
17046
|
// src/components/Counter/Counter.tsx
|
|
17005
17047
|
var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
|
|
17006
|
-
var Counter = ({
|
|
17048
|
+
var Counter = ({
|
|
17049
|
+
count,
|
|
17050
|
+
bgColor = "transparent",
|
|
17051
|
+
icon,
|
|
17052
|
+
iconColor = "auto",
|
|
17053
|
+
...props
|
|
17054
|
+
}) => {
|
|
17007
17055
|
if (typeof count === "undefined") {
|
|
17008
17056
|
return null;
|
|
17009
17057
|
}
|
|
@@ -17012,7 +17060,19 @@ var Counter = ({ count, bgColor = "transparent", ...props }) => {
|
|
|
17012
17060
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
|
|
17013
17061
|
] }) : count;
|
|
17014
17062
|
const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
|
|
17015
|
-
return /* @__PURE__ */ (0, import_jsx_runtime63.
|
|
17063
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { css: counterContainer(bgColor, Boolean(icon)), ...props, children: [
|
|
17064
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
17065
|
+
"span",
|
|
17066
|
+
{
|
|
17067
|
+
css: [
|
|
17068
|
+
iconColor ? functionalColors : void 0,
|
|
17069
|
+
{ color: iconColor ? iconColor === "red" ? "var(--brand-secondary-5)" : iconColor : "inherit" }
|
|
17070
|
+
],
|
|
17071
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { icon, iconColor: "currentColor", size: "0.6rem" })
|
|
17072
|
+
}
|
|
17073
|
+
) : null,
|
|
17074
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: formatCount })
|
|
17075
|
+
] });
|
|
17016
17076
|
};
|
|
17017
17077
|
|
|
17018
17078
|
// src/components/DashedBox/DashedBox.tsx
|
|
@@ -21153,7 +21213,8 @@ var inputIconBtn = import_react130.css`
|
|
|
21153
21213
|
color: var(--gray-500);
|
|
21154
21214
|
background: none;
|
|
21155
21215
|
display: flex;
|
|
21156
|
-
transition:
|
|
21216
|
+
transition:
|
|
21217
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
21157
21218
|
color var(--duration-fast) var(--timing-ease-out);
|
|
21158
21219
|
|
|
21159
21220
|
&:hover,
|
|
@@ -21331,7 +21392,8 @@ var toggleInput2 = import_react131.css`
|
|
|
21331
21392
|
background: var(--white);
|
|
21332
21393
|
width: var(--spacing-base);
|
|
21333
21394
|
height: var(--spacing-base);
|
|
21334
|
-
transition:
|
|
21395
|
+
transition:
|
|
21396
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
21335
21397
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
21336
21398
|
color var(--duration-fast) var(--timing-ease-out);
|
|
21337
21399
|
font-size: var(--fs-sm);
|
|
@@ -21431,7 +21493,8 @@ var dataConnectButton = import_react131.css`
|
|
|
21431
21493
|
display: flex;
|
|
21432
21494
|
padding: var(--spacing-sm);
|
|
21433
21495
|
position: relative;
|
|
21434
|
-
transition:
|
|
21496
|
+
transition:
|
|
21497
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
21435
21498
|
outline-color var(--duration-fast) var(--timing-ease-out),
|
|
21436
21499
|
color var(--duration-fast) var(--timing-ease-out);
|
|
21437
21500
|
width: 100%;
|
|
@@ -22148,20 +22211,18 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
22148
22211
|
|
|
22149
22212
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22150
22213
|
init_emotion_jsx_shim();
|
|
22151
|
-
var
|
|
22214
|
+
var import_react150 = require("@emotion/react");
|
|
22152
22215
|
var import_list3 = require("@lexical/list");
|
|
22153
22216
|
var import_markdown = require("@lexical/markdown");
|
|
22154
22217
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
22155
|
-
var
|
|
22218
|
+
var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
|
|
22156
22219
|
var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
|
|
22157
22220
|
var import_LexicalErrorBoundary = __toESM(require("@lexical/react/LexicalErrorBoundary"));
|
|
22158
22221
|
var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
|
|
22159
22222
|
var import_LexicalListPlugin = require("@lexical/react/LexicalListPlugin");
|
|
22160
22223
|
var import_LexicalMarkdownShortcutPlugin = require("@lexical/react/LexicalMarkdownShortcutPlugin");
|
|
22161
22224
|
var import_LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
|
|
22162
|
-
var import_LexicalTablePlugin = require("@lexical/react/LexicalTablePlugin");
|
|
22163
22225
|
var import_rich_text2 = require("@lexical/rich-text");
|
|
22164
|
-
var import_table4 = require("@lexical/table");
|
|
22165
22226
|
|
|
22166
22227
|
// ../richtext/dist/index.mjs
|
|
22167
22228
|
init_emotion_jsx_shim();
|
|
@@ -22210,10 +22271,6 @@ var richTextBuiltInElements = [
|
|
|
22210
22271
|
label: "Code Block",
|
|
22211
22272
|
type: "code"
|
|
22212
22273
|
},
|
|
22213
|
-
{
|
|
22214
|
-
label: "Table",
|
|
22215
|
-
type: "table"
|
|
22216
|
-
},
|
|
22217
22274
|
{
|
|
22218
22275
|
label: "Dynamic Token",
|
|
22219
22276
|
type: "variable"
|
|
@@ -22260,8 +22317,8 @@ var getLabelForElement = (type) => {
|
|
|
22260
22317
|
|
|
22261
22318
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22262
22319
|
var import_fast_equals2 = require("fast-equals");
|
|
22263
|
-
var
|
|
22264
|
-
var
|
|
22320
|
+
var import_lexical6 = require("lexical");
|
|
22321
|
+
var import_react151 = require("react");
|
|
22265
22322
|
|
|
22266
22323
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
22267
22324
|
init_emotion_jsx_shim();
|
|
@@ -22479,46 +22536,6 @@ var codeElement = import_css2.css`
|
|
|
22479
22536
|
margin-bottom: 0;
|
|
22480
22537
|
}
|
|
22481
22538
|
`;
|
|
22482
|
-
var tableElement = import_css2.css`
|
|
22483
|
-
border-collapse: collapse;
|
|
22484
|
-
border-spacing: 0;
|
|
22485
|
-
border-color: var(--gray-300);
|
|
22486
|
-
border-width: 1px;
|
|
22487
|
-
border-style: solid;
|
|
22488
|
-
margin-bottom: var(--spacing-base);
|
|
22489
|
-
margin-top: 0;
|
|
22490
|
-
|
|
22491
|
-
&:last-child {
|
|
22492
|
-
margin-bottom: 0;
|
|
22493
|
-
}
|
|
22494
|
-
`;
|
|
22495
|
-
var tableCellElement = import_css2.css`
|
|
22496
|
-
background-color: var(--white);
|
|
22497
|
-
border-color: var(--gray-300);
|
|
22498
|
-
border-style: solid;
|
|
22499
|
-
border-width: 1px;
|
|
22500
|
-
box-sizing: unset;
|
|
22501
|
-
min-width: 2rem;
|
|
22502
|
-
outline: none;
|
|
22503
|
-
padding: var(--spacing-sm);
|
|
22504
|
-
text-align: start;
|
|
22505
|
-
vertical-align: top;
|
|
22506
|
-
width: 7rem;
|
|
22507
|
-
`;
|
|
22508
|
-
var tableHeaderElement = import_css2.css`
|
|
22509
|
-
background-color: var(--gray-100);
|
|
22510
|
-
border-color: var(--gray-300);
|
|
22511
|
-
border-style: solid;
|
|
22512
|
-
border-width: 1px;
|
|
22513
|
-
box-sizing: unset;
|
|
22514
|
-
font-weight: normal;
|
|
22515
|
-
min-width: 2rem;
|
|
22516
|
-
outline: none;
|
|
22517
|
-
padding: var(--spacing-sm);
|
|
22518
|
-
text-align: start;
|
|
22519
|
-
vertical-align: top;
|
|
22520
|
-
width: 7rem;
|
|
22521
|
-
`;
|
|
22522
22539
|
|
|
22523
22540
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
22524
22541
|
init_emotion_jsx_shim();
|
|
@@ -22866,11 +22883,7 @@ var linkPopoverAnchor = import_react145.css`
|
|
|
22866
22883
|
${link}
|
|
22867
22884
|
${linkColorDefault}
|
|
22868
22885
|
`;
|
|
22869
|
-
function LinkNodePlugin({
|
|
22870
|
-
onConnectLink,
|
|
22871
|
-
getBoundPath,
|
|
22872
|
-
positioningAnchorEl
|
|
22873
|
-
}) {
|
|
22886
|
+
function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
22874
22887
|
const parsePath = getBoundPath != null ? getBoundPath : function(path) {
|
|
22875
22888
|
return path;
|
|
22876
22889
|
};
|
|
@@ -22974,11 +22987,9 @@ function LinkNodePlugin({
|
|
|
22974
22987
|
setLinkPopoverState(void 0);
|
|
22975
22988
|
return;
|
|
22976
22989
|
}
|
|
22977
|
-
const elementRect = element.getBoundingClientRect();
|
|
22978
|
-
const positioningAnchorRect = positioningAnchorEl.getBoundingClientRect();
|
|
22979
22990
|
const { x, y } = {
|
|
22980
|
-
x:
|
|
22981
|
-
y:
|
|
22991
|
+
x: element.offsetLeft + LINK_POPOVER_OFFSET_X,
|
|
22992
|
+
y: element.offsetTop + element.clientHeight + LINK_POPOVER_OFFSET_Y
|
|
22982
22993
|
};
|
|
22983
22994
|
setLinkPopoverState({
|
|
22984
22995
|
node: linkNode,
|
|
@@ -22987,7 +22998,7 @@ function LinkNodePlugin({
|
|
|
22987
22998
|
y
|
|
22988
22999
|
}
|
|
22989
23000
|
});
|
|
22990
|
-
}, [editor
|
|
23001
|
+
}, [editor]);
|
|
22991
23002
|
(0, import_react146.useEffect)(() => {
|
|
22992
23003
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
22993
23004
|
requestAnimationFrame(() => {
|
|
@@ -23118,20 +23129,17 @@ var import_list2 = require("@lexical/list");
|
|
|
23118
23129
|
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
23119
23130
|
var import_rich_text = require("@lexical/rich-text");
|
|
23120
23131
|
var import_selection2 = require("@lexical/selection");
|
|
23121
|
-
var import_table = require("@lexical/table");
|
|
23122
23132
|
var import_utils9 = require("@lexical/utils");
|
|
23123
23133
|
var import_lexical5 = require("lexical");
|
|
23124
23134
|
var import_react149 = require("react");
|
|
23125
23135
|
var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
|
|
23126
23136
|
var toolbar = import_react148.css`
|
|
23127
|
-
${scrollbarStyles}
|
|
23128
23137
|
background: var(--gray-50);
|
|
23129
23138
|
border-radius: var(--rounded-base);
|
|
23130
23139
|
display: flex;
|
|
23131
23140
|
/* We add 1px because we use a 1px wide separator */
|
|
23132
23141
|
gap: calc(var(--spacing-sm) + 1px);
|
|
23133
23142
|
margin: calc(var(--spacing-sm) + var(--spacing-xs)) 0;
|
|
23134
|
-
overflow: auto;
|
|
23135
23143
|
padding: var(--spacing-sm);
|
|
23136
23144
|
position: sticky;
|
|
23137
23145
|
top: calc(var(--spacing-sm) * -2);
|
|
@@ -23139,7 +23147,6 @@ var toolbar = import_react148.css`
|
|
|
23139
23147
|
`;
|
|
23140
23148
|
var toolbarGroup = import_react148.css`
|
|
23141
23149
|
display: flex;
|
|
23142
|
-
flex-shrink: 0;
|
|
23143
23150
|
gap: var(--spacing-xs);
|
|
23144
23151
|
position: relative;
|
|
23145
23152
|
|
|
@@ -23162,7 +23169,6 @@ var richTextToolbarButton = import_react148.css`
|
|
|
23162
23169
|
box-shadow: none;
|
|
23163
23170
|
color: var(--gray-900);
|
|
23164
23171
|
display: flex;
|
|
23165
|
-
flex-shrink: 0;
|
|
23166
23172
|
height: 32px;
|
|
23167
23173
|
justify-content: center;
|
|
23168
23174
|
min-width: 32px;
|
|
@@ -23171,10 +23177,6 @@ var richTextToolbarButton = import_react148.css`
|
|
|
23171
23177
|
var richTextToolbarButtonActive = import_react148.css`
|
|
23172
23178
|
background: var(--gray-200);
|
|
23173
23179
|
`;
|
|
23174
|
-
var textStyleButton = import_react148.css`
|
|
23175
|
-
justify-content: space-between;
|
|
23176
|
-
min-width: 7rem;
|
|
23177
|
-
`;
|
|
23178
23180
|
var toolbarIcon = import_react148.css`
|
|
23179
23181
|
color: inherit;
|
|
23180
23182
|
`;
|
|
@@ -23195,7 +23197,7 @@ var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
|
23195
23197
|
]);
|
|
23196
23198
|
var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
|
23197
23199
|
var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
23198
|
-
var RichTextToolbar = ({ config, customControls
|
|
23200
|
+
var RichTextToolbar = ({ config, customControls }) => {
|
|
23199
23201
|
const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
|
|
23200
23202
|
const {
|
|
23201
23203
|
activeElement,
|
|
@@ -23211,39 +23213,26 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
23211
23213
|
visibleLists,
|
|
23212
23214
|
codeElementVisible,
|
|
23213
23215
|
quoteElementVisible,
|
|
23214
|
-
visibleElementsWithIcons
|
|
23215
|
-
visibleInsertElementsWithIcons,
|
|
23216
|
-
tableElementVisible
|
|
23216
|
+
visibleElementsWithIcons
|
|
23217
23217
|
} = useRichTextToolbarState({ config });
|
|
23218
23218
|
const onSelectElement = (type) => {
|
|
23219
23219
|
if (activeElement === type) {
|
|
23220
23220
|
return;
|
|
23221
23221
|
}
|
|
23222
|
-
editor.
|
|
23223
|
-
|
|
23224
|
-
|
|
23225
|
-
|
|
23226
|
-
|
|
23227
|
-
|
|
23228
|
-
|
|
23229
|
-
|
|
23230
|
-
|
|
23231
|
-
|
|
23232
|
-
|
|
23233
|
-
|
|
23234
|
-
|
|
23235
|
-
|
|
23236
|
-
return;
|
|
23237
|
-
}
|
|
23238
|
-
const { rows, columns } = dimensions;
|
|
23239
|
-
editor.focus(() => {
|
|
23240
|
-
editor.update(() => {
|
|
23241
|
-
(0, import_lexical5.$insertNodes)([(0, import_table.$createTableNodeWithDimensions)(rows, columns, false)]);
|
|
23242
|
-
});
|
|
23243
|
-
});
|
|
23244
|
-
});
|
|
23245
|
-
}
|
|
23246
|
-
});
|
|
23222
|
+
editor.update(() => {
|
|
23223
|
+
const selection = (0, import_lexical5.$getSelection)();
|
|
23224
|
+
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
23225
|
+
return;
|
|
23226
|
+
}
|
|
23227
|
+
if (HEADING_ELEMENTS.includes(type)) {
|
|
23228
|
+
(0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
|
|
23229
|
+
} else if (type === "paragraph") {
|
|
23230
|
+
(0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical5.$createParagraphNode)());
|
|
23231
|
+
} else if (type === "quote") {
|
|
23232
|
+
(0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createQuoteNode)());
|
|
23233
|
+
} else if (type === "code") {
|
|
23234
|
+
(0, import_selection2.$setBlocksType)(selection, () => (0, import_code2.$createCodeNode)());
|
|
23235
|
+
}
|
|
23247
23236
|
});
|
|
23248
23237
|
};
|
|
23249
23238
|
const updateToolbar = (0, import_react149.useCallback)(() => {
|
|
@@ -23308,7 +23297,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
23308
23297
|
/* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
|
|
23309
23298
|
Menu,
|
|
23310
23299
|
{
|
|
23311
|
-
|
|
23300
|
+
menuLabel: "Elements",
|
|
23301
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
|
|
23312
23302
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
23313
23303
|
" ",
|
|
23314
23304
|
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
@@ -23368,7 +23358,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
23368
23358
|
}
|
|
23369
23359
|
) : null
|
|
23370
23360
|
] }) : null,
|
|
23371
|
-
visibleElementsWithIcons.size > 0
|
|
23361
|
+
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
|
|
23372
23362
|
linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23373
23363
|
"button",
|
|
23374
23364
|
{
|
|
@@ -23407,50 +23397,28 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
23407
23397
|
}
|
|
23408
23398
|
) }) : null
|
|
23409
23399
|
] }) : null,
|
|
23410
|
-
|
|
23400
|
+
quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23401
|
+
"button",
|
|
23402
|
+
{
|
|
23403
|
+
onClick: () => {
|
|
23404
|
+
activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
|
|
23405
|
+
},
|
|
23406
|
+
css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
|
|
23407
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "quote" })
|
|
23408
|
+
}
|
|
23409
|
+
) }) : null,
|
|
23410
|
+
codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23411
|
+
"button",
|
|
23412
|
+
{
|
|
23413
|
+
onClick: () => {
|
|
23414
|
+
activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
|
|
23415
|
+
},
|
|
23416
|
+
css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
|
|
23417
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
|
|
23418
|
+
}
|
|
23419
|
+
) }) : null
|
|
23411
23420
|
] }) : null,
|
|
23412
|
-
|
|
23413
|
-
Menu,
|
|
23414
|
-
{
|
|
23415
|
-
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", children: [
|
|
23416
|
-
"Insert",
|
|
23417
|
-
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
23418
|
-
] }),
|
|
23419
|
-
placement: "bottom-start",
|
|
23420
|
-
children: [
|
|
23421
|
-
quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23422
|
-
MenuItem,
|
|
23423
|
-
{
|
|
23424
|
-
onClick: () => {
|
|
23425
|
-
onSelectElement("quote");
|
|
23426
|
-
},
|
|
23427
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
23428
|
-
children: "Quote"
|
|
23429
|
-
}
|
|
23430
|
-
) : null,
|
|
23431
|
-
codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23432
|
-
MenuItem,
|
|
23433
|
-
{
|
|
23434
|
-
onClick: () => {
|
|
23435
|
-
onSelectElement("code");
|
|
23436
|
-
},
|
|
23437
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
23438
|
-
children: "Code"
|
|
23439
|
-
}
|
|
23440
|
-
) : null,
|
|
23441
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23442
|
-
MenuItem,
|
|
23443
|
-
{
|
|
23444
|
-
onClick: () => {
|
|
23445
|
-
onSelectElement("table");
|
|
23446
|
-
},
|
|
23447
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
23448
|
-
children: "Table"
|
|
23449
|
-
}
|
|
23450
|
-
) : null
|
|
23451
|
-
]
|
|
23452
|
-
}
|
|
23453
|
-
) }) : null
|
|
23421
|
+
customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: toolbarGroup, children: customControls }) : null
|
|
23454
23422
|
] });
|
|
23455
23423
|
};
|
|
23456
23424
|
var RichTextToolbar_default = RichTextToolbar;
|
|
@@ -23527,9 +23495,6 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23527
23495
|
const codeElementVisible = (0, import_react149.useMemo)(() => {
|
|
23528
23496
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
23529
23497
|
}, [activeElement, enabledBuiltInElements]);
|
|
23530
|
-
const tableElementVisible = (0, import_react149.useMemo)(() => {
|
|
23531
|
-
return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
|
|
23532
|
-
}, [activeElement, enabledBuiltInElements]);
|
|
23533
23498
|
const visibleElementsWithIcons = (0, import_react149.useMemo)(() => {
|
|
23534
23499
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
23535
23500
|
if (linkElementVisible) {
|
|
@@ -23540,21 +23505,14 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23540
23505
|
visibleElements.add(type);
|
|
23541
23506
|
});
|
|
23542
23507
|
}
|
|
23543
|
-
return visibleElements;
|
|
23544
|
-
}, [linkElementVisible, visibleLists]);
|
|
23545
|
-
const visibleInsertElementsWithIcons = (0, import_react149.useMemo)(() => {
|
|
23546
|
-
const visibleElements = /* @__PURE__ */ new Set();
|
|
23547
23508
|
if (quoteElementVisible) {
|
|
23548
23509
|
visibleElements.add("quote");
|
|
23549
23510
|
}
|
|
23550
23511
|
if (codeElementVisible) {
|
|
23551
23512
|
visibleElements.add("code");
|
|
23552
23513
|
}
|
|
23553
|
-
if (tableElementVisible) {
|
|
23554
|
-
visibleElements.add("table");
|
|
23555
|
-
}
|
|
23556
23514
|
return visibleElements;
|
|
23557
|
-
}, [codeElementVisible, quoteElementVisible,
|
|
23515
|
+
}, [codeElementVisible, linkElementVisible, quoteElementVisible, visibleLists]);
|
|
23558
23516
|
return {
|
|
23559
23517
|
activeFormats,
|
|
23560
23518
|
setActiveFormats,
|
|
@@ -23569,699 +23527,12 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23569
23527
|
visibleLists,
|
|
23570
23528
|
quoteElementVisible,
|
|
23571
23529
|
codeElementVisible,
|
|
23572
|
-
|
|
23573
|
-
visibleElementsWithIcons,
|
|
23574
|
-
visibleInsertElementsWithIcons
|
|
23530
|
+
visibleElementsWithIcons
|
|
23575
23531
|
};
|
|
23576
23532
|
};
|
|
23577
23533
|
|
|
23578
|
-
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
23579
|
-
init_emotion_jsx_shim();
|
|
23580
|
-
var import_react150 = require("@emotion/react");
|
|
23581
|
-
var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
|
|
23582
|
-
var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
|
|
23583
|
-
var import_table2 = require("@lexical/table");
|
|
23584
|
-
var import_lexical6 = require("lexical");
|
|
23585
|
-
var import_react151 = require("react");
|
|
23586
|
-
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
23587
|
-
function computeSelectionCount(selection) {
|
|
23588
|
-
const selectionShape = selection.getShape();
|
|
23589
|
-
return {
|
|
23590
|
-
columns: selectionShape.toX - selectionShape.fromX + 1,
|
|
23591
|
-
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
23592
|
-
};
|
|
23593
|
-
}
|
|
23594
|
-
var tableActionMenuTrigger = import_react150.css`
|
|
23595
|
-
position: absolute;
|
|
23596
|
-
transform: translate(calc(-100% - 1px), 1px);
|
|
23597
|
-
`;
|
|
23598
|
-
var TableActionMenuTrigger = (0, import_react151.forwardRef)((props, ref) => {
|
|
23599
|
-
const { tableCellEl, positioningAnchorEl, ...rest } = props;
|
|
23600
|
-
const [coordinates, setCoordinates] = (0, import_react151.useState)({ x: 0, y: 0 });
|
|
23601
|
-
(0, import_react151.useLayoutEffect)(() => {
|
|
23602
|
-
const rect = tableCellEl.getBoundingClientRect();
|
|
23603
|
-
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
23604
|
-
const relativeX = rect.right - parentRect.left;
|
|
23605
|
-
const relativeY = rect.top - parentRect.top;
|
|
23606
|
-
setCoordinates({ x: relativeX, y: relativeY });
|
|
23607
|
-
}, [tableCellEl, positioningAnchorEl]);
|
|
23608
|
-
return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23609
|
-
IconButton,
|
|
23610
|
-
{
|
|
23611
|
-
ref,
|
|
23612
|
-
css: [
|
|
23613
|
-
tableActionMenuTrigger,
|
|
23614
|
-
{
|
|
23615
|
-
top: coordinates.y,
|
|
23616
|
-
left: coordinates.x
|
|
23617
|
-
}
|
|
23618
|
-
],
|
|
23619
|
-
size: "xs",
|
|
23620
|
-
buttonType: "unimportant",
|
|
23621
|
-
...rest,
|
|
23622
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
23623
|
-
}
|
|
23624
|
-
);
|
|
23625
|
-
});
|
|
23626
|
-
TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
|
|
23627
|
-
function TableActionMenu({
|
|
23628
|
-
tableCellNode: _tableCellNode,
|
|
23629
|
-
menuPortalEl,
|
|
23630
|
-
tableCellEl,
|
|
23631
|
-
positioningAnchorEl
|
|
23632
|
-
}) {
|
|
23633
|
-
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23634
|
-
const [tableCellNode, updateTableCellNode] = (0, import_react151.useState)(_tableCellNode);
|
|
23635
|
-
const [selectionCounts, updateSelectionCounts] = (0, import_react151.useState)({
|
|
23636
|
-
columns: 1,
|
|
23637
|
-
rows: 1
|
|
23638
|
-
});
|
|
23639
|
-
const [menuTriggerKey, setMenuTriggerKey] = (0, import_react151.useState)(0);
|
|
23640
|
-
const incrementMenuTriggerKey = () => {
|
|
23641
|
-
setMenuTriggerKey((key) => key += 1);
|
|
23642
|
-
};
|
|
23643
|
-
(0, import_react151.useEffect)(() => {
|
|
23644
|
-
return editor.registerMutationListener(
|
|
23645
|
-
import_table2.TableCellNode,
|
|
23646
|
-
(nodeMutations) => {
|
|
23647
|
-
const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
|
|
23648
|
-
if (nodeUpdated) {
|
|
23649
|
-
editor.getEditorState().read(() => {
|
|
23650
|
-
updateTableCellNode(tableCellNode.getLatest());
|
|
23651
|
-
});
|
|
23652
|
-
}
|
|
23653
|
-
},
|
|
23654
|
-
{ skipInitialization: true }
|
|
23655
|
-
);
|
|
23656
|
-
}, [editor, tableCellNode]);
|
|
23657
|
-
(0, import_react151.useEffect)(() => {
|
|
23658
|
-
editor.getEditorState().read(() => {
|
|
23659
|
-
const selection = (0, import_lexical6.$getSelection)();
|
|
23660
|
-
if ((0, import_table2.$isTableSelection)(selection)) {
|
|
23661
|
-
updateSelectionCounts(computeSelectionCount(selection));
|
|
23662
|
-
}
|
|
23663
|
-
});
|
|
23664
|
-
}, [editor]);
|
|
23665
|
-
const clearTableSelection = (0, import_react151.useCallback)(() => {
|
|
23666
|
-
editor.update(() => {
|
|
23667
|
-
if (tableCellNode.isAttached()) {
|
|
23668
|
-
const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23669
|
-
const tableElement2 = editor.getElementByKey(
|
|
23670
|
-
tableNode.getKey()
|
|
23671
|
-
);
|
|
23672
|
-
if (!tableElement2) {
|
|
23673
|
-
throw new Error("Expected to find tableElement in DOM");
|
|
23674
|
-
}
|
|
23675
|
-
const tableSelection = (0, import_table2.getTableObserverFromTableElement)(tableElement2);
|
|
23676
|
-
if (tableSelection !== null) {
|
|
23677
|
-
tableSelection.clearHighlight();
|
|
23678
|
-
}
|
|
23679
|
-
tableNode.markDirty();
|
|
23680
|
-
updateTableCellNode(tableCellNode.getLatest());
|
|
23681
|
-
}
|
|
23682
|
-
const rootNode = (0, import_lexical6.$getRoot)();
|
|
23683
|
-
rootNode.selectStart();
|
|
23684
|
-
});
|
|
23685
|
-
}, [editor, tableCellNode]);
|
|
23686
|
-
const insertTableRowAtSelection = (0, import_react151.useCallback)(
|
|
23687
|
-
(shouldInsertAfter) => {
|
|
23688
|
-
editor.update(() => {
|
|
23689
|
-
(0, import_table2.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
|
|
23690
|
-
});
|
|
23691
|
-
incrementMenuTriggerKey();
|
|
23692
|
-
},
|
|
23693
|
-
[editor]
|
|
23694
|
-
);
|
|
23695
|
-
const insertTableColumnAtSelection = (0, import_react151.useCallback)(
|
|
23696
|
-
(shouldInsertAfter) => {
|
|
23697
|
-
editor.update(() => {
|
|
23698
|
-
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
23699
|
-
(0, import_table2.$insertTableColumn__EXPERIMENTAL)(shouldInsertAfter);
|
|
23700
|
-
}
|
|
23701
|
-
});
|
|
23702
|
-
incrementMenuTriggerKey();
|
|
23703
|
-
},
|
|
23704
|
-
[editor, selectionCounts.columns]
|
|
23705
|
-
);
|
|
23706
|
-
const deleteTableRowAtSelection = (0, import_react151.useCallback)(() => {
|
|
23707
|
-
editor.update(() => {
|
|
23708
|
-
(0, import_table2.$deleteTableRow__EXPERIMENTAL)();
|
|
23709
|
-
});
|
|
23710
|
-
incrementMenuTriggerKey();
|
|
23711
|
-
}, [editor]);
|
|
23712
|
-
const deleteTableAtSelection = (0, import_react151.useCallback)(() => {
|
|
23713
|
-
editor.update(() => {
|
|
23714
|
-
const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23715
|
-
tableNode.remove();
|
|
23716
|
-
clearTableSelection();
|
|
23717
|
-
});
|
|
23718
|
-
}, [editor, tableCellNode, clearTableSelection]);
|
|
23719
|
-
const deleteTableColumnAtSelection = (0, import_react151.useCallback)(() => {
|
|
23720
|
-
editor.update(() => {
|
|
23721
|
-
(0, import_table2.$deleteTableColumn__EXPERIMENTAL)();
|
|
23722
|
-
clearTableSelection();
|
|
23723
|
-
});
|
|
23724
|
-
incrementMenuTriggerKey();
|
|
23725
|
-
}, [editor, clearTableSelection]);
|
|
23726
|
-
const toggleTableRowIsHeader = (0, import_react151.useCallback)(() => {
|
|
23727
|
-
editor.update(() => {
|
|
23728
|
-
const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23729
|
-
const tableRowIndex = (0, import_table2.$getTableRowIndexFromTableCellNode)(tableCellNode);
|
|
23730
|
-
const tableRows = tableNode.getChildren();
|
|
23731
|
-
if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
|
|
23732
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
23733
|
-
}
|
|
23734
|
-
const tableRow2 = tableRows[tableRowIndex];
|
|
23735
|
-
if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
|
|
23736
|
-
throw new Error("Expected table row");
|
|
23737
|
-
}
|
|
23738
|
-
tableRow2.getChildren().forEach((tableCell) => {
|
|
23739
|
-
if (!(0, import_table2.$isTableCellNode)(tableCell)) {
|
|
23740
|
-
throw new Error("Expected table cell");
|
|
23741
|
-
}
|
|
23742
|
-
tableCell.toggleHeaderStyle(import_table2.TableCellHeaderStates.ROW);
|
|
23743
|
-
});
|
|
23744
|
-
clearTableSelection();
|
|
23745
|
-
});
|
|
23746
|
-
}, [editor, tableCellNode, clearTableSelection]);
|
|
23747
|
-
const toggleTableColumnIsHeader = (0, import_react151.useCallback)(() => {
|
|
23748
|
-
editor.update(() => {
|
|
23749
|
-
const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23750
|
-
const tableColumnIndex = (0, import_table2.$getTableColumnIndexFromTableCellNode)(tableCellNode);
|
|
23751
|
-
const tableRows = tableNode.getChildren();
|
|
23752
|
-
const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
|
|
23753
|
-
if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
|
|
23754
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
23755
|
-
}
|
|
23756
|
-
for (let r = 0; r < tableRows.length; r++) {
|
|
23757
|
-
const tableRow2 = tableRows[r];
|
|
23758
|
-
if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
|
|
23759
|
-
throw new Error("Expected table row");
|
|
23760
|
-
}
|
|
23761
|
-
const tableCells = tableRow2.getChildren();
|
|
23762
|
-
if (tableColumnIndex >= tableCells.length) {
|
|
23763
|
-
continue;
|
|
23764
|
-
}
|
|
23765
|
-
const tableCell = tableCells[tableColumnIndex];
|
|
23766
|
-
if (!(0, import_table2.$isTableCellNode)(tableCell)) {
|
|
23767
|
-
throw new Error("Expected table cell");
|
|
23768
|
-
}
|
|
23769
|
-
tableCell.toggleHeaderStyle(import_table2.TableCellHeaderStates.COLUMN);
|
|
23770
|
-
}
|
|
23771
|
-
clearTableSelection();
|
|
23772
|
-
});
|
|
23773
|
-
}, [editor, tableCellNode, clearTableSelection]);
|
|
23774
|
-
const menuItemCss = (0, import_react150.css)({
|
|
23775
|
-
fontSize: "var(--fs-sm)"
|
|
23776
|
-
});
|
|
23777
|
-
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
23778
|
-
Menu,
|
|
23779
|
-
{
|
|
23780
|
-
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23781
|
-
TableActionMenuTrigger,
|
|
23782
|
-
{
|
|
23783
|
-
tableCellEl,
|
|
23784
|
-
positioningAnchorEl
|
|
23785
|
-
},
|
|
23786
|
-
menuTriggerKey
|
|
23787
|
-
),
|
|
23788
|
-
portalElement: menuPortalEl,
|
|
23789
|
-
maxMenuHeight: "300px",
|
|
23790
|
-
children: [
|
|
23791
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
23792
|
-
MenuItem,
|
|
23793
|
-
{
|
|
23794
|
-
onClick: () => {
|
|
23795
|
-
insertTableRowAtSelection(false);
|
|
23796
|
-
},
|
|
23797
|
-
css: menuItemCss,
|
|
23798
|
-
children: [
|
|
23799
|
-
"Insert ",
|
|
23800
|
-
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
23801
|
-
" above"
|
|
23802
|
-
]
|
|
23803
|
-
}
|
|
23804
|
-
),
|
|
23805
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
|
|
23806
|
-
"Insert ",
|
|
23807
|
-
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
23808
|
-
" below"
|
|
23809
|
-
] }),
|
|
23810
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
|
|
23811
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
23812
|
-
"Insert ",
|
|
23813
|
-
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
23814
|
-
" left"
|
|
23815
|
-
] }),
|
|
23816
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
|
|
23817
|
-
"Insert ",
|
|
23818
|
-
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
23819
|
-
" right"
|
|
23820
|
-
] }),
|
|
23821
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
|
|
23822
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
23823
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
23824
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
23825
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
|
|
23826
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
23827
|
-
(tableCellNode.__headerState & import_table2.TableCellHeaderStates.ROW) === import_table2.TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
23828
|
-
" ",
|
|
23829
|
-
"row header"
|
|
23830
|
-
] }),
|
|
23831
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
|
|
23832
|
-
(tableCellNode.__headerState & import_table2.TableCellHeaderStates.COLUMN) === import_table2.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
|
|
23833
|
-
" ",
|
|
23834
|
-
"column header"
|
|
23835
|
-
] })
|
|
23836
|
-
]
|
|
23837
|
-
}
|
|
23838
|
-
);
|
|
23839
|
-
}
|
|
23840
|
-
function TableCellActionMenuContainer({
|
|
23841
|
-
menuPortalEl,
|
|
23842
|
-
positioningAnchorEl
|
|
23843
|
-
}) {
|
|
23844
|
-
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23845
|
-
const [tableCellNode, setTableMenuCellNode] = (0, import_react151.useState)(null);
|
|
23846
|
-
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react151.useState)(null);
|
|
23847
|
-
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react151.useState)(null);
|
|
23848
|
-
(0, import_react151.useEffect)(() => {
|
|
23849
|
-
const newPortalEl = document.createElement("div");
|
|
23850
|
-
setTableMenuCellMenuPortalEl(newPortalEl);
|
|
23851
|
-
menuPortalEl.appendChild(newPortalEl);
|
|
23852
|
-
return () => {
|
|
23853
|
-
newPortalEl.remove();
|
|
23854
|
-
};
|
|
23855
|
-
}, [menuPortalEl]);
|
|
23856
|
-
const setTableMenuCellNodeElem = (0, import_react151.useCallback)((elem) => {
|
|
23857
|
-
if (elem) {
|
|
23858
|
-
_setTableMenuCellNodeEl(elem);
|
|
23859
|
-
} else {
|
|
23860
|
-
_setTableMenuCellNodeEl(null);
|
|
23861
|
-
}
|
|
23862
|
-
}, []);
|
|
23863
|
-
const $moveMenu = (0, import_react151.useCallback)(() => {
|
|
23864
|
-
const selection = (0, import_lexical6.$getSelection)();
|
|
23865
|
-
const nativeSelection = window.getSelection();
|
|
23866
|
-
const activeElement = document.activeElement;
|
|
23867
|
-
if (selection == null) {
|
|
23868
|
-
setTableMenuCellNode(null);
|
|
23869
|
-
return;
|
|
23870
|
-
}
|
|
23871
|
-
const rootElement = editor.getRootElement();
|
|
23872
|
-
if ((0, import_lexical6.$isRangeSelection)(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
|
|
23873
|
-
const tableCellNodeFromSelection = (0, import_table2.$getTableCellNodeFromLexicalNode)(selection.anchor.getNode());
|
|
23874
|
-
if (tableCellNodeFromSelection == null) {
|
|
23875
|
-
setTableMenuCellNode(null);
|
|
23876
|
-
setTableMenuCellNodeElem(null);
|
|
23877
|
-
return;
|
|
23878
|
-
}
|
|
23879
|
-
const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
|
|
23880
|
-
if (tableCellParentNodeDOM == null) {
|
|
23881
|
-
setTableMenuCellNode(null);
|
|
23882
|
-
setTableMenuCellNodeElem(null);
|
|
23883
|
-
return;
|
|
23884
|
-
}
|
|
23885
|
-
setTableMenuCellNode(tableCellNodeFromSelection);
|
|
23886
|
-
setTableMenuCellNodeElem(tableCellParentNodeDOM);
|
|
23887
|
-
} else if (!activeElement) {
|
|
23888
|
-
setTableMenuCellNode(null);
|
|
23889
|
-
setTableMenuCellNodeElem(null);
|
|
23890
|
-
}
|
|
23891
|
-
}, [editor, setTableMenuCellNodeElem]);
|
|
23892
|
-
(0, import_react151.useEffect)(() => {
|
|
23893
|
-
return editor.registerUpdateListener(() => {
|
|
23894
|
-
editor.getEditorState().read(() => {
|
|
23895
|
-
$moveMenu();
|
|
23896
|
-
});
|
|
23897
|
-
});
|
|
23898
|
-
});
|
|
23899
|
-
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23900
|
-
TableActionMenu,
|
|
23901
|
-
{
|
|
23902
|
-
tableCellNode,
|
|
23903
|
-
menuPortalEl: tableCellMenuPortalEl,
|
|
23904
|
-
tableCellEl: tableCellNodeEl,
|
|
23905
|
-
positioningAnchorEl
|
|
23906
|
-
},
|
|
23907
|
-
tableCellNode.getKey()
|
|
23908
|
-
);
|
|
23909
|
-
}
|
|
23910
|
-
function TableActionMenuPlugin({ positioningAnchorEl }) {
|
|
23911
|
-
const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
|
|
23912
|
-
return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23913
|
-
TableCellActionMenuContainer,
|
|
23914
|
-
{
|
|
23915
|
-
menuPortalEl: positioningAnchorEl,
|
|
23916
|
-
positioningAnchorEl
|
|
23917
|
-
}
|
|
23918
|
-
) : null;
|
|
23919
|
-
}
|
|
23920
|
-
|
|
23921
|
-
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
23922
|
-
init_emotion_jsx_shim();
|
|
23923
|
-
var import_react152 = require("@emotion/react");
|
|
23924
|
-
var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
|
|
23925
|
-
var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
|
|
23926
|
-
var import_table3 = require("@lexical/table");
|
|
23927
|
-
var import_utils11 = require("@lexical/utils");
|
|
23928
|
-
var import_lexical7 = require("lexical");
|
|
23929
|
-
var import_react153 = require("react");
|
|
23930
|
-
var import_react_dom3 = require("react-dom");
|
|
23931
|
-
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
23932
|
-
var MIN_ROW_HEIGHT = 33;
|
|
23933
|
-
var MIN_COLUMN_WIDTH = 50;
|
|
23934
|
-
var tableResizer = import_react152.css`
|
|
23935
|
-
position: absolute;
|
|
23936
|
-
z-index: var(--z-10);
|
|
23937
|
-
`;
|
|
23938
|
-
var fixedGetDOMCellFromTarget = (node) => {
|
|
23939
|
-
let currentNode = node;
|
|
23940
|
-
while (currentNode != null) {
|
|
23941
|
-
const nodeName = currentNode.nodeName;
|
|
23942
|
-
if (nodeName === "TD" || nodeName === "TH") {
|
|
23943
|
-
const cell2 = currentNode._cell;
|
|
23944
|
-
if (cell2 === void 0) {
|
|
23945
|
-
return {
|
|
23946
|
-
elem: currentNode
|
|
23947
|
-
};
|
|
23948
|
-
}
|
|
23949
|
-
return cell2;
|
|
23950
|
-
}
|
|
23951
|
-
currentNode = currentNode.parentNode;
|
|
23952
|
-
}
|
|
23953
|
-
return null;
|
|
23954
|
-
};
|
|
23955
|
-
function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
23956
|
-
const targetRef = (0, import_react153.useRef)(null);
|
|
23957
|
-
const resizerRef = (0, import_react153.useRef)(null);
|
|
23958
|
-
const tableRectRef = (0, import_react153.useRef)(null);
|
|
23959
|
-
const mouseStartPosRef = (0, import_react153.useRef)(null);
|
|
23960
|
-
const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react153.useState)(null);
|
|
23961
|
-
const [activeCell, updateActiveCell] = (0, import_react153.useState)(null);
|
|
23962
|
-
const [isMouseDown, updateIsMouseDown] = (0, import_react153.useState)(false);
|
|
23963
|
-
const [draggingDirection, updateDraggingDirection] = (0, import_react153.useState)(null);
|
|
23964
|
-
const resetState = (0, import_react153.useCallback)(() => {
|
|
23965
|
-
updateActiveCell(null);
|
|
23966
|
-
targetRef.current = null;
|
|
23967
|
-
updateDraggingDirection(null);
|
|
23968
|
-
mouseStartPosRef.current = null;
|
|
23969
|
-
tableRectRef.current = null;
|
|
23970
|
-
}, []);
|
|
23971
|
-
const isMouseDownOnEvent = (event) => {
|
|
23972
|
-
return (event.buttons & 1) === 1;
|
|
23973
|
-
};
|
|
23974
|
-
(0, import_react153.useEffect)(() => {
|
|
23975
|
-
const onMouseMove = (event) => {
|
|
23976
|
-
setTimeout(() => {
|
|
23977
|
-
const target = event.target;
|
|
23978
|
-
if (draggingDirection) {
|
|
23979
|
-
updateMouseCurrentPos({
|
|
23980
|
-
x: event.clientX,
|
|
23981
|
-
y: event.clientY
|
|
23982
|
-
});
|
|
23983
|
-
return;
|
|
23984
|
-
}
|
|
23985
|
-
updateIsMouseDown(isMouseDownOnEvent(event));
|
|
23986
|
-
if (resizerRef.current && resizerRef.current.contains(target)) {
|
|
23987
|
-
return;
|
|
23988
|
-
}
|
|
23989
|
-
if (targetRef.current !== target) {
|
|
23990
|
-
targetRef.current = target;
|
|
23991
|
-
const cell2 = fixedGetDOMCellFromTarget(target);
|
|
23992
|
-
if (cell2 && activeCell !== cell2) {
|
|
23993
|
-
editor.update(() => {
|
|
23994
|
-
const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(cell2.elem);
|
|
23995
|
-
if (!tableCellNode) {
|
|
23996
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
23997
|
-
}
|
|
23998
|
-
const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23999
|
-
const tableElement2 = editor.getElementByKey(tableNode.getKey());
|
|
24000
|
-
if (!tableElement2) {
|
|
24001
|
-
throw new Error("TableCellResizer: Table element not found.");
|
|
24002
|
-
}
|
|
24003
|
-
targetRef.current = target;
|
|
24004
|
-
tableRectRef.current = tableElement2.getBoundingClientRect();
|
|
24005
|
-
updateActiveCell(cell2);
|
|
24006
|
-
});
|
|
24007
|
-
} else if (cell2 == null) {
|
|
24008
|
-
resetState();
|
|
24009
|
-
}
|
|
24010
|
-
}
|
|
24011
|
-
}, 0);
|
|
24012
|
-
};
|
|
24013
|
-
const onMouseDown = () => {
|
|
24014
|
-
setTimeout(() => {
|
|
24015
|
-
updateIsMouseDown(true);
|
|
24016
|
-
}, 0);
|
|
24017
|
-
};
|
|
24018
|
-
const onMouseUp = () => {
|
|
24019
|
-
setTimeout(() => {
|
|
24020
|
-
updateIsMouseDown(false);
|
|
24021
|
-
}, 0);
|
|
24022
|
-
};
|
|
24023
|
-
const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
|
|
24024
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
|
|
24025
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
|
|
24026
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
|
|
24027
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
|
|
24028
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
|
|
24029
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
|
|
24030
|
-
});
|
|
24031
|
-
return () => {
|
|
24032
|
-
removeRootListener();
|
|
24033
|
-
};
|
|
24034
|
-
}, [activeCell, draggingDirection, editor, resetState]);
|
|
24035
|
-
const isHeightChanging = (direction) => {
|
|
24036
|
-
if (direction === "bottom") {
|
|
24037
|
-
return true;
|
|
24038
|
-
}
|
|
24039
|
-
return false;
|
|
24040
|
-
};
|
|
24041
|
-
const updateRowHeight = (0, import_react153.useCallback)(
|
|
24042
|
-
(heightChange) => {
|
|
24043
|
-
if (!activeCell) {
|
|
24044
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
24045
|
-
}
|
|
24046
|
-
editor.update(
|
|
24047
|
-
() => {
|
|
24048
|
-
const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
|
|
24049
|
-
if (!(0, import_table3.$isTableCellNode)(tableCellNode)) {
|
|
24050
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
24051
|
-
}
|
|
24052
|
-
const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
24053
|
-
const tableRowIndex = (0, import_table3.$getTableRowIndexFromTableCellNode)(tableCellNode);
|
|
24054
|
-
const tableRows = tableNode.getChildren();
|
|
24055
|
-
if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
|
|
24056
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
24057
|
-
}
|
|
24058
|
-
const tableRow2 = tableRows[tableRowIndex];
|
|
24059
|
-
if (!(0, import_table3.$isTableRowNode)(tableRow2)) {
|
|
24060
|
-
throw new Error("Expected table row");
|
|
24061
|
-
}
|
|
24062
|
-
let height = tableRow2.getHeight();
|
|
24063
|
-
if (height === void 0) {
|
|
24064
|
-
const rowCells = tableRow2.getChildren();
|
|
24065
|
-
height = Math.min(...rowCells.map((cell2) => {
|
|
24066
|
-
var _a;
|
|
24067
|
-
return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
|
|
24068
|
-
}));
|
|
24069
|
-
}
|
|
24070
|
-
const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
|
|
24071
|
-
tableRow2.setHeight(newHeight);
|
|
24072
|
-
},
|
|
24073
|
-
{ tag: "skip-scroll-into-view" }
|
|
24074
|
-
);
|
|
24075
|
-
},
|
|
24076
|
-
[activeCell, editor]
|
|
24077
|
-
);
|
|
24078
|
-
const getCellNodeWidth = (cell2, activeEditor) => {
|
|
24079
|
-
const width = cell2.getWidth();
|
|
24080
|
-
if (width !== void 0) {
|
|
24081
|
-
return width;
|
|
24082
|
-
}
|
|
24083
|
-
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
24084
|
-
if (domCellNode == null) {
|
|
24085
|
-
return void 0;
|
|
24086
|
-
}
|
|
24087
|
-
const computedStyle = getComputedStyle(domCellNode);
|
|
24088
|
-
return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
|
|
24089
|
-
};
|
|
24090
|
-
const getCellNodeHeight = (cell2, activeEditor) => {
|
|
24091
|
-
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
24092
|
-
return domCellNode == null ? void 0 : domCellNode.clientHeight;
|
|
24093
|
-
};
|
|
24094
|
-
const getCellColumnIndex = (tableCellNode, tableMap) => {
|
|
24095
|
-
for (let row = 0; row < tableMap.length; row++) {
|
|
24096
|
-
for (let column = 0; column < tableMap[row].length; column++) {
|
|
24097
|
-
if (tableMap[row][column].cell === tableCellNode) {
|
|
24098
|
-
return column;
|
|
24099
|
-
}
|
|
24100
|
-
}
|
|
24101
|
-
}
|
|
24102
|
-
};
|
|
24103
|
-
const updateColumnWidth = (0, import_react153.useCallback)(
|
|
24104
|
-
(widthChange) => {
|
|
24105
|
-
if (!activeCell) {
|
|
24106
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
24107
|
-
}
|
|
24108
|
-
editor.update(
|
|
24109
|
-
() => {
|
|
24110
|
-
const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
|
|
24111
|
-
if (!(0, import_table3.$isTableCellNode)(tableCellNode)) {
|
|
24112
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
24113
|
-
}
|
|
24114
|
-
const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
24115
|
-
const [tableMap] = (0, import_table3.$computeTableMapSkipCellCheck)(tableNode, null, null);
|
|
24116
|
-
const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
|
|
24117
|
-
if (columnIndex === void 0) {
|
|
24118
|
-
throw new Error("TableCellResizer: Table column not found.");
|
|
24119
|
-
}
|
|
24120
|
-
for (let row = 0; row < tableMap.length; row++) {
|
|
24121
|
-
const cell2 = tableMap[row][columnIndex];
|
|
24122
|
-
if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
|
|
24123
|
-
const width = getCellNodeWidth(cell2.cell, editor);
|
|
24124
|
-
if (width === void 0) {
|
|
24125
|
-
continue;
|
|
24126
|
-
}
|
|
24127
|
-
const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
|
|
24128
|
-
cell2.cell.setWidth(newWidth);
|
|
24129
|
-
}
|
|
24130
|
-
}
|
|
24131
|
-
},
|
|
24132
|
-
{ tag: "skip-scroll-into-view" }
|
|
24133
|
-
);
|
|
24134
|
-
},
|
|
24135
|
-
[activeCell, editor]
|
|
24136
|
-
);
|
|
24137
|
-
const mouseUpHandler = (0, import_react153.useCallback)(
|
|
24138
|
-
(direction) => {
|
|
24139
|
-
const handler = (event) => {
|
|
24140
|
-
event.preventDefault();
|
|
24141
|
-
event.stopPropagation();
|
|
24142
|
-
if (!activeCell) {
|
|
24143
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
24144
|
-
}
|
|
24145
|
-
if (mouseStartPosRef.current) {
|
|
24146
|
-
const { x, y } = mouseStartPosRef.current;
|
|
24147
|
-
if (activeCell === null) {
|
|
24148
|
-
return;
|
|
24149
|
-
}
|
|
24150
|
-
const zoom = (0, import_utils11.calculateZoomLevel)(event.target);
|
|
24151
|
-
if (isHeightChanging(direction)) {
|
|
24152
|
-
const heightChange = (event.clientY - y) / zoom;
|
|
24153
|
-
updateRowHeight(heightChange);
|
|
24154
|
-
} else {
|
|
24155
|
-
const widthChange = (event.clientX - x) / zoom;
|
|
24156
|
-
updateColumnWidth(widthChange);
|
|
24157
|
-
}
|
|
24158
|
-
resetState();
|
|
24159
|
-
document.removeEventListener("mouseup", handler);
|
|
24160
|
-
}
|
|
24161
|
-
};
|
|
24162
|
-
return handler;
|
|
24163
|
-
},
|
|
24164
|
-
[activeCell, resetState, updateColumnWidth, updateRowHeight]
|
|
24165
|
-
);
|
|
24166
|
-
const toggleResize = (0, import_react153.useCallback)(
|
|
24167
|
-
(direction) => (event) => {
|
|
24168
|
-
event.preventDefault();
|
|
24169
|
-
event.stopPropagation();
|
|
24170
|
-
if (!activeCell) {
|
|
24171
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
24172
|
-
}
|
|
24173
|
-
mouseStartPosRef.current = {
|
|
24174
|
-
x: event.clientX,
|
|
24175
|
-
y: event.clientY
|
|
24176
|
-
};
|
|
24177
|
-
updateMouseCurrentPos(mouseStartPosRef.current);
|
|
24178
|
-
updateDraggingDirection(direction);
|
|
24179
|
-
document.addEventListener("mouseup", mouseUpHandler(direction));
|
|
24180
|
-
},
|
|
24181
|
-
[activeCell, mouseUpHandler]
|
|
24182
|
-
);
|
|
24183
|
-
const getResizers = (0, import_react153.useCallback)(() => {
|
|
24184
|
-
if (activeCell) {
|
|
24185
|
-
const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
|
|
24186
|
-
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
24187
|
-
const zoom = (0, import_utils11.calculateZoomLevel)(activeCell.elem);
|
|
24188
|
-
const zoneWidth = 10;
|
|
24189
|
-
const styles = {
|
|
24190
|
-
bottom: {
|
|
24191
|
-
backgroundColor: "none",
|
|
24192
|
-
cursor: "row-resize",
|
|
24193
|
-
height: `${zoneWidth}px`,
|
|
24194
|
-
left: `${left - parentRect.left}px`,
|
|
24195
|
-
top: `${top - parentRect.top + height - zoneWidth / 2}px`,
|
|
24196
|
-
width: `${width}px`
|
|
24197
|
-
},
|
|
24198
|
-
right: {
|
|
24199
|
-
backgroundColor: "none",
|
|
24200
|
-
cursor: "col-resize",
|
|
24201
|
-
height: `${height}px`,
|
|
24202
|
-
left: `${left - parentRect.left + width - zoneWidth / 2}px`,
|
|
24203
|
-
top: `${top - parentRect.top}px`,
|
|
24204
|
-
width: `${zoneWidth}px`
|
|
24205
|
-
}
|
|
24206
|
-
};
|
|
24207
|
-
const tableRect = tableRectRef.current;
|
|
24208
|
-
if (draggingDirection && mouseCurrentPos && tableRect) {
|
|
24209
|
-
if (isHeightChanging(draggingDirection)) {
|
|
24210
|
-
styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
|
|
24211
|
-
styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top) / zoom}px`;
|
|
24212
|
-
styles[draggingDirection].height = "3px";
|
|
24213
|
-
styles[draggingDirection].width = `${tableRect.width}px`;
|
|
24214
|
-
} else {
|
|
24215
|
-
styles[draggingDirection].top = `${tableRect.top - parentRect.top}px`;
|
|
24216
|
-
styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
|
|
24217
|
-
styles[draggingDirection].width = "3px";
|
|
24218
|
-
styles[draggingDirection].height = `${tableRect.height}px`;
|
|
24219
|
-
}
|
|
24220
|
-
styles[draggingDirection].backgroundColor = "#adf";
|
|
24221
|
-
}
|
|
24222
|
-
return styles;
|
|
24223
|
-
}
|
|
24224
|
-
return {
|
|
24225
|
-
bottom: null,
|
|
24226
|
-
left: null,
|
|
24227
|
-
right: null,
|
|
24228
|
-
top: null
|
|
24229
|
-
};
|
|
24230
|
-
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
24231
|
-
const resizerStyles = getResizers();
|
|
24232
|
-
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
|
|
24233
|
-
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
24234
|
-
"div",
|
|
24235
|
-
{
|
|
24236
|
-
css: tableResizer,
|
|
24237
|
-
style: resizerStyles.right || void 0,
|
|
24238
|
-
onMouseDown: toggleResize("right")
|
|
24239
|
-
}
|
|
24240
|
-
),
|
|
24241
|
-
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
24242
|
-
"div",
|
|
24243
|
-
{
|
|
24244
|
-
css: tableResizer,
|
|
24245
|
-
style: resizerStyles.bottom || void 0,
|
|
24246
|
-
onMouseDown: toggleResize("bottom")
|
|
24247
|
-
}
|
|
24248
|
-
)
|
|
24249
|
-
] }) });
|
|
24250
|
-
}
|
|
24251
|
-
function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
24252
|
-
const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
|
|
24253
|
-
const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
|
|
24254
|
-
return (0, import_react153.useMemo)(
|
|
24255
|
-
() => isEditable ? (0, import_react_dom3.createPortal)(
|
|
24256
|
-
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
|
|
24257
|
-
positioningAnchorEl
|
|
24258
|
-
) : null,
|
|
24259
|
-
[editor, isEditable, positioningAnchorEl]
|
|
24260
|
-
);
|
|
24261
|
-
}
|
|
24262
|
-
|
|
24263
23534
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
24264
|
-
var
|
|
23535
|
+
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
24265
23536
|
var ParameterRichText = ({
|
|
24266
23537
|
label,
|
|
24267
23538
|
labelLeadingIcon,
|
|
@@ -24280,16 +23551,13 @@ var ParameterRichText = ({
|
|
|
24280
23551
|
readOnly,
|
|
24281
23552
|
editorWrapperClassName,
|
|
24282
23553
|
editorInputClassName,
|
|
24283
|
-
editorInputWrapperClassName,
|
|
24284
23554
|
editorFooter,
|
|
24285
23555
|
customNodes,
|
|
24286
23556
|
children,
|
|
24287
23557
|
variables,
|
|
24288
|
-
customControls
|
|
24289
|
-
onInsertTable,
|
|
24290
|
-
minimalInteractivity
|
|
23558
|
+
customControls
|
|
24291
23559
|
}) => {
|
|
24292
|
-
return /* @__PURE__ */ (0,
|
|
23560
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
24293
23561
|
ParameterShell,
|
|
24294
23562
|
{
|
|
24295
23563
|
"data-testid": "parameter-richtext",
|
|
@@ -24303,7 +23571,7 @@ var ParameterRichText = ({
|
|
|
24303
23571
|
captionTestId,
|
|
24304
23572
|
menuItems,
|
|
24305
23573
|
children: [
|
|
24306
|
-
/* @__PURE__ */ (0,
|
|
23574
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
24307
23575
|
ParameterRichTextInner,
|
|
24308
23576
|
{
|
|
24309
23577
|
value,
|
|
@@ -24314,33 +23582,30 @@ var ParameterRichText = ({
|
|
|
24314
23582
|
readOnly,
|
|
24315
23583
|
editorWrapperClassName,
|
|
24316
23584
|
editorInputClassName,
|
|
24317
|
-
editorInputWrapperClassName,
|
|
24318
23585
|
editorFooter,
|
|
24319
23586
|
customNodes,
|
|
24320
23587
|
variables,
|
|
24321
23588
|
customControls,
|
|
24322
|
-
onInsertTable,
|
|
24323
|
-
minimalInteractivity,
|
|
24324
23589
|
children
|
|
24325
23590
|
}
|
|
24326
23591
|
),
|
|
24327
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
23592
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children: menuItems }) }) : null
|
|
24328
23593
|
]
|
|
24329
23594
|
}
|
|
24330
23595
|
);
|
|
24331
23596
|
};
|
|
24332
|
-
var editorWrapper =
|
|
23597
|
+
var editorWrapper = import_react150.css`
|
|
24333
23598
|
display: flex;
|
|
24334
23599
|
flex-flow: column;
|
|
24335
23600
|
flex-grow: 1;
|
|
24336
23601
|
`;
|
|
24337
|
-
var editorContainer =
|
|
23602
|
+
var editorContainer = import_react150.css`
|
|
24338
23603
|
display: flex;
|
|
24339
23604
|
flex-flow: column;
|
|
24340
23605
|
flex-grow: 1;
|
|
24341
23606
|
position: relative;
|
|
24342
23607
|
`;
|
|
24343
|
-
var editorPlaceholder =
|
|
23608
|
+
var editorPlaceholder = import_react150.css`
|
|
24344
23609
|
color: var(--gray-500);
|
|
24345
23610
|
font-style: italic;
|
|
24346
23611
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -24351,7 +23616,7 @@ var editorPlaceholder = import_react154.css`
|
|
|
24351
23616
|
top: var(--spacing-sm);
|
|
24352
23617
|
user-select: none;
|
|
24353
23618
|
`;
|
|
24354
|
-
var editorInput =
|
|
23619
|
+
var editorInput = import_react150.css`
|
|
24355
23620
|
background: var(--white);
|
|
24356
23621
|
border: 1px solid var(--gray-200);
|
|
24357
23622
|
border-radius: var(--rounded-sm);
|
|
@@ -24379,14 +23644,11 @@ var ParameterRichTextInner = ({
|
|
|
24379
23644
|
readOnly,
|
|
24380
23645
|
editorWrapperClassName,
|
|
24381
23646
|
editorInputClassName,
|
|
24382
|
-
editorInputWrapperClassName,
|
|
24383
23647
|
editorFooter,
|
|
24384
23648
|
children,
|
|
24385
23649
|
customNodes,
|
|
24386
23650
|
variables,
|
|
24387
|
-
customControls
|
|
24388
|
-
onInsertTable,
|
|
24389
|
-
minimalInteractivity
|
|
23651
|
+
customControls
|
|
24390
23652
|
}) => {
|
|
24391
23653
|
const lexicalConfig = {
|
|
24392
23654
|
namespace: "uniform",
|
|
@@ -24400,11 +23662,8 @@ var ParameterRichTextInner = ({
|
|
|
24400
23662
|
LinkNode,
|
|
24401
23663
|
import_rich_text2.HeadingNode,
|
|
24402
23664
|
import_rich_text2.QuoteNode,
|
|
24403
|
-
|
|
23665
|
+
import_lexical6.ParagraphNode,
|
|
24404
23666
|
CustomCodeNode,
|
|
24405
|
-
import_table4.TableNode,
|
|
24406
|
-
import_table4.TableCellNode,
|
|
24407
|
-
import_table4.TableRowNode,
|
|
24408
23667
|
...customNodes != null ? customNodes : []
|
|
24409
23668
|
],
|
|
24410
23669
|
theme: {
|
|
@@ -24437,15 +23696,12 @@ var ParameterRichTextInner = ({
|
|
|
24437
23696
|
}
|
|
24438
23697
|
},
|
|
24439
23698
|
quote: blockquoteElement,
|
|
24440
|
-
code: codeElement
|
|
24441
|
-
table: tableElement,
|
|
24442
|
-
tableCell: tableCellElement,
|
|
24443
|
-
tableCellHeader: tableHeaderElement
|
|
23699
|
+
code: codeElement
|
|
24444
23700
|
},
|
|
24445
23701
|
editable: !readOnly
|
|
24446
23702
|
};
|
|
24447
|
-
return /* @__PURE__ */ (0,
|
|
24448
|
-
/* @__PURE__ */ (0,
|
|
23703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
23704
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
24449
23705
|
RichText,
|
|
24450
23706
|
{
|
|
24451
23707
|
onChange,
|
|
@@ -24454,11 +23710,8 @@ var ParameterRichTextInner = ({
|
|
|
24454
23710
|
onRichTextInit,
|
|
24455
23711
|
readOnly,
|
|
24456
23712
|
editorInputClassName,
|
|
24457
|
-
editorInputWrapperClassName,
|
|
24458
23713
|
variables,
|
|
24459
23714
|
customControls,
|
|
24460
|
-
onInsertTable,
|
|
24461
|
-
minimalInteractivity,
|
|
24462
23715
|
children
|
|
24463
23716
|
}
|
|
24464
23717
|
) }) }),
|
|
@@ -24481,20 +23734,18 @@ var RichText = ({
|
|
|
24481
23734
|
onRichTextInit,
|
|
24482
23735
|
readOnly,
|
|
24483
23736
|
editorInputClassName,
|
|
24484
|
-
editorInputWrapperClassName,
|
|
24485
23737
|
children,
|
|
24486
23738
|
variables,
|
|
24487
|
-
customControls
|
|
24488
|
-
onInsertTable,
|
|
24489
|
-
minimalInteractivity
|
|
23739
|
+
customControls
|
|
24490
23740
|
}) => {
|
|
24491
|
-
const
|
|
24492
|
-
(0,
|
|
23741
|
+
const editorContainerRef = (0, import_react151.useRef)(null);
|
|
23742
|
+
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23743
|
+
(0, import_react151.useEffect)(() => {
|
|
24493
23744
|
if (onRichTextInit) {
|
|
24494
23745
|
onRichTextInit(editor);
|
|
24495
23746
|
}
|
|
24496
23747
|
}, [editor, onRichTextInit]);
|
|
24497
|
-
(0,
|
|
23748
|
+
(0, import_react151.useEffect)(() => {
|
|
24498
23749
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
|
|
24499
23750
|
requestAnimationFrame(() => {
|
|
24500
23751
|
if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -24506,73 +23757,54 @@ var RichText = ({
|
|
|
24506
23757
|
removeUpdateListener();
|
|
24507
23758
|
};
|
|
24508
23759
|
}, [editor, onChange]);
|
|
24509
|
-
(0,
|
|
23760
|
+
(0, import_react151.useEffect)(() => {
|
|
24510
23761
|
editor.setEditable(!readOnly);
|
|
24511
23762
|
}, [editor, readOnly]);
|
|
24512
|
-
|
|
24513
|
-
|
|
24514
|
-
|
|
24515
|
-
|
|
24516
|
-
|
|
24517
|
-
|
|
24518
|
-
|
|
24519
|
-
|
|
24520
|
-
|
|
24521
|
-
|
|
24522
|
-
|
|
24523
|
-
|
|
24524
|
-
|
|
24525
|
-
|
|
24526
|
-
|
|
24527
|
-
|
|
24528
|
-
|
|
24529
|
-
|
|
24530
|
-
|
|
24531
|
-
|
|
24532
|
-
|
|
24533
|
-
|
|
24534
|
-
|
|
24535
|
-
|
|
24536
|
-
|
|
24537
|
-
|
|
24538
|
-
|
|
24539
|
-
|
|
24540
|
-
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
|
|
24541
|
-
editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
24542
|
-
LinkNodePlugin,
|
|
24543
|
-
{
|
|
24544
|
-
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
24545
|
-
getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
|
|
24546
|
-
var _a, _b;
|
|
24547
|
-
return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
|
|
24548
|
-
} : void 0,
|
|
24549
|
-
positioningAnchorEl: editorContainerRef
|
|
24550
|
-
}
|
|
24551
|
-
) : null,
|
|
24552
|
-
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ListIndentPlugin, { maxDepth: 4 }),
|
|
24553
|
-
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DisableStylesPlugin, {}),
|
|
24554
|
-
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
24555
|
-
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_jsx_runtime133.Fragment, { children })
|
|
24556
|
-
]
|
|
24557
|
-
}
|
|
24558
|
-
)
|
|
23763
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
23764
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(RichTextToolbar_default, { config, customControls }),
|
|
23765
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
|
|
23766
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23767
|
+
import_LexicalRichTextPlugin.RichTextPlugin,
|
|
23768
|
+
{
|
|
23769
|
+
contentEditable: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
23770
|
+
placeholder: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
23771
|
+
ErrorBoundary: import_LexicalErrorBoundary.default
|
|
23772
|
+
}
|
|
23773
|
+
),
|
|
23774
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalListPlugin.ListPlugin, {}),
|
|
23775
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
|
|
23776
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23777
|
+
LinkNodePlugin,
|
|
23778
|
+
{
|
|
23779
|
+
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
23780
|
+
getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
|
|
23781
|
+
var _a, _b;
|
|
23782
|
+
return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
|
|
23783
|
+
} : void 0
|
|
23784
|
+
}
|
|
23785
|
+
),
|
|
23786
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ListIndentPlugin, { maxDepth: 4 }),
|
|
23787
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DisableStylesPlugin, {}),
|
|
23788
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
23789
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children })
|
|
23790
|
+
] })
|
|
24559
23791
|
] });
|
|
24560
23792
|
};
|
|
24561
23793
|
|
|
24562
23794
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
24563
23795
|
init_emotion_jsx_shim();
|
|
24564
|
-
var
|
|
24565
|
-
var
|
|
24566
|
-
var ParameterSelect = (0,
|
|
23796
|
+
var import_react152 = require("react");
|
|
23797
|
+
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
23798
|
+
var ParameterSelect = (0, import_react152.forwardRef)(
|
|
24567
23799
|
({ defaultOption, options, ...props }, ref) => {
|
|
24568
23800
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
24569
|
-
return /* @__PURE__ */ (0,
|
|
23801
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
24570
23802
|
}
|
|
24571
23803
|
);
|
|
24572
|
-
var ParameterSelectInner = (0,
|
|
23804
|
+
var ParameterSelectInner = (0, import_react152.forwardRef)(
|
|
24573
23805
|
({ defaultOption, options, ...props }, ref) => {
|
|
24574
23806
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
24575
|
-
return /* @__PURE__ */ (0,
|
|
23807
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
|
|
24576
23808
|
"select",
|
|
24577
23809
|
{
|
|
24578
23810
|
css: [input3, selectInput],
|
|
@@ -24581,10 +23813,10 @@ var ParameterSelectInner = (0, import_react156.forwardRef)(
|
|
|
24581
23813
|
ref,
|
|
24582
23814
|
...props,
|
|
24583
23815
|
children: [
|
|
24584
|
-
defaultOption ? /* @__PURE__ */ (0,
|
|
23816
|
+
defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: "", children: defaultOption }) : null,
|
|
24585
23817
|
options.map((option) => {
|
|
24586
23818
|
var _a;
|
|
24587
|
-
return /* @__PURE__ */ (0,
|
|
23819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
24588
23820
|
})
|
|
24589
23821
|
]
|
|
24590
23822
|
}
|
|
@@ -24594,15 +23826,15 @@ var ParameterSelectInner = (0, import_react156.forwardRef)(
|
|
|
24594
23826
|
|
|
24595
23827
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
24596
23828
|
init_emotion_jsx_shim();
|
|
24597
|
-
var
|
|
24598
|
-
var
|
|
24599
|
-
var ParameterTextarea = (0,
|
|
23829
|
+
var import_react153 = require("react");
|
|
23830
|
+
var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
|
|
23831
|
+
var ParameterTextarea = (0, import_react153.forwardRef)((props, ref) => {
|
|
24600
23832
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
24601
|
-
return /* @__PURE__ */ (0,
|
|
23833
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
24602
23834
|
});
|
|
24603
|
-
var ParameterTextareaInner = (0,
|
|
23835
|
+
var ParameterTextareaInner = (0, import_react153.forwardRef)(({ ...props }, ref) => {
|
|
24604
23836
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
24605
|
-
return /* @__PURE__ */ (0,
|
|
23837
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
24606
23838
|
"textarea",
|
|
24607
23839
|
{
|
|
24608
23840
|
css: [input3, textarea2],
|
|
@@ -24616,18 +23848,18 @@ var ParameterTextareaInner = (0, import_react157.forwardRef)(({ ...props }, ref)
|
|
|
24616
23848
|
|
|
24617
23849
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
24618
23850
|
init_emotion_jsx_shim();
|
|
24619
|
-
var
|
|
24620
|
-
var
|
|
24621
|
-
var ParameterToggle = (0,
|
|
23851
|
+
var import_react154 = require("react");
|
|
23852
|
+
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
23853
|
+
var ParameterToggle = (0, import_react154.forwardRef)((props, ref) => {
|
|
24622
23854
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
24623
|
-
return /* @__PURE__ */ (0,
|
|
23855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
24624
23856
|
});
|
|
24625
|
-
var ParameterToggleInner = (0,
|
|
23857
|
+
var ParameterToggleInner = (0, import_react154.forwardRef)(
|
|
24626
23858
|
({ children, ...props }, ref) => {
|
|
24627
23859
|
const { id, label } = useParameterShell();
|
|
24628
|
-
return /* @__PURE__ */ (0,
|
|
24629
|
-
/* @__PURE__ */ (0,
|
|
24630
|
-
/* @__PURE__ */ (0,
|
|
23860
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("label", { css: inputToggleLabel2, children: [
|
|
23861
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
23862
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { css: inlineLabel2, children: label }),
|
|
24631
23863
|
children
|
|
24632
23864
|
] });
|
|
24633
23865
|
}
|
|
@@ -24638,8 +23870,8 @@ init_emotion_jsx_shim();
|
|
|
24638
23870
|
|
|
24639
23871
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
24640
23872
|
init_emotion_jsx_shim();
|
|
24641
|
-
var
|
|
24642
|
-
var container3 =
|
|
23873
|
+
var import_react155 = require("@emotion/react");
|
|
23874
|
+
var container3 = import_react155.css`
|
|
24643
23875
|
background: var(--gray-50);
|
|
24644
23876
|
margin-block: var(--spacing-sm);
|
|
24645
23877
|
position: relative;
|
|
@@ -24649,17 +23881,17 @@ var container3 = import_react159.css`
|
|
|
24649
23881
|
border: solid 1px var(--gray-300);
|
|
24650
23882
|
`;
|
|
24651
23883
|
var themeMap = {
|
|
24652
|
-
primary:
|
|
23884
|
+
primary: import_react155.css`
|
|
24653
23885
|
--progress-color: var(--accent-light);
|
|
24654
23886
|
`,
|
|
24655
|
-
secondary:
|
|
23887
|
+
secondary: import_react155.css`
|
|
24656
23888
|
--progress-color: var(--accent-alt-light);
|
|
24657
23889
|
`,
|
|
24658
|
-
destructive:
|
|
23890
|
+
destructive: import_react155.css`
|
|
24659
23891
|
--progress-color: var(--brand-secondary-5);
|
|
24660
23892
|
`
|
|
24661
23893
|
};
|
|
24662
|
-
var slidingBackgroundPosition =
|
|
23894
|
+
var slidingBackgroundPosition = import_react155.keyframes`
|
|
24663
23895
|
from {
|
|
24664
23896
|
background-position: 0 0;
|
|
24665
23897
|
}
|
|
@@ -24667,10 +23899,10 @@ var slidingBackgroundPosition = import_react159.keyframes`
|
|
|
24667
23899
|
background-position: 64px 0;
|
|
24668
23900
|
}
|
|
24669
23901
|
`;
|
|
24670
|
-
var determinate =
|
|
23902
|
+
var determinate = import_react155.css`
|
|
24671
23903
|
background-color: var(--progress-color);
|
|
24672
23904
|
`;
|
|
24673
|
-
var indeterminate =
|
|
23905
|
+
var indeterminate = import_react155.css`
|
|
24674
23906
|
background-image: linear-gradient(
|
|
24675
23907
|
45deg,
|
|
24676
23908
|
var(--progress-color) 25%,
|
|
@@ -24684,7 +23916,7 @@ var indeterminate = import_react159.css`
|
|
|
24684
23916
|
background-size: 64px 64px;
|
|
24685
23917
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
24686
23918
|
`;
|
|
24687
|
-
var bar =
|
|
23919
|
+
var bar = import_react155.css`
|
|
24688
23920
|
position: absolute;
|
|
24689
23921
|
inset: 0;
|
|
24690
23922
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -24692,7 +23924,7 @@ var bar = import_react159.css`
|
|
|
24692
23924
|
`;
|
|
24693
23925
|
|
|
24694
23926
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
24695
|
-
var
|
|
23927
|
+
var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
|
|
24696
23928
|
function ProgressBar({
|
|
24697
23929
|
current,
|
|
24698
23930
|
max,
|
|
@@ -24702,7 +23934,7 @@ function ProgressBar({
|
|
|
24702
23934
|
}) {
|
|
24703
23935
|
const valueNow = Math.min(current, max);
|
|
24704
23936
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
24705
|
-
return /* @__PURE__ */ (0,
|
|
23937
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
24706
23938
|
"div",
|
|
24707
23939
|
{
|
|
24708
23940
|
css: container3,
|
|
@@ -24713,7 +23945,7 @@ function ProgressBar({
|
|
|
24713
23945
|
"aria-valuemax": max,
|
|
24714
23946
|
"aria-valuenow": valueNow,
|
|
24715
23947
|
...props,
|
|
24716
|
-
children: /* @__PURE__ */ (0,
|
|
23948
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
24717
23949
|
"div",
|
|
24718
23950
|
{
|
|
24719
23951
|
css: [
|
|
@@ -24733,31 +23965,31 @@ function ProgressBar({
|
|
|
24733
23965
|
|
|
24734
23966
|
// src/components/ProgressList/ProgressList.tsx
|
|
24735
23967
|
init_emotion_jsx_shim();
|
|
24736
|
-
var
|
|
23968
|
+
var import_react157 = require("@emotion/react");
|
|
24737
23969
|
var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
|
|
24738
23970
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
24739
23971
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
24740
|
-
var
|
|
23972
|
+
var import_react158 = require("react");
|
|
24741
23973
|
|
|
24742
23974
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
24743
23975
|
init_emotion_jsx_shim();
|
|
24744
|
-
var
|
|
24745
|
-
var progressListStyles =
|
|
23976
|
+
var import_react156 = require("@emotion/react");
|
|
23977
|
+
var progressListStyles = import_react156.css`
|
|
24746
23978
|
display: flex;
|
|
24747
23979
|
flex-direction: column;
|
|
24748
23980
|
gap: var(--spacing-sm);
|
|
24749
23981
|
list-style-type: none;
|
|
24750
23982
|
`;
|
|
24751
|
-
var progressListItemStyles =
|
|
23983
|
+
var progressListItemStyles = import_react156.css`
|
|
24752
23984
|
display: flex;
|
|
24753
23985
|
gap: var(--spacing-base);
|
|
24754
23986
|
align-items: center;
|
|
24755
23987
|
`;
|
|
24756
23988
|
|
|
24757
23989
|
// src/components/ProgressList/ProgressList.tsx
|
|
24758
|
-
var
|
|
23990
|
+
var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
|
|
24759
23991
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
24760
|
-
const itemsWithStatus = (0,
|
|
23992
|
+
const itemsWithStatus = (0, import_react158.useMemo)(() => {
|
|
24761
23993
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
24762
23994
|
return items.map((item, index) => {
|
|
24763
23995
|
let status = "queued";
|
|
@@ -24769,8 +24001,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
24769
24001
|
return { ...item, status };
|
|
24770
24002
|
});
|
|
24771
24003
|
}, [items, inProgressId]);
|
|
24772
|
-
return /* @__PURE__ */ (0,
|
|
24773
|
-
return /* @__PURE__ */ (0,
|
|
24004
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
24005
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
|
|
24774
24006
|
ProgressListItem,
|
|
24775
24007
|
{
|
|
24776
24008
|
status,
|
|
@@ -24790,7 +24022,7 @@ var ProgressListItem = ({
|
|
|
24790
24022
|
errorLevel = "danger",
|
|
24791
24023
|
autoEllipsis = false
|
|
24792
24024
|
}) => {
|
|
24793
|
-
const icon = (0,
|
|
24025
|
+
const icon = (0, import_react158.useMemo)(() => {
|
|
24794
24026
|
if (error) {
|
|
24795
24027
|
return warningIcon;
|
|
24796
24028
|
}
|
|
@@ -24801,14 +24033,14 @@ var ProgressListItem = ({
|
|
|
24801
24033
|
};
|
|
24802
24034
|
return iconPerStatus[status];
|
|
24803
24035
|
}, [status, error]);
|
|
24804
|
-
const statusStyles = (0,
|
|
24036
|
+
const statusStyles = (0, import_react158.useMemo)(() => {
|
|
24805
24037
|
if (error) {
|
|
24806
|
-
return errorLevel === "caution" ?
|
|
24038
|
+
return errorLevel === "caution" ? import_react157.css`
|
|
24807
24039
|
color: rgb(161, 98, 7);
|
|
24808
24040
|
& svg {
|
|
24809
24041
|
color: rgb(250, 204, 21);
|
|
24810
24042
|
}
|
|
24811
|
-
` :
|
|
24043
|
+
` : import_react157.css`
|
|
24812
24044
|
color: rgb(185, 28, 28);
|
|
24813
24045
|
& svg {
|
|
24814
24046
|
color: var(--brand-primary-2);
|
|
@@ -24816,40 +24048,40 @@ var ProgressListItem = ({
|
|
|
24816
24048
|
`;
|
|
24817
24049
|
}
|
|
24818
24050
|
const colorPerStatus = {
|
|
24819
|
-
completed:
|
|
24051
|
+
completed: import_react157.css`
|
|
24820
24052
|
opacity: 0.75;
|
|
24821
24053
|
`,
|
|
24822
|
-
inProgress:
|
|
24054
|
+
inProgress: import_react157.css`
|
|
24823
24055
|
-webkit-text-stroke-width: thin;
|
|
24824
24056
|
`,
|
|
24825
|
-
queued:
|
|
24057
|
+
queued: import_react157.css`
|
|
24826
24058
|
opacity: 0.5;
|
|
24827
24059
|
`
|
|
24828
24060
|
};
|
|
24829
24061
|
return colorPerStatus[status];
|
|
24830
24062
|
}, [status, error, errorLevel]);
|
|
24831
|
-
return /* @__PURE__ */ (0,
|
|
24832
|
-
/* @__PURE__ */ (0,
|
|
24833
|
-
/* @__PURE__ */ (0,
|
|
24063
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
24064
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
24065
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { children: [
|
|
24834
24066
|
children,
|
|
24835
|
-
/* @__PURE__ */ (0,
|
|
24067
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
24836
24068
|
] })
|
|
24837
24069
|
] });
|
|
24838
24070
|
};
|
|
24839
24071
|
|
|
24840
24072
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
24841
24073
|
init_emotion_jsx_shim();
|
|
24842
|
-
var
|
|
24074
|
+
var import_react160 = require("@emotion/react");
|
|
24843
24075
|
var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
|
|
24844
|
-
var
|
|
24076
|
+
var import_react161 = require("react");
|
|
24845
24077
|
|
|
24846
24078
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
24847
24079
|
init_emotion_jsx_shim();
|
|
24848
|
-
var
|
|
24849
|
-
var segmentedControlRootStyles =
|
|
24080
|
+
var import_react159 = require("@emotion/react");
|
|
24081
|
+
var segmentedControlRootStyles = import_react159.css`
|
|
24850
24082
|
position: relative;
|
|
24851
24083
|
`;
|
|
24852
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
24084
|
+
var segmentedControlScrollIndicatorsStyles = import_react159.css`
|
|
24853
24085
|
position: absolute;
|
|
24854
24086
|
inset: 0;
|
|
24855
24087
|
z-index: 1;
|
|
@@ -24877,17 +24109,17 @@ var segmentedControlScrollIndicatorsStyles = import_react163.css`
|
|
|
24877
24109
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
24878
24110
|
}
|
|
24879
24111
|
`;
|
|
24880
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
24112
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react159.css`
|
|
24881
24113
|
&::before {
|
|
24882
24114
|
opacity: 1;
|
|
24883
24115
|
}
|
|
24884
24116
|
`;
|
|
24885
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
24117
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react159.css`
|
|
24886
24118
|
&::after {
|
|
24887
24119
|
opacity: 1;
|
|
24888
24120
|
}
|
|
24889
24121
|
`;
|
|
24890
|
-
var segmentedControlWrapperStyles =
|
|
24122
|
+
var segmentedControlWrapperStyles = import_react159.css`
|
|
24891
24123
|
overflow-y: auto;
|
|
24892
24124
|
scroll-behavior: smooth;
|
|
24893
24125
|
scrollbar-width: none;
|
|
@@ -24896,7 +24128,7 @@ var segmentedControlWrapperStyles = import_react163.css`
|
|
|
24896
24128
|
height: 0px;
|
|
24897
24129
|
}
|
|
24898
24130
|
`;
|
|
24899
|
-
var segmentedControlStyles =
|
|
24131
|
+
var segmentedControlStyles = import_react159.css`
|
|
24900
24132
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
24901
24133
|
--segmented-control-border-width: 1px;
|
|
24902
24134
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -24915,14 +24147,14 @@ var segmentedControlStyles = import_react163.css`
|
|
|
24915
24147
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
24916
24148
|
font-size: var(--fs-xs);
|
|
24917
24149
|
`;
|
|
24918
|
-
var segmentedControlVerticalStyles =
|
|
24150
|
+
var segmentedControlVerticalStyles = import_react159.css`
|
|
24919
24151
|
flex-direction: column;
|
|
24920
24152
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
24921
24153
|
var(--segmented-control-rounded-value) 0 0;
|
|
24922
24154
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
24923
24155
|
var(--segmented-control-rounded-value);
|
|
24924
24156
|
`;
|
|
24925
|
-
var segmentedControlItemStyles =
|
|
24157
|
+
var segmentedControlItemStyles = import_react159.css`
|
|
24926
24158
|
&:first-of-type label {
|
|
24927
24159
|
border-radius: var(--segmented-control-first-border-radius);
|
|
24928
24160
|
}
|
|
@@ -24930,10 +24162,10 @@ var segmentedControlItemStyles = import_react163.css`
|
|
|
24930
24162
|
border-radius: var(--segmented-control-last-border-radius);
|
|
24931
24163
|
}
|
|
24932
24164
|
`;
|
|
24933
|
-
var segmentedControlInputStyles =
|
|
24165
|
+
var segmentedControlInputStyles = import_react159.css`
|
|
24934
24166
|
${accessibleHidden}
|
|
24935
24167
|
`;
|
|
24936
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
24168
|
+
var segmentedControlLabelStyles = (checked, disabled2) => import_react159.css`
|
|
24937
24169
|
position: relative;
|
|
24938
24170
|
display: flex;
|
|
24939
24171
|
align-items: center;
|
|
@@ -25000,25 +24232,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react163.css`
|
|
|
25000
24232
|
`}
|
|
25001
24233
|
}
|
|
25002
24234
|
`;
|
|
25003
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
24235
|
+
var segmentedControlLabelIconOnlyStyles = import_react159.css`
|
|
25004
24236
|
padding-inline: 0.5em;
|
|
25005
24237
|
`;
|
|
25006
|
-
var segmentedControlLabelCheckStyles =
|
|
24238
|
+
var segmentedControlLabelCheckStyles = import_react159.css`
|
|
25007
24239
|
opacity: 0.5;
|
|
25008
24240
|
`;
|
|
25009
|
-
var segmentedControlLabelContentStyles =
|
|
24241
|
+
var segmentedControlLabelContentStyles = import_react159.css`
|
|
25010
24242
|
display: flex;
|
|
25011
24243
|
align-items: center;
|
|
25012
24244
|
justify-content: center;
|
|
25013
24245
|
gap: var(--spacing-sm);
|
|
25014
24246
|
height: 100%;
|
|
25015
24247
|
`;
|
|
25016
|
-
var segmentedControlLabelTextStyles =
|
|
24248
|
+
var segmentedControlLabelTextStyles = import_react159.css`
|
|
25017
24249
|
white-space: nowrap;
|
|
25018
24250
|
`;
|
|
25019
24251
|
|
|
25020
24252
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
25021
|
-
var
|
|
24253
|
+
var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
|
|
25022
24254
|
var SegmentedControl = ({
|
|
25023
24255
|
name,
|
|
25024
24256
|
options,
|
|
@@ -25033,10 +24265,10 @@ var SegmentedControl = ({
|
|
|
25033
24265
|
currentBackgroundColor = "white",
|
|
25034
24266
|
...props
|
|
25035
24267
|
}) => {
|
|
25036
|
-
const wrapperRef = (0,
|
|
25037
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
25038
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
25039
|
-
const onOptionChange = (0,
|
|
24268
|
+
const wrapperRef = (0, import_react161.useRef)(null);
|
|
24269
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react161.useState)(false);
|
|
24270
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react161.useState)(false);
|
|
24271
|
+
const onOptionChange = (0, import_react161.useCallback)(
|
|
25040
24272
|
(event) => {
|
|
25041
24273
|
if (event.target.checked) {
|
|
25042
24274
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -25044,19 +24276,19 @@ var SegmentedControl = ({
|
|
|
25044
24276
|
},
|
|
25045
24277
|
[options, onChange]
|
|
25046
24278
|
);
|
|
25047
|
-
const sizeStyles = (0,
|
|
24279
|
+
const sizeStyles = (0, import_react161.useMemo)(() => {
|
|
25048
24280
|
const map = {
|
|
25049
|
-
sm: (0,
|
|
25050
|
-
md: (0,
|
|
25051
|
-
lg: (0,
|
|
25052
|
-
xl: (0,
|
|
24281
|
+
sm: (0, import_react160.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
24282
|
+
md: (0, import_react160.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
24283
|
+
lg: (0, import_react160.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
24284
|
+
xl: (0, import_react160.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
25053
24285
|
};
|
|
25054
24286
|
return map[size];
|
|
25055
24287
|
}, [size]);
|
|
25056
|
-
const isIconOnly = (0,
|
|
24288
|
+
const isIconOnly = (0, import_react161.useMemo)(() => {
|
|
25057
24289
|
return options.every((option) => option && option.icon && !option.label);
|
|
25058
24290
|
}, [options]);
|
|
25059
|
-
(0,
|
|
24291
|
+
(0, import_react161.useEffect)(() => {
|
|
25060
24292
|
const wrapperElement = wrapperRef.current;
|
|
25061
24293
|
const onScroll = () => {
|
|
25062
24294
|
if (!wrapperElement) {
|
|
@@ -25077,8 +24309,8 @@ var SegmentedControl = ({
|
|
|
25077
24309
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
25078
24310
|
};
|
|
25079
24311
|
}, []);
|
|
25080
|
-
return /* @__PURE__ */ (0,
|
|
25081
|
-
/* @__PURE__ */ (0,
|
|
24312
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
24313
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
25082
24314
|
"div",
|
|
25083
24315
|
{
|
|
25084
24316
|
css: [
|
|
@@ -25094,12 +24326,12 @@ var SegmentedControl = ({
|
|
|
25094
24326
|
}
|
|
25095
24327
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
25096
24328
|
const isDisabled = disabled2 || option.disabled;
|
|
25097
|
-
return /* @__PURE__ */ (0,
|
|
24329
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
25098
24330
|
"div",
|
|
25099
24331
|
{
|
|
25100
24332
|
css: segmentedControlItemStyles,
|
|
25101
24333
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
25102
|
-
children: /* @__PURE__ */ (0,
|
|
24334
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
|
|
25103
24335
|
"label",
|
|
25104
24336
|
{
|
|
25105
24337
|
css: [
|
|
@@ -25108,7 +24340,7 @@ var SegmentedControl = ({
|
|
|
25108
24340
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
25109
24341
|
],
|
|
25110
24342
|
children: [
|
|
25111
|
-
/* @__PURE__ */ (0,
|
|
24343
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
25112
24344
|
"input",
|
|
25113
24345
|
{
|
|
25114
24346
|
css: segmentedControlInputStyles,
|
|
@@ -25120,10 +24352,10 @@ var SegmentedControl = ({
|
|
|
25120
24352
|
disabled: isDisabled
|
|
25121
24353
|
}
|
|
25122
24354
|
),
|
|
25123
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0,
|
|
25124
|
-
/* @__PURE__ */ (0,
|
|
25125
|
-
!option.icon ? null : /* @__PURE__ */ (0,
|
|
25126
|
-
!text || hideOptionText ? null : /* @__PURE__ */ (0,
|
|
24355
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
24356
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
|
|
24357
|
+
!option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
24358
|
+
!text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
25127
24359
|
] })
|
|
25128
24360
|
]
|
|
25129
24361
|
}
|
|
@@ -25133,7 +24365,7 @@ var SegmentedControl = ({
|
|
|
25133
24365
|
})
|
|
25134
24366
|
}
|
|
25135
24367
|
) }),
|
|
25136
|
-
/* @__PURE__ */ (0,
|
|
24368
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
25137
24369
|
"div",
|
|
25138
24370
|
{
|
|
25139
24371
|
css: [
|
|
@@ -25151,18 +24383,18 @@ init_emotion_jsx_shim();
|
|
|
25151
24383
|
|
|
25152
24384
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
25153
24385
|
init_emotion_jsx_shim();
|
|
25154
|
-
var
|
|
25155
|
-
var lightFadingOut =
|
|
24386
|
+
var import_react162 = require("@emotion/react");
|
|
24387
|
+
var lightFadingOut = import_react162.keyframes`
|
|
25156
24388
|
from { opacity: 0.1; }
|
|
25157
24389
|
to { opacity: 0.025; }
|
|
25158
24390
|
`;
|
|
25159
|
-
var skeletonStyles =
|
|
24391
|
+
var skeletonStyles = import_react162.css`
|
|
25160
24392
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
25161
24393
|
background-color: var(--gray-900);
|
|
25162
24394
|
`;
|
|
25163
24395
|
|
|
25164
24396
|
// src/components/Skeleton/Skeleton.tsx
|
|
25165
|
-
var
|
|
24397
|
+
var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
|
|
25166
24398
|
var Skeleton = ({
|
|
25167
24399
|
width = "100%",
|
|
25168
24400
|
height = "1.25rem",
|
|
@@ -25170,7 +24402,7 @@ var Skeleton = ({
|
|
|
25170
24402
|
circle = false,
|
|
25171
24403
|
children,
|
|
25172
24404
|
...otherProps
|
|
25173
|
-
}) => /* @__PURE__ */ (0,
|
|
24405
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
|
|
25174
24406
|
"div",
|
|
25175
24407
|
{
|
|
25176
24408
|
css: [
|
|
@@ -25191,12 +24423,12 @@ var Skeleton = ({
|
|
|
25191
24423
|
|
|
25192
24424
|
// src/components/Switch/Switch.tsx
|
|
25193
24425
|
init_emotion_jsx_shim();
|
|
25194
|
-
var
|
|
24426
|
+
var import_react164 = require("react");
|
|
25195
24427
|
|
|
25196
24428
|
// src/components/Switch/Switch.styles.ts
|
|
25197
24429
|
init_emotion_jsx_shim();
|
|
25198
|
-
var
|
|
25199
|
-
var SwitchInputContainer =
|
|
24430
|
+
var import_react163 = require("@emotion/react");
|
|
24431
|
+
var SwitchInputContainer = import_react163.css`
|
|
25200
24432
|
cursor: pointer;
|
|
25201
24433
|
display: inline-block;
|
|
25202
24434
|
position: relative;
|
|
@@ -25205,7 +24437,7 @@ var SwitchInputContainer = import_react167.css`
|
|
|
25205
24437
|
vertical-align: middle;
|
|
25206
24438
|
user-select: none;
|
|
25207
24439
|
`;
|
|
25208
|
-
var SwitchInput = (size) =>
|
|
24440
|
+
var SwitchInput = (size) => import_react163.css`
|
|
25209
24441
|
appearance: none;
|
|
25210
24442
|
border-radius: var(--rounded-full);
|
|
25211
24443
|
background-color: var(--white);
|
|
@@ -25216,7 +24448,8 @@ var SwitchInput = (size) => import_react167.css`
|
|
|
25216
24448
|
width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
25217
24449
|
height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
25218
24450
|
margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
|
|
25219
|
-
transition:
|
|
24451
|
+
transition:
|
|
24452
|
+
transform var(--duration-fast) var(--timing-ease-out),
|
|
25220
24453
|
background-color var(--duration-fast) var(--timing-ease-out),
|
|
25221
24454
|
background-image var(--duration-fast) var(--timing-ease-out);
|
|
25222
24455
|
z-index: var(--z-10);
|
|
@@ -25244,7 +24477,7 @@ var SwitchInput = (size) => import_react167.css`
|
|
|
25244
24477
|
cursor: not-allowed;
|
|
25245
24478
|
}
|
|
25246
24479
|
`;
|
|
25247
|
-
var SwitchInputDisabled =
|
|
24480
|
+
var SwitchInputDisabled = import_react163.css`
|
|
25248
24481
|
opacity: var(--opacity-50);
|
|
25249
24482
|
cursor: not-allowed;
|
|
25250
24483
|
|
|
@@ -25252,7 +24485,7 @@ var SwitchInputDisabled = import_react167.css`
|
|
|
25252
24485
|
cursor: not-allowed;
|
|
25253
24486
|
}
|
|
25254
24487
|
`;
|
|
25255
|
-
var SwitchInputLabel = (size) =>
|
|
24488
|
+
var SwitchInputLabel = (size) => import_react163.css`
|
|
25256
24489
|
align-items: center;
|
|
25257
24490
|
color: var(--typography-base);
|
|
25258
24491
|
display: inline-flex;
|
|
@@ -25274,32 +24507,32 @@ var SwitchInputLabel = (size) => import_react167.css`
|
|
|
25274
24507
|
top: 0;
|
|
25275
24508
|
}
|
|
25276
24509
|
`;
|
|
25277
|
-
var SwitchText = (size) =>
|
|
24510
|
+
var SwitchText = (size) => import_react163.css`
|
|
25278
24511
|
color: var(--gray-500);
|
|
25279
24512
|
font-size: var(--fs-sm);
|
|
25280
24513
|
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
25281
24514
|
`;
|
|
25282
24515
|
|
|
25283
24516
|
// src/components/Switch/Switch.tsx
|
|
25284
|
-
var
|
|
25285
|
-
var Switch = (0,
|
|
24517
|
+
var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
|
|
24518
|
+
var Switch = (0, import_react164.forwardRef)(
|
|
25286
24519
|
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
25287
24520
|
let additionalText = infoText;
|
|
25288
24521
|
if (infoText && toggleText) {
|
|
25289
24522
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
25290
24523
|
}
|
|
25291
|
-
return /* @__PURE__ */ (0,
|
|
25292
|
-
/* @__PURE__ */ (0,
|
|
24524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
|
|
24525
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
|
|
25293
24526
|
"label",
|
|
25294
24527
|
{
|
|
25295
24528
|
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
25296
24529
|
children: [
|
|
25297
|
-
/* @__PURE__ */ (0,
|
|
25298
|
-
/* @__PURE__ */ (0,
|
|
24530
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
24531
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
25299
24532
|
]
|
|
25300
24533
|
}
|
|
25301
24534
|
),
|
|
25302
|
-
additionalText ? /* @__PURE__ */ (0,
|
|
24535
|
+
additionalText ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
25303
24536
|
children
|
|
25304
24537
|
] });
|
|
25305
24538
|
}
|
|
@@ -25311,8 +24544,8 @@ var React24 = __toESM(require("react"));
|
|
|
25311
24544
|
|
|
25312
24545
|
// src/components/Table/Table.styles.ts
|
|
25313
24546
|
init_emotion_jsx_shim();
|
|
25314
|
-
var
|
|
25315
|
-
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) =>
|
|
24547
|
+
var import_react165 = require("@emotion/react");
|
|
24548
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react165.css`
|
|
25316
24549
|
border-bottom: 1px solid var(--gray-400);
|
|
25317
24550
|
border-collapse: collapse;
|
|
25318
24551
|
min-width: 100%;
|
|
@@ -25332,66 +24565,66 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
|
|
|
25332
24565
|
background-color: var(--gray-50);
|
|
25333
24566
|
}
|
|
25334
24567
|
`;
|
|
25335
|
-
var tableHead =
|
|
24568
|
+
var tableHead = import_react165.css`
|
|
25336
24569
|
color: var(--typography-base);
|
|
25337
24570
|
text-align: left;
|
|
25338
24571
|
`;
|
|
25339
|
-
var tableRow =
|
|
24572
|
+
var tableRow = import_react165.css`
|
|
25340
24573
|
border-bottom: 1px solid var(--gray-100);
|
|
25341
24574
|
`;
|
|
25342
|
-
var tableCellHead =
|
|
24575
|
+
var tableCellHead = import_react165.css`
|
|
25343
24576
|
font-size: var(--fs-sm);
|
|
25344
24577
|
text-transform: uppercase;
|
|
25345
24578
|
font-weight: var(--fw-bold);
|
|
25346
24579
|
`;
|
|
25347
24580
|
|
|
25348
24581
|
// src/components/Table/Table.tsx
|
|
25349
|
-
var
|
|
24582
|
+
var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
|
|
25350
24583
|
var Table = React24.forwardRef(
|
|
25351
24584
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
25352
|
-
return /* @__PURE__ */ (0,
|
|
24585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
25353
24586
|
}
|
|
25354
24587
|
);
|
|
25355
24588
|
var TableHead = React24.forwardRef(
|
|
25356
24589
|
({ children, ...otherProps }, ref) => {
|
|
25357
|
-
return /* @__PURE__ */ (0,
|
|
24590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
|
|
25358
24591
|
}
|
|
25359
24592
|
);
|
|
25360
24593
|
var TableBody = React24.forwardRef(
|
|
25361
24594
|
({ children, ...otherProps }, ref) => {
|
|
25362
|
-
return /* @__PURE__ */ (0,
|
|
24595
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tbody", { ref, ...otherProps, children });
|
|
25363
24596
|
}
|
|
25364
24597
|
);
|
|
25365
24598
|
var TableFoot = React24.forwardRef(
|
|
25366
24599
|
({ children, ...otherProps }, ref) => {
|
|
25367
|
-
return /* @__PURE__ */ (0,
|
|
24600
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tfoot", { ref, ...otherProps, children });
|
|
25368
24601
|
}
|
|
25369
24602
|
);
|
|
25370
24603
|
var TableRow = React24.forwardRef(
|
|
25371
24604
|
({ children, ...otherProps }, ref) => {
|
|
25372
|
-
return /* @__PURE__ */ (0,
|
|
24605
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
|
|
25373
24606
|
}
|
|
25374
24607
|
);
|
|
25375
24608
|
var TableCellHead = React24.forwardRef(
|
|
25376
24609
|
({ children, ...otherProps }, ref) => {
|
|
25377
|
-
return /* @__PURE__ */ (0,
|
|
24610
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
25378
24611
|
}
|
|
25379
24612
|
);
|
|
25380
24613
|
var TableCellData = React24.forwardRef(
|
|
25381
24614
|
({ children, ...otherProps }, ref) => {
|
|
25382
|
-
return /* @__PURE__ */ (0,
|
|
24615
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("td", { ref, ...otherProps, children });
|
|
25383
24616
|
}
|
|
25384
24617
|
);
|
|
25385
24618
|
|
|
25386
24619
|
// src/components/Tabs/Tabs.tsx
|
|
25387
24620
|
init_emotion_jsx_shim();
|
|
25388
|
-
var
|
|
25389
|
-
var
|
|
24621
|
+
var import_react167 = require("@ariakit/react");
|
|
24622
|
+
var import_react168 = require("react");
|
|
25390
24623
|
|
|
25391
24624
|
// src/components/Tabs/Tabs.styles.ts
|
|
25392
24625
|
init_emotion_jsx_shim();
|
|
25393
|
-
var
|
|
25394
|
-
var tabButtonStyles =
|
|
24626
|
+
var import_react166 = require("@emotion/react");
|
|
24627
|
+
var tabButtonStyles = import_react166.css`
|
|
25395
24628
|
align-items: center;
|
|
25396
24629
|
border: 0;
|
|
25397
24630
|
height: 2.5rem;
|
|
@@ -25408,16 +24641,16 @@ var tabButtonStyles = import_react170.css`
|
|
|
25408
24641
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
25409
24642
|
}
|
|
25410
24643
|
`;
|
|
25411
|
-
var tabButtonGroupStyles =
|
|
24644
|
+
var tabButtonGroupStyles = import_react166.css`
|
|
25412
24645
|
display: flex;
|
|
25413
24646
|
gap: var(--spacing-base);
|
|
25414
24647
|
border-bottom: 1px solid var(--gray-300);
|
|
25415
24648
|
`;
|
|
25416
24649
|
|
|
25417
24650
|
// src/components/Tabs/Tabs.tsx
|
|
25418
|
-
var
|
|
24651
|
+
var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
|
|
25419
24652
|
var useCurrentTab = () => {
|
|
25420
|
-
const context = (0,
|
|
24653
|
+
const context = (0, import_react167.useTabStore)();
|
|
25421
24654
|
if (!context) {
|
|
25422
24655
|
throw new Error("This component can only be used inside <Tabs>");
|
|
25423
24656
|
}
|
|
@@ -25431,12 +24664,12 @@ var Tabs = ({
|
|
|
25431
24664
|
manual,
|
|
25432
24665
|
...props
|
|
25433
24666
|
}) => {
|
|
25434
|
-
const selected = (0,
|
|
24667
|
+
const selected = (0, import_react168.useMemo)(() => {
|
|
25435
24668
|
if (selectedId) return selectedId;
|
|
25436
24669
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
25437
24670
|
}, [selectedId, useHashForState]);
|
|
25438
|
-
const tab = (0,
|
|
25439
|
-
const onTabSelect = (0,
|
|
24671
|
+
const tab = (0, import_react167.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
|
|
24672
|
+
const onTabSelect = (0, import_react168.useCallback)(
|
|
25440
24673
|
(value) => {
|
|
25441
24674
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
25442
24675
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -25447,28 +24680,28 @@ var Tabs = ({
|
|
|
25447
24680
|
},
|
|
25448
24681
|
[onSelectedIdChange, useHashForState]
|
|
25449
24682
|
);
|
|
25450
|
-
(0,
|
|
24683
|
+
(0, import_react168.useEffect)(() => {
|
|
25451
24684
|
if (selected && selected !== tab.getState().activeId) {
|
|
25452
24685
|
tab.setSelectedId(selected);
|
|
25453
24686
|
}
|
|
25454
24687
|
}, [selected, tab]);
|
|
25455
|
-
return /* @__PURE__ */ (0,
|
|
24688
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
25456
24689
|
};
|
|
25457
24690
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
25458
|
-
return /* @__PURE__ */ (0,
|
|
24691
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
25459
24692
|
};
|
|
25460
24693
|
var TabButton = ({
|
|
25461
24694
|
children,
|
|
25462
24695
|
id,
|
|
25463
24696
|
...props
|
|
25464
24697
|
}) => {
|
|
25465
|
-
return /* @__PURE__ */ (0,
|
|
24698
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
25466
24699
|
};
|
|
25467
24700
|
var TabContent = ({
|
|
25468
24701
|
children,
|
|
25469
24702
|
...props
|
|
25470
24703
|
}) => {
|
|
25471
|
-
return /* @__PURE__ */ (0,
|
|
24704
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabPanel, { ...props, children });
|
|
25472
24705
|
};
|
|
25473
24706
|
|
|
25474
24707
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -25476,8 +24709,8 @@ init_emotion_jsx_shim();
|
|
|
25476
24709
|
|
|
25477
24710
|
// src/components/Validation/StatusBullet.styles.ts
|
|
25478
24711
|
init_emotion_jsx_shim();
|
|
25479
|
-
var
|
|
25480
|
-
var StatusBulletContainer =
|
|
24712
|
+
var import_react169 = require("@emotion/react");
|
|
24713
|
+
var StatusBulletContainer = import_react169.css`
|
|
25481
24714
|
align-items: center;
|
|
25482
24715
|
align-self: center;
|
|
25483
24716
|
color: var(--gray-500);
|
|
@@ -25494,33 +24727,33 @@ var StatusBulletContainer = import_react173.css`
|
|
|
25494
24727
|
display: block;
|
|
25495
24728
|
}
|
|
25496
24729
|
`;
|
|
25497
|
-
var StatusBulletBase =
|
|
24730
|
+
var StatusBulletBase = import_react169.css`
|
|
25498
24731
|
font-size: var(--fs-sm);
|
|
25499
24732
|
&:before {
|
|
25500
24733
|
width: var(--fs-xs);
|
|
25501
24734
|
height: var(--fs-xs);
|
|
25502
24735
|
}
|
|
25503
24736
|
`;
|
|
25504
|
-
var StatusBulletSmall =
|
|
24737
|
+
var StatusBulletSmall = import_react169.css`
|
|
25505
24738
|
font-size: var(--fs-xs);
|
|
25506
24739
|
&:before {
|
|
25507
24740
|
width: var(--fs-xxs);
|
|
25508
24741
|
height: var(--fs-xxs);
|
|
25509
24742
|
}
|
|
25510
24743
|
`;
|
|
25511
|
-
var StatusDraft =
|
|
24744
|
+
var StatusDraft = import_react169.css`
|
|
25512
24745
|
&:before {
|
|
25513
24746
|
background: var(--white);
|
|
25514
24747
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
25515
24748
|
}
|
|
25516
24749
|
`;
|
|
25517
|
-
var StatusModified =
|
|
24750
|
+
var StatusModified = import_react169.css`
|
|
25518
24751
|
&:before {
|
|
25519
24752
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
25520
24753
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
25521
24754
|
}
|
|
25522
24755
|
`;
|
|
25523
|
-
var StatusError =
|
|
24756
|
+
var StatusError = import_react169.css`
|
|
25524
24757
|
color: var(--error);
|
|
25525
24758
|
&:before {
|
|
25526
24759
|
/* TODO: replace this with an svg icon */
|
|
@@ -25533,29 +24766,29 @@ var StatusError = import_react173.css`
|
|
|
25533
24766
|
);
|
|
25534
24767
|
}
|
|
25535
24768
|
`;
|
|
25536
|
-
var StatusPublished =
|
|
24769
|
+
var StatusPublished = import_react169.css`
|
|
25537
24770
|
&:before {
|
|
25538
24771
|
background: var(--accent-dark);
|
|
25539
24772
|
}
|
|
25540
24773
|
`;
|
|
25541
|
-
var StatusOrphan =
|
|
24774
|
+
var StatusOrphan = import_react169.css`
|
|
25542
24775
|
&:before {
|
|
25543
24776
|
background: var(--brand-secondary-5);
|
|
25544
24777
|
}
|
|
25545
24778
|
`;
|
|
25546
|
-
var StatusUnknown =
|
|
24779
|
+
var StatusUnknown = import_react169.css`
|
|
25547
24780
|
&:before {
|
|
25548
24781
|
background: var(--gray-800);
|
|
25549
24782
|
}
|
|
25550
24783
|
`;
|
|
25551
|
-
var StatusDeleted =
|
|
24784
|
+
var StatusDeleted = import_react169.css`
|
|
25552
24785
|
&:before {
|
|
25553
24786
|
background: var(--error);
|
|
25554
24787
|
}
|
|
25555
24788
|
`;
|
|
25556
24789
|
|
|
25557
24790
|
// src/components/Validation/StatusBullet.tsx
|
|
25558
|
-
var
|
|
24791
|
+
var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
|
|
25559
24792
|
var StatusBullet = ({
|
|
25560
24793
|
status,
|
|
25561
24794
|
hideText = false,
|
|
@@ -25575,7 +24808,7 @@ var StatusBullet = ({
|
|
|
25575
24808
|
Deleted: StatusDeleted
|
|
25576
24809
|
};
|
|
25577
24810
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
25578
|
-
return /* @__PURE__ */ (0,
|
|
24811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
25579
24812
|
"span",
|
|
25580
24813
|
{
|
|
25581
24814
|
role: "status",
|
|
@@ -25835,12 +25068,16 @@ var StatusBullet = ({
|
|
|
25835
25068
|
supports,
|
|
25836
25069
|
textInput,
|
|
25837
25070
|
toast,
|
|
25071
|
+
uniformAiIcon,
|
|
25838
25072
|
uniformComponentIcon,
|
|
25839
25073
|
uniformComponentPatternIcon,
|
|
25840
25074
|
uniformCompositionPatternIcon,
|
|
25075
|
+
uniformConditionalValuesIcon,
|
|
25841
25076
|
uniformContentTypeIcon,
|
|
25842
25077
|
uniformEntryIcon,
|
|
25843
25078
|
uniformEntryPatternIcon,
|
|
25079
|
+
uniformLocaleDisabledIcon,
|
|
25080
|
+
uniformLocaleIcon,
|
|
25844
25081
|
useBreakpoint,
|
|
25845
25082
|
useCloseCurrentDrawer,
|
|
25846
25083
|
useCurrentDrawer,
|
|
@@ -25851,7 +25088,6 @@ var StatusBullet = ({
|
|
|
25851
25088
|
useOutsideClick,
|
|
25852
25089
|
useParameterShell,
|
|
25853
25090
|
usePopoverComponentContext,
|
|
25854
|
-
useRichTextToolbarState,
|
|
25855
25091
|
useShortcut,
|
|
25856
25092
|
utilityColors,
|
|
25857
25093
|
warningIcon,
|