@react-fabric/graph 1.0.0-beta.58

package/dist/esm/packages/graph/src/components/Context.js

@@ -0,0 +1,107 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { Icon, CoreIcons } from '@react-fabric/core';
+import { fitViewportToNodes } from '@sigma/utils';
+import { useState, useEffect, useImperativeHandle, createContext, useContext } from 'react';
+import { useDragSelection } from '../hooks/sigmaDragSelect.js';
+import { useGraphology } from '../hooks/useGraphology.js';
+import { useSigma } from '../hooks/useSigma.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var GraphContext = /*#__PURE__*/createContext({});
+var useGraph = function useGraph() {
+  return useContext(GraphContext);
+};
+var GraphProvider = function GraphProvider(_ref) {
+  var ref = _ref.ref,
+    data = _ref.data,
+    children = _ref.children,
+    nodeReducer = _ref.nodeReducer,
+    edgeReducer = _ref.edgeReducer,
+    onSelectChange = _ref.onSelectChange,
+    onNodeDoubleClick = _ref.onNodeDoubleClick;
+    _ref.onContextMenu;
+  var _useGraphology = useGraphology(data),
+    graph = _useGraphology.graph,
+    selected = _useGraphology.selected;
+  var sigma = useSigma(graph, nodeReducer, edgeReducer);
+  var dragSelector = useDragSelection(sigma.instance);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    layoutRunning = _useState2[0],
+    setLayoutRunning = _useState2[1];
+  var resetViewport = function resetViewport() {
+    if (graph.size === 0) return;
+    sigma.instance && fitViewportToNodes(sigma.instance, graph.nodes(), {
+      animate: true
+    });
+  };
+  var zoomIn = function zoomIn() {
+    var _sigma$instance;
+    if (graph.size === 0) return;
+    (_sigma$instance = sigma.instance) === null || _sigma$instance === void 0 || _sigma$instance.getCamera().animatedZoom();
+  };
+  var zoomOut = function zoomOut() {
+    var _sigma$instance2;
+    if (graph.size === 0) return;
+    (_sigma$instance2 = sigma.instance) === null || _sigma$instance2 === void 0 || _sigma$instance2.getCamera().animatedUnzoom();
+  };
+  useEffect(function () {
+    var resetHandler = function resetHandler() {
+      sigma.instance && fitViewportToNodes(sigma.instance, graph.nodes(), {
+        animate: true
+      });
+    };
+    graph.on("layoutRunning", setLayoutRunning);
+    graph.on("layoutDone", resetHandler);
+    onSelectChange && graph.on("nodesSelected", onSelectChange);
+    return function () {
+      graph.off("layoutDone", resetHandler);
+      graph.off("layoutRunning", setLayoutRunning);
+      onSelectChange && graph.off("nodesSelected", onSelectChange);
+    };
+  }, [graph, sigma, onSelectChange]);
+  useEffect(function () {
+    var _sigma$instance3;
+    var handleClick = function handleClick(e) {
+      onNodeDoubleClick === null || onNodeDoubleClick === void 0 || onNodeDoubleClick(e.node, graph.getNodeAttributes(e.node));
+      e.event.original.preventDefault();
+      e.event.preventSigmaDefault();
+      e.preventSigmaDefault();
+      return false;
+    };
+    (_sigma$instance3 = sigma.instance) === null || _sigma$instance3 === void 0 || _sigma$instance3.on("doubleClickNode", handleClick);
+    return function () {
+      var _sigma$instance4;
+      (_sigma$instance4 = sigma.instance) === null || _sigma$instance4 === void 0 || _sigma$instance4.off("doubleClickNode", handleClick);
+    };
+  }, [sigma, graph, onNodeDoubleClick]);
+  useImperativeHandle(ref, function () {
+    return {
+      graph: graph,
+      sigma: sigma
+    };
+  }, [graph, sigma]);
+  return /*#__PURE__*/jsxs(GraphContext.Provider, {
+    value: {
+      sigma: sigma,
+      graph: graph,
+      selected: selected,
+      dragSelector: dragSelector,
+      layoutRunning: layoutRunning,
+      resetViewport: resetViewport,
+      zoomIn: zoomIn,
+      zoomOut: zoomOut
+    },
+    children: [children, layoutRunning && /*#__PURE__*/jsx("div", {
+      className: "absolute top-0 end-0 p-1",
+      children: /*#__PURE__*/jsx(Icon, {
+        icon: CoreIcons.spinner,
+        animate: "spin"
+      })
+    })]
+  });
+};
+
+export { GraphProvider, useGraph };

package/dist/esm/packages/graph/src/components/ContextMenu.js

