@foxford/ui 2.89.0-beta-f37e97a-20251217 → 2.89.0

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

package/components/TabList/TabListMenuTab.js.map

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

package/components/TabList/TabListMenuTab.mjs

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

package/components/TabList/TabListMenuTab.mjs.map

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

package/components/Textarea/Textarea.js

@@ -1,2 +1,2 @@
-'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;
+'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;
 //# 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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"}

package/components/Textarea/Textarea.mjs

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

package/components/Textarea/Textarea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.mjs","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":["COMPONENT_NAME","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","InputLabel","SIZES_FORM_INPUT","children","undefined","placeholderColorDisabled","addon","_Fragment","cursor","icon","ResizeHandle","tabIndex","onKeyDown","displayName","SIZES"],"mappings":"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"}
+{"version":3,"file":"Textarea.mjs","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":["COMPONENT_NAME","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","InputLabel","SIZES_FORM_INPUT","children","undefined","placeholderColorDisabled","addon","_Fragment","cursor","icon","ResizeHandle","tabIndex","onKeyDown","displayName","SIZES"],"mappings":"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"}

package/components/TooltipComponent/TooltipComponent.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var index=require('../../icon-pack/src/icons/Close/index.js');var Text=require('../Text/Text.js');const TooltipComponent=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:s="s",titleProps:o={},contentProps:i={},closeButtonProps:n={},sizeXXS:r,sizeXS:c,sizeS:a,sizeM:l,sizeL:p,sizeXL:x,title:u,content:m,footer:d,closeFn:z,showCloseButton:j,...T}=e;const S={size:s,sizeXXS:r,sizeXS:c,sizeS:a,sizeM:l,sizeL:p,sizeXL:x};return jsxRuntime.jsxs(style.Root,{...T,...S,ref:t,children:[j?jsxRuntime.jsx(style.CloseButton,{size:"s",icon:jsxRuntime.jsx(index.Close,{}),secondary:T.black,contrast:T.black||T.contrast,...n,onClick:e=>{typeof z=='function'&&z(),n.onClick&&n.onClick(e)}}):null,u?jsxRuntime.jsx(Text.Text,{appearance:"body",color:"inherit",weight:700,marginRight:j?16:void 0,marginBottom:m||d?'0.3em':void 0,sizes:constants.SIZES_TEXT,...S,...o,children:u}):null,m?jsxRuntime.jsx(Text.Text,{appearance:"body",color:"inherit",marginRight:!u&&j?16:void 0,marginBottom:d?'0.2em':void 0,sizes:constants.SIZES_TEXT,...S,...i,children:m}):null,typeof d=='function'?d(S):d]})})),{sizes:constants.SIZES,displayName:"TooltipComponent"});exports.SIZES=constants.SIZES,exports.COMPONENT_NAME="TooltipComponent",exports.TooltipComponent=TooltipComponent;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');const TooltipComponent=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:o="s",titleProps:s={},contentProps:i={},closeButtonProps:n={},sizeXXS:r,sizeXS:c,sizeS:a,sizeM:l,sizeL:p,sizeXL:u,title:m,content:x,footer:z,closeFn:T,showCloseButton:d,...S}=e;const h={size:o,sizeXXS:r,sizeXS:c,sizeS:a,sizeM:l,sizeL:p,sizeXL:u};return jsxRuntime.jsxs(style.Root,{...S,...h,ref:t,children:[d?jsxRuntime.jsx(style.CloseButton,{size:"s",icon:"close",secondary:S.black,contrast:S.black||S.contrast,...n,onClick:e=>{typeof T=='function'&&T(),n.onClick&&n.onClick(e)}}):null,m?jsxRuntime.jsx(Text.Text,{appearance:"body",color:"inherit",weight:700,marginRight:d?16:void 0,marginBottom:x||z?'0.3em':void 0,sizes:constants.SIZES_TEXT,...h,...s,children:m}):null,x?jsxRuntime.jsx(Text.Text,{appearance:"body",color:"inherit",marginRight:!m&&d?16:void 0,marginBottom:z?'0.2em':void 0,sizes:constants.SIZES_TEXT,...h,...i,children:x}):null,typeof z=='function'?z(h):z]})})),{sizes:constants.SIZES,displayName:"TooltipComponent"});exports.SIZES=constants.SIZES,exports.COMPONENT_NAME="TooltipComponent",exports.TooltipComponent=TooltipComponent;
 //# sourceMappingURL=TooltipComponent.js.map

