npm - @anker-in/headless-ui - Versions diffs - 1.2.3-alpha.1778583232121 → 1.2.4 - Mend

@anker-in/headless-ui 1.2.3-alpha.1778583232121 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (265) hide show

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n    id,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n  const { trackingData } = useAiuiContext()\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n            `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n      </div>\n      <div\n        className={cn(\n          'absolute inset-0 z-20 flex flex-col',\n          spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n        )}\n      >\n        <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 flex w-fit flex-col gap-6 p-4\">\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                data-track={`${id}-link-left`}\n                onClick={() => {\n                  onSecondaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                data-track={`${id}-link-right`}\n                as=\"a\"\n                onClick={() => {\n                  onPrimaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n        {(video?.url || youtubeId) && (\n          <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us', trackingData } = useAiuiContext()\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      {...rest}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        locale,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{\n                      shape: shape,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      title: sectionTitle,\n                    }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{\n                    shape: shape,\n                    locale,\n                    onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    title: sectionTitle,\n                  }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  locale,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\n                },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "getLocalizedPath", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "useAiuiContext", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "trackingData", "MultiLayoutGraphicBlock", "props", "data", "className", "rest", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n    id,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n            `${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n      </div>\n      <div\n        className={cn(\n          'absolute inset-0 z-20 flex flex-col',\n          spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n        )}\n      >\n        <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 flex w-fit flex-col gap-6 p-4\">\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                data-track={`${id}-link-left`}\n                onClick={() => {\n                  onSecondaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                data-track={`${id}-link-right`}\n                as=\"a\"\n                onClick={() => {\n                  onPrimaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n        {(video?.url || youtubeId) && (\n          <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us' } = useAiuiContext()\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      {...rest}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        locale,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{\n                      shape: shape,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      title: sectionTitle,\n                    }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{\n                    shape: shape,\n                    locale,\n                    onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    title: sectionTitle,\n                  }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  locale,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\n                },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "getLocalizedPath", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "useAiuiContext", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "data", "className", "rest", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
 }

