@blaze-cms/react-page-builder 0.139.0-alpha.1 → 0.139.0-alpha.4

package/lib-es/components/Card/CardsRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardsRender.js","names":["React","useContext","useQuery","dynamic","PropTypes","MainContext","generateSingleItemQuery","SEARCH_PUBLISHED_CONTENT","AND","FULL","useGetEntitySchemasAsObj","useGetImages","getUpdatedFilterBy","getEntityData","getRequiredSchemas","sortResponseData","getUnpublishedEntityName","renderChildren","splitChildren","removeExtraItems","appendImages","filtersSetup","filterQuerySetup","shouldSkipSingleQuery","shouldReturn","getUpdatedSortProperties","getUpdatedItemsToDisplay","CardsContainer","CardsRender","_ref","entity","legacyEntity","entities","entityFields","itemsToDisplay","children","otherProps","_objectWithoutProperties","_excluded","isPreview","parent","itemId","parentId","itemEntity","parentEntity","filterBy","filterByProperty","sortby","sort","sortProperties","operator","filterOperator","useRandomSort","updatedSortProperties","sortbyFilters","variableProps","_objectSpread","entitiesToUse","primaryEntityToUse","unpublishedParentEntityName","allEntityNames","uniqueEntityNames","Set","data","mainSchemas","loading","_loading","error","_error","parentSchema","filterEntitySchema","entitiesTypes","map","ent","graphqlEntityMap","reduce","acc","entityType","docTypes","docType","type","entityTypes","eType","style","getAction","queryProps","inheritedFilters","entitySameAsCurrentItemEntity","action","filterEntityRelations","currentSchema","itemEntityUpdated","isFull","entityData","parentEntityData","_err","_load","variables","id","skip","requiredSchema","schemaLoading","schemaError","updatedFilterBy","updatedItemsToDisplay","limit","getEntitySchemas","Object","values","hasNoFiltersOrItemsToDisplay","length","cardData","cardsError","fetchPolicy","imageIds","imageId","filter","Boolean","imagesData","imagesLoading","isLoading","hasError","message","results","cardDataResults","orderedData","regularChildren","gtmChildren","name","updatedCards","createElement","Fragment","_extends","cardChildren","propTypes","oneOfType","arrayOf","node","string","isRequired","array","defaultProps"],"sources":["../../../src/components/Card/CardsRender.js"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport dynamic from 'next/dynamic';\nimport PropTypes from 'prop-types';\nimport { MainContext } from '@blaze-cms/nextjs-components';\nimport { generateSingleItemQuery } from '../../application/query';\nimport { SEARCH_PUBLISHED_CONTENT, AND, FULL } from '../../constants';\nimport { useGetEntitySchemasAsObj, useGetImages } from '../../hooks';\nimport {\n  getUpdatedFilterBy,\n  getEntityData,\n  getRequiredSchemas,\n  sortResponseData,\n  getUnpublishedEntityName,\n  renderChildren,\n  splitChildren,\n  removeExtraItems,\n  appendImages\n} from '../../helpers';\nimport {\n  filtersSetup,\n  filterQuerySetup,\n  shouldSkipSingleQuery,\n  shouldReturn,\n  getUpdatedSortProperties,\n  getUpdatedItemsToDisplay\n} from './helpers';\n\nconst CardsContainer = dynamic(() => import('./CardsContainer'));\n\nconst CardsRender = ({\n  entity: legacyEntity,\n  entities,\n  entityFields,\n  itemsToDisplay,\n  children,\n  ...otherProps\n}) => {\n  const { isPreview } = useContext(MainContext);\n  const {\n    parent: { itemId: parentId, itemEntity: parentEntity },\n    filterBy = [],\n    filterByProperty = [],\n    sortby,\n    sort,\n    sortProperties = [],\n    operator: filterOperator = AND,\n    useRandomSort\n  } = otherProps;\n  const [updatedSortProperties, sortbyFilters] = getUpdatedSortProperties(\n    sort,\n    sortby,\n    sortProperties\n  );\n\n  const variableProps = {\n    ...otherProps,\n    sortProperties: updatedSortProperties,\n    sort: null,\n    sortby: null\n  };\n\n  const entitiesToUse = entities || [legacyEntity];\n  const primaryEntityToUse = entitiesToUse[0];\n  const unpublishedParentEntityName = getUnpublishedEntityName(parentEntity);\n  const allEntityNames = [...entitiesToUse, unpublishedParentEntityName];\n  const uniqueEntityNames = [...new Set(allEntityNames)];\n  const { data: mainSchemas = {}, loading: _loading, error: _error } = useGetEntitySchemasAsObj(\n    uniqueEntityNames\n  );\n  const parentSchema = mainSchemas[unpublishedParentEntityName] || {};\n  const filterEntitySchema = mainSchemas[primaryEntityToUse] || {};\n  const entitiesTypes = entitiesToUse.map(ent => getEntityData(ent, mainSchemas[ent]));\n  const graphqlEntityMap = entitiesTypes.reduce(\n    (acc, entityType) => ({ ...acc, [entityType.entityType]: entityType.entity }),\n    {}\n  );\n  const docTypes = entitiesTypes.map(({ docType: type }) => type);\n  const entityTypes = entitiesTypes.map(({ entityType: eType }) => eType);\n\n  const { style } = otherProps;\n\n  const {\n    getAction,\n    queryProps,\n    inheritedFilters,\n    entitySameAsCurrentItemEntity,\n    action,\n    filterEntityRelations\n  } = filtersSetup({\n    entityFields,\n    entityTypes,\n    filterBy,\n    filterByProperty,\n    entities: entitiesToUse,\n    currentSchema: parentSchema,\n    filterEntitySchema,\n    isPreview,\n    itemEntityUpdated: unpublishedParentEntityName,\n    isFull: style === FULL\n  });\n\n  const {\n    data: { entityData: parentEntityData = {} } = {},\n    error: _err,\n    loading: _load\n  } = useQuery(generateSingleItemQuery(getAction, queryProps), {\n    variables: { id: parentId },\n    skip: shouldSkipSingleQuery(_loading, getAction, queryProps)\n  });\n\n  const {\n    data: requiredSchema = {},\n    loading: schemaLoading,\n    error: schemaError\n  } = useGetEntitySchemasAsObj(\n    getRequiredSchemas([...filterByProperty, ...sortbyFilters], filterEntitySchema),\n    _loading\n  );\n\n  const updatedFilterBy = getUpdatedFilterBy(\n    inheritedFilters,\n    parentEntityData,\n    parentSchema,\n    filterEntitySchema,\n    parentId,\n    variableProps\n  );\n\n  const updatedItemsToDisplay = getUpdatedItemsToDisplay({\n    itemsToDisplay,\n    inheritedFilters,\n    parentSchema,\n    parentEntityData\n  });\n\n  const { limit, variables } = filterQuerySetup({\n    getEntitySchemas: Object.values(requiredSchema),\n    entity: primaryEntityToUse,\n    updatedFilterBy,\n    variableProps,\n    docType: docTypes,\n    filterOperator,\n    filterEntityRelations,\n    itemsToDisplay: updatedItemsToDisplay,\n    entitySameAsCurrentItemEntity,\n    useRandomSort\n  });\n\n  const hasNoFiltersOrItemsToDisplay = !updatedItemsToDisplay.length && !updatedFilterBy;\n\n  const { data: cardData = {}, error: cardsError } = useQuery(action, {\n    variables,\n    fetchPolicy: useRandomSort ? 'cache-and-network' : 'cache-first',\n    skip: shouldReturn(\n      hasNoFiltersOrItemsToDisplay,\n      _loading,\n      _load,\n      schemaLoading,\n      _error,\n      _err,\n      schemaError\n    )\n  });\n\n  const imageIds = updatedItemsToDisplay.map(({ imageId }) => imageId).filter(Boolean);\n  const { data: imagesData, loading: imagesLoading } = useGetImages(imageIds, true);\n  const isLoading = shouldReturn(_loading, _load, schemaLoading, imagesLoading);\n  const hasError = shouldReturn(_error, _err, schemaError);\n\n  if (hasNoFiltersOrItemsToDisplay) return null;\n  if (isLoading) return null;\n  if (hasError) return null;\n  if (cardsError) return cardsError.message;\n  let { results: cardDataResults } = cardData[SEARCH_PUBLISHED_CONTENT] || {};\n\n  if (!cardDataResults || !cardDataResults.length) return null;\n\n  cardDataResults = entitySameAsCurrentItemEntity\n    ? removeExtraItems(cardDataResults, limit, parentId)\n    : cardDataResults;\n  if (!cardDataResults.length) return null;\n\n  const orderedData = useRandomSort\n    ? cardDataResults\n    : sortResponseData(cardDataResults, updatedItemsToDisplay);\n  const { regularChildren, gtmChildren } = splitChildren(\n    children,\n    cardDataResults,\n    graphqlEntityMap,\n    {\n      name: variableProps.name\n    }\n  );\n  const updatedCards = appendImages(imagesData, orderedData, updatedItemsToDisplay);\n\n  return (\n    <>\n      {gtmChildren && renderChildren(gtmChildren)}\n      <CardsContainer\n        cardData={updatedCards}\n        entity={primaryEntityToUse}\n        gtmChildren={gtmChildren}\n        cardChildren={regularChildren}\n        graphqlEntityMap={graphqlEntityMap}\n        parent={otherProps.parent}\n        {...variableProps}\n      />\n    </>\n  );\n};\n\nCardsRender.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  entity: PropTypes.string.isRequired,\n  entityFields: PropTypes.string.isRequired,\n  itemsToDisplay: PropTypes.array,\n  entities: PropTypes.array\n};\n\nCardsRender.defaultProps = {\n  children: [],\n  itemsToDisplay: [],\n  entities: []\n};\n\nexport default CardsRender;\n"],"mappings":"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"}
+{"version":3,"file":"CardsRender.js","names":["React","useContext","useQuery","dynamic","PropTypes","MainContext","generateSingleItemQuery","SEARCH_PUBLISHED_CONTENT","AND","FULL","useGetEntitySchemasAsObj","useGetImages","getUpdatedFilterBy","getEntityData","getRequiredSchemas","sortResponseData","getUnpublishedEntityName","renderChildren","splitChildren","removeExtraItems","appendImages","filtersSetup","filterQuerySetup","shouldSkipSingleQuery","shouldReturn","getUpdatedSortProperties","getUpdatedItemsToDisplay","CardsContainer","CardsRender","_ref","entity","legacyEntity","entities","entityFields","itemsToDisplay","children","otherProps","_objectWithoutProperties","_excluded","isPreview","parent","itemId","parentId","itemEntity","parentEntity","filterBy","filterByProperty","sortby","sort","sortProperties","operator","filterOperator","useRandomSort","updatedSortProperties","sortbyFilters","variableProps","_objectSpread","entitiesToUse","primaryEntityToUse","unpublishedParentEntityName","allEntityNames","uniqueEntityNames","Set","data","mainSchemas","loading","_loading","error","_error","parentSchema","filterEntitySchema","entitiesTypes","map","ent","graphqlEntityMap","reduce","acc","entityType","docTypes","docType","type","entityTypes","eType","style","getAction","queryProps","inheritedFilters","entitySameAsCurrentItemEntity","action","filterEntityRelations","currentSchema","itemEntityUpdated","isFull","entityData","parentEntityData","_err","_load","variables","id","skip","requiredSchema","schemaLoading","schemaError","updatedFilterBy","updatedItemsToDisplay","limit","getEntitySchemas","Object","values","hasNoFiltersOrItemsToDisplay","length","cardData","cardsError","fetchPolicy","imageIds","imageId","filter","Boolean","imagesData","imagesLoading","isLoading","hasError","message","results","cardDataResults","orderedData","regularChildren","gtmChildren","name","updatedCards","createElement","Fragment","_extends","cardChildren","propTypes","oneOfType","arrayOf","node","string","isRequired","array","defaultProps"],"sources":["../../../src/components/Card/CardsRender.js"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport dynamic from 'next/dynamic';\nimport PropTypes from 'prop-types';\nimport { MainContext } from '@blaze-cms/nextjs-components';\nimport { generateSingleItemQuery } from '../../application/query';\nimport { SEARCH_PUBLISHED_CONTENT, AND, FULL } from '../../constants';\nimport { useGetEntitySchemasAsObj, useGetImages } from '../../hooks';\nimport {\n  getUpdatedFilterBy,\n  getEntityData,\n  getRequiredSchemas,\n  sortResponseData,\n  getUnpublishedEntityName,\n  renderChildren,\n  splitChildren,\n  removeExtraItems,\n  appendImages\n} from '../../helpers';\nimport {\n  filtersSetup,\n  filterQuerySetup,\n  shouldSkipSingleQuery,\n  shouldReturn,\n  getUpdatedSortProperties,\n  getUpdatedItemsToDisplay\n} from './helpers';\n\nconst CardsContainer = dynamic(() => import('./CardsContainer'));\n\nconst CardsRender = ({\n  entity: legacyEntity,\n  entities,\n  entityFields,\n  itemsToDisplay,\n  children,\n  ...otherProps\n}) => {\n  const { isPreview } = useContext(MainContext);\n  const {\n    parent: { itemId: parentId, itemEntity: parentEntity },\n    filterBy = [],\n    filterByProperty = [],\n    sortby,\n    sort,\n    sortProperties = [],\n    operator: filterOperator = AND,\n    useRandomSort\n  } = otherProps;\n  const [updatedSortProperties, sortbyFilters] = getUpdatedSortProperties(\n    sort,\n    sortby,\n    sortProperties\n  );\n\n  const variableProps = {\n    ...otherProps,\n    sortProperties: updatedSortProperties,\n    sort: null,\n    sortby: null\n  };\n\n  const entitiesToUse = entities || [legacyEntity];\n  const primaryEntityToUse = entitiesToUse[0];\n  const unpublishedParentEntityName = getUnpublishedEntityName(parentEntity);\n  const allEntityNames = [...entitiesToUse, unpublishedParentEntityName];\n  const uniqueEntityNames = [...new Set(allEntityNames)];\n  const { data: mainSchemas = {}, loading: _loading, error: _error } = useGetEntitySchemasAsObj(\n    uniqueEntityNames\n  );\n  const parentSchema = mainSchemas[unpublishedParentEntityName] || {};\n  const filterEntitySchema = mainSchemas[primaryEntityToUse] || {};\n  const entitiesTypes = entitiesToUse.map(ent => getEntityData(ent, mainSchemas[ent]));\n  const graphqlEntityMap = entitiesTypes.reduce(\n    (acc, entityType) => ({ ...acc, [entityType.entityType]: entityType.entity }),\n    {}\n  );\n  const docTypes = entitiesTypes.map(({ docType: type }) => type);\n  const entityTypes = entitiesTypes.map(({ entityType: eType }) => eType);\n\n  const { style } = otherProps;\n\n  const {\n    getAction,\n    queryProps,\n    inheritedFilters,\n    entitySameAsCurrentItemEntity,\n    action,\n    filterEntityRelations\n  } = filtersSetup({\n    entityFields,\n    entityTypes,\n    filterBy,\n    filterByProperty,\n    entities: entitiesToUse,\n    currentSchema: parentSchema,\n    filterEntitySchema,\n    isPreview,\n    itemEntityUpdated: unpublishedParentEntityName,\n    isFull: style === FULL\n  });\n\n  const {\n    data: { entityData: parentEntityData = {} } = {},\n    error: _err,\n    loading: _load\n  } = useQuery(generateSingleItemQuery(getAction, queryProps), {\n    variables: { id: parentId },\n    skip: shouldSkipSingleQuery(_loading, getAction, queryProps)\n  });\n\n  const {\n    data: requiredSchema = {},\n    loading: schemaLoading,\n    error: schemaError\n  } = useGetEntitySchemasAsObj(\n    getRequiredSchemas([...filterByProperty, ...sortbyFilters], filterEntitySchema),\n    _loading\n  );\n\n  const updatedFilterBy = getUpdatedFilterBy(\n    inheritedFilters,\n    parentEntityData,\n    parentSchema,\n    filterEntitySchema,\n    parentId,\n    variableProps\n  );\n\n  const updatedItemsToDisplay = getUpdatedItemsToDisplay({\n    itemsToDisplay,\n    inheritedFilters,\n    parentSchema,\n    parentEntityData\n  });\n\n  const { limit, variables } = filterQuerySetup({\n    getEntitySchemas: Object.values(requiredSchema),\n    entity: primaryEntityToUse,\n    updatedFilterBy,\n    variableProps,\n    docType: docTypes,\n    filterOperator,\n    filterEntityRelations,\n    itemsToDisplay: updatedItemsToDisplay,\n    entitySameAsCurrentItemEntity,\n    useRandomSort\n  });\n\n  const hasNoFiltersOrItemsToDisplay = !updatedItemsToDisplay.length && !updatedFilterBy;\n\n  const { data: cardData = {}, error: cardsError } = useQuery(action, {\n    variables,\n    fetchPolicy: useRandomSort ? 'cache-and-network' : 'cache-first',\n    skip: shouldReturn(\n      hasNoFiltersOrItemsToDisplay,\n      _loading,\n      _load,\n      schemaLoading,\n      _error,\n      _err,\n      schemaError\n    )\n  });\n\n  const imageIds = updatedItemsToDisplay.map(({ imageId }) => imageId).filter(Boolean);\n  const { data: imagesData, loading: imagesLoading } = useGetImages(imageIds, true);\n  const isLoading = shouldReturn(_loading, _load, schemaLoading, imagesLoading);\n  const hasError = shouldReturn(_error, _err, schemaError);\n\n  if (hasNoFiltersOrItemsToDisplay) return null;\n  if (isLoading) return null;\n  if (hasError) return null;\n  if (cardsError) return cardsError.message;\n  let { results: cardDataResults } = cardData[SEARCH_PUBLISHED_CONTENT] || {};\n\n  if (!cardDataResults || !cardDataResults.length) return null;\n\n  cardDataResults = entitySameAsCurrentItemEntity\n    ? removeExtraItems(cardDataResults, limit, parentId)\n    : cardDataResults;\n  if (!cardDataResults.length) return null;\n\n  const orderedData = useRandomSort\n    ? cardDataResults\n    : sortResponseData(cardDataResults, updatedItemsToDisplay);\n  const { regularChildren, gtmChildren } = splitChildren(\n    children,\n    cardDataResults,\n    graphqlEntityMap,\n    {\n      name: variableProps.name\n    }\n  );\n  const updatedCards = appendImages(imagesData, orderedData, updatedItemsToDisplay);\n\n  return (\n    <>\n      {gtmChildren && renderChildren(gtmChildren)}\n      <CardsContainer\n        cardData={updatedCards}\n        entity={primaryEntityToUse}\n        gtmChildren={gtmChildren}\n        cardChildren={regularChildren}\n        graphqlEntityMap={graphqlEntityMap}\n        {...variableProps}\n      />\n    </>\n  );\n};\n\nCardsRender.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  entity: PropTypes.string.isRequired,\n  entityFields: PropTypes.string.isRequired,\n  itemsToDisplay: PropTypes.array,\n  entities: PropTypes.array\n};\n\nCardsRender.defaultProps = {\n  children: [],\n  itemsToDisplay: [],\n  entities: []\n};\n\nexport default CardsRender;\n"],"mappings":"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"}

package/lib-es/components/Carousel/Carousel.js

@@ -1,35 +1,45 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-const _excluded = ["caption", "imageIds", "isCaptionDisplayed"];
+const _excluded = ["caption", "imageIds", "isCaptionDisplayed", "VariantComponent"];
 import React from 'react';
 import PropTypes from 'prop-types';
+import CarouselImage from './CarouselImage';
 import CarouselRender from './CarouselRender';
-const Carousel = _ref => {
-  let {
+import { useCarouselNavigation } from './hooks/useCarouselNavigation';
+import { getDisplayCountData } from '../../helpers';
+const Carousel = props => {
+  const {
       caption,
       imageIds,
-      isCaptionDisplayed
-    } = _ref,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
+      isCaptionDisplayed,
+      VariantComponent
+    } = props,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  const navigationProps = useCarouselNavigation(props);
   if (!imageIds || !imageIds.length) return null;
   const shouldDisplayCaption = isCaptionDisplayed && caption;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "carousel"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CarouselRender, _extends({
-    imageIds: imageIds
-  }, otherProps))), shouldDisplayCaption && /*#__PURE__*/React.createElement("div", {
-    className: "carousel__details",
-    "data-testid": "carousel-details"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "caption"
-  }, caption)));
+  const {
+    shouldDisplayCount,
+    countMessage
+  } = getDisplayCountData(navigationProps.showCount, imageIds);
+  const ComponentToRender = VariantComponent || CarouselRender;
+  return /*#__PURE__*/React.createElement(ComponentToRender, _extends({
+    caption: caption,
+    imageIds: imageIds,
+    CarouselImage: CarouselImage,
+    shouldDisplayCaption: shouldDisplayCaption,
+    shouldDisplayCount: shouldDisplayCount,
+    countMessage: countMessage
+  }, navigationProps, otherProps));
 };
 Carousel.propTypes = {
   caption: PropTypes.string,
   imageIds: PropTypes.array,
-  isCaptionDisplayed: PropTypes.bool
+  isCaptionDisplayed: PropTypes.bool,
+  VariantComponent: PropTypes.func
 };
 Carousel.defaultProps = {
+  VariantComponent: null,
   caption: '',
   imageIds: [],
   isCaptionDisplayed: false

package/lib-es/components/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","names":["React","PropTypes","CarouselRender","Carousel","_ref","caption","imageIds","isCaptionDisplayed","otherProps","_objectWithoutProperties","_excluded","length","shouldDisplayCaption","createElement","className","_extends","propTypes","string","array","bool","defaultProps"],"sources":["../../../src/components/Carousel/Carousel.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CarouselRender from './CarouselRender';\n\nconst Carousel = ({ caption, imageIds, isCaptionDisplayed, ...otherProps }) => {\n  if (!imageIds || !imageIds.length) return null;\n  const shouldDisplayCaption = isCaptionDisplayed && caption;\n\n  return (\n    <div className=\"carousel\">\n      <div>\n        <CarouselRender imageIds={imageIds} {...otherProps} />\n      </div>\n      {shouldDisplayCaption && (\n        <div className=\"carousel__details\" data-testid=\"carousel-details\">\n          <div className=\"caption\">{caption}</div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nCarousel.propTypes = {\n  caption: PropTypes.string,\n  imageIds: PropTypes.array,\n  isCaptionDisplayed: PropTypes.bool\n};\n\nCarousel.defaultProps = {\n  caption: '',\n  imageIds: [],\n  isCaptionDisplayed: false\n};\n\nexport default Carousel;\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,cAAc,MAAM,kBAAkB;AAE7C,MAAMC,QAAQ,GAAGC,IAAA,IAA8D;EAAA,IAA7D;MAAEC,OAAO;MAAEC,QAAQ;MAAEC;IAAkC,CAAC,GAAAH,IAAA;IAAZI,UAAU,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EACtE,IAAI,CAACJ,QAAQ,IAAI,CAACA,QAAQ,CAACK,MAAM,EAAE,OAAO,IAAI;EAC9C,MAAMC,oBAAoB,GAAGL,kBAAkB,IAAIF,OAAO;EAE1D,oBACEL,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAU,gBACvBd,KAAA,CAAAa,aAAA,2BACEb,KAAA,CAAAa,aAAA,CAACX,cAAc,EAAAa,QAAA;IAACT,QAAQ,EAAEA;EAAS,GAAKE,UAAU,CAAG,CAClD,CAAC,EACLI,oBAAoB,iBACnBZ,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC,mBAAmB;IAAC,eAAY;EAAkB,gBAC/Dd,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAS,GAAET,OAAa,CACpC,CAEJ,CAAC;AAEV,CAAC;AAEDF,QAAQ,CAACa,SAAS,GAAG;EACnBX,OAAO,EAAEJ,SAAS,CAACgB,MAAM;EACzBX,QAAQ,EAAEL,SAAS,CAACiB,KAAK;EACzBX,kBAAkB,EAAEN,SAAS,CAACkB;AAChC,CAAC;AAEDhB,QAAQ,CAACiB,YAAY,GAAG;EACtBf,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,kBAAkB,EAAE;AACtB,CAAC;AAED,eAAeJ,QAAQ"}
+{"version":3,"file":"Carousel.js","names":["React","PropTypes","CarouselImage","CarouselRender","useCarouselNavigation","getDisplayCountData","Carousel","props","caption","imageIds","isCaptionDisplayed","VariantComponent","otherProps","_objectWithoutProperties","_excluded","navigationProps","length","shouldDisplayCaption","shouldDisplayCount","countMessage","showCount","ComponentToRender","createElement","_extends","propTypes","string","array","bool","func","defaultProps"],"sources":["../../../src/components/Carousel/Carousel.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CarouselImage from './CarouselImage';\nimport CarouselRender from './CarouselRender';\nimport { useCarouselNavigation } from './hooks/useCarouselNavigation';\nimport { getDisplayCountData } from '../../helpers';\n\nconst Carousel = props => {\n  const { caption, imageIds, isCaptionDisplayed, VariantComponent, ...otherProps } = props;\n\n  const navigationProps = useCarouselNavigation(props);\n\n  if (!imageIds || !imageIds.length) return null;\n  const shouldDisplayCaption = isCaptionDisplayed && caption;\n\n  const { shouldDisplayCount, countMessage } = getDisplayCountData(\n    navigationProps.showCount,\n    imageIds\n  );\n\n  const ComponentToRender = VariantComponent || CarouselRender;\n\n  return (\n    <ComponentToRender\n      caption={caption}\n      imageIds={imageIds}\n      CarouselImage={CarouselImage}\n      shouldDisplayCaption={shouldDisplayCaption}\n      shouldDisplayCount={shouldDisplayCount}\n      countMessage={countMessage}\n      {...navigationProps}\n      {...otherProps}\n    />\n  );\n};\n\nCarousel.propTypes = {\n  caption: PropTypes.string,\n  imageIds: PropTypes.array,\n  isCaptionDisplayed: PropTypes.bool,\n  VariantComponent: PropTypes.func\n};\n\nCarousel.defaultProps = {\n  VariantComponent: null,\n  caption: '',\n  imageIds: [],\n  isCaptionDisplayed: false\n};\n\nexport default Carousel;\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,SAASC,qBAAqB,QAAQ,+BAA+B;AACrE,SAASC,mBAAmB,QAAQ,eAAe;AAEnD,MAAMC,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;MAAEC,OAAO;MAAEC,QAAQ;MAAEC,kBAAkB;MAAEC;IAAgC,CAAC,GAAGJ,KAAK;IAApBK,UAAU,GAAAC,wBAAA,CAAKN,KAAK,EAAAO,SAAA;EAExF,MAAMC,eAAe,GAAGX,qBAAqB,CAACG,KAAK,CAAC;EAEpD,IAAI,CAACE,QAAQ,IAAI,CAACA,QAAQ,CAACO,MAAM,EAAE,OAAO,IAAI;EAC9C,MAAMC,oBAAoB,GAAGP,kBAAkB,IAAIF,OAAO;EAE1D,MAAM;IAAEU,kBAAkB;IAAEC;EAAa,CAAC,GAAGd,mBAAmB,CAC9DU,eAAe,CAACK,SAAS,EACzBX,QACF,CAAC;EAED,MAAMY,iBAAiB,GAAGV,gBAAgB,IAAIR,cAAc;EAE5D,oBACEH,KAAA,CAAAsB,aAAA,CAACD,iBAAiB,EAAAE,QAAA;IAChBf,OAAO,EAAEA,OAAQ;IACjBC,QAAQ,EAAEA,QAAS;IACnBP,aAAa,EAAEA,aAAc;IAC7Be,oBAAoB,EAAEA,oBAAqB;IAC3CC,kBAAkB,EAAEA,kBAAmB;IACvCC,YAAY,EAAEA;EAAa,GACvBJ,eAAe,EACfH,UAAU,CACf,CAAC;AAEN,CAAC;AAEDN,QAAQ,CAACkB,SAAS,GAAG;EACnBhB,OAAO,EAAEP,SAAS,CAACwB,MAAM;EACzBhB,QAAQ,EAAER,SAAS,CAACyB,KAAK;EACzBhB,kBAAkB,EAAET,SAAS,CAAC0B,IAAI;EAClChB,gBAAgB,EAAEV,SAAS,CAAC2B;AAC9B,CAAC;AAEDtB,QAAQ,CAACuB,YAAY,GAAG;EACtBlB,gBAAgB,EAAE,IAAI;EACtBH,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,kBAAkB,EAAE;AACtB,CAAC;AAED,eAAeJ,QAAQ"}

package/lib-es/components/Carousel/CarouselRender/CarouselRender.js

@@ -1,66 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-const _excluded = ["imageIds", "displayCount", "priorityLimit"];
-import React, { useRef, useState } from 'react';
+const _excluded = ["handleNavigation", "imageIds", "listRef", "shouldDisplayCount", "shouldDisplayCaption", "caption", "countMessage", "direction", "priorityLimit"];
+import React from 'react';
 import PropTypes from 'prop-types';
 import CarouselImage from '../CarouselImage';
 import { withTitle } from '../../../HOC';
-import { getDisplayCountData } from '../../../helpers';
 const CarouselRender = _ref => {
   let {
+      handleNavigation,
       imageIds,
-      displayCount,
+      listRef,
+      shouldDisplayCount,
+      shouldDisplayCaption,
+      caption,
+      countMessage,
+      direction,
       priorityLimit
     } = _ref,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  const [showCount, setShowCount] = useState(displayCount);
-  const listRef = useRef(null);
-  const getListElement = () => {
-    if (!listRef) return null;
-    const {
-      current
-    } = listRef;
-    return current;
-  };
-  const moveScroll = (numberOfPixels, isNext) => {
-    const listElement = getListElement();
-    if (!listElement) return;
-    const totalDistance = listElement.scrollLeft + numberOfPixels;
-    const {
-      scrollLeft,
-      offsetWidth,
-      scrollWidth
-    } = listElement;
-    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;
-    const leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);
-    listElement.scrollTo({
-      top: 0,
-      left: leftPosition,
-      behavior: 'smooth'
-    });
-  };
-  const handleNavigation = direction => {
-    setShowCount(false);
-    const listElement = getListElement();
-    if (!listElement) return;
-    const {
-      scrollWidth
-    } = listElement;
-    const offset = scrollWidth / imageIds.length;
-    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);
-  };
-  const navigation = {
-    next: true,
-    back: false
-  };
-  const {
-    shouldDisplayCount,
-    countMessage
-  } = getDisplayCountData(showCount, imageIds);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "carousel"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "carousel__button carousel__button--previous",
     role: "button",
-    onClick: () => handleNavigation(navigation.back)
+    onClick: () => handleNavigation(direction.back)
   }, /*#__PURE__*/React.createElement("div", {
     className: "arrow arrow--left"
   })), /*#__PURE__*/React.createElement("div", {
@@ -73,19 +36,36 @@ const CarouselRender = _ref => {
   }, otherProps)))), /*#__PURE__*/React.createElement("div", {
     className: "carousel__button carousel__button--next",
     role: "button",
-    onClick: () => handleNavigation(navigation.next)
-  }, shouldDisplayCount && /*#__PURE__*/React.createElement("p", null, countMessage), /*#__PURE__*/React.createElement("div", {
+    onClick: () => handleNavigation(direction.next)
+  }, shouldDisplayCount && /*#__PURE__*/React.createElement("p", {
+    "data-testid": "count"
+  }, countMessage), /*#__PURE__*/React.createElement("div", {
     className: "arrow arrow--right"
-  })));
+  }))), shouldDisplayCaption && /*#__PURE__*/React.createElement("div", {
+    className: "carousel__details",
+    "data-testid": "carousel-details"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "caption"
+  }, caption)));
 };
 CarouselRender.propTypes = {
+  caption: PropTypes.string,
+  shouldDisplayCaption: PropTypes.bool.isRequired,
   imageIds: PropTypes.array,
   displayCount: PropTypes.bool,
+  listRef: PropTypes.object,
+  countMessage: PropTypes.number,
+  direction: PropTypes.object.isRequired,
+  handleNavigation: PropTypes.func.isRequired,
+  shouldDisplayCount: PropTypes.bool.isRequired,
   priorityLimit: PropTypes.number
 };
 CarouselRender.defaultProps = {
+  listRef: null,
   imageIds: [],
+  caption: '',
   displayCount: false,
+  countMessage: null,
   priorityLimit: 0
 };
 export default withTitle(CarouselRender);

