@oracle/oraclejet-core-pack 14.0.0

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

@@ -0,0 +1,123 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+define(["require", "exports", "oj-c/editable-value/UNSAFE_useEditableValue/useEditableValue", "oj-c/editable-value/UNSAFE_useValidators/useValidators", "oj-c/hooks/UNSAFE_useListData/useListData", "oj-c/select-common/UNSAFE_useDataProviderListeners/useDataProviderListeners", "oj-c/select-common/UNSAFE_useWrapDataProvider/useWrapDataProvider", "oj-c/select-common/UNSAFE_useWrapValueState/useWrapValueState", "oj-c/select-common/utils/utils", "ojs/ojdataprovider", "preact/hooks", "./useSyncValueAndValueItems", "./useValueItems"], function (require, exports, useEditableValue_1, useValidators_1, useListData_1, useDataProviderListeners_1, useWrapDataProvider_1, useWrapValueState_1, utils_1, ojdataprovider_1, hooks_1, useSyncValueAndValueItems_1, useValueItems_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSelectMultiplePreact = void 0;
+    function useSelectMultiplePreact(_a, addBusyState) {
+        var { data: propData, disabled, displayOptions, itemText, labelEdge, labelHint, labelStartWidth, messagesCustom, placeholder, readonly, required, textAlign, userAssistanceDensity, value: propValue, valueItems: propValueItems, virtualKeyboard, onMessagesCustomChanged, onValidChanged, onValueChanged, onValueItemsChanged } = _a, otherProps = __rest(_a, ["data", "disabled", "displayOptions", "itemText", "labelEdge", "labelHint", "labelStartWidth", "messagesCustom", "placeholder", "readonly", "required", "textAlign", "userAssistanceDensity", "value", "valueItems", "virtualKeyboard", "onMessagesCustomChanged", "onValidChanged", "onValueChanged", "onValueItemsChanged"]);
+        const [filterCriterion, setFilterCriterion] = (0, hooks_1.useState)(undefined);
+        const [isLoading, setIsLoading] = (0, hooks_1.useState)(false);
+        const { valueItems, setValueItems, preactValueItems: arItemContexts } = (0, useValueItems_1.useValueItems)(propValueItems, onValueItemsChanged);
+        const [preactValueItems, setPreactValueItems] = (0, hooks_1.useState)(arItemContexts);
+        (0, hooks_1.useEffect)(() => {
+            setPreactValueItems(arItemContexts);
+        }, [arItemContexts]);
+        const { wrapValueState } = (0, useWrapValueState_1.useWrapValueState)({
+            arItemContexts,
+            isLoading,
+            preactValueItems,
+            setPreactValueItems
+        });
+        const { methods, onCommitValue, setValue, textFieldProps, value } = (0, useEditableValue_1.useEditableValue)({
+            ariaDescribedBy: otherProps['aria-describedby'],
+            displayOptions,
+            messagesCustom,
+            required,
+            value: propValue,
+            addBusyState,
+            onMessagesCustomChanged,
+            onValidChanged,
+            onValueChanged,
+            wrapValueState
+        });
+        const { ariaDescribedBy, messages } = textFieldProps;
+        const hasNoValue = value === null || (value instanceof Set && value.size === 0);
+        const dataProvider = (0, useWrapDataProvider_1.useWrapDataProvider)(propData);
+        const [valueToSync, setValueToSync] = (0, hooks_1.useState)(value);
+        const [valueItemsToSync, setValueItemsToSync] = (0, hooks_1.useState)(valueItems);
+        (0, hooks_1.useEffect)(() => {
+            setValueToSync(value);
+        }, [value]);
+        (0, hooks_1.useEffect)(() => {
+            setValueItemsToSync(valueItems);
+        }, [valueItems]);
+        (0, useDataProviderListeners_1.useDataProviderListeners)({
+            dataProvider,
+            setValue: setValue,
+            setValueToSync: setValueToSync,
+            setValueItemsToSync,
+            value: value,
+            valueItems
+        });
+        (0, useSyncValueAndValueItems_1.useSyncValueAndValueItems)({
+            addBusyState,
+            dataProvider: dataProvider,
+            setIsLoading,
+            setValue: setValue,
+            setValueItems,
+            value: valueToSync,
+            valueItems: valueItemsToSync
+        });
+        const [listDataState, onLoadRange] = (0, useListData_1.useListData)(dataProvider, {
+            filterCriterion,
+            initialRowsFetched: 0
+        });
+        const onCommit = (0, hooks_1.useCallback)((detail) => __awaiter(this, void 0, void 0, function* () {
+            const validationResult = yield onCommitValue((detail.value && detail.value.size > 0 ? detail.value : utils_1.DEFAULT_VALUE));
+            if (validationResult === useValidators_1.ValidationResult.INVALID) {
+                setPreactValueItems(undefined);
+            }
+        }), [onCommitValue]);
+        const onFilter = (0, hooks_1.useCallback)(({ searchText }) => {
+            const fc = searchText && searchText.length > 0
+                ? ojdataprovider_1.FilterFactory.getFilter({ filterDef: { text: searchText } })
+                : undefined;
+            setFilterCriterion(fc);
+        }, []);
+        return {
+            methods,
+            selectMultipleProps: {
+                ariaDescribedBy,
+                data: listDataState.data,
+                isDisabled: disabled,
+                isLoading,
+                isReadonly: readonly,
+                isRequired: required,
+                isRequiredShown: required && hasNoValue,
+                itemText,
+                label: labelHint,
+                labelEdge,
+                labelStartWidth,
+                messages,
+                onCommit,
+                onFilter,
+                onLoadRange,
+                placeholder,
+                textAlign,
+                userAssistanceDensity,
+                valueItems: preactValueItems,
+                virtualKeyboard
+            }
+        };
+    }
+    exports.useSelectMultiplePreact = useSelectMultiplePreact;
+});

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

