@anker-in/headless-ui 1.1.89 → 1.1.90

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 (13) hide show
  1. package/dist/cjs/biz-components/ProductNav/ProductNav.js +1 -1
  2. package/dist/cjs/biz-components/ProductNav/ProductNav.js.map +3 -3
  3. package/dist/cjs/biz-components/Tabs/Tabs.js +1 -1
  4. package/dist/cjs/biz-components/Tabs/Tabs.js.map +3 -3
  5. package/dist/cjs/biz-components/Tabs/types.d.ts +3 -0
  6. package/dist/cjs/biz-components/Tabs/types.js +1 -1
  7. package/dist/cjs/biz-components/Tabs/types.js.map +1 -1
  8. package/dist/esm/biz-components/ProductNav/ProductNav.js +1 -1
  9. package/dist/esm/biz-components/ProductNav/ProductNav.js.map +3 -3
  10. package/dist/esm/biz-components/Tabs/Tabs.js +1 -1
  11. package/dist/esm/biz-components/Tabs/Tabs.js.map +3 -3
  12. package/dist/esm/biz-components/Tabs/types.d.ts +3 -0
  13. package/package.json +1 -1
package/dist/cjs/biz-components/ProductNav/ProductNav.js CHANGED
@@ -1,2 +1,2 @@
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);
1
+ "use strict";"use client";var F=Object.create;var N=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var $=(r,l)=>{for(var p in l)N(r,p,{get:l[p],enumerable:!0})},M=(r,l,p,x)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of I(l))!_.call(r,c)&&c!==p&&N(r,c,{get:()=>l[c],enumerable:!(x=G(l,c))||x.enumerable});return r};var q=(r,l,p)=>(p=r!=null?F(V(r)):{},M(l||!r||!r.__esModule?N(p,"default",{value:r,enumerable:!0}):p,r)),O=r=>M(N({},"__esModule",{value:!0}),r);var U={};$(U,{default:()=>Q});module.exports=O(U);var t=require("react/jsx-runtime"),n=require("react"),E=require("../../helpers/utils.js"),H=require("../../shared/Styles.js"),m=require("../../components/index.js"),A=require("../../hooks/useExposure.js"),S=q(require("@radix-ui/react-popover"));const W="navigation",J="product_nav",K=r=>(0,t.jsx)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...r,children:(0,t.jsx)("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),D=(0,n.forwardRef)(({className:r="",data:l,id:p,onAnchorClick:x,scrollOffsetExtra:c=0},B)=>{const{tabLinks:k=[],anchorList:i=[],textLink:d,buyBtn:f,theme:z="light"}=l||{},[j,b]=(0,n.useState)(""),g=(0,n.useRef)(null),y=(0,n.useRef)(!1),h=(0,n.useRef)(""),w=(0,n.useRef)(null),P=(0,n.useRef)(new Map);(0,n.useImperativeHandle)(B,()=>g.current),(0,A.useExposure)(g,{componentType:W,componentName:J});const T=(0,n.useCallback)(()=>{if(i.length===0)return;const e=window.scrollY;window.scrollTo({top:0,behavior:"instant"}),requestAnimationFrame(()=>{const o=new Map;i.forEach(a=>{const s=document.getElementById(a.id);if(s){const u=s.getBoundingClientRect();o.set(a.id,u.top+window.scrollY)}}),P.current=o,window.scrollTo({top:e,behavior:"instant"})})},[i]);(0,n.useEffect)(()=>{if(i.length===0)return;const e=setTimeout(T,100);return()=>clearTimeout(e)},[i,T]),(0,n.useEffect)(()=>{if(i.length===0)return;let e=null;const o=new ResizeObserver(()=>{e&&clearTimeout(e),e=setTimeout(T,150)});return o.observe(document.body),()=>{o.disconnect(),e&&clearTimeout(e)}},[i,T]),(0,n.useEffect)(()=>{if(i.length===0)return;const e=()=>{if(y.current){w.current&&clearTimeout(w.current),w.current=setTimeout(()=>{y.current=!1,h.current&&(b(h.current),h.current="")},100);return}const a=g.current?.offsetHeight||0,s=window.scrollY+a+c+10;let u="";const R=P.current;for(let v=i.length-1;v>=0;v--){const C=i[v],L=R.get(C.id);if(L!==void 0&&s>=L){u=C.id;break}}if(!u&&i.length>0){const v=R.get(i[0].id);v!==void 0&&s<v&&(u="")}b(u)},o=setTimeout(()=>{e()},200);return window.addEventListener("scroll",e,{passive:!0}),()=>{clearTimeout(o),window.removeEventListener("scroll",e),w.current&&clearTimeout(w.current)}},[i,c]),(0,n.useEffect)(()=>{const e=document.querySelectorAll(".header"),o=[];return e.forEach(a=>{const s=a;o.push({element:s,originalPosition:s.style.position||getComputedStyle(s).position}),s.style.position="relative"}),()=>{o.forEach(({element:a,originalPosition:s})=>{a.style.position=s==="static"?"":s})}},[]);const Y=(e,o)=>{e.preventDefault();const a=P.current.get(o);if(a===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,u=a-s-c;window.scrollTo({top:u,behavior:"smooth"}),window.history.pushState(null,"",`#${o}`)};return(0,t.jsxs)("div",{id:p,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":z==="dark"},r),children:[(0,t.jsxs)("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[(0,t.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,t.jsxs)("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[k.map((e,o)=>(0,t.jsxs)("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[(0,t.jsx)("a",{href:e.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,t.jsx)("span",{children:e.label})}),o!==k.length-1&&(0,t.jsx)("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},e.link||o)),k.length>1&&(0,t.jsxs)(S.Root,{children:[(0,t.jsx)(S.Trigger,{asChild:!0,children:(0,t.jsx)("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:(0,t.jsx)(K,{className:"text-[#1D1D1F]"})})}),(0,t.jsx)(S.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(e=>(0,t.jsx)("a",{href:e.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:(0,t.jsx)("span",{children:e.label})},e.link))})]})]}),(0,t.jsxs)("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[d?.link&&(0,t.jsx)("a",{href:d.link,target:d.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:(0,t.jsx)(m.Text,{size:2,className:"text-nowrap",children:d.text})}),f?.link&&(0,t.jsx)(m.Button,{as:"a",href:f.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:f.text})]})]}),(0,t.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:i.map((e,o)=>(0,t.jsxs)("a",{href:`#${e.id}`,className:"product-nav-anchor-link",onClick:a=>{x?(a.preventDefault(),b(e.id),h.current=e.id,y.current=!0,x(e,o)):Y(a,e.id)},children:[(0,t.jsx)(m.Text,{size:2,className:"product-nav-anchor-text text-nowrap",children:e.label}),(0,t.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":j===e.id})})]},e.id))})]}),(0,t.jsxs)("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[d?.link&&(0,t.jsx)("a",{href:d.link,target:d.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:(0,t.jsx)(m.Text,{size:2,className:"text-nowrap",children:d.text})}),f?.link&&(0,t.jsx)(m.Button,{as:"a",href:f.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:f.text})]})]})});D.displayName="ProductNav";var Q=(0,H.withLayout)(D);
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 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"]
4
+ "sourcesContent": ["'use client'\nimport { useState, useEffect, useCallback, 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 // \u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u7EDD\u5BF9\u4F4D\u7F6E\uFF08\u6EDA\u52A8\u5230\u9876\u90E8\u540E\u8BA1\u7B97\uFF0C\u907F\u514D sticky \u5F71\u54CD\uFF09\n const updateAnchorPositions = useCallback(() => {\n if (anchorList.length === 0) return\n\n const originalScrollY = window.scrollY\n window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })\n\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 window.scrollTo({ top: originalScrollY, behavior: 'instant' as ScrollBehavior })\n })\n }, [anchorList])\n\n // \u521D\u59CB\u5316\u65F6\u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u539F\u59CB\u4F4D\u7F6E\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(updateAnchorPositions, 100)\n\n return () => clearTimeout(timer)\n }, [anchorList, updateAnchorPositions])\n\n // \u76D1\u542C body \u9AD8\u5EA6\u53D8\u5316\uFF0C\u9AD8\u5EA6\u6539\u53D8\u65F6\u91CD\u65B0\u8BA1\u7B97\u951A\u70B9\u4F4D\u7F6E\n useEffect(() => {\n if (anchorList.length === 0) return\n\n let resizeTimer: ReturnType<typeof setTimeout> | null = null\n\n const observer = new ResizeObserver(() => {\n // debounce\uFF0C\u907F\u514D\u9AD8\u9891\u89E6\u53D1\n if (resizeTimer) clearTimeout(resizeTimer)\n resizeTimer = setTimeout(updateAnchorPositions, 150)\n })\n\n observer.observe(document.body)\n\n return () => {\n observer.disconnect()\n if (resizeTimer) clearTimeout(resizeTimer)\n }\n }, [anchorList, updateAnchorPositions])\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", "updateAnchorPositions", "originalScrollY", "positions", "anchor", "element", "rect", "timer", "resizeTimer", "observer", "handleScroll", "navHeight", "scrollPosition", "currentAnchorId", "i", "elementTop", "firstElementTop", "headerElements", "originalStyles", "htmlElement", "originalPosition", "handleAnchorClick", "anchorId", "elementAbsoluteTop", "targetPosition", "tabLink", "index", "e"]
7
7
  }
package/dist/cjs/biz-components/Tabs/Tabs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var w=Object.create;var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var M=(r,e)=>{for(var l in e)c(r,l,{get:e[l],enumerable:!0})},f=(r,e,l,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of G(e))!D.call(r,o)&&o!==l&&c(r,o,{get:()=>e[o],enumerable:!(p=E(e,o))||p.enumerable});return r};var s=(r,e,l)=>(l=r!=null?w(x(r)):{},f(e||!r||!r.__esModule?c(l,"default",{value:r,enumerable:!0}):l,r)),R=r=>f(c({},"__esModule",{value:!0}),r);var H={};M(H,{default:()=>F});module.exports=R(H);var a=require("react/jsx-runtime"),n=require("../../shared/Styles.js"),d=s(require("../../components/tabs.js")),m=require("../../helpers/index.js"),b=s(require("react")),h=s(require("../ShelfDisplay/index.js")),k=s(require("../AccordionCards/index.js")),N=s(require("../Faq/index.js")),g=s(require("../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js")),T=s(require("../Title/index.js")),v=s(require("../Graphic/index.js")),L=s(require("../WhyChoose/index.js")),P=s(require("../BrandEquity/index.js")),A=s(require("../BrandCardLink/index.js"));const y=b.default.forwardRef(({data:r,className:e},l)=>{const{theme:p,shape:o,align:q,tabs:t=[],sectionTitle:u}=r,B=i=>i?.blockType==="ipc-shelfdisplay"?(0,a.jsx)(h.default,{data:i}):i?.blockType==="ipc-multiLayoutGraphicBlock"?(0,a.jsx)(g.default,{data:i}):i?.blockType==="ipc-accordioncards"?(0,a.jsx)(k.default,{data:i}):i?.blockType==="ipc-faq"?(0,a.jsx)(N.default,{data:i}):i?.blockType==="ipc-graphic"?(0,a.jsx)(v.default,{data:i}):i?.blockType==="ipc-whychoose"?(0,a.jsx)(L.default,{data:i}):i?.blockType==="ipc-brand-equity"?(0,a.jsx)(P.default,{data:i}):i?.blockType==="ipc-brand-card-link"?(0,a.jsx)(A.default,{data:i}):null;return(0,a.jsxs)("section",{ref:l,className:(0,m.cn)(p==="dark"?"aiui-dark":"",e),children:[u&&(0,a.jsx)(T.default,{className:"section-title",data:{title:u}}),(0,a.jsxs)(d.Tabs,{shape:o,align:q,defaultValue:t?.[0]?.id||t?.[0]?.tabName,children:[Array.isArray(t)&&t.length>1&&(0,a.jsx)(d.TabsList,{className:"tabs-list",children:t.map(i=>(0,a.jsx)(d.TabsTrigger,{value:i.id||i.tabName,className:"tabs-trigger",children:i.tabName},i.id||i.tabName))}),(Array.isArray(t)?t:[])?.map(i=>(0,a.jsxs)(d.TabsContent,{value:i.id||i.tabName,className:`tabs-content ${t?.length>1?"mt-[24px]":""}`,children:[!(0,m.isLexicalEmpty)(i.caption)||!(0,m.isLexicalEmpty)(i?.subtitle)?(0,a.jsx)(T.default,{className:"tabs-title",data:{caption:i?.caption,subtitle:i?.subtitle}}):null,i.tabContent?.[0]?B(i.tabContent?.[0]):null]},i.id||i.tabName))]})]})});y.displayName="Tabs";var F=(0,n.withLayout)(y);
1
+ "use strict";"use client";var w=Object.create;var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var I=(r,a)=>{for(var l in a)c(r,l,{get:a[l],enumerable:!0})},u=(r,a,l,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let m of G(a))!D.call(r,m)&&m!==l&&c(r,m,{get:()=>a[m],enumerable:!(p=E(a,m))||p.enumerable});return r};var s=(r,a,l)=>(l=r!=null?w(W(r)):{},u(a||!r||!r.__esModule?c(l,"default",{value:r,enumerable:!0}):l,r)),M=r=>u(c({},"__esModule",{value:!0}),r);var F={};I(F,{default:()=>R});module.exports=M(F);var e=require("react/jsx-runtime"),n=require("../../shared/Styles.js"),d=s(require("../../components/tabs.js")),o=require("../../helpers/index.js"),b=s(require("react")),h=s(require("../ShelfDisplay/index.js")),k=s(require("../AccordionCards/index.js")),g=s(require("../Faq/index.js")),N=s(require("../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js")),T=s(require("../Title/index.js")),v=s(require("../Graphic/index.js")),L=s(require("../WhyChoose/index.js")),P=s(require("../BrandEquity/index.js")),A=s(require("../BrandCardLink/index.js")),q=s(require("../ImageWithText/index.js"));const y=b.default.forwardRef(({data:r,className:a},l)=>{const{theme:p,shape:m,align:x,tabs:t=[],sectionTitle:f}=r,B=i=>i?.blockType==="ipc-shelfdisplay"?(0,e.jsx)(h.default,{data:i}):i?.blockType==="ipc-multiLayoutGraphicBlock"?(0,e.jsx)(N.default,{data:i}):i?.blockType==="ipc-accordioncards"?(0,e.jsx)(k.default,{data:i}):i?.blockType==="ipc-faq"?(0,e.jsx)(g.default,{data:i}):i?.blockType==="ipc-graphic"?(0,e.jsx)(v.default,{data:i}):i?.blockType==="ipc-whychoose"?(0,e.jsx)(L.default,{data:i}):i?.blockType==="ipc-brand-equity"?(0,e.jsx)(P.default,{data:i}):i?.blockType==="ipc-brand-card-link"?(0,e.jsx)(A.default,{data:i}):i?.blockType==="ImageWithText"?(0,e.jsx)(q.default,{data:i}):null;return(0,e.jsxs)("section",{ref:l,className:(0,o.cn)(p==="dark"?"aiui-dark":"",a),children:[f&&(0,e.jsx)(T.default,{className:"section-title",data:{title:f}}),(0,e.jsxs)(d.Tabs,{shape:m,align:x,defaultValue:t?.[0]?.id||t?.[0]?.tabName,children:[Array.isArray(t)&&t.length>1&&(0,e.jsx)(d.TabsList,{className:"tabs-list",children:t.map(i=>(0,e.jsx)(d.TabsTrigger,{value:i.id||i.tabName,className:"tabs-trigger",children:i.tabName},i.id||i.tabName))}),(Array.isArray(t)?t:[])?.map(i=>(0,e.jsxs)(d.TabsContent,{value:i.id||i.tabName,className:`tabs-content ${t?.length>1?"mt-[24px]":""}`,children:[!(0,o.isLexicalEmpty)(i.caption)||!(0,o.isLexicalEmpty)(i?.subtitle)?(0,e.jsx)(T.default,{className:"tabs-title",data:{caption:i?.caption,subtitle:i?.subtitle}}):null,i.tabContent?.[0]?B(i.tabContent?.[0]):null]},i.id||i.tabName))]})]})});y.displayName="Tabs";var R=(0,n.withLayout)(y);
2
2
  //# sourceMappingURL=Tabs.js.map
package/dist/cjs/biz-components/Tabs/Tabs.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Tabs/Tabs.tsx"],
4
- "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn, isLexicalEmpty } from '../../helpers/index.js'\nimport type { TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\nimport WhyChoose from '../WhyChoose/index.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport BrandCardLink from '../BrandCardLink/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n const { theme, shape, align, tabs = [], sectionTitle } = data\n\n const renderTabContent = (tabContent: TabsProps['data']['tabs'][number]['tabContent'][number]) => {\n if (tabContent?.blockType === 'ipc-shelfdisplay') {\n return <ShelfDisplay data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n return <MultiLayoutGraphicBlock data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-accordioncards') {\n return <AccordionCards data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-faq') {\n return <Faq data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-graphic') {\n return <Graphic data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-whychoose') {\n return <WhyChoose data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-equity') {\n return <BrandEquity data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-card-link') {\n return <BrandCardLink data={tabContent} />\n } else {\n return null\n }\n }\n\n return (\n <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs?.[0]?.id || tabs?.[0]?.tabName}>\n {/* <TabsPrimitive.TabsList className=\"tabs-list\">\n {(Array.isArray(tabs) ? tabs : [])?.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList> */}\n {/* Tab\u4E3A1\u65F6\uFF0C\u4E0D\u5C55\u793Atab\u6309\u94AE */}\n {Array.isArray(tabs) && tabs.length > 1 && (\n <TabsPrimitive.TabsList className=\"tabs-list\">\n {tabs.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList>\n )}\n {(Array.isArray(tabs) ? tabs : [])?.map((tab: any) => (\n <TabsPrimitive.TabsContent\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className={`tabs-content ${tabs?.length > 1 ? 'mt-[24px]' : ''}`}\n >\n {!isLexicalEmpty(tab.caption) || !isLexicalEmpty(tab?.subtitle) ? (\n <Title className=\"tabs-title\" data={{ caption: tab?.caption, subtitle: tab?.subtitle }} />\n ) : null}\n {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n </TabsPrimitive.TabsContent>\n ))}\n </TabsPrimitive.Tabs>\n </section>\n )\n})\nTabs.displayName = 'Tabs'\nexport default withLayout(Tabs)\n"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqBa,IAAAI,EAAA,6BApBbC,EAA2B,kCAC3BC,EAA+B,uCAC/BC,EAAmC,kCAEnCC,EAAkB,oBAClBC,EAAyB,uCACzBC,EAA2B,yCAC3BC,EAAgB,8BAChBC,EAAoC,oEACpCC,EAAkB,gCAClBC,EAAoB,kCACpBC,EAAsB,oCACtBC,EAAwB,sCACxBC,EAA0B,wCAE1B,MAAMC,EAAO,EAAAC,QAAM,WAAsC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAO,CAAC,EAAG,aAAAC,CAAa,EAAIP,EAEnDQ,EAAoBC,GACpBA,GAAY,YAAc,sBACrB,OAAC,EAAAC,QAAA,CAAa,KAAMD,EAAY,EAC9BA,GAAY,YAAc,iCAC5B,OAAC,EAAAE,QAAA,CAAwB,KAAMF,EAAY,EACzCA,GAAY,YAAc,wBAC5B,OAAC,EAAAG,QAAA,CAAe,KAAMH,EAAY,EAChCA,GAAY,YAAc,aAC5B,OAAC,EAAAI,QAAA,CAAI,KAAMJ,EAAY,EACrBA,GAAY,YAAc,iBAC5B,OAAC,EAAAK,QAAA,CAAQ,KAAML,EAAY,EACzBA,GAAY,YAAc,mBAC5B,OAAC,EAAAM,QAAA,CAAU,KAAMN,EAAY,EAC3BA,GAAY,YAAc,sBAC5B,OAAC,EAAAO,QAAA,CAAY,KAAMP,EAAY,EAC7BA,GAAY,YAAc,yBAC5B,OAAC,EAAAQ,QAAA,CAAc,KAAMR,EAAY,EAEjC,KAIX,SACE,QAAC,WAAQ,IAAKP,EAAc,aAAW,MAAGC,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,MAAgB,OAAC,EAAAW,QAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOX,CAAa,EAAG,KACjF,QAACrB,EAAc,KAAd,CAAmB,MAAOkB,EAAO,MAAOC,EAAO,aAAcC,IAAO,CAAC,GAAG,IAAMA,IAAO,CAAC,GAAG,QAavF,gBAAM,QAAQA,CAAI,GAAKA,EAAK,OAAS,MACpC,OAACpB,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAoB,EAAK,IAAIa,MACR,OAACjC,EAAc,YAAd,CAEC,MAAOiC,EAAI,IAAMA,EAAI,QACrB,UAAU,eAET,SAAAA,EAAI,SAJAA,EAAI,IAAMA,EAAI,OAKrB,CACD,EACH,GAEA,MAAM,QAAQb,CAAI,EAAIA,EAAO,CAAC,IAAI,IAAKa,MACvC,QAACjC,EAAc,YAAd,CAEC,MAAOiC,EAAI,IAAMA,EAAI,QACrB,UAAW,gBAAgBb,GAAM,OAAS,EAAI,YAAc,EAAE,GAE7D,cAAC,kBAAea,EAAI,OAAO,GAAK,IAAC,kBAAeA,GAAK,QAAQ,KAC5D,OAAC,EAAAD,QAAA,CAAM,UAAU,aAAa,KAAM,CAAE,QAASC,GAAK,QAAS,SAAUA,GAAK,QAAS,EAAG,EACtF,KACHA,EAAI,aAAa,CAAC,EAAIX,EAAiBW,EAAI,aAAa,CAAC,CAAC,EAAI,OAP1DA,EAAI,IAAMA,EAAI,OAQrB,CACD,GACH,GACF,CAEJ,CAAC,EACDrB,EAAK,YAAc,OACnB,IAAOhB,KAAQ,cAAWgB,CAAI",
6
- "names": ["Tabs_exports", "__export", "Tabs_default", "__toCommonJS", "import_jsx_runtime", "import_Styles", "TabsPrimitive", "import_helpers", "import_react", "import_ShelfDisplay", "import_AccordionCards", "import_Faq", "import_MultiLayoutGraphicBlock", "import_Title", "import_Graphic", "import_WhyChoose", "import_BrandEquity", "import_BrandCardLink", "Tabs", "React", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "sectionTitle", "renderTabContent", "tabContent", "ShelfDisplay", "MultiLayoutGraphicBlock", "AccordionCards", "Faq", "Graphic", "WhyChoose", "BrandEquity", "BrandCardLink", "Title", "tab"]
4
+ "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn, isLexicalEmpty } from '../../helpers/index.js'\nimport type { TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\nimport WhyChoose from '../WhyChoose/index.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport BrandCardLink from '../BrandCardLink/index.js'\nimport ImageWithText from '../ImageWithText/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n const { theme, shape, align, tabs = [], sectionTitle } = data\n\n const renderTabContent = (tabContent: TabsProps['data']['tabs'][number]['tabContent'][number]) => {\n if (tabContent?.blockType === 'ipc-shelfdisplay') {\n return <ShelfDisplay data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n return <MultiLayoutGraphicBlock data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-accordioncards') {\n return <AccordionCards data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-faq') {\n return <Faq data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-graphic') {\n return <Graphic data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-whychoose') {\n return <WhyChoose data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-equity') {\n return <BrandEquity data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-card-link') {\n return <BrandCardLink data={tabContent} />\n } else if (tabContent?.blockType === 'ImageWithText') {\n return <ImageWithText data={tabContent} />\n } else {\n return null\n }\n }\n\n return (\n <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs?.[0]?.id || tabs?.[0]?.tabName}>\n {/* <TabsPrimitive.TabsList className=\"tabs-list\">\n {(Array.isArray(tabs) ? tabs : [])?.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList> */}\n {/* Tab\u4E3A1\u65F6\uFF0C\u4E0D\u5C55\u793Atab\u6309\u94AE */}\n {Array.isArray(tabs) && tabs.length > 1 && (\n <TabsPrimitive.TabsList className=\"tabs-list\">\n {tabs.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList>\n )}\n {(Array.isArray(tabs) ? tabs : [])?.map((tab: any) => (\n <TabsPrimitive.TabsContent\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className={`tabs-content ${tabs?.length > 1 ? 'mt-[24px]' : ''}`}\n >\n {!isLexicalEmpty(tab.caption) || !isLexicalEmpty(tab?.subtitle) ? (\n <Title className=\"tabs-title\" data={{ caption: tab?.caption, subtitle: tab?.subtitle }} />\n ) : null}\n {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n </TabsPrimitive.TabsContent>\n ))}\n </TabsPrimitive.Tabs>\n </section>\n )\n})\nTabs.displayName = 'Tabs'\nexport default withLayout(Tabs)\n"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBa,IAAAI,EAAA,6BArBbC,EAA2B,kCAC3BC,EAA+B,uCAC/BC,EAAmC,kCAEnCC,EAAkB,oBAClBC,EAAyB,uCACzBC,EAA2B,yCAC3BC,EAAgB,8BAChBC,EAAoC,oEACpCC,EAAkB,gCAClBC,EAAoB,kCACpBC,EAAsB,oCACtBC,EAAwB,sCACxBC,EAA0B,wCAC1BC,EAA0B,wCAE1B,MAAMC,EAAO,EAAAC,QAAM,WAAsC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAO,CAAC,EAAG,aAAAC,CAAa,EAAIP,EAEnDQ,EAAoBC,GACpBA,GAAY,YAAc,sBACrB,OAAC,EAAAC,QAAA,CAAa,KAAMD,EAAY,EAC9BA,GAAY,YAAc,iCAC5B,OAAC,EAAAE,QAAA,CAAwB,KAAMF,EAAY,EACzCA,GAAY,YAAc,wBAC5B,OAAC,EAAAG,QAAA,CAAe,KAAMH,EAAY,EAChCA,GAAY,YAAc,aAC5B,OAAC,EAAAI,QAAA,CAAI,KAAMJ,EAAY,EACrBA,GAAY,YAAc,iBAC5B,OAAC,EAAAK,QAAA,CAAQ,KAAML,EAAY,EACzBA,GAAY,YAAc,mBAC5B,OAAC,EAAAM,QAAA,CAAU,KAAMN,EAAY,EAC3BA,GAAY,YAAc,sBAC5B,OAAC,EAAAO,QAAA,CAAY,KAAMP,EAAY,EAC7BA,GAAY,YAAc,yBAC5B,OAAC,EAAAQ,QAAA,CAAc,KAAMR,EAAY,EAC/BA,GAAY,YAAc,mBAC5B,OAAC,EAAAS,QAAA,CAAc,KAAMT,EAAY,EAEjC,KAIX,SACE,QAAC,WAAQ,IAAKP,EAAc,aAAW,MAAGC,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,MAAgB,OAAC,EAAAY,QAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOZ,CAAa,EAAG,KACjF,QAACtB,EAAc,KAAd,CAAmB,MAAOmB,EAAO,MAAOC,EAAO,aAAcC,IAAO,CAAC,GAAG,IAAMA,IAAO,CAAC,GAAG,QAavF,gBAAM,QAAQA,CAAI,GAAKA,EAAK,OAAS,MACpC,OAACrB,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAqB,EAAK,IAAIc,MACR,OAACnC,EAAc,YAAd,CAEC,MAAOmC,EAAI,IAAMA,EAAI,QACrB,UAAU,eAET,SAAAA,EAAI,SAJAA,EAAI,IAAMA,EAAI,OAKrB,CACD,EACH,GAEA,MAAM,QAAQd,CAAI,EAAIA,EAAO,CAAC,IAAI,IAAKc,MACvC,QAACnC,EAAc,YAAd,CAEC,MAAOmC,EAAI,IAAMA,EAAI,QACrB,UAAW,gBAAgBd,GAAM,OAAS,EAAI,YAAc,EAAE,GAE7D,cAAC,kBAAec,EAAI,OAAO,GAAK,IAAC,kBAAeA,GAAK,QAAQ,KAC5D,OAAC,EAAAD,QAAA,CAAM,UAAU,aAAa,KAAM,CAAE,QAASC,GAAK,QAAS,SAAUA,GAAK,QAAS,EAAG,EACtF,KACHA,EAAI,aAAa,CAAC,EAAIZ,EAAiBY,EAAI,aAAa,CAAC,CAAC,EAAI,OAP1DA,EAAI,IAAMA,EAAI,OAQrB,CACD,GACH,GACF,CAEJ,CAAC,EACDtB,EAAK,YAAc,OACnB,IAAOjB,KAAQ,cAAWiB,CAAI",
6
+ "names": ["Tabs_exports", "__export", "Tabs_default", "__toCommonJS", "import_jsx_runtime", "import_Styles", "TabsPrimitive", "import_helpers", "import_react", "import_ShelfDisplay", "import_AccordionCards", "import_Faq", "import_MultiLayoutGraphicBlock", "import_Title", "import_Graphic", "import_WhyChoose", "import_BrandEquity", "import_BrandCardLink", "import_ImageWithText", "Tabs", "React", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "sectionTitle", "renderTabContent", "tabContent", "ShelfDisplay", "MultiLayoutGraphicBlock", "AccordionCards", "Faq", "Graphic", "WhyChoose", "BrandEquity", "BrandCardLink", "ImageWithText", "Title", "tab"]
7
7
  }
package/dist/cjs/biz-components/Tabs/types.d.ts CHANGED
@@ -7,6 +7,7 @@ import type { GraphicProps } from '../Graphic/index.js';
7
7
  import type { WhyChooseProps } from '../WhyChoose/types.js';
8
8
  import type { BrandEquityProps } from '../BrandEquity/types.js';
9
9
  import type { BrandCardLinkProps } from '../BrandCardLink/types.js';
10
+ import type { ImageWithTextProps } from '../ImageWithText/types.js';
10
11
  export type TabsProps = {
11
12
  data: {
12
13
  sectionTitle?: string;
@@ -32,6 +33,8 @@ export type TabsProps = {
32
33
  blockType: 'ipc-brand-equity';
33
34
  })[] | (BrandCardLinkProps['data'] & {
34
35
  blockType: 'ipc-brand-card-link';
36
+ })[] | (ImageWithTextProps['data'] & {
37
+ blockType: 'ImageWithText';
35
38
  })[];
36
39
  }[];
37
40
  };
package/dist/cjs/biz-components/Tabs/types.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var t=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var e=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var c=(o,p,i,r)=>{if(p&&typeof p=="object"||typeof p=="function")for(let a of e(p))!y.call(o,a)&&a!==i&&t(o,a,{get:()=>p[a],enumerable:!(r=s(p,a))||r.enumerable});return o};var d=o=>c(t({},"__esModule",{value:!0}),o);var l={};module.exports=d(l);
1
+ "use strict";var t=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var c=(o,p,e,r)=>{if(p&&typeof p=="object"||typeof p=="function")for(let a of s(p))!y.call(o,a)&&a!==e&&t(o,a,{get:()=>p[a],enumerable:!(r=i(p,a))||r.enumerable});return o};var d=o=>c(t({},"__esModule",{value:!0}),o);var l={};module.exports=d(l);
2
2
  //# sourceMappingURL=types.js.map
package/dist/cjs/biz-components/Tabs/types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Tabs/types.ts"],
4
- "sourcesContent": ["import type { Align, Shape, Theme } from '../../types/props.js'\nimport type { MultiLayoutGraphicBlockProps } from '../MultiLayoutGraphicBlock/types.js'\nimport type { ShelfDisplayProps } from '../ShelfDisplay/shelfDisplay.js'\nimport type { AccordionCardsType } from '../AccordionCards/index.js'\nimport type { FaqProps } from '../Faq/types.js'\nimport type { GraphicProps } from '../Graphic/index.js'\nimport type { WhyChooseProps } from '../WhyChoose/types.js'\nimport type { BrandEquityProps } from '../BrandEquity/types.js'\nimport type { BrandCardLinkProps } from '../BrandCardLink/types.js'\n\nexport type TabsProps = {\n data: {\n sectionTitle?: string\n theme: Theme\n shape: Shape\n align: Align\n tabs: {\n id: string\n tabName: string\n tabContent:\n | (ShelfDisplayProps['data'] & { blockType: 'ipc-shelfdisplay' })[]\n | (MultiLayoutGraphicBlockProps['data'] & { blockType: 'ipc-multiLayoutGraphicBlock' })[]\n | (AccordionCardsType['data'] & { blockType: 'ipc-accordioncards' })[]\n | (FaqProps['data'] & { blockType: 'ipc-faq' })[]\n | (GraphicProps['data'] & { blockType: 'ipc-graphic' })[]\n | (WhyChooseProps['data'] & { blockType: 'ipc-whychoose' })[]\n | (BrandEquityProps['data'] & { blockType: 'ipc-brand-equity' })[]\n | (BrandCardLinkProps['data'] & { blockType: 'ipc-brand-card-link' })[]\n }[]\n }\n className?: string\n}\n"],
4
+ "sourcesContent": ["import type { Align, Shape, Theme } from '../../types/props.js'\nimport type { MultiLayoutGraphicBlockProps } from '../MultiLayoutGraphicBlock/types.js'\nimport type { ShelfDisplayProps } from '../ShelfDisplay/shelfDisplay.js'\nimport type { AccordionCardsType } from '../AccordionCards/index.js'\nimport type { FaqProps } from '../Faq/types.js'\nimport type { GraphicProps } from '../Graphic/index.js'\nimport type { WhyChooseProps } from '../WhyChoose/types.js'\nimport type { BrandEquityProps } from '../BrandEquity/types.js'\nimport type { BrandCardLinkProps } from '../BrandCardLink/types.js'\nimport type { ImageWithTextProps } from '../ImageWithText/types.js'\n\nexport type TabsProps = {\n data: {\n sectionTitle?: string\n theme: Theme\n shape: Shape\n align: Align\n tabs: {\n id: string\n tabName: string\n tabContent:\n | (ShelfDisplayProps['data'] & { blockType: 'ipc-shelfdisplay' })[]\n | (MultiLayoutGraphicBlockProps['data'] & { blockType: 'ipc-multiLayoutGraphicBlock' })[]\n | (AccordionCardsType['data'] & { blockType: 'ipc-accordioncards' })[]\n | (FaqProps['data'] & { blockType: 'ipc-faq' })[]\n | (GraphicProps['data'] & { blockType: 'ipc-graphic' })[]\n | (WhyChooseProps['data'] & { blockType: 'ipc-whychoose' })[]\n | (BrandEquityProps['data'] & { blockType: 'ipc-brand-equity' })[]\n | (BrandCardLinkProps['data'] & { blockType: 'ipc-brand-card-link' })[]\n | (ImageWithTextProps['data'] & { blockType: 'ImageWithText' })[]\n }[]\n }\n className?: string\n}\n"],
5
5
  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
6
6
  "names": ["types_exports", "__toCommonJS"]
7
7
  }
package/dist/esm/biz-components/ProductNav/ProductNav.js CHANGED
@@ -1,2 +1,2 @@
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};
1
+ "use client";import{jsx as o,jsxs as i}from"react/jsx-runtime";import{useState as Y,useEffect as w,useCallback as F,forwardRef as G,useImperativeHandle as I,useRef as f}from"react";import{cn as T}from"../../helpers/utils.js";import{withLayout as V}from"../../shared/Styles.js";import{Button as L,Text as N}from"../../components/index.js";import{useExposure as _}from"../../hooks/useExposure.js";import*as E from"@radix-ui/react-popover";const $="navigation",q="product_nav",O=k=>o("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...k,children:o("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),M=G(({className:k="",data:D,id:H,onAnchorClick:P,scrollOffsetExtra:b=0},A)=>{const{tabLinks:v=[],anchorList:r=[],textLink:a,buyBtn:p,theme:B="light"}=D||{},[z,x]=Y(""),d=f(null),g=f(!1),u=f(""),m=f(null),y=f(new Map);I(A,()=>d.current),_(d,{componentType:$,componentName:q});const h=F(()=>{if(r.length===0)return;const e=window.scrollY;window.scrollTo({top:0,behavior:"instant"}),requestAnimationFrame(()=>{const t=new Map;r.forEach(s=>{const n=document.getElementById(s.id);if(n){const l=n.getBoundingClientRect();t.set(s.id,l.top+window.scrollY)}}),y.current=t,window.scrollTo({top:e,behavior:"instant"})})},[r]);w(()=>{if(r.length===0)return;const e=setTimeout(h,100);return()=>clearTimeout(e)},[r,h]),w(()=>{if(r.length===0)return;let e=null;const t=new ResizeObserver(()=>{e&&clearTimeout(e),e=setTimeout(h,150)});return t.observe(document.body),()=>{t.disconnect(),e&&clearTimeout(e)}},[r,h]),w(()=>{if(r.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 s=d.current?.offsetHeight||0,n=window.scrollY+s+b+10;let l="";const S=y.current;for(let c=r.length-1;c>=0;c--){const R=r[c],C=S.get(R.id);if(C!==void 0&&n>=C){l=R.id;break}}if(!l&&r.length>0){const c=S.get(r[0].id);c!==void 0&&n<c&&(l="")}x(l)},t=setTimeout(()=>{e()},200);return window.addEventListener("scroll",e,{passive:!0}),()=>{clearTimeout(t),window.removeEventListener("scroll",e),m.current&&clearTimeout(m.current)}},[r,b]),w(()=>{const e=document.querySelectorAll(".header"),t=[];return e.forEach(s=>{const n=s;t.push({element:n,originalPosition:n.style.position||getComputedStyle(n).position}),n.style.position="relative"}),()=>{t.forEach(({element:s,originalPosition:n})=>{s.style.position=n==="static"?"":n})}},[]);const j=(e,t)=>{e.preventDefault();const s=y.current.get(t);if(s===void 0){console.warn(`Cached position for "${t}" not found`);return}x(t),u.current=t,g.current=!0;const n=d.current?.offsetHeight||0,l=s-n-b;window.scrollTo({top:l,behavior:"smooth"}),window.history.pushState(null,"",`#${t}`)};return i("div",{id:H,ref:d,className:T("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"},k),children:[i("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[i("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:[i("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[v.map((e,t)=>i("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[o("a",{href:e.link,className:T("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":t!==0,"hidden desktop:block":t===1}),children:o("span",{children:e.label})}),t!==v.length-1&&o("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},e.link||t)),v.length>1&&i(E.Root,{children:[o(E.Trigger,{asChild:!0,children:o("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:o(O,{className:"text-[#1D1D1F]"})})}),o(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=>o("a",{href:e.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:o("span",{children:e.label})},e.link))})]})]}),i("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[a?.link&&o("a",{href:a.link,target:a.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:o(N,{size:2,className:"text-nowrap",children:a.text})}),p?.link&&o(L,{as:"a",href:p.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:p.text})]})]}),o("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:r.map((e,t)=>i("a",{href:`#${e.id}`,className:"product-nav-anchor-link",onClick:s=>{P?(s.preventDefault(),x(e.id),u.current=e.id,g.current=!0,P(e,t)):j(s,e.id)},children:[o(N,{size:2,className:"product-nav-anchor-text text-nowrap",children:e.label}),o("div",{className:T("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"!bg-brand-0":z===e.id})})]},e.id))})]}),i("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[a?.link&&o("a",{href:a.link,target:a.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:o(N,{size:2,className:"text-nowrap",children:a.text})}),p?.link&&o(L,{as:"a",href:p.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:p.text})]})]})});M.displayName="ProductNav";var X=V(M);export{X 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 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"]
4
+ "sourcesContent": ["'use client'\nimport { useState, useEffect, useCallback, 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 // \u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u7EDD\u5BF9\u4F4D\u7F6E\uFF08\u6EDA\u52A8\u5230\u9876\u90E8\u540E\u8BA1\u7B97\uFF0C\u907F\u514D sticky \u5F71\u54CD\uFF09\n const updateAnchorPositions = useCallback(() => {\n if (anchorList.length === 0) return\n\n const originalScrollY = window.scrollY\n window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })\n\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 window.scrollTo({ top: originalScrollY, behavior: 'instant' as ScrollBehavior })\n })\n }, [anchorList])\n\n // \u521D\u59CB\u5316\u65F6\u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u539F\u59CB\u4F4D\u7F6E\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(updateAnchorPositions, 100)\n\n return () => clearTimeout(timer)\n }, [anchorList, updateAnchorPositions])\n\n // \u76D1\u542C body \u9AD8\u5EA6\u53D8\u5316\uFF0C\u9AD8\u5EA6\u6539\u53D8\u65F6\u91CD\u65B0\u8BA1\u7B97\u951A\u70B9\u4F4D\u7F6E\n useEffect(() => {\n if (anchorList.length === 0) return\n\n let resizeTimer: ReturnType<typeof setTimeout> | null = null\n\n const observer = new ResizeObserver(() => {\n // debounce\uFF0C\u907F\u514D\u9AD8\u9891\u89E6\u53D1\n if (resizeTimer) clearTimeout(resizeTimer)\n resizeTimer = setTimeout(updateAnchorPositions, 150)\n })\n\n observer.observe(document.body)\n\n return () => {\n observer.disconnect()\n if (resizeTimer) clearTimeout(resizeTimer)\n }\n }, [anchorList, updateAnchorPositions])\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", "useCallback", "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", "updateAnchorPositions", "originalScrollY", "positions", "anchor", "element", "rect", "timer", "resizeTimer", "observer", "handleScroll", "navHeight", "scrollPosition", "currentAnchorId", "i", "elementTop", "firstElementTop", "headerElements", "originalStyles", "htmlElement", "originalPosition", "handleAnchorClick", "anchorId", "elementAbsoluteTop", "targetPosition", "tabLink", "index", "e", "ProductNav_default"]
7
7
  }
package/dist/esm/biz-components/Tabs/Tabs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as a,jsxs as s}from"react/jsx-runtime";import{withLayout as n}from"../../shared/Styles.js";import*as e from"../../components/tabs.js";import{cn as b,isLexicalEmpty as t}from"../../helpers/index.js";import h from"react";import k from"../ShelfDisplay/index.js";import N from"../AccordionCards/index.js";import g from"../Faq/index.js";import v from"../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";import o from"../Title/index.js";import L from"../Graphic/index.js";import P from"../WhyChoose/index.js";import A from"../BrandEquity/index.js";import q from"../BrandCardLink/index.js";const m=h.forwardRef(({data:p,className:c},d)=>{const{theme:T,shape:u,align:f,tabs:r=[],sectionTitle:l}=p,y=i=>i?.blockType==="ipc-shelfdisplay"?a(k,{data:i}):i?.blockType==="ipc-multiLayoutGraphicBlock"?a(v,{data:i}):i?.blockType==="ipc-accordioncards"?a(N,{data:i}):i?.blockType==="ipc-faq"?a(g,{data:i}):i?.blockType==="ipc-graphic"?a(L,{data:i}):i?.blockType==="ipc-whychoose"?a(P,{data:i}):i?.blockType==="ipc-brand-equity"?a(A,{data:i}):i?.blockType==="ipc-brand-card-link"?a(q,{data:i}):null;return s("section",{ref:d,className:b(T==="dark"?"aiui-dark":"",c),children:[l&&a(o,{className:"section-title",data:{title:l}}),s(e.Tabs,{shape:u,align:f,defaultValue:r?.[0]?.id||r?.[0]?.tabName,children:[Array.isArray(r)&&r.length>1&&a(e.TabsList,{className:"tabs-list",children:r.map(i=>a(e.TabsTrigger,{value:i.id||i.tabName,className:"tabs-trigger",children:i.tabName},i.id||i.tabName))}),(Array.isArray(r)?r:[])?.map(i=>s(e.TabsContent,{value:i.id||i.tabName,className:`tabs-content ${r?.length>1?"mt-[24px]":""}`,children:[!t(i.caption)||!t(i?.subtitle)?a(o,{className:"tabs-title",data:{caption:i?.caption,subtitle:i?.subtitle}}):null,i.tabContent?.[0]?y(i.tabContent?.[0]):null]},i.id||i.tabName))]})]})});m.displayName="Tabs";var W=n(m);export{W as default};
1
+ "use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{withLayout as n}from"../../shared/Styles.js";import*as a from"../../components/tabs.js";import{cn as b,isLexicalEmpty as t}from"../../helpers/index.js";import h from"react";import k from"../ShelfDisplay/index.js";import g from"../AccordionCards/index.js";import N from"../Faq/index.js";import v from"../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";import m from"../Title/index.js";import L from"../Graphic/index.js";import P from"../WhyChoose/index.js";import A from"../BrandEquity/index.js";import q from"../BrandCardLink/index.js";import x from"../ImageWithText/index.js";const o=h.forwardRef(({data:p,className:c},d)=>{const{theme:T,shape:f,align:u,tabs:r=[],sectionTitle:l}=p,y=i=>i?.blockType==="ipc-shelfdisplay"?e(k,{data:i}):i?.blockType==="ipc-multiLayoutGraphicBlock"?e(v,{data:i}):i?.blockType==="ipc-accordioncards"?e(g,{data:i}):i?.blockType==="ipc-faq"?e(N,{data:i}):i?.blockType==="ipc-graphic"?e(L,{data:i}):i?.blockType==="ipc-whychoose"?e(P,{data:i}):i?.blockType==="ipc-brand-equity"?e(A,{data:i}):i?.blockType==="ipc-brand-card-link"?e(q,{data:i}):i?.blockType==="ImageWithText"?e(x,{data:i}):null;return s("section",{ref:d,className:b(T==="dark"?"aiui-dark":"",c),children:[l&&e(m,{className:"section-title",data:{title:l}}),s(a.Tabs,{shape:f,align:u,defaultValue:r?.[0]?.id||r?.[0]?.tabName,children:[Array.isArray(r)&&r.length>1&&e(a.TabsList,{className:"tabs-list",children:r.map(i=>e(a.TabsTrigger,{value:i.id||i.tabName,className:"tabs-trigger",children:i.tabName},i.id||i.tabName))}),(Array.isArray(r)?r:[])?.map(i=>s(a.TabsContent,{value:i.id||i.tabName,className:`tabs-content ${r?.length>1?"mt-[24px]":""}`,children:[!t(i.caption)||!t(i?.subtitle)?e(m,{className:"tabs-title",data:{caption:i?.caption,subtitle:i?.subtitle}}):null,i.tabContent?.[0]?y(i.tabContent?.[0]):null]},i.id||i.tabName))]})]})});o.displayName="Tabs";var $=n(o);export{$ as default};
2
2
  //# sourceMappingURL=Tabs.js.map
