@foxford/ui 2.76.1 → 2.77.0-beta-ee6908c-20250807

package/components/TabList/TabList.mjs

@@ -1,2 +1,2 @@
-import{forwardRef,useRef,useImperativeHandle,cloneElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{TabListTabsContext,TabListPropsContext}from'../../shared/context/tabList.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{navigateHorizontalList,SELECTORS_FOCUSABLE}from'../../shared/utils/dom.mjs';import{focus}from'../../mixins/focus.mjs';import{TabListPanel}from'./TabListPanel.mjs';import{useTabListItems,useTabListAutoGroup,useTabList}from'./hooks.mjs';import{TabListMenuTab}from'./TabListMenuTab.mjs';import{SIZES,SIZES_SCROLL_CONTROL}from'./sizes.mjs';import{LAYOUTS,LAYOUTS_ADDON,LAYOUTS_DIVIDER}from'./layouts.mjs';import{Root,List,Container,TabsTrack,Floats,Control,ScrollFading,TrackScrollable,TabWrapper,Hidden,TabsHidden,Addon,DividerPositioned}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{TabListTab}from'../TabListTab/TabListTab.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const TabList=Object.assign(withMergedProps(forwardRef(((e,t)=>{const{size:o="m",layout:r="horizontal",gap:a=8,activationOnFocus:n=!1,tabsAutoGroup:s=!1,scrollControls:i=!1,scrollFading:l=!1,defaultActiveTab:c,activeTab:d,onActiveTabChange:u,variant:b,disabled:m,children:h,menuItems:f,addon:T,menuTabText:g,menuTabControl:L,scrollControlLeft:v,scrollControlRight:y,palette:p,sizeXXS:C,sizeXS:S,sizeS:j,sizeM:x,sizeL:k,sizeXL:A,layoutXXS:R,layoutXS:I,layoutS:O,layoutM:B,layoutL:z,layoutXL:D,...E}=e;const M={size:o,sizeXXS:C,sizeXS:S,sizeS:j,sizeM:x,sizeL:k,sizeXL:A};const H={layout:r,layoutXXS:R,layoutXS:I,layoutS:O,layoutM:B,layoutL:z,layoutXL:D};const X={...M,sizes:SIZES_SCROLL_CONTROL,icon:'chevronLeft',tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!w.current||!_.current)return;const e=Math.round(w.current.getBoundingClientRect().left+_.current.getBoundingClientRect().width);const t=Array.from(w.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().left+focus.padding)));const o=t.findIndex((t=>t>=e));[-1,0,1].includes(o)?w.current.scrollTo({top:0,left:0,behavior:'smooth'}):w.current.scrollBy({top:0,left:t[o-1]-e,behavior:'smooth'})}};const F={...M,sizes:SIZES_SCROLL_CONTROL,icon:'chevronRight',tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!w.current)return;const e=Math.round(w.current.getBoundingClientRect().right);const t=Array.from(w.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().right+focus.padding))).reverse();const o=t.findIndex((t=>t<=e));[-1,0,1].includes(o)?w.current.scrollTo({top:0,left:w.current.scrollWidth,behavior:'smooth'}):w.current.scrollBy({top:0,left:t[o-1]-e,behavior:'smooth'})}};const P=useRef(null);const w=useRef(null);const _=useRef(null);useImperativeHandle(t,(()=>P.current),[]);const K=useTabListItems(h,f);const U=useTabListAutoGroup({enabled:s,tabList:K.tabs});const N=useTabList({defaultActiveTab:c,activeTab:d,onActiveTabChange:u,tabList:s?K.tabs:K.combined});const{scrollThresholds:Y,setScrollThresholds:Z}=useScrollThresholds({enabled:!s,target:w});const W=s?U.groups.tabs:K.tabs;const q=s?U.groups.menuItems:K.menuItems;return jsxs(Root,{...E,...M,...H,layouts:LAYOUTS,palette:{backgroundColor:p.backgroundColor},ref:e=>{P.current=e,U.refs.root(e)},children:[jsxs(List,{role:"tablist","aria-orientation":"horizontal",onKeyDown:e=>{if(!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="tab"]')&&(keyboardKeys.Home.validate(e.key)||keyboardKeys.End.validate(e.key)||keyboardKeys.ArrowRight.validate(e.key)||keyboardKeys.ArrowLeft.validate(e.key))))return;const t=Array.from(e.currentTarget.querySelectorAll('[role="tab"]')).filter((e=>!e.closest('[aria-hidden="true"]')));t.length!==0&&(keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(keyboardKeys.ArrowRight.validate(e.key)||keyboardKeys.ArrowLeft.validate(e.key))&&(e.preventDefault(),navigateHorizontalList(e.key,document.activeElement,t,SELECTORS_FOCUSABLE)))},children:[jsxs(Container,{ref:U.refs.container,children:[jsxs(TabsTrack,{children:[!s&&(i||l)&&jsxs(Floats,{hidden:Y.left===!0||Y.left===null,children:[i&&jsx(Control,{ref:_,children:typeof v=='function'?v(X):jsx(IconButton,{...X})}),l&&jsx(ScrollFading,{})]}),jsx(TrackScrollable,{ref:e=>{w.current=e,U.refs.track(e)},tabIndex:-1,"data-ui-track-scrollable":!0,onFocus:e=>{if(!e.target.matches('[role="tab"]'))return;const t=e.currentTarget.getBoundingClientRect();const o=e.target.getBoundingClientRect();const r=Math.round(t.right);const a=Math.round(_.current&&Y.left===!1?t.left+_.current.getBoundingClientRect().width:t.left);const n=Math.round(o.right+focus.padding);const s=Math.round(o.left-focus.padding);n>r?e.currentTarget.scrollBy(n-r,0):s<a&&e.currentTarget.scrollBy(s-a,0)},onScroll:e=>{s||Z(e.currentTarget)},children:jsx(TabListTabsContext.Provider,{value:{...N,activationOnFocus:n},children:jsx(TabListPropsContext.Provider,{value:{...M,role:'tab',marginRight:a,variant:b,disabled:m,palette:{color:p.tabColor,colorHover:p.tabColorHover,colorActive:p.tabColorActive,colorDisabled:p.tabColorDisabled,colorActiveDisabled:p.tabColorActiveDisabled,backgroundColor:p.tabBackgroundColor,backgroundColorHover:p.tabBackgroundColorHover,backgroundColorActive:p.tabBackgroundColorActive,backgroundColorDisabled:p.tabBackgroundColorDisabled,backgroundColorActiveDisabled:p.tabBackgroundColorActiveDisabled}},children:s?W.map(((e,t)=>jsx(TabWrapper,{children:e},t))):W})})}),!s&&l&&jsx(Floats,{hidden:Y.right===!0||Y.right===null,after:!0,children:jsx(ScrollFading,{after:!0})})]}),!s&&i&&jsx(Control,{hidden:Y.right===!0||Y.right===null,children:typeof y=='function'?y(F):jsx(IconButton,{...F})}),q.length>0&&jsx(Control,{ref:e=>{U.refs.control(e)},children:jsx(TabListMenuTab,{...M,...N,role:"tab",variant:b,disabled:m,palette:p,menuItems:q,activationOnFocus:n,text:g,control:L})})]}),s&&jsx(Hidden,{"aria-hidden":!0,children:jsx(TabsHidden,{children:jsx(TabListPropsContext.Provider,{value:{...M,marginRight:a,variant:b},children:K.tabs.map(((e,t)=>jsx(TabWrapper,{ref:e=>{U.refs.tabHidden(t,e)},children:cloneElement(e,{ref:null,id:void 0,role:'none'})},t)))})})})]}),T&&jsx(Addon,{...H,layouts:LAYOUTS_ADDON,ref:e=>{U.refs.addon(e)},children:T}),b==='underlined'&&jsx(DividerPositioned,{...H,layouts:LAYOUTS_DIVIDER,color:p.dividerColor})]})})),{displayName:'TabList',sizes:SIZES}),{Tab:TabListTab,Panel:TabListPanel});export{TabList};
+import{forwardRef,useMemo,useRef,useImperativeHandle,cloneElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{TabListTabsContext,TabListPropsContext}from'../../shared/context/tabList.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{navigateHorizontalList,SELECTORS_FOCUSABLE}from'../../shared/utils/dom.mjs';import{focus}from'../../mixins/focus.mjs';import{TabListPanel}from'./TabListPanel.mjs';import{useTabListItems,useTabListAutoGroup,useTabList}from'./hooks.mjs';import{TabListMenuTab}from'./TabListMenuTab.mjs';import{SIZES,SIZES_SCROLL_CONTROL}from'./sizes.mjs';import{LAYOUTS,LAYOUTS_ADDON,LAYOUTS_DIVIDER}from'./layouts.mjs';import{Root,List,Container,TabsTrack,Floats,Control,ScrollFading,TrackScrollable,TabWrapper,Hidden,TabsHidden,Addon,DividerPositioned}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{TabListTab}from'../TabListTab/TabListTab.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const TabList=Object.assign(withMergedProps(forwardRef(((e,t)=>{const{size:o="m",layout:r="horizontal",gap:n=8,activationOnFocus:a=!1,tabsAutoGroup:s=!1,scrollControls:l=!1,scrollFading:i=!1,defaultActiveTab:c,activeTab:d,onActiveTabChange:u,variant:b,disabled:m,children:h,menuItems:f,addon:T,menuTabText:g,menuTabControl:L,scrollControlLeft:v,scrollControlRight:y,palette:p,sizeXXS:C,sizeXS:S,sizeS:j,sizeM:x,sizeL:k,sizeXL:A,layoutXXS:R,layoutXS:I,layoutS:O,layoutM:B,layoutL:M,layoutXL:z,...D}=e;const E=useMemo((()=>({size:o,sizeXXS:C,sizeXS:S,sizeS:j,sizeM:x,sizeL:k,sizeXL:A})),[o,C,S,j,x,k,A]);const H={layout:r,layoutXXS:R,layoutXS:I,layoutS:O,layoutM:B,layoutL:M,layoutXL:z};const X=useRef(null);const F=useRef(null);const P=useRef(null);useImperativeHandle(t,(()=>X.current),[]);const w=useTabListItems(h,f);const _=useTabListAutoGroup({enabled:s,tabList:w.tabs});const K=useTabList({defaultActiveTab:c,activeTab:d,onActiveTabChange:u,tabList:s?w.tabs:w.combined});const{scrollThresholds:U,setScrollThresholds:N}=useScrollThresholds({enabled:!s,target:F});const Y={...E,sizes:SIZES_SCROLL_CONTROL,icon:'chevronLeft',tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!F.current||!P.current)return;const e=Math.round(F.current.getBoundingClientRect().left+P.current.getBoundingClientRect().width);const t=Array.from(F.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().left+focus.padding)));const o=t.findIndex((t=>t>=e));[-1,0,1].includes(o)?F.current.scrollTo({top:0,left:0,behavior:'smooth'}):F.current.scrollBy({top:0,left:t[o-1]-e,behavior:'smooth'})}};const Z={...E,sizes:SIZES_SCROLL_CONTROL,icon:'chevronRight',tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!F.current)return;const e=Math.round(F.current.getBoundingClientRect().right);const t=Array.from(F.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().right+focus.padding))).reverse();const o=t.findIndex((t=>t<=e));[-1,0,1].includes(o)?F.current.scrollTo({top:0,left:F.current.scrollWidth,behavior:'smooth'}):F.current.scrollBy({top:0,left:t[o-1]-e,behavior:'smooth'})}};const W=useMemo((()=>({...K,activationOnFocus:a})),[K,a]);const q=useMemo((()=>({...E,role:'tab',marginRight:n,variant:b,disabled:m,palette:{color:p.tabColor,colorHover:p.tabColorHover,colorActive:p.tabColorActive,colorDisabled:p.tabColorDisabled,colorActiveDisabled:p.tabColorActiveDisabled,backgroundColor:p.tabBackgroundColor,backgroundColorHover:p.tabBackgroundColorHover,backgroundColorActive:p.tabBackgroundColorActive,backgroundColorDisabled:p.tabBackgroundColorDisabled,backgroundColorActiveDisabled:p.tabBackgroundColorActiveDisabled}})),[E,n,b,m,p]);const G=useMemo((()=>({...E,marginRight:n,variant:b})),[E,n,b]);const V=s?_.groups.tabs:w.tabs;const J=s?_.groups.menuItems:w.menuItems;return jsxs(Root,{...D,...E,...H,layouts:LAYOUTS,palette:{backgroundColor:p.backgroundColor},ref:e=>{X.current=e,_.refs.root(e)},children:[jsxs(List,{role:"tablist","aria-orientation":"horizontal",onKeyDown:e=>{if(!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="tab"]')&&(keyboardKeys.Home.validate(e.key)||keyboardKeys.End.validate(e.key)||keyboardKeys.ArrowRight.validate(e.key)||keyboardKeys.ArrowLeft.validate(e.key))))return;const t=Array.from(e.currentTarget.querySelectorAll('[role="tab"]')).filter((e=>!e.closest('[aria-hidden="true"]')));t.length!==0&&(keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(keyboardKeys.ArrowRight.validate(e.key)||keyboardKeys.ArrowLeft.validate(e.key))&&(e.preventDefault(),navigateHorizontalList(e.key,document.activeElement,t,SELECTORS_FOCUSABLE)))},children:[jsxs(Container,{ref:_.refs.container,children:[jsxs(TabsTrack,{children:[s||!l&&!i?null:jsxs(Floats,{hidden:U.left===!0||U.left===null,children:[l?jsx(Control,{ref:P,children:typeof v=='function'?v(Y):jsx(IconButton,{...Y})}):null,i?jsx(ScrollFading,{}):null]}),jsx(TrackScrollable,{ref:e=>{F.current=e,_.refs.track(e)},tabIndex:-1,"data-ui-track-scrollable":!0,onFocus:e=>{if(!e.target.matches('[role="tab"]'))return;const t=e.currentTarget.getBoundingClientRect();const o=e.target.getBoundingClientRect();const r=Math.round(t.right);const n=Math.round(P.current&&U.left===!1?t.left+P.current.getBoundingClientRect().width:t.left);const a=Math.round(o.right+focus.padding);const s=Math.round(o.left-focus.padding);a>r?e.currentTarget.scrollBy(a-r,0):s<n&&e.currentTarget.scrollBy(s-n,0)},onScroll:e=>{s||N(e.currentTarget)},children:jsx(TabListTabsContext.Provider,{value:W,children:jsx(TabListPropsContext.Provider,{value:q,children:s?V.map(((e,t)=>jsx(TabWrapper,{children:e},t))):V})})}),!s&&i?jsx(Floats,{hidden:U.right===!0||U.right===null,after:!0,children:jsx(ScrollFading,{after:!0})}):null]}),!s&&l?jsx(Control,{hidden:U.right===!0||U.right===null,children:typeof y=='function'?y(Z):jsx(IconButton,{...Z})}):null,J.length>0&&jsx(Control,{ref:e=>{_.refs.control(e)},children:jsx(TabListMenuTab,{...E,...K,role:"tab",variant:b,disabled:m,palette:p,menuItems:J,activationOnFocus:a,text:g,control:L})})]}),s?jsx(Hidden,{"aria-hidden":!0,children:jsx(TabsHidden,{children:jsx(TabListPropsContext.Provider,{value:G,children:w.tabs.map(((e,t)=>jsx(TabWrapper,{ref:e=>{_.refs.tabHidden(t,e)},children:cloneElement(e,{ref:null,id:void 0,role:'none'})},t)))})})}):null]}),T?jsx(Addon,{...H,layouts:LAYOUTS_ADDON,ref:e=>{_.refs.addon(e)},children:T}):null,b==='underlined'&&jsx(DividerPositioned,{...H,layouts:LAYOUTS_DIVIDER,color:p.dividerColor})]})})),{displayName:'TabList',sizes:SIZES}),{Tab:TabListTab,Panel:TabListPanel});export{TabList};
 //# sourceMappingURL=TabList.mjs.map

package/components/TabList/TabList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.mjs","sources":["../../../../src/components/TabList/TabList.tsx"],"sourcesContent":["import { forwardRef, useRef, useImperativeHandle, cloneElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { TabListTab } from 'components/TabListTab'\nimport { IconButton } from 'components/IconButton'\nimport type { IconButtonProps } from 'components/IconButton'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { keyboardKeys } from 'shared/constants'\nimport { navigateHorizontalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport { focus } from 'mixins/focus'\nimport { TabListPanel } from './TabListPanel'\nimport { useTabList, useTabListItems, useTabListAutoGroup } from './hooks'\nimport { TabListMenuTab } from './TabListMenuTab'\nimport { SIZES, SIZES_SCROLL_CONTROL } from './sizes'\nimport { LAYOUTS, LAYOUTS_DIVIDER, LAYOUTS_ADDON } from './layouts'\nimport type { TabListProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabList'\n\n/**\n *\n * Компонент для создания группы табов и ассоциированных с ними панелей с контентом.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nconst TabList: React.ForwardRefExoticComponent<TabListProps> & {\n  Tab: typeof TabListTab\n  Panel: typeof TabListPanel\n} = Object.assign(\n  withMergedProps<TabListProps, HTMLDivElement>(\n    forwardRef((props, forwardedRef) => {\n      const {\n        size = 'm',\n        layout = 'horizontal',\n        gap = 8,\n        activationOnFocus = false,\n        tabsAutoGroup = false,\n        scrollControls = false,\n        scrollFading = false,\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        variant,\n        disabled,\n        children,\n        menuItems: menuItemsProp,\n        addon,\n        menuTabText,\n        menuTabControl,\n        scrollControlLeft,\n        scrollControlRight,\n        palette,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n        ...restProps\n      } = props\n\n      const sizeProps = {\n        size,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n      }\n\n      const layoutProps = {\n        layout,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n      }\n\n      const scrollControlLeftProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: 'chevronLeft',\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current || !scrollControlRef.current) {\n            return\n          }\n\n          const trackLeft = Math.round(\n            tabsTrackRef.current.getBoundingClientRect().left + scrollControlRef.current.getBoundingClientRect().width\n          )\n          const tabsLeft = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]')).map((tab) =>\n            Math.round(tab.getBoundingClientRect().left + focus.padding)\n          )\n\n          const idx = tabsLeft.findIndex((tabLeft) => tabLeft >= trackLeft)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: 0, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsLeft[idx - 1] - trackLeft,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const scrollControlRightProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: 'chevronRight',\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current) {\n            return\n          }\n\n          const trackRight = Math.round(tabsTrackRef.current.getBoundingClientRect().right)\n          const tabsRight = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]'))\n            .map((tab) => Math.round(tab.getBoundingClientRect().right + focus.padding))\n            .reverse()\n\n          const idx = tabsRight.findIndex((tabRight) => tabRight <= trackRight)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: tabsTrackRef.current.scrollWidth, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsRight[idx - 1] - trackRight,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const rootRef = useRef<HTMLDivElement | null>(null)\n      const tabsTrackRef = useRef<HTMLDivElement | null>(null)\n      const scrollControlRef = useRef<HTMLDivElement | null>(null)\n\n      useImperativeHandle(forwardedRef, () => rootRef.current as HTMLDivElement, [])\n\n      const tabListItems = useTabListItems(children, menuItemsProp)\n\n      const autoGroupMode = useTabListAutoGroup({\n        enabled: tabsAutoGroup,\n        tabList: tabListItems.tabs,\n      })\n\n      const tabList = useTabList({\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        tabList: tabsAutoGroup ? tabListItems.tabs : tabListItems.combined,\n      })\n\n      const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n        enabled: !tabsAutoGroup,\n        target: tabsTrackRef,\n      })\n\n      const tabs = tabsAutoGroup ? autoGroupMode.groups.tabs : tabListItems.tabs\n      const menuItems = tabsAutoGroup ? autoGroupMode.groups.menuItems : tabListItems.menuItems\n\n      return (\n        <Styled.Root\n          {...restProps}\n          {...sizeProps}\n          {...layoutProps}\n          layouts={LAYOUTS}\n          palette={{\n            backgroundColor: palette.backgroundColor,\n          }}\n          ref={(node) => {\n            rootRef.current = node\n            autoGroupMode.refs.root(node)\n          }}\n        >\n          <Styled.List\n            role='tablist'\n            aria-orientation='horizontal'\n            onKeyDown={(evt) => {\n              if (\n                !(document.activeElement instanceof HTMLElement) ||\n                !document.activeElement.matches('[role=\"tab\"]') ||\n                (!keyboardKeys.Home.validate(evt.key) &&\n                  !keyboardKeys.End.validate(evt.key) &&\n                  !keyboardKeys.ArrowRight.validate(evt.key) &&\n                  !keyboardKeys.ArrowLeft.validate(evt.key))\n              ) {\n                return\n              }\n\n              const tabs = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n                (tab) => !tab.closest('[aria-hidden=\"true\"]')\n              )\n\n              if (tabs.length === 0) return\n\n              if (keyboardKeys.Home.validate(evt.key)) {\n                evt.preventDefault()\n                tabs[0].focus()\n              } else if (keyboardKeys.End.validate(evt.key)) {\n                evt.preventDefault()\n                tabs[tabs.length - 1].focus()\n              } else if (keyboardKeys.ArrowRight.validate(evt.key) || keyboardKeys.ArrowLeft.validate(evt.key)) {\n                evt.preventDefault()\n                navigateHorizontalList(evt.key, document.activeElement, tabs, SELECTORS_FOCUSABLE)\n              }\n            }}\n          >\n            <Styled.Container ref={autoGroupMode.refs.container}>\n              <Styled.TabsTrack>\n                {!tabsAutoGroup && (scrollControls || scrollFading) && (\n                  <Styled.Floats hidden={scrollThresholds.left === true || scrollThresholds.left === null}>\n                    {scrollControls && (\n                      <Styled.Control ref={scrollControlRef}>\n                        {typeof scrollControlLeft === 'function' ? (\n                          scrollControlLeft(scrollControlLeftProps)\n                        ) : (\n                          <IconButton {...scrollControlLeftProps} />\n                        )}\n                      </Styled.Control>\n                    )}\n                    {scrollFading && <Styled.ScrollFading />}\n                  </Styled.Floats>\n                )}\n                <Styled.TrackScrollable\n                  ref={(node) => {\n                    tabsTrackRef.current = node\n                    autoGroupMode.refs.track(node)\n                  }}\n                  tabIndex={-1}\n                  data-ui-track-scrollable\n                  onFocus={(evt) => {\n                    if (!evt.target.matches('[role=\"tab\"]')) {\n                      return\n                    }\n\n                    const trackRect = evt.currentTarget.getBoundingClientRect()\n                    const tabRect = evt.target.getBoundingClientRect()\n\n                    const trackRight = Math.round(trackRect.right)\n                    const trackLeft = Math.round(\n                      scrollControlRef.current && scrollThresholds.left === false\n                        ? trackRect.left + scrollControlRef.current.getBoundingClientRect().width\n                        : trackRect.left\n                    )\n\n                    const tabRight = Math.round(tabRect.right + focus.padding)\n                    const tabLeft = Math.round(tabRect.left - focus.padding)\n\n                    if (tabRight > trackRight) {\n                      evt.currentTarget.scrollBy(tabRight - trackRight, 0)\n                    } else if (tabLeft < trackLeft) {\n                      evt.currentTarget.scrollBy(tabLeft - trackLeft, 0)\n                    }\n                  }}\n                  onScroll={(evt) => {\n                    if (!tabsAutoGroup) {\n                      setScrollThresholds(evt.currentTarget)\n                    }\n                  }}\n                >\n                  <TabListTabsContext.Provider\n                    value={{\n                      ...tabList,\n                      activationOnFocus,\n                    }}\n                  >\n                    <TabListPropsContext.Provider\n                      value={{\n                        ...sizeProps,\n                        role: 'tab',\n                        marginRight: gap,\n                        variant,\n                        disabled,\n                        palette: {\n                          color: palette.tabColor,\n                          colorHover: palette.tabColorHover,\n                          colorActive: palette.tabColorActive,\n                          colorDisabled: palette.tabColorDisabled,\n                          colorActiveDisabled: palette.tabColorActiveDisabled,\n                          backgroundColor: palette.tabBackgroundColor,\n                          backgroundColorHover: palette.tabBackgroundColorHover,\n                          backgroundColorActive: palette.tabBackgroundColorActive,\n                          backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n                          backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n                        },\n                      }}\n                    >\n                      {tabsAutoGroup\n                        ? tabs.map((tab, idx) => <Styled.TabWrapper key={idx}>{tab}</Styled.TabWrapper>)\n                        : tabs}\n                    </TabListPropsContext.Provider>\n                  </TabListTabsContext.Provider>\n                </Styled.TrackScrollable>\n                {!tabsAutoGroup && scrollFading && (\n                  <Styled.Floats hidden={scrollThresholds.right === true || scrollThresholds.right === null} after>\n                    <Styled.ScrollFading after />\n                  </Styled.Floats>\n                )}\n              </Styled.TabsTrack>\n              {!tabsAutoGroup && scrollControls && (\n                <Styled.Control hidden={scrollThresholds.right === true || scrollThresholds.right === null}>\n                  {typeof scrollControlRight === 'function' ? (\n                    scrollControlRight(scrollControlRightProps)\n                  ) : (\n                    <IconButton {...scrollControlRightProps} />\n                  )}\n                </Styled.Control>\n              )}\n              {menuItems.length > 0 && (\n                <Styled.Control\n                  ref={(node) => {\n                    autoGroupMode.refs.control(node)\n                  }}\n                >\n                  <TabListMenuTab\n                    {...sizeProps}\n                    {...tabList}\n                    role='tab'\n                    variant={variant}\n                    disabled={disabled}\n                    palette={palette}\n                    menuItems={menuItems}\n                    activationOnFocus={activationOnFocus}\n                    text={menuTabText}\n                    control={menuTabControl}\n                  />\n                </Styled.Control>\n              )}\n            </Styled.Container>\n            {tabsAutoGroup && (\n              <Styled.Hidden aria-hidden>\n                <Styled.TabsHidden>\n                  <TabListPropsContext.Provider value={{ ...sizeProps, marginRight: gap, variant }}>\n                    {tabListItems.tabs.map((tab, idx) => (\n                      <Styled.TabWrapper\n                        key={idx}\n                        ref={(node) => {\n                          autoGroupMode.refs.tabHidden(idx, node)\n                        }}\n                      >\n                        {cloneElement(tab, { ref: null, id: undefined, role: 'none' })}\n                      </Styled.TabWrapper>\n                    ))}\n                  </TabListPropsContext.Provider>\n                </Styled.TabsHidden>\n              </Styled.Hidden>\n            )}\n          </Styled.List>\n          {addon && (\n            <Styled.Addon\n              {...layoutProps}\n              layouts={LAYOUTS_ADDON}\n              ref={(node) => {\n                autoGroupMode.refs.addon(node)\n              }}\n            >\n              {addon}\n            </Styled.Addon>\n          )}\n          {variant === 'underlined' && (\n            <Styled.DividerPositioned {...layoutProps} layouts={LAYOUTS_DIVIDER} color={palette.dividerColor} />\n          )}\n        </Styled.Root>\n      )\n    }),\n    {\n      displayName: COMPONENT_NAME,\n      sizes: SIZES,\n    }\n  ),\n  {\n    Tab: TabListTab,\n    Panel: TabListPanel,\n  }\n)\n\nexport { TabList }\n"],"names":["TabList","Object","assign","withMergedProps","forwardRef","props","forwardedRef","size","layout","gap","activationOnFocus","tabsAutoGroup","scrollControls","scrollFading","defaultActiveTab","activeTab","onActiveTabChange","variant","disabled","children","menuItems","menuItemsProp","addon","menuTabText","menuTabControl","scrollControlLeft","scrollControlRight","palette","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","restProps","sizeProps","layoutProps","scrollControlLeftProps","sizes","SIZES_SCROLL_CONTROL","icon","tabIndex","onFocus","evt","currentTarget","blur","onClick","tabsTrackRef","current","scrollControlRef","trackLeft","Math","round","getBoundingClientRect","left","width","tabsLeft","Array","from","querySelectorAll","map","tab","focus","padding","idx","findIndex","tabLeft","includes","scrollTo","top","behavior","scrollBy","scrollControlRightProps","trackRight","right","tabsRight","reverse","tabRight","scrollWidth","rootRef","useRef","useImperativeHandle","tabListItems","useTabListItems","autoGroupMode","useTabListAutoGroup","enabled","tabList","tabs","useTabList","combined","scrollThresholds","setScrollThresholds","useScrollThresholds","target","groups","_jsxs","Styled","layouts","LAYOUTS","backgroundColor","ref","node","refs","root","role","onKeyDown","document","activeElement","HTMLElement","matches","keyboardKeys","Home","validate","key","End","ArrowRight","ArrowLeft","filter","closest","length","preventDefault","navigateHorizontalList","SELECTORS_FOCUSABLE","container","hidden","_jsx","IconButton","track","trackRect","tabRect","onScroll","TabListTabsContext","Provider","value","TabListPropsContext","marginRight","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","after","control","TabListMenuTab","text","tabHidden","cloneElement","id","undefined","LAYOUTS_ADDON","LAYOUTS_DIVIDER","dividerColor","displayName","SIZES","Tab","TabListTab","Panel","TabListPanel"],"mappings":"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"}
+{"version":3,"file":"TabList.mjs","sources":["../../../../src/components/TabList/TabList.tsx"],"sourcesContent":["import { forwardRef, useRef, useImperativeHandle, cloneElement, useMemo } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { TabListTab } from 'components/TabListTab'\nimport { IconButton } from 'components/IconButton'\nimport type { IconButtonProps } from 'components/IconButton'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { keyboardKeys } from 'shared/constants'\nimport { navigateHorizontalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport { focus } from 'mixins/focus'\nimport { TabListPanel } from './TabListPanel'\nimport { useTabList, useTabListItems, useTabListAutoGroup } from './hooks'\nimport { TabListMenuTab } from './TabListMenuTab'\nimport { SIZES, SIZES_SCROLL_CONTROL } from './sizes'\nimport { LAYOUTS, LAYOUTS_DIVIDER, LAYOUTS_ADDON } from './layouts'\nimport type { TabListProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabList'\n\n/**\n *\n * Компонент для создания группы табов и ассоциированных с ними панелей с контентом.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nconst TabList: React.ForwardRefExoticComponent<TabListProps> & {\n  Tab: typeof TabListTab\n  Panel: typeof TabListPanel\n} = Object.assign(\n  withMergedProps<TabListProps, HTMLDivElement>(\n    forwardRef<HTMLDivElement, MergedProps<TabListProps>>((props, forwardedRef) => {\n      const {\n        size = 'm',\n        layout = 'horizontal',\n        gap = 8,\n        activationOnFocus = false,\n        tabsAutoGroup = false,\n        scrollControls = false,\n        scrollFading = false,\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        variant,\n        disabled,\n        children,\n        menuItems: menuItemsProp,\n        addon,\n        menuTabText,\n        menuTabControl,\n        scrollControlLeft,\n        scrollControlRight,\n        palette,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n        ...restProps\n      } = props\n\n      const sizeProps = useMemo(\n        () => ({ size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL }),\n        [size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL]\n      )\n\n      const layoutProps = {\n        layout,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n      }\n\n      const rootRef = useRef<HTMLDivElement | null>(null)\n      const tabsTrackRef = useRef<HTMLDivElement | null>(null)\n      const scrollControlRef = useRef<HTMLDivElement | null>(null)\n\n      useImperativeHandle(forwardedRef, () => rootRef.current as HTMLDivElement, [])\n\n      const tabListItems = useTabListItems(children, menuItemsProp)\n\n      const autoGroupMode = useTabListAutoGroup({\n        enabled: tabsAutoGroup,\n        tabList: tabListItems.tabs,\n      })\n\n      const tabList = useTabList({\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        tabList: tabsAutoGroup ? tabListItems.tabs : tabListItems.combined,\n      })\n\n      const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n        enabled: !tabsAutoGroup,\n        target: tabsTrackRef,\n      })\n\n      const scrollControlLeftProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: 'chevronLeft',\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current || !scrollControlRef.current) {\n            return\n          }\n\n          const trackLeft = Math.round(\n            tabsTrackRef.current.getBoundingClientRect().left + scrollControlRef.current.getBoundingClientRect().width\n          )\n          const tabsLeft = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]')).map((tab) =>\n            Math.round(tab.getBoundingClientRect().left + focus.padding)\n          )\n\n          const idx = tabsLeft.findIndex((tabLeft) => tabLeft >= trackLeft)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: 0, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsLeft[idx - 1] - trackLeft,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const scrollControlRightProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: 'chevronRight',\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current) {\n            return\n          }\n\n          const trackRight = Math.round(tabsTrackRef.current.getBoundingClientRect().right)\n          const tabsRight = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]'))\n            .map((tab) => Math.round(tab.getBoundingClientRect().right + focus.padding))\n            .reverse()\n\n          const idx = tabsRight.findIndex((tabRight) => tabRight <= trackRight)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: tabsTrackRef.current.scrollWidth, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsRight[idx - 1] - trackRight,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const controlsContextProps = useMemo(() => ({ ...tabList, activationOnFocus }), [tabList, activationOnFocus])\n\n      const tabsContextProps = useMemo(\n        () => ({\n          ...sizeProps,\n          role: 'tab',\n          marginRight: gap,\n          variant,\n          disabled,\n          palette: {\n            color: palette.tabColor,\n            colorHover: palette.tabColorHover,\n            colorActive: palette.tabColorActive,\n            colorDisabled: palette.tabColorDisabled,\n            colorActiveDisabled: palette.tabColorActiveDisabled,\n            backgroundColor: palette.tabBackgroundColor,\n            backgroundColorHover: palette.tabBackgroundColorHover,\n            backgroundColorActive: palette.tabBackgroundColorActive,\n            backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n            backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n          },\n        }),\n        [sizeProps, gap, variant, disabled, palette]\n      )\n\n      const hiddenTabsContextProps = useMemo(\n        () => ({ ...sizeProps, marginRight: gap, variant }),\n        [sizeProps, gap, variant]\n      )\n\n      const tabs = tabsAutoGroup ? autoGroupMode.groups.tabs : tabListItems.tabs\n      const menuItems = tabsAutoGroup ? autoGroupMode.groups.menuItems : tabListItems.menuItems\n\n      return (\n        <Styled.Root\n          {...restProps}\n          {...sizeProps}\n          {...layoutProps}\n          layouts={LAYOUTS}\n          palette={{\n            backgroundColor: palette.backgroundColor,\n          }}\n          ref={(node) => {\n            rootRef.current = node\n            autoGroupMode.refs.root(node)\n          }}\n        >\n          <Styled.List\n            role='tablist'\n            aria-orientation='horizontal'\n            onKeyDown={(evt) => {\n              if (\n                !(document.activeElement instanceof HTMLElement) ||\n                !document.activeElement.matches('[role=\"tab\"]') ||\n                (!keyboardKeys.Home.validate(evt.key) &&\n                  !keyboardKeys.End.validate(evt.key) &&\n                  !keyboardKeys.ArrowRight.validate(evt.key) &&\n                  !keyboardKeys.ArrowLeft.validate(evt.key))\n              ) {\n                return\n              }\n\n              const tabListTabs = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n                (tab) => !tab.closest('[aria-hidden=\"true\"]')\n              )\n\n              if (tabListTabs.length === 0) return\n\n              if (keyboardKeys.Home.validate(evt.key)) {\n                evt.preventDefault()\n                tabListTabs[0].focus()\n              } else if (keyboardKeys.End.validate(evt.key)) {\n                evt.preventDefault()\n                tabListTabs[tabListTabs.length - 1].focus()\n              } else if (keyboardKeys.ArrowRight.validate(evt.key) || keyboardKeys.ArrowLeft.validate(evt.key)) {\n                evt.preventDefault()\n                navigateHorizontalList(evt.key, document.activeElement, tabListTabs, SELECTORS_FOCUSABLE)\n              }\n            }}\n          >\n            <Styled.Container ref={autoGroupMode.refs.container}>\n              <Styled.TabsTrack>\n                {!tabsAutoGroup && (scrollControls || scrollFading) ? (\n                  <Styled.Floats hidden={scrollThresholds.left === true || scrollThresholds.left === null}>\n                    {scrollControls ? (\n                      <Styled.Control ref={scrollControlRef}>\n                        {typeof scrollControlLeft === 'function' ? (\n                          scrollControlLeft(scrollControlLeftProps)\n                        ) : (\n                          <IconButton {...scrollControlLeftProps} />\n                        )}\n                      </Styled.Control>\n                    ) : null}\n                    {scrollFading ? <Styled.ScrollFading /> : null}\n                  </Styled.Floats>\n                ) : null}\n                <Styled.TrackScrollable\n                  ref={(node) => {\n                    tabsTrackRef.current = node\n                    autoGroupMode.refs.track(node)\n                  }}\n                  tabIndex={-1}\n                  data-ui-track-scrollable\n                  onFocus={(evt) => {\n                    if (!evt.target.matches('[role=\"tab\"]')) {\n                      return\n                    }\n\n                    const trackRect = evt.currentTarget.getBoundingClientRect()\n                    const tabRect = evt.target.getBoundingClientRect()\n\n                    const trackRight = Math.round(trackRect.right)\n                    const trackLeft = Math.round(\n                      scrollControlRef.current && scrollThresholds.left === false\n                        ? trackRect.left + scrollControlRef.current.getBoundingClientRect().width\n                        : trackRect.left\n                    )\n\n                    const tabRight = Math.round(tabRect.right + focus.padding)\n                    const tabLeft = Math.round(tabRect.left - focus.padding)\n\n                    if (tabRight > trackRight) {\n                      evt.currentTarget.scrollBy(tabRight - trackRight, 0)\n                    } else if (tabLeft < trackLeft) {\n                      evt.currentTarget.scrollBy(tabLeft - trackLeft, 0)\n                    }\n                  }}\n                  onScroll={(evt) => {\n                    if (!tabsAutoGroup) {\n                      setScrollThresholds(evt.currentTarget)\n                    }\n                  }}\n                >\n                  <TabListTabsContext.Provider value={controlsContextProps}>\n                    <TabListPropsContext.Provider value={tabsContextProps}>\n                      {tabsAutoGroup\n                        ? tabs.map((tab, idx) => <Styled.TabWrapper key={idx}>{tab}</Styled.TabWrapper>)\n                        : tabs}\n                    </TabListPropsContext.Provider>\n                  </TabListTabsContext.Provider>\n                </Styled.TrackScrollable>\n                {!tabsAutoGroup && scrollFading ? (\n                  <Styled.Floats hidden={scrollThresholds.right === true || scrollThresholds.right === null} after>\n                    <Styled.ScrollFading after />\n                  </Styled.Floats>\n                ) : null}\n              </Styled.TabsTrack>\n              {!tabsAutoGroup && scrollControls ? (\n                <Styled.Control hidden={scrollThresholds.right === true || scrollThresholds.right === null}>\n                  {typeof scrollControlRight === 'function' ? (\n                    scrollControlRight(scrollControlRightProps)\n                  ) : (\n                    <IconButton {...scrollControlRightProps} />\n                  )}\n                </Styled.Control>\n              ) : null}\n              {menuItems.length > 0 && (\n                <Styled.Control\n                  ref={(node) => {\n                    autoGroupMode.refs.control(node)\n                  }}\n                >\n                  <TabListMenuTab\n                    {...sizeProps}\n                    {...tabList}\n                    role='tab'\n                    variant={variant}\n                    disabled={disabled}\n                    palette={palette}\n                    menuItems={menuItems}\n                    activationOnFocus={activationOnFocus}\n                    text={menuTabText}\n                    control={menuTabControl}\n                  />\n                </Styled.Control>\n              )}\n            </Styled.Container>\n            {tabsAutoGroup ? (\n              <Styled.Hidden aria-hidden>\n                <Styled.TabsHidden>\n                  <TabListPropsContext.Provider value={hiddenTabsContextProps}>\n                    {tabListItems.tabs.map((tab, idx) => (\n                      <Styled.TabWrapper\n                        key={idx}\n                        ref={(node) => {\n                          autoGroupMode.refs.tabHidden(idx, node)\n                        }}\n                      >\n                        {cloneElement(tab, { ref: null, id: undefined, role: 'none' })}\n                      </Styled.TabWrapper>\n                    ))}\n                  </TabListPropsContext.Provider>\n                </Styled.TabsHidden>\n              </Styled.Hidden>\n            ) : null}\n          </Styled.List>\n          {addon ? (\n            <Styled.Addon\n              {...layoutProps}\n              layouts={LAYOUTS_ADDON}\n              ref={(node) => {\n                autoGroupMode.refs.addon(node)\n              }}\n            >\n              {addon}\n            </Styled.Addon>\n          ) : null}\n          {variant === 'underlined' && (\n            <Styled.DividerPositioned {...layoutProps} layouts={LAYOUTS_DIVIDER} color={palette.dividerColor} />\n          )}\n        </Styled.Root>\n      )\n    }),\n    {\n      displayName: COMPONENT_NAME,\n      sizes: SIZES,\n    }\n  ),\n  {\n    Tab: TabListTab,\n    Panel: TabListPanel,\n  }\n)\n\nexport { TabList }\n"],"names":["TabList","Object","assign","withMergedProps","forwardRef","props","forwardedRef","size","layout","gap","activationOnFocus","tabsAutoGroup","scrollControls","scrollFading","defaultActiveTab","activeTab","onActiveTabChange","variant","disabled","children","menuItems","menuItemsProp","addon","menuTabText","menuTabControl","scrollControlLeft","scrollControlRight","palette","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","restProps","sizeProps","useMemo","layoutProps","rootRef","useRef","tabsTrackRef","scrollControlRef","useImperativeHandle","current","tabListItems","useTabListItems","autoGroupMode","useTabListAutoGroup","enabled","tabList","tabs","useTabList","combined","scrollThresholds","setScrollThresholds","useScrollThresholds","target","scrollControlLeftProps","sizes","SIZES_SCROLL_CONTROL","icon","tabIndex","onFocus","evt","currentTarget","blur","onClick","trackLeft","Math","round","getBoundingClientRect","left","width","tabsLeft","Array","from","querySelectorAll","map","tab","focus","padding","idx","findIndex","tabLeft","includes","scrollTo","top","behavior","scrollBy","scrollControlRightProps","trackRight","right","tabsRight","reverse","tabRight","scrollWidth","controlsContextProps","tabsContextProps","role","marginRight","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","backgroundColor","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","hiddenTabsContextProps","groups","_jsxs","Styled","layouts","LAYOUTS","ref","node","refs","root","onKeyDown","document","activeElement","HTMLElement","matches","keyboardKeys","Home","validate","key","End","ArrowRight","ArrowLeft","tabListTabs","filter","closest","length","preventDefault","navigateHorizontalList","SELECTORS_FOCUSABLE","container","hidden","_jsx","IconButton","track","trackRect","tabRect","onScroll","TabListTabsContext","Provider","value","TabListPropsContext","after","control","TabListMenuTab","text","tabHidden","cloneElement","id","undefined","LAYOUTS_ADDON","LAYOUTS_DIVIDER","dividerColor","displayName","SIZES","Tab","TabListTab","Panel","TabListPanel"],"mappings":"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"}

package/components/TabList/TabListMenuTab.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var Floater=require('react-floater');var nanoid=require('nanoid');var tabList=require('../../shared/context/tabList.js');var useMergedPalette=require('../../hooks/useMergedPalette.js');var useClickOutside=require('../../hooks/useClickOutside.js');var constants=require('../../shared/constants.js');var useFloaterPortal=require('../../hooks/useFloaterPortal.js');var dom=require('../../shared/utils/dom.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var TabListTab=require('../TabListTab/TabListTab.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var Floater__default=_interopDefault(Floater);exports.TabListMenuTab=e=>{const{role:t="tab",type:o="button",variant:a="clear",size:r="m",sizeXXS:s,sizeXS:n,sizeS:i,sizeM:l,sizeL:c,sizeXL:u,disabled:d,text:m,control:b,menuItems:y,activeTab:p,firstTab:v,activationOnFocus:f,getTabIndex:k,onActiveTabChange:T}=e;const h={size:r,sizeXXS:s,sizeXS:n,sizeS:i,sizeM:l,sizeL:c,sizeXL:u};const C=useMergedPalette.useMergedPalette(e);const g=React.useRef(null);const[x,L]=React.useState(null);const R=React.useRef(null);const j=useFloaterPortal.useFloaterPortal();const[A,D]=React.useState(!1);const E=React.useMemo((()=>nanoid.nanoid()),[]);const K=React.useMemo((()=>[g,x]),[x]);const M=React.useCallback((()=>{D(!1)}),[]);const S=Boolean(y.find((e=>React.isValidElement(e)&&typeof e.props=='object'&&e.props!==null&&e.props.id===p)));const q={...h,role:t,type:o,variant:a,'aria-haspopup':'menu',id:E,'aria-selected':S,active:S,tabIndex:S||!v?0:-1,disabled:d,text:m,addonRight:e=>jsxRuntime.jsx(style.IconAnimated,{...e.iconProps,rotate:A,name:"chevronDown"}),palette:{color:C.tabColor,colorHover:C.tabColorHover,colorActive:C.tabColorActive,colorDisabled:C.tabColorDisabled,colorActiveDisabled:C.tabColorActiveDisabled,backgroundColor:C.tabBackgroundColor,backgroundColorHover:C.tabBackgroundColorHover,backgroundColorActive:C.tabBackgroundColorActive,backgroundColorDisabled:C.tabBackgroundColorDisabled,backgroundColorActiveDisabled:C.tabBackgroundColorActiveDisabled},onClick:()=>{D((e=>!e))},onKeyDown:e=>{A&&(constants.keyboardKeys.Esc.validate(e.key)||constants.keyboardKeys.Tab.validate(e.key))?(e.preventDefault(),D(!1)):!A&&(constants.keyboardKeys.F10.validate(e.key)&&e.shiftKey||constants.keyboardKeys.ArrowDown.validate(e.key))&&(e.preventDefault(),D(!0))}};return useClickOutside.useClickOutside(K,M,{enabled:A,event:'mousedown'}),React.useEffect((()=>(R.current=setTimeout((()=>{if(!x)return;const e=Array.from(x.querySelectorAll('[role="menuitem"]')).filter((e=>e.matches(dom.SELECTORS_FOCUSABLE)));const t=e.find((e=>e.matches('[aria-selected="true"]')));t?t.focus():e[0]&&e[0].focus(),R.current=null}),100),()=>{R.current&&clearTimeout(R.current)})),[x]),j?jsxRuntime.jsx(Floater__default.default,{open:A,portalElement:j,placement:"bottom-end",offset:8,hideArrow:!0,styles:{options:{zIndex:void 0},wrapper:{cursor:d?'not-allowed':'pointer'},floater:{filter:'none',opacity:1,transitionDuration:'10ms'}},getPopper:e=>{e.state.elements.reference instanceof HTMLElement&&(g.current=e.state.elements.reference)},modifiers:{removeRoles:{name:'removeRoles',enabled:!0,phase:'beforeWrite',effect:({state:e})=>{if(e.elements.popper instanceof HTMLElement){const t=e.elements.popper.querySelector('[role="tooltip"]');t&&t.removeAttribute('role')}}},minWidth:{name:'minWidth',enabled:!0,phase:'beforeWrite',requires:['computeStyles'],fn:({state:e})=>{e.styles.popper.minWidth=`${e.rects.reference.width}px`},effect:({state:e})=>{e.elements.popper instanceof HTMLElement&&e.elements.reference instanceof HTMLElement&&(e.elements.popper.style.display='flex',e.elements.popper.style.flexDirection='column',e.elements.popper.style.alignItems='stretch',e.elements.popper.style.minWidth=`${e.elements.reference.offsetWidth}px`)}}},component:()=>jsxRuntime.jsx(style.Menu,{role:"menu","aria-labelledby":E,ref:L,palette:{backgroundColor:C.menuBackgroundColor},onClick:e=>{e.target instanceof HTMLElement&&e.target.closest('[role="menuitem"]')&&(D(!1),setTimeout((()=>{g.current?.focus()}),100))},onKeyDown:e=>{if(e.stopPropagation(),!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="menuitem"]')&&(constants.keyboardKeys.Esc.validate(e.key)||constants.keyboardKeys.Tab.validate(e.key)||constants.keyboardKeys.Home.validate(e.key)||constants.keyboardKeys.End.validate(e.key)||constants.keyboardKeys.ArrowDown.validate(e.key)||constants.keyboardKeys.ArrowUp.validate(e.key))))return;if(constants.keyboardKeys.Esc.validate(e.key)||constants.keyboardKeys.Tab.validate(e.key))return e.preventDefault(),D(!1),void setTimeout((()=>{g.current?.focus()}),100);const t=Array.from(e.currentTarget.querySelectorAll('[role="menuitem"]'));t.length!==0&&(constants.keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):constants.keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(constants.keyboardKeys.ArrowDown.validate(e.key)||constants.keyboardKeys.ArrowUp.validate(e.key))&&(e.preventDefault(),dom.navigateVerticalList(e.key,document.activeElement,t,dom.SELECTORS_FOCUSABLE)))},children:jsxRuntime.jsx(tabList.TabListTabsContext.Provider,{value:{activationOnFocus:f,activeTab:p,onActiveTabChange:T,getTabIndex:k},children:jsxRuntime.jsx(tabList.TabListPropsContext.Provider,{value:{...h,disabled:d,role:'menuitem',variant:'filled'},children:React.Children.map(y,(e=>jsxRuntime.jsx(style.MenuItem,{role:"none",children:e})))})})}),children:typeof b=='function'?b(q):jsxRuntime.jsx(TabListTab.TabListTab,{...q})}):null};
+'use strict';var React=require('react');var Floater=require('react-floater');var nanoid=require('nanoid');var tabList=require('../../shared/context/tabList.js');var useMergedPalette=require('../../hooks/useMergedPalette.js');var useClickOutside=require('../../hooks/useClickOutside.js');var constants=require('../../shared/constants.js');var useFloaterPortal=require('../../hooks/useFloaterPortal.js');var dom=require('../../shared/utils/dom.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var TabListTab=require('../TabListTab/TabListTab.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var Floater__default=_interopDefault(Floater);exports.TabListMenuTab=e=>{const{role:t="tab",type:o="button",variant:a="clear",size:r="m",sizeXXS:s,sizeXS:n,sizeS:i,sizeM:l,sizeL:c,sizeXL:u,disabled:d,text:m,control:b,menuItems:y,activeTab:p,firstTab:v,activationOnFocus:f,getTabIndex:k,onActiveTabChange:T}=e;const h=React.useMemo((()=>({size:r,sizeXXS:s,sizeXS:n,sizeS:i,sizeM:l,sizeL:c,sizeXL:u})),[r,s,n,i,l,c,u]);const C=useMergedPalette.useMergedPalette(e);const g=React.useRef(null);const[x,R]=React.useState(null);const L=React.useRef(null);const j=useFloaterPortal.useFloaterPortal();const[A,D]=React.useState(!1);const E=React.useMemo((()=>nanoid.nanoid()),[]);const M=React.useMemo((()=>[g,x]),[x]);const K=React.useCallback((()=>{D(!1)}),[]);const S=Boolean(y.find((e=>React.isValidElement(e)&&typeof e.props=='object'&&e.props!==null&&e.props.id===p)));const q={...h,role:t,type:o,variant:a,'aria-haspopup':'menu',id:E,'aria-selected':S,active:S,tabIndex:S||!v?0:-1,disabled:d,text:m,addonRight:e=>jsxRuntime.jsx(style.IconAnimated,{...e.iconProps,rotate:A,name:"chevronDown",preset:"brand"}),palette:{color:C.tabColor,colorHover:C.tabColorHover,colorActive:C.tabColorActive,colorDisabled:C.tabColorDisabled,colorActiveDisabled:C.tabColorActiveDisabled,backgroundColor:C.tabBackgroundColor,backgroundColorHover:C.tabBackgroundColorHover,backgroundColorActive:C.tabBackgroundColorActive,backgroundColorDisabled:C.tabBackgroundColorDisabled,backgroundColorActiveDisabled:C.tabBackgroundColorActiveDisabled},onClick:()=>{D((e=>!e))},onKeyDown:e=>{A&&(constants.keyboardKeys.Esc.validate(e.key)||constants.keyboardKeys.Tab.validate(e.key))?(e.preventDefault(),D(!1)):!A&&(constants.keyboardKeys.F10.validate(e.key)&&e.shiftKey||constants.keyboardKeys.ArrowDown.validate(e.key))&&(e.preventDefault(),D(!0))}};const w=React.useMemo((()=>({activationOnFocus:f,activeTab:p,onActiveTabChange:T,getTabIndex:k})),[f,p,T,k]);const z=React.useMemo((()=>({...h,disabled:d,role:'menuitem',variant:'filled'})),[h,d]);return useClickOutside.useClickOutside(M,K,{enabled:A,event:'mousedown'}),React.useEffect((()=>(L.current=setTimeout((()=>{if(!x)return;const e=Array.from(x.querySelectorAll('[role="menuitem"]')).filter((e=>e.matches(dom.SELECTORS_FOCUSABLE)));const t=e.find((e=>e.matches('[aria-selected="true"]')));t?t.focus():e[0]&&e[0].focus(),L.current=null}),100),()=>{L.current&&clearTimeout(L.current)})),[x]),j?jsxRuntime.jsx(Floater__default.default,{open:A,portalElement:j,placement:"bottom-end",offset:8,hideArrow:!0,styles:{options:{zIndex:void 0},wrapper:{cursor:d?'not-allowed':'pointer'},floater:{filter:'none',opacity:1,transitionDuration:'10ms'}},getPopper:e=>{e.state.elements.reference instanceof HTMLElement&&(g.current=e.state.elements.reference)},modifiers:{removeRoles:{name:'removeRoles',enabled:!0,phase:'beforeWrite',effect:({state:e})=>{if(e.elements.popper instanceof HTMLElement){const t=e.elements.popper.querySelector('[role="tooltip"]');t&&t.removeAttribute('role')}}},minWidth:{name:'minWidth',enabled:!0,phase:'beforeWrite',requires:['computeStyles'],fn:({state:e})=>{e.styles.popper.minWidth=`${e.rects.reference.width}px`},effect:({state:e})=>{e.elements.popper instanceof HTMLElement&&e.elements.reference instanceof HTMLElement&&(e.elements.popper.style.display='flex',e.elements.popper.style.flexDirection='column',e.elements.popper.style.alignItems='stretch',e.elements.popper.style.minWidth=`${e.elements.reference.offsetWidth}px`)}}},component:()=>jsxRuntime.jsx(style.Menu,{role:"menu","aria-labelledby":E,ref:R,palette:{backgroundColor:C.menuBackgroundColor},onClick:e=>{e.target instanceof HTMLElement&&e.target.closest('[role="menuitem"]')&&(D(!1),setTimeout((()=>{g.current?.focus()}),100))},onKeyDown:e=>{if(e.stopPropagation(),!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="menuitem"]')&&(constants.keyboardKeys.Esc.validate(e.key)||constants.keyboardKeys.Tab.validate(e.key)||constants.keyboardKeys.Home.validate(e.key)||constants.keyboardKeys.End.validate(e.key)||constants.keyboardKeys.ArrowDown.validate(e.key)||constants.keyboardKeys.ArrowUp.validate(e.key))))return;if(constants.keyboardKeys.Esc.validate(e.key)||constants.keyboardKeys.Tab.validate(e.key))return e.preventDefault(),D(!1),void setTimeout((()=>{g.current?.focus()}),100);const t=Array.from(e.currentTarget.querySelectorAll('[role="menuitem"]'));t.length!==0&&(constants.keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):constants.keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(constants.keyboardKeys.ArrowDown.validate(e.key)||constants.keyboardKeys.ArrowUp.validate(e.key))&&(e.preventDefault(),dom.navigateVerticalList(e.key,document.activeElement,t,dom.SELECTORS_FOCUSABLE)))},children:jsxRuntime.jsx(tabList.TabListTabsContext.Provider,{value:w,children:jsxRuntime.jsx(tabList.TabListPropsContext.Provider,{value:z,children:React.Children.map(y,(e=>jsxRuntime.jsx(style.MenuItem,{role:"none",children:e})))})})}),children:typeof b=='function'?b(q):jsxRuntime.jsx(TabListTab.TabListTab,{...q})}):null};
 //# sourceMappingURL=TabListMenuTab.js.map

package/components/TabList/TabListMenuTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabListMenuTab.js","sources":["../../../../src/components/TabList/TabListMenuTab.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport { useState, useRef, useEffect, useMemo, useCallback, Children, isValidElement } from 'react'\nimport Floater from 'react-floater'\nimport { nanoid } from 'nanoid'\nimport type { Nullable } from 'shared/types'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { TabListTab } from 'components/TabListTab'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport { useClickOutside } from 'hooks/useClickOutside'\nimport { keyboardKeys } from 'shared/constants'\nimport { useFloaterPortal } from 'hooks/useFloaterPortal'\nimport { navigateVerticalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport type { TabListTabProps } from 'components/TabListTab'\nimport * as Styled from './style'\nimport type { TabListMenuTabProps } from './types'\n\nconst TabListMenuTab = (props: TabListMenuTabProps) => {\n  const {\n    role = 'tab',\n    type = 'button',\n    variant = 'clear',\n    size = 'm',\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    disabled,\n    text,\n    control,\n    menuItems,\n    activeTab,\n    firstTab,\n    activationOnFocus,\n    getTabIndex,\n    onActiveTabChange,\n  } = props\n\n  const sizeProps = {\n    size,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n  }\n\n  const palette = useMergedPalette(props)\n\n  const controlRef = useRef<Nullable<HTMLElement>>(null)\n  const [menuRef, setMenuRef] = useState<Nullable<HTMLUListElement>>(null)\n\n  const timerId = useRef<Nullable<ReturnType<typeof setTimeout>>>(null)\n\n  const portalElement = useFloaterPortal()\n\n  const [menuOpen, setMenuOpen] = useState(false)\n\n  const controlId = useMemo(() => nanoid(), [])\n\n  const clickOutsideTargets = useMemo(() => [controlRef, menuRef], [menuRef])\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuOpen(false)\n  }, [])\n\n  const menuHasActiveTab = Boolean(\n    menuItems.find(\n      (item) =>\n        isValidElement(item) && typeof item.props === 'object' && item.props !== null && item.props.id === activeTab\n    )\n  )\n\n  const controlProps: TabListTabProps = {\n    ...sizeProps,\n    role,\n    type,\n    variant,\n    'aria-haspopup': 'menu',\n    id: controlId,\n    'aria-selected': menuHasActiveTab,\n    active: menuHasActiveTab,\n    tabIndex: menuHasActiveTab || !firstTab ? 0 : -1,\n    disabled,\n    text,\n    addonRight: (props) => <Styled.IconAnimated {...props.iconProps} rotate={menuOpen} name='chevronDown' />,\n    palette: {\n      color: palette.tabColor,\n      colorHover: palette.tabColorHover,\n      colorActive: palette.tabColorActive,\n      colorDisabled: palette.tabColorDisabled,\n      colorActiveDisabled: palette.tabColorActiveDisabled,\n      backgroundColor: palette.tabBackgroundColor,\n      backgroundColorHover: palette.tabBackgroundColorHover,\n      backgroundColorActive: palette.tabBackgroundColorActive,\n      backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n      backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n    },\n    onClick: () => {\n      setMenuOpen((prev) => !prev)\n    },\n    onKeyDown: (evt) => {\n      if (menuOpen && (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key))) {\n        evt.preventDefault()\n        setMenuOpen(false)\n      } else if (\n        !menuOpen &&\n        ((keyboardKeys.F10.validate(evt.key) && evt.shiftKey) || keyboardKeys.ArrowDown.validate(evt.key))\n      ) {\n        evt.preventDefault()\n        setMenuOpen(true)\n      }\n    },\n  }\n\n  useClickOutside(clickOutsideTargets, handleCloseMenu, {\n    enabled: menuOpen,\n    event: 'mousedown',\n  })\n\n  useEffect(() => {\n    timerId.current = setTimeout(() => {\n      if (!menuRef) return\n\n      const items = Array.from(menuRef.querySelectorAll<HTMLElement>('[role=\"menuitem\"]')).filter((item) =>\n        item.matches(SELECTORS_FOCUSABLE)\n      )\n\n      const activeItem = items.find((item) => item.matches('[aria-selected=\"true\"]'))\n\n      if (activeItem) {\n        activeItem.focus()\n      } else if (items[0]) {\n        items[0].focus()\n      }\n\n      timerId.current = null\n    }, 100)\n\n    return () => {\n      if (timerId.current) {\n        clearTimeout(timerId.current)\n      }\n    }\n  }, [menuRef])\n\n  if (!portalElement) {\n    return null\n  }\n\n  return (\n    <Floater\n      open={menuOpen}\n      portalElement={portalElement}\n      placement='bottom-end'\n      offset={8}\n      hideArrow\n      styles={{\n        options: {\n          zIndex: undefined,\n        },\n        wrapper: {\n          cursor: disabled ? 'not-allowed' : 'pointer',\n        },\n        floater: {\n          filter: 'none',\n          opacity: 1,\n          transitionDuration: '10ms',\n        },\n      }}\n      getPopper={(popper) => {\n        if (popper.state.elements.reference instanceof HTMLElement) {\n          controlRef.current = popper.state.elements.reference\n        }\n      }}\n      modifiers={{\n        // @ts-ignore\n        removeRoles: {\n          name: 'removeRoles',\n          enabled: true,\n          phase: 'beforeWrite',\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement) {\n              const floaterElement = state.elements.popper.querySelector('[role=\"tooltip\"]')\n              if (floaterElement) {\n                floaterElement.removeAttribute('role')\n              }\n            }\n          },\n        },\n        minWidth: {\n          name: 'minWidth',\n          enabled: true,\n          phase: 'beforeWrite',\n          requires: ['computeStyles'],\n          // @ts-ignore\n          fn: ({ state }) => {\n            state.styles.popper.minWidth = `${state.rects.reference.width}px`\n          },\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement && state.elements.reference instanceof HTMLElement) {\n              state.elements.popper.style.display = 'flex'\n              state.elements.popper.style.flexDirection = 'column'\n              state.elements.popper.style.alignItems = 'stretch'\n              state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`\n            }\n          },\n        },\n      }}\n      component={() => (\n        <Styled.Menu\n          role='menu'\n          aria-labelledby={controlId}\n          ref={setMenuRef}\n          palette={{\n            backgroundColor: palette.menuBackgroundColor,\n          }}\n          onClick={(evt) => {\n            if (evt.target instanceof HTMLElement && evt.target.closest('[role=\"menuitem\"]')) {\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n            }\n          }}\n          onKeyDown={(evt) => {\n            evt.stopPropagation()\n\n            if (\n              !(document.activeElement instanceof HTMLElement) ||\n              !document.activeElement.matches('[role=\"menuitem\"]') ||\n              (!keyboardKeys.Esc.validate(evt.key) &&\n                !keyboardKeys.Tab.validate(evt.key) &&\n                !keyboardKeys.Home.validate(evt.key) &&\n                !keyboardKeys.End.validate(evt.key) &&\n                !keyboardKeys.ArrowDown.validate(evt.key) &&\n                !keyboardKeys.ArrowUp.validate(evt.key))\n            ) {\n              return\n            }\n\n            if (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key)) {\n              evt.preventDefault()\n\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n\n              return\n            }\n\n            const items = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]'))\n\n            if (items.length === 0) return\n\n            if (keyboardKeys.Home.validate(evt.key)) {\n              evt.preventDefault()\n              items[0].focus()\n            } else if (keyboardKeys.End.validate(evt.key)) {\n              evt.preventDefault()\n              items[items.length - 1].focus()\n            } else if (keyboardKeys.ArrowDown.validate(evt.key) || keyboardKeys.ArrowUp.validate(evt.key)) {\n              evt.preventDefault()\n              navigateVerticalList(evt.key, document.activeElement, items, SELECTORS_FOCUSABLE)\n            }\n          }}\n        >\n          <TabListTabsContext.Provider\n            value={{\n              activationOnFocus,\n              activeTab,\n              onActiveTabChange,\n              getTabIndex,\n            }}\n          >\n            <TabListPropsContext.Provider\n              value={{\n                ...sizeProps,\n                disabled,\n                role: 'menuitem',\n                variant: 'filled',\n              }}\n            >\n              {Children.map(menuItems, (item) => (\n                <Styled.MenuItem role='none'>{item}</Styled.MenuItem>\n              ))}\n            </TabListPropsContext.Provider>\n          </TabListTabsContext.Provider>\n        </Styled.Menu>\n      )}\n    >\n      {typeof control === 'function' ? control(controlProps) : <TabListTab {...controlProps} />}\n    </Floater>\n  )\n}\n\nexport { TabListMenuTab }\n"],"names":["props","role","type","variant","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","text","control","menuItems","activeTab","firstTab","activationOnFocus","getTabIndex","onActiveTabChange","sizeProps","palette","useMergedPalette","controlRef","useRef","menuRef","setMenuRef","useState","timerId","portalElement","useFloaterPortal","menuOpen","setMenuOpen","controlId","useMemo","nanoid","clickOutsideTargets","handleCloseMenu","useCallback","menuHasActiveTab","Boolean","find","item","isValidElement","id","controlProps","active","tabIndex","addonRight","_jsx","jsx","Styled","iconProps","rotate","name","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","backgroundColor","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","onClick","prev","onKeyDown","evt","keyboardKeys","Esc","validate","key","Tab","preventDefault","F10","shiftKey","ArrowDown","useClickOutside","enabled","event","useEffect","current","setTimeout","items","Array","from","querySelectorAll","filter","matches","SELECTORS_FOCUSABLE","activeItem","focus","clearTimeout","Floater","open","placement","offset","hideArrow","styles","options","zIndex","undefined","wrapper","cursor","floater","opacity","transitionDuration","getPopper","popper","state","elements","reference","HTMLElement","modifiers","removeRoles","phase","effect","floaterElement","querySelector","removeAttribute","minWidth","requires","fn","rects","width","style","display","flexDirection","alignItems","offsetWidth","component","ref","menuBackgroundColor","target","closest","stopPropagation","document","activeElement","Home","End","ArrowUp","currentTarget","length","navigateVerticalList","children","TabListTabsContext","Provider","value","TabListPropsContext","Children","map","TabListTab"],"mappings":"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"}
+{"version":3,"file":"TabListMenuTab.js","sources":["../../../../src/components/TabList/TabListMenuTab.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useMemo, useCallback, Children, isValidElement } from 'react'\nimport Floater from 'react-floater'\nimport { nanoid } from 'nanoid'\nimport type { Nullable } from 'shared/types'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { TabListTab } from 'components/TabListTab'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport { useClickOutside } from 'hooks/useClickOutside'\nimport { keyboardKeys } from 'shared/constants'\nimport { useFloaterPortal } from 'hooks/useFloaterPortal'\nimport { navigateVerticalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport type { TabListTabProps } from 'components/TabListTab'\nimport * as Styled from './style'\nimport type { TabListMenuTabProps } from './types'\n\nconst TabListMenuTab = (props: TabListMenuTabProps) => {\n  const {\n    role = 'tab',\n    type = 'button',\n    variant = 'clear',\n    size = 'm',\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    disabled,\n    text,\n    control,\n    menuItems,\n    activeTab,\n    firstTab,\n    activationOnFocus,\n    getTabIndex,\n    onActiveTabChange,\n  } = props\n\n  const sizeProps = useMemo(\n    () => ({ size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL }),\n    [size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL]\n  )\n\n  const palette = useMergedPalette(props)\n\n  const controlRef = useRef<Nullable<HTMLElement>>(null)\n  const [menuRef, setMenuRef] = useState<Nullable<HTMLUListElement>>(null)\n\n  const timerId = useRef<Nullable<ReturnType<typeof setTimeout>>>(null)\n\n  const portalElement = useFloaterPortal()\n\n  const [menuOpen, setMenuOpen] = useState(false)\n\n  const controlId = useMemo(() => nanoid(), [])\n\n  const clickOutsideTargets = useMemo(() => [controlRef, menuRef], [menuRef])\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuOpen(false)\n  }, [])\n\n  const menuHasActiveTab = Boolean(\n    menuItems.find(\n      (item) =>\n        isValidElement(item) && typeof item.props === 'object' && item.props !== null && item.props.id === activeTab\n    )\n  )\n\n  const controlProps: TabListTabProps = {\n    ...sizeProps,\n    role,\n    type,\n    variant,\n    'aria-haspopup': 'menu',\n    id: controlId,\n    'aria-selected': menuHasActiveTab,\n    active: menuHasActiveTab,\n    tabIndex: menuHasActiveTab || !firstTab ? 0 : -1,\n    disabled,\n    text,\n    // eslint-disable-next-line react/no-unstable-nested-components\n    addonRight: (addonProps) => (\n      <Styled.IconAnimated {...addonProps.iconProps} rotate={menuOpen} name='chevronDown' preset='brand' />\n    ),\n    palette: {\n      color: palette.tabColor,\n      colorHover: palette.tabColorHover,\n      colorActive: palette.tabColorActive,\n      colorDisabled: palette.tabColorDisabled,\n      colorActiveDisabled: palette.tabColorActiveDisabled,\n      backgroundColor: palette.tabBackgroundColor,\n      backgroundColorHover: palette.tabBackgroundColorHover,\n      backgroundColorActive: palette.tabBackgroundColorActive,\n      backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n      backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n    },\n    onClick: () => {\n      setMenuOpen((prev) => !prev)\n    },\n    onKeyDown: (evt) => {\n      if (menuOpen && (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key))) {\n        evt.preventDefault()\n        setMenuOpen(false)\n      } else if (\n        !menuOpen &&\n        ((keyboardKeys.F10.validate(evt.key) && evt.shiftKey) || keyboardKeys.ArrowDown.validate(evt.key))\n      ) {\n        evt.preventDefault()\n        setMenuOpen(true)\n      }\n    },\n  }\n\n  const controlsContextProps = useMemo(\n    () => ({\n      activationOnFocus,\n      activeTab,\n      onActiveTabChange,\n      getTabIndex,\n    }),\n    [activationOnFocus, activeTab, onActiveTabChange, getTabIndex]\n  )\n\n  const menuItemsContextProps = useMemo(\n    () => ({\n      ...sizeProps,\n      disabled,\n      role: 'menuitem',\n      variant: 'filled' as TabListTabProps['variant'],\n    }),\n    [sizeProps, disabled]\n  )\n\n  useClickOutside(clickOutsideTargets, handleCloseMenu, {\n    enabled: menuOpen,\n    event: 'mousedown',\n  })\n\n  useEffect(() => {\n    timerId.current = setTimeout(() => {\n      if (!menuRef) return\n\n      const items = Array.from(menuRef.querySelectorAll<HTMLElement>('[role=\"menuitem\"]')).filter((item) =>\n        item.matches(SELECTORS_FOCUSABLE)\n      )\n\n      const activeItem = items.find((item) => item.matches('[aria-selected=\"true\"]'))\n\n      if (activeItem) {\n        activeItem.focus()\n      } else if (items[0]) {\n        items[0].focus()\n      }\n\n      timerId.current = null\n    }, 100)\n\n    return () => {\n      if (timerId.current) {\n        clearTimeout(timerId.current)\n      }\n    }\n  }, [menuRef])\n\n  if (!portalElement) {\n    return null\n  }\n\n  return (\n    <Floater\n      open={menuOpen}\n      portalElement={portalElement}\n      placement='bottom-end'\n      offset={8}\n      hideArrow\n      styles={{\n        options: {\n          zIndex: undefined,\n        },\n        wrapper: {\n          cursor: disabled ? 'not-allowed' : 'pointer',\n        },\n        floater: {\n          filter: 'none',\n          opacity: 1,\n          transitionDuration: '10ms',\n        },\n      }}\n      getPopper={(popper) => {\n        if (popper.state.elements.reference instanceof HTMLElement) {\n          controlRef.current = popper.state.elements.reference\n        }\n      }}\n      modifiers={{\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        removeRoles: {\n          name: 'removeRoles',\n          enabled: true,\n          phase: 'beforeWrite',\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement) {\n              const floaterElement = state.elements.popper.querySelector('[role=\"tooltip\"]')\n              if (floaterElement) {\n                floaterElement.removeAttribute('role')\n              }\n            }\n          },\n        },\n        minWidth: {\n          name: 'minWidth',\n          enabled: true,\n          phase: 'beforeWrite',\n          requires: ['computeStyles'],\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          fn: ({ state }) => {\n            state.styles.popper.minWidth = `${state.rects.reference.width}px`\n          },\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement && state.elements.reference instanceof HTMLElement) {\n              state.elements.popper.style.display = 'flex'\n              state.elements.popper.style.flexDirection = 'column'\n              state.elements.popper.style.alignItems = 'stretch'\n              state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`\n            }\n          },\n        },\n      }}\n      // eslint-disable-next-line react/no-unstable-nested-components\n      component={() => (\n        <Styled.Menu\n          role='menu'\n          aria-labelledby={controlId}\n          ref={setMenuRef}\n          palette={{\n            backgroundColor: palette.menuBackgroundColor,\n          }}\n          onClick={(evt) => {\n            if (evt.target instanceof HTMLElement && evt.target.closest('[role=\"menuitem\"]')) {\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n            }\n          }}\n          onKeyDown={(evt) => {\n            evt.stopPropagation()\n\n            if (\n              !(document.activeElement instanceof HTMLElement) ||\n              !document.activeElement.matches('[role=\"menuitem\"]') ||\n              (!keyboardKeys.Esc.validate(evt.key) &&\n                !keyboardKeys.Tab.validate(evt.key) &&\n                !keyboardKeys.Home.validate(evt.key) &&\n                !keyboardKeys.End.validate(evt.key) &&\n                !keyboardKeys.ArrowDown.validate(evt.key) &&\n                !keyboardKeys.ArrowUp.validate(evt.key))\n            ) {\n              return\n            }\n\n            if (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key)) {\n              evt.preventDefault()\n\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n\n              return\n            }\n\n            const items = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]'))\n\n            if (items.length === 0) return\n\n            if (keyboardKeys.Home.validate(evt.key)) {\n              evt.preventDefault()\n              items[0].focus()\n            } else if (keyboardKeys.End.validate(evt.key)) {\n              evt.preventDefault()\n              items[items.length - 1].focus()\n            } else if (keyboardKeys.ArrowDown.validate(evt.key) || keyboardKeys.ArrowUp.validate(evt.key)) {\n              evt.preventDefault()\n              navigateVerticalList(evt.key, document.activeElement, items, SELECTORS_FOCUSABLE)\n            }\n          }}\n        >\n          <TabListTabsContext.Provider value={controlsContextProps}>\n            <TabListPropsContext.Provider value={menuItemsContextProps}>\n              {Children.map(menuItems, (item) => (\n                <Styled.MenuItem role='none'>{item}</Styled.MenuItem>\n              ))}\n            </TabListPropsContext.Provider>\n          </TabListTabsContext.Provider>\n        </Styled.Menu>\n      )}\n    >\n      {typeof control === 'function' ? control(controlProps) : <TabListTab {...controlProps} />}\n    </Floater>\n  )\n}\n\nexport { TabListMenuTab }\n"],"names":["props","role","type","variant","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","text","control","menuItems","activeTab","firstTab","activationOnFocus","getTabIndex","onActiveTabChange","sizeProps","useMemo","palette","useMergedPalette","controlRef","useRef","menuRef","setMenuRef","useState","timerId","portalElement","useFloaterPortal","menuOpen","setMenuOpen","controlId","nanoid","clickOutsideTargets","handleCloseMenu","useCallback","menuHasActiveTab","Boolean","find","item","isValidElement","id","controlProps","active","tabIndex","addonRight","addonProps","_jsx","jsx","Styled","iconProps","rotate","name","preset","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","backgroundColor","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","onClick","prev","onKeyDown","evt","keyboardKeys","Esc","validate","key","Tab","preventDefault","F10","shiftKey","ArrowDown","controlsContextProps","menuItemsContextProps","useClickOutside","enabled","event","useEffect","current","setTimeout","items","Array","from","querySelectorAll","filter","matches","SELECTORS_FOCUSABLE","activeItem","focus","clearTimeout","Floater","open","placement","offset","hideArrow","styles","options","zIndex","undefined","wrapper","cursor","floater","opacity","transitionDuration","getPopper","popper","state","elements","reference","HTMLElement","modifiers","removeRoles","phase","effect","floaterElement","querySelector","removeAttribute","minWidth","requires","fn","rects","width","style","display","flexDirection","alignItems","offsetWidth","component","ref","menuBackgroundColor","target","closest","stopPropagation","document","activeElement","Home","End","ArrowUp","currentTarget","length","navigateVerticalList","children","TabListTabsContext","Provider","value","TabListPropsContext","Children","map","TabListTab"],"mappings":"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"}

package/components/TabList/TabListMenuTab.mjs

@@ -1,2 +1,2 @@
-import{useRef,useState,useMemo,useCallback,isValidElement,useEffect,Children}from'react';import Floater from'react-floater';import{nanoid}from'nanoid';import{TabListTabsContext,TabListPropsContext}from'../../shared/context/tabList.mjs';import{useMergedPalette}from'../../hooks/useMergedPalette.mjs';import{useClickOutside}from'../../hooks/useClickOutside.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{useFloaterPortal}from'../../hooks/useFloaterPortal.mjs';import{SELECTORS_FOCUSABLE,navigateVerticalList}from'../../shared/utils/dom.mjs';import{IconAnimated,Menu,MenuItem}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{TabListTab}from'../TabListTab/TabListTab.mjs';const TabListMenuTab=e=>{const{role:t="tab",type:o="button",variant:r="clear",size:a="m",sizeXXS:n,sizeXS:s,sizeS:i,sizeM:l,sizeL:c,sizeXL:d,disabled:m,text:u,control:b,menuItems:p,activeTab:f,firstTab:y,activationOnFocus:v,getTabIndex:k,onActiveTabChange:T}=e;const C={size:a,sizeXXS:n,sizeXS:s,sizeS:i,sizeM:l,sizeL:c,sizeXL:d};const h=useMergedPalette(e);const g=useRef(null);const[L,E]=useState(null);const A=useRef(null);const x=useFloaterPortal();const[D,S]=useState(!1);const K=useMemo((()=>nanoid()),[]);const M=useMemo((()=>[g,L]),[L]);const j=useCallback((()=>{S(!1)}),[]);const w=Boolean(p.find((e=>isValidElement(e)&&typeof e.props=='object'&&e.props!==null&&e.props.id===f)));const z={...C,role:t,type:o,variant:r,'aria-haspopup':'menu',id:K,'aria-selected':w,active:w,tabIndex:w||!y?0:-1,disabled:m,text:u,addonRight:e=>jsx(IconAnimated,{...e.iconProps,rotate:D,name:"chevronDown"}),palette:{color:h.tabColor,colorHover:h.tabColorHover,colorActive:h.tabColorActive,colorDisabled:h.tabColorDisabled,colorActiveDisabled:h.tabColorActiveDisabled,backgroundColor:h.tabBackgroundColor,backgroundColorHover:h.tabBackgroundColorHover,backgroundColorActive:h.tabBackgroundColorActive,backgroundColorDisabled:h.tabBackgroundColorDisabled,backgroundColorActiveDisabled:h.tabBackgroundColorActiveDisabled},onClick:()=>{S((e=>!e))},onKeyDown:e=>{D&&(keyboardKeys.Esc.validate(e.key)||keyboardKeys.Tab.validate(e.key))?(e.preventDefault(),S(!1)):!D&&(keyboardKeys.F10.validate(e.key)&&e.shiftKey||keyboardKeys.ArrowDown.validate(e.key))&&(e.preventDefault(),S(!0))}};return useClickOutside(M,j,{enabled:D,event:'mousedown'}),useEffect((()=>(A.current=setTimeout((()=>{if(!L)return;const e=Array.from(L.querySelectorAll('[role="menuitem"]')).filter((e=>e.matches(SELECTORS_FOCUSABLE)));const t=e.find((e=>e.matches('[aria-selected="true"]')));t?t.focus():e[0]&&e[0].focus(),A.current=null}),100),()=>{A.current&&clearTimeout(A.current)})),[L]),x?jsx(Floater,{open:D,portalElement:x,placement:"bottom-end",offset:8,hideArrow:!0,styles:{options:{zIndex:void 0},wrapper:{cursor:m?'not-allowed':'pointer'},floater:{filter:'none',opacity:1,transitionDuration:'10ms'}},getPopper:e=>{e.state.elements.reference instanceof HTMLElement&&(g.current=e.state.elements.reference)},modifiers:{removeRoles:{name:'removeRoles',enabled:!0,phase:'beforeWrite',effect:({state:e})=>{if(e.elements.popper instanceof HTMLElement){const t=e.elements.popper.querySelector('[role="tooltip"]');t&&t.removeAttribute('role')}}},minWidth:{name:'minWidth',enabled:!0,phase:'beforeWrite',requires:['computeStyles'],fn:({state:e})=>{e.styles.popper.minWidth=`${e.rects.reference.width}px`},effect:({state:e})=>{e.elements.popper instanceof HTMLElement&&e.elements.reference instanceof HTMLElement&&(e.elements.popper.style.display='flex',e.elements.popper.style.flexDirection='column',e.elements.popper.style.alignItems='stretch',e.elements.popper.style.minWidth=`${e.elements.reference.offsetWidth}px`)}}},component:()=>jsx(Menu,{role:"menu","aria-labelledby":K,ref:E,palette:{backgroundColor:h.menuBackgroundColor},onClick:e=>{e.target instanceof HTMLElement&&e.target.closest('[role="menuitem"]')&&(S(!1),setTimeout((()=>{g.current?.focus()}),100))},onKeyDown:e=>{if(e.stopPropagation(),!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="menuitem"]')&&(keyboardKeys.Esc.validate(e.key)||keyboardKeys.Tab.validate(e.key)||keyboardKeys.Home.validate(e.key)||keyboardKeys.End.validate(e.key)||keyboardKeys.ArrowDown.validate(e.key)||keyboardKeys.ArrowUp.validate(e.key))))return;if(keyboardKeys.Esc.validate(e.key)||keyboardKeys.Tab.validate(e.key))return e.preventDefault(),S(!1),void setTimeout((()=>{g.current?.focus()}),100);const t=Array.from(e.currentTarget.querySelectorAll('[role="menuitem"]'));t.length!==0&&(keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(keyboardKeys.ArrowDown.validate(e.key)||keyboardKeys.ArrowUp.validate(e.key))&&(e.preventDefault(),navigateVerticalList(e.key,document.activeElement,t,SELECTORS_FOCUSABLE)))},children:jsx(TabListTabsContext.Provider,{value:{activationOnFocus:v,activeTab:f,onActiveTabChange:T,getTabIndex:k},children:jsx(TabListPropsContext.Provider,{value:{...C,disabled:m,role:'menuitem',variant:'filled'},children:Children.map(p,(e=>jsx(MenuItem,{role:"none",children:e})))})})}),children:typeof b=='function'?b(z):jsx(TabListTab,{...z})}):null};export{TabListMenuTab};
+import{useMemo,useRef,useState,useCallback,isValidElement,useEffect,Children}from'react';import Floater from'react-floater';import{nanoid}from'nanoid';import{TabListTabsContext,TabListPropsContext}from'../../shared/context/tabList.mjs';import{useMergedPalette}from'../../hooks/useMergedPalette.mjs';import{useClickOutside}from'../../hooks/useClickOutside.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{useFloaterPortal}from'../../hooks/useFloaterPortal.mjs';import{SELECTORS_FOCUSABLE,navigateVerticalList}from'../../shared/utils/dom.mjs';import{IconAnimated,Menu,MenuItem}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{TabListTab}from'../TabListTab/TabListTab.mjs';const TabListMenuTab=e=>{const{role:t="tab",type:o="button",variant:r="clear",size:a="m",sizeXXS:s,sizeXS:n,sizeS:i,sizeM:l,sizeL:c,sizeXL:d,disabled:m,text:u,control:b,menuItems:p,activeTab:f,firstTab:y,activationOnFocus:v,getTabIndex:k,onActiveTabChange:T}=e;const C=useMemo((()=>({size:a,sizeXXS:s,sizeXS:n,sizeS:i,sizeM:l,sizeL:c,sizeXL:d})),[a,s,n,i,l,c,d]);const h=useMergedPalette(e);const g=useRef(null);const[L,E]=useState(null);const A=useRef(null);const x=useFloaterPortal();const[M,D]=useState(!1);const S=useMemo((()=>nanoid()),[]);const K=useMemo((()=>[g,L]),[L]);const j=useCallback((()=>{D(!1)}),[]);const w=Boolean(p.find((e=>isValidElement(e)&&typeof e.props=='object'&&e.props!==null&&e.props.id===f)));const z={...C,role:t,type:o,variant:r,'aria-haspopup':'menu',id:S,'aria-selected':w,active:w,tabIndex:w||!y?0:-1,disabled:m,text:u,addonRight:e=>jsx(IconAnimated,{...e.iconProps,rotate:M,name:"chevronDown",preset:"brand"}),palette:{color:h.tabColor,colorHover:h.tabColorHover,colorActive:h.tabColorActive,colorDisabled:h.tabColorDisabled,colorActiveDisabled:h.tabColorActiveDisabled,backgroundColor:h.tabBackgroundColor,backgroundColorHover:h.tabBackgroundColorHover,backgroundColorActive:h.tabBackgroundColorActive,backgroundColorDisabled:h.tabBackgroundColorDisabled,backgroundColorActiveDisabled:h.tabBackgroundColorActiveDisabled},onClick:()=>{D((e=>!e))},onKeyDown:e=>{M&&(keyboardKeys.Esc.validate(e.key)||keyboardKeys.Tab.validate(e.key))?(e.preventDefault(),D(!1)):!M&&(keyboardKeys.F10.validate(e.key)&&e.shiftKey||keyboardKeys.ArrowDown.validate(e.key))&&(e.preventDefault(),D(!0))}};const P=useMemo((()=>({activationOnFocus:v,activeTab:f,onActiveTabChange:T,getTabIndex:k})),[v,f,T,k]);const H=useMemo((()=>({...C,disabled:m,role:'menuitem',variant:'filled'})),[C,m]);return useClickOutside(K,j,{enabled:M,event:'mousedown'}),useEffect((()=>(A.current=setTimeout((()=>{if(!L)return;const e=Array.from(L.querySelectorAll('[role="menuitem"]')).filter((e=>e.matches(SELECTORS_FOCUSABLE)));const t=e.find((e=>e.matches('[aria-selected="true"]')));t?t.focus():e[0]&&e[0].focus(),A.current=null}),100),()=>{A.current&&clearTimeout(A.current)})),[L]),x?jsx(Floater,{open:M,portalElement:x,placement:"bottom-end",offset:8,hideArrow:!0,styles:{options:{zIndex:void 0},wrapper:{cursor:m?'not-allowed':'pointer'},floater:{filter:'none',opacity:1,transitionDuration:'10ms'}},getPopper:e=>{e.state.elements.reference instanceof HTMLElement&&(g.current=e.state.elements.reference)},modifiers:{removeRoles:{name:'removeRoles',enabled:!0,phase:'beforeWrite',effect:({state:e})=>{if(e.elements.popper instanceof HTMLElement){const t=e.elements.popper.querySelector('[role="tooltip"]');t&&t.removeAttribute('role')}}},minWidth:{name:'minWidth',enabled:!0,phase:'beforeWrite',requires:['computeStyles'],fn:({state:e})=>{e.styles.popper.minWidth=`${e.rects.reference.width}px`},effect:({state:e})=>{e.elements.popper instanceof HTMLElement&&e.elements.reference instanceof HTMLElement&&(e.elements.popper.style.display='flex',e.elements.popper.style.flexDirection='column',e.elements.popper.style.alignItems='stretch',e.elements.popper.style.minWidth=`${e.elements.reference.offsetWidth}px`)}}},component:()=>jsx(Menu,{role:"menu","aria-labelledby":S,ref:E,palette:{backgroundColor:h.menuBackgroundColor},onClick:e=>{e.target instanceof HTMLElement&&e.target.closest('[role="menuitem"]')&&(D(!1),setTimeout((()=>{g.current?.focus()}),100))},onKeyDown:e=>{if(e.stopPropagation(),!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="menuitem"]')&&(keyboardKeys.Esc.validate(e.key)||keyboardKeys.Tab.validate(e.key)||keyboardKeys.Home.validate(e.key)||keyboardKeys.End.validate(e.key)||keyboardKeys.ArrowDown.validate(e.key)||keyboardKeys.ArrowUp.validate(e.key))))return;if(keyboardKeys.Esc.validate(e.key)||keyboardKeys.Tab.validate(e.key))return e.preventDefault(),D(!1),void setTimeout((()=>{g.current?.focus()}),100);const t=Array.from(e.currentTarget.querySelectorAll('[role="menuitem"]'));t.length!==0&&(keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(keyboardKeys.ArrowDown.validate(e.key)||keyboardKeys.ArrowUp.validate(e.key))&&(e.preventDefault(),navigateVerticalList(e.key,document.activeElement,t,SELECTORS_FOCUSABLE)))},children:jsx(TabListTabsContext.Provider,{value:P,children:jsx(TabListPropsContext.Provider,{value:H,children:Children.map(p,(e=>jsx(MenuItem,{role:"none",children:e})))})})}),children:typeof b=='function'?b(z):jsx(TabListTab,{...z})}):null};export{TabListMenuTab};
 //# sourceMappingURL=TabListMenuTab.mjs.map

package/components/TabList/TabListMenuTab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabListMenuTab.mjs","sources":["../../../../src/components/TabList/TabListMenuTab.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport { useState, useRef, useEffect, useMemo, useCallback, Children, isValidElement } from 'react'\nimport Floater from 'react-floater'\nimport { nanoid } from 'nanoid'\nimport type { Nullable } from 'shared/types'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { TabListTab } from 'components/TabListTab'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport { useClickOutside } from 'hooks/useClickOutside'\nimport { keyboardKeys } from 'shared/constants'\nimport { useFloaterPortal } from 'hooks/useFloaterPortal'\nimport { navigateVerticalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport type { TabListTabProps } from 'components/TabListTab'\nimport * as Styled from './style'\nimport type { TabListMenuTabProps } from './types'\n\nconst TabListMenuTab = (props: TabListMenuTabProps) => {\n  const {\n    role = 'tab',\n    type = 'button',\n    variant = 'clear',\n    size = 'm',\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    disabled,\n    text,\n    control,\n    menuItems,\n    activeTab,\n    firstTab,\n    activationOnFocus,\n    getTabIndex,\n    onActiveTabChange,\n  } = props\n\n  const sizeProps = {\n    size,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n  }\n\n  const palette = useMergedPalette(props)\n\n  const controlRef = useRef<Nullable<HTMLElement>>(null)\n  const [menuRef, setMenuRef] = useState<Nullable<HTMLUListElement>>(null)\n\n  const timerId = useRef<Nullable<ReturnType<typeof setTimeout>>>(null)\n\n  const portalElement = useFloaterPortal()\n\n  const [menuOpen, setMenuOpen] = useState(false)\n\n  const controlId = useMemo(() => nanoid(), [])\n\n  const clickOutsideTargets = useMemo(() => [controlRef, menuRef], [menuRef])\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuOpen(false)\n  }, [])\n\n  const menuHasActiveTab = Boolean(\n    menuItems.find(\n      (item) =>\n        isValidElement(item) && typeof item.props === 'object' && item.props !== null && item.props.id === activeTab\n    )\n  )\n\n  const controlProps: TabListTabProps = {\n    ...sizeProps,\n    role,\n    type,\n    variant,\n    'aria-haspopup': 'menu',\n    id: controlId,\n    'aria-selected': menuHasActiveTab,\n    active: menuHasActiveTab,\n    tabIndex: menuHasActiveTab || !firstTab ? 0 : -1,\n    disabled,\n    text,\n    addonRight: (props) => <Styled.IconAnimated {...props.iconProps} rotate={menuOpen} name='chevronDown' />,\n    palette: {\n      color: palette.tabColor,\n      colorHover: palette.tabColorHover,\n      colorActive: palette.tabColorActive,\n      colorDisabled: palette.tabColorDisabled,\n      colorActiveDisabled: palette.tabColorActiveDisabled,\n      backgroundColor: palette.tabBackgroundColor,\n      backgroundColorHover: palette.tabBackgroundColorHover,\n      backgroundColorActive: palette.tabBackgroundColorActive,\n      backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n      backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n    },\n    onClick: () => {\n      setMenuOpen((prev) => !prev)\n    },\n    onKeyDown: (evt) => {\n      if (menuOpen && (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key))) {\n        evt.preventDefault()\n        setMenuOpen(false)\n      } else if (\n        !menuOpen &&\n        ((keyboardKeys.F10.validate(evt.key) && evt.shiftKey) || keyboardKeys.ArrowDown.validate(evt.key))\n      ) {\n        evt.preventDefault()\n        setMenuOpen(true)\n      }\n    },\n  }\n\n  useClickOutside(clickOutsideTargets, handleCloseMenu, {\n    enabled: menuOpen,\n    event: 'mousedown',\n  })\n\n  useEffect(() => {\n    timerId.current = setTimeout(() => {\n      if (!menuRef) return\n\n      const items = Array.from(menuRef.querySelectorAll<HTMLElement>('[role=\"menuitem\"]')).filter((item) =>\n        item.matches(SELECTORS_FOCUSABLE)\n      )\n\n      const activeItem = items.find((item) => item.matches('[aria-selected=\"true\"]'))\n\n      if (activeItem) {\n        activeItem.focus()\n      } else if (items[0]) {\n        items[0].focus()\n      }\n\n      timerId.current = null\n    }, 100)\n\n    return () => {\n      if (timerId.current) {\n        clearTimeout(timerId.current)\n      }\n    }\n  }, [menuRef])\n\n  if (!portalElement) {\n    return null\n  }\n\n  return (\n    <Floater\n      open={menuOpen}\n      portalElement={portalElement}\n      placement='bottom-end'\n      offset={8}\n      hideArrow\n      styles={{\n        options: {\n          zIndex: undefined,\n        },\n        wrapper: {\n          cursor: disabled ? 'not-allowed' : 'pointer',\n        },\n        floater: {\n          filter: 'none',\n          opacity: 1,\n          transitionDuration: '10ms',\n        },\n      }}\n      getPopper={(popper) => {\n        if (popper.state.elements.reference instanceof HTMLElement) {\n          controlRef.current = popper.state.elements.reference\n        }\n      }}\n      modifiers={{\n        // @ts-ignore\n        removeRoles: {\n          name: 'removeRoles',\n          enabled: true,\n          phase: 'beforeWrite',\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement) {\n              const floaterElement = state.elements.popper.querySelector('[role=\"tooltip\"]')\n              if (floaterElement) {\n                floaterElement.removeAttribute('role')\n              }\n            }\n          },\n        },\n        minWidth: {\n          name: 'minWidth',\n          enabled: true,\n          phase: 'beforeWrite',\n          requires: ['computeStyles'],\n          // @ts-ignore\n          fn: ({ state }) => {\n            state.styles.popper.minWidth = `${state.rects.reference.width}px`\n          },\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement && state.elements.reference instanceof HTMLElement) {\n              state.elements.popper.style.display = 'flex'\n              state.elements.popper.style.flexDirection = 'column'\n              state.elements.popper.style.alignItems = 'stretch'\n              state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`\n            }\n          },\n        },\n      }}\n      component={() => (\n        <Styled.Menu\n          role='menu'\n          aria-labelledby={controlId}\n          ref={setMenuRef}\n          palette={{\n            backgroundColor: palette.menuBackgroundColor,\n          }}\n          onClick={(evt) => {\n            if (evt.target instanceof HTMLElement && evt.target.closest('[role=\"menuitem\"]')) {\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n            }\n          }}\n          onKeyDown={(evt) => {\n            evt.stopPropagation()\n\n            if (\n              !(document.activeElement instanceof HTMLElement) ||\n              !document.activeElement.matches('[role=\"menuitem\"]') ||\n              (!keyboardKeys.Esc.validate(evt.key) &&\n                !keyboardKeys.Tab.validate(evt.key) &&\n                !keyboardKeys.Home.validate(evt.key) &&\n                !keyboardKeys.End.validate(evt.key) &&\n                !keyboardKeys.ArrowDown.validate(evt.key) &&\n                !keyboardKeys.ArrowUp.validate(evt.key))\n            ) {\n              return\n            }\n\n            if (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key)) {\n              evt.preventDefault()\n\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n\n              return\n            }\n\n            const items = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]'))\n\n            if (items.length === 0) return\n\n            if (keyboardKeys.Home.validate(evt.key)) {\n              evt.preventDefault()\n              items[0].focus()\n            } else if (keyboardKeys.End.validate(evt.key)) {\n              evt.preventDefault()\n              items[items.length - 1].focus()\n            } else if (keyboardKeys.ArrowDown.validate(evt.key) || keyboardKeys.ArrowUp.validate(evt.key)) {\n              evt.preventDefault()\n              navigateVerticalList(evt.key, document.activeElement, items, SELECTORS_FOCUSABLE)\n            }\n          }}\n        >\n          <TabListTabsContext.Provider\n            value={{\n              activationOnFocus,\n              activeTab,\n              onActiveTabChange,\n              getTabIndex,\n            }}\n          >\n            <TabListPropsContext.Provider\n              value={{\n                ...sizeProps,\n                disabled,\n                role: 'menuitem',\n                variant: 'filled',\n              }}\n            >\n              {Children.map(menuItems, (item) => (\n                <Styled.MenuItem role='none'>{item}</Styled.MenuItem>\n              ))}\n            </TabListPropsContext.Provider>\n          </TabListTabsContext.Provider>\n        </Styled.Menu>\n      )}\n    >\n      {typeof control === 'function' ? control(controlProps) : <TabListTab {...controlProps} />}\n    </Floater>\n  )\n}\n\nexport { TabListMenuTab }\n"],"names":["TabListMenuTab","props","role","type","variant","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","text","control","menuItems","activeTab","firstTab","activationOnFocus","getTabIndex","onActiveTabChange","sizeProps","palette","useMergedPalette","controlRef","useRef","menuRef","setMenuRef","useState","timerId","portalElement","useFloaterPortal","menuOpen","setMenuOpen","controlId","useMemo","nanoid","clickOutsideTargets","handleCloseMenu","useCallback","menuHasActiveTab","Boolean","find","item","isValidElement","id","controlProps","active","tabIndex","addonRight","_jsx","Styled","iconProps","rotate","name","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","backgroundColor","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","onClick","prev","onKeyDown","evt","keyboardKeys","Esc","validate","key","Tab","preventDefault","F10","shiftKey","ArrowDown","useClickOutside","enabled","event","useEffect","current","setTimeout","items","Array","from","querySelectorAll","filter","matches","SELECTORS_FOCUSABLE","activeItem","focus","clearTimeout","Floater","open","placement","offset","hideArrow","styles","options","zIndex","undefined","wrapper","cursor","floater","opacity","transitionDuration","getPopper","popper","state","elements","reference","HTMLElement","modifiers","removeRoles","phase","effect","floaterElement","querySelector","removeAttribute","minWidth","requires","fn","rects","width","style","display","flexDirection","alignItems","offsetWidth","component","ref","menuBackgroundColor","target","closest","stopPropagation","document","activeElement","Home","End","ArrowUp","currentTarget","length","navigateVerticalList","children","TabListTabsContext","Provider","value","TabListPropsContext","Children","map","TabListTab"],"mappings":"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"}
+{"version":3,"file":"TabListMenuTab.mjs","sources":["../../../../src/components/TabList/TabListMenuTab.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useMemo, useCallback, Children, isValidElement } from 'react'\nimport Floater from 'react-floater'\nimport { nanoid } from 'nanoid'\nimport type { Nullable } from 'shared/types'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { TabListTab } from 'components/TabListTab'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport { useClickOutside } from 'hooks/useClickOutside'\nimport { keyboardKeys } from 'shared/constants'\nimport { useFloaterPortal } from 'hooks/useFloaterPortal'\nimport { navigateVerticalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport type { TabListTabProps } from 'components/TabListTab'\nimport * as Styled from './style'\nimport type { TabListMenuTabProps } from './types'\n\nconst TabListMenuTab = (props: TabListMenuTabProps) => {\n  const {\n    role = 'tab',\n    type = 'button',\n    variant = 'clear',\n    size = 'm',\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    disabled,\n    text,\n    control,\n    menuItems,\n    activeTab,\n    firstTab,\n    activationOnFocus,\n    getTabIndex,\n    onActiveTabChange,\n  } = props\n\n  const sizeProps = useMemo(\n    () => ({ size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL }),\n    [size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL]\n  )\n\n  const palette = useMergedPalette(props)\n\n  const controlRef = useRef<Nullable<HTMLElement>>(null)\n  const [menuRef, setMenuRef] = useState<Nullable<HTMLUListElement>>(null)\n\n  const timerId = useRef<Nullable<ReturnType<typeof setTimeout>>>(null)\n\n  const portalElement = useFloaterPortal()\n\n  const [menuOpen, setMenuOpen] = useState(false)\n\n  const controlId = useMemo(() => nanoid(), [])\n\n  const clickOutsideTargets = useMemo(() => [controlRef, menuRef], [menuRef])\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuOpen(false)\n  }, [])\n\n  const menuHasActiveTab = Boolean(\n    menuItems.find(\n      (item) =>\n        isValidElement(item) && typeof item.props === 'object' && item.props !== null && item.props.id === activeTab\n    )\n  )\n\n  const controlProps: TabListTabProps = {\n    ...sizeProps,\n    role,\n    type,\n    variant,\n    'aria-haspopup': 'menu',\n    id: controlId,\n    'aria-selected': menuHasActiveTab,\n    active: menuHasActiveTab,\n    tabIndex: menuHasActiveTab || !firstTab ? 0 : -1,\n    disabled,\n    text,\n    // eslint-disable-next-line react/no-unstable-nested-components\n    addonRight: (addonProps) => (\n      <Styled.IconAnimated {...addonProps.iconProps} rotate={menuOpen} name='chevronDown' preset='brand' />\n    ),\n    palette: {\n      color: palette.tabColor,\n      colorHover: palette.tabColorHover,\n      colorActive: palette.tabColorActive,\n      colorDisabled: palette.tabColorDisabled,\n      colorActiveDisabled: palette.tabColorActiveDisabled,\n      backgroundColor: palette.tabBackgroundColor,\n      backgroundColorHover: palette.tabBackgroundColorHover,\n      backgroundColorActive: palette.tabBackgroundColorActive,\n      backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n      backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n    },\n    onClick: () => {\n      setMenuOpen((prev) => !prev)\n    },\n    onKeyDown: (evt) => {\n      if (menuOpen && (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key))) {\n        evt.preventDefault()\n        setMenuOpen(false)\n      } else if (\n        !menuOpen &&\n        ((keyboardKeys.F10.validate(evt.key) && evt.shiftKey) || keyboardKeys.ArrowDown.validate(evt.key))\n      ) {\n        evt.preventDefault()\n        setMenuOpen(true)\n      }\n    },\n  }\n\n  const controlsContextProps = useMemo(\n    () => ({\n      activationOnFocus,\n      activeTab,\n      onActiveTabChange,\n      getTabIndex,\n    }),\n    [activationOnFocus, activeTab, onActiveTabChange, getTabIndex]\n  )\n\n  const menuItemsContextProps = useMemo(\n    () => ({\n      ...sizeProps,\n      disabled,\n      role: 'menuitem',\n      variant: 'filled' as TabListTabProps['variant'],\n    }),\n    [sizeProps, disabled]\n  )\n\n  useClickOutside(clickOutsideTargets, handleCloseMenu, {\n    enabled: menuOpen,\n    event: 'mousedown',\n  })\n\n  useEffect(() => {\n    timerId.current = setTimeout(() => {\n      if (!menuRef) return\n\n      const items = Array.from(menuRef.querySelectorAll<HTMLElement>('[role=\"menuitem\"]')).filter((item) =>\n        item.matches(SELECTORS_FOCUSABLE)\n      )\n\n      const activeItem = items.find((item) => item.matches('[aria-selected=\"true\"]'))\n\n      if (activeItem) {\n        activeItem.focus()\n      } else if (items[0]) {\n        items[0].focus()\n      }\n\n      timerId.current = null\n    }, 100)\n\n    return () => {\n      if (timerId.current) {\n        clearTimeout(timerId.current)\n      }\n    }\n  }, [menuRef])\n\n  if (!portalElement) {\n    return null\n  }\n\n  return (\n    <Floater\n      open={menuOpen}\n      portalElement={portalElement}\n      placement='bottom-end'\n      offset={8}\n      hideArrow\n      styles={{\n        options: {\n          zIndex: undefined,\n        },\n        wrapper: {\n          cursor: disabled ? 'not-allowed' : 'pointer',\n        },\n        floater: {\n          filter: 'none',\n          opacity: 1,\n          transitionDuration: '10ms',\n        },\n      }}\n      getPopper={(popper) => {\n        if (popper.state.elements.reference instanceof HTMLElement) {\n          controlRef.current = popper.state.elements.reference\n        }\n      }}\n      modifiers={{\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        removeRoles: {\n          name: 'removeRoles',\n          enabled: true,\n          phase: 'beforeWrite',\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement) {\n              const floaterElement = state.elements.popper.querySelector('[role=\"tooltip\"]')\n              if (floaterElement) {\n                floaterElement.removeAttribute('role')\n              }\n            }\n          },\n        },\n        minWidth: {\n          name: 'minWidth',\n          enabled: true,\n          phase: 'beforeWrite',\n          requires: ['computeStyles'],\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          fn: ({ state }) => {\n            state.styles.popper.minWidth = `${state.rects.reference.width}px`\n          },\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement && state.elements.reference instanceof HTMLElement) {\n              state.elements.popper.style.display = 'flex'\n              state.elements.popper.style.flexDirection = 'column'\n              state.elements.popper.style.alignItems = 'stretch'\n              state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`\n            }\n          },\n        },\n      }}\n      // eslint-disable-next-line react/no-unstable-nested-components\n      component={() => (\n        <Styled.Menu\n          role='menu'\n          aria-labelledby={controlId}\n          ref={setMenuRef}\n          palette={{\n            backgroundColor: palette.menuBackgroundColor,\n          }}\n          onClick={(evt) => {\n            if (evt.target instanceof HTMLElement && evt.target.closest('[role=\"menuitem\"]')) {\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n            }\n          }}\n          onKeyDown={(evt) => {\n            evt.stopPropagation()\n\n            if (\n              !(document.activeElement instanceof HTMLElement) ||\n              !document.activeElement.matches('[role=\"menuitem\"]') ||\n              (!keyboardKeys.Esc.validate(evt.key) &&\n                !keyboardKeys.Tab.validate(evt.key) &&\n                !keyboardKeys.Home.validate(evt.key) &&\n                !keyboardKeys.End.validate(evt.key) &&\n                !keyboardKeys.ArrowDown.validate(evt.key) &&\n                !keyboardKeys.ArrowUp.validate(evt.key))\n            ) {\n              return\n            }\n\n            if (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key)) {\n              evt.preventDefault()\n\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n\n              return\n            }\n\n            const items = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]'))\n\n            if (items.length === 0) return\n\n            if (keyboardKeys.Home.validate(evt.key)) {\n              evt.preventDefault()\n              items[0].focus()\n            } else if (keyboardKeys.End.validate(evt.key)) {\n              evt.preventDefault()\n              items[items.length - 1].focus()\n            } else if (keyboardKeys.ArrowDown.validate(evt.key) || keyboardKeys.ArrowUp.validate(evt.key)) {\n              evt.preventDefault()\n              navigateVerticalList(evt.key, document.activeElement, items, SELECTORS_FOCUSABLE)\n            }\n          }}\n        >\n          <TabListTabsContext.Provider value={controlsContextProps}>\n            <TabListPropsContext.Provider value={menuItemsContextProps}>\n              {Children.map(menuItems, (item) => (\n                <Styled.MenuItem role='none'>{item}</Styled.MenuItem>\n              ))}\n            </TabListPropsContext.Provider>\n          </TabListTabsContext.Provider>\n        </Styled.Menu>\n      )}\n    >\n      {typeof control === 'function' ? control(controlProps) : <TabListTab {...controlProps} />}\n    </Floater>\n  )\n}\n\nexport { TabListMenuTab }\n"],"names":["TabListMenuTab","props","role","type","variant","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","text","control","menuItems","activeTab","firstTab","activationOnFocus","getTabIndex","onActiveTabChange","sizeProps","useMemo","palette","useMergedPalette","controlRef","useRef","menuRef","setMenuRef","useState","timerId","portalElement","useFloaterPortal","menuOpen","setMenuOpen","controlId","nanoid","clickOutsideTargets","handleCloseMenu","useCallback","menuHasActiveTab","Boolean","find","item","isValidElement","id","controlProps","active","tabIndex","addonRight","addonProps","_jsx","Styled","iconProps","rotate","name","preset","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","backgroundColor","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","onClick","prev","onKeyDown","evt","keyboardKeys","Esc","validate","key","Tab","preventDefault","F10","shiftKey","ArrowDown","controlsContextProps","menuItemsContextProps","useClickOutside","enabled","event","useEffect","current","setTimeout","items","Array","from","querySelectorAll","filter","matches","SELECTORS_FOCUSABLE","activeItem","focus","clearTimeout","Floater","open","placement","offset","hideArrow","styles","options","zIndex","undefined","wrapper","cursor","floater","opacity","transitionDuration","getPopper","popper","state","elements","reference","HTMLElement","modifiers","removeRoles","phase","effect","floaterElement","querySelector","removeAttribute","minWidth","requires","fn","rects","width","style","display","flexDirection","alignItems","offsetWidth","component","ref","menuBackgroundColor","target","closest","stopPropagation","document","activeElement","Home","End","ArrowUp","currentTarget","length","navigateVerticalList","children","TabListTabsContext","Provider","value","TabListPropsContext","Children","map","TabListTab"],"mappings":"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"}

package/components/TabList/TabListPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabListPanel.js","sources":["../../../../src/components/TabList/TabListPanel.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_PANEL } from './sizes'\nimport type { TabListPanelProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabListPanel'\n\n/**\n *\n * Компонент для рендера контента активного ассоциированного таба.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nconst TabListPanel: React.ForwardRefExoticComponent<TabListPanelProps> = withMergedProps<\n  TabListPanelProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      role = 'tabpanel',\n      size = 'm',\n      borderRadius = 0,\n      tabId,\n      'aria-labelledby': ariaLabelledby,\n      ...restProps\n    } = props\n\n    return (\n      <Styled.Panel\n        {...restProps}\n        role={role}\n        size={size}\n        borderRadius={borderRadius}\n        aria-labelledby={ariaLabelledby ?? tabId}\n        ref={ref}\n      />\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES_PANEL,\n  }\n)\n\nexport { TabListPanel }\n"],"names":["TabListPanel","withMergedProps","forwardRef","props","ref","role","size","borderRadius","tabId","ariaLabelledby","restProps","_jsx","Styled","displayName","sizes","SIZES_PANEL"],"mappings":"iNAgBMA,MAAAA,aAAmEC,gBAAAA,gBAIvEC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,WAAUC,KACjBA,EAAO,IAAGC,aACVA,EAAe,EAACC,MAChBA,EACA,kBAAmBC,KAChBC,GACDP,EAEJ,OACEQ,WAAAA,IAACC,MAAAA,MAAY,IACPF,EACJL,KAAMA,EACNC,KAAMA,EACNC,aAAcA,EACd,kBAAiBE,GAAkBD,EACnCJ,IAAKA,GACL,IAGN,CACES,YApCmB,eAqCnBC,MAAOC,MAAAA"}
+{"version":3,"file":"TabListPanel.js","sources":["../../../../src/components/TabList/TabListPanel.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { SIZES_PANEL } from './sizes'\nimport type { TabListPanelProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabListPanel'\n\n/**\n *\n * Компонент для рендера контента активного ассоциированного таба.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nconst TabListPanel: React.ForwardRefExoticComponent<TabListPanelProps> = withMergedProps<\n  TabListPanelProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<TabListPanelProps>>((props, ref) => {\n    const {\n      role = 'tabpanel',\n      size = 'm',\n      borderRadius = 0,\n      tabId,\n      'aria-labelledby': ariaLabelledby,\n      ...restProps\n    } = props\n\n    return (\n      <Styled.Panel\n        {...restProps}\n        role={role}\n        size={size}\n        borderRadius={borderRadius}\n        aria-labelledby={ariaLabelledby ?? tabId}\n        ref={ref}\n      />\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES_PANEL,\n  }\n)\n\nexport { TabListPanel }\n"],"names":["TabListPanel","withMergedProps","forwardRef","props","ref","role","size","borderRadius","tabId","ariaLabelledby","restProps","_jsx","Styled","displayName","sizes","SIZES_PANEL"],"mappings":"iNAiBMA,MAAAA,aAAmEC,gBAAAA,gBAIvEC,MAAAA,YAA2D,CAACC,EAAOC,KACjE,MAAMC,KACJA,EAAO,WAAUC,KACjBA,EAAO,IAAGC,aACVA,EAAe,EAACC,MAChBA,EACA,kBAAmBC,KAChBC,GACDP,EAEJ,OACEQ,WAAAA,IAACC,MAAAA,MAAY,IACPF,EACJL,KAAMA,EACNC,KAAMA,EACNC,aAAcA,EACd,kBAAiBE,GAAkBD,EACnCJ,IAAKA,GACL,IAGN,CACES,YApCmB,eAqCnBC,MAAOC,MAAAA"}

package/components/TabList/TabListPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabListPanel.mjs","sources":["../../../../src/components/TabList/TabListPanel.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_PANEL } from './sizes'\nimport type { TabListPanelProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabListPanel'\n\n/**\n *\n * Компонент для рендера контента активного ассоциированного таба.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nconst TabListPanel: React.ForwardRefExoticComponent<TabListPanelProps> = withMergedProps<\n  TabListPanelProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      role = 'tabpanel',\n      size = 'm',\n      borderRadius = 0,\n      tabId,\n      'aria-labelledby': ariaLabelledby,\n      ...restProps\n    } = props\n\n    return (\n      <Styled.Panel\n        {...restProps}\n        role={role}\n        size={size}\n        borderRadius={borderRadius}\n        aria-labelledby={ariaLabelledby ?? tabId}\n        ref={ref}\n      />\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES_PANEL,\n  }\n)\n\nexport { TabListPanel }\n"],"names":["TabListPanel","withMergedProps","forwardRef","props","ref","role","size","borderRadius","tabId","ariaLabelledby","restProps","_jsx","Styled","displayName","sizes","SIZES_PANEL"],"mappings":"iMAgBMA,MAAAA,aAAmEC,gBAIvEC,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,WAAUC,KACjBA,EAAO,IAAGC,aACVA,EAAe,EAACC,MAChBA,EACA,kBAAmBC,KAChBC,GACDP,EAEJ,OACEQ,IAACC,MAAY,IACPF,EACJL,KAAMA,EACNC,KAAMA,EACNC,aAAcA,EACd,kBAAiBE,GAAkBD,EACnCJ,IAAKA,GACL,IAGN,CACES,YApCmB,eAqCnBC,MAAOC"}
+{"version":3,"file":"TabListPanel.mjs","sources":["../../../../src/components/TabList/TabListPanel.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { SIZES_PANEL } from './sizes'\nimport type { TabListPanelProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabListPanel'\n\n/**\n *\n * Компонент для рендера контента активного ассоциированного таба.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nconst TabListPanel: React.ForwardRefExoticComponent<TabListPanelProps> = withMergedProps<\n  TabListPanelProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<TabListPanelProps>>((props, ref) => {\n    const {\n      role = 'tabpanel',\n      size = 'm',\n      borderRadius = 0,\n      tabId,\n      'aria-labelledby': ariaLabelledby,\n      ...restProps\n    } = props\n\n    return (\n      <Styled.Panel\n        {...restProps}\n        role={role}\n        size={size}\n        borderRadius={borderRadius}\n        aria-labelledby={ariaLabelledby ?? tabId}\n        ref={ref}\n      />\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES_PANEL,\n  }\n)\n\nexport { TabListPanel }\n"],"names":["TabListPanel","withMergedProps","forwardRef","props","ref","role","size","borderRadius","tabId","ariaLabelledby","restProps","_jsx","Styled","displayName","sizes","SIZES_PANEL"],"mappings":"iMAiBMA,MAAAA,aAAmEC,gBAIvEC,YAA2D,CAACC,EAAOC,KACjE,MAAMC,KACJA,EAAO,WAAUC,KACjBA,EAAO,IAAGC,aACVA,EAAe,EAACC,MAChBA,EACA,kBAAmBC,KAChBC,GACDP,EAEJ,OACEQ,IAACC,MAAY,IACPF,EACJL,KAAMA,EACNC,KAAMA,EACNC,aAAcA,EACd,kBAAiBE,GAAkBD,EACnCJ,IAAKA,GACL,IAGN,CACES,YApCmB,eAqCnBC,MAAOC"}

package/components/TabList/hooks.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var react=require('../../shared/utils/react.js');var useResizeObserver=require('../../hooks/useResizeObserver.js');var focus=require('../../mixins/focus.js');exports.useTabList=({tabList:e,defaultActiveTab:t,activeTab:s,onActiveTabChange:r})=>{const[n,c]=React.useState(t);const a=s!==void 0?s:n;const u=e[0]&&typeof e[0].props=='object'&&e[0].props!==null?e[0].props.id:void 0;return{activeTab:a,firstTab:u,onActiveTabChange:e=>{s===void 0&&c(e),r&&r(e)},getTabIndex:e=>a?e===a?0:-1:u&&e===u?0:-1}},exports.useTabListAutoGroup=({enabled:e,tabList:t})=>{const s=React.useRef(null);const[r,n]=React.useState(null);const[c,a]=React.useState(null);const[u,o]=React.useState([]);const i=React.useRef(null);const l=React.useRef(null);const b=React.useRef({});const[R,d]=React.useState({});const m=React.useMemo((()=>[s,r,c,...u]),[r,c,u]);const f=React.useCallback((()=>{if(!(i.current&&l.current&&i.current.isConnected&&l.current.isConnected&&u.length!==0))return void d({});const e={};const t=i.current.getBoundingClientRect().right-focus.focus.padding;const s=u.map((e=>e.getBoundingClientRect().right));if(s.every((e=>e<t)))s.forEach(((t,s)=>{e[s]=!0}));else{const t=l.current.getBoundingClientRect().right-focus.focus.padding;s.forEach(((s,r)=>{e[r]=s<t}))}d((t=>JSON.stringify(e)!==JSON.stringify(t)?e:t))}),[u]);useResizeObserver.useResizeObserver({enabled:e,onResize:f,target:m}),React.useLayoutEffect((()=>{let t=[];e&&(t=Object.keys(b.current).reduce(((e,t)=>(b.current[t]&&(e[t]=b.current[t]),e)),[])),o(t)}),[e,t]);const g=React.useMemo((()=>e?t.reduce(((e,t,s)=>(R[s]===!0?e.tabs.push(t):R[s]===!1&&e.menuItems.push(t),e)),{tabs:[],menuItems:[]}):{tabs:[],menuItems:[]}),[e,t,R]);return{groups:{tabs:g.tabs,menuItems:g.menuItems},refs:{root:e=>{s.current=e},container:e=>{i.current=e},track:e=>{l.current=e},tabHidden:(e,t)=>{b.current[e]=t},addon:e=>{n(e)},control:e=>{a(e)}}}},exports.useTabListItems=(e,t)=>React.useMemo((()=>{const s=react.removeFragments(e,2).filter(React.isValidElement);const r=react.removeFragments(t,2).filter(React.isValidElement);return{tabs:s,menuItems:r,combined:[...s,...r]}}),[e,t]);
+'use strict';var React=require('react');var react=require('../../shared/utils/react.js');var useResizeObserver=require('../../hooks/useResizeObserver.js');var focus=require('../../mixins/focus.js');exports.useTabList=({tabList:e,defaultActiveTab:t,activeTab:s,onActiveTabChange:r})=>{const[n,c]=React.useState(t);const a=s!==void 0?s:n;const u=e[0]&&typeof e[0].props=='object'&&e[0].props!==null?e[0].props.id:void 0;return React.useMemo((()=>({activeTab:a,firstTab:u,onActiveTabChange:e=>{s===void 0&&c(e),r&&r(e)},getTabIndex:e=>a?e===a?0:-1:u&&e===u?0:-1})),[a,u,s,r])},exports.useTabListAutoGroup=({enabled:e,tabList:t})=>{const s=React.useRef(null);const[r,n]=React.useState(null);const[c,a]=React.useState(null);const[u,o]=React.useState([]);const i=React.useRef(null);const l=React.useRef(null);const R=React.useRef({});const[b,d]=React.useState({});const m=React.useMemo((()=>[s,r,c,...u]),[r,c,u]);const f=React.useCallback((()=>{if(!(i.current&&l.current&&i.current.isConnected&&l.current.isConnected&&u.length!==0))return void d({});const e={};const t=i.current.getBoundingClientRect().right-focus.focus.padding;const s=u.map((e=>e.getBoundingClientRect().right));if(s.every((e=>e<t)))s.forEach(((t,s)=>{e[s]=!0}));else{const t=l.current.getBoundingClientRect().right-focus.focus.padding;s.forEach(((s,r)=>{e[r]=s<t}))}d((t=>JSON.stringify(e)!==JSON.stringify(t)?e:t))}),[u]);useResizeObserver.useResizeObserver({enabled:e,onResize:f,target:m}),React.useLayoutEffect((()=>{let t=[];e&&(t=Object.keys(R.current).reduce(((e,t)=>(R.current[t]&&(e[t]=R.current[t]),e)),[])),o(t)}),[e,t]);const g=React.useMemo((()=>e?t.reduce(((e,t,s)=>(b[s]===!0?e.tabs.push(t):b[s]===!1&&e.menuItems.push(t),e)),{tabs:[],menuItems:[]}):{tabs:[],menuItems:[]}),[e,t,b]);return{groups:{tabs:g.tabs,menuItems:g.menuItems},refs:{root:e=>{s.current=e},container:e=>{i.current=e},track:e=>{l.current=e},tabHidden:(e,t)=>{R.current[e]=t},addon:e=>{n(e)},control:e=>{a(e)}}}},exports.useTabListItems=(e,t)=>React.useMemo((()=>{const s=react.removeFragments(e,2).filter(React.isValidElement);const r=react.removeFragments(t,2).filter(React.isValidElement);return{tabs:s,menuItems:r,combined:[...s,...r]}}),[e,t]);
 //# sourceMappingURL=hooks.js.map

package/components/TabList/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../../src/components/TabList/hooks.ts"],"sourcesContent":["import { useState, useRef, useMemo, useCallback, useLayoutEffect, isValidElement } from 'react'\nimport { removeFragments } from 'shared/utils/react'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\nimport { focus } from 'mixins/focus'\nimport type { DomTarget, Nullable } from 'shared/types'\n\nexport const useTabList = ({\n  tabList,\n  defaultActiveTab,\n  activeTab,\n  onActiveTabChange,\n}: {\n  tabList: React.ReactElement[]\n  defaultActiveTab?: string\n  activeTab?: string\n  onActiveTabChange?: (tabId: string) => void\n}): {\n  activeTab?: string\n  firstTab?: string\n  onActiveTabChange: (tabId: string) => void\n  getTabIndex: (tabId: string) => number\n} => {\n  const [activeTabLocal, setActiveTabLocal] = useState(defaultActiveTab)\n\n  const activeTabId = activeTab !== undefined ? activeTab : activeTabLocal\n  const firstTabId =\n    tabList[0] && typeof tabList[0].props === 'object' && tabList[0].props !== null ? tabList[0].props.id : undefined\n\n  return {\n    activeTab: activeTabId,\n    firstTab: firstTabId,\n    onActiveTabChange: (tabId) => {\n      if (activeTab === undefined) setActiveTabLocal(tabId)\n      if (onActiveTabChange) onActiveTabChange(tabId)\n    },\n    getTabIndex: (tabId) => {\n      if (activeTabId) {\n        return tabId === activeTabId ? 0 : -1\n      } else if (firstTabId) {\n        return tabId === firstTabId ? 0 : -1\n      }\n\n      return -1\n    },\n  }\n}\n\nexport const useTabListItems = (\n  tabs: React.ReactNode,\n  menuItems: React.ReactNode\n): {\n  tabs: React.ReactElement[]\n  menuItems: React.ReactElement[]\n  combined: React.ReactElement[]\n} =>\n  useMemo(() => {\n    const tabListTabs = removeFragments(tabs, 2).filter(isValidElement)\n    const tabListMenuItems = removeFragments(menuItems, 2).filter(isValidElement)\n\n    return {\n      tabs: tabListTabs,\n      menuItems: tabListMenuItems,\n      combined: [...tabListTabs, ...tabListMenuItems],\n    }\n  }, [tabs, menuItems])\n\nexport const useTabListAutoGroup = ({ enabled, tabList }: { enabled: boolean; tabList: React.ReactElement[] }) => {\n  const rootRef = useRef<Nullable<HTMLElement>>(null)\n  const [addonRef, setAddonRef] = useState<Nullable<HTMLElement>>(null)\n  const [controlRef, setControlRef] = useState<Nullable<HTMLElement>>(null)\n  const [tabsHidden, setTabsHidden] = useState<HTMLElement[]>([])\n\n  const containerRef = useRef<Nullable<HTMLElement>>(null)\n  const trackRef = useRef<Nullable<HTMLElement>>(null)\n\n  const tabsHiddenRefs = useRef<Record<number, HTMLElement | null>>({})\n  const [tabsVisibility, setTabsVisibility] = useState<Record<number, boolean>>({})\n\n  const observerTargets = useMemo<DomTarget[]>(\n    () => [rootRef, addonRef, controlRef, ...tabsHidden],\n    [addonRef, controlRef, tabsHidden]\n  )\n\n  const detectTabsVisibility = useCallback(() => {\n    if (\n      !containerRef.current ||\n      !trackRef.current ||\n      !containerRef.current.isConnected ||\n      !trackRef.current.isConnected ||\n      tabsHidden.length === 0\n    ) {\n      setTabsVisibility({})\n      return\n    }\n\n    const update: Record<number, boolean> = {}\n\n    const containerRight = containerRef.current.getBoundingClientRect().right - focus.padding\n    const tabsRight = tabsHidden.map((tab) => tab.getBoundingClientRect().right)\n\n    if (tabsRight.every((tabRight) => tabRight < containerRight)) {\n      tabsRight.forEach((_, idx) => {\n        update[idx] = true\n      })\n    } else {\n      const trackRight = trackRef.current.getBoundingClientRect().right - focus.padding\n      tabsRight.forEach((tabRight, idx) => {\n        update[idx] = tabRight < trackRight\n      })\n    }\n\n    setTabsVisibility((prev) => {\n      return JSON.stringify(update) !== JSON.stringify(prev) ? update : prev\n    })\n  }, [tabsHidden])\n\n  useResizeObserver({\n    enabled,\n    onResize: detectTabsVisibility,\n    target: observerTargets,\n  })\n\n  useLayoutEffect(() => {\n    let update: HTMLElement[] = []\n\n    if (enabled) {\n      update = Object.keys(tabsHiddenRefs.current).reduce((acc, idx) => {\n        if (tabsHiddenRefs.current[idx]) {\n          acc[idx] = tabsHiddenRefs.current[idx]\n        }\n\n        return acc\n      }, [])\n    }\n\n    setTabsHidden(update)\n  }, [enabled, tabList])\n\n  const groups = useMemo(() => {\n    if (enabled) {\n      return tabList.reduce<{\n        tabs: React.ReactElement[]\n        menuItems: React.ReactElement[]\n      }>(\n        (acc, item, idx) => {\n          if (tabsVisibility[idx] === true) {\n            acc.tabs.push(item)\n          } else if (tabsVisibility[idx] === false) {\n            acc.menuItems.push(item)\n          }\n\n          return acc\n        },\n        { tabs: [], menuItems: [] }\n      )\n    }\n\n    return {\n      tabs: [],\n      menuItems: [],\n    }\n  }, [enabled, tabList, tabsVisibility])\n\n  return {\n    groups: {\n      tabs: groups.tabs,\n      menuItems: groups.menuItems,\n    },\n    refs: {\n      root: (node: HTMLElement | null) => {\n        rootRef.current = node\n      },\n      container: (node: HTMLElement | null) => {\n        containerRef.current = node\n      },\n      track: (node: HTMLElement | null) => {\n        trackRef.current = node\n      },\n      tabHidden: (idx: number, node: HTMLElement | null) => {\n        tabsHiddenRefs.current[idx] = node\n      },\n      addon: (node: HTMLElement | null) => {\n        setAddonRef(node)\n      },\n      control: (node: HTMLElement | null) => {\n        setControlRef(node)\n      },\n    },\n  }\n}\n"],"names":["useTabList","tabList","defaultActiveTab","activeTab","onActiveTabChange","activeTabLocal","setActiveTabLocal","useState","activeTabId","undefined","firstTabId","props","id","firstTab","tabId","getTabIndex","useTabListAutoGroup","enabled","rootRef","useRef","addonRef","setAddonRef","controlRef","setControlRef","tabsHidden","setTabsHidden","containerRef","trackRef","tabsHiddenRefs","tabsVisibility","setTabsVisibility","observerTargets","useMemo","detectTabsVisibility","useCallback","current","isConnected","length","update","containerRight","getBoundingClientRect","right","focus","padding","tabsRight","map","tab","every","tabRight","forEach","_","idx","trackRight","prev","JSON","stringify","useResizeObserver","onResize","target","useLayoutEffect","Object","keys","reduce","acc","groups","item","tabs","push","menuItems","refs","root","node","container","track","tabHidden","addon","control","useTabListItems","tabListTabs","removeFragments","filter","isValidElement","tabListMenuItems","combined"],"mappings":"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"}
+{"version":3,"file":"hooks.js","sources":["../../../../src/components/TabList/hooks.ts"],"sourcesContent":["import { useState, useRef, useMemo, useCallback, useLayoutEffect, isValidElement } from 'react'\nimport { removeFragments } from 'shared/utils/react'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\nimport { focus } from 'mixins/focus'\nimport type { DomTarget, Nullable } from 'shared/types'\n\nexport const useTabList = ({\n  tabList,\n  defaultActiveTab,\n  activeTab,\n  onActiveTabChange,\n}: {\n  tabList: React.ReactElement[]\n  defaultActiveTab?: string\n  activeTab?: string\n  onActiveTabChange?: (tabId: string) => void\n}): {\n  activeTab?: string\n  firstTab?: string\n  onActiveTabChange: (tabId: string) => void\n  getTabIndex: (tabId: string) => number\n} => {\n  const [activeTabLocal, setActiveTabLocal] = useState(defaultActiveTab)\n\n  const activeTabId = activeTab !== undefined ? activeTab : activeTabLocal\n  const firstTabId =\n    tabList[0] && typeof tabList[0].props === 'object' && tabList[0].props !== null ? tabList[0].props.id : undefined\n\n  return useMemo(\n    () => ({\n      activeTab: activeTabId,\n      firstTab: firstTabId,\n      onActiveTabChange: (tabId) => {\n        if (activeTab === undefined) setActiveTabLocal(tabId)\n        if (onActiveTabChange) onActiveTabChange(tabId)\n      },\n      getTabIndex: (tabId) => {\n        if (activeTabId) {\n          return tabId === activeTabId ? 0 : -1\n        } else if (firstTabId) {\n          return tabId === firstTabId ? 0 : -1\n        }\n\n        return -1\n      },\n    }),\n    [activeTabId, firstTabId, activeTab, onActiveTabChange]\n  )\n}\n\nexport const useTabListItems = (\n  tabs: React.ReactNode,\n  menuItems: React.ReactNode\n): {\n  tabs: React.ReactElement[]\n  menuItems: React.ReactElement[]\n  combined: React.ReactElement[]\n} =>\n  useMemo(() => {\n    const tabListTabs = removeFragments(tabs, 2).filter(isValidElement)\n    const tabListMenuItems = removeFragments(menuItems, 2).filter(isValidElement)\n\n    return {\n      tabs: tabListTabs,\n      menuItems: tabListMenuItems,\n      combined: [...tabListTabs, ...tabListMenuItems],\n    }\n  }, [tabs, menuItems])\n\nexport const useTabListAutoGroup = ({ enabled, tabList }: { enabled: boolean; tabList: React.ReactElement[] }) => {\n  const rootRef = useRef<Nullable<HTMLElement>>(null)\n  const [addonRef, setAddonRef] = useState<Nullable<HTMLElement>>(null)\n  const [controlRef, setControlRef] = useState<Nullable<HTMLElement>>(null)\n  const [tabsHidden, setTabsHidden] = useState<HTMLElement[]>([])\n\n  const containerRef = useRef<Nullable<HTMLElement>>(null)\n  const trackRef = useRef<Nullable<HTMLElement>>(null)\n\n  const tabsHiddenRefs = useRef<Record<number, HTMLElement | null>>({})\n  const [tabsVisibility, setTabsVisibility] = useState<Record<number, boolean>>({})\n\n  const observerTargets = useMemo<DomTarget[]>(\n    () => [rootRef, addonRef, controlRef, ...tabsHidden],\n    [addonRef, controlRef, tabsHidden]\n  )\n\n  const detectTabsVisibility = useCallback(() => {\n    if (\n      !containerRef.current ||\n      !trackRef.current ||\n      !containerRef.current.isConnected ||\n      !trackRef.current.isConnected ||\n      tabsHidden.length === 0\n    ) {\n      setTabsVisibility({})\n      return\n    }\n\n    const update: Record<number, boolean> = {}\n\n    const containerRight = containerRef.current.getBoundingClientRect().right - focus.padding\n    const tabsRight = tabsHidden.map((tab) => tab.getBoundingClientRect().right)\n\n    if (tabsRight.every((tabRight) => tabRight < containerRight)) {\n      tabsRight.forEach((_, idx) => {\n        update[idx] = true\n      })\n    } else {\n      const trackRight = trackRef.current.getBoundingClientRect().right - focus.padding\n      tabsRight.forEach((tabRight, idx) => {\n        update[idx] = tabRight < trackRight\n      })\n    }\n\n    setTabsVisibility((prev) => {\n      return JSON.stringify(update) !== JSON.stringify(prev) ? update : prev\n    })\n  }, [tabsHidden])\n\n  useResizeObserver({\n    enabled,\n    onResize: detectTabsVisibility,\n    target: observerTargets,\n  })\n\n  useLayoutEffect(() => {\n    let update: HTMLElement[] = []\n\n    if (enabled) {\n      update = Object.keys(tabsHiddenRefs.current).reduce((acc, idx) => {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        if (tabsHiddenRefs.current[idx]) {\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          acc[idx] = tabsHiddenRefs.current[idx]\n        }\n\n        return acc\n      }, [])\n    }\n\n    setTabsHidden(update)\n  }, [enabled, tabList])\n\n  const groups = useMemo(() => {\n    if (enabled) {\n      return tabList.reduce<{\n        tabs: React.ReactElement[]\n        menuItems: React.ReactElement[]\n      }>(\n        (acc, item, idx) => {\n          if (tabsVisibility[idx] === true) {\n            acc.tabs.push(item)\n          } else if (tabsVisibility[idx] === false) {\n            acc.menuItems.push(item)\n          }\n\n          return acc\n        },\n        { tabs: [], menuItems: [] }\n      )\n    }\n\n    return {\n      tabs: [],\n      menuItems: [],\n    }\n  }, [enabled, tabList, tabsVisibility])\n\n  return {\n    groups: {\n      tabs: groups.tabs,\n      menuItems: groups.menuItems,\n    },\n    refs: {\n      root: (node: HTMLElement | null) => {\n        rootRef.current = node\n      },\n      container: (node: HTMLElement | null) => {\n        containerRef.current = node\n      },\n      track: (node: HTMLElement | null) => {\n        trackRef.current = node\n      },\n      tabHidden: (idx: number, node: HTMLElement | null) => {\n        tabsHiddenRefs.current[idx] = node\n      },\n      addon: (node: HTMLElement | null) => {\n        setAddonRef(node)\n      },\n      control: (node: HTMLElement | null) => {\n        setControlRef(node)\n      },\n    },\n  }\n}\n"],"names":["useTabList","tabList","defaultActiveTab","activeTab","onActiveTabChange","activeTabLocal","setActiveTabLocal","useState","activeTabId","undefined","firstTabId","props","id","useMemo","firstTab","tabId","getTabIndex","useTabListAutoGroup","enabled","rootRef","useRef","addonRef","setAddonRef","controlRef","setControlRef","tabsHidden","setTabsHidden","containerRef","trackRef","tabsHiddenRefs","tabsVisibility","setTabsVisibility","observerTargets","detectTabsVisibility","useCallback","current","isConnected","length","update","containerRight","getBoundingClientRect","right","focus","padding","tabsRight","map","tab","every","tabRight","forEach","_","idx","trackRight","prev","JSON","stringify","useResizeObserver","onResize","target","useLayoutEffect","Object","keys","reduce","acc","groups","item","tabs","push","menuItems","refs","root","node","container","track","tabHidden","addon","control","useTabListItems","tabListTabs","removeFragments","filter","isValidElement","tabListMenuItems","combined"],"mappings":"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"}

package/components/TabList/hooks.mjs

@@ -1,2 +1,2 @@
-import{useState,useMemo,isValidElement,useRef,useCallback,useLayoutEffect}from'react';import{removeFragments}from'../../shared/utils/react.mjs';import{useResizeObserver}from'../../hooks/useResizeObserver.mjs';import{focus}from'../../mixins/focus.mjs';const useTabList=({tabList:e,defaultActiveTab:t,activeTab:s,onActiveTabChange:n})=>{const[r,o]=useState(t);const u=s!==void 0?s:r;const c=e[0]&&typeof e[0].props=='object'&&e[0].props!==null?e[0].props.id:void 0;return{activeTab:u,firstTab:c,onActiveTabChange:e=>{s===void 0&&o(e),n&&n(e)},getTabIndex:e=>u?e===u?0:-1:c&&e===c?0:-1}};const useTabListItems=(e,t)=>useMemo((()=>{const s=removeFragments(e,2).filter(isValidElement);const n=removeFragments(t,2).filter(isValidElement);return{tabs:s,menuItems:n,combined:[...s,...n]}}),[e,t]);const useTabListAutoGroup=({enabled:e,tabList:t})=>{const s=useRef(null);const[n,r]=useState(null);const[o,u]=useState(null);const[c,i]=useState([]);const a=useRef(null);const m=useRef(null);const l=useRef({});const[b,d]=useState({});const f=useMemo((()=>[s,n,o,...c]),[n,o,c]);const g=useCallback((()=>{if(!(a.current&&m.current&&a.current.isConnected&&m.current.isConnected&&c.length!==0))return void d({});const e={};const t=a.current.getBoundingClientRect().right-focus.padding;const s=c.map((e=>e.getBoundingClientRect().right));if(s.every((e=>e<t)))s.forEach(((t,s)=>{e[s]=!0}));else{const t=m.current.getBoundingClientRect().right-focus.padding;s.forEach(((s,n)=>{e[n]=s<t}))}d((t=>JSON.stringify(e)!==JSON.stringify(t)?e:t))}),[c]);useResizeObserver({enabled:e,onResize:g,target:f}),useLayoutEffect((()=>{let t=[];e&&(t=Object.keys(l.current).reduce(((e,t)=>(l.current[t]&&(e[t]=l.current[t]),e)),[])),i(t)}),[e,t]);const p=useMemo((()=>e?t.reduce(((e,t,s)=>(b[s]===!0?e.tabs.push(t):b[s]===!1&&e.menuItems.push(t),e)),{tabs:[],menuItems:[]}):{tabs:[],menuItems:[]}),[e,t,b]);return{groups:{tabs:p.tabs,menuItems:p.menuItems},refs:{root:e=>{s.current=e},container:e=>{a.current=e},track:e=>{m.current=e},tabHidden:(e,t)=>{l.current[e]=t},addon:e=>{r(e)},control:e=>{u(e)}}}};export{useTabList,useTabListAutoGroup,useTabListItems};
+import{useState,useMemo,isValidElement,useRef,useCallback,useLayoutEffect}from'react';import{removeFragments}from'../../shared/utils/react.mjs';import{useResizeObserver}from'../../hooks/useResizeObserver.mjs';import{focus}from'../../mixins/focus.mjs';const useTabList=({tabList:e,defaultActiveTab:t,activeTab:s,onActiveTabChange:n})=>{const[r,o]=useState(t);const u=s!==void 0?s:r;const c=e[0]&&typeof e[0].props=='object'&&e[0].props!==null?e[0].props.id:void 0;return useMemo((()=>({activeTab:u,firstTab:c,onActiveTabChange:e=>{s===void 0&&o(e),n&&n(e)},getTabIndex:e=>u?e===u?0:-1:c&&e===c?0:-1})),[u,c,s,n])};const useTabListItems=(e,t)=>useMemo((()=>{const s=removeFragments(e,2).filter(isValidElement);const n=removeFragments(t,2).filter(isValidElement);return{tabs:s,menuItems:n,combined:[...s,...n]}}),[e,t]);const useTabListAutoGroup=({enabled:e,tabList:t})=>{const s=useRef(null);const[n,r]=useState(null);const[o,u]=useState(null);const[c,i]=useState([]);const a=useRef(null);const m=useRef(null);const l=useRef({});const[b,d]=useState({});const f=useMemo((()=>[s,n,o,...c]),[n,o,c]);const g=useCallback((()=>{if(!(a.current&&m.current&&a.current.isConnected&&m.current.isConnected&&c.length!==0))return void d({});const e={};const t=a.current.getBoundingClientRect().right-focus.padding;const s=c.map((e=>e.getBoundingClientRect().right));if(s.every((e=>e<t)))s.forEach(((t,s)=>{e[s]=!0}));else{const t=m.current.getBoundingClientRect().right-focus.padding;s.forEach(((s,n)=>{e[n]=s<t}))}d((t=>JSON.stringify(e)!==JSON.stringify(t)?e:t))}),[c]);useResizeObserver({enabled:e,onResize:g,target:f}),useLayoutEffect((()=>{let t=[];e&&(t=Object.keys(l.current).reduce(((e,t)=>(l.current[t]&&(e[t]=l.current[t]),e)),[])),i(t)}),[e,t]);const p=useMemo((()=>e?t.reduce(((e,t,s)=>(b[s]===!0?e.tabs.push(t):b[s]===!1&&e.menuItems.push(t),e)),{tabs:[],menuItems:[]}):{tabs:[],menuItems:[]}),[e,t,b]);return{groups:{tabs:p.tabs,menuItems:p.menuItems},refs:{root:e=>{s.current=e},container:e=>{a.current=e},track:e=>{m.current=e},tabHidden:(e,t)=>{l.current[e]=t},addon:e=>{r(e)},control:e=>{u(e)}}}};export{useTabList,useTabListAutoGroup,useTabListItems};
 //# sourceMappingURL=hooks.mjs.map