@oracle/oraclejet-core-pack 16.1.4 → 17.0.0

package/oj-c/checkbox/checkbox.js

@@ -1,34 +1,62 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "preact", "preact/hooks", "preact/compat", "ojs/ojcontext", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "ojs/ojvcomponent", "ojs/ojvcomponent-binding", "@oracle/oraclejet-preact/UNSAFE_Checkbox", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/UNSAFE_Environment", "oj-c/editable-value/UNSAFE_useAssistiveText/useAssistiveText", "./useCheckboxPreact", "css!oj-c/checkbox/checkbox-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, preact_1, hooks_1, compat_1, Context, Layout_1, ojvcomponent_1, ojvcomponent_binding_1, UNSAFE_Checkbox_1, UNSAFE_useFormContext_1, UNSAFE_useTabbableMode_1, UNSAFE_Environment_1, useAssistiveText_1, useCheckboxPreact_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "preact/hooks", "preact/compat", "ojs/ojcontext", "ojs/ojvcomponent", "@oracle/oraclejet-preact/UNSAFE_Checkbox", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormContext", "oj-c/hooks/UNSAFE_useMergedFormContext/useMergedFormContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslationBundle", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "oj-c/editable-value/UNSAFE_useAssistiveText/useAssistiveText", "./useCheckboxPreact", "css!oj-c/checkbox/checkbox-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, hooks_1, compat_1, Context, ojvcomponent_1, UNSAFE_Checkbox_1, UNSAFE_useFormContext_1, useMergedFormContext_1, UNSAFE_useTabbableMode_1, UNSAFE_useTranslationBundle_1, Layout_1, useAssistiveText_1, useCheckboxPreact_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Checkbox = void 0;
-    const FunctionalCheckbox = (0, compat_1.forwardRef)(({ ['aria-describedby']: ariaDescribedBy, busyContextRef, displayOptions, disabled, required, help, helpHints, id, children, value, messagesCustom, readonly, requiredMessageDetail, userAssistanceDensity, onMessagesCustomChanged, onValidChanged, onValueChanged, validators }, ref) => {
+    const displayOptionsDefault = {
+        messages: 'display'
+    };
+    const helpDefault = {
+        instruction: ''
+    };
+    const helpHintsDefault = {
+        definition: '',
+        source: ''
+    };
+    const messagesCustomDefault = [];
+    const FunctionalCheckbox = (0, compat_1.forwardRef)(({ ['aria-describedby']: ariaDescribedBy, children, columnSpan = 1, containerReadonly: propContainerReadonly, disabled = false, displayOptions = displayOptionsDefault, help = helpDefault, helpHints = helpHintsDefault, id, messagesCustom = messagesCustomDefault, onMessagesCustomChanged, onValidChanged, onValueChanged, readonly: propReadonly, required = false, requiredMessageDetail, userAssistanceDensity: propUserAssistanceDensity, value = false }, ref) => {
+        const rootRef = (0, hooks_1.useRef)();
         const checkboxRef = (0, hooks_1.useRef)();
-        const addBusyState = (0, hooks_1.useCallback)((desc) => {
-            return busyContextRef.current?.addBusyState({
-                description: `oj-c-checkbox id=${id} is ${desc}`
-            });
-        }, [busyContextRef, id]);
+        const translations = (0, UNSAFE_useTranslationBundle_1.useTranslationBundle)('@oracle/oraclejet-preact');
+        const errorMessage = requiredMessageDetail || translations.checkbox_requiredMessageDetail();
+        const validators = (0, hooks_1.useMemo)(() => {
+            return [
+                {
+                    validate: (value) => {
+                        if (required && value !== true) {
+                            throw new Error(errorMessage);
+                        }
+                        return;
+                    }
+                }
+            ];
+        }, [errorMessage, required]);
+        const addBusyState = (0, hooks_1.useCallback)((description) => {
+            return rootRef.current
+                ? Context.getContext(rootRef.current)
+                    .getBusyContext()
+                    .addBusyState({ description: `oj-c-checkbox id=${id} is ${description}` })
+                : () => { };
+        }, [id]);
+        const { containerProps, uadValue, readonlyValue } = (0, useMergedFormContext_1.useMergedFormContext)({
+            propContainerReadonly,
+            propLabelWrapping: undefined,
+            propReadonly,
+            propUserAssistanceDensity
+        });
         const { checkboxProps, methods } = (0, useCheckboxPreact_1.useCheckboxPreact)({
             ['aria-describedby']: ariaDescribedBy,
             disabled,
             displayOptions,
             messagesCustom,
-            readonly,
-            requiredMessageDetail,
-            required,
-            userAssistanceDensity,
-            value,
             onMessagesCustomChanged,
             onValidChanged,
             onValueChanged,
-            validators
+            readonly: readonlyValue,
+            required,
+            requiredMessageDetail,
+            userAssistanceDensity: uadValue,
+            validators,
+            value
         }, addBusyState);
         (0, hooks_1.useImperativeHandle)(ref, () => ({
             blur: () => checkboxRef.current?.blur(),
@@ -42,78 +70,10 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
             validators,
             userAssistanceDensity: checkboxProps.userAssistanceDensity
         });
-        return ((0, jsx_runtime_1.jsx)(UNSAFE_Checkbox_1.Checkbox, { ref: checkboxRef, ...assistiveTextProps, ...checkboxProps, children: children }));
+        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)(UNSAFE_Checkbox_1.Checkbox, { ref: checkboxRef, ...assistiveTextProps, ...checkboxProps, children: children }) }) }));
     });
