Merge pull request #18 from kubit-ui/feature/new-improvements-and-table-component-v2

Feature/new improvements and table component v2

Author: kubit-ui

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.6.2",
+  "version": "1.7.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,8 +111,8 @@
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
     "@types/ungap__structured-clone": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
     "@ungap/structured-clone": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-jest": "^29.7.0",
@@ -127,13 +127,13 @@
     "eslint-plugin-n": "^17.9.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-promise": "^6.4.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^4.0.0",
-    "globals": "^15.6.0",
+    "globals": "^15.8.0",
     "gts": "^5.3.1",
     "html-validate": "^8.20.1",
     "jest": "^29.7.0",
@@ -151,9 +151,9 @@
     "ts-jest": "^29.1.5",
     "tsc-alias": "1.8.10",
     "typedoc": "^0.26.3",
-    "typedoc-plugin-markdown": "^4.1.0",
-    "typescript": "^5.5.2",
-    "vite": "^5.3.2",
+    "typedoc-plugin-markdown": "^4.1.2",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
     "vite-tsconfig-paths": "^4.3.2",
     "yarn-deduplicate": "^6.0.2"
   },

src/components/actionBottomSheet/index.ts

@@ -1,3 +1,6 @@
 export { ActionBottomSheetUnControlled as ActionBottomSheet } from './actionBottomSheetUnControlled';
-export { ActionBottomSheetControlled } from './actionBottomSheetControlled';
+export {
+  ActionBottomSheetControlled,
+  ActionBottomSheetControlledStructure,
+} from './actionBottomSheetControlled';
 export * from './types';

src/components/backToTop/backToTopControlled.tsx

