@uipath/apollo-react 4.60.0 → 4.61.1

package/dist/material/components/ap-model-picker/primitives/OptionList.cjs

@@ -0,0 +1,287 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    VirtualOptionList: ()=>VirtualOptionList,
+    optionDomId: ()=>optionDomId,
+    GroupedOptionList: ()=>GroupedOptionList
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const ShieldOutlined_namespaceObject = require("@mui/icons-material/ShieldOutlined");
+var ShieldOutlined_default = /*#__PURE__*/ __webpack_require__.n(ShieldOutlined_namespaceObject);
+const Box_namespaceObject = require("@mui/material/Box");
+var Box_default = /*#__PURE__*/ __webpack_require__.n(Box_namespaceObject);
+const react_virtual_namespaceObject = require("@tanstack/react-virtual");
+const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const external_i18n_cjs_namespaceObject = require("../i18n.cjs");
+const external_GroupHeader_cjs_namespaceObject = require("./GroupHeader.cjs");
+const external_ModelOptionRow_cjs_namespaceObject = require("./ModelOptionRow.cjs");
+const BYO_GROUP_KEY = 'byo';
+const DEFAULT_LIST_MAX_HEIGHT = 362;
+function groupLeadingIcon(groupKey) {
+    if (groupKey === BYO_GROUP_KEY) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ShieldOutlined_default(), {
+        sx: {
+            fontSize: 14
+        }
+    });
+    return null;
+}
+const GROUP_HINT_DESCRIPTORS = {
+    recommended: external_i18n_cjs_namespaceObject.GROUP_LABELS.recommendedHint,
+    preview: external_i18n_cjs_namespaceObject.GROUP_LABELS.previewHint,
+    byo: external_i18n_cjs_namespaceObject.GROUP_LABELS.byoHint,
+    more: external_i18n_cjs_namespaceObject.GROUP_LABELS.moreHint,
+    deprecating: external_i18n_cjs_namespaceObject.GROUP_LABELS.deprecatingHint
+};
+function groupHint(groupKey, i18n) {
+    const desc = GROUP_HINT_DESCRIPTORS[groupKey];
+    if (!desc) return;
+    return i18n ? i18n._(desc) : desc.message;
+}
+function countLabel(n, i18n) {
+    if (null == n || !i18n) return;
+    return 1 === n ? i18n._({
+        id: 'modelPicker.count.one',
+        message: '{n} model',
+        values: {
+            n
+        }
+    }) : i18n._({
+        id: 'modelPicker.count.many',
+        message: '{n} models',
+        values: {
+            n
+        }
+    });
+}
+function optionDomId(listboxId, modelId) {
+    const safe = modelId.replace(/[^A-Za-z0-9_-]/g, '-');
+    return `${listboxId}-opt-${safe}`;
+}
+const GroupedOptionList = ({ id, options, activeIndex, setActiveIndex, selectedId, onSelect, tagContext, tagVariants, groupCounts, renderRowActions, renderRowMeta, dense, maxHeight = DEFAULT_LIST_MAX_HEIGHT, hideGroupHeaders, hideTagKinds, collapsedGroups, onGroupToggle, 'aria-label': ariaLabel = 'Models' })=>{
+    let lastGroupKey;
+    let headerCount = 0;
+    const derivedCounts = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (groupCounts) return groupCounts;
+        const out = {};
+        for (const o of options)out[o.groupKey] = (out[o.groupKey] ?? 0) + 1;
+        return out;
+    }, [
+        groupCounts,
+        options
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box_default(), {
+        role: "listbox",
+        id: id,
+        "aria-label": ariaLabel,
+        sx: {
+            maxHeight,
+            overflowY: 'auto',
+            py: 0.5
+        },
+        children: options.map((opt, i)=>{
+            const showHeader = !hideGroupHeaders && opt.groupKey !== lastGroupKey;
+            const isFirstHeader = showHeader && 0 === headerCount;
+            if (showHeader) headerCount += 1;
+            lastGroupKey = opt.groupKey;
+            const isCollapsible = opt.groupKey === BYO_GROUP_KEY;
+            const isCollapsed = isCollapsible && (collapsedGroups?.has(opt.groupKey) ?? false);
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_react_default().Fragment, {
+                children: [
+                    showHeader && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupHeader_cjs_namespaceObject.GroupHeader, {
+                        label: opt.groupLabel,
+                        hint: groupHint(opt.groupKey, tagContext?.i18n),
+                        count: derivedCounts[opt.groupKey],
+                        countLabel: countLabel(derivedCounts[opt.groupKey], tagContext?.i18n),
+                        dense: dense,
+                        isFirst: isFirstHeader,
+                        leadingIcon: groupLeadingIcon(opt.groupKey),
+                        collapsible: isCollapsible,
+                        collapsed: isCollapsed,
+                        onToggle: isCollapsible ? ()=>onGroupToggle?.(opt.groupKey) : void 0
+                    }),
+                    !isCollapsed && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ModelOptionRow_cjs_namespaceObject.ModelOptionRow, {
+                        id: optionDomId(id, opt.modelId),
+                        model: opt,
+                        index: i,
+                        active: i === activeIndex,
+                        selected: opt.modelId === selectedId,
+                        onSelect: onSelect,
+                        onActivate: setActiveIndex,
+                        tagContext: tagContext,
+                        tagVariants: tagVariants,
+                        hideTagKinds: hideTagKinds,
+                        renderMeta: renderRowMeta,
+                        renderActions: renderRowActions,
+                        dense: dense
+                    })
+                ]
+            }, opt.modelId);
+        })
+    });
+};
+const VirtualOptionList = ({ id, options, activeIndex, setActiveIndex, selectedId, onSelect, tagContext, tagVariants, groupCounts, renderRowActions, renderRowMeta, dense, maxHeight = DEFAULT_LIST_MAX_HEIGHT, hideGroupHeaders, hideTagKinds, collapsedGroups, onGroupToggle, 'aria-label': ariaLabel = 'Models' })=>{
+    const rows = (0, external_react_namespaceObject.useMemo)(()=>{
+        const out = [];
+        let lastGroupKey;
+        let headerCount = 0;
+        const counts = groupCounts ?? {};
+        if (!groupCounts) for (const o of options)counts[o.groupKey] = (counts[o.groupKey] ?? 0) + 1;
+        options.forEach((opt, i)=>{
+            const collapsed = collapsedGroups?.has(opt.groupKey) ?? false;
+            if (!hideGroupHeaders && opt.groupKey !== lastGroupKey) {
+                out.push({
+                    kind: 'header',
+                    key: `h-${opt.groupKey}`,
+                    groupKey: opt.groupKey,
+                    label: opt.groupLabel,
+                    isFirst: 0 === headerCount,
+                    count: counts[opt.groupKey] ?? 0
+                });
+                headerCount += 1;
+            }
+            lastGroupKey = opt.groupKey;
+            if (!collapsed) out.push({
+                kind: 'option',
+                key: opt.modelId,
+                model: opt,
+                index: i
+            });
+        });
+        return out;
+    }, [
+        options,
+        hideGroupHeaders,
+        groupCounts,
+        collapsedGroups
+    ]);
+    const headerHeight = dense ? 32 : 48;
+    const optionHeight = dense ? external_ModelOptionRow_cjs_namespaceObject.DENSE_OPTION_HEIGHT : external_ModelOptionRow_cjs_namespaceObject.FULL_OPTION_HEIGHT;
+    const parentRef = (0, external_react_namespaceObject.useRef)(null);
+    const virtualizer = (0, react_virtual_namespaceObject.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: ()=>parentRef.current,
+        estimateSize: (i)=>rows[i]?.kind === 'header' ? headerHeight : optionHeight,
+        overscan: 10
+    });
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const rowIdx = rows.findIndex((r)=>'option' === r.kind && r.index === activeIndex);
+        if (rowIdx >= 0) virtualizer.scrollToIndex(rowIdx, {
+            align: 'auto'
+        });
+    }, [
+        activeIndex,
+        rows,
+        virtualizer
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box_default(), {
+        ref: parentRef,
+        role: "listbox",
+        id: id,
+        "aria-label": ariaLabel,
+        sx: {
+            maxHeight,
+            overflowY: 'auto',
+            py: 0.5,
+            position: 'relative'
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box_default(), {
+            sx: {
+                height: virtualizer.getTotalSize(),
+                width: '100%',
+                position: 'relative'
+            },
+            children: virtualizer.getVirtualItems().map((vi)=>{
+                const row = rows[vi.index];
+                if (!row) return null;
+                const baseStyle = {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    transform: `translateY(${vi.start}px)`
+                };
+                if ('header' === row.kind) {
+                    const isCollapsible = row.groupKey === BYO_GROUP_KEY;
+                    const isCollapsed = isCollapsible && (collapsedGroups?.has(row.groupKey) ?? false);
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        style: baseStyle,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupHeader_cjs_namespaceObject.GroupHeader, {
+                            label: row.label,
+                            hint: groupHint(row.groupKey, tagContext?.i18n),
+                            count: row.count,
+                            countLabel: countLabel(row.count, tagContext?.i18n),
+                            dense: dense,
+                            isFirst: row.isFirst,
+                            leadingIcon: groupLeadingIcon(row.groupKey),
+                            collapsible: isCollapsible,
+                            collapsed: isCollapsed,
+                            onToggle: isCollapsible ? ()=>onGroupToggle?.(row.groupKey) : void 0
+                        })
+                    }, row.key);
+                }
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    style: baseStyle,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ModelOptionRow_cjs_namespaceObject.ModelOptionRow, {
+                        id: optionDomId(id, row.model.modelId),
+                        model: row.model,
+                        index: row.index,
+                        active: row.index === activeIndex,
+                        selected: row.model.modelId === selectedId,
+                        onSelect: onSelect,
+                        onActivate: setActiveIndex,
+                        tagContext: tagContext,
+                        tagVariants: tagVariants,
+                        hideTagKinds: hideTagKinds,
+                        renderMeta: renderRowMeta,
+                        renderActions: renderRowActions,
+                        dense: dense
+                    })
+                }, row.key);
+            })
+        })
+    });
+};
+exports.GroupedOptionList = __webpack_exports__.GroupedOptionList;
+exports.VirtualOptionList = __webpack_exports__.VirtualOptionList;
+exports.optionDomId = __webpack_exports__.optionDomId;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "GroupedOptionList",
+    "VirtualOptionList",
+    "optionDomId"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/material/components/ap-model-picker/primitives/OptionList.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { DiscoveryModel } from '../types';
+import type { DeriveModelTagsContext } from '../utils';
+export interface AnnotatedModel extends DiscoveryModel {
+    groupKey: string;
+    groupLabel: string;
+}
+export interface OptionListProps {
+    id: string;
+    options: AnnotatedModel[];
+    activeIndex: number;
+    setActiveIndex: (i: number) => void;
+    selectedId: string | null;
+    onSelect: (m: DiscoveryModel) => void;
+    tagContext?: DeriveModelTagsContext;
+    tagVariants?: Record<string, string>;
+    groupCounts?: Record<string, number>;
+    renderRowActions?: (m: DiscoveryModel) => React.ReactNode;
+    renderRowMeta?: (m: DiscoveryModel) => React.ReactNode;
+    dense?: boolean;
+    maxHeight?: number;
+    hideGroupHeaders?: boolean;
+    hideTagKinds?: readonly string[];
+    'aria-label'?: string;
+    collapsedGroups?: ReadonlySet<string>;
+    onGroupToggle?: (groupKey: string) => void;
+}
+export declare function optionDomId(listboxId: string, modelId: string): string;
+export declare const GroupedOptionList: React.FC<OptionListProps>;
+export declare const VirtualOptionList: React.FC<OptionListProps>;
+//# sourceMappingURL=OptionList.d.ts.map

