@oracle/oraclejet-core-pack 16.1.3 → 17.0.0

package/oj-c/drawer-popup/component.json

@@ -1,7 +1,7 @@
 {
   "name": "drawer-popup",
-  "version": "16.1.3",
-  "jetVersion": "^16.1.3",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -9,35 +9,63 @@
   "implements": [
     "CDrawerPopupElement"
   ],
-  "description": "Drawer Popup adds a single slide-in side content alongside some primary content to an application window.",
+  "description": "A Drawer Popup is a panel that slides into the viewport.",
   "displayName": "Drawer Popup",
   "help": "oj-c.DrawerPopup.html",
   "main": "oj-c/drawer-popup",
+  "status": [
+    {
+      "type": "supersedes",
+      "since": "17.0.0",
+      "value": [
+        "oj-drawer-popup"
+      ]
+    }
+  ],
   "extension": {
     "catalog": {
       "category": "Layout & Nav"
     },
     "vbdt": {
-      "module": "oj-c/drawer-popup"
+      "module": "oj-c/drawer-popup",
+      "pi": {
+        "layouts": {
+          "general": {
+            "customizers": [
+              {
+                "propertyName": "closeGesture",
+                "type": "enumeration"
+              },
+              {
+                "propertyName": "autoDismiss",
+                "type": "enumeration"
+              },
+              {
+                "propertyName": "edge",
+                "type": "enumeration"
+              },
+              {
+                "propertyName": "modality",
+                "type": "enumeration"
+              },
+              {
+                "propertyName": "opened"
+              }
+            ]
+          }
+        }
+      }
     },
     "oracle": {
       "icon": "oj-ux-ico-drawer",
       "uxSpecs": [
         "drawer"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/DrawerPopupWebElement.html"
     }
   },
-  "propertyLayout": [
-    {
-      "propertyGroup": "common",
-      "items": [
-        "opened",
-        "modality",
-        "edge",
-        "autoDismiss"
-      ]
-    }
-  ],
   "since": "16.0.0",
   "slots": {
     "": {
@@ -52,6 +80,11 @@
       "description": "Specifies whether the Drawer is open.",
       "displayName": "Opened",
       "help": "#opened",
+      "extension": {
+        "vbdt": {
+          "temporaryOverride": {}
+        }
+      },
       "writeback": true,
       "value": false
     },
@@ -113,6 +146,11 @@
           "type": "function"
         }
       }
+    },
+    "ojClose": {
+      "description": "Triggered immediately after the drawer closes",
+      "displayName": "Close",
+      "help": "#event:close"
     }
   },
   "methods": {

package/oj-c/drawer-popup/drawer-popup.js

@@ -1,10 +1,29 @@
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "@oracle/oraclejet-preact/UNSAFE_DrawerPopup", "ojs/ojvcomponent", "preact/hooks", "css!oj-c/drawer-popup/drawer-popup-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_DrawerPopup_1, ojvcomponent_1, hooks_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "@oracle/oraclejet-preact/UNSAFE_DrawerPopup", "ojs/ojvcomponent", "preact/hooks", "ojs/ojcontext", "css!oj-c/drawer-popup/drawer-popup-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_DrawerPopup_1, ojvcomponent_1, hooks_1, Context) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.DrawerPopup = void 0;
-    exports.DrawerPopup = (0, ojvcomponent_1.registerCustomElement)('oj-c-drawer-popup', ({ children, opened = false, edge = 'start', modality = 'modal', autoDismiss = 'focus-loss', closeGesture = 'swipe', onOjBeforeClose, onOpenedChanged, ...otherProps }) => {
+    exports.DrawerPopup = (0, ojvcomponent_1.registerCustomElement)('oj-c-drawer-popup', ({ id, children, opened = false, edge = 'start', modality = 'modal', autoDismiss = 'focus-loss', closeGesture = 'swipe', onOjBeforeClose, onOjClose, onOpenedChanged, ...otherProps }) => {
         const rootRef = (0, hooks_1.useRef)(null);
-        const onCloseHandler = async (detail) => {
+        const resolveBusyState = (0, hooks_1.useRef)();
+        const didMountRef = (0, hooks_1.useRef)(false);
+        const addBusyState = (0, hooks_1.useCallback)((desc) => {
+            return rootRef.current
+                ? Context.getContext(rootRef.current)
+                    .getBusyContext()
+                    .addBusyState({ description: `oj-c-drawer-popup id='${id}' is ${desc}` })
+                : () => { };
+        }, [id]);
+        (0, hooks_1.useEffect)(() => {
+            if (!didMountRef.current) {
+                didMountRef.current = true;
+                return;
+            }
+            if (resolveBusyState.current) {
+                resolveBusyState.current();
+            }
+            resolveBusyState.current = addBusyState('animating');
+        }, [opened, addBusyState]);
+        const onOjBeforeCloseHandler = async (detail) => {
             if ((detail.reason === 'outsideClick' && autoDismiss === 'focus-loss') ||
                 (detail.reason === 'swipe' && closeGesture === 'swipe') ||
                 detail.reason === 'escapeKey') {
@@ -16,8 +35,17 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
                 }
             }
         };
-        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ref: rootRef, children: (0, jsx_runtime_1.jsx)(UNSAFE_DrawerPopup_1.DrawerPopup, { isOpen: opened, placement: edge, modality: modality, onClose: onCloseHandler, "aria-describedby": otherProps['aria-describedby'], "aria-label": otherProps['aria-label'], "aria-labelledby": otherProps['aria-labelledby'], children: (0, jsx_runtime_1.jsx)("div", { ref: rootRef, children: children }) }) }));
-    }, "DrawerPopup", { "slots": { "": {} }, "properties": { "opened": { "type": "boolean", "writeback": true }, "modality": { "type": "string", "enumValues": ["modal", "modeless"] }, "edge": { "type": "string", "enumValues": ["end", "start", "bottom"] }, "autoDismiss": { "type": "string", "enumValues": ["none", "focus-loss"] }, "closeGesture": { "type": "string", "enumValues": ["none", "swipe"] } }, "events": { "ojBeforeClose": { "cancelable": true } }, "extension": { "_WRITEBACK_PROPS": ["opened"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "aria-label", "aria-labelledby"] } }, { "opened": false, "edge": "start", "modality": "modal", "autoDismiss": "focus-loss", "closeGesture": "swipe" }, {
+        const transitionEndHandler = async (value) => {
+            if (value === false) {
+                onOjClose?.();
+            }
+            if (resolveBusyState.current) {
+                resolveBusyState.current();
+                resolveBusyState.current = undefined;
+            }
+        };
+        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ref: rootRef, id: id, children: (0, jsx_runtime_1.jsx)(UNSAFE_DrawerPopup_1.DrawerPopup, { isOpen: opened, placement: edge, modality: modality, onClose: onOjBeforeCloseHandler, onTransitionEnd: transitionEndHandler, "aria-describedby": otherProps['aria-describedby'], "aria-label": otherProps['aria-label'], "aria-labelledby": otherProps['aria-labelledby'], children: children }) }));
+    }, "DrawerPopup", { "slots": { "": {} }, "properties": { "opened": { "type": "boolean", "writeback": true }, "modality": { "type": "string", "enumValues": ["modal", "modeless"] }, "edge": { "type": "string", "enumValues": ["end", "start", "bottom"] }, "autoDismiss": { "type": "string", "enumValues": ["none", "focus-loss"] }, "closeGesture": { "type": "string", "enumValues": ["none", "swipe"] } }, "events": { "ojBeforeClose": { "cancelable": true }, "ojClose": {} }, "extension": { "_WRITEBACK_PROPS": ["opened"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "aria-label", "aria-labelledby", "id"] } }, { "opened": false, "edge": "start", "modality": "modal", "autoDismiss": "focus-loss", "closeGesture": "swipe" }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
     });
 });

