@uniformdev/mesh-sdk-react 20.74.7-alpha.12 → 20.74.7-alpha.14.sha-79426f9415
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 +201 -96
- package/dist/index.d.ts +201 -96
- package/dist/index.esm.js +3 -3
- package/dist/index.js +2 -2
- package/dist/index.mjs +3 -3
- package/package.json +11 -11
package/dist/index.d.ts
CHANGED
|
@@ -59,16 +59,27 @@ declare function DataResourceDynamicInputProvider(props: DataResourceDynamicInpu
|
|
|
59
59
|
|
|
60
60
|
/**
|
|
61
61
|
* Provides convenient access to the current Uniform Mesh location via React hook.
|
|
62
|
-
* Intended to be used within
|
|
62
|
+
* Intended to be used within `MeshApp`.
|
|
63
63
|
*
|
|
64
64
|
* There are three primary ways to invoke this hook:
|
|
65
65
|
* 1. Without any arguments, this hook will return the current location regardless of its type. The result will be a union of all possible locations you can discriminate between i.e. with an if statement on the `type`
|
|
66
|
-
*
|
|
67
|
-
*
|
|
66
|
+
* @example
|
|
67
|
+
* ```tsx
|
|
68
|
+
* const location = useMeshLocation();
|
|
69
|
+
* if (location.type === 'paramType') {
|
|
70
|
+
* // location is now known to be a paramType
|
|
71
|
+
* }
|
|
72
|
+
* ```
|
|
68
73
|
* 2. With a string argument, this hook will assert that the current location is the expected one and return the correct typings for that location.
|
|
69
|
-
*
|
|
74
|
+
* @example
|
|
75
|
+
* ```tsx
|
|
76
|
+
* const location = useMeshLocation('settings');
|
|
77
|
+
* ```
|
|
70
78
|
* 3. With an explicit generic to set the expected param type data or param type settings data. This is useful because (2) will return unknown as the value type for param types.
|
|
71
|
-
*
|
|
79
|
+
* @example
|
|
80
|
+
* ```tsx
|
|
81
|
+
* const location = useMeshLocation<'paramType', MyParamTypeValueType>();
|
|
82
|
+
* ```
|
|
72
83
|
*
|
|
73
84
|
* You can also combine (2) and (3) to get both explicit value typing and assertion of the location.
|
|
74
85
|
*/
|
|
@@ -514,7 +525,7 @@ type InputVariablesProps<TEditorContext = unknown> = {
|
|
|
514
525
|
* disable it with this prop.
|
|
515
526
|
*/
|
|
516
527
|
disableDismissEditorOnChange?: boolean;
|
|
517
|
-
/** Enables mutliple lines in the input (
|
|
528
|
+
/** Enables mutliple lines in the input (newline characters in the value) */
|
|
518
529
|
multiLine?: boolean;
|
|
519
530
|
/** Disables the inline variable selection menu when rendering a variables input */
|
|
520
531
|
disableInlineMenu?: boolean | 'by-label' | 'by-input';
|
|
@@ -629,7 +640,7 @@ type ParameterVariablesProps<TEditorContext = unknown> = {
|
|
|
629
640
|
/** Sets the test ID of the input */
|
|
630
641
|
'data-testid'?: string;
|
|
631
642
|
/**
|
|
632
|
-
* Enables mutliple lines in the input (
|
|
643
|
+
* Enables mutliple lines in the input (newline characters in the value).
|
|
633
644
|
* If a number is passed, the height of the editor is set to that number of lines and overflow scrolls.
|
|
634
645
|
* If a boolean true is passed, the editor auto-sizes to the content.
|
|
635
646
|
*/
|
|
@@ -804,7 +815,8 @@ declare function serializeVariablesEditorSerializedState(serializedEditorState:
|
|
|
804
815
|
*
|
|
805
816
|
* If newValue is undefined, the editor will be set to an empty state.
|
|
806
817
|
* If newValue is a string, it will be treated as a variable-reference-containing string, and parsed to a Lexical AST
|
|
807
|
-
* If newValue is a serialized Lexical AST,
|
|
818
|
+
* If newValue is a serialized Lexical AST, omitted Lexical defaults are restored before parse.
|
|
819
|
+
* If the AST is invalid, the editor will be set to an empty state.
|
|
808
820
|
*/
|
|
809
821
|
declare function setVariablesEditorValue(editor: LexicalEditor, newValue: string | undefined | null | SerializedEditorState<SerializedLexicalNode>, tag?: string): void;
|
|
810
822
|
|
|
@@ -812,12 +824,12 @@ declare function variableDefaultTextValue(defaultValue: unknown): string;
|
|
|
812
824
|
|
|
813
825
|
/**
|
|
814
826
|
* Expected prefix for variable expressions
|
|
815
|
-
* @deprecated
|
|
827
|
+
* @deprecated Use the variables binding API instead of string delimiters.
|
|
816
828
|
*/
|
|
817
829
|
declare const variablePrefix = "${";
|
|
818
830
|
/**
|
|
819
831
|
* Expected suffix for variable expressions
|
|
820
|
-
* @deprecated
|
|
832
|
+
* @deprecated Use the variables binding API instead of string delimiters.
|
|
821
833
|
*/
|
|
822
834
|
declare const variableSuffix = "}";
|
|
823
835
|
|
|
@@ -1028,8 +1040,11 @@ type DataRefreshButtonProps = HTMLAttributes<HTMLButtonElement> & {
|
|
|
1028
1040
|
onRefreshData: () => void;
|
|
1029
1041
|
};
|
|
1030
1042
|
/**
|
|
1031
|
-
*
|
|
1032
|
-
* @example
|
|
1043
|
+
* The data refresh button is a UI component to indicate to users a request for data is taking place
|
|
1044
|
+
* @example
|
|
1045
|
+
* ```tsx
|
|
1046
|
+
* <DataRefreshButton buttonText="my button" isLoading />
|
|
1047
|
+
* ```
|
|
1033
1048
|
* @deprecated this component is not recommended for use in new projects
|
|
1034
1049
|
*/
|
|
1035
1050
|
declare const DataRefreshButton: ({ buttonText, isLoading, onRefreshData, ...props }: DataRefreshButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
@@ -1057,8 +1072,11 @@ type ObjectSearchContainerProps = {
|
|
|
1057
1072
|
children?: ReactNode;
|
|
1058
1073
|
};
|
|
1059
1074
|
/**
|
|
1060
|
-
*
|
|
1061
|
-
* @example
|
|
1075
|
+
* Object search container is an opinionated layout for search parameters and retrieved results
|
|
1076
|
+
* @example
|
|
1077
|
+
* ```tsx
|
|
1078
|
+
* <ObjectSearchContainer searchFilters={<>your component</>} resultList={<>your result list component<>} onSave={yourSaveAction} onCancel={yourCancelAction} />
|
|
1079
|
+
* ```
|
|
1062
1080
|
* @deprecated this component is not recommended for use in new projects
|
|
1063
1081
|
*/
|
|
1064
1082
|
declare const ObjectSearchContainer: ({ label, enableDynamicInputToResultId, searchFilters, resultList, children, }: ObjectSearchContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
@@ -1067,11 +1085,11 @@ type ObjectSearchFilterProps = {
|
|
|
1067
1085
|
/** shows or hides the required content type select option */
|
|
1068
1086
|
requireContentType?: boolean;
|
|
1069
1087
|
/** sets the text for the required content type select option
|
|
1070
|
-
* @
|
|
1088
|
+
* @defaultValue 'All content types'
|
|
1071
1089
|
*/
|
|
1072
1090
|
typeSelectorAllTypesOptionText?: string;
|
|
1073
1091
|
/** sets the select input value label text
|
|
1074
|
-
* @
|
|
1092
|
+
* @defaultValue 'Content Type Select'
|
|
1075
1093
|
*/
|
|
1076
1094
|
selectLabel?: string;
|
|
1077
1095
|
/** sets the select input options, if empty - only keyword search field will be rendered */
|
|
@@ -1080,18 +1098,21 @@ type ObjectSearchFilterProps = {
|
|
|
1080
1098
|
value?: string;
|
|
1081
1099
|
}>;
|
|
1082
1100
|
/** sets the search input name value
|
|
1083
|
-
* @
|
|
1101
|
+
* @defaultValue 'searchText'
|
|
1084
1102
|
*/
|
|
1085
1103
|
searchInputName?: string;
|
|
1086
1104
|
/** sets the search input placeholder text
|
|
1087
|
-
* @
|
|
1105
|
+
* @defaultValue 'Enter keyword to narrow your results'
|
|
1088
1106
|
*/
|
|
1089
1107
|
searchInputPlaceholderText?: string;
|
|
1090
1108
|
};
|
|
1091
1109
|
/**
|
|
1092
|
-
*
|
|
1110
|
+
* Object search filter is an opinionated filter that has pre-defined query and setQuery functions
|
|
1093
1111
|
* that can be extended with custom functions
|
|
1094
|
-
* @example
|
|
1112
|
+
* @example
|
|
1113
|
+
* ```tsx
|
|
1114
|
+
* <ObjectSearchFilter selectOptions={[{ id: 'id value', name: 'name value'}]} />
|
|
1115
|
+
* ```
|
|
1095
1116
|
* @deprecated this component is not recommended for use in new projects
|
|
1096
1117
|
*/
|
|
1097
1118
|
declare const ObjectSearchFilter: ({ requireContentType, typeSelectorAllTypesOptionText, searchInputName, searchInputPlaceholderText, selectLabel, selectOptions, }: ObjectSearchFilterProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
@@ -1101,8 +1122,11 @@ type ObjectSearchFilterContainerProps = {
|
|
|
1101
1122
|
children?: React.ReactNode;
|
|
1102
1123
|
};
|
|
1103
1124
|
/**
|
|
1104
|
-
*
|
|
1105
|
-
* @example
|
|
1125
|
+
* an opinionated layout for search filters
|
|
1126
|
+
* @example
|
|
1127
|
+
* ```tsx
|
|
1128
|
+
* <ObjectSearchFilterContainer label="my label"><input type="text" aria-label="my input" /></ObjectSearchFilterContainer>
|
|
1129
|
+
* ```
|
|
1106
1130
|
* @deprecated this component is not recommended for use in new projects
|
|
1107
1131
|
*/
|
|
1108
1132
|
declare const ObjectSearchFilterContainer: ({ children }: ObjectSearchFilterContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
@@ -1112,20 +1136,23 @@ type ObjectSearchResultItemProps = SelectedItemProps & {
|
|
|
1112
1136
|
/** sets additional remove functionality onto of default removal */
|
|
1113
1137
|
onRemove?: () => void;
|
|
1114
1138
|
/** sets whether to show or hide the remove button
|
|
1115
|
-
* @
|
|
1139
|
+
* @defaultValue false
|
|
1116
1140
|
*/
|
|
1117
1141
|
hideRemoveButton?: boolean;
|
|
1118
1142
|
/** sets user defined child nodes that are uncontrolled by Uniform */
|
|
1119
1143
|
children?: ReactNode;
|
|
1120
1144
|
/** disable or enable drag and drop functionality
|
|
1121
|
-
* @
|
|
1145
|
+
* @defaultValue false
|
|
1122
1146
|
*/
|
|
1123
1147
|
disableDnD?: boolean;
|
|
1124
1148
|
onClick?: () => void;
|
|
1125
1149
|
};
|
|
1126
1150
|
/**
|
|
1127
|
-
*
|
|
1128
|
-
* @example
|
|
1151
|
+
* An opinionated result item, best used for selected results
|
|
1152
|
+
* @example
|
|
1153
|
+
* ```tsx
|
|
1154
|
+
* <ObjectSearchResultItem id="my-result" title="title" />
|
|
1155
|
+
* ```
|
|
1129
1156
|
* @deprecated this component is not recommended for use in new projects
|
|
1130
1157
|
*/
|
|
1131
1158
|
declare const ObjectSearchResultItem: ({ id, title, contentType, popoverData, publishStatus, editLinkIcon, editLink, imageUrl, onRemove, createdAt, publishedAt, hideRemoveButton, disableDnD, children, onClick, }: ObjectSearchResultItemProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
@@ -1162,7 +1189,7 @@ type SelectedItemProps<TExtraProps = unknown> = {
|
|
|
1162
1189
|
/** sets the text value of the publish badge */
|
|
1163
1190
|
text: string;
|
|
1164
1191
|
/** sets the theme value of the publish badge
|
|
1165
|
-
* @
|
|
1192
|
+
* @defaultValue 'unimportant'
|
|
1166
1193
|
*/
|
|
1167
1194
|
theme?: BadgeThemeProps;
|
|
1168
1195
|
};
|
|
@@ -1226,21 +1253,27 @@ type ObjectSearchListItemProps = SelectedItemProps & {
|
|
|
1226
1253
|
/** allows authors to add any child component that is not controlled by Uniform */
|
|
1227
1254
|
children?: React$1.ReactNode;
|
|
1228
1255
|
/** sets whether multiple entries can be added to the results list context
|
|
1229
|
-
* @
|
|
1256
|
+
* @defaultValue inherit from context or false
|
|
1230
1257
|
*/
|
|
1231
1258
|
isMulti?: boolean;
|
|
1232
1259
|
/** sets disabled state to the interactive element */
|
|
1233
1260
|
disabled?: boolean;
|
|
1234
1261
|
} & React$1.HTMLAttributes<HTMLDivElement>;
|
|
1235
1262
|
/**
|
|
1236
|
-
*
|
|
1237
|
-
* @example
|
|
1263
|
+
* entry search list item is an opinionated UI component best used for initial retrieved results
|
|
1264
|
+
* @example
|
|
1265
|
+
* ```tsx
|
|
1266
|
+
* <ObjectSearchListItem id="my-result-item" title="title" popoverData={<p>some data info</p>}><div>example of uncontrolled content</div></ObjectSearchListItem>
|
|
1267
|
+
* ```
|
|
1238
1268
|
* @deprecated this component is not recommended for use in new projects
|
|
1239
1269
|
*/
|
|
1240
1270
|
declare const ObjectSearchListItem: ({ id, title, contentType, imageUrl, popoverData, onSelect, isMulti, disabled, children, ...props }: ObjectSearchListItemProps & React$1.HTMLAttributes<HTMLDivElement>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1241
1271
|
/**
|
|
1242
1272
|
* An opinionated loading skeleton component best used with ObjectSearchListItem
|
|
1243
|
-
* @example
|
|
1273
|
+
* @example
|
|
1274
|
+
* ```tsx
|
|
1275
|
+
* <ObjectSearchListItemLoadingSkeleton />
|
|
1276
|
+
* ```
|
|
1244
1277
|
*/
|
|
1245
1278
|
declare const ObjectSearchListItemLoadingSkeleton: () => _emotion_react_jsx_runtime.JSX.Element;
|
|
1246
1279
|
|
|
@@ -1253,22 +1286,28 @@ type ObjectSearchResultItemButtonProps<THtml extends HTMLAttributes<HTMLElement>
|
|
|
1253
1286
|
}>;
|
|
1254
1287
|
} & THtml;
|
|
1255
1288
|
/**
|
|
1256
|
-
*
|
|
1257
|
-
* @example
|
|
1289
|
+
* An opinionated button component best used within the ObjectSearchResultItem component
|
|
1290
|
+
* @example
|
|
1291
|
+
* ```tsx
|
|
1292
|
+
* <ObjectSearchResultItemButton text="button text" icon="/my-image.png" onClick={() => myFunction()} />
|
|
1293
|
+
* ```
|
|
1258
1294
|
* @deprecated this component is not recommended for use in new projects
|
|
1259
1295
|
*/
|
|
1260
1296
|
declare const ObjectSearchResultItemButton: ({ text, icon, ...props }: ObjectSearchResultItemButtonProps<HTMLAttributes<HTMLButtonElement>>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1261
1297
|
/**
|
|
1262
|
-
*
|
|
1298
|
+
* An opinionated link component styled the same of the ObjectSearchResultItemButton component,
|
|
1263
1299
|
* that automatically sets the target and rel attributes. Best used within the ObjectSearchResultItem component
|
|
1264
|
-
* @example
|
|
1300
|
+
* @example
|
|
1301
|
+
* ```tsx
|
|
1302
|
+
* <LinkButton text="link text" icon="/my-image.png" />
|
|
1303
|
+
* ```
|
|
1265
1304
|
* @deprecated this component is not recommended for use in new projects
|
|
1266
1305
|
*/
|
|
1267
1306
|
declare const LinkButton: ({ text, icon, ...props }: ObjectSearchResultItemButtonProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "rel">>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1268
1307
|
|
|
1269
1308
|
type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = SelectedItemProps> = {
|
|
1270
1309
|
/** sets the result label value
|
|
1271
|
-
* @
|
|
1310
|
+
* @defaultValue 'Selected'
|
|
1272
1311
|
*/
|
|
1273
1312
|
resultLabelText?: string;
|
|
1274
1313
|
/** sets and override react node replacing the whole HTML block for the result label and counter */
|
|
@@ -1276,11 +1315,11 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
|
|
|
1276
1315
|
/** sets the on remove button click action */
|
|
1277
1316
|
onRemoveAllSelected?: () => void;
|
|
1278
1317
|
/** sets the remove button text
|
|
1279
|
-
* @
|
|
1318
|
+
* @defaultValue 'Remove all'
|
|
1280
1319
|
*/
|
|
1281
1320
|
removeButtonText?: string;
|
|
1282
1321
|
/** sets whether to show or hide the remove button
|
|
1283
|
-
* @
|
|
1322
|
+
* @defaultValue false
|
|
1284
1323
|
*/
|
|
1285
1324
|
hideRemoveButton?: boolean;
|
|
1286
1325
|
/** allows additional buttons to be added to the result title group */
|
|
@@ -1288,7 +1327,7 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
|
|
|
1288
1327
|
/** allows placing child components within the result list area */
|
|
1289
1328
|
renderResultComponent?: (value: TRenderComponent) => React__default.ReactNode;
|
|
1290
1329
|
/** disable or enable drag and drop functionality
|
|
1291
|
-
* @
|
|
1330
|
+
* @defaultValue false
|
|
1292
1331
|
*/
|
|
1293
1332
|
disableDnD?: boolean;
|
|
1294
1333
|
/** sets the draggable id value */
|
|
@@ -1303,10 +1342,13 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
|
|
|
1303
1342
|
getContainerForDnDReparenting?: () => HTMLElement;
|
|
1304
1343
|
};
|
|
1305
1344
|
/**
|
|
1306
|
-
*
|
|
1307
|
-
* The result item component defaults to
|
|
1345
|
+
* An opinionated result list UI component that has built in drag and drop functionality and removal of all selected items from context.
|
|
1346
|
+
* The result item component defaults to `ObjectSearchResultItem`, however this can be overridden with any other UI component and still
|
|
1308
1347
|
* maintain drag and drop functionality
|
|
1309
|
-
* @example
|
|
1348
|
+
* @example
|
|
1349
|
+
* ```tsx
|
|
1350
|
+
* <ObjectSearchResultList id="my-id" title="title" renderResultComponent={(values) => <CustomComponent {...values} />} />
|
|
1351
|
+
* ```
|
|
1310
1352
|
* @deprecated this component is not recommended for use in new projects
|
|
1311
1353
|
*/
|
|
1312
1354
|
declare function ObjectSearchResultList<TRenderComponent extends SelectedItemProps = SelectedItemProps>({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, resultLabelOverride, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, }: ObjectSearchResultListProps<TRenderComponent>): _emotion_react_jsx_runtime.JSX.Element;
|
|
@@ -1320,23 +1362,22 @@ type QueryFilterSearchProps = {
|
|
|
1320
1362
|
sortOrder: string;
|
|
1321
1363
|
};
|
|
1322
1364
|
type QueryFilterSelectionOptionProps = Array<{
|
|
1323
|
-
/** contains id or machine values
|
|
1365
|
+
/** contains id or machine values; used as the value attribute on HTML option elements */
|
|
1324
1366
|
value?: string;
|
|
1325
|
-
/** Contains human-readable display name for select options.
|
|
1326
|
-
* Used as value in case value is not present <option> */
|
|
1367
|
+
/** Contains human-readable display name for select options. Used as the option label when value is not present. */
|
|
1327
1368
|
label: string;
|
|
1328
1369
|
}>;
|
|
1329
1370
|
type QueryFilterProps<TSelectOptions extends QueryFilterSelectionOptionProps = QueryFilterSelectionOptionProps> = {
|
|
1330
1371
|
/** sets the query filter title
|
|
1331
|
-
* @
|
|
1372
|
+
* @defaultValue 'Configure Query'
|
|
1332
1373
|
*/
|
|
1333
1374
|
queryFilterTitle?: string;
|
|
1334
1375
|
/** sets the content type all selected options label
|
|
1335
|
-
* @
|
|
1376
|
+
* @defaultValue 'All content types'
|
|
1336
1377
|
*/
|
|
1337
1378
|
typeSelectorAllTypesOptionText?: string;
|
|
1338
1379
|
/** sets the content type label value
|
|
1339
|
-
* @
|
|
1380
|
+
* @defaultValue 'Filter by content type'
|
|
1340
1381
|
*/
|
|
1341
1382
|
contentTypeLabel?: string;
|
|
1342
1383
|
/** sets the content type select options */
|
|
@@ -1344,39 +1385,42 @@ type QueryFilterProps<TSelectOptions extends QueryFilterSelectionOptionProps = Q
|
|
|
1344
1385
|
/** sets whether the content type filter is required */
|
|
1345
1386
|
requireContentType?: boolean;
|
|
1346
1387
|
/** sets the count label value
|
|
1347
|
-
* @
|
|
1388
|
+
* @defaultValue 'Count'
|
|
1348
1389
|
*/
|
|
1349
1390
|
countLabel?: string;
|
|
1350
1391
|
/** sets the sort label text
|
|
1351
|
-
* @
|
|
1392
|
+
* @defaultValue 'Sort'
|
|
1352
1393
|
*/
|
|
1353
1394
|
sortLabel?: string;
|
|
1354
1395
|
/** sets the sort select options value */
|
|
1355
1396
|
sortOptions: TSelectOptions;
|
|
1356
1397
|
/** sets the sort order lable value
|
|
1357
|
-
* @
|
|
1398
|
+
* @defaultValue 'Sort Order'
|
|
1358
1399
|
*/
|
|
1359
1400
|
sortOrderLabel?: string;
|
|
1360
1401
|
/** sets the sort order select options value */
|
|
1361
1402
|
sortOrderOptions: TSelectOptions;
|
|
1362
1403
|
/** sets the search input name value
|
|
1363
|
-
* @
|
|
1404
|
+
* @defaultValue 'searchText'
|
|
1364
1405
|
*/
|
|
1365
1406
|
searchInputName?: string;
|
|
1366
1407
|
/** sets the search input placeholder text
|
|
1367
|
-
* @
|
|
1408
|
+
* @defaultValue 'Enter keyword to narrow your results'
|
|
1368
1409
|
*/
|
|
1369
1410
|
searchInputPlaceholderText?: string;
|
|
1370
1411
|
/** sets the label for the search input
|
|
1371
|
-
* @
|
|
1412
|
+
* @defaultValue 'Query'
|
|
1372
1413
|
*/
|
|
1373
1414
|
searchInputLabel?: string;
|
|
1374
1415
|
/** allows for additional child components, for example more input components */
|
|
1375
1416
|
children?: ReactNode;
|
|
1376
1417
|
};
|
|
1377
1418
|
/**
|
|
1378
|
-
*
|
|
1379
|
-
* @example
|
|
1419
|
+
* An opinionated multi query filter UI component, best used for querying product data or more complex scenarios
|
|
1420
|
+
* @example
|
|
1421
|
+
* ```tsx
|
|
1422
|
+
* <QueryFilter contentTypeOptions={[{ id: 'id', name: 'name' }]} sortOptions={[{ id: 'id', name: 'name' }]} sortOrderOptions={[{ id: 'id', name: 'name' }]} />
|
|
1423
|
+
* ```
|
|
1380
1424
|
* @deprecated this component is not recommended for use in new projects
|
|
1381
1425
|
*/
|
|
1382
1426
|
declare const QueryFilter: ({ requireContentType, queryFilterTitle, contentTypeLabel, typeSelectorAllTypesOptionText, contentTypeOptions, searchInputName, searchInputPlaceholderText, searchInputLabel, countLabel, sortLabel, sortOptions, sortOrderLabel, sortOrderOptions, children, }: QueryFilterProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
@@ -1480,17 +1524,21 @@ declare function useRequest(): RequestContext;
|
|
|
1480
1524
|
|
|
1481
1525
|
type RequestTypeContainerProps = React$1.HTMLAttributes<HTMLDivElement> & {
|
|
1482
1526
|
/**sets the background color of the container
|
|
1483
|
-
* @
|
|
1527
|
+
* @defaultValue 'transparent'
|
|
1484
1528
|
*/
|
|
1485
1529
|
bgColor?: 'transparent' | 'var(--gray-100)';
|
|
1486
1530
|
children: React$1.ReactNode;
|
|
1487
1531
|
};
|
|
1488
1532
|
/**
|
|
1489
|
-
*
|
|
1490
|
-
* @example
|
|
1491
|
-
*
|
|
1492
|
-
* <
|
|
1493
|
-
*
|
|
1533
|
+
* a container to layout content in a 2 column grid format = 12ch 1fr
|
|
1534
|
+
* @example
|
|
1535
|
+
* ```tsx
|
|
1536
|
+
* <RequestTypeContainer bgColor="var(--gray-100)">
|
|
1537
|
+
* <label>Name <input type="text" /></label>
|
|
1538
|
+
* <label>Name <input type="text" /></label>
|
|
1539
|
+
* </RequestTypeContainer>
|
|
1540
|
+
* ```
|
|
1541
|
+
*/
|
|
1494
1542
|
declare const RequestTypeContainer: ({ bgColor, children, ...props }: RequestTypeContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1495
1543
|
|
|
1496
1544
|
/**
|
|
@@ -1707,37 +1755,55 @@ declare const MULTI_SELECT_OPERATORS: OperatorType;
|
|
|
1707
1755
|
|
|
1708
1756
|
/**
|
|
1709
1757
|
* Renders a date input field for filtering
|
|
1710
|
-
* @example
|
|
1758
|
+
* @example
|
|
1759
|
+
* ```tsx
|
|
1760
|
+
* <DateEditor ariaLabel="Date" value={value} onChange={onChange} />
|
|
1761
|
+
* ```
|
|
1711
1762
|
*/
|
|
1712
1763
|
declare const DateEditor: ({ onChange, ariaLabel, disabled, value, readOnly, valueTestId, }: FilterEditorRendererProps<string>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1713
1764
|
|
|
1714
1765
|
/**
|
|
1715
1766
|
* Renders a date range input field for filtering
|
|
1716
|
-
* @example
|
|
1767
|
+
* @example
|
|
1768
|
+
* ```tsx
|
|
1769
|
+
* <DateRangeEditor ariaLabel="Date Range" value={value} onChange={onChange} />
|
|
1770
|
+
* ```
|
|
1717
1771
|
*/
|
|
1718
1772
|
declare const DateRangeEditor: ({ ariaLabel, onChange, disabled, value, readOnly, valueTestId, }: FilterEditorRendererProps<string[]>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1719
1773
|
|
|
1720
1774
|
/**
|
|
1721
1775
|
* Multi select filter component
|
|
1722
|
-
* @example
|
|
1776
|
+
* @example
|
|
1777
|
+
* ```tsx
|
|
1778
|
+
* <FilterMultiChoiceEditor options={options} value={options.filter((option) => values.includes(option.value)} onChange={(e) => onChange(e.map((option) => option.value))} />
|
|
1779
|
+
* ```
|
|
1723
1780
|
*/
|
|
1724
1781
|
declare const FilterMultiChoiceEditor: ({ value, options, disabled, readOnly, valueTestId, ...props }: FilterEditorRendererProps<string[]>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1725
1782
|
|
|
1726
1783
|
/**
|
|
1727
1784
|
* Single select filter component
|
|
1728
|
-
* @example
|
|
1785
|
+
* @example
|
|
1786
|
+
* ```tsx
|
|
1787
|
+
* <FilterSingleChoiceEditor options={options} value={options.find((option) => values.includes(option.value)} onChange={(e) => onChange(e.value)} />
|
|
1788
|
+
* ```
|
|
1729
1789
|
*/
|
|
1730
1790
|
declare const FilterSingleChoiceEditor: ({ options, value, disabled, readOnly, onChange, valueTestId, }: FilterEditorRendererProps<string>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1731
1791
|
|
|
1732
1792
|
/**
|
|
1733
1793
|
* Renders a number input field for filtering
|
|
1734
|
-
* @example
|
|
1794
|
+
* @example
|
|
1795
|
+
* ```tsx
|
|
1796
|
+
* <NumberEditor ariaLabel="Number" value={value} onChange={onChange} />
|
|
1797
|
+
* ```
|
|
1735
1798
|
*/
|
|
1736
1799
|
declare const NumberEditor: ({ ariaLabel, onChange, disabled, value, readOnly, valueTestId, }: FilterEditorRendererProps<string>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1737
1800
|
|
|
1738
1801
|
/**
|
|
1739
1802
|
* Renders a number range input field for filtering
|
|
1740
|
-
* @example
|
|
1803
|
+
* @example
|
|
1804
|
+
* ```tsx
|
|
1805
|
+
* <NumberRangeEditor ariaLabel="Number Range" value={value} onChange={onChange} />
|
|
1806
|
+
* ```
|
|
1741
1807
|
*/
|
|
1742
1808
|
declare const NumberRangeEditor: ({ onChange, disabled, ariaLabel, value, readOnly, valueTestId, }: FilterEditorRendererProps<string[]>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1743
1809
|
|
|
@@ -1749,19 +1815,28 @@ declare const readOnlyAttributes: {
|
|
|
1749
1815
|
|
|
1750
1816
|
/**
|
|
1751
1817
|
* Status multi select filter component that renders a custom dropdown menu
|
|
1752
|
-
* @example
|
|
1818
|
+
* @example
|
|
1819
|
+
* ```tsx
|
|
1820
|
+
* <StatusMultiEditor options={options} value={value} onChange={onChange} />
|
|
1821
|
+
* ```
|
|
1753
1822
|
*/
|
|
1754
1823
|
declare const StatusMultiEditor: ({ options, value, disabled, readOnly, onChange, valueTestId, }: FilterEditorRendererProps<string[]>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1755
1824
|
|
|
1756
1825
|
/**
|
|
1757
1826
|
* Status single select filter component that renders a custom dropdown menu
|
|
1758
|
-
* @example
|
|
1827
|
+
* @example
|
|
1828
|
+
* ```tsx
|
|
1829
|
+
* <StatusSingleEditor options={options} value={value} onChange={onChange} />
|
|
1830
|
+
* ```
|
|
1759
1831
|
*/
|
|
1760
1832
|
declare const StatusSingleEditor: ({ options, value, disabled, readOnly, onChange, valueTestId, }: FilterEditorRendererProps<string>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1761
1833
|
|
|
1762
1834
|
/**
|
|
1763
1835
|
* Renders a text input field for filtering
|
|
1764
|
-
* @example
|
|
1836
|
+
* @example
|
|
1837
|
+
* ```tsx
|
|
1838
|
+
* <TextEditor ariaLabel="Search" value={value} onChange={onChange} />
|
|
1839
|
+
* ```
|
|
1765
1840
|
*/
|
|
1766
1841
|
declare const TextEditor: ({ onChange, ariaLabel, value, readOnly, valueTestId, }: FilterEditorRendererProps<string>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1767
1842
|
|
|
@@ -1772,11 +1847,11 @@ declare const TextMultiChoiceEditor: ({ value, disabled, readOnly, valueTestId,
|
|
|
1772
1847
|
|
|
1773
1848
|
type FilterButtonProps = {
|
|
1774
1849
|
/** text to display on the button
|
|
1775
|
-
* @
|
|
1850
|
+
* @defaultValue "Filters"
|
|
1776
1851
|
*/
|
|
1777
1852
|
text?: string;
|
|
1778
1853
|
/** icon to display on the button
|
|
1779
|
-
* @
|
|
1854
|
+
* @defaultValue "filter-add"
|
|
1780
1855
|
*/
|
|
1781
1856
|
icon?: IconType;
|
|
1782
1857
|
/** number of filters to display on the button and sets the styles on the button */
|
|
@@ -1790,13 +1865,19 @@ type FilterButtonProps = {
|
|
|
1790
1865
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
1791
1866
|
/**
|
|
1792
1867
|
* A filter button component used to display filter menu options
|
|
1793
|
-
* @example
|
|
1868
|
+
* @example
|
|
1869
|
+
* ```tsx
|
|
1870
|
+
* <FilterButton text="Filters" filterCount={3} />
|
|
1871
|
+
* ```
|
|
1794
1872
|
*/
|
|
1795
1873
|
declare const FilterButton: ({ text, icon, filterCount, hasSelectedValue, dataTestId, showDropdownIcon, ...props }: FilterButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1796
1874
|
|
|
1797
1875
|
/**
|
|
1798
1876
|
* Default filter controls for search and filter
|
|
1799
|
-
* @example
|
|
1877
|
+
* @example
|
|
1878
|
+
* ```tsx
|
|
1879
|
+
* <FilterControls />
|
|
1880
|
+
* ```
|
|
1800
1881
|
*/
|
|
1801
1882
|
declare const FilterControls: ({ children, hideSearchInput, }: {
|
|
1802
1883
|
/** optional param to allow you to add your own controls */
|
|
@@ -1807,7 +1888,10 @@ declare const FilterControls: ({ children, hideSearchInput, }: {
|
|
|
1807
1888
|
|
|
1808
1889
|
/**
|
|
1809
1890
|
* Renders a filter editor component
|
|
1810
|
-
* @example
|
|
1891
|
+
* @example
|
|
1892
|
+
* ```tsx
|
|
1893
|
+
* <FilterEditorRenderer editorType="multiChoice" options={options} value={value} onChange={onChange} />
|
|
1894
|
+
* ```
|
|
1811
1895
|
*/
|
|
1812
1896
|
declare const FilterEditorRenderer: ({ editorType, ...props }: FilterEditorRendererProps<never>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1813
1897
|
/** A mapper for filter editor components */
|
|
@@ -1853,9 +1937,7 @@ type SearchAndFilterProviderProps = {
|
|
|
1853
1937
|
onChange: (filters: Filter[]) => void;
|
|
1854
1938
|
/** Sets default value for full text search input, useful for bindable search */
|
|
1855
1939
|
defaultSearchTerm?: string;
|
|
1856
|
-
/** sets the reset filter values
|
|
1857
|
-
* @default "[{ field: '', operator: '', value: '' }]"
|
|
1858
|
-
*/
|
|
1940
|
+
/** sets the reset filter values */
|
|
1859
1941
|
resetFilterValues?: Filter[];
|
|
1860
1942
|
/** sets the list of filter options for each filter row */
|
|
1861
1943
|
filterOptions: FilterOptionGroup[];
|
|
@@ -1907,11 +1989,17 @@ type SearchAndFilterContextProps = {
|
|
|
1907
1989
|
declare const SearchAndFilterContext: React$1.Context<SearchAndFilterContextProps>;
|
|
1908
1990
|
/**
|
|
1909
1991
|
* Search and filter provider
|
|
1910
|
-
* @example
|
|
1992
|
+
* @example
|
|
1993
|
+
* ```tsx
|
|
1994
|
+
* <SearchAndFilterProvider filters={filters} filterOptions={filterOptions} onSearchChange={onSearchChange} onChange={onChange}>Children</SearchAndFilterProvider>
|
|
1995
|
+
* ```
|
|
1911
1996
|
* */
|
|
1912
1997
|
declare const SearchAndFilterProvider: ({ filters, filterOptions, filterVisible, alwaysVisible, defaultSearchTerm, onSearchChange, onChange, resetFilterValues, onResetFilterValues, totalResults, isLoading, filterMapper, children, allowBindingSearchTerm, }: SearchAndFilterProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1913
1998
|
/** Search and filter hook
|
|
1914
|
-
* @example
|
|
1999
|
+
* @example
|
|
2000
|
+
* ```tsx
|
|
2001
|
+
* const { searchTerm, setSearchTerm, filterVisibility, setFilterVisibility, filters, setFilters, handleAddFilter, handleResetFilters, handleDeleteFilter, filterOptions, validFilterQuery } = useSearchAndFilter();
|
|
2002
|
+
* ```
|
|
1915
2003
|
*/
|
|
1916
2004
|
declare const useSearchAndFilter: () => {
|
|
1917
2005
|
/** the search term value */
|
|
@@ -1948,7 +2036,7 @@ declare const useSearchAndFilter: () => {
|
|
|
1948
2036
|
|
|
1949
2037
|
type SearchAndFilterProps = Omit<SearchAndFilterProviderProps, 'children'> & {
|
|
1950
2038
|
/** The filter controls to be displayed
|
|
1951
|
-
* @
|
|
2039
|
+
* @defaultValue '<FilterControls />'
|
|
1952
2040
|
*/
|
|
1953
2041
|
filterControls?: React$1.ReactNode;
|
|
1954
2042
|
/** sets the filter mode */
|
|
@@ -1960,7 +2048,7 @@ type SearchAndFilterProps = Omit<SearchAndFilterProviderProps, 'children'> & {
|
|
|
1960
2048
|
/** Whether data is currently loading */
|
|
1961
2049
|
isLoading?: boolean;
|
|
1962
2050
|
/** The results container view
|
|
1963
|
-
* @
|
|
2051
|
+
* @defaultValue '<SearchAndFilterResultContainer />'
|
|
1964
2052
|
*/
|
|
1965
2053
|
resultsContainerView?: React$1.ReactNode;
|
|
1966
2054
|
/** sets the reset filter values */
|
|
@@ -1974,7 +2062,10 @@ type SearchAndFilterProps = Omit<SearchAndFilterProviderProps, 'children'> & {
|
|
|
1974
2062
|
};
|
|
1975
2063
|
/**
|
|
1976
2064
|
* Search and filter component
|
|
1977
|
-
* @example
|
|
2065
|
+
* @example
|
|
2066
|
+
* ```tsx
|
|
2067
|
+
* <SearchAndFilter filters={filters} filterOptions={filterOptions} onChange={onChange} onSearchChange={onSearchChange} onSearchReset={onSearchReset} totalResults={totalResults} />
|
|
2068
|
+
* ```
|
|
1978
2069
|
* */
|
|
1979
2070
|
declare const SearchAndFilter: ({ filters, filterOptions, filterVisible, filterControls, viewSwitchControls, resultsContainerView, filterMapper, additionalFiltersContainer, onChange, defaultSearchTerm, onSearchChange, totalResults, isLoading, allowBindingSearchTerm, resetFilterValues, onResetFilterValues, }: SearchAndFilterProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1980
2071
|
|
|
@@ -1997,7 +2088,10 @@ type SearchAndFilterOptionsContainerProps = {
|
|
|
1997
2088
|
};
|
|
1998
2089
|
/**
|
|
1999
2090
|
* A container component for search and filter options
|
|
2000
|
-
* @example
|
|
2091
|
+
* @example
|
|
2092
|
+
* ```tsx
|
|
2093
|
+
* <SearchAndFilterOptionsContainer buttonRow={<button>Button</button>}>Children</SearchAndFilterOptionsContainer>
|
|
2094
|
+
* ```
|
|
2001
2095
|
* */
|
|
2002
2096
|
declare const SearchAndFilterOptionsContainer: ({ buttonRow, additionalFiltersContainer, children, }: SearchAndFilterOptionsContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2003
2097
|
type FiltersProps = {
|
|
@@ -2012,20 +2106,23 @@ type FiltersProps = {
|
|
|
2012
2106
|
/** Sets the data-test-id attribute for the filter menu */
|
|
2013
2107
|
dataTestId?: string;
|
|
2014
2108
|
/** The text for the reset button
|
|
2015
|
-
* @
|
|
2109
|
+
* @defaultValue 'reset'
|
|
2016
2110
|
*/
|
|
2017
2111
|
resetButtonText?: string;
|
|
2018
2112
|
additionalFiltersContainer?: SearchAndFilterProps['additionalFiltersContainer'];
|
|
2019
2113
|
};
|
|
2020
2114
|
/**
|
|
2021
2115
|
* A filter menu component used to display filter options
|
|
2022
|
-
* @example
|
|
2116
|
+
* @example
|
|
2117
|
+
* ```tsx
|
|
2118
|
+
* <FilterMenu id="search-and-filter-options">Children</FilterMenu>
|
|
2119
|
+
* ```
|
|
2023
2120
|
* */
|
|
2024
2121
|
declare const FilterMenu: ({ id, filterTitle, menuControls, additionalFiltersContainer, children, dataTestId, resetButtonText, }: FiltersProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2025
2122
|
|
|
2026
2123
|
type SearchAndFilterResultContainerProps = {
|
|
2027
2124
|
/** The label for the clear button
|
|
2028
|
-
* @
|
|
2125
|
+
* @defaultValue 'Clear'
|
|
2029
2126
|
*/
|
|
2030
2127
|
clearButtonLabel?: string;
|
|
2031
2128
|
/** The text for the button */
|
|
@@ -2045,7 +2142,7 @@ declare const SearchAndFilterResultContainer: ({ buttonText, clearButtonLabel, c
|
|
|
2045
2142
|
declare const SearchOnlyContext: React$1.Context<Pick<SearchAndFilterContextProps, "searchTerm" | "setSearchTerm">>;
|
|
2046
2143
|
type SearchOnlyProviderProps = Pick<SearchAndFilterProviderProps, 'onSearchChange'> & {
|
|
2047
2144
|
/** sets the max width of input wrapper
|
|
2048
|
-
* @
|
|
2145
|
+
* @defaultValue '712px'
|
|
2049
2146
|
*/
|
|
2050
2147
|
maxWidth?: string;
|
|
2051
2148
|
};
|
|
@@ -2053,11 +2150,11 @@ declare const SearchOnlyFilter: ({ onSearchChange, maxWidth }: SearchOnlyProvide
|
|
|
2053
2150
|
|
|
2054
2151
|
type SortItemsProps = {
|
|
2055
2152
|
/** The label for the sort by field
|
|
2056
|
-
* @
|
|
2153
|
+
* @defaultValue 'Sort by'
|
|
2057
2154
|
*/
|
|
2058
2155
|
sortByLabel?: string;
|
|
2059
2156
|
/** The label for the locale returned field
|
|
2060
|
-
* @
|
|
2157
|
+
* @defaultValue 'Enabled locale'
|
|
2061
2158
|
*/
|
|
2062
2159
|
localeLabel?: string;
|
|
2063
2160
|
/** sets the list of sort options */
|
|
@@ -2149,8 +2246,8 @@ declare function useUniformMeshSdk(): _uniformdev_mesh_sdk.UniformMeshSDK;
|
|
|
2149
2246
|
/**
|
|
2150
2247
|
* Creates a validation interceptor between useMeshLocation's setValue function and your code.
|
|
2151
2248
|
* You can use this utility to write cleaner validation logic for your Mesh Location UIs.
|
|
2152
|
-
* @param setValue The location's raw setValue function
|
|
2153
|
-
* @param validate A function to validate the new location's value.
|
|
2249
|
+
* @param setValue - The location's raw setValue function
|
|
2250
|
+
* @param validate - A function to validate the new location's value.
|
|
2154
2251
|
* @returns An equivalent to the setValue function that intercepts sets, performs validation, and emits the result with the new value.
|
|
2155
2252
|
*/
|
|
2156
2253
|
declare function createLocationValidator<TSetValue>(setValue: SetLocationValueDispatch<TSetValue>, validate: (newValue: TSetValue, currentResult: SetValueOptions | undefined) => SetValueOptions): SetLocationValueDispatch<TSetValue>;
|
|
@@ -2159,7 +2256,11 @@ type ContentDataResourceLocaleInfoResult = {
|
|
|
2159
2256
|
/**
|
|
2160
2257
|
* Effective locale for data resource. It can be one of two types:
|
|
2161
2258
|
* - raw locale string - locale stored in mesh data type/resource (e.g. 'en-US')
|
|
2162
|
-
* - variable reference - locale stored in mesh data type/resource as a variable reference
|
|
2259
|
+
* - variable reference - locale stored in mesh data type/resource as a variable reference
|
|
2260
|
+
* @example
|
|
2261
|
+
* ```
|
|
2262
|
+
* ${locale}
|
|
2263
|
+
* ```
|
|
2163
2264
|
*/
|
|
2164
2265
|
effectiveLocale: string;
|
|
2165
2266
|
/** Bound locale value. It can be one of two types:
|
|
@@ -2173,7 +2274,11 @@ type ContentDataResourceLocaleInfoProps = {
|
|
|
2173
2274
|
* It can be one of tree types:
|
|
2174
2275
|
* - undefined - no locale stored in mesh data type/resource yet or it is not localized
|
|
2175
2276
|
* - raw locale string - locale stored in mesh data type/resource (e.g. 'en-US')
|
|
2176
|
-
* - variable reference - locale stored in mesh data type/resource as a variable reference
|
|
2277
|
+
* - variable reference - locale stored in mesh data type/resource as a variable reference
|
|
2278
|
+
* @example
|
|
2279
|
+
* ```
|
|
2280
|
+
* ${locale}
|
|
2281
|
+
* ```
|
|
2177
2282
|
*
|
|
2178
2283
|
* If locale is empty, fallback to dynamic locale value if it is available.
|
|
2179
2284
|
*/
|
|
@@ -2182,7 +2287,7 @@ type ContentDataResourceLocaleInfoProps = {
|
|
|
2182
2287
|
defaultLocale: string | undefined;
|
|
2183
2288
|
/** Map of dynamic inputs for current composition. Should be passed down from DataResource metadata */
|
|
2184
2289
|
dynamicInputs: DynamicInputs;
|
|
2185
|
-
/** In case of empty locale value, this method is called to bind dynamic locale
|
|
2290
|
+
/** In case of empty locale value, this method is called to bind dynamic locale */
|
|
2186
2291
|
setLocale?: (locale: string) => void;
|
|
2187
2292
|
};
|
|
2188
2293
|
declare function useContentDataResourceLocaleInfo({ locale, defaultLocale, setLocale, dynamicInputs, }: ContentDataResourceLocaleInfoProps): ContentDataResourceLocaleInfoResult;
|