@oracle/oraclejet-core-pack 17.0.4 → 17.1.0

package/oj-c/select-multiple/component.json

@@ -1,7 +1,7 @@
 {
   "name": "select-multiple",
-  "version": "17.0.4",
-  "jetVersion": "^17.0.4",
+  "version": "17.1.0",
+  "jetVersion": "^17.1.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -29,7 +29,7 @@
       ]
     },
     "webelement": {
-      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/SelectMultipleWebElement.html"
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1710/cpwdtsdoc/classes/SelectMultipleWebElement.html"
     }
   },
   "propertyLayout": [
@@ -64,6 +64,104 @@
       ]
     }
   ],
+  "slots": {
+    "collectionTemplate": {
+      "description": "The collectionTemplate slot is used to specify the template for rendering the items in the dropdown.",
+      "displayName": "collectionTemplate",
+      "help": "#collectionTemplate",
+      "maxItems": 1,
+      "preferredContent": [
+        "CTableElement"
+      ],
+      "data": {
+        "data": {
+          "type": "DataProvider|null"
+        },
+        "searchText": {
+          "type": "string"
+        },
+        "currentRowOverride": {
+          "type": "object",
+          "properties": {
+            "rowKey": {
+              "type": "any"
+            }
+          }
+        },
+        "onCurrentRowChanged": {
+          "type": "function"
+        },
+        "selected": {
+          "type": "object"
+        },
+        "onSelectedChanged": {
+          "type": "function"
+        }
+      }
+    },
+    "itemTemplate": {
+      "description": "The itemTemplate slot is used to specify the template for rendering each item in the dropdown. See the Help documentation for more information.",
+      "displayName": "itemTemplate",
+      "help": "#itemTemplate",
+      "maxItems": 1,
+      "data": {
+        "searchText": {
+          "type": "string"
+        },
+        "item": {
+          "type": "object",
+          "properties": {
+            "data": {
+              "type": "any"
+            },
+            "metadata": {
+              "type": "object",
+              "properties": {
+                "indexFromParent": {
+                  "type": "number"
+                },
+                "isLeaf": {
+                  "type": "boolean"
+                },
+                "key": {
+                  "type": "any"
+                },
+                "message": {
+                  "type": "object",
+                  "properties": {
+                    "detail": {
+                      "type": "string"
+                    },
+                    "severity": {
+                      "type": "string|number"
+                    },
+                    "summary": {
+                      "type": "string"
+                    }
+                  }
+                },
+                "parentKey": {
+                  "type": "any"
+                },
+                "suggestion": {
+                  "type": "object"
+                },
+                "treeDepth": {
+                  "type": "number"
+                }
+              }
+            }
+          }
+        },
+        "selectedKeys": {
+          "type": "object"
+        },
+        "onSelectedKeysChanged": {
+          "type": "function"
+        }
+      }
+    }
+  },
   "properties": {
     "columnSpan": {
       "type": "number",
@@ -459,70 +557,6 @@
       "writeback": true
     }
   },
-  "slots": {
-    "itemTemplate": {
-      "description": "The itemTemplate slot is used to specify the template for rendering each item in the dropdown. See the Help documentation for more information.",
-      "displayName": "itemTemplate",
-      "help": "#itemTemplate",
-      "maxItems": 1,
-      "data": {
-        "searchText": {
-          "type": "string"
-        },
-        "item": {
-          "type": "object",
-          "properties": {
-            "data": {
-              "type": "any"
-            },
-            "metadata": {
-              "type": "object",
-              "properties": {
-                "indexFromParent": {
-                  "type": "number"
-                },
-                "isLeaf": {
-                  "type": "boolean"
-                },
-                "key": {
-                  "type": "any"
-                },
-                "message": {
-                  "type": "object",
-                  "properties": {
-                    "detail": {
-                      "type": "string"
-                    },
-                    "severity": {
-                      "type": "string|number"
-                    },
-                    "summary": {
-                      "type": "string"
-                    }
-                  }
-                },
-                "parentKey": {
-                  "type": "any"
-                },
-                "suggestion": {
-                  "type": "object"
-                },
-                "treeDepth": {
-                  "type": "number"
-                }
-              }
-            }
-          }
-        },
-        "selectedKeys": {
-          "type": "object"
-        },
-        "onSelectedKeysChanged": {
-          "type": "function"
-        }
-      }
-    }
-  },
   "methods": {
     "blur": {
       "description": "Blurs the input field.",

package/oj-c/select-multiple/select-multiple.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "@oracle/oraclejet-preact/UNSAFE_SelectMultiple", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "ojs/ojcontext", "ojs/ojvcomponent", "preact/compat", "preact/hooks", "oj-c/editable-value/UNSAFE_useAssistiveText/useAssistiveText", "./useSelectMultiplePreact", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormContext", "oj-c/hooks/UNSAFE_useMergedFormContext/useMergedFormContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormVariantContext", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "css!oj-c/select-multiple/select-multiple-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_SelectMultiple_1, UNSAFE_useTabbableMode_1, Context, ojvcomponent_1, compat_1, hooks_1, useAssistiveText_1, useSelectMultiplePreact_1, UNSAFE_useFormContext_1, useMergedFormContext_1, UNSAFE_useFormVariantContext_1, Layout_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "@oracle/oraclejet-preact/UNSAFE_SelectMultiple", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormVariantContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "oj-c/editable-value/UNSAFE_useAssistiveText/useAssistiveText", "oj-c/hooks/UNSAFE_useMergedFormContext/useMergedFormContext", "ojs/ojvcomponent", "preact/compat", "preact/hooks", "./useSelectMultiplePreact", "ojs/ojcontext", "css!oj-c/select-multiple/select-multiple-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_SelectMultiple_1, UNSAFE_useFormContext_1, UNSAFE_useFormVariantContext_1, UNSAFE_useTabbableMode_1, Layout_1, useAssistiveText_1, useMergedFormContext_1, ojvcomponent_1, compat_1, hooks_1, useSelectMultiplePreact_1, Context) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.SelectMultiple = void 0;
@@ -58,7 +58,7 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
         const variant = (0, UNSAFE_useFormVariantContext_1.useFormVariantContext)();
         return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: id, ref: rootRef, class: Layout_1.layoutSpanStyles.layoutSpanColumn[columnSpan], children: (0, jsx_runtime_1.jsx)(UNSAFE_useFormContext_1.FormContext.Provider, { value: containerProps, children: (0, jsx_runtime_1.jsx)(UNSAFE_SelectMultiple_1.SelectMultiple, { ref: selectMultipleRef, ...assistiveTextProps, ...selectMultipleProps, variant: variant }) }) }));
     }
