@arbor-education/design-system.components 0.9.0 → 0.11.0

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

@@ -16,6 +16,7 @@ export type SelectDropdownInputProps = {
   'id'?: string;
   'alwaysShowPlaceholder'?: boolean;
   'initialSelectedValues'?: string[];
+  'selectedValues'?: string[];
   'open'?: boolean;
   'onOpenChange'?: (open: boolean) => void;
 };
@@ -33,11 +34,14 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
     'aria-invalid': ariaInvalid,
     alwaysShowPlaceholder = false,
     initialSelectedValues = [],
+    selectedValues: controlledSelectedValues,
     open,
     onOpenChange,
   } = props;
 
-  const [selectedValues, setSelectedValues] = useState<string[]>(initialSelectedValues);
+  const isControlled = controlledSelectedValues !== undefined;
+  const [internalSelectedValues, setInternalSelectedValues] = useState<string[]>(initialSelectedValues);
+  const selectedValues = isControlled ? controlledSelectedValues : internalSelectedValues;
   const [renderedSelectContent, setRenderedSelectContent] = useState('');
   const selectedValuesRef = useRef(selectedValues);
   selectedValuesRef.current = selectedValues;
@@ -90,7 +94,9 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
     else {
       nextValues = [...prev, value];
     }
-    setSelectedValues(nextValues);
+    if (!isControlled) {
+      setInternalSelectedValues(nextValues);
+    }
     onSelectionChange?.(nextValues);
   };
 

