@greenbone/ui-lib 2.1.0 → 2.1.1

package/lib/esm/components/Form/Select/Cascade/CascadeMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Form/Select/Cascade/CascadeMenu.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport {\n  ForwardedRef,\n  forwardRef,\n  PropsWithChildren,\n  ReactElement,\n  RefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\"\nimport { TNode } from \"./utils\"\nimport { createPortal } from \"react-dom\"\nimport { components } from \"react-select\"\nimport { TCascadeMenuForwardRef, TMeta, TStylingProps } from \"./index\"\nimport { CascadeOption, TCascadeOption, TCascadeOptionProps } from \"./CascadeOption\"\nimport classes from \"./CascadeMenu.module.css\"\nimport { cx } from \"../../../../helper/cx\"\n\ntype TCascadeMenuProps<Meta extends TMeta> = Omit<TCascadeOptionProps<Meta>, \"option\"> &\n  TStylingProps & {\n    options: TCascadeOption<Meta>[]\n    isInitiallyOpen?: boolean\n    openerOptionNode?: TNode\n    openerOptionElementRef?: RefObject<HTMLDivElement>\n    openerMenuRef?: RefObject<HTMLDivElement>\n  }\n\n// This function is necessary to \"correctly\" display the cascade menus as each browser's scrollbar styling differs\nfunction shouldIncreasePaddingBecauseOfScrollbarBehaviourBasedOnBrowser(): boolean {\n  if ((navigator.userAgent.indexOf(\"Opera\") || navigator.userAgent.indexOf(\"OPR\")) != -1) {\n    return true\n  } else if (navigator.userAgent.indexOf(\"Edg\") != -1) {\n    return true\n  } else if (navigator.userAgent.indexOf(\"Chrome\") != -1) {\n    return true\n  } else if (navigator.userAgent.indexOf(\"Safari\") != -1) {\n    return false\n  } else if (navigator.userAgent.indexOf(\"Firefox\") != -1) {\n    return false\n  } else if (navigator.userAgent.indexOf(\"MSIE\") != -1 || !!(document as any).documentMode) {\n    //IF IE > 10\n    return true\n  } else {\n    return false\n  }\n}\n\n/**\n * The raw CascadeMenu. It opens a menu filled with **CascadeOptions**.\n * The menu can optionally be rendered in a portal to escape visual restrictions.\n *\n * @param options Cascade Options\n * @param isInitiallyOpen boolean if it is opened initially\n * @param openerOptionNode A reference to the opener **Node**\n * @param openerOptionElementRef? RefObject to the opener **CascadeOption**\n * @param openerMenuRef? RefObject to the **CascadeMenu** containing the *openerOptionElement*\n * @param ref ForwardRef for:\n * - setOpen(boolean) Toggles the menus open state\n */\nexport function CascadeMenuBaseRaw<Meta extends TMeta = object>(\n  { isInitiallyOpen, openerMenuRef, ...props }: TCascadeMenuProps<Meta>,\n  ref: ForwardedRef<TCascadeMenuForwardRef>\n) {\n  const innerMenuRef = useRef<HTMLDivElement>(null)\n  const [open, setOpen] = useState<boolean>(isInitiallyOpen || false)\n\n  const showScrollbar = (value: boolean) => {\n    if (innerMenuRef.current) {\n      innerMenuRef.current.style.overflowY = value ? \"auto\" : \"hidden\"\n    }\n  }\n  const handleMouseExit = () => {\n    // Ensure focus list is cleared when leaving a menu\n    // When also entering another menu, the event is fired closely after and sets the focus list again\n    showScrollbar(false)\n    props.setFocusList([])\n  }\n\n  const handleMouseEnter = () => {\n    showScrollbar(true)\n  }\n\n  let isScrolling = false // temporary variable to reduce called scroll events to one\n  const handleScroll = () => {\n    // Unfocus all children on scroll\n    if (isScrolling) return\n    for (const node of props.nodes) {\n      node.cascadeOptionForwardRef.current?.setFocused(false)\n    }\n    isScrolling = true\n  }\n\n  const handleScrollEnd = () => {\n    isScrolling = false\n  }\n\n  useEffect(() => {\n    // (Un)/Register events\n    innerMenuRef.current?.addEventListener(\"mouseleave\", handleMouseExit)\n    innerMenuRef.current?.addEventListener(\"mouseenter\", handleMouseEnter)\n    innerMenuRef.current?.addEventListener(\"wheel\", handleScroll)\n    innerMenuRef.current?.addEventListener(\"scrollend\", handleScrollEnd)\n    return () => {\n      innerMenuRef.current?.removeEventListener(\"mouseleave\", handleMouseExit)\n      innerMenuRef.current?.removeEventListener(\"mouseenter\", handleMouseEnter)\n      innerMenuRef.current?.removeEventListener(\"wheel\", handleScroll)\n      innerMenuRef.current?.removeEventListener(\"scrollend\", handleScrollEnd)\n    }\n  }, [])\n\n  const setMenuOpen = (value: boolean) => {\n    setOpen(value)\n  }\n\n  // Register ref controls for state handling via NodeTree\n  useImperativeHandle(ref, () => ({\n    setOpen: (value) => setMenuOpen(value),\n  }))\n\n  /**\n   * Relocates the menu based on the opener position\n   */\n  const relocateMenu = () => {\n    const refable = props.openerOptionNode\n      ? props.openerOptionNode?.elementRef\n      : props.openerOptionElementRef\n    const rect = refable?.current?.getBoundingClientRect()\n    if (!rect) {\n      return\n    }\n\n    const isScrollable =\n      openerMenuRef &&\n      openerMenuRef.current &&\n      openerMenuRef.current.offsetHeight < openerMenuRef.current.scrollHeight\n\n    const xOffset =\n      shouldIncreasePaddingBecauseOfScrollbarBehaviourBasedOnBrowser() && isScrollable ? 7 : 0\n\n    const width = props.openerOptionNode?.level ? rect.width + xOffset : 0\n    const height = props.openerOptionNode?.level ? -8 : rect.height //padding\n    // Might get an optional property as the scrollTop offset target so the menu can adapt to the page scroll\n    updatePosition(\n      rect.top + height + (document.scrollingElement?.scrollTop || 0),\n      rect.left + width\n    )\n  }\n\n  useEffect(() => {\n    // Update position of current menu\n    // First Menu (when select is clicked) does not have an openerOptionNode\n    relocateMenu()\n  })\n\n  const updatePosition = (yPixel: number, xPixel?: number) => {\n    if (!innerMenuRef.current) return\n    innerMenuRef.current.style.top = yPixel + \"px\"\n    innerMenuRef.current.style.left = xPixel + \"px\"\n  }\n\n  return (\n    <>\n      <div\n        className={cx(classes[\"menu-container\"])}\n        data-testid={`cascade-menu-for-${props.openerOptionNode?.id || \"root\"}`}\n      >\n        {createPortal(\n          <components.Menu\n            {...(props.menuProps as any)}\n            innerRef={innerMenuRef}\n            className={cx(\n              classes.menu,\n              (props.openerOptionNode ? props.openerOptionNode.focused : true) || open\n                ? classes[\"menu-open\"]\n                : classes[\"menu-hidden\"]\n            )}\n            style={{\n              zIndex: props.level,\n            }}\n            isLoading={false}\n            placement={\"bottom\"}\n            minMenuHeight={200}\n            maxMenuHeight={200}\n            menuPlacement={\"bottom\"}\n            menuPosition={\"fixed\"}\n            menuShouldScrollIntoView={true}\n          >\n            {props.options.map((op, index) => (\n              <CascadeOption\n                {...props}\n                level={props.level + 1}\n                index={index}\n                OptionComponent={props.OptionComponent}\n                onSelect={(value) => {\n                  props.onSelect(value)\n                }}\n                option={op}\n                key={op.value}\n                openerMenuRef={innerMenuRef}\n              ></CascadeOption>\n            ))}\n          </components.Menu>,\n          props.menuPortalTarget?.current || document.body,\n          props.openerOptionNode?.id || props.index?.toString()\n        )}\n      </div>\n    </>\n  )\n}\n\n/**\n * ForwardRef for CascadeMenuBase\n */\nexport const CascadeMenuBase = forwardRef(CascadeMenuBaseRaw) as <Meta extends TMeta = object>({\n  isInitiallyOpen,\n  ...props\n}: TCascadeMenuProps<Meta> & {\n  ref?: ForwardedRef<TCascadeMenuForwardRef>\n}) => ReactElement\n\n/**\n * This is used as a wrapper for **CascadeOptions** that lets the option open another menu when selected\n * @param options Cascade Options\n * @param isInitiallyOpen boolean if it is opened initially\n * @param openerOptionNode A reference to the opener **Node**\n * @param openerOptionElementRef? RefObject to the opener **CascadeOption**\n * @param openerMenuRef? RefObject to the **CascadeMenu** containing the *openerOptionElement*\n * @param ref ForwardRef for:\n * - setOpen(boolean) Toggles the menus open state */\nexport function CascadeMenuOpenerRaw<Meta extends TMeta = object>(\n  props: PropsWithChildren<TCascadeMenuProps<Meta>>,\n  ref: React.ForwardedRef<TCascadeMenuForwardRef>\n) {\n  return (\n    <>\n      {props.children}\n      <CascadeMenuBase<Meta> {...props} ref={ref} />\n    </>\n  )\n}\n\nexport const CascadeMenuOpener = forwardRef(CascadeMenuOpenerRaw) as <Meta extends TMeta = object>(\n  props: PropsWithChildren<TCascadeMenuProps<Meta>> & {\n    ref?: ForwardedRef<TCascadeMenuForwardRef>\n  }\n) => ReactElement\n"],"names":["forwardRef","useEffect","useImperativeHandle","useRef","useState","createPortal","components","CascadeOption","classes","cx","shouldIncreasePaddingBecauseOfScrollbarBehaviourBasedOnBrowser","navigator","userAgent","indexOf","document","documentMode","CascadeMenuBaseRaw","ref","isInitiallyOpen","openerMenuRef","props","innerMenuRef","open","setOpen","showScrollbar","value","current","style","overflowY","handleMouseExit","setFocusList","handleMouseEnter","isScrolling","handleScroll","node","nodes","cascadeOptionForwardRef","setFocused","handleScrollEnd","addEventListener","removeEventListener","setMenuOpen","relocateMenu","refable","openerOptionNode","elementRef","openerOptionElementRef","rect","getBoundingClientRect","isScrollable","offsetHeight","scrollHeight","xOffset","width","level","height","updatePosition","top","scrollingElement","scrollTop","left","yPixel","xPixel","div","className","data-testid","id","Menu","menuProps","innerRef","menu","focused","zIndex","isLoading","placement","minMenuHeight","maxMenuHeight","menuPlacement","menuPosition","menuShouldScrollIntoView","options","map","op","index","OptionComponent","onSelect","option","key","menuPortalTarget","body","toString","CascadeMenuBase","CascadeMenuOpenerRaw","children","CascadeMenuOpener"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../src/components/Form/Select/Cascade/CascadeMenu.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport {\n  ForwardedRef,\n  forwardRef,\n  PropsWithChildren,\n  ReactElement,\n  RefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\"\nimport { TNode } from \"./utils\"\nimport { createPortal } from \"react-dom\"\nimport { components } from \"react-select\"\nimport { TCascadeMenuForwardRef, TMeta, TStylingProps } from \"./index\"\nimport { CascadeOption, TCascadeOption, TCascadeOptionProps } from \"./CascadeOption\"\nimport classes from \"./CascadeMenu.module.css\"\nimport { cx } from \"../../../../helper/cx\"\n\ntype TCascadeMenuProps<Meta extends TMeta> = Omit<TCascadeOptionProps<Meta>, \"option\"> &\n  TStylingProps & {\n    options: TCascadeOption<Meta>[]\n    isInitiallyOpen?: boolean\n    openerOptionNode?: TNode\n    openerOptionElementRef?: RefObject<HTMLDivElement>\n    openerMenuRef?: RefObject<HTMLDivElement>\n  }\n\n// This function is necessary to \"correctly\" display the cascade menus as each browser's scrollbar styling differs\nfunction shouldIncreasePaddingBecauseOfScrollbarBehaviourBasedOnBrowser(): boolean {\n  if ((navigator.userAgent.indexOf(\"Opera\") || navigator.userAgent.indexOf(\"OPR\")) != -1) {\n    return true\n  } else if (navigator.userAgent.indexOf(\"Edg\") != -1) {\n    return true\n  } else if (navigator.userAgent.indexOf(\"Chrome\") != -1) {\n    return true\n  } else if (navigator.userAgent.indexOf(\"Safari\") != -1) {\n    return false\n  } else if (navigator.userAgent.indexOf(\"Firefox\") != -1) {\n    return false\n  } else if (navigator.userAgent.indexOf(\"MSIE\") != -1 || !!(document as any).documentMode) {\n    //IF IE > 10\n    return true\n  } else {\n    return false\n  }\n}\n\n/**\n * The raw CascadeMenu. It opens a menu filled with **CascadeOptions**.\n * The menu can optionally be rendered in a portal to escape visual restrictions.\n *\n * @param options Cascade Options\n * @param isInitiallyOpen boolean if it is opened initially\n * @param openerOptionNode A reference to the opener **Node**\n * @param openerOptionElementRef? RefObject to the opener **CascadeOption**\n * @param openerMenuRef? RefObject to the **CascadeMenu** containing the *openerOptionElement*\n * @param ref ForwardRef for:\n * - setOpen(boolean) Toggles the menus open state\n */\nexport function CascadeMenuBaseRaw<Meta extends TMeta = object>(\n  { isInitiallyOpen, openerMenuRef, ...props }: TCascadeMenuProps<Meta>,\n  ref: ForwardedRef<TCascadeMenuForwardRef>\n) {\n  const innerMenuRef = useRef<HTMLDivElement>(null)\n  const [open, setOpen] = useState<boolean>(isInitiallyOpen || false)\n\n  const showScrollbar = (value: boolean) => {\n    if (innerMenuRef.current) {\n      innerMenuRef.current.style.overflowY = value ? \"auto\" : \"hidden\"\n    }\n  }\n  const handleMouseExit = () => {\n    // Ensure focus list is cleared when leaving a menu\n    // When also entering another menu, the event is fired closely after and sets the focus list again\n    showScrollbar(false)\n    props.setFocusList([])\n  }\n\n  const handleMouseEnter = () => {\n    showScrollbar(true)\n  }\n\n  let isScrolling = false // temporary variable to reduce called scroll events to one\n  const handleScroll = () => {\n    // Unfocus all children on scroll\n    if (isScrolling) return\n    for (const node of props.nodes) {\n      node.cascadeOptionForwardRef.current?.setFocused(false)\n    }\n    isScrolling = true\n  }\n\n  const handleScrollEnd = () => {\n    isScrolling = false\n  }\n\n  useEffect(() => {\n    // (Un)/Register events\n    innerMenuRef.current?.addEventListener(\"mouseleave\", handleMouseExit)\n    innerMenuRef.current?.addEventListener(\"mouseenter\", handleMouseEnter)\n    innerMenuRef.current?.addEventListener(\"wheel\", handleScroll)\n    innerMenuRef.current?.addEventListener(\"scrollend\", handleScrollEnd)\n    return () => {\n      innerMenuRef.current?.removeEventListener(\"mouseleave\", handleMouseExit)\n      innerMenuRef.current?.removeEventListener(\"mouseenter\", handleMouseEnter)\n      innerMenuRef.current?.removeEventListener(\"wheel\", handleScroll)\n      innerMenuRef.current?.removeEventListener(\"scrollend\", handleScrollEnd)\n    }\n  }, [])\n\n  const setMenuOpen = (value: boolean) => {\n    setOpen(value)\n  }\n\n  // Register ref controls for state handling via NodeTree\n  useImperativeHandle(ref, () => ({\n    setOpen: (value) => setMenuOpen(value),\n  }))\n\n  /**\n   * Relocates the menu based on the opener position\n   */\n  const relocateMenu = () => {\n    const refable = props.openerOptionNode\n      ? props.openerOptionNode?.elementRef\n      : props.openerOptionElementRef\n    const rect = refable?.current?.getBoundingClientRect()\n    if (!rect) {\n      return\n    }\n\n    const isScrollable =\n      openerMenuRef &&\n      openerMenuRef.current &&\n      openerMenuRef.current.offsetHeight < openerMenuRef.current.scrollHeight\n\n    const xOffset =\n      shouldIncreasePaddingBecauseOfScrollbarBehaviourBasedOnBrowser() && isScrollable ? 7 : 0\n\n    const width = props.openerOptionNode?.level ? rect.width + xOffset : 0\n    const height = props.openerOptionNode?.level ? -8 : rect.height //padding\n    // Might get an optional property as the scrollTop offset target so the menu can adapt to the page scroll\n    updatePosition(\n      rect.top + height + (document.scrollingElement?.scrollTop || 0),\n      rect.left + width\n    )\n  }\n\n  useEffect(() => {\n    // Update position of current menu\n    // First Menu (when select is clicked) does not have an openerOptionNode\n    relocateMenu()\n  })\n\n  const updatePosition = (yPixel: number, xPixel?: number) => {\n    if (!innerMenuRef.current) return\n    innerMenuRef.current.style.top = yPixel + \"px\"\n    innerMenuRef.current.style.left = xPixel + \"px\"\n  }\n\n  return (\n    <>\n      <div\n        className={cx(classes[\"menu-container\"])}\n        data-testid={`cascade-menu-for-${props.openerOptionNode?.id || \"root\"}`}\n      >\n        {createPortal(\n          <components.Menu\n            {...(props.menuProps as any)}\n            innerRef={innerMenuRef}\n            className={cx(\n              classes.menu,\n              (props.openerOptionNode ? props.openerOptionNode.focused : true) || open\n                ? classes[\"menu-open\"]\n                : classes[\"menu-hidden\"]\n            )}\n            style={{\n              zIndex: props.level,\n            }}\n            isLoading={false}\n            placement={\"bottom\"}\n            minMenuHeight={200}\n            maxMenuHeight={200}\n            menuPlacement={\"bottom\"}\n            menuPosition={\"fixed\"}\n            menuShouldScrollIntoView={true}\n          >\n            {props.options.map((op, index) => (\n              <CascadeOption\n                {...props}\n                level={props.level + 1}\n                index={index}\n                OptionComponent={props.OptionComponent}\n                onSelect={(value) => {\n                  props.onSelect(value)\n                }}\n                option={op}\n                key={op.value}\n                openerMenuRef={innerMenuRef}\n              ></CascadeOption>\n            ))}\n          </components.Menu>,\n          props.menuPortalTarget?.current || document.body,\n          props.openerOptionNode?.id || props.index?.toString()\n        )}\n      </div>\n    </>\n  )\n}\n\n/**\n * ForwardRef for CascadeMenuBase\n */\nexport const CascadeMenuBase = forwardRef(CascadeMenuBaseRaw) as <Meta extends TMeta = object>({\n  isInitiallyOpen,\n  ...props\n}: TCascadeMenuProps<Meta> & {\n  ref?: ForwardedRef<TCascadeMenuForwardRef>\n}) => ReactElement\n\n/**\n * This is used as a wrapper for **CascadeOptions** that lets the option open another menu when selected\n * @param options Cascade Options\n * @param isInitiallyOpen boolean if it is opened initially\n * @param openerOptionNode A reference to the opener **Node**\n * @param openerOptionElementRef? RefObject to the opener **CascadeOption**\n * @param openerMenuRef? RefObject to the **CascadeMenu** containing the *openerOptionElement*\n * @param ref ForwardRef for:\n * - setOpen(boolean) Toggles the menus open state */\nexport function CascadeMenuOpenerRaw<Meta extends TMeta = object>(\n  props: PropsWithChildren<TCascadeMenuProps<Meta>>,\n  ref: React.ForwardedRef<TCascadeMenuForwardRef>\n) {\n  return (\n    <>\n      {props.children}\n      <CascadeMenuBase<Meta> {...props} ref={ref} />\n    </>\n  )\n}\n\nexport const CascadeMenuOpener = forwardRef(CascadeMenuOpenerRaw) as <Meta extends TMeta = object>(\n  props: PropsWithChildren<TCascadeMenuProps<Meta>> & {\n    ref?: ForwardedRef<TCascadeMenuForwardRef>\n  }\n) => ReactElement\n"],"names":["forwardRef","useEffect","useImperativeHandle","useRef","useState","createPortal","components","CascadeOption","classes","cx","shouldIncreasePaddingBecauseOfScrollbarBehaviourBasedOnBrowser","navigator","userAgent","indexOf","document","documentMode","CascadeMenuBaseRaw","ref","isInitiallyOpen","openerMenuRef","props","innerMenuRef","open","setOpen","showScrollbar","value","current","style","overflowY","handleMouseExit","setFocusList","handleMouseEnter","isScrolling","handleScroll","node","nodes","cascadeOptionForwardRef","setFocused","handleScrollEnd","addEventListener","removeEventListener","setMenuOpen","relocateMenu","refable","openerOptionNode","elementRef","openerOptionElementRef","rect","getBoundingClientRect","isScrollable","offsetHeight","scrollHeight","xOffset","width","level","height","updatePosition","top","scrollingElement","scrollTop","left","yPixel","xPixel","div","className","data-testid","id","Menu","menuProps","innerRef","menu","focused","zIndex","isLoading","placement","minMenuHeight","maxMenuHeight","menuPlacement","menuPosition","menuShouldScrollIntoView","options","map","op","index","OptionComponent","onSelect","option","key","menuPortalTarget","body","toString","CascadeMenuBase","CascadeMenuOpenerRaw","children","CascadeMenuOpener"],"mappings":"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"}

