@foxford/ui 2.116.0 → 2.117.0

package/components/Icon/style.mjs

@@ -1,2 +1,2 @@
-import styled from'styled-components';import{getColor}from'../../mixins/color.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const shouldForwardIconProp=createShouldForwardProp(o=>!['vAlign','url','multicolor'].includes(o));const Root=styled.span.withConfig({shouldForwardProp:shouldForwardIconProp}).withConfig({displayName:"Icon__Root",componentId:"ui__sc-yfeniy-0"})([""," "," "," ",""],o=>`\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: ${o.color?getColor(o.color,o):'inherit'};\n    vertical-align: ${o.vAlign?o.vAlign:'baseline'};\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: currentcolor;\n    }\n  `,o=>o.url?o.multicolor?`\n          background-image: url(${o.url});\n          background-origin: border-box;\n          background-position: center;\n          background-repeat: no-repeat;\n          background-size: contain;\n          `:`\n          mask-image: url(${o.url});\n          mask-position: center;\n          mask-repeat: no-repeat;\n          mask-size: contain;\n          background-color: currentcolor;\n          `:'',responsiveSize,responsiveMargin);export{Root};
+import styled from'styled-components';import{getColor}from'../../mixins/color.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const shouldForwardIconProp=createShouldForwardProp(o=>!['vAlign','url','multicolor','rotate','flipX','flipY'].includes(o));const Root=styled.span.withConfig({shouldForwardProp:shouldForwardIconProp}).withConfig({displayName:"Icon__Root",componentId:"ui__sc-yfeniy-0"})([""," "," "," "," ",""],o=>`\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: ${o.color?getColor(o.color,o):'inherit'};\n    vertical-align: ${o.vAlign?o.vAlign:'baseline'};\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: currentcolor;\n    }\n  `,o=>{const n=[];return o.flipY&&n.push("scaleY(-1)"),o.flipX&&n.push("scaleX(-1)"),o.rotate&&n.push(`rotate(${o.rotate})`),n.length?`\n      transform: ${n.join(' ')};\n    `:null},o=>o.url?o.multicolor?`\n          background-image: url(${o.url});\n          background-origin: border-box;\n          background-position: center;\n          background-repeat: no-repeat;\n          background-size: contain;\n          `:`\n          mask-image: url(${o.url});\n          mask-position: center;\n          mask-repeat: no-repeat;\n          mask-size: contain;\n          background-color: currentcolor;\n          `:'',responsiveSize,responsiveMargin);export{Root};
 //# sourceMappingURL=style.mjs.map

package/components/Icon/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/Icon/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledIconProps } from './types'\n\nconst shouldForwardIconProp = createShouldForwardProp((propKey) => !['vAlign', 'url', 'multicolor'].includes(propKey))\n\nexport const Root = styled.span.withConfig<StyledIconProps>({\n  shouldForwardProp: shouldForwardIconProp,\n})`\n  ${(props) => `\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: ${props.color ? getColor(props.color, props) : 'inherit'};\n    vertical-align: ${props.vAlign ? props.vAlign : 'baseline'};\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: currentcolor;\n    }\n  `}\n\n  ${(props) => {\n    if (!props.url) {\n      return ''\n    }\n\n    return props.multicolor\n      ? `\n          background-image: url(${props.url});\n          background-origin: border-box;\n          background-position: center;\n          background-repeat: no-repeat;\n          background-size: contain;\n          `\n      : `\n          mask-image: url(${props.url});\n          mask-position: center;\n          mask-repeat: no-repeat;\n          mask-size: contain;\n          background-color: currentcolor;\n          `\n  }}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n"],"names":["shouldForwardIconProp","createShouldForwardProp","propKey","includes","Root","styled","span","withConfig","shouldForwardProp","displayName","componentId","props","color","getColor","vAlign","url","multicolor","responsiveSize","responsiveMargin"],"mappings":"mRAOA,MAAMA,sBAAwBC,wBAAyBC,IAAa,CAAC,SAAU,MAAO,cAAcC,SAASD,IAEtG,MAAME,KAAOC,OAAOC,KAAKC,WAA4B,CAC1DC,kBAAmBR,wBACnBO,WAAA,CAAAE,YAAA,aAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IACGM,GAAU,wLAQFA,EAAMC,MAAQC,SAASF,EAAMC,MAAOD,GAAS,mCACpCA,EAAMG,OAASH,EAAMG,OAAS,mIAS/CH,GACIA,EAAMI,IAIJJ,EAAMK,WACT,qCAC0BL,EAAMI,oLAMhC,+BACoBJ,EAAMI,mKAZrB,GAoBTE,eACAC"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/Icon/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledIconProps } from './types'\n\nconst shouldForwardIconProp = createShouldForwardProp(\n  (propKey) => !['vAlign', 'url', 'multicolor', 'rotate', 'flipX', 'flipY'].includes(propKey)\n)\n\nexport const Root = styled.span.withConfig<StyledIconProps>({\n  shouldForwardProp: shouldForwardIconProp,\n})`\n  ${(props) => `\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: ${props.color ? getColor(props.color, props) : 'inherit'};\n    vertical-align: ${props.vAlign ? props.vAlign : 'baseline'};\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: currentcolor;\n    }\n  `}\n\n  ${(props) => {\n    const transform = []\n\n    if (props.flipY) {\n      transform.push(`scaleY(-1)`)\n    }\n    if (props.flipX) {\n      transform.push(`scaleX(-1)`)\n    }\n    if (props.rotate) {\n      transform.push(`rotate(${props.rotate})`)\n    }\n\n    return transform.length\n      ? `\n      transform: ${transform.join(' ')};\n    `\n      : null\n  }}\n\n  ${(props) => {\n    if (!props.url) {\n      return ''\n    }\n\n    return props.multicolor\n      ? `\n          background-image: url(${props.url});\n          background-origin: border-box;\n          background-position: center;\n          background-repeat: no-repeat;\n          background-size: contain;\n          `\n      : `\n          mask-image: url(${props.url});\n          mask-position: center;\n          mask-repeat: no-repeat;\n          mask-size: contain;\n          background-color: currentcolor;\n          `\n  }}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n"],"names":["shouldForwardIconProp","createShouldForwardProp","propKey","includes","Root","styled","span","withConfig","shouldForwardProp","displayName","componentId","props","color","getColor","vAlign","transform","flipY","push","flipX","rotate","length","join","url","multicolor","responsiveSize","responsiveMargin"],"mappings":"mRAOA,MAAMA,sBAAwBC,wBAC3BC,IAAa,CAAC,SAAU,MAAO,aAAc,SAAU,QAAS,SAASC,SAASD,IAG9E,MAAME,KAAOC,OAAOC,KAAKC,WAA4B,CAC1DC,kBAAmBR,wBACnBO,WAAA,CAAAE,YAAA,aAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IACGM,GAAU,wLAQFA,EAAMC,MAAQC,SAASF,EAAMC,MAAOD,GAAS,mCACpCA,EAAMG,OAASH,EAAMG,OAAS,mIAS/CH,IACD,MAAMI,EAAY,GAYlB,OAVIJ,EAAMK,OACRD,EAAUE,KAAK,cAEbN,EAAMO,OACRH,EAAUE,KAAK,cAEbN,EAAMQ,QACRJ,EAAUE,KAAK,UAAUN,EAAMQ,WAG1BJ,EAAUK,OACb,sBACWL,EAAUM,KAAK,cAE1B,MAGHV,GACIA,EAAMW,IAIJX,EAAMY,WACT,qCAC0BZ,EAAMW,oLAMhC,+BACoBX,EAAMW,mKAZrB,GAoBTE,eACAC"}

