@macrostrat/feedback-components 1.1.10 → 2.0.0

package/dist/feedback/type-selector/index.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const main_module = require("./main.module.sass.cjs");
+const hyper = require("@macrostrat/hyper");
+const classNames = require("classnames");
+const select = require("@blueprintjs/select");
+;/* empty css                                                       */
+const h = hyper.styled(main_module.default);
+const TagListItem = (props) => {
+  let { active, selected, className, onSelect, item, children } = props;
+  className = classNames({ active, selected }, className);
+  const onClick = () => onSelect(item);
+  return h(
+    "div.item-container",
+    {
+      key: item.id,
+      className,
+      onClick
+    },
+    [
+      h("div.swatch", { style: { backgroundColor: item.color } }),
+      h("div.item", {}, item.name)
+    ]
+  );
+};
+function OmniboxSelector(props) {
+  const { onSelectItem, items, isOpen, onClose, onQueryChange } = props;
+  return h(select.Omnibar, {
+    onItemSelect: onSelectItem,
+    items,
+    onQueryChange,
+    resetOnSelect: false,
+    isOpen,
+    onClose,
+    itemRenderer(item, { handleClick, modifiers }) {
+      return h(TagListItem, {
+        key: item.id,
+        item,
+        onSelect: handleClick,
+        active: modifiers.active,
+        selected: modifiers.active
+      });
+    }
+  });
+}
+exports.OmniboxSelector = OmniboxSelector;
+//# sourceMappingURL=index.cjs.map

package/dist/feedback/type-selector/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/feedback/type-selector/index.ts"],"sourcesContent":["/**\n * Entity type selector\n */\n\nimport styles from \"./main.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { Omnibar, OmnibarProps } from \"@blueprintjs/select\";\nimport \"@blueprintjs/select/lib/css/blueprint-select.css\";\n\nconst h = hyper.styled(styles);\n\ninterface TagItemProps<T> {\n  selected: boolean;\n  active: boolean;\n  className?: string;\n  item: T;\n\n  onSelect(t: T): void;\n\n  children?: React.ReactElement;\n}\n\nconst TagListItem: React.ComponentType<TagItemProps<T>> = (props) => {\n  /** Render a tag for the omnibox list */\n  let { active, selected, className, onSelect, item, children } = props;\n  className = classNames({ active, selected }, className);\n  const onClick = () => onSelect(item);\n\n  return h(\n    \"div.item-container\",\n    {\n      key: item.id,\n      className,\n      onClick,\n    },\n    [\n      h(\"div.swatch\", { style: { backgroundColor: item.color } }),\n      h(\"div.item\", {}, item.name),\n    ],\n  );\n};\n\ntype BoxLifecycleProps<T> = Pick<OmnibarProps<T>, \"onClose\" | \"isOpen\">;\n\ninterface OmniboxProps<T> extends BoxLifecycleProps<T> {\n  items: T[];\n  selectedItem: T;\n  onSelectItem: (t: T) => void;\n  onQueryChange: (query: string) => void;\n  listItemComponent?: React.ComponentType<TagItemProps<T>>;\n}\n\nexport function OmniboxSelector<T>(props: OmniboxProps<T>) {\n  /** A general omnibox for annotation types */\n  const { onSelectItem, items, isOpen, onClose, onQueryChange } = props;\n\n  return h(Omnibar, {\n    onItemSelect: onSelectItem,\n    items,\n    onQueryChange,\n    resetOnSelect: false,\n    isOpen,\n    onClose,\n    itemRenderer(item: T, { handleClick, modifiers }) {\n      return h(TagListItem, {\n        key: item.id,\n        item,\n        onSelect: handleClick,\n        active: modifiers.active,\n        selected: modifiers.active,\n      });\n    },\n  });\n}\n"],"names":["styles","Omnibar"],"mappings":";;;;;;;AAYA,MAAM,IAAI,MAAM,OAAOA,mBAAM;AAa7B,MAAM,cAAoD,CAAC,UAAU;AAEnE,MAAI,EAAE,QAAQ,UAAU,WAAW,UAAU,MAAM,aAAa;AAChE,cAAY,WAAW,EAAE,QAAQ,SAAA,GAAY,SAAS;AACtD,QAAM,UAAU,MAAM,SAAS,IAAI;AAEnC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,KAAK,KAAK;AAAA,MACV;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE,EAAE,cAAc,EAAE,OAAO,EAAE,iBAAiB,KAAK,MAAA,GAAS;AAAA,MAC1D,EAAE,YAAY,IAAI,KAAK,IAAI;AAAA,IAAA;AAAA,EAC7B;AAEJ;AAYO,SAAS,gBAAmB,OAAwB;AAEzD,QAAM,EAAE,cAAc,OAAO,QAAQ,SAAS,kBAAkB;AAEhE,SAAO,EAAEC,OAAAA,SAAS;AAAA,IAChB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,aAAa,MAAS,EAAE,aAAa,aAAa;AAChD,aAAO,EAAE,aAAa;AAAA,QACpB,KAAK,KAAK;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,QAAQ,UAAU;AAAA,QAClB,UAAU,UAAU;AAAA,MAAA,CACrB;AAAA,IACH;AAAA,EAAA,CACD;AACH;;"}

