@uniformdev/design-system 19.176.1-alpha.9 → 19.177.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +521 -407
- package/dist/index.d.mts +21 -2
- package/dist/index.d.ts +21 -2
- package/dist/index.js +591 -469
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -1444,11 +1444,12 @@ __export(src_exports, {
|
|
|
1444
1444
|
ObjectGridItemCoverButton: () => ObjectGridItemCoverButton,
|
|
1445
1445
|
ObjectGridItemHeading: () => ObjectGridItemHeading2,
|
|
1446
1446
|
ObjectGridItemIconWithTooltip: () => ObjectGridItemIconWithTooltip,
|
|
1447
|
+
ObjectGridItemLoadingSkeleton: () => ObjectGridItemLoadingSkeleton2,
|
|
1447
1448
|
ObjectItemLoadingSkeleton: () => ObjectItemLoadingSkeleton,
|
|
1448
1449
|
ObjectListItem: () => ObjectListItem2,
|
|
1449
1450
|
ObjectListItemContainer: () => ObjectListItemContainer2,
|
|
1450
1451
|
ObjectListItemCover: () => ObjectListItemCover2,
|
|
1451
|
-
ObjectListItemHeading: () =>
|
|
1452
|
+
ObjectListItemHeading: () => ObjectListItemHeading2,
|
|
1452
1453
|
PageHeaderSection: () => PageHeaderSection,
|
|
1453
1454
|
Pagination: () => Pagination,
|
|
1454
1455
|
Paragraph: () => Paragraph,
|
|
@@ -17662,7 +17663,6 @@ var DragHandleStyles = import_react79.css`
|
|
|
17662
17663
|
background: transparent;
|
|
17663
17664
|
border: 0;
|
|
17664
17665
|
position: relative;
|
|
17665
|
-
height: 3.125rem;
|
|
17666
17666
|
width: 1rem;
|
|
17667
17667
|
cursor: grab;
|
|
17668
17668
|
|
|
@@ -17688,13 +17688,13 @@ var DragHandleDisabled = import_react79.css`
|
|
|
17688
17688
|
// src/components/DragHandle/DragHandle.tsx
|
|
17689
17689
|
var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
|
|
17690
17690
|
var DragHandle = (0, import_react80.forwardRef)(
|
|
17691
|
-
({ disableDnd, ...props }, ref) => {
|
|
17691
|
+
({ disableDnd, height = "3.125rem", ...props }, ref) => {
|
|
17692
17692
|
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
17693
17693
|
"button",
|
|
17694
17694
|
{
|
|
17695
17695
|
type: "button",
|
|
17696
17696
|
ref,
|
|
17697
|
-
css: [DragHandleStyles, disableDnd ? DragHandleDisabled : null],
|
|
17697
|
+
css: [DragHandleStyles, disableDnd ? DragHandleDisabled : null, { height }],
|
|
17698
17698
|
disabled: disableDnd,
|
|
17699
17699
|
...props
|
|
17700
17700
|
}
|
|
@@ -20752,36 +20752,122 @@ var ObjectGridItemIconWithTooltip = ({
|
|
|
20752
20752
|
return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
20753
20753
|
};
|
|
20754
20754
|
|
|
20755
|
-
// src/components/Objects/
|
|
20755
|
+
// src/components/Objects/ObjectGridItemLoadingSkeleton.tsx
|
|
20756
20756
|
init_emotion_jsx_shim();
|
|
20757
20757
|
|
|
20758
|
-
// src/components/Objects/styles/
|
|
20758
|
+
// src/components/Objects/styles/ObjectGridItemLoadingSkeleton.styles.ts
|
|
20759
20759
|
init_emotion_jsx_shim();
|
|
20760
20760
|
var import_react126 = require("@emotion/react");
|
|
20761
|
-
var
|
|
20762
|
-
|
|
20761
|
+
var ObjectGridItemLoadingSkeleton = import_react126.css`
|
|
20762
|
+
border-radius: var(--rounded-base);
|
|
20763
20763
|
display: flex;
|
|
20764
|
+
flex-direction: column;
|
|
20764
20765
|
gap: var(--spacing-sm);
|
|
20766
|
+
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
20767
|
+
`;
|
|
20768
|
+
var ObjectGridItemLoadingText = (textLength) => import_react126.css`
|
|
20769
|
+
animation: ${fadeIn} 1s linear infinite alternate;
|
|
20770
|
+
border-radius: var(--rounded-base);
|
|
20771
|
+
background: var(--gray-300);
|
|
20772
|
+
display: block;
|
|
20773
|
+
width: clamp(24px, 100%, ${textLength});
|
|
20774
|
+
height: var(--fs-base);
|
|
20775
|
+
`;
|
|
20776
|
+
var ObjectGridItemLoadingImageWrapper = import_react126.css`
|
|
20777
|
+
aspect-ratio: 16/9;
|
|
20778
|
+
max-width: 100%;
|
|
20779
|
+
max-height: 100%;
|
|
20780
|
+
height: auto;
|
|
20781
|
+
padding: var(--spacing-sm);
|
|
20782
|
+
overflow: hidden;
|
|
20783
|
+
`;
|
|
20784
|
+
var ObjectGridItemLoadingImage = import_react126.css`
|
|
20785
|
+
animation: ${fadeIn} 1s linear infinite alternate;
|
|
20786
|
+
border-radius: var(--rounded-base);
|
|
20787
|
+
background: var(--gray-300);
|
|
20788
|
+
display: block;
|
|
20789
|
+
width: 100%;
|
|
20790
|
+
height: auto;
|
|
20791
|
+
aspect-ratio: 1;
|
|
20792
|
+
`;
|
|
20793
|
+
var ObjectGridItemLoadingContentWrapper = import_react126.css`
|
|
20794
|
+
padding: 0 var(--spacing-sm) var(--spacing-sm);
|
|
20795
|
+
min-height: 52px;
|
|
20796
|
+
`;
|
|
20797
|
+
var ObjectGridItemLoadingContentContainer = import_react126.css`
|
|
20765
20798
|
flex-grow: 1;
|
|
20799
|
+
gap: var(--spacing-xs);
|
|
20800
|
+
`;
|
|
20801
|
+
|
|
20802
|
+
// src/components/Objects/ObjectGridItemLoadingSkeleton.tsx
|
|
20803
|
+
var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
|
|
20804
|
+
var ObjectGridItemLoadingSkeleton2 = () => {
|
|
20805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { css: ObjectGridItemLoadingSkeleton, children: [
|
|
20806
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { css: ObjectGridItemLoadingImageWrapper, "data-testid": "object-grid-item-cover-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { css: ObjectGridItemLoadingImage, role: "presentation" }) }),
|
|
20807
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
|
|
20808
|
+
HorizontalRhythm,
|
|
20809
|
+
{
|
|
20810
|
+
css: ObjectGridItemLoadingContentWrapper,
|
|
20811
|
+
align: "flex-start",
|
|
20812
|
+
justify: "space-between",
|
|
20813
|
+
gap: "sm",
|
|
20814
|
+
children: [
|
|
20815
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(VerticalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "0", children: [
|
|
20816
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("18ch") }) }),
|
|
20817
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("12ch") })
|
|
20818
|
+
] }),
|
|
20819
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(HorizontalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "xs", justify: "flex-end", children: [
|
|
20820
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("6ch") }),
|
|
20821
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("24px") })
|
|
20822
|
+
] })
|
|
20823
|
+
]
|
|
20824
|
+
}
|
|
20825
|
+
)
|
|
20826
|
+
] });
|
|
20827
|
+
};
|
|
20828
|
+
|
|
20829
|
+
// src/components/Objects/ObjectItemLoadingSkeleton.tsx
|
|
20830
|
+
init_emotion_jsx_shim();
|
|
20831
|
+
|
|
20832
|
+
// src/components/Objects/styles/ObjectListItem.styles.ts
|
|
20833
|
+
init_emotion_jsx_shim();
|
|
20834
|
+
var import_react127 = require("@emotion/react");
|
|
20835
|
+
var ObjectListItem = import_react127.css`
|
|
20836
|
+
background: var(--white);
|
|
20837
|
+
display: grid;
|
|
20838
|
+
gap: var(--spacing-sm);
|
|
20766
20839
|
padding: var(--spacing-sm);
|
|
20767
20840
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
20841
|
+
container-type: inline-size;
|
|
20842
|
+
grid-template-columns: auto 1fr auto;
|
|
20768
20843
|
|
|
20769
20844
|
&:hover {
|
|
20770
20845
|
background: var(--gray-50);
|
|
20771
20846
|
}
|
|
20772
20847
|
`;
|
|
20773
|
-
var ObjectListItemSingle =
|
|
20848
|
+
var ObjectListItemSingle = import_react127.css`
|
|
20774
20849
|
align-items: center;
|
|
20775
20850
|
`;
|
|
20776
|
-
var ObjectListItemContentWrapper =
|
|
20851
|
+
var ObjectListItemContentWrapper = import_react127.css`
|
|
20852
|
+
display: grid;
|
|
20853
|
+
gap: var(--spacing-sm);
|
|
20854
|
+
justify-content: space-between;
|
|
20777
20855
|
flex-grow: 1;
|
|
20856
|
+
|
|
20857
|
+
${cq("34rem")} {
|
|
20858
|
+
grid-template-columns: auto 1fr auto;
|
|
20859
|
+
}
|
|
20778
20860
|
`;
|
|
20779
|
-
var
|
|
20861
|
+
var ObjectListItemRightSlot = import_react127.css`
|
|
20862
|
+
display: flex;
|
|
20863
|
+
gap: var(--spacing-sm);
|
|
20864
|
+
`;
|
|
20865
|
+
var ObjectListItemContainer = import_react127.css`
|
|
20780
20866
|
> [role='listitem'] {
|
|
20781
20867
|
border-top: 1px solid var(--gray-200);
|
|
20782
20868
|
}
|
|
20783
20869
|
`;
|
|
20784
|
-
var ObjectListItemCover =
|
|
20870
|
+
var ObjectListItemCover = import_react127.css`
|
|
20785
20871
|
align-items: center;
|
|
20786
20872
|
background: var(--gray-100);
|
|
20787
20873
|
color: var(--gray-500);
|
|
@@ -20791,12 +20877,12 @@ var ObjectListItemCover = import_react126.css`
|
|
|
20791
20877
|
text-align: center;
|
|
20792
20878
|
font-size: var(--fs-xs);
|
|
20793
20879
|
`;
|
|
20794
|
-
var ObjectListItemImage =
|
|
20880
|
+
var ObjectListItemImage = import_react127.css`
|
|
20795
20881
|
object-fit: cover;
|
|
20796
20882
|
width: 100%;
|
|
20797
20883
|
height: 100%;
|
|
20798
20884
|
`;
|
|
20799
|
-
var ObjectListItemLoading =
|
|
20885
|
+
var ObjectListItemLoading = import_react127.css`
|
|
20800
20886
|
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
20801
20887
|
background: var(--white);
|
|
20802
20888
|
display: flex;
|
|
@@ -20804,15 +20890,18 @@ var ObjectListItemLoading = import_react126.css`
|
|
|
20804
20890
|
flex-grow: 1;
|
|
20805
20891
|
padding: var(--spacing-sm);
|
|
20806
20892
|
`;
|
|
20807
|
-
var
|
|
20893
|
+
var ObjectListItemLoadingInner = import_react127.css`
|
|
20894
|
+
flex-grow: 1;
|
|
20895
|
+
`;
|
|
20896
|
+
var ObjectListItemLoadingText = (textLength) => import_react127.css`
|
|
20808
20897
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
20809
20898
|
border-radius: var(--rounded-base);
|
|
20810
20899
|
background: var(--gray-300);
|
|
20811
20900
|
display: block;
|
|
20812
|
-
width: ${textLength};
|
|
20901
|
+
width: clamp(10ch, 100%, ${textLength});
|
|
20813
20902
|
height: var(--fs-base);
|
|
20814
20903
|
`;
|
|
20815
|
-
var ObjectListItemLoadingImage =
|
|
20904
|
+
var ObjectListItemLoadingImage = import_react127.css`
|
|
20816
20905
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
20817
20906
|
border-radius: var(--rounded-base);
|
|
20818
20907
|
background: var(--gray-300);
|
|
@@ -20820,31 +20909,43 @@ var ObjectListItemLoadingImage = import_react126.css`
|
|
|
20820
20909
|
width: 80px;
|
|
20821
20910
|
height: 55px;
|
|
20822
20911
|
`;
|
|
20912
|
+
var ObjectListItemHeadingWrapper = import_react127.css`
|
|
20913
|
+
display: flex;
|
|
20914
|
+
gap: var(--spacing-xs);
|
|
20915
|
+
`;
|
|
20823
20916
|
|
|
20824
20917
|
// src/components/Objects/ObjectItemLoadingSkeleton.tsx
|
|
20825
|
-
var
|
|
20826
|
-
var ObjectItemLoadingSkeleton = ({
|
|
20827
|
-
|
|
20828
|
-
|
|
20829
|
-
|
|
20830
|
-
|
|
20831
|
-
|
|
20832
|
-
|
|
20833
|
-
|
|
20834
|
-
|
|
20835
|
-
|
|
20836
|
-
|
|
20837
|
-
|
|
20838
|
-
|
|
20839
|
-
|
|
20918
|
+
var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
|
|
20919
|
+
var ObjectItemLoadingSkeleton = ({
|
|
20920
|
+
showCover,
|
|
20921
|
+
renderAs = "single"
|
|
20922
|
+
}) => {
|
|
20923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
|
|
20924
|
+
"div",
|
|
20925
|
+
{
|
|
20926
|
+
css: [
|
|
20927
|
+
ObjectListItemLoading,
|
|
20928
|
+
{
|
|
20929
|
+
alignItems: renderAs === "multi" ? "flex-start" : "center"
|
|
20930
|
+
}
|
|
20931
|
+
],
|
|
20932
|
+
children: [
|
|
20933
|
+
showCover ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { "data-testid": "object-list-item-cover-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { role: "presentation", css: ObjectListItemLoadingImage }) }) : null,
|
|
20934
|
+
/* @__PURE__ */ (0, import_jsx_runtime109.jsx)(VerticalRhythm, { css: ObjectListItemLoadingInner, justify: "space-between", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(VerticalRhythm, { gap: "xs", children: [
|
|
20935
|
+
/* @__PURE__ */ (0, import_jsx_runtime109.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { role: "presentation", css: ObjectListItemLoadingText("30ch") }) }),
|
|
20936
|
+
/* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { role: "presentation", css: ObjectListItemLoadingText("20ch") })
|
|
20937
|
+
] }) })
|
|
20938
|
+
]
|
|
20939
|
+
}
|
|
20940
|
+
);
|
|
20840
20941
|
};
|
|
20841
20942
|
|
|
20842
20943
|
// src/components/Objects/ObjectListItem.tsx
|
|
20843
20944
|
init_emotion_jsx_shim();
|
|
20844
|
-
var
|
|
20945
|
+
var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
|
|
20845
20946
|
var ObjectListItem2 = (props) => {
|
|
20846
|
-
const { renderAs, isSelected, cover, header: header2, rightSlot, menuItems, ...divProps } = props;
|
|
20847
|
-
return /* @__PURE__ */ (0,
|
|
20947
|
+
const { renderAs, isSelected, cover, header: header2, rightSlot, menuItems, dragHandle, ...divProps } = props;
|
|
20948
|
+
return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
|
|
20848
20949
|
"div",
|
|
20849
20950
|
{
|
|
20850
20951
|
role: "listitem",
|
|
@@ -20853,24 +20954,23 @@ var ObjectListItem2 = (props) => {
|
|
|
20853
20954
|
"aria-selected": isSelected,
|
|
20854
20955
|
...divProps,
|
|
20855
20956
|
children: [
|
|
20856
|
-
|
|
20857
|
-
/* @__PURE__ */ (0,
|
|
20858
|
-
/* @__PURE__ */ (0,
|
|
20859
|
-
|
|
20957
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: dragHandle }),
|
|
20958
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { css: ObjectListItemContentWrapper, children: [
|
|
20959
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: cover }),
|
|
20960
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(VerticalRhythm, { gap: "0", children: [
|
|
20961
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: header2 }),
|
|
20860
20962
|
renderAs === "multi" ? props.children : null
|
|
20861
20963
|
] }),
|
|
20862
|
-
/* @__PURE__ */ (0,
|
|
20863
|
-
|
|
20864
|
-
|
|
20865
|
-
|
|
20866
|
-
|
|
20867
|
-
|
|
20868
|
-
|
|
20869
|
-
|
|
20870
|
-
|
|
20871
|
-
|
|
20872
|
-
] })
|
|
20873
|
-
] })
|
|
20964
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HorizontalRhythm, { gap: "xs", align: "flex-start", children: rightSlot })
|
|
20965
|
+
] }),
|
|
20966
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HorizontalRhythm, { gap: "0", align: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
|
|
20967
|
+
Menu,
|
|
20968
|
+
{
|
|
20969
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(MenuThreeDots, { "data-testid": "object-list-item-menu-btn" }),
|
|
20970
|
+
placement: "bottom-end",
|
|
20971
|
+
children: menuItems
|
|
20972
|
+
}
|
|
20973
|
+
) }) : null
|
|
20874
20974
|
]
|
|
20875
20975
|
}
|
|
20876
20976
|
);
|
|
@@ -20878,23 +20978,23 @@ var ObjectListItem2 = (props) => {
|
|
|
20878
20978
|
|
|
20879
20979
|
// src/components/Objects/ObjectListItemContainer.tsx
|
|
20880
20980
|
init_emotion_jsx_shim();
|
|
20881
|
-
var
|
|
20981
|
+
var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
|
|
20882
20982
|
var ObjectListItemContainer2 = ({ children, gap = "0", ...props }) => {
|
|
20883
|
-
return /* @__PURE__ */ (0,
|
|
20983
|
+
return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(VerticalRhythm, { gap, css: ObjectListItemContainer, role: "list", ...props, children });
|
|
20884
20984
|
};
|
|
20885
20985
|
|
|
20886
20986
|
// src/components/Objects/ObjectListItemCover.tsx
|
|
20887
20987
|
init_emotion_jsx_shim();
|
|
20888
|
-
var
|
|
20988
|
+
var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
|
|
20889
20989
|
var ObjectListItemCover2 = ({
|
|
20890
20990
|
imageUrl,
|
|
20891
20991
|
noImageText = "Image not available",
|
|
20892
20992
|
...props
|
|
20893
20993
|
}) => {
|
|
20894
20994
|
if (!imageUrl) {
|
|
20895
|
-
return /* @__PURE__ */ (0,
|
|
20995
|
+
return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
|
|
20896
20996
|
}
|
|
20897
|
-
return /* @__PURE__ */ (0,
|
|
20997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { css: ObjectListItemCover, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
|
|
20898
20998
|
"img",
|
|
20899
20999
|
{
|
|
20900
21000
|
src: imageUrl,
|
|
@@ -20908,17 +21008,38 @@ var ObjectListItemCover2 = ({
|
|
|
20908
21008
|
|
|
20909
21009
|
// src/components/Objects/ObjectListItemHeading.tsx
|
|
20910
21010
|
init_emotion_jsx_shim();
|
|
20911
|
-
|
|
20912
|
-
|
|
21011
|
+
|
|
21012
|
+
// src/components/Objects/styles/ObjectListItemHeading.styles.ts
|
|
21013
|
+
init_emotion_jsx_shim();
|
|
21014
|
+
var import_react128 = require("@emotion/react");
|
|
21015
|
+
var ObjectListItemHeading = import_react128.css`
|
|
21016
|
+
display: flex;
|
|
21017
|
+
flex-direction: column;
|
|
21018
|
+
gap: var(--spacing-xs);
|
|
21019
|
+
|
|
21020
|
+
${cq("34rem")} {
|
|
21021
|
+
align-items: center;
|
|
21022
|
+
flex-direction: row;
|
|
21023
|
+
}
|
|
21024
|
+
`;
|
|
21025
|
+
var ObjectListItemHeadingAfterWrapper = import_react128.css`
|
|
21026
|
+
line-height: 1.25;
|
|
21027
|
+
`;
|
|
21028
|
+
|
|
21029
|
+
// src/components/Objects/ObjectListItemHeading.tsx
|
|
21030
|
+
var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
|
|
21031
|
+
var ObjectListItemHeading2 = ({
|
|
20913
21032
|
heading,
|
|
20914
21033
|
beforeHeadingSlot,
|
|
20915
21034
|
afterHeadingSlot,
|
|
20916
21035
|
...props
|
|
20917
21036
|
}) => {
|
|
20918
|
-
return /* @__PURE__ */ (0,
|
|
20919
|
-
beforeHeadingSlot,
|
|
20920
|
-
/* @__PURE__ */ (0,
|
|
20921
|
-
|
|
21037
|
+
return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { css: ObjectListItemHeading, ...props, children: [
|
|
21038
|
+
beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: beforeHeadingSlot }) : null,
|
|
21039
|
+
/* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(HorizontalRhythm, { css: ObjectListItemHeadingAfterWrapper, gap: "xs", align: "flex-start", children: [
|
|
21040
|
+
/* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { role: "heading", children: heading }),
|
|
21041
|
+
afterHeadingSlot
|
|
21042
|
+
] })
|
|
20922
21043
|
] });
|
|
20923
21044
|
};
|
|
20924
21045
|
|
|
@@ -20956,7 +21077,7 @@ var page = import_css.css`
|
|
|
20956
21077
|
`;
|
|
20957
21078
|
|
|
20958
21079
|
// src/components/Pagination/Pagination.tsx
|
|
20959
|
-
var
|
|
21080
|
+
var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
|
|
20960
21081
|
function Pagination({
|
|
20961
21082
|
limit,
|
|
20962
21083
|
offset,
|
|
@@ -20971,12 +21092,12 @@ function Pagination({
|
|
|
20971
21092
|
if (pageCount <= 1) {
|
|
20972
21093
|
return null;
|
|
20973
21094
|
}
|
|
20974
|
-
return /* @__PURE__ */ (0,
|
|
21095
|
+
return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
|
|
20975
21096
|
import_react_paginate.default,
|
|
20976
21097
|
{
|
|
20977
21098
|
forcePage: currentPage,
|
|
20978
|
-
previousLabel: /* @__PURE__ */ (0,
|
|
20979
|
-
nextLabel: /* @__PURE__ */ (0,
|
|
21099
|
+
previousLabel: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: prevNextControls, children: "<" }),
|
|
21100
|
+
nextLabel: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: prevNextControls, children: ">" }),
|
|
20980
21101
|
breakLabel: "...",
|
|
20981
21102
|
pageCount,
|
|
20982
21103
|
marginPagesDisplayed: 2,
|
|
@@ -20996,8 +21117,8 @@ function Pagination({
|
|
|
20996
21117
|
|
|
20997
21118
|
// src/components/ParameterInputs/hooks/ParameterShellContext.tsx
|
|
20998
21119
|
init_emotion_jsx_shim();
|
|
20999
|
-
var
|
|
21000
|
-
var ParameterShellContext = (0,
|
|
21120
|
+
var import_react129 = require("react");
|
|
21121
|
+
var ParameterShellContext = (0, import_react129.createContext)({
|
|
21001
21122
|
id: "",
|
|
21002
21123
|
label: "",
|
|
21003
21124
|
hiddenLabel: void 0,
|
|
@@ -21006,7 +21127,7 @@ var ParameterShellContext = (0, import_react127.createContext)({
|
|
|
21006
21127
|
}
|
|
21007
21128
|
});
|
|
21008
21129
|
var useParameterShell = () => {
|
|
21009
|
-
const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0,
|
|
21130
|
+
const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react129.useContext)(ParameterShellContext);
|
|
21010
21131
|
return {
|
|
21011
21132
|
id,
|
|
21012
21133
|
label,
|
|
@@ -21021,8 +21142,8 @@ init_emotion_jsx_shim();
|
|
|
21021
21142
|
|
|
21022
21143
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
21023
21144
|
init_emotion_jsx_shim();
|
|
21024
|
-
var
|
|
21025
|
-
var inputIconBtn =
|
|
21145
|
+
var import_react130 = require("@emotion/react");
|
|
21146
|
+
var inputIconBtn = import_react130.css`
|
|
21026
21147
|
align-items: center;
|
|
21027
21148
|
border: none;
|
|
21028
21149
|
border-radius: var(--rounded-base);
|
|
@@ -21048,7 +21169,7 @@ var inputIconBtn = import_react128.css`
|
|
|
21048
21169
|
`;
|
|
21049
21170
|
|
|
21050
21171
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
21051
|
-
var
|
|
21172
|
+
var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
|
|
21052
21173
|
var LabelLeadingIcon = ({
|
|
21053
21174
|
icon,
|
|
21054
21175
|
iconColor,
|
|
@@ -21060,7 +21181,7 @@ var LabelLeadingIcon = ({
|
|
|
21060
21181
|
...props
|
|
21061
21182
|
}) => {
|
|
21062
21183
|
const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
|
|
21063
|
-
return /* @__PURE__ */ (0,
|
|
21184
|
+
return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Tooltip, { title: titleFr, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
|
|
21064
21185
|
"button",
|
|
21065
21186
|
{
|
|
21066
21187
|
css: inputIconBtn,
|
|
@@ -21070,7 +21191,7 @@ var LabelLeadingIcon = ({
|
|
|
21070
21191
|
...props,
|
|
21071
21192
|
"data-testid": "lock-button",
|
|
21072
21193
|
children: [
|
|
21073
|
-
/* @__PURE__ */ (0,
|
|
21194
|
+
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
|
|
21074
21195
|
Icon,
|
|
21075
21196
|
{
|
|
21076
21197
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -21090,8 +21211,8 @@ init_emotion_jsx_shim();
|
|
|
21090
21211
|
|
|
21091
21212
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
21092
21213
|
init_emotion_jsx_shim();
|
|
21093
|
-
var
|
|
21094
|
-
var inputContainer2 =
|
|
21214
|
+
var import_react131 = require("@emotion/react");
|
|
21215
|
+
var inputContainer2 = import_react131.css`
|
|
21095
21216
|
position: relative;
|
|
21096
21217
|
scroll-margin: var(--spacing-2xl);
|
|
21097
21218
|
|
|
@@ -21104,14 +21225,14 @@ var inputContainer2 = import_react129.css`
|
|
|
21104
21225
|
}
|
|
21105
21226
|
}
|
|
21106
21227
|
`;
|
|
21107
|
-
var labelText2 =
|
|
21228
|
+
var labelText2 = import_react131.css`
|
|
21108
21229
|
align-items: center;
|
|
21109
21230
|
display: flex;
|
|
21110
21231
|
gap: var(--spacing-xs);
|
|
21111
21232
|
font-weight: var(--fw-regular);
|
|
21112
21233
|
margin: 0 0 var(--spacing-xs);
|
|
21113
21234
|
`;
|
|
21114
|
-
var input3 =
|
|
21235
|
+
var input3 = import_react131.css`
|
|
21115
21236
|
display: block;
|
|
21116
21237
|
appearance: none;
|
|
21117
21238
|
box-sizing: border-box;
|
|
@@ -21159,18 +21280,18 @@ var input3 = import_react129.css`
|
|
|
21159
21280
|
color: var(--gray-400);
|
|
21160
21281
|
}
|
|
21161
21282
|
`;
|
|
21162
|
-
var selectInput =
|
|
21283
|
+
var selectInput = import_react131.css`
|
|
21163
21284
|
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
|
|
21164
21285
|
background-position: right var(--spacing-sm) center;
|
|
21165
21286
|
background-repeat: no-repeat;
|
|
21166
21287
|
background-size: 1rem;
|
|
21167
21288
|
padding-right: var(--spacing-xl);
|
|
21168
21289
|
`;
|
|
21169
|
-
var inputWrapper =
|
|
21290
|
+
var inputWrapper = import_react131.css`
|
|
21170
21291
|
display: flex; // used to correct overflow with chrome textarea
|
|
21171
21292
|
position: relative;
|
|
21172
21293
|
`;
|
|
21173
|
-
var inputIcon2 =
|
|
21294
|
+
var inputIcon2 = import_react131.css`
|
|
21174
21295
|
align-items: center;
|
|
21175
21296
|
background: var(--white);
|
|
21176
21297
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -21186,7 +21307,7 @@ var inputIcon2 = import_react129.css`
|
|
|
21186
21307
|
width: var(--spacing-lg);
|
|
21187
21308
|
z-index: var(--z-10);
|
|
21188
21309
|
`;
|
|
21189
|
-
var inputToggleLabel2 =
|
|
21310
|
+
var inputToggleLabel2 = import_react131.css`
|
|
21190
21311
|
--inline-label-color: var(--typography-base);
|
|
21191
21312
|
align-items: center;
|
|
21192
21313
|
cursor: pointer;
|
|
@@ -21201,7 +21322,7 @@ var inputToggleLabel2 = import_react129.css`
|
|
|
21201
21322
|
--inline-label-color: var(--gray-400);
|
|
21202
21323
|
}
|
|
21203
21324
|
`;
|
|
21204
|
-
var toggleInput2 =
|
|
21325
|
+
var toggleInput2 = import_react131.css`
|
|
21205
21326
|
appearance: none;
|
|
21206
21327
|
border: 1px solid var(--gray-200);
|
|
21207
21328
|
background: var(--white);
|
|
@@ -21254,7 +21375,7 @@ var toggleInput2 = import_react129.css`
|
|
|
21254
21375
|
border-color: var(--gray-300);
|
|
21255
21376
|
}
|
|
21256
21377
|
`;
|
|
21257
|
-
var inlineLabel2 =
|
|
21378
|
+
var inlineLabel2 = import_react131.css`
|
|
21258
21379
|
color: var(--inline-label-color);
|
|
21259
21380
|
padding-left: var(--spacing-md);
|
|
21260
21381
|
font-size: var(--fs-sm);
|
|
@@ -21271,7 +21392,7 @@ var inlineLabel2 = import_react129.css`
|
|
|
21271
21392
|
}
|
|
21272
21393
|
}
|
|
21273
21394
|
`;
|
|
21274
|
-
var inputMenu =
|
|
21395
|
+
var inputMenu = import_react131.css`
|
|
21275
21396
|
background: none;
|
|
21276
21397
|
border: none;
|
|
21277
21398
|
padding: var(--spacing-2xs);
|
|
@@ -21279,10 +21400,10 @@ var inputMenu = import_react129.css`
|
|
|
21279
21400
|
top: calc(var(--spacing-md) * -1.2);
|
|
21280
21401
|
right: 0;
|
|
21281
21402
|
`;
|
|
21282
|
-
var inputActionItems =
|
|
21403
|
+
var inputActionItems = import_react131.css`
|
|
21283
21404
|
display: flex;
|
|
21284
21405
|
`;
|
|
21285
|
-
var inputMenuHover =
|
|
21406
|
+
var inputMenuHover = import_react131.css`
|
|
21286
21407
|
opacity: var(--opacity-50);
|
|
21287
21408
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
21288
21409
|
|
|
@@ -21292,11 +21413,11 @@ var inputMenuHover = import_react129.css`
|
|
|
21292
21413
|
background-color: var(--gray-200);
|
|
21293
21414
|
}
|
|
21294
21415
|
`;
|
|
21295
|
-
var textarea2 =
|
|
21416
|
+
var textarea2 = import_react131.css`
|
|
21296
21417
|
resize: vertical;
|
|
21297
21418
|
min-height: 2rem;
|
|
21298
21419
|
`;
|
|
21299
|
-
var dataConnectButton =
|
|
21420
|
+
var dataConnectButton = import_react131.css`
|
|
21300
21421
|
align-items: center;
|
|
21301
21422
|
appearance: none;
|
|
21302
21423
|
box-sizing: border-box;
|
|
@@ -21331,7 +21452,7 @@ var dataConnectButton = import_react129.css`
|
|
|
21331
21452
|
pointer-events: none;
|
|
21332
21453
|
}
|
|
21333
21454
|
`;
|
|
21334
|
-
var linkParameterBtn =
|
|
21455
|
+
var linkParameterBtn = import_react131.css`
|
|
21335
21456
|
border-radius: var(--rounded-base);
|
|
21336
21457
|
background: transparent;
|
|
21337
21458
|
border: none;
|
|
@@ -21340,7 +21461,7 @@ var linkParameterBtn = import_react129.css`
|
|
|
21340
21461
|
font-size: var(--fs-sm);
|
|
21341
21462
|
line-height: 1;
|
|
21342
21463
|
`;
|
|
21343
|
-
var linkParameterControls =
|
|
21464
|
+
var linkParameterControls = import_react131.css`
|
|
21344
21465
|
position: absolute;
|
|
21345
21466
|
inset: 0 0 0 auto;
|
|
21346
21467
|
padding: 0 var(--spacing-base);
|
|
@@ -21349,7 +21470,7 @@ var linkParameterControls = import_react129.css`
|
|
|
21349
21470
|
justify-content: center;
|
|
21350
21471
|
gap: var(--spacing-base);
|
|
21351
21472
|
`;
|
|
21352
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
21473
|
+
var linkParameterInput = (withExternalLinkIcon) => import_react131.css`
|
|
21353
21474
|
padding-right: calc(
|
|
21354
21475
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
21355
21476
|
var(--spacing-base)
|
|
@@ -21362,7 +21483,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react129.css`
|
|
|
21362
21483
|
}
|
|
21363
21484
|
}
|
|
21364
21485
|
`;
|
|
21365
|
-
var linkParameterIcon =
|
|
21486
|
+
var linkParameterIcon = import_react131.css`
|
|
21366
21487
|
align-items: center;
|
|
21367
21488
|
color: var(--brand-secondary-3);
|
|
21368
21489
|
display: flex;
|
|
@@ -21377,7 +21498,7 @@ var linkParameterIcon = import_react129.css`
|
|
|
21377
21498
|
`;
|
|
21378
21499
|
|
|
21379
21500
|
// src/components/ParameterInputs/ParameterDataResource.tsx
|
|
21380
|
-
var
|
|
21501
|
+
var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
|
|
21381
21502
|
function ParameterDataResource({
|
|
21382
21503
|
label,
|
|
21383
21504
|
labelLeadingIcon,
|
|
@@ -21387,12 +21508,12 @@ function ParameterDataResource({
|
|
|
21387
21508
|
disabled: disabled2,
|
|
21388
21509
|
children
|
|
21389
21510
|
}) {
|
|
21390
|
-
return /* @__PURE__ */ (0,
|
|
21391
|
-
/* @__PURE__ */ (0,
|
|
21511
|
+
return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
|
|
21512
|
+
/* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("span", { css: labelText2, children: [
|
|
21392
21513
|
labelLeadingIcon ? labelLeadingIcon : null,
|
|
21393
21514
|
label
|
|
21394
21515
|
] }),
|
|
21395
|
-
/* @__PURE__ */ (0,
|
|
21516
|
+
/* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
|
|
21396
21517
|
"button",
|
|
21397
21518
|
{
|
|
21398
21519
|
type: "button",
|
|
@@ -21401,12 +21522,12 @@ function ParameterDataResource({
|
|
|
21401
21522
|
disabled: disabled2,
|
|
21402
21523
|
onClick: onConnectDatasource,
|
|
21403
21524
|
children: [
|
|
21404
|
-
/* @__PURE__ */ (0,
|
|
21525
|
+
/* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
|
|
21405
21526
|
children
|
|
21406
21527
|
]
|
|
21407
21528
|
}
|
|
21408
21529
|
),
|
|
21409
|
-
caption ? /* @__PURE__ */ (0,
|
|
21530
|
+
caption ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Caption, { children: caption }) : null
|
|
21410
21531
|
] });
|
|
21411
21532
|
}
|
|
21412
21533
|
|
|
@@ -21415,20 +21536,20 @@ init_emotion_jsx_shim();
|
|
|
21415
21536
|
|
|
21416
21537
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
21417
21538
|
init_emotion_jsx_shim();
|
|
21418
|
-
var
|
|
21419
|
-
var ParameterDrawerHeaderContainer =
|
|
21539
|
+
var import_react132 = require("@emotion/react");
|
|
21540
|
+
var ParameterDrawerHeaderContainer = import_react132.css`
|
|
21420
21541
|
align-items: center;
|
|
21421
21542
|
display: flex;
|
|
21422
21543
|
gap: var(--spacing-base);
|
|
21423
21544
|
justify-content: space-between;
|
|
21424
21545
|
margin-bottom: var(--spacing-sm);
|
|
21425
21546
|
`;
|
|
21426
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
21547
|
+
var ParameterDrawerHeaderTitleGroup = import_react132.css`
|
|
21427
21548
|
align-items: center;
|
|
21428
21549
|
display: flex;
|
|
21429
21550
|
gap: var(--spacing-sm);
|
|
21430
21551
|
`;
|
|
21431
|
-
var ParameterDrawerHeaderTitle =
|
|
21552
|
+
var ParameterDrawerHeaderTitle = import_react132.css`
|
|
21432
21553
|
text-overflow: ellipsis;
|
|
21433
21554
|
white-space: nowrap;
|
|
21434
21555
|
overflow: hidden;
|
|
@@ -21436,12 +21557,12 @@ var ParameterDrawerHeaderTitle = import_react130.css`
|
|
|
21436
21557
|
`;
|
|
21437
21558
|
|
|
21438
21559
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
21439
|
-
var
|
|
21560
|
+
var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
|
|
21440
21561
|
var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
21441
|
-
return /* @__PURE__ */ (0,
|
|
21442
|
-
/* @__PURE__ */ (0,
|
|
21562
|
+
return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
21563
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
21443
21564
|
iconBeforeTitle,
|
|
21444
|
-
/* @__PURE__ */ (0,
|
|
21565
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
|
|
21445
21566
|
] }),
|
|
21446
21567
|
children
|
|
21447
21568
|
] });
|
|
@@ -21449,12 +21570,12 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
|
21449
21570
|
|
|
21450
21571
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
21451
21572
|
init_emotion_jsx_shim();
|
|
21452
|
-
var
|
|
21573
|
+
var import_react134 = require("react");
|
|
21453
21574
|
|
|
21454
21575
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
21455
21576
|
init_emotion_jsx_shim();
|
|
21456
|
-
var
|
|
21457
|
-
var fieldsetStyles =
|
|
21577
|
+
var import_react133 = require("@emotion/react");
|
|
21578
|
+
var fieldsetStyles = import_react133.css`
|
|
21458
21579
|
&:disabled,
|
|
21459
21580
|
[readonly] {
|
|
21460
21581
|
pointer-events: none;
|
|
@@ -21465,7 +21586,7 @@ var fieldsetStyles = import_react131.css`
|
|
|
21465
21586
|
}
|
|
21466
21587
|
}
|
|
21467
21588
|
`;
|
|
21468
|
-
var fieldsetLegend2 =
|
|
21589
|
+
var fieldsetLegend2 = import_react133.css`
|
|
21469
21590
|
display: block;
|
|
21470
21591
|
font-weight: var(--fw-medium);
|
|
21471
21592
|
margin-bottom: var(--spacing-sm);
|
|
@@ -21473,11 +21594,11 @@ var fieldsetLegend2 = import_react131.css`
|
|
|
21473
21594
|
`;
|
|
21474
21595
|
|
|
21475
21596
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
21476
|
-
var
|
|
21477
|
-
var ParameterGroup = (0,
|
|
21597
|
+
var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
|
|
21598
|
+
var ParameterGroup = (0, import_react134.forwardRef)(
|
|
21478
21599
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
21479
|
-
return /* @__PURE__ */ (0,
|
|
21480
|
-
/* @__PURE__ */ (0,
|
|
21600
|
+
return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
21601
|
+
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)("legend", { css: fieldsetLegend2, children: legend }),
|
|
21481
21602
|
children
|
|
21482
21603
|
] });
|
|
21483
21604
|
}
|
|
@@ -21485,24 +21606,24 @@ var ParameterGroup = (0, import_react132.forwardRef)(
|
|
|
21485
21606
|
|
|
21486
21607
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
21487
21608
|
init_emotion_jsx_shim();
|
|
21488
|
-
var
|
|
21609
|
+
var import_react141 = require("react");
|
|
21489
21610
|
|
|
21490
21611
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
21491
21612
|
init_emotion_jsx_shim();
|
|
21492
|
-
var
|
|
21613
|
+
var import_react136 = require("react");
|
|
21493
21614
|
var import_react_dom2 = require("react-dom");
|
|
21494
21615
|
|
|
21495
21616
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
21496
21617
|
init_emotion_jsx_shim();
|
|
21497
|
-
var
|
|
21498
|
-
var previewWrapper =
|
|
21618
|
+
var import_react135 = require("@emotion/react");
|
|
21619
|
+
var previewWrapper = import_react135.css`
|
|
21499
21620
|
margin-top: var(--spacing-xs);
|
|
21500
21621
|
background: var(--gray-50);
|
|
21501
21622
|
padding: var(--spacing-sm);
|
|
21502
21623
|
border: solid 1px var(--gray-300);
|
|
21503
21624
|
border-radius: var(--rounded-sm);
|
|
21504
21625
|
`;
|
|
21505
|
-
var previewLink =
|
|
21626
|
+
var previewLink = import_react135.css`
|
|
21506
21627
|
display: block;
|
|
21507
21628
|
width: 100%;
|
|
21508
21629
|
|
|
@@ -21510,7 +21631,7 @@ var previewLink = import_react133.css`
|
|
|
21510
21631
|
max-height: 9rem;
|
|
21511
21632
|
}
|
|
21512
21633
|
`;
|
|
21513
|
-
var previewModalWrapper =
|
|
21634
|
+
var previewModalWrapper = import_react135.css`
|
|
21514
21635
|
background: var(--gray-50);
|
|
21515
21636
|
display: flex;
|
|
21516
21637
|
height: 100%;
|
|
@@ -21519,7 +21640,7 @@ var previewModalWrapper = import_react133.css`
|
|
|
21519
21640
|
border: solid 1px var(--gray-300);
|
|
21520
21641
|
border-radius: var(--rounded-sm);
|
|
21521
21642
|
`;
|
|
21522
|
-
var previewModalImage =
|
|
21643
|
+
var previewModalImage = import_react135.css`
|
|
21523
21644
|
display: flex;
|
|
21524
21645
|
height: 100%;
|
|
21525
21646
|
width: 100%;
|
|
@@ -21531,32 +21652,32 @@ var previewModalImage = import_react133.css`
|
|
|
21531
21652
|
`;
|
|
21532
21653
|
|
|
21533
21654
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
21534
|
-
var
|
|
21655
|
+
var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
|
|
21535
21656
|
function ParameterImagePreview({ imageSrc }) {
|
|
21536
|
-
const [showModal, setShowModal] = (0,
|
|
21537
|
-
return imageSrc ? /* @__PURE__ */ (0,
|
|
21538
|
-
/* @__PURE__ */ (0,
|
|
21539
|
-
/* @__PURE__ */ (0,
|
|
21657
|
+
const [showModal, setShowModal] = (0, import_react136.useState)(false);
|
|
21658
|
+
return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: previewWrapper, children: [
|
|
21659
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
21660
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
21540
21661
|
"button",
|
|
21541
21662
|
{
|
|
21542
21663
|
css: previewLink,
|
|
21543
21664
|
onClick: () => {
|
|
21544
21665
|
setShowModal(true);
|
|
21545
21666
|
},
|
|
21546
|
-
children: /* @__PURE__ */ (0,
|
|
21667
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
21547
21668
|
}
|
|
21548
21669
|
)
|
|
21549
21670
|
] }) : null;
|
|
21550
21671
|
}
|
|
21551
21672
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
21552
|
-
return open ? /* @__PURE__ */ (0,
|
|
21553
|
-
/* @__PURE__ */ (0,
|
|
21673
|
+
return open ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_jsx_runtime119.Fragment, { children: (0, import_react_dom2.createPortal)(
|
|
21674
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
21554
21675
|
Modal,
|
|
21555
21676
|
{
|
|
21556
21677
|
header: "Image Preview",
|
|
21557
21678
|
onRequestClose,
|
|
21558
|
-
buttonGroup: /* @__PURE__ */ (0,
|
|
21559
|
-
children: /* @__PURE__ */ (0,
|
|
21679
|
+
buttonGroup: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
21680
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: previewModalWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
21560
21681
|
}
|
|
21561
21682
|
),
|
|
21562
21683
|
document.body
|
|
@@ -21565,27 +21686,27 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
21565
21686
|
|
|
21566
21687
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
21567
21688
|
init_emotion_jsx_shim();
|
|
21568
|
-
var
|
|
21569
|
-
var
|
|
21689
|
+
var import_react139 = require("@emotion/react");
|
|
21690
|
+
var import_react140 = require("react");
|
|
21570
21691
|
|
|
21571
21692
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
21572
21693
|
init_emotion_jsx_shim();
|
|
21573
|
-
var
|
|
21694
|
+
var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
|
|
21574
21695
|
var ParameterLabel = ({ id, asSpan, children, ...props }) => {
|
|
21575
|
-
return !asSpan ? /* @__PURE__ */ (0,
|
|
21696
|
+
return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
|
|
21576
21697
|
};
|
|
21577
21698
|
|
|
21578
21699
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
21579
21700
|
init_emotion_jsx_shim();
|
|
21580
|
-
var
|
|
21581
|
-
var
|
|
21582
|
-
var ParameterMenuButton = (0,
|
|
21701
|
+
var import_react137 = require("react");
|
|
21702
|
+
var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
|
|
21703
|
+
var ParameterMenuButton = (0, import_react137.forwardRef)(
|
|
21583
21704
|
({ label, children }, ref) => {
|
|
21584
|
-
return /* @__PURE__ */ (0,
|
|
21705
|
+
return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
|
|
21585
21706
|
Menu,
|
|
21586
21707
|
{
|
|
21587
21708
|
menuLabel: `${label} menu`,
|
|
21588
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
21709
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
|
|
21589
21710
|
"button",
|
|
21590
21711
|
{
|
|
21591
21712
|
className: "parameter-menu",
|
|
@@ -21593,7 +21714,7 @@ var ParameterMenuButton = (0, import_react135.forwardRef)(
|
|
|
21593
21714
|
type: "button",
|
|
21594
21715
|
"aria-label": `${label} options`,
|
|
21595
21716
|
ref,
|
|
21596
|
-
children: /* @__PURE__ */ (0,
|
|
21717
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
21597
21718
|
}
|
|
21598
21719
|
),
|
|
21599
21720
|
children
|
|
@@ -21604,14 +21725,14 @@ var ParameterMenuButton = (0, import_react135.forwardRef)(
|
|
|
21604
21725
|
|
|
21605
21726
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
21606
21727
|
init_emotion_jsx_shim();
|
|
21607
|
-
var
|
|
21608
|
-
var emptyParameterShell =
|
|
21728
|
+
var import_react138 = require("@emotion/react");
|
|
21729
|
+
var emptyParameterShell = import_react138.css`
|
|
21609
21730
|
border-radius: var(--rounded-sm);
|
|
21610
21731
|
flex-grow: 1;
|
|
21611
21732
|
position: relative;
|
|
21612
21733
|
max-width: 100%;
|
|
21613
21734
|
`;
|
|
21614
|
-
var emptyParameterShellText =
|
|
21735
|
+
var emptyParameterShellText = import_react138.css`
|
|
21615
21736
|
background: var(--brand-secondary-6);
|
|
21616
21737
|
border-radius: var(--rounded-sm);
|
|
21617
21738
|
padding: var(--spacing-sm);
|
|
@@ -21619,7 +21740,7 @@ var emptyParameterShellText = import_react136.css`
|
|
|
21619
21740
|
font-size: var(--fs-sm);
|
|
21620
21741
|
margin: 0;
|
|
21621
21742
|
`;
|
|
21622
|
-
var overrideMarker =
|
|
21743
|
+
var overrideMarker = import_react138.css`
|
|
21623
21744
|
border-radius: var(--rounded-sm);
|
|
21624
21745
|
border: 10px solid var(--gray-300);
|
|
21625
21746
|
border-left-color: transparent;
|
|
@@ -21630,7 +21751,7 @@ var overrideMarker = import_react136.css`
|
|
|
21630
21751
|
`;
|
|
21631
21752
|
|
|
21632
21753
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
21633
|
-
var
|
|
21754
|
+
var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
|
|
21634
21755
|
var extractParameterProps = (props) => {
|
|
21635
21756
|
const {
|
|
21636
21757
|
id,
|
|
@@ -21690,36 +21811,36 @@ var ParameterShell = ({
|
|
|
21690
21811
|
isParameterGroup = false,
|
|
21691
21812
|
...props
|
|
21692
21813
|
}) => {
|
|
21693
|
-
const [manualErrorMessage, setManualErrorMessage] = (0,
|
|
21814
|
+
const [manualErrorMessage, setManualErrorMessage] = (0, import_react140.useState)(void 0);
|
|
21694
21815
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
21695
21816
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
21696
|
-
return /* @__PURE__ */ (0,
|
|
21697
|
-
hiddenLabel || title2 ? null : /* @__PURE__ */ (0,
|
|
21817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: inputContainer2, ...props, id, children: [
|
|
21818
|
+
hiddenLabel || title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(ParameterLabel, { id, css: labelText2, children: [
|
|
21698
21819
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
21699
21820
|
label,
|
|
21700
21821
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
21701
21822
|
] }),
|
|
21702
|
-
!title2 ? null : /* @__PURE__ */ (0,
|
|
21823
|
+
!title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(ParameterLabel, { id, asSpan: true, children: [
|
|
21703
21824
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
21704
21825
|
title2,
|
|
21705
21826
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
21706
21827
|
] }),
|
|
21707
|
-
/* @__PURE__ */ (0,
|
|
21708
|
-
actionItems ? /* @__PURE__ */ (0,
|
|
21828
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: inputWrapper, children: [
|
|
21829
|
+
actionItems ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
21709
21830
|
"div",
|
|
21710
21831
|
{
|
|
21711
21832
|
css: [
|
|
21712
21833
|
inputMenu,
|
|
21713
21834
|
inputActionItems,
|
|
21714
|
-
menuItems ?
|
|
21835
|
+
menuItems ? import_react139.css`
|
|
21715
21836
|
right: var(--spacing-md);
|
|
21716
21837
|
` : void 0
|
|
21717
21838
|
],
|
|
21718
21839
|
children: actionItems
|
|
21719
21840
|
}
|
|
21720
21841
|
) : null,
|
|
21721
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
21722
|
-
/* @__PURE__ */ (0,
|
|
21842
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
21843
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
21723
21844
|
ParameterShellContext.Provider,
|
|
21724
21845
|
{
|
|
21725
21846
|
value: {
|
|
@@ -21729,14 +21850,14 @@ var ParameterShell = ({
|
|
|
21729
21850
|
errorMessage: errorMessaging,
|
|
21730
21851
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
21731
21852
|
},
|
|
21732
|
-
children: isParameterGroup ? /* @__PURE__ */ (0,
|
|
21853
|
+
children: isParameterGroup ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(ParameterShellPlaceholder, { children: [
|
|
21733
21854
|
children,
|
|
21734
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0,
|
|
21855
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
21735
21856
|
] })
|
|
21736
21857
|
}
|
|
21737
21858
|
)
|
|
21738
21859
|
] }),
|
|
21739
|
-
/* @__PURE__ */ (0,
|
|
21860
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
21740
21861
|
FieldMessage,
|
|
21741
21862
|
{
|
|
21742
21863
|
helperMessageTestId: captionTestId,
|
|
@@ -21750,27 +21871,27 @@ var ParameterShell = ({
|
|
|
21750
21871
|
] });
|
|
21751
21872
|
};
|
|
21752
21873
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
21753
|
-
return /* @__PURE__ */ (0,
|
|
21874
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { css: emptyParameterShell, children });
|
|
21754
21875
|
};
|
|
21755
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0,
|
|
21876
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
21756
21877
|
|
|
21757
21878
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
21758
|
-
var
|
|
21759
|
-
var ParameterImage = (0,
|
|
21879
|
+
var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
|
|
21880
|
+
var ParameterImage = (0, import_react141.forwardRef)(
|
|
21760
21881
|
({ children, ...props }, ref) => {
|
|
21761
21882
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21762
|
-
return /* @__PURE__ */ (0,
|
|
21763
|
-
/* @__PURE__ */ (0,
|
|
21883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
21884
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterImageInner, { ref, ...innerProps }),
|
|
21764
21885
|
children
|
|
21765
21886
|
] });
|
|
21766
21887
|
}
|
|
21767
21888
|
);
|
|
21768
|
-
var ParameterImageInner = (0,
|
|
21889
|
+
var ParameterImageInner = (0, import_react141.forwardRef)((props, ref) => {
|
|
21769
21890
|
const { value } = props;
|
|
21770
21891
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
21771
|
-
const deferredValue = (0,
|
|
21772
|
-
return /* @__PURE__ */ (0,
|
|
21773
|
-
/* @__PURE__ */ (0,
|
|
21892
|
+
const deferredValue = (0, import_react141.useDeferredValue)(value);
|
|
21893
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
|
|
21894
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
21774
21895
|
"input",
|
|
21775
21896
|
{
|
|
21776
21897
|
css: input3,
|
|
@@ -21782,22 +21903,22 @@ var ParameterImageInner = (0, import_react139.forwardRef)((props, ref) => {
|
|
|
21782
21903
|
...props
|
|
21783
21904
|
}
|
|
21784
21905
|
),
|
|
21785
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0,
|
|
21906
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterImagePreview, { imageSrc: deferredValue })
|
|
21786
21907
|
] });
|
|
21787
21908
|
});
|
|
21788
21909
|
|
|
21789
21910
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
21790
21911
|
init_emotion_jsx_shim();
|
|
21791
|
-
var
|
|
21792
|
-
var
|
|
21793
|
-
var ParameterInput = (0,
|
|
21912
|
+
var import_react142 = require("react");
|
|
21913
|
+
var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
|
|
21914
|
+
var ParameterInput = (0, import_react142.forwardRef)((props, ref) => {
|
|
21794
21915
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21795
|
-
return /* @__PURE__ */ (0,
|
|
21916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ParameterInputInner, { ref, ...innerProps }) });
|
|
21796
21917
|
});
|
|
21797
|
-
var ParameterInputInner = (0,
|
|
21918
|
+
var ParameterInputInner = (0, import_react142.forwardRef)(
|
|
21798
21919
|
({ ...props }, ref) => {
|
|
21799
21920
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
21800
|
-
return /* @__PURE__ */ (0,
|
|
21921
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
21801
21922
|
"input",
|
|
21802
21923
|
{
|
|
21803
21924
|
css: input3,
|
|
@@ -21814,19 +21935,19 @@ var ParameterInputInner = (0, import_react140.forwardRef)(
|
|
|
21814
21935
|
|
|
21815
21936
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
21816
21937
|
init_emotion_jsx_shim();
|
|
21817
|
-
var
|
|
21818
|
-
var
|
|
21819
|
-
var ParameterLink = (0,
|
|
21938
|
+
var import_react143 = require("react");
|
|
21939
|
+
var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
|
|
21940
|
+
var ParameterLink = (0, import_react143.forwardRef)(
|
|
21820
21941
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
21821
21942
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21822
|
-
return /* @__PURE__ */ (0,
|
|
21943
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
21823
21944
|
ParameterShell,
|
|
21824
21945
|
{
|
|
21825
21946
|
"data-testid": "link-parameter-editor",
|
|
21826
21947
|
...shellProps,
|
|
21827
21948
|
label: innerProps.value ? shellProps.label : "",
|
|
21828
21949
|
title: !innerProps.value ? shellProps.label : void 0,
|
|
21829
|
-
children: /* @__PURE__ */ (0,
|
|
21950
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
21830
21951
|
ParameterLinkInner,
|
|
21831
21952
|
{
|
|
21832
21953
|
onConnectLink,
|
|
@@ -21839,13 +21960,13 @@ var ParameterLink = (0, import_react141.forwardRef)(
|
|
|
21839
21960
|
);
|
|
21840
21961
|
}
|
|
21841
21962
|
);
|
|
21842
|
-
var ParameterLinkInner = (0,
|
|
21963
|
+
var ParameterLinkInner = (0, import_react143.forwardRef)(
|
|
21843
21964
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
21844
21965
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
21845
21966
|
if (!props.value)
|
|
21846
|
-
return /* @__PURE__ */ (0,
|
|
21847
|
-
return /* @__PURE__ */ (0,
|
|
21848
|
-
/* @__PURE__ */ (0,
|
|
21967
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
21968
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: inputWrapper, children: [
|
|
21969
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
21849
21970
|
"input",
|
|
21850
21971
|
{
|
|
21851
21972
|
type: "text",
|
|
@@ -21857,8 +21978,8 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
|
|
|
21857
21978
|
...props
|
|
21858
21979
|
}
|
|
21859
21980
|
),
|
|
21860
|
-
/* @__PURE__ */ (0,
|
|
21861
|
-
/* @__PURE__ */ (0,
|
|
21981
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: linkParameterControls, children: [
|
|
21982
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
21862
21983
|
"button",
|
|
21863
21984
|
{
|
|
21864
21985
|
type: "button",
|
|
@@ -21869,7 +21990,7 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
|
|
|
21869
21990
|
children: "edit"
|
|
21870
21991
|
}
|
|
21871
21992
|
),
|
|
21872
|
-
externalLink ? /* @__PURE__ */ (0,
|
|
21993
|
+
externalLink ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
21873
21994
|
"a",
|
|
21874
21995
|
{
|
|
21875
21996
|
href: externalLink,
|
|
@@ -21877,7 +21998,7 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
|
|
|
21877
21998
|
title: "Open link in new tab",
|
|
21878
21999
|
target: "_blank",
|
|
21879
22000
|
rel: "noopener noreferrer",
|
|
21880
|
-
children: /* @__PURE__ */ (0,
|
|
22001
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
21881
22002
|
}
|
|
21882
22003
|
) : null
|
|
21883
22004
|
] })
|
|
@@ -21887,15 +22008,15 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
|
|
|
21887
22008
|
|
|
21888
22009
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
21889
22010
|
init_emotion_jsx_shim();
|
|
21890
|
-
var
|
|
22011
|
+
var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
|
|
21891
22012
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
21892
22013
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21893
|
-
return /* @__PURE__ */ (0,
|
|
22014
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
21894
22015
|
};
|
|
21895
22016
|
var ParameterMultiSelectInner = (props) => {
|
|
21896
22017
|
var _a;
|
|
21897
22018
|
const { id, label } = useParameterShell();
|
|
21898
|
-
return /* @__PURE__ */ (0,
|
|
22019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
21899
22020
|
InputComboBox,
|
|
21900
22021
|
{
|
|
21901
22022
|
menuPortalTarget: document.body,
|
|
@@ -21946,7 +22067,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
21946
22067
|
|
|
21947
22068
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
21948
22069
|
init_emotion_jsx_shim();
|
|
21949
|
-
var
|
|
22070
|
+
var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
|
|
21950
22071
|
var ParameterNameAndPublicIdInput = ({
|
|
21951
22072
|
id,
|
|
21952
22073
|
onBlur,
|
|
@@ -21972,8 +22093,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
21972
22093
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
21973
22094
|
};
|
|
21974
22095
|
autoFocus == null ? void 0 : autoFocus();
|
|
21975
|
-
return /* @__PURE__ */ (0,
|
|
21976
|
-
/* @__PURE__ */ (0,
|
|
22096
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
|
|
22097
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
21977
22098
|
ParameterInput,
|
|
21978
22099
|
{
|
|
21979
22100
|
id: nameIdField,
|
|
@@ -21992,7 +22113,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
21992
22113
|
value: values[nameIdField]
|
|
21993
22114
|
}
|
|
21994
22115
|
),
|
|
21995
|
-
/* @__PURE__ */ (0,
|
|
22116
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
21996
22117
|
ParameterInput,
|
|
21997
22118
|
{
|
|
21998
22119
|
id: publicIdFieldName,
|
|
@@ -22006,11 +22127,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
22006
22127
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
22007
22128
|
placeholder: publicIdPlaceholderText,
|
|
22008
22129
|
errorMessage: publicIdError,
|
|
22009
|
-
menuItems: /* @__PURE__ */ (0,
|
|
22130
|
+
menuItems: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
22010
22131
|
MenuItem,
|
|
22011
22132
|
{
|
|
22012
22133
|
disabled: !values[publicIdFieldName],
|
|
22013
|
-
icon: /* @__PURE__ */ (0,
|
|
22134
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
22014
22135
|
onClick: handleCopyPidFieldValue,
|
|
22015
22136
|
children: "Copy"
|
|
22016
22137
|
}
|
|
@@ -22018,13 +22139,13 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
22018
22139
|
value: values[publicIdFieldName]
|
|
22019
22140
|
}
|
|
22020
22141
|
),
|
|
22021
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0,
|
|
22142
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
22022
22143
|
] });
|
|
22023
22144
|
};
|
|
22024
22145
|
|
|
22025
22146
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22026
22147
|
init_emotion_jsx_shim();
|
|
22027
|
-
var
|
|
22148
|
+
var import_react150 = require("@emotion/react");
|
|
22028
22149
|
var import_list3 = require("@lexical/list");
|
|
22029
22150
|
var import_markdown = require("@lexical/markdown");
|
|
22030
22151
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
@@ -22131,7 +22252,7 @@ var getLabelForElement = (type) => {
|
|
|
22131
22252
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22132
22253
|
var import_fast_equals2 = require("fast-equals");
|
|
22133
22254
|
var import_lexical6 = require("lexical");
|
|
22134
|
-
var
|
|
22255
|
+
var import_react151 = require("react");
|
|
22135
22256
|
|
|
22136
22257
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
22137
22258
|
init_emotion_jsx_shim();
|
|
@@ -22152,13 +22273,13 @@ CustomCodeNode.importDOM = function() {
|
|
|
22152
22273
|
// src/components/ParameterInputs/rich-text/DisableStylesPlugin.ts
|
|
22153
22274
|
init_emotion_jsx_shim();
|
|
22154
22275
|
var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
22155
|
-
var
|
|
22276
|
+
var import_utils5 = require("@lexical/utils");
|
|
22156
22277
|
var import_lexical = require("lexical");
|
|
22157
|
-
var
|
|
22278
|
+
var import_react144 = require("react");
|
|
22158
22279
|
function DisableStylesPlugin() {
|
|
22159
22280
|
const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
|
|
22160
|
-
(0,
|
|
22161
|
-
return (0,
|
|
22281
|
+
(0, import_react144.useEffect)(() => {
|
|
22282
|
+
return (0, import_utils5.mergeRegister)(
|
|
22162
22283
|
// Disable text alignment on paragraph nodes
|
|
22163
22284
|
editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
|
|
22164
22285
|
if (node.getFormatType() !== "") {
|
|
@@ -22352,13 +22473,13 @@ var codeElement = import_css2.css`
|
|
|
22352
22473
|
|
|
22353
22474
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
22354
22475
|
init_emotion_jsx_shim();
|
|
22355
|
-
var
|
|
22476
|
+
var import_react145 = require("@emotion/react");
|
|
22356
22477
|
var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
|
|
22357
22478
|
var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
|
|
22358
|
-
var
|
|
22479
|
+
var import_utils6 = require("@lexical/utils");
|
|
22359
22480
|
var import_fast_equals = require("fast-equals");
|
|
22360
22481
|
var import_lexical3 = require("lexical");
|
|
22361
|
-
var
|
|
22482
|
+
var import_react146 = require("react");
|
|
22362
22483
|
|
|
22363
22484
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
22364
22485
|
init_emotion_jsx_shim();
|
|
@@ -22396,7 +22517,7 @@ var getSelectedNode = (selection) => {
|
|
|
22396
22517
|
};
|
|
22397
22518
|
|
|
22398
22519
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
22399
|
-
var
|
|
22520
|
+
var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
|
|
22400
22521
|
var isProjectMapLinkValue = (value) => {
|
|
22401
22522
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
22402
22523
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -22419,7 +22540,7 @@ var guessLinkTypeFromPath = (path) => {
|
|
|
22419
22540
|
};
|
|
22420
22541
|
function convertAnchorElement(domNode) {
|
|
22421
22542
|
let node = null;
|
|
22422
|
-
if (!(0,
|
|
22543
|
+
if (!(0, import_utils6.isHTMLAnchorElement)(domNode)) {
|
|
22423
22544
|
return { node };
|
|
22424
22545
|
}
|
|
22425
22546
|
const textContent = domNode.textContent;
|
|
@@ -22528,7 +22649,7 @@ var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
|
|
|
22528
22649
|
element.setAttribute("href", `mailto:${this.__link.path}`);
|
|
22529
22650
|
}
|
|
22530
22651
|
}
|
|
22531
|
-
(0,
|
|
22652
|
+
(0, import_utils6.addClassNamesToElement)(element, config.theme.link);
|
|
22532
22653
|
return element;
|
|
22533
22654
|
}
|
|
22534
22655
|
updateDOM(prevNode, a) {
|
|
@@ -22683,16 +22804,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical3.createCommand)(
|
|
|
22683
22804
|
);
|
|
22684
22805
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
22685
22806
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
22686
|
-
var linkPopover =
|
|
22807
|
+
var linkPopover = import_react145.css`
|
|
22687
22808
|
position: absolute;
|
|
22688
22809
|
z-index: 5;
|
|
22689
22810
|
`;
|
|
22690
|
-
var linkPopoverContainer =
|
|
22811
|
+
var linkPopoverContainer = import_react145.css`
|
|
22691
22812
|
${Popover()};
|
|
22692
22813
|
align-items: center;
|
|
22693
22814
|
display: flex;
|
|
22694
22815
|
`;
|
|
22695
|
-
var linkPopoverAnchor =
|
|
22816
|
+
var linkPopoverAnchor = import_react145.css`
|
|
22696
22817
|
${link}
|
|
22697
22818
|
${linkColorDefault}
|
|
22698
22819
|
`;
|
|
@@ -22701,21 +22822,21 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22701
22822
|
return path;
|
|
22702
22823
|
};
|
|
22703
22824
|
const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
|
|
22704
|
-
const [linkPopoverState, setLinkPopoverState] = (0,
|
|
22705
|
-
const linkPopoverElRef = (0,
|
|
22706
|
-
const [isEditorFocused, setIsEditorFocused] = (0,
|
|
22707
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0,
|
|
22708
|
-
(0,
|
|
22825
|
+
const [linkPopoverState, setLinkPopoverState] = (0, import_react146.useState)();
|
|
22826
|
+
const linkPopoverElRef = (0, import_react146.useRef)(null);
|
|
22827
|
+
const [isEditorFocused, setIsEditorFocused] = (0, import_react146.useState)(false);
|
|
22828
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react146.useState)(false);
|
|
22829
|
+
(0, import_react146.useEffect)(() => {
|
|
22709
22830
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
22710
22831
|
setLinkPopoverState(void 0);
|
|
22711
22832
|
return;
|
|
22712
22833
|
}
|
|
22713
22834
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
22714
|
-
(0,
|
|
22835
|
+
(0, import_react146.useEffect)(() => {
|
|
22715
22836
|
if (!editor.hasNodes([LinkNode])) {
|
|
22716
22837
|
throw new Error("LinkNode not registered on editor");
|
|
22717
22838
|
}
|
|
22718
|
-
return (0,
|
|
22839
|
+
return (0, import_utils6.mergeRegister)(
|
|
22719
22840
|
editor.registerCommand(
|
|
22720
22841
|
UPSERT_LINK_NODE_COMMAND,
|
|
22721
22842
|
(payload) => {
|
|
@@ -22780,7 +22901,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22780
22901
|
)
|
|
22781
22902
|
);
|
|
22782
22903
|
}, [editor, onConnectLink]);
|
|
22783
|
-
const maybeShowLinkToolbar = (0,
|
|
22904
|
+
const maybeShowLinkToolbar = (0, import_react146.useCallback)(() => {
|
|
22784
22905
|
if (!editor.isEditable()) {
|
|
22785
22906
|
return;
|
|
22786
22907
|
}
|
|
@@ -22812,7 +22933,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22812
22933
|
}
|
|
22813
22934
|
});
|
|
22814
22935
|
}, [editor]);
|
|
22815
|
-
(0,
|
|
22936
|
+
(0, import_react146.useEffect)(() => {
|
|
22816
22937
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
22817
22938
|
requestAnimationFrame(() => {
|
|
22818
22939
|
editorState.read(() => {
|
|
@@ -22839,8 +22960,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22839
22960
|
});
|
|
22840
22961
|
});
|
|
22841
22962
|
};
|
|
22842
|
-
return /* @__PURE__ */ (0,
|
|
22843
|
-
/* @__PURE__ */ (0,
|
|
22963
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
|
|
22964
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
22844
22965
|
import_LexicalNodeEventPlugin.NodeEventPlugin,
|
|
22845
22966
|
{
|
|
22846
22967
|
nodeType: LinkNode,
|
|
@@ -22850,7 +22971,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22850
22971
|
}
|
|
22851
22972
|
}
|
|
22852
22973
|
),
|
|
22853
|
-
linkPopoverState ? /* @__PURE__ */ (0,
|
|
22974
|
+
linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
22854
22975
|
"div",
|
|
22855
22976
|
{
|
|
22856
22977
|
css: linkPopover,
|
|
@@ -22859,8 +22980,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22859
22980
|
top: linkPopoverState.position.y
|
|
22860
22981
|
},
|
|
22861
22982
|
ref: linkPopoverElRef,
|
|
22862
|
-
children: /* @__PURE__ */ (0,
|
|
22863
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0,
|
|
22983
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: linkPopoverContainer, children: [
|
|
22984
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
22864
22985
|
"a",
|
|
22865
22986
|
{
|
|
22866
22987
|
href: parsePath(
|
|
@@ -22872,7 +22993,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22872
22993
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
22873
22994
|
}
|
|
22874
22995
|
),
|
|
22875
|
-
/* @__PURE__ */ (0,
|
|
22996
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
22876
22997
|
Button,
|
|
22877
22998
|
{
|
|
22878
22999
|
size: "xs",
|
|
@@ -22880,7 +23001,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
22880
23001
|
onEditLinkNode(linkPopoverState.node);
|
|
22881
23002
|
},
|
|
22882
23003
|
buttonType: "ghost",
|
|
22883
|
-
children: /* @__PURE__ */ (0,
|
|
23004
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
22884
23005
|
}
|
|
22885
23006
|
)
|
|
22886
23007
|
] })
|
|
@@ -22900,8 +23021,8 @@ var import_list = require("@lexical/list");
|
|
|
22900
23021
|
var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
|
|
22901
23022
|
var import_LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
|
|
22902
23023
|
var import_lexical4 = require("lexical");
|
|
22903
|
-
var
|
|
22904
|
-
var
|
|
23024
|
+
var import_react147 = require("react");
|
|
23025
|
+
var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
|
|
22905
23026
|
function isIndentPermitted(maxDepth) {
|
|
22906
23027
|
const selection = (0, import_lexical4.$getSelection)();
|
|
22907
23028
|
if (!(0, import_lexical4.$isRangeSelection)(selection)) {
|
|
@@ -22924,29 +23045,29 @@ function isIndentPermitted(maxDepth) {
|
|
|
22924
23045
|
}
|
|
22925
23046
|
function ListIndentPlugin({ maxDepth }) {
|
|
22926
23047
|
const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
|
|
22927
|
-
(0,
|
|
23048
|
+
(0, import_react147.useEffect)(() => {
|
|
22928
23049
|
return editor.registerCommand(
|
|
22929
23050
|
import_lexical4.INDENT_CONTENT_COMMAND,
|
|
22930
23051
|
() => !isIndentPermitted(maxDepth),
|
|
22931
23052
|
import_lexical4.COMMAND_PRIORITY_CRITICAL
|
|
22932
23053
|
);
|
|
22933
23054
|
}, [editor, maxDepth]);
|
|
22934
|
-
return /* @__PURE__ */ (0,
|
|
23055
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {});
|
|
22935
23056
|
}
|
|
22936
23057
|
|
|
22937
23058
|
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
22938
23059
|
init_emotion_jsx_shim();
|
|
22939
|
-
var
|
|
23060
|
+
var import_react148 = require("@emotion/react");
|
|
22940
23061
|
var import_code2 = require("@lexical/code");
|
|
22941
23062
|
var import_list2 = require("@lexical/list");
|
|
22942
23063
|
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
22943
23064
|
var import_rich_text = require("@lexical/rich-text");
|
|
22944
23065
|
var import_selection2 = require("@lexical/selection");
|
|
22945
|
-
var
|
|
23066
|
+
var import_utils9 = require("@lexical/utils");
|
|
22946
23067
|
var import_lexical5 = require("lexical");
|
|
22947
|
-
var
|
|
22948
|
-
var
|
|
22949
|
-
var toolbar =
|
|
23068
|
+
var import_react149 = require("react");
|
|
23069
|
+
var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
|
|
23070
|
+
var toolbar = import_react148.css`
|
|
22950
23071
|
background: var(--gray-50);
|
|
22951
23072
|
border-radius: var(--rounded-base);
|
|
22952
23073
|
display: flex;
|
|
@@ -22958,7 +23079,7 @@ var toolbar = import_react146.css`
|
|
|
22958
23079
|
top: calc(var(--spacing-sm) * -2);
|
|
22959
23080
|
z-index: 10;
|
|
22960
23081
|
`;
|
|
22961
|
-
var toolbarGroup =
|
|
23082
|
+
var toolbarGroup = import_react148.css`
|
|
22962
23083
|
display: flex;
|
|
22963
23084
|
gap: var(--spacing-xs);
|
|
22964
23085
|
position: relative;
|
|
@@ -22974,7 +23095,7 @@ var toolbarGroup = import_react146.css`
|
|
|
22974
23095
|
width: 1px;
|
|
22975
23096
|
}
|
|
22976
23097
|
`;
|
|
22977
|
-
var richTextToolbarButton =
|
|
23098
|
+
var richTextToolbarButton = import_react148.css`
|
|
22978
23099
|
align-items: center;
|
|
22979
23100
|
appearance: none;
|
|
22980
23101
|
border: 0;
|
|
@@ -22987,17 +23108,17 @@ var richTextToolbarButton = import_react146.css`
|
|
|
22987
23108
|
min-width: 32px;
|
|
22988
23109
|
padding: 0 var(--spacing-sm);
|
|
22989
23110
|
`;
|
|
22990
|
-
var richTextToolbarButtonActive =
|
|
23111
|
+
var richTextToolbarButtonActive = import_react148.css`
|
|
22991
23112
|
background: var(--gray-200);
|
|
22992
23113
|
`;
|
|
22993
|
-
var toolbarIcon =
|
|
23114
|
+
var toolbarIcon = import_react148.css`
|
|
22994
23115
|
color: inherit;
|
|
22995
23116
|
`;
|
|
22996
|
-
var toolbarChevron =
|
|
23117
|
+
var toolbarChevron = import_react148.css`
|
|
22997
23118
|
margin-left: var(--spacing-xs);
|
|
22998
23119
|
`;
|
|
22999
23120
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
23000
|
-
return /* @__PURE__ */ (0,
|
|
23121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
23001
23122
|
};
|
|
23002
23123
|
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
23003
23124
|
["bold", "format-bold"],
|
|
@@ -23048,7 +23169,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23048
23169
|
}
|
|
23049
23170
|
});
|
|
23050
23171
|
};
|
|
23051
|
-
const updateToolbar = (0,
|
|
23172
|
+
const updateToolbar = (0, import_react149.useCallback)(() => {
|
|
23052
23173
|
const selection = (0, import_lexical5.$getSelection)();
|
|
23053
23174
|
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
23054
23175
|
return;
|
|
@@ -23061,7 +23182,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23061
23182
|
}
|
|
23062
23183
|
setActiveFormats(newActiveFormats);
|
|
23063
23184
|
const anchorNode = selection.anchor.getNode();
|
|
23064
|
-
let element = anchorNode.getKey() === "root" ? anchorNode : (0,
|
|
23185
|
+
let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils9.$findMatchingParent)(anchorNode, (e) => {
|
|
23065
23186
|
const parent = e.getParent();
|
|
23066
23187
|
return parent !== null && (0, import_lexical5.$isRootOrShadowRoot)(parent);
|
|
23067
23188
|
});
|
|
@@ -23072,7 +23193,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23072
23193
|
const elementDOM = editor.getElementByKey(elementKey);
|
|
23073
23194
|
if (elementDOM !== null) {
|
|
23074
23195
|
if ((0, import_list2.$isListNode)(element)) {
|
|
23075
|
-
const parentList = (0,
|
|
23196
|
+
const parentList = (0, import_utils9.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
|
|
23076
23197
|
const type = parentList ? parentList.getListType() : element.getListType();
|
|
23077
23198
|
setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
|
|
23078
23199
|
} else {
|
|
@@ -23087,7 +23208,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23087
23208
|
setIsLink(false);
|
|
23088
23209
|
}
|
|
23089
23210
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
23090
|
-
(0,
|
|
23211
|
+
(0, import_react149.useEffect)(() => {
|
|
23091
23212
|
return editor.registerCommand(
|
|
23092
23213
|
import_lexical5.SELECTION_CHANGE_COMMAND,
|
|
23093
23214
|
(_payload) => {
|
|
@@ -23097,7 +23218,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23097
23218
|
import_lexical5.COMMAND_PRIORITY_CRITICAL
|
|
23098
23219
|
);
|
|
23099
23220
|
}, [editor, updateToolbar]);
|
|
23100
|
-
(0,
|
|
23221
|
+
(0, import_react149.useEffect)(() => {
|
|
23101
23222
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
23102
23223
|
requestAnimationFrame(() => {
|
|
23103
23224
|
editorState.read(() => {
|
|
@@ -23106,15 +23227,15 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23106
23227
|
});
|
|
23107
23228
|
});
|
|
23108
23229
|
}, [editor, updateToolbar]);
|
|
23109
|
-
return /* @__PURE__ */ (0,
|
|
23110
|
-
/* @__PURE__ */ (0,
|
|
23230
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbar, children: [
|
|
23231
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
|
|
23111
23232
|
Menu,
|
|
23112
23233
|
{
|
|
23113
23234
|
menuLabel: "Elements",
|
|
23114
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
23235
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
|
|
23115
23236
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
23116
23237
|
" ",
|
|
23117
|
-
/* @__PURE__ */ (0,
|
|
23238
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
23118
23239
|
] }),
|
|
23119
23240
|
placement: "bottom-start",
|
|
23120
23241
|
children: [
|
|
@@ -23124,7 +23245,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23124
23245
|
type: "paragraph"
|
|
23125
23246
|
},
|
|
23126
23247
|
...visibleTextualElements
|
|
23127
|
-
].map((element) => /* @__PURE__ */ (0,
|
|
23248
|
+
].map((element) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23128
23249
|
MenuItem,
|
|
23129
23250
|
{
|
|
23130
23251
|
onClick: () => {
|
|
@@ -23134,12 +23255,12 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23134
23255
|
},
|
|
23135
23256
|
element.type
|
|
23136
23257
|
)),
|
|
23137
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0,
|
|
23258
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
23138
23259
|
]
|
|
23139
23260
|
}
|
|
23140
23261
|
),
|
|
23141
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
23142
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0,
|
|
23262
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
|
|
23263
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23143
23264
|
"button",
|
|
23144
23265
|
{
|
|
23145
23266
|
onClick: () => {
|
|
@@ -23149,16 +23270,16 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23149
23270
|
richTextToolbarButton,
|
|
23150
23271
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
23151
23272
|
],
|
|
23152
|
-
children: /* @__PURE__ */ (0,
|
|
23273
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
23153
23274
|
}
|
|
23154
23275
|
) }, format.type)),
|
|
23155
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
23276
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23156
23277
|
Menu,
|
|
23157
23278
|
{
|
|
23158
23279
|
menuLabel: "Alternative text styles",
|
|
23159
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
23280
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
23160
23281
|
placement: "bottom-start",
|
|
23161
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0,
|
|
23282
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23162
23283
|
MenuItem,
|
|
23163
23284
|
{
|
|
23164
23285
|
onClick: () => {
|
|
@@ -23171,19 +23292,19 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23171
23292
|
}
|
|
23172
23293
|
) : null
|
|
23173
23294
|
] }) : null,
|
|
23174
|
-
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0,
|
|
23175
|
-
linkElementVisible ? /* @__PURE__ */ (0,
|
|
23295
|
+
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
|
|
23296
|
+
linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23176
23297
|
"button",
|
|
23177
23298
|
{
|
|
23178
23299
|
onClick: () => {
|
|
23179
23300
|
isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
23180
23301
|
},
|
|
23181
23302
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
23182
|
-
children: /* @__PURE__ */ (0,
|
|
23303
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "link" })
|
|
23183
23304
|
}
|
|
23184
23305
|
) }) : null,
|
|
23185
|
-
visibleLists.size > 0 ? /* @__PURE__ */ (0,
|
|
23186
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0,
|
|
23306
|
+
visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
|
|
23307
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23187
23308
|
"button",
|
|
23188
23309
|
{
|
|
23189
23310
|
onClick: () => {
|
|
@@ -23193,10 +23314,10 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23193
23314
|
richTextToolbarButton,
|
|
23194
23315
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
23195
23316
|
],
|
|
23196
|
-
children: /* @__PURE__ */ (0,
|
|
23317
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
|
|
23197
23318
|
}
|
|
23198
23319
|
) }) : null,
|
|
23199
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */ (0,
|
|
23320
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23200
23321
|
"button",
|
|
23201
23322
|
{
|
|
23202
23323
|
onClick: () => {
|
|
@@ -23206,57 +23327,57 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
23206
23327
|
richTextToolbarButton,
|
|
23207
23328
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
23208
23329
|
],
|
|
23209
|
-
children: /* @__PURE__ */ (0,
|
|
23330
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
23210
23331
|
}
|
|
23211
23332
|
) }) : null
|
|
23212
23333
|
] }) : null,
|
|
23213
|
-
quoteElementVisible ? /* @__PURE__ */ (0,
|
|
23334
|
+
quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23214
23335
|
"button",
|
|
23215
23336
|
{
|
|
23216
23337
|
onClick: () => {
|
|
23217
23338
|
activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
|
|
23218
23339
|
},
|
|
23219
23340
|
css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
|
|
23220
|
-
children: /* @__PURE__ */ (0,
|
|
23341
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "quote" })
|
|
23221
23342
|
}
|
|
23222
23343
|
) }) : null,
|
|
23223
|
-
codeElementVisible ? /* @__PURE__ */ (0,
|
|
23344
|
+
codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23224
23345
|
"button",
|
|
23225
23346
|
{
|
|
23226
23347
|
onClick: () => {
|
|
23227
23348
|
activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
|
|
23228
23349
|
},
|
|
23229
23350
|
css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
|
|
23230
|
-
children: /* @__PURE__ */ (0,
|
|
23351
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
|
|
23231
23352
|
}
|
|
23232
23353
|
) }) : null
|
|
23233
23354
|
] }) : null,
|
|
23234
|
-
customControls ? /* @__PURE__ */ (0,
|
|
23355
|
+
customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: toolbarGroup, children: customControls }) : null
|
|
23235
23356
|
] });
|
|
23236
23357
|
};
|
|
23237
23358
|
var RichTextToolbar_default = RichTextToolbar;
|
|
23238
23359
|
var useRichTextToolbarState = ({ config }) => {
|
|
23239
23360
|
var _a;
|
|
23240
|
-
const enabledBuiltInFormats = (0,
|
|
23361
|
+
const enabledBuiltInFormats = (0, import_react149.useMemo)(() => {
|
|
23241
23362
|
return richTextBuiltInFormats.filter((format) => {
|
|
23242
23363
|
var _a2, _b;
|
|
23243
23364
|
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
23244
23365
|
});
|
|
23245
23366
|
}, [config]);
|
|
23246
|
-
const enabledBuiltInElements = (0,
|
|
23367
|
+
const enabledBuiltInElements = (0, import_react149.useMemo)(() => {
|
|
23247
23368
|
return richTextBuiltInElements.filter((element) => {
|
|
23248
23369
|
var _a2, _b;
|
|
23249
23370
|
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
23250
23371
|
});
|
|
23251
23372
|
}, [config]);
|
|
23252
|
-
const enabledBuiltInFormatsWithIcon = (0,
|
|
23373
|
+
const enabledBuiltInFormatsWithIcon = (0, import_react149.useMemo)(() => {
|
|
23253
23374
|
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
23254
23375
|
}, [enabledBuiltInFormats]);
|
|
23255
23376
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
23256
23377
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
23257
23378
|
);
|
|
23258
|
-
const [activeFormats, setActiveFormats] = (0,
|
|
23259
|
-
const visibleFormatsWithIcon = (0,
|
|
23379
|
+
const [activeFormats, setActiveFormats] = (0, import_react149.useState)([]);
|
|
23380
|
+
const visibleFormatsWithIcon = (0, import_react149.useMemo)(() => {
|
|
23260
23381
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
23261
23382
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
23262
23383
|
visibleFormats.add(type);
|
|
@@ -23266,7 +23387,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23266
23387
|
});
|
|
23267
23388
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
23268
23389
|
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
23269
|
-
const visibleFormatsWithoutIcon = (0,
|
|
23390
|
+
const visibleFormatsWithoutIcon = (0, import_react149.useMemo)(() => {
|
|
23270
23391
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
23271
23392
|
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
23272
23393
|
visibleFormats.add(type);
|
|
@@ -23276,11 +23397,11 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23276
23397
|
});
|
|
23277
23398
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
23278
23399
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
23279
|
-
const [activeElement, setActiveElement] = (0,
|
|
23400
|
+
const [activeElement, setActiveElement] = (0, import_react149.useState)("paragraph");
|
|
23280
23401
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
23281
23402
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
23282
23403
|
);
|
|
23283
|
-
const visibleTextualElements = (0,
|
|
23404
|
+
const visibleTextualElements = (0, import_react149.useMemo)(() => {
|
|
23284
23405
|
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
23285
23406
|
return enabledTextualElements;
|
|
23286
23407
|
}
|
|
@@ -23291,24 +23412,24 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23291
23412
|
}
|
|
23292
23413
|
);
|
|
23293
23414
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
23294
|
-
const [isLink, setIsLink] = (0,
|
|
23295
|
-
const linkElementVisible = (0,
|
|
23415
|
+
const [isLink, setIsLink] = (0, import_react149.useState)(false);
|
|
23416
|
+
const linkElementVisible = (0, import_react149.useMemo)(() => {
|
|
23296
23417
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
23297
23418
|
}, [isLink, enabledBuiltInElements]);
|
|
23298
|
-
const visibleLists = (0,
|
|
23419
|
+
const visibleLists = (0, import_react149.useMemo)(() => {
|
|
23299
23420
|
return new Set(
|
|
23300
23421
|
["orderedList", "unorderedList"].filter(
|
|
23301
23422
|
(type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
|
|
23302
23423
|
)
|
|
23303
23424
|
);
|
|
23304
23425
|
}, [activeElement, enabledBuiltInElements]);
|
|
23305
|
-
const quoteElementVisible = (0,
|
|
23426
|
+
const quoteElementVisible = (0, import_react149.useMemo)(() => {
|
|
23306
23427
|
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
23307
23428
|
}, [activeElement, enabledBuiltInElements]);
|
|
23308
|
-
const codeElementVisible = (0,
|
|
23429
|
+
const codeElementVisible = (0, import_react149.useMemo)(() => {
|
|
23309
23430
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
23310
23431
|
}, [activeElement, enabledBuiltInElements]);
|
|
23311
|
-
const visibleElementsWithIcons = (0,
|
|
23432
|
+
const visibleElementsWithIcons = (0, import_react149.useMemo)(() => {
|
|
23312
23433
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
23313
23434
|
if (linkElementVisible) {
|
|
23314
23435
|
visibleElements.add("link");
|
|
@@ -23345,7 +23466,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
23345
23466
|
};
|
|
23346
23467
|
|
|
23347
23468
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
23348
|
-
var
|
|
23469
|
+
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
23349
23470
|
var ParameterRichText = ({
|
|
23350
23471
|
label,
|
|
23351
23472
|
labelLeadingIcon,
|
|
@@ -23370,7 +23491,7 @@ var ParameterRichText = ({
|
|
|
23370
23491
|
variables,
|
|
23371
23492
|
customControls
|
|
23372
23493
|
}) => {
|
|
23373
|
-
return /* @__PURE__ */ (0,
|
|
23494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
23374
23495
|
ParameterShell,
|
|
23375
23496
|
{
|
|
23376
23497
|
"data-testid": "parameter-richtext",
|
|
@@ -23384,7 +23505,7 @@ var ParameterRichText = ({
|
|
|
23384
23505
|
captionTestId,
|
|
23385
23506
|
menuItems,
|
|
23386
23507
|
children: [
|
|
23387
|
-
/* @__PURE__ */ (0,
|
|
23508
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23388
23509
|
ParameterRichTextInner,
|
|
23389
23510
|
{
|
|
23390
23511
|
value,
|
|
@@ -23402,23 +23523,23 @@ var ParameterRichText = ({
|
|
|
23402
23523
|
children
|
|
23403
23524
|
}
|
|
23404
23525
|
),
|
|
23405
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
23526
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children: menuItems }) }) : null
|
|
23406
23527
|
]
|
|
23407
23528
|
}
|
|
23408
23529
|
);
|
|
23409
23530
|
};
|
|
23410
|
-
var editorWrapper =
|
|
23531
|
+
var editorWrapper = import_react150.css`
|
|
23411
23532
|
display: flex;
|
|
23412
23533
|
flex-flow: column;
|
|
23413
23534
|
flex-grow: 1;
|
|
23414
23535
|
`;
|
|
23415
|
-
var editorContainer =
|
|
23536
|
+
var editorContainer = import_react150.css`
|
|
23416
23537
|
display: flex;
|
|
23417
23538
|
flex-flow: column;
|
|
23418
23539
|
flex-grow: 1;
|
|
23419
23540
|
position: relative;
|
|
23420
23541
|
`;
|
|
23421
|
-
var editorPlaceholder =
|
|
23542
|
+
var editorPlaceholder = import_react150.css`
|
|
23422
23543
|
color: var(--gray-500);
|
|
23423
23544
|
font-style: italic;
|
|
23424
23545
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -23429,7 +23550,7 @@ var editorPlaceholder = import_react148.css`
|
|
|
23429
23550
|
top: var(--spacing-sm);
|
|
23430
23551
|
user-select: none;
|
|
23431
23552
|
`;
|
|
23432
|
-
var editorInput =
|
|
23553
|
+
var editorInput = import_react150.css`
|
|
23433
23554
|
background: var(--white);
|
|
23434
23555
|
border: 1px solid var(--gray-200);
|
|
23435
23556
|
border-radius: var(--rounded-sm);
|
|
@@ -23513,8 +23634,8 @@ var ParameterRichTextInner = ({
|
|
|
23513
23634
|
},
|
|
23514
23635
|
editable: !readOnly
|
|
23515
23636
|
};
|
|
23516
|
-
return /* @__PURE__ */ (0,
|
|
23517
|
-
/* @__PURE__ */ (0,
|
|
23637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
23638
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23518
23639
|
RichText,
|
|
23519
23640
|
{
|
|
23520
23641
|
onChange,
|
|
@@ -23551,14 +23672,14 @@ var RichText = ({
|
|
|
23551
23672
|
variables,
|
|
23552
23673
|
customControls
|
|
23553
23674
|
}) => {
|
|
23554
|
-
const editorContainerRef = (0,
|
|
23675
|
+
const editorContainerRef = (0, import_react151.useRef)(null);
|
|
23555
23676
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23556
|
-
(0,
|
|
23677
|
+
(0, import_react151.useEffect)(() => {
|
|
23557
23678
|
if (onRichTextInit) {
|
|
23558
23679
|
onRichTextInit(editor);
|
|
23559
23680
|
}
|
|
23560
23681
|
}, [editor, onRichTextInit]);
|
|
23561
|
-
(0,
|
|
23682
|
+
(0, import_react151.useEffect)(() => {
|
|
23562
23683
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
|
|
23563
23684
|
requestAnimationFrame(() => {
|
|
23564
23685
|
if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -23570,23 +23691,23 @@ var RichText = ({
|
|
|
23570
23691
|
removeUpdateListener();
|
|
23571
23692
|
};
|
|
23572
23693
|
}, [editor, onChange]);
|
|
23573
|
-
(0,
|
|
23694
|
+
(0, import_react151.useEffect)(() => {
|
|
23574
23695
|
editor.setEditable(!readOnly);
|
|
23575
23696
|
}, [editor, readOnly]);
|
|
23576
|
-
return /* @__PURE__ */ (0,
|
|
23577
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
23578
|
-
/* @__PURE__ */ (0,
|
|
23579
|
-
/* @__PURE__ */ (0,
|
|
23697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
23698
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(RichTextToolbar_default, { config, customControls }),
|
|
23699
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
|
|
23700
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23580
23701
|
import_LexicalRichTextPlugin.RichTextPlugin,
|
|
23581
23702
|
{
|
|
23582
|
-
contentEditable: /* @__PURE__ */ (0,
|
|
23583
|
-
placeholder: /* @__PURE__ */ (0,
|
|
23703
|
+
contentEditable: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
23704
|
+
placeholder: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
23584
23705
|
ErrorBoundary: import_LexicalErrorBoundary.default
|
|
23585
23706
|
}
|
|
23586
23707
|
),
|
|
23587
|
-
/* @__PURE__ */ (0,
|
|
23588
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
23589
|
-
/* @__PURE__ */ (0,
|
|
23708
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalListPlugin.ListPlugin, {}),
|
|
23709
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
|
|
23710
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
23590
23711
|
LinkNodePlugin,
|
|
23591
23712
|
{
|
|
23592
23713
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -23596,28 +23717,28 @@ var RichText = ({
|
|
|
23596
23717
|
} : void 0
|
|
23597
23718
|
}
|
|
23598
23719
|
),
|
|
23599
|
-
/* @__PURE__ */ (0,
|
|
23600
|
-
/* @__PURE__ */ (0,
|
|
23601
|
-
/* @__PURE__ */ (0,
|
|
23602
|
-
/* @__PURE__ */ (0,
|
|
23720
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ListIndentPlugin, { maxDepth: 4 }),
|
|
23721
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DisableStylesPlugin, {}),
|
|
23722
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
23723
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children })
|
|
23603
23724
|
] })
|
|
23604
23725
|
] });
|
|
23605
23726
|
};
|
|
23606
23727
|
|
|
23607
23728
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
23608
23729
|
init_emotion_jsx_shim();
|
|
23609
|
-
var
|
|
23610
|
-
var
|
|
23611
|
-
var ParameterSelect = (0,
|
|
23730
|
+
var import_react152 = require("react");
|
|
23731
|
+
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
23732
|
+
var ParameterSelect = (0, import_react152.forwardRef)(
|
|
23612
23733
|
({ defaultOption, options, ...props }, ref) => {
|
|
23613
23734
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
23614
|
-
return /* @__PURE__ */ (0,
|
|
23735
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
23615
23736
|
}
|
|
23616
23737
|
);
|
|
23617
|
-
var ParameterSelectInner = (0,
|
|
23738
|
+
var ParameterSelectInner = (0, import_react152.forwardRef)(
|
|
23618
23739
|
({ defaultOption, options, ...props }, ref) => {
|
|
23619
23740
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
23620
|
-
return /* @__PURE__ */ (0,
|
|
23741
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
|
|
23621
23742
|
"select",
|
|
23622
23743
|
{
|
|
23623
23744
|
css: [input3, selectInput],
|
|
@@ -23626,10 +23747,10 @@ var ParameterSelectInner = (0, import_react150.forwardRef)(
|
|
|
23626
23747
|
ref,
|
|
23627
23748
|
...props,
|
|
23628
23749
|
children: [
|
|
23629
|
-
defaultOption ? /* @__PURE__ */ (0,
|
|
23750
|
+
defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: "", children: defaultOption }) : null,
|
|
23630
23751
|
options.map((option) => {
|
|
23631
23752
|
var _a;
|
|
23632
|
-
return /* @__PURE__ */ (0,
|
|
23753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
23633
23754
|
})
|
|
23634
23755
|
]
|
|
23635
23756
|
}
|
|
@@ -23639,15 +23760,15 @@ var ParameterSelectInner = (0, import_react150.forwardRef)(
|
|
|
23639
23760
|
|
|
23640
23761
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
23641
23762
|
init_emotion_jsx_shim();
|
|
23642
|
-
var
|
|
23643
|
-
var
|
|
23644
|
-
var ParameterTextarea = (0,
|
|
23763
|
+
var import_react153 = require("react");
|
|
23764
|
+
var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
|
|
23765
|
+
var ParameterTextarea = (0, import_react153.forwardRef)((props, ref) => {
|
|
23645
23766
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
23646
|
-
return /* @__PURE__ */ (0,
|
|
23767
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
23647
23768
|
});
|
|
23648
|
-
var ParameterTextareaInner = (0,
|
|
23769
|
+
var ParameterTextareaInner = (0, import_react153.forwardRef)(({ ...props }, ref) => {
|
|
23649
23770
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
23650
|
-
return /* @__PURE__ */ (0,
|
|
23771
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
23651
23772
|
"textarea",
|
|
23652
23773
|
{
|
|
23653
23774
|
css: [input3, textarea2],
|
|
@@ -23661,18 +23782,18 @@ var ParameterTextareaInner = (0, import_react151.forwardRef)(({ ...props }, ref)
|
|
|
23661
23782
|
|
|
23662
23783
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
23663
23784
|
init_emotion_jsx_shim();
|
|
23664
|
-
var
|
|
23665
|
-
var
|
|
23666
|
-
var ParameterToggle = (0,
|
|
23785
|
+
var import_react154 = require("react");
|
|
23786
|
+
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
23787
|
+
var ParameterToggle = (0, import_react154.forwardRef)((props, ref) => {
|
|
23667
23788
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
23668
|
-
return /* @__PURE__ */ (0,
|
|
23789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
23669
23790
|
});
|
|
23670
|
-
var ParameterToggleInner = (0,
|
|
23791
|
+
var ParameterToggleInner = (0, import_react154.forwardRef)(
|
|
23671
23792
|
({ children, ...props }, ref) => {
|
|
23672
23793
|
const { id, label } = useParameterShell();
|
|
23673
|
-
return /* @__PURE__ */ (0,
|
|
23674
|
-
/* @__PURE__ */ (0,
|
|
23675
|
-
/* @__PURE__ */ (0,
|
|
23794
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("label", { css: inputToggleLabel2, children: [
|
|
23795
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
23796
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { css: inlineLabel2, children: label }),
|
|
23676
23797
|
children
|
|
23677
23798
|
] });
|
|
23678
23799
|
}
|
|
@@ -23683,8 +23804,8 @@ init_emotion_jsx_shim();
|
|
|
23683
23804
|
|
|
23684
23805
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
23685
23806
|
init_emotion_jsx_shim();
|
|
23686
|
-
var
|
|
23687
|
-
var container3 =
|
|
23807
|
+
var import_react155 = require("@emotion/react");
|
|
23808
|
+
var container3 = import_react155.css`
|
|
23688
23809
|
background: var(--gray-50);
|
|
23689
23810
|
margin-block: var(--spacing-sm);
|
|
23690
23811
|
position: relative;
|
|
@@ -23694,17 +23815,17 @@ var container3 = import_react153.css`
|
|
|
23694
23815
|
border: solid 1px var(--gray-300);
|
|
23695
23816
|
`;
|
|
23696
23817
|
var themeMap = {
|
|
23697
|
-
primary:
|
|
23818
|
+
primary: import_react155.css`
|
|
23698
23819
|
--progress-color: var(--accent-light);
|
|
23699
23820
|
`,
|
|
23700
|
-
secondary:
|
|
23821
|
+
secondary: import_react155.css`
|
|
23701
23822
|
--progress-color: var(--accent-alt-light);
|
|
23702
23823
|
`,
|
|
23703
|
-
destructive:
|
|
23824
|
+
destructive: import_react155.css`
|
|
23704
23825
|
--progress-color: var(--brand-secondary-5);
|
|
23705
23826
|
`
|
|
23706
23827
|
};
|
|
23707
|
-
var slidingBackgroundPosition =
|
|
23828
|
+
var slidingBackgroundPosition = import_react155.keyframes`
|
|
23708
23829
|
from {
|
|
23709
23830
|
background-position: 0 0;
|
|
23710
23831
|
}
|
|
@@ -23712,10 +23833,10 @@ var slidingBackgroundPosition = import_react153.keyframes`
|
|
|
23712
23833
|
background-position: 64px 0;
|
|
23713
23834
|
}
|
|
23714
23835
|
`;
|
|
23715
|
-
var determinate =
|
|
23836
|
+
var determinate = import_react155.css`
|
|
23716
23837
|
background-color: var(--progress-color);
|
|
23717
23838
|
`;
|
|
23718
|
-
var indeterminate =
|
|
23839
|
+
var indeterminate = import_react155.css`
|
|
23719
23840
|
background-image: linear-gradient(
|
|
23720
23841
|
45deg,
|
|
23721
23842
|
var(--progress-color) 25%,
|
|
@@ -23729,7 +23850,7 @@ var indeterminate = import_react153.css`
|
|
|
23729
23850
|
background-size: 64px 64px;
|
|
23730
23851
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
23731
23852
|
`;
|
|
23732
|
-
var bar =
|
|
23853
|
+
var bar = import_react155.css`
|
|
23733
23854
|
position: absolute;
|
|
23734
23855
|
inset: 0;
|
|
23735
23856
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -23737,7 +23858,7 @@ var bar = import_react153.css`
|
|
|
23737
23858
|
`;
|
|
23738
23859
|
|
|
23739
23860
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
23740
|
-
var
|
|
23861
|
+
var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
|
|
23741
23862
|
function ProgressBar({
|
|
23742
23863
|
current,
|
|
23743
23864
|
max,
|
|
@@ -23747,7 +23868,7 @@ function ProgressBar({
|
|
|
23747
23868
|
}) {
|
|
23748
23869
|
const valueNow = Math.min(current, max);
|
|
23749
23870
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
23750
|
-
return /* @__PURE__ */ (0,
|
|
23871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
23751
23872
|
"div",
|
|
23752
23873
|
{
|
|
23753
23874
|
css: container3,
|
|
@@ -23758,7 +23879,7 @@ function ProgressBar({
|
|
|
23758
23879
|
"aria-valuemax": max,
|
|
23759
23880
|
"aria-valuenow": valueNow,
|
|
23760
23881
|
...props,
|
|
23761
|
-
children: /* @__PURE__ */ (0,
|
|
23882
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
23762
23883
|
"div",
|
|
23763
23884
|
{
|
|
23764
23885
|
css: [
|
|
@@ -23778,31 +23899,31 @@ function ProgressBar({
|
|
|
23778
23899
|
|
|
23779
23900
|
// src/components/ProgressList/ProgressList.tsx
|
|
23780
23901
|
init_emotion_jsx_shim();
|
|
23781
|
-
var
|
|
23902
|
+
var import_react157 = require("@emotion/react");
|
|
23782
23903
|
var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
|
|
23783
23904
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
23784
23905
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
23785
|
-
var
|
|
23906
|
+
var import_react158 = require("react");
|
|
23786
23907
|
|
|
23787
23908
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
23788
23909
|
init_emotion_jsx_shim();
|
|
23789
|
-
var
|
|
23790
|
-
var progressListStyles =
|
|
23910
|
+
var import_react156 = require("@emotion/react");
|
|
23911
|
+
var progressListStyles = import_react156.css`
|
|
23791
23912
|
display: flex;
|
|
23792
23913
|
flex-direction: column;
|
|
23793
23914
|
gap: var(--spacing-sm);
|
|
23794
23915
|
list-style-type: none;
|
|
23795
23916
|
`;
|
|
23796
|
-
var progressListItemStyles =
|
|
23917
|
+
var progressListItemStyles = import_react156.css`
|
|
23797
23918
|
display: flex;
|
|
23798
23919
|
gap: var(--spacing-base);
|
|
23799
23920
|
align-items: center;
|
|
23800
23921
|
`;
|
|
23801
23922
|
|
|
23802
23923
|
// src/components/ProgressList/ProgressList.tsx
|
|
23803
|
-
var
|
|
23924
|
+
var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
|
|
23804
23925
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
23805
|
-
const itemsWithStatus = (0,
|
|
23926
|
+
const itemsWithStatus = (0, import_react158.useMemo)(() => {
|
|
23806
23927
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
23807
23928
|
return items.map((item, index) => {
|
|
23808
23929
|
let status = "queued";
|
|
@@ -23814,8 +23935,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
23814
23935
|
return { ...item, status };
|
|
23815
23936
|
});
|
|
23816
23937
|
}, [items, inProgressId]);
|
|
23817
|
-
return /* @__PURE__ */ (0,
|
|
23818
|
-
return /* @__PURE__ */ (0,
|
|
23938
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
23939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
|
|
23819
23940
|
ProgressListItem,
|
|
23820
23941
|
{
|
|
23821
23942
|
status,
|
|
@@ -23835,7 +23956,7 @@ var ProgressListItem = ({
|
|
|
23835
23956
|
errorLevel = "danger",
|
|
23836
23957
|
autoEllipsis = false
|
|
23837
23958
|
}) => {
|
|
23838
|
-
const icon = (0,
|
|
23959
|
+
const icon = (0, import_react158.useMemo)(() => {
|
|
23839
23960
|
if (error) {
|
|
23840
23961
|
return warningIcon;
|
|
23841
23962
|
}
|
|
@@ -23846,14 +23967,14 @@ var ProgressListItem = ({
|
|
|
23846
23967
|
};
|
|
23847
23968
|
return iconPerStatus[status];
|
|
23848
23969
|
}, [status, error]);
|
|
23849
|
-
const statusStyles = (0,
|
|
23970
|
+
const statusStyles = (0, import_react158.useMemo)(() => {
|
|
23850
23971
|
if (error) {
|
|
23851
|
-
return errorLevel === "caution" ?
|
|
23972
|
+
return errorLevel === "caution" ? import_react157.css`
|
|
23852
23973
|
color: rgb(161, 98, 7);
|
|
23853
23974
|
& svg {
|
|
23854
23975
|
color: rgb(250, 204, 21);
|
|
23855
23976
|
}
|
|
23856
|
-
` :
|
|
23977
|
+
` : import_react157.css`
|
|
23857
23978
|
color: rgb(185, 28, 28);
|
|
23858
23979
|
& svg {
|
|
23859
23980
|
color: var(--brand-primary-2);
|
|
@@ -23861,40 +23982,40 @@ var ProgressListItem = ({
|
|
|
23861
23982
|
`;
|
|
23862
23983
|
}
|
|
23863
23984
|
const colorPerStatus = {
|
|
23864
|
-
completed:
|
|
23985
|
+
completed: import_react157.css`
|
|
23865
23986
|
opacity: 0.75;
|
|
23866
23987
|
`,
|
|
23867
|
-
inProgress:
|
|
23988
|
+
inProgress: import_react157.css`
|
|
23868
23989
|
-webkit-text-stroke-width: thin;
|
|
23869
23990
|
`,
|
|
23870
|
-
queued:
|
|
23991
|
+
queued: import_react157.css`
|
|
23871
23992
|
opacity: 0.5;
|
|
23872
23993
|
`
|
|
23873
23994
|
};
|
|
23874
23995
|
return colorPerStatus[status];
|
|
23875
23996
|
}, [status, error, errorLevel]);
|
|
23876
|
-
return /* @__PURE__ */ (0,
|
|
23877
|
-
/* @__PURE__ */ (0,
|
|
23878
|
-
/* @__PURE__ */ (0,
|
|
23997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
23998
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
23999
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { children: [
|
|
23879
24000
|
children,
|
|
23880
|
-
/* @__PURE__ */ (0,
|
|
24001
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
23881
24002
|
] })
|
|
23882
24003
|
] });
|
|
23883
24004
|
};
|
|
23884
24005
|
|
|
23885
24006
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
23886
24007
|
init_emotion_jsx_shim();
|
|
23887
|
-
var
|
|
24008
|
+
var import_react160 = require("@emotion/react");
|
|
23888
24009
|
var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
|
|
23889
|
-
var
|
|
24010
|
+
var import_react161 = require("react");
|
|
23890
24011
|
|
|
23891
24012
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
23892
24013
|
init_emotion_jsx_shim();
|
|
23893
|
-
var
|
|
23894
|
-
var segmentedControlRootStyles =
|
|
24014
|
+
var import_react159 = require("@emotion/react");
|
|
24015
|
+
var segmentedControlRootStyles = import_react159.css`
|
|
23895
24016
|
position: relative;
|
|
23896
24017
|
`;
|
|
23897
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
24018
|
+
var segmentedControlScrollIndicatorsStyles = import_react159.css`
|
|
23898
24019
|
position: absolute;
|
|
23899
24020
|
inset: 0;
|
|
23900
24021
|
z-index: 1;
|
|
@@ -23922,17 +24043,17 @@ var segmentedControlScrollIndicatorsStyles = import_react157.css`
|
|
|
23922
24043
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
23923
24044
|
}
|
|
23924
24045
|
`;
|
|
23925
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
24046
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react159.css`
|
|
23926
24047
|
&::before {
|
|
23927
24048
|
opacity: 1;
|
|
23928
24049
|
}
|
|
23929
24050
|
`;
|
|
23930
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
24051
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react159.css`
|
|
23931
24052
|
&::after {
|
|
23932
24053
|
opacity: 1;
|
|
23933
24054
|
}
|
|
23934
24055
|
`;
|
|
23935
|
-
var segmentedControlWrapperStyles =
|
|
24056
|
+
var segmentedControlWrapperStyles = import_react159.css`
|
|
23936
24057
|
overflow-y: auto;
|
|
23937
24058
|
scroll-behavior: smooth;
|
|
23938
24059
|
scrollbar-width: none;
|
|
@@ -23941,7 +24062,7 @@ var segmentedControlWrapperStyles = import_react157.css`
|
|
|
23941
24062
|
height: 0px;
|
|
23942
24063
|
}
|
|
23943
24064
|
`;
|
|
23944
|
-
var segmentedControlStyles =
|
|
24065
|
+
var segmentedControlStyles = import_react159.css`
|
|
23945
24066
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
23946
24067
|
--segmented-control-border-width: 1px;
|
|
23947
24068
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -23960,14 +24081,14 @@ var segmentedControlStyles = import_react157.css`
|
|
|
23960
24081
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
23961
24082
|
font-size: var(--fs-xs);
|
|
23962
24083
|
`;
|
|
23963
|
-
var segmentedControlVerticalStyles =
|
|
24084
|
+
var segmentedControlVerticalStyles = import_react159.css`
|
|
23964
24085
|
flex-direction: column;
|
|
23965
24086
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
23966
24087
|
var(--segmented-control-rounded-value) 0 0;
|
|
23967
24088
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
23968
24089
|
var(--segmented-control-rounded-value);
|
|
23969
24090
|
`;
|
|
23970
|
-
var segmentedControlItemStyles =
|
|
24091
|
+
var segmentedControlItemStyles = import_react159.css`
|
|
23971
24092
|
&:first-of-type label {
|
|
23972
24093
|
border-radius: var(--segmented-control-first-border-radius);
|
|
23973
24094
|
}
|
|
@@ -23975,10 +24096,10 @@ var segmentedControlItemStyles = import_react157.css`
|
|
|
23975
24096
|
border-radius: var(--segmented-control-last-border-radius);
|
|
23976
24097
|
}
|
|
23977
24098
|
`;
|
|
23978
|
-
var segmentedControlInputStyles =
|
|
24099
|
+
var segmentedControlInputStyles = import_react159.css`
|
|
23979
24100
|
${accessibleHidden}
|
|
23980
24101
|
`;
|
|
23981
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
24102
|
+
var segmentedControlLabelStyles = (checked, disabled2) => import_react159.css`
|
|
23982
24103
|
position: relative;
|
|
23983
24104
|
display: flex;
|
|
23984
24105
|
align-items: center;
|
|
@@ -24045,25 +24166,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react157.css`
|
|
|
24045
24166
|
`}
|
|
24046
24167
|
}
|
|
24047
24168
|
`;
|
|
24048
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
24169
|
+
var segmentedControlLabelIconOnlyStyles = import_react159.css`
|
|
24049
24170
|
padding-inline: 0.5em;
|
|
24050
24171
|
`;
|
|
24051
|
-
var segmentedControlLabelCheckStyles =
|
|
24172
|
+
var segmentedControlLabelCheckStyles = import_react159.css`
|
|
24052
24173
|
opacity: 0.5;
|
|
24053
24174
|
`;
|
|
24054
|
-
var segmentedControlLabelContentStyles =
|
|
24175
|
+
var segmentedControlLabelContentStyles = import_react159.css`
|
|
24055
24176
|
display: flex;
|
|
24056
24177
|
align-items: center;
|
|
24057
24178
|
justify-content: center;
|
|
24058
24179
|
gap: var(--spacing-sm);
|
|
24059
24180
|
height: 100%;
|
|
24060
24181
|
`;
|
|
24061
|
-
var segmentedControlLabelTextStyles =
|
|
24182
|
+
var segmentedControlLabelTextStyles = import_react159.css`
|
|
24062
24183
|
white-space: nowrap;
|
|
24063
24184
|
`;
|
|
24064
24185
|
|
|
24065
24186
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
24066
|
-
var
|
|
24187
|
+
var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
|
|
24067
24188
|
var SegmentedControl = ({
|
|
24068
24189
|
name,
|
|
24069
24190
|
options,
|
|
@@ -24078,10 +24199,10 @@ var SegmentedControl = ({
|
|
|
24078
24199
|
currentBackgroundColor = "white",
|
|
24079
24200
|
...props
|
|
24080
24201
|
}) => {
|
|
24081
|
-
const wrapperRef = (0,
|
|
24082
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
24083
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
24084
|
-
const onOptionChange = (0,
|
|
24202
|
+
const wrapperRef = (0, import_react161.useRef)(null);
|
|
24203
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react161.useState)(false);
|
|
24204
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react161.useState)(false);
|
|
24205
|
+
const onOptionChange = (0, import_react161.useCallback)(
|
|
24085
24206
|
(event) => {
|
|
24086
24207
|
if (event.target.checked) {
|
|
24087
24208
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -24089,19 +24210,19 @@ var SegmentedControl = ({
|
|
|
24089
24210
|
},
|
|
24090
24211
|
[options, onChange]
|
|
24091
24212
|
);
|
|
24092
|
-
const sizeStyles = (0,
|
|
24213
|
+
const sizeStyles = (0, import_react161.useMemo)(() => {
|
|
24093
24214
|
const map = {
|
|
24094
|
-
sm: (0,
|
|
24095
|
-
md: (0,
|
|
24096
|
-
lg: (0,
|
|
24097
|
-
xl: (0,
|
|
24215
|
+
sm: (0, import_react160.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
24216
|
+
md: (0, import_react160.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
24217
|
+
lg: (0, import_react160.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
24218
|
+
xl: (0, import_react160.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
24098
24219
|
};
|
|
24099
24220
|
return map[size];
|
|
24100
24221
|
}, [size]);
|
|
24101
|
-
const isIconOnly = (0,
|
|
24222
|
+
const isIconOnly = (0, import_react161.useMemo)(() => {
|
|
24102
24223
|
return options.every((option) => option && option.icon && !option.label);
|
|
24103
24224
|
}, [options]);
|
|
24104
|
-
(0,
|
|
24225
|
+
(0, import_react161.useEffect)(() => {
|
|
24105
24226
|
const wrapperElement = wrapperRef.current;
|
|
24106
24227
|
const onScroll = () => {
|
|
24107
24228
|
if (!wrapperElement) {
|
|
@@ -24122,8 +24243,8 @@ var SegmentedControl = ({
|
|
|
24122
24243
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
24123
24244
|
};
|
|
24124
24245
|
}, []);
|
|
24125
|
-
return /* @__PURE__ */ (0,
|
|
24126
|
-
/* @__PURE__ */ (0,
|
|
24246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
24247
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
24127
24248
|
"div",
|
|
24128
24249
|
{
|
|
24129
24250
|
css: [
|
|
@@ -24139,12 +24260,12 @@ var SegmentedControl = ({
|
|
|
24139
24260
|
}
|
|
24140
24261
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
24141
24262
|
const isDisabled = disabled2 || option.disabled;
|
|
24142
|
-
return /* @__PURE__ */ (0,
|
|
24263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
24143
24264
|
"div",
|
|
24144
24265
|
{
|
|
24145
24266
|
css: segmentedControlItemStyles,
|
|
24146
24267
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
24147
|
-
children: /* @__PURE__ */ (0,
|
|
24268
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
|
|
24148
24269
|
"label",
|
|
24149
24270
|
{
|
|
24150
24271
|
css: [
|
|
@@ -24153,7 +24274,7 @@ var SegmentedControl = ({
|
|
|
24153
24274
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
24154
24275
|
],
|
|
24155
24276
|
children: [
|
|
24156
|
-
/* @__PURE__ */ (0,
|
|
24277
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
24157
24278
|
"input",
|
|
24158
24279
|
{
|
|
24159
24280
|
css: segmentedControlInputStyles,
|
|
@@ -24165,10 +24286,10 @@ var SegmentedControl = ({
|
|
|
24165
24286
|
disabled: isDisabled
|
|
24166
24287
|
}
|
|
24167
24288
|
),
|
|
24168
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0,
|
|
24169
|
-
/* @__PURE__ */ (0,
|
|
24170
|
-
!option.icon ? null : /* @__PURE__ */ (0,
|
|
24171
|
-
!text || hideOptionText ? null : /* @__PURE__ */ (0,
|
|
24289
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
24290
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
|
|
24291
|
+
!option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
24292
|
+
!text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
24172
24293
|
] })
|
|
24173
24294
|
]
|
|
24174
24295
|
}
|
|
@@ -24178,7 +24299,7 @@ var SegmentedControl = ({
|
|
|
24178
24299
|
})
|
|
24179
24300
|
}
|
|
24180
24301
|
) }),
|
|
24181
|
-
/* @__PURE__ */ (0,
|
|
24302
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
24182
24303
|
"div",
|
|
24183
24304
|
{
|
|
24184
24305
|
css: [
|
|
@@ -24196,18 +24317,18 @@ init_emotion_jsx_shim();
|
|
|
24196
24317
|
|
|
24197
24318
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
24198
24319
|
init_emotion_jsx_shim();
|
|
24199
|
-
var
|
|
24200
|
-
var lightFadingOut =
|
|
24320
|
+
var import_react162 = require("@emotion/react");
|
|
24321
|
+
var lightFadingOut = import_react162.keyframes`
|
|
24201
24322
|
from { opacity: 0.1; }
|
|
24202
24323
|
to { opacity: 0.025; }
|
|
24203
24324
|
`;
|
|
24204
|
-
var skeletonStyles =
|
|
24325
|
+
var skeletonStyles = import_react162.css`
|
|
24205
24326
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
24206
24327
|
background-color: var(--gray-900);
|
|
24207
24328
|
`;
|
|
24208
24329
|
|
|
24209
24330
|
// src/components/Skeleton/Skeleton.tsx
|
|
24210
|
-
var
|
|
24331
|
+
var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
|
|
24211
24332
|
var Skeleton = ({
|
|
24212
24333
|
width = "100%",
|
|
24213
24334
|
height = "1.25rem",
|
|
@@ -24215,7 +24336,7 @@ var Skeleton = ({
|
|
|
24215
24336
|
circle = false,
|
|
24216
24337
|
children,
|
|
24217
24338
|
...otherProps
|
|
24218
|
-
}) => /* @__PURE__ */ (0,
|
|
24339
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
|
|
24219
24340
|
"div",
|
|
24220
24341
|
{
|
|
24221
24342
|
css: [
|
|
@@ -24236,12 +24357,12 @@ var Skeleton = ({
|
|
|
24236
24357
|
|
|
24237
24358
|
// src/components/Switch/Switch.tsx
|
|
24238
24359
|
init_emotion_jsx_shim();
|
|
24239
|
-
var
|
|
24360
|
+
var import_react164 = require("react");
|
|
24240
24361
|
|
|
24241
24362
|
// src/components/Switch/Switch.styles.ts
|
|
24242
24363
|
init_emotion_jsx_shim();
|
|
24243
|
-
var
|
|
24244
|
-
var SwitchInputContainer =
|
|
24364
|
+
var import_react163 = require("@emotion/react");
|
|
24365
|
+
var SwitchInputContainer = import_react163.css`
|
|
24245
24366
|
cursor: pointer;
|
|
24246
24367
|
display: inline-block;
|
|
24247
24368
|
position: relative;
|
|
@@ -24250,7 +24371,7 @@ var SwitchInputContainer = import_react161.css`
|
|
|
24250
24371
|
vertical-align: middle;
|
|
24251
24372
|
user-select: none;
|
|
24252
24373
|
`;
|
|
24253
|
-
var SwitchInput = (size) =>
|
|
24374
|
+
var SwitchInput = (size) => import_react163.css`
|
|
24254
24375
|
appearance: none;
|
|
24255
24376
|
border-radius: var(--rounded-full);
|
|
24256
24377
|
background-color: var(--white);
|
|
@@ -24289,7 +24410,7 @@ var SwitchInput = (size) => import_react161.css`
|
|
|
24289
24410
|
cursor: not-allowed;
|
|
24290
24411
|
}
|
|
24291
24412
|
`;
|
|
24292
|
-
var SwitchInputDisabled =
|
|
24413
|
+
var SwitchInputDisabled = import_react163.css`
|
|
24293
24414
|
opacity: var(--opacity-50);
|
|
24294
24415
|
cursor: not-allowed;
|
|
24295
24416
|
|
|
@@ -24297,7 +24418,7 @@ var SwitchInputDisabled = import_react161.css`
|
|
|
24297
24418
|
cursor: not-allowed;
|
|
24298
24419
|
}
|
|
24299
24420
|
`;
|
|
24300
|
-
var SwitchInputLabel = (size) =>
|
|
24421
|
+
var SwitchInputLabel = (size) => import_react163.css`
|
|
24301
24422
|
align-items: center;
|
|
24302
24423
|
color: var(--typography-base);
|
|
24303
24424
|
display: inline-flex;
|
|
@@ -24319,32 +24440,32 @@ var SwitchInputLabel = (size) => import_react161.css`
|
|
|
24319
24440
|
top: 0;
|
|
24320
24441
|
}
|
|
24321
24442
|
`;
|
|
24322
|
-
var SwitchText = (size) =>
|
|
24443
|
+
var SwitchText = (size) => import_react163.css`
|
|
24323
24444
|
color: var(--gray-500);
|
|
24324
24445
|
font-size: var(--fs-sm);
|
|
24325
24446
|
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
24326
24447
|
`;
|
|
24327
24448
|
|
|
24328
24449
|
// src/components/Switch/Switch.tsx
|
|
24329
|
-
var
|
|
24330
|
-
var Switch = (0,
|
|
24450
|
+
var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
|
|
24451
|
+
var Switch = (0, import_react164.forwardRef)(
|
|
24331
24452
|
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
24332
24453
|
let additionalText = infoText;
|
|
24333
24454
|
if (infoText && toggleText) {
|
|
24334
24455
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
24335
24456
|
}
|
|
24336
|
-
return /* @__PURE__ */ (0,
|
|
24337
|
-
/* @__PURE__ */ (0,
|
|
24457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
|
|
24458
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
|
|
24338
24459
|
"label",
|
|
24339
24460
|
{
|
|
24340
24461
|
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
24341
24462
|
children: [
|
|
24342
|
-
/* @__PURE__ */ (0,
|
|
24343
|
-
/* @__PURE__ */ (0,
|
|
24463
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
24464
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
24344
24465
|
]
|
|
24345
24466
|
}
|
|
24346
24467
|
),
|
|
24347
|
-
additionalText ? /* @__PURE__ */ (0,
|
|
24468
|
+
additionalText ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
24348
24469
|
children
|
|
24349
24470
|
] });
|
|
24350
24471
|
}
|
|
@@ -24356,8 +24477,8 @@ var React24 = __toESM(require("react"));
|
|
|
24356
24477
|
|
|
24357
24478
|
// src/components/Table/Table.styles.ts
|
|
24358
24479
|
init_emotion_jsx_shim();
|
|
24359
|
-
var
|
|
24360
|
-
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) =>
|
|
24480
|
+
var import_react165 = require("@emotion/react");
|
|
24481
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react165.css`
|
|
24361
24482
|
border-bottom: 1px solid var(--gray-400);
|
|
24362
24483
|
border-collapse: collapse;
|
|
24363
24484
|
min-width: 100%;
|
|
@@ -24377,66 +24498,66 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
|
|
|
24377
24498
|
background-color: var(--gray-50);
|
|
24378
24499
|
}
|
|
24379
24500
|
`;
|
|
24380
|
-
var tableHead =
|
|
24501
|
+
var tableHead = import_react165.css`
|
|
24381
24502
|
color: var(--typography-base);
|
|
24382
24503
|
text-align: left;
|
|
24383
24504
|
`;
|
|
24384
|
-
var tableRow =
|
|
24505
|
+
var tableRow = import_react165.css`
|
|
24385
24506
|
border-bottom: 1px solid var(--gray-100);
|
|
24386
24507
|
`;
|
|
24387
|
-
var tableCellHead =
|
|
24508
|
+
var tableCellHead = import_react165.css`
|
|
24388
24509
|
font-size: var(--fs-sm);
|
|
24389
24510
|
text-transform: uppercase;
|
|
24390
24511
|
font-weight: var(--fw-bold);
|
|
24391
24512
|
`;
|
|
24392
24513
|
|
|
24393
24514
|
// src/components/Table/Table.tsx
|
|
24394
|
-
var
|
|
24515
|
+
var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
|
|
24395
24516
|
var Table = React24.forwardRef(
|
|
24396
24517
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
24397
|
-
return /* @__PURE__ */ (0,
|
|
24518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
24398
24519
|
}
|
|
24399
24520
|
);
|
|
24400
24521
|
var TableHead = React24.forwardRef(
|
|
24401
24522
|
({ children, ...otherProps }, ref) => {
|
|
24402
|
-
return /* @__PURE__ */ (0,
|
|
24523
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
|
|
24403
24524
|
}
|
|
24404
24525
|
);
|
|
24405
24526
|
var TableBody = React24.forwardRef(
|
|
24406
24527
|
({ children, ...otherProps }, ref) => {
|
|
24407
|
-
return /* @__PURE__ */ (0,
|
|
24528
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tbody", { ref, ...otherProps, children });
|
|
24408
24529
|
}
|
|
24409
24530
|
);
|
|
24410
24531
|
var TableFoot = React24.forwardRef(
|
|
24411
24532
|
({ children, ...otherProps }, ref) => {
|
|
24412
|
-
return /* @__PURE__ */ (0,
|
|
24533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tfoot", { ref, ...otherProps, children });
|
|
24413
24534
|
}
|
|
24414
24535
|
);
|
|
24415
24536
|
var TableRow = React24.forwardRef(
|
|
24416
24537
|
({ children, ...otherProps }, ref) => {
|
|
24417
|
-
return /* @__PURE__ */ (0,
|
|
24538
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
|
|
24418
24539
|
}
|
|
24419
24540
|
);
|
|
24420
24541
|
var TableCellHead = React24.forwardRef(
|
|
24421
24542
|
({ children, ...otherProps }, ref) => {
|
|
24422
|
-
return /* @__PURE__ */ (0,
|
|
24543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
24423
24544
|
}
|
|
24424
24545
|
);
|
|
24425
24546
|
var TableCellData = React24.forwardRef(
|
|
24426
24547
|
({ children, ...otherProps }, ref) => {
|
|
24427
|
-
return /* @__PURE__ */ (0,
|
|
24548
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("td", { ref, ...otherProps, children });
|
|
24428
24549
|
}
|
|
24429
24550
|
);
|
|
24430
24551
|
|
|
24431
24552
|
// src/components/Tabs/Tabs.tsx
|
|
24432
24553
|
init_emotion_jsx_shim();
|
|
24433
|
-
var
|
|
24434
|
-
var
|
|
24554
|
+
var import_react167 = require("@ariakit/react");
|
|
24555
|
+
var import_react168 = require("react");
|
|
24435
24556
|
|
|
24436
24557
|
// src/components/Tabs/Tabs.styles.ts
|
|
24437
24558
|
init_emotion_jsx_shim();
|
|
24438
|
-
var
|
|
24439
|
-
var tabButtonStyles =
|
|
24559
|
+
var import_react166 = require("@emotion/react");
|
|
24560
|
+
var tabButtonStyles = import_react166.css`
|
|
24440
24561
|
align-items: center;
|
|
24441
24562
|
border: 0;
|
|
24442
24563
|
height: 2.5rem;
|
|
@@ -24453,16 +24574,16 @@ var tabButtonStyles = import_react164.css`
|
|
|
24453
24574
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
24454
24575
|
}
|
|
24455
24576
|
`;
|
|
24456
|
-
var tabButtonGroupStyles =
|
|
24577
|
+
var tabButtonGroupStyles = import_react166.css`
|
|
24457
24578
|
display: flex;
|
|
24458
24579
|
gap: var(--spacing-base);
|
|
24459
24580
|
border-bottom: 1px solid var(--gray-300);
|
|
24460
24581
|
`;
|
|
24461
24582
|
|
|
24462
24583
|
// src/components/Tabs/Tabs.tsx
|
|
24463
|
-
var
|
|
24584
|
+
var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
|
|
24464
24585
|
var useCurrentTab = () => {
|
|
24465
|
-
const context = (0,
|
|
24586
|
+
const context = (0, import_react167.useTabStore)();
|
|
24466
24587
|
if (!context) {
|
|
24467
24588
|
throw new Error("This component can only be used inside <Tabs>");
|
|
24468
24589
|
}
|
|
@@ -24476,12 +24597,12 @@ var Tabs = ({
|
|
|
24476
24597
|
manual,
|
|
24477
24598
|
...props
|
|
24478
24599
|
}) => {
|
|
24479
|
-
const selected = (0,
|
|
24600
|
+
const selected = (0, import_react168.useMemo)(() => {
|
|
24480
24601
|
if (selectedId) return selectedId;
|
|
24481
24602
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
24482
24603
|
}, [selectedId, useHashForState]);
|
|
24483
|
-
const tab = (0,
|
|
24484
|
-
const onTabSelect = (0,
|
|
24604
|
+
const tab = (0, import_react167.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
|
|
24605
|
+
const onTabSelect = (0, import_react168.useCallback)(
|
|
24485
24606
|
(value) => {
|
|
24486
24607
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
24487
24608
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -24492,28 +24613,28 @@ var Tabs = ({
|
|
|
24492
24613
|
},
|
|
24493
24614
|
[onSelectedIdChange, useHashForState]
|
|
24494
24615
|
);
|
|
24495
|
-
(0,
|
|
24616
|
+
(0, import_react168.useEffect)(() => {
|
|
24496
24617
|
if (selected && selected !== tab.getState().activeId) {
|
|
24497
24618
|
tab.setSelectedId(selected);
|
|
24498
24619
|
}
|
|
24499
24620
|
}, [selected, tab]);
|
|
24500
|
-
return /* @__PURE__ */ (0,
|
|
24621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
24501
24622
|
};
|
|
24502
24623
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
24503
|
-
return /* @__PURE__ */ (0,
|
|
24624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
24504
24625
|
};
|
|
24505
24626
|
var TabButton = ({
|
|
24506
24627
|
children,
|
|
24507
24628
|
id,
|
|
24508
24629
|
...props
|
|
24509
24630
|
}) => {
|
|
24510
|
-
return /* @__PURE__ */ (0,
|
|
24631
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
24511
24632
|
};
|
|
24512
24633
|
var TabContent = ({
|
|
24513
24634
|
children,
|
|
24514
24635
|
...props
|
|
24515
24636
|
}) => {
|
|
24516
|
-
return /* @__PURE__ */ (0,
|
|
24637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabPanel, { ...props, children });
|
|
24517
24638
|
};
|
|
24518
24639
|
|
|
24519
24640
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -24521,8 +24642,8 @@ init_emotion_jsx_shim();
|
|
|
24521
24642
|
|
|
24522
24643
|
// src/components/Validation/StatusBullet.styles.ts
|
|
24523
24644
|
init_emotion_jsx_shim();
|
|
24524
|
-
var
|
|
24525
|
-
var StatusBulletContainer =
|
|
24645
|
+
var import_react169 = require("@emotion/react");
|
|
24646
|
+
var StatusBulletContainer = import_react169.css`
|
|
24526
24647
|
align-items: center;
|
|
24527
24648
|
align-self: center;
|
|
24528
24649
|
color: var(--gray-500);
|
|
@@ -24539,33 +24660,33 @@ var StatusBulletContainer = import_react167.css`
|
|
|
24539
24660
|
display: block;
|
|
24540
24661
|
}
|
|
24541
24662
|
`;
|
|
24542
|
-
var StatusBulletBase =
|
|
24663
|
+
var StatusBulletBase = import_react169.css`
|
|
24543
24664
|
font-size: var(--fs-sm);
|
|
24544
24665
|
&:before {
|
|
24545
24666
|
width: var(--fs-xs);
|
|
24546
24667
|
height: var(--fs-xs);
|
|
24547
24668
|
}
|
|
24548
24669
|
`;
|
|
24549
|
-
var StatusBulletSmall =
|
|
24670
|
+
var StatusBulletSmall = import_react169.css`
|
|
24550
24671
|
font-size: var(--fs-xs);
|
|
24551
24672
|
&:before {
|
|
24552
24673
|
width: var(--fs-xxs);
|
|
24553
24674
|
height: var(--fs-xxs);
|
|
24554
24675
|
}
|
|
24555
24676
|
`;
|
|
24556
|
-
var StatusDraft =
|
|
24677
|
+
var StatusDraft = import_react169.css`
|
|
24557
24678
|
&:before {
|
|
24558
24679
|
background: var(--white);
|
|
24559
24680
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
24560
24681
|
}
|
|
24561
24682
|
`;
|
|
24562
|
-
var StatusModified =
|
|
24683
|
+
var StatusModified = import_react169.css`
|
|
24563
24684
|
&:before {
|
|
24564
24685
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
24565
24686
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
24566
24687
|
}
|
|
24567
24688
|
`;
|
|
24568
|
-
var StatusError =
|
|
24689
|
+
var StatusError = import_react169.css`
|
|
24569
24690
|
color: var(--error);
|
|
24570
24691
|
&:before {
|
|
24571
24692
|
/* TODO: replace this with an svg icon */
|
|
@@ -24578,29 +24699,29 @@ var StatusError = import_react167.css`
|
|
|
24578
24699
|
);
|
|
24579
24700
|
}
|
|
24580
24701
|
`;
|
|
24581
|
-
var StatusPublished =
|
|
24702
|
+
var StatusPublished = import_react169.css`
|
|
24582
24703
|
&:before {
|
|
24583
24704
|
background: var(--accent-dark);
|
|
24584
24705
|
}
|
|
24585
24706
|
`;
|
|
24586
|
-
var StatusOrphan =
|
|
24707
|
+
var StatusOrphan = import_react169.css`
|
|
24587
24708
|
&:before {
|
|
24588
24709
|
background: var(--brand-secondary-5);
|
|
24589
24710
|
}
|
|
24590
24711
|
`;
|
|
24591
|
-
var StatusUnknown =
|
|
24712
|
+
var StatusUnknown = import_react169.css`
|
|
24592
24713
|
&:before {
|
|
24593
24714
|
background: var(--gray-800);
|
|
24594
24715
|
}
|
|
24595
24716
|
`;
|
|
24596
|
-
var StatusDeleted =
|
|
24717
|
+
var StatusDeleted = import_react169.css`
|
|
24597
24718
|
&:before {
|
|
24598
24719
|
background: var(--error);
|
|
24599
24720
|
}
|
|
24600
24721
|
`;
|
|
24601
24722
|
|
|
24602
24723
|
// src/components/Validation/StatusBullet.tsx
|
|
24603
|
-
var
|
|
24724
|
+
var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
|
|
24604
24725
|
var StatusBullet = ({
|
|
24605
24726
|
status,
|
|
24606
24727
|
hideText = false,
|
|
@@ -24620,7 +24741,7 @@ var StatusBullet = ({
|
|
|
24620
24741
|
Deleted: StatusDeleted
|
|
24621
24742
|
};
|
|
24622
24743
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
24623
|
-
return /* @__PURE__ */ (0,
|
|
24744
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
24624
24745
|
"span",
|
|
24625
24746
|
{
|
|
24626
24747
|
role: "status",
|
|
@@ -24731,6 +24852,7 @@ var StatusBullet = ({
|
|
|
24731
24852
|
ObjectGridItemCoverButton,
|
|
24732
24853
|
ObjectGridItemHeading,
|
|
24733
24854
|
ObjectGridItemIconWithTooltip,
|
|
24855
|
+
ObjectGridItemLoadingSkeleton,
|
|
24734
24856
|
ObjectItemLoadingSkeleton,
|
|
24735
24857
|
ObjectListItem,
|
|
24736
24858
|
ObjectListItemContainer,
|