Merge pull request #35 from kubit-ui/feature/update-components-and-so…

…lve-bugs

Feature/update components and solve bugs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.16.1",
+  "version": "1.17.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",
@@ -87,60 +87,62 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/core": "^7.26.0",
+    "@babel/helper-environment-visitor": "^7.24.7",
+    "@babel/helper-split-export-declaration": "^7.24.7",
     "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@eslint/compat": "^1.2.3",
+    "@eslint/compat": "^1.2.4",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.15.0",
+    "@eslint/js": "^9.16.0",
     "@kubit-ui-web/eslint-plugin-no-index-import": "^1.0.2",
-    "@storybook/addon-a11y": "^8.4.4",
-    "@storybook/addon-controls": "^8.4.4",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-controls": "^8.4.7",
     "@storybook/addon-coverage": "^1.0.4",
-    "@storybook/addon-essentials": "^8.4.4",
-    "@storybook/addon-interactions": "^8.4.4",
-    "@storybook/addon-links": "^8.4.4",
-    "@storybook/addon-themes": "^8.4.4",
-    "@storybook/blocks": "^8.4.4",
-    "@storybook/react": "^8.4.4",
-    "@storybook/react-vite": "^8.4.4",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
-    "@types/mocha": "^10.0.9",
+    "@types/mocha": "^10.0.10",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/styled-components": "^5.1.34",
     "@types/ungap__structured-clone": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
-    "@typescript-eslint/parser": "^8.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "@ungap/structured-clone": "^1.2.0",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "babel-jest": "^29.7.0",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.15.0",
+    "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",
-    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-n": "^17.13.2",
+    "eslint-plugin-n": "^17.14.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^0.11.1",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "globals": "^15.12.0",
+    "globals": "^15.13.0",
     "gts": "^6.0.2",
-    "html-validate": "^8.25.0",
+    "html-validate": "^8.27.0",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-canvas-mock": "^2.5.2",
@@ -149,15 +151,15 @@
     "jest-junit": "^16.0.0",
     "jest-styled-components": "^7.2.0",
     "json-beautify": "^1.1.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "react-transition-group": "^4.4.5",
     "sort-imports": "^1.1.0",
-    "storybook": "^8.4.4",
+    "storybook": "^8.4.7",
     "ts-jest": "^29.2.5",
     "tsc-alias": "1.8.10",
-    "typedoc": "^0.26.11",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.11",
+    "typedoc": "^0.27.3",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
     "vite-tsconfig-paths": "^4.3.2",
     "yarn-deduplicate": "^6.0.2"
   },

src/components/actionBottomSheet/actionBottomSheetStandAlone.tsx