@@ -0,0 +1,125 @@
+define(["require", "exports", "@oracle/oraclejet-preact/utils/UNSAFE_logger", "oj-c/select-common/utils/utils", "preact/hooks"], function (require, exports, UNSAFE_logger_1, utils_1, hooks_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSyncValueAndValueItems = void 0;
+    function useSyncValueAndValueItems({ addBusyState, dataProvider, setIsLoading, setValue, setValueItems, value, valueItems }) {
+        const prevValueRef = (0, hooks_1.useRef)(value);
+        const prevValueItemsRef = (0, hooks_1.useRef)(valueItems);
+        const hasValue = value && value instanceof Set && value.size > 0;
+        const hasValueItems = valueItems && valueItems.size > 0;
+        const latestFetchRef = (0, hooks_1.useRef)(null);
+        const syncValueItemsToValue = (0, hooks_1.useCallback)(() => {
+            if (!hasValue) {
+                if (hasValueItems) {
+                    setValueItems(utils_1.DEFAULT_VALUE_ITEMS);
+                }
+                return;
+            }
+            const arValues = Array.from(value.keys());
+            const valuesToFetch = arValues.reduce((accum, currKey) => {
+                if (!hasValueItems || !valueItems.has(currKey)) {
+                    accum.push(currKey);
+                }
+                return accum;
+            }, []);
+            if (valuesToFetch.length === 0) {
+                const newValItems = new Map();
+                value.forEach((currKey) => {
+                    newValItems.set(currKey, valueItems.get(currKey));
+                });
+                setValueItems(newValItems);
+                return;
+            }
+            setIsLoading(true);
+            const resolveBusyState = addBusyState('useSyncValueItems: calling fetchByKeys');
+            const latestFetch = {};
+            latestFetchRef.current = latestFetch;
+            dataProvider
+                .fetchByKeys({ keys: new Set(valuesToFetch) })
+                .then((fbkResults) => {
+                if (latestFetch === latestFetchRef.current) {
+                    const newValueItems = handleFetchByKeysResults(value, valueItems, fbkResults.results);
+                    setValueItems(newValueItems);
+                }
+            })
+                .catch((reason) => {
+                if (latestFetch === latestFetchRef.current) {
+                    UNSAFE_logger_1.Logger.error(`SelectMultiple: fetchByKeys promise rejected: ${reason}`);
+                }
+            })
+                .finally(() => {
+                if (latestFetch === latestFetchRef.current) {
+                    setIsLoading(false);
+                }
+                resolveBusyState();
+            });
+        }, [dataProvider, hasValue, hasValueItems, value, valueItems]);
+        const syncValueToValueItems = (0, hooks_1.useCallback)(() => {
+            if (!hasValueItems) {
+                if (hasValue) {
+                    setValue(utils_1.DEFAULT_VALUE);
+                }
+                return;
+            }
+            const arValueItemsKeys = Array.from(valueItems.keys());
+            const valueItemsKeys = new Set(arValueItemsKeys);
+            if (!value || !(value instanceof Set) || value.size !== valueItemsKeys.size) {
+                setValue(valueItemsKeys);
+                return;
+            }
+            const arValueKeys = Array.from(value.keys());
+            const isDifferent = arValueItemsKeys.some((key, index) => key !== arValueKeys[index]);
+            if (isDifferent) {
+                setValue(valueItemsKeys);
+            }
+        }, [hasValue, hasValueItems, value, valueItems]);
+        (0, hooks_1.useEffect)(() => {
+            if (hasValue) {
+                syncValueItemsToValue();
+            }
+            else if (hasValueItems) {
+                syncValueToValueItems();
+            }
+        }, []);
+        (0, hooks_1.useEffect)(() => {
+            if (value !== prevValueRef.current && valueItems !== prevValueItemsRef.current) {
+                prevValueRef.current = value;
+                prevValueItemsRef.current = valueItems;
+                if (value) {
+                    syncValueItemsToValue();
+                }
+                else {
+                    syncValueToValueItems();
+                }
+            }
+            else if (value !== prevValueRef.current) {
+                prevValueRef.current = value;
+                syncValueItemsToValue();
+            }
+            else if (valueItems !== prevValueItemsRef.current) {
+                prevValueItemsRef.current = valueItems;
+                syncValueToValueItems();
+            }
+        }, [value, valueItems]);
+    }
+    exports.useSyncValueAndValueItems = useSyncValueAndValueItems;
+    function handleFetchByKeysResults(value, valueItems, fetchByKeysResults) {
+        const arKeys = Array.from(value.keys());
+        return arKeys.reduce((accumMap, currKey) => {
+            if (valueItems && valueItems.has(currKey)) {
+                accumMap.set(currKey, valueItems.get(currKey));
+                return accumMap;
+            }
+            const item = fetchByKeysResults.get(currKey);
+            if (!item) {
+                throw new Error(`oj-c-select-multiple: could not fetch data for key ${currKey}`);
+            }
+            accumMap.set(currKey, {
+                key: currKey,
+                data: item.data,
+                metadata: item.metadata ? item.metadata : { currKey }
+            });
+            return accumMap;
+        }, new Map());
+    }
+});

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

