@oracle/oraclejet-core-pack 17.1.3 → 18.0.0

package/oj-c/buttonset-single/__webdriver__/ButtonsetSingleWebElementBase.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonsetSingleWebElementBase = void 0;
-var elements_1 = require("@oracle/oraclejet-webdriver/elements");
+const elements_1 = require("@oracle/oraclejet-webdriver/elements");
 /**
  * This is the base class for oj-c-buttonset-single WebElement, and is generated from the
  * component's metadata. Do not modify these contents since they'll be replaced

package/oj-c/buttonset-single/__webdriver__/ButtonsetSingleWebElementBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonsetSingleWebElementBase.js","sourceRoot":"","sources":["ButtonsetSingleWebElementBase.ts"],"names":[],"mappings":";;;AAAA,iEAAoE;AAEpE;;;;;GAKG;AACH,MAAa,6BAA8B,SAAQ,uBAAY;IAC7D;;;;;OAKG;IACI,WAAW,CAAC,KAAa;QAC9B,OAAO,IAAI,CAAC,WAAW,CAAS,OAAO,EAAE,KAAK,CAAC,CAAC;IAClD,CAAC;IAED;;;;;OAKG;IACI,QAAQ;QACb,OAAO,IAAI,CAAC,WAAW,CAAS,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED;;;;;OAKG;IACI,QAAQ;QACb,OAAO,IAAI,CAAC,WAAW,CAAe,OAAO,CAAC,CAAC;IACjD,CAAC;IAED;;;;;OAKG;IACI,UAAU;QACf,OAAO,IAAI,CAAC,WAAW,CAAS,SAAS,CAAC,CAAC;IAC7C,CAAC;IAED;;;;;OAKG;IACI,WAAW;QAChB,OAAO,IAAI,CAAC,WAAW,CAAU,UAAU,CAAC,CAAC;IAC/C,CAAC;IAED;;;;;OAKG;IACI,eAAe;QACpB,OAAO,IAAI,CAAC,WAAW,CAAS,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACI,QAAQ;QACb,OAAO,IAAI,CAAC,WAAW,CAAkB,OAAO,CAAC,CAAC;IACpD,CAAC;IAED;;;;;OAKG;IACI,WAAW;QAChB,OAAO,IAAI,CAAC,WAAW,CAAkB,UAAU,CAAC,CAAC;IACvD,CAAC;IAED;;;;;OAKG;IACI,WAAW;QAChB,OAAO,IAAI,CAAC,WAAW,CAAS,UAAU,CAAC,CAAC;IAC9C,CAAC;IAED;;;;;OAKG;IACI,cAAc;QACnB,OAAO,IAAI,CAAC,WAAW,CAAS,aAAa,CAAC,CAAC;IACjD,CAAC;CACF;AApGD,sEAoGC","sourcesContent":["import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';\n\n/**\n * This is the base class for oj-c-buttonset-single WebElement, and is generated from the\n * component's metadata. Do not modify these contents since they'll be replaced\n * during the next generation.\n * Put overrides into the WebElements's subclass, ButtonsetSingleWebElement.ts.\n */\nexport class ButtonsetSingleWebElementBase extends OjWebElement {\n  /**\n   * Sets the value of <code>value</code> property.\n   * Specifies which toggle button is selected\n   * @param value The value to set for <code>value</code>\n   *\n   */\n  public changeValue(value: string): Promise<void> {\n    return this.setProperty<string>('value', value);\n  }\n\n  /**\n   * Gets the value of <code>value</code> property.\n   * Specifies which toggle button is selected\n   * @return The value of <code>value</code> property.\n   *\n   */\n  public getValue(): Promise<string> {\n    return this.getProperty<string>('value');\n  }\n\n  /**\n   * Gets the value of <code>items</code> property.\n   * Specifies the toggle buttons rendered by the buttonset.\n   * @return The value of <code>items</code> property.\n   *\n   */\n  public getItems(): Promise<Array<Items>> {\n    return this.getProperty<Array<Items>>('items');\n  }\n\n  /**\n   * Gets the value of <code>display</code> property.\n   * Display just the label, the icons, or all.\n   * @return The value of <code>display</code> property.\n   *\n   */\n  public getDisplay(): Promise<string> {\n    return this.getProperty<string>('display');\n  }\n\n  /**\n   * Gets the value of <code>disabled</code> property.\n   * Specifies that the buttonset should be disabled.\n   * @return The value of <code>disabled</code> property.\n   *\n   */\n  public getDisabled(): Promise<boolean> {\n    return this.getProperty<boolean>('disabled');\n  }\n\n  /**\n   * Gets the value of <code>size</code> property.\n   * Specifies the size of the toggle buttons\n   * @return The value of <code>size</code> property.\n   *\n   */\n  public getSizeProperty(): Promise<string> {\n    return this.getProperty<string>('size');\n  }\n\n  /**\n   * Gets the value of <code>width</code> property.\n   * Specifies the buttonset width\n   * @return The value of <code>width</code> property.\n   *\n   */\n  public getWidth(): Promise<number | string> {\n    return this.getProperty<number | string>('width');\n  }\n\n  /**\n   * Gets the value of <code>maxWidth</code> property.\n   * Specifies the buttonset max width\n   * @return The value of <code>maxWidth</code> property.\n   *\n   */\n  public getMaxWidth(): Promise<number | string> {\n    return this.getProperty<number | string>('maxWidth');\n  }\n\n  /**\n   * Gets the value of <code>chroming</code> property.\n   * Indicates in what states the button has chromings in background and border.\n   * @return The value of <code>chroming</code> property.\n   *\n   */\n  public getChroming(): Promise<string> {\n    return this.getProperty<string>('chroming');\n  }\n\n  /**\n   * Gets the value of <code>layoutWidth</code> property.\n   * Specifies if button width should be equal or based on contents.\n   * @return The value of <code>layoutWidth</code> property.\n   *\n   */\n  public getLayoutWidth(): Promise<string> {\n    return this.getProperty<string>('layoutWidth');\n  }\n}\nexport interface Items {\n  /**\n   *\n   */\n  label: string;\n  /**\n   *\n   */\n  value: string;\n  /**\n   *\n   */\n  disabled: boolean;\n  /**\n   *\n   */\n  startIcon: object;\n  /**\n   *\n   */\n  endIcon: object;\n}\n"]}
+{"version":3,"file":"ButtonsetSingleWebElementBase.js","sourceRoot":"","sources":["ButtonsetSingleWebElementBase.ts"],"names":[],"mappings":";;;AAAA,mEAAoE;AAEpE;;;;;GAKG;AACH,MAAa,6BAA8B,SAAQ,uBAAY;IAC7D;;;;;OAKG;IACI,WAAW,CAAC,KAAa;QAC9B,OAAO,IAAI,CAAC,WAAW,CAAS,OAAO,EAAE,KAAK,CAAC,CAAC;IAClD,CAAC;IAED;;;;;OAKG;IACI,QAAQ;QACb,OAAO,IAAI,CAAC,WAAW,CAAS,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED;;;;;OAKG;IACI,QAAQ;QACb,OAAO,IAAI,CAAC,WAAW,CAAe,OAAO,CAAC,CAAC;IACjD,CAAC;IAED;;;;;OAKG;IACI,UAAU;QACf,OAAO,IAAI,CAAC,WAAW,CAAS,SAAS,CAAC,CAAC;IAC7C,CAAC;IAED;;;;;OAKG;IACI,WAAW;QAChB,OAAO,IAAI,CAAC,WAAW,CAAU,UAAU,CAAC,CAAC;IAC/C,CAAC;IAED;;;;;OAKG;IACI,eAAe;QACpB,OAAO,IAAI,CAAC,WAAW,CAAS,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACI,QAAQ;QACb,OAAO,IAAI,CAAC,WAAW,CAAkB,OAAO,CAAC,CAAC;IACpD,CAAC;IAED;;;;;OAKG;IACI,WAAW;QAChB,OAAO,IAAI,CAAC,WAAW,CAAkB,UAAU,CAAC,CAAC;IACvD,CAAC;IAED;;;;;OAKG;IACI,WAAW;QAChB,OAAO,IAAI,CAAC,WAAW,CAAS,UAAU,CAAC,CAAC;IAC9C,CAAC;IAED;;;;;OAKG;IACI,cAAc;QACnB,OAAO,IAAI,CAAC,WAAW,CAAS,aAAa,CAAC,CAAC;IACjD,CAAC;CACF;AApGD,sEAoGC","sourcesContent":["import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';\n\n/**\n * This is the base class for oj-c-buttonset-single WebElement, and is generated from the\n * component's metadata. Do not modify these contents since they'll be replaced\n * during the next generation.\n * Put overrides into the WebElements's subclass, ButtonsetSingleWebElement.ts.\n */\nexport class ButtonsetSingleWebElementBase extends OjWebElement {\n  /**\n   * Sets the value of <code>value</code> property.\n   * Specifies which toggle button is selected\n   * @param value The value to set for <code>value</code>\n   *\n   */\n  public changeValue(value: string): Promise<void> {\n    return this.setProperty<string>('value', value);\n  }\n\n  /**\n   * Gets the value of <code>value</code> property.\n   * Specifies which toggle button is selected\n   * @return The value of <code>value</code> property.\n   *\n   */\n  public getValue(): Promise<string> {\n    return this.getProperty<string>('value');\n  }\n\n  /**\n   * Gets the value of <code>items</code> property.\n   * Specifies the toggle buttons rendered by the buttonset.\n   * @return The value of <code>items</code> property.\n   *\n   */\n  public getItems(): Promise<Array<Items>> {\n    return this.getProperty<Array<Items>>('items');\n  }\n\n  /**\n   * Gets the value of <code>display</code> property.\n   * Display just the label, the icons, or all.\n   * @return The value of <code>display</code> property.\n   *\n   */\n  public getDisplay(): Promise<string> {\n    return this.getProperty<string>('display');\n  }\n\n  /**\n   * Gets the value of <code>disabled</code> property.\n   * Specifies that the buttonset should be disabled.\n   * @return The value of <code>disabled</code> property.\n   *\n   */\n  public getDisabled(): Promise<boolean> {\n    return this.getProperty<boolean>('disabled');\n  }\n\n  /**\n   * Gets the value of <code>size</code> property.\n   * Specifies the size of the toggle buttons\n   * @return The value of <code>size</code> property.\n   *\n   */\n  public getSizeProperty(): Promise<string> {\n    return this.getProperty<string>('size');\n  }\n\n  /**\n   * Gets the value of <code>width</code> property.\n   * Specifies the buttonset width\n   * @return The value of <code>width</code> property.\n   *\n   */\n  public getWidth(): Promise<number | string> {\n    return this.getProperty<number | string>('width');\n  }\n\n  /**\n   * Gets the value of <code>maxWidth</code> property.\n   * Specifies the buttonset max width\n   * @return The value of <code>maxWidth</code> property.\n   *\n   */\n  public getMaxWidth(): Promise<number | string> {\n    return this.getProperty<number | string>('maxWidth');\n  }\n\n  /**\n   * Gets the value of <code>chroming</code> property.\n   * Indicates in what states the button has chromings in background and border.\n   * @return The value of <code>chroming</code> property.\n   *\n   */\n  public getChroming(): Promise<string> {\n    return this.getProperty<string>('chroming');\n  }\n\n  /**\n   * Gets the value of <code>layoutWidth</code> property.\n   * Specifies if button width should be equal or based on contents.\n   * @return The value of <code>layoutWidth</code> property.\n   *\n   */\n  public getLayoutWidth(): Promise<string> {\n    return this.getProperty<string>('layoutWidth');\n  }\n}\nexport interface Items {\n  /**\n   * The toggle item label.\n   */\n  label: string;\n  /**\n   * The toggle item value.\n   */\n  value: string;\n  /**\n   * Specifies if the toggle item is disabled (enabled by default).\n   */\n  disabled: boolean;\n  /**\n   * Optional icon to render at the start of the toggle item.\n   */\n  startIcon: object;\n  /**\n   * Optional icon to render at the end of the toggle item.\n   */\n  endIcon: object;\n}\n"]}

