intergalactic 15.120.0-prerelease.0 → 15.121.0-prerelease.2

package/carousel/lib/cjs/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/carousel/lib/cjs/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/carousel/lib/es6/Carousel.js

@@ -8,6 +8,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from 'intergalactic/utils/lib/core/index';
+import { assignProps as _assignProps10 } from 'intergalactic/core';
 import { assignProps as _assignProps9 } from 'intergalactic/core';
 import { assignProps as _assignProps8 } from 'intergalactic/core';
 import { assignProps as _assignProps7 } from 'intergalactic/core';
@@ -29,27 +30,27 @@ import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 import logger from 'intergalactic/utils/lib/logger';
 /*__reshadow-styles__:"./style/carousel.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SCarousel_kqj8s_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_kqj8s_gg_{display:flex;transition:transform var(--duration_kqj8s) ease-in-out}.___SContentBox_kqj8s_gg_,.___SModalBox_kqj8s_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_kqj8s_gg_:has(.___SItem_kqj8s_gg_.__keyboardFocused_kqj8s_gg_):after,.___SModalBox_kqj8s_gg_:has(.___SItem_kqj8s_gg_.__keyboardFocused_kqj8s_gg_):after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px}.___SModalContainer_kqj8s_gg_{display:flex;transition:transform var(--duration_kqj8s) ease-in-out}.___SItem_kqj8s_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_kqj8s);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_kqj8s_gg_.__zoomIn_kqj8s_gg_{cursor:zoom-in}.___SItem_kqj8s_gg_.__zoomOut_kqj8s_gg_{cursor:zoom-out}.___SIndicators_kqj8s_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px);outline:0;position:relative}.___SIndicators_kqj8s_gg_.__keyboardFocused_kqj8s_gg_:after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px);top:0;left:3px}.___SIndicator_kqj8s_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;border-radius:var(--intergalactic-control-rounded, 6px);background-color:var(--intergalactic-icon-secondary-neutral, #a9abb6);opacity:var(--intergalactic-disabled-opacity, 0.3);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@media (hover:hover){.___SIndicator_kqj8s_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_kqj8s_gg_.__active_kqj8s_gg_{opacity:1}.___SIndicator_kqj8s_gg_.__inverted_kqj8s_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_kqj8s_gg_,.___SPrev_kqj8s_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_kqj8s_gg_ .___SNextButton_kqj8s_gg_ span:has(>svg:only-child),.___SNext_kqj8s_gg_ .___SPrevButton_kqj8s_gg_ span:has(>svg:only-child),.___SPrev_kqj8s_gg_ .___SNextButton_kqj8s_gg_ span:has(>svg:only-child),.___SPrev_kqj8s_gg_ .___SPrevButton_kqj8s_gg_ span:has(>svg:only-child){margin-left:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SNextButton_kqj8s_gg_:focus-visible,.___SPrevButton_kqj8s_gg_:focus-visible{box-shadow:none}.___SNextButton_kqj8s_gg_:focus-visible:after,.___SPrevButton_kqj8s_gg_:focus-visible:after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPrev_kqj8s_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_kqj8s_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_kqj8s_gg_.__disabled_kqj8s_gg_,.___SPrev_kqj8s_gg_.__disabled_kqj8s_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_kqj8s_gg_{transition:none}}" /*__inner_css_end__*/, "kqj8s_gg_") /*__reshadow_css_end__*/, {
-  "__SCarousel": "___SCarousel_kqj8s_gg_",
-  "__SContainer": "___SContainer_kqj8s_gg_",
-  "--duration": "--duration_kqj8s",
-  "__SModalContainer": "___SModalContainer_kqj8s_gg_",
-  "__SItem": "___SItem_kqj8s_gg_",
-  "--transform": "--transform_kqj8s",
-  "_zoomIn": "__zoomIn_kqj8s_gg_",
-  "_zoomOut": "__zoomOut_kqj8s_gg_",
-  "__SIndicators": "___SIndicators_kqj8s_gg_",
-  "_keyboardFocused": "__keyboardFocused_kqj8s_gg_",
-  "__SIndicator": "___SIndicator_kqj8s_gg_",
-  "_active": "__active_kqj8s_gg_",
-  "_inverted": "__inverted_kqj8s_gg_",
-  "__SPrev": "___SPrev_kqj8s_gg_",
-  "__SNext": "___SNext_kqj8s_gg_",
-  "_disabled": "__disabled_kqj8s_gg_",
-  "__SContentBox": "___SContentBox_kqj8s_gg_",
-  "__SModalBox": "___SModalBox_kqj8s_gg_",
-  "__SPrevButton": "___SPrevButton_kqj8s_gg_",
-  "__SNextButton": "___SNextButton_kqj8s_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SCarousel_3a60i_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_3a60i_gg_{display:flex;transition:transform var(--duration_3a60i) ease-in-out}.___SContentBox_3a60i_gg_,.___SModalBox_3a60i_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_3a60i_gg_:has(.___SItem_3a60i_gg_.__keyboardFocused_3a60i_gg_):after,.___SModalBox_3a60i_gg_:has(.___SItem_3a60i_gg_.__keyboardFocused_3a60i_gg_):after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px}.___SModalContainer_3a60i_gg_{display:flex;transition:transform var(--duration_3a60i) ease-in-out}.___SItem_3a60i_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_3a60i);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_3a60i_gg_.__zoomIn_3a60i_gg_{cursor:zoom-in}.___SItem_3a60i_gg_.__zoomOut_3a60i_gg_{cursor:zoom-out}.___SIndicators_3a60i_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px);outline:0;position:relative}.___SIndicators_3a60i_gg_.__keyboardFocused_3a60i_gg_:after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px);top:0;left:3px}.___SIndicator_3a60i_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;border-radius:var(--intergalactic-control-rounded, 6px);background-color:var(--intergalactic-icon-secondary-neutral, #a9abb6);opacity:var(--intergalactic-disabled-opacity, 0.3);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@media (hover:hover){.___SIndicator_3a60i_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_3a60i_gg_.__active_3a60i_gg_{opacity:1}.___SIndicator_3a60i_gg_.__inverted_3a60i_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_3a60i_gg_,.___SPrev_3a60i_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_3a60i_gg_ .___SNextButton_3a60i_gg_ span:has(>svg:only-child),.___SNext_3a60i_gg_ .___SPrevButton_3a60i_gg_ span:has(>svg:only-child),.___SPrev_3a60i_gg_ .___SNextButton_3a60i_gg_ span:has(>svg:only-child),.___SPrev_3a60i_gg_ .___SPrevButton_3a60i_gg_ span:has(>svg:only-child){margin-left:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SNextButton_3a60i_gg_:focus-visible,.___SPrevButton_3a60i_gg_:focus-visible{box-shadow:none}.___SNextButton_3a60i_gg_:focus-visible:after,.___SPrevButton_3a60i_gg_:focus-visible:after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPrev_3a60i_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_3a60i_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_3a60i_gg_.__disabled_3a60i_gg_,.___SPrev_3a60i_gg_.__disabled_3a60i_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_3a60i_gg_{transition:none}}" /*__inner_css_end__*/, "3a60i_gg_") /*__reshadow_css_end__*/, {
+  "__SCarousel": "___SCarousel_3a60i_gg_",
+  "__SContainer": "___SContainer_3a60i_gg_",
+  "--duration": "--duration_3a60i",
+  "__SModalContainer": "___SModalContainer_3a60i_gg_",
+  "__SItem": "___SItem_3a60i_gg_",
+  "--transform": "--transform_3a60i",
+  "_zoomIn": "__zoomIn_3a60i_gg_",
+  "_zoomOut": "__zoomOut_3a60i_gg_",
+  "__SIndicators": "___SIndicators_3a60i_gg_",
+  "_keyboardFocused": "__keyboardFocused_3a60i_gg_",
+  "__SIndicator": "___SIndicator_3a60i_gg_",
+  "_active": "__active_3a60i_gg_",
+  "_inverted": "__inverted_3a60i_gg_",
+  "__SPrev": "___SPrev_3a60i_gg_",
+  "__SNext": "___SNext_3a60i_gg_",
+  "_disabled": "__disabled_3a60i_gg_",
+  "__SContentBox": "___SContentBox_3a60i_gg_",
+  "__SModalBox": "___SModalBox_3a60i_gg_",
+  "__SPrevButton": "___SPrevButton_3a60i_gg_",
+  "__SNextButton": "___SNextButton_3a60i_gg_"
 });
 import { findAllComponents } from 'intergalactic/utils/lib/findComponent';
 import { createBreakpoints } from 'intergalactic/breakpoints';
