@teselagen/ui 0.7.1 → 0.7.2

package/FormComponents/FormSeparator.d.ts

@@ -0,0 +1,3 @@
+export function FormSeparator({ label }?: {
+    label?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/TgSuggest/index.d.ts

@@ -1,2 +1,19 @@
 export default TgSuggest;
-declare function TgSuggest(props: any): import("react/jsx-runtime").JSX.Element;
+declare function TgSuggest({ disabled, inputProps: _inputProps, intent, isLoading, isSimpleSearch, multi, noResultsText, notCreateable, onBlur, onChange, optionRenderer, options, placeholder, popoverProps: _popoverProps, value, ...rest }: {
+    [x: string]: any;
+    disabled: any;
+    inputProps: any;
+    intent: any;
+    isLoading: any;
+    isSimpleSearch: any;
+    multi: any;
+    noResultsText: any;
+    notCreateable: any;
+    onBlur: any;
+    onChange: any;
+    optionRenderer: any;
+    options: any;
+    placeholder: any;
+    popoverProps: any;
+    value: any;
+}): import("react/jsx-runtime").JSX.Element;

package/index.cjs.js

@@ -3071,6 +3071,9 @@ const LoadingDots = /* @__PURE__ */ __name(() => {
   }, []);
   return /* @__PURE__ */ React$1.createElement("span", null, dots);
 }, "LoadingDots");