package/lib/esm/components/Form/Select/Cascade/CascadeOption.js

@@ -1,2 +1,2 @@
-function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{createRef,useImperativeHandle}from"react";import{nodeHelper}from"./utils";import{CascadeMenuOpener}from"./CascadeMenu";import{useCascadeOptionState}from"./hooks/useCascadeOptionState";import{ChevronRight}from"lucide-react";import{TextWithTooltip}from"../../../TextWithTooltip";import classes from"./CascadeOption.module.css";import{ICON_SIZES}from"../../../../theme";import{cx}from"../../../../helper/cx";function CascadeSelectOption(props){const optionRef=createRef();const Tooltippable=()=>_jsxs(_Fragment,{children:[_jsx(TextWithTooltip,{text:props.option.label,typoType:"body",tooltipProps:{multiline:true,style:{width:300},withinPortal:true},classNameTooltip:classes.tooltip}),props.isOpener&&_jsx(ChevronRight,{size:ICON_SIZES.SMALL})]});return _jsx("div",{ref:optionRef,className:cx(classes.option,props.className),children:props.component?_jsx(props.component,{option:props.option}):_jsx(Tooltippable,{})})}export function CascadeOption(_0){let{menuProps}=_0,props=_object_without_properties(_0,["menuProps"]);var _props_classNames,_props_components,_props_classNames1,_props_components1;const index=props.index||0;const activeNode=props.nodes[index];const{setFocused}=useCascadeOptionState({activeNode:activeNode,nodes:props.allNodes,setFocusedList:props.setFocusList,activeClass:classes["active-class"],inActiveClass:classes["inactive-class"]});useImperativeHandle(activeNode.cascadeOptionForwardRef,()=>({setFocused}));return _jsx("div",{className:cx(classes.opener),onClick:e=>{e.nativeEvent.stopImmediatePropagation();e.stopPropagation();if(!props.openerSelectable&&activeNode._option.options)return;const nodesToRoot=nodeHelper(props.allNodes).getTraceBackToFirstColumn(activeNode)||[];props.onSelect(nodeHelper(props.allNodes).transformOneDimensionalNodesArrayIntoValues(nodesToRoot))},ref:activeNode.elementRef,"data-testid":`cascade-menu-option-${activeNode.id}`,tabIndex:0,children:!props.option.options?_jsx(CascadeSelectOption,{className:cx(classes["option-clickable"],(_props_classNames=props.classNames)===null||_props_classNames===void 0?void 0:_props_classNames.option),isOpener:false,option:props.option,component:(_props_components=props.components)===null||_props_components===void 0?void 0:_props_components.option}):_jsx(CascadeMenuOpener,_object_spread_props(_object_spread({},props),{openerOptionNode:activeNode,openerOptionElementRef:activeNode.elementRef,ref:activeNode.menuForwardRef,nodes:activeNode.children,index:index,onSelect:value=>props.onSelect(value),options:props.option.options,menuProps:menuProps,children:_jsx(CascadeSelectOption,{option:props.option,isOpener:true,className:cx((_props_classNames1=props.classNames)===null||_props_classNames1===void 0?void 0:_props_classNames1.openerOption,props.openerSelectable?classes["option-clickable"]:""),component:(_props_components1=props.components)===null||_props_components1===void 0?void 0:_props_components1.openerOption})}))})}
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{createRef,useImperativeHandle}from"react";import{nodeHelper}from"./utils";import{CascadeMenuOpener}from"./CascadeMenu";import{useCascadeOptionState}from"./hooks/useCascadeOptionState";import{ChevronRight}from"lucide-react";import{TextWithTooltip}from"../../../TextWithTooltip";import classes from"./CascadeOption.module.css";import{ICON_SIZES}from"../../../../theme";import{cx}from"../../../../helper/cx";function CascadeSelectOption(props){const optionRef=createRef();const Tooltippable=()=>_jsxs(_Fragment,{children:[_jsx(TextWithTooltip,{text:props.option.label,typoType:"body",tooltipProps:{multiline:true,style:{width:300},withinPortal:true},classNameTooltip:classes.tooltip}),props.isOpener&&_jsx(ChevronRight,{size:ICON_SIZES.SMALL})]});return _jsx("div",{ref:optionRef,className:cx(classes.option,props.className),children:props.component?_jsx(props.component,{option:props.option}):_jsx(Tooltippable,{})})}export function CascadeOption(_0){let{menuProps}=_0,props=_object_without_properties(_0,["menuProps"]);var _props_classNames,_props_components,_props_classNames1,_props_components1;const index=props.index||0;const activeNode=props.nodes[index];const{setFocused}=useCascadeOptionState({activeNode:activeNode,nodes:props.allNodes,setFocusedList:props.setFocusList,activeClass:classes["active-class"],inActiveClass:classes["inactive-class"]});useImperativeHandle(activeNode.cascadeOptionForwardRef,()=>({setFocused}));return _jsx("div",{className:cx(classes.opener),onClick:e=>{e.nativeEvent.stopImmediatePropagation();e.stopPropagation();if(!props.openerSelectable&&activeNode._option.options)return;const nodesToRoot=nodeHelper(props.allNodes).getTraceBackToFirstColumn(activeNode)||[];props.onSelect(nodeHelper(props.allNodes).transformOneDimensionalNodesArrayIntoValues(nodesToRoot))},ref:activeNode.elementRef,"data-testid":`cascade-menu-option-${activeNode.id}`,tabIndex:0,children:!props.option.options?_jsx(CascadeSelectOption,{className:cx(classes["option-clickable"],(_props_classNames=props.classNames)===null||_props_classNames===void 0?void 0:_props_classNames.option),isOpener:false,option:props.option,component:(_props_components=props.components)===null||_props_components===void 0?void 0:_props_components.option}):_jsx(CascadeMenuOpener,_object_spread_props(_object_spread({},props),{openerOptionNode:activeNode,openerOptionElementRef:activeNode.elementRef,ref:activeNode.menuForwardRef,nodes:activeNode.children,index:index,onSelect:value=>props.onSelect(value),options:props.option.options,menuProps:menuProps,children:_jsx(CascadeSelectOption,{option:props.option,isOpener:true,className:cx((_props_classNames1=props.classNames)===null||_props_classNames1===void 0?void 0:_props_classNames1.openerOption,props.openerSelectable?classes["option-clickable"]:""),component:(_props_components1=props.components)===null||_props_components1===void 0?void 0:_props_components1.openerOption})}))})}
 //# sourceMappingURL=CascadeOption.js.map

package/lib/esm/components/Form/Select/Cascade/CascadeOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Form/Select/Cascade/CascadeOption.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { createRef, FC, PropsWithChildren, RefObject, useImperativeHandle } from \"react\"\nimport { nodeHelper, TNode } from \"./utils\"\nimport { TMeta, TStylingProps, TValue } from \"./index\"\nimport { MenuProps } from \"@mantine/core\"\nimport { CascadeMenuOpener } from \"./CascadeMenu\"\nimport { useCascadeOptionState } from \"./hooks/useCascadeOptionState\"\nimport { ChevronRight } from \"lucide-react\"\nimport { TextWithTooltip } from \"../../../TextWithTooltip\"\nimport classes from \"./CascadeOption.module.css\"\nimport { ICON_SIZES } from \"../../../../theme\"\nimport { cx } from \"../../../../helper/cx\"\n\nexport type TCascadeOptionProps<Meta extends TMeta = object> = PropsWithChildren &\n  TStylingProps & {\n    nodes: TNode<Meta>[]\n    openerSelectable?: boolean\n    setFocusList: (nodes: TNode<Meta>[]) => void\n    focusedList: RefObject<TNode<Meta>[]>\n    allNodes: TNode<Meta>[]\n    level: number\n    OptionComponent?: FC<{ option: TValue }>\n    option: TCascadeOption<Meta>\n    menuProps: MenuProps\n    openerMenuRef?: RefObject<HTMLDivElement>\n    onSelect: (value: Omit<TCascadeOption<Meta>, \"options\">[]) => void\n    index?: number\n    menuPortalTarget?: RefObject<HTMLDivElement>\n  }\n\ntype TCascadeSelectOptionProps<Meta extends Record<string, any>> = {\n  option: Omit<TCascadeOption<Meta>, \"options\">\n  className?: string\n  component?: FC<{ option: TCascadeOption<Meta> }>\n  isOpener: boolean\n}\n\n/**\n * The actual selectable **Option**\n @param option option properties for this option\n  label The label\n  value  The Value\n  options?  Children. If given, the option is automatically an opener\n  meta? Meta information for this option to pass state to the cascades onSelect listener\n @param isOpener flag if this option can open\n @param className Extra classname\n @param component.option Extra Option component to overwrite existing look\n */\nfunction CascadeSelectOption<Meta extends TMeta = object>(props: TCascadeSelectOptionProps<Meta>) {\n  const optionRef = createRef<HTMLDivElement>()\n  // Remounting Tooltippale on purpose to trigger re-evaluation of whether tooltip is shown or not in TextWithTooltip\n  const Tooltippable = () => (\n    <>\n      <TextWithTooltip\n        text={props.option.label}\n        typoType={\"body\"}\n        tooltipProps={{\n          multiline: true,\n          style: {\n            width: 300,\n          },\n          withinPortal: true,\n        }}\n        classNameTooltip={classes.tooltip}\n      />\n      {props.isOpener && <ChevronRight size={ICON_SIZES.SMALL} />}\n    </>\n  )\n  return (\n    <div ref={optionRef} className={cx(classes.option, props.className)}>\n      {props.component ? <props.component option={props.option} /> : <Tooltippable />}\n    </div>\n  )\n}\n\nexport type TCascadeOptionForwardRef = {\n  setFocused: (val: boolean) => void\n}\n\n/**\n *\n * @param nodes All current nodes on the current level\n * @param openerSelectable flag if this option should be clickable if it has children\n * @param setFocusList Callback to set the focused list\n * @param focusedList Focused list\n * @param allNodes All nodes\n * @param level Level\n * @param OptionComponent Custom component for this option\n * @constructor\n */\n\nexport function CascadeOption<Meta extends Record<string, any>>({\n  menuProps,\n  ...props\n}: TCascadeOptionProps<Meta>) {\n  const index = props.index || 0\n  const activeNode = props.nodes[index]\n  const { setFocused } = useCascadeOptionState({\n    activeNode: activeNode,\n    nodes: props.allNodes,\n    setFocusedList: props.setFocusList,\n    activeClass: classes[\"active-class\"],\n    inActiveClass: classes[\"inactive-class\"],\n  })\n  useImperativeHandle(activeNode.cascadeOptionForwardRef, () => ({\n    setFocused,\n  }))\n\n  return (\n    <div\n      className={cx(classes.opener)}\n      onClick={(e) => {\n        e.nativeEvent.stopImmediatePropagation()\n        e.stopPropagation()\n        if (!props.openerSelectable && activeNode._option.options) return\n        const nodesToRoot = nodeHelper(props.allNodes).getTraceBackToFirstColumn(activeNode) || []\n\n        props.onSelect(\n          nodeHelper(props.allNodes).transformOneDimensionalNodesArrayIntoValues(nodesToRoot)\n        )\n      }}\n      ref={activeNode.elementRef}\n      data-testid={`cascade-menu-option-${activeNode.id}`}\n      tabIndex={0}\n    >\n      {!props.option.options ? (\n        <CascadeSelectOption\n          className={cx(classes[\"option-clickable\"], props.classNames?.option)}\n          isOpener={false}\n          option={props.option}\n          component={props.components?.option}\n        />\n      ) : (\n        <CascadeMenuOpener\n          {...props}\n          openerOptionNode={activeNode}\n          openerOptionElementRef={activeNode.elementRef}\n          ref={activeNode.menuForwardRef}\n          nodes={activeNode.children}\n          index={index}\n          onSelect={(value) => props.onSelect(value)}\n          options={props.option.options}\n          menuProps={menuProps}\n        >\n          <CascadeSelectOption\n            option={props.option}\n            isOpener={true}\n            className={cx(\n              props.classNames?.openerOption,\n              props.openerSelectable ? classes[\"option-clickable\"] : \"\"\n            )}\n            component={props.components?.openerOption}\n          />\n        </CascadeMenuOpener>\n      )}\n    </div>\n  )\n}\n\nexport type TCascadeOption<Meta extends TMeta = object> = {\n  label: string\n  value: string\n  options?: Array<TCascadeOption<Meta>>\n  meta?: Meta\n}\n"],"names":["createRef","useImperativeHandle","nodeHelper","CascadeMenuOpener","useCascadeOptionState","ChevronRight","TextWithTooltip","classes","ICON_SIZES","cx","CascadeSelectOption","props","optionRef","Tooltippable","text","option","label","typoType","tooltipProps","multiline","style","width","withinPortal","classNameTooltip","tooltip","isOpener","size","SMALL","div","ref","className","component","CascadeOption","menuProps","index","activeNode","nodes","setFocused","allNodes","setFocusedList","setFocusList","activeClass","inActiveClass","cascadeOptionForwardRef","opener","onClick","e","nativeEvent","stopImmediatePropagation","stopPropagation","openerSelectable","_option","options","nodesToRoot","getTraceBackToFirstColumn","onSelect","transformOneDimensionalNodesArrayIntoValues","elementRef","data-testid","id","tabIndex","classNames","components","openerOptionNode","openerOptionElementRef","menuForwardRef","children","value","openerOption"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../src/components/Form/Select/Cascade/CascadeOption.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { createRef, FC, PropsWithChildren, RefObject, useImperativeHandle } from \"react\"\nimport { nodeHelper, TNode } from \"./utils\"\nimport { TMeta, TStylingProps, TValue } from \"./index\"\nimport { MenuProps } from \"@mantine/core\"\nimport { CascadeMenuOpener } from \"./CascadeMenu\"\nimport { useCascadeOptionState } from \"./hooks/useCascadeOptionState\"\nimport { ChevronRight } from \"lucide-react\"\nimport { TextWithTooltip } from \"../../../TextWithTooltip\"\nimport classes from \"./CascadeOption.module.css\"\nimport { ICON_SIZES } from \"../../../../theme\"\nimport { cx } from \"../../../../helper/cx\"\n\nexport type TCascadeOptionProps<Meta extends TMeta = object> = PropsWithChildren &\n  TStylingProps & {\n    nodes: TNode<Meta>[]\n    openerSelectable?: boolean\n    setFocusList: (nodes: TNode<Meta>[]) => void\n    focusedList: RefObject<TNode<Meta>[]>\n    allNodes: TNode<Meta>[]\n    level: number\n    OptionComponent?: FC<{ option: TValue }>\n    option: TCascadeOption<Meta>\n    menuProps: MenuProps\n    openerMenuRef?: RefObject<HTMLDivElement>\n    onSelect: (value: Omit<TCascadeOption<Meta>, \"options\">[]) => void\n    index?: number\n    menuPortalTarget?: RefObject<HTMLDivElement>\n  }\n\ntype TCascadeSelectOptionProps<Meta extends Record<string, any>> = {\n  option: Omit<TCascadeOption<Meta>, \"options\">\n  className?: string\n  component?: FC<{ option: TCascadeOption<Meta> }>\n  isOpener: boolean\n}\n\n/**\n * The actual selectable **Option**\n @param option option properties for this option\n  label The label\n  value  The Value\n  options?  Children. If given, the option is automatically an opener\n  meta? Meta information for this option to pass state to the cascades onSelect listener\n @param isOpener flag if this option can open\n @param className Extra classname\n @param component.option Extra Option component to overwrite existing look\n */\nfunction CascadeSelectOption<Meta extends TMeta = object>(props: TCascadeSelectOptionProps<Meta>) {\n  const optionRef = createRef<HTMLDivElement>()\n  // Remounting Tooltippale on purpose to trigger re-evaluation of whether tooltip is shown or not in TextWithTooltip\n  const Tooltippable = () => (\n    <>\n      <TextWithTooltip\n        text={props.option.label}\n        typoType={\"body\"}\n        tooltipProps={{\n          multiline: true,\n          style: {\n            width: 300,\n          },\n          withinPortal: true,\n        }}\n        classNameTooltip={classes.tooltip}\n      />\n      {props.isOpener && <ChevronRight size={ICON_SIZES.SMALL} />}\n    </>\n  )\n  return (\n    <div ref={optionRef} className={cx(classes.option, props.className)}>\n      {props.component ? <props.component option={props.option} /> : <Tooltippable />}\n    </div>\n  )\n}\n\nexport type TCascadeOptionForwardRef = {\n  setFocused: (val: boolean) => void\n}\n\n/**\n *\n * @param nodes All current nodes on the current level\n * @param openerSelectable flag if this option should be clickable if it has children\n * @param setFocusList Callback to set the focused list\n * @param focusedList Focused list\n * @param allNodes All nodes\n * @param level Level\n * @param OptionComponent Custom component for this option\n * @constructor\n */\n\nexport function CascadeOption<Meta extends Record<string, any>>({\n  menuProps,\n  ...props\n}: TCascadeOptionProps<Meta>) {\n  const index = props.index || 0\n  const activeNode = props.nodes[index]\n  const { setFocused } = useCascadeOptionState({\n    activeNode: activeNode,\n    nodes: props.allNodes,\n    setFocusedList: props.setFocusList,\n    activeClass: classes[\"active-class\"],\n    inActiveClass: classes[\"inactive-class\"],\n  })\n  useImperativeHandle(activeNode.cascadeOptionForwardRef, () => ({\n    setFocused,\n  }))\n\n  return (\n    <div\n      className={cx(classes.opener)}\n      onClick={(e) => {\n        e.nativeEvent.stopImmediatePropagation()\n        e.stopPropagation()\n        if (!props.openerSelectable && activeNode._option.options) return\n        const nodesToRoot = nodeHelper(props.allNodes).getTraceBackToFirstColumn(activeNode) || []\n\n        props.onSelect(\n          nodeHelper(props.allNodes).transformOneDimensionalNodesArrayIntoValues(nodesToRoot)\n        )\n      }}\n      ref={activeNode.elementRef}\n      data-testid={`cascade-menu-option-${activeNode.id}`}\n      tabIndex={0}\n    >\n      {!props.option.options ? (\n        <CascadeSelectOption\n          className={cx(classes[\"option-clickable\"], props.classNames?.option)}\n          isOpener={false}\n          option={props.option}\n          component={props.components?.option}\n        />\n      ) : (\n        <CascadeMenuOpener\n          {...props}\n          openerOptionNode={activeNode}\n          openerOptionElementRef={activeNode.elementRef}\n          ref={activeNode.menuForwardRef}\n          nodes={activeNode.children}\n          index={index}\n          onSelect={(value) => props.onSelect(value)}\n          options={props.option.options}\n          menuProps={menuProps}\n        >\n          <CascadeSelectOption\n            option={props.option}\n            isOpener={true}\n            className={cx(\n              props.classNames?.openerOption,\n              props.openerSelectable ? classes[\"option-clickable\"] : \"\"\n            )}\n            component={props.components?.openerOption}\n          />\n        </CascadeMenuOpener>\n      )}\n    </div>\n  )\n}\n\nexport type TCascadeOption<Meta extends TMeta = object> = {\n  label: string\n  value: string\n  options?: Array<TCascadeOption<Meta>>\n  meta?: Meta\n}\n"],"names":["createRef","useImperativeHandle","nodeHelper","CascadeMenuOpener","useCascadeOptionState","ChevronRight","TextWithTooltip","classes","ICON_SIZES","cx","CascadeSelectOption","props","optionRef","Tooltippable","text","option","label","typoType","tooltipProps","multiline","style","width","withinPortal","classNameTooltip","tooltip","isOpener","size","SMALL","div","ref","className","component","CascadeOption","menuProps","index","activeNode","nodes","setFocused","allNodes","setFocusedList","setFocusList","activeClass","inActiveClass","cascadeOptionForwardRef","opener","onClick","e","nativeEvent","stopImmediatePropagation","stopPropagation","openerSelectable","_option","options","nodesToRoot","getTraceBackToFirstColumn","onSelect","transformOneDimensionalNodesArrayIntoValues","elementRef","data-testid","id","tabIndex","classNames","components","openerOptionNode","openerOptionElementRef","menuForwardRef","children","value","openerOption"],"mappings":"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"}