@@ -55,7 +55,7 @@ const ActionBottomSheetStandAloneComponent = (
     >
       {props.dragIcon && isMobileOrTablet && (
         <DraggableIcon ref={props.dragIconRef} data-drag-icon styles={props.styles}>
-          <ElementOrIcon {...props.dragIcon} />
+          <ElementOrIcon customIconStyles={props.styles.dragIcon} {...props.dragIcon} />
         </DraggableIcon>
       )}
       {hasHeader && (

src/components/actionBottomSheet/types/actionBottomSheetTheme.ts

@@ -21,6 +21,7 @@ export type ActionBottomSheetVariantStylesType = {
   headerContent?: CommonStyleType;
   content?: CommonStyleType;
   popoverVariant?: string;
+  dragIcon?: IconTypes;
   dragIconContainer?: CommonStyleType;
 };
 

src/components/backToTop/backToTopStandAlone.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { pickAriaProps } from '@/utils/aria/aria';
 
 //components
-import { IconBasic as Icon } from '../icon/icon';
+import { IconHost as Icon } from '../icon/iconHost';
 import { BackToTopStyled } from './backToTop.styled';
 import { IBackToTopStandAlone } from './types/backToTop';
 

src/components/calendar/calendarStandAlone.tsx

@@ -25,7 +25,13 @@ const CalendarStandAloneComponent = (
   const today = new Date();
 
   return (
-    <CalendarStyled ref={ref} data-testid={dataTestId} id={props.id} styles={props.styles}>
+    <CalendarStyled
+      ref={ref}
+      data-calendar
+      data-testid={dataTestId}
+      id={props.id}
+      styles={props.styles}
+    >
       <Selector
         configAccesibility={props.configAccesibility}
         configCalendar={props.configCalendar}

src/components/calendar/utils/handleKeysmoves.ts

@@ -75,7 +75,8 @@ export const handleKeyDownMove = ({
       }
       // to go to max date if next day below is disabled unless it is the max date
       if (
-        previous + firstEmptyAndDisabledDays + 1 >= maxDate.getDate() - 7 &&
+        previous + firstEmptyAndDisabledDays + 1 >=
+          maxDate.getDate() + firstEmptyAndDisabledDays - 7 &&
         previous !== daysAndEmptyDaysUntilMaxDate
       ) {
         return maxDate.getDate() + firstEmptyAndDisabledDays - 1;

src/components/carousel/carouselStandAlone.tsx

@@ -161,9 +161,9 @@ const CarouselStandAloneComponent = (
           <PageControl
             arrowsControlVariant={pageControlArrowsControlVariant}
             currentPosition={currentPage}
-            leftArrowControl={leftArrowControlPageControl}
+            leftControl={leftArrowControlPageControl}
             pages={numPages}
-            rightArrowControl={rightArrowControlPageControl}
+            rightControl={rightArrowControlPageControl}
             variant={pageControlVariant}
           />
         </PageControlContainerStyled>

src/components/dot/__tests__/dot.test.tsx

@@ -59,3 +59,16 @@ test('Should render Dot with plus simbol', async () => {
   expect(container).toHTMLValidate();
   expect(results).toHaveNoViolations();
 });
+
+test('Get label', async () => {
+  const { getByText, container } = renderProvider(
+    <Dot {...mockMaxNumberProps} label="myLabel" number={undefined} />
+  );
+
+  const dot = getByText('myLabel');
+
+  expect(dot).toBeInTheDocument();
+  const results = await axe(container);
+  expect(container).toHTMLValidate();
+  expect(results).toHaveNoViolations();
+});

src/components/dot/dot.tsx

@@ -28,7 +28,7 @@ const DotComponent = React.forwardRef(
       <DotStandAlone
         {...props}
         ref={ref}
-        formatedNumber={size !== 'SMALL' ? formattedNumber : undefined}
+        formatedNumber={formattedNumber}
         sizeStyles={sizeStyles}
         styles={styles}
       />

src/components/dot/dotStandAlone.tsx

@@ -4,7 +4,7 @@ import { DotStyled } from './dot.styled';
 import { IDotStandAlone } from './types/dot';
 
 const DotStandAloneComponent = (
-  { formatedNumber, sizeStyles, styles, dataTestId = 'dot', height, width }: IDotStandAlone,
+  { formatedNumber, label, sizeStyles, styles, dataTestId = 'dot', height, width }: IDotStandAlone,
   ref: React.ForwardedRef<HTMLSpanElement> | undefined | null
 ): JSX.Element => {
   return (
@@ -16,6 +16,7 @@ const DotStandAloneComponent = (
       sizeStyles={sizeStyles}
       styles={styles}
     >
+      {label}
       {formatedNumber}
     </DotStyled>
   );

src/components/dot/stories/dot.stories.tsx

@@ -30,6 +30,7 @@ export const Dot: Story = {
     variant: Object.values(variantsObject[themeSelected].DotVariantType || {})[0] as string,
     size: Object.values(variantsObject[themeSelected].DotSizeType || {})[0] as string,
     number: 2,
+    label: 'label',
     themeArgs: themesObject[themeSelected][STYLES_NAME.DOT],
   },
 };

src/components/dot/types/dot.ts

@@ -25,6 +25,7 @@ export interface IDotStandAlone {
   formatedNumber?: number | string;
   width?: string;
   height?: string;
+  label?: string;
   dataTestId?: string;
 }
 

src/components/drawer/drawerControlled.tsx

@@ -18,12 +18,20 @@ import { DrawerVariantStylesType } from './types/drawerTheme';
 
 /* Constants for useScrollEffect */
 const SCROLL_DISTANCE = 5;
-/* Constants for useZoomEffect (footer) */
+
+/* Constants for useZoomEffect */
+const MAX_ZOOM = 2.4;
 const FOOTER_EDIT_STYLES: CssProperty[] = [
   { cssPropertyName: 'position', cssPropertyValue: 'static' },
 ];
-
-const MAX_ZOOM = 2.4;
+const CONTAINER_STYLES_EDIT: CssProperty[] = [
+  { cssPropertyName: 'overflow-y', cssPropertyValue: 'auto' },
+];
+const CONTENT_STYLES_EDIT: CssProperty[] = [
+  { cssPropertyName: 'overflow-y', cssPropertyValue: 'visible' },
+  { cssPropertyName: 'max-height', cssPropertyValue: 'none' },
+  { cssPropertyName: 'min-height', cssPropertyValue: 'auto' },
+];
 
 const DrawerControlledComponent = React.forwardRef(
   <V extends string | unknown>(
@@ -47,7 +55,9 @@ const DrawerControlledComponent = React.forwardRef(
         | null
         | undefined;
 
+      handleDrawerZoomEffect(innerRef.current);
       handleTitleShadowEffect(drawerTitle);
+      handleContentZoomEffect(drawerContent);
       handleContentScrollEffect(drawerContent);
       handleFooterZoomEffect(drawerFooter);
       handleContentScrollDetection(drawerContent);
@@ -78,6 +88,8 @@ const DrawerControlledComponent = React.forwardRef(
         scrollCallback: handleScroll,
       });
 
+    const handleDrawerZoomEffect = useZoomEffect(CONTAINER_STYLES_EDIT, MAX_ZOOM);
+    const handleContentZoomEffect = useZoomEffect(CONTENT_STYLES_EDIT, MAX_ZOOM);
     const handleFooterZoomEffect = useZoomEffect(FOOTER_EDIT_STYLES, MAX_ZOOM);
 
     const { hasScroll: contentHasScroll, handleScrollDetection: handleContentScrollDetection } =

src/components/drawer/drawerStandAlone.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 
 import { Footer } from '@/components/footer/footer';

src/components/elementOrIcon/elementOrIcon.tsx

@@ -23,7 +23,7 @@ const ElementOrIconComponent = (
     );
   }
   // element as jsx element
-  return <>{element}</>;
+  return <>{element as React.ReactNode}</>;
 };
 
 /**

src/components/elementOrIllustration/elementOrIllustration.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { IllustrationBasic as Illustration } from '../illustration/illustration';
+import { IllustrationHost as Illustration } from '../illustration/illustrationHost';
 import { IElementOrillustration } from './types/elementOrIllustration';
 
 const ElementOrIllustrationComponent = (
@@ -18,7 +18,7 @@ const ElementOrIllustrationComponent = (
     return <Illustration {...rest} ref={ref} illustration={element} />;
   }
   // element as jsx element
-  return <>{element}</>;
+  return <>{element as React.ReactNode}</>;
 };
 
 /**

src/components/icon/iconHost.tsx

@@ -52,11 +52,4 @@ const IconHostComponent = (
   );
 };
 
-/**
- * @deprecated This component has been deprecated and will be removed in the next MAJOR release.
- *
- * IconHost is a component that serves as a host for icons.
- * @param {React.PropsWithChildren<IIconHost>} props
- * @returns {JSX.Element}
- */
 export const IconHost = React.forwardRef(IconHostComponent);

src/components/iconHighlighted/__tests__/iconHighlighted.test.tsx

@@ -62,4 +62,18 @@ describe('IconHighlighted Component', () => {
     expect(container).toHTMLValidate();
     expect(results).toHaveNoViolations();
   });
+
+  it('Should render IconHighlighted with custom content', async () => {
+    const { getByText, container } = renderProvider(
+      <IconHighlighted {...mockPropsDecorative} customContent={'customContent'} />
+    );
+
+    const customContent = getByText('customContent');
+
+    expect(customContent).toBeDefined();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
 });

src/components/iconHighlighted/iconHighlighted.styled.ts

@@ -1,21 +1,34 @@
 import styled from 'styled-components';
 
-import { getStyles } from '@/utils/getStyles/getStyles';
+import { getStyles, getTypographyStyles } from '@/utils/getStyles/getStyles';
 
 import { IconHighlightedSizePropsType } from './types/iconHighlightedTheme';
 
 type IconHighlightedStyledType = {
   styles?: IconHighlightedSizePropsType;
   backgroundColor?: string;
   disabled?: boolean;
+  selected?: boolean;
 };
+export const ParentContainerStyled = styled.span<IconHighlightedStyledType>`
+  ${props => getStyles(props.styles?.parentContainer)}
+`;
+
 export const IconHighlightedContainerStyled = styled.span<IconHighlightedStyledType>`
   display: flex;
   justify-content: center;
   align-items: center;
-  ${props =>
-    props.disabled
-      ? getStyles(props.styles?.container?.disabled)
-      : getStyles(props.styles?.container)}
+  ${props => getStyles(props.styles?.container)}
+  ${props => props.selected && getStyles(props.styles?.container?.selected)}
+  ${props => props.disabled && getStyles(props.styles?.container?.disabled)}
   background-color: ${({ backgroundColor }) => backgroundColor};
 `;
+
+export const CustomContentContainerStyled = styled.span<IconHighlightedStyledType>`
+  ${props => getStyles(props.styles?.customContentContainer)}
+  ${props => getTypographyStyles(props.styles?.customContentContainer)}
+  ${props => props.selected && getStyles(props.styles?.customContentContainer?.selected)}
+  ${props => props.selected && getTypographyStyles(props.styles?.customContentContainer?.selected)}
+  ${props => props.disabled && getStyles(props.styles?.customContentContainer?.disabled)}
+  ${props => props.disabled && getTypographyStyles(props.styles?.customContentContainer?.disabled)}
+`;