Merge pull request #28 from kubit-ui/feature/new-features-and-improve…

…ments

Feature/new features and improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.11.0",
+  "version": "1.12.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",
@@ -19,6 +19,7 @@
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
+  "type": "module",
   "engines": {
     "node": ">=20.x",
     "npm": ">=7.0.0"
@@ -87,12 +88,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.9.0",
+    "@eslint/js": "^9.9.1",
     "@storybook/addon-a11y": "^8.2.9",
     "@storybook/addon-controls": "^8.2.9",
     "@storybook/addon-coverage": "^1.0.4",
@@ -103,7 +104,7 @@
     "@storybook/blocks": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -115,16 +116,16 @@
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
     "@types/ungap__structured-clone": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.2.0",
-    "@typescript-eslint/parser": "^8.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
     "@ungap/structured-clone": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-jest": "^29.7.0",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.9.0",
+    "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",
-    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^28.8.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
@@ -134,7 +135,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.10",
+    "eslint-plugin-react-refresh": "^0.4.11",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^4.1.3",
     "globals": "^15.9.0",
@@ -152,13 +153,13 @@
     "react-transition-group": "^4.4.5",
     "sort-imports": "^1.1.0",
     "storybook": "^8.2.9",
-    "ts-jest": "^29.2.4",
+    "ts-jest": "^29.2.5",
     "tsc-alias": "1.8.10",
     "typedoc": "^0.26.6",
-    "typedoc-plugin-markdown": "^4.2.5",
+    "typedoc-plugin-markdown": "^4.2.6",
     "typescript": "^5.5.4",
     "vite": "^5.4.2",
-    "vite-tsconfig-paths": "^4.3.2",
+    "vite-tsconfig-paths": "^5.0.1",
     "yarn-deduplicate": "^6.0.2"
   },
   "dependencies": {

src/components/accordion/stories/accordion.stories.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { ICONS } from '@/assets';
 import { ReplaceContent } from '@/components/storybook/replaceContent/replaceContent';
 import { TextComponentType } from '@/components/text';
+import { ToggleUnControlled } from '@/components/toggle/toggleUnControlled';
 import { STYLES_NAME } from '@/constants';
 import { themesObject, variantsObject } from '@/designSystem/themesObject';
 
@@ -40,6 +41,20 @@ export const Accordion: Story = {
     subHeaderContent: 'Hi, i am a subheader content',
     triggerComponent: TextComponentType.H3,
     footerContent: <ReplaceContent />,
+    headerRightContent: (
+      <ToggleUnControlled
+        aria-label="toggle aria label"
+        inputValues={{
+          rightInputValue: 'on option',
+          centerInputValue: 'undeterminated option',
+          leftInputValue: 'off option',
+          leftIconAltText: 'on option',
+        }}
+        offIcon={{ icon: ICONS.ICON_CHEVRON_UP }}
+        variant="DEFAULT"
+        onIcon={{ icon: ICONS.ICON_CHEVRON_DOWN }}
+      />
+    ),
     themeArgs: themesObject[themeSelected][STYLES_NAME.ACCORDION],
   },
 };

src/components/actionBottomSheet/actionBottomSheet.styled.ts

@@ -25,6 +25,14 @@ export const ActionBottomSheetHeaderStyled = styled.div<IActionBottomSheetStyles
   ${props => getStyles(props.styles)}
 `;
 
+export const ActionBottomSheetControlStyled = styled.div<IActionBottomSheetStyles>`
+  ${props => getStyles(props.styles)}
+`;
+
+export const ActionBottomSheetActionStyled = styled.div<IActionBottomSheetStyles>`
+  ${props => getStyles(props.styles)}
+`;
+
 export const ActionBottomSheetIconSyled = styled.div<IActionBottomSheetStyles>`
   display: flex;
   ${props => getStyles(props.styles)}

src/components/actionBottomSheet/actionBottomSheetControlled.tsx

@@ -30,17 +30,17 @@ const ActionBottomSheetControlledStructureComponent = React.forwardRef(
     );
     const device = useMediaDevice();
 
