@arbor-education/design-system.components 0.16.0 → 0.17.0

package/src/components/row/Row.tsx

@@ -1,10 +1,11 @@
 import classNames from 'classnames';
 import { Icon } from 'Components/icon/Icon';
-import type { MouseEvent, MouseEventHandler } from 'react';
+import type { CSSProperties, MouseEvent, MouseEventHandler } from 'react';
 import { ENTER_KEY, SPACE_KEY } from 'Utils/keyboardConstants';
 
 export type RowProps = {
   className?: string;
+  style?: CSSProperties;
   label?: string;
   value?: string;
   note?: string;
@@ -14,6 +15,7 @@ export type RowProps = {
 export const Row = (props: RowProps) => {
   const {
     className,
+    style,
     label,
     value,
     note,
@@ -31,6 +33,7 @@ export const Row = (props: RowProps) => {
         },
         className,
       )}
+      style={style}
       onClick={onClick}
       onKeyDown={(e) => {
         if (isClickable && [ENTER_KEY, SPACE_KEY].includes(e.key)) {

package/src/components/row/row.scss

@@ -47,15 +47,23 @@
   }
 
   &__label {
-    min-width: 190px;
+    flex-basis: 30%;
+    max-width: 190px;
     font-weight: var(--font-weight-semi-bold);
   }
 
   &__value {
     flex-grow: 1;
+    flex-basis: 70%;
+
+    &:has(+ .ds-row__note) {
+      flex-basis: 50%;
+    }
   }
 
   &__note {
     font-style: italic;
+    flex-basis: 20%;
+    text-align: right;
   }
 }

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from '@storybook/test';
 import {
   Controls,
   Heading as DocHeading,
@@ -843,7 +844,53 @@ export const WithHideColumnsDropdown: Story = {
         headerContent={(
           <HideColumnsDropdown
             overrideColumnHiding={overrideColumnHiding}
-            onSelectionChanged={console.log}
+            onSelectionChanged={fn()}
+          />
+        )}
+      />
+    );
+  },
+};
+
+export const WithInitiallyHiddenColumns: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Use AG Grid initial state to start with selected columns hidden. This example hides the email and role columns on first render.',
+      },
+    },
+  },
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+    initialState: {
+      columnVisibility: {
+        hiddenColIds: ['email', 'role'],
+      },
+    },
+  },
+  render: (args) => {
+    const {
+      rowData,
+      columnDefs,
+      defaultColDef,
+      domLayout,
+      initialState,
+    } = args;
+
+    return (
+      <Table
+        rowData={rowData}
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+        domLayout={domLayout}
+        initialState={initialState}
+        headerContent={(
+          <HideColumnsDropdown
+            onSelectionChanged={fn()}
           />
         )}
       />
@@ -895,7 +942,7 @@ export const WithRestrictedHideColumnsDropdown: Story = {
         headerContent={(
           <HideColumnsDropdown
             overrideColumnHiding={overrideColumnHiding}
-            onSelectionChanged={console.log}
+            onSelectionChanged={fn()}
             columns={columns}
           />
         )}

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

@@ -7,6 +7,7 @@ import { HideColumnsDropdown } from 'Components/table/tableControls/HideColumnsD
 import { TableSettingsDropdown } from './tableControls/TableSettingsDropdown';
 import userEvent from '@testing-library/user-event';
 import type { GridApi } from 'ag-grid-enterprise';
+import type { Column } from 'ag-grid-community';
 import * as focusFirstFocusableElementModule from 'Utils/focusFirstFocusableElement';
 
 describe('Table', () => {
@@ -385,6 +386,25 @@ describe('Table', () => {
       });
     });
 
+    test('reflects initially hidden columns in dropdown text', async () => {
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          initialState={{
+            columnVisibility: {
+              hiddenColIds: ['email'],
+            },
+          }}
+          headerContent={<HideColumnsDropdown />}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Hide (1)')).toBeInTheDocument();
+      });
+    });
+
     test('works with custom columns prop', async () => {
       const mockColumn = {
         getColDef: () => ({ headerName: 'Custom Column' }),
@@ -417,6 +437,39 @@ describe('Table', () => {
       expect(menuItems[0]).toHaveTextContent('Custom Column');
     });
 
+    test('reflects initially hidden state when using custom columns prop', async () => {
+      const visibleColumn = {
+        getColDef: () => ({ headerName: 'Visible Column' }),
+        isVisible: () => true,
+        getColId: () => 'visible',
+      };
+
+      const hiddenColumn = {
+        getColDef: () => ({ headerName: 'Hidden Column' }),
+        isVisible: () => false,
+        getColId: () => 'hidden',
+      };
+
+      render(
+        <div>
+          <HideColumnsDropdown
+            columns={[visibleColumn, hiddenColumn] as unknown as Column[]}
+            overrideColumnHiding
+          />
+        </div>,
+      );
+
+      await waitFor(() => expect(screen.getByText('Hide (1)')).toBeInTheDocument());
+      await userEvent.click(screen.getByText('Hide (1)'));
+
+      const menuItems = await screen.findAllByRole('menuitemcheckbox');
+      const visibleColumnItem = menuItems.find(item => item.textContent === 'Visible Column');
+      const hiddenColumnItem = menuItems.find(item => item.textContent === 'Hidden Column');
+
+      expect(visibleColumnItem).toHaveAttribute('aria-checked', 'false');
+      expect(hiddenColumnItem).toHaveAttribute('aria-checked', 'true');
+    });
+
     test('returns null when no columns are available', () => {
       const { container } = render(
         <div><HideColumnsDropdown columns={[]} /></div>,

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

@@ -1,5 +1,5 @@
 import { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { GridApiContext } from '../GridApiContext';
 import type { Column } from 'ag-grid-community';
 
@@ -9,6 +9,10 @@ export type HideColumnsDropdownProps = {
   overrideColumnHiding?: boolean;
 };
 
+const getHiddenColumnIds = (columns?: Column[] | null) => columns
+  ?.filter(column => !column.isVisible())
+  .map(column => column.getColId()) ?? [];
+
 export const HideColumnsDropdown = (props: HideColumnsDropdownProps) => {
   const {
     columns: rawColumns,
@@ -18,7 +22,11 @@ export const HideColumnsDropdown = (props: HideColumnsDropdownProps) => {
 
   const gridApi = useContext(GridApiContext);
   const currentColumns = rawColumns || gridApi?.getColumns();
-  const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
+  const [hiddenColumns, setHiddenColumns] = useState<string[]>(() => getHiddenColumnIds(rawColumns));
+
+  useEffect(() => {
+    setHiddenColumns(getHiddenColumnIds(currentColumns));
+  }, [currentColumns]);
 
   if (!currentColumns || currentColumns.length === 0) return null;
 
@@ -50,6 +58,7 @@ export const HideColumnsDropdown = (props: HideColumnsDropdownProps) => {
       multiple
       placeholder={placeholderText}
       options={options}
+      selectedValues={hiddenColumns}
       onSelectionChange={handleVisibilityChange}
       alwaysShowPlaceholder
     />