package/lib/esm/components/Form/Select/Cascade/index.js

@@ -1,2 +1,2 @@
-function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useRef,useState}from"react";import{buildNodeTree,nodeHelper}from"./utils";import Creatable from"react-select/creatable";import{useCascadeKeyDown}from"./hooks/useCascadeKeyDown";import{CascadeMenuBase}from"./CascadeMenu";import{useFocusedList}from"./hooks/useFocusedList";import{useMantineColorScheme,useMantineTheme}from"@mantine/core";export function Cascade(_0){let{separator=" > "}=_0,props=_object_without_properties(_0,["separator"]);const selectRef=useRef(null);const containerRef=useRef(null);const[filteredOptions,setFilteredOptions]=useState(props.options);const theme=useMantineTheme();const nodes=buildNodeTree(filteredOptions);const[selectedValue,setSelectedValue]=useState();const focusedListState=useFocusedList(nodes);useEffect(()=>{focusedListState.setFirstOptionsActive()},[focusedListState.setFirstOptionsActive,nodes]);const{colorScheme}=useMantineColorScheme();const isDarkScheme=colorScheme==="dark";const{handleKeyDown}=useCascadeKeyDown({focusedListState:focusedListState,filteredOptions,onApply:nodes=>handleApply(nodes.map(n=>n._option)),openerSelectable:props.openerSelectable});const handleApply=values=>{focusedListState.setFocusedList([]);setSelectedValue(values);props.onSelect(values)};const inputStyles={width:"100%",color:`${isDarkScheme?theme.white:theme.black}`,backgroundColor:`${isDarkScheme?theme.colors.gray[8]:theme.white}`,"&:focus":{backgroundColor:`${isDarkScheme?theme.colors.gray[8]:theme.white}`}};return _jsx("div",{onClick:e=>{e.nativeEvent.stopImmediatePropagation();e.stopPropagation()},ref:containerRef,"data-testid":"cascade-select-container",onKeyDown:props.onKeyDown,children:_jsx(Creatable,_object_spread_props(_object_spread({ref:selectRef,onMenuOpen:()=>focusedListState.setFirstOptionsActive(),onMenuClose:()=>setFilteredOptions(props.options),onInputChange:newValue=>{focusedListState.setFocusedList([]);const filtered=nodeHelper(nodes).filterOptionsByValue(props.options,newValue);setFilteredOptions(filtered)},value:{label:(selectedValue===null||selectedValue===void 0?void 0:selectedValue.map(v=>v.label).join(separator))||"",value:(selectedValue===null||selectedValue===void 0?void 0:selectedValue.map(v=>v.value).join(separator))||"",options:[]},onKeyDown:handleKeyDown,onCreateOption:()=>{}},props.selectProps),{styles:_object_spread({input:base=>_object_spread({},base,inputStyles),control:base=>_object_spread({},base,inputStyles),container:base=>_object_spread_props(_object_spread({},base),{width:"100%"})},props.styles),components:{DropdownIndicator:()=>null,IndicatorSeparator:()=>null,Menu:base=>filteredOptions.length!==0?_jsx("div",{onClick:e=>e.stopPropagation(),children:_jsx(CascadeMenuBase,{setFocusList:focusedListState.setFocusedList,focusedList:focusedListState.focusedList,openerOptionElementRef:containerRef,nodes:nodes,allNodes:nodes,openerSelectable:props.openerSelectable,isInitiallyOpen:true,level:0,options:filteredOptions,menuProps:base,styles:props.styles,onSelect:value=>{handleApply(value);const mergedLabel=props.afterSelectDisplayTransform?props.afterSelectDisplayTransform(value):value.map(v=>v.label).join(separator);const mergedValue=value.map(v=>v.label).join(":");base.selectOption({value:mergedValue,label:mergedLabel})}})}):null},options:[]}))})}
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useRef,useState}from"react";import{buildNodeTree,nodeHelper}from"./utils";import Creatable from"react-select/creatable";import{useCascadeKeyDown}from"./hooks/useCascadeKeyDown";import{CascadeMenuBase}from"./CascadeMenu";import{useFocusedList}from"./hooks/useFocusedList";import{useMantineColorScheme,useMantineTheme}from"@mantine/core";export function Cascade(_0){let{separator=" > "}=_0,props=_object_without_properties(_0,["separator"]);const selectRef=useRef(null);const containerRef=useRef(null);const[filteredOptions,setFilteredOptions]=useState(props.options);const theme=useMantineTheme();const nodes=buildNodeTree(filteredOptions);const[selectedValue,setSelectedValue]=useState();const focusedListState=useFocusedList(nodes);useEffect(()=>{focusedListState.setFirstOptionsActive()},[focusedListState.setFirstOptionsActive,nodes]);const{colorScheme}=useMantineColorScheme();const isDarkScheme=colorScheme==="dark";const{handleKeyDown}=useCascadeKeyDown({focusedListState:focusedListState,filteredOptions,onApply:nodes=>handleApply(nodes.map(n=>n._option)),openerSelectable:props.openerSelectable});const handleApply=values=>{focusedListState.setFocusedList([]);setSelectedValue(values);props.onSelect(values)};const inputStyles={width:"100%",color:`${isDarkScheme?theme.white:theme.black}`,backgroundColor:`${isDarkScheme?theme.colors.gray[8]:theme.white}`,"&:focus":{backgroundColor:`${isDarkScheme?theme.colors.gray[8]:theme.white}`}};return _jsx("div",{onClick:e=>{e.nativeEvent.stopImmediatePropagation();e.stopPropagation()},ref:containerRef,"data-testid":"cascade-select-container",onKeyDown:props.onKeyDown,children:_jsx(Creatable,_object_spread_props(_object_spread({ref:selectRef,onMenuOpen:()=>focusedListState.setFirstOptionsActive(),onMenuClose:()=>setFilteredOptions(props.options),onInputChange:newValue=>{focusedListState.setFocusedList([]);const filtered=nodeHelper(nodes).filterOptionsByValue(props.options,newValue);setFilteredOptions(filtered)},value:{label:(selectedValue===null||selectedValue===void 0?void 0:selectedValue.map(v=>v.label).join(separator))||"",value:(selectedValue===null||selectedValue===void 0?void 0:selectedValue.map(v=>v.value).join(separator))||"",options:[]},onKeyDown:handleKeyDown,onCreateOption:()=>{}},props.selectProps),{styles:_object_spread({input:base=>_object_spread({},base,inputStyles),control:base=>_object_spread({},base,inputStyles),container:base=>_object_spread_props(_object_spread({},base),{width:"100%"})},props.styles),components:{DropdownIndicator:()=>null,IndicatorSeparator:()=>null,Menu:base=>filteredOptions.length!==0?_jsx("div",{onClick:e=>e.stopPropagation(),children:_jsx(CascadeMenuBase,{setFocusList:focusedListState.setFocusedList,focusedList:focusedListState.focusedList,openerOptionElementRef:containerRef,nodes:nodes,allNodes:nodes,openerSelectable:props.openerSelectable,isInitiallyOpen:true,level:0,options:filteredOptions,menuProps:base,styles:props.styles,onSelect:value=>{handleApply(value);const mergedLabel=props.afterSelectDisplayTransform?props.afterSelectDisplayTransform(value):value.map(v=>v.label).join(separator);const mergedValue=value.map(v=>v.label).join(":");base.selectOption({value:mergedValue,label:mergedLabel})}})}):null},options:[]}))})}
 //# sourceMappingURL=index.js.map