package/lib-es/components/Carousel/CarouselRender/CarouselRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselRender.js","names":["React","useRef","useState","PropTypes","CarouselImage","withTitle","getDisplayCountData","CarouselRender","_ref","imageIds","displayCount","priorityLimit","otherProps","_objectWithoutProperties","_excluded","showCount","setShowCount","listRef","getListElement","current","moveScroll","numberOfPixels","isNext","listElement","totalDistance","scrollLeft","offsetWidth","scrollWidth","leftPosition","Math","max","scrollTo","top","left","behavior","handleNavigation","direction","offset","length","navigation","next","back","shouldDisplayCount","countMessage","createElement","Fragment","className","role","onClick","ref","map","imageId","index","_extends","key","priority","propTypes","array","bool","number","defaultProps"],"sources":["../../../../src/components/Carousel/CarouselRender/CarouselRender.js"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport CarouselImage from '../CarouselImage';\nimport { withTitle } from '../../../HOC';\nimport { getDisplayCountData } from '../../../helpers';\n\nconst CarouselRender = ({ imageIds, displayCount, priorityLimit, ...otherProps }) => {\n  const [showCount, setShowCount] = useState(displayCount);\n  const listRef = useRef(null);\n\n  const getListElement = () => {\n    if (!listRef) return null;\n    const { current } = listRef;\n    return current;\n  };\n\n  const moveScroll = (numberOfPixels, isNext) => {\n    const listElement = getListElement();\n    if (!listElement) return;\n\n    const totalDistance = listElement.scrollLeft + numberOfPixels;\n    const { scrollLeft, offsetWidth, scrollWidth } = listElement;\n    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;\n\n    const leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);\n\n    listElement.scrollTo({\n      top: 0,\n      left: leftPosition,\n      behavior: 'smooth'\n    });\n  };\n\n  const handleNavigation = direction => {\n    setShowCount(false);\n\n    const listElement = getListElement();\n    if (!listElement) return;\n\n    const { scrollWidth } = listElement;\n    const offset = scrollWidth / imageIds.length;\n\n    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);\n  };\n\n  const navigation = {\n    next: true,\n    back: false\n  };\n\n  const { shouldDisplayCount, countMessage } = getDisplayCountData(showCount, imageIds);\n\n  return (\n    <>\n      <div\n        className=\"carousel__button carousel__button--previous\"\n        role=\"button\"\n        onClick={() => handleNavigation(navigation.back)}>\n        <div className=\"arrow arrow--left\" />\n      </div>\n      <div className=\"carousel__list\" ref={listRef}>\n        {imageIds.map((imageId, index) => (\n          <CarouselImage\n            key={imageId}\n            priority={index < priorityLimit}\n            imageId={imageId}\n            {...otherProps}\n          />\n        ))}\n      </div>\n      <div\n        className=\"carousel__button carousel__button--next\"\n        role=\"button\"\n        onClick={() => handleNavigation(navigation.next)}>\n        {shouldDisplayCount && <p>{countMessage}</p>}\n        <div className=\"arrow arrow--right\" />\n      </div>\n    </>\n  );\n};\n\nCarouselRender.propTypes = {\n  imageIds: PropTypes.array,\n  displayCount: PropTypes.bool,\n  priorityLimit: PropTypes.number\n};\n\nCarouselRender.defaultProps = {\n  imageIds: [],\n  displayCount: false,\n  priorityLimit: 0\n};\n\nexport default withTitle(CarouselRender);\n"],"mappings":"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"}
+{"version":3,"file":"CarouselRender.js","names":["React","PropTypes","CarouselImage","withTitle","CarouselRender","_ref","handleNavigation","imageIds","listRef","shouldDisplayCount","shouldDisplayCaption","caption","countMessage","direction","priorityLimit","otherProps","_objectWithoutProperties","_excluded","createElement","className","role","onClick","back","ref","map","imageId","index","_extends","key","priority","next","propTypes","string","bool","isRequired","array","displayCount","object","number","func","defaultProps"],"sources":["../../../../src/components/Carousel/CarouselRender/CarouselRender.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CarouselImage from '../CarouselImage';\nimport { withTitle } from '../../../HOC';\n\nconst CarouselRender = ({\n  handleNavigation,\n  imageIds,\n  listRef,\n  shouldDisplayCount,\n  shouldDisplayCaption,\n  caption,\n  countMessage,\n  direction,\n  priorityLimit,\n  ...otherProps\n}) => (\n  <div className=\"carousel\">\n    <div>\n      <div\n        className=\"carousel__button carousel__button--previous\"\n        role=\"button\"\n        onClick={() => handleNavigation(direction.back)}>\n        <div className=\"arrow arrow--left\" />\n      </div>\n      <div className=\"carousel__list\" ref={listRef}>\n        {imageIds.map((imageId, index) => (\n          <CarouselImage\n            key={imageId}\n            priority={index < priorityLimit}\n            imageId={imageId}\n            {...otherProps}\n          />\n        ))}\n      </div>\n      <div\n        className=\"carousel__button carousel__button--next\"\n        role=\"button\"\n        onClick={() => handleNavigation(direction.next)}>\n        {shouldDisplayCount && <p data-testid=\"count\">{countMessage}</p>}\n        <div className=\"arrow arrow--right\" />\n      </div>\n    </div>\n    {shouldDisplayCaption && (\n      <div className=\"carousel__details\" data-testid=\"carousel-details\">\n        <div className=\"caption\">{caption}</div>\n      </div>\n    )}\n  </div>\n);\n\nCarouselRender.propTypes = {\n  caption: PropTypes.string,\n  shouldDisplayCaption: PropTypes.bool.isRequired,\n  imageIds: PropTypes.array,\n  displayCount: PropTypes.bool,\n  listRef: PropTypes.object,\n  countMessage: PropTypes.number,\n  direction: PropTypes.object.isRequired,\n  handleNavigation: PropTypes.func.isRequired,\n  shouldDisplayCount: PropTypes.bool.isRequired,\n  priorityLimit: PropTypes.number\n};\n\nCarouselRender.defaultProps = {\n  listRef: null,\n  imageIds: [],\n  caption: '',\n  displayCount: false,\n  countMessage: null,\n  priorityLimit: 0\n};\n\nexport default withTitle(CarouselRender);\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,aAAa,MAAM,kBAAkB;AAC5C,SAASC,SAAS,QAAQ,cAAc;AAExC,MAAMC,cAAc,GAAGC,IAAA;EAAA,IAAC;MACtBC,gBAAgB;MAChBC,QAAQ;MACRC,OAAO;MACPC,kBAAkB;MAClBC,oBAAoB;MACpBC,OAAO;MACPC,YAAY;MACZC,SAAS;MACTC;IAEF,CAAC,GAAAT,IAAA;IADIU,UAAU,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAAA,oBAEbjB,KAAA,CAAAkB,aAAA;IAAKC,SAAS,EAAC;EAAU,gBACvBnB,KAAA,CAAAkB,aAAA,2BACElB,KAAA,CAAAkB,aAAA;IACEC,SAAS,EAAC,6CAA6C;IACvDC,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEA,CAAA,KAAMf,gBAAgB,CAACO,SAAS,CAACS,IAAI;EAAE,gBAChDtB,KAAA,CAAAkB,aAAA;IAAKC,SAAS,EAAC;EAAmB,CAAE,CACjC,CAAC,eACNnB,KAAA,CAAAkB,aAAA;IAAKC,SAAS,EAAC,gBAAgB;IAACI,GAAG,EAAEf;EAAQ,GAC1CD,QAAQ,CAACiB,GAAG,CAAC,CAACC,OAAO,EAAEC,KAAK,kBAC3B1B,KAAA,CAAAkB,aAAA,CAAChB,aAAa,EAAAyB,QAAA;IACZC,GAAG,EAAEH,OAAQ;IACbI,QAAQ,EAAEH,KAAK,GAAGZ,aAAc;IAChCW,OAAO,EAAEA;EAAQ,GACbV,UAAU,CACf,CACF,CACE,CAAC,eACNf,KAAA,CAAAkB,aAAA;IACEC,SAAS,EAAC,yCAAyC;IACnDC,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEA,CAAA,KAAMf,gBAAgB,CAACO,SAAS,CAACiB,IAAI;EAAE,GAC/CrB,kBAAkB,iBAAIT,KAAA,CAAAkB,aAAA;IAAG,eAAY;EAAO,GAAEN,YAAgB,CAAC,eAChEZ,KAAA,CAAAkB,aAAA;IAAKC,SAAS,EAAC;EAAoB,CAAE,CAClC,CACF,CAAC,EACLT,oBAAoB,iBACnBV,KAAA,CAAAkB,aAAA;IAAKC,SAAS,EAAC,mBAAmB;IAAC,eAAY;EAAkB,gBAC/DnB,KAAA,CAAAkB,aAAA;IAAKC,SAAS,EAAC;EAAS,GAAER,OAAa,CACpC,CAEJ,CAAC;AAAA,CACP;AAEDP,cAAc,CAAC2B,SAAS,GAAG;EACzBpB,OAAO,EAAEV,SAAS,CAAC+B,MAAM;EACzBtB,oBAAoB,EAAET,SAAS,CAACgC,IAAI,CAACC,UAAU;EAC/C3B,QAAQ,EAAEN,SAAS,CAACkC,KAAK;EACzBC,YAAY,EAAEnC,SAAS,CAACgC,IAAI;EAC5BzB,OAAO,EAAEP,SAAS,CAACoC,MAAM;EACzBzB,YAAY,EAAEX,SAAS,CAACqC,MAAM;EAC9BzB,SAAS,EAAEZ,SAAS,CAACoC,MAAM,CAACH,UAAU;EACtC5B,gBAAgB,EAAEL,SAAS,CAACsC,IAAI,CAACL,UAAU;EAC3CzB,kBAAkB,EAAER,SAAS,CAACgC,IAAI,CAACC,UAAU;EAC7CpB,aAAa,EAAEb,SAAS,CAACqC;AAC3B,CAAC;AAEDlC,cAAc,CAACoC,YAAY,GAAG;EAC5BhC,OAAO,EAAE,IAAI;EACbD,QAAQ,EAAE,EAAE;EACZI,OAAO,EAAE,EAAE;EACXyB,YAAY,EAAE,KAAK;EACnBxB,YAAY,EAAE,IAAI;EAClBE,aAAa,EAAE;AACjB,CAAC;AAED,eAAeX,SAAS,CAACC,cAAc,CAAC"}

package/lib-es/components/Carousel/hooks/useCarouselNavigation.js

@@ -0,0 +1,49 @@
+import { useState, useRef } from 'react';
+export function useCarouselNavigation({
+  imageIds,
+  displayCount
+}) {
+  const [showCount, setShowCount] = useState(displayCount);
+  const listRef = useRef(null);
+  const getListElement = () => {
+    if (!listRef.current) return null;
+    return listRef.current;
+  };
+  const moveScroll = (numberOfPixels, isNext) => {
+    const listElement = getListElement();
+    if (!listElement) return;
+    const totalDistance = listElement.scrollLeft + numberOfPixels;
+    const {
+      scrollLeft,
+      offsetWidth,
+      scrollWidth
+    } = listElement;
+    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;
+    const leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);
+    listElement.scrollTo({
+      top: 0,
+      left: leftPosition,
+      behavior: 'smooth'
+    });
+  };
+  const handleNavigation = direction => {
+    setShowCount(false);
+    const listElement = getListElement();
+    if (!listElement) return;
+    const {
+      scrollWidth
+    } = listElement;
+    const offset = scrollWidth / imageIds.length;
+    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);
+  };
+  return {
+    listRef,
+    showCount,
+    handleNavigation,
+    direction: {
+      next: true,
+      back: false
+    }
+  };
+}
+//# sourceMappingURL=useCarouselNavigation.js.map

