@arbor-education/design-system.components 0.25.0 → 0.25.2

package/src/components/sidebarNav/SidebarNavRailItem.tsx

@@ -34,41 +34,40 @@ export const SidebarNavRailItem = (props: SidebarNavRailItemProps) => {
     <span className="ds-sidebar-nav__rail-badge-anchor">{children}</span>
   );
 
-  const trigger
-    = href
-      ? (
-          renderLink
-            ? renderLink({
-                href,
-                className: itemClassName,
-                ariaCurrent: current ? 'page' : undefined,
-                ariaLabel,
-                onClick,
-                children: content,
-              })
-            : (
-                <a
-                  href={href}
-                  className={itemClassName}
-                  aria-current={current ? 'page' : undefined}
-                  aria-label={ariaLabel}
-                  onClick={onClick}
-                >
-                  {content}
-                </a>
-              )
-        )
-      : (
-          <button
-            type="button"
-            className={itemClassName}
-            aria-current={current ? 'page' : undefined}
-            aria-label={ariaLabel}
-            onClick={onClick}
-          >
-            {content}
-          </button>
-        );
+  const renderLinkNode = () => renderLink
+    ? renderLink({
+        href: href!,
+        className: itemClassName,
+        ariaCurrent: current ? 'page' : undefined,
+        ariaLabel,
+        onClick,
+        children: content,
+      })
+    : (
+        <a
+          href={href}
+          className={itemClassName}
+          aria-current={current ? 'page' : undefined}
+          aria-label={ariaLabel}
+          onClick={onClick}
+        >
+          {content}
+        </a>
+      );
+
+  const trigger = href
+    ? renderLinkNode()
+    : (
+        <button
+          type="button"
+          className={itemClassName}
+          aria-current={current ? 'page' : undefined}
+          aria-label={ariaLabel}
+          onClick={onClick}
+        >
+          {content}
+        </button>
+      );
 
   return (
     <li

package/src/components/sidebarNav/useControllableBoolean.ts

@@ -12,7 +12,9 @@ export function useControllableBoolean(args: {
   const current = isControlled ? (value as boolean) : uncontrolled;
 
   const set = useCallback((next: boolean) => {
-    if (!isControlled) setUncontrolled(next);
+    if (!isControlled) {
+      setUncontrolled(next);
+    }
     onChange?.(next);
   }, [isControlled, onChange]);
 

package/src/components/table/Table.stories.tsx

@@ -385,7 +385,7 @@ type CellColors = {
   semanticColor?: SemanticColorKey;
 };
 
-interface RowData {
+type RowData = {
   id: number;
   name: { value: string } & CellColors;
   email: { value: string } & CellColors;
@@ -395,7 +395,7 @@ interface RowData {
   active: boolean;
   time: string;
   dateOfBirth: Date;
-}
+};
 
 const sampleData: RowData[] = [
   {
@@ -707,11 +707,15 @@ export const WithBulkActions: Story = {
         bulkActions={[
           {
             displayName: 'foo',
-            callback: (gridApi) => { console.log('clicked on the foo action', gridApi); },
+            callback: (gridApi) => {
+              console.log('clicked on the foo action', gridApi);
+            },
           },
           {
             displayName: 'bar',
-            callback: (gridApi) => { console.log('clicked on the bar action', gridApi); },
+            callback: (gridApi) => {
+              console.log('clicked on the bar action', gridApi);
+            },
             disabled: true,
           },
         ]}
@@ -1912,13 +1916,13 @@ export const TableWithSemanticColors: Story = {
   },
 };
 
-interface DateEditorRowData {
+type DateEditorRowData = {
   id: number;
   name: { value: string };
   dateOfBirth: Date;
   enrollmentDate: Date;
   graduationDate: Date | null;
-}
+};
 
 const dateEditorSampleData: DateEditorRowData[] = [
   {
@@ -2014,12 +2018,12 @@ export const WithDateCellEditor: Story = {
   },
 };
 
-interface BooleanRowData {
+type BooleanRowData = {
   id: number;
   name: string;
   hasPet: boolean | null | undefined;
   isEnrolled: boolean | null | undefined;
-}
+};
 
 const booleanCellRendererData: BooleanRowData[] = [
   { id: 1, name: 'Alice Johnson', hasPet: true, isEnrolled: true },
@@ -2228,13 +2232,13 @@ export const WithCheckboxCellRenderer: Story = {
   },
 };
 
-interface SelectDropdownRowData {
+type SelectDropdownRowData = {
   id: number;
   name: string;
   status: string | null;
   priority: string | null;
   category: string | null;
-}
+};
 
 const statusOptions = [
   { value: 'active', label: 'Active' },
@@ -2305,14 +2309,14 @@ export const WithSelectDropdownCellRenderer: Story = {
   },
 };
 
-interface ComboboxRowData {
+type ComboboxRowData = {
   id: number;
   name: string;
   subject: string | null;
   level: string | null;
   tags: string[];
   skills: string[];
-}
+};
 
 const subjectOptions = [
   { value: 'english-language', label: 'English Language' },

package/src/components/table/Table.test.tsx

@@ -820,7 +820,7 @@ describe('Table', () => {
                 actions={[
                   {
                     displayName: 'Test Action',
-                    callback: () => { },
+                    callback: () => {},
                   },
                 ]}
               />
@@ -1810,7 +1810,9 @@ describe('Table', () => {
         <Table
           columnDefs={columnDefs}
           rowData={rowData}
-          onGridReady={(event) => { gridApi = event.api; }}
+          onGridReady={(event) => {
+            gridApi = event.api;
+          }}
         />,
       );
       await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
@@ -1828,7 +1830,9 @@ describe('Table', () => {
         <Table
           columnDefs={columnDefs}
           rowData={rowData}
-          onGridReady={(event) => { gridApi = event.api; }}
+          onGridReady={(event) => {
+            gridApi = event.api;
+          }}
           onCellValueChanged={onCellValueChanged}
         />,
       );
@@ -1860,7 +1864,9 @@ describe('Table', () => {
         <Table
           columnDefs={columnDefs}
           rowData={rowData}
-          onGridReady={(event) => { gridApi = event.api; }}
+          onGridReady={(event) => {
+            gridApi = event.api;
+          }}
         />,
       );
       await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());

package/src/components/table/Table.tsx

@@ -141,11 +141,21 @@ export const Table = (props: TableProps) => {
         <section
           data-testid={testId}
           className={classNames('ds-table__container', wrapperClassName)}
-          onMouseDown={() => { isUsingKeyboardRef.current = false; }}
-          onMouseUp={() => { isUsingKeyboardRef.current = false; }}
-          onMouseMove={() => { isUsingKeyboardRef.current = false; }}
-          onKeyDown={() => { isUsingKeyboardRef.current = true; }}
-          onKeyUp={() => { isUsingKeyboardRef.current = true; }}
+          onMouseDown={() => {
+            isUsingKeyboardRef.current = false;
+          }}
+          onMouseUp={() => {
+            isUsingKeyboardRef.current = false;
+          }}
+          onMouseMove={() => {
+            isUsingKeyboardRef.current = false;
+          }}
+          onKeyDown={() => {
+            isUsingKeyboardRef.current = true;
+          }}
+          onKeyUp={() => {
+            isUsingKeyboardRef.current = true;
+          }}
         >
           {headerContent && (
             <TableHeader data-testid={headerTestId} hasSearch={hasSearch} searchValue={searchValue} setSearchValue={setSearchValue}>

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

@@ -35,11 +35,16 @@ export const ComboboxCellRenderer = (props: ComboboxCellRendererProps) => {
 
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const normalizedValue: string[] = Array.isArray(value)
-    ? value.map(String)
-    : value != null && value !== ''
-      ? [String(value)]
-      : [];
+  let normalizedValue: string[];
+  if (Array.isArray(value)) {
+    normalizedValue = value.map(String);
+  }
+  else if (value != null && value !== '') {
+    normalizedValue = [String(value)];
+  }
+  else {
+    normalizedValue = [];
+  }
 
   useComponentDidMount(() => {
     // open the combobox when the user presses Enter on the ag-grid cell
@@ -56,7 +61,9 @@ export const ComboboxCellRenderer = (props: ComboboxCellRendererProps) => {
         const trigger = containerRef.current?.querySelector<HTMLElement>(
           '[role="combobox"], [role="button"][aria-haspopup="listbox"]',
         );
-        if (!trigger) return;
+        if (!trigger) {
+          return;
+        }
         trigger.focus();
         // button-style triggers (single-select) need an explicit click to open the popover
         if (trigger.getAttribute('role') === 'button') {
@@ -77,7 +84,9 @@ export const ComboboxCellRenderer = (props: ComboboxCellRendererProps) => {
       if (trigger) {
         observer = new MutationObserver(() => {
           const isOpen = trigger.getAttribute('aria-expanded') === 'true';
-          if (isOpen || column == null || node.rowIndex == null) return;
+          if (isOpen || column == null || node.rowIndex == null) {
+            return;
+          }
           const active = document.activeElement;
           const focusIsStillInCell = active == null || active === document.body || container.contains(active);
           if (focusIsStillInCell) {
@@ -126,7 +135,9 @@ ComboboxCellRenderer.colDefDefaults = {
   autoHeight: true,
   suppressKeyboardEvent: (params: SuppressKeyboardEventParams) => {
     const cell = (params.event.target as HTMLElement)?.closest('.ag-cell');
-    if (!cell) return false;
+    if (!cell) {
+      return false;
+    }
     const openTrigger = cell.querySelector(
       '[role="combobox"][aria-expanded="true"], [role="button"][aria-expanded="true"]',
     );

package/src/components/table/columnFilters/TimeFilter/TimeFilter.tsx

@@ -44,7 +44,9 @@ function cellValueToDate(value: unknown): Date | null {
   }
   if (typeof value === 'string') {
     const fromTime = transformTimeStringToDate(value);
-    if (fromTime !== null) return fromTime;
+    if (fromTime !== null) {
+      return fromTime;
+    }
     const parsed = new Date(value);
     return Number.isNaN(parsed.getTime()) ? null : parsed;
   }

package/src/components/table/tableControls/HideColumnsDropdown.tsx

@@ -28,7 +28,9 @@ export const HideColumnsDropdown = (props: HideColumnsDropdownProps) => {
     setHiddenColumns(getHiddenColumnIds(currentColumns));
   }, [currentColumns]);
 
-  if (!currentColumns || currentColumns.length === 0) return null;
+  if (!currentColumns || currentColumns.length === 0) {
+    return null;
+  }
 
   const options = currentColumns.map(column => ({
     label: column.getColDef().headerName,

package/src/components/table/tableControls/TableControls.tsx

@@ -58,7 +58,9 @@ export const TableControls = (props: TableControlsProps) => {
       || onHelp
       || onExpandToggle !== undefined;
 
-  if (!hasStartGroup && !hasEndGroup) return null;
+  if (!hasStartGroup && !hasEndGroup) {
+    return null;
+  }
 
   return (
     <div className={classNames('ds-table__controls', className)}>

package/src/components/tag/Tag.test.tsx

@@ -53,13 +53,20 @@ describe('Tag', () => {
 
   describe('onRemove', () => {
     test('renders remove button when onRemove is provided', () => {
-      render(<Tag onRemove={() => {}}>Removable</Tag>);
+      render(
+        <Tag onRemove={() => {}}>
+          Removable
+        </Tag>,
+      );
       expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument();
     });
 
     test('uses a custom remove label when provided', () => {
       render(
-        <Tag onRemove={() => {}} removeLabel="Remove Alice Johnson">
+        <Tag
+          onRemove={() => {}}
+          removeLabel="Remove Alice Johnson"
+        >
           Removable
         </Tag>,
       );
@@ -67,13 +74,20 @@ describe('Tag', () => {
     });
 
     test('keeps the remove button in the tab order by default', () => {
-      render(<Tag onRemove={() => {}}>Removable</Tag>);
+      render(
+        <Tag onRemove={() => {}}>
+          Removable
+        </Tag>,
+      );
       expect(screen.getByRole('button', { name: 'Remove' })).toHaveAttribute('tabindex', '0');
     });
 
     test('allows composite parents to remove the button from the tab order', () => {
       render(
-        <Tag onRemove={() => {}} removeButtonTabIndex={-1}>
+        <Tag
+          onRemove={() => {}}
+          removeButtonTabIndex={-1}
+        >
           Removable
         </Tag>,
       );
@@ -110,18 +124,32 @@ describe('Tag', () => {
 
   describe('onClick', () => {
     test('renders a primary action button when onClick is provided', () => {
-      render(<Tag onClick={() => {}}>Clickable</Tag>);
+      render(
+        <Tag onClick={() => {}}>
+          Clickable
+        </Tag>,
+      );
       expect(screen.getByRole('button', { name: 'Clickable' })).toBeInTheDocument();
     });
 
     test('uses a custom action label when provided', () => {
-      render(<Tag onClick={() => {}} actionLabel="Open filter for Alice Johnson">Alice Johnson</Tag>);
+      render(
+        <Tag
+          onClick={() => {}}
+          actionLabel="Open filter for Alice Johnson"
+        >
+          Alice Johnson
+        </Tag>,
+      );
       expect(screen.getByRole('button', { name: 'Open filter for Alice Johnson' })).toBeInTheDocument();
     });
 
     test('allows composite parents to remove the primary action from the tab order', () => {
       render(
-        <Tag onClick={() => {}} actionButtonTabIndex={-1}>
+        <Tag
+          onClick={() => {}}
+          actionButtonTabIndex={-1}
+        >
           Clickable
         </Tag>,
       );
@@ -138,7 +166,11 @@ describe('Tag', () => {
 
     test('forwards aria-controls and aria-expanded to the primary action button', () => {
       render(
-        <Tag onClick={() => {}} ariaControls="filter-modal" ariaExpanded={true}>
+        <Tag
+          onClick={() => {}}
+          ariaControls="filter-modal"
+          ariaExpanded={true}
+        >
           Clickable
         </Tag>,
       );

package/src/components/tagList/TagList.test.tsx

@@ -10,9 +10,15 @@ const mockTagListCollapseRects = () =>
   vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function mockRect(this: HTMLElement) {
     let width = 0;
 
-    if (this.classList.contains('ds-tag-list__viewport')) width = 220;
-    else if (this.classList.contains('ds-tag-list__item')) width = 72;
-    else if (this.classList.contains('ds-tag-list__overflow')) width = 76;
+    if (this.classList.contains('ds-tag-list__viewport')) {
+      width = 220;
+    }
+    else if (this.classList.contains('ds-tag-list__item')) {
+      width = 72;
+    }
+    else if (this.classList.contains('ds-tag-list__overflow')) {
+      width = 76;
+    }
 
     return {
       width,

package/src/components/tagList/TagList.tsx

@@ -99,7 +99,9 @@ export const TagList = ({
       [
         ...visibleItemIndices.flatMap((index) => {
           const item = items[index];
-          if (!item) return [];
+          if (!item) {
+            return [];
+          }
 
           const targets: TagListTarget[] = [];
           if (item.onClick) {
@@ -117,7 +119,9 @@ export const TagList = ({
   const hasInteractiveItems = visibleInteractiveTargets.length > 0;
 
   const getHighlightedIndexForTarget = useCallback((target: TagListTarget | null): number | null => {
-    if (!target || target === 'overflow') return null;
+    if (!target || target === 'overflow') {
+      return null;
+    }
 
     return itemIndexById.get(getTargetItemId(target)) ?? null;
   }, [itemIndexById]);
@@ -127,7 +131,9 @@ export const TagList = ({
   }, [getHighlightedIndexForTarget, onHighlightedItemIndexChange]);
 
   const handleDeleteKey = useCallback((target: TagListTarget, event: React.KeyboardEvent<HTMLElement>): boolean => {
-    if (target === 'overflow') return false;
+    if (target === 'overflow') {
+      return false;
+    }
 
     const item = items[getHighlightedIndexForTarget(target) ?? -1];
     if (item?.onRemove) {
@@ -229,7 +235,9 @@ export const TagList = ({
     : null;
 
   if (items.length === 0) {
-    if (!emptyState) return null;
+    if (!emptyState) {
+      return null;
+    }
     return <div className={classNames('ds-tag-list', 'ds-tag-list--empty', className)}>{emptyState}</div>;
   }