package/oj-c/drawer-popup.js

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

package/oj-c/editable-value/UNSAFE_useComponentMessaging/useComponentMessaging.js

@@ -37,9 +37,9 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useUncontro
             return deferredComponentMessages.length !== 0;
         }, [deferredComponentMessages]);
         const showHiddenMessages = (0, hooks_1.useCallback)(() => {
-            setComponentMessages((prevMessages) => [...prevMessages, ...deferredComponentMessages]);
+            setComponentMessages([...componentMessages, ...deferredComponentMessages]);
             setDeferredComponentMessages([]);
-        }, [deferredComponentMessages]);
+        }, [componentMessages, deferredComponentMessages]);
         (0, hooks_1.useEffect)(() => {
             if (prevMessagesCustomPropRef.current === messagesCustomProp) {
                 return;

package/oj-c/editable-value/UNSAFE_useEditableValue/useEditableValue.js

@@ -143,7 +143,8 @@ define(["require", "exports", "preact/hooks", "../UNSAFE_useComponentMessaging/u
             },
             onCommitValue,
             format,
-            normalizeAndParseValue
+            normalizeAndParseValue,
+            validateValueOnExternalChange
         };
     }
     exports.useEditableValue = useEditableValue;

package/oj-c/editable-value/UNSAFE_useValueLifecycle/useValueLifecycle.js

@@ -8,10 +8,7 @@ define(["require", "exports", "preact/hooks", "../UNSAFE_useValidators/useValida
             const { value, setDisplayValue } = valueState;
             setDisplayValue(format(value));
         }, []);
-        (0, hooks_1.useEffect)(() => {
-            if (previousValueRef.current === value) {
-                return;
-            }
+        if (previousValueRef.current !== value) {
             previousValueRef.current = value;
             if (value !== undefined && value !== valueState.value) {
                 const { setDisplayValue, setValue } = valueState;
@@ -21,7 +18,7 @@ define(["require", "exports", "preact/hooks", "../UNSAFE_useValidators/useValida
                     setDisplayValue(format(value));
                 }
             }
-        }, [value, valueState, format]);
+        }
     }
     exports.useValueLifecycle = useValueLifecycle;
 });

