@oracle/oraclejet-core-pack 16.1.3 → 17.0.0

package/oj-c/list-view/component.json

@@ -1,7 +1,7 @@
 {
   "name": "list-view",
-  "version": "16.1.3",
-  "jetVersion": "^16.1.3",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -13,6 +13,12 @@
   "description": "A list view displays data items as a list or a grid with highly interactive features.",
   "help": "oj-c.ListView.html",
   "main": "oj-c/list-view",
+  "status": [
+    {
+      "type": "candidate",
+      "since": "17.0.0"
+    }
+  ],
   "extension": {
     "catalog": {
       "category": "Collections"
@@ -24,6 +30,9 @@
       "uxSpecs": [
         "list-view"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/ListViewWebElement.html"
     }
   },
   "propertyLayout": [
@@ -133,14 +142,49 @@
         "single": {
           "description": "Only a single item can be selected at a time.",
           "displayName": "Single"
+        },
+        "singleRequired": {
+          "description": "Only a single item can be selected at a time. In addition, ListView will also ensure that an item is selected at all time.",
+          "displayName": "Single Required"
         }
       },
       "enumValues": [
         "none",
         "multiple",
-        "single"
+        "single",
+        "singleRequired"
       ],
       "value": "none"
+    },
+    "contextMenuConfig": {
+      "type": "object",
+      "description": "Specifies a context menu configuration.",
+      "displayName": "Context Menu Config",
+      "help": "#contextMenuConfig",
+      "properties": {
+        "accessibleLabel": {
+          "type": "string"
+        },
+        "items": {
+          "type": "function"
+        }
+      }
+    },
+    "reorderable": {
+      "type": "object",
+      "description": "Specify the item reordering functionality.",
+      "displayName": "Reorderable",
+      "help": "#reorderable",
+      "properties": {
+        "items": {
+          "type": "string",
+          "enumValues": [
+            "disabled",
+            "enabled"
+          ],
+          "value": "disabled"
+        }
+      }
     }
   },
   "slots": {
@@ -208,6 +252,7 @@
       "displayName": "noData",
       "help": "#noData",
       "maxItems": 1,
+      "templateSlotRenderType": "RenderNoDataTemplate",
       "data": {}
     }
   },
@@ -271,6 +316,165 @@
           }
         }
       }
