@oracle/oraclejet-core-pack 16.1.4 → 17.0.0

package/oj-c/conveyor-belt/component.json

@@ -0,0 +1,181 @@
+{
+  "name": "conveyor-belt",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
+  "pack": "oj-c",
+  "type": "composite",
+  "dependencyScope": "runtime",
+  "license": "https://opensource.org/licenses/UPL",
+  "implements": [
+    "CConveyorBeltElement"
+  ],
+  "displayName": "Conveyor Belt",
+  "description": "A conveyor belt manages overflow for its child elements and allows scrolling among them.",
+  "main": "oj-c/conveyor-belt",
+  "help": "oj-c.ConveyorBelt.html",
+  "status": [
+    {
+      "type": "supersedes",
+      "since": "17.0.0",
+      "value": [
+        "oj-conveyor-belt"
+      ]
+    }
+  ],
+  "since": "17.0.0",
+  "slots": {
+    "": {
+      "description": "The default slot is the content of the Conveyor Belt.",
+      "displayName": "Default",
+      "help": "#default"
+    },
+    "itemTemplate": {
+      "description": "The itemTemplate slot is used to specify the template for rendering each item in the component. See the Help documentation for more information.",
+      "displayName": "itemTemplate",
+      "help": "#itemTemplate",
+      "maxItems": 1,
+      "data": {
+        "data": {
+          "type": "any"
+        },
+        "item": {
+          "type": "object",
+          "properties": {
+            "data": {
+              "type": "any"
+            },
+            "metadata": {
+              "type": "object",
+              "properties": {
+                "indexFromParent": {
+                  "type": "number"
+                },
+                "isLeaf": {
+                  "type": "boolean"
+                },
+                "key": {
+                  "type": "any"
+                },
+                "message": {
+                  "type": "object",
+                  "properties": {
+                    "detail": {
+                      "type": "string"
+                    },
+                    "severity": {
+                      "type": "string|number"
+                    },
+                    "summary": {
+                      "type": "string"
+                    }
+                  }
+                },
+                "parentKey": {
+                  "type": "any"
+                },
+                "suggestion": {
+                  "type": "object"
+                },
+                "treeDepth": {
+                  "type": "number"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "properties": {
+    "scrollPosition": {
+      "type": "number",
+      "description": "Gets or sets the number of pixels that an element's content is scrolled from its initial position.",
+      "displayName": "Scroll Position",
+      "help": "#scrollPosition",
+      "writeback": true
+    },
+    "arrowVisibility": {
+      "type": "string",
+      "description": "Specifies visibility of overflow arrow buttons.",
+      "displayName": "Arrow Visibility",
+      "help": "#arrowVisibility",
+      "enumValues": [
+        "auto",
+        "hidden",
+        "visible"
+      ]
+    },
+    "items": {
+      "type": "Array<object>|DataProvider",
+      "description": "An array of data items or a data provider that returns the items for the ConveyorBelt.",
+      "displayName": "Items",
+      "help": "#items"
+    },
+    "orientation": {
+      "type": "string",
+      "enumValues": [
+        "horizontal",
+        "vertical"
+      ],
+      "value": "horizontal"
+    }
+  },
+  "methods": {
+    "scrollElementIntoView": {
+      "description": "Scrolls element into view.",
+      "params": [
+        {
+          "name": "element",
+          "type": "HTMLElement"
+        }
+      ],
+      "return": "void"
+    },
+    "setProperty": {
+      "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.",
+      "help": "#setProperty",
+      "params": [
+        {
+          "name": "property",
+          "description": "The property name to set. Supports dot notation for subproperty access.",
+          "type": "string"
+        },
+        {
+          "name": "value",
+          "description": "The new value to set the property to.",
+          "type": "any"
+        }
+      ],
+      "return": "void"
+    },
+    "getProperty": {
+      "description": "Retrieves the value of a property or a subproperty.",
+      "help": "#getProperty",
+      "params": [
+        {
+          "name": "property",
+          "description": "The property name to get. Supports dot notation for subproperty access.",
+          "type": "string"
+        }
+      ],
+      "return": "any"
+    },
+    "setProperties": {
+      "description": "Performs a batch set of properties.",
+      "help": "#setProperties",
+      "params": [
+        {
+          "name": "properties",
+          "description": "An object containing the property and value pairs to set.",
+          "type": "object"
+        }
+      ],
+      "return": "void"
+    }
+  },
+  "extension": {
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/ConveyorBeltWebElement.html"
+    }
+  }
+}

package/oj-c/conveyor-belt/conveyor-belt-styles.css

@@ -0,0 +1,20 @@
+oj-c-conveyor-belt:not(.oj-complete){
+  visibility: hidden;
+}
+
+oj-c-conveyor-belt
+{
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+oj-c-conveyor-belt[hidden]
+{
+  display: none;
+}
+
+oj-c-conveyor-belt[orientation='vertical']
+{
+  display: inline-flex;
+}

package/oj-c/conveyor-belt/conveyor-belt.js

@@ -0,0 +1,125 @@
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojcontext", "@oracle/oraclejet-preact/UNSAFE_ConveyorBelt", "@oracle/oraclejet-preact/hooks/UNSAFE_useUser", "ojs/ojvcomponent", "preact/hooks", "preact/compat", "./conveyorBeltItem", "oj-c/hooks/UNSAFE_useDataProvider/useDataProvider", "css!oj-c/conveyor-belt/conveyor-belt-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, Context, UNSAFE_ConveyorBelt_1, UNSAFE_useUser_1, ojvcomponent_1, hooks_1, compat_1, conveyorBeltItem_1, useDataProvider_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ConveyorBelt = void 0;
+    function isDataProvider(items) {
+        return (items && 'fetchFirst' in items) || false;
+    }
+    const ConveyorBeltPreactWrapper = (0, compat_1.forwardRef)(({ addBusyState, onScrollPositionChanged, items, itemTemplate, children, ...rest }, ref) => {
+        const conveyorRef = (0, hooks_1.useRef)(null);
+        (0, hooks_1.useImperativeHandle)(ref, () => ({
+            scrollElementIntoView: (element) => conveyorRef.current?.scrollElementIntoView(element),
+            scrollPrevious: () => conveyorRef.current?.scrollPrevious(),
+            scrollNext: () => conveyorRef.current?.scrollNext()
+        }), []);
+        const isFromDataProvider = isDataProvider(items);
+        const { data } = (0, useDataProvider_1.useDataProvider)({
+            data: isFromDataProvider ? items : undefined,
+            addBusyState
+        });
+        const dataArr = (0, hooks_1.useMemo)(() => {
+            const clonedOptions = !isFromDataProvider && items
+                ? [...items].map((item) => {
+                    const metadata = { key: item.key };
+                    return {
+                        key: item.key,
+                        data: {
+                            data: item.data,
+                            metadata: metadata
+                        }
+                    };
+                })
+                : [];
+            return isFromDataProvider
+                ? Array.isArray(data)
+                    ? data.map((item) => {
+                        const metadata = { key: item.key };
+                        return {
+                            key: item.key,
+                            data: {
+                                data: item.data,
+                                metadata: item.metadata ?? metadata
+                            }
+                        };
+                    })
+                    : []
+                : clonedOptions;
+        }, [data, isFromDataProvider, items]);
+        const scrollPositionChangedHandler = (value) => {
+            if (value)
+                onScrollPositionChanged?.(value);
+        };
+        const childrenContent = itemTemplate
+            ? dataArr.map((dataObj, index) => {
+                const context = {
+                    index: index,
+                    data: dataObj.data,
+                    metadata: dataObj.data.metadata
+                };
+                return (0, jsx_runtime_1.jsx)(conveyorBeltItem_1.ConveyorBeltItem, { context: context, itemTemplate: itemTemplate });
+            })
+            : children;
+        return ((0, jsx_runtime_1.jsx)(UNSAFE_ConveyorBelt_1.ConveyorBelt, { onScrollPositionChanged: scrollPositionChangedHandler, ref: conveyorRef, ...rest, children: childrenContent }));
+    });
+    const ConveyorBeltComp = ({ children, orientation = 'horizontal', ...rest }, ref) => {
+        const rootRef = (0, hooks_1.useRef)();
+        const conveyorBeltRef = (0, hooks_1.useRef)(null);
+        const busyContextRef = (0, hooks_1.useRef)(Context.getContext(rootRef.current).getBusyContext());
+        const addBusyState = (0, hooks_1.useCallback)((desc) => {
+            return busyContextRef.current?.addBusyState({
+                description: `oj-c-conveyor-belt: ${desc}`
+            });
+        }, []);
+        const { direction } = (0, UNSAFE_useUser_1.useUser)();
+        const keyDownHandler = (event) => {
+            if (event.target !== rootRef.current) {
+                return;
+            }
+            if (orientation === 'horizontal') {
+                switch (event.key) {
+                    case 'ArrowRight':
+                        if (direction === 'rtl') {
+                            conveyorBeltRef.current?.scrollPrevious();
+                        }
+                        else {
+                            conveyorBeltRef.current?.scrollNext();
+                        }
+                        event.preventDefault();
+                        break;
+                    case 'ArrowLeft':
+                        if (direction === 'rtl') {
+                            conveyorBeltRef.current?.scrollNext();
+                        }
+                        else {
+                            conveyorBeltRef.current?.scrollPrevious();
+                        }
+                        event.preventDefault();
+                        break;
+                    default:
+                        break;
+                }
+            }
+            else if (orientation === 'vertical') {
+                switch (event.key) {
+                    case 'ArrowDown':
+                        conveyorBeltRef.current?.scrollNext();
+                        event.preventDefault();
+                        break;
+                    case 'ArrowUp':
+                        conveyorBeltRef.current?.scrollPrevious();
+                        event.preventDefault();
+                        break;
+                    default:
+                        break;
+                }
+            }
+        };
+        (0, hooks_1.useImperativeHandle)(ref, () => ({
+            scrollElementIntoView: (element) => conveyorBeltRef.current?.scrollElementIntoView(element)
+        }), []);
+        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ref: rootRef, onKeyDown: keyDownHandler, children: (0, jsx_runtime_1.jsx)(ConveyorBeltPreactWrapper, { ref: conveyorBeltRef, addBusyState: addBusyState, orientation: orientation, ...rest, children: children }) }));
+    };
+    exports.ConveyorBelt = (0, ojvcomponent_1.registerCustomElement)('oj-c-conveyor-belt', (0, compat_1.forwardRef)(ConveyorBeltComp), "ConveyorBelt", { "slots": { "": {}, "itemTemplate": { "data": {} } }, "properties": { "scrollPosition": { "type": "number", "writeback": true }, "arrowVisibility": { "type": "string", "enumValues": ["auto", "hidden", "visible"] }, "items": { "type": "Array<object>|DataProvider" }, "orientation": { "type": "string", "enumValues": ["horizontal", "vertical"] } }, "extension": { "_WRITEBACK_PROPS": ["scrollPosition"], "_READ_ONLY_PROPS": [] }, "methods": { "scrollElementIntoView": {} } }, { "orientation": "horizontal" }, {
+        '@oracle/oraclejet-preact': translationBundle_1.default
+    });
+});

package/oj-c/conveyor-belt/conveyorBeltItem.js

@@ -0,0 +1,13 @@
+define(["require", "exports", "preact/jsx-runtime", "@oracle/oraclejet-preact/UNSAFE_ConveyorBelt"], function (require, exports, jsx_runtime_1, UNSAFE_ConveyorBelt_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ConveyorBeltItem = void 0;
+    const ConveyorBeltItem = ({ context, itemTemplate }) => {
+        const itemContext = {
+            data: context.data.data,
+            item: context.data
+        };
+        return ((0, jsx_runtime_1.jsx)(UNSAFE_ConveyorBelt_1.ConveyorBeltItem, { children: itemTemplate && itemTemplate(itemContext) }));
+    };
+    exports.ConveyorBeltItem = ConveyorBeltItem;
+});

package/oj-c/conveyor-belt/index.js

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

package/oj-c/conveyor-belt.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "oj-c/conveyor-belt/conveyor-belt"], function (require, exports, conveyor_belt_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ConveyorBelt = void 0;
+    Object.defineProperty(exports, "ConveyorBelt", { enumerable: true, get: function () { return conveyor_belt_1.ConveyorBelt; } });
+});