package/oj-c/file-picker/__webdriver__/FilePickerWebElement.d.ts

@@ -1,4 +1,5 @@
 import { FilePickerWebElementBase } from './FilePickerWebElementBase';
+import { WebDriver } from 'selenium-webdriver';
 /**
  * The component WebElement for [oj-c-file-picker](../../../oj-c/docs/oj.FilePicker.html).
  * Do not instantiate this class directly, instead, use
@@ -17,4 +18,18 @@ export declare class FilePickerWebElement extends FilePickerWebElementBase {
         path: string;
         type: string;
     }>): Promise<void>;
+    /**
+     * This method should be called right before ojfilepickerutils.pickFiles
+     * Takes the webdriver and an Array of objects containing file paths + types.
+     * These files will be read from the local filesystem and then sent
+     * to the pickFiles method to simulate user file selection. Only the basename of
+     * the file will be sent, not the entire path to make it consistent with how
+     * the browser sets the value.
+     * @param driver the Webdriver of the test
+     * @param files An array of objects containing the path and type of selected files
+     */
+    static setupPickFiles(driver: WebDriver, files: Array<{
+        path: string;
+        type: string;
+    }>): Promise<void>;
 }

package/oj-c/file-picker/__webdriver__/FilePickerWebElement.js

@@ -4,6 +4,7 @@ exports.FilePickerWebElement = void 0;
 var FilePickerWebElementBase_1 = require("./FilePickerWebElementBase");
 var fs = require("fs");
 var path = require("path");