-    exports.SelectMultiple = (0, ojvcomponent_1.registerCustomElement)('oj-c-select-multiple', (0, compat_1.forwardRef)(SelectMultipleImpl), "SelectMultiple", { "properties": { "columnSpan": { "type": "number" }, "containerReadonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "data": { "type": "DataProvider|null" }, "disabled": { "type": "boolean" }, "displayOptions": { "type": "object", "properties": { "messages": { "type": "string", "enumValues": ["none", "display"] } } }, "help": { "type": "object", "properties": { "instruction": { "type": "string" } } }, "helpHints": { "type": "object", "properties": { "definition": { "type": "string" }, "source": { "type": "string" }, "sourceText": { "type": "string" } } }, "itemText": { "type": "string|number|function" }, "labelEdge": { "type": "string", "enumValues": ["none", "start", "top", "inside"], "binding": { "consume": { "name": "containerLabelEdge" } } }, "labelHint": { "type": "string" }, "labelStartWidth": { "type": "number|string", "binding": { "consume": { "name": "labelWidth" } } }, "labelWrapping": { "type": "string", "enumValues": ["truncate", "wrap"], "binding": { "consume": { "name": "labelWrapping" } } }, "matchBy": { "type": "Array<string>|null" }, "messagesCustom": { "type": "Array<object>", "writeback": true }, "placeholder": { "type": "string" }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "required": { "type": "boolean" }, "requiredMessageDetail": { "type": "string" }, "textAlign": { "type": "string", "enumValues": ["end", "start", "right"] }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" } } }, "value": { "type": "object|null", "writeback": true }, "valueItems": { "type": "object|null", "writeback": true }, "virtualKeyboard": { "type": "string", "enumValues": ["number", "search", "auto", "url", "text", "email", "tel"] }, "valid": { "type": "string", "enumValues": ["pending", "valid", "invalidHidden", "invalidShown"], "readOnly": true, "writeback": true } }, "slots": { "itemTemplate": { "data": {} } }, "extension": { "_WRITEBACK_PROPS": ["messagesCustom", "valid", "value", "valueItems"], "_READ_ONLY_PROPS": ["valid"], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "id"] }, "methods": { "blur": {}, "focus": {}, "showMessages": {}, "reset": {}, "validate": {}, "_selectItemsByValue": {} } }, { "columnSpan": 1, "data": null, "disabled": false, "displayOptions": { "messages": "display" }, "help": { "instruction": "" }, "helpHints": { "definition": "", "source": "" }, "matchBy": null, "messagesCustom": [], "required": false, "value": null, "valueItems": null, "virtualKeyboard": "auto" }, {
+    exports.SelectMultiple = (0, ojvcomponent_1.registerCustomElement)('oj-c-select-multiple', (0, compat_1.forwardRef)(SelectMultipleImpl), "SelectMultiple", { "slots": { "collectionTemplate": { "data": {} }, "itemTemplate": { "data": {} } }, "properties": { "columnSpan": { "type": "number" }, "containerReadonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "data": { "type": "DataProvider|null" }, "disabled": { "type": "boolean" }, "displayOptions": { "type": "object", "properties": { "messages": { "type": "string", "enumValues": ["none", "display"] } } }, "help": { "type": "object", "properties": { "instruction": { "type": "string" } } }, "helpHints": { "type": "object", "properties": { "definition": { "type": "string" }, "source": { "type": "string" }, "sourceText": { "type": "string" } } }, "itemText": { "type": "string|number|function" }, "labelEdge": { "type": "string", "enumValues": ["none", "start", "top", "inside"], "binding": { "consume": { "name": "containerLabelEdge" } } }, "labelHint": { "type": "string" }, "labelStartWidth": { "type": "number|string", "binding": { "consume": { "name": "labelWidth" } } }, "labelWrapping": { "type": "string", "enumValues": ["truncate", "wrap"], "binding": { "consume": { "name": "labelWrapping" } } }, "matchBy": { "type": "Array<string>|null" }, "messagesCustom": { "type": "Array<object>", "writeback": true }, "placeholder": { "type": "string" }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "required": { "type": "boolean" }, "requiredMessageDetail": { "type": "string" }, "textAlign": { "type": "string", "enumValues": ["end", "start", "right"] }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" } } }, "value": { "type": "object|null", "writeback": true }, "valueItems": { "type": "object|null", "writeback": true }, "virtualKeyboard": { "type": "string", "enumValues": ["number", "search", "auto", "url", "text", "email", "tel"] }, "valid": { "type": "string", "enumValues": ["pending", "valid", "invalidHidden", "invalidShown"], "readOnly": true, "writeback": true } }, "extension": { "_WRITEBACK_PROPS": ["messagesCustom", "valid", "value", "valueItems"], "_READ_ONLY_PROPS": ["valid"], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "id"] }, "methods": { "blur": {}, "focus": {}, "showMessages": {}, "reset": {}, "validate": {}, "_selectItemsByValue": {} } }, { "columnSpan": 1, "data": null, "disabled": false, "displayOptions": { "messages": "display" }, "help": { "instruction": "" }, "helpHints": { "definition": "", "source": "" }, "matchBy": null, "messagesCustom": [], "required": false, "value": null, "valueItems": null, "virtualKeyboard": "auto" }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
     }, { consume: [UNSAFE_useFormVariantContext_1.FormVariantContext, UNSAFE_useTabbableMode_1.TabbableModeContext] });
 });