@@ -0,0 +1,134 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useFloatingNodeId, useFloating, autoUpdate, offset, flip, useClick, useDismiss, useInteractions, FloatingPortal } from '@floating-ui/react';
+import { useState, useRef, useEffect, cloneElement } from 'react';
+import { useGraph } from './Context.js';
+import { Menu, MenuItem, Divider } from '@react-fabric/core';
+import { ICONS } from '../constants/index.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var GraphContextMenu = function GraphContextMenu() {
+  var _refs$domReference$cu, _refs$domReference$cu2;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var nodeId = useFloatingNodeId();
+  var _useGraph = useGraph(),
+    sigma = _useGraph.sigma;
+    _useGraph.graph;
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    menu = _useState4[0],
+    setMenu = _useState4[1];
+  var _useFloating = useFloating({
+      open: isOpen,
+      nodeId: nodeId,
+      onOpenChange: function onOpenChange(open, evt, reason) {
+        var target = evt === null || evt === void 0 ? void 0 : evt.target;
+        if (!(target !== null && target !== void 0 && target.closest(".menu-list"))) setIsOpen(open);
+      },
+      strategy: "absolute",
+      placement: "bottom-start",
+      whileElementsMounted: autoUpdate,
+      middleware: [offset(8), flip()]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var click = useClick(context, {
+    toggle: true,
+    ignoreMouse: true
+  });
+  var dismiss = useDismiss(context, {
+    bubbles: true
+  });
+  var _useInteractions = useInteractions([dismiss, click]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var tryClosing = useRef(function (e) {
+    var _e$target;
+    if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.closest("[data-dropdown-dismiss='true']")) setTimeout(function () {
+      return setIsOpen(false);
+    }, 50);
+  });
+  useEffect(function () {
+    var _sigma$instance, _sigma$instance2, _sigma$instance3;
+    var handleContextMenu = function handleContextMenu(e) {
+      if ("node" in e) {
+        setMenu([/*#__PURE__*/jsx(MenuItem, {
+          label: "Select neighbors"
+        }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx(MenuItem, {
+          label: "Delete node(s)",
+          color: "danger",
+          icon: ICONS["delete"]
+        }), /*#__PURE__*/jsx(MenuItem, {
+          label: "Clear graph",
+          color: "danger",
+          icon: ICONS.clear
+        })]);
+      } else if ("edge" in e) {
+        setMenu([/*#__PURE__*/jsx(MenuItem, {
+          label: "Select neighbors"
+        }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx(MenuItem, {
+          label: "Clear graph",
+          color: "danger",
+          icon: ICONS.clear
+        })]);
+      } else {
+        setMenu([/*#__PURE__*/jsx(MenuItem, {
+          label: "Clear graph",
+          color: "danger",
+          icon: ICONS.clear
+        })]);
+      }
+      var virtual = {
+        getBoundingClientRect: function getBoundingClientRect() {
+          return {
+            width: 0,
+            height: 0,
+            x: e.event.x,
+            y: e.event.y,
+            top: e.event.y,
+            left: e.event.x,
+            right: e.event.x,
+            bottom: e.event.y
+          };
+        }
+      };
+      setIsOpen(true);
+      refs.setReference(virtual);
+      e.event.original.preventDefault();
+      return false;
+    };
+    (_sigma$instance = sigma.instance) === null || _sigma$instance === void 0 || _sigma$instance.on("rightClickNode", handleContextMenu);
+    (_sigma$instance2 = sigma.instance) === null || _sigma$instance2 === void 0 || _sigma$instance2.on("rightClickEdge", handleContextMenu);
+    (_sigma$instance3 = sigma.instance) === null || _sigma$instance3 === void 0 || _sigma$instance3.on("rightClickStage", handleContextMenu);
+    return function () {
+      var _sigma$instance4, _sigma$instance5, _sigma$instance6;
+      (_sigma$instance4 = sigma.instance) === null || _sigma$instance4 === void 0 || _sigma$instance4.off("rightClickNode", handleContextMenu);
+      (_sigma$instance5 = sigma.instance) === null || _sigma$instance5 === void 0 || _sigma$instance5.off("rightClickEdge", handleContextMenu);
+      (_sigma$instance6 = sigma.instance) === null || _sigma$instance6 === void 0 || _sigma$instance6.off("rightClickStage", handleContextMenu);
+    };
+  }, [sigma]);
+  return isOpen && /*#__PURE__*/jsx(FloatingPortal, {
+    root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined,
+    children: /*#__PURE__*/cloneElement( /*#__PURE__*/jsx(Menu, {
+      children: menu
+    }), _objectSpread(_objectSpread({}, getFloatingProps()), {}, {
+      style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
+        borderRadius: "var(--rounding)",
+        zIndex: "var(--z-popover)",
+        fontSize: "0.75rem"
+      }),
+      className: "bg-base outline rounded-capped shadow-lg",
+      ref: refs.setFloating,
+      onMouseUp: tryClosing.current
+    }))
+  });
+};
+
+export { GraphContextMenu };

package/dist/esm/packages/graph/src/components/Tools.js

@@ -0,0 +1,127 @@
+'use client';
+
+import { ButtonGroup, Button, Dropdown, Menu, MenuItem } from '@react-fabric/core';
+import { ICONS } from '../constants/index.js';
+import { useGraph } from './Context.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Tools = function Tools() {
+  var _useGraph = useGraph(),
+    dragSelector = _useGraph.dragSelector,
+    graph = _useGraph.graph,
+    selected = _useGraph.selected;
+    _useGraph.layoutRunning;
+    var resetViewport = _useGraph.resetViewport,
+    zoomIn = _useGraph.zoomIn,
+    zoomOut = _useGraph.zoomOut;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-nowrap outline absolute top-0 start-0 p-0 z-1 bg-base",
+    children: [/*#__PURE__*/jsxs(ButtonGroup, {
+      variant: "link",
+      children: [/*#__PURE__*/jsx(Button, {
+        "aria-label": "Home",
+        icon: ICONS.focus,
+        onClick: resetViewport
+      }), /*#__PURE__*/jsx(Button, {
+        "aria-label": "Zoomin",
+        icon: ICONS.zoomIn,
+        onClick: zoomIn
+      }), /*#__PURE__*/jsx(Button, {
+        "aria-label": "Zoomout",
+        icon: ICONS.zoomOut,
+        onClick: zoomOut
+      })]
+    }), /*#__PURE__*/jsxs(ButtonGroup, {
+      variant: "link",
+      children: [dragSelector.selectionMode !== "lasso" && /*#__PURE__*/jsx(Button, {
+        "aria-label": "lasso",
+        icon: ICONS.lasso,
+        disabled: !!dragSelector.selectionMode,
+        onClick: function onClick() {
+          return dragSelector.startLassoSelection();
+        }
+      }), dragSelector.selectionMode && /*#__PURE__*/jsx(Button, {
+        color: "danger",
+        "aria-label": "cancel",
+        icon: ICONS.cancel,
+        onClick: function onClick() {
+          return dragSelector.cancelSelection();
+        }
+      }), dragSelector.selectionMode !== "rectangle" && /*#__PURE__*/jsx(Button, {
+        "aria-label": "rectselect",
+        icon: ICONS.select,
+        disabled: !!dragSelector.selectionMode,
+        onClick: function onClick() {
+          return dragSelector.startRectangleSelection();
+        }
+      })]
+    }), /*#__PURE__*/jsx(ButtonGroup, {
+      variant: "link",
+      children: /*#__PURE__*/jsxs(Dropdown, {
+        children: [/*#__PURE__*/jsx(Button, {
+          "aria-label": "force",
+          variant: "link",
+          icon: "M19.5 17C19.37 17 19.24 17 19.11 17.04L17.5 13.79C17.95 13.34 18.25 12.71 18.25 12C18.25 10.62 17.13 9.5 15.75 9.5C15.62 9.5 15.5 9.5 15.36 9.54L13.73 6.29C14.21 5.84 14.5 5.21 14.5 4.5C14.5 3.12 13.38 2 12 2S9.5 3.12 9.5 4.5C9.5 5.21 9.79 5.84 10.26 6.29L8.64 9.54C8.5 9.5 8.38 9.5 8.25 9.5C6.87 9.5 5.75 10.62 5.75 12C5.75 12.71 6.05 13.34 6.5 13.79L4.89 17.04C4.76 17 4.63 17 4.5 17C3.12 17 2 18.12 2 19.5C2 20.88 3.12 22 4.5 22S7 20.88 7 19.5C7 18.8 6.71 18.16 6.24 17.71L7.86 14.46C8 14.5 8.12 14.5 8.25 14.5C8.38 14.5 8.5 14.5 8.64 14.46L10.27 17.71C9.8 18.16 9.5 18.8 9.5 19.5C9.5 20.88 10.62 22 12 22S14.5 20.88 14.5 19.5C14.5 18.12 13.38 17 12 17C11.87 17 11.74 17 11.61 17.04L10 13.79C10.46 13.34 10.75 12.71 10.75 12S10.46 10.66 10 10.21L11.61 6.96C11.74 7 11.87 7 12 7S12.26 7 12.39 6.96L14 10.21C13.55 10.66 13.25 11.3 13.25 12C13.25 13.38 14.37 14.5 15.75 14.5C15.88 14.5 16 14.5 16.14 14.46L17.77 17.71C17.3 18.16 17 18.8 17 19.5C17 20.88 18.12 22 19.5 22S22 20.88 22 19.5C22 18.12 20.88 17 19.5 17Z"
+        }), /*#__PURE__*/jsxs(Menu, {
+          className: "text-sm",
+          children: [/*#__PURE__*/jsx(MenuItem, {
+            label: "box",
+            onClick: function onClick() {
+              return graph.elkLayout("box");
+            }
+          }), /*#__PURE__*/jsx(MenuItem, {
+            label: "force",
+            onClick: function onClick() {
+              return graph.elkLayout("force");
+            }
+          }), /*#__PURE__*/jsx(MenuItem, {
+            label: "layered",
+            onClick: function onClick() {
+              return graph.elkLayout("layered");
+            }
+          }), /*#__PURE__*/jsx(MenuItem, {
+            label: "stress",
+            onClick: function onClick() {
+              return graph.elkLayout("stress");
+            }
+          }), /*#__PURE__*/jsx(MenuItem, {
+            label: "radial",
+            onClick: function onClick() {
+              return graph.elkLayout("radial");
+            }
+          }), /*#__PURE__*/jsx(MenuItem, {
+            label: "sporeOverlap",
+            onClick: function onClick() {
+              return graph.elkLayout("sporeOverlap");
+            }
+          }), /*#__PURE__*/jsx(MenuItem, {
+            label: "sporeCompaction",
+            onClick: function onClick() {
+              return graph.elkLayout("sporeCompaction");
+            }
+          })]
+        })]
+      })
+    }), /*#__PURE__*/jsxs(ButtonGroup, {
+      variant: "link",
+      children: [/*#__PURE__*/jsx(Button, {
+        "aria-label": "delete",
+        color: "danger",
+        icon: ICONS["delete"],
+        disabled: !selected.length,
+        onClick: function onClick() {
+          return graph.dropNodes(selected);
+        }
+      }), /*#__PURE__*/jsx(Button, {
+        "aria-label": "clear",
+        color: "danger",
+        icon: ICONS.clear,
+        onClick: function onClick() {
+          return graph.clear();
+        }
+      })]
+    })]
+  });
+};
+
+export { Tools };

