@arbor-education/design-system.components 0.5.1 → 0.5.3

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

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchBar } from './SearchBar';
+
+const meta = {
+  title: 'Components/SearchBar',
+  component: SearchBar,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    searchValue: {
+      control: 'text',
+      description: 'The current search input value',
+    },
+    setSearchValue: {
+      action: 'search value changed',
+      description: 'Callback fired when the search input changes',
+    },
+    placeholderText: {
+      control: 'text',
+      description: 'Text displayed in the inactive/collapsed state',
+    },
+    hoverText: {
+      control: 'text',
+      description: 'Text displayed when hovering the inactive state',
+    },
+    alwaysOpen: {
+      control: 'boolean',
+      description: 'Whether the search bar should be always open',
+    },
+  },
+} satisfies Meta<typeof SearchBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const InteractiveSearchBar = (args: React.ComponentProps<typeof SearchBar>) => {
+  const [value, setValue] = useState(args.searchValue ?? '');
+  useEffect(() => {
+    setValue(args.searchValue ?? '');
+  }, [args.searchValue]);
+  return <SearchBar {...args} searchValue={value} setSearchValue={setValue} />;
+};
+
+export const Default: Story = {
+  render: args => <InteractiveSearchBar {...args} />,
+};
+
+export const WithPlaceholder: Story = {
+  render: args => <InteractiveSearchBar {...args} />,
+  args: {
+    placeholderText: 'Search...',
+  },
+};
+
+export const WithHoverText: Story = {
+  render: args => <InteractiveSearchBar {...args} />,
+  args: {
+    placeholderText: 'Search...',
+    hoverText: 'Start searching',
+  },
+};
+
+export const WithHoverTextNoPlaceholder: Story = {
+  render: args => <InteractiveSearchBar {...args} />,
+  args: {
+    hoverText: 'Start searching',
+  },
+};
+
+export const WithSearchValue: Story = {
+  render: args => <InteractiveSearchBar {...args} />,
+  args: {
+    searchValue: 'Jacob Black',
+    placeholderText: 'Search...',
+  },
+};
+
+export const AlwaysOpen: Story = {
+  render: args => <InteractiveSearchBar {...args} />,
+  args: {
+    alwaysOpen: true,
+  },
+};

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

@@ -11,30 +11,130 @@ describe('SearchBar component', () => {
     setSearchMock.mockClear();
   });
 
