exports.id = 503;
exports.ids = [503];
exports.modules = {

/***/ 1:
/***/ ((module) => {

// Exports
module.exports = {
	"center": "CategoryList_center__3R9uw",
	"paper": "CategoryList_paper__oAKTa",
	"styledScrollBarList": "CategoryList_styledScrollBarList__2eTl8",
	"page": "CategoryList_page__oA2F9",
	"pageHeader": "CategoryList_pageHeader__SrRqi",
	"pageContent": "CategoryList_pageContent__a3V0m",
	"pageTitle": "CategoryList_pageTitle__FtYZ8",
	"customIcon": "CategoryList_customIcon__3DbIx",
	"CategoryList": "CategoryList_CategoryList__qbRRV",
	"listHeader": "CategoryList_listHeader__dXAz5",
	"list": "CategoryList_list__E0Uua",
	"listContent": "CategoryList_listContent__yySw_",
	"treeList": "CategoryList_treeList__ekFeu",
	"pageActions": "CategoryList_pageActions__P1wXy",
	"actionBtn": "CategoryList_actionBtn__G_CXs",
	"listWrapper": "CategoryList_listWrapper__2HzBJ",
	"filter": "CategoryList_filter__lZ77V",
	"switchViewIcon": "CategoryList_switchViewIcon__KYyn9",
	"HeaderActions": "CategoryList_HeaderActions__mxgWF"
};


/***/ }),

/***/ 7367:
/***/ ((module) => {

// Exports
module.exports = {
	"center": "CategoryItem_center__j1ofh",
	"paper": "CategoryItem_paper__HBb9S",
	"styledScrollBarList": "CategoryItem_styledScrollBarList__hv1Fo",
	"page": "CategoryItem_page__CmRSi",
	"pageHeader": "CategoryItem_pageHeader__zWEmw",
	"pageContent": "CategoryItem_pageContent__liS_Z",
	"pageTitle": "CategoryItem_pageTitle__I7XvH",
	"customIcon": "CategoryItem_customIcon__q1gaV",
	"none": "CategoryItem_none__UX0aA",
	"CategoryItem": "CategoryItem_CategoryItem__5gpdl",
	"header": "CategoryItem_header__l9Qlj",
	"itemActions": "CategoryItem_itemActions__MlH41",
	"listItem": "CategoryItem_listItem__Knyia",
	"subList": "CategoryItem_subList__ZtXVv",
	"expandMoreIcon": "CategoryItem_expandMoreIcon__VgqiR",
	"headerLeft": "CategoryItem_headerLeft__22f6v",
	"treeInfo": "CategoryItem_treeInfo__2c7op",
	"ellipsis": "CategoryItem_ellipsis__jwbvr"
};


/***/ }),

/***/ 2503:
/***/ ((module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ CategoryList)
/* harmony export */ });
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2322);
/* harmony import */ var _cromwell_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1815);
/* harmony import */ var _cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4536);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _components_entity_entityTable_EntityTable__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(256);
/* harmony import */ var _constants_PageInfos__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(379);
/* harmony import */ var _helpers_customEntities__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4531);
/* harmony import */ var _helpers_forceUpdate__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8673);
/* harmony import */ var _components_HeaderActions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(3428);
/* harmony import */ var _components_TreeView__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(1511);
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_components_entity_entityTable_EntityTable__WEBPACK_IMPORTED_MODULE_4__, _helpers_customEntities__WEBPACK_IMPORTED_MODULE_6__]);
([_components_entity_entityTable_EntityTable__WEBPACK_IMPORTED_MODULE_4__, _helpers_customEntities__WEBPACK_IMPORTED_MODULE_6__] = __webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__);










