@arbor-education/design-system.components 0.3.0 → 0.3.2

package/dist/utils/focusFirstFocusableElement.js

@@ -0,0 +1,12 @@
+const focusableElementsQuery = 'button:enabled, [href], input:not(input[type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
+export const focusFirstFocusableElement = (containerElement) => {
+    if (containerElement
+        && typeof containerElement.querySelector === 'function') {
+        const firstFocusableElement = containerElement.querySelector(focusableElementsQuery);
+        if (firstFocusableElement
+            && typeof firstFocusableElement.focus === 'function') {
+            firstFocusableElement.focus();
+        }
+    }
+};
+//# sourceMappingURL=focusFirstFocusableElement.js.map

package/dist/utils/focusFirstFocusableElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusFirstFocusableElement.js","sourceRoot":"","sources":["../../src/utils/focusFirstFocusableElement.ts"],"names":[],"mappings":"AAAA,MAAM,sBAAsB,GAAG,4GAA4G,CAAC;AAE5I,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,gBAAoC,EACpC,EAAE;IACF,IACE,gBAAgB;WACb,OAAO,gBAAgB,CAAC,aAAa,KAAK,UAAU,EACvD,CAAC;QACD,MAAM,qBAAqB,GAAG,gBAAgB,CAAC,aAAa,CAC1D,sBAAsB,CACR,CAAC;QAEjB,IACE,qBAAqB;eAClB,OAAO,qBAAqB,CAAC,KAAK,KAAK,UAAU,EACpD,CAAC;YACD,qBAAqB,CAAC,KAAK,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;AACH,CAAC,CAAC"}

package/dist/utils/focusFirstFocusableElement.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=focusFirstFocusableElement.test.d.ts.map

package/dist/utils/focusFirstFocusableElement.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusFirstFocusableElement.test.d.ts","sourceRoot":"","sources":["../../src/utils/focusFirstFocusableElement.test.ts"],"names":[],"mappings":""}

package/dist/utils/focusFirstFocusableElement.test.js

