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