@oracle/oraclejet-core-pack 16.1.4 → 17.0.0

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

@@ -0,0 +1,71 @@
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojcontext", "preact/hooks", "ojs/ojvcomponent", "preact/compat", "@oracle/oraclejet-preact/UNSAFE_CardFlexView", "@oracle/oraclejet-preact/UNSAFE_CardGridView", "./useCardViewPreact", "./cardViewItem", "@oracle/oraclejet-preact/hooks/UNSAFE_useTranslationBundle", "@oracle/oraclejet-preact/UNSAFE_EmptyList", "css!oj-c/card-view/card-view-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, Context, hooks_1, ojvcomponent_1, compat_1, UNSAFE_CardFlexView_1, UNSAFE_CardGridView_1, useCardViewPreact_1, cardViewItem_1, UNSAFE_useTranslationBundle_1, UNSAFE_EmptyList_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CardView = void 0;
+    const CardViewPreactWrapper = ({ addBusyState, isClickthroughDisabled, itemTemplate, noData, ...rest }) => {
+        const { status, cardViewProps } = (0, useCardViewPreact_1.useCardViewPreact)(rest, addBusyState, isClickthroughDisabled);
+        const translations = (0, UNSAFE_useTranslationBundle_1.useTranslationBundle)('@oracle/oraclejet-preact');
+        if (status === 'success' && !cardViewProps.hasMore && cardViewProps.data?.length === 0) {
+            if (noData) {
+                return (0, jsx_runtime_1.jsx)(UNSAFE_EmptyList_1.EmptyList, { children: noData(compat_1.Children) });
+            }
+            else {
+                const noDataContent = translations.noData_message();
+                return (0, jsx_runtime_1.jsx)(UNSAFE_EmptyList_1.EmptyList, { children: noDataContent });
+            }
+        }
+        if (cardViewProps.columns) {
+            return ((0, jsx_runtime_1.jsx)(UNSAFE_CardGridView_1.CardGridView, { ...cardViewProps, children: (0, hooks_1.useCallback)((context) => {
+                    return (0, jsx_runtime_1.jsx)(cardViewItem_1.CardViewItem, { context: context, itemTemplate: itemTemplate });
+                }, [itemTemplate]) }));
+        }
+        else {
+            return ((0, jsx_runtime_1.jsx)(UNSAFE_CardFlexView_1.CardFlexView, { ...cardViewProps, children: (context) => {
+                    return (0, jsx_runtime_1.jsx)(cardViewItem_1.CardViewItem, { context: context, itemTemplate: itemTemplate });
+                } }));
+        }
+    };
+    const CardViewImpl = ({ columns = 'auto', data = null, focusBehavior = 'card', gutterSize = 'sm', initialAnimation = 'slideUp', scrollPolicyOptions = { fetchSize: 25 }, selectionMode = 'none', reorderable = { items: 'disabled' }, ...rest }) => {
+        const rootRef = (0, hooks_1.useRef)();
+        const busyContextRef = (0, hooks_1.useRef)(Context.getContext(rootRef.current).getBusyContext());
+        const isClickthroughDisabled = (0, hooks_1.useCallback)((target) => {
+            if (target === null || rootRef.current === undefined) {
+                return false;
+            }
+            return isEventClickthroughDisabled({ target }, rootRef.current);
+        }, []);
+        const addBusyState = (0, hooks_1.useCallback)((desc) => {
+            return busyContextRef.current?.addBusyState({
+                description: `oj-c-card-view: ${desc}`
+            });
+        }, []);
+        const props = {
+            columns,
+            data,
+            focusBehavior,
+            gutterSize,
+            initialAnimation,
+            scrollPolicyOptions,
+            selectionMode,
+            reorderable,
+            ...rest
+        };
+        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: props.id, ref: rootRef, children: (0, jsx_runtime_1.jsx)(CardViewPreactWrapper, { addBusyState: addBusyState, isClickthroughDisabled: isClickthroughDisabled, ...props }) }));
+    };
+    exports.CardView = (0, ojvcomponent_1.registerCustomElement)('oj-c-card-view', CardViewImpl, "CardView", { "properties": { "currentItem": { "type": "any", "readOnly": true, "writeback": true }, "data": { "type": "DataProvider|null" }, "gutterSize": { "type": "string", "enumValues": ["xs", "sm", "md", "lg", "xl"] }, "scrollPolicyOptions": { "type": "object", "properties": { "fetchSize": { "type": "number" }, "scroller": { "type": "string" } } }, "selected": { "type": "object", "writeback": true }, "selectionMode": { "type": "string", "enumValues": ["none", "multiple", "single"] }, "initialAnimation": { "type": "string", "enumValues": ["slideUp", "slideDown"] }, "focusBehavior": { "type": "string", "enumValues": ["content", "card"] }, "columns": { "type": "number|string" }, "reorderable": { "type": "object", "properties": { "items": { "type": "string", "enumValues": ["disabled", "enabled"] } } } }, "slots": { "noData": { "data": {} }, "itemTemplate": { "data": {} } }, "events": { "ojReorder": {} }, "extension": { "_WRITEBACK_PROPS": ["currentItem", "selected"], "_READ_ONLY_PROPS": ["currentItem"], "_OBSERVED_GLOBAL_PROPS": ["aria-label", "aria-labelledby", "id"] } }, { "columns": "auto", "data": null, "focusBehavior": "card", "gutterSize": "sm", "initialAnimation": "slideUp", "scrollPolicyOptions": { "fetchSize": 25 }, "selectionMode": "none", "reorderable": { "items": "disabled" } }, {
+        '@oracle/oraclejet-preact': translationBundle_1.default
+    });
+    const isEventClickthroughDisabled = function (event, rootElement) {
+        let node = event.target;
+        while (node != null && node !== rootElement) {
+            if (isClickthroughDisabled(node)) {
+                return true;
+            }
+            node = node.parentNode;
+        }
+        return false;
+    };
+    const isClickthroughDisabled = function (element) {
+        return element.dataset['ojClickthrough'] === 'disabled';
+    };
+});

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