+const FormSeparator = /* @__PURE__ */ __name(({ label = "or" } = {}) => {
+  return /* @__PURE__ */ React$1.createElement("div", { className: "form-separator" }, /* @__PURE__ */ React$1.createElement("p", { style: { opacity: 0.8 } }, label));
+}, "FormSeparator");
 const AssignDefaultsModeContext = React$1.createContext({
   inAssignDefaultsMode: false,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -31437,10 +31440,10 @@ const itemRenderer = /* @__PURE__ */ __name((i = "", { index: index2, handleClic
   },
   i
 ), "itemRenderer");
-const TgSuggest = /* @__PURE__ */ __name((props) => {
-  const _a = props, {
+const TgSuggest = /* @__PURE__ */ __name((_e) => {
+  var _f = _e, {
     disabled,
-    inputProps,
+    inputProps: _inputProps,
     intent,
     isLoading,
     isSimpleSearch,
@@ -31448,14 +31451,13 @@ const TgSuggest = /* @__PURE__ */ __name((props) => {
     noResultsText,
     notCreateable,
     onBlur,
-    onChange: onChange = /* @__PURE__ */ __name(() => {
-    }, "onChange"),
+    onChange,
     optionRenderer,
-    options: options = [],
+    options: options,
     placeholder,
-    popoverProps,
-    value = void 0
-  } = _a, rest = __objRest(_a, [
+    popoverProps: _popoverProps,
+    value
+  } = _f, rest = __objRest(_f, [
     "disabled",
     "inputProps",
     "intent",
@@ -31465,7 +31467,6 @@ const TgSuggest = /* @__PURE__ */ __name((props) => {
     "noResultsText",
     "notCreateable",
     "onBlur",
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     "onChange",
     "optionRenderer",
     //pull this one out here so it doesn't get passsed along
@@ -31475,42 +31476,66 @@ const TgSuggest = /* @__PURE__ */ __name((props) => {
     "value"
   ]);
   const inputRef = React$1.useRef(null);
-  const handleItemSelect = /* @__PURE__ */ __name((item) => {
-    inputRef.current && inputRef.current.blur();
-    return onChange(item);
-  }, "handleItemSelect");
-  const _itemListPredicate = /* @__PURE__ */ __name((queryString2, item) => {
-    return itemListPredicate(queryString2, item, isSimpleSearch);
-  }, "_itemListPredicate");
+  const handleItemSelect = React$1.useCallback(
+    (item) => {
+      inputRef.current && inputRef.current.blur();
+      return onChange == null ? void 0 : onChange(item);
+    },
+    [onChange]
+  );
+  const _itemListPredicate = React$1.useCallback(
+    (queryString2, item) => {
+      return itemListPredicate(queryString2, item, isSimpleSearch);
+    },
+    [isSimpleSearch]
+  );
+  const popoverProps = React$1.useMemo(
+    () => __spreadValues({
+      minimal: true,
+      className: classNames("tg-select", {
+        "tg-single-select": !multi
+      }),
+      wrapperTagName: "div",
+      usePortal: false,
+      canEscapeKeyClose: true
+    }, _popoverProps),
+    [multi, _popoverProps]
+  );
+  const onKeyDown = React$1.useCallback((e2) => {
+    const { which } = e2;
+    if (which === core.Keys.ENTER) {
+      e2.preventDefault();
+      e2.stopPropagation();
+    }
+    if (which === core.Keys.ESCAPE || which === core.Keys.TAB) {
+      if (inputRef.current != null) {
+        inputRef.current.blur();
+      }
+      e2.preventDefault();
+      e2.stopPropagation();
+    }
+  }, []);
+  const inputProps = React$1.useMemo(
+    () => __spreadValues({
+      inputRef: (n2) => {
+        if (n2)
+          inputRef.current = n2;
+      },
+      placeholder: placeholder || "Type here...",
+      disabled,
+      // tg: adding isLoading will cause the input to be blurred when using generic select asReactSelect (don't do it),
+      intent
+    }, _inputProps),
+    [disabled, _inputProps, intent, placeholder]
+  );
   return /* @__PURE__ */ React$1.createElement(
     select.Suggest,
     __spreadValues({
       closeOnSelect: true,
-      items: options || [],
+      items: options,
       query: value,
-      popoverProps: __spreadValues({
-        minimal: true,
-        className: classNames("tg-select", {
-          "tg-single-select": !multi
-        }),
-        wrapperTagName: "div",
-        usePortal: false,
-        canEscapeKeyClose: true
-      }, popoverProps),
-      onKeyDown: (e2) => {
-        const { which } = e2;
-        if (which === core.Keys.ENTER) {
-          e2.preventDefault();
-          e2.stopPropagation();
-        }
-        if (which === core.Keys.ESCAPE || which === core.Keys.TAB) {
-          if (inputRef.current != null) {
-            inputRef.current.blur();
-          }
-          e2.preventDefault();
-          e2.stopPropagation();
-        }
-      },
+      popoverProps,
+      onKeyDown,
       onItemSelect: handleItemSelect,
       noResults: null,
       resetOnSelect: false,
@@ -31519,23 +31544,14 @@ const TgSuggest = /* @__PURE__ */ __name((props) => {
       itemListPredicate: _itemListPredicate,
       selectedItem: value,
       inputValueRenderer: (item) => item,
-      inputProps: __spreadValues({
-        inputRef: (n2) => {
-          if (n2)
-            inputRef.current = n2;
-        },
-        placeholder: placeholder || "Type here...",
-        disabled,
-        // tg: adding isLoading will cause the input to be blurred when using generic select asReactSelect (don't do it),
-        intent
-      }, inputProps),
+      inputProps,
       isSimpleSearch,
       onChange
     }, rest)
   );
 }, "TgSuggest");
-const InfoHelper = /* @__PURE__ */ __name((_e) => {
-  var _f = _e, {
+const InfoHelper = /* @__PURE__ */ __name((_g) => {
+  var _h = _g, {
     className,
     content: content2,
     children,
@@ -31551,7 +31567,7 @@ const InfoHelper = /* @__PURE__ */ __name((_e) => {
     disabled,
     displayToSide,
     style
-  } = _f, rest = __objRest(_f, [
+  } = _h, rest = __objRest(_h, [
     "className",
     "content",
     "children",
@@ -32003,13 +32019,13 @@ const AbstractInput = /* @__PURE__ */ __name(({
     rightEl
   );
 }, "AbstractInput");
-const renderBlueprintDateInput = /* @__PURE__ */ __name((_g) => {
-  var _h = _g, {
+const renderBlueprintDateInput = /* @__PURE__ */ __name((_i) => {
+  var _j = _i, {
     input,
     intent,
     onFieldSubmit,
     inputProps
-  } = _h, rest = __objRest(_h, [
+  } = _j, rest = __objRest(_j, [
     "input",
     "intent",
     "onFieldSubmit",
@@ -32029,13 +32045,13 @@ const renderBlueprintDateInput = /* @__PURE__ */ __name((_g) => {
     })
   );
 }, "renderBlueprintDateInput");
-const renderBlueprintDateRangeInput = /* @__PURE__ */ __name((_i) => {
-  var _j = _i, {
+const renderBlueprintDateRangeInput = /* @__PURE__ */ __name((_k) => {
+  var _l = _k, {
     input,
     intent,
     onFieldSubmit,
     inputProps
-  } = _j, rest = __objRest(_j, [
+  } = _l, rest = __objRest(_l, [
     "input",
     "intent",
     "onFieldSubmit",
@@ -32055,8 +32071,8 @@ const renderBlueprintDateRangeInput = /* @__PURE__ */ __name((_i) => {
     })
   );
 }, "renderBlueprintDateRangeInput");
-const RenderBlueprintInput = /* @__PURE__ */ __name((_k) => {
-  var _l = _k, {
+const RenderBlueprintInput = /* @__PURE__ */ __name((_m) => {
+  var _n = _m, {
     input,
     intent: intent,
     onFieldSubmit,
@@ -32064,7 +32080,7 @@ const RenderBlueprintInput = /* @__PURE__ */ __name((_k) => {
     asyncValidating,
     rightElement,
     clickToEdit
-  } = _l, rest = __objRest(_l, [
+  } = _n, rest = __objRest(_n, [
     "input",
     // meta = {},
     "intent",
@@ -32153,14 +32169,14 @@ const RenderBlueprintInput = /* @__PURE__ */ __name((_k) => {
     )));
   return inner;
 }, "RenderBlueprintInput");
-const renderBlueprintCheckbox = /* @__PURE__ */ __name((_m) => {
-  var _n = _m, {
+const renderBlueprintCheckbox = /* @__PURE__ */ __name((_o) => {
+  var _p = _o, {
     input,
     label,
     tooltipInfo,
     beforeOnChange,
     onFieldSubmit
-  } = _n, rest = __objRest(_n, [
+  } = _p, rest = __objRest(_p, [
     "input",
     "label",
     "tooltipInfo",
@@ -32197,14 +32213,14 @@ const getCheckboxOrSwitchOnChange = /* @__PURE__ */ __name(({
     onFieldSubmit(v2);
   });
 }, "getCheckboxOrSwitchOnChange");
-const renderBlueprintSwitch = /* @__PURE__ */ __name((_o) => {
-  var _p = _o, {
+const renderBlueprintSwitch = /* @__PURE__ */ __name((_q) => {
+  var _r = _q, {
     input,
     label,
     tooltipInfo,
     onFieldSubmit,
     beforeOnChange
-  } = _p, rest = __objRest(_p, [
+  } = _r, rest = __objRest(_r, [
     "input",
     "label",
     "tooltipInfo",
@@ -32224,8 +32240,8 @@ const renderBlueprintSwitch = /* @__PURE__ */ __name((_o) => {
     })
   );
 }, "renderBlueprintSwitch");
-const renderFileUpload = /* @__PURE__ */ __name((_q) => {
-  var _r = _q, { input, onFieldSubmit } = _r, rest = __objRest(_r, ["input", "onFieldSubmit"]);
+const renderFileUpload = /* @__PURE__ */ __name((_s) => {
+  var _t = _s, { input, onFieldSubmit } = _t, rest = __objRest(_t, ["input", "onFieldSubmit"]);
   return /* @__PURE__ */ React$1.createElement(
     Uploader,
     __spreadProps(__spreadValues({
@@ -32237,8 +32253,8 @@ const renderFileUpload = /* @__PURE__ */ __name((_q) => {
     })
   );
 }, "renderFileUpload");
-const RenderBlueprintTextarea = /* @__PURE__ */ __name((_s) => {
-  var _t = _s, {
+const RenderBlueprintTextarea = /* @__PURE__ */ __name((_u) => {
+  var _v = _u, {
     input,
     onFieldSubmit,
     onKeyDown,
@@ -32246,7 +32262,7 @@ const RenderBlueprintTextarea = /* @__PURE__ */ __name((_s) => {
     inputClassName,
     clickToEdit,
     disabled
-  } = _t, rest = __objRest(_t, [
+  } = _v, rest = __objRest(_v, [
     "input",
     "onFieldSubmit",
     "onKeyDown",
@@ -32446,15 +32462,15 @@ const renderReactSelect = /* @__PURE__ */ __name((props) => {
 const renderSuggest_old = /* @__PURE__ */ __name((props) => {
   return renderReactSelect(__spreadProps(__spreadValues({}, props), { asSuggest: true }));
 }, "renderSuggest_old");
-const renderSuggest = /* @__PURE__ */ __name((_u) => {
-  var _v = _u, {
+const renderSuggest = /* @__PURE__ */ __name((_w) => {
+  var _x = _w, {
     async,
     input: { value, onChange },
     hideValue,
     intent,
     options,
     onFieldSubmit
-  } = _v, rest = __objRest(_v, [
+  } = _x, rest = __objRest(_x, [
     "async",
     "input",
     "hideValue",
@@ -32479,12 +32495,12 @@ const renderSuggest = /* @__PURE__ */ __name((_u) => {
   });
   return /* @__PURE__ */ React$1.createElement(TgSuggest, __spreadValues({}, propsToUse));
 }, "renderSuggest");
-const BPSelect = /* @__PURE__ */ __name((_w) => {
-  var _x = _w, { value, onChange } = _x, rest = __objRest(_x, ["value", "onChange"]);
+const BPSelect = /* @__PURE__ */ __name((_y) => {
+  var _z = _y, { value, onChange } = _z, rest = __objRest(_z, ["value", "onChange"]);
   return renderSelect(__spreadProps(__spreadValues({}, rest), { input: { onChange, value } }));
 }, "BPSelect");
-const renderSelect = /* @__PURE__ */ __name((_y) => {
-  var _z = _y, {
+const renderSelect = /* @__PURE__ */ __name((_A) => {
+  var _B = _A, {
     input: { value, onChange },
     hideValue,
     className,
@@ -32494,7 +32510,7 @@ const renderSelect = /* @__PURE__ */ __name((_y) => {
     hidePlaceHolder,
     minimal,
     disabled
-  } = _z, rest = __objRest(_z, [
+  } = _B, rest = __objRest(_B, [
     "input",
     "hideValue",
     "className",
@@ -32562,15 +32578,15 @@ const renderSelect = /* @__PURE__ */ __name((_y) => {
     )
   );
 }, "renderSelect");
-const renderBlueprintNumericInput = /* @__PURE__ */ __name((_A) => {
-  var _B = _A, {
+const renderBlueprintNumericInput = /* @__PURE__ */ __name((_C) => {
+  var _D = _C, {
     input,
     hideValue,
     intent,
     inputClassName,
     onFieldSubmit,
     onAnyNumberChange
-  } = _B, rest = __objRest(_B, [
+  } = _D, rest = __objRest(_D, [
     "input",
     "hideValue",
     "intent",
@@ -32615,12 +32631,12 @@ const renderBlueprintNumericInput = /* @__PURE__ */ __name((_A) => {
     })
   );
 }, "renderBlueprintNumericInput");
-const renderBlueprintRadioGroup = /* @__PURE__ */ __name((_C) => {
-  var _D = _C, {
+const renderBlueprintRadioGroup = /* @__PURE__ */ __name((_E) => {
+  var _F = _E, {
     input,
     options,
     onFieldSubmit
-  } = _D, rest = __objRest(_D, [
+  } = _F, rest = __objRest(_F, [
     "input",
     "options",
     "onFieldSubmit"
@@ -32659,8 +32675,8 @@ const renderBlueprintRadioGroup = /* @__PURE__ */ __name((_C) => {
     })
   );
 }, "renderBlueprintRadioGroup");
-const RenderReactColorPicker = /* @__PURE__ */ __name((_E) => {
-  var _F = _E, { input, onFieldSubmit } = _F, rest = __objRest(_F, ["input", "onFieldSubmit"]);
+const RenderReactColorPicker = /* @__PURE__ */ __name((_G) => {
+  var _H = _G, { input, onFieldSubmit } = _H, rest = __objRest(_H, ["input", "onFieldSubmit"]);
   return /* @__PURE__ */ React$1.createElement(
     core.Popover,
     {
@@ -52385,8 +52401,8 @@ const itemSizeEstimators = {
   normal: () => 33.34,
   comfortable: () => 41.34
 };
-const DataTable = /* @__PURE__ */ __name((_G) => {
-  var _H = _G, {
+const DataTable = /* @__PURE__ */ __name((_I) => {
+  var _J = _I, {
     controlled_pageSize,
     formName = "tgDataTable",
     history,
@@ -52400,7 +52416,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     tableParams: _tableParams,
     anyTouched,
     blur
-  } = _H, ownProps = __objRest(_H, [
+  } = _J, ownProps = __objRest(_J, [
     "controlled_pageSize",
     "formName",
     "history",
@@ -68422,14 +68438,14 @@ function BlueprintError({ error }) {
   return /* @__PURE__ */ React$1.createElement("div", { className: classNames(core.Classes.FORM_GROUP, core.Classes.INTENT_DANGER) }, /* @__PURE__ */ React$1.createElement("div", { className: classNames(core.Classes.FORM_HELPER_TEXT, "preserve-newline") }, error));
 }
 __name(BlueprintError, "BlueprintError");
-function DropdownButton(_I) {
-  var _J = _I, {
+function DropdownButton(_K) {
+  var _L = _K, {
     disabled,
     menu,
     noRightIcon,
     popoverProps,
     className
-  } = _J, rest = __objRest(_J, [
+  } = _L, rest = __objRest(_L, [
     "disabled",
     "menu",
     "noRightIcon",
@@ -72110,14 +72126,14 @@ const EnhancedMenuItem = compose(
     }
   }),
   branch(({ navTo }) => navTo, withRouter)
-)(function(_K) {
-  var _L = _K, {
+)(function(_M) {
+  var _N = _M, {
     navTo,
     context,
     staticContext,
     didMount,
     willUnmount
-  } = _L, props = __objRest(_L, [
+  } = _N, props = __objRest(_N, [
     "navTo",
     "context",
     "staticContext",
@@ -72341,8 +72357,8 @@ function doesSearchValMatchText(searchVal, justText) {
   );
 }
 __name(doesSearchValMatchText, "doesSearchValMatchText");
-const MenuItemWithTooltip = /* @__PURE__ */ __name((_M) => {
-  var _N = _M, { tooltip } = _N, rest = __objRest(_N, ["tooltip"]);
+const MenuItemWithTooltip = /* @__PURE__ */ __name((_O) => {
+  var _P = _O, { tooltip } = _P, rest = __objRest(_P, ["tooltip"]);
   let out = /* @__PURE__ */ React$1.createElement(core.MenuItem, __spreadValues({}, rest));
   if (tooltip) {
     out = /* @__PURE__ */ React$1.createElement(core.Tooltip, { content: tooltip }, out);
@@ -74754,6 +74770,7 @@ exports.EditableTextField = EditableTextField;
 exports.EnhancedMenuItem = EnhancedMenuItem;
 exports.FileUploadField = FileUploadField;
 exports.FillWindow = FillWindow;
+exports.FormSeparator = FormSeparator;
 exports.HotkeysDialog = HotkeysDialog;
 exports.InfoHelper = InfoHelper;
 exports.InputField = InputField;

package/index.d.ts

@@ -1,4 +1,5 @@
 export { LoadingDots } from './FormComponents/LoadingDots';
+export { FormSeparator } from './FormComponents/FormSeparator';
 export * from './AssignDefaultsModeContext';
 export * from './utils/tgFormValues';
 export * from './FormComponents';

package/index.es.js

@@ -3053,6 +3053,9 @@ const LoadingDots = /* @__PURE__ */ __name(() => {
   }, []);
   return /* @__PURE__ */ React__default.createElement("span", null, dots);
 }, "LoadingDots");
+const FormSeparator = /* @__PURE__ */ __name(({ label = "or" } = {}) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "form-separator" }, /* @__PURE__ */ React__default.createElement("p", { style: { opacity: 0.8 } }, label));
+}, "FormSeparator");
 const AssignDefaultsModeContext = React__default.createContext({
   inAssignDefaultsMode: false,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -31419,10 +31422,10 @@ const itemRenderer = /* @__PURE__ */ __name((i = "", { index: index2, handleClic
   },
   i
 ), "itemRenderer");
-const TgSuggest = /* @__PURE__ */ __name((props) => {
-  const _a = props, {
+const TgSuggest = /* @__PURE__ */ __name((_e) => {
+  var _f = _e, {
     disabled,
-    inputProps,
+    inputProps: _inputProps,
     intent,
     isLoading,
     isSimpleSearch,
@@ -31430,14 +31433,13 @@ const TgSuggest = /* @__PURE__ */ __name((props) => {
     noResultsText,
     notCreateable,
     onBlur,
-    onChange: onChange = /* @__PURE__ */ __name(() => {
-    }, "onChange"),
+    onChange,
     optionRenderer,
-    options: options = [],
+    options: options,
     placeholder,
-    popoverProps,
-    value = void 0
-  } = _a, rest = __objRest(_a, [
+    popoverProps: _popoverProps,
+    value
+  } = _f, rest = __objRest(_f, [
     "disabled",
     "inputProps",
     "intent",
@@ -31447,7 +31449,6 @@ const TgSuggest = /* @__PURE__ */ __name((props) => {
     "noResultsText",
     "notCreateable",
     "onBlur",
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     "onChange",
     "optionRenderer",
     //pull this one out here so it doesn't get passsed along
@@ -31457,42 +31458,66 @@ const TgSuggest = /* @__PURE__ */ __name((props) => {
     "value"
   ]);
   const inputRef = useRef(null);
-  const handleItemSelect = /* @__PURE__ */ __name((item) => {
-    inputRef.current && inputRef.current.blur();
-    return onChange(item);
-  }, "handleItemSelect");
-  const _itemListPredicate = /* @__PURE__ */ __name((queryString2, item) => {
-    return itemListPredicate(queryString2, item, isSimpleSearch);
-  }, "_itemListPredicate");
+  const handleItemSelect = useCallback(
+    (item) => {
+      inputRef.current && inputRef.current.blur();
+      return onChange == null ? void 0 : onChange(item);
+    },
+    [onChange]
+  );
+  const _itemListPredicate = useCallback(
+    (queryString2, item) => {
+      return itemListPredicate(queryString2, item, isSimpleSearch);
+    },
+    [isSimpleSearch]
+  );
+  const popoverProps = useMemo(
+    () => __spreadValues({
+      minimal: true,
+      className: classNames("tg-select", {
+        "tg-single-select": !multi
+      }),
+      wrapperTagName: "div",
+      usePortal: false,
+      canEscapeKeyClose: true
+    }, _popoverProps),
+    [multi, _popoverProps]
+  );
+  const onKeyDown = useCallback((e2) => {
+    const { which } = e2;
+    if (which === Keys.ENTER) {
+      e2.preventDefault();
+      e2.stopPropagation();
+    }
+    if (which === Keys.ESCAPE || which === Keys.TAB) {
+      if (inputRef.current != null) {
+        inputRef.current.blur();
+      }
+      e2.preventDefault();
+      e2.stopPropagation();
+    }
+  }, []);
+  const inputProps = useMemo(
+    () => __spreadValues({
+      inputRef: (n2) => {
+        if (n2)
+          inputRef.current = n2;
+      },
+      placeholder: placeholder || "Type here...",
+      disabled,
+      // tg: adding isLoading will cause the input to be blurred when using generic select asReactSelect (don't do it),
+      intent
+    }, _inputProps),
+    [disabled, _inputProps, intent, placeholder]
+  );
   return /* @__PURE__ */ React__default.createElement(
     Suggest,
     __spreadValues({
       closeOnSelect: true,
-      items: options || [],
+      items: options,
       query: value,
-      popoverProps: __spreadValues({
-        minimal: true,
-        className: classNames("tg-select", {
-          "tg-single-select": !multi
-        }),
-        wrapperTagName: "div",
-        usePortal: false,
-        canEscapeKeyClose: true
-      }, popoverProps),
-      onKeyDown: (e2) => {
-        const { which } = e2;
-        if (which === Keys.ENTER) {
-          e2.preventDefault();
-          e2.stopPropagation();
-        }
-        if (which === Keys.ESCAPE || which === Keys.TAB) {
-          if (inputRef.current != null) {
-            inputRef.current.blur();
-          }
-          e2.preventDefault();
-          e2.stopPropagation();
-        }
-      },
+      popoverProps,
+      onKeyDown,
       onItemSelect: handleItemSelect,
       noResults: null,
       resetOnSelect: false,
@@ -31501,23 +31526,14 @@ const TgSuggest = /* @__PURE__ */ __name((props) => {
       itemListPredicate: _itemListPredicate,
       selectedItem: value,
       inputValueRenderer: (item) => item,
-      inputProps: __spreadValues({
-        inputRef: (n2) => {
-          if (n2)
-            inputRef.current = n2;
-        },
-        placeholder: placeholder || "Type here...",
-        disabled,
-        // tg: adding isLoading will cause the input to be blurred when using generic select asReactSelect (don't do it),
-        intent
-      }, inputProps),
+      inputProps,
       isSimpleSearch,
       onChange
     }, rest)
   );
 }, "TgSuggest");
-const InfoHelper = /* @__PURE__ */ __name((_e) => {
-  var _f = _e, {
+const InfoHelper = /* @__PURE__ */ __name((_g) => {
+  var _h = _g, {
     className,
     content: content2,
     children,
@@ -31533,7 +31549,7 @@ const InfoHelper = /* @__PURE__ */ __name((_e) => {
     disabled,
     displayToSide,
     style
-  } = _f, rest = __objRest(_f, [
+  } = _h, rest = __objRest(_h, [
     "className",
     "content",
     "children",
@@ -31985,13 +32001,13 @@ const AbstractInput = /* @__PURE__ */ __name(({
     rightEl
   );
 }, "AbstractInput");
-const renderBlueprintDateInput = /* @__PURE__ */ __name((_g) => {
-  var _h = _g, {
+const renderBlueprintDateInput = /* @__PURE__ */ __name((_i) => {
+  var _j = _i, {
     input,
     intent,
     onFieldSubmit,
     inputProps
-  } = _h, rest = __objRest(_h, [
+  } = _j, rest = __objRest(_j, [
     "input",
     "intent",
     "onFieldSubmit",
@@ -32011,13 +32027,13 @@ const renderBlueprintDateInput = /* @__PURE__ */ __name((_g) => {
     })
   );
 }, "renderBlueprintDateInput");
-const renderBlueprintDateRangeInput = /* @__PURE__ */ __name((_i) => {
-  var _j = _i, {
+const renderBlueprintDateRangeInput = /* @__PURE__ */ __name((_k) => {
+  var _l = _k, {
     input,
     intent,
     onFieldSubmit,
     inputProps
-  } = _j, rest = __objRest(_j, [
+  } = _l, rest = __objRest(_l, [
     "input",
     "intent",
     "onFieldSubmit",
@@ -32037,8 +32053,8 @@ const renderBlueprintDateRangeInput = /* @__PURE__ */ __name((_i) => {
     })
   );
 }, "renderBlueprintDateRangeInput");
-const RenderBlueprintInput = /* @__PURE__ */ __name((_k) => {
-  var _l = _k, {
+const RenderBlueprintInput = /* @__PURE__ */ __name((_m) => {
+  var _n = _m, {
     input,
     intent: intent,
     onFieldSubmit,
@@ -32046,7 +32062,7 @@ const RenderBlueprintInput = /* @__PURE__ */ __name((_k) => {
     asyncValidating,
     rightElement,
     clickToEdit
-  } = _l, rest = __objRest(_l, [
+  } = _n, rest = __objRest(_n, [
     "input",
     // meta = {},
     "intent",
@@ -32135,14 +32151,14 @@ const RenderBlueprintInput = /* @__PURE__ */ __name((_k) => {
     )));
   return inner;
 }, "RenderBlueprintInput");
-const renderBlueprintCheckbox = /* @__PURE__ */ __name((_m) => {
-  var _n = _m, {
+const renderBlueprintCheckbox = /* @__PURE__ */ __name((_o) => {
+  var _p = _o, {
     input,
     label,
     tooltipInfo,
     beforeOnChange,
     onFieldSubmit
-  } = _n, rest = __objRest(_n, [
+  } = _p, rest = __objRest(_p, [
     "input",
     "label",
     "tooltipInfo",
@@ -32179,14 +32195,14 @@ const getCheckboxOrSwitchOnChange = /* @__PURE__ */ __name(({
     onFieldSubmit(v2);
   });
 }, "getCheckboxOrSwitchOnChange");
-const renderBlueprintSwitch = /* @__PURE__ */ __name((_o) => {
-  var _p = _o, {
+const renderBlueprintSwitch = /* @__PURE__ */ __name((_q) => {
+  var _r = _q, {
     input,
     label,
     tooltipInfo,
     onFieldSubmit,
     beforeOnChange
-  } = _p, rest = __objRest(_p, [
+  } = _r, rest = __objRest(_r, [
     "input",
     "label",
     "tooltipInfo",
@@ -32206,8 +32222,8 @@ const renderBlueprintSwitch = /* @__PURE__ */ __name((_o) => {
     })
   );
 }, "renderBlueprintSwitch");
-const renderFileUpload = /* @__PURE__ */ __name((_q) => {
-  var _r = _q, { input, onFieldSubmit } = _r, rest = __objRest(_r, ["input", "onFieldSubmit"]);
+const renderFileUpload = /* @__PURE__ */ __name((_s) => {
+  var _t = _s, { input, onFieldSubmit } = _t, rest = __objRest(_t, ["input", "onFieldSubmit"]);
   return /* @__PURE__ */ React__default.createElement(
     Uploader,
     __spreadProps(__spreadValues({
@@ -32219,8 +32235,8 @@ const renderFileUpload = /* @__PURE__ */ __name((_q) => {
     })
   );
 }, "renderFileUpload");
-const RenderBlueprintTextarea = /* @__PURE__ */ __name((_s) => {
-  var _t = _s, {
+const RenderBlueprintTextarea = /* @__PURE__ */ __name((_u) => {
+  var _v = _u, {
     input,
     onFieldSubmit,
     onKeyDown,
@@ -32228,7 +32244,7 @@ const RenderBlueprintTextarea = /* @__PURE__ */ __name((_s) => {
     inputClassName,
     clickToEdit,
     disabled
-  } = _t, rest = __objRest(_t, [
+  } = _v, rest = __objRest(_v, [
     "input",
     "onFieldSubmit",
     "onKeyDown",
@@ -32428,15 +32444,15 @@ const renderReactSelect = /* @__PURE__ */ __name((props) => {
 const renderSuggest_old = /* @__PURE__ */ __name((props) => {
   return renderReactSelect(__spreadProps(__spreadValues({}, props), { asSuggest: true }));
 }, "renderSuggest_old");
-const renderSuggest = /* @__PURE__ */ __name((_u) => {
-  var _v = _u, {
+const renderSuggest = /* @__PURE__ */ __name((_w) => {
+  var _x = _w, {
     async,
     input: { value, onChange },
     hideValue,
     intent,
     options,
     onFieldSubmit
-  } = _v, rest = __objRest(_v, [
+  } = _x, rest = __objRest(_x, [
     "async",
     "input",
     "hideValue",
@@ -32461,12 +32477,12 @@ const renderSuggest = /* @__PURE__ */ __name((_u) => {
   });
   return /* @__PURE__ */ React__default.createElement(TgSuggest, __spreadValues({}, propsToUse));
 }, "renderSuggest");
-const BPSelect = /* @__PURE__ */ __name((_w) => {
-  var _x = _w, { value, onChange } = _x, rest = __objRest(_x, ["value", "onChange"]);
+const BPSelect = /* @__PURE__ */ __name((_y) => {
+  var _z = _y, { value, onChange } = _z, rest = __objRest(_z, ["value", "onChange"]);
   return renderSelect(__spreadProps(__spreadValues({}, rest), { input: { onChange, value } }));
 }, "BPSelect");
-const renderSelect = /* @__PURE__ */ __name((_y) => {
-  var _z = _y, {
+const renderSelect = /* @__PURE__ */ __name((_A) => {
+  var _B = _A, {
     input: { value, onChange },
     hideValue,
     className,
@@ -32476,7 +32492,7 @@ const renderSelect = /* @__PURE__ */ __name((_y) => {
     hidePlaceHolder,
     minimal,
     disabled
-  } = _z, rest = __objRest(_z, [
+  } = _B, rest = __objRest(_B, [
     "input",
     "hideValue",
     "className",
@@ -32544,15 +32560,15 @@ const renderSelect = /* @__PURE__ */ __name((_y) => {
     )
   );
 }, "renderSelect");
-const renderBlueprintNumericInput = /* @__PURE__ */ __name((_A) => {
-  var _B = _A, {
+const renderBlueprintNumericInput = /* @__PURE__ */ __name((_C) => {
+  var _D = _C, {
     input,
     hideValue,
     intent,
     inputClassName,
     onFieldSubmit,
     onAnyNumberChange
-  } = _B, rest = __objRest(_B, [
+  } = _D, rest = __objRest(_D, [
     "input",
     "hideValue",
     "intent",
@@ -32597,12 +32613,12 @@ const renderBlueprintNumericInput = /* @__PURE__ */ __name((_A) => {
     })
   );
 }, "renderBlueprintNumericInput");
-const renderBlueprintRadioGroup = /* @__PURE__ */ __name((_C) => {
-  var _D = _C, {
+const renderBlueprintRadioGroup = /* @__PURE__ */ __name((_E) => {
+  var _F = _E, {
     input,
     options,
     onFieldSubmit
-  } = _D, rest = __objRest(_D, [
+  } = _F, rest = __objRest(_F, [
     "input",
     "options",
     "onFieldSubmit"
@@ -32641,8 +32657,8 @@ const renderBlueprintRadioGroup = /* @__PURE__ */ __name((_C) => {
     })
   );
 }, "renderBlueprintRadioGroup");
-const RenderReactColorPicker = /* @__PURE__ */ __name((_E) => {
-  var _F = _E, { input, onFieldSubmit } = _F, rest = __objRest(_F, ["input", "onFieldSubmit"]);
+const RenderReactColorPicker = /* @__PURE__ */ __name((_G) => {
+  var _H = _G, { input, onFieldSubmit } = _H, rest = __objRest(_H, ["input", "onFieldSubmit"]);
   return /* @__PURE__ */ React__default.createElement(
     Popover,
     {
@@ -52367,8 +52383,8 @@ const itemSizeEstimators = {
   normal: () => 33.34,
   comfortable: () => 41.34
 };
-const DataTable = /* @__PURE__ */ __name((_G) => {
-  var _H = _G, {
+const DataTable = /* @__PURE__ */ __name((_I) => {
+  var _J = _I, {
     controlled_pageSize,
     formName = "tgDataTable",
     history,
@@ -52382,7 +52398,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     tableParams: _tableParams,
     anyTouched,
     blur
-  } = _H, ownProps = __objRest(_H, [
+  } = _J, ownProps = __objRest(_J, [
     "controlled_pageSize",
     "formName",
     "history",
@@ -68404,14 +68420,14 @@ function BlueprintError({ error }) {
   return /* @__PURE__ */ React__default.createElement("div", { className: classNames(Classes.FORM_GROUP, Classes.INTENT_DANGER) }, /* @__PURE__ */ React__default.createElement("div", { className: classNames(Classes.FORM_HELPER_TEXT, "preserve-newline") }, error));
 }
 __name(BlueprintError, "BlueprintError");
-function DropdownButton(_I) {
-  var _J = _I, {
+function DropdownButton(_K) {
+  var _L = _K, {
     disabled,
     menu,
     noRightIcon,
     popoverProps,
     className
-  } = _J, rest = __objRest(_J, [
+  } = _L, rest = __objRest(_L, [
     "disabled",
     "menu",
     "noRightIcon",
@@ -72092,14 +72108,14 @@ const EnhancedMenuItem = compose(
     }
   }),
   branch(({ navTo }) => navTo, withRouter)
-)(function(_K) {
-  var _L = _K, {
+)(function(_M) {
+  var _N = _M, {
     navTo,
     context,
     staticContext,
     didMount,
     willUnmount
-  } = _L, props = __objRest(_L, [
+  } = _N, props = __objRest(_N, [
     "navTo",
     "context",
     "staticContext",
@@ -72323,8 +72339,8 @@ function doesSearchValMatchText(searchVal, justText) {
   );
 }
 __name(doesSearchValMatchText, "doesSearchValMatchText");
-const MenuItemWithTooltip = /* @__PURE__ */ __name((_M) => {
-  var _N = _M, { tooltip } = _N, rest = __objRest(_N, ["tooltip"]);
+const MenuItemWithTooltip = /* @__PURE__ */ __name((_O) => {
+  var _P = _O, { tooltip } = _P, rest = __objRest(_P, ["tooltip"]);
   let out = /* @__PURE__ */ React__default.createElement(MenuItem, __spreadValues({}, rest));
   if (tooltip) {
     out = /* @__PURE__ */ React__default.createElement(Tooltip, { content: tooltip }, out);
@@ -74737,6 +74753,7 @@ export {
   EnhancedMenuItem,
   FileUploadField,
   FillWindow,
+  FormSeparator,
   HotkeysDialog,
   InfoHelper,
   InputField,

package/package.json

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

package/src/FormComponents/FormSeparator.js

@@ -0,0 +1,9 @@
+import React from "react";
+import "./style.css";
+export const FormSeparator = ({ label = "or" } = {}) => {
+  return (
+    <div className="form-separator">
+      <p style={{ opacity: 0.8 }}>{label}</p>
+    </div>
+  );
+};

package/src/FormComponents/style.css

@@ -249,3 +249,27 @@
 .bp3-dark .tg-color-picker-selector input {
   color: #222222;
 }
+
+.form-separator {
+  p {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+  p::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: #e1e4e8;
+    margin-right: 16px;
+  }
+  p::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: #e1e4e8;
+    margin-left: 16px;
+  }
+}

package/src/TgSuggest/index.js

@@ -1,6 +1,6 @@
 import { Suggest } from "@blueprintjs/select";
 import { Keys } from "@blueprintjs/core";
-import React, { useRef } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import classNames from "classnames";
 import { itemListPredicate } from "../TgSelect";
 
@@ -19,69 +19,92 @@ const itemRenderer = (i = "", { index, handleClick, modifiers }) => (
   </div>
 );
 
-const TgSuggest = props => {
-  const {
-    disabled,
-    inputProps,
-    intent,
-    isLoading,
-    isSimpleSearch,
-    multi,
-    noResultsText,
-    notCreateable,
-    onBlur,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange = () => {},
-    optionRenderer, //pull this one out here so it doesn't get passsed along
-    options = [],
-    placeholder,
-    popoverProps,
-    value = undefined,
-    ...rest
-  } = props;
-
+const TgSuggest = ({
+  disabled,
+  inputProps: _inputProps,
+  intent,
+  isLoading,
+  isSimpleSearch,
+  multi,
+  noResultsText,
+  notCreateable,
+  onBlur,
+  onChange,
+  optionRenderer, //pull this one out here so it doesn't get passsed along
+  options,
+  placeholder,
+  popoverProps: _popoverProps,
+  value,
+  ...rest
+}) => {
   const inputRef = useRef(null);
 
-  const handleItemSelect = item => {
-    inputRef.current && inputRef.current.blur();
-    return onChange(item);
-  };
+  const handleItemSelect = useCallback(
+    item => {
+      inputRef.current && inputRef.current.blur();
+      return onChange?.(item);
+    },
+    [onChange]
+  );
 
-  const _itemListPredicate = (queryString, item) => {
-    return itemListPredicate(queryString, item, isSimpleSearch);
-  };
+  const _itemListPredicate = useCallback(
+    (queryString, item) => {
+      return itemListPredicate(queryString, item, isSimpleSearch);
+    },
+    [isSimpleSearch]
+  );
+
+  const popoverProps = useMemo(
+    () => ({
+      minimal: true,
+      className: classNames("tg-select", {
+        "tg-single-select": !multi
+      }),
+      wrapperTagName: "div",
+      usePortal: false,
+      canEscapeKeyClose: true,
+      ..._popoverProps
+    }),
+    [multi, _popoverProps]
+  );
+
+  const onKeyDown = useCallback(e => {
+    const { which } = e;
+    if (which === Keys.ENTER) {
+      e.preventDefault();
+      e.stopPropagation(); //this prevents the dialog it is in from closing
+    }
+    if (which === Keys.ESCAPE || which === Keys.TAB) {
+      // By default the escape key will not trigger a blur on the
+      // input element. It must be done explicitly.
+      if (inputRef.current != null) {
+        inputRef.current.blur();
+      }
+      e.preventDefault();
+      e.stopPropagation(); //this prevents dialog's it is in from closing
+    }
+  }, []);
+
+  const inputProps = useMemo(
+    () => ({
+      inputRef: n => {
+        if (n) inputRef.current = n;
+      },
+      placeholder: placeholder || "Type here...",
+      disabled: disabled, // tg: adding isLoading will cause the input to be blurred when using generic select asReactSelect (don't do it),
+      intent: intent,
+      ..._inputProps
+    }),
+    [disabled, _inputProps, intent, placeholder]
+  );
 
   return (
     <Suggest
       closeOnSelect
-      items={options || []}
+      items={options}
       query={value}
-      popoverProps={{
-        minimal: true,
-        className: classNames("tg-select", {
-          "tg-single-select": !multi
-        }),
-        wrapperTagName: "div",
-        usePortal: false,
-        canEscapeKeyClose: true,
-        ...popoverProps
-      }}
-      onKeyDown={e => {
-        const { which } = e;
-        if (which === Keys.ENTER) {
-          e.preventDefault();
-          e.stopPropagation(); //this prevents the dialog it is in from closing
-        }
-        if (which === Keys.ESCAPE || which === Keys.TAB) {
-          // By default the escape key will not trigger a blur on the
-          // input element. It must be done explicitly.
-          if (inputRef.current != null) {
-            inputRef.current.blur();
-          }
-          e.preventDefault();
-          e.stopPropagation(); //this prevents dialog's it is in from closing
-        }
-      }}
+      popoverProps={popoverProps}
+      onKeyDown={onKeyDown}
       onItemSelect={handleItemSelect}
       noResults={null}
       resetOnSelect={false}
@@ -90,15 +113,7 @@ const TgSuggest = props => {
       itemListPredicate={_itemListPredicate}
       selectedItem={value}
       inputValueRenderer={item => item}
-      inputProps={{
-        inputRef: n => {
-          if (n) inputRef.current = n;
-        },
-        placeholder: placeholder || "Type here...",
-        disabled: disabled, // tg: adding isLoading will cause the input to be blurred when using generic select asReactSelect (don't do it),
-        intent: intent,
-        ...inputProps
-      }}
+      inputProps={inputProps}
       isSimpleSearch={isSimpleSearch}
       onChange={onChange}
       {...rest}

package/src/index.js

@@ -4,6 +4,7 @@ import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 import "./style.css";
 import "./autoTooltip";
 export { LoadingDots } from "./FormComponents/LoadingDots";
+export { FormSeparator } from "./FormComponents/FormSeparator";
 export * from "./AssignDefaultsModeContext";
 export { default as Uploader } from "./FormComponents/Uploader";
 export { mergeSchemas } from "./DataTable/utils/convertSchema";

package/style.css

@@ -9081,11 +9081,7 @@ button:not(:disabled):active {
 .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;
-}
-.tg-flex-form-content .bp3-form-content {
+.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}.tg-flex-form-content .bp3-form-content {
   display: flex;
 }
 
@@ -9336,6 +9332,34 @@ button:not(:disabled):active {
 .bp3-dark .tg-color-picker-selector input {
   color: #222222;
 }
+
+.form-separator {
+  p {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+  p::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: #e1e4e8;
+    margin-right: 16px;
+  }
+  p::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: #e1e4e8;
+    margin-left: 16px;
+  }
+}
+.rg-celleditor-input,
+.rg-celleditor input {
+  border: none;
+}
 .tg-select {
   width: 100%;
   min-width: 170px;