package/dist/esm/biz-components/NavigationSearch/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{Fragment as E,jsx as o,jsxs as s}from"react/jsx-runtime";import{Picture as w,Text as l,Button as j,Container as M,Link as v,Heading as L,Grid as V,GridItem as R}from"../../components/index.js";import{Search as J,Close as O}from"../HeaderNavigation/icons/index.js";import{forwardRef as Q,useCallback as C,useMemo as D,useState as F,useEffect as U,useRef as X}from"react";import{useAiuiContext as Y}from"../AiuiProvider/index.js";import{atobID as I,cn as g,getLocalizedPath as n,highlightSearchWord as Z}from"../../helpers/utils.js";import{withLayout as ee}from"../../shared/Styles.js";import{SearchStatus as h}from"./types.js";import{debounce as te}from"es-toolkit";const oe=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),S=Q(({data:t,onSearch:c,onClose:p,searchResult:i,isSearching:d,keywords:m,className:P,...T},B)=>{const{locale:a="us",copyWriting:ae}=Y(),[r,A]=F(""),[k,y]=F(!1),f=X(null);U(()=>{f.current&&f.current.focus({preventScroll:!0})},[]);const _=te(e=>{c(e)},300),z=C(e=>{e.key==="Enter"&&!k&&window.open(n(`${t?.moreLink}?q=${r.toLowerCase()}`,a),"_self")},[k,r,a,t?.moreLink]),W=D(()=>Array.isArray(m)&&m?.length?m.map(e=>e.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(e=>e.popularWord):[],[m,t?.popularWords]),q=C(e=>{switch(e.__typename||e.type){case"Product":return n(`/products${e.path}?q=${r.toLowerCase()}`,a);case"Article":return n(`/blogs/${e.blog.handle}/${e.handle.replace("storefront-","")}?q=${r.toLowerCase()}`,a);default:break}},[r,a]),N=D(()=>{if(r){if(i?.totalCount)return h.Predict;if(!d)return h.Empty}else return h.Default},[i?.totalCount,r,d]);return s(M,{childClassName:"!bg-white",...T,className:g("relative",P),ref:B,children:[o("style",{children:`
+import{Fragment as E,jsx as o,jsxs as s}from"react/jsx-runtime";import{Picture as w,Text as l,Button as j,Container as M,Link as v,Heading as L,Grid as V,GridItem as R}from"../../components/index.js";import{Search as J,Close as O}from"../HeaderNavigation/icons/index.js";import{forwardRef as Q,useCallback as C,useMemo as D,useState as F,useEffect as U,useRef as X}from"react";import{useAiuiContext as Y}from"../AiuiProvider/index.js";import{getLocalizedPath as n}from"../../helpers/utils.js";import{withLayout as Z}from"../../shared/Styles.js";import{SearchStatus as h}from"./types.js";import{debounce as ee}from"es-toolkit";import{cn as g,atobID as I,highlightSearchWord as te}from"../../helpers/utils.js";const oe=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),S=Q(({data:t,onSearch:c,onClose:p,searchResult:i,isSearching:d,keywords:m,className:P,...T},B)=>{const{locale:a="us",copyWriting:ae}=Y(),[r,A]=F(""),[k,y]=F(!1),f=X(null);U(()=>{f.current&&f.current.focus({preventScroll:!0})},[]);const _=ee(e=>{c(e)},300),z=C(e=>{e.key==="Enter"&&!k&&window.open(n(`${t?.moreLink}?q=${r.toLowerCase()}`,a),"_self")},[k,r,a,t?.moreLink]),W=D(()=>Array.isArray(m)&&m?.length?m.map(e=>e.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(e=>e.popularWord):[],[m,t?.popularWords]),q=C(e=>{switch(e.__typename||e.type){case"Product":return n(`/products${e.path}?q=${r.toLowerCase()}`,a);case"Article":return n(`/blogs/${e.blog.handle}/${e.handle.replace("storefront-","")}?q=${r.toLowerCase()}`,a);default:break}},[r,a]),N=D(()=>{if(r){if(i?.totalCount)return h.Predict;if(!d)return h.Empty}else return h.Default},[i?.totalCount,r,d]);return s(M,{childClassName:"!bg-white",...T,className:g("relative",P),ref:B,children:[o("style",{children:`
             .navigation-search-component input:-webkit-autofill,
             .navigation-search-component input:-webkit-autofill:hover,
             .navigation-search-component input:-webkit-autofill:focus {
@@ -7,5 +7,5 @@ import{Fragment as E,jsx as o,jsxs as s}from"react/jsx-runtime";import{Picture a
               transition: background-color 9999s ease-in-out 0s !important;
               caret-color: #000;
             }
-          `}),s("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black",children:[o("input",{ref:f,value:r,onCompositionStart:()=>y(!0),onCompositionEnd:()=>y(!1),onKeyDown:z,onChange:e=>{A(e.target.value),e.target.value&&_(e.target.value)},type:"text",className:"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none",placeholder:t?.placeholder}),s("div",{className:"flex items-center gap-3",children:[o(J,{className:"size-5 cursor-pointer",onClick:()=>c(r)}),o("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),o(O,{className:"size-5 cursor-pointer",onClick:p})]})]}),o("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:N===h.Predict?s(E,{children:[s("div",{children:[s("div",{className:"flex items-center gap-1",children:[o(l,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i?.items?.length>6&&o(j,{as:"a",iconClassName:"size-4",href:n(`${t?.moreLink}?q=${r.toLowerCase()}`,a),className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),o("div",{className:"mt-2 flex flex-col",children:i?.items?.filter(e=>oe(e)).slice(0,6)?.map(e=>o(v,{className:"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:q(e),children:o(l,{html:Z(e.title,r),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},e.id))})]}),s("div",{children:[o(l,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&o(v,{asChild:!t?.advertisingLink,href:n(t?.advertisingLink,a),children:s("div",{className:"rounded-sidebar-shelf relative",children:[o(w,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(L,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:g("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(l,{html:t?.advertisingSubtitle||"20.000mAh",className:g("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),i?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,t?.advertisingBgImg?.url?7:8)?.map(e=>{const u=e?.variants?.[0],b=`${u?.image?.url||e?.images?.[0]?.url}`,x=e?.title||e?.name,G=e?.description,H=e?.badge||"",K=n(`/products/${e?.handle}?variant=${I(u?.id)}`,a);return o($,{productImage:b,productName:x,productDesc:G,productBadge:H,listingLink:K},e.id)})]})]},"predict-advertising-card")]}):s(E,{children:[N===h.Empty&&o(l,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{children:[o(l,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"mt-2",children:[o(se,{data:t,keywords:W,locale:a}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&o(V,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(e=>o(R,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:o("a",{href:n(`${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,a),className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:e?.popularPage})},e?.id))})]})]}),s("div",{children:[o(l,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&o(v,{asChild:!t?.advertisingLink,href:n(t?.advertisingLink,a),children:s("div",{className:"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[o(w,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(L,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:g("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(l,{html:t?.advertisingSubtitle||"20.000mAh",className:g("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),t?.hotProducts?.slice(0,t?.advertisingBgImg?.url?7:8)?.map(e=>{const u=e?.custom_description,b=e?.badge||"",x=n(`/products/${e?.handle}?variant=${I(e?.shopify_id)}`,a);return o($,{productImage:e?.image,productName:e?.name,productDesc:u,productBadge:b,listingLink:x},e.shopify_id||e.id)})]})]},"empty-advertising-card")]})})]})});S.displayName="NavigationSearch";const $=({productImage:t,productName:c,productDesc:p,productBadge:i,className:d,listingLink:m})=>o(v,{href:m,className:"block no-underline hover:text-current",children:s("div",{className:g("rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",d),children:[o("div",{className:"shrink-0",children:o("img",{src:t,loading:"lazy",alt:c,width:90,height:90,className:"size-[96px] object-contain"})}),s("div",{className:"relative",children:[o("div",{className:" h-[24px] ",children:i&&o(l,{as:"p",html:i,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"})}),s("div",{children:[o(l,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:c}),p&&o(l,{as:"p",html:p,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]})}),se=({data:t,keywords:c,locale:p})=>o("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:c?.map((i,d)=>o("a",{href:n(`${t?.moreLink}?q=${i?.toLowerCase()}`,p),className:"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:i},d))});var ge=ee(S);export{oe as canSearch,ge as default};
+          `}),s("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black",children:[o("input",{ref:f,value:r,onCompositionStart:()=>y(!0),onCompositionEnd:()=>y(!1),onKeyDown:z,onChange:e=>{A(e.target.value),e.target.value&&_(e.target.value)},type:"text",className:"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none",placeholder:t?.placeholder}),s("div",{className:"flex items-center gap-3",children:[o(J,{className:"size-5 cursor-pointer",onClick:()=>c(r)}),o("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),o(O,{className:"size-5 cursor-pointer",onClick:p})]})]}),o("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:N===h.Predict?s(E,{children:[s("div",{children:[s("div",{className:"flex items-center gap-1",children:[o(l,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i?.items?.length>6&&o(j,{as:"a",iconClassName:"size-4",href:n(`${t?.moreLink}?q=${r.toLowerCase()}`,a),className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),o("div",{className:"mt-2 flex flex-col",children:i?.items?.filter(e=>oe(e)).slice(0,6)?.map(e=>o(v,{className:"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:q(e),children:o(l,{html:te(e.title,r),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},e.id))})]}),s("div",{children:[o(l,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&o(v,{asChild:!t?.advertisingLink,href:n(t?.advertisingLink,a),children:s("div",{className:"rounded-sidebar-shelf relative",children:[o(w,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(L,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:g("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(l,{html:t?.advertisingSubtitle||"20.000mAh",className:g("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),i?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,t?.advertisingBgImg?.url?7:8)?.map(e=>{const u=e?.variants?.[0],b=`${u?.image?.url||e?.images?.[0]?.url}`,x=e?.title||e?.name,G=e?.description,H=e?.badge||"",K=n(`/products/${e?.handle}?variant=${I(u?.id)}`,a);return o($,{productImage:b,productName:x,productDesc:G,productBadge:H,listingLink:K},e.id)})]})]},"predict-advertising-card")]}):s(E,{children:[N===h.Empty&&o(l,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{children:[o(l,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"mt-2",children:[o(se,{data:t,keywords:W,locale:a}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&o(V,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(e=>o(R,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:o("a",{href:n(`${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,a),className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:e?.popularPage})},e?.id))})]})]}),s("div",{children:[o(l,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&o(v,{asChild:!t?.advertisingLink,href:n(t?.advertisingLink,a),children:s("div",{className:"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[o(w,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(L,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:g("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(l,{html:t?.advertisingSubtitle||"20.000mAh",className:g("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),t?.hotProducts?.slice(0,t?.advertisingBgImg?.url?7:8)?.map(e=>{const u=e?.custom_description,b=e?.badge||"",x=n(`/products/${e?.handle}?variant=${I(e?.shopify_id)}`,a);return o($,{productImage:e?.image,productName:e?.name,productDesc:u,productBadge:b,listingLink:x},e.shopify_id||e.id)})]})]},"empty-advertising-card")]})})]})});S.displayName="NavigationSearch";const $=({productImage:t,productName:c,productDesc:p,productBadge:i,className:d,listingLink:m})=>o(v,{href:m,className:"block no-underline hover:text-current",children:s("div",{className:g("rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",d),children:[o("div",{className:"shrink-0",children:o("img",{src:t,loading:"lazy",alt:c,width:90,height:90,className:"size-[96px] object-contain"})}),s("div",{className:"relative",children:[o("div",{className:" h-[24px] ",children:i&&o(l,{as:"p",html:i,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"})}),s("div",{children:[o(l,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:c}),p&&o(l,{as:"p",html:p,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]})}),se=({data:t,keywords:c,locale:p})=>o("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:c?.map((i,d)=>o("a",{href:n(`${t?.moreLink}?q=${i?.toLowerCase()}`,p),className:"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:i},d))});var ue=Z(S);export{oe as canSearch,ue as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/NavigationSearch/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/NavigationSearch/index.tsx"],
-  "sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { atobID, cn, getLocalizedPath, highlightSearchWord } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\n\nexport const canSearch = (target: any) => {\n  return !(\n    target.metafields?.global?.HideSearch ||\n    target.metafields?.seo?.hidden ||\n    target.metafields?.seo?.setting?.noindex\n  )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n  ({ data, onSearch, onClose, searchResult, isSearching, keywords, className, ...rest }, ref) => {\n    const { locale = 'us', copyWriting } = useAiuiContext()\n\n    const [searchValue, setSearchValue] = useState('')\n    const [isComposing, setIsComposing] = useState(false)\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    // \u81EA\u52A8\u805A\u7126\u5230\u8F93\u5165\u6846\uFF08\u963B\u6B62\u6EDA\u52A8\u884C\u4E3A\uFF09\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.focus({ preventScroll: true })\n      }\n    }, [])\n\n    const debouncedFunction = debounce((value: string) => {\n      onSearch(value)\n    }, 300)\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && !isComposing) {\n          window.open(getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale), '_self')\n        }\n      },\n      [isComposing, searchValue, locale, data?.moreLink]\n    )\n\n    const searchKeywords = useMemo(() => {\n      if (Array.isArray(keywords) && keywords?.length) {\n        return keywords.map((keyword: any) => keyword.search_term)\n      }\n      if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n        return data?.popularWords.map((word: any) => word.popularWord)\n      }\n      return []\n    }, [keywords, data?.popularWords])\n\n    const getLink = useCallback(\n      (item: any) => {\n        const type = item.__typename || item.type\n        switch (type) {\n          case 'Product':\n            return getLocalizedPath(`/products${item.path}?q=${searchValue.toLowerCase()}`, locale)\n          case 'Article':\n            return getLocalizedPath(\n              `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`,\n              locale\n            )\n          default:\n            break\n        }\n      },\n      [searchValue, locale]\n    )\n\n    const searchStatus = useMemo(() => {\n      if (!searchValue) {\n        // \u6CA1\u6709\u641C\u7D22\u503C\n        return SearchStatus.Default\n      } else if (searchResult?.totalCount) {\n        // \u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Predict\n      } else if (!isSearching) {\n        // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Empty\n      }\n    }, [searchResult?.totalCount, searchValue, isSearching])\n\n    return (\n      <Container childClassName=\"!bg-white\" {...rest} className={cn('relative', className)} ref={ref}>\n        <style>\n          {`\n            .navigation-search-component input:-webkit-autofill,\n            .navigation-search-component input:-webkit-autofill:hover,\n            .navigation-search-component input:-webkit-autofill:focus {\n              -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n              -webkit-text-fill-color: #000 !important;\n              transition: background-color 9999s ease-in-out 0s !important;\n              caret-color: #000;\n            }\n          `}\n        </style>\n        <div className=\"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black\">\n          <input\n            ref={inputRef}\n            value={searchValue}\n            onCompositionStart={() => setIsComposing(true)}\n            onCompositionEnd={() => setIsComposing(false)}\n            onKeyDown={handleKeyDown}\n            onChange={e => {\n              setSearchValue(e.target.value)\n              if (e.target.value) {\n                debouncedFunction(e.target.value)\n              }\n            }}\n            type=\"text\"\n            className=\"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none\"\n            placeholder={data?.placeholder}\n          />\n          <div className=\"flex items-center gap-3\">\n            <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n            <div className=\"h-[20px] w-px bg-[#E4E5E6]\" />\n            <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n          </div>\n        </div>\n        <div className=\"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black\">\n          {searchStatus === SearchStatus.Predict ? (\n            <>\n              <div>\n                <div className=\"flex items-center gap-1\">\n                  <Text html={data?.suggestText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                  {searchResult?.items?.length > 6 && (\n                    <Button\n                      as=\"a\"\n                      iconClassName=\"size-4\"\n                      href={getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale)}\n                      className=\"!p-0 !text-sm font-bold leading-[1.2]\"\n                      variant=\"link\"\n                    >\n                      {data?.moreText}\n                    </Button>\n                  )}\n                </div>\n                <div className=\"mt-2 flex flex-col\">\n                  {searchResult?.items\n                    ?.filter((item: any) => canSearch(item))\n                    .slice(0, 6)\n                    ?.map((item: any) => (\n                      <Link\n                        className=\"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current\"\n                        href={getLink(item)}\n                        key={item.id}\n                      >\n                        <Text\n                          html={highlightSearchWord(item.title, searchValue)}\n                          className=\"cursor-pointer text-sm font-bold leading-[1.4]\"\n                        />\n                      </Link>\n                    ))}\n                </div>\n              </div>\n              <div key=\"predict-advertising-card\">\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf relative\">\n                        <Picture\n                          source={data?.advertisingBgImg?.url}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={data?.advertisingTitle || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={data?.advertisingSubtitle || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {searchResult?.items\n                    ?.filter((item: any) => item.type.toLowerCase() === 'product')\n                    .slice(0, data?.advertisingBgImg?.url ? 7 : 8)\n                    ?.map((item: any) => {\n                      const variant = item?.variants?.[0]\n                      const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n                      const productName = item?.title || item?.name\n                      const productDesc = item?.description\n                      const productBadge = item?.badge || ''\n                      const listingLink = getLocalizedPath(\n                        `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`,\n                        locale\n                      )\n                      return (\n                        <SearchProduct\n                          productImage={productImage}\n                          productName={productName}\n                          productDesc={productDesc}\n                          productBadge={productBadge}\n                          listingLink={listingLink}\n                          key={item.id}\n                        />\n                      )\n                    })}\n                </div>\n              </div>\n            </>\n          ) : (\n            <>\n              {searchStatus === SearchStatus.Empty && (\n                <Text\n                  html={data?.noResultText}\n                  as=\"p\"\n                  className=\"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                />\n              )}\n              <div>\n                <Text html={data?.popularText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"mt-2\">\n                  <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n                  {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n                    <Grid className=\"laptop:gap-4 laptop:mt-4 mt-3 gap-3\">\n                      {data?.popularPages?.map((item: any) => (\n                        <GridItem\n                          key={item?.id}\n                          className=\"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]\"\n                        >\n                          <a\n                            href={getLocalizedPath(`${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`, locale)}\n                            className=\"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]\"\n                          >\n                            {item?.popularPage}\n                          </a>\n                        </GridItem>\n                      ))}\n                    </Grid>\n                  )}\n                </div>\n              </div>\n              <div key=\"empty-advertising-card\">\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n                        <Picture\n                          source={data?.advertisingBgImg?.url}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={data?.advertisingTitle || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={data?.advertisingSubtitle || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {data?.hotProducts?.slice(0, data?.advertisingBgImg?.url ? 7 : 8)?.map((item: any) => {\n                    const productDesc = item?.custom_description\n                    const productBadge = item?.badge || ''\n                    const listingLink = getLocalizedPath(\n                      `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`,\n                      locale\n                    )\n                    return (\n                      <SearchProduct\n                        productImage={item?.image}\n                        productName={item?.name}\n                        productDesc={productDesc}\n                        productBadge={productBadge}\n                        listingLink={listingLink}\n                        key={item.shopify_id || item.id}\n                      />\n                    )\n                  })}\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n      </Container>\n    )\n  }\n)\n\nNavigationSearch.displayName = 'NavigationSearch'\n\nconst SearchProduct = ({\n  productImage,\n  productName,\n  productDesc,\n  productBadge,\n  className,\n  listingLink,\n}: {\n  productImage: string\n  productName: string\n  productDesc: string\n  productBadge: string\n  className?: string\n  listingLink: string\n}) => {\n  return (\n    <Link href={listingLink} className=\"block no-underline hover:text-current\">\n      <div\n        className={cn(\n          'rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500',\n          className\n        )}\n      >\n        <div className=\"shrink-0\">\n          <img\n            src={productImage}\n            loading=\"lazy\"\n            alt={productName}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\n          />\n        </div>\n        <div className=\"relative\">\n          <div className=\" h-[24px] \">\n            {productBadge && (\n              <Text\n                as=\"p\"\n                html={productBadge}\n                className=\"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n              />\n            )}\n          </div>\n          <div>\n            <Text\n              className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n              html={productName}\n            />\n            {productDesc && (\n              <Text\n                as=\"p\"\n                html={productDesc}\n                className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n              />\n            )}\n          </div>\n        </div>\n      </div>\n    </Link>\n  )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n  return (\n    <div className=\"laptop:gap-4 flex flex-wrap gap-3\">\n      {keywords?.map((keyword: any, index) => (\n        <a\n          href={getLocalizedPath(`${data?.moreLink}?q=${keyword?.toLowerCase()}`, locale)}\n          key={index}\n          className=\"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]\"\n        >\n          {keyword}\n        </a>\n      ))}\n    </div>\n  )\n}\n\nexport default withLayout(NavigationSearch)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Button", "Container", "Link", "Heading", "Grid", "GridItem", "SearchIcon", "CloseIcon", "forwardRef", "useCallback", "useMemo", "useState", "useEffect", "useRef", "useAiuiContext", "atobID", "cn", "getLocalizedPath", "highlightSearchWord", "withLayout", "SearchStatus", "debounce", "canSearch", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "className", "rest", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "inputRef", "debouncedFunction", "value", "handleKeyDown", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "index", "NavigationSearch_default"]
+  "sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n  return !(\n    target.metafields?.global?.HideSearch ||\n    target.metafields?.seo?.hidden ||\n    target.metafields?.seo?.setting?.noindex\n  )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n  ({ data, onSearch, onClose, searchResult, isSearching, keywords, className, ...rest }, ref) => {\n    const { locale = 'us', copyWriting } = useAiuiContext()\n\n    const [searchValue, setSearchValue] = useState('')\n    const [isComposing, setIsComposing] = useState(false)\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    // \u81EA\u52A8\u805A\u7126\u5230\u8F93\u5165\u6846\uFF08\u963B\u6B62\u6EDA\u52A8\u884C\u4E3A\uFF09\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.focus({ preventScroll: true })\n      }\n    }, [])\n\n    const debouncedFunction = debounce((value: string) => {\n      onSearch(value)\n    }, 300)\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && !isComposing) {\n          window.open(getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale), '_self')\n        }\n      },\n      [isComposing, searchValue, locale, data?.moreLink]\n    )\n\n    const searchKeywords = useMemo(() => {\n      if (Array.isArray(keywords) && keywords?.length) {\n        return keywords.map((keyword: any) => keyword.search_term)\n      }\n      if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n        return data?.popularWords.map((word: any) => word.popularWord)\n      }\n      return []\n    }, [keywords, data?.popularWords])\n\n    const getLink = useCallback(\n      (item: any) => {\n        const type = item.__typename || item.type\n        switch (type) {\n          case 'Product':\n            return getLocalizedPath(`/products${item.path}?q=${searchValue.toLowerCase()}`, locale)\n          case 'Article':\n            return getLocalizedPath(\n              `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`,\n              locale\n            )\n          default:\n            break\n        }\n      },\n      [searchValue, locale]\n    )\n\n    const searchStatus = useMemo(() => {\n      if (!searchValue) {\n        // \u6CA1\u6709\u641C\u7D22\u503C\n        return SearchStatus.Default\n      } else if (searchResult?.totalCount) {\n        // \u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Predict\n      } else if (!isSearching) {\n        // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Empty\n      }\n    }, [searchResult?.totalCount, searchValue, isSearching])\n\n    return (\n      <Container childClassName=\"!bg-white\" {...rest} className={cn('relative', className)} ref={ref}>\n        <style>\n          {`\n            .navigation-search-component input:-webkit-autofill,\n            .navigation-search-component input:-webkit-autofill:hover,\n            .navigation-search-component input:-webkit-autofill:focus {\n              -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n              -webkit-text-fill-color: #000 !important;\n              transition: background-color 9999s ease-in-out 0s !important;\n              caret-color: #000;\n            }\n          `}\n        </style>\n        <div className=\"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black\">\n          <input\n            ref={inputRef}\n            value={searchValue}\n            onCompositionStart={() => setIsComposing(true)}\n            onCompositionEnd={() => setIsComposing(false)}\n            onKeyDown={handleKeyDown}\n            onChange={e => {\n              setSearchValue(e.target.value)\n              if (e.target.value) {\n                debouncedFunction(e.target.value)\n              }\n            }}\n            type=\"text\"\n            className=\"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none\"\n            placeholder={data?.placeholder}\n          />\n          <div className=\"flex items-center gap-3\">\n            <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n            <div className=\"h-[20px] w-px bg-[#E4E5E6]\" />\n            <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n          </div>\n        </div>\n        <div className=\"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black\">\n          {searchStatus === SearchStatus.Predict ? (\n            <>\n              <div>\n                <div className=\"flex items-center gap-1\">\n                  <Text html={data?.suggestText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                  {searchResult?.items?.length > 6 && (\n                    <Button\n                      as=\"a\"\n                      iconClassName=\"size-4\"\n                      href={getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale)}\n                      className=\"!p-0 !text-sm font-bold leading-[1.2]\"\n                      variant=\"link\"\n                    >\n                      {data?.moreText}\n                    </Button>\n                  )}\n                </div>\n                <div className=\"mt-2 flex flex-col\">\n                  {searchResult?.items\n                    ?.filter((item: any) => canSearch(item))\n                    .slice(0, 6)\n                    ?.map((item: any) => (\n                      <Link\n                        className=\"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current\"\n                        href={getLink(item)}\n                        key={item.id}\n                      >\n                        <Text\n                          html={highlightSearchWord(item.title, searchValue)}\n                          className=\"cursor-pointer text-sm font-bold leading-[1.4]\"\n                        />\n                      </Link>\n                    ))}\n                </div>\n              </div>\n              <div key=\"predict-advertising-card\">\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf relative\">\n                        <Picture\n                          source={data?.advertisingBgImg?.url}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={data?.advertisingTitle || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={data?.advertisingSubtitle || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {searchResult?.items\n                    ?.filter((item: any) => item.type.toLowerCase() === 'product')\n                    .slice(0, data?.advertisingBgImg?.url ? 7 : 8)\n                    ?.map((item: any) => {\n                      const variant = item?.variants?.[0]\n                      const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n                      const productName = item?.title || item?.name\n                      const productDesc = item?.description\n                      const productBadge = item?.badge || ''\n                      const listingLink = getLocalizedPath(\n                        `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`,\n                        locale\n                      )\n                      return (\n                        <SearchProduct\n                          productImage={productImage}\n                          productName={productName}\n                          productDesc={productDesc}\n                          productBadge={productBadge}\n                          listingLink={listingLink}\n                          key={item.id}\n                        />\n                      )\n                    })}\n                </div>\n              </div>\n            </>\n          ) : (\n            <>\n              {searchStatus === SearchStatus.Empty && (\n                <Text\n                  html={data?.noResultText}\n                  as=\"p\"\n                  className=\"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                />\n              )}\n              <div>\n                <Text html={data?.popularText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"mt-2\">\n                  <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n                  {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n                    <Grid className=\"laptop:gap-4 laptop:mt-4 mt-3 gap-3\">\n                      {data?.popularPages?.map((item: any) => (\n                        <GridItem\n                          key={item?.id}\n                          className=\"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]\"\n                        >\n                          <a\n                            href={getLocalizedPath(`${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`, locale)}\n                            className=\"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]\"\n                          >\n                            {item?.popularPage}\n                          </a>\n                        </GridItem>\n                      ))}\n                    </Grid>\n                  )}\n                </div>\n              </div>\n              <div key=\"empty-advertising-card\">\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n                        <Picture\n                          source={data?.advertisingBgImg?.url}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={data?.advertisingTitle || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={data?.advertisingSubtitle || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {data?.hotProducts?.slice(0, data?.advertisingBgImg?.url ? 7 : 8)?.map((item: any) => {\n                    const productDesc = item?.custom_description\n                    const productBadge = item?.badge || ''\n                    const listingLink = getLocalizedPath(\n                      `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`,\n                      locale\n                    )\n                    return (\n                      <SearchProduct\n                        productImage={item?.image}\n                        productName={item?.name}\n                        productDesc={productDesc}\n                        productBadge={productBadge}\n                        listingLink={listingLink}\n                        key={item.shopify_id || item.id}\n                      />\n                    )\n                  })}\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n      </Container>\n    )\n  }\n)\n\nNavigationSearch.displayName = 'NavigationSearch'\n\nconst SearchProduct = ({\n  productImage,\n  productName,\n  productDesc,\n  productBadge,\n  className,\n  listingLink,\n}: {\n  productImage: string\n  productName: string\n  productDesc: string\n  productBadge: string\n  className?: string\n  listingLink: string\n}) => {\n  return (\n    <Link href={listingLink} className=\"block no-underline hover:text-current\">\n      <div\n        className={cn(\n          'rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500',\n          className\n        )}\n      >\n        <div className=\"shrink-0\">\n          <img\n            src={productImage}\n            loading=\"lazy\"\n            alt={productName}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\n          />\n        </div>\n        <div className=\"relative\">\n          <div className=\" h-[24px] \">\n            {productBadge && (\n              <Text\n                as=\"p\"\n                html={productBadge}\n                className=\"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n              />\n            )}\n          </div>\n          <div>\n            <Text\n              className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n              html={productName}\n            />\n            {productDesc && (\n              <Text\n                as=\"p\"\n                html={productDesc}\n                className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n              />\n            )}\n          </div>\n        </div>\n      </div>\n    </Link>\n  )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n  return (\n    <div className=\"laptop:gap-4 flex flex-wrap gap-3\">\n      {keywords?.map((keyword: any, index) => (\n        <a\n          href={getLocalizedPath(`${data?.moreLink}?q=${keyword?.toLowerCase()}`, locale)}\n          key={index}\n          className=\"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]\"\n        >\n          {keyword}\n        </a>\n      ))}\n    </div>\n  )\n}\n\nexport default withLayout(NavigationSearch)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Button", "Container", "Link", "Heading", "Grid", "GridItem", "SearchIcon", "CloseIcon", "forwardRef", "useCallback", "useMemo", "useState", "useEffect", "useRef", "useAiuiContext", "getLocalizedPath", "withLayout", "SearchStatus", "debounce", "cn", "atobID", "highlightSearchWord", "canSearch", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "className", "rest", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "inputRef", "debouncedFunction", "value", "handleKeyDown", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "index", "NavigationSearch_default"]
 }