+    },
+    "ojFirstSelectedItem": {
+      "description": "Triggered when data for the first selected item is available.",
+      "displayName": "First Selected Item",
+      "help": "#event:firstSelectedItem",
+      "detail": {
+        "key": {
+          "type": "any"
+        },
+        "data": {
+          "type": "any"
+        }
+      }
+    },
+    "ojContextMenuAction": {
+      "bubbles": true,
+      "description": "Triggered when a menu item is clicked, whether by keyboard, mouse, or touch events.",
+      "eventGroup": "common",
+      "displayName": "onOjContextMenuAction",
+      "help": "#event:ojContextMenuAction",
+      "detail": {
+        "menuItemKey": {
+          "type": "string"
+        },
+        "contextMenuContext": {
+          "type": "object",
+          "properties": {
+            "data": {
+              "type": "any"
+            },
+            "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"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "ojContextMenuSelection": {
+      "bubbles": true,
+      "description": "Triggered when a select menu item is clicked, whether by keyboard, mouse, or touch events.",
+      "eventGroup": "common",
+      "displayName": "onOjContextMenuSelection",
+      "help": "#event:ojContextMenuSelection",
+      "detail": {
+        "value": {
+          "type": "string|Array<string>"
+        },
+        "contextMenuContext": {
+          "type": "object",
+          "properties": {
+            "data": {
+              "type": "any"
+            },
+            "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"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "ojReorder": {
+      "description": "Triggered after items are reordered within ListView via drag and drop or keyboard.",
+      "displayName": "Reorder",
+      "help": "#event:reorder",
+      "detail": {
+        "reorderedKeys": {
+          "type": "Array<any>"
+        },
+        "itemKeys": {
+          "type": "Array<any>"
+        },
+        "referenceKey": {
+          "type": "any"
+        }
+      }
     }
   },
   "methods": {

package/oj-c/list-view/list-view.js

@@ -1,10 +1,32 @@
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojcontext", "ojs/ojvcomponent", "preact/compat", "preact/hooks", "@oracle/oraclejet-preact/UNSAFE_EmptyList", "@oracle/oraclejet-preact/UNSAFE_ListView", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslationBundle", "./useListViewPreact", "./listViewItem", "css!oj-c/list-view/list-view-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, Context, ojvcomponent_1, compat_1, hooks_1, UNSAFE_EmptyList_1, UNSAFE_ListView_1, UNSAFE_useTranslationBundle_1, useListViewPreact_1, listViewItem_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojcontext", "ojs/ojvcomponent", "preact/compat", "preact/hooks", "@oracle/oraclejet-preact/UNSAFE_EmptyList", "@oracle/oraclejet-preact/UNSAFE_ListView", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslationBundle", "./useListViewPreact", "./DataFetchLiveRegion", "./listViewItem", "../utils/PRIVATE_ItemsMenu/items-menu", "css!oj-c/list-view/list-view-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, Context, ojvcomponent_1, compat_1, hooks_1, UNSAFE_EmptyList_1, UNSAFE_ListView_1, UNSAFE_useTranslationBundle_1, useListViewPreact_1, DataFetchLiveRegion_1, listViewItem_1, items_menu_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ListView = void 0;
-    const ListViewPreactWrapper = ({ addBusyState, isClickthroughDisabled, itemTemplate, noData, ...rest }) => {
+    const ListViewPreactWrapper = ({ addBusyState, isClickthroughDisabled, itemTemplate, noData, contextMenuConfig, onOjContextMenuAction, onOjContextMenuSelection, ...rest }) => {
         const { status, listViewProps } = (0, useListViewPreact_1.useListViewPreact)(rest, addBusyState, isClickthroughDisabled);
         const translations = (0, UNSAFE_useTranslationBundle_1.useTranslationBundle)('@oracle/oraclejet-preact');
+        const itemsRenderer = (0, hooks_1.useCallback)((context) => {
+            const item = context.data;
+            const itemDetail = { item, data: item.data };
+            const items = contextMenuConfig?.items(itemDetail);
+            return ((0, jsx_runtime_1.jsx)(items_menu_1.ItemsMenu, { items: items, onOjMenuAction: ({ key }) => {
+                    onOjContextMenuAction?.({
+                        menuItemKey: key,
+                        contextMenuContext: itemDetail
+                    });
+                }, onOjMenuSelection: ({ value }) => {
+                    onOjContextMenuSelection?.({
+                        value,
+                        contextMenuContext: itemDetail
+                    });
+                } }));
+        }, [contextMenuConfig?.items, onOjContextMenuAction, onOjContextMenuSelection]);
+        const preactContextMenuConfig = (0, hooks_1.useMemo)(() => {
+            return {
+                itemsRenderer,
+                accessibleLabel: contextMenuConfig?.accessibleLabel
+            };
+        }, [contextMenuConfig?.accessibleLabel, itemsRenderer]);
         if (status === 'success' && !listViewProps.hasMore && listViewProps.data?.length === 0) {
             if (noData) {
                 return ((0, jsx_runtime_1.jsx)(UNSAFE_EmptyList_1.EmptyList, { "aria-label": listViewProps['aria-label'], "aria-labelledby": listViewProps['aria-labelledby'], children: noData(compat_1.Children) }));
@@ -14,11 +36,13 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
                 return ((0, jsx_runtime_1.jsx)(UNSAFE_EmptyList_1.EmptyList, { "aria-label": listViewProps['aria-label'], "aria-labelledby": listViewProps['aria-labelledby'], children: noDataContent }));
             }
         }
-        return ((0, jsx_runtime_1.jsx)(UNSAFE_ListView_1.ListView, { ...listViewProps, children: (context) => {
-                return (0, jsx_runtime_1.jsx)(listViewItem_1.ListItem, { context: context, itemTemplate: itemTemplate });
-            } }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(UNSAFE_ListView_1.ListView, { ...listViewProps, ...(contextMenuConfig && {
+                        contextMenuConfig: preactContextMenuConfig
+                    }), children: (0, hooks_1.useCallback)((context) => {
+                        return (0, jsx_runtime_1.jsx)(listViewItem_1.ListItem, { context: context, itemTemplate: itemTemplate });
+                    }, [itemTemplate]) }), (0, jsx_runtime_1.jsx)(DataFetchLiveRegion_1.DataFetchLiveRegion, { isFetching: status === 'loading' })] }));
     };
-    const ListViewImpl = ({ selectionMode = 'none', ...rest }) => {
+    const ListViewImpl = ({ selectionMode = 'none', reorderable = { items: 'disabled' }, ...rest }) => {
         const rootRef = (0, hooks_1.useRef)();
         const busyContextRef = (0, hooks_1.useRef)(Context.getContext(rootRef.current).getBusyContext());
         const addBusyState = (0, hooks_1.useCallback)((desc) => {
@@ -34,11 +58,12 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
         }, []);
         const props = {
             selectionMode,
+            reorderable,
             ...rest
         };
         return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: props.id, ref: rootRef, children: (0, jsx_runtime_1.jsx)(ListViewPreactWrapper, { addBusyState: addBusyState, isClickthroughDisabled: isClickthroughDisabled, ...props }) }));
     };
-    exports.ListView = (0, ojvcomponent_1.registerCustomElement)('oj-c-list-view', ListViewImpl, "ListView", { "properties": { "currentItem": { "type": "any", "readOnly": true, "writeback": true }, "data": { "type": "DataProvider|null" }, "gridlines": { "type": "object", "properties": { "item": { "type": "string", "enumValues": ["hidden", "visible"] }, "top": { "type": "string", "enumValues": ["hidden", "visible"] }, "bottom": { "type": "string", "enumValues": ["hidden", "visible"] } } }, "scrollPolicyOptions": { "type": "object", "properties": { "fetchSize": { "type": "number" }, "scroller": { "type": "string" } } }, "selected": { "type": "object", "writeback": true }, "selectionMode": { "type": "string", "enumValues": ["none", "multiple", "single"] } }, "slots": { "itemTemplate": { "data": {} }, "noData": { "data": {} } }, "events": { "ojItemAction": {} }, "extension": { "_WRITEBACK_PROPS": ["currentItem", "selected"], "_READ_ONLY_PROPS": ["currentItem"], "_OBSERVED_GLOBAL_PROPS": ["aria-label", "aria-labelledby", "id"] } }, { "selectionMode": "none" }, {
+    exports.ListView = (0, ojvcomponent_1.registerCustomElement)('oj-c-list-view', ListViewImpl, "ListView", { "properties": { "currentItem": { "type": "any", "readOnly": true, "writeback": true }, "data": { "type": "DataProvider|null" }, "gridlines": { "type": "object", "properties": { "item": { "type": "string", "enumValues": ["hidden", "visible"] }, "top": { "type": "string", "enumValues": ["hidden", "visible"] }, "bottom": { "type": "string", "enumValues": ["hidden", "visible"] } } }, "scrollPolicyOptions": { "type": "object", "properties": { "fetchSize": { "type": "number" }, "scroller": { "type": "string" } } }, "selected": { "type": "object", "writeback": true }, "selectionMode": { "type": "string", "enumValues": ["none", "multiple", "single", "singleRequired"] }, "contextMenuConfig": { "type": "object", "properties": { "accessibleLabel": { "type": "string" }, "items": { "type": "function" } } }, "reorderable": { "type": "object", "properties": { "items": { "type": "string", "enumValues": ["disabled", "enabled"] } } } }, "slots": { "itemTemplate": { "data": {} }, "noData": { "data": {} } }, "events": { "ojItemAction": {}, "ojFirstSelectedItem": {}, "ojContextMenuAction": { "bubbles": true }, "ojContextMenuSelection": { "bubbles": true }, "ojReorder": {} }, "extension": { "_WRITEBACK_PROPS": ["currentItem", "selected"], "_READ_ONLY_PROPS": ["currentItem"], "_OBSERVED_GLOBAL_PROPS": ["aria-label", "aria-labelledby", "id"] } }, { "selectionMode": "none", "reorderable": { "items": "disabled" } }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
     });
     const isEventClickthroughDisabled = function (event, rootElement) {

package/oj-c/list-view/useListViewPreact.js

@@ -1,15 +1,30 @@
-define(["require", "exports", "preact/hooks", "../utils/UNSAFE_keyUtils/keySetUtils", "../hooks/UNSAFE_useListData/useListData", "./useHandleRemoveCurrentKey"], function (require, exports, hooks_1, keySetUtils_1, useListData_1, useHandleRemoveCurrentKey_1) {
+define(["require", "exports", "preact/hooks", "../utils/UNSAFE_keyUtils/keySetUtils", "../hooks/UNSAFE_useListData/useListData", "./useHandleRemoveCurrentKey", "ojs/ojlogger"], function (require, exports, hooks_1, keySetUtils_1, useListData_1, useHandleRemoveCurrentKey_1, Logger) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useListViewPreact = void 0;
-    const useListViewPreact = ({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, data: propData, gridlines, onCurrentItemChanged, selectionMode, selected, scrollPolicyOptions, onSelectedChanged, onOjItemAction }, addBusyState, isClickthroughDisabled) => {
+    const useListViewPreact = ({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, data: propData, gridlines, onCurrentItemChanged, selectionMode, selected, scrollPolicyOptions, onSelectedChanged, onOjItemAction, onOjFirstSelectedItem, reorderable, onOjReorder }, addBusyState, isClickthroughDisabled) => {
+        const currentPromiseRef = (0, hooks_1.useRef)();
         const resolveBusyState = (0, hooks_1.useRef)();
         const [listDataState, onLoadRange] = (0, useListData_1.useListData)(propData, {
             fetchSize: scrollPolicyOptions?.fetchSize
         });
-        const selectedKeys = (0, keySetUtils_1.keySetToKeys)(selected);
         const listData = listDataState.status !== 'error' ? listDataState.data : null;
         const [currentItem, setCurrentItem] = (0, hooks_1.useState)();
+        const firstSelectedItemRef = (0, hooks_1.useRef)();
+        const numOfSelectedItems = !selected?.keys.all
+            ? selected?.keys.keys?.size
+            : listData?.data.length;
+        let selectedKeys;
+        if (listData &&
+            listData.data.length > 0 &&
+            selectionMode === 'singleRequired' &&
+            numOfSelectedItems === 0) {
+            selectedKeys = { all: false, keys: new Set([listData.data[0].metadata.key]) };
+            onSelectedChanged && onSelectedChanged((0, keySetUtils_1.keysToKeySet)(selectedKeys));
+        }
+        else {
+            selectedKeys = (0, keySetUtils_1.keySetToKeys)(selected);
+        }
         (0, hooks_1.useEffect)(() => {
             if (listDataState.status === 'loading') {
                 resolveBusyState.current = addBusyState('list data is in fetch state');
@@ -25,6 +40,79 @@ define(["require", "exports", "preact/hooks", "../utils/UNSAFE_keyUtils/keySetUt
             setCurrentItem(detail.value);
             onCurrentItemChanged && onCurrentItemChanged(detail.value);
         };
+        const handleOnOjFirstSelectedItem = (0, hooks_1.useCallback)((data) => {
+            if (selected && onOjFirstSelectedItem && propData) {
+                const selectedKeys = (0, keySetUtils_1.keySetToKeys)(selected);
+                if (!(0, keySetUtils_1.isEmpty)(selectedKeys)) {
+                    const firstSelectedKey = (0, keySetUtils_1.getFirstKey)(selectedKeys, data);
+                    const firstSelectedItem = data.find((listItem) => firstSelectedKey === listItem.metadata.key);
+                    if (firstSelectedItem) {
+                        const data = firstSelectedItem.data;
+                        if (firstSelectedItemRef.current === undefined ||
+                            data !== firstSelectedItemRef.current.data) {
+                            const detail = { key: firstSelectedKey, data };
+                            firstSelectedItemRef.current = { ...detail };
+                            onOjFirstSelectedItem(detail);
+                        }
+                    }
+                    else {
+                        const initialPromise = propData.fetchByKeys({
+                            keys: new Set([firstSelectedKey])
+                        });
+                        currentPromiseRef.current = initialPromise;
+                        initialPromise.then((value) => {
+                            if (initialPromise === currentPromiseRef.current) {
+                                const item = value.results.get(firstSelectedKey);
+                                if (item === undefined) {
+                                    Logger.warn(`Item with '${firstSelectedKey}' key couldn't be found `);
+                                }
+                                else {
+                                    const detail = { key: firstSelectedKey, data: item.data };
+                                    firstSelectedItemRef.current = { ...detail };
+                                    onOjFirstSelectedItem(detail);
+                                }
+                            }
+                        });
+                    }
+                }
+            }
+        }, [selected, onOjFirstSelectedItem, propData, listData]);
+        (0, hooks_1.useEffect)(() => {
+            if (selectionMode === 'singleRequired' && listData && listData.data.length > 0) {
+                handleOnOjFirstSelectedItem(listData.data);
+            }
+        }, [selectionMode, listData, handleOnOjFirstSelectedItem]);
+        const handleOnSelectionChanged = (detail) => {
+            if (selectionMode !== 'singleRequired' || detail.value.keys?.size !== 0) {
+                onSelectedChanged &&
+                    !isClickthroughDisabled(detail.target) &&
+                    onSelectedChanged((0, keySetUtils_1.keysToKeySet)(detail.value));
+            }
+        };
+        (0, hooks_1.useEffect)(() => {
+            const _listener = (event) => {
+                if (onOjFirstSelectedItem && event.detail.update && firstSelectedItemRef.current) {
+                    const detail = event.detail.update;
+                    const index = Array.from(detail.keys).indexOf(firstSelectedItemRef.current.key);
+                    if (index > -1 && detail.data && index < detail.data.length) {
+                        const newData = detail.data[index];
+                        if (firstSelectedItemRef.current.data !== newData) {
+                            firstSelectedItemRef.current.data = newData;
+                            const detail = { ...firstSelectedItemRef.current };
+                            onOjFirstSelectedItem(detail);
+                        }
+                    }
+                }
+            };
+            if (propData) {
+                propData.addEventListener('mutate', _listener);
+            }
+            return () => {
+                if (propData) {
+                    propData.removeEventListener('mutate', _listener);
+                }
+            };
+        }, [propData, onOjFirstSelectedItem]);
         const dataState = listDataState.status === 'error' ? null : listDataState.data;
         (0, useHandleRemoveCurrentKey_1.useHandleRemoveCurrentKey)(dataState, currentItem, handleOnCurrentItemChanged);
         const viewportConfig = scrollPolicyOptions?.scroller
@@ -59,19 +147,22 @@ define(["require", "exports", "preact/hooks", "../utils/UNSAFE_keyUtils/keySetUt
                 onCurrentKeyChange: handleOnCurrentItemChanged,
                 hasMore: listData ? listData.sizePrecision === 'atLeast' : false,
                 onLoadMore,
-                onSelectionChange: (detail) => {
-                    onSelectedChanged &&
-                        !isClickthroughDisabled(detail.target) &&
-                        onSelectedChanged((0, keySetUtils_1.keysToKeySet)(detail.value));
-                },
+                onSelectionChange: handleOnSelectionChanged,
                 selectedKeys,
-                selectionMode,
+                selectionMode: selectionMode === 'singleRequired' ? 'single' : selectionMode,
                 promotedSection: suggestions,
                 onItemAction: (detail) => {
                     const item = detail.context.data;
                     const itemActionDetail = { context: { item, data: item.data } };
-                    onOjItemAction && onOjItemAction(itemActionDetail);
+                    onOjItemAction &&
+                        !isClickthroughDisabled(detail.target) &&
+                        onOjItemAction(itemActionDetail);
                 },
+                onReorder: reorderable?.items === 'enabled'
+                    ? (detail) => {
+                        onOjReorder && onOjReorder(detail);
+                    }
+                    : null,
                 viewportConfig
             }
         };

package/oj-c/list-view.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "./list-view/list-view"], function (require, exports, list_view_1) {
+define(["require", "exports", "oj-c/list-view/list-view"], function (require, exports, list_view_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ListView = void 0;

package/oj-c/menu-button/__webdriver__/MenuButtonWebElement.d.ts

@@ -27,6 +27,7 @@ export declare class MenuButtonWebElement extends MenuButtonWebElementBase {
      * delay - delays the milliseconds
      * await delay(2000);
      */
+    private delay;
     /**
      * In order to do nested selections, we need an isolated menu clicker
      */

package/oj-c/menu-button/__webdriver__/MenuButtonWebElement.js

@@ -3,13 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuButtonWebElement = void 0;
 var MenuButtonWebElementBase_1 = require("./MenuButtonWebElementBase");
 var selenium_webdriver_1 = require("selenium-webdriver");
+const MENU_ITEM_LOCATION = '#__oj_zorder_container [role=menuitem], #__root_layer_host [role=menuitem], ' +
+    '#__oj_zorder_container [role=menuitemradio], #__root_layer_host [role=menuitemradio], ' +
+    '#__oj_zorder_container [role=menuitemcheckbox], #__root_layer_host [role=menuitemcheckbox]';
 /**
  * The component WebElement for [oj-c-menu-button](../../../oj-c/docs/oj.MenuButton.html).
  * Do not instantiate this class directly, instead, use
  * [findMenuButton](../functions/findMenuButton.html).
  */
 class MenuButtonWebElement extends MenuButtonWebElementBase_1.MenuButtonWebElementBase {
-    // Put overrides here
+    constructor() {
+        super(...arguments);
+        /**
+         * delay - delays the milliseconds
+         * await delay(2000);
+         */
+        this.delay = (ms) => new Promise((fn) => setTimeout(fn, ms));
+    }
     /**
      * Perform a click on the button to open the menu or close the menu
      */
@@ -50,20 +60,16 @@ class MenuButtonWebElement extends MenuButtonWebElementBase_1.MenuButtonWebEleme
      * openMenu - opens the menu
      */
     async openMenu() {
-        const button = await this.findElement(selenium_webdriver_1.By.css('button'));
+        const button = await this.findElement(selenium_webdriver_1.By.css('button[type=button]'));
         await button.click();
     }
-    /**
-     * delay - delays the milliseconds
-     * await delay(2000);
-     */
-    // private delay = (ms: number) => new Promise(fn => setTimeout(fn, ms));
     /**
      * In order to do nested selections, we need an isolated menu clicker
      */
     async doMenuClick(selectedValue) {
         // Find the <menu-item> element to click
-        const menuItems = await this.getDriver().findElements(selenium_webdriver_1.By.css('#__root_layer_host [role^=menuitem]'));
+        await this.delay(350);
+        const menuItems = await this.getDriver().findElements(selenium_webdriver_1.By.css(MENU_ITEM_LOCATION));
         const match = await this.findAsyncSequential(menuItems, async (item) => {
             const text = await item.getText();
             return text === selectedValue;

package/oj-c/menu-button/__webdriver__/MenuButtonWebElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButtonWebElement.js","sourceRoot":"","sources":["MenuButtonWebElement.ts"],"names":[],"mappings":";;;AAAA,uEAAsE;AACtE,yDAAwC;AAExC;;;;GAIG;AACH,MAAa,oBAAqB,SAAQ,mDAAwB;IAChE,qBAAqB;IAErB;;OAEG;IACH,KAAK,CAAC,KAAK;QACT,kEAAkE;QAClE,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,uBAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxD,OAAO,MAAM,CAAC,KAAK,EAAE,CAAC;IACxB,CAAC;IAED;;SAEK;IAEL,KAAK,CAAC,mBAAmB,CACvB,KAAU,EACV,SAAqC;QAErC,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;YACtB,IAAI,MAAM,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;gBACvB,OAAO,CAAC,CAAC;YACX,CAAC;QACH,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED;;;;OAIG;IACI,KAAK,CAAC,YAAY,CAAC,aAAgC;QACxD,gBAAgB;QAChB,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACtB,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,CAAC;YACjC,KAAK,MAAM,KAAK,IAAI,aAAa,EAAE,CAAC;gBAClC,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,QAAQ;QACpB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,uBAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxD,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC;IAED;;;OAGG;IACH,yEAAyE;IAEzE;;OAEG;IACK,KAAK,CAAC,WAAW,CAAC,aAAqB;QAC7C,wCAAwC;QACxC,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,YAAY,CACnD,uBAAE,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAC9C,CAAC;QAEF,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;YACrE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;YAClC,OAAO,IAAI,KAAK,aAAa,CAAC;QAChC,CAAC,CAAC,CAAC;QAEH,MAAM,KAAK,EAAE,KAAK,EAAE,CAAC;IACvB,CAAC;CACF;AA3ED,oDA2EC","sourcesContent":["import { MenuButtonWebElementBase } from './MenuButtonWebElementBase';\nimport { By } from 'selenium-webdriver';\n\n/**\n * The component WebElement for [oj-c-menu-button](../../../oj-c/docs/oj.MenuButton.html).\n * Do not instantiate this class directly, instead, use\n * [findMenuButton](../functions/findMenuButton.html).\n */\nexport class MenuButtonWebElement extends MenuButtonWebElementBase {\n  // Put overrides here\n\n  /**\n   * Perform a click on the button to open the menu or close the menu\n   */\n  async click() {\n    // Find the <button> element to click so that it can receive focus\n    const button = await this.findElement(By.css('button'));\n    return button.click();\n  }\n\n  /**\n   * Helper util\n   * */\n\n  async findAsyncSequential<T>(\n    array: T[],\n    predicate: (t: T) => Promise<boolean>\n  ): Promise<T | undefined> {\n    for (const t of array) {\n      if (await predicate(t)) {\n        return t;\n      }\n    }\n    return undefined;\n  }\n\n  /**\n   * Fire the ojMenuAction event on the oj-c-menu-button, and\n   * invoke the Action handler of the selected value.\n   *\n   */\n  public async doMenuAction(selectedValue: string | string[]): Promise<void> {\n    // open the menu\n    await this.openMenu();\n    if (Array.isArray(selectedValue)) {\n      for (const value of selectedValue) {\n        await this.doMenuClick(value);\n      }\n    } else {\n      await this.doMenuClick(selectedValue);\n    }\n  }\n\n  /**\n   * openMenu - opens the menu\n   */\n  private async openMenu() {\n    const button = await this.findElement(By.css('button'));\n    await button.click();\n  }\n\n  /**\n   * delay - delays the milliseconds\n   * await delay(2000);\n   */\n  // private delay = (ms: number) => new Promise(fn => setTimeout(fn, ms));\n\n  /**\n   * In order to do nested selections, we need an isolated menu clicker\n   */\n  private async doMenuClick(selectedValue: string): Promise<void> {\n    // Find the <menu-item> element to click\n    const menuItems = await this.getDriver().findElements(\n      By.css('#__root_layer_host [role^=menuitem]')\n    );\n\n    const match = await this.findAsyncSequential(menuItems, async (item) => {\n      const text = await item.getText();\n      return text === selectedValue;\n    });\n\n    await match?.click();\n  }\n}\n"]}
+{"version":3,"file":"MenuButtonWebElement.js","sourceRoot":"","sources":["MenuButtonWebElement.ts"],"names":[],"mappings":";;;AAAA,uEAAsE;AACtE,yDAAwC;AAExC,MAAM,kBAAkB,GACtB,8EAA8E;IAC9E,wFAAwF;IACxF,4FAA4F,CAAC;AAE/F;;;;GAIG;AACH,MAAa,oBAAqB,SAAQ,mDAAwB;IAAlE;;QAkDE;;;WAGG;QACK,UAAK,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,IAAI,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAiB1E,CAAC;IAtEC;;OAEG;IACH,KAAK,CAAC,KAAK;QACT,kEAAkE;QAClE,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,uBAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxD,OAAO,MAAM,CAAC,KAAK,EAAE,CAAC;IACxB,CAAC;IAED;;SAEK;IACL,KAAK,CAAC,mBAAmB,CACvB,KAAU,EACV,SAAqC;QAErC,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;YACtB,IAAI,MAAM,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;gBACvB,OAAO,CAAC,CAAC;YACX,CAAC;QACH,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED;;;;OAIG;IACI,KAAK,CAAC,YAAY,CAAC,aAAgC;QACxD,gBAAgB;QAChB,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACtB,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,CAAC;YACjC,KAAK,MAAM,KAAK,IAAI,aAAa,EAAE,CAAC;gBAClC,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,QAAQ;QACpB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,uBAAE,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC,CAAC;QACrE,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC;IAQD;;OAEG;IACK,KAAK,CAAC,WAAW,CAAC,aAAqB;QAC7C,wCAAwC;QACxC,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACtB,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,YAAY,CAAC,uBAAE,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAElF,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;YACrE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;YAClC,OAAO,IAAI,KAAK,aAAa,CAAC;QAChC,CAAC,CAAC,CAAC;QAEH,MAAM,KAAK,EAAE,KAAK,EAAE,CAAC;IACvB,CAAC;CACF;AAvED,oDAuEC","sourcesContent":["import { MenuButtonWebElementBase } from './MenuButtonWebElementBase';\nimport { By } from 'selenium-webdriver';\n\nconst MENU_ITEM_LOCATION =\n  '#__oj_zorder_container [role=menuitem], #__root_layer_host [role=menuitem], ' +\n  '#__oj_zorder_container [role=menuitemradio], #__root_layer_host [role=menuitemradio], ' +\n  '#__oj_zorder_container [role=menuitemcheckbox], #__root_layer_host [role=menuitemcheckbox]';\n\n/**\n * The component WebElement for [oj-c-menu-button](../../../oj-c/docs/oj.MenuButton.html).\n * Do not instantiate this class directly, instead, use\n * [findMenuButton](../functions/findMenuButton.html).\n */\nexport class MenuButtonWebElement extends MenuButtonWebElementBase {\n  /**\n   * Perform a click on the button to open the menu or close the menu\n   */\n  async click() {\n    // Find the <button> element to click so that it can receive focus\n    const button = await this.findElement(By.css('button'));\n    return button.click();\n  }\n\n  /**\n   * Helper util\n   * */\n  async findAsyncSequential<T>(\n    array: T[],\n    predicate: (t: T) => Promise<boolean>\n  ): Promise<T | undefined> {\n    for (const t of array) {\n      if (await predicate(t)) {\n        return t;\n      }\n    }\n    return undefined;\n  }\n\n  /**\n   * Fire the ojMenuAction event on the oj-c-menu-button, and\n   * invoke the Action handler of the selected value.\n   *\n   */\n  public async doMenuAction(selectedValue: string | string[]): Promise<void> {\n    // open the menu\n    await this.openMenu();\n    if (Array.isArray(selectedValue)) {\n      for (const value of selectedValue) {\n        await this.doMenuClick(value);\n      }\n    } else {\n      await this.doMenuClick(selectedValue);\n    }\n  }\n\n  /**\n   * openMenu - opens the menu\n   */\n  private async openMenu() {\n    const button = await this.findElement(By.css('button[type=button]'));\n    await button.click();\n  }\n\n  /**\n   * delay - delays the milliseconds\n   * await delay(2000);\n   */\n  private delay = (ms: number) => new Promise((fn) => setTimeout(fn, ms));\n\n  /**\n   * In order to do nested selections, we need an isolated menu clicker\n   */\n  private async doMenuClick(selectedValue: string): Promise<void> {\n    // Find the <menu-item> element to click\n    await this.delay(350);\n    const menuItems = await this.getDriver().findElements(By.css(MENU_ITEM_LOCATION));\n\n    const match = await this.findAsyncSequential(menuItems, async (item) => {\n      const text = await item.getText();\n      return text === selectedValue;\n    });\n\n    await match?.click();\n  }\n}\n"]}