@@ -68,7 +69,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
   _inherits(CarouselRoot, _Component);
   var _super = _createSuper(CarouselRoot);
   function CarouselRoot(props) {
-    var _ref18, _props$index;
+    var _ref20, _props$index;
     var _this;
     _classCallCheck(this, CarouselRoot);
     _this = _super.call(this, props);
@@ -111,6 +112,9 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
           _this.slideToValue(lastSlide);
         }
       }
+      if ((e.key === 'Enter' || e.key === ' ') && e.target instanceof HTMLDivElement && e.target.role === 'tabpanel') {
+        _this.handleToggleZoomModal();
+      }
     });
     _defineProperty(_assertThisInitialized(_this), "toggleItem", function (item) {
       var removeItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -266,7 +270,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
     _this.state = {
       items: [],
       isOpenZoom: false,
-      selectedIndex: (_ref18 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref18 !== void 0 ? _ref18 : 0
+      selectedIndex: (_ref20 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref20 !== void 0 ? _ref20 : 0
     };
     return _this;
   }
@@ -336,7 +340,8 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         current: isCurrent,
         zoomIn: zoom,
         onToggleZoomModal: this.handleToggleZoomModal,
-        transform: isCurrent ? this.getTransform() : undefined
+        transform: isCurrent ? this.getTransform() : undefined,
+        isOpenZoom: this.state.isOpenZoom
       };
     }
   }, {
@@ -453,7 +458,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
     key: "renderModal",
     value: function renderModal(isSmall, ComponentItems) {
       var _ref = this.asProps,
-        _ref9,
+        _ref10,
         _this5 = this;
       var SModalContainer = Box;
       var SModalBox = Box;
@@ -463,16 +468,16 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         duration = _this$asProps3.duration,
         zoomWidth = _this$asProps3.zoomWidth;
       var isOpenZoom = this.state.isOpenZoom;
-      return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(Modal, _ref9.cn("Modal", {
+      return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(Modal, _ref10.cn("Modal", {
         "visible": isOpenZoom,
         "onClose": this.handleToggleZoomModal,
         "ghost": true,
         "closable": !isSmall
-      }), /*#__PURE__*/React.createElement(Flex, _ref9.cn("Flex", {
+      }), /*#__PURE__*/React.createElement(Flex, _ref10.cn("Flex", {
         "direction": isSmall ? 'column' : 'row'
       }), !isSmall && /*#__PURE__*/React.createElement(Carousel.Prev, {
         inverted: true
-      }), /*#__PURE__*/React.createElement(SModalBox, _ref9.cn("SModalBox", {}), /*#__PURE__*/React.createElement(SModalContainer, _ref9.cn("SModalContainer", _objectSpread({}, _assignProps({
+      }), /*#__PURE__*/React.createElement(SModalBox, _ref10.cn("SModalBox", {}), /*#__PURE__*/React.createElement(SModalContainer, _ref10.cn("SModalContainer", _objectSpread({}, _assignProps({
         "aria-live": 'polite',
         "use:duration": "".concat(duration, "ms"),
         "ref": this.refModalContainer,
@@ -489,7 +494,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
           zoomOut: true,
           transform: _this5.isSelected(i) ? _this5.getTransform() : undefined
         }));
-      }))), isSmall ? /*#__PURE__*/React.createElement(Flex, _ref9.cn("Flex", {
+      }))), isSmall ? /*#__PURE__*/React.createElement(Flex, _ref10.cn("Flex", {
         "justifyContent": 'center',
         "mt": 2
       }), /*#__PURE__*/React.createElement(Carousel.Prev, {
@@ -506,10 +511,9 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _ref2 = this.asProps,
-        _ref10,
+        _ref11,
         _this6 = this;
       var SCarousel = Box;
-      var SContentBox = Box;
       var _this$asProps4 = this.asProps,
         styles = _this$asProps4.styles,
         Children = _this$asProps4.Children,
@@ -520,7 +524,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         indicators = _this$asProps4.indicators;
       var ComponentItems = findAllComponents(Children, ['Carousel.Item']);
       var Controls = findAllComponents(Children, ['Carousel.Prev', 'Carousel.Next', 'Carousel.Indicators']);
-      return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(SCarousel, _ref10.cn("SCarousel", _objectSpread({}, _assignProps2({
+      return _ref11 = sstyled(styles), /*#__PURE__*/React.createElement(SCarousel, _ref11.cn("SCarousel", _objectSpread({}, _assignProps2({
         "role": 'region',
         "roledescription": 'carousel',
         "onKeyDown": this.handlerKeyDown,
@@ -529,9 +533,9 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         "ref": this.refCarousel,
         "id": "igc-".concat(uid, "-carousel"),
         "aria-roledescription": ariaRoledescription
-      }, _ref2))), Controls.length === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, _ref10.cn("Flex", {}), /*#__PURE__*/React.createElement(Carousel.Prev, null), /*#__PURE__*/React.createElement(SContentBox, _ref10.cn("SContentBox", {}), /*#__PURE__*/React.createElement(Carousel.Container, {
+      }, _ref2))), Controls.length === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, _ref11.cn("Flex", {}), /*#__PURE__*/React.createElement(Carousel.Prev, null), /*#__PURE__*/React.createElement(Carousel.ContentBox, null, /*#__PURE__*/React.createElement(Carousel.Container, {
         "aria-label": ariaLabel
-      }, /*#__PURE__*/React.createElement(Children, _ref10.cn("Children", {})))), /*#__PURE__*/React.createElement(Carousel.Next, null)), indicators === 'default' && /*#__PURE__*/React.createElement(Carousel.Indicators, null), indicators === 'preview' && /*#__PURE__*/React.createElement(Carousel.Indicators, null, function () {
+      }, /*#__PURE__*/React.createElement(Children, _ref11.cn("Children", {})))), /*#__PURE__*/React.createElement(Carousel.Next, null)), indicators === 'default' && /*#__PURE__*/React.createElement(Carousel.Indicators, null), indicators === 'preview' && /*#__PURE__*/React.createElement(Carousel.Indicators, null, function () {
         return ComponentItems.map(function (item, index) {
           return /*#__PURE__*/React.createElement(Carousel.Indicator, _extends({}, item.props, {
             key: item.key,
@@ -542,7 +546,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
             onClick: _this6.bindHandlerClickIndicator(index)
           }));
         });
-      })) : /*#__PURE__*/React.createElement(Children, _ref10.cn("Children", {})), hasZoom && /*#__PURE__*/React.createElement(BreakPoints, _ref10.cn("BreakPoints", {}), /*#__PURE__*/React.createElement(BreakPoints.Context.Consumer, null, function (mediaIndex) {
+      })) : /*#__PURE__*/React.createElement(Children, _ref11.cn("Children", {})), hasZoom && /*#__PURE__*/React.createElement(BreakPoints, _ref11.cn("BreakPoints", {}), /*#__PURE__*/React.createElement(BreakPoints.Context.Consumer, null, function (mediaIndex) {
         return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
       })));
     }
@@ -563,15 +567,22 @@ _defineProperty(CarouselRoot, "style", style);
 _defineProperty(CarouselRoot, "enhance", enhance);
 var Container = function Container(props) {
   var _ref3 = arguments[0],
-    _ref11;
+    _ref12;
   var SContainer = Box;
   var styles = props.styles,
     duration = props.duration;
-  return _ref11 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref11.cn("SContainer", _objectSpread({}, _assignProps3({
+  return _ref12 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref12.cn("SContainer", _objectSpread({}, _assignProps3({
     "use:duration": "".concat(duration, "ms"),
     "aria-live": 'polite'
   }, _ref3))));
 };
+var ContentBox = function ContentBox(props) {
+  var _ref4 = arguments[0],
+    _ref13;
+  var SContentBox = Box;
+  var styles = props.styles;
+  return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(SContentBox, _ref13.cn("SContentBox", _objectSpread({}, _assignProps4({}, _ref4))));
+};
 var Item = /*#__PURE__*/function (_Component2) {
   _inherits(Item, _Component2);
   var _super2 = _createSuper(Item);
@@ -613,6 +624,7 @@ var Item = /*#__PURE__*/function (_Component2) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
+      var _this8 = this;
       clearTimeout(this.keepFocusTimeout);
       var transform = this.props.transform;
       var refItem = this.refItem.current;
@@ -627,12 +639,18 @@ var Item = /*#__PURE__*/function (_Component2) {
           }
         }, 100);
       }
+      if (prevProps.isOpenZoom === true && this.props.isOpenZoom === false && this.props.current && !this.props.zoomOut) {
+        this.keepFocusTimeout = setTimeout(function () {
+          var _this8$refItem$curren;
+          (_this8$refItem$curren = _this8.refItem.current) === null || _this8$refItem$curren === void 0 ? void 0 : _this8$refItem$curren.focus();
+        }, 200);
+      }
     }
   }, {
     key: "render",
     value: function render() {
-      var _ref4 = this.asProps,
-        _ref12;
+      var _ref5 = this.asProps,
+        _ref14;
       var _this$props2 = this.props,
         styles = _this$props2.styles,
         index = _this$props2.index,
@@ -641,7 +659,7 @@ var Item = /*#__PURE__*/function (_Component2) {
         zoomIn = _this$props2.zoomIn,
         onToggleZoomModal = _this$props2.onToggleZoomModal;
       var SItem = Box;
-      return _ref12 = sstyled(styles), /*#__PURE__*/React.createElement(SItem, _ref12.cn("SItem", _objectSpread({}, _assignProps4({
+      return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(SItem, _ref14.cn("SItem", _objectSpread({}, _assignProps5({
         "ref": this.refItem,
         "role": 'tabpanel',
         "data-carousel": "igc-".concat(uid, "-carousel"),
@@ -650,15 +668,15 @@ var Item = /*#__PURE__*/function (_Component2) {
         "use:tabIndex": current ? 0 : -1,
         "onClick": zoomIn ? onToggleZoomModal : undefined,
         "zoomIn": zoomIn
-      }, _ref4))));
+      }, _ref5))));
     }
   }]);
   return Item;
 }(Component);
 _defineProperty(Item, "enhance", [keyboardFocusEnhance(false)]);
 var Prev = function Prev(props) {
-  var _ref5 = arguments[0],
-    _ref13;
+  var _ref6 = arguments[0],
+    _ref15;
   var styles = props.styles,
     children = props.children,
     Children = props.Children,
@@ -668,9 +686,9 @@ var Prev = function Prev(props) {
     inverted = props.inverted;
   var SPrev = Box;
   var SPrevButton = Button;
-  return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(SPrev, _ref13.cn("SPrev", _objectSpread({}, _assignProps5({
+  return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SPrev, _ref15.cn("SPrev", _objectSpread({}, _assignProps6({
     "top": top
-  }, _ref5))), children ? /*#__PURE__*/React.createElement(Children, _ref13.cn("Children", {})) : /*#__PURE__*/React.createElement(SPrevButton, _ref13.cn("SPrevButton", {
+  }, _ref6))), children ? /*#__PURE__*/React.createElement(Children, _ref15.cn("Children", {})) : /*#__PURE__*/React.createElement(SPrevButton, _ref15.cn("SPrevButton", {
     "addonLeft": ChevronLeft,
     "aria-label": label,
     "theme": inverted ? 'invert' : 'muted',
@@ -679,8 +697,8 @@ var Prev = function Prev(props) {
   })));
 };
 var Next = function Next(props) {
-  var _ref6 = arguments[0],
-    _ref14;
+  var _ref7 = arguments[0],
+    _ref16;
   var styles = props.styles,
     children = props.children,
     Children = props.Children,
@@ -690,9 +708,9 @@ var Next = function Next(props) {
     inverted = props.inverted;
   var SNext = Box;
   var SNextButton = Button;
-  return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(SNext, _ref14.cn("SNext", _objectSpread({}, _assignProps6({
+  return _ref16 = sstyled(styles), /*#__PURE__*/React.createElement(SNext, _ref16.cn("SNext", _objectSpread({}, _assignProps7({
     "top": top
-  }, _ref6))), children ? /*#__PURE__*/React.createElement(Children, _ref14.cn("Children", {})) : /*#__PURE__*/React.createElement(SNextButton, _ref14.cn("SNextButton", {
+  }, _ref7))), children ? /*#__PURE__*/React.createElement(Children, _ref16.cn("Children", {})) : /*#__PURE__*/React.createElement(SNextButton, _ref16.cn("SNextButton", {
     "addonLeft": ChevronRight,
     "aria-label": label,
     "theme": inverted ? 'invert' : 'muted',
@@ -700,19 +718,19 @@ var Next = function Next(props) {
     "size": 'l'
   })));
 };
-var Indicators = function Indicators(_ref19) {
-  var _ref7 = arguments[0],
-    _ref16;
-  var items = _ref19.items,
-    styles = _ref19.styles,
-    Children = _ref19.Children,
-    inverted = _ref19.inverted;
+var Indicators = function Indicators(_ref21) {
+  var _ref8 = arguments[0],
+    _ref18;
+  var items = _ref21.items,
+    styles = _ref21.styles,
+    Children = _ref21.Children,
+    inverted = _ref21.inverted;
   var SIndicators = Box;
   if (Children.origin) {
-    var _ref15;
-    return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicators, _ref15.cn("SIndicators", _objectSpread({}, _assignProps7({}, _ref7))), /*#__PURE__*/React.createElement(Children, _ref15.cn("Children", {})));
+    var _ref17;
+    return _ref17 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicators, _ref17.cn("SIndicators", _objectSpread({}, _assignProps8({}, _ref8))), /*#__PURE__*/React.createElement(Children, _ref17.cn("Children", {})));
   }
-  return _ref16 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicators, _ref16.cn("SIndicators", _objectSpread({}, _assignProps8({}, _ref7))), items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+  return _ref18 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicators, _ref18.cn("SIndicators", _objectSpread({}, _assignProps9({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Carousel.Indicator, _extends({
       key: index
     }, item, {
@@ -721,16 +739,17 @@ var Indicators = function Indicators(_ref19) {
   }));
 };
 Indicators.enhance = [keyboardFocusEnhance()];
-var Indicator = function Indicator(_ref20) {
-  var _ref8 = arguments[0],
-    _ref17;
-  var styles = _ref20.styles,
-    Children = _ref20.Children;
+var Indicator = function Indicator(_ref22) {
+  var _ref9 = arguments[0],
+    _ref19;
+  var styles = _ref22.styles,
+    Children = _ref22.Children;
   var SIndicator = Box;
-  return _ref17 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicator, _ref17.cn("SIndicator", _objectSpread({}, _assignProps9({}, _ref8))), /*#__PURE__*/React.createElement(Children, _ref17.cn("Children", {})));
+  return _ref19 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicator, _ref19.cn("SIndicator", _objectSpread({}, _assignProps10({}, _ref9))), /*#__PURE__*/React.createElement(Children, _ref19.cn("Children", {})));
 };
 var Carousel = createComponent(CarouselRoot, {
   Container: Container,
+  ContentBox: ContentBox,
   Indicators: Indicators,
   Indicator: Indicator,
   Item: Item,