@uniformdev/design-system 19.173.1-alpha.17 → 19.176.0
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 +562 -486
- package/dist/index.d.mts +36 -18
- package/dist/index.d.ts +36 -18
- package/dist/index.js +632 -552
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -1444,11 +1444,12 @@ __export(src_exports, {
|
|
|
1444
1444
|
ObjectGridItemCoverButton: () => ObjectGridItemCoverButton,
|
|
1445
1445
|
ObjectGridItemHeading: () => ObjectGridItemHeading2,
|
|
1446
1446
|
ObjectGridItemIconWithTooltip: () => ObjectGridItemIconWithTooltip,
|
|
1447
|
+
ObjectGridItemLoadingSkeleton: () => ObjectGridItemLoadingSkeleton2,
|
|
1447
1448
|
ObjectItemLoadingSkeleton: () => ObjectItemLoadingSkeleton,
|
|
1448
1449
|
ObjectListItem: () => ObjectListItem2,
|
|
1449
1450
|
ObjectListItemContainer: () => ObjectListItemContainer2,
|
|
1450
1451
|
ObjectListItemCover: () => ObjectListItemCover2,
|
|
1451
|
-
ObjectListItemHeading: () =>
|
|
1452
|
+
ObjectListItemHeading: () => ObjectListItemHeading2,
|
|
1452
1453
|
PageHeaderSection: () => PageHeaderSection,
|
|
1453
1454
|
Pagination: () => Pagination,
|
|
1454
1455
|
Paragraph: () => Paragraph,
|
|
@@ -1592,16 +1593,12 @@ __export(src_exports, {
|
|
|
1592
1593
|
supports: () => supports,
|
|
1593
1594
|
textInput: () => textInput,
|
|
1594
1595
|
toast: () => import_react_toastify.toast,
|
|
1595
|
-
uniformAiIcon: () => uniformAiIcon,
|
|
1596
1596
|
uniformComponentIcon: () => uniformComponentIcon,
|
|
1597
1597
|
uniformComponentPatternIcon: () => uniformComponentPatternIcon,
|
|
1598
1598
|
uniformCompositionPatternIcon: () => uniformCompositionPatternIcon,
|
|
1599
|
-
uniformConditionalValuesIcon: () => uniformConditionalValuesIcon,
|
|
1600
1599
|
uniformContentTypeIcon: () => uniformContentTypeIcon,
|
|
1601
1600
|
uniformEntryIcon: () => uniformEntryIcon,
|
|
1602
1601
|
uniformEntryPatternIcon: () => uniformEntryPatternIcon,
|
|
1603
|
-
uniformLocaleDisabledIcon: () => uniformLocaleDisabledIcon,
|
|
1604
|
-
uniformLocaleIcon: () => uniformLocaleIcon,
|
|
1605
1602
|
useBreakpoint: () => useBreakpoint,
|
|
1606
1603
|
useCloseCurrentDrawer: () => useCloseCurrentDrawer,
|
|
1607
1604
|
useCurrentDrawer: () => useCurrentDrawer,
|
|
@@ -4791,37 +4788,10 @@ var customIcons = {
|
|
|
4791
4788
|
// src/components/Icons/systemIcons.tsx
|
|
4792
4789
|
init_emotion_jsx_shim();
|
|
4793
4790
|
var import_all_files2 = require("@react-icons/all-files");
|
|
4794
|
-
var import_CgGlobeAlt2 = require("@react-icons/all-files/cg/CgGlobeAlt");
|
|
4795
4791
|
var import_CgList2 = require("@react-icons/all-files/cg/CgList");
|
|
4796
4792
|
var import_CgPen2 = require("@react-icons/all-files/cg/CgPen");
|
|
4797
|
-
var import_TbBinaryTree2 = require("@react-icons/all-files/tb/TbBinaryTree2");
|
|
4798
4793
|
var import_TbBox = require("@react-icons/all-files/tb/TbBox");
|
|
4799
4794
|
var uniformComponentIcon = import_TbBox.TbBox;
|
|
4800
|
-
var uniformConditionalValuesIcon = import_TbBinaryTree2.TbBinaryTree2;
|
|
4801
|
-
var uniformAiIcon = customIcons["magic-wand"];
|
|
4802
|
-
var uniformLocaleIcon = import_CgGlobeAlt2.CgGlobeAlt;
|
|
4803
|
-
var uniformLocaleDisabledIcon = (0, import_all_files2.GenIcon)({
|
|
4804
|
-
tag: "svg",
|
|
4805
|
-
attr: { fill: "currentColor", viewBox: "0 0 24 24", role: "img" },
|
|
4806
|
-
child: [
|
|
4807
|
-
{
|
|
4808
|
-
tag: "path",
|
|
4809
|
-
attr: {
|
|
4810
|
-
fillRule: "evenodd",
|
|
4811
|
-
d: "M20.123 15.88A9 9 0 0 0 8.12 3.877l2.787 2.787c.03-.073.06-.145.092-.216.294-.661.592-1.073.823-1.292a.988.988 0 0 1 .178-.14.991.991 0 0 1 .178.14c.23.22.528.63.823 1.292.366.825.665 1.901.838 3.148l3.593 3.594a9.739 9.739 0 0 0 1.548-.665 6.968 6.968 0 0 1-.385 1.827l1.528 1.528ZM14.805 5.585c.691 1.53 1.136 3.62 1.19 5.945a9.939 9.939 0 0 0 1.557-.53c.6-.266.994-.536 1.226-.756a7.016 7.016 0 0 0-3.973-4.66ZM3.877 8.12A9 9 0 0 0 15.88 20.123l-2.787-2.787a7.89 7.89 0 0 1-.092.216c-.294.661-.593 1.073-.823 1.292a.996.996 0 0 1-.178.14.99.99 0 0 1-.178-.14c-.23-.22-.529-.63-.823-1.292-.367-.825-.666-1.901-.838-3.148L6.967 11.21a8.334 8.334 0 0 1-.519-.21c-.6-.266-.995-.536-1.226-.756a6.95 6.95 0 0 1 .183-.596L3.877 8.12Zm5.317 10.295c-.577-1.278-.982-2.947-1.131-4.817-1.183-.256-2.22-.624-3.044-1.073a7.004 7.004 0 0 0 4.175 5.89Z",
|
|
4812
|
-
clipRule: "evenodd"
|
|
4813
|
-
},
|
|
4814
|
-
child: []
|
|
4815
|
-
},
|
|
4816
|
-
{
|
|
4817
|
-
tag: "path",
|
|
4818
|
-
attr: {
|
|
4819
|
-
d: "M20.031 20.031a1.5 1.5 0 0 1-2.121 0L3.06 5.182a1.5 1.5 0 0 1 2.122-2.121L20.03 17.91a1.5 1.5 0 0 1 0 2.121Z"
|
|
4820
|
-
},
|
|
4821
|
-
child: []
|
|
4822
|
-
}
|
|
4823
|
-
]
|
|
4824
|
-
});
|
|
4825
4795
|
var uniformComponentPatternIcon = (0, import_all_files2.GenIcon)({
|
|
4826
4796
|
tag: "svg",
|
|
4827
4797
|
attr: {
|
|
@@ -14019,7 +13989,6 @@ var menuItem = (textTheme, forceActive) => import_react34.css`
|
|
|
14019
13989
|
font-weight: var(--fw-regular);
|
|
14020
13990
|
flex-grow: 1;
|
|
14021
13991
|
gap: var(--spacing-xs);
|
|
14022
|
-
cursor: default;
|
|
14023
13992
|
white-space: nowrap;
|
|
14024
13993
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
14025
13994
|
${forceActive ? activeMenuItem : ""}
|
|
@@ -16997,19 +16966,17 @@ init_emotion_jsx_shim();
|
|
|
16997
16966
|
// src/components/Counter/Counter.styles.ts
|
|
16998
16967
|
init_emotion_jsx_shim();
|
|
16999
16968
|
var import_react71 = require("@emotion/react");
|
|
17000
|
-
var counterContainer = (bgColor
|
|
16969
|
+
var counterContainer = (bgColor) => import_react71.css`
|
|
17001
16970
|
align-items: center;
|
|
17002
16971
|
border-radius: var(--rounded-full);
|
|
17003
16972
|
border: 1px solid var(--gray-300);
|
|
17004
16973
|
background: ${bgColor};
|
|
17005
|
-
color:
|
|
16974
|
+
color: var(--typography-base);
|
|
17006
16975
|
display: inline-flex;
|
|
17007
|
-
|
|
17008
|
-
font-size: var(--fs-xs);
|
|
16976
|
+
font-size: var(--fs-xxs);
|
|
17009
16977
|
font-weight: var(--fw-regular);
|
|
17010
16978
|
justify-content: center;
|
|
17011
|
-
|
|
17012
|
-
width: ${hasIcon ? "auto" : "var(--spacing-base)"};
|
|
16979
|
+
width: var(--spacing-base);
|
|
17013
16980
|
height: var(--spacing-base);
|
|
17014
16981
|
`;
|
|
17015
16982
|
var counterZeroValue = import_react71.css`
|
|
@@ -17033,13 +17000,7 @@ var counterIcon = import_react71.css`
|
|
|
17033
17000
|
|
|
17034
17001
|
// src/components/Counter/Counter.tsx
|
|
17035
17002
|
var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
|
|
17036
|
-
var Counter = ({
|
|
17037
|
-
count,
|
|
17038
|
-
bgColor = "transparent",
|
|
17039
|
-
icon,
|
|
17040
|
-
iconColor = "auto",
|
|
17041
|
-
...props
|
|
17042
|
-
}) => {
|
|
17003
|
+
var Counter = ({ count, bgColor = "transparent", ...props }) => {
|
|
17043
17004
|
if (typeof count === "undefined") {
|
|
17044
17005
|
return null;
|
|
17045
17006
|
}
|
|
@@ -17048,19 +17009,7 @@ var Counter = ({
|
|
|
17048
17009
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
|
|
17049
17010
|
] }) : count;
|
|
17050
17011
|
const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
|
|
17051
|
-
return /* @__PURE__ */ (0, import_jsx_runtime63.
|
|
17052
|
-
icon ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
17053
|
-
"span",
|
|
17054
|
-
{
|
|
17055
|
-
css: [
|
|
17056
|
-
iconColor ? functionalColors : void 0,
|
|
17057
|
-
{ color: iconColor ? iconColor === "red" ? "var(--brand-secondary-5)" : iconColor : "inherit" }
|
|
17058
|
-
],
|
|
17059
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { icon, iconColor: "currentColor", size: "0.6rem" })
|
|
17060
|
-
}
|
|
17061
|
-
) : null,
|
|
17062
|
-
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: formatCount })
|
|
17063
|
-
] });
|
|
17012
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { css: counterContainer(bgColor), ...props, children: formatCount });
|
|
17064
17013
|
};
|
|
17065
17014
|
|
|
17066
17015
|
// src/components/DashedBox/DashedBox.tsx
|
|
@@ -17160,6 +17109,7 @@ var input2 = import_react74.css`
|
|
|
17160
17109
|
padding: 0;
|
|
17161
17110
|
display: flex;
|
|
17162
17111
|
justify-content: space-between;
|
|
17112
|
+
gap: var(--spacing-xs);
|
|
17163
17113
|
`;
|
|
17164
17114
|
var inputLabel = import_react74.css`
|
|
17165
17115
|
flex-grow: 1;
|
|
@@ -17178,9 +17128,9 @@ var trigger = import_react74.css`
|
|
|
17178
17128
|
`;
|
|
17179
17129
|
var popover = import_react74.css`
|
|
17180
17130
|
padding: var(--spacing-md);
|
|
17181
|
-
max-width:
|
|
17131
|
+
max-width: unset;
|
|
17182
17132
|
container-type: inline-size;
|
|
17183
|
-
width: 100
|
|
17133
|
+
width: clamp(200px, 100%, 540px);
|
|
17184
17134
|
`;
|
|
17185
17135
|
var popoverInnerContent = import_react74.css`
|
|
17186
17136
|
display: grid;
|
|
@@ -17199,6 +17149,8 @@ var popoverInnerContent = import_react74.css`
|
|
|
17199
17149
|
var calendarSection = import_react74.css`
|
|
17200
17150
|
grid-column: 1;
|
|
17201
17151
|
grid-row: 1 / 3;
|
|
17152
|
+
max-width: 240px;
|
|
17153
|
+
margin-inline: auto;
|
|
17202
17154
|
|
|
17203
17155
|
[data-variant='date'] & {
|
|
17204
17156
|
grid-row: 1 / 2;
|
|
@@ -17220,6 +17172,7 @@ var datePart = import_react74.css`
|
|
|
17220
17172
|
var datePartButton = import_react74.css`
|
|
17221
17173
|
// this allows the button to be as wide as the text
|
|
17222
17174
|
min-width: 0;
|
|
17175
|
+
margin-right: auto;
|
|
17223
17176
|
`;
|
|
17224
17177
|
|
|
17225
17178
|
// src/components/DateTimePicker/DateTimePickerSummary.tsx
|
|
@@ -17363,10 +17316,12 @@ var DateTimePicker = ({
|
|
|
17363
17316
|
warningMessage,
|
|
17364
17317
|
disabled: disabled2,
|
|
17365
17318
|
onChange,
|
|
17366
|
-
testId,
|
|
17319
|
+
testId = "datetime-picker",
|
|
17320
|
+
placement = "bottom-start",
|
|
17321
|
+
offset,
|
|
17367
17322
|
...props
|
|
17368
17323
|
}) => {
|
|
17369
|
-
const popover2 = (0, import_Popover.usePopoverState)({ placement:
|
|
17324
|
+
const popover2 = (0, import_Popover.usePopoverState)({ placement, unstable_offset: offset });
|
|
17370
17325
|
const parsedValue = (0, import_react75.useMemo)(() => tryParseAbsolute(value == null ? void 0 : value.datetime, value == null ? void 0 : value.timeZone), [value]);
|
|
17371
17326
|
const parsedMinVisible = (0, import_react75.useMemo)(
|
|
17372
17327
|
() => tryParseAbsoluteToDateString(minVisible, value == null ? void 0 : value.timeZone),
|
|
@@ -17539,21 +17494,17 @@ var import_react76 = require("@emotion/react");
|
|
|
17539
17494
|
var descriptionListHorizontal = import_react76.css`
|
|
17540
17495
|
display: grid;
|
|
17541
17496
|
grid-template-columns: max-content auto;
|
|
17542
|
-
gap: var(--spacing-
|
|
17497
|
+
gap: var(--spacing-sm) var(--spacing-md);
|
|
17543
17498
|
`;
|
|
17544
17499
|
var descriptionListVertical = import_react76.css`
|
|
17545
17500
|
display: flex;
|
|
17546
17501
|
flex-direction: column;
|
|
17547
|
-
gap: var(--spacing-
|
|
17502
|
+
gap: var(--spacing-sm);
|
|
17548
17503
|
`;
|
|
17549
17504
|
var descriptionListLabelStyles = import_react76.css`
|
|
17550
17505
|
display: flex;
|
|
17551
17506
|
align-items: center;
|
|
17552
17507
|
color: var(--gray-500);
|
|
17553
|
-
|
|
17554
|
-
dd + & {
|
|
17555
|
-
margin-top: var(--spacing-sm);
|
|
17556
|
-
}
|
|
17557
17508
|
`;
|
|
17558
17509
|
var descriptionListValueStyles = import_react76.css`
|
|
17559
17510
|
display: flex;
|
|
@@ -17610,7 +17561,10 @@ var detailsContent = import_react78.css`
|
|
|
17610
17561
|
position: relative;
|
|
17611
17562
|
animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
17612
17563
|
will-change: height;
|
|
17613
|
-
|
|
17564
|
+
|
|
17565
|
+
&:focus-within {
|
|
17566
|
+
z-index: 1;
|
|
17567
|
+
}
|
|
17614
17568
|
`;
|
|
17615
17569
|
var detailsContentIndented = import_react78.css`
|
|
17616
17570
|
margin-left: calc(1.25rem / 2);
|
|
@@ -17709,7 +17663,6 @@ var DragHandleStyles = import_react79.css`
|
|
|
17709
17663
|
background: transparent;
|
|
17710
17664
|
border: 0;
|
|
17711
17665
|
position: relative;
|
|
17712
|
-
height: 3.125rem;
|
|
17713
17666
|
width: 1rem;
|
|
17714
17667
|
cursor: grab;
|
|
17715
17668
|
|
|
@@ -17735,13 +17688,13 @@ var DragHandleDisabled = import_react79.css`
|
|
|
17735
17688
|
// src/components/DragHandle/DragHandle.tsx
|
|
17736
17689
|
var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
|
|
17737
17690
|
var DragHandle = (0, import_react80.forwardRef)(
|
|
17738
|
-
({ disableDnd, ...props }, ref) => {
|
|
17691
|
+
({ disableDnd, height = "3.125rem", ...props }, ref) => {
|
|
17739
17692
|
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
17740
17693
|
"button",
|
|
17741
17694
|
{
|
|
17742
17695
|
type: "button",
|
|
17743
17696
|
ref,
|
|
17744
|
-
css: [DragHandleStyles, disableDnd ? DragHandleDisabled : null],
|
|
17697
|
+
css: [DragHandleStyles, disableDnd ? DragHandleDisabled : null, { height }],
|
|
17745
17698
|
disabled: disableDnd,
|
|
17746
17699
|
...props
|
|
17747
17700
|
}
|
|
@@ -20799,46 +20752,137 @@ var ObjectGridItemIconWithTooltip = ({
|
|
|
20799
20752
|
return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
20800
20753
|
};
|
|
20801
20754
|
|
|
20802
|
-
// src/components/Objects/
|
|
20755
|
+
// src/components/Objects/ObjectGridItemLoadingSkeleton.tsx
|
|
20803
20756
|
init_emotion_jsx_shim();
|
|
20804
20757
|
|
|
20805
|
-
// src/components/Objects/styles/
|
|
20758
|
+
// src/components/Objects/styles/ObjectGridItemLoadingSkeleton.styles.ts
|
|
20806
20759
|
init_emotion_jsx_shim();
|
|
20807
20760
|
var import_react126 = require("@emotion/react");
|
|
20808
|
-
var
|
|
20809
|
-
|
|
20761
|
+
var ObjectGridItemLoadingSkeleton = import_react126.css`
|
|
20762
|
+
border-radius: var(--rounded-base);
|
|
20810
20763
|
display: flex;
|
|
20764
|
+
flex-direction: column;
|
|
20811
20765
|
gap: var(--spacing-sm);
|
|
20766
|
+
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
20767
|
+
`;
|
|
20768
|
+
var ObjectGridItemLoadingText = (textLength) => import_react126.css`
|
|
20769
|
+
animation: ${fadeIn} 1s linear infinite alternate;
|
|
20770
|
+
border-radius: var(--rounded-base);
|
|
20771
|
+
background: var(--gray-300);
|
|
20772
|
+
display: block;
|
|
20773
|
+
width: clamp(24px, 100%, ${textLength});
|
|
20774
|
+
height: var(--fs-base);
|
|
20775
|
+
`;
|
|
20776
|
+
var ObjectGridItemLoadingImageWrapper = import_react126.css`
|
|
20777
|
+
aspect-ratio: 16/9;
|
|
20778
|
+
max-width: 100%;
|
|
20779
|
+
max-height: 100%;
|
|
20780
|
+
height: auto;
|
|
20781
|
+
padding: var(--spacing-sm);
|
|
20782
|
+
overflow: hidden;
|
|
20783
|
+
`;
|
|
20784
|
+
var ObjectGridItemLoadingImage = import_react126.css`
|
|
20785
|
+
animation: ${fadeIn} 1s linear infinite alternate;
|
|
20786
|
+
border-radius: var(--rounded-base);
|
|
20787
|
+
background: var(--gray-300);
|
|
20788
|
+
display: block;
|
|
20789
|
+
width: 100%;
|
|
20790
|
+
height: auto;
|
|
20791
|
+
aspect-ratio: 1;
|
|
20792
|
+
`;
|
|
20793
|
+
var ObjectGridItemLoadingContentWrapper = import_react126.css`
|
|
20794
|
+
padding: 0 var(--spacing-sm) var(--spacing-sm);
|
|
20795
|
+
min-height: 52px;
|
|
20796
|
+
`;
|
|
20797
|
+
var ObjectGridItemLoadingContentContainer = import_react126.css`
|
|
20812
20798
|
flex-grow: 1;
|
|
20799
|
+
gap: var(--spacing-xs);
|
|
20800
|
+
`;
|
|
20801
|
+
|
|
20802
|
+
// src/components/Objects/ObjectGridItemLoadingSkeleton.tsx
|
|
20803
|
+
var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
|
|
20804
|
+
var ObjectGridItemLoadingSkeleton2 = () => {
|
|
20805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { css: ObjectGridItemLoadingSkeleton, children: [
|
|
20806
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { css: ObjectGridItemLoadingImageWrapper, "data-testid": "object-grid-item-cover-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { css: ObjectGridItemLoadingImage, role: "presentation" }) }),
|
|
20807
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
|
|
20808
|
+
HorizontalRhythm,
|
|
20809
|
+
{
|
|
20810
|
+
css: ObjectGridItemLoadingContentWrapper,
|
|
20811
|
+
align: "flex-start",
|
|
20812
|
+
justify: "space-between",
|
|
20813
|
+
gap: "sm",
|
|
20814
|
+
children: [
|
|
20815
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(VerticalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "0", children: [
|
|
20816
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("18ch") }) }),
|
|
20817
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("12ch") })
|
|
20818
|
+
] }),
|
|
20819
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(HorizontalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "xs", justify: "flex-end", children: [
|
|
20820
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("6ch") }),
|
|
20821
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("24px") })
|
|
20822
|
+
] })
|
|
20823
|
+
]
|
|
20824
|
+
}
|
|
20825
|
+
)
|
|
20826
|
+
] });
|
|
20827
|
+
};
|
|
20828
|
+
|
|
20829
|
+
// src/components/Objects/ObjectItemLoadingSkeleton.tsx
|
|
20830
|
+
init_emotion_jsx_shim();
|
|
20831
|
+
|
|
20832
|
+
// src/components/Objects/styles/ObjectListItem.styles.ts
|
|
20833
|
+
init_emotion_jsx_shim();
|
|
20834
|
+
var import_react127 = require("@emotion/react");
|
|
20835
|
+
var ObjectListItem = import_react127.css`
|
|
20836
|
+
background: var(--white);
|
|
20837
|
+
display: grid;
|
|
20838
|
+
gap: var(--spacing-sm);
|
|
20813
20839
|
padding: var(--spacing-sm);
|
|
20814
20840
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
20841
|
+
container-type: inline-size;
|
|
20842
|
+
grid-template-columns: auto 1fr auto;
|
|
20815
20843
|
|
|
20816
20844
|
&:hover {
|
|
20817
20845
|
background: var(--gray-50);
|
|
20818
20846
|
}
|
|
20819
20847
|
`;
|
|
20820
|
-
var ObjectListItemSingle =
|
|
20848
|
+
var ObjectListItemSingle = import_react127.css`
|
|
20821
20849
|
align-items: center;
|
|
20822
20850
|
`;
|
|
20823
|
-
var ObjectListItemContentWrapper =
|
|
20851
|
+
var ObjectListItemContentWrapper = import_react127.css`
|
|
20852
|
+
display: grid;
|
|
20853
|
+
gap: var(--spacing-sm);
|
|
20854
|
+
justify-content: space-between;
|
|
20824
20855
|
flex-grow: 1;
|
|
20856
|
+
|
|
20857
|
+
${cq("34rem")} {
|
|
20858
|
+
grid-template-columns: auto 1fr auto;
|
|
20859
|
+
}
|
|
20825
20860
|
`;
|
|
20826
|
-
var
|
|
20861
|
+
var ObjectListItemRightSlot = import_react127.css`
|
|
20862
|
+
display: flex;
|
|
20863
|
+
gap: var(--spacing-sm);
|
|
20864
|
+
`;
|
|
20865
|
+
var ObjectListItemContainer = import_react127.css`
|
|
20827
20866
|
> [role='listitem'] {
|
|
20828
20867
|
border-top: 1px solid var(--gray-200);
|
|
20829
20868
|
}
|
|
20830
20869
|
`;
|
|
20831
|
-
var ObjectListItemCover =
|
|
20832
|
-
|
|
20833
|
-
|
|
20870
|
+
var ObjectListItemCover = import_react127.css`
|
|
20871
|
+
align-items: center;
|
|
20872
|
+
background: var(--gray-100);
|
|
20873
|
+
color: var(--gray-500);
|
|
20874
|
+
display: flex;
|
|
20875
|
+
width: 80px;
|
|
20876
|
+
height: 45px;
|
|
20877
|
+
text-align: center;
|
|
20878
|
+
font-size: var(--fs-xs);
|
|
20879
|
+
`;
|
|
20880
|
+
var ObjectListItemImage = import_react127.css`
|
|
20834
20881
|
object-fit: cover;
|
|
20835
|
-
|
|
20836
|
-
|
|
20837
|
-
background: var(--gray-200);
|
|
20838
|
-
height: 45px;
|
|
20839
|
-
}
|
|
20882
|
+
width: 100%;
|
|
20883
|
+
height: 100%;
|
|
20840
20884
|
`;
|
|
20841
|
-
var ObjectListItemLoading =
|
|
20885
|
+
var ObjectListItemLoading = import_react127.css`
|
|
20842
20886
|
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
20843
20887
|
background: var(--white);
|
|
20844
20888
|
display: flex;
|
|
@@ -20846,15 +20890,18 @@ var ObjectListItemLoading = import_react126.css`
|
|
|
20846
20890
|
flex-grow: 1;
|
|
20847
20891
|
padding: var(--spacing-sm);
|
|
20848
20892
|
`;
|
|
20849
|
-
var
|
|
20893
|
+
var ObjectListItemLoadingInner = import_react127.css`
|
|
20894
|
+
flex-grow: 1;
|
|
20895
|
+
`;
|
|
20896
|
+
var ObjectListItemLoadingText = (textLength) => import_react127.css`
|
|
20850
20897
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
20851
20898
|
border-radius: var(--rounded-base);
|
|
20852
20899
|
background: var(--gray-300);
|
|
20853
20900
|
display: block;
|
|
20854
|
-
width: ${textLength};
|
|
20901
|
+
width: clamp(10ch, 100%, ${textLength});
|
|
20855
20902
|
height: var(--fs-base);
|
|
20856
20903
|
`;
|
|
20857
|
-
var ObjectListItemLoadingImage =
|
|
20904
|
+
var ObjectListItemLoadingImage = import_react127.css`
|
|
20858
20905
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
20859
20906
|
border-radius: var(--rounded-base);
|
|
20860
20907
|
background: var(--gray-300);
|
|
@@ -20862,31 +20909,43 @@ var ObjectListItemLoadingImage = import_react126.css`
|
|
|
20862
20909
|
width: 80px;
|
|
20863
20910
|
height: 55px;
|
|
20864
20911
|
`;
|
|
20912
|
+
var ObjectListItemHeadingWrapper = import_react127.css`
|
|
20913
|
+
display: flex;
|
|
20914
|
+
gap: var(--spacing-xs);
|
|
20915
|
+
`;
|
|
20865
20916
|
|
|
20866
20917
|
// src/components/Objects/ObjectItemLoadingSkeleton.tsx
|
|
20867
|
-
var
|
|
20868
|
-
var ObjectItemLoadingSkeleton = ({
|
|
20869
|
-
|
|
20870
|
-
|
|
20871
|
-
|
|
20872
|
-
|
|
20873
|
-
|
|
20874
|
-
|
|
20875
|
-
|
|
20876
|
-
|
|
20877
|
-
|
|
20878
|
-
|
|
20879
|
-
|
|
20880
|
-
|
|
20881
|
-
|
|
20918
|
+
var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
|
|
20919
|
+
var ObjectItemLoadingSkeleton = ({
|
|
20920
|
+
showCover,
|
|
20921
|
+
renderAs = "single"
|
|
20922
|
+
}) => {
|
|
20923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
|
|
20924
|
+
"div",
|
|
20925
|
+
{
|
|
20926
|
+
css: [
|
|
20927
|
+
ObjectListItemLoading,
|
|
20928
|
+
{
|
|
20929
|
+
alignItems: renderAs === "multi" ? "flex-start" : "center"
|
|
20930
|
+
}
|
|
20931
|
+
],
|
|
20932
|
+
children: [
|
|
20933
|
+
showCover ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { "data-testid": "object-list-item-cover-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { role: "presentation", css: ObjectListItemLoadingImage }) }) : null,
|
|
20934
|
+
/* @__PURE__ */ (0, import_jsx_runtime109.jsx)(VerticalRhythm, { css: ObjectListItemLoadingInner, justify: "space-between", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(VerticalRhythm, { gap: "xs", children: [
|
|
20935
|
+
/* @__PURE__ */ (0, import_jsx_runtime109.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { role: "presentation", css: ObjectListItemLoadingText("30ch") }) }),
|
|
20936
|
+
/* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { role: "presentation", css: ObjectListItemLoadingText("20ch") })
|
|
20937
|
+
] }) })
|
|
20938
|
+
]
|
|
20939
|
+
}
|
|
20940
|
+
);
|
|
20882
20941
|
};
|
|
20883
20942
|
|
|
20884
20943
|
// src/components/Objects/ObjectListItem.tsx
|
|
20885
20944
|
init_emotion_jsx_shim();
|
|
20886
|
-
var
|
|
20945
|
+
var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
|
|
20887
20946
|
var ObjectListItem2 = (props) => {
|
|
20888
|
-
const { renderAs, isSelected, cover, header: header2, rightSlot, menuItems, ...divProps } = props;
|
|
20889
|
-
return /* @__PURE__ */ (0,
|
|
20947
|
+
const { renderAs, isSelected, cover, header: header2, rightSlot, menuItems, dragHandle, ...divProps } = props;
|
|
20948
|
+
return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
|
|
20890
20949
|
"div",
|
|
20891
20950
|
{
|
|
20892
20951
|
role: "listitem",
|
|
@@ -20895,24 +20954,23 @@ var ObjectListItem2 = (props) => {
|
|
|
20895
20954
|
"aria-selected": isSelected,
|
|
20896
20955
|
...divProps,
|
|
20897
20956
|
children: [
|
|
20898
|
-
|
|
20899
|
-
/* @__PURE__ */ (0,
|
|
20900
|
-
/* @__PURE__ */ (0,
|
|
20901
|
-
|
|
20957
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: dragHandle }),
|
|
20958
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { css: ObjectListItemContentWrapper, children: [
|
|
20959
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: cover }),
|
|
20960
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(VerticalRhythm, { gap: "0", children: [
|
|
20961
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: header2 }),
|
|
20902
20962
|
renderAs === "multi" ? props.children : null
|
|
20903
20963
|
] }),
|
|
20904
|
-
/* @__PURE__ */ (0,
|
|
20905
|
-
|
|
20906
|
-
|
|
20907
|
-
|
|
20908
|
-
|
|
20909
|
-
|
|
20910
|
-
|
|
20911
|
-
|
|
20912
|
-
|
|
20913
|
-
|
|
20914
|
-
] })
|
|
20915
|
-
] })
|
|
20964
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HorizontalRhythm, { gap: "xs", align: "flex-start", children: rightSlot })
|
|
20965
|
+
] }),
|
|
20966
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HorizontalRhythm, { gap: "0", align: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
|
|
20967
|
+
Menu,
|
|
20968
|
+
{
|
|
20969
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(MenuThreeDots, { "data-testid": "object-list-item-menu-btn" }),
|
|
20970
|
+
placement: "bottom-end",
|
|
20971
|
+
children: menuItems
|
|
20972
|
+
}
|
|
20973
|
+
) }) : null
|
|
20916
20974
|
]
|
|
20917
20975
|
}
|
|
20918
20976
|
);
|
|
@@ -20920,43 +20978,68 @@ var ObjectListItem2 = (props) => {
|
|
|
20920
20978
|
|
|
20921
20979
|
// src/components/Objects/ObjectListItemContainer.tsx
|
|
20922
20980
|
init_emotion_jsx_shim();
|
|
20923
|
-
var
|
|
20924
|
-
var ObjectListItemContainer2 = ({ children, ...props }) => {
|
|
20925
|
-
return /* @__PURE__ */ (0,
|
|
20981
|
+
var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
|
|
20982
|
+
var ObjectListItemContainer2 = ({ children, gap = "0", ...props }) => {
|
|
20983
|
+
return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(VerticalRhythm, { gap, css: ObjectListItemContainer, role: "list", ...props, children });
|
|
20926
20984
|
};
|
|
20927
20985
|
|
|
20928
20986
|
// src/components/Objects/ObjectListItemCover.tsx
|
|
20929
20987
|
init_emotion_jsx_shim();
|
|
20930
|
-
var
|
|
20931
|
-
var ObjectListItemCover2 = ({
|
|
20988
|
+
var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
|
|
20989
|
+
var ObjectListItemCover2 = ({
|
|
20990
|
+
imageUrl,
|
|
20991
|
+
noImageText = "Image not available",
|
|
20992
|
+
...props
|
|
20993
|
+
}) => {
|
|
20932
20994
|
if (!imageUrl) {
|
|
20933
|
-
return /* @__PURE__ */ (0,
|
|
20995
|
+
return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
|
|
20934
20996
|
}
|
|
20935
|
-
return /* @__PURE__ */ (0,
|
|
20997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { css: ObjectListItemCover, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
|
|
20936
20998
|
"img",
|
|
20937
20999
|
{
|
|
20938
|
-
css: ObjectListItemCover,
|
|
20939
21000
|
src: imageUrl,
|
|
21001
|
+
css: ObjectListItemImage,
|
|
20940
21002
|
loading: "lazy",
|
|
20941
21003
|
"data-testid": "object-list-item-thumbnail",
|
|
20942
21004
|
...props
|
|
20943
21005
|
}
|
|
20944
|
-
);
|
|
21006
|
+
) });
|
|
20945
21007
|
};
|
|
20946
21008
|
|
|
20947
21009
|
// src/components/Objects/ObjectListItemHeading.tsx
|
|
20948
21010
|
init_emotion_jsx_shim();
|
|
20949
|
-
|
|
20950
|
-
|
|
21011
|
+
|
|
21012
|
+
// src/components/Objects/styles/ObjectListItemHeading.styles.ts
|
|
21013
|
+
init_emotion_jsx_shim();
|
|
21014
|
+
var import_react128 = require("@emotion/react");
|
|
21015
|
+
var ObjectListItemHeading = import_react128.css`
|
|
21016
|
+
display: flex;
|
|
21017
|
+
flex-direction: column;
|
|
21018
|
+
gap: var(--spacing-xs);
|
|
21019
|
+
|
|
21020
|
+
${cq("34rem")} {
|
|
21021
|
+
align-items: center;
|
|
21022
|
+
flex-direction: row;
|
|
21023
|
+
}
|
|
21024
|
+
`;
|
|
21025
|
+
var ObjectListItemHeadingAfterWrapper = import_react128.css`
|
|
21026
|
+
line-height: 1.25;
|
|
21027
|
+
`;
|
|
21028
|
+
|
|
21029
|
+
// src/components/Objects/ObjectListItemHeading.tsx
|
|
21030
|
+
var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
|
|
21031
|
+
var ObjectListItemHeading2 = ({
|
|
20951
21032
|
heading,
|
|
20952
21033
|
beforeHeadingSlot,
|
|
20953
21034
|
afterHeadingSlot,
|
|
20954
21035
|
...props
|
|
20955
21036
|
}) => {
|
|
20956
|
-
return /* @__PURE__ */ (0,
|
|
20957
|
-
beforeHeadingSlot,
|
|
20958
|
-
/* @__PURE__ */ (0,
|
|
20959
|
-
|
|
21037
|
+
return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { css: ObjectListItemHeading, ...props, children: [
|
|
21038
|
+
beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: beforeHeadingSlot }) : null,
|
|
21039
|
+
/* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(HorizontalRhythm, { css: ObjectListItemHeadingAfterWrapper, gap: "xs", align: "flex-start", children: [
|
|
21040
|
+
/* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { role: "heading", children: heading }),
|
|
21041
|
+
afterHeadingSlot
|
|
21042
|
+
] })
|
|
20960
21043
|
] });
|
|
20961
21044
|
};
|
|
20962
21045
|
|
|
@@ -20994,7 +21077,7 @@ var page = import_css.css`
|
|
|
20994
21077
|
`;
|
|
20995
21078
|
|
|
20996
21079
|
// src/components/Pagination/Pagination.tsx
|
|
20997
|
-
var
|
|
21080
|
+
var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
|
|
20998
21081
|
function Pagination({
|
|
20999
21082
|
limit,
|
|
21000
21083
|
offset,
|
|
@@ -21009,12 +21092,12 @@ function Pagination({
|
|
|
21009
21092
|
if (pageCount <= 1) {
|
|
21010
21093
|
return null;
|
|
21011
21094
|
}
|
|
21012
|
-
return /* @__PURE__ */ (0,
|
|
21095
|
+
return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
|
|
21013
21096
|
import_react_paginate.default,
|
|
21014
21097
|
{
|
|
21015
21098
|
forcePage: currentPage,
|
|
21016
|
-
previousLabel: /* @__PURE__ */ (0,
|
|
21017
|
-
nextLabel: /* @__PURE__ */ (0,
|
|
21099
|
+
previousLabel: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: prevNextControls, children: "<" }),
|
|
21100
|
+
nextLabel: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: prevNextControls, children: ">" }),
|
|
21018
21101
|
breakLabel: "...",
|
|
21019
21102
|
pageCount,
|
|
21020
21103
|
marginPagesDisplayed: 2,
|
|
@@ -21034,8 +21117,8 @@ function Pagination({
|
|
|
21034
21117
|
|
|
21035
21118
|
// src/components/ParameterInputs/hooks/ParameterShellContext.tsx
|
|
21036
21119
|
init_emotion_jsx_shim();
|
|
21037
|
-
var
|
|
21038
|
-
var ParameterShellContext = (0,
|
|
21120
|
+
var import_react129 = require("react");
|
|
21121
|
+
var ParameterShellContext = (0, import_react129.createContext)({
|
|
21039
21122
|
id: "",
|
|
21040
21123
|
label: "",
|
|
21041
21124
|
hiddenLabel: void 0,
|
|
@@ -21044,7 +21127,7 @@ var ParameterShellContext = (0, import_react127.createContext)({
|
|
|
21044
21127
|
}
|
|
21045
21128
|
});
|
|
21046
21129
|
var useParameterShell = () => {
|
|
21047
|
-
const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0,
|
|
21130
|
+
const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react129.useContext)(ParameterShellContext);
|
|
21048
21131
|
return {
|
|
21049
21132
|
id,
|
|
21050
21133
|
label,
|
|
@@ -21059,8 +21142,8 @@ init_emotion_jsx_shim();
|
|
|
21059
21142
|
|
|
21060
21143
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
21061
21144
|
init_emotion_jsx_shim();
|
|
21062
|
-
var
|
|
21063
|
-
var inputIconBtn =
|
|
21145
|
+
var import_react130 = require("@emotion/react");
|
|
21146
|
+
var inputIconBtn = import_react130.css`
|
|
21064
21147
|
align-items: center;
|
|
21065
21148
|
border: none;
|
|
21066
21149
|
border-radius: var(--rounded-base);
|
|
@@ -21086,7 +21169,7 @@ var inputIconBtn = import_react128.css`
|
|
|
21086
21169
|
`;
|
|
21087
21170
|
|
|
21088
21171
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
21089
|
-
var
|
|
21172
|
+
var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
|
|
21090
21173
|
var LabelLeadingIcon = ({
|
|
21091
21174
|
icon,
|
|
21092
21175
|
iconColor,
|
|
@@ -21098,7 +21181,7 @@ var LabelLeadingIcon = ({
|
|
|
21098
21181
|
...props
|
|
21099
21182
|
}) => {
|
|
21100
21183
|
const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
|
|
21101
|
-
return /* @__PURE__ */ (0,
|
|
21184
|
+
return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Tooltip, { title: titleFr, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
|
|
21102
21185
|
"button",
|
|
21103
21186
|
{
|
|
21104
21187
|
css: inputIconBtn,
|
|
@@ -21108,7 +21191,7 @@ var LabelLeadingIcon = ({
|
|
|
21108
21191
|
...props,
|
|
21109
21192
|
"data-testid": "lock-button",
|
|
21110
21193
|
children: [
|
|
21111
|
-
/* @__PURE__ */ (0,
|
|
21194
|
+
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
|
|
21112
21195
|
Icon,
|
|
21113
21196
|
{
|
|
21114
21197
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -21128,8 +21211,8 @@ init_emotion_jsx_shim();
|
|
|
21128
21211
|
|
|
21129
21212
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
21130
21213
|
init_emotion_jsx_shim();
|
|
21131
|
-
var
|
|
21132
|
-
var inputContainer2 =
|
|
21214
|
+
var import_react131 = require("@emotion/react");
|
|
21215
|
+
var inputContainer2 = import_react131.css`
|
|
21133
21216
|
position: relative;
|
|
21134
21217
|
scroll-margin: var(--spacing-2xl);
|
|
21135
21218
|
|
|
@@ -21142,14 +21225,14 @@ var inputContainer2 = import_react129.css`
|
|
|
21142
21225
|
}
|
|
21143
21226
|
}
|
|
21144
21227
|
`;
|
|
21145
|
-
var labelText2 =
|
|
21228
|
+
var labelText2 = import_react131.css`
|
|
21146
21229
|
align-items: center;
|
|
21147
21230
|
display: flex;
|
|
21148
21231
|
gap: var(--spacing-xs);
|
|
21149
21232
|
font-weight: var(--fw-regular);
|
|
21150
21233
|
margin: 0 0 var(--spacing-xs);
|
|
21151
21234
|
`;
|
|
21152
|
-
var input3 =
|
|
21235
|
+
var input3 = import_react131.css`
|
|
21153
21236
|
display: block;
|
|
21154
21237
|
appearance: none;
|
|
21155
21238
|
box-sizing: border-box;
|
|
@@ -21197,18 +21280,18 @@ var input3 = import_react129.css`
|
|
|
21197
21280
|
color: var(--gray-400);
|
|
21198
21281
|
}
|
|
21199
21282
|
`;
|
|
21200
|
-
var selectInput =
|
|
21283
|
+
var selectInput = import_react131.css`
|
|
21201
21284
|
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
|
|
21202
21285
|
background-position: right var(--spacing-sm) center;
|
|
21203
21286
|
background-repeat: no-repeat;
|
|
21204
21287
|
background-size: 1rem;
|
|
21205
21288
|
padding-right: var(--spacing-xl);
|
|
21206
21289
|
`;
|
|
21207
|
-
var inputWrapper =
|
|
21290
|
+
var inputWrapper = import_react131.css`
|
|
21208
21291
|
display: flex; // used to correct overflow with chrome textarea
|
|
21209
21292
|
position: relative;
|
|
21210
21293
|
`;
|
|
21211
|
-
var inputIcon2 =
|
|
21294
|
+
var inputIcon2 = import_react131.css`
|
|
21212
21295
|
align-items: center;
|
|
21213
21296
|
background: var(--white);
|
|
21214
21297
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -21224,7 +21307,7 @@ var inputIcon2 = import_react129.css`
|
|
|
21224
21307
|
width: var(--spacing-lg);
|
|
21225
21308
|
z-index: var(--z-10);
|
|
21226
21309
|
`;
|
|
21227
|
-
var inputToggleLabel2 =
|
|
21310
|
+
var inputToggleLabel2 = import_react131.css`
|
|
21228
21311
|
--inline-label-color: var(--typography-base);
|
|
21229
21312
|
align-items: center;
|
|
21230
21313
|
cursor: pointer;
|
|
@@ -21239,7 +21322,7 @@ var inputToggleLabel2 = import_react129.css`
|
|
|
21239
21322
|
--inline-label-color: var(--gray-400);
|
|
21240
21323
|
}
|
|
21241
21324
|
`;
|
|
21242
|
-
var toggleInput2 =
|
|
21325
|
+
var toggleInput2 = import_react131.css`
|
|
21243
21326
|
appearance: none;
|
|
21244
21327
|
border: 1px solid var(--gray-200);
|
|
21245
21328
|
background: var(--white);
|
|
@@ -21292,7 +21375,7 @@ var toggleInput2 = import_react129.css`
|
|
|
21292
21375
|
border-color: var(--gray-300);
|
|
21293
21376
|
}
|
|
21294
21377
|
`;
|
|
21295
|
-
var inlineLabel2 =
|
|
21378
|
+
var inlineLabel2 = import_react131.css`
|
|
21296
21379
|
color: var(--inline-label-color);
|
|
21297
21380
|
padding-left: var(--spacing-md);
|
|
21298
21381
|
font-size: var(--fs-sm);
|
|
@@ -21309,7 +21392,7 @@ var inlineLabel2 = import_react129.css`
|
|
|
21309
21392
|
}
|
|
21310
21393
|
}
|
|
21311
21394
|
`;
|
|
21312
|
-
var inputMenu =
|
|
21395
|
+
var inputMenu = import_react131.css`
|
|
21313
21396
|
background: none;
|
|
21314
21397
|
border: none;
|
|
21315
21398
|
padding: var(--spacing-2xs);
|
|
@@ -21317,10 +21400,10 @@ var inputMenu = import_react129.css`
|
|
|
21317
21400
|
top: calc(var(--spacing-md) * -1.2);
|
|
21318
21401
|
right: 0;
|
|
21319
21402
|
`;
|
|
21320
|
-
var inputActionItems =
|
|
21403
|
+
var inputActionItems = import_react131.css`
|
|
21321
21404
|
display: flex;
|
|
21322
21405
|
`;
|
|
21323
|
-
var inputMenuHover =
|
|
21406
|
+
var inputMenuHover = import_react131.css`
|
|
21324
21407
|
opacity: var(--opacity-50);
|
|
21325
21408
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
21326
21409
|
|
|
@@ -21330,11 +21413,11 @@ var inputMenuHover = import_react129.css`
|
|
|
21330
21413
|
background-color: var(--gray-200);
|
|
21331
21414
|
}
|
|
21332
21415
|
`;
|
|
21333
|
-
var textarea2 =
|
|
21416
|
+
var textarea2 = import_react131.css`
|
|
21334
21417
|
resize: vertical;
|
|
21335
21418
|
min-height: 2rem;
|
|
21336
21419
|
`;
|
|
21337
|
-
var dataConnectButton =
|
|
21420
|
+
var dataConnectButton = import_react131.css`
|
|
21338
21421
|
align-items: center;
|
|
21339
21422
|
appearance: none;
|
|
21340
21423
|
box-sizing: border-box;
|
|
@@ -21369,7 +21452,7 @@ var dataConnectButton = import_react129.css`
|
|
|
21369
21452
|
pointer-events: none;
|
|
21370
21453
|
}
|
|
21371
21454
|
`;
|
|
21372
|
-
var linkParameterBtn =
|
|
21455
|
+
var linkParameterBtn = import_react131.css`
|
|
21373
21456
|
border-radius: var(--rounded-base);
|
|
21374
21457
|
background: transparent;
|
|
21375
21458
|
border: none;
|
|
@@ -21378,7 +21461,7 @@ var linkParameterBtn = import_react129.css`
|
|
|
21378
21461
|
font-size: var(--fs-sm);
|
|
21379
21462
|
line-height: 1;
|
|
21380
21463
|
`;
|
|
21381
|
-
var linkParameterControls =
|
|
21464
|
+
var linkParameterControls = import_react131.css`
|
|
21382
21465
|
position: absolute;
|
|
21383
21466
|
inset: 0 0 0 auto;
|
|
21384
21467
|
padding: 0 var(--spacing-base);
|
|
@@ -21387,7 +21470,7 @@ var linkParameterControls = import_react129.css`
|
|
|
21387
21470
|
justify-content: center;
|
|
21388
21471
|
gap: var(--spacing-base);
|
|
21389
21472
|
`;
|
|
21390
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
21473
|
+
var linkParameterInput = (withExternalLinkIcon) => import_react131.css`
|
|
21391
21474
|
padding-right: calc(
|
|
21392
21475
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
21393
21476
|
var(--spacing-base)
|
|
@@ -21400,7 +21483,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react129.css`
|
|
|
21400
21483
|
}
|
|
21401
21484
|
}
|
|
21402
21485
|
`;
|
|
21403
|
-
var linkParameterIcon =
|
|
21486
|
+
var linkParameterIcon = import_react131.css`
|
|
21404
21487
|
align-items: center;
|
|
21405
21488
|
color: var(--brand-secondary-3);
|
|
21406
21489
|
display: flex;
|
|
@@ -21415,7 +21498,7 @@ var linkParameterIcon = import_react129.css`
|
|
|
21415
21498
|
`;
|
|
21416
21499
|
|
|
21417
21500
|
// src/components/ParameterInputs/ParameterDataResource.tsx
|
|
21418
|
-
var
|
|
21501
|
+
var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
|
|
21419
21502
|
function ParameterDataResource({
|
|
21420
21503
|
label,
|
|
21421
21504
|
labelLeadingIcon,
|
|
@@ -21425,12 +21508,12 @@ function ParameterDataResource({
|
|
|
21425
21508
|
disabled: disabled2,
|
|
21426
21509
|
children
|
|
21427
21510
|
}) {
|
|
21428
|
-
return /* @__PURE__ */ (0,
|
|
21429
|
-
/* @__PURE__ */ (0,
|
|
21511
|
+
return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
|
|
21512
|
+
/* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("span", { css: labelText2, children: [
|
|
21430
21513
|
labelLeadingIcon ? labelLeadingIcon : null,
|
|
21431
21514
|
label
|
|
21432
21515
|
] }),
|
|
21433
|
-
/* @__PURE__ */ (0,
|
|
21516
|
+
/* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
|
|
21434
21517
|
"button",
|
|
21435
21518
|
{
|
|
21436
21519
|
type: "button",
|
|
@@ -21439,12 +21522,12 @@ function ParameterDataResource({
|
|
|
21439
21522
|
disabled: disabled2,
|
|
21440
21523
|
onClick: onConnectDatasource,
|
|
21441
21524
|
children: [
|
|
21442
|
-
/* @__PURE__ */ (0,
|
|
21525
|
+
/* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
|
|
21443
21526
|
children
|
|
21444
21527
|
]
|
|
21445
21528
|
}
|
|
21446
21529
|
),
|
|
21447
|
-
caption ? /* @__PURE__ */ (0,
|
|
21530
|
+
caption ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Caption, { children: caption }) : null
|
|
21448
21531
|
] });
|
|
21449
21532
|
}
|
|
21450
21533
|
|
|
@@ -21453,20 +21536,20 @@ init_emotion_jsx_shim();
|
|
|
21453
21536
|
|
|
21454
21537
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
21455
21538
|
init_emotion_jsx_shim();
|
|
21456
|
-
var
|
|
21457
|
-
var ParameterDrawerHeaderContainer =
|
|
21539
|
+
var import_react132 = require("@emotion/react");
|
|
21540
|
+
var ParameterDrawerHeaderContainer = import_react132.css`
|
|
21458
21541
|
align-items: center;
|
|
21459
21542
|
display: flex;
|
|
21460
21543
|
gap: var(--spacing-base);
|
|
21461
21544
|
justify-content: space-between;
|
|
21462
21545
|
margin-bottom: var(--spacing-sm);
|
|
21463
21546
|
`;
|
|
21464
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
21547
|
+
var ParameterDrawerHeaderTitleGroup = import_react132.css`
|
|
21465
21548
|
align-items: center;
|
|
21466
21549
|
display: flex;
|
|
21467
21550
|
gap: var(--spacing-sm);
|
|
21468
21551
|
`;
|
|
21469
|
-
var ParameterDrawerHeaderTitle =
|
|
21552
|
+
var ParameterDrawerHeaderTitle = import_react132.css`
|
|
21470
21553
|
text-overflow: ellipsis;
|
|
21471
21554
|
white-space: nowrap;
|
|
21472
21555
|
overflow: hidden;
|
|
@@ -21474,12 +21557,12 @@ var ParameterDrawerHeaderTitle = import_react130.css`
|
|
|
21474
21557
|
`;
|
|
21475
21558
|
|
|
21476
21559
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
21477
|
-
var
|
|
21560
|
+
var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
|
|
21478
21561
|
var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
21479
|
-
return /* @__PURE__ */ (0,
|
|
21480
|
-
/* @__PURE__ */ (0,
|
|
21562
|
+
return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
21563
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
21481
21564
|
iconBeforeTitle,
|
|
21482
|
-
/* @__PURE__ */ (0,
|
|
21565
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
|
|
21483
21566
|
] }),
|
|
21484
21567
|
children
|
|
21485
21568
|
] });
|
|
@@ -21487,12 +21570,12 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
|
21487
21570
|
|
|
21488
21571
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
21489
21572
|
init_emotion_jsx_shim();
|
|
21490
|
-
var
|
|
21573
|
+
var import_react134 = require("react");
|
|
21491
21574
|
|
|
21492
21575
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
21493
21576
|
init_emotion_jsx_shim();
|
|
21494
|
-
var
|
|
21495
|
-
var fieldsetStyles =
|
|
21577
|
+
var import_react133 = require("@emotion/react");
|
|
21578
|
+
var fieldsetStyles = import_react133.css`
|
|
21496
21579
|
&:disabled,
|
|
21497
21580
|
[readonly] {
|
|
21498
21581
|
pointer-events: none;
|
|
@@ -21503,7 +21586,7 @@ var fieldsetStyles = import_react131.css`
|
|
|
21503
21586
|
}
|
|
21504
21587
|
}
|
|
21505
21588
|
`;
|
|
21506
|
-
var fieldsetLegend2 =
|
|
21589
|
+
var fieldsetLegend2 = import_react133.css`
|
|
21507
21590
|
display: block;
|
|
21508
21591
|
font-weight: var(--fw-medium);
|
|
21509
21592
|
margin-bottom: var(--spacing-sm);
|
|
@@ -21511,11 +21594,11 @@ var fieldsetLegend2 = import_react131.css`
|
|
|
21511
21594
|
`;
|
|
21512
21595
|
|
|
21513
21596
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
21514
|
-
var
|
|
21515
|
-
var ParameterGroup = (0,
|
|
21597
|
+
var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
|
|
21598
|
+
var ParameterGroup = (0, import_react134.forwardRef)(
|
|
21516
21599
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
21517
|
-
return /* @__PURE__ */ (0,
|
|
21518
|
-
/* @__PURE__ */ (0,
|
|
21600
|
+
return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
21601
|
+
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)("legend", { css: fieldsetLegend2, children: legend }),
|
|
21519
21602
|
children
|
|
21520
21603
|
] });
|
|
21521
21604
|
}
|
|
@@ -21523,24 +21606,24 @@ var ParameterGroup = (0, import_react132.forwardRef)(
|
|
|
21523
21606
|
|
|
21524
21607
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
21525
21608
|
init_emotion_jsx_shim();
|
|
21526
|
-
var
|
|
21609
|
+
var import_react141 = require("react");
|
|
21527
21610
|
|
|
21528
21611
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
21529
21612
|
init_emotion_jsx_shim();
|
|
21530
|
-
var
|
|
21613
|
+
var import_react136 = require("react");
|
|
21531
21614
|
var import_react_dom2 = require("react-dom");
|
|
21532
21615
|
|
|
21533
21616
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
21534
21617
|
init_emotion_jsx_shim();
|
|
21535
|
-
var
|
|
21536
|
-
var previewWrapper =
|
|
21618
|
+
var import_react135 = require("@emotion/react");
|
|
21619
|
+
var previewWrapper = import_react135.css`
|
|
21537
21620
|
margin-top: var(--spacing-xs);
|
|
21538
21621
|
background: var(--gray-50);
|
|
21539
21622
|
padding: var(--spacing-sm);
|
|
21540
21623
|
border: solid 1px var(--gray-300);
|
|
21541
21624
|
border-radius: var(--rounded-sm);
|
|
21542
21625
|
`;
|
|
21543
|
-
var previewLink =
|
|
21626
|
+
var previewLink = import_react135.css`
|
|
21544
21627
|
display: block;
|
|
21545
21628
|
width: 100%;
|
|
21546
21629
|
|
|
@@ -21548,7 +21631,7 @@ var previewLink = import_react133.css`
|
|
|
21548
21631
|
max-height: 9rem;
|
|
21549
21632
|
}
|
|
21550
21633
|
`;
|
|
21551
|
-
var previewModalWrapper =
|
|
21634
|
+
var previewModalWrapper = import_react135.css`
|
|
21552
21635
|
background: var(--gray-50);
|
|
21553
21636
|
display: flex;
|
|
21554
21637
|
height: 100%;
|
|
@@ -21557,7 +21640,7 @@ var previewModalWrapper = import_react133.css`
|
|
|
21557
21640
|
border: solid 1px var(--gray-300);
|
|
21558
21641
|
border-radius: var(--rounded-sm);
|
|
21559
21642
|
`;
|
|
21560
|
-
var previewModalImage =
|
|
21643
|
+
var previewModalImage = import_react135.css`
|
|
21561
21644
|
display: flex;
|
|
21562
21645
|
height: 100%;
|
|
21563
21646
|
width: 100%;
|
|
@@ -21569,32 +21652,32 @@ var previewModalImage = import_react133.css`
|
|
|
21569
21652
|
`;
|
|
21570
21653
|
|
|
21571
21654
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
21572
|
-
var
|
|
21655
|
+
var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
|
|
21573
21656
|
function ParameterImagePreview({ imageSrc }) {
|
|
21574
|
-
const [showModal, setShowModal] = (0,
|
|
21575
|
-
return imageSrc ? /* @__PURE__ */ (0,
|
|
21576
|
-
/* @__PURE__ */ (0,
|
|
21577
|
-
/* @__PURE__ */ (0,
|
|
21657
|
+
const [showModal, setShowModal] = (0, import_react136.useState)(false);
|
|
21658
|
+
return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: previewWrapper, children: [
|
|
21659
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
21660
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
21578
21661
|
"button",
|
|
21579
21662
|
{
|
|
21580
21663
|
css: previewLink,
|
|
21581
21664
|
onClick: () => {
|
|
21582
21665
|
setShowModal(true);
|
|
21583
21666
|
},
|
|
21584
|
-
children: /* @__PURE__ */ (0,
|
|
21667
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
21585
21668
|
}
|
|
21586
21669
|
)
|
|
21587
21670
|
] }) : null;
|
|
21588
21671
|
}
|
|
21589
21672
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
21590
|
-
return open ? /* @__PURE__ */ (0,
|
|
21591
|
-
/* @__PURE__ */ (0,
|
|
21673
|
+
return open ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_jsx_runtime119.Fragment, { children: (0, import_react_dom2.createPortal)(
|
|
21674
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
21592
21675
|
Modal,
|
|
21593
21676
|
{
|
|
21594
21677
|
header: "Image Preview",
|
|
21595
21678
|
onRequestClose,
|
|
21596
|
-
buttonGroup: /* @__PURE__ */ (0,
|
|
21597
|
-
children: /* @__PURE__ */ (0,
|
|
21679
|
+
buttonGroup: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
21680
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: previewModalWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
21598
21681
|
}
|
|
21599
21682
|
),
|
|
21600
21683
|
document.body
|
|
@@ -21603,27 +21686,27 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
21603
21686
|
|
|
21604
21687
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
21605
21688
|
init_emotion_jsx_shim();
|
|
21606
|
-
var
|
|
21607
|
-
var
|
|
21689
|
+
var import_react139 = require("@emotion/react");
|
|
21690
|
+
var import_react140 = require("react");
|
|
21608
21691
|
|
|
21609
21692
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
21610
21693
|
init_emotion_jsx_shim();
|
|
21611
|
-
var
|
|
21694
|
+
var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
|
|
21612
21695
|
var ParameterLabel = ({ id, asSpan, children, ...props }) => {
|
|
21613
|
-
return !asSpan ? /* @__PURE__ */ (0,
|
|
21696
|
+
return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
|
|
21614
21697
|
};
|
|
21615
21698
|
|
|
21616
21699
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
21617
21700
|
init_emotion_jsx_shim();
|
|
21618
|
-
var
|
|
21619
|
-
var
|
|
21620
|
-
var ParameterMenuButton = (0,
|
|
21701
|
+
var import_react137 = require("react");
|
|
21702
|
+
var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
|
|
21703
|
+
var ParameterMenuButton = (0, import_react137.forwardRef)(
|
|
21621
21704
|
({ label, children }, ref) => {
|
|
21622
|
-
return /* @__PURE__ */ (0,
|
|
21705
|
+
return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
|
|
21623
21706
|
Menu,
|
|
21624
21707
|
{
|
|
21625
21708
|
menuLabel: `${label} menu`,
|
|
21626
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
21709
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
|
|
21627
21710
|
"button",
|
|
21628
21711
|
{
|
|
21629
21712
|
className: "parameter-menu",
|
|
@@ -21631,7 +21714,7 @@ var ParameterMenuButton = (0, import_react135.forwardRef)(
|
|
|
21631
21714
|
type: "button",
|
|
21632
21715
|
"aria-label": `${label} options`,
|
|
21633
21716
|
ref,
|
|
21634
|
-
children: /* @__PURE__ */ (0,
|
|
21717
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
21635
21718
|
}
|
|
21636
21719
|
),
|
|
21637
21720
|
children
|
|
@@ -21642,14 +21725,14 @@ var ParameterMenuButton = (0, import_react135.forwardRef)(
|
|
|
21642
21725
|
|
|
21643
21726
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
21644
21727
|
init_emotion_jsx_shim();
|
|
21645
|
-
var
|
|
21646
|
-
var emptyParameterShell =
|
|
21728
|
+
var import_react138 = require("@emotion/react");
|
|
21729
|
+
var emptyParameterShell = import_react138.css`
|
|
21647
21730
|
border-radius: var(--rounded-sm);
|
|
21648
21731
|
flex-grow: 1;
|
|
21649
21732
|
position: relative;
|
|
21650
21733
|
max-width: 100%;
|
|
21651
21734
|
`;
|
|
21652
|
-
var emptyParameterShellText =
|
|
21735
|
+
var emptyParameterShellText = import_react138.css`
|
|
21653
21736
|
background: var(--brand-secondary-6);
|
|
21654
21737
|
border-radius: var(--rounded-sm);
|
|
21655
21738
|
padding: var(--spacing-sm);
|
|
@@ -21657,7 +21740,7 @@ var emptyParameterShellText = import_react136.css`
|
|
|
21657
21740
|
font-size: var(--fs-sm);
|
|
21658
21741
|
margin: 0;
|
|
21659
21742
|
`;
|
|
21660
|
-
var overrideMarker =
|
|
21743
|
+
var overrideMarker = import_react138.css`
|
|
21661
21744
|
border-radius: var(--rounded-sm);
|
|
21662
21745
|
border: 10px solid var(--gray-300);
|
|
21663
21746
|
border-left-color: transparent;
|
|
@@ -21668,7 +21751,7 @@ var overrideMarker = import_react136.css`
|
|
|
21668
21751
|
`;
|
|
21669
21752
|
|
|
21670
21753
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
21671
|
-
var
|
|
21754
|
+
var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
|
|
21672
21755
|
var extractParameterProps = (props) => {
|
|
21673
21756
|
const {
|
|
21674
21757
|
id,
|
|
@@ -21728,36 +21811,36 @@ var ParameterShell = ({
|
|
|
21728
21811
|
isParameterGroup = false,
|
|
21729
21812
|
...props
|
|
21730
21813
|
}) => {
|
|
21731
|
-
const [manualErrorMessage, setManualErrorMessage] = (0,
|
|
21814
|
+
const [manualErrorMessage, setManualErrorMessage] = (0, import_react140.useState)(void 0);
|
|
21732
21815
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
21733
21816
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
21734
|
-
return /* @__PURE__ */ (0,
|
|
21735
|
-
hiddenLabel || title2 ? null : /* @__PURE__ */ (0,
|
|
21817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: inputContainer2, ...props, id, children: [
|
|
21818
|
+
hiddenLabel || title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(ParameterLabel, { id, css: labelText2, children: [
|
|
21736
21819
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
21737
21820
|
label,
|
|
21738
21821
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
21739
21822
|
] }),
|
|
21740
|
-
!title2 ? null : /* @__PURE__ */ (0,
|
|
21823
|
+
!title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(ParameterLabel, { id, asSpan: true, children: [
|
|
21741
21824
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
21742
21825
|
title2,
|
|
21743
21826
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
21744
21827
|
] }),
|
|
21745
|
-
/* @__PURE__ */ (0,
|
|
21746
|
-
actionItems ? /* @__PURE__ */ (0,
|
|
21828
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: inputWrapper, children: [
|
|
21829
|
+
actionItems ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
21747
21830
|
"div",
|
|
21748
21831
|
{
|
|
21749
21832
|
css: [
|
|
21750
21833
|
inputMenu,
|
|
21751
21834
|
inputActionItems,
|
|
21752
|
-
menuItems ?
|
|
21835
|
+
menuItems ? import_react139.css`
|
|
21753
21836
|
right: var(--spacing-md);
|
|
21754
21837
|
` : void 0
|
|
21755
21838
|
],
|
|
21756
21839
|
children: actionItems
|
|
21757
21840
|
}
|
|
21758
21841
|
) : null,
|
|
21759
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
21760
|
-
/* @__PURE__ */ (0,
|
|
21842
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
21843
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
21761
21844
|
ParameterShellContext.Provider,
|
|
21762
21845
|
{
|
|
21763
21846
|
value: {
|
|
@@ -21767,14 +21850,14 @@ var ParameterShell = ({
|
|
|
21767
21850
|
errorMessage: errorMessaging,
|
|
21768
21851
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
21769
21852
|
},
|
|
21770
|
-
children: isParameterGroup ? /* @__PURE__ */ (0,
|
|
21853
|
+
children: isParameterGroup ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(ParameterShellPlaceholder, { children: [
|
|
21771
21854
|
children,
|
|
21772
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0,
|
|
21855
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
21773
21856
|
] })
|
|
21774
21857
|
}
|
|
21775
21858
|
)
|
|
21776
21859
|
] }),
|
|
21777
|
-
/* @__PURE__ */ (0,
|
|
21860
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
21778
21861
|
FieldMessage,
|
|
21779
21862
|
{
|
|
21780
21863
|
helperMessageTestId: captionTestId,
|
|
@@ -21788,27 +21871,27 @@ var ParameterShell = ({
|
|
|
21788
21871
|
] });
|
|
21789
21872
|
};
|
|
21790
21873
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
21791
|
-
return /* @__PURE__ */ (0,
|
|
21874
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { css: emptyParameterShell, children });
|
|
21792
21875
|
};
|
|
21793
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0,
|
|
21876
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
21794
21877
|
|
|
21795
21878
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
21796
|
-
var
|
|
21797
|
-
var ParameterImage = (0,
|
|
21879
|
+
var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
|
|
21880
|
+
var ParameterImage = (0, import_react141.forwardRef)(
|
|
21798
21881
|
({ children, ...props }, ref) => {
|
|
21799
21882
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21800
|
-
return /* @__PURE__ */ (0,
|
|
21801
|
-
/* @__PURE__ */ (0,
|
|
21883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
21884
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterImageInner, { ref, ...innerProps }),
|
|
21802
21885
|
children
|
|
21803
21886
|
] });
|
|
21804
21887
|
}
|
|
21805
21888
|
);
|
|
21806
|
-
var ParameterImageInner = (0,
|
|
21889
|
+
var ParameterImageInner = (0, import_react141.forwardRef)((props, ref) => {
|
|
21807
21890
|
const { value } = props;
|
|
21808
21891
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
21809
|
-
const deferredValue = (0,
|
|
21810
|
-
return /* @__PURE__ */ (0,
|
|
21811
|
-
/* @__PURE__ */ (0,
|
|
21892
|
+
const deferredValue = (0, import_react141.useDeferredValue)(value);
|
|
21893
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
|
|
21894
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
21812
21895
|
"input",
|
|
21813
21896
|
{
|
|
21814
21897
|
css: input3,
|
|
@@ -21820,22 +21903,22 @@ var ParameterImageInner = (0, import_react139.forwardRef)((props, ref) => {
|
|
|
21820
21903
|
...props
|
|
21821
21904
|
}
|
|
21822
21905
|
),
|
|
21823
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0,
|
|
21906
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterImagePreview, { imageSrc: deferredValue })
|
|
21824
21907
|
] });
|
|
21825
21908
|
});
|
|
21826
21909
|
|
|
21827
21910
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
21828
21911
|
init_emotion_jsx_shim();
|
|
21829
|
-
var
|
|
21830
|
-
var
|
|
21831
|
-
var ParameterInput = (0,
|
|
21912
|
+
var import_react142 = require("react");
|
|
21913
|
+
var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
|
|
21914
|
+
var ParameterInput = (0, import_react142.forwardRef)((props, ref) => {
|
|
21832
21915
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21833
|
-
return /* @__PURE__ */ (0,
|
|
21916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ParameterInputInner, { ref, ...innerProps }) });
|
|
21834
21917
|
});
|
|
21835
|
-
var ParameterInputInner = (0,
|
|
21918
|
+
var ParameterInputInner = (0, import_react142.forwardRef)(
|
|
21836
21919
|
({ ...props }, ref) => {
|
|
21837
21920
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
21838
|
-
return /* @__PURE__ */ (0,
|
|
21921
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
21839
21922
|
"input",
|
|
21840
21923
|
{
|
|
21841
21924
|
css: input3,
|
|
@@ -21852,19 +21935,19 @@ var ParameterInputInner = (0, import_react140.forwardRef)(
|
|
|
21852
21935
|
|
|
21853
21936
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
21854
21937
|
init_emotion_jsx_shim();
|
|
21855
|
-
var
|
|
21856
|
-
var
|
|
21857
|
-
var ParameterLink = (0,
|
|
21938
|
+
var import_react143 = require("react");
|
|
21939
|
+
var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
|
|
21940
|
+
var ParameterLink = (0, import_react143.forwardRef)(
|
|
21858
21941
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
21859
21942
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21860
|
-
return /* @__PURE__ */ (0,
|
|
21943
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
21861
21944
|
ParameterShell,
|
|
21862
21945
|
{
|
|
21863
21946
|
"data-testid": "link-parameter-editor",
|
|
21864
21947
|
...shellProps,
|
|
21865
21948
|
label: innerProps.value ? shellProps.label : "",
|
|
21866
21949
|
title: !innerProps.value ? shellProps.label : void 0,
|
|
21867
|
-
children: /* @__PURE__ */ (0,
|
|
21950
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
21868
21951
|
ParameterLinkInner,
|
|
21869
21952
|
{
|
|
21870
21953
|
onConnectLink,
|
|
@@ -21877,13 +21960,13 @@ var ParameterLink = (0, import_react141.forwardRef)(
|
|
|
21877
21960
|
);
|
|
21878
21961
|
}
|
|
21879
21962
|
);
|
|
21880
|
-
var ParameterLinkInner = (0,
|
|
21963
|
+
var ParameterLinkInner = (0, import_react143.forwardRef)(
|
|
21881
21964
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
21882
21965
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
21883
21966
|
if (!props.value)
|
|
21884
|
-
return /* @__PURE__ */ (0,
|
|
21885
|
-
return /* @__PURE__ */ (0,
|
|
21886
|
-
/* @__PURE__ */ (0,
|
|
21967
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
21968
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: inputWrapper, children: [
|
|
21969
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
21887
21970
|
"input",
|
|
21888
21971
|
{
|
|
21889
21972
|
type: "text",
|
|
@@ -21895,8 +21978,8 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
|
|
|
21895
21978
|
...props
|
|
21896
21979
|
}
|
|
21897
21980
|
),
|
|
21898
|
-
/* @__PURE__ */ (0,
|
|
21899
|
-
/* @__PURE__ */ (0,
|
|
21981
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: linkParameterControls, children: [
|
|
21982
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
21900
21983
|
"button",
|
|
21901
21984
|
{
|
|
21902
21985
|
type: "button",
|
|
@@ -21907,7 +21990,7 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
|
|
|
21907
21990
|
children: "edit"
|
|
21908
21991
|
}
|
|
21909
21992
|
),
|
|
21910
|
-
externalLink ? /* @__PURE__ */ (0,
|
|
21993
|
+
externalLink ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
21911
21994
|
"a",
|
|
21912
21995
|
{
|
|
21913
21996
|
href: externalLink,
|
|
@@ -21915,7 +21998,7 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
|
|
|
21915
21998
|
title: "Open link in new tab",
|
|
21916
21999
|
target: "_blank",
|
|
21917
22000
|
rel: "noopener noreferrer",
|
|
21918
|
-
children: /* @__PURE__ */ (0,
|
|
22001
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
21919
22002
|
}
|
|
21920
22003
|
) : null
|
|
21921
22004
|
] })
|
|
@@ -21925,15 +22008,15 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
|
|
|
21925
22008
|
|
|
21926
22009
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
21927
22010
|
init_emotion_jsx_shim();
|
|
21928
|
-
var
|
|
22011
|
+
var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
|
|
21929
22012
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
21930
22013
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21931
|
-
return /* @__PURE__ */ (0,
|
|
22014
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
21932
22015
|
};
|
|
21933
22016
|
var ParameterMultiSelectInner = (props) => {
|
|
21934
22017
|
var _a;
|
|
21935
22018
|
const { id, label } = useParameterShell();
|
|
21936
|
-
return /* @__PURE__ */ (0,
|
|
22019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
21937
22020
|
InputComboBox,
|
|
21938
22021
|
{
|
|
21939
22022
|
menuPortalTarget: document.body,
|
|
@@ -21984,7 +22067,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
21984
22067
|
|
|
21985
22068
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
21986
22069
|
init_emotion_jsx_shim();
|
|
21987
|
-
var
|
|
22070
|
+
var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
|
|
21988
22071
|
var ParameterNameAndPublicIdInput = ({
|
|
21989
22072
|
id,
|
|
21990
22073
|
onBlur,
|
|
@@ -22010,8 +22093,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
22010
22093
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
22011
22094
|
};
|
|
22012
22095
|
autoFocus == null ? void 0 : autoFocus();
|
|
22013
|
-
return /* @__PURE__ */ (0,
|
|
22014
|
-
/* @__PURE__ */ (0,
|
|
22096
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
|
|
22097
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
22015
22098
|
ParameterInput,
|
|
22016
22099
|
{
|
|
22017
22100
|
id: nameIdField,
|
|
@@ -22030,7 +22113,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
22030
22113
|
value: values[nameIdField]
|
|
22031
22114
|
}
|
|
22032
22115
|
),
|
|
22033
|
-
/* @__PURE__ */ (0,
|
|
22116
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
22034
22117
|
ParameterInput,
|
|
22035
22118
|
{
|
|
22036
22119
|
id: publicIdFieldName,
|
|
@@ -22044,11 +22127,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
22044
22127
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
22045
22128
|
placeholder: publicIdPlaceholderText,
|
|
22046
22129
|
errorMessage: publicIdError,
|
|
22047
|
-
menuItems: /* @__PURE__ */ (0,
|
|
22130
|
+
menuItems: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
22048
22131
|
MenuItem,
|
|
22049
22132
|
{
|
|
22050
22133
|
disabled: !values[publicIdFieldName],
|
|
22051
|
-
icon: /* @__PURE__ */ (0,
|
|
22134
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
22052
22135
|
onClick: handleCopyPidFieldValue,
|
|
22053
22136
|
children: "Copy"
|
|
22054
22137
|
}
|
|
@@ -22056,13 +22139,13 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
22056
22139
|
value: values[publicIdFieldName]
|
|
22057
22140
|
}
|
|
22058
22141
|
),
|
|
22059
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0,
|
|
22142
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
22060
22143
|
] });
|
|
22061
22144
|
};
|
|
22062
22145
|
|
|
22063
22146
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22064
22147
|
init_emotion_jsx_shim();
|
|
22065
|
-
var
|
|
22148
|
+
var import_react150 = require("@emotion/react");
|
|
22066
22149
|
var import_list3 = require("@lexical/list");
|
|
22067
22150
|
var import_markdown = require("@lexical/markdown");
|
|
22068
22151
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
@@ -22169,7 +22252,7 @@ var getLabelForElement = (type) => {
|
|
|
22169
22252
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22170
22253
|
var import_fast_equals2 = require("fast-equals");
|
|
22171
22254
|
var import_lexical6 = require("lexical");
|
|
22172
|
-
var
|
|
22255
|
+
var import_react151 = require("react");
|
|
22173
22256
|
|
|
22174
22257
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
22175
22258
|
init_emotion_jsx_shim();
|
|
@@ -22190,13 +22273,13 @@ CustomCodeNode.importDOM = function() {
|
|
|
22190
22273
|
// src/components/ParameterInputs/rich-text/DisableStylesPlugin.ts
|
|
22191
22274
|
init_emotion_jsx_shim();
|
|
22192
22275
|
var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
22193
|
-
var
|
|
22276
|
+
var import_utils5 = require("@lexical/utils");
|
|
22194
22277
|
var import_lexical = require("lexical");
|
|
22195
|
-
var
|
|
22278
|
+
var import_react144 = require("react");
|
|
22196
22279
|
function DisableStylesPlugin() {
|
|
22197
22280
|
const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
|
|
22198
|
-
(0,
|
|
22199
|
-
return (0,
|
|
22281
|
+
(0, import_react144.useEffect)(() => {
|
|
22282
|
+
return (0, import_utils5.mergeRegister)(
|
|
22200
22283
|
// Disable text alignment on paragraph nodes
|
|
22201
22284
|
editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
|
|
22202
22285
|
if (node.getFormatType() !== "") {
|
|
@@ -22390,13 +22473,13 @@ var codeElement = import_css2.css`
|
|
|
22390
22473
|
|
|
22391
22474
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
22392
22475
|
init_emotion_jsx_shim();
|
|
22393
|
-
var
|
|
22476
|
+
var import_react145 = require("@emotion/react");
|
|
22394
22477
|
var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
|
|
22395
22478
|
var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
|
|
22396
|
-
var
|
|
22479
|
+
var import_utils6 = require("@lexical/utils");
|
|
22397
22480
|
var import_fast_equals = require("fast-equals");
|
|
22398
22481
|
var import_lexical3 = require("lexical");
|
|
22399
|
-
var
|
|
22482
|
+
var import_react146 = require("react");
|
|
22400
22483
|
|
|
22401
22484
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
22402
22485
|
init_emotion_jsx_shim();
|
|
@@ -22434,7 +22517,7 @@ var getSelectedNode = (selection) => {
|
|
|
22434
22517
|
};
|
|
22435
22518
|
|
|
22436
22519
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
22437
|
-
var
|
|
22520
|
+
var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
|
|
22438
22521
|
var isProjectMapLinkValue = (value) => {
|
|
22439
22522
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
22440
22523
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -22457,7 +22540,7 @@ var guessLinkTypeFromPath = (path) => {
|
|
|
22457
22540
|
};
|
|
22458
22541
|
function convertAnchorElement(domNode) {
|
|
22459
22542
|
let node = null;
|
|
22460
|
-
if (!(0,
|
|
22543
|
+
if (!(0, import_utils6.isHTMLAnchorElement)(domNode)) {
|
|
22461
22544
|
return { node };
|
|
22462
22545
|
}
|
|
22463
22546
|
const textContent = domNode.textContent;
|
|
@@ -22566,7 +22649,7 @@ var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
|
|
|
22566
22649
|
element.setAttribute("href", `mailto:${this.__link.path}`);
|
|
22567
22650
|
}
|
|
22568
22651
|
}
|
|
22569
|
-
(0,
|
|
22652
|
+
(0, import_utils6.addClassNamesToElement)(element, config.theme.link);
|
|
22570
22653
|
return element;
|
|
22571
22654
|
}
|
|
22572
22655
|
updateDOM(prevNode, a) {
|
|
@@ -22721,16 +22804,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical3.createCommand)(
|
|
|
22721
22804
|
);
|
|
22722
22805
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
22723
22806
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
22724
|
-
var linkPopover =
|
|
22807
|
+
var linkPopover = import_react145.css`
|
|
22725
22808
|
position: absolute;
|
|
22726
22809
|
z-index: 5;
|
|
22727
22810
|
`;
|
|
22728
|
-
var linkPopoverContainer =
|
|
22811
|
+
var linkPopoverContainer = import_react145.css`
|
|
22729
22812
|
${Popover()};
|
|
22730
22813
|
align-items: center;
|
|
22731
22814
|
display: flex;
|
|
22732
22815
|
`;
|
|
22733
|
-
var linkPopoverAnchor =
|
|
22816
|
+
var linkPopoverAnchor = import_react145.css`
|
|
22734
22817
|
${link}
|
|
22735
22818
|
${linkColorDefault}
|
|
22736
22819
|
`;
|
|
@@ -22739,21 +22822,21 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22739
22822
|
return path;
|
|
22740
22823
|
};
|
|
22741
22824
|
const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
|
|
22742
|
-
const [linkPopoverState, setLinkPopoverState] = (0,
|
|
22743
|
-
const linkPopoverElRef = (0,
|
|
22744
|
-
const [isEditorFocused, setIsEditorFocused] = (0,
|
|
22745
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0,
|
|
22746
|
-
(0,
|
|
22825
|
+
const [linkPopoverState, setLinkPopoverState] = (0, import_react146.useState)();
|
|
22826
|
+
const linkPopoverElRef = (0, import_react146.useRef)(null);
|
|
22827
|
+
const [isEditorFocused, setIsEditorFocused] = (0, import_react146.useState)(false);
|
|
22828
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react146.useState)(false);
|
|
22829
|
+
(0, import_react146.useEffect)(() => {
|
|
22747
22830
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
22748
22831
|
setLinkPopoverState(void 0);
|
|
22749
22832
|
return;
|
|
22750
22833
|
}
|
|
22751
22834
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
22752
|
-
(0,
|
|
22835
|
+
(0, import_react146.useEffect)(() => {
|
|
22753
22836
|
if (!editor.hasNodes([LinkNode])) {
|
|
22754
22837
|
throw new Error("LinkNode not registered on editor");
|
|
22755
22838
|
}
|
|
22756
|
-
return (0,
|
|
22839
|
+
return (0, import_utils6.mergeRegister)(
|
|
22757
22840
|
editor.registerCommand(
|
|
22758
22841
|
UPSERT_LINK_NODE_COMMAND,
|
|
22759
22842
|
(payload) => {
|
|
@@ -22818,7 +22901,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22818
22901
|
)
|
|
22819
22902
|
);
|
|
22820
22903
|
}, [editor, onConnectLink]);
|
|
22821
|
-
const maybeShowLinkToolbar = (0,
|
|
22904
|
+
const maybeShowLinkToolbar = (0, import_react146.useCallback)(() => {
|
|
22822
22905
|
if (!editor.isEditable()) {
|
|
22823
22906
|
return;
|
|
22824
22907
|
}
|
|
@@ -22850,7 +22933,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22850
22933
|
}
|
|
22851
22934
|
});
|
|
22852
22935
|
}, [editor]);
|
|
22853
|
-
(0,
|
|
22936
|
+
(0, import_react146.useEffect)(() => {
|
|
22854
22937
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
22855
22938
|
requestAnimationFrame(() => {
|
|
22856
22939
|
editorState.read(() => {
|
|
@@ -22877,8 +22960,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22877
22960
|
});
|
|
22878
22961
|
});
|
|
22879
22962
|
};
|
|
22880
|
-
return /* @__PURE__ */ (0,
|
|
22881
|
-
/* @__PURE__ */ (0,
|
|
22963
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
|
|
22964
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
22882
22965
|
import_LexicalNodeEventPlugin.NodeEventPlugin,
|
|
22883
22966
|
{
|
|
22884
22967
|
nodeType: LinkNode,
|
|
@@ -22888,7 +22971,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22888
22971
|
}
|
|
22889
22972
|
}
|
|
22890
22973
|
),
|
|
22891
|
-
linkPopoverState ? /* @__PURE__ */ (0,
|
|
22974
|
+
linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
22892
22975
|
"div",
|
|
22893
22976
|
{
|
|
22894
22977
|
css: linkPopover,
|
|
@@ -22897,8 +22980,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22897
22980
|
top: linkPopoverState.position.y
|
|
22898
22981
|
},
|
|
22899
22982
|
ref: linkPopoverElRef,
|
|
22900
|
-
children: /* @__PURE__ */ (0,
|
|
22901
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0,
|
|
22983
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: linkPopoverContainer, children: [
|
|
22984
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
22902
22985
|
"a",
|
|
22903
22986
|
{
|
|
22904
22987
|
href: parsePath(
|
|
@@ -22910,7 +22993,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22910
22993
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
22911
22994
|
}
|
|
22912
22995
|
),
|
|
22913
|
-
/* @__PURE__ */ (0,
|
|
22996
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
22914
22997
|
Button,
|
|
22915
22998
|
{
|
|
22916
22999
|
size: "xs",
|
|
@@ -22918,7 +23001,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22918
23001
|
onEditLinkNode(linkPopoverState.node);
|
|
22919
23002
|
},
|
|
22920
23003
|
buttonType: "ghost",
|
|
22921
|
-
children: /* @__PURE__ */ (0,
|
|
23004
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
22922
23005
|
}
|
|
22923
23006
|
)
|
|
22924
23007
|
] })
|
|
@@ -22938,8 +23021,8 @@ var import_list = require("@lexical/list");
|
|
|
22938
23021
|
var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
|
|
22939
23022
|
var import_LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
|
|
22940
23023
|
var import_lexical4 = require("lexical");
|
|
22941
|
-
var
|
|
22942
|
-
var
|
|
23024
|
+
var import_react147 = require("react");
|
|
23025
|
+
var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
|
|
22943
23026
|
function isIndentPermitted(maxDepth) {
|
|
22944
23027
|
const selection = (0, import_lexical4.$getSelection)();
|
|
22945
23028
|
if (!(0, import_lexical4.$isRangeSelection)(selection)) {
|
|
@@ -22962,29 +23045,29 @@ function isIndentPermitted(maxDepth) {
|
|
|
22962
23045
|
}
|
|
22963
23046
|
function ListIndentPlugin({ maxDepth }) {
|
|
22964
23047
|
const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
|
|
22965
|
-
(0,
|
|
23048
|
+
(0, import_react147.useEffect)(() => {
|
|
22966
23049
|
return editor.registerCommand(
|
|
22967
23050
|
import_lexical4.INDENT_CONTENT_COMMAND,
|
|
22968
23051
|
() => !isIndentPermitted(maxDepth),
|
|
22969
23052
|
import_lexical4.COMMAND_PRIORITY_CRITICAL
|
|
22970
23053
|
);
|
|
22971
23054
|
}, [editor, maxDepth]);
|
|
22972
|
-
return /* @__PURE__ */ (0,
|
|
23055
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {});
|
|
22973
23056
|
}
|
|
22974
23057
|
|
|
22975
23058
|
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
22976
23059
|
init_emotion_jsx_shim();
|
|
22977
|
-
var
|
|
23060
|
+
var import_react148 = require("@emotion/react");
|
|
22978
23061
|
var import_code2 = require("@lexical/code");
|
|
22979
23062
|
var import_list2 = require("@lexical/list");
|
|
22980
23063
|
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
22981
23064
|
var import_rich_text = require("@lexical/rich-text");
|
|
22982
23065
|
var import_selection2 = require("@lexical/selection");
|
|
22983
|
-
var
|
|
23066
|
+
var import_utils9 = require("@lexical/utils");
|
|
22984
23067
|
var import_lexical5 = require("lexical");
|
|
22985
|
-
var
|
|
22986
|
-
var
|
|
22987
|
-
var toolbar =
|
|
23068
|
+
var import_react149 = require("react");
|
|
23069
|
+
var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
|
|
23070
|
+
var toolbar = import_react148.css`
|
|
22988
23071
|
background: var(--gray-50);
|
|
22989
23072
|
border-radius: var(--rounded-base);
|
|
22990
23073
|
display: flex;
|
|
@@ -22996,7 +23079,7 @@ var toolbar = import_react146.css`
|
|
|
22996
23079
|
top: calc(var(--spacing-sm) * -2);
|
|
22997
23080
|
z-index: 10;
|
|
22998
23081
|
`;
|
|
22999
|
-
var toolbarGroup =
|
|
23082
|
+
var toolbarGroup = import_react148.css`
|
|
23000
23083
|
display: flex;
|
|
23001
23084
|
gap: var(--spacing-xs);
|
|
23002
23085
|
position: relative;
|
|
@@ -23012,7 +23095,7 @@ var toolbarGroup = import_react146.css`
|
|
|
23012
23095
|
width: 1px;
|
|
23013
23096
|
}
|
|
23014
23097
|
`;
|
|
23015
|
-
var richTextToolbarButton =
|
|
23098
|
+
var richTextToolbarButton = import_react148.css`
|
|
23016
23099
|
align-items: center;
|
|
23017
23100
|
appearance: none;
|
|
23018
23101
|
border: 0;
|
|
@@ -23025,17 +23108,17 @@ var richTextToolbarButton = import_react146.css`
|
|
|
23025
23108
|
min-width: 32px;
|
|
23026
23109
|
padding: 0 var(--spacing-sm);
|
|
23027
23110
|
`;
|
|
23028
|
-
var richTextToolbarButtonActive =
|
|
23111
|
+
var richTextToolbarButtonActive = import_react148.css`
|
|
23029
23112
|
background: var(--gray-200);
|
|
23030
23113
|
`;
|
|
23031
|
-
var toolbarIcon =
|
|
23114
|
+
var toolbarIcon = import_react148.css`
|
|
23032
23115
|
color: inherit;
|
|
23033
23116
|
`;
|
|
23034
|
-
var toolbarChevron =
|
|
23117
|
+
var toolbarChevron = import_react148.css`
|
|
23035
23118
|
margin-left: var(--spacing-xs);
|
|
23036
23119
|
`;
|
|
23037
23120
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
23038
|
-
return /* @__PURE__ */ (0,
|
|
23121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
23039
23122
|
};
|
|
23040
23123
|
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
23041
23124
|
["bold", "format-bold"],
|
|
@@ -23086,7 +23169,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23086
23169
|
}
|
|
23087
23170
|
});
|
|
23088
23171
|
};
|
|
23089
|
-
const updateToolbar = (0,
|
|
23172
|
+
const updateToolbar = (0, import_react149.useCallback)(() => {
|
|
23090
23173
|
const selection = (0, import_lexical5.$getSelection)();
|
|
23091
23174
|
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
23092
23175
|
return;
|
|
@@ -23099,7 +23182,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23099
23182
|
}
|
|
23100
23183
|
setActiveFormats(newActiveFormats);
|
|
23101
23184
|
const anchorNode = selection.anchor.getNode();
|
|
23102
|
-
let element = anchorNode.getKey() === "root" ? anchorNode : (0,
|
|
23185
|
+
let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils9.$findMatchingParent)(anchorNode, (e) => {
|
|
23103
23186
|
const parent = e.getParent();
|
|
23104
23187
|
return parent !== null && (0, import_lexical5.$isRootOrShadowRoot)(parent);
|
|
23105
23188
|
});
|
|
@@ -23110,7 +23193,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23110
23193
|
const elementDOM = editor.getElementByKey(elementKey);
|
|
23111
23194
|
if (elementDOM !== null) {
|
|
23112
23195
|
if ((0, import_list2.$isListNode)(element)) {
|
|
23113
|
-
const parentList = (0,
|
|
23196
|
+
const parentList = (0, import_utils9.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
|
|
23114
23197
|
const type = parentList ? parentList.getListType() : element.getListType();
|
|
23115
23198
|
setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
|
|
23116
23199
|
} else {
|
|
@@ -23125,7 +23208,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23125
23208
|
setIsLink(false);
|
|
23126
23209
|
}
|
|
23127
23210
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
23128
|
-
(0,
|
|
23211
|
+
(0, import_react149.useEffect)(() => {
|
|
23129
23212
|
return editor.registerCommand(
|
|
23130
23213
|
import_lexical5.SELECTION_CHANGE_COMMAND,
|
|
23131
23214
|
(_payload) => {
|
|
@@ -23135,7 +23218,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23135
23218
|
import_lexical5.COMMAND_PRIORITY_CRITICAL
|
|
23136
23219
|
);
|
|
23137
23220
|
}, [editor, updateToolbar]);
|
|
23138
|
-
(0,
|
|
23221
|
+
(0, import_react149.useEffect)(() => {
|
|
23139
23222
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
23140
23223
|
requestAnimationFrame(() => {
|
|
23141
23224
|
editorState.read(() => {
|
|
@@ -23144,15 +23227,15 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23144
23227
|
});
|
|
23145
23228
|
});
|
|
23146
23229
|
}, [editor, updateToolbar]);
|
|
23147
|
-
return /* @__PURE__ */ (0,
|
|
23148
|
-
/* @__PURE__ */ (0,
|
|
23230
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbar, children: [
|
|
23231
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
|
|
23149
23232
|
Menu,
|
|
23150
23233
|
{
|
|
23151
23234
|
menuLabel: "Elements",
|
|
23152
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
23235
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
|
|
23153
23236
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
23154
23237
|
" ",
|
|
23155
|
-
/* @__PURE__ */ (0,
|
|
23238
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
23156
23239
|
] }),
|
|
23157
23240
|
placement: "bottom-start",
|
|
23158
23241
|
children: [
|
|
@@ -23162,7 +23245,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23162
23245
|
type: "paragraph"
|
|
23163
23246
|
},
|
|
23164
23247
|
...visibleTextualElements
|
|
23165
|
-
].map((element) => /* @__PURE__ */ (0,
|
|
23248
|
+
].map((element) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23166
23249
|
MenuItem,
|
|
23167
23250
|
{
|
|
23168
23251
|
onClick: () => {
|
|
@@ -23172,12 +23255,12 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23172
23255
|
},
|
|
23173
23256
|
element.type
|
|
23174
23257
|
)),
|
|
23175
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0,
|
|
23258
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
23176
23259
|
]
|
|
23177
23260
|
}
|
|
23178
23261
|
),
|
|
23179
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
23180
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0,
|
|
23262
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
|
|
23263
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23181
23264
|
"button",
|
|
23182
23265
|
{
|
|
23183
23266
|
onClick: () => {
|
|
@@ -23187,16 +23270,16 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23187
23270
|
richTextToolbarButton,
|
|
23188
23271
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
23189
23272
|
],
|
|
23190
|
-
children: /* @__PURE__ */ (0,
|
|
23273
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
23191
23274
|
}
|
|
23192
23275
|
) }, format.type)),
|
|
23193
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
23276
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23194
23277
|
Menu,
|
|
23195
23278
|
{
|
|
23196
23279
|
menuLabel: "Alternative text styles",
|
|
23197
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
23280
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
23198
23281
|
placement: "bottom-start",
|
|
23199
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0,
|
|
23282
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23200
23283
|
MenuItem,
|
|
23201
23284
|
{
|
|
23202
23285
|
onClick: () => {
|
|
@@ -23209,19 +23292,19 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23209
23292
|
}
|
|
23210
23293
|
) : null
|
|
23211
23294
|
] }) : null,
|
|
23212
|
-
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0,
|
|
23213
|
-
linkElementVisible ? /* @__PURE__ */ (0,
|
|
23295
|
+
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
|
|
23296
|
+
linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23214
23297
|
"button",
|
|
23215
23298
|
{
|
|
23216
23299
|
onClick: () => {
|
|
23217
23300
|
isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
23218
23301
|
},
|
|
23219
23302
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
23220
|
-
children: /* @__PURE__ */ (0,
|
|
23303
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "link" })
|
|
23221
23304
|
}
|
|
23222
23305
|
) }) : null,
|
|
23223
|
-
visibleLists.size > 0 ? /* @__PURE__ */ (0,
|
|
23224
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0,
|
|
23306
|
+
visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
|
|
23307
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23225
23308
|
"button",
|
|
23226
23309
|
{
|
|
23227
23310
|
onClick: () => {
|
|
@@ -23231,10 +23314,10 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23231
23314
|
richTextToolbarButton,
|
|
23232
23315
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
23233
23316
|
],
|
|
23234
|
-
children: /* @__PURE__ */ (0,
|
|
23317
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
|
|
23235
23318
|
}
|
|
23236
23319
|
) }) : null,
|
|
23237
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */ (0,
|
|
23320
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23238
23321
|
"button",
|
|
23239
23322
|
{
|
|
23240
23323
|
onClick: () => {
|
|
@@ -23244,57 +23327,57 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23244
23327
|
richTextToolbarButton,
|
|
23245
23328
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
23246
23329
|
],
|
|
23247
|
-
children: /* @__PURE__ */ (0,
|
|
23330
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
23248
23331
|
}
|
|
23249
23332
|
) }) : null
|
|
23250
23333
|
] }) : null,
|
|
23251
|
-
quoteElementVisible ? /* @__PURE__ */ (0,
|
|
23334
|
+
quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23252
23335
|
"button",
|
|
23253
23336
|
{
|
|
23254
23337
|
onClick: () => {
|
|
23255
23338
|
activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
|
|
23256
23339
|
},
|
|
23257
23340
|
css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
|
|
23258
|
-
children: /* @__PURE__ */ (0,
|
|
23341
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "quote" })
|
|
23259
23342
|
}
|
|
23260
23343
|
) }) : null,
|
|
23261
|
-
codeElementVisible ? /* @__PURE__ */ (0,
|
|
23344
|
+
codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23262
23345
|
"button",
|
|
23263
23346
|
{
|
|
23264
23347
|
onClick: () => {
|
|
23265
23348
|
activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
|
|
23266
23349
|
},
|
|
23267
23350
|
css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
|
|
23268
|
-
children: /* @__PURE__ */ (0,
|
|
23351
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
|
|
23269
23352
|
}
|
|
23270
23353
|
) }) : null
|
|
23271
23354
|
] }) : null,
|
|
23272
|
-
customControls ? /* @__PURE__ */ (0,
|
|
23355
|
+
customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: toolbarGroup, children: customControls }) : null
|
|
23273
23356
|
] });
|
|
23274
23357
|
};
|
|
23275
23358
|
var RichTextToolbar_default = RichTextToolbar;
|
|
23276
23359
|
var useRichTextToolbarState = ({ config }) => {
|
|
23277
23360
|
var _a;
|
|
23278
|
-
const enabledBuiltInFormats = (0,
|
|
23361
|
+
const enabledBuiltInFormats = (0, import_react149.useMemo)(() => {
|
|
23279
23362
|
return richTextBuiltInFormats.filter((format) => {
|
|
23280
23363
|
var _a2, _b;
|
|
23281
23364
|
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
23282
23365
|
});
|
|
23283
23366
|
}, [config]);
|
|
23284
|
-
const enabledBuiltInElements = (0,
|
|
23367
|
+
const enabledBuiltInElements = (0, import_react149.useMemo)(() => {
|
|
23285
23368
|
return richTextBuiltInElements.filter((element) => {
|
|
23286
23369
|
var _a2, _b;
|
|
23287
23370
|
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
23288
23371
|
});
|
|
23289
23372
|
}, [config]);
|
|
23290
|
-
const enabledBuiltInFormatsWithIcon = (0,
|
|
23373
|
+
const enabledBuiltInFormatsWithIcon = (0, import_react149.useMemo)(() => {
|
|
23291
23374
|
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
23292
23375
|
}, [enabledBuiltInFormats]);
|
|
23293
23376
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
23294
23377
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
23295
23378
|
);
|
|
23296
|
-
const [activeFormats, setActiveFormats] = (0,
|
|
23297
|
-
const visibleFormatsWithIcon = (0,
|
|
23379
|
+
const [activeFormats, setActiveFormats] = (0, import_react149.useState)([]);
|
|
23380
|
+
const visibleFormatsWithIcon = (0, import_react149.useMemo)(() => {
|
|
23298
23381
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
23299
23382
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
23300
23383
|
visibleFormats.add(type);
|
|
@@ -23304,7 +23387,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23304
23387
|
});
|
|
23305
23388
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
23306
23389
|
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
23307
|
-
const visibleFormatsWithoutIcon = (0,
|
|
23390
|
+
const visibleFormatsWithoutIcon = (0, import_react149.useMemo)(() => {
|
|
23308
23391
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
23309
23392
|
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
23310
23393
|
visibleFormats.add(type);
|
|
@@ -23314,11 +23397,11 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23314
23397
|
});
|
|
23315
23398
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
23316
23399
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
23317
|
-
const [activeElement, setActiveElement] = (0,
|
|
23400
|
+
const [activeElement, setActiveElement] = (0, import_react149.useState)("paragraph");
|
|
23318
23401
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
23319
23402
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
23320
23403
|
);
|
|
23321
|
-
const visibleTextualElements = (0,
|
|
23404
|
+
const visibleTextualElements = (0, import_react149.useMemo)(() => {
|
|
23322
23405
|
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
23323
23406
|
return enabledTextualElements;
|
|
23324
23407
|
}
|
|
@@ -23329,24 +23412,24 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23329
23412
|
}
|
|
23330
23413
|
);
|
|
23331
23414
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
23332
|
-
const [isLink, setIsLink] = (0,
|
|
23333
|
-
const linkElementVisible = (0,
|
|
23415
|
+
const [isLink, setIsLink] = (0, import_react149.useState)(false);
|
|
23416
|
+
const linkElementVisible = (0, import_react149.useMemo)(() => {
|
|
23334
23417
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
23335
23418
|
}, [isLink, enabledBuiltInElements]);
|
|
23336
|
-
const visibleLists = (0,
|
|
23419
|
+
const visibleLists = (0, import_react149.useMemo)(() => {
|
|
23337
23420
|
return new Set(
|
|
23338
23421
|
["orderedList", "unorderedList"].filter(
|
|
23339
23422
|
(type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
|
|
23340
23423
|
)
|
|
23341
23424
|
);
|
|
23342
23425
|
}, [activeElement, enabledBuiltInElements]);
|
|
23343
|
-
const quoteElementVisible = (0,
|
|
23426
|
+
const quoteElementVisible = (0, import_react149.useMemo)(() => {
|
|
23344
23427
|
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
23345
23428
|
}, [activeElement, enabledBuiltInElements]);
|
|
23346
|
-
const codeElementVisible = (0,
|
|
23429
|
+
const codeElementVisible = (0, import_react149.useMemo)(() => {
|
|
23347
23430
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
23348
23431
|
}, [activeElement, enabledBuiltInElements]);
|
|
23349
|
-
const visibleElementsWithIcons = (0,
|
|
23432
|
+
const visibleElementsWithIcons = (0, import_react149.useMemo)(() => {
|
|
23350
23433
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
23351
23434
|
if (linkElementVisible) {
|
|
23352
23435
|
visibleElements.add("link");
|
|
@@ -23383,7 +23466,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23383
23466
|
};
|
|
23384
23467
|
|
|
23385
23468
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
23386
|
-
var
|
|
23469
|
+
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
23387
23470
|
var ParameterRichText = ({
|
|
23388
23471
|
label,
|
|
23389
23472
|
labelLeadingIcon,
|
|
@@ -23408,7 +23491,7 @@ var ParameterRichText = ({
|
|
|
23408
23491
|
variables,
|
|
23409
23492
|
customControls
|
|
23410
23493
|
}) => {
|
|
23411
|
-
return /* @__PURE__ */ (0,
|
|
23494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
23412
23495
|
ParameterShell,
|
|
23413
23496
|
{
|
|
23414
23497
|
"data-testid": "parameter-richtext",
|
|
@@ -23422,7 +23505,7 @@ var ParameterRichText = ({
|
|
|
23422
23505
|
captionTestId,
|
|
23423
23506
|
menuItems,
|
|
23424
23507
|
children: [
|
|
23425
|
-
/* @__PURE__ */ (0,
|
|
23508
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23426
23509
|
ParameterRichTextInner,
|
|
23427
23510
|
{
|
|
23428
23511
|
value,
|
|
@@ -23440,23 +23523,23 @@ var ParameterRichText = ({
|
|
|
23440
23523
|
children
|
|
23441
23524
|
}
|
|
23442
23525
|
),
|
|
23443
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
23526
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children: menuItems }) }) : null
|
|
23444
23527
|
]
|
|
23445
23528
|
}
|
|
23446
23529
|
);
|
|
23447
23530
|
};
|
|
23448
|
-
var editorWrapper =
|
|
23531
|
+
var editorWrapper = import_react150.css`
|
|
23449
23532
|
display: flex;
|
|
23450
23533
|
flex-flow: column;
|
|
23451
23534
|
flex-grow: 1;
|
|
23452
23535
|
`;
|
|
23453
|
-
var editorContainer =
|
|
23536
|
+
var editorContainer = import_react150.css`
|
|
23454
23537
|
display: flex;
|
|
23455
23538
|
flex-flow: column;
|
|
23456
23539
|
flex-grow: 1;
|
|
23457
23540
|
position: relative;
|
|
23458
23541
|
`;
|
|
23459
|
-
var editorPlaceholder =
|
|
23542
|
+
var editorPlaceholder = import_react150.css`
|
|
23460
23543
|
color: var(--gray-500);
|
|
23461
23544
|
font-style: italic;
|
|
23462
23545
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -23467,7 +23550,7 @@ var editorPlaceholder = import_react148.css`
|
|
|
23467
23550
|
top: var(--spacing-sm);
|
|
23468
23551
|
user-select: none;
|
|
23469
23552
|
`;
|
|
23470
|
-
var editorInput =
|
|
23553
|
+
var editorInput = import_react150.css`
|
|
23471
23554
|
background: var(--white);
|
|
23472
23555
|
border: 1px solid var(--gray-200);
|
|
23473
23556
|
border-radius: var(--rounded-sm);
|
|
@@ -23551,8 +23634,8 @@ var ParameterRichTextInner = ({
|
|
|
23551
23634
|
},
|
|
23552
23635
|
editable: !readOnly
|
|
23553
23636
|
};
|
|
23554
|
-
return /* @__PURE__ */ (0,
|
|
23555
|
-
/* @__PURE__ */ (0,
|
|
23637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
23638
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23556
23639
|
RichText,
|
|
23557
23640
|
{
|
|
23558
23641
|
onChange,
|
|
@@ -23589,14 +23672,14 @@ var RichText = ({
|
|
|
23589
23672
|
variables,
|
|
23590
23673
|
customControls
|
|
23591
23674
|
}) => {
|
|
23592
|
-
const editorContainerRef = (0,
|
|
23675
|
+
const editorContainerRef = (0, import_react151.useRef)(null);
|
|
23593
23676
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23594
|
-
(0,
|
|
23677
|
+
(0, import_react151.useEffect)(() => {
|
|
23595
23678
|
if (onRichTextInit) {
|
|
23596
23679
|
onRichTextInit(editor);
|
|
23597
23680
|
}
|
|
23598
23681
|
}, [editor, onRichTextInit]);
|
|
23599
|
-
(0,
|
|
23682
|
+
(0, import_react151.useEffect)(() => {
|
|
23600
23683
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
|
|
23601
23684
|
requestAnimationFrame(() => {
|
|
23602
23685
|
if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -23608,23 +23691,23 @@ var RichText = ({
|
|
|
23608
23691
|
removeUpdateListener();
|
|
23609
23692
|
};
|
|
23610
23693
|
}, [editor, onChange]);
|
|
23611
|
-
(0,
|
|
23694
|
+
(0, import_react151.useEffect)(() => {
|
|
23612
23695
|
editor.setEditable(!readOnly);
|
|
23613
23696
|
}, [editor, readOnly]);
|
|
23614
|
-
return /* @__PURE__ */ (0,
|
|
23615
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
23616
|
-
/* @__PURE__ */ (0,
|
|
23617
|
-
/* @__PURE__ */ (0,
|
|
23697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
23698
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(RichTextToolbar_default, { config, customControls }),
|
|
23699
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
|
|
23700
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23618
23701
|
import_LexicalRichTextPlugin.RichTextPlugin,
|
|
23619
23702
|
{
|
|
23620
|
-
contentEditable: /* @__PURE__ */ (0,
|
|
23621
|
-
placeholder: /* @__PURE__ */ (0,
|
|
23703
|
+
contentEditable: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
23704
|
+
placeholder: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
23622
23705
|
ErrorBoundary: import_LexicalErrorBoundary.default
|
|
23623
23706
|
}
|
|
23624
23707
|
),
|
|
23625
|
-
/* @__PURE__ */ (0,
|
|
23626
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
23627
|
-
/* @__PURE__ */ (0,
|
|
23708
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalListPlugin.ListPlugin, {}),
|
|
23709
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
|
|
23710
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23628
23711
|
LinkNodePlugin,
|
|
23629
23712
|
{
|
|
23630
23713
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -23634,28 +23717,28 @@ var RichText = ({
|
|
|
23634
23717
|
} : void 0
|
|
23635
23718
|
}
|
|
23636
23719
|
),
|
|
23637
|
-
/* @__PURE__ */ (0,
|
|
23638
|
-
/* @__PURE__ */ (0,
|
|
23639
|
-
/* @__PURE__ */ (0,
|
|
23640
|
-
/* @__PURE__ */ (0,
|
|
23720
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ListIndentPlugin, { maxDepth: 4 }),
|
|
23721
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DisableStylesPlugin, {}),
|
|
23722
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
23723
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children })
|
|
23641
23724
|
] })
|
|
23642
23725
|
] });
|
|
23643
23726
|
};
|
|
23644
23727
|
|
|
23645
23728
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
23646
23729
|
init_emotion_jsx_shim();
|
|
23647
|
-
var
|
|
23648
|
-
var
|
|
23649
|
-
var ParameterSelect = (0,
|
|
23730
|
+
var import_react152 = require("react");
|
|
23731
|
+
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
23732
|
+
var ParameterSelect = (0, import_react152.forwardRef)(
|
|
23650
23733
|
({ defaultOption, options, ...props }, ref) => {
|
|
23651
23734
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
23652
|
-
return /* @__PURE__ */ (0,
|
|
23735
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
23653
23736
|
}
|
|
23654
23737
|
);
|
|
23655
|
-
var ParameterSelectInner = (0,
|
|
23738
|
+
var ParameterSelectInner = (0, import_react152.forwardRef)(
|
|
23656
23739
|
({ defaultOption, options, ...props }, ref) => {
|
|
23657
23740
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
23658
|
-
return /* @__PURE__ */ (0,
|
|
23741
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
|
|
23659
23742
|
"select",
|
|
23660
23743
|
{
|
|
23661
23744
|
css: [input3, selectInput],
|
|
@@ -23664,10 +23747,10 @@ var ParameterSelectInner = (0, import_react150.forwardRef)(
|
|
|
23664
23747
|
ref,
|
|
23665
23748
|
...props,
|
|
23666
23749
|
children: [
|
|
23667
|
-
defaultOption ? /* @__PURE__ */ (0,
|
|
23750
|
+
defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: "", children: defaultOption }) : null,
|
|
23668
23751
|
options.map((option) => {
|
|
23669
23752
|
var _a;
|
|
23670
|
-
return /* @__PURE__ */ (0,
|
|
23753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
23671
23754
|
})
|
|
23672
23755
|
]
|
|
23673
23756
|
}
|
|
@@ -23677,15 +23760,15 @@ var ParameterSelectInner = (0, import_react150.forwardRef)(
|
|
|
23677
23760
|
|
|
23678
23761
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
23679
23762
|
init_emotion_jsx_shim();
|
|
23680
|
-
var
|
|
23681
|
-
var
|
|
23682
|
-
var ParameterTextarea = (0,
|
|
23763
|
+
var import_react153 = require("react");
|
|
23764
|
+
var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
|
|
23765
|
+
var ParameterTextarea = (0, import_react153.forwardRef)((props, ref) => {
|
|
23683
23766
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
23684
|
-
return /* @__PURE__ */ (0,
|
|
23767
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
23685
23768
|
});
|
|
23686
|
-
var ParameterTextareaInner = (0,
|
|
23769
|
+
var ParameterTextareaInner = (0, import_react153.forwardRef)(({ ...props }, ref) => {
|
|
23687
23770
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
23688
|
-
return /* @__PURE__ */ (0,
|
|
23771
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
23689
23772
|
"textarea",
|
|
23690
23773
|
{
|
|
23691
23774
|
css: [input3, textarea2],
|
|
@@ -23699,18 +23782,18 @@ var ParameterTextareaInner = (0, import_react151.forwardRef)(({ ...props }, ref)
|
|
|
23699
23782
|
|
|
23700
23783
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
23701
23784
|
init_emotion_jsx_shim();
|
|
23702
|
-
var
|
|
23703
|
-
var
|
|
23704
|
-
var ParameterToggle = (0,
|
|
23785
|
+
var import_react154 = require("react");
|
|
23786
|
+
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
23787
|
+
var ParameterToggle = (0, import_react154.forwardRef)((props, ref) => {
|
|
23705
23788
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
23706
|
-
return /* @__PURE__ */ (0,
|
|
23789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
23707
23790
|
});
|
|
23708
|
-
var ParameterToggleInner = (0,
|
|
23791
|
+
var ParameterToggleInner = (0, import_react154.forwardRef)(
|
|
23709
23792
|
({ children, ...props }, ref) => {
|
|
23710
23793
|
const { id, label } = useParameterShell();
|
|
23711
|
-
return /* @__PURE__ */ (0,
|
|
23712
|
-
/* @__PURE__ */ (0,
|
|
23713
|
-
/* @__PURE__ */ (0,
|
|
23794
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("label", { css: inputToggleLabel2, children: [
|
|
23795
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
23796
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { css: inlineLabel2, children: label }),
|
|
23714
23797
|
children
|
|
23715
23798
|
] });
|
|
23716
23799
|
}
|
|
@@ -23721,8 +23804,8 @@ init_emotion_jsx_shim();
|
|
|
23721
23804
|
|
|
23722
23805
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
23723
23806
|
init_emotion_jsx_shim();
|
|
23724
|
-
var
|
|
23725
|
-
var container3 =
|
|
23807
|
+
var import_react155 = require("@emotion/react");
|
|
23808
|
+
var container3 = import_react155.css`
|
|
23726
23809
|
background: var(--gray-50);
|
|
23727
23810
|
margin-block: var(--spacing-sm);
|
|
23728
23811
|
position: relative;
|
|
@@ -23732,17 +23815,17 @@ var container3 = import_react153.css`
|
|
|
23732
23815
|
border: solid 1px var(--gray-300);
|
|
23733
23816
|
`;
|
|
23734
23817
|
var themeMap = {
|
|
23735
|
-
primary:
|
|
23818
|
+
primary: import_react155.css`
|
|
23736
23819
|
--progress-color: var(--accent-light);
|
|
23737
23820
|
`,
|
|
23738
|
-
secondary:
|
|
23821
|
+
secondary: import_react155.css`
|
|
23739
23822
|
--progress-color: var(--accent-alt-light);
|
|
23740
23823
|
`,
|
|
23741
|
-
destructive:
|
|
23824
|
+
destructive: import_react155.css`
|
|
23742
23825
|
--progress-color: var(--brand-secondary-5);
|
|
23743
23826
|
`
|
|
23744
23827
|
};
|
|
23745
|
-
var slidingBackgroundPosition =
|
|
23828
|
+
var slidingBackgroundPosition = import_react155.keyframes`
|
|
23746
23829
|
from {
|
|
23747
23830
|
background-position: 0 0;
|
|
23748
23831
|
}
|
|
@@ -23750,10 +23833,10 @@ var slidingBackgroundPosition = import_react153.keyframes`
|
|
|
23750
23833
|
background-position: 64px 0;
|
|
23751
23834
|
}
|
|
23752
23835
|
`;
|
|
23753
|
-
var determinate =
|
|
23836
|
+
var determinate = import_react155.css`
|
|
23754
23837
|
background-color: var(--progress-color);
|
|
23755
23838
|
`;
|
|
23756
|
-
var indeterminate =
|
|
23839
|
+
var indeterminate = import_react155.css`
|
|
23757
23840
|
background-image: linear-gradient(
|
|
23758
23841
|
45deg,
|
|
23759
23842
|
var(--progress-color) 25%,
|
|
@@ -23767,7 +23850,7 @@ var indeterminate = import_react153.css`
|
|
|
23767
23850
|
background-size: 64px 64px;
|
|
23768
23851
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
23769
23852
|
`;
|
|
23770
|
-
var bar =
|
|
23853
|
+
var bar = import_react155.css`
|
|
23771
23854
|
position: absolute;
|
|
23772
23855
|
inset: 0;
|
|
23773
23856
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -23775,7 +23858,7 @@ var bar = import_react153.css`
|
|
|
23775
23858
|
`;
|
|
23776
23859
|
|
|
23777
23860
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
23778
|
-
var
|
|
23861
|
+
var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
|
|
23779
23862
|
function ProgressBar({
|
|
23780
23863
|
current,
|
|
23781
23864
|
max,
|
|
@@ -23785,7 +23868,7 @@ function ProgressBar({
|
|
|
23785
23868
|
}) {
|
|
23786
23869
|
const valueNow = Math.min(current, max);
|
|
23787
23870
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
23788
|
-
return /* @__PURE__ */ (0,
|
|
23871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
23789
23872
|
"div",
|
|
23790
23873
|
{
|
|
23791
23874
|
css: container3,
|
|
@@ -23796,7 +23879,7 @@ function ProgressBar({
|
|
|
23796
23879
|
"aria-valuemax": max,
|
|
23797
23880
|
"aria-valuenow": valueNow,
|
|
23798
23881
|
...props,
|
|
23799
|
-
children: /* @__PURE__ */ (0,
|
|
23882
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
23800
23883
|
"div",
|
|
23801
23884
|
{
|
|
23802
23885
|
css: [
|
|
@@ -23816,31 +23899,31 @@ function ProgressBar({
|
|
|
23816
23899
|
|
|
23817
23900
|
// src/components/ProgressList/ProgressList.tsx
|
|
23818
23901
|
init_emotion_jsx_shim();
|
|
23819
|
-
var
|
|
23902
|
+
var import_react157 = require("@emotion/react");
|
|
23820
23903
|
var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
|
|
23821
23904
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
23822
23905
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
23823
|
-
var
|
|
23906
|
+
var import_react158 = require("react");
|
|
23824
23907
|
|
|
23825
23908
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
23826
23909
|
init_emotion_jsx_shim();
|
|
23827
|
-
var
|
|
23828
|
-
var progressListStyles =
|
|
23910
|
+
var import_react156 = require("@emotion/react");
|
|
23911
|
+
var progressListStyles = import_react156.css`
|
|
23829
23912
|
display: flex;
|
|
23830
23913
|
flex-direction: column;
|
|
23831
23914
|
gap: var(--spacing-sm);
|
|
23832
23915
|
list-style-type: none;
|
|
23833
23916
|
`;
|
|
23834
|
-
var progressListItemStyles =
|
|
23917
|
+
var progressListItemStyles = import_react156.css`
|
|
23835
23918
|
display: flex;
|
|
23836
23919
|
gap: var(--spacing-base);
|
|
23837
23920
|
align-items: center;
|
|
23838
23921
|
`;
|
|
23839
23922
|
|
|
23840
23923
|
// src/components/ProgressList/ProgressList.tsx
|
|
23841
|
-
var
|
|
23924
|
+
var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
|
|
23842
23925
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
23843
|
-
const itemsWithStatus = (0,
|
|
23926
|
+
const itemsWithStatus = (0, import_react158.useMemo)(() => {
|
|
23844
23927
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
23845
23928
|
return items.map((item, index) => {
|
|
23846
23929
|
let status = "queued";
|
|
@@ -23852,8 +23935,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
23852
23935
|
return { ...item, status };
|
|
23853
23936
|
});
|
|
23854
23937
|
}, [items, inProgressId]);
|
|
23855
|
-
return /* @__PURE__ */ (0,
|
|
23856
|
-
return /* @__PURE__ */ (0,
|
|
23938
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
23939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
|
|
23857
23940
|
ProgressListItem,
|
|
23858
23941
|
{
|
|
23859
23942
|
status,
|
|
@@ -23873,7 +23956,7 @@ var ProgressListItem = ({
|
|
|
23873
23956
|
errorLevel = "danger",
|
|
23874
23957
|
autoEllipsis = false
|
|
23875
23958
|
}) => {
|
|
23876
|
-
const icon = (0,
|
|
23959
|
+
const icon = (0, import_react158.useMemo)(() => {
|
|
23877
23960
|
if (error) {
|
|
23878
23961
|
return warningIcon;
|
|
23879
23962
|
}
|
|
@@ -23884,14 +23967,14 @@ var ProgressListItem = ({
|
|
|
23884
23967
|
};
|
|
23885
23968
|
return iconPerStatus[status];
|
|
23886
23969
|
}, [status, error]);
|
|
23887
|
-
const statusStyles = (0,
|
|
23970
|
+
const statusStyles = (0, import_react158.useMemo)(() => {
|
|
23888
23971
|
if (error) {
|
|
23889
|
-
return errorLevel === "caution" ?
|
|
23972
|
+
return errorLevel === "caution" ? import_react157.css`
|
|
23890
23973
|
color: rgb(161, 98, 7);
|
|
23891
23974
|
& svg {
|
|
23892
23975
|
color: rgb(250, 204, 21);
|
|
23893
23976
|
}
|
|
23894
|
-
` :
|
|
23977
|
+
` : import_react157.css`
|
|
23895
23978
|
color: rgb(185, 28, 28);
|
|
23896
23979
|
& svg {
|
|
23897
23980
|
color: var(--brand-primary-2);
|
|
@@ -23899,40 +23982,40 @@ var ProgressListItem = ({
|
|
|
23899
23982
|
`;
|
|
23900
23983
|
}
|
|
23901
23984
|
const colorPerStatus = {
|
|
23902
|
-
completed:
|
|
23985
|
+
completed: import_react157.css`
|
|
23903
23986
|
opacity: 0.75;
|
|
23904
23987
|
`,
|
|
23905
|
-
inProgress:
|
|
23988
|
+
inProgress: import_react157.css`
|
|
23906
23989
|
-webkit-text-stroke-width: thin;
|
|
23907
23990
|
`,
|
|
23908
|
-
queued:
|
|
23991
|
+
queued: import_react157.css`
|
|
23909
23992
|
opacity: 0.5;
|
|
23910
23993
|
`
|
|
23911
23994
|
};
|
|
23912
23995
|
return colorPerStatus[status];
|
|
23913
23996
|
}, [status, error, errorLevel]);
|
|
23914
|
-
return /* @__PURE__ */ (0,
|
|
23915
|
-
/* @__PURE__ */ (0,
|
|
23916
|
-
/* @__PURE__ */ (0,
|
|
23997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
23998
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
23999
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { children: [
|
|
23917
24000
|
children,
|
|
23918
|
-
/* @__PURE__ */ (0,
|
|
24001
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
23919
24002
|
] })
|
|
23920
24003
|
] });
|
|
23921
24004
|
};
|
|
23922
24005
|
|
|
23923
24006
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
23924
24007
|
init_emotion_jsx_shim();
|
|
23925
|
-
var
|
|
24008
|
+
var import_react160 = require("@emotion/react");
|
|
23926
24009
|
var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
|
|
23927
|
-
var
|
|
24010
|
+
var import_react161 = require("react");
|
|
23928
24011
|
|
|
23929
24012
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
23930
24013
|
init_emotion_jsx_shim();
|
|
23931
|
-
var
|
|
23932
|
-
var segmentedControlRootStyles =
|
|
24014
|
+
var import_react159 = require("@emotion/react");
|
|
24015
|
+
var segmentedControlRootStyles = import_react159.css`
|
|
23933
24016
|
position: relative;
|
|
23934
24017
|
`;
|
|
23935
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
24018
|
+
var segmentedControlScrollIndicatorsStyles = import_react159.css`
|
|
23936
24019
|
position: absolute;
|
|
23937
24020
|
inset: 0;
|
|
23938
24021
|
z-index: 1;
|
|
@@ -23960,17 +24043,17 @@ var segmentedControlScrollIndicatorsStyles = import_react157.css`
|
|
|
23960
24043
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
23961
24044
|
}
|
|
23962
24045
|
`;
|
|
23963
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
24046
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react159.css`
|
|
23964
24047
|
&::before {
|
|
23965
24048
|
opacity: 1;
|
|
23966
24049
|
}
|
|
23967
24050
|
`;
|
|
23968
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
24051
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react159.css`
|
|
23969
24052
|
&::after {
|
|
23970
24053
|
opacity: 1;
|
|
23971
24054
|
}
|
|
23972
24055
|
`;
|
|
23973
|
-
var segmentedControlWrapperStyles =
|
|
24056
|
+
var segmentedControlWrapperStyles = import_react159.css`
|
|
23974
24057
|
overflow-y: auto;
|
|
23975
24058
|
scroll-behavior: smooth;
|
|
23976
24059
|
scrollbar-width: none;
|
|
@@ -23979,7 +24062,7 @@ var segmentedControlWrapperStyles = import_react157.css`
|
|
|
23979
24062
|
height: 0px;
|
|
23980
24063
|
}
|
|
23981
24064
|
`;
|
|
23982
|
-
var segmentedControlStyles =
|
|
24065
|
+
var segmentedControlStyles = import_react159.css`
|
|
23983
24066
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
23984
24067
|
--segmented-control-border-width: 1px;
|
|
23985
24068
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -23998,14 +24081,14 @@ var segmentedControlStyles = import_react157.css`
|
|
|
23998
24081
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
23999
24082
|
font-size: var(--fs-xs);
|
|
24000
24083
|
`;
|
|
24001
|
-
var segmentedControlVerticalStyles =
|
|
24084
|
+
var segmentedControlVerticalStyles = import_react159.css`
|
|
24002
24085
|
flex-direction: column;
|
|
24003
24086
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
24004
24087
|
var(--segmented-control-rounded-value) 0 0;
|
|
24005
24088
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
24006
24089
|
var(--segmented-control-rounded-value);
|
|
24007
24090
|
`;
|
|
24008
|
-
var segmentedControlItemStyles =
|
|
24091
|
+
var segmentedControlItemStyles = import_react159.css`
|
|
24009
24092
|
&:first-of-type label {
|
|
24010
24093
|
border-radius: var(--segmented-control-first-border-radius);
|
|
24011
24094
|
}
|
|
@@ -24013,10 +24096,10 @@ var segmentedControlItemStyles = import_react157.css`
|
|
|
24013
24096
|
border-radius: var(--segmented-control-last-border-radius);
|
|
24014
24097
|
}
|
|
24015
24098
|
`;
|
|
24016
|
-
var segmentedControlInputStyles =
|
|
24099
|
+
var segmentedControlInputStyles = import_react159.css`
|
|
24017
24100
|
${accessibleHidden}
|
|
24018
24101
|
`;
|
|
24019
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
24102
|
+
var segmentedControlLabelStyles = (checked, disabled2) => import_react159.css`
|
|
24020
24103
|
position: relative;
|
|
24021
24104
|
display: flex;
|
|
24022
24105
|
align-items: center;
|
|
@@ -24083,25 +24166,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react157.css`
|
|
|
24083
24166
|
`}
|
|
24084
24167
|
}
|
|
24085
24168
|
`;
|
|
24086
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
24169
|
+
var segmentedControlLabelIconOnlyStyles = import_react159.css`
|
|
24087
24170
|
padding-inline: 0.5em;
|
|
24088
24171
|
`;
|
|
24089
|
-
var segmentedControlLabelCheckStyles =
|
|
24172
|
+
var segmentedControlLabelCheckStyles = import_react159.css`
|
|
24090
24173
|
opacity: 0.5;
|
|
24091
24174
|
`;
|
|
24092
|
-
var segmentedControlLabelContentStyles =
|
|
24175
|
+
var segmentedControlLabelContentStyles = import_react159.css`
|
|
24093
24176
|
display: flex;
|
|
24094
24177
|
align-items: center;
|
|
24095
24178
|
justify-content: center;
|
|
24096
24179
|
gap: var(--spacing-sm);
|
|
24097
24180
|
height: 100%;
|
|
24098
24181
|
`;
|
|
24099
|
-
var segmentedControlLabelTextStyles =
|
|
24182
|
+
var segmentedControlLabelTextStyles = import_react159.css`
|
|
24100
24183
|
white-space: nowrap;
|
|
24101
24184
|
`;
|
|
24102
24185
|
|
|
24103
24186
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
24104
|
-
var
|
|
24187
|
+
var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
|
|
24105
24188
|
var SegmentedControl = ({
|
|
24106
24189
|
name,
|
|
24107
24190
|
options,
|
|
@@ -24116,10 +24199,10 @@ var SegmentedControl = ({
|
|
|
24116
24199
|
currentBackgroundColor = "white",
|
|
24117
24200
|
...props
|
|
24118
24201
|
}) => {
|
|
24119
|
-
const wrapperRef = (0,
|
|
24120
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
24121
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
24122
|
-
const onOptionChange = (0,
|
|
24202
|
+
const wrapperRef = (0, import_react161.useRef)(null);
|
|
24203
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react161.useState)(false);
|
|
24204
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react161.useState)(false);
|
|
24205
|
+
const onOptionChange = (0, import_react161.useCallback)(
|
|
24123
24206
|
(event) => {
|
|
24124
24207
|
if (event.target.checked) {
|
|
24125
24208
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -24127,19 +24210,19 @@ var SegmentedControl = ({
|
|
|
24127
24210
|
},
|
|
24128
24211
|
[options, onChange]
|
|
24129
24212
|
);
|
|
24130
|
-
const sizeStyles = (0,
|
|
24213
|
+
const sizeStyles = (0, import_react161.useMemo)(() => {
|
|
24131
24214
|
const map = {
|
|
24132
|
-
sm: (0,
|
|
24133
|
-
md: (0,
|
|
24134
|
-
lg: (0,
|
|
24135
|
-
xl: (0,
|
|
24215
|
+
sm: (0, import_react160.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
24216
|
+
md: (0, import_react160.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
24217
|
+
lg: (0, import_react160.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
24218
|
+
xl: (0, import_react160.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
24136
24219
|
};
|
|
24137
24220
|
return map[size];
|
|
24138
24221
|
}, [size]);
|
|
24139
|
-
const isIconOnly = (0,
|
|
24222
|
+
const isIconOnly = (0, import_react161.useMemo)(() => {
|
|
24140
24223
|
return options.every((option) => option && option.icon && !option.label);
|
|
24141
24224
|
}, [options]);
|
|
24142
|
-
(0,
|
|
24225
|
+
(0, import_react161.useEffect)(() => {
|
|
24143
24226
|
const wrapperElement = wrapperRef.current;
|
|
24144
24227
|
const onScroll = () => {
|
|
24145
24228
|
if (!wrapperElement) {
|
|
@@ -24160,8 +24243,8 @@ var SegmentedControl = ({
|
|
|
24160
24243
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
24161
24244
|
};
|
|
24162
24245
|
}, []);
|
|
24163
|
-
return /* @__PURE__ */ (0,
|
|
24164
|
-
/* @__PURE__ */ (0,
|
|
24246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
24247
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
24165
24248
|
"div",
|
|
24166
24249
|
{
|
|
24167
24250
|
css: [
|
|
@@ -24177,12 +24260,12 @@ var SegmentedControl = ({
|
|
|
24177
24260
|
}
|
|
24178
24261
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
24179
24262
|
const isDisabled = disabled2 || option.disabled;
|
|
24180
|
-
return /* @__PURE__ */ (0,
|
|
24263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
24181
24264
|
"div",
|
|
24182
24265
|
{
|
|
24183
24266
|
css: segmentedControlItemStyles,
|
|
24184
24267
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
24185
|
-
children: /* @__PURE__ */ (0,
|
|
24268
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
|
|
24186
24269
|
"label",
|
|
24187
24270
|
{
|
|
24188
24271
|
css: [
|
|
@@ -24191,7 +24274,7 @@ var SegmentedControl = ({
|
|
|
24191
24274
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
24192
24275
|
],
|
|
24193
24276
|
children: [
|
|
24194
|
-
/* @__PURE__ */ (0,
|
|
24277
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
24195
24278
|
"input",
|
|
24196
24279
|
{
|
|
24197
24280
|
css: segmentedControlInputStyles,
|
|
@@ -24203,10 +24286,10 @@ var SegmentedControl = ({
|
|
|
24203
24286
|
disabled: isDisabled
|
|
24204
24287
|
}
|
|
24205
24288
|
),
|
|
24206
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0,
|
|
24207
|
-
/* @__PURE__ */ (0,
|
|
24208
|
-
!option.icon ? null : /* @__PURE__ */ (0,
|
|
24209
|
-
!text || hideOptionText ? null : /* @__PURE__ */ (0,
|
|
24289
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
24290
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
|
|
24291
|
+
!option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
24292
|
+
!text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
24210
24293
|
] })
|
|
24211
24294
|
]
|
|
24212
24295
|
}
|
|
@@ -24216,7 +24299,7 @@ var SegmentedControl = ({
|
|
|
24216
24299
|
})
|
|
24217
24300
|
}
|
|
24218
24301
|
) }),
|
|
24219
|
-
/* @__PURE__ */ (0,
|
|
24302
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
24220
24303
|
"div",
|
|
24221
24304
|
{
|
|
24222
24305
|
css: [
|
|
@@ -24234,18 +24317,18 @@ init_emotion_jsx_shim();
|
|
|
24234
24317
|
|
|
24235
24318
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
24236
24319
|
init_emotion_jsx_shim();
|
|
24237
|
-
var
|
|
24238
|
-
var lightFadingOut =
|
|
24320
|
+
var import_react162 = require("@emotion/react");
|
|
24321
|
+
var lightFadingOut = import_react162.keyframes`
|
|
24239
24322
|
from { opacity: 0.1; }
|
|
24240
24323
|
to { opacity: 0.025; }
|
|
24241
24324
|
`;
|
|
24242
|
-
var skeletonStyles =
|
|
24325
|
+
var skeletonStyles = import_react162.css`
|
|
24243
24326
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
24244
24327
|
background-color: var(--gray-900);
|
|
24245
24328
|
`;
|
|
24246
24329
|
|
|
24247
24330
|
// src/components/Skeleton/Skeleton.tsx
|
|
24248
|
-
var
|
|
24331
|
+
var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
|
|
24249
24332
|
var Skeleton = ({
|
|
24250
24333
|
width = "100%",
|
|
24251
24334
|
height = "1.25rem",
|
|
@@ -24253,7 +24336,7 @@ var Skeleton = ({
|
|
|
24253
24336
|
circle = false,
|
|
24254
24337
|
children,
|
|
24255
24338
|
...otherProps
|
|
24256
|
-
}) => /* @__PURE__ */ (0,
|
|
24339
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
|
|
24257
24340
|
"div",
|
|
24258
24341
|
{
|
|
24259
24342
|
css: [
|
|
@@ -24274,12 +24357,12 @@ var Skeleton = ({
|
|
|
24274
24357
|
|
|
24275
24358
|
// src/components/Switch/Switch.tsx
|
|
24276
24359
|
init_emotion_jsx_shim();
|
|
24277
|
-
var
|
|
24360
|
+
var import_react164 = require("react");
|
|
24278
24361
|
|
|
24279
24362
|
// src/components/Switch/Switch.styles.ts
|
|
24280
24363
|
init_emotion_jsx_shim();
|
|
24281
|
-
var
|
|
24282
|
-
var SwitchInputContainer =
|
|
24364
|
+
var import_react163 = require("@emotion/react");
|
|
24365
|
+
var SwitchInputContainer = import_react163.css`
|
|
24283
24366
|
cursor: pointer;
|
|
24284
24367
|
display: inline-block;
|
|
24285
24368
|
position: relative;
|
|
@@ -24288,7 +24371,7 @@ var SwitchInputContainer = import_react161.css`
|
|
|
24288
24371
|
vertical-align: middle;
|
|
24289
24372
|
user-select: none;
|
|
24290
24373
|
`;
|
|
24291
|
-
var SwitchInput = (size) =>
|
|
24374
|
+
var SwitchInput = (size) => import_react163.css`
|
|
24292
24375
|
appearance: none;
|
|
24293
24376
|
border-radius: var(--rounded-full);
|
|
24294
24377
|
background-color: var(--white);
|
|
@@ -24327,7 +24410,7 @@ var SwitchInput = (size) => import_react161.css`
|
|
|
24327
24410
|
cursor: not-allowed;
|
|
24328
24411
|
}
|
|
24329
24412
|
`;
|
|
24330
|
-
var SwitchInputDisabled =
|
|
24413
|
+
var SwitchInputDisabled = import_react163.css`
|
|
24331
24414
|
opacity: var(--opacity-50);
|
|
24332
24415
|
cursor: not-allowed;
|
|
24333
24416
|
|
|
@@ -24335,7 +24418,7 @@ var SwitchInputDisabled = import_react161.css`
|
|
|
24335
24418
|
cursor: not-allowed;
|
|
24336
24419
|
}
|
|
24337
24420
|
`;
|
|
24338
|
-
var SwitchInputLabel = (size) =>
|
|
24421
|
+
var SwitchInputLabel = (size) => import_react163.css`
|
|
24339
24422
|
align-items: center;
|
|
24340
24423
|
color: var(--typography-base);
|
|
24341
24424
|
display: inline-flex;
|
|
@@ -24357,32 +24440,32 @@ var SwitchInputLabel = (size) => import_react161.css`
|
|
|
24357
24440
|
top: 0;
|
|
24358
24441
|
}
|
|
24359
24442
|
`;
|
|
24360
|
-
var SwitchText = (size) =>
|
|
24443
|
+
var SwitchText = (size) => import_react163.css`
|
|
24361
24444
|
color: var(--gray-500);
|
|
24362
24445
|
font-size: var(--fs-sm);
|
|
24363
24446
|
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
24364
24447
|
`;
|
|
24365
24448
|
|
|
24366
24449
|
// src/components/Switch/Switch.tsx
|
|
24367
|
-
var
|
|
24368
|
-
var Switch = (0,
|
|
24450
|
+
var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
|
|
24451
|
+
var Switch = (0, import_react164.forwardRef)(
|
|
24369
24452
|
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
24370
24453
|
let additionalText = infoText;
|
|
24371
24454
|
if (infoText && toggleText) {
|
|
24372
24455
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
24373
24456
|
}
|
|
24374
|
-
return /* @__PURE__ */ (0,
|
|
24375
|
-
/* @__PURE__ */ (0,
|
|
24457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
|
|
24458
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
|
|
24376
24459
|
"label",
|
|
24377
24460
|
{
|
|
24378
24461
|
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
24379
24462
|
children: [
|
|
24380
|
-
/* @__PURE__ */ (0,
|
|
24381
|
-
/* @__PURE__ */ (0,
|
|
24463
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
24464
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
24382
24465
|
]
|
|
24383
24466
|
}
|
|
24384
24467
|
),
|
|
24385
|
-
additionalText ? /* @__PURE__ */ (0,
|
|
24468
|
+
additionalText ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
24386
24469
|
children
|
|
24387
24470
|
] });
|
|
24388
24471
|
}
|
|
@@ -24394,8 +24477,8 @@ var React24 = __toESM(require("react"));
|
|
|
24394
24477
|
|
|
24395
24478
|
// src/components/Table/Table.styles.ts
|
|
24396
24479
|
init_emotion_jsx_shim();
|
|
24397
|
-
var
|
|
24398
|
-
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) =>
|
|
24480
|
+
var import_react165 = require("@emotion/react");
|
|
24481
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react165.css`
|
|
24399
24482
|
border-bottom: 1px solid var(--gray-400);
|
|
24400
24483
|
border-collapse: collapse;
|
|
24401
24484
|
min-width: 100%;
|
|
@@ -24415,66 +24498,66 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
|
|
|
24415
24498
|
background-color: var(--gray-50);
|
|
24416
24499
|
}
|
|
24417
24500
|
`;
|
|
24418
|
-
var tableHead =
|
|
24501
|
+
var tableHead = import_react165.css`
|
|
24419
24502
|
color: var(--typography-base);
|
|
24420
24503
|
text-align: left;
|
|
24421
24504
|
`;
|
|
24422
|
-
var tableRow =
|
|
24505
|
+
var tableRow = import_react165.css`
|
|
24423
24506
|
border-bottom: 1px solid var(--gray-100);
|
|
24424
24507
|
`;
|
|
24425
|
-
var tableCellHead =
|
|
24508
|
+
var tableCellHead = import_react165.css`
|
|
24426
24509
|
font-size: var(--fs-sm);
|
|
24427
24510
|
text-transform: uppercase;
|
|
24428
24511
|
font-weight: var(--fw-bold);
|
|
24429
24512
|
`;
|
|
24430
24513
|
|
|
24431
24514
|
// src/components/Table/Table.tsx
|
|
24432
|
-
var
|
|
24515
|
+
var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
|
|
24433
24516
|
var Table = React24.forwardRef(
|
|
24434
24517
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
24435
|
-
return /* @__PURE__ */ (0,
|
|
24518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
24436
24519
|
}
|
|
24437
24520
|
);
|
|
24438
24521
|
var TableHead = React24.forwardRef(
|
|
24439
24522
|
({ children, ...otherProps }, ref) => {
|
|
24440
|
-
return /* @__PURE__ */ (0,
|
|
24523
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
|
|
24441
24524
|
}
|
|
24442
24525
|
);
|
|
24443
24526
|
var TableBody = React24.forwardRef(
|
|
24444
24527
|
({ children, ...otherProps }, ref) => {
|
|
24445
|
-
return /* @__PURE__ */ (0,
|
|
24528
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tbody", { ref, ...otherProps, children });
|
|
24446
24529
|
}
|
|
24447
24530
|
);
|
|
24448
24531
|
var TableFoot = React24.forwardRef(
|
|
24449
24532
|
({ children, ...otherProps }, ref) => {
|
|
24450
|
-
return /* @__PURE__ */ (0,
|
|
24533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tfoot", { ref, ...otherProps, children });
|
|
24451
24534
|
}
|
|
24452
24535
|
);
|
|
24453
24536
|
var TableRow = React24.forwardRef(
|
|
24454
24537
|
({ children, ...otherProps }, ref) => {
|
|
24455
|
-
return /* @__PURE__ */ (0,
|
|
24538
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
|
|
24456
24539
|
}
|
|
24457
24540
|
);
|
|
24458
24541
|
var TableCellHead = React24.forwardRef(
|
|
24459
24542
|
({ children, ...otherProps }, ref) => {
|
|
24460
|
-
return /* @__PURE__ */ (0,
|
|
24543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
24461
24544
|
}
|
|
24462
24545
|
);
|
|
24463
24546
|
var TableCellData = React24.forwardRef(
|
|
24464
24547
|
({ children, ...otherProps }, ref) => {
|
|
24465
|
-
return /* @__PURE__ */ (0,
|
|
24548
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("td", { ref, ...otherProps, children });
|
|
24466
24549
|
}
|
|
24467
24550
|
);
|
|
24468
24551
|
|
|
24469
24552
|
// src/components/Tabs/Tabs.tsx
|
|
24470
24553
|
init_emotion_jsx_shim();
|
|
24471
|
-
var
|
|
24472
|
-
var
|
|
24554
|
+
var import_react167 = require("@ariakit/react");
|
|
24555
|
+
var import_react168 = require("react");
|
|
24473
24556
|
|
|
24474
24557
|
// src/components/Tabs/Tabs.styles.ts
|
|
24475
24558
|
init_emotion_jsx_shim();
|
|
24476
|
-
var
|
|
24477
|
-
var tabButtonStyles =
|
|
24559
|
+
var import_react166 = require("@emotion/react");
|
|
24560
|
+
var tabButtonStyles = import_react166.css`
|
|
24478
24561
|
align-items: center;
|
|
24479
24562
|
border: 0;
|
|
24480
24563
|
height: 2.5rem;
|
|
@@ -24491,16 +24574,16 @@ var tabButtonStyles = import_react164.css`
|
|
|
24491
24574
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
24492
24575
|
}
|
|
24493
24576
|
`;
|
|
24494
|
-
var tabButtonGroupStyles =
|
|
24577
|
+
var tabButtonGroupStyles = import_react166.css`
|
|
24495
24578
|
display: flex;
|
|
24496
24579
|
gap: var(--spacing-base);
|
|
24497
24580
|
border-bottom: 1px solid var(--gray-300);
|
|
24498
24581
|
`;
|
|
24499
24582
|
|
|
24500
24583
|
// src/components/Tabs/Tabs.tsx
|
|
24501
|
-
var
|
|
24584
|
+
var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
|
|
24502
24585
|
var useCurrentTab = () => {
|
|
24503
|
-
const context = (0,
|
|
24586
|
+
const context = (0, import_react167.useTabStore)();
|
|
24504
24587
|
if (!context) {
|
|
24505
24588
|
throw new Error("This component can only be used inside <Tabs>");
|
|
24506
24589
|
}
|
|
@@ -24514,12 +24597,12 @@ var Tabs = ({
|
|
|
24514
24597
|
manual,
|
|
24515
24598
|
...props
|
|
24516
24599
|
}) => {
|
|
24517
|
-
const selected = (0,
|
|
24600
|
+
const selected = (0, import_react168.useMemo)(() => {
|
|
24518
24601
|
if (selectedId) return selectedId;
|
|
24519
24602
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
24520
24603
|
}, [selectedId, useHashForState]);
|
|
24521
|
-
const tab = (0,
|
|
24522
|
-
const onTabSelect = (0,
|
|
24604
|
+
const tab = (0, import_react167.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
|
|
24605
|
+
const onTabSelect = (0, import_react168.useCallback)(
|
|
24523
24606
|
(value) => {
|
|
24524
24607
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
24525
24608
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -24530,28 +24613,28 @@ var Tabs = ({
|
|
|
24530
24613
|
},
|
|
24531
24614
|
[onSelectedIdChange, useHashForState]
|
|
24532
24615
|
);
|
|
24533
|
-
(0,
|
|
24616
|
+
(0, import_react168.useEffect)(() => {
|
|
24534
24617
|
if (selected && selected !== tab.getState().activeId) {
|
|
24535
24618
|
tab.setSelectedId(selected);
|
|
24536
24619
|
}
|
|
24537
24620
|
}, [selected, tab]);
|
|
24538
|
-
return /* @__PURE__ */ (0,
|
|
24621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
24539
24622
|
};
|
|
24540
24623
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
24541
|
-
return /* @__PURE__ */ (0,
|
|
24624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
24542
24625
|
};
|
|
24543
24626
|
var TabButton = ({
|
|
24544
24627
|
children,
|
|
24545
24628
|
id,
|
|
24546
24629
|
...props
|
|
24547
24630
|
}) => {
|
|
24548
|
-
return /* @__PURE__ */ (0,
|
|
24631
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
24549
24632
|
};
|
|
24550
24633
|
var TabContent = ({
|
|
24551
24634
|
children,
|
|
24552
24635
|
...props
|
|
24553
24636
|
}) => {
|
|
24554
|
-
return /* @__PURE__ */ (0,
|
|
24637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabPanel, { ...props, children });
|
|
24555
24638
|
};
|
|
24556
24639
|
|
|
24557
24640
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -24559,8 +24642,8 @@ init_emotion_jsx_shim();
|
|
|
24559
24642
|
|
|
24560
24643
|
// src/components/Validation/StatusBullet.styles.ts
|
|
24561
24644
|
init_emotion_jsx_shim();
|
|
24562
|
-
var
|
|
24563
|
-
var StatusBulletContainer =
|
|
24645
|
+
var import_react169 = require("@emotion/react");
|
|
24646
|
+
var StatusBulletContainer = import_react169.css`
|
|
24564
24647
|
align-items: center;
|
|
24565
24648
|
align-self: center;
|
|
24566
24649
|
color: var(--gray-500);
|
|
@@ -24577,33 +24660,33 @@ var StatusBulletContainer = import_react167.css`
|
|
|
24577
24660
|
display: block;
|
|
24578
24661
|
}
|
|
24579
24662
|
`;
|
|
24580
|
-
var StatusBulletBase =
|
|
24663
|
+
var StatusBulletBase = import_react169.css`
|
|
24581
24664
|
font-size: var(--fs-sm);
|
|
24582
24665
|
&:before {
|
|
24583
24666
|
width: var(--fs-xs);
|
|
24584
24667
|
height: var(--fs-xs);
|
|
24585
24668
|
}
|
|
24586
24669
|
`;
|
|
24587
|
-
var StatusBulletSmall =
|
|
24670
|
+
var StatusBulletSmall = import_react169.css`
|
|
24588
24671
|
font-size: var(--fs-xs);
|
|
24589
24672
|
&:before {
|
|
24590
24673
|
width: var(--fs-xxs);
|
|
24591
24674
|
height: var(--fs-xxs);
|
|
24592
24675
|
}
|
|
24593
24676
|
`;
|
|
24594
|
-
var StatusDraft =
|
|
24677
|
+
var StatusDraft = import_react169.css`
|
|
24595
24678
|
&:before {
|
|
24596
24679
|
background: var(--white);
|
|
24597
24680
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
24598
24681
|
}
|
|
24599
24682
|
`;
|
|
24600
|
-
var StatusModified =
|
|
24683
|
+
var StatusModified = import_react169.css`
|
|
24601
24684
|
&:before {
|
|
24602
24685
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
24603
24686
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
24604
24687
|
}
|
|
24605
24688
|
`;
|
|
24606
|
-
var StatusError =
|
|
24689
|
+
var StatusError = import_react169.css`
|
|
24607
24690
|
color: var(--error);
|
|
24608
24691
|
&:before {
|
|
24609
24692
|
/* TODO: replace this with an svg icon */
|
|
@@ -24616,29 +24699,29 @@ var StatusError = import_react167.css`
|
|
|
24616
24699
|
);
|
|
24617
24700
|
}
|
|
24618
24701
|
`;
|
|
24619
|
-
var StatusPublished =
|
|
24702
|
+
var StatusPublished = import_react169.css`
|
|
24620
24703
|
&:before {
|
|
24621
24704
|
background: var(--accent-dark);
|
|
24622
24705
|
}
|
|
24623
24706
|
`;
|
|
24624
|
-
var StatusOrphan =
|
|
24707
|
+
var StatusOrphan = import_react169.css`
|
|
24625
24708
|
&:before {
|
|
24626
24709
|
background: var(--brand-secondary-5);
|
|
24627
24710
|
}
|
|
24628
24711
|
`;
|
|
24629
|
-
var StatusUnknown =
|
|
24712
|
+
var StatusUnknown = import_react169.css`
|
|
24630
24713
|
&:before {
|
|
24631
24714
|
background: var(--gray-800);
|
|
24632
24715
|
}
|
|
24633
24716
|
`;
|
|
24634
|
-
var StatusDeleted =
|
|
24717
|
+
var StatusDeleted = import_react169.css`
|
|
24635
24718
|
&:before {
|
|
24636
24719
|
background: var(--error);
|
|
24637
24720
|
}
|
|
24638
24721
|
`;
|
|
24639
24722
|
|
|
24640
24723
|
// src/components/Validation/StatusBullet.tsx
|
|
24641
|
-
var
|
|
24724
|
+
var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
|
|
24642
24725
|
var StatusBullet = ({
|
|
24643
24726
|
status,
|
|
24644
24727
|
hideText = false,
|
|
@@ -24658,7 +24741,7 @@ var StatusBullet = ({
|
|
|
24658
24741
|
Deleted: StatusDeleted
|
|
24659
24742
|
};
|
|
24660
24743
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
24661
|
-
return /* @__PURE__ */ (0,
|
|
24744
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
24662
24745
|
"span",
|
|
24663
24746
|
{
|
|
24664
24747
|
role: "status",
|
|
@@ -24769,6 +24852,7 @@ var StatusBullet = ({
|
|
|
24769
24852
|
ObjectGridItemCoverButton,
|
|
24770
24853
|
ObjectGridItemHeading,
|
|
24771
24854
|
ObjectGridItemIconWithTooltip,
|
|
24855
|
+
ObjectGridItemLoadingSkeleton,
|
|
24772
24856
|
ObjectItemLoadingSkeleton,
|
|
24773
24857
|
ObjectListItem,
|
|
24774
24858
|
ObjectListItemContainer,
|
|
@@ -24917,16 +25001,12 @@ var StatusBullet = ({
|
|
|
24917
25001
|
supports,
|
|
24918
25002
|
textInput,
|
|
24919
25003
|
toast,
|
|
24920
|
-
uniformAiIcon,
|
|
24921
25004
|
uniformComponentIcon,
|
|
24922
25005
|
uniformComponentPatternIcon,
|
|
24923
25006
|
uniformCompositionPatternIcon,
|
|
24924
|
-
uniformConditionalValuesIcon,
|
|
24925
25007
|
uniformContentTypeIcon,
|
|
24926
25008
|
uniformEntryIcon,
|
|
24927
25009
|
uniformEntryPatternIcon,
|
|
24928
|
-
uniformLocaleDisabledIcon,
|
|
24929
|
-
uniformLocaleIcon,
|
|
24930
25010
|
useBreakpoint,
|
|
24931
25011
|
useCloseCurrentDrawer,
|
|
24932
25012
|
useCurrentDrawer,
|