package/dist/feedback/type-selector/index.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { OmnibarProps } from '@blueprintjs/select';
+interface TagItemProps<T> {
+    selected: boolean;
+    active: boolean;
+    className?: string;
+    item: T;
+    onSelect(t: T): void;
+    children?: React.ReactElement;
+}
+type BoxLifecycleProps<T> = Pick<OmnibarProps<T>, "onClose" | "isOpen">;
+interface OmniboxProps<T> extends BoxLifecycleProps<T> {
+    items: T[];
+    selectedItem: T;
+    onSelectItem: (t: T) => void;
+    onQueryChange: (query: string) => void;
+    listItemComponent?: React.ComponentType<TagItemProps<T>>;
+}
+export declare function OmniboxSelector<T>(props: OmniboxProps<T>): import('react').DetailedReactHTMLElement<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export {};

package/dist/feedback/type-selector/index.js

@@ -0,0 +1,47 @@
+import styles from "./main.module.sass.js";
+import hyper from "@macrostrat/hyper";
+import classNames from "classnames";
+import { Omnibar } from "@blueprintjs/select";
+/* empty css                                                     */
+const h = hyper.styled(styles);
+const TagListItem = (props) => {
+  let { active, selected, className, onSelect, item, children } = props;
+  className = classNames({ active, selected }, className);
+  const onClick = () => onSelect(item);
+  return h(
+    "div.item-container",
+    {
+      key: item.id,
+      className,
+      onClick
+    },
+    [
+      h("div.swatch", { style: { backgroundColor: item.color } }),
+      h("div.item", {}, item.name)
+    ]
+  );
+};
+function OmniboxSelector(props) {
+  const { onSelectItem, items, isOpen, onClose, onQueryChange } = props;
+  return h(Omnibar, {
+    onItemSelect: onSelectItem,
+    items,
+    onQueryChange,
+    resetOnSelect: false,
+    isOpen,
+    onClose,
+    itemRenderer(item, { handleClick, modifiers }) {
+      return h(TagListItem, {
+        key: item.id,
+        item,
+        onSelect: handleClick,
+        active: modifiers.active,
+        selected: modifiers.active
+      });
+    }
+  });
+}
+export {
+  OmniboxSelector
+};
+//# sourceMappingURL=index.js.map

