@greenbone/ui-lib 1.0.1-alpha8 → 1.1.1-alpha0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"RemotePersistentFilterDropdown",{enumerable:true,get:function(){return RemotePersistentFilterDropdown}});const _jsxruntime=require("react/jsx-runtime");const _react=/*#__PURE__*/_interop_require_wildcard(require("react"));const _lucidereact=require("lucide-react");const _RemotePersistentFilterDropdownmodulecss=/*#__PURE__*/_interop_require_default(require("./RemotePersistentFilterDropdown.module.css"));const _core=require("@mantine/core");const _reacti18next=require("react-i18next");const _Tooltip=require("../../Tooltip");const _ConfirmationDialog=require("../../ConfirmationDialog");const _genericTypes=require("../../../genericTypes");const _Typo=require("../../Typo");const _theme=require("../../../theme");function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap;var cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interop_require_wildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj}}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj)}var newObj={__proto__:null};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc)}else{newObj[key]=obj[key]}}}newObj.default=obj;if(cache){cache.set(obj,newObj)}return newObj}const RemotePersistentFilterDropdown=({remotePersistentFilters,onSelect,onDelete})=>{const{t}=(0,_reacti18next.useTranslation)();const[selectedFilter,setSelectedFilter]=(0,_react.useState)();const[modalData,setModalData]=(0,_react.useState)(null);const combobox=(0,_core.useCombobox)();const dropdownList=(0,_react.useMemo)(()=>remotePersistentFilters.map(filter=>({value:filter.id,label:filter.filterName})),[remotePersistentFilters]);const handleClick=()=>combobox.toggleDropdown();(0,_react.useEffect)(()=>{if(selectedFilter)onSelect(selectedFilter)},[selectedFilter,onSelect]);const handleSelect=(0,_react.useCallback)(filter=>{if(filter){combobox.closeDropdown();setSelectedFilter(filter)}},[combobox]);const handleDelete=(0,_react.useCallback)((e,filterId)=>{e.stopPropagation();setModalData(filterId)},[]);const handleConfirmDelete=(0,_react.useCallback)(()=>{if(modalData){onDelete(modalData);setModalData(null)}},[modalData,onDelete]);const options=(0,_react.useMemo)(()=>dropdownList.sort((a,b)=>a.label.localeCompare(b.label)).map(item=>(0,_jsxruntime.jsx)(_core.Combobox.Option,{"data-testid":"dropdown-option",value:item.value,children:(0,_jsxruntime.jsxs)(_core.Group,{className:_RemotePersistentFilterDropdownmodulecss.default.options,children:[item.label.length>35?(0,_jsxruntime.jsx)(_Tooltip.Tooltip,{label:item.label,children:(0,_jsxruntime.jsx)("span",{className:_RemotePersistentFilterDropdownmodulecss.default["truncate-text"],children:item.label})}):(0,_jsxruntime.jsx)("span",{children:item.label}),(0,_jsxruntime.jsx)(_Tooltip.Tooltip,{label:t("Delete filter"),children:(0,_jsxruntime.jsx)(_lucidereact.Trash2,{"data-testid":"delete-icon",color:"red",size:16,className:_RemotePersistentFilterDropdownmodulecss.default["options-label"],onClick:e=>handleDelete(e,item.value)})})]})},item.value)),[dropdownList,handleDelete,t]);const emptyOption=(0,_jsxruntime.jsx)(_core.Combobox.Option,{value:"",children:(0,_jsxruntime.jsx)(_core.Group,{className:_RemotePersistentFilterDropdownmodulecss.default.options,children:(0,_jsxruntime.jsx)("span",{children:t("No saved filters available")})})},"");return(0,_jsxruntime.jsxs)(_jsxruntime.Fragment,{children:[(0,_jsxruntime.jsxs)(_core.Combobox,{store:combobox,width:300,position:"bottom-start",withArrow:true,onOptionSubmit:handleSelect,styles:{dropdown:{zIndex:_theme.Z_INDEX_LAYER.GROUND.HIGHEST,maxHeight:"258px",overflow:"auto"}},children:[(0,_jsxruntime.jsx)(_core.Combobox.Target,{children:(0,_jsxruntime.jsx)("div",{"data-testid":"filter-icon",className:_RemotePersistentFilterDropdownmodulecss.default.actions,onClick:handleClick,children:(0,_jsxruntime.jsx)(_Tooltip.Tooltip,{offset:15,label:t("Saved filters"),children:(0,_jsxruntime.jsx)(_lucidereact.Filter,{"data-testid":"filter-chevron-image",color:"var(--filter-chevron-color)",size:16})})})}),(0,_jsxruntime.jsx)(_core.Combobox.Dropdown,{children:(0,_jsxruntime.jsx)(_core.Combobox.Options,{children:options.length>0?options:emptyOption})})]}),(0,_jsxruntime.jsx)(_ConfirmationDialog.ConfirmationDialog,{alertStatus:_genericTypes.EStatus.ERROR,title:t("Delete filter"),content:(0,_jsxruntime.jsx)(_Typo.Typo,{type:"body",children:t("Do you really want to delete this filter?")}),opened:!!modalData,onClose:()=>setModalData(null),confirmationButtonText:t("Confirm"),confirmationButtonVariant:"danger",cancelButtonText:t("Cancel"),onSubmit:handleConfirmDelete})]})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"RemotePersistentFilterDropdown",{enumerable:true,get:function(){return RemotePersistentFilterDropdown}});const _jsxruntime=require("react/jsx-runtime");const _react=/*#__PURE__*/_interop_require_wildcard(require("react"));const _lucidereact=require("lucide-react");const _RemotePersistentFilterDropdownmodulecss=/*#__PURE__*/_interop_require_default(require("./RemotePersistentFilterDropdown.module.css"));const _core=require("@mantine/core");const _reacti18next=require("react-i18next");const _Tooltip=require("../../Tooltip");const _ConfirmationDialog=require("../../ConfirmationDialog");const _genericTypes=require("../../../genericTypes");const _Typo=require("../../Typo");const _theme=require("../../../theme");function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap;var cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interop_require_wildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj}}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj)}var newObj={__proto__:null};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc)}else{newObj[key]=obj[key]}}}newObj.default=obj;if(cache){cache.set(obj,newObj)}return newObj}const RemotePersistentFilterDropdown=({remotePersistentFilters,onSelect,onDelete})=>{const{t}=(0,_reacti18next.useTranslation)();const[selectedFilter,setSelectedFilter]=(0,_react.useState)();const[modalData,setModalData]=(0,_react.useState)(null);const combobox=(0,_core.useCombobox)();const dropdownList=(0,_react.useMemo)(()=>remotePersistentFilters.map(filter=>({value:filter.id,label:filter.filterName})),[remotePersistentFilters]);const handleClick=()=>combobox.toggleDropdown();(0,_react.useEffect)(()=>{if(selectedFilter)onSelect(selectedFilter)},[selectedFilter,onSelect]);const handleSelect=(0,_react.useCallback)(filter=>{if(filter){combobox.closeDropdown();setSelectedFilter(filter)}},[combobox]);const handleDelete=(0,_react.useCallback)((e,filterId)=>{e.stopPropagation();setModalData(filterId)},[]);const handleConfirmDelete=(0,_react.useCallback)(()=>{if(modalData){onDelete(modalData);setModalData(null)}},[modalData,onDelete]);const options=(0,_react.useMemo)(()=>dropdownList.sort((a,b)=>a.label.localeCompare(b.label)).map(item=>(0,_jsxruntime.jsx)(_core.Combobox.Option,{"data-testid":"dropdown-option",value:item.value,children:(0,_jsxruntime.jsxs)(_core.Group,{className:_RemotePersistentFilterDropdownmodulecss.default.options,children:[item.label.length>35?(0,_jsxruntime.jsx)(_Tooltip.Tooltip,{label:item.label,children:(0,_jsxruntime.jsx)("span",{className:_RemotePersistentFilterDropdownmodulecss.default["truncate-text"],children:item.label})}):(0,_jsxruntime.jsx)("span",{children:item.label}),(0,_jsxruntime.jsx)(_Tooltip.Tooltip,{label:t("Delete filter"),children:(0,_jsxruntime.jsx)(_lucidereact.Trash2,{"data-testid":"delete-icon",color:"red",size:16,className:_RemotePersistentFilterDropdownmodulecss.default["options-label"],onClick:e=>handleDelete(e,item.value)})})]})},item.value)),[dropdownList,handleDelete,t]);const emptyOption=(0,_jsxruntime.jsx)(_core.Combobox.Option,{value:"",children:(0,_jsxruntime.jsx)(_core.Group,{className:_RemotePersistentFilterDropdownmodulecss.default.options,children:(0,_jsxruntime.jsx)("span",{children:t("No saved filters available")})})},"");return(0,_jsxruntime.jsxs)(_jsxruntime.Fragment,{children:[(0,_jsxruntime.jsxs)(_core.Combobox,{store:combobox,width:300,position:"bottom-start",withArrow:true,onOptionSubmit:handleSelect,styles:{dropdown:{zIndex:_theme.Z_INDEX_LAYER.GROUND.HIGHEST,maxHeight:"238px",overflow:"auto"}},children:[(0,_jsxruntime.jsx)(_core.Combobox.Target,{children:(0,_jsxruntime.jsx)("div",{"data-testid":"filter-icon",className:_RemotePersistentFilterDropdownmodulecss.default.actions,onClick:handleClick,children:(0,_jsxruntime.jsx)(_Tooltip.Tooltip,{offset:15,label:t("Saved filters"),children:(0,_jsxruntime.jsx)(_lucidereact.Filter,{"data-testid":"filter-chevron-image",color:"var(--filter-chevron-color)",size:16})})})}),(0,_jsxruntime.jsx)(_core.Combobox.Dropdown,{children:(0,_jsxruntime.jsx)(_core.Combobox.Options,{children:options.length>0?options:emptyOption})})]}),(0,_jsxruntime.jsx)(_ConfirmationDialog.ConfirmationDialog,{alertStatus:_genericTypes.EStatus.ERROR,title:t("Delete filter"),content:(0,_jsxruntime.jsx)(_Typo.Typo,{type:"body",children:t("Do you really want to delete this filter?")}),opened:!!modalData,onClose:()=>setModalData(null),confirmationButtonText:t("Confirm"),confirmationButtonVariant:"danger",cancelButtonText:t("Cancel"),onSubmit:handleConfirmDelete})]})};
2
2
  //# sourceMappingURL=RemotePersistentFilterDropdown.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/Filter/RemotePersistence/RemotePersistentFilterDropdown.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\"\nimport { Filter, Trash2 } from \"lucide-react\"\nimport classes from \"./RemotePersistentFilterDropdown.module.css\"\nimport { TFilter } from \"../utils\"\nimport { TRemotePersistentFilter } from \"./types\"\nimport { Combobox, Group, useCombobox } from \"@mantine/core\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tooltip } from \"../../Tooltip\"\nimport { ConfirmationDialog } from \"../../ConfirmationDialog\"\nimport { EStatus } from \"../../../genericTypes\"\nimport { Typo } from \"../../Typo\"\nimport { Z_INDEX_LAYER } from \"../../../theme\"\n\ntype TFilterDropdownProps = {\n config: TFilter.Config\n onSelect: (id: string) => void\n onDelete: (id: string) => void\n remotePersistentFilters: TRemotePersistentFilter[]\n}\n\nconst RemotePersistentFilterDropdown: React.FC<TFilterDropdownProps> = ({\n remotePersistentFilters,\n onSelect,\n onDelete,\n}) => {\n const { t } = useTranslation()\n const [selectedFilter, setSelectedFilter] = useState<string>()\n const [modalData, setModalData] = useState<string | null>(null)\n const combobox = useCombobox()\n\n const dropdownList = useMemo(\n () =>\n remotePersistentFilters.map((filter) => ({\n value: filter.id,\n label: filter.filterName,\n })),\n [remotePersistentFilters]\n )\n\n const handleClick = () => combobox.toggleDropdown()\n\n useEffect(() => {\n if (selectedFilter) onSelect(selectedFilter)\n }, [selectedFilter, onSelect])\n\n const handleSelect = useCallback(\n (filter: string) => {\n if (filter) {\n combobox.closeDropdown()\n setSelectedFilter(filter)\n }\n },\n [combobox]\n )\n\n const handleDelete = useCallback((e: React.MouseEvent<SVGSVGElement>, filterId: string) => {\n e.stopPropagation()\n setModalData(filterId)\n }, [])\n\n const handleConfirmDelete = useCallback(() => {\n if (modalData) {\n onDelete(modalData)\n setModalData(null)\n }\n }, [modalData, onDelete])\n\n const options = useMemo(\n () =>\n dropdownList\n .sort((a, b) => a.label.localeCompare(b.label))\n .map((item) => (\n <Combobox.Option data-testid=\"dropdown-option\" value={item.value} key={item.value}>\n <Group className={classes.options}>\n {item.label.length > 35 ? (\n <Tooltip label={item.label}>\n <span className={classes[\"truncate-text\"]}>{item.label}</span>\n </Tooltip>\n ) : (\n <span>{item.label}</span>\n )}\n <Tooltip label={t(\"Delete filter\")}>\n <Trash2\n data-testid={\"delete-icon\"}\n color=\"red\"\n size={16}\n className={classes[\"options-label\"]}\n onClick={(e) => handleDelete(e, item.value)}\n />\n </Tooltip>\n </Group>\n </Combobox.Option>\n )),\n [dropdownList, handleDelete, t]\n )\n\n const emptyOption = (\n <Combobox.Option value={\"\"} key={\"\"}>\n <Group className={classes.options}>\n <span>{t(\"No saved filters available\")}</span>\n </Group>\n </Combobox.Option>\n )\n\n return (\n <>\n <Combobox\n store={combobox}\n width={300}\n position=\"bottom-start\"\n withArrow\n onOptionSubmit={handleSelect}\n styles={{\n dropdown: { zIndex: Z_INDEX_LAYER.GROUND.HIGHEST, maxHeight: \"258px\", overflow: \"auto\" },\n }}\n >\n <Combobox.Target>\n <div data-testid={\"filter-icon\"} className={classes.actions} onClick={handleClick}>\n <Tooltip offset={15} label={t(\"Saved filters\")}>\n <Filter\n data-testid={\"filter-chevron-image\"}\n color={\"var(--filter-chevron-color)\"}\n size={16}\n />\n </Tooltip>\n </div>\n </Combobox.Target>\n\n <Combobox.Dropdown>\n <Combobox.Options>{options.length > 0 ? options : emptyOption}</Combobox.Options>\n </Combobox.Dropdown>\n </Combobox>\n\n <ConfirmationDialog\n alertStatus={EStatus.ERROR}\n title={t(\"Delete filter\")}\n content={<Typo type=\"body\">{t(\"Do you really want to delete this filter?\")}</Typo>}\n opened={!!modalData}\n onClose={() => setModalData(null)}\n confirmationButtonText={t(\"Confirm\")}\n confirmationButtonVariant={\"danger\"}\n cancelButtonText={t(\"Cancel\")}\n onSubmit={handleConfirmDelete}\n />\n </>\n )\n}\n\nexport { RemotePersistentFilterDropdown }\n"],"names":["RemotePersistentFilterDropdown","remotePersistentFilters","onSelect","onDelete","t","useTranslation","selectedFilter","setSelectedFilter","useState","modalData","setModalData","combobox","useCombobox","dropdownList","useMemo","map","filter","value","id","label","filterName","handleClick","toggleDropdown","useEffect","handleSelect","useCallback","closeDropdown","handleDelete","e","filterId","stopPropagation","handleConfirmDelete","options","sort","a","b","localeCompare","item","Combobox","Option","data-testid","Group","className","classes","length","Tooltip","span","Trash2","color","size","onClick","emptyOption","store","width","position","withArrow","onOptionSubmit","styles","dropdown","zIndex","Z_INDEX_LAYER","GROUND","HIGHEST","maxHeight","overflow","Target","div","actions","offset","Filter","Dropdown","Options","ConfirmationDialog","alertStatus","EStatus","ERROR","title","content","Typo","type","opened","onClose","confirmationButtonText","confirmationButtonVariant","cancelButtonText","onSubmit"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../../src/components/Filter/RemotePersistence/RemotePersistentFilterDropdown.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\"\nimport { Filter, Trash2 } from \"lucide-react\"\nimport classes from \"./RemotePersistentFilterDropdown.module.css\"\nimport { TFilter } from \"../utils\"\nimport { TRemotePersistentFilter } from \"./types\"\nimport { Combobox, Group, useCombobox } from \"@mantine/core\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tooltip } from \"../../Tooltip\"\nimport { ConfirmationDialog } from \"../../ConfirmationDialog\"\nimport { EStatus } from \"../../../genericTypes\"\nimport { Typo } from \"../../Typo\"\nimport { Z_INDEX_LAYER } from \"../../../theme\"\n\ntype TFilterDropdownProps = {\n config: TFilter.Config\n onSelect: (id: string) => void\n onDelete: (id: string) => void\n remotePersistentFilters: TRemotePersistentFilter[]\n}\n\nconst RemotePersistentFilterDropdown: React.FC<TFilterDropdownProps> = ({\n remotePersistentFilters,\n onSelect,\n onDelete,\n}) => {\n const { t } = useTranslation()\n const [selectedFilter, setSelectedFilter] = useState<string>()\n const [modalData, setModalData] = useState<string | null>(null)\n const combobox = useCombobox()\n\n const dropdownList = useMemo(\n () =>\n remotePersistentFilters.map((filter) => ({\n value: filter.id,\n label: filter.filterName,\n })),\n [remotePersistentFilters]\n )\n\n const handleClick = () => combobox.toggleDropdown()\n\n useEffect(() => {\n if (selectedFilter) onSelect(selectedFilter)\n }, [selectedFilter, onSelect])\n\n const handleSelect = useCallback(\n (filter: string) => {\n if (filter) {\n combobox.closeDropdown()\n setSelectedFilter(filter)\n }\n },\n [combobox]\n )\n\n const handleDelete = useCallback((e: React.MouseEvent<SVGSVGElement>, filterId: string) => {\n e.stopPropagation()\n setModalData(filterId)\n }, [])\n\n const handleConfirmDelete = useCallback(() => {\n if (modalData) {\n onDelete(modalData)\n setModalData(null)\n }\n }, [modalData, onDelete])\n\n const options = useMemo(\n () =>\n dropdownList\n .sort((a, b) => a.label.localeCompare(b.label))\n .map((item) => (\n <Combobox.Option data-testid=\"dropdown-option\" value={item.value} key={item.value}>\n <Group className={classes.options}>\n {item.label.length > 35 ? (\n <Tooltip label={item.label}>\n <span className={classes[\"truncate-text\"]}>{item.label}</span>\n </Tooltip>\n ) : (\n <span>{item.label}</span>\n )}\n <Tooltip label={t(\"Delete filter\")}>\n <Trash2\n data-testid={\"delete-icon\"}\n color=\"red\"\n size={16}\n className={classes[\"options-label\"]}\n onClick={(e) => handleDelete(e, item.value)}\n />\n </Tooltip>\n </Group>\n </Combobox.Option>\n )),\n [dropdownList, handleDelete, t]\n )\n\n const emptyOption = (\n <Combobox.Option value={\"\"} key={\"\"}>\n <Group className={classes.options}>\n <span>{t(\"No saved filters available\")}</span>\n </Group>\n </Combobox.Option>\n )\n\n return (\n <>\n <Combobox\n store={combobox}\n width={300}\n position=\"bottom-start\"\n withArrow\n onOptionSubmit={handleSelect}\n styles={{\n dropdown: { zIndex: Z_INDEX_LAYER.GROUND.HIGHEST, maxHeight: \"238px\", overflow: \"auto\" },\n }}\n >\n <Combobox.Target>\n <div data-testid={\"filter-icon\"} className={classes.actions} onClick={handleClick}>\n <Tooltip offset={15} label={t(\"Saved filters\")}>\n <Filter\n data-testid={\"filter-chevron-image\"}\n color={\"var(--filter-chevron-color)\"}\n size={16}\n />\n </Tooltip>\n </div>\n </Combobox.Target>\n\n <Combobox.Dropdown>\n <Combobox.Options>{options.length > 0 ? options : emptyOption}</Combobox.Options>\n </Combobox.Dropdown>\n </Combobox>\n\n <ConfirmationDialog\n alertStatus={EStatus.ERROR}\n title={t(\"Delete filter\")}\n content={<Typo type=\"body\">{t(\"Do you really want to delete this filter?\")}</Typo>}\n opened={!!modalData}\n onClose={() => setModalData(null)}\n confirmationButtonText={t(\"Confirm\")}\n confirmationButtonVariant={\"danger\"}\n cancelButtonText={t(\"Cancel\")}\n onSubmit={handleConfirmDelete}\n />\n </>\n )\n}\n\nexport { RemotePersistentFilterDropdown }\n"],"names":["RemotePersistentFilterDropdown","remotePersistentFilters","onSelect","onDelete","t","useTranslation","selectedFilter","setSelectedFilter","useState","modalData","setModalData","combobox","useCombobox","dropdownList","useMemo","map","filter","value","id","label","filterName","handleClick","toggleDropdown","useEffect","handleSelect","useCallback","closeDropdown","handleDelete","e","filterId","stopPropagation","handleConfirmDelete","options","sort","a","b","localeCompare","item","Combobox","Option","data-testid","Group","className","classes","length","Tooltip","span","Trash2","color","size","onClick","emptyOption","store","width","position","withArrow","onOptionSubmit","styles","dropdown","zIndex","Z_INDEX_LAYER","GROUND","HIGHEST","maxHeight","overflow","Target","div","actions","offset","Filter","Dropdown","Options","ConfirmationDialog","alertStatus","EStatus","ERROR","title","content","Typo","type","opened","onClose","confirmationButtonText","confirmationButtonVariant","cancelButtonText","onSubmit"],"mappings":"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"}