package/lib-es/components/Carousel/hooks/useCarouselNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCarouselNavigation.js","names":["useState","useRef","useCarouselNavigation","imageIds","displayCount","showCount","setShowCount","listRef","getListElement","current","moveScroll","numberOfPixels","isNext","listElement","totalDistance","scrollLeft","offsetWidth","scrollWidth","leftPosition","Math","max","scrollTo","top","left","behavior","handleNavigation","direction","offset","length","next","back"],"sources":["../../../../src/components/Carousel/hooks/useCarouselNavigation.js"],"sourcesContent":["import { useState, useRef } from 'react';\n\nexport function useCarouselNavigation({ imageIds, displayCount }) {\n  const [showCount, setShowCount] = useState(displayCount);\n  const listRef = useRef(null);\n\n  const getListElement = () => {\n    if (!listRef.current) return null;\n    return listRef.current;\n  };\n\n  const moveScroll = (numberOfPixels, isNext) => {\n    const listElement = getListElement();\n    if (!listElement) return;\n\n    const totalDistance = listElement.scrollLeft + numberOfPixels;\n    const { scrollLeft, offsetWidth, scrollWidth } = listElement;\n    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;\n\n    const leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);\n\n    listElement.scrollTo({\n      top: 0,\n      left: leftPosition,\n      behavior: 'smooth'\n    });\n  };\n\n  const handleNavigation = direction => {\n    setShowCount(false);\n\n    const listElement = getListElement();\n    if (!listElement) return;\n\n    const { scrollWidth } = listElement;\n    const offset = scrollWidth / imageIds.length;\n\n    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);\n  };\n\n  return {\n    listRef,\n    showCount,\n    handleNavigation,\n    direction: {\n      next: true,\n      back: false\n    }\n  };\n}\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,MAAM,QAAQ,OAAO;AAExC,OAAO,SAASC,qBAAqBA,CAAC;EAAEC,QAAQ;EAAEC;AAAa,CAAC,EAAE;EAChE,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGN,QAAQ,CAACI,YAAY,CAAC;EACxD,MAAMG,OAAO,GAAGN,MAAM,CAAC,IAAI,CAAC;EAE5B,MAAMO,cAAc,GAAGA,CAAA,KAAM;IAC3B,IAAI,CAACD,OAAO,CAACE,OAAO,EAAE,OAAO,IAAI;IACjC,OAAOF,OAAO,CAACE,OAAO;EACxB,CAAC;EAED,MAAMC,UAAU,GAAGA,CAACC,cAAc,EAAEC,MAAM,KAAK;IAC7C,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;IACpC,IAAI,CAACK,WAAW,EAAE;IAElB,MAAMC,aAAa,GAAGD,WAAW,CAACE,UAAU,GAAGJ,cAAc;IAC7D,MAAM;MAAEI,UAAU;MAAEC,WAAW;MAAEC;IAAY,CAAC,GAAGJ,WAAW;IAC5D,IAAID,MAAM,IAAII,WAAW,GAAGD,UAAU,IAAIE,WAAW,EAAE;IAEvD,MAAMC,YAAY,GAAGJ,aAAa,GAAG,CAAC,GAAG,CAAC,GAAGK,IAAI,CAACC,GAAG,CAAC,CAACL,UAAU,EAAED,aAAa,CAAC;IAEjFD,WAAW,CAACQ,QAAQ,CAAC;MACnBC,GAAG,EAAE,CAAC;MACNC,IAAI,EAAEL,YAAY;MAClBM,QAAQ,EAAE;IACZ,CAAC,CAAC;EACJ,CAAC;EAED,MAAMC,gBAAgB,GAAGC,SAAS,IAAI;IACpCpB,YAAY,CAAC,KAAK,CAAC;IAEnB,MAAMO,WAAW,GAAGL,cAAc,CAAC,CAAC;IACpC,IAAI,CAACK,WAAW,EAAE;IAElB,MAAM;MAAEI;IAAY,CAAC,GAAGJ,WAAW;IACnC,MAAMc,MAAM,GAAGV,WAAW,GAAGd,QAAQ,CAACyB,MAAM;IAE5CF,SAAS,GAAGhB,UAAU,CAACiB,MAAM,EAAED,SAAS,CAAC,GAAGhB,UAAU,CAAC,CAACiB,MAAM,EAAED,SAAS,CAAC;EAC5E,CAAC;EAED,OAAO;IACLnB,OAAO;IACPF,SAAS;IACToB,gBAAgB;IAChBC,SAAS,EAAE;MACTG,IAAI,EAAE,IAAI;MACVC,IAAI,EAAE;IACR;EACF,CAAC;AACH"}

