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