@teselagen/ui 0.4.11 → 0.4.14

package/src/TagSelect/index.js

@@ -0,0 +1,69 @@
+import { Button, InputGroup, Popover } from "@blueprintjs/core";
+import React from "react";
+
+import Tag from "../Tag";
+import "./style.css";
+import { useState } from "react";
+import { itemListPredicate } from "../TgSelect";
+
+export default ({ value = {}, options = [], onChange }) => {
+  const [open, setOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const filteredOptions = itemListPredicate(searchTerm, options, false);
+
+  return (
+    <Popover
+      isOpen={open}
+      onInteraction={setOpen}
+      content={
+        <div className="tag-select-popover">
+          <InputGroup
+            rightElement={
+              // clear button
+              searchTerm ? (
+                <Button
+                  icon="cross"
+                  minimal
+                  onClick={() => setSearchTerm("")}
+                />
+              ) : null
+            }
+            type="text"
+            placeholder="Search..."
+            autoFocus
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+          />
+          <div className="tag-select-popover-inner">
+            {filteredOptions.map(option => {
+              return (
+                <Tag
+                  key={option.name}
+                  onClick={() => {
+                    onChange(option);
+                    setOpen(false);
+                  }}
+                  clickable
+                  style={{ maxWidth: 150 }}
+                  {...convertTagVals(option)}
+                  doNotFillWidth
+                ></Tag>
+              );
+            })}
+          </div>
+        </div>
+      }
+    >
+      <Tag style={{ maxWidth: 150 }} clickable {...convertTagVals(value)}></Tag>
+    </Popover>
+  );
+};
+
+function convertTagVals(tagVals) {
+  return {
+    ...tagVals,
+
+    name: tagVals.name || tagVals.label
+  };
+}

package/src/TagSelect/style.css

@@ -0,0 +1,13 @@
+.tag-select-popover {
+  padding: 10px;
+}
+
+.tag-select-popover-inner {
+  max-height: 150px;
+  overflow: auto;
+  display: grid;
+  padding-top: 10px;
+  grid-column-gap: 5px;
+  row-gap: 8px;
+  grid-template-columns: max-content max-content;
+}

package/src/TgSelect/index.js

@@ -403,22 +403,6 @@ class TgSelect extends React.Component {
         {...rest}
       />
     );
-    if (backgroundColor) {
-      return (
-        <div
-          style={{
-            backgroundColor: backgroundColor,
-            borderRadius: "4px 4px 4px 4px",
-            overflow: "hidden",
-            width: "fit-content",
-            color: "white",
-            border: "2px solid white"
-          }}
-        >
-          {toRet}
-        </div>
-      );
-    }
     return toRet;
   }
 }

package/src/TgSelect/style.css

@@ -2,6 +2,13 @@
   width: 100%;
   min-width: 170px;
 }
+.tg-select.tg-select-as-tag {
+  /* background-color: red; */
+  border-radius: 4px;
+  width: fit-content;
+  color: white;
+  border: 2px solid white;
+}
 .tg-select.tg-select-as-tag .bp3-tag.bp3-minimal.bp3-intent-primary {
   color: white !important;
 }

package/src/utils/menuUtils.js

@@ -23,7 +23,7 @@ import {
 import fuzzysearch from "fuzzysearch";
 import classNames from "classnames";
 // https://github.com/palantir/blueprint/issues/2820
-function MenuItemLink({ text, onClick, icon, navTo, active }) {
+export function MenuItemLink({ text, onClick, icon, navTo, active }) {
   const handleLinkClick = e => {
     e.target.closest(`.${Classes.POPOVER_DISMISS}`).click();
   };
@@ -34,7 +34,8 @@ function MenuItemLink({ text, onClick, icon, navTo, active }) {
         onClick={handleLinkClick}
         to={navTo}
         className={classNames(Classes.MENU_ITEM, {
-          [Classes.ACTIVE]: active
+          [Classes.ACTIVE]: active,
+          [Classes.INTENT_PRIMARY]: active
         })}
       >
         {icon && <Icon icon={icon} />}

package/style.css

@@ -9086,6 +9086,13 @@ button:not(:disabled):active {
   width: 100%;
   min-width: 170px;
 }
+.tg-select.tg-select-as-tag {
+  /* background-color: red; */
+  border-radius: 4px;
+  width: fit-content;
+  color: white;
+  border: 2px solid white;
+}
 .tg-select.tg-select-as-tag .bp3-tag.bp3-minimal.bp3-intent-primary {
   color: white !important;
 }

package/utils/menuUtils.d.ts

@@ -1,3 +1,10 @@
+export function MenuItemLink({ text, onClick, icon, navTo, active }: {
+    text: any;
+    onClick: any;
+    icon: any;
+    navTo: any;
+    active: any;
+}): import('../../../../node_modules/react/jsx-runtime').JSX.Element;
 export function showCommandContextMenu(menuDef: any, commands: any, config: any, event: any, onClose: any, context: any): void;
 export function showContextMenu(menuDef: any, enhancers: any, event: any, onClose: any, context: any, menuComp?: typeof Menu): void;
 export function getStringFromReactComponent(comp: any): any;