+var busy_context_utils_1 = require("@oracle/oraclejet-webdriver/lib/busy-context-utils");
 /**
  * The component WebElement for [oj-c-file-picker](../../../oj-c/docs/oj.FilePicker.html).
  * Do not instantiate this class directly, instead, use
@@ -19,28 +20,97 @@ class FilePickerWebElement extends FilePickerWebElementBase_1.FilePickerWebEleme
      * @param files An array of objects containing the path and type of selected files
      */
     async doSelect(files) {
-        await this.whenReady();
-        const dataList = [];
-        let file;
-        for (let i = 0; i < files.length; i++) {
-            const fileInfo = files[i];
-            const filePath = fileInfo.path;
-            const fileType = fileInfo.type;
-            const data = fs.readFileSync(filePath);
-            if (data) {
-                file = { bytes: Array.from(data), path: path.basename(filePath), type: fileType };
-                dataList.push(file);
+        await FilePickerWebElement.setupPickFiles(this.getDriver(), files);
+        await this.getDriver().executeScript(`arguments[0].firstChild.click();`, this);
+        await this.whenBusyContextReady();
+    }
+    /**
+     * This method should be called right before ojfilepickerutils.pickFiles
+     * Takes the webdriver and an Array of objects containing file paths + types.
+     * These files will be read from the local filesystem and then sent
+     * to the pickFiles method to simulate user file selection. Only the basename of
+     * the file will be sent, not the entire path to make it consistent with how
+     * the browser sets the value.
+     * @param driver the Webdriver of the test
+     * @param files An array of objects containing the path and type of selected files
+     */
+    static async setupPickFiles(driver, files) {
+        await (0, busy_context_utils_1.whenBusyContextReady)(driver);
+        //create a buffer with the files
+        const dataList = files.map(({ path: filePath, type }) => {
+            const fileSizeInMB = fs.statSync(filePath).size / (1024 * 1024);
+            const numberChunks = Math.ceil(fileSizeInMB / 8);
+            const fileContent = Array.from(fs.readFileSync(filePath));
+            const chunkSize = Math.floor(fileContent.length / numberChunks);
+            const fileChunks = [];
+            for (let i = 0; i < numberChunks; i++) {
+                if (i + 1 == numberChunks) {
+                    fileChunks.push(fileContent.slice(i * chunkSize));
+                }
+                else {
+                    fileChunks.push(fileContent.slice(i * chunkSize, (i + 1) * chunkSize));
+                }
+            }
+            return {
+                bytes: fileChunks, //split it into 8MB chunks
+                path: path.basename(filePath),
+                type,
+                numberChunks
+            };
+        });
+        for (let i = 0; i < dataList.length; i++) {
+            const { bytes, path, type, numberChunks } = dataList[i];
+            for (let j = 0; j < bytes.length; j++) {
+                const file = {
+                    bytes: bytes[j],
+                    path,
+                    type,
+                    numberChunks,
+                    chunkNumber: j,
+                    fileNumber: i
+                };
+                await driver.executeScript(`const file = arguments[0];
+           const chunkNumber = file.chunkNumber;
+           var data = {
+            bytes: file.bytes,
+            path: file.path,
+            type: file.type
+           }
+           if (chunkNumber == 0) {
+            window['_file' + file.fileNumber] = [data];
+           } else {
+            window['_file' + file.fileNumber].push(data);
+           }`, file);
             }
         }
-        await this.whenBusyContextReady();
-        await this.getDriver().executeAsyncScript(`const fileList = [];
-      const list = arguments[1];
-      for(var i = 0; i < list.length; i++) {
-      const data = list[i];
-      fileList.push(new File([Uint8Array.from(data.bytes)], data.path, {type: data.type}));
+        driver.executeScript(`const numFiles = arguments[0];
+      const list = [];
+      for ( let i = 0; i < numFiles; i++) {
+        const file = window['_file' + i];
+        delete window['_file' + i];
+        list.push({
+          bytes: file.map(chunk => chunk.bytes).join(''),
+          path: file[0].path,
+          type: file[0].type
+        });
       }
-      fileList.item = function(i){return fileList[i];}
-      arguments[0]._doSelectHelper(fileList).then(arguments[2]);`, this, dataList);
+      const fileList = list.map((data) => {
+        return new File([Uint8Array.from(data.bytes)], data.path, {type: data.type});
+       })
+       // Only if setupPickFiles has not been called yet
+       if (!HTMLInputElement.prototype._pickerTestData) {
+        //Save the native click method
+        const clickMethod = HTMLInputElement.prototype.click;
+        //Overwrite the click method
+        HTMLInputElement.prototype.click = function() {
+          const event = new CustomEvent("change");
+          this.dispatchEvent(event);
+          delete HTMLInputElement.prototype._pickerTestData;
+          HTMLInputElement.prototype.click = clickMethod;
+        }
+       }
+       HTMLInputElement.prototype._pickerTestData = fileList;
+       `, dataList.length);
     }
 }
 exports.FilePickerWebElement = FilePickerWebElement;

package/oj-c/file-picker/__webdriver__/FilePickerWebElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePickerWebElement.js","sourceRoot":"","sources":["FilePickerWebElement.ts"],"names":[],"mappings":";;;AAAA,uEAAsE;AACtE,uBAAyB;AACzB,2BAA6B;AAE7B;;;;GAIG;AACH,MAAa,oBAAqB,SAAQ,mDAAwB;IAChE;;;;;;;OAOG;IACH,KAAK,CAAC,QAAQ,CAAC,KAA4C;QACzD,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,MAAM,QAAQ,GAAe,EAAE,CAAC;QAChC,IAAI,IAAS,CAAC;QACd,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAC1B,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC;YAC/B,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC;YAC/B,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACvC,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;gBAClF,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC;QACH,CAAC;QACD,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAClC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,kBAAkB,CACvC;;;;;;;iEAO2D,EAC3D,IAAI,EACJ,QAAQ,CACT,CAAC;IACJ,CAAC;CACF;AArCD,oDAqCC","sourcesContent":["import { FilePickerWebElementBase } from './FilePickerWebElementBase';\nimport * as fs from 'fs';\nimport * as path from 'path';\n\n/**\n * The component WebElement for [oj-c-file-picker](../../../oj-c/docs/oj.FilePicker.html).\n * Do not instantiate this class directly, instead, use\n * [findFilePicker](../functions/findFilePicker.html).\n */\nexport class FilePickerWebElement extends FilePickerWebElementBase {\n  /**\n   * Takes an Array of objects containing file paths + types.\n   * These files will be read from the local filesystem and then sent\n   * to the oj-file-picker to simulate user file selection. Only the basename of\n   * the file will be sent, not the entire path to make it consistent with how\n   * the browser sets the value.\n   * @param files An array of objects containing the path and type of selected files\n   */\n  async doSelect(files: Array<{ path: string; type: string }>) {\n    await this.whenReady();\n    const dataList: Array<any> = [];\n    let file: any;\n    for (let i = 0; i < files.length; i++) {\n      const fileInfo = files[i];\n      const filePath = fileInfo.path;\n      const fileType = fileInfo.type;\n      const data = fs.readFileSync(filePath);\n      if (data) {\n        file = { bytes: Array.from(data), path: path.basename(filePath), type: fileType };\n        dataList.push(file);\n      }\n    }\n    await this.whenBusyContextReady();\n    await this.getDriver().executeAsyncScript(\n      `const fileList = [];\n      const list = arguments[1];\n      for(var i = 0; i < list.length; i++) {\n      const data = list[i];\n      fileList.push(new File([Uint8Array.from(data.bytes)], data.path, {type: data.type}));\n      }\n      fileList.item = function(i){return fileList[i];}\n      arguments[0]._doSelectHelper(fileList).then(arguments[2]);`,\n      this,\n      dataList\n    );\n  }\n}\n"]}
+{"version":3,"file":"FilePickerWebElement.js","sourceRoot":"","sources":["FilePickerWebElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilePickerWebElementBase } from './FilePickerWebElementBase';\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport { WebDriver } from 'selenium-webdriver';\nimport { whenBusyContextReady } from '@oracle/oraclejet-webdriver/lib/busy-context-utils';\n\n/**\n * The component WebElement for [oj-c-file-picker](../../../oj-c/docs/oj.FilePicker.html).\n * Do not instantiate this class directly, instead, use\n * [findFilePicker](../functions/findFilePicker.html).\n */\nexport class FilePickerWebElement extends FilePickerWebElementBase {\n  /**\n   * Takes an Array of objects containing file paths + types.\n   * These files will be read from the local filesystem and then sent\n   * to the oj-file-picker to simulate user file selection. Only the basename of\n   * the file will be sent, not the entire path to make it consistent with how\n   * the browser sets the value.\n   * @param files An array of objects containing the path and type of selected files\n   */\n  async doSelect(files: Array<{ path: string; type: string }>) {\n    await FilePickerWebElement.setupPickFiles(this.getDriver(), files);\n\n    await this.getDriver().executeScript(`arguments[0].firstChild.click();`, this);\n\n    await this.whenBusyContextReady();\n  }\n\n  /**\n   * This method should be called right before ojfilepickerutils.pickFiles\n   * Takes the webdriver and an Array of objects containing file paths + types.\n   * These files will be read from the local filesystem and then sent\n   * to the pickFiles method to simulate user file selection. Only the basename of\n   * the file will be sent, not the entire path to make it consistent with how\n   * the browser sets the value.\n   * @param driver the Webdriver of the test\n   * @param files An array of objects containing the path and type of selected files\n   */\n  static async setupPickFiles(driver: WebDriver, files: Array<{ path: string; type: string }>) {\n    await whenBusyContextReady(driver);\n    //create a buffer with the files\n    const dataList = files.map(({ path: filePath, type }) => {\n      const fileSizeInMB = fs.statSync(filePath).size / (1024 * 1024);\n      const numberChunks = Math.ceil(fileSizeInMB / 8);\n      const fileContent = Array.from(fs.readFileSync(filePath));\n      const chunkSize = Math.floor(fileContent.length / numberChunks);\n      const fileChunks = [];\n      for (let i = 0; i < numberChunks; i++) {\n        if (i + 1 == numberChunks) {\n          fileChunks.push(fileContent.slice(i * chunkSize));\n        } else {\n          fileChunks.push(fileContent.slice(i * chunkSize, (i + 1) * chunkSize));\n        }\n      }\n\n      return {\n        bytes: fileChunks, //split it into 8MB chunks\n        path: path.basename(filePath),\n        type,\n        numberChunks\n      };\n    });\n\n    for (let i = 0; i < dataList.length; i++) {\n      const { bytes, path, type, numberChunks } = dataList[i];\n      for (let j = 0; j < bytes.length; j++) {\n        const file = {\n          bytes: bytes[j],\n          path,\n          type,\n          numberChunks,\n          chunkNumber: j,\n          fileNumber: i\n        };\n        await driver.executeScript(\n          `const file = arguments[0];\n           const chunkNumber = file.chunkNumber;\n           var data = {\n            bytes: file.bytes,\n            path: file.path,\n            type: file.type\n           }\n           if (chunkNumber == 0) {\n            window['_file' + file.fileNumber] = [data];\n           } else {\n            window['_file' + file.fileNumber].push(data);\n           }`,\n          file\n        );\n      }\n    }\n\n    driver.executeScript(\n      `const numFiles = arguments[0];\n      const list = [];\n      for ( let i = 0; i < numFiles; i++) {\n        const file = window['_file' + i];\n        delete window['_file' + i];\n        list.push({\n          bytes: file.map(chunk => chunk.bytes).join(''),\n          path: file[0].path,\n          type: file[0].type\n        });\n      }\n      const fileList = list.map((data) => {\n        return new File([Uint8Array.from(data.bytes)], data.path, {type: data.type});\n       })\n       // Only if setupPickFiles has not been called yet\n       if (!HTMLInputElement.prototype._pickerTestData) {\n        //Save the native click method\n        const clickMethod = HTMLInputElement.prototype.click;\n        //Overwrite the click method\n        HTMLInputElement.prototype.click = function() {\n          const event = new CustomEvent(\"change\");\n          this.dispatchEvent(event);\n          delete HTMLInputElement.prototype._pickerTestData;\n          HTMLInputElement.prototype.click = clickMethod;\n        }\n       }\n       HTMLInputElement.prototype._pickerTestData = fileList;\n       `,\n      dataList.length\n    );\n  }\n}\n"]}

package/oj-c/file-picker/component.json

@@ -1,7 +1,7 @@
 {
   "name": "file-picker",
-  "version": "16.1.3",
-  "jetVersion": "^16.1.3",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -34,19 +34,20 @@
       "uxSpecs": [
         "file-picker"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/FilePickerWebElement.html"
     }
   },
   "propertyLayout": [
     {
       "propertyGroup": "common",
       "items": [
-        "max"
-      ]
-    },
-    {
-      "propertyGroup": "data",
-      "items": [
-        "value"
+        "accept",
+        "selectionMode",
+        "disabled",
+        "primaryText",
+        "secondaryText"
       ]
     }
   ],
@@ -207,16 +208,6 @@
       "description": "Blurs the file picker.",
       "return": "void"
     },