package/dist/feedback/type-selector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/feedback/type-selector/index.ts"],"sourcesContent":["/**\n * Entity type selector\n */\n\nimport styles from \"./main.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { Omnibar, OmnibarProps } from \"@blueprintjs/select\";\nimport \"@blueprintjs/select/lib/css/blueprint-select.css\";\n\nconst h = hyper.styled(styles);\n\ninterface TagItemProps<T> {\n  selected: boolean;\n  active: boolean;\n  className?: string;\n  item: T;\n\n  onSelect(t: T): void;\n\n  children?: React.ReactElement;\n}\n\nconst TagListItem: React.ComponentType<TagItemProps<T>> = (props) => {\n  /** Render a tag for the omnibox list */\n  let { active, selected, className, onSelect, item, children } = props;\n  className = classNames({ active, selected }, className);\n  const onClick = () => onSelect(item);\n\n  return h(\n    \"div.item-container\",\n    {\n      key: item.id,\n      className,\n      onClick,\n    },\n    [\n      h(\"div.swatch\", { style: { backgroundColor: item.color } }),\n      h(\"div.item\", {}, item.name),\n    ],\n  );\n};\n\ntype BoxLifecycleProps<T> = Pick<OmnibarProps<T>, \"onClose\" | \"isOpen\">;\n\ninterface OmniboxProps<T> extends BoxLifecycleProps<T> {\n  items: T[];\n  selectedItem: T;\n  onSelectItem: (t: T) => void;\n  onQueryChange: (query: string) => void;\n  listItemComponent?: React.ComponentType<TagItemProps<T>>;\n}\n\nexport function OmniboxSelector<T>(props: OmniboxProps<T>) {\n  /** A general omnibox for annotation types */\n  const { onSelectItem, items, isOpen, onClose, onQueryChange } = props;\n\n  return h(Omnibar, {\n    onItemSelect: onSelectItem,\n    items,\n    onQueryChange,\n    resetOnSelect: false,\n    isOpen,\n    onClose,\n    itemRenderer(item: T, { handleClick, modifiers }) {\n      return h(TagListItem, {\n        key: item.id,\n        item,\n        onSelect: handleClick,\n        active: modifiers.active,\n        selected: modifiers.active,\n      });\n    },\n  });\n}\n"],"names":[],"mappings":";;;;;AAYA,MAAM,IAAI,MAAM,OAAO,MAAM;AAa7B,MAAM,cAAoD,CAAC,UAAU;AAEnE,MAAI,EAAE,QAAQ,UAAU,WAAW,UAAU,MAAM,aAAa;AAChE,cAAY,WAAW,EAAE,QAAQ,SAAA,GAAY,SAAS;AACtD,QAAM,UAAU,MAAM,SAAS,IAAI;AAEnC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,KAAK,KAAK;AAAA,MACV;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE,EAAE,cAAc,EAAE,OAAO,EAAE,iBAAiB,KAAK,MAAA,GAAS;AAAA,MAC1D,EAAE,YAAY,IAAI,KAAK,IAAI;AAAA,IAAA;AAAA,EAC7B;AAEJ;AAYO,SAAS,gBAAmB,OAAwB;AAEzD,QAAM,EAAE,cAAc,OAAO,QAAQ,SAAS,kBAAkB;AAEhE,SAAO,EAAE,SAAS;AAAA,IAChB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,aAAa,MAAS,EAAE,aAAa,aAAa;AAChD,aAAO,EAAE,aAAa;AAAA,QACpB,KAAK,KAAK;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,QAAQ,UAAU;AAAA,QAClB,UAAU,UAAU;AAAA,MAAA,CACrB;AAAA,IACH;AAAA,EAAA,CACD;AACH;"}

package/dist/feedback/type-selector/main.module.sass.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const selected = "_selected_fcffo_7";
+const swatch = "_swatch_fcffo_11";
+const styles = {
+  "item-container": "_item-container_fcffo_1",
+  selected,
+  swatch
+};
+exports.default = styles;
+exports.selected = selected;
+exports.swatch = swatch;
+//# sourceMappingURL=main.module.sass.cjs.map

package/dist/feedback/type-selector/main.module.sass.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.module.sass.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/feedback/type-selector/main.module.sass.js

@@ -0,0 +1,13 @@
+const selected = "_selected_fcffo_7";
+const swatch = "_swatch_fcffo_11";
+const styles = {
+  "item-container": "_item-container_fcffo_1",
+  selected,
+  swatch
+};
+export {
+  styles as default,
+  selected,
+  swatch
+};
+//# sourceMappingURL=main.module.sass.js.map

package/dist/feedback/type-selector/main.module.sass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.module.sass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/feedback/typelist.cjs