const viewTypeKey = "crw_category_view_type";
function CategoryList() {
    const client = (0,_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__.getGraphQLClient)();
    const [view, setView] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(window.localStorage.getItem(viewTypeKey) || "list");
    const [updateRoot, setUpdateRoot] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)({});
    const entityListPageRef = (0,react__WEBPACK_IMPORTED_MODULE_3__.useRef)(null);
    const collapsedItemsRef = (0,react__WEBPACK_IMPORTED_MODULE_3__.useRef)({});
    const deletedItemsRef = (0,react__WEBPACK_IMPORTED_MODULE_3__.useRef)({});
    const forceUpdate = (0,_helpers_forceUpdate__WEBPACK_IMPORTED_MODULE_7__/* .useForceUpdate */ .N)();
    const handleCollapseAll = ()=>{
        collapsedItemsRef.current["all"] = false;
        forceUpdate();
    };
    const handleExpandAll = ()=>{
        collapsedItemsRef.current["all"] = true;
        forceUpdate();
    };
    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_entity_entityTable_EntityTable__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
        entityCategory: _cromwell_core__WEBPACK_IMPORTED_MODULE_1__.EDBEntity.ProductCategory,
        entityListRoute: _constants_PageInfos__WEBPACK_IMPORTED_MODULE_5__/* .categoryListPageInfo.route */ .ZE.route,
        entityBaseRoute: _constants_PageInfos__WEBPACK_IMPORTED_MODULE_5__/* .categoryPageInfo.baseRoute */ .t9.baseRoute,
        listLabel: "Categories",
        entityLabel: "Category",
        nameProperty: "name",
        customElements: {
            getHeaderRightActions: ()=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_HeaderActions__WEBPACK_IMPORTED_MODULE_8__/* .HeaderActions */ .k, {
                    view: view,
                    setView: (value)=>{
                        window.localStorage.setItem(viewTypeKey, value);
                        setView(value);
                    },
                    expandAll: handleExpandAll,
                    collapseAll: handleCollapseAll
                }),
            getTableContent: ()=>{
                if (view === "tree") {
                    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_TreeView__WEBPACK_IMPORTED_MODULE_9__/* .TreeView */ .L, {
                        entityListPageRef: entityListPageRef,
                        collapsedItemsRef: collapsedItemsRef,
                        updateRoot: updateRoot,
                        deletedItemsRef: deletedItemsRef
                    });
                }
            }
        },
        getPageListInstance: (inst)=>{
            entityListPageRef.current = inst;
        },
        getMany: client.getProductCategories,
        deleteOne: async (id)=>{
            deletedItemsRef.current[id] = true;
            const res = await client.deleteProductCategory(id);
            setUpdateRoot({});
            return res;
        },
        deleteMany: async (input, filters)=>{
            for (const id of input.ids)deletedItemsRef.current[id] = true;
            const res = await client.deleteManyProductCategories(input, filters);
            setUpdateRoot({});
            return res;
        },
        columns: [
            {
                name: "name",
                label: "Name",
                type: "Simple text",
                visible: true
            },
            {
                name: "mainImage",
                label: "Image",
                type: "Image",
                visible: true
            },
            {
                name: "parent",
                label: "Parent name",
                type: "Simple text",
                visible: true,
                applyFilter: (value, filter)=>{
                    filter.parentName = value;
                    return filter;
                },
                getValueView: (parent)=>parent?.name,
                customGraphQlProperty: {
                    parent: {
                        name: true
                    }
                }
            },
            {
                name: "parent",
                label: "Parent ID",
                type: "Simple text",
                visible: false,
                applyFilter: (value, filter)=>{
                    //@ts-ignore
                    filter.parentId = value;
                    return filter;
                },
                getValueView: (parent)=>parent?.id,
                customGraphQlProperty: {
                    parent: {
                        id: true
                    }
                }
            },
            ..._helpers_customEntities__WEBPACK_IMPORTED_MODULE_6__/* .baseEntityColumns.map */ .xz.map((col)=>{
                if (col.name === "createDate") return {
                    ...col,
                    visible: true
                };
                return {
                    ...col,
                    visible: false
                };
            })
        ]
    });
}

__webpack_async_result__();
} catch(e) { __webpack_async_result__(e); } });

/***/ }),

/***/ 3428:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "k": () => (/* binding */ HeaderActions)
/* harmony export */ });
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2322);
/* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2135);
/* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7915);
/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_mui_icons_material__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5692);
/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_mui_material__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8103);
/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(clsx__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _components_buttons_IconButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4137);
/* harmony import */ var _CategoryList_module_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1);
/* harmony import */ var _CategoryList_module_scss__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_CategoryList_module_scss__WEBPACK_IMPORTED_MODULE_7__);