package/lib/esm/components/Form/Select/Cascade/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Form/Select/Cascade/index.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { CSSObjectWithLabel, GroupBase } from \"react-select\"\nimport * as SelectType from \"react-select/base\"\nimport { FC, KeyboardEventHandler, RefObject, useEffect, useRef, useState } from \"react\"\nimport { buildNodeTree, nodeHelper } from \"./utils\"\nimport Creatable from \"react-select/creatable\"\nimport { TCascadeOption } from \"./CascadeOption\"\nimport { useCascadeKeyDown } from \"./hooks/useCascadeKeyDown\"\nimport { CascadeMenuBase } from \"./CascadeMenu\"\nimport { useFocusedList } from \"./hooks/useFocusedList\"\nimport { PublicBaseSelectProps } from \"react-select/base\"\nimport { useMantineColorScheme, useMantineTheme } from \"@mantine/core\"\n\nexport type TCascadeMenuForwardRef = {\n  setOpen: (value: boolean) => void\n}\n\nexport type TStylingProps = {\n  components?: {\n    option?: FC<{ option: TValue }>\n    openerOption?: FC<{ option: TValue }>\n  }\n  classNames?: {\n    option?: string\n    openerOption?: string\n  }\n  styles?: {\n    maxMenuHeight?: string\n    menuWidth?: string\n    menuZIndex?: number\n  }\n}\n\nexport type TValue = { value: string; label: string }\nexport type TMeta = Record<string, any>\n\ntype TCascadeProps<Meta extends TMeta> = TStylingProps & {\n  options: Array<TCascadeOption<Meta>>\n  onSelect: (value: TCascadeOption<Meta>[]) => void\n  onKeyDown?: KeyboardEventHandler<HTMLDivElement>\n  afterSelectDisplayTransform?: (values: TValue[]) => string\n  afterSelectValueTransform?: (values: TValue[]) => string\n  separator?: string\n  selectProps?: Partial<PublicBaseSelectProps<TCascadeOption<Meta>, false, any>>\n  menuPortalTarget?: RefObject<HTMLDivElement>\n  openerSelectable?: boolean\n}\n\n/**\n * The **Cascade** is a recursive component that traverses down its given *options*.\n * Under the hood it uses @React-Select but replaces the menus with **CascadeMenu** that render **CascadeOptions**.\n *\n * @param options Options Items for the cascade\n * @param onSelect Callback when an **CascadeOption** is clicked. Passes the \"path\" of options\n * @param onKeyDown Keydown handler\n * @param afterSelectDisplayTransform? Transforms the values from the selected option paths to a string that is displayed\n * @param afterSelectValueTransform?: (values: TValue[]) => string\n * @param separator? If no *afterSelectDisplayTransform* is set, the separater (default ' > ') is separating the options labels\n * @param selectProps? Props passed to the @React-Select Select\n * @param menuPortalTarget? Target for the portal in which the **CascadeMenus** are rendered\n * @param openerSelectable? Specifies if an **CascadeOption** that opens another menu can be selected\n */\nexport function Cascade<Meta extends TMeta = object>({\n  separator = \" > \",\n  ...props\n}: TCascadeProps<Meta>) {\n  const selectRef: RefObject<\n    SelectType.default<TCascadeOption<Meta>, false, GroupBase<TCascadeOption<Meta>>>\n  > = useRef(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [filteredOptions, setFilteredOptions] = useState<TCascadeOption<Meta>[]>(props.options) // reduces options based on input value\n\n  const theme = useMantineTheme()\n\n  // Initialize virtual nodes based on the filtered CascadeOptions\n  const nodes = buildNodeTree(filteredOptions)\n\n  const [selectedValue, setSelectedValue] = useState<TCascadeOption<Meta>[] | undefined>() // keeps track of selected value\n  const focusedListState = useFocusedList(nodes) // Keeps track of currently focused items\n  useEffect(() => {\n    focusedListState.setFirstOptionsActive()\n  }, [focusedListState.setFirstOptionsActive, nodes])\n  const { colorScheme } = useMantineColorScheme()\n  const isDarkScheme = colorScheme === \"dark\"\n\n  // Registers key down listeners for hotkey usage\n  const { handleKeyDown } = useCascadeKeyDown({\n    focusedListState: focusedListState,\n    filteredOptions,\n    onApply: (nodes) => handleApply(nodes.map((n) => n._option)),\n    openerSelectable: props.openerSelectable,\n  })\n\n  const handleApply = (values: TCascadeOption<Meta>[]) => {\n    focusedListState.setFocusedList([])\n    setSelectedValue(values)\n    props.onSelect(values)\n  }\n\n  const inputStyles = {\n    width: \"100%\",\n    color: `${isDarkScheme ? theme.white : theme.black}`,\n    backgroundColor: `${isDarkScheme ? theme.colors.gray[8] : theme.white}`,\n    \"&:focus\": {\n      backgroundColor: `${isDarkScheme ? theme.colors.gray[8] : theme.white}`,\n    },\n  }\n\n  return (\n    <div\n      onClick={(e) => {\n        // Last saviour before event leaves component\n        e.nativeEvent.stopImmediatePropagation()\n        e.stopPropagation()\n      }}\n      ref={containerRef}\n      data-testid={\"cascade-select-container\"}\n      onKeyDown={props.onKeyDown}\n    >\n      <Creatable<TCascadeOption<Meta>, false>\n        ref={selectRef}\n        onMenuOpen={() => focusedListState.setFirstOptionsActive()}\n        onMenuClose={() => setFilteredOptions(props.options)}\n        onInputChange={(newValue) => {\n          focusedListState.setFocusedList([])\n          const filtered = nodeHelper(nodes).filterOptionsByValue(props.options, newValue)\n          setFilteredOptions(filtered)\n        }}\n        value={{\n          label: selectedValue?.map((v) => v.label).join(separator) || \"\",\n          value: selectedValue?.map((v) => v.value).join(separator) || \"\",\n          options: [],\n        }}\n        onKeyDown={handleKeyDown}\n        onCreateOption={() => {}}\n        {...props.selectProps}\n        styles={{\n          input: (base) =>\n            ({\n              ...base,\n              ...inputStyles,\n            }) as CSSObjectWithLabel,\n          control: (base) =>\n            ({\n              ...base,\n              ...inputStyles,\n            }) as CSSObjectWithLabel,\n          container: (base) =>\n            ({\n              ...base,\n              width: \"100%\",\n            }) as CSSObjectWithLabel,\n          ...props.styles,\n        }}\n        components={{\n          DropdownIndicator: () => null,\n          IndicatorSeparator: () => null,\n          Menu: (base) =>\n            (filteredOptions.length !== 0 ? (\n              <div onClick={(e) => e.stopPropagation()}>\n                <CascadeMenuBase<Meta>\n                  setFocusList={focusedListState.setFocusedList}\n                  focusedList={focusedListState.focusedList}\n                  openerOptionElementRef={containerRef}\n                  nodes={nodes}\n                  allNodes={nodes}\n                  openerSelectable={props.openerSelectable}\n                  isInitiallyOpen={true}\n                  level={0}\n                  options={filteredOptions}\n                  menuProps={base}\n                  styles={props.styles}\n                  onSelect={(value: TCascadeOption<Meta>[]) => {\n                    handleApply(value)\n                    const mergedLabel = props.afterSelectDisplayTransform\n                      ? props.afterSelectDisplayTransform(value)\n                      : value.map((v) => v.label).join(separator)\n                    // I think the following is just to satisfy the @React-Select\n                    const mergedValue = value.map((v) => v.label).join(\":\")\n                    base.selectOption({\n                      value: mergedValue,\n                      label: mergedLabel,\n                    })\n                  }}\n                />\n              </div>\n            ) : null) as React.ReactNode,\n        }}\n        options={[]}\n      />\n    </div>\n  )\n}\n"],"names":["useEffect","useRef","useState","buildNodeTree","nodeHelper","Creatable","useCascadeKeyDown","CascadeMenuBase","useFocusedList","useMantineColorScheme","useMantineTheme","Cascade","separator","props","selectRef","containerRef","filteredOptions","setFilteredOptions","options","theme","nodes","selectedValue","setSelectedValue","focusedListState","setFirstOptionsActive","colorScheme","isDarkScheme","handleKeyDown","onApply","handleApply","map","n","_option","openerSelectable","values","setFocusedList","onSelect","inputStyles","width","color","white","black","backgroundColor","colors","gray","div","onClick","e","nativeEvent","stopImmediatePropagation","stopPropagation","ref","data-testid","onKeyDown","onMenuOpen","onMenuClose","onInputChange","newValue","filtered","filterOptionsByValue","value","label","v","join","onCreateOption","selectProps","styles","input","base","control","container","components","DropdownIndicator","IndicatorSeparator","Menu","length","setFocusList","focusedList","openerOptionElementRef","allNodes","isInitiallyOpen","level","menuProps","mergedLabel","afterSelectDisplayTransform","mergedValue","selectOption"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../src/components/Form/Select/Cascade/index.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { CSSObjectWithLabel, GroupBase } from \"react-select\"\nimport * as SelectType from \"react-select/base\"\nimport { FC, KeyboardEventHandler, RefObject, useEffect, useRef, useState } from \"react\"\nimport { buildNodeTree, nodeHelper } from \"./utils\"\nimport Creatable from \"react-select/creatable\"\nimport { TCascadeOption } from \"./CascadeOption\"\nimport { useCascadeKeyDown } from \"./hooks/useCascadeKeyDown\"\nimport { CascadeMenuBase } from \"./CascadeMenu\"\nimport { useFocusedList } from \"./hooks/useFocusedList\"\nimport { PublicBaseSelectProps } from \"react-select/base\"\nimport { useMantineColorScheme, useMantineTheme } from \"@mantine/core\"\n\nexport type TCascadeMenuForwardRef = {\n  setOpen: (value: boolean) => void\n}\n\nexport type TStylingProps = {\n  components?: {\n    option?: FC<{ option: TValue }>\n    openerOption?: FC<{ option: TValue }>\n  }\n  classNames?: {\n    option?: string\n    openerOption?: string\n  }\n  styles?: {\n    maxMenuHeight?: string\n    menuWidth?: string\n    menuZIndex?: number\n  }\n}\n\nexport type TValue = { value: string; label: string }\nexport type TMeta = Record<string, any>\n\ntype TCascadeProps<Meta extends TMeta> = TStylingProps & {\n  options: Array<TCascadeOption<Meta>>\n  onSelect: (value: TCascadeOption<Meta>[]) => void\n  onKeyDown?: KeyboardEventHandler<HTMLDivElement>\n  afterSelectDisplayTransform?: (values: TValue[]) => string\n  afterSelectValueTransform?: (values: TValue[]) => string\n  separator?: string\n  selectProps?: Partial<PublicBaseSelectProps<TCascadeOption<Meta>, false, any>>\n  menuPortalTarget?: RefObject<HTMLDivElement>\n  openerSelectable?: boolean\n}\n\n/**\n * The **Cascade** is a recursive component that traverses down its given *options*.\n * Under the hood it uses @React-Select but replaces the menus with **CascadeMenu** that render **CascadeOptions**.\n *\n * @param options Options Items for the cascade\n * @param onSelect Callback when an **CascadeOption** is clicked. Passes the \"path\" of options\n * @param onKeyDown Keydown handler\n * @param afterSelectDisplayTransform? Transforms the values from the selected option paths to a string that is displayed\n * @param afterSelectValueTransform?: (values: TValue[]) => string\n * @param separator? If no *afterSelectDisplayTransform* is set, the separater (default ' > ') is separating the options labels\n * @param selectProps? Props passed to the @React-Select Select\n * @param menuPortalTarget? Target for the portal in which the **CascadeMenus** are rendered\n * @param openerSelectable? Specifies if an **CascadeOption** that opens another menu can be selected\n */\nexport function Cascade<Meta extends TMeta = object>({\n  separator = \" > \",\n  ...props\n}: TCascadeProps<Meta>) {\n  const selectRef: RefObject<\n    SelectType.default<TCascadeOption<Meta>, false, GroupBase<TCascadeOption<Meta>>>\n  > = useRef(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [filteredOptions, setFilteredOptions] = useState<TCascadeOption<Meta>[]>(props.options) // reduces options based on input value\n\n  const theme = useMantineTheme()\n\n  // Initialize virtual nodes based on the filtered CascadeOptions\n  const nodes = buildNodeTree(filteredOptions)\n\n  const [selectedValue, setSelectedValue] = useState<TCascadeOption<Meta>[] | undefined>() // keeps track of selected value\n  const focusedListState = useFocusedList(nodes) // Keeps track of currently focused items\n  useEffect(() => {\n    focusedListState.setFirstOptionsActive()\n  }, [focusedListState.setFirstOptionsActive, nodes])\n  const { colorScheme } = useMantineColorScheme()\n  const isDarkScheme = colorScheme === \"dark\"\n\n  // Registers key down listeners for hotkey usage\n  const { handleKeyDown } = useCascadeKeyDown({\n    focusedListState: focusedListState,\n    filteredOptions,\n    onApply: (nodes) => handleApply(nodes.map((n) => n._option)),\n    openerSelectable: props.openerSelectable,\n  })\n\n  const handleApply = (values: TCascadeOption<Meta>[]) => {\n    focusedListState.setFocusedList([])\n    setSelectedValue(values)\n    props.onSelect(values)\n  }\n\n  const inputStyles = {\n    width: \"100%\",\n    color: `${isDarkScheme ? theme.white : theme.black}`,\n    backgroundColor: `${isDarkScheme ? theme.colors.gray[8] : theme.white}`,\n    \"&:focus\": {\n      backgroundColor: `${isDarkScheme ? theme.colors.gray[8] : theme.white}`,\n    },\n  }\n\n  return (\n    <div\n      onClick={(e) => {\n        // Last saviour before event leaves component\n        e.nativeEvent.stopImmediatePropagation()\n        e.stopPropagation()\n      }}\n      ref={containerRef}\n      data-testid={\"cascade-select-container\"}\n      onKeyDown={props.onKeyDown}\n    >\n      <Creatable<TCascadeOption<Meta>, false>\n        ref={selectRef}\n        onMenuOpen={() => focusedListState.setFirstOptionsActive()}\n        onMenuClose={() => setFilteredOptions(props.options)}\n        onInputChange={(newValue) => {\n          focusedListState.setFocusedList([])\n          const filtered = nodeHelper(nodes).filterOptionsByValue(props.options, newValue)\n          setFilteredOptions(filtered)\n        }}\n        value={{\n          label: selectedValue?.map((v) => v.label).join(separator) || \"\",\n          value: selectedValue?.map((v) => v.value).join(separator) || \"\",\n          options: [],\n        }}\n        onKeyDown={handleKeyDown}\n        onCreateOption={() => {}}\n        {...props.selectProps}\n        styles={{\n          input: (base) =>\n            ({\n              ...base,\n              ...inputStyles,\n            }) as CSSObjectWithLabel,\n          control: (base) =>\n            ({\n              ...base,\n              ...inputStyles,\n            }) as CSSObjectWithLabel,\n          container: (base) =>\n            ({\n              ...base,\n              width: \"100%\",\n            }) as CSSObjectWithLabel,\n          ...props.styles,\n        }}\n        components={{\n          DropdownIndicator: () => null,\n          IndicatorSeparator: () => null,\n          Menu: (base) =>\n            (filteredOptions.length !== 0 ? (\n              <div onClick={(e) => e.stopPropagation()}>\n                <CascadeMenuBase<Meta>\n                  setFocusList={focusedListState.setFocusedList}\n                  focusedList={focusedListState.focusedList}\n                  openerOptionElementRef={containerRef}\n                  nodes={nodes}\n                  allNodes={nodes}\n                  openerSelectable={props.openerSelectable}\n                  isInitiallyOpen={true}\n                  level={0}\n                  options={filteredOptions}\n                  menuProps={base}\n                  styles={props.styles}\n                  onSelect={(value: TCascadeOption<Meta>[]) => {\n                    handleApply(value)\n                    const mergedLabel = props.afterSelectDisplayTransform\n                      ? props.afterSelectDisplayTransform(value)\n                      : value.map((v) => v.label).join(separator)\n                    // I think the following is just to satisfy the @React-Select\n                    const mergedValue = value.map((v) => v.label).join(\":\")\n                    base.selectOption({\n                      value: mergedValue,\n                      label: mergedLabel,\n                    })\n                  }}\n                />\n              </div>\n            ) : null) as React.ReactNode,\n        }}\n        options={[]}\n      />\n    </div>\n  )\n}\n"],"names":["useEffect","useRef","useState","buildNodeTree","nodeHelper","Creatable","useCascadeKeyDown","CascadeMenuBase","useFocusedList","useMantineColorScheme","useMantineTheme","Cascade","separator","props","selectRef","containerRef","filteredOptions","setFilteredOptions","options","theme","nodes","selectedValue","setSelectedValue","focusedListState","setFirstOptionsActive","colorScheme","isDarkScheme","handleKeyDown","onApply","handleApply","map","n","_option","openerSelectable","values","setFocusedList","onSelect","inputStyles","width","color","white","black","backgroundColor","colors","gray","div","onClick","e","nativeEvent","stopImmediatePropagation","stopPropagation","ref","data-testid","onKeyDown","onMenuOpen","onMenuClose","onInputChange","newValue","filtered","filterOptionsByValue","value","label","v","join","onCreateOption","selectProps","styles","input","base","control","container","components","DropdownIndicator","IndicatorSeparator","Menu","length","setFocusList","focusedList","openerOptionElementRef","allNodes","isInitiallyOpen","level","menuProps","mergedLabel","afterSelectDisplayTransform","mergedValue","selectOption"],"mappings":"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"}

package/lib/esm/components/Form/Select/CreatableSelect.js

@@ -1,2 +1,2 @@
-function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import{useMantineColorScheme,useMantineTheme}from"@mantine/core";import React from"react";import Creatable from"react-select/creatable";import classes from"./CreatableSelect.module.css";export function CreatableSelect(_0){let{onBlur,onChange,onKeyDown,multiple=false,value,options,className,components}=_0,props=_object_without_properties(_0,["onBlur","onChange","onKeyDown","multiple","value","options","className","components"]);const theme=useMantineTheme();const{colorScheme}=useMantineColorScheme();const isDarkScheme=colorScheme==="dark";return _jsx("div",{className:className,children:_jsx(Creatable,_object_spread({ref:props.inputRef,className:classes.widthAdjust,onChange:(newValue,actionMeta)=>{if(multiple){onChange===null||onChange===void 0?void 0:onChange(newValue,actionMeta);return}onChange===null||onChange===void 0?void 0:onChange(newValue,actionMeta)},onKeyDown:onKeyDown,onBlur:onBlur,value:value,closeMenuOnSelect:!multiple,styles:{control:base=>_object_spread_props(_object_spread({},base),{minHeight:30,backgroundColor:isDarkScheme?theme.colors.gray[8]:base.backgroundColor,color:isDarkScheme?theme.white:base.backgroundColor}),option:(base,{isFocused})=>{return _object_spread_props(_object_spread({},base),{wordBreak:"break-all",backgroundColor:isFocused?isDarkScheme?theme.colors.green[7]:theme.colors.green[0]:isDarkScheme?theme.colors.gray[9]:base.backgroundColor,"&:active":{backgroundColor:isDarkScheme?theme.colors.green[7]:theme.colors.green[0]},color:isDarkScheme?theme.white:base.color})},multiValue:base=>_object_spread_props(_object_spread({},base),{borderRadius:"2px",backgroundColor:isDarkScheme?theme.colors.gray[7]:theme.colors.gray[1],color:isDarkScheme?theme.white:theme.colors.gray[9]}),multiValueLabel:base=>_object_spread_props(_object_spread({},base),{color:isDarkScheme?theme.white:theme.colors.gray[9]}),multiValueRemove:base=>_object_spread_props(_object_spread({},base),{color:isDarkScheme?theme.white:theme.colors.gray[9],"&:hover":{backgroundColor:"inherit",borderRadius:"2px",cursor:"pointer",color:isDarkScheme?theme.black:theme.white}}),input:base=>isDarkScheme?_object_spread_props(_object_spread({},base),{color:theme.white}):base,dropdownIndicator:base=>_object_spread_props(_object_spread({},base),{paddingTop:0,paddingBottom:0}),clearIndicator:base=>_object_spread_props(_object_spread({},base),{paddingTop:0,paddingBottom:0}),menu:base=>_object_spread_props(_object_spread({},base),{border:`1px solid ${isDarkScheme?theme.colors.gray[8]:theme.colors.gray[2]}`,borderRadius:"2px",backgroundColor:isDarkScheme?theme.colors.gray[9]:base.backgroundColor}),menuPortal:base=>_object_spread_props(_object_spread({},base),{zIndex:201})},options:options,hideSelectedOptions:true,noOptionsMessage:()=>null,components:_object_spread({DropdownIndicator:()=>null,IndicatorSeparator:()=>null},components)},props))})}
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import{useMantineColorScheme,useMantineTheme}from"@mantine/core";import React from"react";import Creatable from"react-select/creatable";import classes from"./CreatableSelect.module.css";export function CreatableSelect(_0){let{onBlur,onChange,onKeyDown,multiple=false,value,options,className,components}=_0,props=_object_without_properties(_0,["onBlur","onChange","onKeyDown","multiple","value","options","className","components"]);const theme=useMantineTheme();const{colorScheme}=useMantineColorScheme();const isDarkScheme=colorScheme==="dark";return _jsx("div",{className:className,children:_jsx(Creatable,_object_spread({ref:props.inputRef,className:classes.widthAdjust,onChange:(newValue,actionMeta)=>{if(multiple){onChange===null||onChange===void 0?void 0:onChange(newValue,actionMeta);return}onChange===null||onChange===void 0?void 0:onChange(newValue,actionMeta)},onKeyDown:onKeyDown,onBlur:onBlur,value:value,closeMenuOnSelect:!multiple,styles:{control:base=>_object_spread_props(_object_spread({},base),{minHeight:30,backgroundColor:isDarkScheme?theme.colors.gray[8]:base.backgroundColor,color:isDarkScheme?theme.white:base.backgroundColor}),option:(base,{isFocused})=>{return _object_spread_props(_object_spread({},base),{wordBreak:"break-all",backgroundColor:isFocused?isDarkScheme?theme.colors.green[7]:theme.colors.green[0]:isDarkScheme?theme.colors.gray[9]:base.backgroundColor,"&:active":{backgroundColor:isDarkScheme?theme.colors.green[7]:theme.colors.green[0]},color:isDarkScheme?theme.white:base.color})},multiValue:base=>_object_spread_props(_object_spread({},base),{borderRadius:"2px",backgroundColor:isDarkScheme?theme.colors.gray[7]:theme.colors.gray[1],color:isDarkScheme?theme.white:theme.colors.gray[9]}),multiValueLabel:base=>_object_spread_props(_object_spread({},base),{color:isDarkScheme?theme.white:theme.colors.gray[9]}),multiValueRemove:base=>_object_spread_props(_object_spread({},base),{color:isDarkScheme?theme.white:theme.colors.gray[9],"&:hover":{backgroundColor:"inherit",borderRadius:"2px",cursor:"pointer",color:isDarkScheme?theme.black:theme.white}}),input:base=>isDarkScheme?_object_spread_props(_object_spread({},base),{color:theme.white}):base,dropdownIndicator:base=>_object_spread_props(_object_spread({},base),{paddingTop:0,paddingBottom:0}),clearIndicator:base=>_object_spread_props(_object_spread({},base),{paddingTop:0,paddingBottom:0}),menu:base=>_object_spread_props(_object_spread({},base),{border:`1px solid ${isDarkScheme?theme.colors.gray[8]:theme.colors.gray[2]}`,borderRadius:"2px",backgroundColor:isDarkScheme?theme.colors.gray[9]:base.backgroundColor}),menuPortal:base=>_object_spread_props(_object_spread({},base),{zIndex:201})},options:options,hideSelectedOptions:true,noOptionsMessage:()=>null,components:_object_spread({DropdownIndicator:()=>null,IndicatorSeparator:()=>null},components)},props))})}
 //# sourceMappingURL=CreatableSelect.js.map