package/oj-c/buttonset-single/__webdriver__/index.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findButtonsetSingle = exports.ButtonsetSingleWebElement = void 0;
-var oraclejet_webdriver_1 = require("@oracle/oraclejet-webdriver");
-var ButtonsetSingleWebElement_1 = require("./ButtonsetSingleWebElement");
+exports.ButtonsetSingleWebElement = void 0;
+exports.findButtonsetSingle = findButtonsetSingle;
+const oraclejet_webdriver_1 = require("@oracle/oraclejet-webdriver");
+const ButtonsetSingleWebElement_1 = require("./ButtonsetSingleWebElement");
 Object.defineProperty(exports, "ButtonsetSingleWebElement", { enumerable: true, get: function () { return ButtonsetSingleWebElement_1.ButtonsetSingleWebElement; } });
 /**
  * Retrieve an instance of [ButtonsetSingleWebElement](../classes/ButtonsetSingleWebElement.html).
@@ -29,6 +30,5 @@ async function findButtonsetSingle(driver, by) {
     }
     return webEl;
 }
-exports.findButtonsetSingle = findButtonsetSingle;
 (0, oraclejet_webdriver_1.register)('oj-c-buttonset-single', ButtonsetSingleWebElement_1.ButtonsetSingleWebElement);
 //# sourceMappingURL=index.js.map

package/oj-c/buttonset-single/__webdriver__/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AACA,mEAAmE;AACnE,yEAAwE;AAC/D,0GADA,qDAAyB,OACA;AAElC;;;;;;;;;;;GAWG;AACI,KAAK,UAAU,mBAAmB,CACvC,MAAkB,EAClB,EAAM;IAEN,MAAM,KAAK,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC3C,8DAA8D;IAC9D,IAAI,CAAC,CAAC,KAAK,YAAY,qDAAyB,CAAC,EAAE,CAAC;QAClD,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,UAAU,EAAE,CAAC;QACzC,IAAI,YAAY,GAAG,EAAE,CAAC;QACtB,IAAI,KAAK,CAAC,WAAW,CAAC,IAAI,KAAK,2BAA2B,EAAE,CAAC;YAC3D,YAAY,GAAG,yDAAyD,CAAC;QAC3E,CAAC;QACD,MAAM,KAAK,CACT,uBAAuB,EAAE,aAAa,KAAK,CAAC,WAAW,CAAC,IAAI,SAAS,OAAO,mBAAmB,qDAAyB,CAAC,IAAI,KAAK,YAAY,EAAE,CACjJ,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAjBD,kDAiBC;AAED,IAAA,8BAAQ,EAAC,uBAAuB,EAAE,qDAAyB,CAAC,CAAC","sourcesContent":["import { By } from 'selenium-webdriver';\nimport { DriverLike, register } from '@oracle/oraclejet-webdriver';\nimport { ButtonsetSingleWebElement } from './ButtonsetSingleWebElement';\nexport { ButtonsetSingleWebElement };\n\n/**\n * Retrieve an instance of [ButtonsetSingleWebElement](../classes/ButtonsetSingleWebElement.html).\n * @example\n * ```javascript\n * import { findButtonsetSingle } from '@oracle/oraclejet-core-pack/webdriver';\n * const el = await findButtonsetSingle(driver, By.id('my-oj-c-buttonset-single'));\n * ```\n * @param driver A WebDriver/WebElement instance from where the element will be\n * searched. If WebDriver is passed, the element will be searched globally in the\n * document. If WebElement is passed, the search will be relative to this element.\n * @param by The locator with which to find the element\n */\nexport async function findButtonsetSingle(\n  driver: DriverLike,\n  by: By\n): Promise<ButtonsetSingleWebElement> {\n  const webEl = await driver.findElement(by);\n  // Check that the element is of type ButtonsetSingleWebElement\n  if (!(webEl instanceof ButtonsetSingleWebElement)) {\n    const tagName = await webEl.getTagName();\n    let supplemental = '';\n    if (webEl.constructor.name === 'ButtonsetSingleWebElement') {\n      supplemental = 'You likely have multiple installations of this package.';\n    }\n    throw Error(\n      `findButtonsetSingle(${by}) created ${webEl.constructor.name} for <${tagName}>, but expected ${ButtonsetSingleWebElement.name}. ${supplemental}`\n    );\n  }\n  return webEl;\n}\n\nregister('oj-c-buttonset-single', ButtonsetSingleWebElement);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAiBA,kDAiBC;AAjCD,qEAAmE;AACnE,2EAAwE;AAC/D,0GADA,qDAAyB,OACA;AAElC;;;;;;;;;;;GAWG;AACI,KAAK,UAAU,mBAAmB,CACvC,MAAkB,EAClB,EAAM;IAEN,MAAM,KAAK,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC3C,8DAA8D;IAC9D,IAAI,CAAC,CAAC,KAAK,YAAY,qDAAyB,CAAC,EAAE,CAAC;QAClD,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,UAAU,EAAE,CAAC;QACzC,IAAI,YAAY,GAAG,EAAE,CAAC;QACtB,IAAI,KAAK,CAAC,WAAW,CAAC,IAAI,KAAK,2BAA2B,EAAE,CAAC;YAC3D,YAAY,GAAG,yDAAyD,CAAC;QAC3E,CAAC;QACD,MAAM,KAAK,CACT,uBAAuB,EAAE,aAAa,KAAK,CAAC,WAAW,CAAC,IAAI,SAAS,OAAO,mBAAmB,qDAAyB,CAAC,IAAI,KAAK,YAAY,EAAE,CACjJ,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,IAAA,8BAAQ,EAAC,uBAAuB,EAAE,qDAAyB,CAAC,CAAC","sourcesContent":["import { By } from 'selenium-webdriver';\nimport { DriverLike, register } from '@oracle/oraclejet-webdriver';\nimport { ButtonsetSingleWebElement } from './ButtonsetSingleWebElement';\nexport { ButtonsetSingleWebElement };\n\n/**\n * Retrieve an instance of [ButtonsetSingleWebElement](../classes/ButtonsetSingleWebElement.html).\n * @example\n * ```javascript\n * import { findButtonsetSingle } from '@oracle/oraclejet-core-pack/webdriver';\n * const el = await findButtonsetSingle(driver, By.id('my-oj-c-buttonset-single'));\n * ```\n * @param driver A WebDriver/WebElement instance from where the element will be\n * searched. If WebDriver is passed, the element will be searched globally in the\n * document. If WebElement is passed, the search will be relative to this element.\n * @param by The locator with which to find the element\n */\nexport async function findButtonsetSingle(\n  driver: DriverLike,\n  by: By\n): Promise<ButtonsetSingleWebElement> {\n  const webEl = await driver.findElement(by);\n  // Check that the element is of type ButtonsetSingleWebElement\n  if (!(webEl instanceof ButtonsetSingleWebElement)) {\n    const tagName = await webEl.getTagName();\n    let supplemental = '';\n    if (webEl.constructor.name === 'ButtonsetSingleWebElement') {\n      supplemental = 'You likely have multiple installations of this package.';\n    }\n    throw Error(\n      `findButtonsetSingle(${by}) created ${webEl.constructor.name} for <${tagName}>, but expected ${ButtonsetSingleWebElement.name}. ${supplemental}`\n    );\n  }\n  return webEl;\n}\n\nregister('oj-c-buttonset-single', ButtonsetSingleWebElement);\n"]}

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

@@ -1,49 +1,24 @@
-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', "ojs/ojvcomponent-binding", "ojs/ojvcomponent", "@oracle/oraclejet-preact/UNSAFE_ButtonSetSingle", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "oj-c/utils/PRIVATE_toggleUtils/index", "@oracle/oraclejet-preact/UNSAFE_ButtonSetItem", "preact/compat", "preact", "preact/hooks", "css!oj-c/buttonset-single/buttonset-single-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, ojvcomponent_binding_1, ojvcomponent_1, UNSAFE_ButtonSetSingle_1, UNSAFE_useTabbableMode_1, index_1, UNSAFE_ButtonSetItem_1, compat_1, preact_1, hooks_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojvcomponent", "@oracle/oraclejet-preact/UNSAFE_ButtonSetSingle", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "oj-c/utils/PRIVATE_toggleUtils/index", "@oracle/oraclejet-preact/UNSAFE_ButtonSetItem", "preact/compat", "preact/hooks", "css!oj-c/buttonset-single/buttonset-single-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, ojvcomponent_1, UNSAFE_ButtonSetSingle_1, UNSAFE_useTabbableMode_1, index_1, UNSAFE_ButtonSetItem_1, compat_1, hooks_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ButtonsetSingle = void 0;
-    let ButtonsetSingle = class ButtonsetSingle extends preact_1.Component {
-        constructor() {
-            super(...arguments);
-            this.buttonRef = (0, preact_1.createRef)();
-        }
-        render({ chroming, disabled, value, onValueChanged, size, items, width, maxWidth, layoutWidth, display, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy }) {
-            const widthProps = (0, index_1.widthStyle)(layoutWidth, width, maxWidth);
-            return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ...widthProps, children: (0, jsx_runtime_1.jsx)(FunctionalButtonSetSingle, { value: value, onCommit: (detail) => {
-                        onValueChanged?.(detail.value);
-                    }, ref: this.buttonRef, display: display, variant: chroming, layoutWidth: layoutWidth, size: size, width: widthProps.style ? (widthProps.style.width ? '100%' : undefined) : undefined, "aria-label": accessibleLabel, "aria-describedby": ariaDescribedBy, isDisabled: disabled, children: items?.map((item) => {
-                        return ((0, jsx_runtime_1.jsx)(UNSAFE_ButtonSetItem_1.ButtonSetItem, { label: item.label, value: item.value, isDisabled: item.disabled, startIcon: item.startIcon && (0, jsx_runtime_1.jsx)(index_1.ToggleItemIcon, { icon: item.startIcon }), endIcon: item.endIcon && (0, jsx_runtime_1.jsx)(index_1.ToggleItemIcon, { icon: item.endIcon }) }));
-                    }) }) }));
-        }
-        blur() {
-            this.buttonRef.current?.blur();
-        }
-        focus() {
-            this.buttonRef.current?.focus();
-        }
-    };
-    exports.ButtonsetSingle = ButtonsetSingle;
-    ButtonsetSingle.defaultProps = {
-        chroming: 'outlined',
-        disabled: false,
-        size: 'md',
-        display: 'all',
-        items: []
-    };
-    ButtonsetSingle._metadata = { "properties": { "value": { "type": "string", "writeback": true }, "items": { "type": "Array<object>" }, "display": { "type": "string", "enumValues": ["all", "label", "icons"] }, "disabled": { "type": "boolean" }, "size": { "type": "string", "enumValues": ["sm", "md", "lg"] }, "width": { "type": "number|string" }, "maxWidth": { "type": "number|string" }, "chroming": { "type": "string", "enumValues": ["borderless", "outlined"], "binding": { "consume": { "name": "containerChroming" } } }, "layoutWidth": { "type": "string", "enumValues": ["auto", "equal"] } }, "extension": { "_WRITEBACK_PROPS": ["value"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "aria-label"] }, "methods": { "blur": {}, "focus": {} } };
-    ButtonsetSingle._translationBundleMap = {
+    function ButtonsetSingleImpl({ chroming = 'outlined', disabled = false, value, onValueChanged, size = 'md', width, maxWidth, layoutWidth, items = [], display = 'all', 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, ...otherProps }, ref) {
+        const rootRef = (0, hooks_1.useRef)();
+        const buttonsetRef = (0, hooks_1.useRef)();
+        const widthProps = (0, index_1.widthStyle)(layoutWidth, width, maxWidth);
+        (0, hooks_1.useImperativeHandle)(ref, () => ({
+            blur: () => buttonsetRef.current?.blur(),
+            focus: () => buttonsetRef.current?.focus()
+        }), [buttonsetRef]);
+        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ...widthProps, ref: rootRef, children: (0, jsx_runtime_1.jsx)(FunctionalButtonSetSingle, { value: value, onCommit: (detail) => {
+                    onValueChanged?.(detail.value);
+                }, ref: buttonsetRef, display: display, variant: chroming, layoutWidth: layoutWidth, size: size, width: widthProps.style ? (widthProps.style.width ? '100%' : undefined) : undefined, "aria-label": accessibleLabel, "aria-describedby": ariaDescribedBy, isDisabled: disabled, ...otherProps, children: items?.map((item) => {
+                    return ((0, jsx_runtime_1.jsx)(UNSAFE_ButtonSetItem_1.ButtonSetItem, { label: item.label, value: item.value, isDisabled: item.disabled, startIcon: item.startIcon && (0, jsx_runtime_1.jsx)(index_1.ToggleItemIcon, { icon: item.startIcon }), endIcon: item.endIcon && (0, jsx_runtime_1.jsx)(index_1.ToggleItemIcon, { icon: item.endIcon }) }));
+                }) }) }));
+    }
+    exports.ButtonsetSingle = (0, ojvcomponent_1.registerCustomElement)('oj-c-buttonset-single', (0, compat_1.forwardRef)(ButtonsetSingleImpl), "ButtonsetSingle", { "properties": { "value": { "type": "string", "writeback": true }, "items": { "type": "Array<object>" }, "display": { "type": "string", "enumValues": ["all", "label", "icons"] }, "disabled": { "type": "boolean" }, "size": { "type": "string", "enumValues": ["sm", "md", "lg"] }, "width": { "type": "number|string" }, "maxWidth": { "type": "number|string" }, "chroming": { "type": "string", "enumValues": ["borderless", "outlined"], "binding": { "consume": { "name": "containerChroming" } } }, "layoutWidth": { "type": "string", "enumValues": ["auto", "equal"] } }, "extension": { "_WRITEBACK_PROPS": ["value"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "aria-label"] }, "methods": { "focus": {}, "blur": {} } }, { "chroming": "outlined", "disabled": false, "size": "md", "items": [], "display": "all" }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
-    };
-    ButtonsetSingle._consumedContexts = [UNSAFE_useTabbableMode_1.TabbableModeContext];
-    exports.ButtonsetSingle = ButtonsetSingle = __decorate([
-        (0, ojvcomponent_1.customElement)('oj-c-buttonset-single')
-    ], ButtonsetSingle);
+    }, { consume: [UNSAFE_useTabbableMode_1.TabbableModeContext] });
     const FunctionalButtonSetSingle = (0, compat_1.forwardRef)((props, ref) => {
         const buttonRef = (0, hooks_1.useRef)();
         (0, hooks_1.useImperativeHandle)(ref, () => ({

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

@@ -1,7 +1,7 @@
 {
   "name": "buttonset-single",
-  "version": "17.1.3",
-  "jetVersion": "^17.1.3",
+  "version": "18.0.0",
+  "jetVersion": "^18.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -27,13 +27,13 @@
       ]
     },
     "webelement": {
-      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1710/cpwdtsdoc/classes/ButtonsetSingleWebElement.html"
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet/cpwdtsdoc/classes/ButtonsetSingleWebElement.html"
     }
   },
   "since": "17.0.0",
   "status": [
     {
-      "type": "candidate",
+      "type": "supersedes",
       "since": "17.0.0",
       "value": [
         "oj-buttonset-one"
@@ -56,19 +56,24 @@
         "vbdt": {
           "itemProperties": {
             "label": {
-              "type": "string"
+              "type": "string",
+              "description": "The toggle item label."
             },
             "value": {
-              "type": "string"
+              "type": "string",
+              "description": "The toggle item value."
             },
             "disabled": {
-              "type": "boolean"
+              "type": "boolean",
+              "description": "Specifies if the toggle item is disabled (enabled by default)."
             },
             "startIcon": {
-              "type": "object"
+              "type": "object",
+              "description": "Optional icon to render at the start of the toggle item."
             },
             "endIcon": {
-              "type": "object"
+              "type": "object",
+              "description": "Optional icon to render at the end of the toggle item."
             }
           }
         }
@@ -177,11 +182,11 @@
     }
   },
   "methods": {
-    "blur": {
-      "return": "any"
-    },
     "focus": {
-      "return": "any"
+      "return": "void"
+    },
+    "blur": {
+      "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.",

package/oj-c/card-view/__webdriver__/CardViewWebElement.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardViewWebElement = void 0;
-var CardViewWebElementBase_1 = require("./CardViewWebElementBase");
-var selenium_webdriver_1 = require("selenium-webdriver");
-var oraclejet_webdriver_1 = require("@oracle/oraclejet-webdriver");
-var oj_module_proxy_1 = require("@oracle/oraclejet-webdriver/lib/oj-module-proxy");
+const CardViewWebElementBase_1 = require("./CardViewWebElementBase");
+const selenium_webdriver_1 = require("selenium-webdriver");
+const oraclejet_webdriver_1 = require("@oracle/oraclejet-webdriver");
+const oj_module_proxy_1 = require("@oracle/oraclejet-webdriver/lib/oj-module-proxy");
 /**
 /**
  * The component WebElement for [oj-c-card-view](../../../oj-c/docs/oj.CardView.html).
@@ -22,9 +22,7 @@ class CardViewWebElement extends CardViewWebElementBase_1.CardViewWebElementBase
      */
     async changeSelected(selected) {
         await this.whenReady();
-        return (0, oj_module_proxy_1.executeWithModules)(this.getDriver(), ['KeySet'], [this, selected], `
-    ({ KeySetImpl }, ele, selected) => ele.selected = new KeySetImpl(selected)
-    `);
+        return (0, oj_module_proxy_1.executeWithModules)(this.getDriver(), ['KeySet'], [this, selected], ({ KeySetImpl }, ele, selected) => (ele.selected = new KeySetImpl(selected)));
     }
     /**
      * Gets the value of "selected" property.
@@ -35,12 +33,12 @@ class CardViewWebElement extends CardViewWebElementBase_1.CardViewWebElementBase
      */
     async getSelected() {
         await this.whenReady();
-        const selected = await this.getDriver().executeScript(`
-      const ele = arguments[0];
-      const selected = ele.selected.isAddAll() ? Array.from(ele.selected.deletedValues())
-      : Array.from(ele.selected.values())
-      return selected;
-    `, this);
+        const selected = await this.getDriver().executeScript((ele) => {
+            const selected = ele.selected.isAddAll()
+                ? Array.from(ele.selected.deletedValues())
+                : Array.from(ele.selected.values());
+            return selected;
+        }, this);
         return selected;
     }
     /**
@@ -48,7 +46,6 @@ class CardViewWebElement extends CardViewWebElementBase_1.CardViewWebElementBase
      * @param key The key within the Collection's dataset associated with the item.
      */
     async findItem(itemLocator) {
-        await this.whenReady();
         try {
             await this.whenReady();
             return (0, oraclejet_webdriver_1.slotProxy)(await this.findElement(selenium_webdriver_1.By.css(`[role="gridcell"][data-oj-key="${itemLocator.key}"]`)));

package/oj-c/card-view/__webdriver__/CardViewWebElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardViewWebElement.js","sourceRoot":"","sources":["CardViewWebElement.ts"],"names":[],"mappings":";;;AAAA,mEAAkE;AAClE,yDAAwC;AACxC,mEAAmE;AACnE,mFAAqF;AACrF;;;;;GAKG;AACH,MAAa,kBAAmB,SAAQ,+CAAsB;IAC5D,qBAAqB;IACrB;;;;;;OAMG;IACH,KAAK,CAAC,cAAc,CAAI,QAAkB;QACxC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,OAAO,IAAA,oCAAkB,EACvB,IAAI,CAAC,SAAS,EAAE,EAChB,CAAC,QAAQ,CAAC,EACV,CAAC,IAAI,EAAE,QAAQ,CAAC,EAChB;;KAED,CACA,CAAC;IACJ,CAAC;IAED;;;;;;OAMG;IACH,KAAK,CAAC,WAAW;QACf,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,MAAM,QAAQ,GAAa,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,CAC7D;;;;;KAKD,EACC,IAAI,CACL,CAAC;QACF,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;;;OAGG;IACH,KAAK,CAAC,QAAQ,CAAI,WAAuB;QACvC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,IAAI,CAAC;YACH,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;YACvB,OAAO,IAAA,+BAAS,EACd,MAAM,IAAI,CAAC,WAAW,CAAC,uBAAE,CAAC,GAAG,CAAC,kCAAkC,WAAW,CAAC,GAAG,IAAI,CAAC,CAAC,CACtF,CAAC;QACJ,CAAC;QAAC,OAAO,EAAE,EAAE,CAAC;YACZ,MAAM,KAAK,CACT,mDAAmD,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAC1F,CAAC;QACJ,CAAC;IACH,CAAC;CACF;AA3DD,gDA2DC","sourcesContent":["import { CardViewWebElementBase } from './CardViewWebElementBase';\nimport { By } from 'selenium-webdriver';\nimport { SlotProxy, slotProxy } from '@oracle/oraclejet-webdriver';\nimport { executeWithModules } from '@oracle/oraclejet-webdriver/lib/oj-module-proxy';\n/**\n/**\n * The component WebElement for [oj-c-card-view](../../../oj-c/docs/oj.CardView.html).\n * Do not instantiate this class directly, instead, use\n * [findCardView](../modules.html#findCardView).\n */\nexport class CardViewWebElement extends CardViewWebElementBase {\n  // Put overrides here\n  /**\n   * Sets the value of \"selected\" property.\n   * Specifies the current selected items in the listview. See the Help documentation for more information.\n   * @param selected The value to set for \"selected\"\n   * @override\n   * @typeparam K Type of keys\n   */\n  async changeSelected<K>(selected: Array<K>) {\n    await this.whenReady();\n    return executeWithModules<K>(\n      this.getDriver(),\n      ['KeySet'],\n      [this, selected],\n      `\n    ({ KeySetImpl }, ele, selected) => ele.selected = new KeySetImpl(selected)\n    `\n    );\n  }\n\n  /**\n   * Gets the value of \"selected\" property.\n   * Retrieves the current selected items in the listview. See the Help documentation for more information.\n   * @override\n   * @typeparam K Type of keys\n   * @return The value of \"selected\" property.\n   */\n  async getSelected<K>(): Promise<Array<K>> {\n    await this.whenReady();\n    const selected: Array<K> = await this.getDriver().executeScript(\n      `\n      const ele = arguments[0];\n      const selected = ele.selected.isAddAll() ? Array.from(ele.selected.deletedValues())\n      : Array.from(ele.selected.values())\n      return selected;\n    `,\n      this\n    );\n    return selected;\n  }\n\n  /**\n   * Retrieve a SlotProxy which represents a single listview item.\n   * @param key The key within the Collection's dataset associated with the item.\n   */\n  async findItem<T>(itemLocator: { key: T }): Promise<SlotProxy> {\n    await this.whenReady();\n    try {\n      await this.whenReady();\n      return slotProxy(\n        await this.findElement(By.css(`[role=\"gridcell\"][data-oj-key=\"${itemLocator.key}\"]`))\n      );\n    } catch (ex) {\n      throw Error(\n        `No corresponding item found for the itemLocator ${JSON.stringify(itemLocator, null, 2)}`\n      );\n    }\n  }\n}\n"]}
+{"version":3,"file":"CardViewWebElement.js","sourceRoot":"","sources":["CardViewWebElement.ts"],"names":[],"mappings":";;;AAAA,qEAAkE;AAClE,2DAAwC;AACxC,qEAAmE;AACnE,qFAAqF;AACrF;;;;;GAKG;AACH,MAAa,kBAAmB,SAAQ,+CAAsB;IAC5D,qBAAqB;IACrB;;;;;;OAMG;IACH,KAAK,CAAC,cAAc,CAAI,QAAkB;QACxC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,OAAO,IAAA,oCAAkB,EACvB,IAAI,CAAC,SAAS,EAAE,EAChB,CAAC,QAAQ,CAAC,EACV,CAAC,IAAI,EAAE,QAAQ,CAAC,EAChB,CAAC,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAC7E,CAAC;IACJ,CAAC;IAED;;;;;;OAMG;IACH,KAAK,CAAC,WAAW;QACf,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,MAAM,QAAQ,GAAa,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,CAAC,CAAC,GAAQ,EAAE,EAAE;YAC3E,MAAM,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE;gBACtC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC;gBAC1C,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;YACtC,OAAO,QAAQ,CAAC;QAClB,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;;;OAGG;IACH,KAAK,CAAC,QAAQ,CAAI,WAAuB;QACvC,IAAI,CAAC;YACH,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;YACvB,OAAO,IAAA,+BAAS,EACd,MAAM,IAAI,CAAC,WAAW,CAAC,uBAAE,CAAC,GAAG,CAAC,kCAAkC,WAAW,CAAC,GAAG,IAAI,CAAC,CAAC,CACtF,CAAC;QACJ,CAAC;QAAC,OAAO,EAAE,EAAE,CAAC;YACZ,MAAM,KAAK,CACT,mDAAmD,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAC1F,CAAC;QACJ,CAAC;IACH,CAAC;CACF;AArDD,gDAqDC","sourcesContent":["import { CardViewWebElementBase } from './CardViewWebElementBase';\nimport { By } from 'selenium-webdriver';\nimport { SlotProxy, slotProxy } from '@oracle/oraclejet-webdriver';\nimport { executeWithModules } from '@oracle/oraclejet-webdriver/lib/oj-module-proxy';\n/**\n/**\n * The component WebElement for [oj-c-card-view](../../../oj-c/docs/oj.CardView.html).\n * Do not instantiate this class directly, instead, use\n * [findCardView](../modules.html#findCardView).\n */\nexport class CardViewWebElement extends CardViewWebElementBase {\n  // Put overrides here\n  /**\n   * Sets the value of \"selected\" property.\n   * Specifies the current selected items in the listview. See the Help documentation for more information.\n   * @param selected The value to set for \"selected\"\n   * @override\n   * @typeparam K Type of keys\n   */\n  async changeSelected<K>(selected: Array<K>) {\n    await this.whenReady();\n    return executeWithModules<K>(\n      this.getDriver(),\n      ['KeySet'],\n      [this, selected],\n      ({ KeySetImpl }, ele, selected) => (ele.selected = new KeySetImpl(selected))\n    );\n  }\n\n  /**\n   * Gets the value of \"selected\" property.\n   * Retrieves the current selected items in the listview. See the Help documentation for more information.\n   * @override\n   * @typeparam K Type of keys\n   * @return The value of \"selected\" property.\n   */\n  async getSelected<K>(): Promise<Array<K>> {\n    await this.whenReady();\n    const selected: Array<K> = await this.getDriver().executeScript((ele: any) => {\n      const selected = ele.selected.isAddAll()\n        ? Array.from(ele.selected.deletedValues())\n        : Array.from(ele.selected.values());\n      return selected;\n    }, this);\n    return selected;\n  }\n\n  /**\n   * Retrieve a SlotProxy which represents a single listview item.\n   * @param key The key within the Collection's dataset associated with the item.\n   */\n  async findItem<T>(itemLocator: { key: T }): Promise<SlotProxy> {\n    try {\n      await this.whenReady();\n      return slotProxy(\n        await this.findElement(By.css(`[role=\"gridcell\"][data-oj-key=\"${itemLocator.key}\"]`))\n      );\n    } catch (ex) {\n      throw Error(\n        `No corresponding item found for the itemLocator ${JSON.stringify(itemLocator, null, 2)}`\n      );\n    }\n  }\n}\n"]}

package/oj-c/card-view/__webdriver__/CardViewWebElementBase.d.ts

@@ -12,7 +12,7 @@ export declare class CardViewWebElementBase extends OjWebElement {
      * @return The value of <code>currentItem</code> property.
      *
      */
-    getCurrentItem(): Promise<any>;
+    getCurrentItem(): Promise<string | number>;
     /**
      * Gets the value of <code>gutterSize</code> property.
      * Size of the gutter between columns and rows.

package/oj-c/card-view/__webdriver__/CardViewWebElementBase.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardViewWebElementBase = void 0;
-var elements_1 = require("@oracle/oraclejet-webdriver/elements");
+const elements_1 = require("@oracle/oraclejet-webdriver/elements");
 /**
  * This is the base class for oj-c-card-view WebElement, and is generated from the
  * component's metadata. Do not modify these contents since they'll be replaced

package/oj-c/card-view/__webdriver__/CardViewWebElementBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardViewWebElementBase.js","sourceRoot":"","sources":["CardViewWebElementBase.ts"],"names":[],"mappings":";;;AAAA,iEAAoE;AAEpE;;;;;GAKG;AACH,MAAa,sBAAuB,SAAQ,uBAAY;IACtD;;;;;OAKG;IACI,cAAc;QACnB,OAAO,IAAI,CAAC,WAAW,CAAM,aAAa,CAAC,CAAC;IAC9C,CAAC;IAED;;;;;OAKG;IACI,aAAa;QAClB,OAAO,IAAI,CAAC,WAAW,CAAS,YAAY,CAAC,CAAC;IAChD,CAAC;IAED;;;;;OAKG;IACI,sBAAsB;QAC3B,OAAO,IAAI,CAAC,WAAW,CAAsB,qBAAqB,CAAC,CAAC;IACtE,CAAC;IAED;;;;;OAKG;IACI,cAAc,CAAC,QAAgB;QACpC,OAAO,IAAI,CAAC,WAAW,CAAS,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxD,CAAC;IAED;;;;;OAKG;IACI,WAAW;QAChB,OAAO,IAAI,CAAC,WAAW,CAAS,UAAU,CAAC,CAAC;IAC9C,CAAC;IAED;;;;;OAKG;IACI,gBAAgB;QACrB,OAAO,IAAI,CAAC,WAAW,CAAS,eAAe,CAAC,CAAC;IACnD,CAAC;IAED;;;;;OAKG;IACI,mBAAmB;QACxB,OAAO,IAAI,CAAC,WAAW,CAAS,kBAAkB,CAAC,CAAC;IACtD,CAAC;IAED;;;;;OAKG;IACI,gBAAgB;QACrB,OAAO,IAAI,CAAC,WAAW,CAAS,eAAe,CAAC,CAAC;IACnD,CAAC;IAED;;;;;OAKG;IACI,UAAU;QACf,OAAO,IAAI,CAAC,WAAW,CAAkB,SAAS,CAAC,CAAC;IACtD,CAAC;IAED;;;;;OAKG;IACI,cAAc;QACnB,OAAO,IAAI,CAAC,WAAW,CAAc,aAAa,CAAC,CAAC;IACtD,CAAC;CACF;AApGD,wDAoGC","sourcesContent":["import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';\n\n/**\n * This is the base class for oj-c-card-view WebElement, and is generated from the\n * component's metadata. Do not modify these contents since they'll be replaced\n * during the next generation.\n * Put overrides into the WebElements's subclass, CardViewWebElement.ts.\n */\nexport class CardViewWebElementBase extends OjWebElement {\n  /**\n   * Gets the value of <code>currentItem</code> property.\n   * The item that currently has keyboard focus\n   * @return The value of <code>currentItem</code> property.\n   *\n   */\n  public getCurrentItem(): Promise<any> {\n    return this.getProperty<any>('currentItem');\n  }\n\n  /**\n   * Gets the value of <code>gutterSize</code> property.\n   * Size of the gutter between columns and rows.\n   * @return The value of <code>gutterSize</code> property.\n   *\n   */\n  public getGutterSize(): Promise<string> {\n    return this.getProperty<string>('gutterSize');\n  }\n\n  /**\n   * Gets the value of <code>scrollPolicyOptions</code> property.\n   * Specifies fetch options for scrolling behaviors that trigger data fetches.\n   * @return The value of <code>scrollPolicyOptions</code> property.\n   *\n   */\n  public getScrollPolicyOptions(): Promise<ScrollPolicyOptions> {\n    return this.getProperty<ScrollPolicyOptions>('scrollPolicyOptions');\n  }\n\n  /**\n   * Sets the value of <code>selected</code> property.\n   * The selected property\n   * @param selected The value to set for <code>selected</code>\n   *\n   */\n  public changeSelected(selected: object): Promise<void> {\n    return this.setProperty<object>('selected', selected);\n  }\n\n  /**\n   * Gets the value of <code>selected</code> property.\n   * The selected property\n   * @return The value of <code>selected</code> property.\n   *\n   */\n  public getSelected(): Promise<object> {\n    return this.getProperty<object>('selected');\n  }\n\n  /**\n   * Gets the value of <code>selectionMode</code> property.\n   * Type of selection behavior for the CardView\n   * @return The value of <code>selectionMode</code> property.\n   *\n   */\n  public getSelectionMode(): Promise<string> {\n    return this.getProperty<string>('selectionMode');\n  }\n\n  /**\n   * Gets the value of <code>initialAnimation</code> property.\n   * Specify animation when cards are initially rendered.\n   * @return The value of <code>initialAnimation</code> property.\n   *\n   */\n  public getInitialAnimation(): Promise<string> {\n    return this.getProperty<string>('initialAnimation');\n  }\n\n  /**\n   * Gets the value of <code>focusBehavior</code> property.\n   * Specifies which focus behavior we should use for an item.\n   * @return The value of <code>focusBehavior</code> property.\n   *\n   */\n  public getFocusBehavior(): Promise<string> {\n    return this.getProperty<string>('focusBehavior');\n  }\n\n  /**\n   * Gets the value of <code>columns</code> property.\n   * Specifies the exact number of columns to render.\n   * @return The value of <code>columns</code> property.\n   *\n   */\n  public getColumns(): Promise<number | string> {\n    return this.getProperty<number | string>('columns');\n  }\n\n  /**\n   * Gets the value of <code>reorderable</code> property.\n   * Specify the item reordering functionality.\n   * @return The value of <code>reorderable</code> property.\n   *\n   */\n  public getReorderable(): Promise<Reorderable> {\n    return this.getProperty<Reorderable>('reorderable');\n  }\n}\nexport interface ScrollPolicyOptions {\n  /**\n   *\n   */\n  fetchSize: number;\n  /**\n   *\n   */\n  scroller: string;\n}\nexport interface Reorderable {\n  /**\n   *\n   */\n  items: string;\n}\n"]}
+{"version":3,"file":"CardViewWebElementBase.js","sourceRoot":"","sources":["CardViewWebElementBase.ts"],"names":[],"mappings":";;;AAAA,mEAAoE;AAEpE;;;;;GAKG;AACH,MAAa,sBAAuB,SAAQ,uBAAY;IACtD;;;;;OAKG;IACI,cAAc;QACnB,OAAO,IAAI,CAAC,WAAW,CAAkB,aAAa,CAAC,CAAC;IAC1D,CAAC;IAED;;;;;OAKG;IACI,aAAa;QAClB,OAAO,IAAI,CAAC,WAAW,CAAS,YAAY,CAAC,CAAC;IAChD,CAAC;IAED;;;;;OAKG;IACI,sBAAsB;QAC3B,OAAO,IAAI,CAAC,WAAW,CAAsB,qBAAqB,CAAC,CAAC;IACtE,CAAC;IAED;;;;;OAKG;IACI,cAAc,CAAC,QAAgB;QACpC,OAAO,IAAI,CAAC,WAAW,CAAS,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxD,CAAC;IAED;;;;;OAKG;IACI,WAAW;QAChB,OAAO,IAAI,CAAC,WAAW,CAAS,UAAU,CAAC,CAAC;IAC9C,CAAC;IAED;;;;;OAKG;IACI,gBAAgB;QACrB,OAAO,IAAI,CAAC,WAAW,CAAS,eAAe,CAAC,CAAC;IACnD,CAAC;IAED;;;;;OAKG;IACI,mBAAmB;QACxB,OAAO,IAAI,CAAC,WAAW,CAAS,kBAAkB,CAAC,CAAC;IACtD,CAAC;IAED;;;;;OAKG;IACI,gBAAgB;QACrB,OAAO,IAAI,CAAC,WAAW,CAAS,eAAe,CAAC,CAAC;IACnD,CAAC;IAED;;;;;OAKG;IACI,UAAU;QACf,OAAO,IAAI,CAAC,WAAW,CAAkB,SAAS,CAAC,CAAC;IACtD,CAAC;IAED;;;;;OAKG;IACI,cAAc;QACnB,OAAO,IAAI,CAAC,WAAW,CAAc,aAAa,CAAC,CAAC;IACtD,CAAC;CACF;AApGD,wDAoGC","sourcesContent":["import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';\n\n/**\n * This is the base class for oj-c-card-view WebElement, and is generated from the\n * component's metadata. Do not modify these contents since they'll be replaced\n * during the next generation.\n * Put overrides into the WebElements's subclass, CardViewWebElement.ts.\n */\nexport class CardViewWebElementBase extends OjWebElement {\n  /**\n   * Gets the value of <code>currentItem</code> property.\n   * The item that currently has keyboard focus\n   * @return The value of <code>currentItem</code> property.\n   *\n   */\n  public getCurrentItem(): Promise<string | number> {\n    return this.getProperty<string | number>('currentItem');\n  }\n\n  /**\n   * Gets the value of <code>gutterSize</code> property.\n   * Size of the gutter between columns and rows.\n   * @return The value of <code>gutterSize</code> property.\n   *\n   */\n  public getGutterSize(): Promise<string> {\n    return this.getProperty<string>('gutterSize');\n  }\n\n  /**\n   * Gets the value of <code>scrollPolicyOptions</code> property.\n   * Specifies fetch options for scrolling behaviors that trigger data fetches.\n   * @return The value of <code>scrollPolicyOptions</code> property.\n   *\n   */\n  public getScrollPolicyOptions(): Promise<ScrollPolicyOptions> {\n    return this.getProperty<ScrollPolicyOptions>('scrollPolicyOptions');\n  }\n\n  /**\n   * Sets the value of <code>selected</code> property.\n   * The selected property\n   * @param selected The value to set for <code>selected</code>\n   *\n   */\n  public changeSelected(selected: object): Promise<void> {\n    return this.setProperty<object>('selected', selected);\n  }\n\n  /**\n   * Gets the value of <code>selected</code> property.\n   * The selected property\n   * @return The value of <code>selected</code> property.\n   *\n   */\n  public getSelected(): Promise<object> {\n    return this.getProperty<object>('selected');\n  }\n\n  /**\n   * Gets the value of <code>selectionMode</code> property.\n   * Type of selection behavior for the CardView\n   * @return The value of <code>selectionMode</code> property.\n   *\n   */\n  public getSelectionMode(): Promise<string> {\n    return this.getProperty<string>('selectionMode');\n  }\n\n  /**\n   * Gets the value of <code>initialAnimation</code> property.\n   * Specify animation when cards are initially rendered.\n   * @return The value of <code>initialAnimation</code> property.\n   *\n   */\n  public getInitialAnimation(): Promise<string> {\n    return this.getProperty<string>('initialAnimation');\n  }\n\n  /**\n   * Gets the value of <code>focusBehavior</code> property.\n   * Specifies which focus behavior we should use for an item.\n   * @return The value of <code>focusBehavior</code> property.\n   *\n   */\n  public getFocusBehavior(): Promise<string> {\n    return this.getProperty<string>('focusBehavior');\n  }\n\n  /**\n   * Gets the value of <code>columns</code> property.\n   * Specifies the exact number of columns to render.\n   * @return The value of <code>columns</code> property.\n   *\n   */\n  public getColumns(): Promise<number | string> {\n    return this.getProperty<number | string>('columns');\n  }\n\n  /**\n   * Gets the value of <code>reorderable</code> property.\n   * Specify the item reordering functionality.\n   * @return The value of <code>reorderable</code> property.\n   *\n   */\n  public getReorderable(): Promise<Reorderable> {\n    return this.getProperty<Reorderable>('reorderable');\n  }\n}\nexport interface ScrollPolicyOptions {\n  /**\n   *\n   */\n  fetchSize: number;\n  /**\n   *\n   */\n  scroller: string;\n}\nexport interface Reorderable {\n  /**\n   *\n   */\n  items: string;\n}\n"]}

package/oj-c/card-view/__webdriver__/index.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findCardView = exports.CardViewWebElement = void 0;
-var oraclejet_webdriver_1 = require("@oracle/oraclejet-webdriver");
-var CardViewWebElement_1 = require("./CardViewWebElement");
+exports.CardViewWebElement = void 0;
+exports.findCardView = findCardView;
+const oraclejet_webdriver_1 = require("@oracle/oraclejet-webdriver");
+const CardViewWebElement_1 = require("./CardViewWebElement");
 Object.defineProperty(exports, "CardViewWebElement", { enumerable: true, get: function () { return CardViewWebElement_1.CardViewWebElement; } });
 /**
  * Retrieve an instance of [CardViewWebElement](../classes/CardViewWebElement.html).
@@ -29,6 +30,5 @@ async function findCardView(driver, by) {
     }
     return webEl;
 }
-exports.findCardView = findCardView;
 (0, oraclejet_webdriver_1.register)('oj-c-card-view', CardViewWebElement_1.CardViewWebElement);
 //# sourceMappingURL=index.js.map

package/oj-c/card-view/__webdriver__/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AACA,mEAAmE;AACnE,2DAA0D;AACjD,mGADA,uCAAkB,OACA;AAE3B;;;;;;;;;;;GAWG;AACI,KAAK,UAAU,YAAY,CAAC,MAAkB,EAAE,EAAM;IAC3D,MAAM,KAAK,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC3C,uDAAuD;IACvD,IAAI,CAAC,CAAC,KAAK,YAAY,uCAAkB,CAAC,EAAE,CAAC;QAC3C,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,UAAU,EAAE,CAAC;QACzC,IAAI,YAAY,GAAG,EAAE,CAAC;QACtB,IAAI,KAAK,CAAC,WAAW,CAAC,IAAI,KAAK,oBAAoB,EAAE,CAAC;YACpD,YAAY,GAAG,yDAAyD,CAAC;QAC3E,CAAC;QACD,MAAM,KAAK,CACT,gBAAgB,EAAE,aAAa,KAAK,CAAC,WAAW,CAAC,IAAI,SAAS,OAAO,mBAAmB,uCAAkB,CAAC,IAAI,KAAK,YAAY,EAAE,CACnI,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAdD,oCAcC;AAED,IAAA,8BAAQ,EAAC,gBAAgB,EAAE,uCAAkB,CAAC,CAAC","sourcesContent":["import { By } from 'selenium-webdriver';\nimport { DriverLike, register } from '@oracle/oraclejet-webdriver';\nimport { CardViewWebElement } from './CardViewWebElement';\nexport { CardViewWebElement };\n\n/**\n * Retrieve an instance of [CardViewWebElement](../classes/CardViewWebElement.html).\n * @example\n * ```javascript\n * import { findCardView } from '@oracle/oraclejet-core-pack/webdriver';\n * const el = await findCardView(driver, By.id('my-oj-c-card-view'));\n * ```\n * @param driver A WebDriver/WebElement instance from where the element will be\n * searched. If WebDriver is passed, the element will be searched globally in the\n * document. If WebElement is passed, the search will be relative to this element.\n * @param by The locator with which to find the element\n */\nexport async function findCardView(driver: DriverLike, by: By): Promise<CardViewWebElement> {\n  const webEl = await driver.findElement(by);\n  // Check that the element is of type CardViewWebElement\n  if (!(webEl instanceof CardViewWebElement)) {\n    const tagName = await webEl.getTagName();\n    let supplemental = '';\n    if (webEl.constructor.name === 'CardViewWebElement') {\n      supplemental = 'You likely have multiple installations of this package.';\n    }\n    throw Error(\n      `findCardView(${by}) created ${webEl.constructor.name} for <${tagName}>, but expected ${CardViewWebElement.name}. ${supplemental}`\n    );\n  }\n  return webEl;\n}\n\nregister('oj-c-card-view', CardViewWebElement);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAiBA,oCAcC;AA9BD,qEAAmE;AACnE,6DAA0D;AACjD,mGADA,uCAAkB,OACA;AAE3B;;;;;;;;;;;GAWG;AACI,KAAK,UAAU,YAAY,CAAC,MAAkB,EAAE,EAAM;IAC3D,MAAM,KAAK,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC3C,uDAAuD;IACvD,IAAI,CAAC,CAAC,KAAK,YAAY,uCAAkB,CAAC,EAAE,CAAC;QAC3C,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,UAAU,EAAE,CAAC;QACzC,IAAI,YAAY,GAAG,EAAE,CAAC;QACtB,IAAI,KAAK,CAAC,WAAW,CAAC,IAAI,KAAK,oBAAoB,EAAE,CAAC;YACpD,YAAY,GAAG,yDAAyD,CAAC;QAC3E,CAAC;QACD,MAAM,KAAK,CACT,gBAAgB,EAAE,aAAa,KAAK,CAAC,WAAW,CAAC,IAAI,SAAS,OAAO,mBAAmB,uCAAkB,CAAC,IAAI,KAAK,YAAY,EAAE,CACnI,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,IAAA,8BAAQ,EAAC,gBAAgB,EAAE,uCAAkB,CAAC,CAAC","sourcesContent":["import { By } from 'selenium-webdriver';\nimport { DriverLike, register } from '@oracle/oraclejet-webdriver';\nimport { CardViewWebElement } from './CardViewWebElement';\nexport { CardViewWebElement };\n\n/**\n * Retrieve an instance of [CardViewWebElement](../classes/CardViewWebElement.html).\n * @example\n * ```javascript\n * import { findCardView } from '@oracle/oraclejet-core-pack/webdriver';\n * const el = await findCardView(driver, By.id('my-oj-c-card-view'));\n * ```\n * @param driver A WebDriver/WebElement instance from where the element will be\n * searched. If WebDriver is passed, the element will be searched globally in the\n * document. If WebElement is passed, the search will be relative to this element.\n * @param by The locator with which to find the element\n */\nexport async function findCardView(driver: DriverLike, by: By): Promise<CardViewWebElement> {\n  const webEl = await driver.findElement(by);\n  // Check that the element is of type CardViewWebElement\n  if (!(webEl instanceof CardViewWebElement)) {\n    const tagName = await webEl.getTagName();\n    let supplemental = '';\n    if (webEl.constructor.name === 'CardViewWebElement') {\n      supplemental = 'You likely have multiple installations of this package.';\n    }\n    throw Error(\n      `findCardView(${by}) created ${webEl.constructor.name} for <${tagName}>, but expected ${CardViewWebElement.name}. ${supplemental}`\n    );\n  }\n  return webEl;\n}\n\nregister('oj-c-card-view', CardViewWebElement);\n"]}

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

@@ -1,4 +1,4 @@
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojcontext", "preact/hooks", "ojs/ojvcomponent", "preact/compat", "@oracle/oraclejet-preact/UNSAFE_CardFlexView", "@oracle/oraclejet-preact/UNSAFE_CardGridView", "./useCardViewPreact", "./cardViewItem", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslationBundle", "@oracle/oraclejet-preact/UNSAFE_EmptyList", "css!oj-c/card-view/card-view-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, Context, hooks_1, ojvcomponent_1, compat_1, UNSAFE_CardFlexView_1, UNSAFE_CardGridView_1, useCardViewPreact_1, cardViewItem_1, UNSAFE_useTranslationBundle_1, UNSAFE_EmptyList_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojcontext", "preact/hooks", "ojs/ojvcomponent", "preact/compat", "@oracle/oraclejet-preact/UNSAFE_CardFlexView", "@oracle/oraclejet-preact/UNSAFE_CardGridView", "./useCardViewPreact", "./cardViewItem", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslationBundle", "@oracle/oraclejet-preact/UNSAFE_EmptyList", "../hooks/PRIVATE_useSelectionContext/SelectionContext", "css!oj-c/card-view/card-view-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, Context, hooks_1, ojvcomponent_1, compat_1, UNSAFE_CardFlexView_1, UNSAFE_CardGridView_1, useCardViewPreact_1, cardViewItem_1, UNSAFE_useTranslationBundle_1, UNSAFE_EmptyList_1, SelectionContext_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.CardView = void 0;
@@ -14,15 +14,19 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
                 return (0, jsx_runtime_1.jsx)(UNSAFE_EmptyList_1.EmptyList, { children: noDataContent });
             }
         }
+        const selectInfo = {
+            selected: cardViewProps.selectedKeys,
+            selectionMode: cardViewProps.selectionMode,
+            onSelectedChange: rest.onSelectedChanged
+        };
+        const itemRenderer = (0, hooks_1.useCallback)((context) => {
+            return (0, jsx_runtime_1.jsx)(cardViewItem_1.CardViewItem, { context: context, itemTemplate: itemTemplate });
+        }, [itemTemplate]);
         if (cardViewProps.columns) {
-            return ((0, jsx_runtime_1.jsx)(UNSAFE_CardGridView_1.CardGridView, { ...cardViewProps, children: (0, hooks_1.useCallback)((context) => {
-                    return (0, jsx_runtime_1.jsx)(cardViewItem_1.CardViewItem, { context: context, itemTemplate: itemTemplate });
-                }, [itemTemplate]) }));
+            return ((0, jsx_runtime_1.jsx)(SelectionContext_1.SelectionContext.Provider, { value: selectInfo, children: (0, jsx_runtime_1.jsx)(UNSAFE_CardGridView_1.CardGridView, { ...cardViewProps, children: itemRenderer }) }));
         }
         else {
-            return ((0, jsx_runtime_1.jsx)(UNSAFE_CardFlexView_1.CardFlexView, { ...cardViewProps, children: (context) => {
-                    return (0, jsx_runtime_1.jsx)(cardViewItem_1.CardViewItem, { context: context, itemTemplate: itemTemplate });
-                } }));
+            return ((0, jsx_runtime_1.jsx)(SelectionContext_1.SelectionContext.Provider, { value: selectInfo, children: (0, jsx_runtime_1.jsx)(UNSAFE_CardFlexView_1.CardFlexView, { ...cardViewProps, children: itemRenderer }) }));
         }
     };
     const CardViewImpl = ({ columns = 'auto', data = null, focusBehavior = 'card', gutterSize = 'sm', initialAnimation = 'slideUp', scrollPolicyOptions = { fetchSize: 25 }, selectionMode = 'none', reorderable = { items: 'disabled' }, ...rest }) => {
@@ -55,7 +59,7 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
         };
         return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: props.id, ref: rootRef, children: (0, jsx_runtime_1.jsx)(CardViewPreactWrapper, { addBusyState: addBusyState, isClickthroughDisabled: isClickthroughDisabled, ...props }) }));
     };
-    exports.CardView = (0, ojvcomponent_1.registerCustomElement)('oj-c-card-view', CardViewImpl, "CardView", { "properties": { "currentItem": { "type": "any", "readOnly": true, "writeback": true }, "data": { "type": "DataProvider|null" }, "gutterSize": { "type": "string", "enumValues": ["xs", "sm", "md", "lg", "xl"] }, "scrollPolicyOptions": { "type": "object", "properties": { "fetchSize": { "type": "number" }, "scroller": { "type": "string" } } }, "selected": { "type": "object", "writeback": true }, "selectionMode": { "type": "string", "enumValues": ["none", "multiple", "single"] }, "initialAnimation": { "type": "string", "enumValues": ["slideUp", "slideDown"] }, "focusBehavior": { "type": "string", "enumValues": ["content", "card"] }, "columns": { "type": "number|string" }, "reorderable": { "type": "object", "properties": { "items": { "type": "string", "enumValues": ["disabled", "enabled"] } } } }, "slots": { "noData": { "data": {} }, "itemTemplate": { "data": {} } }, "events": { "ojReorder": {} }, "extension": { "_WRITEBACK_PROPS": ["currentItem", "selected"], "_READ_ONLY_PROPS": ["currentItem"], "_OBSERVED_GLOBAL_PROPS": ["aria-label", "aria-labelledby", "id"] } }, { "columns": "auto", "data": null, "focusBehavior": "card", "gutterSize": "sm", "initialAnimation": "slideUp", "scrollPolicyOptions": { "fetchSize": 25 }, "selectionMode": "none", "reorderable": { "items": "disabled" } }, {
+    exports.CardView = (0, ojvcomponent_1.registerCustomElement)('oj-c-card-view', CardViewImpl, "CardView", { "properties": { "currentItem": { "type": "string|number", "readOnly": true, "writeback": true }, "data": { "type": "DataProvider|null" }, "gutterSize": { "type": "string", "enumValues": ["xs", "sm", "md", "lg", "xl"] }, "scrollPolicyOptions": { "type": "object", "properties": { "fetchSize": { "type": "number" }, "scroller": { "type": "string" } } }, "selected": { "type": "object", "writeback": true }, "selectionMode": { "type": "string", "enumValues": ["none", "multiple", "single", "singleRequired"] }, "initialAnimation": { "type": "string", "enumValues": ["slideUp", "slideDown"] }, "focusBehavior": { "type": "string", "enumValues": ["content", "card"] }, "columns": { "type": "number|string" }, "reorderable": { "type": "object", "properties": { "items": { "type": "string", "enumValues": ["disabled", "enabled"] } } } }, "slots": { "noData": { "data": {} }, "itemTemplate": { "data": {} }, "skeletonTemplate": { "data": {} } }, "events": { "ojReorder": {} }, "extension": { "_WRITEBACK_PROPS": ["currentItem", "selected"], "_READ_ONLY_PROPS": ["currentItem"], "_OBSERVED_GLOBAL_PROPS": ["aria-label", "aria-labelledby", "id"] } }, { "columns": "auto", "data": null, "focusBehavior": "card", "gutterSize": "sm", "initialAnimation": "slideUp", "scrollPolicyOptions": { "fetchSize": 25 }, "selectionMode": "none", "reorderable": { "items": "disabled" } }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
     });
     const isEventClickthroughDisabled = function (event, rootElement) {

package/oj-c/card-view/cardViewItem.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "preact/jsx-runtime", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode"], function (require, exports, jsx_runtime_1, UNSAFE_useTabbableMode_1) {
+define(["require", "exports", "preact/jsx-runtime", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "../hooks/PRIVATE_useSelectionContext/ItemKeyContext"], function (require, exports, jsx_runtime_1, UNSAFE_useTabbableMode_1, ItemKeyContext_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.CardViewItem = void 0;
@@ -9,7 +9,7 @@ define(["require", "exports", "preact/jsx-runtime", "@oracle/oraclejet-preact/ho
             data: context.data.data,
             item: context.data
         };
-        return ((0, jsx_runtime_1.jsx)(UNSAFE_useTabbableMode_1.TabbableModeContext.Provider, { value: { isTabbable }, children: itemTemplate && itemTemplate(itemContext) }));
+        return ((0, jsx_runtime_1.jsx)(ItemKeyContext_1.ItemKeyContext.Provider, { value: context.metadata.key, children: (0, jsx_runtime_1.jsx)(UNSAFE_useTabbableMode_1.TabbableModeContext.Provider, { value: { isTabbable }, children: itemTemplate && itemTemplate(itemContext) }) }));
     };
     exports.CardViewItem = CardViewItem;
 });

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

@@ -1,7 +1,7 @@
 {
   "name": "card-view",
-  "version": "17.1.3",
-  "jetVersion": "^17.1.3",
+  "version": "18.0.0",
+  "jetVersion": "^18.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -29,7 +29,7 @@
       ]
     },
     "webelement": {
-      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1710/cpwdtsdoc/classes/CardViewWebElement.html"
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet/cpwdtsdoc/classes/CardViewWebElement.html"
     }
   },
   "propertyLayout": [
@@ -53,7 +53,7 @@
   "since": "17.0.0",
   "properties": {
     "currentItem": {
-      "type": "any",
+      "type": "string|number",
       "description": "The item that currently has keyboard focus",
       "displayName": "Current Item",
       "help": "#currentItem",
@@ -129,12 +129,17 @@
         "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, CardView will also ensure that an item is selected at all time.",
+          "displayName": "Single Required"
         }
       },
       "enumValues": [
         "none",
         "multiple",
-        "single"
+        "single",
+        "singleRequired"
       ],
       "value": "none"
     },
@@ -257,6 +262,14 @@
           "type": "boolean"
         }
       }
+    },
+    "skeletonTemplate": {
+      "description": "The skeletonTemplate slot is used to specify the template for rendering each skeleton while waiting for data during initial load as well as load more on scroll. See the Help documentation for more information.",
+      "displayName": "skeletonTemplate",
+      "help": "#skeletonTemplate",
+      "maxItems": 1,
+      "templateSlotRenderType": "RenderSkeletonTemplate",
+      "data": {}
     }
   },
   "events": {

package/oj-c/card-view/useCardViewPreact.js

@@ -1,16 +1,15 @@
-define(["require", "exports", "preact/hooks", "../utils/UNSAFE_keyUtils/keySetUtils", "../hooks/UNSAFE_useListData/useListData"], function (require, exports, hooks_1, keySetUtils_1, useListData_1) {
+define(["require", "exports", "preact/hooks", "../hooks/UNSAFE_useListData/useListData", "../utils/PRIVATE_collectionUtils/collectionUtils"], function (require, exports, hooks_1, useListData_1, collectionUtils_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useCardViewPreact = void 0;
-    const useCardViewPreact = ({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, data: propData, gutterSize, focusBehavior, onCurrentItemChanged, selected, onSelectedChanged, scrollPolicyOptions, selectionMode, initialAnimation, columns: corePackColumns, reorderable, onOjReorder }, addBusyState, isClickthroughDisabled) => {
+    const useCardViewPreact = ({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, data: propData, gutterSize, focusBehavior, selected, onSelectedChanged, scrollPolicyOptions, selectionMode, initialAnimation, columns: corePackColumns, reorderable, onOjReorder, skeletonTemplate }, addBusyState, isClickthroughDisabled) => {
         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 preactColumns = Number.isInteger(corePackColumns) ? corePackColumns : undefined;
+        const selectedKeys = (0, collectionUtils_1.getSelectedKeys)(selected, listData, selectionMode, onSelectedChanged);
         (0, hooks_1.useEffect)(() => {
             if (listDataState.status === 'loading') {
                 resolveBusyState.current = addBusyState('list data is in fetch state');
@@ -22,9 +21,8 @@ define(["require", "exports", "preact/hooks", "../utils/UNSAFE_keyUtils/keySetUt
                 }
             }
         }, [listDataState.status]);
-        const handleOnCurrentItemChanged = (detail) => {
-            setCurrentItem(detail.value);
-            onCurrentItemChanged && onCurrentItemChanged(detail.value);
+        const handleOnSelectionChange = (detail) => {
+            (0, collectionUtils_1.handleOnSelectionChanged)(selectionMode, detail, onSelectedChanged, isClickthroughDisabled);
         };
         const viewportConfig = scrollPolicyOptions?.scroller
             ? {
@@ -51,20 +49,14 @@ define(["require", "exports", "preact/hooks", "../utils/UNSAFE_keyUtils/keySetUt
                 'aria-label': ariaLabel,
                 'aria-labelledby': ariaLabelledBy,
                 data: listData ? listData.data : null,
-                currentKey: currentItem,
                 getRowKey,
                 gutterSize,
-                onCurrentKeyChange: handleOnCurrentItemChanged,
                 hasMore: listData ? listData.sizePrecision === 'atLeast' : false,
                 onLoadMore,
                 focusBehavior,
-                onSelectionChange: (detail) => {
-                    onSelectedChanged &&
-                        !isClickthroughDisabled(detail.target) &&
-                        onSelectedChanged((0, keySetUtils_1.keysToKeySet)(detail.value));
-                },
+                onSelectionChange: handleOnSelectionChange,
                 selectedKeys,
-                selectionMode,
+                selectionMode: selectionMode === 'singleRequired' ? 'single' : selectionMode,
                 initialAnimation,
                 columns: preactColumns,
                 viewportConfig,
@@ -72,7 +64,8 @@ define(["require", "exports", "preact/hooks", "../utils/UNSAFE_keyUtils/keySetUt
                     ? (detail) => {
                         onOjReorder && onOjReorder(detail);
                     }
-                    : null
+                    : null,
+                skeletonRenderer: skeletonTemplate
             }
         };
     };

package/oj-c/checkbox/__webdriver__/CheckboxWebElement.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxWebElement = void 0;
-var CheckboxWebElementBase_1 = require("./CheckboxWebElementBase");
-var selenium_webdriver_1 = require("selenium-webdriver");
+const CheckboxWebElementBase_1 = require("./CheckboxWebElementBase");
+const selenium_webdriver_1 = require("selenium-webdriver");
 /**
  * The component WebElement for [oj-c-checkbox](../../../oj-c/docs/oj.Checkbox.html).
  * Do not instantiate this class directly, instead, use

package/oj-c/checkbox/__webdriver__/CheckboxWebElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxWebElement.js","sourceRoot":"","sources":["CheckboxWebElement.ts"],"names":[],"mappings":";;;AAAA,mEAAkE;AAClE,yDAAoD;AAEpD;;;;GAIG;AACH,MAAa,kBAAmB,SAAQ,+CAAsB;IAC5D;;;;OAIG;IACI,KAAK,CAAC,WAAW,CAAC,KAAc;QACrC,uCAAuC;QACvC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC,EAAE,CAAC;YACnC,2DAA2D;YAC3D,MAAM,IAAI,0BAAK,CAAC,2BAA2B,CACzC,iFAAiF,CAClF,CAAC;QACJ,CAAC;QAED,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAClC,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,cAAc;QAC1B,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;QAC5C,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;QAC5C,OAAO,CAAC,CAAC,UAAU,IAAI,UAAU,CAAC,CAAC;IACrC,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,WAAW,CAAC,KAAqB;QAC7C,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,uBAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;QACtD,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,WAAW,CAAC,uBAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;QACvD,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,UAAU,EAAE,CAAC;QAEzC,IAAI,OAAO,KAAK,KAAK,EAAE,CAAC;YACtB,MAAM,KAAK,CAAC,QAAQ,CAAC,wBAAG,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;CACF;AAxCD,gDAwCC","sourcesContent":["import { CheckboxWebElementBase } from './CheckboxWebElementBase';\nimport { By, Key, error } from 'selenium-webdriver';\n\n/**\n * The component WebElement for [oj-c-checkbox](../../../oj-c/docs/oj.Checkbox.html).\n * Do not instantiate this class directly, instead, use\n * [findCheckbox](../functions/findCheckbox.html).\n */\nexport class CheckboxWebElement extends CheckboxWebElementBase {\n  /**\n   * Sets the value of \"value\" property for the Checkbox component\n   * @param value The value to set for \"value\"\n   * @throws {ElementNotInteractableError} if the API is called when the control is readonly or disabled\n   */\n  public async changeValue(value: boolean): Promise<void> {\n    // Check if the control is interactable\n    if (!(await this.isInteractable())) {\n      // Cannot interact when the control is disabled or readonly\n      throw new error.ElementNotInteractableError(\n        'oj-c-checkbox: Value cannot be changed when the control is disabled or readonly'\n      );\n    }\n\n    await this.whenBusyContextReady();\n    await this.selectValue(value);\n  }\n\n  /**\n   * Checks if the Checkbox is in interactable state\n   */\n  private async isInteractable(): Promise<boolean> {\n    const isReadonly = await this.getReadonly();\n    const isDisabled = await this.getDisabled();\n    return !(isReadonly || isDisabled);\n  }\n\n  /**\n   * Toggle Checkbox value if needed\n   */\n  private async selectValue(value: boolean | null): Promise<void> {\n    const label = await this.findElement(By.css('label'));\n    const input = await label.findElement(By.css('input'));\n    const checked = await input.isSelected();\n\n    if (checked !== value) {\n      await label.sendKeys(Key.SPACE);\n    }\n  }\n}\n"]}
+{"version":3,"file":"CheckboxWebElement.js","sourceRoot":"","sources":["CheckboxWebElement.ts"],"names":[],"mappings":";;;AAAA,qEAAkE;AAClE,2DAAoD;AAEpD;;;;GAIG;AACH,MAAa,kBAAmB,SAAQ,+CAAsB;IAC5D;;;;OAIG;IACI,KAAK,CAAC,WAAW,CAAC,KAAc;QACrC,uCAAuC;QACvC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC,EAAE,CAAC;YACnC,2DAA2D;YAC3D,MAAM,IAAI,0BAAK,CAAC,2BAA2B,CACzC,iFAAiF,CAClF,CAAC;QACJ,CAAC;QAED,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAClC,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,cAAc;QAC1B,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;QAC5C,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;QAC5C,OAAO,CAAC,CAAC,UAAU,IAAI,UAAU,CAAC,CAAC;IACrC,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,WAAW,CAAC,KAAqB;QAC7C,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,uBAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;QACtD,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,WAAW,CAAC,uBAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;QACvD,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,UAAU,EAAE,CAAC;QAEzC,IAAI,OAAO,KAAK,KAAK,EAAE,CAAC;YACtB,MAAM,KAAK,CAAC,QAAQ,CAAC,wBAAG,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;CACF;AAxCD,gDAwCC","sourcesContent":["import { CheckboxWebElementBase } from './CheckboxWebElementBase';\nimport { By, Key, error } from 'selenium-webdriver';\n\n/**\n * The component WebElement for [oj-c-checkbox](../../../oj-c/docs/oj.Checkbox.html).\n * Do not instantiate this class directly, instead, use\n * [findCheckbox](../functions/findCheckbox.html).\n */\nexport class CheckboxWebElement extends CheckboxWebElementBase {\n  /**\n   * Sets the value of \"value\" property for the Checkbox component\n   * @param value The value to set for \"value\"\n   * @throws {ElementNotInteractableError} if the API is called when the control is readonly or disabled\n   */\n  public async changeValue(value: boolean): Promise<void> {\n    // Check if the control is interactable\n    if (!(await this.isInteractable())) {\n      // Cannot interact when the control is disabled or readonly\n      throw new error.ElementNotInteractableError(\n        'oj-c-checkbox: Value cannot be changed when the control is disabled or readonly'\n      );\n    }\n\n    await this.whenBusyContextReady();\n    await this.selectValue(value);\n  }\n\n  /**\n   * Checks if the Checkbox is in interactable state\n   */\n  private async isInteractable(): Promise<boolean> {\n    const isReadonly = await this.getReadonly();\n    const isDisabled = await this.getDisabled();\n    return !(isReadonly || isDisabled);\n  }\n\n  /**\n   * Toggle Checkbox value if needed\n   */\n  private async selectValue(value: boolean | null): Promise<void> {\n    const label = await this.findElement(By.css('label'));\n    const input = await label.findElement(By.css('input'));\n    const checked = await input.isSelected();\n\n    if (checked !== value) {\n      await label.sendKeys(Key.SPACE);\n    }\n  }\n}\n"]}