@teselagen/ui 0.7.36 → 0.8.2

package/DataTable/EditabelCell.d.ts

@@ -0,0 +1,7 @@
+export function EditableCell({ cancelEdit, dataTest, finishEdit, isNumeric, initialValue }: {
+    cancelEdit: any;
+    dataTest: any;
+    finishEdit: any;
+    isNumeric: any;
+    initialValue: any;
+}): import("react/jsx-runtime").JSX.Element;

package/DataTable/defaultProps.d.ts

@@ -0,0 +1,43 @@
+import { noop } from 'lodash-es';
+declare namespace _default {
+    export { noop as addFilters };
+    export let className: string;
+    export { noop as clearFilters };
+    export { noop as contextMenu };
+    export let disabled: boolean;
+    export let entities: never[];
+    export let extraClasses: string;
+    export let filters: never[];
+    export let isCopyable: boolean;
+    export { noop as isEntityDisabled };
+    export let isLoading: boolean;
+    export let isSimple: boolean;
+    export let isSingleSelect: boolean;
+    export let maxHeight: number;
+    export let noHeader: boolean;
+    export let noSelect: boolean;
+    export let noUserSelect: boolean;
+    export { noop as onDeselect };
+    export { noop as onMultiRowSelect };
+    export { noop as onRowClick };
+    export { noop as onRowSelect };
+    export { noop as onSingleRowSelect };
+    export let page: number;
+    export let pageSize: number;
+    export let reduxFormExpandedEntityIdMap: {};
+    export let reduxFormSearchInput: string;
+    export let reduxFormSelectedEntityIdMap: {};
+    export { noop as removeSingleFilter };
+    export let resized: never[];
+    export { noop as resizePersist };
+    export { noop as setFilter };
+    export { noop as setOrder };
+    export { noop as setPage };
+    export { noop as setPageSize };
+    export { noop as setSearchTerm };
+    export let showCount: boolean;
+    export let style: {};
+    export let withCheckboxes: boolean;
+    export let withSort: boolean;
+}
+export default _default;

package/DataTable/utils/computePresets.d.ts

@@ -0,0 +1 @@
+export default function computePresets(props?: {}): import('lodash').Dictionary<any>;

package/DataTable/utils/useDeepEqualMemo.d.ts

@@ -0,0 +1 @@
+export function useDeepEqualMemo(value: any): undefined;

package/DataTable/utils/useTableParams.d.ts

@@ -0,0 +1,49 @@
+/**
+ *  Note all these options can be passed at Design Time or at Runtime (like reduxForm())
+ *
+ * @export
+ *
+ * @param {compOrOpts} compOrOpts
+ * @typedef {object} compOrOpts
+ * @property {*string} formName - required unique identifier for the table
+ * @property {Object | Function} schema - The data table schema or a function returning it. The function wll be called with props as the argument.
+ * @property {boolean} urlConnected - whether the table should connect to/update the URL
+ * @property {boolean} withSelectedEntities - whether or not to pass the selected entities
+ * @property {boolean} isCodeModel - whether the model is keyed by code instead of id in the db
+ * @property {object} defaults - tableParam defaults such as pageSize, filter, etc
+ * @property {boolean} noOrderError - won't console an error if an order is not found on schema
+ */
+export default function useTableParams(props: any): any;
+/**
+ * Note all these options can be passed at Design Time or at Runtime (like reduxForm())
+ */
+export type compOrOpts = {
+    /**
+     * } formName - required unique identifier for the table
+     */
+    string: any;
+    /**
+     * - The data table schema or a function returning it. The function wll be called with props as the argument.
+     */
+    schema: Object | Function;
+    /**
+     * - whether the table should connect to/update the URL
+     */
+    urlConnected: boolean;
+    /**
+     * - whether or not to pass the selected entities
+     */
+    withSelectedEntities: boolean;
+    /**
+     * - whether the model is keyed by code instead of id in the db
+     */
+    isCodeModel: boolean;
+    /**
+     * - tableParam defaults such as pageSize, filter, etc
+     */
+    defaults: object;
+    /**
+     * - won't console an error if an order is not found on schema
+     */
+    noOrderError: boolean;
+};

package/index.cjs.js