function HeaderActions({ view , setView , collapseAll , expandAll  }) {
    return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Box, {
        className: (_CategoryList_module_scss__WEBPACK_IMPORTED_MODULE_7___default().HeaderActions),
        children: [
            view === "tree" && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Tooltip, {
                        title: "Expand all",
                        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_buttons_IconButton__WEBPACK_IMPORTED_MODULE_6__/* .IconButton */ .h, {
                            "aria-label": "Expand all",
                            onClick: expandAll,
                            children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_icons_material__WEBPACK_IMPORTED_MODULE_2__.UnfoldMore, {
                                style: {
                                    width: "1.25rem",
                                    height: "1.25rem"
                                }
                            })
                        })
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Tooltip, {
                        title: "Collapse all",
                        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_buttons_IconButton__WEBPACK_IMPORTED_MODULE_6__/* .IconButton */ .h, {
                            "aria-label": "Collapse all",
                            onClick: collapseAll,
                            children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_icons_material__WEBPACK_IMPORTED_MODULE_2__.UnfoldLess, {
                                style: {
                                    width: "1.25rem",
                                    height: "1.25rem"
                                }
                            })
                        })
                    })
                ]
            }),
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Tooltip, {
                title: `Switch to ${view === "list" ? "tree" : "list"} view`,
                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_buttons_IconButton__WEBPACK_IMPORTED_MODULE_6__/* .IconButton */ .h, {
                    onClick: ()=>setView(view === "list" ? "tree" : "list"),
                    children: view === "list" ? /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                        className: clsx__WEBPACK_IMPORTED_MODULE_4___default()((_CategoryList_module_scss__WEBPACK_IMPORTED_MODULE_7___default().switchViewIcon), "w-5 h-5"),
                        style: {
                            backgroundImage: `url(/admin/static/subfolder.png)`
                        }
                    }) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__.QueueListIcon, {
                        className: clsx__WEBPACK_IMPORTED_MODULE_4___default()("w-5 h-5")
                    })
                })
            })
        ]
    });
}


/***/ }),

/***/ 1511:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";

// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  "L": () => (/* binding */ TreeView)
});

// EXTERNAL MODULE: ../../node_modules/react/jsx-runtime.js
var jsx_runtime = __webpack_require__(2322);
// EXTERNAL MODULE: ../core/frontend/dist/_index.js
var _index = __webpack_require__(4536);
// EXTERNAL MODULE: external "@mui/material"
var material_ = __webpack_require__(5692);
// EXTERNAL MODULE: external "react"
var external_react_ = __webpack_require__(6689);
// EXTERNAL MODULE: ./src/redux/helpers.ts
var helpers = __webpack_require__(3547);
// EXTERNAL MODULE: ./src/router-pages/categoryList/CategoryList.module.scss
var CategoryList_module = __webpack_require__(1);
var CategoryList_module_default = /*#__PURE__*/__webpack_require__.n(CategoryList_module);
// EXTERNAL MODULE: external "@apollo/client"
var client_ = __webpack_require__(9114);
// EXTERNAL MODULE: external "@heroicons/react/24/outline"
var outline_ = __webpack_require__(2135);
// EXTERNAL MODULE: external "@mui/icons-material"
var icons_material_ = __webpack_require__(7915);
// EXTERNAL MODULE: external "@mui/icons-material/Star"
var Star_ = __webpack_require__(7849);
var Star_default = /*#__PURE__*/__webpack_require__.n(Star_);
// EXTERNAL MODULE: external "@mui/icons-material/StarBorder"
var StarBorder_ = __webpack_require__(5327);
var StarBorder_default = /*#__PURE__*/__webpack_require__.n(StarBorder_);
// EXTERNAL MODULE: external "react-redux"
var external_react_redux_ = __webpack_require__(6022);
// EXTERNAL MODULE: external "react-router-dom"
var external_react_router_dom_ = __webpack_require__(4661);
// EXTERNAL MODULE: external "react-spring"
var external_react_spring_ = __webpack_require__(4417);
// EXTERNAL MODULE: ./src/components/buttons/IconButton.tsx
var IconButton = __webpack_require__(4137);
// EXTERNAL MODULE: ./src/components/inputs/CheckboxInput.tsx + 3 modules
var CheckboxInput = __webpack_require__(9404);
// EXTERNAL MODULE: ./src/constants/PageInfos.ts
var PageInfos = __webpack_require__(379);
// EXTERNAL MODULE: ./src/helpers/forceUpdate.ts
var helpers_forceUpdate = __webpack_require__(8673);
// EXTERNAL MODULE: ./src/redux/store.ts
var store = __webpack_require__(6295);
// EXTERNAL MODULE: ./src/styles/common.module.scss
var common_module = __webpack_require__(1490);
var common_module_default = /*#__PURE__*/__webpack_require__.n(common_module);
// EXTERNAL MODULE: ./src/router-pages/categoryList/components/CategoryItem.module.scss
var CategoryItem_module = __webpack_require__(7367);
var CategoryItem_module_default = /*#__PURE__*/__webpack_require__.n(CategoryItem_module);
;// CONCATENATED MODULE: ./src/router-pages/categoryList/components/CategoryItem.tsx



















