"use strict";
var __webpack_require__ = {};
(()=>{
    __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__, {
    ListView: ()=>ListView_ListView,
    buildRenderedItems: ()=>buildRenderedItems
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const index_cjs_namespaceObject = require("../../layouts/index.cjs");
const external_utils_index_cjs_namespaceObject = require("../../utils/index.cjs");
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
const external_react_namespaceObject = require("react");
const CanvasThemeContext_cjs_namespaceObject = require("../BaseCanvas/CanvasThemeContext.cjs");
const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
const external_ListView_styles_cjs_namespaceObject = require("./ListView.styles.cjs");
const DEFAULT_SKELETON_COUNT = 3;
function buildRenderedItems(items, enableSections, loadingSkeleton) {
    const result = [];
    const skeletonConfig = 'object' == typeof loadingSkeleton ? loadingSkeleton : loadingSkeleton ? {} : void 0;
    const baseSkeletonCount = skeletonConfig?.count ?? DEFAULT_SKELETON_COUNT;
    const pushSkeletons = (count)=>{
        for(let i = 0; i < count; i++)result.push({
            type: 'skeleton'
        });
    };
    if (!enableSections) {
        for (const item of items)result.push({
            type: 'item',
            item
        });
        if (skeletonConfig && !skeletonConfig.sections) pushSkeletons(baseSkeletonCount);
        return result;
    }
    const [itemsWithSection, itemsWithoutSection] = (0, external_utils_index_cjs_namespaceObject.partition)(items, (item)=>!!item.section);
    for (const item of itemsWithoutSection)result.push({
        type: 'item',
        item
    });
    const itemsBySection = new Map();
    for (const item of itemsWithSection){
        const name = item.section;
        const bucket = itemsBySection.get(name);
        if (bucket) bucket.push(item);
        else itemsBySection.set(name, [
            item
        ]);
    }
    const skeletonBySection = new Map(skeletonConfig?.sections?.map((s)=>[
            s.name,
            s
        ]) ?? []);
    const sectionNames = [
        ...itemsBySection.keys()
    ];
    for (const s of skeletonConfig?.sections ?? [])if (!itemsBySection.has(s.name)) sectionNames.push(s.name);
    for (const sectionName of sectionNames){
        result.push({
            type: 'section',
            sectionName
        });
        for (const item of itemsBySection.get(sectionName) ?? [])result.push({
            type: 'item',
            item
        });
        const skeletonForSection = skeletonBySection.get(sectionName);
        if (skeletonForSection) pushSkeletons(skeletonForSection.count ?? baseSkeletonCount);
    }
    if (skeletonConfig && !skeletonConfig.sections) pushSkeletons(baseSkeletonCount);
    return result;
}
const IconContainerMemoized = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(external_ListView_styles_cjs_namespaceObject.IconContainer);
const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ index, style, ariaAttributes, renderedItems, activeIndex, isLoading, isDarkMode, onItemClick, onItemHover })=>{
    const renderItem = renderedItems[index];
    const buttonStyle = (0, external_react_namespaceObject.useMemo)(()=>({
            ...style,
            padding: 0,
            paddingRight: '4px',
            height: '32px',
            outlineOffset: '-1px'
        }), [
        style
    ]);
    const handleButtonClick = (0, external_react_namespaceObject.useCallback)(()=>{
        const clickTarget = renderedItems[index];
        if (clickTarget?.type === 'item') onItemClick(clickTarget.item, index);
    }, [
        onItemClick,
        renderedItems,
        index
    ]);
    const handleButtonHover = (0, external_react_namespaceObject.useCallback)(()=>{
        const hoverTarget = renderedItems[index];
        if (hoverTarget?.type === 'item') onItemHover?.(hoverTarget.item);
    }, [
        onItemHover,
        renderedItems,
        index
    ]);
    if ('section' === renderItem.type) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.SectionHeader, {
        ...ariaAttributes,
        style: style,
        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
            className: "text-xs",
            children: renderItem.sectionName
        })
    });
    if ('skeleton' === renderItem.type) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
        style: style,
        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ListItemSkeleton, {})
    });
    const item = renderItem.item;
    const bgColor = isDarkMode ? item.colorDark ?? item.color : item.color;
    const isActive = index === activeIndex;
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_ListView_styles_cjs_namespaceObject.ListItemButton, {
        ...ariaAttributes,
        tabIndex: -1,
        id: `toolbox-item-${item.id}`,
        role: "option",
        "aria-selected": isActive,
        style: buttonStyle,
        onClick: handleButtonClick,
        onHoverStart: handleButtonHover,
        className: `${isLoading ? 'loading' : ''} ${isActive ? 'active' : ''}`,
        disabled: isLoading,
        children: [
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(IconContainerMemoized, {
                bgColor: bgColor,
                color: "var(--canvas-foreground-emp)",
                "data-testid": "list-item-icon",
                children: [
                    item.icon?.url && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
                        src: item.icon?.url,
                        alt: item.name,
                        style: {
                            width: 24,
                            height: 24
                        }
                    }),
                    item.icon?.name && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
                        icon: item.icon.name,
                        size: 24
                    }),
                    item.icon?.Component && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(item.icon.Component, {})
                ]
            }),
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
                flex: 1,
                overflow: "hidden",
                children: [
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                        content: item.name,
                        placement: "right",
                        smartTooltip: true,
                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                            className: "text-sm list-view-item-name",
                            children: item.name
                        })
                    }),
                    item.description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                        content: item.description,
                        placement: "right",
                        smartTooltip: true,
                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                            className: "text-xs list-view-item-name text-foreground-muted",
                            children: item.description
                        })
                    })
                ]
            }),
            !!item.children && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
                icon: "chevron-right",
                size: 20,
                color: "var(--canvas-foreground-de-emp)"
            })
        ]
    });
});
const ListItemSkeleton = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
        className: "flex items-center gap-2.5 h-8",
        role: "presentation",
        "aria-hidden": "true",
        "data-testid": "list-item-skeleton",
        children: [
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
                className: "h-8 w-8 shrink-0 rounded-lg"
            }),
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                className: "flex-1 space-y-1.5 min-w-0",
                children: [
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
                        className: "h-3.5 w-1/3"
                    }),
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
                        className: "h-3 w-2/3"
                    })
                ]
            })
        ]
    });
