@semcore/carousel 17.2.2 → 17.2.3-prerelease.0

package/lib/types/Carousel.types.d.ts

@@ -1,110 +1,162 @@
 import type { BoxProps } from '@semcore/base-components';
-import type { PropGetterFn, Intergalactic, IRootComponentProps } from '@semcore/core';
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
 import type { LocalizedMessages } from './translations/__intergalactic-dynamic-locales';
-export type CarouselProps = BoxProps & {
-    /** Index active item */
-    index?: number;
-    /**
-     * Index of the active item selected by default
-     * @default 0
-     */
-    defaultIndex?: number;
-    /**  Called when the selection is changed */
-    onIndexChange?: (index: number) => void;
-    /** Animation duration
-     * @default 300 */
-    duration?: number;
-    /** Disables infinite items change in the carousel
-     * @default false */
-    bounded?: boolean;
-    /** Internal */
-    step?: number;
-    /** Specifies the locale for i18n support */
-    locale?: string;
-    /** Enable zoom feature for carousel items */
-    zoom?: boolean;
-    /** Width for items in zooming modal */
-    zoomWidth?: number;
-    /** Type of indicators */
-    indicators?: 'default' | 'hide' | 'preview';
-};
-export type CarouselDefaultProps = {
-    defaultIndex: 0;
-    duration: 350;
-    step: 100;
-    bounded: false;
-    i18n: LocalizedMessages;
-    locale: 'en';
-    indicators: 'default';
-};
-export type CarouselContext = {
-    getContainerProps: PropGetterFn;
-    getItemProps: PropGetterFn;
-    getPrevProps: PropGetterFn;
-    getNextProps: PropGetterFn;
-    getIndicatorsProps: PropGetterFn;
-};
-export type CarouselItem = {
-    node: HTMLElement;
-};
-export type CarouselItemProps = BoxProps & {
-    /** Flag for css cursor
-     * @private
-     */
-    zoomIn?: boolean;
-    /** Flag for css cursor
-     * @private
-     */
-    zoomOut?: boolean;
-    /** Function to add item to list in Carousel
-     * @private
-     */
-    toggleItem?: (item: CarouselItem, toRemove?: boolean) => void;
-    /** Index of item in carousel */
-    index?: number;
-    uid?: string;
-    /** Flag - is current item shown now */
-    current?: boolean;
-    /** Handler for show item in modal window
-     * @private
-     */
-    onToggleZoomModal?: () => void;
-    /** Value for transform item
-     * @private
-     */
-    transform?: number;
-    /**
-     * Flag data zoomed
-     * @private
-     */
-    isOpenZoom?: boolean;
-};
-export type CarouselState = {
-    isOpenZoom: boolean;
-    selectedIndex: number;
-    items: CarouselItem[];
-};
-export type CarouselButtonProps = IRootComponentProps & BoxProps & {
-    label?: string;
-    inverted?: boolean;
-    tabIndex?: number;
-};
-export type CarouselIndicatorsProps = IRootComponentProps & BoxProps & {
-    items?: CarouselItem[];
-    inverted?: boolean;
-};
-export type CarouselIndicatorProps = IRootComponentProps & Omit<BoxProps, 'position'> & {
-    active?: boolean;
-    onClick?: () => void;
-    inverted?: boolean;
-} & CarouselItem;
-declare const CarouselType: Intergalactic.Component<'div', CarouselProps, CarouselContext & CarouselState> & {
-    Container: Intergalactic.Component<'div', BoxProps>;
-    ContentBox: Intergalactic.Component<'div', BoxProps>;
-    Indicators: Intergalactic.Component<'div', CarouselIndicatorsProps, CarouselState>;
-    Indicator: Intergalactic.Component<'div', CarouselIndicatorProps>;
-    Item: Intergalactic.Component<'div', CarouselItemProps>;
-    Prev: Intergalactic.Component<'div', CarouselButtonProps>;
-    Next: Intergalactic.Component<'div', CarouselButtonProps>;
-};
-export default CarouselType;
+declare namespace NSCarousel {
+    type Props = BoxProps & {
+        /** Index active item */
+        index?: number;
+        /**
+         * Index of the active item selected by default
+         * @default 0
+         */
+        defaultIndex?: number;
+        /**  Called when the selection is changed */
+        onIndexChange?: (index: number) => void;
+        /** Animation duration
+         * @default 300 */
+        duration?: number;
+        /** Disables infinite items change in the carousel
+         * @default false */
+        bounded?: boolean;
+        /** Internal */
+        step?: number;
+        /** Specifies the locale for i18n support */
+        locale?: string;
+        /** Enable zoom feature for carousel items */
+        zoom?: boolean;
+        /** Width for items in zooming modal */
+        zoomWidth?: number;
+        /** Type of indicators */
+        indicators?: 'default' | 'hide' | 'preview';
+    };
+    type DefaultProps = {
+        defaultIndex: 0;
+        duration: 350;
+        step: 100;
+        bounded: false;
+        i18n: LocalizedMessages;
+        locale: 'en';
+        indicators: 'default';
+    };
+    type State = {
+        isOpenZoom: boolean;
+        selectedIndex: number;
+        items: NSCarousel.Item[];
+    };
+    type Ctx = {
+        getContainerProps: PropGetterFn;
+        getItemProps: PropGetterFn;
+        getPrevProps: PropGetterFn;
+        getNextProps: PropGetterFn;
+        getIndicatorsProps: PropGetterFn;
+    };
+    type Handlers = {
+        index: [
+            null,
+            (index: NSCarousel.Props['index']) => void
+        ];
+    };
+    type Item = {
+        node: HTMLElement;
+    };
+    namespace Container {
+        type Component = Intergalactic.Component<'div', BoxProps>;
+    }
+    namespace ContentBox {
+        type Component = Intergalactic.Component<'div', BoxProps>;
+    }
+    namespace Indicators {
+        type Props = BoxProps & {
+            items?: NSCarousel.Item[];
+            inverted?: boolean;
+        };
+        type Component = Intergalactic.Component<'div', Props, State>;
+    }
+    namespace Indicator {
+        type Props = Omit<BoxProps, 'position'> & {
+            active?: boolean;
+            onClick?: () => void;
+            inverted?: boolean;
+        };
+        type Component = Intergalactic.Component<'div', Props>;
+    }
+    namespace Item {
+        type Props = BoxProps & {
+            /** Flag for css cursor
+             * @private
+             */
+            zoomIn?: boolean;
+            /** Flag for css cursor
+             * @private
+             */
+            zoomOut?: boolean;
+            /** Function to add item to list in Carousel
+             * @private
+             */
+            toggleItem?: (item: NSCarousel.Item, toRemove?: boolean) => void;
+            /** Index of item in carousel */
+            index?: number;
+            uid?: string;
+            /** Flag - is current item shown now */
+            current?: boolean;
+            /** Handler for show item in modal window
+             * @private
+             */
+            onToggleZoomModal?: () => void;
+            /** Value for transform item
+             * @private
+             */
+            transform?: number;
+            /**
+             * Flag data zoomed
+             * @private
+             */
+            isOpenZoom?: boolean;
+        };
+        type Component = Intergalactic.Component<'div', Props>;
+    }
+    namespace Prev {
+        type Props = BoxProps & {
+            label?: string;
+            inverted?: boolean;
+            tabIndex?: number;
+        };
+        type Component = Intergalactic.Component<'div', Props>;
+    }
+    namespace Next {
+        type Props = BoxProps & {
+            label?: string;
+            inverted?: boolean;
+            tabIndex?: number;
+        };
+        type Component = Intergalactic.Component<'div', Props>;
+    }
+    type Component = Intergalactic.Component<'div', Props, Ctx & State> & {
+        Container: Container.Component;
+        ContentBox: ContentBox.Component;
+        Indicators: Indicators.Component;
+        Indicator: Indicator.Component;
+        Item: Item.Component;
+        Prev: Prev.Component;
+        Next: Next.Component;
+    };
+}
+/** @deprecated It will be removed in v18. */
+export type CarouselProps = NSCarousel.Props;
+/** @deprecated It will be removed in v18. */
+export type CarouselDefaultProps = NSCarousel.DefaultProps;
+/** @deprecated It will be removed in v18. */
+export type CarouselContext = NSCarousel.Ctx;
+/** @deprecated It will be removed in v18. */
+export type CarouselItem = NSCarousel.Item;
+/** @deprecated It will be removed in v18. */
+export type CarouselItemProps = NSCarousel.Item.Props;
+/** @deprecated It will be removed in v18. */
+export type CarouselState = NSCarousel.State;
+/** @deprecated It will be removed in v18. */
+export type CarouselButtonProps = NSCarousel.Prev.Props;
+/** @deprecated It will be removed in v18. */
+export type CarouselIndicatorsProps = NSCarousel.Indicators.Props;
+/** @deprecated It will be removed in v18. */
+export type CarouselIndicatorProps = NSCarousel.Indicator.Props;
+export type { NSCarousel };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/carousel",
   "description": "Semrush Carousel Component",
