npm - @anker-in/headless-ui - Versions diffs - 1.1.49 → 1.1.51 - Mend

@anker-in/headless-ui 1.1.49 → 1.1.51

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 (75) hide show

package/dist/cjs/biz-components/AnchorNavigation/index.d.ts CHANGED Viewed

@@ -12,15 +12,19 @@ declare const anchorNavigationVariants: (props?: ({
     alignment?: "end" | "start" | "center" | null | undefined;
     size?: "small" | "large" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * 锚点项接口
+ */
+export interface AnchorSectionItem {
+    targetId: string;
+    label: string;
+}
 /**
  * AnchorNavigation 业务组件数据接口
  */
 export interface AnchorNavigationData {
     /** 锚点列表 */
-    sectionIds: {
-        targetId: string;
-        label: string;
-    }[];
+    sectionIds: AnchorSectionItem[];
     /** 导航项水平对齐方式 */
     alignment?: 'start' | 'center' | 'end';
     /** 主题模式 */
@@ -31,7 +35,10 @@ export interface AnchorNavigationData {
 export interface AnchorNavigationProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {
     /** 业务数据 */
     data: AnchorNavigationData;
+    /** 语义化类名 */
     classNames?: Partial<Record<keyof AnchorNavigationSemanticName, string>>;
+    /** 自定义点击事件，传入时会替代默认的滚动行为 */
+    onItemClick?: (item: AnchorSectionItem, index: number) => void;
 }
 /**
  * AnchorNavigation - 锚点导航

package/dist/cjs/biz-components/AnchorNavigation/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var T=Object.create;var g=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var V=(t,e)=>{for(var n in e)g(t,n,{get:e[n],enumerable:!0})},y=(t,e,n,f)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of H(e))!L.call(t,o)&&o!==n&&g(t,o,{get:()=>e[o],enumerable:!(f=E(e,o))||f.enumerable});return t};var A=(t,e,n)=>(n=t!=null?T(D(t)):{},y(e||!t||!t.__esModule?g(n,"default",{value:t,enumerable:!0}):n,t)),z=t=>y(g({},"__esModule",{value:!0}),t);var S={};V(S,{default:()=>B});module.exports=z(S);var v=require("react/jsx-runtime"),l=A(require("react")),u=require("../../helpers/utils.js"),p=require("class-variance-authority"),k=A(require("./useAnchorPosition.js"));const M=(0,p.cva)("anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden",{variants:{alignment:{start:"tablet:justify-start",center:"tablet:justify-center",end:"tablet:justify-end"},size:{small:"gap-3",large:"gap-6"}},defaultVariants:{alignment:"start",size:"small"}}),P=(0,p.cva)("anchor-navigation-item after:bg-brand relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300",{variants:{size:{small:"py-3",large:"py-4"}},defaultVariants:{size:"small"}}),C=(0,p.cva)("tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] sticky top-0 z-40 w-full px-4",{variants:{theme:{light:"bg-white",dark:"bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),N=l.forwardRef(({classNames:t={},data:e},n)=>{const{alignment:f="start",theme:o="light",size:x="small"}=e,m=(0,k.default)(e.sectionIds?.map(a=>a.targetId)||[]),d=l.useRef(null),h=l.useRef(null),I=l.useRef([]);l.useImperativeHandle(n,()=>d.current);const b=l.useCallback(a=>{const i=I.current[a];if(i&&h.current){const r=h.current,s=i,c=s.offsetLeft-r.offsetWidth/2+s.offsetWidth/2;typeof r.scrollTo=="function"&&r.scrollTo({left:c,behavior:"smooth"})}},[]);return l.useEffect(()=>{if(!m)return;const a=e.sectionIds?.findIndex(i=>i.targetId===m);a!==void 0&&a!==-1&&b(a)},[m,e.sectionIds,b]),(0,v.jsx)("div",{ref:d,className:(0,u.cn)(C({theme:o}),t?.root),children:(0,v.jsx)("div",{ref:h,className:(0,u.cn)(M({alignment:f,size:x}),"relative",t?.content),children:e.sectionIds?.map((a,i)=>{const r=m===a.targetId,s=o==="dark";return(0,v.jsx)("button",{ref:c=>{c&&(I.current[i]=c)},onClick:()=>{b(i);const c=document.getElementById(a.targetId);if(c&&d.current){const w=d.current.offsetHeight,R=c.getBoundingClientRect().top+window.scrollY-w;window.scrollTo({top:R,behavior:"smooth"})}},className:(0,u.cn)(P({size:x}),{"text-[#4A4C56]":!s&&!r,"text-[#080A0F] after:w-full after:opacity-100":!s&&r,"text-[#8A8D92]":s&&!r,"text-white after:w-full after:opacity-100":s&&r},t?.item),children:a.label},a.targetId)})})})});N.displayName="AnchorNavigation";var B=N;
+"use strict";"use client";var E=Object.create;var u=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var z=(t,e)=>{for(var a in e)u(t,a,{get:e[a],enumerable:!0})},y=(t,e,a,f)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of D(e))!V.call(t,i)&&i!==a&&u(t,i,{get:()=>e[i],enumerable:!(f=H(e,i))||f.enumerable});return t};var N=(t,e,a)=>(a=t!=null?E(L(t)):{},y(e||!t||!t.__esModule?u(a,"default",{value:t,enumerable:!0}):a,t)),M=t=>y(u({},"__esModule",{value:!0}),t);var j={};z(j,{default:()=>B});module.exports=M(j);var h=require("react/jsx-runtime"),l=N(require("react")),g=require("../../helpers/utils.js"),p=require("class-variance-authority"),w=N(require("./useAnchorPosition.js"));const P=(0,p.cva)("anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden",{variants:{alignment:{start:"tablet:justify-start",center:"tablet:justify-center",end:"tablet:justify-end"},size:{small:"gap-3",large:"gap-6"}},defaultVariants:{alignment:"start",size:"small"}}),S=(0,p.cva)("anchor-navigation-item after:bg-brand-0 relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300",{variants:{size:{small:"py-3",large:"py-4"}},defaultVariants:{size:"small"}}),C=(0,p.cva)("tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] sticky top-0 z-40 w-full px-4",{variants:{theme:{light:"bg-white",dark:"bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),k=l.forwardRef(({classNames:t={},data:e,onItemClick:a},f)=>{const{alignment:i="start",theme:I="light",size:x="small"}=e,m=(0,w.default)(e.sectionIds?.map(n=>n.targetId)||[]),d=l.useRef(null),v=l.useRef(null),A=l.useRef([]);l.useImperativeHandle(f,()=>d.current);const b=l.useCallback(n=>{const o=A.current[n];if(o&&v.current){const r=v.current,s=o,c=s.offsetLeft-r.offsetWidth/2+s.offsetWidth/2;typeof r.scrollTo=="function"&&r.scrollTo({left:c,behavior:"smooth"})}},[]);return l.useEffect(()=>{if(!m)return;const n=e.sectionIds?.findIndex(o=>o.targetId===m);n!==void 0&&n!==-1&&b(n)},[m,e.sectionIds,b]),(0,h.jsx)("div",{ref:d,className:(0,g.cn)(C({theme:I}),t?.root),children:(0,h.jsx)("div",{ref:v,className:(0,g.cn)(P({alignment:i,size:x}),"relative",t?.content),children:e.sectionIds?.map((n,o)=>{const r=m===n.targetId,s=I==="dark";return(0,h.jsx)("button",{ref:c=>{c&&(A.current[o]=c)},onClick:()=>{if(b(o),a){a(n,o);return}const c=document.getElementById(n.targetId);if(c&&d.current){const R=d.current.offsetHeight,T=c.getBoundingClientRect().top+window.scrollY-R;window.scrollTo({top:T,behavior:"smooth"})}},className:(0,g.cn)(S({size:x}),{"text-[#4A4C56]":!s&&!r,"text-[#080A0F] after:w-full after:opacity-100":!s&&r,"text-[#8A8D92]":s&&!r,"text-white after:w-full after:opacity-100":s&&r},t?.item),children:n.label},n.targetId)})})})});k.displayName="AnchorNavigation";var B=k;
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/AnchorNavigation/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AnchorNavigation/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\n\nexport interface AnchorNavigationSemanticName {\n  root: 'root'\n  content: 'content'\n  item: 'item'\n}\n\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n  'anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden',\n  {\n    variants: {\n      alignment: {\n        start: 'tablet:justify-start',\n        center: 'tablet:justify-center',\n        end: 'tablet:justify-end',\n      },\n      size: {\n        small: 'gap-3',\n        large: 'gap-6',\n      },\n    },\n    defaultVariants: {\n      alignment: 'start',\n      size: 'small',\n    },\n  }\n)\n\n/**\n * \u5BFC\u822A\u9879\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorItemVariants = cva(\n  'anchor-navigation-item after:bg-brand relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300',\n  {\n    variants: {\n      size: {\n        small: 'py-3',\n        large: 'py-4',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva(\n  'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] sticky top-0 z-40 w-full px-4',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white',\n        dark: 'bg-[#1E2024]',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n  /** \u951A\u70B9\u5217\u8868 */\n  sectionIds: {\n    targetId: string\n    label: string\n  }[]\n  /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n  alignment?: 'start' | 'center' | 'end'\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: 'light' | 'dark'\n  /** \u5BFC\u822A\u5927\u5C0F */\n  size?: 'small' | 'large'\n}\n\nexport interface AnchorNavigationProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: AnchorNavigationData\n  classNames?: Partial<Record<keyof AnchorNavigationSemanticName, string>>\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(({ classNames = {}, data }, ref) => {\n  const { alignment = 'start', theme = 'light', size = 'small' } = data\n  const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n  // \u66B4\u9732 rootRef \u7ED9\u5916\u90E8 ref\n  React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement)\n\n  const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n    const curRef = sectionRefs.current[activeIdIndex]\n\n    if (curRef && containerRef.current) {\n      const container = containerRef.current\n      const button = curRef\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n      // \u68C0\u67E5 scrollTo \u65B9\u6CD5\u662F\u5426\u5B58\u5728\uFF08\u517C\u5BB9\u6D4B\u8BD5\u73AF\u5883\u548C\u65E7\u6D4F\u89C8\u5668\uFF09\n      if (typeof container.scrollTo === 'function') {\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    }\n  }, [])\n\n  // \u5F53\u5C4F\u5E55\u6EDA\u52A8\u5BFC\u81F4 activeId \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5BFC\u822A\u680F\u5230\u5BF9\u5E94\u9879\n  React.useEffect(() => {\n    if (!activeId) return\n\n    const activeIndex = data.sectionIds?.findIndex(item => item.targetId === activeId)\n    if (activeIndex !== undefined && activeIndex !== -1) {\n      autoScrollToActiveItem(activeIndex)\n    }\n  }, [activeId, data.sectionIds, autoScrollToActiveItem])\n\n  return (\n    <div ref={rootRef} className={cn(containerVariants({ theme }), classNames?.root)}>\n      <div\n        ref={containerRef}\n        className={cn(anchorNavigationVariants({ alignment, size }), 'relative', classNames?.content)}\n      >\n        {data.sectionIds?.map((item, index) => {\n          const isActive = activeId === item.targetId\n          const isDark = theme === 'dark'\n\n          return (\n            <button\n              key={item.targetId}\n              ref={el => {\n                if (el) {\n                  sectionRefs.current[index] = el\n                }\n              }}\n              onClick={() => {\n                autoScrollToActiveItem(index)\n\n                // \u624B\u52A8\u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u8003\u8651\u5BFC\u822A\u680F\u9AD8\u5EA6\n                const targetElement = document.getElementById(item.targetId)\n                if (targetElement && rootRef.current) {\n                  const navHeight = rootRef.current.offsetHeight\n                  const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight\n\n                  window.scrollTo({\n                    top: targetPosition,\n                    behavior: 'smooth',\n                  })\n                }\n              }}\n              className={cn(\n                anchorItemVariants({ size }),\n                {\n                  // Light theme colors\n                  'text-[#4A4C56]': !isDark && !isActive,\n                  'text-[#080A0F] after:w-full after:opacity-100': !isDark && isActive,\n                  // Dark theme colors\n                  'text-[#8A8D92]': isDark && !isActive,\n                  'text-white after:w-full after:opacity-100': isDark && isActive,\n                },\n                classNames?.item\n              )}\n            >\n              {item.label}\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n})\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default AnchorNavigation\n"],
-  "mappings": "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",
-  "names": ["AnchorNavigation_exports", "__export", "AnchorNavigation_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_class_variance_authority", "import_useAnchorPosition", "anchorNavigationVariants", "anchorItemVariants", "containerVariants", "AnchorNavigation", "classNames", "data", "ref", "alignment", "theme", "size", "activeId", "useAnchorPosition", "item", "rootRef", "containerRef", "sectionRefs", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "activeIndex", "index", "isActive", "isDark", "el", "targetElement", "navHeight", "targetPosition"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\n\nexport interface AnchorNavigationSemanticName {\n  root: 'root'\n  content: 'content'\n  item: 'item'\n}\n\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n  'anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden',\n  {\n    variants: {\n      alignment: {\n        start: 'tablet:justify-start',\n        center: 'tablet:justify-center',\n        end: 'tablet:justify-end',\n      },\n      size: {\n        small: 'gap-3',\n        large: 'gap-6',\n      },\n    },\n    defaultVariants: {\n      alignment: 'start',\n      size: 'small',\n    },\n  }\n)\n\n/**\n * \u5BFC\u822A\u9879\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorItemVariants = cva(\n  'anchor-navigation-item after:bg-brand-0 relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300',\n  {\n    variants: {\n      size: {\n        small: 'py-3',\n        large: 'py-4',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva(\n  'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] sticky top-0 z-40 w-full px-4',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white',\n        dark: 'bg-[#1E2024]',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\n/**\n * \u951A\u70B9\u9879\u63A5\u53E3\n */\nexport interface AnchorSectionItem {\n  targetId: string\n  label: string\n}\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n  /** \u951A\u70B9\u5217\u8868 */\n  sectionIds: AnchorSectionItem[]\n  /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n  alignment?: 'start' | 'center' | 'end'\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: 'light' | 'dark'\n  /** \u5BFC\u822A\u5927\u5C0F */\n  size?: 'small' | 'large'\n}\n\nexport interface AnchorNavigationProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: AnchorNavigationData\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<keyof AnchorNavigationSemanticName, string>>\n  /** \u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684\u6EDA\u52A8\u884C\u4E3A */\n  onItemClick?: (item: AnchorSectionItem, index: number) => void\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(\n  ({ classNames = {}, data, onItemClick }, ref) => {\n    const { alignment = 'start', theme = 'light', size = 'small' } = data\n    const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n    const rootRef = React.useRef<HTMLDivElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n    // \u66B4\u9732 rootRef \u7ED9\u5916\u90E8 ref\n    React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement)\n\n    const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n      const curRef = sectionRefs.current[activeIdIndex]\n\n      if (curRef && containerRef.current) {\n        const container = containerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        // \u68C0\u67E5 scrollTo \u65B9\u6CD5\u662F\u5426\u5B58\u5728\uFF08\u517C\u5BB9\u6D4B\u8BD5\u73AF\u5883\u548C\u65E7\u6D4F\u89C8\u5668\uFF09\n        if (typeof container.scrollTo === 'function') {\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    }, [])\n\n    // \u5F53\u5C4F\u5E55\u6EDA\u52A8\u5BFC\u81F4 activeId \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5BFC\u822A\u680F\u5230\u5BF9\u5E94\u9879\n    React.useEffect(() => {\n      if (!activeId) return\n\n      const activeIndex = data.sectionIds?.findIndex(item => item.targetId === activeId)\n      if (activeIndex !== undefined && activeIndex !== -1) {\n        autoScrollToActiveItem(activeIndex)\n      }\n    }, [activeId, data.sectionIds, autoScrollToActiveItem])\n\n    return (\n      <div ref={rootRef} className={cn(containerVariants({ theme }), classNames?.root)}>\n        <div\n          ref={containerRef}\n          className={cn(anchorNavigationVariants({ alignment, size }), 'relative', classNames?.content)}\n        >\n          {data.sectionIds?.map((item, index) => {\n            const isActive = activeId === item.targetId\n            const isDark = theme === 'dark'\n\n            return (\n              <button\n                key={item.targetId}\n                ref={el => {\n                  if (el) {\n                    sectionRefs.current[index] = el\n                  }\n                }}\n                onClick={() => {\n                  // \u9ED8\u8BA4\u884C\u4E3A\uFF1A\u6EDA\u52A8\u5230\u5BF9\u5E94\u951A\u70B9\n                  autoScrollToActiveItem(index)\n\n                  // \u5982\u679C\u6709\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\n                  if (onItemClick) {\n                    onItemClick(item, index)\n                    return\n                  }\n\n                  // \u624B\u52A8\u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u8003\u8651\u5BFC\u822A\u680F\u9AD8\u5EA6\n                  const targetElement = document.getElementById(item.targetId)\n                  if (targetElement && rootRef.current) {\n                    const navHeight = rootRef.current.offsetHeight\n                    const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight\n\n                    window.scrollTo({\n                      top: targetPosition,\n                      behavior: 'smooth',\n                    })\n                  }\n                }}\n                className={cn(\n                  anchorItemVariants({ size }),\n                  {\n                    // Light theme colors\n                    'text-[#4A4C56]': !isDark && !isActive,\n                    'text-[#080A0F] after:w-full after:opacity-100': !isDark && isActive,\n                    // Dark theme colors\n                    'text-[#8A8D92]': isDark && !isActive,\n                    'text-white after:w-full after:opacity-100': isDark && isActive,\n                  },\n                  classNames?.item\n                )}\n              >\n                {item.label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  }\n)\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default AnchorNavigation\n"],
+  "mappings": "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",
+  "names": ["AnchorNavigation_exports", "__export", "AnchorNavigation_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_class_variance_authority", "import_useAnchorPosition", "anchorNavigationVariants", "anchorItemVariants", "containerVariants", "AnchorNavigation", "classNames", "data", "onItemClick", "ref", "alignment", "theme", "size", "activeId", "useAnchorPosition", "item", "rootRef", "containerRef", "sectionRefs", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "activeIndex", "index", "isActive", "isDark", "el", "targetElement", "navHeight", "targetPosition"]
 }

package/dist/cjs/biz-components/BrandCardLink/BrandCardLink.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var T=Object.create;var m=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var j=(e,i)=>{for(var r in i)m(e,r,{get:i[r],enumerable:!0})},g=(e,i,r,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of E(i))!P.call(e,n)&&n!==r&&m(e,n,{get:()=>i[n],enumerable:!(s=A(i,n))||s.enumerable});return e};var h=(e,i,r)=>(r=e!=null?T(I(e)):{},g(i||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),D=e=>g(m({},"__esModule",{value:!0}),e);var F={};j(F,{default:()=>z});module.exports=D(F);var t=require("react/jsx-runtime"),o=require("react"),a=require("../../helpers/utils.js"),b=h(require("../../components/picture.js")),y=require("../../shared/Styles.js"),N=require("react-responsive"),L=require("../../hooks/useExposure.js"),c=require("swiper/react"),l=require("swiper/modules"),W=require("../Title/index.js"),M=h(require("../../components/link.js"));const H="copy",q="store_benefits",R=(e,i)=>{const r=[];for(let s=0;s<e.length;s+=i)r.push(e.slice(s,s+i));return r},v=(0,o.forwardRef)(({data:{items:e=[],itemShape:i},className:r},s)=>{const[n,S]=(0,o.useState)(!1),f=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,o.useRef)(null),u=(0,o.useRef)(null);(0,o.useImperativeHandle)(s,()=>u.current),(0,L.useExposure)(u,{componentType:H,componentName:q}),(0,o.useEffect)(()=>{S(f)},[f]);const B=n?R(e,3):e;return(0,t.jsx)("div",{ref:u,className:(0,a.cn)("brand-equity-wrapper w-full",r),children:n?(0,t.jsxs)(c.Swiper,{className:(0,a.cn)(r),modules:[l.FreeMode,l.Mousewheel,l.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:x.current},breakpoints:{0:{spaceBetween:12}},children:[B?.map((p,d)=>(0,t.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(p)&&p?.map((C,k)=>(0,t.jsx)(w,{data:C,itemShape:i,index:k},k))},"SwiperSlide"+d)),(0,t.jsx)("div",{ref:x,className:"mt-3 flex justify-center"})]}):(0,t.jsx)("div",{className:(0,a.cn)("laptop:gap-4 tablet:grid-cols-2 laptop:grid-cols-4 grid grid-cols-1 gap-3"),children:e.map((p,d)=>(0,t.jsx)(w,{data:p,itemShape:i,index:d},d))})})}),w=({data:e,itemShape:i,index:r})=>(0,t.jsxs)("div",{className:(0,a.cn)("brand-equity-item","lg-desktop:p-8 desktop:p-6 p-4","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]","box-border flex w-full flex-col justify-between overflow-hidden bg-[#DAE7F2]",i==="round"?"rounded-box":"rounded-none"),children:[(0,t.jsxs)("div",{className:"lg-desktop:h-[50px] flex h-10 items-center justify-between gap-3",children:[(0,t.jsx)("h3",{className:"link-item-title lg-desktop:text-[18px] desktop:text-[16px] line-clamp-2 flex-1 text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]",children:e.title}),(0,t.jsx)("div",{className:"link-item-img lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,t.jsx)(b.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,t.jsxs)("div",{className:"box-border overflow-hidden",children:[(0,t.jsx)("p",{title:e.description||"",className:"link-item-description lg-desktop:text-[24px] line-clamp-2 text-[20px] font-semibold leading-[1.2] tracking-[-0.04em] text-[#767880]",children:e.description||""}),(0,t.jsxs)(M.default,{href:e?.link,asChild:!e?.link,className:"desktop:mt-4 mt-2 flex items-center gap-0.5 no-underline hover:underline",children:[(0,t.jsx)("span",{className:"link-item-text laptop:text-base text-sm",children:e?.linkText}),(0,t.jsx)("div",{className:"size-6",children:(0,t.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,t.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})]});v.displayName="BrandCardLink";var z=(0,y.withLayout)(v);
+"use strict";"use client";var T=Object.create;var m=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var j=(e,i)=>{for(var r in i)m(e,r,{get:i[r],enumerable:!0})},g=(e,i,r,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of E(i))!P.call(e,n)&&n!==r&&m(e,n,{get:()=>i[n],enumerable:!(s=A(i,n))||s.enumerable});return e};var v=(e,i,r)=>(r=e!=null?T(I(e)):{},g(i||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),D=e=>g(m({},"__esModule",{value:!0}),e);var F={};j(F,{default:()=>z});module.exports=D(F);var t=require("react/jsx-runtime"),o=require("react"),a=require("../../helpers/utils.js"),b=v(require("../../components/picture.js")),y=require("../../shared/Styles.js"),N=require("react-responsive"),L=require("../../hooks/useExposure.js"),c=require("swiper/react"),l=require("swiper/modules"),W=require("../Title/index.js"),M=v(require("../../components/link.js"));const H="copy",q="store_benefits",R=(e,i)=>{const r=[];for(let s=0;s<e.length;s+=i)r.push(e.slice(s,s+i));return r},h=(0,o.forwardRef)(({data:{items:e=[],itemShape:i},className:r},s)=>{const[n,S]=(0,o.useState)(!1),f=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,o.useRef)(null),u=(0,o.useRef)(null);(0,o.useImperativeHandle)(s,()=>u.current),(0,L.useExposure)(u,{componentType:H,componentName:q}),(0,o.useEffect)(()=>{S(f)},[f]);const B=n?R(e,3):e;return(0,t.jsx)("div",{ref:u,className:(0,a.cn)("brand-equity-wrapper w-full",r),children:n?(0,t.jsxs)(c.Swiper,{className:(0,a.cn)(r),modules:[l.FreeMode,l.Mousewheel,l.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:x.current},breakpoints:{0:{spaceBetween:12}},children:[B?.map((p,d)=>(0,t.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(p)&&p?.map((C,k)=>(0,t.jsx)(w,{data:C,itemShape:i,index:k},k))},"SwiperSlide"+d)),(0,t.jsx)("div",{ref:x,className:"mt-3 flex justify-center"})]}):(0,t.jsx)("div",{className:(0,a.cn)("laptop:gap-4 tablet:grid-cols-2 laptop:grid-cols-4 grid grid-cols-1 gap-3"),children:e.map((p,d)=>(0,t.jsx)(w,{data:p,itemShape:i,index:d},d))})})}),w=({data:e,itemShape:i,index:r})=>(0,t.jsxs)("div",{className:(0,a.cn)("brand-equity-item","lg-desktop:p-8 desktop:p-6 p-4","box-border flex w-full flex-col justify-between overflow-hidden bg-[#DAE7F2]",i==="round"?"rounded-box":"rounded-none"),children:[(0,t.jsxs)("div",{className:"lg-desktop:h-[50px] flex h-10 items-center justify-between gap-3",children:[(0,t.jsx)("h3",{className:"link-item-title lg-desktop:text-[18px] desktop:text-[16px] line-clamp-2 flex-1 text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]",children:e.title}),(0,t.jsx)("div",{className:"link-item-img lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,t.jsx)(b.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,t.jsxs)("div",{className:"box-border overflow-hidden",children:[(0,t.jsx)("p",{title:e.description||"",className:"link-item-description lg-desktop:text-[24px] line-clamp-4 text-[20px] font-semibold leading-[1.2] tracking-[-0.04em] text-[#767880]",children:e.description||""}),(0,t.jsxs)(M.default,{href:e?.link,asChild:!e?.link,className:"desktop:mt-4 mt-2 flex items-center gap-0.5 no-underline hover:underline",children:[(0,t.jsx)("span",{className:"link-item-text laptop:text-base text-sm",children:e?.linkText}),(0,t.jsx)("div",{className:"size-6",children:(0,t.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,t.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})]});h.displayName="BrandCardLink";var z=(0,y.withLayout)(h);
 //# sourceMappingURL=BrandCardLink.js.map

package/dist/cjs/biz-components/BrandCardLink/BrandCardLink.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BrandCardLink/BrandCardLink.tsx"],
-  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandCardLinkProps, BrandCardLinkItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\nimport Link from '../../components/link.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandCardLinkItemProps[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst BrandCardLink = forwardRef<HTMLDivElement, BrandCardLinkProps>(\n  ({ data: { items = [], itemShape }, className }, ref) => {\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n    const paginationRef = useRef<HTMLDivElement>(null)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n    })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const itemsArray = isMobile ? chunkArray(items, 3) : items\n    return (\n      <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n        {isMobile ? (\n          <Swiper\n            className={cn(className)}\n            modules={[FreeMode, Mousewheel, Pagination]}\n            freeMode={true}\n            mousewheel={{\n              forceToAxis: true,\n            }}\n            pagination={{\n              clickable: true,\n              el: paginationRef.current,\n            }}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n              },\n            }}\n          >\n            {itemsArray?.map((item, jIndex) => (\n              <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n                {Array.isArray(item) &&\n                  item?.map((item, index) => (\n                    <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} />\n                  ))}\n              </SwiperSlide>\n            ))}\n            <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n          </Swiper>\n        ) : (\n          <div className={cn('laptop:gap-4 tablet:grid-cols-2 laptop:grid-cols-4 grid grid-cols-1 gap-3')}>\n            {items.map((item, index) => (\n              <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nconst BrandCardLinkItem = ({\n  data,\n  itemShape,\n  index,\n}: {\n  data: BrandCardLinkItemProps\n  itemShape?: 'round' | 'square'\n  index: number\n}) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'lg-desktop:p-8 desktop:p-6 p-4',\n        'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n        'box-border flex w-full flex-col justify-between overflow-hidden bg-[#DAE7F2]',\n        itemShape === 'round' ? 'rounded-box' : 'rounded-none'\n      )}\n    >\n      <div className=\"lg-desktop:h-[50px] flex h-10 items-center justify-between gap-3\">\n        <h3 className=\"link-item-title lg-desktop:text-[18px] desktop:text-[16px] line-clamp-2 flex-1 text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]\">\n          {data.title}\n        </h3>\n        <div className=\"link-item-img lg-desktop:size-[36px] size-[30px] shrink-0\">\n          <Picture\n            className=\"size-full object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      </div>\n      <div className=\"box-border overflow-hidden\">\n        <p\n          title={data.description || ''}\n          className=\"link-item-description lg-desktop:text-[24px] line-clamp-2 text-[20px] font-semibold leading-[1.2] tracking-[-0.04em] text-[#767880]\"\n        >\n          {data.description || ''}\n        </p>\n        <Link\n          href={data?.link}\n          asChild={!data?.link}\n          className=\"desktop:mt-4 mt-2 flex items-center gap-0.5 no-underline hover:underline\"\n        >\n          <span className=\"link-item-text laptop:text-base text-sm\">{data?.linkText}</span>\n          <div className=\"size-6\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              className=\"mb-[3px]\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                className=\"transition-all duration-[0.4s]\"\n                d=\"M10.5 8L14.5 12L10.5 16\"\n                stroke=\"#777\"\n                strokeWidth=\"1.5\"\n                strokeLinecap=\"round\"\n              ></path>\n            </svg>\n          </div>\n        </Link>\n      </div>\n    </div>\n  )\n}\n\nBrandCardLink.displayName = 'BrandCardLink'\n\nexport default withLayout(BrandCardLink)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandCardLinkProps, BrandCardLinkItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\nimport Link from '../../components/link.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandCardLinkItemProps[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst BrandCardLink = forwardRef<HTMLDivElement, BrandCardLinkProps>(\n  ({ data: { items = [], itemShape }, className }, ref) => {\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n    const paginationRef = useRef<HTMLDivElement>(null)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n    })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const itemsArray = isMobile ? chunkArray(items, 3) : items\n    return (\n      <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n        {isMobile ? (\n          <Swiper\n            className={cn(className)}\n            modules={[FreeMode, Mousewheel, Pagination]}\n            freeMode={true}\n            mousewheel={{\n              forceToAxis: true,\n            }}\n            pagination={{\n              clickable: true,\n              el: paginationRef.current,\n            }}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n              },\n            }}\n          >\n            {itemsArray?.map((item, jIndex) => (\n              <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n                {Array.isArray(item) &&\n                  item?.map((item, index) => (\n                    <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} />\n                  ))}\n              </SwiperSlide>\n            ))}\n            <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n          </Swiper>\n        ) : (\n          <div className={cn('laptop:gap-4 tablet:grid-cols-2 laptop:grid-cols-4 grid grid-cols-1 gap-3')}>\n            {items.map((item, index) => (\n              <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nconst BrandCardLinkItem = ({\n  data,\n  itemShape,\n  index,\n}: {\n  data: BrandCardLinkItemProps\n  itemShape?: 'round' | 'square'\n  index: number\n}) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'lg-desktop:p-8 desktop:p-6 p-4',\n        // 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n        'box-border flex w-full flex-col justify-between overflow-hidden bg-[#DAE7F2]',\n        itemShape === 'round' ? 'rounded-box' : 'rounded-none'\n      )}\n    >\n      <div className=\"lg-desktop:h-[50px] flex h-10 items-center justify-between gap-3\">\n        <h3 className=\"link-item-title lg-desktop:text-[18px] desktop:text-[16px] line-clamp-2 flex-1 text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]\">\n          {data.title}\n        </h3>\n        <div className=\"link-item-img lg-desktop:size-[36px] size-[30px] shrink-0\">\n          <Picture\n            className=\"size-full object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      </div>\n      <div className=\"box-border overflow-hidden\">\n        <p\n          title={data.description || ''}\n          className=\"link-item-description lg-desktop:text-[24px] line-clamp-4 text-[20px] font-semibold leading-[1.2] tracking-[-0.04em] text-[#767880]\"\n        >\n          {data.description || ''}\n        </p>\n        <Link\n          href={data?.link}\n          asChild={!data?.link}\n          className=\"desktop:mt-4 mt-2 flex items-center gap-0.5 no-underline hover:underline\"\n        >\n          <span className=\"link-item-text laptop:text-base text-sm\">{data?.linkText}</span>\n          <div className=\"size-6\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              className=\"mb-[3px]\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                className=\"transition-all duration-[0.4s]\"\n                d=\"M10.5 8L14.5 12L10.5 16\"\n                stroke=\"#777\"\n                strokeWidth=\"1.5\"\n                strokeLinecap=\"round\"\n              ></path>\n            </svg>\n          </div>\n        </Link>\n      </div>\n    </div>\n  )\n}\n\nBrandCardLink.displayName = 'BrandCardLink'\n\nexport default withLayout(BrandCardLink)\n"],
+  "mappings": "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",
   "names": ["BrandCardLink_exports", "__export", "BrandCardLink_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_react_responsive", "import_useExposure", "import_modules", "import_Title", "import_link", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandCardLink", "items", "itemShape", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "item", "jIndex", "index", "BrandCardLinkItem", "data", "Picture", "Link"]
 }

package/dist/cjs/biz-components/Category/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var $=Object.create;var d=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var o in t)d(e,o,{get:t[o],enumerable:!0})},w=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of L(t))!T.call(e,n)&&n!==o&&d(e,n,{get:()=>t[n],enumerable:!(r=E(t,n))||r.enumerable});return e};var u=(e,t,o)=>(o=e!=null?$(S(e)):{},w(t||!e||!e.__esModule?d(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>w(d({},"__esModule",{value:!0}),e);var z={};M(z,{default:()=>R});module.exports=D(z);var a=require("react/jsx-runtime"),l=u(require("react")),s=require("../../helpers/utils.js"),h=u(require("../../components/picture.js")),I=require("../../shared/Styles.js"),N=u(require("../Title/index.js")),f=u(require("./SwiperCategory.js")),x=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js");const c="image",p="category_banner",g=5,j=3,P=(e,t)=>{const o=[];for(let r=0;r<e.length;r+=t)o.push(e.slice(r,r+t));return o},H=({data:e,configuration:t})=>{const o=(0,l.useRef)(null);return(0,x.useExposure)(o,{componentType:c,componentName:p,componentTitle:e?.name,position:t?.index+1}),(0,a.jsx)("div",{className:(0,s.cn)("relative","aspect-w-[167] aspect-h-[120]","tablet:aspect-w-[167] tablet:aspect-h-[120]","laptop:aspect-w-[212] laptop:aspect-h-[144]","desktop:aspect-w-[205] desktop:aspect-h-[192]","lg-desktop:aspect-w-[264] lg-desktop:aspect-h-[240]"),children:(0,a.jsxs)("div",{ref:o,className:(0,s.cn)("tablet:p-3 laptop:p-4 desktop:p-6 absolute inset-0 justify-between","bg-container-secondary-1 hover:bg-info-white group box-border flex cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,a.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,a.jsx)("a",{"aria-label":e?.name,href:(0,y.trackUrlRef)(e?.link,`${c}_${p}`),"data-headless-type-name":`${c}#${p}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,a.jsx)(h.default,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),(0,a.jsx)("p",{className:"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4",children:e?.name})]})})},A=({data:e,configuration:t,index:o,isFirstItemLarger:r})=>{const n=(0,l.useRef)(null);(0,x.useExposure)(n,{componentType:c,componentName:p,componentTitle:e?.name,position:t?.index+1});const i=o===0;return(0,a.jsxs)("div",{ref:n,className:(0,s.cn)("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer duration-300",r?(0,s.cn)("p-4",i?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,a.jsx)("a",{href:(0,y.trackUrlRef)(e?.link,`${c}_${p}`),"data-headless-type-name":`${c}#${p}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${t?.index+1}`,onClick:()=>t?.event?.primaryButton(e,t?.index+1),children:(0,a.jsx)(h.default,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:(0,s.cn)("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r?(0,s.cn)(i?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),(0,a.jsx)("p",{className:(0,s.cn)("text-info-primary w-full text-center text-sm font-bold",r?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},B=({data:e,configuration:t})=>{const r=(t?.totalCategories??0)<=g;return(0,a.jsx)("div",{className:`gap-3 ${r?"grid grid-cols-2":"flex h-full flex-col"}`,children:e?.map((n,i)=>(0,a.jsx)(A,{index:i,data:n,configuration:t,isFirstItemLarger:r},i))})},C=l.default.forwardRef((e,t)=>{const{data:o,className:r="",key:n,event:i}=e,m=(o?.isShowSelect?o?.products:o?.productData)||[],v=m.length>g,b=m.length,_=P(m,v?j:g),k=(0,l.useRef)(null);return(0,l.useImperativeHandle)(t,()=>k.current),(0,a.jsxs)("div",{ref:k,className:(0,s.cn)("w-full overflow-hidden",r,{"aiui-dark":o?.theme==="dark"}),children:[o?.title&&(0,a.jsx)(N.default,{data:{title:o?.title},className:"text-4xl"}),(0,a.jsx)("div",{className:"tablet:block hidden",children:(0,a.jsx)(f.default,{id:`Category${n}`,Slide:H,data:{list:m,configuration:{shape:o?.shape,event:i,title:o?.title,totalCategories:b}}})}),(0,a.jsx)("div",{className:"tablet:hidden block",children:(0,a.jsx)(f.default,{id:`Category1${n}`,Slide:B,data:{list:_,configuration:{shape:o?.shape,event:i,title:o?.title,totalCategories:b}},isHalf:v})}),(0,a.jsx)("div",{className:"h-7"})]})});C.displayName="Category";var R=(0,I.withLayout)(C);
+"use strict";"use client";var $=Object.create;var d=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},w=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of L(t))!T.call(e,i)&&i!==a&&d(e,i,{get:()=>t[i],enumerable:!(r=E(t,i))||r.enumerable});return e};var u=(e,t,a)=>(a=e!=null?$(S(e)):{},w(t||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),D=e=>w(d({},"__esModule",{value:!0}),e);var z={};M(z,{default:()=>R});module.exports=D(z);var o=require("react/jsx-runtime"),l=u(require("react")),n=require("../../helpers/utils.js"),h=u(require("../../components/picture.js")),I=require("../../shared/Styles.js"),N=u(require("../Title/index.js")),f=u(require("./SwiperCategory.js")),x=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js");const p="image",c="category_banner",g=5,j=3,P=(e,t)=>{const a=[];for(let r=0;r<e.length;r+=t)a.push(e.slice(r,r+t));return a},H=({data:e,configuration:t})=>{const a=(0,l.useRef)(null);return(0,x.useExposure)(a,{componentType:p,componentName:c,componentTitle:e?.name,position:t?.index+1}),(0,o.jsx)("div",{className:(0,n.cn)("relative","aspect-w-[167] aspect-h-[120]","tablet:aspect-w-[167] tablet:aspect-h-[120]","laptop:aspect-w-[212] laptop:aspect-h-[144]","desktop:aspect-w-[205] desktop:aspect-h-[192]","lg-desktop:aspect-w-[264] lg-desktop:aspect-h-[240]"),children:(0,o.jsxs)("div",{ref:a,className:(0,n.cn)("tablet:p-3 laptop:p-4 desktop:p-6 absolute inset-0 justify-between","bg-container-secondary-1 hover:bg-info-white group box-border flex cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,o.jsx)("a",{"aria-label":e?.name,href:(0,y.trackUrlRef)(e?.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(h.default,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),(0,o.jsx)("p",{className:"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4",children:e?.name})]})})},A=({data:e,configuration:t,index:a,isFirstItemLarger:r})=>{const i=(0,l.useRef)(null);(0,x.useExposure)(i,{componentType:p,componentName:c,componentTitle:e?.name,position:t?.index+1});const s=a===0;return(0,o.jsxs)("div",{ref:i,className:(0,n.cn)("bg-container-primary box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer duration-300",r?(0,n.cn)("p-4",s?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("a",{href:(0,y.trackUrlRef)(e?.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${t?.index+1}`,onClick:()=>t?.event?.primaryButton(e,t?.index+1),children:(0,o.jsx)(h.default,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:(0,n.cn)("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r?(0,n.cn)(s?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),(0,o.jsx)("p",{className:(0,n.cn)("text-info-primary w-full text-center text-sm font-bold",r?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},B=({data:e,configuration:t})=>{const r=(t?.totalCategories??0)<=g;return(0,o.jsx)("div",{className:`gap-3 ${r?"grid grid-cols-2":"flex h-full flex-col"}`,children:e?.map((i,s)=>(0,o.jsx)(A,{index:s,data:i,configuration:t,isFirstItemLarger:r},s))})},C=l.default.forwardRef((e,t)=>{const{data:a,className:r="",key:i,event:s}=e,m=(a?.isShowSelect?a?.products:a?.productData)||[],v=m.length>g,b=m.length,_=P(m,v?j:g),k=(0,l.useRef)(null);return(0,l.useImperativeHandle)(t,()=>k.current),(0,o.jsxs)("div",{ref:k,className:(0,n.cn)("w-full overflow-hidden",r,{"aiui-dark":a?.theme==="dark"}),children:[a?.title&&(0,o.jsx)(N.default,{data:{title:a?.title},className:"text-4xl"}),(0,o.jsx)("div",{className:"tablet:block hidden",children:(0,o.jsx)(f.default,{id:`Category${i}`,Slide:H,data:{list:m,configuration:{shape:a?.shape,event:s,title:a?.title,totalCategories:b}}})}),(0,o.jsx)("div",{className:"tablet:hidden block",children:(0,o.jsx)(f.default,{id:`Category1${i}`,Slide:B,data:{list:_,configuration:{shape:a?.shape,event:s,title:a?.title,totalCategories:b}},isHalf:v})}),(0,o.jsx)("div",{className:"h-7"})]})});C.displayName="Category";var R=(0,I.withLayout)(C);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Category/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Category/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\nconst MOBILE_FULL_PAGE_CAPACITY = 5\nconst MOBILE_COMPACT_PAGE_SIZE = 3\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  image: Img\n  name: string\n  link?: string\n}\n\nexport interface CategoryProps {\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  data: {\n    isShowSelect: boolean\n    products: CategoryItem[]\n    productData: CategoryItem[]\n    /** \u5361\u7247\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    title?: string\n    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (_v: any, _index: number) => void\n  }\n  key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.name,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      className={cn(\n        'relative',\n        'aspect-w-[167] aspect-h-[120]',\n        'tablet:aspect-w-[167] tablet:aspect-h-[120]',\n        'laptop:aspect-w-[212] laptop:aspect-h-[144]',\n        'desktop:aspect-w-[205] desktop:aspect-h-[192]',\n        'lg-desktop:aspect-w-[264] lg-desktop:aspect-h-[240]'\n      )}\n    >\n      <div\n        ref={ref}\n        className={cn(\n          'tablet:p-3 laptop:p-4 desktop:p-6 absolute inset-0 justify-between',\n          'bg-container-secondary-1 hover:bg-info-white group box-border flex cursor-pointer flex-col overflow-hidden duration-300',\n          configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n        )}\n      >\n        <div className=\"transition-all duration-300 group-hover:scale-110\">\n          <a\n            aria-label={data?.name}\n            href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${data?.name}`}\n            onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n          >\n            <Picture\n              alt={data?.image?.alt || ''}\n              source={data?.image?.url || ''}\n              className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n            />\n          </a>\n        </div>\n        <p className=\"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4\">\n          {data?.name}\n        </p>\n      </div>\n    </div>\n  )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\nconst SingleMobileItem = ({\n  data,\n  configuration,\n  index,\n  isFirstItemLarger,\n}: {\n  data: CategoryItem\n  configuration?: any\n  index: number\n  isFirstItemLarger: boolean\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.name,\n    position: configuration?.index + 1,\n  })\n\n  const isFirstItem = index === 0\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n        'hover:bg-info-white cursor-pointer duration-300',\n        // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n        isFirstItemLarger\n          ? cn('p-4', isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]')\n          : 'max-h-[126px] px-3 py-4',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <a\n        href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-title-desc-button={`${data?.name}`}\n        data-headless-nav-postion={`''#${configuration?.index + 1}`}\n        onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n      >\n        <Picture\n          source={data?.image?.url || ''}\n          alt={data?.image?.alt || ''}\n          className={cn(\n            'm-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n            // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n            isFirstItemLarger\n              ? cn(isFirstItem ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]')\n              : 'size-[72px]'\n          )}\n        />\n      </a>\n      <p\n        className={cn(\n          'text-info-primary w-full text-center text-sm font-bold',\n          // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n          isFirstItemLarger ? 'line-clamp-2' : 'shrink-0 truncate'\n        )}\n      >\n        {data?.name}\n      </p>\n    </div>\n  )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n  const totalCategories = configuration?.totalCategories ?? 0\n  // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n  const isFirstItemLarger = totalCategories <= MOBILE_FULL_PAGE_CAPACITY\n  return (\n    <div className={`gap-3 ${isFirstItemLarger ? 'grid grid-cols-2' : 'flex h-full flex-col'}`}>\n      {data?.map((item, index) => (\n        <SingleMobileItem\n          key={index}\n          index={index}\n          data={item}\n          configuration={configuration}\n          isFirstItemLarger={isFirstItemLarger}\n        />\n      ))}\n    </div>\n  )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n  const { data, className = '', key, event } = props\n  // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n  const currentData = (data?.isShowSelect ? data?.products : data?.productData) || []\n  const isCardShow = currentData.length > MOBILE_FULL_PAGE_CAPACITY\n  const totalCategories = currentData.length\n  const mobileSlides = chunkArray(currentData, isCardShow ? MOBILE_COMPACT_PAGE_SIZE : MOBILE_FULL_PAGE_CAPACITY)\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  return (\n    <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n      {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n      <div className=\"tablet:block hidden\">\n        <SwiperBox\n          id={`Category${key}`}\n          Slide={CategoryPcItem}\n          data={{\n            list: currentData,\n            configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n          }}\n        />\n      </div>\n      <div className=\"tablet:hidden block\">\n        <SwiperBox\n          id={`Category1${key}`}\n          Slide={CategoryMobileItem}\n          data={{\n            list: mobileSlides,\n            configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n          }}\n          isHalf={isCardShow}\n        />\n      </div>\n      <div className=\"h-7\" />\n    </div>\n  )\n})\n\nCategory.displayName = 'Category'\n\nexport default withLayout(Category)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\nconst MOBILE_FULL_PAGE_CAPACITY = 5\nconst MOBILE_COMPACT_PAGE_SIZE = 3\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  image: Img\n  name: string\n  link?: string\n}\n\nexport interface CategoryProps {\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  data: {\n    isShowSelect: boolean\n    products: CategoryItem[]\n    productData: CategoryItem[]\n    /** \u5361\u7247\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    title?: string\n    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (_v: any, _index: number) => void\n  }\n  key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.name,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      className={cn(\n        'relative',\n        'aspect-w-[167] aspect-h-[120]',\n        'tablet:aspect-w-[167] tablet:aspect-h-[120]',\n        'laptop:aspect-w-[212] laptop:aspect-h-[144]',\n        'desktop:aspect-w-[205] desktop:aspect-h-[192]',\n        'lg-desktop:aspect-w-[264] lg-desktop:aspect-h-[240]'\n      )}\n    >\n      <div\n        ref={ref}\n        className={cn(\n          'tablet:p-3 laptop:p-4 desktop:p-6 absolute inset-0 justify-between',\n          'bg-container-secondary-1 hover:bg-info-white group box-border flex cursor-pointer flex-col overflow-hidden duration-300',\n          configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n        )}\n      >\n        <div className=\"transition-all duration-300 group-hover:scale-110\">\n          <a\n            aria-label={data?.name}\n            href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${data?.name}`}\n            onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n          >\n            <Picture\n              alt={data?.image?.alt || ''}\n              source={data?.image?.url || ''}\n              className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n            />\n          </a>\n        </div>\n        <p className=\"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4\">\n          {data?.name}\n        </p>\n      </div>\n    </div>\n  )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\nconst SingleMobileItem = ({\n  data,\n  configuration,\n  index,\n  isFirstItemLarger,\n}: {\n  data: CategoryItem\n  configuration?: any\n  index: number\n  isFirstItemLarger: boolean\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.name,\n    position: configuration?.index + 1,\n  })\n\n  const isFirstItem = index === 0\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-primary box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n        'hover:bg-info-white cursor-pointer duration-300',\n        // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n        isFirstItemLarger\n          ? cn('p-4', isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]')\n          : 'max-h-[126px] px-3 py-4',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <a\n        href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-title-desc-button={`${data?.name}`}\n        data-headless-nav-postion={`''#${configuration?.index + 1}`}\n        onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n      >\n        <Picture\n          source={data?.image?.url || ''}\n          alt={data?.image?.alt || ''}\n          className={cn(\n            'm-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n            // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n            isFirstItemLarger\n              ? cn(isFirstItem ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]')\n              : 'size-[72px]'\n          )}\n        />\n      </a>\n      <p\n        className={cn(\n          'text-info-primary w-full text-center text-sm font-bold',\n          // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n          isFirstItemLarger ? 'line-clamp-2' : 'shrink-0 truncate'\n        )}\n      >\n        {data?.name}\n      </p>\n    </div>\n  )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n  const totalCategories = configuration?.totalCategories ?? 0\n  // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n  const isFirstItemLarger = totalCategories <= MOBILE_FULL_PAGE_CAPACITY\n  return (\n    <div className={`gap-3 ${isFirstItemLarger ? 'grid grid-cols-2' : 'flex h-full flex-col'}`}>\n      {data?.map((item, index) => (\n        <SingleMobileItem\n          key={index}\n          index={index}\n          data={item}\n          configuration={configuration}\n          isFirstItemLarger={isFirstItemLarger}\n        />\n      ))}\n    </div>\n  )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n  const { data, className = '', key, event } = props\n  // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n  const currentData = (data?.isShowSelect ? data?.products : data?.productData) || []\n  const isCardShow = currentData.length > MOBILE_FULL_PAGE_CAPACITY\n  const totalCategories = currentData.length\n  const mobileSlides = chunkArray(currentData, isCardShow ? MOBILE_COMPACT_PAGE_SIZE : MOBILE_FULL_PAGE_CAPACITY)\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  return (\n    <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n      {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n      <div className=\"tablet:block hidden\">\n        <SwiperBox\n          id={`Category${key}`}\n          Slide={CategoryPcItem}\n          data={{\n            list: currentData,\n            configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n          }}\n        />\n      </div>\n      <div className=\"tablet:hidden block\">\n        <SwiperBox\n          id={`Category1${key}`}\n          Slide={CategoryMobileItem}\n          data={{\n            list: mobileSlides,\n            configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n          }}\n          isHalf={isCardShow}\n        />\n      </div>\n      <div className=\"h-7\" />\n    </div>\n  )\n})\n\nCategory.displayName = 'Category'\n\nexport default withLayout(Category)\n"],
+  "mappings": "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",
   "names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MOBILE_FULL_PAGE_CAPACITY", "MOBILE_COMPACT_PAGE_SIZE", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "ref", "Picture", "SingleMobileItem", "index", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "React", "props", "className", "key", "event", "currentData", "isCardShow", "totalCategories", "mobileSlides", "innerRef", "Title", "SwiperBox"]
 }

package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var L=Object.create;var N=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var j=(t,i)=>{for(var d in i)N(t,d,{get:i[d],enumerable:!0})},w=(t,i,d,x)=>{if(i&&typeof i=="object"||typeof i=="function")for(let u of A(i))!_.call(t,u)&&u!==d&&N(t,u,{get:()=>i[u],enumerable:!(x=P(i,u))||x.enumerable});return t};var B=(t,i,d)=>(d=t!=null?L(z(t)):{},w(i||!t||!t.__esModule?N(d,"default",{value:t,enumerable:!0}):d,t)),E=t=>w(N({},"__esModule",{value:!0}),t);var O={};j(O,{SeriesProductItem:()=>$,SidebarDropdown:()=>F});module.exports=E(O);var e=require("react/jsx-runtime"),m=B(require("react")),n=require("../../components/index.js"),g=require("../../helpers/utils.js"),C=require("./icons/index.js"),S=require("./NavProvider.js");const F=m.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:i})=>{const{buildProps:d,onSidebarNavClick:x}=(0,S.useNavContext)(),[u,y]=(0,m.useState)([]),[p,b]=(0,m.useState)(-1),v=(0,m.useRef)(null),h=(0,m.useCallback)(()=>{const l=t?.subcategories;if(!l?.length)return;const r=l.findIndex(c=>!!c?.subSubCategories),s=l.findIndex(c=>!c?.subSubCategories),o=l.map((c,f)=>({index:f,open:r===f||s===f}));y(o)},[t]);(0,m.useEffect)(()=>{h()},[h]);const a=(0,m.useMemo)(()=>{const l=t?.subcategories?.[u?.find(s=>s.open)?.index||0],r=i?.find(s=>s?.label?.toLowerCase()===l?.label?.toLowerCase())||{};if(l?.collections){const s=d?.categories?.[l?.collections]||{};return{label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,series:[{products:s?.products}]}}else if(l?.subSubCategories){const s=l?.subSubCategories?.[p],o=i?.find(c=>c?.label?.toLowerCase()===s?.label?.toLowerCase())||{};if(s?.collections){const c=d?.categories?.[s?.collections]||{};return{label:o?.label,isCollection:!0,banner:o?.banner,primary:o?.primary,series:[{products:c?.products}]}}else return o}else return r},[t,u,p,i,d]),k=(0,m.useCallback)((l,r)=>{r?.subSubCategories?.length>0?b(0):b(-1),y(s=>s.map((o,c)=>({...o,open:c===l?!o.open:!1})))},[]),D=(l,r)=>{y(s=>s.map(o=>o.index===l?{...o,open:!0}:{...o,open:!1})),b(r)};return(0,e.jsxs)(n.Container,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[(0,e.jsxs)("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:v,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((l,r)=>{const s=Array.isArray(l?.subSubCategories)&&l?.subSubCategories?.length>0,o=u?.find(c=>c.index===r)?.open;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("button",{className:(0,g.cn)("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!s&&o}),onClick:()=>{k(r,l),x?.(l,r)},"aria-expanded":s?o:void 0,"aria-haspopup":s?"true":void 0,children:[(0,e.jsx)(n.Text,{html:l.label,className:"p-4 text-sm font-bold leading-[1.4]"}),s&&(0,e.jsx)(C.DownArrow,{"aria-hidden":"true",className:(0,g.cn)("size-4",{"rotate-180":o})})]}),o&&(0,e.jsx)("div",{className:"flex flex-col",role:"menu",children:l.subSubCategories?.map((c,f)=>(0,e.jsx)("button",{onClick:()=>{D(r,f),x?.(c,f)},className:(0,g.cn)("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":p===f}),role:"menuitem","aria-label":c.label,children:(0,e.jsx)(n.Text,{html:c.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${r}-${f}`))})]},`${l?.label||""}subcategoryItem-${r}`)})}),t&&(0,e.jsx)("div",{className:"flex",children:(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[t?.primary&&(0,e.jsx)(n.Button,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(n.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:t?.secondary?.label})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(a).length>0&&(0,e.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(n.Text,{html:a?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),a?.primary&&!a?.primary?.hide&&(0,e.jsx)(n.Button,{as:"a",href:`${a?.primary?.url}?ref=${a?.label}_viewmore`,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:a?.primary?.label})]}),t?.guide?.label&&(0,e.jsx)(n.Link,{href:t?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:t?.guide?.label})]}),(0,e.jsx)("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:a?.series?.map((l,r)=>(0,e.jsxs)("div",{children:[l.label&&(0,e.jsx)(n.Text,{html:l.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!a?.banner&&(0,e.jsx)(n.Link,{asChild:!a?.banner?.href,href:a?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(n.Picture,{source:a?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(n.Heading,{size:2,html:a?.banner?.title||"Buy in Guide",className:(0,g.cn)("font-bold text-white",{"text-black":a?.banner?.theme==="dark"})}),(0,e.jsx)(n.Text,{html:a?.banner?.desc||"20.000mAh",className:(0,g.cn)("text-sm font-bold text-white",{"text-black":a?.banner?.theme==="dark"})})]})]})}),l.products?.map((s,o)=>(0,e.jsx)($,{seriesLabel:a?.label,product:s,isCollection:a?.isCollection},`seriesProductItem-${l?.label||""}-${r}-${o}`))]})]},`seriesItem-${l?.label||""}-${r}`))})]})]})});F.displayName="SidebarDropdown";const $=({product:t,isCollection:i,position:d,seriesLabel:x})=>{const{buildProps:u,onSeriesProductClick:y}=(0,S.useNavContext)();let p=i?t:u?.products?.find(a=>a.handle===t.handle);const b=p?.variants?.find(a=>a.sku===t.sku)||p?.variants?.[0],v=(0,m.useMemo)(()=>`/products/${p?.handle}?variant=${(0,g.atobID)(b?.id)}`,[p?.handle,b?.id]),h=(0,m.useMemo)(()=>p?.tags?.filter?.(a=>a?.startsWith?.("CLtag"))?.map?.(a=>a?.replace?.("CLtag:",""))?.slice?.(0,2),[p?.tags]);return b?.availableForSale?(0,e.jsx)(n.Link,{href:v,onClick:a=>{a.preventDefault(),window.open(v,"_self"),y?.(p,d||0,x)},className:"no-underline hover:text-current",children:(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)("img",{src:`${b?.image?.url||t?.images?.[0]?.url}&width=200`,loading:"lazy",alt:p?.title||t?.name,width:90,height:90,className:"size-[96px] object-contain"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:"flex gap-1",children:Array.isArray(h)&&h?.map((a,k)=>(0,e.jsx)(n.Text,{as:"p",html:a,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]"},k))}),(0,e.jsx)(n.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:p?.title||t?.name}),t?.desc&&(0,e.jsx)(n.Text,{as:"p",html:t?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null};
+"use strict";var L=Object.create;var N=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var j=(t,i)=>{for(var d in i)N(t,d,{get:i[d],enumerable:!0})},w=(t,i,d,x)=>{if(i&&typeof i=="object"||typeof i=="function")for(let u of P(i))!z.call(t,u)&&u!==d&&N(t,u,{get:()=>i[u],enumerable:!(x=_(i,u))||x.enumerable});return t};var B=(t,i,d)=>(d=t!=null?L(A(t)):{},w(i||!t||!t.__esModule?N(d,"default",{value:t,enumerable:!0}):d,t)),E=t=>w(N({},"__esModule",{value:!0}),t);var O={};j(O,{SeriesProductItem:()=>$,SidebarDropdown:()=>F});module.exports=E(O);var e=require("react/jsx-runtime"),m=B(require("react")),n=require("../../components/index.js"),g=require("../../helpers/utils.js"),C=require("./icons/index.js"),S=require("./NavProvider.js");const F=m.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:i})=>{const{buildProps:d,onSidebarNavClick:x}=(0,S.useNavContext)(),[u,y]=(0,m.useState)([]),[p,b]=(0,m.useState)(-1),v=(0,m.useRef)(null),h=(0,m.useCallback)(()=>{const l=t?.subcategories;if(!l?.length)return;const r=l.findIndex(c=>!!c?.subSubCategories),s=l.findIndex(c=>!c?.subSubCategories),o=l.map((c,f)=>({index:f,open:r===f||s===f}));y(o)},[t]);(0,m.useEffect)(()=>{h()},[h]);const a=(0,m.useMemo)(()=>{const l=t?.subcategories?.[u?.find(s=>s.open)?.index||0],r=i?.find(s=>s?.label?.toLowerCase()===l?.label?.toLowerCase())||{};if(l?.collections){const s=d?.categories?.[l?.collections]||{};return{label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,series:[{products:s?.products}]}}else if(l?.subSubCategories){const s=l?.subSubCategories?.[p],o=i?.find(c=>c?.label?.toLowerCase()===s?.label?.toLowerCase())||{};if(s?.collections){const c=d?.categories?.[s?.collections]||{};return{label:o?.label,isCollection:!0,banner:o?.banner,primary:o?.primary,series:[{products:c?.products}]}}else return o}else return r},[t,u,p,i,d]),k=(0,m.useCallback)((l,r)=>{r?.subSubCategories?.length>0?b(0):b(-1),y(s=>s.map((o,c)=>({...o,open:c===l?!o.open:!1})))},[]),D=(l,r)=>{y(s=>s.map(o=>o.index===l?{...o,open:!0}:{...o,open:!1})),b(r)};return(0,e.jsxs)(n.Container,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[(0,e.jsxs)("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:v,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((l,r)=>{const s=Array.isArray(l?.subSubCategories)&&l?.subSubCategories?.length>0,o=u?.find(c=>c.index===r)?.open;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("button",{className:(0,g.cn)("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!s&&o}),onClick:()=>{k(r,l),x?.(l,r)},"aria-expanded":s?o:void 0,"aria-haspopup":s?"true":void 0,children:[(0,e.jsx)(n.Text,{html:l.label,className:"p-4 text-sm font-bold leading-[1.4]"}),s&&(0,e.jsx)(C.DownArrow,{"aria-hidden":"true",className:(0,g.cn)("size-4",{"rotate-180":o})})]}),o&&(0,e.jsx)("div",{className:"flex flex-col",role:"menu",children:l.subSubCategories?.map((c,f)=>(0,e.jsx)("button",{onClick:()=>{D(r,f),x?.(c,f)},className:(0,g.cn)("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":p===f}),role:"menuitem","aria-label":c.label,children:(0,e.jsx)(n.Text,{html:c.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${r}-${f}`))})]},`${l?.label||""}subcategoryItem-${r}`)})}),t&&(0,e.jsx)("div",{className:"flex",children:(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[t?.primary&&(0,e.jsx)(n.Button,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(n.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:t?.secondary?.label})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(a).length>0&&(0,e.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(n.Text,{html:a?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),a?.primary&&!a?.primary?.hide&&(0,e.jsx)(n.Button,{as:"a",href:`${a?.primary?.url}?ref=${a?.label}_viewmore`,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:a?.primary?.label})]}),t?.guide?.label&&(0,e.jsx)(n.Link,{href:t?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:t?.guide?.label})]}),(0,e.jsx)("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:a?.series?.map((l,r)=>(0,e.jsxs)("div",{children:[l.label&&(0,e.jsx)(n.Text,{html:l.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!a?.banner&&(0,e.jsx)(n.Link,{asChild:!a?.banner?.href,href:a?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(n.Picture,{source:a?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(n.Heading,{size:2,html:a?.banner?.title||"Buy in Guide",className:(0,g.cn)("font-bold text-white",{"text-black":a?.banner?.theme==="dark"})}),(0,e.jsx)(n.Text,{html:a?.banner?.desc||"20.000mAh",className:(0,g.cn)("text-sm font-bold text-white",{"text-black":a?.banner?.theme==="dark"})})]})]})}),l.products?.map((s,o)=>(0,e.jsx)($,{seriesLabel:a?.label,product:s,isCollection:a?.isCollection},`seriesProductItem-${l?.label||""}-${r}-${o}`))]})]},`seriesItem-${l?.label||""}-${r}`))})]})]})});F.displayName="SidebarDropdown";const $=({product:t,isCollection:i,position:d,seriesLabel:x})=>{const{buildProps:u,onSeriesProductClick:y}=(0,S.useNavContext)();let p=i?t:u?.products?.find(a=>a.handle===t.handle);const b=p?.variants?.find(a=>a.sku===t.sku)||p?.variants?.[0],v=(0,m.useMemo)(()=>`/products/${p?.handle}?variant=${(0,g.atobID)(b?.id)}`,[p?.handle,b?.id]),h=(0,m.useMemo)(()=>p?.tags?.filter?.(a=>a?.startsWith?.("CLtag"))?.map?.(a=>a?.replace?.("CLtag:",""))?.slice?.(0,2),[p?.tags]);return b?.availableForSale?(0,e.jsx)(n.Link,{href:v,onClick:a=>{a.preventDefault(),window.open(v,"_self"),y?.(p,d||0,x)},className:"no-underline hover:text-current",children:(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)("img",{src:`${b?.image?.url||t?.images?.[0]?.url}&width=200`,loading:"lazy",alt:p?.title||t?.name,width:90,height:90,className:"size-[96px] object-contain"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:"flex gap-1",children:Array.isArray(h)&&h?.map((a,k)=>(0,e.jsx)(n.Text,{as:"p",html:a,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]"},k))}),(0,e.jsx)(n.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:t?.custom_name||b?.metafields?.infos?.page_short_title||p?.title}),t?.desc&&(0,e.jsx)(n.Text,{as:"p",html:t?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null};
 //# sourceMappingURL=SidebarDropdown.js.map

package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/SidebarDropdown.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n  ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n    const { buildProps, onSidebarNavClick } = useNavContext()\n    const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n    const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n    const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n    const initExpandedSubcategory = useCallback(() => {\n      const subcategories = sidebarCategoriesMetadata?.subcategories\n      if (!subcategories?.length) return\n\n      const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n      const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n      // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n      const expandedStates = subcategories.map((_: any, index: number) => ({\n        index,\n        open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n      }))\n\n      setExpandedSubcategory(expandedStates)\n    }, [sidebarCategoriesMetadata])\n\n    useEffect(() => {\n      initExpandedSubcategory()\n    }, [initExpandedSubcategory])\n\n    // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n    const matchSeriesMetadata = useMemo(() => {\n      const subCategory =\n        sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n      const currentSeriesMetadata =\n        seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n      if (subCategory?.collections) {\n        const category = buildProps?.categories?.[subCategory?.collections] || {}\n        return {\n          label: currentSeriesMetadata?.label,\n          isCollection: true,\n          banner: currentSeriesMetadata?.banner,\n          primary: currentSeriesMetadata?.primary,\n          series: [\n            {\n              products: category?.products,\n            },\n          ],\n        }\n      } else {\n        if (subCategory?.subSubCategories) {\n          const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n          const currentActiveSeriesMetadata =\n            seriesMetadata?.find(\n              (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n            ) || {}\n          if (activeSubSubcategory?.collections) {\n            const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n            return {\n              label: currentActiveSeriesMetadata?.label,\n              isCollection: true,\n              banner: currentActiveSeriesMetadata?.banner,\n              primary: currentActiveSeriesMetadata?.primary,\n              series: [\n                {\n                  products: category?.products,\n                },\n              ],\n            }\n          } else {\n            return currentActiveSeriesMetadata\n          }\n        } else {\n          return currentSeriesMetadata\n        }\n      }\n    }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n    const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n      subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n      setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n    }, [])\n\n    const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n      setExpandedSubcategory(prev =>\n        prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n      )\n      setActiveSubSubcategoryIndex(subSubindex)\n    }\n\n    return (\n      <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n        <div\n          className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n          style={{\n            userSelect: 'none',\n          }}\n          ref={sidebarDropdownRef}\n        >\n          <div\n            className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n              const hasSubSubCategory =\n                Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n              const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n              return (\n                <div key={`${subItem?.label || ''}subcategoryItem-${index}`}>\n                  <button\n                    className={cn(\n                      'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n                      {\n                        'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n                      }\n                    )}\n                    onClick={() => {\n                      handleSubcategoryOpen(index, subItem)\n                      onSidebarNavClick?.(subItem, index)\n                    }}\n                    aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n                    aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n                  >\n                    <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n                    {hasSubSubCategory && (\n                      <DownArrow\n                        aria-hidden=\"true\"\n                        className={cn('size-4', {\n                          ['rotate-180']: isExpanded,\n                        })}\n                      />\n                    )}\n                  </button>\n                  {isExpanded && (\n                    <div className=\"flex flex-col\" role=\"menu\">\n                      {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n                        <button\n                          onClick={() => {\n                            handleSubSubcategoryOpen(index, subSubindex)\n                            onSidebarNavClick?.(subSubItem, subSubindex)\n                          }}\n                          key={`subSubItem-${index}-${subSubindex}`}\n                          className={cn(\n                            'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n                            {\n                              'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n                            }\n                          )}\n                          role=\"menuitem\"\n                          aria-label={subSubItem.label}\n                        >\n                          <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n                        </button>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {sidebarCategoriesMetadata && (\n            <div className=\"flex\">\n              <div className=\"flex flex-col gap-4\">\n                {sidebarCategoriesMetadata?.primary && (\n                  <Button\n                    as=\"a\"\n                    href={`${sidebarCategoriesMetadata?.primary?.url}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n                    variant=\"primary\"\n                    size=\"lg\"\n                    className=\"lg-desktop:text-base text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.primary?.label}\n                  </Button>\n                )}\n                {sidebarCategoriesMetadata?.secondary && (\n                  <Button\n                    as=\"a\"\n                    href={sidebarCategoriesMetadata?.secondary?.url}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.secondary?.label}\n                  </Button>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n        <div className=\"flex-1 py-4\">\n          {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n            <div className=\"mb-4 flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <Text\n                  html={matchSeriesMetadata?.label}\n                  className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n                />\n                {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n                  <Button\n                    as=\"a\"\n                    href={`${matchSeriesMetadata?.primary?.url}?ref=${matchSeriesMetadata?.label}_viewmore`}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n                  >\n                    {matchSeriesMetadata?.primary?.label}\n                  </Button>\n                )}\n              </div>\n              {sidebarCategoriesMetadata?.guide?.label && (\n                <Link\n                  href={sidebarCategoriesMetadata?.guide?.url}\n                  className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n                >\n                  {sidebarCategoriesMetadata?.guide?.label}\n                </Link>\n              )}\n            </div>\n          )}\n          <div\n            className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n              <div key={`seriesItem-${seriesItem?.label || ''}-${seriesIndex}`}>\n                {seriesItem.label && (\n                  <Text\n                    html={seriesItem.label}\n                    as=\"p\"\n                    className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                  />\n                )}\n                <div className=\"grid grid-cols-3 gap-4\">\n                  {!!matchSeriesMetadata?.banner && (\n                    <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n                      <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n                        <Picture\n                          source={matchSeriesMetadata?.banner?.imageUrl}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {seriesItem.products?.map((product: any, index: number) => (\n                    <SeriesProductItem\n                      seriesLabel={matchSeriesMetadata?.label}\n                      key={`seriesProductItem-${seriesItem?.label || ''}-${seriesIndex}-${index}`}\n                      product={product}\n                      isCollection={matchSeriesMetadata?.isCollection}\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </Container>\n    )\n  }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n  product,\n  isCollection,\n  position,\n  seriesLabel,\n}: {\n  product: any\n  isCollection?: boolean\n  position?: number\n  seriesLabel?: string\n}) => {\n  const { buildProps, onSeriesProductClick } = useNavContext()\n  let productData = isCollection\n    ? product\n    : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n  const variant =\n    productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n  const listingLink = useMemo(() => {\n    return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n  }, [productData?.handle, variant?.id])\n\n  const tags = useMemo(() => {\n    return productData?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [productData?.tags])\n\n  if (!variant?.availableForSale) return null\n\n  return (\n    <Link\n      href={listingLink}\n      onClick={e => {\n        e.preventDefault()\n        window.open(listingLink, '_self')\n        onSeriesProductClick?.(productData, position || 0, seriesLabel)\n      }}\n      className=\"no-underline hover:text-current\"\n    >\n      <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n        <div className=\"shrink-0\">\n          <img\n            src={`${variant?.image?.url || product?.images?.[0]?.url}&width=200`}\n            loading=\"lazy\"\n            alt={productData?.title || product?.name}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\n          />\n        </div>\n        <div className=\"relative\">\n          <div className=\"flex gap-1\">\n            {Array.isArray(tags) &&\n              tags?.map((tag: string, index: number) => (\n                <Text\n                  key={index}\n                  as=\"p\"\n                  html={tag}\n                  className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n                />\n              ))}\n          </div>\n          <Text\n            className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n            html={productData?.title || product?.name}\n          />\n          {product?.desc && (\n            <Text\n              as=\"p\"\n              html={product?.desc}\n              className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n            />\n          )}\n        </div>\n      </div>\n    </Link>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n  ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n    const { buildProps, onSidebarNavClick } = useNavContext()\n    const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n    const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n    const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n    const initExpandedSubcategory = useCallback(() => {\n      const subcategories = sidebarCategoriesMetadata?.subcategories\n      if (!subcategories?.length) return\n\n      const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n      const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n      // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n      const expandedStates = subcategories.map((_: any, index: number) => ({\n        index,\n        open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n      }))\n\n      setExpandedSubcategory(expandedStates)\n    }, [sidebarCategoriesMetadata])\n\n    useEffect(() => {\n      initExpandedSubcategory()\n    }, [initExpandedSubcategory])\n\n    // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n    const matchSeriesMetadata = useMemo(() => {\n      const subCategory =\n        sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n      const currentSeriesMetadata =\n        seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n      if (subCategory?.collections) {\n        const category = buildProps?.categories?.[subCategory?.collections] || {}\n        return {\n          label: currentSeriesMetadata?.label,\n          isCollection: true,\n          banner: currentSeriesMetadata?.banner,\n          primary: currentSeriesMetadata?.primary,\n          series: [\n            {\n              products: category?.products,\n            },\n          ],\n        }\n      } else {\n        if (subCategory?.subSubCategories) {\n          const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n          const currentActiveSeriesMetadata =\n            seriesMetadata?.find(\n              (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n            ) || {}\n          if (activeSubSubcategory?.collections) {\n            const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n            return {\n              label: currentActiveSeriesMetadata?.label,\n              isCollection: true,\n              banner: currentActiveSeriesMetadata?.banner,\n              primary: currentActiveSeriesMetadata?.primary,\n              series: [\n                {\n                  products: category?.products,\n                },\n              ],\n            }\n          } else {\n            return currentActiveSeriesMetadata\n          }\n        } else {\n          return currentSeriesMetadata\n        }\n      }\n    }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n    const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n      subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n      setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n    }, [])\n\n    const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n      setExpandedSubcategory(prev =>\n        prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n      )\n      setActiveSubSubcategoryIndex(subSubindex)\n    }\n\n    return (\n      <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n        <div\n          className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n          style={{\n            userSelect: 'none',\n          }}\n          ref={sidebarDropdownRef}\n        >\n          <div\n            className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n              const hasSubSubCategory =\n                Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n              const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n              return (\n                <div key={`${subItem?.label || ''}subcategoryItem-${index}`}>\n                  <button\n                    className={cn(\n                      'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n                      {\n                        'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n                      }\n                    )}\n                    onClick={() => {\n                      handleSubcategoryOpen(index, subItem)\n                      onSidebarNavClick?.(subItem, index)\n                    }}\n                    aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n                    aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n                  >\n                    <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n                    {hasSubSubCategory && (\n                      <DownArrow\n                        aria-hidden=\"true\"\n                        className={cn('size-4', {\n                          ['rotate-180']: isExpanded,\n                        })}\n                      />\n                    )}\n                  </button>\n                  {isExpanded && (\n                    <div className=\"flex flex-col\" role=\"menu\">\n                      {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n                        <button\n                          onClick={() => {\n                            handleSubSubcategoryOpen(index, subSubindex)\n                            onSidebarNavClick?.(subSubItem, subSubindex)\n                          }}\n                          key={`subSubItem-${index}-${subSubindex}`}\n                          className={cn(\n                            'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n                            {\n                              'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n                            }\n                          )}\n                          role=\"menuitem\"\n                          aria-label={subSubItem.label}\n                        >\n                          <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n                        </button>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {sidebarCategoriesMetadata && (\n            <div className=\"flex\">\n              <div className=\"flex flex-col gap-4\">\n                {sidebarCategoriesMetadata?.primary && (\n                  <Button\n                    as=\"a\"\n                    href={`${sidebarCategoriesMetadata?.primary?.url}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n                    variant=\"primary\"\n                    size=\"lg\"\n                    className=\"lg-desktop:text-base text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.primary?.label}\n                  </Button>\n                )}\n                {sidebarCategoriesMetadata?.secondary && (\n                  <Button\n                    as=\"a\"\n                    href={sidebarCategoriesMetadata?.secondary?.url}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.secondary?.label}\n                  </Button>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n        <div className=\"flex-1 py-4\">\n          {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n            <div className=\"mb-4 flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <Text\n                  html={matchSeriesMetadata?.label}\n                  className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n                />\n                {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n                  <Button\n                    as=\"a\"\n                    href={`${matchSeriesMetadata?.primary?.url}?ref=${matchSeriesMetadata?.label}_viewmore`}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n                  >\n                    {matchSeriesMetadata?.primary?.label}\n                  </Button>\n                )}\n              </div>\n              {sidebarCategoriesMetadata?.guide?.label && (\n                <Link\n                  href={sidebarCategoriesMetadata?.guide?.url}\n                  className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n                >\n                  {sidebarCategoriesMetadata?.guide?.label}\n                </Link>\n              )}\n            </div>\n          )}\n          <div\n            className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n              <div key={`seriesItem-${seriesItem?.label || ''}-${seriesIndex}`}>\n                {seriesItem.label && (\n                  <Text\n                    html={seriesItem.label}\n                    as=\"p\"\n                    className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                  />\n                )}\n                <div className=\"grid grid-cols-3 gap-4\">\n                  {!!matchSeriesMetadata?.banner && (\n                    <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n                      <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n                        <Picture\n                          source={matchSeriesMetadata?.banner?.imageUrl}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {seriesItem.products?.map((product: any, index: number) => (\n                    <SeriesProductItem\n                      seriesLabel={matchSeriesMetadata?.label}\n                      key={`seriesProductItem-${seriesItem?.label || ''}-${seriesIndex}-${index}`}\n                      product={product}\n                      isCollection={matchSeriesMetadata?.isCollection}\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </Container>\n    )\n  }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n  product,\n  isCollection,\n  position,\n  seriesLabel,\n}: {\n  product: any\n  isCollection?: boolean\n  position?: number\n  seriesLabel?: string\n}) => {\n  const { buildProps, onSeriesProductClick } = useNavContext()\n  let productData = isCollection\n    ? product\n    : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n  const variant =\n    productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n  const listingLink = useMemo(() => {\n    return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n  }, [productData?.handle, variant?.id])\n\n  const tags = useMemo(() => {\n    return productData?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [productData?.tags])\n\n  if (!variant?.availableForSale) return null\n\n  return (\n    <Link\n      href={listingLink}\n      onClick={e => {\n        e.preventDefault()\n        window.open(listingLink, '_self')\n        onSeriesProductClick?.(productData, position || 0, seriesLabel)\n      }}\n      className=\"no-underline hover:text-current\"\n    >\n      <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n        <div className=\"shrink-0\">\n          <img\n            src={`${variant?.image?.url || product?.images?.[0]?.url}&width=200`}\n            loading=\"lazy\"\n            alt={productData?.title || product?.name}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\n          />\n        </div>\n        <div className=\"relative\">\n          <div className=\"flex gap-1\">\n            {Array.isArray(tags) &&\n              tags?.map((tag: string, index: number) => (\n                <Text\n                  key={index}\n                  as=\"p\"\n                  html={tag}\n                  className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n                />\n              ))}\n          </div>\n          <Text\n            className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n            html={product?.custom_name || variant?.metafields?.infos?.page_short_title || productData?.title}\n          />\n          {product?.desc && (\n            <Text\n              as=\"p\"\n              html={product?.desc}\n              className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n            />\n          )}\n        </div>\n      </div>\n    </Link>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["SidebarDropdown_exports", "__export", "SeriesProductItem", "SidebarDropdown", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_icons", "import_NavProvider", "React", "sidebarCategoriesMetadata", "seriesMetadata", "buildProps", "onSidebarNavClick", "expandedSubcategory", "setExpandedSubcategory", "activeSubSubcategoryIndex", "setActiveSubSubcategoryIndex", "sidebarDropdownRef", "initExpandedSubcategory", "subcategories", "withSubSubCategoriesIndex", "item", "withoutSubSubCategoriesIndex", "expandedStates", "_", "index", "matchSeriesMetadata", "subCategory", "currentSeriesMetadata", "category", "activeSubSubcategory", "currentActiveSeriesMetadata", "handleSubcategoryOpen", "subcategoryItem", "prev", "i", "handleSubSubcategoryOpen", "subSubindex", "subItem", "hasSubSubCategory", "isExpanded", "subSubItem", "seriesItem", "seriesIndex", "product", "isCollection", "position", "seriesLabel", "onSeriesProductClick", "productData", "variant", "listingLink", "tags", "e", "tag"]
 }

package/dist/cjs/biz-components/HeaderNavigation/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var ke=Object.create;var U=Object.defineProperty;var Ce=Object.getOwnPropertyDescriptor;var xe=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,Me=Object.prototype.hasOwnProperty;var Se=(n,r)=>{for(var i in r)U(n,i,{get:r[i],enumerable:!0})},te=(n,r,i,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of xe(r))!Me.call(n,d)&&d!==i&&U(n,d,{get:()=>r[d],enumerable:!(s=Ce(r,d))||s.enumerable});return n};var Z=(n,r,i)=>(i=n!=null?ke(we(n)):{},te(r||!n||!n.__esModule?U(i,"default",{value:n,enumerable:!0}):i,n)),Pe=n=>te(U({},"__esModule",{value:!0}),n);var Le={};Se(Le,{default:()=>He});module.exports=Pe(Le);var e=require("react/jsx-runtime"),t=require("react"),l=require("../../components/index.js"),le=require("../../shared/Styles.js"),S=require("../../helpers/utils.js"),z=Z(require("./NavProvider.js")),o=require("./types.js"),se=Z(require("jump.js")),G=require("@gsap/react"),J=require("gsap"),N=require("./withCategory.js"),x=require("./icons/index.js"),ce=Z(require("../NavigationSearch/index.js")),ue=require("./ResourceSidebarDropdown.js"),me=require("./MobileResourceSidebarMenu.js"),de=require("./SidebarDropdown.js"),pe=require("./MulticolDropdown.js"),fe=require("./SupportsDropdown.js"),be=require("./MobileSidebarMenu.js"),ve=require("./MobileSupportMenu.js"),ge=require("./MobileMulticolMenu.js"),q=require("./MobileMenuComponents.js");const ae=(0,t.forwardRef)((n,r)=>{const{data:{header:i}={},buildProps:s,event:d,profile:c,theme:h="light",isTop:f=!1,searchResult:E,onSearch:u,isSearching:g,keywords:k,onPrimaryNavClick:b,onSeriesProductClick:w,onSidebarNavClick:O,headerId:T,cartCount:H,menuData:L}=n,[P,B]=(0,t.useState)(!1),[j,W]=(0,t.useState)(!1),m=(0,t.useRef)(null),D=(0,t.useRef)(null),A=()=>{const y=document?.querySelector("body")?.offsetWidth||0;W(y<=1440)};(0,t.useEffect)(()=>(A(),window.addEventListener("resize",A),()=>{window.removeEventListener("resize",A)}),[]),(0,t.useImperativeHandle)(r,()=>D.current),(0,t.useEffect)(()=>{D.current&&f&&(0,se.default)(D.current,{duration:0,offset:D.current?.getBoundingClientRect()?.bottom||0})},[f]),(0,t.useEffect)(()=>{d&&(d.search=()=>B(!0))},[d]),(0,G.useGSAP)(()=>{m?.current&&P&&J.gsap.fromTo(m.current,{height:0},{height:"auto",duration:.3})},[P]),(0,t.useEffect)(()=>{document.documentElement.style.overflow=P?"hidden":"auto"},[P]);const R=(0,t.useMemo)(()=>i?.bar?.actions?.find(y=>y?.blockType===o.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[i]);return(0,e.jsx)(z.default,{buildProps:s,profile:c,isMobile:j,event:d,payloadData:i,onSidebarNavClick:O,onSeriesProductClick:w,cartCount:H,children:(0,e.jsx)("header",{id:T||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:D,children:(0,e.jsxs)("div",{className:(0,S.cn)("hover:bg-white hover:text-black",h==="light"?"text-black":"text-white",{}),children:[(0,e.jsx)(ne,{data:i,className:"desktop:block hidden !bg-white",theme:h,onPrimaryNavClick:b}),(0,e.jsx)(oe,{menuData:L,data:i,className:"desktop:hidden block !bg-white",onPrimaryNavClick:b}),P&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${D?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[(0,e.jsx)("div",{ref:m,className:(0,S.cn)("overflow-y-auto",{}),children:(0,e.jsx)(ce.default,{data:R,keywords:k,isSearching:g,searchResult:E,onSearch:y=>{u?.(y)},onClose:()=>{u?.(),B(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>B(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:y=>{(y.key==="Enter"||y.key===" "||y.key==="Escape")&&(y.preventDefault(),B(!1))}})]})]})})})}),ne=(0,t.forwardRef)((n,r)=>{const{data:i,onNavItemClick:s,className:d,theme:c,onPrimaryNavClick:h}=n,{event:f,profile:E}=(0,z.useNavContext)(),[u,g]=(0,t.useState)(!1),k=(0,t.useMemo)(()=>(0,N.WithGroupCategory)(i?.categories?.filter(a=>a?.pcShow)),[i]),[b,w]=(0,t.useState)(null),[O,T]=(0,t.useState)([]),H=(0,t.useRef)(null),[L,P]=(0,t.useState)(!1),B=(0,t.useRef)(null),j=(0,t.useRef)(null),W=(0,t.useRef)(k.map(a=>Array(a?.length||0).fill(null)));(0,t.useEffect)(()=>{k?.length&&T(k?.map((a,p)=>a?.map((v,M)=>({groupIndex:p,index:M,open:!1}))))},[k]);const m=(0,t.useMemo)(()=>{let a=null;for(const p of O){for(const v of p)if(v.open){a=v;break}if(a)break}return a},[O]);(0,t.useEffect)(()=>{document.documentElement.style.overflow=m?.open||L?"hidden":"auto"},[m?.open,L]);const D=(a,p,v)=>{P(!1);const M=k[p][v];if(M?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links)M?.components?.[0]?.url&&window.open(M?.components?.[0]?.url);else{const K=k?.flat()||[],I=K?.findIndex(Y=>Y?.id===k[p][v]?.id);a.stopPropagation(),s?.(),h?.(K[I],I),w(M),T(Y=>Y.map(Ne=>Ne.map(F=>F.groupIndex===p&&F.index===v?{...F,open:!F.open}:{...F,open:!1})))}},A=(a,p,v)=>{a.key==="Enter"||a.key===" "?(a.preventDefault(),D(a,p,v)):a.key==="Escape"&&m?.groupIndex===p&&m?.index===v&&(a.preventDefault(),R())},R=()=>{T(a=>a.map(p=>p.map(v=>({...v,open:!1}))))},y=(0,t.useMemo)(()=>{if(b)return b?.components?.[0]?.blockType},[b]),C=(0,N.WithSidebar)(de.SidebarDropdown,b),Q=(0,N.WithResource)(ue.ResourceSidebarDropdown,b),_=(0,N.WithMulticol)(pe.MulticolDropdown,b),he=(0,N.WithSupports)(fe.SupportsDropdown,{categoriesItem:b,currentNavItemRef:W.current?.[m?.groupIndex||0]?.[m?.index||0]}),ye=(0,t.useMemo)(()=>{switch(y){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(C,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(Q,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(he,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(_,{});default:return null}},[y,b]),V=(0,t.useMemo)(()=>i?.bar?.actions?.filter(a=>a?.pcShow),[i]),$=(0,t.useMemo)(()=>V?.find(a=>a?.blockType===o.HeaderNavigationActionBlockType.Profile),[V]),X=(0,t.useCallback)(()=>{P(a=>!a)},[]);return(0,t.useEffect)(()=>{if(H?.current){const a=H.current;return a.addEventListener("click",X),()=>{a.removeEventListener("click",X)}}},[X]),(0,G.useGSAP)(()=>{m?.open&&J.gsap.fromTo(j?.current,{height:0},{height:"auto"})},[m?.open]),(0,e.jsxs)(l.Container,{className:(0,S.cn)("relative h-[96px]",d),children:[(0,e.jsxs)("div",{ref:B,onClick:R,className:"flex h-full flex-col justify-end gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(re,{}),(0,e.jsx)(ee,{ref:H,actions:V,activeStatus:L})]}),(0,e.jsx)("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:k?.map((a,p)=>(0,e.jsx)("div",{className:"flex gap-3",children:a?.map((v,M)=>{const K=m?.groupIndex===p&&m?.index===M;return(0,e.jsx)("div",{ref:I=>{W.current[p][M]=I},className:"group cursor-pointer",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:I=>D(I,p,M),onKeyDown:I=>A(I,p,M),"aria-expanded":K,"aria-haspopup":"true","aria-label":v.text,children:[(0,e.jsx)(l.Text,{html:v.text,className:"text-sm font-bold leading-[1.4]"}),v?.components?.length>0&&v?.components?.[0]?.blockType!==o.HeaderNavigationBlockType.Links&&(0,e.jsx)(x.DownArrow,{className:(0,S.cn)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":m?.groupIndex===p&&m?.index===M,"opacity-100":u&&m?.groupIndex===p&&m?.index===M})})]}),(0,e.jsx)("div",{className:(0,S.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":K},c==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},v.id)})},`groupCategory-${p}`))})]}),(0,e.jsxs)("div",{role:"menu","aria-hidden":!(m?.open&&b),className:(0,S.cn)("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(m?.open&&b)}),onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1),style:{height:`calc(100dvh - ${B?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:j,className:(0,S.cn)("relative z-50",{"overflow-hidden":y!==o.HeaderNavigationBlockType.Supports}),children:ye}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:R,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),R())}})]}),L&&(0,e.jsxs)("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[(0,e.jsx)("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${H?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:E?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:E?.nick_name||$?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),(0,e.jsx)("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:$?.profiles?.map(a=>(0,e.jsx)(q.MenuItem,{className:"py-2",label:a?.title,href:a?.url},a.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(x.Polygon,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),(0,e.jsx)(l.Text,{html:$?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:$?.benefits?.map(a=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:a.benefitIcon?.url,className:"size-4",alt:a.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:a.benefit,className:"text-sm font-bold leading-[1.4]"})]},a.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>f?.join?.(),children:(0,e.jsx)(l.Text,{html:$?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>f?.login?.(),children:(0,e.jsx)(l.Text,{html:$?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>P(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),P(!1))}})]})]})}),oe=(0,t.forwardRef)(({data:n,menuData:r,className:i,onPrimaryNavClick:s},d)=>{const c=(0,t.useMemo)(()=>(0,N.WithGroupCategory)(n?.categories?.filter(C=>C?.mobileShow)),[n]),{currentMenu:h,setCurrentMenu:f,subSubCategory:E}=(0,z.useNavContext)(),[u,g]=(0,t.useState)(!1),[k,b]=(0,t.useState)(0),[w,O]=(0,t.useState)(null),T=(0,t.useRef)(null);(0,t.useEffect)(()=>{if(T?.current&&u){const C=T?.current?.getBoundingClientRect();b(window?.innerHeight-(C?.bottom||0))}},[u]),(0,G.useGSAP)(()=>{J.gsap.fromTo(T.current,{height:0},{height:k,duration:.3})},[k]),(0,t.useEffect)(()=>{document.documentElement.style.overflow=u?"hidden":"auto"},[u]);const H=(0,t.useMemo)(()=>w?.components?.[0]?.blockType,[w]),L=(0,N.WithSupports)(ve.MobileSupportMenu,{categoriesItem:w}),P=(0,N.WithSidebar)(be.MobileSidebarMenu,w),B=(0,N.WithResource)(me.MobileResourceSidebarMenu,w),j=(0,N.WithMulticol)(ge.MobileMulticolMenu,w),W=(0,t.useMemo)(()=>{switch(H){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(P,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(B,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(L,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(j,{});default:return null}},[H,w,L]),m=(0,t.useCallback)(()=>{g(!1),b(0),f&&f(o.HeaderNavigationMenu.Primary)},[g,b,f]),D=(0,t.useMemo)(()=>n?.bar?.actions?.filter(C=>C?.mobileShow&&C?.blockType!==o.HeaderNavigationActionBlockType.Profile),[n]),A=(0,t.useMemo)(()=>n?.bar?.actions?.find(C=>C?.mobileShow&&C?.blockType===o.HeaderNavigationActionBlockType.Profile)||{},[n]),R=(0,t.useMemo)(()=>{switch(h){case o.HeaderNavigationMenu.Primary:return(0,e.jsx)(Te,{actions:D,menuOpen:u,onMenuOpenClose:()=>{g(!1),b(0)},onMenuOpenClick:()=>g(!0)});case o.HeaderNavigationMenu.Secondary:return(0,e.jsx)(ie,{title:w?.text,onMenuOpenClose:m,onMenuBackClick:()=>f?.(o.HeaderNavigationMenu.Primary)});case o.HeaderNavigationMenu.Third:return(0,e.jsx)(ie,{title:E?.label,onMenuOpenClose:m,onMenuBackClick:()=>f?.(o.HeaderNavigationMenu.Secondary)});default:return null}},[u,h,f,w,D,E,m]),y=(0,t.useCallback)((C,Q)=>{const _=Array.isArray(c)?Array.isArray(c[C])?c[C][Q]:{}:{};O(_),_?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links?_?.components?.[0]?.url&&window.open(_?.components?.[0]?.url):f?.(o.HeaderNavigationMenu.Secondary)},[c,f]);return(0,e.jsxs)(l.Container,{className:(0,S.cn)("relative h-[52px]",i),children:[R,u&&(0,e.jsxs)("nav",{ref:T,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:k},role:"navigation","aria-label":"Mobile navigation menu",children:[h===o.HeaderNavigationMenu.Primary&&r?(0,e.jsx)("div",{className:"pt-4",children:(0,e.jsx)(l.BrandStrip,{data:r})}):null,h===o.HeaderNavigationMenu.Primary?(0,e.jsx)(De,{categories:c,onPrimaryMenuClick:y,onPrimaryNavClick:s,profileAction:A}):W]})]})}),De=({categories:n,onPrimaryMenuClick:r,profileAction:i,onPrimaryNavClick:s})=>(0,e.jsxs)("div",{className:"flex h-full flex-col justify-between",children:[(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:n?.map((d,c)=>(0,e.jsxs)("div",{className:"",children:[(0,e.jsx)("div",{className:(0,S.cn)("my-2 h-px w-full bg-[#E5E5E7]")}),d?.map((h,f)=>(0,e.jsx)(q.MenuItem,{label:h.text,onClick:()=>{const u=(n?.flat()||[])?.findIndex(g=>g?.id===n[c][f]?.id);r(c,f),s?.(h,u)},icon:h.components?.[0]?.icon},h.id))]},`groupCategory-${c}`))}),(0,e.jsx)(Ee,{profileAction:i})]}),Ee=({profileAction:n})=>{const[r,i]=(0,t.useState)(!1),{profile:s,event:d}=(0,z.useNavContext)();return(0,e.jsxs)("div",{className:(0,S.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":r}),children:[(0,e.jsxs)("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>i(!r),"aria-expanded":r,"aria-label":s?.nick_name||n?.welcome,children:[(0,e.jsxs)("div",{className:"flex items-center gap-[14px]",children:[(0,e.jsx)("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:(0,e.jsx)(x.User,{"aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:s?.nick_name||n?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!s?.email&&(0,e.jsx)(x.DownArrow,{"aria-hidden":"true",className:(0,S.cn)("laptop:size-4 size-5",{"rotate-180":r})})]}),s?.email&&(0,e.jsx)("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:n?.profiles?.map(c=>(0,e.jsx)(q.MenuItem,{label:c?.title,href:c?.url},c.id))}),r&&!s?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:n?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:n?.benefits?.map(c=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:c.benefitIcon?.url,className:"size-4",alt:c.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:c.benefit,className:"text-sm font-bold leading-[1.4]"})]},c.id))})]}),!s?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>d?.join?.(),children:(0,e.jsx)(l.Text,{html:n?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>d?.login?.(),children:(0,e.jsx)(l.Text,{html:n?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Te=({menuOpen:n,onMenuOpenClose:r,onMenuOpenClick:i,actions:s})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(re,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(ee,{actions:s}),n?(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Close menu","aria-expanded":"true",children:(0,e.jsx)(x.Close,{className:"size-5","aria-hidden":"true"})}):(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:(0,e.jsx)(x.Menu,{className:"size-5","aria-hidden":"true"})})]})]}),re=()=>{const{payloadData:n,isMobile:r}=(0,z.useNavContext)();return(0,e.jsx)("a",{href:"/",className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:r?n?.bar?.mobileLogo:n?.bar?.desktopLogo}})},ee=(0,t.forwardRef)(({actions:n,activeStatus:r=!1},i)=>{const{event:s,cartCount:d}=(0,z.useNavContext)(),[c,h]=(0,t.useState)(null),f=u=>{switch(u){case o.HeaderNavigationActionBlockType.Search:return"Search";case o.HeaderNavigationActionBlockType.Cart:return`Shopping cart${d>0?` (${d} items)`:""}`;case o.HeaderNavigationActionBlockType.Profile:return"User profile";case o.HeaderNavigationActionBlockType.Livestream:return"Livestream";default:return"Action"}},E=(0,t.useCallback)((u,g)=>{switch(h(g),u?.blockType){case o.HeaderNavigationActionBlockType.Search:s?.search?.();break;case o.HeaderNavigationActionBlockType.Cart:s?.cart?.();break;case o.HeaderNavigationActionBlockType.Profile:s?.profile?.();break;case o.HeaderNavigationActionBlockType.Livestream:s?.livestream?.();break;default:return()=>{}}},[s]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(n)&&n?.map((u,g)=>(0,e.jsxs)("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:u.blockType===o.HeaderNavigationActionBlockType.Profile?i:null,onClick:()=>E(u,g),"aria-label":f(u.blockType),"aria-pressed":r&&c===g,children:[(0,e.jsx)(l.Text,{html:u.icon,className:(0,S.cn)("size-5",{"text-brand-0":r&&c===g}),"aria-hidden":"true"}),u.blockType===o.HeaderNavigationActionBlockType.Cart&&d>0&&(0,e.jsx)("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:(0,e.jsx)(l.Text,{html:d?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},u.id))})}),ie=({title:n,onMenuOpenClose:r,onMenuBackClick:i})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Back to previous menu",children:(0,e.jsx)(x.LeftArrow,{className:"size-5","aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:n,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Close menu",children:(0,e.jsx)(x.Close,{className:"size-5","aria-hidden":"true"})})]});oe.displayName="MobileNavigation",ee.displayName="Actions",ae.displayName="HeaderNavigation",ne.displayName="DesktopNavigation";var He=(0,le.withLayout)(ae);
+"use strict";"use client";var ke=Object.create;var U=Object.defineProperty;var Ce=Object.getOwnPropertyDescriptor;var xe=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,Me=Object.prototype.hasOwnProperty;var Se=(n,r)=>{for(var i in r)U(n,i,{get:r[i],enumerable:!0})},te=(n,r,i,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of xe(r))!Me.call(n,d)&&d!==i&&U(n,d,{get:()=>r[d],enumerable:!(s=Ce(r,d))||s.enumerable});return n};var Z=(n,r,i)=>(i=n!=null?ke(we(n)):{},te(r||!n||!n.__esModule?U(i,"default",{value:n,enumerable:!0}):i,n)),Pe=n=>te(U({},"__esModule",{value:!0}),n);var Le={};Se(Le,{default:()=>He});module.exports=Pe(Le);var e=require("react/jsx-runtime"),t=require("react"),l=require("../../components/index.js"),le=require("../../shared/Styles.js"),S=require("../../helpers/utils.js"),z=Z(require("./NavProvider.js")),o=require("./types.js"),se=Z(require("jump.js")),G=require("@gsap/react"),J=require("gsap"),N=require("./withCategory.js"),x=require("./icons/index.js"),ce=Z(require("../NavigationSearch/index.js")),ue=require("./ResourceSidebarDropdown.js"),me=require("./MobileResourceSidebarMenu.js"),de=require("./SidebarDropdown.js"),pe=require("./MulticolDropdown.js"),fe=require("./SupportsDropdown.js"),be=require("./MobileSidebarMenu.js"),ve=require("./MobileSupportMenu.js"),ge=require("./MobileMulticolMenu.js"),q=require("./MobileMenuComponents.js");const ae=(0,t.forwardRef)((n,r)=>{const{data:{header:i}={},buildProps:s,event:d,profile:c,theme:h="light",isTop:f=!1,searchResult:E,onSearch:u,isSearching:g,keywords:k,onPrimaryNavClick:b,onSeriesProductClick:w,onSidebarNavClick:O,headerId:T,cartCount:H,menuData:L}=n,[P,B]=(0,t.useState)(!1),[j,W]=(0,t.useState)(!1),m=(0,t.useRef)(null),D=(0,t.useRef)(null),A=()=>{const y=document?.querySelector("body")?.offsetWidth||0;W(y<=1440)};(0,t.useEffect)(()=>(A(),window.addEventListener("resize",A),()=>{window.removeEventListener("resize",A)}),[]),(0,t.useImperativeHandle)(r,()=>D.current),(0,t.useEffect)(()=>{D.current&&f&&(0,se.default)(D.current,{duration:0,offset:D.current?.getBoundingClientRect()?.bottom||0})},[f]),(0,t.useEffect)(()=>{d&&(d.search=()=>B(!0))},[d]),(0,G.useGSAP)(()=>{m?.current&&P&&J.gsap.fromTo(m.current,{height:0},{height:"auto",duration:.3})},[P]),(0,t.useEffect)(()=>{document.documentElement.style.overflow=P?"hidden":"auto"},[P]);const R=(0,t.useMemo)(()=>i?.bar?.actions?.find(y=>y?.blockType===o.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[i]);return(0,e.jsx)(z.default,{buildProps:s,profile:c,isMobile:j,event:d,payloadData:i,onSidebarNavClick:O,onSeriesProductClick:w,cartCount:H,children:(0,e.jsx)("header",{id:T||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:D,children:(0,e.jsxs)("div",{className:(0,S.cn)("hover:bg-white hover:text-black",h==="light"?"text-black":"text-white",{}),children:[(0,e.jsx)(ne,{data:i,className:"desktop:block hidden !bg-white",theme:h,onPrimaryNavClick:b}),(0,e.jsx)(oe,{menuData:L,data:i,className:"desktop:hidden block !bg-white",onPrimaryNavClick:b}),P&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${D?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[(0,e.jsx)("div",{ref:m,className:(0,S.cn)("overflow-y-auto",{}),children:(0,e.jsx)(ce.default,{data:R,keywords:k,isSearching:g,searchResult:E,onSearch:y=>{u?.(y)},onClose:()=>{u?.(),B(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>B(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:y=>{(y.key==="Enter"||y.key===" "||y.key==="Escape")&&(y.preventDefault(),B(!1))}})]})]})})})}),ne=(0,t.forwardRef)((n,r)=>{const{data:i,onNavItemClick:s,className:d,theme:c,onPrimaryNavClick:h}=n,{event:f,profile:E}=(0,z.useNavContext)(),[u,g]=(0,t.useState)(!1),k=(0,t.useMemo)(()=>(0,N.WithGroupCategory)(i?.categories?.filter(a=>a?.pcShow)),[i]),[b,w]=(0,t.useState)(null),[O,T]=(0,t.useState)([]),H=(0,t.useRef)(null),[L,P]=(0,t.useState)(!1),B=(0,t.useRef)(null),j=(0,t.useRef)(null),W=(0,t.useRef)(k.map(a=>Array(a?.length||0).fill(null)));(0,t.useEffect)(()=>{k?.length&&T(k?.map((a,p)=>a?.map((v,M)=>({groupIndex:p,index:M,open:!1}))))},[k]);const m=(0,t.useMemo)(()=>{let a=null;for(const p of O){for(const v of p)if(v.open){a=v;break}if(a)break}return a},[O]);(0,t.useEffect)(()=>{document.documentElement.style.overflow=m?.open||L?"hidden":"auto"},[m?.open,L]);const D=(a,p,v)=>{P(!1);const M=k[p][v];if(M?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links)M?.components?.[0]?.url&&window.open(M?.components?.[0]?.url);else{const K=k?.flat()||[],I=K?.findIndex(Y=>Y?.id===k[p][v]?.id);a.stopPropagation(),s?.(),h?.(K[I],I),w(M),T(Y=>Y.map(Ne=>Ne.map(F=>F.groupIndex===p&&F.index===v?{...F,open:!F.open}:{...F,open:!1})))}},A=(a,p,v)=>{a.key==="Enter"||a.key===" "?(a.preventDefault(),D(a,p,v)):a.key==="Escape"&&m?.groupIndex===p&&m?.index===v&&(a.preventDefault(),R())},R=()=>{T(a=>a.map(p=>p.map(v=>({...v,open:!1}))))},y=(0,t.useMemo)(()=>{if(b)return b?.components?.[0]?.blockType},[b]),C=(0,N.WithSidebar)(de.SidebarDropdown,b),Q=(0,N.WithResource)(ue.ResourceSidebarDropdown,b),_=(0,N.WithMulticol)(pe.MulticolDropdown,b),he=(0,N.WithSupports)(fe.SupportsDropdown,{categoriesItem:b,currentNavItemRef:W.current?.[m?.groupIndex||0]?.[m?.index||0]}),ye=(0,t.useMemo)(()=>{switch(y){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(C,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(Q,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(he,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(_,{});default:return null}},[y,b]),V=(0,t.useMemo)(()=>i?.bar?.actions?.filter(a=>a?.pcShow),[i]),$=(0,t.useMemo)(()=>V?.find(a=>a?.blockType===o.HeaderNavigationActionBlockType.Profile),[V]),X=(0,t.useCallback)(()=>{P(a=>!a)},[]);return(0,t.useEffect)(()=>{if(H?.current){const a=H.current;return a.addEventListener("click",X),()=>{a.removeEventListener("click",X)}}},[X]),(0,G.useGSAP)(()=>{m?.open&&J.gsap.fromTo(j?.current,{height:0},{height:"auto"})},[m?.open]),(0,e.jsxs)(l.Container,{className:(0,S.cn)("relative h-[96px]",d),children:[(0,e.jsxs)("div",{ref:B,onClick:R,className:"flex h-full flex-col justify-end gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(re,{}),(0,e.jsx)(ee,{ref:H,actions:V,activeStatus:L})]}),(0,e.jsx)("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:k?.map((a,p)=>(0,e.jsx)("div",{className:"flex gap-3",children:a?.map((v,M)=>{const K=m?.groupIndex===p&&m?.index===M;return(0,e.jsx)("div",{ref:I=>{W.current[p][M]=I},className:"group",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:I=>D(I,p,M),onKeyDown:I=>A(I,p,M),"aria-expanded":K,"aria-haspopup":"true","aria-label":v.text,children:[(0,e.jsx)(l.Text,{html:v.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(x.DownArrow,{className:(0,S.cn)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":m?.groupIndex===p&&m?.index===M,"opacity-100":u&&m?.groupIndex===p&&m?.index===M,invisible:!v?.components?.length||v?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links})})]}),(0,e.jsx)("div",{className:(0,S.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":K},c==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},v.id)})},`groupCategory-${p}`))})]}),(0,e.jsxs)("div",{role:"menu","aria-hidden":!(m?.open&&b),className:(0,S.cn)("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(m?.open&&b)}),onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1),style:{height:`calc(100dvh - ${B?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:j,className:(0,S.cn)("relative z-50",{"overflow-hidden":y!==o.HeaderNavigationBlockType.Supports}),children:ye}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:R,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),R())}})]}),L&&(0,e.jsxs)("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[(0,e.jsx)("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${H?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:E?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:E?.nick_name||$?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),(0,e.jsx)("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:$?.profiles?.map(a=>(0,e.jsx)(q.MenuItem,{className:"py-2",label:a?.title,href:a?.url},a.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(x.Polygon,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),(0,e.jsx)(l.Text,{html:$?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:$?.benefits?.map(a=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:a.benefitIcon?.url,className:"size-4",alt:a.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:a.benefit,className:"text-sm font-bold leading-[1.4]"})]},a.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>f?.join?.(),children:(0,e.jsx)(l.Text,{html:$?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>f?.login?.(),children:(0,e.jsx)(l.Text,{html:$?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>P(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),P(!1))}})]})]})}),oe=(0,t.forwardRef)(({data:n,menuData:r,className:i,onPrimaryNavClick:s},d)=>{const c=(0,t.useMemo)(()=>(0,N.WithGroupCategory)(n?.categories?.filter(C=>C?.mobileShow)),[n]),{currentMenu:h,setCurrentMenu:f,subSubCategory:E}=(0,z.useNavContext)(),[u,g]=(0,t.useState)(!1),[k,b]=(0,t.useState)(0),[w,O]=(0,t.useState)(null),T=(0,t.useRef)(null);(0,t.useEffect)(()=>{if(T?.current&&u){const C=T?.current?.getBoundingClientRect();b(window?.innerHeight-(C?.bottom||0))}},[u]),(0,G.useGSAP)(()=>{J.gsap.fromTo(T.current,{height:0},{height:k,duration:.3})},[k]),(0,t.useEffect)(()=>{document.documentElement.style.overflow=u?"hidden":"auto"},[u]);const H=(0,t.useMemo)(()=>w?.components?.[0]?.blockType,[w]),L=(0,N.WithSupports)(ve.MobileSupportMenu,{categoriesItem:w}),P=(0,N.WithSidebar)(be.MobileSidebarMenu,w),B=(0,N.WithResource)(me.MobileResourceSidebarMenu,w),j=(0,N.WithMulticol)(ge.MobileMulticolMenu,w),W=(0,t.useMemo)(()=>{switch(H){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(P,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(B,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(L,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(j,{});default:return null}},[H,w,L]),m=(0,t.useCallback)(()=>{g(!1),b(0),f&&f(o.HeaderNavigationMenu.Primary)},[g,b,f]),D=(0,t.useMemo)(()=>n?.bar?.actions?.filter(C=>C?.mobileShow&&C?.blockType!==o.HeaderNavigationActionBlockType.Profile),[n]),A=(0,t.useMemo)(()=>n?.bar?.actions?.find(C=>C?.mobileShow&&C?.blockType===o.HeaderNavigationActionBlockType.Profile)||{},[n]),R=(0,t.useMemo)(()=>{switch(h){case o.HeaderNavigationMenu.Primary:return(0,e.jsx)(Te,{actions:D,menuOpen:u,onMenuOpenClose:()=>{g(!1),b(0)},onMenuOpenClick:()=>g(!0)});case o.HeaderNavigationMenu.Secondary:return(0,e.jsx)(ie,{title:w?.text,onMenuOpenClose:m,onMenuBackClick:()=>f?.(o.HeaderNavigationMenu.Primary)});case o.HeaderNavigationMenu.Third:return(0,e.jsx)(ie,{title:E?.label,onMenuOpenClose:m,onMenuBackClick:()=>f?.(o.HeaderNavigationMenu.Secondary)});default:return null}},[u,h,f,w,D,E,m]),y=(0,t.useCallback)((C,Q)=>{const _=Array.isArray(c)?Array.isArray(c[C])?c[C][Q]:{}:{};O(_),_?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links?_?.components?.[0]?.url&&window.open(_?.components?.[0]?.url):f?.(o.HeaderNavigationMenu.Secondary)},[c,f]);return(0,e.jsxs)(l.Container,{className:(0,S.cn)("relative h-[52px]",i),children:[R,u&&(0,e.jsxs)("nav",{ref:T,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:k},role:"navigation","aria-label":"Mobile navigation menu",children:[h===o.HeaderNavigationMenu.Primary&&r?(0,e.jsx)("div",{className:"pt-4",children:(0,e.jsx)(l.BrandStrip,{data:r})}):null,h===o.HeaderNavigationMenu.Primary?(0,e.jsx)(De,{categories:c,onPrimaryMenuClick:y,onPrimaryNavClick:s,profileAction:A}):W]})]})}),De=({categories:n,onPrimaryMenuClick:r,profileAction:i,onPrimaryNavClick:s})=>(0,e.jsxs)("div",{className:"flex h-full flex-col justify-between",children:[(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:n?.map((d,c)=>(0,e.jsxs)("div",{className:"",children:[(0,e.jsx)("div",{className:(0,S.cn)("my-2 h-px w-full bg-[#E5E5E7]")}),d?.map((h,f)=>(0,e.jsx)(q.MenuItem,{label:h.text,onClick:()=>{const u=(n?.flat()||[])?.findIndex(g=>g?.id===n[c][f]?.id);r(c,f),s?.(h,u)},icon:h.components?.[0]?.icon},h.id))]},`groupCategory-${c}`))}),(0,e.jsx)(Ee,{profileAction:i})]}),Ee=({profileAction:n})=>{const[r,i]=(0,t.useState)(!1),{profile:s,event:d}=(0,z.useNavContext)();return(0,e.jsxs)("div",{className:(0,S.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":r}),children:[(0,e.jsxs)("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>i(!r),"aria-expanded":r,"aria-label":s?.nick_name||n?.welcome,children:[(0,e.jsxs)("div",{className:"flex items-center gap-[14px]",children:[(0,e.jsx)("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:(0,e.jsx)(x.User,{"aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:s?.nick_name||n?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!s?.email&&(0,e.jsx)(x.DownArrow,{"aria-hidden":"true",className:(0,S.cn)("laptop:size-4 size-5",{"rotate-180":r})})]}),s?.email&&(0,e.jsx)("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:n?.profiles?.map(c=>(0,e.jsx)(q.MenuItem,{label:c?.title,href:c?.url},c.id))}),r&&!s?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:n?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:n?.benefits?.map(c=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:c.benefitIcon?.url,className:"size-4",alt:c.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:c.benefit,className:"text-sm font-bold leading-[1.4]"})]},c.id))})]}),!s?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>d?.join?.(),children:(0,e.jsx)(l.Text,{html:n?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>d?.login?.(),children:(0,e.jsx)(l.Text,{html:n?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Te=({menuOpen:n,onMenuOpenClose:r,onMenuOpenClick:i,actions:s})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(re,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(ee,{actions:s}),n?(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Close menu","aria-expanded":"true",children:(0,e.jsx)(x.Close,{className:"size-5","aria-hidden":"true"})}):(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:(0,e.jsx)(x.Menu,{className:"size-5","aria-hidden":"true"})})]})]}),re=()=>{const{payloadData:n,isMobile:r}=(0,z.useNavContext)();return(0,e.jsx)("a",{href:"/",className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:r?n?.bar?.mobileLogo:n?.bar?.desktopLogo}})},ee=(0,t.forwardRef)(({actions:n,activeStatus:r=!1},i)=>{const{event:s,cartCount:d}=(0,z.useNavContext)(),[c,h]=(0,t.useState)(null),f=u=>{switch(u){case o.HeaderNavigationActionBlockType.Search:return"Search";case o.HeaderNavigationActionBlockType.Cart:return`Shopping cart${d>0?` (${d} items)`:""}`;case o.HeaderNavigationActionBlockType.Profile:return"User profile";case o.HeaderNavigationActionBlockType.Livestream:return"Livestream";default:return"Action"}},E=(0,t.useCallback)((u,g)=>{switch(h(g),u?.blockType){case o.HeaderNavigationActionBlockType.Search:s?.search?.();break;case o.HeaderNavigationActionBlockType.Cart:s?.cart?.();break;case o.HeaderNavigationActionBlockType.Profile:s?.profile?.();break;case o.HeaderNavigationActionBlockType.Livestream:s?.livestream?.();break;default:return()=>{}}},[s]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(n)&&n?.map((u,g)=>(0,e.jsxs)("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:u.blockType===o.HeaderNavigationActionBlockType.Profile?i:null,onClick:()=>E(u,g),"aria-label":f(u.blockType),"aria-pressed":r&&c===g,children:[(0,e.jsx)(l.Text,{html:u.icon,className:(0,S.cn)("size-5",{"text-brand-0":r&&c===g}),"aria-hidden":"true"}),u.blockType===o.HeaderNavigationActionBlockType.Cart&&d>0&&(0,e.jsx)("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:(0,e.jsx)(l.Text,{html:d?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},u.id))})}),ie=({title:n,onMenuOpenClose:r,onMenuBackClick:i})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Back to previous menu",children:(0,e.jsx)(x.LeftArrow,{className:"size-5","aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:n,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Close menu",children:(0,e.jsx)(x.Close,{className:"size-5","aria-hidden":"true"})})]});oe.displayName="MobileNavigation",ee.displayName="Actions",ae.displayName="HeaderNavigation",ne.displayName="DesktopNavigation";var He=(0,le.withLayout)(ae);
 //# sourceMappingURL=index.js.map