@teselagen/ui 0.4.7 → 0.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.4.7",
+  "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

@@ -248,7 +248,15 @@ button:not(:disabled):active {
 }
 
 /* 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, -.5px); }
-.bp3-popover[style*="transform-origin"][style*="left"] .bp3-popover-arrow { transform: translate(.5px, 0); }
-.bp3-popover[style*="transform-origin"][style*="top"] .bp3-popover-arrow { transform: translate(0, .5px); }
-.bp3-popover[style*="transform-origin"][style*="right"] .bp3-popover-arrow { transform: translate(-.5px, 0); }
+.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/style.css

@@ -9066,10 +9066,19 @@ button:not(:disabled):active {
 }
 
 /* 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, -.5px); }
-.bp3-popover[style*="transform-origin"][style*="left"] .bp3-popover-arrow { transform: translate(.5px, 0); }
-.bp3-popover[style*="transform-origin"][style*="top"] .bp3-popover-arrow { transform: translate(0, .5px); }
-.bp3-popover[style*="transform-origin"][style*="right"] .bp3-popover-arrow { transform: translate(-.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,
+.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;
 }
@@ -9077,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;
 }