package/oj-c/select-multiple/useSelectMultiplePreact.js

@@ -1,10 +1,10 @@
-define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslationBundle", "oj-c/editable-value/UNSAFE_useEditableValue/useEditableValue", "oj-c/editable-value/UNSAFE_useValidators/useValidators", "oj-c/hooks/UNSAFE_useListData/useListData", "oj-c/select-common/UNSAFE_useDataProviderListeners/useDataProviderListeners", "oj-c/select-common/UNSAFE_useWrapDataProvider/useWrapDataProvider", "oj-c/select-common/UNSAFE_useWrapValueState/useWrapValueState", "oj-c/select-common/utils/utils", "oj-c/utils/UNSAFE_keyUtils/keySetUtils", "preact/hooks", "./useSyncValueAndValueItems", "./useValueItems"], function (require, exports, UNSAFE_useTranslationBundle_1, useEditableValue_1, useValidators_1, useListData_1, useDataProviderListeners_1, useWrapDataProvider_1, useWrapValueState_1, utils_1, keySetUtils_1, hooks_1, useSyncValueAndValueItems_1, useValueItems_1) {
+define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslationBundle", "oj-c/editable-value/UNSAFE_useEditableValue/useEditableValue", "oj-c/editable-value/UNSAFE_useValidators/useValidators", "oj-c/select-common/PRIVATE_useCache/index", "oj-c/select-common/PRIVATE_useSelectData/index", "oj-c/select-common/UNSAFE_useDataProviderListeners/useDataProviderListeners", "oj-c/select-common/UNSAFE_useWrapValueState/useWrapValueState", "oj-c/select-common/utils/utils", "oj-c/utils/UNSAFE_keyUtils/keySetUtils", "ojs/ojkeyset", "preact/hooks", "./useSyncValueAndValueItems", "./useValueItems"], function (require, exports, UNSAFE_useTranslationBundle_1, useEditableValue_1, useValidators_1, index_1, index_2, useDataProviderListeners_1, useWrapValueState_1, utils_1, keySetUtils_1, ojkeyset_1, hooks_1, useSyncValueAndValueItems_1, useValueItems_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useSelectMultiplePreact = void 0;
-    function useSelectMultiplePreact({ data: propData, disabled, displayOptions, itemTemplate, itemText, labelEdge, labelHint, labelStartWidth, matchBy: propMatchBy, messagesCustom, placeholder, readonly, required, requiredMessageDetail: propRequiredMessageDetail, textAlign, userAssistanceDensity, value: propValue, valueItems: propValueItems, virtualKeyboard, onMessagesCustomChanged, onValidChanged, onValueChanged, onValueItemsChanged, ...otherProps }, addBusyState) {
+    function useSelectMultiplePreact({ collectionTemplate, data, disabled, displayOptions, itemTemplate, itemText, labelEdge, labelHint, labelStartWidth, matchBy: propMatchBy, messagesCustom, placeholder, readonly, required, requiredMessageDetail: propRequiredMessageDetail, textAlign, userAssistanceDensity, value: propValue, valueItems: propValueItems, virtualKeyboard, onMessagesCustomChanged, onValidChanged, onValueChanged, onValueItemsChanged, ...otherProps }, addBusyState) {
         const [filterCriterion, setFilterCriterion] = (0, hooks_1.useState)(undefined);
-        const [isLoading, setIsLoading] = (0, hooks_1.useState)(propData != null &&
+        const [isLoading, setIsLoading] = (0, hooks_1.useState)(data != null &&
             propValue != null &&
             propValue.size > 0 &&
             (propValueItems == null || propValueItems.size === 0));
@@ -42,7 +42,13 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
         });
         const { 'aria-describedby': ariaDescribedBy, messages } = textFieldProps;
         const hasNoValue = value === null || (value instanceof Set && value.size === 0);
-        const dataProvider = (0, useWrapDataProvider_1.useWrapDataProvider)(propData);
+        const [dataStateOverride, setDataStateOverride] = (0, hooks_1.useState)();
+        const { dataProvider, dataState, onLoadRange } = (0, index_2.useSelectData)({
+            data,
+            dataStateOverride,
+            filterCriterion,
+            hasCollectionTemplate: collectionTemplate !== undefined
+        });
         const [valueToSync, setValueToSync] = (0, hooks_1.useState)(value);
         const [valueItemsToSync, setValueItemsToSync] = (0, hooks_1.useState)(valueItems);
         const [prevValue, setPrevValue] = (0, hooks_1.useState)(value);
@@ -72,10 +78,6 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
             valueItems: valueItemsToSync,
             validateValueOnExternalChange
         });
