@semcore/carousel 3.45.1 → 3.45.2

package/lib/es6/Carousel.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.types.js","names":[],"sources":["../../src/Carousel.types.ts"],"sourcesContent":["import { PropGetterFn, UnknownProperties, Intergalactic, IRootComponentProps } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface ICarouselProps extends CarouselProps, UnknownProperties {}\nexport type CarouselProps = BoxProps & {\n  /** Index active item */\n  index?: number;\n  /**\n   * Index of the active item selected by default\n   * @default 0\n   */\n  defaultIndex?: number;\n  /**  Called when the selection is changed */\n  onIndexChange?: (index: number) => void;\n  /** Animation duration\n   * @default 300 */\n  duration?: number;\n  /** Disables infinite items change in the carousel\n   * @default false */\n  bounded?: boolean;\n  /** @ignore  */\n  step?: number;\n  locale?: string;\n  /** Enable zoom feature for carousel items */\n  zoom?: boolean;\n  /** Width for items in zooming modal */\n  zoomWidth?: number;\n  /** Type of indicators */\n  indicators?: 'default' | 'hide' | 'preview';\n};\n\n/** @deprecated */\nexport interface ICarouselContext extends CarouselContext, UnknownProperties {}\nexport type CarouselContext = {\n  getContainerProps: PropGetterFn;\n  getItemProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getIndicatorsProps: PropGetterFn;\n};\n\nexport type CarouselItem = {\n  node: HTMLElement;\n};\n\nexport type CarouselItemProps = BoxProps & {\n  /** Flag for css cursor\n   * @private\n   */\n  zoomIn?: boolean;\n  /** Flag for css cursor\n   * @private\n   */\n  zoomOut?: boolean;\n\n  /** Function to add item to list in Carousel\n   * @private\n   */\n  toggleItem?: (item: CarouselItem, toRemove?: boolean) => void;\n\n  /** Index of item in carousel */\n  index?: number;\n\n  uid?: string;\n\n  /** Flag - is current item shown now */\n  current?: boolean;\n\n  /** Handler for show item in modal window\n   * @private\n   */\n  onToggleZoomModal?: () => void;\n\n  /** Value for transform item\n   * @private\n   */\n  transform?: number;\n};\n\n/** @deprecated */\nexport interface ICarouselState extends CarouselState, UnknownProperties {}\nexport type CarouselState = {\n  isOpenZoom: boolean;\n  selectedIndex: number;\n  items: CarouselItem[];\n};\n\nexport type CarouselButtonProps = IRootComponentProps &\n  BoxProps & {\n    label?: string;\n    inverted?: boolean;\n    tabIndex?: number;\n  };\n\nexport type CarouselIndicatorsProps = IRootComponentProps &\n  BoxProps & {\n    items?: CarouselItem[];\n    inverted?: boolean;\n  };\n\nexport type CarouselIndicatorProps = IRootComponentProps &\n  Omit<BoxProps, 'position'> & {\n    active?: boolean;\n    onClick?: () => void;\n    inverted?: boolean;\n  } & CarouselItem;\n\ndeclare const CarouselType: Intergalactic.Component<\n  'div',\n  CarouselProps,\n  CarouselContext & CarouselState\n> & {\n  Container: Intergalactic.Component<'div', BoxProps>;\n  Indicators: Intergalactic.Component<'div', CarouselIndicatorsProps, CarouselState>;\n  Indicator: Intergalactic.Component<'div', CarouselIndicatorProps>;\n  Item: Intergalactic.Component<'div', CarouselItemProps>;\n  Prev: Intergalactic.Component<'div', CarouselButtonProps>;\n  Next: Intergalactic.Component<'div', CarouselButtonProps>;\n};\n\nexport default CarouselType;\n"],"mappings":""}
+{"version":3,"file":"Carousel.types.js","names":[],"sources":["../../src/Carousel.types.ts"],"sourcesContent":["import { PropGetterFn, UnknownProperties, Intergalactic, IRootComponentProps } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface ICarouselProps extends CarouselProps, UnknownProperties {}\nexport type CarouselProps = BoxProps & {\n  /** Index active item */\n  index?: number;\n  /**\n   * Index of the active item selected by default\n   * @default 0\n   */\n  defaultIndex?: number;\n  /**  Called when the selection is changed */\n  onIndexChange?: (index: number) => void;\n  /** Animation duration\n   * @default 300 */\n  duration?: number;\n  /** Disables infinite items change in the carousel\n   * @default false */\n  bounded?: boolean;\n  /** @ignore  */\n  step?: number;\n  locale?: string;\n  /** Enable zoom feature for carousel items */\n  zoom?: boolean;\n  /** Width for items in zooming modal */\n  zoomWidth?: number;\n  /** Type of indicators */\n  indicators?: 'default' | 'hide' | 'preview';\n};\n\n/** @deprecated */\nexport interface ICarouselContext extends CarouselContext, UnknownProperties {}\nexport type CarouselContext = {\n  getContainerProps: PropGetterFn;\n  getItemProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getIndicatorsProps: PropGetterFn;\n};\n\nexport type CarouselItem = {\n  node: HTMLElement;\n};\n\nexport type CarouselItemProps = BoxProps & {\n  /** Flag for css cursor\n   * @private\n   */\n  zoomIn?: boolean;\n  /** Flag for css cursor\n   * @private\n   */\n  zoomOut?: boolean;\n\n  /** Function to add item to list in Carousel\n   * @private\n   */\n  toggleItem?: (item: CarouselItem, toRemove?: boolean) => void;\n\n  /** Index of item in carousel */\n  index?: number;\n\n  uid?: string;\n\n  /** Flag - is current item shown now */\n  current?: boolean;\n\n  /** Handler for show item in modal window\n   * @private\n   */\n  onToggleZoomModal?: () => void;\n\n  /** Value for transform item\n   * @private\n   */\n  transform?: number;\n\n  /**\n   * Flag data zoomed\n   * @private\n   */\n  isOpenZoom?: boolean;\n};\n\n/** @deprecated */\nexport interface ICarouselState extends CarouselState, UnknownProperties {}\nexport type CarouselState = {\n  isOpenZoom: boolean;\n  selectedIndex: number;\n  items: CarouselItem[];\n};\n\nexport type CarouselButtonProps = IRootComponentProps &\n  BoxProps & {\n    label?: string;\n    inverted?: boolean;\n    tabIndex?: number;\n  };\n\nexport type CarouselIndicatorsProps = IRootComponentProps &\n  BoxProps & {\n    items?: CarouselItem[];\n    inverted?: boolean;\n  };\n\nexport type CarouselIndicatorProps = IRootComponentProps &\n  Omit<BoxProps, 'position'> & {\n    active?: boolean;\n    onClick?: () => void;\n    inverted?: boolean;\n  } & CarouselItem;\n\ndeclare const CarouselType: Intergalactic.Component<\n  'div',\n  CarouselProps,\n  CarouselContext & CarouselState\n> & {\n  Container: Intergalactic.Component<'div', BoxProps>;\n  ContentBox: Intergalactic.Component<'div', BoxProps>;\n  Indicators: Intergalactic.Component<'div', CarouselIndicatorsProps, CarouselState>;\n  Indicator: Intergalactic.Component<'div', CarouselIndicatorProps>;\n  Item: Intergalactic.Component<'div', CarouselItemProps>;\n  Prev: Intergalactic.Component<'div', CarouselButtonProps>;\n  Next: Intergalactic.Component<'div', CarouselButtonProps>;\n};\n\nexport default CarouselType;\n"],"mappings":""}

