@foxford/ui 2.75.0 → 2.76.0-beta-7e5a1c1-20250711

package/components/TabList/TabList.js

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

package/components/TabList/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","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","jsxs","role","onKeyDown","document","activeElement","HTMLElement","matches","keyboardKeys","Home","validate","key","End","ArrowRight","ArrowLeft","filter","closest","length","preventDefault","navigateHorizontalList","SELECTORS_FOCUSABLE","container","hidden","_jsx","jsx","IconButton","ScrollFading","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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"}

package/components/TabList/TabList.mjs

@@ -0,0 +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};
+//# sourceMappingURL=TabList.mjs.map

package/components/TabList/TabList.mjs.map

@@ -0,0 +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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"}

package/components/TabList/TabListMenuTab.js

@@ -0,0 +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};
+//# sourceMappingURL=TabListMenuTab.js.map

package/components/TabList/TabListMenuTab.js.map

@@ -0,0 +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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"}

package/components/TabList/TabListMenuTab.mjs

@@ -0,0 +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};
+//# sourceMappingURL=TabListMenuTab.mjs.map

package/components/TabList/TabListMenuTab.mjs.map

@@ -0,0 +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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"}

package/components/TabList/TabListPanel.js

@@ -0,0 +1,2 @@
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');const TabListPanel=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{role:s="tabpanel",size:a="m",borderRadius:i=0,tabId:t,'aria-labelledby':l,...d}=e;return jsxRuntime.jsx(style.Panel,{...d,role:s,size:a,borderRadius:i,"aria-labelledby":l??t,ref:r})})),{displayName:'TabListPanel',sizes:sizes.SIZES_PANEL});exports.TabListPanel=TabListPanel;
+//# sourceMappingURL=TabListPanel.js.map

package/components/TabList/TabListPanel.js.map

@@ -0,0 +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"}

package/components/TabList/TabListPanel.mjs

@@ -0,0 +1,2 @@
+import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_PANEL}from'./sizes.mjs';import{Panel}from'./style.mjs';import{jsx}from'react/jsx-runtime';const TabListPanel=withMergedProps(forwardRef(((r,e)=>{const{role:a="tabpanel",size:s="m",borderRadius:o=0,tabId:i,'aria-labelledby':t,...l}=r;return jsx(Panel,{...l,role:a,size:s,borderRadius:o,"aria-labelledby":t??i,ref:e})})),{displayName:'TabListPanel',sizes:SIZES_PANEL});export{TabListPanel};
+//# sourceMappingURL=TabListPanel.mjs.map

package/components/TabList/TabListPanel.mjs.map

@@ -0,0 +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"}

package/components/TabList/hooks.js

@@ -0,0 +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]);
+//# sourceMappingURL=hooks.js.map

package/components/TabList/hooks.js.map

@@ -0,0 +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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"}

package/components/TabList/hooks.mjs

@@ -0,0 +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};
+//# sourceMappingURL=hooks.mjs.map

package/components/TabList/hooks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.mjs","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","useTabListItems","tabs","menuItems","useMemo","tabListTabs","removeFragments","filter","isValidElement","tabListMenuItems","combined","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","push","refs","root","node","container","track","tabHidden","addon","control"],"mappings":"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"}

package/components/TabList/layouts.js

@@ -0,0 +1,2 @@
+'use strict';const LAYOUTS_DIVIDER={vertical:{bottom:0},horizontal:{bottom:require('../../mixins/focus.js').focus.padding}};exports.LAYOUTS={vertical:{flexDirection:'column'},horizontal:{flexDirection:'row'}},exports.LAYOUTS_ADDON={vertical:{flexWrap:'wrap'},horizontal:{flexWrap:'nowrap'}},exports.LAYOUTS_DIVIDER=LAYOUTS_DIVIDER;
+//# sourceMappingURL=layouts.js.map

package/components/TabList/layouts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layouts.js","sources":["../../../../src/components/TabList/layouts.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { focus } from 'mixins/focus'\nimport type { Layout } from './types'\n\nexport const LAYOUTS: Record<Layout, CSSProperties> = {\n  vertical: {\n    flexDirection: 'column',\n  },\n  horizontal: {\n    flexDirection: 'row',\n  },\n}\n\nexport const LAYOUTS_DIVIDER: Record<Layout, CSSProperties> = {\n  vertical: {\n    bottom: 0,\n  },\n  horizontal: {\n    bottom: focus.padding,\n  },\n}\n\nexport const LAYOUTS_ADDON: Record<Layout, CSSProperties> = {\n  vertical: {\n    flexWrap: 'wrap',\n  },\n  horizontal: {\n    flexWrap: 'nowrap',\n  },\n}\n"],"names":["LAYOUTS_DIVIDER","vertical","bottom","horizontal","focus","padding","flexDirection","flexWrap"],"mappings":"aAaO,MAAMA,gBAAiD,CAC5DC,SAAU,CACRC,OAAQ,GAEVC,WAAY,CACVD,wCAAaE,MAACC,0BAdoC,CACpDJ,SAAU,CACRK,cAAe,UAEjBH,WAAY,CACVG,cAAe,8BAayC,CAC1DL,SAAU,CACRM,SAAU,QAEZJ,WAAY,CACVI,SAAU"}

package/components/TabList/layouts.mjs

@@ -0,0 +1,2 @@
+import{focus}from'../../mixins/focus.mjs';const LAYOUTS={vertical:{flexDirection:'column'},horizontal:{flexDirection:'row'}};const LAYOUTS_DIVIDER={vertical:{bottom:0},horizontal:{bottom:focus.padding}};const LAYOUTS_ADDON={vertical:{flexWrap:'wrap'},horizontal:{flexWrap:'nowrap'}};export{LAYOUTS,LAYOUTS_ADDON,LAYOUTS_DIVIDER};
+//# sourceMappingURL=layouts.mjs.map