package/components/ListItem/ListItem.js

@@ -1,2 +1,2 @@
-'use strict';var isNil=require('../../shared/utils/isNil.js');var useMergedProps=require('../../hooks/useMergedProps.js');var createPolymorphicComponentWithRef=require('../../shared/utils/createPolymorphicComponentWithRef.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Slot=require('../Slot/Slot.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var Icon=require('../Icon/Icon.js');var index=require('../../icon-pack/src/icons/ChevronRight/index.js');const ListItem=createPolymorphicComponentWithRef.createPolymorphicComponentWithRef((e,s)=>{const{component:t="button",size:i="s",borderRadius:r=0,withChevron:o,children:n,content:l,text:a,caption:c,addonLeft:x,addonRight:u,loadingLayout:p,loading:j,sizeXXS:d,sizeXS:m,sizeS:S,sizeM:R,sizeL:h,sizeXL:z,...P}=useMergedProps.useMergedProps(e,{componentName:"ListItem",sizes:sizes.SIZES});const v={size:i,sizeXXS:d,sizeXS:m,sizeS:S,sizeM:R,sizeL:h,sizeXL:z};const g={...v,sizes:sizes.SIZES_TEXT,appearance:'body',color:'inherit',ellipsis:!0,textAlign:'start'};const y={...v,sizes:sizes.SIZES_CAPTION,appearance:'body',color:'inherit',ellipsis:!0,textAlign:'start'};const I={width:'65%',borderRadius:4,onColored:P.contrast&&!P.active};return jsxRuntime.jsx(style.Root,{...P,...v,as:t,type:P.type??(t==='button'?'button':void 0),borderRadius:r,loading:j,ref:s,children:jsxRuntime.jsx(Slot.Slot,{render:n,props:{textProps:g,captionProps:y,skeletonProps:I},fallback:j?jsxRuntime.jsx(Slot.Slot,{render:p,props:{textProps:g,captionProps:y,skeletonProps:I},fallback:jsxRuntime.jsx(Skeleton.Skeleton,{...I,children:jsxRuntime.jsx(Text.Text,{...g})})}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Slot.Slot,{render:x}),isNil.isNil(l)&&isNil.isNil(a)&&isNil.isNil(c)?null:jsxRuntime.jsx(style.Content,{children:jsxRuntime.jsx(Slot.Slot,{render:l,props:{textProps:g,captionProps:y},fallback:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Slot.Slot,{render:a,props:g}),jsxRuntime.jsx(Slot.Slot,{render:c,props:y})]})})}),jsxRuntime.jsx(Slot.Slot,{render:u}),o?jsxRuntime.jsx(Icon.Icon,{icon:jsxRuntime.jsx(index.ChevronRight,{}),size:24,color:"inherit"}):null]})})})});exports.ListItem=ListItem;
+'use strict';var isNil=require('../../shared/utils/isNil.js');var useMergedProps=require('../../hooks/useMergedProps.js');var createPolymorphicComponentWithRef=require('../../shared/utils/createPolymorphicComponentWithRef.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Slot=require('../Slot/Slot.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var Icon=require('../Icon/Icon.js');var index=require('../../icon-pack/src/icons/ChevronUp/index.js');const ListItem=createPolymorphicComponentWithRef.createPolymorphicComponentWithRef((e,s)=>{const{component:t="button",size:i="s",borderRadius:r=0,withChevron:o,children:n,content:l,text:a,caption:c,addonLeft:x,addonRight:p,loadingLayout:u,loading:j,sizeXXS:d,sizeXS:m,sizeS:S,sizeM:R,sizeL:h,sizeXL:z,...P}=useMergedProps.useMergedProps(e,{componentName:"ListItem",sizes:sizes.SIZES});const v={size:i,sizeXXS:d,sizeXS:m,sizeS:S,sizeM:R,sizeL:h,sizeXL:z};const g={...v,sizes:sizes.SIZES_TEXT,appearance:'body',color:'inherit',ellipsis:!0,textAlign:'start'};const y={...v,sizes:sizes.SIZES_CAPTION,appearance:'body',color:'inherit',ellipsis:!0,textAlign:'start'};const I={width:'65%',borderRadius:4,onColored:P.contrast&&!P.active};return jsxRuntime.jsx(style.Root,{...P,...v,as:t,type:P.type??(t==='button'?'button':void 0),borderRadius:r,loading:j,ref:s,children:jsxRuntime.jsx(Slot.Slot,{render:n,props:{textProps:g,captionProps:y,skeletonProps:I},fallback:j?jsxRuntime.jsx(Slot.Slot,{render:u,props:{textProps:g,captionProps:y,skeletonProps:I},fallback:jsxRuntime.jsx(Skeleton.Skeleton,{...I,children:jsxRuntime.jsx(Text.Text,{...g})})}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Slot.Slot,{render:x}),isNil.isNil(l)&&isNil.isNil(a)&&isNil.isNil(c)?null:jsxRuntime.jsx(style.Content,{children:jsxRuntime.jsx(Slot.Slot,{render:l,props:{textProps:g,captionProps:y},fallback:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Slot.Slot,{render:a,props:g}),jsxRuntime.jsx(Slot.Slot,{render:c,props:y})]})})}),jsxRuntime.jsx(Slot.Slot,{render:p}),o?jsxRuntime.jsx(Icon.Icon,{icon:jsxRuntime.jsx(index.ChevronUp,{}),rotate:"90deg",size:24,color:"inherit"}):null]})})})});exports.ListItem=ListItem;
 //# sourceMappingURL=ListItem.js.map

