@anker-in/headless-ui 1.3.38 → 1.3.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
  2. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
  3. package/dist/cjs/components/tabs.js +1 -1
  4. package/dist/cjs/components/tabs.js.map +2 -2
  5. package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
  6. package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
  7. package/dist/esm/components/tabs.js +1 -1
  8. package/dist/esm/components/tabs.js.map +2 -2
  9. package/package.json +1 -1
package/dist/cjs/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var he=Object.create;var T=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var _e=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,be=Object.prototype.hasOwnProperty;var ye=(t,n)=>{for(var i in n)T(t,i,{get:n[i],enumerable:!0})},A=(t,n,i,h)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of _e(n))!be.call(t,c)&&c!==i&&T(t,c,{get:()=>n[c],enumerable:!(h=ge(n,c))||h.enumerable});return t};var R=(t,n,i)=>(i=t!=null?he(we(t)):{},A(n||!t||!t.__esModule?T(i,"default",{value:t,enumerable:!0}):i,t)),Te=t=>A(T({},"__esModule",{value:!0}),t);var Re={};ye(Re,{default:()=>Ie});module.exports=Te(Re);var o=require("react/jsx-runtime"),s=R(require("react")),$=require("../../helpers/utils.js"),d=require("../../components/tabs.js"),O=R(require("../Title/index.js")),K=R(require("../SwiperBox/index.js")),Q=require("../../shared/Styles.js"),D=require("../../shared/track.js"),W=require("react-responsive"),Z=require("../../hooks/useRollout.js"),v=require("./shelfDisplayItem.js");const ve="image",Se="product_shelf",ke=t=>t==null?"default":String(t).replace(/[^a-zA-Z0-9_-]/g,"")||"default",q=s.default.forwardRef(({key:t,data:n,event:i,buildData:h,breakpoints:c,className:j="",recommendedData:p,target:F="_self",metafields:G,isDisplayGudgments:x=!1,isDisplayBackImage:J=!1,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne,...ae},re)=>{const{productsTab:m=[],productsCard:M=[],title:P,isShowTab:w=!0,tabShape:ie="square",isShowTag:oe=!1,isShowOriginalPrice:le=!0,isShowRecommendedCard:C=!1,...ce}=n,[b,H]=(0,s.useState)(""),[f,S]=(0,s.useState)([]),L=(0,s.useRef)(!1),k=(0,s.useRef)(!1),V=(0,s.useRef)(null),me=(0,s.useId)(),fe=(0,W.useMediaQuery)({query:"(max-width: 768px)"}),[pe,B]=(0,Z.useRollout)({threshold:0}),y=f?.length<=1&&x,g=!fe&&f?.length<=2&&x,I=e=>{switch(e){case 1440:return g?f?.length:4;case 1024:return g?f?.length:3;default:return g?f?.length:2.3}},E=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:p?.map((e,r)=>{const l=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:r+1}})}})},_=(e,r)=>{if(r){const u=p?.map?.(l=>({...l,isShowRecommended:!0}));S(u?.length?u||[]:[])}else if(Array.isArray(e)){const l=e?.map?.(a=>{const z=h?.products?.find(de=>de?.handle===a?.handle);if(z)return{sku:a.sku,isShowRecommended:!1,custom_name:a.custom_name,custom_description:a.custom_description,custom_image:a.custom_image,custom_theme:a.custom_theme,custom_primary_link:a?.custom_primary_link||"",custom_secondary_link:a?.custom_secondary_link||"",custom_bg_image:a?.custom_bg_image||"",...z}})?.filter(a=>a);S(l?.length?l||[]:[])}else S([])};(0,s.useImperativeHandle)(re,()=>V.current),(0,s.useEffect)(()=>{B&&p?.length&&!L.current&&(L.current=!0,E())},[B,p]),(0,s.useEffect)(()=>{if(!k.current){if(!k.current&&p?.length&&(k.current=!0),w){const e=m?.find(r=>r?.tab===b)||m?.[0];H(e?.tab||""),_(e?.data||[],e?.isShowRecommendedTab);return}_(M,C)}},[p]),(0,s.useEffect)(()=>{if(w){const e=m?.find(r=>r?.tab===b)||m?.[0];_(e?.data||[],e?.isShowRecommendedTab);return}_(M,C)},[h]);const ue=ke(b),N=`${me}-${ue}`;return(0,o.jsxs)("div",{ref:V,...ae,className:(0,$.cn)("shelf-display-wrap text-info-primary w-full",j,{"aiui-dark":n?.theme==="dark"}),children:[P&&(0,o.jsx)(O.default,{data:{title:P}}),w&&m?.length>0&&(0,o.jsx)(d.Tabs,{value:b,onValueChange:e=>{const r=m?.find(u=>u?.tab===e);if(r){if(H(e),_(r.data||[],r.isShowRecommendedTab),!r.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ve,component_name:Se,component_title:n?.title,component_position:1,navigation:e}});return}E()}},shape:ie==="rounded"?"rounded":"square",children:(0,o.jsx)(d.TabsList,{children:m.map(e=>(0,o.jsx)(d.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),(0,o.jsx)("div",{ref:pe,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)(K.default,{data:{list:f,configuration:{...ce,event:i,isShowTag:oe,isShowOriginalPrice:le,target:F,metafields:G,itemLength:f?.length,isDisplayBackImage:J,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne}},id:N,className:`${w?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:g?"flex-1":"",Slide:g?v.ShelfDisplayHorizontalItem:v.ShelfDisplayWrapItem,breakpoints:c||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:y?1:1.2},768:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I()},1024:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1024)},1440:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1440)}}},N)})]})});q.displayName="ShelfDisplay";var Ie=(0,Q.withLayout)(q);
1
+ "use strict";"use client";var ge=Object.create;var T=Object.defineProperty;var _e=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,ye=Object.prototype.hasOwnProperty;var Te=(t,n)=>{for(var i in n)T(t,i,{get:n[i],enumerable:!0})},A=(t,n,i,h)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of be(n))!ye.call(t,c)&&c!==i&&T(t,c,{get:()=>n[c],enumerable:!(h=_e(n,c))||h.enumerable});return t};var R=(t,n,i)=>(i=t!=null?ge(we(t)):{},A(n||!t||!t.__esModule?T(i,"default",{value:t,enumerable:!0}):i,t)),ve=t=>A(T({},"__esModule",{value:!0}),t);var De={};Te(De,{default:()=>Re});module.exports=ve(De);var o=require("react/jsx-runtime"),s=R(require("react")),O=require("../../helpers/utils.js"),d=require("../../components/tabs.js"),K=R(require("../Title/index.js")),Q=R(require("../SwiperBox/index.js")),W=require("../../shared/Styles.js"),D=require("../../shared/track.js"),Z=require("react-responsive"),j=require("../../hooks/useRollout.js"),v=require("./shelfDisplayItem.js");const Se="image",ke="product_shelf",q=t=>t==null?"default":String(t).replace(/[^a-zA-Z0-9_-]/g,"")||"default";function Ie(t){return t.trim().replace(/\s+/g,"-")}const $=s.default.forwardRef(({key:t,data:n,event:i,buildData:h,breakpoints:c,className:F="",recommendedData:u,target:G="_self",metafields:J,isDisplayGudgments:x=!1,isDisplayBackImage:U=!1,renderOriginalPrice:X,renderPriceLabel:Y,renderPrice:ee,onAddCart:te,onBuyNow:se,onLearnMore:ne,formatPrice:ae,...re},ie)=>{const{productsTab:m=[],productsCard:M=[],title:P,isShowTab:b=!0,tabShape:oe="square",isShowTag:le=!1,isShowOriginalPrice:ce=!0,isShowRecommendedCard:V=!1,...me}=n,[w,C]=(0,s.useState)(""),[f,S]=(0,s.useState)([]),H=(0,s.useRef)(!1),k=(0,s.useRef)(!1),L=(0,s.useRef)(null),fe=(0,s.useId)(),ue=(0,Z.useMediaQuery)({query:"(max-width: 768px)"}),[pe,B]=(0,j.useRollout)({threshold:0}),y=f?.length<=1&&x,g=!ue&&f?.length<=2&&x,I=e=>{switch(e){case 1440:return g?f?.length:4;case 1024:return g?f?.length:3;default:return g?f?.length:2.3}},E=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:u?.map((e,r)=>{const l=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:r+1}})}})},_=(e,r)=>{if(r){const p=u?.map?.(l=>({...l,isShowRecommended:!0}));S(p?.length?p||[]:[])}else if(Array.isArray(e)){const l=e?.map?.(a=>{const N=h?.products?.find(he=>he?.handle===a?.handle);if(N)return{sku:a.sku,isShowRecommended:!1,custom_name:a.custom_name,custom_description:a.custom_description,custom_image:a.custom_image,custom_theme:a.custom_theme,custom_primary_link:a?.custom_primary_link||"",custom_secondary_link:a?.custom_secondary_link||"",custom_bg_image:a?.custom_bg_image||"",...N}})?.filter(a=>a);S(l?.length?l||[]:[])}else S([])};(0,s.useImperativeHandle)(ie,()=>L.current),(0,s.useEffect)(()=>{B&&u?.length&&!H.current&&(H.current=!0,E())},[B,u]),(0,s.useEffect)(()=>{if(!k.current){if(!k.current&&u?.length&&(k.current=!0),b){const e=m?.find(r=>r?.tab===w)||m?.[0];C(e?.tab||""),_(e?.data||[],e?.isShowRecommendedTab);return}_(M,V)}},[u]),(0,s.useEffect)(()=>{if(b){const e=m?.find(r=>r?.tab===w)||m?.[0];_(e?.data||[],e?.isShowRecommendedTab);return}_(M,V)},[h]);const de=q(w),z=`${q(fe)}-${de}`;return(0,o.jsxs)("div",{ref:L,...re,className:(0,O.cn)("shelf-display-wrap text-info-primary w-full",F,{"aiui-dark":n?.theme==="dark"}),children:[P&&(0,o.jsx)(K.default,{data:{title:P}}),b&&m?.length>0&&(0,o.jsx)(d.Tabs,{value:w,onValueChange:e=>{const r=m?.find(p=>Ie(p?.tab)===e);if(r){if(C(e),_(r.data||[],r.isShowRecommendedTab),!r.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:Se,component_name:ke,component_title:n?.title,component_position:1,navigation:e}});return}E()}},shape:oe==="rounded"?"rounded":"square",children:(0,o.jsx)(d.TabsList,{children:m.map(e=>(0,o.jsx)(d.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),(0,o.jsx)("div",{ref:pe,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)(Q.default,{data:{list:f,configuration:{...me,event:i,isShowTag:le,isShowOriginalPrice:ce,target:G,metafields:J,itemLength:f?.length,isDisplayBackImage:U,renderOriginalPrice:X,renderPriceLabel:Y,renderPrice:ee,onAddCart:te,onBuyNow:se,onLearnMore:ne,formatPrice:ae}},id:z,className:`${b?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:g?"flex-1":"",Slide:g?v.ShelfDisplayHorizontalItem:v.ShelfDisplayWrapItem,breakpoints:c||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:y?1:1.2},768:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I()},1024:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1024)},1440:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1440)}}},z)})]})});$.displayName="ShelfDisplay";var Re=(0,W.withLayout)($);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/ShelfDisplay/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle, useId } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n ...rest\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceId = useId()\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n custom_bg_image: item?.custom_bg_image || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceId}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n {...rest}\n className={cn('shelf-display-wrap text-info-primary w-full', className, {\n 'aiui-dark': data?.theme === 'dark',\n })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && productsTab?.length > 0 && (\n <Tabs\n value={tabId}\n onValueChange={value => {\n const currentTab = productsTab?.find(item => item?.tab === value)\n if (currentTab) {\n setTabId(value)\n handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n if (!currentTab.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: value,\n },\n })\n return\n }\n gackViewEvent()\n }\n }}\n shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n >\n <TabsList>\n {productsTab.map(item => (\n <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n {item?.tab || ''}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
5
- "mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAsLM,IAAAI,EAAA,6BArLNC,EAA+E,oBAC/EC,EAAmB,kCACnBC,EAA4C,oCAC5CC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAwB,iCACxBC,EAA8B,4BAC9BC,EAA2B,qCAC3BC,EAAiE,iCAGjE,MAAMC,GAAgB,QAChBC,GAAgB,gBAEhBC,GAAuBC,GACAA,GAAU,KAAa,UAChC,OAAOA,CAAK,EAAE,QAAQ,kBAAmB,EAAE,GACzC,UAGhBC,EAAe,EAAAC,QAAM,WACzB,CACE,CACE,IAAAC,EACA,KAAAC,EACA,MAAAC,EACA,UAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,GACZ,gBAAAC,EACA,OAAAC,EAAS,QACT,WAAAC,EACA,mBAAAC,EAAqB,GACrB,mBAAAC,EAAqB,GACrB,oBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,UAAAC,GACA,SAAAC,GACA,YAAAC,GACA,YAAAC,GACA,GAAGC,EACL,EACAC,KACG,CACH,KAAM,CACJ,YAAAC,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,MAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,GAAW,SACX,UAAAC,GAAY,GACZ,oBAAAC,GAAsB,GACtB,sBAAAC,EAAwB,GACxB,GAAGC,EACL,EAAI3B,EAEE,CAAC4B,EAAOC,CAAQ,KAAI,YAAiB,EAAE,EACvC,CAACC,EAAcC,CAAe,KAAI,YAA6B,CAAC,CAAC,EAEjEC,KAAS,UAAgB,EAAK,EAC9BC,KAAc,UAAgB,EAAK,EACnCC,KAAW,UAAuB,IAAI,EACtCC,MAAa,SAAM,EAEnBC,MAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxD,CAACC,GAASC,CAAM,KAAI,cAA2B,CAAE,UAAW,CAAE,CAAC,EAE/DC,EAAST,GAAc,QAAU,GAAKtB,EACtCgC,EAAkB,CAACJ,IAAYN,GAAc,QAAU,GAAKtB,EAE5DiC,EAAkBC,GAAkB,CACxC,OAAQA,EAAM,CACZ,IAAK,MACH,OAAOF,EAAkBV,GAAc,OAAS,EAClD,IAAK,MACH,OAAOU,EAAkBV,GAAc,OAAS,EAClD,QACE,OAAOU,EAAkBV,GAAc,OAAS,GACpD,CACF,EAEMa,EAAgB,IAAM,IAC1B,WAAQ,CACN,MAAO,WACP,WAAY,iBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB,mBAChB,MAAOtC,GAAiB,IAAI,CAACuC,EAAMC,IAAU,CAE3C,MAAMC,EADWF,GAAM,UAAU,KAAMG,GAAWA,GAAG,MAAQH,GAAM,GAAG,GAC1CA,GAAM,WAAW,CAAC,EAC9C,MAAO,CACL,QAASA,GAAM,KAAOE,GAAS,IAC/B,UAAWF,GAAM,KACjB,aAAcE,GAAS,KACvB,MAAOA,GAAS,MAChB,MAAOD,EAAQ,CACjB,CACF,CAAC,CACH,CACF,CAAC,CACH,EAEMG,EAAmB,CAACC,EAAiCC,IAAkB,CAC3E,GAAIA,EAAM,CACR,MAAMC,EAAiB9C,GAAiB,MAAMuC,IACrC,CACL,GAAGA,EACH,kBAAmB,EACrB,EACD,EACDb,EAAgBoB,GAAgB,OAASA,GAAkB,CAAC,EAAI,CAAC,CAAC,CACpE,SACkB,MAAM,QAAQF,CAAW,EAC5B,CACX,MAAME,EAAiBF,GACnB,MAAML,GAAQ,CACd,MAAMQ,EAAWlD,GAAW,UAAU,KAAKmD,IAAUA,IAAQ,SAAWT,GAAM,MAAM,EACpF,GAAIQ,EACF,MAAO,CACL,IAAKR,EAAK,IACV,kBAAmB,GACnB,YAAaA,EAAK,YAClB,mBAAoBA,EAAK,mBACzB,aAAcA,EAAK,aACnB,aAAcA,EAAK,aACnB,oBAAqBA,GAAM,qBAAuB,GAClD,sBAAuBA,GAAM,uBAAyB,GACtD,gBAAiBA,GAAM,iBAAmB,GAC1C,GAAGQ,CACL,CAEJ,CAAC,GACC,OAAOR,GAAQA,CAAI,EACvBb,EAAgBoB,GAAgB,OAASA,GAAkB,CAAC,EAAI,CAAC,CAAC,CACpE,MACEpB,EAAgB,CAAC,CAAC,CAGxB,KAEA,uBAAoBb,GAAK,IAAMgB,EAAS,OAAyB,KAEjE,aAAU,IAAM,CACVI,GAAUjC,GAAiB,QAAU,CAAC2B,EAAO,UAC/CA,EAAO,QAAU,GACjBW,EAAc,EAElB,EAAG,CAACL,EAAQjC,CAAe,CAAC,KAG5B,aAAU,IAAM,CACd,GAAI,CAAA4B,EAAY,QAIhB,IAHI,CAACA,EAAY,SAAW5B,GAAiB,SAC3C4B,EAAY,QAAU,IAEpBX,EAAW,CACb,MAAMgC,EAAanC,GAAa,KAAKyB,GAAQA,GAAM,MAAQhB,CAAK,GAAKT,IAAc,CAAC,EACpFU,EAASyB,GAAY,KAAO,EAAE,EAC9BN,EAAiBM,GAAY,MAAQ,CAAC,EAAGA,GAAY,oBAAoB,EACzE,MACF,CACAN,EAAiB5B,EAAcM,CAAqB,EACtD,EAAG,CAACrB,CAAe,CAAC,KAEpB,aAAU,IAAM,CACd,GAAIiB,EAAW,CACb,MAAMgC,EAAanC,GAAa,KAAKyB,GAAQA,GAAM,MAAQhB,CAAK,GAAKT,IAAc,CAAC,EACpF6B,EAAiBM,GAAY,MAAQ,CAAC,EAAGA,GAAY,oBAAoB,EACzE,MACF,CACAN,EAAiB5B,EAAcM,CAAqB,CAEtD,EAAG,CAACxB,CAAS,CAAC,EAEd,MAAMqD,GAAa5D,GAAoBiC,CAAK,EACtC4B,EAAmB,GAAGrB,EAAU,IAAIoB,EAAU,GAEpD,SACE,QAAC,OACC,IAAKrB,EACJ,GAAGjB,GACJ,aAAW,MAAG,8CAA+Cb,EAAW,CACtE,YAAaJ,GAAM,QAAU,MAC/B,CAAC,EAEA,UAAAqB,MAAS,OAAC,EAAAoC,QAAA,CAAM,KAAM,CAAE,MAAOpC,CAAM,EAAG,EACxCC,GAAaH,GAAa,OAAS,MAClC,OAAC,QACC,MAAOS,EACP,cAAehC,GAAS,CACtB,MAAM0D,EAAanC,GAAa,KAAKyB,GAAQA,GAAM,MAAQhD,CAAK,EAChE,GAAI0D,EAAY,CAGd,GAFAzB,EAASjC,CAAK,EACdoD,EAAiBM,EAAW,MAAQ,CAAC,EAAGA,EAAW,oBAAoB,EACnE,CAACA,EAAW,qBAAsB,IACpC,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB7D,GAChB,eAAgBC,GAChB,gBAAiBM,GAAM,MACvB,mBAAoB,EACpB,WAAYJ,CACd,CACF,CAAC,EACD,MACF,CACA+C,EAAc,CAChB,CACF,EACA,MAAOpB,KAAa,UAAY,UAAY,SAE5C,mBAAC,YACE,SAAAJ,EAAY,IAAIyB,MACf,OAAC,eAAwC,MAAOA,GAAM,IACnD,SAAAA,GAAM,KAAO,IADEA,GAAM,IAAMA,GAAM,GAEpC,CACD,EACH,EACF,KAEF,OAAC,OACC,IAAKP,GACL,UAAU,2FAEV,mBAAC,EAAAqB,QAAA,CAEC,KAAM,CACJ,KAAM5B,EACN,cAAe,CACb,GAAGH,GACH,MAAO1B,EACP,UAAAuB,GACA,oBAAAC,GACA,OAAQnB,EACR,WAAYC,EACZ,WAAYuB,GAAc,OAC1B,mBAAoBrB,EACpB,oBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,UAAAC,GACA,SAAAC,GACA,YAAAC,GACA,YAAAC,EACF,CACF,EACA,GAAIwC,EACJ,UAAW,GAAGlC,EAAY,OAAS,EAAE,8CACrC,cAAekB,EAAkB,SAAW,GAC5C,MAAOA,EAAkB,6BAA6B,uBACtD,YACErC,GAAe,CACb,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeoC,EAAS,EAAI,GAC9B,EACA,IAAK,CACH,aAAcA,EAAS,EAAI,GAC3B,SAAU,GACV,cAAeE,EAAe,CAChC,EACA,KAAM,CACJ,aAAcF,EAAS,EAAI,GAC3B,SAAU,GACV,cAAeE,EAAe,IAAI,CACpC,EACA,KAAM,CACJ,aAAcF,EAAS,EAAI,GAC3B,SAAU,GACV,cAAeE,EAAe,IAAI,CACpC,CACF,GApDGe,CAsDP,EACF,GACF,CAEJ,CACF,EAEA3D,EAAa,YAAc,eAC3B,IAAOjB,MAAQ,cAAWiB,CAAY",
6
- "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceId", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "Title", "SwiperBox"]
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle, useId } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nfunction sanitizeTabValue(value: string): string {\n return value.trim().replace(/\\s+/g, '-')\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n ...rest\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceId = useId()\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n custom_bg_image: item?.custom_bg_image || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const safeInstanceId = sanitizeCssSelector(instanceId)\n const swiperInstanceId = `${safeInstanceId}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n {...rest}\n className={cn('shelf-display-wrap text-info-primary w-full', className, {\n 'aiui-dark': data?.theme === 'dark',\n })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && productsTab?.length > 0 && (\n <Tabs\n value={tabId}\n onValueChange={value => {\n const currentTab = productsTab?.find(item => sanitizeTabValue(item?.tab) === value)\n if (currentTab) {\n setTabId(value)\n handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n if (!currentTab.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: value,\n },\n })\n return\n }\n gackViewEvent()\n }\n }}\n shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n >\n <TabsList>\n {productsTab.map(item => (\n <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n {item?.tab || ''}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
+ "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "sanitizeTabValue", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceId", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "Title", "SwiperBox"]
7
7
  }
package/dist/cjs/components/tabs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var W=Object.create;var f=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var A=(t,e)=>{for(var a in e)f(t,a,{get:e[a],enumerable:!0})},y=(t,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of k(e))!V.call(t,o)&&o!==a&&f(t,o,{get:()=>e[o],enumerable:!(s=E(e,o))||s.enumerable});return t};var P=(t,e,a)=>(a=t!=null?W(S(t)):{},y(e||!t||!t.__esModule?f(a,"default",{value:t,enumerable:!0}):a,t)),F=t=>y(f({},"__esModule",{value:!0}),t);var M={};A(M,{Tabs:()=>T,TabsContent:()=>x,TabsList:()=>R,TabsTrigger:()=>v});module.exports=F(M);var n=require("react/jsx-runtime"),i=P(require("react")),d=require("../helpers/index.js"),r=P(require("@radix-ui/react-tabs")),h=require("class-variance-authority");function b(t){return t.trim().replace(/\s+/g,"-")}const g=i.createContext({align:"left",shape:"square"}),T=i.forwardRef(({children:t,align:e="left",shape:a="default",...s},o)=>(0,n.jsx)(r.Root,{ref:o,...s,children:(0,n.jsx)(g.Provider,{value:{align:e,shape:a},children:t})}));T.displayName="Tabs";const q=(0,h.cva)("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),j=(0,h.cva)("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),R=i.forwardRef(({className:t,...e},a)=>{const{align:s,shape:o}=i.useContext(g),l=s==="center"?"flex w-full justify-center":s==="right"?"flex w-full justify-end":null,p=(0,n.jsx)(r.List,{ref:a,className:(0,d.cn)("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",q({shape:o}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e});return l?(0,n.jsx)("div",{className:l,children:p}):p});R.displayName=r.List.displayName;const v=i.forwardRef(({className:t,onClick:e,value:a,...s},o)=>{const{shape:l}=i.useContext(g),p=c=>{e?.(c);const m=c?.currentTarget,u=c?.currentTarget?.parentElement;if(m&&u){const C=m.offsetLeft,w=m.offsetWidth,L=u.offsetWidth,N=C-L/2+w/2;u.scrollTo({left:N,behavior:"smooth"})}};return(0,n.jsx)(r.Trigger,{ref:o,className:(0,d.cn)("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]",t,j({shape:l})),onClick:p,value:b(a),"data-radix-collection-item":b(a),...s})});v.displayName=r.Trigger.displayName;const x=i.forwardRef(({className:t,value:e,...a},s)=>(0,n.jsx)(r.Content,{ref:s,className:(0,d.cn)(t),value:b(e),...a}));x.displayName=r.Content.displayName;
1
+ "use strict";"use client";var W=Object.create;var f=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var A=(t,e)=>{for(var a in e)f(t,a,{get:e[a],enumerable:!0})},y=(t,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of k(e))!V.call(t,o)&&o!==a&&f(t,o,{get:()=>e[o],enumerable:!(s=E(e,o))||s.enumerable});return t};var P=(t,e,a)=>(a=t!=null?W(S(t)):{},y(e||!t||!t.__esModule?f(a,"default",{value:t,enumerable:!0}):a,t)),F=t=>y(f({},"__esModule",{value:!0}),t);var M={};A(M,{Tabs:()=>T,TabsContent:()=>x,TabsList:()=>R,TabsTrigger:()=>v});module.exports=F(M);var r=require("react/jsx-runtime"),n=P(require("react")),c=require("../helpers/index.js"),i=P(require("@radix-ui/react-tabs")),h=require("class-variance-authority");function d(t){return t.trim().replace(/\s+/g,"-")}const g=n.createContext({align:"left",shape:"square"}),T=n.forwardRef(({children:t,align:e="left",shape:a="default",value:s,...o},l)=>(0,r.jsx)(i.Root,{ref:l,value:s!=null?d(String(s)):void 0,...o,children:(0,r.jsx)(g.Provider,{value:{align:e,shape:a},children:t})}));T.displayName="Tabs";const q=(0,h.cva)("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),j=(0,h.cva)("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),R=n.forwardRef(({className:t,...e},a)=>{const{align:s,shape:o}=n.useContext(g),l=s==="center"?"flex w-full justify-center":s==="right"?"flex w-full justify-end":null,p=(0,r.jsx)(i.List,{ref:a,className:(0,c.cn)("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",q({shape:o}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e});return l?(0,r.jsx)("div",{className:l,children:p}):p});R.displayName=i.List.displayName;const v=n.forwardRef(({className:t,onClick:e,value:a,...s},o)=>{const{shape:l}=n.useContext(g),p=m=>{e?.(m);const u=m?.currentTarget,b=m?.currentTarget?.parentElement;if(u&&b){const C=u.offsetLeft,w=u.offsetWidth,L=b.offsetWidth,N=C-L/2+w/2;b.scrollTo({left:N,behavior:"smooth"})}};return(0,r.jsx)(i.Trigger,{ref:o,className:(0,c.cn)("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]",t,j({shape:l})),onClick:p,value:d(a),"data-radix-collection-item":d(a),...s})});v.displayName=i.Trigger.displayName;const x=n.forwardRef(({className:t,value:e,...a},s)=>(0,r.jsx)(i.Content,{ref:s,className:(0,c.cn)(t),value:d(e),...a}));x.displayName=i.Content.displayName;
2
2
  //# sourceMappingURL=tabs.js.map
package/dist/cjs/components/tabs.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/tabs.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\ntype tabShape = Shape | 'default'\n\n/**\n * Sanitize a tab value so it is safe to use as part of an HTML id attribute.\n *\n * HTML ids must not contain whitespace characters. Radix UI uses the value\n * directly in generated ids (e.g. `radix-:r0:-trigger-{value}`), so an\n * unsanitized value like \"best seller\" would produce an invalid id.\n *\n * This function replaces any sequence of whitespace with a single hyphen and\n * trims leading/trailing whitespace, leaving all other characters intact.\n */\nfunction sanitizeTabValue(value: string): string {\n return value.trim().replace(/\\s+/g, '-')\n}\n\nconst TabListContext = React.createContext<{\n align?: Align\n shape: tabShape\n}>({\n align: 'left',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n align?: Align\n shape?: tabShape\n }\n>(({ children, align = 'left', shape = 'default', ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} {...props}>\n <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\n\nconst tabsTriggerVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n\n const wrapperClass =\n alignFromParent === 'center'\n ? 'flex w-full justify-center'\n : alignFromParent === 'right'\n ? 'flex w-full justify-end'\n : null\n\n const list = (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n tabsListVariants({ shape: shapeFromParent }),\n className\n )}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n {...props}\n />\n )\n\n return wrapperClass ? <div className={wrapperClass}>{list}</div> : list\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, value, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e)\n const tabElement = e?.currentTarget\n const container = e?.currentTarget?.parentElement\n if (tabElement && container) {\n const tabLeft = tabElement.offsetLeft\n const tabWidth = tabElement.offsetWidth\n const containerWidth = container.offsetWidth\n const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n container.scrollTo({\n left: scrollTo,\n behavior: 'smooth',\n })\n }\n }\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n className,\n tabsTriggerVariants({\n shape: shapeFromParent,\n })\n )}\n onClick={handleClick}\n value={sanitizeTabValue(value)}\n data-radix-collection-item={sanitizeTabValue(value)}\n {...props}\n />\n )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, value, ...props }, ref) => (\n <TabsPrimitive.Content ref={ref} className={cn(className)} value={sanitizeTabValue(value)} {...props} />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\ntype tabShape = Shape | 'default'\n\n/**\n * Sanitize a tab value so it is safe to use as part of an HTML id attribute.\n *\n * HTML ids must not contain whitespace characters. Radix UI uses the value\n * directly in generated ids (e.g. `radix-:r0:-trigger-{value}`), so an\n * unsanitized value like \"best seller\" would produce an invalid id.\n *\n * This function replaces any sequence of whitespace with a single hyphen and\n * trims leading/trailing whitespace, leaving all other characters intact.\n */\nfunction sanitizeTabValue(value: string): string {\n return value.trim().replace(/\\s+/g, '-')\n}\n\nconst TabListContext = React.createContext<{\n align?: Align\n shape: tabShape\n}>({\n align: 'left',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n align?: Align\n shape?: tabShape\n }\n>(({ children, align = 'left', shape = 'default', value, ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} value={value != null ? sanitizeTabValue(String(value)) : undefined} {...props}>\n <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\n\nconst tabsTriggerVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n\n const wrapperClass =\n alignFromParent === 'center'\n ? 'flex w-full justify-center'\n : alignFromParent === 'right'\n ? 'flex w-full justify-end'\n : null\n\n const list = (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n tabsListVariants({ shape: shapeFromParent }),\n className\n )}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n {...props}\n />\n )\n\n return wrapperClass ? <div className={wrapperClass}>{list}</div> : list\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, value, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e)\n const tabElement = e?.currentTarget\n const container = e?.currentTarget?.parentElement\n if (tabElement && container) {\n const tabLeft = tabElement.offsetLeft\n const tabWidth = tabElement.offsetWidth\n const containerWidth = container.offsetWidth\n const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n container.scrollTo({\n left: scrollTo,\n behavior: 'smooth',\n })\n }\n }\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n className,\n tabsTriggerVariants({\n shape: shapeFromParent,\n })\n )}\n onClick={handleClick}\n value={sanitizeTabValue(value)}\n data-radix-collection-item={sanitizeTabValue(value)}\n {...props}\n />\n )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, value, ...props }, ref) => (\n <TabsPrimitive.Content ref={ref} className={cn(className)} value={sanitizeTabValue(value)} {...props} />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
5
+ "mappings": "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",
6
6
  "names": ["tabs_exports", "__export", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "TabsPrimitive", "import_class_variance_authority", "sanitizeTabValue", "value", "TabListContext", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "className", "alignFromParent", "shapeFromParent", "wrapperClass", "list", "onClick", "handleClick", "e", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo"]
7
7
  }
package/dist/esm/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as l,jsxs as Se}from"react/jsx-runtime";import ie,{useState as L,useEffect as b,useRef as y,useImperativeHandle as oe,useId as le}from"react";import{cn as ce}from"../../helpers/utils.js";import{Tabs as me,TabsList as fe,TabsTrigger as pe}from"../../components/tabs.js";import ue from"../Title/index.js";import de from"../SwiperBox/index.js";import{withLayout as he}from"../../shared/Styles.js";import{gaTrack as V}from"../../shared/track.js";import{useMediaQuery as ge}from"react-responsive";import{useRollout as _e}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as we,ShelfDisplayHorizontalItem as be}from"./shelfDisplayItem.js";const ye="image",Te="product_shelf",ve=f=>f==null?"default":String(f).replace(/[^a-zA-Z0-9_-]/g,"")||"default",B=ie.forwardRef(({key:f,data:p,event:E,buildData:T,breakpoints:N,className:z="",recommendedData:i,target:A="_self",metafields:q,isDisplayGudgments:v=!1,isDisplayBackImage:$=!1,renderOriginalPrice:O,renderPriceLabel:K,renderPrice:Q,onAddCart:W,onBuyNow:Z,onLearnMore:j,formatPrice:F,...G},J)=>{const{productsTab:a=[],productsCard:S=[],title:k,isShowTab:u=!0,tabShape:U="square",isShowTag:X=!1,isShowOriginalPrice:Y=!0,isShowRecommendedCard:I=!1,...ee}=p,[d,R]=L(""),[r,g]=L([]),D=y(!1),_=y(!1),x=y(null),te=le(),se=ge({query:"(max-width: 768px)"}),[ne,M]=_e({threshold:0}),h=r?.length<=1&&v,c=!se&&r?.length<=2&&v,w=e=>{switch(e){case 1440:return c?r?.length:4;case 1024:return c?r?.length:3;default:return c?r?.length:2.3}},P=()=>{V({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:i?.map((e,s)=>{const n=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:s+1}})}})},m=(e,s)=>{if(s){const o=i?.map?.(n=>({...n,isShowRecommended:!0}));g(o?.length?o||[]:[])}else if(Array.isArray(e)){const n=e?.map?.(t=>{const H=T?.products?.find(re=>re?.handle===t?.handle);if(H)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",custom_bg_image:t?.custom_bg_image||"",...H}})?.filter(t=>t);g(n?.length?n||[]:[])}else g([])};oe(J,()=>x.current),b(()=>{M&&i?.length&&!D.current&&(D.current=!0,P())},[M,i]),b(()=>{if(!_.current){if(!_.current&&i?.length&&(_.current=!0),u){const e=a?.find(s=>s?.tab===d)||a?.[0];R(e?.tab||""),m(e?.data||[],e?.isShowRecommendedTab);return}m(S,I)}},[i]),b(()=>{if(u){const e=a?.find(s=>s?.tab===d)||a?.[0];m(e?.data||[],e?.isShowRecommendedTab);return}m(S,I)},[T]);const ae=ve(d),C=`${te}-${ae}`;return Se("div",{ref:x,...G,className:ce("shelf-display-wrap text-info-primary w-full",z,{"aiui-dark":p?.theme==="dark"}),children:[k&&l(ue,{data:{title:k}}),u&&a?.length>0&&l(me,{value:d,onValueChange:e=>{const s=a?.find(o=>o?.tab===e);if(s){if(R(e),m(s.data||[],s.isShowRecommendedTab),!s.isShowRecommendedTab){V({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ye,component_name:Te,component_title:p?.title,component_position:1,navigation:e}});return}P()}},shape:U==="rounded"?"rounded":"square",children:l(fe,{children:a.map(e=>l(pe,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),l("div",{ref:ne,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:l(de,{data:{list:r,configuration:{...ee,event:E,isShowTag:X,isShowOriginalPrice:Y,target:A,metafields:q,itemLength:r?.length,isDisplayBackImage:$,renderOriginalPrice:O,renderPriceLabel:K,renderPrice:Q,onAddCart:W,onBuyNow:Z,onLearnMore:j,formatPrice:F}},id:C,className:`${u?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:c?"flex-1":"",Slide:c?be:we,breakpoints:N||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h?1:1.2},768:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:w()},1024:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:w(1024)},1440:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:w(1440)}}},C)})]})});B.displayName="ShelfDisplay";var Ve=he(B);export{Ve as default};
1
+ "use client";import{jsx as c,jsxs as ke}from"react/jsx-runtime";import oe,{useState as H,useEffect as w,useRef as y,useImperativeHandle as le,useId as ce}from"react";import{cn as me}from"../../helpers/utils.js";import{Tabs as fe,TabsList as ue,TabsTrigger as pe}from"../../components/tabs.js";import de from"../Title/index.js";import he from"../SwiperBox/index.js";import{withLayout as ge}from"../../shared/Styles.js";import{gaTrack as L}from"../../shared/track.js";import{useMediaQuery as _e}from"react-responsive";import{useRollout as be}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as we,ShelfDisplayHorizontalItem as ye}from"./shelfDisplayItem.js";const Te="image",ve="product_shelf",B=i=>i==null?"default":String(i).replace(/[^a-zA-Z0-9_-]/g,"")||"default";function Se(i){return i.trim().replace(/\s+/g,"-")}const E=oe.forwardRef(({key:i,data:u,event:z,buildData:T,breakpoints:N,className:A="",recommendedData:o,target:q="_self",metafields:$,isDisplayGudgments:v=!1,isDisplayBackImage:O=!1,renderOriginalPrice:K,renderPriceLabel:Q,renderPrice:W,onAddCart:Z,onBuyNow:j,onLearnMore:F,formatPrice:G,...J},U)=>{const{productsTab:a=[],productsCard:S=[],title:k,isShowTab:p=!0,tabShape:X="square",isShowTag:Y=!1,isShowOriginalPrice:ee=!0,isShowRecommendedCard:I=!1,...te}=u,[d,R]=H(""),[r,g]=H([]),D=y(!1),_=y(!1),x=y(null),se=ce(),ne=_e({query:"(max-width: 768px)"}),[ae,M]=be({threshold:0}),h=r?.length<=1&&v,m=!ne&&r?.length<=2&&v,b=e=>{switch(e){case 1440:return m?r?.length:4;case 1024:return m?r?.length:3;default:return m?r?.length:2.3}},P=()=>{L({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:o?.map((e,s)=>{const n=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:s+1}})}})},f=(e,s)=>{if(s){const l=o?.map?.(n=>({...n,isShowRecommended:!0}));g(l?.length?l||[]:[])}else if(Array.isArray(e)){const n=e?.map?.(t=>{const C=T?.products?.find(ie=>ie?.handle===t?.handle);if(C)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",custom_bg_image:t?.custom_bg_image||"",...C}})?.filter(t=>t);g(n?.length?n||[]:[])}else g([])};le(U,()=>x.current),w(()=>{M&&o?.length&&!D.current&&(D.current=!0,P())},[M,o]),w(()=>{if(!_.current){if(!_.current&&o?.length&&(_.current=!0),p){const e=a?.find(s=>s?.tab===d)||a?.[0];R(e?.tab||""),f(e?.data||[],e?.isShowRecommendedTab);return}f(S,I)}},[o]),w(()=>{if(p){const e=a?.find(s=>s?.tab===d)||a?.[0];f(e?.data||[],e?.isShowRecommendedTab);return}f(S,I)},[T]);const re=B(d),V=`${B(se)}-${re}`;return ke("div",{ref:x,...J,className:me("shelf-display-wrap text-info-primary w-full",A,{"aiui-dark":u?.theme==="dark"}),children:[k&&c(de,{data:{title:k}}),p&&a?.length>0&&c(fe,{value:d,onValueChange:e=>{const s=a?.find(l=>Se(l?.tab)===e);if(s){if(R(e),f(s.data||[],s.isShowRecommendedTab),!s.isShowRecommendedTab){L({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:Te,component_name:ve,component_title:u?.title,component_position:1,navigation:e}});return}P()}},shape:X==="rounded"?"rounded":"square",children:c(ue,{children:a.map(e=>c(pe,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),c("div",{ref:ae,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:c(he,{data:{list:r,configuration:{...te,event:z,isShowTag:Y,isShowOriginalPrice:ee,target:q,metafields:$,itemLength:r?.length,isDisplayBackImage:O,renderOriginalPrice:K,renderPriceLabel:Q,renderPrice:W,onAddCart:Z,onBuyNow:j,onLearnMore:F,formatPrice:G}},id:V,className:`${p?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:m?"flex-1":"",Slide:m?ye:we,breakpoints:N||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h?1:1.2},768:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b()},1024:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b(1024)},1440:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b(1440)}}},V)})]})});E.displayName="ShelfDisplay";var Ee=ge(E);export{Ee as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/ShelfDisplay/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle, useId } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n ...rest\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceId = useId()\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n custom_bg_image: item?.custom_bg_image || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceId}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n {...rest}\n className={cn('shelf-display-wrap text-info-primary w-full', className, {\n 'aiui-dark': data?.theme === 'dark',\n })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && productsTab?.length > 0 && (\n <Tabs\n value={tabId}\n onValueChange={value => {\n const currentTab = productsTab?.find(item => item?.tab === value)\n if (currentTab) {\n setTabId(value)\n handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n if (!currentTab.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: value,\n },\n })\n return\n }\n gackViewEvent()\n }\n }}\n shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n >\n <TabsList>\n {productsTab.map(item => (\n <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n {item?.tab || ''}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
5
- "mappings": "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",
6
- "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "useId", "cn", "Tabs", "TabsList", "TabsTrigger", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceId", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "ShelfDisplay_default"]
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle, useId } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nfunction sanitizeTabValue(value: string): string {\n return value.trim().replace(/\\s+/g, '-')\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n ...rest\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceId = useId()\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n custom_bg_image: item?.custom_bg_image || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const safeInstanceId = sanitizeCssSelector(instanceId)\n const swiperInstanceId = `${safeInstanceId}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n {...rest}\n className={cn('shelf-display-wrap text-info-primary w-full', className, {\n 'aiui-dark': data?.theme === 'dark',\n })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && productsTab?.length > 0 && (\n <Tabs\n value={tabId}\n onValueChange={value => {\n const currentTab = productsTab?.find(item => sanitizeTabValue(item?.tab) === value)\n if (currentTab) {\n setTabId(value)\n handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n if (!currentTab.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: value,\n },\n })\n return\n }\n gackViewEvent()\n }\n }}\n shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n >\n <TabsList>\n {productsTab.map(item => (\n <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n {item?.tab || ''}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
+ "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "useId", "cn", "Tabs", "TabsList", "TabsTrigger", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "sanitizeTabValue", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceId", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "ShelfDisplay_default"]
7
7
  }
package/dist/esm/components/tabs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{cn as m}from"../helpers/index.js";import*as i from"@radix-ui/react-tabs";import{cva as g}from"class-variance-authority";function u(t){return t.trim().replace(/\s+/g,"-")}const b=o.createContext({align:"left",shape:"square"}),h=o.forwardRef(({children:t,align:s="left",shape:e="default",...a},n)=>r(i.Root,{ref:n,...a,children:r(b.Provider,{value:{align:s,shape:e},children:t})}));h.displayName="Tabs";const w=g("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),L=g("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),T=o.forwardRef(({className:t,...s},e)=>{const{align:a,shape:n}=o.useContext(b),l=a==="center"?"flex w-full justify-center":a==="right"?"flex w-full justify-end":null,p=r(i.List,{ref:e,className:m("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",w({shape:n}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...s});return l?r("div",{className:l,children:p}):p});T.displayName=i.List.displayName;const R=o.forwardRef(({className:t,onClick:s,value:e,...a},n)=>{const{shape:l}=o.useContext(b),p=f=>{s?.(f);const d=f?.currentTarget,c=f?.currentTarget?.parentElement;if(d&&c){const x=d.offsetLeft,y=d.offsetWidth,P=c.offsetWidth,C=x-P/2+y/2;c.scrollTo({left:C,behavior:"smooth"})}};return r(i.Trigger,{ref:n,className:m("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]",t,L({shape:l})),onClick:p,value:u(e),"data-radix-collection-item":u(e),...a})});R.displayName=i.Trigger.displayName;const v=o.forwardRef(({className:t,value:s,...e},a)=>r(i.Content,{ref:a,className:m(t),value:u(s),...e}));v.displayName=i.Content.displayName;export{h as Tabs,v as TabsContent,T as TabsList,R as TabsTrigger};
1
+ "use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{cn as u}from"../helpers/index.js";import*as n from"@radix-ui/react-tabs";import{cva as g}from"class-variance-authority";function f(t){return t.trim().replace(/\s+/g,"-")}const b=o.createContext({align:"left",shape:"square"}),h=o.forwardRef(({children:t,align:s="left",shape:a="default",value:e,...l},i)=>r(n.Root,{ref:i,value:e!=null?f(String(e)):void 0,...l,children:r(b.Provider,{value:{align:s,shape:a},children:t})}));h.displayName="Tabs";const w=g("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),L=g("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),T=o.forwardRef(({className:t,...s},a)=>{const{align:e,shape:l}=o.useContext(b),i=e==="center"?"flex w-full justify-center":e==="right"?"flex w-full justify-end":null,p=r(n.List,{ref:a,className:u("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",w({shape:l}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...s});return i?r("div",{className:i,children:p}):p});T.displayName=n.List.displayName;const R=o.forwardRef(({className:t,onClick:s,value:a,...e},l)=>{const{shape:i}=o.useContext(b),p=d=>{s?.(d);const c=d?.currentTarget,m=d?.currentTarget?.parentElement;if(c&&m){const x=c.offsetLeft,y=c.offsetWidth,P=m.offsetWidth,C=x-P/2+y/2;m.scrollTo({left:C,behavior:"smooth"})}};return r(n.Trigger,{ref:l,className:u("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]",t,L({shape:i})),onClick:p,value:f(a),"data-radix-collection-item":f(a),...e})});R.displayName=n.Trigger.displayName;const v=o.forwardRef(({className:t,value:s,...a},e)=>r(n.Content,{ref:e,className:u(t),value:f(s),...a}));v.displayName=n.Content.displayName;export{h as Tabs,v as TabsContent,T as TabsList,R as TabsTrigger};
2
2
  //# sourceMappingURL=tabs.js.map
package/dist/esm/components/tabs.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/tabs.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\ntype tabShape = Shape | 'default'\n\n/**\n * Sanitize a tab value so it is safe to use as part of an HTML id attribute.\n *\n * HTML ids must not contain whitespace characters. Radix UI uses the value\n * directly in generated ids (e.g. `radix-:r0:-trigger-{value}`), so an\n * unsanitized value like \"best seller\" would produce an invalid id.\n *\n * This function replaces any sequence of whitespace with a single hyphen and\n * trims leading/trailing whitespace, leaving all other characters intact.\n */\nfunction sanitizeTabValue(value: string): string {\n return value.trim().replace(/\\s+/g, '-')\n}\n\nconst TabListContext = React.createContext<{\n align?: Align\n shape: tabShape\n}>({\n align: 'left',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n align?: Align\n shape?: tabShape\n }\n>(({ children, align = 'left', shape = 'default', ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} {...props}>\n <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\n\nconst tabsTriggerVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n\n const wrapperClass =\n alignFromParent === 'center'\n ? 'flex w-full justify-center'\n : alignFromParent === 'right'\n ? 'flex w-full justify-end'\n : null\n\n const list = (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n tabsListVariants({ shape: shapeFromParent }),\n className\n )}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n {...props}\n />\n )\n\n return wrapperClass ? <div className={wrapperClass}>{list}</div> : list\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, value, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e)\n const tabElement = e?.currentTarget\n const container = e?.currentTarget?.parentElement\n if (tabElement && container) {\n const tabLeft = tabElement.offsetLeft\n const tabWidth = tabElement.offsetWidth\n const containerWidth = container.offsetWidth\n const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n container.scrollTo({\n left: scrollTo,\n behavior: 'smooth',\n })\n }\n }\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n className,\n tabsTriggerVariants({\n shape: shapeFromParent,\n })\n )}\n onClick={handleClick}\n value={sanitizeTabValue(value)}\n data-radix-collection-item={sanitizeTabValue(value)}\n {...props}\n />\n )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, value, ...props }, ref) => (\n <TabsPrimitive.Content ref={ref} className={cn(className)} value={sanitizeTabValue(value)} {...props} />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
5
- "mappings": "aAyCI,cAAAA,MAAA,oBAvCJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAepB,SAASC,EAAiBC,EAAuB,CAC/C,OAAOA,EAAM,KAAK,EAAE,QAAQ,OAAQ,GAAG,CACzC,CAEA,MAAMC,EAAiBN,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKO,EAAOP,EAAM,WAMjB,CAAC,CAAE,SAAAQ,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,UAAW,GAAGC,CAAM,EAAGC,IAC5Db,EAACG,EAAc,KAAd,CAAmB,IAAKU,EAAM,GAAGD,EAChC,SAAAZ,EAACO,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMM,EAAmBV,EAAI,eAAgB,CAC3C,SAAU,CACR,MAAO,CACL,QAAS,GACT,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,SACT,CACF,CAAC,EAEKW,EAAsBX,EAAI,eAAgB,CAC9C,SAAU,CACR,MAAO,CACL,QAAS,GACT,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,SACT,CACF,CAAC,EACKY,EAAWf,EAAM,WAGrB,CAAC,CAAE,UAAAgB,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIlB,EAAM,WAAWM,CAAc,EAEpFa,EACJF,IAAoB,SAChB,6BACAA,IAAoB,QAClB,0BACA,KAEFG,EACJrB,EAACG,EAAc,KAAd,CACC,IAAKU,EACL,UAAWX,EACT,4DACAY,EAAiB,CAAE,MAAOK,CAAgB,CAAC,EAC3CF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGL,EACN,EAGF,OAAOQ,EAAepB,EAAC,OAAI,UAAWoB,EAAe,SAAAC,EAAK,EAASA,CACrE,CAAC,EACDL,EAAS,YAAcb,EAAc,KAAK,YAE1C,MAAMmB,EAAcrB,EAAM,WAGxB,CAAC,CAAE,UAAAgB,EAAW,QAAAM,EAAS,MAAAjB,EAAO,GAAGM,CAAM,EAAGC,IAAQ,CAClD,KAAM,CAAE,MAAOM,CAAgB,EAAIlB,EAAM,WAAWM,CAAc,EAE5DiB,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACX,MAAMC,EAAaD,GAAG,cAChBE,EAAYF,GAAG,eAAe,cACpC,GAAIC,GAAcC,EAAW,CAC3B,MAAMC,EAAUF,EAAW,WACrBG,EAAWH,EAAW,YACtBI,EAAiBH,EAAU,YAC3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CACF,EACA,OACE/B,EAACG,EAAc,QAAd,CACC,IAAKU,EACL,UAAWX,EACT,8PACAe,EACAF,EAAoB,CAClB,MAAOI,CACT,CAAC,CACH,EACA,QAASK,EACT,MAAOnB,EAAiBC,CAAK,EAC7B,6BAA4BD,EAAiBC,CAAK,EACjD,GAAGM,EACN,CAEJ,CAAC,EACDU,EAAY,YAAcnB,EAAc,QAAQ,YAEhD,MAAM6B,EAAc/B,EAAM,WAGxB,CAAC,CAAE,UAAAgB,EAAW,MAAAX,EAAO,GAAGM,CAAM,EAAGC,IACjCb,EAACG,EAAc,QAAd,CAAsB,IAAKU,EAAK,UAAWX,EAAGe,CAAS,EAAG,MAAOZ,EAAiBC,CAAK,EAAI,GAAGM,EAAO,CACvG,EACDoB,EAAY,YAAc7B,EAAc,QAAQ",
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\ntype tabShape = Shape | 'default'\n\n/**\n * Sanitize a tab value so it is safe to use as part of an HTML id attribute.\n *\n * HTML ids must not contain whitespace characters. Radix UI uses the value\n * directly in generated ids (e.g. `radix-:r0:-trigger-{value}`), so an\n * unsanitized value like \"best seller\" would produce an invalid id.\n *\n * This function replaces any sequence of whitespace with a single hyphen and\n * trims leading/trailing whitespace, leaving all other characters intact.\n */\nfunction sanitizeTabValue(value: string): string {\n return value.trim().replace(/\\s+/g, '-')\n}\n\nconst TabListContext = React.createContext<{\n align?: Align\n shape: tabShape\n}>({\n align: 'left',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n align?: Align\n shape?: tabShape\n }\n>(({ children, align = 'left', shape = 'default', value, ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} value={value != null ? sanitizeTabValue(String(value)) : undefined} {...props}>\n <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\n\nconst tabsTriggerVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n\n const wrapperClass =\n alignFromParent === 'center'\n ? 'flex w-full justify-center'\n : alignFromParent === 'right'\n ? 'flex w-full justify-end'\n : null\n\n const list = (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n tabsListVariants({ shape: shapeFromParent }),\n className\n )}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n {...props}\n />\n )\n\n return wrapperClass ? <div className={wrapperClass}>{list}</div> : list\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, value, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e)\n const tabElement = e?.currentTarget\n const container = e?.currentTarget?.parentElement\n if (tabElement && container) {\n const tabLeft = tabElement.offsetLeft\n const tabWidth = tabElement.offsetWidth\n const containerWidth = container.offsetWidth\n const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n container.scrollTo({\n left: scrollTo,\n behavior: 'smooth',\n })\n }\n }\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n className,\n tabsTriggerVariants({\n shape: shapeFromParent,\n })\n )}\n onClick={handleClick}\n value={sanitizeTabValue(value)}\n data-radix-collection-item={sanitizeTabValue(value)}\n {...props}\n />\n )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, value, ...props }, ref) => (\n <TabsPrimitive.Content ref={ref} className={cn(className)} value={sanitizeTabValue(value)} {...props} />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "React", "cn", "TabsPrimitive", "cva", "sanitizeTabValue", "value", "TabListContext", "Tabs", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "TabsList", "className", "alignFromParent", "shapeFromParent", "wrapperClass", "list", "TabsTrigger", "onClick", "handleClick", "e", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo", "TabsContent"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.3.38",
3
+ "version": "1.3.39",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",