package/components/TooltipComponent/TooltipComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipComponent.js","sources":["../../../../src/components/TooltipComponent/TooltipComponent.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_TEXT } from './constants'\nimport type { TooltipComponentProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TooltipComponent'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс `TooltipComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/TooltipComponent/types.ts).\n */\nconst TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps> = withMergedProps<\n  TooltipComponentProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<TooltipComponentProps>>((props, ref) => {\n    const {\n      size = 's',\n      titleProps = {},\n      contentProps = {},\n      closeButtonProps = {},\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      title,\n      content,\n      footer,\n      closeFn,\n      showCloseButton,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    return (\n      <Styled.Root {...restProps} {...sizeProps} ref={ref}>\n        {showCloseButton ? (\n          <Styled.CloseButton\n            size='s'\n            icon={<Close />}\n            secondary={restProps.black}\n            contrast={restProps.black || restProps.contrast}\n            {...closeButtonProps}\n            onClick={(evt) => {\n              if (typeof closeFn === 'function') closeFn()\n              if (closeButtonProps.onClick) closeButtonProps.onClick(evt)\n            }}\n          />\n        ) : null}\n        {title ? (\n          <Text\n            appearance='body'\n            color='inherit'\n            weight={700}\n            marginRight={showCloseButton ? 16 : undefined}\n            marginBottom={content || footer ? '0.3em' : undefined}\n            sizes={SIZES_TEXT}\n            {...sizeProps}\n            {...titleProps}\n          >\n            {title}\n          </Text>\n        ) : null}\n        {content ? (\n          <Text\n            appearance='body'\n            color='inherit'\n            marginRight={!title && showCloseButton ? 16 : undefined}\n            marginBottom={footer ? '0.2em' : undefined}\n            sizes={SIZES_TEXT}\n            {...sizeProps}\n            {...contentProps}\n          >\n            {content}\n          </Text>\n        ) : null}\n        {typeof footer === 'function' ? footer(sizeProps) : footer}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: SIZES,\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { TooltipComponent }\n\nexport { COMPONENT_NAME, SIZES }\n"],"names":["TooltipComponent","withMergedProps","forwardRef","props","ref","size","titleProps","contentProps","closeButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","title","content","footer","closeFn","showCloseButton","restProps","sizeProps","_jsxs","Styled","children","_jsx","jsx","icon","Close","secondary","black","contrast","onClick","evt","Text","appearance","color","weight","marginRight","undefined","marginBottom","sizes","SIZES_TEXT","SIZES","displayName"],"mappings":"2TAqBMA,MAAAA,iBAA2EC,gBAAAA,gBAI/EC,MAAAA,YAA+D,CAACC,EAAOC,KACrE,MAAMC,KACJA,EAAO,IAAGC,WACVA,EAAa,CAAE,EAAAC,aACfA,EAAe,CAAE,EAAAC,iBACjBA,EAAmB,CAAE,EAAAC,QACrBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,gBACPA,KACGC,GACDjB,EAEJ,MAAMkB,EAAY,CAChBhB,OACAI,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,OACEQ,WAAAA,KAACC,MAAAA,KAAW,IAAKH,KAAeC,EAAWjB,IAAKA,EAAIoB,UACjDL,EACCM,WAAAC,IAACH,kBAAkB,CACjBlB,KAAK,IACLsB,KAAMF,WAAAA,IAACG,MAAKA,UACZC,UAAWT,EAAUU,MACrBC,SAAUX,EAAUU,OAASV,EAAUW,YACnCvB,EACJwB,QAAUC,WACGf,GAAY,YAAYA,IAC/BV,EAAiBwB,SAASxB,EAAiBwB,QAAQC,EAAI,IAG7D,KACHlB,EACCU,WAAAA,IAACS,KAAAA,KAAI,CACHC,WAAW,OACXC,MAAM,UACNC,OAAQ,IACRC,YAAanB,EAAkB,QAAKoB,EACpCC,aAAcxB,GAAWC,EAAS,aAAUsB,EAC5CE,MAAOC,UAAWA,cACdrB,KACAf,EAAUkB,SAEbT,IAED,KACHC,EACCS,WAAAA,IAACS,KAAAA,KAAI,CACHC,WAAW,OACXC,MAAM,UACNE,aAAcvB,GAASI,EAAkB,QAAKoB,EAC9CC,aAAcvB,EAAS,aAAUsB,EACjCE,MAAOC,UAAWA,cACdrB,KACAd,EAAYiB,SAEfR,IAED,YACIC,GAAW,WAAaA,EAAOI,GAAaJ,IACxC,IAGlB,CACEwB,MAAOE,UAAKA,MACZC,YA9FmB,0EAAA"}
+{"version":3,"file":"TooltipComponent.js","sources":["../../../../src/components/TooltipComponent/TooltipComponent.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_TEXT } from './constants'\nimport type { TooltipComponentProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TooltipComponent'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс `TooltipComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/TooltipComponent/types.ts).\n */\nconst TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps> = withMergedProps<\n  TooltipComponentProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<TooltipComponentProps>>((props, ref) => {\n    const {\n      size = 's',\n      titleProps = {},\n      contentProps = {},\n      closeButtonProps = {},\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      title,\n      content,\n      footer,\n      closeFn,\n      showCloseButton,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    return (\n      <Styled.Root {...restProps} {...sizeProps} ref={ref}>\n        {showCloseButton ? (\n          <Styled.CloseButton\n            size='s'\n            icon='close'\n            secondary={restProps.black}\n            contrast={restProps.black || restProps.contrast}\n            {...closeButtonProps}\n            onClick={(evt) => {\n              if (typeof closeFn === 'function') closeFn()\n              if (closeButtonProps.onClick) closeButtonProps.onClick(evt)\n            }}\n          />\n        ) : null}\n        {title ? (\n          <Text\n            appearance='body'\n            color='inherit'\n            weight={700}\n            marginRight={showCloseButton ? 16 : undefined}\n            marginBottom={content || footer ? '0.3em' : undefined}\n            sizes={SIZES_TEXT}\n            {...sizeProps}\n            {...titleProps}\n          >\n            {title}\n          </Text>\n        ) : null}\n        {content ? (\n          <Text\n            appearance='body'\n            color='inherit'\n            marginRight={!title && showCloseButton ? 16 : undefined}\n            marginBottom={footer ? '0.2em' : undefined}\n            sizes={SIZES_TEXT}\n            {...sizeProps}\n            {...contentProps}\n          >\n            {content}\n          </Text>\n        ) : null}\n        {typeof footer === 'function' ? footer(sizeProps) : footer}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: SIZES,\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { TooltipComponent }\n\nexport { COMPONENT_NAME, SIZES }\n"],"names":["TooltipComponent","withMergedProps","forwardRef","props","ref","size","titleProps","contentProps","closeButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","title","content","footer","closeFn","showCloseButton","restProps","sizeProps","_jsxs","Styled","children","_jsx","jsx","icon","secondary","black","contrast","onClick","evt","Text","appearance","color","weight","marginRight","undefined","marginBottom","sizes","SIZES_TEXT","SIZES","displayName"],"mappings":"6PAoBMA,MAAAA,iBAA2EC,gBAAAA,gBAI/EC,MAAAA,YAA+D,CAACC,EAAOC,KACrE,MAAMC,KACJA,EAAO,IAAGC,WACVA,EAAa,CAAE,EAAAC,aACfA,EAAe,CAAE,EAAAC,iBACjBA,EAAmB,CAAE,EAAAC,QACrBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,gBACPA,KACGC,GACDjB,EAEJ,MAAMkB,EAAY,CAChBhB,OACAI,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,OACEQ,WAAAA,KAACC,MAAAA,KAAW,IAAKH,KAAeC,EAAWjB,IAAKA,EAAIoB,UACjDL,EACCM,WAAAC,IAACH,kBAAkB,CACjBlB,KAAK,IACLsB,KAAK,QACLC,UAAWR,EAAUS,MACrBC,SAAUV,EAAUS,OAAST,EAAUU,YACnCtB,EACJuB,QAAUC,WACGd,GAAY,YAAYA,IAC/BV,EAAiBuB,SAASvB,EAAiBuB,QAAQC,EAAI,IAG7D,KACHjB,EACCU,WAAAA,IAACQ,KAAAA,KAAI,CACHC,WAAW,OACXC,MAAM,UACNC,OAAQ,IACRC,YAAalB,EAAkB,QAAKmB,EACpCC,aAAcvB,GAAWC,EAAS,aAAUqB,EAC5CE,MAAOC,UAAWA,cACdpB,KACAf,EAAUkB,SAEbT,IAED,KACHC,EACCS,WAAAA,IAACQ,KAAAA,KAAI,CACHC,WAAW,OACXC,MAAM,UACNE,aAActB,GAASI,EAAkB,QAAKmB,EAC9CC,aAActB,EAAS,aAAUqB,EACjCE,MAAOC,UAAWA,cACdpB,KACAd,EAAYiB,SAEfR,IAED,YACIC,GAAW,WAAaA,EAAOI,GAAaJ,IACxC,IAGlB,CACEuB,MAAOE,UAAKA,MACZC,YA9FmB,0EAAA"}

package/components/TooltipComponent/TooltipComponent.mjs

@@ -1,2 +1,2 @@
-import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_TEXT}from'./constants.mjs';import{Root,CloseButton}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';import{Text}from'../Text/Text.mjs';const COMPONENT_NAME='TooltipComponent';const TooltipComponent=withMergedProps(forwardRef(((o,e)=>{const{size:t="s",titleProps:s={},contentProps:i={},closeButtonProps:n={},sizeXXS:r,sizeXS:c,sizeS:m,sizeM:l,sizeL:p,sizeXL:a,title:z,content:S,footer:d,closeFn:f,showCloseButton:T,...x}=o;const C={size:t,sizeXXS:r,sizeXS:c,sizeS:m,sizeM:l,sizeL:p,sizeXL:a};return jsxs(Root,{...x,...C,ref:e,children:[T?jsx(CloseButton,{size:"s",icon:jsx(Close,{}),secondary:x.black,contrast:x.black||x.contrast,...n,onClick:o=>{typeof f=='function'&&f(),n.onClick&&n.onClick(o)}}):null,z?jsx(Text,{appearance:"body",color:"inherit",weight:700,marginRight:T?16:void 0,marginBottom:S||d?'0.3em':void 0,sizes:SIZES_TEXT,...C,...s,children:z}):null,S?jsx(Text,{appearance:"body",color:"inherit",marginRight:!z&&T?16:void 0,marginBottom:d?'0.2em':void 0,sizes:SIZES_TEXT,...C,...i,children:S}):null,typeof d=='function'?d(C):d]})})),{sizes:SIZES,displayName:"TooltipComponent"});export{COMPONENT_NAME,SIZES,TooltipComponent};
+import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_TEXT}from'./constants.mjs';import{Root,CloseButton}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';const COMPONENT_NAME='TooltipComponent';const TooltipComponent=withMergedProps(forwardRef(((o,t)=>{const{size:e="s",titleProps:s={},contentProps:i={},closeButtonProps:n={},sizeXXS:r,sizeXS:c,sizeS:l,sizeM:m,sizeL:p,sizeXL:a,title:z,content:S,footer:T,closeFn:d,showCloseButton:f,...h}=o;const x={size:e,sizeXXS:r,sizeXS:c,sizeS:l,sizeM:m,sizeL:p,sizeXL:a};return jsxs(Root,{...h,...x,ref:t,children:[f?jsx(CloseButton,{size:"s",icon:"close",secondary:h.black,contrast:h.black||h.contrast,...n,onClick:o=>{typeof d=='function'&&d(),n.onClick&&n.onClick(o)}}):null,z?jsx(Text,{appearance:"body",color:"inherit",weight:700,marginRight:f?16:void 0,marginBottom:S||T?'0.3em':void 0,sizes:SIZES_TEXT,...x,...s,children:z}):null,S?jsx(Text,{appearance:"body",color:"inherit",marginRight:!z&&f?16:void 0,marginBottom:T?'0.2em':void 0,sizes:SIZES_TEXT,...x,...i,children:S}):null,typeof T=='function'?T(x):T]})})),{sizes:SIZES,displayName:"TooltipComponent"});export{COMPONENT_NAME,SIZES,TooltipComponent};
 //# sourceMappingURL=TooltipComponent.mjs.map