const mapStateToProps = (state)=>{
    return {
        selectedItems: state.selectedItems,
        allSelected: state.allSelected,
        selectedItem: state.selectedItem
    };
};
const CategoryItem = (props)=>{
    const { data: category  } = props;
    const client = (0,_index.getGraphQLClient)();
    let expanded = !!props.collapsedItemsRef?.current[category.id];
    const embeddedView = props.listItemProps?.embeddedView;
    const { allSelected , selectedItem , selectedItems  } = (0,external_react_redux_.useSelector)(mapStateToProps);
    const [isLoading, setIsLoading] = (0,external_react_.useState)(false);
    const [childCategories, setChildCategories] = (0,external_react_.useState)(null);
    const forceUpdate = (0,helpers_forceUpdate/* useForceUpdate */.N)();
    if (props.collapsedItemsRef?.current["all"] === true && !expanded) {
        props.collapsedItemsRef.current[category.id] = true;
        expanded = true;
    }
    if (props.collapsedItemsRef?.current["all"] === false && expanded) {
        props.collapsedItemsRef.current[category.id] = false;
        expanded = false;
    }
    const setExpanded = (val)=>{
        props.collapsedItemsRef.current["all"] = undefined;
        props.collapsedItemsRef.current[category.id] = !val;
        forceUpdate();
    };
    const handleToggleCollapse = async ()=>{
        setExpanded(expanded);
    };
    const togglePrimary = ()=>{
        if (selectedItem !== category.id) {
            store/* store.setStateProp */.h.setStateProp({
                prop: "selectedItem",
                payload: category.id
            });
        } else {
            store/* store.setStateProp */.h.setStateProp({
                prop: "selectedItem",
                payload: undefined
            });
        }
    };
    const loadChildren = async ()=>{
        setIsLoading(true);
        let childrenInfo;
        try {
            childrenInfo = await client.getProductCategoryById(category.id, client_.gql`
          fragment ChildrenCategoryFragment on ProductCategory {
            children {
              id
              slug
              isEnabled
              name
              mainImage
              children {
                id
                slug
              }
            }
          }
        `, "ChildrenCategoryFragment");
        } catch (e) {
            console.error(e);
        }
        setIsLoading(false);
        setChildCategories(childrenInfo.children ?? []);
    };
    (0,external_react_.useEffect)(()=>{
        if (expanded && !childCategories) {
            loadChildren();
        }
    }, [
        expanded
    ]);
    const handleDelete = ()=>{
        props.listItemProps.handleDeleteCategory(category);
    };
    const hasChildren = Boolean(category.children && category.children.length > 0);
    let selected = false;
    if (allSelected && !selectedItems[category.id]) selected = true;
    if (!allSelected && selectedItems[category.id]) selected = true;
    const isPrimary = selectedItem === category.id;
    if (props.deletedItemsRef?.current[category.id]) {
        return /*#__PURE__*/ jsx_runtime.jsx(jsx_runtime.Fragment, {});
    }
    return /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
        className: `${(CategoryItem_module_default()).CategoryItem}`,
        children: [
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(material_.Grid, {
                container: true,
                className: (CategoryItem_module_default()).header,
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsxs)(material_.Grid, {
                        item: true,
                        xs: 9,
                        className: (CategoryItem_module_default()).headerLeft,
                        children: [
                            hasChildren ? /*#__PURE__*/ jsx_runtime.jsx(IconButton/* IconButton */.h, {
                                onClick: handleToggleCollapse,
                                className: (CategoryItem_module_default()).expandBtn,
                                children: /*#__PURE__*/ jsx_runtime.jsx(icons_material_.ExpandMore, {
                                    className: (CategoryItem_module_default()).expandMoreIcon,
                                    style: {
                                        transform: expanded ? "rotate(180deg)" : ""
                                    }
                                })
                            }) : /*#__PURE__*/ jsx_runtime.jsx("div", {
                                style: {
                                    height: "38px",
                                    width: "40px"
                                }
                            }),
                            /*#__PURE__*/ jsx_runtime.jsx("div", {
                                className: (common_module_default()).center,
                                children: /*#__PURE__*/ jsx_runtime.jsx(CheckboxInput/* CheckboxInput */.I, {
                                    checked: selected,
                                    onChange: ()=>props.listItemProps.toggleSelection(category)
                                })
                            }),
                            embeddedView && selected && /*#__PURE__*/ jsx_runtime.jsx("div", {
                                className: (common_module_default()).center,
                                children: /*#__PURE__*/ jsx_runtime.jsx(material_.Tooltip, {
                                    title: isPrimary ? "Primary category" : "Set as primary category",
                                    children: /*#__PURE__*/ jsx_runtime.jsx(IconButton/* IconButton */.h, {
                                        onClick: togglePrimary,
                                        children: isPrimary ? /*#__PURE__*/ jsx_runtime.jsx((Star_default()), {}) : /*#__PURE__*/ jsx_runtime.jsx((StarBorder_default()), {})
                                    })
                                })
                            }),
                            /*#__PURE__*/ jsx_runtime.jsx("p", {
                                className: (CategoryItem_module_default()).ellipsis,
                                children: category.name
                            })
                        ]
                    }),
                    /*#__PURE__*/ (0,jsx_runtime.jsxs)(material_.Grid, {
                        item: true,
                        xs: 3,
                        className: `${(CategoryItem_module_default()).itemActions} `,
                        children: [
                            /*#__PURE__*/ jsx_runtime.jsx(external_react_router_dom_.Link, {
                                to: `${PageInfos/* categoryPageInfo.baseRoute */.t9.baseRoute}/new?parentId=${category?.id}`,
                                children: /*#__PURE__*/ jsx_runtime.jsx(material_.Tooltip, {
                                    title: "Add subcategory",
                                    children: /*#__PURE__*/ jsx_runtime.jsx(IconButton/* IconButton */.h, {
                                        className: (CategoryItem_module_default()).itemActionBtn,
                                        "aria-label": "Add subcategory",
                                        children: /*#__PURE__*/ jsx_runtime.jsx(icons_material_.SubdirectoryArrowRight, {
                                            className: "h-4 w-4 text-gray-300",
                                            style: {
                                                width: "1.1rem",
                                                height: "1.1rem"
                                            }
                                        })
                                    })
                                })
                            }),
                            /*#__PURE__*/ jsx_runtime.jsx(external_react_router_dom_.Link, {
                                to: `${PageInfos/* categoryPageInfo.baseRoute */.t9.baseRoute}/${category?.id}`,
                                children: /*#__PURE__*/ jsx_runtime.jsx(material_.Tooltip, {
                                    title: "Edit",
                                    children: /*#__PURE__*/ jsx_runtime.jsx(IconButton/* IconButton */.h, {
                                        className: (CategoryItem_module_default()).actionBtn,
                                        "aria-label": "Edit",
                                        children: /*#__PURE__*/ jsx_runtime.jsx(outline_.PencilIcon, {
                                            className: "h-4 text-gray-300 w-4 float-right "
                                        })
                                    })
                                })
                            }),
                            /*#__PURE__*/ jsx_runtime.jsx(material_.Tooltip, {
                                title: "Delete",
                                children: /*#__PURE__*/ jsx_runtime.jsx(IconButton/* IconButton */.h, {
                                    className: (CategoryItem_module_default()).actionBtn,
                                    "aria-label": "Delete",
                                    onClick: handleDelete,
                                    children: /*#__PURE__*/ jsx_runtime.jsx(outline_.TrashIcon, {
                                        "aria-label": "delete",
                                        className: "h-4 text-gray-300 w-4"
                                    })
                                })
                            })
                        ]
                    })
                ]
            }),
            hasChildren && /*#__PURE__*/ jsx_runtime.jsx("div", {
                className: (CategoryItem_module_default()).subList,
                children: isLoading ? (category.children?.map((child)=>/*#__PURE__*/ jsx_runtime.jsx(material_.Skeleton, {
                        variant: "text",
                        height: "30px",
                        style: {
                            margin: "10px 20px"
                        }
                    }, child.id))) : /*#__PURE__*/ jsx_runtime.jsx(TransitionComponent, {
                    in: expanded,
                    children: childCategories?.map((childCat)=>{
                        return /*#__PURE__*/ jsx_runtime.jsx(CategoryItem, {
                            data: childCat,
                            collapsedItemsRef: props.collapsedItemsRef,
                            deletedItemsRef: props.deletedItemsRef,
                            listItemProps: props.listItemProps
                        }, childCat.id);
                    })
                })
            })
        ]
    });
};
function TransitionComponent(props) {
    const style = (0,external_react_spring_.useSpring)({
        from: {
            opacity: 0,
            transform: "translate3d(20px,0,0)"
        },
        to: {
            opacity: props.in ? 1 : 0,
            transform: `translate3d(${props.in ? 0 : 20}px,0,0)`
        }
    });
    return /*#__PURE__*/ jsx_runtime.jsx(external_react_spring_.animated.div, {
        style: style,
        children: /*#__PURE__*/ jsx_runtime.jsx(material_.Collapse, {
            ...props
        })
    });
}
/* harmony default export */ const components_CategoryItem = (CategoryItem);

