@ssa-ui-kit/core 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/Dropdown/Dropdown.spec.tsx

@@ -141,6 +141,68 @@ describe('Dropdown', () => {
     }
   });
 
+  it('Selected item changed successfully', async () => {
+    const selectedItem = items[2];
+    const {
+      user,
+      mockOnChange,
+      getByRole,
+      queryByRole,
+      getByTestId,
+      rerender,
+    } = setup({
+      selectedItem,
+    });
+
+    expect(mockOnChange).not.toBeCalled();
+
+    let dropdownEl = getByTestId('dropdown');
+
+    let dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    let listboxEl = queryByRole('listbox');
+
+    await user.click(dropdownToggleEl);
+
+    listboxEl = getByRole('listbox');
+    const listItemEls = within(listboxEl).getAllByRole('listitem');
+
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    await within(dropdownToggleEl).findByTitle('Carrot up');
+
+    for (let i = 0; i < items.length; ++i) {
+      const listItem = items[i];
+      const listItemEl = listItemEls[i];
+
+      const itemListValue = getListItemValue(listItem);
+
+      await within(listItemEl).findByText(itemListValue);
+      expect(within(listItemEl).getByRole('button')).toHaveTextContent(
+        itemListValue,
+      );
+
+      if (listItem.id === selectedItem.id) {
+        expect(listItemEl).toHaveAttribute('aria-selected', 'true');
+        expect(listItemEl).toHaveStyle('background: #DEE1EC');
+      } else {
+        expect(listItemEl).toHaveAttribute('aria-selected', 'false');
+      }
+    }
+
+    rerender(
+      <Dropdown onChange={mockOnChange} selectedItem={items[0]}>
+        {items.map((item, index) => (
+          <DropdownOption key={index} value={item.value} />
+        ))}
+      </Dropdown>,
+    );
+
+    dropdownEl = getByTestId('dropdown');
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+    expect(dropdownToggleEl).toHaveTextContent(getListItemValue(items[0]));
+  });
+
   it('Renders with an empty items array', async () => {
     const mockOnChange = jest.fn();
     const { getByTestId, queryByRole, getByRole } = render(

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,9 +1,9 @@
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-
 import DropdownOption from '@components/DropdownOption';
-
+import Button from '@components/Button';
 import Dropdown from './Dropdown';
 import { DropdownProps } from './types';
 import { DropdownOptionProps } from '../..';
@@ -153,3 +153,28 @@ export const Custom: StoryObj = (args: Args) => {
 Custom.args = {
   isDisabled: false,
 };
+
+export const DynamicallyChangedSelectedItem: StoryObj = (args: Args) => {
+  const [selectedIndex, setSelectedIndex] = useState(1);
+
+  const handleUpdate = () => {
+    const newIndex = selectedIndex < items.length - 1 ? selectedIndex + 1 : 0;
+    setSelectedIndex(newIndex);
+  };
+  return (
+    <div>
+      <Dropdown
+        isDisabled={args.isDisabled}
+        selectedItem={items[selectedIndex]}>
+        {items.map((item) => (
+          <DropdownOption key={item.id} value={item.value} />
+        ))}
+      </Dropdown>
+      <Button variant="info" css={{ marginLeft: 10 }} onClick={handleUpdate}>
+        Update selected item
+      </Button>
+    </div>
+  );
+};
+
+DynamicallyChangedSelectedItem.args = { isDisabled: false };

package/src/components/Dropdown/Dropdown.tsx

@@ -77,6 +77,10 @@ const Dropdown = <T extends DropdownOptionProps>({
     }
   }, [isOpen, isDisabled, isFocused]);
 
+  useEffect(() => {
+    setActiveItem(selectedItem);
+  }, [selectedItem]);
+
   useEffect(() => {
     if (isDisabled && isOpen) {
       setIsOpen(false);