@teselagen/ui 0.9.8 → 0.10.3

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.js

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

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.test.js

@@ -63,6 +63,27 @@ describe("tableQueryParamsToHasuraClauses", () => {
       offset: 0
     });
   });
+  it("shouldn't search on hidden fields", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test",
+      schema: {
+        fields: [
+          { path: "name", type: "string", isHidden: true },
+          { path: "age", type: "number" },
+          { path: "isActive", type: "boolean" },
+          { path: "email", type: "string" }
+        ]
+      }
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [{ email: { _ilike: "%test%" } }]
+      },
+      order_by: [],
+      limit: 25,
+      offset: 0
+    });
+  });
   it("should flatten queries with dup paths", () => {
     const result = tableQueryParamsToHasuraClauses({
       searchTerm: "test",

package/src/DataTable/utils/useTableEntities.js

@@ -29,10 +29,11 @@ export const useTableEntities = tableFormName => {
     [dispatch, tableFormName]
   );
 
-  const { allOrderedEntities, selectedEntities } = useSelector(state => ({
+  const entitySelector = state => ({
     allOrderedEntities: state.form?.[tableFormName]?.values?.allOrderedEntities,
     selectedEntities:
       state.form?.[tableFormName]?.values?.reduxFormSelectedEntityIdMap
-  }));
+  });
+  const { allOrderedEntities, selectedEntities } = useSelector(entitySelector);
   return { selectTableEntities, allOrderedEntities, selectedEntities };
 };

package/src/DataTable/utils/withTableParams.js

@@ -76,7 +76,39 @@ export const useTableParams = props => {
     [_defaults, controlled_pageSize]
   );
 
-  const convertedSchema = useMemo(() => convertSchema(schema), [schema]);
+  const formValueStateSelector = state =>
+    formValueSelector(formName)(
+      state,
+      "reduxFormQueryParams",
+      "reduxFormSelectedEntityIdMap",
+      "reduxFormReadOnlyFieldOptions"
+    );
+
+  const {
+    reduxFormQueryParams: _reduxFormQueryParams = {},
+    reduxFormSelectedEntityIdMap: _reduxFormSelectedEntityIdMap = {},
+    reduxFormReadOnlyFieldOptions
+  } = useSelector(formValueStateSelector);
+
+  const convertedSchema = useMemo(() => {
+    const pathToHiddenMap = {};
+    reduxFormReadOnlyFieldOptions?.forEach(({ path, isHidden }) => {
+      if (path) pathToHiddenMap[path] = isHidden;
+    });
+    const s = convertSchema(schema);
+
+    s.fields = s.fields.map(f => {
+      const isHidden = pathToHiddenMap[f.path];
+      if (pathToHiddenMap[f.path] !== undefined) {
+        return {
+          ...f,
+          isHidden
+        };
+      }
+      return f;
+    });
+    return s;
+  }, [schema, reduxFormReadOnlyFieldOptions]);
 
   if (isLocalCall) {
     if (!noForm && (!formName || formName === "tgDataTable")) {
@@ -98,17 +130,6 @@ export const useTableParams = props => {
     }
   }
 
-  const {
-    reduxFormQueryParams: _reduxFormQueryParams = {},
-    reduxFormSelectedEntityIdMap: _reduxFormSelectedEntityIdMap = {}
-  } = useSelector(state =>
-    formValueSelector(formName)(
-      state,
-      "reduxFormQueryParams",
-      "reduxFormSelectedEntityIdMap"
-    )
-  );
-
   // We want to make sure we don't rerender everything unnecessary
   // with redux-forms we tend to do unnecessary renders
   const reduxFormQueryParams = useDeepEqualMemo(_reduxFormQueryParams);
@@ -228,7 +249,7 @@ export const useTableParams = props => {
 
   const tableParams = useMemo(
     () => ({
-      changeFormValue: change,
+      changeFormValue: (...args) => change(...args),
       selectedEntities,
       ..._tableParams,
       formName,

package/src/DividerWithText/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+import "./style.css";
+
+/**
+ * A divider component with optional text in the middle.
+ * Compatible with BlueprintJS styling.
+ *
+ * @param {Object} props - Component props
+ * @param {string} [props.text] - Optional text to display in the middle of the divider
+ * @param {string} [props.className] - Additional CSS class name
+ * @param {React.CSSProperties} [props.style] - Additional inline styles
+ * @returns {JSX.Element} The divider component
+ */
+export default function DividerWithText({ text, className, style }) {
+  return (
+    <div
+      className={classNames(
+        Classes.DIVIDER,
+        "tg-blueprint-divider",
+        { "tg-blueprint-divider-with-text": !!text },
+        className
+      )}
+      style={style}
+    >
+      {text && <span className="tg-blueprint-divider-text">{text}</span>}
+    </div>
+  );
+}

package/src/DividerWithText/style.css

@@ -0,0 +1,37 @@
+.tg-blueprint-divider {
+  position: relative;
+}
+
+/* Override Blueprint's default divider when we use text */
+.tg-blueprint-divider-with-text.bp3-divider {
+  /* Remove Blueprint's default border styling to avoid duplication */
+  border: none;
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  height: auto;
+}
+
+.tg-blueprint-divider-with-text::before,
+.tg-blueprint-divider-with-text::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid rgba(16, 22, 26, 0.15);
+}
+
+.tg-blueprint-divider-text {
+  padding: 0 10px;
+  font-size: 14px;
+  color: rgba(92, 112, 128, 0.6);
+  white-space: nowrap;
+}
+
+/* Dark theme support */
+.bp3-dark .tg-blueprint-divider-with-text::before,
+.bp3-dark .tg-blueprint-divider-with-text::after {
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+.bp3-dark .tg-blueprint-divider-text {
+  color: rgba(167, 182, 194, 0.6);
+}

package/src/InfoHelper/style.css

@@ -1,5 +1,6 @@
 .bp3-popover.tg-info-helper-popover .bp3-popover-content {
   max-width: 340px;
+  white-space: pre-line;
 }
 
 .info-helper-clickable .bp3-popover-target {

package/src/UploadCsvWizard.js

@@ -185,7 +185,9 @@ export const SimpleInsertDataDialog = compose(
   }, [dataTableForm, dispatch]);
 
   const _reduxFormCellValidation = useSelector(
-    state => state.form?.[dataTableForm]?.values.reduxFormCellValidation
+    function _reduxFormCellValidationSelector(state) {
+      return state.form?.[dataTableForm]?.values.reduxFormCellValidation;
+    }
   );
   const reduxFormCellValidation = useDeepEqualMemo(_reduxFormCellValidation);
 
@@ -272,13 +274,13 @@ const UploadCsvWizardDialogInner = reduxForm()(({
   const {
     reduxFormEntities: _reduxFormEntities,
     reduxFormCellValidation: _reduxFormCellValidation
-  } = useSelector(state =>
-    formValueSelector(datatableFormName)(
+  } = useSelector(function dtFormNameSelector(state) {
+    return formValueSelector(datatableFormName)(
       state,
       "reduxFormEntities",
       "reduxFormCellValidation"
-    )
-  );
+    );
+  });
 
   const reduxFormEntities = useDeepEqualMemo(_reduxFormEntities);
   const reduxFormCellValidation = useDeepEqualMemo(_reduxFormCellValidation);

package/src/index.js

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

package/src/utils/hooks/useDeepEqualMemo.js

@@ -1,9 +1,9 @@
-import { isEqual } from "lodash-es";
 import { useEffect, useRef } from "react";
+import { isEqualIgnoreFunctions } from "../isEqualIgnoreFunctions";
 
 export const useDeepEqualMemo = value => {
   const ref = useRef();
-  if (!isEqual(value, ref.current)) {
+  if (!isEqualIgnoreFunctions(value, ref.current)) {
     ref.current = value;
   }
   return ref.current;

package/src/utils/isEqualIgnoreFunctions.js

@@ -0,0 +1,23 @@
+/**
+ * This HOC compares props to create a pure component that will only update
+ * when props are not deep equal. It will compare the string values of functions
+ */
+import { isEqualWith, isFunction } from "lodash-es";
+
+/**
+ * tgreen: This is an awful function which we should come up with a better solution for
+ * @param {*} o1
+ * @param {*} o2
+ */
+export const isEqualIgnoreFunctions = (o1, o2) => {
+  const isEq = isEqualWith(o1, o2, function (val1, val2) {
+    if (isFunction(val1) && isFunction(val2)) {
+      return val1 === val2 || val1.toString() === val2.toString();
+    }
+    // tgreen: we were seeing an issue where the isEq would infinite loop on react children
+    // components. We decided to just ignore them (assume they are equal)
+    if (val1 && val1.constructor && val1.constructor.name === "FiberNode")
+      return true;
+  });
+  return isEq;
+};

package/src/utils/pureNoFunc.js

@@ -3,28 +3,12 @@
  * when props are not deep equal. It will compare the string values of functions
  */
 import { shouldUpdate } from "recompose";
-import { isEqualWith, isFunction } from "lodash-es";
-
-/**
- * tgreen: This is an awful function which we should come up with a better solution for
- * @param {*} o1
- * @param {*} o2
- */
-const isEq = (o1, o2) => {
-  const isEq = isEqualWith(o1, o2, function (val1, val2) {
-    if (isFunction(val1) && isFunction(val2)) {
-      return val1 === val2 || val1.toString() === val2.toString();
-    }
-    // tgreen: we were seeing an issue where the isEq would infinite loop on react children
-    // components. We decided to just ignore them (assume they are equal)
-    if (val1 && val1.constructor && val1.constructor.name === "FiberNode")
-      return true;
-  });
-  return isEq;
-};
+import { isEqualIgnoreFunctions } from "./isEqualIgnoreFunctions";
 
 const pure = BaseComponent => {
-  const hoc = shouldUpdate((props, nextProps) => !isEq(props, nextProps));
+  const hoc = shouldUpdate(
+    (props, nextProps) => !isEqualIgnoreFunctions(props, nextProps)
+  );
   return hoc(BaseComponent);
 };
 

package/ui.css

@@ -9356,6 +9356,43 @@ button:not(:disabled):active {
     margin-left: 16px;
   }
 }
+.tg-blueprint-divider {
+  position: relative;
+}
+
+/* Override Blueprint's default divider when we use text */
+.tg-blueprint-divider-with-text.bp3-divider {
+  /* Remove Blueprint's default border styling to avoid duplication */
+  border: none;
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  height: auto;
+}
+
+.tg-blueprint-divider-with-text::before,
+.tg-blueprint-divider-with-text::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid rgba(16, 22, 26, 0.15);
+}
+
+.tg-blueprint-divider-text {
+  padding: 0 10px;
+  font-size: 14px;
+  color: rgba(92, 112, 128, 0.6);
+  white-space: nowrap;
+}
+
+/* Dark theme support */
+.bp3-dark .tg-blueprint-divider-with-text::before,
+.bp3-dark .tg-blueprint-divider-with-text::after {
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+.bp3-dark .tg-blueprint-divider-text {
+  color: rgba(167, 182, 194, 0.6);
+}
 .rg-celleditor-input,
 .rg-celleditor input {
   border: none;
@@ -9423,6 +9460,7 @@ button:not(:disabled):active {
 }
 .bp3-popover.tg-info-helper-popover .bp3-popover-content {
   max-width: 340px;
+  white-space: pre-line;
 }
 
 .info-helper-clickable .bp3-popover-target {

package/utils/isEqualIgnoreFunctions.d.ts

@@ -0,0 +1 @@
+export function isEqualIgnoreFunctions(o1: any, o2: any): boolean;

package/DataTable/EditabelCell.d.ts

@@ -1,7 +0,0 @@
-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/ReactTable.d.ts

@@ -1,78 +0,0 @@
-export function ReactTable({ addFilters, cellRenderer, change, columns, compact, contextMenu, currentParams, disabled, doNotShowEmptyRows, doNotValidateUntouchedRows, editingCellSelectAll, entities, expandedEntityIdMap, extraCompact, filters, formName, getCellHoverText, getRowClassName, handleCellClick, handleCopySelectedRows, history, insertRows, isCellEditable, isCopyable, isEntityDisabled, isLoading, isLocalCall, isSelectionARectangle, isSimple, isSingleSelect, maxHeight, moveColumnPersist, mustClickCheckboxToSelect, noDeselectAll, noRowsFoundMessage, noSelect, noUserSelect, noVirtual, numRows, onDeselect, onDoubleClick, onlyShowRowsWErrors, onMultiRowSelect, onRowClick, onRowSelect, onSingleRowSelect, order, primarySelectedCellId, ReactTableProps, recordIdToIsVisibleMap, reduxFormCellValidation, reduxFormEditingCell, reduxFormSelectedEntityIdMap, refocusTable, removeSingleFilter, resizePersist, schema, selectedCells, setColumns, setExpandedEntityIdMap, setNewParams, setOrder, setRecordIdToIsVisibleMap, setSelectedCells, shouldShowSubComponent, startCellEdit, style, SubComponent, tableConfig, tableRef, updateEntitiesHelper, updateValidation, withCheckboxes, withExpandAndCollapseAllButton, withFilter, withSort }: {
-    addFilters: any;
-    cellRenderer: any;
-    change: any;
-    columns: any;
-    compact: any;
-    contextMenu: any;
-    currentParams: any;
-    disabled: any;
-    doNotShowEmptyRows: any;
-    doNotValidateUntouchedRows: any;
-    editingCellSelectAll: any;
-    entities: any;
-    expandedEntityIdMap: any;
-    extraCompact: any;
-    filters: any;
-    formName: any;
-    getCellHoverText: any;
-    getRowClassName: any;
-    handleCellClick: any;
-    handleCopySelectedRows: any;
-    history: any;
-    insertRows: any;
-    isCellEditable: any;
-    isCopyable: any;
-    isEntityDisabled: any;
-    isLoading: any;
-    isLocalCall: any;
-    isSelectionARectangle: any;
-    isSimple: any;
-    isSingleSelect: any;
-    maxHeight: any;
-    moveColumnPersist: any;
-    mustClickCheckboxToSelect: any;
-    noDeselectAll: any;
-    noRowsFoundMessage: any;
-    noSelect: any;
-    noUserSelect: any;
-    noVirtual: any;
-    numRows: any;
-    onDeselect: any;
-    onDoubleClick: any;
-    onlyShowRowsWErrors: any;
-    onMultiRowSelect: any;
-    onRowClick: any;
-    onRowSelect: any;
-    onSingleRowSelect: any;
-    order: any;
-    primarySelectedCellId: any;
-    ReactTableProps: any;
-    recordIdToIsVisibleMap: any;
-    reduxFormCellValidation: any;
-    reduxFormEditingCell: any;
-    reduxFormSelectedEntityIdMap: any;
-    refocusTable: any;
-    removeSingleFilter: any;
-    resizePersist: any;
-    schema: any;
-    selectedCells: any;
-    setColumns: any;
-    setExpandedEntityIdMap: any;
-    setNewParams: any;
-    setOrder: any;
-    setRecordIdToIsVisibleMap: any;
-    setSelectedCells: any;
-    shouldShowSubComponent: any;
-    startCellEdit: any;
-    style: any;
-    SubComponent: any;
-    tableConfig: any;
-    tableRef: any;
-    updateEntitiesHelper: any;
-    updateValidation: any;
-    withCheckboxes: any;
-    withExpandAndCollapseAllButton: any;
-    withFilter: any;
-    withSort: any;
-}): import("react/jsx-runtime").JSX.Element;

package/DataTable/defaultProps.d.ts

@@ -1,43 +0,0 @@
-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

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

package/DataTable/utils/types/Entity.d.ts

@@ -1,9 +0,0 @@
-type SharedFields = {
-    _isClean?: boolean;
-};
-export type Entity = ({
-    id?: string | number;
-} | {
-    code?: string;
-}) & SharedFields;
-export {};

package/DataTable/utils/types/Field.d.ts

@@ -1,4 +0,0 @@
-export type Field = {
-    path: string;
-    type: "genericSelect" | string;
-};

package/DataTable/utils/types/OrderBy.d.ts

@@ -1,11 +0,0 @@
-type OrderByClause<T = {
-    id: string;
-}> = {
-    path?: string;
-    direction?: "asc" | "desc";
-    type?: string;
-    sortFn?: ((record: T) => unknown) | string | Array<((record: T) => unknown) | string>;
-    getValueToFilterOn?: (record: T) => unknown;
-};
-export type OrderBy = OrderByClause | OrderByClause[] | Record<string, "asc" | "desc">;
-export {};

package/DataTable/utils/types/Schema.d.ts

@@ -1,4 +0,0 @@
-import { Field } from './Field';
-export type Schema = {
-    fields: Field[];
-};

package/DataTable/utils/useDeepEqualMemo.d.ts

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

package/DataTable/utils/useHotKeysWrapper.d.ts

@@ -1,29 +0,0 @@
-export function useHotKeysWrapper({ change, entities, entitiesUndoRedoStack, formatAndValidateEntities, handleCopySelectedRows, isCellEditable, isEntityDisabled, isSingleSelect, noDeselectAll, noSelect, onDeselect, onMultiRowSelect, onRowSelect, onSingleRowSelect, primarySelectedCellId, reduxFormCellValidation, reduxFormSelectedEntityIdMap, schema, selectedCells, setEntitiesUndoRedoStack, setNoVirtual, setSelectedCells, startCellEdit, tableRef, updateEntitiesHelper, updateValidation, waitUntilAllRowsAreRendered }: {
-    change: any;
-    entities: any;
-    entitiesUndoRedoStack: any;
-    formatAndValidateEntities: any;
-    handleCopySelectedRows: any;
-    isCellEditable: any;
-    isEntityDisabled: any;
-    isSingleSelect: any;
-    noDeselectAll: any;
-    noSelect: any;
-    onDeselect: any;
-    onMultiRowSelect: any;
-    onRowSelect: any;
-    onSingleRowSelect: any;
-    primarySelectedCellId: any;
-    reduxFormCellValidation: any;
-    reduxFormSelectedEntityIdMap: any;
-    schema: any;
-    selectedCells: any;
-    setEntitiesUndoRedoStack: any;
-    setNoVirtual: any;
-    setSelectedCells: any;
-    startCellEdit: any;
-    tableRef: any;
-    updateEntitiesHelper: any;
-    updateValidation: any;
-    waitUntilAllRowsAreRendered: any;
-}): import('../../../../../node_modules/@blueprintjs/core').UseHotkeysReturnValue;

package/DataTable/utils/useTableParams.d.ts

@@ -1,49 +0,0 @@
-/**
- *  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;
-};