package/dist/esm/biz-components/Tabs/Tabs.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Tabs/Tabs.tsx"],
4
- "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn, isLexicalEmpty } from '../../helpers/index.js'\nimport type { TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\nimport WhyChoose from '../WhyChoose/index.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport BrandCardLink from '../BrandCardLink/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n const { theme, shape, align, tabs = [], sectionTitle } = data\n\n const renderTabContent = (tabContent: TabsProps['data']['tabs'][number]['tabContent'][number]) => {\n if (tabContent?.blockType === 'ipc-shelfdisplay') {\n return <ShelfDisplay data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n return <MultiLayoutGraphicBlock data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-accordioncards') {\n return <AccordionCards data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-faq') {\n return <Faq data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-graphic') {\n return <Graphic data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-whychoose') {\n return <WhyChoose data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-equity') {\n return <BrandEquity data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-card-link') {\n return <BrandCardLink data={tabContent} />\n } else {\n return null\n }\n }\n\n return (\n <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs?.[0]?.id || tabs?.[0]?.tabName}>\n {/* <TabsPrimitive.TabsList className=\"tabs-list\">\n {(Array.isArray(tabs) ? tabs : [])?.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList> */}\n {/* Tab\u4E3A1\u65F6\uFF0C\u4E0D\u5C55\u793Atab\u6309\u94AE */}\n {Array.isArray(tabs) && tabs.length > 1 && (\n <TabsPrimitive.TabsList className=\"tabs-list\">\n {tabs.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList>\n )}\n {(Array.isArray(tabs) ? tabs : [])?.map((tab: any) => (\n <TabsPrimitive.TabsContent\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className={`tabs-content ${tabs?.length > 1 ? 'mt-[24px]' : ''}`}\n >\n {!isLexicalEmpty(tab.caption) || !isLexicalEmpty(tab?.subtitle) ? (\n <Title className=\"tabs-title\" data={{ caption: tab?.caption, subtitle: tab?.subtitle }} />\n ) : null}\n {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n </TabsPrimitive.TabsContent>\n ))}\n </TabsPrimitive.Tabs>\n </section>\n )\n})\nTabs.displayName = 'Tabs'\nexport default withLayout(Tabs)\n"],
5
- "mappings": "aAqBa,cAAAA,EAkDH,QAAAC,MAlDG,oBApBb,OAAS,cAAAC,MAAkB,yBAC3B,UAAYC,MAAmB,2BAC/B,OAAS,MAAAC,EAAI,kBAAAC,MAAsB,yBAEnC,OAAOC,MAAW,QAClB,OAAOC,MAAkB,2BACzB,OAAOC,MAAoB,6BAC3B,OAAOC,MAAS,kBAChB,OAAOC,MAA6B,wDACpC,OAAOC,MAAW,oBAClB,OAAOC,MAAa,sBACpB,OAAOC,MAAe,wBACtB,OAAOC,MAAiB,0BACxB,OAAOC,MAAmB,4BAE1B,MAAMC,EAAOV,EAAM,WAAsC,CAAC,CAAE,KAAAW,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAO,CAAC,EAAG,aAAAC,CAAa,EAAIP,EAEnDQ,EAAoBC,GACpBA,GAAY,YAAc,mBACrB1B,EAACO,EAAA,CAAa,KAAMmB,EAAY,EAC9BA,GAAY,YAAc,8BAC5B1B,EAACU,EAAA,CAAwB,KAAMgB,EAAY,EACzCA,GAAY,YAAc,qBAC5B1B,EAACQ,EAAA,CAAe,KAAMkB,EAAY,EAChCA,GAAY,YAAc,UAC5B1B,EAACS,EAAA,CAAI,KAAMiB,EAAY,EACrBA,GAAY,YAAc,cAC5B1B,EAACY,EAAA,CAAQ,KAAMc,EAAY,EACzBA,GAAY,YAAc,gBAC5B1B,EAACa,EAAA,CAAU,KAAMa,EAAY,EAC3BA,GAAY,YAAc,mBAC5B1B,EAACc,EAAA,CAAY,KAAMY,EAAY,EAC7BA,GAAY,YAAc,sBAC5B1B,EAACe,EAAA,CAAc,KAAMW,EAAY,EAEjC,KAIX,OACEzB,EAAC,WAAQ,IAAKkB,EAAc,UAAWf,EAAGgB,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,GAAgBxB,EAACW,EAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOa,CAAa,EAAG,EACjFvB,EAACE,EAAc,KAAd,CAAmB,MAAOkB,EAAO,MAAOC,EAAO,aAAcC,IAAO,CAAC,GAAG,IAAMA,IAAO,CAAC,GAAG,QAavF,gBAAM,QAAQA,CAAI,GAAKA,EAAK,OAAS,GACpCvB,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAoB,EAAK,IAAII,GACR3B,EAACG,EAAc,YAAd,CAEC,MAAOwB,EAAI,IAAMA,EAAI,QACrB,UAAU,eAET,SAAAA,EAAI,SAJAA,EAAI,IAAMA,EAAI,OAKrB,CACD,EACH,GAEA,MAAM,QAAQJ,CAAI,EAAIA,EAAO,CAAC,IAAI,IAAKI,GACvC1B,EAACE,EAAc,YAAd,CAEC,MAAOwB,EAAI,IAAMA,EAAI,QACrB,UAAW,gBAAgBJ,GAAM,OAAS,EAAI,YAAc,EAAE,GAE7D,WAAClB,EAAesB,EAAI,OAAO,GAAK,CAACtB,EAAesB,GAAK,QAAQ,EAC5D3B,EAACW,EAAA,CAAM,UAAU,aAAa,KAAM,CAAE,QAASgB,GAAK,QAAS,SAAUA,GAAK,QAAS,EAAG,EACtF,KACHA,EAAI,aAAa,CAAC,EAAIF,EAAiBE,EAAI,aAAa,CAAC,CAAC,EAAI,OAP1DA,EAAI,IAAMA,EAAI,OAQrB,CACD,GACH,GACF,CAEJ,CAAC,EACDX,EAAK,YAAc,OACnB,IAAOY,EAAQ1B,EAAWc,CAAI",
6
- "names": ["jsx", "jsxs", "withLayout", "TabsPrimitive", "cn", "isLexicalEmpty", "React", "ShelfDisplay", "AccordionCards", "Faq", "MultiLayoutGraphicBlock", "Title", "Graphic", "WhyChoose", "BrandEquity", "BrandCardLink", "Tabs", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "sectionTitle", "renderTabContent", "tabContent", "tab", "Tabs_default"]
4
+ "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn, isLexicalEmpty } from '../../helpers/index.js'\nimport type { TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\nimport WhyChoose from '../WhyChoose/index.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport BrandCardLink from '../BrandCardLink/index.js'\nimport ImageWithText from '../ImageWithText/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n const { theme, shape, align, tabs = [], sectionTitle } = data\n\n const renderTabContent = (tabContent: TabsProps['data']['tabs'][number]['tabContent'][number]) => {\n if (tabContent?.blockType === 'ipc-shelfdisplay') {\n return <ShelfDisplay data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n return <MultiLayoutGraphicBlock data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-accordioncards') {\n return <AccordionCards data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-faq') {\n return <Faq data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-graphic') {\n return <Graphic data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-whychoose') {\n return <WhyChoose data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-equity') {\n return <BrandEquity data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-card-link') {\n return <BrandCardLink data={tabContent} />\n } else if (tabContent?.blockType === 'ImageWithText') {\n return <ImageWithText data={tabContent} />\n } else {\n return null\n }\n }\n\n return (\n <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs?.[0]?.id || tabs?.[0]?.tabName}>\n {/* <TabsPrimitive.TabsList className=\"tabs-list\">\n {(Array.isArray(tabs) ? tabs : [])?.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList> */}\n {/* Tab\u4E3A1\u65F6\uFF0C\u4E0D\u5C55\u793Atab\u6309\u94AE */}\n {Array.isArray(tabs) && tabs.length > 1 && (\n <TabsPrimitive.TabsList className=\"tabs-list\">\n {tabs.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList>\n )}\n {(Array.isArray(tabs) ? tabs : [])?.map((tab: any) => (\n <TabsPrimitive.TabsContent\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className={`tabs-content ${tabs?.length > 1 ? 'mt-[24px]' : ''}`}\n >\n {!isLexicalEmpty(tab.caption) || !isLexicalEmpty(tab?.subtitle) ? (\n <Title className=\"tabs-title\" data={{ caption: tab?.caption, subtitle: tab?.subtitle }} />\n ) : null}\n {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n </TabsPrimitive.TabsContent>\n ))}\n </TabsPrimitive.Tabs>\n </section>\n )\n})\nTabs.displayName = 'Tabs'\nexport default withLayout(Tabs)\n"],
5
+ "mappings": "aAsBa,cAAAA,EAoDH,QAAAC,MApDG,oBArBb,OAAS,cAAAC,MAAkB,yBAC3B,UAAYC,MAAmB,2BAC/B,OAAS,MAAAC,EAAI,kBAAAC,MAAsB,yBAEnC,OAAOC,MAAW,QAClB,OAAOC,MAAkB,2BACzB,OAAOC,MAAoB,6BAC3B,OAAOC,MAAS,kBAChB,OAAOC,MAA6B,wDACpC,OAAOC,MAAW,oBAClB,OAAOC,MAAa,sBACpB,OAAOC,MAAe,wBACtB,OAAOC,MAAiB,0BACxB,OAAOC,MAAmB,4BAC1B,OAAOC,MAAmB,4BAE1B,MAAMC,EAAOX,EAAM,WAAsC,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAO,CAAC,EAAG,aAAAC,CAAa,EAAIP,EAEnDQ,EAAoBC,GACpBA,GAAY,YAAc,mBACrB3B,EAACO,EAAA,CAAa,KAAMoB,EAAY,EAC9BA,GAAY,YAAc,8BAC5B3B,EAACU,EAAA,CAAwB,KAAMiB,EAAY,EACzCA,GAAY,YAAc,qBAC5B3B,EAACQ,EAAA,CAAe,KAAMmB,EAAY,EAChCA,GAAY,YAAc,UAC5B3B,EAACS,EAAA,CAAI,KAAMkB,EAAY,EACrBA,GAAY,YAAc,cAC5B3B,EAACY,EAAA,CAAQ,KAAMe,EAAY,EACzBA,GAAY,YAAc,gBAC5B3B,EAACa,EAAA,CAAU,KAAMc,EAAY,EAC3BA,GAAY,YAAc,mBAC5B3B,EAACc,EAAA,CAAY,KAAMa,EAAY,EAC7BA,GAAY,YAAc,sBAC5B3B,EAACe,EAAA,CAAc,KAAMY,EAAY,EAC/BA,GAAY,YAAc,gBAC5B3B,EAACgB,EAAA,CAAc,KAAMW,EAAY,EAEjC,KAIX,OACE1B,EAAC,WAAQ,IAAKmB,EAAc,UAAWhB,EAAGiB,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,GAAgBzB,EAACW,EAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOc,CAAa,EAAG,EACjFxB,EAACE,EAAc,KAAd,CAAmB,MAAOmB,EAAO,MAAOC,EAAO,aAAcC,IAAO,CAAC,GAAG,IAAMA,IAAO,CAAC,GAAG,QAavF,gBAAM,QAAQA,CAAI,GAAKA,EAAK,OAAS,GACpCxB,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAqB,EAAK,IAAII,GACR5B,EAACG,EAAc,YAAd,CAEC,MAAOyB,EAAI,IAAMA,EAAI,QACrB,UAAU,eAET,SAAAA,EAAI,SAJAA,EAAI,IAAMA,EAAI,OAKrB,CACD,EACH,GAEA,MAAM,QAAQJ,CAAI,EAAIA,EAAO,CAAC,IAAI,IAAKI,GACvC3B,EAACE,EAAc,YAAd,CAEC,MAAOyB,EAAI,IAAMA,EAAI,QACrB,UAAW,gBAAgBJ,GAAM,OAAS,EAAI,YAAc,EAAE,GAE7D,WAACnB,EAAeuB,EAAI,OAAO,GAAK,CAACvB,EAAeuB,GAAK,QAAQ,EAC5D5B,EAACW,EAAA,CAAM,UAAU,aAAa,KAAM,CAAE,QAASiB,GAAK,QAAS,SAAUA,GAAK,QAAS,EAAG,EACtF,KACHA,EAAI,aAAa,CAAC,EAAIF,EAAiBE,EAAI,aAAa,CAAC,CAAC,EAAI,OAP1DA,EAAI,IAAMA,EAAI,OAQrB,CACD,GACH,GACF,CAEJ,CAAC,EACDX,EAAK,YAAc,OACnB,IAAOY,EAAQ3B,EAAWe,CAAI",
6
+ "names": ["jsx", "jsxs", "withLayout", "TabsPrimitive", "cn", "isLexicalEmpty", "React", "ShelfDisplay", "AccordionCards", "Faq", "MultiLayoutGraphicBlock", "Title", "Graphic", "WhyChoose", "BrandEquity", "BrandCardLink", "ImageWithText", "Tabs", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "sectionTitle", "renderTabContent", "tabContent", "tab", "Tabs_default"]
7
7
  }
package/dist/esm/biz-components/Tabs/types.d.ts CHANGED
@@ -7,6 +7,7 @@ import type { GraphicProps } from '../Graphic/index.js';
7
7
  import type { WhyChooseProps } from '../WhyChoose/types.js';
8
8
  import type { BrandEquityProps } from '../BrandEquity/types.js';
9
9
  import type { BrandCardLinkProps } from '../BrandCardLink/types.js';
10
+ import type { ImageWithTextProps } from '../ImageWithText/types.js';
10
11
  export type TabsProps = {
11
12
  data: {
12
13
  sectionTitle?: string;
@@ -32,6 +33,8 @@ export type TabsProps = {
32
33
  blockType: 'ipc-brand-equity';
33
34
  })[] | (BrandCardLinkProps['data'] & {
34
35
  blockType: 'ipc-brand-card-link';
36
+ })[] | (ImageWithTextProps['data'] & {
37
+ blockType: 'ImageWithText';
35
38
  })[];
36
39
  }[];
37
40
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.89",
3
+ "version": "1.1.90",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",