@@ -0,0 +1,22 @@
+define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useUncontrolledState", "preact/hooks"], function (require, exports, UNSAFE_useUncontrolledState_1, hooks_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useValueItems = void 0;
+    function useValueItems(propValueItems, onValueItemsChanged) {
+        const [valueItems, setValueItems] = (0, UNSAFE_useUncontrolledState_1.useUncontrolledState)(propValueItems, onValueItemsChanged);
+        (0, hooks_1.useEffect)(() => {
+            if (valueItems !== propValueItems) {
+                setValueItems(propValueItems);
+            }
+        }, [propValueItems]);
+        const preactValueItems = (0, hooks_1.useMemo)(() => {
+            return valueItems ? Array.from(valueItems.values()) : undefined;
+        }, [valueItems]);
+        return {
+            valueItems,
+            setValueItems,
+            preactValueItems
+        };
+    }
+    exports.useValueItems = useValueItems;
+});

package/oj-c/select-multiple.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "./select-multiple/select-multiple"], function (require, exports, select_multiple_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SelectMultiple = void 0;
+    Object.defineProperty(exports, "SelectMultiple", { enumerable: true, get: function () { return select_multiple_1.SelectMultiple; } });
+});

package/oj-c/select-single/__dev__/select-single.doc.mdx

@@ -0,0 +1,30 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import 'oj-c/select-single';
+
+<Meta title="SelectSingle" component="oj-c-select-single" />
+
+# Select Multiple
+
+The `oj-c-select-single` component provides support for multi-select and search filtering.
+
+## Import
+
+```js
+//To typecheck the element APIs, import as below.
+import { CSelectSingleElement } from 'oj-c/select-single';
+
+//For the transpiled javascript to load the element's module, import as below
+import 'oj-c/select-single';
+```
+
+## Usage
+
+Here's how to implement a basic `oj-c-select-single`.
+
+<Canvas>
+  <Story id="form-selectsingle--basic" name="Basic" height={350} />
+</Canvas>
+
+## Props
+
+<ArgsTable of="oj-c-select-single" />

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

@@ -0,0 +1,32 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+exports.SelectSingleWebElement = void 0;
+var SelectSingleWebElementBase_1 = require("./SelectSingleWebElementBase");
+/**
+ * The component WebElement for [oj-c-select-single](../../../oj-c/docs/oj.SelectSingle.html).
+ * Do not instantiate this class directly, instead, use
+ * [findSelectSingle](../modules.html#findSelectSingle).
+ */
+var SelectSingleWebElement = /** @class */ (function (_super) {
+    __extends(SelectSingleWebElement, _super);
+    function SelectSingleWebElement() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return SelectSingleWebElement;
+}(SelectSingleWebElementBase_1.SelectSingleWebElementBase));
+exports.SelectSingleWebElement = SelectSingleWebElement;

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