-    "_doSelectHelper": {
-      "description": "This is a private method that should only be called by the webelement API.",
-      "params": [
-        {
-          "name": "fileList",
-          "type": "FileList"
-        }
-      ],
-      "return": "void"
-    },
     "setProperty": {
       "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.",
       "help": "#setProperty",

package/oj-c/file-picker/file-picker.js

@@ -42,21 +42,13 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
                 if (rootRef.current?.contains(focusElement)) {
                     focusElement.blur();
                 }
-            },
-            _doSelectHelper: (fileList) => {
-                const promise = new Promise((resolve) => {
-                    elementPromiseResolverRef.current = resolve;
-                });
-                const ref = preactRef.current;
-                ref.onClickSelected(fileList);
-                return promise;
             }
         }));
         const rootRef = (0, hooks_1.useRef)(null);
         const preactRef = (0, hooks_1.useRef)(null);
         const BaseFilePicker = UNSAFE_FilePicker_1.FilePicker;
         return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ref: rootRef, class: trigger ? 'oj-c-file-picker-with-trigger' : undefined, children: (0, jsx_runtime_1.jsx)(BaseFilePicker, { __testHandlerSymbol: preactRef, capture: capture, isDisabled: disabled, selectionMode: selectionMode, onCommit: onCommit, onReject: onReject, accept: accept, primaryText: getPrimaryText(primaryText), secondaryText: getSecondaryText(secondaryText, selectionMode), "aria-label": otherProps['aria-label'], width: "100%", children: trigger }) }));