package/dist/esm/biz-components/ProductHero/ProductHero.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import g,{useRef as H,useImperativeHandle as N}from"react";import{Heading as p,Button as P,Picture as v,Text as w}from"../../components/index.js";import{cn as y,getLocalizedPath as T}from"../../helpers/utils.js";import{withLayout as L}from"../../shared/Styles.js";import{useExposure as D}from"../../hooks/useExposure.js";import{trackUrlRef as R}from"../../shared/trackUrlRef.js";import{useAiuiContext as $}from"../AiuiProvider/index.js";const l="image",c="product_hero",i=g.forwardRef(({data:m,className:n},u)=>{const{title:a,subtitle:e,ctaText:s,poster:d,mobPoster:f,ctaLink:h,theme:x="light"}=m,{locale:b="us",trackingData:_}=$(),k=_?.contextHandle||"",o=H(null);return D(o,{componentType:l,componentName:c,componentTitle:a,componentDescription:e}),N(u,()=>o.current),r("section",{ref:o,"data-ui-component-id":"ProductHero",className:y("product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]",{"aiui-dark":x==="dark"},n),children:[r("div",{className:"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]",children:[r("div",{className:"product-hero__text",children:[t(p,{as:"h3",size:4,html:a,className:"product-hero__title"}),t(p,{as:"h4",size:2,html:e,className:"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden"}),t(w,{as:"p",size:2,html:e,className:"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block"})]}),s&&t("a",{href:R(T(h,b),`${k}_${l}_${c}`),className:"product-hero__cta-link",children:t(P,{className:"product-hero__cta-button w-fit",children:s})})]}),t(v,{className:"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink",source:`${d?.url}, ${f?.url} 768`,imgClassName:"h-full object-cover"})]})});i.displayName="ProductHero";var I=L(i);export{I as default};
+"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import f,{useRef as b,useImperativeHandle as x}from"react";import{Heading as p,Button as _,Picture as N,Text as k}from"../../components/index.js";import{cn as g}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import{useExposure as v}from"../../hooks/useExposure.js";const P="image",w="product_hero",l=f.forwardRef(({data:c,className:i},m)=>{const{title:s,subtitle:e,ctaText:a,poster:u,mobPoster:n,ctaLink:d,theme:h="light"}=c,o=b(null);return v(o,{componentType:P,componentName:w,componentTitle:s,componentDescription:e}),x(m,()=>o.current),r("section",{ref:o,"data-ui-component-id":"ProductHero",className:g("product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]",{"aiui-dark":h==="dark"},i),children:[r("div",{className:"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]",children:[r("div",{className:"product-hero__text",children:[t(p,{as:"h3",size:4,html:s,className:"product-hero__title"}),t(p,{as:"h4",size:2,html:e,className:"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden"}),t(k,{as:"p",size:2,html:e,className:"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block"})]}),a&&t("a",{href:d,className:"product-hero__cta-link",children:t(_,{className:"product-hero__cta-button w-fit",children:a})})]}),t(N,{className:"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink",source:`${u?.url}, ${n?.url} 768`,imgClassName:"h-full object-cover"})]})});l.displayName="ProductHero";var R=H(l);export{R as default};
 //# sourceMappingURL=ProductHero.js.map