package/components/TabList/layouts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"layouts.mjs","sources":["../../../../src/components/TabList/layouts.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { focus } from 'mixins/focus'\nimport type { Layout } from './types'\n\nexport const LAYOUTS: Record<Layout, CSSProperties> = {\n  vertical: {\n    flexDirection: 'column',\n  },\n  horizontal: {\n    flexDirection: 'row',\n  },\n}\n\nexport const LAYOUTS_DIVIDER: Record<Layout, CSSProperties> = {\n  vertical: {\n    bottom: 0,\n  },\n  horizontal: {\n    bottom: focus.padding,\n  },\n}\n\nexport const LAYOUTS_ADDON: Record<Layout, CSSProperties> = {\n  vertical: {\n    flexWrap: 'wrap',\n  },\n  horizontal: {\n    flexWrap: 'nowrap',\n  },\n}\n"],"names":["LAYOUTS","vertical","flexDirection","horizontal","LAYOUTS_DIVIDER","bottom","focus","padding","LAYOUTS_ADDON","flexWrap"],"mappings":"0CAIO,MAAMA,QAAyC,CACpDC,SAAU,CACRC,cAAe,UAEjBC,WAAY,CACVD,cAAe,QAIZ,MAAME,gBAAiD,CAC5DH,SAAU,CACRI,OAAQ,GAEVF,WAAY,CACVE,OAAQC,MAAMC,UAIX,MAAMC,cAA+C,CAC1DP,SAAU,CACRQ,SAAU,QAEZN,WAAY,CACVM,SAAU"}

package/components/TabList/sizes.js

@@ -0,0 +1,2 @@
+'use strict';var focus=require('../../mixins/focus.js');var constants=require('../IconButton/constants.js');const SIZES_PANEL={l:{padding:focus.focus.padding},m:{padding:focus.focus.padding},s:{padding:focus.focus.padding}};const SIZES_SCROLL_CONTROL={l:constants.SIZES.xl,m:constants.SIZES.xl,s:constants.SIZES.l};exports.SIZES={l:{width:'100%'},m:{width:'100%'},s:{width:'100%'}},exports.SIZES_PANEL=SIZES_PANEL,exports.SIZES_SCROLL_CONTROL=SIZES_SCROLL_CONTROL;
+//# sourceMappingURL=sizes.js.map

package/components/TabList/sizes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.js","sources":["../../../../src/components/TabList/sizes.ts"],"sourcesContent":["import { focus } from 'mixins/focus'\nimport { SIZES as SIZES_ICON_BUTTON } from 'components/IconButton'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, React.CSSProperties> = {\n  l: { width: '100%' },\n  m: { width: '100%' },\n  s: { width: '100%' },\n}\n\nexport const SIZES_PANEL: Record<Size, React.CSSProperties> = {\n  l: { padding: focus.padding },\n  m: { padding: focus.padding },\n  s: { padding: focus.padding },\n}\n\nexport const SIZES_SCROLL_CONTROL: Record<Size, React.CSSProperties> = {\n  l: SIZES_ICON_BUTTON.xl,\n  m: SIZES_ICON_BUTTON.xl,\n  s: SIZES_ICON_BUTTON.l,\n}\n"],"names":["SIZES_PANEL","l","padding","focus","m","s","SIZES_SCROLL_CONTROL","SIZES_ICON_BUTTON","SIZES","xl","width"],"mappings":"4GAUO,MAAMA,YAAiD,CAC5DC,EAAG,CAAEC,QAASC,MAAKA,MAACD,SACpBE,EAAG,CAAEF,QAASC,MAAKA,MAACD,SACpBG,EAAG,CAAEH,QAASC,MAAKA,MAACD,UAGf,MAAMI,qBAA0D,CACrEL,EAAGM,UAAiBC,MAACC,GACrBL,EAAGG,UAAiBC,MAACC,GACrBJ,EAAGE,UAAiBC,MAACP,iBAfiC,CACtDA,EAAG,CAAES,MAAO,QACZN,EAAG,CAAEM,MAAO,QACZL,EAAG,CAAEK,MAAO"}

package/components/TabList/sizes.mjs

@@ -0,0 +1,2 @@
+import{focus}from'../../mixins/focus.mjs';import{SIZES as SIZES$1}from'../IconButton/constants.mjs';const SIZES={l:{width:'100%'},m:{width:'100%'},s:{width:'100%'}};const SIZES_PANEL={l:{padding:focus.padding},m:{padding:focus.padding},s:{padding:focus.padding}};const SIZES_SCROLL_CONTROL={l:SIZES$1.xl,m:SIZES$1.xl,s:SIZES$1.l};export{SIZES,SIZES_PANEL,SIZES_SCROLL_CONTROL};
+//# sourceMappingURL=sizes.mjs.map

package/components/TabList/sizes.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.mjs","sources":["../../../../src/components/TabList/sizes.ts"],"sourcesContent":["import { focus } from 'mixins/focus'\nimport { SIZES as SIZES_ICON_BUTTON } from 'components/IconButton'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, React.CSSProperties> = {\n  l: { width: '100%' },\n  m: { width: '100%' },\n  s: { width: '100%' },\n}\n\nexport const SIZES_PANEL: Record<Size, React.CSSProperties> = {\n  l: { padding: focus.padding },\n  m: { padding: focus.padding },\n  s: { padding: focus.padding },\n}\n\nexport const SIZES_SCROLL_CONTROL: Record<Size, React.CSSProperties> = {\n  l: SIZES_ICON_BUTTON.xl,\n  m: SIZES_ICON_BUTTON.xl,\n  s: SIZES_ICON_BUTTON.l,\n}\n"],"names":["SIZES","l","width","m","s","SIZES_PANEL","padding","focus","SIZES_SCROLL_CONTROL","SIZES_ICON_BUTTON","xl"],"mappings":"oGAIO,MAAMA,MAA2C,CACtDC,EAAG,CAAEC,MAAO,QACZC,EAAG,CAAED,MAAO,QACZE,EAAG,CAAEF,MAAO,SAGP,MAAMG,YAAiD,CAC5DJ,EAAG,CAAEK,QAASC,MAAMD,SACpBH,EAAG,CAAEG,QAASC,MAAMD,SACpBF,EAAG,CAAEE,QAASC,MAAMD,UAGf,MAAME,qBAA0D,CACrEP,EAAGQ,QAAkBC,GACrBP,EAAGM,QAAkBC,GACrBN,EAAGK,QAAkBR"}

package/components/TabList/style.js