-  "version": "17.2.2",
+  "version": "17.2.3-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -27,10 +27,10 @@
     "directory": "semcore/carousel"
   },
   "devDependencies": {
-    "@semcore/base-components": "17.2.1",
     "@semcore/core": "17.2.1",
-    "@semcore/icon": "17.2.0",
-    "@semcore/testing-utils": "1.0.0"
+    "@semcore/base-components": "17.2.1",
+    "@semcore/testing-utils": "1.0.0",
+    "@semcore/icon": "17.2.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js,ts && pnpm vite build"

package/src/Carousel.tsx

@@ -1,6 +1,7 @@
 import { createBreakpoints, Box, Flex } from '@semcore/base-components';
 import type { BoxProps } from '@semcore/base-components';
 import Button from '@semcore/button';
+import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
@@ -13,18 +14,7 @@ import ChevronRight from '@semcore/icon/ChevronRight/l';
 import Modal from '@semcore/modal';
 import React from 'react';
 
-import type CarouselType from './Carousel.types';
-import type {
-  CarouselProps,
-  CarouselState,
-  CarouselContext,
-  CarouselItem,
-  CarouselItemProps,
-  CarouselButtonProps,
-  CarouselIndicatorsProps,
-  CarouselIndicatorProps,
-  CarouselDefaultProps,
-} from './Carousel.types';
+import type { NSCarousel } from './Carousel.types';
 import style from './style/carousel.shadow.css';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 
@@ -39,12 +29,12 @@ const BreakPoints = createBreakpoints(media);
 const isSmallScreen = (index?: number) => index === 1;
 
 class CarouselRoot extends Component<
-  CarouselProps,
+  Intergalactic.InternalTypings.InferComponentProps<NSCarousel.Component>,
   typeof enhance,
-  { index: any },
-  CarouselContext & WithI18nEnhanceProps,
-  CarouselState,
-  CarouselDefaultProps
+  NSCarousel.Handlers,
+  WithI18nEnhanceProps,
+  NSCarousel.State,
+  NSCarousel.DefaultProps
 > {
   static displayName = 'Carousel';
   static defaultProps = {
@@ -66,7 +56,7 @@ class CarouselRoot extends Component<
   refModalContainer = React.createRef<HTMLElement>();
   _touchStartCoord = -1;
 
-  constructor(props: CarouselProps) {
+  constructor(props: NSCarousel.Props) {
     super(props);
     this.isControlled = props.index !== undefined;
     this.state = {
@@ -76,11 +66,11 @@ class CarouselRoot extends Component<
     };
   }
 
-  uncontrolledProps() {
+  uncontrolledProps(): NSCarousel.Handlers {
     return {
       index: [
         null,
-        (_index: number) => {
+        () => {
           this.refCarousel.current?.blur();
           setTimeout(() => {
             this.refCarousel.current?.focus();
@@ -119,7 +109,7 @@ class CarouselRoot extends Component<
     );
   }
 
-  componentDidUpdate(prevProps: CarouselProps) {
+  componentDidUpdate(prevProps: typeof this.asProps) {
     const { index } = this.asProps;
     if (prevProps.index !== index && this.isControlled && index !== undefined) {
       this.setState({ selectedIndex: index }, () => this.transformContainer());
@@ -169,7 +159,7 @@ class CarouselRoot extends Component<
     }
   };
 
-  toggleItem = (item: CarouselItem, removeItem = false) => {
+  toggleItem = (item: NSCarousel.Item, removeItem = false) => {
     this.setState((prevState) => {
       const newItems = removeItem
         ? prevState.items.filter((element) => element.node !== item.node)
@@ -331,7 +321,7 @@ class CarouselRoot extends Component<
     };
   }
 
-  getItemProps(_props: CarouselItemProps, index: number) {
+  getItemProps(_props: NSCarousel.Item.Props, index: number) {
     const { zoom } = this.asProps;
     const isCurrent = this.isSelected(index);
 
@@ -609,7 +599,9 @@ class CarouselRoot extends Component<
   }
 }
 
-function Container(props: BoxProps & { duration?: number }) {
+function Container(
+  props: Intergalactic.InternalTypings.InferChildComponentProps<NSCarousel.Container.Component, typeof CarouselRoot, 'Container'>,
+) {
   const SContainer = Root;
   const { styles, duration } = props;
 
@@ -618,14 +610,16 @@ function Container(props: BoxProps & { duration?: number }) {
   );
 }
 
-function ContentBox(props: BoxProps) {
+function ContentBox(props: Intergalactic.InternalTypings.InferComponentProps<NSCarousel.ContentBox.Component>) {
   const SContentBox = Root;
   const { styles } = props;
 
   return sstyled(styles)(<SContentBox render={Box} />);
 }
 
-class Item extends Component<CarouselItemProps> {
+class Item extends Component<
+  Intergalactic.InternalTypings.InferChildComponentProps<NSCarousel.Item.Component, typeof CarouselRoot, 'Item'>
+> {
   refItem = React.createRef<HTMLElement>();
 
   componentDidMount() {
@@ -650,7 +644,7 @@ class Item extends Component<CarouselItemProps> {
     }
   }
 
-  componentDidUpdate(prevProps: CarouselItemProps) {
+  componentDidUpdate(prevProps: typeof this.asProps) {
     const transform = this.props.transform;
     const refItem = this.refItem.current;
 
@@ -679,7 +673,9 @@ class Item extends Component<CarouselItemProps> {
   }
 }
 
-function Prev(props: CarouselButtonProps) {
+function Prev(
+  props: Intergalactic.InternalTypings.InferChildComponentProps<NSCarousel.Prev.Component, typeof CarouselRoot, 'Prev'>,
+) {
   const { styles, children, Children, label, top = 0, inverted } = props;
   const SPrev = Root;
   const SPrevButton = Button;
@@ -704,7 +700,9 @@ function Prev(props: CarouselButtonProps) {
   );
 };
 
-function Next(props: CarouselButtonProps) {
+function Next(
+  props: Intergalactic.InternalTypings.InferChildComponentProps<NSCarousel.Next.Component, typeof CarouselRoot, 'Next'>,
+) {
   const { styles, children, Children, label, top = 0, inverted } = props;
   const SNext = Root;
   const SNextButton = Button;
@@ -729,7 +727,10 @@ function Next(props: CarouselButtonProps) {
   );
 };
 
-function Indicators({ items, styles, Children, inverted }: CarouselIndicatorsProps) {
+function Indicators(
+  props: Intergalactic.InternalTypings.InferChildComponentProps<NSCarousel.Indicators.Component, typeof CarouselRoot, 'Indicators'>,
+) {
+  const { items, styles, Children, inverted } = props;
   const SIndicators = Root;
   if (Children.origin) {
     return sstyled(styles)(
@@ -740,14 +741,17 @@ function Indicators({ items, styles, Children, inverted }: CarouselIndicatorsPro
   }
   return sstyled(styles)(
     <SIndicators render={Box} invertOutline={inverted}>
-      {items?.map((item: CarouselItem, index: number) => (
+      {items?.map((item: NSCarousel.Item, index: number) => (
         <Carousel.Indicator key={index} {...item} inverted={inverted} />
       ))}
     </SIndicators>,
   );
 };
 
-function Indicator({ styles, Children }: CarouselIndicatorProps) {
+function Indicator(
+  props: Intergalactic.InternalTypings.InferChildComponentProps<NSCarousel.Indicator.Component, typeof CarouselRoot, 'Indicator'>,
+) {
+  const { styles, Children } = props;
   const SIndicator = Root;
   return sstyled(styles)(
     <SIndicator render={Box}>
@@ -762,7 +766,7 @@ function Indicator({ styles, Children }: CarouselIndicatorProps) {
  * {@link https://developer.semrush.com/intergalactic/components/carousel/carousel-api/|API} | {@link https://developer.semrush.com/intergalactic/components/carousel/carousel-code/|Examples}
  */
 const Carousel = createComponent<
-  typeof CarouselType,
+  NSCarousel.Component,
   typeof CarouselRoot
 >(CarouselRoot, {
   Container,