@@ -0,0 +1,293 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const feedback_module = require("./feedback.module.sass.cjs");
+const hyper = require("@macrostrat/hyper");
+const index = require("../extractions/index.cjs");
+const react = require("react");
+const core = require("@blueprintjs/core");
+const uiComponents = require("@macrostrat/ui-components");
+const dataSheet = require("@macrostrat/data-sheet");
+const h = hyper.styled(feedback_module.default);
+function TypeList({
+  types,
+  selected,
+  dispatch,
+  selectedNodes,
+  tree,
+  viewOnly
+}) {
+  const [selectedType, setSelectedType] = react.useState(null);
+  const isSelectedNodes = selectedNodes.length > 0;
+  const darkMode = uiComponents.useInDarkMode();
+  const luminance = darkMode ? 0.9 : 0.4;
+  return h("div.type-list-container", [
+    h(
+      "div.type-list-header",
+      isSelectedNodes && !selectedType ? "Change selected nodes to:" : "Entity Types"
+    ),
+    h(
+      "div.type-list",
+      Array.from(types.values()).map(
+        (type) => h(TypeTag, {
+          type,
+          luminance,
+          selectedType,
+          setSelectedType,
+          dispatch,
+          viewOnly,
+          tree,
+          selectedNodes,
+          selected,
+          isSelectedNodes
+        })
+      )
+    ),
+    h.if(!viewOnly)(AddType, { dispatch })
+  ]);
+}
+function collectMatchingIds(tree, id) {
+  const ids = [];
+  function traverse(node) {
+    if (node.type.id === id) {
+      ids.push(node.id);
+    }
+    if (Array.isArray(node.children)) {
+      node.children.forEach(traverse);
+    }
+  }
+  tree.forEach(traverse);
+  return ids;
+}
+function AddType({ dispatch }) {
+  const [overlayOpen, setOverlayOpen] = react.useState(false);
+  const saveHandler = (payload) => {
+    dispatch({
+      type: "add-entity-type",
+      payload
+    });
+    setOverlayOpen(false);
+  };
+  return h("div.add-type-container", [
+    h("div.add-type", { onClick: () => setOverlayOpen(true) }, [
+      h("p.add-type-text", "Add new type"),
+      h(core.Icon, { icon: "plus" })
+    ]),
+    h(TypeOverlay, {
+      setOverlayOpen,
+      overlayOpen,
+      title: "Add New Type",
+      saveHandler
+    })
+  ]);
+}
+function EditType({ dispatch, type }) {
+  const [editorOpen, setEditorOpen] = react.useState(false);
+  const saveHandler = (payload) => {
+    dispatch({
+      type: "update-entity-type",
+      payload
+    });
+    setEditorOpen(false);
+  };
+  return h("div.edit-type", [
+    h(core.Icon, {
+      icon: "edit",
+      className: "edit-icon",
+      onClick: (e) => {
+        e.stopPropagation();
+        setEditorOpen(true);
+      }
+    }),
+    h(TypeOverlay, {
+      setOverlayOpen: setEditorOpen,
+      overlayOpen: editorOpen,
+      originalType: type,
+      title: "Edit Type",
+      saveHandler
+    })
+  ]);
+}
+function TypeOverlay({
+  setOverlayOpen,
+  overlayOpen,
+  originalType,
+  title,
+  saveHandler
+}) {
+  const { name, description, color, id } = originalType || {};
+  const [nameInput, setNameInput] = react.useState(name || "");
+  const [descriptionInput, setDescriptionInput] = react.useState(description || "");
+  const [colorInput, setColorInput] = react.useState(color || "#fff");
+  return h(
+    core.Overlay2,
+    {
+      isOpen: overlayOpen
+    },
+    h(
+      "div.overlay-container",
+      h("div.add-type-overlay", [
+        h("h2.title", [
+          title,
+          h(core.Icon, {
+            icon: "cross",
+            className: "close-icon",
+            onClick: () => {
+              setOverlayOpen(false);
+            },
+            style: { cursor: "pointer", color: "red" }
+          })
+        ]),
+        h("div.form-group", [
+          h("div.text-inputs", [
+            h("div.form-field.name", [
+              h("p.label", "Name"),
+              h("input", {
+                type: "text",
+                placeholder: "Enter type name",
+                onChange: (e) => setNameInput(e.target.value),
+                value: nameInput
+              })
+            ]),
+            h("div.form-field.form-description", [
+              h("p.label", "Description"),
+              h("input", {
+                type: "text",
+                placeholder: "Enter type description",
+                onChange: (e) => setDescriptionInput(e.target.value),
+                value: descriptionInput
+              })
+            ])
+          ]),
+          h("div.form-field.color", [
+            h("p.label", "Color"),
+            h(dataSheet.ColorPicker, {
+              value: colorInput,
+              onChange: (color2) => setColorInput(color2),
+              style: { width: "100%" }
+            })
+          ])
+        ]),
+        h(
+          uiComponents.SaveButton,
+          {
+            className: "save-btn",
+            small: true,
+            onClick: () => saveHandler({
+              name: nameInput,
+              description: descriptionInput,
+              color: colorInput,
+              id
+            })
+          },
+          "Save changes"
+        )
+      ])
+    )
+  );
+}
+function TypeTag({
+  type,
+  luminance,
+  selectedType,
+  setSelectedType,
+  dispatch,
+  tree,
+  selectedNodes,
+  selected,
+  isSelectedNodes,
+  viewOnly
+}) {
+  const { color, name, id, description } = type;
+  uiComponents.useInDarkMode();
+  const isSelected = id === selected?.id && selectedNodes.length > 0;
+  const style = index.getTagStyle(color, {
+    active: isSelected,
+    highlighted: selectedNodes.length === 0
+  });
+  const payload = {
+    id,
+    name,
+    color,
+    description
+  };
+  const ids = collectMatchingIds(tree, id);
+  const handleTagClick = () => {
+    if (!isSelectedNodes && selectedType === null) {
+      if (ids.length > 0) {
+        setSelectedType(type);
+        dispatch({ type: "toggle-node-selected", payload: { ids } });
+      }
+    } else if (isSelectedNodes && selectedType === null) {
+      if (id === selected?.id && selectedNodes.length > 0) {
+        dispatch({
+          type: "toggle-node-selected",
+          payload: { ids: selectedNodes }
+        });
+      } else {
+        dispatch({ type: "select-entity-type", payload });
+      }
+    } else if (isSelectedNodes && selectedType.id === id) {
+      setSelectedType(null);
+      dispatch({ type: "toggle-node-selected", payload: { ids } });
+    } else if (isSelectedNodes && selectedType.id !== id) {
+      if (ids.length > 0) {
+        setSelectedType(type);
+        const oldIds = collectMatchingIds(tree, selectedType.id);
+        dispatch({ type: "toggle-node-selected", payload: { ids: oldIds } });
+        dispatch({ type: "toggle-node-selected", payload: { ids } });
+      }
+    } else {
+      console.warn("Unexpected state in TypeTag click handler", {
+        isSelectedNodes,
+        selectedType,
+        selectedNodes,
+        ids,
+        id,
+        selected
+      });
+    }
+  };
+  return h(
+    core.Popover,
+    {
+      autoFocus: false,
+      content: h("div.description", description || "No description available"),
+      interactionKind: "hover"
+    },
+    h(
+      "div.type-tag",
+      {
+        onClick: handleTagClick,
+        style: {
+          cursor: (ids.length > 0 || isSelectedNodes && !selectedType) && !viewOnly ? "pointer" : "",
+          color: "black",
+          backgroundColor: style.backgroundColor,
+          border: isSelected ? `1px solid var(--text-emphasized-color)` : `1px solid var(--background-color)`
+        }
+      },
+      h("div.type-container", [
+        h("div.type-name", name),
+        h.if(!viewOnly)("div.icons", [
+          h(EditType, {
+            dispatch,
+            type
+          }),
+          h(core.Icon, {
+            icon: "cross",
+            className: "delete-type-icon",
+            style: { color: "red", cursor: "pointer" },
+            onClick: (e) => {
+              e.stopPropagation();
+              dispatch({
+                type: "delete-entity-type",
+                payload: { id }
+              });
+            }
+          })
+        ])
+      ])
+    )
+  );
+}
+exports.TypeList = TypeList;
+//# sourceMappingURL=typelist.cjs.map