-    }), "FilePicker", { "properties": { "accept": { "type": "Array<string>" }, "capture": { "type": "string", "enumValues": ["none", "environment", "user", "implementation"] }, "disabled": { "type": "boolean" }, "primaryText": { "type": "string|function" }, "secondaryText": { "type": "string|function" }, "selectionMode": { "type": "string", "enumValues": ["multiple", "single"] } }, "slots": { "trigger": {} }, "events": { "ojBeforeSelect": { "cancelable": true }, "ojInvalidSelect": {}, "ojSelect": {} }, "extension": { "_OBSERVED_GLOBAL_PROPS": ["aria-label"] }, "methods": { "focus": {}, "blur": {}, "_doSelectHelper": {} } }, { "capture": "none", "disabled": false, "selectionMode": "multiple" }, {
+    }), "FilePicker", { "properties": { "accept": { "type": "Array<string>" }, "capture": { "type": "string", "enumValues": ["none", "environment", "user", "implementation"] }, "disabled": { "type": "boolean" }, "primaryText": { "type": "string|function" }, "secondaryText": { "type": "string|function" }, "selectionMode": { "type": "string", "enumValues": ["multiple", "single"] } }, "slots": { "trigger": {} }, "events": { "ojBeforeSelect": { "cancelable": true }, "ojInvalidSelect": {}, "ojSelect": {} }, "extension": { "_OBSERVED_GLOBAL_PROPS": ["aria-label"] }, "methods": { "focus": {}, "blur": {} } }, { "capture": "none", "disabled": false, "selectionMode": "multiple" }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
     }, { consume: [UNSAFE_useTabbableMode_1.TabbableModeContext] });
 });