package/components/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import { ChevronRight } from '@foxford/icon-pack'\nimport { isNil } from 'shared/utils/isNil'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { Slot } from 'components/Slot'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport { createPolymorphicComponentWithRef } from 'shared/utils/createPolymorphicComponentWithRef'\nimport type { TextProps } from 'components/Text'\nimport type { SkeletonProps } from 'components/Skeleton'\nimport type { PolymorphicProps } from 'shared/interfaces'\nimport { SIZES, SIZES_TEXT, SIZES_CAPTION } from './sizes'\nimport * as Styled from './style'\nimport type { ListItemProps } from './types'\n\nconst COMPONENT_NAME = 'ListItem'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для вывода элемента списка.\n *\n * Полиморфный компонент.\n *\n * Можно передать \"ref\" и атрибуты выбранного HTML-элемента (по умолчанию \\<button\\>).\n */\nconst ListItem = createPolymorphicComponentWithRef<'button', ListItemProps>((props, ref) => {\n  const {\n    component = 'button',\n    size = 's',\n    borderRadius = 0,\n    withChevron,\n    children,\n    content,\n    text,\n    caption,\n    addonLeft,\n    addonRight,\n    loadingLayout,\n    loading,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    ...restProps\n  } = useMergedProps<PolymorphicProps<React.ElementType, ListItemProps>>(props, {\n    componentName: COMPONENT_NAME,\n    sizes: SIZES,\n  })\n\n  const sizeProps = {\n    size,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n  }\n\n  const textProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_TEXT,\n    appearance: 'body',\n    color: 'inherit',\n    ellipsis: true,\n    textAlign: 'start',\n  }\n\n  const captionProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_CAPTION,\n    appearance: 'body',\n    color: 'inherit',\n    ellipsis: true,\n    textAlign: 'start',\n  }\n\n  const skeletonProps: SkeletonProps = {\n    width: '65%',\n    borderRadius: 4,\n    onColored: restProps.contrast && !restProps.active,\n  }\n\n  return (\n    <Styled.Root\n      {...restProps}\n      {...sizeProps}\n      as={component}\n      type={restProps.type ?? (component === 'button' ? 'button' : undefined)}\n      borderRadius={borderRadius}\n      loading={loading}\n      ref={ref}\n    >\n      <Slot\n        render={children}\n        props={{\n          textProps,\n          captionProps,\n          skeletonProps,\n        }}\n        fallback={\n          loading ? (\n            <Slot\n              render={loadingLayout}\n              props={{\n                textProps,\n                captionProps,\n                skeletonProps,\n              }}\n              fallback={\n                <Skeleton {...skeletonProps}>\n                  <Text {...textProps} />\n                </Skeleton>\n              }\n            />\n          ) : (\n            <>\n              <Slot render={addonLeft} />\n              {!isNil(content) || !isNil(text) || !isNil(caption) ? (\n                <Styled.Content>\n                  <Slot\n                    render={content}\n                    props={{\n                      textProps,\n                      captionProps,\n                    }}\n                    fallback={\n                      <>\n                        <Slot render={text} props={textProps} />\n                        <Slot render={caption} props={captionProps} />\n                      </>\n                    }\n                  />\n                </Styled.Content>\n              ) : null}\n              <Slot render={addonRight} />\n              {withChevron ? <Icon icon={<ChevronRight />} size={24} color='inherit' /> : null}\n            </>\n          )\n        }\n      />\n    </Styled.Root>\n  )\n})\n\nconst ListItemDoc: React.FC<ListItemProps> = () => null\n\nexport { ListItemDoc, ListItem }\n"],"names":["ListItem","createPolymorphicComponentWithRef","props","ref","component","size","borderRadius","withChevron","children","content","text","caption","addonLeft","addonRight","loadingLayout","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","useMergedProps","componentName","sizes","SIZES","sizeProps","textProps","SIZES_TEXT","appearance","color","ellipsis","textAlign","captionProps","SIZES_CAPTION","skeletonProps","width","onColored","contrast","active","_jsx","Styled","as","type","undefined","Slot","render","fallback","Skeleton","Text","_jsxs","_Fragment","isNil","Icon","icon","ChevronRight"],"mappings":"gjBA2BA,MAAMA,SAAWC,kCAAAA,kCAA2D,CAACC,EAAOC,KAClF,MAAMC,UACJA,EAAY,SAAQC,KACpBA,EAAO,IAAGC,aACVA,EAAe,EAACC,YAChBA,EAAWC,SACXA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,UACPA,EAASC,WACTA,EAAUC,cACVA,EAAaC,QACbA,EAAOC,QACPA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,KACGC,GACDC,eAAAA,eAAmErB,EAAO,CAC5EsB,cAlCmB,WAmCnBC,MAAOC,MAAAA,QAGT,MAAMC,EAAY,CAChBtB,OACAW,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMO,EAAuB,IACxBD,EACHF,MAAOI,MAAAA,WACPC,WAAY,OACZC,MAAO,UACPC,UAAU,EACVC,UAAW,SAGb,MAAMC,EAA0B,IAC3BP,EACHF,MAAOU,MAAAA,cACPL,WAAY,OACZC,MAAO,UACPC,UAAU,EACVC,UAAW,SAGb,MAAMG,EAA+B,CACnCC,MAAO,MACP/B,aAAc,EACdgC,UAAWhB,EAAUiB,WAAajB,EAAUkB,QAG9C,OACEC,WAAAA,IAACC,MAAAA,KAAW,IACNpB,KACAK,EACJgB,GAAIvC,EACJwC,KAAMtB,EAAUsB,OAASxC,IAAc,SAAW,cAAWyC,GAC7DvC,aAAcA,EACdS,QAASA,EACTZ,IAAKA,EAAIK,SAETiC,WAAAA,IAACK,UAAI,CACHC,OAAQvC,EACRN,MAAO,CACL0B,YACAM,eACAE,iBAEFY,SACEjC,EACE0B,WAAAA,IAACK,UAAI,CACHC,OAAQjC,EACRZ,MAAO,CACL0B,YACAM,eACAE,iBAEFY,SACEP,WAAAA,IAACQ,kBAAQ,IAAKb,EAAa5B,SACzBiC,WAAAA,IAACS,UAAI,IAAKtB,QAKhBuB,WAAAA,KAAAC,oBAAA,CAAA5C,SAAA,CACEiC,WAAAA,IAACK,UAAI,CAACC,OAAQnC,IACZyC,MAAAA,MAAM5C,IAAa4C,MAAAA,MAAM3C,IAAU2C,MAAAA,MAAM1C,GAgBvC,KAfF8B,WAAAA,IAACC,MAAAA,QAAc,CAAAlC,SACbiC,WAAAA,IAACK,UAAI,CACHC,OAAQtC,EACRP,MAAO,CACL0B,YACAM,gBAEFc,SACEG,WAAAA,KAAAC,oBAAA,CAAA5C,SAAA,CACEiC,WAAAA,IAACK,UAAI,CAACC,OAAQrC,EAAMR,MAAO0B,IAC3Ba,WAAAA,IAACK,UAAI,CAACC,OAAQpC,EAAST,MAAOgC,WAMxCO,WAAAA,IAACK,UAAI,CAACC,OAAQlC,IACbN,EAAckC,WAAAA,IAACa,UAAI,CAACC,KAAMd,WAAAA,IAACe,MAAAA,iBAAiBnD,KAAM,GAAI0B,MAAM,YAAe"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import { ChevronUp } from '@foxford/icon-pack'\nimport { isNil } from 'shared/utils/isNil'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { Slot } from 'components/Slot'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport { createPolymorphicComponentWithRef } from 'shared/utils/createPolymorphicComponentWithRef'\nimport type { TextProps } from 'components/Text'\nimport type { SkeletonProps } from 'components/Skeleton'\nimport type { PolymorphicProps } from 'shared/interfaces'\nimport { SIZES, SIZES_TEXT, SIZES_CAPTION } from './sizes'\nimport * as Styled from './style'\nimport type { ListItemProps } from './types'\n\nconst COMPONENT_NAME = 'ListItem'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для вывода элемента списка.\n *\n * Полиморфный компонент.\n *\n * Можно передать \"ref\" и атрибуты выбранного HTML-элемента (по умолчанию \\<button\\>).\n */\nconst ListItem = createPolymorphicComponentWithRef<'button', ListItemProps>((props, ref) => {\n  const {\n    component = 'button',\n    size = 's',\n    borderRadius = 0,\n    withChevron,\n    children,\n    content,\n    text,\n    caption,\n    addonLeft,\n    addonRight,\n    loadingLayout,\n    loading,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    ...restProps\n  } = useMergedProps<PolymorphicProps<React.ElementType, ListItemProps>>(props, {\n    componentName: COMPONENT_NAME,\n    sizes: SIZES,\n  })\n\n  const sizeProps = {\n    size,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n  }\n\n  const textProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_TEXT,\n    appearance: 'body',\n    color: 'inherit',\n    ellipsis: true,\n    textAlign: 'start',\n  }\n\n  const captionProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_CAPTION,\n    appearance: 'body',\n    color: 'inherit',\n    ellipsis: true,\n    textAlign: 'start',\n  }\n\n  const skeletonProps: SkeletonProps = {\n    width: '65%',\n    borderRadius: 4,\n    onColored: restProps.contrast && !restProps.active,\n  }\n\n  return (\n    <Styled.Root\n      {...restProps}\n      {...sizeProps}\n      as={component}\n      type={restProps.type ?? (component === 'button' ? 'button' : undefined)}\n      borderRadius={borderRadius}\n      loading={loading}\n      ref={ref}\n    >\n      <Slot\n        render={children}\n        props={{\n          textProps,\n          captionProps,\n          skeletonProps,\n        }}\n        fallback={\n          loading ? (\n            <Slot\n              render={loadingLayout}\n              props={{\n                textProps,\n                captionProps,\n                skeletonProps,\n              }}\n              fallback={\n                <Skeleton {...skeletonProps}>\n                  <Text {...textProps} />\n                </Skeleton>\n              }\n            />\n          ) : (\n            <>\n              <Slot render={addonLeft} />\n              {!isNil(content) || !isNil(text) || !isNil(caption) ? (\n                <Styled.Content>\n                  <Slot\n                    render={content}\n                    props={{\n                      textProps,\n                      captionProps,\n                    }}\n                    fallback={\n                      <>\n                        <Slot render={text} props={textProps} />\n                        <Slot render={caption} props={captionProps} />\n                      </>\n                    }\n                  />\n                </Styled.Content>\n              ) : null}\n              <Slot render={addonRight} />\n              {withChevron ? <Icon icon={<ChevronUp />} rotate='90deg' size={24} color='inherit' /> : null}\n            </>\n          )\n        }\n      />\n    </Styled.Root>\n  )\n})\n\nconst ListItemDoc: React.FC<ListItemProps> = () => null\n\nexport { ListItemDoc, ListItem }\n"],"names":["ListItem","createPolymorphicComponentWithRef","props","ref","component","size","borderRadius","withChevron","children","content","text","caption","addonLeft","addonRight","loadingLayout","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","useMergedProps","componentName","sizes","SIZES","sizeProps","textProps","SIZES_TEXT","appearance","color","ellipsis","textAlign","captionProps","SIZES_CAPTION","skeletonProps","width","onColored","contrast","active","_jsx","Styled","as","type","undefined","Slot","render","fallback","Skeleton","Text","_jsxs","_Fragment","isNil","Icon","icon","ChevronUp","rotate"],"mappings":"6iBA2BA,MAAMA,SAAWC,kCAAAA,kCAA2D,CAACC,EAAOC,KAClF,MAAMC,UACJA,EAAY,SAAQC,KACpBA,EAAO,IAAGC,aACVA,EAAe,EAACC,YAChBA,EAAWC,SACXA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,UACPA,EAASC,WACTA,EAAUC,cACVA,EAAaC,QACbA,EAAOC,QACPA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,KACGC,GACDC,eAAAA,eAAmErB,EAAO,CAC5EsB,cAlCmB,WAmCnBC,MAAOC,MAAAA,QAGT,MAAMC,EAAY,CAChBtB,OACAW,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMO,EAAuB,IACxBD,EACHF,MAAOI,MAAAA,WACPC,WAAY,OACZC,MAAO,UACPC,UAAU,EACVC,UAAW,SAGb,MAAMC,EAA0B,IAC3BP,EACHF,MAAOU,MAAAA,cACPL,WAAY,OACZC,MAAO,UACPC,UAAU,EACVC,UAAW,SAGb,MAAMG,EAA+B,CACnCC,MAAO,MACP/B,aAAc,EACdgC,UAAWhB,EAAUiB,WAAajB,EAAUkB,QAG9C,OACEC,WAAAA,IAACC,MAAAA,KAAW,IACNpB,KACAK,EACJgB,GAAIvC,EACJwC,KAAMtB,EAAUsB,OAASxC,IAAc,SAAW,cAAWyC,GAC7DvC,aAAcA,EACdS,QAASA,EACTZ,IAAKA,EAAIK,SAETiC,WAAAA,IAACK,UAAI,CACHC,OAAQvC,EACRN,MAAO,CACL0B,YACAM,eACAE,iBAEFY,SACEjC,EACE0B,WAAAA,IAACK,UAAI,CACHC,OAAQjC,EACRZ,MAAO,CACL0B,YACAM,eACAE,iBAEFY,SACEP,WAAAA,IAACQ,kBAAQ,IAAKb,EAAa5B,SACzBiC,WAAAA,IAACS,UAAI,IAAKtB,QAKhBuB,WAAAA,KAAAC,oBAAA,CAAA5C,SAAA,CACEiC,WAAAA,IAACK,UAAI,CAACC,OAAQnC,IACZyC,MAAAA,MAAM5C,IAAa4C,MAAAA,MAAM3C,IAAU2C,MAAAA,MAAM1C,GAgBvC,KAfF8B,WAAAA,IAACC,MAAAA,QAAc,CAAAlC,SACbiC,WAAAA,IAACK,UAAI,CACHC,OAAQtC,EACRP,MAAO,CACL0B,YACAM,gBAEFc,SACEG,WAAAA,KAAAC,oBAAA,CAAA5C,SAAA,CACEiC,WAAAA,IAACK,UAAI,CAACC,OAAQrC,EAAMR,MAAO0B,IAC3Ba,WAAAA,IAACK,UAAI,CAACC,OAAQpC,EAAST,MAAOgC,WAMxCO,WAAAA,IAACK,UAAI,CAACC,OAAQlC,IACbN,EAAckC,WAAAA,IAACa,UAAI,CAACC,KAAMd,WAAAA,IAACe,MAAAA,cAAcC,OAAO,QAAQpD,KAAM,GAAI0B,MAAM,YAAe"}