package/lib/es6/style/carousel.shadow.css

@@ -108,7 +108,6 @@ SNext {
     margin-left: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
     margin-right: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
   }
-  
 }
 
 SPrevButton, SNextButton {

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

@@ -68,6 +68,11 @@ export type CarouselItemProps = BoxProps & {
      * @private
      */
     transform?: number;
+    /**
+     * Flag data zoomed
+     * @private
+     */
+    isOpenZoom?: boolean;
 };
 /** @deprecated */
 export interface ICarouselState extends CarouselState, UnknownProperties {
@@ -93,6 +98,7 @@ export type CarouselIndicatorProps = IRootComponentProps & Omit<BoxProps, 'posit
 } & 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>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/carousel",
   "description": "Semrush Carousel Component",
-  "version": "3.45.1",
+  "version": "3.45.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -9,12 +9,12 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "dependencies": {
-    "@semcore/flex-box": "5.39.0",
-    "@semcore/icon": "4.53.0",
-    "@semcore/utils": "4.44.0",
-    "@semcore/button": "5.40.1",
-    "@semcore/modal": "4.50.0",
-    "@semcore/breakpoints": "1.39.0"
+    "@semcore/flex-box": "5.39.1",
+    "@semcore/icon": "4.53.1",
+    "@semcore/utils": "4.44.1",
+    "@semcore/button": "5.40.2",
+    "@semcore/modal": "4.50.1",
+    "@semcore/breakpoints": "1.39.1"
   },
   "peerDependencies": {
     "@semcore/core": "^2.17.5",

package/src/Carousel.tsx

@@ -154,6 +154,14 @@ class CarouselRoot extends Component<
         this.slideToValue(lastSlide);
       }
     }