@@ -0,0 +1,258 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+exports.SelectSingleWebElementBase = void 0;
+var elements_1 = require("@oracle/oraclejet-webdriver/elements");
+/**
+ * This is the base class for oj-c-select-single WebElement, and is generated from the
+ * component's metadata. Do not modify these contents since they'll be replaced
+ * during the next generation.
+ * Put overrides into the WebElements's subclass, SelectSingleWebElement.ts.
+ */
+var SelectSingleWebElementBase = /** @class */ (function (_super) {
+    __extends(SelectSingleWebElementBase, _super);
+    function SelectSingleWebElementBase() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Gets the value of <code>containerReadonly</code> property.
+     * Specifies whether an ancestor container, like oj-form-layout, is readonly.
+     * @return The value of <code>containerReadonly</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getContainerReadonly = function () {
+        return this.getProperty('containerReadonly');
+    };
+    /**
+     * Gets the value of <code>data</code> property.
+     * Specifies whether the component is disabled.
+     * @return The value of <code>data</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getData = function () {
+        return this.getProperty('data');
+    };
+    /**
+     * Gets the value of <code>disabled</code> property.
+     * Specifies whether the component is disabled.
+     * @return The value of <code>disabled</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getDisabled = function () {
+        return this.getProperty('disabled');
+    };
+    /**
+     * Gets the value of <code>displayOptions</code> property.
+     * Display options for auxiliary content that determines whether or not it should be displayed.
+     * @return The value of <code>displayOptions</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getDisplayOptions = function () {
+        return this.getProperty('displayOptions');
+    };
+    /**
+     * Gets the value of <code>help</code> property.
+     * Form component help information.
+     * @return The value of <code>help</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getHelp = function () {
+        return this.getProperty('help');
+    };
+    /**
+     * Gets the value of <code>helpHints</code> property.
+     * The helpHints object contains a definition property and a source property.
+     * @return The value of <code>helpHints</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getHelpHints = function () {
+        return this.getProperty('helpHints');
+    };
+    /**
+     * Gets the value of <code>itemText</code> property.
+     * Specifies how to get the text string to render for a data item.
+     * @return The value of <code>itemText</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getItemText = function () {
+        return this.getProperty('itemText');
+    };
+    /**
+     * Gets the value of <code>labelEdge</code> property.
+     * Specifies how the label is positioned for the component
+     * @return The value of <code>labelEdge</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getLabelEdge = function () {
+        return this.getProperty('labelEdge');
+    };
+    /**
+     * Gets the value of <code>labelHint</code> property.
+     * Represents a hint for rendering a label on the component.
+     * @return The value of <code>labelHint</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getLabelHint = function () {
+        return this.getProperty('labelHint');
+    };
+    /**
+     * Gets the value of <code>labelStartWidth</code> property.
+     * The width of the label when labelEdge is 'start'
+     * @return The value of <code>labelStartWidth</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getLabelStartWidth = function () {
+        return this.getProperty('labelStartWidth');
+    };
+    /**
+     * Gets the value of <code>labelWrapping</code> property.
+     * Should the labels wrap or truncate when there is not enough available space.
+     * @return The value of <code>labelWrapping</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getLabelWrapping = function () {
+        return this.getProperty('labelWrapping');
+    };
+    /**
+     * Sets the value of <code>messagesCustom</code> property.
+     * List of custom component messages
+     * @param messagesCustom The value to set for <code>messagesCustom</code>
+     *
+     */
+    SelectSingleWebElementBase.prototype.changeMessagesCustom = function (messagesCustom) {
+        return this.setProperty('messagesCustom', messagesCustom);
+    };
+    /**
+     * Gets the value of <code>messagesCustom</code> property.
+     * List of custom component messages
+     * @return The value of <code>messagesCustom</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getMessagesCustom = function () {
+        return this.getProperty('messagesCustom');
+    };
+    /**
+     * Gets the value of <code>placeholder</code> property.
+     * The placeholder text to set on the element.
+     * @return The value of <code>placeholder</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getPlaceholder = function () {
+        return this.getProperty('placeholder');
+    };
+    /**
+     * Gets the value of <code>readonly</code> property.
+     * Whether the component is readonly
+     * @return The value of <code>readonly</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getReadonly = function () {
+        return this.getProperty('readonly');
+    };
+    /**
+     * Gets the value of <code>required</code> property.
+     * Specifies whether or not the component is required.
+     * @return The value of <code>required</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getRequired = function () {
+        return this.getProperty('required');
+    };
+    /**
+     * Gets the value of <code>requiredMessageDetail</code> property.
+     * Overrides the default Required error message.
+     * @return The value of <code>requiredMessageDetail</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getRequiredMessageDetail = function () {
+        return this.getProperty('requiredMessageDetail');
+    };
+    /**
+     * Gets the value of <code>textAlign</code> property.
+     * Specifies how the text is aligned within the text field
+     * @return The value of <code>textAlign</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getTextAlign = function () {
+        return this.getProperty('textAlign');
+    };
+    /**
+     * Gets the value of <code>userAssistanceDensity</code> property.
+     * Specifies the density of the form component's user assistance presentation.
+     * @return The value of <code>userAssistanceDensity</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getUserAssistanceDensity = function () {
+        return this.getProperty('userAssistanceDensity');
+    };
+    /**
+     * Sets the value of <code>value</code> property.
+     * The value of the component.
+     * @param value The value to set for <code>value</code>
+     *
+     */
+    SelectSingleWebElementBase.prototype.changeValue = function (value) {
+        return this.setProperty('value', value);
+    };
+    /**
+     * Gets the value of <code>value</code> property.
+     * The value of the component.
+     * @return The value of <code>value</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getValue = function () {
+        return this.getProperty('value');
+    };
+    /**
+     * Sets the value of <code>valueItem</code> property.
+     * The current value of the element and its associated data.
+     * @param valueItem The value to set for <code>valueItem</code>
+     *
+     */
+    SelectSingleWebElementBase.prototype.changeValueItem = function (valueItem) {
+        return this.setProperty('valueItem', valueItem);
+    };
+    /**
+     * Gets the value of <code>valueItem</code> property.
+     * The current value of the element and its associated data.
+     * @return The value of <code>valueItem</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getValueItem = function () {
+        return this.getProperty('valueItem');
+    };
+    /**
+     * Gets the value of <code>virtualKeyboard</code> property.
+     * The type of virtual keyboard to display for entering a value on mobile browsers
+     * @return The value of <code>virtualKeyboard</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getVirtualKeyboard = function () {
+        return this.getProperty('virtualKeyboard');
+    };
+    /**
+     * Gets the value of <code>valid</code> property.
+     * Specifies how the valid state of the component
+     * @return The value of <code>valid</code> property.
+     *
+     */
+    SelectSingleWebElementBase.prototype.getValid = function () {
+        return this.getProperty('valid');
+    };
+    return SelectSingleWebElementBase;
+}(elements_1.OjWebElement));
+exports.SelectSingleWebElementBase = SelectSingleWebElementBase;

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