package/dist/esm/packages/graph/src/components/Viewer.js

@@ -0,0 +1,57 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { Section } from '@react-fabric/core';
+import { GraphProvider, useGraph } from './Context.js';
+import { Tools } from './Tools.js';
+import { useRef, useEffect } from 'react';
+import { GraphContextMenu } from './ContextMenu.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Graph = function Graph() {
+  var _useGraph = useGraph(),
+    sigma = _useGraph.sigma,
+    graph = _useGraph.graph;
+  var handlesRef = useRef(null);
+  useEffect(function () {
+    // remove group handle if group node is dropped
+    var handler = function handler(_ref) {
+      var _handlesRef$current;
+      var key = _ref.key;
+      var handle = (_handlesRef$current = handlesRef.current) === null || _handlesRef$current === void 0 ? void 0 : _handlesRef$current.querySelector("[data-id=\"".concat(key, "\"]"));
+      handle === null || handle === void 0 || handle.remove();
+    };
+    graph.on("nodeDropped", handler);
+    return function () {
+      graph.off("nodeDropped", handler);
+    };
+  }, [graph]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "area-content relative bg-base graph-viewer",
+    children: [/*#__PURE__*/jsx("div", {
+      dir: "ltr",
+      ref: sigma.containerRef,
+      className: "absolute inset-0"
+    }), /*#__PURE__*/jsx("div", {
+      ref: handlesRef,
+      dir: "ltr",
+      onClick: function onClick(e) {
+        var key = e.target.dataset.id;
+        key && graph.toggleExpanded(key);
+      },
+      className: "absolute inset-0 overflow-hidden pointer-events-none sigma-groupHandles"
+    })]
+  });
+};
+var SigmaGraph = function SigmaGraph(props) {
+  return /*#__PURE__*/jsx(Section, {
+    className: "relative",
+    children: /*#__PURE__*/jsxs(GraphProvider, _objectSpread(_objectSpread({}, props), {}, {
+      children: [/*#__PURE__*/jsx(Tools, {}), /*#__PURE__*/jsx(Graph, {}), /*#__PURE__*/jsx(GraphContextMenu, {})]
+    }))
+  });
+};
+
+export { SigmaGraph };

