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

package/src/components/filterBar/FilterBar.test.tsx

@@ -122,9 +122,15 @@ describe('FilterBar', () => {
     const rectSpy = 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 = 84;
-      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 = 84;
+      }
+      else if (this.classList.contains('ds-tag-list__overflow')) {
+        width = 76;
+      }
 
       return {
         width,

package/src/components/filterBar/FilterBar.tsx

@@ -73,7 +73,9 @@ const FILTER_BAR_TYPE_ICONS: Record<FilterBarType, IconName> = {
 };
 
 const getVisibleCount = (count?: number | null): string | null => {
-  if (typeof count !== 'number' || count <= 0) return null;
+  if (typeof count !== 'number' || count <= 0) {
+    return null;
+  }
   return count > 99 ? '99+' : `${count}`;
 };
 
@@ -267,7 +269,9 @@ const FilterBarActiveList = ({
   }
 
   if (!children) {
-    if (!emptyState) return null;
+    if (!emptyState) {
+      return null;
+    }
     return <div className={classNames('ds-filter-bar__empty-state', className)}>{emptyState}</div>;
   }
 

package/src/components/formField/fieldset/Fieldset.stories.tsx

@@ -320,9 +320,24 @@ export const Default: Story = {
   },
   render: args => (
     <Fieldset {...args}>
-      <CheckboxInput id="consent-trips" name="consent" label="Consent for school trips" onChange={() => {}} />
-      <CheckboxInput id="consent-photos" name="consent" label="Consent for photographs" onChange={() => {}} />
-      <CheckboxInput id="consent-data" name="consent" label="Consent for data sharing with partner schools" onChange={() => {}} />
+      <CheckboxInput
+        id="consent-trips"
+        name="consent"
+        label="Consent for school trips"
+        onChange={() => {}}
+      />
+      <CheckboxInput
+        id="consent-photos"
+        name="consent"
+        label="Consent for photographs"
+        onChange={() => {}}
+      />
+      <CheckboxInput
+        id="consent-data"
+        name="consent"
+        label="Consent for data sharing with partner schools"
+        onChange={() => {}}
+      />
     </Fieldset>
   ),
 };

package/src/components/formField/inputs/radio/RadioButtonGroup.tsx

@@ -1,6 +1,6 @@
 import type { ChangeEvent } from 'react';
 import { RadioButtonInput } from './RadioButtonInput.js';
-import { Fieldset, type FieldsetProps } from '../../fieldset/Fieldset.js';
+import { Fieldset, type FieldsetProps } from 'Components/formField/fieldset/Fieldset.js';
 
 export type RadioGroupOption = {
   id: string;

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

@@ -72,7 +72,9 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
   const UNGROUPED_KEY = 'Ungrouped';
   const groupedOptions = options.reduce((acc, option) => {
     const key = option.group ?? UNGROUPED_KEY;
-    if (!acc[key]) acc[key] = [];
+    if (!acc[key]) {
+      acc[key] = [];
+    }
     acc[key].push(option);
     return acc;
   }, {} as Record<string, SelectDropdownItemProps[]>);

package/src/components/formField/inputs/textArea/TextArea.stories.tsx

@@ -353,11 +353,16 @@ const ControlledWithCharacterCountTemplate = () => {
   const isApproaching = remaining <= 100 && remaining > 0;
   const isAtLimit = remaining <= 0;
 
-  const countColour = isAtLimit
-    ? 'var(--color-semantic-destructive-600)'
-    : isApproaching
-      ? 'var(--color-semantic-caution-600)'
-      : 'var(--color-grey-600)';
+  let countColour: string;
+  if (isAtLimit) {
+    countColour = 'var(--color-semantic-destructive-600)';
+  }
+  else if (isApproaching) {
+    countColour = 'var(--color-semantic-caution-600)';
+  }
+  else {
+    countColour = 'var(--color-grey-600)';
+  }
 
   return (
     <div style={{ maxWidth: '28rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xsmall)' }}>

package/src/components/formField/inputs/time/TimeInput.test.tsx

@@ -8,7 +8,9 @@ describe('TimeInput', () => {
   beforeEach(() => {
     globalThis.ResizeObserver = class {
       observe() {}
+
       unobserve() {}
+
       disconnect() {}
     } as unknown as typeof ResizeObserver;
   });

package/src/components/formField/inputs/time/TimeInput.tsx

@@ -82,16 +82,16 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>((props, re
 
   const focusAndSelectHours = useCallback(() => {
     const input = inputRef.current;
-    if (!input) return;
+    if (!input) {
+      return;
+    }
 
     input.focus();
 
     try {
       input.setSelectionRange(0, 2);
     }
-    catch {
-      // Some browsers do not expose selection APIs on time inputs.
-    }
+    catch { /* Some browsers do not expose selection APIs on time inputs. */ }
   }, []);
 
   const timeOptions = useMemo<ComboboxOption[]>(

package/src/components/heading/Heading.stories.tsx

@@ -368,7 +368,10 @@ const WithBackControlLegacyTemplate = () => (
 const WithEditableTitleTemplate = () => (
   <div style={{ padding: 'var(--spacing-xlarge)' }}>
     <Heading level={1}>
-      <EditableText text="Form 7B Registration" onEditSave={() => {}} />
+      <EditableText
+        text="Form 7B Registration"
+        onEditSave={() => {}}
+      />
     </Heading>
   </div>
 );
@@ -377,7 +380,10 @@ const WithEditableTitleAndActionTemplate = () => (
   <div style={{ padding: 'var(--spacing-xlarge)' }}>
     <Heading level={1}>
       <Heading.InnerContainer>
-        <EditableText text="Form 7B Registration" onEditSave={() => {}} />
+        <EditableText
+          text="Form 7B Registration"
+          onEditSave={() => {}}
+        />
       </Heading.InnerContainer>
       <Heading.InnerContainer>
         <Button variant="primary" type="button">Save changes</Button>
@@ -393,7 +399,10 @@ const WithEditableTitleAndMultipleActionsTemplate = () => (
         <Button variant="tertiary" type="button" iconLeftName="chevron-left" iconLeftScreenReaderText="Go back">
           Back
         </Button>
-        <EditableText text="Autumn term report" onEditSave={() => {}} />
+        <EditableText
+          text="Autumn term report"
+          onEditSave={() => {}}
+        />
       </Heading.InnerContainer>
       <Heading.InnerContainer className="medium-spacing-gap">
         <Button variant="secondary" type="button">Export to CSV</Button>

package/src/components/modal/Modal.stories.tsx

@@ -548,11 +548,21 @@ const WithDropdownInsideModalTemplate = () => {
               <Button variant="dropdown">Select a teacher</Button>
             </Dropdown.Trigger>
             <Dropdown.Content>
-              <Dropdown.Item onSelect={() => {}}>Ms A. Johnson — English</Dropdown.Item>
-              <Dropdown.Item onSelect={() => {}}>Mr B. Patel — Mathematics</Dropdown.Item>
-              <Dropdown.Item onSelect={() => {}}>Mrs C. Williams — Science</Dropdown.Item>
-              <Dropdown.Item onSelect={() => {}}>Mr D. Thompson — History</Dropdown.Item>
-              <Dropdown.Item onSelect={() => {}}>Ms E. Okonkwo — Art</Dropdown.Item>
+              <Dropdown.Item onSelect={() => {}}>
+                Ms A. Johnson — English
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => {}}>
+                Mr B. Patel — Mathematics
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => {}}>
+                Mrs C. Williams — Science
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => {}}>
+                Mr D. Thompson — History
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => {}}>
+                Ms E. Okonkwo — Art
+              </Dropdown.Item>
             </Dropdown.Content>
           </Dropdown>
         </Modal.Body>

package/src/components/progress/Progress.stories.tsx

@@ -274,7 +274,9 @@ const InteractiveLoadingTemplate = (args: React.ComponentProps<typeof Progress>)
   const [running, setRunning] = useState(true);
 
   useEffect(() => {
-    if (!running) return;
+    if (!running) {
+      return;
+    }
     if (progress >= 100) {
       setRunning(false);
       return;

package/src/components/sidebarNav/SidebarNavItem.tsx

@@ -97,6 +97,32 @@ export const SidebarNavItem = (props: SidebarNavItemProps) => {
     linkElementProps as AnchorHTMLAttributes<HTMLAnchorElement> | undefined,
   );
 
+  const renderAnchorElement = () => renderLink
+    ? renderLink({
+        href: href!,
+        className: linkClassName,
+        ariaCurrent: current ? 'page' : undefined,
+        linkProps,
+        linkElementProps: anchorLinkElementProps as Omit<
+          AnchorHTMLAttributes<HTMLAnchorElement>,
+          'href' | 'className' | 'children'
+        > | undefined,
+        onClick: handleClick,
+        children: linkChildren,
+      })
+    : (
+        <a
+          href={href}
+          className={linkClassName}
+          aria-current={current ? 'page' : undefined}
+          {...linkProps}
+          {...anchorLinkElementProps}
+          onClick={handleClick as MouseEventHandler<HTMLAnchorElement>}
+        >
+          {linkChildren}
+        </a>
+      );
+
   const linkElementNode = linkElement === 'button'
     ? (
         <button
@@ -109,31 +135,7 @@ export const SidebarNavItem = (props: SidebarNavItemProps) => {
           {linkChildren}
         </button>
       )
-    : renderLink
-      ? renderLink({
-          href: href!,
-          className: linkClassName,
-          ariaCurrent: current ? 'page' : undefined,
-          linkProps,
-          linkElementProps: anchorLinkElementProps as Omit<
-            AnchorHTMLAttributes<HTMLAnchorElement>,
-            'href' | 'className' | 'children'
-          > | undefined,
-          onClick: handleClick,
-          children: linkChildren,
-        })
-      : (
-          <a
-            href={href}
-            className={linkClassName}
-            aria-current={current ? 'page' : undefined}
-            {...linkProps}
-            {...anchorLinkElementProps}
-            onClick={handleClick as MouseEventHandler<HTMLAnchorElement>}
-          >
-            {linkChildren}
-          </a>
-        );
+    : renderAnchorElement();
 
   return (
     <li

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)}>