@teselagen/ui 0.10.4 → 0.10.5

package/package.json

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

package/src/DataTable/Columns.js

@@ -171,7 +171,7 @@ const RenderColumnHeader = ({
       })}
       onContextMenu={e => {
         if (!withDisplayOptions) {
-          return
+          return;
         }
         e.preventDefault();
         e.persist();

package/src/DataTable/DisplayOptions.js

@@ -176,10 +176,12 @@ const DisplayOptions = ({
               }}
             >
               Displayed Columns:  
-              {doNotSearchHiddenColumns && <InfoHelper>
-                Note: Hidden columns will NOT be used when searching the
-                datatable
-              </InfoHelper>}
+              {doNotSearchHiddenColumns && (
+                <InfoHelper>
+                  Note: Hidden columns will NOT be used when searching the
+                  datatable
+                </InfoHelper>
+              )}
             </h5>
             <div style={{ maxHeight: 260, overflowY: "auto", padding: 2 }}>
               {mainFields.map(getFieldCheckbox)}

package/src/DataTable/index.js

@@ -2761,7 +2761,7 @@ const DataTable = ({
     columns,
     currentParams,
     compact,
-    // withDisplayOptions,
+    withDisplayOptions,
     resetDefaultVisibility,
     editingCellSelectAll,
     entities,
@@ -2825,6 +2825,7 @@ const DataTable = ({
         noVirtual={noVirtual}
         className={classNames({
           isCellEditable,
+          "loading": isLoading,
           "tg-table-loading": isLoading,
           "tg-table-disabled": disabled
         })}

package/src/DataTable/style.css

@@ -253,7 +253,11 @@ body:not(.drag-active)
   user-select: none;
   background: #f7f7f7;
 }
-
+/* disable the table header interactions while the table is loading */
+.ReactTable.loading .rt-thead {
+  opacity: 0.7;
+  pointer-events: none;
+}
 .ReactTable .rt-thead {
   box-shadow: none;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -421,10 +425,6 @@ body:not(.drag-active)
   padding-left: 2px;
 }
 
-.ReactTable .-loading.disabled {
-  cursor: not-allowed;
-}
-
 /* to get the height to resize based on its container:  */
 .ReactTable {
   height: 100%;
@@ -540,14 +540,6 @@ body:not(.drag-active)
   color: inherit !important;
 }
 
-.bp3-dark .ReactTable .-loading {
-  background: #30404d !important;
-}
-
-.bp3-dark .ReactTable .-loading > div {
-  color: #f5f8fa !important;
-}
-
 .bp3-dark .ReactTable .rt-tr-group.selected {
   background: #26738cb0 !important;
 }

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.js

@@ -27,7 +27,13 @@ export function tableQueryParamsToHasuraClauses({
       const { type, path, searchDisabled, isHidden } = field;
       if (uniqueFieldsByPath[path]) return; // Skip if already added
       uniqueFieldsByPath[path] = true;
-      if (searchDisabled || field.filterDisabled || type === "color" || isHidden) return;
+      if (
+        searchDisabled ||
+        field.filterDisabled ||
+        type === "color" ||
+        isHidden
+      )
+        return;
 
       // Process each search term
       searchTerms.forEach(term => {

package/src/TgSelect/index.js

@@ -429,6 +429,7 @@ class TgSelect extends React.Component {
               }
             },
             inputProps: {
+              name: "tg-multiselect-input",
               autoFocus: autoFocus || autoOpen,
               onBlur,
               ...(tagInputProps && tagInputProps.inputProps)

package/ui.css

@@ -9721,7 +9721,11 @@ body:not(.drag-active)
   user-select: none;
   background: #f7f7f7;
 }
-
+/* disable the table header interactions while the table is loading */
+.ReactTable.loading .rt-thead {
+  opacity: 0.7;
+  pointer-events: none;
+}
 .ReactTable .rt-thead {
   box-shadow: none;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -9889,10 +9893,6 @@ body:not(.drag-active)
   padding-left: 2px;
 }
 
-.ReactTable .-loading.disabled {
-  cursor: not-allowed;
-}
-
 /* to get the height to resize based on its container:  */
 .ReactTable {
   height: 100%;
@@ -10008,14 +10008,6 @@ body:not(.drag-active)
   color: inherit !important;
 }
 
-.bp3-dark .ReactTable .-loading {
-  background: #30404d !important;
-}
-
-.bp3-dark .ReactTable .-loading > div {
-  color: #f5f8fa !important;
-}
-
 .bp3-dark .ReactTable .rt-tr-group.selected {
   background: #26738cb0 !important;
 }