Merge pull request #13 from kubit-ui/feature/updates-and-improvements

Feature/updates and improvements

Author: kubit-ui

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -152,8 +152,8 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",
     "lottie-web": "^5.12.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
     "styled-components": "^6.1.8"
   },

src/components/carousel/__tests__/carousel.test.tsx

@@ -76,6 +76,24 @@ describe('Carousel component', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('Carousel with no elements should not break', async () => {
+    const { container, getByTestId } = renderProvider(
+      <CarouselUnControlled {...mockProps} elements={[]} />
+    );
+
+    const carousel = getByTestId('dataTestIdCarouselWrapper');
+    expect(carousel).toBeInTheDocument();
+
+    const results = await axe(container);
+    // Disable style in line
+    expect(container).toHTMLValidate({
+      rules: {
+        'no-inline-style': 'off',
+      },
+    });
+    expect(results).toHaveNoViolations();
+  });
+
   it('Carousel with numPages 1', async () => {
     const elements = [
       <div key="0" aria-label="1 of 10" aria-roledescription="slide" role="group">

src/components/carousel/hooks/useCarousel.ts

@@ -551,7 +551,8 @@ export const useCarousel = ({
       !carouselContainer ||
       !carouselContent ||
       !allowShift.current ||
-      !numElementsPerPage.current
+      !numElementsPerPage.current ||
+      !elements.length
     ) {
       return;
     }

src/components/dropdownSelected/__tests__/dropdownSelected.test.tsx

@@ -182,4 +182,26 @@ describe('DropdownSelected component', () => {
     expect(handleMouseEnter).toHaveBeenCalledTimes(1);
     expect(handleMouseLeave).toHaveBeenCalledTimes(1);
   });
+
+  it('closes the dropdown when the visibility changes', async () => {
+    // Mock the document.hidden property
+    Object.defineProperty(document, 'hidden', {
+      configurable: true,
+      get: () => true,
+    });
+
+    const { getAllByRole } = renderProvider(<DropdownSelected {...mockProps} defaultOpen={true} />);
+
+    const option1 = getAllByRole('option')[0];
+    option1.focus();
+
+    expect(option1).toBeInTheDocument();
+
+    await act(async () => {
+      // Simulate the visibilitychange event
+      fireEvent(document, new Event('visibilitychange'));
+    });
+
+    expect(option1).not.toBeInTheDocument();
+  });
 });

src/components/dropdownSelected/dropdownSelectedStandAlone.tsx

@@ -71,9 +71,9 @@ const DropdownSelectedStandAloneComponent = (
       ref={ref}
       data-testid={props.dataTestIdComponent}
       styles={props.styles}
-      onBlur={event => props.onFocus?.(event)}
+      onBlur={props.onBlur}
       onFocus={props.onFocus}
-      onKeyDown={event => props.onKeyDown?.(event)}
+      onKeyDown={props.onKeyDown}
       onMouseEnter={props.onMouseEnter}
       onMouseLeave={props.onMouseLeave}
     >

src/components/dropdownSelected/dropdownSelectedUncontrolled.tsx

@@ -26,6 +26,17 @@ const DropdownSelectedUnControlledComponent = (
 
   const buttonOrLinkRef = React.useRef<HTMLButtonElement>(null);
 
+  // Close dropdown when the document hides
+  React.useEffect(() => {
+    const handleVisibilityChange = e => {
+      if (document.hidden) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+  }, []);
+
   const handleOnClickButton: React.MouseEventHandler<HTMLButtonElement | HTMLLinkElement> = () => {
     props.onButtonClick?.(!open);
     setOpen(!open);

src/components/dropdownSelected/stories/dropdownSelected.stories.tsx

@@ -49,6 +49,7 @@ const commonArgs: IDropdownSelectedUncontrolled = {
         value: 'option2',
       },
     ],
+    type: ListOptionsType.SELECTION,
   },
   closePopoverOnScroll: true,
 };

src/components/input/__tests__/input.test.tsx

@@ -54,10 +54,6 @@ function backspace(element) {
   fireEvent.keyUp(element, sharedEventConfig);
 }
 
-global.structuredClone = jest.fn(val => {
-  return JSON.parse(JSON.stringify(val));
-});
-
 const writeText = jest.fn();
 
 Object.assign(navigator, {
@@ -295,7 +291,7 @@ describe('New Input Component', () => {
       informationAssociatedValue: undefined,
       informationAssociatedIcon: undefined,
     };
-    const { container, getByText, getByAltText } = renderProvider(
+    const { container, getByText, getByLabelText } = renderProvider(
       <Input
         {...commonProps}
         {...informationAssociatedConfig}
@@ -308,7 +304,7 @@ describe('New Input Component', () => {
     const errorMessage = getByText('ERROR');
     expect(errorMessage).toBeInTheDocument();
 
-    const errorIcon = getByAltText('Error alt text');
+    const errorIcon = getByLabelText('Error alt text');
     expect(errorIcon).toBeInTheDocument();
     // A11Y and w3c validator
     const results = await axe(container);

src/components/input/components/errorMessage.tsx

@@ -15,23 +15,20 @@ export const ErrorMessageStandAlone = (props: IErrorMessage): JSX.Element => {
       id={props.errorMessageId}
       styles={props.styles}
     >
-      {props.errorMessage?.content && hasError(props.state) ? (
-        <Text
-          customTypography={props.styles?.errorMessage}
-          dataTestId={`${props.dataTestId}ErrorMessage`}
-          {...props.errorMessage}
-        >
-          {props.errorIcon?.icon && (
-            <ErrorIconWrapperStyled styles={props.styles}>
-              <ElementOrIcon
-                customIconStyles={props.styles?.errorMessageIcon}
-                {...props.errorIcon}
-              />
-            </ErrorIconWrapperStyled>
-          )}
-          {props.errorMessage.content}
-        </Text>
-      ) : null}
+      {hasError(props.state) && (
+        <>
+          <ErrorIconWrapperStyled styles={props.styles}>
+            <ElementOrIcon customIconStyles={props.styles?.errorMessageIcon} {...props.errorIcon} />
+          </ErrorIconWrapperStyled>
+          <Text
+            customTypography={props.styles?.errorMessage}
+            dataTestId={`${props.dataTestId}ErrorMessage`}
+            {...props.errorMessage}
+          >
+            {props.errorMessage?.content}
+          </Text>
+        </>
+      )}
     </InputErrorStyled>
   );
 };

src/components/input/components/informationAssociated.tsx

@@ -44,9 +44,7 @@ export const InformationAssociatedStandAlone = (
       />
     ) : (
       <ElementOrIcon
-        color={props.styles?.informationAssociatedIcon?.color}
-        height={props.styles?.informationAssociatedIcon?.height}
-        width={props.styles?.informationAssociatedIcon?.width}
+        customIconStyles={props.styles?.informationAssociatedIcon}
         {...props.informationAssociatedIcon}
       />
     );