@uniformdev/design-system 19.185.1-alpha.8 → 19.186.2-alpha.14
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 +181 -65
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +434 -324
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -19567,7 +19567,8 @@ var KeyValueInput = ({
|
|
|
19567
19567
|
onChange: (itemValue) => handleUpdateOptionRow(index, itemValue),
|
|
19568
19568
|
onDelete: () => handleDeleteOptionRow(index),
|
|
19569
19569
|
onFocusChange: handleFocusChange,
|
|
19570
|
-
"data-testid": "key-value-input-item"
|
|
19570
|
+
"data-testid": "key-value-input-item",
|
|
19571
|
+
onEnter: handleAddOptionRow
|
|
19571
19572
|
},
|
|
19572
19573
|
isDragging ? id : index
|
|
19573
19574
|
)) })
|
|
@@ -19602,7 +19603,8 @@ var KeyValueInputItem = ({
|
|
|
19602
19603
|
error,
|
|
19603
19604
|
onFocusChange,
|
|
19604
19605
|
disabledDelete = false,
|
|
19605
|
-
disabledDnd = false
|
|
19606
|
+
disabledDnd = false,
|
|
19607
|
+
onEnter
|
|
19606
19608
|
}) => {
|
|
19607
19609
|
const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef, isSorting } = (0, import_sortable.useSortable)({
|
|
19608
19610
|
id,
|
|
@@ -19612,6 +19614,11 @@ var KeyValueInputItem = ({
|
|
|
19612
19614
|
transform: import_utilities.CSS.Transform.toString(transform),
|
|
19613
19615
|
transition
|
|
19614
19616
|
};
|
|
19617
|
+
const handleEnter = (e) => {
|
|
19618
|
+
if (e.key === "Enter") {
|
|
19619
|
+
onEnter();
|
|
19620
|
+
}
|
|
19621
|
+
};
|
|
19615
19622
|
return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { css: rowWrapper, ref: setNodeRef, style, children: [
|
|
19616
19623
|
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
|
|
19617
19624
|
/* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { css: SelectKeyValueRowStyles, "data-testid": "key-value-input-item", children: [
|
|
@@ -19631,6 +19638,7 @@ var KeyValueInputItem = ({
|
|
|
19631
19638
|
},
|
|
19632
19639
|
onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
|
|
19633
19640
|
onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
|
|
19641
|
+
onKeyDown: handleEnter,
|
|
19634
19642
|
value: value.key,
|
|
19635
19643
|
errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
|
|
19636
19644
|
"data-testid": "key"
|
|
@@ -19642,12 +19650,15 @@ var KeyValueInputItem = ({
|
|
|
19642
19650
|
label: valueLabel,
|
|
19643
19651
|
showLabel: false,
|
|
19644
19652
|
disabled: disabled2,
|
|
19645
|
-
onChange: (e) =>
|
|
19646
|
-
|
|
19647
|
-
|
|
19648
|
-
|
|
19653
|
+
onChange: (e) => {
|
|
19654
|
+
onChange == null ? void 0 : onChange({
|
|
19655
|
+
key: value.key,
|
|
19656
|
+
value: e.currentTarget.value
|
|
19657
|
+
});
|
|
19658
|
+
},
|
|
19649
19659
|
onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
|
|
19650
19660
|
onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
|
|
19661
|
+
onKeyDown: handleEnter,
|
|
19651
19662
|
value: value.value,
|
|
19652
19663
|
errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
|
|
19653
19664
|
"data-testid": "value"
|
|
@@ -21828,8 +21839,8 @@ var import_react141 = require("react");
|
|
|
21828
21839
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
21829
21840
|
init_emotion_jsx_shim();
|
|
21830
21841
|
var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
|
|
21831
|
-
var ParameterLabel = ({ id, asSpan, children, ...props }) => {
|
|
21832
|
-
return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
|
|
21842
|
+
var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
|
|
21843
|
+
return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
|
|
21833
21844
|
};
|
|
21834
21845
|
|
|
21835
21846
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
@@ -21956,7 +21967,7 @@ var ParameterShell = ({
|
|
|
21956
21967
|
label,
|
|
21957
21968
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
21958
21969
|
] }),
|
|
21959
|
-
!title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(ParameterLabel, { id, asSpan: true, children: [
|
|
21970
|
+
!title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
|
|
21960
21971
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
21961
21972
|
title2,
|
|
21962
21973
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
@@ -22281,11 +22292,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
22281
22292
|
|
|
22282
22293
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22283
22294
|
init_emotion_jsx_shim();
|
|
22284
|
-
var
|
|
22295
|
+
var import_react158 = require("@emotion/react");
|
|
22285
22296
|
var import_list3 = require("@lexical/list");
|
|
22286
22297
|
var import_markdown = require("@lexical/markdown");
|
|
22287
22298
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
22288
|
-
var
|
|
22299
|
+
var import_LexicalComposerContext9 = require("@lexical/react/LexicalComposerContext");
|
|
22289
22300
|
var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
|
|
22290
22301
|
var import_LexicalErrorBoundary = __toESM(require("@lexical/react/LexicalErrorBoundary"));
|
|
22291
22302
|
var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
|
|
@@ -22298,6 +22309,12 @@ var import_table5 = require("@lexical/table");
|
|
|
22298
22309
|
|
|
22299
22310
|
// ../richtext/dist/index.mjs
|
|
22300
22311
|
init_emotion_jsx_shim();
|
|
22312
|
+
function isRichTextNode(node) {
|
|
22313
|
+
return !!node && typeof node === "object" && "type" in node;
|
|
22314
|
+
}
|
|
22315
|
+
function isRichTextNodeType(node, type) {
|
|
22316
|
+
return isRichTextNode(node) && node.type === type;
|
|
22317
|
+
}
|
|
22301
22318
|
var richTextBuiltInElements = [
|
|
22302
22319
|
{
|
|
22303
22320
|
label: "Heading 1",
|
|
@@ -22397,8 +22414,8 @@ var getLabelForElement = (type) => {
|
|
|
22397
22414
|
|
|
22398
22415
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22399
22416
|
var import_fast_equals2 = require("fast-equals");
|
|
22400
|
-
var
|
|
22401
|
-
var
|
|
22417
|
+
var import_lexical10 = require("lexical");
|
|
22418
|
+
var import_react159 = require("react");
|
|
22402
22419
|
|
|
22403
22420
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
22404
22421
|
init_emotion_jsx_shim();
|
|
@@ -22680,20 +22697,75 @@ var tableHeaderElement = import_css2.css`
|
|
|
22680
22697
|
width: 7rem;
|
|
22681
22698
|
`;
|
|
22682
22699
|
|
|
22683
|
-
// src/components/ParameterInputs/rich-text/
|
|
22700
|
+
// src/components/ParameterInputs/rich-text/ImprovedAssetSelectionPlugin.tsx
|
|
22684
22701
|
init_emotion_jsx_shim();
|
|
22685
|
-
var import_react146 = require("@emotion/react");
|
|
22686
22702
|
var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
|
|
22687
|
-
var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
|
|
22688
22703
|
var import_utils6 = require("@lexical/utils");
|
|
22704
|
+
var import_lexical2 = require("lexical");
|
|
22705
|
+
var import_react146 = require("react");
|
|
22706
|
+
var ImprovedAssetSelectionPlugin = () => {
|
|
22707
|
+
const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
|
|
22708
|
+
(0, import_react146.useEffect)(() => {
|
|
22709
|
+
editor.getRootElement();
|
|
22710
|
+
const onRootClick = (event) => {
|
|
22711
|
+
if (event.target !== editor.getRootElement()) {
|
|
22712
|
+
return;
|
|
22713
|
+
}
|
|
22714
|
+
const clickArea = event.offsetY <= 60 ? "top" : "bottom";
|
|
22715
|
+
const state = editor.getEditorState().toJSON();
|
|
22716
|
+
const firstNode = state.root.children[0];
|
|
22717
|
+
const lastNode = state.root.children.at(-1);
|
|
22718
|
+
if (isRichTextNodeType(firstNode, "asset") && clickArea === "top") {
|
|
22719
|
+
editor.update(() => {
|
|
22720
|
+
(0, import_utils6.$insertFirst)((0, import_lexical2.$getRoot)(), (0, import_lexical2.$createParagraphNode)());
|
|
22721
|
+
requestAnimationFrame(() => {
|
|
22722
|
+
var _a, _b;
|
|
22723
|
+
(_b = (_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.scrollTo({
|
|
22724
|
+
top: 0,
|
|
22725
|
+
behavior: "instant"
|
|
22726
|
+
});
|
|
22727
|
+
});
|
|
22728
|
+
});
|
|
22729
|
+
} else if (isRichTextNodeType(lastNode, "asset") && clickArea === "bottom") {
|
|
22730
|
+
editor.update(() => {
|
|
22731
|
+
(0, import_lexical2.$getRoot)().selectEnd();
|
|
22732
|
+
(0, import_lexical2.$insertNodes)([(0, import_lexical2.$createParagraphNode)()]);
|
|
22733
|
+
requestAnimationFrame(() => {
|
|
22734
|
+
var _a, _b, _c, _d;
|
|
22735
|
+
(_d = (_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _d.scrollTo({
|
|
22736
|
+
top: (_c = (_b = editor.getRootElement()) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.scrollHeight,
|
|
22737
|
+
behavior: "instant"
|
|
22738
|
+
});
|
|
22739
|
+
});
|
|
22740
|
+
});
|
|
22741
|
+
}
|
|
22742
|
+
};
|
|
22743
|
+
const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
|
|
22744
|
+
rootElement == null ? void 0 : rootElement.addEventListener("click", onRootClick);
|
|
22745
|
+
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("click", onRootClick);
|
|
22746
|
+
});
|
|
22747
|
+
return () => {
|
|
22748
|
+
removeRootListener();
|
|
22749
|
+
};
|
|
22750
|
+
}, [editor]);
|
|
22751
|
+
return null;
|
|
22752
|
+
};
|
|
22753
|
+
var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
|
|
22754
|
+
|
|
22755
|
+
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
22756
|
+
init_emotion_jsx_shim();
|
|
22757
|
+
var import_react147 = require("@emotion/react");
|
|
22758
|
+
var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
|
|
22759
|
+
var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
|
|
22760
|
+
var import_utils7 = require("@lexical/utils");
|
|
22689
22761
|
var import_fast_equals = require("fast-equals");
|
|
22690
|
-
var
|
|
22691
|
-
var
|
|
22762
|
+
var import_lexical4 = require("lexical");
|
|
22763
|
+
var import_react148 = require("react");
|
|
22692
22764
|
|
|
22693
22765
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
22694
22766
|
init_emotion_jsx_shim();
|
|
22695
22767
|
var import_selection = require("@lexical/selection");
|
|
22696
|
-
var
|
|
22768
|
+
var import_lexical3 = require("lexical");
|
|
22697
22769
|
var getElementNodesInSelection = (selection) => {
|
|
22698
22770
|
const nodesInSelection = selection.getNodes();
|
|
22699
22771
|
if (nodesInSelection.length === 0) {
|
|
@@ -22702,7 +22774,7 @@ var getElementNodesInSelection = (selection) => {
|
|
|
22702
22774
|
selection.focus.getNode().getParentOrThrow()
|
|
22703
22775
|
]);
|
|
22704
22776
|
}
|
|
22705
|
-
return new Set(nodesInSelection.map((node) => (0,
|
|
22777
|
+
return new Set(nodesInSelection.map((node) => (0, import_lexical3.$isElementNode)(node) ? node : node.getParentOrThrow()));
|
|
22706
22778
|
};
|
|
22707
22779
|
var getAncestor = (node, predicate) => {
|
|
22708
22780
|
let parent = node;
|
|
@@ -22749,7 +22821,7 @@ var guessLinkTypeFromPath = (path) => {
|
|
|
22749
22821
|
};
|
|
22750
22822
|
function convertAnchorElement(domNode) {
|
|
22751
22823
|
let node = null;
|
|
22752
|
-
if (!(0,
|
|
22824
|
+
if (!(0, import_utils7.isHTMLAnchorElement)(domNode)) {
|
|
22753
22825
|
return { node };
|
|
22754
22826
|
}
|
|
22755
22827
|
const textContent = domNode.textContent;
|
|
@@ -22806,14 +22878,12 @@ function convertAnchorElement(domNode) {
|
|
|
22806
22878
|
nodeId,
|
|
22807
22879
|
dynamicInputValues
|
|
22808
22880
|
};
|
|
22809
|
-
if (isProjectMapLinkValue(value)) {
|
|
22810
|
-
node = $createLinkNode(value);
|
|
22811
|
-
} else if (isNonProjectMapLinkValue(value)) {
|
|
22881
|
+
if (isProjectMapLinkValue(value) || isNonProjectMapLinkValue(value)) {
|
|
22812
22882
|
node = $createLinkNode(value);
|
|
22813
22883
|
}
|
|
22814
22884
|
return { node };
|
|
22815
22885
|
}
|
|
22816
|
-
var LinkNode = class _LinkNode extends
|
|
22886
|
+
var LinkNode = class _LinkNode extends import_lexical4.ElementNode {
|
|
22817
22887
|
static getType() {
|
|
22818
22888
|
return "link";
|
|
22819
22889
|
}
|
|
@@ -22858,7 +22928,7 @@ var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
|
|
|
22858
22928
|
element.setAttribute("href", `mailto:${this.__link.path}`);
|
|
22859
22929
|
}
|
|
22860
22930
|
}
|
|
22861
|
-
(0,
|
|
22931
|
+
(0, import_utils7.addClassNamesToElement)(element, config.theme.link);
|
|
22862
22932
|
return element;
|
|
22863
22933
|
}
|
|
22864
22934
|
updateDOM(prevNode, a) {
|
|
@@ -22886,7 +22956,7 @@ var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
|
|
|
22886
22956
|
}
|
|
22887
22957
|
insertNewAfter(selection, restoreSelection = true) {
|
|
22888
22958
|
const element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection);
|
|
22889
|
-
if ((0,
|
|
22959
|
+
if ((0, import_lexical4.$isElementNode)(element)) {
|
|
22890
22960
|
const linkNode = $createLinkNode(
|
|
22891
22961
|
"nodeId" in this.__link ? {
|
|
22892
22962
|
nodeId: this.__link.nodeId,
|
|
@@ -22917,7 +22987,7 @@ var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
|
|
|
22917
22987
|
}
|
|
22918
22988
|
};
|
|
22919
22989
|
function $createLinkNode(props) {
|
|
22920
|
-
return (0,
|
|
22990
|
+
return (0, import_lexical4.$applyNodeReplacement)(new LinkNode(props));
|
|
22921
22991
|
}
|
|
22922
22992
|
function $isLinkNode(node) {
|
|
22923
22993
|
return node instanceof LinkNode;
|
|
@@ -22930,14 +23000,14 @@ function removeLinkNode(node) {
|
|
|
22930
23000
|
node.remove();
|
|
22931
23001
|
}
|
|
22932
23002
|
function removeLinkNodeFromSelection() {
|
|
22933
|
-
const selection = (0,
|
|
22934
|
-
if (!(0,
|
|
23003
|
+
const selection = (0, import_lexical4.$getSelection)();
|
|
23004
|
+
if (!(0, import_lexical4.$isRangeSelection)(selection)) {
|
|
22935
23005
|
return;
|
|
22936
23006
|
}
|
|
22937
23007
|
const nodes = selection.extract();
|
|
22938
23008
|
const linkNodesFound = /* @__PURE__ */ new Set();
|
|
22939
23009
|
for (const node of nodes) {
|
|
22940
|
-
if ((0,
|
|
23010
|
+
if ((0, import_lexical4.$isElementNode)(node) && !node.isInline()) {
|
|
22941
23011
|
continue;
|
|
22942
23012
|
}
|
|
22943
23013
|
const linkNodeAncestor = getLinkAncestor(node);
|
|
@@ -22951,17 +23021,21 @@ function removeLinkNodeFromSelection() {
|
|
|
22951
23021
|
}
|
|
22952
23022
|
function upsertLinkNode(props) {
|
|
22953
23023
|
var _a, _b, _c, _d, _e;
|
|
22954
|
-
const selection = (0,
|
|
22955
|
-
if (!(0,
|
|
23024
|
+
const selection = (0, import_lexical4.$getSelection)();
|
|
23025
|
+
if (!(0, import_lexical4.$isRangeSelection)(selection)) {
|
|
22956
23026
|
return;
|
|
22957
23027
|
}
|
|
22958
23028
|
const nodes = selection.extract();
|
|
22959
23029
|
const touchedNodes = [];
|
|
22960
23030
|
for (const node of nodes) {
|
|
22961
|
-
if ((0,
|
|
23031
|
+
if ((0, import_lexical4.$isElementNode)(node) && !node.isInline()) {
|
|
22962
23032
|
continue;
|
|
22963
23033
|
}
|
|
22964
23034
|
const linkNodeAncestor = getLinkAncestor(node);
|
|
23035
|
+
if ($isLinkNode(node)) {
|
|
23036
|
+
node.setLink(props);
|
|
23037
|
+
continue;
|
|
23038
|
+
}
|
|
22965
23039
|
if (!linkNodeAncestor) {
|
|
22966
23040
|
const newLinkNode = $createLinkNode(props);
|
|
22967
23041
|
node.insertBefore(newLinkNode);
|
|
@@ -23006,23 +23080,23 @@ function upsertLinkNode(props) {
|
|
|
23006
23080
|
}
|
|
23007
23081
|
}
|
|
23008
23082
|
}
|
|
23009
|
-
var REMOVE_LINK_NODE_COMMAND = (0,
|
|
23010
|
-
var UPSERT_LINK_NODE_COMMAND = (0,
|
|
23011
|
-
var OPEN_LINK_NODE_MODAL_COMMAND = (0,
|
|
23083
|
+
var REMOVE_LINK_NODE_COMMAND = (0, import_lexical4.createCommand)("REMOVE_LINK_NODE_COMMAND");
|
|
23084
|
+
var UPSERT_LINK_NODE_COMMAND = (0, import_lexical4.createCommand)("UPSERT_LINK_NODE_COMMAND");
|
|
23085
|
+
var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical4.createCommand)(
|
|
23012
23086
|
"OPEN_LINK_NODE_MODAL_COMMAND"
|
|
23013
23087
|
);
|
|
23014
23088
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
23015
23089
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
23016
|
-
var linkPopover =
|
|
23090
|
+
var linkPopover = import_react147.css`
|
|
23017
23091
|
position: absolute;
|
|
23018
23092
|
z-index: 11;
|
|
23019
23093
|
`;
|
|
23020
|
-
var linkPopoverContainer =
|
|
23094
|
+
var linkPopoverContainer = import_react147.css`
|
|
23021
23095
|
${Popover()};
|
|
23022
23096
|
align-items: center;
|
|
23023
23097
|
display: flex;
|
|
23024
23098
|
`;
|
|
23025
|
-
var linkPopoverAnchor =
|
|
23099
|
+
var linkPopoverAnchor = import_react147.css`
|
|
23026
23100
|
${link}
|
|
23027
23101
|
${linkColorDefault}
|
|
23028
23102
|
`;
|
|
@@ -23034,29 +23108,29 @@ function LinkNodePlugin({
|
|
|
23034
23108
|
const parsePath = getBoundPath != null ? getBoundPath : function(path) {
|
|
23035
23109
|
return path;
|
|
23036
23110
|
};
|
|
23037
|
-
const [editor] = (0,
|
|
23038
|
-
const [linkPopoverState, setLinkPopoverState] = (0,
|
|
23039
|
-
const linkPopoverElRef = (0,
|
|
23040
|
-
const [isEditorFocused, setIsEditorFocused] = (0,
|
|
23041
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0,
|
|
23042
|
-
(0,
|
|
23111
|
+
const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
|
|
23112
|
+
const [linkPopoverState, setLinkPopoverState] = (0, import_react148.useState)();
|
|
23113
|
+
const linkPopoverElRef = (0, import_react148.useRef)(null);
|
|
23114
|
+
const [isEditorFocused, setIsEditorFocused] = (0, import_react148.useState)(false);
|
|
23115
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react148.useState)(false);
|
|
23116
|
+
(0, import_react148.useEffect)(() => {
|
|
23043
23117
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
23044
23118
|
setLinkPopoverState(void 0);
|
|
23045
23119
|
return;
|
|
23046
23120
|
}
|
|
23047
23121
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
23048
|
-
(0,
|
|
23122
|
+
(0, import_react148.useEffect)(() => {
|
|
23049
23123
|
if (!editor.hasNodes([LinkNode])) {
|
|
23050
23124
|
throw new Error("LinkNode not registered on editor");
|
|
23051
23125
|
}
|
|
23052
|
-
return (0,
|
|
23126
|
+
return (0, import_utils7.mergeRegister)(
|
|
23053
23127
|
editor.registerCommand(
|
|
23054
23128
|
UPSERT_LINK_NODE_COMMAND,
|
|
23055
23129
|
(payload) => {
|
|
23056
23130
|
upsertLinkNode(payload);
|
|
23057
23131
|
return true;
|
|
23058
23132
|
},
|
|
23059
|
-
|
|
23133
|
+
import_lexical4.COMMAND_PRIORITY_EDITOR
|
|
23060
23134
|
),
|
|
23061
23135
|
editor.registerCommand(
|
|
23062
23136
|
REMOVE_LINK_NODE_COMMAND,
|
|
@@ -23064,7 +23138,7 @@ function LinkNodePlugin({
|
|
|
23064
23138
|
removeLinkNodeFromSelection();
|
|
23065
23139
|
return true;
|
|
23066
23140
|
},
|
|
23067
|
-
|
|
23141
|
+
import_lexical4.COMMAND_PRIORITY_EDITOR
|
|
23068
23142
|
),
|
|
23069
23143
|
editor.registerCommand(
|
|
23070
23144
|
OPEN_LINK_NODE_MODAL_COMMAND,
|
|
@@ -23083,18 +23157,18 @@ function LinkNodePlugin({
|
|
|
23083
23157
|
});
|
|
23084
23158
|
return true;
|
|
23085
23159
|
},
|
|
23086
|
-
|
|
23160
|
+
import_lexical4.COMMAND_PRIORITY_EDITOR
|
|
23087
23161
|
),
|
|
23088
23162
|
editor.registerCommand(
|
|
23089
|
-
|
|
23163
|
+
import_lexical4.FOCUS_COMMAND,
|
|
23090
23164
|
() => {
|
|
23091
23165
|
setIsEditorFocused(true);
|
|
23092
23166
|
return true;
|
|
23093
23167
|
},
|
|
23094
|
-
|
|
23168
|
+
import_lexical4.COMMAND_PRIORITY_EDITOR
|
|
23095
23169
|
),
|
|
23096
23170
|
editor.registerCommand(
|
|
23097
|
-
|
|
23171
|
+
import_lexical4.BLUR_COMMAND,
|
|
23098
23172
|
() => {
|
|
23099
23173
|
requestAnimationFrame(() => {
|
|
23100
23174
|
if (linkPopoverElRef.current !== null) {
|
|
@@ -23110,16 +23184,51 @@ function LinkNodePlugin({
|
|
|
23110
23184
|
});
|
|
23111
23185
|
return true;
|
|
23112
23186
|
},
|
|
23113
|
-
|
|
23187
|
+
import_lexical4.COMMAND_PRIORITY_EDITOR
|
|
23188
|
+
),
|
|
23189
|
+
// Support pasting of links from clipboard
|
|
23190
|
+
editor.registerCommand(
|
|
23191
|
+
import_lexical4.PASTE_COMMAND,
|
|
23192
|
+
(event) => {
|
|
23193
|
+
const selection = (0, import_lexical4.$getSelection)();
|
|
23194
|
+
if (!(0, import_lexical4.$isRangeSelection)(selection) || selection.isCollapsed() || !(0, import_utils7.objectKlassEquals)(event, ClipboardEvent)) {
|
|
23195
|
+
return false;
|
|
23196
|
+
}
|
|
23197
|
+
const clipboardEvent = event;
|
|
23198
|
+
if (clipboardEvent.clipboardData === null) {
|
|
23199
|
+
return false;
|
|
23200
|
+
}
|
|
23201
|
+
const clipboardText = clipboardEvent.clipboardData.getData("text");
|
|
23202
|
+
if (!isValidUrl(clipboardText)) {
|
|
23203
|
+
return false;
|
|
23204
|
+
}
|
|
23205
|
+
if (selection.getNodes().some((node) => (0, import_lexical4.$isElementNode)(node) && !$isLinkNode(node))) {
|
|
23206
|
+
return false;
|
|
23207
|
+
}
|
|
23208
|
+
let path = clipboardText;
|
|
23209
|
+
const type = guessLinkTypeFromPath(path);
|
|
23210
|
+
if (type === "email" && path.startsWith("mailto:")) {
|
|
23211
|
+
path = path.replace("mailto:", "");
|
|
23212
|
+
} else if (type === "tel" && path.startsWith("tel:")) {
|
|
23213
|
+
path = path.replace("tel:", "");
|
|
23214
|
+
}
|
|
23215
|
+
upsertLinkNode({
|
|
23216
|
+
path,
|
|
23217
|
+
type
|
|
23218
|
+
});
|
|
23219
|
+
event.preventDefault();
|
|
23220
|
+
return true;
|
|
23221
|
+
},
|
|
23222
|
+
import_lexical4.COMMAND_PRIORITY_LOW
|
|
23114
23223
|
)
|
|
23115
23224
|
);
|
|
23116
23225
|
}, [editor, onConnectLink]);
|
|
23117
|
-
const maybeShowLinkToolbar = (0,
|
|
23226
|
+
const maybeShowLinkToolbar = (0, import_react148.useCallback)(() => {
|
|
23118
23227
|
if (!editor.isEditable()) {
|
|
23119
23228
|
return;
|
|
23120
23229
|
}
|
|
23121
|
-
const selection = (0,
|
|
23122
|
-
if (!(0,
|
|
23230
|
+
const selection = (0, import_lexical4.$getSelection)();
|
|
23231
|
+
if (!(0, import_lexical4.$isRangeSelection)(selection)) {
|
|
23123
23232
|
setLinkPopoverState(void 0);
|
|
23124
23233
|
return;
|
|
23125
23234
|
}
|
|
@@ -23148,7 +23257,7 @@ function LinkNodePlugin({
|
|
|
23148
23257
|
}
|
|
23149
23258
|
});
|
|
23150
23259
|
}, [editor, positioningAnchorEl]);
|
|
23151
|
-
(0,
|
|
23260
|
+
(0, import_react148.useEffect)(() => {
|
|
23152
23261
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
23153
23262
|
requestAnimationFrame(() => {
|
|
23154
23263
|
editorState.read(() => {
|
|
@@ -23233,13 +23342,13 @@ function getLinkAncestor(node) {
|
|
|
23233
23342
|
// src/components/ParameterInputs/rich-text/ListIndentPlugin.tsx
|
|
23234
23343
|
init_emotion_jsx_shim();
|
|
23235
23344
|
var import_list = require("@lexical/list");
|
|
23236
|
-
var
|
|
23237
|
-
var
|
|
23238
|
-
var
|
|
23239
|
-
var
|
|
23345
|
+
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
23346
|
+
var import_utils10 = require("@lexical/utils");
|
|
23347
|
+
var import_lexical5 = require("lexical");
|
|
23348
|
+
var import_react149 = require("react");
|
|
23240
23349
|
function isIndentPermitted(maxDepth) {
|
|
23241
|
-
const selection = (0,
|
|
23242
|
-
if (!(0,
|
|
23350
|
+
const selection = (0, import_lexical5.$getSelection)();
|
|
23351
|
+
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
23243
23352
|
return false;
|
|
23244
23353
|
}
|
|
23245
23354
|
const elementNodesInSelection = getElementNodesInSelection(selection);
|
|
@@ -23259,12 +23368,12 @@ function isIndentPermitted(maxDepth) {
|
|
|
23259
23368
|
}
|
|
23260
23369
|
function $isAnyOfSelectedNodesAListItemNode(selection) {
|
|
23261
23370
|
const nodes = selection.getNodes();
|
|
23262
|
-
return (0,
|
|
23371
|
+
return (0, import_utils10.$filter)(nodes, (node) => (0, import_list.$isListItemNode)(node) ? node : null).length > 0;
|
|
23263
23372
|
}
|
|
23264
23373
|
function $indentOverTab(selection) {
|
|
23265
23374
|
const nodes = selection.getNodes();
|
|
23266
|
-
const canIndentBlockNodes = (0,
|
|
23267
|
-
if ((0,
|
|
23375
|
+
const canIndentBlockNodes = (0, import_utils10.$filter)(nodes, (node) => {
|
|
23376
|
+
if ((0, import_lexical5.$isBlockElementNode)(node) && node.canIndent()) {
|
|
23268
23377
|
return node;
|
|
23269
23378
|
}
|
|
23270
23379
|
return null;
|
|
@@ -23276,13 +23385,13 @@ function $indentOverTab(selection) {
|
|
|
23276
23385
|
const focus = selection.focus;
|
|
23277
23386
|
const first = focus.isBefore(anchor) ? focus : anchor;
|
|
23278
23387
|
const firstNode = first.getNode();
|
|
23279
|
-
const firstBlock = (0,
|
|
23388
|
+
const firstBlock = (0, import_utils10.$getNearestBlockElementAncestorOrThrow)(firstNode);
|
|
23280
23389
|
if (firstBlock.canIndent()) {
|
|
23281
23390
|
const firstBlockKey = firstBlock.getKey();
|
|
23282
|
-
let selectionAtStart = (0,
|
|
23391
|
+
let selectionAtStart = (0, import_lexical5.$createRangeSelection)();
|
|
23283
23392
|
selectionAtStart.anchor.set(firstBlockKey, 0, "element");
|
|
23284
23393
|
selectionAtStart.focus.set(firstBlockKey, 0, "element");
|
|
23285
|
-
selectionAtStart = (0,
|
|
23394
|
+
selectionAtStart = (0, import_lexical5.$normalizeSelection__EXPERIMENTAL)(selectionAtStart);
|
|
23286
23395
|
if (selectionAtStart.anchor.is(first)) {
|
|
23287
23396
|
return true;
|
|
23288
23397
|
}
|
|
@@ -23290,47 +23399,47 @@ function $indentOverTab(selection) {
|
|
|
23290
23399
|
return false;
|
|
23291
23400
|
}
|
|
23292
23401
|
function ListIndentPlugin({ maxDepth }) {
|
|
23293
|
-
const [editor] = (0,
|
|
23294
|
-
const isInListItemNode = (0,
|
|
23295
|
-
(0,
|
|
23402
|
+
const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
|
|
23403
|
+
const isInListItemNode = (0, import_react149.useRef)(false);
|
|
23404
|
+
(0, import_react149.useEffect)(() => {
|
|
23296
23405
|
return editor.registerCommand(
|
|
23297
|
-
|
|
23406
|
+
import_lexical5.SELECTION_CHANGE_COMMAND,
|
|
23298
23407
|
() => {
|
|
23299
23408
|
editor.read(() => {
|
|
23300
|
-
const selection = (0,
|
|
23301
|
-
if (!(0,
|
|
23409
|
+
const selection = (0, import_lexical5.$getSelection)();
|
|
23410
|
+
if (!(0, import_lexical5.$isRangeSelection)(selection) || !selection.isCollapsed()) {
|
|
23302
23411
|
isInListItemNode.current = false;
|
|
23303
23412
|
return false;
|
|
23304
23413
|
}
|
|
23305
|
-
isInListItemNode.current = (0,
|
|
23414
|
+
isInListItemNode.current = (0, import_utils10.$getNearestNodeOfType)(selection.anchor.getNode(), import_list.ListNode) !== null;
|
|
23306
23415
|
});
|
|
23307
23416
|
return false;
|
|
23308
23417
|
},
|
|
23309
|
-
|
|
23418
|
+
import_lexical5.COMMAND_PRIORITY_NORMAL
|
|
23310
23419
|
);
|
|
23311
23420
|
}, [editor]);
|
|
23312
|
-
(0,
|
|
23313
|
-
return (0,
|
|
23421
|
+
(0, import_react149.useEffect)(() => {
|
|
23422
|
+
return (0, import_utils10.mergeRegister)(
|
|
23314
23423
|
editor.registerCommand(
|
|
23315
|
-
|
|
23424
|
+
import_lexical5.INDENT_CONTENT_COMMAND,
|
|
23316
23425
|
() => !isIndentPermitted(maxDepth),
|
|
23317
|
-
|
|
23426
|
+
import_lexical5.COMMAND_PRIORITY_CRITICAL
|
|
23318
23427
|
),
|
|
23319
23428
|
editor.registerCommand(
|
|
23320
|
-
|
|
23429
|
+
import_lexical5.KEY_TAB_COMMAND,
|
|
23321
23430
|
(event) => {
|
|
23322
|
-
const selection = (0,
|
|
23323
|
-
if (!(0,
|
|
23431
|
+
const selection = (0, import_lexical5.$getSelection)();
|
|
23432
|
+
if (!(0, import_lexical5.$isRangeSelection)(selection) || !isInListItemNode.current && !$isAnyOfSelectedNodesAListItemNode(selection)) {
|
|
23324
23433
|
return false;
|
|
23325
23434
|
}
|
|
23326
23435
|
event.preventDefault();
|
|
23327
23436
|
if ($indentOverTab(selection)) {
|
|
23328
|
-
const command = event.shiftKey ?
|
|
23437
|
+
const command = event.shiftKey ? import_lexical5.OUTDENT_CONTENT_COMMAND : import_lexical5.INDENT_CONTENT_COMMAND;
|
|
23329
23438
|
return editor.dispatchCommand(command, void 0);
|
|
23330
23439
|
}
|
|
23331
23440
|
return false;
|
|
23332
23441
|
},
|
|
23333
|
-
|
|
23442
|
+
import_lexical5.COMMAND_PRIORITY_CRITICAL
|
|
23334
23443
|
)
|
|
23335
23444
|
);
|
|
23336
23445
|
}, [editor, maxDepth]);
|
|
@@ -23339,12 +23448,12 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
23339
23448
|
|
|
23340
23449
|
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
23341
23450
|
init_emotion_jsx_shim();
|
|
23342
|
-
var
|
|
23343
|
-
var
|
|
23451
|
+
var import_react150 = require("@emotion/react");
|
|
23452
|
+
var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
|
|
23344
23453
|
var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
|
|
23345
23454
|
var import_table = require("@lexical/table");
|
|
23346
|
-
var
|
|
23347
|
-
var
|
|
23455
|
+
var import_lexical6 = require("lexical");
|
|
23456
|
+
var import_react151 = require("react");
|
|
23348
23457
|
var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
|
|
23349
23458
|
function computeSelectionCount(selection) {
|
|
23350
23459
|
const selectionShape = selection.getShape();
|
|
@@ -23353,14 +23462,14 @@ function computeSelectionCount(selection) {
|
|
|
23353
23462
|
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
23354
23463
|
};
|
|
23355
23464
|
}
|
|
23356
|
-
var tableActionMenuTrigger =
|
|
23465
|
+
var tableActionMenuTrigger = import_react150.css`
|
|
23357
23466
|
position: absolute;
|
|
23358
23467
|
transform: translate(calc(-100% - 1px), 1px);
|
|
23359
23468
|
`;
|
|
23360
|
-
var TableActionMenuTrigger = (0,
|
|
23469
|
+
var TableActionMenuTrigger = (0, import_react151.forwardRef)((props, ref) => {
|
|
23361
23470
|
const { tableCellEl, positioningAnchorEl, ...rest } = props;
|
|
23362
|
-
const [coordinates, setCoordinates] = (0,
|
|
23363
|
-
(0,
|
|
23471
|
+
const [coordinates, setCoordinates] = (0, import_react151.useState)({ x: 0, y: 0 });
|
|
23472
|
+
(0, import_react151.useLayoutEffect)(() => {
|
|
23364
23473
|
const rect = tableCellEl.getBoundingClientRect();
|
|
23365
23474
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
23366
23475
|
const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
|
|
@@ -23392,17 +23501,17 @@ function TableActionMenu({
|
|
|
23392
23501
|
tableCellEl,
|
|
23393
23502
|
positioningAnchorEl
|
|
23394
23503
|
}) {
|
|
23395
|
-
const [editor] = (0,
|
|
23396
|
-
const [tableCellNode, updateTableCellNode] = (0,
|
|
23397
|
-
const [selectionCounts, updateSelectionCounts] = (0,
|
|
23504
|
+
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23505
|
+
const [tableCellNode, updateTableCellNode] = (0, import_react151.useState)(_tableCellNode);
|
|
23506
|
+
const [selectionCounts, updateSelectionCounts] = (0, import_react151.useState)({
|
|
23398
23507
|
columns: 1,
|
|
23399
23508
|
rows: 1
|
|
23400
23509
|
});
|
|
23401
|
-
const [menuTriggerKey, setMenuTriggerKey] = (0,
|
|
23510
|
+
const [menuTriggerKey, setMenuTriggerKey] = (0, import_react151.useState)(0);
|
|
23402
23511
|
const incrementMenuTriggerKey = () => {
|
|
23403
23512
|
setMenuTriggerKey((key) => key += 1);
|
|
23404
23513
|
};
|
|
23405
|
-
(0,
|
|
23514
|
+
(0, import_react151.useEffect)(() => {
|
|
23406
23515
|
return editor.registerMutationListener(
|
|
23407
23516
|
import_table.TableCellNode,
|
|
23408
23517
|
(nodeMutations) => {
|
|
@@ -23416,15 +23525,15 @@ function TableActionMenu({
|
|
|
23416
23525
|
{ skipInitialization: true }
|
|
23417
23526
|
);
|
|
23418
23527
|
}, [editor, tableCellNode]);
|
|
23419
|
-
(0,
|
|
23528
|
+
(0, import_react151.useEffect)(() => {
|
|
23420
23529
|
editor.getEditorState().read(() => {
|
|
23421
|
-
const selection = (0,
|
|
23530
|
+
const selection = (0, import_lexical6.$getSelection)();
|
|
23422
23531
|
if ((0, import_table.$isTableSelection)(selection)) {
|
|
23423
23532
|
updateSelectionCounts(computeSelectionCount(selection));
|
|
23424
23533
|
}
|
|
23425
23534
|
});
|
|
23426
23535
|
}, [editor]);
|
|
23427
|
-
const clearTableSelection = (0,
|
|
23536
|
+
const clearTableSelection = (0, import_react151.useCallback)(() => {
|
|
23428
23537
|
editor.update(() => {
|
|
23429
23538
|
if (tableCellNode.isAttached()) {
|
|
23430
23539
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
@@ -23441,11 +23550,11 @@ function TableActionMenu({
|
|
|
23441
23550
|
tableNode.markDirty();
|
|
23442
23551
|
updateTableCellNode(tableCellNode.getLatest());
|
|
23443
23552
|
}
|
|
23444
|
-
const rootNode = (0,
|
|
23553
|
+
const rootNode = (0, import_lexical6.$getRoot)();
|
|
23445
23554
|
rootNode.selectStart();
|
|
23446
23555
|
});
|
|
23447
23556
|
}, [editor, tableCellNode]);
|
|
23448
|
-
const insertTableRowAtSelection = (0,
|
|
23557
|
+
const insertTableRowAtSelection = (0, import_react151.useCallback)(
|
|
23449
23558
|
(shouldInsertAfter) => {
|
|
23450
23559
|
editor.update(() => {
|
|
23451
23560
|
(0, import_table.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
|
|
@@ -23454,7 +23563,7 @@ function TableActionMenu({
|
|
|
23454
23563
|
},
|
|
23455
23564
|
[editor]
|
|
23456
23565
|
);
|
|
23457
|
-
const insertTableColumnAtSelection = (0,
|
|
23566
|
+
const insertTableColumnAtSelection = (0, import_react151.useCallback)(
|
|
23458
23567
|
(shouldInsertAfter) => {
|
|
23459
23568
|
editor.update(() => {
|
|
23460
23569
|
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
@@ -23465,26 +23574,26 @@ function TableActionMenu({
|
|
|
23465
23574
|
},
|
|
23466
23575
|
[editor, selectionCounts.columns]
|
|
23467
23576
|
);
|
|
23468
|
-
const deleteTableRowAtSelection = (0,
|
|
23577
|
+
const deleteTableRowAtSelection = (0, import_react151.useCallback)(() => {
|
|
23469
23578
|
editor.update(() => {
|
|
23470
23579
|
(0, import_table.$deleteTableRow__EXPERIMENTAL)();
|
|
23471
23580
|
});
|
|
23472
23581
|
incrementMenuTriggerKey();
|
|
23473
23582
|
}, [editor]);
|
|
23474
|
-
const deleteTableAtSelection = (0,
|
|
23583
|
+
const deleteTableAtSelection = (0, import_react151.useCallback)(() => {
|
|
23475
23584
|
editor.update(() => {
|
|
23476
23585
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23477
23586
|
tableNode.remove();
|
|
23478
23587
|
clearTableSelection();
|
|
23479
23588
|
});
|
|
23480
23589
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
23481
|
-
const deleteTableColumnAtSelection = (0,
|
|
23590
|
+
const deleteTableColumnAtSelection = (0, import_react151.useCallback)(() => {
|
|
23482
23591
|
editor.update(() => {
|
|
23483
23592
|
(0, import_table.$deleteTableColumn__EXPERIMENTAL)();
|
|
23484
23593
|
});
|
|
23485
23594
|
incrementMenuTriggerKey();
|
|
23486
23595
|
}, [editor]);
|
|
23487
|
-
const toggleTableRowIsHeader = (0,
|
|
23596
|
+
const toggleTableRowIsHeader = (0, import_react151.useCallback)(() => {
|
|
23488
23597
|
editor.update(() => {
|
|
23489
23598
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23490
23599
|
const tableRowIndex = (0, import_table.$getTableRowIndexFromTableCellNode)(tableCellNode);
|
|
@@ -23505,7 +23614,7 @@ function TableActionMenu({
|
|
|
23505
23614
|
clearTableSelection();
|
|
23506
23615
|
});
|
|
23507
23616
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
23508
|
-
const toggleTableColumnIsHeader = (0,
|
|
23617
|
+
const toggleTableColumnIsHeader = (0, import_react151.useCallback)(() => {
|
|
23509
23618
|
editor.update(() => {
|
|
23510
23619
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23511
23620
|
const tableColumnIndex = (0, import_table.$getTableColumnIndexFromTableCellNode)(tableCellNode);
|
|
@@ -23532,7 +23641,7 @@ function TableActionMenu({
|
|
|
23532
23641
|
clearTableSelection();
|
|
23533
23642
|
});
|
|
23534
23643
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
23535
|
-
const menuItemCss = (0,
|
|
23644
|
+
const menuItemCss = (0, import_react150.css)({
|
|
23536
23645
|
fontSize: "var(--fs-sm)"
|
|
23537
23646
|
});
|
|
23538
23647
|
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
|
|
@@ -23602,11 +23711,11 @@ function TableCellActionMenuContainer({
|
|
|
23602
23711
|
menuPortalEl,
|
|
23603
23712
|
positioningAnchorEl
|
|
23604
23713
|
}) {
|
|
23605
|
-
const [editor] = (0,
|
|
23606
|
-
const [tableCellNode, setTableMenuCellNode] = (0,
|
|
23607
|
-
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0,
|
|
23608
|
-
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0,
|
|
23609
|
-
(0,
|
|
23714
|
+
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23715
|
+
const [tableCellNode, setTableMenuCellNode] = (0, import_react151.useState)(null);
|
|
23716
|
+
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react151.useState)(null);
|
|
23717
|
+
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react151.useState)(null);
|
|
23718
|
+
(0, import_react151.useEffect)(() => {
|
|
23610
23719
|
const newPortalEl = document.createElement("div");
|
|
23611
23720
|
setTableMenuCellMenuPortalEl(newPortalEl);
|
|
23612
23721
|
menuPortalEl.appendChild(newPortalEl);
|
|
@@ -23614,15 +23723,15 @@ function TableCellActionMenuContainer({
|
|
|
23614
23723
|
newPortalEl.remove();
|
|
23615
23724
|
};
|
|
23616
23725
|
}, [menuPortalEl]);
|
|
23617
|
-
const setTableMenuCellNodeElem = (0,
|
|
23726
|
+
const setTableMenuCellNodeElem = (0, import_react151.useCallback)((elem) => {
|
|
23618
23727
|
if (elem) {
|
|
23619
23728
|
_setTableMenuCellNodeEl(elem);
|
|
23620
23729
|
} else {
|
|
23621
23730
|
_setTableMenuCellNodeEl(null);
|
|
23622
23731
|
}
|
|
23623
23732
|
}, []);
|
|
23624
|
-
const $moveMenu = (0,
|
|
23625
|
-
const selection = (0,
|
|
23733
|
+
const $moveMenu = (0, import_react151.useCallback)(() => {
|
|
23734
|
+
const selection = (0, import_lexical6.$getSelection)();
|
|
23626
23735
|
const nativeSelection = window.getSelection();
|
|
23627
23736
|
const activeElement = document.activeElement;
|
|
23628
23737
|
if (selection == null) {
|
|
@@ -23630,7 +23739,7 @@ function TableCellActionMenuContainer({
|
|
|
23630
23739
|
return;
|
|
23631
23740
|
}
|
|
23632
23741
|
const rootElement = editor.getRootElement();
|
|
23633
|
-
if ((0,
|
|
23742
|
+
if ((0, import_lexical6.$isRangeSelection)(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
|
|
23634
23743
|
const tableCellNodeFromSelection = (0, import_table.$getTableCellNodeFromLexicalNode)(selection.anchor.getNode());
|
|
23635
23744
|
if (tableCellNodeFromSelection == null) {
|
|
23636
23745
|
setTableMenuCellNode(null);
|
|
@@ -23650,7 +23759,7 @@ function TableCellActionMenuContainer({
|
|
|
23650
23759
|
setTableMenuCellNodeElem(null);
|
|
23651
23760
|
}
|
|
23652
23761
|
}, [editor, setTableMenuCellNodeElem]);
|
|
23653
|
-
(0,
|
|
23762
|
+
(0, import_react151.useEffect)(() => {
|
|
23654
23763
|
return editor.registerUpdateListener(() => {
|
|
23655
23764
|
editor.getEditorState().read(() => {
|
|
23656
23765
|
$moveMenu();
|
|
@@ -23678,18 +23787,18 @@ function TableActionMenuPlugin({
|
|
|
23678
23787
|
|
|
23679
23788
|
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
23680
23789
|
init_emotion_jsx_shim();
|
|
23681
|
-
var
|
|
23682
|
-
var
|
|
23790
|
+
var import_react152 = require("@emotion/react");
|
|
23791
|
+
var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
|
|
23683
23792
|
var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
|
|
23684
23793
|
var import_table2 = require("@lexical/table");
|
|
23685
|
-
var
|
|
23686
|
-
var
|
|
23687
|
-
var
|
|
23794
|
+
var import_utils12 = require("@lexical/utils");
|
|
23795
|
+
var import_lexical7 = require("lexical");
|
|
23796
|
+
var import_react153 = require("react");
|
|
23688
23797
|
var import_react_dom3 = require("react-dom");
|
|
23689
23798
|
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
23690
23799
|
var MIN_ROW_HEIGHT = 33;
|
|
23691
23800
|
var MIN_COLUMN_WIDTH = 50;
|
|
23692
|
-
var tableResizer =
|
|
23801
|
+
var tableResizer = import_react152.css`
|
|
23693
23802
|
position: absolute;
|
|
23694
23803
|
z-index: var(--z-10);
|
|
23695
23804
|
`;
|
|
@@ -23711,15 +23820,15 @@ var fixedGetDOMCellFromTarget = (node) => {
|
|
|
23711
23820
|
return null;
|
|
23712
23821
|
};
|
|
23713
23822
|
function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
23714
|
-
const targetRef = (0,
|
|
23715
|
-
const resizerRef = (0,
|
|
23716
|
-
const tableRectRef = (0,
|
|
23717
|
-
const mouseStartPosRef = (0,
|
|
23718
|
-
const [mouseCurrentPos, updateMouseCurrentPos] = (0,
|
|
23719
|
-
const [activeCell, updateActiveCell] = (0,
|
|
23720
|
-
const [isMouseDown, updateIsMouseDown] = (0,
|
|
23721
|
-
const [draggingDirection, updateDraggingDirection] = (0,
|
|
23722
|
-
const resetState = (0,
|
|
23823
|
+
const targetRef = (0, import_react153.useRef)(null);
|
|
23824
|
+
const resizerRef = (0, import_react153.useRef)(null);
|
|
23825
|
+
const tableRectRef = (0, import_react153.useRef)(null);
|
|
23826
|
+
const mouseStartPosRef = (0, import_react153.useRef)(null);
|
|
23827
|
+
const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react153.useState)(null);
|
|
23828
|
+
const [activeCell, updateActiveCell] = (0, import_react153.useState)(null);
|
|
23829
|
+
const [isMouseDown, updateIsMouseDown] = (0, import_react153.useState)(false);
|
|
23830
|
+
const [draggingDirection, updateDraggingDirection] = (0, import_react153.useState)(null);
|
|
23831
|
+
const resetState = (0, import_react153.useCallback)(() => {
|
|
23723
23832
|
updateActiveCell(null);
|
|
23724
23833
|
targetRef.current = null;
|
|
23725
23834
|
updateDraggingDirection(null);
|
|
@@ -23729,7 +23838,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
23729
23838
|
const isMouseDownOnEvent = (event) => {
|
|
23730
23839
|
return (event.buttons & 1) === 1;
|
|
23731
23840
|
};
|
|
23732
|
-
(0,
|
|
23841
|
+
(0, import_react153.useEffect)(() => {
|
|
23733
23842
|
const onMouseMove = (event) => {
|
|
23734
23843
|
setTimeout(() => {
|
|
23735
23844
|
const target = event.target;
|
|
@@ -23749,7 +23858,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
23749
23858
|
const cell2 = fixedGetDOMCellFromTarget(target);
|
|
23750
23859
|
if (cell2 && activeCell !== cell2) {
|
|
23751
23860
|
editor.update(() => {
|
|
23752
|
-
const tableCellNode = (0,
|
|
23861
|
+
const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(cell2.elem);
|
|
23753
23862
|
if (!tableCellNode) {
|
|
23754
23863
|
throw new Error("TableCellResizer: Table cell node not found.");
|
|
23755
23864
|
}
|
|
@@ -23796,14 +23905,14 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
23796
23905
|
}
|
|
23797
23906
|
return false;
|
|
23798
23907
|
};
|
|
23799
|
-
const updateRowHeight = (0,
|
|
23908
|
+
const updateRowHeight = (0, import_react153.useCallback)(
|
|
23800
23909
|
(heightChange) => {
|
|
23801
23910
|
if (!activeCell) {
|
|
23802
23911
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
23803
23912
|
}
|
|
23804
23913
|
editor.update(
|
|
23805
23914
|
() => {
|
|
23806
|
-
const tableCellNode = (0,
|
|
23915
|
+
const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
|
|
23807
23916
|
if (!(0, import_table2.$isTableCellNode)(tableCellNode)) {
|
|
23808
23917
|
throw new Error("TableCellResizer: Table cell node not found.");
|
|
23809
23918
|
}
|
|
@@ -23858,14 +23967,14 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
23858
23967
|
}
|
|
23859
23968
|
}
|
|
23860
23969
|
};
|
|
23861
|
-
const updateColumnWidth = (0,
|
|
23970
|
+
const updateColumnWidth = (0, import_react153.useCallback)(
|
|
23862
23971
|
(widthChange) => {
|
|
23863
23972
|
if (!activeCell) {
|
|
23864
23973
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
23865
23974
|
}
|
|
23866
23975
|
editor.update(
|
|
23867
23976
|
() => {
|
|
23868
|
-
const tableCellNode = (0,
|
|
23977
|
+
const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
|
|
23869
23978
|
if (!(0, import_table2.$isTableCellNode)(tableCellNode)) {
|
|
23870
23979
|
throw new Error("TableCellResizer: Table cell node not found.");
|
|
23871
23980
|
}
|
|
@@ -23892,7 +24001,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
23892
24001
|
},
|
|
23893
24002
|
[activeCell, editor]
|
|
23894
24003
|
);
|
|
23895
|
-
const mouseUpHandler = (0,
|
|
24004
|
+
const mouseUpHandler = (0, import_react153.useCallback)(
|
|
23896
24005
|
(direction) => {
|
|
23897
24006
|
const handler = (event) => {
|
|
23898
24007
|
event.preventDefault();
|
|
@@ -23905,7 +24014,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
23905
24014
|
if (activeCell === null) {
|
|
23906
24015
|
return;
|
|
23907
24016
|
}
|
|
23908
|
-
const zoom = (0,
|
|
24017
|
+
const zoom = (0, import_utils12.calculateZoomLevel)(event.target);
|
|
23909
24018
|
if (isHeightChanging(direction)) {
|
|
23910
24019
|
const heightChange = (event.clientY - y) / zoom;
|
|
23911
24020
|
updateRowHeight(heightChange);
|
|
@@ -23921,7 +24030,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
23921
24030
|
},
|
|
23922
24031
|
[activeCell, resetState, updateColumnWidth, updateRowHeight]
|
|
23923
24032
|
);
|
|
23924
|
-
const toggleResize = (0,
|
|
24033
|
+
const toggleResize = (0, import_react153.useCallback)(
|
|
23925
24034
|
(direction) => (event) => {
|
|
23926
24035
|
event.preventDefault();
|
|
23927
24036
|
event.stopPropagation();
|
|
@@ -23938,11 +24047,11 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
23938
24047
|
},
|
|
23939
24048
|
[activeCell, mouseUpHandler]
|
|
23940
24049
|
);
|
|
23941
|
-
const getResizers = (0,
|
|
24050
|
+
const getResizers = (0, import_react153.useCallback)(() => {
|
|
23942
24051
|
if (activeCell) {
|
|
23943
24052
|
const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
|
|
23944
24053
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
23945
|
-
const zoom = (0,
|
|
24054
|
+
const zoom = (0, import_utils12.calculateZoomLevel)(activeCell.elem);
|
|
23946
24055
|
const zoneWidth = 10;
|
|
23947
24056
|
const styles = {
|
|
23948
24057
|
bottom: {
|
|
@@ -24007,9 +24116,9 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
24007
24116
|
] }) });
|
|
24008
24117
|
}
|
|
24009
24118
|
function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
24010
|
-
const [editor] = (0,
|
|
24119
|
+
const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
|
|
24011
24120
|
const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
|
|
24012
|
-
return (0,
|
|
24121
|
+
return (0, import_react153.useMemo)(
|
|
24013
24122
|
() => isEditable ? (0, import_react_dom3.createPortal)(
|
|
24014
24123
|
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
|
|
24015
24124
|
positioningAnchorEl
|
|
@@ -24020,20 +24129,20 @@ function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
|
24020
24129
|
|
|
24021
24130
|
// src/components/ParameterInputs/rich-text/TableSelectionPlugin.tsx
|
|
24022
24131
|
init_emotion_jsx_shim();
|
|
24023
|
-
var
|
|
24132
|
+
var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
|
|
24024
24133
|
var import_table3 = require("@lexical/table");
|
|
24025
|
-
var
|
|
24026
|
-
var
|
|
24134
|
+
var import_lexical8 = require("lexical");
|
|
24135
|
+
var import_react154 = require("react");
|
|
24027
24136
|
var TableSelectionPlugin = () => {
|
|
24028
|
-
const [editor] = (0,
|
|
24029
|
-
const [closestTableCellNode, setClosestTableCellNode] = (0,
|
|
24030
|
-
(0,
|
|
24137
|
+
const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
|
|
24138
|
+
const [closestTableCellNode, setClosestTableCellNode] = (0, import_react154.useState)(null);
|
|
24139
|
+
(0, import_react154.useEffect)(() => {
|
|
24031
24140
|
return editor.registerCommand(
|
|
24032
|
-
|
|
24141
|
+
import_lexical8.SELECTION_CHANGE_COMMAND,
|
|
24033
24142
|
() => {
|
|
24034
24143
|
editor.read(() => {
|
|
24035
|
-
const selection = (0,
|
|
24036
|
-
if (!(0,
|
|
24144
|
+
const selection = (0, import_lexical8.$getSelection)();
|
|
24145
|
+
if (!(0, import_lexical8.$isRangeSelection)(selection) || !selection.isCollapsed()) {
|
|
24037
24146
|
setClosestTableCellNode(null);
|
|
24038
24147
|
return false;
|
|
24039
24148
|
}
|
|
@@ -24046,10 +24155,10 @@ var TableSelectionPlugin = () => {
|
|
|
24046
24155
|
});
|
|
24047
24156
|
return false;
|
|
24048
24157
|
},
|
|
24049
|
-
|
|
24158
|
+
import_lexical8.COMMAND_PRIORITY_NORMAL
|
|
24050
24159
|
);
|
|
24051
24160
|
}, [editor]);
|
|
24052
|
-
(0,
|
|
24161
|
+
(0, import_react154.useEffect)(() => {
|
|
24053
24162
|
const onControlA = (event) => {
|
|
24054
24163
|
if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
|
|
24055
24164
|
if (!closestTableCellNode) {
|
|
@@ -24058,7 +24167,7 @@ var TableSelectionPlugin = () => {
|
|
|
24058
24167
|
event.preventDefault();
|
|
24059
24168
|
editor.update(() => {
|
|
24060
24169
|
const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
|
|
24061
|
-
(0,
|
|
24170
|
+
(0, import_lexical8.$setSelection)(selection);
|
|
24062
24171
|
});
|
|
24063
24172
|
}
|
|
24064
24173
|
};
|
|
@@ -24073,16 +24182,16 @@ var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
|
24073
24182
|
|
|
24074
24183
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
24075
24184
|
init_emotion_jsx_shim();
|
|
24076
|
-
var
|
|
24185
|
+
var import_react156 = require("@emotion/react");
|
|
24077
24186
|
var import_code2 = require("@lexical/code");
|
|
24078
24187
|
var import_list2 = require("@lexical/list");
|
|
24079
|
-
var
|
|
24188
|
+
var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
|
|
24080
24189
|
var import_rich_text = require("@lexical/rich-text");
|
|
24081
24190
|
var import_selection2 = require("@lexical/selection");
|
|
24082
24191
|
var import_table4 = require("@lexical/table");
|
|
24083
|
-
var
|
|
24084
|
-
var
|
|
24085
|
-
var
|
|
24192
|
+
var import_utils13 = require("@lexical/utils");
|
|
24193
|
+
var import_lexical9 = require("lexical");
|
|
24194
|
+
var import_react157 = require("react");
|
|
24086
24195
|
|
|
24087
24196
|
// src/components/ParameterInputs/rich-text/toolbar/constants.ts
|
|
24088
24197
|
init_emotion_jsx_shim();
|
|
@@ -24100,29 +24209,29 @@ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
|
24100
24209
|
|
|
24101
24210
|
// src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
|
|
24102
24211
|
init_emotion_jsx_shim();
|
|
24103
|
-
var
|
|
24212
|
+
var import_react155 = require("react");
|
|
24104
24213
|
var useRichTextToolbarState = ({ config }) => {
|
|
24105
24214
|
var _a;
|
|
24106
|
-
const enabledBuiltInFormats = (0,
|
|
24215
|
+
const enabledBuiltInFormats = (0, import_react155.useMemo)(() => {
|
|
24107
24216
|
return richTextBuiltInFormats.filter((format) => {
|
|
24108
24217
|
var _a2, _b;
|
|
24109
24218
|
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
24110
24219
|
});
|
|
24111
24220
|
}, [config]);
|
|
24112
|
-
const enabledBuiltInElements = (0,
|
|
24221
|
+
const enabledBuiltInElements = (0, import_react155.useMemo)(() => {
|
|
24113
24222
|
return richTextBuiltInElements.filter((element) => {
|
|
24114
24223
|
var _a2, _b;
|
|
24115
24224
|
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
24116
24225
|
});
|
|
24117
24226
|
}, [config]);
|
|
24118
|
-
const enabledBuiltInFormatsWithIcon = (0,
|
|
24227
|
+
const enabledBuiltInFormatsWithIcon = (0, import_react155.useMemo)(() => {
|
|
24119
24228
|
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
24120
24229
|
}, [enabledBuiltInFormats]);
|
|
24121
24230
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
24122
24231
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
24123
24232
|
);
|
|
24124
|
-
const [activeFormats, setActiveFormats] = (0,
|
|
24125
|
-
const visibleFormatsWithIcon = (0,
|
|
24233
|
+
const [activeFormats, setActiveFormats] = (0, import_react155.useState)([]);
|
|
24234
|
+
const visibleFormatsWithIcon = (0, import_react155.useMemo)(() => {
|
|
24126
24235
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
24127
24236
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
24128
24237
|
visibleFormats.add(type);
|
|
@@ -24132,7 +24241,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
24132
24241
|
});
|
|
24133
24242
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
24134
24243
|
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
24135
|
-
const visibleFormatsWithoutIcon = (0,
|
|
24244
|
+
const visibleFormatsWithoutIcon = (0, import_react155.useMemo)(() => {
|
|
24136
24245
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
24137
24246
|
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
24138
24247
|
visibleFormats.add(type);
|
|
@@ -24142,11 +24251,11 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
24142
24251
|
});
|
|
24143
24252
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
24144
24253
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
24145
|
-
const [activeElement, setActiveElement] = (0,
|
|
24254
|
+
const [activeElement, setActiveElement] = (0, import_react155.useState)("paragraph");
|
|
24146
24255
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
24147
24256
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
24148
24257
|
);
|
|
24149
|
-
const visibleTextualElements = (0,
|
|
24258
|
+
const visibleTextualElements = (0, import_react155.useMemo)(() => {
|
|
24150
24259
|
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
24151
24260
|
return enabledTextualElements;
|
|
24152
24261
|
}
|
|
@@ -24157,30 +24266,30 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
24157
24266
|
}
|
|
24158
24267
|
);
|
|
24159
24268
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
24160
|
-
const [isLink, setIsLink] = (0,
|
|
24161
|
-
const linkElementVisible = (0,
|
|
24269
|
+
const [isLink, setIsLink] = (0, import_react155.useState)(false);
|
|
24270
|
+
const linkElementVisible = (0, import_react155.useMemo)(() => {
|
|
24162
24271
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
24163
24272
|
}, [isLink, enabledBuiltInElements]);
|
|
24164
|
-
const visibleLists = (0,
|
|
24273
|
+
const visibleLists = (0, import_react155.useMemo)(() => {
|
|
24165
24274
|
return new Set(
|
|
24166
24275
|
["orderedList", "unorderedList"].filter(
|
|
24167
24276
|
(type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
|
|
24168
24277
|
)
|
|
24169
24278
|
);
|
|
24170
24279
|
}, [activeElement, enabledBuiltInElements]);
|
|
24171
|
-
const quoteElementVisible = (0,
|
|
24280
|
+
const quoteElementVisible = (0, import_react155.useMemo)(() => {
|
|
24172
24281
|
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
24173
24282
|
}, [activeElement, enabledBuiltInElements]);
|
|
24174
|
-
const codeElementVisible = (0,
|
|
24283
|
+
const codeElementVisible = (0, import_react155.useMemo)(() => {
|
|
24175
24284
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
24176
24285
|
}, [activeElement, enabledBuiltInElements]);
|
|
24177
|
-
const tableElementVisible = (0,
|
|
24286
|
+
const tableElementVisible = (0, import_react155.useMemo)(() => {
|
|
24178
24287
|
return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
|
|
24179
24288
|
}, [activeElement, enabledBuiltInElements]);
|
|
24180
|
-
const assetElementVisible = (0,
|
|
24289
|
+
const assetElementVisible = (0, import_react155.useMemo)(() => {
|
|
24181
24290
|
return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
|
|
24182
24291
|
}, [activeElement, enabledBuiltInElements]);
|
|
24183
|
-
const visibleElementsWithIcons = (0,
|
|
24292
|
+
const visibleElementsWithIcons = (0, import_react155.useMemo)(() => {
|
|
24184
24293
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
24185
24294
|
if (linkElementVisible) {
|
|
24186
24295
|
visibleElements.add("link");
|
|
@@ -24192,7 +24301,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
24192
24301
|
}
|
|
24193
24302
|
return visibleElements;
|
|
24194
24303
|
}, [linkElementVisible, visibleLists]);
|
|
24195
|
-
const visibleInsertElementsWithIcons = (0,
|
|
24304
|
+
const visibleInsertElementsWithIcons = (0, import_react155.useMemo)(() => {
|
|
24196
24305
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
24197
24306
|
if (quoteElementVisible) {
|
|
24198
24307
|
visibleElements.add("quote");
|
|
@@ -24231,7 +24340,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
24231
24340
|
|
|
24232
24341
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
24233
24342
|
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
24234
|
-
var toolbar =
|
|
24343
|
+
var toolbar = import_react156.css`
|
|
24235
24344
|
${scrollbarStyles}
|
|
24236
24345
|
background: var(--gray-50);
|
|
24237
24346
|
border-radius: var(--rounded-base);
|
|
@@ -24245,7 +24354,7 @@ var toolbar = import_react155.css`
|
|
|
24245
24354
|
top: calc(var(--spacing-sm) * -2);
|
|
24246
24355
|
z-index: 10;
|
|
24247
24356
|
`;
|
|
24248
|
-
var toolbarGroup =
|
|
24357
|
+
var toolbarGroup = import_react156.css`
|
|
24249
24358
|
display: flex;
|
|
24250
24359
|
flex-shrink: 0;
|
|
24251
24360
|
gap: var(--spacing-xs);
|
|
@@ -24262,7 +24371,7 @@ var toolbarGroup = import_react155.css`
|
|
|
24262
24371
|
width: 1px;
|
|
24263
24372
|
}
|
|
24264
24373
|
`;
|
|
24265
|
-
var richTextToolbarButton =
|
|
24374
|
+
var richTextToolbarButton = import_react156.css`
|
|
24266
24375
|
align-items: center;
|
|
24267
24376
|
appearance: none;
|
|
24268
24377
|
border: 0;
|
|
@@ -24276,24 +24385,24 @@ var richTextToolbarButton = import_react155.css`
|
|
|
24276
24385
|
min-width: 32px;
|
|
24277
24386
|
padding: 0 var(--spacing-sm);
|
|
24278
24387
|
`;
|
|
24279
|
-
var richTextToolbarButtonActive =
|
|
24388
|
+
var richTextToolbarButtonActive = import_react156.css`
|
|
24280
24389
|
background: var(--gray-200);
|
|
24281
24390
|
`;
|
|
24282
|
-
var textStyleButton =
|
|
24391
|
+
var textStyleButton = import_react156.css`
|
|
24283
24392
|
justify-content: space-between;
|
|
24284
24393
|
min-width: 7rem;
|
|
24285
24394
|
`;
|
|
24286
|
-
var toolbarIcon =
|
|
24395
|
+
var toolbarIcon = import_react156.css`
|
|
24287
24396
|
color: inherit;
|
|
24288
24397
|
`;
|
|
24289
|
-
var toolbarChevron =
|
|
24398
|
+
var toolbarChevron = import_react156.css`
|
|
24290
24399
|
margin-left: var(--spacing-xs);
|
|
24291
24400
|
`;
|
|
24292
24401
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
24293
24402
|
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
24294
24403
|
};
|
|
24295
24404
|
var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
|
|
24296
|
-
const [editor] = (0,
|
|
24405
|
+
const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
|
|
24297
24406
|
const {
|
|
24298
24407
|
activeElement,
|
|
24299
24408
|
setActiveElement,
|
|
@@ -24319,11 +24428,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
24319
24428
|
}
|
|
24320
24429
|
editor.focus(() => {
|
|
24321
24430
|
editor.update(() => {
|
|
24322
|
-
const selection = (0,
|
|
24431
|
+
const selection = (0, import_lexical9.$getSelection)();
|
|
24323
24432
|
if (HEADING_ELEMENTS.includes(type)) {
|
|
24324
24433
|
(0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
|
|
24325
24434
|
} else if (type === "paragraph") {
|
|
24326
|
-
(0, import_selection2.$setBlocksType)(selection, () => (0,
|
|
24435
|
+
(0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical9.$createParagraphNode)());
|
|
24327
24436
|
} else if (type === "quote") {
|
|
24328
24437
|
(0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createQuoteNode)());
|
|
24329
24438
|
} else if (type === "code") {
|
|
@@ -24336,7 +24445,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
24336
24445
|
const { rows, columns } = dimensions;
|
|
24337
24446
|
editor.focus(() => {
|
|
24338
24447
|
editor.update(() => {
|
|
24339
|
-
(0,
|
|
24448
|
+
(0, import_lexical9.$insertNodes)([(0, import_table4.$createTableNodeWithDimensions)(rows, columns, false)]);
|
|
24340
24449
|
});
|
|
24341
24450
|
});
|
|
24342
24451
|
});
|
|
@@ -24346,9 +24455,9 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
24346
24455
|
});
|
|
24347
24456
|
});
|
|
24348
24457
|
};
|
|
24349
|
-
const updateToolbar = (0,
|
|
24350
|
-
const selection = (0,
|
|
24351
|
-
if (!(0,
|
|
24458
|
+
const updateToolbar = (0, import_react157.useCallback)(() => {
|
|
24459
|
+
const selection = (0, import_lexical9.$getSelection)();
|
|
24460
|
+
if (!(0, import_lexical9.$isRangeSelection)(selection)) {
|
|
24352
24461
|
return;
|
|
24353
24462
|
}
|
|
24354
24463
|
const newActiveFormats = [];
|
|
@@ -24359,9 +24468,9 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
24359
24468
|
}
|
|
24360
24469
|
setActiveFormats(newActiveFormats);
|
|
24361
24470
|
const anchorNode = selection.anchor.getNode();
|
|
24362
|
-
let element = anchorNode.getKey() === "root" ? anchorNode : (0,
|
|
24471
|
+
let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils13.$findMatchingParent)(anchorNode, (e) => {
|
|
24363
24472
|
const parent = e.getParent();
|
|
24364
|
-
return parent !== null && (0,
|
|
24473
|
+
return parent !== null && (0, import_lexical9.$isRootOrShadowRoot)(parent);
|
|
24365
24474
|
});
|
|
24366
24475
|
if (element === null) {
|
|
24367
24476
|
element = anchorNode.getTopLevelElementOrThrow();
|
|
@@ -24370,7 +24479,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
24370
24479
|
const elementDOM = editor.getElementByKey(elementKey);
|
|
24371
24480
|
if (elementDOM !== null) {
|
|
24372
24481
|
if ((0, import_list2.$isListNode)(element)) {
|
|
24373
|
-
const parentList = (0,
|
|
24482
|
+
const parentList = (0, import_utils13.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
|
|
24374
24483
|
const type = parentList ? parentList.getListType() : element.getListType();
|
|
24375
24484
|
setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
|
|
24376
24485
|
} else {
|
|
@@ -24385,17 +24494,17 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
24385
24494
|
setIsLink(false);
|
|
24386
24495
|
}
|
|
24387
24496
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
24388
|
-
(0,
|
|
24497
|
+
(0, import_react157.useEffect)(() => {
|
|
24389
24498
|
return editor.registerCommand(
|
|
24390
|
-
|
|
24499
|
+
import_lexical9.SELECTION_CHANGE_COMMAND,
|
|
24391
24500
|
(_payload) => {
|
|
24392
24501
|
updateToolbar();
|
|
24393
24502
|
return false;
|
|
24394
24503
|
},
|
|
24395
|
-
|
|
24504
|
+
import_lexical9.COMMAND_PRIORITY_CRITICAL
|
|
24396
24505
|
);
|
|
24397
24506
|
}, [editor, updateToolbar]);
|
|
24398
|
-
(0,
|
|
24507
|
+
(0, import_react157.useEffect)(() => {
|
|
24399
24508
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
24400
24509
|
requestAnimationFrame(() => {
|
|
24401
24510
|
editorState.read(() => {
|
|
@@ -24440,7 +24549,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
24440
24549
|
"button",
|
|
24441
24550
|
{
|
|
24442
24551
|
onClick: () => {
|
|
24443
|
-
editor.dispatchCommand(
|
|
24552
|
+
editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, format.type);
|
|
24444
24553
|
},
|
|
24445
24554
|
css: [
|
|
24446
24555
|
richTextToolbarButton,
|
|
@@ -24459,7 +24568,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
24459
24568
|
MenuItem,
|
|
24460
24569
|
{
|
|
24461
24570
|
onClick: () => {
|
|
24462
|
-
editor.dispatchCommand(
|
|
24571
|
+
editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, format.type);
|
|
24463
24572
|
},
|
|
24464
24573
|
children: format.label
|
|
24465
24574
|
},
|
|
@@ -24636,7 +24745,7 @@ var ParameterRichText = ({
|
|
|
24636
24745
|
}
|
|
24637
24746
|
);
|
|
24638
24747
|
};
|
|
24639
|
-
var editorContainerWrapper =
|
|
24748
|
+
var editorContainerWrapper = import_react158.css`
|
|
24640
24749
|
position: relative;
|
|
24641
24750
|
|
|
24642
24751
|
&::before {
|
|
@@ -24652,12 +24761,12 @@ var editorContainerWrapper = import_react157.css`
|
|
|
24652
24761
|
z-index: 2;
|
|
24653
24762
|
}
|
|
24654
24763
|
`;
|
|
24655
|
-
var editorWrapper =
|
|
24764
|
+
var editorWrapper = import_react158.css`
|
|
24656
24765
|
display: flex;
|
|
24657
24766
|
flex-flow: column;
|
|
24658
24767
|
flex-grow: 1;
|
|
24659
24768
|
`;
|
|
24660
|
-
var editorContainer =
|
|
24769
|
+
var editorContainer = import_react158.css`
|
|
24661
24770
|
${scrollbarStyles}
|
|
24662
24771
|
background: var(--white);
|
|
24663
24772
|
border-radius: var(--rounded-sm);
|
|
@@ -24669,7 +24778,7 @@ var editorContainer = import_react157.css`
|
|
|
24669
24778
|
font-size: var(--fs-base);
|
|
24670
24779
|
height: max-content;
|
|
24671
24780
|
line-height: 1.2;
|
|
24672
|
-
max-height:
|
|
24781
|
+
max-height: 320px;
|
|
24673
24782
|
min-height: 50px;
|
|
24674
24783
|
overflow-y: auto;
|
|
24675
24784
|
padding: var(--spacing-sm);
|
|
@@ -24689,7 +24798,7 @@ var editorContainer = import_react157.css`
|
|
|
24689
24798
|
max-height: unset;
|
|
24690
24799
|
}
|
|
24691
24800
|
`;
|
|
24692
|
-
var editorContainerOverflowWrapper =
|
|
24801
|
+
var editorContainerOverflowWrapper = import_react158.css`
|
|
24693
24802
|
overflow: hidden;
|
|
24694
24803
|
pointer-events: none;
|
|
24695
24804
|
|
|
@@ -24697,7 +24806,7 @@ var editorContainerOverflowWrapper = import_react157.css`
|
|
|
24697
24806
|
pointer-events: auto;
|
|
24698
24807
|
}
|
|
24699
24808
|
`;
|
|
24700
|
-
var editorPlaceholder =
|
|
24809
|
+
var editorPlaceholder = import_react158.css`
|
|
24701
24810
|
color: var(--gray-500);
|
|
24702
24811
|
font-style: italic;
|
|
24703
24812
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -24708,7 +24817,7 @@ var editorPlaceholder = import_react157.css`
|
|
|
24708
24817
|
top: var(--spacing-sm);
|
|
24709
24818
|
user-select: none;
|
|
24710
24819
|
`;
|
|
24711
|
-
var editorInput =
|
|
24820
|
+
var editorInput = import_react158.css`
|
|
24712
24821
|
min-height: 100%;
|
|
24713
24822
|
flex-grow: 1;
|
|
24714
24823
|
|
|
@@ -24748,7 +24857,7 @@ var ParameterRichTextInner = ({
|
|
|
24748
24857
|
LinkNode,
|
|
24749
24858
|
import_rich_text2.HeadingNode,
|
|
24750
24859
|
import_rich_text2.QuoteNode,
|
|
24751
|
-
|
|
24860
|
+
import_lexical10.ParagraphNode,
|
|
24752
24861
|
CustomCodeNode,
|
|
24753
24862
|
import_table5.TableNode,
|
|
24754
24863
|
import_table5.TableCellNode,
|
|
@@ -24838,13 +24947,13 @@ var RichText = ({
|
|
|
24838
24947
|
onInsertAsset,
|
|
24839
24948
|
minimalInteractivity
|
|
24840
24949
|
}) => {
|
|
24841
|
-
const [editor] = (0,
|
|
24842
|
-
(0,
|
|
24950
|
+
const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
|
|
24951
|
+
(0, import_react159.useEffect)(() => {
|
|
24843
24952
|
if (onRichTextInit) {
|
|
24844
24953
|
onRichTextInit(editor);
|
|
24845
24954
|
}
|
|
24846
24955
|
}, [editor, onRichTextInit]);
|
|
24847
|
-
(0,
|
|
24956
|
+
(0, import_react159.useEffect)(() => {
|
|
24848
24957
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
|
|
24849
24958
|
requestAnimationFrame(() => {
|
|
24850
24959
|
if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -24856,16 +24965,16 @@ var RichText = ({
|
|
|
24856
24965
|
removeUpdateListener();
|
|
24857
24966
|
};
|
|
24858
24967
|
}, [editor, onChange]);
|
|
24859
|
-
(0,
|
|
24968
|
+
(0, import_react159.useEffect)(() => {
|
|
24860
24969
|
editor.setEditable(!readOnly);
|
|
24861
24970
|
}, [editor, readOnly]);
|
|
24862
|
-
const [editorContainerRef, setEditorContainerRef] = (0,
|
|
24971
|
+
const [editorContainerRef, setEditorContainerRef] = (0, import_react159.useState)(null);
|
|
24863
24972
|
const onEditorContainerRef = (_editorContainerRef) => {
|
|
24864
24973
|
if (_editorContainerRef !== null) {
|
|
24865
24974
|
setEditorContainerRef(_editorContainerRef);
|
|
24866
24975
|
}
|
|
24867
24976
|
};
|
|
24868
|
-
const [portalContainerRef, setPortalContainerRef] = (0,
|
|
24977
|
+
const [portalContainerRef, setPortalContainerRef] = (0, import_react159.useState)(null);
|
|
24869
24978
|
const onPortalContainerRef = (_portalContainerRef) => {
|
|
24870
24979
|
if (_portalContainerRef !== null) {
|
|
24871
24980
|
setPortalContainerRef(_portalContainerRef);
|
|
@@ -24927,22 +25036,23 @@ var RichText = ({
|
|
|
24927
25036
|
positioningAnchorEl: editorContainerRef
|
|
24928
25037
|
}
|
|
24929
25038
|
) : null,
|
|
24930
|
-
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TableSelectionPlugin_default, {})
|
|
25039
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TableSelectionPlugin_default, {}),
|
|
25040
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ImprovedAssetSelectionPlugin_default, {})
|
|
24931
25041
|
] })
|
|
24932
25042
|
] });
|
|
24933
25043
|
};
|
|
24934
25044
|
|
|
24935
25045
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
24936
25046
|
init_emotion_jsx_shim();
|
|
24937
|
-
var
|
|
25047
|
+
var import_react160 = require("react");
|
|
24938
25048
|
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
24939
|
-
var ParameterSelect = (0,
|
|
25049
|
+
var ParameterSelect = (0, import_react160.forwardRef)(
|
|
24940
25050
|
({ defaultOption, options, ...props }, ref) => {
|
|
24941
25051
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
24942
25052
|
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
24943
25053
|
}
|
|
24944
25054
|
);
|
|
24945
|
-
var ParameterSelectInner = (0,
|
|
25055
|
+
var ParameterSelectInner = (0, import_react160.forwardRef)(
|
|
24946
25056
|
({ defaultOption, options, ...props }, ref) => {
|
|
24947
25057
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
24948
25058
|
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
|
|
@@ -24967,13 +25077,13 @@ var ParameterSelectInner = (0, import_react159.forwardRef)(
|
|
|
24967
25077
|
|
|
24968
25078
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
24969
25079
|
init_emotion_jsx_shim();
|
|
24970
|
-
var
|
|
25080
|
+
var import_react161 = require("react");
|
|
24971
25081
|
var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
|
|
24972
|
-
var ParameterTextarea = (0,
|
|
25082
|
+
var ParameterTextarea = (0, import_react161.forwardRef)((props, ref) => {
|
|
24973
25083
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
24974
25084
|
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
24975
25085
|
});
|
|
24976
|
-
var ParameterTextareaInner = (0,
|
|
25086
|
+
var ParameterTextareaInner = (0, import_react161.forwardRef)(({ ...props }, ref) => {
|
|
24977
25087
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
24978
25088
|
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
24979
25089
|
"textarea",
|
|
@@ -24989,13 +25099,13 @@ var ParameterTextareaInner = (0, import_react160.forwardRef)(({ ...props }, ref)
|
|
|
24989
25099
|
|
|
24990
25100
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
24991
25101
|
init_emotion_jsx_shim();
|
|
24992
|
-
var
|
|
25102
|
+
var import_react162 = require("react");
|
|
24993
25103
|
var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
|
|
24994
|
-
var ParameterToggle = (0,
|
|
25104
|
+
var ParameterToggle = (0, import_react162.forwardRef)((props, ref) => {
|
|
24995
25105
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
24996
25106
|
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
24997
25107
|
});
|
|
24998
|
-
var ParameterToggleInner = (0,
|
|
25108
|
+
var ParameterToggleInner = (0, import_react162.forwardRef)(
|
|
24999
25109
|
({ children, ...props }, ref) => {
|
|
25000
25110
|
const { id, label } = useParameterShell();
|
|
25001
25111
|
return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("label", { css: inputToggleLabel2, children: [
|
|
@@ -25011,8 +25121,8 @@ init_emotion_jsx_shim();
|
|
|
25011
25121
|
|
|
25012
25122
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
25013
25123
|
init_emotion_jsx_shim();
|
|
25014
|
-
var
|
|
25015
|
-
var container3 =
|
|
25124
|
+
var import_react163 = require("@emotion/react");
|
|
25125
|
+
var container3 = import_react163.css`
|
|
25016
25126
|
background: var(--gray-50);
|
|
25017
25127
|
margin-block: var(--spacing-sm);
|
|
25018
25128
|
position: relative;
|
|
@@ -25022,17 +25132,17 @@ var container3 = import_react162.css`
|
|
|
25022
25132
|
border: solid 1px var(--gray-300);
|
|
25023
25133
|
`;
|
|
25024
25134
|
var themeMap = {
|
|
25025
|
-
primary:
|
|
25135
|
+
primary: import_react163.css`
|
|
25026
25136
|
--progress-color: var(--accent-light);
|
|
25027
25137
|
`,
|
|
25028
|
-
secondary:
|
|
25138
|
+
secondary: import_react163.css`
|
|
25029
25139
|
--progress-color: var(--accent-alt-light);
|
|
25030
25140
|
`,
|
|
25031
|
-
destructive:
|
|
25141
|
+
destructive: import_react163.css`
|
|
25032
25142
|
--progress-color: var(--brand-secondary-5);
|
|
25033
25143
|
`
|
|
25034
25144
|
};
|
|
25035
|
-
var slidingBackgroundPosition =
|
|
25145
|
+
var slidingBackgroundPosition = import_react163.keyframes`
|
|
25036
25146
|
from {
|
|
25037
25147
|
background-position: 0 0;
|
|
25038
25148
|
}
|
|
@@ -25040,10 +25150,10 @@ var slidingBackgroundPosition = import_react162.keyframes`
|
|
|
25040
25150
|
background-position: 64px 0;
|
|
25041
25151
|
}
|
|
25042
25152
|
`;
|
|
25043
|
-
var determinate =
|
|
25153
|
+
var determinate = import_react163.css`
|
|
25044
25154
|
background-color: var(--progress-color);
|
|
25045
25155
|
`;
|
|
25046
|
-
var indeterminate =
|
|
25156
|
+
var indeterminate = import_react163.css`
|
|
25047
25157
|
background-image: linear-gradient(
|
|
25048
25158
|
45deg,
|
|
25049
25159
|
var(--progress-color) 25%,
|
|
@@ -25057,7 +25167,7 @@ var indeterminate = import_react162.css`
|
|
|
25057
25167
|
background-size: 64px 64px;
|
|
25058
25168
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
25059
25169
|
`;
|
|
25060
|
-
var bar =
|
|
25170
|
+
var bar = import_react163.css`
|
|
25061
25171
|
position: absolute;
|
|
25062
25172
|
inset: 0;
|
|
25063
25173
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -25106,22 +25216,22 @@ function ProgressBar({
|
|
|
25106
25216
|
|
|
25107
25217
|
// src/components/ProgressList/ProgressList.tsx
|
|
25108
25218
|
init_emotion_jsx_shim();
|
|
25109
|
-
var
|
|
25219
|
+
var import_react165 = require("@emotion/react");
|
|
25110
25220
|
var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
|
|
25111
25221
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
25112
25222
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
25113
|
-
var
|
|
25223
|
+
var import_react166 = require("react");
|
|
25114
25224
|
|
|
25115
25225
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
25116
25226
|
init_emotion_jsx_shim();
|
|
25117
|
-
var
|
|
25118
|
-
var progressListStyles =
|
|
25227
|
+
var import_react164 = require("@emotion/react");
|
|
25228
|
+
var progressListStyles = import_react164.css`
|
|
25119
25229
|
display: flex;
|
|
25120
25230
|
flex-direction: column;
|
|
25121
25231
|
gap: var(--spacing-sm);
|
|
25122
25232
|
list-style-type: none;
|
|
25123
25233
|
`;
|
|
25124
|
-
var progressListItemStyles =
|
|
25234
|
+
var progressListItemStyles = import_react164.css`
|
|
25125
25235
|
display: flex;
|
|
25126
25236
|
gap: var(--spacing-base);
|
|
25127
25237
|
align-items: center;
|
|
@@ -25130,7 +25240,7 @@ var progressListItemStyles = import_react163.css`
|
|
|
25130
25240
|
// src/components/ProgressList/ProgressList.tsx
|
|
25131
25241
|
var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
|
|
25132
25242
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
25133
|
-
const itemsWithStatus = (0,
|
|
25243
|
+
const itemsWithStatus = (0, import_react166.useMemo)(() => {
|
|
25134
25244
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
25135
25245
|
return items.map((item, index) => {
|
|
25136
25246
|
let status = "queued";
|
|
@@ -25163,7 +25273,7 @@ var ProgressListItem = ({
|
|
|
25163
25273
|
errorLevel = "danger",
|
|
25164
25274
|
autoEllipsis = false
|
|
25165
25275
|
}) => {
|
|
25166
|
-
const icon = (0,
|
|
25276
|
+
const icon = (0, import_react166.useMemo)(() => {
|
|
25167
25277
|
if (error) {
|
|
25168
25278
|
return warningIcon;
|
|
25169
25279
|
}
|
|
@@ -25174,14 +25284,14 @@ var ProgressListItem = ({
|
|
|
25174
25284
|
};
|
|
25175
25285
|
return iconPerStatus[status];
|
|
25176
25286
|
}, [status, error]);
|
|
25177
|
-
const statusStyles = (0,
|
|
25287
|
+
const statusStyles = (0, import_react166.useMemo)(() => {
|
|
25178
25288
|
if (error) {
|
|
25179
|
-
return errorLevel === "caution" ?
|
|
25289
|
+
return errorLevel === "caution" ? import_react165.css`
|
|
25180
25290
|
color: rgb(161, 98, 7);
|
|
25181
25291
|
& svg {
|
|
25182
25292
|
color: rgb(250, 204, 21);
|
|
25183
25293
|
}
|
|
25184
|
-
` :
|
|
25294
|
+
` : import_react165.css`
|
|
25185
25295
|
color: rgb(185, 28, 28);
|
|
25186
25296
|
& svg {
|
|
25187
25297
|
color: var(--brand-primary-2);
|
|
@@ -25189,13 +25299,13 @@ var ProgressListItem = ({
|
|
|
25189
25299
|
`;
|
|
25190
25300
|
}
|
|
25191
25301
|
const colorPerStatus = {
|
|
25192
|
-
completed:
|
|
25302
|
+
completed: import_react165.css`
|
|
25193
25303
|
opacity: 0.75;
|
|
25194
25304
|
`,
|
|
25195
|
-
inProgress:
|
|
25305
|
+
inProgress: import_react165.css`
|
|
25196
25306
|
-webkit-text-stroke-width: thin;
|
|
25197
25307
|
`,
|
|
25198
|
-
queued:
|
|
25308
|
+
queued: import_react165.css`
|
|
25199
25309
|
opacity: 0.5;
|
|
25200
25310
|
`
|
|
25201
25311
|
};
|
|
@@ -25212,17 +25322,17 @@ var ProgressListItem = ({
|
|
|
25212
25322
|
|
|
25213
25323
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
25214
25324
|
init_emotion_jsx_shim();
|
|
25215
|
-
var
|
|
25325
|
+
var import_react168 = require("@emotion/react");
|
|
25216
25326
|
var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
|
|
25217
|
-
var
|
|
25327
|
+
var import_react169 = require("react");
|
|
25218
25328
|
|
|
25219
25329
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
25220
25330
|
init_emotion_jsx_shim();
|
|
25221
|
-
var
|
|
25222
|
-
var segmentedControlRootStyles =
|
|
25331
|
+
var import_react167 = require("@emotion/react");
|
|
25332
|
+
var segmentedControlRootStyles = import_react167.css`
|
|
25223
25333
|
position: relative;
|
|
25224
25334
|
`;
|
|
25225
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
25335
|
+
var segmentedControlScrollIndicatorsStyles = import_react167.css`
|
|
25226
25336
|
position: absolute;
|
|
25227
25337
|
inset: 0;
|
|
25228
25338
|
z-index: 1;
|
|
@@ -25250,17 +25360,17 @@ var segmentedControlScrollIndicatorsStyles = import_react166.css`
|
|
|
25250
25360
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
25251
25361
|
}
|
|
25252
25362
|
`;
|
|
25253
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
25363
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react167.css`
|
|
25254
25364
|
&::before {
|
|
25255
25365
|
opacity: 1;
|
|
25256
25366
|
}
|
|
25257
25367
|
`;
|
|
25258
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
25368
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react167.css`
|
|
25259
25369
|
&::after {
|
|
25260
25370
|
opacity: 1;
|
|
25261
25371
|
}
|
|
25262
25372
|
`;
|
|
25263
|
-
var segmentedControlWrapperStyles =
|
|
25373
|
+
var segmentedControlWrapperStyles = import_react167.css`
|
|
25264
25374
|
overflow-y: auto;
|
|
25265
25375
|
scroll-behavior: smooth;
|
|
25266
25376
|
scrollbar-width: none;
|
|
@@ -25269,7 +25379,7 @@ var segmentedControlWrapperStyles = import_react166.css`
|
|
|
25269
25379
|
height: 0px;
|
|
25270
25380
|
}
|
|
25271
25381
|
`;
|
|
25272
|
-
var segmentedControlStyles =
|
|
25382
|
+
var segmentedControlStyles = import_react167.css`
|
|
25273
25383
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
25274
25384
|
--segmented-control-border-width: 1px;
|
|
25275
25385
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -25288,14 +25398,14 @@ var segmentedControlStyles = import_react166.css`
|
|
|
25288
25398
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
25289
25399
|
font-size: var(--fs-xs);
|
|
25290
25400
|
`;
|
|
25291
|
-
var segmentedControlVerticalStyles =
|
|
25401
|
+
var segmentedControlVerticalStyles = import_react167.css`
|
|
25292
25402
|
flex-direction: column;
|
|
25293
25403
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
25294
25404
|
var(--segmented-control-rounded-value) 0 0;
|
|
25295
25405
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
25296
25406
|
var(--segmented-control-rounded-value);
|
|
25297
25407
|
`;
|
|
25298
|
-
var segmentedControlItemStyles =
|
|
25408
|
+
var segmentedControlItemStyles = import_react167.css`
|
|
25299
25409
|
&:first-of-type label {
|
|
25300
25410
|
border-radius: var(--segmented-control-first-border-radius);
|
|
25301
25411
|
}
|
|
@@ -25303,10 +25413,10 @@ var segmentedControlItemStyles = import_react166.css`
|
|
|
25303
25413
|
border-radius: var(--segmented-control-last-border-radius);
|
|
25304
25414
|
}
|
|
25305
25415
|
`;
|
|
25306
|
-
var segmentedControlInputStyles =
|
|
25416
|
+
var segmentedControlInputStyles = import_react167.css`
|
|
25307
25417
|
${accessibleHidden}
|
|
25308
25418
|
`;
|
|
25309
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
25419
|
+
var segmentedControlLabelStyles = (checked, disabled2) => import_react167.css`
|
|
25310
25420
|
position: relative;
|
|
25311
25421
|
display: flex;
|
|
25312
25422
|
align-items: center;
|
|
@@ -25373,20 +25483,20 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react166.css`
|
|
|
25373
25483
|
`}
|
|
25374
25484
|
}
|
|
25375
25485
|
`;
|
|
25376
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
25486
|
+
var segmentedControlLabelIconOnlyStyles = import_react167.css`
|
|
25377
25487
|
padding-inline: 0.5em;
|
|
25378
25488
|
`;
|
|
25379
|
-
var segmentedControlLabelCheckStyles =
|
|
25489
|
+
var segmentedControlLabelCheckStyles = import_react167.css`
|
|
25380
25490
|
opacity: 0.5;
|
|
25381
25491
|
`;
|
|
25382
|
-
var segmentedControlLabelContentStyles =
|
|
25492
|
+
var segmentedControlLabelContentStyles = import_react167.css`
|
|
25383
25493
|
display: flex;
|
|
25384
25494
|
align-items: center;
|
|
25385
25495
|
justify-content: center;
|
|
25386
25496
|
gap: var(--spacing-sm);
|
|
25387
25497
|
height: 100%;
|
|
25388
25498
|
`;
|
|
25389
|
-
var segmentedControlLabelTextStyles =
|
|
25499
|
+
var segmentedControlLabelTextStyles = import_react167.css`
|
|
25390
25500
|
white-space: nowrap;
|
|
25391
25501
|
`;
|
|
25392
25502
|
|
|
@@ -25406,10 +25516,10 @@ var SegmentedControl = ({
|
|
|
25406
25516
|
currentBackgroundColor = "white",
|
|
25407
25517
|
...props
|
|
25408
25518
|
}) => {
|
|
25409
|
-
const wrapperRef = (0,
|
|
25410
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
25411
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
25412
|
-
const onOptionChange = (0,
|
|
25519
|
+
const wrapperRef = (0, import_react169.useRef)(null);
|
|
25520
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react169.useState)(false);
|
|
25521
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react169.useState)(false);
|
|
25522
|
+
const onOptionChange = (0, import_react169.useCallback)(
|
|
25413
25523
|
(event) => {
|
|
25414
25524
|
if (event.target.checked) {
|
|
25415
25525
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -25417,19 +25527,19 @@ var SegmentedControl = ({
|
|
|
25417
25527
|
},
|
|
25418
25528
|
[options, onChange]
|
|
25419
25529
|
);
|
|
25420
|
-
const sizeStyles = (0,
|
|
25530
|
+
const sizeStyles = (0, import_react169.useMemo)(() => {
|
|
25421
25531
|
const map = {
|
|
25422
|
-
sm: (0,
|
|
25423
|
-
md: (0,
|
|
25424
|
-
lg: (0,
|
|
25425
|
-
xl: (0,
|
|
25532
|
+
sm: (0, import_react168.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
25533
|
+
md: (0, import_react168.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
25534
|
+
lg: (0, import_react168.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
25535
|
+
xl: (0, import_react168.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
25426
25536
|
};
|
|
25427
25537
|
return map[size];
|
|
25428
25538
|
}, [size]);
|
|
25429
|
-
const isIconOnly = (0,
|
|
25539
|
+
const isIconOnly = (0, import_react169.useMemo)(() => {
|
|
25430
25540
|
return options.every((option) => option && option.icon && !option.label);
|
|
25431
25541
|
}, [options]);
|
|
25432
|
-
(0,
|
|
25542
|
+
(0, import_react169.useEffect)(() => {
|
|
25433
25543
|
const wrapperElement = wrapperRef.current;
|
|
25434
25544
|
const onScroll = () => {
|
|
25435
25545
|
if (!wrapperElement) {
|
|
@@ -25524,12 +25634,12 @@ init_emotion_jsx_shim();
|
|
|
25524
25634
|
|
|
25525
25635
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
25526
25636
|
init_emotion_jsx_shim();
|
|
25527
|
-
var
|
|
25528
|
-
var lightFadingOut =
|
|
25637
|
+
var import_react170 = require("@emotion/react");
|
|
25638
|
+
var lightFadingOut = import_react170.keyframes`
|
|
25529
25639
|
from { opacity: 0.1; }
|
|
25530
25640
|
to { opacity: 0.025; }
|
|
25531
25641
|
`;
|
|
25532
|
-
var skeletonStyles =
|
|
25642
|
+
var skeletonStyles = import_react170.css`
|
|
25533
25643
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
25534
25644
|
background-color: var(--gray-900);
|
|
25535
25645
|
`;
|
|
@@ -25564,12 +25674,12 @@ var Skeleton = ({
|
|
|
25564
25674
|
|
|
25565
25675
|
// src/components/Switch/Switch.tsx
|
|
25566
25676
|
init_emotion_jsx_shim();
|
|
25567
|
-
var
|
|
25677
|
+
var import_react172 = require("react");
|
|
25568
25678
|
|
|
25569
25679
|
// src/components/Switch/Switch.styles.ts
|
|
25570
25680
|
init_emotion_jsx_shim();
|
|
25571
|
-
var
|
|
25572
|
-
var SwitchInputContainer =
|
|
25681
|
+
var import_react171 = require("@emotion/react");
|
|
25682
|
+
var SwitchInputContainer = import_react171.css`
|
|
25573
25683
|
cursor: pointer;
|
|
25574
25684
|
display: inline-block;
|
|
25575
25685
|
position: relative;
|
|
@@ -25578,7 +25688,7 @@ var SwitchInputContainer = import_react170.css`
|
|
|
25578
25688
|
vertical-align: middle;
|
|
25579
25689
|
user-select: none;
|
|
25580
25690
|
`;
|
|
25581
|
-
var SwitchInput = (size) =>
|
|
25691
|
+
var SwitchInput = (size) => import_react171.css`
|
|
25582
25692
|
appearance: none;
|
|
25583
25693
|
border-radius: var(--rounded-full);
|
|
25584
25694
|
background-color: var(--white);
|
|
@@ -25618,7 +25728,7 @@ var SwitchInput = (size) => import_react170.css`
|
|
|
25618
25728
|
cursor: not-allowed;
|
|
25619
25729
|
}
|
|
25620
25730
|
`;
|
|
25621
|
-
var SwitchInputDisabled =
|
|
25731
|
+
var SwitchInputDisabled = import_react171.css`
|
|
25622
25732
|
opacity: var(--opacity-50);
|
|
25623
25733
|
cursor: not-allowed;
|
|
25624
25734
|
|
|
@@ -25626,7 +25736,7 @@ var SwitchInputDisabled = import_react170.css`
|
|
|
25626
25736
|
cursor: not-allowed;
|
|
25627
25737
|
}
|
|
25628
25738
|
`;
|
|
25629
|
-
var SwitchInputLabel = (size) =>
|
|
25739
|
+
var SwitchInputLabel = (size) => import_react171.css`
|
|
25630
25740
|
align-items: center;
|
|
25631
25741
|
color: var(--typography-base);
|
|
25632
25742
|
display: inline-flex;
|
|
@@ -25648,7 +25758,7 @@ var SwitchInputLabel = (size) => import_react170.css`
|
|
|
25648
25758
|
top: 0;
|
|
25649
25759
|
}
|
|
25650
25760
|
`;
|
|
25651
|
-
var SwitchText = (size) =>
|
|
25761
|
+
var SwitchText = (size) => import_react171.css`
|
|
25652
25762
|
color: var(--gray-500);
|
|
25653
25763
|
font-size: var(--fs-sm);
|
|
25654
25764
|
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
@@ -25656,7 +25766,7 @@ var SwitchText = (size) => import_react170.css`
|
|
|
25656
25766
|
|
|
25657
25767
|
// src/components/Switch/Switch.tsx
|
|
25658
25768
|
var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
|
|
25659
|
-
var Switch = (0,
|
|
25769
|
+
var Switch = (0, import_react172.forwardRef)(
|
|
25660
25770
|
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
25661
25771
|
let additionalText = infoText;
|
|
25662
25772
|
if (infoText && toggleText) {
|
|
@@ -25685,8 +25795,8 @@ var React24 = __toESM(require("react"));
|
|
|
25685
25795
|
|
|
25686
25796
|
// src/components/Table/Table.styles.ts
|
|
25687
25797
|
init_emotion_jsx_shim();
|
|
25688
|
-
var
|
|
25689
|
-
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) =>
|
|
25798
|
+
var import_react173 = require("@emotion/react");
|
|
25799
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react173.css`
|
|
25690
25800
|
border-bottom: 1px solid var(--gray-400);
|
|
25691
25801
|
border-collapse: collapse;
|
|
25692
25802
|
min-width: 100%;
|
|
@@ -25706,14 +25816,14 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
|
|
|
25706
25816
|
background-color: var(--gray-50);
|
|
25707
25817
|
}
|
|
25708
25818
|
`;
|
|
25709
|
-
var tableHead =
|
|
25819
|
+
var tableHead = import_react173.css`
|
|
25710
25820
|
color: var(--typography-base);
|
|
25711
25821
|
text-align: left;
|
|
25712
25822
|
`;
|
|
25713
|
-
var tableRow =
|
|
25823
|
+
var tableRow = import_react173.css`
|
|
25714
25824
|
border-bottom: 1px solid var(--gray-100);
|
|
25715
25825
|
`;
|
|
25716
|
-
var tableCellHead =
|
|
25826
|
+
var tableCellHead = import_react173.css`
|
|
25717
25827
|
font-size: var(--fs-sm);
|
|
25718
25828
|
text-transform: uppercase;
|
|
25719
25829
|
font-weight: var(--fw-bold);
|
|
@@ -25759,13 +25869,13 @@ var TableCellData = React24.forwardRef(
|
|
|
25759
25869
|
|
|
25760
25870
|
// src/components/Tabs/Tabs.tsx
|
|
25761
25871
|
init_emotion_jsx_shim();
|
|
25762
|
-
var
|
|
25763
|
-
var
|
|
25872
|
+
var import_react175 = require("@ariakit/react");
|
|
25873
|
+
var import_react176 = require("react");
|
|
25764
25874
|
|
|
25765
25875
|
// src/components/Tabs/Tabs.styles.ts
|
|
25766
25876
|
init_emotion_jsx_shim();
|
|
25767
|
-
var
|
|
25768
|
-
var tabButtonStyles =
|
|
25877
|
+
var import_react174 = require("@emotion/react");
|
|
25878
|
+
var tabButtonStyles = import_react174.css`
|
|
25769
25879
|
align-items: center;
|
|
25770
25880
|
border: 0;
|
|
25771
25881
|
height: 2.5rem;
|
|
@@ -25782,7 +25892,7 @@ var tabButtonStyles = import_react173.css`
|
|
|
25782
25892
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
25783
25893
|
}
|
|
25784
25894
|
`;
|
|
25785
|
-
var tabButtonGroupStyles =
|
|
25895
|
+
var tabButtonGroupStyles = import_react174.css`
|
|
25786
25896
|
display: flex;
|
|
25787
25897
|
gap: var(--spacing-base);
|
|
25788
25898
|
border-bottom: 1px solid var(--gray-300);
|
|
@@ -25791,7 +25901,7 @@ var tabButtonGroupStyles = import_react173.css`
|
|
|
25791
25901
|
// src/components/Tabs/Tabs.tsx
|
|
25792
25902
|
var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
|
|
25793
25903
|
var useCurrentTab = () => {
|
|
25794
|
-
const context = (0,
|
|
25904
|
+
const context = (0, import_react175.useTabStore)();
|
|
25795
25905
|
if (!context) {
|
|
25796
25906
|
throw new Error("This component can only be used inside <Tabs>");
|
|
25797
25907
|
}
|
|
@@ -25805,12 +25915,12 @@ var Tabs = ({
|
|
|
25805
25915
|
manual,
|
|
25806
25916
|
...props
|
|
25807
25917
|
}) => {
|
|
25808
|
-
const selected = (0,
|
|
25918
|
+
const selected = (0, import_react176.useMemo)(() => {
|
|
25809
25919
|
if (selectedId) return selectedId;
|
|
25810
25920
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
25811
25921
|
}, [selectedId, useHashForState]);
|
|
25812
|
-
const tab = (0,
|
|
25813
|
-
const onTabSelect = (0,
|
|
25922
|
+
const tab = (0, import_react175.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
|
|
25923
|
+
const onTabSelect = (0, import_react176.useCallback)(
|
|
25814
25924
|
(value) => {
|
|
25815
25925
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
25816
25926
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -25821,28 +25931,28 @@ var Tabs = ({
|
|
|
25821
25931
|
},
|
|
25822
25932
|
[onSelectedIdChange, useHashForState]
|
|
25823
25933
|
);
|
|
25824
|
-
(0,
|
|
25934
|
+
(0, import_react176.useEffect)(() => {
|
|
25825
25935
|
if (selected && selected !== tab.getState().activeId) {
|
|
25826
25936
|
tab.setSelectedId(selected);
|
|
25827
25937
|
}
|
|
25828
25938
|
}, [selected, tab]);
|
|
25829
|
-
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
25939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
25830
25940
|
};
|
|
25831
25941
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
25832
|
-
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
25942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
25833
25943
|
};
|
|
25834
25944
|
var TabButton = ({
|
|
25835
25945
|
children,
|
|
25836
25946
|
id,
|
|
25837
25947
|
...props
|
|
25838
25948
|
}) => {
|
|
25839
|
-
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
25949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
25840
25950
|
};
|
|
25841
25951
|
var TabContent = ({
|
|
25842
25952
|
children,
|
|
25843
25953
|
...props
|
|
25844
25954
|
}) => {
|
|
25845
|
-
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
25955
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabPanel, { ...props, children });
|
|
25846
25956
|
};
|
|
25847
25957
|
|
|
25848
25958
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -25850,8 +25960,8 @@ init_emotion_jsx_shim();
|
|
|
25850
25960
|
|
|
25851
25961
|
// src/components/Validation/StatusBullet.styles.ts
|
|
25852
25962
|
init_emotion_jsx_shim();
|
|
25853
|
-
var
|
|
25854
|
-
var StatusBulletContainer =
|
|
25963
|
+
var import_react177 = require("@emotion/react");
|
|
25964
|
+
var StatusBulletContainer = import_react177.css`
|
|
25855
25965
|
align-items: center;
|
|
25856
25966
|
align-self: center;
|
|
25857
25967
|
color: var(--gray-500);
|
|
@@ -25868,33 +25978,33 @@ var StatusBulletContainer = import_react176.css`
|
|
|
25868
25978
|
display: block;
|
|
25869
25979
|
}
|
|
25870
25980
|
`;
|
|
25871
|
-
var StatusBulletBase =
|
|
25981
|
+
var StatusBulletBase = import_react177.css`
|
|
25872
25982
|
font-size: var(--fs-sm);
|
|
25873
25983
|
&:before {
|
|
25874
25984
|
width: var(--fs-xs);
|
|
25875
25985
|
height: var(--fs-xs);
|
|
25876
25986
|
}
|
|
25877
25987
|
`;
|
|
25878
|
-
var StatusBulletSmall =
|
|
25988
|
+
var StatusBulletSmall = import_react177.css`
|
|
25879
25989
|
font-size: var(--fs-xs);
|
|
25880
25990
|
&:before {
|
|
25881
25991
|
width: var(--fs-xxs);
|
|
25882
25992
|
height: var(--fs-xxs);
|
|
25883
25993
|
}
|
|
25884
25994
|
`;
|
|
25885
|
-
var StatusDraft =
|
|
25995
|
+
var StatusDraft = import_react177.css`
|
|
25886
25996
|
&:before {
|
|
25887
25997
|
background: var(--white);
|
|
25888
25998
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
25889
25999
|
}
|
|
25890
26000
|
`;
|
|
25891
|
-
var StatusModified =
|
|
26001
|
+
var StatusModified = import_react177.css`
|
|
25892
26002
|
&:before {
|
|
25893
26003
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
25894
26004
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
25895
26005
|
}
|
|
25896
26006
|
`;
|
|
25897
|
-
var StatusError =
|
|
26007
|
+
var StatusError = import_react177.css`
|
|
25898
26008
|
color: var(--error);
|
|
25899
26009
|
&:before {
|
|
25900
26010
|
/* TODO: replace this with an svg icon */
|
|
@@ -25907,22 +26017,22 @@ var StatusError = import_react176.css`
|
|
|
25907
26017
|
);
|
|
25908
26018
|
}
|
|
25909
26019
|
`;
|
|
25910
|
-
var StatusPublished =
|
|
26020
|
+
var StatusPublished = import_react177.css`
|
|
25911
26021
|
&:before {
|
|
25912
26022
|
background: var(--accent-dark);
|
|
25913
26023
|
}
|
|
25914
26024
|
`;
|
|
25915
|
-
var StatusOrphan =
|
|
26025
|
+
var StatusOrphan = import_react177.css`
|
|
25916
26026
|
&:before {
|
|
25917
26027
|
background: var(--brand-secondary-5);
|
|
25918
26028
|
}
|
|
25919
26029
|
`;
|
|
25920
|
-
var StatusUnknown =
|
|
26030
|
+
var StatusUnknown = import_react177.css`
|
|
25921
26031
|
&:before {
|
|
25922
26032
|
background: var(--gray-800);
|
|
25923
26033
|
}
|
|
25924
26034
|
`;
|
|
25925
|
-
var StatusDeleted =
|
|
26035
|
+
var StatusDeleted = import_react177.css`
|
|
25926
26036
|
&:before {
|
|
25927
26037
|
background: var(--error);
|
|
25928
26038
|
}
|