package/dist/esm/biz-components/ProductHero/ProductHero.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductHero/ProductHero.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n  const { locale = 'us', trackingData } = useAiuiContext()\n  const contextHandle = trackingData?.contextHandle || ''\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\n        <div className=\"product-hero__text\">\n          <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n          />\n        </div>\n        {ctaText && (\n          <a\n            href={trackUrlRef(getLocalizedPath(ctaLink, locale), `${contextHandle}_${componentType}_${componentName}`)}\n            className=\"product-hero__cta-link\"\n          >\n            <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n          </a>\n        )}\n      </div>\n      <Picture\n        className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink\"\n        source={`${poster?.url}, ${mobPoster?.url} 768`}\n        imgClassName=\"h-full object-cover\"\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
-  "mappings": "aAyCQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBAxCR,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,EAAI,oBAAAC,MAAwB,yBACrC,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,kBAAAC,MAAsB,2BAG/B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAcf,EAAM,WAA6C,CAAC,CAAE,KAAAgB,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAC5E,CAAE,OAAAU,EAAS,KAAM,aAAAC,CAAa,EAAIf,EAAe,EACjDgB,EAAgBD,GAAc,eAAiB,GAC/CE,EAAS5B,EAAuB,IAAI,EAE1C,OAAAS,EAAYmB,EAAQ,CAClB,cAAAhB,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDlB,EAAoBgB,EAAK,IAAMW,EAAO,OAAyB,EAG7D9B,EAAC,WACC,IAAK8B,EACL,uBAAqB,cACrB,UAAWtB,EACT,sJACA,CACE,YAAakB,IAAU,MACzB,EACAR,CACF,EAEA,UAAAlB,EAAC,OAAI,UAAU,0GACb,UAAAA,EAAC,OAAI,UAAU,qBACb,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMgB,EAAO,UAAU,sBAAsB,EACzErB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMiB,EACN,UAAU,yHACZ,EACAtB,EAACQ,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMc,EACN,UAAU,wHACZ,GACF,EACCC,GACCvB,EAAC,KACC,KAAMa,EAAYH,EAAiBgB,EAASE,CAAM,EAAG,GAAGE,CAAa,IAAIf,CAAa,IAAIC,CAAa,EAAE,EACzG,UAAU,yBAEV,SAAAhB,EAACM,EAAA,CAAO,UAAU,iCAAkC,SAAAiB,EAAQ,EAC9D,GAEJ,EACAvB,EAACO,EAAA,CACC,UAAU,wHACV,OAAQ,GAAGiB,GAAQ,GAAG,KAAKC,GAAW,GAAG,OACzC,aAAa,sBACf,GACF,CAEJ,CAAC,EAEDR,EAAY,YAAc,cAE1B,IAAOe,EAAQrB,EAAWM,CAAW",
-  "names": ["jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Heading", "Button", "Picture", "Text", "cn", "getLocalizedPath", "withLayout", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "ProductHero", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "theme", "locale", "trackingData", "contextHandle", "boxRef", "ProductHero_default"]
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\n        <div className=\"product-hero__text\">\n          <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n          />\n        </div>\n        {ctaText && (\n          <a href={ctaLink} className=\"product-hero__cta-link\">\n            <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n          </a>\n        )}\n      </div>\n      <Picture\n        className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink\"\n        source={`${poster?.url}, ${mobPoster?.url} 768`}\n        imgClassName=\"h-full object-cover\"\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
+  "mappings": "aAsCQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBArCR,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAcZ,EAAM,WAA6C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAE5EU,EAAStB,EAAuB,IAAI,EAE1C,OAAAQ,EAAYc,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMQ,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,cACrB,UAAWhB,EACT,sJACA,CACE,YAAae,IAAU,MACzB,EACAR,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,0GACb,UAAAA,EAAC,OAAI,UAAU,qBACb,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,EAAO,UAAU,sBAAsB,EACzElB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,yHACZ,EACAnB,EAACQ,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,wHACZ,GACF,EACCC,GACCpB,EAAC,KAAE,KAAMuB,EAAS,UAAU,yBAC1B,SAAAvB,EAACM,EAAA,CAAO,UAAU,iCAAkC,SAAAc,EAAQ,EAC9D,GAEJ,EACApB,EAACO,EAAA,CACC,UAAU,wHACV,OAAQ,GAAGc,GAAQ,GAAG,KAAKC,GAAW,GAAG,OACzC,aAAa,sBACf,GACF,CAEJ,CAAC,EAEDR,EAAY,YAAc,cAE1B,IAAOY,EAAQhB,EAAWI,CAAW",
+  "names": ["jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Heading", "Button", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ProductHero", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "theme", "boxRef", "ProductHero_default"]
 }

