@uniformdev/design-system 19.177.2-alpha.10 → 19.177.2-alpha.18
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 +243 -1095
- package/dist/index.d.mts +3 -16
- package/dist/index.d.ts +3 -16
- package/dist/index.js +251 -1084
- package/package.json +13 -14
package/dist/index.js
CHANGED
|
@@ -14150,7 +14150,6 @@ var Menu = React7.forwardRef(function Menu2({
|
|
|
14150
14150
|
menuItemsContainerCssClasses,
|
|
14151
14151
|
testId,
|
|
14152
14152
|
maxMenuHeight,
|
|
14153
|
-
portalElement,
|
|
14154
14153
|
...props
|
|
14155
14154
|
}, ref) {
|
|
14156
14155
|
const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
|
|
@@ -14161,7 +14160,6 @@ var Menu = React7.forwardRef(function Menu2({
|
|
|
14161
14160
|
import_react37.Menu,
|
|
14162
14161
|
{
|
|
14163
14162
|
portal: !withoutPortal,
|
|
14164
|
-
portalElement,
|
|
14165
14163
|
unmountOnHide: true,
|
|
14166
14164
|
gutter: 0,
|
|
14167
14165
|
shift: menu.parent ? -4 : 0,
|
|
@@ -22147,20 +22145,18 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
22147
22145
|
|
|
22148
22146
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22149
22147
|
init_emotion_jsx_shim();
|
|
22150
|
-
var
|
|
22148
|
+
var import_react150 = require("@emotion/react");
|
|
22151
22149
|
var import_list3 = require("@lexical/list");
|
|
22152
22150
|
var import_markdown = require("@lexical/markdown");
|
|
22153
22151
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
22154
|
-
var
|
|
22152
|
+
var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
|
|
22155
22153
|
var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
|
|
22156
22154
|
var import_LexicalErrorBoundary = __toESM(require("@lexical/react/LexicalErrorBoundary"));
|
|
22157
22155
|
var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
|
|
22158
22156
|
var import_LexicalListPlugin = require("@lexical/react/LexicalListPlugin");
|
|
22159
22157
|
var import_LexicalMarkdownShortcutPlugin = require("@lexical/react/LexicalMarkdownShortcutPlugin");
|
|
22160
22158
|
var import_LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
|
|
22161
|
-
var import_LexicalTablePlugin = require("@lexical/react/LexicalTablePlugin");
|
|
22162
22159
|
var import_rich_text2 = require("@lexical/rich-text");
|
|
22163
|
-
var import_table4 = require("@lexical/table");
|
|
22164
22160
|
|
|
22165
22161
|
// ../richtext/dist/index.mjs
|
|
22166
22162
|
init_emotion_jsx_shim();
|
|
@@ -22209,10 +22205,6 @@ var richTextBuiltInElements = [
|
|
|
22209
22205
|
label: "Code Block",
|
|
22210
22206
|
type: "code"
|
|
22211
22207
|
},
|
|
22212
|
-
{
|
|
22213
|
-
label: "Table",
|
|
22214
|
-
type: "table"
|
|
22215
|
-
},
|
|
22216
22208
|
{
|
|
22217
22209
|
label: "Dynamic Token",
|
|
22218
22210
|
type: "variable"
|
|
@@ -22259,8 +22251,8 @@ var getLabelForElement = (type) => {
|
|
|
22259
22251
|
|
|
22260
22252
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22261
22253
|
var import_fast_equals2 = require("fast-equals");
|
|
22262
|
-
var
|
|
22263
|
-
var
|
|
22254
|
+
var import_lexical6 = require("lexical");
|
|
22255
|
+
var import_react151 = require("react");
|
|
22264
22256
|
|
|
22265
22257
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
22266
22258
|
init_emotion_jsx_shim();
|
|
@@ -22478,46 +22470,6 @@ var codeElement = import_css2.css`
|
|
|
22478
22470
|
margin-bottom: 0;
|
|
22479
22471
|
}
|
|
22480
22472
|
`;
|
|
22481
|
-
var tableElement = import_css2.css`
|
|
22482
|
-
border-collapse: collapse;
|
|
22483
|
-
border-spacing: 0;
|
|
22484
|
-
border-color: var(--gray-300);
|
|
22485
|
-
border-width: 1px;
|
|
22486
|
-
border-style: solid;
|
|
22487
|
-
margin-bottom: var(--spacing-base);
|
|
22488
|
-
margin-top: 0;
|
|
22489
|
-
|
|
22490
|
-
&:last-child {
|
|
22491
|
-
margin-bottom: 0;
|
|
22492
|
-
}
|
|
22493
|
-
`;
|
|
22494
|
-
var tableCellElement = import_css2.css`
|
|
22495
|
-
background-color: var(--white);
|
|
22496
|
-
border-color: var(--gray-300);
|
|
22497
|
-
border-style: solid;
|
|
22498
|
-
border-width: 1px;
|
|
22499
|
-
box-sizing: unset;
|
|
22500
|
-
min-width: 2rem;
|
|
22501
|
-
outline: none;
|
|
22502
|
-
padding: var(--spacing-sm);
|
|
22503
|
-
text-align: start;
|
|
22504
|
-
vertical-align: top;
|
|
22505
|
-
width: 7rem;
|
|
22506
|
-
`;
|
|
22507
|
-
var tableHeaderElement = import_css2.css`
|
|
22508
|
-
background-color: var(--gray-100);
|
|
22509
|
-
border-color: var(--gray-300);
|
|
22510
|
-
border-style: solid;
|
|
22511
|
-
border-width: 1px;
|
|
22512
|
-
box-sizing: unset;
|
|
22513
|
-
font-weight: normal;
|
|
22514
|
-
min-width: 2rem;
|
|
22515
|
-
outline: none;
|
|
22516
|
-
padding: var(--spacing-sm);
|
|
22517
|
-
text-align: start;
|
|
22518
|
-
vertical-align: top;
|
|
22519
|
-
width: 7rem;
|
|
22520
|
-
`;
|
|
22521
22473
|
|
|
22522
22474
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
22523
22475
|
init_emotion_jsx_shim();
|
|
@@ -22865,11 +22817,7 @@ var linkPopoverAnchor = import_react145.css`
|
|
|
22865
22817
|
${link}
|
|
22866
22818
|
${linkColorDefault}
|
|
22867
22819
|
`;
|
|
22868
|
-
function LinkNodePlugin({
|
|
22869
|
-
onConnectLink,
|
|
22870
|
-
getBoundPath,
|
|
22871
|
-
positioningAnchorEl
|
|
22872
|
-
}) {
|
|
22820
|
+
function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
22873
22821
|
const parsePath = getBoundPath != null ? getBoundPath : function(path) {
|
|
22874
22822
|
return path;
|
|
22875
22823
|
};
|
|
@@ -22973,11 +22921,9 @@ function LinkNodePlugin({
|
|
|
22973
22921
|
setLinkPopoverState(void 0);
|
|
22974
22922
|
return;
|
|
22975
22923
|
}
|
|
22976
|
-
const elementRect = element.getBoundingClientRect();
|
|
22977
|
-
const positioningAnchorRect = positioningAnchorEl.getBoundingClientRect();
|
|
22978
22924
|
const { x, y } = {
|
|
22979
|
-
x:
|
|
22980
|
-
y:
|
|
22925
|
+
x: element.offsetLeft + LINK_POPOVER_OFFSET_X,
|
|
22926
|
+
y: element.offsetTop + element.clientHeight + LINK_POPOVER_OFFSET_Y
|
|
22981
22927
|
};
|
|
22982
22928
|
setLinkPopoverState({
|
|
22983
22929
|
node: linkNode,
|
|
@@ -22986,7 +22932,7 @@ function LinkNodePlugin({
|
|
|
22986
22932
|
y
|
|
22987
22933
|
}
|
|
22988
22934
|
});
|
|
22989
|
-
}, [editor
|
|
22935
|
+
}, [editor]);
|
|
22990
22936
|
(0, import_react146.useEffect)(() => {
|
|
22991
22937
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
22992
22938
|
requestAnimationFrame(() => {
|
|
@@ -23117,20 +23063,17 @@ var import_list2 = require("@lexical/list");
|
|
|
23117
23063
|
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
23118
23064
|
var import_rich_text = require("@lexical/rich-text");
|
|
23119
23065
|
var import_selection2 = require("@lexical/selection");
|
|
23120
|
-
var import_table = require("@lexical/table");
|
|
23121
23066
|
var import_utils9 = require("@lexical/utils");
|
|
23122
23067
|
var import_lexical5 = require("lexical");
|
|
23123
23068
|
var import_react149 = require("react");
|
|
23124
23069
|
var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
|
|
23125
23070
|
var toolbar = import_react148.css`
|
|
23126
|
-
${scrollbarStyles}
|
|
23127
23071
|
background: var(--gray-50);
|
|
23128
23072
|
border-radius: var(--rounded-base);
|
|
23129
23073
|
display: flex;
|
|
23130
23074
|
/* We add 1px because we use a 1px wide separator */
|
|
23131
23075
|
gap: calc(var(--spacing-sm) + 1px);
|
|
23132
23076
|
margin: calc(var(--spacing-sm) + var(--spacing-xs)) 0;
|
|
23133
|
-
overflow: auto;
|
|
23134
23077
|
padding: var(--spacing-sm);
|
|
23135
23078
|
position: sticky;
|
|
23136
23079
|
top: calc(var(--spacing-sm) * -2);
|
|
@@ -23138,7 +23081,6 @@ var toolbar = import_react148.css`
|
|
|
23138
23081
|
`;
|
|
23139
23082
|
var toolbarGroup = import_react148.css`
|
|
23140
23083
|
display: flex;
|
|
23141
|
-
flex-shrink: 0;
|
|
23142
23084
|
gap: var(--spacing-xs);
|
|
23143
23085
|
position: relative;
|
|
23144
23086
|
|
|
@@ -23161,7 +23103,6 @@ var richTextToolbarButton = import_react148.css`
|
|
|
23161
23103
|
box-shadow: none;
|
|
23162
23104
|
color: var(--gray-900);
|
|
23163
23105
|
display: flex;
|
|
23164
|
-
flex-shrink: 0;
|
|
23165
23106
|
height: 32px;
|
|
23166
23107
|
justify-content: center;
|
|
23167
23108
|
min-width: 32px;
|
|
@@ -23170,10 +23111,6 @@ var richTextToolbarButton = import_react148.css`
|
|
|
23170
23111
|
var richTextToolbarButtonActive = import_react148.css`
|
|
23171
23112
|
background: var(--gray-200);
|
|
23172
23113
|
`;
|
|
23173
|
-
var textStyleButton = import_react148.css`
|
|
23174
|
-
justify-content: space-between;
|
|
23175
|
-
min-width: 7rem;
|
|
23176
|
-
`;
|
|
23177
23114
|
var toolbarIcon = import_react148.css`
|
|
23178
23115
|
color: inherit;
|
|
23179
23116
|
`;
|
|
@@ -23194,7 +23131,7 @@ var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
|
23194
23131
|
]);
|
|
23195
23132
|
var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
|
23196
23133
|
var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
23197
|
-
var RichTextToolbar = ({ config, customControls
|
|
23134
|
+
var RichTextToolbar = ({ config, customControls }) => {
|
|
23198
23135
|
const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
|
|
23199
23136
|
const {
|
|
23200
23137
|
activeElement,
|
|
@@ -23210,39 +23147,26 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
23210
23147
|
visibleLists,
|
|
23211
23148
|
codeElementVisible,
|
|
23212
23149
|
quoteElementVisible,
|
|
23213
|
-
visibleElementsWithIcons
|
|
23214
|
-
visibleInsertElementsWithIcons,
|
|
23215
|
-
tableElementVisible
|
|
23150
|
+
visibleElementsWithIcons
|
|
23216
23151
|
} = useRichTextToolbarState({ config });
|
|
23217
23152
|
const onSelectElement = (type) => {
|
|
23218
23153
|
if (activeElement === type) {
|
|
23219
23154
|
return;
|
|
23220
23155
|
}
|
|
23221
|
-
editor.
|
|
23222
|
-
|
|
23223
|
-
|
|
23224
|
-
|
|
23225
|
-
|
|
23226
|
-
|
|
23227
|
-
|
|
23228
|
-
|
|
23229
|
-
|
|
23230
|
-
|
|
23231
|
-
|
|
23232
|
-
|
|
23233
|
-
|
|
23234
|
-
|
|
23235
|
-
return;
|
|
23236
|
-
}
|
|
23237
|
-
const { rows, columns } = dimensions;
|
|
23238
|
-
editor.focus(() => {
|
|
23239
|
-
editor.update(() => {
|
|
23240
|
-
(0, import_selection2.$setBlocksType)(selection, () => (0, import_table.$createTableNodeWithDimensions)(rows, columns, false));
|
|
23241
|
-
});
|
|
23242
|
-
});
|
|
23243
|
-
});
|
|
23244
|
-
}
|
|
23245
|
-
});
|
|
23156
|
+
editor.update(() => {
|
|
23157
|
+
const selection = (0, import_lexical5.$getSelection)();
|
|
23158
|
+
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
23159
|
+
return;
|
|
23160
|
+
}
|
|
23161
|
+
if (HEADING_ELEMENTS.includes(type)) {
|
|
23162
|
+
(0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
|
|
23163
|
+
} else if (type === "paragraph") {
|
|
23164
|
+
(0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical5.$createParagraphNode)());
|
|
23165
|
+
} else if (type === "quote") {
|
|
23166
|
+
(0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createQuoteNode)());
|
|
23167
|
+
} else if (type === "code") {
|
|
23168
|
+
(0, import_selection2.$setBlocksType)(selection, () => (0, import_code2.$createCodeNode)());
|
|
23169
|
+
}
|
|
23246
23170
|
});
|
|
23247
23171
|
};
|
|
23248
23172
|
const updateToolbar = (0, import_react149.useCallback)(() => {
|
|
@@ -23307,7 +23231,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
23307
23231
|
/* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
|
|
23308
23232
|
Menu,
|
|
23309
23233
|
{
|
|
23310
|
-
|
|
23234
|
+
menuLabel: "Elements",
|
|
23235
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
|
|
23311
23236
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
23312
23237
|
" ",
|
|
23313
23238
|
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
@@ -23367,7 +23292,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
23367
23292
|
}
|
|
23368
23293
|
) : null
|
|
23369
23294
|
] }) : null,
|
|
23370
|
-
visibleElementsWithIcons.size > 0
|
|
23295
|
+
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
|
|
23371
23296
|
linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23372
23297
|
"button",
|
|
23373
23298
|
{
|
|
@@ -23406,50 +23331,28 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
|
23406
23331
|
}
|
|
23407
23332
|
) }) : null
|
|
23408
23333
|
] }) : null,
|
|
23409
|
-
|
|
23334
|
+
quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23335
|
+
"button",
|
|
23336
|
+
{
|
|
23337
|
+
onClick: () => {
|
|
23338
|
+
activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
|
|
23339
|
+
},
|
|
23340
|
+
css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
|
|
23341
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "quote" })
|
|
23342
|
+
}
|
|
23343
|
+
) }) : null,
|
|
23344
|
+
codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23345
|
+
"button",
|
|
23346
|
+
{
|
|
23347
|
+
onClick: () => {
|
|
23348
|
+
activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
|
|
23349
|
+
},
|
|
23350
|
+
css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
|
|
23351
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
|
|
23352
|
+
}
|
|
23353
|
+
) }) : null
|
|
23410
23354
|
] }) : null,
|
|
23411
|
-
|
|
23412
|
-
Menu,
|
|
23413
|
-
{
|
|
23414
|
-
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", children: [
|
|
23415
|
-
"Insert",
|
|
23416
|
-
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
23417
|
-
] }),
|
|
23418
|
-
placement: "bottom-start",
|
|
23419
|
-
children: [
|
|
23420
|
-
quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23421
|
-
MenuItem,
|
|
23422
|
-
{
|
|
23423
|
-
onClick: () => {
|
|
23424
|
-
onSelectElement("quote");
|
|
23425
|
-
},
|
|
23426
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
23427
|
-
children: "Quote"
|
|
23428
|
-
}
|
|
23429
|
-
) : null,
|
|
23430
|
-
codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23431
|
-
MenuItem,
|
|
23432
|
-
{
|
|
23433
|
-
onClick: () => {
|
|
23434
|
-
onSelectElement("code");
|
|
23435
|
-
},
|
|
23436
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
23437
|
-
children: "Code"
|
|
23438
|
-
}
|
|
23439
|
-
) : null,
|
|
23440
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23441
|
-
MenuItem,
|
|
23442
|
-
{
|
|
23443
|
-
onClick: () => {
|
|
23444
|
-
onSelectElement("table");
|
|
23445
|
-
},
|
|
23446
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
23447
|
-
children: "Table"
|
|
23448
|
-
}
|
|
23449
|
-
) : null
|
|
23450
|
-
]
|
|
23451
|
-
}
|
|
23452
|
-
) }) : null
|
|
23355
|
+
customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: toolbarGroup, children: customControls }) : null
|
|
23453
23356
|
] });
|
|
23454
23357
|
};
|
|
23455
23358
|
var RichTextToolbar_default = RichTextToolbar;
|
|
@@ -23526,9 +23429,6 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23526
23429
|
const codeElementVisible = (0, import_react149.useMemo)(() => {
|
|
23527
23430
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
23528
23431
|
}, [activeElement, enabledBuiltInElements]);
|
|
23529
|
-
const tableElementVisible = (0, import_react149.useMemo)(() => {
|
|
23530
|
-
return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
|
|
23531
|
-
}, [activeElement, enabledBuiltInElements]);
|
|
23532
23432
|
const visibleElementsWithIcons = (0, import_react149.useMemo)(() => {
|
|
23533
23433
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
23534
23434
|
if (linkElementVisible) {
|
|
@@ -23539,21 +23439,14 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23539
23439
|
visibleElements.add(type);
|
|
23540
23440
|
});
|
|
23541
23441
|
}
|
|
23542
|
-
return visibleElements;
|
|
23543
|
-
}, [linkElementVisible, visibleLists]);
|
|
23544
|
-
const visibleInsertElementsWithIcons = (0, import_react149.useMemo)(() => {
|
|
23545
|
-
const visibleElements = /* @__PURE__ */ new Set();
|
|
23546
23442
|
if (quoteElementVisible) {
|
|
23547
23443
|
visibleElements.add("quote");
|
|
23548
23444
|
}
|
|
23549
23445
|
if (codeElementVisible) {
|
|
23550
23446
|
visibleElements.add("code");
|
|
23551
23447
|
}
|
|
23552
|
-
if (tableElementVisible) {
|
|
23553
|
-
visibleElements.add("table");
|
|
23554
|
-
}
|
|
23555
23448
|
return visibleElements;
|
|
23556
|
-
}, [codeElementVisible, quoteElementVisible,
|
|
23449
|
+
}, [codeElementVisible, linkElementVisible, quoteElementVisible, visibleLists]);
|
|
23557
23450
|
return {
|
|
23558
23451
|
activeFormats,
|
|
23559
23452
|
setActiveFormats,
|
|
@@ -23568,699 +23461,12 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23568
23461
|
visibleLists,
|
|
23569
23462
|
quoteElementVisible,
|
|
23570
23463
|
codeElementVisible,
|
|
23571
|
-
|
|
23572
|
-
visibleElementsWithIcons,
|
|
23573
|
-
visibleInsertElementsWithIcons
|
|
23464
|
+
visibleElementsWithIcons
|
|
23574
23465
|
};
|
|
23575
23466
|
};
|
|
23576
23467
|
|
|
23577
|
-
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
23578
|
-
init_emotion_jsx_shim();
|
|
23579
|
-
var import_react150 = require("@emotion/react");
|
|
23580
|
-
var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
|
|
23581
|
-
var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
|
|
23582
|
-
var import_table2 = require("@lexical/table");
|
|
23583
|
-
var import_lexical6 = require("lexical");
|
|
23584
|
-
var import_react151 = require("react");
|
|
23585
|
-
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
23586
|
-
function computeSelectionCount(selection) {
|
|
23587
|
-
const selectionShape = selection.getShape();
|
|
23588
|
-
return {
|
|
23589
|
-
columns: selectionShape.toX - selectionShape.fromX + 1,
|
|
23590
|
-
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
23591
|
-
};
|
|
23592
|
-
}
|
|
23593
|
-
var tableActionMenuTrigger = import_react150.css`
|
|
23594
|
-
position: absolute;
|
|
23595
|
-
transform: translate(calc(-100% - 1px), 1px);
|
|
23596
|
-
`;
|
|
23597
|
-
var TableActionMenuTrigger = (0, import_react151.forwardRef)((props, ref) => {
|
|
23598
|
-
const { tableCellEl, positioningAnchorEl, ...rest } = props;
|
|
23599
|
-
const [coordinates, setCoordinates] = (0, import_react151.useState)({ x: 0, y: 0 });
|
|
23600
|
-
(0, import_react151.useLayoutEffect)(() => {
|
|
23601
|
-
const rect = tableCellEl.getBoundingClientRect();
|
|
23602
|
-
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
23603
|
-
const relativeX = rect.right - parentRect.left;
|
|
23604
|
-
const relativeY = rect.top - parentRect.top;
|
|
23605
|
-
setCoordinates({ x: relativeX, y: relativeY });
|
|
23606
|
-
}, [tableCellEl, positioningAnchorEl]);
|
|
23607
|
-
return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23608
|
-
IconButton,
|
|
23609
|
-
{
|
|
23610
|
-
ref,
|
|
23611
|
-
css: [
|
|
23612
|
-
tableActionMenuTrigger,
|
|
23613
|
-
{
|
|
23614
|
-
top: coordinates.y,
|
|
23615
|
-
left: coordinates.x
|
|
23616
|
-
}
|
|
23617
|
-
],
|
|
23618
|
-
size: "xs",
|
|
23619
|
-
buttonType: "unimportant",
|
|
23620
|
-
...rest,
|
|
23621
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
23622
|
-
}
|
|
23623
|
-
);
|
|
23624
|
-
});
|
|
23625
|
-
TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
|
|
23626
|
-
function TableActionMenu({
|
|
23627
|
-
tableCellNode: _tableCellNode,
|
|
23628
|
-
menuPortalEl,
|
|
23629
|
-
tableCellEl,
|
|
23630
|
-
positioningAnchorEl
|
|
23631
|
-
}) {
|
|
23632
|
-
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23633
|
-
const [tableCellNode, updateTableCellNode] = (0, import_react151.useState)(_tableCellNode);
|
|
23634
|
-
const [selectionCounts, updateSelectionCounts] = (0, import_react151.useState)({
|
|
23635
|
-
columns: 1,
|
|
23636
|
-
rows: 1
|
|
23637
|
-
});
|
|
23638
|
-
const [menuTriggerKey, setMenuTriggerKey] = (0, import_react151.useState)(0);
|
|
23639
|
-
const incrementMenuTriggerKey = () => {
|
|
23640
|
-
setMenuTriggerKey((key) => key += 1);
|
|
23641
|
-
};
|
|
23642
|
-
(0, import_react151.useEffect)(() => {
|
|
23643
|
-
return editor.registerMutationListener(
|
|
23644
|
-
import_table2.TableCellNode,
|
|
23645
|
-
(nodeMutations) => {
|
|
23646
|
-
const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
|
|
23647
|
-
if (nodeUpdated) {
|
|
23648
|
-
editor.getEditorState().read(() => {
|
|
23649
|
-
updateTableCellNode(tableCellNode.getLatest());
|
|
23650
|
-
});
|
|
23651
|
-
}
|
|
23652
|
-
},
|
|
23653
|
-
{ skipInitialization: true }
|
|
23654
|
-
);
|
|
23655
|
-
}, [editor, tableCellNode]);
|
|
23656
|
-
(0, import_react151.useEffect)(() => {
|
|
23657
|
-
editor.getEditorState().read(() => {
|
|
23658
|
-
const selection = (0, import_lexical6.$getSelection)();
|
|
23659
|
-
if ((0, import_table2.$isTableSelection)(selection)) {
|
|
23660
|
-
updateSelectionCounts(computeSelectionCount(selection));
|
|
23661
|
-
}
|
|
23662
|
-
});
|
|
23663
|
-
}, [editor]);
|
|
23664
|
-
const clearTableSelection = (0, import_react151.useCallback)(() => {
|
|
23665
|
-
editor.update(() => {
|
|
23666
|
-
if (tableCellNode.isAttached()) {
|
|
23667
|
-
const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23668
|
-
const tableElement2 = editor.getElementByKey(
|
|
23669
|
-
tableNode.getKey()
|
|
23670
|
-
);
|
|
23671
|
-
if (!tableElement2) {
|
|
23672
|
-
throw new Error("Expected to find tableElement in DOM");
|
|
23673
|
-
}
|
|
23674
|
-
const tableSelection = (0, import_table2.getTableObserverFromTableElement)(tableElement2);
|
|
23675
|
-
if (tableSelection !== null) {
|
|
23676
|
-
tableSelection.clearHighlight();
|
|
23677
|
-
}
|
|
23678
|
-
tableNode.markDirty();
|
|
23679
|
-
updateTableCellNode(tableCellNode.getLatest());
|
|
23680
|
-
}
|
|
23681
|
-
const rootNode = (0, import_lexical6.$getRoot)();
|
|
23682
|
-
rootNode.selectStart();
|
|
23683
|
-
});
|
|
23684
|
-
}, [editor, tableCellNode]);
|
|
23685
|
-
const insertTableRowAtSelection = (0, import_react151.useCallback)(
|
|
23686
|
-
(shouldInsertAfter) => {
|
|
23687
|
-
editor.update(() => {
|
|
23688
|
-
(0, import_table2.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
|
|
23689
|
-
});
|
|
23690
|
-
incrementMenuTriggerKey();
|
|
23691
|
-
},
|
|
23692
|
-
[editor]
|
|
23693
|
-
);
|
|
23694
|
-
const insertTableColumnAtSelection = (0, import_react151.useCallback)(
|
|
23695
|
-
(shouldInsertAfter) => {
|
|
23696
|
-
editor.update(() => {
|
|
23697
|
-
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
23698
|
-
(0, import_table2.$insertTableColumn__EXPERIMENTAL)(shouldInsertAfter);
|
|
23699
|
-
}
|
|
23700
|
-
});
|
|
23701
|
-
incrementMenuTriggerKey();
|
|
23702
|
-
},
|
|
23703
|
-
[editor, selectionCounts.columns]
|
|
23704
|
-
);
|
|
23705
|
-
const deleteTableRowAtSelection = (0, import_react151.useCallback)(() => {
|
|
23706
|
-
editor.update(() => {
|
|
23707
|
-
(0, import_table2.$deleteTableRow__EXPERIMENTAL)();
|
|
23708
|
-
});
|
|
23709
|
-
incrementMenuTriggerKey();
|
|
23710
|
-
}, [editor]);
|
|
23711
|
-
const deleteTableAtSelection = (0, import_react151.useCallback)(() => {
|
|
23712
|
-
editor.update(() => {
|
|
23713
|
-
const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23714
|
-
tableNode.remove();
|
|
23715
|
-
clearTableSelection();
|
|
23716
|
-
});
|
|
23717
|
-
}, [editor, tableCellNode, clearTableSelection]);
|
|
23718
|
-
const deleteTableColumnAtSelection = (0, import_react151.useCallback)(() => {
|
|
23719
|
-
editor.update(() => {
|
|
23720
|
-
(0, import_table2.$deleteTableColumn__EXPERIMENTAL)();
|
|
23721
|
-
clearTableSelection();
|
|
23722
|
-
});
|
|
23723
|
-
incrementMenuTriggerKey();
|
|
23724
|
-
}, [editor, clearTableSelection]);
|
|
23725
|
-
const toggleTableRowIsHeader = (0, import_react151.useCallback)(() => {
|
|
23726
|
-
editor.update(() => {
|
|
23727
|
-
const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23728
|
-
const tableRowIndex = (0, import_table2.$getTableRowIndexFromTableCellNode)(tableCellNode);
|
|
23729
|
-
const tableRows = tableNode.getChildren();
|
|
23730
|
-
if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
|
|
23731
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
23732
|
-
}
|
|
23733
|
-
const tableRow2 = tableRows[tableRowIndex];
|
|
23734
|
-
if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
|
|
23735
|
-
throw new Error("Expected table row");
|
|
23736
|
-
}
|
|
23737
|
-
tableRow2.getChildren().forEach((tableCell) => {
|
|
23738
|
-
if (!(0, import_table2.$isTableCellNode)(tableCell)) {
|
|
23739
|
-
throw new Error("Expected table cell");
|
|
23740
|
-
}
|
|
23741
|
-
tableCell.toggleHeaderStyle(import_table2.TableCellHeaderStates.ROW);
|
|
23742
|
-
});
|
|
23743
|
-
clearTableSelection();
|
|
23744
|
-
});
|
|
23745
|
-
}, [editor, tableCellNode, clearTableSelection]);
|
|
23746
|
-
const toggleTableColumnIsHeader = (0, import_react151.useCallback)(() => {
|
|
23747
|
-
editor.update(() => {
|
|
23748
|
-
const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23749
|
-
const tableColumnIndex = (0, import_table2.$getTableColumnIndexFromTableCellNode)(tableCellNode);
|
|
23750
|
-
const tableRows = tableNode.getChildren();
|
|
23751
|
-
const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
|
|
23752
|
-
if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
|
|
23753
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
23754
|
-
}
|
|
23755
|
-
for (let r = 0; r < tableRows.length; r++) {
|
|
23756
|
-
const tableRow2 = tableRows[r];
|
|
23757
|
-
if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
|
|
23758
|
-
throw new Error("Expected table row");
|
|
23759
|
-
}
|
|
23760
|
-
const tableCells = tableRow2.getChildren();
|
|
23761
|
-
if (tableColumnIndex >= tableCells.length) {
|
|
23762
|
-
continue;
|
|
23763
|
-
}
|
|
23764
|
-
const tableCell = tableCells[tableColumnIndex];
|
|
23765
|
-
if (!(0, import_table2.$isTableCellNode)(tableCell)) {
|
|
23766
|
-
throw new Error("Expected table cell");
|
|
23767
|
-
}
|
|
23768
|
-
tableCell.toggleHeaderStyle(import_table2.TableCellHeaderStates.COLUMN);
|
|
23769
|
-
}
|
|
23770
|
-
clearTableSelection();
|
|
23771
|
-
});
|
|
23772
|
-
}, [editor, tableCellNode, clearTableSelection]);
|
|
23773
|
-
const menuItemCss = (0, import_react150.css)({
|
|
23774
|
-
fontSize: "var(--fs-sm)"
|
|
23775
|
-
});
|
|
23776
|
-
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
23777
|
-
Menu,
|
|
23778
|
-
{
|
|
23779
|
-
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23780
|
-
TableActionMenuTrigger,
|
|
23781
|
-
{
|
|
23782
|
-
tableCellEl,
|
|
23783
|
-
positioningAnchorEl
|
|
23784
|
-
},
|
|
23785
|
-
menuTriggerKey
|
|
23786
|
-
),
|
|
23787
|
-
portalElement: menuPortalEl,
|
|
23788
|
-
maxMenuHeight: "300px",
|
|
23789
|
-
children: [
|
|
23790
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
23791
|
-
MenuItem,
|
|
23792
|
-
{
|
|
23793
|
-
onClick: () => {
|
|
23794
|
-
insertTableRowAtSelection(false);
|
|
23795
|
-
},
|
|
23796
|
-
css: menuItemCss,
|
|
23797
|
-
children: [
|
|
23798
|
-
"Insert ",
|
|
23799
|
-
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
23800
|
-
" above"
|
|
23801
|
-
]
|
|
23802
|
-
}
|
|
23803
|
-
),
|
|
23804
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
|
|
23805
|
-
"Insert ",
|
|
23806
|
-
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
23807
|
-
" below"
|
|
23808
|
-
] }),
|
|
23809
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
|
|
23810
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
23811
|
-
"Insert ",
|
|
23812
|
-
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
23813
|
-
" left"
|
|
23814
|
-
] }),
|
|
23815
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
|
|
23816
|
-
"Insert ",
|
|
23817
|
-
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
23818
|
-
" right"
|
|
23819
|
-
] }),
|
|
23820
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
|
|
23821
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
23822
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
23823
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
23824
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
|
|
23825
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
23826
|
-
(tableCellNode.__headerState & import_table2.TableCellHeaderStates.ROW) === import_table2.TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
23827
|
-
" ",
|
|
23828
|
-
"row header"
|
|
23829
|
-
] }),
|
|
23830
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
|
|
23831
|
-
(tableCellNode.__headerState & import_table2.TableCellHeaderStates.COLUMN) === import_table2.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
|
|
23832
|
-
" ",
|
|
23833
|
-
"column header"
|
|
23834
|
-
] })
|
|
23835
|
-
]
|
|
23836
|
-
}
|
|
23837
|
-
);
|
|
23838
|
-
}
|
|
23839
|
-
function TableCellActionMenuContainer({
|
|
23840
|
-
menuPortalEl,
|
|
23841
|
-
positioningAnchorEl
|
|
23842
|
-
}) {
|
|
23843
|
-
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23844
|
-
const [tableCellNode, setTableMenuCellNode] = (0, import_react151.useState)(null);
|
|
23845
|
-
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react151.useState)(null);
|
|
23846
|
-
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react151.useState)(null);
|
|
23847
|
-
(0, import_react151.useEffect)(() => {
|
|
23848
|
-
const newPortalEl = document.createElement("div");
|
|
23849
|
-
setTableMenuCellMenuPortalEl(newPortalEl);
|
|
23850
|
-
menuPortalEl.appendChild(newPortalEl);
|
|
23851
|
-
return () => {
|
|
23852
|
-
newPortalEl.remove();
|
|
23853
|
-
};
|
|
23854
|
-
}, [menuPortalEl]);
|
|
23855
|
-
const setTableMenuCellNodeElem = (0, import_react151.useCallback)((elem) => {
|
|
23856
|
-
if (elem) {
|
|
23857
|
-
_setTableMenuCellNodeEl(elem);
|
|
23858
|
-
} else {
|
|
23859
|
-
_setTableMenuCellNodeEl(null);
|
|
23860
|
-
}
|
|
23861
|
-
}, []);
|
|
23862
|
-
const $moveMenu = (0, import_react151.useCallback)(() => {
|
|
23863
|
-
const selection = (0, import_lexical6.$getSelection)();
|
|
23864
|
-
const nativeSelection = window.getSelection();
|
|
23865
|
-
const activeElement = document.activeElement;
|
|
23866
|
-
if (selection == null) {
|
|
23867
|
-
setTableMenuCellNode(null);
|
|
23868
|
-
return;
|
|
23869
|
-
}
|
|
23870
|
-
const rootElement = editor.getRootElement();
|
|
23871
|
-
if ((0, import_lexical6.$isRangeSelection)(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
|
|
23872
|
-
const tableCellNodeFromSelection = (0, import_table2.$getTableCellNodeFromLexicalNode)(selection.anchor.getNode());
|
|
23873
|
-
if (tableCellNodeFromSelection == null) {
|
|
23874
|
-
setTableMenuCellNode(null);
|
|
23875
|
-
setTableMenuCellNodeElem(null);
|
|
23876
|
-
return;
|
|
23877
|
-
}
|
|
23878
|
-
const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
|
|
23879
|
-
if (tableCellParentNodeDOM == null) {
|
|
23880
|
-
setTableMenuCellNode(null);
|
|
23881
|
-
setTableMenuCellNodeElem(null);
|
|
23882
|
-
return;
|
|
23883
|
-
}
|
|
23884
|
-
setTableMenuCellNode(tableCellNodeFromSelection);
|
|
23885
|
-
setTableMenuCellNodeElem(tableCellParentNodeDOM);
|
|
23886
|
-
} else if (!activeElement) {
|
|
23887
|
-
setTableMenuCellNode(null);
|
|
23888
|
-
setTableMenuCellNodeElem(null);
|
|
23889
|
-
}
|
|
23890
|
-
}, [editor, setTableMenuCellNodeElem]);
|
|
23891
|
-
(0, import_react151.useEffect)(() => {
|
|
23892
|
-
return editor.registerUpdateListener(() => {
|
|
23893
|
-
editor.getEditorState().read(() => {
|
|
23894
|
-
$moveMenu();
|
|
23895
|
-
});
|
|
23896
|
-
});
|
|
23897
|
-
});
|
|
23898
|
-
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23899
|
-
TableActionMenu,
|
|
23900
|
-
{
|
|
23901
|
-
tableCellNode,
|
|
23902
|
-
menuPortalEl: tableCellMenuPortalEl,
|
|
23903
|
-
tableCellEl: tableCellNodeEl,
|
|
23904
|
-
positioningAnchorEl
|
|
23905
|
-
},
|
|
23906
|
-
tableCellNode.getKey()
|
|
23907
|
-
);
|
|
23908
|
-
}
|
|
23909
|
-
function TableActionMenuPlugin({ positioningAnchorEl }) {
|
|
23910
|
-
const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
|
|
23911
|
-
return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23912
|
-
TableCellActionMenuContainer,
|
|
23913
|
-
{
|
|
23914
|
-
menuPortalEl: positioningAnchorEl,
|
|
23915
|
-
positioningAnchorEl
|
|
23916
|
-
}
|
|
23917
|
-
) : null;
|
|
23918
|
-
}
|
|
23919
|
-
|
|
23920
|
-
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
23921
|
-
init_emotion_jsx_shim();
|
|
23922
|
-
var import_react152 = require("@emotion/react");
|
|
23923
|
-
var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
|
|
23924
|
-
var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
|
|
23925
|
-
var import_table3 = require("@lexical/table");
|
|
23926
|
-
var import_utils11 = require("@lexical/utils");
|
|
23927
|
-
var import_lexical7 = require("lexical");
|
|
23928
|
-
var import_react153 = require("react");
|
|
23929
|
-
var import_react_dom3 = require("react-dom");
|
|
23930
|
-
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
23931
|
-
var MIN_ROW_HEIGHT = 33;
|
|
23932
|
-
var MIN_COLUMN_WIDTH = 50;
|
|
23933
|
-
var tableResizer = import_react152.css`
|
|
23934
|
-
position: absolute;
|
|
23935
|
-
z-index: var(--z-10);
|
|
23936
|
-
`;
|
|
23937
|
-
var fixedGetDOMCellFromTarget = (node) => {
|
|
23938
|
-
let currentNode = node;
|
|
23939
|
-
while (currentNode != null) {
|
|
23940
|
-
const nodeName = currentNode.nodeName;
|
|
23941
|
-
if (nodeName === "TD" || nodeName === "TH") {
|
|
23942
|
-
const cell2 = currentNode._cell;
|
|
23943
|
-
if (cell2 === void 0) {
|
|
23944
|
-
return {
|
|
23945
|
-
elem: currentNode
|
|
23946
|
-
};
|
|
23947
|
-
}
|
|
23948
|
-
return cell2;
|
|
23949
|
-
}
|
|
23950
|
-
currentNode = currentNode.parentNode;
|
|
23951
|
-
}
|
|
23952
|
-
return null;
|
|
23953
|
-
};
|
|
23954
|
-
function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
23955
|
-
const targetRef = (0, import_react153.useRef)(null);
|
|
23956
|
-
const resizerRef = (0, import_react153.useRef)(null);
|
|
23957
|
-
const tableRectRef = (0, import_react153.useRef)(null);
|
|
23958
|
-
const mouseStartPosRef = (0, import_react153.useRef)(null);
|
|
23959
|
-
const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react153.useState)(null);
|
|
23960
|
-
const [activeCell, updateActiveCell] = (0, import_react153.useState)(null);
|
|
23961
|
-
const [isMouseDown, updateIsMouseDown] = (0, import_react153.useState)(false);
|
|
23962
|
-
const [draggingDirection, updateDraggingDirection] = (0, import_react153.useState)(null);
|
|
23963
|
-
const resetState = (0, import_react153.useCallback)(() => {
|
|
23964
|
-
updateActiveCell(null);
|
|
23965
|
-
targetRef.current = null;
|
|
23966
|
-
updateDraggingDirection(null);
|
|
23967
|
-
mouseStartPosRef.current = null;
|
|
23968
|
-
tableRectRef.current = null;
|
|
23969
|
-
}, []);
|
|
23970
|
-
const isMouseDownOnEvent = (event) => {
|
|
23971
|
-
return (event.buttons & 1) === 1;
|
|
23972
|
-
};
|
|
23973
|
-
(0, import_react153.useEffect)(() => {
|
|
23974
|
-
const onMouseMove = (event) => {
|
|
23975
|
-
setTimeout(() => {
|
|
23976
|
-
const target = event.target;
|
|
23977
|
-
if (draggingDirection) {
|
|
23978
|
-
updateMouseCurrentPos({
|
|
23979
|
-
x: event.clientX,
|
|
23980
|
-
y: event.clientY
|
|
23981
|
-
});
|
|
23982
|
-
return;
|
|
23983
|
-
}
|
|
23984
|
-
updateIsMouseDown(isMouseDownOnEvent(event));
|
|
23985
|
-
if (resizerRef.current && resizerRef.current.contains(target)) {
|
|
23986
|
-
return;
|
|
23987
|
-
}
|
|
23988
|
-
if (targetRef.current !== target) {
|
|
23989
|
-
targetRef.current = target;
|
|
23990
|
-
const cell2 = fixedGetDOMCellFromTarget(target);
|
|
23991
|
-
if (cell2 && activeCell !== cell2) {
|
|
23992
|
-
editor.update(() => {
|
|
23993
|
-
const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(cell2.elem);
|
|
23994
|
-
if (!tableCellNode) {
|
|
23995
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
23996
|
-
}
|
|
23997
|
-
const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23998
|
-
const tableElement2 = editor.getElementByKey(tableNode.getKey());
|
|
23999
|
-
if (!tableElement2) {
|
|
24000
|
-
throw new Error("TableCellResizer: Table element not found.");
|
|
24001
|
-
}
|
|
24002
|
-
targetRef.current = target;
|
|
24003
|
-
tableRectRef.current = tableElement2.getBoundingClientRect();
|
|
24004
|
-
updateActiveCell(cell2);
|
|
24005
|
-
});
|
|
24006
|
-
} else if (cell2 == null) {
|
|
24007
|
-
resetState();
|
|
24008
|
-
}
|
|
24009
|
-
}
|
|
24010
|
-
}, 0);
|
|
24011
|
-
};
|
|
24012
|
-
const onMouseDown = () => {
|
|
24013
|
-
setTimeout(() => {
|
|
24014
|
-
updateIsMouseDown(true);
|
|
24015
|
-
}, 0);
|
|
24016
|
-
};
|
|
24017
|
-
const onMouseUp = () => {
|
|
24018
|
-
setTimeout(() => {
|
|
24019
|
-
updateIsMouseDown(false);
|
|
24020
|
-
}, 0);
|
|
24021
|
-
};
|
|
24022
|
-
const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
|
|
24023
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
|
|
24024
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
|
|
24025
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
|
|
24026
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
|
|
24027
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
|
|
24028
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
|
|
24029
|
-
});
|
|
24030
|
-
return () => {
|
|
24031
|
-
removeRootListener();
|
|
24032
|
-
};
|
|
24033
|
-
}, [activeCell, draggingDirection, editor, resetState]);
|
|
24034
|
-
const isHeightChanging = (direction) => {
|
|
24035
|
-
if (direction === "bottom") {
|
|
24036
|
-
return true;
|
|
24037
|
-
}
|
|
24038
|
-
return false;
|
|
24039
|
-
};
|
|
24040
|
-
const updateRowHeight = (0, import_react153.useCallback)(
|
|
24041
|
-
(heightChange) => {
|
|
24042
|
-
if (!activeCell) {
|
|
24043
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
24044
|
-
}
|
|
24045
|
-
editor.update(
|
|
24046
|
-
() => {
|
|
24047
|
-
const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
|
|
24048
|
-
if (!(0, import_table3.$isTableCellNode)(tableCellNode)) {
|
|
24049
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
24050
|
-
}
|
|
24051
|
-
const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
24052
|
-
const tableRowIndex = (0, import_table3.$getTableRowIndexFromTableCellNode)(tableCellNode);
|
|
24053
|
-
const tableRows = tableNode.getChildren();
|
|
24054
|
-
if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
|
|
24055
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
24056
|
-
}
|
|
24057
|
-
const tableRow2 = tableRows[tableRowIndex];
|
|
24058
|
-
if (!(0, import_table3.$isTableRowNode)(tableRow2)) {
|
|
24059
|
-
throw new Error("Expected table row");
|
|
24060
|
-
}
|
|
24061
|
-
let height = tableRow2.getHeight();
|
|
24062
|
-
if (height === void 0) {
|
|
24063
|
-
const rowCells = tableRow2.getChildren();
|
|
24064
|
-
height = Math.min(...rowCells.map((cell2) => {
|
|
24065
|
-
var _a;
|
|
24066
|
-
return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
|
|
24067
|
-
}));
|
|
24068
|
-
}
|
|
24069
|
-
const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
|
|
24070
|
-
tableRow2.setHeight(newHeight);
|
|
24071
|
-
},
|
|
24072
|
-
{ tag: "skip-scroll-into-view" }
|
|
24073
|
-
);
|
|
24074
|
-
},
|
|
24075
|
-
[activeCell, editor]
|
|
24076
|
-
);
|
|
24077
|
-
const getCellNodeWidth = (cell2, activeEditor) => {
|
|
24078
|
-
const width = cell2.getWidth();
|
|
24079
|
-
if (width !== void 0) {
|
|
24080
|
-
return width;
|
|
24081
|
-
}
|
|
24082
|
-
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
24083
|
-
if (domCellNode == null) {
|
|
24084
|
-
return void 0;
|
|
24085
|
-
}
|
|
24086
|
-
const computedStyle = getComputedStyle(domCellNode);
|
|
24087
|
-
return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
|
|
24088
|
-
};
|
|
24089
|
-
const getCellNodeHeight = (cell2, activeEditor) => {
|
|
24090
|
-
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
24091
|
-
return domCellNode == null ? void 0 : domCellNode.clientHeight;
|
|
24092
|
-
};
|
|
24093
|
-
const getCellColumnIndex = (tableCellNode, tableMap) => {
|
|
24094
|
-
for (let row = 0; row < tableMap.length; row++) {
|
|
24095
|
-
for (let column = 0; column < tableMap[row].length; column++) {
|
|
24096
|
-
if (tableMap[row][column].cell === tableCellNode) {
|
|
24097
|
-
return column;
|
|
24098
|
-
}
|
|
24099
|
-
}
|
|
24100
|
-
}
|
|
24101
|
-
};
|
|
24102
|
-
const updateColumnWidth = (0, import_react153.useCallback)(
|
|
24103
|
-
(widthChange) => {
|
|
24104
|
-
if (!activeCell) {
|
|
24105
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
24106
|
-
}
|
|
24107
|
-
editor.update(
|
|
24108
|
-
() => {
|
|
24109
|
-
const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
|
|
24110
|
-
if (!(0, import_table3.$isTableCellNode)(tableCellNode)) {
|
|
24111
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
24112
|
-
}
|
|
24113
|
-
const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
24114
|
-
const [tableMap] = (0, import_table3.$computeTableMapSkipCellCheck)(tableNode, null, null);
|
|
24115
|
-
const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
|
|
24116
|
-
if (columnIndex === void 0) {
|
|
24117
|
-
throw new Error("TableCellResizer: Table column not found.");
|
|
24118
|
-
}
|
|
24119
|
-
for (let row = 0; row < tableMap.length; row++) {
|
|
24120
|
-
const cell2 = tableMap[row][columnIndex];
|
|
24121
|
-
if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
|
|
24122
|
-
const width = getCellNodeWidth(cell2.cell, editor);
|
|
24123
|
-
if (width === void 0) {
|
|
24124
|
-
continue;
|
|
24125
|
-
}
|
|
24126
|
-
const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
|
|
24127
|
-
cell2.cell.setWidth(newWidth);
|
|
24128
|
-
}
|
|
24129
|
-
}
|
|
24130
|
-
},
|
|
24131
|
-
{ tag: "skip-scroll-into-view" }
|
|
24132
|
-
);
|
|
24133
|
-
},
|
|
24134
|
-
[activeCell, editor]
|
|
24135
|
-
);
|
|
24136
|
-
const mouseUpHandler = (0, import_react153.useCallback)(
|
|
24137
|
-
(direction) => {
|
|
24138
|
-
const handler = (event) => {
|
|
24139
|
-
event.preventDefault();
|
|
24140
|
-
event.stopPropagation();
|
|
24141
|
-
if (!activeCell) {
|
|
24142
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
24143
|
-
}
|
|
24144
|
-
if (mouseStartPosRef.current) {
|
|
24145
|
-
const { x, y } = mouseStartPosRef.current;
|
|
24146
|
-
if (activeCell === null) {
|
|
24147
|
-
return;
|
|
24148
|
-
}
|
|
24149
|
-
const zoom = (0, import_utils11.calculateZoomLevel)(event.target);
|
|
24150
|
-
if (isHeightChanging(direction)) {
|
|
24151
|
-
const heightChange = (event.clientY - y) / zoom;
|
|
24152
|
-
updateRowHeight(heightChange);
|
|
24153
|
-
} else {
|
|
24154
|
-
const widthChange = (event.clientX - x) / zoom;
|
|
24155
|
-
updateColumnWidth(widthChange);
|
|
24156
|
-
}
|
|
24157
|
-
resetState();
|
|
24158
|
-
document.removeEventListener("mouseup", handler);
|
|
24159
|
-
}
|
|
24160
|
-
};
|
|
24161
|
-
return handler;
|
|
24162
|
-
},
|
|
24163
|
-
[activeCell, resetState, updateColumnWidth, updateRowHeight]
|
|
24164
|
-
);
|
|
24165
|
-
const toggleResize = (0, import_react153.useCallback)(
|
|
24166
|
-
(direction) => (event) => {
|
|
24167
|
-
event.preventDefault();
|
|
24168
|
-
event.stopPropagation();
|
|
24169
|
-
if (!activeCell) {
|
|
24170
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
24171
|
-
}
|
|
24172
|
-
mouseStartPosRef.current = {
|
|
24173
|
-
x: event.clientX,
|
|
24174
|
-
y: event.clientY
|
|
24175
|
-
};
|
|
24176
|
-
updateMouseCurrentPos(mouseStartPosRef.current);
|
|
24177
|
-
updateDraggingDirection(direction);
|
|
24178
|
-
document.addEventListener("mouseup", mouseUpHandler(direction));
|
|
24179
|
-
},
|
|
24180
|
-
[activeCell, mouseUpHandler]
|
|
24181
|
-
);
|
|
24182
|
-
const getResizers = (0, import_react153.useCallback)(() => {
|
|
24183
|
-
if (activeCell) {
|
|
24184
|
-
const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
|
|
24185
|
-
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
24186
|
-
const zoom = (0, import_utils11.calculateZoomLevel)(activeCell.elem);
|
|
24187
|
-
const zoneWidth = 10;
|
|
24188
|
-
const styles = {
|
|
24189
|
-
bottom: {
|
|
24190
|
-
backgroundColor: "none",
|
|
24191
|
-
cursor: "row-resize",
|
|
24192
|
-
height: `${zoneWidth}px`,
|
|
24193
|
-
left: `${left - parentRect.left}px`,
|
|
24194
|
-
top: `${top - parentRect.top + height - zoneWidth / 2}px`,
|
|
24195
|
-
width: `${width}px`
|
|
24196
|
-
},
|
|
24197
|
-
right: {
|
|
24198
|
-
backgroundColor: "none",
|
|
24199
|
-
cursor: "col-resize",
|
|
24200
|
-
height: `${height}px`,
|
|
24201
|
-
left: `${left - parentRect.left + width - zoneWidth / 2}px`,
|
|
24202
|
-
top: `${top - parentRect.top}px`,
|
|
24203
|
-
width: `${zoneWidth}px`
|
|
24204
|
-
}
|
|
24205
|
-
};
|
|
24206
|
-
const tableRect = tableRectRef.current;
|
|
24207
|
-
if (draggingDirection && mouseCurrentPos && tableRect) {
|
|
24208
|
-
if (isHeightChanging(draggingDirection)) {
|
|
24209
|
-
styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
|
|
24210
|
-
styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top) / zoom}px`;
|
|
24211
|
-
styles[draggingDirection].height = "3px";
|
|
24212
|
-
styles[draggingDirection].width = `${tableRect.width}px`;
|
|
24213
|
-
} else {
|
|
24214
|
-
styles[draggingDirection].top = `${tableRect.top - parentRect.top}px`;
|
|
24215
|
-
styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
|
|
24216
|
-
styles[draggingDirection].width = "3px";
|
|
24217
|
-
styles[draggingDirection].height = `${tableRect.height}px`;
|
|
24218
|
-
}
|
|
24219
|
-
styles[draggingDirection].backgroundColor = "#adf";
|
|
24220
|
-
}
|
|
24221
|
-
return styles;
|
|
24222
|
-
}
|
|
24223
|
-
return {
|
|
24224
|
-
bottom: null,
|
|
24225
|
-
left: null,
|
|
24226
|
-
right: null,
|
|
24227
|
-
top: null
|
|
24228
|
-
};
|
|
24229
|
-
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
24230
|
-
const resizerStyles = getResizers();
|
|
24231
|
-
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: [
|
|
24232
|
-
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
24233
|
-
"div",
|
|
24234
|
-
{
|
|
24235
|
-
css: tableResizer,
|
|
24236
|
-
style: resizerStyles.right || void 0,
|
|
24237
|
-
onMouseDown: toggleResize("right")
|
|
24238
|
-
}
|
|
24239
|
-
),
|
|
24240
|
-
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
24241
|
-
"div",
|
|
24242
|
-
{
|
|
24243
|
-
css: tableResizer,
|
|
24244
|
-
style: resizerStyles.bottom || void 0,
|
|
24245
|
-
onMouseDown: toggleResize("bottom")
|
|
24246
|
-
}
|
|
24247
|
-
)
|
|
24248
|
-
] }) });
|
|
24249
|
-
}
|
|
24250
|
-
function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
24251
|
-
const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
|
|
24252
|
-
const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
|
|
24253
|
-
return (0, import_react153.useMemo)(
|
|
24254
|
-
() => isEditable ? (0, import_react_dom3.createPortal)(
|
|
24255
|
-
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
|
|
24256
|
-
positioningAnchorEl
|
|
24257
|
-
) : null,
|
|
24258
|
-
[editor, isEditable, positioningAnchorEl]
|
|
24259
|
-
);
|
|
24260
|
-
}
|
|
24261
|
-
|
|
24262
23468
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
24263
|
-
var
|
|
23469
|
+
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
24264
23470
|
var ParameterRichText = ({
|
|
24265
23471
|
label,
|
|
24266
23472
|
labelLeadingIcon,
|
|
@@ -24279,16 +23485,13 @@ var ParameterRichText = ({
|
|
|
24279
23485
|
readOnly,
|
|
24280
23486
|
editorWrapperClassName,
|
|
24281
23487
|
editorInputClassName,
|
|
24282
|
-
editorInputWrapperClassName,
|
|
24283
23488
|
editorFooter,
|
|
24284
23489
|
customNodes,
|
|
24285
23490
|
children,
|
|
24286
23491
|
variables,
|
|
24287
|
-
customControls
|
|
24288
|
-
onInsertTable,
|
|
24289
|
-
minimalInteractivity
|
|
23492
|
+
customControls
|
|
24290
23493
|
}) => {
|
|
24291
|
-
return /* @__PURE__ */ (0,
|
|
23494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
24292
23495
|
ParameterShell,
|
|
24293
23496
|
{
|
|
24294
23497
|
"data-testid": "parameter-richtext",
|
|
@@ -24302,7 +23505,7 @@ var ParameterRichText = ({
|
|
|
24302
23505
|
captionTestId,
|
|
24303
23506
|
menuItems,
|
|
24304
23507
|
children: [
|
|
24305
|
-
/* @__PURE__ */ (0,
|
|
23508
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
24306
23509
|
ParameterRichTextInner,
|
|
24307
23510
|
{
|
|
24308
23511
|
value,
|
|
@@ -24313,33 +23516,30 @@ var ParameterRichText = ({
|
|
|
24313
23516
|
readOnly,
|
|
24314
23517
|
editorWrapperClassName,
|
|
24315
23518
|
editorInputClassName,
|
|
24316
|
-
editorInputWrapperClassName,
|
|
24317
23519
|
editorFooter,
|
|
24318
23520
|
customNodes,
|
|
24319
23521
|
variables,
|
|
24320
23522
|
customControls,
|
|
24321
|
-
onInsertTable,
|
|
24322
|
-
minimalInteractivity,
|
|
24323
23523
|
children
|
|
24324
23524
|
}
|
|
24325
23525
|
),
|
|
24326
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
23526
|
+
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
|
|
24327
23527
|
]
|
|
24328
23528
|
}
|
|
24329
23529
|
);
|
|
24330
23530
|
};
|
|
24331
|
-
var editorWrapper =
|
|
23531
|
+
var editorWrapper = import_react150.css`
|
|
24332
23532
|
display: flex;
|
|
24333
23533
|
flex-flow: column;
|
|
24334
23534
|
flex-grow: 1;
|
|
24335
23535
|
`;
|
|
24336
|
-
var editorContainer =
|
|
23536
|
+
var editorContainer = import_react150.css`
|
|
24337
23537
|
display: flex;
|
|
24338
23538
|
flex-flow: column;
|
|
24339
23539
|
flex-grow: 1;
|
|
24340
23540
|
position: relative;
|
|
24341
23541
|
`;
|
|
24342
|
-
var editorPlaceholder =
|
|
23542
|
+
var editorPlaceholder = import_react150.css`
|
|
24343
23543
|
color: var(--gray-500);
|
|
24344
23544
|
font-style: italic;
|
|
24345
23545
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -24350,7 +23550,7 @@ var editorPlaceholder = import_react154.css`
|
|
|
24350
23550
|
top: var(--spacing-sm);
|
|
24351
23551
|
user-select: none;
|
|
24352
23552
|
`;
|
|
24353
|
-
var editorInput =
|
|
23553
|
+
var editorInput = import_react150.css`
|
|
24354
23554
|
background: var(--white);
|
|
24355
23555
|
border: 1px solid var(--gray-200);
|
|
24356
23556
|
border-radius: var(--rounded-sm);
|
|
@@ -24378,14 +23578,11 @@ var ParameterRichTextInner = ({
|
|
|
24378
23578
|
readOnly,
|
|
24379
23579
|
editorWrapperClassName,
|
|
24380
23580
|
editorInputClassName,
|
|
24381
|
-
editorInputWrapperClassName,
|
|
24382
23581
|
editorFooter,
|
|
24383
23582
|
children,
|
|
24384
23583
|
customNodes,
|
|
24385
23584
|
variables,
|
|
24386
|
-
customControls
|
|
24387
|
-
onInsertTable,
|
|
24388
|
-
minimalInteractivity
|
|
23585
|
+
customControls
|
|
24389
23586
|
}) => {
|
|
24390
23587
|
const lexicalConfig = {
|
|
24391
23588
|
namespace: "uniform",
|
|
@@ -24399,11 +23596,8 @@ var ParameterRichTextInner = ({
|
|
|
24399
23596
|
LinkNode,
|
|
24400
23597
|
import_rich_text2.HeadingNode,
|
|
24401
23598
|
import_rich_text2.QuoteNode,
|
|
24402
|
-
|
|
23599
|
+
import_lexical6.ParagraphNode,
|
|
24403
23600
|
CustomCodeNode,
|
|
24404
|
-
import_table4.TableNode,
|
|
24405
|
-
import_table4.TableCellNode,
|
|
24406
|
-
import_table4.TableRowNode,
|
|
24407
23601
|
...customNodes != null ? customNodes : []
|
|
24408
23602
|
],
|
|
24409
23603
|
theme: {
|
|
@@ -24436,15 +23630,12 @@ var ParameterRichTextInner = ({
|
|
|
24436
23630
|
}
|
|
24437
23631
|
},
|
|
24438
23632
|
quote: blockquoteElement,
|
|
24439
|
-
code: codeElement
|
|
24440
|
-
table: tableElement,
|
|
24441
|
-
tableCell: tableCellElement,
|
|
24442
|
-
tableCellHeader: tableHeaderElement
|
|
23633
|
+
code: codeElement
|
|
24443
23634
|
},
|
|
24444
23635
|
editable: !readOnly
|
|
24445
23636
|
};
|
|
24446
|
-
return /* @__PURE__ */ (0,
|
|
24447
|
-
/* @__PURE__ */ (0,
|
|
23637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
23638
|
+
/* @__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)(
|
|
24448
23639
|
RichText,
|
|
24449
23640
|
{
|
|
24450
23641
|
onChange,
|
|
@@ -24453,11 +23644,8 @@ var ParameterRichTextInner = ({
|
|
|
24453
23644
|
onRichTextInit,
|
|
24454
23645
|
readOnly,
|
|
24455
23646
|
editorInputClassName,
|
|
24456
|
-
editorInputWrapperClassName,
|
|
24457
23647
|
variables,
|
|
24458
23648
|
customControls,
|
|
24459
|
-
onInsertTable,
|
|
24460
|
-
minimalInteractivity,
|
|
24461
23649
|
children
|
|
24462
23650
|
}
|
|
24463
23651
|
) }) }),
|
|
@@ -24480,20 +23668,18 @@ var RichText = ({
|
|
|
24480
23668
|
onRichTextInit,
|
|
24481
23669
|
readOnly,
|
|
24482
23670
|
editorInputClassName,
|
|
24483
|
-
editorInputWrapperClassName,
|
|
24484
23671
|
children,
|
|
24485
23672
|
variables,
|
|
24486
|
-
customControls
|
|
24487
|
-
onInsertTable,
|
|
24488
|
-
minimalInteractivity
|
|
23673
|
+
customControls
|
|
24489
23674
|
}) => {
|
|
24490
|
-
const
|
|
24491
|
-
(0,
|
|
23675
|
+
const editorContainerRef = (0, import_react151.useRef)(null);
|
|
23676
|
+
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23677
|
+
(0, import_react151.useEffect)(() => {
|
|
24492
23678
|
if (onRichTextInit) {
|
|
24493
23679
|
onRichTextInit(editor);
|
|
24494
23680
|
}
|
|
24495
23681
|
}, [editor, onRichTextInit]);
|
|
24496
|
-
(0,
|
|
23682
|
+
(0, import_react151.useEffect)(() => {
|
|
24497
23683
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
|
|
24498
23684
|
requestAnimationFrame(() => {
|
|
24499
23685
|
if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -24505,73 +23691,54 @@ var RichText = ({
|
|
|
24505
23691
|
removeUpdateListener();
|
|
24506
23692
|
};
|
|
24507
23693
|
}, [editor, onChange]);
|
|
24508
|
-
(0,
|
|
23694
|
+
(0, import_react151.useEffect)(() => {
|
|
24509
23695
|
editor.setEditable(!readOnly);
|
|
24510
23696
|
}, [editor, readOnly]);
|
|
24511
|
-
|
|
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
|
-
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
|
|
24540
|
-
editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
24541
|
-
LinkNodePlugin,
|
|
24542
|
-
{
|
|
24543
|
-
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
24544
|
-
getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
|
|
24545
|
-
var _a, _b;
|
|
24546
|
-
return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
|
|
24547
|
-
} : void 0,
|
|
24548
|
-
positioningAnchorEl: editorContainerRef
|
|
24549
|
-
}
|
|
24550
|
-
) : null,
|
|
24551
|
-
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ListIndentPlugin, { maxDepth: 4 }),
|
|
24552
|
-
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DisableStylesPlugin, {}),
|
|
24553
|
-
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
24554
|
-
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_jsx_runtime133.Fragment, { children })
|
|
24555
|
-
]
|
|
24556
|
-
}
|
|
24557
|
-
)
|
|
23697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
23698
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(RichTextToolbar_default, { config, customControls }),
|
|
23699
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
|
|
23700
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23701
|
+
import_LexicalRichTextPlugin.RichTextPlugin,
|
|
23702
|
+
{
|
|
23703
|
+
contentEditable: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
23704
|
+
placeholder: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
23705
|
+
ErrorBoundary: import_LexicalErrorBoundary.default
|
|
23706
|
+
}
|
|
23707
|
+
),
|
|
23708
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalListPlugin.ListPlugin, {}),
|
|
23709
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
|
|
23710
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23711
|
+
LinkNodePlugin,
|
|
23712
|
+
{
|
|
23713
|
+
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
23714
|
+
getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
|
|
23715
|
+
var _a, _b;
|
|
23716
|
+
return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
|
|
23717
|
+
} : void 0
|
|
23718
|
+
}
|
|
23719
|
+
),
|
|
23720
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ListIndentPlugin, { maxDepth: 4 }),
|
|
23721
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DisableStylesPlugin, {}),
|
|
23722
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
23723
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children })
|
|
23724
|
+
] })
|
|
24558
23725
|
] });
|
|
24559
23726
|
};
|
|
24560
23727
|
|
|
24561
23728
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
24562
23729
|
init_emotion_jsx_shim();
|
|
24563
|
-
var
|
|
24564
|
-
var
|
|
24565
|
-
var ParameterSelect = (0,
|
|
23730
|
+
var import_react152 = require("react");
|
|
23731
|
+
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
23732
|
+
var ParameterSelect = (0, import_react152.forwardRef)(
|
|
24566
23733
|
({ defaultOption, options, ...props }, ref) => {
|
|
24567
23734
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
24568
|
-
return /* @__PURE__ */ (0,
|
|
23735
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
24569
23736
|
}
|
|
24570
23737
|
);
|
|
24571
|
-
var ParameterSelectInner = (0,
|
|
23738
|
+
var ParameterSelectInner = (0, import_react152.forwardRef)(
|
|
24572
23739
|
({ defaultOption, options, ...props }, ref) => {
|
|
24573
23740
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
24574
|
-
return /* @__PURE__ */ (0,
|
|
23741
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
|
|
24575
23742
|
"select",
|
|
24576
23743
|
{
|
|
24577
23744
|
css: [input3, selectInput],
|
|
@@ -24580,10 +23747,10 @@ var ParameterSelectInner = (0, import_react156.forwardRef)(
|
|
|
24580
23747
|
ref,
|
|
24581
23748
|
...props,
|
|
24582
23749
|
children: [
|
|
24583
|
-
defaultOption ? /* @__PURE__ */ (0,
|
|
23750
|
+
defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: "", children: defaultOption }) : null,
|
|
24584
23751
|
options.map((option) => {
|
|
24585
23752
|
var _a;
|
|
24586
|
-
return /* @__PURE__ */ (0,
|
|
23753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
24587
23754
|
})
|
|
24588
23755
|
]
|
|
24589
23756
|
}
|
|
@@ -24593,15 +23760,15 @@ var ParameterSelectInner = (0, import_react156.forwardRef)(
|
|
|
24593
23760
|
|
|
24594
23761
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
24595
23762
|
init_emotion_jsx_shim();
|
|
24596
|
-
var
|
|
24597
|
-
var
|
|
24598
|
-
var ParameterTextarea = (0,
|
|
23763
|
+
var import_react153 = require("react");
|
|
23764
|
+
var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
|
|
23765
|
+
var ParameterTextarea = (0, import_react153.forwardRef)((props, ref) => {
|
|
24599
23766
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
24600
|
-
return /* @__PURE__ */ (0,
|
|
23767
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
24601
23768
|
});
|
|
24602
|
-
var ParameterTextareaInner = (0,
|
|
23769
|
+
var ParameterTextareaInner = (0, import_react153.forwardRef)(({ ...props }, ref) => {
|
|
24603
23770
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
24604
|
-
return /* @__PURE__ */ (0,
|
|
23771
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
24605
23772
|
"textarea",
|
|
24606
23773
|
{
|
|
24607
23774
|
css: [input3, textarea2],
|
|
@@ -24615,18 +23782,18 @@ var ParameterTextareaInner = (0, import_react157.forwardRef)(({ ...props }, ref)
|
|
|
24615
23782
|
|
|
24616
23783
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
24617
23784
|
init_emotion_jsx_shim();
|
|
24618
|
-
var
|
|
24619
|
-
var
|
|
24620
|
-
var ParameterToggle = (0,
|
|
23785
|
+
var import_react154 = require("react");
|
|
23786
|
+
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
23787
|
+
var ParameterToggle = (0, import_react154.forwardRef)((props, ref) => {
|
|
24621
23788
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
24622
|
-
return /* @__PURE__ */ (0,
|
|
23789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
24623
23790
|
});
|
|
24624
|
-
var ParameterToggleInner = (0,
|
|
23791
|
+
var ParameterToggleInner = (0, import_react154.forwardRef)(
|
|
24625
23792
|
({ children, ...props }, ref) => {
|
|
24626
23793
|
const { id, label } = useParameterShell();
|
|
24627
|
-
return /* @__PURE__ */ (0,
|
|
24628
|
-
/* @__PURE__ */ (0,
|
|
24629
|
-
/* @__PURE__ */ (0,
|
|
23794
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("label", { css: inputToggleLabel2, children: [
|
|
23795
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
23796
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { css: inlineLabel2, children: label }),
|
|
24630
23797
|
children
|
|
24631
23798
|
] });
|
|
24632
23799
|
}
|
|
@@ -24637,8 +23804,8 @@ init_emotion_jsx_shim();
|
|
|
24637
23804
|
|
|
24638
23805
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
24639
23806
|
init_emotion_jsx_shim();
|
|
24640
|
-
var
|
|
24641
|
-
var container3 =
|
|
23807
|
+
var import_react155 = require("@emotion/react");
|
|
23808
|
+
var container3 = import_react155.css`
|
|
24642
23809
|
background: var(--gray-50);
|
|
24643
23810
|
margin-block: var(--spacing-sm);
|
|
24644
23811
|
position: relative;
|
|
@@ -24648,17 +23815,17 @@ var container3 = import_react159.css`
|
|
|
24648
23815
|
border: solid 1px var(--gray-300);
|
|
24649
23816
|
`;
|
|
24650
23817
|
var themeMap = {
|
|
24651
|
-
primary:
|
|
23818
|
+
primary: import_react155.css`
|
|
24652
23819
|
--progress-color: var(--accent-light);
|
|
24653
23820
|
`,
|
|
24654
|
-
secondary:
|
|
23821
|
+
secondary: import_react155.css`
|
|
24655
23822
|
--progress-color: var(--accent-alt-light);
|
|
24656
23823
|
`,
|
|
24657
|
-
destructive:
|
|
23824
|
+
destructive: import_react155.css`
|
|
24658
23825
|
--progress-color: var(--brand-secondary-5);
|
|
24659
23826
|
`
|
|
24660
23827
|
};
|
|
24661
|
-
var slidingBackgroundPosition =
|
|
23828
|
+
var slidingBackgroundPosition = import_react155.keyframes`
|
|
24662
23829
|
from {
|
|
24663
23830
|
background-position: 0 0;
|
|
24664
23831
|
}
|
|
@@ -24666,10 +23833,10 @@ var slidingBackgroundPosition = import_react159.keyframes`
|
|
|
24666
23833
|
background-position: 64px 0;
|
|
24667
23834
|
}
|
|
24668
23835
|
`;
|
|
24669
|
-
var determinate =
|
|
23836
|
+
var determinate = import_react155.css`
|
|
24670
23837
|
background-color: var(--progress-color);
|
|
24671
23838
|
`;
|
|
24672
|
-
var indeterminate =
|
|
23839
|
+
var indeterminate = import_react155.css`
|
|
24673
23840
|
background-image: linear-gradient(
|
|
24674
23841
|
45deg,
|
|
24675
23842
|
var(--progress-color) 25%,
|
|
@@ -24683,7 +23850,7 @@ var indeterminate = import_react159.css`
|
|
|
24683
23850
|
background-size: 64px 64px;
|
|
24684
23851
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
24685
23852
|
`;
|
|
24686
|
-
var bar =
|
|
23853
|
+
var bar = import_react155.css`
|
|
24687
23854
|
position: absolute;
|
|
24688
23855
|
inset: 0;
|
|
24689
23856
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -24691,7 +23858,7 @@ var bar = import_react159.css`
|
|
|
24691
23858
|
`;
|
|
24692
23859
|
|
|
24693
23860
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
24694
|
-
var
|
|
23861
|
+
var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
|
|
24695
23862
|
function ProgressBar({
|
|
24696
23863
|
current,
|
|
24697
23864
|
max,
|
|
@@ -24701,7 +23868,7 @@ function ProgressBar({
|
|
|
24701
23868
|
}) {
|
|
24702
23869
|
const valueNow = Math.min(current, max);
|
|
24703
23870
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
24704
|
-
return /* @__PURE__ */ (0,
|
|
23871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
24705
23872
|
"div",
|
|
24706
23873
|
{
|
|
24707
23874
|
css: container3,
|
|
@@ -24712,7 +23879,7 @@ function ProgressBar({
|
|
|
24712
23879
|
"aria-valuemax": max,
|
|
24713
23880
|
"aria-valuenow": valueNow,
|
|
24714
23881
|
...props,
|
|
24715
|
-
children: /* @__PURE__ */ (0,
|
|
23882
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
24716
23883
|
"div",
|
|
24717
23884
|
{
|
|
24718
23885
|
css: [
|
|
@@ -24732,31 +23899,31 @@ function ProgressBar({
|
|
|
24732
23899
|
|
|
24733
23900
|
// src/components/ProgressList/ProgressList.tsx
|
|
24734
23901
|
init_emotion_jsx_shim();
|
|
24735
|
-
var
|
|
23902
|
+
var import_react157 = require("@emotion/react");
|
|
24736
23903
|
var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
|
|
24737
23904
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
24738
23905
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
24739
|
-
var
|
|
23906
|
+
var import_react158 = require("react");
|
|
24740
23907
|
|
|
24741
23908
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
24742
23909
|
init_emotion_jsx_shim();
|
|
24743
|
-
var
|
|
24744
|
-
var progressListStyles =
|
|
23910
|
+
var import_react156 = require("@emotion/react");
|
|
23911
|
+
var progressListStyles = import_react156.css`
|
|
24745
23912
|
display: flex;
|
|
24746
23913
|
flex-direction: column;
|
|
24747
23914
|
gap: var(--spacing-sm);
|
|
24748
23915
|
list-style-type: none;
|
|
24749
23916
|
`;
|
|
24750
|
-
var progressListItemStyles =
|
|
23917
|
+
var progressListItemStyles = import_react156.css`
|
|
24751
23918
|
display: flex;
|
|
24752
23919
|
gap: var(--spacing-base);
|
|
24753
23920
|
align-items: center;
|
|
24754
23921
|
`;
|
|
24755
23922
|
|
|
24756
23923
|
// src/components/ProgressList/ProgressList.tsx
|
|
24757
|
-
var
|
|
23924
|
+
var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
|
|
24758
23925
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
24759
|
-
const itemsWithStatus = (0,
|
|
23926
|
+
const itemsWithStatus = (0, import_react158.useMemo)(() => {
|
|
24760
23927
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
24761
23928
|
return items.map((item, index) => {
|
|
24762
23929
|
let status = "queued";
|
|
@@ -24768,8 +23935,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
24768
23935
|
return { ...item, status };
|
|
24769
23936
|
});
|
|
24770
23937
|
}, [items, inProgressId]);
|
|
24771
|
-
return /* @__PURE__ */ (0,
|
|
24772
|
-
return /* @__PURE__ */ (0,
|
|
23938
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
23939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
|
|
24773
23940
|
ProgressListItem,
|
|
24774
23941
|
{
|
|
24775
23942
|
status,
|
|
@@ -24789,7 +23956,7 @@ var ProgressListItem = ({
|
|
|
24789
23956
|
errorLevel = "danger",
|
|
24790
23957
|
autoEllipsis = false
|
|
24791
23958
|
}) => {
|
|
24792
|
-
const icon = (0,
|
|
23959
|
+
const icon = (0, import_react158.useMemo)(() => {
|
|
24793
23960
|
if (error) {
|
|
24794
23961
|
return warningIcon;
|
|
24795
23962
|
}
|
|
@@ -24800,14 +23967,14 @@ var ProgressListItem = ({
|
|
|
24800
23967
|
};
|
|
24801
23968
|
return iconPerStatus[status];
|
|
24802
23969
|
}, [status, error]);
|
|
24803
|
-
const statusStyles = (0,
|
|
23970
|
+
const statusStyles = (0, import_react158.useMemo)(() => {
|
|
24804
23971
|
if (error) {
|
|
24805
|
-
return errorLevel === "caution" ?
|
|
23972
|
+
return errorLevel === "caution" ? import_react157.css`
|
|
24806
23973
|
color: rgb(161, 98, 7);
|
|
24807
23974
|
& svg {
|
|
24808
23975
|
color: rgb(250, 204, 21);
|
|
24809
23976
|
}
|
|
24810
|
-
` :
|
|
23977
|
+
` : import_react157.css`
|
|
24811
23978
|
color: rgb(185, 28, 28);
|
|
24812
23979
|
& svg {
|
|
24813
23980
|
color: var(--brand-primary-2);
|
|
@@ -24815,40 +23982,40 @@ var ProgressListItem = ({
|
|
|
24815
23982
|
`;
|
|
24816
23983
|
}
|
|
24817
23984
|
const colorPerStatus = {
|
|
24818
|
-
completed:
|
|
23985
|
+
completed: import_react157.css`
|
|
24819
23986
|
opacity: 0.75;
|
|
24820
23987
|
`,
|
|
24821
|
-
inProgress:
|
|
23988
|
+
inProgress: import_react157.css`
|
|
24822
23989
|
-webkit-text-stroke-width: thin;
|
|
24823
23990
|
`,
|
|
24824
|
-
queued:
|
|
23991
|
+
queued: import_react157.css`
|
|
24825
23992
|
opacity: 0.5;
|
|
24826
23993
|
`
|
|
24827
23994
|
};
|
|
24828
23995
|
return colorPerStatus[status];
|
|
24829
23996
|
}, [status, error, errorLevel]);
|
|
24830
|
-
return /* @__PURE__ */ (0,
|
|
24831
|
-
/* @__PURE__ */ (0,
|
|
24832
|
-
/* @__PURE__ */ (0,
|
|
23997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
23998
|
+
/* @__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" }) }) }),
|
|
23999
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { children: [
|
|
24833
24000
|
children,
|
|
24834
|
-
/* @__PURE__ */ (0,
|
|
24001
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
24835
24002
|
] })
|
|
24836
24003
|
] });
|
|
24837
24004
|
};
|
|
24838
24005
|
|
|
24839
24006
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
24840
24007
|
init_emotion_jsx_shim();
|
|
24841
|
-
var
|
|
24008
|
+
var import_react160 = require("@emotion/react");
|
|
24842
24009
|
var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
|
|
24843
|
-
var
|
|
24010
|
+
var import_react161 = require("react");
|
|
24844
24011
|
|
|
24845
24012
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
24846
24013
|
init_emotion_jsx_shim();
|
|
24847
|
-
var
|
|
24848
|
-
var segmentedControlRootStyles =
|
|
24014
|
+
var import_react159 = require("@emotion/react");
|
|
24015
|
+
var segmentedControlRootStyles = import_react159.css`
|
|
24849
24016
|
position: relative;
|
|
24850
24017
|
`;
|
|
24851
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
24018
|
+
var segmentedControlScrollIndicatorsStyles = import_react159.css`
|
|
24852
24019
|
position: absolute;
|
|
24853
24020
|
inset: 0;
|
|
24854
24021
|
z-index: 1;
|
|
@@ -24876,17 +24043,17 @@ var segmentedControlScrollIndicatorsStyles = import_react163.css`
|
|
|
24876
24043
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
24877
24044
|
}
|
|
24878
24045
|
`;
|
|
24879
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
24046
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react159.css`
|
|
24880
24047
|
&::before {
|
|
24881
24048
|
opacity: 1;
|
|
24882
24049
|
}
|
|
24883
24050
|
`;
|
|
24884
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
24051
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react159.css`
|
|
24885
24052
|
&::after {
|
|
24886
24053
|
opacity: 1;
|
|
24887
24054
|
}
|
|
24888
24055
|
`;
|
|
24889
|
-
var segmentedControlWrapperStyles =
|
|
24056
|
+
var segmentedControlWrapperStyles = import_react159.css`
|
|
24890
24057
|
overflow-y: auto;
|
|
24891
24058
|
scroll-behavior: smooth;
|
|
24892
24059
|
scrollbar-width: none;
|
|
@@ -24895,7 +24062,7 @@ var segmentedControlWrapperStyles = import_react163.css`
|
|
|
24895
24062
|
height: 0px;
|
|
24896
24063
|
}
|
|
24897
24064
|
`;
|
|
24898
|
-
var segmentedControlStyles =
|
|
24065
|
+
var segmentedControlStyles = import_react159.css`
|
|
24899
24066
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
24900
24067
|
--segmented-control-border-width: 1px;
|
|
24901
24068
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -24914,14 +24081,14 @@ var segmentedControlStyles = import_react163.css`
|
|
|
24914
24081
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
24915
24082
|
font-size: var(--fs-xs);
|
|
24916
24083
|
`;
|
|
24917
|
-
var segmentedControlVerticalStyles =
|
|
24084
|
+
var segmentedControlVerticalStyles = import_react159.css`
|
|
24918
24085
|
flex-direction: column;
|
|
24919
24086
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
24920
24087
|
var(--segmented-control-rounded-value) 0 0;
|
|
24921
24088
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
24922
24089
|
var(--segmented-control-rounded-value);
|
|
24923
24090
|
`;
|
|
24924
|
-
var segmentedControlItemStyles =
|
|
24091
|
+
var segmentedControlItemStyles = import_react159.css`
|
|
24925
24092
|
&:first-of-type label {
|
|
24926
24093
|
border-radius: var(--segmented-control-first-border-radius);
|
|
24927
24094
|
}
|
|
@@ -24929,10 +24096,10 @@ var segmentedControlItemStyles = import_react163.css`
|
|
|
24929
24096
|
border-radius: var(--segmented-control-last-border-radius);
|
|
24930
24097
|
}
|
|
24931
24098
|
`;
|
|
24932
|
-
var segmentedControlInputStyles =
|
|
24099
|
+
var segmentedControlInputStyles = import_react159.css`
|
|
24933
24100
|
${accessibleHidden}
|
|
24934
24101
|
`;
|
|
24935
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
24102
|
+
var segmentedControlLabelStyles = (checked, disabled2) => import_react159.css`
|
|
24936
24103
|
position: relative;
|
|
24937
24104
|
display: flex;
|
|
24938
24105
|
align-items: center;
|
|
@@ -24999,25 +24166,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react163.css`
|
|
|
24999
24166
|
`}
|
|
25000
24167
|
}
|
|
25001
24168
|
`;
|
|
25002
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
24169
|
+
var segmentedControlLabelIconOnlyStyles = import_react159.css`
|
|
25003
24170
|
padding-inline: 0.5em;
|
|
25004
24171
|
`;
|
|
25005
|
-
var segmentedControlLabelCheckStyles =
|
|
24172
|
+
var segmentedControlLabelCheckStyles = import_react159.css`
|
|
25006
24173
|
opacity: 0.5;
|
|
25007
24174
|
`;
|
|
25008
|
-
var segmentedControlLabelContentStyles =
|
|
24175
|
+
var segmentedControlLabelContentStyles = import_react159.css`
|
|
25009
24176
|
display: flex;
|
|
25010
24177
|
align-items: center;
|
|
25011
24178
|
justify-content: center;
|
|
25012
24179
|
gap: var(--spacing-sm);
|
|
25013
24180
|
height: 100%;
|
|
25014
24181
|
`;
|
|
25015
|
-
var segmentedControlLabelTextStyles =
|
|
24182
|
+
var segmentedControlLabelTextStyles = import_react159.css`
|
|
25016
24183
|
white-space: nowrap;
|
|
25017
24184
|
`;
|
|
25018
24185
|
|
|
25019
24186
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
25020
|
-
var
|
|
24187
|
+
var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
|
|
25021
24188
|
var SegmentedControl = ({
|
|
25022
24189
|
name,
|
|
25023
24190
|
options,
|
|
@@ -25032,10 +24199,10 @@ var SegmentedControl = ({
|
|
|
25032
24199
|
currentBackgroundColor = "white",
|
|
25033
24200
|
...props
|
|
25034
24201
|
}) => {
|
|
25035
|
-
const wrapperRef = (0,
|
|
25036
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
25037
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
25038
|
-
const onOptionChange = (0,
|
|
24202
|
+
const wrapperRef = (0, import_react161.useRef)(null);
|
|
24203
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react161.useState)(false);
|
|
24204
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react161.useState)(false);
|
|
24205
|
+
const onOptionChange = (0, import_react161.useCallback)(
|
|
25039
24206
|
(event) => {
|
|
25040
24207
|
if (event.target.checked) {
|
|
25041
24208
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -25043,19 +24210,19 @@ var SegmentedControl = ({
|
|
|
25043
24210
|
},
|
|
25044
24211
|
[options, onChange]
|
|
25045
24212
|
);
|
|
25046
|
-
const sizeStyles = (0,
|
|
24213
|
+
const sizeStyles = (0, import_react161.useMemo)(() => {
|
|
25047
24214
|
const map = {
|
|
25048
|
-
sm: (0,
|
|
25049
|
-
md: (0,
|
|
25050
|
-
lg: (0,
|
|
25051
|
-
xl: (0,
|
|
24215
|
+
sm: (0, import_react160.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
24216
|
+
md: (0, import_react160.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
24217
|
+
lg: (0, import_react160.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
24218
|
+
xl: (0, import_react160.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
25052
24219
|
};
|
|
25053
24220
|
return map[size];
|
|
25054
24221
|
}, [size]);
|
|
25055
|
-
const isIconOnly = (0,
|
|
24222
|
+
const isIconOnly = (0, import_react161.useMemo)(() => {
|
|
25056
24223
|
return options.every((option) => option && option.icon && !option.label);
|
|
25057
24224
|
}, [options]);
|
|
25058
|
-
(0,
|
|
24225
|
+
(0, import_react161.useEffect)(() => {
|
|
25059
24226
|
const wrapperElement = wrapperRef.current;
|
|
25060
24227
|
const onScroll = () => {
|
|
25061
24228
|
if (!wrapperElement) {
|
|
@@ -25076,8 +24243,8 @@ var SegmentedControl = ({
|
|
|
25076
24243
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
25077
24244
|
};
|
|
25078
24245
|
}, []);
|
|
25079
|
-
return /* @__PURE__ */ (0,
|
|
25080
|
-
/* @__PURE__ */ (0,
|
|
24246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
24247
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
25081
24248
|
"div",
|
|
25082
24249
|
{
|
|
25083
24250
|
css: [
|
|
@@ -25093,12 +24260,12 @@ var SegmentedControl = ({
|
|
|
25093
24260
|
}
|
|
25094
24261
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
25095
24262
|
const isDisabled = disabled2 || option.disabled;
|
|
25096
|
-
return /* @__PURE__ */ (0,
|
|
24263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
25097
24264
|
"div",
|
|
25098
24265
|
{
|
|
25099
24266
|
css: segmentedControlItemStyles,
|
|
25100
24267
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
25101
|
-
children: /* @__PURE__ */ (0,
|
|
24268
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
|
|
25102
24269
|
"label",
|
|
25103
24270
|
{
|
|
25104
24271
|
css: [
|
|
@@ -25107,7 +24274,7 @@ var SegmentedControl = ({
|
|
|
25107
24274
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
25108
24275
|
],
|
|
25109
24276
|
children: [
|
|
25110
|
-
/* @__PURE__ */ (0,
|
|
24277
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
25111
24278
|
"input",
|
|
25112
24279
|
{
|
|
25113
24280
|
css: segmentedControlInputStyles,
|
|
@@ -25119,10 +24286,10 @@ var SegmentedControl = ({
|
|
|
25119
24286
|
disabled: isDisabled
|
|
25120
24287
|
}
|
|
25121
24288
|
),
|
|
25122
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0,
|
|
25123
|
-
/* @__PURE__ */ (0,
|
|
25124
|
-
!option.icon ? null : /* @__PURE__ */ (0,
|
|
25125
|
-
!text || hideOptionText ? null : /* @__PURE__ */ (0,
|
|
24289
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
24290
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
|
|
24291
|
+
!option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
24292
|
+
!text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
25126
24293
|
] })
|
|
25127
24294
|
]
|
|
25128
24295
|
}
|
|
@@ -25132,7 +24299,7 @@ var SegmentedControl = ({
|
|
|
25132
24299
|
})
|
|
25133
24300
|
}
|
|
25134
24301
|
) }),
|
|
25135
|
-
/* @__PURE__ */ (0,
|
|
24302
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
25136
24303
|
"div",
|
|
25137
24304
|
{
|
|
25138
24305
|
css: [
|
|
@@ -25150,18 +24317,18 @@ init_emotion_jsx_shim();
|
|
|
25150
24317
|
|
|
25151
24318
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
25152
24319
|
init_emotion_jsx_shim();
|
|
25153
|
-
var
|
|
25154
|
-
var lightFadingOut =
|
|
24320
|
+
var import_react162 = require("@emotion/react");
|
|
24321
|
+
var lightFadingOut = import_react162.keyframes`
|
|
25155
24322
|
from { opacity: 0.1; }
|
|
25156
24323
|
to { opacity: 0.025; }
|
|
25157
24324
|
`;
|
|
25158
|
-
var skeletonStyles =
|
|
24325
|
+
var skeletonStyles = import_react162.css`
|
|
25159
24326
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
25160
24327
|
background-color: var(--gray-900);
|
|
25161
24328
|
`;
|
|
25162
24329
|
|
|
25163
24330
|
// src/components/Skeleton/Skeleton.tsx
|
|
25164
|
-
var
|
|
24331
|
+
var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
|
|
25165
24332
|
var Skeleton = ({
|
|
25166
24333
|
width = "100%",
|
|
25167
24334
|
height = "1.25rem",
|
|
@@ -25169,7 +24336,7 @@ var Skeleton = ({
|
|
|
25169
24336
|
circle = false,
|
|
25170
24337
|
children,
|
|
25171
24338
|
...otherProps
|
|
25172
|
-
}) => /* @__PURE__ */ (0,
|
|
24339
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
|
|
25173
24340
|
"div",
|
|
25174
24341
|
{
|
|
25175
24342
|
css: [
|
|
@@ -25190,12 +24357,12 @@ var Skeleton = ({
|
|
|
25190
24357
|
|
|
25191
24358
|
// src/components/Switch/Switch.tsx
|
|
25192
24359
|
init_emotion_jsx_shim();
|
|
25193
|
-
var
|
|
24360
|
+
var import_react164 = require("react");
|
|
25194
24361
|
|
|
25195
24362
|
// src/components/Switch/Switch.styles.ts
|
|
25196
24363
|
init_emotion_jsx_shim();
|
|
25197
|
-
var
|
|
25198
|
-
var SwitchInputContainer =
|
|
24364
|
+
var import_react163 = require("@emotion/react");
|
|
24365
|
+
var SwitchInputContainer = import_react163.css`
|
|
25199
24366
|
cursor: pointer;
|
|
25200
24367
|
display: inline-block;
|
|
25201
24368
|
position: relative;
|
|
@@ -25204,7 +24371,7 @@ var SwitchInputContainer = import_react167.css`
|
|
|
25204
24371
|
vertical-align: middle;
|
|
25205
24372
|
user-select: none;
|
|
25206
24373
|
`;
|
|
25207
|
-
var SwitchInput = (size) =>
|
|
24374
|
+
var SwitchInput = (size) => import_react163.css`
|
|
25208
24375
|
appearance: none;
|
|
25209
24376
|
border-radius: var(--rounded-full);
|
|
25210
24377
|
background-color: var(--white);
|
|
@@ -25243,7 +24410,7 @@ var SwitchInput = (size) => import_react167.css`
|
|
|
25243
24410
|
cursor: not-allowed;
|
|
25244
24411
|
}
|
|
25245
24412
|
`;
|
|
25246
|
-
var SwitchInputDisabled =
|
|
24413
|
+
var SwitchInputDisabled = import_react163.css`
|
|
25247
24414
|
opacity: var(--opacity-50);
|
|
25248
24415
|
cursor: not-allowed;
|
|
25249
24416
|
|
|
@@ -25251,7 +24418,7 @@ var SwitchInputDisabled = import_react167.css`
|
|
|
25251
24418
|
cursor: not-allowed;
|
|
25252
24419
|
}
|
|
25253
24420
|
`;
|
|
25254
|
-
var SwitchInputLabel = (size) =>
|
|
24421
|
+
var SwitchInputLabel = (size) => import_react163.css`
|
|
25255
24422
|
align-items: center;
|
|
25256
24423
|
color: var(--typography-base);
|
|
25257
24424
|
display: inline-flex;
|
|
@@ -25273,32 +24440,32 @@ var SwitchInputLabel = (size) => import_react167.css`
|
|
|
25273
24440
|
top: 0;
|
|
25274
24441
|
}
|
|
25275
24442
|
`;
|
|
25276
|
-
var SwitchText = (size) =>
|
|
24443
|
+
var SwitchText = (size) => import_react163.css`
|
|
25277
24444
|
color: var(--gray-500);
|
|
25278
24445
|
font-size: var(--fs-sm);
|
|
25279
24446
|
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
25280
24447
|
`;
|
|
25281
24448
|
|
|
25282
24449
|
// src/components/Switch/Switch.tsx
|
|
25283
|
-
var
|
|
25284
|
-
var Switch = (0,
|
|
24450
|
+
var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
|
|
24451
|
+
var Switch = (0, import_react164.forwardRef)(
|
|
25285
24452
|
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
25286
24453
|
let additionalText = infoText;
|
|
25287
24454
|
if (infoText && toggleText) {
|
|
25288
24455
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
25289
24456
|
}
|
|
25290
|
-
return /* @__PURE__ */ (0,
|
|
25291
|
-
/* @__PURE__ */ (0,
|
|
24457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
|
|
24458
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
|
|
25292
24459
|
"label",
|
|
25293
24460
|
{
|
|
25294
24461
|
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
25295
24462
|
children: [
|
|
25296
|
-
/* @__PURE__ */ (0,
|
|
25297
|
-
/* @__PURE__ */ (0,
|
|
24463
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
24464
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
25298
24465
|
]
|
|
25299
24466
|
}
|
|
25300
24467
|
),
|
|
25301
|
-
additionalText ? /* @__PURE__ */ (0,
|
|
24468
|
+
additionalText ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
25302
24469
|
children
|
|
25303
24470
|
] });
|
|
25304
24471
|
}
|
|
@@ -25310,8 +24477,8 @@ var React24 = __toESM(require("react"));
|
|
|
25310
24477
|
|
|
25311
24478
|
// src/components/Table/Table.styles.ts
|
|
25312
24479
|
init_emotion_jsx_shim();
|
|
25313
|
-
var
|
|
25314
|
-
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) =>
|
|
24480
|
+
var import_react165 = require("@emotion/react");
|
|
24481
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react165.css`
|
|
25315
24482
|
border-bottom: 1px solid var(--gray-400);
|
|
25316
24483
|
border-collapse: collapse;
|
|
25317
24484
|
min-width: 100%;
|
|
@@ -25331,66 +24498,66 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
|
|
|
25331
24498
|
background-color: var(--gray-50);
|
|
25332
24499
|
}
|
|
25333
24500
|
`;
|
|
25334
|
-
var tableHead =
|
|
24501
|
+
var tableHead = import_react165.css`
|
|
25335
24502
|
color: var(--typography-base);
|
|
25336
24503
|
text-align: left;
|
|
25337
24504
|
`;
|
|
25338
|
-
var tableRow =
|
|
24505
|
+
var tableRow = import_react165.css`
|
|
25339
24506
|
border-bottom: 1px solid var(--gray-100);
|
|
25340
24507
|
`;
|
|
25341
|
-
var tableCellHead =
|
|
24508
|
+
var tableCellHead = import_react165.css`
|
|
25342
24509
|
font-size: var(--fs-sm);
|
|
25343
24510
|
text-transform: uppercase;
|
|
25344
24511
|
font-weight: var(--fw-bold);
|
|
25345
24512
|
`;
|
|
25346
24513
|
|
|
25347
24514
|
// src/components/Table/Table.tsx
|
|
25348
|
-
var
|
|
24515
|
+
var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
|
|
25349
24516
|
var Table = React24.forwardRef(
|
|
25350
24517
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
25351
|
-
return /* @__PURE__ */ (0,
|
|
24518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
25352
24519
|
}
|
|
25353
24520
|
);
|
|
25354
24521
|
var TableHead = React24.forwardRef(
|
|
25355
24522
|
({ children, ...otherProps }, ref) => {
|
|
25356
|
-
return /* @__PURE__ */ (0,
|
|
24523
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
|
|
25357
24524
|
}
|
|
25358
24525
|
);
|
|
25359
24526
|
var TableBody = React24.forwardRef(
|
|
25360
24527
|
({ children, ...otherProps }, ref) => {
|
|
25361
|
-
return /* @__PURE__ */ (0,
|
|
24528
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tbody", { ref, ...otherProps, children });
|
|
25362
24529
|
}
|
|
25363
24530
|
);
|
|
25364
24531
|
var TableFoot = React24.forwardRef(
|
|
25365
24532
|
({ children, ...otherProps }, ref) => {
|
|
25366
|
-
return /* @__PURE__ */ (0,
|
|
24533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tfoot", { ref, ...otherProps, children });
|
|
25367
24534
|
}
|
|
25368
24535
|
);
|
|
25369
24536
|
var TableRow = React24.forwardRef(
|
|
25370
24537
|
({ children, ...otherProps }, ref) => {
|
|
25371
|
-
return /* @__PURE__ */ (0,
|
|
24538
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
|
|
25372
24539
|
}
|
|
25373
24540
|
);
|
|
25374
24541
|
var TableCellHead = React24.forwardRef(
|
|
25375
24542
|
({ children, ...otherProps }, ref) => {
|
|
25376
|
-
return /* @__PURE__ */ (0,
|
|
24543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
25377
24544
|
}
|
|
25378
24545
|
);
|
|
25379
24546
|
var TableCellData = React24.forwardRef(
|
|
25380
24547
|
({ children, ...otherProps }, ref) => {
|
|
25381
|
-
return /* @__PURE__ */ (0,
|
|
24548
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("td", { ref, ...otherProps, children });
|
|
25382
24549
|
}
|
|
25383
24550
|
);
|
|
25384
24551
|
|
|
25385
24552
|
// src/components/Tabs/Tabs.tsx
|
|
25386
24553
|
init_emotion_jsx_shim();
|
|
25387
|
-
var
|
|
25388
|
-
var
|
|
24554
|
+
var import_react167 = require("@ariakit/react");
|
|
24555
|
+
var import_react168 = require("react");
|
|
25389
24556
|
|
|
25390
24557
|
// src/components/Tabs/Tabs.styles.ts
|
|
25391
24558
|
init_emotion_jsx_shim();
|
|
25392
|
-
var
|
|
25393
|
-
var tabButtonStyles =
|
|
24559
|
+
var import_react166 = require("@emotion/react");
|
|
24560
|
+
var tabButtonStyles = import_react166.css`
|
|
25394
24561
|
align-items: center;
|
|
25395
24562
|
border: 0;
|
|
25396
24563
|
height: 2.5rem;
|
|
@@ -25407,16 +24574,16 @@ var tabButtonStyles = import_react170.css`
|
|
|
25407
24574
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
25408
24575
|
}
|
|
25409
24576
|
`;
|
|
25410
|
-
var tabButtonGroupStyles =
|
|
24577
|
+
var tabButtonGroupStyles = import_react166.css`
|
|
25411
24578
|
display: flex;
|
|
25412
24579
|
gap: var(--spacing-base);
|
|
25413
24580
|
border-bottom: 1px solid var(--gray-300);
|
|
25414
24581
|
`;
|
|
25415
24582
|
|
|
25416
24583
|
// src/components/Tabs/Tabs.tsx
|
|
25417
|
-
var
|
|
24584
|
+
var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
|
|
25418
24585
|
var useCurrentTab = () => {
|
|
25419
|
-
const context = (0,
|
|
24586
|
+
const context = (0, import_react167.useTabStore)();
|
|
25420
24587
|
if (!context) {
|
|
25421
24588
|
throw new Error("This component can only be used inside <Tabs>");
|
|
25422
24589
|
}
|
|
@@ -25430,12 +24597,12 @@ var Tabs = ({
|
|
|
25430
24597
|
manual,
|
|
25431
24598
|
...props
|
|
25432
24599
|
}) => {
|
|
25433
|
-
const selected = (0,
|
|
24600
|
+
const selected = (0, import_react168.useMemo)(() => {
|
|
25434
24601
|
if (selectedId) return selectedId;
|
|
25435
24602
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
25436
24603
|
}, [selectedId, useHashForState]);
|
|
25437
|
-
const tab = (0,
|
|
25438
|
-
const onTabSelect = (0,
|
|
24604
|
+
const tab = (0, import_react167.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
|
|
24605
|
+
const onTabSelect = (0, import_react168.useCallback)(
|
|
25439
24606
|
(value) => {
|
|
25440
24607
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
25441
24608
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -25446,28 +24613,28 @@ var Tabs = ({
|
|
|
25446
24613
|
},
|
|
25447
24614
|
[onSelectedIdChange, useHashForState]
|
|
25448
24615
|
);
|
|
25449
|
-
(0,
|
|
24616
|
+
(0, import_react168.useEffect)(() => {
|
|
25450
24617
|
if (selected && selected !== tab.getState().activeId) {
|
|
25451
24618
|
tab.setSelectedId(selected);
|
|
25452
24619
|
}
|
|
25453
24620
|
}, [selected, tab]);
|
|
25454
|
-
return /* @__PURE__ */ (0,
|
|
24621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
25455
24622
|
};
|
|
25456
24623
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
25457
|
-
return /* @__PURE__ */ (0,
|
|
24624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
25458
24625
|
};
|
|
25459
24626
|
var TabButton = ({
|
|
25460
24627
|
children,
|
|
25461
24628
|
id,
|
|
25462
24629
|
...props
|
|
25463
24630
|
}) => {
|
|
25464
|
-
return /* @__PURE__ */ (0,
|
|
24631
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
25465
24632
|
};
|
|
25466
24633
|
var TabContent = ({
|
|
25467
24634
|
children,
|
|
25468
24635
|
...props
|
|
25469
24636
|
}) => {
|
|
25470
|
-
return /* @__PURE__ */ (0,
|
|
24637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabPanel, { ...props, children });
|
|
25471
24638
|
};
|
|
25472
24639
|
|
|
25473
24640
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -25475,8 +24642,8 @@ init_emotion_jsx_shim();
|
|
|
25475
24642
|
|
|
25476
24643
|
// src/components/Validation/StatusBullet.styles.ts
|
|
25477
24644
|
init_emotion_jsx_shim();
|
|
25478
|
-
var
|
|
25479
|
-
var StatusBulletContainer =
|
|
24645
|
+
var import_react169 = require("@emotion/react");
|
|
24646
|
+
var StatusBulletContainer = import_react169.css`
|
|
25480
24647
|
align-items: center;
|
|
25481
24648
|
align-self: center;
|
|
25482
24649
|
color: var(--gray-500);
|
|
@@ -25493,33 +24660,33 @@ var StatusBulletContainer = import_react173.css`
|
|
|
25493
24660
|
display: block;
|
|
25494
24661
|
}
|
|
25495
24662
|
`;
|
|
25496
|
-
var StatusBulletBase =
|
|
24663
|
+
var StatusBulletBase = import_react169.css`
|
|
25497
24664
|
font-size: var(--fs-sm);
|
|
25498
24665
|
&:before {
|
|
25499
24666
|
width: var(--fs-xs);
|
|
25500
24667
|
height: var(--fs-xs);
|
|
25501
24668
|
}
|
|
25502
24669
|
`;
|
|
25503
|
-
var StatusBulletSmall =
|
|
24670
|
+
var StatusBulletSmall = import_react169.css`
|
|
25504
24671
|
font-size: var(--fs-xs);
|
|
25505
24672
|
&:before {
|
|
25506
24673
|
width: var(--fs-xxs);
|
|
25507
24674
|
height: var(--fs-xxs);
|
|
25508
24675
|
}
|
|
25509
24676
|
`;
|
|
25510
|
-
var StatusDraft =
|
|
24677
|
+
var StatusDraft = import_react169.css`
|
|
25511
24678
|
&:before {
|
|
25512
24679
|
background: var(--white);
|
|
25513
24680
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
25514
24681
|
}
|
|
25515
24682
|
`;
|
|
25516
|
-
var StatusModified =
|
|
24683
|
+
var StatusModified = import_react169.css`
|
|
25517
24684
|
&:before {
|
|
25518
24685
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
25519
24686
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
25520
24687
|
}
|
|
25521
24688
|
`;
|
|
25522
|
-
var StatusError =
|
|
24689
|
+
var StatusError = import_react169.css`
|
|
25523
24690
|
color: var(--error);
|
|
25524
24691
|
&:before {
|
|
25525
24692
|
/* TODO: replace this with an svg icon */
|
|
@@ -25532,29 +24699,29 @@ var StatusError = import_react173.css`
|
|
|
25532
24699
|
);
|
|
25533
24700
|
}
|
|
25534
24701
|
`;
|
|
25535
|
-
var StatusPublished =
|
|
24702
|
+
var StatusPublished = import_react169.css`
|
|
25536
24703
|
&:before {
|
|
25537
24704
|
background: var(--accent-dark);
|
|
25538
24705
|
}
|
|
25539
24706
|
`;
|
|
25540
|
-
var StatusOrphan =
|
|
24707
|
+
var StatusOrphan = import_react169.css`
|
|
25541
24708
|
&:before {
|
|
25542
24709
|
background: var(--brand-secondary-5);
|
|
25543
24710
|
}
|
|
25544
24711
|
`;
|
|
25545
|
-
var StatusUnknown =
|
|
24712
|
+
var StatusUnknown = import_react169.css`
|
|
25546
24713
|
&:before {
|
|
25547
24714
|
background: var(--gray-800);
|
|
25548
24715
|
}
|
|
25549
24716
|
`;
|
|
25550
|
-
var StatusDeleted =
|
|
24717
|
+
var StatusDeleted = import_react169.css`
|
|
25551
24718
|
&:before {
|
|
25552
24719
|
background: var(--error);
|
|
25553
24720
|
}
|
|
25554
24721
|
`;
|
|
25555
24722
|
|
|
25556
24723
|
// src/components/Validation/StatusBullet.tsx
|
|
25557
|
-
var
|
|
24724
|
+
var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
|
|
25558
24725
|
var StatusBullet = ({
|
|
25559
24726
|
status,
|
|
25560
24727
|
hideText = false,
|
|
@@ -25574,7 +24741,7 @@ var StatusBullet = ({
|
|
|
25574
24741
|
Deleted: StatusDeleted
|
|
25575
24742
|
};
|
|
25576
24743
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
25577
|
-
return /* @__PURE__ */ (0,
|
|
24744
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
25578
24745
|
"span",
|
|
25579
24746
|
{
|
|
25580
24747
|
role: "status",
|