package/components/ListItem/ListItem.mjs

@@ -1,2 +1,2 @@
-import{isNil}from'../../shared/utils/isNil.mjs';import{useMergedProps}from'../../hooks/useMergedProps.mjs';import{createPolymorphicComponentWithRef}from'../../shared/utils/createPolymorphicComponentWithRef.mjs';import{SIZES,SIZES_CAPTION,SIZES_TEXT}from'./sizes.mjs';import{Root,Content}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Slot}from'../Slot/Slot.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Icon}from'../Icon/Icon.mjs';import{ChevronRight}from'../../icon-pack/src/icons/ChevronRight/index.mjs';const ListItem=createPolymorphicComponentWithRef((o,e)=>{const{component:t="button",size:s="s",borderRadius:r=0,withChevron:i,children:n,content:l,text:p,caption:m,addonLeft:c,addonRight:a,loadingLayout:d,loading:S,sizeXXS:x,sizeXS:h,sizeS:j,sizeM:f,sizeL:z,sizeXL:u,...P}=useMergedProps(o,{componentName:"ListItem",sizes:SIZES});const g={size:s,sizeXXS:x,sizeXS:h,sizeS:j,sizeM:f,sizeL:z,sizeXL:u};const I={...g,sizes:SIZES_TEXT,appearance:'body',color:'inherit',ellipsis:!0,textAlign:'start'};const C={...g,sizes:SIZES_CAPTION,appearance:'body',color:'inherit',ellipsis:!0,textAlign:'start'};const R={width:'65%',borderRadius:4,onColored:P.contrast&&!P.active};return jsx(Root,{...P,...g,as:t,type:P.type??(t==='button'?'button':void 0),borderRadius:r,loading:S,ref:e,children:jsx(Slot,{render:n,props:{textProps:I,captionProps:C,skeletonProps:R},fallback:S?jsx(Slot,{render:d,props:{textProps:I,captionProps:C,skeletonProps:R},fallback:jsx(Skeleton,{...R,children:jsx(Text,{...I})})}):jsxs(Fragment,{children:[jsx(Slot,{render:c}),isNil(l)&&isNil(p)&&isNil(m)?null:jsx(Content,{children:jsx(Slot,{render:l,props:{textProps:I,captionProps:C},fallback:jsxs(Fragment,{children:[jsx(Slot,{render:p,props:I}),jsx(Slot,{render:m,props:C})]})})}),jsx(Slot,{render:a}),i?jsx(Icon,{icon:jsx(ChevronRight,{}),size:24,color:"inherit"}):null]})})})});export{ListItem};
+import{isNil}from'../../shared/utils/isNil.mjs';import{useMergedProps}from'../../hooks/useMergedProps.mjs';import{createPolymorphicComponentWithRef}from'../../shared/utils/createPolymorphicComponentWithRef.mjs';import{SIZES,SIZES_CAPTION,SIZES_TEXT}from'./sizes.mjs';import{Root,Content}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Slot}from'../Slot/Slot.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Icon}from'../Icon/Icon.mjs';import{ChevronUp}from'../../icon-pack/src/icons/ChevronUp/index.mjs';const ListItem=createPolymorphicComponentWithRef((o,e)=>{const{component:t="button",size:s="s",borderRadius:r=0,withChevron:i,children:n,content:p,text:l,caption:m,addonLeft:c,addonRight:a,loadingLayout:d,loading:S,sizeXXS:x,sizeXS:j,sizeS:h,sizeM:f,sizeL:z,sizeXL:u,...P}=useMergedProps(o,{componentName:"ListItem",sizes:SIZES});const I={size:s,sizeXXS:x,sizeXS:j,sizeS:h,sizeM:f,sizeL:z,sizeXL:u};const g={...I,sizes:SIZES_TEXT,appearance:'body',color:'inherit',ellipsis:!0,textAlign:'start'};const C={...I,sizes:SIZES_CAPTION,appearance:'body',color:'inherit',ellipsis:!0,textAlign:'start'};const b={width:'65%',borderRadius:4,onColored:P.contrast&&!P.active};return jsx(Root,{...P,...I,as:t,type:P.type??(t==='button'?'button':void 0),borderRadius:r,loading:S,ref:e,children:jsx(Slot,{render:n,props:{textProps:g,captionProps:C,skeletonProps:b},fallback:S?jsx(Slot,{render:d,props:{textProps:g,captionProps:C,skeletonProps:b},fallback:jsx(Skeleton,{...b,children:jsx(Text,{...g})})}):jsxs(Fragment,{children:[jsx(Slot,{render:c}),isNil(p)&&isNil(l)&&isNil(m)?null:jsx(Content,{children:jsx(Slot,{render:p,props:{textProps:g,captionProps:C},fallback:jsxs(Fragment,{children:[jsx(Slot,{render:l,props:g}),jsx(Slot,{render:m,props:C})]})})}),jsx(Slot,{render:a}),i?jsx(Icon,{icon:jsx(ChevronUp,{}),rotate:"90deg",size:24,color:"inherit"}):null]})})})});export{ListItem};
 //# sourceMappingURL=ListItem.mjs.map