@@ -1 +1 @@
1
- .navigation{border-right:var(--navigation-border-right);box-sizing:border-box;height:100%;padding:10px var(--mantine-spacing-xs);width:var(--navbar-width)}.navigation a:hover{text-decoration:none}.navigation-item-without-icon{padding-left:2.5rem}.divider-root{border-color:var(--divider-border-color)}:root[data-mantine-color-scheme=dark]{--navigation-border-right:1px solid var(--mantine-color-gray-9);--divider-border-color:var(--mantine-color-gray-9)}:root:not([data-mantine-color-scheme=dark]){--navigation-border-right:1px solid var(--mantine-color-gray-1);--divider-border-color:var(--mantine-color-gray-1)}
1
+ .navigation{border-right:var(--navigation-border-right);box-sizing:border-box;height:100%;margin-bottom:calc(6.875rem*var(--mantine-scale));overflow:auto;padding:10px var(--mantine-spacing-xs);width:var(--navbar-width)}.navigation a:hover{text-decoration:none}.navigation-item-without-icon{padding-left:2.5rem}.divider-root{border-color:var(--divider-border-color)}:root[data-mantine-color-scheme=dark]{--navigation-border-right:1px solid var(--mantine-color-gray-9);--divider-border-color:var(--mantine-color-gray-9)}:root:not([data-mantine-color-scheme=dark]){--navigation-border-right:1px solid var(--mantine-color-gray-1);--divider-border-color:var(--mantine-color-gray-1)}
@@ -1,2 +1,2 @@
1
- import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useCallback,useEffect,useMemo,useState}from"react";import{Filter,Trash2}from"lucide-react";import classes from"./RemotePersistentFilterDropdown.module.css";import{Combobox,Group,useCombobox}from"@mantine/core";import{useTranslation}from"react-i18next";import{Tooltip}from"../../Tooltip";import{ConfirmationDialog}from"../../ConfirmationDialog";import{EStatus}from"../../../genericTypes";import{Typo}from"../../Typo";import{Z_INDEX_LAYER}from"../../../theme";const RemotePersistentFilterDropdown=({remotePersistentFilters,onSelect,onDelete})=>{const{t}=useTranslation();const[selectedFilter,setSelectedFilter]=useState();const[modalData,setModalData]=useState(null);const combobox=useCombobox();const dropdownList=useMemo(()=>remotePersistentFilters.map(filter=>({value:filter.id,label:filter.filterName})),[remotePersistentFilters]);const handleClick=()=>combobox.toggleDropdown();useEffect(()=>{if(selectedFilter)onSelect(selectedFilter)},[selectedFilter,onSelect]);const handleSelect=useCallback(filter=>{if(filter){combobox.closeDropdown();setSelectedFilter(filter)}},[combobox]);const handleDelete=useCallback((e,filterId)=>{e.stopPropagation();setModalData(filterId)},[]);const handleConfirmDelete=useCallback(()=>{if(modalData){onDelete(modalData);setModalData(null)}},[modalData,onDelete]);const options=useMemo(()=>dropdownList.sort((a,b)=>a.label.localeCompare(b.label)).map(item=>_jsx(Combobox.Option,{"data-testid":"dropdown-option",value:item.value,children:_jsxs(Group,{className:classes.options,children:[item.label.length>35?_jsx(Tooltip,{label:item.label,children:_jsx("span",{className:classes["truncate-text"],children:item.label})}):_jsx("span",{children:item.label}),_jsx(Tooltip,{label:t("Delete filter"),children:_jsx(Trash2,{"data-testid":"delete-icon",color:"red",size:16,className:classes["options-label"],onClick:e=>handleDelete(e,item.value)})})]})},item.value)),[dropdownList,handleDelete,t]);const emptyOption=_jsx(Combobox.Option,{value:"",children:_jsx(Group,{className:classes.options,children:_jsx("span",{children:t("No saved filters available")})})},"");return _jsxs(_Fragment,{children:[_jsxs(Combobox,{store:combobox,width:300,position:"bottom-start",withArrow:true,onOptionSubmit:handleSelect,styles:{dropdown:{zIndex:Z_INDEX_LAYER.GROUND.HIGHEST,maxHeight:"258px",overflow:"auto"}},children:[_jsx(Combobox.Target,{children:_jsx("div",{"data-testid":"filter-icon",className:classes.actions,onClick:handleClick,children:_jsx(Tooltip,{offset:15,label:t("Saved filters"),children:_jsx(Filter,{"data-testid":"filter-chevron-image",color:"var(--filter-chevron-color)",size:16})})})}),_jsx(Combobox.Dropdown,{children:_jsx(Combobox.Options,{children:options.length>0?options:emptyOption})})]}),_jsx(ConfirmationDialog,{alertStatus:EStatus.ERROR,title:t("Delete filter"),content:_jsx(Typo,{type:"body",children:t("Do you really want to delete this filter?")}),opened:!!modalData,onClose:()=>setModalData(null),confirmationButtonText:t("Confirm"),confirmationButtonVariant:"danger",cancelButtonText:t("Cancel"),onSubmit:handleConfirmDelete})]})};export{RemotePersistentFilterDropdown};
1
+ import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useCallback,useEffect,useMemo,useState}from"react";import{Filter,Trash2}from"lucide-react";import classes from"./RemotePersistentFilterDropdown.module.css";import{Combobox,Group,useCombobox}from"@mantine/core";import{useTranslation}from"react-i18next";import{Tooltip}from"../../Tooltip";import{ConfirmationDialog}from"../../ConfirmationDialog";import{EStatus}from"../../../genericTypes";import{Typo}from"../../Typo";import{Z_INDEX_LAYER}from"../../../theme";const RemotePersistentFilterDropdown=({remotePersistentFilters,onSelect,onDelete})=>{const{t}=useTranslation();const[selectedFilter,setSelectedFilter]=useState();const[modalData,setModalData]=useState(null);const combobox=useCombobox();const dropdownList=useMemo(()=>remotePersistentFilters.map(filter=>({value:filter.id,label:filter.filterName})),[remotePersistentFilters]);const handleClick=()=>combobox.toggleDropdown();useEffect(()=>{if(selectedFilter)onSelect(selectedFilter)},[selectedFilter,onSelect]);const handleSelect=useCallback(filter=>{if(filter){combobox.closeDropdown();setSelectedFilter(filter)}},[combobox]);const handleDelete=useCallback((e,filterId)=>{e.stopPropagation();setModalData(filterId)},[]);const handleConfirmDelete=useCallback(()=>{if(modalData){onDelete(modalData);setModalData(null)}},[modalData,onDelete]);const options=useMemo(()=>dropdownList.sort((a,b)=>a.label.localeCompare(b.label)).map(item=>_jsx(Combobox.Option,{"data-testid":"dropdown-option",value:item.value,children:_jsxs(Group,{className:classes.options,children:[item.label.length>35?_jsx(Tooltip,{label:item.label,children:_jsx("span",{className:classes["truncate-text"],children:item.label})}):_jsx("span",{children:item.label}),_jsx(Tooltip,{label:t("Delete filter"),children:_jsx(Trash2,{"data-testid":"delete-icon",color:"red",size:16,className:classes["options-label"],onClick:e=>handleDelete(e,item.value)})})]})},item.value)),[dropdownList,handleDelete,t]);const emptyOption=_jsx(Combobox.Option,{value:"",children:_jsx(Group,{className:classes.options,children:_jsx("span",{children:t("No saved filters available")})})},"");return _jsxs(_Fragment,{children:[_jsxs(Combobox,{store:combobox,width:300,position:"bottom-start",withArrow:true,onOptionSubmit:handleSelect,styles:{dropdown:{zIndex:Z_INDEX_LAYER.GROUND.HIGHEST,maxHeight:"238px",overflow:"auto"}},children:[_jsx(Combobox.Target,{children:_jsx("div",{"data-testid":"filter-icon",className:classes.actions,onClick:handleClick,children:_jsx(Tooltip,{offset:15,label:t("Saved filters"),children:_jsx(Filter,{"data-testid":"filter-chevron-image",color:"var(--filter-chevron-color)",size:16})})})}),_jsx(Combobox.Dropdown,{children:_jsx(Combobox.Options,{children:options.length>0?options:emptyOption})})]}),_jsx(ConfirmationDialog,{alertStatus:EStatus.ERROR,title:t("Delete filter"),content:_jsx(Typo,{type:"body",children:t("Do you really want to delete this filter?")}),opened:!!modalData,onClose:()=>setModalData(null),confirmationButtonText:t("Confirm"),confirmationButtonVariant:"danger",cancelButtonText:t("Cancel"),onSubmit:handleConfirmDelete})]})};export{RemotePersistentFilterDropdown};
2
2
  //# sourceMappingURL=RemotePersistentFilterDropdown.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/Filter/RemotePersistence/RemotePersistentFilterDropdown.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\"\nimport { Filter, Trash2 } from \"lucide-react\"\nimport classes from \"./RemotePersistentFilterDropdown.module.css\"\nimport { TFilter } from \"../utils\"\nimport { TRemotePersistentFilter } from \"./types\"\nimport { Combobox, Group, useCombobox } from \"@mantine/core\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tooltip } from \"../../Tooltip\"\nimport { ConfirmationDialog } from \"../../ConfirmationDialog\"\nimport { EStatus } from \"../../../genericTypes\"\nimport { Typo } from \"../../Typo\"\nimport { Z_INDEX_LAYER } from \"../../../theme\"\n\ntype TFilterDropdownProps = {\n config: TFilter.Config\n onSelect: (id: string) => void\n onDelete: (id: string) => void\n remotePersistentFilters: TRemotePersistentFilter[]\n}\n\nconst RemotePersistentFilterDropdown: React.FC<TFilterDropdownProps> = ({\n remotePersistentFilters,\n onSelect,\n onDelete,\n}) => {\n const { t } = useTranslation()\n const [selectedFilter, setSelectedFilter] = useState<string>()\n const [modalData, setModalData] = useState<string | null>(null)\n const combobox = useCombobox()\n\n const dropdownList = useMemo(\n () =>\n remotePersistentFilters.map((filter) => ({\n value: filter.id,\n label: filter.filterName,\n })),\n [remotePersistentFilters]\n )\n\n const handleClick = () => combobox.toggleDropdown()\n\n useEffect(() => {\n if (selectedFilter) onSelect(selectedFilter)\n }, [selectedFilter, onSelect])\n\n const handleSelect = useCallback(\n (filter: string) => {\n if (filter) {\n combobox.closeDropdown()\n setSelectedFilter(filter)\n }\n },\n [combobox]\n )\n\n const handleDelete = useCallback((e: React.MouseEvent<SVGSVGElement>, filterId: string) => {\n e.stopPropagation()\n setModalData(filterId)\n }, [])\n\n const handleConfirmDelete = useCallback(() => {\n if (modalData) {\n onDelete(modalData)\n setModalData(null)\n }\n }, [modalData, onDelete])\n\n const options = useMemo(\n () =>\n dropdownList\n .sort((a, b) => a.label.localeCompare(b.label))\n .map((item) => (\n <Combobox.Option data-testid=\"dropdown-option\" value={item.value} key={item.value}>\n <Group className={classes.options}>\n {item.label.length > 35 ? (\n <Tooltip label={item.label}>\n <span className={classes[\"truncate-text\"]}>{item.label}</span>\n </Tooltip>\n ) : (\n <span>{item.label}</span>\n )}\n <Tooltip label={t(\"Delete filter\")}>\n <Trash2\n data-testid={\"delete-icon\"}\n color=\"red\"\n size={16}\n className={classes[\"options-label\"]}\n onClick={(e) => handleDelete(e, item.value)}\n />\n </Tooltip>\n </Group>\n </Combobox.Option>\n )),\n [dropdownList, handleDelete, t]\n )\n\n const emptyOption = (\n <Combobox.Option value={\"\"} key={\"\"}>\n <Group className={classes.options}>\n <span>{t(\"No saved filters available\")}</span>\n </Group>\n </Combobox.Option>\n )\n\n return (\n <>\n <Combobox\n store={combobox}\n width={300}\n position=\"bottom-start\"\n withArrow\n onOptionSubmit={handleSelect}\n styles={{\n dropdown: { zIndex: Z_INDEX_LAYER.GROUND.HIGHEST, maxHeight: \"258px\", overflow: \"auto\" },\n }}\n >\n <Combobox.Target>\n <div data-testid={\"filter-icon\"} className={classes.actions} onClick={handleClick}>\n <Tooltip offset={15} label={t(\"Saved filters\")}>\n <Filter\n data-testid={\"filter-chevron-image\"}\n color={\"var(--filter-chevron-color)\"}\n size={16}\n />\n </Tooltip>\n </div>\n </Combobox.Target>\n\n <Combobox.Dropdown>\n <Combobox.Options>{options.length > 0 ? options : emptyOption}</Combobox.Options>\n </Combobox.Dropdown>\n </Combobox>\n\n <ConfirmationDialog\n alertStatus={EStatus.ERROR}\n title={t(\"Delete filter\")}\n content={<Typo type=\"body\">{t(\"Do you really want to delete this filter?\")}</Typo>}\n opened={!!modalData}\n onClose={() => setModalData(null)}\n confirmationButtonText={t(\"Confirm\")}\n confirmationButtonVariant={\"danger\"}\n cancelButtonText={t(\"Cancel\")}\n onSubmit={handleConfirmDelete}\n />\n </>\n )\n}\n\nexport { RemotePersistentFilterDropdown }\n"],"names":["React","useCallback","useEffect","useMemo","useState","Filter","Trash2","classes","Combobox","Group","useCombobox","useTranslation","Tooltip","ConfirmationDialog","EStatus","Typo","Z_INDEX_LAYER","RemotePersistentFilterDropdown","remotePersistentFilters","onSelect","onDelete","t","selectedFilter","setSelectedFilter","modalData","setModalData","combobox","dropdownList","map","filter","value","id","label","filterName","handleClick","toggleDropdown","handleSelect","closeDropdown","handleDelete","e","filterId","stopPropagation","handleConfirmDelete","options","sort","a","b","localeCompare","item","Option","data-testid","className","length","span","color","size","onClick","emptyOption","store","width","position","withArrow","onOptionSubmit","styles","dropdown","zIndex","GROUND","HIGHEST","maxHeight","overflow","Target","div","actions","offset","Dropdown","Options","alertStatus","ERROR","title","content","type","opened","onClose","confirmationButtonText","confirmationButtonVariant","cancelButtonText","onSubmit"],"mappings":"8EAIA,QAAOA,OAASC,WAAW,CAAEC,SAAS,CAAEC,OAAO,CAAEC,QAAQ,KAAQ,OAAO,AACxE,QAASC,MAAM,CAAEC,MAAM,KAAQ,cAAc,AAC7C,QAAOC,YAAa,6CAA6C,AAGjE,QAASC,QAAQ,CAAEC,KAAK,CAAEC,WAAW,KAAQ,eAAe,AAC5D,QAASC,cAAc,KAAQ,eAAe,AAC9C,QAASC,OAAO,KAAQ,eAAe,AACvC,QAASC,kBAAkB,KAAQ,0BAA0B,AAC7D,QAASC,OAAO,KAAQ,uBAAuB,AAC/C,QAASC,IAAI,KAAQ,YAAY,AACjC,QAASC,aAAa,KAAQ,gBAAgB,CAS9C,MAAMC,+BAAiE,CAAC,CACtEC,uBAAuB,CACvBC,QAAQ,CACRC,QAAQ,CACT,IACC,KAAM,CAAEC,CAAC,CAAE,CAAGV,iBACd,KAAM,CAACW,eAAgBC,kBAAkB,CAAGnB,WAC5C,KAAM,CAACoB,UAAWC,aAAa,CAAGrB,SAAwB,MAC1D,MAAMsB,SAAWhB,cAEjB,MAAMiB,aAAexB,QACnB,IACEe,wBAAwBU,GAAG,CAAC,AAACC,QAAY,CAAA,CACvCC,MAAOD,OAAOE,EAAE,CAChBC,MAAOH,OAAOI,UAAU,AAC1B,CAAA,GACF,CAACf,wBAAwB,EAG3B,MAAMgB,YAAc,IAAMR,SAASS,cAAc,GAEjDjC,UAAU,KACR,GAAIoB,eAAgBH,SAASG,eAC/B,EAAG,CAACA,eAAgBH,SAAS,EAE7B,MAAMiB,aAAenC,YACnB,AAAC4B,SACC,GAAIA,OAAQ,CACVH,SAASW,aAAa,GACtBd,kBAAkBM,OACpB,CACF,EACA,CAACH,SAAS,EAGZ,MAAMY,aAAerC,YAAY,CAACsC,EAAoCC,YACpED,EAAEE,eAAe,GACjBhB,aAAae,SACf,EAAG,EAAE,EAEL,MAAME,oBAAsBzC,YAAY,KACtC,GAAIuB,UAAW,CACbJ,SAASI,WACTC,aAAa,KACf,CACF,EAAG,CAACD,UAAWJ,SAAS,EAExB,MAAMuB,QAAUxC,QACd,IACEwB,aACGiB,IAAI,CAAC,CAACC,EAAGC,IAAMD,EAAEb,KAAK,CAACe,aAAa,CAACD,EAAEd,KAAK,GAC5CJ,GAAG,CAAC,AAACoB,MACJ,KAACxC,SAASyC,MAAM,EAACC,cAAY,kBAAkBpB,MAAOkB,KAAKlB,KAAK,UAC9D,MAACrB,OAAM0C,UAAW5C,QAAQoC,OAAO,WAC9BK,KAAKhB,KAAK,CAACoB,MAAM,CAAG,GACnB,KAACxC,SAAQoB,MAAOgB,KAAKhB,KAAK,UACxB,KAACqB,QAAKF,UAAW5C,OAAO,CAAC,gBAAgB,UAAGyC,KAAKhB,KAAK,KAGxD,KAACqB,iBAAML,KAAKhB,KAAK,GAEnB,KAACpB,SAAQoB,MAAOX,EAAE,0BAChB,KAACf,QACC4C,cAAa,cACbI,MAAM,MACNC,KAAM,GACNJ,UAAW5C,OAAO,CAAC,gBAAgB,CACnCiD,QAAS,AAACjB,GAAMD,aAAaC,EAAGS,KAAKlB,KAAK,UAfqBkB,KAAKlB,KAAK,GAqBvF,CAACH,aAAcW,aAAcjB,EAAE,EAGjC,MAAMoC,YACJ,KAACjD,SAASyC,MAAM,EAACnB,MAAO,YACtB,KAACrB,OAAM0C,UAAW5C,QAAQoC,OAAO,UAC/B,KAACU,iBAAMhC,EAAE,mCAFoB,IAOnC,OACE,2BACE,MAACb,UACCkD,MAAOhC,SACPiC,MAAO,IACPC,SAAS,eACTC,SAAS,MACTC,eAAgB1B,aAChB2B,OAAQ,CACNC,SAAU,CAAEC,OAAQjD,cAAckD,MAAM,CAACC,OAAO,CAAEC,UAAW,QAASC,SAAU,MAAO,CACzF,YAEA,KAAC7D,SAAS8D,MAAM,WACd,KAACC,OAAIrB,cAAa,cAAeC,UAAW5C,QAAQiE,OAAO,CAAEhB,QAAStB,qBACpE,KAACtB,SAAQ6D,OAAQ,GAAIzC,MAAOX,EAAE,0BAC5B,KAAChB,QACC6C,cAAa,uBACbI,MAAO,8BACPC,KAAM,WAMd,KAAC/C,SAASkE,QAAQ,WAChB,KAAClE,SAASmE,OAAO,WAAEhC,QAAQS,MAAM,CAAG,EAAIT,QAAUc,mBAItD,KAAC5C,oBACC+D,YAAa9D,QAAQ+D,KAAK,CAC1BC,MAAOzD,EAAE,iBACT0D,QAAS,KAAChE,MAAKiE,KAAK,gBAAQ3D,EAAE,+CAC9B4D,OAAQ,CAAC,CAACzD,UACV0D,QAAS,IAAMzD,aAAa,MAC5B0D,uBAAwB9D,EAAE,WAC1B+D,0BAA2B,SAC3BC,iBAAkBhE,EAAE,UACpBiE,SAAU5C,wBAIlB,CAEA,QAASzB,8BAA8B,CAAE"}