@@ -25,13 +25,9 @@ const BackToTopControlledComponent = React.forwardRef(
 
     const innerRef = React.useRef<HTMLButtonElement | null>(null);
 
-    React.useImperativeHandle(
-      ref,
-      () => {
-        return innerRef?.current as HTMLButtonElement;
-      },
-      []
-    );
+    React.useImperativeHandle(ref, () => {
+      return innerRef?.current as HTMLButtonElement;
+    }, []);
 
     const { state, setRef } = useManageState({
       states: Object.values(BackToTopStateType) as States,

src/components/button/buttonStandAlone.tsx

@@ -15,7 +15,7 @@ export const ButtonStandAloneStructure = (props: IButtonStandAlone): JSX.Element
 
   return (
     <>
-      {props.loader && (
+      {props.loader && props.loading && (
         <>
           {typeof props.loader === 'object' && 'variant' in props.loader ? (
             <ButtonLoaderStyled>

src/components/button/types/button.ts

@@ -18,6 +18,7 @@ type ButtonAriaAttributes = Pick<
   | 'aria-expanded'
   | 'aria-pressed'
   | 'aria-disabled'
+  | 'aria-hidden'
 >;
 
 /**

src/components/calendar/selector/selector.tsx

@@ -41,7 +41,12 @@ export const Selector = (props: ISelector): JSX.Element => {
     );
   };
 
-  const renderButtonSelector = (type: string, showSelector: boolean, ariaLabel?: string) => {
+  const renderButtonSelector = (
+    type: string,
+    showSelector: boolean,
+    ariaLabel?: string,
+    role?: string
+  ) => {
     const buttonState = showSelector ? ButtonStateType.DISABLED : ButtonStateType.DEFAULT;
 
     const selectorToShow = () => {
@@ -73,6 +78,7 @@ export const Selector = (props: ISelector): JSX.Element => {
       <Button
         aria-label={ariaLabel}
         disabled={showSelector}
+        role={role}
         size={sizeSelectorButton || props.styles?.selectorOptions?.sizeSelectorButton}
         variant={variantSelectorButton || props.styles?.selectorOptions?.variantSelectorButton}
         onClick={handleClickButtonSelector}
@@ -101,29 +107,21 @@ export const Selector = (props: ISelector): JSX.Element => {
     onChangeCurrentDate(dateHelpers.getAddMonths(auxCurrentDate, 1));
   };
 
-  const handleOnClickBack: React.MouseEventHandler<HTMLDivElement> = event => {
-    onClickLeftIcon();
-    props.onLeftIconClick?.(event);
-  };
-
   const handleOnClickLeftIcon: React.MouseEventHandler<HTMLButtonElement> = event => {
     onClickLeftIcon();
     leftArrowIcon.onClick?.(event);
-  };
-
-  const handleOnClickRight: React.MouseEventHandler<HTMLDivElement> = event => {
-    onClickRightIcon();
-    props.onRightIconClick?.(event);
+    props.onLeftIconClick?.(event);
   };
 
   const handleOnClickRightIcon: React.MouseEventHandler<HTMLButtonElement> = event => {
     onClickRightIcon();
     rightArrowIcon.onClick?.(event);
+    props.onRightIconClick?.(event);
   };
 
   return (
     <SelectorStyled isDaySelector={isDaySelector} styles={props.styles}>
-      <IconAndBackTextStyled styles={props.styles} onClick={handleOnClickBack}>
+      <IconAndBackTextStyled styles={props.styles}>
         <ElementOrIcon
           color={iconArrowDisabled(props.minDate) ? props.styles?.colorArrowDisabled : undefined}
           customIconStyles={props.styles?.leftArrow}
@@ -147,20 +145,23 @@ export const Selector = (props: ISelector): JSX.Element => {
           renderButtonSelector(
             CalendarElementType.DAY,
             props.showDaySelector,
-            props.configAccesibility?.daySelectorAriaLabel
+            props.configAccesibility?.daySelectorAriaLabel,
+            props.configAccesibility?.daySelectorRole
           )}
         {renderButtonSelector(
           CalendarElementType.MONTH,
           props.showMonthSelector,
-          props.configAccesibility?.monthSelectorAriaLabel
+          props.configAccesibility?.monthSelectorAriaLabel,
+          props.configAccesibility?.monthSelectorRole
         )}
         {renderButtonSelector(
           CalendarElementType.YEAR,
           props.showYearSelector,
-          props.configAccesibility?.yearSelectorAriaLabel
+          props.configAccesibility?.yearSelectorAriaLabel,
+          props.configAccesibility?.yearSelectorRole
         )}
       </OptionsStyled>
-      <RightIconStyled showCustomSelector={showCustomSelector} onClick={handleOnClickRight}>
+      <RightIconStyled showCustomSelector={showCustomSelector}>
         <ElementOrIcon
           color={iconArrowDisabled(props.maxDate) ? props.styles?.colorArrowDisabled : undefined}
           customIconStyles={props.styles?.rightArrow}

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

@@ -39,6 +39,9 @@ export interface ISelector {
     sizeSelectorButton?: string;
   };
   configAccesibility?: {
+    monthSelectorRole?: string;
+    yearSelectorRole?: string;
+    daySelectorRole?: string;
     monthSelectorAriaLabel?: string;
     yearSelectorAriaLabel?: string;
     daySelectorAriaLabel?: string;

src/components/calendar/types/calendar.ts

@@ -28,6 +28,9 @@ export type IConfigAccesibility = {
   monthSelectorAriaLabel?: string;
   yearSelectorAriaLabel?: string;
   backToMonthAriaLabel?: string;
+  monthSelectorRole?: string;
+  yearSelectorRole?: string;
+  daySelectorRole?: string;
 };
 export interface ICalendarStandAlone<V = undefined extends string ? unknown : string> {
   id?: string;

src/components/checkbox/checkbox.styled.tsx

@@ -12,31 +12,34 @@ type SpanChecked = {
   $isChecked?: boolean;
 };
 
-export const CheckboxContainerStyled = styled.div`
+export const CheckboxContainerStyled = styled.div<ThemeStylesType>`
   width: fit-content;
+  ${props => getStyles(props.styles?.container)}
 `;
 
-export const CheckboxIconLabelWrapperStyled = styled.div`
+export const CheckboxIconLabelWrapperStyled = styled.div<ThemeStylesType>`
   display: flex;
   flex-direction: row;
   align-items: flex-start;
+  ${props => getStyles(props.styles?.iconLabelWrapper)}
 `;
 
 export const CheckboxStyled = styled.input<ThemeStylesType>`
-  ${props => getStyles(props.styles?.checkbox)}
   appearance: none;
   cursor: pointer;
   display: grid;
   place-content: center;
   &:disabled {
     cursor: default;
   }
+  ${props => getStyles(props.styles?.checkbox)}
 `;
 
-export const CheckboxFrameStyled = styled.div`
+export const CheckboxFrameStyled = styled.div<ThemeStylesType>`
   position: relative;
   height: fit-content;
   width: fit-content;
+  ${props => getStyles(props.styles?.frameContainer)}
 `;
 
 export const CheckedIcon = styled.span<ThemeStylesType & SpanChecked>`

src/components/checkbox/checkboxStandAlone.tsx

@@ -122,9 +122,9 @@ const CheckboxStandAloneComponent = (
   };
 
   return (
-    <CheckboxContainerStyled>
-      <CheckboxIconLabelWrapperStyled>
-        <CheckboxFrameStyled>
+    <CheckboxContainerStyled styles={styles}>
+      <CheckboxIconLabelWrapperStyled styles={styles}>
+        <CheckboxFrameStyled styles={styles}>
           <CheckboxStyled
             ref={ref}
             aria-describedby={buildAriaDescribedBy({