package/components/ListItem/ListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.mjs","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import { ChevronRight } from '@foxford/icon-pack'\nimport { isNil } from 'shared/utils/isNil'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { Slot } from 'components/Slot'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport { createPolymorphicComponentWithRef } from 'shared/utils/createPolymorphicComponentWithRef'\nimport type { TextProps } from 'components/Text'\nimport type { SkeletonProps } from 'components/Skeleton'\nimport type { PolymorphicProps } from 'shared/interfaces'\nimport { SIZES, SIZES_TEXT, SIZES_CAPTION } from './sizes'\nimport * as Styled from './style'\nimport type { ListItemProps } from './types'\n\nconst COMPONENT_NAME = 'ListItem'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для вывода элемента списка.\n *\n * Полиморфный компонент.\n *\n * Можно передать \"ref\" и атрибуты выбранного HTML-элемента (по умолчанию \\<button\\>).\n */\nconst ListItem = createPolymorphicComponentWithRef<'button', ListItemProps>((props, ref) => {\n  const {\n    component = 'button',\n    size = 's',\n    borderRadius = 0,\n    withChevron,\n    children,\n    content,\n    text,\n    caption,\n    addonLeft,\n    addonRight,\n    loadingLayout,\n    loading,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    ...restProps\n  } = useMergedProps<PolymorphicProps<React.ElementType, ListItemProps>>(props, {\n    componentName: COMPONENT_NAME,\n    sizes: SIZES,\n  })\n\n  const sizeProps = {\n    size,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n  }\n\n  const textProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_TEXT,\n    appearance: 'body',\n    color: 'inherit',\n    ellipsis: true,\n    textAlign: 'start',\n  }\n\n  const captionProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_CAPTION,\n    appearance: 'body',\n    color: 'inherit',\n    ellipsis: true,\n    textAlign: 'start',\n  }\n\n  const skeletonProps: SkeletonProps = {\n    width: '65%',\n    borderRadius: 4,\n    onColored: restProps.contrast && !restProps.active,\n  }\n\n  return (\n    <Styled.Root\n      {...restProps}\n      {...sizeProps}\n      as={component}\n      type={restProps.type ?? (component === 'button' ? 'button' : undefined)}\n      borderRadius={borderRadius}\n      loading={loading}\n      ref={ref}\n    >\n      <Slot\n        render={children}\n        props={{\n          textProps,\n          captionProps,\n          skeletonProps,\n        }}\n        fallback={\n          loading ? (\n            <Slot\n              render={loadingLayout}\n              props={{\n                textProps,\n                captionProps,\n                skeletonProps,\n              }}\n              fallback={\n                <Skeleton {...skeletonProps}>\n                  <Text {...textProps} />\n                </Skeleton>\n              }\n            />\n          ) : (\n            <>\n              <Slot render={addonLeft} />\n              {!isNil(content) || !isNil(text) || !isNil(caption) ? (\n                <Styled.Content>\n                  <Slot\n                    render={content}\n                    props={{\n                      textProps,\n                      captionProps,\n                    }}\n                    fallback={\n                      <>\n                        <Slot render={text} props={textProps} />\n                        <Slot render={caption} props={captionProps} />\n                      </>\n                    }\n                  />\n                </Styled.Content>\n              ) : null}\n              <Slot render={addonRight} />\n              {withChevron ? <Icon icon={<ChevronRight />} size={24} color='inherit' /> : null}\n            </>\n          )\n        }\n      />\n    </Styled.Root>\n  )\n})\n\nconst ListItemDoc: React.FC<ListItemProps> = () => null\n\nexport { ListItemDoc, ListItem }\n"],"names":["ListItem","createPolymorphicComponentWithRef","props","ref","component","size","borderRadius","withChevron","children","content","text","caption","addonLeft","addonRight","loadingLayout","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","useMergedProps","componentName","sizes","SIZES","sizeProps","textProps","SIZES_TEXT","appearance","color","ellipsis","textAlign","captionProps","SIZES_CAPTION","skeletonProps","width","onColored","contrast","active","_jsx","Styled","as","type","undefined","Slot","render","fallback","Skeleton","Text","_jsxs","_Fragment","isNil","Icon","icon","ChevronRight"],"mappings":"qkBA2BA,MAAMA,SAAWC,kCAA2D,CAACC,EAAOC,KAClF,MAAMC,UACJA,EAAY,SAAQC,KACpBA,EAAO,IAAGC,aACVA,EAAe,EAACC,YAChBA,EAAWC,SACXA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,UACPA,EAASC,WACTA,EAAUC,cACVA,EAAaC,QACbA,EAAOC,QACPA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,KACGC,GACDC,eAAmErB,EAAO,CAC5EsB,cAlCmB,WAmCnBC,MAAOC,QAGT,MAAMC,EAAY,CAChBtB,OACAW,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMO,EAAuB,IACxBD,EACHF,MAAOI,WACPC,WAAY,OACZC,MAAO,UACPC,UAAU,EACVC,UAAW,SAGb,MAAMC,EAA0B,IAC3BP,EACHF,MAAOU,cACPL,WAAY,OACZC,MAAO,UACPC,UAAU,EACVC,UAAW,SAGb,MAAMG,EAA+B,CACnCC,MAAO,MACP/B,aAAc,EACdgC,UAAWhB,EAAUiB,WAAajB,EAAUkB,QAG9C,OACEC,IAACC,KAAW,IACNpB,KACAK,EACJgB,GAAIvC,EACJwC,KAAMtB,EAAUsB,OAASxC,IAAc,SAAW,cAAWyC,GAC7DvC,aAAcA,EACdS,QAASA,EACTZ,IAAKA,EAAIK,SAETiC,IAACK,KAAI,CACHC,OAAQvC,EACRN,MAAO,CACL0B,YACAM,eACAE,iBAEFY,SACEjC,EACE0B,IAACK,KAAI,CACHC,OAAQjC,EACRZ,MAAO,CACL0B,YACAM,eACAE,iBAEFY,SACEP,IAACQ,SAAQ,IAAKb,EAAa5B,SACzBiC,IAACS,KAAI,IAAKtB,QAKhBuB,KAAAC,SAAA,CAAA5C,SAAA,CACEiC,IAACK,KAAI,CAACC,OAAQnC,IACZyC,MAAM5C,IAAa4C,MAAM3C,IAAU2C,MAAM1C,GAgBvC,KAfF8B,IAACC,QAAc,CAAAlC,SACbiC,IAACK,KAAI,CACHC,OAAQtC,EACRP,MAAO,CACL0B,YACAM,gBAEFc,SACEG,KAAAC,SAAA,CAAA5C,SAAA,CACEiC,IAACK,KAAI,CAACC,OAAQrC,EAAMR,MAAO0B,IAC3Ba,IAACK,KAAI,CAACC,OAAQpC,EAAST,MAAOgC,WAMxCO,IAACK,KAAI,CAACC,OAAQlC,IACbN,EAAckC,IAACa,KAAI,CAACC,KAAMd,IAACe,iBAAiBnD,KAAM,GAAI0B,MAAM,YAAe"}
+{"version":3,"file":"ListItem.mjs","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import { ChevronUp } from '@foxford/icon-pack'\nimport { isNil } from 'shared/utils/isNil'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { Slot } from 'components/Slot'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport { createPolymorphicComponentWithRef } from 'shared/utils/createPolymorphicComponentWithRef'\nimport type { TextProps } from 'components/Text'\nimport type { SkeletonProps } from 'components/Skeleton'\nimport type { PolymorphicProps } from 'shared/interfaces'\nimport { SIZES, SIZES_TEXT, SIZES_CAPTION } from './sizes'\nimport * as Styled from './style'\nimport type { ListItemProps } from './types'\n\nconst COMPONENT_NAME = 'ListItem'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для вывода элемента списка.\n *\n * Полиморфный компонент.\n *\n * Можно передать \"ref\" и атрибуты выбранного HTML-элемента (по умолчанию \\<button\\>).\n */\nconst ListItem = createPolymorphicComponentWithRef<'button', ListItemProps>((props, ref) => {\n  const {\n    component = 'button',\n    size = 's',\n    borderRadius = 0,\n    withChevron,\n    children,\n    content,\n    text,\n    caption,\n    addonLeft,\n    addonRight,\n    loadingLayout,\n    loading,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    ...restProps\n  } = useMergedProps<PolymorphicProps<React.ElementType, ListItemProps>>(props, {\n    componentName: COMPONENT_NAME,\n    sizes: SIZES,\n  })\n\n  const sizeProps = {\n    size,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n  }\n\n  const textProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_TEXT,\n    appearance: 'body',\n    color: 'inherit',\n    ellipsis: true,\n    textAlign: 'start',\n  }\n\n  const captionProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_CAPTION,\n    appearance: 'body',\n    color: 'inherit',\n    ellipsis: true,\n    textAlign: 'start',\n  }\n\n  const skeletonProps: SkeletonProps = {\n    width: '65%',\n    borderRadius: 4,\n    onColored: restProps.contrast && !restProps.active,\n  }\n\n  return (\n    <Styled.Root\n      {...restProps}\n      {...sizeProps}\n      as={component}\n      type={restProps.type ?? (component === 'button' ? 'button' : undefined)}\n      borderRadius={borderRadius}\n      loading={loading}\n      ref={ref}\n    >\n      <Slot\n        render={children}\n        props={{\n          textProps,\n          captionProps,\n          skeletonProps,\n        }}\n        fallback={\n          loading ? (\n            <Slot\n              render={loadingLayout}\n              props={{\n                textProps,\n                captionProps,\n                skeletonProps,\n              }}\n              fallback={\n                <Skeleton {...skeletonProps}>\n                  <Text {...textProps} />\n                </Skeleton>\n              }\n            />\n          ) : (\n            <>\n              <Slot render={addonLeft} />\n              {!isNil(content) || !isNil(text) || !isNil(caption) ? (\n                <Styled.Content>\n                  <Slot\n                    render={content}\n                    props={{\n                      textProps,\n                      captionProps,\n                    }}\n                    fallback={\n                      <>\n                        <Slot render={text} props={textProps} />\n                        <Slot render={caption} props={captionProps} />\n                      </>\n                    }\n                  />\n                </Styled.Content>\n              ) : null}\n              <Slot render={addonRight} />\n              {withChevron ? <Icon icon={<ChevronUp />} rotate='90deg' size={24} color='inherit' /> : null}\n            </>\n          )\n        }\n      />\n    </Styled.Root>\n  )\n})\n\nconst ListItemDoc: React.FC<ListItemProps> = () => null\n\nexport { ListItemDoc, ListItem }\n"],"names":["ListItem","createPolymorphicComponentWithRef","props","ref","component","size","borderRadius","withChevron","children","content","text","caption","addonLeft","addonRight","loadingLayout","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","useMergedProps","componentName","sizes","SIZES","sizeProps","textProps","SIZES_TEXT","appearance","color","ellipsis","textAlign","captionProps","SIZES_CAPTION","skeletonProps","width","onColored","contrast","active","_jsx","Styled","as","type","undefined","Slot","render","fallback","Skeleton","Text","_jsxs","_Fragment","isNil","Icon","icon","ChevronUp","rotate"],"mappings":"+jBA2BA,MAAMA,SAAWC,kCAA2D,CAACC,EAAOC,KAClF,MAAMC,UACJA,EAAY,SAAQC,KACpBA,EAAO,IAAGC,aACVA,EAAe,EAACC,YAChBA,EAAWC,SACXA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,UACPA,EAASC,WACTA,EAAUC,cACVA,EAAaC,QACbA,EAAOC,QACPA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,KACGC,GACDC,eAAmErB,EAAO,CAC5EsB,cAlCmB,WAmCnBC,MAAOC,QAGT,MAAMC,EAAY,CAChBtB,OACAW,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMO,EAAuB,IACxBD,EACHF,MAAOI,WACPC,WAAY,OACZC,MAAO,UACPC,UAAU,EACVC,UAAW,SAGb,MAAMC,EAA0B,IAC3BP,EACHF,MAAOU,cACPL,WAAY,OACZC,MAAO,UACPC,UAAU,EACVC,UAAW,SAGb,MAAMG,EAA+B,CACnCC,MAAO,MACP/B,aAAc,EACdgC,UAAWhB,EAAUiB,WAAajB,EAAUkB,QAG9C,OACEC,IAACC,KAAW,IACNpB,KACAK,EACJgB,GAAIvC,EACJwC,KAAMtB,EAAUsB,OAASxC,IAAc,SAAW,cAAWyC,GAC7DvC,aAAcA,EACdS,QAASA,EACTZ,IAAKA,EAAIK,SAETiC,IAACK,KAAI,CACHC,OAAQvC,EACRN,MAAO,CACL0B,YACAM,eACAE,iBAEFY,SACEjC,EACE0B,IAACK,KAAI,CACHC,OAAQjC,EACRZ,MAAO,CACL0B,YACAM,eACAE,iBAEFY,SACEP,IAACQ,SAAQ,IAAKb,EAAa5B,SACzBiC,IAACS,KAAI,IAAKtB,QAKhBuB,KAAAC,SAAA,CAAA5C,SAAA,CACEiC,IAACK,KAAI,CAACC,OAAQnC,IACZyC,MAAM5C,IAAa4C,MAAM3C,IAAU2C,MAAM1C,GAgBvC,KAfF8B,IAACC,QAAc,CAAAlC,SACbiC,IAACK,KAAI,CACHC,OAAQtC,EACRP,MAAO,CACL0B,YACAM,gBAEFc,SACEG,KAAAC,SAAA,CAAA5C,SAAA,CACEiC,IAACK,KAAI,CAACC,OAAQrC,EAAMR,MAAO0B,IAC3Ba,IAACK,KAAI,CAACC,OAAQpC,EAAST,MAAOgC,WAMxCO,IAACK,KAAI,CAACC,OAAQlC,IACbN,EAAckC,IAACa,KAAI,CAACC,KAAMd,IAACe,cAAcC,OAAO,QAAQpD,KAAM,GAAI0B,MAAM,YAAe"}