package/dist/material/components/ap-model-picker/primitives/OptionList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionList.d.ts","sourceRoot":"","sources":["../../../../../src/material/components/ap-model-picker/primitives/OptionList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAIvD,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAMtC,UAAU,CAAC,EAAE,sBAAsB,CAAC;IAKpC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAMrC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAErC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,KAAK,CAAC,SAAS,CAAC;IAE1D,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvD,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAK3B,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAOjC,YAAY,CAAC,EAAE,MAAM,CAAC;IAMtB,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAEtC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAwDD,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAOtE;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwFvD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8JvD,CAAC"}

package/dist/material/components/ap-model-picker/primitives/OptionList.js

@@ -0,0 +1,235 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import ShieldOutlined from "@mui/icons-material/ShieldOutlined";
+import Box from "@mui/material/Box";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import react, { useEffect, useMemo, useRef } from "react";
+import { GROUP_LABELS } from "../i18n.js";
+import { GroupHeader } from "./GroupHeader.js";
+import { DENSE_OPTION_HEIGHT, FULL_OPTION_HEIGHT, ModelOptionRow } from "./ModelOptionRow.js";
+const BYO_GROUP_KEY = 'byo';
+const DEFAULT_LIST_MAX_HEIGHT = 362;
+function groupLeadingIcon(groupKey) {
+    if (groupKey === BYO_GROUP_KEY) return /*#__PURE__*/ jsx(ShieldOutlined, {
+        sx: {
+            fontSize: 14
+        }
+    });
+    return null;
+}
+const GROUP_HINT_DESCRIPTORS = {
+    recommended: GROUP_LABELS.recommendedHint,
+    preview: GROUP_LABELS.previewHint,
+    byo: GROUP_LABELS.byoHint,
+    more: GROUP_LABELS.moreHint,
+    deprecating: GROUP_LABELS.deprecatingHint
+};
+function groupHint(groupKey, i18n) {
+    const desc = GROUP_HINT_DESCRIPTORS[groupKey];
+    if (!desc) return;
+    return i18n ? i18n._(desc) : desc.message;
+}
+function countLabel(n, i18n) {
+    if (null == n || !i18n) return;
+    return 1 === n ? i18n._({
+        id: 'modelPicker.count.one',
+        message: '{n} model',
+        values: {
+            n
+        }
+    }) : i18n._({
+        id: 'modelPicker.count.many',
+        message: '{n} models',
+        values: {
+            n
+        }
+    });
+}
+function optionDomId(listboxId, modelId) {
+    const safe = modelId.replace(/[^A-Za-z0-9_-]/g, '-');
+    return `${listboxId}-opt-${safe}`;
+}
+const GroupedOptionList = ({ id, options, activeIndex, setActiveIndex, selectedId, onSelect, tagContext, tagVariants, groupCounts, renderRowActions, renderRowMeta, dense, maxHeight = DEFAULT_LIST_MAX_HEIGHT, hideGroupHeaders, hideTagKinds, collapsedGroups, onGroupToggle, 'aria-label': ariaLabel = 'Models' })=>{
+    let lastGroupKey;
+    let headerCount = 0;
+    const derivedCounts = useMemo(()=>{
+        if (groupCounts) return groupCounts;
+        const out = {};
+        for (const o of options)out[o.groupKey] = (out[o.groupKey] ?? 0) + 1;
+        return out;
+    }, [
+        groupCounts,
+        options
+    ]);
+    return /*#__PURE__*/ jsx(Box, {
+        role: "listbox",
+        id: id,
+        "aria-label": ariaLabel,
+        sx: {
+            maxHeight,
+            overflowY: 'auto',
+            py: 0.5
+        },
+        children: options.map((opt, i)=>{
+            const showHeader = !hideGroupHeaders && opt.groupKey !== lastGroupKey;
+            const isFirstHeader = showHeader && 0 === headerCount;
+            if (showHeader) headerCount += 1;
+            lastGroupKey = opt.groupKey;
+            const isCollapsible = opt.groupKey === BYO_GROUP_KEY;
+            const isCollapsed = isCollapsible && (collapsedGroups?.has(opt.groupKey) ?? false);
+            return /*#__PURE__*/ jsxs(react.Fragment, {
+                children: [
+                    showHeader && /*#__PURE__*/ jsx(GroupHeader, {
+                        label: opt.groupLabel,
+                        hint: groupHint(opt.groupKey, tagContext?.i18n),
+                        count: derivedCounts[opt.groupKey],
+                        countLabel: countLabel(derivedCounts[opt.groupKey], tagContext?.i18n),
+                        dense: dense,
+                        isFirst: isFirstHeader,
+                        leadingIcon: groupLeadingIcon(opt.groupKey),
+                        collapsible: isCollapsible,
+                        collapsed: isCollapsed,
+                        onToggle: isCollapsible ? ()=>onGroupToggle?.(opt.groupKey) : void 0
+                    }),
+                    !isCollapsed && /*#__PURE__*/ jsx(ModelOptionRow, {
+                        id: optionDomId(id, opt.modelId),
+                        model: opt,
+                        index: i,
+                        active: i === activeIndex,
+                        selected: opt.modelId === selectedId,
+                        onSelect: onSelect,
+                        onActivate: setActiveIndex,
+                        tagContext: tagContext,
+                        tagVariants: tagVariants,
+                        hideTagKinds: hideTagKinds,
+                        renderMeta: renderRowMeta,
+                        renderActions: renderRowActions,
+                        dense: dense
+                    })
+                ]
+            }, opt.modelId);
+        })
+    });
+};
+const VirtualOptionList = ({ id, options, activeIndex, setActiveIndex, selectedId, onSelect, tagContext, tagVariants, groupCounts, renderRowActions, renderRowMeta, dense, maxHeight = DEFAULT_LIST_MAX_HEIGHT, hideGroupHeaders, hideTagKinds, collapsedGroups, onGroupToggle, 'aria-label': ariaLabel = 'Models' })=>{
+    const rows = useMemo(()=>{
+        const out = [];
+        let lastGroupKey;
+        let headerCount = 0;
+        const counts = groupCounts ?? {};
+        if (!groupCounts) for (const o of options)counts[o.groupKey] = (counts[o.groupKey] ?? 0) + 1;
+        options.forEach((opt, i)=>{
+            const collapsed = collapsedGroups?.has(opt.groupKey) ?? false;
+            if (!hideGroupHeaders && opt.groupKey !== lastGroupKey) {
+                out.push({
+                    kind: 'header',
+                    key: `h-${opt.groupKey}`,
+                    groupKey: opt.groupKey,
+                    label: opt.groupLabel,
+                    isFirst: 0 === headerCount,
+                    count: counts[opt.groupKey] ?? 0
+                });
+                headerCount += 1;
+            }
+            lastGroupKey = opt.groupKey;
+            if (!collapsed) out.push({
+                kind: 'option',
+                key: opt.modelId,
+                model: opt,
+                index: i
+            });
+        });
+        return out;
+    }, [
+        options,
+        hideGroupHeaders,
+        groupCounts,
+        collapsedGroups
+    ]);
+    const headerHeight = dense ? 32 : 48;
+    const optionHeight = dense ? DENSE_OPTION_HEIGHT : FULL_OPTION_HEIGHT;
+    const parentRef = useRef(null);
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: ()=>parentRef.current,
+        estimateSize: (i)=>rows[i]?.kind === 'header' ? headerHeight : optionHeight,
+        overscan: 10
+    });
+    useEffect(()=>{
+        const rowIdx = rows.findIndex((r)=>'option' === r.kind && r.index === activeIndex);
+        if (rowIdx >= 0) virtualizer.scrollToIndex(rowIdx, {
+            align: 'auto'
+        });
+    }, [
+        activeIndex,
+        rows,
+        virtualizer
+    ]);
+    return /*#__PURE__*/ jsx(Box, {
+        ref: parentRef,
+        role: "listbox",
+        id: id,
+        "aria-label": ariaLabel,
+        sx: {
+            maxHeight,
+            overflowY: 'auto',
+            py: 0.5,
+            position: 'relative'
+        },
+        children: /*#__PURE__*/ jsx(Box, {
+            sx: {
+                height: virtualizer.getTotalSize(),
+                width: '100%',
+                position: 'relative'
+            },
+            children: virtualizer.getVirtualItems().map((vi)=>{
+                const row = rows[vi.index];
+                if (!row) return null;
+                const baseStyle = {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    transform: `translateY(${vi.start}px)`
+                };
+                if ('header' === row.kind) {
+                    const isCollapsible = row.groupKey === BYO_GROUP_KEY;
+                    const isCollapsed = isCollapsible && (collapsedGroups?.has(row.groupKey) ?? false);
+                    return /*#__PURE__*/ jsx("div", {
+                        style: baseStyle,
+                        children: /*#__PURE__*/ jsx(GroupHeader, {
+                            label: row.label,
+                            hint: groupHint(row.groupKey, tagContext?.i18n),
+                            count: row.count,
+                            countLabel: countLabel(row.count, tagContext?.i18n),
+                            dense: dense,
+                            isFirst: row.isFirst,
+                            leadingIcon: groupLeadingIcon(row.groupKey),
+                            collapsible: isCollapsible,
+                            collapsed: isCollapsed,
+                            onToggle: isCollapsible ? ()=>onGroupToggle?.(row.groupKey) : void 0
+                        })
+                    }, row.key);
+                }
+                return /*#__PURE__*/ jsx("div", {
+                    style: baseStyle,
+                    children: /*#__PURE__*/ jsx(ModelOptionRow, {
+                        id: optionDomId(id, row.model.modelId),
+                        model: row.model,
+                        index: row.index,
+                        active: row.index === activeIndex,
+                        selected: row.model.modelId === selectedId,
+                        onSelect: onSelect,
+                        onActivate: setActiveIndex,
+                        tagContext: tagContext,
+                        tagVariants: tagVariants,
+                        hideTagKinds: hideTagKinds,
+                        renderMeta: renderRowMeta,
+                        renderActions: renderRowActions,
+                        dense: dense
+                    })
+                }, row.key);
+            })
+        })
+    });
+};
+export { GroupedOptionList, VirtualOptionList, optionDomId };