+
+    if (
+      (e.key === 'Enter' || e.key === ' ') &&
+      e.target instanceof HTMLDivElement &&
+      e.target.role === 'tabpanel'
+    ) {
+      this.handleToggleZoomModal();
+    }
   };
 
   toggleItem = (item: CarouselItem, removeItem = false) => {
@@ -330,6 +338,7 @@ class CarouselRoot extends Component<
       zoomIn: zoom,
       onToggleZoomModal: this.handleToggleZoomModal,
       transform: isCurrent ? this.getTransform() : undefined,
+      isOpenZoom: this.state.isOpenZoom,
     };
   }
 
@@ -507,7 +516,6 @@ class CarouselRoot extends Component<
 
   render() {
     const SCarousel = Root;
-    const SContentBox = Box;
     const {
       styles,
       Children,
@@ -540,11 +548,11 @@ class CarouselRoot extends Component<
           <>
             <Flex>
               <Carousel.Prev />
-              <SContentBox>
+              <Carousel.ContentBox>
                 <Carousel.Container aria-label={ariaLabel}>
                   <Children />
                 </Carousel.Container>
-              </SContentBox>
+              </Carousel.ContentBox>
               <Carousel.Next />
             </Flex>
             {indicators === 'default' && <Carousel.Indicators />}
@@ -590,6 +598,13 @@ const Container = (props: BoxProps & { duration?: number }) => {
   );
 };
 
+const ContentBox = (props: BoxProps) => {
+  const SContentBox = Root;
+  const { styles } = props;
+
+  return sstyled(styles)(<SContentBox render={Box} />);
+};
+
 class Item extends Component<CarouselItemProps> {
   refItem = React.createRef<HTMLElement>();
   keepFocusTimeout: NodeJS.Timeout | undefined;
@@ -633,6 +648,16 @@ class Item extends Component<CarouselItemProps> {
         }
       }, 100);
     }
+    if (
+      prevProps.isOpenZoom === true &&
+      this.props.isOpenZoom === false &&
+      this.props.current &&
+      !this.props.zoomOut
+    ) {
+      this.keepFocusTimeout = setTimeout(() => {
+        this.refItem.current?.focus();
+      }, 200);
+    }
   }
 
   render() {
@@ -729,6 +754,7 @@ const Indicator = ({ styles, Children }: CarouselIndicatorProps) => {
 
 const Carousel: typeof CarouselType = createComponent(CarouselRoot, {
   Container,
+  ContentBox,
   Indicators,
   Indicator,
   Item,

package/src/Carousel.types.ts

@@ -76,6 +76,12 @@ export type CarouselItemProps = BoxProps & {
    * @private
    */
   transform?: number;
+
+  /**
+   * Flag data zoomed
+   * @private
+   */
+  isOpenZoom?: boolean;
 };
 
 /** @deprecated */
@@ -112,6 +118,7 @@ declare const CarouselType: Intergalactic.Component<
   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>;

package/src/style/carousel.shadow.css

@@ -108,7 +108,6 @@ SNext {
     margin-left: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
     margin-right: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
   }
-  
 }
 
 SPrevButton, SNextButton {