@@ -0,0 +1,109 @@
+import { describe, expect, test, vi, beforeEach, afterEach } from 'vitest';
+import { focusFirstFocusableElement } from './focusFirstFocusableElement';
+describe('focusFirstFocusableElement', () => {
+    let container;
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+    afterEach(() => {
+        document.body.removeChild(container);
+        vi.clearAllMocks();
+    });
+    test('does nothing when containerElementRef is null', () => {
+        const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus');
+        focusFirstFocusableElement(null);
+        expect(focusSpy).not.toHaveBeenCalled();
+    });
+    test('does nothing when container has no focusable elements', () => {
+        container.innerHTML = '<div>No focusable elements</div>';
+        const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).not.toHaveBeenCalled();
+    });
+    test('focuses the first button element', () => {
+        container.innerHTML = '<button>First Button</button><button>Second Button</button>';
+        const firstButton = container.querySelector('button');
+        const focusSpy = vi.spyOn(firstButton, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+    });
+    test('focuses the first input element', () => {
+        container.innerHTML = '<input type="text" /><input type="text" />';
+        const firstInput = container.querySelector('input');
+        const focusSpy = vi.spyOn(firstInput, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+    });
+    test('focuses the first link element', () => {
+        container.innerHTML = '<a href="#">First Link</a><a href="#">Second Link</a>';
+        const firstLink = container.querySelector('a');
+        const focusSpy = vi.spyOn(firstLink, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+    });
+    test('focuses the first select element', () => {
+        container.innerHTML = '<select><option>Option 1</option></select><select><option>Option 2</option></select>';
+        const firstSelect = container.querySelector('select');
+        const focusSpy = vi.spyOn(firstSelect, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+    });
+    test('focuses the first textarea element', () => {
+        container.innerHTML = '<textarea></textarea><textarea></textarea>';
+        const firstTextarea = container.querySelector('textarea');
+        const focusSpy = vi.spyOn(firstTextarea, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+    });
+    test('focuses element with tabindex attribute', () => {
+        container.innerHTML = '<div tabindex="0">Focusable div</div><div tabindex="1">Another focusable div</div>';
+        const firstDiv = container.querySelector('[tabindex]');
+        const focusSpy = vi.spyOn(firstDiv, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+    });
+    test('ignores disabled buttons', () => {
+        container.innerHTML = '<button disabled>Disabled</button><button>Enabled</button>';
+        const enabledButton = container.querySelector('button:not([disabled])');
+        const focusSpy = vi.spyOn(enabledButton, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+    });
+    test('ignores hidden inputs', () => {
+        container.innerHTML = '<input type="hidden" /><input type="text" />';
+        const textInput = container.querySelector('input[type="text"]');
+        const focusSpy = vi.spyOn(textInput, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+    });
+    test('ignores elements with tabindex="-1"', () => {
+        container.innerHTML = '<div tabindex="-1">Not focusable</div><div tabindex="0">Focusable</div>';
+        const focusableDiv = container.querySelector('[tabindex="0"]');
+        const focusSpy = vi.spyOn(focusableDiv, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+    });
+    test('focuses the first focusable element when multiple types exist', () => {
+        container.innerHTML = '<button>Button</button><input type="text" /><a href="#">Link</a>';
+        const firstButton = container.querySelector('button');
+        const focusSpy = vi.spyOn(firstButton, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+    });
+    test('focuses the first focusable element in nested structure', () => {
+        container.innerHTML = `
+      <div>
+        <div>Non-focusable</div>
+        <button>Nested Button</button>
+      </div>
+      <button>Outer Button</button>
+    `;
+        const nestedButton = container.querySelector('button');
+        const focusSpy = vi.spyOn(nestedButton, 'focus');
+        focusFirstFocusableElement(container);
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+        expect(nestedButton.textContent).toBe('Nested Button');
+    });
+});
+//# sourceMappingURL=focusFirstFocusableElement.test.js.map

package/dist/utils/focusFirstFocusableElement.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusFirstFocusableElement.test.js","sourceRoot":"","sources":["../../src/utils/focusFirstFocusableElement.test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbor-education/design-system.components",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "The component library for the design system (the baby)",
   "main": "dist/index.js",
   "repository": {

package/src/components/formField/inputs/selectDropdown/SelectDropdown.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { SelectDropdownItem, type SelectDropdownItemProps } from './items/item/SelectDropdownItem';
 import { Dropdown } from 'Components/dropdown/Dropdown';
@@ -15,17 +15,16 @@ export type SelectDropdownInputProps = {
   'onSelectionChange'?: (value: string[]) => void;
   'id'?: string;
   'alwaysShowPlaceholder'?: boolean;
+  'initialSelectedValues'?: string[];
 };
 
 export const SelectDropdown = (props: SelectDropdownInputProps) => {
-  const { options, disabled, multiple, placeholder, hasError, onSelectionChange, id, 'aria-describedBy': ariaDescribedBy, 'aria-invalid': ariaInvalid, alwaysShowPlaceholder = false } = props;
+  const { options, disabled, multiple, placeholder, hasError, onSelectionChange, id, 'aria-describedBy': ariaDescribedBy, 'aria-invalid': ariaInvalid, alwaysShowPlaceholder = false, initialSelectedValues } = props;
 
-  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const [selectedValues, setSelectedValues] = useState<string[]>(initialSelectedValues ?? []);
   const [renderedSelectContent, setRenderedSelectContent] = useState('');
-
-  useEffect(() => {
-    onSelectionChange?.(selectedValues);
-  }, [selectedValues]);
+  const selectedValuesRef = useRef(selectedValues);
+  selectedValuesRef.current = selectedValues;
 
   useEffect(() => {
     if (alwaysShowPlaceholder) {
@@ -36,13 +35,15 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
       setRenderedSelectContent(placeholder ?? 'Select');
     }
     else if (selectedValues.length === 1) {
-      const selectedLabel = options.find(option => option.value === selectedValues[0])?.label;
-      if (selectedLabel) setRenderedSelectContent(selectedLabel);
+      const selectedValue = selectedValues[0];
+      const option = options.find(opt => opt.value === selectedValue);
+      const displayText = option?.label ?? option?.value ?? String(selectedValue);
+      setRenderedSelectContent(displayText || (placeholder ?? 'Select'));
     }
     else {
       setRenderedSelectContent(placeholder ?? `Select (${selectedValues.length})`);
     }
-  }, [selectedValues, placeholder]);
+  }, [selectedValues, placeholder, options]);
 
   // Flatten grouped options into a single array with headers
   const UNGROUPED_KEY = 'Ungrouped';
@@ -62,14 +63,19 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
   });
 
   const handleItemClick = (value: string) => {
+    const prev = selectedValuesRef.current;
+    let nextValues: string[];
     if (!multiple) {
-      setSelectedValues([value]);
+      nextValues = [value];
+    }
+    else if (prev.includes(value)) {
+      nextValues = prev.filter(sel => sel !== value);
     }
     else {
-      setSelectedValues(prev =>
-        prev.includes(value) ? prev.filter(sel => sel !== value) : [...prev, value],
-      );
+      nextValues = [...prev, value];
     }
+    setSelectedValues(nextValues);
+    onSelectionChange?.(nextValues);
   };
 
   return (

package/src/components/table/DSDefaultColDef.ts

@@ -0,0 +1,37 @@
+import type { CellClassParams, CellFocusedParams, ColDef, SuppressMouseEventHandlingParams, ValueFormatterFunc } from 'ag-grid-community';
+import { cellColorStyles } from './cellColorStyles';
+
+export const defaultValueFormatter: ValueFormatterFunc = (params) => {
+  const { value } = params;
+  if (value != null && typeof value === 'object' && 'value' in value) {
+    return value.value;
+  }
+
+  return value;
+};
+
+export const shouldSuppressFocus = (params: SuppressMouseEventHandlingParams | CellClassParams | CellFocusedParams) => typeof params.column === 'object' && params.column?.getColDef().cellRendererParams.supressCellFocusAndFocusFirstElement;
+
+export const DSDefaultColDef: ColDef = {
+  cellStyle: cellColorStyles,
+  valueGetter: (params) => {
+    const { data, colDef: { field } } = params;
+
+    return data[field!];
+  },
+  valueFormatter: defaultValueFormatter,
+  cellEditorParams: {
+    useFormatter: true,
+  },
+  cellClassRules: {
+    'ds-table__cell--supress-focus': shouldSuppressFocus,
+  },
+  cellRendererParams: {
+    suppressMouseEventHandling: (params: SuppressMouseEventHandlingParams) => {
+      if (shouldSuppressFocus(params)) {
+        return true;
+      }
+      return false;
+    },
+  },
+};