@uniformdev/mesh-sdk-react 19.162.2-alpha.11 → 19.165.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/index.d.mts +8 -3
- package/dist/index.d.ts +8 -3
- package/dist/index.esm.js +122 -69
- package/dist/index.js +268 -218
- package/dist/index.mjs +122 -69
- package/package.json +6 -6
package/dist/index.js
CHANGED
|
@@ -33,10 +33,10 @@ var src_exports = {};
|
|
|
33
33
|
__export(src_exports, {
|
|
34
34
|
$createVariableNode: () => $createVariableNode,
|
|
35
35
|
$isVariableNode: () => $isVariableNode,
|
|
36
|
-
AddListButton: () =>
|
|
37
|
-
Button: () =>
|
|
36
|
+
AddListButton: () => import_design_system64.AddListButton,
|
|
37
|
+
Button: () => import_design_system64.Button,
|
|
38
38
|
CHECKBOX_OPERATORS: () => CHECKBOX_OPERATORS,
|
|
39
|
-
Callout: () =>
|
|
39
|
+
Callout: () => import_design_system64.Callout,
|
|
40
40
|
ControlledValuePlugin: () => ControlledValuePlugin,
|
|
41
41
|
DATE_OPERATORS: () => DATE_OPERATORS,
|
|
42
42
|
DISCONNECT_VARIABLE_COMMAND: () => DISCONNECT_VARIABLE_COMMAND,
|
|
@@ -51,7 +51,7 @@ __export(src_exports, {
|
|
|
51
51
|
DateRangeEditor: () => DateRangeEditor,
|
|
52
52
|
DefaultSearchRow: () => DefaultSearchRow,
|
|
53
53
|
DefaultSelectedItem: () => DefaultSelectedItem,
|
|
54
|
-
DrawerContent: () =>
|
|
54
|
+
DrawerContent: () => import_design_system64.DrawerContent,
|
|
55
55
|
EDIT_VARIABLE_COMMAND: () => EDIT_VARIABLE_COMMAND,
|
|
56
56
|
EntrySearch: () => EntrySearch,
|
|
57
57
|
FilterButton: () => FilterButton2,
|
|
@@ -62,22 +62,22 @@ __export(src_exports, {
|
|
|
62
62
|
FilterMenu: () => FilterMenu,
|
|
63
63
|
FilterMultiChoiceEditor: () => FilterMultiChoiceEditor,
|
|
64
64
|
FilterSingleChoiceEditor: () => FilterSingleChoiceEditor,
|
|
65
|
-
Heading: () =>
|
|
65
|
+
Heading: () => import_design_system64.Heading,
|
|
66
66
|
INSERT_VARIABLE_COMMAND: () => INSERT_VARIABLE_COMMAND,
|
|
67
67
|
Icons: () => icons_exports,
|
|
68
|
-
Input: () =>
|
|
69
|
-
InputComboBox: () =>
|
|
70
|
-
InputKeywordSearch: () =>
|
|
71
|
-
InputSelect: () =>
|
|
72
|
-
InputToggle: () =>
|
|
68
|
+
Input: () => import_design_system64.Input,
|
|
69
|
+
InputComboBox: () => import_design_system64.InputComboBox,
|
|
70
|
+
InputKeywordSearch: () => import_design_system64.InputKeywordSearch,
|
|
71
|
+
InputSelect: () => import_design_system64.InputSelect,
|
|
72
|
+
InputToggle: () => import_design_system64.InputToggle,
|
|
73
73
|
InputVariables: () => InputVariables,
|
|
74
|
-
Label: () =>
|
|
74
|
+
Label: () => import_design_system64.Label,
|
|
75
75
|
LinkButton: () => LinkButton,
|
|
76
|
-
LoadingIndicator: () =>
|
|
77
|
-
LoadingOverlay: () =>
|
|
76
|
+
LoadingIndicator: () => import_design_system64.LoadingIndicator,
|
|
77
|
+
LoadingOverlay: () => import_design_system64.LoadingOverlay,
|
|
78
78
|
MULTI_SELECT_OPERATORS: () => MULTI_SELECT_OPERATORS,
|
|
79
|
-
Menu: () =>
|
|
80
|
-
MenuItem: () =>
|
|
79
|
+
Menu: () => import_design_system64.Menu,
|
|
80
|
+
MenuItem: () => import_design_system64.MenuItem,
|
|
81
81
|
MeshApp: () => MeshApp,
|
|
82
82
|
NUMBER_OPERATORS: () => NUMBER_OPERATORS,
|
|
83
83
|
NumberEditor: () => NumberEditor,
|
|
@@ -95,22 +95,22 @@ __export(src_exports, {
|
|
|
95
95
|
PUBLISH_STATUS_FIELD_OPERATORS: () => PUBLISH_STATUS_FIELD_OPERATORS,
|
|
96
96
|
ParamTypeDynamicDataProvider: () => ParamTypeDynamicDataProvider,
|
|
97
97
|
ParameterConnectionIndicator: () => ParameterConnectionIndicator,
|
|
98
|
-
ParameterGroup: () =>
|
|
99
|
-
ParameterImage: () =>
|
|
100
|
-
ParameterImageInner: () =>
|
|
101
|
-
ParameterInput: () =>
|
|
102
|
-
ParameterInputInner: () =>
|
|
103
|
-
ParameterLabel: () =>
|
|
104
|
-
ParameterMenuButton: () =>
|
|
98
|
+
ParameterGroup: () => import_design_system64.ParameterGroup,
|
|
99
|
+
ParameterImage: () => import_design_system64.ParameterImage,
|
|
100
|
+
ParameterImageInner: () => import_design_system64.ParameterImageInner,
|
|
101
|
+
ParameterInput: () => import_design_system64.ParameterInput,
|
|
102
|
+
ParameterInputInner: () => import_design_system64.ParameterInputInner,
|
|
103
|
+
ParameterLabel: () => import_design_system64.ParameterLabel,
|
|
104
|
+
ParameterMenuButton: () => import_design_system64.ParameterMenuButton,
|
|
105
105
|
ParameterOrSingleVariable: () => ParameterOrSingleVariable,
|
|
106
|
-
ParameterSelect: () =>
|
|
107
|
-
ParameterSelectInner: () =>
|
|
108
|
-
ParameterShell: () =>
|
|
106
|
+
ParameterSelect: () => import_design_system64.ParameterSelect,
|
|
107
|
+
ParameterSelectInner: () => import_design_system64.ParameterSelectInner,
|
|
108
|
+
ParameterShell: () => import_design_system64.ParameterShell,
|
|
109
109
|
ParameterShellContext: () => import_design_system14.ParameterShellContext,
|
|
110
|
-
ParameterTextarea: () =>
|
|
111
|
-
ParameterTextareaInner: () =>
|
|
112
|
-
ParameterToggle: () =>
|
|
113
|
-
ParameterToggleInner: () =>
|
|
110
|
+
ParameterTextarea: () => import_design_system64.ParameterTextarea,
|
|
111
|
+
ParameterTextareaInner: () => import_design_system64.ParameterTextareaInner,
|
|
112
|
+
ParameterToggle: () => import_design_system64.ParameterToggle,
|
|
113
|
+
ParameterToggleInner: () => import_design_system64.ParameterToggleInner,
|
|
114
114
|
ParameterVariables: () => ParameterVariables,
|
|
115
115
|
ProductPreviewList: () => ProductPreviewList,
|
|
116
116
|
ProductQuery: () => ProductQuery,
|
|
@@ -133,8 +133,8 @@ __export(src_exports, {
|
|
|
133
133
|
SELECT_OPERATORS: () => SELECT_OPERATORS,
|
|
134
134
|
SYSTEM_DATE_OPERATORS: () => SYSTEM_DATE_OPERATORS,
|
|
135
135
|
SYSTEM_FIELD_OPERATORS: () => SYSTEM_FIELD_OPERATORS,
|
|
136
|
-
ScrollableList: () =>
|
|
137
|
-
ScrollableListItem: () =>
|
|
136
|
+
ScrollableList: () => import_design_system64.ScrollableList,
|
|
137
|
+
ScrollableListItem: () => import_design_system64.ScrollableListItem,
|
|
138
138
|
SearchAndFilter: () => SearchAndFilter,
|
|
139
139
|
SearchAndFilterContext: () => SearchAndFilterContext,
|
|
140
140
|
SearchAndFilterOptionsContainer: () => SearchAndFilterOptionsContainer2,
|
|
@@ -146,12 +146,13 @@ __export(src_exports, {
|
|
|
146
146
|
SortItems: () => SortItems,
|
|
147
147
|
StatusMultiEditor: () => StatusMultiEditor,
|
|
148
148
|
StatusSingleEditor: () => StatusSingleEditor,
|
|
149
|
-
Switch: () =>
|
|
149
|
+
Switch: () => import_design_system64.Switch,
|
|
150
150
|
TEXTBOX_OPERATORS: () => TEXTBOX_OPERATORS,
|
|
151
151
|
TextEditor: () => TextEditor,
|
|
152
|
+
TextMultiChoiceEditor: () => TextMultiChoiceEditor,
|
|
152
153
|
TextVariableRenderer: () => TextVariableRenderer,
|
|
153
|
-
Textarea: () =>
|
|
154
|
-
Theme: () =>
|
|
154
|
+
Textarea: () => import_design_system64.Textarea,
|
|
155
|
+
Theme: () => import_design_system64.Theme,
|
|
155
156
|
USER_OPERATORS: () => USER_OPERATORS,
|
|
156
157
|
VariableEditor: () => VariableEditor,
|
|
157
158
|
VariableNode: () => VariableNode,
|
|
@@ -247,7 +248,7 @@ __export(src_exports, {
|
|
|
247
248
|
useVariableEditor: () => useVariableEditor,
|
|
248
249
|
useVariables: () => useVariables,
|
|
249
250
|
useVariablesMenu: () => useVariablesMenu,
|
|
250
|
-
utilityColors: () =>
|
|
251
|
+
utilityColors: () => import_design_system64.utilityColors,
|
|
251
252
|
variableDefaultTextValue: () => variableDefaultTextValue,
|
|
252
253
|
variablePrefix: () => variablePrefix,
|
|
253
254
|
variableSuffix: () => variableSuffix,
|
|
@@ -8324,32 +8325,80 @@ var TextEditor = ({
|
|
|
8324
8325
|
);
|
|
8325
8326
|
};
|
|
8326
8327
|
|
|
8328
|
+
// src/components/SearchAndFilter/editors/TextMultiChoiceEditor.tsx
|
|
8329
|
+
var import_design_system52 = require("@uniformdev/design-system");
|
|
8330
|
+
var import_react85 = require("react");
|
|
8331
|
+
var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
|
|
8332
|
+
var TextMultiChoiceEditor = ({
|
|
8333
|
+
value,
|
|
8334
|
+
disabled,
|
|
8335
|
+
readOnly,
|
|
8336
|
+
valueTestId,
|
|
8337
|
+
...props
|
|
8338
|
+
}) => {
|
|
8339
|
+
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
8340
|
+
const isClearable = !readOnly || !disabled;
|
|
8341
|
+
const { groupedOptions, selectedOptions } = (0, import_react85.useMemo)(() => {
|
|
8342
|
+
var _a;
|
|
8343
|
+
const coercedValue = typeof value === "string" ? [value] : value != null ? value : [];
|
|
8344
|
+
const options = (_a = coercedValue.map((v) => ({ label: v, value: v }))) != null ? _a : [];
|
|
8345
|
+
return (0, import_design_system52.convertComboBoxGroupsToSelectableGroups)({ options, selectedItems: new Set(value) });
|
|
8346
|
+
}, [value]);
|
|
8347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
|
|
8348
|
+
import_design_system52.InputCreatableComboBox,
|
|
8349
|
+
{
|
|
8350
|
+
...props,
|
|
8351
|
+
placeholder: "Type a value\u2026",
|
|
8352
|
+
noOptionsMessage: () => "Type to create a new value",
|
|
8353
|
+
options: groupedOptions,
|
|
8354
|
+
isMulti: true,
|
|
8355
|
+
isClearable,
|
|
8356
|
+
isDisabled: disabled,
|
|
8357
|
+
onChange: (e) => {
|
|
8358
|
+
const selectedValues = (0, import_design_system52.getComboBoxSelectedSelectableGroups)(e);
|
|
8359
|
+
return props.onChange([...selectedValues]);
|
|
8360
|
+
},
|
|
8361
|
+
value: selectedOptions,
|
|
8362
|
+
"aria-readonly": readOnly,
|
|
8363
|
+
styles: {
|
|
8364
|
+
menu(base) {
|
|
8365
|
+
return {
|
|
8366
|
+
...base,
|
|
8367
|
+
minWidth: "max-content"
|
|
8368
|
+
};
|
|
8369
|
+
}
|
|
8370
|
+
},
|
|
8371
|
+
...readOnlyProps
|
|
8372
|
+
}
|
|
8373
|
+
) });
|
|
8374
|
+
};
|
|
8375
|
+
|
|
8327
8376
|
// src/components/SearchAndFilter/FilterButton.tsx
|
|
8328
|
-
var
|
|
8377
|
+
var import_design_system54 = require("@uniformdev/design-system");
|
|
8329
8378
|
|
|
8330
8379
|
// src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
|
|
8331
|
-
var
|
|
8332
|
-
var
|
|
8333
|
-
var SearchAndFilterControlsWrapper = (gridColumns) =>
|
|
8380
|
+
var import_react86 = require("@emotion/react");
|
|
8381
|
+
var import_design_system53 = require("@uniformdev/design-system");
|
|
8382
|
+
var SearchAndFilterControlsWrapper = (gridColumns) => import_react86.css`
|
|
8334
8383
|
align-items: stretch;
|
|
8335
8384
|
display: grid;
|
|
8336
8385
|
grid-template-columns: ${gridColumns};
|
|
8337
8386
|
gap: var(--spacing-sm);
|
|
8338
8387
|
`;
|
|
8339
|
-
var SearchAndFilterOutterControlWrapper = (gridColumns) =>
|
|
8388
|
+
var SearchAndFilterOutterControlWrapper = (gridColumns) => import_react86.css`
|
|
8340
8389
|
align-items: stretch;
|
|
8341
8390
|
display: grid;
|
|
8342
8391
|
grid-template-columns: ${gridColumns};
|
|
8343
8392
|
gap: var(--spacing-sm);
|
|
8344
8393
|
`;
|
|
8345
|
-
var ConditionalFilterRow =
|
|
8394
|
+
var ConditionalFilterRow = import_react86.css`
|
|
8346
8395
|
align-items: baseline;
|
|
8347
8396
|
display: grid;
|
|
8348
8397
|
grid-template-columns: 35px 1fr;
|
|
8349
8398
|
gap: var(--spacing-sm);
|
|
8350
8399
|
margin-left: var(--spacing-base);
|
|
8351
8400
|
|
|
8352
|
-
${(0,
|
|
8401
|
+
${(0, import_design_system53.cq)("380px")} {
|
|
8353
8402
|
&:after {
|
|
8354
8403
|
content: '';
|
|
8355
8404
|
display: block;
|
|
@@ -8368,22 +8417,22 @@ var ConditionalFilterRow = import_react85.css`
|
|
|
8368
8417
|
grid-template-columns: 50px 1fr;
|
|
8369
8418
|
}
|
|
8370
8419
|
|
|
8371
|
-
${(0,
|
|
8420
|
+
${(0, import_design_system53.cq)("580px")} {
|
|
8372
8421
|
&:after {
|
|
8373
8422
|
display: none;
|
|
8374
8423
|
}
|
|
8375
8424
|
}
|
|
8376
8425
|
|
|
8377
8426
|
@media (prefers-reduced-motion: no-preference) {
|
|
8378
|
-
animation: ${
|
|
8427
|
+
animation: ${import_design_system53.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
|
|
8379
8428
|
}
|
|
8380
8429
|
`;
|
|
8381
|
-
var ConditionalInputRow =
|
|
8430
|
+
var ConditionalInputRow = import_react86.css`
|
|
8382
8431
|
display: flex;
|
|
8383
8432
|
gap: var(--spacing-sm);
|
|
8384
8433
|
flex-wrap: wrap;
|
|
8385
8434
|
|
|
8386
|
-
${(0,
|
|
8435
|
+
${(0, import_design_system53.cq)("380px")} {
|
|
8387
8436
|
& > div:nth-child(-n + 2) {
|
|
8388
8437
|
width: calc(50% - var(--spacing-sm));
|
|
8389
8438
|
}
|
|
@@ -8392,7 +8441,7 @@ var ConditionalInputRow = import_react85.css`
|
|
|
8392
8441
|
width: calc(100% - 48px);
|
|
8393
8442
|
}
|
|
8394
8443
|
}
|
|
8395
|
-
${(0,
|
|
8444
|
+
${(0, import_design_system53.cq)("764px")} {
|
|
8396
8445
|
align-items: flex-start;
|
|
8397
8446
|
display: grid;
|
|
8398
8447
|
grid-template-columns: 200px 160px 1fr 32px;
|
|
@@ -8402,11 +8451,11 @@ var ConditionalInputRow = import_react85.css`
|
|
|
8402
8451
|
}
|
|
8403
8452
|
}
|
|
8404
8453
|
`;
|
|
8405
|
-
var SearchInput =
|
|
8454
|
+
var SearchInput = import_react86.css`
|
|
8406
8455
|
max-height: 40px;
|
|
8407
8456
|
min-height: unset;
|
|
8408
8457
|
`;
|
|
8409
|
-
var BindableKeywordSearchInputStyles =
|
|
8458
|
+
var BindableKeywordSearchInputStyles = import_react86.css`
|
|
8410
8459
|
position: relative;
|
|
8411
8460
|
width: 100%;
|
|
8412
8461
|
|
|
@@ -8421,19 +8470,19 @@ var BindableKeywordSearchInputStyles = import_react85.css`
|
|
|
8421
8470
|
white-space: nowrap;
|
|
8422
8471
|
}
|
|
8423
8472
|
`;
|
|
8424
|
-
var ClearSearchButtonContainer =
|
|
8473
|
+
var ClearSearchButtonContainer = import_react86.css`
|
|
8425
8474
|
align-items: center;
|
|
8426
8475
|
display: flex;
|
|
8427
8476
|
position: absolute;
|
|
8428
8477
|
inset: 0 var(--spacing-lg) 0 auto;
|
|
8429
8478
|
`;
|
|
8430
|
-
var ClearSearchButtonStyles =
|
|
8479
|
+
var ClearSearchButtonStyles = import_react86.css`
|
|
8431
8480
|
background: none;
|
|
8432
8481
|
border: none;
|
|
8433
8482
|
padding: 0;
|
|
8434
8483
|
pointer-events: all;
|
|
8435
8484
|
`;
|
|
8436
|
-
var FilterButton =
|
|
8485
|
+
var FilterButton = import_react86.css`
|
|
8437
8486
|
align-items: center;
|
|
8438
8487
|
background: var(--white);
|
|
8439
8488
|
border: 1px solid var(--gray-300);
|
|
@@ -8469,13 +8518,13 @@ var FilterButton = import_react85.css`
|
|
|
8469
8518
|
opacity: var(--opacity-50);
|
|
8470
8519
|
}
|
|
8471
8520
|
`;
|
|
8472
|
-
var FilterButtonText =
|
|
8521
|
+
var FilterButtonText = import_react86.css`
|
|
8473
8522
|
overflow: hidden;
|
|
8474
8523
|
text-overflow: ellipsis;
|
|
8475
8524
|
white-space: nowrap;
|
|
8476
8525
|
max-width: 14ch;
|
|
8477
8526
|
`;
|
|
8478
|
-
var FilterButtonSelected =
|
|
8527
|
+
var FilterButtonSelected = import_react86.css`
|
|
8479
8528
|
background: var(--gray-100);
|
|
8480
8529
|
border-color: var(--gray-300);
|
|
8481
8530
|
|
|
@@ -8483,7 +8532,7 @@ var FilterButtonSelected = import_react85.css`
|
|
|
8483
8532
|
color: var(--accent-dark);
|
|
8484
8533
|
}
|
|
8485
8534
|
`;
|
|
8486
|
-
var FilterButtonWithOptions =
|
|
8535
|
+
var FilterButtonWithOptions = import_react86.css`
|
|
8487
8536
|
:where([aria-expanded='true']) {
|
|
8488
8537
|
background: var(--purple-rain-100);
|
|
8489
8538
|
border-color: var(--accent-light);
|
|
@@ -8495,14 +8544,14 @@ var FilterButtonWithOptions = import_react85.css`
|
|
|
8495
8544
|
}
|
|
8496
8545
|
}
|
|
8497
8546
|
`;
|
|
8498
|
-
var SearchIcon =
|
|
8547
|
+
var SearchIcon = import_react86.css`
|
|
8499
8548
|
color: var(--icon-color);
|
|
8500
8549
|
position: absolute;
|
|
8501
8550
|
inset: 0 var(--spacing-base) 0 auto;
|
|
8502
8551
|
margin: auto;
|
|
8503
8552
|
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
8504
8553
|
`;
|
|
8505
|
-
var AddConditionalBtn =
|
|
8554
|
+
var AddConditionalBtn = import_react86.css`
|
|
8506
8555
|
align-items: center;
|
|
8507
8556
|
background: transparent;
|
|
8508
8557
|
border: none;
|
|
@@ -8521,31 +8570,32 @@ var AddConditionalBtn = import_react85.css`
|
|
|
8521
8570
|
color: var(--gray-400);
|
|
8522
8571
|
}
|
|
8523
8572
|
`;
|
|
8524
|
-
var Title =
|
|
8573
|
+
var Title = import_react86.css`
|
|
8525
8574
|
color: var(--typography-light);
|
|
8526
8575
|
|
|
8527
8576
|
&:focus {
|
|
8528
8577
|
outline: none;
|
|
8529
8578
|
}
|
|
8530
8579
|
`;
|
|
8531
|
-
var ResetConditionsBtn =
|
|
8580
|
+
var ResetConditionsBtn = import_react86.css`
|
|
8532
8581
|
background: transparent;
|
|
8533
8582
|
border: none;
|
|
8534
8583
|
color: var(--action-destructive-default);
|
|
8535
8584
|
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
8536
|
-
padding: 0;
|
|
8585
|
+
padding: 0 var(--spacing-sm) 0 0;
|
|
8537
8586
|
|
|
8538
8587
|
&:hover,
|
|
8539
8588
|
&:focus {
|
|
8540
8589
|
color: var(--action-destructive-hover);
|
|
8541
8590
|
}
|
|
8542
8591
|
`;
|
|
8543
|
-
var IconBtn =
|
|
8592
|
+
var IconBtn = import_react86.css`
|
|
8593
|
+
align-self: center;
|
|
8544
8594
|
background: transparent;
|
|
8545
8595
|
border: none;
|
|
8546
8596
|
padding: var(--spacing-sm);
|
|
8547
8597
|
`;
|
|
8548
|
-
var SearchAndFilterOptionsContainer =
|
|
8598
|
+
var SearchAndFilterOptionsContainer = import_react86.css`
|
|
8549
8599
|
background: var(--gray-50);
|
|
8550
8600
|
border: 1px solid var(--gray-300);
|
|
8551
8601
|
border-radius: var(--rounded-base);
|
|
@@ -8558,19 +8608,19 @@ var SearchAndFilterOptionsContainer = import_react85.css`
|
|
|
8558
8608
|
position: relative;
|
|
8559
8609
|
z-index: 2;
|
|
8560
8610
|
`;
|
|
8561
|
-
var SearchAndFilterOptionsInnerContainer =
|
|
8611
|
+
var SearchAndFilterOptionsInnerContainer = import_react86.css`
|
|
8562
8612
|
display: flex;
|
|
8563
8613
|
flex-direction: column;
|
|
8564
8614
|
gap: var(--spacing-sm);
|
|
8565
8615
|
padding-inline: var(--spacing-md);
|
|
8566
8616
|
`;
|
|
8567
|
-
var SearchAndFilterButtonGroup =
|
|
8617
|
+
var SearchAndFilterButtonGroup = import_react86.css`
|
|
8568
8618
|
margin-top: var(--spacing-xs);
|
|
8569
8619
|
margin-left: calc(56px + var(--spacing-md));
|
|
8570
8620
|
`;
|
|
8571
8621
|
|
|
8572
8622
|
// src/components/SearchAndFilter/FilterButton.tsx
|
|
8573
|
-
var
|
|
8623
|
+
var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
|
|
8574
8624
|
var FilterButton2 = ({
|
|
8575
8625
|
text = "Filters",
|
|
8576
8626
|
icon = "filter-add",
|
|
@@ -8579,7 +8629,7 @@ var FilterButton2 = ({
|
|
|
8579
8629
|
dataTestId,
|
|
8580
8630
|
...props
|
|
8581
8631
|
}) => {
|
|
8582
|
-
return /* @__PURE__ */ (0,
|
|
8632
|
+
return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
|
|
8583
8633
|
"button",
|
|
8584
8634
|
{
|
|
8585
8635
|
type: "button",
|
|
@@ -8591,9 +8641,9 @@ var FilterButton2 = ({
|
|
|
8591
8641
|
...props,
|
|
8592
8642
|
"data-testid": dataTestId,
|
|
8593
8643
|
children: [
|
|
8594
|
-
/* @__PURE__ */ (0,
|
|
8595
|
-
/* @__PURE__ */ (0,
|
|
8596
|
-
filterCount ? /* @__PURE__ */ (0,
|
|
8644
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_design_system54.Icon, { icon, iconColor: "currentColor", size: "1rem" }),
|
|
8645
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: FilterButtonText, children: text }),
|
|
8646
|
+
filterCount ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_design_system54.Counter, { count: filterCount, bgColor: "var(--white)" }) : null
|
|
8597
8647
|
]
|
|
8598
8648
|
}
|
|
8599
8649
|
);
|
|
@@ -8601,28 +8651,25 @@ var FilterButton2 = ({
|
|
|
8601
8651
|
|
|
8602
8652
|
// src/components/SearchAndFilter/FilterControls.tsx
|
|
8603
8653
|
var import_CgClose5 = require("@react-icons/all-files/cg/CgClose");
|
|
8604
|
-
var
|
|
8654
|
+
var import_design_system56 = require("@uniformdev/design-system");
|
|
8605
8655
|
var import_lexical11 = require("lexical");
|
|
8606
|
-
var
|
|
8656
|
+
var import_react88 = require("react");
|
|
8607
8657
|
var import_react_use10 = require("react-use");
|
|
8608
8658
|
var import_uuid3 = require("uuid");
|
|
8609
8659
|
|
|
8610
8660
|
// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
|
|
8611
|
-
var
|
|
8612
|
-
var
|
|
8661
|
+
var import_design_system55 = require("@uniformdev/design-system");
|
|
8662
|
+
var import_react87 = require("react");
|
|
8613
8663
|
|
|
8614
8664
|
// src/components/SearchAndFilter/FilterEditor.tsx
|
|
8615
|
-
var
|
|
8665
|
+
var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
|
|
8616
8666
|
var FilterEditorRenderer = ({ editorType, ...props }) => {
|
|
8617
8667
|
const { filterMapper: contextFilterMapper } = useSearchAndFilter();
|
|
8618
8668
|
const Editor = contextFilterMapper == null ? void 0 : contextFilterMapper[editorType];
|
|
8619
|
-
if (!Editor) {
|
|
8620
|
-
return
|
|
8669
|
+
if (!Editor || editorType === "empty") {
|
|
8670
|
+
return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", {});
|
|
8621
8671
|
}
|
|
8622
|
-
|
|
8623
|
-
return null;
|
|
8624
|
-
}
|
|
8625
|
-
return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Editor, { ...props });
|
|
8672
|
+
return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Editor, { ...props });
|
|
8626
8673
|
};
|
|
8627
8674
|
var filterMapper = {
|
|
8628
8675
|
multiChoice: FilterMultiChoiceEditor,
|
|
@@ -8630,6 +8677,7 @@ var filterMapper = {
|
|
|
8630
8677
|
date: DateEditor,
|
|
8631
8678
|
dateRange: DateRangeEditor,
|
|
8632
8679
|
text: TextEditor,
|
|
8680
|
+
textMultiChoice: TextMultiChoiceEditor,
|
|
8633
8681
|
numberRange: NumberRangeEditor,
|
|
8634
8682
|
number: NumberEditor,
|
|
8635
8683
|
statusMultiChoice: StatusMultiEditor,
|
|
@@ -8639,9 +8687,9 @@ var filterMapper = {
|
|
|
8639
8687
|
function withInputVariables(WrappedComponent) {
|
|
8640
8688
|
const WithInputVariables = (props) => {
|
|
8641
8689
|
if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
|
|
8642
|
-
return /* @__PURE__ */ (0,
|
|
8690
|
+
return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(WrappedComponent, { ...props });
|
|
8643
8691
|
}
|
|
8644
|
-
return /* @__PURE__ */ (0,
|
|
8692
|
+
return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
|
|
8645
8693
|
InputVariables,
|
|
8646
8694
|
{
|
|
8647
8695
|
disableInlineMenu: true,
|
|
@@ -8649,7 +8697,7 @@ function withInputVariables(WrappedComponent) {
|
|
|
8649
8697
|
onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
|
|
8650
8698
|
value: props.value,
|
|
8651
8699
|
disabled: props.disabled,
|
|
8652
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
8700
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(WrappedComponent, { ...props })
|
|
8653
8701
|
}
|
|
8654
8702
|
);
|
|
8655
8703
|
};
|
|
@@ -8659,16 +8707,16 @@ function withInputVariablesForMultiValue(WrappedComponent) {
|
|
|
8659
8707
|
const WithInputVariables = (props) => {
|
|
8660
8708
|
var _a;
|
|
8661
8709
|
if (!props.bindable || props.disabled || props.readOnly) {
|
|
8662
|
-
return /* @__PURE__ */ (0,
|
|
8710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(WrappedComponent, { ...props });
|
|
8663
8711
|
}
|
|
8664
|
-
return /* @__PURE__ */ (0,
|
|
8712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
|
|
8665
8713
|
InputVariables,
|
|
8666
8714
|
{
|
|
8667
8715
|
disableInlineMenu: true,
|
|
8668
8716
|
showMenuPosition: "inline-right",
|
|
8669
8717
|
onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
|
|
8670
8718
|
value: (_a = props.value) == null ? void 0 : _a[0],
|
|
8671
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
8719
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(WrappedComponent, { ...props })
|
|
8672
8720
|
}
|
|
8673
8721
|
);
|
|
8674
8722
|
};
|
|
@@ -8684,8 +8732,8 @@ var bindableFiltersMapper = {
|
|
|
8684
8732
|
};
|
|
8685
8733
|
|
|
8686
8734
|
// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
|
|
8687
|
-
var
|
|
8688
|
-
var SearchAndFilterContext = (0,
|
|
8735
|
+
var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
|
|
8736
|
+
var SearchAndFilterContext = (0, import_react87.createContext)({
|
|
8689
8737
|
searchTerm: "",
|
|
8690
8738
|
setSearchTerm: () => {
|
|
8691
8739
|
},
|
|
@@ -8720,41 +8768,41 @@ var SearchAndFilterProvider = ({
|
|
|
8720
8768
|
children,
|
|
8721
8769
|
allowBindingSearchTerm
|
|
8722
8770
|
}) => {
|
|
8723
|
-
const [searchTerm, setSearchTerm] = (0,
|
|
8724
|
-
const deferredSearchTerm = (0,
|
|
8725
|
-
const [filterVisibility, setFilterVisibility] = (0,
|
|
8726
|
-
const handleSearchTerm = (0,
|
|
8771
|
+
const [searchTerm, setSearchTerm] = (0, import_react87.useState)(defaultSearchTerm);
|
|
8772
|
+
const deferredSearchTerm = (0, import_react87.useDeferredValue)(searchTerm);
|
|
8773
|
+
const [filterVisibility, setFilterVisibility] = (0, import_react87.useState)(filterVisible);
|
|
8774
|
+
const handleSearchTerm = (0, import_react87.useCallback)(
|
|
8727
8775
|
(term) => {
|
|
8728
8776
|
setSearchTerm(term);
|
|
8729
8777
|
onSearchChange == null ? void 0 : onSearchChange(term);
|
|
8730
8778
|
},
|
|
8731
8779
|
[setSearchTerm, onSearchChange]
|
|
8732
8780
|
);
|
|
8733
|
-
const handleToggleFilterVisibility = (0,
|
|
8781
|
+
const handleToggleFilterVisibility = (0, import_react87.useCallback)(
|
|
8734
8782
|
(visible) => setFilterVisibility(visible),
|
|
8735
8783
|
[setFilterVisibility]
|
|
8736
8784
|
);
|
|
8737
|
-
const handleAddFilter = (0,
|
|
8785
|
+
const handleAddFilter = (0, import_react87.useCallback)(() => {
|
|
8738
8786
|
onChange([...filters, { field: "", operator: "", value: "" }]);
|
|
8739
8787
|
}, [filters, onChange]);
|
|
8740
|
-
const handleResetFilters = (0,
|
|
8788
|
+
const handleResetFilters = (0, import_react87.useCallback)(() => {
|
|
8741
8789
|
onSearchChange == null ? void 0 : onSearchChange("");
|
|
8742
8790
|
onChange(resetFilterValues);
|
|
8743
8791
|
}, [onChange, resetFilterValues, onSearchChange]);
|
|
8744
|
-
const handleDeleteFilter = (0,
|
|
8792
|
+
const handleDeleteFilter = (0, import_react87.useCallback)(
|
|
8745
8793
|
(index) => {
|
|
8746
8794
|
const remainingFilters = filters.filter((_, i) => i !== index);
|
|
8747
8795
|
onChange(remainingFilters);
|
|
8748
8796
|
},
|
|
8749
8797
|
[filters, onChange]
|
|
8750
8798
|
);
|
|
8751
|
-
const validFilterQuery = (0,
|
|
8799
|
+
const validFilterQuery = (0, import_react87.useMemo)(() => {
|
|
8752
8800
|
const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
|
|
8753
8801
|
if (hasValidFilters) {
|
|
8754
8802
|
return filters;
|
|
8755
8803
|
}
|
|
8756
8804
|
}, [filters]);
|
|
8757
|
-
(0,
|
|
8805
|
+
(0, import_react87.useEffect)(() => {
|
|
8758
8806
|
if (filterVisibility) {
|
|
8759
8807
|
const handleEscKeyFilterClose = (e) => {
|
|
8760
8808
|
if (e.key === "Escape") {
|
|
@@ -8767,7 +8815,7 @@ var SearchAndFilterProvider = ({
|
|
|
8767
8815
|
};
|
|
8768
8816
|
}
|
|
8769
8817
|
}, [filterVisibility]);
|
|
8770
|
-
return /* @__PURE__ */ (0,
|
|
8818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
|
|
8771
8819
|
SearchAndFilterContext.Provider,
|
|
8772
8820
|
{
|
|
8773
8821
|
value: {
|
|
@@ -8786,17 +8834,17 @@ var SearchAndFilterProvider = ({
|
|
|
8786
8834
|
filterMapper: filterMapper2,
|
|
8787
8835
|
allowBindingSearchTerm
|
|
8788
8836
|
},
|
|
8789
|
-
children: /* @__PURE__ */ (0,
|
|
8837
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_design_system55.VerticalRhythm, { children })
|
|
8790
8838
|
}
|
|
8791
8839
|
);
|
|
8792
8840
|
};
|
|
8793
8841
|
var useSearchAndFilter = () => {
|
|
8794
|
-
const value = (0,
|
|
8842
|
+
const value = (0, import_react87.useContext)(SearchAndFilterContext);
|
|
8795
8843
|
return { ...value };
|
|
8796
8844
|
};
|
|
8797
8845
|
|
|
8798
8846
|
// src/components/SearchAndFilter/FilterControls.tsx
|
|
8799
|
-
var
|
|
8847
|
+
var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
|
|
8800
8848
|
var FilterControls = ({
|
|
8801
8849
|
children,
|
|
8802
8850
|
hideSearchInput
|
|
@@ -8809,10 +8857,10 @@ var FilterControls = ({
|
|
|
8809
8857
|
searchTerm,
|
|
8810
8858
|
allowBindingSearchTerm
|
|
8811
8859
|
} = useSearchAndFilter();
|
|
8812
|
-
const editorRef = (0,
|
|
8860
|
+
const editorRef = (0, import_react88.useRef)(null);
|
|
8813
8861
|
const hasVariableInSearchTerm = hasReferencedVariables(searchTerm);
|
|
8814
|
-
const [idToResetInputVariables, setIdToResetInputVariables] = (0,
|
|
8815
|
-
const [localeSearchTerm, setLocaleSearchTerm] = (0,
|
|
8862
|
+
const [idToResetInputVariables, setIdToResetInputVariables] = (0, import_react88.useState)("data-resource-search-term-input");
|
|
8863
|
+
const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react88.useState)(searchTerm);
|
|
8816
8864
|
(0, import_react_use10.useDebounce)(
|
|
8817
8865
|
() => {
|
|
8818
8866
|
setSearchTerm(localeSearchTerm);
|
|
@@ -8820,14 +8868,14 @@ var FilterControls = ({
|
|
|
8820
8868
|
300,
|
|
8821
8869
|
[localeSearchTerm]
|
|
8822
8870
|
);
|
|
8823
|
-
(0,
|
|
8871
|
+
(0, import_react88.useEffect)(() => {
|
|
8824
8872
|
if (searchTerm === "") {
|
|
8825
8873
|
setLocaleSearchTerm("");
|
|
8826
8874
|
setIdToResetInputVariables(`data-resource-search-term-input-${(0, import_uuid3.v4)()}`);
|
|
8827
8875
|
}
|
|
8828
8876
|
}, [searchTerm]);
|
|
8829
|
-
return /* @__PURE__ */ (0,
|
|
8830
|
-
/* @__PURE__ */ (0,
|
|
8877
|
+
return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
|
|
8878
|
+
/* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
|
|
8831
8879
|
FilterButton2,
|
|
8832
8880
|
{
|
|
8833
8881
|
"aria-controls": "search-and-filter-options",
|
|
@@ -8840,8 +8888,8 @@ var FilterControls = ({
|
|
|
8840
8888
|
dataTestId: "filters-button"
|
|
8841
8889
|
}
|
|
8842
8890
|
),
|
|
8843
|
-
hideSearchInput ? null : /* @__PURE__ */ (0,
|
|
8844
|
-
/* @__PURE__ */ (0,
|
|
8891
|
+
hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { css: BindableKeywordSearchInputStyles, children: [
|
|
8892
|
+
/* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
|
|
8845
8893
|
InputVariables,
|
|
8846
8894
|
{
|
|
8847
8895
|
label: "",
|
|
@@ -8851,8 +8899,8 @@ var FilterControls = ({
|
|
|
8851
8899
|
value: localeSearchTerm,
|
|
8852
8900
|
onChange: (value) => setLocaleSearchTerm(value != null ? value : ""),
|
|
8853
8901
|
disableVariables: !allowBindingSearchTerm,
|
|
8854
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
8855
|
-
|
|
8902
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
|
|
8903
|
+
import_design_system56.InputKeywordSearch,
|
|
8856
8904
|
{
|
|
8857
8905
|
placeholder: "Search...",
|
|
8858
8906
|
onSearchTextChanged: (e) => setLocaleSearchTerm(e),
|
|
@@ -8864,7 +8912,7 @@ var FilterControls = ({
|
|
|
8864
8912
|
)
|
|
8865
8913
|
}
|
|
8866
8914
|
),
|
|
8867
|
-
hasVariableInSearchTerm ? /* @__PURE__ */ (0,
|
|
8915
|
+
hasVariableInSearchTerm ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
|
|
8868
8916
|
"button",
|
|
8869
8917
|
{
|
|
8870
8918
|
css: ClearSearchButtonStyles,
|
|
@@ -8878,7 +8926,7 @@ var FilterControls = ({
|
|
|
8878
8926
|
},
|
|
8879
8927
|
type: "button",
|
|
8880
8928
|
"data-testid": "keyword-search-clear-button",
|
|
8881
|
-
children: /* @__PURE__ */ (0,
|
|
8929
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_design_system56.Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" })
|
|
8882
8930
|
}
|
|
8883
8931
|
) }) : null
|
|
8884
8932
|
] }),
|
|
@@ -8887,22 +8935,22 @@ var FilterControls = ({
|
|
|
8887
8935
|
};
|
|
8888
8936
|
|
|
8889
8937
|
// src/components/SearchAndFilter/FilterItem.tsx
|
|
8890
|
-
var
|
|
8891
|
-
var
|
|
8938
|
+
var import_design_system58 = require("@uniformdev/design-system");
|
|
8939
|
+
var import_react90 = require("react");
|
|
8892
8940
|
|
|
8893
8941
|
// src/components/SearchAndFilter/FilterMenu.tsx
|
|
8894
|
-
var
|
|
8895
|
-
var
|
|
8896
|
-
var
|
|
8942
|
+
var import_design_system57 = require("@uniformdev/design-system");
|
|
8943
|
+
var import_react89 = __toESM(require("react"));
|
|
8944
|
+
var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
|
|
8897
8945
|
var SearchAndFilterOptionsContainer2 = ({
|
|
8898
8946
|
buttonRow,
|
|
8899
8947
|
additionalFiltersContainer,
|
|
8900
8948
|
children
|
|
8901
8949
|
}) => {
|
|
8902
|
-
return /* @__PURE__ */ (0,
|
|
8903
|
-
/* @__PURE__ */ (0,
|
|
8904
|
-
buttonRow ? /* @__PURE__ */ (0,
|
|
8905
|
-
|
|
8950
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
|
|
8951
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
|
|
8952
|
+
buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
|
|
8953
|
+
import_design_system57.HorizontalRhythm,
|
|
8906
8954
|
{
|
|
8907
8955
|
css: SearchAndFilterButtonGroup,
|
|
8908
8956
|
gap: "sm",
|
|
@@ -8911,7 +8959,7 @@ var SearchAndFilterOptionsContainer2 = ({
|
|
|
8911
8959
|
children: buttonRow
|
|
8912
8960
|
}
|
|
8913
8961
|
) : null,
|
|
8914
|
-
additionalFiltersContainer ? /* @__PURE__ */ (0,
|
|
8962
|
+
additionalFiltersContainer ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { children: additionalFiltersContainer }) : null
|
|
8915
8963
|
] });
|
|
8916
8964
|
};
|
|
8917
8965
|
var FilterMenu = ({
|
|
@@ -8924,22 +8972,22 @@ var FilterMenu = ({
|
|
|
8924
8972
|
resetButtonText = "reset"
|
|
8925
8973
|
}) => {
|
|
8926
8974
|
const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
|
|
8927
|
-
const innerMenuRef =
|
|
8928
|
-
(0,
|
|
8975
|
+
const innerMenuRef = import_react89.default.useRef(null);
|
|
8976
|
+
(0, import_react89.useEffect)(() => {
|
|
8929
8977
|
var _a;
|
|
8930
8978
|
if (filterVisibility) {
|
|
8931
8979
|
(_a = innerMenuRef.current) == null ? void 0 : _a.focus();
|
|
8932
8980
|
}
|
|
8933
8981
|
}, [filterVisibility]);
|
|
8934
|
-
return /* @__PURE__ */ (0,
|
|
8982
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_design_system57.VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
|
|
8935
8983
|
SearchAndFilterOptionsContainer2,
|
|
8936
8984
|
{
|
|
8937
8985
|
buttonRow: menuControls,
|
|
8938
8986
|
additionalFiltersContainer,
|
|
8939
8987
|
children: [
|
|
8940
|
-
/* @__PURE__ */ (0,
|
|
8941
|
-
filterTitle ? /* @__PURE__ */ (0,
|
|
8942
|
-
(filters == null ? void 0 : filters.length) && resetButtonText ? /* @__PURE__ */ (0,
|
|
8988
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_design_system57.HorizontalRhythm, { gap: "sm", align: "center", justify: "space-between", children: [
|
|
8989
|
+
filterTitle ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }) : null,
|
|
8990
|
+
(filters == null ? void 0 : filters.length) && resetButtonText ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
|
|
8943
8991
|
"button",
|
|
8944
8992
|
{
|
|
8945
8993
|
type: "button",
|
|
@@ -8960,7 +9008,7 @@ var FilterMenu = ({
|
|
|
8960
9008
|
};
|
|
8961
9009
|
|
|
8962
9010
|
// src/components/SearchAndFilter/FilterItem.tsx
|
|
8963
|
-
var
|
|
9011
|
+
var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
|
|
8964
9012
|
var FilterItem = ({
|
|
8965
9013
|
index,
|
|
8966
9014
|
paramOptions,
|
|
@@ -8977,7 +9025,7 @@ var FilterItem = ({
|
|
|
8977
9025
|
const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
|
|
8978
9026
|
const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
|
|
8979
9027
|
const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
|
|
8980
|
-
const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = (0,
|
|
9028
|
+
const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = (0, import_react90.useMemo)(() => {
|
|
8981
9029
|
var _a2;
|
|
8982
9030
|
const currentSelectedFilter = filterOptions.find((item) => {
|
|
8983
9031
|
var _a3;
|
|
@@ -9004,11 +9052,11 @@ var FilterItem = ({
|
|
|
9004
9052
|
menuIsOpen: false,
|
|
9005
9053
|
isClearable: false
|
|
9006
9054
|
} : {};
|
|
9007
|
-
return /* @__PURE__ */ (0,
|
|
9008
|
-
/* @__PURE__ */ (0,
|
|
9009
|
-
/* @__PURE__ */ (0,
|
|
9010
|
-
/* @__PURE__ */ (0,
|
|
9011
|
-
|
|
9055
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
|
|
9056
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: index === 0 ? initialCriteriaTitle : "and" }),
|
|
9057
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { css: ConditionalInputRow, children: [
|
|
9058
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
9059
|
+
import_design_system58.InputComboBox,
|
|
9012
9060
|
{
|
|
9013
9061
|
"aria-label": label,
|
|
9014
9062
|
options: paramOptions,
|
|
@@ -9034,8 +9082,8 @@ var FilterItem = ({
|
|
|
9034
9082
|
name: `filter-field-${index}`
|
|
9035
9083
|
}
|
|
9036
9084
|
),
|
|
9037
|
-
/* @__PURE__ */ (0,
|
|
9038
|
-
|
|
9085
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
9086
|
+
import_design_system58.InputComboBox,
|
|
9039
9087
|
{
|
|
9040
9088
|
"aria-label": operatorLabel,
|
|
9041
9089
|
options: operatorOptions,
|
|
@@ -9058,7 +9106,7 @@ var FilterItem = ({
|
|
|
9058
9106
|
name: `filter-operator-${index}`
|
|
9059
9107
|
}
|
|
9060
9108
|
),
|
|
9061
|
-
/* @__PURE__ */ (0,
|
|
9109
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
9062
9110
|
FilterEditorRenderer,
|
|
9063
9111
|
{
|
|
9064
9112
|
"aria-label": metaDataLabel,
|
|
@@ -9072,7 +9120,7 @@ var FilterItem = ({
|
|
|
9072
9120
|
valueTestId: "filter-value"
|
|
9073
9121
|
}
|
|
9074
9122
|
),
|
|
9075
|
-
readOnly
|
|
9123
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
9076
9124
|
"button",
|
|
9077
9125
|
{
|
|
9078
9126
|
type: "button",
|
|
@@ -9080,7 +9128,8 @@ var FilterItem = ({
|
|
|
9080
9128
|
"aria-label": "delete filter",
|
|
9081
9129
|
css: IconBtn,
|
|
9082
9130
|
"data-testid": "delete-filter",
|
|
9083
|
-
|
|
9131
|
+
disabled: filters.length === 1,
|
|
9132
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_design_system58.Icon, { icon: "trash", iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
|
|
9084
9133
|
}
|
|
9085
9134
|
)
|
|
9086
9135
|
] })
|
|
@@ -9125,12 +9174,12 @@ var FilterItems = ({
|
|
|
9125
9174
|
}
|
|
9126
9175
|
setFilters(next);
|
|
9127
9176
|
};
|
|
9128
|
-
return /* @__PURE__ */ (0,
|
|
9177
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
9129
9178
|
FilterMenu,
|
|
9130
9179
|
{
|
|
9131
9180
|
id: "search-and-filter-options",
|
|
9132
9181
|
dataTestId: "search-and-filter-options",
|
|
9133
|
-
menuControls: /* @__PURE__ */ (0,
|
|
9182
|
+
menuControls: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
|
|
9134
9183
|
"button",
|
|
9135
9184
|
{
|
|
9136
9185
|
type: "button",
|
|
@@ -9138,7 +9187,7 @@ var FilterItems = ({
|
|
|
9138
9187
|
onClick: handleAddFilter,
|
|
9139
9188
|
"data-testid": "add-filter",
|
|
9140
9189
|
children: [
|
|
9141
|
-
/* @__PURE__ */ (0,
|
|
9190
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_design_system58.Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
|
|
9142
9191
|
addButtonText
|
|
9143
9192
|
]
|
|
9144
9193
|
}
|
|
@@ -9154,7 +9203,7 @@ var FilterItems = ({
|
|
|
9154
9203
|
})) == null ? void 0 : _a.options) != null ? _b : [];
|
|
9155
9204
|
const possibleValueOptions = (_d = (_c = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _c.valueOptions) != null ? _d : [];
|
|
9156
9205
|
const possibleOperators = (_f = (_e = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _e.operatorOptions) != null ? _f : [];
|
|
9157
|
-
return /* @__PURE__ */ (0,
|
|
9206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
9158
9207
|
FilterItem,
|
|
9159
9208
|
{
|
|
9160
9209
|
index: i,
|
|
@@ -9174,11 +9223,11 @@ var FilterItems = ({
|
|
|
9174
9223
|
};
|
|
9175
9224
|
|
|
9176
9225
|
// src/components/SearchAndFilter/SearchAndFilter.tsx
|
|
9177
|
-
var
|
|
9226
|
+
var import_design_system60 = require("@uniformdev/design-system");
|
|
9178
9227
|
|
|
9179
9228
|
// src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
|
|
9180
|
-
var
|
|
9181
|
-
var
|
|
9229
|
+
var import_design_system59 = require("@uniformdev/design-system");
|
|
9230
|
+
var import_jsx_runtime87 = require("@emotion/react/jsx-runtime");
|
|
9182
9231
|
var SearchAndFilterResultContainer = ({
|
|
9183
9232
|
buttonText,
|
|
9184
9233
|
clearButtonLabel = "clear",
|
|
@@ -9208,19 +9257,19 @@ var SearchAndFilterResultContainer = ({
|
|
|
9208
9257
|
handleResetFilters();
|
|
9209
9258
|
}
|
|
9210
9259
|
};
|
|
9211
|
-
return /* @__PURE__ */ (0,
|
|
9212
|
-
/* @__PURE__ */ (0,
|
|
9213
|
-
/* @__PURE__ */ (0,
|
|
9260
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
|
|
9261
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_design_system59.HorizontalRhythm, { children: [
|
|
9262
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { children: [
|
|
9214
9263
|
totalResults,
|
|
9215
9264
|
" results ",
|
|
9216
9265
|
searchTerm ? `for "${searchTerm}"` : null
|
|
9217
9266
|
] }),
|
|
9218
|
-
!searchTerm || hideClearButton ? null : /* @__PURE__ */ (0,
|
|
9267
|
+
!searchTerm || hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_design_system59.Button, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
|
|
9219
9268
|
] }),
|
|
9220
|
-
totalResults === 0 ? /* @__PURE__ */ (0,
|
|
9221
|
-
calloutText ? /* @__PURE__ */ (0,
|
|
9222
|
-
hideClearButton ? null : /* @__PURE__ */ (0,
|
|
9223
|
-
|
|
9269
|
+
totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_design_system59.Callout, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
|
|
9270
|
+
calloutText ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_design_system59.Paragraph, { children: calloutText }) : null,
|
|
9271
|
+
hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
|
|
9272
|
+
import_design_system59.Button,
|
|
9224
9273
|
{
|
|
9225
9274
|
buttonType: "tertiaryOutline",
|
|
9226
9275
|
size: "xs",
|
|
@@ -9234,14 +9283,14 @@ var SearchAndFilterResultContainer = ({
|
|
|
9234
9283
|
};
|
|
9235
9284
|
|
|
9236
9285
|
// src/components/SearchAndFilter/SearchAndFilter.tsx
|
|
9237
|
-
var
|
|
9286
|
+
var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
|
|
9238
9287
|
var SearchAndFilter = ({
|
|
9239
9288
|
filters,
|
|
9240
9289
|
filterOptions,
|
|
9241
9290
|
filterVisible,
|
|
9242
9291
|
filterControls,
|
|
9243
9292
|
viewSwitchControls,
|
|
9244
|
-
resultsContainerView = /* @__PURE__ */ (0,
|
|
9293
|
+
resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(SearchAndFilterResultContainer, {}),
|
|
9245
9294
|
filterMapper: filterMapper2 = filterMapper,
|
|
9246
9295
|
additionalFiltersContainer,
|
|
9247
9296
|
onChange,
|
|
@@ -9251,7 +9300,7 @@ var SearchAndFilter = ({
|
|
|
9251
9300
|
allowBindingSearchTerm = false,
|
|
9252
9301
|
resetFilterValues = []
|
|
9253
9302
|
}) => {
|
|
9254
|
-
return /* @__PURE__ */ (0,
|
|
9303
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
|
|
9255
9304
|
SearchAndFilterProvider,
|
|
9256
9305
|
{
|
|
9257
9306
|
filters,
|
|
@@ -9264,18 +9313,18 @@ var SearchAndFilter = ({
|
|
|
9264
9313
|
resetFilterValues,
|
|
9265
9314
|
filterMapper: filterMapper2,
|
|
9266
9315
|
allowBindingSearchTerm,
|
|
9267
|
-
children: /* @__PURE__ */ (0,
|
|
9268
|
-
/* @__PURE__ */ (0,
|
|
9269
|
-
/* @__PURE__ */ (0,
|
|
9316
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_design_system60.VerticalRhythm, { "data-testid": "search-and-filter", children: [
|
|
9317
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
|
|
9318
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
|
|
9270
9319
|
"div",
|
|
9271
9320
|
{
|
|
9272
9321
|
css: SearchAndFilterControlsWrapper(viewSwitchControls ? "auto 1fr 0.05fr" : "auto 1fr"),
|
|
9273
|
-
children: !filterControls ? /* @__PURE__ */ (0,
|
|
9322
|
+
children: !filterControls ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
|
|
9274
9323
|
}
|
|
9275
9324
|
),
|
|
9276
9325
|
viewSwitchControls
|
|
9277
9326
|
] }),
|
|
9278
|
-
/* @__PURE__ */ (0,
|
|
9327
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)(FilterItems, { additionalFiltersContainer }),
|
|
9279
9328
|
resultsContainerView
|
|
9280
9329
|
] })
|
|
9281
9330
|
}
|
|
@@ -9283,18 +9332,18 @@ var SearchAndFilter = ({
|
|
|
9283
9332
|
};
|
|
9284
9333
|
|
|
9285
9334
|
// src/components/SearchAndFilter/SearchOnlyFilter.tsx
|
|
9286
|
-
var
|
|
9287
|
-
var
|
|
9335
|
+
var import_design_system61 = require("@uniformdev/design-system");
|
|
9336
|
+
var import_react91 = require("react");
|
|
9288
9337
|
var import_react_use11 = require("react-use");
|
|
9289
|
-
var
|
|
9290
|
-
var SearchOnlyContext = (0,
|
|
9338
|
+
var import_jsx_runtime89 = require("@emotion/react/jsx-runtime");
|
|
9339
|
+
var SearchOnlyContext = (0, import_react91.createContext)({
|
|
9291
9340
|
searchTerm: "",
|
|
9292
9341
|
setSearchTerm: () => {
|
|
9293
9342
|
}
|
|
9294
9343
|
});
|
|
9295
9344
|
var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
|
|
9296
9345
|
const { searchTerm, setSearchTerm } = useSearchAndFilter();
|
|
9297
|
-
const [localeSearchTerm, setLocaleSearchTerm] = (0,
|
|
9346
|
+
const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react91.useState)("");
|
|
9298
9347
|
(0, import_react_use11.useDebounce)(
|
|
9299
9348
|
() => {
|
|
9300
9349
|
setSearchTerm(localeSearchTerm);
|
|
@@ -9303,15 +9352,15 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
|
|
|
9303
9352
|
300,
|
|
9304
9353
|
[localeSearchTerm]
|
|
9305
9354
|
);
|
|
9306
|
-
return /* @__PURE__ */ (0,
|
|
9355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
|
|
9307
9356
|
SearchOnlyContext.Provider,
|
|
9308
9357
|
{
|
|
9309
9358
|
value: {
|
|
9310
9359
|
searchTerm,
|
|
9311
9360
|
setSearchTerm: setLocaleSearchTerm
|
|
9312
9361
|
},
|
|
9313
|
-
children: /* @__PURE__ */ (0,
|
|
9314
|
-
|
|
9362
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
|
|
9363
|
+
import_design_system61.InputKeywordSearch,
|
|
9315
9364
|
{
|
|
9316
9365
|
placeholder: "Search...",
|
|
9317
9366
|
onSearchTextChanged: (e) => setLocaleSearchTerm(e),
|
|
@@ -9325,18 +9374,18 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
|
|
|
9325
9374
|
};
|
|
9326
9375
|
|
|
9327
9376
|
// src/components/SearchAndFilter/SortItems.tsx
|
|
9328
|
-
var
|
|
9377
|
+
var import_design_system63 = require("@uniformdev/design-system");
|
|
9329
9378
|
|
|
9330
9379
|
// src/components/SearchAndFilter/styles/SortItems.styles.ts
|
|
9331
|
-
var
|
|
9332
|
-
var
|
|
9333
|
-
var ConditionalFilterRow2 =
|
|
9380
|
+
var import_react92 = require("@emotion/react");
|
|
9381
|
+
var import_design_system62 = require("@uniformdev/design-system");
|
|
9382
|
+
var ConditionalFilterRow2 = import_react92.css`
|
|
9334
9383
|
display: grid;
|
|
9335
9384
|
grid-template-columns: 35px 1fr;
|
|
9336
9385
|
gap: var(--spacing-sm);
|
|
9337
9386
|
margin-left: var(--spacing-base);
|
|
9338
9387
|
|
|
9339
|
-
${(0,
|
|
9388
|
+
${(0, import_design_system62.cq)("380px")} {
|
|
9340
9389
|
align-items: center;
|
|
9341
9390
|
|
|
9342
9391
|
&:after {
|
|
@@ -9357,22 +9406,22 @@ var ConditionalFilterRow2 = import_react91.css`
|
|
|
9357
9406
|
grid-template-columns: 50px 1fr;
|
|
9358
9407
|
}
|
|
9359
9408
|
|
|
9360
|
-
${(0,
|
|
9409
|
+
${(0, import_design_system62.cq)("580px")} {
|
|
9361
9410
|
&:after {
|
|
9362
9411
|
display: none;
|
|
9363
9412
|
}
|
|
9364
9413
|
}
|
|
9365
9414
|
|
|
9366
9415
|
@media (prefers-reduced-motion: no-preference) {
|
|
9367
|
-
animation: ${
|
|
9416
|
+
animation: ${import_design_system62.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
|
|
9368
9417
|
}
|
|
9369
9418
|
`;
|
|
9370
|
-
var ConditionalInputRow2 =
|
|
9419
|
+
var ConditionalInputRow2 = import_react92.css`
|
|
9371
9420
|
display: flex;
|
|
9372
9421
|
gap: var(--spacing-sm);
|
|
9373
9422
|
flex-wrap: wrap;
|
|
9374
9423
|
|
|
9375
|
-
${(0,
|
|
9424
|
+
${(0, import_design_system62.cq)("380px")} {
|
|
9376
9425
|
& > div:nth-child(-n + 2) {
|
|
9377
9426
|
width: calc(50% - var(--spacing-sm));
|
|
9378
9427
|
}
|
|
@@ -9381,7 +9430,7 @@ var ConditionalInputRow2 = import_react91.css`
|
|
|
9381
9430
|
width: calc(100% - 48px);
|
|
9382
9431
|
}
|
|
9383
9432
|
}
|
|
9384
|
-
${(0,
|
|
9433
|
+
${(0, import_design_system62.cq)("580px")} {
|
|
9385
9434
|
display: grid;
|
|
9386
9435
|
grid-template-columns: 200px 160px 1fr 32px;
|
|
9387
9436
|
|
|
@@ -9390,11 +9439,11 @@ var ConditionalInputRow2 = import_react91.css`
|
|
|
9390
9439
|
}
|
|
9391
9440
|
}
|
|
9392
9441
|
`;
|
|
9393
|
-
var SearchInput2 =
|
|
9442
|
+
var SearchInput2 = import_react92.css`
|
|
9394
9443
|
max-height: 40px;
|
|
9395
9444
|
min-height: unset;
|
|
9396
9445
|
`;
|
|
9397
|
-
var FilterButton3 =
|
|
9446
|
+
var FilterButton3 = import_react92.css`
|
|
9398
9447
|
align-items: center;
|
|
9399
9448
|
background: var(--white);
|
|
9400
9449
|
border: 1px solid var(--gray-300);
|
|
@@ -9430,13 +9479,13 @@ var FilterButton3 = import_react91.css`
|
|
|
9430
9479
|
opacity: var(--opacity-50);
|
|
9431
9480
|
}
|
|
9432
9481
|
`;
|
|
9433
|
-
var FilterButtonText2 =
|
|
9482
|
+
var FilterButtonText2 = import_react92.css`
|
|
9434
9483
|
overflow: hidden;
|
|
9435
9484
|
text-overflow: ellipsis;
|
|
9436
9485
|
white-space: nowrap;
|
|
9437
9486
|
max-width: 14ch;
|
|
9438
9487
|
`;
|
|
9439
|
-
var FilterButtonSelected2 =
|
|
9488
|
+
var FilterButtonSelected2 = import_react92.css`
|
|
9440
9489
|
background: var(--gray-100);
|
|
9441
9490
|
border-color: var(--gray-300);
|
|
9442
9491
|
|
|
@@ -9444,7 +9493,7 @@ var FilterButtonSelected2 = import_react91.css`
|
|
|
9444
9493
|
color: var(--accent-dark);
|
|
9445
9494
|
}
|
|
9446
9495
|
`;
|
|
9447
|
-
var FilterButtonWithOptions2 =
|
|
9496
|
+
var FilterButtonWithOptions2 = import_react92.css`
|
|
9448
9497
|
:where([aria-expanded='true']) {
|
|
9449
9498
|
background: var(--purple-rain-100);
|
|
9450
9499
|
border-color: var(--accent-light);
|
|
@@ -9456,14 +9505,14 @@ var FilterButtonWithOptions2 = import_react91.css`
|
|
|
9456
9505
|
}
|
|
9457
9506
|
}
|
|
9458
9507
|
`;
|
|
9459
|
-
var SearchIcon2 =
|
|
9508
|
+
var SearchIcon2 = import_react92.css`
|
|
9460
9509
|
color: var(--icon-color);
|
|
9461
9510
|
position: absolute;
|
|
9462
9511
|
inset: 0 var(--spacing-base) 0 auto;
|
|
9463
9512
|
margin: auto;
|
|
9464
9513
|
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
9465
9514
|
`;
|
|
9466
|
-
var AddConditionalBtn2 =
|
|
9515
|
+
var AddConditionalBtn2 = import_react92.css`
|
|
9467
9516
|
align-items: center;
|
|
9468
9517
|
background: transparent;
|
|
9469
9518
|
border: none;
|
|
@@ -9482,14 +9531,14 @@ var AddConditionalBtn2 = import_react91.css`
|
|
|
9482
9531
|
color: var(--gray-400);
|
|
9483
9532
|
}
|
|
9484
9533
|
`;
|
|
9485
|
-
var Title2 =
|
|
9534
|
+
var Title2 = import_react92.css`
|
|
9486
9535
|
color: var(--typography-light);
|
|
9487
9536
|
|
|
9488
9537
|
&:focus {
|
|
9489
9538
|
outline: none;
|
|
9490
9539
|
}
|
|
9491
9540
|
`;
|
|
9492
|
-
var ResetConditionsBtn2 =
|
|
9541
|
+
var ResetConditionsBtn2 = import_react92.css`
|
|
9493
9542
|
background: transparent;
|
|
9494
9543
|
border: none;
|
|
9495
9544
|
color: var(--action-destructive-default);
|
|
@@ -9501,12 +9550,12 @@ var ResetConditionsBtn2 = import_react91.css`
|
|
|
9501
9550
|
color: var(--action-destructive-hover);
|
|
9502
9551
|
}
|
|
9503
9552
|
`;
|
|
9504
|
-
var IconBtn2 =
|
|
9553
|
+
var IconBtn2 = import_react92.css`
|
|
9505
9554
|
background: transparent;
|
|
9506
9555
|
border: none;
|
|
9507
9556
|
padding: var(--spacing-sm);
|
|
9508
9557
|
`;
|
|
9509
|
-
var SearchAndFilterOptionsContainer3 =
|
|
9558
|
+
var SearchAndFilterOptionsContainer3 = import_react92.css`
|
|
9510
9559
|
background: var(--gray-50);
|
|
9511
9560
|
border: 1px solid var(--gray-300);
|
|
9512
9561
|
border-radius: var(--rounded-base);
|
|
@@ -9519,17 +9568,17 @@ var SearchAndFilterOptionsContainer3 = import_react91.css`
|
|
|
9519
9568
|
position: relative;
|
|
9520
9569
|
z-index: 1;
|
|
9521
9570
|
`;
|
|
9522
|
-
var SearchAndFilterOptionsInnerContainer2 =
|
|
9571
|
+
var SearchAndFilterOptionsInnerContainer2 = import_react92.css`
|
|
9523
9572
|
display: flex;
|
|
9524
9573
|
flex-direction: column;
|
|
9525
9574
|
gap: var(--spacing-sm);
|
|
9526
9575
|
padding-inline: var(--spacing-md);
|
|
9527
9576
|
`;
|
|
9528
|
-
var SearchAndFilterButtonGroup2 =
|
|
9577
|
+
var SearchAndFilterButtonGroup2 = import_react92.css`
|
|
9529
9578
|
margin-top: var(--spacing-xs);
|
|
9530
9579
|
margin-left: calc(56px + var(--spacing-md));
|
|
9531
9580
|
`;
|
|
9532
|
-
var SortFilterWrapper = (hiddenLocaleInput) =>
|
|
9581
|
+
var SortFilterWrapper = (hiddenLocaleInput) => import_react92.css`
|
|
9533
9582
|
align-items: center;
|
|
9534
9583
|
border-top: 1px solid var(--gray-300);
|
|
9535
9584
|
display: flex;
|
|
@@ -9539,18 +9588,18 @@ var SortFilterWrapper = (hiddenLocaleInput) => import_react91.css`
|
|
|
9539
9588
|
position: relative;
|
|
9540
9589
|
z-index: 0;
|
|
9541
9590
|
|
|
9542
|
-
${(0,
|
|
9591
|
+
${(0, import_design_system62.cq)("420px")} {
|
|
9543
9592
|
display: grid;
|
|
9544
9593
|
grid-template-columns: ${hiddenLocaleInput ? "1fr" : "1fr minmax(140px, 0.25fr)"};
|
|
9545
9594
|
}
|
|
9546
9595
|
`;
|
|
9547
|
-
var SortFilterInputRow =
|
|
9596
|
+
var SortFilterInputRow = import_react92.css`
|
|
9548
9597
|
align-items: center;
|
|
9549
9598
|
display: grid;
|
|
9550
9599
|
grid-template-columns: 1fr auto;
|
|
9551
9600
|
gap: var(--spacing-base);
|
|
9552
9601
|
`;
|
|
9553
|
-
var InputVariableWrapper =
|
|
9602
|
+
var InputVariableWrapper = import_react92.css`
|
|
9554
9603
|
flex-grow: 1;
|
|
9555
9604
|
|
|
9556
9605
|
// we need to override label styles nested within the input variable
|
|
@@ -9561,7 +9610,7 @@ var InputVariableWrapper = import_react91.css`
|
|
|
9561
9610
|
`;
|
|
9562
9611
|
|
|
9563
9612
|
// src/components/SearchAndFilter/SortItems.tsx
|
|
9564
|
-
var
|
|
9613
|
+
var import_jsx_runtime90 = require("@emotion/react/jsx-runtime");
|
|
9565
9614
|
var SortItems = ({
|
|
9566
9615
|
sortByLabel = "Sort by",
|
|
9567
9616
|
localeLabel = "Show locale",
|
|
@@ -9583,11 +9632,11 @@ var SortItems = ({
|
|
|
9583
9632
|
return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
|
|
9584
9633
|
})) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
|
|
9585
9634
|
const localeLabelValue = sortOptions.length > 1 ? localeLabel : `${localeLabel}s`;
|
|
9586
|
-
return /* @__PURE__ */ (0,
|
|
9587
|
-
/* @__PURE__ */ (0,
|
|
9588
|
-
/* @__PURE__ */ (0,
|
|
9589
|
-
/* @__PURE__ */ (0,
|
|
9590
|
-
/* @__PURE__ */ (0,
|
|
9635
|
+
return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
|
|
9636
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_design_system63.VerticalRhythm, { gap: "xs", children: [
|
|
9637
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { css: Title2, children: sortByLabel }),
|
|
9638
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { css: SortFilterInputRow, children: [
|
|
9639
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
|
|
9591
9640
|
InputVariables,
|
|
9592
9641
|
{
|
|
9593
9642
|
disableInlineMenu: disableSortBinding,
|
|
@@ -9595,8 +9644,8 @@ var SortItems = ({
|
|
|
9595
9644
|
value: sortField,
|
|
9596
9645
|
valueToResetTo: "created_at",
|
|
9597
9646
|
onChange: (e) => onSortChange(`${e}_${sortDirection}`),
|
|
9598
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
9599
|
-
|
|
9647
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
|
|
9648
|
+
import_design_system63.InputComboBox,
|
|
9600
9649
|
{
|
|
9601
9650
|
id: "sort-by-field",
|
|
9602
9651
|
"aria-label": "Sort by",
|
|
@@ -9618,7 +9667,7 @@ var SortItems = ({
|
|
|
9618
9667
|
)
|
|
9619
9668
|
}
|
|
9620
9669
|
),
|
|
9621
|
-
/* @__PURE__ */ (0,
|
|
9670
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
|
|
9622
9671
|
InputVariables,
|
|
9623
9672
|
{
|
|
9624
9673
|
disableInlineMenu: disableSortBinding,
|
|
@@ -9626,8 +9675,8 @@ var SortItems = ({
|
|
|
9626
9675
|
valueToResetTo: "DESC",
|
|
9627
9676
|
showMenuPosition: disableSortBinding ? void 0 : "inline-right",
|
|
9628
9677
|
onChange: (e) => onSortChange(`${sortField}_${e}`),
|
|
9629
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
9630
|
-
|
|
9678
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
|
|
9679
|
+
import_design_system63.SegmentedControl,
|
|
9631
9680
|
{
|
|
9632
9681
|
noCheckmark: true,
|
|
9633
9682
|
name: "sortBy",
|
|
@@ -9658,15 +9707,15 @@ var SortItems = ({
|
|
|
9658
9707
|
)
|
|
9659
9708
|
] })
|
|
9660
9709
|
] }),
|
|
9661
|
-
hideLocaleOptions ? null : /* @__PURE__ */ (0,
|
|
9710
|
+
hideLocaleOptions ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_design_system63.VerticalRhythm, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
|
|
9662
9711
|
InputVariables,
|
|
9663
9712
|
{
|
|
9664
9713
|
label: localeLabelValue,
|
|
9665
9714
|
value: localeValue,
|
|
9666
9715
|
showMenuPosition: "inline-right",
|
|
9667
9716
|
onChange: (e) => onLocaleChange(e != null ? e : ""),
|
|
9668
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
9669
|
-
|
|
9717
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
|
|
9718
|
+
import_design_system63.InputSelect,
|
|
9670
9719
|
{
|
|
9671
9720
|
name: "localeReturned",
|
|
9672
9721
|
"aria-label": localeLabelValue,
|
|
@@ -9696,19 +9745,19 @@ function createLocationValidator(setValue, validate) {
|
|
|
9696
9745
|
|
|
9697
9746
|
// src/utils/useContentDataResourceLocaleInfo.ts
|
|
9698
9747
|
var import_canvas10 = require("@uniformdev/canvas");
|
|
9699
|
-
var
|
|
9748
|
+
var import_react93 = require("react");
|
|
9700
9749
|
function useContentDataResourceLocaleInfo({
|
|
9701
9750
|
locale,
|
|
9702
9751
|
setLocale,
|
|
9703
9752
|
dynamicInputs
|
|
9704
9753
|
}) {
|
|
9705
9754
|
var _a;
|
|
9706
|
-
const setLocaleRef = (0,
|
|
9755
|
+
const setLocaleRef = (0, import_react93.useRef)(setLocale);
|
|
9707
9756
|
setLocaleRef.current = setLocale;
|
|
9708
9757
|
const { flatVariables } = useVariables();
|
|
9709
9758
|
const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas10.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME) : "";
|
|
9710
9759
|
const boundLocale = (_a = (0, import_canvas10.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
|
|
9711
|
-
(0,
|
|
9760
|
+
(0, import_react93.useEffect)(() => {
|
|
9712
9761
|
if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
|
|
9713
9762
|
setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
|
|
9714
9763
|
}
|
|
@@ -9717,7 +9766,7 @@ function useContentDataResourceLocaleInfo({
|
|
|
9717
9766
|
}
|
|
9718
9767
|
|
|
9719
9768
|
// src/index.ts
|
|
9720
|
-
var
|
|
9769
|
+
var import_design_system64 = require("@uniformdev/design-system");
|
|
9721
9770
|
__reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
9722
9771
|
// Annotate the CommonJS export names for ESM import in node:
|
|
9723
9772
|
0 && (module.exports = {
|
|
@@ -9839,6 +9888,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
9839
9888
|
Switch,
|
|
9840
9889
|
TEXTBOX_OPERATORS,
|
|
9841
9890
|
TextEditor,
|
|
9891
|
+
TextMultiChoiceEditor,
|
|
9842
9892
|
TextVariableRenderer,
|
|
9843
9893
|
Textarea,
|
|
9844
9894
|
Theme,
|