package/oj-c/file-picker.js

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

package/oj-c/form-layout/component.json

@@ -1,7 +1,7 @@
 {
   "name": "form-layout",
-  "version": "16.1.3",
-  "jetVersion": "^16.1.3",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -10,9 +10,15 @@
     "CFormLayoutElement"
   ],
   "displayName": "Form Layout",
-  "description": "A form layout will lay out its children responsively in the row or column direction.",
+  "description": "A form layout manages the layout of labels and fields in a form.",
   "help": "oj-c.FormLayout.html",
   "main": "oj-c/form-layout",
+  "status": [
+    {
+      "type": "candidate",
+      "since": "17.0.0"
+    }
+  ],
   "extension": {
     "catalog": {
       "category": "Forms"
@@ -27,6 +33,9 @@
       "uxSpecs": [
         "form-layout"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/FormLayoutWebElement.html"
     }
   },
   "propertyLayout": [
@@ -132,8 +141,7 @@
             "name": "labelEdge"
           }
         ]
-      },
-      "value": "inside"
+      }
     },
     "labelStartWidth": {
       "type": "number|string",
@@ -152,8 +160,7 @@
             "name": "labelWidth"
           }
         ]
-      },
-      "value": "33%"
+      }
     },
     "labelWrapping": {
       "type": "string",
@@ -183,8 +190,7 @@
             "name": "labelWrapping"
           }
         ]
-      },
-      "value": "wrap"
+      }
     },
     "maxColumns": {
       "type": "number",
@@ -251,8 +257,7 @@
             "default": "efficient"
           }
         ]
