@scbt-ecom/ui 0.174.3 → 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.
@@ -1,2 +1,2 @@
1
- import{jsxs as S,jsx as t}from"react/jsx-runtime";import{forwardRef as U}from"react";import{useFloating as q,autoUpdate as J,flip as Q,offset as V}from"@floating-ui/react";import{AnimatePresence as W,motion as X}from"framer-motion";import{useCombobox as Y}from"./hooks/useCombobox.js";import{useKeyboardNavigation as Z}from"./hooks/useKeyboardNavigation.js";import{useClickOutsideMany as _}from"../../../../hooks/useClickOutsideMany.js";import{InputBase as $}from"../input/Input.js";import{cn as s}from"../../../../utils/cn.js";import{Portal as oo}from"../../../portal/Portal.js";import{TypeGuards as eo}from"../../../../utils/typeGuards.js";import{DropdownList as to}from"../../../dropdownList/DropdownList.js";import{Icon as ro}from"../../../icon/Icon.js";import{stringifyComboboxValue as b}from"./model/utils.js";const no=({name:y,options:w,multiple:m,value:i,onChange:x,defaultOpen:I,attachmentProps:R,searchable:r,invalid:p,displayValue:u,label:k,disabled:c,readOnly:d,className:B,externalHandlers:a,inputValue:g,filterDisabled:A,onInputChange:F,empty:N,classes:f,portal:P=globalThis?globalThis?.document?.body:void 0,...C},T)=>{const M=C["data-error-message"],{floating:O,...j}=f?.list??{},{refs:e,floatingStyles:v}=q({placement:"bottom-start",strategy:"absolute",middleware:[Q({boundary:"clippingAncestors",crossAxis:!1}),V(4)],whileElementsMounted:J}),{open:l,setOpen:n,state:z,changeHandler:E,options:h,search:H,onInputChange:L}=Y({multiple:m,value:i,onChange:x,searchable:r,defaultOpen:I,displayValue:u,initialOptions:w,filterDisabled:A,externalHandlers:a,externalInputValue:g,externalOnInputChange:F});Z({ref:e.domReference,openChangeHandler:n});const D=()=>i?m&&r?b(i):r?H:b(i):"",G=o=>{o.target&&o.relatedTarget&&n(!1)};_([e.floating,e.reference],()=>n(!1));const K=P??e.domReference.current;return S("div",{ref:e.setReference,className:s("relative w-full",f?.root,B),children:[t($,{name:y,ref:T,label:k,invalid:p,readOnly:d||!r,value:g||D(),onChange:L,disabled:c,onClick:o=>{l||n(!0),a?.clickHandler?.(o)},onBlur:o=>{a?.blurHandler?.(o),G(o),C?.onBlur?.(o)},onFocus:a?.focusHandler,classes:{input:s({"cursor-pointer":!r,"cursor-default":c,"pointer-events-none":c||d}),...f?.input},autoComplete:"off",attachmentProps:{icon:t(ro,{name:"arrows/arrowRight",className:s("size-6 rotate-90 text-color-blue-grey-600 duration-100",{"-rotate-90":l,"text-color-negative":p})}),onClickIcon:()=>n(o=>!o),...R},"data-id":"combobox-input","data-error-message":M}),t(oo,{root:K,children:t(W,{children:l&&t(X.div,{ref:e.setFloating,initial:{opacity:0},animate:{opacity:1},transition:{duration:.1},className:s("z-[1000]",O),style:{...v,width:e.reference.current?.getBoundingClientRect().width},children:eo.isArrayFilled(h)&&t(to,{empty:N,options:h,multiple:m,onPick:E,value:z,displayValue:u,classes:j,target:e.domReference})})})})]})},wo=U(no);export{wo as Combobox};
1
+ import{jsxs as S,jsx as t}from"react/jsx-runtime";import{forwardRef as U}from"react";import{useFloating as q,autoUpdate as J,flip as Q,offset as V}from"@floating-ui/react";import{AnimatePresence as W,motion as X}from"framer-motion";import{useCombobox as Y}from"./hooks/useCombobox.js";import{useKeyboardNavigation as Z}from"./hooks/useKeyboardNavigation.js";import{useClickOutsideMany as _}from"../../../../hooks/useClickOutsideMany.js";import{InputBase as $}from"../input/Input.js";import{cn as s}from"../../../../utils/cn.js";import{Portal as oo}from"../../../portal/Portal.js";import{TypeGuards as eo}from"../../../../utils/typeGuards.js";import{DropdownList as to}from"../../../dropdownList/DropdownList.js";import{Icon as ro}from"../../../icon/Icon.js";import{stringifyComboboxValue as y}from"./model/utils.js";const no=({name:b,options:w,multiple:m,value:a,onChange:x,defaultOpen:I,attachmentProps:R,searchable:r,invalid:d,displayValue:p,label:k,disabled:c,readOnly:g,className:B,externalHandlers:i,inputValue:C,filterDisabled:A,onInputChange:F,empty:L,classes:f,portal:N=globalThis?globalThis?.document?.body:void 0,...l},P)=>{const T=l["data-error-message"],{floating:M,...O}=f?.list??{},{refs:e,floatingStyles:j}=q({placement:"bottom-start",strategy:"absolute",middleware:[Q({boundary:"clippingAncestors",crossAxis:!1}),V(4)],whileElementsMounted:J}),{open:u,setOpen:n,state:v,changeHandler:z,options:h,search:E,onInputChange:H}=Y({multiple:m,value:a,onChange:x,searchable:r,defaultOpen:I,displayValue:p,initialOptions:w,filterDisabled:A,externalHandlers:i,externalInputValue:C,externalOnInputChange:F});Z({ref:e.domReference,openChangeHandler:n});const D=()=>a?m&&r?y(a):r?E:y(a):"",G=o=>{o.target&&o.relatedTarget&&n(!1)};_([e.floating,e.reference],()=>n(!1));const K=N??e.domReference.current;return S("div",{ref:e.setReference,className:s("relative w-full",f?.root,B),children:[t($,{name:b,ref:P,label:k,invalid:d,readOnly:g||!r,value:C||D(),onChange:H,disabled:c,onClick:o=>{u||n(!0),i?.clickHandler?.(o)},onBlur:o=>{i?.blurHandler?.(o),G(o),l?.onBlur?.(o)},onFocus:i?.focusHandler,classes:{input:s({"cursor-pointer":!r,"cursor-default":c,"pointer-events-none":c||g}),...f?.input},autoComplete:"off",attachmentProps:{icon:t(ro,{name:"arrows/arrowRight",className:s("size-6 rotate-90 text-color-blue-grey-600 duration-100",{"-rotate-90":u,"text-color-negative":d})}),onClickIcon:()=>n(o=>!o),...R},"data-id":"combobox-input","data-error-message":T,dataLayers:l?.dataLayers}),t(oo,{root:K,children:t(W,{children:u&&t(X.div,{ref:e.setFloating,initial:{opacity:0},animate:{opacity:1},transition:{duration:.1},className:s("z-[1000]",M),style:{...j,width:e.reference.current?.getBoundingClientRect().width},children:eo.isArrayFilled(h)&&t(to,{empty:L,options:h,multiple:m,onPick:z,value:v,displayValue:p,classes:O,target:e.domReference})})})})]})},wo=U(no);export{wo as Combobox};
2
2
  //# sourceMappingURL=combobox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"combobox.js","sources":["../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/combobox.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef } from 'react'\nimport { autoUpdate, flip, offset, useFloating } from '@floating-ui/react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { useCombobox, useKeyboardNavigation } from './hooks'\nimport { type ChangeHandler, type ComboboxValue, stringifyComboboxValue } from './model'\nimport type { ComboboxItemOption } from './ui'\nimport { useClickOutsideMany } from '$/shared/hooks'\nimport { type DataLayers, type DeepPartial } from '$/shared/types'\nimport { DropdownList, Icon, InputBase, type InputBaseProps, Portal } from '$/shared/ui'\nimport { type DropdownListClasses, type DropdownListProps } from '$/shared/ui/dropdownList'\nimport { type IFieldAttachmentProps } from '$/shared/ui/formElements/ui'\nimport { cn, TypeGuards } from '$/shared/utils'\n\nexport type ComboboxClasses = {\n root?: string\n list?: { floating?: string } & DropdownListClasses\n input?: InputBaseProps['classes']\n}\n\nexport type ExternalHandlers<Multi extends boolean = false> = {\n changeHandler?: ChangeHandler<Multi>\n clickHandler?: (event: React.MouseEvent<HTMLElement>) => void\n blurHandler?: (event: React.FocusEvent<HTMLElement>) => void\n focusHandler?: (event: React.FocusEvent<HTMLElement>) => void\n inputChangeHandler?: (value: string) => void\n onKeyDown?: (value: React.KeyboardEventHandler<HTMLInputElement>) => void\n}\n\nexport interface ComboboxProps<Multi extends boolean = false>\n extends Omit<DropdownListProps<Multi>, 'options' | 'value' | 'onChange' | 'onBlur'>,\n Record<`data-${string}`, unknown> {\n /**\n * Список опций\n */\n options: ComboboxItemOption[]\n /**\n * Выбранное значение\n */\n value?: ComboboxValue<Multi>\n /**\n * Функция для изменения значения\n */\n onChange?: ChangeHandler<Multi>\n /**\n * Свойство управляющее поиском\n */\n searchable?: boolean\n /**\n * Открыть список по умолчанию\n */\n defaultOpen?: boolean\n /**\n * Свойства дополнительной иконки\n */\n attachmentProps?: DeepPartial<IFieldAttachmentProps>\n /**\n * Пометить поле как не валидное\n */\n invalid?: boolean\n /**\n * Функция для управления отображаемым значением\n */\n displayValue?: ((value: ComboboxItemOption | null) => string) | undefined\n /**\n * Отображаемый лейбл\n */\n label: string\n /**\n * Выключено поле\n */\n disabled?: boolean\n /**\n * Только для чтения\n */\n readOnly?: boolean\n /**\n * Дополнительные стили\n */\n classes?: ComboboxClasses\n /**\n * Дополнительные события\n */\n externalHandlers?: ExternalHandlers<Multi>\n /**\n * Функция для изменения значения поиска\n */\n onInputChange?: (value: string) => void\n /**\n * Значение инпута\n */\n inputValue?: string\n /**\n * Выключить фильтрацию списка\n */\n filterDisabled?: boolean\n /**\n * Включить рендеринг в портале\n * @property {false | HTMLElement} portal document.body\n */\n portal?: false | HTMLElement\n /**\n * Обработка ошибок для даталееров\n */\n ['data-error-message']?: string\n /**\n * Даталееры\n */\n dataLayers?: DataLayers\n /**\n * Внешнее onBlur событие\n */\n onBlur?: React.FocusEventHandler<HTMLInputElement>\n name?: string | undefined\n}\n\nconst InnerComponent = <Multi extends boolean = false>(\n {\n name,\n options: initialOptions,\n multiple,\n value,\n onChange,\n defaultOpen,\n attachmentProps,\n searchable,\n invalid,\n displayValue,\n label,\n disabled,\n readOnly,\n className,\n externalHandlers,\n inputValue,\n filterDisabled,\n onInputChange: externalInputChangeHandler,\n empty,\n classes,\n portal = globalThis ? globalThis?.document?.body : undefined,\n ...props\n }: ComboboxProps<Multi>,\n ref: ForwardedRef<HTMLInputElement>\n) => {\n const dataErrorMessage = props['data-error-message']\n\n const { floating, ...dropdownClasses } = classes?.list ?? {}\n\n const { refs, floatingStyles } = useFloating<HTMLDivElement>({\n placement: 'bottom-start',\n strategy: 'absolute',\n middleware: [\n flip({\n boundary: 'clippingAncestors',\n crossAxis: false\n }),\n offset(4)\n ],\n whileElementsMounted: autoUpdate\n })\n\n const { open, setOpen, state, changeHandler, options, search, onInputChange } = useCombobox({\n multiple,\n value,\n onChange,\n searchable,\n defaultOpen,\n displayValue,\n initialOptions,\n filterDisabled,\n externalHandlers,\n externalInputValue: inputValue,\n externalOnInputChange: externalInputChangeHandler\n })\n\n useKeyboardNavigation({ ref: refs.domReference, openChangeHandler: setOpen })\n\n const getLabel = () => {\n if (!value) return ''\n\n if (multiple && searchable) {\n return stringifyComboboxValue(value)\n } else if (searchable) {\n return search\n } else {\n return stringifyComboboxValue(value)\n }\n }\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (event.target && event.relatedTarget) {\n setOpen(false)\n }\n }\n\n useClickOutsideMany([refs.floating, refs.reference as React.MutableRefObject<HTMLElement | null>], () => setOpen(false))\n\n const portalContainer = portal ?? refs.domReference.current!\n\n return (\n <div ref={refs.setReference} className={cn('relative w-full', classes?.root, className)}>\n <InputBase\n name={name}\n ref={ref}\n label={label}\n invalid={invalid}\n readOnly={readOnly || !searchable}\n value={inputValue || getLabel()}\n onChange={onInputChange}\n disabled={disabled}\n onClick={(event) => {\n if (!open) setOpen(true)\n externalHandlers?.clickHandler?.(event)\n }}\n onBlur={(event) => {\n externalHandlers?.blurHandler?.(event)\n handleBlur(event)\n props?.onBlur?.(event)\n }}\n onFocus={externalHandlers?.focusHandler}\n classes={{\n input: cn({\n 'cursor-pointer': !searchable,\n 'cursor-default': disabled,\n 'pointer-events-none': disabled || readOnly\n }),\n ...classes?.input\n }}\n autoComplete='off'\n attachmentProps={{\n icon: (\n <Icon\n name='arrows/arrowRight'\n className={cn('size-6 rotate-90 text-color-blue-grey-600 duration-100', {\n '-rotate-90': open,\n 'text-color-negative': invalid\n })}\n />\n ),\n onClickIcon: () => setOpen((prev) => !prev),\n ...attachmentProps\n }}\n data-id='combobox-input'\n data-error-message={dataErrorMessage}\n />\n\n <Portal root={portalContainer}>\n <AnimatePresence>\n {open && (\n <motion.div\n ref={refs.setFloating}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ duration: 0.1 }}\n className={cn('z-[1000]', floating)}\n style={{\n ...floatingStyles,\n width: refs.reference.current?.getBoundingClientRect().width\n }}\n >\n {TypeGuards.isArrayFilled(options) && (\n <DropdownList\n empty={empty}\n options={options}\n multiple={multiple}\n onPick={changeHandler}\n value={state}\n displayValue={displayValue}\n classes={dropdownClasses}\n target={refs.domReference}\n />\n )}\n </motion.div>\n )}\n </AnimatePresence>\n </Portal>\n </div>\n )\n}\n\nexport const Combobox = forwardRef(InnerComponent) as <Multi extends boolean>(\n props: ComboboxProps<Multi> & { ref?: ForwardedRef<HTMLInputElement> }\n) => React.JSX.Element\n"],"names":["InnerComponent","name","initialOptions","multiple","value","onChange","defaultOpen","attachmentProps","searchable","invalid","displayValue","label","disabled","readOnly","className","externalHandlers","inputValue","filterDisabled","externalInputChangeHandler","empty","classes","portal","props","ref","dataErrorMessage","floating","dropdownClasses","refs","floatingStyles","useFloating","flip","offset","autoUpdate","open","setOpen","state","changeHandler","options","search","onInputChange","useCombobox","useKeyboardNavigation","getLabel","stringifyComboboxValue","handleBlur","event","useClickOutsideMany","portalContainer","jsxs","cn","jsx","InputBase","Icon","prev","Portal","AnimatePresence","motion","TypeGuards","DropdownList","Combobox","forwardRef"],"mappings":"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"}