-        const [listDataState, onLoadRange] = (0, useListData_1.useListData)(dataProvider, {
-            filterCriterion,
-            initialRowsFetched: 0
-        });
         const onCommit = (0, hooks_1.useCallback)(async ({ value }) => {
             const valueToCommit = (value && value.size > 0 ? value : utils_1.DEFAULT_VALUE);
             setDisplayValue(valueToCommit);
@@ -100,23 +102,25 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
             setFilterCriterion(fc);
         }, [dataProvider, matchBy]);
         const prevSelectedKeysRef = (0, hooks_1.useRef)((0, keySetUtils_1.keysToKeySet)({ all: false, keys: new Set() }));
-        const itemRenderer = (0, hooks_1.useCallback)(({ data, metadata, searchText, selectedKeys: preactSelectedKeys, onSelectionChange: preactOnSelectionChange }) => {
-            const newPreactSelectedKeys = preactSelectedKeys ?? new Set();
-            const prevPreactSelectedKeys = prevSelectedKeysRef.current.keys.keys ?? new Set();
-            const selectedKeys = (0, utils_1.isSetEqual)(prevPreactSelectedKeys, newPreactSelectedKeys)
-                ? prevSelectedKeysRef.current
-                : (0, keySetUtils_1.keysToKeySet)({ all: false, keys: newPreactSelectedKeys });
-            prevSelectedKeysRef.current = selectedKeys;
-            const onSelectedKeysChanged = ((arg) => {
-                const immutableKeySet = (arg instanceof CustomEvent ? arg.detail.value : arg);
-                const immutableSet = immutableKeySet.keys.keys;
-                preactOnSelectionChange({
-                    target: arg instanceof CustomEvent ? arg.target : null,
-                    value: new Set(immutableSet?.values())
+        const itemRenderer = (0, hooks_1.useMemo)(() => {
+            if (!itemTemplate)
+                return undefined;
+            return ({ data, metadata, searchText, selectedKeys: preactSelectedKeys, onSelectionChange: preactOnSelectionChange }) => {
+                const newPreactSelectedKeys = preactSelectedKeys ?? new Set();
+                const prevPreactSelectedKeys = prevSelectedKeysRef.current.keys.keys ?? new Set();
+                const selectedKeys = (0, utils_1.isSetEqual)(prevPreactSelectedKeys, newPreactSelectedKeys)
+                    ? prevSelectedKeysRef.current
+                    : (0, keySetUtils_1.keysToKeySet)({ all: false, keys: newPreactSelectedKeys });
+                prevSelectedKeysRef.current = selectedKeys;
+                const onSelectedKeysChanged = ((arg) => {
+                    const immutableKeySet = (arg instanceof CustomEvent ? arg.detail.value : arg);
+                    const immutableSet = immutableKeySet.keys.keys;
+                    preactOnSelectionChange({
+                        target: arg instanceof CustomEvent ? arg.target : null,
+                        value: new Set(immutableSet?.values())
+                    });
                 });
-            });
-            return itemTemplate
-                ? itemTemplate({
+                return itemTemplate({
                     selectedKeys,
                     onSelectedKeysChanged,
                     item: {
@@ -124,9 +128,45 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
                         metadata: metadata
                     },
                     searchText
-                })
-                : undefined;
+                });
+            };
         }, [itemTemplate]);
+        const stableCollectionTemplateContextRef = (0, hooks_1.useRef)();
+        const cache = (0, index_1.useCache)();
+        const collectionRenderer = (0, hooks_1.useMemo)(() => {
+            if (!collectionTemplate)
+                return undefined;
+            return ({ currentRowKeyOverride, onPersistCurrentRowKey, onSelectedChange, searchText, selected, selectedOnlyData }) => {
+                if (dataStateOverride !== selectedOnlyData) {
+                    setDataStateOverride(selectedOnlyData);
+                }
+                const newCollectionTemplateContext = {
+                    currentRowOverride: cache('currentRowOverride', currentRowKeyOverride ? { rowKey: currentRowKeyOverride } : undefined, [currentRowKeyOverride, searchText]),
+                    data: dataProvider,
+                    onCurrentRowChanged: cache('onCurrentRowChanged', ({ rowKey }) => {
+                        onPersistCurrentRowKey({ value: rowKey });
+                    }, [onPersistCurrentRowKey]),
+                    onSelectedChanged: cache('onSelectedChanged', (detail) => {
+                        if (detail.value?.keys.all === false) {
+                            const immutableSet = detail.value.keys.keys;
+                            const current = selected ?? new Set();
+                            const next = new Set(immutableSet.values());
+                            if (!(0, utils_1.isSetEqual)(current, next))
+                                onSelectedChange({ value: next });
+                        }
+                    }, [selected, onSelectedChange]),
+                    searchText,
+                    selected: cache('selected', new ojkeyset_1.KeySetImpl([...(selected?.values() ?? [])]), [selected])
+                };
+                if (!stableCollectionTemplateContextRef.current) {
+                    stableCollectionTemplateContextRef.current = newCollectionTemplateContext;
+                }
+                else {
+                    Object.assign(stableCollectionTemplateContextRef.current, newCollectionTemplateContext);
+                }
+                return collectionTemplate(stableCollectionTemplateContextRef.current);
+            };
+        }, [cache, collectionTemplate, dataProvider, dataStateOverride]);
         const _selectItemsByValue = (0, hooks_1.useCallback)(async (value) => {
             return onCommit({
                 value: value ?? undefined,
@@ -146,7 +186,8 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
             methods,
             selectMultipleProps: {
                 'aria-describedby': ariaDescribedBy,
-                data: listDataState.data,
+                collectionRenderer,
+                data: dataState.status !== 'error' ? dataState.data : null,
                 isDisabled: disabled,
                 isLoading,
                 isReadonly: readonly,

package/oj-c/select-single/component.json

@@ -1,7 +1,7 @@
 {
   "name": "select-single",
-  "version": "17.0.4",
-  "jetVersion": "^17.0.4",
+  "version": "17.1.0",
+  "jetVersion": "^17.1.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -35,7 +35,7 @@
       ]
     },
     "webelement": {
-      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/SelectSingleWebElement.html"
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1710/cpwdtsdoc/classes/SelectSingleWebElement.html"
     }
   },
   "propertyLayout": [
@@ -520,6 +520,40 @@
     }
   },
   "slots": {
+    "collectionTemplate": {
+      "description": "The collectionTemplate slot is used to specify the template for rendering the items in the dropdown.",
+      "displayName": "collectionTemplate",
+      "help": "#collectionTemplate",
+      "maxItems": 1,
+      "preferredContent": [
+        "CTableElement"
+      ],
+      "data": {
+        "data": {
+          "type": "DataProvider|null"
+        },
+        "searchText": {
+          "type": "string"
+        },
+        "currentRowOverride": {
+          "type": "object",
+          "properties": {
+            "rowKey": {
+              "type": "any"
+            }
+          }
+        },
+        "onCurrentRowChanged": {
+          "type": "function"
+        },
+        "selected": {
+          "type": "object"
+        },
+        "onRowAction": {
+          "type": "function"
+        }
+      }
+    },
     "itemTemplate": {
       "description": "The itemTemplate slot is used to specify the template for rendering each item in the dropdown. See the Help documentation for more information.",
       "displayName": "itemTemplate",

package/oj-c/select-single/select-single.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "@oracle/oraclejet-preact/hooks/UNSAFE_useFormContext", "oj-c/hooks/UNSAFE_useMergedFormContext/useMergedFormContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormVariantContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/UNSAFE_SelectSingle", "oj-c/editable-value/UNSAFE_useAssistiveText/useAssistiveText", "ojs/ojcontext", "ojs/ojvcomponent", "preact/compat", "preact/hooks", "./useSelectSinglePreact", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "css!oj-c/select-single/select-single-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_useFormContext_1, useMergedFormContext_1, UNSAFE_useFormVariantContext_1, UNSAFE_useTabbableMode_1, UNSAFE_SelectSingle_1, useAssistiveText_1, Context, ojvcomponent_1, compat_1, hooks_1, useSelectSinglePreact_1, Layout_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "@oracle/oraclejet-preact/UNSAFE_SelectSingle", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormVariantContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "oj-c/editable-value/UNSAFE_useAssistiveText/useAssistiveText", "oj-c/hooks/UNSAFE_useMergedFormContext/useMergedFormContext", "ojs/ojvcomponent", "preact/compat", "preact/hooks", "./useSelectSinglePreact", "ojs/ojcontext", "css!oj-c/select-single/select-single-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_SelectSingle_1, UNSAFE_useFormContext_1, UNSAFE_useFormVariantContext_1, UNSAFE_useTabbableMode_1, Layout_1, useAssistiveText_1, useMergedFormContext_1, ojvcomponent_1, compat_1, hooks_1, useSelectSinglePreact_1, Context) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.SelectSingle = void 0;
@@ -60,7 +60,7 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
         const variant = (0, UNSAFE_useFormVariantContext_1.useFormVariantContext)();
         return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: id, ref: rootRef, class: Layout_1.layoutSpanStyles.layoutSpanColumn[columnSpan], children: (0, jsx_runtime_1.jsx)(UNSAFE_useFormContext_1.FormContext.Provider, { value: containerProps, children: (0, jsx_runtime_1.jsx)(UNSAFE_SelectSingle_1.SelectSingle, { ref: selectSingleRef, ...assistiveTextProps, ...selectSingleProps, variant: variant }) }) }));
     }
-    exports.SelectSingle = (0, ojvcomponent_1.registerCustomElement)('oj-c-select-single', (0, compat_1.forwardRef)(SelectSingleImpl), "SelectSingle", { "properties": { "advancedSearch": { "type": "string", "enumValues": ["off", "on"] }, "columnSpan": { "type": "number" }, "containerReadonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "data": { "type": "DataProvider|null" }, "disabled": { "type": "boolean" }, "displayOptions": { "type": "object", "properties": { "messages": { "type": "string", "enumValues": ["none", "display"] } } }, "help": { "type": "object", "properties": { "instruction": { "type": "string" } } }, "helpHints": { "type": "object", "properties": { "definition": { "type": "string" }, "source": { "type": "string" }, "sourceText": { "type": "string" } } }, "itemText": { "type": "string|number|function" }, "labelEdge": { "type": "string", "enumValues": ["none", "start", "top", "inside"], "binding": { "consume": { "name": "containerLabelEdge" } } }, "labelHint": { "type": "string" }, "labelStartWidth": { "type": "number|string", "binding": { "consume": { "name": "labelWidth" } } }, "labelWrapping": { "type": "string", "enumValues": ["truncate", "wrap"], "binding": { "consume": { "name": "labelWrapping" } } }, "matchBy": { "type": "Array<string>|null" }, "messagesCustom": { "type": "Array<object>", "writeback": true }, "placeholder": { "type": "string" }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "required": { "type": "boolean" }, "requiredMessageDetail": { "type": "string" }, "textAlign": { "type": "string", "enumValues": ["end", "start", "right"] }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" } } }, "value": { "type": "any", "writeback": true }, "valueItem": { "type": "object|null", "properties": { "data": { "type": "any" }, "key": { "type": "any" }, "metadata": { "type": "object", "properties": { "indexFromParent": { "type": "number" }, "isLeaf": { "type": "boolean" }, "key": { "type": "any" }, "message": { "type": "object", "properties": { "detail": { "type": "string" }, "severity": { "type": "string|number" }, "summary": { "type": "string" } } }, "parentKey": { "type": "any" }, "suggestion": { "type": "object" }, "treeDepth": { "type": "number" } } } }, "writeback": true }, "virtualKeyboard": { "type": "string", "enumValues": ["number", "search", "auto", "url", "text", "email", "tel"] }, "valid": { "type": "string", "enumValues": ["pending", "valid", "invalidHidden", "invalidShown"], "readOnly": true, "writeback": true } }, "slots": { "itemTemplate": { "data": {} } }, "events": { "ojAdvancedSearchAction": {}, "ojValueAction": {} }, "extension": { "_WRITEBACK_PROPS": ["messagesCustom", "valid", "value", "valueItem"], "_READ_ONLY_PROPS": ["valid"], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "id"] }, "methods": { "blur": {}, "focus": {}, "showMessages": {}, "reset": {}, "validate": {}, "_doAdvancedSearchAction": {}, "_selectItemByValue": {} } }, { "advancedSearch": "off", "columnSpan": 1, "data": null, "disabled": false, "displayOptions": { "messages": "display" }, "help": { "instruction": "" }, "helpHints": { "definition": "", "source": "" }, "matchBy": null, "messagesCustom": [], "required": false, "value": null, "valueItem": null, "virtualKeyboard": "auto" }, {
+    exports.SelectSingle = (0, ojvcomponent_1.registerCustomElement)('oj-c-select-single', (0, compat_1.forwardRef)(SelectSingleImpl), "SelectSingle", { "properties": { "advancedSearch": { "type": "string", "enumValues": ["off", "on"] }, "columnSpan": { "type": "number" }, "containerReadonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "data": { "type": "DataProvider|null" }, "disabled": { "type": "boolean" }, "displayOptions": { "type": "object", "properties": { "messages": { "type": "string", "enumValues": ["none", "display"] } } }, "help": { "type": "object", "properties": { "instruction": { "type": "string" } } }, "helpHints": { "type": "object", "properties": { "definition": { "type": "string" }, "source": { "type": "string" }, "sourceText": { "type": "string" } } }, "itemText": { "type": "string|number|function" }, "labelEdge": { "type": "string", "enumValues": ["none", "start", "top", "inside"], "binding": { "consume": { "name": "containerLabelEdge" } } }, "labelHint": { "type": "string" }, "labelStartWidth": { "type": "number|string", "binding": { "consume": { "name": "labelWidth" } } }, "labelWrapping": { "type": "string", "enumValues": ["truncate", "wrap"], "binding": { "consume": { "name": "labelWrapping" } } }, "matchBy": { "type": "Array<string>|null" }, "messagesCustom": { "type": "Array<object>", "writeback": true }, "placeholder": { "type": "string" }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "required": { "type": "boolean" }, "requiredMessageDetail": { "type": "string" }, "textAlign": { "type": "string", "enumValues": ["end", "start", "right"] }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" } } }, "value": { "type": "any", "writeback": true }, "valueItem": { "type": "object|null", "properties": { "data": { "type": "any" }, "key": { "type": "any" }, "metadata": { "type": "object", "properties": { "indexFromParent": { "type": "number" }, "isLeaf": { "type": "boolean" }, "key": { "type": "any" }, "message": { "type": "object", "properties": { "detail": { "type": "string" }, "severity": { "type": "string|number" }, "summary": { "type": "string" } } }, "parentKey": { "type": "any" }, "suggestion": { "type": "object" }, "treeDepth": { "type": "number" } } } }, "writeback": true }, "virtualKeyboard": { "type": "string", "enumValues": ["number", "search", "auto", "url", "text", "email", "tel"] }, "valid": { "type": "string", "enumValues": ["pending", "valid", "invalidHidden", "invalidShown"], "readOnly": true, "writeback": true } }, "slots": { "collectionTemplate": { "data": {} }, "itemTemplate": { "data": {} } }, "events": { "ojAdvancedSearchAction": {}, "ojValueAction": {} }, "extension": { "_WRITEBACK_PROPS": ["messagesCustom", "valid", "value", "valueItem"], "_READ_ONLY_PROPS": ["valid"], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "id"] }, "methods": { "blur": {}, "focus": {}, "showMessages": {}, "reset": {}, "validate": {}, "_doAdvancedSearchAction": {}, "_selectItemByValue": {} } }, { "advancedSearch": "off", "columnSpan": 1, "data": null, "disabled": false, "displayOptions": { "messages": "display" }, "help": { "instruction": "" }, "helpHints": { "definition": "", "source": "" }, "matchBy": null, "messagesCustom": [], "required": false, "value": null, "valueItem": null, "virtualKeyboard": "auto" }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
     }, { consume: [UNSAFE_useFormVariantContext_1.FormVariantContext, UNSAFE_useTabbableMode_1.TabbableModeContext] });
 });

