@foxford/ui 2.89.0 → 2.90.0-beta-a2747eb-20260112

package/components/TabList/TabList.mjs

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

package/components/TabList/TabList.mjs.map

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

package/components/TabList/TabListMenuTab.js

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

package/components/TabList/TabListMenuTab.js.map

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

package/components/TabList/TabListMenuTab.mjs

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

package/components/TabList/TabListMenuTab.mjs.map

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

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var styled=require('styled-components');var nanoid=require('nanoid');var iconPack=require('@foxford/icon-pack');var withMergedProps=require('../../hocs/withMergedProps.js');var useResizable=require('../../hooks/useResizable.js');var misc=require('../../shared/utils/misc.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var InputLabel=require('../InputLabel/InputLabel.js');var sizes$1=require('../FormInput/sizes.js');const Textarea=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const t=styled.useTheme();const{size:a="m",rows:i=2,maxRows:n=30,labelPosition:o="dynamic",primary:s=!0,width:l=t.defaultInputControlsWidth,autosize:m=!0,rounded:c=!0,color:u="mineShaft",placeholderColor:g="silver",autoRows:d,resize:h,contrast:p,inline:X,secondary:b,success:L,error:R,sizeXXS:S,sizeXS:f,sizeS:z,sizeM:v,sizeL:w,sizeXL:x,sizes:M,sizeUnits:j,margin:C,marginXXS:T,marginXS:y,marginS:I,marginM:B,marginL:k,marginXL:q,marginTop:D,marginTopXXS:F,marginTopXS:N,marginTopS:P,marginTopM:E,marginTopL:H,marginTopXL:O,marginRight:U,marginRightXXS:Z,marginRightXS:$,marginRightS:A,marginRightM:G,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:_,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:te,marginLeftXXS:ae,marginLeftXS:ie,marginLeftS:ne,marginLeftM:oe,marginLeftL:se,marginLeftXL:le,widthXXS:me,widthXS:ce,widthS:ue,widthM:ge,widthL:de,widthXL:he,preset:pe,palette:Xe,label:be,fluid:Le,className:Re,style:Se,disabled:fe,...ze}=e;const ve={size:a,sizeXXS:S,sizeXS:f,sizeS:z,sizeM:v,sizeL:w,sizeXL:x};const we=React.useRef(null);const xe=React.useRef(null);const Me=React.useRef(null);React.useImperativeHandle(r,(()=>we.current),[]);const[je,Ce,Te]=useResizable.useResizable({target:Me,direction:h});const ye=React.useMemo((()=>nanoid.nanoid()),[]);const[Ie,Be]=React.useState((()=>{const e=ze.value??ze.defaultValue;return typeof e=='string'&&e.length>0}));const[ke,qe]=React.useState((()=>Math.min(i,n)));const De=pe==='brand'&&d||pe!=='brand'&&m?ke:Math.min(i,n);const Fe=h==='horizontal'?'ew-resize':h==='vertical'?'ns-resize':'nwse-resize';const Ne=React.useCallback((()=>{if(!we.current)return;if(pe==='brand'){if(!xe.current)return;xe.current.value=we.current.value;const e=Math.max(Math.round(xe.current.scrollHeight/xe.current.clientHeight),i);return void qe(Math.min(e,n))}const e=getComputedStyle(we.current);const r=parseFloat(e.lineHeight);const t=Math.max(Math.round((we.current.scrollHeight-parseFloat(e.paddingTop)-parseFloat(e.paddingBottom))/(Number.isNaN(r)?parseFloat(e.fontSize)*1.2:r)),i);qe((e=>t>e?Math.min(t,n):we.current&&!we.current.value?i:e))}),[pe,i,n]);return React.useLayoutEffect((()=>{pe==='brand'&&typeof ze.value=='string'&&we.current&&we.current!==document.activeElement&&Be(ze.value.length>0)}),[pe,ze.value]),React.useEffect((()=>{const e=misc.createThrottledCallback(Ne,200);return(pe==='brand'&&d||pe!=='brand'&&m)&&(Ne(),window.addEventListener('resize',e)),()=>{window.removeEventListener('resize',e)}}),[pe,d,m,Ne]),pe!=='brand'?jsxRuntime.jsx(style.Root,{...ze,ref:we,className:Re,style:Se,onChange:e=>{m&&Ne(),ze.onChange&&ze.onChange(e)},rows:De,color:u,rounded:c,placeholderColor:g,disabled:fe,error:R,fluid:Le,width:l,widthXXS:me,widthXS:ce,widthS:ue,widthM:ge,widthL:de,widthXL:he}):jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...ve,ref:Me,sizes:M,sizeUnits:j,margin:C,marginXXS:T,marginXS:y,marginS:I,marginM:B,marginL:k,marginXL:q,marginTop:D,marginTopXXS:F,marginTopXS:N,marginTopS:P,marginTopM:E,marginTopL:H,marginTopXL:O,marginRight:U,marginRightXXS:Z,marginRightXS:$,marginRightS:A,marginRightM:G,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:_,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:te,marginLeftXXS:ae,marginLeftXS:ie,marginLeftS:ne,marginLeftM:oe,marginLeftL:se,marginLeftXL:le,className:Re,style:Se,contrast:p,error:R,inline:X,disabled:fe,primary:s,secondary:b,success:L,palette:{color:fe?Xe.colorDisabled:Xe.color,backgroundColor:fe?Xe.backgroundColorDisabled:Xe.backgroundColor,backgroundColorHover:fe?Xe.backgroundColorDisabled:Xe.backgroundColorHover,borderColor:fe?Xe.borderColorDisabled:Xe.borderColor},onClick:()=>{we.current&&we.current.focus()},onFocus:()=>{Be(!0)},onPointerDown:e=>{e.target!==we.current&&e.target instanceof Node&&e.preventDefault()},onBlur:e=>{we.current&&!e.currentTarget.contains(e.relatedTarget)&&Be(Boolean(we.current.value))},overflow:"hidden",input:jsxRuntime.jsxs(InputLabel.InputLabel,{...ve,sizes:sizes$1.SIZES,active:Ie,label:be,labelId:ye,labelPosition:o,children:[d?jsxRuntime.jsx(style.TextareaMimic,{ref:xe,rows:1}):null,jsxRuntime.jsx(style.Textarea,{...ze,ref:we,"aria-labelledby":be?ye:void 0,disabled:fe,onChange:e=>{d&&Ne(),ze.onChange&&ze.onChange(e)},rows:De,palette:{color:Xe.color,colorDisabled:Xe.colorDisabled,placeholderColor:Xe.placeholderColor,placeholderColorDisabled:Xe.placeholderColorDisabled}})]}),addon:h?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[je?jsxRuntime.jsx(style.ResizeGlobals,{cursor:Fe}):null,jsxRuntime.jsx(style.ResizeIcon,{size:"l",icon:jsxRuntime.jsx(iconPack.ResizeHandle,{}),color:"border-onmain-default-small",tabIndex:0,onPointerDown:Ce,onKeyDown:Te,cursor:Fe})]}):void 0})})),{displayName:"Textarea",sizes:sizes.SIZES});exports.COMPONENT_NAME="Textarea",exports.Textarea=Textarea;
+'use strict';var React=require('react');var styled=require('styled-components');var nanoid=require('nanoid');var withMergedProps=require('../../hocs/withMergedProps.js');var useResizable=require('../../hooks/useResizable.js');var misc=require('../../shared/utils/misc.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var InputLabel=require('../InputLabel/InputLabel.js');var sizes$1=require('../FormInput/sizes.js');var index=require('../../icon-pack/src/icons/ResizeHandle/index.js');const Textarea=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const t=styled.useTheme();const{size:a="m",rows:i=2,maxRows:n=30,labelPosition:o="dynamic",primary:s=!0,width:l=t.defaultInputControlsWidth,autosize:m=!0,rounded:u=!0,color:c="mineShaft",placeholderColor:g="silver",autoRows:d,resize:h,contrast:p,inline:X,secondary:b,success:L,error:R,sizeXXS:S,sizeXS:z,sizeS:f,sizeM:x,sizeL:v,sizeXL:w,sizes:j,sizeUnits:M,margin:C,marginXXS:T,marginXS:y,marginS:I,marginM:B,marginL:q,marginXL:D,marginTop:F,marginTopXXS:k,marginTopXS:N,marginTopS:E,marginTopM:H,marginTopL:P,marginTopXL:O,marginRight:U,marginRightXXS:Z,marginRightXS:$,marginRightS:A,marginRightM:G,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:_,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:te,marginLeftXXS:ae,marginLeftXS:ie,marginLeftS:ne,marginLeftM:oe,marginLeftL:se,marginLeftXL:le,widthXXS:me,widthXS:ue,widthS:ce,widthM:ge,widthL:de,widthXL:he,preset:pe,palette:Xe,label:be,fluid:Le,className:Re,style:Se,disabled:ze,...fe}=e;const xe={size:a,sizeXXS:S,sizeXS:z,sizeS:f,sizeM:x,sizeL:v,sizeXL:w};const ve=React.useRef(null);const we=React.useRef(null);const je=React.useRef(null);React.useImperativeHandle(r,(()=>ve.current),[]);const[Me,Ce,Te]=useResizable.useResizable({target:je,direction:h});const ye=React.useMemo((()=>nanoid.nanoid()),[]);const[Ie,Be]=React.useState((()=>{const e=fe.value??fe.defaultValue;return typeof e=='string'&&e.length>0}));const[qe,De]=React.useState((()=>Math.min(i,n)));const Fe=pe==='brand'&&d||pe!=='brand'&&m?qe:Math.min(i,n);const ke=h==='horizontal'?'ew-resize':h==='vertical'?'ns-resize':'nwse-resize';const Ne=React.useCallback((()=>{if(!ve.current)return;if(pe==='brand'){if(!we.current)return;we.current.value=ve.current.value;const e=Math.max(Math.round(we.current.scrollHeight/we.current.clientHeight),i);return void De(Math.min(e,n))}const e=getComputedStyle(ve.current);const r=parseFloat(e.lineHeight);const t=Math.max(Math.round((ve.current.scrollHeight-parseFloat(e.paddingTop)-parseFloat(e.paddingBottom))/(Number.isNaN(r)?parseFloat(e.fontSize)*1.2:r)),i);De((e=>t>e?Math.min(t,n):ve.current&&!ve.current.value?i:e))}),[pe,i,n]);return React.useLayoutEffect((()=>{pe==='brand'&&typeof fe.value=='string'&&ve.current&&ve.current!==document.activeElement&&Be(fe.value.length>0)}),[pe,fe.value]),React.useEffect((()=>{const e=misc.createThrottledCallback(Ne,200);return(pe==='brand'&&d||pe!=='brand'&&m)&&(Ne(),window.addEventListener('resize',e)),()=>{window.removeEventListener('resize',e)}}),[pe,d,m,Ne]),pe!=='brand'?jsxRuntime.jsx(style.Root,{...fe,ref:ve,className:Re,style:Se,onChange:e=>{m&&Ne(),fe.onChange&&fe.onChange(e)},rows:Fe,color:c,rounded:u,placeholderColor:g,disabled:ze,error:R,fluid:Le,width:l,widthXXS:me,widthXS:ue,widthS:ce,widthM:ge,widthL:de,widthXL:he}):jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...xe,ref:je,sizes:j,sizeUnits:M,margin:C,marginXXS:T,marginXS:y,marginS:I,marginM:B,marginL:q,marginXL:D,marginTop:F,marginTopXXS:k,marginTopXS:N,marginTopS:E,marginTopM:H,marginTopL:P,marginTopXL:O,marginRight:U,marginRightXXS:Z,marginRightXS:$,marginRightS:A,marginRightM:G,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:_,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:te,marginLeftXXS:ae,marginLeftXS:ie,marginLeftS:ne,marginLeftM:oe,marginLeftL:se,marginLeftXL:le,className:Re,style:Se,contrast:p,error:R,inline:X,disabled:ze,primary:s,secondary:b,success:L,palette:{color:ze?Xe.colorDisabled:Xe.color,backgroundColor:ze?Xe.backgroundColorDisabled:Xe.backgroundColor,backgroundColorHover:ze?Xe.backgroundColorDisabled:Xe.backgroundColorHover,borderColor:ze?Xe.borderColorDisabled:Xe.borderColor},onClick:()=>{ve.current&&ve.current.focus()},onFocus:()=>{Be(!0)},onPointerDown:e=>{e.target!==ve.current&&e.target instanceof Node&&e.preventDefault()},onBlur:e=>{ve.current&&!e.currentTarget.contains(e.relatedTarget)&&Be(Boolean(ve.current.value))},overflow:"hidden",input:jsxRuntime.jsxs(InputLabel.InputLabel,{...xe,sizes:sizes$1.SIZES,active:Ie,label:be,labelId:ye,labelPosition:o,children:[d?jsxRuntime.jsx(style.TextareaMimic,{ref:we,rows:1}):null,jsxRuntime.jsx(style.Textarea,{...fe,ref:ve,"aria-labelledby":be?ye:void 0,disabled:ze,onChange:e=>{d&&Ne(),fe.onChange&&fe.onChange(e)},rows:Fe,palette:{color:Xe.color,colorDisabled:Xe.colorDisabled,placeholderColor:Xe.placeholderColor,placeholderColorDisabled:Xe.placeholderColorDisabled}})]}),addon:h?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[Me?jsxRuntime.jsx(style.ResizeGlobals,{cursor:ke}):null,jsxRuntime.jsx(style.ResizeIcon,{size:"l",icon:jsxRuntime.jsx(index.ResizeHandle,{}),color:"border-onmain-default-small",tabIndex:0,onPointerDown:Ce,onKeyDown:Te,cursor:ke})]}):void 0})})),{displayName:"Textarea",sizes:sizes.SIZES});exports.COMPONENT_NAME="Textarea",exports.Textarea=Textarea;
 //# sourceMappingURL=Textarea.js.map

package/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useLayoutEffect,\n  useEffect,\n  useRef,\n  useState,\n  useMemo,\n  useCallback,\n} from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { ResizeHandle } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { InputLabel } from 'components/InputLabel'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useResizable } from 'hooks/useResizable'\nimport { createThrottledCallback } from 'shared/utils/misc'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { SIZES as SIZES_FORM_INPUT } from 'components/FormInput'\nimport { SIZES } from './sizes'\nimport * as Styled from './style'\nimport type { TextareaProps } from './types'\n\nconst COMPONENT_NAME = 'Textarea'\n\n/**\n *\n * Компонент для приема многострочного ввода.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<textarea\\> элемента.\n */\nconst Textarea: React.ForwardRefExoticComponent<TextareaProps> = withMergedProps<TextareaProps, HTMLTextAreaElement>(\n  forwardRef<HTMLTextAreaElement, MergedProps<TextareaProps>>((props, forwardedRef) => {\n    const theme = useTheme()\n\n    const {\n      size = 'm',\n      rows = 2,\n      maxRows = 30,\n      labelPosition = 'dynamic',\n      primary = true,\n      width = theme.defaultInputControlsWidth,\n      autosize = true,\n      rounded = true,\n      color = 'mineShaft',\n      placeholderColor = 'silver',\n      autoRows,\n      resize,\n      contrast,\n      inline,\n      secondary,\n      success,\n      error,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizes,\n      sizeUnits,\n      margin,\n      marginXXS,\n      marginXS,\n      marginS,\n      marginM,\n      marginL,\n      marginXL,\n      marginTop,\n      marginTopXXS,\n      marginTopXS,\n      marginTopS,\n      marginTopM,\n      marginTopL,\n      marginTopXL,\n      marginRight,\n      marginRightXXS,\n      marginRightXS,\n      marginRightS,\n      marginRightM,\n      marginRightL,\n      marginRightXL,\n      marginBottom,\n      marginBottomXXS,\n      marginBottomXS,\n      marginBottomS,\n      marginBottomM,\n      marginBottomL,\n      marginBottomXL,\n      marginLeft,\n      marginLeftXXS,\n      marginLeftXS,\n      marginLeftS,\n      marginLeftM,\n      marginLeftL,\n      marginLeftXL,\n      widthXXS,\n      widthXS,\n      widthS,\n      widthM,\n      widthL,\n      widthXL,\n      preset,\n      palette,\n      label,\n      fluid,\n      className,\n      style,\n      disabled,\n      ...textareaProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n    const textareaMimicRef = useRef<HTMLTextAreaElement>(null)\n\n    const formInputLabelRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(forwardedRef, () => textareaRef.current as HTMLTextAreaElement, [])\n\n    const [resizing, handleResizeStart, handleResizeOnNudge] = useResizable<HTMLDivElement, HTMLSpanElement>({\n      target: formInputLabelRef,\n      direction: resize,\n    })\n\n    const labelId = useMemo(() => nanoid(), [])\n\n    const [active, setActive] = useState(() => {\n      const valueInit = textareaProps.value ?? textareaProps.defaultValue\n\n      return typeof valueInit === 'string' && valueInit.length > 0\n    })\n\n    const [autoRowsCount, setAutoRowsCount] = useState(() => Math.min(rows, maxRows))\n\n    const rowsVisible =\n      (preset === 'brand' && autoRows) || (preset !== 'brand' && autosize) ? autoRowsCount : Math.min(rows, maxRows)\n\n    const cursorResize = resize === 'horizontal' ? 'ew-resize' : resize === 'vertical' ? 'ns-resize' : 'nwse-resize'\n\n    const updateAutoRowsCount = useCallback(() => {\n      if (!textareaRef.current) return\n\n      if (preset === 'brand') {\n        if (!textareaMimicRef.current) return\n\n        textareaMimicRef.current.value = textareaRef.current.value\n\n        const nextRows = Math.max(\n          Math.round(textareaMimicRef.current.scrollHeight / textareaMimicRef.current.clientHeight),\n          rows\n        )\n\n        setAutoRowsCount(Math.min(nextRows, maxRows))\n\n        return\n      }\n\n      const styles = getComputedStyle(textareaRef.current)\n\n      const lineHeight = parseFloat(styles.lineHeight)\n\n      const nextRows = Math.max(\n        Math.round(\n          (textareaRef.current.scrollHeight - parseFloat(styles.paddingTop) - parseFloat(styles.paddingBottom)) /\n            (Number.isNaN(lineHeight) ? parseFloat(styles.fontSize) * 1.2 : lineHeight)\n        ),\n        rows\n      )\n\n      setAutoRowsCount((prevRows) => {\n        if (nextRows > prevRows) return Math.min(nextRows, maxRows)\n        if (textareaRef.current && !textareaRef.current.value) return rows\n\n        return prevRows\n      })\n    }, [preset, rows, maxRows])\n\n    useLayoutEffect(() => {\n      if (\n        preset === 'brand' &&\n        typeof textareaProps.value === 'string' &&\n        textareaRef.current &&\n        textareaRef.current !== document.activeElement\n      ) {\n        setActive(textareaProps.value.length > 0)\n      }\n    }, [preset, textareaProps.value])\n\n    useEffect(() => {\n      const handleResize = createThrottledCallback<UIEvent>(updateAutoRowsCount, 200)\n\n      if ((preset === 'brand' && autoRows) || (preset !== 'brand' && autosize)) {\n        updateAutoRowsCount()\n        window.addEventListener('resize', handleResize)\n      }\n\n      return () => {\n        window.removeEventListener('resize', handleResize)\n      }\n    }, [preset, autoRows, autosize, updateAutoRowsCount])\n\n    if (preset !== 'brand') {\n      return (\n        <Styled.Root\n          {...textareaProps}\n          ref={textareaRef}\n          className={className}\n          style={style}\n          onChange={(evt) => {\n            if (autosize) updateAutoRowsCount()\n            if (textareaProps.onChange) textareaProps.onChange(evt)\n          }}\n          rows={rowsVisible}\n          color={color}\n          rounded={rounded}\n          placeholderColor={placeholderColor}\n          disabled={disabled}\n          error={error}\n          fluid={fluid}\n          width={width}\n          widthXXS={widthXXS}\n          widthXS={widthXS}\n          widthS={widthS}\n          widthM={widthM}\n          widthL={widthL}\n          widthXL={widthXL}\n        />\n      )\n    }\n\n    return (\n      <FormInputLabel\n        {...sizeProps}\n        ref={formInputLabelRef}\n        sizes={sizes}\n        sizeUnits={sizeUnits}\n        margin={margin}\n        marginXXS={marginXXS}\n        marginXS={marginXS}\n        marginS={marginS}\n        marginM={marginM}\n        marginL={marginL}\n        marginXL={marginXL}\n        marginTop={marginTop}\n        marginTopXXS={marginTopXXS}\n        marginTopXS={marginTopXS}\n        marginTopS={marginTopS}\n        marginTopM={marginTopM}\n        marginTopL={marginTopL}\n        marginTopXL={marginTopXL}\n        marginRight={marginRight}\n        marginRightXXS={marginRightXXS}\n        marginRightXS={marginRightXS}\n        marginRightS={marginRightS}\n        marginRightM={marginRightM}\n        marginRightL={marginRightL}\n        marginRightXL={marginRightXL}\n        marginBottom={marginBottom}\n        marginBottomXXS={marginBottomXXS}\n        marginBottomXS={marginBottomXS}\n        marginBottomS={marginBottomS}\n        marginBottomM={marginBottomM}\n        marginBottomL={marginBottomL}\n        marginBottomXL={marginBottomXL}\n        marginLeft={marginLeft}\n        marginLeftXXS={marginLeftXXS}\n        marginLeftXS={marginLeftXS}\n        marginLeftS={marginLeftS}\n        marginLeftM={marginLeftM}\n        marginLeftL={marginLeftL}\n        marginLeftXL={marginLeftXL}\n        className={className}\n        style={style}\n        contrast={contrast}\n        error={error}\n        inline={inline}\n        disabled={disabled}\n        primary={primary}\n        secondary={secondary}\n        success={success}\n        palette={{\n          color: disabled ? palette.colorDisabled : palette.color,\n          backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n          backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n          borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n        }}\n        onClick={() => {\n          if (textareaRef.current) {\n            textareaRef.current.focus()\n          }\n        }}\n        onFocus={() => {\n          setActive(true)\n        }}\n        onPointerDown={(evt) => {\n          if (evt.target === textareaRef.current || !(evt.target instanceof Node)) {\n            return\n          }\n          evt.preventDefault()\n        }}\n        onBlur={(evt) => {\n          if (textareaRef.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n            setActive(Boolean(textareaRef.current.value))\n          }\n        }}\n        overflow='hidden'\n        input={\n          <InputLabel\n            {...sizeProps}\n            sizes={SIZES_FORM_INPUT}\n            active={active}\n            label={label}\n            labelId={labelId}\n            labelPosition={labelPosition}\n          >\n            {autoRows ? <Styled.TextareaMimic ref={textareaMimicRef} rows={1} /> : null}\n            <Styled.Textarea\n              {...textareaProps}\n              ref={textareaRef}\n              aria-labelledby={label ? labelId : undefined}\n              disabled={disabled}\n              onChange={(evt) => {\n                if (autoRows) updateAutoRowsCount()\n                if (textareaProps.onChange) textareaProps.onChange(evt)\n              }}\n              rows={rowsVisible}\n              palette={{\n                color: palette.color,\n                colorDisabled: palette.colorDisabled,\n                placeholderColor: palette.placeholderColor,\n                placeholderColorDisabled: palette.placeholderColorDisabled,\n              }}\n            />\n          </InputLabel>\n        }\n        addon={\n          resize ? (\n            <>\n              {resizing ? <Styled.ResizeGlobals cursor={cursorResize} /> : null}\n              <Styled.ResizeIcon\n                size='l'\n                icon={<ResizeHandle />}\n                color='border-onmain-default-small'\n                tabIndex={0}\n                onPointerDown={handleResizeStart}\n                onKeyDown={handleResizeOnNudge}\n                cursor={cursorResize}\n              />\n            </>\n          ) : undefined\n        }\n      />\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { Textarea, COMPONENT_NAME }\n"],"names":["Textarea","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rows","maxRows","labelPosition","primary","width","defaultInputControlsWidth","autosize","rounded","color","placeholderColor","autoRows","resize","contrast","inline","secondary","success","error","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","widthXXS","widthXS","widthS","widthM","widthL","widthXL","preset","palette","label","fluid","className","style","disabled","textareaProps","sizeProps","textareaRef","useRef","textareaMimicRef","formInputLabelRef","useImperativeHandle","current","resizing","handleResizeStart","handleResizeOnNudge","useResizable","target","direction","labelId","useMemo","nanoid","active","setActive","useState","valueInit","value","defaultValue","length","autoRowsCount","setAutoRowsCount","Math","min","rowsVisible","cursorResize","updateAutoRowsCount","useCallback","nextRows","max","round","scrollHeight","clientHeight","styles","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","Number","isNaN","fontSize","prevRows","useLayoutEffect","document","activeElement","useEffect","handleResize","createThrottledCallback","window","addEventListener","removeEventListener","_jsx","Styled","ref","onChange","evt","FormInputLabel","colorDisabled","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","focus","onFocus","onPointerDown","Node","preventDefault","onBlur","currentTarget","contains","relatedTarget","Boolean","overflow","input","_jsxs","jsxs","InputLabel","SIZES_FORM_INPUT","SIZES","children","jsx","undefined","placeholderColorDisabled","addon","_Fragment","cursor","icon","ResizeHandle","tabIndex","onKeyDown","displayName"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useLayoutEffect,\n  useEffect,\n  useRef,\n  useState,\n  useMemo,\n  useCallback,\n} from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { ResizeHandle } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { InputLabel } from 'components/InputLabel'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useResizable } from 'hooks/useResizable'\nimport { createThrottledCallback } from 'shared/utils/misc'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { SIZES as SIZES_FORM_INPUT } from 'components/FormInput'\nimport { SIZES } from './sizes'\nimport * as Styled from './style'\nimport type { TextareaProps } from './types'\n\nconst COMPONENT_NAME = 'Textarea'\n\n/**\n *\n * Компонент для приема многострочного ввода.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<textarea\\> элемента.\n */\nconst Textarea: React.ForwardRefExoticComponent<TextareaProps> = withMergedProps<TextareaProps, HTMLTextAreaElement>(\n  forwardRef<HTMLTextAreaElement, MergedProps<TextareaProps>>((props, forwardedRef) => {\n    const theme = useTheme()\n\n    const {\n      size = 'm',\n      rows = 2,\n      maxRows = 30,\n      labelPosition = 'dynamic',\n      primary = true,\n      width = theme.defaultInputControlsWidth,\n      autosize = true,\n      rounded = true,\n      color = 'mineShaft',\n      placeholderColor = 'silver',\n      autoRows,\n      resize,\n      contrast,\n      inline,\n      secondary,\n      success,\n      error,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizes,\n      sizeUnits,\n      margin,\n      marginXXS,\n      marginXS,\n      marginS,\n      marginM,\n      marginL,\n      marginXL,\n      marginTop,\n      marginTopXXS,\n      marginTopXS,\n      marginTopS,\n      marginTopM,\n      marginTopL,\n      marginTopXL,\n      marginRight,\n      marginRightXXS,\n      marginRightXS,\n      marginRightS,\n      marginRightM,\n      marginRightL,\n      marginRightXL,\n      marginBottom,\n      marginBottomXXS,\n      marginBottomXS,\n      marginBottomS,\n      marginBottomM,\n      marginBottomL,\n      marginBottomXL,\n      marginLeft,\n      marginLeftXXS,\n      marginLeftXS,\n      marginLeftS,\n      marginLeftM,\n      marginLeftL,\n      marginLeftXL,\n      widthXXS,\n      widthXS,\n      widthS,\n      widthM,\n      widthL,\n      widthXL,\n      preset,\n      palette,\n      label,\n      fluid,\n      className,\n      style,\n      disabled,\n      ...textareaProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n    const textareaMimicRef = useRef<HTMLTextAreaElement>(null)\n\n    const formInputLabelRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(forwardedRef, () => textareaRef.current as HTMLTextAreaElement, [])\n\n    const [resizing, handleResizeStart, handleResizeOnNudge] = useResizable<HTMLDivElement, HTMLSpanElement>({\n      target: formInputLabelRef,\n      direction: resize,\n    })\n\n    const labelId = useMemo(() => nanoid(), [])\n\n    const [active, setActive] = useState(() => {\n      const valueInit = textareaProps.value ?? textareaProps.defaultValue\n\n      return typeof valueInit === 'string' && valueInit.length > 0\n    })\n\n    const [autoRowsCount, setAutoRowsCount] = useState(() => Math.min(rows, maxRows))\n\n    const rowsVisible =\n      (preset === 'brand' && autoRows) || (preset !== 'brand' && autosize) ? autoRowsCount : Math.min(rows, maxRows)\n\n    const cursorResize = resize === 'horizontal' ? 'ew-resize' : resize === 'vertical' ? 'ns-resize' : 'nwse-resize'\n\n    const updateAutoRowsCount = useCallback(() => {\n      if (!textareaRef.current) return\n\n      if (preset === 'brand') {\n        if (!textareaMimicRef.current) return\n\n        textareaMimicRef.current.value = textareaRef.current.value\n\n        const nextRows = Math.max(\n          Math.round(textareaMimicRef.current.scrollHeight / textareaMimicRef.current.clientHeight),\n          rows\n        )\n\n        setAutoRowsCount(Math.min(nextRows, maxRows))\n\n        return\n      }\n\n      const styles = getComputedStyle(textareaRef.current)\n\n      const lineHeight = parseFloat(styles.lineHeight)\n\n      const nextRows = Math.max(\n        Math.round(\n          (textareaRef.current.scrollHeight - parseFloat(styles.paddingTop) - parseFloat(styles.paddingBottom)) /\n            (Number.isNaN(lineHeight) ? parseFloat(styles.fontSize) * 1.2 : lineHeight)\n        ),\n        rows\n      )\n\n      setAutoRowsCount((prevRows) => {\n        if (nextRows > prevRows) return Math.min(nextRows, maxRows)\n        if (textareaRef.current && !textareaRef.current.value) return rows\n\n        return prevRows\n      })\n    }, [preset, rows, maxRows])\n\n    useLayoutEffect(() => {\n      if (\n        preset === 'brand' &&\n        typeof textareaProps.value === 'string' &&\n        textareaRef.current &&\n        textareaRef.current !== document.activeElement\n      ) {\n        setActive(textareaProps.value.length > 0)\n      }\n    }, [preset, textareaProps.value])\n\n    useEffect(() => {\n      const handleResize = createThrottledCallback<UIEvent>(updateAutoRowsCount, 200)\n\n      if ((preset === 'brand' && autoRows) || (preset !== 'brand' && autosize)) {\n        updateAutoRowsCount()\n        window.addEventListener('resize', handleResize)\n      }\n\n      return () => {\n        window.removeEventListener('resize', handleResize)\n      }\n    }, [preset, autoRows, autosize, updateAutoRowsCount])\n\n    if (preset !== 'brand') {\n      return (\n        <Styled.Root\n          {...textareaProps}\n          ref={textareaRef}\n          className={className}\n          style={style}\n          onChange={(evt) => {\n            if (autosize) updateAutoRowsCount()\n            if (textareaProps.onChange) textareaProps.onChange(evt)\n          }}\n          rows={rowsVisible}\n          color={color}\n          rounded={rounded}\n          placeholderColor={placeholderColor}\n          disabled={disabled}\n          error={error}\n          fluid={fluid}\n          width={width}\n          widthXXS={widthXXS}\n          widthXS={widthXS}\n          widthS={widthS}\n          widthM={widthM}\n          widthL={widthL}\n          widthXL={widthXL}\n        />\n      )\n    }\n\n    return (\n      <FormInputLabel\n        {...sizeProps}\n        ref={formInputLabelRef}\n        sizes={sizes}\n        sizeUnits={sizeUnits}\n        margin={margin}\n        marginXXS={marginXXS}\n        marginXS={marginXS}\n        marginS={marginS}\n        marginM={marginM}\n        marginL={marginL}\n        marginXL={marginXL}\n        marginTop={marginTop}\n        marginTopXXS={marginTopXXS}\n        marginTopXS={marginTopXS}\n        marginTopS={marginTopS}\n        marginTopM={marginTopM}\n        marginTopL={marginTopL}\n        marginTopXL={marginTopXL}\n        marginRight={marginRight}\n        marginRightXXS={marginRightXXS}\n        marginRightXS={marginRightXS}\n        marginRightS={marginRightS}\n        marginRightM={marginRightM}\n        marginRightL={marginRightL}\n        marginRightXL={marginRightXL}\n        marginBottom={marginBottom}\n        marginBottomXXS={marginBottomXXS}\n        marginBottomXS={marginBottomXS}\n        marginBottomS={marginBottomS}\n        marginBottomM={marginBottomM}\n        marginBottomL={marginBottomL}\n        marginBottomXL={marginBottomXL}\n        marginLeft={marginLeft}\n        marginLeftXXS={marginLeftXXS}\n        marginLeftXS={marginLeftXS}\n        marginLeftS={marginLeftS}\n        marginLeftM={marginLeftM}\n        marginLeftL={marginLeftL}\n        marginLeftXL={marginLeftXL}\n        className={className}\n        style={style}\n        contrast={contrast}\n        error={error}\n        inline={inline}\n        disabled={disabled}\n        primary={primary}\n        secondary={secondary}\n        success={success}\n        palette={{\n          color: disabled ? palette.colorDisabled : palette.color,\n          backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n          backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n          borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n        }}\n        onClick={() => {\n          if (textareaRef.current) {\n            textareaRef.current.focus()\n          }\n        }}\n        onFocus={() => {\n          setActive(true)\n        }}\n        onPointerDown={(evt) => {\n          if (evt.target === textareaRef.current || !(evt.target instanceof Node)) {\n            return\n          }\n          evt.preventDefault()\n        }}\n        onBlur={(evt) => {\n          if (textareaRef.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n            setActive(Boolean(textareaRef.current.value))\n          }\n        }}\n        overflow='hidden'\n        input={\n          <InputLabel\n            {...sizeProps}\n            sizes={SIZES_FORM_INPUT}\n            active={active}\n            label={label}\n            labelId={labelId}\n            labelPosition={labelPosition}\n          >\n            {autoRows ? <Styled.TextareaMimic ref={textareaMimicRef} rows={1} /> : null}\n            <Styled.Textarea\n              {...textareaProps}\n              ref={textareaRef}\n              aria-labelledby={label ? labelId : undefined}\n              disabled={disabled}\n              onChange={(evt) => {\n                if (autoRows) updateAutoRowsCount()\n                if (textareaProps.onChange) textareaProps.onChange(evt)\n              }}\n              rows={rowsVisible}\n              palette={{\n                color: palette.color,\n                colorDisabled: palette.colorDisabled,\n                placeholderColor: palette.placeholderColor,\n                placeholderColorDisabled: palette.placeholderColorDisabled,\n              }}\n            />\n          </InputLabel>\n        }\n        addon={\n          resize ? (\n            <>\n              {resizing ? <Styled.ResizeGlobals cursor={cursorResize} /> : null}\n              <Styled.ResizeIcon\n                size='l'\n                icon={<ResizeHandle />}\n                color='border-onmain-default-small'\n                tabIndex={0}\n                onPointerDown={handleResizeStart}\n                onKeyDown={handleResizeOnNudge}\n                cursor={cursorResize}\n              />\n            </>\n          ) : undefined\n        }\n      />\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { Textarea, COMPONENT_NAME }\n"],"names":["Textarea","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rows","maxRows","labelPosition","primary","width","defaultInputControlsWidth","autosize","rounded","color","placeholderColor","autoRows","resize","contrast","inline","secondary","success","error","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","widthXXS","widthXS","widthS","widthM","widthL","widthXL","preset","palette","label","fluid","className","style","disabled","textareaProps","sizeProps","textareaRef","useRef","textareaMimicRef","formInputLabelRef","useImperativeHandle","current","resizing","handleResizeStart","handleResizeOnNudge","useResizable","target","direction","labelId","useMemo","nanoid","active","setActive","useState","valueInit","value","defaultValue","length","autoRowsCount","setAutoRowsCount","Math","min","rowsVisible","cursorResize","updateAutoRowsCount","useCallback","nextRows","max","round","scrollHeight","clientHeight","styles","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","Number","isNaN","fontSize","prevRows","useLayoutEffect","document","activeElement","useEffect","handleResize","createThrottledCallback","window","addEventListener","removeEventListener","_jsx","Styled","ref","onChange","evt","FormInputLabel","colorDisabled","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","focus","onFocus","onPointerDown","Node","preventDefault","onBlur","currentTarget","contains","relatedTarget","Boolean","overflow","input","_jsxs","jsxs","InputLabel","SIZES_FORM_INPUT","SIZES","children","jsx","undefined","placeholderColorDisabled","addon","_Fragment","cursor","icon","ResizeHandle","tabIndex","onKeyDown","displayName"],"mappings":"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"}