@oracle/oraclejet-core-pack 16.1.4 → 17.0.0

package/oj-c/text-area/component.json

@@ -1,7 +1,7 @@
 {
   "name": "text-area",
-  "version": "16.1.4",
-  "jetVersion": "^16.1.4",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -10,7 +10,7 @@
     "CTextAreaElement"
   ],
   "displayName": "TextArea",
-  "description": "A text area displays a field that allows a user to enter a multi-line text value",
+  "description": "A text area allows the user to enter a multi-line text value.",
   "help": "oj-c.TextArea.html",
   "main": "oj-c/text-area",
   "extension": {
@@ -24,6 +24,9 @@
     },
     "oracle": {
       "icon": "oj-ux-ico-text-input-area"
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/TextAreaWebElement.html"
     }
   },
   "since": "13.0.0",
@@ -237,7 +240,8 @@
           "enumValues": [
             "none",
             "remaining"
-          ]
+          ],
+          "value": "remaining"
         },
         "max": {
           "type": "number|null",
@@ -296,8 +300,7 @@
         "consume": {
           "name": "containerReadonly"
         }
-      },
-      "value": false
+      }
     },
     "required": {
       "type": "boolean",
@@ -375,9 +378,6 @@
         "right"
       ]
     },
-    "unsafe_labelledBy": {
-      "type": "string"
-    },
     "userAssistanceDensity": {
       "type": "string",
       "description": "Specifies the density of the form component's user assistance presentation.",
@@ -406,8 +406,7 @@
         "consume": {
           "name": "containerUserAssistanceDensity"
         }
-      },
-      "value": "reflow"
+      }
     },
     "validators": {
       "type": "Array<object>|null",
@@ -466,21 +465,26 @@
     }
   },
   "methods": {
-    "reset": {
-      "return": "any"
+    "blur": {
+      "description": "Blurs the input field.",
+      "return": "void"
+    },
+    "focus": {
+      "description": "Focuses the input field.",
+      "return": "void"
     },
     "showMessages": {
-      "return": "any"
+      "description": "Takes all deferred messages and shows them.",
+      "return": "void"
+    },
+    "reset": {
+      "description": "Resets the component by clearing all messages and updating the component's display value using the attribute value.",
+      "return": "void"
     },
     "validate": {
+      "description": "If enabled, validates the component's display value using the converter and all validators registered on the component. The Promise resolves to 'valid' if there were no converter parse errors and the component passed all validations, or if the component is disabled or readonly.",
       "return": "Promise"
     },
-    "blur": {
-      "return": "any"
-    },
-    "focus": {
-      "return": "any"
-    },
     "setProperty": {
       "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.",
       "help": "#setProperty",

package/oj-c/text-area/text-area.js

@@ -1,21 +1,29 @@
-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', "@oracle/oraclejet-preact/hooks/UNSAFE_useAccessibleContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormVariantContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/UNSAFE_TextArea", "@oracle/oraclejet-preact/UNSAFE_TextAreaAutosize", "oj-c/editable-value/UNSAFE_useAssistiveText/useAssistiveText", "ojs/ojcontext", "ojs/ojvcomponent", "ojs/ojvcomponent-binding", "preact", "preact/compat", "preact/hooks", "./useTextAreaAutosizePreact", "./useTextAreaPreact", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "css!oj-c/text-area/text-area-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_useAccessibleContext_1, UNSAFE_useFormContext_1, UNSAFE_useFormVariantContext_1, UNSAFE_useTabbableMode_1, UNSAFE_TextArea_1, UNSAFE_TextAreaAutosize_1, useAssistiveText_1, Context, ojvcomponent_1, ojvcomponent_binding_1, preact_1, compat_1, hooks_1, useTextAreaAutosizePreact_1, useTextAreaPreact_1, Layout_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "@oracle/oraclejet-preact/hooks/UNSAFE_useFormContext", "oj-c/hooks/UNSAFE_useMergedFormContext/useMergedFormContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormVariantContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/UNSAFE_TextArea", "@oracle/oraclejet-preact/UNSAFE_TextAreaAutosize", "oj-c/editable-value/UNSAFE_useAssistiveText/useAssistiveText", "ojs/ojcontext", "ojs/ojvcomponent", "preact/compat", "preact/hooks", "./useTextAreaAutosizePreact", "./useTextAreaPreact", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "css!oj-c/text-area/text-area-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_useFormContext_1, useMergedFormContext_1, UNSAFE_useFormVariantContext_1, UNSAFE_useTabbableMode_1, UNSAFE_TextArea_1, UNSAFE_TextAreaAutosize_1, useAssistiveText_1, Context, ojvcomponent_1, compat_1, hooks_1, useTextAreaAutosizePreact_1, useTextAreaPreact_1, Layout_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.TextArea = void 0;
+    const displayOptionsDefault = {
+        converterHint: 'display',
+        messages: 'display',
+        validatorHint: 'display'
+    };
+    const helpDefault = {
+        instruction: ''
+    };
+    const helpHintsDefault = {
+        definition: '',
+        source: ''
+    };
+    const lengthDefault = {
+        countBy: 'codePoint',
+        counter: 'remaining',
+        max: null
+    };
+    const messagesCustomDefault = [];
+    const validatorsDefault = [];
     const FunctionalTextArea = (0, compat_1.forwardRef)((props, ref) => {
-        const { busyContextRef, converter, displayOptions, help, helpHints, validators } = props;
+        const { addBusyState, converter, displayOptions, help, helpHints, validators } = props;
         const textAreaRef = (0, hooks_1.useRef)();
-        const addBusyState = (0, hooks_1.useCallback)((desc) => {
-            return busyContextRef.current?.addBusyState({
-                description: `oj-c-text-area id=${props.id} is ${desc}`
-            });
-        }, []);
         const { textAreaProps, methods } = (0, useTextAreaPreact_1.useTextAreaPreact)(props, addBusyState);
         (0, hooks_1.useImperativeHandle)(ref, () => ({
             blur: () => textAreaRef.current?.blur(),
@@ -34,13 +42,8 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
         return ((0, jsx_runtime_1.jsx)(UNSAFE_TextArea_1.TextArea, { ref: textAreaRef, ...assistiveTextProps, ...textAreaProps, variant: variant }));
     });
     const FunctionalTextAreaAutosize = (0, compat_1.forwardRef)((props, ref) => {
-        const { busyContextRef, converter, help, helpHints, validators } = props;
+        const { addBusyState, converter, help, helpHints, validators } = props;
         const textAreaAutosizeRef = (0, hooks_1.useRef)();
-        const addBusyState = (0, hooks_1.useCallback)((desc) => {
-            return busyContextRef.current?.addBusyState({
-                description: `oj-c-text-area id=${props.id} is ${desc}`
-            });
-        }, []);
         const { textAreaProps, methods } = (0, useTextAreaAutosizePreact_1.useTextAreaAutosizePreact)(props, addBusyState);
         (0, hooks_1.useImperativeHandle)(ref, () => ({
             blur: () => textAreaAutosizeRef.current?.blur(),
@@ -57,84 +60,53 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
         const variant = (0, UNSAFE_useFormVariantContext_1.useFormVariantContext)();
         return ((0, jsx_runtime_1.jsx)(UNSAFE_TextAreaAutosize_1.TextAreaAutosize, { ref: textAreaAutosizeRef, ...assistiveTextProps, ...textAreaProps, variant: variant }));
     });
-    let TextArea = class TextArea extends preact_1.Component {
-        constructor() {
-            super(...arguments);
-            this.busyContextRef = (0, preact_1.createRef)();
-            this.textAreaRef = (0, preact_1.createRef)();
-            this.rootRef = (0, preact_1.createRef)();
-        }
-        componentDidMount() {
-            this.busyContextRef.current = Context.getContext(this.rootRef.current).getBusyContext();
-        }
-        render({ columnSpan, ...props }) {
-            const containerProps = {
-                isFormLayout: props.containerReadonly !== undefined,
-                isReadonly: props.containerReadonly,
-                labelWrapping: props.labelWrapping
-            };
-            const FunctionalComp = props.maxRows ? FunctionalTextAreaAutosize : FunctionalTextArea;
-            const accessibleProps = {
-                UNSAFE_ariaLabelledBy: props.unsafe_labelledBy
-            };
-            return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: props.id, ref: this.rootRef, class: columnSpan ? Layout_1.layoutSpanStyles.layoutSpanColumn[columnSpan] : '', children: (0, jsx_runtime_1.jsx)(UNSAFE_useFormContext_1.FormContext.Provider, { value: containerProps, children: (0, jsx_runtime_1.jsx)(UNSAFE_useAccessibleContext_1.AccessibleContext.Provider, { value: accessibleProps, children: (0, jsx_runtime_1.jsx)(FunctionalComp, { busyContextRef: this.busyContextRef, ref: this.textAreaRef, ...props }) }) }) }));
-        }
-        componentWillUnmount() {
-            this.busyContextRef.current = null;
-        }
-        reset() {
-            this.textAreaRef.current?.reset();
-        }
-        showMessages() {
-            this.textAreaRef.current?.showMessages();
-        }
-        validate() {
-            return this.textAreaRef.current?.validate();
-        }
-        blur() {
-            this.textAreaRef.current?.blur();
-        }
-        focus() {
-            this.textAreaRef.current?.focus();
-        }
-    };
-    exports.TextArea = TextArea;
-    TextArea.defaultProps = {
-        autocomplete: 'on',
-        columnSpan: 1,
-        converter: null,
-        disabled: false,
-        displayOptions: {
-            converterHint: 'display',
-            messages: 'display',
-            validatorHint: 'display'
-        },
-        help: {
-            instruction: ''
-        },
-        helpHints: {
-            definition: '',
-            source: '',
-            sourceText: undefined
-        },
-        length: {
-            countBy: 'codePoint',
-            max: null
-        },
-        messagesCustom: [],
-        readonly: false,
-        required: false,
-        resizeBehavior: 'none',
-        userAssistanceDensity: 'reflow',
-        validators: [],
-        value: null
-    };
-    TextArea._metadata = { "properties": { "autocomplete": { "type": "string" }, "columnSpan": { "type": "number" }, "containerReadonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "converter": { "type": "object|null" }, "disabled": { "type": "boolean" }, "displayOptions": { "type": "object", "properties": { "converterHint": { "type": "string", "enumValues": ["none", "display"] }, "messages": { "type": "string", "enumValues": ["none", "display"] }, "validatorHint": { "type": "string", "enumValues": ["none", "display"] } } }, "help": { "type": "object", "properties": { "instruction": { "type": "string" } } }, "helpHints": { "type": "object", "properties": { "definition": { "type": "string" }, "source": { "type": "string" }, "sourceText": { "type": "string" } } }, "labelEdge": { "type": "string", "enumValues": ["none", "start", "top", "inside"], "binding": { "consume": { "name": "containerLabelEdge" } } }, "labelHint": { "type": "string" }, "labelStartWidth": { "type": "number|string", "binding": { "consume": { "name": "labelWidth" } } }, "labelWrapping": { "type": "string", "enumValues": ["truncate", "wrap"], "binding": { "consume": { "name": "labelWrapping" } } }, "length": { "type": "object", "properties": { "countBy": { "type": "string", "enumValues": ["codePoint", "codeUnit"] }, "counter": { "type": "string", "enumValues": ["none", "remaining"] }, "max": { "type": "number|null" } } }, "maxRows": { "type": "number" }, "messagesCustom": { "type": "Array<object>", "writeback": true }, "placeholder": { "type": "string" }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "required": { "type": "boolean" }, "requiredMessageDetail": { "type": "string" }, "resizeBehavior": { "type": "string", "enumValues": ["both", "none", "horizontal", "vertical"] }, "rows": { "type": "number" }, "textAlign": { "type": "string", "enumValues": ["end", "start", "right"] }, "unsafe_labelledBy": { "type": "string" }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" } } }, "validators": { "type": "Array<object>|null" }, "value": { "type": "any", "writeback": true }, "rawValue": { "type": "string", "readOnly": true, "writeback": true }, "valid": { "type": "string", "enumValues": ["pending", "valid", "invalidHidden", "invalidShown"], "readOnly": true, "writeback": true } }, "extension": { "_WRITEBACK_PROPS": ["messagesCustom", "rawValue", "valid", "value"], "_READ_ONLY_PROPS": ["rawValue", "valid"], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "id", "autofocus"] }, "methods": { "reset": {}, "showMessages": {}, "validate": {}, "blur": {}, "focus": {} } };
-    TextArea._translationBundleMap = {
+    function TextAreaImpl({ autocomplete = 'on', columnSpan = 1, converter = null, containerReadonly: propContainerReadonly, disabled = false, displayOptions = displayOptionsDefault, help = helpDefault, helpHints = helpHintsDefault, id, labelWrapping: propLabelWrapping, length = lengthDefault, messagesCustom = messagesCustomDefault, readonly: propReadonly, required = false, resizeBehavior = 'none', userAssistanceDensity: propUserAssistanceDensity, validators = validatorsDefault, value = null, ...otherProps }, ref) {
+        const rootRef = (0, hooks_1.useRef)();
+        const textAreaRef = (0, hooks_1.useRef)();
+        const addBusyState = (0, hooks_1.useCallback)((desc) => {
+            return rootRef.current
+                ? Context.getContext(rootRef.current)
+                    .getBusyContext()
+                    .addBusyState({ description: `oj-c-text-area id=${id}: ${desc}` })
+                : () => { };
+        }, [id]);
+        const FunctionalComp = otherProps.maxRows ? FunctionalTextAreaAutosize : FunctionalTextArea;
+        (0, hooks_1.useImperativeHandle)(ref, () => ({
+            blur: () => textAreaRef.current?.blur(),
+            focus: () => textAreaRef.current?.focus(),
+            reset: () => textAreaRef.current?.reset(),
+            showMessages: () => textAreaRef.current?.showMessages(),
+            validate: () => {
+                return textAreaRef.current?.validate();
+            }
+        }), []);
+        const { containerProps, uadValue, readonlyValue } = (0, useMergedFormContext_1.useMergedFormContext)({
+            propContainerReadonly,
+            propLabelWrapping,
+            propReadonly,
+            propUserAssistanceDensity
+        });
+        const props = {
+            addBusyState,
+            autocomplete,
+            converter,
+            disabled,
+            displayOptions,
+            help,
+            helpHints,
+            length,
+            messagesCustom,
+            readonly: readonlyValue,
+            required,
+            resizeBehavior,
+            userAssistanceDensity: uadValue,
+            validators,
+            value,
+            ...otherProps
+        };
+        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: id, ref: rootRef, class: Layout_1.layoutSpanStyles.layoutSpanColumn[columnSpan], children: (0, jsx_runtime_1.jsx)(UNSAFE_useFormContext_1.FormContext.Provider, { value: containerProps, children: (0, jsx_runtime_1.jsx)(FunctionalComp, { ref: textAreaRef, ...props }) }) }));
+    }
+    exports.TextArea = (0, ojvcomponent_1.registerCustomElement)('oj-c-text-area', (0, compat_1.forwardRef)(TextAreaImpl), "TextArea", { "properties": { "autocomplete": { "type": "string" }, "columnSpan": { "type": "number" }, "containerReadonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "converter": { "type": "object|null" }, "disabled": { "type": "boolean" }, "displayOptions": { "type": "object", "properties": { "converterHint": { "type": "string", "enumValues": ["none", "display"] }, "messages": { "type": "string", "enumValues": ["none", "display"] }, "validatorHint": { "type": "string", "enumValues": ["none", "display"] } } }, "help": { "type": "object", "properties": { "instruction": { "type": "string" } } }, "helpHints": { "type": "object", "properties": { "definition": { "type": "string" }, "source": { "type": "string" }, "sourceText": { "type": "string" } } }, "labelEdge": { "type": "string", "enumValues": ["none", "start", "top", "inside"], "binding": { "consume": { "name": "containerLabelEdge" } } }, "labelHint": { "type": "string" }, "labelStartWidth": { "type": "number|string", "binding": { "consume": { "name": "labelWidth" } } }, "labelWrapping": { "type": "string", "enumValues": ["truncate", "wrap"], "binding": { "consume": { "name": "labelWrapping" } } }, "length": { "type": "object", "properties": { "countBy": { "type": "string", "enumValues": ["codePoint", "codeUnit"] }, "counter": { "type": "string", "enumValues": ["none", "remaining"] }, "max": { "type": "number|null" } } }, "maxRows": { "type": "number" }, "messagesCustom": { "type": "Array<object>", "writeback": true }, "placeholder": { "type": "string" }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "required": { "type": "boolean" }, "requiredMessageDetail": { "type": "string" }, "resizeBehavior": { "type": "string", "enumValues": ["both", "none", "horizontal", "vertical"] }, "rows": { "type": "number" }, "textAlign": { "type": "string", "enumValues": ["end", "start", "right"] }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" } } }, "validators": { "type": "Array<object>|null" }, "value": { "type": "any", "writeback": true }, "rawValue": { "type": "string", "readOnly": true, "writeback": true }, "valid": { "type": "string", "enumValues": ["pending", "valid", "invalidHidden", "invalidShown"], "readOnly": true, "writeback": true } }, "extension": { "_WRITEBACK_PROPS": ["messagesCustom", "rawValue", "valid", "value"], "_READ_ONLY_PROPS": ["rawValue", "valid"], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "id", "autofocus"] }, "methods": { "blur": {}, "focus": {}, "showMessages": {}, "reset": {}, "validate": {} } }, { "autocomplete": "on", "columnSpan": 1, "converter": null, "disabled": false, "displayOptions": { "converterHint": "display", "messages": "display", "validatorHint": "display" }, "help": { "instruction": "" }, "helpHints": { "definition": "", "source": "" }, "length": { "countBy": "codePoint", "counter": "remaining", "max": null }, "messagesCustom": [], "required": false, "resizeBehavior": "none", "validators": [], "value": null }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
-    };
-    TextArea._consumedContexts = [UNSAFE_useFormVariantContext_1.FormVariantContext, UNSAFE_useTabbableMode_1.TabbableModeContext];
-    exports.TextArea = TextArea = __decorate([
-        (0, ojvcomponent_1.customElement)('oj-c-text-area')
-    ], TextArea);
+    }, { consume: [UNSAFE_useFormVariantContext_1.FormVariantContext, UNSAFE_useTabbableMode_1.TabbableModeContext] });
 });