package/oj-c/select-single/useSelectSinglePreact.js

@@ -1,10 +1,10 @@
-define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslationBundle", "oj-c/editable-value/UNSAFE_useEditableValue/useEditableValue", "oj-c/editable-value/UNSAFE_useValidators/useValidators", "oj-c/editable-value/utils/utils", "oj-c/hooks/UNSAFE_useListData/useListData", "oj-c/select-common/UNSAFE_useDataProviderListeners/useDataProviderListeners", "oj-c/select-common/UNSAFE_useWrapDataProvider/useWrapDataProvider", "oj-c/select-common/UNSAFE_useWrapValueState/useWrapValueState", "oj-c/select-common/utils/utils", "preact/hooks", "./useSyncValueAndValueItem", "./useValueItem"], function (require, exports, UNSAFE_useTranslationBundle_1, useEditableValue_1, useValidators_1, utils_1, useListData_1, useDataProviderListeners_1, useWrapDataProvider_1, useWrapValueState_1, utils_2, hooks_1, useSyncValueAndValueItem_1, useValueItem_1) {
+define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslationBundle", "oj-c/editable-value/UNSAFE_useEditableValue/useEditableValue", "oj-c/editable-value/UNSAFE_useValidators/useValidators", "oj-c/editable-value/utils/utils", "oj-c/select-common/PRIVATE_useCache/index", "oj-c/select-common/PRIVATE_useSelectData/index", "oj-c/select-common/UNSAFE_useDataProviderListeners/useDataProviderListeners", "oj-c/select-common/UNSAFE_useWrapValueState/useWrapValueState", "oj-c/select-common/utils/utils", "ojs/ojkeyset", "preact/hooks", "./useSyncValueAndValueItem", "./useValueItem"], function (require, exports, UNSAFE_useTranslationBundle_1, useEditableValue_1, useValidators_1, utils_1, index_1, index_2, useDataProviderListeners_1, useWrapValueState_1, utils_2, ojkeyset_1, hooks_1, useSyncValueAndValueItem_1, useValueItem_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useSelectSinglePreact = void 0;
-    function useSelectSinglePreact({ advancedSearch, data: propData, disabled, displayOptions, itemTemplate, itemText, labelEdge, labelHint, labelStartWidth, matchBy: propMatchBy, messagesCustom, placeholder, readonly, requiredMessageDetail: propRequiredMessageDetail, required, textAlign, userAssistanceDensity, value: propValue, valueItem: propValueItem, virtualKeyboard, onMessagesCustomChanged, onOjAdvancedSearchAction, onOjValueAction, onValidChanged, onValueChanged, onValueItemChanged, ...otherProps }, addBusyState) {
+    function useSelectSinglePreact({ advancedSearch, collectionTemplate, data, disabled, displayOptions, itemTemplate, itemText, labelEdge, labelHint, labelStartWidth, matchBy: propMatchBy, messagesCustom, placeholder, readonly, requiredMessageDetail: propRequiredMessageDetail, required, textAlign, userAssistanceDensity, value: propValue, valueItem: propValueItem, virtualKeyboard, onMessagesCustomChanged, onOjAdvancedSearchAction, onOjValueAction, onValidChanged, onValueChanged, onValueItemChanged, ...otherProps }, addBusyState) {
         const [filterCriterion, setFilterCriterion] = (0, hooks_1.useState)(undefined);
-        const [isLoading, setIsLoading] = (0, hooks_1.useState)(propData != null && propValue != null && propValueItem == null);
+        const [isLoading, setIsLoading] = (0, hooks_1.useState)(data != null && propValue != null && propValueItem == null);
         const matchBy = (0, hooks_1.useMemo)(() => {
             return propMatchBy && propMatchBy.length > 0 ? [...propMatchBy] : undefined;
         }, [propMatchBy]);
@@ -38,7 +38,11 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
         });
         const { 'aria-describedby': ariaDescribedBy, messages } = textFieldProps;
         const hasNoValue = value === null;
