@arbor-education/design-system.components 0.18.0 → 0.19.0

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

@@ -0,0 +1,135 @@
+import { useRef } from 'react';
+import type {
+  CellKeyDownEvent,
+  FullWidthCellKeyDownEvent,
+  SuppressKeyboardEventParams,
+} from 'ag-grid-community';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { Combobox } from 'Components/combobox/Combobox';
+import type { ComboboxProps } from 'Components/combobox/types';
+import { useComponentDidMount } from 'Utils/hooks/useComponentDidMount';
+
+type ComboboxCellRendererProps = CustomCellRendererProps & ComboboxProps;
+
+export const ComboboxCellRenderer = (props: ComboboxCellRendererProps) => {
+  const {
+    value,
+    node,
+    column,
+    api,
+    options = [],
+    multiple = false,
+    placeholder,
+    triggerVariant,
+    disabled,
+    hasError,
+    searchType,
+    highlightStringMatches,
+    loading,
+    onSearch,
+    id,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    'aria-label': ariaLabel,
+  } = props;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const normalizedValue: string[] = Array.isArray(value)
+    ? value.map(String)
+    : value != null && value !== ''
+      ? [String(value)]
+      : [];
+
+  useComponentDidMount(() => {
+    // open the combobox when the user presses Enter on the ag-grid cell
+    const handleCellKeyDown = (
+      event: CellKeyDownEvent | FullWidthCellKeyDownEvent,
+    ) => {
+      const { key } = event.event as KeyboardEvent;
+      if (
+        'column' in event
+        && event.node === node
+        && event.column === column
+        && key === 'Enter'
+      ) {
+        const trigger = containerRef.current?.querySelector<HTMLElement>(
+          '[role="combobox"], [role="button"][aria-haspopup="listbox"]',
+        );
+        if (!trigger) return;
+        trigger.focus();
+        // button-style triggers (single-select) need an explicit click to open the popover
+        if (trigger.getAttribute('role') === 'button') {
+          trigger.click();
+        }
+      }
+    };
+
+    api.addEventListener('cellKeyDown', handleCellKeyDown);
+
+    // restore ag-grid cell focus when popover closes without focus leaving the cell
+    const container = containerRef.current;
+    let observer: MutationObserver | undefined;
+    if (container) {
+      const trigger = container.querySelector<HTMLElement>(
+        '[role="combobox"], [role="button"][aria-haspopup="listbox"]',
+      );
+      if (trigger) {
+        observer = new MutationObserver(() => {
+          const isOpen = trigger.getAttribute('aria-expanded') === 'true';
+          if (isOpen || column == null || node.rowIndex == null) return;
+          const active = document.activeElement;
+          const focusIsStillInCell = active == null || active === document.body || container.contains(active);
+          if (focusIsStillInCell) {
+            api.setFocusedCell(node.rowIndex, column);
+          }
+        });
+        observer.observe(trigger, { attributes: true, attributeFilter: ['aria-expanded'] });
+      }
+    }
+
+    return () => {
+      api.removeEventListener('cellKeyDown', handleCellKeyDown);
+      observer?.disconnect();
+    };
+  });
+
+  return (
+    <div ref={containerRef} className="ds-table__combobox">
+      <Combobox
+        options={options}
+        value={normalizedValue}
+        multiple={multiple}
+        placeholder={placeholder}
+        triggerVariant={triggerVariant}
+        disabled={disabled}
+        hasError={hasError}
+        searchType={searchType}
+        highlightStringMatches={highlightStringMatches}
+        loading={loading}
+        onSearch={onSearch}
+        id={id}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={ariaInvalid}
+        aria-label={ariaLabel}
+        onValueChange={(newValues) => {
+          if (column) {
+            node.setDataValue(column, multiple ? newValues : (newValues[0] ?? null));
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+ComboboxCellRenderer.colDefDefaults = {
+  autoHeight: true,
+  suppressKeyboardEvent: (params: SuppressKeyboardEventParams) => {
+    const cell = (params.event.target as HTMLElement)?.closest('.ag-cell');
+    if (!cell) return false;
+    const openTrigger = cell.querySelector(
+      '[role="combobox"][aria-expanded="true"], [role="button"][aria-expanded="true"]',
+    );
+    return !!openTrigger && ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'].includes(params.event.key);
+  },
+};

package/src/components/table/table.scss

@@ -47,6 +47,10 @@
       // so we just unset it here
       z-index: unset;
     }
+
+    .ag-cell:has(.ds-table__combobox) {
+      padding: var(--spacing-xsmall) var(--spacing-small);
+    }
   }
   
   &__controls {