@scbt-ecom/ui 0.174.4 → 0.175.0
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.
- package/dist/lib/widgets/seoHeader/SeoHeader.js +1 -1
- package/dist/lib/widgets/seoHeader/SeoHeader.js.map +1 -1
- package/dist/lib/widgets/seoHeader/ui/desktop/CategoriesDesktop.js +1 -1
- package/dist/lib/widgets/seoHeader/ui/desktop/CategoriesDesktop.js.map +1 -1
- package/dist/lib/widgets/seoHeader/ui/desktop/rootTab/RootTab.js +1 -1
- package/dist/lib/widgets/seoHeader/ui/desktop/rootTab/RootTab.js.map +1 -1
- package/dist/lib/widgets/seoHeader/ui/mobile/menu/Menu.js +1 -1
- package/dist/lib/widgets/seoHeader/ui/mobile/menu/Menu.js.map +1 -1
- package/dist/stats.html +1 -1
- package/dist/types/lib/widgets/seoHeader/ui/desktop/rootTab/RootTab.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{CategoriesMobile as c}from"./ui/mobile/CategoriesMobile.js";import{CategoriesDesktop as d}from"./ui/desktop/CategoriesDesktop.js";import{Breadcrumbs as p}from"../breadcrumbs/Breadcrumbs.js";import{capitalize as f}from"../../shared/utils/capitalize.js";import{cn as n}from"../../shared/utils/cn.js";import{useDevice as u}from"../../shared/hooks/useDevice.js";import{ResponsiveContainer as b}from"../../shared/ui/responsiveContainer/ResponsiveContainer.js";const D=({categories:r,helpers:i,phone:t,breadcrumbs:a,classes:s})=>{const{isMobile:m}=u();return e("header",{id:"seoHeader","data-test-id":"seoHeader",className:n("w-full bg-color-white",s?.root),children:l(b,{className:"mx-auto w-full",children:[e(c,{categories:r
|
|
1
|
+
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{CategoriesMobile as c}from"./ui/mobile/CategoriesMobile.js";import{CategoriesDesktop as d}from"./ui/desktop/CategoriesDesktop.js";import{Breadcrumbs as p}from"../breadcrumbs/Breadcrumbs.js";import{capitalize as f}from"../../shared/utils/capitalize.js";import{cn as n}from"../../shared/utils/cn.js";import{useDevice as u}from"../../shared/hooks/useDevice.js";import{ResponsiveContainer as b}from"../../shared/ui/responsiveContainer/ResponsiveContainer.js";const D=({categories:r,helpers:i,phone:t,breadcrumbs:a,classes:s})=>{const{isMobile:m}=u();return e("header",{id:"seoHeader","data-test-id":"seoHeader",className:n("w-full bg-color-white",s?.root),children:l(b,{className:"mx-auto w-full",children:[e(c,{categories:r?.map(o=>o.children??[]).flat(),helpers:i,phone:t}),e(d,{categories:r,helpers:i,phone:t}),e(p,{ellipsis:m?1:void 0,breadcrumbs:a,matcher:o=>({label:f(o.label).split("-").join(" ")})})]})})};export{D as SeoHeader,D as default};
|
|
2
2
|
//# sourceMappingURL=SeoHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SeoHeader.js","sources":["../../../../lib/widgets/seoHeader/SeoHeader.tsx"],"sourcesContent":["import { ResponsiveContainer } from '../../shared/ui'\nimport { type Breadcrumb, Breadcrumbs } from '../breadcrumbs'\nimport type { Category, SeoHeaderHelpers } from './model'\nimport { CategoriesDesktop, CategoriesMobile } from './ui'\nimport { useDevice } from '$/shared/hooks'\nimport { capitalize, cn } from '$/shared/utils'\n\nexport type SeoHeaderClasses = {\n root?: string\n}\n\nexport type SeoHeaderProps = {\n categories: Category[]\n helpers: SeoHeaderHelpers[]\n breadcrumbs: Breadcrumb[]\n phone: string\n classes?: SeoHeaderClasses\n}\n\nexport const SeoHeader = ({ categories, helpers, phone, breadcrumbs, classes }: SeoHeaderProps) => {\n const { isMobile } = useDevice()\n\n return (\n <header id='seoHeader' data-test-id='seoHeader' className={cn('w-full bg-color-white', classes?.root)}>\n <ResponsiveContainer className='mx-auto w-full'>\n <CategoriesMobile\n categories={categories
|
|
1
|
+
{"version":3,"file":"SeoHeader.js","sources":["../../../../lib/widgets/seoHeader/SeoHeader.tsx"],"sourcesContent":["import { ResponsiveContainer } from '../../shared/ui'\nimport { type Breadcrumb, Breadcrumbs } from '../breadcrumbs'\nimport type { Category, SeoHeaderHelpers } from './model'\nimport { CategoriesDesktop, CategoriesMobile } from './ui'\nimport { useDevice } from '$/shared/hooks'\nimport { capitalize, cn } from '$/shared/utils'\n\nexport type SeoHeaderClasses = {\n root?: string\n}\n\nexport type SeoHeaderProps = {\n categories: Category[]\n helpers: SeoHeaderHelpers[]\n breadcrumbs: Breadcrumb[]\n phone: string\n classes?: SeoHeaderClasses\n}\n\nexport const SeoHeader = ({ categories, helpers, phone, breadcrumbs, classes }: SeoHeaderProps) => {\n const { isMobile } = useDevice()\n\n return (\n <header id='seoHeader' data-test-id='seoHeader' className={cn('w-full bg-color-white', classes?.root)}>\n <ResponsiveContainer className='mx-auto w-full'>\n <CategoriesMobile\n categories={categories?.map((category) => category.children ?? []).flat()}\n helpers={helpers}\n phone={phone}\n />\n <CategoriesDesktop categories={categories} helpers={helpers} phone={phone} />\n <Breadcrumbs\n ellipsis={isMobile ? 1 : undefined}\n breadcrumbs={breadcrumbs}\n matcher={(breadcrumb) => ({ label: capitalize(breadcrumb.label).split('-').join(' ') })}\n />\n </ResponsiveContainer>\n </header>\n )\n}\n\nexport default SeoHeader\n"],"names":["SeoHeader","categories","helpers","phone","breadcrumbs","classes","isMobile","useDevice","jsx","cn","jsxs","ResponsiveContainer","CategoriesMobile","category","CategoriesDesktop","Breadcrumbs","breadcrumb","capitalize"],"mappings":"ggBAmBO,MAAMA,EAAY,CAAC,CAAE,WAAAC,EAAY,QAAAC,EAAS,MAAAC,EAAO,YAAAC,EAAa,QAAAC,KAA8B,CACjG,KAAM,CAAE,SAAAC,CAAA,EAAaC,EAAA,EAErB,OACEC,EAAC,SAAA,CAAO,GAAG,YAAY,eAAa,YAAY,UAAWC,EAAG,wBAAyBJ,GAAS,IAAI,EAClG,SAAAK,EAACC,EAAA,CAAoB,UAAU,iBAC7B,SAAA,CAAAH,EAACI,EAAA,CACC,WAAYX,GAAY,IAAKY,GAAaA,EAAS,UAAY,EAAE,EAAE,KAAA,EACnE,QAAAX,EACA,MAAAC,CAAA,CAAA,EAEFK,EAACM,EAAA,CAAkB,WAAAb,EAAwB,QAAAC,EAAkB,MAAAC,CAAA,CAAc,EAC3EK,EAACO,EAAA,CACC,SAAUT,EAAW,EAAI,OACzB,YAAAF,EACA,QAAUY,IAAgB,CAAE,MAAOC,EAAWD,EAAW,KAAK,EAAE,MAAM,GAAG,EAAE,KAAK,GAAG,CAAA,EAAE,CAAA,CACvF,CAAA,CACF,CAAA,CACF,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as n,jsx as r}from"react/jsx-runtime";import{CategoryTabs as u}from"./CategoryTabs.js";import{useCategoryReducer as g}from"../../hooks/useCategoryReducer/useCategoryReducer.js";import{RootTab as b}from"./rootTab/RootTab.js";import{rootCategoryAction as f,currentCategoryAction as x}from"../../hooks/useCategoryReducer/actions.js";import{Icon as l}from"../../../../shared/ui/icon/Icon.js";import{pushToDlLink as c}from"../../../../shared/dataLayers/utils.js";const w=({categories:t,helpers:m,phone:o})=>{const[a,s]=g({root:t?.[0]?.children?.[0],current:t?.[0]?.children?.[0]});return n("div",{className:"mobile:hidden",children:[n("div",{className:"flex w-full items-center justify-between gap-x-4 border-b border-b-[rgba(234,237,241)] py-4",children:[r(l,{name:"brandLogos/logoMain",className:"mr-auto w-[130px]"}),t
|
|
1
|
+
import{jsxs as n,jsx as r}from"react/jsx-runtime";import{CategoryTabs as u}from"./CategoryTabs.js";import{useCategoryReducer as g}from"../../hooks/useCategoryReducer/useCategoryReducer.js";import{RootTab as b}from"./rootTab/RootTab.js";import{rootCategoryAction as f,currentCategoryAction as x}from"../../hooks/useCategoryReducer/actions.js";import{Icon as l}from"../../../../shared/ui/icon/Icon.js";import{pushToDlLink as c}from"../../../../shared/dataLayers/utils.js";const w=({categories:t,helpers:m,phone:o})=>{const[a,s]=g({root:t?.[0]?.children?.[0],current:t?.[0]?.children?.[0]});return n("div",{className:"mobile:hidden",children:[n("div",{className:"flex w-full items-center justify-between gap-x-4 border-b border-b-[rgba(234,237,241)] py-4",children:[r(l,{name:"brandLogos/logoMain",className:"mr-auto w-[130px]"}),t?.map(e=>{const d=a?.root?.title===e.title;return r(b,{category:e,selectedCategory:a.current,onCurrentCategoryChange:i=>s(x(i)),onRootCategoryChange:i=>s(f(i)),active:d},e.title)}),r("div",{className:"h-3.5 w-[1px] rounded-sm bg-color-blue-grey-500"}),m?.map(e=>n("a",{onPointerDown:()=>c(e?.title,e?.link?.href,"seoHeader"),href:e.link.href,className:"desk-body-regular-m flex items-center gap-x-1 text-color-tetriary duration-100 hover:text-color-dark",children:[e.link.icon&&r(l,{name:e.link.icon,className:"size-4"}),e.title]},e.title)),r("div",{className:"h-3.5 w-[1px] rounded-sm bg-color-blue-grey-500"}),r("a",{onPointerDown:()=>c(o,`tel:${o}`,"seoHeader"),href:`tel:${o}`,className:"desk-body-regular-m flex items-center gap-x-1 text-color-tetriary duration-100 hover:text-color-dark",children:o})]}),r(u,{categories:a.current?.children})]})};export{w as CategoriesDesktop};
|
|
2
2
|
//# sourceMappingURL=CategoriesDesktop.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CategoriesDesktop.js","sources":["../../../../../../lib/widgets/seoHeader/ui/desktop/CategoriesDesktop.tsx"],"sourcesContent":["import { pushToDlLink } from '../../../../shared/dataLayers'\nimport { currentCategoryAction, rootCategoryAction, useCategoryReducer } from '../../hooks'\nimport { type Category, type SeoHeaderHelpers } from '../../model'\nimport { CategoryTabs } from './CategoryTabs'\nimport { RootTab } from './rootTab'\nimport { Icon } from '$/shared/ui'\n\ntype DesktopCategoriesProps = {\n categories: Category[]\n helpers: SeoHeaderHelpers[]\n phone: string\n}\n\nexport const CategoriesDesktop = ({ categories, helpers, phone }: DesktopCategoriesProps) => {\n const [store, dispatch] = useCategoryReducer({ root: categories?.[0]?.children?.[0], current: categories?.[0]?.children?.[0] })\n\n return (\n <div className='mobile:hidden'>\n <div className='flex w-full items-center justify-between gap-x-4 border-b border-b-[rgba(234,237,241)] py-4'>\n <Icon name='brandLogos/logoMain' className='mr-auto w-[130px]' />\n {categories
|
|
1
|
+
{"version":3,"file":"CategoriesDesktop.js","sources":["../../../../../../lib/widgets/seoHeader/ui/desktop/CategoriesDesktop.tsx"],"sourcesContent":["import { pushToDlLink } from '../../../../shared/dataLayers'\nimport { currentCategoryAction, rootCategoryAction, useCategoryReducer } from '../../hooks'\nimport { type Category, type SeoHeaderHelpers } from '../../model'\nimport { CategoryTabs } from './CategoryTabs'\nimport { RootTab } from './rootTab'\nimport { Icon } from '$/shared/ui'\n\ntype DesktopCategoriesProps = {\n categories: Category[]\n helpers: SeoHeaderHelpers[]\n phone: string\n}\n\nexport const CategoriesDesktop = ({ categories, helpers, phone }: DesktopCategoriesProps) => {\n const [store, dispatch] = useCategoryReducer({ root: categories?.[0]?.children?.[0], current: categories?.[0]?.children?.[0] })\n\n return (\n <div className='mobile:hidden'>\n <div className='flex w-full items-center justify-between gap-x-4 border-b border-b-[rgba(234,237,241)] py-4'>\n <Icon name='brandLogos/logoMain' className='mr-auto w-[130px]' />\n {categories?.map((category) => {\n const active = store?.root?.title === category.title\n\n return (\n <RootTab\n key={category.title}\n category={category}\n selectedCategory={store.current}\n onCurrentCategoryChange={(cat) => dispatch(currentCategoryAction(cat))}\n onRootCategoryChange={(cat) => dispatch(rootCategoryAction(cat))}\n active={active}\n />\n )\n })}\n <div className='h-3.5 w-[1px] rounded-sm bg-color-blue-grey-500' />\n {helpers?.map((helper) => (\n <a\n onPointerDown={() => pushToDlLink(helper?.title, helper?.link?.href, 'seoHeader')}\n key={helper.title}\n href={helper.link.href}\n className='desk-body-regular-m flex items-center gap-x-1 text-color-tetriary duration-100 hover:text-color-dark'\n >\n {helper.link.icon && <Icon name={helper.link.icon} className='size-4' />}\n {helper.title}\n </a>\n ))}\n <div className='h-3.5 w-[1px] rounded-sm bg-color-blue-grey-500' />\n <a\n onPointerDown={() => pushToDlLink(phone, `tel:${phone}`, 'seoHeader')}\n href={`tel:${phone}`}\n className='desk-body-regular-m flex items-center gap-x-1 text-color-tetriary duration-100 hover:text-color-dark'\n >\n {phone}\n </a>\n </div>\n <CategoryTabs categories={store.current?.children} />\n </div>\n )\n}\n"],"names":["CategoriesDesktop","categories","helpers","phone","store","dispatch","useCategoryReducer","jsxs","jsx","Icon","category","active","RootTab","cat","currentCategoryAction","rootCategoryAction","helper","pushToDlLink","CategoryTabs"],"mappings":"sdAaO,MAAMA,EAAoB,CAAC,CAAE,WAAAC,EAAY,QAAAC,EAAS,MAAAC,KAAoC,CAC3F,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAmB,CAAE,KAAML,IAAa,CAAC,GAAG,WAAW,CAAC,EAAG,QAASA,IAAa,CAAC,GAAG,WAAW,CAAC,EAAG,EAE9H,OACEM,EAAC,MAAA,CAAI,UAAU,gBACb,SAAA,CAAAA,EAAC,MAAA,CAAI,UAAU,8FACb,SAAA,CAAAC,EAACC,EAAA,CAAK,KAAK,sBAAsB,UAAU,oBAAoB,EAC9DR,GAAY,IAAKS,GAAa,CAC7B,MAAMC,EAASP,GAAO,MAAM,QAAUM,EAAS,MAE/C,OACEF,EAACI,EAAA,CAEC,SAAAF,EACA,iBAAkBN,EAAM,QACxB,wBAA0BS,GAAQR,EAASS,EAAsBD,CAAG,CAAC,EACrE,qBAAuBA,GAAQR,EAASU,EAAmBF,CAAG,CAAC,EAC/D,OAAAF,CAAA,EALKD,EAAS,KAAA,CAQpB,CAAC,EACDF,EAAC,MAAA,CAAI,UAAU,iDAAA,CAAkD,EAChEN,GAAS,IAAKc,GACbT,EAAC,IAAA,CACC,cAAe,IAAMU,EAAaD,GAAQ,MAAOA,GAAQ,MAAM,KAAM,WAAW,EAEhF,KAAMA,EAAO,KAAK,KAClB,UAAU,uGAET,SAAA,CAAAA,EAAO,KAAK,MAAQR,EAACC,EAAA,CAAK,KAAMO,EAAO,KAAK,KAAM,UAAU,QAAA,CAAS,EACrEA,EAAO,KAAA,CAAA,EALHA,EAAO,KAAA,CAOf,EACDR,EAAC,MAAA,CAAI,UAAU,iDAAA,CAAkD,EACjEA,EAAC,IAAA,CACC,cAAe,IAAMS,EAAad,EAAO,OAAOA,CAAK,GAAI,WAAW,EACpE,KAAM,OAAOA,CAAK,GAClB,UAAU,uGAET,SAAAA,CAAA,CAAA,CACH,EACF,EACAK,EAACU,EAAA,CAAa,WAAYd,EAAM,SAAS,QAAA,CAAU,CAAA,EACrD,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{cn as c}from"../../../../../shared/utils/cn.js";const m=({category:r,onCurrentCategoryChange:o,onRootCategoryChange:i,active:n,...l})=>{const e=!!r?.link?.href,s=e?"a":"div",a=e?{href:r.link?.href,target:r.link?.target}:{onClick:()=>{r.children&&(o(r.children?.[0]),i(r))}};return t("div",{className:"group/category relative",children:t(s,{...l,...a,className:c("cursor-pointer text-color-tetriary duration-100 hover:text-color-dark",{"text-color-dark":n}),children:t("span",{className:"desk-body-regular-m",children:r.title})})})};export{m as RootTab};
|
|
2
2
|
//# sourceMappingURL=RootTab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RootTab.js","sources":["../../../../../../../lib/widgets/seoHeader/ui/desktop/rootTab/RootTab.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"RootTab.js","sources":["../../../../../../../lib/widgets/seoHeader/ui/desktop/rootTab/RootTab.tsx"],"sourcesContent":["import { type Category } from '../../../model'\nimport { cn } from '$/shared/utils'\n\ntype RootTabProps = React.HTMLAttributes<HTMLDivElement | HTMLAnchorElement> & {\n category: Category\n selectedCategory: Category | undefined\n onCurrentCategoryChange: (category: Category) => void\n onRootCategoryChange: (category: Category) => void\n active: boolean\n}\n\nexport const RootTab = ({ category, onCurrentCategoryChange, onRootCategoryChange, active, ...props }: RootTabProps) => {\n const isLink = Boolean(category?.link?.href)\n const Comp = isLink ? 'a' : 'div'\n\n const attrs = isLink\n ? {\n href: category.link?.href,\n target: category.link?.target\n }\n : {\n onClick: () => {\n if (!category.children) return\n\n onCurrentCategoryChange(category.children?.[0])\n onRootCategoryChange(category)\n }\n }\n\n return (\n <div className='group/category relative'>\n <Comp\n {...props}\n {...attrs}\n className={cn('cursor-pointer text-color-tetriary duration-100 hover:text-color-dark', {\n 'text-color-dark': active\n })}\n >\n <span className='desk-body-regular-m'>{category.title}</span>\n </Comp>\n {/*{category?.children && category?.children?.length > 1 && (*/}\n {/* <div*/}\n {/* className={cn(*/}\n {/* 'absolute right-0 top-full z-10 flex w-max flex-col',*/}\n {/* 'invisible bg-color-white opacity-0 shadow-sm group-hover/category:visible group-hover/category:opacity-100',*/}\n {/* 'rounded-sm p-1'*/}\n {/* )}*/}\n {/* >*/}\n {/* {category?.children?.map((child) => (*/}\n {/* <span*/}\n {/* onPointerDown={() => pushToDlLink(child?.title, '', 'seoHeader')}*/}\n {/* onClick={(event) => {*/}\n {/* event.stopPropagation()*/}\n {/* event.nativeEvent.stopPropagation()*/}\n {/* onRootCategoryChange(category)*/}\n {/* onCurrentCategoryChange(child)*/}\n {/* }}*/}\n {/* key={child.title}*/}\n {/* className={cn(*/}\n {/* 'desk-body-regular-l rounded-sm px-3 py-3.5 text-color-dark duration-100 hover:bg-color-primary-tr-hover hover:text-color-dark',*/}\n {/* {*/}\n {/* 'text-color-primary-default': selectedCategory?.title === child?.title*/}\n {/* }*/}\n {/* )}*/}\n {/* >*/}\n {/* {child.title}*/}\n {/* </span>*/}\n {/* ))}*/}\n {/* </div>*/}\n {/*)}*/}\n </div>\n )\n}\n"],"names":["RootTab","category","onCurrentCategoryChange","onRootCategoryChange","active","props","isLink","Comp","attrs","jsx","cn"],"mappings":"+FAWO,MAAMA,EAAU,CAAC,CAAE,SAAAC,EAAU,wBAAAC,EAAyB,qBAAAC,EAAsB,OAAAC,EAAQ,GAAGC,KAA0B,CACtH,MAAMC,EAAS,EAAQL,GAAU,MAAM,KACjCM,EAAOD,EAAS,IAAM,MAEtBE,EAAQF,EACV,CACE,KAAML,EAAS,MAAM,KACrB,OAAQA,EAAS,MAAM,MAAA,EAEzB,CACE,QAAS,IAAM,CACRA,EAAS,WAEdC,EAAwBD,EAAS,WAAW,CAAC,CAAC,EAC9CE,EAAqBF,CAAQ,EAC/B,CAAA,EAGN,OACEQ,EAAC,MAAA,CAAI,UAAU,0BACb,SAAAA,EAACF,EAAA,CACE,GAAGF,EACH,GAAGG,EACJ,UAAWE,EAAG,wEAAyE,CACrF,kBAAmBN,CAAA,CACpB,EAED,SAAAK,EAAC,OAAA,CAAK,UAAU,sBAAuB,WAAS,KAAA,CAAM,CAAA,CAAA,EAgC1D,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as a,jsx as l}from"react/jsx-runtime";import{useState as x,useMemo as h}from"react";import{motion as w}from"framer-motion";import{MenuItem as N}from"./MenuItem.js";import{TypeGuards as o}from"../../../../../shared/utils/typeGuards.js";import{cn as v}from"../../../../../shared/utils/cn.js";import{Combobox as y}from"../../../../../shared/ui/formElements/uncontrolled/combobox/combobox.js";import{pushToDlLink as s}from"../../../../../shared/dataLayers/utils.js";import{Icon as m}from"../../../../../shared/ui/icon/Icon.js";const k=i=>i?.map(t=>({value:t.title??"",label:t.title??""})),A=({categories:i,helpers:t,phone:n,...f})=>{const c=k(i),[r,d]=x(c?.[0]),u=e=>{o.isUndefined(e)||o.isArray(e)||d(e)},p=h(()=>r?i?.find(e=>e.title===r.value)?.children??[]:[],[r,i]);return a(w.div,{...f,className:v("fixed z-10 h-full w-full max-w-[calc(636px-32px)]","absolute left-1/2 top-full bg-color-white p-4","-translate-x-1/2 overflow-x-hidden","flex flex-col items-center justify-start gap-y-4"),initial:{opacity:0},animate:{opacity:1},children:[l(y,{multiple:!1,label:"Категория",options:c??[],value:r,onChange:u}),l("div",{className:"flex w-full flex-col items-center justify-center gap-y-1",children:p.map(e=>o.isArrayEmpty(e.children)?l("div",{className:"w-full px-4 py-2.5",children:l("a",{onPointerDown:()=>s(e?.title,e.link?.href,"seoHeader"),href:e.link?.href,className:"desk-body-regular-m inline-block w-full",children:e.title})},e.title):l(N,{category:e},e.title))}),l("div",{className:"h-[1px] w-full bg-color-blue-grey-200"}),a("div",{className:"flex w-full flex-col items-center justify-center gap-y-1",children:[t
|
|
1
|
+
import{jsxs as a,jsx as l}from"react/jsx-runtime";import{useState as x,useMemo as h}from"react";import{motion as w}from"framer-motion";import{MenuItem as N}from"./MenuItem.js";import{TypeGuards as o}from"../../../../../shared/utils/typeGuards.js";import{cn as v}from"../../../../../shared/utils/cn.js";import{Combobox as y}from"../../../../../shared/ui/formElements/uncontrolled/combobox/combobox.js";import{pushToDlLink as s}from"../../../../../shared/dataLayers/utils.js";import{Icon as m}from"../../../../../shared/ui/icon/Icon.js";const k=i=>i?.map(t=>({value:t.title??"",label:t.title??""})),A=({categories:i,helpers:t,phone:n,...f})=>{const c=k(i),[r,d]=x(c?.[0]),u=e=>{o.isUndefined(e)||o.isArray(e)||d(e)},p=h(()=>r?i?.find(e=>e.title===r.value)?.children??[]:[],[r,i]);return a(w.div,{...f,className:v("fixed z-10 h-full w-full max-w-[calc(636px-32px)]","absolute left-1/2 top-full bg-color-white p-4","-translate-x-1/2 overflow-x-hidden","flex flex-col items-center justify-start gap-y-4"),initial:{opacity:0},animate:{opacity:1},children:[l(y,{multiple:!1,label:"Категория",options:c??[],value:r,onChange:u}),l("div",{className:"flex w-full flex-col items-center justify-center gap-y-1",children:p.map(e=>o.isArrayEmpty(e.children)?l("div",{className:"w-full px-4 py-2.5",children:l("a",{onPointerDown:()=>s(e?.title,e.link?.href,"seoHeader"),href:e.link?.href,className:"desk-body-regular-m inline-block w-full",children:e.title})},e.title):l(N,{category:e},e.title))}),l("div",{className:"h-[1px] w-full bg-color-blue-grey-200"}),a("div",{className:"flex w-full flex-col items-center justify-center gap-y-1",children:[t?.map(e=>l("div",{className:"w-full px-4 py-2.5",children:a("a",{onPointerDown:()=>s(e?.title,e?.link?.href,"seoHeader"),href:e.link?.href,className:"flex w-full items-center gap-x-1",children:[e.link?.icon&&l(m,{name:e?.link?.icon,className:"size-4"}),e?.title]})},e.title)),l("div",{className:"w-full px-4 py-2.5",children:a("a",{onPointerDown:()=>s(n,`tel:${n}`,"seoHeader"),href:`tel:${n}`,className:"flex w-full items-center gap-x-1",children:[l(m,{name:"communication/phone",className:"size-4"}),n]})})]})]})};export{A as Menu};
|
|
2
2
|
//# sourceMappingURL=Menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sources":["../../../../../../../lib/widgets/seoHeader/ui/mobile/menu/Menu.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport { motion } from 'framer-motion'\nimport { pushToDlLink } from '../../../../../shared/dataLayers'\nimport { type Category, type SeoHeaderHelpers } from '../../../model'\nimport { MenuItem } from './MenuItem'\nimport { Combobox, type ComboboxItemOption, type ComboboxValue, Icon } from '$/shared/ui'\nimport { cn, TypeGuards } from '$/shared/utils'\n\nexport type MenuProps = React.ComponentProps<typeof motion.div> & {\n categories: Category[] | undefined\n helpers: SeoHeaderHelpers[]\n phone: string\n}\n\nconst getSelectCategories = (categories: Category[] | undefined): ComboboxItemOption[] | undefined =>\n categories?.map((category) => ({\n value: category.title ?? '',\n label: category.title ?? ''\n }))\n\nexport const Menu = ({ categories, helpers, phone, ...props }: MenuProps) => {\n const selectCategories = getSelectCategories(categories)\n\n const [selected, setSelected] = useState<ComboboxValue<false> | undefined>(selectCategories?.[0])\n\n const onCategoryChange = (option?: ComboboxValue<false>) => {\n if (TypeGuards.isUndefined(option) || TypeGuards.isArray(option)) return\n\n setSelected(option)\n }\n\n const selectedSubCategories = useMemo<Category[]>(() => {\n if (!selected) return []\n\n return categories?.find((category) => category.title === selected.value)?.children ?? []\n }, [selected, categories])\n\n return (\n <motion.div\n {...props}\n className={cn(\n 'fixed z-10 h-full w-full max-w-[calc(636px-32px)]',\n 'absolute left-1/2 top-full bg-color-white p-4',\n '-translate-x-1/2 overflow-x-hidden',\n 'flex flex-col items-center justify-start gap-y-4'\n )}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n >\n <Combobox\n multiple={false}\n label='Категория'\n options={selectCategories ?? []}\n value={selected}\n onChange={onCategoryChange}\n />\n <div className='flex w-full flex-col items-center justify-center gap-y-1'>\n {selectedSubCategories.map((subCategory) => {\n if (TypeGuards.isArrayEmpty(subCategory.children)) {\n return (\n <div key={subCategory.title} className='w-full px-4 py-2.5'>\n <a\n onPointerDown={() => pushToDlLink(subCategory?.title, subCategory.link?.href, 'seoHeader')}\n href={subCategory.link?.href}\n className='desk-body-regular-m inline-block w-full'\n >\n {subCategory.title}\n </a>\n </div>\n )\n }\n\n return <MenuItem key={subCategory.title} category={subCategory} />\n })}\n </div>\n <div className='h-[1px] w-full bg-color-blue-grey-200' />\n <div className='flex w-full flex-col items-center justify-center gap-y-1'>\n {helpers
|
|
1
|
+
{"version":3,"file":"Menu.js","sources":["../../../../../../../lib/widgets/seoHeader/ui/mobile/menu/Menu.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport { motion } from 'framer-motion'\nimport { pushToDlLink } from '../../../../../shared/dataLayers'\nimport { type Category, type SeoHeaderHelpers } from '../../../model'\nimport { MenuItem } from './MenuItem'\nimport { Combobox, type ComboboxItemOption, type ComboboxValue, Icon } from '$/shared/ui'\nimport { cn, TypeGuards } from '$/shared/utils'\n\nexport type MenuProps = React.ComponentProps<typeof motion.div> & {\n categories: Category[] | undefined\n helpers: SeoHeaderHelpers[]\n phone: string\n}\n\nconst getSelectCategories = (categories: Category[] | undefined): ComboboxItemOption[] | undefined =>\n categories?.map((category) => ({\n value: category.title ?? '',\n label: category.title ?? ''\n }))\n\nexport const Menu = ({ categories, helpers, phone, ...props }: MenuProps) => {\n const selectCategories = getSelectCategories(categories)\n\n const [selected, setSelected] = useState<ComboboxValue<false> | undefined>(selectCategories?.[0])\n\n const onCategoryChange = (option?: ComboboxValue<false>) => {\n if (TypeGuards.isUndefined(option) || TypeGuards.isArray(option)) return\n\n setSelected(option)\n }\n\n const selectedSubCategories = useMemo<Category[]>(() => {\n if (!selected) return []\n\n return categories?.find((category) => category.title === selected.value)?.children ?? []\n }, [selected, categories])\n\n return (\n <motion.div\n {...props}\n className={cn(\n 'fixed z-10 h-full w-full max-w-[calc(636px-32px)]',\n 'absolute left-1/2 top-full bg-color-white p-4',\n '-translate-x-1/2 overflow-x-hidden',\n 'flex flex-col items-center justify-start gap-y-4'\n )}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n >\n <Combobox\n multiple={false}\n label='Категория'\n options={selectCategories ?? []}\n value={selected}\n onChange={onCategoryChange}\n />\n <div className='flex w-full flex-col items-center justify-center gap-y-1'>\n {selectedSubCategories.map((subCategory) => {\n if (TypeGuards.isArrayEmpty(subCategory.children)) {\n return (\n <div key={subCategory.title} className='w-full px-4 py-2.5'>\n <a\n onPointerDown={() => pushToDlLink(subCategory?.title, subCategory.link?.href, 'seoHeader')}\n href={subCategory.link?.href}\n className='desk-body-regular-m inline-block w-full'\n >\n {subCategory.title}\n </a>\n </div>\n )\n }\n\n return <MenuItem key={subCategory.title} category={subCategory} />\n })}\n </div>\n <div className='h-[1px] w-full bg-color-blue-grey-200' />\n <div className='flex w-full flex-col items-center justify-center gap-y-1'>\n {helpers?.map((helper) => (\n <div key={helper.title} className='w-full px-4 py-2.5'>\n <a\n onPointerDown={() => pushToDlLink(helper?.title, helper?.link?.href, 'seoHeader')}\n href={helper.link?.href}\n className='flex w-full items-center gap-x-1'\n >\n {helper.link?.icon && <Icon name={helper?.link?.icon} className='size-4' />}\n {helper?.title}\n </a>\n </div>\n ))}\n <div className='w-full px-4 py-2.5'>\n <a\n onPointerDown={() => pushToDlLink(phone, `tel:${phone}`, 'seoHeader')}\n href={`tel:${phone}`}\n className='flex w-full items-center gap-x-1'\n >\n <Icon name='communication/phone' className='size-4' />\n {phone}\n </a>\n </div>\n </div>\n </motion.div>\n )\n}\n"],"names":["getSelectCategories","categories","category","Menu","helpers","phone","props","selectCategories","selected","setSelected","useState","onCategoryChange","option","TypeGuards","selectedSubCategories","useMemo","jsxs","motion","cn","jsx","Combobox","subCategory","pushToDlLink","MenuItem","helper","Icon"],"mappings":"uhBAcA,MAAMA,EAAuBC,GAC3BA,GAAY,IAAKC,IAAc,CAC7B,MAAOA,EAAS,OAAS,GACzB,MAAOA,EAAS,OAAS,EAC3B,EAAE,EAESC,EAAO,CAAC,CAAE,WAAAF,EAAY,QAAAG,EAAS,MAAAC,EAAO,GAAGC,KAAuB,CAC3E,MAAMC,EAAmBP,EAAoBC,CAAU,EAEjD,CAACO,EAAUC,CAAW,EAAIC,EAA2CH,IAAmB,CAAC,CAAC,EAE1FI,EAAoBC,GAAkC,CACtDC,EAAW,YAAYD,CAAM,GAAKC,EAAW,QAAQD,CAAM,GAE/DH,EAAYG,CAAM,CACpB,EAEME,EAAwBC,EAAoB,IAC3CP,EAEEP,GAAY,KAAMC,GAAaA,EAAS,QAAUM,EAAS,KAAK,GAAG,UAAY,CAAA,EAFhE,CAAA,EAGrB,CAACA,EAAUP,CAAU,CAAC,EAEzB,OACEe,EAACC,EAAO,IAAP,CACE,GAAGX,EACJ,UAAWY,EACT,oDACA,gDACA,qCACA,kDAAA,EAEF,QAAS,CAAE,QAAS,CAAA,EACpB,QAAS,CAAE,QAAS,CAAA,EAEpB,SAAA,CAAAC,EAACC,EAAA,CACC,SAAU,GACV,MAAM,YACN,QAASb,GAAoB,CAAA,EAC7B,MAAOC,EACP,SAAUG,CAAA,CAAA,IAEX,MAAA,CAAI,UAAU,2DACZ,SAAAG,EAAsB,IAAKO,GACtBR,EAAW,aAAaQ,EAAY,QAAQ,EAE5CF,EAAC,MAAA,CAA4B,UAAU,qBACrC,SAAAA,EAAC,IAAA,CACC,cAAe,IAAMG,EAAaD,GAAa,MAAOA,EAAY,MAAM,KAAM,WAAW,EACzF,KAAMA,EAAY,MAAM,KACxB,UAAU,0CAET,SAAAA,EAAY,KAAA,CAAA,CACf,EAPQA,EAAY,KAQtB,EAIGF,EAACI,EAAA,CAAiC,SAAUF,CAAA,EAA7BA,EAAY,KAA8B,CACjE,CAAA,CACH,EACAF,EAAC,MAAA,CAAI,UAAU,uCAAA,CAAwC,EACvDH,EAAC,MAAA,CAAI,UAAU,2DACZ,SAAA,CAAAZ,GAAS,IAAKoB,GACbL,EAAC,MAAA,CAAuB,UAAU,qBAChC,SAAAH,EAAC,IAAA,CACC,cAAe,IAAMM,EAAaE,GAAQ,MAAOA,GAAQ,MAAM,KAAM,WAAW,EAChF,KAAMA,EAAO,MAAM,KACnB,UAAU,mCAET,SAAA,CAAAA,EAAO,MAAM,MAAQL,EAACM,EAAA,CAAK,KAAMD,GAAQ,MAAM,KAAM,UAAU,QAAA,CAAS,EACxEA,GAAQ,KAAA,CAAA,CAAA,GAPHA,EAAO,KASjB,CACD,EACDL,EAAC,MAAA,CAAI,UAAU,qBACb,SAAAH,EAAC,IAAA,CACC,cAAe,IAAMM,EAAajB,EAAO,OAAOA,CAAK,GAAI,WAAW,EACpE,KAAM,OAAOA,CAAK,GAClB,UAAU,mCAEV,SAAA,CAAAc,EAACM,EAAA,CAAK,KAAK,sBAAsB,UAAU,SAAS,EACnDpB,CAAA,CAAA,CAAA,CACH,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CAAA,CAGN"}
|