package/lib/esm/components/Form/Select/CreatableSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Form/Select/CreatableSelect.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { useMantineColorScheme, useMantineTheme } from \"@mantine/core\"\nimport { ActionMeta, CSSObjectWithLabel, GroupBase, OptionsOrGroups } from \"react-select\"\nimport React, { FocusEventHandler, KeyboardEventHandler, RefObject } from \"react\"\nimport { StateManagerProps } from \"react-select/dist/declarations/src/useStateManager\"\nimport Creatable from \"react-select/creatable\"\nimport Select from \"react-select/base\"\nimport classes from \"./CreatableSelect.module.css\"\ntype TValue = { value: string; label: string }\n\nexport type TCreatableSelectProps<Multiple> = Omit<StateManagerProps, \"onChange\"> & {\n  creatable?: boolean\n  onChange?: (\n    newValue: Multiple extends true ? TValue[] : TValue,\n    actionMeta: ActionMeta<unknown>\n  ) => void\n  onBlur?: FocusEventHandler\n  onKeyDown?: KeyboardEventHandler\n  multiple: Multiple\n  completed?: boolean\n  options?: StateManagerProps<TValue>[\"options\"]\n  value?: TValue\n  className?: string\n  inputRef?: RefObject<Select<unknown, boolean, GroupBase<unknown>>>\n}\n\nexport function CreatableSelect<Multiple extends boolean>({\n  onBlur,\n  onChange,\n  onKeyDown,\n  multiple = false as Multiple,\n  value,\n  options,\n  className,\n  components,\n  ...props\n}: React.PropsWithChildren<TCreatableSelectProps<Multiple>>) {\n  const theme = useMantineTheme()\n  const { colorScheme } = useMantineColorScheme()\n  const isDarkScheme = colorScheme === \"dark\"\n\n  return (\n    <div className={className}>\n      <Creatable\n        ref={props.inputRef}\n        className={classes.widthAdjust}\n        onChange={(newValue, actionMeta) => {\n          if (multiple) {\n            onChange?.(newValue as unknown as Multiple extends true ? TValue[] : TValue, actionMeta)\n            return\n          }\n          onChange?.(newValue as unknown as Multiple extends true ? TValue[] : TValue, actionMeta)\n        }}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        value={value}\n        closeMenuOnSelect={!multiple}\n        styles={{\n          control: (base) =>\n            ({\n              ...base,\n              minHeight: 30,\n              backgroundColor: isDarkScheme ? theme.colors.gray[8] : base.backgroundColor,\n              color: isDarkScheme ? theme.white : base.backgroundColor,\n            }) as CSSObjectWithLabel,\n          option: (base, { isFocused }) => {\n            return {\n              ...base,\n              wordBreak: \"break-all\",\n              backgroundColor: isFocused\n                ? isDarkScheme\n                  ? theme.colors.green[7]\n                  : theme.colors.green[0]\n                : isDarkScheme\n                  ? theme.colors.gray[9]\n                  : base.backgroundColor,\n              \"&:active\": {\n                backgroundColor: isDarkScheme ? theme.colors.green[7] : theme.colors.green[0],\n              },\n              color: isDarkScheme ? theme.white : base.color,\n            } as CSSObjectWithLabel\n          },\n          multiValue: (base) =>\n            ({\n              ...base,\n              borderRadius: \"2px\",\n              backgroundColor: isDarkScheme ? theme.colors.gray[7] : theme.colors.gray[1],\n              color: isDarkScheme ? theme.white : theme.colors.gray[9],\n            }) as CSSObjectWithLabel,\n          multiValueLabel: (base) =>\n            ({\n              ...base,\n              color: isDarkScheme ? theme.white : theme.colors.gray[9],\n            }) as CSSObjectWithLabel,\n          multiValueRemove: (base) =>\n            ({\n              ...base,\n              color: isDarkScheme ? theme.white : theme.colors.gray[9],\n              \"&:hover\": {\n                backgroundColor: \"inherit\",\n                borderRadius: \"2px\",\n                cursor: \"pointer\",\n                color: isDarkScheme ? theme.black : theme.white,\n              },\n            }) as CSSObjectWithLabel,\n          input: (base) =>\n            (isDarkScheme ? { ...base, color: theme.white } : base) as CSSObjectWithLabel,\n          dropdownIndicator: (base) =>\n            ({\n              ...base,\n              paddingTop: 0,\n              paddingBottom: 0,\n            }) as CSSObjectWithLabel,\n          clearIndicator: (base) =>\n            ({\n              ...base,\n              paddingTop: 0,\n              paddingBottom: 0,\n            }) as CSSObjectWithLabel,\n          menu: (base) =>\n            ({\n              ...base,\n              border: `1px solid ${isDarkScheme ? theme.colors.gray[8] : theme.colors.gray[2]}`,\n              borderRadius: \"2px\",\n              backgroundColor: isDarkScheme ? theme.colors.gray[9] : base.backgroundColor,\n            }) as CSSObjectWithLabel,\n          menuPortal: (base) =>\n            ({\n              ...base,\n              zIndex: 201,\n            }) as CSSObjectWithLabel,\n        }}\n        options={options as OptionsOrGroups<{ label: string; value: string }, GroupBase<TValue>>}\n        hideSelectedOptions={true}\n        noOptionsMessage={() => null}\n        components={{\n          DropdownIndicator: () => null,\n          IndicatorSeparator: () => null,\n          ...components,\n        }}\n        {...props}\n      />\n    </div>\n  )\n}\n"],"names":["useMantineColorScheme","useMantineTheme","React","Creatable","classes","CreatableSelect","onBlur","onChange","onKeyDown","multiple","value","options","className","components","props","theme","colorScheme","isDarkScheme","div","ref","inputRef","widthAdjust","newValue","actionMeta","closeMenuOnSelect","styles","control","base","minHeight","backgroundColor","colors","gray","color","white","option","isFocused","wordBreak","green","multiValue","borderRadius","multiValueLabel","multiValueRemove","cursor","black","input","dropdownIndicator","paddingTop","paddingBottom","clearIndicator","menu","border","menuPortal","zIndex","hideSelectedOptions","noOptionsMessage","DropdownIndicator","IndicatorSeparator"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/Form/Select/CreatableSelect.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { useMantineColorScheme, useMantineTheme } from \"@mantine/core\"\nimport { ActionMeta, CSSObjectWithLabel, GroupBase, OptionsOrGroups } from \"react-select\"\nimport React, { FocusEventHandler, KeyboardEventHandler, RefObject } from \"react\"\nimport { StateManagerProps } from \"react-select/dist/declarations/src/useStateManager\"\nimport Creatable from \"react-select/creatable\"\nimport Select from \"react-select/base\"\nimport classes from \"./CreatableSelect.module.css\"\ntype TValue = { value: string; label: string }\n\nexport type TCreatableSelectProps<Multiple> = Omit<StateManagerProps, \"onChange\"> & {\n  creatable?: boolean\n  onChange?: (\n    newValue: Multiple extends true ? TValue[] : TValue,\n    actionMeta: ActionMeta<unknown>\n  ) => void\n  onBlur?: FocusEventHandler\n  onKeyDown?: KeyboardEventHandler\n  multiple: Multiple\n  completed?: boolean\n  options?: StateManagerProps<TValue>[\"options\"]\n  value?: TValue\n  className?: string\n  inputRef?: RefObject<Select<unknown, boolean, GroupBase<unknown>>>\n}\n\nexport function CreatableSelect<Multiple extends boolean>({\n  onBlur,\n  onChange,\n  onKeyDown,\n  multiple = false as Multiple,\n  value,\n  options,\n  className,\n  components,\n  ...props\n}: React.PropsWithChildren<TCreatableSelectProps<Multiple>>) {\n  const theme = useMantineTheme()\n  const { colorScheme } = useMantineColorScheme()\n  const isDarkScheme = colorScheme === \"dark\"\n\n  return (\n    <div className={className}>\n      <Creatable\n        ref={props.inputRef}\n        className={classes.widthAdjust}\n        onChange={(newValue, actionMeta) => {\n          if (multiple) {\n            onChange?.(newValue as unknown as Multiple extends true ? TValue[] : TValue, actionMeta)\n            return\n          }\n          onChange?.(newValue as unknown as Multiple extends true ? TValue[] : TValue, actionMeta)\n        }}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        value={value}\n        closeMenuOnSelect={!multiple}\n        styles={{\n          control: (base) =>\n            ({\n              ...base,\n              minHeight: 30,\n              backgroundColor: isDarkScheme ? theme.colors.gray[8] : base.backgroundColor,\n              color: isDarkScheme ? theme.white : base.backgroundColor,\n            }) as CSSObjectWithLabel,\n          option: (base, { isFocused }) => {\n            return {\n              ...base,\n              wordBreak: \"break-all\",\n              backgroundColor: isFocused\n                ? isDarkScheme\n                  ? theme.colors.green[7]\n                  : theme.colors.green[0]\n                : isDarkScheme\n                  ? theme.colors.gray[9]\n                  : base.backgroundColor,\n              \"&:active\": {\n                backgroundColor: isDarkScheme ? theme.colors.green[7] : theme.colors.green[0],\n              },\n              color: isDarkScheme ? theme.white : base.color,\n            } as CSSObjectWithLabel\n          },\n          multiValue: (base) =>\n            ({\n              ...base,\n              borderRadius: \"2px\",\n              backgroundColor: isDarkScheme ? theme.colors.gray[7] : theme.colors.gray[1],\n              color: isDarkScheme ? theme.white : theme.colors.gray[9],\n            }) as CSSObjectWithLabel,\n          multiValueLabel: (base) =>\n            ({\n              ...base,\n              color: isDarkScheme ? theme.white : theme.colors.gray[9],\n            }) as CSSObjectWithLabel,\n          multiValueRemove: (base) =>\n            ({\n              ...base,\n              color: isDarkScheme ? theme.white : theme.colors.gray[9],\n              \"&:hover\": {\n                backgroundColor: \"inherit\",\n                borderRadius: \"2px\",\n                cursor: \"pointer\",\n                color: isDarkScheme ? theme.black : theme.white,\n              },\n            }) as CSSObjectWithLabel,\n          input: (base) =>\n            (isDarkScheme ? { ...base, color: theme.white } : base) as CSSObjectWithLabel,\n          dropdownIndicator: (base) =>\n            ({\n              ...base,\n              paddingTop: 0,\n              paddingBottom: 0,\n            }) as CSSObjectWithLabel,\n          clearIndicator: (base) =>\n            ({\n              ...base,\n              paddingTop: 0,\n              paddingBottom: 0,\n            }) as CSSObjectWithLabel,\n          menu: (base) =>\n            ({\n              ...base,\n              border: `1px solid ${isDarkScheme ? theme.colors.gray[8] : theme.colors.gray[2]}`,\n              borderRadius: \"2px\",\n              backgroundColor: isDarkScheme ? theme.colors.gray[9] : base.backgroundColor,\n            }) as CSSObjectWithLabel,\n          menuPortal: (base) =>\n            ({\n              ...base,\n              zIndex: 201,\n            }) as CSSObjectWithLabel,\n        }}\n        options={options as OptionsOrGroups<{ label: string; value: string }, GroupBase<TValue>>}\n        hideSelectedOptions={true}\n        noOptionsMessage={() => null}\n        components={{\n          DropdownIndicator: () => null,\n          IndicatorSeparator: () => null,\n          ...components,\n        }}\n        {...props}\n      />\n    </div>\n  )\n}\n"],"names":["useMantineColorScheme","useMantineTheme","React","Creatable","classes","CreatableSelect","onBlur","onChange","onKeyDown","multiple","value","options","className","components","props","theme","colorScheme","isDarkScheme","div","ref","inputRef","widthAdjust","newValue","actionMeta","closeMenuOnSelect","styles","control","base","minHeight","backgroundColor","colors","gray","color","white","option","isFocused","wordBreak","green","multiValue","borderRadius","multiValueLabel","multiValueRemove","cursor","black","input","dropdownIndicator","paddingTop","paddingBottom","clearIndicator","menu","border","menuPortal","zIndex","hideSelectedOptions","noOptionsMessage","DropdownIndicator","IndicatorSeparator"],"mappings":"k0EAIA,QAASA,qBAAqB,CAAEC,eAAe,KAAQ,eAAe,AAEtE,QAAOC,UAAmE,OAAO,AAEjF,QAAOC,cAAe,wBAAwB,AAE9C,QAAOC,YAAa,8BAA8B,AAmBlD,QAAO,SAASC,gBAA0C,EAUC,KAVD,CACxDC,MAAM,CACNC,QAAQ,CACRC,SAAS,CACTC,SAAW,KAAiB,CAC5BC,KAAK,CACLC,OAAO,CACPC,SAAS,CACTC,UAAU,CAE+C,IADtDC,6HAEH,MAAMC,MAAQd,kBACd,KAAM,CAAEe,WAAW,CAAE,CAAGhB,wBACxB,MAAMiB,aAAeD,cAAgB,OAErC,OACE,KAACE,OAAIN,UAAWA,mBACd,KAACT,0BACCgB,IAAKL,MAAMM,QAAQ,CACnBR,UAAWR,QAAQiB,WAAW,CAC9Bd,SAAU,CAACe,SAAUC,cACnB,GAAId,SAAU,CACZF,iBAAAA,yBAAAA,SAAWe,SAAkEC,YAC7E,MACF,CACAhB,iBAAAA,yBAAAA,SAAWe,SAAkEC,WAC/E,EACAf,UAAWA,UACXF,OAAQA,OACRI,MAAOA,MACPc,kBAAmB,CAACf,SACpBgB,OAAQ,CACNC,QAAS,AAACC,MACP,uCACIA,OACHC,UAAW,GACXC,gBAAiBZ,aAAeF,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,CAAGJ,KAAKE,eAAe,CAC3EG,MAAOf,aAAeF,MAAMkB,KAAK,CAAGN,KAAKE,eAAe,GAE5DK,OAAQ,CAACP,KAAM,CAAEQ,SAAS,CAAE,IAC1B,OAAO,uCACFR,OACHS,UAAW,YACXP,gBAAiBM,UACblB,aACEF,MAAMe,MAAM,CAACO,KAAK,CAAC,EAAE,CACrBtB,MAAMe,MAAM,CAACO,KAAK,CAAC,EAAE,CACvBpB,aACEF,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,CACpBJ,KAAKE,eAAe,CAC1B,WAAY,CACVA,gBAAiBZ,aAAeF,MAAMe,MAAM,CAACO,KAAK,CAAC,EAAE,CAAGtB,MAAMe,MAAM,CAACO,KAAK,CAAC,EAAE,AAC/E,EACAL,MAAOf,aAAeF,MAAMkB,KAAK,CAAGN,KAAKK,KAAK,EAElD,EACAM,WAAY,AAACX,MACV,uCACIA,OACHY,aAAc,MACdV,gBAAiBZ,aAAeF,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,CAAGhB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,CAC3EC,MAAOf,aAAeF,MAAMkB,KAAK,CAAGlB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,GAE5DS,gBAAiB,AAACb,MACf,uCACIA,OACHK,MAAOf,aAAeF,MAAMkB,KAAK,CAAGlB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,GAE5DU,iBAAkB,AAACd,MAChB,uCACIA,OACHK,MAAOf,aAAeF,MAAMkB,KAAK,CAAGlB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,CACxD,UAAW,CACTF,gBAAiB,UACjBU,aAAc,MACdG,OAAQ,UACRV,MAAOf,aAAeF,MAAM4B,KAAK,CAAG5B,MAAMkB,KAAK,AACjD,IAEJW,MAAO,AAACjB,MACLV,aAAe,uCAAKU,OAAMK,MAAOjB,MAAMkB,KAAK,GAAKN,KACpDkB,kBAAmB,AAAClB,MACjB,uCACIA,OACHmB,WAAY,EACZC,cAAe,IAEnBC,eAAgB,AAACrB,MACd,uCACIA,OACHmB,WAAY,EACZC,cAAe,IAEnBE,KAAM,AAACtB,MACJ,uCACIA,OACHuB,OAAQ,CAAC,UAAU,EAAEjC,aAAeF,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,CAAGhB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC,CACjFQ,aAAc,MACdV,gBAAiBZ,aAAeF,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,CAAGJ,KAAKE,eAAe,GAE/EsB,WAAY,AAACxB,MACV,uCACIA,OACHyB,OAAQ,KAEd,EACAzC,QAASA,QACT0C,oBAAqB,KACrBC,iBAAkB,IAAM,KACxBzC,WAAY,gBACV0C,kBAAmB,IAAM,KACzBC,mBAAoB,IAAM,MACvB3C,aAEDC,SAIZ"}

package/lib/esm/components/Form/Select/Select.js

@@ -1,2 +1,2 @@
-function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import{Select as SelectMantine}from"@mantine/core";import{getDefaultFormStyles}from"../sharedStyles";import React from"react";import{useErrorContext,useFormContext}from"../Form";import{Controller}from"react-hook-form";import{FormErrors}from"../Form/FormErrors";import classes from"./Select.module.css";const useStyles=({size})=>{const defaultStyles=getDefaultFormStyles();return _object_spread_props(_object_spread({},defaultStyles),{option:`${classes.option} ${size==="lg"?classes["option-large"]:""}`,selected:classes.selected,dropdown:classes.dropdown})};const SelectRaw=(_0,_1)=>{let _ref=[_0,_1],[_ref1,..._rest]=_ref,{size="md",data}=_ref1,props=_object_without_properties(_ref1,["size","data"]),[ref]=_rest;const classes=useStyles({size});return _jsx(SelectMantine,_object_spread({ref:ref,data:data,withCheckIcon:false,classNames:classes,size:size},props))};export const Select=React.forwardRef(SelectRaw);export const FormSelect=_0=>{let{name,min,max,minLength,maxLength,validation}=_0,props=_object_without_properties(_0,["name","min","max","minLength","maxLength","validation"]);const form=useFormContext();const errorContext=useErrorContext();const formError=form.formState.errors[name];const fetchErrors=errorContext.errors[name];const errors=[formError===null||formError===void 0?void 0:formError.message,fetchErrors].flat().filter(ent=>ent);return _jsx(Controller,{control:form.control,name:name,rules:{min,minLength,maxLength,max,validate:validation},disabled:props.disabled,render:_0=>{let{field:_ref}=_0,{onChange}=_ref,field=_object_without_properties(_ref,["onChange"]);return _jsx(Select,_object_spread_props(_object_spread({},field,props),{error:errors.length>0&&_jsx(FormErrors,{errors:errors}),onChange:value=>{var _props_onChange;onChange({target:{value,name}});value&&((_props_onChange=props.onChange)===null||_props_onChange===void 0?void 0:_props_onChange.call(props,value))}}))}})};
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import{Select as SelectMantine}from"@mantine/core";import{getDefaultFormStyles}from"../sharedStyles";import React from"react";import{useErrorContext,useFormContext}from"../Form";import{Controller}from"react-hook-form";import{FormErrors}from"../Form/FormErrors";import classes from"./Select.module.css";const useStyles=({size})=>{const defaultStyles=getDefaultFormStyles();return _object_spread_props(_object_spread({},defaultStyles),{option:`${classes.option} ${size==="lg"?classes["option-large"]:""}`,selected:classes.selected,dropdown:classes.dropdown})};const SelectRaw=(_0,_1)=>{let _ref=[_0,_1],[_ref1,..._rest]=_ref,{size="md",data}=_ref1,props=_object_without_properties(_ref1,["size","data"]),[ref]=_rest;const classes=useStyles({size});return _jsx(SelectMantine,_object_spread({ref:ref,data:data,withCheckIcon:false,classNames:classes,size:size},props))};export const Select=React.forwardRef(SelectRaw);export const FormSelect=_0=>{let{name,min,max,minLength,maxLength,validation}=_0,props=_object_without_properties(_0,["name","min","max","minLength","maxLength","validation"]);const form=useFormContext();const errorContext=useErrorContext();const formError=form.formState.errors[name];const fetchErrors=errorContext.errors[name];const errors=[formError===null||formError===void 0?void 0:formError.message,fetchErrors].flat().filter(ent=>ent);return _jsx(Controller,{control:form.control,name:name,rules:{min,minLength,maxLength,max,validate:validation},disabled:props.disabled,render:_0=>{let{field:_ref}=_0,{onChange}=_ref,field=_object_without_properties(_ref,["onChange"]);return _jsx(Select,_object_spread_props(_object_spread({},field,props),{error:errors.length>0&&_jsx(FormErrors,{errors:errors}),onChange:value=>{var _props_onChange;onChange({target:{value,name}});value&&((_props_onChange=props.onChange)===null||_props_onChange===void 0?void 0:_props_onChange.call(props,value))}}))}})};
 //# sourceMappingURL=Select.js.map