@@ -0,0 +1,2 @@
+'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var responsiveLayout=require('../../mixins/responsive-layout.js');var focus=require('../../mixins/focus.js');var Divider=require('../Divider/Divider.js');var Icon=require('../Icon/Icon.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardTabListProp=style.createShouldForwardProp(filterLayoutProps);const shouldForwardTabListPanelProp=style.createShouldForwardProp((o=>!['borderRadius'].includes(o)));const Control=styled__default.default.div.withConfig({shouldForwardProp:o=>!['hidden'].includes(o)}).withConfig({displayName:"TabList__Control",componentId:"ui__sc-1cz7fqp-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;padding:","px;pointer-events:auto;",""],focus.focus.padding,(o=>o.hidden&&"\n      & * {\n        visibility: hidden !important;\n      }\n    "));const ScrollFading=styled__default.default.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__ScrollFading",componentId:"ui__sc-1cz7fqp-1"})(["box-sizing:border-box;position:relative;width:35px;",""],(o=>`\n    background-image: linear-gradient(${o.after?-90:90}deg, currentcolor, transparent);\n  `));const Floats=styled__default.default.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__Floats",componentId:"ui__sc-1cz7fqp-2"})(["box-sizing:border-box;display:flex;align-items:stretch;position:absolute;pointer-events:none;top:0;bottom:0;"," ",""],(o=>o.after?'right: 0;':'left: 0;'),(o=>o.hidden&&"\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    "));const Addon=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__Addon",componentId:"ui__sc-1cz7fqp-3"})(["box-sizing:border-box;display:flex;position:relative;align-items:center;padding:","px;",""],focus.focus.padding,responsiveLayout.responsiveLayout);const DividerPositioned=styled__default.default(Divider.Divider).withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__DividerPositioned",componentId:"ui__sc-1cz7fqp-4"})(["position:absolute;right:0px;left:0px;",""],responsiveLayout.responsiveLayout);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardTabListProp}).withConfig({displayName:"TabList__Root",componentId:"ui__sc-1cz7fqp-5"})(["box-sizing:border-box;isolation:isolate;position:relative;display:flex;"," & ",",& ","{z-index:1;}& [role='tab'] [data-ui-tab-underline]::after,& [role='tab']:focus-visible,& ","{z-index:2;}& "," ","{z-index:3;}"," "," ",""],(o=>{return`\n  &,\n  & ${Control} {\n    background-color: ${(e={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']}).backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${e.backgroundColor};\n  }\n`;var e}),ScrollFading,DividerPositioned,Addon,Floats,Control,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,responsiveLayout.responsiveLayout);const Container=styled__default.default.div.withConfig({displayName:"TabList__Container",componentId:"ui__sc-1cz7fqp-6"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;overflow:hidden;"]);const TabsTrack=styled__default.default.div.withConfig({displayName:"TabList__TabsTrack",componentId:"ui__sc-1cz7fqp-7"})(["box-sizing:border-box;position:relative;display:flex;align-items:stretch;overflow:hidden;flex-grow:1;"]);const TrackScrollable=styled__default.default.div.withConfig({displayName:"TabList__TrackScrollable",componentId:"ui__sc-1cz7fqp-8"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:auto;overscroll-behavior:contain;scroll-padding-right:20px;scroll-padding-left:20px;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;height:0;width:0;}"],focus.focus.padding);const Hidden=styled__default.default.div.withConfig({displayName:"TabList__Hidden",componentId:"ui__sc-1cz7fqp-9"})(["box-sizing:border-box;display:flex;align-items:stretch;flex-grow:1;height:0px;&,& *{visibility:hidden !important;}"]);const TabsHidden=styled__default.default.div.withConfig({displayName:"TabList__TabsHidden",componentId:"ui__sc-1cz7fqp-10"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:hidden;"],focus.focus.padding);const TabWrapper=styled__default.default.div.withConfig({displayName:"TabList__TabWrapper",componentId:"ui__sc-1cz7fqp-11"})(["box-sizing:border-box;display:flex;flex-shrink:0;"]);const List=styled__default.default.div.withConfig({displayName:"TabList__List",componentId:"ui__sc-1cz7fqp-12"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;flex-grow:1;&:focus{outline:none;}"]);const Menu=styled__default.default.ul.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"TabList__Menu",componentId:"ui__sc-1cz7fqp-13"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;appearance:none;margin:0;border-radius:12px;padding:","px;&:focus{outline:none;}",""],focus.focus.padding,(o=>{return`\n  background-color: ${(e={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary'],shadowColor:o.palette.shadowColor??o.theme.colors['bg-oncolor-hover']}).backgroundColor};\n  box-shadow: 0px 6px 20px ${e.shadowColor};\n`;var e}));const MenuItem=styled__default.default.li.withConfig({displayName:"TabList__MenuItem",componentId:"ui__sc-1cz7fqp-14"})(["display:flex;appearance:none;list-style-type:none;&:not(:last-child){margin-bottom:","px;}& > *{flex-grow:1;}"],focus.focus.padding);const Panel=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardTabListPanelProp}).withConfig({displayName:"TabList__Panel",componentId:"ui__sc-1cz7fqp-15"})(["box-sizing:border-box;"," "," "," ",""],(o=>`\n    border-radius: ${o.borderRadius}px;  \n  `),(o=>`\n  background-color: ${o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']};\n`),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const IconAnimated=styled__default.default(Icon.Icon).withConfig({shouldForwardProp:o=>o!=='rotate'}).withConfig({displayName:"TabList__IconAnimated",componentId:"ui__sc-1cz7fqp-16"})(["transition-property:transform;transition-duration:250ms;transform-origin:center;@media (prefers-reduced-motion:reduce){transition-duration:0ms;}",""],(o=>`\n    transform: rotate(${o.rotate?180:0}deg);\n  `));exports.Addon=Addon,exports.Container=Container,exports.Control=Control,exports.DividerPositioned=DividerPositioned,exports.Floats=Floats,exports.Hidden=Hidden,exports.IconAnimated=IconAnimated,exports.List=List,exports.Menu=Menu,exports.MenuItem=MenuItem,exports.Panel=Panel,exports.Root=Root,exports.ScrollFading=ScrollFading,exports.TabWrapper=TabWrapper,exports.TabsHidden=TabsHidden,exports.TabsTrack=TabsTrack,exports.TrackScrollable=TrackScrollable;
+//# sourceMappingURL=style.js.map

