@greenbone/ui-lib 1.1.0 → 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,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":"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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":["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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greenbone/ui-lib",
3
- "version": "1.1.0",
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",