package/dist/material/components/ap-model-picker/primitives/PickerPopup.cjs

@@ -0,0 +1,110 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PickerPopup: ()=>PickerPopup
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const Box_namespaceObject = require("@mui/material/Box");
+var Box_default = /*#__PURE__*/ __webpack_require__.n(Box_namespaceObject);
+const ClickAwayListener_namespaceObject = require("@mui/material/ClickAwayListener");
+var ClickAwayListener_default = /*#__PURE__*/ __webpack_require__.n(ClickAwayListener_namespaceObject);
+const Paper_namespaceObject = require("@mui/material/Paper");
+var Paper_default = /*#__PURE__*/ __webpack_require__.n(Paper_namespaceObject);
+const Popper_namespaceObject = require("@mui/material/Popper");
+var Popper_default = /*#__PURE__*/ __webpack_require__.n(Popper_namespaceObject);
+const apollo_core_namespaceObject = require("@uipath/apollo-core");
+const PickerPopup = ({ open, anchorEl, onClose, width, placement = 'bottom-start', zIndex = 1400, header, footer, className, 'data-testid': dataTestId, children })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Popper_default(), {
+        open: open,
+        anchorEl: anchorEl,
+        placement: placement,
+        style: {
+            zIndex,
+            width: width ?? anchorEl?.clientWidth
+        },
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [
+                        0,
+                        6
+                    ]
+                }
+            }
+        ],
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ClickAwayListener_default(), {
+            onClickAway: onClose,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Paper_default(), {
+                elevation: 0,
+                className: className,
+                "data-testid": dataTestId,
+                sx: {
+                    borderRadius: '10px',
+                    overflow: 'hidden',
+                    border: '1px solid',
+                    borderColor: `var(--color-border-de-emp, ${apollo_core_namespaceObject.Colors.ColorGray300})`,
+                    backgroundColor: `var(--color-background-raised, ${apollo_core_namespaceObject.Colors.ColorWhite})`,
+                    boxShadow: '0 12px 30px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.04)',
+                    display: 'flex',
+                    flexDirection: 'column'
+                },
+                children: [
+                    header,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box_default(), {
+                        sx: {
+                            flex: 1,
+                            minHeight: 0
+                        },
+                        children: children
+                    }),
+                    footer && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box_default(), {
+                        sx: {
+                            borderTop: '1px solid',
+                            borderColor: `var(--color-border-de-emp, ${apollo_core_namespaceObject.Colors.ColorGray300})`,
+                            backgroundColor: `var(--color-background-raised, ${apollo_core_namespaceObject.Colors.ColorWhite})`
+                        },
+                        children: footer
+                    })
+                ]
+            })
+        })
+    });
+exports.PickerPopup = __webpack_exports__.PickerPopup;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PickerPopup"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/material/components/ap-model-picker/primitives/PickerPopup.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+export interface PickerPopupProps {
+    open: boolean;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+    width?: number | string;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    zIndex?: number;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    'data-testid'?: string;
+    children: React.ReactNode;
+}
+export declare const PickerPopup: React.FC<PickerPopupProps>;
+//# sourceMappingURL=PickerPopup.d.ts.map