package/src/components/formField/inputs/text/TextInput.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
-import { type InputHTMLAttributes } from 'react';
+import { forwardRef, type InputHTMLAttributes } from 'react';
 
 export type TextInputProps = {
   size?: 'M' | 'S';
   hasError?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
-export const TextInput = (props: TextInputProps) => {
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {
   const {
     size = 'M',
     hasError,
@@ -27,9 +27,12 @@ export const TextInput = (props: TextInputProps) => {
 
   return (
     <input
+      ref={ref}
       className={inputClasses}
       disabled={disabled}
       {...rest}
     />
   );
-};
+});
+
+TextInput.displayName = 'TextInput';

package/src/components/table/DSDefaultColDef.ts

@@ -19,7 +19,7 @@ export const shouldSuppressFocus = (params: SuppressMouseEventHandlingParams | C
   if (typeof params.column !== 'object') {
     return false;
   }
-  return params.column?.getColDef().cellRendererParams.supressCellFocusAndFocusFirstElement ?? false;
+  return params.column?.getColDef().cellRendererParams.suppressCellFocusAndFocusFirstElement ?? false;
 };
 
 export const DSDefaultColDef: ColDef = {
@@ -54,7 +54,7 @@ export const DSDefaultColDef: ColDef = {
     useFormatter: true,
   },
   cellClassRules: {
-    'ds-table__cell--supress-focus': shouldSuppressFocus,
+    'ds-table__cell--suppress-focus': shouldSuppressFocus,
   },
   cellRendererParams: {
     suppressMouseEventHandling: (params: SuppressMouseEventHandlingParams) => {

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

@@ -490,7 +490,7 @@ const sampleColumnDefsWithButtonCellRenderer: (ColDef | ColGroupDef)[] = [
         headerTooltip: 'The name of the user',
         cellRenderer: 'dsButtonCellRenderer',
         cellRendererParams: {
-          supressCellFocusAndFocusFirstElement: true,
+          suppressCellFocusAndFocusFirstElement: true,
         },
         editable: false,
       },
@@ -818,7 +818,7 @@ export const WithInlineTextCellRenderer: Story = {
         field: 'name',
         cellRenderer: 'dsInlineTextCellRenderer',
         cellRendererParams: {
-          supressCellFocusAndFocusFirstElement: true,
+          suppressCellFocusAndFocusFirstElement: true,
           suppressCount: true,
           suppressDoubleClickExpand: true,
           suppressEnterExpand: true,
@@ -1171,7 +1171,7 @@ export const TidyTable: Story = {
       editable: false,
       cellRenderer: 'agGroupCellRenderer',
       cellRendererParams: {
-        supressCellFocusAndFocusFirstElement: true,
+        suppressCellFocusAndFocusFirstElement: true,
         suppressCount: true,
         suppressDoubleClickExpand: true,
         suppressEnterExpand: true,
@@ -1361,4 +1361,148 @@ export const TableWithSemanticColors: Story = {
   },
 };
 
+interface 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 },
+  { id: 2, name: 'Bob Smith', hasPet: false, isEnrolled: false },
+  { id: 3, name: 'Charlie Brown', hasPet: null, isEnrolled: undefined },
+  { id: 4, name: 'Diana Prince', hasPet: true, isEnrolled: null },
+  { id: 5, name: 'Ethan Hunt', hasPet: undefined, isEnrolled: true },
+];
+
+const booleanCellRendererColumnDefs: ColDef<BooleanRowData>[] = [
+  { field: 'name', headerName: 'Name' },
+  {
+    field: 'hasPet',
+    headerName: 'Has Pet',
+    cellRenderer: 'dsBooleanCellRenderer',
+    editable: false,
+  },
+  {
+    field: 'isEnrolled',
+    headerName: 'Is Enrolled',
+    cellRenderer: 'dsBooleanCellRenderer',
+    editable: false,
+  },
+];
+
+export const WithBooleanCellRenderer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The BooleanCellRenderer displays a true or false icon for boolean values, and renders nothing for any other value regardless of truthiness. Only explicit true and false are accepted, anything else is treated as nullish',
+      },
+    },
+  },
+  args: {
+    rowData: booleanCellRendererData,
+    columnDefs: booleanCellRendererColumnDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+  },
+};
+
+const checkboxRowData = [
+  {
+    id: 1,
+    name: { value: 'Alice Johnson' },
+    email: { value: 'alice.johnson@example.com' },
+    role: { value: 'Developer' },
+    attended: true,
+    consented: false,
+  },
+  {
+    id: 2,
+    name: { value: 'Bob Smith' },
+    email: { value: 'bob.smith@example.com' },
+    role: { value: 'Designer' },
+    attended: false,
+    consented: true,
+  },
+  {
+    id: 3,
+    name: { value: 'Charlie Brown' },
+    email: { value: 'charlie.brown@example.com' },
+    role: { value: 'Manager' },
+    attended: true,
+    consented: true,
+  },
+  {
+    id: 4,
+    name: { value: 'Diana Prince' },
+    email: { value: 'diana.prince@example.com' },
+    role: { value: 'Developer' },
+    attended: false,
+    consented: false,
+  },
+  {
+    id: 5,
+    name: { value: 'Ethan Hunt' },
+    email: { value: 'ethan.hunt@example.com' },
+    role: { value: 'Analyst' },
+    attended: true,
+    consented: false,
+  },
+];
+
+const checkboxColumnDefs: ColDef[] = [
+  {
+    field: 'name',
+    headerName: 'Name',
+    valueFormatter: Table.DefaultValueFormatter,
+  },
+  {
+    field: 'email',
+    headerName: 'Email',
+    valueFormatter: Table.DefaultValueFormatter,
+  },
+  {
+    field: 'role',
+    headerName: 'Role',
+    valueFormatter: Table.DefaultValueFormatter,
+  },
+  {
+    field: 'attended',
+    headerName: 'Attended',
+    cellRenderer: 'dsCheckboxCellRenderer',
+    cellRendererParams: {
+      suppressCellFocusAndFocusFirstElement: true,
+    },
+    editable: false,
+  },
+  {
+    field: 'consented',
+    headerName: 'Consented',
+    cellRenderer: 'dsCheckboxCellRenderer',
+    cellRendererParams: {
+      suppressCellFocusAndFocusFirstElement: true,
+    },
+    editable: false,
+  },
+];
+
+export const WithCheckboxCellRenderer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The CheckboxCellRenderer renders a checkbox input inside a table cell. Pass a boolean value to the cell data to control the checked state.',
+      },
+    },
+  },
+  args: {
+    rowData: checkboxRowData,
+    columnDefs: checkboxColumnDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+  },
+};
+
 export default meta;

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

@@ -1487,14 +1487,140 @@ describe('Table', () => {
     });
   });
 
