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

package/src/components/icon/Icon.tsx

@@ -1,5 +1,5 @@
-import type { CustomIconProps, IconSize } from './types';
-import { allowedIcons, type IconName } from './allowedIcons';
+import type { CustomIconProps, IconSize } from './types.js';
+import { allowedIcons, type IconName } from './allowedIcons.js';
 import classNames from 'classnames';
 
 type IconProps = {

package/src/components/icon/allowedIcons.tsx

@@ -89,11 +89,11 @@ import {
   Users,
   UsersRound, X,
 } from 'lucide-react';
-import { AskArbor } from './customIcons/AskArbor';
-import type { CustomIconProps } from './types';
-import { CheckSolid } from './customIcons/CheckSolid';
-import { Google } from './customIcons/Google';
-import { XSolid } from './customIcons/XSolid';
+import { AskArbor } from './customIcons/AskArbor.js';
+import type { CustomIconProps } from './types.js';
+import { CheckSolid } from './customIcons/CheckSolid.js';
+import { Google } from './customIcons/Google.js';
+import { XSolid } from './customIcons/XSolid.js';
 
 export const allowedIcons = {
   // lucide icons

package/src/components/icon/customIcons/AskArbor.tsx

@@ -1,4 +1,4 @@
-import type { CustomIconProps } from '../types';
+import type { CustomIconProps } from '../types.js';
 
 export const AskArbor = (props: CustomIconProps) => {
   const { size, color, ...rest } = props;

package/src/components/icon/customIcons/CheckSolid.tsx

@@ -1,4 +1,4 @@
-import type { CustomIconProps } from '../types';
+import type { CustomIconProps } from '../types.js';
 import { useMemoGenerateUuid } from 'Utils/hooks/useMemoGenerateUuid';
 
 export const CheckSolid = (props: CustomIconProps) => {

package/src/components/icon/customIcons/Google.tsx

@@ -1,4 +1,4 @@
-import type { CustomIconProps } from '../types';
+import type { CustomIconProps } from '../types.js';
 
 export const Google = (props: CustomIconProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/components/icon/customIcons/XSolid.tsx

@@ -1,4 +1,4 @@
-import type { CustomIconProps } from '../types';
+import type { CustomIconProps } from '../types.js';
 import { useMemoGenerateUuid } from 'Utils/hooks/useMemoGenerateUuid';
 
 export const XSolid = (props: CustomIconProps) => {

package/src/components/kpiCard/KPICard.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { fn } from 'storybook/test';
-import { KPICard } from './KPICard';
+import { KPICard } from './KPICard.js';
 import { Progress } from 'Components/progress/Progress';
 import { KVPList } from 'Components/kvpList/KVPList';
 

package/src/components/kpiCard/KPICard.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { describe, expect, test, vi } from 'vitest';
-import { KPICard } from './KPICard';
+import { KPICard } from './KPICard.js';
 import { KVPList } from 'Components/kvpList/KVPList';
 
 describe('KPICard', () => {

package/src/components/kvpList/KVPList.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { Progress } from 'Components/progress/Progress';
-import { KVPList } from './KVPList';
+import { KVPList } from './KVPList.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/kvpList/KVPList.test.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom/vitest';
 import { render, screen } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
-import { KVPList } from './KVPList';
+import { KVPList } from './KVPList.js';
 
 describe('KVPList', () => {
   test('renders term and definition semantics', () => {

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

@@ -9,7 +9,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { Modal } from './Modal';
+import { Modal } from './Modal.js';
 import { Button } from 'Components/button/Button';
 import { FormField } from 'Components/formField/FormField';
 import { Dropdown } from 'Components/dropdown/Dropdown';

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

@@ -1,7 +1,7 @@
 import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Modal } from './Modal';
+import { Modal } from './Modal.js';
 import '@testing-library/jest-dom/vitest';
 
 describe('Modal', () => {

package/src/components/modal/Modal.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import { Dialog } from 'radix-ui';
-import { ModalHeader, type ModalHeaderProps } from './ModalHeader';
-import { ModalFooter, type ModalFooterProps } from './ModalFooter';
-import { ModalBody, type ModalBodyProps } from './ModalBody';
+import { ModalHeader, type ModalHeaderProps } from './ModalHeader.js';
+import { ModalFooter, type ModalFooterProps } from './ModalFooter.js';
+import { ModalBody, type ModalBodyProps } from './ModalBody.js';
 import { PopupParentContext } from 'Utils/PopupParentContext';
 import { createContext, useRef } from 'react';
-import { ModalCloseButon } from './ModalCloseButton';
-import { ModalTitle } from './ModalTitle';
+import { ModalCloseButon } from './ModalCloseButton.js';
+import { ModalTitle } from './ModalTitle.js';
 import type { ButtonProps } from 'Components/button/Button';
 
 type ModalContextValue = {

package/src/components/modal/ModalCloseButton.tsx

@@ -1,5 +1,5 @@
 import { useContext, useEffect } from 'react';
-import { ModalContext } from './Modal';
+import { ModalContext } from './Modal.js';
 import { Button, type ButtonProps } from 'Components/button/Button';
 import classNames from 'classnames';
 

package/src/components/modal/modalManager/ModalManager.stories.tsx

@@ -7,7 +7,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { ModalManager } from './ModalManager';
+import { ModalManager } from './ModalManager.js';
 import { Modal } from 'Components/modal/Modal';
 import { Button } from 'Components/button/Button';
 import { FormField } from 'Components/formField/FormField';

package/src/components/modal/modalManager/ModalManager.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
-import { ModalManager } from './ModalManager';
+import { ModalManager } from './ModalManager.js';
 import { ModalUtils } from 'Utils/ModalUtils';
 import PubSub from 'Utils/PubSub';
 import { MODAL } from 'Utils/Constants';

package/src/components/pill/Pill.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { useState } from 'react';
 import { fn } from 'storybook/test';
-import { Pill } from './Pill';
+import { Pill } from './Pill.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/pill/Pill.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { Pill } from './Pill';
+import { Pill } from './Pill.js';
 import { describe, expect, it, vi } from 'vitest';
 import '@testing-library/jest-dom/vitest';
 

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

@@ -10,7 +10,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { useEffect, useState } from 'react';
 import { Button } from 'Components/button/Button';
-import { Progress } from './Progress';
+import { Progress } from './Progress.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

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

@@ -1,5 +1,5 @@
 import { expect, test, describe } from 'vitest';
-import { Progress } from './Progress';
+import { Progress } from './Progress.js';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 

package/src/components/row/Row.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { fn } from 'storybook/test';
 
-import { Row } from './Row';
+import { Row } from './Row.js';
 
 // ---------------------------------------------------------------------------
 // Content strings for the custom DocsPage

package/src/components/row/Row.test.tsx

@@ -1,6 +1,6 @@
 import { expect, test, describe, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { Row } from './Row';
+import { Row } from './Row.js';
 import '@testing-library/jest-dom/vitest';
 
 describe('Row component', () => {

package/src/components/searchBar/SearchBar.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { useEffect, useState } from 'react';
-import { SearchBar } from './SearchBar';
+import { SearchBar } from './SearchBar.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/searchBar/SearchBar.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, test, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
-import { SearchBar } from './SearchBar';
+import { SearchBar } from './SearchBar.js';
 import userEvent from '@testing-library/user-event';
 
 const setSearchMock = vi.fn();

package/src/components/section/Section.stories.tsx

@@ -11,7 +11,7 @@ import {
 import { fn } from 'storybook/test';
 
 import { Row } from 'Components/row/Row';
-import { Section } from './Section';
+import { Section } from './Section.js';
 
 // ---------------------------------------------------------------------------
 // Content strings for the custom DocsPage

package/src/components/section/Section.test.tsx

@@ -1,6 +1,6 @@
 import { expect, test, describe, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { Section } from './Section';
+import { Section } from './Section.js';
 import '@testing-library/jest-dom/vitest';
 
 describe('Section component', () => {

package/src/components/separator/Separator.stories.tsx

@@ -8,7 +8,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { Separator } from './Separator';
+import { Separator } from './Separator.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/separator/Separator.test.tsx

@@ -1,6 +1,6 @@
 import { expect, test } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { Separator } from './Separator';
+import { Separator } from './Separator.js';
 import '@testing-library/jest-dom/vitest';
 
 test('Separator says hello', () => {

package/src/components/singleUser/SingleUser.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 
-import { SingleUser } from './SingleUser';
+import { SingleUser } from './SingleUser.js';
 
 // ---------------------------------------------------------------------------
 // Content strings for the custom DocsPage

package/src/components/singleUser/SingleUser.test.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom/vitest';
 import { render, screen } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
-import { SingleUser } from './SingleUser';
+import { SingleUser } from './SingleUser.js';
 
 describe('SingleUser', () => {
   test('renders label text', () => {

package/src/components/slideover/Slideover.test.tsx

@@ -1,6 +1,6 @@
 import { expect, test, describe, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { Slideover } from './Slideover';
+import { Slideover } from './Slideover.js';
 import '@testing-library/jest-dom/vitest';
 import { SlideoverUtils } from 'Utils/SlideoverUtils';
 

package/src/components/slideoverManager/SlideoverManager.stories.tsx

@@ -6,7 +6,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { SlideoverManager } from './SlideoverManager';
+import { SlideoverManager } from './SlideoverManager.js';
 import { SlideoverUtils } from 'Utils/SlideoverUtils';
 import { Button } from 'Components/button/Button';
 import { FormField } from 'Components/formField/FormField';

package/src/components/slideoverManager/SlideoverManager.test.tsx

@@ -1,6 +1,6 @@
 import { expect, test, describe } from 'vitest';
 import { render, screen, act } from '@testing-library/react';
-import { SlideoverManager } from './SlideoverManager';
+import { SlideoverManager } from './SlideoverManager.js';
 import '@testing-library/jest-dom/vitest';
 import { SlideoverUtils } from 'Utils/SlideoverUtils';
 import type { SlideoverProps } from 'Components/slideover/Slideover';

package/src/components/table/DSDefaultColDef.ts

@@ -5,7 +5,7 @@ import type {
   SuppressMouseEventHandlingParams,
   ValueFormatterFunc,
 } from 'ag-grid-community';
-import { cellColorStyles } from './cellColorStyles';
+import { cellColorStyles } from './cellColorStyles.js';
 
 // checks if the value is wrapped in a object with a value property
 const isWrappedValue = (value: unknown): value is { value: unknown } => {

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

@@ -10,26 +10,26 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { type Column, type ColDef, type ColGroupDef } from 'ag-grid-enterprise';
-import { Table } from './Table';
+import { Table } from './Table.js';
 import { Button } from 'Components/button/Button';
 
 import { useState, type ComponentProps } from 'react';
-import { RowCountInfo } from './pagination/RowCountInfo';
-import { PaginationPanel } from './pagination/PaginationPanel';
-import { HideColumnsDropdown } from './tableControls/HideColumnsDropdown';
-import { TableControls } from './tableControls/TableControls';
+import { RowCountInfo } from './pagination/RowCountInfo.js';
+import { PaginationPanel } from './pagination/PaginationPanel.js';
+import { HideColumnsDropdown } from './tableControls/HideColumnsDropdown.js';
+import { TableControls } from './tableControls/TableControls.js';
 import { ModalManager } from 'Components/modal/modalManager/ModalManager';
 import { Modal } from 'Components/modal/Modal';
 import { ModalUtils } from 'Utils/ModalUtils';
-import type { SemanticColorKey } from './cellColorStyles';
+import type { SemanticColorKey } from './cellColorStyles.js';
 import {
   BooleanFilter,
   doesBooleanFilterPass,
-} from './columnFilters/BooleanFilter/BooleanFilter';
+} from './columnFilters/BooleanFilter/BooleanFilter.js';
 import {
   doesTimeFilterPass,
   TimeFilter,
-} from './columnFilters/TimeFilter/TimeFilter';
+} from './columnFilters/TimeFilter/TimeFilter.js';
 import type { CustomCellRendererProps } from 'ag-grid-react';
 
 type TableProps = ComponentProps<typeof Table>;
@@ -1567,7 +1567,7 @@ const marksheetTidyTableColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     headerName: 'Assessment Component',
     field: 'assessmentComponent',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellRenderer: 'dsComboboxCellRenderer',
     cellRendererParams: (params: CustomCellRendererProps) => {
       return {
         options: assessmentComponentOptions,
@@ -1576,13 +1576,15 @@ const marksheetTidyTableColumnDefs: (ColDef | ColGroupDef)[] = [
       };
     },
     editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     headerName: 'Visibility',
     field: 'visibility',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellRenderer: 'dsComboboxCellRenderer',
     cellRendererParams: { options: visibilityOptions, placeholder: 'Select' },
     editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     headerName: 'Editable',
@@ -2226,4 +2228,180 @@ export const WithCheckboxCellRenderer: Story = {
   },
 };
 
+interface SelectDropdownRowData {
+  id: number;
+  name: string;
+  status: string | null;
+  priority: string | null;
+  category: string | null;
+}
+
+const statusOptions = [
+  { value: 'active', label: 'Active' },
+  { value: 'inactive', label: 'Inactive' },
+  { value: 'pending', label: 'Pending' },
+];
+
+const priorityOptions = [
+  { value: 'high', label: 'High' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'low', label: 'Low' },
+];
+
+const categoryOptions = [
+  { value: 'english', label: 'English' },
+  { value: 'maths', label: 'Maths' },
+  { value: 'science', label: 'Science' },
+  { value: 'history', label: 'History' },
+];
+
+const selectDropdownSampleData: SelectDropdownRowData[] = [
+  { id: 1, name: 'Alice Johnson', status: 'active', priority: 'high', category: 'english' },
+  { id: 2, name: 'Bob Smith', status: 'inactive', priority: null, category: 'maths' },
+  { id: 3, name: 'Charlie Brown', status: null, priority: 'medium', category: null },
+  { id: 4, name: 'Diana Prince', status: 'pending', priority: 'low', category: 'science' },
+  { id: 5, name: 'Eve Wilson', status: 'active', priority: null, category: 'history' },
+];
+
+const selectDropdownColDefs: (ColDef | ColGroupDef)[] = [
+  { field: 'name', headerName: 'Student Name', editable: false },
+  {
+    field: 'status',
+    headerName: 'Status',
+    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellRendererParams: { options: statusOptions, placeholder: 'Select status' },
+    editable: false,
+  },
+  {
+    field: 'priority',
+    headerName: 'Priority',
+    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellRendererParams: { options: priorityOptions, placeholder: 'Select priority' },
+    editable: false,
+  },
+  {
+    field: 'category',
+    headerName: 'Category',
+    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellRendererParams: { options: categoryOptions, placeholder: 'Select category' },
+    editable: false,
+  },
+];
+
+export const WithSelectDropdownCellRenderer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Columns can use the `dsSelectDropdownCellRenderer` cell renderer to display a dropdown select inside the cell. Click or press Enter on a cell to open the dropdown.',
+      },
+    },
+  },
+  args: {
+    rowData: selectDropdownSampleData,
+    columnDefs: selectDropdownColDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+  },
+};
+
+interface ComboboxRowData {
+  id: number;
+  name: string;
+  subject: string | null;
+  level: string | null;
+  tags: string[];
+  skills: string[];
+}
+
+const subjectOptions = [
+  { value: 'english-language', label: 'English Language' },
+  { value: 'english-literature', label: 'English Literature' },
+  { value: 'maths', label: 'Maths' },
+  { value: 'science', label: 'Science' },
+  { value: 'history', label: 'History' },
+];
+
+const levelOptions = [
+  { value: 'foundation', label: 'Foundation' },
+  { value: 'intermediate', label: 'Intermediate' },
+  { value: 'higher', label: 'Higher' },
+];
+
+const tagOptions = [
+  { value: 'coursework', label: 'Coursework' },
+  { value: 'exam', label: 'Exam' },
+  { value: 'practical', label: 'Practical' },
+  { value: 'oral', label: 'Oral' },
+];
+
+const skillOptions = [
+  { value: 'reading', label: 'Reading' },
+  { value: 'writing', label: 'Writing' },
+  { value: 'speaking', label: 'Speaking' },
+  { value: 'listening', label: 'Listening' },
+  { value: 'critical-thinking', label: 'Critical Thinking' },
+];
+
+const comboboxSampleData: ComboboxRowData[] = [
+  { id: 1, name: 'Alice Johnson', subject: 'english-language', level: 'higher', tags: ['coursework', 'exam'], skills: ['reading', 'writing', 'speaking'] },
+  { id: 2, name: 'Bob Smith', subject: 'maths', level: null, tags: ['exam'], skills: ['critical-thinking'] },
+  { id: 3, name: 'Charlie Brown', subject: null, level: 'foundation', tags: [], skills: [] },
+  { id: 4, name: 'Diana Prince', subject: 'english-literature', level: 'intermediate', tags: ['coursework', 'practical', 'oral'], skills: ['reading', 'writing', 'listening', 'speaking', 'critical-thinking'] },
+  { id: 5, name: 'Eve Wilson', subject: 'science', level: null, tags: [], skills: ['listening'] },
+];
+
+const comboboxColDefs: (ColDef | ColGroupDef)[] = [
+  { field: 'name', headerName: 'Student Name', editable: false },
+  {
+    field: 'subject',
+    headerName: 'Subject (single, input)',
+    cellRenderer: 'dsComboboxCellRenderer',
+    cellRendererParams: { options: subjectOptions, placeholder: 'Select subject' },
+    editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
+  },
+  {
+    field: 'level',
+    headerName: 'Level (single, button)',
+    cellRenderer: 'dsComboboxCellRenderer',
+    cellRendererParams: { options: levelOptions, placeholder: 'Select level', triggerVariant: 'button' },
+    editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
+  },
+  {
+    field: 'tags',
+    headerName: 'Tags (multi, button)',
+    cellRenderer: 'dsComboboxCellRenderer',
+    cellRendererParams: { options: tagOptions, placeholder: 'Select tags', multiple: true, triggerVariant: 'button' },
+    editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
+  },
+  {
+    field: 'skills',
+    headerName: 'Skills (multi, input)',
+    cellRenderer: 'dsComboboxCellRenderer',
+    cellRendererParams: { options: skillOptions, placeholder: 'Select skills', multiple: true },
+    editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
+  },
+];
+
+export const WithComboboxCellRenderer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Columns can use the `dsComboboxCellRenderer` cell renderer to display a searchable combobox inside the cell. Supports single and multi-select via the `multiple` prop. Row height adjusts automatically when chips wrap.',
+      },
+    },
+  },
+  args: {
+    rowData: comboboxSampleData,
+    columnDefs: comboboxColDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+  },
+};
+
 export default meta;

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

@@ -1,10 +1,10 @@
 import { describe, expect, expectTypeOf, test, vi } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import { Table } from './Table';
+import { Table } from './Table.js';
 import '@testing-library/jest-dom/vitest';
 import { BulkActionsDropdown } from 'Components/table/tableControls/BulkActionsDropdown';
 import { HideColumnsDropdown } from 'Components/table/tableControls/HideColumnsDropdown';
-import { TableSettingsDropdown } from './tableControls/TableSettingsDropdown';
+import { TableSettingsDropdown } from './tableControls/TableSettingsDropdown.js';
 import userEvent from '@testing-library/user-event';
 import type { GridApi } from 'ag-grid-enterprise';
 import type { Column } from 'ag-grid-community';