feat: Improved responsivness of Builder and related components

Author: Vojtěch Václav Porteš

README.md

@@ -103,3 +103,17 @@ Supported formats are documented on the website:
 - [Supported Formats](https://vojtechportes.github.io/react-query-builder/documentation/parsing-and-formatting/supported-formats)
 - [formatQuery API](https://vojtechportes.github.io/react-query-builder/api/format-query)
 - [parseQuery API](https://vojtechportes.github.io/react-query-builder/api/parse-query)
+
+## Responsive Behavior
+
+The default builder components include a compact responsive layout for medium-width screens.
+
+- Rule rows reflow to preserve field, operator, action, and value legibility when horizontal space gets tighter.
+- Multi-select values use a summarized closed state to avoid chip overflow.
+- The default responsive behavior applies automatically when you use the built-in components.
+- If you replace layout containers such as `components.Rule` or `components.Group`, your custom components are responsible for their own responsive behavior.
+
+Responsive behavior is documented in more detail on the website:
+
+- [Components](https://vojtechportes.github.io/react-query-builder/documentation/components)
+- [API: Components](https://vojtechportes.github.io/react-query-builder/api/components)

example/src/components/demo-playground.tsx

@@ -80,7 +80,6 @@ const BuilderCard = styled.section`
 `;
 
 const BuilderSurface = styled.div`
-  min-width: 920px;
   font-family: Arial, sans-serif;
   font-size: 16px;
   line-height: normal;

example/src/components/parsing-sandbox.tsx

@@ -98,7 +98,6 @@ const BuilderScrollArea = styled.div`
 
 const BuilderViewport = styled.div`
   display: inline-block;
-  min-width: 920px;
   font-family: Arial, sans-serif;
   font-size: 16px;
   line-height: normal;

example/src/pages/documentation-page/pages/documentation-content.tsx

@@ -655,7 +655,7 @@ export const documentationPages: IDocumentationPage[] = [
     description:
       'Documentation for replacing built-in builder controls and containers with custom components.',
     searchText:
-      'Components component overrides custom controls custom renderers builder customization add remove select input group rule',
+      'Components component overrides custom controls custom renderers builder customization add remove select input group rule responsive responsiveness compact layout multiselect summary',
     content: (
       <>
         <p>
@@ -686,6 +686,26 @@ export const documentationPages: IDocumentationPage[] = [
             semantics and remain accessible.
           </li>
         </List>
+        <SectionTitle>Responsive behavior</SectionTitle>
+        <List>
+          <li>
+            The built-in <InlineCode>Rule</InlineCode> and <InlineCode>Group</InlineCode>{' '}
+            components include a compact responsive layout for medium-width screens.
+          </li>
+          <li>
+            Multi-select controls use a summarized closed state so selected
+            values do not overflow the available rule width.
+          </li>
+          <li>
+            Responsive behavior is automatic when you use the default
+            components.
+          </li>
+          <li>
+            If you replace <InlineCode>components.Rule</InlineCode> or{' '}
+            <InlineCode>components.Group</InlineCode>, your custom layout is
+            responsible for its own responsive behavior.
+          </li>
+        </List>
         <AlertBox title="API reference" variant="info">
           <TextLink to="/api/components">Components</TextLink>.
         </AlertBox>

src/form/__snapshots__/select-multi.test.tsx.snap

@@ -7,87 +7,47 @@ exports[`#components/SelectMulti Tests Snapshot 1`] = `
     type="hidden"
     value="test"
   />
-  <styled.div>
-    <Trigger
-      disabled={false}
-      expanded={false}
-      label="Select value"
-      onClick={[Function]}
-      theme={
-        {
-          "colors": {
-            "grey": {
-              "100": "#f5f5f5",
-              "200": "#eeeeee",
-              "300": "#e0e0e0",
-              "400": "#bdbdbd",
-              "500": "#9e9e9e",
-              "600": "#757575",
-              "700": "#616161",
-              "800": "#424242",
-              "900": "#212121",
-            },
-            "primary": {
-              "contrastText": "#ffffff",
-              "dark": "#002984",
-              "default": "#3f51b5",
-              "light": "#757de8",
-            },
-            "secondary": {
-              "contrastText": "#ffffff",
-              "dark": "#ba000d",
-              "default": "#f44336",
-              "light": "#ff7961",
-            },
-            "white": "#ffffff",
+  <Trigger
+    disabled={false}
+    expanded={false}
+    label="test"
+    onClick={[Function]}
+    theme={
+      {
+        "colors": {
+          "grey": {
+            "100": "#f5f5f5",
+            "200": "#eeeeee",
+            "300": "#e0e0e0",
+            "400": "#bdbdbd",
+            "500": "#9e9e9e",
+            "600": "#757575",
+            "700": "#616161",
+            "800": "#424242",
+            "900": "#212121",
           },
-        }
-      }
-      triggerRef={
-        {
-          "current": null,
-        }
-      }
-    />
-  </styled.div>
-  <styled.div>
-    <Tag
-      disabled={false}
-      key="test"
-      label="test"
-      onRemove={[MockFunction]}
-      theme={
-        {
-          "colors": {
-            "grey": {
-              "100": "#f5f5f5",
-              "200": "#eeeeee",
-              "300": "#e0e0e0",
-              "400": "#bdbdbd",
-              "500": "#9e9e9e",
-              "600": "#757575",
-              "700": "#616161",
-              "800": "#424242",
-              "900": "#212121",
-            },
-            "primary": {
-              "contrastText": "#ffffff",
-              "dark": "#002984",
-              "default": "#3f51b5",
-              "light": "#757de8",
-            },
-            "secondary": {
-              "contrastText": "#ffffff",
-              "dark": "#ba000d",
-              "default": "#f44336",
-              "light": "#ff7961",
-            },
-            "white": "#ffffff",
+          "primary": {
+            "contrastText": "#ffffff",
+            "dark": "#002984",
+            "default": "#3f51b5",
+            "light": "#757de8",
+          },
+          "secondary": {
+            "contrastText": "#ffffff",
+            "dark": "#ba000d",
+            "default": "#f44336",
+            "light": "#ff7961",
           },
-        }
+          "white": "#ffffff",
+        },
       }
-      value="test"
-    />
-  </styled.div>
+    }
+    title="test"
+    triggerRef={
+      {
+        "current": null,
+      }
+    }
+  />
 </styled.div>
 `;

src/form/select-multi.test.tsx

@@ -2,7 +2,10 @@ import { SelectMulti } from './select-multi';
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 
-const mockValues = [{ value: 'test', label: 'test' }];
+const mockValues = [
+  { value: 'test', label: 'test' },
+  { value: 'another', label: 'another' },
+];
 
 describe('#components/SelectMulti', () => {
   it('Tests Snapshot', () => {
@@ -39,27 +42,31 @@ describe('#components/SelectMulti', () => {
     const option = wrapper.find('[data-test="SelectMultiOption[test]"]').first();
     option.simulate('click');
 
-    const remove = wrapper.find('[data-test="Delete"]').first();
-    remove.simulate('click');
+    const secondOption = wrapper.find('[data-test="SelectMultiOption[another]"]').first();
+    secondOption.simulate('click');
 
-    expect(onChange).toBeCalledTimes(0);
-    expect(onDelete).toBeCalledTimes(2);
+    expect(onChange).toBeCalledTimes(1);
+    expect(onDelete).toBeCalledTimes(1);
   });
 
-  it('Does not render remove buttons when disabled', () => {
+  it('Shows summary badge for hidden values', () => {
     const wrapper = mount(
       <SelectMulti
-        disabled
+        disabled={false}
         onChange={jest.fn()}
         onDelete={jest.fn()}
-        selectedValue={['test']}
-        values={mockValues}
+        selectedValue={['test', 'another', 'third', 'fourth']}
+        values={[
+          { value: 'test', label: 'Retail' },
+          { value: 'another', label: 'Priority' },
+          { value: 'third', label: 'Enterprise' },
+          { value: 'fourth', label: 'Wholesale' },
+        ]}
       />
     );
 
-    const tags = wrapper.find('[data-test="SelectMultiTag"]').hostNodes();
-
-    expect(tags).toHaveLength(1);
-    expect(tags.find('[data-test="Delete"]')).toHaveLength(0);
+    expect(
+      wrapper.find('[data-test="SelectMultiSummaryBadge"]').first().text()
+    ).toEqual('+1');
   });
 });

src/form/select-multi.tsx

@@ -3,32 +3,17 @@ import styled from 'styled-components';
 import { useTheme } from '../theme-provider/hooks/use-theme';
 import { Trigger } from '../widgets/select-multi/components/trigger';
 import { Option } from '../widgets/select-multi/components/option';
-import { Tag } from '../widgets/select-multi/components/tag';
 import { useSelectMulti } from '../widgets/select-multi/hooks/use-select-multi';
 import { getSelectedOptions } from '../widgets/select-multi/utils/get-selected-options.util';
+import { createSummary } from '../widgets/select-multi/utils/create-summary.util';
 import { Popover } from './popover';
 import { ISelectProps } from './select';
 
 const Container = styled.div`
-  display: inline-grid;
-  grid-template-columns: min-content max-content;
-  align-items: center;
-  gap: 0.35rem;
-  width: max-content;
-  max-width: 100%;
-`;
-
-const TriggerContainer = styled.div`
   position: relative;
-  flex: 0 0 auto;
-`;
-
-const Tags = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem;
-  align-items: center;
-  align-self: center;
+  display: inline-block;
+  width: var(--query-builder-control-width, 160px);
+  min-width: var(--query-builder-control-min-width, 160px);
   max-width: 100%;
 `;
 
@@ -61,6 +46,9 @@ export const SelectMulti: FC<ISelectMultiProps> = ({
     disabled,
   });
   const selectedOptions = getSelectedOptions(values, selectedValue);
+  const selectedLabels = selectedOptions.map(({ label }) => label);
+  const summary = createSummary(selectedLabels);
+  const title = summary.text ? selectedLabels.join(', ') : emptyValue || 'Select value';
 
   const handleToggleValue = (value: string) => {
     if (selectedValue.includes(value)) {
@@ -80,43 +68,31 @@ export const SelectMulti: FC<ISelectMultiProps> = ({
         value={selectedValue.join(',')}
         readOnly
       />
-      <TriggerContainer>
-        <Trigger
-          disabled={disabled}
-          expanded={isOpen}
-          id={id ? `${id}-trigger` : undefined}
-          label={emptyValue || 'Select value'}
-          onClick={toggle}
-          triggerRef={triggerRef}
-          theme={theme}
-        />
-        {isOpen ? (
-          <Popover theme={theme}>
-            {values.map(({ value, label }) => (
-              <Option
-                key={value}
-                value={value}
-                label={label}
-                selected={selectedValue.includes(value)}
-                onClick={handleToggleValue}
-                theme={theme}
-              />
-            ))}
-          </Popover>
-        ) : null}
-      </TriggerContainer>
-      <Tags>
-        {selectedOptions.map(({ value, label }) => (
-          <Tag
-            key={value}
-            disabled={disabled}
-            label={label}
-            value={value}
-            onRemove={onDelete}
-            theme={theme}
-          />
-        ))}
-      </Tags>
+      <Trigger
+        disabled={disabled}
+        expanded={isOpen}
+        id={id ? `${id}-trigger` : undefined}
+        label={summary.text || emptyValue || 'Select value'}
+        badgeContent={summary.hiddenCount > 0 ? `+${summary.hiddenCount}` : undefined}
+        onClick={toggle}
+        title={title}
+        triggerRef={triggerRef}
+        theme={theme}
+      />
+      {isOpen ? (
+        <Popover theme={theme}>
+          {values.map(({ value, label }) => (
+            <Option
+              key={value}
+              value={value}
+              label={label}
+              selected={selectedValue.includes(value)}
+              onClick={handleToggleValue}
+              theme={theme}
+            />
+          ))}
+        </Popover>
+      ) : null}
     </Container>
   );
 };

src/form/select.tsx

@@ -9,6 +9,8 @@ import { Popover } from './popover';
 const Container = styled.div`
   position: relative;
   display: inline-block;
+  width: var(--query-builder-control-width, 160px);
+  min-width: var(--query-builder-control-min-width, 160px);
   max-width: 100%;
 `;