-    FunctionalCheckbox.displayName = 'FunctionalCheckbox';
-    let Checkbox = class Checkbox extends preact_1.Component {
-        constructor() {
-            super(...arguments);
-            this.busyContextRef = (0, preact_1.createRef)();
-            this.checkboxRef = (0, preact_1.createRef)();
-            this.rootRef = (0, preact_1.createRef)();
-        }
-        componentDidMount() {
-            this.busyContextRef.current = Context.getContext(this.rootRef.current).getBusyContext();
-        }
-        render(props) {
-            const { translations } = this.context;
-            const bundle = translations?.['@oracle/oraclejet-preact'];
-            const requiredValidator = {
-                validate: (value) => {
-                    if (props.required && value !== true) {
-                        throw new Error(props.requiredMessageDetail || bundle?.checkbox_requiredMessageDetail());
-                    }
-                    return;
-                }
-            };
-            const containerProps = {
-                isFormLayout: props.containerReadonly !== undefined,
-                isReadonly: props.containerReadonly
-            };
-            return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: props.id, ref: this.rootRef, class: Layout_1.layoutSpanStyles.layoutSpanColumn[props.columnSpan || 1], children: (0, jsx_runtime_1.jsx)(UNSAFE_useFormContext_1.FormContext.Provider, { value: containerProps, children: (0, jsx_runtime_1.jsx)(FunctionalCheckbox, { ...props, validators: [requiredValidator], busyContextRef: this.busyContextRef, ref: this.checkboxRef }) }) }));
-        }
-        componentWillUnmount() {
-            this.busyContextRef.current = null;
-        }
-        reset() {
-            this.checkboxRef.current?.reset();
-        }
-        showMessages() {
-            this.checkboxRef.current?.showMessages();
-        }
-        validate() {
-            return this.checkboxRef.current?.validate();
-        }
-        blur() {
-            this.checkboxRef.current?.blur();
-        }
-        focus() {
-            this.checkboxRef.current?.focus();
-        }
-    };
-    exports.Checkbox = Checkbox;
-    Checkbox.defaultProps = {
-        columnSpan: 1,
-        disabled: false,
-        displayOptions: {
-            messages: 'display'
-        },
-        help: {
-            instruction: ''
-        },
-        messagesCustom: [],
-        readonly: false,
-        required: false,
-        userAssistanceDensity: 'reflow',
-        value: false
-    };
-    Checkbox._metadata = { "slots": { "": {} }, "properties": { "containerReadonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "columnSpan": { "type": "number" }, "disabled": { "type": "boolean" }, "displayOptions": { "type": "object", "properties": { "messages": { "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" } } }, "messagesCustom": { "type": "Array<object>", "writeback": true }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "required": { "type": "boolean" }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" } } }, "requiredMessageDetail": { "type": "string" }, "valid": { "type": "string", "enumValues": ["pending", "valid", "invalidHidden", "invalidShown"], "readOnly": true, "writeback": true }, "value": { "type": "boolean", "writeback": true } }, "extension": { "_WRITEBACK_PROPS": ["messagesCustom", "valid", "value"], "_READ_ONLY_PROPS": ["valid"], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "id"] }, "methods": { "reset": {}, "showMessages": {}, "validate": {}, "blur": {}, "focus": {} } };
-    Checkbox._translationBundleMap = {
+    const Checkbox = (0, ojvcomponent_1.registerCustomElement)('oj-c-checkbox', FunctionalCheckbox, "Checkbox", { "slots": { "": {} }, "properties": { "containerReadonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "columnSpan": { "type": "number" }, "disabled": { "type": "boolean" }, "displayOptions": { "type": "object", "properties": { "messages": { "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" } } }, "messagesCustom": { "type": "Array<object>", "writeback": true }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "required": { "type": "boolean" }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" } } }, "requiredMessageDetail": { "type": "string" }, "valid": { "type": "string", "enumValues": ["pending", "valid", "invalidHidden", "invalidShown"], "readOnly": true, "writeback": true }, "value": { "type": "boolean", "writeback": true } }, "extension": { "_WRITEBACK_PROPS": ["messagesCustom", "valid", "value"], "_READ_ONLY_PROPS": ["valid"], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "id"] }, "methods": { "blur": {}, "focus": {}, "showMessages": {}, "reset": {}, "validate": {} } }, { "columnSpan": 1, "disabled": false, "displayOptions": { "messages": "display" }, "help": { "instruction": "" }, "helpHints": { "definition": "", "source": "" }, "messagesCustom": [], "required": false, "value": false }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
-    };
-    Checkbox._consumedContexts = [UNSAFE_useTabbableMode_1.TabbableModeContext];
-    exports.Checkbox = Checkbox = __decorate([
-        (0, ojvcomponent_1.customElement)('oj-c-checkbox')
-    ], Checkbox);
-    Checkbox.contextType = UNSAFE_Environment_1.EnvironmentContext;
+    }, { consume: [UNSAFE_useTabbableMode_1.TabbableModeContext] });
+    exports.Checkbox = Checkbox;
 });