-      },
-      "value": "efficient"
+      }
     }
   },
   "methods": {

package/oj-c/form-layout/form-layout.js

@@ -1,49 +1,17 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "preact", "@oracle/oraclejet-preact/UNSAFE_FormLayout", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "ojs/ojvcomponent-binding", "ojs/ojvcomponent", "ojs/ojcontext"], function (require, exports, jsx_runtime_1, translationBundle_1, preact_1, UNSAFE_FormLayout_1, Layout_1, ojvcomponent_binding_1, ojvcomponent_1, Context) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "@oracle/oraclejet-preact/UNSAFE_FormLayout", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "ojs/ojvcomponent"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_FormLayout_1, Layout_1, ojvcomponent_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.FormLayout = void 0;
-    let FormLayout = class FormLayout extends preact_1.Component {
-        constructor() {
-            super(...arguments);
-            this.busyContextRef = (0, preact_1.createRef)();
-            this.rootRef = (0, preact_1.createRef)();
+    function FormLayoutImpl({ columns = 0, columnSpan = 1, direction = 'row', fullWidth = false, id, maxColumns = 1, ...otherProps }) {
+        let preactColumns = maxColumns;
+        let preactColumnBehavior = 'responsive';
+        if (columns > 0) {
+            preactColumns = columns;
+            preactColumnBehavior = 'fixed';
         }
-        componentDidMount() {
-            this.busyContextRef.current = Context.getContext(this.rootRef.current).getBusyContext();
-        }
-        render({ columnSpan, ...props }) {
-            let preactColumns = props.maxColumns;
-            let preactColumnBehavior = 'responsive';
-            if (props.columns && props.columns > 0) {
-                preactColumns = props.columns;
-                preactColumnBehavior = 'fixed';
-            }
-            return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: props.id, ref: this.rootRef, class: columnSpan ? Layout_1.layoutSpanStyles.layoutSpanColumn[columnSpan] : '', children: (0, jsx_runtime_1.jsx)(UNSAFE_FormLayout_1.FormLayout, { columns: preactColumns, columnBehavior: preactColumnBehavior, direction: props.direction, isFullWidth: props.fullWidth, labelEdge: props.labelEdge, labelStartWidth: props.labelStartWidth, labelWrapping: props.labelWrapping, isReadonly: props.readonly, userAssistanceDensity: props.userAssistanceDensity, children: props.children }) }));
-        }
-    };
-    exports.FormLayout = FormLayout;
-    FormLayout.defaultProps = {
-        columns: 0,
-        columnSpan: 1,
-        direction: 'row',
-        fullWidth: false,
-        labelEdge: 'inside',
-        labelStartWidth: '33%',
-        labelWrapping: 'wrap',
-        maxColumns: 1,
-        userAssistanceDensity: 'efficient'
-    };
-    FormLayout._metadata = { "slots": { "": {} }, "properties": { "columns": { "type": "number" }, "columnSpan": { "type": "number" }, "direction": { "type": "string", "enumValues": ["row", "column"] }, "fullWidth": { "type": "boolean" }, "labelEdge": { "type": "string", "enumValues": ["start", "top", "inside"], "binding": { "consume": { "name": "containerLabelEdge" }, "provide": [{ "name": "containerLabelEdge" }, { "name": "labelEdge" }] } }, "labelStartWidth": { "type": "number|string", "binding": { "consume": { "name": "labelWidth" }, "provide": [{ "name": "labelStartWidth" }, { "name": "labelWidth" }] } }, "labelWrapping": { "type": "string", "enumValues": ["truncate", "wrap"], "binding": { "consume": { "name": "labelWrapping" }, "provide": [{ "name": "labelWrapping" }] } }, "maxColumns": { "type": "number" }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" }, "provide": [{ "name": "containerReadonly", "default": false }, { "name": "readonly" }] } }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" }, "provide": [{ "name": "containerUserAssistanceDensity", "default": "efficient" }, { "name": "userAssistanceDensity", "default": "efficient" }] } } }, "extension": { "_OBSERVED_GLOBAL_PROPS": ["id"] } };
-    FormLayout._translationBundleMap = {
+        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: id, class: Layout_1.layoutSpanStyles.layoutSpanColumn[columnSpan], children: (0, jsx_runtime_1.jsx)(UNSAFE_FormLayout_1.FormLayout, { columns: preactColumns, columnBehavior: preactColumnBehavior, direction: direction, isFullWidth: fullWidth, labelEdge: otherProps.labelEdge, labelStartWidth: otherProps.labelStartWidth, labelWrapping: otherProps.labelWrapping, isReadonly: otherProps.readonly, userAssistanceDensity: otherProps.userAssistanceDensity, children: otherProps.children }) }));
+    }
+    exports.FormLayout = (0, ojvcomponent_1.registerCustomElement)('oj-c-form-layout', FormLayoutImpl, "FormLayout", { "slots": { "": {} }, "properties": { "columns": { "type": "number" }, "columnSpan": { "type": "number" }, "direction": { "type": "string", "enumValues": ["row", "column"] }, "fullWidth": { "type": "boolean" }, "labelEdge": { "type": "string", "enumValues": ["start", "top", "inside"], "binding": { "consume": { "name": "containerLabelEdge" }, "provide": [{ "name": "containerLabelEdge" }, { "name": "labelEdge" }] } }, "labelStartWidth": { "type": "number|string", "binding": { "consume": { "name": "labelWidth" }, "provide": [{ "name": "labelStartWidth" }, { "name": "labelWidth" }] } }, "labelWrapping": { "type": "string", "enumValues": ["truncate", "wrap"], "binding": { "consume": { "name": "labelWrapping" }, "provide": [{ "name": "labelWrapping" }] } }, "maxColumns": { "type": "number" }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" }, "provide": [{ "name": "containerReadonly", "default": false }, { "name": "readonly" }] } }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" }, "provide": [{ "name": "containerUserAssistanceDensity", "default": "efficient" }, { "name": "userAssistanceDensity", "default": "efficient" }] } } }, "extension": { "_OBSERVED_GLOBAL_PROPS": ["id"] } }, { "columns": 0, "columnSpan": 1, "direction": "row", "fullWidth": false, "maxColumns": 1 }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
-    };
-    exports.FormLayout = FormLayout = __decorate([
-        (0, ojvcomponent_1.customElement)('oj-c-form-layout')
-    ], FormLayout);
+    });
 });