@@ -15848,7 +15848,6 @@ var itemSizeEstimator = /* @__PURE__ */ __name(function itemSizeEstimator2() {
   return 41.36;
 }, "itemSizeEstimator");
 var ReactTableDefaults = defaultProps;
-var VIRTUALIZE_CUTOFF_LENGTH = 200;
 var ReactTable = function(_Methods) {
   _inherits$8(ReactTable2, _Methods);
   function ReactTable2(props) {
@@ -16434,7 +16433,7 @@ var ReactTable = function(_Methods) {
                   minWidth: rowMinWidth + "px"
                 })
               }, tBodyProps.rest),
-              _this2.props.noVirtual || pageRows.length < VIRTUALIZE_CUTOFF_LENGTH ? pageRows.map(function(d2, i2) {
+              pageRows.length < 200 ? pageRows.map(function(d2, i2) {
                 return makePageRow(d2, i2);
               }) : React.createElement(ReactList, {
                 type: "variable",
@@ -51116,10 +51115,10 @@ const RenderCell = /* @__PURE__ */ __name(({
       return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.reduxFormEditingCell;
     }
   );
-  const initialValue = reactRedux.useSelector(
+  const shouldEditableCellInputBeCleared = reactRedux.useSelector(
     (state) => {
       var _a2, _b, _c;
-      return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.reduxFormInitialValue;
+      return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.shouldEditableCellInputBeCleared;
     }
   );
   const [row] = args;
@@ -51172,7 +51171,7 @@ const RenderCell = /* @__PURE__ */ __name(({
           dataTest,
           cancelEdit: cancelCellEdit,
           isNumeric: column.type === "number",
-          initialValue: initialValue || text2,
+          initialValue: shouldEditableCellInputBeCleared ? void 0 : text2,
           finishEdit: /* @__PURE__ */ __name((newVal) => {
             finishCellEdit(cellId, newVal);
           }, "finishEdit")
@@ -57035,8 +57034,12 @@ const DataTable = /* @__PURE__ */ __name((_I) => {
     }
   }, [selectedCells]);
   const startCellEdit = React.useCallback(
-    (cellId, initialValue) => {
-      change("reduxFormInitialValue", initialValue);
+    (cellId, shouldClear) => {
+      if (shouldClear) {
+        change("shouldEditableCellInputBeCleared", true);
+      } else {
+        change("shouldEditableCellInputBeCleared", false);
+      }
       change("reduxFormEditingCell", (prev) => {
         if (prev === cellId) return cellId;
         setSelectedCells((prev2) => {
@@ -58697,12 +58700,30 @@ const DataTable = /* @__PURE__ */ __name((_I) => {
           const rowDisabled = isEntityDisabled(entity);
           const isNum = (_g = e.code) == null ? void 0 : _g.startsWith("Digit");
           const isLetter = (_h = e.code) == null ? void 0 : _h.startsWith("Key");
-          if (!isNum && !isLetter) {
+          const allowedSpecialChars = [
+            "Minus",
+            "Equal",
+            "Backquote",
+            "BracketLeft",
+            "BracketRight",
+            "Backslash",
+            "IntlBackslash",
+            "Semicolon",
+            "Quote",
+            "Comma",
+            "Period",
+            "Slash",
+            "IntlRo",
+            "IntlYen",
+            "Space"
+          ];
+          const isSpecialChar = allowedSpecialChars.includes(e.code);
+          if (!isNum && !isLetter && !isSpecialChar) {
             return;
           }
           if (rowDisabled) return;
           e.stopPropagation();
-          startCellEdit(primarySelectedCellId, e.key);
+          startCellEdit(primarySelectedCellId, true);
         }, "onKeyDown")
       }),
       isCellEditable && entities.length > 50 && // test for this!!

package/index.es.js

@@ -15830,7 +15830,6 @@ var itemSizeEstimator = /* @__PURE__ */ __name(function itemSizeEstimator2() {
   return 41.36;
 }, "itemSizeEstimator");
 var ReactTableDefaults = defaultProps;
-var VIRTUALIZE_CUTOFF_LENGTH = 200;
 var ReactTable = function(_Methods) {
   _inherits$8(ReactTable2, _Methods);
   function ReactTable2(props) {
@@ -16416,7 +16415,7 @@ var ReactTable = function(_Methods) {
                   minWidth: rowMinWidth + "px"
                 })
               }, tBodyProps.rest),
-              _this2.props.noVirtual || pageRows.length < VIRTUALIZE_CUTOFF_LENGTH ? pageRows.map(function(d2, i2) {
+              pageRows.length < 200 ? pageRows.map(function(d2, i2) {
                 return makePageRow(d2, i2);
               }) : React__default.createElement(ReactList, {
                 type: "variable",
@@ -51098,10 +51097,10 @@ const RenderCell = /* @__PURE__ */ __name(({
       return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.reduxFormEditingCell;
     }
   );
-  const initialValue = useSelector(
+  const shouldEditableCellInputBeCleared = useSelector(
     (state) => {
       var _a2, _b, _c;
-      return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.reduxFormInitialValue;
+      return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.shouldEditableCellInputBeCleared;
     }
   );
   const [row] = args;
@@ -51154,7 +51153,7 @@ const RenderCell = /* @__PURE__ */ __name(({
           dataTest,
           cancelEdit: cancelCellEdit,
           isNumeric: column.type === "number",
-          initialValue: initialValue || text2,
+          initialValue: shouldEditableCellInputBeCleared ? void 0 : text2,
           finishEdit: /* @__PURE__ */ __name((newVal) => {
             finishCellEdit(cellId, newVal);
           }, "finishEdit")
@@ -57017,8 +57016,12 @@ const DataTable = /* @__PURE__ */ __name((_I) => {
     }
   }, [selectedCells]);
   const startCellEdit = useCallback(
-    (cellId, initialValue) => {
-      change$1("reduxFormInitialValue", initialValue);
+    (cellId, shouldClear) => {
+      if (shouldClear) {
+        change$1("shouldEditableCellInputBeCleared", true);
+      } else {
+        change$1("shouldEditableCellInputBeCleared", false);
+      }
       change$1("reduxFormEditingCell", (prev) => {
         if (prev === cellId) return cellId;
         setSelectedCells((prev2) => {
@@ -58679,12 +58682,30 @@ const DataTable = /* @__PURE__ */ __name((_I) => {
           const rowDisabled = isEntityDisabled(entity);
           const isNum = (_g = e.code) == null ? void 0 : _g.startsWith("Digit");
           const isLetter = (_h = e.code) == null ? void 0 : _h.startsWith("Key");
-          if (!isNum && !isLetter) {
+          const allowedSpecialChars = [
+            "Minus",
+            "Equal",
+            "Backquote",
+            "BracketLeft",
+            "BracketRight",
+            "Backslash",
+            "IntlBackslash",
+            "Semicolon",
+            "Quote",
+            "Comma",
+            "Period",
+            "Slash",
+            "IntlRo",
+            "IntlYen",
+            "Space"
+          ];
+          const isSpecialChar = allowedSpecialChars.includes(e.code);
+          if (!isNum && !isLetter && !isSpecialChar) {
             return;
           }
           if (rowDisabled) return;
           e.stopPropagation();
-          startCellEdit(primarySelectedCellId, e.key);
+          startCellEdit(primarySelectedCellId, true);
         }, "onKeyDown")
       }),
       isCellEditable && entities.length > 50 && // test for this!!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.7.36",
+  "version": "0.8.2",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/src/AdvancedOptions.spec.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import AdvancedOptions from "./AdvancedOptions";
+
+describe("AdvancedOptions", () => {
+  test("renders correctly with given props and default state", () => {
+    const { queryByText, container } = render(
+      <AdvancedOptions label="Test Label" content="Test Content" />
+    );
+    expect(queryByText("Test Label")).toBeInTheDocument();
+    expect(queryByText("Test Content")).not.toBeInTheDocument();
+
+    expect(
+      container.querySelector(".bp3-icon-caret-right")
+    ).toBeInTheDocument();
+  });
+
+  test("toggles content when clicked", () => {
+    const { getByText, queryByText, container } = render(
+      <AdvancedOptions label="Test Label" content="Test Content" />
+    );
+    fireEvent.click(getByText("Test Label"));
+    expect(queryByText("Test Content")).toBeInTheDocument();
+    expect(container.querySelector(".bp3-icon-caret-down")).toBeInTheDocument();
+  });
+});

package/src/AsyncValidateFieldSpinner/index.js

@@ -0,0 +1,12 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+import React from "react";
+import { Spinner } from "@blueprintjs/core";
+
+export default function AsyncValidateFieldSpinner({ validating }) {
+  if (validating) {
+    return <Spinner size="18" />;
+  } else {
+    return null;
+  }
+}

package/src/BlueprintError/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+
+export default function BlueprintError({ error }) {
+  if (!error) return null;
+  return (
+    <div className={classNames(Classes.FORM_GROUP, Classes.INTENT_DANGER)}>
+      <div className={classNames(Classes.FORM_HELPER_TEXT, "preserve-newline")}>
+        {error}
+      </div>
+    </div>
+  );
+}

package/src/BounceLoader/index.js

@@ -0,0 +1,16 @@
+/* taken from http://tobiasahlin.com/spinkit/ */
+import React from "react";
+import classNames from "classnames";
+import "./style.css";
+
+export function BounceLoader({ style, className }) {
+  return (
+    <div className={classNames("tg-bounce-loader", className)} style={style}>
+      <div className="rect1" />
+      <div className="rect2" />
+      <div className="rect3" />
+      <div className="rect4" />
+      <div className="rect5" />
+    </div>
+  );
+}

package/src/BounceLoader/style.css

@@ -0,0 +1,45 @@
+.tg-bounce-loader {
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.tg-bounce-loader > div {
+  background-color: #006cab;
+  height: 100%;
+  max-height: 30px;
+  width: 6px;
+  display: inline-block;
+  margin-right: 3px;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.tg-bounce-loader .rect2 {
+  animation-delay: -1.1s;
+}
+
+.tg-bounce-loader .rect3 {
+  animation-delay: -1s;
+}
+
+.tg-bounce-loader .rect4 {
+  animation-delay: -0.9s;
+}
+
+.tg-bounce-loader .rect5 {
+  animation-delay: -0.8s;
+}
+
+@keyframes sk-stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+  }
+}

package/src/CollapsibleCard/index.js

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { Button, Classes, Icon } from "@blueprintjs/core";
+import classNames from "classnames";
+import "./style.css";
+
+export default function CollapsibleCard({
+  title,
+  icon,
+  openTitleElements,
+  noCard = false,
+  className,
+  style,
+  children,
+  initialClosed = false,
+  toggle,
+  isOpen
+}) {
+  let [open, setOpen] = useState(!initialClosed);
+  if (isOpen !== undefined) open = isOpen;
+
+  const toggleCardInfo = () => {
+    if (toggle) toggle();
+    else {
+      setOpen(!open);
+    }
+  };
+
+  return (
+    <div
+      className={classNames({ "tg-card": !noCard, open }, className)}
+      style={{
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingLeft: 15,
+        paddingRight: 15,
+        ...style
+      }}
+    >
+      <div className="tg-card-header" style={{ marginBottom: 8 }}>
+        <div className="tg-card-header-title">
+          {icon && <Icon icon={icon} />}
+          <h6
+            style={{
+              marginBottom: 0,
+              marginRight: 10,
+              marginLeft: 10
+            }}
+          >
+            {title}
+          </h6>
+          <div>{open && openTitleElements}</div>
+        </div>
+        <div>
+          <Button
+            icon={open ? "minimize" : "maximize"}
+            className={classNames(
+              Classes.MINIMAL,
+              "info-btn",
+              "tg-collapse-toggle"
+            )}
+            onClick={toggleCardInfo}
+          />
+        </div>
+      </div>
+      {open && children}
+    </div>
+  );
+}

package/src/CollapsibleCard/style.css

@@ -0,0 +1,23 @@
+/* Use in the place of .bp3-card */
+.tg-card {
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  background: white;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.18);
+}
+
+.tg-card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tg-card-header-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}

package/src/DNALoader/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import classNames from "classnames";
+import "./style.css";
+
+export default function DNALoader({ style, className }) {
+  return (
+    <div className={classNames("dna-loader", className)} style={style}>
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+    </div>
+  );
+}