package/oj-c/checkbox/component.json

@@ -1,7 +1,7 @@
 {
   "name": "checkbox",
-  "version": "16.1.4",
-  "jetVersion": "^16.1.4",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -13,6 +13,12 @@
   "description": "Checkbox is a single standalone checkbox control. It represents a boolean value.",
   "help": "oj-c.Checkbox.html",
   "main": "oj-c/checkbox",
+  "status": [
+    {
+      "type": "candidate",
+      "since": "17.0.0"
+    }
+  ],
   "extension": {
     "catalog": {
       "category": "Forms"
@@ -27,6 +33,9 @@
       "uxSpecs": [
         "checkbox"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/CheckboxWebElement.html"
     }
   },
   "propertyLayout": [
@@ -35,8 +44,7 @@
       "items": [
         "disabled",
         "readonly",
-        "required",
-        "virtualKeyboard"
+        "required"
       ]
     },
     {
@@ -115,10 +123,12 @@
       "help": "#helpHints",
       "properties": {
         "definition": {
-          "type": "string"
+          "type": "string",
+          "value": ""
         },
         "source": {
-          "type": "string"
+          "type": "string",
+          "value": ""
         },
         "sourceText": {
           "type": "string"
@@ -163,8 +173,7 @@
         "consume": {
           "name": "containerReadonly"
         }
-      },
-      "value": false
+      }
     },
     "required": {
       "type": "boolean",
@@ -201,8 +210,7 @@
         "consume": {
           "name": "containerUserAssistanceDensity"
         }
-      },
-      "value": "reflow"
+      }
     },
     "requiredMessageDetail": {
       "type": "string",
@@ -253,21 +261,26 @@
     }
   },
   "methods": {
-    "reset": {
-      "return": "any"
+    "blur": {
+      "description": "focuses the input field.",
+      "return": "void"
+    },
+    "focus": {
+      "description": "blurs 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.",
+      "return": "void"
     },
     "validate": {
+      "description": "If enabled, validates the component's display value.",
       "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/checkbox/useCheckboxPreact.js

@@ -1,10 +1,8 @@
-define(["require", "exports", "preact/hooks", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslationBundle", "oj-c/editable-value/UNSAFE_useEditableValue/useEditableValue", "oj-c/editable-value/UNSAFE_useValidators/useValidators"], function (require, exports, hooks_1, UNSAFE_useTranslationBundle_1, useEditableValue_1, useValidators_1) {
+define(["require", "exports", "preact/hooks", "oj-c/editable-value/UNSAFE_useEditableValue/useEditableValue", "oj-c/editable-value/UNSAFE_useValidators/useValidators"], function (require, exports, hooks_1, useEditableValue_1, useValidators_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useCheckboxPreact = void 0;
-    function useCheckboxPreact({ ['aria-describedby']: ariaDescribedBy, disabled, displayOptions, messagesCustom, readonly, requiredMessageDetail: propRequiredMessageDetail, required, userAssistanceDensity, value: propValue, onMessagesCustomChanged, onValidChanged, onValueChanged, validators }, addBusyState) {
-        const translations = (0, UNSAFE_useTranslationBundle_1.useTranslationBundle)('@oracle/oraclejet-preact');
-        const requiredMessageDetail = propRequiredMessageDetail || translations.checkbox_requiredMessageDetail();
+    function useCheckboxPreact({ ['aria-describedby']: ariaDescribedBy, disabled, displayOptions, messagesCustom, readonly, requiredMessageDetail, required, userAssistanceDensity, value: propValue, onMessagesCustomChanged, onValidChanged, onValueChanged, validators }, addBusyState) {
         const { methods, onCommitValue, displayValue, setDisplayValue, textFieldProps } = (0, useEditableValue_1.useEditableValue)({
             ariaDescribedBy,
             disabled,

package/oj-c/checkbox.js

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

package/oj-c/checkboxset/checkboxset.js

@@ -1,33 +1,51 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "preact", "preact/hooks", "preact/compat", "ojs/ojcontext", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "ojs/ojvcomponent", "ojs/ojvcomponent-binding", "@oracle/oraclejet-preact/UNSAFE_CheckboxSet", "@oracle/oraclejet-preact/UNSAFE_CheckboxItem", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "oj-c/editable-value/UNSAFE_useAssistiveText/useAssistiveText", "oj-c/hooks/UNSAFE_useDataProvider/useDataProvider", "./useCheckboxsetPreact", "css!oj-c/checkboxset/checkboxset-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, preact_1, hooks_1, compat_1, Context, Layout_1, ojvcomponent_1, ojvcomponent_binding_1, UNSAFE_CheckboxSet_1, UNSAFE_CheckboxItem_1, UNSAFE_useFormContext_1, UNSAFE_useTabbableMode_1, useAssistiveText_1, useDataProvider_1, useCheckboxsetPreact_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "preact/hooks", "preact/compat", "ojs/ojcontext", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "ojs/ojvcomponent", "@oracle/oraclejet-preact/UNSAFE_CheckboxSet", "@oracle/oraclejet-preact/UNSAFE_CheckboxItem", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormContext", "oj-c/hooks/UNSAFE_useMergedFormContext/useMergedFormContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "oj-c/editable-value/UNSAFE_useAssistiveText/useAssistiveText", "oj-c/hooks/UNSAFE_useDataProvider/useDataProvider", "./useCheckboxsetPreact", "css!oj-c/checkboxset/checkboxset-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, hooks_1, compat_1, Context, Layout_1, ojvcomponent_1, UNSAFE_CheckboxSet_1, UNSAFE_CheckboxItem_1, UNSAFE_useFormContext_1, useMergedFormContext_1, UNSAFE_useTabbableMode_1, useAssistiveText_1, useDataProvider_1, useCheckboxsetPreact_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Checkboxset = void 0;
     function isDataProvider(options) {
         return options && 'fetchFirst' in options;
     }
-    const FunctionalCheckboxset = (0, compat_1.forwardRef)(({ busyContextRef, displayOptions, help, helpHints, id, direction, options, ...otherProps }, ref) => {
+    const displayOptionsDefault = {
+        messages: 'display'
+    };
+    const helpDefault = {
+        instruction: ''
+    };
+    const helpHintsDefault = {
+        definition: '',
+        source: ''
+    };
+    const messagesCustomDefault = [];
+    const FunctionalCheckboxset = (0, compat_1.forwardRef)(({ id, options, containerReadonly: propContainerReadonly, displayOptions = displayOptionsDefault, help = helpDefault, helpHints = helpHintsDefault, disabled = false, direction = 'column', labelWrapping: propLabelWrapping, messagesCustom = messagesCustomDefault, columnSpan = 1, readonly: propReadonly, userAssistanceDensity: propUserAssistanceDensity, required = false, value = null, ...otherProps }, ref) => {
+        const rootRef = (0, hooks_1.useRef)();
         const checkboxsetRef = (0, hooks_1.useRef)();
-        const addBusyState = (0, hooks_1.useCallback)((desc) => {
-            return busyContextRef.current?.addBusyState({
-                description: `oj-c-checkboxset id=${id} is ${desc}`
-            });
-        }, [busyContextRef, id]);
+        const addBusyState = (0, hooks_1.useCallback)((description = 'Checkboxset: busyState') => {
+            return rootRef.current
+                ? Context.getContext(rootRef.current).getBusyContext().addBusyState({ description })
+                : () => { };
+        }, []);
         const isFromDataProvider = isDataProvider(options);
+        const { containerProps, uadValue, readonlyValue } = (0, useMergedFormContext_1.useMergedFormContext)({
+            propContainerReadonly,
+            propLabelWrapping,
+            propReadonly,
+            propUserAssistanceDensity
+        });
         const { checkboxsetProps, methods } = (0, useCheckboxsetPreact_1.useCheckboxsetPreact)({
             displayOptions,
+            readonly: readonlyValue,
+            required,
+            messagesCustom,
+            disabled,
+            value,
+            userAssistanceDensity: uadValue,
             ...otherProps
         }, addBusyState);
+        const { value: hookValue, ...checkboxsetRest } = checkboxsetProps;
         const { data } = (0, useDataProvider_1.useDataProvider)({
             data: isFromDataProvider ? options : undefined,
             addBusyState
         });
-        const { value, userAssistanceDensity, ...checkboxsetRest } = checkboxsetProps;
         const dataArr = (0, hooks_1.useMemo)(() => {
             const clonedOptions = !isFromDataProvider && options ? [...options] : [];
             return isFromDataProvider
@@ -45,70 +63,13 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
             displayOptions,
             help,
             helpHints,
-            userAssistanceDensity
+            userAssistanceDensity: uadValue
         });
-        const memoizedSetValue = (0, hooks_1.useMemo)(() => (value ? new Set(value) : undefined), [value]);
-        return ((0, jsx_runtime_1.jsx)(UNSAFE_CheckboxSet_1.CheckboxSet, { ref: checkboxsetRef, direction: direction, ...assistiveTextProps, ...checkboxsetRest, userAssistanceDensity: userAssistanceDensity, value: memoizedSetValue, children: dataArr.map(({ assistiveText, helpSourceLink, helpSourceText, label, value }) => ((0, jsx_runtime_1.jsx)(UNSAFE_CheckboxItem_1.CheckboxItem, { assistiveText: assistiveText, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, value: value, children: label }, value))) }));
+        const memoizedSetValue = (0, hooks_1.useMemo)(() => (hookValue ? new Set(hookValue) : undefined), [hookValue]);
+        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)(UNSAFE_CheckboxSet_1.CheckboxSet, { ref: checkboxsetRef, direction: direction, ...assistiveTextProps, ...checkboxsetRest, userAssistanceDensity: uadValue, value: memoizedSetValue, children: dataArr.map(({ assistiveText, helpSourceLink, helpSourceText, label, value }) => ((0, jsx_runtime_1.jsx)(UNSAFE_CheckboxItem_1.CheckboxItem, { assistiveText: assistiveText, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, value: value, children: label }, value))) }) }) }));
     });
-    let Checkboxset = class Checkboxset extends preact_1.Component {
-        constructor() {
-            super(...arguments);
-            this.busyContextRef = (0, preact_1.createRef)();
-            this.checkboxSetRef = (0, preact_1.createRef)();
-            this.rootRef = (0, preact_1.createRef)();
-        }
-        componentDidMount() {
-            this.busyContextRef.current = Context.getContext(this.rootRef.current).getBusyContext();
-        }
-        render(props) {
-            const containerProps = {
-                isFormLayout: props.containerReadonly !== undefined,
-                isReadonly: props.containerReadonly,
-                labelWrapping: props.labelWrapping
-            };
-            return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: props.id, ref: this.rootRef, class: Layout_1.layoutSpanStyles.layoutSpanColumn[props.columnSpan || 1], children: (0, jsx_runtime_1.jsx)(UNSAFE_useFormContext_1.FormContext.Provider, { value: containerProps, children: (0, jsx_runtime_1.jsx)(FunctionalCheckboxset, { ...props, busyContextRef: this.busyContextRef, ref: this.checkboxSetRef }) }) }));
-        }
-        componentWillUnmount() {
-            this.busyContextRef.current = null;
-        }
-        reset() {
-            this.checkboxSetRef.current?.reset();
-        }
-        showMessages() {
-            this.checkboxSetRef.current?.showMessages();
-        }
-        validate() {
-            return this.checkboxSetRef.current?.validate();
-        }
-        blur() {
-            this.checkboxSetRef.current?.blur();
-        }
-        focus() {
-            this.checkboxSetRef.current?.focus();
-        }
-    };
-    exports.Checkboxset = Checkboxset;
-    Checkboxset.defaultProps = {
-        columnSpan: 1,
-        disabled: false,
-        displayOptions: {
-            messages: 'display'
-        },
-        help: {
-            instruction: ''
-        },
-        messagesCustom: [],
-        readonly: false,
-        required: false,
-        userAssistanceDensity: 'reflow',
-        value: null
-    };
-    Checkboxset._metadata = { "properties": { "containerReadonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "columnSpan": { "type": "number" }, "disabled": { "type": "boolean" }, "direction": { "type": "string", "enumValues": ["row", "column"] }, "displayOptions": { "type": "object", "properties": { "messages": { "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" } } }, "messagesCustom": { "type": "Array<object>", "writeback": true }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "required": { "type": "boolean" }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" } } }, "options": { "type": "Array<object>|DataProvider" }, "labelWrapping": { "type": "string", "enumValues": ["truncate", "wrap"], "binding": { "consume": { "name": "labelWrapping" } } }, "requiredMessageDetail": { "type": "string" }, "valid": { "type": "string", "enumValues": ["pending", "valid", "invalidHidden", "invalidShown"], "readOnly": true, "writeback": true }, "value": { "type": "Array<any>|null", "writeback": true } }, "extension": { "_WRITEBACK_PROPS": ["messagesCustom", "valid", "value"], "_READ_ONLY_PROPS": ["valid"], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "id"] }, "methods": { "reset": {}, "showMessages": {}, "validate": {}, "blur": {}, "focus": {} } };
-    Checkboxset._translationBundleMap = {
+    const Checkboxset = (0, ojvcomponent_1.registerCustomElement)('oj-c-checkboxset', FunctionalCheckboxset, "Checkboxset", { "properties": { "containerReadonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "columnSpan": { "type": "number" }, "disabled": { "type": "boolean" }, "direction": { "type": "string", "enumValues": ["row", "column"] }, "displayOptions": { "type": "object", "properties": { "messages": { "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" } } }, "messagesCustom": { "type": "Array<object>", "writeback": true }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "required": { "type": "boolean" }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" } } }, "options": { "type": "Array<object>|DataProvider" }, "labelWrapping": { "type": "string", "enumValues": ["truncate", "wrap"], "binding": { "consume": { "name": "labelWrapping" } } }, "requiredMessageDetail": { "type": "string" }, "valid": { "type": "string", "enumValues": ["pending", "valid", "invalidHidden", "invalidShown"], "readOnly": true, "writeback": true }, "value": { "type": "Array<any>|null", "writeback": true } }, "extension": { "_WRITEBACK_PROPS": ["messagesCustom", "valid", "value"], "_READ_ONLY_PROPS": ["valid"], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "id"] }, "methods": { "blur": {}, "focus": {}, "showMessages": {}, "reset": {}, "validate": {} } }, { "displayOptions": { "messages": "display" }, "help": { "instruction": "" }, "helpHints": { "definition": "", "source": "" }, "disabled": false, "direction": "column", "messagesCustom": [], "columnSpan": 1, "required": false, "value": null }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
-    };
-    Checkboxset._consumedContexts = [UNSAFE_useTabbableMode_1.TabbableModeContext];
-    exports.Checkboxset = Checkboxset = __decorate([
-        (0, ojvcomponent_1.customElement)('oj-c-checkboxset')
-    ], Checkboxset);
+    }, { consume: [UNSAFE_useTabbableMode_1.TabbableModeContext] });
+    exports.Checkboxset = Checkboxset;
 });

