Merge pull request #23 from kubit-ui/feature/new-improvements-and-solve-bugs

Feature/new improvements and solve bugs

Author: Kubit

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -83,7 +83,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@eslint/compat": "^1.1.1",
@@ -153,7 +153,6 @@
     "typedoc": "^0.26.5",
     "typedoc-plugin-markdown": "^4.2.3",
     "typescript": "^5.5.4",
-    "vercel": "^35.2.1",
     "vite": "^5.3.5",
     "vite-tsconfig-paths": "^4.3.2",
     "yarn-deduplicate": "^6.0.2"

src/components/carousel/carouselStandAlone.tsx

@@ -111,7 +111,9 @@ const CarouselStandAloneComponent = (
         >
           <CarouselContentStyled
             ref={carouselContentRef}
-            aria-live={playing ? AriaLiveOptionType.OFF : AriaLiveOptionType.POLITE}
+            aria-live={
+              props['aria-live'] ?? (playing ? AriaLiveOptionType.OFF : AriaLiveOptionType.POLITE)
+            }
             centerMode={centerMode}
             data-testid={`${dataTestId}Content`}
             disableSwipe={disableSwipe}

src/components/carousel/stories/argtypes.ts

@@ -223,7 +223,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
       },
     },
     ['aria-labelledby']: {
-      description: 'Carousel aria label by',
+      description: 'Carousel aria labelledby',
       type: { name: 'string' },
       control: { type: 'text' },
       table: {
@@ -233,6 +233,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.ACCESIBILITY,
       },
     },
+    ['aria-live']: {
+      description: 'Aria live applied to carousel content',
+      control: { type: 'text' },
+      type: { name: 'string' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     displayArrowsOnCarousel: {
       description: 'Show the arrows on the carousel or on the Page Control',
       type: { name: 'boolean' },

src/components/carousel/types/carousel.ts

@@ -23,8 +23,9 @@ export type PageControlAutomateConfigType = Omit<
   mediaProgressBar: CarouselMediaProgressBarType;
 };
 
-export interface ICarouselStandAlone {
-  ['aria-labelledby']?: string;
+type CarouselAriaAttributes = Pick<React.AriaAttributes, 'aria-labelledby' | 'aria-live'>;
+
+export interface ICarouselStandAlone extends CarouselAriaAttributes {
   styles: CarouselPropsStylesType;
   carouselContainerRef: React.RefObject<HTMLDivElement>;
   carouselContentRef: React.RefObject<HTMLDivElement>;

src/components/inputDropdown/hooks/useInputDropdown.ts

@@ -53,6 +53,10 @@ type ParamsType = {
   value?: string;
   styles: InputDropdownStylesProps;
   disabled?: boolean;
+  /**
+   * @deprecated
+   * @description This prop is deprecated and will be removed in the next major version.
+   */
   clearTextInputPopoverIconClick?: boolean;
   error?: boolean;
   informationAssociated?: string;

src/components/inputDropdown/types/inputDropdown.ts

@@ -144,6 +144,10 @@ export interface IInputDropdownStandAlone
   inputPopoverRightIcon?: IElementOrIcon;
   inputPopoverValue?: string;
   inputPopoverVariant?: string;
+  /**
+   * @deprecated
+   * @description This prop is deprecated and will be removed in the next major version.
+   */
   clearTextInputPopoverIconClick?: boolean;
   // Functions
   onOpenOptions: (value: boolean) => void;

src/components/inputSearch/hooks/useInputSearch.ts

@@ -55,6 +55,10 @@ type ParamsType = {
   error?: boolean;
   hasResultTextWrittenByUser?: boolean;
   disableErrorInvalidOption?: boolean;
+  /**
+   * @deprecated
+   * @description This prop is deprecated and will be removed in the next major version.
+   */
   clearTextInputPopoverIconClick?: boolean;
   highlightedOption?: string;
   informationAssociated?: string;

src/components/inputSearch/types/inputSearch.ts

@@ -229,6 +229,10 @@ export interface IInputSearch<V = undefined extends string ? unknown : string>
   regex?: string | RegExp;
   internalErrorExecution?: INTERNAL_ERROR_EXECUTION;
   onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+  /**
+   * @deprecated
+   * @description This prop is deprecated and will be removed in the next major version.
+   */
   clearTextInputPopoverIconClick?: boolean;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onInputPopoverIconClick?: () => void;

src/components/oliveMenu/oliveMenuStandAlone.tsx

@@ -33,7 +33,7 @@ const OliveMenuStandAloneComponent = (
   return (
     <OliveMenuStyled
       ref={ref}
-      data-testId={`${props.dataTestId}Container`}
+      data-testid={`${props.dataTestId}Container`}
       styles={props.styles}
       onBlur={props.onBlur}
     >

src/components/pill/types/pill.ts

@@ -31,7 +31,7 @@ export interface IPillStandAlone extends PillAriaAttributes {
   dataTestId?: string;
   decorativeIcon?: IElementOrIcon;
   selectedIcon?: IElementOrIcon;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   disabled?: boolean;
   multiSelect?: boolean;
   selected?: boolean;