Multi value text choices

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.12.1",
+  "version": "7.13.0-fb-mvtc.23",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [
@@ -50,7 +50,7 @@
   "homepage": "https://github.com/LabKey/labkey-ui-components#readme",
   "dependencies": {
     "@hello-pangea/dnd": "18.0.1",
-    "@labkey/api": "1.44.1",
+    "@labkey/api": "1.45.0-fb-mvtc.5",
     "@testing-library/dom": "~10.4.1",
     "@testing-library/jest-dom": "~6.9.1",
     "@testing-library/react": "~16.3.0",

packages/components/releaseNotes/components.md

@@ -1,6 +1,13 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.X
+*Released*: X January 2026
+- Multi value text choices
+  - Added new MULTI_CHOICE_RANGE_URI for defining MVTC fields and updated utils to check against data type
+  - renamed joinValues prop for SelectInput to skipJoinValues to align with its actual usage
+  - Modified FilterFacetedSelector and QueryFilterPanel to handle array value selecting for MVTC
+
 ### version 7.12.1
 *Released*: 14 January 2026
 - Merge from release26.1-SNAPSHOT to develop

packages/components/src/internal/components/domainproperties/AdvancedSettings.test.tsx

@@ -22,6 +22,7 @@ import {
     DOMAIN_LAST_ENTERED_DEFAULT,
     DOMAIN_NON_EDITABLE_DEFAULT,
     INT_RANGE_URI,
+    MULTI_CHOICE_RANGE_URI,
     PHILEVEL_FULL_PHI,
     PHILEVEL_LIMITED_PHI,
 } from './constants';
@@ -226,4 +227,38 @@ describe('AdvancedSettings', () => {
         id = createFormInputId(DOMAIN_FIELD_SHOWNINDETAILSVIEW, _domainIndex, _index);
         expect(document.querySelectorAll('#' + id)).toHaveLength(1);
     });
+
+    test('Multi-value Text Choice hidden properties', async () => {
+        await act(async () => {
+            renderWithAppContext(
+                <AdvancedSettings
+                    {...props}
+                    field={DomainField.create({ ...fieldProps, rangeURI: MULTI_CHOICE_RANGE_URI })}
+                />
+            );
+        });
+
+        let id = createFormInputId(DOMAIN_FIELD_DEFAULT_VALUE_TYPE, _domainIndex, _index);
+        expect(document.querySelectorAll('#' + id)).toHaveLength(1);
+        id = createFormInputId(DOMAIN_FIELD_HIDDEN, _domainIndex, _index);
+        expect(document.querySelectorAll('#' + id)).toHaveLength(1);
+        id = createFormInputId(DOMAIN_FIELD_SHOWNININSERTVIEW, _domainIndex, _index);
+        expect(document.querySelectorAll('#' + id)).toHaveLength(1);
+        id = createFormInputId(DOMAIN_FIELD_SHOWNINUPDATESVIEW, _domainIndex, _index);
+        expect(document.querySelectorAll('#' + id)).toHaveLength(1);
+        id = createFormInputId(DOMAIN_FIELD_SHOWNINDETAILSVIEW, _domainIndex, _index);
+        expect(document.querySelectorAll('#' + id)).toHaveLength(1);
+        id = createFormInputId(DOMAIN_FIELD_PHI, _domainIndex, _index);
+        expect(document.querySelectorAll('#' + id)).toHaveLength(1);
+        id = createFormInputId(DOMAIN_FIELD_CONSTRAINT, _domainIndex, _index);
+        expect(document.querySelectorAll('#' + id)).toHaveLength(0);
+        id = createFormInputId(DOMAIN_FIELD_MEASURE, _domainIndex, _index);
+        expect(document.querySelectorAll('#' + id)).toHaveLength(0);
+        id = createFormInputId(DOMAIN_FIELD_DIMENSION, _domainIndex, _index);
+        expect(document.querySelectorAll('#' + id)).toHaveLength(0);
+        id = createFormInputId(DOMAIN_FIELD_MVENABLED, _domainIndex, _index);
+        expect(document.querySelectorAll('#' + id)).toHaveLength(0);
+        id = createFormInputId(DOMAIN_FIELD_RECOMMENDEDVARIABLE, _domainIndex, _index);
+        expect(document.querySelectorAll('#' + id)).toHaveLength(0);
+    });
 });

packages/components/src/internal/components/domainproperties/AdvancedSettings.tsx

@@ -448,7 +448,7 @@ export class AdvancedSettings extends React.PureComponent<AdvancedSettingsProps,
                     </div>
                 )}
 