1
+ {"version":3,"sources":["../../../../../src/components/Filter/RemotePersistence/RemotePersistentFilterDropdown.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\"\nimport { Filter, Trash2 } from \"lucide-react\"\nimport classes from \"./RemotePersistentFilterDropdown.module.css\"\nimport { TFilter } from \"../utils\"\nimport { TRemotePersistentFilter } from \"./types\"\nimport { Combobox, Group, useCombobox } from \"@mantine/core\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tooltip } from \"../../Tooltip\"\nimport { ConfirmationDialog } from \"../../ConfirmationDialog\"\nimport { EStatus } from \"../../../genericTypes\"\nimport { Typo } from \"../../Typo\"\nimport { Z_INDEX_LAYER } from \"../../../theme\"\n\ntype TFilterDropdownProps = {\n config: TFilter.Config\n onSelect: (id: string) => void\n onDelete: (id: string) => void\n remotePersistentFilters: TRemotePersistentFilter[]\n}\n\nconst RemotePersistentFilterDropdown: React.FC<TFilterDropdownProps> = ({\n remotePersistentFilters,\n onSelect,\n onDelete,\n}) => {\n const { t } = useTranslation()\n const [selectedFilter, setSelectedFilter] = useState<string>()\n const [modalData, setModalData] = useState<string | null>(null)\n const combobox = useCombobox()\n\n const dropdownList = useMemo(\n () =>\n remotePersistentFilters.map((filter) => ({\n value: filter.id,\n label: filter.filterName,\n })),\n [remotePersistentFilters]\n )\n\n const handleClick = () => combobox.toggleDropdown()\n\n useEffect(() => {\n if (selectedFilter) onSelect(selectedFilter)\n }, [selectedFilter, onSelect])\n\n const handleSelect = useCallback(\n (filter: string) => {\n if (filter) {\n combobox.closeDropdown()\n setSelectedFilter(filter)\n }\n },\n [combobox]\n )\n\n const handleDelete = useCallback((e: React.MouseEvent<SVGSVGElement>, filterId: string) => {\n e.stopPropagation()\n setModalData(filterId)\n }, [])\n\n const handleConfirmDelete = useCallback(() => {\n if (modalData) {\n onDelete(modalData)\n setModalData(null)\n }\n }, [modalData, onDelete])\n\n const options = useMemo(\n () =>\n dropdownList\n .sort((a, b) => a.label.localeCompare(b.label))\n .map((item) => (\n <Combobox.Option data-testid=\"dropdown-option\" value={item.value} key={item.value}>\n <Group className={classes.options}>\n {item.label.length > 35 ? (\n <Tooltip label={item.label}>\n <span className={classes[\"truncate-text\"]}>{item.label}</span>\n </Tooltip>\n ) : (\n <span>{item.label}</span>\n )}\n <Tooltip label={t(\"Delete filter\")}>\n <Trash2\n data-testid={\"delete-icon\"}\n color=\"red\"\n size={16}\n className={classes[\"options-label\"]}\n onClick={(e) => handleDelete(e, item.value)}\n />\n </Tooltip>\n </Group>\n </Combobox.Option>\n )),\n [dropdownList, handleDelete, t]\n )\n\n const emptyOption = (\n <Combobox.Option value={\"\"} key={\"\"}>\n <Group className={classes.options}>\n <span>{t(\"No saved filters available\")}</span>\n </Group>\n </Combobox.Option>\n )\n\n return (\n <>\n <Combobox\n store={combobox}\n width={300}\n position=\"bottom-start\"\n withArrow\n onOptionSubmit={handleSelect}\n styles={{\n dropdown: { zIndex: Z_INDEX_LAYER.GROUND.HIGHEST, maxHeight: \"238px\", overflow: \"auto\" },\n }}\n >\n <Combobox.Target>\n <div data-testid={\"filter-icon\"} className={classes.actions} onClick={handleClick}>\n <Tooltip offset={15} label={t(\"Saved filters\")}>\n <Filter\n data-testid={\"filter-chevron-image\"}\n color={\"var(--filter-chevron-color)\"}\n size={16}\n />\n </Tooltip>\n </div>\n </Combobox.Target>\n\n <Combobox.Dropdown>\n <Combobox.Options>{options.length > 0 ? options : emptyOption}</Combobox.Options>\n </Combobox.Dropdown>\n </Combobox>\n\n <ConfirmationDialog\n alertStatus={EStatus.ERROR}\n title={t(\"Delete filter\")}\n content={<Typo type=\"body\">{t(\"Do you really want to delete this filter?\")}</Typo>}\n opened={!!modalData}\n onClose={() => setModalData(null)}\n confirmationButtonText={t(\"Confirm\")}\n confirmationButtonVariant={\"danger\"}\n cancelButtonText={t(\"Cancel\")}\n onSubmit={handleConfirmDelete}\n />\n </>\n )\n}\n\nexport { RemotePersistentFilterDropdown }\n"],"names":["React","useCallback","useEffect","useMemo","useState","Filter","Trash2","classes","Combobox","Group","useCombobox","useTranslation","Tooltip","ConfirmationDialog","EStatus","Typo","Z_INDEX_LAYER","RemotePersistentFilterDropdown","remotePersistentFilters","onSelect","onDelete","t","selectedFilter","setSelectedFilter","modalData","setModalData","combobox","dropdownList","map","filter","value","id","label","filterName","handleClick","toggleDropdown","handleSelect","closeDropdown","handleDelete","e","filterId","stopPropagation","handleConfirmDelete","options","sort","a","b","localeCompare","item","Option","data-testid","className","length","span","color","size","onClick","emptyOption","store","width","position","withArrow","onOptionSubmit","styles","dropdown","zIndex","GROUND","HIGHEST","maxHeight","overflow","Target","div","actions","offset","Dropdown","Options","alertStatus","ERROR","title","content","type","opened","onClose","confirmationButtonText","confirmationButtonVariant","cancelButtonText","onSubmit"],"mappings":"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"}
@@ -1 +1 @@
1
- .navigation{border-right:var(--navigation-border-right);box-sizing:border-box;height:100%;padding:10px var(--mantine-spacing-xs);width:var(--navbar-width)}.navigation a:hover{text-decoration:none}.navigation-item-without-icon{padding-left:2.5rem}.divider-root{border-color:var(--divider-border-color)}:root[data-mantine-color-scheme=dark]{--navigation-border-right:1px solid var(--mantine-color-gray-9);--divider-border-color:var(--mantine-color-gray-9)}:root:not([data-mantine-color-scheme=dark]){--navigation-border-right:1px solid var(--mantine-color-gray-1);--divider-border-color:var(--mantine-color-gray-1)}
1
+ .navigation{border-right:var(--navigation-border-right);box-sizing:border-box;height:100%;margin-bottom:calc(6.875rem*var(--mantine-scale));overflow:auto;padding:10px var(--mantine-spacing-xs);width:var(--navbar-width)}.navigation a:hover{text-decoration:none}.navigation-item-without-icon{padding-left:2.5rem}.divider-root{border-color:var(--divider-border-color)}:root[data-mantine-color-scheme=dark]{--navigation-border-right:1px solid var(--mantine-color-gray-9);--divider-border-color:var(--mantine-color-gray-9)}:root:not([data-mantine-color-scheme=dark]){--navigation-border-right:1px solid var(--mantine-color-gray-1);--divider-border-color:var(--mantine-color-gray-1)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greenbone/ui-lib",
3
- "version": "1.0.1-alpha8",
3
+ "version": "1.1.1-alpha0",
4
4
  "description": "Greenbone UI Components Mantine v7",
5
5
  "types": "types/src/index.d.ts",
6
6
  "main": "lib/index.js",
@@ -52,7 +52,7 @@
52
52
  "@types/jest": "^30.0.0",
53
53
  "@types/lodash": "^4.17.20",
54
54
  "@types/luxon": "^3.7.1",
55
- "@types/node": "^24.9.1",
55
+ "@types/node": "^24.10.0",
56
56
  "@types/react": "18.3.18",
57
57
  "@types/react-dom": "^18.3.5",
58
58
  "@types/webfontloader": "^1.6.38",
@@ -80,7 +80,7 @@
80
80
  "@mantine/dates": "^7.17.7",
81
81
  "@mantine/hooks": "^7.17.7",
82
82
  "@mantine/notifications": "^7.17.7",
83
- "lucide-react": "^0.548.0",
83
+ "lucide-react": "^0.552.0",
84
84
  "react": "^18.x.x",
85
85
  "react-dom": "^18.x.x",
86
86
  "react-i18next": "^15.x.x"
@@ -95,7 +95,7 @@
95
95
  "@mantine/hooks": "^7.17.7",
96
96
  "@mantine/notifications": "^7.17.7",
97
97
  "lodash": "^4.17.21",
98
- "lucide-react": "^0.548.0",
98
+ "lucide-react": "^0.552.0",
99
99
  "luxon": "^3.7.2",
100
100
  "react": "^18.x.x",
101
101
  "react-dom": "^18.x.x",