-        const dataProvider = (0, useWrapDataProvider_1.useWrapDataProvider)(propData);
+        const { dataProvider, dataState, onLoadRange } = (0, index_2.useSelectData)({
+            data,
+            filterCriterion,
+            hasCollectionTemplate: collectionTemplate !== undefined
+        });
         const [valueToSync, setValueToSync] = (0, hooks_1.useState)(value);
         const [valueItemToSync, setValueItemToSync] = (0, hooks_1.useState)(valueItem);
         (0, hooks_1.useEffect)(() => {
@@ -66,10 +70,6 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
             valueItem: valueItemToSync,
             validateValueOnExternalChange
         });
-        const [listDataState, onLoadRange] = (0, useListData_1.useListData)(dataProvider, {
-            filterCriterion,
-            initialRowsFetched: 0
-        });
         const onCommit = (0, hooks_1.useCallback)(async ({ previousValue, value }) => {
             const valueToCommit = value != null ? value : utils_2.DEFAULT_VALUE;
             setDisplayValue(valueToCommit);
@@ -77,7 +77,7 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
             if (validationResult === useValidators_1.ValidationResult.INVALID) {
                 setPreactValueItem(undefined);
             }
-            else if (validationResult === useValidators_1.ValidationResult.VALID && listDataState.status === 'success') {
+            else if (validationResult === useValidators_1.ValidationResult.VALID && dataState.status === 'success') {
                 if (value == null) {
                     onOjValueAction?.({
                         itemContext: utils_2.DEFAULT_ITEM_CONTEXT,
@@ -96,7 +96,7 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
                     }
                 }
                 else {
-                    const data = listDataState.data.data;
+                    const data = dataState.data.data;
                     let item = data.find((item) => item.metadata.key === value);
                     if (item === undefined) {
                         const fetchResults = await dataProvider.fetchByKeys({ keys: new Set([value]) });
@@ -116,7 +116,7 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
             }
         }, [
             dataProvider,
-            listDataState,
+            dataState,
             preactValueItem,
             valueItem,
             onCommitValue,
@@ -127,17 +127,48 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
             const fc = (0, utils_2.getFilterCriterion)(dataProvider, searchText, matchBy);
             setFilterCriterion(fc);
         }, [dataProvider, matchBy]);
-        const itemRenderer = (0, hooks_1.useCallback)(({ data, metadata, searchText }) => {
-            return itemTemplate
-                ? itemTemplate({
+        const itemRenderer = (0, hooks_1.useMemo)(() => {
+            if (!itemTemplate)
+                return undefined;
+            return ({ data, metadata, searchText }) => {
+                return itemTemplate({
                     item: {
                         data: data,
                         metadata: metadata
                     },
                     searchText
-                })
-                : undefined;
+                });
+            };
         }, [itemTemplate]);
+        const stableCollectionTemplateContextRef = (0, hooks_1.useRef)();
+        const cache = (0, index_1.useCache)();
+        const collectionRenderer = (0, hooks_1.useMemo)(() => {
+            if (!collectionTemplate)
+                return undefined;
+            return ({ currentRowKeyOverride, searchText, selected, onPersistCurrentRowKey, onRowAction }) => {
+                const newCollectionTemplateContext = {
+                    currentRowOverride: cache('currentRowOverride', currentRowKeyOverride ? { rowKey: currentRowKeyOverride } : undefined, [currentRowKeyOverride, searchText]),
+                    data: dataProvider,
+                    onCurrentRowChanged: cache('onCurrentRowChanged', ({ rowKey }) => {
+                        onPersistCurrentRowKey({ value: rowKey });
+                    }, [onPersistCurrentRowKey]),
+                    onRowAction: cache('onRowAction', ({ item }) => {
+                        onRowAction({
+                            context: { data: item.data, key: item.metadata.key, metadata: item.metadata }
+                        });
+                    }, [onRowAction]),
+                    searchText,
+                    selected: cache('selected', new ojkeyset_1.KeySetImpl([...(selected?.values() ?? [])]), [selected])
+                };
+                if (!stableCollectionTemplateContextRef.current) {
+                    stableCollectionTemplateContextRef.current = newCollectionTemplateContext;
+                }
+                else {
+                    Object.assign(stableCollectionTemplateContextRef.current, newCollectionTemplateContext);
+                }
+                return collectionTemplate(stableCollectionTemplateContextRef.current);
+            };
+        }, [cache, collectionTemplate, dataProvider]);
         const _selectItemByValue = (0, hooks_1.useCallback)(async (value) => {
             return onCommit({
                 value: value ?? undefined,
@@ -155,13 +186,14 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
             selectSingleProps: {
                 advancedSearch,
                 'aria-describedby': ariaDescribedBy,
-                data: listDataState.data,
+                collectionRenderer,
+                data: dataState.status !== 'error' ? dataState.data : null,
                 isDisabled: disabled,
                 isLoading,
                 isReadonly: readonly,
                 isRequired: required,
                 isRequiredShown: required && (userAssistanceDensity === 'compact' || hasNoValue),
-                itemRenderer: itemTemplate ? itemRenderer : undefined,
+                itemRenderer,
                 itemText,
                 label: labelHint,
                 labelEdge,

package/oj-c/selection-card/component.json

@@ -1,7 +1,7 @@
 {
   "name": "selection-card",
-  "version": "17.0.4",
-  "jetVersion": "^17.0.4",
+  "version": "17.1.0",
+  "jetVersion": "^17.1.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -33,7 +33,7 @@
       "minColumns": "1"
     },
     "webelement": {
-      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/SelectionCardWebElement.html"
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1710/cpwdtsdoc/classes/SelectionCardWebElement.html"
     }
   },
   "since": "16.0.0",