package/oj-c/checkboxset/component.json

@@ -1,7 +1,7 @@
 {
   "name": "checkboxset",
-  "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 @@
     "CCheckboxsetElement"
   ],
   "displayName": "Checkboxset",
-  "description": "A checkbox set allows the user to select one or more options from a set and creates the necessary dom elements for the actual checkboxes.",
+  "description": "A checkbox set allows the user to select one or more options from a set.",
   "help": "oj-c.Checkboxset.html",
   "main": "oj-c/checkboxset",
   "status": [
@@ -36,6 +36,9 @@
       "uxSpecs": [
         "checkboxset"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/CheckboxsetWebElement.html"
     }
   },
   "propertyLayout": [
@@ -45,8 +48,7 @@
         "disabled",
         "labelHint",
         "readonly",
-        "required",
-        "virtualKeyboard"
+        "required"
       ]
     },
     {
@@ -91,7 +93,8 @@
       "enumValues": [
         "row",
         "column"
-      ]
+      ],
+      "value": "column"
     },
     "displayOptions": {
       "type": "object",
@@ -128,10 +131,12 @@
       "help": "#helpHints",
       "properties": {
         "definition": {
-          "type": "string"
+          "type": "string",
+          "value": ""
         },
         "source": {
-          "type": "string"
+          "type": "string",
+          "value": ""
         },
         "sourceText": {
           "type": "string"
@@ -230,8 +235,7 @@
         "consume": {
           "name": "containerReadonly"
         }
-      },
-      "value": false
+      }
     },
     "required": {
       "type": "boolean",
@@ -247,15 +251,15 @@
       "help": "#userAssistanceDensity",
       "propertyEditorValues": {
         "reflow": {
-          "description": "Help and hints are shown above under the field. Messages and required are shown inline under the field with no reserved space.",
+          "description": "Help and hints are shown above the field. Messages and required are shown inline under the field with no reserved space.",
           "displayName": "Reflow"
         },
         "efficient": {
-          "description": "Help and hints are shown above under the field. Messages and required are shown inline under the field with reserved space.",
+          "description": "Help and hints are shown above the field. Messages and required are shown inline under the field with reserved space.",
           "displayName": "Efficient"
         },
         "compact": {
-          "description": "Help and hints are shown above under the field. Messages and required are shown inline under the field with reserved space.",
+          "description": "Help and hints are shown above the field. Messages and required are shown inline under the field with reserved space.",
           "displayName": "Compact"
         }
       },
@@ -268,8 +272,7 @@
         "consume": {
           "name": "containerUserAssistanceDensity"
         }
-      },
-      "value": "reflow"
+      }
     },
     "options": {
       "type": "Array<object>|DataProvider",
@@ -351,21 +354,26 @@
     }
   },
   "methods": {
-    "reset": {
-      "return": "any"
+    "blur": {
+      "description": "Sets focus on the checkboxset or the first tabbable checkbox.",
+      "return": "void"
+    },
+    "focus": {
+      "description": "Blurs the checkboxset.",
+      "return": "void"
     },
     "showMessages": {
-      "return": "any"
+      "description": "Takes all deferred messages and shows them.",
+      "return": "void"
+    },
+    "reset": {
+      "description": "Resets the component by clearing all messages.",
+      "return": "void"
     },
     "validate": {
+      "description": "If enabled, validates the component's display value.",
       "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/checkboxset/useCheckboxsetPreact.js

@@ -25,7 +25,7 @@ define(["require", "exports", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslat
             const validationResult = await onCommitValue(valueAsArray);
             const newValue = validationResult === useValidators_1.ValidationResult.INVALID ? null : valueAsArray;
             setDisplayValue(newValue);
-        }, [onCommitValue]);
+        }, [onCommitValue, setDisplayValue]);
         return {
             methods,
             checkboxsetProps: {

package/oj-c/checkboxset.js

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

package/oj-c/collapsible/__webdriver__/CollapsibleWebElementBase.d.ts

@@ -8,7 +8,7 @@ import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';
 export declare class CollapsibleWebElementBase extends OjWebElement {
     /**
      * Gets the value of <code>disabled</code> property.
-     * Disables the collapsible if set to true
+     * Disables the collapsible if set to true.
      * @return The value of <code>disabled</code> property.
      *
      */

package/oj-c/collapsible/__webdriver__/CollapsibleWebElementBase.js

@@ -11,7 +11,7 @@ var elements_1 = require("@oracle/oraclejet-webdriver/elements");
 class CollapsibleWebElementBase extends elements_1.OjWebElement {
     /**
      * Gets the value of <code>disabled</code> property.
-     * Disables the collapsible if set to true
+     * Disables the collapsible if set to true.
      * @return The value of <code>disabled</code> property.
      *
      */