Merge pull request #27 from kubit-ui/feature/improvements-and-bugs-solved

Feature/improvements and bugs solved

Author: kubit-ui

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.10.1",
+  "version": "1.11.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",
@@ -111,12 +111,12 @@
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/mocha": "^10.0.7",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
     "@types/ungap__structured-clone": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.1.0",
-    "@typescript-eslint/parser": "^8.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
     "@ungap/structured-clone": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-jest": "^29.7.0",
@@ -134,7 +134,7 @@
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-react-refresh": "^0.4.10",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^4.1.3",
     "globals": "^15.9.0",
@@ -154,10 +154,10 @@
     "storybook": "^8.2.9",
     "ts-jest": "^29.2.4",
     "tsc-alias": "1.8.10",
-    "typedoc": "^0.26.5",
-    "typedoc-plugin-markdown": "^4.2.3",
+    "typedoc": "^0.26.6",
+    "typedoc-plugin-markdown": "^4.2.5",
     "typescript": "^5.5.4",
-    "vite": "^5.4.0",
+    "vite": "^5.4.2",
     "vite-tsconfig-paths": "^4.3.2",
     "yarn-deduplicate": "^6.0.2"
   },

src/components/button/button.styled.ts

@@ -67,14 +67,26 @@ export const ButtonStyled = styled.button<IButtonStyled>`
       )};
   }
 
-  &:hover:not(:disabled) {
-    ${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.HOVER, $styles, $sizeStyles)}
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      ${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.HOVER, $styles, $sizeStyles)}
+    }
   }
 
   &:active:not(:disabled) {
     ${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.PRESSED, $styles, $sizeStyles)}
   }
 
+  &:focus-visible {
+    ${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.DEFAULT, $styles, $sizeStyles)}
+  }
+
+  @media (hover: none) {
+    &:hover {
+      ${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.DEFAULT, $styles, $sizeStyles)}
+    }
+  }
+
   width: ${props => (props.$fullWidth ? '100%' : 'auto')};
 
   &::after {

src/components/calendar/calendarStandAlone.tsx

@@ -12,7 +12,7 @@ import { YearSelector } from './selector/yearSelector/yearSelector';
 import { ICalendarStandAlone } from './types';
 
 const CalendarStandAloneComponent = (
-  { maxDate = new Date(), ...props }: ICalendarStandAlone,
+  { maxDate = new Date(), customBackText = 'Back', ...props }: ICalendarStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): React.JSX.Element => {
   const [showMonthSelector, setShowMonthSelector] = React.useState(false);
@@ -31,6 +31,7 @@ const CalendarStandAloneComponent = (
         configAccesibility={props.configAccesibility}
         configCalendar={props.configCalendar}
         currentDate={props.currentDate}
+        customBackText={customBackText}
         maxDate={maxDate}
         minDate={props.minDate}
         setCurrentDate={props.setCurrentDate}

src/components/calendar/selector/__tests__/selector.test.tsx

@@ -38,9 +38,7 @@ describe('Selector component', () => {
   it('Selector with Range and selected Date Component', () => {
     renderProvider(<Selector {...mockProps} />);
 
-    const selector = screen.getByRole('button', {
-      name: mockProps.configCalendar.leftArrowIcon['aria-label'],
-    });
+    const selector = screen.getByLabelText(mockProps.configCalendar.leftArrowIcon['aria-label']);
 
     expect(selector).toBeInTheDocument();
   });

src/components/calendar/selector/selector.styled.ts

@@ -30,9 +30,10 @@ export const RightIconStyled = styled.span<RightIconType>`
   visibility: ${({ showCustomSelector }) => (showCustomSelector ? 'hidden' : 'visible')};
 `;
 
-export const IconAndBackTextStyled = styled.div<SelectorStyledType>`
+export const IconAndBackTextStyled = styled.button<SelectorStyledType>`
   display: flex;
   flex-direction: row;
   align-items: center;
+  cursor: pointer;
   ${({ styles }) => getStyles(styles?.selectorIconAndBackTextContainer)};
 `;

src/components/calendar/selector/selector.tsx

@@ -123,22 +123,21 @@ export const Selector = (props: ISelector): JSX.Element => {
 
   return (
     <SelectorStyled isDaySelector={isDaySelector} styles={props.styles}>
-      <IconAndBackTextStyled styles={props.styles}>
+      <IconAndBackTextStyled
+        aria-label={showCustomSelector ? '' : leftArrowIcon['aria-label']}
+        styles={props.styles}
+        type="button"
+        onClick={handleOnClickLeftIcon}
+      >
         <ElementOrIcon
           color={iconArrowDisabled(props.minDate) ? props.styles?.colorArrowDisabled : undefined}
           customIconStyles={props.styles?.leftArrow}
           disabled={iconArrowDisabled(props.minDate)}
           {...leftArrowIcon}
-          aria-label={
-            showCustomSelector
-              ? props.configAccesibility?.backToMonthAriaLabel
-              : leftArrowIcon['aria-label']
-          }
-          onClick={handleOnClickLeftIcon}
         />
         {showCustomSelector && (
           <Text component={TextComponentType.PARAGRAPH} customTypography={props.styles?.backText}>
-            {'Back'}
+            {props.customBackText}
           </Text>
         )}
       </IconAndBackTextStyled>

src/components/calendar/selector/types/selector.ts

@@ -4,6 +4,7 @@ import { CalendarContainerStylesType } from '../../types/calendarTheme';
 
 export interface ISelector {
   currentDate: Date;
+  customBackText?: string;
   setCurrentDate: (date: Date) => void;
   maxDate: Date;
   minDate: Date;

src/components/calendar/types/calendar.ts

@@ -34,6 +34,7 @@ export type IConfigAccesibility = {
 };
 export interface ICalendarStandAlone<V = undefined extends string ? unknown : string> {
   id?: string;
+  customBackText?: string;
   selectedDate: Date[];
   hasRange?: boolean;
   disabledDates?: Date[];

src/components/icon/icon.tsx

@@ -37,6 +37,7 @@ const IconBasicComponent = (
         disabled={disabled}
         id={props.id}
         tabIndex={tabIndex}
+        title={props.title || ''}
         type={ButtonType.BUTTON}
         onClick={onClick}
       >

src/components/icon/types/icon.ts

@@ -40,6 +40,7 @@ export interface IIconStandAlone extends IconAriaAttributes {
   twistAnimationTransformValue?: string | null | undefined;
   complex?: boolean;
   customIconStyles?: IconTypes;
+  title?: string;
 }
 
 export type IIcon = Omit<IIconStandAlone, 'onKeyDown'> & {