@anker-in/headless-ui 1.1.70 → 1.1.72

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 (9) hide show
  1. package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
  2. package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
  3. package/dist/cjs/biz-components/ProductNav/ProductNav.js +1 -1
  4. package/dist/cjs/biz-components/ProductNav/ProductNav.js.map +3 -3
  5. package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
  6. package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
  7. package/dist/esm/biz-components/ProductNav/ProductNav.js +1 -1
  8. package/dist/esm/biz-components/ProductNav/ProductNav.js.map +3 -3
  9. package/package.json +1 -1
package/dist/cjs/biz-components/MediaPlayerMulti/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var S=Object.create;var p=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var Y=(e,t)=>{for(var i in t)p(e,i,{get:t[i],enumerable:!0})},h=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of _(t))!q.call(e,s)&&s!==i&&p(e,s,{get:()=>t[s],enumerable:!(a=U(t,s))||a.enumerable});return e};var v=(e,t,i)=>(i=e!=null?S(j(e)):{},h(t||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),Z=e=>h(p({},"__esModule",{value:!0}),e);var G={};Y(G,{default:()=>F});module.exports=Z(G);var l=require("react/jsx-runtime"),o=require("react"),g=require("../../helpers/utils.js"),w=require("../../shared/Styles.js"),r=require("../../components/index.js"),y=v(require("../Title/index.js")),M=v(require("../SwiperBox/index.js")),k=require("../../components/container.js"),P=require("../VideoModal/index.js"),N=require("@payloadcms/richtext-lexical/html"),T=require("../../hooks/useExposure.js"),L=require("../../shared/trackUrlRef.js");const m="video",d="media_player_multi",A=({data:e,configuration:t})=>{const i=(0,o.useRef)(null);return(0,T.useExposure)(i,{componentType:m,componentName:d,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.description}),(0,l.jsxs)("div",{ref:i,className:(0,g.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(r.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(t?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(r.Link,{asChild:!e?.href,href:(0,L.trackUrlRef)(e?.href,`${m}_${d}`),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,l.jsx)(r.Text,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},b=(0,o.forwardRef)(({data:{items:e=[],shape:t="square",title:i,containerProps:a},className:s="",key:I,onVideoPlayBtnClick:V,...B},C)=>{const[f,c]=(0,o.useState)(!1),[$,z]=(0,o.useState)(""),[D,E]=(0,o.useState)(""),u=typeof i=="string"?i:i&&(0,N.convertLexicalToHTML)({data:i}),H=(0,o.useRef)(null),x=e.length===2;return(0,l.jsxs)("div",{...B,ref:H,className:s,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(k.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:s,ref:C,children:[i&&(0,l.jsx)(y.default,{className:"mediaplayermulti-title",data:{title:u||""}}),(0,l.jsx)(M.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+I,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:(R,n)=>{c(!0),n?.isYouTube?E?.(n?.youtubeId||""):z?.(n?.video?.url||""),V?.(R)},title:u}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),f&&(0,l.jsx)(P.VideoModal,{visible:f,youTubeId:D,videoUrl:$,onCloseModal:()=>c(!1)})]})});b.displayName="MediaPlayerMulti";var F=(0,w.withLayout)(b);
1
+ "use strict";"use client";var S=Object.create;var p=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var Y=(e,t)=>{for(var i in t)p(e,i,{get:t[i],enumerable:!0})},b=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of _(t))!q.call(e,s)&&s!==i&&p(e,s,{get:()=>t[s],enumerable:!(a=U(t,s))||a.enumerable});return e};var g=(e,t,i)=>(i=e!=null?S(j(e)):{},b(t||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),Z=e=>b(p({},"__esModule",{value:!0}),e);var G={};Y(G,{default:()=>F});module.exports=Z(G);var l=require("react/jsx-runtime"),o=require("react"),y=require("../../helpers/utils.js"),M=require("../../shared/Styles.js"),r=require("../../components/index.js"),k=g(require("../Title/index.js")),P=g(require("../SwiperBox/index.js")),N=require("../../components/container.js"),T=require("../VideoModal/index.js"),L=require("@payloadcms/richtext-lexical/html"),I=require("../../hooks/useExposure.js"),V=require("../../shared/trackUrlRef.js");const m="video",d="media_player_multi",A=({data:e,configuration:t})=>{const i=(0,o.useRef)(null);return(0,I.useExposure)(i,{componentType:m,componentName:d,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.description}),(0,l.jsxs)("div",{ref:i,className:(0,y.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(r.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(t?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(r.Link,{asChild:!e?.href,href:(0,V.trackUrlRef)(e?.href,`${m}_${d}`),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,l.jsx)(r.Text,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},w=(0,o.forwardRef)(({data:{items:e=[],shape:t="square",title:i,containerProps:a},className:s="",key:B,onVideoPlayBtnClick:C,...$},z)=>{const[f,c]=(0,o.useState)(!1),[D,u]=(0,o.useState)(""),[E,x]=(0,o.useState)(""),h=typeof i=="string"?i:i&&(0,L.convertLexicalToHTML)({data:i}),H=(0,o.useRef)(null),v=e.length===2;return(0,l.jsxs)("div",{...$,ref:H,className:s,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(N.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:s,ref:z,children:[i&&(0,l.jsx)(k.default,{className:"mediaplayermulti-title",data:{title:h||""}}),(0,l.jsx)(P.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+B,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:(R,n)=>{c(!0),n?.isYouTube?(x(n?.youtubeId||""),u("")):(u(n?.video?.url||""),x("")),C?.(R)},title:h}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:v?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:v?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),f&&(0,l.jsx)(T.VideoModal,{visible:f,youTubeId:E,videoUrl:D,onCloseModal:()=>c(!1)})]})});w.displayName="MediaPlayerMulti";var F=(0,M.withLayout)(w);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.description,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-14 bg-opacity/20 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 )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n asChild={!data?.href}\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Text\n html={data.quote}\n weight=\"bold\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n />\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n {\n data: { items = [], shape = 'square', title, containerProps },\n className = '',\n key,\n onVideoPlayBtnClick,\n ...rest\n },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length === 2\n\n return (\n <div {...rest} ref={wrapperRef} className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: {\n shape,\n onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n }\n onVideoPlayBtnClick?.(_)\n },\n title: title_html,\n },\n }}\n Slide={MediaPlayerItem}\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: itemsLength ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n )\n }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.description,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-14 bg-opacity/20 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 )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n asChild={!data?.href}\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Text\n html={data.quote}\n weight=\"bold\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n />\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n {\n data: { items = [], shape = 'square', title, containerProps },\n className = '',\n key,\n onVideoPlayBtnClick,\n ...rest\n },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length === 2\n\n return (\n <div {...rest} ref={wrapperRef} className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: {\n shape,\n onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId(data?.youtubeId || '')\n setVideoUrl('')\n } else {\n setVideoUrl(data?.video?.url || '')\n setYouTubeId('')\n }\n onVideoPlayBtnClick?.(_)\n },\n title: title_html,\n },\n }}\n Slide={MediaPlayerItem}\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: itemsLength ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n )\n }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
5
+ "mappings": "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",
6
6
  "names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_container", "import_VideoModal", "import_html", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "ref", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "rest", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "itemsLength", "Title", "SwiperBox", "_"]
7
7
  }
package/dist/cjs/biz-components/ProductNav/ProductNav.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var A=Object.create;var b=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var V=(o,a)=>{for(var l in a)b(o,l,{get:a[l],enumerable:!0})},R=(o,a,l,v)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of j(a))!G.call(o,p)&&p!==l&&b(o,p,{get:()=>a[p],enumerable:!(v=I(a,p))||v.enumerable});return o};var _=(o,a,l)=>(l=o!=null?A(Y(o)):{},R(a||!o||!o.__esModule?b(l,"default",{value:o,enumerable:!0}):l,o)),$=o=>R(b({},"__esModule",{value:!0}),o);var K={};V(K,{default:()=>J});module.exports=$(K);var e=require("react/jsx-runtime"),s=require("react"),y=require("../../helpers/utils.js"),B=require("../../shared/Styles.js"),m=require("../../components/index.js"),C=require("../../hooks/useExposure.js"),T=_(require("@radix-ui/react-popover"));const F="navigation",q="product_nav",W=o=>(0,e.jsx)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o,children:(0,e.jsx)("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),S=(0,s.forwardRef)(({className:o="",data:a,id:l,onAnchorClick:v,scrollOffsetExtra:p=0},L)=>{const{tabLinks:h=[],anchorList:u=[],textLink:c,buyBtn:f,theme:D="light"}=a||{},[H,N]=(0,s.useState)(""),x=(0,s.useRef)(null),E=(0,s.useRef)(!1),w=(0,s.useRef)(""),g=(0,s.useRef)(null);(0,s.useImperativeHandle)(L,()=>x.current),(0,C.useExposure)(x,{componentType:F,componentName:q}),(0,s.useEffect)(()=>{if(u.length===0)return;const t=()=>{if(E.current){g.current&&clearTimeout(g.current),g.current=setTimeout(()=>{E.current=!1,w.current&&(N(w.current),w.current="")},100);return}const n=x.current?.offsetHeight||0,i=window.scrollY+n+p+10;let r="";for(let d=u.length-1;d>=0;d--){const k=u[d],P=document.getElementById(k.id);if(P){const z=P.getBoundingClientRect().top+window.scrollY;if(i>=z){r=k.id;break}}}if(!r&&u.length>0){const d=document.getElementById(u[0].id);if(d){const k=d.getBoundingClientRect().top+window.scrollY;i<k&&(r="")}}N(r)};return t(),window.addEventListener("scroll",t,{passive:!0}),()=>{window.removeEventListener("scroll",t),g.current&&clearTimeout(g.current)}},[u,p]),(0,s.useEffect)(()=>{const t=document.querySelectorAll(".header"),n=[];return t.forEach(i=>{const r=i;n.push({element:r,originalPosition:r.style.position||getComputedStyle(r).position}),r.style.position="relative"}),()=>{n.forEach(({element:i,originalPosition:r})=>{i.style.position=r==="static"?"":r})}},[]);const M=(t,n)=>{t.preventDefault();const i=document.getElementById(n);if(!i){console.warn(`Target element with id "${n}" not found`);return}N(n),w.current=n,E.current=!0;const r=x.current?.offsetHeight||0,d=i.getBoundingClientRect().top+window.scrollY-r-p;window.scrollTo({top:d,behavior:"smooth"}),window.history.pushState(null,"",`#${n}`)};return(0,e.jsxs)("div",{id:l,ref:x,className:(0,y.cn)("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":D==="dark"},o),children:[(0,e.jsxs)("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[(0,e.jsxs)("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[(0,e.jsxs)("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[h.map((t,n)=>(0,e.jsxs)("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[(0,e.jsx)("a",{href:t.link,className:(0,y.cn)("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":n!==0,"hidden desktop:block":n===1}),children:(0,e.jsx)("span",{children:t.label})}),n!==h.length-1&&(0,e.jsx)("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},t.link||n)),h.length>1&&(0,e.jsxs)(T.Root,{children:[(0,e.jsx)(T.Trigger,{asChild:!0,children:(0,e.jsx)("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:(0,e.jsx)(W,{className:"text-[#1D1D1F]"})})}),(0,e.jsx)(T.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:h.slice(1).map(t=>(0,e.jsx)("a",{href:t.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:(0,e.jsx)("span",{children:t.label})},t.link))})]})]}),(0,e.jsxs)("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[c?.link&&(0,e.jsx)("a",{href:c.link,target:c.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:(0,e.jsx)(m.Text,{size:2,className:"text-nowrap",children:c.text})}),f?.link&&(0,e.jsx)(m.Button,{as:"a",href:f.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:f.text})]})]}),(0,e.jsx)("div",{className:"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",children:u.map((t,n)=>(0,e.jsxs)("a",{href:`#${t.id}`,className:"product-nav-anchor-link",onClick:i=>{v?(i.preventDefault(),v(t,n)):M(i,t.id)},children:[(0,e.jsx)(m.Text,{size:2,className:"product-nav-anchor-text text-nowrap",children:t.label}),(0,e.jsx)("div",{className:(0,y.cn)("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"!bg-brand-0":H===t.id})})]},t.id))})]}),(0,e.jsxs)("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[c?.link&&(0,e.jsx)("a",{href:c.link,target:c.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:(0,e.jsx)(m.Text,{size:2,className:"text-nowrap",children:c.text})}),f?.link&&(0,e.jsx)(m.Button,{as:"a",href:f.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:f.text})]})]})});S.displayName="ProductNav";var J=(0,B.withLayout)(S);
1
+ "use strict";"use client";var Y=Object.create;var T=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var _=(n,a)=>{for(var l in a)T(n,l,{get:a[l],enumerable:!0})},M=(n,a,l,x)=>{if(a&&typeof a=="object"||typeof a=="function")for(let c of G(a))!V.call(n,c)&&c!==l&&T(n,c,{get:()=>a[c],enumerable:!(x=F(a,c))||x.enumerable});return n};var $=(n,a,l)=>(l=n!=null?Y(I(n)):{},M(a||!n||!n.__esModule?T(l,"default",{value:n,enumerable:!0}):l,n)),q=n=>M(T({},"__esModule",{value:!0}),n);var Q={};_(Q,{default:()=>O});module.exports=q(Q);var e=require("react/jsx-runtime"),r=require("react"),E=require("../../helpers/utils.js"),D=require("../../shared/Styles.js"),m=require("../../components/index.js"),H=require("../../hooks/useExposure.js"),P=$(require("@radix-ui/react-popover"));const W="navigation",J="product_nav",K=n=>(0,e.jsx)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...n,children:(0,e.jsx)("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),C=(0,r.forwardRef)(({className:n="",data:a,id:l,onAnchorClick:x,scrollOffsetExtra:c=0},B)=>{const{tabLinks:k=[],anchorList:p=[],textLink:u,buyBtn:f,theme:A="light"}=a||{},[z,b]=(0,r.useState)(""),g=(0,r.useRef)(null),y=(0,r.useRef)(!1),h=(0,r.useRef)(""),w=(0,r.useRef)(null),S=(0,r.useRef)(new Map);(0,r.useImperativeHandle)(B,()=>g.current),(0,H.useExposure)(g,{componentType:W,componentName:J}),(0,r.useEffect)(()=>{if(p.length===0)return;const t=setTimeout(()=>{const o=window.scrollY;window.scrollTo({top:0,behavior:"instant"}),requestAnimationFrame(()=>{const i=new Map;p.forEach(s=>{const d=document.getElementById(s.id);if(d){const N=d.getBoundingClientRect();i.set(s.id,N.top+window.scrollY)}}),S.current=i,window.scrollTo({top:o,behavior:"instant"})})},100);return()=>clearTimeout(t)},[p]),(0,r.useEffect)(()=>{if(p.length===0)return;const t=()=>{if(y.current){w.current&&clearTimeout(w.current),w.current=setTimeout(()=>{y.current=!1,h.current&&(b(h.current),h.current="")},100);return}const i=g.current?.offsetHeight||0,s=window.scrollY+i+c+10;let d="";const N=S.current;for(let v=p.length-1;v>=0;v--){const R=p[v],L=N.get(R.id);if(L!==void 0&&s>=L){d=R.id;break}}if(!d&&p.length>0){const v=N.get(p[0].id);v!==void 0&&s<v&&(d="")}b(d)},o=setTimeout(()=>{t()},200);return window.addEventListener("scroll",t,{passive:!0}),()=>{clearTimeout(o),window.removeEventListener("scroll",t),w.current&&clearTimeout(w.current)}},[p,c]),(0,r.useEffect)(()=>{const t=document.querySelectorAll(".header"),o=[];return t.forEach(i=>{const s=i;o.push({element:s,originalPosition:s.style.position||getComputedStyle(s).position}),s.style.position="relative"}),()=>{o.forEach(({element:i,originalPosition:s})=>{i.style.position=s==="static"?"":s})}},[]);const j=(t,o)=>{t.preventDefault();const i=S.current.get(o);if(i===void 0){console.warn(`Cached position for "${o}" not found`);return}b(o),h.current=o,y.current=!0;const s=g.current?.offsetHeight||0,d=i-s-c;window.scrollTo({top:d,behavior:"smooth"}),window.history.pushState(null,"",`#${o}`)};return(0,e.jsxs)("div",{id:l,ref:g,className:(0,E.cn)("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":A==="dark"},n),children:[(0,e.jsxs)("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[(0,e.jsxs)("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[(0,e.jsxs)("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[k.map((t,o)=>(0,e.jsxs)("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[(0,e.jsx)("a",{href:t.link,className:(0,E.cn)("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":o!==0,"hidden desktop:block":o===1}),children:(0,e.jsx)("span",{children:t.label})}),o!==k.length-1&&(0,e.jsx)("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},t.link||o)),k.length>1&&(0,e.jsxs)(P.Root,{children:[(0,e.jsx)(P.Trigger,{asChild:!0,children:(0,e.jsx)("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:(0,e.jsx)(K,{className:"text-[#1D1D1F]"})})}),(0,e.jsx)(P.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:k.slice(1).map(t=>(0,e.jsx)("a",{href:t.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:(0,e.jsx)("span",{children:t.label})},t.link))})]})]}),(0,e.jsxs)("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[u?.link&&(0,e.jsx)("a",{href:u.link,target:u.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:(0,e.jsx)(m.Text,{size:2,className:"text-nowrap",children:u.text})}),f?.link&&(0,e.jsx)(m.Button,{as:"a",href:f.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:f.text})]})]}),(0,e.jsx)("div",{className:"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",children:p.map((t,o)=>(0,e.jsxs)("a",{href:`#${t.id}`,className:"product-nav-anchor-link",onClick:i=>{x?(i.preventDefault(),b(t.id),h.current=t.id,y.current=!0,x(t,o)):j(i,t.id)},children:[(0,e.jsx)(m.Text,{size:2,className:"product-nav-anchor-text text-nowrap",children:t.label}),(0,e.jsx)("div",{className:(0,E.cn)("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"!bg-brand-0":z===t.id})})]},t.id))})]}),(0,e.jsxs)("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[u?.link&&(0,e.jsx)("a",{href:u.link,target:u.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:(0,e.jsx)(m.Text,{size:2,className:"text-nowrap",children:u.text})}),f?.link&&(0,e.jsx)(m.Button,{as:"a",href:f.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:f.text})]})]})});C.displayName="ProductNav";var O=(0,D.withLayout)(C);
2
2
  //# sourceMappingURL=ProductNav.js.map
package/dist/cjs/biz-components/ProductNav/ProductNav.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ProductNav/ProductNav.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M5 7.5L10 12.5L15 7.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(\n ({ className = '', data, id, onAnchorClick, scrollOffsetExtra = 0 }, ref) => {\n const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n const [activeAnchorId, setActiveAnchorId] = useState('')\n const innerRef = useRef<HTMLDivElement>(null)\n const isScrollingRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\n const targetAnchorIdRef = useRef<string>('') // \u8BB0\u5F55\u70B9\u51FB\u76EE\u6807\u951A\u70B9\n const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) // \u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u5B9A\u65F6\u5668\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n // \u6EDA\u52A8\u76D1\u542C\uFF1A\u68C0\u6D4B\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n useEffect(() => {\n if (anchorList.length === 0) return\n\n const handleScroll = () => {\n // \u5982\u679C\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\uFF0C\u4F7F\u7528 debounce \u68C0\u6D4B\u6EDA\u52A8\u7ED3\u675F\n if (isScrollingRef.current) {\n // \u6E05\u9664\u4E4B\u524D\u7684\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n // \u8BBE\u7F6E\u65B0\u7684\u5B9A\u65F6\u5668\uFF0C100ms \u6CA1\u6709\u65B0\u6EDA\u52A8\u4E8B\u4EF6\u5219\u8BA4\u4E3A\u6EDA\u52A8\u7ED3\u675F\n scrollEndTimerRef.current = setTimeout(() => {\n isScrollingRef.current = false\n // \u6EDA\u52A8\u7ED3\u675F\u540E\uFF0C\u786E\u4FDD\u9AD8\u4EAE\u505C\u7559\u5728\u76EE\u6807\u951A\u70B9\n if (targetAnchorIdRef.current) {\n setActiveAnchorId(targetAnchorIdRef.current)\n targetAnchorIdRef.current = ''\n }\n }, 100)\n return\n }\n\n const navHeight = innerRef.current?.offsetHeight || 0\n const scrollPosition = window.scrollY + navHeight + scrollOffsetExtra + 10 // 10px \u7F13\u51B2\n\n let currentAnchorId = ''\n\n // \u904D\u5386\u6240\u6709\u951A\u70B9\uFF0C\u627E\u5230\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n for (let i = anchorList.length - 1; i >= 0; i--) {\n const anchor = anchorList[i]\n const element = document.getElementById(anchor.id)\n if (element) {\n const elementTop = element.getBoundingClientRect().top + window.scrollY\n if (scrollPosition >= elementTop) {\n currentAnchorId = anchor.id\n break\n }\n }\n }\n\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\uFF0C\u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\n if (!currentAnchorId && anchorList.length > 0) {\n const firstElement = document.getElementById(anchorList[0].id)\n if (firstElement) {\n const firstElementTop = firstElement.getBoundingClientRect().top + window.scrollY\n if (scrollPosition < firstElementTop) {\n currentAnchorId = ''\n }\n }\n }\n\n setActiveAnchorId(currentAnchorId)\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n return () => {\n window.removeEventListener('scroll', handleScroll)\n // \u6E05\u7406\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n }\n }, [anchorList, scrollOffsetExtra])\n\n // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n useEffect(() => {\n const headerElements = document.querySelectorAll('.header')\n const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n headerElements.forEach(element => {\n const htmlElement = element as HTMLElement\n // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n originalStyles.push({\n element: htmlElement,\n originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n })\n // \u8BBE\u7F6E\u4E3Arelative\n htmlElement.style.position = 'relative'\n })\n\n // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n return () => {\n originalStyles.forEach(({ element, originalPosition }) => {\n element.style.position = originalPosition === 'static' ? '' : originalPosition\n })\n }\n }, [])\n\n // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n const handleAnchorClick = (e: React.MouseEvent, anchorId: string) => {\n e.preventDefault()\n\n // \u83B7\u53D6\u76EE\u6807\u5143\u7D20\n const targetElement = document.getElementById(anchorId)\n if (!targetElement) {\n console.warn(`Target element with id \"${anchorId}\" not found`)\n return\n }\n\n // \u7ACB\u5373\u66F4\u65B0\u9AD8\u4EAE\u72B6\u6001\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u95EA\u70C1\n setActiveAnchorId(anchorId)\n\n // \u8BB0\u5F55\u76EE\u6807\u951A\u70B9\uFF0C\u7528\u4E8E\u6EDA\u52A8\u7ED3\u675F\u540E\u786E\u4FDD\u9AD8\u4EAE\u6B63\u786E\n targetAnchorIdRef.current = anchorId\n\n // \u6807\u8BB0\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u6682\u505C\u6EDA\u52A8\u76D1\u542C\n isScrollingRef.current = true\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const navHeight = innerRef.current?.offsetHeight || 0\n\n // \u8BA1\u7B97\u76EE\u6807\u4F4D\u7F6E\uFF08\u76EE\u6807\u5143\u7D20\u7684\u4F4D\u7F6E - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u504F\u79FB\uFF09\n const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight - scrollOffsetExtra\n\n // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u4F4D\u7F6E\n window.scrollTo({\n top: targetPosition,\n behavior: 'smooth',\n })\n\n // \u66F4\u65B0 URL hash\uFF08\u4E0D\u89E6\u53D1\u9875\u9762\u8DF3\u8F6C\uFF09\n window.history.pushState(null, '', `#${anchorId}`)\n\n // \u6CE8\u610F\uFF1A\u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u7531 handleScroll \u4E2D\u7684 debounce \u903B\u8F91\u5904\u7406\n // \u4E0D\u518D\u4F7F\u7528\u56FA\u5B9A 800ms \u8D85\u65F6\uFF0C\u800C\u662F\u68C0\u6D4B\u5B9E\u9645\u6EDA\u52A8\u7ED3\u675F\n }\n\n return (\n <div\n id={id}\n ref={innerRef}\n className={cn(\n 'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n {/* Tab Links Section */}\n <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n {tabLinks.map((tabLink, index) => {\n return (\n <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n <a\n href={tabLink.link}\n className={cn(\n 'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n {\n 'text-[#6D6D6F]': index !== 0,\n 'hidden desktop:block': index === 1,\n }\n )}\n // onClick={() => onShowSpecs?.(false)}\n >\n <span>{tabLink.label}</span>\n </a>\n {index !== tabLinks.length - 1 && (\n <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n )}\n </div>\n )\n })}\n\n {/* Mobile Dropdown */}\n {tabLinks.length > 1 && (\n <Popover.Root>\n <Popover.Trigger asChild>\n <button\n className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n aria-label=\"More products\"\n >\n <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n </button>\n </Popover.Trigger>\n <Popover.Content\n className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n style={{\n boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n }}\n side=\"bottom\"\n align=\"end\"\n alignOffset={10}\n sideOffset={10}\n >\n {tabLinks.slice(1).map(tabLink => (\n <a\n key={tabLink.link}\n href={tabLink.link}\n className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n >\n <span>{tabLink.label}</span>\n </a>\n ))}\n </Popover.Content>\n </Popover.Root>\n )}\n </div>\n\n {/* Mobile Actions */}\n <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* Anchor Navigation */}\n <div className=\"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n {anchorList.map((anchor, index) => (\n <a\n key={anchor.id}\n href={`#${anchor.id}`}\n className=\"product-nav-anchor-link\"\n onClick={e => {\n // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6,\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\u5E76\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (onAnchorClick) {\n e.preventDefault()\n onAnchorClick(anchor, index)\n } else {\n // \u4F7F\u7528\u9ED8\u8BA4\u7684\u951A\u70B9\u6EDA\u52A8\u884C\u4E3A\uFF0C\u5E26\u504F\u79FB\u91CF\n handleAnchorClick(e, anchor.id)\n }\n }}\n >\n <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n {anchor.label}\n </Text>\n <div\n className={cn(\n 'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n {\n '!bg-brand-0': activeAnchorId === anchor.id,\n }\n )}\n />\n </a>\n ))}\n </div>\n </div>\n\n {/* Desktop Actions */}\n <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n )\n }\n)\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
5
- "mappings": "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",
6
- "names": ["ProductNav_exports", "__export", "ProductNav_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "onAnchorClick", "scrollOffsetExtra", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "activeAnchorId", "setActiveAnchorId", "innerRef", "isScrollingRef", "targetAnchorIdRef", "scrollEndTimerRef", "handleScroll", "navHeight", "scrollPosition", "currentAnchorId", "i", "anchor", "element", "elementTop", "firstElement", "firstElementTop", "headerElements", "originalStyles", "htmlElement", "originalPosition", "handleAnchorClick", "e", "anchorId", "targetElement", "targetPosition", "tabLink", "index"]
4
+ "sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M5 7.5L10 12.5L15 7.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(\n ({ className = '', data, id, onAnchorClick, scrollOffsetExtra = 0 }, ref) => {\n const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n const [activeAnchorId, setActiveAnchorId] = useState('')\n const innerRef = useRef<HTMLDivElement>(null)\n const isScrollingRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\n const targetAnchorIdRef = useRef<string>('') // \u8BB0\u5F55\u70B9\u51FB\u76EE\u6807\u951A\u70B9\n const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) // \u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u5B9A\u65F6\u5668\n const anchorPositionsRef = useRef<Map<string, number>>(new Map()) // \u7F13\u5B58\u951A\u70B9\u539F\u59CB\u4F4D\u7F6E\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n // \u521D\u59CB\u5316\u65F6\u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u539F\u59CB\u4F4D\u7F6E\uFF08\u5728\u6EDA\u52A8\u524D\u8BA1\u7B97\uFF0C\u907F\u514D sticky \u5F71\u54CD\uFF09\n useEffect(() => {\n if (anchorList.length === 0) return\n\n // \u9875\u9762\u52A0\u8F7D\u540E\u5EF6\u8FDF\u8BA1\u7B97\uFF0C\u786E\u4FDD\u5E03\u5C40\u5B8C\u6210\n const timer = setTimeout(() => {\n // \u5148\u6EDA\u52A8\u5230\u9876\u90E8\u8BA1\u7B97\u771F\u5B9E\u4F4D\u7F6E\n const originalScrollY = window.scrollY\n window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })\n\n // \u7B49\u5F85\u4E00\u5E27\u8BA9\u5E03\u5C40\u7A33\u5B9A\n requestAnimationFrame(() => {\n const positions = new Map<string, number>()\n anchorList.forEach(anchor => {\n const element = document.getElementById(anchor.id)\n if (element) {\n const rect = element.getBoundingClientRect()\n positions.set(anchor.id, rect.top + window.scrollY)\n }\n })\n anchorPositionsRef.current = positions\n\n // \u6062\u590D\u539F\u6765\u7684\u6EDA\u52A8\u4F4D\u7F6E\n window.scrollTo({ top: originalScrollY, behavior: 'instant' as ScrollBehavior })\n })\n }, 100)\n\n return () => clearTimeout(timer)\n }, [anchorList])\n\n // \u6EDA\u52A8\u76D1\u542C\uFF1A\u68C0\u6D4B\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n useEffect(() => {\n if (anchorList.length === 0) return\n\n const handleScroll = () => {\n // \u5982\u679C\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\uFF0C\u4F7F\u7528 debounce \u68C0\u6D4B\u6EDA\u52A8\u7ED3\u675F\n if (isScrollingRef.current) {\n // \u6E05\u9664\u4E4B\u524D\u7684\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n // \u8BBE\u7F6E\u65B0\u7684\u5B9A\u65F6\u5668\uFF0C100ms \u6CA1\u6709\u65B0\u6EDA\u52A8\u4E8B\u4EF6\u5219\u8BA4\u4E3A\u6EDA\u52A8\u7ED3\u675F\n scrollEndTimerRef.current = setTimeout(() => {\n isScrollingRef.current = false\n // \u6EDA\u52A8\u7ED3\u675F\u540E\uFF0C\u786E\u4FDD\u9AD8\u4EAE\u505C\u7559\u5728\u76EE\u6807\u951A\u70B9\n if (targetAnchorIdRef.current) {\n setActiveAnchorId(targetAnchorIdRef.current)\n targetAnchorIdRef.current = ''\n }\n }, 100)\n return\n }\n\n const navHeight = innerRef.current?.offsetHeight || 0\n const scrollPosition = window.scrollY + navHeight + scrollOffsetExtra + 10 // 10px \u7F13\u51B2\n\n let currentAnchorId = ''\n\n // \u4F7F\u7528\u7F13\u5B58\u7684\u951A\u70B9\u4F4D\u7F6E\n const positions = anchorPositionsRef.current\n\n // \u904D\u5386\u6240\u6709\u951A\u70B9\uFF0C\u627E\u5230\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n for (let i = anchorList.length - 1; i >= 0; i--) {\n const anchor = anchorList[i]\n const elementTop = positions.get(anchor.id)\n if (elementTop !== undefined && scrollPosition >= elementTop) {\n currentAnchorId = anchor.id\n break\n }\n }\n\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\u4E14\u7F13\u5B58\u4E2D\u6709\u7B2C\u4E00\u4E2A\u951A\u70B9\u7684\u4F4D\u7F6E\n if (!currentAnchorId && anchorList.length > 0) {\n const firstElementTop = positions.get(anchorList[0].id)\n if (firstElementTop !== undefined && scrollPosition < firstElementTop) {\n currentAnchorId = ''\n }\n }\n\n setActiveAnchorId(currentAnchorId)\n }\n\n // \u5EF6\u8FDF\u521D\u59CB\u5316\uFF0C\u7B49\u5F85\u4F4D\u7F6E\u7F13\u5B58\u5B8C\u6210\n const timer = setTimeout(() => {\n handleScroll()\n }, 200)\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n return () => {\n clearTimeout(timer)\n window.removeEventListener('scroll', handleScroll)\n // \u6E05\u7406\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n }\n }, [anchorList, scrollOffsetExtra])\n\n // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n useEffect(() => {\n const headerElements = document.querySelectorAll('.header')\n const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n headerElements.forEach(element => {\n const htmlElement = element as HTMLElement\n // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n originalStyles.push({\n element: htmlElement,\n originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n })\n // \u8BBE\u7F6E\u4E3Arelative\n htmlElement.style.position = 'relative'\n })\n\n // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n return () => {\n originalStyles.forEach(({ element, originalPosition }) => {\n element.style.position = originalPosition === 'static' ? '' : originalPosition\n })\n }\n }, [])\n\n // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n const handleAnchorClick = (e: React.MouseEvent, anchorId: string) => {\n e.preventDefault()\n\n // \u4F7F\u7528\u7F13\u5B58\u7684\u4F4D\u7F6E\n const elementAbsoluteTop = anchorPositionsRef.current.get(anchorId)\n if (elementAbsoluteTop === undefined) {\n console.warn(`Cached position for \"${anchorId}\" not found`)\n return\n }\n\n // \u7ACB\u5373\u66F4\u65B0\u9AD8\u4EAE\u72B6\u6001\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u95EA\u70C1\n setActiveAnchorId(anchorId)\n\n // \u8BB0\u5F55\u76EE\u6807\u951A\u70B9\uFF0C\u7528\u4E8E\u6EDA\u52A8\u7ED3\u675F\u540E\u786E\u4FDD\u9AD8\u4EAE\u6B63\u786E\n targetAnchorIdRef.current = anchorId\n\n // \u6807\u8BB0\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u6682\u505C\u6EDA\u52A8\u76D1\u542C\n isScrollingRef.current = true\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const navHeight = innerRef.current?.offsetHeight || 0\n\n // \u76EE\u6807\u6EDA\u52A8\u4F4D\u7F6E = \u7F13\u5B58\u7684\u5143\u7D20\u7EDD\u5BF9\u4F4D\u7F6E - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u504F\u79FB\n const targetPosition = elementAbsoluteTop - navHeight - scrollOffsetExtra\n\n // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u4F4D\u7F6E\n window.scrollTo({\n top: targetPosition,\n behavior: 'smooth',\n })\n\n // \u66F4\u65B0 URL hash\uFF08\u4E0D\u89E6\u53D1\u9875\u9762\u8DF3\u8F6C\uFF09\n window.history.pushState(null, '', `#${anchorId}`)\n\n // \u6CE8\u610F\uFF1A\u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u7531 handleScroll \u4E2D\u7684 debounce \u903B\u8F91\u5904\u7406\n // \u4E0D\u518D\u4F7F\u7528\u56FA\u5B9A 800ms \u8D85\u65F6\uFF0C\u800C\u662F\u68C0\u6D4B\u5B9E\u9645\u6EDA\u52A8\u7ED3\u675F\n }\n\n return (\n <div\n id={id}\n ref={innerRef}\n className={cn(\n 'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n {/* Tab Links Section */}\n <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n {tabLinks.map((tabLink, index) => {\n return (\n <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n <a\n href={tabLink.link}\n className={cn(\n 'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n {\n 'text-[#6D6D6F]': index !== 0,\n 'hidden desktop:block': index === 1,\n }\n )}\n // onClick={() => onShowSpecs?.(false)}\n >\n <span>{tabLink.label}</span>\n </a>\n {index !== tabLinks.length - 1 && (\n <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n )}\n </div>\n )\n })}\n\n {/* Mobile Dropdown */}\n {tabLinks.length > 1 && (\n <Popover.Root>\n <Popover.Trigger asChild>\n <button\n className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n aria-label=\"More products\"\n >\n <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n </button>\n </Popover.Trigger>\n <Popover.Content\n className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n style={{\n boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n }}\n side=\"bottom\"\n align=\"end\"\n alignOffset={10}\n sideOffset={10}\n >\n {tabLinks.slice(1).map(tabLink => (\n <a\n key={tabLink.link}\n href={tabLink.link}\n className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n >\n <span>{tabLink.label}</span>\n </a>\n ))}\n </Popover.Content>\n </Popover.Root>\n )}\n </div>\n\n {/* Mobile Actions */}\n <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* Anchor Navigation */}\n <div className=\"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n {anchorList.map((anchor, index) => (\n <a\n key={anchor.id}\n href={`#${anchor.id}`}\n className=\"product-nav-anchor-link\"\n onClick={e => {\n // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6,\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\u5E76\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (onAnchorClick) {\n e.preventDefault()\n // \u6807\u8BB0\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u9AD8\u4EAE\u95EA\u70C1\n setActiveAnchorId(anchor.id)\n targetAnchorIdRef.current = anchor.id\n isScrollingRef.current = true\n onAnchorClick(anchor, index)\n } else {\n // \u4F7F\u7528\u9ED8\u8BA4\u7684\u951A\u70B9\u6EDA\u52A8\u884C\u4E3A\uFF0C\u5E26\u504F\u79FB\u91CF\n handleAnchorClick(e, anchor.id)\n }\n }}\n >\n <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n {anchor.label}\n </Text>\n <div\n className={cn(\n 'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n {\n '!bg-brand-0': activeAnchorId === anchor.id,\n }\n )}\n />\n </a>\n ))}\n </div>\n </div>\n\n {/* Desktop Actions */}\n <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n )\n }\n)\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
5
+ "mappings": "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",
6
+ "names": ["ProductNav_exports", "__export", "ProductNav_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "onAnchorClick", "scrollOffsetExtra", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "activeAnchorId", "setActiveAnchorId", "innerRef", "isScrollingRef", "targetAnchorIdRef", "scrollEndTimerRef", "anchorPositionsRef", "timer", "originalScrollY", "positions", "anchor", "element", "rect", "handleScroll", "navHeight", "scrollPosition", "currentAnchorId", "i", "elementTop", "firstElementTop", "headerElements", "originalStyles", "htmlElement", "originalPosition", "handleAnchorClick", "e", "anchorId", "elementAbsoluteTop", "targetPosition", "tabLink", "index"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerMulti/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as l,jsxs as o}from"react/jsx-runtime";import{useState as r,forwardRef as I,useRef as u}from"react";import{cn as V}from"../../helpers/utils.js";import{withLayout as B}from"../../shared/Styles.js";import{Picture as x,Link as C,Text as $}from"../../components/index.js";import z from"../Title/index.js";import D from"../SwiperBox/index.js";import{Container as E}from"../../components/container.js";import{VideoModal as H}from"../VideoModal/index.js";import{convertLexicalToHTML as R}from"@payloadcms/richtext-lexical/html";import{useExposure as S}from"../../hooks/useExposure.js";import{trackUrlRef as U}from"../../shared/trackUrlRef.js";const a="video",p="media_player_multi",_=({data:e,configuration:i})=>{const t=u(null);return S(t,{componentType:a,componentName:p,componentTitle:e?.title,position:i?.index+1,componentDescription:e?.description}),o("div",{ref:t,className:V("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",i.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(x,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),l(x,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),l("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&l("button",{onClick:()=>{i?.onVideoPlayBtnClick?.(i?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:l("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[l("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&l(C,{asChild:!e?.href,href:U(e?.href,`${a}_${p}`),"data-headless-type-name":`${a}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:l($,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),l("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},h=I(({data:{items:e=[],shape:i="square",title:t,containerProps:v},className:n="",key:b,onVideoPlayBtnClick:g,...w},y)=>{const[m,d]=r(!1),[M,k]=r(""),[P,N]=r(""),f=typeof t=="string"?t:t&&R({data:t}),T=u(null),c=e.length===2;return o("div",{...w,ref:T,className:n,children:[l("div",{className:"mediaplayermulti-box",children:l(E,{...v||{},className:"overflow-hidden",children:o("div",{className:n,ref:y,children:[t&&l(z,{className:"mediaplayermulti-title",data:{title:f||""}}),l(D,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+b,data:{list:e,configuration:{shape:i,onVideoPlayBtnClick:(L,s)=>{d(!0),s?.isYouTube?N?.(s?.youtubeId||""):k?.(s?.video?.url||""),g?.(L)},title:f}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:c?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:c?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),m&&l(H,{visible:m,youTubeId:P,videoUrl:M,onCloseModal:()=>d(!1)})]})});h.displayName="MediaPlayerMulti";var W=B(h);export{W as default};
1
+ "use client";import{jsx as l,jsxs as o}from"react/jsx-runtime";import{useState as r,forwardRef as I,useRef as h}from"react";import{cn as V}from"../../helpers/utils.js";import{withLayout as B}from"../../shared/Styles.js";import{Picture as v,Link as C,Text as $}from"../../components/index.js";import z from"../Title/index.js";import D from"../SwiperBox/index.js";import{Container as E}from"../../components/container.js";import{VideoModal as H}from"../VideoModal/index.js";import{convertLexicalToHTML as R}from"@payloadcms/richtext-lexical/html";import{useExposure as S}from"../../hooks/useExposure.js";import{trackUrlRef as U}from"../../shared/trackUrlRef.js";const a="video",p="media_player_multi",_=({data:e,configuration:i})=>{const t=h(null);return S(t,{componentType:a,componentName:p,componentTitle:e?.title,position:i?.index+1,componentDescription:e?.description}),o("div",{ref:t,className:V("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",i.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(v,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),l(v,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),l("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&l("button",{onClick:()=>{i?.onVideoPlayBtnClick?.(i?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:l("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[l("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&l(C,{asChild:!e?.href,href:U(e?.href,`${a}_${p}`),"data-headless-type-name":`${a}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:l($,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),l("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},b=I(({data:{items:e=[],shape:i="square",title:t,containerProps:g},className:n="",key:w,onVideoPlayBtnClick:y,...M},k)=>{const[m,d]=r(!1),[P,f]=r(""),[N,c]=r(""),u=typeof t=="string"?t:t&&R({data:t}),T=h(null),x=e.length===2;return o("div",{...M,ref:T,className:n,children:[l("div",{className:"mediaplayermulti-box",children:l(E,{...g||{},className:"overflow-hidden",children:o("div",{className:n,ref:k,children:[t&&l(z,{className:"mediaplayermulti-title",data:{title:u||""}}),l(D,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+w,data:{list:e,configuration:{shape:i,onVideoPlayBtnClick:(L,s)=>{d(!0),s?.isYouTube?(c(s?.youtubeId||""),f("")):(f(s?.video?.url||""),c("")),y?.(L)},title:u}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),m&&l(H,{visible:m,youTubeId:N,videoUrl:P,onCloseModal:()=>d(!1)})]})});b.displayName="MediaPlayerMulti";var W=B(b);export{W as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/MediaPlayerMulti/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.description,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-14 bg-opacity/20 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 )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n asChild={!data?.href}\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Text\n html={data.quote}\n weight=\"bold\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n />\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n {\n data: { items = [], shape = 'square', title, containerProps },\n className = '',\n key,\n onVideoPlayBtnClick,\n ...rest\n },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length === 2\n\n return (\n <div {...rest} ref={wrapperRef} className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: {\n shape,\n onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n }\n onVideoPlayBtnClick?.(_)\n },\n title: title_html,\n },\n }}\n Slide={MediaPlayerItem}\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: itemsLength ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n )\n }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.description,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-14 bg-opacity/20 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 )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n asChild={!data?.href}\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Text\n html={data.quote}\n weight=\"bold\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n />\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n {\n data: { items = [], shape = 'square', title, containerProps },\n className = '',\n key,\n onVideoPlayBtnClick,\n ...rest\n },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length === 2\n\n return (\n <div {...rest} ref={wrapperRef} className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: {\n shape,\n onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId(data?.youtubeId || '')\n setVideoUrl('')\n } else {\n setVideoUrl(data?.video?.url || '')\n setYouTubeId('')\n }\n onVideoPlayBtnClick?.(_)\n },\n title: title_html,\n },\n }}\n Slide={MediaPlayerItem}\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: itemsLength ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n )\n }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withLayout", "Picture", "Link", "Text", "Title", "SwiperBox", "Container", "VideoModal", "convertLexicalToHTML", "useExposure", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "ref", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "rest", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "itemsLength", "_", "MediaPlayerMulti_default"]
7
7
  }
package/dist/esm/biz-components/ProductNav/ProductNav.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import{useState as z,useEffect as T,forwardRef as A,useImperativeHandle as I,useRef as v}from"react";import{cn as k}from"../../helpers/utils.js";import{withLayout as j}from"../../shared/Styles.js";import{Button as P,Text as b}from"../../components/index.js";import{useExposure as Y}from"../../hooks/useExposure.js";import*as y from"@radix-ui/react-popover";const G="navigation",V="product_nav",_=x=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...x,children:t("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),R=A(({className:x="",data:S,id:B,onAnchorClick:N,scrollOffsetExtra:g=0},C)=>{const{tabLinks:u=[],anchorList:l=[],textLink:a,buyBtn:p,theme:L="light"}=S||{},[D,h]=z(""),c=v(null),w=v(!1),m=v(""),d=v(null);I(C,()=>c.current),Y(c,{componentType:G,componentName:V}),T(()=>{if(l.length===0)return;const e=()=>{if(w.current){d.current&&clearTimeout(d.current),d.current=setTimeout(()=>{w.current=!1,m.current&&(h(m.current),m.current="")},100);return}const o=c.current?.offsetHeight||0,r=window.scrollY+o+g+10;let n="";for(let i=l.length-1;i>=0;i--){const f=l[i],E=document.getElementById(f.id);if(E){const M=E.getBoundingClientRect().top+window.scrollY;if(r>=M){n=f.id;break}}}if(!n&&l.length>0){const i=document.getElementById(l[0].id);if(i){const f=i.getBoundingClientRect().top+window.scrollY;r<f&&(n="")}}h(n)};return e(),window.addEventListener("scroll",e,{passive:!0}),()=>{window.removeEventListener("scroll",e),d.current&&clearTimeout(d.current)}},[l,g]),T(()=>{const e=document.querySelectorAll(".header"),o=[];return e.forEach(r=>{const n=r;o.push({element:n,originalPosition:n.style.position||getComputedStyle(n).position}),n.style.position="relative"}),()=>{o.forEach(({element:r,originalPosition:n})=>{r.style.position=n==="static"?"":n})}},[]);const H=(e,o)=>{e.preventDefault();const r=document.getElementById(o);if(!r){console.warn(`Target element with id "${o}" not found`);return}h(o),m.current=o,w.current=!0;const n=c.current?.offsetHeight||0,i=r.getBoundingClientRect().top+window.scrollY-n-g;window.scrollTo({top:i,behavior:"smooth"}),window.history.pushState(null,"",`#${o}`)};return s("div",{id:B,ref:c,className:k("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":L==="dark"},x),children:[s("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[s("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[s("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[u.map((e,o)=>s("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[t("a",{href:e.link,className:k("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":o!==0,"hidden desktop:block":o===1}),children:t("span",{children:e.label})}),o!==u.length-1&&t("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},e.link||o)),u.length>1&&s(y.Root,{children:[t(y.Trigger,{asChild:!0,children:t("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:t(_,{className:"text-[#1D1D1F]"})})}),t(y.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:u.slice(1).map(e=>t("a",{href:e.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:t("span",{children:e.label})},e.link))})]})]}),s("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[a?.link&&t("a",{href:a.link,target:a.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:t(b,{size:2,className:"text-nowrap",children:a.text})}),p?.link&&t(P,{as:"a",href:p.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:p.text})]})]}),t("div",{className:"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",children:l.map((e,o)=>s("a",{href:`#${e.id}`,className:"product-nav-anchor-link",onClick:r=>{N?(r.preventDefault(),N(e,o)):H(r,e.id)},children:[t(b,{size:2,className:"product-nav-anchor-text text-nowrap",children:e.label}),t("div",{className:k("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"!bg-brand-0":D===e.id})})]},e.id))})]}),s("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[a?.link&&t("a",{href:a.link,target:a.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:t(b,{size:2,className:"text-nowrap",children:a.text})}),p?.link&&t(P,{as:"a",href:p.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:p.text})]})]})});R.displayName="ProductNav";var K=j(R);export{K as default};
1
+ "use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useState as j,useEffect as y,forwardRef as Y,useImperativeHandle as F,useRef as f}from"react";import{cn as N}from"../../helpers/utils.js";import{withLayout as G}from"../../shared/Styles.js";import{Button as L,Text as T}from"../../components/index.js";import{useExposure as I}from"../../hooks/useExposure.js";import*as E from"@radix-ui/react-popover";const V="navigation",_="product_nav",$=w=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...w,children:t("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),M=Y(({className:w="",data:C,id:D,onAnchorClick:S,scrollOffsetExtra:k=0},H)=>{const{tabLinks:v=[],anchorList:s=[],textLink:l,buyBtn:p,theme:B="light"}=C||{},[A,x]=j(""),d=f(null),g=f(!1),u=f(""),m=f(null),b=f(new Map);F(H,()=>d.current),I(d,{componentType:V,componentName:_}),y(()=>{if(s.length===0)return;const e=setTimeout(()=>{const o=window.scrollY;window.scrollTo({top:0,behavior:"instant"}),requestAnimationFrame(()=>{const r=new Map;s.forEach(n=>{const i=document.getElementById(n.id);if(i){const h=i.getBoundingClientRect();r.set(n.id,h.top+window.scrollY)}}),b.current=r,window.scrollTo({top:o,behavior:"instant"})})},100);return()=>clearTimeout(e)},[s]),y(()=>{if(s.length===0)return;const e=()=>{if(g.current){m.current&&clearTimeout(m.current),m.current=setTimeout(()=>{g.current=!1,u.current&&(x(u.current),u.current="")},100);return}const r=d.current?.offsetHeight||0,n=window.scrollY+r+k+10;let i="";const h=b.current;for(let c=s.length-1;c>=0;c--){const P=s[c],R=h.get(P.id);if(R!==void 0&&n>=R){i=P.id;break}}if(!i&&s.length>0){const c=h.get(s[0].id);c!==void 0&&n<c&&(i="")}x(i)},o=setTimeout(()=>{e()},200);return window.addEventListener("scroll",e,{passive:!0}),()=>{clearTimeout(o),window.removeEventListener("scroll",e),m.current&&clearTimeout(m.current)}},[s,k]),y(()=>{const e=document.querySelectorAll(".header"),o=[];return e.forEach(r=>{const n=r;o.push({element:n,originalPosition:n.style.position||getComputedStyle(n).position}),n.style.position="relative"}),()=>{o.forEach(({element:r,originalPosition:n})=>{r.style.position=n==="static"?"":n})}},[]);const z=(e,o)=>{e.preventDefault();const r=b.current.get(o);if(r===void 0){console.warn(`Cached position for "${o}" not found`);return}x(o),u.current=o,g.current=!0;const n=d.current?.offsetHeight||0,i=r-n-k;window.scrollTo({top:i,behavior:"smooth"}),window.history.pushState(null,"",`#${o}`)};return a("div",{id:D,ref:d,className:N("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":B==="dark"},w),children:[a("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[a("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[a("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[v.map((e,o)=>a("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[t("a",{href:e.link,className:N("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":o!==0,"hidden desktop:block":o===1}),children:t("span",{children:e.label})}),o!==v.length-1&&t("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},e.link||o)),v.length>1&&a(E.Root,{children:[t(E.Trigger,{asChild:!0,children:t("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:t($,{className:"text-[#1D1D1F]"})})}),t(E.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:v.slice(1).map(e=>t("a",{href:e.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:t("span",{children:e.label})},e.link))})]})]}),a("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[l?.link&&t("a",{href:l.link,target:l.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:t(T,{size:2,className:"text-nowrap",children:l.text})}),p?.link&&t(L,{as:"a",href:p.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:p.text})]})]}),t("div",{className:"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",children:s.map((e,o)=>a("a",{href:`#${e.id}`,className:"product-nav-anchor-link",onClick:r=>{S?(r.preventDefault(),x(e.id),u.current=e.id,g.current=!0,S(e,o)):z(r,e.id)},children:[t(T,{size:2,className:"product-nav-anchor-text text-nowrap",children:e.label}),t("div",{className:N("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"!bg-brand-0":A===e.id})})]},e.id))})]}),a("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[l?.link&&t("a",{href:l.link,target:l.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:t(T,{size:2,className:"text-nowrap",children:l.text})}),p?.link&&t(L,{as:"a",href:p.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:p.text})]})]})});M.displayName="ProductNav";var Q=G(M);export{Q as default};
2
2
  //# sourceMappingURL=ProductNav.js.map
package/dist/esm/biz-components/ProductNav/ProductNav.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ProductNav/ProductNav.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M5 7.5L10 12.5L15 7.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(\n ({ className = '', data, id, onAnchorClick, scrollOffsetExtra = 0 }, ref) => {\n const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n const [activeAnchorId, setActiveAnchorId] = useState('')\n const innerRef = useRef<HTMLDivElement>(null)\n const isScrollingRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\n const targetAnchorIdRef = useRef<string>('') // \u8BB0\u5F55\u70B9\u51FB\u76EE\u6807\u951A\u70B9\n const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) // \u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u5B9A\u65F6\u5668\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n // \u6EDA\u52A8\u76D1\u542C\uFF1A\u68C0\u6D4B\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n useEffect(() => {\n if (anchorList.length === 0) return\n\n const handleScroll = () => {\n // \u5982\u679C\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\uFF0C\u4F7F\u7528 debounce \u68C0\u6D4B\u6EDA\u52A8\u7ED3\u675F\n if (isScrollingRef.current) {\n // \u6E05\u9664\u4E4B\u524D\u7684\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n // \u8BBE\u7F6E\u65B0\u7684\u5B9A\u65F6\u5668\uFF0C100ms \u6CA1\u6709\u65B0\u6EDA\u52A8\u4E8B\u4EF6\u5219\u8BA4\u4E3A\u6EDA\u52A8\u7ED3\u675F\n scrollEndTimerRef.current = setTimeout(() => {\n isScrollingRef.current = false\n // \u6EDA\u52A8\u7ED3\u675F\u540E\uFF0C\u786E\u4FDD\u9AD8\u4EAE\u505C\u7559\u5728\u76EE\u6807\u951A\u70B9\n if (targetAnchorIdRef.current) {\n setActiveAnchorId(targetAnchorIdRef.current)\n targetAnchorIdRef.current = ''\n }\n }, 100)\n return\n }\n\n const navHeight = innerRef.current?.offsetHeight || 0\n const scrollPosition = window.scrollY + navHeight + scrollOffsetExtra + 10 // 10px \u7F13\u51B2\n\n let currentAnchorId = ''\n\n // \u904D\u5386\u6240\u6709\u951A\u70B9\uFF0C\u627E\u5230\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n for (let i = anchorList.length - 1; i >= 0; i--) {\n const anchor = anchorList[i]\n const element = document.getElementById(anchor.id)\n if (element) {\n const elementTop = element.getBoundingClientRect().top + window.scrollY\n if (scrollPosition >= elementTop) {\n currentAnchorId = anchor.id\n break\n }\n }\n }\n\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\uFF0C\u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\n if (!currentAnchorId && anchorList.length > 0) {\n const firstElement = document.getElementById(anchorList[0].id)\n if (firstElement) {\n const firstElementTop = firstElement.getBoundingClientRect().top + window.scrollY\n if (scrollPosition < firstElementTop) {\n currentAnchorId = ''\n }\n }\n }\n\n setActiveAnchorId(currentAnchorId)\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n return () => {\n window.removeEventListener('scroll', handleScroll)\n // \u6E05\u7406\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n }\n }, [anchorList, scrollOffsetExtra])\n\n // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n useEffect(() => {\n const headerElements = document.querySelectorAll('.header')\n const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n headerElements.forEach(element => {\n const htmlElement = element as HTMLElement\n // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n originalStyles.push({\n element: htmlElement,\n originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n })\n // \u8BBE\u7F6E\u4E3Arelative\n htmlElement.style.position = 'relative'\n })\n\n // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n return () => {\n originalStyles.forEach(({ element, originalPosition }) => {\n element.style.position = originalPosition === 'static' ? '' : originalPosition\n })\n }\n }, [])\n\n // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n const handleAnchorClick = (e: React.MouseEvent, anchorId: string) => {\n e.preventDefault()\n\n // \u83B7\u53D6\u76EE\u6807\u5143\u7D20\n const targetElement = document.getElementById(anchorId)\n if (!targetElement) {\n console.warn(`Target element with id \"${anchorId}\" not found`)\n return\n }\n\n // \u7ACB\u5373\u66F4\u65B0\u9AD8\u4EAE\u72B6\u6001\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u95EA\u70C1\n setActiveAnchorId(anchorId)\n\n // \u8BB0\u5F55\u76EE\u6807\u951A\u70B9\uFF0C\u7528\u4E8E\u6EDA\u52A8\u7ED3\u675F\u540E\u786E\u4FDD\u9AD8\u4EAE\u6B63\u786E\n targetAnchorIdRef.current = anchorId\n\n // \u6807\u8BB0\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u6682\u505C\u6EDA\u52A8\u76D1\u542C\n isScrollingRef.current = true\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const navHeight = innerRef.current?.offsetHeight || 0\n\n // \u8BA1\u7B97\u76EE\u6807\u4F4D\u7F6E\uFF08\u76EE\u6807\u5143\u7D20\u7684\u4F4D\u7F6E - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u504F\u79FB\uFF09\n const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight - scrollOffsetExtra\n\n // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u4F4D\u7F6E\n window.scrollTo({\n top: targetPosition,\n behavior: 'smooth',\n })\n\n // \u66F4\u65B0 URL hash\uFF08\u4E0D\u89E6\u53D1\u9875\u9762\u8DF3\u8F6C\uFF09\n window.history.pushState(null, '', `#${anchorId}`)\n\n // \u6CE8\u610F\uFF1A\u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u7531 handleScroll \u4E2D\u7684 debounce \u903B\u8F91\u5904\u7406\n // \u4E0D\u518D\u4F7F\u7528\u56FA\u5B9A 800ms \u8D85\u65F6\uFF0C\u800C\u662F\u68C0\u6D4B\u5B9E\u9645\u6EDA\u52A8\u7ED3\u675F\n }\n\n return (\n <div\n id={id}\n ref={innerRef}\n className={cn(\n 'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n {/* Tab Links Section */}\n <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n {tabLinks.map((tabLink, index) => {\n return (\n <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n <a\n href={tabLink.link}\n className={cn(\n 'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n {\n 'text-[#6D6D6F]': index !== 0,\n 'hidden desktop:block': index === 1,\n }\n )}\n // onClick={() => onShowSpecs?.(false)}\n >\n <span>{tabLink.label}</span>\n </a>\n {index !== tabLinks.length - 1 && (\n <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n )}\n </div>\n )\n })}\n\n {/* Mobile Dropdown */}\n {tabLinks.length > 1 && (\n <Popover.Root>\n <Popover.Trigger asChild>\n <button\n className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n aria-label=\"More products\"\n >\n <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n </button>\n </Popover.Trigger>\n <Popover.Content\n className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n style={{\n boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n }}\n side=\"bottom\"\n align=\"end\"\n alignOffset={10}\n sideOffset={10}\n >\n {tabLinks.slice(1).map(tabLink => (\n <a\n key={tabLink.link}\n href={tabLink.link}\n className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n >\n <span>{tabLink.label}</span>\n </a>\n ))}\n </Popover.Content>\n </Popover.Root>\n )}\n </div>\n\n {/* Mobile Actions */}\n <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* Anchor Navigation */}\n <div className=\"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n {anchorList.map((anchor, index) => (\n <a\n key={anchor.id}\n href={`#${anchor.id}`}\n className=\"product-nav-anchor-link\"\n onClick={e => {\n // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6,\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\u5E76\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (onAnchorClick) {\n e.preventDefault()\n onAnchorClick(anchor, index)\n } else {\n // \u4F7F\u7528\u9ED8\u8BA4\u7684\u951A\u70B9\u6EDA\u52A8\u884C\u4E3A\uFF0C\u5E26\u504F\u79FB\u91CF\n handleAnchorClick(e, anchor.id)\n }\n }}\n >\n <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n {anchor.label}\n </Text>\n <div\n className={cn(\n 'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n {\n '!bg-brand-0': activeAnchorId === anchor.id,\n }\n )}\n />\n </a>\n ))}\n </div>\n </div>\n\n {/* Desktop Actions */}\n <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n )\n }\n)\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
5
- "mappings": "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",
6
- "names": ["jsx", "jsxs", "useState", "useEffect", "forwardRef", "useImperativeHandle", "useRef", "cn", "withLayout", "Button", "Text", "useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "onAnchorClick", "scrollOffsetExtra", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "activeAnchorId", "setActiveAnchorId", "innerRef", "isScrollingRef", "targetAnchorIdRef", "scrollEndTimerRef", "handleScroll", "navHeight", "scrollPosition", "currentAnchorId", "anchor", "element", "elementTop", "firstElement", "firstElementTop", "headerElements", "originalStyles", "htmlElement", "originalPosition", "handleAnchorClick", "anchorId", "targetElement", "targetPosition", "tabLink", "index", "e", "ProductNav_default"]
4
+ "sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M5 7.5L10 12.5L15 7.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(\n ({ className = '', data, id, onAnchorClick, scrollOffsetExtra = 0 }, ref) => {\n const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n const [activeAnchorId, setActiveAnchorId] = useState('')\n const innerRef = useRef<HTMLDivElement>(null)\n const isScrollingRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\n const targetAnchorIdRef = useRef<string>('') // \u8BB0\u5F55\u70B9\u51FB\u76EE\u6807\u951A\u70B9\n const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) // \u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u5B9A\u65F6\u5668\n const anchorPositionsRef = useRef<Map<string, number>>(new Map()) // \u7F13\u5B58\u951A\u70B9\u539F\u59CB\u4F4D\u7F6E\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n // \u521D\u59CB\u5316\u65F6\u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u539F\u59CB\u4F4D\u7F6E\uFF08\u5728\u6EDA\u52A8\u524D\u8BA1\u7B97\uFF0C\u907F\u514D sticky \u5F71\u54CD\uFF09\n useEffect(() => {\n if (anchorList.length === 0) return\n\n // \u9875\u9762\u52A0\u8F7D\u540E\u5EF6\u8FDF\u8BA1\u7B97\uFF0C\u786E\u4FDD\u5E03\u5C40\u5B8C\u6210\n const timer = setTimeout(() => {\n // \u5148\u6EDA\u52A8\u5230\u9876\u90E8\u8BA1\u7B97\u771F\u5B9E\u4F4D\u7F6E\n const originalScrollY = window.scrollY\n window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })\n\n // \u7B49\u5F85\u4E00\u5E27\u8BA9\u5E03\u5C40\u7A33\u5B9A\n requestAnimationFrame(() => {\n const positions = new Map<string, number>()\n anchorList.forEach(anchor => {\n const element = document.getElementById(anchor.id)\n if (element) {\n const rect = element.getBoundingClientRect()\n positions.set(anchor.id, rect.top + window.scrollY)\n }\n })\n anchorPositionsRef.current = positions\n\n // \u6062\u590D\u539F\u6765\u7684\u6EDA\u52A8\u4F4D\u7F6E\n window.scrollTo({ top: originalScrollY, behavior: 'instant' as ScrollBehavior })\n })\n }, 100)\n\n return () => clearTimeout(timer)\n }, [anchorList])\n\n // \u6EDA\u52A8\u76D1\u542C\uFF1A\u68C0\u6D4B\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n useEffect(() => {\n if (anchorList.length === 0) return\n\n const handleScroll = () => {\n // \u5982\u679C\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\uFF0C\u4F7F\u7528 debounce \u68C0\u6D4B\u6EDA\u52A8\u7ED3\u675F\n if (isScrollingRef.current) {\n // \u6E05\u9664\u4E4B\u524D\u7684\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n // \u8BBE\u7F6E\u65B0\u7684\u5B9A\u65F6\u5668\uFF0C100ms \u6CA1\u6709\u65B0\u6EDA\u52A8\u4E8B\u4EF6\u5219\u8BA4\u4E3A\u6EDA\u52A8\u7ED3\u675F\n scrollEndTimerRef.current = setTimeout(() => {\n isScrollingRef.current = false\n // \u6EDA\u52A8\u7ED3\u675F\u540E\uFF0C\u786E\u4FDD\u9AD8\u4EAE\u505C\u7559\u5728\u76EE\u6807\u951A\u70B9\n if (targetAnchorIdRef.current) {\n setActiveAnchorId(targetAnchorIdRef.current)\n targetAnchorIdRef.current = ''\n }\n }, 100)\n return\n }\n\n const navHeight = innerRef.current?.offsetHeight || 0\n const scrollPosition = window.scrollY + navHeight + scrollOffsetExtra + 10 // 10px \u7F13\u51B2\n\n let currentAnchorId = ''\n\n // \u4F7F\u7528\u7F13\u5B58\u7684\u951A\u70B9\u4F4D\u7F6E\n const positions = anchorPositionsRef.current\n\n // \u904D\u5386\u6240\u6709\u951A\u70B9\uFF0C\u627E\u5230\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n for (let i = anchorList.length - 1; i >= 0; i--) {\n const anchor = anchorList[i]\n const elementTop = positions.get(anchor.id)\n if (elementTop !== undefined && scrollPosition >= elementTop) {\n currentAnchorId = anchor.id\n break\n }\n }\n\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\u4E14\u7F13\u5B58\u4E2D\u6709\u7B2C\u4E00\u4E2A\u951A\u70B9\u7684\u4F4D\u7F6E\n if (!currentAnchorId && anchorList.length > 0) {\n const firstElementTop = positions.get(anchorList[0].id)\n if (firstElementTop !== undefined && scrollPosition < firstElementTop) {\n currentAnchorId = ''\n }\n }\n\n setActiveAnchorId(currentAnchorId)\n }\n\n // \u5EF6\u8FDF\u521D\u59CB\u5316\uFF0C\u7B49\u5F85\u4F4D\u7F6E\u7F13\u5B58\u5B8C\u6210\n const timer = setTimeout(() => {\n handleScroll()\n }, 200)\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n return () => {\n clearTimeout(timer)\n window.removeEventListener('scroll', handleScroll)\n // \u6E05\u7406\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n }\n }, [anchorList, scrollOffsetExtra])\n\n // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n useEffect(() => {\n const headerElements = document.querySelectorAll('.header')\n const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n headerElements.forEach(element => {\n const htmlElement = element as HTMLElement\n // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n originalStyles.push({\n element: htmlElement,\n originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n })\n // \u8BBE\u7F6E\u4E3Arelative\n htmlElement.style.position = 'relative'\n })\n\n // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n return () => {\n originalStyles.forEach(({ element, originalPosition }) => {\n element.style.position = originalPosition === 'static' ? '' : originalPosition\n })\n }\n }, [])\n\n // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n const handleAnchorClick = (e: React.MouseEvent, anchorId: string) => {\n e.preventDefault()\n\n // \u4F7F\u7528\u7F13\u5B58\u7684\u4F4D\u7F6E\n const elementAbsoluteTop = anchorPositionsRef.current.get(anchorId)\n if (elementAbsoluteTop === undefined) {\n console.warn(`Cached position for \"${anchorId}\" not found`)\n return\n }\n\n // \u7ACB\u5373\u66F4\u65B0\u9AD8\u4EAE\u72B6\u6001\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u95EA\u70C1\n setActiveAnchorId(anchorId)\n\n // \u8BB0\u5F55\u76EE\u6807\u951A\u70B9\uFF0C\u7528\u4E8E\u6EDA\u52A8\u7ED3\u675F\u540E\u786E\u4FDD\u9AD8\u4EAE\u6B63\u786E\n targetAnchorIdRef.current = anchorId\n\n // \u6807\u8BB0\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u6682\u505C\u6EDA\u52A8\u76D1\u542C\n isScrollingRef.current = true\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const navHeight = innerRef.current?.offsetHeight || 0\n\n // \u76EE\u6807\u6EDA\u52A8\u4F4D\u7F6E = \u7F13\u5B58\u7684\u5143\u7D20\u7EDD\u5BF9\u4F4D\u7F6E - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u504F\u79FB\n const targetPosition = elementAbsoluteTop - navHeight - scrollOffsetExtra\n\n // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u4F4D\u7F6E\n window.scrollTo({\n top: targetPosition,\n behavior: 'smooth',\n })\n\n // \u66F4\u65B0 URL hash\uFF08\u4E0D\u89E6\u53D1\u9875\u9762\u8DF3\u8F6C\uFF09\n window.history.pushState(null, '', `#${anchorId}`)\n\n // \u6CE8\u610F\uFF1A\u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u7531 handleScroll \u4E2D\u7684 debounce \u903B\u8F91\u5904\u7406\n // \u4E0D\u518D\u4F7F\u7528\u56FA\u5B9A 800ms \u8D85\u65F6\uFF0C\u800C\u662F\u68C0\u6D4B\u5B9E\u9645\u6EDA\u52A8\u7ED3\u675F\n }\n\n return (\n <div\n id={id}\n ref={innerRef}\n className={cn(\n 'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n {/* Tab Links Section */}\n <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n {tabLinks.map((tabLink, index) => {\n return (\n <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n <a\n href={tabLink.link}\n className={cn(\n 'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n {\n 'text-[#6D6D6F]': index !== 0,\n 'hidden desktop:block': index === 1,\n }\n )}\n // onClick={() => onShowSpecs?.(false)}\n >\n <span>{tabLink.label}</span>\n </a>\n {index !== tabLinks.length - 1 && (\n <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n )}\n </div>\n )\n })}\n\n {/* Mobile Dropdown */}\n {tabLinks.length > 1 && (\n <Popover.Root>\n <Popover.Trigger asChild>\n <button\n className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n aria-label=\"More products\"\n >\n <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n </button>\n </Popover.Trigger>\n <Popover.Content\n className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n style={{\n boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n }}\n side=\"bottom\"\n align=\"end\"\n alignOffset={10}\n sideOffset={10}\n >\n {tabLinks.slice(1).map(tabLink => (\n <a\n key={tabLink.link}\n href={tabLink.link}\n className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n >\n <span>{tabLink.label}</span>\n </a>\n ))}\n </Popover.Content>\n </Popover.Root>\n )}\n </div>\n\n {/* Mobile Actions */}\n <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* Anchor Navigation */}\n <div className=\"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n {anchorList.map((anchor, index) => (\n <a\n key={anchor.id}\n href={`#${anchor.id}`}\n className=\"product-nav-anchor-link\"\n onClick={e => {\n // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6,\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\u5E76\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (onAnchorClick) {\n e.preventDefault()\n // \u6807\u8BB0\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u9AD8\u4EAE\u95EA\u70C1\n setActiveAnchorId(anchor.id)\n targetAnchorIdRef.current = anchor.id\n isScrollingRef.current = true\n onAnchorClick(anchor, index)\n } else {\n // \u4F7F\u7528\u9ED8\u8BA4\u7684\u951A\u70B9\u6EDA\u52A8\u884C\u4E3A\uFF0C\u5E26\u504F\u79FB\u91CF\n handleAnchorClick(e, anchor.id)\n }\n }}\n >\n <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n {anchor.label}\n </Text>\n <div\n className={cn(\n 'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n {\n '!bg-brand-0': activeAnchorId === anchor.id,\n }\n )}\n />\n </a>\n ))}\n </div>\n </div>\n\n {/* Desktop Actions */}\n <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n )\n }\n)\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
5
+ "mappings": "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",
6
+ "names": ["jsx", "jsxs", "useState", "useEffect", "forwardRef", "useImperativeHandle", "useRef", "cn", "withLayout", "Button", "Text", "useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "onAnchorClick", "scrollOffsetExtra", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "activeAnchorId", "setActiveAnchorId", "innerRef", "isScrollingRef", "targetAnchorIdRef", "scrollEndTimerRef", "anchorPositionsRef", "timer", "originalScrollY", "positions", "anchor", "element", "rect", "handleScroll", "navHeight", "scrollPosition", "currentAnchorId", "i", "elementTop", "firstElementTop", "headerElements", "originalStyles", "htmlElement", "originalPosition", "handleAnchorClick", "anchorId", "elementAbsoluteTop", "targetPosition", "tabLink", "index", "e", "ProductNav_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.70",
3
+ "version": "1.1.72",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",