1
+ {"version":3,"file":"combobox.js","sources":["../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/combobox.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef } from 'react'\nimport { autoUpdate, flip, offset, useFloating } from '@floating-ui/react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { useCombobox, useKeyboardNavigation } from './hooks'\nimport { type ChangeHandler, type ComboboxValue, stringifyComboboxValue } from './model'\nimport type { ComboboxItemOption } from './ui'\nimport { useClickOutsideMany } from '$/shared/hooks'\nimport { type DataLayers, type DeepPartial } from '$/shared/types'\nimport { DropdownList, Icon, InputBase, type InputBaseProps, Portal } from '$/shared/ui'\nimport { type DropdownListClasses, type DropdownListProps } from '$/shared/ui/dropdownList'\nimport { type IFieldAttachmentProps } from '$/shared/ui/formElements/ui'\nimport { cn, TypeGuards } from '$/shared/utils'\n\nexport type ComboboxClasses = {\n root?: string\n list?: { floating?: string } & DropdownListClasses\n input?: InputBaseProps['classes']\n}\n\nexport type ExternalHandlers<Multi extends boolean = false> = {\n changeHandler?: ChangeHandler<Multi>\n clickHandler?: (event: React.MouseEvent<HTMLElement>) => void\n blurHandler?: (event: React.FocusEvent<HTMLElement>) => void\n focusHandler?: (event: React.FocusEvent<HTMLElement>) => void\n inputChangeHandler?: (value: string) => void\n onKeyDown?: (value: React.KeyboardEventHandler<HTMLInputElement>) => void\n}\n\nexport interface ComboboxProps<Multi extends boolean = false>\n extends Omit<DropdownListProps<Multi>, 'options' | 'value' | 'onChange' | 'onBlur'>,\n Record<`data-${string}`, unknown> {\n /**\n * Список опций\n */\n options: ComboboxItemOption[]\n /**\n * Выбранное значение\n */\n value?: ComboboxValue<Multi>\n /**\n * Функция для изменения значения\n */\n onChange?: ChangeHandler<Multi>\n /**\n * Свойство управляющее поиском\n */\n searchable?: boolean\n /**\n * Открыть список по умолчанию\n */\n defaultOpen?: boolean\n /**\n * Свойства дополнительной иконки\n */\n attachmentProps?: DeepPartial<IFieldAttachmentProps>\n /**\n * Пометить поле как не валидное\n */\n invalid?: boolean\n /**\n * Функция для управления отображаемым значением\n */\n displayValue?: ((value: ComboboxItemOption | null) => string) | undefined\n /**\n * Отображаемый лейбл\n */\n label: string\n /**\n * Выключено поле\n */\n disabled?: boolean\n /**\n * Только для чтения\n */\n readOnly?: boolean\n /**\n * Дополнительные стили\n */\n classes?: ComboboxClasses\n /**\n * Дополнительные события\n */\n externalHandlers?: ExternalHandlers<Multi>\n /**\n * Функция для изменения значения поиска\n */\n onInputChange?: (value: string) => void\n /**\n * Значение инпута\n */\n inputValue?: string\n /**\n * Выключить фильтрацию списка\n */\n filterDisabled?: boolean\n /**\n * Включить рендеринг в портале\n * @property {false | HTMLElement} portal document.body\n */\n portal?: false | HTMLElement\n /**\n * Обработка ошибок для даталееров\n */\n ['data-error-message']?: string\n /**\n * Даталееры\n */\n dataLayers?: DataLayers\n /**\n * Внешнее onBlur событие\n */\n onBlur?: React.FocusEventHandler<HTMLInputElement>\n name?: string | undefined\n}\n\nconst InnerComponent = <Multi extends boolean = false>(\n {\n name,\n options: initialOptions,\n multiple,\n value,\n onChange,\n defaultOpen,\n attachmentProps,\n searchable,\n invalid,\n displayValue,\n label,\n disabled,\n readOnly,\n className,\n externalHandlers,\n inputValue,\n filterDisabled,\n onInputChange: externalInputChangeHandler,\n empty,\n classes,\n portal = globalThis ? globalThis?.document?.body : undefined,\n ...props\n }: ComboboxProps<Multi>,\n ref: ForwardedRef<HTMLInputElement>\n) => {\n const dataErrorMessage = props['data-error-message']\n\n const { floating, ...dropdownClasses } = classes?.list ?? {}\n\n const { refs, floatingStyles } = useFloating<HTMLDivElement>({\n placement: 'bottom-start',\n strategy: 'absolute',\n middleware: [\n flip({\n boundary: 'clippingAncestors',\n crossAxis: false\n }),\n offset(4)\n ],\n whileElementsMounted: autoUpdate\n })\n\n const { open, setOpen, state, changeHandler, options, search, onInputChange } = useCombobox({\n multiple,\n value,\n onChange,\n searchable,\n defaultOpen,\n displayValue,\n initialOptions,\n filterDisabled,\n externalHandlers,\n externalInputValue: inputValue,\n externalOnInputChange: externalInputChangeHandler\n })\n\n useKeyboardNavigation({ ref: refs.domReference, openChangeHandler: setOpen })\n\n const getLabel = () => {\n if (!value) return ''\n\n if (multiple && searchable) {\n return stringifyComboboxValue(value)\n } else if (searchable) {\n return search\n } else {\n return stringifyComboboxValue(value)\n }\n }\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (event.target && event.relatedTarget) {\n setOpen(false)\n }\n }\n\n useClickOutsideMany([refs.floating, refs.reference as React.MutableRefObject<HTMLElement | null>], () => setOpen(false))\n\n const portalContainer = portal ?? refs.domReference.current!\n\n return (\n <div ref={refs.setReference} className={cn('relative w-full', classes?.root, className)}>\n <InputBase\n name={name}\n ref={ref}\n label={label}\n invalid={invalid}\n readOnly={readOnly || !searchable}\n value={inputValue || getLabel()}\n onChange={onInputChange}\n disabled={disabled}\n onClick={(event) => {\n if (!open) setOpen(true)\n externalHandlers?.clickHandler?.(event)\n }}\n onBlur={(event) => {\n externalHandlers?.blurHandler?.(event)\n handleBlur(event)\n props?.onBlur?.(event)\n }}\n onFocus={externalHandlers?.focusHandler}\n classes={{\n input: cn({\n 'cursor-pointer': !searchable,\n 'cursor-default': disabled,\n 'pointer-events-none': disabled || readOnly\n }),\n ...classes?.input\n }}\n autoComplete='off'\n attachmentProps={{\n icon: (\n <Icon\n name='arrows/arrowRight'\n className={cn('size-6 rotate-90 text-color-blue-grey-600 duration-100', {\n '-rotate-90': open,\n 'text-color-negative': invalid\n })}\n />\n ),\n onClickIcon: () => setOpen((prev) => !prev),\n ...attachmentProps\n }}\n data-id='combobox-input'\n data-error-message={dataErrorMessage}\n dataLayers={props?.dataLayers}\n />\n\n <Portal root={portalContainer}>\n <AnimatePresence>\n {open && (\n <motion.div\n ref={refs.setFloating}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ duration: 0.1 }}\n className={cn('z-[1000]', floating)}\n style={{\n ...floatingStyles,\n width: refs.reference.current?.getBoundingClientRect().width\n }}\n >\n {TypeGuards.isArrayFilled(options) && (\n <DropdownList\n empty={empty}\n options={options}\n multiple={multiple}\n onPick={changeHandler}\n value={state}\n displayValue={displayValue}\n classes={dropdownClasses}\n target={refs.domReference}\n />\n )}\n </motion.div>\n )}\n </AnimatePresence>\n </Portal>\n </div>\n )\n}\n\nexport const Combobox = forwardRef(InnerComponent) as <Multi extends boolean>(\n props: ComboboxProps<Multi> & { ref?: ForwardedRef<HTMLInputElement> }\n) => React.JSX.Element\n"],"names":["InnerComponent","name","initialOptions","multiple","value","onChange","defaultOpen","attachmentProps","searchable","invalid","displayValue","label","disabled","readOnly","className","externalHandlers","inputValue","filterDisabled","externalInputChangeHandler","empty","classes","portal","props","ref","dataErrorMessage","floating","dropdownClasses","refs","floatingStyles","useFloating","flip","offset","autoUpdate","open","setOpen","state","changeHandler","options","search","onInputChange","useCombobox","useKeyboardNavigation","getLabel","stringifyComboboxValue","handleBlur","event","useClickOutsideMany","portalContainer","jsxs","cn","jsx","InputBase","Icon","prev","Portal","AnimatePresence","motion","TypeGuards","DropdownList","Combobox","forwardRef"],"mappings":"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"}
@@ -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.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};
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.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,EAAW,IAAKY,GAAaA,EAAS,UAAY,EAAE,EAAE,KAAA,EAClE,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
+ {"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.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};
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.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,EAAW,IAAKS,GAAa,CAC5B,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,EAAQ,IAAKc,GACZT,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
+ {"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{jsxs as h,jsx as e}from"react/jsx-runtime";import{cn as t}from"../../../../../shared/utils/cn.js";import{pushToDlLink as u}from"../../../../../shared/dataLayers/utils.js";const f=({category:r,selectedCategory:a,onCurrentCategoryChange:i,onRootCategoryChange:l,active:d,...p})=>{const n=!!r?.link?.href,c=n?"a":"div",m=n?{href:r.link?.href,target:r.link?.target}:{onClick:()=>{r.children&&(i(r.children?.[0]),l(r))}};return h("div",{className:"group/category relative",children:[e(c,{...p,...m,className:t("cursor-pointer text-color-tetriary duration-100 hover:text-color-dark",{"text-color-dark":d}),children:e("span",{className:"desk-body-regular-m",children:r.title})}),r?.children&&r?.children?.length>1&&e("div",{className:t("absolute right-0 top-full z-10 flex w-max flex-col","invisible bg-color-white opacity-0 shadow-sm group-hover/category:visible group-hover/category:opacity-100","rounded-sm p-1"),children:r?.children?.map(o=>e("span",{onPointerDown:()=>u(o?.title,"","seoHeader"),onClick:s=>{s.stopPropagation(),s.nativeEvent.stopPropagation(),l(r),i(o)},className:t("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",{"text-color-primary-default":a?.title===o?.title}),children:o.title},o.title))})]})};export{f as RootTab};
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 { pushToDlLink } from '../../../../../shared/dataLayers'\nimport { 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 = ({\n category,\n selectedCategory,\n onCurrentCategoryChange,\n onRootCategoryChange,\n active,\n ...props\n}: 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\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","selectedCategory","onCurrentCategoryChange","onRootCategoryChange","active","props","isLink","Comp","attrs","jsxs","jsx","cn","child","pushToDlLink","event"],"mappings":"kLAYO,MAAMA,EAAU,CAAC,CACtB,SAAAC,EACA,iBAAAC,EACA,wBAAAC,EACA,qBAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,MAAMC,EAAS,EAAQN,GAAU,MAAM,KACjCO,EAAOD,EAAS,IAAM,MAEtBE,EAAQF,EACV,CACE,KAAMN,EAAS,MAAM,KACrB,OAAQA,EAAS,MAAM,MAAA,EAEzB,CACE,QAAS,IAAM,CACRA,EAAS,WAEdE,EAAwBF,EAAS,WAAW,CAAC,CAAC,EAC9CG,EAAqBH,CAAQ,EAC/B,CAAA,EAGN,OACES,EAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAAC,EAACH,EAAA,CACE,GAAGF,EACH,GAAGG,EACJ,UAAWG,EAAG,wEAAyE,CACrF,kBAAmBP,CAAA,CACpB,EAED,SAAAM,EAAC,OAAA,CAAK,UAAU,sBAAuB,WAAS,KAAA,CAAM,CAAA,CAAA,EAEvDV,GAAU,UAAYA,GAAU,UAAU,OAAS,GAClDU,EAAC,MAAA,CACC,UAAWC,EACT,qDACA,6GACA,gBAAA,EAGD,SAAAX,GAAU,UAAU,IAAKY,GACxBF,EAAC,OAAA,CACC,cAAe,IAAMG,EAAaD,GAAO,MAAO,GAAI,WAAW,EAC/D,QAAUE,GAAU,CAClBA,EAAM,gBAAA,EACNA,EAAM,YAAY,gBAAA,EAElBX,EAAqBH,CAAQ,EAC7BE,EAAwBU,CAAK,CAC/B,EAEA,UAAWD,EACT,gIACA,CACE,6BAA8BV,GAAkB,QAAUW,GAAO,KAAA,CACnE,EAGD,SAAAA,EAAM,KAAA,EARFA,EAAM,KAAA,CAUd,CAAA,CAAA,CACH,EAEJ,CAEJ"}
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.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};
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.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,EAAQ,IAAKoB,GACZL,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"}
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"}