package/dist/feedback/typelist.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"typelist.cjs","sources":["../../src/feedback/typelist.ts"],"sourcesContent":["import styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nimport { getTagStyle } from \"../extractions\";\nimport { useState } from \"react\";\nimport { Icon, Popover, Overlay2 } from \"@blueprintjs/core\";\nimport { SaveButton } from \"@macrostrat/ui-components\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { ColorPicker } from \"@macrostrat/data-sheet\";\n\nconst h = hyper.styled(styles);\n\nexport function TypeList({\n  types,\n  selected,\n  dispatch,\n  selectedNodes,\n  tree,\n  viewOnly,\n}) {\n  const [selectedType, setSelectedType] = useState(null);\n  const isSelectedNodes = selectedNodes.length > 0;\n  const darkMode = useInDarkMode();\n  const luminance = darkMode ? 0.9 : 0.4;\n\n  return h(\"div.type-list-container\", [\n    h(\n      \"div.type-list-header\",\n      isSelectedNodes && !selectedType\n        ? \"Change selected nodes to:\"\n        : \"Entity Types\",\n    ),\n    h(\n      \"div.type-list\",\n      Array.from(types.values()).map((type) =>\n        h(TypeTag, {\n          type,\n          luminance,\n          selectedType,\n          setSelectedType,\n          dispatch,\n          viewOnly,\n          tree,\n          selectedNodes,\n          selected,\n          isSelectedNodes,\n        }),\n      ),\n    ),\n    h.if(!viewOnly)(AddType, { dispatch }),\n  ]);\n}\n\nfunction collectMatchingIds(tree, id) {\n  const ids = [];\n\n  function traverse(node) {\n    if (node.type.id === id) {\n      ids.push(node.id);\n    }\n    if (Array.isArray(node.children)) {\n      node.children.forEach(traverse);\n    }\n  }\n\n  tree.forEach(traverse);\n  return ids;\n}\n\nfunction AddType({ dispatch }) {\n  const [overlayOpen, setOverlayOpen] = useState(false);\n\n  const saveHandler = (payload) => {\n    dispatch({\n      type: \"add-entity-type\",\n      payload,\n    });\n    setOverlayOpen(false);\n  };\n\n  return h(\"div.add-type-container\", [\n    h(\"div.add-type\", { onClick: () => setOverlayOpen(true) }, [\n      h(\"p.add-type-text\", \"Add new type\"),\n      h(Icon, { icon: \"plus\" }),\n    ]),\n    h(TypeOverlay, {\n      setOverlayOpen,\n      overlayOpen,\n      title: \"Add New Type\",\n      saveHandler,\n    }),\n  ]);\n}\n\nfunction EditType({ dispatch, type }) {\n  const [editorOpen, setEditorOpen] = useState(false);\n\n  const saveHandler = (payload) => {\n    dispatch({\n      type: \"update-entity-type\",\n      payload,\n    });\n    setEditorOpen(false);\n  };\n\n  return h(\"div.edit-type\", [\n    h(Icon, {\n      icon: \"edit\",\n      className: \"edit-icon\",\n      onClick: (e) => {\n        e.stopPropagation();\n        setEditorOpen(true);\n      },\n    }),\n    h(TypeOverlay, {\n      setOverlayOpen: setEditorOpen,\n      overlayOpen: editorOpen,\n      originalType: type,\n      title: \"Edit Type\",\n      saveHandler,\n    }),\n  ]);\n}\n\nfunction TypeOverlay({\n  setOverlayOpen,\n  overlayOpen,\n  originalType,\n  title,\n  saveHandler,\n}) {\n  const { name, description, color, id } = originalType || {};\n\n  const [nameInput, setNameInput] = useState(name || \"\");\n  const [descriptionInput, setDescriptionInput] = useState(description || \"\");\n  const [colorInput, setColorInput] = useState(color || \"#fff\");\n\n  return h(\n    Overlay2,\n    {\n      isOpen: overlayOpen,\n    },\n    h(\n      \"div.overlay-container\",\n      h(\"div.add-type-overlay\", [\n        h(\"h2.title\", [\n          title,\n          h(Icon, {\n            icon: \"cross\",\n            className: \"close-icon\",\n            onClick: () => {\n              setOverlayOpen(false);\n            },\n            style: { cursor: \"pointer\", color: \"red\" },\n          }),\n        ]),\n        h(\"div.form-group\", [\n          h(\"div.text-inputs\", [\n            h(\"div.form-field.name\", [\n              h(\"p.label\", \"Name\"),\n              h(\"input\", {\n                type: \"text\",\n                placeholder: \"Enter type name\",\n                onChange: (e) => setNameInput(e.target.value),\n                value: nameInput,\n              }),\n            ]),\n            h(\"div.form-field.form-description\", [\n              h(\"p.label\", \"Description\"),\n              h(\"input\", {\n                type: \"text\",\n                placeholder: \"Enter type description\",\n                onChange: (e) => setDescriptionInput(e.target.value),\n                value: descriptionInput,\n              }),\n            ]),\n          ]),\n          h(\"div.form-field.color\", [\n            h(\"p.label\", \"Color\"),\n            h(ColorPicker, {\n              value: colorInput,\n              onChange: (color) => setColorInput(color),\n              style: { width: \"100%\" },\n            }),\n          ]),\n        ]),\n        h(\n          SaveButton,\n          {\n            className: \"save-btn\",\n            small: true,\n            onClick: () =>\n              saveHandler({\n                name: nameInput,\n                description: descriptionInput,\n                color: colorInput,\n                id,\n              }),\n          },\n          \"Save changes\",\n        ),\n      ]),\n    ),\n  );\n}\n\nfunction TypeTag({\n  type,\n  luminance,\n  selectedType,\n  setSelectedType,\n  dispatch,\n  tree,\n  selectedNodes,\n  selected,\n  isSelectedNodes,\n  viewOnly,\n}) {\n  const { color, name, id, description } = type;\n  const darkMode = useInDarkMode();\n  const isSelected = id === selected?.id && selectedNodes.length > 0;\n\n  const style = getTagStyle(color, {\n    active: isSelected,\n    highlighted: selectedNodes.length === 0,\n  });\n\n  const payload = {\n    id,\n    name,\n    color,\n    description,\n  };\n\n  const ids = collectMatchingIds(tree, id);\n\n  const handleTagClick = () => {\n    if (!isSelectedNodes && selectedType === null) {\n      if (ids.length > 0) {\n        setSelectedType(type);\n        dispatch({ type: \"toggle-node-selected\", payload: { ids } });\n      }\n    } else if (isSelectedNodes && selectedType === null) {\n      if (id === selected?.id && selectedNodes.length > 0) {\n        dispatch({\n          type: \"toggle-node-selected\",\n          payload: { ids: selectedNodes },\n        });\n      } else {\n        dispatch({ type: \"select-entity-type\", payload });\n      }\n    } else if (isSelectedNodes && selectedType.id === id) {\n      setSelectedType(null);\n      dispatch({ type: \"toggle-node-selected\", payload: { ids } });\n    } else if (isSelectedNodes && selectedType.id !== id) {\n      if (ids.length > 0) {\n        setSelectedType(type);\n        const oldIds = collectMatchingIds(tree, selectedType.id);\n\n        dispatch({ type: \"toggle-node-selected\", payload: { ids: oldIds } });\n        dispatch({ type: \"toggle-node-selected\", payload: { ids } });\n      }\n    } else {\n      console.warn(\"Unexpected state in TypeTag click handler\", {\n        isSelectedNodes,\n        selectedType,\n        selectedNodes,\n        ids,\n        id,\n        selected,\n      });\n    }\n  };\n\n  return h(\n    Popover,\n    {\n      autoFocus: false,\n      content: h(\"div.description\", description || \"No description available\"),\n      interactionKind: \"hover\",\n    },\n    h(\n      \"div.type-tag\",\n      {\n        onClick: handleTagClick,\n        style: {\n          cursor:\n            (ids.length > 0 || (isSelectedNodes && !selectedType)) && !viewOnly\n              ? \"pointer\"\n              : \"\",\n          color: \"black\",\n          backgroundColor: style.backgroundColor,\n          border: isSelected\n            ? `1px solid var(--text-emphasized-color)`\n            : `1px solid var(--background-color)`,\n        },\n      },\n      h(\"div.type-container\", [\n        h(\"div.type-name\", name),\n        h.if(!viewOnly)(\"div.icons\", [\n          h(EditType, {\n            dispatch,\n            type,\n          }),\n          h(Icon, {\n            icon: \"cross\",\n            className: \"delete-type-icon\",\n            style: { color: \"red\", cursor: \"pointer\" },\n            onClick: (e) => {\n              e.stopPropagation();\n              dispatch({\n                type: \"delete-entity-type\",\n                payload: { id },\n              });\n            },\n          }),\n        ]),\n      ]),\n    ),\n  );\n}\n"],"names":["styles","useState","useInDarkMode","Icon","Overlay2","ColorPicker","color","SaveButton","getTagStyle","Popover"],"mappings":"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"}

package/dist/feedback/typelist.d.ts

@@ -0,0 +1,8 @@
+export declare function TypeList({ types, selected, dispatch, selectedNodes, tree, viewOnly, }: {
+    types: any;
+    selected: any;
+    dispatch: any;
+    selectedNodes: any;
+    tree: any;
+    viewOnly: any;
+}): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;