@@ -0,0 +1,15 @@
+define(["require", "exports", "preact/jsx-runtime", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode"], function (require, exports, jsx_runtime_1, UNSAFE_useTabbableMode_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CardViewItem = void 0;
+    const CardViewItem = ({ context, itemTemplate }) => {
+        const { isTabbable } = (0, UNSAFE_useTabbableMode_1.useTabbableMode)();
+        const itemContext = {
+            isTabbable,
+            data: context.data.data,
+            item: context.data
+        };
+        return ((0, jsx_runtime_1.jsx)(UNSAFE_useTabbableMode_1.TabbableModeContext.Provider, { value: { isTabbable }, children: itemTemplate && itemTemplate(itemContext) }));
+    };
+    exports.CardViewItem = CardViewItem;
+});

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

@@ -0,0 +1,323 @@
+{
+  "name": "card-view",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
+  "pack": "oj-c",
+  "type": "composite",
+  "dependencyScope": "runtime",
+  "license": "https://opensource.org/licenses/UPL",
+  "implements": [
+    "CCardViewElement"
+  ],
+  "displayName": "Card View",
+  "description": "A CardView displays data items as a grid with highly interactive features.",
+  "help": "oj-c.CardView.html",
+  "main": "oj-c/card-view",
+  "status": [
+    {
+      "type": "candidate",
+      "since": "17.0.0"
+    }
+  ],
+  "extension": {
+    "vbdt": {
+      "module": "oj-c/card-view"
+    },
+    "oracle": {
+      "uxSpecs": [
+        "card-view"
+      ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/CardViewWebElement.html"
+    }
+  },
+  "propertyLayout": [
+    {
+      "propertyGroup": "common",
+      "items": [
+        "selectionMode",
+        "gutterSize",
+        "focusBehavior",
+        "initialAnimation"
+      ]
+    },
+    {
+      "propertyGroup": "data",
+      "items": [
+        "data",
+        "selected"
+      ]
+    }
+  ],
+  "since": "17.0.0",
+  "properties": {
+    "currentItem": {
+      "type": "any",
+      "description": "The item that currently has keyboard focus",
+      "displayName": "Current Item",
+      "help": "#currentItem",
+      "readOnly": true,
+      "writeback": true
+    },
+    "data": {
+      "type": "DataProvider|null",
+      "description": "The data source for CardView.",
+      "displayName": "Data",
+      "help": "#data",
+      "extension": {
+        "webelement": {
+          "exceptionStatus": [
+            {
+              "type": "unsupported"
+            }
+          ]
+        }
+      },
+      "value": null
+    },
+    "gutterSize": {
+      "type": "string",
+      "description": "Size of the gutter between columns and rows.",
+      "displayName": "GutterSize",
+      "help": "#gutterSize",
+      "enumValues": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "value": "sm"
+    },
+    "scrollPolicyOptions": {
+      "type": "object",
+      "description": "Specifies fetch options for scrolling behaviors that trigger data fetches.",
+      "displayName": "Scroll Policy Options",
+      "help": "#scrollPolicyOptions",
+      "properties": {
+        "fetchSize": {
+          "type": "number",
+          "value": 25
+        },
+        "scroller": {
+          "type": "string"
+        }
+      }
+    },
+    "selected": {
+      "type": "object",
+      "description": "The selected property",
+      "displayName": "Selected Items Changed",
+      "help": "#selected",
+      "writeback": true
+    },
+    "selectionMode": {
+      "type": "string",
+      "description": "Type of selection behavior for the CardView",
+      "displayName": "Selection Mode",
+      "help": "#selectionMode",
+      "propertyEditorValues": {
+        "multiple": {
+          "description": "Multiple items can be selected at the same time.",
+          "displayName": "Multiple"
+        },
+        "none": {
+          "description": "Selection is disabled.",
+          "displayName": "None"
+        },
+        "single": {
+          "description": "Only a single item can be selected at a time.",
+          "displayName": "Single"
+        }
+      },
+      "enumValues": [
+        "none",
+        "multiple",
+        "single"
+      ],
+      "value": "none"
+    },
+    "initialAnimation": {
+      "type": "string",
+      "description": "Specify animation when cards are initially rendered.",
+      "displayName": "Initial Animation",
+      "help": "initialAnimation",
+      "enumValues": [
+        "slideUp",
+        "slideDown"
+      ],
+      "value": "slideUp"
+    },
+    "focusBehavior": {
+      "type": "string",
+      "description": "Specifies which focus behavior we should use for an item.",
+      "displayName": "Focus Behavior",
+      "help": "focusBehavior",
+      "enumValues": [
+        "content",
+        "card"
+      ],
+      "value": "card"
+    },
+    "columns": {
+      "type": "number|string",
+      "description": "Specifies the exact number of columns to render.",
+      "displayName": "Columns",
+      "help": "columns",
+      "propertyEditorValues": {
+        "auto": {
+          "description": "CardView will determine the number of columns based on width of the CardView and the width of the cards",
+          "displayName": "Auto"
+        }
+      },
+      "value": "auto"
+    },
+    "reorderable": {
+      "type": "object",
+      "description": "Specify the item reordering functionality.",
+      "displayName": "Reorderable",
+      "help": "#reorderable",
+      "properties": {
+        "items": {
+          "type": "string",
+          "enumValues": [
+            "disabled",
+            "enabled"
+          ],
+          "value": "disabled"
+        }
+      }
+    }
+  },
+  "slots": {
+    "noData": {
+      "description": "The noData slot is used to specify the content to show when there is no data. See the Help documentation for more information.",
+      "displayName": "noData",
+      "help": "#noData",
+      "maxItems": 1,
+      "templateSlotRenderType": "RenderNoDataTemplate",
+      "data": {}
+    },
+    "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"
+                }
+              }
+            }
+          }
+        },
+        "isTabbable": {
+          "type": "boolean"
+        }
+      }
+    }
+  },
+  "events": {
+    "ojReorder": {
+      "description": "Triggered after items are reordered within CardView via drag and drop or keyboard.",
+      "displayName": "Reorder",
+      "help": "#event:reorder",
+      "detail": {
+        "reorderedKeys": {
+          "type": "Array<any>"
+        },
+        "itemKeys": {
+          "type": "Array<any>"
+        },
+        "referenceKey": {
+          "type": "any"
+        }
+      }
+    }
+  },
+  "methods": {
+    "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"
+    }
+  }
+}

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

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

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