package/lib/esm/components/Form/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Form/Select/Select.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { Select as SelectMantine, SelectProps } from \"@mantine/core\"\nimport { getDefaultFormStyles } from \"../sharedStyles\"\nimport React, { ForwardedRef } from \"react\"\nimport { useErrorContext, useFormContext } from \"../Form\"\nimport { Controller } from \"react-hook-form\"\nimport { TFormControl } from \"../Form/types\"\nimport { FormErrors } from \"../Form/FormErrors\"\nimport classes from \"./Select.module.css\"\n\nconst useStyles = ({ size }: SelectProps) => {\n  const defaultStyles = getDefaultFormStyles()\n  return {\n    ...defaultStyles,\n    option: `${classes.option} ${size === \"lg\" ? classes[\"option-large\"] : \"\"}`,\n    selected: classes.selected,\n    dropdown: classes.dropdown,\n  }\n}\n\ntype TSelect = Modify<\n  SelectProps,\n  {\n    size?: \"md\" | \"lg\"\n  }\n>\n\nconst SelectRaw = (\n  { size = \"md\", data, ...props }: TSelect,\n  ref: ForwardedRef<HTMLInputElement>\n) => {\n  const classes = useStyles({ size })\n  return (\n    <SelectMantine\n      ref={ref}\n      data={data}\n      withCheckIcon={false}\n      classNames={classes}\n      size={size}\n      {...props}\n    />\n  )\n}\n\nexport const Select = React.forwardRef(SelectRaw)\n\n/**\n * **Form** wrapper for a Select component that automagically registers the Select to the current form context (from **Form**).\n * It also connects to the error-context from **ConnectedForm** to show server-side validation errors.\n * @param name Name of the form item\n * @param min Quick validation for numbers\n * @param max Quick validation for numbers\n * @param minLength Quick validation for strings\n * @param maxLength Quick validation for strings\n * @param validation Validation rules for client-side validation\n * @param props Props passed to the Select component\n * @constructor\n */\nexport const FormSelect: React.FC<TSelect & TFormControl<HTMLSelectElement>> = ({\n  name,\n  min,\n  max,\n  minLength,\n  maxLength,\n  validation,\n  ...props\n}) => {\n  const form = useFormContext()\n  const errorContext = useErrorContext()\n\n  const formError = form.formState.errors[name]\n  const fetchErrors = errorContext.errors[name]\n\n  const errors = [formError?.message as string, fetchErrors].flat().filter((ent) => ent)\n\n  return (\n    <Controller\n      control={form.control}\n      name={name}\n      rules={{\n        min,\n        minLength,\n        maxLength,\n        max,\n        validate: validation,\n      }}\n      disabled={props.disabled}\n      render={({ field: { onChange, ...field } }) => (\n        <Select\n          {...field}\n          {...props}\n          error={errors.length > 0 && <FormErrors errors={errors} />}\n          onChange={(value) => {\n            onChange({ target: { value, name } })\n            value && props.onChange?.(value)\n          }}\n        />\n      )}\n    />\n  )\n}\n"],"names":["Select","SelectMantine","getDefaultFormStyles","React","useErrorContext","useFormContext","Controller","FormErrors","classes","useStyles","size","defaultStyles","option","selected","dropdown","SelectRaw","data","props","ref","withCheckIcon","classNames","forwardRef","FormSelect","name","min","max","minLength","maxLength","validation","form","errorContext","formError","formState","errors","fetchErrors","message","flat","filter","ent","control","rules","validate","disabled","render","field","onChange","error","length","value","target"],"mappings":"0zEAIA,QAASA,UAAUC,aAAa,KAAqB,eAAe,AACpE,QAASC,oBAAoB,KAAQ,iBAAiB,AACtD,QAAOC,UAA6B,OAAO,AAC3C,QAASC,eAAe,CAAEC,cAAc,KAAQ,SAAS,AACzD,QAASC,UAAU,KAAQ,iBAAiB,AAE5C,QAASC,UAAU,KAAQ,oBAAoB,AAC/C,QAAOC,YAAa,qBAAqB,CAEzC,MAAMC,UAAY,CAAC,CAAEC,IAAI,CAAe,IACtC,MAAMC,cAAgBT,uBACtB,OAAO,uCACFS,gBACHC,OAAQ,CAAC,EAAEJ,QAAQI,MAAM,CAAC,CAAC,EAAEF,OAAS,KAAOF,OAAO,CAAC,eAAe,CAAG,GAAG,CAAC,CAC3EK,SAAUL,QAAQK,QAAQ,CAC1BC,SAAUN,QAAQM,QAAQ,EAE9B,EASA,MAAMC,UAAY,iDAChB,CAAEL,KAAO,IAAI,CAAEM,IAAI,CAAqB,OAAhBC,yDACxBC,WAEA,MAAMV,QAAUC,UAAU,CAAEC,IAAK,GACjC,OACE,KAACT,8BACCiB,IAAKA,IACLF,KAAMA,KACNG,cAAe,MACfC,WAAYZ,QACZE,KAAMA,MACFO,OAGV,CAEA,QAAO,MAAMjB,OAASG,MAAMkB,UAAU,CAACN,UAAU,AAcjD,QAAO,MAAMO,WAAkE,QAAC,CAC9EC,IAAI,CACJC,GAAG,CACHC,GAAG,CACHC,SAAS,CACTC,SAAS,CACTC,UAAU,CAEX,IADIX,+FAEH,MAAMY,KAAOxB,iBACb,MAAMyB,aAAe1B,kBAErB,MAAM2B,UAAYF,KAAKG,SAAS,CAACC,MAAM,CAACV,KAAK,CAC7C,MAAMW,YAAcJ,aAAaG,MAAM,CAACV,KAAK,CAE7C,MAAMU,OAAS,CAACF,kBAAAA,0BAAAA,UAAWI,OAAO,CAAYD,YAAY,CAACE,IAAI,GAAGC,MAAM,CAAC,AAACC,KAAQA,KAElF,OACE,KAAChC,YACCiC,QAASV,KAAKU,OAAO,CACrBhB,KAAMA,KACNiB,MAAO,CACLhB,IACAE,UACAC,UACAF,IACAgB,SAAUb,UACZ,EACAc,SAAUzB,MAAMyB,QAAQ,CACxBC,OAAQ,QAAC,CAAEC,UAAAA,CAA+B,IAAxB,CAAEC,QAAQ,CAAY,MAAPD,2DAC/B,KAAC5C,8CACK4C,MACA3B,QACJ6B,MAAOb,OAAOc,MAAM,CAAG,GAAK,KAACxC,YAAW0B,OAAQA,SAChDY,SAAU,AAACG,YAEA/B,gBADT4B,SAAS,CAAEI,OAAQ,CAAED,MAAOzB,IAAK,CAAE,EACnCyB,CAAAA,SAAS/B,gBAAAA,MAAM4B,QAAQ,UAAd5B,gCAAAA,qBAAAA,MAAiB+B,OAC5B,OAKV,CAAC"}
+{"version":3,"sources":["../../../../../src/components/Form/Select/Select.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { Select as SelectMantine, SelectProps } from \"@mantine/core\"\nimport { getDefaultFormStyles } from \"../sharedStyles\"\nimport React, { ForwardedRef } from \"react\"\nimport { useErrorContext, useFormContext } from \"../Form\"\nimport { Controller } from \"react-hook-form\"\nimport { TFormControl } from \"../Form/types\"\nimport { FormErrors } from \"../Form/FormErrors\"\nimport classes from \"./Select.module.css\"\n\nconst useStyles = ({ size }: SelectProps) => {\n  const defaultStyles = getDefaultFormStyles()\n  return {\n    ...defaultStyles,\n    option: `${classes.option} ${size === \"lg\" ? classes[\"option-large\"] : \"\"}`,\n    selected: classes.selected,\n    dropdown: classes.dropdown,\n  }\n}\n\ntype TSelect = Modify<\n  SelectProps,\n  {\n    size?: \"md\" | \"lg\"\n  }\n>\n\nconst SelectRaw = (\n  { size = \"md\", data, ...props }: TSelect,\n  ref: ForwardedRef<HTMLInputElement>\n) => {\n  const classes = useStyles({ size })\n  return (\n    <SelectMantine\n      ref={ref}\n      data={data}\n      withCheckIcon={false}\n      classNames={classes}\n      size={size}\n      {...props}\n    />\n  )\n}\n\nexport const Select = React.forwardRef(SelectRaw)\n\n/**\n * **Form** wrapper for a Select component that automagically registers the Select to the current form context (from **Form**).\n * It also connects to the error-context from **ConnectedForm** to show server-side validation errors.\n * @param name Name of the form item\n * @param min Quick validation for numbers\n * @param max Quick validation for numbers\n * @param minLength Quick validation for strings\n * @param maxLength Quick validation for strings\n * @param validation Validation rules for client-side validation\n * @param props Props passed to the Select component\n * @constructor\n */\nexport const FormSelect: React.FC<TSelect & TFormControl<HTMLSelectElement>> = ({\n  name,\n  min,\n  max,\n  minLength,\n  maxLength,\n  validation,\n  ...props\n}) => {\n  const form = useFormContext()\n  const errorContext = useErrorContext()\n\n  const formError = form.formState.errors[name]\n  const fetchErrors = errorContext.errors[name]\n\n  const errors = [formError?.message as string, fetchErrors].flat().filter((ent) => ent)\n\n  return (\n    <Controller\n      control={form.control}\n      name={name}\n      rules={{\n        min,\n        minLength,\n        maxLength,\n        max,\n        validate: validation,\n      }}\n      disabled={props.disabled}\n      render={({ field: { onChange, ...field } }) => (\n        <Select\n          {...field}\n          {...props}\n          error={errors.length > 0 && <FormErrors errors={errors} />}\n          onChange={(value) => {\n            onChange({ target: { value, name } })\n            value && props.onChange?.(value)\n          }}\n        />\n      )}\n    />\n  )\n}\n"],"names":["Select","SelectMantine","getDefaultFormStyles","React","useErrorContext","useFormContext","Controller","FormErrors","classes","useStyles","size","defaultStyles","option","selected","dropdown","SelectRaw","data","props","ref","withCheckIcon","classNames","forwardRef","FormSelect","name","min","max","minLength","maxLength","validation","form","errorContext","formError","formState","errors","fetchErrors","message","flat","filter","ent","control","rules","validate","disabled","render","field","onChange","error","length","value","target"],"mappings":"k0EAIA,QAASA,UAAUC,aAAa,KAAqB,eAAe,AACpE,QAASC,oBAAoB,KAAQ,iBAAiB,AACtD,QAAOC,UAA6B,OAAO,AAC3C,QAASC,eAAe,CAAEC,cAAc,KAAQ,SAAS,AACzD,QAASC,UAAU,KAAQ,iBAAiB,AAE5C,QAASC,UAAU,KAAQ,oBAAoB,AAC/C,QAAOC,YAAa,qBAAqB,CAEzC,MAAMC,UAAY,CAAC,CAAEC,IAAI,CAAe,IACtC,MAAMC,cAAgBT,uBACtB,OAAO,uCACFS,gBACHC,OAAQ,CAAC,EAAEJ,QAAQI,MAAM,CAAC,CAAC,EAAEF,OAAS,KAAOF,OAAO,CAAC,eAAe,CAAG,GAAG,CAAC,CAC3EK,SAAUL,QAAQK,QAAQ,CAC1BC,SAAUN,QAAQM,QAAQ,EAE9B,EASA,MAAMC,UAAY,iDAChB,CAAEL,KAAO,IAAI,CAAEM,IAAI,CAAqB,OAAhBC,yDACxBC,WAEA,MAAMV,QAAUC,UAAU,CAAEC,IAAK,GACjC,OACE,KAACT,8BACCiB,IAAKA,IACLF,KAAMA,KACNG,cAAe,MACfC,WAAYZ,QACZE,KAAMA,MACFO,OAGV,CAEA,QAAO,MAAMjB,OAASG,MAAMkB,UAAU,CAACN,UAAU,AAcjD,QAAO,MAAMO,WAAkE,QAAC,CAC9EC,IAAI,CACJC,GAAG,CACHC,GAAG,CACHC,SAAS,CACTC,SAAS,CACTC,UAAU,CAEX,IADIX,+FAEH,MAAMY,KAAOxB,iBACb,MAAMyB,aAAe1B,kBAErB,MAAM2B,UAAYF,KAAKG,SAAS,CAACC,MAAM,CAACV,KAAK,CAC7C,MAAMW,YAAcJ,aAAaG,MAAM,CAACV,KAAK,CAE7C,MAAMU,OAAS,CAACF,kBAAAA,0BAAAA,UAAWI,OAAO,CAAYD,YAAY,CAACE,IAAI,GAAGC,MAAM,CAAC,AAACC,KAAQA,KAElF,OACE,KAAChC,YACCiC,QAASV,KAAKU,OAAO,CACrBhB,KAAMA,KACNiB,MAAO,CACLhB,IACAE,UACAC,UACAF,IACAgB,SAAUb,UACZ,EACAc,SAAUzB,MAAMyB,QAAQ,CACxBC,OAAQ,QAAC,CAAEC,UAAAA,CAA+B,IAAxB,CAAEC,QAAQ,CAAY,MAAPD,2DAC/B,KAAC5C,8CACK4C,MACA3B,QACJ6B,MAAOb,OAAOc,MAAM,CAAG,GAAK,KAACxC,YAAW0B,OAAQA,SAChDY,SAAU,AAACG,YAEA/B,gBADT4B,SAAS,CAAEI,OAAQ,CAAED,MAAOzB,IAAK,CAAE,EACnCyB,CAAAA,SAAS/B,gBAAAA,MAAM4B,QAAQ,UAAd5B,gCAAAA,qBAAAA,MAAiB+B,OAC5B,OAKV,CAAC"}

package/lib/esm/components/Form/Switch/Switch.js

@@ -1,2 +1,2 @@
-function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import React,{forwardRef}from"react";import{Switch}from"@mantine/core";import{useFormContext}from"../Form/Form";import{getDefaultFormStyles}from"../sharedStyles";import{useErrorContext}from"../Form";import{FormErrors}from"../Form/FormErrors";import{useController}from"react-hook-form";export const RawSwitch=forwardRef((_0,_1)=>{let _ref=[_0,_1],[_ref1,..._rest]=_ref,{size="md"}=_ref1,props=_object_without_properties(_ref1,["size"]),[ref]=_rest;const classes=getDefaultFormStyles();return _jsx(Switch,_object_spread_props(_object_spread({ref:ref},props),{size:size,classNames:_object_spread({root:classes.root,label:classes.label,input:classes.input,error:classes.error},props.classNames)}))});RawSwitch.displayName="RawSwitch";export const FormSwitch=_0=>{let{name,validation={}}=_0,props=_object_without_properties(_0,["name","validation"]);const{control}=useFormContext();const errorContext=useErrorContext();const{field:{value=false,onChange,ref},fieldState:{error}}=useController({name,control,rules:{validate:validation}});const fetchError=errorContext.errors[name];const isString=val=>typeof val==="string";const errors=[error===null||error===void 0?void 0:error.message,fetchError].flat().filter(isString);return _jsx(RawSwitch,_object_spread_props(_object_spread({},props),{ref:ref,checked:value,onChange:event=>onChange(event.currentTarget.checked),error:errors.length>0&&_jsx(FormErrors,{errors:errors})}))};
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import React,{forwardRef}from"react";import{Switch}from"@mantine/core";import{useFormContext}from"../Form/Form";import{getDefaultFormStyles}from"../sharedStyles";import{useErrorContext}from"../Form";import{FormErrors}from"../Form/FormErrors";import{useController}from"react-hook-form";export const RawSwitch=forwardRef((_0,_1)=>{let _ref=[_0,_1],[_ref1,..._rest]=_ref,{size="md"}=_ref1,props=_object_without_properties(_ref1,["size"]),[ref]=_rest;const classes=getDefaultFormStyles();return _jsx(Switch,_object_spread_props(_object_spread({ref:ref},props),{size:size,classNames:_object_spread({root:classes.root,label:classes.label,input:classes.input,error:classes.error},props.classNames)}))});RawSwitch.displayName="RawSwitch";export const FormSwitch=_0=>{let{name,validation={}}=_0,props=_object_without_properties(_0,["name","validation"]);const{control}=useFormContext();const errorContext=useErrorContext();const{field:{value=false,onChange,ref},fieldState:{error}}=useController({name,control,rules:{validate:validation}});const fetchError=errorContext.errors[name];const isString=val=>typeof val==="string";const errors=[error===null||error===void 0?void 0:error.message,fetchError].flat().filter(isString);return _jsx(RawSwitch,_object_spread_props(_object_spread({},props),{ref:ref,checked:value,onChange:event=>onChange(event.currentTarget.checked),error:errors.length>0&&_jsx(FormErrors,{errors:errors})}))};
 //# sourceMappingURL=Switch.js.map

