@teselagen/ui 0.4.6 → 0.4.8

package/index.cjs.js

@@ -14143,25 +14143,16 @@ var toString$5 = {}.toString;
 var _cof = /* @__PURE__ */ __name(function(it) {
   return toString$5.call(it).slice(8, -1);
 }, "_cof");
-var _iobject;
-var hasRequired_iobject;
-function require_iobject() {
-  if (hasRequired_iobject)
-    return _iobject;
-  hasRequired_iobject = 1;
-  var cof2 = _cof;
-  _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
-    return cof2(it) == "String" ? it.split("") : Object(it);
-  };
-  return _iobject;
-}
-__name(require_iobject, "require_iobject");
+var cof$2 = _cof;
+var _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
+  return cof$2(it) == "String" ? it.split("") : Object(it);
+};
 var _defined = /* @__PURE__ */ __name(function(it) {
   if (it == void 0)
     throw TypeError("Can't call method on  " + it);
   return it;
 }, "_defined");
-var IObject = require_iobject();
+var IObject = _iobject;
 var defined$2 = _defined;
 var _toIobject = /* @__PURE__ */ __name(function(it) {
   return IObject(defined$2(it));
@@ -14282,7 +14273,7 @@ function require_objectAssign() {
   var gOPS2 = _objectGops;
   var pIE2 = require_objectPie();
   var toObject2 = _toObject;
-  var IObject2 = require_iobject();
+  var IObject2 = _iobject;
   var $assign = Object.assign;
   _objectAssign = !$assign || _fails(function() {
     var A2 = {};
@@ -35926,8 +35917,9 @@ const _TgSelect = class _TgSelect extends React$1.Component {
   }
   render() {
     var _b2;
-    const _a2 = this.props, {
+    let _a2 = this.props, {
       multi,
+      asTag,
       options,
       unfilteredOptions,
       value,
@@ -35940,6 +35932,10 @@ const _TgSelect = class _TgSelect extends React$1.Component {
       noResultsText,
       noResults: _noResults,
       inputProps,
+      backgroundColor,
+      doNotFillWidth,
+      noToggle,
+      small,
       placeholder,
       isLoading,
       disallowClear,
@@ -35951,6 +35947,7 @@ const _TgSelect = class _TgSelect extends React$1.Component {
       renderCreateNewOption: _renderCreateNewOption = renderCreateNewOption$1
     } = _a2, rest = __objRest(_a2, [
       "multi",
+      "asTag",
       "options",
       "unfilteredOptions",
       "value",
@@ -35964,6 +35961,10 @@ const _TgSelect = class _TgSelect extends React$1.Component {
       "noResultsText",
       "noResults",
       "inputProps",
+      "backgroundColor",
+      "doNotFillWidth",
+      "noToggle",
+      "small",
       "placeholder",
       "isLoading",
       "disallowClear",
@@ -35974,6 +35975,14 @@ const _TgSelect = class _TgSelect extends React$1.Component {
       "resetOnSelect",
       "renderCreateNewOption"
     ]);
+    if (asTag) {
+      small = true;
+      placeholder = " ";
+      backgroundColor = "red";
+      disallowClear = true;
+      doNotFillWidth = true;
+      noToggle = true;
+    }
     let noResults = _noResults;
     if (noResults === void 0)
       noResults = noResultsDefault;
@@ -35987,7 +35996,7 @@ const _TgSelect = class _TgSelect extends React$1.Component {
         minimal: true,
         onClick: this.handleClear
       }
-    ), noResults !== null && /* @__PURE__ */ React$1.createElement(
+    ), noResults !== null && !noToggle && /* @__PURE__ */ React$1.createElement(
       core$5.Button,
       {
         onClick: (e2) => {
@@ -36011,7 +36020,7 @@ const _TgSelect = class _TgSelect extends React$1.Component {
         (opt) => opt && opt.value === (value2 && value2.value || value2)
       );
     });
-    return /* @__PURE__ */ React$1.createElement(
+    const toRet = /* @__PURE__ */ React$1.createElement(
       select.MultiSelect,
       __spreadValues(__spreadValues({
         onActiveItemChange: this.handleActiveItemChange,
@@ -36025,7 +36034,10 @@ const _TgSelect = class _TgSelect extends React$1.Component {
           captureDismiss: true,
           minimal: true,
           className: classNames("tg-select", "tg-stop-dialog-form-enter", {
-            "tg-single-select": !multi
+            "tg-single-select": !multi,
+            "tg-select-as-tag": asTag,
+            "do-not-fill-width": doNotFillWidth,
+            "tg-small": small
           }),
           wrapperTagName: "div",
           canEscapeKeyClose: true,
@@ -36080,6 +36092,23 @@ const _TgSelect = class _TgSelect extends React$1.Component {
         })
       }), rest)
     );
+    if (backgroundColor) {
+      return /* @__PURE__ */ React$1.createElement(
+        "div",
+        {
+          style: {
+            backgroundColor,
+            borderRadius: "4px 4px 4px 4px",
+            overflow: "hidden",
+            width: "fit-content",
+            color: "white",
+            border: "2px solid white"
+          }
+        },
+        toRet
+      );
+    }
+    return toRet;
   }
 };
 __name(_TgSelect, "TgSelect");
@@ -70926,9 +70955,18 @@ function MenuItemLink({ text: text2, onClick, icon, navTo, active: active3 }) {
   const handleLinkClick = /* @__PURE__ */ __name((e2) => {
     e2.target.closest(`.${core$5.Classes.POPOVER_DISMISS}`).click();
   }, "handleLinkClick");
-  return /* @__PURE__ */ React$1.createElement("li", { className: core$5.Classes.POPOVER_DISMISS, onClick }, /* @__PURE__ */ React$1.createElement(Link, { onClick: handleLinkClick, to: navTo, className: classNames(core$5.Classes.MENU_ITEM, {
-    [core$5.Classes.ACTIVE]: active3
-  }) }, icon && /* @__PURE__ */ React$1.createElement(core$5.Icon, { icon }), /* @__PURE__ */ React$1.createElement("div", { className: "bp3-text-overflow-ellipsis bp3-fill" }, text2)));
+  return /* @__PURE__ */ React$1.createElement("li", { className: core$5.Classes.POPOVER_DISMISS, onClick }, /* @__PURE__ */ React$1.createElement(
+    Link,
+    {
+      onClick: handleLinkClick,
+      to: navTo,
+      className: classNames(core$5.Classes.MENU_ITEM, {
+        [core$5.Classes.ACTIVE]: active3
+      })
+    },
+    icon && /* @__PURE__ */ React$1.createElement(core$5.Icon, { icon }),
+    /* @__PURE__ */ React$1.createElement("div", { className: "bp3-text-overflow-ellipsis bp3-fill" }, text2)
+  ));
 }
 __name(MenuItemLink, "MenuItemLink");
 const EnhancedMenuItem = compose(

package/index.es.js

@@ -14125,25 +14125,16 @@ var toString$5 = {}.toString;
 var _cof = /* @__PURE__ */ __name(function(it) {
   return toString$5.call(it).slice(8, -1);
 }, "_cof");
-var _iobject;
-var hasRequired_iobject;
-function require_iobject() {
-  if (hasRequired_iobject)
-    return _iobject;
-  hasRequired_iobject = 1;
-  var cof2 = _cof;
-  _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
-    return cof2(it) == "String" ? it.split("") : Object(it);
-  };
-  return _iobject;
-}
-__name(require_iobject, "require_iobject");
+var cof$2 = _cof;
+var _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
+  return cof$2(it) == "String" ? it.split("") : Object(it);
+};
 var _defined = /* @__PURE__ */ __name(function(it) {
   if (it == void 0)
     throw TypeError("Can't call method on  " + it);
   return it;
 }, "_defined");
-var IObject = require_iobject();
+var IObject = _iobject;
 var defined$2 = _defined;
 var _toIobject = /* @__PURE__ */ __name(function(it) {
   return IObject(defined$2(it));
@@ -14264,7 +14255,7 @@ function require_objectAssign() {
   var gOPS2 = _objectGops;
   var pIE2 = require_objectPie();
   var toObject2 = _toObject;
-  var IObject2 = require_iobject();
+  var IObject2 = _iobject;
   var $assign = Object.assign;
   _objectAssign = !$assign || _fails(function() {
     var A2 = {};
@@ -35908,8 +35899,9 @@ const _TgSelect = class _TgSelect extends React__default.Component {
   }
   render() {
     var _b2;
-    const _a2 = this.props, {
+    let _a2 = this.props, {
       multi,
+      asTag,
       options,
       unfilteredOptions,
       value,
@@ -35922,6 +35914,10 @@ const _TgSelect = class _TgSelect extends React__default.Component {
       noResultsText,
       noResults: _noResults,
       inputProps,
+      backgroundColor,
+      doNotFillWidth,
+      noToggle,
+      small,
       placeholder,
       isLoading,
       disallowClear,
@@ -35933,6 +35929,7 @@ const _TgSelect = class _TgSelect extends React__default.Component {
       renderCreateNewOption: _renderCreateNewOption = renderCreateNewOption$1
     } = _a2, rest = __objRest(_a2, [
       "multi",
+      "asTag",
       "options",
       "unfilteredOptions",
       "value",
@@ -35946,6 +35943,10 @@ const _TgSelect = class _TgSelect extends React__default.Component {
       "noResultsText",
       "noResults",
       "inputProps",
+      "backgroundColor",
+      "doNotFillWidth",
+      "noToggle",
+      "small",
       "placeholder",
       "isLoading",
       "disallowClear",
@@ -35956,6 +35957,14 @@ const _TgSelect = class _TgSelect extends React__default.Component {
       "resetOnSelect",
       "renderCreateNewOption"
     ]);
+    if (asTag) {
+      small = true;
+      placeholder = " ";
+      backgroundColor = "red";
+      disallowClear = true;
+      doNotFillWidth = true;
+      noToggle = true;
+    }
     let noResults = _noResults;
     if (noResults === void 0)
       noResults = noResultsDefault;
@@ -35969,7 +35978,7 @@ const _TgSelect = class _TgSelect extends React__default.Component {
         minimal: true,
         onClick: this.handleClear
       }
-    ), noResults !== null && /* @__PURE__ */ React__default.createElement(
+    ), noResults !== null && !noToggle && /* @__PURE__ */ React__default.createElement(
       Button,
       {
         onClick: (e2) => {
@@ -35993,7 +36002,7 @@ const _TgSelect = class _TgSelect extends React__default.Component {
         (opt) => opt && opt.value === (value2 && value2.value || value2)
       );
     });
-    return /* @__PURE__ */ React__default.createElement(
+    const toRet = /* @__PURE__ */ React__default.createElement(
       MultiSelect,
       __spreadValues(__spreadValues({
         onActiveItemChange: this.handleActiveItemChange,
@@ -36007,7 +36016,10 @@ const _TgSelect = class _TgSelect extends React__default.Component {
           captureDismiss: true,
           minimal: true,
           className: classNames("tg-select", "tg-stop-dialog-form-enter", {
-            "tg-single-select": !multi
+            "tg-single-select": !multi,
+            "tg-select-as-tag": asTag,
+            "do-not-fill-width": doNotFillWidth,
+            "tg-small": small
           }),
           wrapperTagName: "div",
           canEscapeKeyClose: true,
@@ -36062,6 +36074,23 @@ const _TgSelect = class _TgSelect extends React__default.Component {
         })
       }), rest)
     );
+    if (backgroundColor) {
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          style: {
+            backgroundColor,
+            borderRadius: "4px 4px 4px 4px",
+            overflow: "hidden",
+            width: "fit-content",
+            color: "white",
+            border: "2px solid white"
+          }
+        },
+        toRet
+      );
+    }
+    return toRet;
   }
 };
 __name(_TgSelect, "TgSelect");
@@ -70908,9 +70937,18 @@ function MenuItemLink({ text: text2, onClick, icon, navTo, active: active3 }) {
   const handleLinkClick = /* @__PURE__ */ __name((e2) => {
     e2.target.closest(`.${Classes.POPOVER_DISMISS}`).click();
   }, "handleLinkClick");
-  return /* @__PURE__ */ React__default.createElement("li", { className: Classes.POPOVER_DISMISS, onClick }, /* @__PURE__ */ React__default.createElement(Link, { onClick: handleLinkClick, to: navTo, className: classNames(Classes.MENU_ITEM, {
-    [Classes.ACTIVE]: active3
-  }) }, icon && /* @__PURE__ */ React__default.createElement(Icon, { icon }), /* @__PURE__ */ React__default.createElement("div", { className: "bp3-text-overflow-ellipsis bp3-fill" }, text2)));
+  return /* @__PURE__ */ React__default.createElement("li", { className: Classes.POPOVER_DISMISS, onClick }, /* @__PURE__ */ React__default.createElement(
+    Link,
+    {
+      onClick: handleLinkClick,
+      to: navTo,
+      className: classNames(Classes.MENU_ITEM, {
+        [Classes.ACTIVE]: active3
+      })
+    },
+    icon && /* @__PURE__ */ React__default.createElement(Icon, { icon }),
+    /* @__PURE__ */ React__default.createElement("div", { className: "bp3-text-overflow-ellipsis bp3-fill" }, text2)
+  ));
 }
 __name(MenuItemLink, "MenuItemLink");
 const EnhancedMenuItem = compose(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "main": "./src/index.js",
   "exports": {
     ".": {

package/src/TgSelect/index.js

@@ -223,8 +223,9 @@ class TgSelect extends React.Component {
   };
 
   render() {
-    const {
+    let {
       multi,
+      asTag,
       options,
       unfilteredOptions,
       value,
@@ -237,6 +238,10 @@ class TgSelect extends React.Component {
       noResultsText,
       noResults: _noResults,
       inputProps,
+      backgroundColor,
+      doNotFillWidth,
+      noToggle,
+      small,
       placeholder,
       isLoading,
       disallowClear,
@@ -248,6 +253,14 @@ class TgSelect extends React.Component {
       renderCreateNewOption: _renderCreateNewOption = renderCreateNewOption,
       ...rest
     } = this.props;
+    if (asTag) {
+      small = true;
+      placeholder = " ";
+      backgroundColor = "red";
+      disallowClear = true;
+      doNotFillWidth = true;
+      noToggle = true;
+    }
     let noResults = _noResults;
 
     // Null is also a valid value for a React Component, noResultsDefault should only be appplied when noResults is undefined
@@ -270,7 +283,7 @@ class TgSelect extends React.Component {
             onClick={this.handleClear}
           />
         )}
-        {noResults !== null && (
+        {noResults !== null && !noToggle && (
           <Button
             onClick={e => {
               if (this.state.isOpen) {
@@ -301,7 +314,7 @@ class TgSelect extends React.Component {
         opt => opt && opt.value === ((value && value.value) || value)
       );
     });
-    return (
+    const toRet = (
       <MultiSelect
         onActiveItemChange={this.handleActiveItemChange}
         closeOnSelect={!multi}
@@ -318,7 +331,10 @@ class TgSelect extends React.Component {
           captureDismiss: true,
           minimal: true,
           className: classNames("tg-select", "tg-stop-dialog-form-enter", {
-            "tg-single-select": !multi
+            "tg-single-select": !multi,
+            "tg-select-as-tag": asTag,
+            "do-not-fill-width": doNotFillWidth,
+            "tg-small": small
           }),
           wrapperTagName: "div",
           canEscapeKeyClose: true,
@@ -387,6 +403,23 @@ 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,26 @@
   width: 100%;
   min-width: 170px;
 }
+.tg-select.tg-select-as-tag .bp3-tag.bp3-minimal.bp3-intent-primary {
+  color: white !important;
+}
+.tg-select.do-not-fill-width {
+  width: auto;
+  min-width: 50px;
+}
+.tg-select.tg-small .bp3-input {
+  min-height: 25px;
+  height: 25px;
+}
+.tg-select.tg-small input {
+  line-height: 10.5px;
+}
+.tg-select.tg-small .bp3-tag-input .bp3-input-ghost {
+  line-height: 10.5px;
+}
+.tg-select.tg-small .bp3-tag-input .bp3-tag-input-values {
+  margin-top: 2px;
+}
 .tg-select input {
   font-size: 14px;
 }

package/src/style.css

@@ -246,3 +246,17 @@ button:not(:disabled):active {
 .bp3-dialog-header .bp3-heading {
   width: 10px; /* tnw: this is a hack to prevent the dialog title from causing the dialog width to expand larger than the dialog content*/
 }
+
+/* to fix tooltip styling issue - https://github.com/palantir/blueprint/issues/3430 */
+.bp3-popover[style*="transform-origin"][style*="bottom"] .bp3-popover-arrow {
+  transform: translate(0, -0.5px);
+}
+.bp3-popover[style*="transform-origin"][style*="left"] .bp3-popover-arrow {
+  transform: translate(0.5px, 0);
+}
+.bp3-popover[style*="transform-origin"][style*="top"] .bp3-popover-arrow {
+  transform: translate(0, 0.5px);
+}
+.bp3-popover[style*="transform-origin"][style*="right"] .bp3-popover-arrow {
+  transform: translate(-0.5px, 0);
+}

package/src/utils/menuUtils.js

@@ -30,11 +30,13 @@ function MenuItemLink({ text, onClick, icon, navTo, active }) {
 
   return (
     <li className={Classes.POPOVER_DISMISS} onClick={onClick}>
-      <Link onClick={handleLinkClick} to={navTo} className={
-        classNames(Classes.MENU_ITEM, {
+      <Link
+        onClick={handleLinkClick}
+        to={navTo}
+        className={classNames(Classes.MENU_ITEM, {
           [Classes.ACTIVE]: active
-        })
-      }>
+        })}
+      >
         {icon && <Icon icon={icon} />}
         <div className="bp3-text-overflow-ellipsis bp3-fill">{text}</div>
       </Link>

package/style.css

@@ -9064,6 +9064,20 @@ button:not(:disabled):active {
 .bp3-dialog-header .bp3-heading {
   width: 10px; /* tnw: this is a hack to prevent the dialog title from causing the dialog width to expand larger than the dialog content*/
 }
+
+/* to fix tooltip styling issue - https://github.com/palantir/blueprint/issues/3430 */
+.bp3-popover[style*="transform-origin"][style*="bottom"] .bp3-popover-arrow {
+  transform: translate(0, -0.5px);
+}
+.bp3-popover[style*="transform-origin"][style*="left"] .bp3-popover-arrow {
+  transform: translate(0.5px, 0);
+}
+.bp3-popover[style*="transform-origin"][style*="top"] .bp3-popover-arrow {
+  transform: translate(0, 0.5px);
+}
+.bp3-popover[style*="transform-origin"][style*="right"] .bp3-popover-arrow {
+  transform: translate(-0.5px, 0);
+}
 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.rg-celleditor-input,
 .rg-celleditor input {
   border: none;
@@ -9072,6 +9086,26 @@ button:not(:disabled):active {
   width: 100%;
   min-width: 170px;
 }
+.tg-select.tg-select-as-tag .bp3-tag.bp3-minimal.bp3-intent-primary {
+  color: white !important;
+}
+.tg-select.do-not-fill-width {
+  width: auto;
+  min-width: 50px;
+}
+.tg-select.tg-small .bp3-input {
+  min-height: 25px;
+  height: 25px;
+}
+.tg-select.tg-small input {
+  line-height: 10.5px;
+}
+.tg-select.tg-small .bp3-tag-input .bp3-input-ghost {
+  line-height: 10.5px;
+}
+.tg-select.tg-small .bp3-tag-input .bp3-tag-input-values {
+  margin-top: 2px;
+}
 .tg-select input {
   font-size: 14px;
 }