@uniformdev/design-system 20.26.1 → 20.26.2
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 +447 -444
- package/dist/index.d.mts +6 -4
- package/dist/index.d.ts +6 -4
- package/dist/index.js +705 -702
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -9620,6 +9620,68 @@ var KeyValueInputItem = ({
|
|
|
9620
9620
|
] });
|
|
9621
9621
|
};
|
|
9622
9622
|
|
|
9623
|
+
// src/components/Popover/Popover.tsx
|
|
9624
|
+
import {
|
|
9625
|
+
Popover as AriakitPopover,
|
|
9626
|
+
PopoverDisclosure as PopoverDisclosure2,
|
|
9627
|
+
PopoverProvider as PopoverProvider2,
|
|
9628
|
+
usePopoverContext,
|
|
9629
|
+
usePopoverStore as usePopoverStore2
|
|
9630
|
+
} from "@ariakit/react";
|
|
9631
|
+
import { useEffect as useEffect12 } from "react";
|
|
9632
|
+
import { Fragment as Fragment10, jsx as jsx92, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
|
|
9633
|
+
var Popover3 = ({
|
|
9634
|
+
iconColor = "action",
|
|
9635
|
+
icon = "info",
|
|
9636
|
+
iconSize = "1rem",
|
|
9637
|
+
buttonText,
|
|
9638
|
+
ariaLabel,
|
|
9639
|
+
placement = "bottom",
|
|
9640
|
+
testId,
|
|
9641
|
+
trigger: trigger2,
|
|
9642
|
+
children,
|
|
9643
|
+
onInit,
|
|
9644
|
+
variant = "small",
|
|
9645
|
+
maxWidth = variant === "large" ? "24rem" : "14rem",
|
|
9646
|
+
...otherProps
|
|
9647
|
+
}) => {
|
|
9648
|
+
const popover2 = usePopoverStore2({ placement });
|
|
9649
|
+
useEffect12(() => {
|
|
9650
|
+
onInit == null ? void 0 : onInit({ store: popover2 });
|
|
9651
|
+
}, [popover2]);
|
|
9652
|
+
return /* @__PURE__ */ jsxs59(PopoverProvider2, { store: popover2, children: [
|
|
9653
|
+
/* @__PURE__ */ jsx92(
|
|
9654
|
+
PopoverDisclosure2,
|
|
9655
|
+
{
|
|
9656
|
+
css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
|
|
9657
|
+
title: buttonText,
|
|
9658
|
+
"data-testid": testId,
|
|
9659
|
+
children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs59(Fragment10, { children: [
|
|
9660
|
+
/* @__PURE__ */ jsx92(Icon, { icon, iconColor, size: iconSize }),
|
|
9661
|
+
/* @__PURE__ */ jsx92("span", { hidden: true, children: buttonText })
|
|
9662
|
+
] })
|
|
9663
|
+
}
|
|
9664
|
+
),
|
|
9665
|
+
/* @__PURE__ */ jsx92(
|
|
9666
|
+
AriakitPopover,
|
|
9667
|
+
{
|
|
9668
|
+
unmountOnHide: true,
|
|
9669
|
+
style: {
|
|
9670
|
+
maxWidth
|
|
9671
|
+
},
|
|
9672
|
+
css: [Popover, variant === "large" ? PopoverVariantLarge : PopoverVariantSmall],
|
|
9673
|
+
...otherProps,
|
|
9674
|
+
"aria-label": ariaLabel,
|
|
9675
|
+
children
|
|
9676
|
+
}
|
|
9677
|
+
)
|
|
9678
|
+
] });
|
|
9679
|
+
};
|
|
9680
|
+
var usePopoverComponentContext = () => {
|
|
9681
|
+
const contextValue = usePopoverContext();
|
|
9682
|
+
return contextValue;
|
|
9683
|
+
};
|
|
9684
|
+
|
|
9623
9685
|
// src/components/LimitsBar/LimitsBar.styles.ts
|
|
9624
9686
|
import { css as css70 } from "@emotion/react";
|
|
9625
9687
|
var LimitsBarContainer = css70`
|
|
@@ -9637,13 +9699,8 @@ var LimitsBarProgressBarLine = css70`
|
|
|
9637
9699
|
inset: 0;
|
|
9638
9700
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
9639
9701
|
`;
|
|
9640
|
-
var
|
|
9641
|
-
|
|
9642
|
-
justify-content: space-between;
|
|
9643
|
-
font-weight: var(--fw-bold);
|
|
9644
|
-
`;
|
|
9645
|
-
var LimitsBarLabel = css70`
|
|
9646
|
-
font-size: var(--fs-baase);
|
|
9702
|
+
var LimitsBarCountText = css70`
|
|
9703
|
+
font-size: var(--fs-sm);
|
|
9647
9704
|
`;
|
|
9648
9705
|
var LimitsBarBgColor = (statusColor) => css70`
|
|
9649
9706
|
background: ${statusColor};
|
|
@@ -9653,36 +9710,40 @@ var LimitsBarTextColor = (statusColor) => css70`
|
|
|
9653
9710
|
`;
|
|
9654
9711
|
|
|
9655
9712
|
// src/components/LimitsBar/LimitsBar.tsx
|
|
9656
|
-
import { jsx as
|
|
9657
|
-
var LimitsBar = ({ current, max,
|
|
9713
|
+
import { jsx as jsx93, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
|
|
9714
|
+
var LimitsBar = ({ current, max, popoverContent }) => {
|
|
9658
9715
|
const maxPercentage = 100;
|
|
9659
|
-
const
|
|
9660
|
-
const
|
|
9661
|
-
|
|
9662
|
-
|
|
9663
|
-
|
|
9664
|
-
|
|
9716
|
+
const isUnlimited = max < 0;
|
|
9717
|
+
const progressBarValue = isUnlimited ? maxPercentage : Math.min(Math.ceil(current / max * maxPercentage), maxPercentage);
|
|
9718
|
+
const percentage = isUnlimited ? 0 : current / max * 100;
|
|
9719
|
+
const getBarColor = () => {
|
|
9720
|
+
if (isUnlimited) return "var(--utility-success-icon)";
|
|
9721
|
+
if (percentage >= 100) return "var(--utility-danger-icon)";
|
|
9722
|
+
if (percentage >= 90) return "var(--utility-caution-icon)";
|
|
9723
|
+
return "var(--utility-success-icon)";
|
|
9665
9724
|
};
|
|
9666
|
-
const
|
|
9667
|
-
|
|
9668
|
-
|
|
9669
|
-
|
|
9670
|
-
|
|
9671
|
-
|
|
9672
|
-
|
|
9673
|
-
|
|
9674
|
-
|
|
9675
|
-
|
|
9676
|
-
|
|
9725
|
+
const getTextColor = () => {
|
|
9726
|
+
if (isUnlimited) return "var(--utility-success-icon)";
|
|
9727
|
+
if (percentage >= 100) return "var(--utility-danger-title)";
|
|
9728
|
+
if (percentage >= 90) return "var(--utility-caution-title)";
|
|
9729
|
+
return "var(--typography-light)";
|
|
9730
|
+
};
|
|
9731
|
+
const statusColor = getBarColor();
|
|
9732
|
+
const textColor = getTextColor();
|
|
9733
|
+
const displayText = isUnlimited ? `${current} of unlimited` : `${current} of ${max}`;
|
|
9734
|
+
const ariaValueMax = isUnlimited ? -1 : max;
|
|
9735
|
+
const ariaValueText = displayText;
|
|
9736
|
+
return /* @__PURE__ */ jsxs60("div", { css: [LimitsBarContainer, functionalColors], children: [
|
|
9737
|
+
/* @__PURE__ */ jsx93(
|
|
9677
9738
|
"div",
|
|
9678
9739
|
{
|
|
9679
9740
|
role: "progressbar",
|
|
9680
9741
|
"aria-valuenow": current,
|
|
9681
9742
|
"aria-valuemin": 0,
|
|
9682
|
-
"aria-valuemax":
|
|
9683
|
-
"aria-valuetext":
|
|
9743
|
+
"aria-valuemax": ariaValueMax,
|
|
9744
|
+
"aria-valuetext": ariaValueText,
|
|
9684
9745
|
css: LimitsBarProgressBar,
|
|
9685
|
-
children: /* @__PURE__ */
|
|
9746
|
+
children: /* @__PURE__ */ jsx93(
|
|
9686
9747
|
"span",
|
|
9687
9748
|
{
|
|
9688
9749
|
role: "presentation",
|
|
@@ -9693,7 +9754,11 @@ var LimitsBar = ({ current, max, label }) => {
|
|
|
9693
9754
|
}
|
|
9694
9755
|
)
|
|
9695
9756
|
}
|
|
9696
|
-
)
|
|
9757
|
+
),
|
|
9758
|
+
/* @__PURE__ */ jsxs60(HorizontalRhythm, { gap: "sm", align: "center", children: [
|
|
9759
|
+
/* @__PURE__ */ jsx93("span", { css: [LimitsBarCountText, LimitsBarTextColor(textColor)], "aria-label": "usage count", children: displayText }),
|
|
9760
|
+
popoverContent ? /* @__PURE__ */ jsx93(Popover3, { buttonText: "Info", placement: "top", children: popoverContent }) : null
|
|
9761
|
+
] })
|
|
9697
9762
|
] });
|
|
9698
9763
|
};
|
|
9699
9764
|
|
|
@@ -9712,10 +9777,10 @@ var LinkListTitle = css71`
|
|
|
9712
9777
|
`;
|
|
9713
9778
|
|
|
9714
9779
|
// src/components/LinkList/LinkList.tsx
|
|
9715
|
-
import { jsx as
|
|
9780
|
+
import { jsx as jsx94, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
|
|
9716
9781
|
var LinkList = ({ title, children, ...props }) => {
|
|
9717
|
-
return /* @__PURE__ */
|
|
9718
|
-
/* @__PURE__ */
|
|
9782
|
+
return /* @__PURE__ */ jsxs61("div", { css: LinkListContainer, ...props, children: [
|
|
9783
|
+
/* @__PURE__ */ jsx94(Heading2, { level: 3, css: LinkListTitle, withMarginBottom: false, children: title }),
|
|
9719
9784
|
children
|
|
9720
9785
|
] });
|
|
9721
9786
|
};
|
|
@@ -9751,10 +9816,10 @@ var ScrollableListInner = css72`
|
|
|
9751
9816
|
`;
|
|
9752
9817
|
|
|
9753
9818
|
// src/components/List/ScrollableList.tsx
|
|
9754
|
-
import { jsx as
|
|
9819
|
+
import { jsx as jsx95, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
|
|
9755
9820
|
var ScrollableList = ({ label, children, ...props }) => {
|
|
9756
|
-
return /* @__PURE__ */
|
|
9757
|
-
label ? /* @__PURE__ */
|
|
9821
|
+
return /* @__PURE__ */ jsxs62("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
|
|
9822
|
+
label ? /* @__PURE__ */ jsx95(
|
|
9758
9823
|
"span",
|
|
9759
9824
|
{
|
|
9760
9825
|
css: css73`
|
|
@@ -9763,7 +9828,7 @@ var ScrollableList = ({ label, children, ...props }) => {
|
|
|
9763
9828
|
children: label
|
|
9764
9829
|
}
|
|
9765
9830
|
) : null,
|
|
9766
|
-
/* @__PURE__ */
|
|
9831
|
+
/* @__PURE__ */ jsx95("div", { css: [ScrollableListInner, scrollbarStyles], children })
|
|
9767
9832
|
] });
|
|
9768
9833
|
};
|
|
9769
9834
|
|
|
@@ -9835,7 +9900,7 @@ var ScrollableListIconVisible = css74`
|
|
|
9835
9900
|
`;
|
|
9836
9901
|
|
|
9837
9902
|
// src/components/List/ScrollableListInputItem.tsx
|
|
9838
|
-
import { jsx as
|
|
9903
|
+
import { jsx as jsx96, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
|
|
9839
9904
|
var ScrollableListInputItem = ({
|
|
9840
9905
|
label,
|
|
9841
9906
|
icon,
|
|
@@ -9845,7 +9910,7 @@ var ScrollableListInputItem = ({
|
|
|
9845
9910
|
labelTestId,
|
|
9846
9911
|
...props
|
|
9847
9912
|
}) => {
|
|
9848
|
-
return /* @__PURE__ */
|
|
9913
|
+
return /* @__PURE__ */ jsx96(
|
|
9849
9914
|
"div",
|
|
9850
9915
|
{
|
|
9851
9916
|
css: [
|
|
@@ -9854,13 +9919,13 @@ var ScrollableListInputItem = ({
|
|
|
9854
9919
|
active2 ? ScrollableListItemActive : void 0
|
|
9855
9920
|
],
|
|
9856
9921
|
...props,
|
|
9857
|
-
children: /* @__PURE__ */
|
|
9858
|
-
/* @__PURE__ */
|
|
9922
|
+
children: /* @__PURE__ */ jsxs63("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
|
|
9923
|
+
/* @__PURE__ */ jsxs63("span", { css: ScrollableListInputText, children: [
|
|
9859
9924
|
icon,
|
|
9860
9925
|
label
|
|
9861
9926
|
] }),
|
|
9862
|
-
/* @__PURE__ */
|
|
9863
|
-
/* @__PURE__ */
|
|
9927
|
+
/* @__PURE__ */ jsx96("div", { css: ScrollableListHiddenInput, children }),
|
|
9928
|
+
/* @__PURE__ */ jsx96(
|
|
9864
9929
|
Icon,
|
|
9865
9930
|
{
|
|
9866
9931
|
icon: CgCheck3,
|
|
@@ -9878,7 +9943,7 @@ var ScrollableListInputItem = ({
|
|
|
9878
9943
|
|
|
9879
9944
|
// src/components/List/ScrollableListItem.tsx
|
|
9880
9945
|
import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
|
|
9881
|
-
import { jsx as
|
|
9946
|
+
import { jsx as jsx97, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
|
|
9882
9947
|
var ScrollableListItem = ({
|
|
9883
9948
|
buttonText,
|
|
9884
9949
|
icon,
|
|
@@ -9886,7 +9951,7 @@ var ScrollableListItem = ({
|
|
|
9886
9951
|
disableShadow,
|
|
9887
9952
|
...props
|
|
9888
9953
|
}) => {
|
|
9889
|
-
return /* @__PURE__ */
|
|
9954
|
+
return /* @__PURE__ */ jsx97(
|
|
9890
9955
|
"div",
|
|
9891
9956
|
{
|
|
9892
9957
|
css: [
|
|
@@ -9894,12 +9959,12 @@ var ScrollableListItem = ({
|
|
|
9894
9959
|
disableShadow ? void 0 : ScrollableListItemShadow,
|
|
9895
9960
|
active2 ? ScrollableListItemActive : void 0
|
|
9896
9961
|
],
|
|
9897
|
-
children: /* @__PURE__ */
|
|
9898
|
-
/* @__PURE__ */
|
|
9962
|
+
children: /* @__PURE__ */ jsxs64("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
|
|
9963
|
+
/* @__PURE__ */ jsxs64(HorizontalRhythm, { gap: "xs", align: "center", children: [
|
|
9899
9964
|
icon,
|
|
9900
|
-
/* @__PURE__ */
|
|
9965
|
+
/* @__PURE__ */ jsx97("span", { children: buttonText })
|
|
9901
9966
|
] }),
|
|
9902
|
-
/* @__PURE__ */
|
|
9967
|
+
/* @__PURE__ */ jsx97(
|
|
9903
9968
|
Icon,
|
|
9904
9969
|
{
|
|
9905
9970
|
icon: CgCheck4,
|
|
@@ -9966,7 +10031,7 @@ function loadingDot(size, backgroundColor) {
|
|
|
9966
10031
|
}
|
|
9967
10032
|
|
|
9968
10033
|
// src/components/LoadingIndicator/LoadingIndicator.tsx
|
|
9969
|
-
import { jsx as
|
|
10034
|
+
import { jsx as jsx98, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
|
|
9970
10035
|
var cssColorMap = {
|
|
9971
10036
|
gray: "var(--gray-700)",
|
|
9972
10037
|
"accent-alt": "var(--accent-alt-dark)"
|
|
@@ -9974,10 +10039,10 @@ var cssColorMap = {
|
|
|
9974
10039
|
var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
|
|
9975
10040
|
const cssColor = cssColorMap[color];
|
|
9976
10041
|
const dotStyle = loadingDot(size, cssColor);
|
|
9977
|
-
return /* @__PURE__ */
|
|
9978
|
-
/* @__PURE__ */
|
|
9979
|
-
/* @__PURE__ */
|
|
9980
|
-
/* @__PURE__ */
|
|
10042
|
+
return /* @__PURE__ */ jsxs65("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
|
|
10043
|
+
/* @__PURE__ */ jsx98("span", { css: dotStyle }),
|
|
10044
|
+
/* @__PURE__ */ jsx98("span", { css: dotStyle }),
|
|
10045
|
+
/* @__PURE__ */ jsx98("span", { css: dotStyle })
|
|
9981
10046
|
] });
|
|
9982
10047
|
};
|
|
9983
10048
|
|
|
@@ -10202,7 +10267,7 @@ var loaderAnimationContainer = css76`
|
|
|
10202
10267
|
`;
|
|
10203
10268
|
|
|
10204
10269
|
// src/components/LoadingOverlay/LoadingOverlay.tsx
|
|
10205
|
-
import { jsx as
|
|
10270
|
+
import { jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
|
|
10206
10271
|
var LoadingOverlay = ({
|
|
10207
10272
|
isActive,
|
|
10208
10273
|
statusMessage,
|
|
@@ -10214,7 +10279,7 @@ var LoadingOverlay = ({
|
|
|
10214
10279
|
children,
|
|
10215
10280
|
position = "absolute"
|
|
10216
10281
|
}) => {
|
|
10217
|
-
return /* @__PURE__ */
|
|
10282
|
+
return /* @__PURE__ */ jsxs66(
|
|
10218
10283
|
"div",
|
|
10219
10284
|
{
|
|
10220
10285
|
role: "alert",
|
|
@@ -10227,11 +10292,11 @@ var LoadingOverlay = ({
|
|
|
10227
10292
|
"aria-hidden": !isActive,
|
|
10228
10293
|
"aria-busy": isActive && !isPaused,
|
|
10229
10294
|
children: [
|
|
10230
|
-
/* @__PURE__ */
|
|
10231
|
-
/* @__PURE__ */
|
|
10232
|
-
/* @__PURE__ */
|
|
10233
|
-
statusMessage ? /* @__PURE__ */
|
|
10234
|
-
/* @__PURE__ */
|
|
10295
|
+
/* @__PURE__ */ jsx99("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
|
|
10296
|
+
/* @__PURE__ */ jsx99("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs66("div", { css: loadingOverlayBody, children: [
|
|
10297
|
+
/* @__PURE__ */ jsx99(LoadingAnimation, { label: "Loading...", isPaused, width: loaderSize }),
|
|
10298
|
+
statusMessage ? /* @__PURE__ */ jsx99("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
|
|
10299
|
+
/* @__PURE__ */ jsx99("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
|
|
10235
10300
|
] }) })
|
|
10236
10301
|
]
|
|
10237
10302
|
}
|
|
@@ -10243,7 +10308,7 @@ var LoadingAnimation = ({
|
|
|
10243
10308
|
css: css110,
|
|
10244
10309
|
isPaused
|
|
10245
10310
|
}) => {
|
|
10246
|
-
return /* @__PURE__ */
|
|
10311
|
+
return /* @__PURE__ */ jsxs66(
|
|
10247
10312
|
"div",
|
|
10248
10313
|
{
|
|
10249
10314
|
"aria-label": label,
|
|
@@ -10254,38 +10319,38 @@ var LoadingAnimation = ({
|
|
|
10254
10319
|
css: [loaderAnimationContainer, css110],
|
|
10255
10320
|
className: `loader-container${isPaused ? " paused" : ""}`,
|
|
10256
10321
|
children: [
|
|
10257
|
-
/* @__PURE__ */
|
|
10258
|
-
/* @__PURE__ */
|
|
10259
|
-
/* @__PURE__ */
|
|
10260
|
-
/* @__PURE__ */
|
|
10261
|
-
/* @__PURE__ */
|
|
10322
|
+
/* @__PURE__ */ jsxs66("div", { className: "bottom-cubes", children: [
|
|
10323
|
+
/* @__PURE__ */ jsxs66("div", { className: "cube cube-1 bottom-cube", children: [
|
|
10324
|
+
/* @__PURE__ */ jsx99("div", { className: "face left" }),
|
|
10325
|
+
/* @__PURE__ */ jsx99("div", { className: "face right" }),
|
|
10326
|
+
/* @__PURE__ */ jsx99("div", { className: "face top" })
|
|
10262
10327
|
] }),
|
|
10263
|
-
/* @__PURE__ */
|
|
10264
|
-
/* @__PURE__ */
|
|
10265
|
-
/* @__PURE__ */
|
|
10266
|
-
/* @__PURE__ */
|
|
10328
|
+
/* @__PURE__ */ jsxs66("div", { className: "cube cube-2 bottom-cube", children: [
|
|
10329
|
+
/* @__PURE__ */ jsx99("div", { className: "face left" }),
|
|
10330
|
+
/* @__PURE__ */ jsx99("div", { className: "face right" }),
|
|
10331
|
+
/* @__PURE__ */ jsx99("div", { className: "face top" })
|
|
10267
10332
|
] }),
|
|
10268
|
-
/* @__PURE__ */
|
|
10269
|
-
/* @__PURE__ */
|
|
10270
|
-
/* @__PURE__ */
|
|
10271
|
-
/* @__PURE__ */
|
|
10333
|
+
/* @__PURE__ */ jsxs66("div", { className: "cube cube-3 bottom-cube", children: [
|
|
10334
|
+
/* @__PURE__ */ jsx99("div", { className: "face left" }),
|
|
10335
|
+
/* @__PURE__ */ jsx99("div", { className: "face right" }),
|
|
10336
|
+
/* @__PURE__ */ jsx99("div", { className: "face top" })
|
|
10272
10337
|
] })
|
|
10273
10338
|
] }),
|
|
10274
|
-
/* @__PURE__ */
|
|
10275
|
-
/* @__PURE__ */
|
|
10276
|
-
/* @__PURE__ */
|
|
10277
|
-
/* @__PURE__ */
|
|
10278
|
-
/* @__PURE__ */
|
|
10339
|
+
/* @__PURE__ */ jsxs66("div", { className: "top-cubes", children: [
|
|
10340
|
+
/* @__PURE__ */ jsxs66("div", { className: "cube cube-1", children: [
|
|
10341
|
+
/* @__PURE__ */ jsx99("div", { className: "face left" }),
|
|
10342
|
+
/* @__PURE__ */ jsx99("div", { className: "face right" }),
|
|
10343
|
+
/* @__PURE__ */ jsx99("div", { className: "face top" })
|
|
10279
10344
|
] }),
|
|
10280
|
-
/* @__PURE__ */
|
|
10281
|
-
/* @__PURE__ */
|
|
10282
|
-
/* @__PURE__ */
|
|
10283
|
-
/* @__PURE__ */
|
|
10345
|
+
/* @__PURE__ */ jsxs66("div", { className: "cube cube-2", children: [
|
|
10346
|
+
/* @__PURE__ */ jsx99("div", { className: "face left" }),
|
|
10347
|
+
/* @__PURE__ */ jsx99("div", { className: "face right" }),
|
|
10348
|
+
/* @__PURE__ */ jsx99("div", { className: "face top" })
|
|
10284
10349
|
] }),
|
|
10285
|
-
/* @__PURE__ */
|
|
10286
|
-
/* @__PURE__ */
|
|
10287
|
-
/* @__PURE__ */
|
|
10288
|
-
/* @__PURE__ */
|
|
10350
|
+
/* @__PURE__ */ jsxs66("div", { className: "cube cube-3", children: [
|
|
10351
|
+
/* @__PURE__ */ jsx99("div", { className: "face left" }),
|
|
10352
|
+
/* @__PURE__ */ jsx99("div", { className: "face right" }),
|
|
10353
|
+
/* @__PURE__ */ jsx99("div", { className: "face top" })
|
|
10289
10354
|
] })
|
|
10290
10355
|
] })
|
|
10291
10356
|
]
|
|
@@ -10293,7 +10358,7 @@ var LoadingAnimation = ({
|
|
|
10293
10358
|
);
|
|
10294
10359
|
};
|
|
10295
10360
|
var LoadingIcon = ({ height, width, ...props }) => {
|
|
10296
|
-
return /* @__PURE__ */
|
|
10361
|
+
return /* @__PURE__ */ jsx99(
|
|
10297
10362
|
"svg",
|
|
10298
10363
|
{
|
|
10299
10364
|
viewBox: "0 0 38 38",
|
|
@@ -10303,9 +10368,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
|
|
|
10303
10368
|
stroke: "currentColor",
|
|
10304
10369
|
...props,
|
|
10305
10370
|
"data-testid": "loading-icon",
|
|
10306
|
-
children: /* @__PURE__ */
|
|
10307
|
-
/* @__PURE__ */
|
|
10308
|
-
/* @__PURE__ */
|
|
10371
|
+
children: /* @__PURE__ */ jsx99("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs66("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
|
|
10372
|
+
/* @__PURE__ */ jsx99("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
|
|
10373
|
+
/* @__PURE__ */ jsx99("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx99(
|
|
10309
10374
|
"animateTransform",
|
|
10310
10375
|
{
|
|
10311
10376
|
attributeName: "transform",
|
|
@@ -10324,7 +10389,7 @@ var LoadingIcon = ({ height, width, ...props }) => {
|
|
|
10324
10389
|
// src/components/Modal/Modal.tsx
|
|
10325
10390
|
import { PortalContext } from "@ariakit/react";
|
|
10326
10391
|
import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
|
|
10327
|
-
import React17, { useEffect as
|
|
10392
|
+
import React17, { useEffect as useEffect13, useRef as useRef7 } from "react";
|
|
10328
10393
|
|
|
10329
10394
|
// src/components/Modal/Modal.styles.ts
|
|
10330
10395
|
import { css as css77 } from "@emotion/react";
|
|
@@ -10411,7 +10476,7 @@ var modalDialogInnerStyles = css77`
|
|
|
10411
10476
|
`;
|
|
10412
10477
|
|
|
10413
10478
|
// src/components/Modal/Modal.tsx
|
|
10414
|
-
import { jsx as
|
|
10479
|
+
import { jsx as jsx100, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
|
|
10415
10480
|
var defaultModalWidth = "75rem";
|
|
10416
10481
|
var defaultModalHeight = "51rem";
|
|
10417
10482
|
var Modal = React17.forwardRef(
|
|
@@ -10441,7 +10506,7 @@ var Modal = React17.forwardRef(
|
|
|
10441
10506
|
},
|
|
10442
10507
|
shortcut: "escape"
|
|
10443
10508
|
});
|
|
10444
|
-
|
|
10509
|
+
useEffect13(() => {
|
|
10445
10510
|
var _a;
|
|
10446
10511
|
if (!document.contains(dialogRef.current)) {
|
|
10447
10512
|
console.warn(
|
|
@@ -10455,7 +10520,7 @@ var Modal = React17.forwardRef(
|
|
|
10455
10520
|
(_a2 = dialogRef.current) == null ? void 0 : _a2.close();
|
|
10456
10521
|
};
|
|
10457
10522
|
}, []);
|
|
10458
|
-
return /* @__PURE__ */
|
|
10523
|
+
return /* @__PURE__ */ jsx100(
|
|
10459
10524
|
"dialog",
|
|
10460
10525
|
{
|
|
10461
10526
|
ref: (element) => {
|
|
@@ -10493,7 +10558,7 @@ var Modal = React17.forwardRef(
|
|
|
10493
10558
|
e.preventDefault();
|
|
10494
10559
|
},
|
|
10495
10560
|
...modalProps,
|
|
10496
|
-
children: /* @__PURE__ */
|
|
10561
|
+
children: /* @__PURE__ */ jsx100(PortalContext.Provider, { value: dialogRef.current, children: /* @__PURE__ */ jsxs67(
|
|
10497
10562
|
"div",
|
|
10498
10563
|
{
|
|
10499
10564
|
css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
|
|
@@ -10502,9 +10567,9 @@ var Modal = React17.forwardRef(
|
|
|
10502
10567
|
mouseDownInsideModal.current = true;
|
|
10503
10568
|
},
|
|
10504
10569
|
children: [
|
|
10505
|
-
header2 || onRequestClose ? /* @__PURE__ */
|
|
10506
|
-
header2 ? /* @__PURE__ */
|
|
10507
|
-
onRequestClose ? /* @__PURE__ */
|
|
10570
|
+
header2 || onRequestClose ? /* @__PURE__ */ jsxs67("div", { css: modalHeaderStyles, children: [
|
|
10571
|
+
header2 ? /* @__PURE__ */ jsx100("div", { css: modalHeaderHeaderStyles, children: header2 }) : null,
|
|
10572
|
+
onRequestClose ? /* @__PURE__ */ jsx100(
|
|
10508
10573
|
Button,
|
|
10509
10574
|
{
|
|
10510
10575
|
type: "button",
|
|
@@ -10513,11 +10578,11 @@ var Modal = React17.forwardRef(
|
|
|
10513
10578
|
title: "Close dialog",
|
|
10514
10579
|
buttonType: "ghost",
|
|
10515
10580
|
"data-testid": "close-dialog",
|
|
10516
|
-
children: /* @__PURE__ */
|
|
10581
|
+
children: /* @__PURE__ */ jsx100(Icon, { icon: CgClose4, iconColor: "currentColor", size: 24 })
|
|
10517
10582
|
}
|
|
10518
10583
|
) : null
|
|
10519
10584
|
] }) : null,
|
|
10520
|
-
/* @__PURE__ */
|
|
10585
|
+
/* @__PURE__ */ jsx100(
|
|
10521
10586
|
"div",
|
|
10522
10587
|
{
|
|
10523
10588
|
css: [
|
|
@@ -10529,7 +10594,7 @@ var Modal = React17.forwardRef(
|
|
|
10529
10594
|
children
|
|
10530
10595
|
}
|
|
10531
10596
|
),
|
|
10532
|
-
buttonGroup ? /* @__PURE__ */
|
|
10597
|
+
buttonGroup ? /* @__PURE__ */ jsx100(HorizontalRhythm, { children: buttonGroup }) : null
|
|
10533
10598
|
]
|
|
10534
10599
|
}
|
|
10535
10600
|
) })
|
|
@@ -10541,10 +10606,10 @@ Modal.displayName = "Modal";
|
|
|
10541
10606
|
|
|
10542
10607
|
// src/components/Modal/ModalDialog.tsx
|
|
10543
10608
|
import { forwardRef as forwardRef18 } from "react";
|
|
10544
|
-
import { jsx as
|
|
10609
|
+
import { jsx as jsx101, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
|
|
10545
10610
|
var ModalDialog = forwardRef18(
|
|
10546
10611
|
({ header: header2, buttonGroup, modalSize = "lg", children, height = "auto", onRequestClose, ...props }, ref) => {
|
|
10547
|
-
return /* @__PURE__ */
|
|
10612
|
+
return /* @__PURE__ */ jsx101(
|
|
10548
10613
|
Modal,
|
|
10549
10614
|
{
|
|
10550
10615
|
...props,
|
|
@@ -10556,10 +10621,10 @@ var ModalDialog = forwardRef18(
|
|
|
10556
10621
|
withoutContentPadding: true,
|
|
10557
10622
|
css: modalDialogInnerStyles,
|
|
10558
10623
|
width: "",
|
|
10559
|
-
children: /* @__PURE__ */
|
|
10560
|
-
/* @__PURE__ */
|
|
10561
|
-
/* @__PURE__ */
|
|
10562
|
-
/* @__PURE__ */
|
|
10624
|
+
children: /* @__PURE__ */ jsxs68(VerticalRhythm, { css: modalDialogWrapper(Boolean(onRequestClose)), children: [
|
|
10625
|
+
/* @__PURE__ */ jsx101("div", { css: modalHeaderStyles, children: header2 }),
|
|
10626
|
+
/* @__PURE__ */ jsx101("div", { css: { flex: 1 }, children }),
|
|
10627
|
+
/* @__PURE__ */ jsx101(HorizontalRhythm, { children: buttonGroup })
|
|
10563
10628
|
] })
|
|
10564
10629
|
}
|
|
10565
10630
|
);
|
|
@@ -10579,10 +10644,10 @@ var ObjectGridContainer = (gridCount) => css78`
|
|
|
10579
10644
|
`;
|
|
10580
10645
|
|
|
10581
10646
|
// src/components/Objects/ObjectGridContainer.tsx
|
|
10582
|
-
import { jsx as
|
|
10647
|
+
import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
|
|
10583
10648
|
var ObjectGridContainer2 = forwardRef19(
|
|
10584
10649
|
({ gridCount = 3, children, ...props }, ref) => {
|
|
10585
|
-
return /* @__PURE__ */
|
|
10650
|
+
return /* @__PURE__ */ jsx102(
|
|
10586
10651
|
"div",
|
|
10587
10652
|
{
|
|
10588
10653
|
ref,
|
|
@@ -10667,7 +10732,7 @@ var ObjectGridItemSubtitle = css79`
|
|
|
10667
10732
|
`;
|
|
10668
10733
|
|
|
10669
10734
|
// src/components/Objects/ObjectGridItem.tsx
|
|
10670
|
-
import { jsx as
|
|
10735
|
+
import { jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
|
|
10671
10736
|
var ObjectGridItem2 = ({
|
|
10672
10737
|
header: header2,
|
|
10673
10738
|
cover,
|
|
@@ -10682,20 +10747,20 @@ var ObjectGridItem2 = ({
|
|
|
10682
10747
|
const onStopPropagation = (e) => {
|
|
10683
10748
|
e.stopPropagation();
|
|
10684
10749
|
};
|
|
10685
|
-
return /* @__PURE__ */
|
|
10750
|
+
return /* @__PURE__ */ jsxs69(
|
|
10686
10751
|
"div",
|
|
10687
10752
|
{
|
|
10688
10753
|
css: [ObjectGridItem, props.onClick ? ObjectGridWithOnClick : void 0],
|
|
10689
10754
|
"aria-selected": isSelected,
|
|
10690
10755
|
...props,
|
|
10691
10756
|
children: [
|
|
10692
|
-
/* @__PURE__ */
|
|
10693
|
-
/* @__PURE__ */
|
|
10694
|
-
/* @__PURE__ */
|
|
10695
|
-
/* @__PURE__ */
|
|
10696
|
-
/* @__PURE__ */
|
|
10757
|
+
/* @__PURE__ */ jsx103("div", { css: ObjectGridItemMediaWrapper, children: /* @__PURE__ */ jsx103("div", { css: ObjectGridItemMediaInner, children: cover }) }),
|
|
10758
|
+
/* @__PURE__ */ jsxs69("div", { css: ObjectGridItemContentWrapper, children: [
|
|
10759
|
+
/* @__PURE__ */ jsxs69(VerticalRhythm, { gap: "0", css: ObjectGridItemInnerWrapper, children: [
|
|
10760
|
+
/* @__PURE__ */ jsx103(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
|
|
10761
|
+
/* @__PURE__ */ jsx103("div", { css: ObjectGridItemSubtitle, children })
|
|
10697
10762
|
] }),
|
|
10698
|
-
/* @__PURE__ */
|
|
10763
|
+
/* @__PURE__ */ jsxs69(
|
|
10699
10764
|
HorizontalRhythm,
|
|
10700
10765
|
{
|
|
10701
10766
|
gap: "xs",
|
|
@@ -10704,10 +10769,10 @@ var ObjectGridItem2 = ({
|
|
|
10704
10769
|
onClick: hasOnClick ? onStopPropagation : void 0,
|
|
10705
10770
|
children: [
|
|
10706
10771
|
rightSlot,
|
|
10707
|
-
menuItems ? /* @__PURE__ */
|
|
10772
|
+
menuItems ? /* @__PURE__ */ jsx103(
|
|
10708
10773
|
Menu,
|
|
10709
10774
|
{
|
|
10710
|
-
menuTrigger: /* @__PURE__ */
|
|
10775
|
+
menuTrigger: /* @__PURE__ */ jsx103(MenuThreeDots, { "data-testid": menuTestId != null ? menuTestId : "object-grid-item-menu-btn" }),
|
|
10711
10776
|
placement: "bottom-end",
|
|
10712
10777
|
children: menuItems
|
|
10713
10778
|
}
|
|
@@ -10801,11 +10866,11 @@ var CoverSelectedChip = css80`
|
|
|
10801
10866
|
`;
|
|
10802
10867
|
|
|
10803
10868
|
// src/components/Objects/ObjectGridItemCardCover.tsx
|
|
10804
|
-
import { Fragment as
|
|
10869
|
+
import { Fragment as Fragment11, jsx as jsx104, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
|
|
10805
10870
|
var ObjectGridItemCardCover = (props) => {
|
|
10806
10871
|
if ("imageUrl" in props && props.imageUrl) {
|
|
10807
10872
|
const { imageUrl, srcSet, alt } = props;
|
|
10808
|
-
return /* @__PURE__ */
|
|
10873
|
+
return /* @__PURE__ */ jsx104("div", { css: CoverContainer, children: /* @__PURE__ */ jsx104(
|
|
10809
10874
|
"img",
|
|
10810
10875
|
{
|
|
10811
10876
|
src: imageUrl,
|
|
@@ -10820,9 +10885,9 @@ var ObjectGridItemCardCover = (props) => {
|
|
|
10820
10885
|
}
|
|
10821
10886
|
if ("icon" in props && props.icon) {
|
|
10822
10887
|
const { icon, iconColor } = props;
|
|
10823
|
-
return /* @__PURE__ */
|
|
10824
|
-
/* @__PURE__ */
|
|
10825
|
-
/* @__PURE__ */
|
|
10888
|
+
return /* @__PURE__ */ jsx104("div", { css: CoverContainer, children: /* @__PURE__ */ jsxs70("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
|
|
10889
|
+
/* @__PURE__ */ jsx104(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", css: CoverIconGhost }),
|
|
10890
|
+
/* @__PURE__ */ jsx104(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", size: 48 })
|
|
10826
10891
|
] }) });
|
|
10827
10892
|
}
|
|
10828
10893
|
};
|
|
@@ -10833,12 +10898,12 @@ var ObjectGridItemCover = ({
|
|
|
10833
10898
|
coverSlotBottomRight,
|
|
10834
10899
|
...props
|
|
10835
10900
|
}) => {
|
|
10836
|
-
return /* @__PURE__ */
|
|
10837
|
-
coverSlotLeft ? /* @__PURE__ */
|
|
10838
|
-
/* @__PURE__ */
|
|
10839
|
-
coverSlotRight ? /* @__PURE__ */
|
|
10840
|
-
coverSlotBottomLeft ? /* @__PURE__ */
|
|
10841
|
-
coverSlotBottomRight ? /* @__PURE__ */
|
|
10901
|
+
return /* @__PURE__ */ jsxs70(Fragment11, { children: [
|
|
10902
|
+
coverSlotLeft ? /* @__PURE__ */ jsx104("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
|
|
10903
|
+
/* @__PURE__ */ jsx104(ObjectGridItemCardCover, { ...props }),
|
|
10904
|
+
coverSlotRight ? /* @__PURE__ */ jsx104("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
|
|
10905
|
+
coverSlotBottomLeft ? /* @__PURE__ */ jsx104("div", { css: [CoverSlotBottom, CoverSlotBottomLeft], children: coverSlotBottomLeft }) : null,
|
|
10906
|
+
coverSlotBottomRight ? /* @__PURE__ */ jsx104("div", { css: [CoverSlotBottom, CoverSlotBottomRight], children: coverSlotBottomRight }) : null
|
|
10842
10907
|
] });
|
|
10843
10908
|
};
|
|
10844
10909
|
var ObjectGridItemCoverButton = ({
|
|
@@ -10848,7 +10913,7 @@ var ObjectGridItemCoverButton = ({
|
|
|
10848
10913
|
selectedText = "selected",
|
|
10849
10914
|
...props
|
|
10850
10915
|
}) => {
|
|
10851
|
-
return /* @__PURE__ */
|
|
10916
|
+
return /* @__PURE__ */ jsx104(
|
|
10852
10917
|
"button",
|
|
10853
10918
|
{
|
|
10854
10919
|
type: "button",
|
|
@@ -10858,11 +10923,11 @@ var ObjectGridItemCoverButton = ({
|
|
|
10858
10923
|
onSelection(id);
|
|
10859
10924
|
},
|
|
10860
10925
|
"aria-selected": isSelected,
|
|
10861
|
-
children: /* @__PURE__ */
|
|
10926
|
+
children: /* @__PURE__ */ jsx104(
|
|
10862
10927
|
ObjectGridItemCover,
|
|
10863
10928
|
{
|
|
10864
10929
|
...props,
|
|
10865
|
-
coverSlotBottomRight: isSelected ? /* @__PURE__ */
|
|
10930
|
+
coverSlotBottomRight: isSelected ? /* @__PURE__ */ jsx104("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx104(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
|
|
10866
10931
|
}
|
|
10867
10932
|
)
|
|
10868
10933
|
}
|
|
@@ -10870,7 +10935,7 @@ var ObjectGridItemCoverButton = ({
|
|
|
10870
10935
|
};
|
|
10871
10936
|
|
|
10872
10937
|
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
10873
|
-
import { useEffect as
|
|
10938
|
+
import { useEffect as useEffect14, useRef as useRef8, useState as useState12 } from "react";
|
|
10874
10939
|
|
|
10875
10940
|
// src/components/Objects/styles/ObjectGridItemHeading.styles.ts
|
|
10876
10941
|
import { css as css81 } from "@emotion/react";
|
|
@@ -10888,7 +10953,7 @@ var PopoverContent = css81`
|
|
|
10888
10953
|
`;
|
|
10889
10954
|
|
|
10890
10955
|
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
10891
|
-
import { jsx as
|
|
10956
|
+
import { jsx as jsx105, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
|
|
10892
10957
|
var ObjectGridItemHeading2 = ({
|
|
10893
10958
|
heading,
|
|
10894
10959
|
beforeHeadingSlot,
|
|
@@ -10901,7 +10966,7 @@ var ObjectGridItemHeading2 = ({
|
|
|
10901
10966
|
const onStopPropagation = (e) => {
|
|
10902
10967
|
e.stopPropagation();
|
|
10903
10968
|
};
|
|
10904
|
-
|
|
10969
|
+
useEffect14(() => {
|
|
10905
10970
|
const currentHeading = headingRef.current;
|
|
10906
10971
|
const observer = new ResizeObserver((entries) => {
|
|
10907
10972
|
for (const entry of entries) {
|
|
@@ -10918,15 +10983,15 @@ var ObjectGridItemHeading2 = ({
|
|
|
10918
10983
|
}
|
|
10919
10984
|
};
|
|
10920
10985
|
}, []);
|
|
10921
|
-
return /* @__PURE__ */
|
|
10922
|
-
beforeHeadingSlot ? /* @__PURE__ */
|
|
10923
|
-
/* @__PURE__ */
|
|
10924
|
-
afterHeadingSlot ? /* @__PURE__ */
|
|
10986
|
+
return /* @__PURE__ */ jsxs71(HorizontalRhythm, { align: "center", gap: "xs", css: { minWidth: 0 }, children: [
|
|
10987
|
+
beforeHeadingSlot ? /* @__PURE__ */ jsx105(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: beforeHeadingSlot }) : null,
|
|
10988
|
+
/* @__PURE__ */ jsx105(Tooltip, { title: hasTruncation && tooltip ? tooltip : "", children: /* @__PURE__ */ jsx105("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, ...props, children: heading }) }),
|
|
10989
|
+
afterHeadingSlot ? /* @__PURE__ */ jsx105(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: afterHeadingSlot }) : null
|
|
10925
10990
|
] });
|
|
10926
10991
|
};
|
|
10927
10992
|
|
|
10928
10993
|
// src/components/Objects/ObjectGridItemIconWithTooltip.tsx
|
|
10929
|
-
import { jsx as
|
|
10994
|
+
import { jsx as jsx106 } from "@emotion/react/jsx-runtime";
|
|
10930
10995
|
var ObjectGridItemIconWithTooltip = ({
|
|
10931
10996
|
tooltipTitle,
|
|
10932
10997
|
placement = "bottom-start",
|
|
@@ -10934,7 +10999,7 @@ var ObjectGridItemIconWithTooltip = ({
|
|
|
10934
10999
|
iconColor = "accent-dark",
|
|
10935
11000
|
...props
|
|
10936
11001
|
}) => {
|
|
10937
|
-
return /* @__PURE__ */
|
|
11002
|
+
return /* @__PURE__ */ jsx106(Tooltip, { title: tooltipTitle, placement, ...props, css: { minWidth: "max-content" }, children: /* @__PURE__ */ jsx106("span", { css: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx106(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
10938
11003
|
};
|
|
10939
11004
|
|
|
10940
11005
|
// src/components/Objects/styles/ObjectGridItemLoadingSkeleton.styles.ts
|
|
@@ -10981,11 +11046,11 @@ var ObjectGridItemLoadingContentContainer = css82`
|
|
|
10981
11046
|
`;
|
|
10982
11047
|
|
|
10983
11048
|
// src/components/Objects/ObjectGridItemLoadingSkeleton.tsx
|
|
10984
|
-
import { jsx as
|
|
11049
|
+
import { jsx as jsx107, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
|
|
10985
11050
|
var ObjectGridItemLoadingSkeleton2 = () => {
|
|
10986
|
-
return /* @__PURE__ */
|
|
10987
|
-
/* @__PURE__ */
|
|
10988
|
-
/* @__PURE__ */
|
|
11051
|
+
return /* @__PURE__ */ jsxs72("div", { css: ObjectGridItemLoadingSkeleton, children: [
|
|
11052
|
+
/* @__PURE__ */ jsx107("div", { css: ObjectGridItemLoadingImageWrapper, "data-testid": "object-grid-item-cover-skeleton", children: /* @__PURE__ */ jsx107("span", { css: ObjectGridItemLoadingImage, role: "presentation" }) }),
|
|
11053
|
+
/* @__PURE__ */ jsxs72(
|
|
10989
11054
|
HorizontalRhythm,
|
|
10990
11055
|
{
|
|
10991
11056
|
css: ObjectGridItemLoadingContentWrapper,
|
|
@@ -10993,13 +11058,13 @@ var ObjectGridItemLoadingSkeleton2 = () => {
|
|
|
10993
11058
|
justify: "space-between",
|
|
10994
11059
|
gap: "sm",
|
|
10995
11060
|
children: [
|
|
10996
|
-
/* @__PURE__ */
|
|
10997
|
-
/* @__PURE__ */
|
|
10998
|
-
/* @__PURE__ */
|
|
11061
|
+
/* @__PURE__ */ jsxs72(VerticalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "0", children: [
|
|
11062
|
+
/* @__PURE__ */ jsx107(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ jsx107("span", { role: "presentation", css: ObjectGridItemLoadingText("18ch") }) }),
|
|
11063
|
+
/* @__PURE__ */ jsx107("span", { role: "presentation", css: ObjectGridItemLoadingText("12ch") })
|
|
10999
11064
|
] }),
|
|
11000
|
-
/* @__PURE__ */
|
|
11001
|
-
/* @__PURE__ */
|
|
11002
|
-
/* @__PURE__ */
|
|
11065
|
+
/* @__PURE__ */ jsxs72(HorizontalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "xs", justify: "flex-end", children: [
|
|
11066
|
+
/* @__PURE__ */ jsx107("span", { role: "presentation", css: ObjectGridItemLoadingText("6ch") }),
|
|
11067
|
+
/* @__PURE__ */ jsx107("span", { role: "presentation", css: ObjectGridItemLoadingText("24px") })
|
|
11003
11068
|
] })
|
|
11004
11069
|
]
|
|
11005
11070
|
}
|
|
@@ -11088,12 +11153,12 @@ var ObjectListItemHeadingWrapper = css83`
|
|
|
11088
11153
|
`;
|
|
11089
11154
|
|
|
11090
11155
|
// src/components/Objects/ObjectItemLoadingSkeleton.tsx
|
|
11091
|
-
import { jsx as
|
|
11156
|
+
import { jsx as jsx108, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
|
|
11092
11157
|
var ObjectItemLoadingSkeleton = ({
|
|
11093
11158
|
showCover,
|
|
11094
11159
|
renderAs = "single"
|
|
11095
11160
|
}) => {
|
|
11096
|
-
return /* @__PURE__ */
|
|
11161
|
+
return /* @__PURE__ */ jsxs73(
|
|
11097
11162
|
"div",
|
|
11098
11163
|
{
|
|
11099
11164
|
css: [
|
|
@@ -11103,10 +11168,10 @@ var ObjectItemLoadingSkeleton = ({
|
|
|
11103
11168
|
}
|
|
11104
11169
|
],
|
|
11105
11170
|
children: [
|
|
11106
|
-
showCover ? /* @__PURE__ */
|
|
11107
|
-
/* @__PURE__ */
|
|
11108
|
-
/* @__PURE__ */
|
|
11109
|
-
renderAs === "single" ? null : /* @__PURE__ */
|
|
11171
|
+
showCover ? /* @__PURE__ */ jsx108("div", { "data-testid": "object-list-item-cover-skeleton", children: /* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectListItemLoadingImage }) }) : null,
|
|
11172
|
+
/* @__PURE__ */ jsx108(VerticalRhythm, { css: ObjectListItemLoadingInner, justify: "space-between", gap: "sm", children: /* @__PURE__ */ jsxs73(VerticalRhythm, { gap: "xs", children: [
|
|
11173
|
+
/* @__PURE__ */ jsx108(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectListItemLoadingText("30ch") }) }),
|
|
11174
|
+
renderAs === "single" ? null : /* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectListItemLoadingText("20ch") })
|
|
11110
11175
|
] }) })
|
|
11111
11176
|
]
|
|
11112
11177
|
}
|
|
@@ -11114,7 +11179,7 @@ var ObjectItemLoadingSkeleton = ({
|
|
|
11114
11179
|
};
|
|
11115
11180
|
|
|
11116
11181
|
// src/components/Objects/ObjectListItem.tsx
|
|
11117
|
-
import { jsx as
|
|
11182
|
+
import { jsx as jsx109, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
|
|
11118
11183
|
var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
11119
11184
|
const {
|
|
11120
11185
|
renderAs,
|
|
@@ -11127,7 +11192,7 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
11127
11192
|
portalElement,
|
|
11128
11193
|
...divProps
|
|
11129
11194
|
} = props;
|
|
11130
|
-
return /* @__PURE__ */
|
|
11195
|
+
return /* @__PURE__ */ jsxs74(
|
|
11131
11196
|
"div",
|
|
11132
11197
|
{
|
|
11133
11198
|
role: "listitem",
|
|
@@ -11136,8 +11201,8 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
11136
11201
|
"aria-selected": isSelected,
|
|
11137
11202
|
...divProps,
|
|
11138
11203
|
children: [
|
|
11139
|
-
/* @__PURE__ */
|
|
11140
|
-
/* @__PURE__ */
|
|
11204
|
+
/* @__PURE__ */ jsx109(HorizontalRhythm, { gap: "sm", align: "center", children: dragHandle }),
|
|
11205
|
+
/* @__PURE__ */ jsxs74(
|
|
11141
11206
|
"div",
|
|
11142
11207
|
{
|
|
11143
11208
|
css: [
|
|
@@ -11147,15 +11212,15 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
11147
11212
|
}`
|
|
11148
11213
|
],
|
|
11149
11214
|
children: [
|
|
11150
|
-
cover ? /* @__PURE__ */
|
|
11151
|
-
/* @__PURE__ */
|
|
11215
|
+
cover ? /* @__PURE__ */ jsx109(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
|
|
11216
|
+
/* @__PURE__ */ jsxs74(
|
|
11152
11217
|
VerticalRhythm,
|
|
11153
11218
|
{
|
|
11154
11219
|
gap: "0",
|
|
11155
11220
|
justify: renderAs === "multi" ? "flex-start" : "center",
|
|
11156
11221
|
"data-testid": "title-container",
|
|
11157
11222
|
children: [
|
|
11158
|
-
/* @__PURE__ */
|
|
11223
|
+
/* @__PURE__ */ jsx109(
|
|
11159
11224
|
HorizontalRhythm,
|
|
11160
11225
|
{
|
|
11161
11226
|
gap: "xs",
|
|
@@ -11168,14 +11233,14 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
11168
11233
|
]
|
|
11169
11234
|
}
|
|
11170
11235
|
),
|
|
11171
|
-
/* @__PURE__ */
|
|
11236
|
+
/* @__PURE__ */ jsx109(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: rightSlot })
|
|
11172
11237
|
]
|
|
11173
11238
|
}
|
|
11174
11239
|
),
|
|
11175
|
-
menuItems ? /* @__PURE__ */
|
|
11240
|
+
menuItems ? /* @__PURE__ */ jsx109(HorizontalRhythm, { gap: "0", align: "flex-start", children: /* @__PURE__ */ jsx109(
|
|
11176
11241
|
Menu,
|
|
11177
11242
|
{
|
|
11178
|
-
menuTrigger: /* @__PURE__ */
|
|
11243
|
+
menuTrigger: /* @__PURE__ */ jsx109(MenuThreeDots, { "data-testid": "object-list-item-menu-btn" }),
|
|
11179
11244
|
placement: "bottom-end",
|
|
11180
11245
|
portalElement,
|
|
11181
11246
|
children: menuItems
|
|
@@ -11187,22 +11252,22 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
11187
11252
|
};
|
|
11188
11253
|
|
|
11189
11254
|
// src/components/Objects/ObjectListItemContainer.tsx
|
|
11190
|
-
import { jsx as
|
|
11255
|
+
import { jsx as jsx110 } from "@emotion/react/jsx-runtime";
|
|
11191
11256
|
var ObjectListItemContainer2 = ({ children, gap = "0", ...props }) => {
|
|
11192
|
-
return /* @__PURE__ */
|
|
11257
|
+
return /* @__PURE__ */ jsx110(VerticalRhythm, { gap, css: ObjectListItemContainer, role: "list", ...props, children });
|
|
11193
11258
|
};
|
|
11194
11259
|
|
|
11195
11260
|
// src/components/Objects/ObjectListItemCover.tsx
|
|
11196
|
-
import { jsx as
|
|
11261
|
+
import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
|
|
11197
11262
|
var ObjectListItemCover2 = ({
|
|
11198
11263
|
imageUrl,
|
|
11199
11264
|
noImageText = "Image not available",
|
|
11200
11265
|
...props
|
|
11201
11266
|
}) => {
|
|
11202
11267
|
if (!imageUrl) {
|
|
11203
|
-
return /* @__PURE__ */
|
|
11268
|
+
return /* @__PURE__ */ jsx111("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
|
|
11204
11269
|
}
|
|
11205
|
-
return /* @__PURE__ */
|
|
11270
|
+
return /* @__PURE__ */ jsx111("div", { css: ObjectListItemCover, children: /* @__PURE__ */ jsx111(
|
|
11206
11271
|
"img",
|
|
11207
11272
|
{
|
|
11208
11273
|
src: imageUrl,
|
|
@@ -11231,17 +11296,17 @@ var ObjectListItemHeadingAfterWrapper = css84`
|
|
|
11231
11296
|
`;
|
|
11232
11297
|
|
|
11233
11298
|
// src/components/Objects/ObjectListItemHeading.tsx
|
|
11234
|
-
import { jsx as
|
|
11299
|
+
import { jsx as jsx112, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
|
|
11235
11300
|
var ObjectListItemHeading2 = ({
|
|
11236
11301
|
heading,
|
|
11237
11302
|
beforeHeadingSlot,
|
|
11238
11303
|
afterHeadingSlot,
|
|
11239
11304
|
...props
|
|
11240
11305
|
}) => {
|
|
11241
|
-
return /* @__PURE__ */
|
|
11242
|
-
beforeHeadingSlot ? /* @__PURE__ */
|
|
11243
|
-
/* @__PURE__ */
|
|
11244
|
-
/* @__PURE__ */
|
|
11306
|
+
return /* @__PURE__ */ jsxs75("div", { css: ObjectListItemHeading, ...props, children: [
|
|
11307
|
+
beforeHeadingSlot ? /* @__PURE__ */ jsx112(HorizontalRhythm, { gap: "xs", align: "center", children: beforeHeadingSlot }) : null,
|
|
11308
|
+
/* @__PURE__ */ jsxs75(HorizontalRhythm, { css: ObjectListItemHeadingAfterWrapper, gap: "xs", align: "flex-start", children: [
|
|
11309
|
+
/* @__PURE__ */ jsx112("div", { role: "heading", "data-testid": "reference-item-name", children: heading }),
|
|
11245
11310
|
afterHeadingSlot
|
|
11246
11311
|
] })
|
|
11247
11312
|
] });
|
|
@@ -11279,7 +11344,7 @@ var page = css85`
|
|
|
11279
11344
|
`;
|
|
11280
11345
|
|
|
11281
11346
|
// src/components/Pagination/Pagination.tsx
|
|
11282
|
-
import { jsx as
|
|
11347
|
+
import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
|
|
11283
11348
|
function Pagination({
|
|
11284
11349
|
limit,
|
|
11285
11350
|
offset,
|
|
@@ -11294,12 +11359,12 @@ function Pagination({
|
|
|
11294
11359
|
if (pageCount <= 1) {
|
|
11295
11360
|
return null;
|
|
11296
11361
|
}
|
|
11297
|
-
return /* @__PURE__ */
|
|
11362
|
+
return /* @__PURE__ */ jsx113(
|
|
11298
11363
|
Paginate,
|
|
11299
11364
|
{
|
|
11300
11365
|
forcePage: currentPage,
|
|
11301
|
-
previousLabel: /* @__PURE__ */
|
|
11302
|
-
nextLabel: /* @__PURE__ */
|
|
11366
|
+
previousLabel: /* @__PURE__ */ jsx113("div", { className: prevNextControls, children: "<" }),
|
|
11367
|
+
nextLabel: /* @__PURE__ */ jsx113("div", { className: prevNextControls, children: ">" }),
|
|
11303
11368
|
breakLabel: "...",
|
|
11304
11369
|
pageCount,
|
|
11305
11370
|
marginPagesDisplayed: 2,
|
|
@@ -11368,7 +11433,7 @@ var inputIconBtn = css86`
|
|
|
11368
11433
|
`;
|
|
11369
11434
|
|
|
11370
11435
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
11371
|
-
import { jsx as
|
|
11436
|
+
import { jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
|
|
11372
11437
|
var LabelLeadingIcon = ({
|
|
11373
11438
|
icon,
|
|
11374
11439
|
iconColor,
|
|
@@ -11379,7 +11444,7 @@ var LabelLeadingIcon = ({
|
|
|
11379
11444
|
...props
|
|
11380
11445
|
}) => {
|
|
11381
11446
|
const titleFr = title != null ? title : isLocked ? "Read-only pattern parameter" : "Click to connect to external content";
|
|
11382
|
-
return /* @__PURE__ */
|
|
11447
|
+
return /* @__PURE__ */ jsx114(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs76(
|
|
11383
11448
|
"button",
|
|
11384
11449
|
{
|
|
11385
11450
|
css: inputIconBtn,
|
|
@@ -11389,7 +11454,7 @@ var LabelLeadingIcon = ({
|
|
|
11389
11454
|
...props,
|
|
11390
11455
|
"data-testid": "lock-button",
|
|
11391
11456
|
children: [
|
|
11392
|
-
/* @__PURE__ */
|
|
11457
|
+
/* @__PURE__ */ jsx114(
|
|
11393
11458
|
Icon,
|
|
11394
11459
|
{
|
|
11395
11460
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -11425,12 +11490,12 @@ var ParameterDrawerHeaderTitle = css87`
|
|
|
11425
11490
|
`;
|
|
11426
11491
|
|
|
11427
11492
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
11428
|
-
import { jsx as
|
|
11493
|
+
import { jsx as jsx115, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
|
|
11429
11494
|
var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
11430
|
-
return /* @__PURE__ */
|
|
11431
|
-
/* @__PURE__ */
|
|
11495
|
+
return /* @__PURE__ */ jsxs77("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
11496
|
+
/* @__PURE__ */ jsxs77("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
11432
11497
|
iconBeforeTitle,
|
|
11433
|
-
/* @__PURE__ */
|
|
11498
|
+
/* @__PURE__ */ jsx115(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
|
|
11434
11499
|
] }),
|
|
11435
11500
|
children
|
|
11436
11501
|
] });
|
|
@@ -11460,11 +11525,11 @@ var fieldsetLegend2 = css88`
|
|
|
11460
11525
|
`;
|
|
11461
11526
|
|
|
11462
11527
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
11463
|
-
import { jsx as
|
|
11528
|
+
import { jsx as jsx116, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
|
|
11464
11529
|
var ParameterGroup = forwardRef20(
|
|
11465
11530
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
11466
|
-
return /* @__PURE__ */
|
|
11467
|
-
/* @__PURE__ */
|
|
11531
|
+
return /* @__PURE__ */ jsxs78("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
11532
|
+
/* @__PURE__ */ jsx116("legend", { css: fieldsetLegend2, children: legend }),
|
|
11468
11533
|
children
|
|
11469
11534
|
] });
|
|
11470
11535
|
}
|
|
@@ -11515,32 +11580,32 @@ var previewModalImage = css89`
|
|
|
11515
11580
|
`;
|
|
11516
11581
|
|
|
11517
11582
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
11518
|
-
import { Fragment as
|
|
11583
|
+
import { Fragment as Fragment12, jsx as jsx117, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
|
|
11519
11584
|
function ParameterImagePreview({ imageSrc }) {
|
|
11520
11585
|
const [showModal, setShowModal] = useState13(false);
|
|
11521
|
-
return imageSrc ? /* @__PURE__ */
|
|
11522
|
-
/* @__PURE__ */
|
|
11523
|
-
/* @__PURE__ */
|
|
11586
|
+
return imageSrc ? /* @__PURE__ */ jsxs79("div", { css: previewWrapper, children: [
|
|
11587
|
+
/* @__PURE__ */ jsx117(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
11588
|
+
/* @__PURE__ */ jsx117(
|
|
11524
11589
|
"button",
|
|
11525
11590
|
{
|
|
11526
11591
|
css: previewLink,
|
|
11527
11592
|
onClick: () => {
|
|
11528
11593
|
setShowModal(true);
|
|
11529
11594
|
},
|
|
11530
|
-
children: /* @__PURE__ */
|
|
11595
|
+
children: /* @__PURE__ */ jsx117(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
11531
11596
|
}
|
|
11532
11597
|
)
|
|
11533
11598
|
] }) : null;
|
|
11534
11599
|
}
|
|
11535
11600
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
11536
|
-
return open ? /* @__PURE__ */
|
|
11537
|
-
/* @__PURE__ */
|
|
11601
|
+
return open ? /* @__PURE__ */ jsx117(Fragment12, { children: createPortal2(
|
|
11602
|
+
/* @__PURE__ */ jsx117(
|
|
11538
11603
|
Modal,
|
|
11539
11604
|
{
|
|
11540
11605
|
header: "Image Preview",
|
|
11541
11606
|
onRequestClose,
|
|
11542
|
-
buttonGroup: /* @__PURE__ */
|
|
11543
|
-
children: /* @__PURE__ */
|
|
11607
|
+
buttonGroup: /* @__PURE__ */ jsx117(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
11608
|
+
children: /* @__PURE__ */ jsx117("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx117(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
11544
11609
|
}
|
|
11545
11610
|
),
|
|
11546
11611
|
document.body
|
|
@@ -11841,20 +11906,20 @@ var linkParameterIcon = css90`
|
|
|
11841
11906
|
`;
|
|
11842
11907
|
|
|
11843
11908
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
11844
|
-
import { jsx as
|
|
11909
|
+
import { jsx as jsx118 } from "@emotion/react/jsx-runtime";
|
|
11845
11910
|
var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
|
|
11846
|
-
return !asSpan ? /* @__PURE__ */
|
|
11911
|
+
return !asSpan ? /* @__PURE__ */ jsx118("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ jsx118("span", { "aria-labelledby": id, css: labelText2, children });
|
|
11847
11912
|
};
|
|
11848
11913
|
|
|
11849
11914
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
11850
11915
|
import { forwardRef as forwardRef21 } from "react";
|
|
11851
|
-
import { jsx as
|
|
11916
|
+
import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
|
|
11852
11917
|
var ParameterMenuButton = forwardRef21(
|
|
11853
11918
|
({ label, children }, ref) => {
|
|
11854
|
-
return /* @__PURE__ */
|
|
11919
|
+
return /* @__PURE__ */ jsx119(
|
|
11855
11920
|
Menu,
|
|
11856
11921
|
{
|
|
11857
|
-
menuTrigger: /* @__PURE__ */
|
|
11922
|
+
menuTrigger: /* @__PURE__ */ jsx119(
|
|
11858
11923
|
"button",
|
|
11859
11924
|
{
|
|
11860
11925
|
className: "parameter-menu",
|
|
@@ -11862,7 +11927,7 @@ var ParameterMenuButton = forwardRef21(
|
|
|
11862
11927
|
type: "button",
|
|
11863
11928
|
"aria-label": `${label} options`,
|
|
11864
11929
|
ref,
|
|
11865
|
-
children: /* @__PURE__ */
|
|
11930
|
+
children: /* @__PURE__ */ jsx119(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
11866
11931
|
}
|
|
11867
11932
|
),
|
|
11868
11933
|
children
|
|
@@ -11898,7 +11963,7 @@ var overrideMarker = css91`
|
|
|
11898
11963
|
`;
|
|
11899
11964
|
|
|
11900
11965
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
11901
|
-
import { jsx as
|
|
11966
|
+
import { jsx as jsx120, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
|
|
11902
11967
|
var extractParameterProps = (props) => {
|
|
11903
11968
|
const {
|
|
11904
11969
|
id,
|
|
@@ -11961,19 +12026,19 @@ var ParameterShell = ({
|
|
|
11961
12026
|
const [manualErrorMessage, setManualErrorMessage] = useState14(void 0);
|
|
11962
12027
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
11963
12028
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
11964
|
-
return /* @__PURE__ */
|
|
11965
|
-
hiddenLabel || title ? null : /* @__PURE__ */
|
|
12029
|
+
return /* @__PURE__ */ jsxs80("div", { css: inputContainer2, ...props, id, children: [
|
|
12030
|
+
hiddenLabel || title ? null : /* @__PURE__ */ jsxs80(ParameterLabel, { id, css: labelText2, children: [
|
|
11966
12031
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
11967
12032
|
label,
|
|
11968
12033
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
11969
12034
|
] }),
|
|
11970
|
-
!title ? null : /* @__PURE__ */
|
|
12035
|
+
!title ? null : /* @__PURE__ */ jsxs80(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
|
|
11971
12036
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
11972
12037
|
title,
|
|
11973
12038
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
11974
12039
|
] }),
|
|
11975
|
-
/* @__PURE__ */
|
|
11976
|
-
actionItems ? /* @__PURE__ */
|
|
12040
|
+
/* @__PURE__ */ jsxs80("div", { css: inputWrapper, children: [
|
|
12041
|
+
actionItems ? /* @__PURE__ */ jsx120(
|
|
11977
12042
|
"div",
|
|
11978
12043
|
{
|
|
11979
12044
|
css: [
|
|
@@ -11986,8 +12051,8 @@ var ParameterShell = ({
|
|
|
11986
12051
|
children: actionItems
|
|
11987
12052
|
}
|
|
11988
12053
|
) : null,
|
|
11989
|
-
menuItems ? /* @__PURE__ */
|
|
11990
|
-
/* @__PURE__ */
|
|
12054
|
+
menuItems ? /* @__PURE__ */ jsx120(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
12055
|
+
/* @__PURE__ */ jsx120(
|
|
11991
12056
|
ParameterShellContext.Provider,
|
|
11992
12057
|
{
|
|
11993
12058
|
value: {
|
|
@@ -11997,14 +12062,14 @@ var ParameterShell = ({
|
|
|
11997
12062
|
errorMessage: errorMessaging,
|
|
11998
12063
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
11999
12064
|
},
|
|
12000
|
-
children: isParameterGroup ? /* @__PURE__ */
|
|
12065
|
+
children: isParameterGroup ? /* @__PURE__ */ jsx120("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs80(ParameterShellPlaceholder, { children: [
|
|
12001
12066
|
children,
|
|
12002
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */
|
|
12067
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx120(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
12003
12068
|
] })
|
|
12004
12069
|
}
|
|
12005
12070
|
)
|
|
12006
12071
|
] }),
|
|
12007
|
-
/* @__PURE__ */
|
|
12072
|
+
/* @__PURE__ */ jsx120(
|
|
12008
12073
|
FieldMessage,
|
|
12009
12074
|
{
|
|
12010
12075
|
helperMessageTestId: captionTestId,
|
|
@@ -12018,17 +12083,17 @@ var ParameterShell = ({
|
|
|
12018
12083
|
] });
|
|
12019
12084
|
};
|
|
12020
12085
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
12021
|
-
return /* @__PURE__ */
|
|
12086
|
+
return /* @__PURE__ */ jsx120("div", { css: emptyParameterShell, children });
|
|
12022
12087
|
};
|
|
12023
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */
|
|
12088
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx120(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx120("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx120("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
12024
12089
|
|
|
12025
12090
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
12026
|
-
import { Fragment as
|
|
12091
|
+
import { Fragment as Fragment13, jsx as jsx121, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
|
|
12027
12092
|
var ParameterImage = forwardRef22(
|
|
12028
12093
|
({ children, ...props }, ref) => {
|
|
12029
12094
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12030
|
-
return /* @__PURE__ */
|
|
12031
|
-
/* @__PURE__ */
|
|
12095
|
+
return /* @__PURE__ */ jsxs81(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
12096
|
+
/* @__PURE__ */ jsx121(ParameterImageInner, { ref, ...innerProps }),
|
|
12032
12097
|
children
|
|
12033
12098
|
] });
|
|
12034
12099
|
}
|
|
@@ -12037,8 +12102,8 @@ var ParameterImageInner = forwardRef22((props, ref) => {
|
|
|
12037
12102
|
const { value } = props;
|
|
12038
12103
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
12039
12104
|
const deferredValue = useDeferredValue(value);
|
|
12040
|
-
return /* @__PURE__ */
|
|
12041
|
-
/* @__PURE__ */
|
|
12105
|
+
return /* @__PURE__ */ jsxs81(Fragment13, { children: [
|
|
12106
|
+
/* @__PURE__ */ jsx121(
|
|
12042
12107
|
"input",
|
|
12043
12108
|
{
|
|
12044
12109
|
css: input3,
|
|
@@ -12050,21 +12115,21 @@ var ParameterImageInner = forwardRef22((props, ref) => {
|
|
|
12050
12115
|
...props
|
|
12051
12116
|
}
|
|
12052
12117
|
),
|
|
12053
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */
|
|
12118
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx121(ParameterImagePreview, { imageSrc: deferredValue })
|
|
12054
12119
|
] });
|
|
12055
12120
|
});
|
|
12056
12121
|
|
|
12057
12122
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
12058
12123
|
import { forwardRef as forwardRef23 } from "react";
|
|
12059
|
-
import { jsx as
|
|
12124
|
+
import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
|
|
12060
12125
|
var ParameterInput = forwardRef23((props, ref) => {
|
|
12061
12126
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12062
|
-
return /* @__PURE__ */
|
|
12127
|
+
return /* @__PURE__ */ jsx122(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx122(ParameterInputInner, { ref, ...innerProps }) });
|
|
12063
12128
|
});
|
|
12064
12129
|
var ParameterInputInner = forwardRef23(
|
|
12065
12130
|
({ ...props }, ref) => {
|
|
12066
12131
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
12067
|
-
return /* @__PURE__ */
|
|
12132
|
+
return /* @__PURE__ */ jsx122(
|
|
12068
12133
|
"input",
|
|
12069
12134
|
{
|
|
12070
12135
|
css: input3,
|
|
@@ -12081,18 +12146,18 @@ var ParameterInputInner = forwardRef23(
|
|
|
12081
12146
|
|
|
12082
12147
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
12083
12148
|
import { forwardRef as forwardRef24 } from "react";
|
|
12084
|
-
import { jsx as
|
|
12149
|
+
import { jsx as jsx123, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
|
|
12085
12150
|
var ParameterLink = forwardRef24(
|
|
12086
12151
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
12087
12152
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12088
|
-
return /* @__PURE__ */
|
|
12153
|
+
return /* @__PURE__ */ jsx123(
|
|
12089
12154
|
ParameterShell,
|
|
12090
12155
|
{
|
|
12091
12156
|
"data-testid": "link-parameter-editor",
|
|
12092
12157
|
...shellProps,
|
|
12093
12158
|
label: innerProps.value ? shellProps.label : "",
|
|
12094
12159
|
title: !innerProps.value && typeof shellProps.label === "string" ? shellProps.label : void 0,
|
|
12095
|
-
children: /* @__PURE__ */
|
|
12160
|
+
children: /* @__PURE__ */ jsx123(
|
|
12096
12161
|
ParameterLinkInner,
|
|
12097
12162
|
{
|
|
12098
12163
|
onConnectLink,
|
|
@@ -12109,9 +12174,9 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12109
12174
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
12110
12175
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
12111
12176
|
if (!props.value)
|
|
12112
|
-
return /* @__PURE__ */
|
|
12113
|
-
return /* @__PURE__ */
|
|
12114
|
-
/* @__PURE__ */
|
|
12177
|
+
return /* @__PURE__ */ jsx123("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
12178
|
+
return /* @__PURE__ */ jsxs82("div", { css: inputWrapper, children: [
|
|
12179
|
+
/* @__PURE__ */ jsx123(
|
|
12115
12180
|
"input",
|
|
12116
12181
|
{
|
|
12117
12182
|
type: "text",
|
|
@@ -12123,8 +12188,8 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12123
12188
|
...props
|
|
12124
12189
|
}
|
|
12125
12190
|
),
|
|
12126
|
-
/* @__PURE__ */
|
|
12127
|
-
/* @__PURE__ */
|
|
12191
|
+
/* @__PURE__ */ jsxs82("div", { css: linkParameterControls, children: [
|
|
12192
|
+
/* @__PURE__ */ jsx123(
|
|
12128
12193
|
"button",
|
|
12129
12194
|
{
|
|
12130
12195
|
type: "button",
|
|
@@ -12136,7 +12201,7 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12136
12201
|
children: "edit"
|
|
12137
12202
|
}
|
|
12138
12203
|
),
|
|
12139
|
-
externalLink ? /* @__PURE__ */
|
|
12204
|
+
externalLink ? /* @__PURE__ */ jsx123(
|
|
12140
12205
|
"a",
|
|
12141
12206
|
{
|
|
12142
12207
|
href: externalLink,
|
|
@@ -12144,7 +12209,7 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12144
12209
|
title: "Open link in new tab",
|
|
12145
12210
|
target: "_blank",
|
|
12146
12211
|
rel: "noopener noreferrer",
|
|
12147
|
-
children: /* @__PURE__ */
|
|
12212
|
+
children: /* @__PURE__ */ jsx123(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
12148
12213
|
}
|
|
12149
12214
|
) : null
|
|
12150
12215
|
] })
|
|
@@ -12153,15 +12218,15 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12153
12218
|
);
|
|
12154
12219
|
|
|
12155
12220
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
12156
|
-
import { jsx as
|
|
12221
|
+
import { jsx as jsx124 } from "@emotion/react/jsx-runtime";
|
|
12157
12222
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
12158
12223
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12159
|
-
return /* @__PURE__ */
|
|
12224
|
+
return /* @__PURE__ */ jsx124(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx124(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
12160
12225
|
};
|
|
12161
12226
|
var ParameterMultiSelectInner = (props) => {
|
|
12162
12227
|
var _a;
|
|
12163
12228
|
const { id, label } = useParameterShell();
|
|
12164
|
-
return /* @__PURE__ */
|
|
12229
|
+
return /* @__PURE__ */ jsx124(
|
|
12165
12230
|
InputComboBox,
|
|
12166
12231
|
{
|
|
12167
12232
|
menuPortalTarget: document.body,
|
|
@@ -12211,7 +12276,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
12211
12276
|
};
|
|
12212
12277
|
|
|
12213
12278
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
12214
|
-
import { Fragment as
|
|
12279
|
+
import { Fragment as Fragment14, jsx as jsx125, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
|
|
12215
12280
|
var ParameterNameAndPublicIdInput = ({
|
|
12216
12281
|
id,
|
|
12217
12282
|
onBlur,
|
|
@@ -12237,8 +12302,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12237
12302
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
12238
12303
|
};
|
|
12239
12304
|
autoFocus == null ? void 0 : autoFocus();
|
|
12240
|
-
return /* @__PURE__ */
|
|
12241
|
-
/* @__PURE__ */
|
|
12305
|
+
return /* @__PURE__ */ jsxs83(Fragment14, { children: [
|
|
12306
|
+
/* @__PURE__ */ jsx125(
|
|
12242
12307
|
ParameterInput,
|
|
12243
12308
|
{
|
|
12244
12309
|
id: nameIdField,
|
|
@@ -12257,7 +12322,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12257
12322
|
value: values[nameIdField]
|
|
12258
12323
|
}
|
|
12259
12324
|
),
|
|
12260
|
-
/* @__PURE__ */
|
|
12325
|
+
/* @__PURE__ */ jsx125(
|
|
12261
12326
|
ParameterInput,
|
|
12262
12327
|
{
|
|
12263
12328
|
id: publicIdFieldName,
|
|
@@ -12271,11 +12336,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12271
12336
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
12272
12337
|
placeholder: publicIdPlaceholderText,
|
|
12273
12338
|
errorMessage: publicIdError,
|
|
12274
|
-
menuItems: /* @__PURE__ */
|
|
12339
|
+
menuItems: /* @__PURE__ */ jsx125(
|
|
12275
12340
|
MenuItem,
|
|
12276
12341
|
{
|
|
12277
12342
|
disabled: !values[publicIdFieldName],
|
|
12278
|
-
icon: /* @__PURE__ */
|
|
12343
|
+
icon: /* @__PURE__ */ jsx125(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
12279
12344
|
onClick: handleCopyPidFieldValue,
|
|
12280
12345
|
children: "Copy"
|
|
12281
12346
|
}
|
|
@@ -12283,7 +12348,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12283
12348
|
value: values[publicIdFieldName]
|
|
12284
12349
|
}
|
|
12285
12350
|
),
|
|
12286
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */
|
|
12351
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx125(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
12287
12352
|
] });
|
|
12288
12353
|
};
|
|
12289
12354
|
|
|
@@ -12432,7 +12497,7 @@ var defaultParameterConfiguration = {
|
|
|
12432
12497
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
12433
12498
|
import { deepEqual as deepEqual2 } from "fast-equals";
|
|
12434
12499
|
import { ParagraphNode as ParagraphNode2 } from "lexical";
|
|
12435
|
-
import { useEffect as
|
|
12500
|
+
import { useEffect as useEffect23, useState as useState20 } from "react";
|
|
12436
12501
|
|
|
12437
12502
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
12438
12503
|
import { CodeNode } from "@lexical/code";
|
|
@@ -12453,10 +12518,10 @@ CustomCodeNode.importDOM = function() {
|
|
|
12453
12518
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
|
12454
12519
|
import { mergeRegister } from "@lexical/utils";
|
|
12455
12520
|
import { ParagraphNode } from "lexical";
|
|
12456
|
-
import { useEffect as
|
|
12521
|
+
import { useEffect as useEffect15 } from "react";
|
|
12457
12522
|
function DisableStylesPlugin() {
|
|
12458
12523
|
const [editor] = useLexicalComposerContext();
|
|
12459
|
-
|
|
12524
|
+
useEffect15(() => {
|
|
12460
12525
|
return mergeRegister(
|
|
12461
12526
|
// Disable text alignment on paragraph nodes
|
|
12462
12527
|
editor.registerNodeTransform(ParagraphNode, (node) => {
|
|
@@ -12715,10 +12780,10 @@ var tableHeaderElement = css93`
|
|
|
12715
12780
|
import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
|
|
12716
12781
|
import { $insertFirst } from "@lexical/utils";
|
|
12717
12782
|
import { $createParagraphNode, $getRoot, $insertNodes } from "lexical";
|
|
12718
|
-
import { useEffect as
|
|
12783
|
+
import { useEffect as useEffect16 } from "react";
|
|
12719
12784
|
var ImprovedAssetSelectionPlugin = () => {
|
|
12720
12785
|
const [editor] = useLexicalComposerContext2();
|
|
12721
|
-
|
|
12786
|
+
useEffect16(() => {
|
|
12722
12787
|
editor.getRootElement();
|
|
12723
12788
|
const onRootClick = (event) => {
|
|
12724
12789
|
if (event.target !== editor.getRootElement()) {
|
|
@@ -12789,7 +12854,7 @@ import {
|
|
|
12789
12854
|
FOCUS_COMMAND,
|
|
12790
12855
|
PASTE_COMMAND
|
|
12791
12856
|
} from "lexical";
|
|
12792
|
-
import { useCallback as useCallback8, useEffect as
|
|
12857
|
+
import { useCallback as useCallback8, useEffect as useEffect17, useRef as useRef9, useState as useState15 } from "react";
|
|
12793
12858
|
|
|
12794
12859
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
12795
12860
|
import { $isAtNodeEnd } from "@lexical/selection";
|
|
@@ -12826,7 +12891,7 @@ var getSelectedNode = (selection) => {
|
|
|
12826
12891
|
};
|
|
12827
12892
|
|
|
12828
12893
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
12829
|
-
import { Fragment as
|
|
12894
|
+
import { Fragment as Fragment15, jsx as jsx126, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
|
|
12830
12895
|
var isProjectMapLinkValue = (value) => {
|
|
12831
12896
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
12832
12897
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -13142,13 +13207,13 @@ function LinkNodePlugin({
|
|
|
13142
13207
|
const linkPopoverElRef = useRef9(null);
|
|
13143
13208
|
const [isEditorFocused, setIsEditorFocused] = useState15(false);
|
|
13144
13209
|
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState15(false);
|
|
13145
|
-
|
|
13210
|
+
useEffect17(() => {
|
|
13146
13211
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
13147
13212
|
setLinkPopoverState(void 0);
|
|
13148
13213
|
return;
|
|
13149
13214
|
}
|
|
13150
13215
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
13151
|
-
|
|
13216
|
+
useEffect17(() => {
|
|
13152
13217
|
if (!editor.hasNodes([LinkNode])) {
|
|
13153
13218
|
throw new Error("LinkNode not registered on editor");
|
|
13154
13219
|
}
|
|
@@ -13286,7 +13351,7 @@ function LinkNodePlugin({
|
|
|
13286
13351
|
}
|
|
13287
13352
|
});
|
|
13288
13353
|
}, [editor, positioningAnchorEl]);
|
|
13289
|
-
|
|
13354
|
+
useEffect17(() => {
|
|
13290
13355
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
13291
13356
|
requestAnimationFrame(() => {
|
|
13292
13357
|
editorState.read(() => {
|
|
@@ -13313,8 +13378,8 @@ function LinkNodePlugin({
|
|
|
13313
13378
|
});
|
|
13314
13379
|
});
|
|
13315
13380
|
};
|
|
13316
|
-
return /* @__PURE__ */
|
|
13317
|
-
/* @__PURE__ */
|
|
13381
|
+
return /* @__PURE__ */ jsxs84(Fragment15, { children: [
|
|
13382
|
+
/* @__PURE__ */ jsx126(
|
|
13318
13383
|
NodeEventPlugin,
|
|
13319
13384
|
{
|
|
13320
13385
|
nodeType: LinkNode,
|
|
@@ -13324,7 +13389,7 @@ function LinkNodePlugin({
|
|
|
13324
13389
|
}
|
|
13325
13390
|
}
|
|
13326
13391
|
),
|
|
13327
|
-
linkPopoverState ? /* @__PURE__ */
|
|
13392
|
+
linkPopoverState ? /* @__PURE__ */ jsx126(
|
|
13328
13393
|
"div",
|
|
13329
13394
|
{
|
|
13330
13395
|
css: linkPopover,
|
|
@@ -13333,8 +13398,8 @@ function LinkNodePlugin({
|
|
|
13333
13398
|
top: linkPopoverState.position.y
|
|
13334
13399
|
},
|
|
13335
13400
|
ref: linkPopoverElRef,
|
|
13336
|
-
children: /* @__PURE__ */
|
|
13337
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */
|
|
13401
|
+
children: /* @__PURE__ */ jsxs84("div", { css: linkPopoverContainer, children: [
|
|
13402
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx126(
|
|
13338
13403
|
"a",
|
|
13339
13404
|
{
|
|
13340
13405
|
href: parsePath(
|
|
@@ -13346,7 +13411,7 @@ function LinkNodePlugin({
|
|
|
13346
13411
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
13347
13412
|
}
|
|
13348
13413
|
),
|
|
13349
|
-
/* @__PURE__ */
|
|
13414
|
+
/* @__PURE__ */ jsx126(
|
|
13350
13415
|
Button,
|
|
13351
13416
|
{
|
|
13352
13417
|
size: "xs",
|
|
@@ -13354,7 +13419,7 @@ function LinkNodePlugin({
|
|
|
13354
13419
|
onEditLinkNode(linkPopoverState.node);
|
|
13355
13420
|
},
|
|
13356
13421
|
buttonType: "ghost",
|
|
13357
|
-
children: /* @__PURE__ */
|
|
13422
|
+
children: /* @__PURE__ */ jsx126(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
13358
13423
|
}
|
|
13359
13424
|
)
|
|
13360
13425
|
] })
|
|
@@ -13390,7 +13455,7 @@ import {
|
|
|
13390
13455
|
OUTDENT_CONTENT_COMMAND,
|
|
13391
13456
|
SELECTION_CHANGE_COMMAND
|
|
13392
13457
|
} from "lexical";
|
|
13393
|
-
import { useEffect as
|
|
13458
|
+
import { useEffect as useEffect18, useRef as useRef10 } from "react";
|
|
13394
13459
|
function isIndentPermitted(maxDepth) {
|
|
13395
13460
|
const selection = $getSelection2();
|
|
13396
13461
|
if (!$isRangeSelection2(selection)) {
|
|
@@ -13446,7 +13511,7 @@ function $indentOverTab(selection) {
|
|
|
13446
13511
|
function ListIndentPlugin({ maxDepth }) {
|
|
13447
13512
|
const [editor] = useLexicalComposerContext4();
|
|
13448
13513
|
const isInListItemNode = useRef10(false);
|
|
13449
|
-
|
|
13514
|
+
useEffect18(() => {
|
|
13450
13515
|
return editor.registerCommand(
|
|
13451
13516
|
SELECTION_CHANGE_COMMAND,
|
|
13452
13517
|
() => {
|
|
@@ -13463,7 +13528,7 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
13463
13528
|
COMMAND_PRIORITY_NORMAL
|
|
13464
13529
|
);
|
|
13465
13530
|
}, [editor]);
|
|
13466
|
-
|
|
13531
|
+
useEffect18(() => {
|
|
13467
13532
|
return mergeRegister3(
|
|
13468
13533
|
editor.registerCommand(
|
|
13469
13534
|
INDENT_CONTENT_COMMAND,
|
|
@@ -13512,8 +13577,8 @@ import {
|
|
|
13512
13577
|
TableCellNode
|
|
13513
13578
|
} from "@lexical/table";
|
|
13514
13579
|
import { $getRoot as $getRoot2, $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
|
|
13515
|
-
import { forwardRef as forwardRef25, useCallback as useCallback9, useEffect as
|
|
13516
|
-
import { jsx as
|
|
13580
|
+
import { forwardRef as forwardRef25, useCallback as useCallback9, useEffect as useEffect19, useLayoutEffect, useState as useState16 } from "react";
|
|
13581
|
+
import { jsx as jsx127, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
|
|
13517
13582
|
function computeSelectionCount(selection) {
|
|
13518
13583
|
const selectionShape = selection.getShape();
|
|
13519
13584
|
return {
|
|
@@ -13535,7 +13600,7 @@ var TableActionMenuTrigger = forwardRef25((props, ref) => {
|
|
|
13535
13600
|
const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
|
|
13536
13601
|
setCoordinates({ x: relativeX, y: relativeY });
|
|
13537
13602
|
}, [tableCellEl, positioningAnchorEl]);
|
|
13538
|
-
return /* @__PURE__ */
|
|
13603
|
+
return /* @__PURE__ */ jsx127(
|
|
13539
13604
|
IconButton,
|
|
13540
13605
|
{
|
|
13541
13606
|
ref,
|
|
@@ -13549,7 +13614,7 @@ var TableActionMenuTrigger = forwardRef25((props, ref) => {
|
|
|
13549
13614
|
size: "xs",
|
|
13550
13615
|
buttonType: "unimportant",
|
|
13551
13616
|
...rest,
|
|
13552
|
-
children: /* @__PURE__ */
|
|
13617
|
+
children: /* @__PURE__ */ jsx127(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
13553
13618
|
}
|
|
13554
13619
|
);
|
|
13555
13620
|
});
|
|
@@ -13570,7 +13635,7 @@ function TableActionMenu({
|
|
|
13570
13635
|
const incrementMenuTriggerKey = () => {
|
|
13571
13636
|
setMenuTriggerKey((key) => key += 1);
|
|
13572
13637
|
};
|
|
13573
|
-
|
|
13638
|
+
useEffect19(() => {
|
|
13574
13639
|
return editor.registerMutationListener(
|
|
13575
13640
|
TableCellNode,
|
|
13576
13641
|
(nodeMutations) => {
|
|
@@ -13584,7 +13649,7 @@ function TableActionMenu({
|
|
|
13584
13649
|
{ skipInitialization: true }
|
|
13585
13650
|
);
|
|
13586
13651
|
}, [editor, tableCellNode]);
|
|
13587
|
-
|
|
13652
|
+
useEffect19(() => {
|
|
13588
13653
|
editor.getEditorState().read(() => {
|
|
13589
13654
|
const selection = $getSelection3();
|
|
13590
13655
|
if ($isTableSelection(selection)) {
|
|
@@ -13703,10 +13768,10 @@ function TableActionMenu({
|
|
|
13703
13768
|
const menuItemCss = css95({
|
|
13704
13769
|
fontSize: "var(--fs-sm)"
|
|
13705
13770
|
});
|
|
13706
|
-
return /* @__PURE__ */
|
|
13771
|
+
return /* @__PURE__ */ jsxs85(
|
|
13707
13772
|
Menu,
|
|
13708
13773
|
{
|
|
13709
|
-
menuTrigger: /* @__PURE__ */
|
|
13774
|
+
menuTrigger: /* @__PURE__ */ jsx127(
|
|
13710
13775
|
TableActionMenuTrigger,
|
|
13711
13776
|
{
|
|
13712
13777
|
tableCellEl,
|
|
@@ -13717,7 +13782,7 @@ function TableActionMenu({
|
|
|
13717
13782
|
portalElement: menuPortalEl,
|
|
13718
13783
|
maxMenuHeight: "300px",
|
|
13719
13784
|
children: [
|
|
13720
|
-
/* @__PURE__ */
|
|
13785
|
+
/* @__PURE__ */ jsxs85(
|
|
13721
13786
|
MenuItem,
|
|
13722
13787
|
{
|
|
13723
13788
|
onClick: () => {
|
|
@@ -13731,33 +13796,33 @@ function TableActionMenu({
|
|
|
13731
13796
|
]
|
|
13732
13797
|
}
|
|
13733
13798
|
),
|
|
13734
|
-
/* @__PURE__ */
|
|
13799
|
+
/* @__PURE__ */ jsxs85(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
|
|
13735
13800
|
"Insert ",
|
|
13736
13801
|
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
13737
13802
|
" below"
|
|
13738
13803
|
] }),
|
|
13739
|
-
/* @__PURE__ */
|
|
13740
|
-
/* @__PURE__ */
|
|
13804
|
+
/* @__PURE__ */ jsx127(MenuItemSeparator, {}),
|
|
13805
|
+
/* @__PURE__ */ jsxs85(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
13741
13806
|
"Insert ",
|
|
13742
13807
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
13743
13808
|
" left"
|
|
13744
13809
|
] }),
|
|
13745
|
-
/* @__PURE__ */
|
|
13810
|
+
/* @__PURE__ */ jsxs85(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
|
|
13746
13811
|
"Insert ",
|
|
13747
13812
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
13748
13813
|
" right"
|
|
13749
13814
|
] }),
|
|
13750
|
-
/* @__PURE__ */
|
|
13751
|
-
/* @__PURE__ */
|
|
13752
|
-
/* @__PURE__ */
|
|
13753
|
-
/* @__PURE__ */
|
|
13754
|
-
/* @__PURE__ */
|
|
13755
|
-
/* @__PURE__ */
|
|
13815
|
+
/* @__PURE__ */ jsx127(MenuItemSeparator, {}),
|
|
13816
|
+
/* @__PURE__ */ jsx127(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
13817
|
+
/* @__PURE__ */ jsx127(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
13818
|
+
/* @__PURE__ */ jsx127(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
13819
|
+
/* @__PURE__ */ jsx127(MenuItemSeparator, {}),
|
|
13820
|
+
/* @__PURE__ */ jsxs85(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
13756
13821
|
(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
13757
13822
|
" ",
|
|
13758
13823
|
"row header"
|
|
13759
13824
|
] }),
|
|
13760
|
-
/* @__PURE__ */
|
|
13825
|
+
/* @__PURE__ */ jsxs85(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
|
|
13761
13826
|
(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
|
|
13762
13827
|
" ",
|
|
13763
13828
|
"column header"
|
|
@@ -13774,7 +13839,7 @@ function TableCellActionMenuContainer({
|
|
|
13774
13839
|
const [tableCellNode, setTableMenuCellNode] = useState16(null);
|
|
13775
13840
|
const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState16(null);
|
|
13776
13841
|
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState16(null);
|
|
13777
|
-
|
|
13842
|
+
useEffect19(() => {
|
|
13778
13843
|
const newPortalEl = document.createElement("div");
|
|
13779
13844
|
setTableMenuCellMenuPortalEl(newPortalEl);
|
|
13780
13845
|
menuPortalEl.appendChild(newPortalEl);
|
|
@@ -13818,14 +13883,14 @@ function TableCellActionMenuContainer({
|
|
|
13818
13883
|
setTableMenuCellNodeElem(null);
|
|
13819
13884
|
}
|
|
13820
13885
|
}, [editor, setTableMenuCellNodeElem]);
|
|
13821
|
-
|
|
13886
|
+
useEffect19(() => {
|
|
13822
13887
|
return editor.registerUpdateListener(() => {
|
|
13823
13888
|
editor.getEditorState().read(() => {
|
|
13824
13889
|
$moveMenu();
|
|
13825
13890
|
});
|
|
13826
13891
|
});
|
|
13827
13892
|
});
|
|
13828
|
-
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */
|
|
13893
|
+
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx127(
|
|
13829
13894
|
TableActionMenu,
|
|
13830
13895
|
{
|
|
13831
13896
|
tableCellNode,
|
|
@@ -13841,7 +13906,7 @@ function TableActionMenuPlugin({
|
|
|
13841
13906
|
menuPortalEl
|
|
13842
13907
|
}) {
|
|
13843
13908
|
const isEditable = useLexicalEditable();
|
|
13844
|
-
return isEditable ? /* @__PURE__ */
|
|
13909
|
+
return isEditable ? /* @__PURE__ */ jsx127(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
|
|
13845
13910
|
}
|
|
13846
13911
|
|
|
13847
13912
|
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
@@ -13857,9 +13922,9 @@ import {
|
|
|
13857
13922
|
} from "@lexical/table";
|
|
13858
13923
|
import { calculateZoomLevel } from "@lexical/utils";
|
|
13859
13924
|
import { $getNearestNodeFromDOMNode } from "lexical";
|
|
13860
|
-
import { useCallback as useCallback10, useEffect as
|
|
13925
|
+
import { useCallback as useCallback10, useEffect as useEffect20, useMemo as useMemo6, useRef as useRef11, useState as useState17 } from "react";
|
|
13861
13926
|
import { createPortal as createPortal3 } from "react-dom";
|
|
13862
|
-
import { Fragment as
|
|
13927
|
+
import { Fragment as Fragment16, jsx as jsx128, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
|
|
13863
13928
|
var MIN_ROW_HEIGHT = 33;
|
|
13864
13929
|
var MIN_COLUMN_WIDTH = 50;
|
|
13865
13930
|
var tableResizer = css96`
|
|
@@ -13902,7 +13967,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
13902
13967
|
const isMouseDownOnEvent = (event) => {
|
|
13903
13968
|
return (event.buttons & 1) === 1;
|
|
13904
13969
|
};
|
|
13905
|
-
|
|
13970
|
+
useEffect20(() => {
|
|
13906
13971
|
const onMouseMove = (event) => {
|
|
13907
13972
|
setTimeout(() => {
|
|
13908
13973
|
const target = event.target;
|
|
@@ -14160,8 +14225,8 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
14160
14225
|
};
|
|
14161
14226
|
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
14162
14227
|
const resizerStyles = getResizers();
|
|
14163
|
-
return /* @__PURE__ */
|
|
14164
|
-
/* @__PURE__ */
|
|
14228
|
+
return /* @__PURE__ */ jsx128("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs86(Fragment16, { children: [
|
|
14229
|
+
/* @__PURE__ */ jsx128(
|
|
14165
14230
|
"div",
|
|
14166
14231
|
{
|
|
14167
14232
|
css: tableResizer,
|
|
@@ -14169,7 +14234,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
14169
14234
|
onMouseDown: toggleResize("right")
|
|
14170
14235
|
}
|
|
14171
14236
|
),
|
|
14172
|
-
/* @__PURE__ */
|
|
14237
|
+
/* @__PURE__ */ jsx128(
|
|
14173
14238
|
"div",
|
|
14174
14239
|
{
|
|
14175
14240
|
css: tableResizer,
|
|
@@ -14184,7 +14249,7 @@ function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
|
14184
14249
|
const isEditable = useLexicalEditable2();
|
|
14185
14250
|
return useMemo6(
|
|
14186
14251
|
() => isEditable ? createPortal3(
|
|
14187
|
-
/* @__PURE__ */
|
|
14252
|
+
/* @__PURE__ */ jsx128(TableCellResizer, { editor, positioningAnchorEl }),
|
|
14188
14253
|
positioningAnchorEl
|
|
14189
14254
|
) : null,
|
|
14190
14255
|
[editor, isEditable, positioningAnchorEl]
|
|
@@ -14201,11 +14266,11 @@ import {
|
|
|
14201
14266
|
COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
|
|
14202
14267
|
SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
|
|
14203
14268
|
} from "lexical";
|
|
14204
|
-
import { useEffect as
|
|
14269
|
+
import { useEffect as useEffect21, useState as useState18 } from "react";
|
|
14205
14270
|
var TableSelectionPlugin = () => {
|
|
14206
14271
|
const [editor] = useLexicalComposerContext7();
|
|
14207
14272
|
const [closestTableCellNode, setClosestTableCellNode] = useState18(null);
|
|
14208
|
-
|
|
14273
|
+
useEffect21(() => {
|
|
14209
14274
|
return editor.registerCommand(
|
|
14210
14275
|
SELECTION_CHANGE_COMMAND2,
|
|
14211
14276
|
() => {
|
|
@@ -14227,7 +14292,7 @@ var TableSelectionPlugin = () => {
|
|
|
14227
14292
|
COMMAND_PRIORITY_NORMAL2
|
|
14228
14293
|
);
|
|
14229
14294
|
}, [editor]);
|
|
14230
|
-
|
|
14295
|
+
useEffect21(() => {
|
|
14231
14296
|
const onControlA = (event) => {
|
|
14232
14297
|
if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
|
|
14233
14298
|
if (!closestTableCellNode) {
|
|
@@ -14274,7 +14339,7 @@ import {
|
|
|
14274
14339
|
FORMAT_TEXT_COMMAND,
|
|
14275
14340
|
SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
|
|
14276
14341
|
} from "lexical";
|
|
14277
|
-
import { useCallback as useCallback11, useEffect as
|
|
14342
|
+
import { useCallback as useCallback11, useEffect as useEffect22 } from "react";
|
|
14278
14343
|
|
|
14279
14344
|
// src/components/ParameterInputs/rich-text/toolbar/constants.ts
|
|
14280
14345
|
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
@@ -14420,7 +14485,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
14420
14485
|
};
|
|
14421
14486
|
|
|
14422
14487
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
14423
|
-
import { Fragment as
|
|
14488
|
+
import { Fragment as Fragment17, jsx as jsx129, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
14424
14489
|
var toolbar = css97`
|
|
14425
14490
|
${scrollbarStyles}
|
|
14426
14491
|
background: var(--gray-50);
|
|
@@ -14480,7 +14545,7 @@ var toolbarChevron = css97`
|
|
|
14480
14545
|
margin-left: var(--spacing-xs);
|
|
14481
14546
|
`;
|
|
14482
14547
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
14483
|
-
return /* @__PURE__ */
|
|
14548
|
+
return /* @__PURE__ */ jsx129(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
14484
14549
|
};
|
|
14485
14550
|
var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
|
|
14486
14551
|
const [editor] = useLexicalComposerContext8();
|
|
@@ -14575,7 +14640,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14575
14640
|
setIsLink(false);
|
|
14576
14641
|
}
|
|
14577
14642
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
14578
|
-
|
|
14643
|
+
useEffect22(() => {
|
|
14579
14644
|
return editor.registerCommand(
|
|
14580
14645
|
SELECTION_CHANGE_COMMAND3,
|
|
14581
14646
|
(_payload) => {
|
|
@@ -14585,7 +14650,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14585
14650
|
COMMAND_PRIORITY_CRITICAL2
|
|
14586
14651
|
);
|
|
14587
14652
|
}, [editor, updateToolbar]);
|
|
14588
|
-
|
|
14653
|
+
useEffect22(() => {
|
|
14589
14654
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
14590
14655
|
requestAnimationFrame(() => {
|
|
14591
14656
|
editorState.read(() => {
|
|
@@ -14594,14 +14659,14 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14594
14659
|
});
|
|
14595
14660
|
});
|
|
14596
14661
|
}, [editor, updateToolbar]);
|
|
14597
|
-
return /* @__PURE__ */
|
|
14598
|
-
/* @__PURE__ */
|
|
14662
|
+
return /* @__PURE__ */ jsxs87("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
|
|
14663
|
+
/* @__PURE__ */ jsxs87(
|
|
14599
14664
|
Menu,
|
|
14600
14665
|
{
|
|
14601
|
-
menuTrigger: /* @__PURE__ */
|
|
14666
|
+
menuTrigger: /* @__PURE__ */ jsxs87("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
|
|
14602
14667
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
14603
14668
|
" ",
|
|
14604
|
-
/* @__PURE__ */
|
|
14669
|
+
/* @__PURE__ */ jsx129(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
14605
14670
|
] }),
|
|
14606
14671
|
placement: "bottom-start",
|
|
14607
14672
|
children: [
|
|
@@ -14611,7 +14676,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14611
14676
|
type: "paragraph"
|
|
14612
14677
|
},
|
|
14613
14678
|
...visibleTextualElements
|
|
14614
|
-
].map((element) => /* @__PURE__ */
|
|
14679
|
+
].map((element) => /* @__PURE__ */ jsx129(
|
|
14615
14680
|
MenuItem,
|
|
14616
14681
|
{
|
|
14617
14682
|
"data-testid": "menu-item",
|
|
@@ -14622,12 +14687,12 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14622
14687
|
},
|
|
14623
14688
|
element.type
|
|
14624
14689
|
)),
|
|
14625
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */
|
|
14690
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx129(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
14626
14691
|
]
|
|
14627
14692
|
}
|
|
14628
14693
|
),
|
|
14629
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
14630
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */
|
|
14694
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs87("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
|
|
14695
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx129(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx129(
|
|
14631
14696
|
"button",
|
|
14632
14697
|
{
|
|
14633
14698
|
"data-testid": `formatting-button-${format.type}`,
|
|
@@ -14639,15 +14704,15 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14639
14704
|
richTextToolbarButton,
|
|
14640
14705
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
14641
14706
|
],
|
|
14642
|
-
children: /* @__PURE__ */
|
|
14707
|
+
children: /* @__PURE__ */ jsx129(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
14643
14708
|
}
|
|
14644
14709
|
) }, format.type)),
|
|
14645
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
14710
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx129(
|
|
14646
14711
|
Menu,
|
|
14647
14712
|
{
|
|
14648
|
-
menuTrigger: /* @__PURE__ */
|
|
14713
|
+
menuTrigger: /* @__PURE__ */ jsx129("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ jsx129(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
14649
14714
|
placement: "bottom-start",
|
|
14650
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */
|
|
14715
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx129(
|
|
14651
14716
|
MenuItem,
|
|
14652
14717
|
{
|
|
14653
14718
|
onClick: () => {
|
|
@@ -14660,8 +14725,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14660
14725
|
}
|
|
14661
14726
|
) : null
|
|
14662
14727
|
] }) : null,
|
|
14663
|
-
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */
|
|
14664
|
-
linkElementVisible ? /* @__PURE__ */
|
|
14728
|
+
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs87("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
|
|
14729
|
+
linkElementVisible ? /* @__PURE__ */ jsx129(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx129(
|
|
14665
14730
|
"button",
|
|
14666
14731
|
{
|
|
14667
14732
|
"data-testid": "element-link",
|
|
@@ -14674,11 +14739,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14674
14739
|
}
|
|
14675
14740
|
},
|
|
14676
14741
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
14677
|
-
children: /* @__PURE__ */
|
|
14742
|
+
children: /* @__PURE__ */ jsx129(RichTextToolbarIcon, { icon: "link" })
|
|
14678
14743
|
}
|
|
14679
14744
|
) }) : null,
|
|
14680
|
-
visibleLists.size > 0 ? /* @__PURE__ */
|
|
14681
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */
|
|
14745
|
+
visibleLists.size > 0 ? /* @__PURE__ */ jsxs87(Fragment17, { children: [
|
|
14746
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx129(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx129(
|
|
14682
14747
|
"button",
|
|
14683
14748
|
{
|
|
14684
14749
|
"data-testid": "element-unordered-list",
|
|
@@ -14694,10 +14759,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14694
14759
|
richTextToolbarButton,
|
|
14695
14760
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
14696
14761
|
],
|
|
14697
|
-
children: /* @__PURE__ */
|
|
14762
|
+
children: /* @__PURE__ */ jsx129(RichTextToolbarIcon, { icon: "layout-list" })
|
|
14698
14763
|
}
|
|
14699
14764
|
) }) : null,
|
|
14700
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */
|
|
14765
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx129(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx129(
|
|
14701
14766
|
"button",
|
|
14702
14767
|
{
|
|
14703
14768
|
"data-testid": "element-ordered-list",
|
|
@@ -14713,58 +14778,58 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14713
14778
|
richTextToolbarButton,
|
|
14714
14779
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
14715
14780
|
],
|
|
14716
|
-
children: /* @__PURE__ */
|
|
14781
|
+
children: /* @__PURE__ */ jsx129(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
14717
14782
|
}
|
|
14718
14783
|
) }) : null
|
|
14719
14784
|
] }) : null,
|
|
14720
14785
|
customControls ? customControls : null
|
|
14721
14786
|
] }) : null,
|
|
14722
|
-
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */
|
|
14787
|
+
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx129("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ jsxs87(
|
|
14723
14788
|
Menu,
|
|
14724
14789
|
{
|
|
14725
|
-
menuTrigger: /* @__PURE__ */
|
|
14790
|
+
menuTrigger: /* @__PURE__ */ jsxs87("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
|
|
14726
14791
|
"Insert",
|
|
14727
|
-
/* @__PURE__ */
|
|
14792
|
+
/* @__PURE__ */ jsx129(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
14728
14793
|
] }),
|
|
14729
14794
|
placement: "bottom-start",
|
|
14730
14795
|
children: [
|
|
14731
|
-
quoteElementVisible ? /* @__PURE__ */
|
|
14796
|
+
quoteElementVisible ? /* @__PURE__ */ jsx129(
|
|
14732
14797
|
MenuItem,
|
|
14733
14798
|
{
|
|
14734
14799
|
onClick: () => {
|
|
14735
14800
|
onSelectElement("quote");
|
|
14736
14801
|
},
|
|
14737
|
-
icon: /* @__PURE__ */
|
|
14802
|
+
icon: /* @__PURE__ */ jsx129(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
14738
14803
|
children: "Quote"
|
|
14739
14804
|
}
|
|
14740
14805
|
) : null,
|
|
14741
|
-
codeElementVisible ? /* @__PURE__ */
|
|
14806
|
+
codeElementVisible ? /* @__PURE__ */ jsx129(
|
|
14742
14807
|
MenuItem,
|
|
14743
14808
|
{
|
|
14744
14809
|
onClick: () => {
|
|
14745
14810
|
onSelectElement("code");
|
|
14746
14811
|
},
|
|
14747
|
-
icon: /* @__PURE__ */
|
|
14812
|
+
icon: /* @__PURE__ */ jsx129(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
14748
14813
|
children: "Code"
|
|
14749
14814
|
}
|
|
14750
14815
|
) : null,
|
|
14751
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */
|
|
14816
|
+
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx129(
|
|
14752
14817
|
MenuItem,
|
|
14753
14818
|
{
|
|
14754
14819
|
onClick: () => {
|
|
14755
14820
|
onSelectElement("table");
|
|
14756
14821
|
},
|
|
14757
|
-
icon: /* @__PURE__ */
|
|
14822
|
+
icon: /* @__PURE__ */ jsx129(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
14758
14823
|
children: "Table"
|
|
14759
14824
|
}
|
|
14760
14825
|
) : null,
|
|
14761
|
-
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */
|
|
14826
|
+
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ jsx129(
|
|
14762
14827
|
MenuItem,
|
|
14763
14828
|
{
|
|
14764
14829
|
onClick: () => {
|
|
14765
14830
|
onSelectElement("asset");
|
|
14766
14831
|
},
|
|
14767
|
-
icon: /* @__PURE__ */
|
|
14832
|
+
icon: /* @__PURE__ */ jsx129(Icon, { icon: "image", iconColor: "currentColor" }),
|
|
14768
14833
|
children: "Asset"
|
|
14769
14834
|
}
|
|
14770
14835
|
) : null
|
|
@@ -14776,7 +14841,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14776
14841
|
var RichTextToolbar_default = RichTextToolbar;
|
|
14777
14842
|
|
|
14778
14843
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
14779
|
-
import { Fragment as
|
|
14844
|
+
import { Fragment as Fragment18, jsx as jsx130, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
|
|
14780
14845
|
var ParameterRichText = ({
|
|
14781
14846
|
label,
|
|
14782
14847
|
labelLeadingIcon,
|
|
@@ -14805,7 +14870,7 @@ var ParameterRichText = ({
|
|
|
14805
14870
|
onInsertAsset,
|
|
14806
14871
|
minimalInteractivity
|
|
14807
14872
|
}) => {
|
|
14808
|
-
return /* @__PURE__ */
|
|
14873
|
+
return /* @__PURE__ */ jsxs88(
|
|
14809
14874
|
ParameterShell,
|
|
14810
14875
|
{
|
|
14811
14876
|
"data-testid": "parameter-richtext",
|
|
@@ -14819,7 +14884,7 @@ var ParameterRichText = ({
|
|
|
14819
14884
|
captionTestId,
|
|
14820
14885
|
menuItems,
|
|
14821
14886
|
children: [
|
|
14822
|
-
/* @__PURE__ */
|
|
14887
|
+
/* @__PURE__ */ jsx130(
|
|
14823
14888
|
ParameterRichTextInner,
|
|
14824
14889
|
{
|
|
14825
14890
|
value,
|
|
@@ -14841,7 +14906,7 @@ var ParameterRichText = ({
|
|
|
14841
14906
|
children
|
|
14842
14907
|
}
|
|
14843
14908
|
),
|
|
14844
|
-
menuItems ? /* @__PURE__ */
|
|
14909
|
+
menuItems ? /* @__PURE__ */ jsx130(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx130(Fragment18, { children: menuItems }) }) : null
|
|
14845
14910
|
]
|
|
14846
14911
|
}
|
|
14847
14912
|
);
|
|
@@ -15002,8 +15067,8 @@ var ParameterRichTextInner = ({
|
|
|
15002
15067
|
},
|
|
15003
15068
|
editable: !readOnly
|
|
15004
15069
|
};
|
|
15005
|
-
return /* @__PURE__ */
|
|
15006
|
-
/* @__PURE__ */
|
|
15070
|
+
return /* @__PURE__ */ jsxs88(Fragment18, { children: [
|
|
15071
|
+
/* @__PURE__ */ jsx130("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx130(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx130(
|
|
15007
15072
|
RichText,
|
|
15008
15073
|
{
|
|
15009
15074
|
onChange,
|
|
@@ -15049,12 +15114,12 @@ var RichText = ({
|
|
|
15049
15114
|
minimalInteractivity
|
|
15050
15115
|
}) => {
|
|
15051
15116
|
const [editor] = useLexicalComposerContext9();
|
|
15052
|
-
|
|
15117
|
+
useEffect23(() => {
|
|
15053
15118
|
if (onRichTextInit) {
|
|
15054
15119
|
onRichTextInit(editor);
|
|
15055
15120
|
}
|
|
15056
15121
|
}, [editor, onRichTextInit]);
|
|
15057
|
-
|
|
15122
|
+
useEffect23(() => {
|
|
15058
15123
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
|
|
15059
15124
|
requestAnimationFrame(() => {
|
|
15060
15125
|
if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -15066,7 +15131,7 @@ var RichText = ({
|
|
|
15066
15131
|
removeUpdateListener();
|
|
15067
15132
|
};
|
|
15068
15133
|
}, [editor, onChange]);
|
|
15069
|
-
|
|
15134
|
+
useEffect23(() => {
|
|
15070
15135
|
editor.setEditable(!readOnly);
|
|
15071
15136
|
}, [editor, readOnly]);
|
|
15072
15137
|
const [editorContainerRef, setEditorContainerRef] = useState20(null);
|
|
@@ -15081,8 +15146,8 @@ var RichText = ({
|
|
|
15081
15146
|
setPortalContainerRef(_portalContainerRef);
|
|
15082
15147
|
}
|
|
15083
15148
|
};
|
|
15084
|
-
return /* @__PURE__ */
|
|
15085
|
-
readOnly || minimalInteractivity ? null : /* @__PURE__ */
|
|
15149
|
+
return /* @__PURE__ */ jsxs88(Fragment18, { children: [
|
|
15150
|
+
readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx130(
|
|
15086
15151
|
RichTextToolbar_default,
|
|
15087
15152
|
{
|
|
15088
15153
|
config,
|
|
@@ -15091,8 +15156,8 @@ var RichText = ({
|
|
|
15091
15156
|
onInsertAsset
|
|
15092
15157
|
}
|
|
15093
15158
|
),
|
|
15094
|
-
/* @__PURE__ */
|
|
15095
|
-
/* @__PURE__ */
|
|
15159
|
+
/* @__PURE__ */ jsxs88("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
|
|
15160
|
+
/* @__PURE__ */ jsxs88(
|
|
15096
15161
|
"div",
|
|
15097
15162
|
{
|
|
15098
15163
|
css: editorContainer,
|
|
@@ -15100,33 +15165,33 @@ var RichText = ({
|
|
|
15100
15165
|
ref: onEditorContainerRef,
|
|
15101
15166
|
"data-testid": "value-container",
|
|
15102
15167
|
children: [
|
|
15103
|
-
/* @__PURE__ */
|
|
15168
|
+
/* @__PURE__ */ jsx130(
|
|
15104
15169
|
RichTextPlugin,
|
|
15105
15170
|
{
|
|
15106
|
-
contentEditable: /* @__PURE__ */
|
|
15107
|
-
placeholder: /* @__PURE__ */
|
|
15171
|
+
contentEditable: /* @__PURE__ */ jsx130(ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
15172
|
+
placeholder: /* @__PURE__ */ jsx130("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
15108
15173
|
ErrorBoundary: LexicalErrorBoundary
|
|
15109
15174
|
}
|
|
15110
15175
|
),
|
|
15111
|
-
/* @__PURE__ */
|
|
15112
|
-
/* @__PURE__ */
|
|
15113
|
-
/* @__PURE__ */
|
|
15114
|
-
/* @__PURE__ */
|
|
15176
|
+
/* @__PURE__ */ jsx130(ListPlugin, {}),
|
|
15177
|
+
/* @__PURE__ */ jsx130(ListIndentPlugin, { maxDepth: 4 }),
|
|
15178
|
+
/* @__PURE__ */ jsx130(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
|
|
15179
|
+
/* @__PURE__ */ jsx130("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx130(
|
|
15115
15180
|
TableActionMenuPlugin,
|
|
15116
15181
|
{
|
|
15117
15182
|
positioningAnchorEl: editorContainerRef,
|
|
15118
15183
|
menuPortalEl: portalContainerRef
|
|
15119
15184
|
}
|
|
15120
15185
|
) : null }),
|
|
15121
|
-
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */
|
|
15122
|
-
readOnly ? null : /* @__PURE__ */
|
|
15123
|
-
/* @__PURE__ */
|
|
15124
|
-
/* @__PURE__ */
|
|
15186
|
+
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx130(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
|
|
15187
|
+
readOnly ? null : /* @__PURE__ */ jsx130(HistoryPlugin, {}),
|
|
15188
|
+
/* @__PURE__ */ jsx130(DisableStylesPlugin, {}),
|
|
15189
|
+
/* @__PURE__ */ jsx130(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
|
|
15125
15190
|
]
|
|
15126
15191
|
}
|
|
15127
15192
|
),
|
|
15128
|
-
/* @__PURE__ */
|
|
15129
|
-
editorContainerRef ? /* @__PURE__ */
|
|
15193
|
+
/* @__PURE__ */ jsx130(Fragment18, { children }),
|
|
15194
|
+
editorContainerRef ? /* @__PURE__ */ jsx130(
|
|
15130
15195
|
LinkNodePlugin,
|
|
15131
15196
|
{
|
|
15132
15197
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -15137,25 +15202,25 @@ var RichText = ({
|
|
|
15137
15202
|
positioningAnchorEl: editorContainerRef
|
|
15138
15203
|
}
|
|
15139
15204
|
) : null,
|
|
15140
|
-
/* @__PURE__ */
|
|
15141
|
-
/* @__PURE__ */
|
|
15205
|
+
/* @__PURE__ */ jsx130(TableSelectionPlugin_default, {}),
|
|
15206
|
+
/* @__PURE__ */ jsx130(ImprovedAssetSelectionPlugin_default, {})
|
|
15142
15207
|
] })
|
|
15143
15208
|
] });
|
|
15144
15209
|
};
|
|
15145
15210
|
|
|
15146
15211
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
15147
15212
|
import { forwardRef as forwardRef26 } from "react";
|
|
15148
|
-
import { jsx as
|
|
15213
|
+
import { jsx as jsx131, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
|
|
15149
15214
|
var ParameterSelect = forwardRef26(
|
|
15150
15215
|
({ defaultOption, options, ...props }, ref) => {
|
|
15151
15216
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15152
|
-
return /* @__PURE__ */
|
|
15217
|
+
return /* @__PURE__ */ jsx131(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx131(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
15153
15218
|
}
|
|
15154
15219
|
);
|
|
15155
15220
|
var ParameterSelectInner = forwardRef26(
|
|
15156
15221
|
({ defaultOption, options, ...props }, ref) => {
|
|
15157
15222
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
15158
|
-
return /* @__PURE__ */
|
|
15223
|
+
return /* @__PURE__ */ jsxs89(
|
|
15159
15224
|
"select",
|
|
15160
15225
|
{
|
|
15161
15226
|
css: [input3, selectInput],
|
|
@@ -15164,10 +15229,10 @@ var ParameterSelectInner = forwardRef26(
|
|
|
15164
15229
|
ref,
|
|
15165
15230
|
...props,
|
|
15166
15231
|
children: [
|
|
15167
|
-
defaultOption ? /* @__PURE__ */
|
|
15232
|
+
defaultOption ? /* @__PURE__ */ jsx131("option", { value: "", children: defaultOption }) : null,
|
|
15168
15233
|
options.map((option) => {
|
|
15169
15234
|
var _a;
|
|
15170
|
-
return /* @__PURE__ */
|
|
15235
|
+
return /* @__PURE__ */ jsx131("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
15171
15236
|
})
|
|
15172
15237
|
]
|
|
15173
15238
|
}
|
|
@@ -15177,14 +15242,14 @@ var ParameterSelectInner = forwardRef26(
|
|
|
15177
15242
|
|
|
15178
15243
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
15179
15244
|
import { forwardRef as forwardRef27 } from "react";
|
|
15180
|
-
import { jsx as
|
|
15245
|
+
import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
|
|
15181
15246
|
var ParameterTextarea = forwardRef27((props, ref) => {
|
|
15182
15247
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15183
|
-
return /* @__PURE__ */
|
|
15248
|
+
return /* @__PURE__ */ jsx132(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx132(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
15184
15249
|
});
|
|
15185
15250
|
var ParameterTextareaInner = forwardRef27(({ ...props }, ref) => {
|
|
15186
15251
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
15187
|
-
return /* @__PURE__ */
|
|
15252
|
+
return /* @__PURE__ */ jsx132(
|
|
15188
15253
|
"textarea",
|
|
15189
15254
|
{
|
|
15190
15255
|
css: [input3, textarea2],
|
|
@@ -15198,84 +15263,22 @@ var ParameterTextareaInner = forwardRef27(({ ...props }, ref) => {
|
|
|
15198
15263
|
|
|
15199
15264
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
15200
15265
|
import { forwardRef as forwardRef28 } from "react";
|
|
15201
|
-
import { jsx as
|
|
15266
|
+
import { jsx as jsx133, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
|
|
15202
15267
|
var ParameterToggle = forwardRef28((props, ref) => {
|
|
15203
15268
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15204
|
-
return /* @__PURE__ */
|
|
15269
|
+
return /* @__PURE__ */ jsx133(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx133(ParameterToggleInner, { ref, ...innerProps }) });
|
|
15205
15270
|
});
|
|
15206
15271
|
var ParameterToggleInner = forwardRef28(
|
|
15207
15272
|
({ children, ...props }, ref) => {
|
|
15208
15273
|
const { id, label } = useParameterShell();
|
|
15209
|
-
return /* @__PURE__ */
|
|
15210
|
-
/* @__PURE__ */
|
|
15211
|
-
/* @__PURE__ */
|
|
15274
|
+
return /* @__PURE__ */ jsxs90("label", { css: inputToggleLabel2, children: [
|
|
15275
|
+
/* @__PURE__ */ jsx133("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
15276
|
+
/* @__PURE__ */ jsx133("span", { css: inlineLabel2, children: label }),
|
|
15212
15277
|
children
|
|
15213
15278
|
] });
|
|
15214
15279
|
}
|
|
15215
15280
|
);
|
|
15216
15281
|
|
|
15217
|
-
// src/components/Popover/Popover.tsx
|
|
15218
|
-
import {
|
|
15219
|
-
Popover as AriakitPopover,
|
|
15220
|
-
PopoverDisclosure as PopoverDisclosure2,
|
|
15221
|
-
PopoverProvider as PopoverProvider2,
|
|
15222
|
-
usePopoverContext,
|
|
15223
|
-
usePopoverStore as usePopoverStore2
|
|
15224
|
-
} from "@ariakit/react";
|
|
15225
|
-
import { useEffect as useEffect23 } from "react";
|
|
15226
|
-
import { Fragment as Fragment18, jsx as jsx133, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
|
|
15227
|
-
var Popover3 = ({
|
|
15228
|
-
iconColor = "action",
|
|
15229
|
-
icon = "info",
|
|
15230
|
-
iconSize = "1rem",
|
|
15231
|
-
buttonText,
|
|
15232
|
-
ariaLabel,
|
|
15233
|
-
placement = "bottom",
|
|
15234
|
-
testId,
|
|
15235
|
-
trigger: trigger2,
|
|
15236
|
-
children,
|
|
15237
|
-
onInit,
|
|
15238
|
-
variant = "small",
|
|
15239
|
-
maxWidth = variant === "large" ? "24rem" : "14rem",
|
|
15240
|
-
...otherProps
|
|
15241
|
-
}) => {
|
|
15242
|
-
const popover2 = usePopoverStore2({ placement });
|
|
15243
|
-
useEffect23(() => {
|
|
15244
|
-
onInit == null ? void 0 : onInit({ store: popover2 });
|
|
15245
|
-
}, [popover2]);
|
|
15246
|
-
return /* @__PURE__ */ jsxs90(PopoverProvider2, { store: popover2, children: [
|
|
15247
|
-
/* @__PURE__ */ jsx133(
|
|
15248
|
-
PopoverDisclosure2,
|
|
15249
|
-
{
|
|
15250
|
-
css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
|
|
15251
|
-
title: buttonText,
|
|
15252
|
-
"data-testid": testId,
|
|
15253
|
-
children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs90(Fragment18, { children: [
|
|
15254
|
-
/* @__PURE__ */ jsx133(Icon, { icon, iconColor, size: iconSize }),
|
|
15255
|
-
/* @__PURE__ */ jsx133("span", { hidden: true, children: buttonText })
|
|
15256
|
-
] })
|
|
15257
|
-
}
|
|
15258
|
-
),
|
|
15259
|
-
/* @__PURE__ */ jsx133(
|
|
15260
|
-
AriakitPopover,
|
|
15261
|
-
{
|
|
15262
|
-
unmountOnHide: true,
|
|
15263
|
-
style: {
|
|
15264
|
-
maxWidth
|
|
15265
|
-
},
|
|
15266
|
-
css: [Popover, variant === "large" ? PopoverVariantLarge : PopoverVariantSmall],
|
|
15267
|
-
...otherProps,
|
|
15268
|
-
"aria-label": ariaLabel,
|
|
15269
|
-
children
|
|
15270
|
-
}
|
|
15271
|
-
)
|
|
15272
|
-
] });
|
|
15273
|
-
};
|
|
15274
|
-
var usePopoverComponentContext = () => {
|
|
15275
|
-
const contextValue = usePopoverContext();
|
|
15276
|
-
return contextValue;
|
|
15277
|
-
};
|
|
15278
|
-
|
|
15279
15282
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
15280
15283
|
import { css as css99, keyframes as keyframes4 } from "@emotion/react";
|
|
15281
15284
|
var container3 = css99`
|