@arbor-education/design-system.components 0.20.0 → 0.21.1

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.test.tsx

@@ -1,5 +1,6 @@
 import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/vitest';
 import type { CustomCellRendererProps } from 'ag-grid-react';
 import type { GridApi } from 'ag-grid-community';
@@ -19,6 +20,8 @@ const createMockProps = (
   overrides: Partial<CustomCellRendererProps> & {
     backgroundColor?: string;
     fillCell?: boolean;
+    placeholder?: string;
+    iconClickOnly?: boolean;
   } = {},
 ) => ({
   value: 'option1',
@@ -105,6 +108,40 @@ describe('SelectDropdownCellRenderer', () => {
     });
   });
 
+  describe('iconClickOnly', () => {
+    test('defaults to false — modifier is not applied', () => {
+      render(<SelectDropdownCellRenderer {...createMockProps()} />);
+      expect(screen.getByRole('button')).not.toHaveClass('ds-select-dropdown--icon-click-only');
+    });
+
+    test('applies the icon-click-only modifier when opted in', () => {
+      render(
+        <SelectDropdownCellRenderer
+          {...createMockProps({ iconClickOnly: true })}
+        />,
+      );
+      expect(screen.getByRole('button')).toHaveClass('ds-select-dropdown--icon-click-only');
+    });
+
+    test('clicking the trigger opens the dropdown', async () => {
+      render(<SelectDropdownCellRenderer {...createMockProps({ value: '' })} />);
+      await userEvent.click(screen.getByRole('button'));
+      expect(await screen.findByText('Option 1')).toBeInTheDocument();
+    });
+  });
+
+  test('updates the displayed label when the value prop changes (e.g. on paste)', () => {
+    const { rerender } = render(
+      <SelectDropdownCellRenderer {...createMockProps({ value: 'option1' })} />,
+    );
+    expect(screen.getByRole('button')).toHaveTextContent('Option 1');
+
+    rerender(
+      <SelectDropdownCellRenderer {...createMockProps({ value: 'option2' })} />,
+    );
+    expect(screen.getByRole('button')).toHaveTextContent('Option 2');
+  });
+
   test('applies both modifiers when backgroundColor and fillCell are set together', () => {
     const { container } = render(
       <SelectDropdownCellRenderer

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.tsx

@@ -17,6 +17,13 @@ type SelectDropdownCellRendererProps = CustomCellRendererProps
   & {
     backgroundColor?: string;
     fillCell?: boolean;
+    /**
+     * When true, only the chevron icon opens the dropdown so the rest
+     * of the cell remains free for ag-grid cell/range selection and
+     * copy-paste. Defaults to false — set it via `cellRendererParams`
+     * to opt in per column.
+     */
+    iconClickOnly?: boolean;
   };
 
 type SelectDropdownCellRendererOption = Omit<
@@ -44,6 +51,7 @@ export const SelectDropdownCellRenderer = (
     alwaysShowPlaceholder = false,
     backgroundColor,
     fillCell = false,
+    iconClickOnly = false,
   } = props;
 
   const textContrast = backgroundColor ? getTextContrast(backgroundColor) : null;
@@ -65,7 +73,7 @@ export const SelectDropdownCellRenderer = (
   }));
 
   const valueStr = value != null && value !== '' ? String(value) : '';
-  const initialSelectedValues = valueStr ? [valueStr] : [];
+  const selectedValues = valueStr ? [valueStr] : [];
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -100,10 +108,11 @@ export const SelectDropdownCellRenderer = (
         alwaysShowPlaceholder={alwaysShowPlaceholder}
         options={normalisedOptions}
         placeholder={placeholder}
-        initialSelectedValues={initialSelectedValues}
+        selectedValues={selectedValues}
         open={isOpen}
         onOpenChange={setIsOpen}
         multiple={false}
+        iconClickOnly={iconClickOnly}
         onSelectionChange={(newValue) => {
           if (column && newValue[0] != null) {
             const selectedOption = rawOptions.find(