@@ -0,0 +1,80 @@
+define(["require", "exports", "preact/hooks", "../utils/UNSAFE_keyUtils/keySetUtils", "../hooks/UNSAFE_useListData/useListData"], function (require, exports, hooks_1, keySetUtils_1, useListData_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardViewPreact = void 0;
+    const useCardViewPreact = ({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, data: propData, gutterSize, focusBehavior, onCurrentItemChanged, selected, onSelectedChanged, scrollPolicyOptions, selectionMode, initialAnimation, columns: corePackColumns, reorderable, onOjReorder }, addBusyState, isClickthroughDisabled) => {
+        const resolveBusyState = (0, hooks_1.useRef)();
+        const [listDataState, onLoadRange] = (0, useListData_1.useListData)(propData, {
+            fetchSize: scrollPolicyOptions?.fetchSize
+        });
+        const selectedKeys = (0, keySetUtils_1.keySetToKeys)(selected);
+        const listData = listDataState.status !== 'error' ? listDataState.data : null;
+        const [currentItem, setCurrentItem] = (0, hooks_1.useState)();
+        const preactColumns = Number.isInteger(corePackColumns) ? corePackColumns : undefined;
+        (0, hooks_1.useEffect)(() => {
+            if (listDataState.status === 'loading') {
+                resolveBusyState.current = addBusyState('list data is in fetch state');
+            }
+            else {
+                if (resolveBusyState.current) {
+                    resolveBusyState.current();
+                    resolveBusyState.current = undefined;
+                }
+            }
+        }, [listDataState.status]);
+        const handleOnCurrentItemChanged = (detail) => {
+            setCurrentItem(detail.value);
+            onCurrentItemChanged && onCurrentItemChanged(detail.value);
+        };
+        const viewportConfig = scrollPolicyOptions?.scroller
+            ? {
+                scroller: () => {
+                    if (scrollPolicyOptions.scroller) {
+                        return document.querySelector(scrollPolicyOptions.scroller);
+                    }
+                    return null;
+                }
+            }
+            : undefined;
+        const getRowKey = (data) => {
+            return data.metadata.key;
+        };
+        const onLoadMore = (0, hooks_1.useCallback)(() => {
+            if (listData) {
+                const fetchSize = scrollPolicyOptions && scrollPolicyOptions.fetchSize ? scrollPolicyOptions.fetchSize : 25;
+                onLoadRange({ offset: 0, count: listData.data.length + fetchSize });
+            }
+        }, [listDataState, scrollPolicyOptions, onLoadRange]);
+        return {
+            status: listDataState.status,
+            cardViewProps: {
+                'aria-label': ariaLabel,
+                'aria-labelledby': ariaLabelledBy,
+                data: listData ? listData.data : null,
+                currentKey: currentItem,
+                getRowKey,
+                gutterSize,
+                onCurrentKeyChange: handleOnCurrentItemChanged,
+                hasMore: listData ? listData.sizePrecision === 'atLeast' : false,
+                onLoadMore,
+                focusBehavior,
+                onSelectionChange: (detail) => {
+                    onSelectedChanged &&
+                        !isClickthroughDisabled(detail.target) &&
+                        onSelectedChanged((0, keySetUtils_1.keysToKeySet)(detail.value));
+                },
+                selectedKeys,
+                selectionMode,
+                initialAnimation,
+                columns: preactColumns,
+                viewportConfig,
+                onReorder: reorderable?.items === 'enabled'
+                    ? (detail) => {
+                        onOjReorder && onOjReorder(detail);
+                    }
+                    : null
+            }
+        };
+    };
+    exports.useCardViewPreact = useCardViewPreact;
+});

package/oj-c/card-view.js

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