-    const condition = React.useMemo(
+    const conditional = React.useMemo(
       () =>
         device !== DeviceBreakpointsType.DESKTOP && device !== DeviceBreakpointsType.LARGE_DESKTOP,
       [device]
     );
 
-    const { scrollableRef, shadowRef } = useScrollEffect(
-      condition,
-      styles.header?.[device]?.box_shadow,
-      SCROLL_DISTANCE
-    );
+    const { scrollableRef, shadowRef } = useScrollEffect({
+      conditional,
+      shadowStyles: styles.controlContainer?.[device]?.box_shadow,
+      shadowVisible: SCROLL_DISTANCE,
+    });
 
     return (
       <ActionBottomSheetStandAlone

src/components/actionBottomSheet/actionBottomSheetStandAlone.tsx

@@ -4,8 +4,11 @@ import { ElementOrIcon } from '@/components/elementOrIcon';
 import { Text } from '@/components/text/text';
 import { TextComponentType } from '@/components/text/types/component';
 
+import { Link } from '../link';
 import {
+  ActionBottomSheetActionStyled,
   ActionBottomSheetContentStyled,
+  ActionBottomSheetControlStyled,
   ActionBottomSheetHeaderContentStyled,
   ActionBottomSheetHeaderStyled,
   ActionBottomSheetIconSyled,
@@ -18,40 +21,60 @@ const ActionBottomSheetStandAloneComponent = (
   { hasHeader = true, scrollableRef, shadowRef, ...props }: IActionBottomSheetStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
+  // Parent container Ref
+  const actionBottomRef = React.useRef<HTMLDivElement | null>(null);
+
+  // Expose the ref to the parent component
+  React.useImperativeHandle(ref, () => {
+    return actionBottomRef.current as HTMLDivElement;
+  }, []);
+
+  // Set the parent componente ref for the scrollableRef function
+  React.useEffect(() => {
+    scrollableRef(actionBottomRef.current);
+  }, []);
+
   return (
     <ActionBottomSheetStyled
-      ref={ref}
+      ref={actionBottomRef}
       $height={props.height}
       data-testid={`${props.dataTestId}Container`}
       styles={props.styles.container}
     >
       {hasHeader && (
-        <ActionBottomSheetHeaderStyled ref={shadowRef} styles={props.styles.header}>
-          <ActionBottomSheetIconSyled styles={props.styles.closeIconContainer}>
-            <ElementOrIcon
-              customIconStyles={props.styles.closeIcon}
-              dataTestId={`${props.dataTestId}Icon`}
-              {...props.closeIcon}
-            />
-          </ActionBottomSheetIconSyled>
-          <ActionBottomSheetTitleSyled styles={props.styles}>
-            <Text
-              component={TextComponentType.H5}
-              customTypography={props.styles.title}
-              dataTestId={`${props.dataTestId}Title`}
-              {...props.title}
-            >
-              {props.title?.content}
-            </Text>
-          </ActionBottomSheetTitleSyled>
-          {props.headerContent && (
-            <ActionBottomSheetHeaderContentStyled styles={props.styles}>
-              {props.headerContent}
-            </ActionBottomSheetHeaderContentStyled>
-          )}
-        </ActionBottomSheetHeaderStyled>
+        <>
+          <ActionBottomSheetControlStyled ref={shadowRef} styles={props.styles.controlContainer}>
+            <ActionBottomSheetActionStyled styles={props.styles.actionLinkContainer}>
+              {props.actionLink && <Link {...props.actionLink} />}
+            </ActionBottomSheetActionStyled>
+            <ActionBottomSheetIconSyled styles={props.styles.closeIconContainer}>
+              <ElementOrIcon
+                customIconStyles={props.styles.closeIcon}
+                dataTestId={`${props.dataTestId}Icon`}
+                {...props.closeIcon}
+              />
+            </ActionBottomSheetIconSyled>
+          </ActionBottomSheetControlStyled>
+          <ActionBottomSheetHeaderStyled styles={props.styles.header}>
+            <ActionBottomSheetTitleSyled styles={props.styles}>
+              <Text
+                component={TextComponentType.H5}
+                customTypography={props.styles.title}
+                dataTestId={`${props.dataTestId}Title`}
+                {...props.title}
+              >
+                {props.title?.content}
+              </Text>
+            </ActionBottomSheetTitleSyled>
+            {props.headerContent && (
+              <ActionBottomSheetHeaderContentStyled styles={props.styles}>
+                {props.headerContent}
+              </ActionBottomSheetHeaderContentStyled>
+            )}
+          </ActionBottomSheetHeaderStyled>
+        </>
       )}
-      <ActionBottomSheetContentStyled ref={scrollableRef} styles={props.styles.content}>
+      <ActionBottomSheetContentStyled styles={props.styles.content}>
         {props.children}
       </ActionBottomSheetContentStyled>
     </ActionBottomSheetStyled>

src/components/actionBottomSheet/stories/actionBottomSheet.stories.tsx

@@ -41,7 +41,16 @@ export const ActionBottomSheet: Story = {
       ['aria-label']: 'ariaLabelButton',
     },
     headerContent: <ReplaceContent />,
-    children: <ReplaceContent />,
+    children: (
+      <>
+        <ReplaceContent />
+        <ReplaceContent />
+        <ReplaceContent />
+        <ReplaceContent />
+        <ReplaceContent />
+        <ReplaceContent />
+      </>
+    ),
     open: true,
     themeArgs: themesObject[themeSelected][STYLES_NAME.ACTION_BOTTOM_SHEET],
   },

src/components/actionBottomSheet/types/actionBottomSheet.ts

@@ -1,4 +1,5 @@
 import { IElementOrIcon } from '@/components/elementOrIcon';
+import { ILink } from '@/components/link';
 import { IPopoverControlled } from '@/components/popover';
 import { IText } from '@/components/text';
 import { CustomTokenTypes, DeviceBreakpointsType } from '@/types';
@@ -21,6 +22,7 @@ export interface IActionBottomSheetStandAlone {
   children: React.ReactNode;
   styles: ActionBottomSheetVariantStylesType;
   closeIcon?: IElementOrIcon;
+  actionLink?: ILink;
   title?: ActionBottomSheetTextType;
   hasHeader?: boolean;
   dataTestId?: string;

src/components/actionBottomSheet/types/actionBottomSheetTheme.ts

@@ -9,6 +9,8 @@ import { CommonStyleType, IconTypes, TypographyTypes } from '@/types';
 export type ActionBottomSheetVariantStylesType = {
   container?: CommonStyleType;
   header?: CommonStyleType;
+  controlContainer?: CommonStyleType;
+  actionLinkContainer?: CommonStyleType;
   closeIconContainer?: CommonStyleType;
   closeIcon?: IconTypes;
   titleContainer?: CommonStyleType;

src/components/calendar/calendarStandAlone.tsx

@@ -50,7 +50,14 @@ const CalendarStandAloneComponent = (
       />
       <CalendarSelectorStyled>
         {!showMonthSelector && !showYearSelector && showDaySelector && (
-          <TableStyled role={ROLES.GRID}>
+          <TableStyled
+            aria-label={props.currentDate.toLocaleDateString(props.locale, {
+              timeZone: 'UTC',
+              month: 'long',
+              year: 'numeric',
+            })}
+            role={ROLES.GRID}
+          >
             <Header
               formatWeekDayOption={props.formatWeekDayOption}
               isSundayFirst={props.sundayFirst}

src/components/calendar/list/list.tsx

@@ -9,14 +9,18 @@ import { NEUTRAL_DATE } from '@/types';
 import { WEEK_DAYS } from '../constants/constants';
 import {
   getAllDaysInMonth,
-  getAvailableDaysAfterCurrentDate,
-  getAvailableDaysBeforeCurrentDate,
+  getDaysAndEmptyDaysUntilMaxDate,
   getFirstDayOfMonth,
+  getFirstEmptyAndDisabledDays,
   getStateDay,
   groupDaysByWeeks,
-  handleKeyDownAndRightMove,
+  handleKeyDownMove,
+  handleKeyLeftMove,
+  handleKeyPageDownMove,
+  handleKeyPageUpMove,
+  handleKeyRightMove,
   handleKeyTabMove,
-  handleKeyUpAndLeftMove,
+  handleKeyUpMove,
 } from '../utils/';
 // styles
 import {
@@ -51,18 +55,16 @@ export const List = ({
   const [ghostDateSelected, setGhostDateSelected] = React.useState<Date | 0>(0);
 
   const handleKeyMoveConfig = {
-    emptyDaysList,
     dayList,
-    isAfter: dateHelpers.isAfter,
     maxDate: props.maxDate,
     currentDate: props.currentDate,
     minDate: props.minDate,
-    availableDaysBeforeCurrentDate: getAvailableDaysBeforeCurrentDate(
+    firstEmptyAndDisabledDays: getFirstEmptyAndDisabledDays(
       emptyDaysList,
       props.minDate,
       props.currentDate
     ),
-    availableDaysAfterCurrentDate: getAvailableDaysAfterCurrentDate(
+    daysAndEmptyDaysUntilMaxDate: getDaysAndEmptyDaysUntilMaxDate(
       emptyDaysList,
       props.maxDate,
       props.currentDate
@@ -73,11 +75,13 @@ export const List = ({
     () => ({
       calendarBlankDaysSize: emptyDaysList.length,
       size: dayList.length,
-      keyDownMove: handleKeyDownAndRightMove(handleKeyMoveConfig),
-      keyUpMove: handleKeyUpAndLeftMove(handleKeyMoveConfig),
-      keyRightMove: handleKeyDownAndRightMove(handleKeyMoveConfig),
-      keyLeftMove: handleKeyUpAndLeftMove(handleKeyMoveConfig),
+      keyDownMove: handleKeyDownMove(handleKeyMoveConfig),
+      keyUpMove: handleKeyUpMove(handleKeyMoveConfig),
+      keyRightMove: handleKeyRightMove(handleKeyMoveConfig),
+      keyLeftMove: handleKeyLeftMove(handleKeyMoveConfig),
       keyTabMove: handleKeyTabMove,
+      keyPageDownMove: handleKeyPageDownMove(handleKeyMoveConfig),
+      keyPageUpMove: handleKeyPageUpMove(handleKeyMoveConfig),
       currentFocusSelected:
         (selectedDate[0] ? selectedDate[0].getDate() : new Date().getDate()) +
         emptyDaysList.length -