package/components/TabList/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../../src/components/TabList/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { Icon } from 'components/Icon'\nimport { Divider } from 'components/Divider'\nimport type { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport type { CSSColor } from 'shared/types'\nimport type {\n  Layout,\n  TabListPalette,\n  TabListMenuPalette,\n  TabListPanelPalette,\n  StyledTabListProps,\n  StyledTabListPanelProps,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardTabListProp = createShouldForwardProp(filterLayoutProps)\n\nconst shouldForwardTabListPanelProp = createShouldForwardProp((propKey) => !['borderRadius'].includes(propKey))\n\nexport const Control = styled.div.withConfig({\n  shouldForwardProp: (propKey) => !['hidden'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: ${focus.padding}px;\n  pointer-events: auto;\n  ${(props) =>\n    props.hidden &&\n    `\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const ScrollFading = styled.div.withConfig<{ after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  width: 35px;\n  ${(props) => `\n    background-image: linear-gradient(${props.after ? -90 : 90}deg, currentcolor, transparent);\n  `}\n`\n\nconst template = (palette: Pick<TabListPalette, 'backgroundColor'>) => `\n  &,\n  & ${Control} {\n    background-color: ${palette.backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${palette.backgroundColor};\n  }\n`\n\nconst templateMenu = (palette: TabListMenuPalette) => `\n  background-color: ${palette.backgroundColor};\n  box-shadow: 0px 6px 20px ${palette.shadowColor};\n`\n\nconst templatePanel = (palette: TabListPanelPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const Floats = styled.div.withConfig<{ hidden: boolean; after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  bottom: 0;\n  ${(props) => (props.after ? 'right: 0;' : 'left: 0;')}\n  ${(props) =>\n    props.hidden &&\n    `\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const Addon = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ${focus.padding}px;\n\n  ${responsiveLayout}\n`\n\nexport const DividerPositioned = styled(Divider).withConfig<ResponsiveLayoutInterpolationProps>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  position: absolute;\n  right: 0px;\n  left: 0px;\n\n  ${responsiveLayout}\n`\n\nexport const Root = styled.div.withConfig<StyledTabListProps>({\n  shouldForwardProp: shouldForwardTabListProp,\n})`\n  box-sizing: border-box;\n  isolation: isolate;\n  position: relative;\n  display: flex;\n\n  ${(props) =>\n    template({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  & ${ScrollFading},  \n  & ${DividerPositioned} {\n    z-index: 1;\n  }\n  & [role='tab'] [data-ui-tab-underline]::after,\n  & [role='tab']:focus-visible,\n  & ${Addon} {\n    z-index: 2;\n  }\n  & ${Floats} ${Control} {\n    z-index: 3;\n  }\n\n  ${responsiveSize}\n  ${responsiveMargin}\n  ${responsiveLayout}\n`\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  overflow: hidden;\n`\n\nexport const TabsTrack = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const TrackScrollable = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: auto;\n  overscroll-behavior: contain;\n  scroll-padding-right: 20px;\n  scroll-padding-left: 20px;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n`\n\nexport const Hidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  flex-grow: 1;\n  height: 0px;\n  &,\n  & * {\n    visibility: hidden !important;\n  }\n`\n\nexport const TabsHidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: hidden;\n`\n\nexport const TabWrapper = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n`\n\nexport const List = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  flex-grow: 1;\n  &:focus {\n    outline: none;\n  }\n`\n\nexport const Menu = styled.ul.withConfig<{\n  palette: {\n    backgroundColor?: CSSColor\n    shadowColor?: CSSColor\n  }\n}>({\n  shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  appearance: none;\n  margin: 0;\n  border-radius: 12px;\n  padding: ${focus.padding}px;\n  &:focus {\n    outline: none;\n  }\n\n  ${(props) =>\n    templateMenu({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.palette.shadowColor ?? props.theme.colors['bg-oncolor-hover'],\n    })}\n`\n\nexport const MenuItem = styled.li`\n  display: flex;\n  appearance: none;\n  list-style-type: none;\n  &:not(:last-child) {\n    margin-bottom: ${focus.padding}px;\n  }\n  & > * {\n    flex-grow: 1;\n  }\n`\n\nexport const Panel = styled.div.withConfig<StyledTabListPanelProps>({\n  shouldForwardProp: shouldForwardTabListPanelProp,\n})`\n  box-sizing: border-box;\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;  \n  `}\n\n  ${(props) =>\n    templatePanel({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const IconAnimated = styled(Icon).withConfig<{ rotate: boolean }>({\n  shouldForwardProp: (propKey) => propKey !== 'rotate',\n})`\n  transition-property: transform;\n  transition-duration: 250ms;\n  transform-origin: center;\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n  ${(props) => `\n    transform: rotate(${props.rotate ? 180 : 0}deg);\n  `}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardTabListProp","createShouldForwardProp","shouldForwardTabListPanelProp","Control","styled","div","withConfig","shouldForwardProp","displayName","componentId","focus","padding","props","hidden","ScrollFading","after","Floats","Addon","responsiveLayout","DividerPositioned","default","Divider","Root","template","palette","backgroundColor","theme","colors","responsiveSize","responsiveMargin","Container","TabsTrack","TrackScrollable","Hidden","TabsHidden","TabWrapper","List","Menu","ul","templateMenu","shadowColor","MenuItem","li","Panel","borderRadius","IconAnimated","Icon","rotate"],"mappings":"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"}

package/components/TabList/style.mjs

@@ -0,0 +1,2 @@
+import styled from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{responsiveLayout}from'../../mixins/responsive-layout.mjs';import{focus}from'../../mixins/focus.mjs';import{Divider}from'../Divider/Divider.mjs';import{Icon}from'../Icon/Icon.mjs';const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardTabListProp=createShouldForwardProp(filterLayoutProps);const shouldForwardTabListPanelProp=createShouldForwardProp((o=>!['borderRadius'].includes(o)));const Control=styled.div.withConfig({shouldForwardProp:o=>!['hidden'].includes(o)}).withConfig({displayName:"TabList__Control",componentId:"ui__sc-1cz7fqp-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;padding:","px;pointer-events:auto;",""],focus.padding,(o=>o.hidden&&"\n      & * {\n        visibility: hidden !important;\n      }\n    "));const ScrollFading=styled.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__ScrollFading",componentId:"ui__sc-1cz7fqp-1"})(["box-sizing:border-box;position:relative;width:35px;",""],(o=>`\n    background-image: linear-gradient(${o.after?-90:90}deg, currentcolor, transparent);\n  `));const Floats=styled.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__Floats",componentId:"ui__sc-1cz7fqp-2"})(["box-sizing:border-box;display:flex;align-items:stretch;position:absolute;pointer-events:none;top:0;bottom:0;"," ",""],(o=>o.after?'right: 0;':'left: 0;'),(o=>o.hidden&&"\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    "));const Addon=styled.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__Addon",componentId:"ui__sc-1cz7fqp-3"})(["box-sizing:border-box;display:flex;position:relative;align-items:center;padding:","px;",""],focus.padding,responsiveLayout);const DividerPositioned=styled(Divider).withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__DividerPositioned",componentId:"ui__sc-1cz7fqp-4"})(["position:absolute;right:0px;left:0px;",""],responsiveLayout);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardTabListProp}).withConfig({displayName:"TabList__Root",componentId:"ui__sc-1cz7fqp-5"})(["box-sizing:border-box;isolation:isolate;position:relative;display:flex;"," & ",",& ","{z-index:1;}& [role='tab'] [data-ui-tab-underline]::after,& [role='tab']:focus-visible,& ","{z-index:2;}& "," ","{z-index:3;}"," "," ",""],(o=>{return`\n  &,\n  & ${Control} {\n    background-color: ${(i={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']}).backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${i.backgroundColor};\n  }\n`;var i}),ScrollFading,DividerPositioned,Addon,Floats,Control,responsiveSize,responsiveMargin,responsiveLayout);const Container=styled.div.withConfig({displayName:"TabList__Container",componentId:"ui__sc-1cz7fqp-6"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;overflow:hidden;"]);const TabsTrack=styled.div.withConfig({displayName:"TabList__TabsTrack",componentId:"ui__sc-1cz7fqp-7"})(["box-sizing:border-box;position:relative;display:flex;align-items:stretch;overflow:hidden;flex-grow:1;"]);const TrackScrollable=styled.div.withConfig({displayName:"TabList__TrackScrollable",componentId:"ui__sc-1cz7fqp-8"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:auto;overscroll-behavior:contain;scroll-padding-right:20px;scroll-padding-left:20px;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;height:0;width:0;}"],focus.padding);const Hidden=styled.div.withConfig({displayName:"TabList__Hidden",componentId:"ui__sc-1cz7fqp-9"})(["box-sizing:border-box;display:flex;align-items:stretch;flex-grow:1;height:0px;&,& *{visibility:hidden !important;}"]);const TabsHidden=styled.div.withConfig({displayName:"TabList__TabsHidden",componentId:"ui__sc-1cz7fqp-10"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:hidden;"],focus.padding);const TabWrapper=styled.div.withConfig({displayName:"TabList__TabWrapper",componentId:"ui__sc-1cz7fqp-11"})(["box-sizing:border-box;display:flex;flex-shrink:0;"]);const List=styled.div.withConfig({displayName:"TabList__List",componentId:"ui__sc-1cz7fqp-12"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;flex-grow:1;&:focus{outline:none;}"]);const Menu=styled.ul.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"TabList__Menu",componentId:"ui__sc-1cz7fqp-13"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;appearance:none;margin:0;border-radius:12px;padding:","px;&:focus{outline:none;}",""],focus.padding,(o=>{return`\n  background-color: ${(i={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary'],shadowColor:o.palette.shadowColor??o.theme.colors['bg-oncolor-hover']}).backgroundColor};\n  box-shadow: 0px 6px 20px ${i.shadowColor};\n`;var i}));const MenuItem=styled.li.withConfig({displayName:"TabList__MenuItem",componentId:"ui__sc-1cz7fqp-14"})(["display:flex;appearance:none;list-style-type:none;&:not(:last-child){margin-bottom:","px;}& > *{flex-grow:1;}"],focus.padding);const Panel=styled.div.withConfig({shouldForwardProp:shouldForwardTabListPanelProp}).withConfig({displayName:"TabList__Panel",componentId:"ui__sc-1cz7fqp-15"})(["box-sizing:border-box;"," "," "," ",""],(o=>`\n    border-radius: ${o.borderRadius}px;  \n  `),(o=>`\n  background-color: ${o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']};\n`),responsiveSize,responsiveMargin);const IconAnimated=styled(Icon).withConfig({shouldForwardProp:o=>o!=='rotate'}).withConfig({displayName:"TabList__IconAnimated",componentId:"ui__sc-1cz7fqp-16"})(["transition-property:transform;transition-duration:250ms;transform-origin:center;@media (prefers-reduced-motion:reduce){transition-duration:0ms;}",""],(o=>`\n    transform: rotate(${o.rotate?180:0}deg);\n  `));export{Addon,Container,Control,DividerPositioned,Floats,Hidden,IconAnimated,List,Menu,MenuItem,Panel,Root,ScrollFading,TabWrapper,TabsHidden,TabsTrack,TrackScrollable};
+//# sourceMappingURL=style.mjs.map

package/components/TabList/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/TabList/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { Icon } from 'components/Icon'\nimport { Divider } from 'components/Divider'\nimport type { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport type { CSSColor } from 'shared/types'\nimport type {\n  Layout,\n  TabListPalette,\n  TabListMenuPalette,\n  TabListPanelPalette,\n  StyledTabListProps,\n  StyledTabListPanelProps,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardTabListProp = createShouldForwardProp(filterLayoutProps)\n\nconst shouldForwardTabListPanelProp = createShouldForwardProp((propKey) => !['borderRadius'].includes(propKey))\n\nexport const Control = styled.div.withConfig({\n  shouldForwardProp: (propKey) => !['hidden'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: ${focus.padding}px;\n  pointer-events: auto;\n  ${(props) =>\n    props.hidden &&\n    `\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const ScrollFading = styled.div.withConfig<{ after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  width: 35px;\n  ${(props) => `\n    background-image: linear-gradient(${props.after ? -90 : 90}deg, currentcolor, transparent);\n  `}\n`\n\nconst template = (palette: Pick<TabListPalette, 'backgroundColor'>) => `\n  &,\n  & ${Control} {\n    background-color: ${palette.backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${palette.backgroundColor};\n  }\n`\n\nconst templateMenu = (palette: TabListMenuPalette) => `\n  background-color: ${palette.backgroundColor};\n  box-shadow: 0px 6px 20px ${palette.shadowColor};\n`\n\nconst templatePanel = (palette: TabListPanelPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const Floats = styled.div.withConfig<{ hidden: boolean; after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  bottom: 0;\n  ${(props) => (props.after ? 'right: 0;' : 'left: 0;')}\n  ${(props) =>\n    props.hidden &&\n    `\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const Addon = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ${focus.padding}px;\n\n  ${responsiveLayout}\n`\n\nexport const DividerPositioned = styled(Divider).withConfig<ResponsiveLayoutInterpolationProps>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  position: absolute;\n  right: 0px;\n  left: 0px;\n\n  ${responsiveLayout}\n`\n\nexport const Root = styled.div.withConfig<StyledTabListProps>({\n  shouldForwardProp: shouldForwardTabListProp,\n})`\n  box-sizing: border-box;\n  isolation: isolate;\n  position: relative;\n  display: flex;\n\n  ${(props) =>\n    template({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  & ${ScrollFading},  \n  & ${DividerPositioned} {\n    z-index: 1;\n  }\n  & [role='tab'] [data-ui-tab-underline]::after,\n  & [role='tab']:focus-visible,\n  & ${Addon} {\n    z-index: 2;\n  }\n  & ${Floats} ${Control} {\n    z-index: 3;\n  }\n\n  ${responsiveSize}\n  ${responsiveMargin}\n  ${responsiveLayout}\n`\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  overflow: hidden;\n`\n\nexport const TabsTrack = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const TrackScrollable = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: auto;\n  overscroll-behavior: contain;\n  scroll-padding-right: 20px;\n  scroll-padding-left: 20px;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n`\n\nexport const Hidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  flex-grow: 1;\n  height: 0px;\n  &,\n  & * {\n    visibility: hidden !important;\n  }\n`\n\nexport const TabsHidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: hidden;\n`\n\nexport const TabWrapper = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n`\n\nexport const List = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  flex-grow: 1;\n  &:focus {\n    outline: none;\n  }\n`\n\nexport const Menu = styled.ul.withConfig<{\n  palette: {\n    backgroundColor?: CSSColor\n    shadowColor?: CSSColor\n  }\n}>({\n  shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  appearance: none;\n  margin: 0;\n  border-radius: 12px;\n  padding: ${focus.padding}px;\n  &:focus {\n    outline: none;\n  }\n\n  ${(props) =>\n    templateMenu({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.palette.shadowColor ?? props.theme.colors['bg-oncolor-hover'],\n    })}\n`\n\nexport const MenuItem = styled.li`\n  display: flex;\n  appearance: none;\n  list-style-type: none;\n  &:not(:last-child) {\n    margin-bottom: ${focus.padding}px;\n  }\n  & > * {\n    flex-grow: 1;\n  }\n`\n\nexport const Panel = styled.div.withConfig<StyledTabListPanelProps>({\n  shouldForwardProp: shouldForwardTabListPanelProp,\n})`\n  box-sizing: border-box;\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;  \n  `}\n\n  ${(props) =>\n    templatePanel({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const IconAnimated = styled(Icon).withConfig<{ rotate: boolean }>({\n  shouldForwardProp: (propKey) => propKey !== 'rotate',\n})`\n  transition-property: transform;\n  transition-duration: 250ms;\n  transform-origin: center;\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n  ${(props) => `\n    transform: rotate(${props.rotate ? 180 : 0}deg);\n  `}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardTabListProp","createShouldForwardProp","shouldForwardTabListPanelProp","Control","styled","div","withConfig","shouldForwardProp","displayName","componentId","focus","padding","props","hidden","ScrollFading","after","Floats","Addon","responsiveLayout","DividerPositioned","Divider","Root","template","palette","backgroundColor","theme","colors","responsiveSize","responsiveMargin","Container","TabsTrack","TrackScrollable","Hidden","TabsHidden","TabWrapper","List","Menu","ul","templateMenu","shadowColor","MenuItem","li","Panel","borderRadius","IconAnimated","Icon","rotate"],"mappings":"gaAmBA,MAAMA,kBAAqBC,IACxB,CAAC,SAAU,YAAa,WAAY,UAAW,UAAW,UAAW,WAAY,WAAWC,SAASD,GAExG,MAAME,yBAA2BC,wBAAwBJ,mBAEzD,MAAMK,8BAAgCD,yBAAyBH,IAAa,CAAC,gBAAgBC,SAASD,KAE/F,MAAMK,QAAUC,OAAOC,IAAIC,WAAW,CAC3CC,kBAAoBT,IAAa,CAAC,UAAUC,SAASD,KACrDQ,WAAA,CAAAE,YAAA,mBAAAC,YAAA,oBAFqBL,CAOVM,CAAAA,mFAAAA,0BAAAA,IAAAA,MAAMC,SAEdC,GACDA,EAAMC,QACN,yEAOG,MAAMC,aAAeV,OAAOC,IAAIC,WAAgC,CACrEC,kBAAoBT,IAAa,CAAC,SAASC,SAASD,KACpDQ,WAAA,CAAAE,YAAA,wBAAAC,YAAA,oBAF0BL,CAE1B,CAAA,sDAAA,KAIGQ,GAAU,2CACyBA,EAAMG,OAAS,GAAK,2CAwBrD,MAAMC,OAASZ,OAAOC,IAAIC,WAAiD,CAChFC,kBAAoBT,IAAa,CAAC,SAASC,SAASD,KACpDQ,WAAA,CAAAE,YAAA,kBAAAC,YAAA,oBAFoBL,CAEpB,CAAA,+GAAA,IAAA,KAQGQ,GAAWA,EAAMG,MAAQ,YAAc,aACvCH,GACDA,EAAMC,QACN,mFAQG,MAAMI,MAAQb,OAAOC,IAAIC,WAAuD,CACrFC,kBAAmBV,oBACnBS,WAAA,CAAAE,YAAA,iBAAAC,YAAA,oBAFmBL,CAEnB,CAAA,mFAAA,MAAA,IAKWM,MAAMC,QAEfO,kBAGG,MAAMC,kBAAoBf,OAAOgB,SAASd,WAA+C,CAC9FC,kBAAmBV,oBACnBS,WAAA,CAAAE,YAAA,6BAAAC,YAAA,oBAF+BL,CAE/B,CAAA,wCAAA,IAKEc,kBAGG,MAAMG,KAAOjB,OAAOC,IAAIC,WAA+B,CAC5DC,kBAAmBP,2BACnBM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,oBAFkBL,CAQfQ,CAAAA,0EAAAA,MAAAA,MAAAA,4FAAAA,iBAAAA,IAAAA,eAAAA,IAAAA,IAAAA,KAAAA,IACDU,MAxEmE,eAEjEnB,qCAFYoB,EAwEL,CACPC,gBAAiBZ,EAAMW,QAAQC,iBAAmBZ,EAAMa,MAAMC,OAAO,uBAtE3CF,8BAE1BV,sBACAA,8BACOS,EAAQC,0BAPHD,KA0EZ,GAEAT,aACAK,kBAKAF,MAGAD,OAAUb,QAIZwB,eACAC,iBACAV,wBAGSW,UAAYzB,OAAOC,IAAGC,WAAA,CAAAE,YAAA,qBAAAC,YAAA,oBAAVL,CAMxB,CAAA,6FAEY0B,UAAY1B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,qBAAAC,YAAA,oBAAVL,CAOxB,CAAA,gHAEY2B,gBAAkB3B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,2BAAAC,YAAA,oBAAVL,CAKlBM,CAAAA,6EAAAA,qMAAAA,MAAMC,eAeNqB,OAAS5B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,kBAAAC,YAAA,oBAAVL,CAUrB,CAAA,6HAEY6B,WAAa7B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,sBAAAC,YAAA,qBAAVL,CAKbM,CAAAA,6EAAAA,uBAAAA,MAAMC,eAINuB,WAAa9B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,sBAAAC,YAAA,qBAAVL,CAIzB,CAAA,4DAEY+B,KAAO/B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,gBAAAC,YAAA,qBAAVL,CAWnB,CAAA,2JAEM,MAAMgC,KAAOhC,OAAOiC,GAAG/B,WAK3B,CACDC,kBAAoBT,IAAa,CAAC,WAAWC,SAASD,KACtDQ,WAAA,CAAAE,YAAA,gBAAAC,YAAA,qBAPkBL,CAOlB,CAAA,oIAAA,4BAAA,IAQWM,MAAMC,SAKdC,IACD0B,MArLkD,0BAAhCf,EAqLL,CACXC,gBAAiBZ,EAAMW,QAAQC,iBAAmBZ,EAAMa,MAAMC,OAAO,qBACrEa,YAAa3B,EAAMW,QAAQgB,aAAe3B,EAAMa,MAAMC,OAAO,sBAtLrCF,gDACDD,EAAQgB,iBAFfhB,KAwLhB,UAGOiB,SAAWpC,OAAOqC,GAAEnC,WAAA,CAAAE,YAAA,oBAAAC,YAAA,qBAATL,CAKHM,CAAAA,sFAAAA,2BAAAA,MAAMC,SAOpB,MAAM+B,MAAQtC,OAAOC,IAAIC,WAAoC,CAClEC,kBAAmBL,gCACnBI,WAAA,CAAAE,YAAA,iBAAAC,YAAA,qBAFmBL,CAEnB,CAAA,yBAAA,IAAA,IAAA,IAAA,KAGGQ,GAAU,wBACMA,EAAM+B,0BAGtB/B,GA3MmD,yBA6MjCA,EAAMW,QAAQC,iBAAmBZ,EAAMa,MAAMC,OAAO,2BAGvEC,eACAC,kBAGG,MAAMgB,aAAexC,OAAOyC,MAAMvC,WAAgC,CACvEC,kBAAoBT,GAAYA,IAAY,WAC5CQ,WAAA,CAAAE,YAAA,wBAAAC,YAAA,qBAF0BL,CAE1B,CAAA,mJAAA,KAOGQ,GAAU,2BACSA,EAAMkC,OAAS,IAAM"}

package/components/TabListTab/TabListTab.js

@@ -0,0 +1,2 @@
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var hooks=require('./hooks.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');const TabListTab=withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const{role:i="tab",type:t="button",variant:r="clear",size:n="m",sizeXXS:a,sizeXS:o,sizeS:c,sizeM:l,sizeL:d,sizeXL:u,id:p,panelId:x,active:z,tabIndex:h,'aria-selected':m,'aria-controls':b,text:j,addonLeft:T,addonRight:f,children:y,onClick:R,onFocus:g,...S}=hooks.useTabListTabProps(e);const v=hooks.useTabListTabs({id:p,active:z,tabIndex:h,'aria-selected':m,onClick:R,onFocus:g});const L={size:n,sizeXXS:a,sizeXS:o,sizeS:c,sizeM:l,sizeL:d,sizeXL:u};const P={...L,sizes:sizes.SIZES_TEXT,as:'span',appearance:'body',wordBreak:'break-word',color:'inherit',lineHeight:1,weight:r==='clear'&&v.active?700:400};const E={...L,sizes:sizes.SIZES_ICON};const I={...L,sizes:sizes.SIZES_INDICATOR};return jsxRuntime.jsx(style.Root,{...S,...L,...v,role:i,type:t,variant:r,"aria-controls":b??x,ref:s,children:jsxRuntime.jsx(style.Underline,{"data-ui-tab-underline":!0,children:React.isValidElement(y)||typeof y=='string'||typeof y=='number'?y:typeof y=='function'?y({textProps:P,iconProps:E,indicatorProps:I}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[React.isValidElement(T)?T:typeof T=='function'?T({iconProps:E,indicatorProps:I}):null,jsxRuntime.jsxs(style.Content,{marginRight:f?6:0,marginLeft:T?6:0,children:[React.isValidElement(j)?j:typeof j=='function'?j(P):typeof j=='string'||typeof j=='number'?jsxRuntime.jsx(Text.Text,{...P,children:j}):null,jsxRuntime.jsx(style.Hidden,{"aria-hidden":!0,children:React.isValidElement(j)?j:typeof j=='function'?j(P):typeof j=='string'||typeof j=='number'?jsxRuntime.jsx(Text.Text,{...P,children:j}):null})]}),React.isValidElement(f)?f:typeof f=='function'?f({iconProps:E,indicatorProps:I}):null]})})})})),{displayName:'TabListTab',sizes:sizes.SIZES});exports.TabListTab=TabListTab;
+//# sourceMappingURL=TabListTab.js.map

package/components/TabListTab/TabListTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListTab.js","sources":["../../../../src/components/TabListTab/TabListTab.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport type { IndicatorProps } from 'components/Indicator'\nimport { useTabListTabProps, useTabListTabs } from './hooks'\nimport { SIZES, SIZES_TEXT, SIZES_ICON, SIZES_INDICATOR } from './sizes'\nimport type { TabListTabProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabListTab'\n\n/**\n *\n * Контрол активация которого отображает панель с ассоциированным контентом.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n *\n * @visibleName TabList.Tab\n */\nconst TabListTab: React.ForwardRefExoticComponent<TabListTabProps> = withMergedProps<\n  TabListTabProps,\n  HTMLButtonElement\n>(\n  forwardRef((props, ref) => {\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      id,\n      panelId,\n      active,\n      tabIndex,\n      'aria-selected': ariaSelected,\n      'aria-controls': ariaControls,\n      text,\n      addonLeft,\n      addonRight,\n      children,\n      onClick,\n      onFocus,\n      ...restProps\n    } = useTabListTabProps(props)\n\n    const tabProps = useTabListTabs({\n      id,\n      active,\n      tabIndex,\n      'aria-selected': ariaSelected,\n      onClick,\n      onFocus,\n    })\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const textProps: TextProps = {\n      ...sizeProps,\n      sizes: SIZES_TEXT,\n      as: 'span',\n      appearance: 'body',\n      wordBreak: 'break-word',\n      color: 'inherit',\n      lineHeight: 1,\n      weight: variant === 'clear' && tabProps.active ? 700 : 400,\n    }\n\n    const iconProps: IconProps = {\n      ...sizeProps,\n      sizes: SIZES_ICON,\n    }\n\n    const indicatorProps: IndicatorProps = {\n      ...sizeProps,\n      sizes: SIZES_INDICATOR,\n    }\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        {...tabProps}\n        role={role}\n        type={type}\n        variant={variant}\n        aria-controls={ariaControls ?? panelId}\n        ref={ref}\n      >\n        <Styled.Underline data-ui-tab-underline>\n          {isValidElement(children) || typeof children === 'string' || typeof children === 'number' ? (\n            children\n          ) : typeof children === 'function' ? (\n            children({\n              textProps,\n              iconProps,\n              indicatorProps,\n            })\n          ) : (\n            <>\n              {isValidElement(addonLeft)\n                ? addonLeft\n                : typeof addonLeft === 'function'\n                ? addonLeft({\n                    iconProps,\n                    indicatorProps,\n                  })\n                : null}\n              <Styled.Content marginRight={addonRight ? 6 : 0} marginLeft={addonLeft ? 6 : 0}>\n                {isValidElement(text) ? (\n                  text\n                ) : typeof text === 'function' ? (\n                  text(textProps)\n                ) : typeof text === 'string' || typeof text === 'number' ? (\n                  <Text {...textProps}>{text}</Text>\n                ) : null}\n                <Styled.Hidden aria-hidden>\n                  {isValidElement(text) ? (\n                    text\n                  ) : typeof text === 'function' ? (\n                    text(textProps)\n                  ) : typeof text === 'string' || typeof text === 'number' ? (\n                    <Text {...textProps}>{text}</Text>\n                  ) : null}\n                </Styled.Hidden>\n              </Styled.Content>\n              {isValidElement(addonRight)\n                ? addonRight\n                : typeof addonRight === 'function'\n                ? addonRight({\n                    iconProps,\n                    indicatorProps,\n                  })\n                : null}\n            </>\n          )}\n        </Styled.Underline>\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { TabListTab }\n"],"names":["TabListTab","withMergedProps","forwardRef","props","ref","role","type","variant","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","id","panelId","active","tabIndex","ariaSelected","ariaControls","text","addonLeft","addonRight","children","onClick","onFocus","restProps","useTabListTabProps","tabProps","useTabListTabs","sizeProps","textProps","sizes","SIZES_TEXT","as","appearance","wordBreak","color","lineHeight","weight","iconProps","SIZES_ICON","indicatorProps","SIZES_INDICATOR","_jsx","Styled","jsx","isValidElement","_jsxs","jsxs","_Fragment","marginRight","marginLeft","Text","displayName","SIZES"],"mappings":"qRAuBMA,MAAAA,WAA+DC,gBAAAA,gBAInEC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,MAAKC,KACZA,EAAO,SAAQC,QACfA,EAAU,QAAOC,KACjBA,EAAO,IAAGC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,GACNA,EAAEC,QACFA,EAAOC,OACPA,EAAMC,SACNA,EACA,gBAAiBC,EACjB,gBAAiBC,EAAYC,KAC7BA,EAAIC,UACJA,EAASC,WACTA,EAAUC,SACVA,EAAQC,QACRA,EAAOC,QACPA,KACGC,GACDC,MAAAA,mBAAmBzB,GAEvB,MAAM0B,EAAWC,MAAAA,eAAe,CAC9Bf,KACAE,SACAC,WACA,gBAAiBC,EACjBM,UACAC,YAGF,MAAMK,EAAY,CAChBvB,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMkB,EAAuB,IACxBD,EACHE,MAAOC,MAAUA,WACjBC,GAAI,OACJC,WAAY,OACZC,UAAW,aACXC,MAAO,UACPC,WAAY,EACZC,OAAQjC,IAAY,SAAWsB,EAASZ,OAAS,IAAM,KAGzD,MAAMwB,EAAuB,IACxBV,EACHE,MAAOS,MAAAA,YAGT,MAAMC,EAAiC,IAClCZ,EACHE,MAAOW,MAAAA,iBAGT,OACEC,WAAAA,IAACC,MAAAA,KAAW,IACNnB,KACAI,KACAF,EACJxB,KAAMA,EACNC,KAAMA,EACNC,QAASA,EACT,gBAAea,GAAgBJ,EAC/BZ,IAAKA,EAAIoB,SAETqB,WAAAE,IAACD,gBAAgB,CAAC,yBAAqB,EAAAtB,SACpCwB,MAAAA,eAAexB,WAAoBA,GAAa,iBAAmBA,GAAa,SAC/EA,SACSA,GAAa,WACtBA,EAAS,CACPQ,YACAS,YACAE,mBAGFM,WAAAC,KAAAC,oBAAA,CAAA3B,SACG,CAAAwB,MAAcA,eAAC1B,GACZA,SACOA,GAAc,WACrBA,EAAU,CACRmB,YACAE,mBAEF,KACJM,WAAAC,KAACJ,cAAc,CAACM,YAAa7B,EAAa,EAAI,EAAG8B,WAAY/B,EAAY,EAAI,EAAEE,SAC5E,CAAAwB,MAAAA,eAAe3B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,WAAAE,IAACO,UAAI,IAAKtB,EAASR,SAAGH,IACpB,KACJwB,WAAAE,IAACD,aAAa,CAAC,eAAW,EAAAtB,SACvBwB,MAAcA,eAAC3B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,WAAAE,IAACO,UAAI,IAAKtB,EAASR,SAAGH,IACpB,UAGP2B,MAAcA,eAACzB,GACZA,SACOA,GAAe,WACtBA,EAAW,CACTkB,YACAE,mBAEF,WAIE,IAGlB,CACEY,YAlJmB,aAmJnBtB,MAAOuB,MAAAA"}