@visns-studio/visns-components 6.1.5 → 6.1.7

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.1.5",
+    "version": "6.1.7",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -250,6 +250,13 @@ const loadData = async (
 const ROW_HEIGHT = 34;
 const GRID_CHROME = ROW_HEIGHT * 2 + 60; // header + filter row + footer
 
+/**
+ * Column types whose renderer names the grid column `${type}.${id}` instead of
+ * the plain field path. Their filter entries must use the same name, otherwise
+ * the grid cannot pair the filter with its column and no editor is rendered.
+ */
+const TYPE_PREFIXED_FILTER_NAMES = ['age', 'coding'];
+
 function fitToRows(dataCount, windowHeight) {
     const roomy = Math.max(windowHeight * 0.7, 550);
 
@@ -3655,6 +3662,7 @@ const DataGrid = forwardRef(
                                     column,
                                     commonProps,
                                     filterEditor,
+                                    filterEditorProps,
                                 });
                             case 'arrayCount':
                                 return renderArrayCountColumn({
@@ -3672,6 +3680,8 @@ const DataGrid = forwardRef(
                                 return renderCodingColumn({
                                     column,
                                     commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
                                     handleCoding,
                                 });
                             case 'colour':
@@ -4285,21 +4295,31 @@ const DataGrid = forwardRef(
                             let filterName = '';
 
                             if (Array.isArray(column.id)) {
-                                filterName = column.id.reduce(
-                                    (acc, id) => acc + `${id}.`,
-                                    ''
-                                );
+                                // The age/coding renderers name their column
+                                // `${type}.${id}` with the array stringified,
+                                // so the filter has to be named the same way or
+                                // the grid never matches it to the column.
+                                if (TYPE_PREFIXED_FILTER_NAMES.includes(column.type)) {
+                                    filterName = `${column.type}.${column.id}`;
+                                } else {
+                                    filterName = column.id.reduce(
+                                        (acc, id) => acc + `${id}.`,
+                                        ''
+                                    );
 
-                                if (
-                                    column.type === 'dropdown' &&
-                                    filterName.endsWith('.')
-                                ) {
-                                    filterName = filterName.slice(0, -1);
+                                    if (
+                                        column.type === 'dropdown' &&
+                                        filterName.endsWith('.')
+                                    ) {
+                                        filterName = filterName.slice(0, -1);
+                                    }
                                 }
                             } else {
                                 switch (column.type) {
                                     case 'address':
                                     case 'boolean':
+                                    case 'age':
+                                    case 'coding':
                                         filterName = `${column.type}.${column.id}`;
                                         break;
                                     default:
@@ -4308,7 +4328,10 @@ const DataGrid = forwardRef(
                                 }
                             }
 
-                            if (column.nameFrom) {
+                            if (
+                                column.nameFrom &&
+                                !TYPE_PREFIXED_FILTER_NAMES.includes(column.type)
+                            ) {
                                 filterName += column.nameFrom;
                             }
 

package/src/components/columns/ColumnRenderers.jsx

@@ -1641,11 +1641,17 @@ export const renderPlaceholderColumn = ({ column, commonProps }) => {
 };
 
 // Age Column Renderer
-export const renderAgeColumn = ({ column, commonProps, filterEditor }) => {
+export const renderAgeColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+}) => {
     return {
         ...commonProps,
         type: 'number',
         filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
         name: `${column.type}.${column.id}`,
         render: ({ data }) => {
             const value = column.id.reduce((acc, id) => {
@@ -1675,9 +1681,19 @@ export const renderAgeColumn = ({ column, commonProps, filterEditor }) => {
 };
 
 // Coding Column Renderer
-export const renderCodingColumn = ({ column, commonProps, handleCoding }) => {
+export const renderCodingColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+    handleCoding,
+}) => {
     return {
         ...commonProps,
+        // A coding column is a composite of several icon fields, so it cannot
+        // be sorted — but it can be filtered when the config declares one.
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
         name: `${column.type}.${column.id}`,
         sortable: false,
         render: ({ data }) => {

package/src/components/styles/GenericFormBuilder.module.scss

@@ -1828,18 +1828,19 @@ select:not(:placeholder-shown) + .fi__span {
     }
 }
 
-/* Tooltip positioning fixes */
-[data-tooltip-id] {
+/* Tooltip anchors inside the builder need a positioning context and a
+   z-index below the header. Scoped to the builder's own controls — a bare
+   `[data-tooltip-id]` here is GLOBAL (css-modules does not hash attribute
+   selectors), and until 6.1.6 it leaked `position: relative` onto every
+   tooltip-carrying element in every consuming app, breaking any anchor
+   that relied on `position: absolute` (e.g. copy-to-clipboard icons). */
+.dragHandle[data-tooltip-id],
+.editIcon[data-tooltip-id],
+.deleteIcon[data-tooltip-id],
+.moveIcon[data-tooltip-id],
+.collapseToggle[data-tooltip-id] {
     position: relative;
-    z-index: 50; /* Reduced further to stay below header */
-}
-
-/* React Tooltip specific z-index override */
-:global([data-tooltip-id="field-tooltip"]),
-:global([data-tooltip-id="action-tooltip"]),
-:global([data-tooltip-id="system-tooltip"]) {
-    position: relative;
-    z-index: 50 !important;
+    z-index: 50;
 }
 
 /* Ensure action tooltips take priority over field tooltips */