package/dist/esm/packages/graph/src/constants/index.js

@@ -0,0 +1,16 @@
+'use client';
+
+var ICONS = {
+  focus: "M17 12C17 7.55 11.62 5.31 8.46 8.46C5.31 11.61 7.55 17 12 17C14.76 17 17 14.76 17 12M12 15C9.33 15 8 11.77 9.88 9.88C11.77 8 15 9.33 15 12C15 13.66 13.66 15 12 15M5 15H3V19C3 20.1 3.9 21 5 21H9V19H5M5 5H9V3H5C3.9 3 3 3.9 3 5V9H5M19 3H15V5H19V9H21V5C21 3.9 20.1 3 19 3M19 19H15V21H19C20.1 21 21 20.1 21 19V15H19",
+  zoomIn: "M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14M12,10H10V12H9V10H7V9H9V7H10V9H12V10Z",
+  zoomOut: "M15.5,14H14.71L14.43,13.73C15.41,12.59 16,11.11 16,9.5A6.5,6.5 0 0,0 9.5,3A6.5,6.5 0 0,0 3,9.5A6.5,6.5 0 0,0 9.5,16C11.11,16 12.59,15.41 13.73,14.43L14,14.71V15.5L19,20.5L20.5,19L15.5,14M9.5,14C7,14 5,12 5,9.5C5,7 7,5 9.5,5C12,5 14,7 14,9.5C14,12 12,14 9.5,14M7,9H12V10H7V9Z",
+  lasso: "M22 9C22 5.13 17.5 2 12 2C6.5 2 2 5.13 2 9C2 9.00843 2.00002 9.01685 2.00006 9.02527C2.00952 10.8953 3.06771 12.5956 4.78 13.85C4.78103 13.847 4.78207 13.844 4.7831 13.841C5.18858 14.1369 5.63069 14.408 6.10419 14.6507C6.03614 14.9227 6 15.2072 6 15.5C6 16.76 6.67 17.87 7.67 18.5C7.46 19.11 6.97 20.96 8.3 22.05C9.91 23.38 11.66 22.97 12.56 22.69C12.8116 22.6126 13.0655 22.5076 13.3395 22.3944C14.0563 22.0981 14.9105 21.7451 16.22 21.68C17.6764 21.5995 18.9321 21.8104 19.5651 21.9167C19.7188 21.9425 19.8358 21.9622 19.91 21.97C19.91 21.97 20.86 21.97 20.97 21.04C21.08 20.1 20.03 19.97 20.03 19.97C20.03 19.97 18.43 19.7 16.39 19.71C14.9823 19.7145 13.7447 20.1595 12.703 20.5341C11.4434 20.987 10.4704 21.3368 9.83 20.68C9.18 20 9.39 19.36 9.6 19C11.3416 18.9542 12.7471 17.6481 12.9693 15.9673C13.4921 15.9319 14.0034 15.8699 14.5 15.78C18.6753 15.0244 21.7995 12.4293 21.9907 9.30406C21.9969 9.20324 22 9.10187 22 9ZM20 9C20 10.2554 19.2572 11.4047 18.032 12.2843C16.6998 13.2393 14.7966 13.8752 12.6542 13.9835C12.0881 12.8109 10.887 12 9.5 12C8.57261 12 7.72834 12.3625 7.10143 12.9533C6.61638 12.7181 6.17578 12.4489 5.78883 12.1513L5.79 12.15C4.6875 11.3034 4.02105 10.2243 4.00049 9.05571C4.00016 9.03717 4 9.01859 4 9C4 6.24 7.58 4 12 4C16.42 4 20 6.24 20 9ZM10.9988 15.5603C10.9933 15.6993 10.9689 15.8333 10.9281 15.96C10.7345 16.5641 10.1694 17 9.5 17C8.67 17 8 16.33 8 15.5C8 15.4718 8.00078 15.4437 8.00231 15.4159C8.04595 14.6266 8.69981 14 9.5 14C10.3284 14 11 14.6716 11 15.5C11 15.5202 10.9996 15.5403 10.9988 15.5603Z",
+  select: "M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z",
+  cancel: "M3,16.74L7.76,12L3,7.26L7.26,3L12,7.76L16.74,3L21,7.26L16.24,12L21,16.74L16.74,21L12,16.24L7.26,21L3,16.74M12,13.41L16.74,18.16L18.16,16.74L13.41,12L18.16,7.26L16.74,5.84L12,10.59L7.26,5.84L5.84,7.26L10.59,12L5.84,16.74L7.26,18.16L12,13.41Z",
+  "delete": "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z",
+  clear: "M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z",
+  expand: "M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
+  collapse: "M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+};
+
+export { ICONS };