package/lib/esm/components/Form/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Form/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport { Switch, SwitchProps } from \"@mantine/core\"\nimport { useFormContext } from \"../Form/Form\"\nimport { getDefaultFormStyles } from \"../sharedStyles\"\nimport { useErrorContext } from \"../Form\"\nimport { FormErrors } from \"../Form/FormErrors\"\nimport { TFormControl } from \"../Form\"\nimport { useController } from \"react-hook-form\"\n\n/**\n * Raw Switch input that applies shared form styling.\n */\nexport const RawSwitch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ size = \"md\", ...props }, ref) => {\n    const classes = getDefaultFormStyles()\n\n    return (\n      <Switch\n        ref={ref}\n        {...props}\n        size={size}\n        classNames={{\n          root: classes.root,\n          label: classes.label,\n          input: classes.input,\n          error: classes.error,\n          ...props.classNames,\n        }}\n      />\n    )\n  }\n)\n\nRawSwitch.displayName = \"RawSwitch\"\n\n/**\n * Form-connected Switch using Mantine's Switch, integrated with validation and error context.\n */\nexport const FormSwitch: React.FC<SwitchProps & TFormControl<HTMLInputElement>> = ({\n  name,\n  validation = {},\n  ...props\n}) => {\n  const { control } = useFormContext()\n  const errorContext = useErrorContext()\n\n  const {\n    field: { value = false, onChange, ref },\n    fieldState: { error },\n  } = useController({\n    name,\n    control,\n    rules: { validate: validation },\n  })\n\n  const fetchError = errorContext.errors[name]\n  const isString = (val: unknown): val is string => typeof val === \"string\"\n  const errors = [error?.message, fetchError].flat().filter(isString)\n\n  return (\n    <RawSwitch\n      {...props}\n      ref={ref}\n      checked={value}\n      onChange={(event) => onChange(event.currentTarget.checked)}\n      error={errors.length > 0 && <FormErrors errors={errors} />}\n    />\n  )\n}\n"],"names":["React","forwardRef","Switch","useFormContext","getDefaultFormStyles","useErrorContext","FormErrors","useController","RawSwitch","size","props","ref","classes","classNames","root","label","input","error","displayName","FormSwitch","name","validation","control","errorContext","field","value","onChange","fieldState","rules","validate","fetchError","errors","isString","val","message","flat","filter","checked","event","currentTarget","length"],"mappings":"0zEAAA,QAAOA,OAASC,UAAU,KAAQ,OAAO,AACzC,QAASC,MAAM,KAAqB,eAAe,AACnD,QAASC,cAAc,KAAQ,cAAc,AAC7C,QAASC,oBAAoB,KAAQ,iBAAiB,AACtD,QAASC,eAAe,KAAQ,SAAS,AACzC,QAASC,UAAU,KAAQ,oBAAoB,AAE/C,QAASC,aAAa,KAAQ,iBAAiB,AAK/C,QAAO,MAAMC,UAAYP,WACvB,iDAAC,CAAEQ,KAAO,IAAI,CAAY,OAAPC,kDAASC,WAC1B,MAAMC,QAAUR,uBAEhB,OACE,KAACF,4CACCS,IAAKA,KACDD,QACJD,KAAMA,KACNI,WAAY,gBACVC,KAAMF,QAAQE,IAAI,CAClBC,MAAOH,QAAQG,KAAK,CACpBC,MAAOJ,QAAQI,KAAK,CACpBC,MAAOL,QAAQK,KAAK,EACjBP,MAAMG,UAAU,IAI3B,EACD,AAEDL,CAAAA,UAAUU,WAAW,CAAG,WAKxB,QAAO,MAAMC,WAAqE,QAAC,CACjFC,IAAI,CACJC,WAAa,CAAC,CAAC,CAEhB,IADIX,2DAEH,KAAM,CAAEY,OAAO,CAAE,CAAGnB,iBACpB,MAAMoB,aAAelB,kBAErB,KAAM,CACJmB,MAAO,CAAEC,MAAQ,KAAK,CAAEC,QAAQ,CAAEf,GAAG,CAAE,CACvCgB,WAAY,CAAEV,KAAK,CAAE,CACtB,CAAGV,cAAc,CAChBa,KACAE,QACAM,MAAO,CAAEC,SAAUR,UAAW,CAChC,GAEA,MAAMS,WAAaP,aAAaQ,MAAM,CAACX,KAAK,CAC5C,MAAMY,SAAW,AAACC,KAAgC,OAAOA,MAAQ,SACjE,MAAMF,OAAS,CAACd,cAAAA,sBAAAA,MAAOiB,OAAO,CAAEJ,WAAW,CAACK,IAAI,GAAGC,MAAM,CAACJ,UAE1D,OACE,KAACxB,iDACKE,QACJC,IAAKA,IACL0B,QAASZ,MACTC,SAAU,AAACY,OAAUZ,SAASY,MAAMC,aAAa,CAACF,OAAO,EACzDpB,MAAOc,OAAOS,MAAM,CAAG,GAAK,KAAClC,YAAWyB,OAAQA,WAGtD,CAAC"}
+{"version":3,"sources":["../../../../../src/components/Form/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport { Switch, SwitchProps } from \"@mantine/core\"\nimport { useFormContext } from \"../Form/Form\"\nimport { getDefaultFormStyles } from \"../sharedStyles\"\nimport { useErrorContext } from \"../Form\"\nimport { FormErrors } from \"../Form/FormErrors\"\nimport { TFormControl } from \"../Form\"\nimport { useController } from \"react-hook-form\"\n\n/**\n * Raw Switch input that applies shared form styling.\n */\nexport const RawSwitch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ size = \"md\", ...props }, ref) => {\n    const classes = getDefaultFormStyles()\n\n    return (\n      <Switch\n        ref={ref}\n        {...props}\n        size={size}\n        classNames={{\n          root: classes.root,\n          label: classes.label,\n          input: classes.input,\n          error: classes.error,\n          ...props.classNames,\n        }}\n      />\n    )\n  }\n)\n\nRawSwitch.displayName = \"RawSwitch\"\n\n/**\n * Form-connected Switch using Mantine's Switch, integrated with validation and error context.\n */\nexport const FormSwitch: React.FC<SwitchProps & TFormControl<HTMLInputElement>> = ({\n  name,\n  validation = {},\n  ...props\n}) => {\n  const { control } = useFormContext()\n  const errorContext = useErrorContext()\n\n  const {\n    field: { value = false, onChange, ref },\n    fieldState: { error },\n  } = useController({\n    name,\n    control,\n    rules: { validate: validation },\n  })\n\n  const fetchError = errorContext.errors[name]\n  const isString = (val: unknown): val is string => typeof val === \"string\"\n  const errors = [error?.message, fetchError].flat().filter(isString)\n\n  return (\n    <RawSwitch\n      {...props}\n      ref={ref}\n      checked={value}\n      onChange={(event) => onChange(event.currentTarget.checked)}\n      error={errors.length > 0 && <FormErrors errors={errors} />}\n    />\n  )\n}\n"],"names":["React","forwardRef","Switch","useFormContext","getDefaultFormStyles","useErrorContext","FormErrors","useController","RawSwitch","size","props","ref","classes","classNames","root","label","input","error","displayName","FormSwitch","name","validation","control","errorContext","field","value","onChange","fieldState","rules","validate","fetchError","errors","isString","val","message","flat","filter","checked","event","currentTarget","length"],"mappings":"k0EAAA,QAAOA,OAASC,UAAU,KAAQ,OAAO,AACzC,QAASC,MAAM,KAAqB,eAAe,AACnD,QAASC,cAAc,KAAQ,cAAc,AAC7C,QAASC,oBAAoB,KAAQ,iBAAiB,AACtD,QAASC,eAAe,KAAQ,SAAS,AACzC,QAASC,UAAU,KAAQ,oBAAoB,AAE/C,QAASC,aAAa,KAAQ,iBAAiB,AAK/C,QAAO,MAAMC,UAAYP,WACvB,iDAAC,CAAEQ,KAAO,IAAI,CAAY,OAAPC,kDAASC,WAC1B,MAAMC,QAAUR,uBAEhB,OACE,KAACF,4CACCS,IAAKA,KACDD,QACJD,KAAMA,KACNI,WAAY,gBACVC,KAAMF,QAAQE,IAAI,CAClBC,MAAOH,QAAQG,KAAK,CACpBC,MAAOJ,QAAQI,KAAK,CACpBC,MAAOL,QAAQK,KAAK,EACjBP,MAAMG,UAAU,IAI3B,EACD,AAEDL,CAAAA,UAAUU,WAAW,CAAG,WAKxB,QAAO,MAAMC,WAAqE,QAAC,CACjFC,IAAI,CACJC,WAAa,CAAC,CAAC,CAEhB,IADIX,2DAEH,KAAM,CAAEY,OAAO,CAAE,CAAGnB,iBACpB,MAAMoB,aAAelB,kBAErB,KAAM,CACJmB,MAAO,CAAEC,MAAQ,KAAK,CAAEC,QAAQ,CAAEf,GAAG,CAAE,CACvCgB,WAAY,CAAEV,KAAK,CAAE,CACtB,CAAGV,cAAc,CAChBa,KACAE,QACAM,MAAO,CAAEC,SAAUR,UAAW,CAChC,GAEA,MAAMS,WAAaP,aAAaQ,MAAM,CAACX,KAAK,CAC5C,MAAMY,SAAW,AAACC,KAAgC,OAAOA,MAAQ,SACjE,MAAMF,OAAS,CAACd,cAAAA,sBAAAA,MAAOiB,OAAO,CAAEJ,WAAW,CAACK,IAAI,GAAGC,MAAM,CAACJ,UAE1D,OACE,KAACxB,iDACKE,QACJC,IAAKA,IACL0B,QAASZ,MACTC,SAAU,AAACY,OAAUZ,SAASY,MAAMC,aAAa,CAACF,OAAO,EACzDpB,MAAOc,OAAOS,MAAM,CAAG,GAAK,KAAClC,YAAWyB,OAAQA,WAGtD,CAAC"}

package/lib/esm/components/Form/Textarea/Textarea.js

@@ -1,2 +1,2 @@
-function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import{Textarea as TextareaMantine}from"@mantine/core";import{getDefaultFormStyles}from"../sharedStyles";import{forwardRef}from"react";import{useErrorContext,useFormContext}from"../Form";import{FormErrors}from"../Form/FormErrors";import classes from"./Textarea.module.css";const useStyles=()=>{return getDefaultFormStyles()};export const Textarea=forwardRef((_0,_1)=>{let _ref=[_0,_1],[_ref1,..._rest]=_ref,{}=_ref1,props=_extends({},_ref1),[ref]=_rest;const defaultClasses=useStyles();return _jsx(TextareaMantine,_object_spread_props(_object_spread({ref:ref},props),{classNames:_object_spread({root:defaultClasses.root,label:defaultClasses.label,input:`${defaultClasses.input} ${classes.input}`,error:defaultClasses.error},props.classNames)}))});export const FormTextarea=_0=>{let{name,validation={},minLength,maxLength}=_0,textAreaProps=_object_without_properties(_0,["name","validation","minLength","maxLength"]);const{register,formState}=useFormContext();const errorContext=useErrorContext();const formError=formState.errors[name];const fetchErrors=errorContext.errors[name];const errors=[formError===null||formError===void 0?void 0:formError.message,fetchErrors].flat().filter(ent=>ent);return _jsx(Textarea,_object_spread_props(_object_spread({},textAreaProps,register(name,{validate:validation,minLength,maxLength})),{error:errors.length>0&&_jsx(FormErrors,{errors:errors})}))};
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import{Textarea as TextareaMantine}from"@mantine/core";import{getDefaultFormStyles}from"../sharedStyles";import{forwardRef}from"react";import{useErrorContext,useFormContext}from"../Form";import{FormErrors}from"../Form/FormErrors";import classes from"./Textarea.module.css";const useStyles=()=>{return getDefaultFormStyles()};export const Textarea=forwardRef((_0,_1)=>{let _ref=[_0,_1],[_ref1,..._rest]=_ref,{}=_ref1,props=_extends({},_ref1),[ref]=_rest;const defaultClasses=useStyles();return _jsx(TextareaMantine,_object_spread_props(_object_spread({ref:ref},props),{classNames:_object_spread({root:defaultClasses.root,label:defaultClasses.label,input:`${defaultClasses.input} ${classes.input}`,error:defaultClasses.error},props.classNames)}))});export const FormTextarea=_0=>{let{name,validation={},minLength,maxLength}=_0,textAreaProps=_object_without_properties(_0,["name","validation","minLength","maxLength"]);const{register,formState}=useFormContext();const errorContext=useErrorContext();const formError=formState.errors[name];const fetchErrors=errorContext.errors[name];const errors=[formError===null||formError===void 0?void 0:formError.message,fetchErrors].flat().filter(ent=>ent);return _jsx(Textarea,_object_spread_props(_object_spread({},textAreaProps,register(name,{validate:validation,minLength,maxLength})),{error:errors.length>0&&_jsx(FormErrors,{errors:errors})}))};
 //# sourceMappingURL=Textarea.js.map

package/lib/esm/components/Form/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Form/Textarea/Textarea.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { TextareaProps, Textarea as TextareaMantine } from \"@mantine/core\"\nimport { getDefaultFormStyles } from \"../sharedStyles\"\nimport { forwardRef } from \"react\"\nimport { TFormControl } from \"../Form\"\nimport { useErrorContext, useFormContext } from \"../Form\"\nimport { FormErrors } from \"../Form/FormErrors\"\nimport classes from \"./Textarea.module.css\"\n\nconst useStyles = () => {\n  return getDefaultFormStyles()\n}\n\n// eslint-disable-next-line react/display-name\nexport const Textarea = forwardRef<HTMLTextAreaElement, any>(({ ...props }, ref) => {\n  const defaultClasses = useStyles()\n  return (\n    <TextareaMantine\n      ref={ref}\n      {...props}\n      classNames={{\n        root: defaultClasses.root,\n        label: defaultClasses.label,\n        input: `${defaultClasses.input} ${classes.input}`,\n        error: defaultClasses.error,\n        ...props.classNames,\n      }}\n    />\n  )\n})\n\n/**\n * **Form** compatible TextArea component with built-in validation\n * @param name Name for the form-item\n * @param validation Validation rules for client-side validation\n * @param minLength Quick validation\n * @param maxLength Quick validation\n * @param textAreaProps props passed to the TextArea\n */\nexport const FormTextarea: React.FC<TextareaProps & TFormControl<HTMLTextAreaElement>> = ({\n  name,\n  validation = {},\n  minLength,\n  maxLength,\n  ...textAreaProps\n}) => {\n  const { register, formState } = useFormContext()\n  const errorContext = useErrorContext()\n\n  const formError = formState.errors[name]\n  const fetchErrors = errorContext.errors[name]\n  const errors = [formError?.message as string, fetchErrors].flat().filter((ent) => ent)\n\n  return (\n    <Textarea\n      {...textAreaProps}\n      {...register(name, {\n        validate: validation,\n        minLength,\n        maxLength,\n      })}\n      error={errors.length > 0 && <FormErrors errors={errors} />}\n    />\n  )\n}\n"],"names":["Textarea","TextareaMantine","getDefaultFormStyles","forwardRef","useErrorContext","useFormContext","FormErrors","classes","useStyles","props","ref","defaultClasses","classNames","root","label","input","error","FormTextarea","name","validation","minLength","maxLength","textAreaProps","register","formState","errorContext","formError","errors","fetchErrors","message","flat","filter","ent","validate","length"],"mappings":"8kFAIA,QAAwBA,YAAYC,eAAe,KAAQ,eAAe,AAC1E,QAASC,oBAAoB,KAAQ,iBAAiB,AACtD,QAASC,UAAU,KAAQ,OAAO,AAElC,QAASC,eAAe,CAAEC,cAAc,KAAQ,SAAS,AACzD,QAASC,UAAU,KAAQ,oBAAoB,AAC/C,QAAOC,YAAa,uBAAuB,CAE3C,MAAMC,UAAY,KAChB,OAAON,sBACT,CAGA,QAAO,MAAMF,SAAWG,WAAqC,iDAAC,EAAY,OAAPM,0BAASC,WAC1E,MAAMC,eAAiBH,YACvB,OACE,KAACP,qDACCS,IAAKA,KACDD,QACJG,WAAY,gBACVC,KAAMF,eAAeE,IAAI,CACzBC,MAAOH,eAAeG,KAAK,CAC3BC,MAAO,CAAC,EAAEJ,eAAeI,KAAK,CAAC,CAAC,EAAER,QAAQQ,KAAK,CAAC,CAAC,CACjDC,MAAOL,eAAeK,KAAK,EACxBP,MAAMG,UAAU,IAI3B,EAAE,AAUF,QAAO,MAAMK,aAA4E,QAAC,CACxFC,IAAI,CACJC,WAAa,CAAC,CAAC,CACfC,SAAS,CACTC,SAAS,CAEV,IADIC,2FAEH,KAAM,CAAEC,QAAQ,CAAEC,SAAS,CAAE,CAAGnB,iBAChC,MAAMoB,aAAerB,kBAErB,MAAMsB,UAAYF,UAAUG,MAAM,CAACT,KAAK,CACxC,MAAMU,YAAcH,aAAaE,MAAM,CAACT,KAAK,CAC7C,MAAMS,OAAS,CAACD,kBAAAA,0BAAAA,UAAWG,OAAO,CAAYD,YAAY,CAACE,IAAI,GAAGC,MAAM,CAAC,AAACC,KAAQA,KAElF,OACE,KAAChC,gDACKsB,cACAC,SAASL,KAAM,CACjBe,SAAUd,WACVC,UACAC,SACF,KACAL,MAAOW,OAAOO,MAAM,CAAG,GAAK,KAAC5B,YAAWqB,OAAQA,WAGtD,CAAC"}
+{"version":3,"sources":["../../../../../src/components/Form/Textarea/Textarea.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { TextareaProps, Textarea as TextareaMantine } from \"@mantine/core\"\nimport { getDefaultFormStyles } from \"../sharedStyles\"\nimport { forwardRef } from \"react\"\nimport { TFormControl } from \"../Form\"\nimport { useErrorContext, useFormContext } from \"../Form\"\nimport { FormErrors } from \"../Form/FormErrors\"\nimport classes from \"./Textarea.module.css\"\n\nconst useStyles = () => {\n  return getDefaultFormStyles()\n}\n\n// eslint-disable-next-line react/display-name\nexport const Textarea = forwardRef<HTMLTextAreaElement, any>(({ ...props }, ref) => {\n  const defaultClasses = useStyles()\n  return (\n    <TextareaMantine\n      ref={ref}\n      {...props}\n      classNames={{\n        root: defaultClasses.root,\n        label: defaultClasses.label,\n        input: `${defaultClasses.input} ${classes.input}`,\n        error: defaultClasses.error,\n        ...props.classNames,\n      }}\n    />\n  )\n})\n\n/**\n * **Form** compatible TextArea component with built-in validation\n * @param name Name for the form-item\n * @param validation Validation rules for client-side validation\n * @param minLength Quick validation\n * @param maxLength Quick validation\n * @param textAreaProps props passed to the TextArea\n */\nexport const FormTextarea: React.FC<TextareaProps & TFormControl<HTMLTextAreaElement>> = ({\n  name,\n  validation = {},\n  minLength,\n  maxLength,\n  ...textAreaProps\n}) => {\n  const { register, formState } = useFormContext()\n  const errorContext = useErrorContext()\n\n  const formError = formState.errors[name]\n  const fetchErrors = errorContext.errors[name]\n  const errors = [formError?.message as string, fetchErrors].flat().filter((ent) => ent)\n\n  return (\n    <Textarea\n      {...textAreaProps}\n      {...register(name, {\n        validate: validation,\n        minLength,\n        maxLength,\n      })}\n      error={errors.length > 0 && <FormErrors errors={errors} />}\n    />\n  )\n}\n"],"names":["Textarea","TextareaMantine","getDefaultFormStyles","forwardRef","useErrorContext","useFormContext","FormErrors","classes","useStyles","props","ref","defaultClasses","classNames","root","label","input","error","FormTextarea","name","validation","minLength","maxLength","textAreaProps","register","formState","errorContext","formError","errors","fetchErrors","message","flat","filter","ent","validate","length"],"mappings":"slFAIA,QAAwBA,YAAYC,eAAe,KAAQ,eAAe,AAC1E,QAASC,oBAAoB,KAAQ,iBAAiB,AACtD,QAASC,UAAU,KAAQ,OAAO,AAElC,QAASC,eAAe,CAAEC,cAAc,KAAQ,SAAS,AACzD,QAASC,UAAU,KAAQ,oBAAoB,AAC/C,QAAOC,YAAa,uBAAuB,CAE3C,MAAMC,UAAY,KAChB,OAAON,sBACT,CAGA,QAAO,MAAMF,SAAWG,WAAqC,iDAAC,EAAY,OAAPM,0BAASC,WAC1E,MAAMC,eAAiBH,YACvB,OACE,KAACP,qDACCS,IAAKA,KACDD,QACJG,WAAY,gBACVC,KAAMF,eAAeE,IAAI,CACzBC,MAAOH,eAAeG,KAAK,CAC3BC,MAAO,CAAC,EAAEJ,eAAeI,KAAK,CAAC,CAAC,EAAER,QAAQQ,KAAK,CAAC,CAAC,CACjDC,MAAOL,eAAeK,KAAK,EACxBP,MAAMG,UAAU,IAI3B,EAAE,AAUF,QAAO,MAAMK,aAA4E,QAAC,CACxFC,IAAI,CACJC,WAAa,CAAC,CAAC,CACfC,SAAS,CACTC,SAAS,CAEV,IADIC,2FAEH,KAAM,CAAEC,QAAQ,CAAEC,SAAS,CAAE,CAAGnB,iBAChC,MAAMoB,aAAerB,kBAErB,MAAMsB,UAAYF,UAAUG,MAAM,CAACT,KAAK,CACxC,MAAMU,YAAcH,aAAaE,MAAM,CAACT,KAAK,CAC7C,MAAMS,OAAS,CAACD,kBAAAA,0BAAAA,UAAWG,OAAO,CAAYD,YAAY,CAACE,IAAI,GAAGC,MAAM,CAAC,AAACC,KAAQA,KAElF,OACE,KAAChC,gDACKsB,cACAC,SAASL,KAAM,CACjBe,SAAUd,WACVC,UACAC,SACF,KACAL,MAAOW,OAAOO,MAAM,CAAG,GAAK,KAAC5B,YAAWqB,OAAQA,WAGtD,CAAC"}

package/lib/esm/components/Icon/Icon.js

