@uniformdev/design-system 20.36.1 → 20.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1386 -621
- package/dist/index.d.mts +143 -9
- package/dist/index.d.ts +143 -9
- package/dist/index.js +1373 -594
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -1481,11 +1481,15 @@ __export(src_exports, {
|
|
|
1481
1481
|
ParameterMultiSelect: () => ParameterMultiSelect,
|
|
1482
1482
|
ParameterMultiSelectInner: () => ParameterMultiSelectInner,
|
|
1483
1483
|
ParameterNameAndPublicIdInput: () => ParameterNameAndPublicIdInput,
|
|
1484
|
+
ParameterNumberSlider: () => ParameterNumberSlider,
|
|
1485
|
+
ParameterNumberSliderInner: () => ParameterNumberSliderInner,
|
|
1484
1486
|
ParameterOverrideMarker: () => ParameterOverrideMarker,
|
|
1485
1487
|
ParameterRichText: () => ParameterRichText,
|
|
1486
1488
|
ParameterRichTextInner: () => ParameterRichTextInner,
|
|
1487
1489
|
ParameterSelect: () => ParameterSelect,
|
|
1488
1490
|
ParameterSelectInner: () => ParameterSelectInner,
|
|
1491
|
+
ParameterSelectSlider: () => ParameterSelectSlider,
|
|
1492
|
+
ParameterSelectSliderInner: () => ParameterSelectSliderInner,
|
|
1489
1493
|
ParameterShell: () => ParameterShell,
|
|
1490
1494
|
ParameterShellContext: () => ParameterShellContext,
|
|
1491
1495
|
ParameterShellPlaceholder: () => ParameterShellPlaceholder,
|
|
@@ -1507,6 +1511,8 @@ __export(src_exports, {
|
|
|
1507
1511
|
SegmentedControl: () => SegmentedControl,
|
|
1508
1512
|
SelectableMenuItem: () => SelectableMenuItem,
|
|
1509
1513
|
Skeleton: () => Skeleton,
|
|
1514
|
+
Slider: () => Slider,
|
|
1515
|
+
SliderLabels: () => SliderLabels,
|
|
1510
1516
|
Spinner: () => Spinner,
|
|
1511
1517
|
StatusBullet: () => StatusBullet,
|
|
1512
1518
|
SuccessMessage: () => SuccessMessage,
|
|
@@ -5274,7 +5280,7 @@ var avatarSizeStylesMap = {
|
|
|
5274
5280
|
};
|
|
5275
5281
|
var Avatar = ({
|
|
5276
5282
|
src,
|
|
5277
|
-
label = "",
|
|
5283
|
+
label: label2 = "",
|
|
5278
5284
|
children,
|
|
5279
5285
|
size = "md",
|
|
5280
5286
|
as = "div",
|
|
@@ -5286,7 +5292,7 @@ var Avatar = ({
|
|
|
5286
5292
|
src ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { role: "presentation", src, css: avatarImageStyles, referrerPolicy: "no-referrer" }) : children ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_CgProfile2.CgProfile, { css: avatarImageStyles }),
|
|
5287
5293
|
children
|
|
5288
5294
|
] });
|
|
5289
|
-
return src || children ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tooltip, { title:
|
|
5295
|
+
return src || children ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tooltip, { title: label2, withoutPortal: labelWithoutPortal, children: body }) : body;
|
|
5290
5296
|
};
|
|
5291
5297
|
|
|
5292
5298
|
// src/components/Avatar/AvatarGroup.tsx
|
|
@@ -6175,11 +6181,11 @@ var InfoDialog = ({ message }) => {
|
|
|
6175
6181
|
] });
|
|
6176
6182
|
};
|
|
6177
6183
|
var CheckboxWithInfo = (0, import_react41.forwardRef)(
|
|
6178
|
-
({ label, name, info, ...props }, ref) => {
|
|
6184
|
+
({ label: label2, name, info, ...props }, ref) => {
|
|
6179
6185
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { css: CheckboxWithInfoContainer, children: [
|
|
6180
6186
|
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { css: CheckboxWithInfoLabel, children: [
|
|
6181
6187
|
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
|
|
6182
|
-
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children:
|
|
6188
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: label2 })
|
|
6183
6189
|
] }),
|
|
6184
6190
|
info ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoDialog, { message: info }) : null
|
|
6185
6191
|
] });
|
|
@@ -6399,7 +6405,7 @@ var Label = ({ children, className, testId, ...props }) => {
|
|
|
6399
6405
|
var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
|
|
6400
6406
|
var Input = React8.forwardRef(
|
|
6401
6407
|
({
|
|
6402
|
-
label,
|
|
6408
|
+
label: label2,
|
|
6403
6409
|
icon,
|
|
6404
6410
|
id,
|
|
6405
6411
|
caption,
|
|
@@ -6431,7 +6437,7 @@ var Input = React8.forwardRef(
|
|
|
6431
6437
|
css: [labelText, typeof classNameLabel === "object" ? classNameLabel : void 0],
|
|
6432
6438
|
className: typeof classNameLabel === "string" ? classNameLabel : "",
|
|
6433
6439
|
testId: labelTestId,
|
|
6434
|
-
children:
|
|
6440
|
+
children: label2
|
|
6435
6441
|
}
|
|
6436
6442
|
) : null,
|
|
6437
6443
|
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
@@ -6450,7 +6456,7 @@ var Input = React8.forwardRef(
|
|
|
6450
6456
|
errorMessage ? inputError : void 0,
|
|
6451
6457
|
icon ? inputWithIcon : ""
|
|
6452
6458
|
],
|
|
6453
|
-
"aria-label": showLabel || typeof
|
|
6459
|
+
"aria-label": showLabel || typeof label2 !== "string" ? void 0 : label2,
|
|
6454
6460
|
className: typeof classNameControl === "string" ? classNameControl : "",
|
|
6455
6461
|
onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
|
|
6456
6462
|
...props,
|
|
@@ -6964,7 +6970,7 @@ var import_react50 = require("react");
|
|
|
6964
6970
|
var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
|
|
6965
6971
|
var InputSelect = (0, import_react50.forwardRef)(
|
|
6966
6972
|
({
|
|
6967
|
-
label,
|
|
6973
|
+
label: label2,
|
|
6968
6974
|
defaultOption,
|
|
6969
6975
|
options,
|
|
6970
6976
|
caption,
|
|
@@ -6991,7 +6997,7 @@ var InputSelect = (0, import_react50.forwardRef)(
|
|
|
6991
6997
|
css: [labelText, typeof classNameLabel === "object" ? classNameLabel : void 0],
|
|
6992
6998
|
className: typeof classNameLabel === "string" ? classNameLabel : "",
|
|
6993
6999
|
children: [
|
|
6994
|
-
|
|
7000
|
+
label2,
|
|
6995
7001
|
labelCta
|
|
6996
7002
|
]
|
|
6997
7003
|
}
|
|
@@ -7000,8 +7006,8 @@ var InputSelect = (0, import_react50.forwardRef)(
|
|
|
7000
7006
|
"select",
|
|
7001
7007
|
{
|
|
7002
7008
|
ref,
|
|
7003
|
-
title:
|
|
7004
|
-
"aria-label": !showLabel ?
|
|
7009
|
+
title: label2,
|
|
7010
|
+
"aria-label": !showLabel ? label2 : void 0,
|
|
7005
7011
|
css: [
|
|
7006
7012
|
input("wrap"),
|
|
7007
7013
|
inputSelect,
|
|
@@ -7090,7 +7096,7 @@ function tryParseTime(isoTime) {
|
|
|
7090
7096
|
var InputTime = React9.forwardRef(
|
|
7091
7097
|
({
|
|
7092
7098
|
id,
|
|
7093
|
-
label,
|
|
7099
|
+
label: label2,
|
|
7094
7100
|
caption,
|
|
7095
7101
|
name,
|
|
7096
7102
|
showLabel = true,
|
|
@@ -7134,7 +7140,7 @@ var InputTime = React9.forwardRef(
|
|
|
7134
7140
|
),
|
|
7135
7141
|
...props,
|
|
7136
7142
|
children: [
|
|
7137
|
-
showLabel ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_aria_components.Label, { elementType: "label", css: [labelText], "data-testid": labelTestId, children:
|
|
7143
|
+
showLabel ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_aria_components.Label, { elementType: "label", css: [labelText], "data-testid": labelTestId, children: label2 }) : null,
|
|
7138
7144
|
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { css: [inputContainer], children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
7139
7145
|
import_react_aria_components.DateInput,
|
|
7140
7146
|
{
|
|
@@ -7174,7 +7180,7 @@ var React10 = __toESM(require("react"));
|
|
|
7174
7180
|
var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
|
|
7175
7181
|
var InputToggle = React10.forwardRef(
|
|
7176
7182
|
({
|
|
7177
|
-
label,
|
|
7183
|
+
label: label2,
|
|
7178
7184
|
type,
|
|
7179
7185
|
disabled: disabled2,
|
|
7180
7186
|
checked,
|
|
@@ -7207,11 +7213,11 @@ var InputToggle = React10.forwardRef(
|
|
|
7207
7213
|
checked,
|
|
7208
7214
|
name,
|
|
7209
7215
|
disabled: disabled2,
|
|
7210
|
-
"aria-label": !showLabel && typeof
|
|
7216
|
+
"aria-label": !showLabel && typeof label2 === "string" ? label2 : void 0,
|
|
7211
7217
|
...props
|
|
7212
7218
|
}
|
|
7213
7219
|
),
|
|
7214
|
-
!showLabel ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children:
|
|
7220
|
+
!showLabel ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label2 }),
|
|
7215
7221
|
caption || errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: inputToggleMessageContainer, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
7216
7222
|
FieldMessage,
|
|
7217
7223
|
{
|
|
@@ -7267,9 +7273,9 @@ init_emotion_jsx_shim();
|
|
|
7267
7273
|
var import_react54 = require("react");
|
|
7268
7274
|
var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
|
|
7269
7275
|
var Textarea = (0, import_react54.forwardRef)(
|
|
7270
|
-
({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
|
|
7276
|
+
({ label: label2, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
|
|
7271
7277
|
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
|
|
7272
|
-
showLabel ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { htmlFor: id, css: [labelText], children:
|
|
7278
|
+
showLabel ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { htmlFor: id, css: [labelText], children: label2 }) : null,
|
|
7273
7279
|
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { css: [inputContainer], children: [
|
|
7274
7280
|
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
7275
7281
|
"textarea",
|
|
@@ -7282,7 +7288,7 @@ var Textarea = (0, import_react54.forwardRef)(
|
|
|
7282
7288
|
icon ? inputWithIcon : "",
|
|
7283
7289
|
scrollbarStyles
|
|
7284
7290
|
],
|
|
7285
|
-
"aria-label": !showLabel ?
|
|
7291
|
+
"aria-label": !showLabel ? label2 : void 0,
|
|
7286
7292
|
...props
|
|
7287
7293
|
}
|
|
7288
7294
|
),
|
|
@@ -9055,7 +9061,7 @@ function useDateTimePickerContext() {
|
|
|
9055
9061
|
}
|
|
9056
9062
|
var DateTimePicker = ({
|
|
9057
9063
|
id,
|
|
9058
|
-
label,
|
|
9064
|
+
label: label2,
|
|
9059
9065
|
triggerIcon = import_CgCalendar2.CgCalendar,
|
|
9060
9066
|
value,
|
|
9061
9067
|
minVisible,
|
|
@@ -9139,7 +9145,7 @@ var DateTimePicker = ({
|
|
|
9139
9145
|
[handleClearClick, handleDateChange, handleTimeChange]
|
|
9140
9146
|
);
|
|
9141
9147
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DateTimePickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { "data-testid": testId, "data-variant": variant, ...props, children: [
|
|
9142
|
-
showLabel ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Label, { css: [labelText], "data-testid": `${testId}-label`, children:
|
|
9148
|
+
showLabel ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Label, { css: [labelText], "data-testid": `${testId}-label`, children: label2 }) : null,
|
|
9143
9149
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { css: inputContainer, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react73.PopoverProvider, { store: popover2, children: [
|
|
9144
9150
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
9145
9151
|
"div",
|
|
@@ -9290,10 +9296,10 @@ var DescriptionList = import_react76.default.forwardRef(
|
|
|
9290
9296
|
ref,
|
|
9291
9297
|
css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
|
|
9292
9298
|
...listProps,
|
|
9293
|
-
children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react76.default.Fragment, { children: [
|
|
9294
|
-
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("dt", { css: descriptionListLabelStyles, children:
|
|
9299
|
+
children: items == null ? void 0 : items.map(({ label: label2, value }) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react76.default.Fragment, { children: [
|
|
9300
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("dt", { css: descriptionListLabelStyles, children: label2 }),
|
|
9295
9301
|
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DescriptionListValueBoolean, { value }) : value })
|
|
9296
|
-
] },
|
|
9302
|
+
] }, label2))
|
|
9297
9303
|
}
|
|
9298
9304
|
);
|
|
9299
9305
|
}
|
|
@@ -11223,10 +11229,7 @@ function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
|
|
|
11223
11229
|
// src/components/KeyValueInput/KeyValueInput.styles.ts
|
|
11224
11230
|
init_emotion_jsx_shim();
|
|
11225
11231
|
var import_react105 = require("@emotion/react");
|
|
11226
|
-
var LabelStyles = import_react105.css
|
|
11227
|
-
text-transform: uppercase;
|
|
11228
|
-
font-weight: var(--fw-medium);
|
|
11229
|
-
`;
|
|
11232
|
+
var LabelStyles = import_react105.css``;
|
|
11230
11233
|
var SelectKeyValueRowStyles = import_react105.css`
|
|
11231
11234
|
animation: var(--duration-fast) var(--timing-ease-out);
|
|
11232
11235
|
align-items: flex-start;
|
|
@@ -11249,15 +11252,19 @@ var generateItemId = (item, index) => item.uniqueId || item.value || item.key ||
|
|
|
11249
11252
|
var KeyValueInput = ({
|
|
11250
11253
|
value,
|
|
11251
11254
|
onChange,
|
|
11252
|
-
label = "Options",
|
|
11255
|
+
label: label2 = "Options",
|
|
11253
11256
|
newItemDefault = initialSelectOptionValue,
|
|
11254
11257
|
keyLabel = "Text",
|
|
11255
11258
|
valueLabel = "Value",
|
|
11259
|
+
iconLabel = "Icon",
|
|
11256
11260
|
keyInfoPopover,
|
|
11257
11261
|
valueInfoPopover,
|
|
11262
|
+
iconInfoPopover,
|
|
11258
11263
|
disabled: disabled2,
|
|
11259
11264
|
errors,
|
|
11260
|
-
onFocusChange
|
|
11265
|
+
onFocusChange,
|
|
11266
|
+
showIconColumn = false,
|
|
11267
|
+
renderIconSelector
|
|
11261
11268
|
}) => {
|
|
11262
11269
|
const [isDragging, setIsDragging] = (0, import_react106.useState)(false);
|
|
11263
11270
|
const popoverStoresMap = (0, import_react106.useRef)({});
|
|
@@ -11329,35 +11336,58 @@ var KeyValueInput = ({
|
|
|
11329
11336
|
}
|
|
11330
11337
|
}, [value.length]);
|
|
11331
11338
|
return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(VerticalRhythm, { gap: "xs", children: [
|
|
11332
|
-
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { css: LabelStyles, children:
|
|
11333
|
-
/* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
|
|
11334
|
-
|
|
11335
|
-
|
|
11336
|
-
|
|
11337
|
-
|
|
11338
|
-
{
|
|
11339
|
-
|
|
11340
|
-
|
|
11341
|
-
|
|
11342
|
-
|
|
11343
|
-
children:
|
|
11344
|
-
|
|
11345
|
-
|
|
11346
|
-
|
|
11347
|
-
|
|
11348
|
-
|
|
11349
|
-
|
|
11350
|
-
|
|
11351
|
-
|
|
11352
|
-
|
|
11353
|
-
|
|
11354
|
-
|
|
11355
|
-
|
|
11356
|
-
children:
|
|
11357
|
-
|
|
11358
|
-
|
|
11359
|
-
|
|
11360
|
-
|
|
11339
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { css: LabelStyles, children: label2 }) }),
|
|
11340
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
|
|
11341
|
+
"div",
|
|
11342
|
+
{
|
|
11343
|
+
css: [
|
|
11344
|
+
SelectKeyValueRowStyles,
|
|
11345
|
+
{ paddingLeft: "var(--spacing-base)" },
|
|
11346
|
+
showIconColumn && { gridTemplateColumns: "1fr 1fr 1fr" }
|
|
11347
|
+
],
|
|
11348
|
+
children: [
|
|
11349
|
+
showIconColumn && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
11350
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: iconLabel }),
|
|
11351
|
+
!iconInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
|
|
11352
|
+
Popover3,
|
|
11353
|
+
{
|
|
11354
|
+
buttonText: `${iconLabel} info`,
|
|
11355
|
+
iconColor: "gray",
|
|
11356
|
+
placement: "bottom-start",
|
|
11357
|
+
onInit: ({ store }) => popoverStoresMap.current.icon = store,
|
|
11358
|
+
children: iconInfoPopover
|
|
11359
|
+
}
|
|
11360
|
+
)
|
|
11361
|
+
] }),
|
|
11362
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
11363
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: keyLabel }),
|
|
11364
|
+
!keyInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
|
|
11365
|
+
Popover3,
|
|
11366
|
+
{
|
|
11367
|
+
buttonText: `${keyLabel} info`,
|
|
11368
|
+
iconColor: "gray",
|
|
11369
|
+
placement: "bottom-start",
|
|
11370
|
+
onInit: ({ store }) => popoverStoresMap.current.label = store,
|
|
11371
|
+
children: keyInfoPopover
|
|
11372
|
+
}
|
|
11373
|
+
)
|
|
11374
|
+
] }),
|
|
11375
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
11376
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: valueLabel }),
|
|
11377
|
+
!valueInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
|
|
11378
|
+
Popover3,
|
|
11379
|
+
{
|
|
11380
|
+
buttonText: `${valueLabel} info`,
|
|
11381
|
+
iconColor: "gray",
|
|
11382
|
+
placement: "bottom-start",
|
|
11383
|
+
onInit: ({ store }) => popoverStoresMap.current.value = store,
|
|
11384
|
+
children: valueInfoPopover
|
|
11385
|
+
}
|
|
11386
|
+
)
|
|
11387
|
+
] })
|
|
11388
|
+
]
|
|
11389
|
+
}
|
|
11390
|
+
),
|
|
11361
11391
|
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)(VerticalRhythm, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
|
|
11362
11392
|
import_core.DndContext,
|
|
11363
11393
|
{
|
|
@@ -11375,6 +11405,7 @@ var KeyValueInput = ({
|
|
|
11375
11405
|
value: item,
|
|
11376
11406
|
keyLabel: `${keyLabel}, row ${index}`,
|
|
11377
11407
|
valueLabel: `${valueLabel}, row ${index}`,
|
|
11408
|
+
iconLabel: `${iconLabel}, row ${index}`,
|
|
11378
11409
|
disabled: disabled2,
|
|
11379
11410
|
disabledDelete: value.length <= 1,
|
|
11380
11411
|
disabledDnd: value.length === 1,
|
|
@@ -11383,25 +11414,21 @@ var KeyValueInput = ({
|
|
|
11383
11414
|
onDelete: () => handleDeleteOptionRow(index),
|
|
11384
11415
|
onFocusChange: handleFocusChange,
|
|
11385
11416
|
"data-testid": "key-value-input-item",
|
|
11386
|
-
onEnter: handleAddOptionRow
|
|
11417
|
+
onEnter: handleAddOptionRow,
|
|
11418
|
+
showIconColumn,
|
|
11419
|
+
renderIconSelector
|
|
11387
11420
|
},
|
|
11388
11421
|
isDragging ? id : index
|
|
11389
11422
|
)) })
|
|
11390
11423
|
}
|
|
11391
11424
|
) }),
|
|
11392
|
-
/* @__PURE__ */ (0, import_jsx_runtime91.
|
|
11393
|
-
|
|
11425
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
|
|
11426
|
+
AddListButton,
|
|
11394
11427
|
{
|
|
11395
|
-
|
|
11396
|
-
buttonType: "secondaryInvert",
|
|
11397
|
-
size: "xs",
|
|
11398
|
-
onClick: handleAddOptionRow,
|
|
11428
|
+
onButtonClick: handleAddOptionRow,
|
|
11399
11429
|
disabled: disabled2,
|
|
11400
|
-
|
|
11401
|
-
|
|
11402
|
-
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.85rem" }),
|
|
11403
|
-
" Add option"
|
|
11404
|
-
]
|
|
11430
|
+
"data-testid": "add-input-row-action",
|
|
11431
|
+
css: { marginTop: "var(--spacing-sm)", marginLeft: "var(--spacing-base)" }
|
|
11405
11432
|
}
|
|
11406
11433
|
)
|
|
11407
11434
|
] });
|
|
@@ -11412,6 +11439,7 @@ var KeyValueInputItem = ({
|
|
|
11412
11439
|
keyLabel,
|
|
11413
11440
|
value,
|
|
11414
11441
|
valueLabel,
|
|
11442
|
+
iconLabel,
|
|
11415
11443
|
disabled: disabled2,
|
|
11416
11444
|
onChange,
|
|
11417
11445
|
onDelete,
|
|
@@ -11419,7 +11447,9 @@ var KeyValueInputItem = ({
|
|
|
11419
11447
|
onFocusChange,
|
|
11420
11448
|
disabledDelete = false,
|
|
11421
11449
|
disabledDnd = false,
|
|
11422
|
-
onEnter
|
|
11450
|
+
onEnter,
|
|
11451
|
+
showIconColumn = false,
|
|
11452
|
+
renderIconSelector
|
|
11423
11453
|
}) => {
|
|
11424
11454
|
const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef, isSorting } = (0, import_sortable.useSortable)({
|
|
11425
11455
|
id,
|
|
@@ -11436,62 +11466,98 @@ var KeyValueInputItem = ({
|
|
|
11436
11466
|
};
|
|
11437
11467
|
return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: rowWrapper, ref: setNodeRef, style, children: [
|
|
11438
11468
|
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
|
|
11439
|
-
/* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
|
|
11440
|
-
|
|
11441
|
-
|
|
11442
|
-
|
|
11443
|
-
|
|
11444
|
-
|
|
11445
|
-
|
|
11446
|
-
|
|
11447
|
-
|
|
11448
|
-
|
|
11449
|
-
|
|
11450
|
-
|
|
11451
|
-
|
|
11452
|
-
|
|
11453
|
-
|
|
11454
|
-
|
|
11455
|
-
|
|
11456
|
-
|
|
11457
|
-
|
|
11458
|
-
|
|
11459
|
-
|
|
11460
|
-
|
|
11461
|
-
|
|
11462
|
-
|
|
11463
|
-
|
|
11464
|
-
|
|
11465
|
-
|
|
11466
|
-
|
|
11467
|
-
|
|
11468
|
-
|
|
11469
|
-
|
|
11470
|
-
|
|
11471
|
-
|
|
11472
|
-
|
|
11473
|
-
|
|
11474
|
-
|
|
11475
|
-
|
|
11476
|
-
|
|
11477
|
-
|
|
11478
|
-
|
|
11479
|
-
|
|
11480
|
-
|
|
11481
|
-
|
|
11482
|
-
|
|
11483
|
-
|
|
11484
|
-
|
|
11485
|
-
|
|
11486
|
-
|
|
11487
|
-
|
|
11488
|
-
|
|
11489
|
-
|
|
11490
|
-
|
|
11491
|
-
|
|
11492
|
-
|
|
11493
|
-
|
|
11494
|
-
|
|
11469
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
|
|
11470
|
+
"div",
|
|
11471
|
+
{
|
|
11472
|
+
css: [
|
|
11473
|
+
SelectKeyValueRowStyles,
|
|
11474
|
+
showIconColumn && { gridTemplateColumns: "1fr 1fr 1fr 1.5rem" }
|
|
11475
|
+
],
|
|
11476
|
+
"data-testid": "key-value-input-item",
|
|
11477
|
+
children: [
|
|
11478
|
+
showIconColumn && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { children: renderIconSelector ? renderIconSelector({
|
|
11479
|
+
value: value.icon,
|
|
11480
|
+
onChange: (icon) => onChange == null ? void 0 : onChange({ ...value, icon }),
|
|
11481
|
+
disabled: disabled2
|
|
11482
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
|
|
11483
|
+
Input,
|
|
11484
|
+
{
|
|
11485
|
+
label: iconLabel,
|
|
11486
|
+
showLabel: false,
|
|
11487
|
+
disabled: disabled2,
|
|
11488
|
+
onChange: (e) => {
|
|
11489
|
+
onChange == null ? void 0 : onChange({
|
|
11490
|
+
...value,
|
|
11491
|
+
icon: e.currentTarget.value
|
|
11492
|
+
});
|
|
11493
|
+
},
|
|
11494
|
+
onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
|
|
11495
|
+
onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
|
|
11496
|
+
onKeyDown: handleEnter,
|
|
11497
|
+
value: value.icon || "",
|
|
11498
|
+
errorMessage: isSorting ? void 0 : error == null ? void 0 : error.icon,
|
|
11499
|
+
"data-testid": "icon"
|
|
11500
|
+
}
|
|
11501
|
+
) }),
|
|
11502
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
|
|
11503
|
+
Input,
|
|
11504
|
+
{
|
|
11505
|
+
ref: firstInputRef,
|
|
11506
|
+
label: keyLabel,
|
|
11507
|
+
showLabel: false,
|
|
11508
|
+
disabled: disabled2,
|
|
11509
|
+
onChange: (e) => {
|
|
11510
|
+
const hasStoredValue = value.value !== value.key;
|
|
11511
|
+
onChange == null ? void 0 : onChange({
|
|
11512
|
+
key: e.currentTarget.value,
|
|
11513
|
+
value: hasStoredValue ? value.value : e.currentTarget.value,
|
|
11514
|
+
icon: value.icon
|
|
11515
|
+
});
|
|
11516
|
+
},
|
|
11517
|
+
onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
|
|
11518
|
+
onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
|
|
11519
|
+
onKeyDown: handleEnter,
|
|
11520
|
+
value: value.key,
|
|
11521
|
+
errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
|
|
11522
|
+
"data-testid": "key"
|
|
11523
|
+
}
|
|
11524
|
+
),
|
|
11525
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
|
|
11526
|
+
Input,
|
|
11527
|
+
{
|
|
11528
|
+
label: valueLabel,
|
|
11529
|
+
showLabel: false,
|
|
11530
|
+
disabled: disabled2,
|
|
11531
|
+
onChange: (e) => {
|
|
11532
|
+
onChange == null ? void 0 : onChange({
|
|
11533
|
+
key: value.key,
|
|
11534
|
+
value: e.currentTarget.value,
|
|
11535
|
+
icon: value.icon
|
|
11536
|
+
});
|
|
11537
|
+
},
|
|
11538
|
+
onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
|
|
11539
|
+
onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
|
|
11540
|
+
onKeyDown: handleEnter,
|
|
11541
|
+
value: value.value,
|
|
11542
|
+
errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
|
|
11543
|
+
"data-testid": "value"
|
|
11544
|
+
}
|
|
11545
|
+
),
|
|
11546
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { css: { marginTop: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
|
|
11547
|
+
Button,
|
|
11548
|
+
{
|
|
11549
|
+
type: "button",
|
|
11550
|
+
buttonType: "ghostDestructive",
|
|
11551
|
+
"data-testid": "delete-row",
|
|
11552
|
+
onClick: onDelete,
|
|
11553
|
+
disabled: disabled2 || disabledDelete,
|
|
11554
|
+
size: "zero",
|
|
11555
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon: "trash", size: 16, iconColor: "currentColor" })
|
|
11556
|
+
}
|
|
11557
|
+
) })
|
|
11558
|
+
]
|
|
11559
|
+
}
|
|
11560
|
+
)
|
|
11495
11561
|
] });
|
|
11496
11562
|
};
|
|
11497
11563
|
|
|
@@ -11697,15 +11763,15 @@ var ScrollableListInner = import_react111.css`
|
|
|
11697
11763
|
|
|
11698
11764
|
// src/components/List/ScrollableList.tsx
|
|
11699
11765
|
var import_jsx_runtime95 = require("@emotion/react/jsx-runtime");
|
|
11700
|
-
var ScrollableList = ({ label, children, ...props }) => {
|
|
11766
|
+
var ScrollableList = ({ label: label2, children, ...props }) => {
|
|
11701
11767
|
return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
|
|
11702
|
-
|
|
11768
|
+
label2 ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
|
|
11703
11769
|
"span",
|
|
11704
11770
|
{
|
|
11705
11771
|
css: import_react112.css`
|
|
11706
11772
|
${labelText}
|
|
11707
11773
|
`,
|
|
11708
|
-
children:
|
|
11774
|
+
children: label2
|
|
11709
11775
|
}
|
|
11710
11776
|
) : null,
|
|
11711
11777
|
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { css: [ScrollableListInner, scrollbarStyles], children })
|
|
@@ -11784,7 +11850,7 @@ var ScrollableListIconVisible = import_react113.css`
|
|
|
11784
11850
|
// src/components/List/ScrollableListInputItem.tsx
|
|
11785
11851
|
var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
|
|
11786
11852
|
var ScrollableListInputItem = ({
|
|
11787
|
-
label,
|
|
11853
|
+
label: label2,
|
|
11788
11854
|
icon,
|
|
11789
11855
|
active: active2,
|
|
11790
11856
|
disableShadow = false,
|
|
@@ -11804,7 +11870,7 @@ var ScrollableListInputItem = ({
|
|
|
11804
11870
|
children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
|
|
11805
11871
|
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("span", { css: ScrollableListInputText, children: [
|
|
11806
11872
|
icon,
|
|
11807
|
-
|
|
11873
|
+
label2
|
|
11808
11874
|
] }),
|
|
11809
11875
|
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { css: ScrollableListHiddenInput, children }),
|
|
11810
11876
|
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
@@ -12194,20 +12260,20 @@ var LoadingOverlay = ({
|
|
|
12194
12260
|
);
|
|
12195
12261
|
};
|
|
12196
12262
|
var LoadingAnimation = ({
|
|
12197
|
-
label,
|
|
12263
|
+
label: label2,
|
|
12198
12264
|
width,
|
|
12199
|
-
css:
|
|
12265
|
+
css: css112,
|
|
12200
12266
|
isPaused
|
|
12201
12267
|
}) => {
|
|
12202
12268
|
return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
|
|
12203
12269
|
"div",
|
|
12204
12270
|
{
|
|
12205
|
-
"aria-label":
|
|
12271
|
+
"aria-label": label2,
|
|
12206
12272
|
style: {
|
|
12207
12273
|
width: typeof width === "number" ? `${width}px` : width,
|
|
12208
12274
|
height: typeof width === "number" ? `${width}px` : width
|
|
12209
12275
|
},
|
|
12210
|
-
css: [loaderAnimationContainer,
|
|
12276
|
+
css: [loaderAnimationContainer, css112],
|
|
12211
12277
|
className: `loader-container${isPaused ? " paused" : ""}`,
|
|
12212
12278
|
children: [
|
|
12213
12279
|
/* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "bottom-cubes", children: [
|
|
@@ -13321,10 +13387,10 @@ var ParameterShellContext = (0, import_react129.createContext)({
|
|
|
13321
13387
|
}
|
|
13322
13388
|
});
|
|
13323
13389
|
var useParameterShell = () => {
|
|
13324
|
-
const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react129.useContext)(ParameterShellContext);
|
|
13390
|
+
const { id, label: label2, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react129.useContext)(ParameterShellContext);
|
|
13325
13391
|
return {
|
|
13326
13392
|
id,
|
|
13327
|
-
label,
|
|
13393
|
+
label: label2,
|
|
13328
13394
|
hiddenLabel,
|
|
13329
13395
|
errorMessage,
|
|
13330
13396
|
handleManuallySetErrorMessage
|
|
@@ -13840,16 +13906,6 @@ var toggleInput2 = import_react138.css`
|
|
|
13840
13906
|
color: var(--white);
|
|
13841
13907
|
}
|
|
13842
13908
|
|
|
13843
|
-
&:indeterminate,
|
|
13844
|
-
&:indeterminate:hover,
|
|
13845
|
-
&:indeterminate:focus {
|
|
13846
|
-
background: var(--accent-dark-active)
|
|
13847
|
-
url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNiIKICBoZWlnaHQ9IjE2IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCAxMkM0IDExLjQ0NzcgNC40NDc3MiAxMSA1IDExSDE5QzE5LjU1MjMgMTEgMjAgMTEuNDQ3NyAyMCAxMkMyMCAxMi41NTIzIDE5LjU1MjMgMTMgMTkgMTNINUM0LjQ0NzcyIDEzIDQgMTIuNTUyMyA0IDEyWiIKICAgIGZpbGw9IndoaXRlIgogIC8+Cjwvc3ZnPg==')
|
|
13848
|
-
no-repeat center center;
|
|
13849
|
-
border-color: var(--accent-dark-active);
|
|
13850
|
-
color: var(--white);
|
|
13851
|
-
}
|
|
13852
|
-
|
|
13853
13909
|
&:hover {
|
|
13854
13910
|
border-color: var(--accent-dark-hover);
|
|
13855
13911
|
}
|
|
@@ -13860,6 +13916,17 @@ var toggleInput2 = import_react138.css`
|
|
|
13860
13916
|
border-color: var(--gray-300);
|
|
13861
13917
|
}
|
|
13862
13918
|
`;
|
|
13919
|
+
var toggleInputIndeterminateState = import_react138.css`
|
|
13920
|
+
&:indeterminate,
|
|
13921
|
+
&:indeterminate:hover,
|
|
13922
|
+
&:indeterminate:focus {
|
|
13923
|
+
background: var(--accent-dark-active)
|
|
13924
|
+
url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNiIKICBoZWlnaHQ9IjE2IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCAxMkM0IDExLjQ0NzcgNC40NDc3MiAxMSA1IDExSDE5QzE5LjU1MjMgMTEgMjAgMTEuNDQ3NyAyMCAxMkMyMCAxMi41NTIzIDE5LjU1MjMgMTMgMTkgMTNINUM0LjQ0NzcyIDEzIDQgMTIuNTUyMyA0IDEyWiIKICAgIGZpbGw9IndoaXRlIgogIC8+Cjwvc3ZnPg==')
|
|
13925
|
+
no-repeat center center;
|
|
13926
|
+
border-color: var(--accent-dark-active);
|
|
13927
|
+
color: var(--white);
|
|
13928
|
+
}
|
|
13929
|
+
`;
|
|
13863
13930
|
var inlineLabel2 = import_react138.css`
|
|
13864
13931
|
color: var(--inline-label-color);
|
|
13865
13932
|
padding-left: var(--spacing-md);
|
|
@@ -14003,7 +14070,7 @@ init_emotion_jsx_shim();
|
|
|
14003
14070
|
var import_react139 = require("react");
|
|
14004
14071
|
var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
|
|
14005
14072
|
var ParameterMenuButton = (0, import_react139.forwardRef)(
|
|
14006
|
-
({ label, children, disabled: disabled2 }, ref) => {
|
|
14073
|
+
({ label: label2, children, disabled: disabled2 }, ref) => {
|
|
14007
14074
|
return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
14008
14075
|
Menu,
|
|
14009
14076
|
{
|
|
@@ -14014,7 +14081,7 @@ var ParameterMenuButton = (0, import_react139.forwardRef)(
|
|
|
14014
14081
|
className: "parameter-menu",
|
|
14015
14082
|
css: [inputMenu, inputMenuHover],
|
|
14016
14083
|
type: "button",
|
|
14017
|
-
"aria-label": `${
|
|
14084
|
+
"aria-label": `${label2} options`,
|
|
14018
14085
|
ref,
|
|
14019
14086
|
disabled: disabled2,
|
|
14020
14087
|
children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
@@ -14058,7 +14125,7 @@ var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
|
|
|
14058
14125
|
var extractParameterProps = (props) => {
|
|
14059
14126
|
const {
|
|
14060
14127
|
id,
|
|
14061
|
-
label,
|
|
14128
|
+
label: label2,
|
|
14062
14129
|
caption,
|
|
14063
14130
|
captionTestId,
|
|
14064
14131
|
errorMessage,
|
|
@@ -14076,7 +14143,7 @@ var extractParameterProps = (props) => {
|
|
|
14076
14143
|
return {
|
|
14077
14144
|
shellProps: {
|
|
14078
14145
|
id,
|
|
14079
|
-
label,
|
|
14146
|
+
label: label2,
|
|
14080
14147
|
caption,
|
|
14081
14148
|
captionTestId,
|
|
14082
14149
|
errorMessage,
|
|
@@ -14094,7 +14161,7 @@ var extractParameterProps = (props) => {
|
|
|
14094
14161
|
};
|
|
14095
14162
|
};
|
|
14096
14163
|
var ParameterShell = ({
|
|
14097
|
-
label,
|
|
14164
|
+
label: label2,
|
|
14098
14165
|
labelLeadingIcon,
|
|
14099
14166
|
labelTrailingIcon,
|
|
14100
14167
|
hiddenLabel,
|
|
@@ -14120,7 +14187,7 @@ var ParameterShell = ({
|
|
|
14120
14187
|
return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: inputContainer2, ...props, id, children: [
|
|
14121
14188
|
hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(ParameterLabel, { id, css: labelText2, children: [
|
|
14122
14189
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
14123
|
-
|
|
14190
|
+
label2,
|
|
14124
14191
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
14125
14192
|
] }),
|
|
14126
14193
|
!title ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
|
|
@@ -14143,13 +14210,13 @@ var ParameterShell = ({
|
|
|
14143
14210
|
children: actionItems
|
|
14144
14211
|
}
|
|
14145
14212
|
) : null,
|
|
14146
|
-
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterMenuButton, { label: `${
|
|
14213
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterMenuButton, { label: `${label2} menu`, disabled: props.disabled, children: menuItems }) : null,
|
|
14147
14214
|
/* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
|
|
14148
14215
|
ParameterShellContext.Provider,
|
|
14149
14216
|
{
|
|
14150
14217
|
value: {
|
|
14151
14218
|
id,
|
|
14152
|
-
label,
|
|
14219
|
+
label: label2,
|
|
14153
14220
|
hiddenLabel,
|
|
14154
14221
|
errorMessage: errorMessaging,
|
|
14155
14222
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
@@ -14192,7 +14259,7 @@ var ParameterImage = (0, import_react143.forwardRef)(
|
|
|
14192
14259
|
);
|
|
14193
14260
|
var ParameterImageInner = (0, import_react143.forwardRef)((props, ref) => {
|
|
14194
14261
|
const { value } = props;
|
|
14195
|
-
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
14262
|
+
const { id, label: label2, hiddenLabel, errorMessage } = useParameterShell();
|
|
14196
14263
|
const deferredValue = (0, import_react143.useDeferredValue)(value);
|
|
14197
14264
|
return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
|
|
14198
14265
|
/* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
@@ -14202,7 +14269,7 @@ var ParameterImageInner = (0, import_react143.forwardRef)((props, ref) => {
|
|
|
14202
14269
|
type: "text",
|
|
14203
14270
|
id,
|
|
14204
14271
|
ref,
|
|
14205
|
-
"aria-label": hiddenLabel && typeof
|
|
14272
|
+
"aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
|
|
14206
14273
|
autoComplete: "off",
|
|
14207
14274
|
...props
|
|
14208
14275
|
}
|
|
@@ -14220,7 +14287,7 @@ var ParameterInput = (0, import_react144.forwardRef)((props, ref) => {
|
|
|
14220
14287
|
return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterInputInner, { ref, ...innerProps }) });
|
|
14221
14288
|
});
|
|
14222
14289
|
var ParameterInputInner = (0, import_react144.forwardRef)(({ enableMouseWheel = false, ...props }, ref) => {
|
|
14223
|
-
const { id, label, hiddenLabel } = useParameterShell();
|
|
14290
|
+
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
14224
14291
|
const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
|
|
14225
14292
|
return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
14226
14293
|
"input",
|
|
@@ -14228,7 +14295,7 @@ var ParameterInputInner = (0, import_react144.forwardRef)(({ enableMouseWheel =
|
|
|
14228
14295
|
css: input3,
|
|
14229
14296
|
id,
|
|
14230
14297
|
type: props.type || "text",
|
|
14231
|
-
"aria-label": hiddenLabel && typeof
|
|
14298
|
+
"aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
|
|
14232
14299
|
autoComplete: "off",
|
|
14233
14300
|
ref,
|
|
14234
14301
|
onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
|
|
@@ -14266,7 +14333,7 @@ var ParameterLink = (0, import_react145.forwardRef)(
|
|
|
14266
14333
|
);
|
|
14267
14334
|
var ParameterLinkInner = (0, import_react145.forwardRef)(
|
|
14268
14335
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
14269
|
-
const { id, label, hiddenLabel } = useParameterShell();
|
|
14336
|
+
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
14270
14337
|
if (!props.value)
|
|
14271
14338
|
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
14272
14339
|
return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { css: inputWrapper, children: [
|
|
@@ -14278,7 +14345,7 @@ var ParameterLinkInner = (0, import_react145.forwardRef)(
|
|
|
14278
14345
|
readOnly: Boolean(props.value),
|
|
14279
14346
|
id,
|
|
14280
14347
|
ref,
|
|
14281
|
-
"aria-label": hiddenLabel && typeof
|
|
14348
|
+
"aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
|
|
14282
14349
|
...props
|
|
14283
14350
|
}
|
|
14284
14351
|
),
|
|
@@ -14320,7 +14387,7 @@ var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
|
14320
14387
|
};
|
|
14321
14388
|
var ParameterMultiSelectInner = (props) => {
|
|
14322
14389
|
var _a;
|
|
14323
|
-
const { id, label } = useParameterShell();
|
|
14390
|
+
const { id, label: label2 } = useParameterShell();
|
|
14324
14391
|
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
14325
14392
|
InputComboBox,
|
|
14326
14393
|
{
|
|
@@ -14330,7 +14397,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
14330
14397
|
isMulti: true,
|
|
14331
14398
|
isClearable: (_a = props.isClearable) != null ? _a : false,
|
|
14332
14399
|
id,
|
|
14333
|
-
"aria-label": typeof
|
|
14400
|
+
"aria-label": typeof label2 === "string" ? label2 : void 0,
|
|
14334
14401
|
classNamePrefix: "parameter-multi-select-combobox",
|
|
14335
14402
|
styles: {
|
|
14336
14403
|
menuPortal: (base) => ({
|
|
@@ -14383,7 +14450,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14383
14450
|
publicIdError,
|
|
14384
14451
|
readOnly = false,
|
|
14385
14452
|
hasInitialPublicIdField,
|
|
14386
|
-
label = "Name",
|
|
14453
|
+
label: label2 = "Name",
|
|
14387
14454
|
warnOverLength,
|
|
14388
14455
|
nameIdField = "name",
|
|
14389
14456
|
nameCaption,
|
|
@@ -14404,7 +14471,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14404
14471
|
{
|
|
14405
14472
|
id: nameIdField,
|
|
14406
14473
|
name: nameIdField,
|
|
14407
|
-
label,
|
|
14474
|
+
label: label2,
|
|
14408
14475
|
"data-testid": "name-field",
|
|
14409
14476
|
autoComplete: "off",
|
|
14410
14477
|
"data-af": "true",
|
|
@@ -14448,9 +14515,658 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14448
14515
|
] });
|
|
14449
14516
|
};
|
|
14450
14517
|
|
|
14518
|
+
// src/components/ParameterInputs/ParameterNumberSlider.tsx
|
|
14519
|
+
init_emotion_jsx_shim();
|
|
14520
|
+
var import_react149 = require("react");
|
|
14521
|
+
|
|
14522
|
+
// src/components/Slider/index.ts
|
|
14523
|
+
init_emotion_jsx_shim();
|
|
14524
|
+
|
|
14525
|
+
// src/components/Slider/Slider.tsx
|
|
14526
|
+
init_emotion_jsx_shim();
|
|
14527
|
+
var import_react148 = require("react");
|
|
14528
|
+
|
|
14529
|
+
// src/components/Slider/SliderLabels.tsx
|
|
14530
|
+
init_emotion_jsx_shim();
|
|
14531
|
+
var import_react147 = require("react");
|
|
14532
|
+
|
|
14533
|
+
// src/components/Slider/styles/Slider.styles.ts
|
|
14534
|
+
init_emotion_jsx_shim();
|
|
14535
|
+
var import_react146 = require("@emotion/react");
|
|
14536
|
+
var thumbSize = "20px";
|
|
14537
|
+
var disabledThumbStyles = import_react146.css`
|
|
14538
|
+
background: var(--gray-500);
|
|
14539
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cline x1='4' y1='9' x2='16' y2='9' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
14540
|
+
background-repeat: no-repeat;
|
|
14541
|
+
background-position: center;
|
|
14542
|
+
background-size: 12px 12px;
|
|
14543
|
+
`;
|
|
14544
|
+
var container3 = import_react146.css`
|
|
14545
|
+
display: flex;
|
|
14546
|
+
align-items: flex-start;
|
|
14547
|
+
gap: var(--spacing-base);
|
|
14548
|
+
width: 100%;
|
|
14549
|
+
`;
|
|
14550
|
+
var sliderContainer = import_react146.css`
|
|
14551
|
+
flex: 1;
|
|
14552
|
+
display: flex;
|
|
14553
|
+
flex-direction: column;
|
|
14554
|
+
`;
|
|
14555
|
+
var sliderTrackContainer = import_react146.css`
|
|
14556
|
+
position: relative;
|
|
14557
|
+
padding: var(--spacing-xs) 0;
|
|
14558
|
+
`;
|
|
14559
|
+
var progressTrack = import_react146.css`
|
|
14560
|
+
position: absolute;
|
|
14561
|
+
top: 50%;
|
|
14562
|
+
left: 0;
|
|
14563
|
+
right: 0;
|
|
14564
|
+
height: 4px;
|
|
14565
|
+
transform: translateY(-50%);
|
|
14566
|
+
margin-top: -3px;
|
|
14567
|
+
border-radius: var(--rounded-sm);
|
|
14568
|
+
`;
|
|
14569
|
+
var progressTrackBackground = import_react146.css`
|
|
14570
|
+
position: absolute;
|
|
14571
|
+
top: 0;
|
|
14572
|
+
left: 0;
|
|
14573
|
+
right: 0;
|
|
14574
|
+
bottom: 0;
|
|
14575
|
+
background: var(--gray-200);
|
|
14576
|
+
border-radius: var(--rounded-sm);
|
|
14577
|
+
box-shadow: 0 0 0 1px white;
|
|
14578
|
+
`;
|
|
14579
|
+
var progressTrackFill = import_react146.css`
|
|
14580
|
+
position: absolute;
|
|
14581
|
+
top: 0;
|
|
14582
|
+
left: 0;
|
|
14583
|
+
bottom: 0;
|
|
14584
|
+
background: var(--accent-light);
|
|
14585
|
+
border-radius: var(--rounded-sm);
|
|
14586
|
+
`;
|
|
14587
|
+
var tickMarksContainer = import_react146.css`
|
|
14588
|
+
position: relative;
|
|
14589
|
+
height: 1rem;
|
|
14590
|
+
margin-top: calc(-1 * var(--spacing-base) + var(--spacing-xs));
|
|
14591
|
+
`;
|
|
14592
|
+
var tickMark = import_react146.css`
|
|
14593
|
+
position: absolute;
|
|
14594
|
+
top: 0;
|
|
14595
|
+
width: 0.5px;
|
|
14596
|
+
height: 8px;
|
|
14597
|
+
background-color: var(--gray-300);
|
|
14598
|
+
`;
|
|
14599
|
+
var largeTickMark = import_react146.css`
|
|
14600
|
+
position: absolute;
|
|
14601
|
+
top: 0;
|
|
14602
|
+
width: 1px;
|
|
14603
|
+
height: 12px;
|
|
14604
|
+
background-color: var(--gray-400);
|
|
14605
|
+
transform: translateX(-50%);
|
|
14606
|
+
`;
|
|
14607
|
+
var slider = import_react146.css`
|
|
14608
|
+
appearance: none;
|
|
14609
|
+
width: 100%;
|
|
14610
|
+
width: calc(100% + ${thumbSize});
|
|
14611
|
+
left: calc(-${thumbSize} / 2);
|
|
14612
|
+
height: ${thumbSize};
|
|
14613
|
+
background: transparent;
|
|
14614
|
+
outline: none;
|
|
14615
|
+
cursor: pointer;
|
|
14616
|
+
position: relative;
|
|
14617
|
+
z-index: 3;
|
|
14618
|
+
|
|
14619
|
+
&:disabled {
|
|
14620
|
+
cursor: not-allowed;
|
|
14621
|
+
}
|
|
14622
|
+
|
|
14623
|
+
/* Webkit (Chrome, Safari) */
|
|
14624
|
+
&::-webkit-slider-track {
|
|
14625
|
+
width: 100%;
|
|
14626
|
+
height: 4px;
|
|
14627
|
+
background: transparent;
|
|
14628
|
+
border-radius: var(--rounded-sm);
|
|
14629
|
+
}
|
|
14630
|
+
|
|
14631
|
+
&::-webkit-slider-thumb {
|
|
14632
|
+
appearance: none;
|
|
14633
|
+
height: ${thumbSize};
|
|
14634
|
+
width: ${thumbSize};
|
|
14635
|
+
border-radius: 50%;
|
|
14636
|
+
background: var(--accent-dark);
|
|
14637
|
+
cursor: pointer;
|
|
14638
|
+
border: 2px solid var(--white);
|
|
14639
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
14640
|
+
position: relative;
|
|
14641
|
+
z-index: 2;
|
|
14642
|
+
|
|
14643
|
+
&:hover {
|
|
14644
|
+
background: var(--accent-dark-hover);
|
|
14645
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
14646
|
+
}
|
|
14647
|
+
|
|
14648
|
+
&:active {
|
|
14649
|
+
background: var(--accent-dark-active);
|
|
14650
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
14651
|
+
}
|
|
14652
|
+
}
|
|
14653
|
+
|
|
14654
|
+
&:disabled::-webkit-slider-thumb {
|
|
14655
|
+
${disabledThumbStyles}
|
|
14656
|
+
|
|
14657
|
+
&:hover,
|
|
14658
|
+
&:active {
|
|
14659
|
+
${disabledThumbStyles}
|
|
14660
|
+
}
|
|
14661
|
+
}
|
|
14662
|
+
|
|
14663
|
+
/* Firefox */
|
|
14664
|
+
&::-moz-range-track {
|
|
14665
|
+
width: 100%;
|
|
14666
|
+
height: 4px;
|
|
14667
|
+
background: transparent;
|
|
14668
|
+
border-radius: var(--rounded-sm);
|
|
14669
|
+
border: none;
|
|
14670
|
+
}
|
|
14671
|
+
|
|
14672
|
+
&::-moz-range-thumb {
|
|
14673
|
+
height: ${thumbSize};
|
|
14674
|
+
width: ${thumbSize};
|
|
14675
|
+
border-radius: 50%;
|
|
14676
|
+
background: var(--accent-dark);
|
|
14677
|
+
cursor: pointer;
|
|
14678
|
+
border: 2px solid var(--white);
|
|
14679
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
14680
|
+
|
|
14681
|
+
&:hover {
|
|
14682
|
+
background: var(--accent-dark-hover);
|
|
14683
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
14684
|
+
}
|
|
14685
|
+
|
|
14686
|
+
&:active {
|
|
14687
|
+
background: var(--accent-dark-active);
|
|
14688
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
14689
|
+
}
|
|
14690
|
+
}
|
|
14691
|
+
|
|
14692
|
+
&:disabled::-moz-range-thumb {
|
|
14693
|
+
${disabledThumbStyles}
|
|
14694
|
+
|
|
14695
|
+
&:hover,
|
|
14696
|
+
&:active {
|
|
14697
|
+
${disabledThumbStyles}
|
|
14698
|
+
}
|
|
14699
|
+
}
|
|
14700
|
+
|
|
14701
|
+
/* Focus states */
|
|
14702
|
+
&:focus {
|
|
14703
|
+
outline: none;
|
|
14704
|
+
}
|
|
14705
|
+
|
|
14706
|
+
&:focus::-webkit-slider-thumb {
|
|
14707
|
+
box-shadow:
|
|
14708
|
+
0 2px 4px rgba(0, 0, 0, 0.1),
|
|
14709
|
+
0 0 0 3px var(--accent-light);
|
|
14710
|
+
}
|
|
14711
|
+
|
|
14712
|
+
&:focus::-moz-range-thumb {
|
|
14713
|
+
box-shadow:
|
|
14714
|
+
0 2px 4px rgba(0, 0, 0, 0.1),
|
|
14715
|
+
0 0 0 3px var(--accent-light);
|
|
14716
|
+
}
|
|
14717
|
+
`;
|
|
14718
|
+
var labelsContainer = import_react146.css`
|
|
14719
|
+
position: relative;
|
|
14720
|
+
height: 1.5rem;
|
|
14721
|
+
width: 100%;
|
|
14722
|
+
`;
|
|
14723
|
+
var label = import_react146.css`
|
|
14724
|
+
position: absolute;
|
|
14725
|
+
top: 0;
|
|
14726
|
+
font-size: var(--text-sm);
|
|
14727
|
+
color: var(--gray-500);
|
|
14728
|
+
text-align: center;
|
|
14729
|
+
|
|
14730
|
+
/* Truncation for long labels */
|
|
14731
|
+
white-space: nowrap;
|
|
14732
|
+
overflow: hidden;
|
|
14733
|
+
text-overflow: ellipsis;
|
|
14734
|
+
|
|
14735
|
+
/* Set max width to prevent labels from extending too far */
|
|
14736
|
+
max-width: 25%;
|
|
14737
|
+
|
|
14738
|
+
/* Default centering transform */
|
|
14739
|
+
transform: translateX(-50%);
|
|
14740
|
+
|
|
14741
|
+
/* Smooth transitions for label changes */
|
|
14742
|
+
transition:
|
|
14743
|
+
opacity var(--duration-fast) var(--timing-ease-out),
|
|
14744
|
+
transform var(--duration-fast) var(--timing-ease-out);
|
|
14745
|
+
|
|
14746
|
+
/* Handle edge cases for first and last labels */
|
|
14747
|
+
&[data-position='0'] {
|
|
14748
|
+
transform: translateX(0);
|
|
14749
|
+
text-align: left;
|
|
14750
|
+
max-width: 50%;
|
|
14751
|
+
}
|
|
14752
|
+
|
|
14753
|
+
&[data-position='100'] {
|
|
14754
|
+
transform: translateX(-100%);
|
|
14755
|
+
text-align: right;
|
|
14756
|
+
max-width: 50%;
|
|
14757
|
+
}
|
|
14758
|
+
|
|
14759
|
+
/* Handle single label case by centering it */
|
|
14760
|
+
&:only-child {
|
|
14761
|
+
left: 50% !important;
|
|
14762
|
+
transform: translateX(-50%);
|
|
14763
|
+
text-align: center;
|
|
14764
|
+
max-width: 100%;
|
|
14765
|
+
}
|
|
14766
|
+
`;
|
|
14767
|
+
var numberInputContainer = import_react146.css`
|
|
14768
|
+
flex-shrink: 0;
|
|
14769
|
+
min-width: 2rem;
|
|
14770
|
+
margin-top: var(--spacing-sm);
|
|
14771
|
+
`;
|
|
14772
|
+
var numberInput2 = import_react146.css`
|
|
14773
|
+
appearance: none;
|
|
14774
|
+
background-color: var(--white);
|
|
14775
|
+
border: 1px solid var(--gray-300);
|
|
14776
|
+
border-radius: var(--rounded-sm);
|
|
14777
|
+
color: var(--gray-700);
|
|
14778
|
+
padding: var(--spacing-sm);
|
|
14779
|
+
width: 100%;
|
|
14780
|
+
font-size: var(--text-sm);
|
|
14781
|
+
text-align: center;
|
|
14782
|
+
transition:
|
|
14783
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
14784
|
+
border-color var(--duration-fast) var(--timing-ease-out),
|
|
14785
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
14786
|
+
box-shadow var(--duration-fast) var(--timing-ease-out);
|
|
14787
|
+
|
|
14788
|
+
&::placeholder {
|
|
14789
|
+
color: var(--gray-400);
|
|
14790
|
+
}
|
|
14791
|
+
|
|
14792
|
+
&:hover {
|
|
14793
|
+
border-color: var(--accent-dark-hover);
|
|
14794
|
+
}
|
|
14795
|
+
|
|
14796
|
+
&:focus {
|
|
14797
|
+
border-color: var(--accent-dark-active);
|
|
14798
|
+
box-shadow: var(--elevation-100);
|
|
14799
|
+
outline: none;
|
|
14800
|
+
}
|
|
14801
|
+
|
|
14802
|
+
&:disabled {
|
|
14803
|
+
cursor: not-allowed;
|
|
14804
|
+
color: var(--gray-300);
|
|
14805
|
+
border-color: var(--gray-300);
|
|
14806
|
+
background-color: var(--gray-50);
|
|
14807
|
+
}
|
|
14808
|
+
|
|
14809
|
+
/* Hide number input spinners */
|
|
14810
|
+
&::-webkit-outer-spin-button,
|
|
14811
|
+
&::-webkit-inner-spin-button {
|
|
14812
|
+
appearance: none;
|
|
14813
|
+
margin: 0;
|
|
14814
|
+
}
|
|
14815
|
+
|
|
14816
|
+
&[type='number'] {
|
|
14817
|
+
-moz-appearance: textfield;
|
|
14818
|
+
}
|
|
14819
|
+
`;
|
|
14820
|
+
|
|
14821
|
+
// src/components/Slider/SliderLabels.tsx
|
|
14822
|
+
var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
|
|
14823
|
+
function estimateLabelWidth(text) {
|
|
14824
|
+
const fontSize = 14;
|
|
14825
|
+
const avgCharWidthRatio = 0.7;
|
|
14826
|
+
const avgCharWidth = fontSize * avgCharWidthRatio;
|
|
14827
|
+
const basePadding = 24;
|
|
14828
|
+
return Math.ceil(text.length * avgCharWidth + basePadding);
|
|
14829
|
+
}
|
|
14830
|
+
function generateSymmetricIndices(totalCount) {
|
|
14831
|
+
if (totalCount <= 0) return [];
|
|
14832
|
+
if (totalCount === 1) return [[0]];
|
|
14833
|
+
if (totalCount === 2) return [[0, totalCount - 1]];
|
|
14834
|
+
const levels = [];
|
|
14835
|
+
levels.push([0, totalCount - 1]);
|
|
14836
|
+
if (totalCount % 2 === 1) {
|
|
14837
|
+
levels.push([Math.floor(totalCount / 2)]);
|
|
14838
|
+
} else {
|
|
14839
|
+
const mid1 = Math.floor(totalCount / 2) - 1;
|
|
14840
|
+
const mid2 = Math.floor(totalCount / 2);
|
|
14841
|
+
levels.push([mid1, mid2]);
|
|
14842
|
+
}
|
|
14843
|
+
let currentDivisions = 4;
|
|
14844
|
+
while (currentDivisions <= totalCount) {
|
|
14845
|
+
const newIndices = [];
|
|
14846
|
+
for (let i = 1; i < currentDivisions; i += 2) {
|
|
14847
|
+
const index = Math.round(i / currentDivisions * (totalCount - 1));
|
|
14848
|
+
if (index > 0 && index < totalCount - 1) {
|
|
14849
|
+
newIndices.push(index);
|
|
14850
|
+
}
|
|
14851
|
+
}
|
|
14852
|
+
if (newIndices.length > 0) {
|
|
14853
|
+
levels.push(newIndices);
|
|
14854
|
+
}
|
|
14855
|
+
currentDivisions *= 2;
|
|
14856
|
+
}
|
|
14857
|
+
return levels;
|
|
14858
|
+
}
|
|
14859
|
+
function labelsWouldOverlap(pos1, width1, pos2, width2, containerWidth) {
|
|
14860
|
+
const pixelPos1 = pos1 / 100 * containerWidth;
|
|
14861
|
+
const pixelPos2 = pos2 / 100 * containerWidth;
|
|
14862
|
+
const buffer = 8;
|
|
14863
|
+
const left1 = pixelPos1 - width1 / 2 - buffer / 2;
|
|
14864
|
+
const right1 = pixelPos1 + width1 / 2 + buffer / 2;
|
|
14865
|
+
const left2 = pixelPos2 - width2 / 2 - buffer / 2;
|
|
14866
|
+
const right2 = pixelPos2 + width2 / 2 + buffer / 2;
|
|
14867
|
+
return !(right1 < left2 || right2 < left1);
|
|
14868
|
+
}
|
|
14869
|
+
function calculateLabelVisibility(ticks, currentValue, containerWidth) {
|
|
14870
|
+
const labelsWithTicks = ticks.map((tick, index) => ({ tick, index })).filter(({ tick }) => tick.label);
|
|
14871
|
+
if (labelsWithTicks.length === 0) {
|
|
14872
|
+
return [];
|
|
14873
|
+
}
|
|
14874
|
+
const currentSelectionIndex = labelsWithTicks.findIndex(({ tick }) => tick.position === currentValue);
|
|
14875
|
+
const distributionLevels = generateSymmetricIndices(labelsWithTicks.length);
|
|
14876
|
+
let visibleIndices = new Set(distributionLevels[0] || []);
|
|
14877
|
+
if (currentSelectionIndex !== -1) {
|
|
14878
|
+
visibleIndices.add(currentSelectionIndex);
|
|
14879
|
+
}
|
|
14880
|
+
for (let levelIndex = 1; levelIndex < distributionLevels.length; levelIndex++) {
|
|
14881
|
+
const candidateIndices = new Set(visibleIndices);
|
|
14882
|
+
for (const index of distributionLevels[levelIndex]) {
|
|
14883
|
+
candidateIndices.add(index);
|
|
14884
|
+
}
|
|
14885
|
+
const maxLabelsForWidth = Math.max(2, Math.floor(containerWidth / 100));
|
|
14886
|
+
if (candidateIndices.size > maxLabelsForWidth) {
|
|
14887
|
+
break;
|
|
14888
|
+
}
|
|
14889
|
+
const candidateArray = Array.from(candidateIndices).sort((a, b) => a - b);
|
|
14890
|
+
let hasOverlap = false;
|
|
14891
|
+
for (let i = 0; i < candidateArray.length - 1; i++) {
|
|
14892
|
+
const curr = labelsWithTicks[candidateArray[i]];
|
|
14893
|
+
const next = labelsWithTicks[candidateArray[i + 1]];
|
|
14894
|
+
const currWidth = estimateLabelWidth(curr.tick.label || "");
|
|
14895
|
+
const nextWidth = estimateLabelWidth(next.tick.label || "");
|
|
14896
|
+
if (labelsWouldOverlap(curr.tick.percentage, currWidth, next.tick.percentage, nextWidth, containerWidth)) {
|
|
14897
|
+
hasOverlap = true;
|
|
14898
|
+
break;
|
|
14899
|
+
}
|
|
14900
|
+
}
|
|
14901
|
+
if (!hasOverlap) {
|
|
14902
|
+
visibleIndices = candidateIndices;
|
|
14903
|
+
} else {
|
|
14904
|
+
break;
|
|
14905
|
+
}
|
|
14906
|
+
}
|
|
14907
|
+
if (currentSelectionIndex !== -1 && visibleIndices.has(currentSelectionIndex)) {
|
|
14908
|
+
const currentTick = labelsWithTicks[currentSelectionIndex].tick;
|
|
14909
|
+
const currentWidth = estimateLabelWidth(currentTick.label || "");
|
|
14910
|
+
const sortedVisible = Array.from(visibleIndices).sort((a, b) => a - b);
|
|
14911
|
+
const currentIndexInVisible = sortedVisible.indexOf(currentSelectionIndex);
|
|
14912
|
+
if (currentIndexInVisible > 0) {
|
|
14913
|
+
const leftIndex = sortedVisible[currentIndexInVisible - 1];
|
|
14914
|
+
const leftTick = labelsWithTicks[leftIndex].tick;
|
|
14915
|
+
const leftWidth = estimateLabelWidth(leftTick.label || "");
|
|
14916
|
+
if (labelsWouldOverlap(
|
|
14917
|
+
leftTick.percentage,
|
|
14918
|
+
leftWidth,
|
|
14919
|
+
currentTick.percentage,
|
|
14920
|
+
currentWidth,
|
|
14921
|
+
containerWidth
|
|
14922
|
+
)) {
|
|
14923
|
+
visibleIndices.delete(leftIndex);
|
|
14924
|
+
}
|
|
14925
|
+
}
|
|
14926
|
+
if (currentIndexInVisible < sortedVisible.length - 1) {
|
|
14927
|
+
const rightIndex = sortedVisible[currentIndexInVisible + 1];
|
|
14928
|
+
const rightTick = labelsWithTicks[rightIndex].tick;
|
|
14929
|
+
const rightWidth = estimateLabelWidth(rightTick.label || "");
|
|
14930
|
+
if (labelsWouldOverlap(
|
|
14931
|
+
currentTick.percentage,
|
|
14932
|
+
currentWidth,
|
|
14933
|
+
rightTick.percentage,
|
|
14934
|
+
rightWidth,
|
|
14935
|
+
containerWidth
|
|
14936
|
+
)) {
|
|
14937
|
+
visibleIndices.delete(rightIndex);
|
|
14938
|
+
}
|
|
14939
|
+
}
|
|
14940
|
+
}
|
|
14941
|
+
return labelsWithTicks.map(({ index }, arrayIndex) => ({
|
|
14942
|
+
tickIndex: index,
|
|
14943
|
+
isVisible: visibleIndices.has(arrayIndex),
|
|
14944
|
+
priority: visibleIndices.has(arrayIndex) ? 1 : 10
|
|
14945
|
+
// Simple priority for visible vs hidden
|
|
14946
|
+
}));
|
|
14947
|
+
}
|
|
14948
|
+
function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
|
|
14949
|
+
const containerRef = (0, import_react147.useRef)(null);
|
|
14950
|
+
const [measuredWidth, setMeasuredWidth] = (0, import_react147.useState)(containerWidth);
|
|
14951
|
+
(0, import_react147.useEffect)(() => {
|
|
14952
|
+
if (containerRef.current) {
|
|
14953
|
+
const resizeObserver = new ResizeObserver((entries) => {
|
|
14954
|
+
for (const entry of entries) {
|
|
14955
|
+
setMeasuredWidth(entry.contentRect.width);
|
|
14956
|
+
}
|
|
14957
|
+
});
|
|
14958
|
+
resizeObserver.observe(containerRef.current);
|
|
14959
|
+
setMeasuredWidth(containerRef.current.offsetWidth);
|
|
14960
|
+
return () => resizeObserver.disconnect();
|
|
14961
|
+
}
|
|
14962
|
+
}, []);
|
|
14963
|
+
const labelVisibilities = calculateLabelVisibility(ticks, currentValue, measuredWidth);
|
|
14964
|
+
const visibilityMap = new Map(labelVisibilities.map((lv) => [lv.tickIndex, lv.isVisible]));
|
|
14965
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { ref: containerRef, css: labelsContainer, children: ticks.map((tick, index) => ({ tick, index })).filter(({ tick }) => tick.label).map(({ tick, index }) => {
|
|
14966
|
+
var _a;
|
|
14967
|
+
const isVisible = (_a = visibilityMap.get(index)) != null ? _a : false;
|
|
14968
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
14969
|
+
"div",
|
|
14970
|
+
{
|
|
14971
|
+
css: label,
|
|
14972
|
+
style: {
|
|
14973
|
+
left: `${tick.percentage}%`,
|
|
14974
|
+
opacity: isVisible ? 1 : 0,
|
|
14975
|
+
pointerEvents: isVisible ? "auto" : "none"
|
|
14976
|
+
},
|
|
14977
|
+
"data-position": tick.percentage === 0 ? "0" : tick.percentage === 100 ? "100" : void 0,
|
|
14978
|
+
title: tick.label,
|
|
14979
|
+
children: tick.label
|
|
14980
|
+
},
|
|
14981
|
+
`label-${index}-${tick.position}`
|
|
14982
|
+
);
|
|
14983
|
+
}) });
|
|
14984
|
+
}
|
|
14985
|
+
|
|
14986
|
+
// src/components/Slider/Slider.tsx
|
|
14987
|
+
var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
|
|
14988
|
+
var Slider = (0, import_react148.forwardRef)(
|
|
14989
|
+
({
|
|
14990
|
+
value,
|
|
14991
|
+
onChange,
|
|
14992
|
+
onBlur,
|
|
14993
|
+
min: propMin,
|
|
14994
|
+
max: propMax,
|
|
14995
|
+
step: propStep,
|
|
14996
|
+
options,
|
|
14997
|
+
showNumberInput = !options,
|
|
14998
|
+
// Default: show for numeric mode, hide for options mode
|
|
14999
|
+
disabled: disabled2 = false,
|
|
15000
|
+
"aria-label": ariaLabel,
|
|
15001
|
+
id,
|
|
15002
|
+
name
|
|
15003
|
+
}, ref) => {
|
|
15004
|
+
const isOptionsMode = Boolean(options && options.length > 0);
|
|
15005
|
+
const { min, max, step, smallTicks, largeTicks } = (0, import_react148.useMemo)(() => {
|
|
15006
|
+
if (isOptionsMode && options) {
|
|
15007
|
+
return {
|
|
15008
|
+
min: 0,
|
|
15009
|
+
max: options.length - 1,
|
|
15010
|
+
step: 1,
|
|
15011
|
+
smallTicks: [],
|
|
15012
|
+
// No small ticks for options mode
|
|
15013
|
+
largeTicks: options.map((option, index) => ({
|
|
15014
|
+
position: index,
|
|
15015
|
+
percentage: index / (options.length - 1) * 100,
|
|
15016
|
+
label: option.text,
|
|
15017
|
+
isLarge: true
|
|
15018
|
+
}))
|
|
15019
|
+
};
|
|
15020
|
+
}
|
|
15021
|
+
const numericMin = propMin != null ? propMin : 0;
|
|
15022
|
+
const numericMax = propMax != null ? propMax : 100;
|
|
15023
|
+
const numericStep = propStep != null ? propStep : numericMax - numericMin > 20 ? Math.ceil((numericMax - numericMin) / 20) : 1;
|
|
15024
|
+
const range = numericMax - numericMin;
|
|
15025
|
+
const totalSteps = Math.floor(range / numericStep);
|
|
15026
|
+
const smallTicks2 = [];
|
|
15027
|
+
if (totalSteps <= 100) {
|
|
15028
|
+
for (let i = 0; i <= totalSteps; i++) {
|
|
15029
|
+
const position = numericMin + i * numericStep;
|
|
15030
|
+
const percentage = (position - numericMin) / range * 100;
|
|
15031
|
+
smallTicks2.push({
|
|
15032
|
+
position,
|
|
15033
|
+
percentage,
|
|
15034
|
+
isLarge: false
|
|
15035
|
+
});
|
|
15036
|
+
}
|
|
15037
|
+
} else {
|
|
15038
|
+
const tickInterval = Math.ceil(totalSteps / 100);
|
|
15039
|
+
for (let i = 0; i <= totalSteps; i += tickInterval) {
|
|
15040
|
+
const position = numericMin + i * numericStep;
|
|
15041
|
+
const percentage = (position - numericMin) / range * 100;
|
|
15042
|
+
smallTicks2.push({
|
|
15043
|
+
position,
|
|
15044
|
+
percentage,
|
|
15045
|
+
isLarge: false
|
|
15046
|
+
});
|
|
15047
|
+
}
|
|
15048
|
+
}
|
|
15049
|
+
const largeTicks2 = [
|
|
15050
|
+
{ position: numericMin, percentage: 0, label: numericMin.toString(), isLarge: true },
|
|
15051
|
+
{ position: numericMax, percentage: 100, label: numericMax.toString(), isLarge: true }
|
|
15052
|
+
];
|
|
15053
|
+
if (range >= 20) {
|
|
15054
|
+
const middlePosition = numericMin + range / 2;
|
|
15055
|
+
largeTicks2.push({
|
|
15056
|
+
position: middlePosition,
|
|
15057
|
+
percentage: 50,
|
|
15058
|
+
label: Math.round(middlePosition).toString(),
|
|
15059
|
+
isLarge: true
|
|
15060
|
+
});
|
|
15061
|
+
}
|
|
15062
|
+
return {
|
|
15063
|
+
min: numericMin,
|
|
15064
|
+
max: numericMax,
|
|
15065
|
+
step: numericStep,
|
|
15066
|
+
smallTicks: smallTicks2,
|
|
15067
|
+
largeTicks: largeTicks2
|
|
15068
|
+
};
|
|
15069
|
+
}, [isOptionsMode, options, propMin, propMax, propStep]);
|
|
15070
|
+
const clampedValue = Math.min(Math.max(value, min), max);
|
|
15071
|
+
const handleSliderChange = (0, import_react148.useCallback)(
|
|
15072
|
+
(event) => {
|
|
15073
|
+
const newValue = Number(event.target.value);
|
|
15074
|
+
onChange(newValue);
|
|
15075
|
+
},
|
|
15076
|
+
[onChange]
|
|
15077
|
+
);
|
|
15078
|
+
const handleNumberInputChange = (0, import_react148.useCallback)(
|
|
15079
|
+
(event) => {
|
|
15080
|
+
const newValue = event.target.value === "" ? min : Number(event.target.value);
|
|
15081
|
+
onChange(newValue);
|
|
15082
|
+
},
|
|
15083
|
+
[onChange, min]
|
|
15084
|
+
);
|
|
15085
|
+
const fillPercentage = (clampedValue - min) / (max - min) * 100;
|
|
15086
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: container3, children: [
|
|
15087
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: sliderContainer, children: [
|
|
15088
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: sliderTrackContainer, children: [
|
|
15089
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: progressTrack, children: [
|
|
15090
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: progressTrackBackground }),
|
|
15091
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: progressTrackFill, style: { width: `${fillPercentage}%` } })
|
|
15092
|
+
] }),
|
|
15093
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15094
|
+
"input",
|
|
15095
|
+
{
|
|
15096
|
+
ref,
|
|
15097
|
+
type: "range",
|
|
15098
|
+
id,
|
|
15099
|
+
name,
|
|
15100
|
+
min,
|
|
15101
|
+
max,
|
|
15102
|
+
step,
|
|
15103
|
+
value: clampedValue,
|
|
15104
|
+
onChange: handleSliderChange,
|
|
15105
|
+
onBlur,
|
|
15106
|
+
disabled: disabled2,
|
|
15107
|
+
"aria-label": ariaLabel,
|
|
15108
|
+
css: slider
|
|
15109
|
+
}
|
|
15110
|
+
)
|
|
15111
|
+
] }),
|
|
15112
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: tickMarksContainer, children: [
|
|
15113
|
+
smallTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: tickMark, style: { left: `${tick.percentage}%` } }, `small-${index}`)),
|
|
15114
|
+
largeTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15115
|
+
"div",
|
|
15116
|
+
{
|
|
15117
|
+
css: largeTickMark,
|
|
15118
|
+
style: { left: `${tick.percentage}%` }
|
|
15119
|
+
},
|
|
15120
|
+
`large-${index}`
|
|
15121
|
+
))
|
|
15122
|
+
] }),
|
|
15123
|
+
largeTicks.some((tick) => tick.label) && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(SliderLabels, { ticks: largeTicks, currentValue: clampedValue })
|
|
15124
|
+
] }),
|
|
15125
|
+
showNumberInput && !isOptionsMode && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: numberInputContainer, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15126
|
+
"input",
|
|
15127
|
+
{
|
|
15128
|
+
type: "number",
|
|
15129
|
+
value: clampedValue,
|
|
15130
|
+
onChange: handleNumberInputChange,
|
|
15131
|
+
onBlur,
|
|
15132
|
+
disabled: disabled2,
|
|
15133
|
+
min,
|
|
15134
|
+
max,
|
|
15135
|
+
step,
|
|
15136
|
+
css: numberInput2
|
|
15137
|
+
}
|
|
15138
|
+
) })
|
|
15139
|
+
] });
|
|
15140
|
+
}
|
|
15141
|
+
);
|
|
15142
|
+
Slider.displayName = "Slider";
|
|
15143
|
+
|
|
15144
|
+
// src/components/ParameterInputs/ParameterNumberSlider.tsx
|
|
15145
|
+
var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
|
|
15146
|
+
var ParameterNumberSlider = (0, import_react149.forwardRef)(
|
|
15147
|
+
(props, ref) => {
|
|
15148
|
+
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15149
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ParameterShell, { "data-testid": "parameter-number-slider", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ParameterNumberSliderInner, { ref, ...innerProps }) });
|
|
15150
|
+
}
|
|
15151
|
+
);
|
|
15152
|
+
var ParameterNumberSliderInner = (0, import_react149.forwardRef)(({ ...props }, ref) => {
|
|
15153
|
+
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
15154
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
15155
|
+
Slider,
|
|
15156
|
+
{
|
|
15157
|
+
ref,
|
|
15158
|
+
id,
|
|
15159
|
+
"aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
|
|
15160
|
+
...props
|
|
15161
|
+
}
|
|
15162
|
+
);
|
|
15163
|
+
});
|
|
15164
|
+
ParameterNumberSlider.displayName = "ParameterNumberSlider";
|
|
15165
|
+
ParameterNumberSliderInner.displayName = "ParameterNumberSliderInner";
|
|
15166
|
+
|
|
14451
15167
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
14452
15168
|
init_emotion_jsx_shim();
|
|
14453
|
-
var
|
|
15169
|
+
var import_react163 = require("@emotion/react");
|
|
14454
15170
|
var import_list3 = require("@lexical/list");
|
|
14455
15171
|
var import_markdown = require("@lexical/markdown");
|
|
14456
15172
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
@@ -14587,7 +15303,7 @@ var defaultParameterConfiguration = {
|
|
|
14587
15303
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
14588
15304
|
var import_fast_equals2 = require("fast-equals");
|
|
14589
15305
|
var import_lexical10 = require("lexical");
|
|
14590
|
-
var
|
|
15306
|
+
var import_react164 = require("react");
|
|
14591
15307
|
|
|
14592
15308
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
14593
15309
|
init_emotion_jsx_shim();
|
|
@@ -14610,10 +15326,10 @@ init_emotion_jsx_shim();
|
|
|
14610
15326
|
var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
14611
15327
|
var import_utils4 = require("@lexical/utils");
|
|
14612
15328
|
var import_lexical = require("lexical");
|
|
14613
|
-
var
|
|
15329
|
+
var import_react150 = require("react");
|
|
14614
15330
|
function DisableStylesPlugin() {
|
|
14615
15331
|
const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
|
|
14616
|
-
(0,
|
|
15332
|
+
(0, import_react150.useEffect)(() => {
|
|
14617
15333
|
return (0, import_utils4.mergeRegister)(
|
|
14618
15334
|
// Disable text alignment on paragraph nodes
|
|
14619
15335
|
editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
|
|
@@ -14874,10 +15590,10 @@ init_emotion_jsx_shim();
|
|
|
14874
15590
|
var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
|
|
14875
15591
|
var import_utils5 = require("@lexical/utils");
|
|
14876
15592
|
var import_lexical2 = require("lexical");
|
|
14877
|
-
var
|
|
15593
|
+
var import_react151 = require("react");
|
|
14878
15594
|
var ImprovedAssetSelectionPlugin = () => {
|
|
14879
15595
|
const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
|
|
14880
|
-
(0,
|
|
15596
|
+
(0, import_react151.useEffect)(() => {
|
|
14881
15597
|
editor.getRootElement();
|
|
14882
15598
|
const onRootClick = (event) => {
|
|
14883
15599
|
if (event.target !== editor.getRootElement()) {
|
|
@@ -14926,13 +15642,13 @@ var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
|
|
|
14926
15642
|
|
|
14927
15643
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
14928
15644
|
init_emotion_jsx_shim();
|
|
14929
|
-
var
|
|
15645
|
+
var import_react152 = require("@emotion/react");
|
|
14930
15646
|
var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
|
|
14931
15647
|
var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
|
|
14932
15648
|
var import_utils6 = require("@lexical/utils");
|
|
14933
15649
|
var import_fast_equals = require("fast-equals");
|
|
14934
15650
|
var import_lexical4 = require("lexical");
|
|
14935
|
-
var
|
|
15651
|
+
var import_react153 = require("react");
|
|
14936
15652
|
|
|
14937
15653
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
14938
15654
|
init_emotion_jsx_shim();
|
|
@@ -14991,7 +15707,7 @@ var normalizeStateForDeepEqualComparison = (editorState) => {
|
|
|
14991
15707
|
};
|
|
14992
15708
|
|
|
14993
15709
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
14994
|
-
var
|
|
15710
|
+
var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
|
|
14995
15711
|
var isProjectMapLinkValue = (value) => {
|
|
14996
15712
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
14997
15713
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -15280,17 +15996,17 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical4.createCommand)(
|
|
|
15280
15996
|
);
|
|
15281
15997
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
15282
15998
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
15283
|
-
var linkPopover =
|
|
15999
|
+
var linkPopover = import_react152.css`
|
|
15284
16000
|
position: absolute;
|
|
15285
16001
|
z-index: 11;
|
|
15286
16002
|
`;
|
|
15287
|
-
var linkPopoverContainer =
|
|
16003
|
+
var linkPopoverContainer = import_react152.css`
|
|
15288
16004
|
${Popover};
|
|
15289
16005
|
${PopoverVariantSmall};
|
|
15290
16006
|
align-items: center;
|
|
15291
16007
|
display: flex;
|
|
15292
16008
|
`;
|
|
15293
|
-
var linkPopoverAnchor =
|
|
16009
|
+
var linkPopoverAnchor = import_react152.css`
|
|
15294
16010
|
${link}
|
|
15295
16011
|
${linkColorDefault}
|
|
15296
16012
|
`;
|
|
@@ -15303,17 +16019,17 @@ function LinkNodePlugin({
|
|
|
15303
16019
|
return path;
|
|
15304
16020
|
};
|
|
15305
16021
|
const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
|
|
15306
|
-
const [linkPopoverState, setLinkPopoverState] = (0,
|
|
15307
|
-
const linkPopoverElRef = (0,
|
|
15308
|
-
const [isEditorFocused, setIsEditorFocused] = (0,
|
|
15309
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0,
|
|
15310
|
-
(0,
|
|
16022
|
+
const [linkPopoverState, setLinkPopoverState] = (0, import_react153.useState)();
|
|
16023
|
+
const linkPopoverElRef = (0, import_react153.useRef)(null);
|
|
16024
|
+
const [isEditorFocused, setIsEditorFocused] = (0, import_react153.useState)(false);
|
|
16025
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react153.useState)(false);
|
|
16026
|
+
(0, import_react153.useEffect)(() => {
|
|
15311
16027
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
15312
16028
|
setLinkPopoverState(void 0);
|
|
15313
16029
|
return;
|
|
15314
16030
|
}
|
|
15315
16031
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
15316
|
-
(0,
|
|
16032
|
+
(0, import_react153.useEffect)(() => {
|
|
15317
16033
|
if (!editor.hasNodes([LinkNode])) {
|
|
15318
16034
|
throw new Error("LinkNode not registered on editor");
|
|
15319
16035
|
}
|
|
@@ -15417,7 +16133,7 @@ function LinkNodePlugin({
|
|
|
15417
16133
|
)
|
|
15418
16134
|
);
|
|
15419
16135
|
}, [editor, onConnectLink]);
|
|
15420
|
-
const maybeShowLinkToolbar = (0,
|
|
16136
|
+
const maybeShowLinkToolbar = (0, import_react153.useCallback)(() => {
|
|
15421
16137
|
if (!editor.isEditable()) {
|
|
15422
16138
|
return;
|
|
15423
16139
|
}
|
|
@@ -15451,7 +16167,7 @@ function LinkNodePlugin({
|
|
|
15451
16167
|
}
|
|
15452
16168
|
});
|
|
15453
16169
|
}, [editor, positioningAnchorEl]);
|
|
15454
|
-
(0,
|
|
16170
|
+
(0, import_react153.useEffect)(() => {
|
|
15455
16171
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
15456
16172
|
requestAnimationFrame(() => {
|
|
15457
16173
|
editorState.read(() => {
|
|
@@ -15478,8 +16194,8 @@ function LinkNodePlugin({
|
|
|
15478
16194
|
});
|
|
15479
16195
|
});
|
|
15480
16196
|
};
|
|
15481
|
-
return /* @__PURE__ */ (0,
|
|
15482
|
-
/* @__PURE__ */ (0,
|
|
16197
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
|
|
16198
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
15483
16199
|
import_LexicalNodeEventPlugin.NodeEventPlugin,
|
|
15484
16200
|
{
|
|
15485
16201
|
nodeType: LinkNode,
|
|
@@ -15489,7 +16205,7 @@ function LinkNodePlugin({
|
|
|
15489
16205
|
}
|
|
15490
16206
|
}
|
|
15491
16207
|
),
|
|
15492
|
-
linkPopoverState ? /* @__PURE__ */ (0,
|
|
16208
|
+
linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
15493
16209
|
"div",
|
|
15494
16210
|
{
|
|
15495
16211
|
css: linkPopover,
|
|
@@ -15498,8 +16214,8 @@ function LinkNodePlugin({
|
|
|
15498
16214
|
top: linkPopoverState.position.y
|
|
15499
16215
|
},
|
|
15500
16216
|
ref: linkPopoverElRef,
|
|
15501
|
-
children: /* @__PURE__ */ (0,
|
|
15502
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0,
|
|
16217
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: linkPopoverContainer, children: [
|
|
16218
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
15503
16219
|
"a",
|
|
15504
16220
|
{
|
|
15505
16221
|
href: parsePath(
|
|
@@ -15511,7 +16227,7 @@ function LinkNodePlugin({
|
|
|
15511
16227
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
15512
16228
|
}
|
|
15513
16229
|
),
|
|
15514
|
-
/* @__PURE__ */ (0,
|
|
16230
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
15515
16231
|
Button,
|
|
15516
16232
|
{
|
|
15517
16233
|
size: "xs",
|
|
@@ -15519,7 +16235,7 @@ function LinkNodePlugin({
|
|
|
15519
16235
|
onEditLinkNode(linkPopoverState.node);
|
|
15520
16236
|
},
|
|
15521
16237
|
buttonType: "ghost",
|
|
15522
|
-
children: /* @__PURE__ */ (0,
|
|
16238
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
15523
16239
|
}
|
|
15524
16240
|
)
|
|
15525
16241
|
] })
|
|
@@ -15539,7 +16255,7 @@ var import_list = require("@lexical/list");
|
|
|
15539
16255
|
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
15540
16256
|
var import_utils9 = require("@lexical/utils");
|
|
15541
16257
|
var import_lexical5 = require("lexical");
|
|
15542
|
-
var
|
|
16258
|
+
var import_react154 = require("react");
|
|
15543
16259
|
function isIndentPermitted(maxDepth) {
|
|
15544
16260
|
const selection = (0, import_lexical5.$getSelection)();
|
|
15545
16261
|
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
@@ -15594,8 +16310,8 @@ function $indentOverTab(selection) {
|
|
|
15594
16310
|
}
|
|
15595
16311
|
function ListIndentPlugin({ maxDepth }) {
|
|
15596
16312
|
const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
|
|
15597
|
-
const isInListItemNode = (0,
|
|
15598
|
-
(0,
|
|
16313
|
+
const isInListItemNode = (0, import_react154.useRef)(false);
|
|
16314
|
+
(0, import_react154.useEffect)(() => {
|
|
15599
16315
|
return editor.registerCommand(
|
|
15600
16316
|
import_lexical5.SELECTION_CHANGE_COMMAND,
|
|
15601
16317
|
() => {
|
|
@@ -15612,7 +16328,7 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
15612
16328
|
import_lexical5.COMMAND_PRIORITY_NORMAL
|
|
15613
16329
|
);
|
|
15614
16330
|
}, [editor]);
|
|
15615
|
-
(0,
|
|
16331
|
+
(0, import_react154.useEffect)(() => {
|
|
15616
16332
|
return (0, import_utils9.mergeRegister)(
|
|
15617
16333
|
editor.registerCommand(
|
|
15618
16334
|
import_lexical5.INDENT_CONTENT_COMMAND,
|
|
@@ -15642,13 +16358,13 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
15642
16358
|
|
|
15643
16359
|
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
15644
16360
|
init_emotion_jsx_shim();
|
|
15645
|
-
var
|
|
16361
|
+
var import_react155 = require("@emotion/react");
|
|
15646
16362
|
var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
|
|
15647
16363
|
var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
|
|
15648
16364
|
var import_table = require("@lexical/table");
|
|
15649
16365
|
var import_lexical6 = require("lexical");
|
|
15650
|
-
var
|
|
15651
|
-
var
|
|
16366
|
+
var import_react156 = require("react");
|
|
16367
|
+
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
15652
16368
|
function computeSelectionCount(selection) {
|
|
15653
16369
|
const selectionShape = selection.getShape();
|
|
15654
16370
|
return {
|
|
@@ -15656,21 +16372,21 @@ function computeSelectionCount(selection) {
|
|
|
15656
16372
|
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
15657
16373
|
};
|
|
15658
16374
|
}
|
|
15659
|
-
var tableActionMenuTrigger =
|
|
16375
|
+
var tableActionMenuTrigger = import_react155.css`
|
|
15660
16376
|
position: absolute;
|
|
15661
16377
|
transform: translate(calc(-100% - 1px), 1px);
|
|
15662
16378
|
`;
|
|
15663
|
-
var TableActionMenuTrigger = (0,
|
|
16379
|
+
var TableActionMenuTrigger = (0, import_react156.forwardRef)((props, ref) => {
|
|
15664
16380
|
const { tableCellEl, positioningAnchorEl, ...rest } = props;
|
|
15665
|
-
const [coordinates, setCoordinates] = (0,
|
|
15666
|
-
(0,
|
|
16381
|
+
const [coordinates, setCoordinates] = (0, import_react156.useState)({ x: 0, y: 0 });
|
|
16382
|
+
(0, import_react156.useLayoutEffect)(() => {
|
|
15667
16383
|
const rect = tableCellEl.getBoundingClientRect();
|
|
15668
16384
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
15669
16385
|
const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
|
|
15670
16386
|
const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
|
|
15671
16387
|
setCoordinates({ x: relativeX, y: relativeY });
|
|
15672
16388
|
}, [tableCellEl, positioningAnchorEl]);
|
|
15673
|
-
return /* @__PURE__ */ (0,
|
|
16389
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
15674
16390
|
IconButton,
|
|
15675
16391
|
{
|
|
15676
16392
|
ref,
|
|
@@ -15684,7 +16400,7 @@ var TableActionMenuTrigger = (0, import_react152.forwardRef)((props, ref) => {
|
|
|
15684
16400
|
size: "xs",
|
|
15685
16401
|
buttonType: "unimportant",
|
|
15686
16402
|
...rest,
|
|
15687
|
-
children: /* @__PURE__ */ (0,
|
|
16403
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
15688
16404
|
}
|
|
15689
16405
|
);
|
|
15690
16406
|
});
|
|
@@ -15696,16 +16412,16 @@ function TableActionMenu({
|
|
|
15696
16412
|
positioningAnchorEl
|
|
15697
16413
|
}) {
|
|
15698
16414
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
15699
|
-
const [tableCellNode, updateTableCellNode] = (0,
|
|
15700
|
-
const [selectionCounts, updateSelectionCounts] = (0,
|
|
16415
|
+
const [tableCellNode, updateTableCellNode] = (0, import_react156.useState)(_tableCellNode);
|
|
16416
|
+
const [selectionCounts, updateSelectionCounts] = (0, import_react156.useState)({
|
|
15701
16417
|
columns: 1,
|
|
15702
16418
|
rows: 1
|
|
15703
16419
|
});
|
|
15704
|
-
const [menuTriggerKey, setMenuTriggerKey] = (0,
|
|
16420
|
+
const [menuTriggerKey, setMenuTriggerKey] = (0, import_react156.useState)(0);
|
|
15705
16421
|
const incrementMenuTriggerKey = () => {
|
|
15706
16422
|
setMenuTriggerKey((key) => key += 1);
|
|
15707
16423
|
};
|
|
15708
|
-
(0,
|
|
16424
|
+
(0, import_react156.useEffect)(() => {
|
|
15709
16425
|
return editor.registerMutationListener(
|
|
15710
16426
|
import_table.TableCellNode,
|
|
15711
16427
|
(nodeMutations) => {
|
|
@@ -15719,7 +16435,7 @@ function TableActionMenu({
|
|
|
15719
16435
|
{ skipInitialization: true }
|
|
15720
16436
|
);
|
|
15721
16437
|
}, [editor, tableCellNode]);
|
|
15722
|
-
(0,
|
|
16438
|
+
(0, import_react156.useEffect)(() => {
|
|
15723
16439
|
editor.getEditorState().read(() => {
|
|
15724
16440
|
const selection = (0, import_lexical6.$getSelection)();
|
|
15725
16441
|
if ((0, import_table.$isTableSelection)(selection)) {
|
|
@@ -15727,7 +16443,7 @@ function TableActionMenu({
|
|
|
15727
16443
|
}
|
|
15728
16444
|
});
|
|
15729
16445
|
}, [editor]);
|
|
15730
|
-
const clearTableSelection = (0,
|
|
16446
|
+
const clearTableSelection = (0, import_react156.useCallback)(() => {
|
|
15731
16447
|
editor.update(() => {
|
|
15732
16448
|
if (tableCellNode.isAttached()) {
|
|
15733
16449
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
@@ -15748,7 +16464,7 @@ function TableActionMenu({
|
|
|
15748
16464
|
rootNode.selectStart();
|
|
15749
16465
|
});
|
|
15750
16466
|
}, [editor, tableCellNode]);
|
|
15751
|
-
const insertTableRowAtSelection = (0,
|
|
16467
|
+
const insertTableRowAtSelection = (0, import_react156.useCallback)(
|
|
15752
16468
|
(shouldInsertAfter) => {
|
|
15753
16469
|
editor.update(() => {
|
|
15754
16470
|
(0, import_table.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
|
|
@@ -15757,7 +16473,7 @@ function TableActionMenu({
|
|
|
15757
16473
|
},
|
|
15758
16474
|
[editor]
|
|
15759
16475
|
);
|
|
15760
|
-
const insertTableColumnAtSelection = (0,
|
|
16476
|
+
const insertTableColumnAtSelection = (0, import_react156.useCallback)(
|
|
15761
16477
|
(shouldInsertAfter) => {
|
|
15762
16478
|
editor.update(() => {
|
|
15763
16479
|
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
@@ -15768,26 +16484,26 @@ function TableActionMenu({
|
|
|
15768
16484
|
},
|
|
15769
16485
|
[editor, selectionCounts.columns]
|
|
15770
16486
|
);
|
|
15771
|
-
const deleteTableRowAtSelection = (0,
|
|
16487
|
+
const deleteTableRowAtSelection = (0, import_react156.useCallback)(() => {
|
|
15772
16488
|
editor.update(() => {
|
|
15773
16489
|
(0, import_table.$deleteTableRow__EXPERIMENTAL)();
|
|
15774
16490
|
});
|
|
15775
16491
|
incrementMenuTriggerKey();
|
|
15776
16492
|
}, [editor]);
|
|
15777
|
-
const deleteTableAtSelection = (0,
|
|
16493
|
+
const deleteTableAtSelection = (0, import_react156.useCallback)(() => {
|
|
15778
16494
|
editor.update(() => {
|
|
15779
16495
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
15780
16496
|
tableNode.remove();
|
|
15781
16497
|
clearTableSelection();
|
|
15782
16498
|
});
|
|
15783
16499
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
15784
|
-
const deleteTableColumnAtSelection = (0,
|
|
16500
|
+
const deleteTableColumnAtSelection = (0, import_react156.useCallback)(() => {
|
|
15785
16501
|
editor.update(() => {
|
|
15786
16502
|
(0, import_table.$deleteTableColumn__EXPERIMENTAL)();
|
|
15787
16503
|
});
|
|
15788
16504
|
incrementMenuTriggerKey();
|
|
15789
16505
|
}, [editor]);
|
|
15790
|
-
const toggleTableRowIsHeader = (0,
|
|
16506
|
+
const toggleTableRowIsHeader = (0, import_react156.useCallback)(() => {
|
|
15791
16507
|
editor.update(() => {
|
|
15792
16508
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
15793
16509
|
const tableRowIndex = (0, import_table.$getTableRowIndexFromTableCellNode)(tableCellNode);
|
|
@@ -15808,7 +16524,7 @@ function TableActionMenu({
|
|
|
15808
16524
|
clearTableSelection();
|
|
15809
16525
|
});
|
|
15810
16526
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
15811
|
-
const toggleTableColumnIsHeader = (0,
|
|
16527
|
+
const toggleTableColumnIsHeader = (0, import_react156.useCallback)(() => {
|
|
15812
16528
|
editor.update(() => {
|
|
15813
16529
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
15814
16530
|
const tableColumnIndex = (0, import_table.$getTableColumnIndexFromTableCellNode)(tableCellNode);
|
|
@@ -15835,13 +16551,13 @@ function TableActionMenu({
|
|
|
15835
16551
|
clearTableSelection();
|
|
15836
16552
|
});
|
|
15837
16553
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
15838
|
-
const menuItemCss = (0,
|
|
16554
|
+
const menuItemCss = (0, import_react155.css)({
|
|
15839
16555
|
fontSize: "var(--fs-sm)"
|
|
15840
16556
|
});
|
|
15841
|
-
return /* @__PURE__ */ (0,
|
|
16557
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
15842
16558
|
Menu,
|
|
15843
16559
|
{
|
|
15844
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
16560
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
15845
16561
|
TableActionMenuTrigger,
|
|
15846
16562
|
{
|
|
15847
16563
|
tableCellEl,
|
|
@@ -15852,7 +16568,7 @@ function TableActionMenu({
|
|
|
15852
16568
|
portalElement: menuPortalEl,
|
|
15853
16569
|
maxMenuHeight: "300px",
|
|
15854
16570
|
children: [
|
|
15855
|
-
/* @__PURE__ */ (0,
|
|
16571
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
15856
16572
|
MenuItem,
|
|
15857
16573
|
{
|
|
15858
16574
|
onClick: () => {
|
|
@@ -15866,33 +16582,33 @@ function TableActionMenu({
|
|
|
15866
16582
|
]
|
|
15867
16583
|
}
|
|
15868
16584
|
),
|
|
15869
|
-
/* @__PURE__ */ (0,
|
|
16585
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
|
|
15870
16586
|
"Insert ",
|
|
15871
16587
|
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
15872
16588
|
" below"
|
|
15873
16589
|
] }),
|
|
15874
|
-
/* @__PURE__ */ (0,
|
|
15875
|
-
/* @__PURE__ */ (0,
|
|
16590
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
|
|
16591
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
15876
16592
|
"Insert ",
|
|
15877
16593
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
15878
16594
|
" left"
|
|
15879
16595
|
] }),
|
|
15880
|
-
/* @__PURE__ */ (0,
|
|
16596
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
|
|
15881
16597
|
"Insert ",
|
|
15882
16598
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
15883
16599
|
" right"
|
|
15884
16600
|
] }),
|
|
15885
|
-
/* @__PURE__ */ (0,
|
|
15886
|
-
/* @__PURE__ */ (0,
|
|
15887
|
-
/* @__PURE__ */ (0,
|
|
15888
|
-
/* @__PURE__ */ (0,
|
|
15889
|
-
/* @__PURE__ */ (0,
|
|
15890
|
-
/* @__PURE__ */ (0,
|
|
16601
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
|
|
16602
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
16603
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
16604
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
16605
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
|
|
16606
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
15891
16607
|
(tableCellNode.__headerState & import_table.TableCellHeaderStates.ROW) === import_table.TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
15892
16608
|
" ",
|
|
15893
16609
|
"row header"
|
|
15894
16610
|
] }),
|
|
15895
|
-
/* @__PURE__ */ (0,
|
|
16611
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
|
|
15896
16612
|
(tableCellNode.__headerState & import_table.TableCellHeaderStates.COLUMN) === import_table.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
|
|
15897
16613
|
" ",
|
|
15898
16614
|
"column header"
|
|
@@ -15906,10 +16622,10 @@ function TableCellActionMenuContainer({
|
|
|
15906
16622
|
positioningAnchorEl
|
|
15907
16623
|
}) {
|
|
15908
16624
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
15909
|
-
const [tableCellNode, setTableMenuCellNode] = (0,
|
|
15910
|
-
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0,
|
|
15911
|
-
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0,
|
|
15912
|
-
(0,
|
|
16625
|
+
const [tableCellNode, setTableMenuCellNode] = (0, import_react156.useState)(null);
|
|
16626
|
+
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react156.useState)(null);
|
|
16627
|
+
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react156.useState)(null);
|
|
16628
|
+
(0, import_react156.useEffect)(() => {
|
|
15913
16629
|
const newPortalEl = document.createElement("div");
|
|
15914
16630
|
setTableMenuCellMenuPortalEl(newPortalEl);
|
|
15915
16631
|
menuPortalEl.appendChild(newPortalEl);
|
|
@@ -15917,14 +16633,14 @@ function TableCellActionMenuContainer({
|
|
|
15917
16633
|
newPortalEl.remove();
|
|
15918
16634
|
};
|
|
15919
16635
|
}, [menuPortalEl]);
|
|
15920
|
-
const setTableMenuCellNodeElem = (0,
|
|
16636
|
+
const setTableMenuCellNodeElem = (0, import_react156.useCallback)((elem) => {
|
|
15921
16637
|
if (elem) {
|
|
15922
16638
|
_setTableMenuCellNodeEl(elem);
|
|
15923
16639
|
} else {
|
|
15924
16640
|
_setTableMenuCellNodeEl(null);
|
|
15925
16641
|
}
|
|
15926
16642
|
}, []);
|
|
15927
|
-
const $moveMenu = (0,
|
|
16643
|
+
const $moveMenu = (0, import_react156.useCallback)(() => {
|
|
15928
16644
|
const selection = (0, import_lexical6.$getSelection)();
|
|
15929
16645
|
const nativeSelection = window.getSelection();
|
|
15930
16646
|
const activeElement = document.activeElement;
|
|
@@ -15953,14 +16669,14 @@ function TableCellActionMenuContainer({
|
|
|
15953
16669
|
setTableMenuCellNodeElem(null);
|
|
15954
16670
|
}
|
|
15955
16671
|
}, [editor, setTableMenuCellNodeElem]);
|
|
15956
|
-
(0,
|
|
16672
|
+
(0, import_react156.useEffect)(() => {
|
|
15957
16673
|
return editor.registerUpdateListener(() => {
|
|
15958
16674
|
editor.getEditorState().read(() => {
|
|
15959
16675
|
$moveMenu();
|
|
15960
16676
|
});
|
|
15961
16677
|
});
|
|
15962
16678
|
});
|
|
15963
|
-
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0,
|
|
16679
|
+
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
15964
16680
|
TableActionMenu,
|
|
15965
16681
|
{
|
|
15966
16682
|
tableCellNode,
|
|
@@ -15976,23 +16692,23 @@ function TableActionMenuPlugin({
|
|
|
15976
16692
|
menuPortalEl
|
|
15977
16693
|
}) {
|
|
15978
16694
|
const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
|
|
15979
|
-
return isEditable ? /* @__PURE__ */ (0,
|
|
16695
|
+
return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
|
|
15980
16696
|
}
|
|
15981
16697
|
|
|
15982
16698
|
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
15983
16699
|
init_emotion_jsx_shim();
|
|
15984
|
-
var
|
|
16700
|
+
var import_react157 = require("@emotion/react");
|
|
15985
16701
|
var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
|
|
15986
16702
|
var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
|
|
15987
16703
|
var import_table2 = require("@lexical/table");
|
|
15988
16704
|
var import_utils11 = require("@lexical/utils");
|
|
15989
16705
|
var import_lexical7 = require("lexical");
|
|
15990
|
-
var
|
|
16706
|
+
var import_react158 = require("react");
|
|
15991
16707
|
var import_react_dom3 = require("react-dom");
|
|
15992
|
-
var
|
|
16708
|
+
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
15993
16709
|
var MIN_ROW_HEIGHT = 33;
|
|
15994
16710
|
var MIN_COLUMN_WIDTH = 50;
|
|
15995
|
-
var tableResizer =
|
|
16711
|
+
var tableResizer = import_react157.css`
|
|
15996
16712
|
position: absolute;
|
|
15997
16713
|
z-index: var(--z-10);
|
|
15998
16714
|
`;
|
|
@@ -16014,15 +16730,15 @@ var fixedGetDOMCellFromTarget = (node) => {
|
|
|
16014
16730
|
return null;
|
|
16015
16731
|
};
|
|
16016
16732
|
function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
16017
|
-
const targetRef = (0,
|
|
16018
|
-
const resizerRef = (0,
|
|
16019
|
-
const tableRectRef = (0,
|
|
16020
|
-
const mouseStartPosRef = (0,
|
|
16021
|
-
const [mouseCurrentPos, updateMouseCurrentPos] = (0,
|
|
16022
|
-
const [activeCell, updateActiveCell] = (0,
|
|
16023
|
-
const [isMouseDown, updateIsMouseDown] = (0,
|
|
16024
|
-
const [draggingDirection, updateDraggingDirection] = (0,
|
|
16025
|
-
const resetState = (0,
|
|
16733
|
+
const targetRef = (0, import_react158.useRef)(null);
|
|
16734
|
+
const resizerRef = (0, import_react158.useRef)(null);
|
|
16735
|
+
const tableRectRef = (0, import_react158.useRef)(null);
|
|
16736
|
+
const mouseStartPosRef = (0, import_react158.useRef)(null);
|
|
16737
|
+
const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react158.useState)(null);
|
|
16738
|
+
const [activeCell, updateActiveCell] = (0, import_react158.useState)(null);
|
|
16739
|
+
const [isMouseDown, updateIsMouseDown] = (0, import_react158.useState)(false);
|
|
16740
|
+
const [draggingDirection, updateDraggingDirection] = (0, import_react158.useState)(null);
|
|
16741
|
+
const resetState = (0, import_react158.useCallback)(() => {
|
|
16026
16742
|
updateActiveCell(null);
|
|
16027
16743
|
targetRef.current = null;
|
|
16028
16744
|
updateDraggingDirection(null);
|
|
@@ -16032,7 +16748,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16032
16748
|
const isMouseDownOnEvent = (event) => {
|
|
16033
16749
|
return (event.buttons & 1) === 1;
|
|
16034
16750
|
};
|
|
16035
|
-
(0,
|
|
16751
|
+
(0, import_react158.useEffect)(() => {
|
|
16036
16752
|
const onMouseMove = (event) => {
|
|
16037
16753
|
setTimeout(() => {
|
|
16038
16754
|
const target = event.target;
|
|
@@ -16099,7 +16815,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16099
16815
|
}
|
|
16100
16816
|
return false;
|
|
16101
16817
|
};
|
|
16102
|
-
const updateRowHeight = (0,
|
|
16818
|
+
const updateRowHeight = (0, import_react158.useCallback)(
|
|
16103
16819
|
(heightChange) => {
|
|
16104
16820
|
if (!activeCell) {
|
|
16105
16821
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
@@ -16161,7 +16877,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16161
16877
|
}
|
|
16162
16878
|
}
|
|
16163
16879
|
};
|
|
16164
|
-
const updateColumnWidth = (0,
|
|
16880
|
+
const updateColumnWidth = (0, import_react158.useCallback)(
|
|
16165
16881
|
(widthChange) => {
|
|
16166
16882
|
if (!activeCell) {
|
|
16167
16883
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
@@ -16195,7 +16911,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16195
16911
|
},
|
|
16196
16912
|
[activeCell, editor]
|
|
16197
16913
|
);
|
|
16198
|
-
const mouseUpHandler = (0,
|
|
16914
|
+
const mouseUpHandler = (0, import_react158.useCallback)(
|
|
16199
16915
|
(direction) => {
|
|
16200
16916
|
const handler = (event) => {
|
|
16201
16917
|
event.preventDefault();
|
|
@@ -16224,7 +16940,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16224
16940
|
},
|
|
16225
16941
|
[activeCell, resetState, updateColumnWidth, updateRowHeight]
|
|
16226
16942
|
);
|
|
16227
|
-
const toggleResize = (0,
|
|
16943
|
+
const toggleResize = (0, import_react158.useCallback)(
|
|
16228
16944
|
(direction) => (event) => {
|
|
16229
16945
|
event.preventDefault();
|
|
16230
16946
|
event.stopPropagation();
|
|
@@ -16241,7 +16957,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16241
16957
|
},
|
|
16242
16958
|
[activeCell, mouseUpHandler]
|
|
16243
16959
|
);
|
|
16244
|
-
const getResizers = (0,
|
|
16960
|
+
const getResizers = (0, import_react158.useCallback)(() => {
|
|
16245
16961
|
if (activeCell) {
|
|
16246
16962
|
const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
|
|
16247
16963
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
@@ -16290,8 +17006,8 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16290
17006
|
};
|
|
16291
17007
|
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
16292
17008
|
const resizerStyles = getResizers();
|
|
16293
|
-
return /* @__PURE__ */ (0,
|
|
16294
|
-
/* @__PURE__ */ (0,
|
|
17009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
|
|
17010
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
16295
17011
|
"div",
|
|
16296
17012
|
{
|
|
16297
17013
|
css: tableResizer,
|
|
@@ -16299,7 +17015,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16299
17015
|
onMouseDown: toggleResize("right")
|
|
16300
17016
|
}
|
|
16301
17017
|
),
|
|
16302
|
-
/* @__PURE__ */ (0,
|
|
17018
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
16303
17019
|
"div",
|
|
16304
17020
|
{
|
|
16305
17021
|
css: tableResizer,
|
|
@@ -16312,9 +17028,9 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16312
17028
|
function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
16313
17029
|
const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
|
|
16314
17030
|
const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
|
|
16315
|
-
return (0,
|
|
17031
|
+
return (0, import_react158.useMemo)(
|
|
16316
17032
|
() => isEditable ? (0, import_react_dom3.createPortal)(
|
|
16317
|
-
/* @__PURE__ */ (0,
|
|
17033
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
|
|
16318
17034
|
positioningAnchorEl
|
|
16319
17035
|
) : null,
|
|
16320
17036
|
[editor, isEditable, positioningAnchorEl]
|
|
@@ -16326,11 +17042,11 @@ init_emotion_jsx_shim();
|
|
|
16326
17042
|
var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
|
|
16327
17043
|
var import_table3 = require("@lexical/table");
|
|
16328
17044
|
var import_lexical8 = require("lexical");
|
|
16329
|
-
var
|
|
17045
|
+
var import_react159 = require("react");
|
|
16330
17046
|
var TableSelectionPlugin = () => {
|
|
16331
17047
|
const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
|
|
16332
|
-
const [closestTableCellNode, setClosestTableCellNode] = (0,
|
|
16333
|
-
(0,
|
|
17048
|
+
const [closestTableCellNode, setClosestTableCellNode] = (0, import_react159.useState)(null);
|
|
17049
|
+
(0, import_react159.useEffect)(() => {
|
|
16334
17050
|
return editor.registerCommand(
|
|
16335
17051
|
import_lexical8.SELECTION_CHANGE_COMMAND,
|
|
16336
17052
|
() => {
|
|
@@ -16352,7 +17068,7 @@ var TableSelectionPlugin = () => {
|
|
|
16352
17068
|
import_lexical8.COMMAND_PRIORITY_NORMAL
|
|
16353
17069
|
);
|
|
16354
17070
|
}, [editor]);
|
|
16355
|
-
(0,
|
|
17071
|
+
(0, import_react159.useEffect)(() => {
|
|
16356
17072
|
const onControlA = (event) => {
|
|
16357
17073
|
if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
|
|
16358
17074
|
if (!closestTableCellNode) {
|
|
@@ -16376,7 +17092,7 @@ var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
|
16376
17092
|
|
|
16377
17093
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
16378
17094
|
init_emotion_jsx_shim();
|
|
16379
|
-
var
|
|
17095
|
+
var import_react161 = require("@emotion/react");
|
|
16380
17096
|
var import_code2 = require("@lexical/code");
|
|
16381
17097
|
var import_list2 = require("@lexical/list");
|
|
16382
17098
|
var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
|
|
@@ -16385,7 +17101,7 @@ var import_selection2 = require("@lexical/selection");
|
|
|
16385
17101
|
var import_table4 = require("@lexical/table");
|
|
16386
17102
|
var import_utils12 = require("@lexical/utils");
|
|
16387
17103
|
var import_lexical9 = require("lexical");
|
|
16388
|
-
var
|
|
17104
|
+
var import_react162 = require("react");
|
|
16389
17105
|
|
|
16390
17106
|
// src/components/ParameterInputs/rich-text/toolbar/constants.ts
|
|
16391
17107
|
init_emotion_jsx_shim();
|
|
@@ -16403,29 +17119,29 @@ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
|
16403
17119
|
|
|
16404
17120
|
// src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
|
|
16405
17121
|
init_emotion_jsx_shim();
|
|
16406
|
-
var
|
|
17122
|
+
var import_react160 = require("react");
|
|
16407
17123
|
var useRichTextToolbarState = ({ config }) => {
|
|
16408
17124
|
var _a;
|
|
16409
|
-
const enabledBuiltInFormats = (0,
|
|
17125
|
+
const enabledBuiltInFormats = (0, import_react160.useMemo)(() => {
|
|
16410
17126
|
return richTextBuiltInFormats.filter((format) => {
|
|
16411
17127
|
var _a2, _b;
|
|
16412
17128
|
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
16413
17129
|
});
|
|
16414
17130
|
}, [config]);
|
|
16415
|
-
const enabledBuiltInElements = (0,
|
|
17131
|
+
const enabledBuiltInElements = (0, import_react160.useMemo)(() => {
|
|
16416
17132
|
return richTextBuiltInElements.filter((element) => {
|
|
16417
17133
|
var _a2, _b;
|
|
16418
17134
|
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
16419
17135
|
});
|
|
16420
17136
|
}, [config]);
|
|
16421
|
-
const enabledBuiltInFormatsWithIcon = (0,
|
|
17137
|
+
const enabledBuiltInFormatsWithIcon = (0, import_react160.useMemo)(() => {
|
|
16422
17138
|
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
16423
17139
|
}, [enabledBuiltInFormats]);
|
|
16424
17140
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
16425
17141
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
16426
17142
|
);
|
|
16427
|
-
const [activeFormats, setActiveFormats] = (0,
|
|
16428
|
-
const visibleFormatsWithIcon = (0,
|
|
17143
|
+
const [activeFormats, setActiveFormats] = (0, import_react160.useState)([]);
|
|
17144
|
+
const visibleFormatsWithIcon = (0, import_react160.useMemo)(() => {
|
|
16429
17145
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
16430
17146
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
16431
17147
|
visibleFormats.add(type);
|
|
@@ -16435,7 +17151,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
16435
17151
|
});
|
|
16436
17152
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
16437
17153
|
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
16438
|
-
const visibleFormatsWithoutIcon = (0,
|
|
17154
|
+
const visibleFormatsWithoutIcon = (0, import_react160.useMemo)(() => {
|
|
16439
17155
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
16440
17156
|
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
16441
17157
|
visibleFormats.add(type);
|
|
@@ -16445,11 +17161,11 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
16445
17161
|
});
|
|
16446
17162
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
16447
17163
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
16448
|
-
const [activeElement, setActiveElement] = (0,
|
|
17164
|
+
const [activeElement, setActiveElement] = (0, import_react160.useState)("paragraph");
|
|
16449
17165
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
16450
17166
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
16451
17167
|
);
|
|
16452
|
-
const visibleTextualElements = (0,
|
|
17168
|
+
const visibleTextualElements = (0, import_react160.useMemo)(() => {
|
|
16453
17169
|
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
16454
17170
|
return enabledTextualElements;
|
|
16455
17171
|
}
|
|
@@ -16460,30 +17176,30 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
16460
17176
|
}
|
|
16461
17177
|
);
|
|
16462
17178
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
16463
|
-
const [isLink, setIsLink] = (0,
|
|
16464
|
-
const linkElementVisible = (0,
|
|
17179
|
+
const [isLink, setIsLink] = (0, import_react160.useState)(false);
|
|
17180
|
+
const linkElementVisible = (0, import_react160.useMemo)(() => {
|
|
16465
17181
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
16466
17182
|
}, [isLink, enabledBuiltInElements]);
|
|
16467
|
-
const visibleLists = (0,
|
|
17183
|
+
const visibleLists = (0, import_react160.useMemo)(() => {
|
|
16468
17184
|
return new Set(
|
|
16469
17185
|
["orderedList", "unorderedList"].filter(
|
|
16470
17186
|
(type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
|
|
16471
17187
|
)
|
|
16472
17188
|
);
|
|
16473
17189
|
}, [activeElement, enabledBuiltInElements]);
|
|
16474
|
-
const quoteElementVisible = (0,
|
|
17190
|
+
const quoteElementVisible = (0, import_react160.useMemo)(() => {
|
|
16475
17191
|
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
16476
17192
|
}, [activeElement, enabledBuiltInElements]);
|
|
16477
|
-
const codeElementVisible = (0,
|
|
17193
|
+
const codeElementVisible = (0, import_react160.useMemo)(() => {
|
|
16478
17194
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
16479
17195
|
}, [activeElement, enabledBuiltInElements]);
|
|
16480
|
-
const tableElementVisible = (0,
|
|
17196
|
+
const tableElementVisible = (0, import_react160.useMemo)(() => {
|
|
16481
17197
|
return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
|
|
16482
17198
|
}, [activeElement, enabledBuiltInElements]);
|
|
16483
|
-
const assetElementVisible = (0,
|
|
17199
|
+
const assetElementVisible = (0, import_react160.useMemo)(() => {
|
|
16484
17200
|
return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
|
|
16485
17201
|
}, [activeElement, enabledBuiltInElements]);
|
|
16486
|
-
const visibleElementsWithIcons = (0,
|
|
17202
|
+
const visibleElementsWithIcons = (0, import_react160.useMemo)(() => {
|
|
16487
17203
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
16488
17204
|
if (linkElementVisible) {
|
|
16489
17205
|
visibleElements.add("link");
|
|
@@ -16495,7 +17211,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
16495
17211
|
}
|
|
16496
17212
|
return visibleElements;
|
|
16497
17213
|
}, [linkElementVisible, visibleLists]);
|
|
16498
|
-
const visibleInsertElementsWithIcons = (0,
|
|
17214
|
+
const visibleInsertElementsWithIcons = (0, import_react160.useMemo)(() => {
|
|
16499
17215
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
16500
17216
|
if (quoteElementVisible) {
|
|
16501
17217
|
visibleElements.add("quote");
|
|
@@ -16533,8 +17249,8 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
16533
17249
|
};
|
|
16534
17250
|
|
|
16535
17251
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
16536
|
-
var
|
|
16537
|
-
var toolbar =
|
|
17252
|
+
var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
|
|
17253
|
+
var toolbar = import_react161.css`
|
|
16538
17254
|
${scrollbarStyles}
|
|
16539
17255
|
background: var(--gray-50);
|
|
16540
17256
|
border-radius: var(--rounded-base);
|
|
@@ -16548,7 +17264,7 @@ var toolbar = import_react157.css`
|
|
|
16548
17264
|
top: calc(var(--spacing-sm) * -2);
|
|
16549
17265
|
z-index: 10;
|
|
16550
17266
|
`;
|
|
16551
|
-
var toolbarGroup =
|
|
17267
|
+
var toolbarGroup = import_react161.css`
|
|
16552
17268
|
display: flex;
|
|
16553
17269
|
flex-shrink: 0;
|
|
16554
17270
|
gap: var(--spacing-xs);
|
|
@@ -16565,7 +17281,7 @@ var toolbarGroup = import_react157.css`
|
|
|
16565
17281
|
width: 1px;
|
|
16566
17282
|
}
|
|
16567
17283
|
`;
|
|
16568
|
-
var richTextToolbarButton =
|
|
17284
|
+
var richTextToolbarButton = import_react161.css`
|
|
16569
17285
|
align-items: center;
|
|
16570
17286
|
appearance: none;
|
|
16571
17287
|
border: 0;
|
|
@@ -16579,21 +17295,21 @@ var richTextToolbarButton = import_react157.css`
|
|
|
16579
17295
|
min-width: 32px;
|
|
16580
17296
|
padding: 0 var(--spacing-sm);
|
|
16581
17297
|
`;
|
|
16582
|
-
var richTextToolbarButtonActive =
|
|
17298
|
+
var richTextToolbarButtonActive = import_react161.css`
|
|
16583
17299
|
background: var(--gray-200);
|
|
16584
17300
|
`;
|
|
16585
|
-
var textStyleButton =
|
|
17301
|
+
var textStyleButton = import_react161.css`
|
|
16586
17302
|
justify-content: space-between;
|
|
16587
17303
|
min-width: 7rem;
|
|
16588
17304
|
`;
|
|
16589
|
-
var toolbarIcon =
|
|
17305
|
+
var toolbarIcon = import_react161.css`
|
|
16590
17306
|
color: inherit;
|
|
16591
17307
|
`;
|
|
16592
|
-
var toolbarChevron =
|
|
17308
|
+
var toolbarChevron = import_react161.css`
|
|
16593
17309
|
margin-left: var(--spacing-xs);
|
|
16594
17310
|
`;
|
|
16595
17311
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
16596
|
-
return /* @__PURE__ */ (0,
|
|
17312
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
16597
17313
|
};
|
|
16598
17314
|
var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
|
|
16599
17315
|
const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
|
|
@@ -16649,7 +17365,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16649
17365
|
});
|
|
16650
17366
|
});
|
|
16651
17367
|
};
|
|
16652
|
-
const updateToolbar = (0,
|
|
17368
|
+
const updateToolbar = (0, import_react162.useCallback)(() => {
|
|
16653
17369
|
const selection = (0, import_lexical9.$getSelection)();
|
|
16654
17370
|
if (!(0, import_lexical9.$isRangeSelection)(selection)) {
|
|
16655
17371
|
return;
|
|
@@ -16688,7 +17404,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16688
17404
|
setIsLink(false);
|
|
16689
17405
|
}
|
|
16690
17406
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
16691
|
-
(0,
|
|
17407
|
+
(0, import_react162.useEffect)(() => {
|
|
16692
17408
|
return editor.registerCommand(
|
|
16693
17409
|
import_lexical9.SELECTION_CHANGE_COMMAND,
|
|
16694
17410
|
(_payload) => {
|
|
@@ -16698,7 +17414,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16698
17414
|
import_lexical9.COMMAND_PRIORITY_CRITICAL
|
|
16699
17415
|
);
|
|
16700
17416
|
}, [editor, updateToolbar]);
|
|
16701
|
-
(0,
|
|
17417
|
+
(0, import_react162.useEffect)(() => {
|
|
16702
17418
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
16703
17419
|
requestAnimationFrame(() => {
|
|
16704
17420
|
editorState.read(() => {
|
|
@@ -16707,14 +17423,14 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16707
17423
|
});
|
|
16708
17424
|
});
|
|
16709
17425
|
}, [editor, updateToolbar]);
|
|
16710
|
-
return /* @__PURE__ */ (0,
|
|
16711
|
-
/* @__PURE__ */ (0,
|
|
17426
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
|
|
17427
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
|
|
16712
17428
|
Menu,
|
|
16713
17429
|
{
|
|
16714
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
17430
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
|
|
16715
17431
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
16716
17432
|
" ",
|
|
16717
|
-
/* @__PURE__ */ (0,
|
|
17433
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
16718
17434
|
] }),
|
|
16719
17435
|
placement: "bottom-start",
|
|
16720
17436
|
children: [
|
|
@@ -16724,7 +17440,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16724
17440
|
type: "paragraph"
|
|
16725
17441
|
},
|
|
16726
17442
|
...visibleTextualElements
|
|
16727
|
-
].map((element) => /* @__PURE__ */ (0,
|
|
17443
|
+
].map((element) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16728
17444
|
MenuItem,
|
|
16729
17445
|
{
|
|
16730
17446
|
"data-testid": "menu-item",
|
|
@@ -16735,12 +17451,12 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16735
17451
|
},
|
|
16736
17452
|
element.type
|
|
16737
17453
|
)),
|
|
16738
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0,
|
|
17454
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
16739
17455
|
]
|
|
16740
17456
|
}
|
|
16741
17457
|
),
|
|
16742
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
16743
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0,
|
|
17458
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
|
|
17459
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16744
17460
|
"button",
|
|
16745
17461
|
{
|
|
16746
17462
|
"data-testid": `formatting-button-${format.type}`,
|
|
@@ -16752,15 +17468,15 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16752
17468
|
richTextToolbarButton,
|
|
16753
17469
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
16754
17470
|
],
|
|
16755
|
-
children: /* @__PURE__ */ (0,
|
|
17471
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
16756
17472
|
}
|
|
16757
17473
|
) }, format.type)),
|
|
16758
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
17474
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16759
17475
|
Menu,
|
|
16760
17476
|
{
|
|
16761
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
17477
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
16762
17478
|
placement: "bottom-start",
|
|
16763
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0,
|
|
17479
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16764
17480
|
MenuItem,
|
|
16765
17481
|
{
|
|
16766
17482
|
onClick: () => {
|
|
@@ -16773,8 +17489,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16773
17489
|
}
|
|
16774
17490
|
) : null
|
|
16775
17491
|
] }) : null,
|
|
16776
|
-
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0,
|
|
16777
|
-
linkElementVisible ? /* @__PURE__ */ (0,
|
|
17492
|
+
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
|
|
17493
|
+
linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16778
17494
|
"button",
|
|
16779
17495
|
{
|
|
16780
17496
|
"data-testid": "element-link",
|
|
@@ -16787,11 +17503,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16787
17503
|
}
|
|
16788
17504
|
},
|
|
16789
17505
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
16790
|
-
children: /* @__PURE__ */ (0,
|
|
17506
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(RichTextToolbarIcon, { icon: "link" })
|
|
16791
17507
|
}
|
|
16792
17508
|
) }) : null,
|
|
16793
|
-
visibleLists.size > 0 ? /* @__PURE__ */ (0,
|
|
16794
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0,
|
|
17509
|
+
visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
|
|
17510
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16795
17511
|
"button",
|
|
16796
17512
|
{
|
|
16797
17513
|
"data-testid": "element-unordered-list",
|
|
@@ -16807,10 +17523,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16807
17523
|
richTextToolbarButton,
|
|
16808
17524
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
16809
17525
|
],
|
|
16810
|
-
children: /* @__PURE__ */ (0,
|
|
17526
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
|
|
16811
17527
|
}
|
|
16812
17528
|
) }) : null,
|
|
16813
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */ (0,
|
|
17529
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16814
17530
|
"button",
|
|
16815
17531
|
{
|
|
16816
17532
|
"data-testid": "element-ordered-list",
|
|
@@ -16826,58 +17542,58 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16826
17542
|
richTextToolbarButton,
|
|
16827
17543
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
16828
17544
|
],
|
|
16829
|
-
children: /* @__PURE__ */ (0,
|
|
17545
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
16830
17546
|
}
|
|
16831
17547
|
) }) : null
|
|
16832
17548
|
] }) : null,
|
|
16833
17549
|
customControls ? customControls : null
|
|
16834
17550
|
] }) : null,
|
|
16835
|
-
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0,
|
|
17551
|
+
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
|
|
16836
17552
|
Menu,
|
|
16837
17553
|
{
|
|
16838
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
17554
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
|
|
16839
17555
|
"Insert",
|
|
16840
|
-
/* @__PURE__ */ (0,
|
|
17556
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
16841
17557
|
] }),
|
|
16842
17558
|
placement: "bottom-start",
|
|
16843
17559
|
children: [
|
|
16844
|
-
quoteElementVisible ? /* @__PURE__ */ (0,
|
|
17560
|
+
quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16845
17561
|
MenuItem,
|
|
16846
17562
|
{
|
|
16847
17563
|
onClick: () => {
|
|
16848
17564
|
onSelectElement("quote");
|
|
16849
17565
|
},
|
|
16850
|
-
icon: /* @__PURE__ */ (0,
|
|
17566
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
16851
17567
|
children: "Quote"
|
|
16852
17568
|
}
|
|
16853
17569
|
) : null,
|
|
16854
|
-
codeElementVisible ? /* @__PURE__ */ (0,
|
|
17570
|
+
codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16855
17571
|
MenuItem,
|
|
16856
17572
|
{
|
|
16857
17573
|
onClick: () => {
|
|
16858
17574
|
onSelectElement("code");
|
|
16859
17575
|
},
|
|
16860
|
-
icon: /* @__PURE__ */ (0,
|
|
17576
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
16861
17577
|
children: "Code"
|
|
16862
17578
|
}
|
|
16863
17579
|
) : null,
|
|
16864
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0,
|
|
17580
|
+
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16865
17581
|
MenuItem,
|
|
16866
17582
|
{
|
|
16867
17583
|
onClick: () => {
|
|
16868
17584
|
onSelectElement("table");
|
|
16869
17585
|
},
|
|
16870
|
-
icon: /* @__PURE__ */ (0,
|
|
17586
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
16871
17587
|
children: "Table"
|
|
16872
17588
|
}
|
|
16873
17589
|
) : null,
|
|
16874
|
-
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0,
|
|
17590
|
+
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16875
17591
|
MenuItem,
|
|
16876
17592
|
{
|
|
16877
17593
|
onClick: () => {
|
|
16878
17594
|
onSelectElement("asset");
|
|
16879
17595
|
},
|
|
16880
|
-
icon: /* @__PURE__ */ (0,
|
|
17596
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "image", iconColor: "currentColor" }),
|
|
16881
17597
|
children: "Asset"
|
|
16882
17598
|
}
|
|
16883
17599
|
) : null
|
|
@@ -16889,9 +17605,9 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16889
17605
|
var RichTextToolbar_default = RichTextToolbar;
|
|
16890
17606
|
|
|
16891
17607
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
16892
|
-
var
|
|
17608
|
+
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
16893
17609
|
var ParameterRichText = ({
|
|
16894
|
-
label,
|
|
17610
|
+
label: label2,
|
|
16895
17611
|
labelLeadingIcon,
|
|
16896
17612
|
hiddenLabel,
|
|
16897
17613
|
id,
|
|
@@ -16903,11 +17619,11 @@ var ParameterRichText = ({
|
|
|
16903
17619
|
children,
|
|
16904
17620
|
...innerProps
|
|
16905
17621
|
}) => {
|
|
16906
|
-
return /* @__PURE__ */ (0,
|
|
17622
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
|
|
16907
17623
|
ParameterShell,
|
|
16908
17624
|
{
|
|
16909
17625
|
"data-testid": "parameter-richtext",
|
|
16910
|
-
label,
|
|
17626
|
+
label: label2,
|
|
16911
17627
|
hiddenLabel,
|
|
16912
17628
|
labelLeadingIcon,
|
|
16913
17629
|
id,
|
|
@@ -16917,13 +17633,13 @@ var ParameterRichText = ({
|
|
|
16917
17633
|
captionTestId,
|
|
16918
17634
|
menuItems,
|
|
16919
17635
|
children: [
|
|
16920
|
-
/* @__PURE__ */ (0,
|
|
16921
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
17636
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterRichTextInner, { ...innerProps, children }),
|
|
17637
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_jsx_runtime134.Fragment, { children: menuItems }) }) : null
|
|
16922
17638
|
]
|
|
16923
17639
|
}
|
|
16924
17640
|
);
|
|
16925
17641
|
};
|
|
16926
|
-
var editorContainerWrapper =
|
|
17642
|
+
var editorContainerWrapper = import_react163.css`
|
|
16927
17643
|
position: relative;
|
|
16928
17644
|
|
|
16929
17645
|
&::before {
|
|
@@ -16939,12 +17655,12 @@ var editorContainerWrapper = import_react159.css`
|
|
|
16939
17655
|
z-index: 2;
|
|
16940
17656
|
}
|
|
16941
17657
|
`;
|
|
16942
|
-
var editorWrapper =
|
|
17658
|
+
var editorWrapper = import_react163.css`
|
|
16943
17659
|
display: flex;
|
|
16944
17660
|
flex-flow: column;
|
|
16945
17661
|
flex-grow: 1;
|
|
16946
17662
|
`;
|
|
16947
|
-
var editorContainer =
|
|
17663
|
+
var editorContainer = import_react163.css`
|
|
16948
17664
|
${scrollbarStyles}
|
|
16949
17665
|
background: var(--white);
|
|
16950
17666
|
border-radius: var(--rounded-sm);
|
|
@@ -16976,7 +17692,7 @@ var editorContainer = import_react159.css`
|
|
|
16976
17692
|
max-height: unset;
|
|
16977
17693
|
}
|
|
16978
17694
|
`;
|
|
16979
|
-
var editorContainerOverflowWrapper =
|
|
17695
|
+
var editorContainerOverflowWrapper = import_react163.css`
|
|
16980
17696
|
overflow: hidden;
|
|
16981
17697
|
pointer-events: none;
|
|
16982
17698
|
|
|
@@ -16984,7 +17700,7 @@ var editorContainerOverflowWrapper = import_react159.css`
|
|
|
16984
17700
|
pointer-events: auto;
|
|
16985
17701
|
}
|
|
16986
17702
|
`;
|
|
16987
|
-
var editorPlaceholder =
|
|
17703
|
+
var editorPlaceholder = import_react163.css`
|
|
16988
17704
|
color: var(--gray-500);
|
|
16989
17705
|
font-style: italic;
|
|
16990
17706
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -16995,7 +17711,7 @@ var editorPlaceholder = import_react159.css`
|
|
|
16995
17711
|
top: calc(1rem + var(--spacing-sm));
|
|
16996
17712
|
user-select: none;
|
|
16997
17713
|
`;
|
|
16998
|
-
var editorInput =
|
|
17714
|
+
var editorInput = import_react163.css`
|
|
16999
17715
|
min-height: 100%;
|
|
17000
17716
|
flex-grow: 1;
|
|
17001
17717
|
|
|
@@ -17068,8 +17784,8 @@ var ParameterRichTextInner = ({
|
|
|
17068
17784
|
},
|
|
17069
17785
|
editable: !richTextProps.readOnly
|
|
17070
17786
|
};
|
|
17071
|
-
return /* @__PURE__ */ (0,
|
|
17072
|
-
/* @__PURE__ */ (0,
|
|
17787
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
|
|
17788
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(RichText, { ...richTextProps, children }) }) }),
|
|
17073
17789
|
editorFooter ? editorFooter : null
|
|
17074
17790
|
] });
|
|
17075
17791
|
};
|
|
@@ -17099,12 +17815,12 @@ var RichText = ({
|
|
|
17099
17815
|
placeholder
|
|
17100
17816
|
}) => {
|
|
17101
17817
|
const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
|
|
17102
|
-
(0,
|
|
17818
|
+
(0, import_react164.useEffect)(() => {
|
|
17103
17819
|
if (onRichTextInit) {
|
|
17104
17820
|
onRichTextInit(editor);
|
|
17105
17821
|
}
|
|
17106
17822
|
}, [editor, onRichTextInit]);
|
|
17107
|
-
(0,
|
|
17823
|
+
(0, import_react164.useEffect)(() => {
|
|
17108
17824
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
|
|
17109
17825
|
requestAnimationFrame(() => {
|
|
17110
17826
|
const previousEditorState = prevEditorState.toJSON();
|
|
@@ -17121,23 +17837,23 @@ var RichText = ({
|
|
|
17121
17837
|
removeUpdateListener();
|
|
17122
17838
|
};
|
|
17123
17839
|
}, [editor, onChange]);
|
|
17124
|
-
(0,
|
|
17840
|
+
(0, import_react164.useEffect)(() => {
|
|
17125
17841
|
editor.setEditable(!readOnly);
|
|
17126
17842
|
}, [editor, readOnly]);
|
|
17127
|
-
const [editorContainerRef, setEditorContainerRef] = (0,
|
|
17843
|
+
const [editorContainerRef, setEditorContainerRef] = (0, import_react164.useState)(null);
|
|
17128
17844
|
const onEditorContainerRef = (_editorContainerRef) => {
|
|
17129
17845
|
if (_editorContainerRef !== null) {
|
|
17130
17846
|
setEditorContainerRef(_editorContainerRef);
|
|
17131
17847
|
}
|
|
17132
17848
|
};
|
|
17133
|
-
const [portalContainerRef, setPortalContainerRef] = (0,
|
|
17849
|
+
const [portalContainerRef, setPortalContainerRef] = (0, import_react164.useState)(null);
|
|
17134
17850
|
const onPortalContainerRef = (_portalContainerRef) => {
|
|
17135
17851
|
if (_portalContainerRef !== null) {
|
|
17136
17852
|
setPortalContainerRef(_portalContainerRef);
|
|
17137
17853
|
}
|
|
17138
17854
|
};
|
|
17139
|
-
return /* @__PURE__ */ (0,
|
|
17140
|
-
readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0,
|
|
17855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
|
|
17856
|
+
readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
17141
17857
|
RichTextToolbar_default,
|
|
17142
17858
|
{
|
|
17143
17859
|
config,
|
|
@@ -17146,8 +17862,8 @@ var RichText = ({
|
|
|
17146
17862
|
onInsertAsset
|
|
17147
17863
|
}
|
|
17148
17864
|
),
|
|
17149
|
-
/* @__PURE__ */ (0,
|
|
17150
|
-
/* @__PURE__ */ (0,
|
|
17865
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
|
|
17866
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
|
|
17151
17867
|
"div",
|
|
17152
17868
|
{
|
|
17153
17869
|
css: editorContainer,
|
|
@@ -17155,33 +17871,33 @@ var RichText = ({
|
|
|
17155
17871
|
ref: onEditorContainerRef,
|
|
17156
17872
|
"data-testid": "value-container",
|
|
17157
17873
|
children: [
|
|
17158
|
-
/* @__PURE__ */ (0,
|
|
17874
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
17159
17875
|
import_LexicalRichTextPlugin.RichTextPlugin,
|
|
17160
17876
|
{
|
|
17161
|
-
contentEditable: /* @__PURE__ */ (0,
|
|
17162
|
-
placeholder: /* @__PURE__ */ (0,
|
|
17877
|
+
contentEditable: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
17878
|
+
placeholder: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
|
|
17163
17879
|
ErrorBoundary: import_LexicalErrorBoundary.default
|
|
17164
17880
|
}
|
|
17165
17881
|
),
|
|
17166
|
-
/* @__PURE__ */ (0,
|
|
17167
|
-
/* @__PURE__ */ (0,
|
|
17168
|
-
/* @__PURE__ */ (0,
|
|
17169
|
-
/* @__PURE__ */ (0,
|
|
17882
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalListPlugin.ListPlugin, {}),
|
|
17883
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ListIndentPlugin, { maxDepth: 4 }),
|
|
17884
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalTablePlugin.TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
|
|
17885
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
17170
17886
|
TableActionMenuPlugin,
|
|
17171
17887
|
{
|
|
17172
17888
|
positioningAnchorEl: editorContainerRef,
|
|
17173
17889
|
menuPortalEl: portalContainerRef
|
|
17174
17890
|
}
|
|
17175
17891
|
) : null }),
|
|
17176
|
-
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0,
|
|
17177
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
17178
|
-
/* @__PURE__ */ (0,
|
|
17179
|
-
/* @__PURE__ */ (0,
|
|
17892
|
+
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
|
|
17893
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
|
|
17894
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DisableStylesPlugin, {}),
|
|
17895
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
|
|
17180
17896
|
]
|
|
17181
17897
|
}
|
|
17182
17898
|
),
|
|
17183
|
-
/* @__PURE__ */ (0,
|
|
17184
|
-
editorContainerRef ? /* @__PURE__ */ (0,
|
|
17899
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_jsx_runtime134.Fragment, { children }),
|
|
17900
|
+
editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
17185
17901
|
LinkNodePlugin,
|
|
17186
17902
|
{
|
|
17187
17903
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -17192,38 +17908,38 @@ var RichText = ({
|
|
|
17192
17908
|
positioningAnchorEl: editorContainerRef
|
|
17193
17909
|
}
|
|
17194
17910
|
) : null,
|
|
17195
|
-
/* @__PURE__ */ (0,
|
|
17196
|
-
/* @__PURE__ */ (0,
|
|
17911
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableSelectionPlugin_default, {}),
|
|
17912
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ImprovedAssetSelectionPlugin_default, {})
|
|
17197
17913
|
] })
|
|
17198
17914
|
] });
|
|
17199
17915
|
};
|
|
17200
17916
|
|
|
17201
17917
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
17202
17918
|
init_emotion_jsx_shim();
|
|
17203
|
-
var
|
|
17204
|
-
var
|
|
17205
|
-
var ParameterSelect = (0,
|
|
17919
|
+
var import_react165 = require("react");
|
|
17920
|
+
var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
|
|
17921
|
+
var ParameterSelect = (0, import_react165.forwardRef)(
|
|
17206
17922
|
({ defaultOption, options, ...props }, ref) => {
|
|
17207
17923
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17208
|
-
return /* @__PURE__ */ (0,
|
|
17924
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
17209
17925
|
}
|
|
17210
17926
|
);
|
|
17211
|
-
var ParameterSelectInner = (0,
|
|
17927
|
+
var ParameterSelectInner = (0, import_react165.forwardRef)(
|
|
17212
17928
|
({ defaultOption, options, ...props }, ref) => {
|
|
17213
|
-
const { id, label, hiddenLabel } = useParameterShell();
|
|
17214
|
-
return /* @__PURE__ */ (0,
|
|
17929
|
+
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
17930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
|
|
17215
17931
|
"select",
|
|
17216
17932
|
{
|
|
17217
17933
|
css: [input3, selectInput],
|
|
17218
17934
|
id,
|
|
17219
|
-
"aria-label": hiddenLabel && typeof
|
|
17935
|
+
"aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
|
|
17220
17936
|
ref,
|
|
17221
17937
|
...props,
|
|
17222
17938
|
children: [
|
|
17223
|
-
defaultOption ? /* @__PURE__ */ (0,
|
|
17939
|
+
defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("option", { value: "", children: defaultOption }) : null,
|
|
17224
17940
|
options.map((option) => {
|
|
17225
17941
|
var _a;
|
|
17226
|
-
return /* @__PURE__ */ (0,
|
|
17942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
17227
17943
|
})
|
|
17228
17944
|
]
|
|
17229
17945
|
}
|
|
@@ -17231,23 +17947,65 @@ var ParameterSelectInner = (0, import_react161.forwardRef)(
|
|
|
17231
17947
|
}
|
|
17232
17948
|
);
|
|
17233
17949
|
|
|
17950
|
+
// src/components/ParameterInputs/ParameterSelectSlider.tsx
|
|
17951
|
+
init_emotion_jsx_shim();
|
|
17952
|
+
var import_react166 = require("react");
|
|
17953
|
+
var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
|
|
17954
|
+
var ParameterSelectSlider = (0, import_react166.forwardRef)(
|
|
17955
|
+
(props, ref) => {
|
|
17956
|
+
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17957
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterShell, { "data-testid": "parameter-select-slider", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterSelectSliderInner, { ref, ...innerProps }) });
|
|
17958
|
+
}
|
|
17959
|
+
);
|
|
17960
|
+
var ParameterSelectSliderInner = (0, import_react166.forwardRef)(({ options, value, onChange, ...props }, ref) => {
|
|
17961
|
+
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
17962
|
+
const numericValue = (0, import_react166.useMemo)(() => {
|
|
17963
|
+
const index = options.findIndex((option) => option.value === value);
|
|
17964
|
+
return index >= 0 ? index : 0;
|
|
17965
|
+
}, [options, value]);
|
|
17966
|
+
const handleChange = (0, import_react166.useCallback)(
|
|
17967
|
+
(newIndex) => {
|
|
17968
|
+
const selectedOption = options[newIndex];
|
|
17969
|
+
if (selectedOption) {
|
|
17970
|
+
onChange(selectedOption.value);
|
|
17971
|
+
}
|
|
17972
|
+
},
|
|
17973
|
+
[options, onChange]
|
|
17974
|
+
);
|
|
17975
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
|
|
17976
|
+
Slider,
|
|
17977
|
+
{
|
|
17978
|
+
ref,
|
|
17979
|
+
id,
|
|
17980
|
+
"aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
|
|
17981
|
+
value: numericValue,
|
|
17982
|
+
onChange: handleChange,
|
|
17983
|
+
options,
|
|
17984
|
+
showNumberInput: false,
|
|
17985
|
+
...props
|
|
17986
|
+
}
|
|
17987
|
+
);
|
|
17988
|
+
});
|
|
17989
|
+
ParameterSelectSlider.displayName = "ParameterSelectSlider";
|
|
17990
|
+
ParameterSelectSliderInner.displayName = "ParameterSelectSliderInner";
|
|
17991
|
+
|
|
17234
17992
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
17235
17993
|
init_emotion_jsx_shim();
|
|
17236
|
-
var
|
|
17237
|
-
var
|
|
17238
|
-
var ParameterTextarea = (0,
|
|
17994
|
+
var import_react167 = require("react");
|
|
17995
|
+
var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
|
|
17996
|
+
var ParameterTextarea = (0, import_react167.forwardRef)((props, ref) => {
|
|
17239
17997
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17240
|
-
return /* @__PURE__ */ (0,
|
|
17998
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
17241
17999
|
});
|
|
17242
|
-
var ParameterTextareaInner = (0,
|
|
17243
|
-
const { id, label, hiddenLabel } = useParameterShell();
|
|
17244
|
-
return /* @__PURE__ */ (0,
|
|
18000
|
+
var ParameterTextareaInner = (0, import_react167.forwardRef)(({ ...props }, ref) => {
|
|
18001
|
+
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
18002
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
17245
18003
|
"textarea",
|
|
17246
18004
|
{
|
|
17247
18005
|
css: [input3, textarea2],
|
|
17248
18006
|
id,
|
|
17249
18007
|
ref,
|
|
17250
|
-
"aria-label": hiddenLabel && typeof
|
|
18008
|
+
"aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
|
|
17251
18009
|
...props
|
|
17252
18010
|
}
|
|
17253
18011
|
);
|
|
@@ -17255,30 +18013,45 @@ var ParameterTextareaInner = (0, import_react162.forwardRef)(({ ...props }, ref)
|
|
|
17255
18013
|
|
|
17256
18014
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
17257
18015
|
init_emotion_jsx_shim();
|
|
17258
|
-
var
|
|
17259
|
-
var
|
|
17260
|
-
var ParameterToggle = (0,
|
|
18016
|
+
var import_react168 = require("react");
|
|
18017
|
+
var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
|
|
18018
|
+
var ParameterToggle = (0, import_react168.forwardRef)((props, ref) => {
|
|
17261
18019
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17262
|
-
return /* @__PURE__ */ (0,
|
|
18020
|
+
return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
17263
18021
|
});
|
|
17264
|
-
|
|
18022
|
+
ParameterToggle.displayName = "ParameterToggle";
|
|
18023
|
+
var ParameterToggleInner = (0, import_react168.forwardRef)(
|
|
17265
18024
|
({ children, ...props }, ref) => {
|
|
17266
|
-
const {
|
|
17267
|
-
|
|
17268
|
-
|
|
17269
|
-
/* @__PURE__ */ (0,
|
|
18025
|
+
const { type, withoutIndeterminateState, ...otherProps } = props;
|
|
18026
|
+
const { id, label: label2 } = useParameterShell();
|
|
18027
|
+
return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("label", { css: inputToggleLabel2, children: [
|
|
18028
|
+
/* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
|
|
18029
|
+
"input",
|
|
18030
|
+
{
|
|
18031
|
+
css: [
|
|
18032
|
+
toggleInput2,
|
|
18033
|
+
!props.withoutIndeterminateState ? toggleInputIndeterminateState : void 0
|
|
18034
|
+
],
|
|
18035
|
+
type,
|
|
18036
|
+
id,
|
|
18037
|
+
ref,
|
|
18038
|
+
...otherProps
|
|
18039
|
+
}
|
|
18040
|
+
),
|
|
18041
|
+
/* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { css: inlineLabel2, children: label2 }),
|
|
17270
18042
|
children
|
|
17271
18043
|
] });
|
|
17272
18044
|
}
|
|
17273
18045
|
);
|
|
18046
|
+
ParameterToggleInner.displayName = "ParameterToggleInner";
|
|
17274
18047
|
|
|
17275
18048
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
17276
18049
|
init_emotion_jsx_shim();
|
|
17277
18050
|
|
|
17278
18051
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
17279
18052
|
init_emotion_jsx_shim();
|
|
17280
|
-
var
|
|
17281
|
-
var
|
|
18053
|
+
var import_react169 = require("@emotion/react");
|
|
18054
|
+
var container4 = import_react169.css`
|
|
17282
18055
|
background: var(--gray-50);
|
|
17283
18056
|
margin-block: var(--spacing-sm);
|
|
17284
18057
|
position: relative;
|
|
@@ -17288,17 +18061,17 @@ var container3 = import_react164.css`
|
|
|
17288
18061
|
border: solid 1px var(--gray-300);
|
|
17289
18062
|
`;
|
|
17290
18063
|
var themeMap = {
|
|
17291
|
-
primary:
|
|
18064
|
+
primary: import_react169.css`
|
|
17292
18065
|
--progress-color: var(--accent-light);
|
|
17293
18066
|
`,
|
|
17294
|
-
secondary:
|
|
18067
|
+
secondary: import_react169.css`
|
|
17295
18068
|
--progress-color: var(--accent-alt-light);
|
|
17296
18069
|
`,
|
|
17297
|
-
destructive:
|
|
18070
|
+
destructive: import_react169.css`
|
|
17298
18071
|
--progress-color: var(--brand-secondary-5);
|
|
17299
18072
|
`
|
|
17300
18073
|
};
|
|
17301
|
-
var slidingBackgroundPosition =
|
|
18074
|
+
var slidingBackgroundPosition = import_react169.keyframes`
|
|
17302
18075
|
from {
|
|
17303
18076
|
background-position: 0 0;
|
|
17304
18077
|
}
|
|
@@ -17306,10 +18079,10 @@ var slidingBackgroundPosition = import_react164.keyframes`
|
|
|
17306
18079
|
background-position: 64px 0;
|
|
17307
18080
|
}
|
|
17308
18081
|
`;
|
|
17309
|
-
var determinate =
|
|
18082
|
+
var determinate = import_react169.css`
|
|
17310
18083
|
background-color: var(--progress-color);
|
|
17311
18084
|
`;
|
|
17312
|
-
var indeterminate =
|
|
18085
|
+
var indeterminate = import_react169.css`
|
|
17313
18086
|
background-image: linear-gradient(
|
|
17314
18087
|
45deg,
|
|
17315
18088
|
var(--progress-color) 25%,
|
|
@@ -17323,7 +18096,7 @@ var indeterminate = import_react164.css`
|
|
|
17323
18096
|
background-size: 64px 64px;
|
|
17324
18097
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
17325
18098
|
`;
|
|
17326
|
-
var bar =
|
|
18099
|
+
var bar = import_react169.css`
|
|
17327
18100
|
position: absolute;
|
|
17328
18101
|
inset: 0;
|
|
17329
18102
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -17331,7 +18104,7 @@ var bar = import_react164.css`
|
|
|
17331
18104
|
`;
|
|
17332
18105
|
|
|
17333
18106
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
17334
|
-
var
|
|
18107
|
+
var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
|
|
17335
18108
|
function ProgressBar({
|
|
17336
18109
|
current,
|
|
17337
18110
|
max,
|
|
@@ -17341,10 +18114,10 @@ function ProgressBar({
|
|
|
17341
18114
|
}) {
|
|
17342
18115
|
const valueNow = Math.min(current, max);
|
|
17343
18116
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
17344
|
-
return /* @__PURE__ */ (0,
|
|
18117
|
+
return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
|
|
17345
18118
|
"div",
|
|
17346
18119
|
{
|
|
17347
|
-
css:
|
|
18120
|
+
css: container4,
|
|
17348
18121
|
role: "progressbar",
|
|
17349
18122
|
"aria-busy": valuePercentage !== 100,
|
|
17350
18123
|
"aria-invalid": false,
|
|
@@ -17352,7 +18125,7 @@ function ProgressBar({
|
|
|
17352
18125
|
"aria-valuemax": max,
|
|
17353
18126
|
"aria-valuenow": valueNow,
|
|
17354
18127
|
...props,
|
|
17355
|
-
children: /* @__PURE__ */ (0,
|
|
18128
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
|
|
17356
18129
|
"div",
|
|
17357
18130
|
{
|
|
17358
18131
|
css: [
|
|
@@ -17372,31 +18145,31 @@ function ProgressBar({
|
|
|
17372
18145
|
|
|
17373
18146
|
// src/components/ProgressList/ProgressList.tsx
|
|
17374
18147
|
init_emotion_jsx_shim();
|
|
17375
|
-
var
|
|
18148
|
+
var import_react171 = require("@emotion/react");
|
|
17376
18149
|
var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
|
|
17377
18150
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
17378
18151
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
17379
|
-
var
|
|
18152
|
+
var import_react172 = require("react");
|
|
17380
18153
|
|
|
17381
18154
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
17382
18155
|
init_emotion_jsx_shim();
|
|
17383
|
-
var
|
|
17384
|
-
var progressListStyles =
|
|
18156
|
+
var import_react170 = require("@emotion/react");
|
|
18157
|
+
var progressListStyles = import_react170.css`
|
|
17385
18158
|
display: flex;
|
|
17386
18159
|
flex-direction: column;
|
|
17387
18160
|
gap: var(--spacing-sm);
|
|
17388
18161
|
list-style-type: none;
|
|
17389
18162
|
`;
|
|
17390
|
-
var progressListItemStyles =
|
|
18163
|
+
var progressListItemStyles = import_react170.css`
|
|
17391
18164
|
display: flex;
|
|
17392
18165
|
gap: var(--spacing-base);
|
|
17393
18166
|
align-items: center;
|
|
17394
18167
|
`;
|
|
17395
18168
|
|
|
17396
18169
|
// src/components/ProgressList/ProgressList.tsx
|
|
17397
|
-
var
|
|
18170
|
+
var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
|
|
17398
18171
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
17399
|
-
const itemsWithStatus = (0,
|
|
18172
|
+
const itemsWithStatus = (0, import_react172.useMemo)(() => {
|
|
17400
18173
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
17401
18174
|
return items.map((item, index) => {
|
|
17402
18175
|
let status = "queued";
|
|
@@ -17408,15 +18181,15 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
17408
18181
|
return { ...item, status };
|
|
17409
18182
|
});
|
|
17410
18183
|
}, [items, inProgressId]);
|
|
17411
|
-
return /* @__PURE__ */ (0,
|
|
17412
|
-
return /* @__PURE__ */ (0,
|
|
18184
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label: label2, status, error, errorLevel }) => {
|
|
18185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
17413
18186
|
ProgressListItem,
|
|
17414
18187
|
{
|
|
17415
18188
|
status,
|
|
17416
18189
|
error,
|
|
17417
18190
|
errorLevel,
|
|
17418
18191
|
autoEllipsis,
|
|
17419
|
-
children:
|
|
18192
|
+
children: label2
|
|
17420
18193
|
},
|
|
17421
18194
|
id
|
|
17422
18195
|
);
|
|
@@ -17429,7 +18202,7 @@ var ProgressListItem = ({
|
|
|
17429
18202
|
errorLevel = "danger",
|
|
17430
18203
|
autoEllipsis = false
|
|
17431
18204
|
}) => {
|
|
17432
|
-
const icon = (0,
|
|
18205
|
+
const icon = (0, import_react172.useMemo)(() => {
|
|
17433
18206
|
if (error) {
|
|
17434
18207
|
return warningIcon;
|
|
17435
18208
|
}
|
|
@@ -17440,14 +18213,14 @@ var ProgressListItem = ({
|
|
|
17440
18213
|
};
|
|
17441
18214
|
return iconPerStatus[status];
|
|
17442
18215
|
}, [status, error]);
|
|
17443
|
-
const statusStyles = (0,
|
|
18216
|
+
const statusStyles = (0, import_react172.useMemo)(() => {
|
|
17444
18217
|
if (error) {
|
|
17445
|
-
return errorLevel === "caution" ?
|
|
18218
|
+
return errorLevel === "caution" ? import_react171.css`
|
|
17446
18219
|
color: rgb(161, 98, 7);
|
|
17447
18220
|
& svg {
|
|
17448
18221
|
color: rgb(250, 204, 21);
|
|
17449
18222
|
}
|
|
17450
|
-
` :
|
|
18223
|
+
` : import_react171.css`
|
|
17451
18224
|
color: rgb(185, 28, 28);
|
|
17452
18225
|
& svg {
|
|
17453
18226
|
color: var(--brand-primary-2);
|
|
@@ -17455,40 +18228,40 @@ var ProgressListItem = ({
|
|
|
17455
18228
|
`;
|
|
17456
18229
|
}
|
|
17457
18230
|
const colorPerStatus = {
|
|
17458
|
-
completed:
|
|
18231
|
+
completed: import_react171.css`
|
|
17459
18232
|
opacity: 0.75;
|
|
17460
18233
|
`,
|
|
17461
|
-
inProgress:
|
|
18234
|
+
inProgress: import_react171.css`
|
|
17462
18235
|
-webkit-text-stroke-width: thin;
|
|
17463
18236
|
`,
|
|
17464
|
-
queued:
|
|
18237
|
+
queued: import_react171.css`
|
|
17465
18238
|
opacity: 0.5;
|
|
17466
18239
|
`
|
|
17467
18240
|
};
|
|
17468
18241
|
return colorPerStatus[status];
|
|
17469
18242
|
}, [status, error, errorLevel]);
|
|
17470
|
-
return /* @__PURE__ */ (0,
|
|
17471
|
-
/* @__PURE__ */ (0,
|
|
17472
|
-
/* @__PURE__ */ (0,
|
|
18243
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
18244
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
18245
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { children: [
|
|
17473
18246
|
children,
|
|
17474
|
-
/* @__PURE__ */ (0,
|
|
18247
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
17475
18248
|
] })
|
|
17476
18249
|
] });
|
|
17477
18250
|
};
|
|
17478
18251
|
|
|
17479
18252
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
17480
18253
|
init_emotion_jsx_shim();
|
|
17481
|
-
var
|
|
18254
|
+
var import_react174 = require("@emotion/react");
|
|
17482
18255
|
var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
|
|
17483
|
-
var
|
|
18256
|
+
var import_react175 = require("react");
|
|
17484
18257
|
|
|
17485
18258
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
17486
18259
|
init_emotion_jsx_shim();
|
|
17487
|
-
var
|
|
17488
|
-
var segmentedControlRootStyles =
|
|
18260
|
+
var import_react173 = require("@emotion/react");
|
|
18261
|
+
var segmentedControlRootStyles = import_react173.css`
|
|
17489
18262
|
position: relative;
|
|
17490
18263
|
`;
|
|
17491
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
18264
|
+
var segmentedControlScrollIndicatorsStyles = import_react173.css`
|
|
17492
18265
|
position: absolute;
|
|
17493
18266
|
inset: 0;
|
|
17494
18267
|
z-index: 1;
|
|
@@ -17516,17 +18289,17 @@ var segmentedControlScrollIndicatorsStyles = import_react168.css`
|
|
|
17516
18289
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
17517
18290
|
}
|
|
17518
18291
|
`;
|
|
17519
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
18292
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react173.css`
|
|
17520
18293
|
&::before {
|
|
17521
18294
|
opacity: 1;
|
|
17522
18295
|
}
|
|
17523
18296
|
`;
|
|
17524
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
18297
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react173.css`
|
|
17525
18298
|
&::after {
|
|
17526
18299
|
opacity: 1;
|
|
17527
18300
|
}
|
|
17528
18301
|
`;
|
|
17529
|
-
var segmentedControlWrapperStyles =
|
|
18302
|
+
var segmentedControlWrapperStyles = import_react173.css`
|
|
17530
18303
|
overflow-y: auto;
|
|
17531
18304
|
scroll-behavior: smooth;
|
|
17532
18305
|
scrollbar-width: none;
|
|
@@ -17535,7 +18308,7 @@ var segmentedControlWrapperStyles = import_react168.css`
|
|
|
17535
18308
|
height: 0px;
|
|
17536
18309
|
}
|
|
17537
18310
|
`;
|
|
17538
|
-
var segmentedControlStyles =
|
|
18311
|
+
var segmentedControlStyles = import_react173.css`
|
|
17539
18312
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
17540
18313
|
--segmented-control-border-width: 1px;
|
|
17541
18314
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -17554,14 +18327,14 @@ var segmentedControlStyles = import_react168.css`
|
|
|
17554
18327
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
17555
18328
|
font-size: var(--fs-xs);
|
|
17556
18329
|
`;
|
|
17557
|
-
var segmentedControlVerticalStyles =
|
|
18330
|
+
var segmentedControlVerticalStyles = import_react173.css`
|
|
17558
18331
|
flex-direction: column;
|
|
17559
18332
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
17560
18333
|
var(--segmented-control-rounded-value) 0 0;
|
|
17561
18334
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
17562
18335
|
var(--segmented-control-rounded-value);
|
|
17563
18336
|
`;
|
|
17564
|
-
var segmentedControlItemStyles =
|
|
18337
|
+
var segmentedControlItemStyles = import_react173.css`
|
|
17565
18338
|
&:first-of-type label {
|
|
17566
18339
|
border-radius: var(--segmented-control-first-border-radius);
|
|
17567
18340
|
}
|
|
@@ -17569,10 +18342,10 @@ var segmentedControlItemStyles = import_react168.css`
|
|
|
17569
18342
|
border-radius: var(--segmented-control-last-border-radius);
|
|
17570
18343
|
}
|
|
17571
18344
|
`;
|
|
17572
|
-
var segmentedControlInputStyles =
|
|
18345
|
+
var segmentedControlInputStyles = import_react173.css`
|
|
17573
18346
|
${accessibleHidden}
|
|
17574
18347
|
`;
|
|
17575
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
18348
|
+
var segmentedControlLabelStyles = (checked, disabled2) => import_react173.css`
|
|
17576
18349
|
position: relative;
|
|
17577
18350
|
display: flex;
|
|
17578
18351
|
align-items: center;
|
|
@@ -17636,25 +18409,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react168.css`
|
|
|
17636
18409
|
`}
|
|
17637
18410
|
}
|
|
17638
18411
|
`;
|
|
17639
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
18412
|
+
var segmentedControlLabelIconOnlyStyles = import_react173.css`
|
|
17640
18413
|
padding-inline: 0.5em;
|
|
17641
18414
|
`;
|
|
17642
|
-
var segmentedControlLabelCheckStyles =
|
|
18415
|
+
var segmentedControlLabelCheckStyles = import_react173.css`
|
|
17643
18416
|
opacity: 0.5;
|
|
17644
18417
|
`;
|
|
17645
|
-
var segmentedControlLabelContentStyles =
|
|
18418
|
+
var segmentedControlLabelContentStyles = import_react173.css`
|
|
17646
18419
|
display: flex;
|
|
17647
18420
|
align-items: center;
|
|
17648
18421
|
justify-content: center;
|
|
17649
18422
|
gap: var(--spacing-sm);
|
|
17650
18423
|
height: 100%;
|
|
17651
18424
|
`;
|
|
17652
|
-
var segmentedControlLabelTextStyles =
|
|
18425
|
+
var segmentedControlLabelTextStyles = import_react173.css`
|
|
17653
18426
|
white-space: nowrap;
|
|
17654
18427
|
`;
|
|
17655
18428
|
|
|
17656
18429
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
17657
|
-
var
|
|
18430
|
+
var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
|
|
17658
18431
|
var SegmentedControl = ({
|
|
17659
18432
|
name,
|
|
17660
18433
|
options,
|
|
@@ -17669,10 +18442,10 @@ var SegmentedControl = ({
|
|
|
17669
18442
|
currentBackgroundColor = "white",
|
|
17670
18443
|
...props
|
|
17671
18444
|
}) => {
|
|
17672
|
-
const wrapperRef = (0,
|
|
17673
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
17674
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
17675
|
-
const onOptionChange = (0,
|
|
18445
|
+
const wrapperRef = (0, import_react175.useRef)(null);
|
|
18446
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react175.useState)(false);
|
|
18447
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react175.useState)(false);
|
|
18448
|
+
const onOptionChange = (0, import_react175.useCallback)(
|
|
17676
18449
|
(event) => {
|
|
17677
18450
|
if (event.target.checked) {
|
|
17678
18451
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -17680,19 +18453,19 @@ var SegmentedControl = ({
|
|
|
17680
18453
|
},
|
|
17681
18454
|
[options, onChange]
|
|
17682
18455
|
);
|
|
17683
|
-
const sizeStyles = (0,
|
|
18456
|
+
const sizeStyles = (0, import_react175.useMemo)(() => {
|
|
17684
18457
|
const map = {
|
|
17685
|
-
sm: (0,
|
|
17686
|
-
md: (0,
|
|
17687
|
-
lg: (0,
|
|
17688
|
-
xl: (0,
|
|
18458
|
+
sm: (0, import_react174.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
18459
|
+
md: (0, import_react174.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
18460
|
+
lg: (0, import_react174.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
18461
|
+
xl: (0, import_react174.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
17689
18462
|
};
|
|
17690
18463
|
return map[size];
|
|
17691
18464
|
}, [size]);
|
|
17692
|
-
const isIconOnly = (0,
|
|
18465
|
+
const isIconOnly = (0, import_react175.useMemo)(() => {
|
|
17693
18466
|
return options.every((option) => option && option.icon && !option.label);
|
|
17694
18467
|
}, [options]);
|
|
17695
|
-
(0,
|
|
18468
|
+
(0, import_react175.useEffect)(() => {
|
|
17696
18469
|
const wrapperElement = wrapperRef.current;
|
|
17697
18470
|
const onScroll = () => {
|
|
17698
18471
|
if (!wrapperElement) {
|
|
@@ -17713,8 +18486,8 @@ var SegmentedControl = ({
|
|
|
17713
18486
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
17714
18487
|
};
|
|
17715
18488
|
}, []);
|
|
17716
|
-
return /* @__PURE__ */ (0,
|
|
17717
|
-
/* @__PURE__ */ (0,
|
|
18489
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
18490
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
17718
18491
|
"div",
|
|
17719
18492
|
{
|
|
17720
18493
|
css: [
|
|
@@ -17731,12 +18504,12 @@ var SegmentedControl = ({
|
|
|
17731
18504
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
17732
18505
|
const isDisabled = disabled2 || option.disabled;
|
|
17733
18506
|
const isChecked = option.value === value;
|
|
17734
|
-
return /* @__PURE__ */ (0,
|
|
18507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
17735
18508
|
"div",
|
|
17736
18509
|
{
|
|
17737
18510
|
css: segmentedControlItemStyles,
|
|
17738
18511
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
17739
|
-
children: /* @__PURE__ */ (0,
|
|
18512
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
|
|
17740
18513
|
"label",
|
|
17741
18514
|
{
|
|
17742
18515
|
css: [
|
|
@@ -17745,7 +18518,7 @@ var SegmentedControl = ({
|
|
|
17745
18518
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
17746
18519
|
],
|
|
17747
18520
|
children: [
|
|
17748
|
-
/* @__PURE__ */ (0,
|
|
18521
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
17749
18522
|
"input",
|
|
17750
18523
|
{
|
|
17751
18524
|
css: segmentedControlInputStyles,
|
|
@@ -17757,10 +18530,10 @@ var SegmentedControl = ({
|
|
|
17757
18530
|
disabled: isDisabled
|
|
17758
18531
|
}
|
|
17759
18532
|
),
|
|
17760
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0,
|
|
17761
|
-
/* @__PURE__ */ (0,
|
|
17762
|
-
!option.icon ? null : /* @__PURE__ */ (0,
|
|
17763
|
-
!text || hideOptionText ? null : /* @__PURE__ */ (0,
|
|
18533
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
18534
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
|
|
18535
|
+
!option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
18536
|
+
!text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
17764
18537
|
] })
|
|
17765
18538
|
]
|
|
17766
18539
|
}
|
|
@@ -17770,7 +18543,7 @@ var SegmentedControl = ({
|
|
|
17770
18543
|
})
|
|
17771
18544
|
}
|
|
17772
18545
|
) }),
|
|
17773
|
-
/* @__PURE__ */ (0,
|
|
18546
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
17774
18547
|
"div",
|
|
17775
18548
|
{
|
|
17776
18549
|
css: [
|
|
@@ -17788,18 +18561,18 @@ init_emotion_jsx_shim();
|
|
|
17788
18561
|
|
|
17789
18562
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
17790
18563
|
init_emotion_jsx_shim();
|
|
17791
|
-
var
|
|
17792
|
-
var lightFadingOut =
|
|
18564
|
+
var import_react176 = require("@emotion/react");
|
|
18565
|
+
var lightFadingOut = import_react176.keyframes`
|
|
17793
18566
|
from { opacity: 0.1; }
|
|
17794
18567
|
to { opacity: 0.025; }
|
|
17795
18568
|
`;
|
|
17796
|
-
var skeletonStyles =
|
|
18569
|
+
var skeletonStyles = import_react176.css`
|
|
17797
18570
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
17798
18571
|
background-color: var(--gray-900);
|
|
17799
18572
|
`;
|
|
17800
18573
|
|
|
17801
18574
|
// src/components/Skeleton/Skeleton.tsx
|
|
17802
|
-
var
|
|
18575
|
+
var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
|
|
17803
18576
|
var Skeleton = ({
|
|
17804
18577
|
width = "100%",
|
|
17805
18578
|
height = "1.25rem",
|
|
@@ -17807,7 +18580,7 @@ var Skeleton = ({
|
|
|
17807
18580
|
circle = false,
|
|
17808
18581
|
children,
|
|
17809
18582
|
...otherProps
|
|
17810
|
-
}) => /* @__PURE__ */ (0,
|
|
18583
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
17811
18584
|
"div",
|
|
17812
18585
|
{
|
|
17813
18586
|
css: [
|
|
@@ -17831,12 +18604,12 @@ init_emotion_jsx_shim();
|
|
|
17831
18604
|
|
|
17832
18605
|
// src/components/Spinner/Spinner.tsx
|
|
17833
18606
|
init_emotion_jsx_shim();
|
|
17834
|
-
var
|
|
18607
|
+
var import_react178 = require("react");
|
|
17835
18608
|
|
|
17836
18609
|
// src/components/Spinner/Spinner.styles.ts
|
|
17837
18610
|
init_emotion_jsx_shim();
|
|
17838
|
-
var
|
|
17839
|
-
var SpinnerStyles =
|
|
18611
|
+
var import_react177 = require("@emotion/react");
|
|
18612
|
+
var SpinnerStyles = import_react177.css`
|
|
17840
18613
|
--color: #00b4ff;
|
|
17841
18614
|
--speed: 5s;
|
|
17842
18615
|
--red: rgb(218, 63, 50);
|
|
@@ -18266,22 +19039,22 @@ var SpinnerStyles = import_react172.css`
|
|
|
18266
19039
|
`;
|
|
18267
19040
|
|
|
18268
19041
|
// src/components/Spinner/Spinner.tsx
|
|
18269
|
-
var
|
|
19042
|
+
var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
|
|
18270
19043
|
var Spinner = ({
|
|
18271
19044
|
width,
|
|
18272
|
-
label,
|
|
19045
|
+
label: label2,
|
|
18273
19046
|
isPaused
|
|
18274
19047
|
}) => {
|
|
18275
|
-
const ref = (0,
|
|
18276
|
-
(0,
|
|
19048
|
+
const ref = (0, import_react178.useRef)(null);
|
|
19049
|
+
(0, import_react178.useEffect)(() => {
|
|
18277
19050
|
var _a, _b, _c;
|
|
18278
19051
|
(_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");
|
|
18279
19052
|
}, [width]);
|
|
18280
|
-
return /* @__PURE__ */ (0,
|
|
19053
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
|
|
18281
19054
|
"div",
|
|
18282
19055
|
{
|
|
18283
19056
|
ref,
|
|
18284
|
-
"aria-label":
|
|
19057
|
+
"aria-label": label2,
|
|
18285
19058
|
style: {
|
|
18286
19059
|
width: typeof width === "number" ? `${width}px` : width,
|
|
18287
19060
|
height: typeof width === "number" ? `${width}px` : width
|
|
@@ -18289,51 +19062,51 @@ var Spinner = ({
|
|
|
18289
19062
|
css: SpinnerStyles,
|
|
18290
19063
|
className: `container${isPaused ? " paused" : ""}`,
|
|
18291
19064
|
children: [
|
|
18292
|
-
/* @__PURE__ */ (0,
|
|
18293
|
-
/* @__PURE__ */ (0,
|
|
18294
|
-
/* @__PURE__ */ (0,
|
|
18295
|
-
/* @__PURE__ */ (0,
|
|
18296
|
-
/* @__PURE__ */ (0,
|
|
18297
|
-
/* @__PURE__ */ (0,
|
|
18298
|
-
/* @__PURE__ */ (0,
|
|
18299
|
-
/* @__PURE__ */ (0,
|
|
18300
|
-
/* @__PURE__ */ (0,
|
|
18301
|
-
/* @__PURE__ */ (0,
|
|
19065
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "pyramid-container", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pyramid top", children: [
|
|
19066
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side one" }),
|
|
19067
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side two" }),
|
|
19068
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side three" }),
|
|
19069
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side four" }),
|
|
19070
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "bottom-pyramid", children: [
|
|
19071
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side five" }),
|
|
19072
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side six" }),
|
|
19073
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side seven" }),
|
|
19074
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side eight" })
|
|
18302
19075
|
] })
|
|
18303
19076
|
] }) }),
|
|
18304
|
-
/* @__PURE__ */ (0,
|
|
18305
|
-
/* @__PURE__ */ (0,
|
|
18306
|
-
/* @__PURE__ */ (0,
|
|
18307
|
-
/* @__PURE__ */ (0,
|
|
18308
|
-
/* @__PURE__ */ (0,
|
|
18309
|
-
/* @__PURE__ */ (0,
|
|
18310
|
-
/* @__PURE__ */ (0,
|
|
19077
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "turning-circle" }),
|
|
19078
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pulsating-star delay-top-right", children: [
|
|
19079
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-center" }),
|
|
19080
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-top" }),
|
|
19081
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-bottom" }),
|
|
19082
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-left" }),
|
|
19083
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-right" })
|
|
18311
19084
|
] }),
|
|
18312
|
-
/* @__PURE__ */ (0,
|
|
18313
|
-
/* @__PURE__ */ (0,
|
|
18314
|
-
/* @__PURE__ */ (0,
|
|
18315
|
-
/* @__PURE__ */ (0,
|
|
18316
|
-
/* @__PURE__ */ (0,
|
|
18317
|
-
/* @__PURE__ */ (0,
|
|
19085
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pulsating-star delay-top-left-2", children: [
|
|
19086
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-center" }),
|
|
19087
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-top" }),
|
|
19088
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-bottom" }),
|
|
19089
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-left" }),
|
|
19090
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-right" })
|
|
18318
19091
|
] }),
|
|
18319
|
-
/* @__PURE__ */ (0,
|
|
18320
|
-
/* @__PURE__ */ (0,
|
|
18321
|
-
/* @__PURE__ */ (0,
|
|
18322
|
-
/* @__PURE__ */ (0,
|
|
18323
|
-
/* @__PURE__ */ (0,
|
|
19092
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pulsating-star delay-top-left", children: [
|
|
19093
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-top" }),
|
|
19094
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-bottom" }),
|
|
19095
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-left" }),
|
|
19096
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-right" })
|
|
18324
19097
|
] }),
|
|
18325
|
-
/* @__PURE__ */ (0,
|
|
18326
|
-
/* @__PURE__ */ (0,
|
|
18327
|
-
/* @__PURE__ */ (0,
|
|
18328
|
-
/* @__PURE__ */ (0,
|
|
18329
|
-
/* @__PURE__ */ (0,
|
|
19098
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pulsating-star delay-bottom-right", children: [
|
|
19099
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-top" }),
|
|
19100
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-bottom" }),
|
|
19101
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-left" }),
|
|
19102
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-right" })
|
|
18330
19103
|
] }),
|
|
18331
|
-
/* @__PURE__ */ (0,
|
|
18332
|
-
/* @__PURE__ */ (0,
|
|
18333
|
-
/* @__PURE__ */ (0,
|
|
18334
|
-
/* @__PURE__ */ (0,
|
|
18335
|
-
/* @__PURE__ */ (0,
|
|
18336
|
-
/* @__PURE__ */ (0,
|
|
19104
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pulsating-star delay-bottom-left", children: [
|
|
19105
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-center" }),
|
|
19106
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-top" }),
|
|
19107
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-bottom" }),
|
|
19108
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-left" }),
|
|
19109
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-right" })
|
|
18337
19110
|
] })
|
|
18338
19111
|
]
|
|
18339
19112
|
}
|
|
@@ -18342,12 +19115,12 @@ var Spinner = ({
|
|
|
18342
19115
|
|
|
18343
19116
|
// src/components/Switch/Switch.tsx
|
|
18344
19117
|
init_emotion_jsx_shim();
|
|
18345
|
-
var
|
|
19118
|
+
var import_react180 = require("react");
|
|
18346
19119
|
|
|
18347
19120
|
// src/components/Switch/Switch.styles.ts
|
|
18348
19121
|
init_emotion_jsx_shim();
|
|
18349
|
-
var
|
|
18350
|
-
var SwitchInputContainer =
|
|
19122
|
+
var import_react179 = require("@emotion/react");
|
|
19123
|
+
var SwitchInputContainer = import_react179.css`
|
|
18351
19124
|
cursor: pointer;
|
|
18352
19125
|
display: inline-flex;
|
|
18353
19126
|
position: relative;
|
|
@@ -18357,7 +19130,7 @@ var SwitchInputContainer = import_react174.css`
|
|
|
18357
19130
|
user-select: none;
|
|
18358
19131
|
z-index: 0;
|
|
18359
19132
|
`;
|
|
18360
|
-
var SwitchInput = (size) =>
|
|
19133
|
+
var SwitchInput = (size) => import_react179.css`
|
|
18361
19134
|
appearance: none;
|
|
18362
19135
|
border-radius: var(--rounded-full);
|
|
18363
19136
|
background-color: var(--white);
|
|
@@ -18396,18 +19169,18 @@ var SwitchInput = (size) => import_react174.css`
|
|
|
18396
19169
|
cursor: not-allowed;
|
|
18397
19170
|
}
|
|
18398
19171
|
`;
|
|
18399
|
-
var SwitchInputCheckedDirectionLeft =
|
|
19172
|
+
var SwitchInputCheckedDirectionLeft = import_react179.css`
|
|
18400
19173
|
&:checked {
|
|
18401
19174
|
transform: translateX(var(--spacing-base));
|
|
18402
19175
|
}
|
|
18403
19176
|
`;
|
|
18404
|
-
var SwitchInputCheckedDirectionRight =
|
|
19177
|
+
var SwitchInputCheckedDirectionRight = import_react179.css`
|
|
18405
19178
|
transform: translateX(-var(--spacing-base));
|
|
18406
19179
|
&:checked {
|
|
18407
19180
|
transform: translateX(0);
|
|
18408
19181
|
}
|
|
18409
19182
|
`;
|
|
18410
|
-
var SwitchInputDisabled =
|
|
19183
|
+
var SwitchInputDisabled = import_react179.css`
|
|
18411
19184
|
opacity: var(--opacity-50);
|
|
18412
19185
|
cursor: not-allowed;
|
|
18413
19186
|
|
|
@@ -18415,19 +19188,19 @@ var SwitchInputDisabled = import_react174.css`
|
|
|
18415
19188
|
cursor: not-allowed;
|
|
18416
19189
|
}
|
|
18417
19190
|
`;
|
|
18418
|
-
var SwitchInputLabelAlignmentLeft = (size) =>
|
|
19191
|
+
var SwitchInputLabelAlignmentLeft = (size) => import_react179.css`
|
|
18419
19192
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
18420
19193
|
&:before {
|
|
18421
19194
|
left: 0;
|
|
18422
19195
|
}
|
|
18423
19196
|
`;
|
|
18424
|
-
var SwitchInputLabelAlignmentRight = (size) =>
|
|
19197
|
+
var SwitchInputLabelAlignmentRight = (size) => import_react179.css`
|
|
18425
19198
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
18426
19199
|
&:before {
|
|
18427
19200
|
right: 0;
|
|
18428
19201
|
}
|
|
18429
19202
|
`;
|
|
18430
|
-
var SwitchInputLabel = (size) =>
|
|
19203
|
+
var SwitchInputLabel = (size) => import_react179.css`
|
|
18431
19204
|
align-items: center;
|
|
18432
19205
|
color: var(--typography-base);
|
|
18433
19206
|
display: inline-flex;
|
|
@@ -18447,28 +19220,28 @@ var SwitchInputLabel = (size) => import_react174.css`
|
|
|
18447
19220
|
top: 0;
|
|
18448
19221
|
}
|
|
18449
19222
|
`;
|
|
18450
|
-
var SwitchTextAlignmentLeft = (size) =>
|
|
19223
|
+
var SwitchTextAlignmentLeft = (size) => import_react179.css`
|
|
18451
19224
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
18452
19225
|
`;
|
|
18453
|
-
var SwitchTextAlignmentRight = (size) =>
|
|
19226
|
+
var SwitchTextAlignmentRight = (size) => import_react179.css`
|
|
18454
19227
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
18455
19228
|
`;
|
|
18456
|
-
var SwitchText =
|
|
19229
|
+
var SwitchText = import_react179.css`
|
|
18457
19230
|
color: var(--gray-500);
|
|
18458
19231
|
font-size: var(--fs-sm);
|
|
18459
19232
|
`;
|
|
18460
|
-
var SwitchInputContainerAlignmentLeft =
|
|
19233
|
+
var SwitchInputContainerAlignmentLeft = import_react179.css`
|
|
18461
19234
|
flex-direction: row;
|
|
18462
19235
|
`;
|
|
18463
|
-
var SwitchInputContainerAlignmentRight =
|
|
19236
|
+
var SwitchInputContainerAlignmentRight = import_react179.css`
|
|
18464
19237
|
flex-direction: row-reverse;
|
|
18465
19238
|
`;
|
|
18466
19239
|
|
|
18467
19240
|
// src/components/Switch/Switch.tsx
|
|
18468
|
-
var
|
|
18469
|
-
var Switch = (0,
|
|
19241
|
+
var import_jsx_runtime144 = require("@emotion/react/jsx-runtime");
|
|
19242
|
+
var Switch = (0, import_react180.forwardRef)(
|
|
18470
19243
|
({
|
|
18471
|
-
label,
|
|
19244
|
+
label: label2,
|
|
18472
19245
|
infoText,
|
|
18473
19246
|
toggleText,
|
|
18474
19247
|
children,
|
|
@@ -18477,7 +19250,7 @@ var Switch = (0, import_react175.forwardRef)(
|
|
|
18477
19250
|
...inputProps
|
|
18478
19251
|
}, ref) => {
|
|
18479
19252
|
let additionalText = infoText;
|
|
18480
|
-
const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = (0,
|
|
19253
|
+
const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = (0, import_react180.useMemo)(() => {
|
|
18481
19254
|
if (alignment === "left") {
|
|
18482
19255
|
return {
|
|
18483
19256
|
SwitchInputContainerAlignmentStyles: SwitchInputContainerAlignmentLeft,
|
|
@@ -18494,8 +19267,8 @@ var Switch = (0, import_react175.forwardRef)(
|
|
|
18494
19267
|
if (infoText && toggleText) {
|
|
18495
19268
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
18496
19269
|
}
|
|
18497
|
-
return /* @__PURE__ */ (0,
|
|
18498
|
-
/* @__PURE__ */ (0,
|
|
19270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(import_jsx_runtime144.Fragment, { children: [
|
|
19271
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
|
|
18499
19272
|
"label",
|
|
18500
19273
|
{
|
|
18501
19274
|
css: [
|
|
@@ -18505,7 +19278,7 @@ var Switch = (0, import_react175.forwardRef)(
|
|
|
18505
19278
|
inputProps.disabled ? SwitchInputDisabled : void 0
|
|
18506
19279
|
],
|
|
18507
19280
|
children: [
|
|
18508
|
-
/* @__PURE__ */ (0,
|
|
19281
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
|
|
18509
19282
|
"input",
|
|
18510
19283
|
{
|
|
18511
19284
|
type: "checkbox",
|
|
@@ -18514,11 +19287,11 @@ var Switch = (0, import_react175.forwardRef)(
|
|
|
18514
19287
|
ref
|
|
18515
19288
|
}
|
|
18516
19289
|
),
|
|
18517
|
-
/* @__PURE__ */ (0,
|
|
19290
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label2 })
|
|
18518
19291
|
]
|
|
18519
19292
|
}
|
|
18520
19293
|
),
|
|
18521
|
-
additionalText ? /* @__PURE__ */ (0,
|
|
19294
|
+
additionalText ? /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
|
|
18522
19295
|
"p",
|
|
18523
19296
|
{
|
|
18524
19297
|
css: [
|
|
@@ -18538,8 +19311,8 @@ init_emotion_jsx_shim();
|
|
|
18538
19311
|
|
|
18539
19312
|
// src/components/Table/Table.styles.ts
|
|
18540
19313
|
init_emotion_jsx_shim();
|
|
18541
|
-
var
|
|
18542
|
-
var table = ({ cellPadding = "var(--spacing-sm)" }) =>
|
|
19314
|
+
var import_react181 = require("@emotion/react");
|
|
19315
|
+
var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react181.css`
|
|
18543
19316
|
border-bottom: 1px solid var(--gray-400);
|
|
18544
19317
|
border-collapse: collapse;
|
|
18545
19318
|
min-width: 100%;
|
|
@@ -18559,21 +19332,21 @@ var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react176.css`
|
|
|
18559
19332
|
background-color: var(--gray-50);
|
|
18560
19333
|
}
|
|
18561
19334
|
`;
|
|
18562
|
-
var tableHead =
|
|
19335
|
+
var tableHead = import_react181.css`
|
|
18563
19336
|
color: var(--typography-base);
|
|
18564
19337
|
text-align: left;
|
|
18565
19338
|
`;
|
|
18566
|
-
var tableRow =
|
|
19339
|
+
var tableRow = import_react181.css`
|
|
18567
19340
|
border-bottom: 1px solid var(--gray-200);
|
|
18568
19341
|
font-size: var(--fs-sm);
|
|
18569
19342
|
`;
|
|
18570
|
-
var tableCellHead =
|
|
19343
|
+
var tableCellHead = import_react181.css`
|
|
18571
19344
|
font-size: var(--fs-sm);
|
|
18572
19345
|
font-weight: var(--fw-regular);
|
|
18573
19346
|
line-height: 1.2;
|
|
18574
19347
|
}
|
|
18575
19348
|
`;
|
|
18576
|
-
var responsiveTableContainer =
|
|
19349
|
+
var responsiveTableContainer = import_react181.css`
|
|
18577
19350
|
max-width: calc(100vw - var(--spacing-md) * 2);
|
|
18578
19351
|
overflow-x: auto;
|
|
18579
19352
|
${scrollbarStyles}
|
|
@@ -18592,60 +19365,60 @@ var responsiveTableContainer = import_react176.css`
|
|
|
18592
19365
|
`;
|
|
18593
19366
|
|
|
18594
19367
|
// src/components/Table/ResponsiveTableContainer.tsx
|
|
18595
|
-
var
|
|
19368
|
+
var import_jsx_runtime145 = require("@emotion/react/jsx-runtime");
|
|
18596
19369
|
var ResponsiveTableContainer = ({ children }) => {
|
|
18597
|
-
return /* @__PURE__ */ (0,
|
|
19370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("div", { css: responsiveTableContainer, children });
|
|
18598
19371
|
};
|
|
18599
19372
|
|
|
18600
19373
|
// src/components/Table/Table.tsx
|
|
18601
19374
|
init_emotion_jsx_shim();
|
|
18602
19375
|
var React22 = __toESM(require("react"));
|
|
18603
|
-
var
|
|
19376
|
+
var import_jsx_runtime146 = require("@emotion/react/jsx-runtime");
|
|
18604
19377
|
var Table = React22.forwardRef(
|
|
18605
19378
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
18606
|
-
return /* @__PURE__ */ (0,
|
|
19379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
18607
19380
|
}
|
|
18608
19381
|
);
|
|
18609
19382
|
var TableHead = React22.forwardRef(
|
|
18610
19383
|
({ children, ...otherProps }, ref) => {
|
|
18611
|
-
return /* @__PURE__ */ (0,
|
|
19384
|
+
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
|
|
18612
19385
|
}
|
|
18613
19386
|
);
|
|
18614
19387
|
var TableBody = React22.forwardRef(
|
|
18615
19388
|
({ children, ...otherProps }, ref) => {
|
|
18616
|
-
return /* @__PURE__ */ (0,
|
|
19389
|
+
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("tbody", { ref, ...otherProps, children });
|
|
18617
19390
|
}
|
|
18618
19391
|
);
|
|
18619
19392
|
var TableFoot = React22.forwardRef(
|
|
18620
19393
|
({ children, ...otherProps }, ref) => {
|
|
18621
|
-
return /* @__PURE__ */ (0,
|
|
19394
|
+
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("tfoot", { ref, ...otherProps, children });
|
|
18622
19395
|
}
|
|
18623
19396
|
);
|
|
18624
19397
|
var TableRow = React22.forwardRef(
|
|
18625
19398
|
({ children, ...otherProps }, ref) => {
|
|
18626
|
-
return /* @__PURE__ */ (0,
|
|
19399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
|
|
18627
19400
|
}
|
|
18628
19401
|
);
|
|
18629
19402
|
var TableCellHead = React22.forwardRef(
|
|
18630
19403
|
({ children, ...otherProps }, ref) => {
|
|
18631
|
-
return /* @__PURE__ */ (0,
|
|
19404
|
+
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
18632
19405
|
}
|
|
18633
19406
|
);
|
|
18634
19407
|
var TableCellData = React22.forwardRef(
|
|
18635
19408
|
({ children, ...otherProps }, ref) => {
|
|
18636
|
-
return /* @__PURE__ */ (0,
|
|
19409
|
+
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("td", { ref, ...otherProps, children });
|
|
18637
19410
|
}
|
|
18638
19411
|
);
|
|
18639
19412
|
|
|
18640
19413
|
// src/components/Tabs/Tabs.tsx
|
|
18641
19414
|
init_emotion_jsx_shim();
|
|
18642
|
-
var
|
|
18643
|
-
var
|
|
19415
|
+
var import_react183 = require("@ariakit/react");
|
|
19416
|
+
var import_react184 = require("react");
|
|
18644
19417
|
|
|
18645
19418
|
// src/components/Tabs/Tabs.styles.ts
|
|
18646
19419
|
init_emotion_jsx_shim();
|
|
18647
|
-
var
|
|
18648
|
-
var tabButtonStyles =
|
|
19420
|
+
var import_react182 = require("@emotion/react");
|
|
19421
|
+
var tabButtonStyles = import_react182.css`
|
|
18649
19422
|
align-items: center;
|
|
18650
19423
|
border: 0;
|
|
18651
19424
|
height: 2.5rem;
|
|
@@ -18662,16 +19435,16 @@ var tabButtonStyles = import_react177.css`
|
|
|
18662
19435
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
18663
19436
|
}
|
|
18664
19437
|
`;
|
|
18665
|
-
var tabButtonGroupStyles =
|
|
19438
|
+
var tabButtonGroupStyles = import_react182.css`
|
|
18666
19439
|
display: flex;
|
|
18667
19440
|
gap: var(--spacing-base);
|
|
18668
19441
|
border-bottom: 1px solid var(--gray-300);
|
|
18669
19442
|
`;
|
|
18670
19443
|
|
|
18671
19444
|
// src/components/Tabs/Tabs.tsx
|
|
18672
|
-
var
|
|
19445
|
+
var import_jsx_runtime147 = require("@emotion/react/jsx-runtime");
|
|
18673
19446
|
var useCurrentTab = () => {
|
|
18674
|
-
const context = (0,
|
|
19447
|
+
const context = (0, import_react183.useTabStore)();
|
|
18675
19448
|
if (!context) {
|
|
18676
19449
|
throw new Error("This component can only be used inside <Tabs>");
|
|
18677
19450
|
}
|
|
@@ -18685,11 +19458,11 @@ var Tabs = ({
|
|
|
18685
19458
|
manual,
|
|
18686
19459
|
...props
|
|
18687
19460
|
}) => {
|
|
18688
|
-
const selected = (0,
|
|
19461
|
+
const selected = (0, import_react184.useMemo)(() => {
|
|
18689
19462
|
if (selectedId) return selectedId;
|
|
18690
19463
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
18691
19464
|
}, [selectedId, useHashForState]);
|
|
18692
|
-
const onTabSelect = (0,
|
|
19465
|
+
const onTabSelect = (0, import_react184.useCallback)(
|
|
18693
19466
|
(value) => {
|
|
18694
19467
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
18695
19468
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -18700,23 +19473,23 @@ var Tabs = ({
|
|
|
18700
19473
|
},
|
|
18701
19474
|
[onSelectedIdChange, useHashForState]
|
|
18702
19475
|
);
|
|
18703
|
-
return /* @__PURE__ */ (0,
|
|
19476
|
+
return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_react183.TabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
|
|
18704
19477
|
};
|
|
18705
19478
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
18706
|
-
return /* @__PURE__ */ (0,
|
|
19479
|
+
return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_react183.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
18707
19480
|
};
|
|
18708
19481
|
var TabButton = ({
|
|
18709
19482
|
children,
|
|
18710
19483
|
id,
|
|
18711
19484
|
...props
|
|
18712
19485
|
}) => {
|
|
18713
|
-
return /* @__PURE__ */ (0,
|
|
19486
|
+
return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_react183.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
18714
19487
|
};
|
|
18715
19488
|
var TabContent = ({
|
|
18716
19489
|
children,
|
|
18717
19490
|
...props
|
|
18718
19491
|
}) => {
|
|
18719
|
-
return /* @__PURE__ */ (0,
|
|
19492
|
+
return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_react183.TabPanel, { ...props, children });
|
|
18720
19493
|
};
|
|
18721
19494
|
|
|
18722
19495
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -18724,8 +19497,8 @@ init_emotion_jsx_shim();
|
|
|
18724
19497
|
|
|
18725
19498
|
// src/components/Validation/StatusBullet.styles.ts
|
|
18726
19499
|
init_emotion_jsx_shim();
|
|
18727
|
-
var
|
|
18728
|
-
var StatusBulletContainer =
|
|
19500
|
+
var import_react185 = require("@emotion/react");
|
|
19501
|
+
var StatusBulletContainer = import_react185.css`
|
|
18729
19502
|
align-items: center;
|
|
18730
19503
|
align-self: center;
|
|
18731
19504
|
color: var(--gray-500);
|
|
@@ -18741,33 +19514,33 @@ var StatusBulletContainer = import_react180.css`
|
|
|
18741
19514
|
display: block;
|
|
18742
19515
|
}
|
|
18743
19516
|
`;
|
|
18744
|
-
var StatusBulletBase =
|
|
19517
|
+
var StatusBulletBase = import_react185.css`
|
|
18745
19518
|
font-size: var(--fs-sm);
|
|
18746
19519
|
&:before {
|
|
18747
19520
|
width: var(--fs-xs);
|
|
18748
19521
|
height: var(--fs-xs);
|
|
18749
19522
|
}
|
|
18750
19523
|
`;
|
|
18751
|
-
var StatusBulletSmall =
|
|
19524
|
+
var StatusBulletSmall = import_react185.css`
|
|
18752
19525
|
font-size: var(--fs-xs);
|
|
18753
19526
|
&:before {
|
|
18754
19527
|
width: var(--fs-xxs);
|
|
18755
19528
|
height: var(--fs-xxs);
|
|
18756
19529
|
}
|
|
18757
19530
|
`;
|
|
18758
|
-
var StatusDraft =
|
|
19531
|
+
var StatusDraft = import_react185.css`
|
|
18759
19532
|
&:before {
|
|
18760
19533
|
background: var(--white);
|
|
18761
19534
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
18762
19535
|
}
|
|
18763
19536
|
`;
|
|
18764
|
-
var StatusModified =
|
|
19537
|
+
var StatusModified = import_react185.css`
|
|
18765
19538
|
&:before {
|
|
18766
19539
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
18767
19540
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
18768
19541
|
}
|
|
18769
19542
|
`;
|
|
18770
|
-
var StatusError =
|
|
19543
|
+
var StatusError = import_react185.css`
|
|
18771
19544
|
color: var(--error);
|
|
18772
19545
|
&:before {
|
|
18773
19546
|
/* TODO: replace this with an svg icon */
|
|
@@ -18780,29 +19553,29 @@ var StatusError = import_react180.css`
|
|
|
18780
19553
|
);
|
|
18781
19554
|
}
|
|
18782
19555
|
`;
|
|
18783
|
-
var StatusPublished =
|
|
19556
|
+
var StatusPublished = import_react185.css`
|
|
18784
19557
|
&:before {
|
|
18785
19558
|
background: var(--accent-dark);
|
|
18786
19559
|
}
|
|
18787
19560
|
`;
|
|
18788
|
-
var StatusOrphan =
|
|
19561
|
+
var StatusOrphan = import_react185.css`
|
|
18789
19562
|
&:before {
|
|
18790
19563
|
background: var(--brand-secondary-5);
|
|
18791
19564
|
}
|
|
18792
19565
|
`;
|
|
18793
|
-
var StatusUnknown =
|
|
19566
|
+
var StatusUnknown = import_react185.css`
|
|
18794
19567
|
&:before {
|
|
18795
19568
|
background: var(--gray-800);
|
|
18796
19569
|
}
|
|
18797
19570
|
`;
|
|
18798
|
-
var StatusDeleted =
|
|
19571
|
+
var StatusDeleted = import_react185.css`
|
|
18799
19572
|
&:before {
|
|
18800
19573
|
background: var(--error);
|
|
18801
19574
|
}
|
|
18802
19575
|
`;
|
|
18803
19576
|
|
|
18804
19577
|
// src/components/Validation/StatusBullet.tsx
|
|
18805
|
-
var
|
|
19578
|
+
var import_jsx_runtime148 = require("@emotion/react/jsx-runtime");
|
|
18806
19579
|
var currentStateStyles = {
|
|
18807
19580
|
Error: StatusError,
|
|
18808
19581
|
Modified: StatusModified,
|
|
@@ -18826,7 +19599,7 @@ var StatusBullet = ({
|
|
|
18826
19599
|
compact = false,
|
|
18827
19600
|
...props
|
|
18828
19601
|
}) => {
|
|
18829
|
-
const StatusComponent = () => /* @__PURE__ */ (0,
|
|
19602
|
+
const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
|
|
18830
19603
|
"span",
|
|
18831
19604
|
{
|
|
18832
19605
|
role: "status",
|
|
@@ -18836,9 +19609,9 @@ var StatusBullet = ({
|
|
|
18836
19609
|
}
|
|
18837
19610
|
);
|
|
18838
19611
|
if (compact) {
|
|
18839
|
-
return /* @__PURE__ */ (0,
|
|
19612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(StatusComponent, {});
|
|
18840
19613
|
}
|
|
18841
|
-
return /* @__PURE__ */ (0,
|
|
19614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(StatusComponent, {}) }) });
|
|
18842
19615
|
};
|
|
18843
19616
|
// Annotate the CommonJS export names for ESM import in node:
|
|
18844
19617
|
0 && (module.exports = {
|
|
@@ -18963,11 +19736,15 @@ var StatusBullet = ({
|
|
|
18963
19736
|
ParameterMultiSelect,
|
|
18964
19737
|
ParameterMultiSelectInner,
|
|
18965
19738
|
ParameterNameAndPublicIdInput,
|
|
19739
|
+
ParameterNumberSlider,
|
|
19740
|
+
ParameterNumberSliderInner,
|
|
18966
19741
|
ParameterOverrideMarker,
|
|
18967
19742
|
ParameterRichText,
|
|
18968
19743
|
ParameterRichTextInner,
|
|
18969
19744
|
ParameterSelect,
|
|
18970
19745
|
ParameterSelectInner,
|
|
19746
|
+
ParameterSelectSlider,
|
|
19747
|
+
ParameterSelectSliderInner,
|
|
18971
19748
|
ParameterShell,
|
|
18972
19749
|
ParameterShellContext,
|
|
18973
19750
|
ParameterShellPlaceholder,
|
|
@@ -18989,6 +19766,8 @@ var StatusBullet = ({
|
|
|
18989
19766
|
SegmentedControl,
|
|
18990
19767
|
SelectableMenuItem,
|
|
18991
19768
|
Skeleton,
|
|
19769
|
+
Slider,
|
|
19770
|
+
SliderLabels,
|
|
18992
19771
|
Spinner,
|
|
18993
19772
|
StatusBullet,
|
|
18994
19773
|
SuccessMessage,
|