@visns-studio/visns-components 6.0.1 → 6.0.3

package/src/components/Form.jsx

@@ -1202,12 +1202,28 @@ function Form({
                 let validation = '';
 
                 if (['create', 'update'].includes(formType)) {
+                    // A group modal renders only the handful of fields it
+                    // names, so the rest of the form's required fields are
+                    // not on screen for the user to fill — validating them
+                    // would make the modal impossible to save
+                    const modalFieldIds =
+                        bulkEditMode &&
+                        bulkEditGroupData?.iconConfig?.formModal?.fields
+                            ? new Set(
+                                  bulkEditGroupData.iconConfig.formModal.fields
+                              )
+                            : null;
+
                     fields.forEach((item) => {
                         // Skip createOnly fields if formType is 'update'
                         if (formType === 'update' && item.createOnly) {
                             return;
                         }
 
+                        if (modalFieldIds && !modalFieldIds.has(item.id)) {
+                            return;
+                        }
+
                         // Check if the item is required
                         if (item.required) {
                             // Find the corresponding Field component to check for auto values
@@ -1573,6 +1589,20 @@ function Form({
                                     bulkEditGroupData.iconConfig.formModal;
                                 url = formModalConfig.url || url;
                                 method = formModalConfig.method || 'POST';
+
+                                // `anchorRow` modals act on the group through
+                                // one of its real records (the endpoint reads
+                                // the rest of the group off that row), so the
+                                // id goes in the path like an ordinary update
+                                if (formModalConfig.anchorRow) {
+                                    const anchorRow =
+                                        bulkEditGroupData.groupRows?.[0];
+                                    url += `/${
+                                        anchorRow?.[
+                                            formSettings.primaryKey || 'id'
+                                        ]
+                                    }`;
+                                }
                             } else {
                                 switch (formType) {
                                     case 'create':
@@ -1853,16 +1883,39 @@ function Form({
 
                         // Add bulk edit data to payload if in bulk edit mode
                         if (bulkEditMode && bulkEditGroupData) {
-                            payload = {
-                                ...payload,
-                                bulkEdit: true,
-                                groupValue: bulkEditGroupData.groupValue,
-                                groupKey:
-                                    bulkEditGroupData.iconConfig.formModal
-                                        ?.groupKey || ajaxSetting?.groupBy?.[0],
-                                rowIds: bulkEditGroupData.groupRowIds,
-                                ...bulkEditGroupData.iconConfig.formModal?.data,
-                            };
+                            const formModalConfig =
+                                bulkEditGroupData.iconConfig.formModal;
+
+                            if (formModalConfig?.anchorRow) {
+                                // A plain record update: send only what the
+                                // modal asked for, or the untouched blanks of
+                                // every other form field would wipe the row
+                                const allowed = new Set([
+                                    ...(formModalConfig.fields || []),
+                                    ...Object.keys(formModalConfig.data || {}),
+                                ]);
+
+                                payload = Object.keys(payload).reduce(
+                                    (acc, key) => {
+                                        if (allowed.has(key)) {
+                                            acc[key] = payload[key];
+                                        }
+                                        return acc;
+                                    },
+                                    { ...formModalConfig.data }
+                                );
+                            } else {
+                                payload = {
+                                    ...payload,
+                                    bulkEdit: true,
+                                    groupValue: bulkEditGroupData.groupValue,
+                                    groupKey:
+                                        formModalConfig?.groupKey ||
+                                        ajaxSetting?.groupBy?.[0],
+                                    rowIds: bulkEditGroupData.groupRowIds,
+                                    ...formModalConfig?.data,
+                                };
+                            }
                         }
 
                         const res = await CustomFetch(url, method, payload);
@@ -2416,13 +2469,83 @@ function Form({
                 toast.error('Failed to fetch data:', error);
             }
         } else {
+            const formModalConfig =
+                bulkEditGroupData?.iconConfig?.formModal || null;
+
+            // Anchor-row modals submit against one real record, and the
+            // endpoint reads that record's current values back out of the
+            // payload (adding a header means "these plus this new one"), so
+            // seed from the anchor rather than from what the group shares.
+            // `seedFields` adds rows values a field needs but does not submit
+            // — e.g. the job id a conflict check excludes itself by.
+            if (
+                formModalConfig?.anchorRow &&
+                bulkEditGroupData?.groupRows?.length
+            ) {
+                const anchorRow = bulkEditGroupData.groupRows[0];
+                const seedIds = [
+                    ...(formModalConfig.fields || []),
+                    ...(formModalConfig.seedFields || []),
+                ];
+
+                seedIds.forEach((id) => {
+                    const field = formSettings.fields.find((f) => f.id === id);
+                    const relationKey = field?.relation?.[0];
+                    const relationValue = relationKey
+                        ? anchorRow[relationKey]
+                        : undefined;
+
+                    if (Array.isArray(relationValue)) {
+                        // The modal represents the whole group, but each
+                        // member row may hold only its own slice of the
+                        // relation (a split member carries one header), so
+                        // seed the union across every row, deduped. The
+                        // grow endpoint ignores ids a member already holds.
+                        const keyOf = (entry) =>
+                            entry[field.relation_from || 'id'];
+                        const seen = new Set();
+
+                        _formData[id] = bulkEditGroupData.groupRows
+                            .flatMap((row) =>
+                                Array.isArray(row[relationKey])
+                                    ? row[relationKey]
+                                    : []
+                            )
+                            .filter((entry) => {
+                                if (seen.has(keyOf(entry))) {
+                                    return false;
+                                }
+                                seen.add(keyOf(entry));
+                                return true;
+                            })
+                            .map((entry) => ({
+                                value: keyOf(entry),
+                                label:
+                                    entry[field.relationName] ??
+                                    entry.label ??
+                                    entry.name,
+                                // Existing memberships are locked in the
+                                // modal — it can only add, never take away
+                                isFixed: true,
+                            }));
+                        return;
+                    }
+
+                    if (anchorRow[id] !== undefined) {
+                        _formData[id] = anchorRow[id];
+                    }
+                });
+
+                setFormData(_formData);
+                return;
+            }
+
             // Bulk edit opens without a record fetch (columnId is null), so
             // seed each field with the value the group rows already share —
             // otherwise saved values (e.g. an assigned user) render blank and
             // required fields force a re-pick on every open.
             if (bulkEditMode && bulkEditGroupData?.groupRows?.length) {
-                const modalFields =
-                    bulkEditGroupData.iconConfig?.formModal?.fields || [];
+                const modalFields = formModalConfig?.fields || [];
 
                 formSettings.fields.forEach((item) => {
                     const { id, type, parent } = item;
@@ -3418,6 +3541,20 @@ function Form({
                                                       formData
                                                   )
                                                 : false;
+                                        // A group modal whose save means one
+                                        // narrow thing (e.g. "add a header")
+                                        // must not also offer the stage-
+                                        // completing saveAnother, which would
+                                        // fire against every row in the group
+                                        const showSaveAnother =
+                                            formSettings.update?.hasOwnProperty(
+                                                'saveAnother'
+                                            ) &&
+                                            !(
+                                                bulkEditMode &&
+                                                bulkEditGroupData?.iconConfig
+                                                    ?.formModal?.hideSaveAnother
+                                            );
 
                                         return (
                                             <>
@@ -3431,9 +3568,7 @@ function Form({
                                                     >
                                                         Save & Close
                                                     </button>
-                                                    {formSettings.update?.hasOwnProperty(
-                                                        'saveAnother'
-                                                    ) && (
+                                                    {showSaveAnother && (
                                                         <button
                                                             className={
                                                                 styles.btn

package/src/components/MultiSelect.jsx

@@ -64,6 +64,13 @@ const CustomMultiValue = (props) => {
 
 // Custom MultiValueRemove component with proper removal handling
 const CustomMultiValueRemove = (props) => {
+    // Fixed values cannot be deselected: render no × at all — the module
+    // SCSS forces `display` on the remove button with !important, so
+    // hiding it from the styles function is not enough.
+    if (props.data?.isFixed) {
+        return null;
+    }
+
     const handleRemove = (e) => {
         e.stopPropagation();
         
@@ -334,7 +341,27 @@ function MultiSelect({
                         action: action
                     });
                 }
-                
+
+                // Values seeded with isFixed represent memberships this
+                // field is not allowed to take away (e.g. a tag's existing
+                // headers in an add-only group modal): ignore their removal
+                // and survive a clear-all.
+                if (
+                    ['remove-value', 'pop-value'].includes(action.action) &&
+                    action.removedValue?.isFixed
+                ) {
+                    return;
+                }
+
+                if (action.action === 'clear') {
+                    const fixed = selectValue.filter((v) => v?.isFixed);
+
+                    if (fixed.length) {
+                        onChange(fixed, action, settings.id);
+                        return;
+                    }
+                }
+
                 // Special handling for limit=1: keep only the most recent selection
                 if (
                     settings.limit === 1 &&
@@ -435,7 +462,8 @@ function MultiSelect({
                 multiValueRemove: (base, state) => ({
                     ...base,
                     padding: '0 4px',
-                    display: 'flex',
+                    // Fixed values cannot be deselected, so they get no ×
+                    display: state.data?.isFixed ? 'none' : 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     margin: '0',

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

@@ -357,7 +357,7 @@
 
     /* Add custom styles to override react-grid-gallery */
     :global {
-        /* These styles will be applied globally */
+        // These styles will be applied globally
         .ReactGridGallery_tile {
             border-radius: 6px !important;
             overflow: hidden !important;
@@ -508,7 +508,7 @@
 
 /* Date field styling for uniform width */
 :global {
-    /* Target date cells specifically */
+    // Target date cells specifically
     .InovuaReactDataGrid__cell[data-column-id*='date'],
     .InovuaReactDataGrid__cell[data-column-id*='Date'] {
         min-width: 120px !important;
@@ -516,7 +516,7 @@
         max-width: 120px !important;
     }
 
-    /* Target datetime cells specifically */
+    // Target datetime cells specifically
     .InovuaReactDataGrid__cell[data-column-id*='datetime'],
     .InovuaReactDataGrid__cell[data-column-id*='Datetime'] {
         min-width: 160px !important;
@@ -524,7 +524,7 @@
         max-width: 160px !important;
     }
 
-    /* Target daterange cells specifically */
+    // Target daterange cells specifically
     .InovuaReactDataGrid__cell[data-column-id*='daterange'] {
         min-width: 200px !important;
         width: 200px !important;
@@ -1048,6 +1048,24 @@
     margin-left: 4px;
 }
 
+// treeGroupBy parent rows: the group's controls live in an ordinary grid
+// cell, so keep the buttons on one line and let the label take what is left
+.treeParentHeader {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    width: 100%;
+    overflow: hidden;
+}
+
+.treeParentLabel {
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-right: 6px;
+}
+
 .groupValue {
     font-size: 0.85rem;
     color: var(--secondary-color, #1f2937);

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

@@ -91,14 +91,14 @@
         overflow-y: auto !important;
     }
 
-    /* Control styles */
+    // Control styles
     .visns-select__control {
         min-height: 50px !important;
         height: auto !important; /* Allow height to grow with content */
         overflow: visible !important;
     }
 
-    /* Value container styles */
+    // Value container styles
     .visns-select__value-container {
         padding: 2px 8px !important;
         flex-wrap: wrap !important;
@@ -106,7 +106,7 @@
         overflow-y: auto !important; /* Add scrolling when needed */
     }
 
-    /* Indicator styles */
+    // Indicator styles
     .visns-select__indicators {
         display: flex !important;
         align-items: center !important;
@@ -130,7 +130,7 @@
         margin-left: 2px !important;
     }
 
-    /* Multi-value styles */
+    // Multi-value styles
     .visns-select__multi-value {
         margin: 2px !important;
         padding: 2px 4px !important;
@@ -187,7 +187,7 @@
         transform: scale(0.95) !important;
     }
 
-    /* Fix for modals */
+    // Fix for modals
     .popup-content {
         overflow: visible !important;
     }
@@ -196,7 +196,7 @@
         overflow: visible !important;
     }
 
-    /* CSS class fixes for React Select */
+    // CSS class fixes for React Select
     .css-13cymwt-control,
     .css-t3ipsp-control {
         min-height: 50px !important;
@@ -204,7 +204,7 @@
         overflow: visible !important;
     }
 
-    /* Option styling for description */
+    // Option styling for description
     .visns-select__option {
         padding: 8px 12px !important;
     }
@@ -216,7 +216,7 @@
         overflow-y: auto !important;
     }
 
-    /* Indicators container */
+    // Indicators container
     .css-1hb7zxy-IndicatorsContainer {
         display: flex !important;
         align-items: center !important;
@@ -224,7 +224,7 @@
         height: auto !important;
     }
 
-    /* Individual indicators */
+    // Individual indicators
     .css-1xc3v61-indicatorContainer,
     .css-15lsz6c-indicatorContainer {
         padding: 8px !important;
@@ -233,7 +233,7 @@
         align-self: stretch !important;
     }
 
-    /* Separator */
+    // Separator
     .css-1u9des2-indicatorSeparator {
         align-self: stretch !important;
         margin: 4px 0 !important;

package/src/components/styles/global.css

@@ -316,18 +316,22 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     border-width: 1px;
     box-sizing: border-box;
     box-shadow: none !important;
+}
 
-    &--is-focused {
-        border-color: var(--primary-color) !important;
-        box-shadow: none !important;
-        border-width: 1px !important;
-    }
+/* These were written as `&--is-focused` / `&--menu-is-open` nested inside the
+   rule above. That is Sass syntax — this is a plain .css file, and CSS nesting
+   cannot concatenate a suffix onto the parent selector, so both rules were
+   invalid and the focus/menu-open border colour never applied. */
+.visns-select__control--is-focused {
+    border-color: var(--primary-color) !important;
+    box-shadow: none !important;
+    border-width: 1px !important;
+}
 
-    &--menu-is-open {
-        border-color: var(--primary-color) !important;
-        box-shadow: none !important;
-        border-width: 1px !important;
-    }
+.visns-select__control--menu-is-open {
+    border-color: var(--primary-color) !important;
+    box-shadow: none !important;
+    border-width: 1px !important;
 }
 
 .visns-select__menu {