const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', renderEmptyState, isLoading = false, enableSections = true, loadingSkeleton }, ref) {
    const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
    const activeSkeleton = loadingSkeleton ?? (isLoading && 0 === items.length ? true : void 0);
    const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections, activeSkeleton), [
        items,
        enableSections,
        activeSkeleton
    ]);
    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>({
            renderedItems
        }), [
        renderedItems
    ]);
    const rowProps = (0, external_react_namespaceObject.useMemo)(()=>({
            renderedItems,
            activeIndex,
            isLoading,
            isDarkMode,
            onItemClick,
            onItemHover
        }), [
        renderedItems,
        activeIndex,
        isLoading,
        isDarkMode,
        onItemClick,
        onItemHover
    ]);
    if (0 === renderedItems.length) {
        if (renderEmptyState) return renderEmptyState();
        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
            align: "center",
            justify: "center",
            flex: 1,
            gap: 10,
            style: {
                minHeight: '250px'
            },
            children: [
                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
                    icon: emptyStateIcon,
                    size: 48,
                    color: "var(--canvas-foreground-de-emp)"
                }),
                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                    className: "text-xs text-foreground-muted",
                    children: emptyStateMessage
                })
            ]
        });
    }
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
        id: "toolbox-listbox",
        role: "listbox",
        "aria-busy": activeSkeleton ? true : void 0,
        listRef: listRef,
        rowProps: rowProps,
        rowComponent: ListViewRow,
        rowCount: renderedItems.length,
        rowHeight: 40,
        overscanCount: 20,
        onScroll: onScroll
    });
});
const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ListViewInner);
exports.ListView = __webpack_exports__.ListView;
exports.buildRenderedItems = __webpack_exports__.buildRenderedItems;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "ListView",
    "buildRenderedItems"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