package/dist/esm/biz-components/ProductLottery/types.d.ts CHANGED Viewed

@@ -4,12 +4,6 @@
  * 基于媒体展示（图片/视频）的抽奖组件，点击 CTA 按钮触发抽奖。
  * 共享类型来自 LotteryShared/types.ts。
  *
- * ## CMS 契约优先
- *
- * 本文件以 CMS block schema (`/src/blocks/ProductLottery/config.ts`) 作为
- * 首要文档契约，字段名与 CMS 对齐。旧版字段保留但标注 `@deprecated`，
- * 以维持向后兼容。CMS 端字段优先级高于同义旧版字段。
- *
  * @module ProductLotteryTypes
  * @date 2026-04-07
  */
@@ -184,46 +178,10 @@ export interface ProductLotteryHandle {
     /** 关闭所有弹窗 */
     hideAllModals: () => void;
 }
-/**
- * 错误弹窗配置（ErrorConfig）
- *
- * 对齐 CMS `error` group 字段结构。新代码使用此类型；
- * `errorModalConfig`（`ErrorModalConfig`）已废弃，保留仅供过渡期使用。
- *
- * CMS 字段映射:
- * - `title`                 → 错误标题
- * - `defaultMessage`        → 默认错误消息（对应渲染层的 `message`）
- * - `confirmButton`         → 确认按钮文案（对应渲染层的 `confirmText`）
- * - `exchangeFailedTitle`   → 兑换失败标题
- * - `exchangeFailedMessage` → 兑换失败消息
- */
-export interface ErrorConfig {
-    title?: string;
-    defaultMessage?: string;
-    confirmButton?: string;
-    exchangeFailedTitle?: string;
-    exchangeFailedMessage?: string;
-}
-/**
- * 未中奖弹窗配置（TryAgainConfig）
- *
- * 对齐 CMS `tryAgain` group 字段结构。
- *
- * CMS 字段映射:
- * - `title`       → 弹窗标题
- * - `message`     → 内容文案
- * - `confirmText` → 确认按钮文案
- */
-export interface TryAgainConfig {
-    title?: string;
-    message?: string;
-    confirmText?: string;
-}
 /**
  * MediaDrawArea 子组件 Props
  *
  * 媒体抽奖区域，展示图片/视频并叠加 CTA 按钮。
- * videoAutoPlay / videoMuted / videoLoop 为组件级运行时控制，CMS 不配置。
  */
 export interface MediaDrawAreaProps {
     /** 主题模式 */
@@ -266,18 +224,12 @@ export interface MediaDrawAreaProps {
  * 基于媒体展示的产品抽奖组件。左侧为可点击的媒体区域（图片/视频），
  * 右侧为获取机会区域，底部为奖品池。
  *
- * ## 字段命名策略（CMS-primary）
- *
- * 本接口以 CMS block schema 字段名为主名称。旧版命名以 `@deprecated` 标记，
- * 保留仅供过渡期使用。当 CMS 字段与旧版字段同时存在时，CMS 字段优先。
- *
  * @example
  * ```tsx
  * <ProductLottery
  *   prizes={prizes}
- *   media={{ type: 'image', image: { url: '/banner.jpg', alt: 'Lottery', thumbnailURL: '' } }}
+ *   media={{ type: 'image', src: '/banner.jpg', alt: 'Lottery' }}
  *   ctaButton={{ text: 'Draw Now' }}
- *   loginPrompt="Please sign in to join the draw"
  *   onDrawStart={async () => {
  *     const result = await fetch('/api/lottery')
  *     const data = await result.json()
@@ -388,10 +340,7 @@ export interface ProductLotteryProps {
      * 中奖弹窗配置（CMS: `winningInfos` group — 主名称）
      *
      * CMS 中 `winningInfos` 是中奖弹窗配置 group，字段：
-     * `title`、`confirmButton`（对应渲染层 confirmText）、`confirmUrl`、
-     * `learnMoreUrl`、`learnMoreText`。
-     *
-     * @note CMS 字段 `confirmButton` 对应组件渲染层的 `confirmText`。
+     * `title`、`confirmButton`、`confirmUrl`、`learnMoreUrl`、`learnMoreText`。
      */
     winningInfos?: WinnerModalConfig;
     /**
@@ -426,13 +375,7 @@ export interface ProductLotteryProps {
      * @param error 错误信息
      */
     onDrawError?: (error: Error) => void;
-    /**
-     * 中奖弹窗详细渲染配置（含 prizeTitle / prizeImage / couponCode 等）
-     *
-     * @note `winningInfos` is the CMS-primary equivalent for basic config, and `winnerModalConfig` is for extended UI config that overlays on top.
-     * 与 `winningInfos` 共同配置中奖弹窗。当两者同时存在时，此字段中的
-     * 同名属性优先级更高（逐字段合并，此字段覆盖 `winningInfos`）。
-     */
+    /** 中奖弹窗配置 */
     winnerModalConfig?: WinnerModalConfig;
     /** 规则弹窗配置 */
     rulesModalConfig?: RulesModalConfig;
@@ -453,13 +396,13 @@ export interface ProductLotteryProps {
      * 字段：`title`、`message`、`confirmText`。
      */
     tryAgain?: TryAgainConfig;
-    /** 分享弹窗配置 */
-    shareModalConfig?: ShareModalConfig;
     /**
      * 错误弹窗配置（旧版）
      * @deprecated Use `error` instead (CMS field name)
      */
     errorModalConfig?: ErrorModalConfig;
+    /** 分享弹窗配置 */
+    shareModalConfig?: ShareModalConfig;
     /**
      * 未登录时的提示文案（CMS: `loginPrompt`）
      * @default "Please log in to participate in the lottery"