@@ -0,0 +1,74 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+exports.__esModule = true;
+exports.findSelectSingle = exports.SelectSingleWebElement = void 0;
+var oraclejet_webdriver_1 = require("@oracle/oraclejet-webdriver");
+var SelectSingleWebElement_1 = require("./SelectSingleWebElement");
+exports.SelectSingleWebElement = SelectSingleWebElement_1.SelectSingleWebElement;
+/**
+ * Retrieve an instance of [[SelectSingleWebElement]].
+ * @example
+ * ```javascript
+ * import { findSelectSingle } from '@oracle/oraclejet-core-pack/webdriver';
+ * const el = await findSelectSingle(driver, By.id('my-oj-c-select-single'));
+ * ```
+ * @param driver A WebDriver/WebElement instance from where the element will be
+ * searched. If WebDriver is passed, the element will be searched globally in the
+ * document. If WebElement is passed, the search will be relative to this element.
+ * @param by The locator with which to find the element
+ */
+function findSelectSingle(driver, by) {
+    return __awaiter(this, void 0, void 0, function () {
+        var webEl, tagName;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, driver.findElement(by)];
+                case 1:
+                    webEl = _a.sent();
+                    if (!!(webEl instanceof SelectSingleWebElement_1.SelectSingleWebElement)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, webEl.getTagName()];
+                case 2:
+                    tagName = _a.sent();
+                    throw Error("findSelectSingle(".concat(by, ") created ").concat(webEl.constructor.name, " for <").concat(tagName, ">, but expected ").concat(SelectSingleWebElement_1.SelectSingleWebElement.name));
+                case 3: return [2 /*return*/, webEl];
+            }
+        });
+    });
+}
+exports.findSelectSingle = findSelectSingle;
+(0, oraclejet_webdriver_1.register)('oj-c-select-single', SelectSingleWebElement_1.SelectSingleWebElement);