-  describe('supressCellFocusAndFocusFirstElement', () => {
+  describe('CheckboxCellRenderer', () => {
+    test('renders checkboxes in table cells', async () => {
+      const columnDefs = [
+        { field: 'name', headerName: 'Name' },
+        {
+          field: 'attended',
+          headerName: 'Attended',
+          cellRenderer: 'dsCheckboxCellRenderer',
+          editable: false,
+        },
+      ];
+      const rowData = [
+        { name: 'Alice', attended: true },
+        { name: 'Bob', attended: false },
+      ];
+
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => {
+        const checkboxes = screen.getAllByRole('checkbox');
+        expect(checkboxes.length).toBe(2);
+      });
+    });
+
+    test('checked state reflects row data value', async () => {
+      const columnDefs = [{
+        field: 'active',
+        headerName: 'Active',
+        cellRenderer: 'dsCheckboxCellRenderer',
+        editable: false,
+      }];
+      const rowData = [
+        { active: true },
+        { active: false },
+      ];
+
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => {
+        const checkboxes = screen.getAllByRole('checkbox');
+        expect(checkboxes[0]).toBeChecked();
+        expect(checkboxes[1]).not.toBeChecked();
+      });
+    });
+
+    test('clicking checkbox triggers onCellValueChanged', async () => {
+      const onCellValueChanged = vi.fn();
+      const columnDefs = [{
+        field: 'active',
+        headerName: 'Active',
+        cellRenderer: 'dsCheckboxCellRenderer',
+        editable: false,
+      }];
+      const rowData = [{ active: false }];
+
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          onCellValueChanged={onCellValueChanged}
+        />,
+      );
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => expect(screen.getByRole('checkbox')).toBeInTheDocument());
+
+      await userEvent.click(screen.getByRole('checkbox'));
+
+      await waitFor(() => {
+        expect(onCellValueChanged).toHaveBeenCalledWith(expect.objectContaining({ oldValue: false, newValue: true }));
+      });
+    });
+
+    test('works with multiple checkbox columns', async () => {
+      const columnDefs = [
+        { field: 'name', headerName: 'Name' },
+        {
+          field: 'attended',
+          headerName: 'Attended',
+          cellRenderer: 'dsCheckboxCellRenderer',
+          editable: false,
+        },
+        {
+          field: 'consented',
+          headerName: 'Consented',
+          cellRenderer: 'dsCheckboxCellRenderer',
+          editable: false,
+        },
+      ];
+      const rowData = [
+        { name: 'Alice', attended: true, consented: false },
+      ];
+
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => {
+        const checkboxes = screen.getAllByRole('checkbox');
+        expect(checkboxes[0]).toBeChecked();
+        expect(checkboxes[1]).not.toBeChecked();
+      });
+    });
+
+    test('disabled flag via cellRendererParams', async () => {
+      const onCellValueChanged = vi.fn();
+      const columnDefs = [{
+        field: 'active',
+        headerName: 'Active',
+        cellRenderer: 'dsCheckboxCellRenderer',
+        editable: false,
+        cellRendererParams: { disabled: true },
+      }];
+      const rowData = [{ active: false }];
+
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          onCellValueChanged={onCellValueChanged}
+        />,
+      );
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => expect(screen.getByRole('checkbox')).toBeInTheDocument());
+
+      expect(screen.getByRole('checkbox')).toBeDisabled();
+    });
+  });
+
+  describe('suppressCellFocusAndFocusFirstElement', () => {
     const handleClick = vi.fn();
     const columnDefs = [{
       field: 'action',
       headerName: 'Action',
       cellRenderer: 'dsButtonCellRenderer',
       cellRendererParams: {
-        supressCellFocusAndFocusFirstElement: true,
+        suppressCellFocusAndFocusFirstElement: true,
       },
     }];
     const rowData = [{
@@ -1504,14 +1630,14 @@ describe('Table', () => {
       },
     }];
 
-    test('setting supressCellFocusAndFocusFirstElement to true should add the ds-table__cell--supress-focus class', async () => {
+    test('setting suppressCellFocusAndFocusFirstElement to true should add the ds-table__cell--suppress-focus class', async () => {
       const { container } = render(<Table columnDefs={columnDefs} rowData={rowData} />);
       await screen.findByRole('grid', {}, { timeout: 10000 });
-      const cellWithClass = container.querySelector('.ds-table__cell--supress-focus');
+      const cellWithClass = container.querySelector('.ds-table__cell--suppress-focus');
       expect(cellWithClass).toBeInTheDocument();
     });
 
-    test('setting supressCellFocusAndFocusFirstElement to true should suppress cell focus and focus the first element', async () => {
+    test('setting suppressCellFocusAndFocusFirstElement to true should suppress cell focus and focus the first element', async () => {
       const focusFirstFocusableElementSpy = vi.spyOn(
         focusFirstFocusableElementModule,
         'focusFirstFocusableElement',

package/src/components/table/Table.tsx

@@ -24,6 +24,8 @@ import { focusFirstFocusableElement } from 'Utils/focusFirstFocusableElement';
 import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter';
 import { TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
 import { TableSettingsDropdown } from './TableSettingsDropdown';
+import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
+import { BooleanCellRenderer } from './cellRenderers/BooleanCellRenderer';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -194,6 +196,8 @@ export const Table = (props: TableProps) => {
               dsSelectDropdownCellRenderer: SelectDropdownCellRenderer,
               dsBooleanFilter: BooleanFilter,
               dsTimeFilter: TimeFilter,
+              dsCheckboxCellRenderer: CheckboxCellRenderer,
+              dsBooleanCellRenderer: BooleanCellRenderer,
               ...components,
             }}
             {...rest}

package/src/components/table/cellRenderers/BooleanCellRenderer.test.tsx

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { BooleanCellRenderer } from './BooleanCellRenderer';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+
+const renderWithValue = (value: unknown) =>
+  render(<BooleanCellRenderer {...{ value } as CustomCellRendererProps} />);
+
+describe('BooleanCellRenderer', () => {
+  test('renders a check icon when value is true', () => {
+    renderWithValue(true);
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText('true')).toBeInTheDocument();
+  });
+
+  test('renders an x icon when value is false', () => {
+    renderWithValue(false);
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText('false')).toBeInTheDocument();
+  });
+
+  test('renders nothing when value is null', () => {
+    const { container } = renderWithValue(null);
+    expect(container.innerHTML).toBeFalsy();
+  });
+
+  test('renders nothing when value is undefined', () => {
+    const { container } = renderWithValue(undefined);
+    expect(container.innerHTML).toBeFalsy();
+  });
+
+  test('renders nothing when value is a non-boolean', () => {
+    const { container } = renderWithValue('some string');
+    expect(container.innerHTML).toBeFalsy();
+  });
+});

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

@@ -0,0 +1,34 @@
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { Icon } from 'Components/icon/Icon';
+
+export const BooleanCellRenderer = (props: CustomCellRendererProps) => {
+  const { value } = props;
+
+  if (value === true) {
+    return (
+      <div className="ds-boolean-cell-renderer">
+        <Icon
+          size={24}
+          name="check-solid"
+          color="var(--color-semantic-success-700)"
+          screenReaderText="true"
+        />
+      </div>
+    );
+  }
+  else if (value === false) {
+    return (
+      <div className="ds-boolean-cell-renderer">
+        <Icon
+          size={24}
+          name="x-solid"
+          color="var(--color-semantic-destructive-700)"
+          screenReaderText="false"
+        />
+      </div>
+    );
+  }
+  else {
+    return null;
+  }
+};

package/src/components/table/cellRenderers/CheckboxCellRenderer.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import userEvent from '@testing-library/user-event';
+import { CheckboxCellRenderer } from './CheckboxCellRenderer';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+
+const createMockProps = (overrides: Partial<CustomCellRendererProps> = {}): CustomCellRendererProps => ({
+  value: false,
+  node: {
+    setDataValue: vi.fn(),
+  },
+  column: 'testField',
+  ...overrides,
+} as unknown as CustomCellRendererProps);
+
+describe('CheckboxCellRenderer', () => {
+  test('renders a checkbox', () => {
+    const props = createMockProps();
+    render(<CheckboxCellRenderer {...props} />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  test('renders unchecked when value is false', () => {
+    const props = createMockProps({ value: false });
+    render(<CheckboxCellRenderer {...props} />);
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  });
+
+  test('renders checked when value is true', () => {
+    const props = createMockProps({ value: true });
+    render(<CheckboxCellRenderer {...props} />);
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+
+  test('calls node.setDataValue with toggled value on change', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      value: false,
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: 'attended' as unknown as CustomCellRendererProps['column'],
+    });
+
+    render(<CheckboxCellRenderer {...props} />);
+    await userEvent.click(screen.getByRole('checkbox'));
+    expect(setDataValue).toHaveBeenCalledWith('attended', true);
+  });
+
+  test('toggles from true to false on change', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      value: true,
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: 'attended' as unknown as CustomCellRendererProps['column'],
+    });
+
+    render(<CheckboxCellRenderer {...props} />);
+    await userEvent.click(screen.getByRole('checkbox'));
+    expect(setDataValue).toHaveBeenCalledWith('attended', false);
+  });
+
+  test('does not call setDataValue when column is undefined', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      value: false,
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: undefined as unknown as CustomCellRendererProps['column'],
+    });
+
+    render(<CheckboxCellRenderer {...props} />);
+    await userEvent.click(screen.getByRole('checkbox'));
+    expect(setDataValue).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,28 @@
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { CheckboxInput } from 'Components/formField/inputs/checkbox/CheckboxInput';
+
+export const CheckboxCellRenderer = (props: CustomCellRendererProps) => {
+  const {
+    value,
+    node,
+    column,
+    colDef = {},
+  } = props;
+
+  const { cellRendererParams, headerName } = colDef;
+
+  return (
+    <div className="ds-checkbox-cell-renderer">
+      <CheckboxInput
+        checked={value}
+        aria-label={headerName && `Checkbox: ${headerName}`}
+        onChange={() => {
+          if (column) {
+            node.setDataValue(column, !value);
+          }
+        }}
+        {...cellRendererParams}
+      />
+    </div>
+  );
+};

package/src/components/table/cellRenderers/booleanCellRenderer.scss

@@ -0,0 +1,7 @@
+.ds-boolean-cell-renderer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}

package/src/components/table/table.scss

@@ -58,6 +58,6 @@
   }
 }
 
-.ag-cell-focus.ds-table__cell--supress-focus:focus-within {
+.ag-cell-focus.ds-table__cell--suppress-focus:focus-within {
   border-color: transparent;
 }

package/src/index.scss

@@ -37,10 +37,12 @@
 @use "components/progress/progress.scss";
 @use "components/toast/toast.scss";
 @use "components/datePicker/datePicker.scss";
+@use "components/dateTimePicker/dateTimePicker.scss";
 @use "components/avatar/avatar.scss";
 @use "components/singleUser/singleUser.scss";
 @use "components/avatarGroup/avatarGroup.scss";
 @use "components/userDropdown/userDropdown.scss";
+@use "components/table/cellRenderers/booleanCellRenderer.scss";
 @use "components/row/row.scss";
 @use "components/combobox/combobox.scss";
 @use "components/toggle/toggle.scss";

package/src/index.ts

@@ -10,6 +10,8 @@ export { Banner, BANNER_LEVEL, type BannerProps } from 'Components/banner/Banner
 export { Button } from 'Components/button/Button';
 export { Card } from 'Components/card/Card';
 export { DatePicker } from 'Components/datePicker/DatePicker';
+export { DateTimePicker } from 'Components/dateTimePicker/DateTimePicker';
+export type { DateTimePickerDisplayFormat, DateTimePickerProps } from 'Components/dateTimePicker/DateTimePicker';
 export { Dropdown } from 'Components/dropdown/Dropdown';
 export { Tag } from 'Components/tag/Tag';
 export type { TagProps, TagColor } from 'Components/tag/Tag';
@@ -42,6 +44,7 @@ export { SingleUser, type SingleUserProps } from 'Components/singleUser/SingleUs
 export { Slideover, type SlideoverProps } from 'Components/slideover/Slideover';
 export { SlideoverManager } from 'Components/slideoverManager/SlideoverManager';
 export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
+export { BooleanCellRenderer } from 'Components/table/cellRenderers/BooleanCellRenderer';
 export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
 export { GridApiContext } from 'Components/table/GridApiContext';
 export { Table } from 'Components/table/Table';
@@ -63,3 +66,4 @@ export type {
 } from 'Components/combobox/types';
 export { Toggle } from 'Components/toggle/Toggle';
 export { SlideoverUtils } from 'Utils/SlideoverUtils';
+export { CheckboxCellRenderer } from 'Components/table/cellRenderers/CheckboxCellRenderer';