package/lib-es/components/Layout/Layout.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-const _excluded = ["type", "children", "settings", "modifier", "backgroundImage", "tagType", "dataNoSnippet", "sticky"];
+const _excluded = ["type", "children", "settings", "modifier", "backgroundImage", "tagType", "dataNoSnippet", "sticky", "VariantComponent"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -21,7 +21,8 @@ const Layout = React.forwardRef((_ref, ref) => {
       backgroundImage,
       tagType,
       dataNoSnippet,
-      sticky
+      sticky,
+      VariantComponent
     } = _ref,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -45,7 +46,8 @@ const Layout = React.forwardRef((_ref, ref) => {
   if (type === COLUMN && !hasChildren(children)) return null;
   const otherWrapperProps = {};
   if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
+  const WrapperComponent = VariantComponent || Wrapper;
+  return /*#__PURE__*/React.createElement(WrapperComponent, _extends({
     ref: ref,
     tagType: tagType,
     className: type,
@@ -65,6 +67,7 @@ Layout.propTypes = {
   backgroundImage: PropTypes.string,
   tagType: PropTypes.string,
   dataNoSnippet: PropTypes.bool,
+  VariantComponent: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
 };
 Layout.defaultProps = {
@@ -75,7 +78,8 @@ Layout.defaultProps = {
   modifier: '',
   tagType: '',
   dataNoSnippet: false,
-  sticky: false
+  sticky: false,
+  VariantComponent: null
 };
 export default Layout;
 //# sourceMappingURL=Layout.js.map

package/lib-es/components/Layout/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","names":["React","PropTypes","Wrapper","getClassModifiers","useGetImages","getStylesToUpdate","checkIfRowHasColumns","renderChildren","hasChildren","COLUMN","Layout","forwardRef","_ref","ref","type","children","settings","modifier","backgroundImage","tagType","dataNoSnippet","sticky","otherProps","_objectWithoutProperties","_excluded","data","getFile","url","style","title","classModifiers","_objectSpread","additionalRowModifier","otherWrapperProps","createElement","_extends","className","modifiers","propTypes","string","isRequired","bool","shape","oneOfType","arrayOf","node","defaultProps"],"sources":["../../../src/components/Layout/Layout.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Wrapper from '../Wrapper';\nimport { getClassModifiers } from '../../utils';\nimport { useGetImages } from '../../hooks';\nimport { getStylesToUpdate, checkIfRowHasColumns } from './helpers';\nimport { renderChildren, hasChildren } from '../../helpers';\nimport { COLUMN } from '../../constants';\n\nconst Layout = React.forwardRef(\n  (\n    {\n      type,\n      children,\n      settings,\n      modifier,\n      backgroundImage,\n      tagType,\n      dataNoSnippet,\n      sticky,\n      ...otherProps\n    },\n    ref\n  ) => {\n    const {\n      data: { getFile: { url = null } = {} }\n    } = useGetImages(backgroundImage);\n\n    const style = getStylesToUpdate({ backgroundImage: url });\n    const { title } = settings;\n\n    const classModifiers = getClassModifiers(type, { modifier, sticky, ...otherProps });\n    const additionalRowModifier = checkIfRowHasColumns(type, children) ? ' display-row' : '';\n\n    if (type === COLUMN && !hasChildren(children)) return null;\n\n    const otherWrapperProps = {};\n    if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;\n\n    return (\n      <Wrapper\n        ref={ref}\n        tagType={tagType}\n        className={type}\n        modifiers={`${classModifiers}${additionalRowModifier}`}\n        style={style}\n        {...otherWrapperProps}>\n        {title && <h2 className=\"heading heading--section\">{title}</h2>}\n        {renderChildren(children, otherProps)}\n      </Wrapper>\n    );\n  }\n);\n\nLayout.propTypes = {\n  type: PropTypes.string.isRequired,\n  sticky: PropTypes.bool,\n  settings: PropTypes.shape({\n    title: PropTypes.string\n  }),\n  modifier: PropTypes.string,\n  backgroundImage: PropTypes.string,\n  tagType: PropTypes.string,\n  dataNoSnippet: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired\n};\n\nLayout.defaultProps = {\n  settings: {\n    title: ''\n  },\n  backgroundImage: '',\n  modifier: '',\n  tagType: '',\n  dataNoSnippet: false,\n  sticky: false\n};\n\nexport default Layout;\n"],"mappings":"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"}
+{"version":3,"file":"Layout.js","names":["React","PropTypes","Wrapper","getClassModifiers","useGetImages","getStylesToUpdate","checkIfRowHasColumns","renderChildren","hasChildren","COLUMN","Layout","forwardRef","_ref","ref","type","children","settings","modifier","backgroundImage","tagType","dataNoSnippet","sticky","VariantComponent","otherProps","_objectWithoutProperties","_excluded","data","getFile","url","style","title","classModifiers","_objectSpread","additionalRowModifier","otherWrapperProps","WrapperComponent","createElement","_extends","className","modifiers","propTypes","string","isRequired","bool","shape","func","oneOfType","arrayOf","node","defaultProps"],"sources":["../../../src/components/Layout/Layout.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Wrapper from '../Wrapper';\nimport { getClassModifiers } from '../../utils';\nimport { useGetImages } from '../../hooks';\nimport { getStylesToUpdate, checkIfRowHasColumns } from './helpers';\nimport { renderChildren, hasChildren } from '../../helpers';\nimport { COLUMN } from '../../constants';\n\nconst Layout = React.forwardRef(\n  (\n    {\n      type,\n      children,\n      settings,\n      modifier,\n      backgroundImage,\n      tagType,\n      dataNoSnippet,\n      sticky,\n      VariantComponent,\n      ...otherProps\n    },\n    ref\n  ) => {\n    const {\n      data: { getFile: { url = null } = {} }\n    } = useGetImages(backgroundImage);\n    const style = getStylesToUpdate({ backgroundImage: url });\n    const { title } = settings;\n    const classModifiers = getClassModifiers(type, { modifier, sticky, ...otherProps });\n    const additionalRowModifier = checkIfRowHasColumns(type, children) ? ' display-row' : '';\n\n    if (type === COLUMN && !hasChildren(children)) return null;\n\n    const otherWrapperProps = {};\n    if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;\n\n    const WrapperComponent = VariantComponent || Wrapper;\n\n    return (\n      <WrapperComponent\n        ref={ref}\n        tagType={tagType}\n        className={type}\n        modifiers={`${classModifiers}${additionalRowModifier}`}\n        style={style}\n        {...otherWrapperProps}>\n        {title && <h2 className=\"heading heading--section\">{title}</h2>}\n        {renderChildren(children, otherProps)}\n      </WrapperComponent>\n    );\n  }\n);\n\nLayout.propTypes = {\n  type: PropTypes.string.isRequired,\n  sticky: PropTypes.bool,\n  settings: PropTypes.shape({\n    title: PropTypes.string\n  }),\n  modifier: PropTypes.string,\n  backgroundImage: PropTypes.string,\n  tagType: PropTypes.string,\n  dataNoSnippet: PropTypes.bool,\n  VariantComponent: PropTypes.func,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired\n};\n\nLayout.defaultProps = {\n  settings: {\n    title: ''\n  },\n  backgroundImage: '',\n  modifier: '',\n  tagType: '',\n  dataNoSnippet: false,\n  sticky: false,\n  VariantComponent: null\n};\n\nexport default Layout;\n"],"mappings":"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"}

package/lib-es/components/SearchContent/SearchContent.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
@@ -6,7 +6,6 @@ import SearchContentResults from './SearchContentResults';
 import SearchContentToggleIcon from './SearchContentToggleIcon';
 const SearchContent = ({
   entities,
-  searchInputAlignment,
   searchInputWrapperMobile,
   searchInputWrapperDesktop,
   isMobile,
@@ -14,7 +13,9 @@ const SearchContent = ({
   modifier,
   collapsedSearch
 }) => {
+  const searchContentRef = useRef(null);
   const [collapsed, setCollapsed] = useState(collapsedSearch);
+  const [showResults, setShowResults] = useState(false);
   const router = useRouter();
   const {
     results,
@@ -27,14 +28,33 @@ const SearchContent = ({
     resultKeys: 'id, name, image { url }, url'
   });
   useEffect(() => {
-    const handleRouteChange = () => setSearchTerm('');
+    const handleRouteChange = () => {
+      setSearchTerm('');
+      setShowResults(false);
+      if (collapsedSearch) setCollapsed(true);
+    };
     router.events.on('routeChangeStart', handleRouteChange);
     return () => {
       router.events.off('routeChangeStart', handleRouteChange);
     };
-  }, [router.events, setSearchTerm]);
+  }, [collapsedSearch, router.events, setSearchTerm]);
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
+        setShowResults(false);
+        if (collapsedSearch) {
+          setCollapsed(true);
+          setSearchTerm('');
+        }
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [collapsedSearch, setSearchTerm]);
   const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
-  const handleClick = (e, url) => {
+  const handleNavigation = (e, url) => {
     e.preventDefault();
     router.push(url);
   };
@@ -43,63 +63,48 @@ const SearchContent = ({
       router.push(`/search?search_term=${e.target.value}`);
     }
   };
-  const handleOnBlur = () => {
-    if (!collapsedSearch) return;
-    if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
-  };
-  const handleClearSearchResults = () => {
-    setSearchTerm('');
+  const handleIconClick = () => {
+    const isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;
+    if (collapsedSearch) setCollapsed(!collapsed);
+    if (isCloseIcon) {
+      setSearchTerm('');
+      setShowResults(false);
+    } else {
+      setShowResults(true);
+    }
   };
   const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');
-  return collapsed ? /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "search-content--collapse__wrapper"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "search-content--collapse__label"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "search-content--collapse__icon_wrapper"
-  }, /*#__PURE__*/React.createElement("svg", {
-    className: "search-content--collapse__icon",
-    viewBox: "0 0 20 20"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
-    clipRule: "evenodd"
-  }))), /*#__PURE__*/React.createElement("input", {
-    onFocus: () => setCollapsed(false),
-    onChange: e => setSearchTerm(e.target.value),
-    type: "text",
-    name: "search",
-    className: "search-content--collapse__input"
-  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: className
+  const searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    ref: searchContentRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: "search-content--expanded__wrapper"
+    className: `${searchModifier}__wrapper`
   }, /*#__PURE__*/React.createElement("label", {
-    className: "search-content--expanded__label"
+    className: `${searchModifier}__label`
   }, /*#__PURE__*/React.createElement("span", {
-    className: "search-content--expanded__icon_wrapper"
+    className: `${searchModifier}__icon_wrapper`
   }, /*#__PURE__*/React.createElement(SearchContentToggleIcon, {
-    results: results,
-    onClear: handleClearSearchResults
-  })), /*#__PURE__*/React.createElement("input", {
+    searchTerm: debouncedSearchTerm,
+    onClick: handleIconClick,
+    useCloseIcon: collapsedSearch ? !collapsed : debouncedSearchTerm
+  })), !collapsed && /*#__PURE__*/React.createElement("input", {
+    className: `${searchModifier}__input`,
     type: "text",
     name: "search",
-    onChange: e => setSearchTerm(e.target.value),
-    onKeyPress: handleKeyPress,
-    className: "search-content--expanded__input",
     placeholder: placeholder,
     value: searchTerm,
-    onBlur: handleOnBlur
-  }))), /*#__PURE__*/React.createElement(SearchContentResults, {
+    onChange: e => setSearchTerm(e.target.value),
+    onKeyPress: handleKeyPress,
+    onFocus: () => setShowResults(true),
+    "data-testid": "search-content-input"
+  }))), showResults && /*#__PURE__*/React.createElement(SearchContentResults, {
     results: results,
     debouncedSearchTerm: debouncedSearchTerm,
-    handleClick: handleClick
-  })));
+    handleClick: handleNavigation
+  }));
 };
 SearchContent.propTypes = {
-  searchInputAlignment: PropTypes.string,
   searchInputWrapperMobile: PropTypes.string,
   searchInputWrapperDesktop: PropTypes.string,
   placeholder: PropTypes.string,
@@ -109,7 +114,6 @@ SearchContent.propTypes = {
   collapsedSearch: PropTypes.bool
 };
 SearchContent.defaultProps = {
-  searchInputAlignment: '',
   searchInputWrapperMobile: '',
   searchInputWrapperDesktop: '',
   placeholder: '',