-                {allowUniqueConstraintProperties && !field.isCalculatedField() && (
+                {allowUniqueConstraintProperties && !field.isCalculatedField() && !field.isMultiChoiceField() && (
                     <div className="row">
                         <div className="col-xs-4">
                             <DomainFieldLabel
@@ -543,20 +543,22 @@ export class AdvancedSettings extends React.PureComponent<AdvancedSettingsProps,
                         </LabelHelpTip>
                     </CheckboxLK>
                 )}
-                <CheckboxLK
-                    checked={recommendedVariable}
-                    id={createFormInputId(DOMAIN_FIELD_RECOMMENDEDVARIABLE, domainIndex, index)}
-                    name={createFormInputName(DOMAIN_FIELD_RECOMMENDEDVARIABLE)}
-                    onChange={this.handleCheckbox}
-                >
-                    Make this field a recommended variable
-                    <LabelHelpTip title="Recommended Variable">
-                        <div>
-                            Indicates that this is an important variable. These variables will be displayed as
-                            recommended when creating new charts or reports.
-                        </div>
-                    </LabelHelpTip>
-                </CheckboxLK>
+                {!field.isMultiChoiceField() && (
+                    <CheckboxLK
+                        checked={recommendedVariable}
+                        id={createFormInputId(DOMAIN_FIELD_RECOMMENDEDVARIABLE, domainIndex, index)}
+                        name={createFormInputName(DOMAIN_FIELD_RECOMMENDEDVARIABLE)}
+                        onChange={this.handleCheckbox}
+                    >
+                        Make this field a recommended variable
+                        <LabelHelpTip title="Recommended Variable">
+                            <div>
+                                Indicates that this is an important variable. These variables will be displayed as
+                                recommended when creating new charts or reports.
+                            </div>
+                        </LabelHelpTip>
+                    </CheckboxLK>
+                )}
                 {PropDescType.isMvEnableable(field.dataType.rangeURI) && !field.isCalculatedField() && !isApp() && (
                     <CheckboxLK
                         checked={mvEnabled}

packages/components/src/internal/components/domainproperties/CalculatedFieldOptions.test.tsx

@@ -20,10 +20,10 @@ describe('CalculatedFieldOptions', () => {
             renderWithAppContext(
                 <CalculatedFieldOptions
                     domainIndex={0}
+                    field={DomainField.create({ rangeURI: STRING_RANGE_URI })}
                     getDomainFields={jest.fn()}
                     index={0}
                     onChange={jest.fn()}
-                    field={DomainField.create({ rangeURI: STRING_RANGE_URI })}
                 />
             );
         });
@@ -41,10 +41,10 @@ describe('CalculatedFieldOptions', () => {
             renderWithAppContext(
                 <CalculatedFieldOptions
                     domainIndex={0}
+                    field={DomainField.create({ valueExpression: '1=0', rangeURI: INT_RANGE_URI })}
                     getDomainFields={jest.fn()}
                     index={0}
                     onChange={jest.fn()}
-                    field={DomainField.create({ valueExpression: '1=0', rangeURI: INT_RANGE_URI })}
                 />
             );
         });
@@ -62,10 +62,10 @@ describe('CalculatedFieldOptions', () => {
             renderWithAppContext(
                 <CalculatedFieldOptions
                     domainIndex={0}
+                    field={DomainField.create({ valueExpression: '1=0', lockType: DOMAIN_FIELD_PARTIALLY_LOCKED })}
                     getDomainFields={jest.fn()}
                     index={0}
                     onChange={jest.fn()}
-                    field={DomainField.create({ valueExpression: '1=0', lockType: DOMAIN_FIELD_PARTIALLY_LOCKED })}
                 />
             );
         });
@@ -123,6 +123,7 @@ describe('CalculatedFieldOptions', () => {
                 List.of(
                     { name: 'b', dataType: { name: 'text' } } as DomainField,
                     { name: 'c', dataType: { name: 'calculation' } } as DomainField,
+                    { name: 'c', dataType: { name: 'multiChoice' } } as DomainField,
                     { name: 'd', dataType: { name: 'INT' } } as DomainField
                 ),
                 [{ Name: 'a', DataType: 'integer' } as SystemField]

packages/components/src/internal/components/domainproperties/CalculatedFieldOptions.tsx

@@ -12,7 +12,7 @@ import { DOMAIN_FIELD_CLIENT_SIDE_ERROR, DOMAIN_FIELD_VALUE_EXPRESSION, SEVERITY
 import { DomainField, DomainFieldError, SystemField } from './models';
 import { SectionHeading } from './SectionHeading';
 import { isFieldFullyLocked, isFieldPartiallyLocked } from './propertiesUtil';
-import { CALCULATED_TYPE, PropDescType } from './PropDescType';
+import { CALCULATED_TYPE, MULTI_CHOICE_TYPE, PropDescType } from './PropDescType';
 import { parseCalculatedColumn } from './actions';
 
 // export for jest testing
@@ -47,7 +47,7 @@ export const getColumnTypeMap = (
         colTypeMap[df.Name] = df.DataType.toUpperCase();
     });
     domainFields?.forEach(df => {
-        if (df.dataType.name !== CALCULATED_TYPE.name) {
+        if (df.dataType.name !== CALCULATED_TYPE.name && df.dataType.name !== MULTI_CHOICE_TYPE.name) {
             colTypeMap[df.name] = df.dataType.name.toLowerCase() === 'int' ? 'INTEGER' : df.dataType.name.toUpperCase();
         }
     });
@@ -163,20 +163,20 @@ export const CalculatedFieldOptions: FC<Props> = memo(props => {
         >
             <div className="row">
                 <div className="col-xs-12 col-md-6">
-                    <SectionHeading title="Expression" cls="bottom-padding" helpTipBody={HELP_TIP_BODY} />
+                    <SectionHeading cls="bottom-padding" helpTipBody={HELP_TIP_BODY} title="Expression" />
                     <textarea
                         className="form-control"
-                        rows={6}
-                        value={field.valueExpression || ''}
-                        id={createFormInputId(DOMAIN_FIELD_VALUE_EXPRESSION, domainIndex, index)}
-                        name={createFormInputName(DOMAIN_FIELD_VALUE_EXPRESSION)}
-                        onChange={handleChange}
-                        onBlur={handleBlur}
                         disabled={
                             isFieldPartiallyLocked(field.lockType) ||
                             isFieldFullyLocked(field.lockType) ||
                             field.lockExistingField
                         }
+                        id={createFormInputId(DOMAIN_FIELD_VALUE_EXPRESSION, domainIndex, index)}
+                        name={createFormInputName(DOMAIN_FIELD_VALUE_EXPRESSION)}
+                        onBlur={handleBlur}
+                        onChange={handleChange}
+                        rows={6}
+                        value={field.valueExpression || ''}
                     />
                     <div className="domain-field-calc-footer">
                         {error && <div className="error">{error}</div>}