;// CONCATENATED MODULE: ./src/router-pages/categoryList/components/TreeView.tsx







function TreeView(props) {
    const client = (0,_index.getGraphQLClient)();
    const [isLoading, setIsLoading] = (0,external_react_.useState)(false);
    const [rootCategories, setRootCategories] = (0,external_react_.useState)(null);
    const totalElements = (0,external_react_.useRef)(null);
    const handleDeleteCategory = async (category)=>{
        const success = await props.entityListPageRef.current.handleDeleteItem(category);
        if (!success) return;
        props.deletedItemsRef.current[category.id] = true;
        await getRootCategories();
    };
    const getRootCategories = async ()=>{
        setIsLoading(true);
        try {
            const categories = await client.getRootCategories();
            if (categories?.elements && Array.isArray(categories?.elements)) {
                setRootCategories(categories.elements);
                totalElements.current = categories.pagedMeta?.totalElements;
            }
        } catch (e) {
            console.error(e);
        }
        setIsLoading(false);
    };
    const handleToggleItemSelection = (data)=>{
        (0,helpers/* toggleItemSelection */.xE)(data.id);
    };
    (0,external_react_.useEffect)(()=>{
        getRootCategories();
        (0,helpers/* resetSelected */.W4)();
        return ()=>{
            (0,helpers/* resetSelected */.W4)();
        };
    }, [
        props.updateRoot
    ]);
    return /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
        className: (CategoryList_module_default()).treeList,
        children: [
            isLoading && Array(5).fill(1).map((it, index)=>{
                return /*#__PURE__*/ jsx_runtime.jsx(material_.Skeleton, {
                    variant: "text",
                    height: "20px",
                    style: {
                        margin: "20px 20px 0 20px"
                    }
                }, index);
            }),
            rootCategories?.map((category)=>{
                return /*#__PURE__*/ jsx_runtime.jsx(components_CategoryItem, {
                    data: category,
                    collapsedItemsRef: props.collapsedItemsRef,
                    deletedItemsRef: props.deletedItemsRef,
                    listItemProps: {
                        handleDeleteCategory,
                        toggleSelection: handleToggleItemSelection,
                        embeddedView: false
                    }
                }, category.id);
            })
        ]
    });
}


/***/ })

};
;