package/oj-c/text-area/useTextAreaAutosizePreact.js

@@ -1,20 +1,25 @@
-define(["require", "exports", "oj-c/editable-value/UNSAFE_useEditableValue/useEditableValue"], function (require, exports, useEditableValue_1) {
+define(["require", "exports", "oj-c/hooks/UNSAFE_useEditableValue/index", "oj-c/editable-value/UNSAFE_useDeferredValidators/useDeferredValidators"], function (require, exports, index_1, useDeferredValidators_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useTextAreaAutosizePreact = void 0;
     function useTextAreaAutosizePreact({ autocomplete = 'on', autofocus, converter, disabled, displayOptions, labelEdge, labelHint, labelStartWidth, length, maxRows, messagesCustom, placeholder, readonly, required, requiredMessageDetail, resizeBehavior, rows, textAlign, userAssistanceDensity, validators, value: propValue, onMessagesCustomChanged, onRawValueChanged, onValidChanged, onValueChanged, ...otherProps }, addBusyState) {
-        const { methods, textFieldProps, value, setValue } = (0, useEditableValue_1.useEditableValue)({
+        const deferredValidators = (0, useDeferredValidators_1.useDeferredValidators)({
+            labelHint,
+            required,
+            requiredMessageDetail
+        });
+        const { methods, textFieldProps, value } = (0, index_1.useEditableValue)({
+            addBusyState,
             ariaDescribedBy: otherProps['aria-describedby'],
-            converter,
+            converter: converter,
+            defaultDisplayValue: '',
+            deferredValidators,
             disabled,
             displayOptions,
             messagesCustom,
             readonly,
-            required,
-            requiredMessageDetail,
-            validators,
+            validators: validators === null ? undefined : validators,
             value: propValue,
-            addBusyState,
             onMessagesCustomChanged,
             onRawValueChanged,
             onValidChanged,
@@ -22,8 +27,6 @@ define(["require", "exports", "oj-c/editable-value/UNSAFE_useEditableValue/useEd
         });
         const hasNoValue = value === null || (typeof value === 'string' && value === '');
         return {
-            value,
-            setValue,
             methods,
             textAreaProps: {
                 autoComplete: autocomplete,

package/oj-c/text-area/useTextAreaPreact.js

@@ -1,20 +1,25 @@
-define(["require", "exports", "oj-c/editable-value/UNSAFE_useEditableValue/useEditableValue"], function (require, exports, useEditableValue_1) {
+define(["require", "exports", "oj-c/hooks/UNSAFE_useEditableValue/index", "oj-c/editable-value/UNSAFE_useDeferredValidators/useDeferredValidators"], function (require, exports, index_1, useDeferredValidators_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useTextAreaPreact = void 0;
     function useTextAreaPreact({ autocomplete = 'on', autofocus, converter, disabled, displayOptions, labelEdge, labelHint, labelStartWidth, length, messagesCustom, placeholder, readonly, required, requiredMessageDetail, resizeBehavior, rows, textAlign, userAssistanceDensity, validators, value: propValue, onMessagesCustomChanged, onRawValueChanged, onValueChanged, onValidChanged, ...otherProps }, addBusyState) {
-        const { methods, textFieldProps, value, setValue } = (0, useEditableValue_1.useEditableValue)({
+        const deferredValidators = (0, useDeferredValidators_1.useDeferredValidators)({
+            labelHint,
+            required,
+            requiredMessageDetail
+        });
+        const { methods, textFieldProps, value } = (0, index_1.useEditableValue)({
+            addBusyState,
             ariaDescribedBy: otherProps['aria-describedby'],
-            converter,
+            converter: converter,
+            defaultDisplayValue: '',
+            deferredValidators,
             disabled,
             displayOptions,
             messagesCustom,
             readonly,
-            required,
-            requiredMessageDetail,
-            validators,
+            validators: validators === null ? undefined : validators,
             value: propValue,
-            addBusyState,
             onMessagesCustomChanged,
             onRawValueChanged,
             onValidChanged,
@@ -22,8 +27,6 @@ define(["require", "exports", "oj-c/editable-value/UNSAFE_useEditableValue/useEd
         });
         const hasNoValue = value === null || (typeof value === 'string' && value === '');
         return {
-            value,
-            setValue,
             methods,
             textAreaProps: {
                 autoComplete: autocomplete,

package/oj-c/text-area.js

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

package/oj-c/toggle-button/__webdriver__/ToggleButtonWebElement.d.ts

@@ -0,0 +1,8 @@
+import { ToggleButtonWebElementBase } from './ToggleButtonWebElementBase';
+/**
+ * The component WebElement for [oj-c-toggle-button](../../../oj-c/docs/oj.ToggleButton.html).
+ * Do not instantiate this class directly, instead, use
+ * [findToggleButton](../functions/findToggleButton.html).
+ */
+export declare class ToggleButtonWebElement extends ToggleButtonWebElementBase {
+}

package/oj-c/toggle-button/__webdriver__/ToggleButtonWebElement.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleButtonWebElement = void 0;
+var ToggleButtonWebElementBase_1 = require("./ToggleButtonWebElementBase");
+/**
+ * The component WebElement for [oj-c-toggle-button](../../../oj-c/docs/oj.ToggleButton.html).
+ * Do not instantiate this class directly, instead, use
+ * [findToggleButton](../functions/findToggleButton.html).
+ */
+class ToggleButtonWebElement extends ToggleButtonWebElementBase_1.ToggleButtonWebElementBase {
+}
+exports.ToggleButtonWebElement = ToggleButtonWebElement;
+//# sourceMappingURL=ToggleButtonWebElement.js.map

package/oj-c/toggle-button/__webdriver__/ToggleButtonWebElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonWebElement.js","sourceRoot":"","sources":["ToggleButtonWebElement.ts"],"names":[],"mappings":";;;AAAA,2EAA0E;AAE1E;;;;GAIG;AACH,MAAa,sBAAuB,SAAQ,uDAA0B;CAErE;AAFD,wDAEC","sourcesContent":["import { ToggleButtonWebElementBase } from './ToggleButtonWebElementBase';\n\n/**\n * The component WebElement for [oj-c-toggle-button](../../../oj-c/docs/oj.ToggleButton.html).\n * Do not instantiate this class directly, instead, use\n * [findToggleButton](../functions/findToggleButton.html).\n */\nexport class ToggleButtonWebElement extends ToggleButtonWebElementBase {\n  // Put overrides here\n}\n"]}

package/oj-c/toggle-button/__webdriver__/ToggleButtonWebElementBase.d.ts

@@ -0,0 +1,72 @@
+import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';
+/**
+ * This is the base class for oj-c-toggle-button 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, ToggleButtonWebElement.ts.
+ */
+export declare class ToggleButtonWebElementBase extends OjWebElement {
+    /**
+     * Gets the value of <code>label</code> property.
+     * Text to show in the button.
+     * @return The value of <code>label</code> property.
+     *
+     */
+    getLabel(): Promise<string>;
+    /**
+     * Sets the value of <code>value</code> property.
+     * Specifies if the toggle button is selected
+     * @param value The value to set for <code>value</code>
+     *
+     */
+    changeValue(value: boolean): Promise<void>;
+    /**
+     * Gets the value of <code>value</code> property.
+     * Specifies if the toggle button is selected
+     * @return The value of <code>value</code> property.
+     *
+     */
+    getValue(): Promise<boolean>;
+    /**
+     * Gets the value of <code>tooltip</code> property.
+     * Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode.
+     * @return The value of <code>tooltip</code> property.
+     *
+     */
+    getTooltip(): Promise<string>;
+    /**
+     * Gets the value of <code>disabled</code> property.
+     * Specifies that the button element should be disabled.
+     * @return The value of <code>disabled</code> property.
+     *
+     */
+    getDisabled(): Promise<boolean>;
+    /**
+     * Gets the value of <code>width</code> property.
+     * Specifies that the button style width
+     * @return The value of <code>width</code> property.
+     *
+     */
+    getWidth(): Promise<number | string>;
+    /**
+     * Gets the value of <code>display</code> property.
+     * Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.
+     * @return The value of <code>display</code> property.
+     *
+     */
+    getDisplay(): Promise<string>;
+    /**
+     * Gets the value of <code>size</code> property.
+     * Size of button
+     * @return The value of <code>size</code> property.
+     *
+     */
+    getSizeProperty(): Promise<string>;
+    /**
+     * Gets the value of <code>chroming</code> property.
+     * Indicates in what states the button has variants in background and border.
+     * @return The value of <code>chroming</code> property.
+     *
+     */
+    getChroming(): Promise<string>;
+}

package/oj-c/toggle-button/__webdriver__/ToggleButtonWebElementBase.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleButtonWebElementBase = void 0;
+var elements_1 = require("@oracle/oraclejet-webdriver/elements");
+/**
+ * This is the base class for oj-c-toggle-button 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, ToggleButtonWebElement.ts.
+ */
+class ToggleButtonWebElementBase extends elements_1.OjWebElement {
+    /**
+     * Gets the value of <code>label</code> property.
+     * Text to show in the button.
+     * @return The value of <code>label</code> property.
+     *
+     */
+    getLabel() {
+        return this.getProperty('label');
+    }
+    /**
+     * Sets the value of <code>value</code> property.
+     * Specifies if the toggle button is selected
+     * @param value The value to set for <code>value</code>
+     *
+     */
+    changeValue(value) {
+        return this.setProperty('value', value);
+    }
+    /**
+     * Gets the value of <code>value</code> property.
+     * Specifies if the toggle button is selected
+     * @return The value of <code>value</code> property.
+     *
+     */
+    getValue() {
+        return this.getProperty('value');
+    }
+    /**
+     * Gets the value of <code>tooltip</code> property.
+     * Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode.
+     * @return The value of <code>tooltip</code> property.
+     *
+     */
+    getTooltip() {
+        return this.getProperty('tooltip');
+    }
+    /**
+     * Gets the value of <code>disabled</code> property.
+     * Specifies that the button element should be disabled.
+     * @return The value of <code>disabled</code> property.
+     *
+     */
+    getDisabled() {
+        return this.getProperty('disabled');
+    }
+    /**
+     * Gets the value of <code>width</code> property.
+     * Specifies that the button style width
+     * @return The value of <code>width</code> property.
+     *
+     */
+    getWidth() {
+        return this.getProperty('width');
+    }
+    /**
+     * Gets the value of <code>display</code> property.
+     * Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.
+     * @return The value of <code>display</code> property.
+     *
+     */
+    getDisplay() {
+        return this.getProperty('display');
+    }
+    /**
+     * Gets the value of <code>size</code> property.
+     * Size of button
+     * @return The value of <code>size</code> property.
+     *
+     */
+    getSizeProperty() {
+        return this.getProperty('size');
+    }
+    /**
+     * Gets the value of <code>chroming</code> property.
+     * Indicates in what states the button has variants in background and border.
+     * @return The value of <code>chroming</code> property.
+     *
+     */
+    getChroming() {
+        return this.getProperty('chroming');
+    }
+}
+exports.ToggleButtonWebElementBase = ToggleButtonWebElementBase;
+//# sourceMappingURL=ToggleButtonWebElementBase.js.map

package/oj-c/toggle-button/__webdriver__/ToggleButtonWebElementBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonWebElementBase.js","sourceRoot":"","sources":["ToggleButtonWebElementBase.ts"],"names":[],"mappings":";;;AAAA,iEAAoE;AAEpE;;;;;GAKG;AACH,MAAa,0BAA2B,SAAQ,uBAAY;IAC1D;;;;;OAKG;IACI,QAAQ;QACb,OAAO,IAAI,CAAC,WAAW,CAAS,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED;;;;;OAKG;IACI,WAAW,CAAC,KAAc;QAC/B,OAAO,IAAI,CAAC,WAAW,CAAU,OAAO,EAAE,KAAK,CAAC,CAAC;IACnD,CAAC;IAED;;;;;OAKG;IACI,QAAQ;QACb,OAAO,IAAI,CAAC,WAAW,CAAU,OAAO,CAAC,CAAC;IAC5C,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,QAAQ;QACb,OAAO,IAAI,CAAC,WAAW,CAAkB,OAAO,CAAC,CAAC;IACpD,CAAC;IAED;;;;;OAKG;IACI,UAAU;QACf,OAAO,IAAI,CAAC,WAAW,CAAS,SAAS,CAAC,CAAC;IAC7C,CAAC;IAED;;;;;OAKG;IACI,eAAe;QACpB,OAAO,IAAI,CAAC,WAAW,CAAS,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACI,WAAW;QAChB,OAAO,IAAI,CAAC,WAAW,CAAS,UAAU,CAAC,CAAC;IAC9C,CAAC;CACF;AA1FD,gEA0FC","sourcesContent":["import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';\n\n/**\n * This is the base class for oj-c-toggle-button 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, ToggleButtonWebElement.ts.\n */\nexport class ToggleButtonWebElementBase extends OjWebElement {\n  /**\n   * Gets the value of <code>label</code> property.\n   * Text to show in the button.\n   * @return The value of <code>label</code> property.\n   *\n   */\n  public getLabel(): Promise<string> {\n    return this.getProperty<string>('label');\n  }\n\n  /**\n   * Sets the value of <code>value</code> property.\n   * Specifies if the toggle button is selected\n   * @param value The value to set for <code>value</code>\n   *\n   */\n  public changeValue(value: boolean): Promise<void> {\n    return this.setProperty<boolean>('value', value);\n  }\n\n  /**\n   * Gets the value of <code>value</code> property.\n   * Specifies if the toggle button is selected\n   * @return The value of <code>value</code> property.\n   *\n   */\n  public getValue(): Promise<boolean> {\n    return this.getProperty<boolean>('value');\n  }\n\n  /**\n   * Gets the value of <code>tooltip</code> property.\n   * Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode.\n   * @return The value of <code>tooltip</code> property.\n   *\n   */\n  public getTooltip(): Promise<string> {\n    return this.getProperty<string>('tooltip');\n  }\n\n  /**\n   * Gets the value of <code>disabled</code> property.\n   * Specifies that the button element 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>width</code> property.\n   * Specifies that the button style 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>display</code> property.\n   * Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.\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>size</code> property.\n   * Size of button\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>chroming</code> property.\n   * Indicates in what states the button has variants 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"]}

package/oj-c/toggle-button/__webdriver__/index.d.ts

@@ -0,0 +1,17 @@
+import { By } from 'selenium-webdriver';
+import { DriverLike } from '@oracle/oraclejet-webdriver';
+import { ToggleButtonWebElement } from './ToggleButtonWebElement';
+export { ToggleButtonWebElement };
+/**
+ * Retrieve an instance of [ToggleButtonWebElement](../classes/ToggleButtonWebElement.html).
+ * @example
+ * ```javascript
+ * import { findToggleButton } from '@oracle/oraclejet-core-pack/webdriver';
+ * const el = await findToggleButton(driver, By.id('my-oj-c-toggle-button'));
+ * ```
+ * @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
+ */
+export declare function findToggleButton(driver: DriverLike, by: By): Promise<ToggleButtonWebElement>;