-  test('renders search bar with placeholder text', () => {
-    render(<SearchBar setSearchValue={setSearchMock} placeholderText="Search for something" />);
-    expect(screen.getByText('Search for something')).toBeInTheDocument();
-  });
+  describe('inactive state', () => {
+    test('renders search bar with placeholder text', () => {
+      render(<SearchBar setSearchValue={setSearchMock} placeholderText="Search for something" />);
+      expect(screen.getByText('Search for something')).toBeInTheDocument();
+    });
+
+    test('renders search bar with icon only when no placeholder text', () => {
+      render(<SearchBar setSearchValue={setSearchMock} />);
+      expect(screen.getByTestId('search-bar-inactive')).toHaveClass('ds-search-bar--inactive-icon-only');
+    });
+
+    test('clicking the search icon opens the search bar', async () => {
+      render(<SearchBar setSearchValue={setSearchMock} />);
+      await userEvent.click(screen.getByTestId('search-bar-inactive'));
+      expect(screen.getByLabelText('Search input')).toBeInTheDocument();
+    });
+
+    test('shows hoverText on mouse enter', async () => {
+      render(<SearchBar setSearchValue={setSearchMock} placeholderText="Search" hoverText="Type to search" />);
+      fireEvent.mouseEnter(screen.getByTestId('search-bar-inactive'));
+      expect(screen.getByText('Type to search')).toBeInTheDocument();
+    });
 
-  test('renders search bar with icon only', () => {
-    render(<SearchBar setSearchValue={setSearchMock} />);
-    expect(screen.getByTestId('search-bar-inactive')).toHaveClass('ds-search-bar--inactive-icon-only');
+    test('restores placeholderText on mouse leave', async () => {
+      render(<SearchBar setSearchValue={setSearchMock} placeholderText="Search" hoverText="Type to search" />);
+      const button = screen.getByTestId('search-bar-inactive');
+      fireEvent.mouseEnter(button);
+      fireEvent.mouseLeave(button);
+      expect(screen.getByText('Search')).toBeInTheDocument();
+    });
+
+    test('keeps placeholder on hover when no hoverText provided', () => {
+      render(<SearchBar setSearchValue={setSearchMock} placeholderText="Search" />);
+      const button = screen.getByTestId('search-bar-inactive');
+      fireEvent.mouseEnter(button);
+      expect(screen.getByText('Search')).toBeInTheDocument();
+    });
   });
 
-  test('runs setSearch when input changes', async () => {
-    render(<SearchBar setSearchValue={setSearchMock} />);
-    await userEvent.click(screen.getByTestId('search-bar-inactive'));
-    const input = screen.getByLabelText('Search input');
-    fireEvent.change(input, { target: { value: 'Hello' } });
-    expect(setSearchMock).toHaveBeenCalledTimes(1);
-    expect(setSearchMock).toHaveBeenCalledWith('Hello');
+  describe('active state', () => {
+    test('shows active search bar immediately when searchValue is provided', () => {
+      render(<SearchBar setSearchValue={setSearchMock} searchValue="hello" />);
+      expect(screen.getByLabelText('Search input')).toBeInTheDocument();
+      expect(screen.queryByTestId('search-bar-inactive')).not.toBeInTheDocument();
+    });
+
+    test('shows active search bar immediately when alwaysOpen is true', () => {
+      render(<SearchBar setSearchValue={setSearchMock} alwaysOpen={true} />);
+      expect(screen.getByLabelText('Search input')).toBeInTheDocument();
+      expect(screen.queryByTestId('search-bar-inactive')).not.toBeInTheDocument();
+    });
+
+    test('calls setSearchValue when input changes', async () => {
+      render(<SearchBar setSearchValue={setSearchMock} />);
+      await userEvent.click(screen.getByTestId('search-bar-inactive'));
+      const input = screen.getByLabelText('Search input');
+      fireEvent.change(input, { target: { value: 'Hello' } });
+      expect(setSearchMock).toHaveBeenCalledTimes(1);
+      expect(setSearchMock).toHaveBeenCalledWith('Hello');
+    });
+
+    test('does not throw when setSearchValue is not provided and user types', async () => {
+      render(<SearchBar alwaysOpen={true} />);
+      const input = screen.getByLabelText('Search input');
+      expect(() => fireEvent.change(input, { target: { value: 'Hello' } })).not.toThrow();
+    });
+
+    test('renders clear button when active and alwaysOpen is false', async () => {
+      render(<SearchBar setSearchValue={setSearchMock} alwaysOpen={false} />);
+      await userEvent.click(screen.getByTestId('search-bar-inactive'));
+      expect(screen.getByRole('button', { name: 'Clear search' })).toBeInTheDocument();
+    });
+
+    test('does not render clear button when alwaysOpen is true', () => {
+      render(<SearchBar setSearchValue={setSearchMock} alwaysOpen={true} />);
+      expect(screen.queryByRole('button', { name: 'Clear search' })).not.toBeInTheDocument();
+    });
   });
 
-  test('runs handleClear when clear button is clicked', async () => {
-    render(<SearchBar setSearchValue={setSearchMock} />);
-    await userEvent.click(screen.getByTestId('search-bar-inactive'));
-    await userEvent.click(screen.getByRole('button', { name: 'Clear search' }));
-    expect(setSearchMock).toHaveBeenCalledTimes(1);
-    expect(setSearchMock).toHaveBeenCalledWith('');
+  describe('clear behaviour', () => {
+    test('clicking clear calls setSearchValue with empty string', async () => {
+      render(<SearchBar setSearchValue={setSearchMock} />);
+      await userEvent.click(screen.getByTestId('search-bar-inactive'));
+      await userEvent.click(screen.getByRole('button', { name: 'Clear search' }));
+      expect(setSearchMock).toHaveBeenCalledWith('');
+    });
+
+    test('clicking clear hides the search bar and shows inactive state', async () => {
+      render(<SearchBar setSearchValue={setSearchMock} />);
+      await userEvent.click(screen.getByTestId('search-bar-inactive'));
+      await userEvent.click(screen.getByRole('button', { name: 'Clear search' }));
+      expect(screen.getByTestId('search-bar-inactive')).toBeInTheDocument();
+      expect(screen.queryByLabelText('Search input')).not.toBeInTheDocument();
+    });
+
+    test('does not throw when setSearchValue is not provided and clear is pressed', async () => {
+      render(<SearchBar searchValue="hello" />);
+      expect(() =>
+        fireEvent.click(screen.getByRole('button', { name: 'Clear search' })),
+      ).not.toThrow();
+    });
+
+    test('pressing Enter on clear button triggers clear', async () => {
+      render(<SearchBar setSearchValue={setSearchMock} />);
+      await userEvent.click(screen.getByTestId('search-bar-inactive'));
+      const clearButton = screen.getByRole('button', { name: 'Clear search' });
+      fireEvent.keyDown(clearButton, { key: 'Enter' });
+      expect(setSearchMock).toHaveBeenCalledWith('');
+    });
+
+    test('pressing Space on clear button triggers clear', async () => {
+      render(<SearchBar setSearchValue={setSearchMock} />);
+      await userEvent.click(screen.getByTestId('search-bar-inactive'));
+      const clearButton = screen.getByRole('button', { name: 'Clear search' });
+      fireEvent.keyDown(clearButton, { key: ' ' });
+      expect(setSearchMock).toHaveBeenCalledWith('');
+    });
+
+    test('pressing other keys on clear button does not trigger clear', async () => {
+      render(<SearchBar setSearchValue={setSearchMock} />);
+      await userEvent.click(screen.getByTestId('search-bar-inactive'));
+      const clearButton = screen.getByRole('button', { name: 'Clear search' });
+      fireEvent.keyDown(clearButton, { key: 'Tab' });
+      expect(setSearchMock).not.toHaveBeenCalled();
+    });
   });
 });

package/src/components/searchBar/SearchBar.tsx

@@ -1,20 +1,32 @@
 import classNames from 'classnames';
 import { Button } from 'Components/button/Button';
 import { Icon } from 'Components/icon/Icon';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 type SearchBarProps = {
   searchValue?: string;
   setSearchValue?: (searchValue: string) => void;
   placeholderText?: string;
+  hoverText?: string;
+  alwaysOpen?: boolean;
 };
 
 export const SearchBar = (props: SearchBarProps) => {
-  const { searchValue, setSearchValue, placeholderText } = props;
+  const { searchValue, setSearchValue, placeholderText, hoverText, alwaysOpen = false } = props;
 
-  const [isSearchVisible, setIsSearchVisible] = useState(!!searchValue);
+  const [isSearchVisible, setIsSearchVisible] = useState<boolean>(alwaysOpen || !!searchValue);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
+  const [displayedText, setDisplayedText] = useState<string | null>(placeholderText ?? null);
+
+  useEffect(() => {
+    setIsSearchVisible(alwaysOpen || !!searchValue);
+  }, [alwaysOpen, searchValue]);
+
+  useEffect(() => {
+    setDisplayedText(placeholderText ?? null);
+  }, [placeholderText]);
+
   const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue?.(event.target.value);
   };
@@ -38,17 +50,33 @@ export const SearchBar = (props: SearchBarProps) => {
     }
   };
 
+  const handleMouseEnter = () => {
+    if (hoverText) {
+      setDisplayedText(hoverText);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (placeholderText) {
+      setDisplayedText(placeholderText);
+    }
+    else {
+      setDisplayedText(null);
+    }
+  };
+
   if (!isSearchVisible) {
     return (
       <Button
         data-testid="search-bar-inactive"
         className={
           classNames('ds-search-bar--inactive', {
-            'ds-search-bar--inactive-icon-only': !placeholderText,
-            'ds-search-bar--inactive-with-placeholder': placeholderText,
+            'ds-search-bar--inactive-icon-only': !displayedText,
           })
         }
         onClick={handleSearchIconClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
       >
         <Icon
           name="search"
@@ -56,10 +84,10 @@ export const SearchBar = (props: SearchBarProps) => {
           color="var(--search-global-default-color-icon)"
           className="ds-search-bar__icon"
         />
-        {placeholderText
+        {displayedText
           && (
             <span className="ds-search-bar--inactive__placeholder">
-              {placeholderText}
+              {displayedText}
             </span>
           )}
       </Button>
@@ -82,16 +110,18 @@ export const SearchBar = (props: SearchBarProps) => {
         ref={searchInputRef}
         aria-label="Search input"
       />
-      <span
-        className="ds-search-bar__clear-container"
-        role="button"
-        tabIndex={0}
-        onClick={handleClear}
-        onKeyDown={handleClearKeyDown}
-        aria-label="Clear search"
-      >
-        <Icon name="x" size={12} className="ds-search-bar__clear" />
-      </span>
+      {!alwaysOpen && (
+        <span
+          className="ds-search-bar__clear-container"
+          role="button"
+          tabIndex={0}
+          onClick={handleClear}
+          onKeyDown={handleClearKeyDown}
+          aria-label="Clear search"
+        >
+          <Icon name="x" size={12} className="ds-search-bar__clear" />
+        </span>
+      )}
     </span>
   );
 };

package/src/components/searchBar/searchBar.scss

@@ -1,7 +1,3 @@
-.ds-search-bar__icon {
-    color: var(--search-global-default-color-icon);
-}
-
 .ds-search-bar {
     display: flex;
     align-items: center;
@@ -9,58 +5,88 @@
     border-radius: var(--search-global-radius);
     background: var(--search-global-default-color-background);
     padding: var(--search-global-spacing-vertical) var(--search-global-spacing-horizontal);
+    min-height: var(--size-medium);
+    width: fit-content;
 
-    &:focus-within {
-        background: var(--search-global-focus-color-background);
-        box-shadow: 0 0 0 3px var(--color-brand-500);
-
-        .ds-search-bar__icon {
-            color: var(--search-global-focus-color-icon);
-        }
+    &__icon {
+        color: var(--search-global-default-color-icon);
     }
-}
 
-.ds-search-bar__clear {
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-}
+    &__clear {
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        display: flex;
 
-.ds-search-bar__input {
-    color: var(--search-global-default-color-text);
-    background-color: var(--search-global-default-color-background);
-    border: none;
+        &-container {
+            border-radius: var(--border-radius-round);
+            padding: var(--spacing-xsmall);
 
-    &:focus { 
-        outline: none;
-    }
-}
+            &:hover {
+                background-color: var(--color-grey-600);
 
-.ds-search-bar--inactive {
-    display: flex;
-    cursor: pointer;
-    width: fit-content;
-    height: fit-content;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    padding: var(--search-global-spacing-vertical) var(--search-global-spacing-horizontal);
-    gap: var(--search-global-spacing-horizontal-gap);
+                svg {
+                    color: var(--color-mono-white);
+                }
+            }
 
-    &__placeholder {
-      color: var(--search-global-default-color-text);
+            &:focus {
+                box-shadow: 0 0 0 3px var(--color-brand-300);
+                outline: none;
+            }
+        }
     }
 
-    &-icon-only {
-      padding: var(--search-global-spacing-vertical);
+    &__input {
+        color: var(--search-global-default-color-text);
+        background-color: var(--search-global-default-color-background);
+        border: none;
+    
+        &:focus { 
+            outline: none;
+            background: var(--search-global-focus-color-background);
+        }
     }
 
-    &:hover {
-        background: var(--search-global-hover-color-background);
+    &:focus-within {
+        background: var(--search-global-focus-color-background);
+        box-shadow: 0 0 0 3px var(--color-brand-300);
 
         .ds-search-bar__icon {
-            color: var(--search-global-hover-color-icon);
+            color: var(--search-global-focus-color-icon);
+        }
+    }
+
+    &--inactive {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        border: none;
+        cursor: text;
+        background: var(--search-global-default-color-background);
+        padding: var(--search-global-spacing-vertical) var(--search-global-spacing-horizontal);
+    
+        &__placeholder {
+          color: var(--search-global-default-color-text);
+        }
+    
+        &-icon-only {
+          padding: var(--search-global-spacing-vertical);
+          cursor: pointer;
+          height: fit-content;
+          width: fit-content;
+        }
+    
+        &:hover {
+            background: var(--search-global-hover-color-background);
+    
+            .ds-search-bar__icon {
+                color: var(--search-global-hover-color-icon);
+            }
+        }
+
+        &:focus {
+            background: var(--search-global-focus-color-background);
         }
     }
 }

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

@@ -578,6 +578,20 @@ export const WithButtonCellRendererThatOpensAModalWithComposableModal: StoryObj<
   },
 };
 
+export const WithInlineTextCellRenderer: Story = {
+  args: {
+    rowData: sampleData,
+    columnDefs: [{ field: 'name', cellRenderer: 'dsInlineTextCellRenderer', cellRendererParams: {
+      supressCellFocusAndFocusFirstElement: true,
+      suppressCount: true,
+      suppressDoubleClickExpand: true,
+      suppressEnterExpand: true,
+    } }],
+    defaultColDef,
+    domLayout: 'autoHeight',
+  },
+};
+
 export const WithTreeData: Story = {
   args: {
     columnDefs: [
@@ -803,11 +817,10 @@ export const TidyTable: Story = {
       field: 'name',
       headerName: 'Marksheet Columns',
       headerTooltip: 'Marksheet column or group name',
-      editable: true,
-      singleClickEdit: true,
+      editable: false,
       cellRenderer: 'agGroupCellRenderer',
-      cellEditor: 'agTextCellEditor',
       cellRendererParams: {
+        supressCellFocusAndFocusFirstElement: true,
         suppressCount: true,
         suppressDoubleClickExpand: true,
         suppressEnterExpand: true,

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

@@ -1303,6 +1303,37 @@ describe('Table', () => {
     });
   });
 
+  describe('InlineTextCellRenderer', () => {
+    const columnDefs = [{
+      field: 'name',
+      headerName: 'Name',
+      cellRenderer: 'dsInlineTextCellRenderer',
+    }];
+
+    test('renders text input with initial value', async () => {
+      const rowData = [{ name: 'Alice' }];
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('textbox')).toBeInTheDocument());
+      expect(screen.getByRole('textbox')).toHaveValue('Alice');
+    });
+
+    test('renders text input with empty value when field is empty', async () => {
+      const rowData = [{ name: '' }];
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('textbox')).toBeInTheDocument());
+      expect(screen.getByRole('textbox')).toHaveValue('');
+    });
+
+    test('updates input value when user types', async () => {
+      const rowData = [{ name: 'Alice' }];
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      const input = await screen.findByRole('textbox');
+      await userEvent.clear(input);
+      await userEvent.type(input, 'Bob');
+      expect(input).toHaveValue('Bob');
+    });
+  });
+
   describe('Cell Editing', () => {
     describe('with literal data values', () => {
       test('supports editing text fields', async () => {

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

@@ -2,7 +2,9 @@ import type { CustomCellRendererProps } from 'ag-grid-react';
 import classNames from 'classnames';
 import { Button, type ButtonProps } from 'Components/button/Button';
 
-type ButtonCellRendererProps = CustomCellRendererProps & { value: ButtonProps };
+type ButtonCellRendererProps = CustomCellRendererProps & {
+  value: ButtonProps;
+};
 
 export const ButtonCellRenderer = (props: ButtonCellRendererProps) => {
   const { value, valueFormatted } = props;

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

@@ -1,10 +1,47 @@
 import type { CustomCellRendererProps } from 'ag-grid-react';
+import { TextInput } from 'Components/formField/inputs/text/TextInput';
+import { type ChangeEvent, useRef, useState } from 'react';
+import { useComponentDidMount } from 'Utils/hooks/useComponentDidMount';
 
-type InlineTextCellRendererProps = CustomCellRendererProps & { value: string };
+type InlineTextCellRendererProps = CustomCellRendererProps & {
+  value: string;
+};
 
 export const InlineTextCellRenderer = (props: InlineTextCellRendererProps) => {
-  const { value, valueFormatted } = props;
-  const valueToRender = String(valueFormatted ?? value ?? '');
+  const { value, valueFormatted, column, node } = props;
+  const [valueToRender, setValueToRender] = useState(String(valueFormatted ?? value ?? ''));
+  const valueRef = useRef(valueToRender);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const handleChange = (newValue: ChangeEvent<HTMLInputElement>) => {
+    const next = typeof newValue === 'string' ? newValue : newValue.target.value;
+    setValueToRender(next);
+    valueRef.current = next;
+  };
+
+  useComponentDidMount(() => {
+    const wrapper = wrapperRef.current;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.stopPropagation();
+        if (column) {
+          node.setDataValue(column, valueRef.current);
+        }
+      }
+    };
+
+    wrapper?.addEventListener('keydown', handleKeyDown);
+    return () => {
+      wrapper?.removeEventListener('keydown', handleKeyDown);
+    };
+  });
 
-  return <span className="ds-table__inline-text-cell">{valueToRender}</span>;
+  return (
+    <div ref={wrapperRef}>
+      <TextInput
+        value={valueToRender}
+        onChange={handleChange}
+      />
+    </div>
+  );
 };

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

@@ -5,7 +5,7 @@ import type { SelectDropdownItemProps } from 'Components/formField/inputs/select
 import { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
 import { useComponentDidMount } from 'Utils/hooks/useComponentDidMount';
 
-export type SelectDropdownCellRendererProps = CustomCellRendererProps & {
+type SelectDropdownCellRendererProps = CustomCellRendererProps & {
   options?: SelectDropdownItemProps[];
   placeholder?: string;
 };

package/src/components/table/table.scss

@@ -1,16 +1,6 @@
 .ds-table {
-  &__inline-text-cell {
-    padding: var(--spacing-small) var(--spacing-medium);
-    border-radius: var(--form-field-radius);
-    border: var(--border-weight) solid var(--form-field-text-default-color-border);
-    background: var(--form-field-text-default-color-background);
-    color: var(--form-field-text-default-color-text);
-  }
-
-  &__select-dropdown {
-    .ds-button--dropdown {
-      width: 100%;
-    }
+  &__select-dropdown-cell {
+    width: 100%;
   }
 
   &__container {

package/src/index.ts

@@ -33,5 +33,6 @@ export { Toast } from 'Components/toast/Toast';
 export { DatePicker } from 'Components/datePicker/DatePicker';
 export { Avatar } from 'Components/avatar/Avatar';
 export { UserDropdown } from 'Components/userDropdown/UserDropdown';
+export { SearchBar } from 'Components/searchBar/SearchBar';
 export type { UserDropdownUserInfoAction } from 'Components/userDropdown/UserDropdown';
 export { ArborLogo, GovhubLogo, KeyLogo, SampeopleLogo, RobinLogo, TimetablerLogo } from 'Components/userDropdown/assets/logos';