@uniformdev/design-system 19.205.0 → 19.206.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +203 -89
- package/dist/index.d.mts +40 -17
- package/dist/index.d.ts +40 -17
- package/dist/index.js +492 -380
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -14216,7 +14216,7 @@ var menuTriggerStyles = import_react35.css`
|
|
|
14216
14216
|
border: none;
|
|
14217
14217
|
background: transparent;
|
|
14218
14218
|
padding: var(--spacing-xs);
|
|
14219
|
-
color: var(--gray-
|
|
14219
|
+
color: var(--gray-600);
|
|
14220
14220
|
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
14221
14221
|
|
|
14222
14222
|
&:focus,
|
|
@@ -20667,6 +20667,7 @@ ModalDialog.displayName = "ModalDialog";
|
|
|
20667
20667
|
|
|
20668
20668
|
// src/components/Objects/ObjectGridContainer.tsx
|
|
20669
20669
|
init_emotion_jsx_shim();
|
|
20670
|
+
var import_react122 = require("react");
|
|
20670
20671
|
|
|
20671
20672
|
// src/components/Objects/styles/ObjectGridContainer.styles.ts
|
|
20672
20673
|
init_emotion_jsx_shim();
|
|
@@ -20679,17 +20680,28 @@ var ObjectGridContainer = (gridCount) => import_react121.css`
|
|
|
20679
20680
|
|
|
20680
20681
|
// src/components/Objects/ObjectGridContainer.tsx
|
|
20681
20682
|
var import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
|
|
20682
|
-
var ObjectGridContainer2 = (
|
|
20683
|
-
|
|
20684
|
-
|
|
20683
|
+
var ObjectGridContainer2 = (0, import_react122.forwardRef)(
|
|
20684
|
+
({ gridCount = 3, children, ...props }, ref) => {
|
|
20685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
|
|
20686
|
+
"div",
|
|
20687
|
+
{
|
|
20688
|
+
ref,
|
|
20689
|
+
"data-testid": "object-grid-container",
|
|
20690
|
+
css: ObjectGridContainer(gridCount),
|
|
20691
|
+
...props,
|
|
20692
|
+
children
|
|
20693
|
+
}
|
|
20694
|
+
);
|
|
20695
|
+
}
|
|
20696
|
+
);
|
|
20685
20697
|
|
|
20686
20698
|
// src/components/Objects/ObjectGridItem.tsx
|
|
20687
20699
|
init_emotion_jsx_shim();
|
|
20688
20700
|
|
|
20689
20701
|
// src/components/Objects/styles/ObjectGridItem.styles.ts
|
|
20690
20702
|
init_emotion_jsx_shim();
|
|
20691
|
-
var
|
|
20692
|
-
var ObjectGridItem =
|
|
20703
|
+
var import_react123 = require("@emotion/react");
|
|
20704
|
+
var ObjectGridItem = import_react123.css`
|
|
20693
20705
|
border: 1px solid var(--gray-300);
|
|
20694
20706
|
border-radius: var(--rounded-base);
|
|
20695
20707
|
background: var(--white);
|
|
@@ -20699,6 +20711,7 @@ var ObjectGridItem = import_react122.css`
|
|
|
20699
20711
|
|
|
20700
20712
|
&[aria-selected='true'] {
|
|
20701
20713
|
border: 1px solid var(--accent-dark);
|
|
20714
|
+
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
20702
20715
|
}
|
|
20703
20716
|
|
|
20704
20717
|
&[aria-selected='false'] {
|
|
@@ -20707,20 +20720,54 @@ var ObjectGridItem = import_react122.css`
|
|
|
20707
20720
|
}
|
|
20708
20721
|
}
|
|
20709
20722
|
`;
|
|
20710
|
-
var
|
|
20723
|
+
var ObjectGridWithOnClick = import_react123.css`
|
|
20724
|
+
cursor: pointer;
|
|
20725
|
+
&:hover,
|
|
20726
|
+
&:focus {
|
|
20727
|
+
border: 1px solid var(--accent-dark);
|
|
20728
|
+
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
20729
|
+
}
|
|
20730
|
+
`;
|
|
20731
|
+
var ObjectGridItemMediaWrapper = import_react123.css`
|
|
20711
20732
|
display: flex;
|
|
20712
20733
|
flex: 1 1 0;
|
|
20713
20734
|
position: relative;
|
|
20714
20735
|
`;
|
|
20715
|
-
var
|
|
20716
|
-
|
|
20736
|
+
var ObjectGridItemMediaInner = import_react123.css`
|
|
20737
|
+
background: var(--gray-50);
|
|
20738
|
+
border-radius: var(--rounded-base) var(--rounded-base) 0 0;
|
|
20739
|
+
position: relative;
|
|
20740
|
+
display: flex;
|
|
20741
|
+
align-items: center;
|
|
20742
|
+
justify-content: center;
|
|
20743
|
+
flex: 1;
|
|
20744
|
+
overflow: hidden;
|
|
20745
|
+
height: 100%;
|
|
20746
|
+
`;
|
|
20747
|
+
var ObjectGridItemContentWrapper = import_react123.css`
|
|
20748
|
+
display: grid;
|
|
20749
|
+
grid-template-columns: 1fr auto;
|
|
20750
|
+
padding: var(--spacing-sm);
|
|
20751
|
+
gap: var(--spacing-sm);
|
|
20717
20752
|
min-height: 52px;
|
|
20753
|
+
width: 100%;
|
|
20718
20754
|
`;
|
|
20719
|
-
var
|
|
20755
|
+
var ObjectGridItemInnerWrapper = import_react123.css`
|
|
20756
|
+
min-width: 0;
|
|
20757
|
+
`;
|
|
20758
|
+
var ObjectGridItemImage = import_react123.css`
|
|
20720
20759
|
object-fit: cover;
|
|
20721
20760
|
width: 100%;
|
|
20722
20761
|
height: auto;
|
|
20723
20762
|
`;
|
|
20763
|
+
var ObjectGridItemSubtitle = import_react123.css`
|
|
20764
|
+
color: var(--gray-500);
|
|
20765
|
+
font-size: var(--fs-sm);
|
|
20766
|
+
white-space: nowrap;
|
|
20767
|
+
overflow: hidden;
|
|
20768
|
+
text-overflow: ellipsis;
|
|
20769
|
+
max-width: 100%;
|
|
20770
|
+
`;
|
|
20724
20771
|
|
|
20725
20772
|
// src/components/Objects/ObjectGridItem.tsx
|
|
20726
20773
|
var import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
|
|
@@ -20730,28 +20777,51 @@ var ObjectGridItem2 = ({
|
|
|
20730
20777
|
rightSlot,
|
|
20731
20778
|
menuItems,
|
|
20732
20779
|
isSelected,
|
|
20733
|
-
children
|
|
20780
|
+
children,
|
|
20781
|
+
menuTestId,
|
|
20782
|
+
...props
|
|
20734
20783
|
}) => {
|
|
20735
|
-
|
|
20736
|
-
|
|
20737
|
-
|
|
20738
|
-
|
|
20739
|
-
|
|
20740
|
-
|
|
20741
|
-
|
|
20742
|
-
|
|
20743
|
-
|
|
20744
|
-
|
|
20745
|
-
|
|
20746
|
-
|
|
20747
|
-
|
|
20748
|
-
|
|
20749
|
-
children:
|
|
20750
|
-
|
|
20751
|
-
|
|
20752
|
-
|
|
20753
|
-
|
|
20754
|
-
|
|
20784
|
+
const hasOnClick = props.onClick;
|
|
20785
|
+
const onStopPropagation = (e) => {
|
|
20786
|
+
e.stopPropagation();
|
|
20787
|
+
};
|
|
20788
|
+
return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
|
|
20789
|
+
"div",
|
|
20790
|
+
{
|
|
20791
|
+
css: [ObjectGridItem, props.onClick ? ObjectGridWithOnClick : void 0],
|
|
20792
|
+
"aria-selected": isSelected,
|
|
20793
|
+
...props,
|
|
20794
|
+
children: [
|
|
20795
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { css: ObjectGridItemMediaWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { css: ObjectGridItemMediaInner, children: cover }) }),
|
|
20796
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { css: ObjectGridItemContentWrapper, children: [
|
|
20797
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(VerticalRhythm, { gap: "0", css: ObjectGridItemInnerWrapper, children: [
|
|
20798
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
|
|
20799
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { css: ObjectGridItemSubtitle, children })
|
|
20800
|
+
] }),
|
|
20801
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
|
|
20802
|
+
HorizontalRhythm,
|
|
20803
|
+
{
|
|
20804
|
+
gap: "xs",
|
|
20805
|
+
align: "flex-start",
|
|
20806
|
+
css: { cursor: "default" },
|
|
20807
|
+
onClick: hasOnClick ? onStopPropagation : void 0,
|
|
20808
|
+
children: [
|
|
20809
|
+
rightSlot,
|
|
20810
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
|
|
20811
|
+
Menu,
|
|
20812
|
+
{
|
|
20813
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(MenuThreeDots, { "data-testid": menuTestId != null ? menuTestId : "object-grid-item-menu-btn" }),
|
|
20814
|
+
placement: "bottom-end",
|
|
20815
|
+
children: menuItems
|
|
20816
|
+
}
|
|
20817
|
+
) : null
|
|
20818
|
+
]
|
|
20819
|
+
}
|
|
20820
|
+
)
|
|
20821
|
+
] })
|
|
20822
|
+
]
|
|
20823
|
+
}
|
|
20824
|
+
);
|
|
20755
20825
|
};
|
|
20756
20826
|
|
|
20757
20827
|
// src/components/Objects/ObjectGridItemCardCover.tsx
|
|
@@ -20759,23 +20829,29 @@ init_emotion_jsx_shim();
|
|
|
20759
20829
|
|
|
20760
20830
|
// src/components/Objects/styles/ObjectGridItemCardCover.styles.ts
|
|
20761
20831
|
init_emotion_jsx_shim();
|
|
20762
|
-
var
|
|
20763
|
-
var CoverImage =
|
|
20832
|
+
var import_react124 = require("@emotion/react");
|
|
20833
|
+
var CoverImage = import_react124.css`
|
|
20764
20834
|
aspect-ratio: 16/9;
|
|
20765
20835
|
max-width: 100%;
|
|
20766
20836
|
max-height: 100%;
|
|
20767
20837
|
height: auto;
|
|
20768
20838
|
padding: var(--spacing-sm);
|
|
20839
|
+
object-fit: cover;
|
|
20840
|
+
`;
|
|
20841
|
+
var CoverContainer = import_react124.css`
|
|
20842
|
+
aspect-ratio: 16/9;
|
|
20843
|
+
width: 100%;
|
|
20844
|
+
height: 100%;
|
|
20769
20845
|
`;
|
|
20770
|
-
var CoverIconWrapper =
|
|
20846
|
+
var CoverIconWrapper = import_react124.css`
|
|
20771
20847
|
position: relative;
|
|
20772
20848
|
display: flex;
|
|
20773
20849
|
align-items: center;
|
|
20774
20850
|
justify-content: center;
|
|
20775
20851
|
flex: 1;
|
|
20776
|
-
|
|
20852
|
+
height: 100%;
|
|
20777
20853
|
`;
|
|
20778
|
-
var CoverIconGhost =
|
|
20854
|
+
var CoverIconGhost = import_react124.css`
|
|
20779
20855
|
position: absolute;
|
|
20780
20856
|
width: 60%;
|
|
20781
20857
|
height: auto;
|
|
@@ -20783,9 +20859,9 @@ var CoverIconGhost = import_react123.css`
|
|
|
20783
20859
|
opacity: 0.05;
|
|
20784
20860
|
transform: rotateZ(-15deg) translate(35%, 30%);
|
|
20785
20861
|
`;
|
|
20786
|
-
var CoverSlot =
|
|
20862
|
+
var CoverSlot = import_react124.css`
|
|
20787
20863
|
align-items: center;
|
|
20788
|
-
background: var(--
|
|
20864
|
+
background: var(--gray-50);
|
|
20789
20865
|
display: flex;
|
|
20790
20866
|
justify-content: center;
|
|
20791
20867
|
position: absolute;
|
|
@@ -20794,15 +20870,15 @@ var CoverSlot = import_react123.css`
|
|
|
20794
20870
|
width: 24px;
|
|
20795
20871
|
height: 24px;
|
|
20796
20872
|
`;
|
|
20797
|
-
var CoverSlotLeft =
|
|
20873
|
+
var CoverSlotLeft = import_react124.css`
|
|
20798
20874
|
border-bottom-right-radius: var(--rounded-base);
|
|
20799
20875
|
left: var(--spacing-sm);
|
|
20800
20876
|
`;
|
|
20801
|
-
var CoverSlotRight =
|
|
20877
|
+
var CoverSlotRight = import_react124.css`
|
|
20802
20878
|
border-bottom-left-radius: var(--rounded-base);
|
|
20803
20879
|
right: var(--spacing-sm);
|
|
20804
20880
|
`;
|
|
20805
|
-
var CoverButton =
|
|
20881
|
+
var CoverButton = import_react124.css`
|
|
20806
20882
|
align-items: stretch;
|
|
20807
20883
|
border: none;
|
|
20808
20884
|
background: none;
|
|
@@ -20815,82 +20891,108 @@ var CoverButton = import_react123.css`
|
|
|
20815
20891
|
outline: none;
|
|
20816
20892
|
}
|
|
20817
20893
|
`;
|
|
20818
|
-
var
|
|
20819
|
-
animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
20820
|
-
opacity: 0;
|
|
20894
|
+
var CoverSlotBottom = import_react124.css`
|
|
20821
20895
|
position: absolute;
|
|
20822
20896
|
bottom: var(--spacing-base);
|
|
20897
|
+
`;
|
|
20898
|
+
var CoverSlotBottomLeft = import_react124.css`
|
|
20899
|
+
left: var(--spacing-base);
|
|
20900
|
+
`;
|
|
20901
|
+
var CoverSlotBottomRight = import_react124.css`
|
|
20823
20902
|
right: var(--spacing-base);
|
|
20824
20903
|
`;
|
|
20904
|
+
var CoverSelectedChip = import_react124.css`
|
|
20905
|
+
animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
20906
|
+
opacity: 0;
|
|
20907
|
+
`;
|
|
20825
20908
|
|
|
20826
20909
|
// src/components/Objects/ObjectGridItemCardCover.tsx
|
|
20827
20910
|
var import_jsx_runtime106 = require("@emotion/react/jsx-runtime");
|
|
20828
20911
|
var ObjectGridItemCardCover = (props) => {
|
|
20829
20912
|
if ("imageUrl" in props && props.imageUrl) {
|
|
20830
|
-
const { imageUrl } = props;
|
|
20831
|
-
return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
|
|
20913
|
+
const { imageUrl, srcSet } = props;
|
|
20914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
|
|
20832
20915
|
"img",
|
|
20833
20916
|
{
|
|
20834
20917
|
src: imageUrl,
|
|
20918
|
+
srcSet,
|
|
20919
|
+
alt: props.alt,
|
|
20835
20920
|
css: CoverImage,
|
|
20836
20921
|
loading: "lazy",
|
|
20837
20922
|
role: "presentation",
|
|
20838
|
-
"data-testid": "object-grid-item-thumbnail"
|
|
20923
|
+
"data-testid": "object-grid-item-thumbnail",
|
|
20924
|
+
...props
|
|
20839
20925
|
}
|
|
20840
|
-
);
|
|
20926
|
+
) });
|
|
20841
20927
|
}
|
|
20842
20928
|
if ("icon" in props && props.icon) {
|
|
20843
|
-
const { icon } = props;
|
|
20844
|
-
return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
|
|
20845
|
-
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon, iconColor: "currentColor", css: CoverIconGhost }),
|
|
20846
|
-
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon, iconColor: "currentColor", size: 48 })
|
|
20847
|
-
] });
|
|
20929
|
+
const { icon, iconColor } = props;
|
|
20930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", ...props, children: [
|
|
20931
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", css: CoverIconGhost }),
|
|
20932
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", size: 48 })
|
|
20933
|
+
] }) });
|
|
20848
20934
|
}
|
|
20849
20935
|
};
|
|
20850
20936
|
var ObjectGridItemCover = ({
|
|
20851
20937
|
coverSlotLeft,
|
|
20852
20938
|
coverSlotRight,
|
|
20939
|
+
coverSlotBottomLeft,
|
|
20940
|
+
coverSlotBottomRight,
|
|
20853
20941
|
...props
|
|
20854
20942
|
}) => {
|
|
20855
20943
|
return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
|
|
20856
20944
|
coverSlotLeft ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
|
|
20857
20945
|
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ObjectGridItemCardCover, { ...props }),
|
|
20858
|
-
coverSlotRight ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null
|
|
20946
|
+
coverSlotRight ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
|
|
20947
|
+
coverSlotBottomLeft ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlotBottom, CoverSlotBottomLeft], children: coverSlotBottomLeft }) : null,
|
|
20948
|
+
coverSlotBottomRight ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlotBottom, CoverSlotBottomRight], children: coverSlotBottomRight }) : null
|
|
20859
20949
|
] });
|
|
20860
20950
|
};
|
|
20861
20951
|
var ObjectGridItemCoverButton = ({
|
|
20862
20952
|
id,
|
|
20863
20953
|
isSelected,
|
|
20864
20954
|
onSelection,
|
|
20865
|
-
coverSlotLeft,
|
|
20866
|
-
coverSlotRight,
|
|
20867
20955
|
selectedText = "selected",
|
|
20868
20956
|
...props
|
|
20869
20957
|
}) => {
|
|
20870
|
-
return /* @__PURE__ */ (0, import_jsx_runtime106.
|
|
20871
|
-
|
|
20872
|
-
|
|
20873
|
-
|
|
20874
|
-
|
|
20875
|
-
|
|
20958
|
+
return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
|
|
20959
|
+
"button",
|
|
20960
|
+
{
|
|
20961
|
+
type: "button",
|
|
20962
|
+
css: CoverButton,
|
|
20963
|
+
onClick: (e) => {
|
|
20964
|
+
e.stopPropagation();
|
|
20965
|
+
onSelection(id);
|
|
20966
|
+
},
|
|
20967
|
+
"aria-selected": isSelected,
|
|
20968
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
|
|
20969
|
+
ObjectGridItemCover,
|
|
20970
|
+
{
|
|
20971
|
+
...props,
|
|
20972
|
+
coverSlotBottomRight: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: CoverSelectedChip, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
|
|
20973
|
+
}
|
|
20974
|
+
)
|
|
20975
|
+
}
|
|
20976
|
+
);
|
|
20876
20977
|
};
|
|
20877
20978
|
|
|
20878
20979
|
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
20879
20980
|
init_emotion_jsx_shim();
|
|
20880
|
-
var
|
|
20981
|
+
var import_react126 = require("react");
|
|
20881
20982
|
|
|
20882
20983
|
// src/components/Objects/styles/ObjectGridItemHeading.styles.ts
|
|
20883
20984
|
init_emotion_jsx_shim();
|
|
20884
|
-
var
|
|
20885
|
-
var ObjectGridItemHeading =
|
|
20985
|
+
var import_react125 = require("@emotion/react");
|
|
20986
|
+
var ObjectGridItemHeading = import_react125.css`
|
|
20987
|
+
color: var(--gray-500);
|
|
20886
20988
|
overflow: hidden;
|
|
20887
20989
|
text-overflow: ellipsis;
|
|
20888
|
-
white-space:
|
|
20889
|
-
|
|
20890
|
-
-
|
|
20891
|
-
-
|
|
20990
|
+
white-space: nowrap;
|
|
20991
|
+
min-width: 0;
|
|
20992
|
+
max-width: 100%;
|
|
20993
|
+
font-size: var(--fs-sm);
|
|
20892
20994
|
`;
|
|
20893
|
-
var PopoverContent =
|
|
20995
|
+
var PopoverContent = import_react125.css`
|
|
20894
20996
|
min-width: 50px;
|
|
20895
20997
|
`;
|
|
20896
20998
|
|
|
@@ -20899,11 +21001,16 @@ var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
|
|
|
20899
21001
|
var ObjectGridItemHeading2 = ({
|
|
20900
21002
|
heading,
|
|
20901
21003
|
beforeHeadingSlot,
|
|
20902
|
-
afterHeadingSlot
|
|
21004
|
+
afterHeadingSlot,
|
|
21005
|
+
tooltip,
|
|
21006
|
+
...props
|
|
20903
21007
|
}) => {
|
|
20904
|
-
const [hasTruncation, setHasTruncation] = (0,
|
|
20905
|
-
const headingRef = (0,
|
|
20906
|
-
|
|
21008
|
+
const [hasTruncation, setHasTruncation] = (0, import_react126.useState)(false);
|
|
21009
|
+
const headingRef = (0, import_react126.useRef)(null);
|
|
21010
|
+
const onStopPropagation = (e) => {
|
|
21011
|
+
e.stopPropagation();
|
|
21012
|
+
};
|
|
21013
|
+
(0, import_react126.useEffect)(() => {
|
|
20907
21014
|
const currentHeading = headingRef.current;
|
|
20908
21015
|
const observer = new ResizeObserver((entries) => {
|
|
20909
21016
|
for (const entry of entries) {
|
|
@@ -20920,10 +21027,10 @@ var ObjectGridItemHeading2 = ({
|
|
|
20920
21027
|
}
|
|
20921
21028
|
};
|
|
20922
21029
|
}, []);
|
|
20923
|
-
return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
20924
|
-
beforeHeadingSlot,
|
|
20925
|
-
/* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Tooltip, { title: hasTruncation ?
|
|
20926
|
-
afterHeadingSlot
|
|
21030
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", css: { minWidth: 0 }, children: [
|
|
21031
|
+
beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: beforeHeadingSlot }) : null,
|
|
21032
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Tooltip, { title: hasTruncation && tooltip ? tooltip : "", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, ...props, children: heading }) }),
|
|
21033
|
+
afterHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: afterHeadingSlot }) : null
|
|
20927
21034
|
] });
|
|
20928
21035
|
};
|
|
20929
21036
|
|
|
@@ -20934,9 +21041,10 @@ var ObjectGridItemIconWithTooltip = ({
|
|
|
20934
21041
|
tooltipTitle,
|
|
20935
21042
|
placement = "bottom-start",
|
|
20936
21043
|
icon,
|
|
20937
|
-
iconColor = "accent-dark"
|
|
21044
|
+
iconColor = "accent-dark",
|
|
21045
|
+
...props
|
|
20938
21046
|
}) => {
|
|
20939
|
-
return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
21047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Tooltip, { title: tooltipTitle, placement, ...props, css: { minWidth: "max-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { css: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
20940
21048
|
};
|
|
20941
21049
|
|
|
20942
21050
|
// src/components/Objects/ObjectGridItemLoadingSkeleton.tsx
|
|
@@ -20944,15 +21052,15 @@ init_emotion_jsx_shim();
|
|
|
20944
21052
|
|
|
20945
21053
|
// src/components/Objects/styles/ObjectGridItemLoadingSkeleton.styles.ts
|
|
20946
21054
|
init_emotion_jsx_shim();
|
|
20947
|
-
var
|
|
20948
|
-
var ObjectGridItemLoadingSkeleton =
|
|
21055
|
+
var import_react127 = require("@emotion/react");
|
|
21056
|
+
var ObjectGridItemLoadingSkeleton = import_react127.css`
|
|
20949
21057
|
border-radius: var(--rounded-base);
|
|
20950
21058
|
display: flex;
|
|
20951
21059
|
flex-direction: column;
|
|
20952
21060
|
gap: var(--spacing-sm);
|
|
20953
21061
|
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
20954
21062
|
`;
|
|
20955
|
-
var ObjectGridItemLoadingText = (textLength) =>
|
|
21063
|
+
var ObjectGridItemLoadingText = (textLength) => import_react127.css`
|
|
20956
21064
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
20957
21065
|
border-radius: var(--rounded-base);
|
|
20958
21066
|
background: var(--gray-300);
|
|
@@ -20960,7 +21068,7 @@ var ObjectGridItemLoadingText = (textLength) => import_react126.css`
|
|
|
20960
21068
|
width: clamp(24px, 100%, ${textLength});
|
|
20961
21069
|
height: var(--fs-base);
|
|
20962
21070
|
`;
|
|
20963
|
-
var ObjectGridItemLoadingImageWrapper =
|
|
21071
|
+
var ObjectGridItemLoadingImageWrapper = import_react127.css`
|
|
20964
21072
|
aspect-ratio: 16/9;
|
|
20965
21073
|
max-width: 100%;
|
|
20966
21074
|
max-height: 100%;
|
|
@@ -20968,7 +21076,7 @@ var ObjectGridItemLoadingImageWrapper = import_react126.css`
|
|
|
20968
21076
|
padding: var(--spacing-sm);
|
|
20969
21077
|
overflow: hidden;
|
|
20970
21078
|
`;
|
|
20971
|
-
var ObjectGridItemLoadingImage =
|
|
21079
|
+
var ObjectGridItemLoadingImage = import_react127.css`
|
|
20972
21080
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
20973
21081
|
border-radius: var(--rounded-base);
|
|
20974
21082
|
background: var(--gray-300);
|
|
@@ -20977,11 +21085,11 @@ var ObjectGridItemLoadingImage = import_react126.css`
|
|
|
20977
21085
|
height: auto;
|
|
20978
21086
|
aspect-ratio: 1;
|
|
20979
21087
|
`;
|
|
20980
|
-
var ObjectGridItemLoadingContentWrapper =
|
|
21088
|
+
var ObjectGridItemLoadingContentWrapper = import_react127.css`
|
|
20981
21089
|
padding: 0 var(--spacing-sm) var(--spacing-sm);
|
|
20982
21090
|
min-height: 52px;
|
|
20983
21091
|
`;
|
|
20984
|
-
var ObjectGridItemLoadingContentContainer =
|
|
21092
|
+
var ObjectGridItemLoadingContentContainer = import_react127.css`
|
|
20985
21093
|
flex-grow: 1;
|
|
20986
21094
|
gap: var(--spacing-xs);
|
|
20987
21095
|
`;
|
|
@@ -21018,8 +21126,8 @@ init_emotion_jsx_shim();
|
|
|
21018
21126
|
|
|
21019
21127
|
// src/components/Objects/styles/ObjectListItem.styles.ts
|
|
21020
21128
|
init_emotion_jsx_shim();
|
|
21021
|
-
var
|
|
21022
|
-
var ObjectListItem =
|
|
21129
|
+
var import_react128 = require("@emotion/react");
|
|
21130
|
+
var ObjectListItem = import_react128.css`
|
|
21023
21131
|
background: var(--white);
|
|
21024
21132
|
display: grid;
|
|
21025
21133
|
gap: var(--spacing-sm);
|
|
@@ -21032,10 +21140,10 @@ var ObjectListItem = import_react127.css`
|
|
|
21032
21140
|
background: var(--gray-50);
|
|
21033
21141
|
}
|
|
21034
21142
|
`;
|
|
21035
|
-
var ObjectListItemSingle =
|
|
21143
|
+
var ObjectListItemSingle = import_react128.css`
|
|
21036
21144
|
align-items: center;
|
|
21037
21145
|
`;
|
|
21038
|
-
var ObjectListItemContentWrapper =
|
|
21146
|
+
var ObjectListItemContentWrapper = import_react128.css`
|
|
21039
21147
|
display: grid;
|
|
21040
21148
|
gap: var(--spacing-sm);
|
|
21041
21149
|
justify-content: space-between;
|
|
@@ -21045,16 +21153,16 @@ var ObjectListItemContentWrapper = import_react127.css`
|
|
|
21045
21153
|
grid-template-columns: auto 1fr auto;
|
|
21046
21154
|
}
|
|
21047
21155
|
`;
|
|
21048
|
-
var ObjectListItemRightSlot =
|
|
21156
|
+
var ObjectListItemRightSlot = import_react128.css`
|
|
21049
21157
|
display: flex;
|
|
21050
21158
|
gap: var(--spacing-sm);
|
|
21051
21159
|
`;
|
|
21052
|
-
var ObjectListItemContainer =
|
|
21160
|
+
var ObjectListItemContainer = import_react128.css`
|
|
21053
21161
|
> [role='listitem'] {
|
|
21054
21162
|
border-top: 1px solid var(--gray-200);
|
|
21055
21163
|
}
|
|
21056
21164
|
`;
|
|
21057
|
-
var ObjectListItemCover =
|
|
21165
|
+
var ObjectListItemCover = import_react128.css`
|
|
21058
21166
|
align-items: center;
|
|
21059
21167
|
background: var(--gray-100);
|
|
21060
21168
|
color: var(--gray-500);
|
|
@@ -21064,12 +21172,12 @@ var ObjectListItemCover = import_react127.css`
|
|
|
21064
21172
|
text-align: center;
|
|
21065
21173
|
font-size: var(--fs-xs);
|
|
21066
21174
|
`;
|
|
21067
|
-
var ObjectListItemImage =
|
|
21175
|
+
var ObjectListItemImage = import_react128.css`
|
|
21068
21176
|
object-fit: cover;
|
|
21069
21177
|
width: 100%;
|
|
21070
21178
|
height: 100%;
|
|
21071
21179
|
`;
|
|
21072
|
-
var ObjectListItemLoading =
|
|
21180
|
+
var ObjectListItemLoading = import_react128.css`
|
|
21073
21181
|
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
21074
21182
|
background: var(--white);
|
|
21075
21183
|
display: flex;
|
|
@@ -21077,10 +21185,10 @@ var ObjectListItemLoading = import_react127.css`
|
|
|
21077
21185
|
flex-grow: 1;
|
|
21078
21186
|
padding: var(--spacing-sm);
|
|
21079
21187
|
`;
|
|
21080
|
-
var ObjectListItemLoadingInner =
|
|
21188
|
+
var ObjectListItemLoadingInner = import_react128.css`
|
|
21081
21189
|
flex-grow: 1;
|
|
21082
21190
|
`;
|
|
21083
|
-
var ObjectListItemLoadingText = (textLength) =>
|
|
21191
|
+
var ObjectListItemLoadingText = (textLength) => import_react128.css`
|
|
21084
21192
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
21085
21193
|
border-radius: var(--rounded-base);
|
|
21086
21194
|
background: var(--gray-300);
|
|
@@ -21088,7 +21196,7 @@ var ObjectListItemLoadingText = (textLength) => import_react127.css`
|
|
|
21088
21196
|
width: clamp(10ch, 100%, ${textLength});
|
|
21089
21197
|
height: var(--fs-base);
|
|
21090
21198
|
`;
|
|
21091
|
-
var ObjectListItemLoadingImage =
|
|
21199
|
+
var ObjectListItemLoadingImage = import_react128.css`
|
|
21092
21200
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
21093
21201
|
border-radius: var(--rounded-base);
|
|
21094
21202
|
background: var(--gray-300);
|
|
@@ -21096,7 +21204,7 @@ var ObjectListItemLoadingImage = import_react127.css`
|
|
|
21096
21204
|
width: 80px;
|
|
21097
21205
|
height: 55px;
|
|
21098
21206
|
`;
|
|
21099
|
-
var ObjectListItemHeadingWrapper =
|
|
21207
|
+
var ObjectListItemHeadingWrapper = import_react128.css`
|
|
21100
21208
|
display: flex;
|
|
21101
21209
|
gap: var(--spacing-xs);
|
|
21102
21210
|
`;
|
|
@@ -21198,8 +21306,8 @@ init_emotion_jsx_shim();
|
|
|
21198
21306
|
|
|
21199
21307
|
// src/components/Objects/styles/ObjectListItemHeading.styles.ts
|
|
21200
21308
|
init_emotion_jsx_shim();
|
|
21201
|
-
var
|
|
21202
|
-
var ObjectListItemHeading =
|
|
21309
|
+
var import_react129 = require("@emotion/react");
|
|
21310
|
+
var ObjectListItemHeading = import_react129.css`
|
|
21203
21311
|
display: flex;
|
|
21204
21312
|
flex-direction: column;
|
|
21205
21313
|
gap: var(--spacing-xs);
|
|
@@ -21209,7 +21317,7 @@ var ObjectListItemHeading = import_react128.css`
|
|
|
21209
21317
|
flex-direction: row;
|
|
21210
21318
|
}
|
|
21211
21319
|
`;
|
|
21212
|
-
var ObjectListItemHeadingAfterWrapper =
|
|
21320
|
+
var ObjectListItemHeadingAfterWrapper = import_react129.css`
|
|
21213
21321
|
line-height: 1.25;
|
|
21214
21322
|
`;
|
|
21215
21323
|
|
|
@@ -21304,8 +21412,8 @@ function Pagination({
|
|
|
21304
21412
|
|
|
21305
21413
|
// src/components/ParameterInputs/hooks/ParameterShellContext.tsx
|
|
21306
21414
|
init_emotion_jsx_shim();
|
|
21307
|
-
var
|
|
21308
|
-
var ParameterShellContext = (0,
|
|
21415
|
+
var import_react130 = require("react");
|
|
21416
|
+
var ParameterShellContext = (0, import_react130.createContext)({
|
|
21309
21417
|
id: "",
|
|
21310
21418
|
label: "",
|
|
21311
21419
|
hiddenLabel: void 0,
|
|
@@ -21314,7 +21422,7 @@ var ParameterShellContext = (0, import_react129.createContext)({
|
|
|
21314
21422
|
}
|
|
21315
21423
|
});
|
|
21316
21424
|
var useParameterShell = () => {
|
|
21317
|
-
const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0,
|
|
21425
|
+
const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react130.useContext)(ParameterShellContext);
|
|
21318
21426
|
return {
|
|
21319
21427
|
id,
|
|
21320
21428
|
label,
|
|
@@ -21329,8 +21437,8 @@ init_emotion_jsx_shim();
|
|
|
21329
21437
|
|
|
21330
21438
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
21331
21439
|
init_emotion_jsx_shim();
|
|
21332
|
-
var
|
|
21333
|
-
var inputIconBtn =
|
|
21440
|
+
var import_react131 = require("@emotion/react");
|
|
21441
|
+
var inputIconBtn = import_react131.css`
|
|
21334
21442
|
align-items: center;
|
|
21335
21443
|
border: none;
|
|
21336
21444
|
border-radius: var(--rounded-base);
|
|
@@ -21399,8 +21507,8 @@ init_emotion_jsx_shim();
|
|
|
21399
21507
|
|
|
21400
21508
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
21401
21509
|
init_emotion_jsx_shim();
|
|
21402
|
-
var
|
|
21403
|
-
var inputContainer2 =
|
|
21510
|
+
var import_react132 = require("@emotion/react");
|
|
21511
|
+
var inputContainer2 = import_react132.css`
|
|
21404
21512
|
position: relative;
|
|
21405
21513
|
scroll-margin: var(--spacing-2xl);
|
|
21406
21514
|
|
|
@@ -21413,14 +21521,14 @@ var inputContainer2 = import_react131.css`
|
|
|
21413
21521
|
}
|
|
21414
21522
|
}
|
|
21415
21523
|
`;
|
|
21416
|
-
var labelText2 =
|
|
21524
|
+
var labelText2 = import_react132.css`
|
|
21417
21525
|
align-items: center;
|
|
21418
21526
|
display: flex;
|
|
21419
21527
|
gap: var(--spacing-xs);
|
|
21420
21528
|
font-weight: var(--fw-regular);
|
|
21421
21529
|
margin: 0 0 var(--spacing-xs);
|
|
21422
21530
|
`;
|
|
21423
|
-
var input3 =
|
|
21531
|
+
var input3 = import_react132.css`
|
|
21424
21532
|
display: block;
|
|
21425
21533
|
appearance: none;
|
|
21426
21534
|
box-sizing: border-box;
|
|
@@ -21468,18 +21576,18 @@ var input3 = import_react131.css`
|
|
|
21468
21576
|
color: var(--gray-400);
|
|
21469
21577
|
}
|
|
21470
21578
|
`;
|
|
21471
|
-
var selectInput =
|
|
21579
|
+
var selectInput = import_react132.css`
|
|
21472
21580
|
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");
|
|
21473
21581
|
background-position: right var(--spacing-sm) center;
|
|
21474
21582
|
background-repeat: no-repeat;
|
|
21475
21583
|
background-size: 1rem;
|
|
21476
21584
|
padding-right: var(--spacing-xl);
|
|
21477
21585
|
`;
|
|
21478
|
-
var inputWrapper =
|
|
21586
|
+
var inputWrapper = import_react132.css`
|
|
21479
21587
|
display: flex; // used to correct overflow with chrome textarea
|
|
21480
21588
|
position: relative;
|
|
21481
21589
|
`;
|
|
21482
|
-
var inputIcon2 =
|
|
21590
|
+
var inputIcon2 = import_react132.css`
|
|
21483
21591
|
align-items: center;
|
|
21484
21592
|
background: var(--white);
|
|
21485
21593
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -21495,7 +21603,7 @@ var inputIcon2 = import_react131.css`
|
|
|
21495
21603
|
width: var(--spacing-lg);
|
|
21496
21604
|
z-index: var(--z-10);
|
|
21497
21605
|
`;
|
|
21498
|
-
var inputToggleLabel2 =
|
|
21606
|
+
var inputToggleLabel2 = import_react132.css`
|
|
21499
21607
|
--inline-label-color: var(--typography-base);
|
|
21500
21608
|
align-items: center;
|
|
21501
21609
|
cursor: pointer;
|
|
@@ -21510,7 +21618,7 @@ var inputToggleLabel2 = import_react131.css`
|
|
|
21510
21618
|
--inline-label-color: var(--gray-400);
|
|
21511
21619
|
}
|
|
21512
21620
|
`;
|
|
21513
|
-
var toggleInput2 =
|
|
21621
|
+
var toggleInput2 = import_react132.css`
|
|
21514
21622
|
appearance: none;
|
|
21515
21623
|
border: 1px solid var(--gray-200);
|
|
21516
21624
|
background: var(--white);
|
|
@@ -21564,7 +21672,7 @@ var toggleInput2 = import_react131.css`
|
|
|
21564
21672
|
border-color: var(--gray-300);
|
|
21565
21673
|
}
|
|
21566
21674
|
`;
|
|
21567
|
-
var inlineLabel2 =
|
|
21675
|
+
var inlineLabel2 = import_react132.css`
|
|
21568
21676
|
color: var(--inline-label-color);
|
|
21569
21677
|
padding-left: var(--spacing-md);
|
|
21570
21678
|
font-size: var(--fs-sm);
|
|
@@ -21581,7 +21689,7 @@ var inlineLabel2 = import_react131.css`
|
|
|
21581
21689
|
}
|
|
21582
21690
|
}
|
|
21583
21691
|
`;
|
|
21584
|
-
var inputMenu =
|
|
21692
|
+
var inputMenu = import_react132.css`
|
|
21585
21693
|
background: none;
|
|
21586
21694
|
border: none;
|
|
21587
21695
|
padding: var(--spacing-2xs);
|
|
@@ -21589,10 +21697,10 @@ var inputMenu = import_react131.css`
|
|
|
21589
21697
|
top: calc(var(--spacing-md) * -1.2);
|
|
21590
21698
|
right: 0;
|
|
21591
21699
|
`;
|
|
21592
|
-
var inputActionItems =
|
|
21700
|
+
var inputActionItems = import_react132.css`
|
|
21593
21701
|
display: flex;
|
|
21594
21702
|
`;
|
|
21595
|
-
var inputMenuHover =
|
|
21703
|
+
var inputMenuHover = import_react132.css`
|
|
21596
21704
|
opacity: var(--opacity-50);
|
|
21597
21705
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
21598
21706
|
|
|
@@ -21602,11 +21710,11 @@ var inputMenuHover = import_react131.css`
|
|
|
21602
21710
|
background-color: var(--gray-200);
|
|
21603
21711
|
}
|
|
21604
21712
|
`;
|
|
21605
|
-
var textarea2 =
|
|
21713
|
+
var textarea2 = import_react132.css`
|
|
21606
21714
|
resize: vertical;
|
|
21607
21715
|
min-height: 2rem;
|
|
21608
21716
|
`;
|
|
21609
|
-
var dataConnectButton =
|
|
21717
|
+
var dataConnectButton = import_react132.css`
|
|
21610
21718
|
align-items: center;
|
|
21611
21719
|
appearance: none;
|
|
21612
21720
|
box-sizing: border-box;
|
|
@@ -21642,7 +21750,7 @@ var dataConnectButton = import_react131.css`
|
|
|
21642
21750
|
pointer-events: none;
|
|
21643
21751
|
}
|
|
21644
21752
|
`;
|
|
21645
|
-
var linkParameterBtn =
|
|
21753
|
+
var linkParameterBtn = import_react132.css`
|
|
21646
21754
|
border-radius: var(--rounded-base);
|
|
21647
21755
|
background: transparent;
|
|
21648
21756
|
border: none;
|
|
@@ -21651,7 +21759,7 @@ var linkParameterBtn = import_react131.css`
|
|
|
21651
21759
|
font-size: var(--fs-sm);
|
|
21652
21760
|
line-height: 1;
|
|
21653
21761
|
`;
|
|
21654
|
-
var linkParameterControls =
|
|
21762
|
+
var linkParameterControls = import_react132.css`
|
|
21655
21763
|
position: absolute;
|
|
21656
21764
|
inset: 0 0 0 auto;
|
|
21657
21765
|
padding: 0 var(--spacing-base);
|
|
@@ -21660,7 +21768,7 @@ var linkParameterControls = import_react131.css`
|
|
|
21660
21768
|
justify-content: center;
|
|
21661
21769
|
gap: var(--spacing-base);
|
|
21662
21770
|
`;
|
|
21663
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
21771
|
+
var linkParameterInput = (withExternalLinkIcon) => import_react132.css`
|
|
21664
21772
|
padding-right: calc(
|
|
21665
21773
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
21666
21774
|
var(--spacing-base)
|
|
@@ -21673,7 +21781,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react131.css`
|
|
|
21673
21781
|
}
|
|
21674
21782
|
}
|
|
21675
21783
|
`;
|
|
21676
|
-
var linkParameterIcon =
|
|
21784
|
+
var linkParameterIcon = import_react132.css`
|
|
21677
21785
|
align-items: center;
|
|
21678
21786
|
color: var(--brand-secondary-3);
|
|
21679
21787
|
display: flex;
|
|
@@ -21726,20 +21834,20 @@ init_emotion_jsx_shim();
|
|
|
21726
21834
|
|
|
21727
21835
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
21728
21836
|
init_emotion_jsx_shim();
|
|
21729
|
-
var
|
|
21730
|
-
var ParameterDrawerHeaderContainer =
|
|
21837
|
+
var import_react133 = require("@emotion/react");
|
|
21838
|
+
var ParameterDrawerHeaderContainer = import_react133.css`
|
|
21731
21839
|
align-items: center;
|
|
21732
21840
|
display: flex;
|
|
21733
21841
|
gap: var(--spacing-base);
|
|
21734
21842
|
justify-content: space-between;
|
|
21735
21843
|
margin-bottom: var(--spacing-sm);
|
|
21736
21844
|
`;
|
|
21737
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
21845
|
+
var ParameterDrawerHeaderTitleGroup = import_react133.css`
|
|
21738
21846
|
align-items: center;
|
|
21739
21847
|
display: flex;
|
|
21740
21848
|
gap: var(--spacing-sm);
|
|
21741
21849
|
`;
|
|
21742
|
-
var ParameterDrawerHeaderTitle =
|
|
21850
|
+
var ParameterDrawerHeaderTitle = import_react133.css`
|
|
21743
21851
|
text-overflow: ellipsis;
|
|
21744
21852
|
white-space: nowrap;
|
|
21745
21853
|
overflow: hidden;
|
|
@@ -21760,12 +21868,12 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
|
21760
21868
|
|
|
21761
21869
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
21762
21870
|
init_emotion_jsx_shim();
|
|
21763
|
-
var
|
|
21871
|
+
var import_react135 = require("react");
|
|
21764
21872
|
|
|
21765
21873
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
21766
21874
|
init_emotion_jsx_shim();
|
|
21767
|
-
var
|
|
21768
|
-
var fieldsetStyles =
|
|
21875
|
+
var import_react134 = require("@emotion/react");
|
|
21876
|
+
var fieldsetStyles = import_react134.css`
|
|
21769
21877
|
&:disabled,
|
|
21770
21878
|
[readonly] {
|
|
21771
21879
|
pointer-events: none;
|
|
@@ -21776,7 +21884,7 @@ var fieldsetStyles = import_react133.css`
|
|
|
21776
21884
|
}
|
|
21777
21885
|
}
|
|
21778
21886
|
`;
|
|
21779
|
-
var fieldsetLegend2 =
|
|
21887
|
+
var fieldsetLegend2 = import_react134.css`
|
|
21780
21888
|
display: block;
|
|
21781
21889
|
font-weight: var(--fw-medium);
|
|
21782
21890
|
margin-bottom: var(--spacing-sm);
|
|
@@ -21785,7 +21893,7 @@ var fieldsetLegend2 = import_react133.css`
|
|
|
21785
21893
|
|
|
21786
21894
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
21787
21895
|
var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
|
|
21788
|
-
var ParameterGroup = (0,
|
|
21896
|
+
var ParameterGroup = (0, import_react135.forwardRef)(
|
|
21789
21897
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
21790
21898
|
return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
21791
21899
|
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)("legend", { css: fieldsetLegend2, children: legend }),
|
|
@@ -21796,24 +21904,24 @@ var ParameterGroup = (0, import_react134.forwardRef)(
|
|
|
21796
21904
|
|
|
21797
21905
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
21798
21906
|
init_emotion_jsx_shim();
|
|
21799
|
-
var
|
|
21907
|
+
var import_react142 = require("react");
|
|
21800
21908
|
|
|
21801
21909
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
21802
21910
|
init_emotion_jsx_shim();
|
|
21803
|
-
var
|
|
21911
|
+
var import_react137 = require("react");
|
|
21804
21912
|
var import_react_dom2 = require("react-dom");
|
|
21805
21913
|
|
|
21806
21914
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
21807
21915
|
init_emotion_jsx_shim();
|
|
21808
|
-
var
|
|
21809
|
-
var previewWrapper =
|
|
21916
|
+
var import_react136 = require("@emotion/react");
|
|
21917
|
+
var previewWrapper = import_react136.css`
|
|
21810
21918
|
margin-top: var(--spacing-xs);
|
|
21811
21919
|
background: var(--gray-50);
|
|
21812
21920
|
padding: var(--spacing-sm);
|
|
21813
21921
|
border: solid 1px var(--gray-300);
|
|
21814
21922
|
border-radius: var(--rounded-sm);
|
|
21815
21923
|
`;
|
|
21816
|
-
var previewLink =
|
|
21924
|
+
var previewLink = import_react136.css`
|
|
21817
21925
|
display: block;
|
|
21818
21926
|
width: 100%;
|
|
21819
21927
|
|
|
@@ -21821,7 +21929,7 @@ var previewLink = import_react135.css`
|
|
|
21821
21929
|
max-height: 9rem;
|
|
21822
21930
|
}
|
|
21823
21931
|
`;
|
|
21824
|
-
var previewModalWrapper =
|
|
21932
|
+
var previewModalWrapper = import_react136.css`
|
|
21825
21933
|
background: var(--gray-50);
|
|
21826
21934
|
display: flex;
|
|
21827
21935
|
height: 100%;
|
|
@@ -21830,7 +21938,7 @@ var previewModalWrapper = import_react135.css`
|
|
|
21830
21938
|
border: solid 1px var(--gray-300);
|
|
21831
21939
|
border-radius: var(--rounded-sm);
|
|
21832
21940
|
`;
|
|
21833
|
-
var previewModalImage =
|
|
21941
|
+
var previewModalImage = import_react136.css`
|
|
21834
21942
|
display: flex;
|
|
21835
21943
|
height: 100%;
|
|
21836
21944
|
width: 100%;
|
|
@@ -21844,7 +21952,7 @@ var previewModalImage = import_react135.css`
|
|
|
21844
21952
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
21845
21953
|
var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
|
|
21846
21954
|
function ParameterImagePreview({ imageSrc }) {
|
|
21847
|
-
const [showModal, setShowModal] = (0,
|
|
21955
|
+
const [showModal, setShowModal] = (0, import_react137.useState)(false);
|
|
21848
21956
|
return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { css: previewWrapper, children: [
|
|
21849
21957
|
/* @__PURE__ */ (0, import_jsx_runtime120.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
21850
21958
|
/* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
@@ -21876,8 +21984,8 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
21876
21984
|
|
|
21877
21985
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
21878
21986
|
init_emotion_jsx_shim();
|
|
21879
|
-
var
|
|
21880
|
-
var
|
|
21987
|
+
var import_react140 = require("@emotion/react");
|
|
21988
|
+
var import_react141 = require("react");
|
|
21881
21989
|
|
|
21882
21990
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
21883
21991
|
init_emotion_jsx_shim();
|
|
@@ -21888,9 +21996,9 @@ var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
|
|
|
21888
21996
|
|
|
21889
21997
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
21890
21998
|
init_emotion_jsx_shim();
|
|
21891
|
-
var
|
|
21999
|
+
var import_react138 = require("react");
|
|
21892
22000
|
var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
|
|
21893
|
-
var ParameterMenuButton = (0,
|
|
22001
|
+
var ParameterMenuButton = (0, import_react138.forwardRef)(
|
|
21894
22002
|
({ label, children }, ref) => {
|
|
21895
22003
|
return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
21896
22004
|
Menu,
|
|
@@ -21915,14 +22023,14 @@ var ParameterMenuButton = (0, import_react137.forwardRef)(
|
|
|
21915
22023
|
|
|
21916
22024
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
21917
22025
|
init_emotion_jsx_shim();
|
|
21918
|
-
var
|
|
21919
|
-
var emptyParameterShell =
|
|
22026
|
+
var import_react139 = require("@emotion/react");
|
|
22027
|
+
var emptyParameterShell = import_react139.css`
|
|
21920
22028
|
border-radius: var(--rounded-sm);
|
|
21921
22029
|
flex-grow: 1;
|
|
21922
22030
|
position: relative;
|
|
21923
22031
|
max-width: 100%;
|
|
21924
22032
|
`;
|
|
21925
|
-
var emptyParameterShellText =
|
|
22033
|
+
var emptyParameterShellText = import_react139.css`
|
|
21926
22034
|
background: var(--brand-secondary-6);
|
|
21927
22035
|
border-radius: var(--rounded-sm);
|
|
21928
22036
|
padding: var(--spacing-sm);
|
|
@@ -21930,7 +22038,7 @@ var emptyParameterShellText = import_react138.css`
|
|
|
21930
22038
|
font-size: var(--fs-sm);
|
|
21931
22039
|
margin: 0;
|
|
21932
22040
|
`;
|
|
21933
|
-
var overrideMarker =
|
|
22041
|
+
var overrideMarker = import_react139.css`
|
|
21934
22042
|
border-radius: var(--rounded-sm);
|
|
21935
22043
|
border: 10px solid var(--gray-300);
|
|
21936
22044
|
border-left-color: transparent;
|
|
@@ -22001,7 +22109,7 @@ var ParameterShell = ({
|
|
|
22001
22109
|
isParameterGroup = false,
|
|
22002
22110
|
...props
|
|
22003
22111
|
}) => {
|
|
22004
|
-
const [manualErrorMessage, setManualErrorMessage] = (0,
|
|
22112
|
+
const [manualErrorMessage, setManualErrorMessage] = (0, import_react141.useState)(void 0);
|
|
22005
22113
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
22006
22114
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
22007
22115
|
return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: inputContainer2, ...props, id, children: [
|
|
@@ -22022,7 +22130,7 @@ var ParameterShell = ({
|
|
|
22022
22130
|
css: [
|
|
22023
22131
|
inputMenu,
|
|
22024
22132
|
inputActionItems,
|
|
22025
|
-
menuItems ?
|
|
22133
|
+
menuItems ? import_react140.css`
|
|
22026
22134
|
right: var(--spacing-md);
|
|
22027
22135
|
` : void 0
|
|
22028
22136
|
],
|
|
@@ -22067,7 +22175,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime1
|
|
|
22067
22175
|
|
|
22068
22176
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
22069
22177
|
var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
|
|
22070
|
-
var ParameterImage = (0,
|
|
22178
|
+
var ParameterImage = (0, import_react142.forwardRef)(
|
|
22071
22179
|
({ children, ...props }, ref) => {
|
|
22072
22180
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22073
22181
|
return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
@@ -22076,10 +22184,10 @@ var ParameterImage = (0, import_react141.forwardRef)(
|
|
|
22076
22184
|
] });
|
|
22077
22185
|
}
|
|
22078
22186
|
);
|
|
22079
|
-
var ParameterImageInner = (0,
|
|
22187
|
+
var ParameterImageInner = (0, import_react142.forwardRef)((props, ref) => {
|
|
22080
22188
|
const { value } = props;
|
|
22081
22189
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
22082
|
-
const deferredValue = (0,
|
|
22190
|
+
const deferredValue = (0, import_react142.useDeferredValue)(value);
|
|
22083
22191
|
return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
|
|
22084
22192
|
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
22085
22193
|
"input",
|
|
@@ -22099,13 +22207,13 @@ var ParameterImageInner = (0, import_react141.forwardRef)((props, ref) => {
|
|
|
22099
22207
|
|
|
22100
22208
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
22101
22209
|
init_emotion_jsx_shim();
|
|
22102
|
-
var
|
|
22210
|
+
var import_react143 = require("react");
|
|
22103
22211
|
var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
|
|
22104
|
-
var ParameterInput = (0,
|
|
22212
|
+
var ParameterInput = (0, import_react143.forwardRef)((props, ref) => {
|
|
22105
22213
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22106
22214
|
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ParameterInputInner, { ref, ...innerProps }) });
|
|
22107
22215
|
});
|
|
22108
|
-
var ParameterInputInner = (0,
|
|
22216
|
+
var ParameterInputInner = (0, import_react143.forwardRef)(
|
|
22109
22217
|
({ ...props }, ref) => {
|
|
22110
22218
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
22111
22219
|
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
@@ -22125,9 +22233,9 @@ var ParameterInputInner = (0, import_react142.forwardRef)(
|
|
|
22125
22233
|
|
|
22126
22234
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
22127
22235
|
init_emotion_jsx_shim();
|
|
22128
|
-
var
|
|
22236
|
+
var import_react144 = require("react");
|
|
22129
22237
|
var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
|
|
22130
|
-
var ParameterLink = (0,
|
|
22238
|
+
var ParameterLink = (0, import_react144.forwardRef)(
|
|
22131
22239
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
22132
22240
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22133
22241
|
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
@@ -22150,7 +22258,7 @@ var ParameterLink = (0, import_react143.forwardRef)(
|
|
|
22150
22258
|
);
|
|
22151
22259
|
}
|
|
22152
22260
|
);
|
|
22153
|
-
var ParameterLinkInner = (0,
|
|
22261
|
+
var ParameterLinkInner = (0, import_react144.forwardRef)(
|
|
22154
22262
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
22155
22263
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
22156
22264
|
if (!props.value)
|
|
@@ -22335,7 +22443,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
22335
22443
|
|
|
22336
22444
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22337
22445
|
init_emotion_jsx_shim();
|
|
22338
|
-
var
|
|
22446
|
+
var import_react158 = require("@emotion/react");
|
|
22339
22447
|
var import_list3 = require("@lexical/list");
|
|
22340
22448
|
var import_markdown = require("@lexical/markdown");
|
|
22341
22449
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
@@ -22458,7 +22566,7 @@ var getLabelForElement = (type) => {
|
|
|
22458
22566
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22459
22567
|
var import_fast_equals2 = require("fast-equals");
|
|
22460
22568
|
var import_lexical10 = require("lexical");
|
|
22461
|
-
var
|
|
22569
|
+
var import_react159 = require("react");
|
|
22462
22570
|
|
|
22463
22571
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
22464
22572
|
init_emotion_jsx_shim();
|
|
@@ -22481,10 +22589,10 @@ init_emotion_jsx_shim();
|
|
|
22481
22589
|
var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
22482
22590
|
var import_utils5 = require("@lexical/utils");
|
|
22483
22591
|
var import_lexical = require("lexical");
|
|
22484
|
-
var
|
|
22592
|
+
var import_react145 = require("react");
|
|
22485
22593
|
function DisableStylesPlugin() {
|
|
22486
22594
|
const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
|
|
22487
|
-
(0,
|
|
22595
|
+
(0, import_react145.useEffect)(() => {
|
|
22488
22596
|
return (0, import_utils5.mergeRegister)(
|
|
22489
22597
|
// Disable text alignment on paragraph nodes
|
|
22490
22598
|
editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
|
|
@@ -22745,10 +22853,10 @@ init_emotion_jsx_shim();
|
|
|
22745
22853
|
var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
|
|
22746
22854
|
var import_utils6 = require("@lexical/utils");
|
|
22747
22855
|
var import_lexical2 = require("lexical");
|
|
22748
|
-
var
|
|
22856
|
+
var import_react146 = require("react");
|
|
22749
22857
|
var ImprovedAssetSelectionPlugin = () => {
|
|
22750
22858
|
const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
|
|
22751
|
-
(0,
|
|
22859
|
+
(0, import_react146.useEffect)(() => {
|
|
22752
22860
|
editor.getRootElement();
|
|
22753
22861
|
const onRootClick = (event) => {
|
|
22754
22862
|
if (event.target !== editor.getRootElement()) {
|
|
@@ -22797,13 +22905,13 @@ var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
|
|
|
22797
22905
|
|
|
22798
22906
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
22799
22907
|
init_emotion_jsx_shim();
|
|
22800
|
-
var
|
|
22908
|
+
var import_react147 = require("@emotion/react");
|
|
22801
22909
|
var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
|
|
22802
22910
|
var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
|
|
22803
22911
|
var import_utils7 = require("@lexical/utils");
|
|
22804
22912
|
var import_fast_equals = require("fast-equals");
|
|
22805
22913
|
var import_lexical4 = require("lexical");
|
|
22806
|
-
var
|
|
22914
|
+
var import_react148 = require("react");
|
|
22807
22915
|
|
|
22808
22916
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
22809
22917
|
init_emotion_jsx_shim();
|
|
@@ -23130,16 +23238,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical4.createCommand)(
|
|
|
23130
23238
|
);
|
|
23131
23239
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
23132
23240
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
23133
|
-
var linkPopover =
|
|
23241
|
+
var linkPopover = import_react147.css`
|
|
23134
23242
|
position: absolute;
|
|
23135
23243
|
z-index: 11;
|
|
23136
23244
|
`;
|
|
23137
|
-
var linkPopoverContainer =
|
|
23245
|
+
var linkPopoverContainer = import_react147.css`
|
|
23138
23246
|
${Popover()};
|
|
23139
23247
|
align-items: center;
|
|
23140
23248
|
display: flex;
|
|
23141
23249
|
`;
|
|
23142
|
-
var linkPopoverAnchor =
|
|
23250
|
+
var linkPopoverAnchor = import_react147.css`
|
|
23143
23251
|
${link}
|
|
23144
23252
|
${linkColorDefault}
|
|
23145
23253
|
`;
|
|
@@ -23152,17 +23260,17 @@ function LinkNodePlugin({
|
|
|
23152
23260
|
return path;
|
|
23153
23261
|
};
|
|
23154
23262
|
const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
|
|
23155
|
-
const [linkPopoverState, setLinkPopoverState] = (0,
|
|
23156
|
-
const linkPopoverElRef = (0,
|
|
23157
|
-
const [isEditorFocused, setIsEditorFocused] = (0,
|
|
23158
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0,
|
|
23159
|
-
(0,
|
|
23263
|
+
const [linkPopoverState, setLinkPopoverState] = (0, import_react148.useState)();
|
|
23264
|
+
const linkPopoverElRef = (0, import_react148.useRef)(null);
|
|
23265
|
+
const [isEditorFocused, setIsEditorFocused] = (0, import_react148.useState)(false);
|
|
23266
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react148.useState)(false);
|
|
23267
|
+
(0, import_react148.useEffect)(() => {
|
|
23160
23268
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
23161
23269
|
setLinkPopoverState(void 0);
|
|
23162
23270
|
return;
|
|
23163
23271
|
}
|
|
23164
23272
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
23165
|
-
(0,
|
|
23273
|
+
(0, import_react148.useEffect)(() => {
|
|
23166
23274
|
if (!editor.hasNodes([LinkNode])) {
|
|
23167
23275
|
throw new Error("LinkNode not registered on editor");
|
|
23168
23276
|
}
|
|
@@ -23266,7 +23374,7 @@ function LinkNodePlugin({
|
|
|
23266
23374
|
)
|
|
23267
23375
|
);
|
|
23268
23376
|
}, [editor, onConnectLink]);
|
|
23269
|
-
const maybeShowLinkToolbar = (0,
|
|
23377
|
+
const maybeShowLinkToolbar = (0, import_react148.useCallback)(() => {
|
|
23270
23378
|
if (!editor.isEditable()) {
|
|
23271
23379
|
return;
|
|
23272
23380
|
}
|
|
@@ -23300,7 +23408,7 @@ function LinkNodePlugin({
|
|
|
23300
23408
|
}
|
|
23301
23409
|
});
|
|
23302
23410
|
}, [editor, positioningAnchorEl]);
|
|
23303
|
-
(0,
|
|
23411
|
+
(0, import_react148.useEffect)(() => {
|
|
23304
23412
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
23305
23413
|
requestAnimationFrame(() => {
|
|
23306
23414
|
editorState.read(() => {
|
|
@@ -23388,7 +23496,7 @@ var import_list = require("@lexical/list");
|
|
|
23388
23496
|
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
23389
23497
|
var import_utils10 = require("@lexical/utils");
|
|
23390
23498
|
var import_lexical5 = require("lexical");
|
|
23391
|
-
var
|
|
23499
|
+
var import_react149 = require("react");
|
|
23392
23500
|
function isIndentPermitted(maxDepth) {
|
|
23393
23501
|
const selection = (0, import_lexical5.$getSelection)();
|
|
23394
23502
|
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
@@ -23443,8 +23551,8 @@ function $indentOverTab(selection) {
|
|
|
23443
23551
|
}
|
|
23444
23552
|
function ListIndentPlugin({ maxDepth }) {
|
|
23445
23553
|
const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
|
|
23446
|
-
const isInListItemNode = (0,
|
|
23447
|
-
(0,
|
|
23554
|
+
const isInListItemNode = (0, import_react149.useRef)(false);
|
|
23555
|
+
(0, import_react149.useEffect)(() => {
|
|
23448
23556
|
return editor.registerCommand(
|
|
23449
23557
|
import_lexical5.SELECTION_CHANGE_COMMAND,
|
|
23450
23558
|
() => {
|
|
@@ -23461,7 +23569,7 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
23461
23569
|
import_lexical5.COMMAND_PRIORITY_NORMAL
|
|
23462
23570
|
);
|
|
23463
23571
|
}, [editor]);
|
|
23464
|
-
(0,
|
|
23572
|
+
(0, import_react149.useEffect)(() => {
|
|
23465
23573
|
return (0, import_utils10.mergeRegister)(
|
|
23466
23574
|
editor.registerCommand(
|
|
23467
23575
|
import_lexical5.INDENT_CONTENT_COMMAND,
|
|
@@ -23491,12 +23599,12 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
23491
23599
|
|
|
23492
23600
|
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
23493
23601
|
init_emotion_jsx_shim();
|
|
23494
|
-
var
|
|
23602
|
+
var import_react150 = require("@emotion/react");
|
|
23495
23603
|
var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
|
|
23496
23604
|
var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
|
|
23497
23605
|
var import_table = require("@lexical/table");
|
|
23498
23606
|
var import_lexical6 = require("lexical");
|
|
23499
|
-
var
|
|
23607
|
+
var import_react151 = require("react");
|
|
23500
23608
|
var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
|
|
23501
23609
|
function computeSelectionCount(selection) {
|
|
23502
23610
|
const selectionShape = selection.getShape();
|
|
@@ -23505,14 +23613,14 @@ function computeSelectionCount(selection) {
|
|
|
23505
23613
|
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
23506
23614
|
};
|
|
23507
23615
|
}
|
|
23508
|
-
var tableActionMenuTrigger =
|
|
23616
|
+
var tableActionMenuTrigger = import_react150.css`
|
|
23509
23617
|
position: absolute;
|
|
23510
23618
|
transform: translate(calc(-100% - 1px), 1px);
|
|
23511
23619
|
`;
|
|
23512
|
-
var TableActionMenuTrigger = (0,
|
|
23620
|
+
var TableActionMenuTrigger = (0, import_react151.forwardRef)((props, ref) => {
|
|
23513
23621
|
const { tableCellEl, positioningAnchorEl, ...rest } = props;
|
|
23514
|
-
const [coordinates, setCoordinates] = (0,
|
|
23515
|
-
(0,
|
|
23622
|
+
const [coordinates, setCoordinates] = (0, import_react151.useState)({ x: 0, y: 0 });
|
|
23623
|
+
(0, import_react151.useLayoutEffect)(() => {
|
|
23516
23624
|
const rect = tableCellEl.getBoundingClientRect();
|
|
23517
23625
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
23518
23626
|
const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
|
|
@@ -23545,16 +23653,16 @@ function TableActionMenu({
|
|
|
23545
23653
|
positioningAnchorEl
|
|
23546
23654
|
}) {
|
|
23547
23655
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23548
|
-
const [tableCellNode, updateTableCellNode] = (0,
|
|
23549
|
-
const [selectionCounts, updateSelectionCounts] = (0,
|
|
23656
|
+
const [tableCellNode, updateTableCellNode] = (0, import_react151.useState)(_tableCellNode);
|
|
23657
|
+
const [selectionCounts, updateSelectionCounts] = (0, import_react151.useState)({
|
|
23550
23658
|
columns: 1,
|
|
23551
23659
|
rows: 1
|
|
23552
23660
|
});
|
|
23553
|
-
const [menuTriggerKey, setMenuTriggerKey] = (0,
|
|
23661
|
+
const [menuTriggerKey, setMenuTriggerKey] = (0, import_react151.useState)(0);
|
|
23554
23662
|
const incrementMenuTriggerKey = () => {
|
|
23555
23663
|
setMenuTriggerKey((key) => key += 1);
|
|
23556
23664
|
};
|
|
23557
|
-
(0,
|
|
23665
|
+
(0, import_react151.useEffect)(() => {
|
|
23558
23666
|
return editor.registerMutationListener(
|
|
23559
23667
|
import_table.TableCellNode,
|
|
23560
23668
|
(nodeMutations) => {
|
|
@@ -23568,7 +23676,7 @@ function TableActionMenu({
|
|
|
23568
23676
|
{ skipInitialization: true }
|
|
23569
23677
|
);
|
|
23570
23678
|
}, [editor, tableCellNode]);
|
|
23571
|
-
(0,
|
|
23679
|
+
(0, import_react151.useEffect)(() => {
|
|
23572
23680
|
editor.getEditorState().read(() => {
|
|
23573
23681
|
const selection = (0, import_lexical6.$getSelection)();
|
|
23574
23682
|
if ((0, import_table.$isTableSelection)(selection)) {
|
|
@@ -23576,7 +23684,7 @@ function TableActionMenu({
|
|
|
23576
23684
|
}
|
|
23577
23685
|
});
|
|
23578
23686
|
}, [editor]);
|
|
23579
|
-
const clearTableSelection = (0,
|
|
23687
|
+
const clearTableSelection = (0, import_react151.useCallback)(() => {
|
|
23580
23688
|
editor.update(() => {
|
|
23581
23689
|
if (tableCellNode.isAttached()) {
|
|
23582
23690
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
@@ -23597,7 +23705,7 @@ function TableActionMenu({
|
|
|
23597
23705
|
rootNode.selectStart();
|
|
23598
23706
|
});
|
|
23599
23707
|
}, [editor, tableCellNode]);
|
|
23600
|
-
const insertTableRowAtSelection = (0,
|
|
23708
|
+
const insertTableRowAtSelection = (0, import_react151.useCallback)(
|
|
23601
23709
|
(shouldInsertAfter) => {
|
|
23602
23710
|
editor.update(() => {
|
|
23603
23711
|
(0, import_table.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
|
|
@@ -23606,7 +23714,7 @@ function TableActionMenu({
|
|
|
23606
23714
|
},
|
|
23607
23715
|
[editor]
|
|
23608
23716
|
);
|
|
23609
|
-
const insertTableColumnAtSelection = (0,
|
|
23717
|
+
const insertTableColumnAtSelection = (0, import_react151.useCallback)(
|
|
23610
23718
|
(shouldInsertAfter) => {
|
|
23611
23719
|
editor.update(() => {
|
|
23612
23720
|
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
@@ -23617,26 +23725,26 @@ function TableActionMenu({
|
|
|
23617
23725
|
},
|
|
23618
23726
|
[editor, selectionCounts.columns]
|
|
23619
23727
|
);
|
|
23620
|
-
const deleteTableRowAtSelection = (0,
|
|
23728
|
+
const deleteTableRowAtSelection = (0, import_react151.useCallback)(() => {
|
|
23621
23729
|
editor.update(() => {
|
|
23622
23730
|
(0, import_table.$deleteTableRow__EXPERIMENTAL)();
|
|
23623
23731
|
});
|
|
23624
23732
|
incrementMenuTriggerKey();
|
|
23625
23733
|
}, [editor]);
|
|
23626
|
-
const deleteTableAtSelection = (0,
|
|
23734
|
+
const deleteTableAtSelection = (0, import_react151.useCallback)(() => {
|
|
23627
23735
|
editor.update(() => {
|
|
23628
23736
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23629
23737
|
tableNode.remove();
|
|
23630
23738
|
clearTableSelection();
|
|
23631
23739
|
});
|
|
23632
23740
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
23633
|
-
const deleteTableColumnAtSelection = (0,
|
|
23741
|
+
const deleteTableColumnAtSelection = (0, import_react151.useCallback)(() => {
|
|
23634
23742
|
editor.update(() => {
|
|
23635
23743
|
(0, import_table.$deleteTableColumn__EXPERIMENTAL)();
|
|
23636
23744
|
});
|
|
23637
23745
|
incrementMenuTriggerKey();
|
|
23638
23746
|
}, [editor]);
|
|
23639
|
-
const toggleTableRowIsHeader = (0,
|
|
23747
|
+
const toggleTableRowIsHeader = (0, import_react151.useCallback)(() => {
|
|
23640
23748
|
editor.update(() => {
|
|
23641
23749
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23642
23750
|
const tableRowIndex = (0, import_table.$getTableRowIndexFromTableCellNode)(tableCellNode);
|
|
@@ -23657,7 +23765,7 @@ function TableActionMenu({
|
|
|
23657
23765
|
clearTableSelection();
|
|
23658
23766
|
});
|
|
23659
23767
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
23660
|
-
const toggleTableColumnIsHeader = (0,
|
|
23768
|
+
const toggleTableColumnIsHeader = (0, import_react151.useCallback)(() => {
|
|
23661
23769
|
editor.update(() => {
|
|
23662
23770
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
23663
23771
|
const tableColumnIndex = (0, import_table.$getTableColumnIndexFromTableCellNode)(tableCellNode);
|
|
@@ -23684,7 +23792,7 @@ function TableActionMenu({
|
|
|
23684
23792
|
clearTableSelection();
|
|
23685
23793
|
});
|
|
23686
23794
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
23687
|
-
const menuItemCss = (0,
|
|
23795
|
+
const menuItemCss = (0, import_react150.css)({
|
|
23688
23796
|
fontSize: "var(--fs-sm)"
|
|
23689
23797
|
});
|
|
23690
23798
|
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
|
|
@@ -23755,10 +23863,10 @@ function TableCellActionMenuContainer({
|
|
|
23755
23863
|
positioningAnchorEl
|
|
23756
23864
|
}) {
|
|
23757
23865
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
23758
|
-
const [tableCellNode, setTableMenuCellNode] = (0,
|
|
23759
|
-
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0,
|
|
23760
|
-
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0,
|
|
23761
|
-
(0,
|
|
23866
|
+
const [tableCellNode, setTableMenuCellNode] = (0, import_react151.useState)(null);
|
|
23867
|
+
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react151.useState)(null);
|
|
23868
|
+
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react151.useState)(null);
|
|
23869
|
+
(0, import_react151.useEffect)(() => {
|
|
23762
23870
|
const newPortalEl = document.createElement("div");
|
|
23763
23871
|
setTableMenuCellMenuPortalEl(newPortalEl);
|
|
23764
23872
|
menuPortalEl.appendChild(newPortalEl);
|
|
@@ -23766,14 +23874,14 @@ function TableCellActionMenuContainer({
|
|
|
23766
23874
|
newPortalEl.remove();
|
|
23767
23875
|
};
|
|
23768
23876
|
}, [menuPortalEl]);
|
|
23769
|
-
const setTableMenuCellNodeElem = (0,
|
|
23877
|
+
const setTableMenuCellNodeElem = (0, import_react151.useCallback)((elem) => {
|
|
23770
23878
|
if (elem) {
|
|
23771
23879
|
_setTableMenuCellNodeEl(elem);
|
|
23772
23880
|
} else {
|
|
23773
23881
|
_setTableMenuCellNodeEl(null);
|
|
23774
23882
|
}
|
|
23775
23883
|
}, []);
|
|
23776
|
-
const $moveMenu = (0,
|
|
23884
|
+
const $moveMenu = (0, import_react151.useCallback)(() => {
|
|
23777
23885
|
const selection = (0, import_lexical6.$getSelection)();
|
|
23778
23886
|
const nativeSelection = window.getSelection();
|
|
23779
23887
|
const activeElement = document.activeElement;
|
|
@@ -23802,7 +23910,7 @@ function TableCellActionMenuContainer({
|
|
|
23802
23910
|
setTableMenuCellNodeElem(null);
|
|
23803
23911
|
}
|
|
23804
23912
|
}, [editor, setTableMenuCellNodeElem]);
|
|
23805
|
-
(0,
|
|
23913
|
+
(0, import_react151.useEffect)(() => {
|
|
23806
23914
|
return editor.registerUpdateListener(() => {
|
|
23807
23915
|
editor.getEditorState().read(() => {
|
|
23808
23916
|
$moveMenu();
|
|
@@ -23830,18 +23938,18 @@ function TableActionMenuPlugin({
|
|
|
23830
23938
|
|
|
23831
23939
|
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
23832
23940
|
init_emotion_jsx_shim();
|
|
23833
|
-
var
|
|
23941
|
+
var import_react152 = require("@emotion/react");
|
|
23834
23942
|
var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
|
|
23835
23943
|
var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
|
|
23836
23944
|
var import_table2 = require("@lexical/table");
|
|
23837
23945
|
var import_utils12 = require("@lexical/utils");
|
|
23838
23946
|
var import_lexical7 = require("lexical");
|
|
23839
|
-
var
|
|
23947
|
+
var import_react153 = require("react");
|
|
23840
23948
|
var import_react_dom3 = require("react-dom");
|
|
23841
23949
|
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
23842
23950
|
var MIN_ROW_HEIGHT = 33;
|
|
23843
23951
|
var MIN_COLUMN_WIDTH = 50;
|
|
23844
|
-
var tableResizer =
|
|
23952
|
+
var tableResizer = import_react152.css`
|
|
23845
23953
|
position: absolute;
|
|
23846
23954
|
z-index: var(--z-10);
|
|
23847
23955
|
`;
|
|
@@ -23863,15 +23971,15 @@ var fixedGetDOMCellFromTarget = (node) => {
|
|
|
23863
23971
|
return null;
|
|
23864
23972
|
};
|
|
23865
23973
|
function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
23866
|
-
const targetRef = (0,
|
|
23867
|
-
const resizerRef = (0,
|
|
23868
|
-
const tableRectRef = (0,
|
|
23869
|
-
const mouseStartPosRef = (0,
|
|
23870
|
-
const [mouseCurrentPos, updateMouseCurrentPos] = (0,
|
|
23871
|
-
const [activeCell, updateActiveCell] = (0,
|
|
23872
|
-
const [isMouseDown, updateIsMouseDown] = (0,
|
|
23873
|
-
const [draggingDirection, updateDraggingDirection] = (0,
|
|
23874
|
-
const resetState = (0,
|
|
23974
|
+
const targetRef = (0, import_react153.useRef)(null);
|
|
23975
|
+
const resizerRef = (0, import_react153.useRef)(null);
|
|
23976
|
+
const tableRectRef = (0, import_react153.useRef)(null);
|
|
23977
|
+
const mouseStartPosRef = (0, import_react153.useRef)(null);
|
|
23978
|
+
const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react153.useState)(null);
|
|
23979
|
+
const [activeCell, updateActiveCell] = (0, import_react153.useState)(null);
|
|
23980
|
+
const [isMouseDown, updateIsMouseDown] = (0, import_react153.useState)(false);
|
|
23981
|
+
const [draggingDirection, updateDraggingDirection] = (0, import_react153.useState)(null);
|
|
23982
|
+
const resetState = (0, import_react153.useCallback)(() => {
|
|
23875
23983
|
updateActiveCell(null);
|
|
23876
23984
|
targetRef.current = null;
|
|
23877
23985
|
updateDraggingDirection(null);
|
|
@@ -23881,7 +23989,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
23881
23989
|
const isMouseDownOnEvent = (event) => {
|
|
23882
23990
|
return (event.buttons & 1) === 1;
|
|
23883
23991
|
};
|
|
23884
|
-
(0,
|
|
23992
|
+
(0, import_react153.useEffect)(() => {
|
|
23885
23993
|
const onMouseMove = (event) => {
|
|
23886
23994
|
setTimeout(() => {
|
|
23887
23995
|
const target = event.target;
|
|
@@ -23948,7 +24056,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
23948
24056
|
}
|
|
23949
24057
|
return false;
|
|
23950
24058
|
};
|
|
23951
|
-
const updateRowHeight = (0,
|
|
24059
|
+
const updateRowHeight = (0, import_react153.useCallback)(
|
|
23952
24060
|
(heightChange) => {
|
|
23953
24061
|
if (!activeCell) {
|
|
23954
24062
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
@@ -24010,7 +24118,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
24010
24118
|
}
|
|
24011
24119
|
}
|
|
24012
24120
|
};
|
|
24013
|
-
const updateColumnWidth = (0,
|
|
24121
|
+
const updateColumnWidth = (0, import_react153.useCallback)(
|
|
24014
24122
|
(widthChange) => {
|
|
24015
24123
|
if (!activeCell) {
|
|
24016
24124
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
@@ -24044,7 +24152,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
24044
24152
|
},
|
|
24045
24153
|
[activeCell, editor]
|
|
24046
24154
|
);
|
|
24047
|
-
const mouseUpHandler = (0,
|
|
24155
|
+
const mouseUpHandler = (0, import_react153.useCallback)(
|
|
24048
24156
|
(direction) => {
|
|
24049
24157
|
const handler = (event) => {
|
|
24050
24158
|
event.preventDefault();
|
|
@@ -24073,7 +24181,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
24073
24181
|
},
|
|
24074
24182
|
[activeCell, resetState, updateColumnWidth, updateRowHeight]
|
|
24075
24183
|
);
|
|
24076
|
-
const toggleResize = (0,
|
|
24184
|
+
const toggleResize = (0, import_react153.useCallback)(
|
|
24077
24185
|
(direction) => (event) => {
|
|
24078
24186
|
event.preventDefault();
|
|
24079
24187
|
event.stopPropagation();
|
|
@@ -24090,7 +24198,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
24090
24198
|
},
|
|
24091
24199
|
[activeCell, mouseUpHandler]
|
|
24092
24200
|
);
|
|
24093
|
-
const getResizers = (0,
|
|
24201
|
+
const getResizers = (0, import_react153.useCallback)(() => {
|
|
24094
24202
|
if (activeCell) {
|
|
24095
24203
|
const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
|
|
24096
24204
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
@@ -24161,7 +24269,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
24161
24269
|
function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
24162
24270
|
const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
|
|
24163
24271
|
const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
|
|
24164
|
-
return (0,
|
|
24272
|
+
return (0, import_react153.useMemo)(
|
|
24165
24273
|
() => isEditable ? (0, import_react_dom3.createPortal)(
|
|
24166
24274
|
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
|
|
24167
24275
|
positioningAnchorEl
|
|
@@ -24175,11 +24283,11 @@ init_emotion_jsx_shim();
|
|
|
24175
24283
|
var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
|
|
24176
24284
|
var import_table3 = require("@lexical/table");
|
|
24177
24285
|
var import_lexical8 = require("lexical");
|
|
24178
|
-
var
|
|
24286
|
+
var import_react154 = require("react");
|
|
24179
24287
|
var TableSelectionPlugin = () => {
|
|
24180
24288
|
const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
|
|
24181
|
-
const [closestTableCellNode, setClosestTableCellNode] = (0,
|
|
24182
|
-
(0,
|
|
24289
|
+
const [closestTableCellNode, setClosestTableCellNode] = (0, import_react154.useState)(null);
|
|
24290
|
+
(0, import_react154.useEffect)(() => {
|
|
24183
24291
|
return editor.registerCommand(
|
|
24184
24292
|
import_lexical8.SELECTION_CHANGE_COMMAND,
|
|
24185
24293
|
() => {
|
|
@@ -24201,7 +24309,7 @@ var TableSelectionPlugin = () => {
|
|
|
24201
24309
|
import_lexical8.COMMAND_PRIORITY_NORMAL
|
|
24202
24310
|
);
|
|
24203
24311
|
}, [editor]);
|
|
24204
|
-
(0,
|
|
24312
|
+
(0, import_react154.useEffect)(() => {
|
|
24205
24313
|
const onControlA = (event) => {
|
|
24206
24314
|
if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
|
|
24207
24315
|
if (!closestTableCellNode) {
|
|
@@ -24225,7 +24333,7 @@ var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
|
24225
24333
|
|
|
24226
24334
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
24227
24335
|
init_emotion_jsx_shim();
|
|
24228
|
-
var
|
|
24336
|
+
var import_react156 = require("@emotion/react");
|
|
24229
24337
|
var import_code2 = require("@lexical/code");
|
|
24230
24338
|
var import_list2 = require("@lexical/list");
|
|
24231
24339
|
var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
|
|
@@ -24234,7 +24342,7 @@ var import_selection2 = require("@lexical/selection");
|
|
|
24234
24342
|
var import_table4 = require("@lexical/table");
|
|
24235
24343
|
var import_utils13 = require("@lexical/utils");
|
|
24236
24344
|
var import_lexical9 = require("lexical");
|
|
24237
|
-
var
|
|
24345
|
+
var import_react157 = require("react");
|
|
24238
24346
|
|
|
24239
24347
|
// src/components/ParameterInputs/rich-text/toolbar/constants.ts
|
|
24240
24348
|
init_emotion_jsx_shim();
|
|
@@ -24252,29 +24360,29 @@ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
|
24252
24360
|
|
|
24253
24361
|
// src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
|
|
24254
24362
|
init_emotion_jsx_shim();
|
|
24255
|
-
var
|
|
24363
|
+
var import_react155 = require("react");
|
|
24256
24364
|
var useRichTextToolbarState = ({ config }) => {
|
|
24257
24365
|
var _a;
|
|
24258
|
-
const enabledBuiltInFormats = (0,
|
|
24366
|
+
const enabledBuiltInFormats = (0, import_react155.useMemo)(() => {
|
|
24259
24367
|
return richTextBuiltInFormats.filter((format) => {
|
|
24260
24368
|
var _a2, _b;
|
|
24261
24369
|
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
24262
24370
|
});
|
|
24263
24371
|
}, [config]);
|
|
24264
|
-
const enabledBuiltInElements = (0,
|
|
24372
|
+
const enabledBuiltInElements = (0, import_react155.useMemo)(() => {
|
|
24265
24373
|
return richTextBuiltInElements.filter((element) => {
|
|
24266
24374
|
var _a2, _b;
|
|
24267
24375
|
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
24268
24376
|
});
|
|
24269
24377
|
}, [config]);
|
|
24270
|
-
const enabledBuiltInFormatsWithIcon = (0,
|
|
24378
|
+
const enabledBuiltInFormatsWithIcon = (0, import_react155.useMemo)(() => {
|
|
24271
24379
|
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
24272
24380
|
}, [enabledBuiltInFormats]);
|
|
24273
24381
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
24274
24382
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
24275
24383
|
);
|
|
24276
|
-
const [activeFormats, setActiveFormats] = (0,
|
|
24277
|
-
const visibleFormatsWithIcon = (0,
|
|
24384
|
+
const [activeFormats, setActiveFormats] = (0, import_react155.useState)([]);
|
|
24385
|
+
const visibleFormatsWithIcon = (0, import_react155.useMemo)(() => {
|
|
24278
24386
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
24279
24387
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
24280
24388
|
visibleFormats.add(type);
|
|
@@ -24284,7 +24392,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
24284
24392
|
});
|
|
24285
24393
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
24286
24394
|
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
24287
|
-
const visibleFormatsWithoutIcon = (0,
|
|
24395
|
+
const visibleFormatsWithoutIcon = (0, import_react155.useMemo)(() => {
|
|
24288
24396
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
24289
24397
|
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
24290
24398
|
visibleFormats.add(type);
|
|
@@ -24294,11 +24402,11 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
24294
24402
|
});
|
|
24295
24403
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
24296
24404
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
24297
|
-
const [activeElement, setActiveElement] = (0,
|
|
24405
|
+
const [activeElement, setActiveElement] = (0, import_react155.useState)("paragraph");
|
|
24298
24406
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
24299
24407
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
24300
24408
|
);
|
|
24301
|
-
const visibleTextualElements = (0,
|
|
24409
|
+
const visibleTextualElements = (0, import_react155.useMemo)(() => {
|
|
24302
24410
|
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
24303
24411
|
return enabledTextualElements;
|
|
24304
24412
|
}
|
|
@@ -24309,30 +24417,30 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
24309
24417
|
}
|
|
24310
24418
|
);
|
|
24311
24419
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
24312
|
-
const [isLink, setIsLink] = (0,
|
|
24313
|
-
const linkElementVisible = (0,
|
|
24420
|
+
const [isLink, setIsLink] = (0, import_react155.useState)(false);
|
|
24421
|
+
const linkElementVisible = (0, import_react155.useMemo)(() => {
|
|
24314
24422
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
24315
24423
|
}, [isLink, enabledBuiltInElements]);
|
|
24316
|
-
const visibleLists = (0,
|
|
24424
|
+
const visibleLists = (0, import_react155.useMemo)(() => {
|
|
24317
24425
|
return new Set(
|
|
24318
24426
|
["orderedList", "unorderedList"].filter(
|
|
24319
24427
|
(type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
|
|
24320
24428
|
)
|
|
24321
24429
|
);
|
|
24322
24430
|
}, [activeElement, enabledBuiltInElements]);
|
|
24323
|
-
const quoteElementVisible = (0,
|
|
24431
|
+
const quoteElementVisible = (0, import_react155.useMemo)(() => {
|
|
24324
24432
|
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
24325
24433
|
}, [activeElement, enabledBuiltInElements]);
|
|
24326
|
-
const codeElementVisible = (0,
|
|
24434
|
+
const codeElementVisible = (0, import_react155.useMemo)(() => {
|
|
24327
24435
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
24328
24436
|
}, [activeElement, enabledBuiltInElements]);
|
|
24329
|
-
const tableElementVisible = (0,
|
|
24437
|
+
const tableElementVisible = (0, import_react155.useMemo)(() => {
|
|
24330
24438
|
return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
|
|
24331
24439
|
}, [activeElement, enabledBuiltInElements]);
|
|
24332
|
-
const assetElementVisible = (0,
|
|
24440
|
+
const assetElementVisible = (0, import_react155.useMemo)(() => {
|
|
24333
24441
|
return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
|
|
24334
24442
|
}, [activeElement, enabledBuiltInElements]);
|
|
24335
|
-
const visibleElementsWithIcons = (0,
|
|
24443
|
+
const visibleElementsWithIcons = (0, import_react155.useMemo)(() => {
|
|
24336
24444
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
24337
24445
|
if (linkElementVisible) {
|
|
24338
24446
|
visibleElements.add("link");
|
|
@@ -24344,7 +24452,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
24344
24452
|
}
|
|
24345
24453
|
return visibleElements;
|
|
24346
24454
|
}, [linkElementVisible, visibleLists]);
|
|
24347
|
-
const visibleInsertElementsWithIcons = (0,
|
|
24455
|
+
const visibleInsertElementsWithIcons = (0, import_react155.useMemo)(() => {
|
|
24348
24456
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
24349
24457
|
if (quoteElementVisible) {
|
|
24350
24458
|
visibleElements.add("quote");
|
|
@@ -24383,7 +24491,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
24383
24491
|
|
|
24384
24492
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
24385
24493
|
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
24386
|
-
var toolbar =
|
|
24494
|
+
var toolbar = import_react156.css`
|
|
24387
24495
|
${scrollbarStyles}
|
|
24388
24496
|
background: var(--gray-50);
|
|
24389
24497
|
border-radius: var(--rounded-base);
|
|
@@ -24397,7 +24505,7 @@ var toolbar = import_react155.css`
|
|
|
24397
24505
|
top: calc(var(--spacing-sm) * -2);
|
|
24398
24506
|
z-index: 10;
|
|
24399
24507
|
`;
|
|
24400
|
-
var toolbarGroup =
|
|
24508
|
+
var toolbarGroup = import_react156.css`
|
|
24401
24509
|
display: flex;
|
|
24402
24510
|
flex-shrink: 0;
|
|
24403
24511
|
gap: var(--spacing-xs);
|
|
@@ -24414,7 +24522,7 @@ var toolbarGroup = import_react155.css`
|
|
|
24414
24522
|
width: 1px;
|
|
24415
24523
|
}
|
|
24416
24524
|
`;
|
|
24417
|
-
var richTextToolbarButton =
|
|
24525
|
+
var richTextToolbarButton = import_react156.css`
|
|
24418
24526
|
align-items: center;
|
|
24419
24527
|
appearance: none;
|
|
24420
24528
|
border: 0;
|
|
@@ -24428,17 +24536,17 @@ var richTextToolbarButton = import_react155.css`
|
|
|
24428
24536
|
min-width: 32px;
|
|
24429
24537
|
padding: 0 var(--spacing-sm);
|
|
24430
24538
|
`;
|
|
24431
|
-
var richTextToolbarButtonActive =
|
|
24539
|
+
var richTextToolbarButtonActive = import_react156.css`
|
|
24432
24540
|
background: var(--gray-200);
|
|
24433
24541
|
`;
|
|
24434
|
-
var textStyleButton =
|
|
24542
|
+
var textStyleButton = import_react156.css`
|
|
24435
24543
|
justify-content: space-between;
|
|
24436
24544
|
min-width: 7rem;
|
|
24437
24545
|
`;
|
|
24438
|
-
var toolbarIcon =
|
|
24546
|
+
var toolbarIcon = import_react156.css`
|
|
24439
24547
|
color: inherit;
|
|
24440
24548
|
`;
|
|
24441
|
-
var toolbarChevron =
|
|
24549
|
+
var toolbarChevron = import_react156.css`
|
|
24442
24550
|
margin-left: var(--spacing-xs);
|
|
24443
24551
|
`;
|
|
24444
24552
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
@@ -24498,7 +24606,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
24498
24606
|
});
|
|
24499
24607
|
});
|
|
24500
24608
|
};
|
|
24501
|
-
const updateToolbar = (0,
|
|
24609
|
+
const updateToolbar = (0, import_react157.useCallback)(() => {
|
|
24502
24610
|
const selection = (0, import_lexical9.$getSelection)();
|
|
24503
24611
|
if (!(0, import_lexical9.$isRangeSelection)(selection)) {
|
|
24504
24612
|
return;
|
|
@@ -24537,7 +24645,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
24537
24645
|
setIsLink(false);
|
|
24538
24646
|
}
|
|
24539
24647
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
24540
|
-
(0,
|
|
24648
|
+
(0, import_react157.useEffect)(() => {
|
|
24541
24649
|
return editor.registerCommand(
|
|
24542
24650
|
import_lexical9.SELECTION_CHANGE_COMMAND,
|
|
24543
24651
|
(_payload) => {
|
|
@@ -24547,7 +24655,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
24547
24655
|
import_lexical9.COMMAND_PRIORITY_CRITICAL
|
|
24548
24656
|
);
|
|
24549
24657
|
}, [editor, updateToolbar]);
|
|
24550
|
-
(0,
|
|
24658
|
+
(0, import_react157.useEffect)(() => {
|
|
24551
24659
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
24552
24660
|
requestAnimationFrame(() => {
|
|
24553
24661
|
editorState.read(() => {
|
|
@@ -24800,7 +24908,7 @@ var ParameterRichText = ({
|
|
|
24800
24908
|
}
|
|
24801
24909
|
);
|
|
24802
24910
|
};
|
|
24803
|
-
var editorContainerWrapper =
|
|
24911
|
+
var editorContainerWrapper = import_react158.css`
|
|
24804
24912
|
position: relative;
|
|
24805
24913
|
|
|
24806
24914
|
&::before {
|
|
@@ -24816,12 +24924,12 @@ var editorContainerWrapper = import_react157.css`
|
|
|
24816
24924
|
z-index: 2;
|
|
24817
24925
|
}
|
|
24818
24926
|
`;
|
|
24819
|
-
var editorWrapper =
|
|
24927
|
+
var editorWrapper = import_react158.css`
|
|
24820
24928
|
display: flex;
|
|
24821
24929
|
flex-flow: column;
|
|
24822
24930
|
flex-grow: 1;
|
|
24823
24931
|
`;
|
|
24824
|
-
var editorContainer =
|
|
24932
|
+
var editorContainer = import_react158.css`
|
|
24825
24933
|
${scrollbarStyles}
|
|
24826
24934
|
background: var(--white);
|
|
24827
24935
|
border-radius: var(--rounded-sm);
|
|
@@ -24853,7 +24961,7 @@ var editorContainer = import_react157.css`
|
|
|
24853
24961
|
max-height: unset;
|
|
24854
24962
|
}
|
|
24855
24963
|
`;
|
|
24856
|
-
var editorContainerOverflowWrapper =
|
|
24964
|
+
var editorContainerOverflowWrapper = import_react158.css`
|
|
24857
24965
|
overflow: hidden;
|
|
24858
24966
|
pointer-events: none;
|
|
24859
24967
|
|
|
@@ -24861,7 +24969,7 @@ var editorContainerOverflowWrapper = import_react157.css`
|
|
|
24861
24969
|
pointer-events: auto;
|
|
24862
24970
|
}
|
|
24863
24971
|
`;
|
|
24864
|
-
var editorPlaceholder =
|
|
24972
|
+
var editorPlaceholder = import_react158.css`
|
|
24865
24973
|
color: var(--gray-500);
|
|
24866
24974
|
font-style: italic;
|
|
24867
24975
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -24872,7 +24980,7 @@ var editorPlaceholder = import_react157.css`
|
|
|
24872
24980
|
top: calc(1rem + var(--spacing-sm));
|
|
24873
24981
|
user-select: none;
|
|
24874
24982
|
`;
|
|
24875
|
-
var editorInput =
|
|
24983
|
+
var editorInput = import_react158.css`
|
|
24876
24984
|
min-height: 100%;
|
|
24877
24985
|
flex-grow: 1;
|
|
24878
24986
|
|
|
@@ -25003,12 +25111,12 @@ var RichText = ({
|
|
|
25003
25111
|
minimalInteractivity
|
|
25004
25112
|
}) => {
|
|
25005
25113
|
const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
|
|
25006
|
-
(0,
|
|
25114
|
+
(0, import_react159.useEffect)(() => {
|
|
25007
25115
|
if (onRichTextInit) {
|
|
25008
25116
|
onRichTextInit(editor);
|
|
25009
25117
|
}
|
|
25010
25118
|
}, [editor, onRichTextInit]);
|
|
25011
|
-
(0,
|
|
25119
|
+
(0, import_react159.useEffect)(() => {
|
|
25012
25120
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
|
|
25013
25121
|
requestAnimationFrame(() => {
|
|
25014
25122
|
if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -25020,16 +25128,16 @@ var RichText = ({
|
|
|
25020
25128
|
removeUpdateListener();
|
|
25021
25129
|
};
|
|
25022
25130
|
}, [editor, onChange]);
|
|
25023
|
-
(0,
|
|
25131
|
+
(0, import_react159.useEffect)(() => {
|
|
25024
25132
|
editor.setEditable(!readOnly);
|
|
25025
25133
|
}, [editor, readOnly]);
|
|
25026
|
-
const [editorContainerRef, setEditorContainerRef] = (0,
|
|
25134
|
+
const [editorContainerRef, setEditorContainerRef] = (0, import_react159.useState)(null);
|
|
25027
25135
|
const onEditorContainerRef = (_editorContainerRef) => {
|
|
25028
25136
|
if (_editorContainerRef !== null) {
|
|
25029
25137
|
setEditorContainerRef(_editorContainerRef);
|
|
25030
25138
|
}
|
|
25031
25139
|
};
|
|
25032
|
-
const [portalContainerRef, setPortalContainerRef] = (0,
|
|
25140
|
+
const [portalContainerRef, setPortalContainerRef] = (0, import_react159.useState)(null);
|
|
25033
25141
|
const onPortalContainerRef = (_portalContainerRef) => {
|
|
25034
25142
|
if (_portalContainerRef !== null) {
|
|
25035
25143
|
setPortalContainerRef(_portalContainerRef);
|
|
@@ -25099,15 +25207,15 @@ var RichText = ({
|
|
|
25099
25207
|
|
|
25100
25208
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
25101
25209
|
init_emotion_jsx_shim();
|
|
25102
|
-
var
|
|
25210
|
+
var import_react160 = require("react");
|
|
25103
25211
|
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
25104
|
-
var ParameterSelect = (0,
|
|
25212
|
+
var ParameterSelect = (0, import_react160.forwardRef)(
|
|
25105
25213
|
({ defaultOption, options, ...props }, ref) => {
|
|
25106
25214
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
25107
25215
|
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
25108
25216
|
}
|
|
25109
25217
|
);
|
|
25110
|
-
var ParameterSelectInner = (0,
|
|
25218
|
+
var ParameterSelectInner = (0, import_react160.forwardRef)(
|
|
25111
25219
|
({ defaultOption, options, ...props }, ref) => {
|
|
25112
25220
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
25113
25221
|
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
|
|
@@ -25132,13 +25240,13 @@ var ParameterSelectInner = (0, import_react159.forwardRef)(
|
|
|
25132
25240
|
|
|
25133
25241
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
25134
25242
|
init_emotion_jsx_shim();
|
|
25135
|
-
var
|
|
25243
|
+
var import_react161 = require("react");
|
|
25136
25244
|
var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
|
|
25137
|
-
var ParameterTextarea = (0,
|
|
25245
|
+
var ParameterTextarea = (0, import_react161.forwardRef)((props, ref) => {
|
|
25138
25246
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
25139
25247
|
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
25140
25248
|
});
|
|
25141
|
-
var ParameterTextareaInner = (0,
|
|
25249
|
+
var ParameterTextareaInner = (0, import_react161.forwardRef)(({ ...props }, ref) => {
|
|
25142
25250
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
25143
25251
|
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
25144
25252
|
"textarea",
|
|
@@ -25154,13 +25262,13 @@ var ParameterTextareaInner = (0, import_react160.forwardRef)(({ ...props }, ref)
|
|
|
25154
25262
|
|
|
25155
25263
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
25156
25264
|
init_emotion_jsx_shim();
|
|
25157
|
-
var
|
|
25265
|
+
var import_react162 = require("react");
|
|
25158
25266
|
var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
|
|
25159
|
-
var ParameterToggle = (0,
|
|
25267
|
+
var ParameterToggle = (0, import_react162.forwardRef)((props, ref) => {
|
|
25160
25268
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
25161
25269
|
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
25162
25270
|
});
|
|
25163
|
-
var ParameterToggleInner = (0,
|
|
25271
|
+
var ParameterToggleInner = (0, import_react162.forwardRef)(
|
|
25164
25272
|
({ children, ...props }, ref) => {
|
|
25165
25273
|
const { id, label } = useParameterShell();
|
|
25166
25274
|
return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("label", { css: inputToggleLabel2, children: [
|
|
@@ -25176,8 +25284,8 @@ init_emotion_jsx_shim();
|
|
|
25176
25284
|
|
|
25177
25285
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
25178
25286
|
init_emotion_jsx_shim();
|
|
25179
|
-
var
|
|
25180
|
-
var container3 =
|
|
25287
|
+
var import_react163 = require("@emotion/react");
|
|
25288
|
+
var container3 = import_react163.css`
|
|
25181
25289
|
background: var(--gray-50);
|
|
25182
25290
|
margin-block: var(--spacing-sm);
|
|
25183
25291
|
position: relative;
|
|
@@ -25187,17 +25295,17 @@ var container3 = import_react162.css`
|
|
|
25187
25295
|
border: solid 1px var(--gray-300);
|
|
25188
25296
|
`;
|
|
25189
25297
|
var themeMap = {
|
|
25190
|
-
primary:
|
|
25298
|
+
primary: import_react163.css`
|
|
25191
25299
|
--progress-color: var(--accent-light);
|
|
25192
25300
|
`,
|
|
25193
|
-
secondary:
|
|
25301
|
+
secondary: import_react163.css`
|
|
25194
25302
|
--progress-color: var(--accent-alt-light);
|
|
25195
25303
|
`,
|
|
25196
|
-
destructive:
|
|
25304
|
+
destructive: import_react163.css`
|
|
25197
25305
|
--progress-color: var(--brand-secondary-5);
|
|
25198
25306
|
`
|
|
25199
25307
|
};
|
|
25200
|
-
var slidingBackgroundPosition =
|
|
25308
|
+
var slidingBackgroundPosition = import_react163.keyframes`
|
|
25201
25309
|
from {
|
|
25202
25310
|
background-position: 0 0;
|
|
25203
25311
|
}
|
|
@@ -25205,10 +25313,10 @@ var slidingBackgroundPosition = import_react162.keyframes`
|
|
|
25205
25313
|
background-position: 64px 0;
|
|
25206
25314
|
}
|
|
25207
25315
|
`;
|
|
25208
|
-
var determinate =
|
|
25316
|
+
var determinate = import_react163.css`
|
|
25209
25317
|
background-color: var(--progress-color);
|
|
25210
25318
|
`;
|
|
25211
|
-
var indeterminate =
|
|
25319
|
+
var indeterminate = import_react163.css`
|
|
25212
25320
|
background-image: linear-gradient(
|
|
25213
25321
|
45deg,
|
|
25214
25322
|
var(--progress-color) 25%,
|
|
@@ -25222,7 +25330,7 @@ var indeterminate = import_react162.css`
|
|
|
25222
25330
|
background-size: 64px 64px;
|
|
25223
25331
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
25224
25332
|
`;
|
|
25225
|
-
var bar =
|
|
25333
|
+
var bar = import_react163.css`
|
|
25226
25334
|
position: absolute;
|
|
25227
25335
|
inset: 0;
|
|
25228
25336
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -25271,22 +25379,22 @@ function ProgressBar({
|
|
|
25271
25379
|
|
|
25272
25380
|
// src/components/ProgressList/ProgressList.tsx
|
|
25273
25381
|
init_emotion_jsx_shim();
|
|
25274
|
-
var
|
|
25382
|
+
var import_react165 = require("@emotion/react");
|
|
25275
25383
|
var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
|
|
25276
25384
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
25277
25385
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
25278
|
-
var
|
|
25386
|
+
var import_react166 = require("react");
|
|
25279
25387
|
|
|
25280
25388
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
25281
25389
|
init_emotion_jsx_shim();
|
|
25282
|
-
var
|
|
25283
|
-
var progressListStyles =
|
|
25390
|
+
var import_react164 = require("@emotion/react");
|
|
25391
|
+
var progressListStyles = import_react164.css`
|
|
25284
25392
|
display: flex;
|
|
25285
25393
|
flex-direction: column;
|
|
25286
25394
|
gap: var(--spacing-sm);
|
|
25287
25395
|
list-style-type: none;
|
|
25288
25396
|
`;
|
|
25289
|
-
var progressListItemStyles =
|
|
25397
|
+
var progressListItemStyles = import_react164.css`
|
|
25290
25398
|
display: flex;
|
|
25291
25399
|
gap: var(--spacing-base);
|
|
25292
25400
|
align-items: center;
|
|
@@ -25295,7 +25403,7 @@ var progressListItemStyles = import_react163.css`
|
|
|
25295
25403
|
// src/components/ProgressList/ProgressList.tsx
|
|
25296
25404
|
var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
|
|
25297
25405
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
25298
|
-
const itemsWithStatus = (0,
|
|
25406
|
+
const itemsWithStatus = (0, import_react166.useMemo)(() => {
|
|
25299
25407
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
25300
25408
|
return items.map((item, index) => {
|
|
25301
25409
|
let status = "queued";
|
|
@@ -25328,7 +25436,7 @@ var ProgressListItem = ({
|
|
|
25328
25436
|
errorLevel = "danger",
|
|
25329
25437
|
autoEllipsis = false
|
|
25330
25438
|
}) => {
|
|
25331
|
-
const icon = (0,
|
|
25439
|
+
const icon = (0, import_react166.useMemo)(() => {
|
|
25332
25440
|
if (error) {
|
|
25333
25441
|
return warningIcon;
|
|
25334
25442
|
}
|
|
@@ -25339,14 +25447,14 @@ var ProgressListItem = ({
|
|
|
25339
25447
|
};
|
|
25340
25448
|
return iconPerStatus[status];
|
|
25341
25449
|
}, [status, error]);
|
|
25342
|
-
const statusStyles = (0,
|
|
25450
|
+
const statusStyles = (0, import_react166.useMemo)(() => {
|
|
25343
25451
|
if (error) {
|
|
25344
|
-
return errorLevel === "caution" ?
|
|
25452
|
+
return errorLevel === "caution" ? import_react165.css`
|
|
25345
25453
|
color: rgb(161, 98, 7);
|
|
25346
25454
|
& svg {
|
|
25347
25455
|
color: rgb(250, 204, 21);
|
|
25348
25456
|
}
|
|
25349
|
-
` :
|
|
25457
|
+
` : import_react165.css`
|
|
25350
25458
|
color: rgb(185, 28, 28);
|
|
25351
25459
|
& svg {
|
|
25352
25460
|
color: var(--brand-primary-2);
|
|
@@ -25354,13 +25462,13 @@ var ProgressListItem = ({
|
|
|
25354
25462
|
`;
|
|
25355
25463
|
}
|
|
25356
25464
|
const colorPerStatus = {
|
|
25357
|
-
completed:
|
|
25465
|
+
completed: import_react165.css`
|
|
25358
25466
|
opacity: 0.75;
|
|
25359
25467
|
`,
|
|
25360
|
-
inProgress:
|
|
25468
|
+
inProgress: import_react165.css`
|
|
25361
25469
|
-webkit-text-stroke-width: thin;
|
|
25362
25470
|
`,
|
|
25363
|
-
queued:
|
|
25471
|
+
queued: import_react165.css`
|
|
25364
25472
|
opacity: 0.5;
|
|
25365
25473
|
`
|
|
25366
25474
|
};
|
|
@@ -25377,17 +25485,17 @@ var ProgressListItem = ({
|
|
|
25377
25485
|
|
|
25378
25486
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
25379
25487
|
init_emotion_jsx_shim();
|
|
25380
|
-
var
|
|
25488
|
+
var import_react168 = require("@emotion/react");
|
|
25381
25489
|
var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
|
|
25382
|
-
var
|
|
25490
|
+
var import_react169 = require("react");
|
|
25383
25491
|
|
|
25384
25492
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
25385
25493
|
init_emotion_jsx_shim();
|
|
25386
|
-
var
|
|
25387
|
-
var segmentedControlRootStyles =
|
|
25494
|
+
var import_react167 = require("@emotion/react");
|
|
25495
|
+
var segmentedControlRootStyles = import_react167.css`
|
|
25388
25496
|
position: relative;
|
|
25389
25497
|
`;
|
|
25390
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
25498
|
+
var segmentedControlScrollIndicatorsStyles = import_react167.css`
|
|
25391
25499
|
position: absolute;
|
|
25392
25500
|
inset: 0;
|
|
25393
25501
|
z-index: 1;
|
|
@@ -25415,17 +25523,17 @@ var segmentedControlScrollIndicatorsStyles = import_react166.css`
|
|
|
25415
25523
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
25416
25524
|
}
|
|
25417
25525
|
`;
|
|
25418
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
25526
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react167.css`
|
|
25419
25527
|
&::before {
|
|
25420
25528
|
opacity: 1;
|
|
25421
25529
|
}
|
|
25422
25530
|
`;
|
|
25423
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
25531
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react167.css`
|
|
25424
25532
|
&::after {
|
|
25425
25533
|
opacity: 1;
|
|
25426
25534
|
}
|
|
25427
25535
|
`;
|
|
25428
|
-
var segmentedControlWrapperStyles =
|
|
25536
|
+
var segmentedControlWrapperStyles = import_react167.css`
|
|
25429
25537
|
overflow-y: auto;
|
|
25430
25538
|
scroll-behavior: smooth;
|
|
25431
25539
|
scrollbar-width: none;
|
|
@@ -25434,7 +25542,7 @@ var segmentedControlWrapperStyles = import_react166.css`
|
|
|
25434
25542
|
height: 0px;
|
|
25435
25543
|
}
|
|
25436
25544
|
`;
|
|
25437
|
-
var segmentedControlStyles =
|
|
25545
|
+
var segmentedControlStyles = import_react167.css`
|
|
25438
25546
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
25439
25547
|
--segmented-control-border-width: 1px;
|
|
25440
25548
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -25453,14 +25561,14 @@ var segmentedControlStyles = import_react166.css`
|
|
|
25453
25561
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
25454
25562
|
font-size: var(--fs-xs);
|
|
25455
25563
|
`;
|
|
25456
|
-
var segmentedControlVerticalStyles =
|
|
25564
|
+
var segmentedControlVerticalStyles = import_react167.css`
|
|
25457
25565
|
flex-direction: column;
|
|
25458
25566
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
25459
25567
|
var(--segmented-control-rounded-value) 0 0;
|
|
25460
25568
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
25461
25569
|
var(--segmented-control-rounded-value);
|
|
25462
25570
|
`;
|
|
25463
|
-
var segmentedControlItemStyles =
|
|
25571
|
+
var segmentedControlItemStyles = import_react167.css`
|
|
25464
25572
|
&:first-of-type label {
|
|
25465
25573
|
border-radius: var(--segmented-control-first-border-radius);
|
|
25466
25574
|
}
|
|
@@ -25468,10 +25576,10 @@ var segmentedControlItemStyles = import_react166.css`
|
|
|
25468
25576
|
border-radius: var(--segmented-control-last-border-radius);
|
|
25469
25577
|
}
|
|
25470
25578
|
`;
|
|
25471
|
-
var segmentedControlInputStyles =
|
|
25579
|
+
var segmentedControlInputStyles = import_react167.css`
|
|
25472
25580
|
${accessibleHidden}
|
|
25473
25581
|
`;
|
|
25474
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
25582
|
+
var segmentedControlLabelStyles = (checked, disabled2) => import_react167.css`
|
|
25475
25583
|
position: relative;
|
|
25476
25584
|
display: flex;
|
|
25477
25585
|
align-items: center;
|
|
@@ -25538,20 +25646,20 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react166.css`
|
|
|
25538
25646
|
`}
|
|
25539
25647
|
}
|
|
25540
25648
|
`;
|
|
25541
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
25649
|
+
var segmentedControlLabelIconOnlyStyles = import_react167.css`
|
|
25542
25650
|
padding-inline: 0.5em;
|
|
25543
25651
|
`;
|
|
25544
|
-
var segmentedControlLabelCheckStyles =
|
|
25652
|
+
var segmentedControlLabelCheckStyles = import_react167.css`
|
|
25545
25653
|
opacity: 0.5;
|
|
25546
25654
|
`;
|
|
25547
|
-
var segmentedControlLabelContentStyles =
|
|
25655
|
+
var segmentedControlLabelContentStyles = import_react167.css`
|
|
25548
25656
|
display: flex;
|
|
25549
25657
|
align-items: center;
|
|
25550
25658
|
justify-content: center;
|
|
25551
25659
|
gap: var(--spacing-sm);
|
|
25552
25660
|
height: 100%;
|
|
25553
25661
|
`;
|
|
25554
|
-
var segmentedControlLabelTextStyles =
|
|
25662
|
+
var segmentedControlLabelTextStyles = import_react167.css`
|
|
25555
25663
|
white-space: nowrap;
|
|
25556
25664
|
`;
|
|
25557
25665
|
|
|
@@ -25571,10 +25679,10 @@ var SegmentedControl = ({
|
|
|
25571
25679
|
currentBackgroundColor = "white",
|
|
25572
25680
|
...props
|
|
25573
25681
|
}) => {
|
|
25574
|
-
const wrapperRef = (0,
|
|
25575
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
25576
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
25577
|
-
const onOptionChange = (0,
|
|
25682
|
+
const wrapperRef = (0, import_react169.useRef)(null);
|
|
25683
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react169.useState)(false);
|
|
25684
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react169.useState)(false);
|
|
25685
|
+
const onOptionChange = (0, import_react169.useCallback)(
|
|
25578
25686
|
(event) => {
|
|
25579
25687
|
if (event.target.checked) {
|
|
25580
25688
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -25582,19 +25690,19 @@ var SegmentedControl = ({
|
|
|
25582
25690
|
},
|
|
25583
25691
|
[options, onChange]
|
|
25584
25692
|
);
|
|
25585
|
-
const sizeStyles = (0,
|
|
25693
|
+
const sizeStyles = (0, import_react169.useMemo)(() => {
|
|
25586
25694
|
const map = {
|
|
25587
|
-
sm: (0,
|
|
25588
|
-
md: (0,
|
|
25589
|
-
lg: (0,
|
|
25590
|
-
xl: (0,
|
|
25695
|
+
sm: (0, import_react168.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
25696
|
+
md: (0, import_react168.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
25697
|
+
lg: (0, import_react168.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
25698
|
+
xl: (0, import_react168.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
25591
25699
|
};
|
|
25592
25700
|
return map[size];
|
|
25593
25701
|
}, [size]);
|
|
25594
|
-
const isIconOnly = (0,
|
|
25702
|
+
const isIconOnly = (0, import_react169.useMemo)(() => {
|
|
25595
25703
|
return options.every((option) => option && option.icon && !option.label);
|
|
25596
25704
|
}, [options]);
|
|
25597
|
-
(0,
|
|
25705
|
+
(0, import_react169.useEffect)(() => {
|
|
25598
25706
|
const wrapperElement = wrapperRef.current;
|
|
25599
25707
|
const onScroll = () => {
|
|
25600
25708
|
if (!wrapperElement) {
|
|
@@ -25689,12 +25797,12 @@ init_emotion_jsx_shim();
|
|
|
25689
25797
|
|
|
25690
25798
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
25691
25799
|
init_emotion_jsx_shim();
|
|
25692
|
-
var
|
|
25693
|
-
var lightFadingOut =
|
|
25800
|
+
var import_react170 = require("@emotion/react");
|
|
25801
|
+
var lightFadingOut = import_react170.keyframes`
|
|
25694
25802
|
from { opacity: 0.1; }
|
|
25695
25803
|
to { opacity: 0.025; }
|
|
25696
25804
|
`;
|
|
25697
|
-
var skeletonStyles =
|
|
25805
|
+
var skeletonStyles = import_react170.css`
|
|
25698
25806
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
25699
25807
|
background-color: var(--gray-900);
|
|
25700
25808
|
`;
|
|
@@ -25729,12 +25837,12 @@ var Skeleton = ({
|
|
|
25729
25837
|
|
|
25730
25838
|
// src/components/Switch/Switch.tsx
|
|
25731
25839
|
init_emotion_jsx_shim();
|
|
25732
|
-
var
|
|
25840
|
+
var import_react172 = require("react");
|
|
25733
25841
|
|
|
25734
25842
|
// src/components/Switch/Switch.styles.ts
|
|
25735
25843
|
init_emotion_jsx_shim();
|
|
25736
|
-
var
|
|
25737
|
-
var SwitchInputContainer =
|
|
25844
|
+
var import_react171 = require("@emotion/react");
|
|
25845
|
+
var SwitchInputContainer = import_react171.css`
|
|
25738
25846
|
cursor: pointer;
|
|
25739
25847
|
display: inline-block;
|
|
25740
25848
|
position: relative;
|
|
@@ -25743,7 +25851,7 @@ var SwitchInputContainer = import_react170.css`
|
|
|
25743
25851
|
vertical-align: middle;
|
|
25744
25852
|
user-select: none;
|
|
25745
25853
|
`;
|
|
25746
|
-
var SwitchInput = (size) =>
|
|
25854
|
+
var SwitchInput = (size) => import_react171.css`
|
|
25747
25855
|
appearance: none;
|
|
25748
25856
|
border-radius: var(--rounded-full);
|
|
25749
25857
|
background-color: var(--white);
|
|
@@ -25783,7 +25891,7 @@ var SwitchInput = (size) => import_react170.css`
|
|
|
25783
25891
|
cursor: not-allowed;
|
|
25784
25892
|
}
|
|
25785
25893
|
`;
|
|
25786
|
-
var SwitchInputDisabled =
|
|
25894
|
+
var SwitchInputDisabled = import_react171.css`
|
|
25787
25895
|
opacity: var(--opacity-50);
|
|
25788
25896
|
cursor: not-allowed;
|
|
25789
25897
|
|
|
@@ -25791,7 +25899,7 @@ var SwitchInputDisabled = import_react170.css`
|
|
|
25791
25899
|
cursor: not-allowed;
|
|
25792
25900
|
}
|
|
25793
25901
|
`;
|
|
25794
|
-
var SwitchInputLabel = (size) =>
|
|
25902
|
+
var SwitchInputLabel = (size) => import_react171.css`
|
|
25795
25903
|
align-items: center;
|
|
25796
25904
|
color: var(--typography-base);
|
|
25797
25905
|
display: inline-flex;
|
|
@@ -25813,7 +25921,7 @@ var SwitchInputLabel = (size) => import_react170.css`
|
|
|
25813
25921
|
top: 0;
|
|
25814
25922
|
}
|
|
25815
25923
|
`;
|
|
25816
|
-
var SwitchText = (size) =>
|
|
25924
|
+
var SwitchText = (size) => import_react171.css`
|
|
25817
25925
|
color: var(--gray-500);
|
|
25818
25926
|
font-size: var(--fs-sm);
|
|
25819
25927
|
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
@@ -25821,7 +25929,7 @@ var SwitchText = (size) => import_react170.css`
|
|
|
25821
25929
|
|
|
25822
25930
|
// src/components/Switch/Switch.tsx
|
|
25823
25931
|
var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
|
|
25824
|
-
var Switch = (0,
|
|
25932
|
+
var Switch = (0, import_react172.forwardRef)(
|
|
25825
25933
|
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
25826
25934
|
let additionalText = infoText;
|
|
25827
25935
|
if (infoText && toggleText) {
|
|
@@ -25850,8 +25958,8 @@ var React24 = __toESM(require("react"));
|
|
|
25850
25958
|
|
|
25851
25959
|
// src/components/Table/Table.styles.ts
|
|
25852
25960
|
init_emotion_jsx_shim();
|
|
25853
|
-
var
|
|
25854
|
-
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) =>
|
|
25961
|
+
var import_react173 = require("@emotion/react");
|
|
25962
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react173.css`
|
|
25855
25963
|
border-bottom: 1px solid var(--gray-400);
|
|
25856
25964
|
border-collapse: collapse;
|
|
25857
25965
|
min-width: 100%;
|
|
@@ -25871,14 +25979,14 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
|
|
|
25871
25979
|
background-color: var(--gray-50);
|
|
25872
25980
|
}
|
|
25873
25981
|
`;
|
|
25874
|
-
var tableHead =
|
|
25982
|
+
var tableHead = import_react173.css`
|
|
25875
25983
|
color: var(--typography-base);
|
|
25876
25984
|
text-align: left;
|
|
25877
25985
|
`;
|
|
25878
|
-
var tableRow =
|
|
25986
|
+
var tableRow = import_react173.css`
|
|
25879
25987
|
border-bottom: 1px solid var(--gray-100);
|
|
25880
25988
|
`;
|
|
25881
|
-
var tableCellHead =
|
|
25989
|
+
var tableCellHead = import_react173.css`
|
|
25882
25990
|
font-size: var(--fs-sm);
|
|
25883
25991
|
text-transform: uppercase;
|
|
25884
25992
|
font-weight: var(--fw-bold);
|
|
@@ -25924,13 +26032,13 @@ var TableCellData = React24.forwardRef(
|
|
|
25924
26032
|
|
|
25925
26033
|
// src/components/Tabs/Tabs.tsx
|
|
25926
26034
|
init_emotion_jsx_shim();
|
|
25927
|
-
var
|
|
25928
|
-
var
|
|
26035
|
+
var import_react175 = require("@ariakit/react");
|
|
26036
|
+
var import_react176 = require("react");
|
|
25929
26037
|
|
|
25930
26038
|
// src/components/Tabs/Tabs.styles.ts
|
|
25931
26039
|
init_emotion_jsx_shim();
|
|
25932
|
-
var
|
|
25933
|
-
var tabButtonStyles =
|
|
26040
|
+
var import_react174 = require("@emotion/react");
|
|
26041
|
+
var tabButtonStyles = import_react174.css`
|
|
25934
26042
|
align-items: center;
|
|
25935
26043
|
border: 0;
|
|
25936
26044
|
height: 2.5rem;
|
|
@@ -25947,7 +26055,7 @@ var tabButtonStyles = import_react173.css`
|
|
|
25947
26055
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
25948
26056
|
}
|
|
25949
26057
|
`;
|
|
25950
|
-
var tabButtonGroupStyles =
|
|
26058
|
+
var tabButtonGroupStyles = import_react174.css`
|
|
25951
26059
|
display: flex;
|
|
25952
26060
|
gap: var(--spacing-base);
|
|
25953
26061
|
border-bottom: 1px solid var(--gray-300);
|
|
@@ -25956,7 +26064,7 @@ var tabButtonGroupStyles = import_react173.css`
|
|
|
25956
26064
|
// src/components/Tabs/Tabs.tsx
|
|
25957
26065
|
var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
|
|
25958
26066
|
var useCurrentTab = () => {
|
|
25959
|
-
const context = (0,
|
|
26067
|
+
const context = (0, import_react175.useTabStore)();
|
|
25960
26068
|
if (!context) {
|
|
25961
26069
|
throw new Error("This component can only be used inside <Tabs>");
|
|
25962
26070
|
}
|
|
@@ -25970,12 +26078,12 @@ var Tabs = ({
|
|
|
25970
26078
|
manual,
|
|
25971
26079
|
...props
|
|
25972
26080
|
}) => {
|
|
25973
|
-
const selected = (0,
|
|
26081
|
+
const selected = (0, import_react176.useMemo)(() => {
|
|
25974
26082
|
if (selectedId) return selectedId;
|
|
25975
26083
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
25976
26084
|
}, [selectedId, useHashForState]);
|
|
25977
|
-
const tab = (0,
|
|
25978
|
-
const onTabSelect = (0,
|
|
26085
|
+
const tab = (0, import_react175.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
|
|
26086
|
+
const onTabSelect = (0, import_react176.useCallback)(
|
|
25979
26087
|
(value) => {
|
|
25980
26088
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
25981
26089
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -25986,28 +26094,28 @@ var Tabs = ({
|
|
|
25986
26094
|
},
|
|
25987
26095
|
[onSelectedIdChange, useHashForState]
|
|
25988
26096
|
);
|
|
25989
|
-
(0,
|
|
26097
|
+
(0, import_react176.useEffect)(() => {
|
|
25990
26098
|
if (selected && selected !== tab.getState().activeId) {
|
|
25991
26099
|
tab.setSelectedId(selected);
|
|
25992
26100
|
}
|
|
25993
26101
|
}, [selected, tab]);
|
|
25994
|
-
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
26102
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
25995
26103
|
};
|
|
25996
26104
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
25997
|
-
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
26105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
25998
26106
|
};
|
|
25999
26107
|
var TabButton = ({
|
|
26000
26108
|
children,
|
|
26001
26109
|
id,
|
|
26002
26110
|
...props
|
|
26003
26111
|
}) => {
|
|
26004
|
-
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
26112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
26005
26113
|
};
|
|
26006
26114
|
var TabContent = ({
|
|
26007
26115
|
children,
|
|
26008
26116
|
...props
|
|
26009
26117
|
}) => {
|
|
26010
|
-
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
26118
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabPanel, { ...props, children });
|
|
26011
26119
|
};
|
|
26012
26120
|
|
|
26013
26121
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -26015,8 +26123,8 @@ init_emotion_jsx_shim();
|
|
|
26015
26123
|
|
|
26016
26124
|
// src/components/Validation/StatusBullet.styles.ts
|
|
26017
26125
|
init_emotion_jsx_shim();
|
|
26018
|
-
var
|
|
26019
|
-
var StatusBulletContainer =
|
|
26126
|
+
var import_react177 = require("@emotion/react");
|
|
26127
|
+
var StatusBulletContainer = import_react177.css`
|
|
26020
26128
|
align-items: center;
|
|
26021
26129
|
align-self: center;
|
|
26022
26130
|
color: var(--gray-500);
|
|
@@ -26025,7 +26133,6 @@ var StatusBulletContainer = import_react176.css`
|
|
|
26025
26133
|
gap: var(--spacing-xs);
|
|
26026
26134
|
line-height: 1;
|
|
26027
26135
|
position: relative;
|
|
26028
|
-
text-transform: lowercase;
|
|
26029
26136
|
|
|
26030
26137
|
&:before {
|
|
26031
26138
|
border-radius: var(--rounded-full);
|
|
@@ -26033,33 +26140,33 @@ var StatusBulletContainer = import_react176.css`
|
|
|
26033
26140
|
display: block;
|
|
26034
26141
|
}
|
|
26035
26142
|
`;
|
|
26036
|
-
var StatusBulletBase =
|
|
26143
|
+
var StatusBulletBase = import_react177.css`
|
|
26037
26144
|
font-size: var(--fs-sm);
|
|
26038
26145
|
&:before {
|
|
26039
26146
|
width: var(--fs-xs);
|
|
26040
26147
|
height: var(--fs-xs);
|
|
26041
26148
|
}
|
|
26042
26149
|
`;
|
|
26043
|
-
var StatusBulletSmall =
|
|
26150
|
+
var StatusBulletSmall = import_react177.css`
|
|
26044
26151
|
font-size: var(--fs-xs);
|
|
26045
26152
|
&:before {
|
|
26046
26153
|
width: var(--fs-xxs);
|
|
26047
26154
|
height: var(--fs-xxs);
|
|
26048
26155
|
}
|
|
26049
26156
|
`;
|
|
26050
|
-
var StatusDraft =
|
|
26157
|
+
var StatusDraft = import_react177.css`
|
|
26051
26158
|
&:before {
|
|
26052
26159
|
background: var(--white);
|
|
26053
26160
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
26054
26161
|
}
|
|
26055
26162
|
`;
|
|
26056
|
-
var StatusModified =
|
|
26163
|
+
var StatusModified = import_react177.css`
|
|
26057
26164
|
&:before {
|
|
26058
26165
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
26059
26166
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
26060
26167
|
}
|
|
26061
26168
|
`;
|
|
26062
|
-
var StatusError =
|
|
26169
|
+
var StatusError = import_react177.css`
|
|
26063
26170
|
color: var(--error);
|
|
26064
26171
|
&:before {
|
|
26065
26172
|
/* TODO: replace this with an svg icon */
|
|
@@ -26072,22 +26179,22 @@ var StatusError = import_react176.css`
|
|
|
26072
26179
|
);
|
|
26073
26180
|
}
|
|
26074
26181
|
`;
|
|
26075
|
-
var StatusPublished =
|
|
26182
|
+
var StatusPublished = import_react177.css`
|
|
26076
26183
|
&:before {
|
|
26077
26184
|
background: var(--accent-dark);
|
|
26078
26185
|
}
|
|
26079
26186
|
`;
|
|
26080
|
-
var StatusOrphan =
|
|
26187
|
+
var StatusOrphan = import_react177.css`
|
|
26081
26188
|
&:before {
|
|
26082
26189
|
background: var(--brand-secondary-5);
|
|
26083
26190
|
}
|
|
26084
26191
|
`;
|
|
26085
|
-
var StatusUnknown =
|
|
26192
|
+
var StatusUnknown = import_react177.css`
|
|
26086
26193
|
&:before {
|
|
26087
26194
|
background: var(--gray-800);
|
|
26088
26195
|
}
|
|
26089
26196
|
`;
|
|
26090
|
-
var StatusDeleted =
|
|
26197
|
+
var StatusDeleted = import_react177.css`
|
|
26091
26198
|
&:before {
|
|
26092
26199
|
background: var(--error);
|
|
26093
26200
|
}
|
|
@@ -26100,6 +26207,7 @@ var StatusBullet = ({
|
|
|
26100
26207
|
hideText = false,
|
|
26101
26208
|
size = "base",
|
|
26102
26209
|
message,
|
|
26210
|
+
compact = false,
|
|
26103
26211
|
...props
|
|
26104
26212
|
}) => {
|
|
26105
26213
|
const currentStateStyles = {
|
|
@@ -26114,7 +26222,7 @@ var StatusBullet = ({
|
|
|
26114
26222
|
Deleted: StatusDeleted
|
|
26115
26223
|
};
|
|
26116
26224
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
26117
|
-
|
|
26225
|
+
const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
|
|
26118
26226
|
"span",
|
|
26119
26227
|
{
|
|
26120
26228
|
role: "status",
|
|
@@ -26122,7 +26230,11 @@ var StatusBullet = ({
|
|
|
26122
26230
|
...props,
|
|
26123
26231
|
children: hideText ? null : message ? message : status
|
|
26124
26232
|
}
|
|
26125
|
-
)
|
|
26233
|
+
);
|
|
26234
|
+
if (compact) {
|
|
26235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(StatusComponent, {});
|
|
26236
|
+
}
|
|
26237
|
+
return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(StatusComponent, {}) }) });
|
|
26126
26238
|
};
|
|
26127
26239
|
// Annotate the CommonJS export names for ESM import in node:
|
|
26128
26240
|
0 && (module.exports = {
|