package/components/TabList/TabList.js

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

package/components/TabList/TabList.js.map

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

package/components/TabList/TabList.mjs

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

package/components/TabList/TabList.mjs.map

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

package/components/TabList/TabListMenuTab.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var Floater=require('react-floater');var nanoid=require('nanoid');var tabList=require('../../shared/context/tabList.js');var useMergedPalette=require('../../hooks/useMergedPalette.js');var useClickOutside=require('../../hooks/useClickOutside.js');var constants=require('../../shared/constants.js');var useFloaterPortal=require('../../hooks/useFloaterPortal.js');var dom=require('../../shared/utils/dom.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var TabListTab=require('../TabListTab/TabListTab.js');var index=require('../../icon-pack/src/icons/ChevronDown/index.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 C=React.useMemo(()=>({size:r,sizeXXS:s,sizeXS:n,sizeS:i,sizeM:l,sizeL:c,sizeXL:u}),[r,s,n,i,l,c,u]);const h=useMergedPalette.useMergedPalette(e);const g=React.useRef(null);const[x,R]=React.useState(null);const j=React.useRef(null);const L=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={...C,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,icon:jsxRuntime.jsx(style.ChevronDown,{}),rotate:A?'180deg':'0deg'}),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=>{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(()=>({...C,disabled:d,role:'menuitem',variant:'filled'}),[C,d]);return useClickOutside.useClickOutside(M,K,{enabled:A,event:'mousedown'}),React.useEffect(()=>(j.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(),j.current=null},100),()=>{j.current&&clearTimeout(j.current)}),[x]),L?jsxRuntime.jsx(Floater__default.default,{open:A,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&&(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: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"]')&&(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