@uniformdev/design-system 19.159.0 → 19.159.1-alpha.16
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 +728 -396
- package/dist/index.d.mts +86 -12
- package/dist/index.d.ts +86 -12
- package/dist/index.js +768 -412
- package/package.json +6 -6
package/dist/index.js
CHANGED
|
@@ -1371,6 +1371,7 @@ __export(src_exports, {
|
|
|
1371
1371
|
CurrentDrawerContext: () => CurrentDrawerContext,
|
|
1372
1372
|
DashedBox: () => DashedBox,
|
|
1373
1373
|
DateTimePicker: () => DateTimePicker,
|
|
1374
|
+
DateTimePickerSummary: () => DateTimePickerSummary,
|
|
1374
1375
|
DateTimePickerVariant: () => DateTimePickerVariant,
|
|
1375
1376
|
DebouncedInputKeywordSearch: () => DebouncedInputKeywordSearch,
|
|
1376
1377
|
DescriptionList: () => DescriptionList,
|
|
@@ -1434,6 +1435,13 @@ __export(src_exports, {
|
|
|
1434
1435
|
Modal: () => Modal,
|
|
1435
1436
|
ModalDialog: () => ModalDialog,
|
|
1436
1437
|
MultilineChip: () => MultilineChip,
|
|
1438
|
+
ObjectGridContainer: () => ObjectGridContainer2,
|
|
1439
|
+
ObjectGridItem: () => ObjectGridItem2,
|
|
1440
|
+
ObjectGridItemCardCover: () => ObjectGridItemCardCover,
|
|
1441
|
+
ObjectGridItemCover: () => ObjectGridItemCover,
|
|
1442
|
+
ObjectGridItemCoverButton: () => ObjectGridItemCoverButton,
|
|
1443
|
+
ObjectGridItemHeading: () => ObjectGridItemHeading2,
|
|
1444
|
+
ObjectGridItemIconWithTooltip: () => ObjectGridItemIconWithTooltip,
|
|
1437
1445
|
PageHeaderSection: () => PageHeaderSection,
|
|
1438
1446
|
Pagination: () => Pagination,
|
|
1439
1447
|
Paragraph: () => Paragraph,
|
|
@@ -1579,6 +1587,7 @@ __export(src_exports, {
|
|
|
1579
1587
|
toast: () => import_react_toastify.toast,
|
|
1580
1588
|
uniformComponentIcon: () => uniformComponentIcon,
|
|
1581
1589
|
uniformComponentPatternIcon: () => uniformComponentPatternIcon,
|
|
1590
|
+
uniformCompositionPatternIcon: () => uniformCompositionPatternIcon,
|
|
1582
1591
|
uniformContentTypeIcon: () => uniformContentTypeIcon,
|
|
1583
1592
|
uniformEntryIcon: () => uniformEntryIcon,
|
|
1584
1593
|
uniformEntryPatternIcon: () => uniformEntryPatternIcon,
|
|
@@ -1666,6 +1675,10 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
|
|
|
1666
1675
|
|
|
1667
1676
|
--action-destructive-default: var(--brand-secondary-5);
|
|
1668
1677
|
--action-destructive-hover: #e07571;
|
|
1678
|
+
--action-destructive-active: rbga(210, 50, 45, 0.05); /* #d2322d */
|
|
1679
|
+
--action-destructive-disabled: #f87171;
|
|
1680
|
+
|
|
1681
|
+
|
|
1669
1682
|
|
|
1670
1683
|
/* tertiary action */
|
|
1671
1684
|
--tertiary-action-default: var(--gray-700);
|
|
@@ -2565,16 +2578,16 @@ var buttonPrimary = import_react10.css`
|
|
|
2565
2578
|
})}
|
|
2566
2579
|
`;
|
|
2567
2580
|
var buttonDestructive = import_react10.css`
|
|
2568
|
-
background: var(--
|
|
2581
|
+
background: var(--action-destructive-default);
|
|
2569
2582
|
color: var(--white);
|
|
2570
2583
|
|
|
2571
2584
|
&:disabled {
|
|
2572
|
-
background: var(--gray-300);
|
|
2573
2585
|
color: var(--white);
|
|
2586
|
+
opacity: var(--opacity-50);
|
|
2574
2587
|
}
|
|
2575
2588
|
|
|
2576
2589
|
${buttonRippleEffect({
|
|
2577
|
-
hoverColor: "var(--
|
|
2590
|
+
hoverColor: "var(--action-destructive-default)",
|
|
2578
2591
|
activeColor: "var(--action-destructive-hover)"
|
|
2579
2592
|
})}
|
|
2580
2593
|
`;
|
|
@@ -2652,19 +2665,20 @@ var buttonGhost = import_react10.css`
|
|
|
2652
2665
|
`;
|
|
2653
2666
|
var buttonGhostDestructive = import_react10.css`
|
|
2654
2667
|
background: transparent;
|
|
2655
|
-
color: var(--
|
|
2668
|
+
color: var(--action-destructive-default);
|
|
2656
2669
|
|
|
2657
2670
|
&:hover {
|
|
2658
|
-
|
|
2671
|
+
outline: 1px solid var(--action-destructive-hover);
|
|
2672
|
+
color: var(--action-destructive-hover);
|
|
2659
2673
|
}
|
|
2660
2674
|
|
|
2661
2675
|
&:disabled {
|
|
2662
2676
|
background: transparent;
|
|
2663
|
-
|
|
2664
|
-
|
|
2677
|
+
color: var(--action-destructive-disabled);
|
|
2678
|
+
opacity: var(--opacity-50);
|
|
2665
2679
|
}
|
|
2666
2680
|
|
|
2667
|
-
${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--
|
|
2681
|
+
${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--action-destructive-active)" })}
|
|
2668
2682
|
`;
|
|
2669
2683
|
var buttonTertiary = import_react10.css`
|
|
2670
2684
|
background: var(--tertiary-action-default);
|
|
@@ -2792,7 +2806,7 @@ var toastContainerStyles = import_react12.css`
|
|
|
2792
2806
|
${functionalColors}
|
|
2793
2807
|
|
|
2794
2808
|
--toastify-color-light: white;
|
|
2795
|
-
--toastify-color-info: var(--utility-
|
|
2809
|
+
--toastify-color-info: var(--utility-info-icon);
|
|
2796
2810
|
--toastify-color-success: var(--utility-success-icon);
|
|
2797
2811
|
--toastify-color-warning: var(--utility-caution-icon);
|
|
2798
2812
|
--toastify-color-error: var(--utility-danger-icon);
|
|
@@ -4783,6 +4797,25 @@ var uniformComponentPatternIcon = (0, import_all_files2.GenIcon)({
|
|
|
4783
4797
|
}
|
|
4784
4798
|
]
|
|
4785
4799
|
});
|
|
4800
|
+
var uniformCompositionPatternIcon = (0, import_all_files2.GenIcon)({
|
|
4801
|
+
tag: "svg",
|
|
4802
|
+
attr: {
|
|
4803
|
+
role: "img",
|
|
4804
|
+
viewBox: "0 0 24 24"
|
|
4805
|
+
},
|
|
4806
|
+
child: [
|
|
4807
|
+
{
|
|
4808
|
+
tag: "path",
|
|
4809
|
+
attr: {
|
|
4810
|
+
fillRule: "evenodd",
|
|
4811
|
+
clipRule: "evenodd",
|
|
4812
|
+
fill: "currentColor",
|
|
4813
|
+
d: "M6.92163 12H4V13.5H8.42163L6.92163 12ZM12.7397 17.8181C12.6083 17.9314 12.4372 18 12.25 18H3.25C2.83579 18 2.5 17.6642 2.5 17.25V6.75C2.5 6.33579 2.83579 6 3.25 6H8.5V9.75H9.17163L10.6716 8.25H10V6.07501C10.7159 6.22033 11.3577 6.56957 11.8622 7.05945L12.9229 5.99871C11.9761 5.07158 10.6798 4.5 9.25 4.5H3.25C2.00736 4.5 1 5.50736 1 6.75V17.25C1 18.4926 2.00736 19.5 3.25 19.5H12.25C12.8514 19.5 13.3977 19.2641 13.8013 18.8797L12.7397 17.8181ZM11.4216 16.5H4V15H9.92163L11.4216 16.5ZM4 10.5H7V9H4V10.5ZM12.5784 12L16.3497 8.22876L20.1209 12L16.3497 15.7712L12.5784 12ZM16.3497 18.5997L9.75 12L16.3497 5.40034L22.9493 12L16.3497 18.5997Z"
|
|
4814
|
+
},
|
|
4815
|
+
child: []
|
|
4816
|
+
}
|
|
4817
|
+
]
|
|
4818
|
+
});
|
|
4786
4819
|
var uniformContentTypeIcon = import_CgList2.CgList;
|
|
4787
4820
|
var uniformEntryIcon = import_CgPen2.CgPen;
|
|
4788
4821
|
var uniformEntryPatternIcon = (0, import_all_files2.GenIcon)({
|
|
@@ -14401,9 +14434,9 @@ var InfoIcon2 = import_react44.css`
|
|
|
14401
14434
|
|
|
14402
14435
|
// src/components/Input/InfoMessage.tsx
|
|
14403
14436
|
var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
|
|
14404
|
-
var InfoMessage = ({ message, testId, ...props }) => {
|
|
14437
|
+
var InfoMessage = ({ message, testId, icon = import_MdInfoOutline.MdInfoOutline, ...props }) => {
|
|
14405
14438
|
return message ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { role: "status", css: InfoText, "data-testid": testId, ...props, children: [
|
|
14406
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { css: InfoIcon2, icon
|
|
14439
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { css: InfoIcon2, icon, size: "1rem", iconColor: "currentColor" }) }),
|
|
14407
14440
|
message
|
|
14408
14441
|
] }) : null;
|
|
14409
14442
|
};
|
|
@@ -14823,10 +14856,11 @@ function convertComboBoxGroupsToSelectableGroups(args) {
|
|
|
14823
14856
|
return { groupedOptions, selectedOptions };
|
|
14824
14857
|
}
|
|
14825
14858
|
function getComboBoxSelectedSelectableGroups(selectedValues) {
|
|
14826
|
-
const
|
|
14859
|
+
const selectedValuesNormalized = selectedValues ? Array.isArray(selectedValues) ? selectedValues : [selectedValues] : null;
|
|
14860
|
+
const selectedOptionValues = selectedValuesNormalized == null ? void 0 : selectedValuesNormalized.flatMap(
|
|
14827
14861
|
(selectedValue) => Array.isArray(selectedValue.value) ? selectedValue.value : [selectedValue.value]
|
|
14828
14862
|
);
|
|
14829
|
-
return new Set(selectedOptionValues.filter((value) => value !== void 0));
|
|
14863
|
+
return new Set(selectedOptionValues == null ? void 0 : selectedOptionValues.filter((value) => value !== void 0));
|
|
14830
14864
|
}
|
|
14831
14865
|
function flatMapOptionValues(options) {
|
|
14832
14866
|
return options.flatMap((option) => {
|
|
@@ -15059,6 +15093,10 @@ var InputKeywordSearch = (0, import_react50.forwardRef)(
|
|
|
15059
15093
|
minHeight: 0,
|
|
15060
15094
|
padding: "var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-base)",
|
|
15061
15095
|
fontSize: "var(--fs-sm)"
|
|
15096
|
+
} : compact === "sm" ? {
|
|
15097
|
+
minHeight: "40px",
|
|
15098
|
+
padding: "var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-base)",
|
|
15099
|
+
fontSize: "var(--fs-sm)"
|
|
15062
15100
|
} : compact ? {
|
|
15063
15101
|
padding: "var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base)",
|
|
15064
15102
|
fontSize: "var(--fs-sm)"
|
|
@@ -16967,6 +17005,7 @@ init_emotion_jsx_shim();
|
|
|
16967
17005
|
// src/components/DateTimePicker/DateTimePicker.tsx
|
|
16968
17006
|
init_emotion_jsx_shim();
|
|
16969
17007
|
var import_date4 = require("@internationalized/date");
|
|
17008
|
+
var import_CgCalendar2 = require("@react-icons/all-files/cg/CgCalendar");
|
|
16970
17009
|
var import_react75 = require("react");
|
|
16971
17010
|
var import_Popover = require("reakit/Popover");
|
|
16972
17011
|
|
|
@@ -17179,6 +17218,7 @@ function useDateTimePickerContext() {
|
|
|
17179
17218
|
var DateTimePicker = ({
|
|
17180
17219
|
id,
|
|
17181
17220
|
label,
|
|
17221
|
+
triggerIcon = import_CgCalendar2.CgCalendar,
|
|
17182
17222
|
value,
|
|
17183
17223
|
minVisible,
|
|
17184
17224
|
maxVisible,
|
|
@@ -17288,7 +17328,7 @@ var DateTimePicker = ({
|
|
|
17288
17328
|
children: "clear"
|
|
17289
17329
|
}
|
|
17290
17330
|
),
|
|
17291
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { css: trigger, buttonType: "ghost", disabled: disabled2, onClick: popover2.show, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon, { icon:
|
|
17331
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { css: trigger, buttonType: "ghost", disabled: disabled2, onClick: popover2.show, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon, { icon: triggerIcon, iconColor: "currentColor" }) })
|
|
17292
17332
|
]
|
|
17293
17333
|
}
|
|
17294
17334
|
),
|
|
@@ -19961,6 +20001,305 @@ var ModalDialog = (0, import_react114.forwardRef)(
|
|
|
19961
20001
|
);
|
|
19962
20002
|
ModalDialog.displayName = "ModalDialog";
|
|
19963
20003
|
|
|
20004
|
+
// src/components/Objects/ObjectGridContainer.tsx
|
|
20005
|
+
init_emotion_jsx_shim();
|
|
20006
|
+
|
|
20007
|
+
// src/components/Objects/styles/ObjectGridContainer.styles.ts
|
|
20008
|
+
init_emotion_jsx_shim();
|
|
20009
|
+
var import_react115 = require("@emotion/react");
|
|
20010
|
+
var ObjectGridContainer = (gridCount) => import_react115.css`
|
|
20011
|
+
display: grid;
|
|
20012
|
+
grid-template-columns: repeat(${gridCount}, minmax(250px, 1fr));
|
|
20013
|
+
gap: var(--spacing-base);
|
|
20014
|
+
`;
|
|
20015
|
+
|
|
20016
|
+
// src/components/Objects/ObjectGridContainer.tsx
|
|
20017
|
+
var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
|
|
20018
|
+
var ObjectGridContainer2 = ({ gridCount = 3, children }) => {
|
|
20019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { "data-testid": "object-grid-container", css: ObjectGridContainer(gridCount), children });
|
|
20020
|
+
};
|
|
20021
|
+
|
|
20022
|
+
// src/components/Objects/ObjectGridItem.tsx
|
|
20023
|
+
init_emotion_jsx_shim();
|
|
20024
|
+
|
|
20025
|
+
// src/components/Objects/styles/ObjectGridItem.styles.ts
|
|
20026
|
+
init_emotion_jsx_shim();
|
|
20027
|
+
var import_react116 = require("@emotion/react");
|
|
20028
|
+
var ObjectGridItem = import_react116.css`
|
|
20029
|
+
border: 1px solid var(--gray-300);
|
|
20030
|
+
border-radius: var(--rounded-base);
|
|
20031
|
+
background: var(--white);
|
|
20032
|
+
display: flex;
|
|
20033
|
+
flex-direction: column;
|
|
20034
|
+
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
20035
|
+
|
|
20036
|
+
&[aria-selected='true'] {
|
|
20037
|
+
border: 1px solid var(--accent-dark);
|
|
20038
|
+
}
|
|
20039
|
+
|
|
20040
|
+
&[aria-selected='false'] {
|
|
20041
|
+
&:hover {
|
|
20042
|
+
border: 1px solid var(--accent-dark);
|
|
20043
|
+
}
|
|
20044
|
+
}
|
|
20045
|
+
`;
|
|
20046
|
+
var ObjectGridItemMediaWrapper = import_react116.css`
|
|
20047
|
+
display: flex;
|
|
20048
|
+
flex: 1 1 0;
|
|
20049
|
+
position: relative;
|
|
20050
|
+
`;
|
|
20051
|
+
var ObjectGridItemContentWrapper = import_react116.css`
|
|
20052
|
+
padding: 0 var(--spacing-sm) var(--spacing-sm);
|
|
20053
|
+
min-height: 52px;
|
|
20054
|
+
`;
|
|
20055
|
+
var ObjectGridItemImage = import_react116.css`
|
|
20056
|
+
object-fit: cover;
|
|
20057
|
+
width: 100%;
|
|
20058
|
+
height: auto;
|
|
20059
|
+
`;
|
|
20060
|
+
var MenuBtn = import_react116.css`
|
|
20061
|
+
border: none;
|
|
20062
|
+
background: transparent;
|
|
20063
|
+
padding: var(--spacing-xs);
|
|
20064
|
+
color: var(--gray-300);
|
|
20065
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
20066
|
+
|
|
20067
|
+
&:focus,
|
|
20068
|
+
&:hover {
|
|
20069
|
+
outline: none;
|
|
20070
|
+
color: var(--gray-500);
|
|
20071
|
+
}
|
|
20072
|
+
`;
|
|
20073
|
+
|
|
20074
|
+
// src/components/Objects/ObjectGridItem.tsx
|
|
20075
|
+
var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
|
|
20076
|
+
var ObjectGridItem2 = ({
|
|
20077
|
+
header: header2,
|
|
20078
|
+
cover,
|
|
20079
|
+
rightSlot,
|
|
20080
|
+
menuItems,
|
|
20081
|
+
isSelected,
|
|
20082
|
+
children
|
|
20083
|
+
}) => {
|
|
20084
|
+
return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { css: ObjectGridItem, "aria-selected": isSelected, children: [
|
|
20085
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { css: ObjectGridItemMediaWrapper, children: cover }),
|
|
20086
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(HorizontalRhythm, { css: ObjectGridItemContentWrapper, justify: "space-between", gap: "sm", children: [
|
|
20087
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(VerticalRhythm, { gap: "0", children: [
|
|
20088
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
|
|
20089
|
+
children
|
|
20090
|
+
] }),
|
|
20091
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(HorizontalRhythm, { gap: "xs", align: "flex-start", children: [
|
|
20092
|
+
rightSlot,
|
|
20093
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
|
|
20094
|
+
Menu,
|
|
20095
|
+
{
|
|
20096
|
+
menuTrigger: (
|
|
20097
|
+
// TODO: once insights lands we should be able to replace this with MenuTrigger component
|
|
20098
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
|
|
20099
|
+
"button",
|
|
20100
|
+
{
|
|
20101
|
+
type: "button",
|
|
20102
|
+
"data-testid": "object-grid-item-menu-btn",
|
|
20103
|
+
title: "menu options",
|
|
20104
|
+
css: MenuBtn,
|
|
20105
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Icon, { icon: "more-alt", size: "1rem", iconColor: "currentColor" })
|
|
20106
|
+
}
|
|
20107
|
+
)
|
|
20108
|
+
),
|
|
20109
|
+
placement: "bottom-end",
|
|
20110
|
+
children: menuItems
|
|
20111
|
+
}
|
|
20112
|
+
) : null
|
|
20113
|
+
] })
|
|
20114
|
+
] })
|
|
20115
|
+
] });
|
|
20116
|
+
};
|
|
20117
|
+
|
|
20118
|
+
// src/components/Objects/ObjectGridItemCardCover.tsx
|
|
20119
|
+
init_emotion_jsx_shim();
|
|
20120
|
+
|
|
20121
|
+
// src/components/Objects/styles/ObjectGridItemCardCover.styles.ts
|
|
20122
|
+
init_emotion_jsx_shim();
|
|
20123
|
+
var import_react117 = require("@emotion/react");
|
|
20124
|
+
var CoverImage = import_react117.css`
|
|
20125
|
+
aspect-ratio: 16/9;
|
|
20126
|
+
max-width: 100%;
|
|
20127
|
+
max-height: 100%;
|
|
20128
|
+
height: auto;
|
|
20129
|
+
padding: var(--spacing-sm);
|
|
20130
|
+
`;
|
|
20131
|
+
var CoverIconWrapper = import_react117.css`
|
|
20132
|
+
position: relative;
|
|
20133
|
+
display: flex;
|
|
20134
|
+
align-items: center;
|
|
20135
|
+
justify-content: center;
|
|
20136
|
+
flex: 1;
|
|
20137
|
+
overflow: hidden;
|
|
20138
|
+
`;
|
|
20139
|
+
var CoverIconGhost = import_react117.css`
|
|
20140
|
+
position: absolute;
|
|
20141
|
+
width: 60%;
|
|
20142
|
+
height: auto;
|
|
20143
|
+
aspect-ratio: 1;
|
|
20144
|
+
opacity: 0.05;
|
|
20145
|
+
transform: rotateZ(-15deg) translate(35%, 30%);
|
|
20146
|
+
`;
|
|
20147
|
+
var CoverSlot = import_react117.css`
|
|
20148
|
+
align-items: center;
|
|
20149
|
+
background: var(--white);
|
|
20150
|
+
display: flex;
|
|
20151
|
+
justify-content: center;
|
|
20152
|
+
position: absolute;
|
|
20153
|
+
top: var(--spacing-sm);
|
|
20154
|
+
z-index: 1;
|
|
20155
|
+
width: 24px;
|
|
20156
|
+
height: 24px;
|
|
20157
|
+
`;
|
|
20158
|
+
var CoverSlotLeft = import_react117.css`
|
|
20159
|
+
border-bottom-right-radius: var(--rounded-base);
|
|
20160
|
+
left: var(--spacing-sm);
|
|
20161
|
+
`;
|
|
20162
|
+
var CoverSlotRight = import_react117.css`
|
|
20163
|
+
border-bottom-left-radius: var(--rounded-base);
|
|
20164
|
+
right: var(--spacing-sm);
|
|
20165
|
+
`;
|
|
20166
|
+
var CoverButton = import_react117.css`
|
|
20167
|
+
align-items: stretch;
|
|
20168
|
+
border: none;
|
|
20169
|
+
background: none;
|
|
20170
|
+
display: flex;
|
|
20171
|
+
flex: 1 1 0;
|
|
20172
|
+
padding: 0;
|
|
20173
|
+
|
|
20174
|
+
&:focus,
|
|
20175
|
+
&:hover {
|
|
20176
|
+
outline: none;
|
|
20177
|
+
}
|
|
20178
|
+
`;
|
|
20179
|
+
var CoverSelectedChip = import_react117.css`
|
|
20180
|
+
animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
20181
|
+
opacity: 0;
|
|
20182
|
+
position: absolute;
|
|
20183
|
+
bottom: var(--spacing-base);
|
|
20184
|
+
right: var(--spacing-base);
|
|
20185
|
+
`;
|
|
20186
|
+
|
|
20187
|
+
// src/components/Objects/ObjectGridItemCardCover.tsx
|
|
20188
|
+
var import_jsx_runtime103 = require("@emotion/react/jsx-runtime");
|
|
20189
|
+
var ObjectGridItemCardCover = (props) => {
|
|
20190
|
+
if ("imageUrl" in props && props.imageUrl) {
|
|
20191
|
+
const { imageUrl } = props;
|
|
20192
|
+
return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
|
|
20193
|
+
"img",
|
|
20194
|
+
{
|
|
20195
|
+
src: imageUrl,
|
|
20196
|
+
css: CoverImage,
|
|
20197
|
+
loading: "lazy",
|
|
20198
|
+
role: "presentation",
|
|
20199
|
+
"data-testid": "object-grid-item-thumbnail"
|
|
20200
|
+
}
|
|
20201
|
+
);
|
|
20202
|
+
}
|
|
20203
|
+
if ("icon" in props && props.icon) {
|
|
20204
|
+
const { icon } = props;
|
|
20205
|
+
return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
|
|
20206
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { icon, iconColor: "currentColor", css: CoverIconGhost }),
|
|
20207
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { icon, iconColor: "currentColor", size: 48 })
|
|
20208
|
+
] });
|
|
20209
|
+
}
|
|
20210
|
+
};
|
|
20211
|
+
var ObjectGridItemCover = ({
|
|
20212
|
+
coverSlotLeft,
|
|
20213
|
+
coverSlotRight,
|
|
20214
|
+
...props
|
|
20215
|
+
}) => {
|
|
20216
|
+
return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
|
|
20217
|
+
coverSlotLeft ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
|
|
20218
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(ObjectGridItemCardCover, { ...props }),
|
|
20219
|
+
coverSlotRight ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null
|
|
20220
|
+
] });
|
|
20221
|
+
};
|
|
20222
|
+
var ObjectGridItemCoverButton = ({
|
|
20223
|
+
id,
|
|
20224
|
+
isSelected,
|
|
20225
|
+
onSelection,
|
|
20226
|
+
coverSlotLeft,
|
|
20227
|
+
coverSlotRight,
|
|
20228
|
+
selectedText = "selected",
|
|
20229
|
+
...props
|
|
20230
|
+
}) => {
|
|
20231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("button", { type: "button", css: CoverButton, onClick: () => onSelection(id), "aria-selected": isSelected, children: [
|
|
20232
|
+
coverSlotLeft ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
|
|
20233
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(ObjectGridItemCardCover, { ...props }),
|
|
20234
|
+
coverSlotRight ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
|
|
20235
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: CoverSelectedChip, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
|
|
20236
|
+
] });
|
|
20237
|
+
};
|
|
20238
|
+
|
|
20239
|
+
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
20240
|
+
init_emotion_jsx_shim();
|
|
20241
|
+
var import_react119 = require("react");
|
|
20242
|
+
|
|
20243
|
+
// src/components/Objects/styles/ObjectGridItemHeading.styles.ts
|
|
20244
|
+
init_emotion_jsx_shim();
|
|
20245
|
+
var import_react118 = require("@emotion/react");
|
|
20246
|
+
var ObjectGridItemHeading = import_react118.css`
|
|
20247
|
+
overflow: hidden;
|
|
20248
|
+
text-overflow: ellipsis;
|
|
20249
|
+
white-space: initial;
|
|
20250
|
+
display: -webkit-box;
|
|
20251
|
+
-webkit-line-clamp: 1;
|
|
20252
|
+
-webkit-box-orient: vertical;
|
|
20253
|
+
`;
|
|
20254
|
+
var PopoverContent = import_react118.css`
|
|
20255
|
+
min-width: 50px;
|
|
20256
|
+
`;
|
|
20257
|
+
|
|
20258
|
+
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
20259
|
+
var import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
|
|
20260
|
+
var ObjectGridItemHeading2 = ({
|
|
20261
|
+
heading,
|
|
20262
|
+
beforeHeadingSlot,
|
|
20263
|
+
afterHeadingSlot
|
|
20264
|
+
}) => {
|
|
20265
|
+
const [hasTruncation, setHasTruncation] = (0, import_react119.useState)(false);
|
|
20266
|
+
const headingRef = (0, import_react119.useRef)(null);
|
|
20267
|
+
(0, import_react119.useEffect)(() => {
|
|
20268
|
+
const currentHeading = headingRef.current;
|
|
20269
|
+
const observer = new ResizeObserver((entries) => {
|
|
20270
|
+
for (const entry of entries) {
|
|
20271
|
+
const isHeadingTruncated = entry.target.scrollHeight > entry.target.clientHeight;
|
|
20272
|
+
setHasTruncation(isHeadingTruncated);
|
|
20273
|
+
}
|
|
20274
|
+
});
|
|
20275
|
+
if (currentHeading) {
|
|
20276
|
+
observer.observe(currentHeading);
|
|
20277
|
+
}
|
|
20278
|
+
return () => {
|
|
20279
|
+
if (currentHeading) {
|
|
20280
|
+
observer.unobserve(currentHeading);
|
|
20281
|
+
}
|
|
20282
|
+
};
|
|
20283
|
+
}, []);
|
|
20284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
20285
|
+
beforeHeadingSlot,
|
|
20286
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Tooltip, { title: hasTruncation ? heading : "", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, children: heading }) }),
|
|
20287
|
+
afterHeadingSlot
|
|
20288
|
+
] });
|
|
20289
|
+
};
|
|
20290
|
+
|
|
20291
|
+
// src/components/Objects/ObjectGridItemIconWithTooltip.tsx
|
|
20292
|
+
init_emotion_jsx_shim();
|
|
20293
|
+
var import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
|
|
20294
|
+
var ObjectGridItemIconWithTooltip = ({
|
|
20295
|
+
tooltipTitle,
|
|
20296
|
+
placement = "bottom-start",
|
|
20297
|
+
icon,
|
|
20298
|
+
iconColor = "accent-dark"
|
|
20299
|
+
}) => {
|
|
20300
|
+
return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
20301
|
+
};
|
|
20302
|
+
|
|
19964
20303
|
// src/components/Pagination/Pagination.tsx
|
|
19965
20304
|
init_emotion_jsx_shim();
|
|
19966
20305
|
var import_react_paginate = __toESM(require("react-paginate"));
|
|
@@ -19995,7 +20334,7 @@ var page = import_css.css`
|
|
|
19995
20334
|
`;
|
|
19996
20335
|
|
|
19997
20336
|
// src/components/Pagination/Pagination.tsx
|
|
19998
|
-
var
|
|
20337
|
+
var import_jsx_runtime106 = require("@emotion/react/jsx-runtime");
|
|
19999
20338
|
function Pagination({
|
|
20000
20339
|
limit,
|
|
20001
20340
|
offset,
|
|
@@ -20010,12 +20349,12 @@ function Pagination({
|
|
|
20010
20349
|
if (pageCount <= 1) {
|
|
20011
20350
|
return null;
|
|
20012
20351
|
}
|
|
20013
|
-
return /* @__PURE__ */ (0,
|
|
20352
|
+
return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
|
|
20014
20353
|
import_react_paginate.default,
|
|
20015
20354
|
{
|
|
20016
20355
|
forcePage: currentPage,
|
|
20017
|
-
previousLabel: /* @__PURE__ */ (0,
|
|
20018
|
-
nextLabel: /* @__PURE__ */ (0,
|
|
20356
|
+
previousLabel: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: prevNextControls, children: "<" }),
|
|
20357
|
+
nextLabel: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: prevNextControls, children: ">" }),
|
|
20019
20358
|
breakLabel: "...",
|
|
20020
20359
|
pageCount,
|
|
20021
20360
|
marginPagesDisplayed: 2,
|
|
@@ -20035,8 +20374,8 @@ function Pagination({
|
|
|
20035
20374
|
|
|
20036
20375
|
// src/components/ParameterInputs/hooks/ParameterShellContext.tsx
|
|
20037
20376
|
init_emotion_jsx_shim();
|
|
20038
|
-
var
|
|
20039
|
-
var ParameterShellContext = (0,
|
|
20377
|
+
var import_react120 = require("react");
|
|
20378
|
+
var ParameterShellContext = (0, import_react120.createContext)({
|
|
20040
20379
|
id: "",
|
|
20041
20380
|
label: "",
|
|
20042
20381
|
hiddenLabel: void 0,
|
|
@@ -20045,7 +20384,7 @@ var ParameterShellContext = (0, import_react115.createContext)({
|
|
|
20045
20384
|
}
|
|
20046
20385
|
});
|
|
20047
20386
|
var useParameterShell = () => {
|
|
20048
|
-
const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0,
|
|
20387
|
+
const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react120.useContext)(ParameterShellContext);
|
|
20049
20388
|
return {
|
|
20050
20389
|
id,
|
|
20051
20390
|
label,
|
|
@@ -20060,8 +20399,8 @@ init_emotion_jsx_shim();
|
|
|
20060
20399
|
|
|
20061
20400
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
20062
20401
|
init_emotion_jsx_shim();
|
|
20063
|
-
var
|
|
20064
|
-
var inputIconBtn =
|
|
20402
|
+
var import_react121 = require("@emotion/react");
|
|
20403
|
+
var inputIconBtn = import_react121.css`
|
|
20065
20404
|
align-items: center;
|
|
20066
20405
|
border: none;
|
|
20067
20406
|
border-radius: var(--rounded-base);
|
|
@@ -20087,7 +20426,7 @@ var inputIconBtn = import_react116.css`
|
|
|
20087
20426
|
`;
|
|
20088
20427
|
|
|
20089
20428
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
20090
|
-
var
|
|
20429
|
+
var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
|
|
20091
20430
|
var LabelLeadingIcon = ({
|
|
20092
20431
|
icon,
|
|
20093
20432
|
iconColor,
|
|
@@ -20099,7 +20438,7 @@ var LabelLeadingIcon = ({
|
|
|
20099
20438
|
...props
|
|
20100
20439
|
}) => {
|
|
20101
20440
|
const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
|
|
20102
|
-
return /* @__PURE__ */ (0,
|
|
20441
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Tooltip, { title: titleFr, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
|
|
20103
20442
|
"button",
|
|
20104
20443
|
{
|
|
20105
20444
|
css: inputIconBtn,
|
|
@@ -20109,7 +20448,7 @@ var LabelLeadingIcon = ({
|
|
|
20109
20448
|
...props,
|
|
20110
20449
|
"data-testid": "lock-button",
|
|
20111
20450
|
children: [
|
|
20112
|
-
/* @__PURE__ */ (0,
|
|
20451
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
|
|
20113
20452
|
Icon,
|
|
20114
20453
|
{
|
|
20115
20454
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -20129,8 +20468,8 @@ init_emotion_jsx_shim();
|
|
|
20129
20468
|
|
|
20130
20469
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
20131
20470
|
init_emotion_jsx_shim();
|
|
20132
|
-
var
|
|
20133
|
-
var inputContainer2 =
|
|
20471
|
+
var import_react122 = require("@emotion/react");
|
|
20472
|
+
var inputContainer2 = import_react122.css`
|
|
20134
20473
|
position: relative;
|
|
20135
20474
|
scroll-margin: var(--spacing-2xl);
|
|
20136
20475
|
|
|
@@ -20143,14 +20482,14 @@ var inputContainer2 = import_react117.css`
|
|
|
20143
20482
|
}
|
|
20144
20483
|
}
|
|
20145
20484
|
`;
|
|
20146
|
-
var labelText2 =
|
|
20485
|
+
var labelText2 = import_react122.css`
|
|
20147
20486
|
align-items: center;
|
|
20148
20487
|
display: flex;
|
|
20149
20488
|
gap: var(--spacing-xs);
|
|
20150
20489
|
font-weight: var(--fw-regular);
|
|
20151
20490
|
margin: 0 0 var(--spacing-xs);
|
|
20152
20491
|
`;
|
|
20153
|
-
var input3 =
|
|
20492
|
+
var input3 = import_react122.css`
|
|
20154
20493
|
display: block;
|
|
20155
20494
|
appearance: none;
|
|
20156
20495
|
box-sizing: border-box;
|
|
@@ -20198,18 +20537,18 @@ var input3 = import_react117.css`
|
|
|
20198
20537
|
color: var(--gray-400);
|
|
20199
20538
|
}
|
|
20200
20539
|
`;
|
|
20201
|
-
var selectInput =
|
|
20540
|
+
var selectInput = import_react122.css`
|
|
20202
20541
|
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");
|
|
20203
20542
|
background-position: right var(--spacing-sm) center;
|
|
20204
20543
|
background-repeat: no-repeat;
|
|
20205
20544
|
background-size: 1rem;
|
|
20206
20545
|
padding-right: var(--spacing-xl);
|
|
20207
20546
|
`;
|
|
20208
|
-
var inputWrapper =
|
|
20547
|
+
var inputWrapper = import_react122.css`
|
|
20209
20548
|
display: flex; // used to correct overflow with chrome textarea
|
|
20210
20549
|
position: relative;
|
|
20211
20550
|
`;
|
|
20212
|
-
var inputIcon2 =
|
|
20551
|
+
var inputIcon2 = import_react122.css`
|
|
20213
20552
|
align-items: center;
|
|
20214
20553
|
background: var(--white);
|
|
20215
20554
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -20225,7 +20564,7 @@ var inputIcon2 = import_react117.css`
|
|
|
20225
20564
|
width: var(--spacing-lg);
|
|
20226
20565
|
z-index: var(--z-10);
|
|
20227
20566
|
`;
|
|
20228
|
-
var inputToggleLabel2 =
|
|
20567
|
+
var inputToggleLabel2 = import_react122.css`
|
|
20229
20568
|
--inline-label-color: var(--typography-base);
|
|
20230
20569
|
align-items: center;
|
|
20231
20570
|
cursor: pointer;
|
|
@@ -20240,7 +20579,7 @@ var inputToggleLabel2 = import_react117.css`
|
|
|
20240
20579
|
--inline-label-color: var(--gray-400);
|
|
20241
20580
|
}
|
|
20242
20581
|
`;
|
|
20243
|
-
var toggleInput2 =
|
|
20582
|
+
var toggleInput2 = import_react122.css`
|
|
20244
20583
|
appearance: none;
|
|
20245
20584
|
border: 1px solid var(--gray-200);
|
|
20246
20585
|
background: var(--white);
|
|
@@ -20293,7 +20632,7 @@ var toggleInput2 = import_react117.css`
|
|
|
20293
20632
|
border-color: var(--gray-300);
|
|
20294
20633
|
}
|
|
20295
20634
|
`;
|
|
20296
|
-
var inlineLabel2 =
|
|
20635
|
+
var inlineLabel2 = import_react122.css`
|
|
20297
20636
|
color: var(--inline-label-color);
|
|
20298
20637
|
padding-left: var(--spacing-md);
|
|
20299
20638
|
font-size: var(--fs-sm);
|
|
@@ -20310,7 +20649,7 @@ var inlineLabel2 = import_react117.css`
|
|
|
20310
20649
|
}
|
|
20311
20650
|
}
|
|
20312
20651
|
`;
|
|
20313
|
-
var inputMenu =
|
|
20652
|
+
var inputMenu = import_react122.css`
|
|
20314
20653
|
background: none;
|
|
20315
20654
|
border: none;
|
|
20316
20655
|
padding: var(--spacing-2xs);
|
|
@@ -20318,10 +20657,10 @@ var inputMenu = import_react117.css`
|
|
|
20318
20657
|
top: calc(var(--spacing-md) * -1.2);
|
|
20319
20658
|
right: 0;
|
|
20320
20659
|
`;
|
|
20321
|
-
var inputActionItems =
|
|
20660
|
+
var inputActionItems = import_react122.css`
|
|
20322
20661
|
display: flex;
|
|
20323
20662
|
`;
|
|
20324
|
-
var inputMenuHover =
|
|
20663
|
+
var inputMenuHover = import_react122.css`
|
|
20325
20664
|
opacity: var(--opacity-50);
|
|
20326
20665
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
20327
20666
|
|
|
@@ -20331,11 +20670,11 @@ var inputMenuHover = import_react117.css`
|
|
|
20331
20670
|
background-color: var(--gray-200);
|
|
20332
20671
|
}
|
|
20333
20672
|
`;
|
|
20334
|
-
var textarea2 =
|
|
20673
|
+
var textarea2 = import_react122.css`
|
|
20335
20674
|
resize: vertical;
|
|
20336
20675
|
min-height: 2rem;
|
|
20337
20676
|
`;
|
|
20338
|
-
var dataConnectButton =
|
|
20677
|
+
var dataConnectButton = import_react122.css`
|
|
20339
20678
|
align-items: center;
|
|
20340
20679
|
appearance: none;
|
|
20341
20680
|
box-sizing: border-box;
|
|
@@ -20370,7 +20709,7 @@ var dataConnectButton = import_react117.css`
|
|
|
20370
20709
|
pointer-events: none;
|
|
20371
20710
|
}
|
|
20372
20711
|
`;
|
|
20373
|
-
var linkParameterBtn =
|
|
20712
|
+
var linkParameterBtn = import_react122.css`
|
|
20374
20713
|
border-radius: var(--rounded-base);
|
|
20375
20714
|
background: transparent;
|
|
20376
20715
|
border: none;
|
|
@@ -20379,7 +20718,7 @@ var linkParameterBtn = import_react117.css`
|
|
|
20379
20718
|
font-size: var(--fs-sm);
|
|
20380
20719
|
line-height: 1;
|
|
20381
20720
|
`;
|
|
20382
|
-
var linkParameterControls =
|
|
20721
|
+
var linkParameterControls = import_react122.css`
|
|
20383
20722
|
position: absolute;
|
|
20384
20723
|
inset: 0 0 0 auto;
|
|
20385
20724
|
padding: 0 var(--spacing-base);
|
|
@@ -20388,7 +20727,7 @@ var linkParameterControls = import_react117.css`
|
|
|
20388
20727
|
justify-content: center;
|
|
20389
20728
|
gap: var(--spacing-base);
|
|
20390
20729
|
`;
|
|
20391
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
20730
|
+
var linkParameterInput = (withExternalLinkIcon) => import_react122.css`
|
|
20392
20731
|
padding-right: calc(
|
|
20393
20732
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
20394
20733
|
var(--spacing-base)
|
|
@@ -20401,7 +20740,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react117.css`
|
|
|
20401
20740
|
}
|
|
20402
20741
|
}
|
|
20403
20742
|
`;
|
|
20404
|
-
var linkParameterIcon =
|
|
20743
|
+
var linkParameterIcon = import_react122.css`
|
|
20405
20744
|
align-items: center;
|
|
20406
20745
|
color: var(--brand-secondary-3);
|
|
20407
20746
|
display: flex;
|
|
@@ -20416,7 +20755,7 @@ var linkParameterIcon = import_react117.css`
|
|
|
20416
20755
|
`;
|
|
20417
20756
|
|
|
20418
20757
|
// src/components/ParameterInputs/ParameterDataResource.tsx
|
|
20419
|
-
var
|
|
20758
|
+
var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
|
|
20420
20759
|
function ParameterDataResource({
|
|
20421
20760
|
label,
|
|
20422
20761
|
labelLeadingIcon,
|
|
@@ -20426,12 +20765,12 @@ function ParameterDataResource({
|
|
|
20426
20765
|
disabled: disabled2,
|
|
20427
20766
|
children
|
|
20428
20767
|
}) {
|
|
20429
|
-
return /* @__PURE__ */ (0,
|
|
20430
|
-
/* @__PURE__ */ (0,
|
|
20768
|
+
return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
|
|
20769
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("span", { css: labelText2, children: [
|
|
20431
20770
|
labelLeadingIcon ? labelLeadingIcon : null,
|
|
20432
20771
|
label
|
|
20433
20772
|
] }),
|
|
20434
|
-
/* @__PURE__ */ (0,
|
|
20773
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
|
|
20435
20774
|
"button",
|
|
20436
20775
|
{
|
|
20437
20776
|
type: "button",
|
|
@@ -20440,12 +20779,12 @@ function ParameterDataResource({
|
|
|
20440
20779
|
disabled: disabled2,
|
|
20441
20780
|
onClick: onConnectDatasource,
|
|
20442
20781
|
children: [
|
|
20443
|
-
/* @__PURE__ */ (0,
|
|
20782
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
|
|
20444
20783
|
children
|
|
20445
20784
|
]
|
|
20446
20785
|
}
|
|
20447
20786
|
),
|
|
20448
|
-
caption ? /* @__PURE__ */ (0,
|
|
20787
|
+
caption ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Caption, { children: caption }) : null
|
|
20449
20788
|
] });
|
|
20450
20789
|
}
|
|
20451
20790
|
|
|
@@ -20454,20 +20793,20 @@ init_emotion_jsx_shim();
|
|
|
20454
20793
|
|
|
20455
20794
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
20456
20795
|
init_emotion_jsx_shim();
|
|
20457
|
-
var
|
|
20458
|
-
var ParameterDrawerHeaderContainer =
|
|
20796
|
+
var import_react123 = require("@emotion/react");
|
|
20797
|
+
var ParameterDrawerHeaderContainer = import_react123.css`
|
|
20459
20798
|
align-items: center;
|
|
20460
20799
|
display: flex;
|
|
20461
20800
|
gap: var(--spacing-base);
|
|
20462
20801
|
justify-content: space-between;
|
|
20463
20802
|
margin-bottom: var(--spacing-sm);
|
|
20464
20803
|
`;
|
|
20465
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
20804
|
+
var ParameterDrawerHeaderTitleGroup = import_react123.css`
|
|
20466
20805
|
align-items: center;
|
|
20467
20806
|
display: flex;
|
|
20468
20807
|
gap: var(--spacing-sm);
|
|
20469
20808
|
`;
|
|
20470
|
-
var ParameterDrawerHeaderTitle =
|
|
20809
|
+
var ParameterDrawerHeaderTitle = import_react123.css`
|
|
20471
20810
|
text-overflow: ellipsis;
|
|
20472
20811
|
white-space: nowrap;
|
|
20473
20812
|
overflow: hidden;
|
|
@@ -20475,12 +20814,12 @@ var ParameterDrawerHeaderTitle = import_react118.css`
|
|
|
20475
20814
|
`;
|
|
20476
20815
|
|
|
20477
20816
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
20478
|
-
var
|
|
20817
|
+
var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
|
|
20479
20818
|
var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
20480
|
-
return /* @__PURE__ */ (0,
|
|
20481
|
-
/* @__PURE__ */ (0,
|
|
20819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
20820
|
+
/* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
20482
20821
|
iconBeforeTitle,
|
|
20483
|
-
/* @__PURE__ */ (0,
|
|
20822
|
+
/* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
|
|
20484
20823
|
] }),
|
|
20485
20824
|
children
|
|
20486
20825
|
] });
|
|
@@ -20488,12 +20827,12 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
|
20488
20827
|
|
|
20489
20828
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
20490
20829
|
init_emotion_jsx_shim();
|
|
20491
|
-
var
|
|
20830
|
+
var import_react125 = require("react");
|
|
20492
20831
|
|
|
20493
20832
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
20494
20833
|
init_emotion_jsx_shim();
|
|
20495
|
-
var
|
|
20496
|
-
var fieldsetStyles =
|
|
20834
|
+
var import_react124 = require("@emotion/react");
|
|
20835
|
+
var fieldsetStyles = import_react124.css`
|
|
20497
20836
|
&:disabled,
|
|
20498
20837
|
[readonly] {
|
|
20499
20838
|
pointer-events: none;
|
|
@@ -20504,7 +20843,7 @@ var fieldsetStyles = import_react119.css`
|
|
|
20504
20843
|
}
|
|
20505
20844
|
}
|
|
20506
20845
|
`;
|
|
20507
|
-
var fieldsetLegend2 =
|
|
20846
|
+
var fieldsetLegend2 = import_react124.css`
|
|
20508
20847
|
display: block;
|
|
20509
20848
|
font-weight: var(--fw-medium);
|
|
20510
20849
|
margin-bottom: var(--spacing-sm);
|
|
@@ -20512,11 +20851,11 @@ var fieldsetLegend2 = import_react119.css`
|
|
|
20512
20851
|
`;
|
|
20513
20852
|
|
|
20514
20853
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
20515
|
-
var
|
|
20516
|
-
var ParameterGroup = (0,
|
|
20854
|
+
var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
|
|
20855
|
+
var ParameterGroup = (0, import_react125.forwardRef)(
|
|
20517
20856
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
20518
|
-
return /* @__PURE__ */ (0,
|
|
20519
|
-
/* @__PURE__ */ (0,
|
|
20857
|
+
return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
20858
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsx)("legend", { css: fieldsetLegend2, children: legend }),
|
|
20520
20859
|
children
|
|
20521
20860
|
] });
|
|
20522
20861
|
}
|
|
@@ -20524,24 +20863,24 @@ var ParameterGroup = (0, import_react120.forwardRef)(
|
|
|
20524
20863
|
|
|
20525
20864
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
20526
20865
|
init_emotion_jsx_shim();
|
|
20527
|
-
var
|
|
20866
|
+
var import_react132 = require("react");
|
|
20528
20867
|
|
|
20529
20868
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
20530
20869
|
init_emotion_jsx_shim();
|
|
20531
|
-
var
|
|
20870
|
+
var import_react127 = require("react");
|
|
20532
20871
|
var import_react_dom2 = require("react-dom");
|
|
20533
20872
|
|
|
20534
20873
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
20535
20874
|
init_emotion_jsx_shim();
|
|
20536
|
-
var
|
|
20537
|
-
var previewWrapper =
|
|
20875
|
+
var import_react126 = require("@emotion/react");
|
|
20876
|
+
var previewWrapper = import_react126.css`
|
|
20538
20877
|
margin-top: var(--spacing-xs);
|
|
20539
20878
|
background: var(--gray-50);
|
|
20540
20879
|
padding: var(--spacing-sm);
|
|
20541
20880
|
border: solid 1px var(--gray-300);
|
|
20542
20881
|
border-radius: var(--rounded-sm);
|
|
20543
20882
|
`;
|
|
20544
|
-
var previewLink =
|
|
20883
|
+
var previewLink = import_react126.css`
|
|
20545
20884
|
display: block;
|
|
20546
20885
|
width: 100%;
|
|
20547
20886
|
|
|
@@ -20549,7 +20888,7 @@ var previewLink = import_react121.css`
|
|
|
20549
20888
|
max-height: 9rem;
|
|
20550
20889
|
}
|
|
20551
20890
|
`;
|
|
20552
|
-
var previewModalWrapper =
|
|
20891
|
+
var previewModalWrapper = import_react126.css`
|
|
20553
20892
|
background: var(--gray-50);
|
|
20554
20893
|
display: flex;
|
|
20555
20894
|
height: 100%;
|
|
@@ -20558,7 +20897,7 @@ var previewModalWrapper = import_react121.css`
|
|
|
20558
20897
|
border: solid 1px var(--gray-300);
|
|
20559
20898
|
border-radius: var(--rounded-sm);
|
|
20560
20899
|
`;
|
|
20561
|
-
var previewModalImage =
|
|
20900
|
+
var previewModalImage = import_react126.css`
|
|
20562
20901
|
display: flex;
|
|
20563
20902
|
height: 100%;
|
|
20564
20903
|
width: 100%;
|
|
@@ -20570,32 +20909,32 @@ var previewModalImage = import_react121.css`
|
|
|
20570
20909
|
`;
|
|
20571
20910
|
|
|
20572
20911
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
20573
|
-
var
|
|
20912
|
+
var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
|
|
20574
20913
|
function ParameterImagePreview({ imageSrc }) {
|
|
20575
|
-
const [showModal, setShowModal] = (0,
|
|
20576
|
-
return imageSrc ? /* @__PURE__ */ (0,
|
|
20577
|
-
/* @__PURE__ */ (0,
|
|
20578
|
-
/* @__PURE__ */ (0,
|
|
20914
|
+
const [showModal, setShowModal] = (0, import_react127.useState)(false);
|
|
20915
|
+
return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { css: previewWrapper, children: [
|
|
20916
|
+
/* @__PURE__ */ (0, import_jsx_runtime111.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
20917
|
+
/* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
|
|
20579
20918
|
"button",
|
|
20580
20919
|
{
|
|
20581
20920
|
css: previewLink,
|
|
20582
20921
|
onClick: () => {
|
|
20583
20922
|
setShowModal(true);
|
|
20584
20923
|
},
|
|
20585
|
-
children: /* @__PURE__ */ (0,
|
|
20924
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
20586
20925
|
}
|
|
20587
20926
|
)
|
|
20588
20927
|
] }) : null;
|
|
20589
20928
|
}
|
|
20590
20929
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
20591
|
-
return open ? /* @__PURE__ */ (0,
|
|
20592
|
-
/* @__PURE__ */ (0,
|
|
20930
|
+
return open ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_jsx_runtime111.Fragment, { children: (0, import_react_dom2.createPortal)(
|
|
20931
|
+
/* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
|
|
20593
20932
|
Modal,
|
|
20594
20933
|
{
|
|
20595
20934
|
header: "Image Preview",
|
|
20596
20935
|
onRequestClose,
|
|
20597
|
-
buttonGroup: /* @__PURE__ */ (0,
|
|
20598
|
-
children: /* @__PURE__ */ (0,
|
|
20936
|
+
buttonGroup: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
20937
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: previewModalWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
20599
20938
|
}
|
|
20600
20939
|
),
|
|
20601
20940
|
document.body
|
|
@@ -20604,27 +20943,27 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
20604
20943
|
|
|
20605
20944
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
20606
20945
|
init_emotion_jsx_shim();
|
|
20607
|
-
var
|
|
20608
|
-
var
|
|
20946
|
+
var import_react130 = require("@emotion/react");
|
|
20947
|
+
var import_react131 = require("react");
|
|
20609
20948
|
|
|
20610
20949
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
20611
20950
|
init_emotion_jsx_shim();
|
|
20612
|
-
var
|
|
20951
|
+
var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
|
|
20613
20952
|
var ParameterLabel = ({ id, asSpan, children, ...props }) => {
|
|
20614
|
-
return !asSpan ? /* @__PURE__ */ (0,
|
|
20953
|
+
return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
|
|
20615
20954
|
};
|
|
20616
20955
|
|
|
20617
20956
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
20618
20957
|
init_emotion_jsx_shim();
|
|
20619
|
-
var
|
|
20620
|
-
var
|
|
20621
|
-
var ParameterMenuButton = (0,
|
|
20958
|
+
var import_react128 = require("react");
|
|
20959
|
+
var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
|
|
20960
|
+
var ParameterMenuButton = (0, import_react128.forwardRef)(
|
|
20622
20961
|
({ label, children }, ref) => {
|
|
20623
|
-
return /* @__PURE__ */ (0,
|
|
20962
|
+
return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
|
|
20624
20963
|
Menu,
|
|
20625
20964
|
{
|
|
20626
20965
|
menuLabel: `${label} menu`,
|
|
20627
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
20966
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
|
|
20628
20967
|
"button",
|
|
20629
20968
|
{
|
|
20630
20969
|
className: "parameter-menu",
|
|
@@ -20632,7 +20971,7 @@ var ParameterMenuButton = (0, import_react123.forwardRef)(
|
|
|
20632
20971
|
type: "button",
|
|
20633
20972
|
"aria-label": `${label} options`,
|
|
20634
20973
|
ref,
|
|
20635
|
-
children: /* @__PURE__ */ (0,
|
|
20974
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
20636
20975
|
}
|
|
20637
20976
|
),
|
|
20638
20977
|
children
|
|
@@ -20643,14 +20982,14 @@ var ParameterMenuButton = (0, import_react123.forwardRef)(
|
|
|
20643
20982
|
|
|
20644
20983
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
20645
20984
|
init_emotion_jsx_shim();
|
|
20646
|
-
var
|
|
20647
|
-
var emptyParameterShell =
|
|
20985
|
+
var import_react129 = require("@emotion/react");
|
|
20986
|
+
var emptyParameterShell = import_react129.css`
|
|
20648
20987
|
border-radius: var(--rounded-sm);
|
|
20649
20988
|
flex-grow: 1;
|
|
20650
20989
|
position: relative;
|
|
20651
20990
|
max-width: 100%;
|
|
20652
20991
|
`;
|
|
20653
|
-
var emptyParameterShellText =
|
|
20992
|
+
var emptyParameterShellText = import_react129.css`
|
|
20654
20993
|
background: var(--brand-secondary-6);
|
|
20655
20994
|
border-radius: var(--rounded-sm);
|
|
20656
20995
|
padding: var(--spacing-sm);
|
|
@@ -20658,7 +20997,7 @@ var emptyParameterShellText = import_react124.css`
|
|
|
20658
20997
|
font-size: var(--fs-sm);
|
|
20659
20998
|
margin: 0;
|
|
20660
20999
|
`;
|
|
20661
|
-
var overrideMarker =
|
|
21000
|
+
var overrideMarker = import_react129.css`
|
|
20662
21001
|
border-radius: var(--rounded-sm);
|
|
20663
21002
|
border: 10px solid var(--gray-300);
|
|
20664
21003
|
border-left-color: transparent;
|
|
@@ -20669,7 +21008,7 @@ var overrideMarker = import_react124.css`
|
|
|
20669
21008
|
`;
|
|
20670
21009
|
|
|
20671
21010
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
20672
|
-
var
|
|
21011
|
+
var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
|
|
20673
21012
|
var extractParameterProps = (props) => {
|
|
20674
21013
|
const {
|
|
20675
21014
|
id,
|
|
@@ -20729,36 +21068,36 @@ var ParameterShell = ({
|
|
|
20729
21068
|
isParameterGroup = false,
|
|
20730
21069
|
...props
|
|
20731
21070
|
}) => {
|
|
20732
|
-
const [manualErrorMessage, setManualErrorMessage] = (0,
|
|
21071
|
+
const [manualErrorMessage, setManualErrorMessage] = (0, import_react131.useState)(void 0);
|
|
20733
21072
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
20734
21073
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
20735
|
-
return /* @__PURE__ */ (0,
|
|
20736
|
-
hiddenLabel || title2 ? null : /* @__PURE__ */ (0,
|
|
21074
|
+
return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { css: inputContainer2, ...props, id, children: [
|
|
21075
|
+
hiddenLabel || title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(ParameterLabel, { id, css: labelText2, children: [
|
|
20737
21076
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
20738
21077
|
label,
|
|
20739
21078
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
20740
21079
|
] }),
|
|
20741
|
-
!title2 ? null : /* @__PURE__ */ (0,
|
|
21080
|
+
!title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(ParameterLabel, { id, asSpan: true, children: [
|
|
20742
21081
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
20743
21082
|
title2,
|
|
20744
21083
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
20745
21084
|
] }),
|
|
20746
|
-
/* @__PURE__ */ (0,
|
|
20747
|
-
actionItems ? /* @__PURE__ */ (0,
|
|
21085
|
+
/* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { css: inputWrapper, children: [
|
|
21086
|
+
actionItems ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
|
|
20748
21087
|
"div",
|
|
20749
21088
|
{
|
|
20750
21089
|
css: [
|
|
20751
21090
|
inputMenu,
|
|
20752
21091
|
inputActionItems,
|
|
20753
|
-
menuItems ?
|
|
21092
|
+
menuItems ? import_react130.css`
|
|
20754
21093
|
right: var(--spacing-md);
|
|
20755
21094
|
` : void 0
|
|
20756
21095
|
],
|
|
20757
21096
|
children: actionItems
|
|
20758
21097
|
}
|
|
20759
21098
|
) : null,
|
|
20760
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
20761
|
-
/* @__PURE__ */ (0,
|
|
21099
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
21100
|
+
/* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
|
|
20762
21101
|
ParameterShellContext.Provider,
|
|
20763
21102
|
{
|
|
20764
21103
|
value: {
|
|
@@ -20768,14 +21107,14 @@ var ParameterShell = ({
|
|
|
20768
21107
|
errorMessage: errorMessaging,
|
|
20769
21108
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
20770
21109
|
},
|
|
20771
|
-
children: isParameterGroup ? /* @__PURE__ */ (0,
|
|
21110
|
+
children: isParameterGroup ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(ParameterShellPlaceholder, { children: [
|
|
20772
21111
|
children,
|
|
20773
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0,
|
|
21112
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
20774
21113
|
] })
|
|
20775
21114
|
}
|
|
20776
21115
|
)
|
|
20777
21116
|
] }),
|
|
20778
|
-
/* @__PURE__ */ (0,
|
|
21117
|
+
/* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
|
|
20779
21118
|
FieldMessage,
|
|
20780
21119
|
{
|
|
20781
21120
|
helperMessageTestId: captionTestId,
|
|
@@ -20789,27 +21128,27 @@ var ParameterShell = ({
|
|
|
20789
21128
|
] });
|
|
20790
21129
|
};
|
|
20791
21130
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
20792
|
-
return /* @__PURE__ */ (0,
|
|
21131
|
+
return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { css: emptyParameterShell, children });
|
|
20793
21132
|
};
|
|
20794
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0,
|
|
21133
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
20795
21134
|
|
|
20796
21135
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
20797
|
-
var
|
|
20798
|
-
var ParameterImage = (0,
|
|
21136
|
+
var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
|
|
21137
|
+
var ParameterImage = (0, import_react132.forwardRef)(
|
|
20799
21138
|
({ children, ...props }, ref) => {
|
|
20800
21139
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20801
|
-
return /* @__PURE__ */ (0,
|
|
20802
|
-
/* @__PURE__ */ (0,
|
|
21140
|
+
return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
21141
|
+
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ParameterImageInner, { ref, ...innerProps }),
|
|
20803
21142
|
children
|
|
20804
21143
|
] });
|
|
20805
21144
|
}
|
|
20806
21145
|
);
|
|
20807
|
-
var ParameterImageInner = (0,
|
|
21146
|
+
var ParameterImageInner = (0, import_react132.forwardRef)((props, ref) => {
|
|
20808
21147
|
const { value } = props;
|
|
20809
21148
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
20810
|
-
const deferredValue = (0,
|
|
20811
|
-
return /* @__PURE__ */ (0,
|
|
20812
|
-
/* @__PURE__ */ (0,
|
|
21149
|
+
const deferredValue = (0, import_react132.useDeferredValue)(value);
|
|
21150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_jsx_runtime115.Fragment, { children: [
|
|
21151
|
+
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
|
|
20813
21152
|
"input",
|
|
20814
21153
|
{
|
|
20815
21154
|
css: input3,
|
|
@@ -20821,22 +21160,22 @@ var ParameterImageInner = (0, import_react127.forwardRef)((props, ref) => {
|
|
|
20821
21160
|
...props
|
|
20822
21161
|
}
|
|
20823
21162
|
),
|
|
20824
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0,
|
|
21163
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ParameterImagePreview, { imageSrc: deferredValue })
|
|
20825
21164
|
] });
|
|
20826
21165
|
});
|
|
20827
21166
|
|
|
20828
21167
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
20829
21168
|
init_emotion_jsx_shim();
|
|
20830
|
-
var
|
|
20831
|
-
var
|
|
20832
|
-
var ParameterInput = (0,
|
|
21169
|
+
var import_react133 = require("react");
|
|
21170
|
+
var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
|
|
21171
|
+
var ParameterInput = (0, import_react133.forwardRef)((props, ref) => {
|
|
20833
21172
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20834
|
-
return /* @__PURE__ */ (0,
|
|
21173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ParameterInputInner, { ref, ...innerProps }) });
|
|
20835
21174
|
});
|
|
20836
|
-
var ParameterInputInner = (0,
|
|
21175
|
+
var ParameterInputInner = (0, import_react133.forwardRef)(
|
|
20837
21176
|
({ ...props }, ref) => {
|
|
20838
21177
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
20839
|
-
return /* @__PURE__ */ (0,
|
|
21178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
|
|
20840
21179
|
"input",
|
|
20841
21180
|
{
|
|
20842
21181
|
css: input3,
|
|
@@ -20853,19 +21192,19 @@ var ParameterInputInner = (0, import_react128.forwardRef)(
|
|
|
20853
21192
|
|
|
20854
21193
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
20855
21194
|
init_emotion_jsx_shim();
|
|
20856
|
-
var
|
|
20857
|
-
var
|
|
20858
|
-
var ParameterLink = (0,
|
|
21195
|
+
var import_react134 = require("react");
|
|
21196
|
+
var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
|
|
21197
|
+
var ParameterLink = (0, import_react134.forwardRef)(
|
|
20859
21198
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
20860
21199
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20861
|
-
return /* @__PURE__ */ (0,
|
|
21200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
20862
21201
|
ParameterShell,
|
|
20863
21202
|
{
|
|
20864
21203
|
"data-testid": "link-parameter-editor",
|
|
20865
21204
|
...shellProps,
|
|
20866
21205
|
label: innerProps.value ? shellProps.label : "",
|
|
20867
21206
|
title: !innerProps.value ? shellProps.label : void 0,
|
|
20868
|
-
children: /* @__PURE__ */ (0,
|
|
21207
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
20869
21208
|
ParameterLinkInner,
|
|
20870
21209
|
{
|
|
20871
21210
|
onConnectLink,
|
|
@@ -20878,13 +21217,13 @@ var ParameterLink = (0, import_react129.forwardRef)(
|
|
|
20878
21217
|
);
|
|
20879
21218
|
}
|
|
20880
21219
|
);
|
|
20881
|
-
var ParameterLinkInner = (0,
|
|
21220
|
+
var ParameterLinkInner = (0, import_react134.forwardRef)(
|
|
20882
21221
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
20883
21222
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
20884
21223
|
if (!props.value)
|
|
20885
|
-
return /* @__PURE__ */ (0,
|
|
20886
|
-
return /* @__PURE__ */ (0,
|
|
20887
|
-
/* @__PURE__ */ (0,
|
|
21224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
21225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { css: inputWrapper, children: [
|
|
21226
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
20888
21227
|
"input",
|
|
20889
21228
|
{
|
|
20890
21229
|
type: "text",
|
|
@@ -20896,8 +21235,8 @@ var ParameterLinkInner = (0, import_react129.forwardRef)(
|
|
|
20896
21235
|
...props
|
|
20897
21236
|
}
|
|
20898
21237
|
),
|
|
20899
|
-
/* @__PURE__ */ (0,
|
|
20900
|
-
/* @__PURE__ */ (0,
|
|
21238
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { css: linkParameterControls, children: [
|
|
21239
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
20901
21240
|
"button",
|
|
20902
21241
|
{
|
|
20903
21242
|
type: "button",
|
|
@@ -20908,7 +21247,7 @@ var ParameterLinkInner = (0, import_react129.forwardRef)(
|
|
|
20908
21247
|
children: "edit"
|
|
20909
21248
|
}
|
|
20910
21249
|
),
|
|
20911
|
-
externalLink ? /* @__PURE__ */ (0,
|
|
21250
|
+
externalLink ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
20912
21251
|
"a",
|
|
20913
21252
|
{
|
|
20914
21253
|
href: externalLink,
|
|
@@ -20916,7 +21255,7 @@ var ParameterLinkInner = (0, import_react129.forwardRef)(
|
|
|
20916
21255
|
title: "Open link in new tab",
|
|
20917
21256
|
target: "_blank",
|
|
20918
21257
|
rel: "noopener noreferrer",
|
|
20919
|
-
children: /* @__PURE__ */ (0,
|
|
21258
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
20920
21259
|
}
|
|
20921
21260
|
) : null
|
|
20922
21261
|
] })
|
|
@@ -20926,15 +21265,15 @@ var ParameterLinkInner = (0, import_react129.forwardRef)(
|
|
|
20926
21265
|
|
|
20927
21266
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
20928
21267
|
init_emotion_jsx_shim();
|
|
20929
|
-
var
|
|
21268
|
+
var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
|
|
20930
21269
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
20931
21270
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20932
|
-
return /* @__PURE__ */ (0,
|
|
21271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
20933
21272
|
};
|
|
20934
21273
|
var ParameterMultiSelectInner = (props) => {
|
|
20935
21274
|
var _a;
|
|
20936
21275
|
const { id, label } = useParameterShell();
|
|
20937
|
-
return /* @__PURE__ */ (0,
|
|
21276
|
+
return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
|
|
20938
21277
|
InputComboBox,
|
|
20939
21278
|
{
|
|
20940
21279
|
menuPortalTarget: document.body,
|
|
@@ -20985,7 +21324,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
20985
21324
|
|
|
20986
21325
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
20987
21326
|
init_emotion_jsx_shim();
|
|
20988
|
-
var
|
|
21327
|
+
var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
|
|
20989
21328
|
var ParameterNameAndPublicIdInput = ({
|
|
20990
21329
|
id,
|
|
20991
21330
|
onBlur,
|
|
@@ -21011,8 +21350,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
21011
21350
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
21012
21351
|
};
|
|
21013
21352
|
autoFocus == null ? void 0 : autoFocus();
|
|
21014
|
-
return /* @__PURE__ */ (0,
|
|
21015
|
-
/* @__PURE__ */ (0,
|
|
21353
|
+
return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
|
|
21354
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
21016
21355
|
ParameterInput,
|
|
21017
21356
|
{
|
|
21018
21357
|
id: nameIdField,
|
|
@@ -21031,7 +21370,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
21031
21370
|
value: values[nameIdField]
|
|
21032
21371
|
}
|
|
21033
21372
|
),
|
|
21034
|
-
/* @__PURE__ */ (0,
|
|
21373
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
21035
21374
|
ParameterInput,
|
|
21036
21375
|
{
|
|
21037
21376
|
id: publicIdFieldName,
|
|
@@ -21045,11 +21384,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
21045
21384
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
21046
21385
|
placeholder: publicIdPlaceholderText,
|
|
21047
21386
|
errorMessage: publicIdError,
|
|
21048
|
-
menuItems: /* @__PURE__ */ (0,
|
|
21387
|
+
menuItems: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
21049
21388
|
MenuItem,
|
|
21050
21389
|
{
|
|
21051
21390
|
disabled: !values[publicIdFieldName],
|
|
21052
|
-
icon: /* @__PURE__ */ (0,
|
|
21391
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
21053
21392
|
onClick: handleCopyPidFieldValue,
|
|
21054
21393
|
children: "Copy"
|
|
21055
21394
|
}
|
|
@@ -21057,13 +21396,13 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
21057
21396
|
value: values[publicIdFieldName]
|
|
21058
21397
|
}
|
|
21059
21398
|
),
|
|
21060
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0,
|
|
21399
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
21061
21400
|
] });
|
|
21062
21401
|
};
|
|
21063
21402
|
|
|
21064
21403
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
21065
21404
|
init_emotion_jsx_shim();
|
|
21066
|
-
var
|
|
21405
|
+
var import_react141 = require("@emotion/react");
|
|
21067
21406
|
var import_list3 = require("@lexical/list");
|
|
21068
21407
|
var import_markdown = require("@lexical/markdown");
|
|
21069
21408
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
@@ -21170,7 +21509,7 @@ var getLabelForElement = (type) => {
|
|
|
21170
21509
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
21171
21510
|
var import_fast_equals2 = require("fast-equals");
|
|
21172
21511
|
var import_lexical6 = require("lexical");
|
|
21173
|
-
var
|
|
21512
|
+
var import_react142 = require("react");
|
|
21174
21513
|
|
|
21175
21514
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
21176
21515
|
init_emotion_jsx_shim();
|
|
@@ -21193,10 +21532,10 @@ init_emotion_jsx_shim();
|
|
|
21193
21532
|
var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
21194
21533
|
var import_utils2 = require("@lexical/utils");
|
|
21195
21534
|
var import_lexical = require("lexical");
|
|
21196
|
-
var
|
|
21535
|
+
var import_react135 = require("react");
|
|
21197
21536
|
function DisableStylesPlugin() {
|
|
21198
21537
|
const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
|
|
21199
|
-
(0,
|
|
21538
|
+
(0, import_react135.useEffect)(() => {
|
|
21200
21539
|
return (0, import_utils2.mergeRegister)(
|
|
21201
21540
|
// Disable text alignment on paragraph nodes
|
|
21202
21541
|
editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
|
|
@@ -21391,13 +21730,13 @@ var codeElement = import_css2.css`
|
|
|
21391
21730
|
|
|
21392
21731
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
21393
21732
|
init_emotion_jsx_shim();
|
|
21394
|
-
var
|
|
21733
|
+
var import_react136 = require("@emotion/react");
|
|
21395
21734
|
var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
|
|
21396
21735
|
var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
|
|
21397
21736
|
var import_utils3 = require("@lexical/utils");
|
|
21398
21737
|
var import_fast_equals = require("fast-equals");
|
|
21399
21738
|
var import_lexical3 = require("lexical");
|
|
21400
|
-
var
|
|
21739
|
+
var import_react137 = require("react");
|
|
21401
21740
|
|
|
21402
21741
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
21403
21742
|
init_emotion_jsx_shim();
|
|
@@ -21436,7 +21775,7 @@ var getSelectedNode = (selection) => {
|
|
|
21436
21775
|
};
|
|
21437
21776
|
|
|
21438
21777
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
21439
|
-
var
|
|
21778
|
+
var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
|
|
21440
21779
|
var isProjectMapLinkValue = (value) => {
|
|
21441
21780
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
21442
21781
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -21723,16 +22062,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical3.createCommand)(
|
|
|
21723
22062
|
);
|
|
21724
22063
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
21725
22064
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
21726
|
-
var linkPopover =
|
|
22065
|
+
var linkPopover = import_react136.css`
|
|
21727
22066
|
position: absolute;
|
|
21728
22067
|
z-index: 5;
|
|
21729
22068
|
`;
|
|
21730
|
-
var linkPopoverContainer =
|
|
22069
|
+
var linkPopoverContainer = import_react136.css`
|
|
21731
22070
|
${Popover};
|
|
21732
22071
|
align-items: center;
|
|
21733
22072
|
display: flex;
|
|
21734
22073
|
`;
|
|
21735
|
-
var linkPopoverAnchor =
|
|
22074
|
+
var linkPopoverAnchor = import_react136.css`
|
|
21736
22075
|
${link}
|
|
21737
22076
|
${linkColorDefault}
|
|
21738
22077
|
`;
|
|
@@ -21741,17 +22080,17 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21741
22080
|
return path;
|
|
21742
22081
|
};
|
|
21743
22082
|
const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
|
|
21744
|
-
const [linkPopoverState, setLinkPopoverState] = (0,
|
|
21745
|
-
const linkPopoverElRef = (0,
|
|
21746
|
-
const [isEditorFocused, setIsEditorFocused] = (0,
|
|
21747
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0,
|
|
21748
|
-
(0,
|
|
22083
|
+
const [linkPopoverState, setLinkPopoverState] = (0, import_react137.useState)();
|
|
22084
|
+
const linkPopoverElRef = (0, import_react137.useRef)(null);
|
|
22085
|
+
const [isEditorFocused, setIsEditorFocused] = (0, import_react137.useState)(false);
|
|
22086
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react137.useState)(false);
|
|
22087
|
+
(0, import_react137.useEffect)(() => {
|
|
21749
22088
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
21750
22089
|
setLinkPopoverState(void 0);
|
|
21751
22090
|
return;
|
|
21752
22091
|
}
|
|
21753
22092
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
21754
|
-
(0,
|
|
22093
|
+
(0, import_react137.useEffect)(() => {
|
|
21755
22094
|
if (!editor.hasNodes([LinkNode])) {
|
|
21756
22095
|
throw new Error("LinkNode not registered on editor");
|
|
21757
22096
|
}
|
|
@@ -21820,7 +22159,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21820
22159
|
)
|
|
21821
22160
|
);
|
|
21822
22161
|
}, [editor, onConnectLink]);
|
|
21823
|
-
const maybeShowLinkToolbar = (0,
|
|
22162
|
+
const maybeShowLinkToolbar = (0, import_react137.useCallback)(() => {
|
|
21824
22163
|
if (!editor.isEditable()) {
|
|
21825
22164
|
return;
|
|
21826
22165
|
}
|
|
@@ -21852,7 +22191,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21852
22191
|
}
|
|
21853
22192
|
});
|
|
21854
22193
|
}, [editor]);
|
|
21855
|
-
(0,
|
|
22194
|
+
(0, import_react137.useEffect)(() => {
|
|
21856
22195
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
21857
22196
|
requestAnimationFrame(() => {
|
|
21858
22197
|
editorState.read(() => {
|
|
@@ -21879,8 +22218,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21879
22218
|
});
|
|
21880
22219
|
});
|
|
21881
22220
|
};
|
|
21882
|
-
return /* @__PURE__ */ (0,
|
|
21883
|
-
/* @__PURE__ */ (0,
|
|
22221
|
+
return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
|
|
22222
|
+
/* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
21884
22223
|
import_LexicalNodeEventPlugin.NodeEventPlugin,
|
|
21885
22224
|
{
|
|
21886
22225
|
nodeType: LinkNode,
|
|
@@ -21890,7 +22229,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21890
22229
|
}
|
|
21891
22230
|
}
|
|
21892
22231
|
),
|
|
21893
|
-
linkPopoverState ? /* @__PURE__ */ (0,
|
|
22232
|
+
linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
21894
22233
|
"div",
|
|
21895
22234
|
{
|
|
21896
22235
|
css: linkPopover,
|
|
@@ -21899,8 +22238,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21899
22238
|
top: linkPopoverState.position.y
|
|
21900
22239
|
},
|
|
21901
22240
|
ref: linkPopoverElRef,
|
|
21902
|
-
children: /* @__PURE__ */ (0,
|
|
21903
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0,
|
|
22241
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { css: linkPopoverContainer, children: [
|
|
22242
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
21904
22243
|
"a",
|
|
21905
22244
|
{
|
|
21906
22245
|
href: parsePath(
|
|
@@ -21912,7 +22251,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21912
22251
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
21913
22252
|
}
|
|
21914
22253
|
),
|
|
21915
|
-
/* @__PURE__ */ (0,
|
|
22254
|
+
/* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
21916
22255
|
Button,
|
|
21917
22256
|
{
|
|
21918
22257
|
size: "xs",
|
|
@@ -21920,7 +22259,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21920
22259
|
onEditLinkNode(linkPopoverState.node);
|
|
21921
22260
|
},
|
|
21922
22261
|
buttonType: "ghost",
|
|
21923
|
-
children: /* @__PURE__ */ (0,
|
|
22262
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
21924
22263
|
}
|
|
21925
22264
|
)
|
|
21926
22265
|
] })
|
|
@@ -21940,8 +22279,8 @@ var import_list = require("@lexical/list");
|
|
|
21940
22279
|
var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
|
|
21941
22280
|
var import_LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
|
|
21942
22281
|
var import_lexical4 = require("lexical");
|
|
21943
|
-
var
|
|
21944
|
-
var
|
|
22282
|
+
var import_react138 = require("react");
|
|
22283
|
+
var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
|
|
21945
22284
|
function isIndentPermitted(maxDepth) {
|
|
21946
22285
|
const selection = (0, import_lexical4.$getSelection)();
|
|
21947
22286
|
if (!(0, import_lexical4.$isRangeSelection)(selection)) {
|
|
@@ -21964,19 +22303,19 @@ function isIndentPermitted(maxDepth) {
|
|
|
21964
22303
|
}
|
|
21965
22304
|
function ListIndentPlugin({ maxDepth }) {
|
|
21966
22305
|
const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
|
|
21967
|
-
(0,
|
|
22306
|
+
(0, import_react138.useEffect)(() => {
|
|
21968
22307
|
return editor.registerCommand(
|
|
21969
22308
|
import_lexical4.INDENT_CONTENT_COMMAND,
|
|
21970
22309
|
() => !isIndentPermitted(maxDepth),
|
|
21971
22310
|
import_lexical4.COMMAND_PRIORITY_CRITICAL
|
|
21972
22311
|
);
|
|
21973
22312
|
}, [editor, maxDepth]);
|
|
21974
|
-
return /* @__PURE__ */ (0,
|
|
22313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {});
|
|
21975
22314
|
}
|
|
21976
22315
|
|
|
21977
22316
|
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
21978
22317
|
init_emotion_jsx_shim();
|
|
21979
|
-
var
|
|
22318
|
+
var import_react139 = require("@emotion/react");
|
|
21980
22319
|
var import_code2 = require("@lexical/code");
|
|
21981
22320
|
var import_list2 = require("@lexical/list");
|
|
21982
22321
|
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
@@ -21984,9 +22323,9 @@ var import_rich_text = require("@lexical/rich-text");
|
|
|
21984
22323
|
var import_selection2 = require("@lexical/selection");
|
|
21985
22324
|
var import_utils6 = require("@lexical/utils");
|
|
21986
22325
|
var import_lexical5 = require("lexical");
|
|
21987
|
-
var
|
|
21988
|
-
var
|
|
21989
|
-
var toolbar =
|
|
22326
|
+
var import_react140 = require("react");
|
|
22327
|
+
var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
|
|
22328
|
+
var toolbar = import_react139.css`
|
|
21990
22329
|
background: var(--gray-50);
|
|
21991
22330
|
border-radius: var(--rounded-base);
|
|
21992
22331
|
display: flex;
|
|
@@ -21998,7 +22337,7 @@ var toolbar = import_react134.css`
|
|
|
21998
22337
|
top: calc(var(--spacing-sm) * -2);
|
|
21999
22338
|
z-index: 10;
|
|
22000
22339
|
`;
|
|
22001
|
-
var toolbarGroup =
|
|
22340
|
+
var toolbarGroup = import_react139.css`
|
|
22002
22341
|
display: flex;
|
|
22003
22342
|
gap: var(--spacing-xs);
|
|
22004
22343
|
position: relative;
|
|
@@ -22014,7 +22353,7 @@ var toolbarGroup = import_react134.css`
|
|
|
22014
22353
|
width: 1px;
|
|
22015
22354
|
}
|
|
22016
22355
|
`;
|
|
22017
|
-
var richTextToolbarButton =
|
|
22356
|
+
var richTextToolbarButton = import_react139.css`
|
|
22018
22357
|
align-items: center;
|
|
22019
22358
|
appearance: none;
|
|
22020
22359
|
border: 0;
|
|
@@ -22027,17 +22366,17 @@ var richTextToolbarButton = import_react134.css`
|
|
|
22027
22366
|
min-width: 32px;
|
|
22028
22367
|
padding: 0 var(--spacing-sm);
|
|
22029
22368
|
`;
|
|
22030
|
-
var richTextToolbarButtonActive =
|
|
22369
|
+
var richTextToolbarButtonActive = import_react139.css`
|
|
22031
22370
|
background: var(--gray-200);
|
|
22032
22371
|
`;
|
|
22033
|
-
var toolbarIcon =
|
|
22372
|
+
var toolbarIcon = import_react139.css`
|
|
22034
22373
|
color: inherit;
|
|
22035
22374
|
`;
|
|
22036
|
-
var toolbarChevron =
|
|
22375
|
+
var toolbarChevron = import_react139.css`
|
|
22037
22376
|
margin-left: var(--spacing-xs);
|
|
22038
22377
|
`;
|
|
22039
22378
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
22040
|
-
return /* @__PURE__ */ (0,
|
|
22379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
22041
22380
|
};
|
|
22042
22381
|
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
22043
22382
|
["bold", "format-bold"],
|
|
@@ -22088,7 +22427,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22088
22427
|
}
|
|
22089
22428
|
});
|
|
22090
22429
|
};
|
|
22091
|
-
const updateToolbar = (0,
|
|
22430
|
+
const updateToolbar = (0, import_react140.useCallback)(() => {
|
|
22092
22431
|
const selection = (0, import_lexical5.$getSelection)();
|
|
22093
22432
|
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
22094
22433
|
return;
|
|
@@ -22127,7 +22466,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22127
22466
|
setIsLink(false);
|
|
22128
22467
|
}
|
|
22129
22468
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
22130
|
-
(0,
|
|
22469
|
+
(0, import_react140.useEffect)(() => {
|
|
22131
22470
|
return editor.registerCommand(
|
|
22132
22471
|
import_lexical5.SELECTION_CHANGE_COMMAND,
|
|
22133
22472
|
(_payload) => {
|
|
@@ -22137,7 +22476,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22137
22476
|
import_lexical5.COMMAND_PRIORITY_CRITICAL
|
|
22138
22477
|
);
|
|
22139
22478
|
}, [editor, updateToolbar]);
|
|
22140
|
-
(0,
|
|
22479
|
+
(0, import_react140.useEffect)(() => {
|
|
22141
22480
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
22142
22481
|
requestAnimationFrame(() => {
|
|
22143
22482
|
editorState.read(() => {
|
|
@@ -22146,15 +22485,15 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22146
22485
|
});
|
|
22147
22486
|
});
|
|
22148
22487
|
}, [editor, updateToolbar]);
|
|
22149
|
-
return /* @__PURE__ */ (0,
|
|
22150
|
-
/* @__PURE__ */ (0,
|
|
22488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: toolbar, children: [
|
|
22489
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
|
|
22151
22490
|
Menu,
|
|
22152
22491
|
{
|
|
22153
22492
|
menuLabel: "Elements",
|
|
22154
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
22493
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
|
|
22155
22494
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
22156
22495
|
" ",
|
|
22157
|
-
/* @__PURE__ */ (0,
|
|
22496
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
22158
22497
|
] }),
|
|
22159
22498
|
placement: "bottom-start",
|
|
22160
22499
|
children: [
|
|
@@ -22164,7 +22503,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22164
22503
|
type: "paragraph"
|
|
22165
22504
|
},
|
|
22166
22505
|
...visibleTextualElements
|
|
22167
|
-
].map((element) => /* @__PURE__ */ (0,
|
|
22506
|
+
].map((element) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22168
22507
|
MenuItem,
|
|
22169
22508
|
{
|
|
22170
22509
|
onClick: () => {
|
|
@@ -22174,12 +22513,12 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22174
22513
|
},
|
|
22175
22514
|
element.type
|
|
22176
22515
|
)),
|
|
22177
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0,
|
|
22516
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
22178
22517
|
]
|
|
22179
22518
|
}
|
|
22180
22519
|
),
|
|
22181
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
22182
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0,
|
|
22520
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: toolbarGroup, children: [
|
|
22521
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22183
22522
|
"button",
|
|
22184
22523
|
{
|
|
22185
22524
|
onClick: () => {
|
|
@@ -22189,16 +22528,16 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22189
22528
|
richTextToolbarButton,
|
|
22190
22529
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
22191
22530
|
],
|
|
22192
|
-
children: /* @__PURE__ */ (0,
|
|
22531
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
22193
22532
|
}
|
|
22194
22533
|
) }, format.type)),
|
|
22195
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
22534
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22196
22535
|
Menu,
|
|
22197
22536
|
{
|
|
22198
22537
|
menuLabel: "Alternative text styles",
|
|
22199
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
22538
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
22200
22539
|
placement: "bottom-start",
|
|
22201
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0,
|
|
22540
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22202
22541
|
MenuItem,
|
|
22203
22542
|
{
|
|
22204
22543
|
onClick: () => {
|
|
@@ -22211,19 +22550,19 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22211
22550
|
}
|
|
22212
22551
|
) : null
|
|
22213
22552
|
] }) : null,
|
|
22214
|
-
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0,
|
|
22215
|
-
linkElementVisible ? /* @__PURE__ */ (0,
|
|
22553
|
+
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: toolbarGroup, children: [
|
|
22554
|
+
linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22216
22555
|
"button",
|
|
22217
22556
|
{
|
|
22218
22557
|
onClick: () => {
|
|
22219
22558
|
isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
22220
22559
|
},
|
|
22221
22560
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
22222
|
-
children: /* @__PURE__ */ (0,
|
|
22561
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "link" })
|
|
22223
22562
|
}
|
|
22224
22563
|
) }) : null,
|
|
22225
|
-
visibleLists.size > 0 ? /* @__PURE__ */ (0,
|
|
22226
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0,
|
|
22564
|
+
visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
|
|
22565
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22227
22566
|
"button",
|
|
22228
22567
|
{
|
|
22229
22568
|
onClick: () => {
|
|
@@ -22233,10 +22572,10 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22233
22572
|
richTextToolbarButton,
|
|
22234
22573
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
22235
22574
|
],
|
|
22236
|
-
children: /* @__PURE__ */ (0,
|
|
22575
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
|
|
22237
22576
|
}
|
|
22238
22577
|
) }) : null,
|
|
22239
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */ (0,
|
|
22578
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22240
22579
|
"button",
|
|
22241
22580
|
{
|
|
22242
22581
|
onClick: () => {
|
|
@@ -22246,57 +22585,57 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22246
22585
|
richTextToolbarButton,
|
|
22247
22586
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
22248
22587
|
],
|
|
22249
|
-
children: /* @__PURE__ */ (0,
|
|
22588
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
22250
22589
|
}
|
|
22251
22590
|
) }) : null
|
|
22252
22591
|
] }) : null,
|
|
22253
|
-
quoteElementVisible ? /* @__PURE__ */ (0,
|
|
22592
|
+
quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22254
22593
|
"button",
|
|
22255
22594
|
{
|
|
22256
22595
|
onClick: () => {
|
|
22257
22596
|
activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
|
|
22258
22597
|
},
|
|
22259
22598
|
css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
|
|
22260
|
-
children: /* @__PURE__ */ (0,
|
|
22599
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "quote" })
|
|
22261
22600
|
}
|
|
22262
22601
|
) }) : null,
|
|
22263
|
-
codeElementVisible ? /* @__PURE__ */ (0,
|
|
22602
|
+
codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22264
22603
|
"button",
|
|
22265
22604
|
{
|
|
22266
22605
|
onClick: () => {
|
|
22267
22606
|
activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
|
|
22268
22607
|
},
|
|
22269
22608
|
css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
|
|
22270
|
-
children: /* @__PURE__ */ (0,
|
|
22609
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
|
|
22271
22610
|
}
|
|
22272
22611
|
) }) : null
|
|
22273
22612
|
] }) : null,
|
|
22274
|
-
customControls ? /* @__PURE__ */ (0,
|
|
22613
|
+
customControls ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { css: toolbarGroup, children: customControls }) : null
|
|
22275
22614
|
] });
|
|
22276
22615
|
};
|
|
22277
22616
|
var RichTextToolbar_default = RichTextToolbar;
|
|
22278
22617
|
var useRichTextToolbarState = ({ config }) => {
|
|
22279
22618
|
var _a;
|
|
22280
|
-
const enabledBuiltInFormats = (0,
|
|
22619
|
+
const enabledBuiltInFormats = (0, import_react140.useMemo)(() => {
|
|
22281
22620
|
return richTextBuiltInFormats.filter((format) => {
|
|
22282
22621
|
var _a2, _b;
|
|
22283
22622
|
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
22284
22623
|
});
|
|
22285
22624
|
}, [config]);
|
|
22286
|
-
const enabledBuiltInElements = (0,
|
|
22625
|
+
const enabledBuiltInElements = (0, import_react140.useMemo)(() => {
|
|
22287
22626
|
return richTextBuiltInElements.filter((element) => {
|
|
22288
22627
|
var _a2, _b;
|
|
22289
22628
|
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
22290
22629
|
});
|
|
22291
22630
|
}, [config]);
|
|
22292
|
-
const enabledBuiltInFormatsWithIcon = (0,
|
|
22631
|
+
const enabledBuiltInFormatsWithIcon = (0, import_react140.useMemo)(() => {
|
|
22293
22632
|
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
22294
22633
|
}, [enabledBuiltInFormats]);
|
|
22295
22634
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
22296
22635
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
22297
22636
|
);
|
|
22298
|
-
const [activeFormats, setActiveFormats] = (0,
|
|
22299
|
-
const visibleFormatsWithIcon = (0,
|
|
22637
|
+
const [activeFormats, setActiveFormats] = (0, import_react140.useState)([]);
|
|
22638
|
+
const visibleFormatsWithIcon = (0, import_react140.useMemo)(() => {
|
|
22300
22639
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
22301
22640
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
22302
22641
|
visibleFormats.add(type);
|
|
@@ -22306,7 +22645,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
22306
22645
|
});
|
|
22307
22646
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
22308
22647
|
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
22309
|
-
const visibleFormatsWithoutIcon = (0,
|
|
22648
|
+
const visibleFormatsWithoutIcon = (0, import_react140.useMemo)(() => {
|
|
22310
22649
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
22311
22650
|
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
22312
22651
|
visibleFormats.add(type);
|
|
@@ -22316,11 +22655,11 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
22316
22655
|
});
|
|
22317
22656
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
22318
22657
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
22319
|
-
const [activeElement, setActiveElement] = (0,
|
|
22658
|
+
const [activeElement, setActiveElement] = (0, import_react140.useState)("paragraph");
|
|
22320
22659
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
22321
22660
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
22322
22661
|
);
|
|
22323
|
-
const visibleTextualElements = (0,
|
|
22662
|
+
const visibleTextualElements = (0, import_react140.useMemo)(() => {
|
|
22324
22663
|
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
22325
22664
|
return enabledTextualElements;
|
|
22326
22665
|
}
|
|
@@ -22331,24 +22670,24 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
22331
22670
|
}
|
|
22332
22671
|
);
|
|
22333
22672
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
22334
|
-
const [isLink, setIsLink] = (0,
|
|
22335
|
-
const linkElementVisible = (0,
|
|
22673
|
+
const [isLink, setIsLink] = (0, import_react140.useState)(false);
|
|
22674
|
+
const linkElementVisible = (0, import_react140.useMemo)(() => {
|
|
22336
22675
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
22337
22676
|
}, [isLink, enabledBuiltInElements]);
|
|
22338
|
-
const visibleLists = (0,
|
|
22677
|
+
const visibleLists = (0, import_react140.useMemo)(() => {
|
|
22339
22678
|
return new Set(
|
|
22340
22679
|
["orderedList", "unorderedList"].filter(
|
|
22341
22680
|
(type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
|
|
22342
22681
|
)
|
|
22343
22682
|
);
|
|
22344
22683
|
}, [activeElement, enabledBuiltInElements]);
|
|
22345
|
-
const quoteElementVisible = (0,
|
|
22684
|
+
const quoteElementVisible = (0, import_react140.useMemo)(() => {
|
|
22346
22685
|
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
22347
22686
|
}, [activeElement, enabledBuiltInElements]);
|
|
22348
|
-
const codeElementVisible = (0,
|
|
22687
|
+
const codeElementVisible = (0, import_react140.useMemo)(() => {
|
|
22349
22688
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
22350
22689
|
}, [activeElement, enabledBuiltInElements]);
|
|
22351
|
-
const visibleElementsWithIcons = (0,
|
|
22690
|
+
const visibleElementsWithIcons = (0, import_react140.useMemo)(() => {
|
|
22352
22691
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
22353
22692
|
if (linkElementVisible) {
|
|
22354
22693
|
visibleElements.add("link");
|
|
@@ -22385,7 +22724,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
22385
22724
|
};
|
|
22386
22725
|
|
|
22387
22726
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22388
|
-
var
|
|
22727
|
+
var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
|
|
22389
22728
|
var ParameterRichText = ({
|
|
22390
22729
|
label,
|
|
22391
22730
|
labelLeadingIcon,
|
|
@@ -22410,7 +22749,7 @@ var ParameterRichText = ({
|
|
|
22410
22749
|
variables,
|
|
22411
22750
|
customControls
|
|
22412
22751
|
}) => {
|
|
22413
|
-
return /* @__PURE__ */ (0,
|
|
22752
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
|
|
22414
22753
|
ParameterShell,
|
|
22415
22754
|
{
|
|
22416
22755
|
"data-testid": "parameter-richtext",
|
|
@@ -22424,7 +22763,7 @@ var ParameterRichText = ({
|
|
|
22424
22763
|
captionTestId,
|
|
22425
22764
|
menuItems,
|
|
22426
22765
|
children: [
|
|
22427
|
-
/* @__PURE__ */ (0,
|
|
22766
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
22428
22767
|
ParameterRichTextInner,
|
|
22429
22768
|
{
|
|
22430
22769
|
value,
|
|
@@ -22442,23 +22781,23 @@ var ParameterRichText = ({
|
|
|
22442
22781
|
children
|
|
22443
22782
|
}
|
|
22444
22783
|
),
|
|
22445
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
22784
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_jsx_runtime123.Fragment, { children: menuItems }) }) : null
|
|
22446
22785
|
]
|
|
22447
22786
|
}
|
|
22448
22787
|
);
|
|
22449
22788
|
};
|
|
22450
|
-
var editorWrapper =
|
|
22789
|
+
var editorWrapper = import_react141.css`
|
|
22451
22790
|
display: flex;
|
|
22452
22791
|
flex-flow: column;
|
|
22453
22792
|
flex-grow: 1;
|
|
22454
22793
|
`;
|
|
22455
|
-
var editorContainer =
|
|
22794
|
+
var editorContainer = import_react141.css`
|
|
22456
22795
|
display: flex;
|
|
22457
22796
|
flex-flow: column;
|
|
22458
22797
|
flex-grow: 1;
|
|
22459
22798
|
position: relative;
|
|
22460
22799
|
`;
|
|
22461
|
-
var editorPlaceholder =
|
|
22800
|
+
var editorPlaceholder = import_react141.css`
|
|
22462
22801
|
color: var(--gray-500);
|
|
22463
22802
|
font-style: italic;
|
|
22464
22803
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -22469,7 +22808,7 @@ var editorPlaceholder = import_react136.css`
|
|
|
22469
22808
|
top: var(--spacing-sm);
|
|
22470
22809
|
user-select: none;
|
|
22471
22810
|
`;
|
|
22472
|
-
var editorInput =
|
|
22811
|
+
var editorInput = import_react141.css`
|
|
22473
22812
|
background: var(--white);
|
|
22474
22813
|
border: 1px solid var(--gray-200);
|
|
22475
22814
|
border-radius: var(--rounded-sm);
|
|
@@ -22553,8 +22892,8 @@ var ParameterRichTextInner = ({
|
|
|
22553
22892
|
},
|
|
22554
22893
|
editable: !readOnly
|
|
22555
22894
|
};
|
|
22556
|
-
return /* @__PURE__ */ (0,
|
|
22557
|
-
/* @__PURE__ */ (0,
|
|
22895
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
|
|
22896
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
22558
22897
|
RichText,
|
|
22559
22898
|
{
|
|
22560
22899
|
onChange,
|
|
@@ -22591,14 +22930,14 @@ var RichText = ({
|
|
|
22591
22930
|
variables,
|
|
22592
22931
|
customControls
|
|
22593
22932
|
}) => {
|
|
22594
|
-
const editorContainerRef = (0,
|
|
22933
|
+
const editorContainerRef = (0, import_react142.useRef)(null);
|
|
22595
22934
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
22596
|
-
(0,
|
|
22935
|
+
(0, import_react142.useEffect)(() => {
|
|
22597
22936
|
if (onRichTextInit) {
|
|
22598
22937
|
onRichTextInit(editor);
|
|
22599
22938
|
}
|
|
22600
22939
|
}, [editor, onRichTextInit]);
|
|
22601
|
-
(0,
|
|
22940
|
+
(0, import_react142.useEffect)(() => {
|
|
22602
22941
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
|
|
22603
22942
|
requestAnimationFrame(() => {
|
|
22604
22943
|
if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -22610,23 +22949,23 @@ var RichText = ({
|
|
|
22610
22949
|
removeUpdateListener();
|
|
22611
22950
|
};
|
|
22612
22951
|
}, [editor, onChange]);
|
|
22613
|
-
(0,
|
|
22952
|
+
(0, import_react142.useEffect)(() => {
|
|
22614
22953
|
editor.setEditable(!readOnly);
|
|
22615
22954
|
}, [editor, readOnly]);
|
|
22616
|
-
return /* @__PURE__ */ (0,
|
|
22617
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
22618
|
-
/* @__PURE__ */ (0,
|
|
22619
|
-
/* @__PURE__ */ (0,
|
|
22955
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
|
|
22956
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(RichTextToolbar_default, { config, customControls }),
|
|
22957
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
|
|
22958
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
22620
22959
|
import_LexicalRichTextPlugin.RichTextPlugin,
|
|
22621
22960
|
{
|
|
22622
|
-
contentEditable: /* @__PURE__ */ (0,
|
|
22623
|
-
placeholder: /* @__PURE__ */ (0,
|
|
22961
|
+
contentEditable: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
22962
|
+
placeholder: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
22624
22963
|
ErrorBoundary: import_LexicalErrorBoundary.default
|
|
22625
22964
|
}
|
|
22626
22965
|
),
|
|
22627
|
-
/* @__PURE__ */ (0,
|
|
22628
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
22629
|
-
/* @__PURE__ */ (0,
|
|
22966
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_LexicalListPlugin.ListPlugin, {}),
|
|
22967
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
|
|
22968
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
22630
22969
|
LinkNodePlugin,
|
|
22631
22970
|
{
|
|
22632
22971
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -22636,28 +22975,28 @@ var RichText = ({
|
|
|
22636
22975
|
} : void 0
|
|
22637
22976
|
}
|
|
22638
22977
|
),
|
|
22639
|
-
/* @__PURE__ */ (0,
|
|
22640
|
-
/* @__PURE__ */ (0,
|
|
22641
|
-
/* @__PURE__ */ (0,
|
|
22642
|
-
/* @__PURE__ */ (0,
|
|
22978
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ListIndentPlugin, { maxDepth: 4 }),
|
|
22979
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(DisableStylesPlugin, {}),
|
|
22980
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
22981
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_jsx_runtime123.Fragment, { children })
|
|
22643
22982
|
] })
|
|
22644
22983
|
] });
|
|
22645
22984
|
};
|
|
22646
22985
|
|
|
22647
22986
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
22648
22987
|
init_emotion_jsx_shim();
|
|
22649
|
-
var
|
|
22650
|
-
var
|
|
22651
|
-
var ParameterSelect = (0,
|
|
22988
|
+
var import_react143 = require("react");
|
|
22989
|
+
var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
|
|
22990
|
+
var ParameterSelect = (0, import_react143.forwardRef)(
|
|
22652
22991
|
({ defaultOption, options, ...props }, ref) => {
|
|
22653
22992
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22654
|
-
return /* @__PURE__ */ (0,
|
|
22993
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
22655
22994
|
}
|
|
22656
22995
|
);
|
|
22657
|
-
var ParameterSelectInner = (0,
|
|
22996
|
+
var ParameterSelectInner = (0, import_react143.forwardRef)(
|
|
22658
22997
|
({ defaultOption, options, ...props }, ref) => {
|
|
22659
22998
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
22660
|
-
return /* @__PURE__ */ (0,
|
|
22999
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
|
|
22661
23000
|
"select",
|
|
22662
23001
|
{
|
|
22663
23002
|
css: [input3, selectInput],
|
|
@@ -22666,10 +23005,10 @@ var ParameterSelectInner = (0, import_react138.forwardRef)(
|
|
|
22666
23005
|
ref,
|
|
22667
23006
|
...props,
|
|
22668
23007
|
children: [
|
|
22669
|
-
defaultOption ? /* @__PURE__ */ (0,
|
|
23008
|
+
defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("option", { value: "", children: defaultOption }) : null,
|
|
22670
23009
|
options.map((option) => {
|
|
22671
23010
|
var _a;
|
|
22672
|
-
return /* @__PURE__ */ (0,
|
|
23011
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
22673
23012
|
})
|
|
22674
23013
|
]
|
|
22675
23014
|
}
|
|
@@ -22679,15 +23018,15 @@ var ParameterSelectInner = (0, import_react138.forwardRef)(
|
|
|
22679
23018
|
|
|
22680
23019
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
22681
23020
|
init_emotion_jsx_shim();
|
|
22682
|
-
var
|
|
22683
|
-
var
|
|
22684
|
-
var ParameterTextarea = (0,
|
|
23021
|
+
var import_react144 = require("react");
|
|
23022
|
+
var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
|
|
23023
|
+
var ParameterTextarea = (0, import_react144.forwardRef)((props, ref) => {
|
|
22685
23024
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22686
|
-
return /* @__PURE__ */ (0,
|
|
23025
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
22687
23026
|
});
|
|
22688
|
-
var ParameterTextareaInner = (0,
|
|
23027
|
+
var ParameterTextareaInner = (0, import_react144.forwardRef)(({ ...props }, ref) => {
|
|
22689
23028
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
22690
|
-
return /* @__PURE__ */ (0,
|
|
23029
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
22691
23030
|
"textarea",
|
|
22692
23031
|
{
|
|
22693
23032
|
css: [input3, textarea2],
|
|
@@ -22701,18 +23040,18 @@ var ParameterTextareaInner = (0, import_react139.forwardRef)(({ ...props }, ref)
|
|
|
22701
23040
|
|
|
22702
23041
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
22703
23042
|
init_emotion_jsx_shim();
|
|
22704
|
-
var
|
|
22705
|
-
var
|
|
22706
|
-
var ParameterToggle = (0,
|
|
23043
|
+
var import_react145 = require("react");
|
|
23044
|
+
var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
|
|
23045
|
+
var ParameterToggle = (0, import_react145.forwardRef)((props, ref) => {
|
|
22707
23046
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22708
|
-
return /* @__PURE__ */ (0,
|
|
23047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
22709
23048
|
});
|
|
22710
|
-
var ParameterToggleInner = (0,
|
|
23049
|
+
var ParameterToggleInner = (0, import_react145.forwardRef)(
|
|
22711
23050
|
({ children, ...props }, ref) => {
|
|
22712
23051
|
const { id, label } = useParameterShell();
|
|
22713
|
-
return /* @__PURE__ */ (0,
|
|
22714
|
-
/* @__PURE__ */ (0,
|
|
22715
|
-
/* @__PURE__ */ (0,
|
|
23052
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("label", { css: inputToggleLabel2, children: [
|
|
23053
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
23054
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { css: inlineLabel2, children: label }),
|
|
22716
23055
|
children
|
|
22717
23056
|
] });
|
|
22718
23057
|
}
|
|
@@ -22723,8 +23062,8 @@ init_emotion_jsx_shim();
|
|
|
22723
23062
|
|
|
22724
23063
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
22725
23064
|
init_emotion_jsx_shim();
|
|
22726
|
-
var
|
|
22727
|
-
var container3 =
|
|
23065
|
+
var import_react146 = require("@emotion/react");
|
|
23066
|
+
var container3 = import_react146.css`
|
|
22728
23067
|
background: var(--gray-50);
|
|
22729
23068
|
margin-block: var(--spacing-sm);
|
|
22730
23069
|
position: relative;
|
|
@@ -22734,17 +23073,17 @@ var container3 = import_react141.css`
|
|
|
22734
23073
|
border: solid 1px var(--gray-300);
|
|
22735
23074
|
`;
|
|
22736
23075
|
var themeMap = {
|
|
22737
|
-
primary:
|
|
23076
|
+
primary: import_react146.css`
|
|
22738
23077
|
--progress-color: var(--accent-light);
|
|
22739
23078
|
`,
|
|
22740
|
-
secondary:
|
|
23079
|
+
secondary: import_react146.css`
|
|
22741
23080
|
--progress-color: var(--accent-alt-light);
|
|
22742
23081
|
`,
|
|
22743
|
-
destructive:
|
|
23082
|
+
destructive: import_react146.css`
|
|
22744
23083
|
--progress-color: var(--brand-secondary-5);
|
|
22745
23084
|
`
|
|
22746
23085
|
};
|
|
22747
|
-
var slidingBackgroundPosition =
|
|
23086
|
+
var slidingBackgroundPosition = import_react146.keyframes`
|
|
22748
23087
|
from {
|
|
22749
23088
|
background-position: 0 0;
|
|
22750
23089
|
}
|
|
@@ -22752,10 +23091,10 @@ var slidingBackgroundPosition = import_react141.keyframes`
|
|
|
22752
23091
|
background-position: 64px 0;
|
|
22753
23092
|
}
|
|
22754
23093
|
`;
|
|
22755
|
-
var determinate =
|
|
23094
|
+
var determinate = import_react146.css`
|
|
22756
23095
|
background-color: var(--progress-color);
|
|
22757
23096
|
`;
|
|
22758
|
-
var indeterminate =
|
|
23097
|
+
var indeterminate = import_react146.css`
|
|
22759
23098
|
background-image: linear-gradient(
|
|
22760
23099
|
45deg,
|
|
22761
23100
|
var(--progress-color) 25%,
|
|
@@ -22769,7 +23108,7 @@ var indeterminate = import_react141.css`
|
|
|
22769
23108
|
background-size: 64px 64px;
|
|
22770
23109
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
22771
23110
|
`;
|
|
22772
|
-
var bar =
|
|
23111
|
+
var bar = import_react146.css`
|
|
22773
23112
|
position: absolute;
|
|
22774
23113
|
inset: 0;
|
|
22775
23114
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -22777,7 +23116,7 @@ var bar = import_react141.css`
|
|
|
22777
23116
|
`;
|
|
22778
23117
|
|
|
22779
23118
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
22780
|
-
var
|
|
23119
|
+
var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
|
|
22781
23120
|
function ProgressBar({
|
|
22782
23121
|
current,
|
|
22783
23122
|
max,
|
|
@@ -22787,7 +23126,7 @@ function ProgressBar({
|
|
|
22787
23126
|
}) {
|
|
22788
23127
|
const valueNow = Math.min(current, max);
|
|
22789
23128
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
22790
|
-
return /* @__PURE__ */ (0,
|
|
23129
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
22791
23130
|
"div",
|
|
22792
23131
|
{
|
|
22793
23132
|
css: container3,
|
|
@@ -22798,7 +23137,7 @@ function ProgressBar({
|
|
|
22798
23137
|
"aria-valuemax": max,
|
|
22799
23138
|
"aria-valuenow": valueNow,
|
|
22800
23139
|
...props,
|
|
22801
|
-
children: /* @__PURE__ */ (0,
|
|
23140
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
22802
23141
|
"div",
|
|
22803
23142
|
{
|
|
22804
23143
|
css: [
|
|
@@ -22818,31 +23157,31 @@ function ProgressBar({
|
|
|
22818
23157
|
|
|
22819
23158
|
// src/components/ProgressList/ProgressList.tsx
|
|
22820
23159
|
init_emotion_jsx_shim();
|
|
22821
|
-
var
|
|
23160
|
+
var import_react148 = require("@emotion/react");
|
|
22822
23161
|
var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
|
|
22823
23162
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
22824
23163
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
22825
|
-
var
|
|
23164
|
+
var import_react149 = require("react");
|
|
22826
23165
|
|
|
22827
23166
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
22828
23167
|
init_emotion_jsx_shim();
|
|
22829
|
-
var
|
|
22830
|
-
var progressListStyles =
|
|
23168
|
+
var import_react147 = require("@emotion/react");
|
|
23169
|
+
var progressListStyles = import_react147.css`
|
|
22831
23170
|
display: flex;
|
|
22832
23171
|
flex-direction: column;
|
|
22833
23172
|
gap: var(--spacing-sm);
|
|
22834
23173
|
list-style-type: none;
|
|
22835
23174
|
`;
|
|
22836
|
-
var progressListItemStyles =
|
|
23175
|
+
var progressListItemStyles = import_react147.css`
|
|
22837
23176
|
display: flex;
|
|
22838
23177
|
gap: var(--spacing-base);
|
|
22839
23178
|
align-items: center;
|
|
22840
23179
|
`;
|
|
22841
23180
|
|
|
22842
23181
|
// src/components/ProgressList/ProgressList.tsx
|
|
22843
|
-
var
|
|
23182
|
+
var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
|
|
22844
23183
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
22845
|
-
const itemsWithStatus = (0,
|
|
23184
|
+
const itemsWithStatus = (0, import_react149.useMemo)(() => {
|
|
22846
23185
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
22847
23186
|
return items.map((item, index) => {
|
|
22848
23187
|
let status = "queued";
|
|
@@ -22854,8 +23193,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
22854
23193
|
return { ...item, status };
|
|
22855
23194
|
});
|
|
22856
23195
|
}, [items, inProgressId]);
|
|
22857
|
-
return /* @__PURE__ */ (0,
|
|
22858
|
-
return /* @__PURE__ */ (0,
|
|
23196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
23197
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
22859
23198
|
ProgressListItem,
|
|
22860
23199
|
{
|
|
22861
23200
|
status,
|
|
@@ -22875,7 +23214,7 @@ var ProgressListItem = ({
|
|
|
22875
23214
|
errorLevel = "danger",
|
|
22876
23215
|
autoEllipsis = false
|
|
22877
23216
|
}) => {
|
|
22878
|
-
const icon = (0,
|
|
23217
|
+
const icon = (0, import_react149.useMemo)(() => {
|
|
22879
23218
|
if (error) {
|
|
22880
23219
|
return warningIcon;
|
|
22881
23220
|
}
|
|
@@ -22886,14 +23225,14 @@ var ProgressListItem = ({
|
|
|
22886
23225
|
};
|
|
22887
23226
|
return iconPerStatus[status];
|
|
22888
23227
|
}, [status, error]);
|
|
22889
|
-
const statusStyles = (0,
|
|
23228
|
+
const statusStyles = (0, import_react149.useMemo)(() => {
|
|
22890
23229
|
if (error) {
|
|
22891
|
-
return errorLevel === "caution" ?
|
|
23230
|
+
return errorLevel === "caution" ? import_react148.css`
|
|
22892
23231
|
color: rgb(161, 98, 7);
|
|
22893
23232
|
& svg {
|
|
22894
23233
|
color: rgb(250, 204, 21);
|
|
22895
23234
|
}
|
|
22896
|
-
` :
|
|
23235
|
+
` : import_react148.css`
|
|
22897
23236
|
color: rgb(185, 28, 28);
|
|
22898
23237
|
& svg {
|
|
22899
23238
|
color: var(--brand-primary-2);
|
|
@@ -22901,40 +23240,40 @@ var ProgressListItem = ({
|
|
|
22901
23240
|
`;
|
|
22902
23241
|
}
|
|
22903
23242
|
const colorPerStatus = {
|
|
22904
|
-
completed:
|
|
23243
|
+
completed: import_react148.css`
|
|
22905
23244
|
opacity: 0.75;
|
|
22906
23245
|
`,
|
|
22907
|
-
inProgress:
|
|
23246
|
+
inProgress: import_react148.css`
|
|
22908
23247
|
-webkit-text-stroke-width: thin;
|
|
22909
23248
|
`,
|
|
22910
|
-
queued:
|
|
23249
|
+
queued: import_react148.css`
|
|
22911
23250
|
opacity: 0.5;
|
|
22912
23251
|
`
|
|
22913
23252
|
};
|
|
22914
23253
|
return colorPerStatus[status];
|
|
22915
23254
|
}, [status, error, errorLevel]);
|
|
22916
|
-
return /* @__PURE__ */ (0,
|
|
22917
|
-
/* @__PURE__ */ (0,
|
|
22918
|
-
/* @__PURE__ */ (0,
|
|
23255
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
23256
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
23257
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { children: [
|
|
22919
23258
|
children,
|
|
22920
|
-
/* @__PURE__ */ (0,
|
|
23259
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
22921
23260
|
] })
|
|
22922
23261
|
] });
|
|
22923
23262
|
};
|
|
22924
23263
|
|
|
22925
23264
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
22926
23265
|
init_emotion_jsx_shim();
|
|
22927
|
-
var
|
|
23266
|
+
var import_react151 = require("@emotion/react");
|
|
22928
23267
|
var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
|
|
22929
|
-
var
|
|
23268
|
+
var import_react152 = require("react");
|
|
22930
23269
|
|
|
22931
23270
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
22932
23271
|
init_emotion_jsx_shim();
|
|
22933
|
-
var
|
|
22934
|
-
var segmentedControlRootStyles =
|
|
23272
|
+
var import_react150 = require("@emotion/react");
|
|
23273
|
+
var segmentedControlRootStyles = import_react150.css`
|
|
22935
23274
|
position: relative;
|
|
22936
23275
|
`;
|
|
22937
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
23276
|
+
var segmentedControlScrollIndicatorsStyles = import_react150.css`
|
|
22938
23277
|
position: absolute;
|
|
22939
23278
|
inset: 0;
|
|
22940
23279
|
z-index: 1;
|
|
@@ -22962,17 +23301,17 @@ var segmentedControlScrollIndicatorsStyles = import_react145.css`
|
|
|
22962
23301
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
22963
23302
|
}
|
|
22964
23303
|
`;
|
|
22965
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
23304
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react150.css`
|
|
22966
23305
|
&::before {
|
|
22967
23306
|
opacity: 1;
|
|
22968
23307
|
}
|
|
22969
23308
|
`;
|
|
22970
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
23309
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react150.css`
|
|
22971
23310
|
&::after {
|
|
22972
23311
|
opacity: 1;
|
|
22973
23312
|
}
|
|
22974
23313
|
`;
|
|
22975
|
-
var segmentedControlWrapperStyles =
|
|
23314
|
+
var segmentedControlWrapperStyles = import_react150.css`
|
|
22976
23315
|
overflow-y: auto;
|
|
22977
23316
|
scroll-behavior: smooth;
|
|
22978
23317
|
scrollbar-width: none;
|
|
@@ -22981,7 +23320,7 @@ var segmentedControlWrapperStyles = import_react145.css`
|
|
|
22981
23320
|
height: 0px;
|
|
22982
23321
|
}
|
|
22983
23322
|
`;
|
|
22984
|
-
var segmentedControlStyles =
|
|
23323
|
+
var segmentedControlStyles = import_react150.css`
|
|
22985
23324
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
22986
23325
|
--segmented-control-border-width: 1px;
|
|
22987
23326
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -23000,14 +23339,14 @@ var segmentedControlStyles = import_react145.css`
|
|
|
23000
23339
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
23001
23340
|
font-size: var(--fs-xs);
|
|
23002
23341
|
`;
|
|
23003
|
-
var segmentedControlVerticalStyles =
|
|
23342
|
+
var segmentedControlVerticalStyles = import_react150.css`
|
|
23004
23343
|
flex-direction: column;
|
|
23005
23344
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
23006
23345
|
var(--segmented-control-rounded-value) 0 0;
|
|
23007
23346
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
23008
23347
|
var(--segmented-control-rounded-value);
|
|
23009
23348
|
`;
|
|
23010
|
-
var segmentedControlItemStyles =
|
|
23349
|
+
var segmentedControlItemStyles = import_react150.css`
|
|
23011
23350
|
&:first-of-type label {
|
|
23012
23351
|
border-radius: var(--segmented-control-first-border-radius);
|
|
23013
23352
|
}
|
|
@@ -23015,10 +23354,10 @@ var segmentedControlItemStyles = import_react145.css`
|
|
|
23015
23354
|
border-radius: var(--segmented-control-last-border-radius);
|
|
23016
23355
|
}
|
|
23017
23356
|
`;
|
|
23018
|
-
var segmentedControlInputStyles =
|
|
23357
|
+
var segmentedControlInputStyles = import_react150.css`
|
|
23019
23358
|
${accessibleHidden}
|
|
23020
23359
|
`;
|
|
23021
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
23360
|
+
var segmentedControlLabelStyles = (checked, disabled2) => import_react150.css`
|
|
23022
23361
|
position: relative;
|
|
23023
23362
|
display: flex;
|
|
23024
23363
|
align-items: center;
|
|
@@ -23085,25 +23424,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react145.css`
|
|
|
23085
23424
|
`}
|
|
23086
23425
|
}
|
|
23087
23426
|
`;
|
|
23088
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
23427
|
+
var segmentedControlLabelIconOnlyStyles = import_react150.css`
|
|
23089
23428
|
padding-inline: 0.5em;
|
|
23090
23429
|
`;
|
|
23091
|
-
var segmentedControlLabelCheckStyles =
|
|
23430
|
+
var segmentedControlLabelCheckStyles = import_react150.css`
|
|
23092
23431
|
opacity: 0.5;
|
|
23093
23432
|
`;
|
|
23094
|
-
var segmentedControlLabelContentStyles =
|
|
23433
|
+
var segmentedControlLabelContentStyles = import_react150.css`
|
|
23095
23434
|
display: flex;
|
|
23096
23435
|
align-items: center;
|
|
23097
23436
|
justify-content: center;
|
|
23098
23437
|
gap: var(--spacing-sm);
|
|
23099
23438
|
height: 100%;
|
|
23100
23439
|
`;
|
|
23101
|
-
var segmentedControlLabelTextStyles =
|
|
23440
|
+
var segmentedControlLabelTextStyles = import_react150.css`
|
|
23102
23441
|
white-space: nowrap;
|
|
23103
23442
|
`;
|
|
23104
23443
|
|
|
23105
23444
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
23106
|
-
var
|
|
23445
|
+
var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
|
|
23107
23446
|
var SegmentedControl = ({
|
|
23108
23447
|
name,
|
|
23109
23448
|
options,
|
|
@@ -23118,10 +23457,10 @@ var SegmentedControl = ({
|
|
|
23118
23457
|
currentBackgroundColor = "white",
|
|
23119
23458
|
...props
|
|
23120
23459
|
}) => {
|
|
23121
|
-
const wrapperRef = (0,
|
|
23122
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
23123
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
23124
|
-
const onOptionChange = (0,
|
|
23460
|
+
const wrapperRef = (0, import_react152.useRef)(null);
|
|
23461
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react152.useState)(false);
|
|
23462
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react152.useState)(false);
|
|
23463
|
+
const onOptionChange = (0, import_react152.useCallback)(
|
|
23125
23464
|
(event) => {
|
|
23126
23465
|
if (event.target.checked) {
|
|
23127
23466
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -23129,19 +23468,19 @@ var SegmentedControl = ({
|
|
|
23129
23468
|
},
|
|
23130
23469
|
[options, onChange]
|
|
23131
23470
|
);
|
|
23132
|
-
const sizeStyles = (0,
|
|
23471
|
+
const sizeStyles = (0, import_react152.useMemo)(() => {
|
|
23133
23472
|
const map = {
|
|
23134
|
-
sm: (0,
|
|
23135
|
-
md: (0,
|
|
23136
|
-
lg: (0,
|
|
23137
|
-
xl: (0,
|
|
23473
|
+
sm: (0, import_react151.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
23474
|
+
md: (0, import_react151.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
23475
|
+
lg: (0, import_react151.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
23476
|
+
xl: (0, import_react151.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
23138
23477
|
};
|
|
23139
23478
|
return map[size];
|
|
23140
23479
|
}, [size]);
|
|
23141
|
-
const isIconOnly = (0,
|
|
23480
|
+
const isIconOnly = (0, import_react152.useMemo)(() => {
|
|
23142
23481
|
return options.every((option) => option && option.icon && !option.label);
|
|
23143
23482
|
}, [options]);
|
|
23144
|
-
(0,
|
|
23483
|
+
(0, import_react152.useEffect)(() => {
|
|
23145
23484
|
const wrapperElement = wrapperRef.current;
|
|
23146
23485
|
const onScroll = () => {
|
|
23147
23486
|
if (!wrapperElement) {
|
|
@@ -23162,8 +23501,8 @@ var SegmentedControl = ({
|
|
|
23162
23501
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
23163
23502
|
};
|
|
23164
23503
|
}, []);
|
|
23165
|
-
return /* @__PURE__ */ (0,
|
|
23166
|
-
/* @__PURE__ */ (0,
|
|
23504
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
23505
|
+
/* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
23167
23506
|
"div",
|
|
23168
23507
|
{
|
|
23169
23508
|
css: [
|
|
@@ -23179,12 +23518,12 @@ var SegmentedControl = ({
|
|
|
23179
23518
|
}
|
|
23180
23519
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
23181
23520
|
const isDisabled = disabled2 || option.disabled;
|
|
23182
|
-
return /* @__PURE__ */ (0,
|
|
23521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
23183
23522
|
"div",
|
|
23184
23523
|
{
|
|
23185
23524
|
css: segmentedControlItemStyles,
|
|
23186
23525
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
23187
|
-
children: /* @__PURE__ */ (0,
|
|
23526
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
|
|
23188
23527
|
"label",
|
|
23189
23528
|
{
|
|
23190
23529
|
css: [
|
|
@@ -23193,7 +23532,7 @@ var SegmentedControl = ({
|
|
|
23193
23532
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
23194
23533
|
],
|
|
23195
23534
|
children: [
|
|
23196
|
-
/* @__PURE__ */ (0,
|
|
23535
|
+
/* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
23197
23536
|
"input",
|
|
23198
23537
|
{
|
|
23199
23538
|
css: segmentedControlInputStyles,
|
|
@@ -23205,10 +23544,10 @@ var SegmentedControl = ({
|
|
|
23205
23544
|
disabled: isDisabled
|
|
23206
23545
|
}
|
|
23207
23546
|
),
|
|
23208
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0,
|
|
23209
|
-
/* @__PURE__ */ (0,
|
|
23210
|
-
!option.icon ? null : /* @__PURE__ */ (0,
|
|
23211
|
-
!text || hideOptionText ? null : /* @__PURE__ */ (0,
|
|
23547
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
23548
|
+
/* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
|
|
23549
|
+
!option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
23550
|
+
!text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
23212
23551
|
] })
|
|
23213
23552
|
]
|
|
23214
23553
|
}
|
|
@@ -23218,7 +23557,7 @@ var SegmentedControl = ({
|
|
|
23218
23557
|
})
|
|
23219
23558
|
}
|
|
23220
23559
|
) }),
|
|
23221
|
-
/* @__PURE__ */ (0,
|
|
23560
|
+
/* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
23222
23561
|
"div",
|
|
23223
23562
|
{
|
|
23224
23563
|
css: [
|
|
@@ -23236,18 +23575,18 @@ init_emotion_jsx_shim();
|
|
|
23236
23575
|
|
|
23237
23576
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
23238
23577
|
init_emotion_jsx_shim();
|
|
23239
|
-
var
|
|
23240
|
-
var lightFadingOut =
|
|
23578
|
+
var import_react153 = require("@emotion/react");
|
|
23579
|
+
var lightFadingOut = import_react153.keyframes`
|
|
23241
23580
|
from { opacity: 0.1; }
|
|
23242
23581
|
to { opacity: 0.025; }
|
|
23243
23582
|
`;
|
|
23244
|
-
var skeletonStyles =
|
|
23583
|
+
var skeletonStyles = import_react153.css`
|
|
23245
23584
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
23246
23585
|
background-color: var(--gray-900);
|
|
23247
23586
|
`;
|
|
23248
23587
|
|
|
23249
23588
|
// src/components/Skeleton/Skeleton.tsx
|
|
23250
|
-
var
|
|
23589
|
+
var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
|
|
23251
23590
|
var Skeleton = ({
|
|
23252
23591
|
width = "100%",
|
|
23253
23592
|
height = "1.25rem",
|
|
@@ -23255,7 +23594,7 @@ var Skeleton = ({
|
|
|
23255
23594
|
circle = false,
|
|
23256
23595
|
children,
|
|
23257
23596
|
...otherProps
|
|
23258
|
-
}) => /* @__PURE__ */ (0,
|
|
23597
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23259
23598
|
"div",
|
|
23260
23599
|
{
|
|
23261
23600
|
css: [
|
|
@@ -23280,8 +23619,8 @@ var React24 = __toESM(require("react"));
|
|
|
23280
23619
|
|
|
23281
23620
|
// src/components/Switch/Switch.styles.ts
|
|
23282
23621
|
init_emotion_jsx_shim();
|
|
23283
|
-
var
|
|
23284
|
-
var SwitchInputContainer =
|
|
23622
|
+
var import_react154 = require("@emotion/react");
|
|
23623
|
+
var SwitchInputContainer = import_react154.css`
|
|
23285
23624
|
cursor: pointer;
|
|
23286
23625
|
display: inline-block;
|
|
23287
23626
|
position: relative;
|
|
@@ -23290,7 +23629,7 @@ var SwitchInputContainer = import_react149.css`
|
|
|
23290
23629
|
vertical-align: middle;
|
|
23291
23630
|
user-select: none;
|
|
23292
23631
|
`;
|
|
23293
|
-
var SwitchInput =
|
|
23632
|
+
var SwitchInput = import_react154.css`
|
|
23294
23633
|
appearance: none;
|
|
23295
23634
|
border-radius: var(--rounded-full);
|
|
23296
23635
|
background-color: var(--white);
|
|
@@ -23328,7 +23667,7 @@ var SwitchInput = import_react149.css`
|
|
|
23328
23667
|
cursor: not-allowed;
|
|
23329
23668
|
}
|
|
23330
23669
|
`;
|
|
23331
|
-
var SwitchInputDisabled =
|
|
23670
|
+
var SwitchInputDisabled = import_react154.css`
|
|
23332
23671
|
opacity: var(--opacity-50);
|
|
23333
23672
|
cursor: not-allowed;
|
|
23334
23673
|
|
|
@@ -23336,7 +23675,7 @@ var SwitchInputDisabled = import_react149.css`
|
|
|
23336
23675
|
cursor: not-allowed;
|
|
23337
23676
|
}
|
|
23338
23677
|
`;
|
|
23339
|
-
var SwitchInputLabel =
|
|
23678
|
+
var SwitchInputLabel = import_react154.css`
|
|
23340
23679
|
align-items: center;
|
|
23341
23680
|
color: var(--typography-base);
|
|
23342
23681
|
display: inline-flex;
|
|
@@ -23357,26 +23696,26 @@ var SwitchInputLabel = import_react149.css`
|
|
|
23357
23696
|
top: 0;
|
|
23358
23697
|
}
|
|
23359
23698
|
`;
|
|
23360
|
-
var SwitchText =
|
|
23699
|
+
var SwitchText = import_react154.css`
|
|
23361
23700
|
color: var(--gray-500);
|
|
23362
23701
|
font-size: var(--fs-sm);
|
|
23363
23702
|
padding-inline: var(--spacing-2xl) 0;
|
|
23364
23703
|
`;
|
|
23365
23704
|
|
|
23366
23705
|
// src/components/Switch/Switch.tsx
|
|
23367
|
-
var
|
|
23706
|
+
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
23368
23707
|
var Switch = React24.forwardRef(
|
|
23369
23708
|
({ label, infoText, toggleText, children, ...inputProps }, ref) => {
|
|
23370
23709
|
let additionalText = infoText;
|
|
23371
23710
|
if (infoText && toggleText) {
|
|
23372
23711
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
23373
23712
|
}
|
|
23374
|
-
return /* @__PURE__ */ (0,
|
|
23375
|
-
/* @__PURE__ */ (0,
|
|
23376
|
-
/* @__PURE__ */ (0,
|
|
23377
|
-
/* @__PURE__ */ (0,
|
|
23713
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
23714
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
|
|
23715
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
|
|
23716
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { css: SwitchInputLabel, children: label })
|
|
23378
23717
|
] }),
|
|
23379
|
-
additionalText ? /* @__PURE__ */ (0,
|
|
23718
|
+
additionalText ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { css: SwitchText, children: additionalText }) : null,
|
|
23380
23719
|
children
|
|
23381
23720
|
] });
|
|
23382
23721
|
}
|
|
@@ -23388,79 +23727,87 @@ var React25 = __toESM(require("react"));
|
|
|
23388
23727
|
|
|
23389
23728
|
// src/components/Table/Table.styles.ts
|
|
23390
23729
|
init_emotion_jsx_shim();
|
|
23391
|
-
var
|
|
23392
|
-
var table = ({ cellPadding = "var(--spacing-
|
|
23730
|
+
var import_react155 = require("@emotion/react");
|
|
23731
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react155.css`
|
|
23393
23732
|
border-bottom: 1px solid var(--gray-400);
|
|
23394
23733
|
border-collapse: collapse;
|
|
23395
23734
|
min-width: 100%;
|
|
23396
23735
|
table-layout: auto;
|
|
23736
|
+
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
23397
23737
|
|
|
23398
23738
|
th,
|
|
23399
23739
|
td {
|
|
23400
23740
|
padding: ${cellPadding};
|
|
23401
23741
|
}
|
|
23742
|
+
|
|
23743
|
+
thead tr {
|
|
23744
|
+
border-color: var(--gray-300);
|
|
23745
|
+
}
|
|
23746
|
+
|
|
23747
|
+
tbody tr:hover {
|
|
23748
|
+
background-color: var(--gray-50);
|
|
23749
|
+
}
|
|
23402
23750
|
`;
|
|
23403
|
-
var tableHead =
|
|
23404
|
-
background: var(--gray-100);
|
|
23751
|
+
var tableHead = import_react155.css`
|
|
23405
23752
|
color: var(--typography-base);
|
|
23406
23753
|
text-align: left;
|
|
23407
23754
|
`;
|
|
23408
|
-
var tableRow =
|
|
23409
|
-
border-bottom: 1px solid var(--gray-
|
|
23755
|
+
var tableRow = import_react155.css`
|
|
23756
|
+
border-bottom: 1px solid var(--gray-100);
|
|
23410
23757
|
`;
|
|
23411
|
-
var tableCellHead =
|
|
23758
|
+
var tableCellHead = import_react155.css`
|
|
23412
23759
|
font-size: var(--fs-sm);
|
|
23413
23760
|
text-transform: uppercase;
|
|
23414
23761
|
font-weight: var(--fw-bold);
|
|
23415
23762
|
`;
|
|
23416
23763
|
|
|
23417
23764
|
// src/components/Table/Table.tsx
|
|
23418
|
-
var
|
|
23765
|
+
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
23419
23766
|
var Table = React25.forwardRef(
|
|
23420
23767
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
23421
|
-
return /* @__PURE__ */ (0,
|
|
23768
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
23422
23769
|
}
|
|
23423
23770
|
);
|
|
23424
23771
|
var TableHead = React25.forwardRef(
|
|
23425
23772
|
({ children, ...otherProps }, ref) => {
|
|
23426
|
-
return /* @__PURE__ */ (0,
|
|
23773
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
|
|
23427
23774
|
}
|
|
23428
23775
|
);
|
|
23429
23776
|
var TableBody = React25.forwardRef(
|
|
23430
23777
|
({ children, ...otherProps }, ref) => {
|
|
23431
|
-
return /* @__PURE__ */ (0,
|
|
23778
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tbody", { ref, ...otherProps, children });
|
|
23432
23779
|
}
|
|
23433
23780
|
);
|
|
23434
23781
|
var TableFoot = React25.forwardRef(
|
|
23435
23782
|
({ children, ...otherProps }, ref) => {
|
|
23436
|
-
return /* @__PURE__ */ (0,
|
|
23783
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tfoot", { ref, ...otherProps, children });
|
|
23437
23784
|
}
|
|
23438
23785
|
);
|
|
23439
23786
|
var TableRow = React25.forwardRef(
|
|
23440
23787
|
({ children, ...otherProps }, ref) => {
|
|
23441
|
-
return /* @__PURE__ */ (0,
|
|
23788
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
|
|
23442
23789
|
}
|
|
23443
23790
|
);
|
|
23444
23791
|
var TableCellHead = React25.forwardRef(
|
|
23445
23792
|
({ children, ...otherProps }, ref) => {
|
|
23446
|
-
return /* @__PURE__ */ (0,
|
|
23793
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
23447
23794
|
}
|
|
23448
23795
|
);
|
|
23449
23796
|
var TableCellData = React25.forwardRef(
|
|
23450
23797
|
({ children, ...otherProps }, ref) => {
|
|
23451
|
-
return /* @__PURE__ */ (0,
|
|
23798
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("td", { ref, ...otherProps, children });
|
|
23452
23799
|
}
|
|
23453
23800
|
);
|
|
23454
23801
|
|
|
23455
23802
|
// src/components/Tabs/Tabs.tsx
|
|
23456
23803
|
init_emotion_jsx_shim();
|
|
23457
|
-
var
|
|
23458
|
-
var
|
|
23804
|
+
var import_react157 = require("@ariakit/react");
|
|
23805
|
+
var import_react158 = require("react");
|
|
23459
23806
|
|
|
23460
23807
|
// src/components/Tabs/Tabs.styles.ts
|
|
23461
23808
|
init_emotion_jsx_shim();
|
|
23462
|
-
var
|
|
23463
|
-
var tabButtonStyles =
|
|
23809
|
+
var import_react156 = require("@emotion/react");
|
|
23810
|
+
var tabButtonStyles = import_react156.css`
|
|
23464
23811
|
align-items: center;
|
|
23465
23812
|
border: 0;
|
|
23466
23813
|
height: 2.5rem;
|
|
@@ -23477,16 +23824,16 @@ var tabButtonStyles = import_react151.css`
|
|
|
23477
23824
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
23478
23825
|
}
|
|
23479
23826
|
`;
|
|
23480
|
-
var tabButtonGroupStyles =
|
|
23827
|
+
var tabButtonGroupStyles = import_react156.css`
|
|
23481
23828
|
display: flex;
|
|
23482
23829
|
gap: var(--spacing-base);
|
|
23483
23830
|
border-bottom: 1px solid var(--gray-300);
|
|
23484
23831
|
`;
|
|
23485
23832
|
|
|
23486
23833
|
// src/components/Tabs/Tabs.tsx
|
|
23487
|
-
var
|
|
23834
|
+
var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
|
|
23488
23835
|
var useCurrentTab = () => {
|
|
23489
|
-
const context = (0,
|
|
23836
|
+
const context = (0, import_react157.useTabStore)();
|
|
23490
23837
|
if (!context) {
|
|
23491
23838
|
throw new Error("This component can only be used inside <Tabs>");
|
|
23492
23839
|
}
|
|
@@ -23500,13 +23847,13 @@ var Tabs = ({
|
|
|
23500
23847
|
manual,
|
|
23501
23848
|
...props
|
|
23502
23849
|
}) => {
|
|
23503
|
-
const selected = (0,
|
|
23850
|
+
const selected = (0, import_react158.useMemo)(() => {
|
|
23504
23851
|
if (selectedId)
|
|
23505
23852
|
return selectedId;
|
|
23506
23853
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
23507
23854
|
}, [selectedId, useHashForState]);
|
|
23508
|
-
const tab = (0,
|
|
23509
|
-
const onTabSelect = (0,
|
|
23855
|
+
const tab = (0, import_react157.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
|
|
23856
|
+
const onTabSelect = (0, import_react158.useCallback)(
|
|
23510
23857
|
(value) => {
|
|
23511
23858
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
23512
23859
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -23517,28 +23864,28 @@ var Tabs = ({
|
|
|
23517
23864
|
},
|
|
23518
23865
|
[onSelectedIdChange, useHashForState]
|
|
23519
23866
|
);
|
|
23520
|
-
(0,
|
|
23867
|
+
(0, import_react158.useEffect)(() => {
|
|
23521
23868
|
if (selected && selected !== tab.getState().activeId) {
|
|
23522
23869
|
tab.setSelectedId(selected);
|
|
23523
23870
|
}
|
|
23524
23871
|
}, [selected, tab]);
|
|
23525
|
-
return /* @__PURE__ */ (0,
|
|
23872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react157.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
23526
23873
|
};
|
|
23527
23874
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
23528
|
-
return /* @__PURE__ */ (0,
|
|
23875
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react157.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
23529
23876
|
};
|
|
23530
23877
|
var TabButton = ({
|
|
23531
23878
|
children,
|
|
23532
23879
|
id,
|
|
23533
23880
|
...props
|
|
23534
23881
|
}) => {
|
|
23535
|
-
return /* @__PURE__ */ (0,
|
|
23882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react157.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
23536
23883
|
};
|
|
23537
23884
|
var TabContent = ({
|
|
23538
23885
|
children,
|
|
23539
23886
|
...props
|
|
23540
23887
|
}) => {
|
|
23541
|
-
return /* @__PURE__ */ (0,
|
|
23888
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react157.TabPanel, { ...props, children });
|
|
23542
23889
|
};
|
|
23543
23890
|
|
|
23544
23891
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -23546,8 +23893,8 @@ init_emotion_jsx_shim();
|
|
|
23546
23893
|
|
|
23547
23894
|
// src/components/Validation/StatusBullet.styles.ts
|
|
23548
23895
|
init_emotion_jsx_shim();
|
|
23549
|
-
var
|
|
23550
|
-
var StatusBulletContainer =
|
|
23896
|
+
var import_react159 = require("@emotion/react");
|
|
23897
|
+
var StatusBulletContainer = import_react159.css`
|
|
23551
23898
|
align-items: center;
|
|
23552
23899
|
align-self: center;
|
|
23553
23900
|
color: var(--gray-500);
|
|
@@ -23564,33 +23911,33 @@ var StatusBulletContainer = import_react154.css`
|
|
|
23564
23911
|
display: block;
|
|
23565
23912
|
}
|
|
23566
23913
|
`;
|
|
23567
|
-
var StatusBulletBase =
|
|
23914
|
+
var StatusBulletBase = import_react159.css`
|
|
23568
23915
|
font-size: var(--fs-sm);
|
|
23569
23916
|
&:before {
|
|
23570
23917
|
width: var(--fs-xs);
|
|
23571
23918
|
height: var(--fs-xs);
|
|
23572
23919
|
}
|
|
23573
23920
|
`;
|
|
23574
|
-
var StatusBulletSmall =
|
|
23921
|
+
var StatusBulletSmall = import_react159.css`
|
|
23575
23922
|
font-size: var(--fs-xs);
|
|
23576
23923
|
&:before {
|
|
23577
23924
|
width: var(--fs-xxs);
|
|
23578
23925
|
height: var(--fs-xxs);
|
|
23579
23926
|
}
|
|
23580
23927
|
`;
|
|
23581
|
-
var StatusDraft =
|
|
23928
|
+
var StatusDraft = import_react159.css`
|
|
23582
23929
|
&:before {
|
|
23583
23930
|
background: var(--white);
|
|
23584
23931
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
23585
23932
|
}
|
|
23586
23933
|
`;
|
|
23587
|
-
var StatusModified =
|
|
23934
|
+
var StatusModified = import_react159.css`
|
|
23588
23935
|
&:before {
|
|
23589
23936
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
23590
23937
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
23591
23938
|
}
|
|
23592
23939
|
`;
|
|
23593
|
-
var StatusError =
|
|
23940
|
+
var StatusError = import_react159.css`
|
|
23594
23941
|
color: var(--error);
|
|
23595
23942
|
&:before {
|
|
23596
23943
|
/* TODO: replace this with an svg icon */
|
|
@@ -23603,29 +23950,29 @@ var StatusError = import_react154.css`
|
|
|
23603
23950
|
);
|
|
23604
23951
|
}
|
|
23605
23952
|
`;
|
|
23606
|
-
var StatusPublished =
|
|
23953
|
+
var StatusPublished = import_react159.css`
|
|
23607
23954
|
&:before {
|
|
23608
23955
|
background: var(--accent-dark);
|
|
23609
23956
|
}
|
|
23610
23957
|
`;
|
|
23611
|
-
var StatusOrphan =
|
|
23958
|
+
var StatusOrphan = import_react159.css`
|
|
23612
23959
|
&:before {
|
|
23613
23960
|
background: var(--brand-secondary-5);
|
|
23614
23961
|
}
|
|
23615
23962
|
`;
|
|
23616
|
-
var StatusUnknown =
|
|
23963
|
+
var StatusUnknown = import_react159.css`
|
|
23617
23964
|
&:before {
|
|
23618
23965
|
background: var(--gray-800);
|
|
23619
23966
|
}
|
|
23620
23967
|
`;
|
|
23621
|
-
var StatusDeleted =
|
|
23968
|
+
var StatusDeleted = import_react159.css`
|
|
23622
23969
|
&:before {
|
|
23623
23970
|
background: var(--error);
|
|
23624
23971
|
}
|
|
23625
23972
|
`;
|
|
23626
23973
|
|
|
23627
23974
|
// src/components/Validation/StatusBullet.tsx
|
|
23628
|
-
var
|
|
23975
|
+
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
23629
23976
|
var StatusBullet = ({
|
|
23630
23977
|
status,
|
|
23631
23978
|
hideText = false,
|
|
@@ -23645,7 +23992,7 @@ var StatusBullet = ({
|
|
|
23645
23992
|
Deleted: StatusDeleted
|
|
23646
23993
|
};
|
|
23647
23994
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
23648
|
-
return /* @__PURE__ */ (0,
|
|
23995
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
23649
23996
|
"span",
|
|
23650
23997
|
{
|
|
23651
23998
|
role: "status",
|
|
@@ -23683,6 +24030,7 @@ var StatusBullet = ({
|
|
|
23683
24030
|
CurrentDrawerContext,
|
|
23684
24031
|
DashedBox,
|
|
23685
24032
|
DateTimePicker,
|
|
24033
|
+
DateTimePickerSummary,
|
|
23686
24034
|
DateTimePickerVariant,
|
|
23687
24035
|
DebouncedInputKeywordSearch,
|
|
23688
24036
|
DescriptionList,
|
|
@@ -23746,6 +24094,13 @@ var StatusBullet = ({
|
|
|
23746
24094
|
Modal,
|
|
23747
24095
|
ModalDialog,
|
|
23748
24096
|
MultilineChip,
|
|
24097
|
+
ObjectGridContainer,
|
|
24098
|
+
ObjectGridItem,
|
|
24099
|
+
ObjectGridItemCardCover,
|
|
24100
|
+
ObjectGridItemCover,
|
|
24101
|
+
ObjectGridItemCoverButton,
|
|
24102
|
+
ObjectGridItemHeading,
|
|
24103
|
+
ObjectGridItemIconWithTooltip,
|
|
23749
24104
|
PageHeaderSection,
|
|
23750
24105
|
Pagination,
|
|
23751
24106
|
Paragraph,
|
|
@@ -23891,6 +24246,7 @@ var StatusBullet = ({
|
|
|
23891
24246
|
toast,
|
|
23892
24247
|
uniformComponentIcon,
|
|
23893
24248
|
uniformComponentPatternIcon,
|
|
24249
|
+
uniformCompositionPatternIcon,
|
|
23894
24250
|
uniformContentTypeIcon,
|
|
23895
24251
|
uniformEntryIcon,
|
|
23896
24252
|
uniformEntryPatternIcon,
|