@@ -1,2 +1,2 @@
-function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import{forwardRef}from"react";import{theme}from"../../theme/theme";export const Icon=forwardRef((_0,_1)=>{let _ref=[_0,_1],[_ref1,..._rest]=_ref,{size="sm",strokeWidth="1.5",icon}=_ref1,rest=_object_without_properties(_ref1,["size","strokeWidth","icon"]),[ref]=_rest;const Icon=icon;return _jsx(Icon,_object_spread({size:getSizeForIcon(size),ref:ref,strokeWidth:strokeWidth},rest))});const getSizeForIcon=size=>{switch(size){case"xs":return theme.other.iconSizes.SMALL;case"sm":return theme.other.iconSizes.MEDIUM;case"md":return theme.other.iconSizes.MEDIUM_LARGE;case"lg":return theme.other.iconSizes.LARGE;default:return theme.other.iconSizes.MEDIUM}};Icon.displayName="Icon";
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import{forwardRef}from"react";import{theme}from"../../theme/theme";export const Icon=forwardRef((_0,_1)=>{let _ref=[_0,_1],[_ref1,..._rest]=_ref,{size="sm",strokeWidth="1.5",icon}=_ref1,rest=_object_without_properties(_ref1,["size","strokeWidth","icon"]),[ref]=_rest;const Icon=icon;return _jsx(Icon,_object_spread({size:getSizeForIcon(size),ref:ref,strokeWidth:strokeWidth},rest))});const getSizeForIcon=size=>{switch(size){case"xs":return theme.other.iconSizes.SMALL;case"sm":return theme.other.iconSizes.MEDIUM;case"md":return theme.other.iconSizes.MEDIUM_LARGE;case"lg":return theme.other.iconSizes.LARGE;default:return theme.other.iconSizes.MEDIUM}};Icon.displayName="Icon";
 //# sourceMappingURL=Icon.js.map

package/lib/esm/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { forwardRef } from \"react\"\nimport { LucideIcon, LucideProps } from \"lucide-react\"\nimport { theme } from \"../../theme/theme\"\n\nexport type TIconProps = {\n  icon: LucideIcon\n  size: \"xs\" | \"sm\" | \"md\" | \"lg\"\n} & LucideProps\n\n/**\n * Provides an icon with variable size\n * @param icon The LucideIcon to be used\n * @param size Size string (xs, sm, md, or lg)\n */\nexport const Icon = forwardRef<SVGSVGElement, TIconProps>(\n  ({ size = \"sm\", strokeWidth = \"1.5\", icon, ...rest }, ref) => {\n    const Icon = icon\n    return <Icon size={getSizeForIcon(size)} ref={ref} strokeWidth={strokeWidth} {...rest} />\n  }\n)\n\nconst getSizeForIcon = (size: \"xs\" | \"sm\" | \"md\" | \"lg\"): number => {\n  switch (size) {\n    case \"xs\":\n      return theme.other.iconSizes.SMALL\n    case \"sm\":\n      return theme.other.iconSizes.MEDIUM\n    case \"md\":\n      return theme.other.iconSizes.MEDIUM_LARGE\n    case \"lg\":\n      return theme.other.iconSizes.LARGE\n    default:\n      return theme.other.iconSizes.MEDIUM\n  }\n}\n\nIcon.displayName = \"Icon\"\n"],"names":["forwardRef","theme","Icon","size","strokeWidth","icon","rest","ref","getSizeForIcon","other","iconSizes","SMALL","MEDIUM","MEDIUM_LARGE","LARGE","displayName"],"mappings":"urDAIA,QAASA,UAAU,KAAQ,OAAO,AAElC,QAASC,KAAK,KAAQ,mBAAmB,AAYzC,QAAO,MAAMC,KAAOF,WAClB,iDAAC,CAAEG,KAAO,IAAI,CAAEC,YAAc,KAAK,CAAEC,IAAI,CAAW,OAANC,sEAAQC,WACpD,MAAML,KAAOG,KACb,OAAO,KAACH,qBAAKC,KAAMK,eAAeL,MAAOI,IAAKA,IAAKH,YAAaA,aAAiBE,MACnF,EACD,CAED,MAAME,eAAiB,AAACL,OACtB,OAAQA,MACN,IAAK,KACH,OAAOF,MAAMQ,KAAK,CAACC,SAAS,CAACC,KAAK,AACpC,KAAK,KACH,OAAOV,MAAMQ,KAAK,CAACC,SAAS,CAACE,MAAM,AACrC,KAAK,KACH,OAAOX,MAAMQ,KAAK,CAACC,SAAS,CAACG,YAAY,AAC3C,KAAK,KACH,OAAOZ,MAAMQ,KAAK,CAACC,SAAS,CAACI,KAAK,AACpC,SACE,OAAOb,MAAMQ,KAAK,CAACC,SAAS,CAACE,MAAM,AACvC,CACF,CAEAV,CAAAA,KAAKa,WAAW,CAAG"}
+{"version":3,"sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { forwardRef } from \"react\"\nimport { LucideIcon, LucideProps } from \"lucide-react\"\nimport { theme } from \"../../theme/theme\"\n\nexport type TIconProps = {\n  icon: LucideIcon\n  size: \"xs\" | \"sm\" | \"md\" | \"lg\"\n} & LucideProps\n\n/**\n * Provides an icon with variable size\n * @param icon The LucideIcon to be used\n * @param size Size string (xs, sm, md, or lg)\n */\nexport const Icon = forwardRef<SVGSVGElement, TIconProps>(\n  ({ size = \"sm\", strokeWidth = \"1.5\", icon, ...rest }, ref) => {\n    const Icon = icon\n    return <Icon size={getSizeForIcon(size)} ref={ref} strokeWidth={strokeWidth} {...rest} />\n  }\n)\n\nconst getSizeForIcon = (size: \"xs\" | \"sm\" | \"md\" | \"lg\"): number => {\n  switch (size) {\n    case \"xs\":\n      return theme.other.iconSizes.SMALL\n    case \"sm\":\n      return theme.other.iconSizes.MEDIUM\n    case \"md\":\n      return theme.other.iconSizes.MEDIUM_LARGE\n    case \"lg\":\n      return theme.other.iconSizes.LARGE\n    default:\n      return theme.other.iconSizes.MEDIUM\n  }\n}\n\nIcon.displayName = \"Icon\"\n"],"names":["forwardRef","theme","Icon","size","strokeWidth","icon","rest","ref","getSizeForIcon","other","iconSizes","SMALL","MEDIUM","MEDIUM_LARGE","LARGE","displayName"],"mappings":"+rDAIA,QAASA,UAAU,KAAQ,OAAO,AAElC,QAASC,KAAK,KAAQ,mBAAmB,AAYzC,QAAO,MAAMC,KAAOF,WAClB,iDAAC,CAAEG,KAAO,IAAI,CAAEC,YAAc,KAAK,CAAEC,IAAI,CAAW,OAANC,sEAAQC,WACpD,MAAML,KAAOG,KACb,OAAO,KAACH,qBAAKC,KAAMK,eAAeL,MAAOI,IAAKA,IAAKH,YAAaA,aAAiBE,MACnF,EACD,CAED,MAAME,eAAiB,AAACL,OACtB,OAAQA,MACN,IAAK,KACH,OAAOF,MAAMQ,KAAK,CAACC,SAAS,CAACC,KAAK,AACpC,KAAK,KACH,OAAOV,MAAMQ,KAAK,CAACC,SAAS,CAACE,MAAM,AACrC,KAAK,KACH,OAAOX,MAAMQ,KAAK,CAACC,SAAS,CAACG,YAAY,AAC3C,KAAK,KACH,OAAOZ,MAAMQ,KAAK,CAACC,SAAS,CAACI,KAAK,AACpC,SACE,OAAOb,MAAMQ,KAAK,CAACC,SAAS,CAACE,MAAM,AACvC,CACF,CAEAV,CAAAA,KAAKa,WAAW,CAAG"}

package/lib/esm/components/InfoTip/InfoTip.js

@@ -1,2 +1,2 @@
-function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import{useDisclosure}from"@mantine/hooks";import{Popover,useMantineTheme}from"@mantine/core";import{Info}from"lucide-react";import classes from"./InfoTip.module.css";import{ICON_SIZES}from"../../theme";import{cx}from"../../helper/cx";export const InfoTip=_0=>{let{children,dropDownContent,className}=_0,props=_object_without_properties(_0,["children","dropDownContent","className"]);const[opened,{close,open}]=useDisclosure(false);return _jsxs(Popover,_object_spread_props(_object_spread({position:"top",withArrow:true,offset:4,opened:opened,withinPortal:true},props),{children:[_jsx(Popover.Target,{children:_jsx("div",{className:cx(classes["info-tip-target"],className),onMouseEnter:open,onMouseLeave:close,children:children})}),_jsx(Popover.Dropdown,{className:cx(classes.root,className),children:dropDownContent})]}))};export const InfoI=_0=>{let{dropDownContent,icon}=_0,props=_object_without_properties(_0,["dropDownContent","icon"]);const theme=useMantineTheme();const Icon=icon||Info;return _jsx(InfoTip,_object_spread_props(_object_spread({"data-testid":"info-i",dropDownContent:dropDownContent},props),{children:_jsx(Icon,{size:ICON_SIZES.MEDIUM,color:theme.colors.gray[5]})}))};
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import{useDisclosure}from"@mantine/hooks";import{Popover,useMantineTheme}from"@mantine/core";import{Info}from"lucide-react";import classes from"./InfoTip.module.css";import{ICON_SIZES}from"../../theme";import{cx}from"../../helper/cx";export const InfoTip=_0=>{let{children,dropDownContent,className}=_0,props=_object_without_properties(_0,["children","dropDownContent","className"]);const[opened,{close,open}]=useDisclosure(false);return _jsxs(Popover,_object_spread_props(_object_spread({position:"top",withArrow:true,offset:4,opened:opened,withinPortal:true},props),{children:[_jsx(Popover.Target,{children:_jsx("div",{className:cx(classes["info-tip-target"],className),onMouseEnter:open,onMouseLeave:close,children:children})}),_jsx(Popover.Dropdown,{className:cx(classes.root,className),children:dropDownContent})]}))};export const InfoI=_0=>{let{dropDownContent,icon}=_0,props=_object_without_properties(_0,["dropDownContent","icon"]);const theme=useMantineTheme();const Icon=icon||Info;return _jsx(InfoTip,_object_spread_props(_object_spread({"data-testid":"info-i",dropDownContent:dropDownContent},props),{children:_jsx(Icon,{size:ICON_SIZES.MEDIUM,color:theme.colors.gray[5]})}))};
 //# sourceMappingURL=InfoTip.js.map

package/lib/esm/components/InfoTip/InfoTip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InfoTip/InfoTip.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport React from \"react\"\nimport { useDisclosure } from \"@mantine/hooks\"\nimport { Popover, PopoverProps, useMantineTheme } from \"@mantine/core\"\nimport { Info, LucideIcon } from \"lucide-react\"\nimport classes from \"./InfoTip.module.css\"\nimport { ICON_SIZES } from \"../../theme\"\nimport { cx } from \"../../helper/cx\"\n\nexport type TInfoTipBasicProps = PopoverProps & {\n  dropDownContent: React.ReactElement\n  className?: string\n}\n\nexport type TInfoIProps = Omit<TInfoTipBasicProps, \"children\"> & {\n  icon?: LucideIcon\n}\n\n/**\n * Provides detailed information for the user upon hover.\n * Usually used for infoIs.\n * @param dropDownContent component that should be displayed inside the infoTip\n * @param children\n * @param className a class name for additional styles for the Popover.Target wrapper\n */\nexport const InfoTip = ({ children, dropDownContent, className, ...props }: TInfoTipBasicProps) => {\n  const [opened, { close, open }] = useDisclosure(false)\n\n  return (\n    <Popover position=\"top\" withArrow offset={4} opened={opened} withinPortal={true} {...props}>\n      <Popover.Target>\n        <div\n          className={cx(classes[\"info-tip-target\"], className)}\n          onMouseEnter={open}\n          onMouseLeave={close}\n        >\n          {children}\n        </div>\n      </Popover.Target>\n      <Popover.Dropdown className={cx(classes.root, className)}>{dropDownContent}</Popover.Dropdown>\n    </Popover>\n  )\n}\n\n/**\n * The InfoI is a sign for the user that additional information is\n * available. Upon hover an InfoTip will provide detailed information.\n * @param dropDownContent component that should be displayed inside the infoTip\n * @param children\n */\nexport const InfoI = ({ dropDownContent, icon, ...props }: TInfoIProps) => {\n  const theme = useMantineTheme()\n  const Icon = icon || Info\n  return (\n    <InfoTip data-testid=\"info-i\" dropDownContent={dropDownContent} {...props}>\n      <Icon size={ICON_SIZES.MEDIUM} color={theme.colors.gray[5]} />\n    </InfoTip>\n  )\n}\n"],"names":["React","useDisclosure","Popover","useMantineTheme","Info","classes","ICON_SIZES","cx","InfoTip","children","dropDownContent","className","props","opened","close","open","position","withArrow","offset","withinPortal","Target","div","onMouseEnter","onMouseLeave","Dropdown","root","InfoI","icon","theme","Icon","data-testid","size","MEDIUM","color","colors","gray"],"mappings":"w0EAIA,QAAOA,UAAW,OAAO,AACzB,QAASC,aAAa,KAAQ,gBAAgB,AAC9C,QAASC,OAAO,CAAgBC,eAAe,KAAQ,eAAe,AACtE,QAASC,IAAI,KAAoB,cAAc,AAC/C,QAAOC,YAAa,sBAAsB,AAC1C,QAASC,UAAU,KAAQ,aAAa,AACxC,QAASC,EAAE,KAAQ,iBAAiB,AAkBpC,QAAO,MAAMC,QAAU,QAAC,CAAEC,QAAQ,CAAEC,eAAe,CAAEC,SAAS,CAAgC,IAA3BC,gFACjE,KAAM,CAACC,OAAQ,CAAEC,KAAK,CAAEC,IAAI,CAAE,CAAC,CAAGd,cAAc,OAEhD,OACE,MAACC,6CAAQc,SAAS,MAAMC,SAAS,MAACC,OAAQ,EAAGL,OAAQA,OAAQM,aAAc,MAAUP,kBACnF,KAACV,QAAQkB,MAAM,WACb,KAACC,OACCV,UAAWJ,GAAGF,OAAO,CAAC,kBAAkB,CAAEM,WAC1CW,aAAcP,KACdQ,aAAcT,eAEbL,aAGL,KAACP,QAAQsB,QAAQ,EAACb,UAAWJ,GAAGF,QAAQoB,IAAI,CAAEd,oBAAaD,qBAGjE,CAAC,AAQD,QAAO,MAAMgB,MAAQ,QAAC,CAAEhB,eAAe,CAAEiB,IAAI,CAAyB,IAApBf,gEAChD,MAAMgB,MAAQzB,kBACd,MAAM0B,KAAOF,MAAQvB,KACrB,OACE,KAACI,6CAAQsB,cAAY,SAASpB,gBAAiBA,iBAAqBE,iBAClE,KAACiB,MAAKE,KAAMzB,WAAW0B,MAAM,CAAEC,MAAOL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE,KAGhE,CAAC"}
+{"version":3,"sources":["../../../../src/components/InfoTip/InfoTip.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport React from \"react\"\nimport { useDisclosure } from \"@mantine/hooks\"\nimport { Popover, PopoverProps, useMantineTheme } from \"@mantine/core\"\nimport { Info, LucideIcon } from \"lucide-react\"\nimport classes from \"./InfoTip.module.css\"\nimport { ICON_SIZES } from \"../../theme\"\nimport { cx } from \"../../helper/cx\"\n\nexport type TInfoTipBasicProps = PopoverProps & {\n  dropDownContent: React.ReactElement\n  className?: string\n}\n\nexport type TInfoIProps = Omit<TInfoTipBasicProps, \"children\"> & {\n  icon?: LucideIcon\n}\n\n/**\n * Provides detailed information for the user upon hover.\n * Usually used for infoIs.\n * @param dropDownContent component that should be displayed inside the infoTip\n * @param children\n * @param className a class name for additional styles for the Popover.Target wrapper\n */\nexport const InfoTip = ({ children, dropDownContent, className, ...props }: TInfoTipBasicProps) => {\n  const [opened, { close, open }] = useDisclosure(false)\n\n  return (\n    <Popover position=\"top\" withArrow offset={4} opened={opened} withinPortal={true} {...props}>\n      <Popover.Target>\n        <div\n          className={cx(classes[\"info-tip-target\"], className)}\n          onMouseEnter={open}\n          onMouseLeave={close}\n        >\n          {children}\n        </div>\n      </Popover.Target>\n      <Popover.Dropdown className={cx(classes.root, className)}>{dropDownContent}</Popover.Dropdown>\n    </Popover>\n  )\n}\n\n/**\n * The InfoI is a sign for the user that additional information is\n * available. Upon hover an InfoTip will provide detailed information.\n * @param dropDownContent component that should be displayed inside the infoTip\n * @param children\n */\nexport const InfoI = ({ dropDownContent, icon, ...props }: TInfoIProps) => {\n  const theme = useMantineTheme()\n  const Icon = icon || Info\n  return (\n    <InfoTip data-testid=\"info-i\" dropDownContent={dropDownContent} {...props}>\n      <Icon size={ICON_SIZES.MEDIUM} color={theme.colors.gray[5]} />\n    </InfoTip>\n  )\n}\n"],"names":["React","useDisclosure","Popover","useMantineTheme","Info","classes","ICON_SIZES","cx","InfoTip","children","dropDownContent","className","props","opened","close","open","position","withArrow","offset","withinPortal","Target","div","onMouseEnter","onMouseLeave","Dropdown","root","InfoI","icon","theme","Icon","data-testid","size","MEDIUM","color","colors","gray"],"mappings":"g1EAIA,QAAOA,UAAW,OAAO,AACzB,QAASC,aAAa,KAAQ,gBAAgB,AAC9C,QAASC,OAAO,CAAgBC,eAAe,KAAQ,eAAe,AACtE,QAASC,IAAI,KAAoB,cAAc,AAC/C,QAAOC,YAAa,sBAAsB,AAC1C,QAASC,UAAU,KAAQ,aAAa,AACxC,QAASC,EAAE,KAAQ,iBAAiB,AAkBpC,QAAO,MAAMC,QAAU,QAAC,CAAEC,QAAQ,CAAEC,eAAe,CAAEC,SAAS,CAAgC,IAA3BC,gFACjE,KAAM,CAACC,OAAQ,CAAEC,KAAK,CAAEC,IAAI,CAAE,CAAC,CAAGd,cAAc,OAEhD,OACE,MAACC,6CAAQc,SAAS,MAAMC,SAAS,MAACC,OAAQ,EAAGL,OAAQA,OAAQM,aAAc,MAAUP,kBACnF,KAACV,QAAQkB,MAAM,WACb,KAACC,OACCV,UAAWJ,GAAGF,OAAO,CAAC,kBAAkB,CAAEM,WAC1CW,aAAcP,KACdQ,aAAcT,eAEbL,aAGL,KAACP,QAAQsB,QAAQ,EAACb,UAAWJ,GAAGF,QAAQoB,IAAI,CAAEd,oBAAaD,qBAGjE,CAAC,AAQD,QAAO,MAAMgB,MAAQ,QAAC,CAAEhB,eAAe,CAAEiB,IAAI,CAAyB,IAApBf,gEAChD,MAAMgB,MAAQzB,kBACd,MAAM0B,KAAOF,MAAQvB,KACrB,OACE,KAACI,6CAAQsB,cAAY,SAASpB,gBAAiBA,iBAAqBE,iBAClE,KAACiB,MAAKE,KAAMzB,WAAW0B,MAAM,CAAEC,MAAOL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE,KAGhE,CAAC"}