@foxford/ui 2.116.0 → 2.117.0

package/components/TabList/TabListMenuTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabListMenuTab.js","sources":["../../../../src/components/TabList/TabListMenuTab.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useMemo, useCallback, Children, isValidElement } from 'react'\nimport Floater from 'react-floater'\nimport { nanoid } from 'nanoid'\nimport { ChevronDown } from '@foxford/icon-pack'\nimport type { Nullable } from 'shared/types'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { TabListTab } from 'components/TabListTab'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport { useClickOutside } from 'hooks/useClickOutside'\nimport { keyboardKeys } from 'shared/constants'\nimport { useFloaterPortal } from 'hooks/useFloaterPortal'\nimport { navigateVerticalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport type { TabListTabProps } from 'components/TabListTab'\nimport * as Styled from './style'\nimport type { TabListMenuTabProps } from './types'\n\nconst TabListMenuTab = (props: TabListMenuTabProps) => {\n  const {\n    role = 'tab',\n    type = 'button',\n    variant = 'clear',\n    size = 'm',\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    disabled,\n    text,\n    control,\n    menuItems,\n    activeTab,\n    firstTab,\n    activationOnFocus,\n    getTabIndex,\n    onActiveTabChange,\n  } = props\n\n  const sizeProps = useMemo(\n    () => ({ size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL }),\n    [size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL]\n  )\n\n  const palette = useMergedPalette(props)\n\n  const controlRef = useRef<Nullable<HTMLElement>>(null)\n  const [menuRef, setMenuRef] = useState<Nullable<HTMLUListElement>>(null)\n\n  const timerId = useRef<Nullable<ReturnType<typeof setTimeout>>>(null)\n\n  const portalElement = useFloaterPortal()\n\n  const [menuOpen, setMenuOpen] = useState(false)\n\n  const controlId = useMemo(() => nanoid(), [])\n\n  const clickOutsideTargets = useMemo(() => [controlRef, menuRef], [menuRef])\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuOpen(false)\n  }, [])\n\n  const menuHasActiveTab = Boolean(\n    menuItems.find(\n      (item) =>\n        isValidElement(item) && typeof item.props === 'object' && item.props !== null && item.props.id === activeTab\n    )\n  )\n\n  const controlProps: TabListTabProps = {\n    ...sizeProps,\n    role,\n    type,\n    variant,\n    'aria-haspopup': 'menu',\n    id: controlId,\n    'aria-selected': menuHasActiveTab,\n    active: menuHasActiveTab,\n    tabIndex: menuHasActiveTab || !firstTab ? 0 : -1,\n    disabled,\n    text,\n    // eslint-disable-next-line react/no-unstable-nested-components\n    addonRight: (addonProps) => (\n      <Styled.IconAnimated {...addonProps.iconProps} rotate={menuOpen} icon={<ChevronDown />} preset='brand' />\n    ),\n    palette: {\n      color: palette.tabColor,\n      colorHover: palette.tabColorHover,\n      colorActive: palette.tabColorActive,\n      colorDisabled: palette.tabColorDisabled,\n      colorActiveDisabled: palette.tabColorActiveDisabled,\n      backgroundColor: palette.tabBackgroundColor,\n      backgroundColorHover: palette.tabBackgroundColorHover,\n      backgroundColorActive: palette.tabBackgroundColorActive,\n      backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n      backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n    },\n    onClick: () => {\n      setMenuOpen((prev) => !prev)\n    },\n    onKeyDown: (evt) => {\n      if (menuOpen && (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key))) {\n        evt.preventDefault()\n        setMenuOpen(false)\n      } else if (\n        !menuOpen &&\n        ((keyboardKeys.F10.validate(evt.key) && evt.shiftKey) || keyboardKeys.ArrowDown.validate(evt.key))\n      ) {\n        evt.preventDefault()\n        setMenuOpen(true)\n      }\n    },\n  }\n\n  const controlsContextProps = useMemo(\n    () => ({\n      activationOnFocus,\n      activeTab,\n      onActiveTabChange,\n      getTabIndex,\n    }),\n    [activationOnFocus, activeTab, onActiveTabChange, getTabIndex]\n  )\n\n  const menuItemsContextProps = useMemo(\n    () => ({\n      ...sizeProps,\n      disabled,\n      role: 'menuitem',\n      variant: 'filled' as TabListTabProps['variant'],\n    }),\n    [sizeProps, disabled]\n  )\n\n  useClickOutside(clickOutsideTargets, handleCloseMenu, {\n    enabled: menuOpen,\n    event: 'mousedown',\n  })\n\n  useEffect(() => {\n    timerId.current = setTimeout(() => {\n      if (!menuRef) return\n\n      const items = Array.from(menuRef.querySelectorAll<HTMLElement>('[role=\"menuitem\"]')).filter((item) =>\n        item.matches(SELECTORS_FOCUSABLE)\n      )\n\n      const activeItem = items.find((item) => item.matches('[aria-selected=\"true\"]'))\n\n      if (activeItem) {\n        activeItem.focus()\n      } else if (items[0]) {\n        items[0].focus()\n      }\n\n      timerId.current = null\n    }, 100)\n\n    return () => {\n      if (timerId.current) {\n        clearTimeout(timerId.current)\n      }\n    }\n  }, [menuRef])\n\n  if (!portalElement) {\n    return null\n  }\n\n  return (\n    <Floater\n      open={menuOpen}\n      portalElement={portalElement}\n      placement='bottom-end'\n      offset={8}\n      hideArrow\n      styles={{\n        options: {\n          zIndex: undefined,\n        },\n        wrapper: {\n          cursor: disabled ? 'not-allowed' : 'pointer',\n        },\n        floater: {\n          filter: 'none',\n          opacity: 1,\n          transitionDuration: '10ms',\n        },\n      }}\n      getPopper={(popper) => {\n        if (popper.state.elements.reference instanceof HTMLElement) {\n          controlRef.current = popper.state.elements.reference\n        }\n      }}\n      modifiers={{\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        removeRoles: {\n          name: 'removeRoles',\n          enabled: true,\n          phase: 'beforeWrite',\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement) {\n              const floaterElement = state.elements.popper.querySelector('[role=\"tooltip\"]')\n              if (floaterElement) {\n                floaterElement.removeAttribute('role')\n              }\n            }\n          },\n        },\n        minWidth: {\n          name: 'minWidth',\n          enabled: true,\n          phase: 'beforeWrite',\n          requires: ['computeStyles'],\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          fn: ({ state }) => {\n            state.styles.popper.minWidth = `${state.rects.reference.width}px`\n          },\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement && state.elements.reference instanceof HTMLElement) {\n              state.elements.popper.style.display = 'flex'\n              state.elements.popper.style.flexDirection = 'column'\n              state.elements.popper.style.alignItems = 'stretch'\n              state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`\n            }\n          },\n        },\n      }}\n      // eslint-disable-next-line react/no-unstable-nested-components\n      component={() => (\n        <Styled.Menu\n          role='menu'\n          aria-labelledby={controlId}\n          ref={setMenuRef}\n          palette={{\n            backgroundColor: palette.menuBackgroundColor,\n          }}\n          onClick={(evt) => {\n            if (evt.target instanceof HTMLElement && evt.target.closest('[role=\"menuitem\"]')) {\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n            }\n          }}\n          onKeyDown={(evt) => {\n            evt.stopPropagation()\n\n            if (\n              !(document.activeElement instanceof HTMLElement) ||\n              !document.activeElement.matches('[role=\"menuitem\"]') ||\n              (!keyboardKeys.Esc.validate(evt.key) &&\n                !keyboardKeys.Tab.validate(evt.key) &&\n                !keyboardKeys.Home.validate(evt.key) &&\n                !keyboardKeys.End.validate(evt.key) &&\n                !keyboardKeys.ArrowDown.validate(evt.key) &&\n                !keyboardKeys.ArrowUp.validate(evt.key))\n            ) {\n              return\n            }\n\n            if (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key)) {\n              evt.preventDefault()\n\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n\n              return\n            }\n\n            const items = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]'))\n\n            if (items.length === 0) return\n\n            if (keyboardKeys.Home.validate(evt.key)) {\n              evt.preventDefault()\n              items[0].focus()\n            } else if (keyboardKeys.End.validate(evt.key)) {\n              evt.preventDefault()\n              items[items.length - 1].focus()\n            } else if (keyboardKeys.ArrowDown.validate(evt.key) || keyboardKeys.ArrowUp.validate(evt.key)) {\n              evt.preventDefault()\n              navigateVerticalList(evt.key, document.activeElement, items, SELECTORS_FOCUSABLE)\n            }\n          }}\n        >\n          <TabListTabsContext.Provider value={controlsContextProps}>\n            <TabListPropsContext.Provider value={menuItemsContextProps}>\n              {Children.map(menuItems, (item) => (\n                <Styled.MenuItem role='none'>{item}</Styled.MenuItem>\n              ))}\n            </TabListPropsContext.Provider>\n          </TabListTabsContext.Provider>\n        </Styled.Menu>\n      )}\n    >\n      {typeof control === 'function' ? control(controlProps) : <TabListTab {...controlProps} />}\n    </Floater>\n  )\n}\n\nexport { TabListMenuTab }\n"],"names":["props","role","type","variant","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","text","control","menuItems","activeTab","firstTab","activationOnFocus","getTabIndex","onActiveTabChange","sizeProps","useMemo","palette","useMergedPalette","controlRef","useRef","menuRef","setMenuRef","useState","timerId","portalElement","useFloaterPortal","menuOpen","setMenuOpen","controlId","nanoid","clickOutsideTargets","handleCloseMenu","useCallback","menuHasActiveTab","Boolean","find","item","isValidElement","id","controlProps","active","tabIndex","addonRight","addonProps","_jsx","Styled","iconProps","rotate","icon","ChevronDown","preset","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","backgroundColor","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","onClick","prev","onKeyDown","evt","keyboardKeys","Esc","validate","key","Tab","preventDefault","F10","shiftKey","ArrowDown","controlsContextProps","menuItemsContextProps","useClickOutside","enabled","event","useEffect","current","setTimeout","items","Array","from","querySelectorAll","filter","matches","SELECTORS_FOCUSABLE","activeItem","focus","clearTimeout","Floater","open","placement","offset","hideArrow","styles","options","zIndex","undefined","wrapper","cursor","floater","opacity","transitionDuration","getPopper","popper","state","elements","reference","HTMLElement","modifiers","removeRoles","name","phase","effect","floaterElement","querySelector","removeAttribute","minWidth","requires","fn","rects","width","style","display","flexDirection","alignItems","offsetWidth","component","ref","menuBackgroundColor","target","closest","stopPropagation","document","activeElement","Home","End","ArrowUp","currentTarget","length","navigateVerticalList","children","TabListTabsContext","Provider","value","TabListPropsContext","Children","map","TabListTab"],"mappings":"2wBAgBwBA,IACtB,MAAMC,KACJA,EAAO,MAAKC,KACZA,EAAO,SAAQC,QACfA,EAAU,QAAOC,KACjBA,EAAO,IAAGC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,SACNA,EAAQC,KACRA,EAAIC,QACJA,EAAOC,UACPA,EAASC,UACTA,EAASC,SACTA,EAAQC,kBACRA,EAAiBC,YACjBA,EAAWC,kBACXA,GACEnB,EAEJ,MAAMoB,EAAYC,MAAAA,QAChB,KAAA,CAASjB,OAAMC,UAASC,SAAQC,QAAOC,QAAOC,QAAOC,WACrD,CAACN,EAAMC,EAASC,EAAQC,EAAOC,EAAOC,EAAOC,IAG/C,MAAMY,EAAUC,iBAAAA,iBAAiBvB,GAEjC,MAAMwB,EAAaC,MAAAA,OAA8B,MACjD,MAAOC,EAASC,GAAcC,MAAAA,SAAqC,MAEnE,MAAMC,EAAUJ,MAAAA,OAAgD,MAEhE,MAAMK,EAAgBC,iBAAAA,mBAEtB,MAAOC,EAAUC,GAAeL,MAAAA,UAAS,GAEzC,MAAMM,EAAYb,MAAAA,QAAQ,IAAMc,OAAAA,SAAU,IAE1C,MAAMC,EAAsBf,MAAAA,QAAQ,IAAM,CAACG,EAAYE,GAAU,CAACA,IAElE,MAAMW,EAAkBC,MAAAA,YAAY,KAClCL,GAAY,IACX,IAEH,MAAMM,EAAmBC,QACvB1B,EAAU2B,KACPC,GACCC,MAAAA,eAAeD,WAAgBA,EAAK1C,OAAU,UAAY0C,EAAK1C,QAAU,MAAQ0C,EAAK1C,MAAM4C,KAAO7B,IAIzG,MAAM8B,EAAgC,IACjCzB,EACHnB,OACAC,OACAC,UACA,gBAAiB,OACjByC,GAAIV,EACJ,gBAAiBK,EACjBO,OAAQP,EACRQ,SAAUR,IAAqBvB,EAAW,GAAI,EAC9CL,WACAC,OAEAoC,WAAaC,GACXC,WAAAA,IAACC,mBAAmB,IAAKF,EAAWG,UAAWC,OAAQrB,EAAUsB,KAAMJ,WAAAA,IAACK,MAAAA,gBAAgBC,OAAO,UAEjGlC,QAAS,CACPmC,MAAOnC,EAAQoC,SACfC,WAAYrC,EAAQsC,cACpBC,YAAavC,EAAQwC,eACrBC,cAAezC,EAAQ0C,iBACvBC,oBAAqB3C,EAAQ4C,uBAC7BC,gBAAiB7C,EAAQ8C,mBACzBC,qBAAsB/C,EAAQgD,wBAC9BC,sBAAuBjD,EAAQkD,yBAC/BC,wBAAyBnD,EAAQoD,2BACjCC,8BAA+BrD,EAAQsD,kCAEzCC,QAASA,KACP5C,EAAa6C,IAAUA,IAEzBC,UAAYC,IACNhD,IAAaiD,UAAAA,aAAaC,IAAIC,SAASH,EAAII,MAAQH,UAAAA,aAAaI,IAAIF,SAASH,EAAII,OACnFJ,EAAIM,iBACJrD,GAAY,KAEXD,IACCiD,UAAAA,aAAaM,IAAIJ,SAASH,EAAII,MAAQJ,EAAIQ,UAAaP,UAAAA,aAAaQ,UAAUN,SAASH,EAAII,QAE7FJ,EAAIM,iBACJrD,GAAY,MAKlB,MAAMyD,EAAuBrE,MAAAA,QAC3B,KAAA,CACEJ,oBACAF,YACAI,oBACAD,gBAEF,CAACD,EAAmBF,EAAWI,EAAmBD,IAGpD,MAAMyE,EAAwBtE,MAAAA,QAC5B,KAAA,IACKD,EACHT,WACAV,KAAM,WACNE,QAAS,WAEX,CAACiB,EAAWT,IAkCd,OA/BAiF,gBAAAA,gBAAgBxD,EAAqBC,EAAiB,CACpDwD,QAAS7D,EACT8D,MAAO,cAGTC,MAAAA,UAAU,KACRlE,EAAQmE,QAAUC,WAAW,KAC3B,IAAKvE,EAAS,OAEd,MAAMwE,EAAQC,MAAMC,KAAK1E,EAAQ2E,iBAA8B,sBAAsBC,OAAQ5D,GAC3FA,EAAK6D,QAAQC,IAAAA,sBAGf,MAAMC,EAAaP,EAAMzD,KAAMC,GAASA,EAAK6D,QAAQ,2BAEjDE,EACFA,EAAWC,QACFR,EAAM,IACfA,EAAM,GAAGQ,QAGX7E,EAAQmE,QAAU,MACjB,KAEI,KACDnE,EAAQmE,SACVW,aAAa9E,EAAQmE,WAGxB,CAACtE,IAECI,EAKHoB,WAAAA,IAAC0D,iBAAAA,QAAO,CACNC,KAAM7E,EACNF,cAAeA,EACfgF,UAAU,aACVC,OAAQ,EACRC,WAAS,EACTC,OAAQ,CACNC,QAAS,CACPC,YAAQC,GAEVC,QAAS,CACPC,OAAQ3G,EAAW,cAAgB,WAErC4G,QAAS,CACPjB,OAAQ,OACRkB,QAAS,EACTC,mBAAoB,SAGxBC,UAAYC,IACNA,EAAOC,MAAMC,SAASC,qBAAqBC,cAC7CvG,EAAWwE,QAAU2B,EAAOC,MAAMC,SAASC,YAG/CE,UAAW,CAGTC,YAAa,CACXC,KAAM,cACNrC,SAAS,EACTsC,MAAO,cAGPC,OAAQA,EAAGR,YACT,GAAIA,EAAMC,SAASF,kBAAkBI,YAAa,CAChD,MAAMM,EAAiBT,EAAMC,SAASF,OAAOW,cAAc,oBACvDD,GACFA,EAAeE,gBAAgB,OAEnC,IAGJC,SAAU,CACRN,KAAM,WACNrC,SAAS,EACTsC,MAAO,cACPM,SAAU,CAAC,iBAGXC,GAAIA,EAAGd,YACLA,EAAMX,OAAOU,OAAOa,SAAW,GAAGZ,EAAMe,MAAMb,UAAUc,WAI1DR,OAAQA,EAAGR,YACLA,EAAMC,SAASF,kBAAkBI,aAAeH,EAAMC,SAASC,qBAAqBC,cACtFH,EAAMC,SAASF,OAAOkB,MAAMC,QAAU,OACtClB,EAAMC,SAASF,OAAOkB,MAAME,cAAgB,SAC5CnB,EAAMC,SAASF,OAAOkB,MAAMG,WAAa,UACzCpB,EAAMC,SAASF,OAAOkB,MAAML,SAAW,GAAGZ,EAAMC,SAASC,UAAUmB,oBAM3EC,UAAWA,IACThG,WAAAA,IAACC,WAAW,CACVlD,KAAK,OACL,kBAAiBiC,EACjBiH,IAAKxH,EACLL,QAAS,CACP6C,gBAAiB7C,EAAQ8H,qBAE3BvE,QAAUG,IACJA,EAAIqE,kBAAkBtB,aAAe/C,EAAIqE,OAAOC,QAAQ,uBAC1DrH,GAAY,GAEZgE,WAAW,KACTzE,EAAWwE,SAASU,SACnB,OAGP3B,UAAYC,IAGV,GAFAA,EAAIuE,oBAGAC,SAASC,yBAAyB1B,aACnCyB,SAASC,cAAclD,QAAQ,uBAC9BtB,UAAAA,aAAaC,IAAIC,SAASH,EAAII,MAC7BH,UAAAA,aAAaI,IAAIF,SAASH,EAAII,MAC9BH,UAAAA,aAAayE,KAAKvE,SAASH,EAAII,MAC/BH,uBAAa0E,IAAIxE,SAASH,EAAII,MAC9BH,uBAAaQ,UAAUN,SAASH,EAAII,MACpCH,uBAAa2E,QAAQzE,SAASH,EAAII,OAErC,OAGF,GAAIH,uBAAaC,IAAIC,SAASH,EAAII,MAAQH,UAAAA,aAAaI,IAAIF,SAASH,EAAII,KAStE,OARAJ,EAAIM,iBAEJrD,GAAY,QAEZgE,WAAW,KACTzE,EAAWwE,SAASU,SACnB,KAKL,MAAMR,EAAQC,MAAMC,KAAKpB,EAAI6E,cAAcxD,iBAA8B,sBAErEH,EAAM4D,SAAW,IAEjB7E,UAAAA,aAAayE,KAAKvE,SAASH,EAAII,MACjCJ,EAAIM,iBACJY,EAAM,GAAGQ,SACAzB,UAAAA,aAAa0E,IAAIxE,SAASH,EAAII,MACvCJ,EAAIM,iBACJY,EAAMA,EAAM4D,OAAS,GAAGpD,UACfzB,UAAAA,aAAaQ,UAAUN,SAASH,EAAII,MAAQH,UAAAA,aAAa2E,QAAQzE,SAASH,EAAII,QACvFJ,EAAIM,iBACJyE,IAAAA,qBAAqB/E,EAAII,IAAKoE,SAASC,cAAevD,EAAOM,4BAE/DwD,SAEF9G,WAAAA,IAAC+G,QAAAA,mBAAmBC,SAAQ,CAACC,MAAOzE,EAAqBsE,SACvD9G,WAAAA,IAACkH,QAAAA,oBAAoBF,SAAQ,CAACC,MAAOxE,EAAsBqE,SACxDK,MAAAA,SAASC,IAAIxJ,EAAY4B,GACxBQ,WAAAA,IAACC,eAAe,CAAClD,KAAK,OAAM+J,SAAEtH,WAKtCsH,gBAEMnJ,GAAY,WAAaA,EAAQgC,GAAgBK,WAAAA,IAACqH,sBAAU,IAAK1H,MA5IpE"}
+{"version":3,"file":"TabListMenuTab.js","sources":["../../../../src/components/TabList/TabListMenuTab.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useMemo, useCallback, Children, isValidElement } from 'react'\nimport Floater from 'react-floater'\nimport { nanoid } from 'nanoid'\nimport type { Nullable } from 'shared/types'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { TabListTab } from 'components/TabListTab'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport { useClickOutside } from 'hooks/useClickOutside'\nimport { keyboardKeys } from 'shared/constants'\nimport { useFloaterPortal } from 'hooks/useFloaterPortal'\nimport { navigateVerticalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport type { TabListTabProps } from 'components/TabListTab'\nimport * as Styled from './style'\nimport type { TabListMenuTabProps } from './types'\n\nconst TabListMenuTab = (props: TabListMenuTabProps) => {\n  const {\n    role = 'tab',\n    type = 'button',\n    variant = 'clear',\n    size = 'm',\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    disabled,\n    text,\n    control,\n    menuItems,\n    activeTab,\n    firstTab,\n    activationOnFocus,\n    getTabIndex,\n    onActiveTabChange,\n  } = props\n\n  const sizeProps = useMemo(\n    () => ({ size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL }),\n    [size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL]\n  )\n\n  const palette = useMergedPalette(props)\n\n  const controlRef = useRef<Nullable<HTMLElement>>(null)\n  const [menuRef, setMenuRef] = useState<Nullable<HTMLUListElement>>(null)\n\n  const timerId = useRef<Nullable<ReturnType<typeof setTimeout>>>(null)\n\n  const portalElement = useFloaterPortal()\n\n  const [menuOpen, setMenuOpen] = useState(false)\n\n  const controlId = useMemo(() => nanoid(), [])\n\n  const clickOutsideTargets = useMemo(() => [controlRef, menuRef], [menuRef])\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuOpen(false)\n  }, [])\n\n  const menuHasActiveTab = Boolean(\n    menuItems.find(\n      (item) =>\n        isValidElement(item) && typeof item.props === 'object' && item.props !== null && item.props.id === activeTab\n    )\n  )\n\n  const controlProps: TabListTabProps = {\n    ...sizeProps,\n    role,\n    type,\n    variant,\n    'aria-haspopup': 'menu',\n    id: controlId,\n    'aria-selected': menuHasActiveTab,\n    active: menuHasActiveTab,\n    tabIndex: menuHasActiveTab || !firstTab ? 0 : -1,\n    disabled,\n    text,\n    addonRight: (addonProps) => (\n      <Styled.IconAnimated\n        {...addonProps.iconProps}\n        icon={<Styled.ChevronDown />}\n        rotate={menuOpen ? '180deg' : '0deg'}\n      />\n    ),\n    palette: {\n      color: palette.tabColor,\n      colorHover: palette.tabColorHover,\n      colorActive: palette.tabColorActive,\n      colorDisabled: palette.tabColorDisabled,\n      colorActiveDisabled: palette.tabColorActiveDisabled,\n      backgroundColor: palette.tabBackgroundColor,\n      backgroundColorHover: palette.tabBackgroundColorHover,\n      backgroundColorActive: palette.tabBackgroundColorActive,\n      backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n      backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n    },\n    onClick: () => {\n      setMenuOpen((prev) => !prev)\n    },\n    onKeyDown: (evt) => {\n      if (menuOpen && (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key))) {\n        evt.preventDefault()\n        setMenuOpen(false)\n      } else if (\n        !menuOpen &&\n        ((keyboardKeys.F10.validate(evt.key) && evt.shiftKey) || keyboardKeys.ArrowDown.validate(evt.key))\n      ) {\n        evt.preventDefault()\n        setMenuOpen(true)\n      }\n    },\n  }\n\n  const controlsContextProps = useMemo(\n    () => ({\n      activationOnFocus,\n      activeTab,\n      onActiveTabChange,\n      getTabIndex,\n    }),\n    [activationOnFocus, activeTab, onActiveTabChange, getTabIndex]\n  )\n\n  const menuItemsContextProps = useMemo(\n    () => ({\n      ...sizeProps,\n      disabled,\n      role: 'menuitem',\n      variant: 'filled' as TabListTabProps['variant'],\n    }),\n    [sizeProps, disabled]\n  )\n\n  useClickOutside(clickOutsideTargets, handleCloseMenu, {\n    enabled: menuOpen,\n    event: 'mousedown',\n  })\n\n  useEffect(() => {\n    timerId.current = setTimeout(() => {\n      if (!menuRef) return\n\n      const items = Array.from(menuRef.querySelectorAll<HTMLElement>('[role=\"menuitem\"]')).filter((item) =>\n        item.matches(SELECTORS_FOCUSABLE)\n      )\n\n      const activeItem = items.find((item) => item.matches('[aria-selected=\"true\"]'))\n\n      if (activeItem) {\n        activeItem.focus()\n      } else if (items[0]) {\n        items[0].focus()\n      }\n\n      timerId.current = null\n    }, 100)\n\n    return () => {\n      if (timerId.current) {\n        clearTimeout(timerId.current)\n      }\n    }\n  }, [menuRef])\n\n  if (!portalElement) {\n    return null\n  }\n\n  return (\n    <Floater\n      open={menuOpen}\n      portalElement={portalElement}\n      placement='bottom-end'\n      offset={8}\n      hideArrow\n      styles={{\n        options: {\n          zIndex: undefined,\n        },\n        wrapper: {\n          cursor: disabled ? 'not-allowed' : 'pointer',\n        },\n        floater: {\n          filter: 'none',\n          opacity: 1,\n          transitionDuration: '10ms',\n        },\n      }}\n      getPopper={(popper) => {\n        if (popper.state.elements.reference instanceof HTMLElement) {\n          controlRef.current = popper.state.elements.reference\n        }\n      }}\n      modifiers={{\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        removeRoles: {\n          name: 'removeRoles',\n          enabled: true,\n          phase: 'beforeWrite',\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement) {\n              const floaterElement = state.elements.popper.querySelector('[role=\"tooltip\"]')\n              if (floaterElement) {\n                floaterElement.removeAttribute('role')\n              }\n            }\n          },\n        },\n        minWidth: {\n          name: 'minWidth',\n          enabled: true,\n          phase: 'beforeWrite',\n          requires: ['computeStyles'],\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          fn: ({ state }) => {\n            state.styles.popper.minWidth = `${state.rects.reference.width}px`\n          },\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          effect: ({ state }) => {\n            if (state.elements.popper instanceof HTMLElement && state.elements.reference instanceof HTMLElement) {\n              state.elements.popper.style.display = 'flex'\n              state.elements.popper.style.flexDirection = 'column'\n              state.elements.popper.style.alignItems = 'stretch'\n              state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`\n            }\n          },\n        },\n      }}\n      // eslint-disable-next-line react/no-unstable-nested-components\n      component={() => (\n        <Styled.Menu\n          role='menu'\n          aria-labelledby={controlId}\n          ref={setMenuRef}\n          palette={{\n            backgroundColor: palette.menuBackgroundColor,\n          }}\n          onClick={(evt) => {\n            if (evt.target instanceof HTMLElement && evt.target.closest('[role=\"menuitem\"]')) {\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n            }\n          }}\n          onKeyDown={(evt) => {\n            evt.stopPropagation()\n\n            if (\n              !(document.activeElement instanceof HTMLElement) ||\n              !document.activeElement.matches('[role=\"menuitem\"]') ||\n              (!keyboardKeys.Esc.validate(evt.key) &&\n                !keyboardKeys.Tab.validate(evt.key) &&\n                !keyboardKeys.Home.validate(evt.key) &&\n                !keyboardKeys.End.validate(evt.key) &&\n                !keyboardKeys.ArrowDown.validate(evt.key) &&\n                !keyboardKeys.ArrowUp.validate(evt.key))\n            ) {\n              return\n            }\n\n            if (keyboardKeys.Esc.validate(evt.key) || keyboardKeys.Tab.validate(evt.key)) {\n              evt.preventDefault()\n\n              setMenuOpen(false)\n\n              setTimeout(() => {\n                controlRef.current?.focus()\n              }, 100)\n\n              return\n            }\n\n            const items = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]'))\n\n            if (items.length === 0) return\n\n            if (keyboardKeys.Home.validate(evt.key)) {\n              evt.preventDefault()\n              items[0].focus()\n            } else if (keyboardKeys.End.validate(evt.key)) {\n              evt.preventDefault()\n              items[items.length - 1].focus()\n            } else if (keyboardKeys.ArrowDown.validate(evt.key) || keyboardKeys.ArrowUp.validate(evt.key)) {\n              evt.preventDefault()\n              navigateVerticalList(evt.key, document.activeElement, items, SELECTORS_FOCUSABLE)\n            }\n          }}\n        >\n          <TabListTabsContext.Provider value={controlsContextProps}>\n            <TabListPropsContext.Provider value={menuItemsContextProps}>\n              {Children.map(menuItems, (item) => (\n                <Styled.MenuItem role='none'>{item}</Styled.MenuItem>\n              ))}\n            </TabListPropsContext.Provider>\n          </TabListTabsContext.Provider>\n        </Styled.Menu>\n      )}\n    >\n      {typeof control === 'function' ? control(controlProps) : <TabListTab {...controlProps} />}\n    </Floater>\n  )\n}\n\nexport { TabListMenuTab }\n"],"names":["props","role","type","variant","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","text","control","menuItems","activeTab","firstTab","activationOnFocus","getTabIndex","onActiveTabChange","sizeProps","useMemo","palette","useMergedPalette","controlRef","useRef","menuRef","setMenuRef","useState","timerId","portalElement","useFloaterPortal","menuOpen","setMenuOpen","controlId","nanoid","clickOutsideTargets","handleCloseMenu","useCallback","menuHasActiveTab","Boolean","find","item","isValidElement","id","controlProps","active","tabIndex","addonRight","addonProps","_jsx","Styled","iconProps","icon","rotate","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","backgroundColor","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","onClick","prev","onKeyDown","evt","keyboardKeys","Esc","validate","key","Tab","preventDefault","F10","shiftKey","ArrowDown","controlsContextProps","menuItemsContextProps","useClickOutside","enabled","event","useEffect","current","setTimeout","items","Array","from","querySelectorAll","filter","matches","SELECTORS_FOCUSABLE","activeItem","focus","clearTimeout","Floater","open","placement","offset","hideArrow","styles","options","zIndex","undefined","wrapper","cursor","floater","opacity","transitionDuration","getPopper","popper","state","elements","reference","HTMLElement","modifiers","removeRoles","name","phase","effect","floaterElement","querySelector","removeAttribute","minWidth","requires","fn","rects","width","style","display","flexDirection","alignItems","offsetWidth","component","ref","menuBackgroundColor","target","closest","stopPropagation","document","activeElement","Home","End","ArrowUp","currentTarget","length","navigateVerticalList","children","TabListTabsContext","Provider","value","TabListPropsContext","Children","map","TabListTab"],"mappings":"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"}

package/components/TabList/TabListMenuTab.mjs

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

package/components/TabList/TabListMenuTab.mjs.map

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

package/components/TabList/style.js

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

package/components/TabList/style.js.map

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

package/components/TabList/style.mjs

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

package/components/TabList/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/TabList/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { Icon } from 'components/Icon'\nimport { Divider } from 'components/Divider'\nimport type { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport type { CSSColor } from 'shared/types'\nimport type {\n  Layout,\n  TabListPalette,\n  TabListMenuPalette,\n  TabListPanelPalette,\n  StyledTabListProps,\n  StyledTabListPanelProps,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardTabListProp = createShouldForwardProp(filterLayoutProps)\n\nconst shouldForwardTabListPanelProp = createShouldForwardProp((propKey) => !['borderRadius'].includes(propKey))\n\nexport const Control = styled.div.withConfig({\n  shouldForwardProp: (propKey) => !['hidden'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: ${focus.padding}px;\n  pointer-events: auto;\n  ${(props) =>\n    props.hidden &&\n    `\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const ScrollFading = styled.div.withConfig<{ after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  width: 35px;\n  ${(props) => `\n    background-image: linear-gradient(${props.after ? -90 : 90}deg, currentcolor, transparent);\n  `}\n`\n\nconst template = (palette: Pick<TabListPalette, 'backgroundColor'>) => `\n  &,\n  & ${Control} {\n    background-color: ${palette.backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${palette.backgroundColor};\n  }\n`\n\nconst templateMenu = (palette: TabListMenuPalette) => `\n  background-color: ${palette.backgroundColor};\n  box-shadow: 0px 6px 20px ${palette.shadowColor};\n`\n\nconst templatePanel = (palette: TabListPanelPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const Floats = styled.div.withConfig<{ hidden: boolean; after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  bottom: 0;\n  ${(props) => (props.after ? 'right: 0;' : 'left: 0;')}\n  ${(props) =>\n    props.hidden &&\n    `\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const Addon = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ${focus.padding}px;\n\n  ${responsiveLayout}\n`\n\nexport const DividerPositioned = styled(Divider).withConfig<ResponsiveLayoutInterpolationProps>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  position: absolute;\n  right: 0;\n  left: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Root = styled.div.withConfig<StyledTabListProps>({\n  shouldForwardProp: shouldForwardTabListProp,\n})`\n  box-sizing: border-box;\n  isolation: isolate;\n  position: relative;\n  display: flex;\n\n  ${(props) =>\n    template({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  & ${ScrollFading},  \n  & ${DividerPositioned} {\n    z-index: 1;\n  }\n  & [role='tab'] [data-ui-tab-underline]::after,\n  & [role='tab']:focus-visible,\n  & ${Addon} {\n    z-index: 2;\n  }\n  & ${Floats} ${Control} {\n    z-index: 3;\n  }\n\n  ${responsiveSize}\n  ${responsiveMargin}\n  ${responsiveLayout}\n`\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  overflow: hidden;\n`\n\nexport const TabsTrack = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const TrackScrollable = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: auto;\n  overscroll-behavior: contain;\n  scroll-padding-right: 20px;\n  scroll-padding-left: 20px;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n`\n\nexport const Hidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  flex-grow: 1;\n  height: 0;\n  &,\n  & * {\n    visibility: hidden !important;\n  }\n`\n\nexport const TabsHidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: hidden;\n`\n\nexport const TabWrapper = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n`\n\nexport const List = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  flex-grow: 1;\n  &:focus {\n    outline: none;\n  }\n`\n\nexport const Menu = styled.ul.withConfig<{\n  palette: {\n    backgroundColor?: CSSColor\n    shadowColor?: CSSColor\n  }\n}>({\n  shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  appearance: none;\n  margin: 0;\n  border-radius: 12px;\n  padding: ${focus.padding}px;\n  &:focus {\n    outline: none;\n  }\n\n  ${(props) =>\n    templateMenu({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.palette.shadowColor ?? props.theme.colors['bg-oncolor-hover'],\n    })}\n`\n\nexport const MenuItem = styled.li`\n  display: flex;\n  appearance: none;\n  list-style-type: none;\n  &:not(:last-child) {\n    margin-bottom: ${focus.padding}px;\n  }\n  & > * {\n    flex-grow: 1;\n  }\n`\n\nexport const Panel = styled.div.withConfig<StyledTabListPanelProps>({\n  shouldForwardProp: shouldForwardTabListPanelProp,\n})`\n  box-sizing: border-box;\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;  \n  `}\n\n  ${(props) =>\n    templatePanel({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const IconAnimated = styled(Icon).withConfig<{ rotate: boolean }>({\n  shouldForwardProp: (propKey) => propKey !== 'rotate',\n})`\n  transition-property: transform;\n  transition-duration: 250ms;\n  transform-origin: center;\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n  ${(props) => `\n    transform: rotate(${props.rotate ? 180 : 0}deg);\n  `}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardTabListProp","createShouldForwardProp","shouldForwardTabListPanelProp","Control","styled","div","withConfig","shouldForwardProp","displayName","componentId","focus","padding","props","hidden","ScrollFading","after","Floats","Addon","responsiveLayout","DividerPositioned","Divider","Root","template","palette","backgroundColor","theme","colors","responsiveSize","responsiveMargin","Container","TabsTrack","TrackScrollable","Hidden","TabsHidden","TabWrapper","List","Menu","ul","templateMenu","shadowColor","MenuItem","li","Panel","borderRadius","IconAnimated","Icon","rotate"],"mappings":"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"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/TabList/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { ChevronUp } from '@foxford/icon-pack'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { Icon } from 'components/Icon'\nimport { Divider } from 'components/Divider'\nimport type { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport type { CSSColor } from 'shared/types'\nimport type {\n  Layout,\n  TabListPalette,\n  TabListMenuPalette,\n  TabListPanelPalette,\n  StyledTabListProps,\n  StyledTabListPanelProps,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardTabListProp = createShouldForwardProp(filterLayoutProps)\n\nconst shouldForwardTabListPanelProp = createShouldForwardProp((propKey) => !['borderRadius'].includes(propKey))\n\nexport const Control = styled.div.withConfig({\n  shouldForwardProp: (propKey) => !['hidden'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: ${focus.padding}px;\n  pointer-events: auto;\n  ${(props) =>\n    props.hidden &&\n    `\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const ScrollFading = styled.div.withConfig<{ after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  width: 35px;\n  ${(props) => `\n    background-image: linear-gradient(${props.after ? -90 : 90}deg, currentcolor, transparent);\n  `}\n`\n\nconst template = (palette: Pick<TabListPalette, 'backgroundColor'>) => `\n  &,\n  & ${Control} {\n    background-color: ${palette.backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${palette.backgroundColor};\n  }\n`\n\nconst templateMenu = (palette: TabListMenuPalette) => `\n  background-color: ${palette.backgroundColor};\n  box-shadow: 0px 6px 20px ${palette.shadowColor};\n`\n\nconst templatePanel = (palette: TabListPanelPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const Floats = styled.div.withConfig<{ hidden: boolean; after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  bottom: 0;\n  ${(props) => (props.after ? 'right: 0;' : 'left: 0;')}\n  ${(props) =>\n    props.hidden &&\n    `\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const Addon = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ${focus.padding}px;\n\n  ${responsiveLayout}\n`\n\nexport const DividerPositioned = styled(Divider).withConfig<ResponsiveLayoutInterpolationProps>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  position: absolute;\n  right: 0;\n  left: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Root = styled.div.withConfig<StyledTabListProps>({\n  shouldForwardProp: shouldForwardTabListProp,\n})`\n  box-sizing: border-box;\n  isolation: isolate;\n  position: relative;\n  display: flex;\n\n  ${(props) =>\n    template({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  & ${ScrollFading},  \n  & ${DividerPositioned} {\n    z-index: 1;\n  }\n  & [role='tab'] [data-ui-tab-underline]::after,\n  & [role='tab']:focus-visible,\n  & ${Addon} {\n    z-index: 2;\n  }\n  & ${Floats} ${Control} {\n    z-index: 3;\n  }\n\n  ${responsiveSize}\n  ${responsiveMargin}\n  ${responsiveLayout}\n`\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  overflow: hidden;\n`\n\nexport const TabsTrack = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const TrackScrollable = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: auto;\n  overscroll-behavior: contain;\n  scroll-padding-right: 20px;\n  scroll-padding-left: 20px;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n`\n\nexport const Hidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  flex-grow: 1;\n  height: 0;\n  &,\n  & * {\n    visibility: hidden !important;\n  }\n`\n\nexport const TabsHidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: hidden;\n`\n\nexport const TabWrapper = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n`\n\nexport const List = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  flex-grow: 1;\n  &:focus {\n    outline: none;\n  }\n`\n\nexport const Menu = styled.ul.withConfig<{\n  palette: {\n    backgroundColor?: CSSColor\n    shadowColor?: CSSColor\n  }\n}>({\n  shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  appearance: none;\n  margin: 0;\n  border-radius: 12px;\n  padding: ${focus.padding}px;\n  &:focus {\n    outline: none;\n  }\n\n  ${(props) =>\n    templateMenu({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.palette.shadowColor ?? props.theme.colors['bg-oncolor-hover'],\n    })}\n`\n\nexport const MenuItem = styled.li`\n  display: flex;\n  appearance: none;\n  list-style-type: none;\n  &:not(:last-child) {\n    margin-bottom: ${focus.padding}px;\n  }\n  & > * {\n    flex-grow: 1;\n  }\n`\n\nexport const Panel = styled.div.withConfig<StyledTabListPanelProps>({\n  shouldForwardProp: shouldForwardTabListPanelProp,\n})`\n  box-sizing: border-box;\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;  \n  `}\n\n  ${(props) =>\n    templatePanel({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const IconAnimated = styled(Icon)`\n  transition-property: transform;\n  transition-duration: 250ms;\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n`\n\nexport const ChevronDown = styled(ChevronUp)`\n  transform-origin: center;\n  transform: scaleY(-1);\n`\n\nexport const ChevronLeft = styled(ChevronUp)`\n  transform-origin: center;\n  transform: rotate(-90deg);\n`\n\nexport const ChevronRight = styled(ChevronUp)`\n  transform-origin: center;\n  transform: rotate(90deg);\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardTabListProp","createShouldForwardProp","shouldForwardTabListPanelProp","Control","styled","div","withConfig","shouldForwardProp","displayName","componentId","focus","padding","props","hidden","ScrollFading","after","Floats","Addon","responsiveLayout","DividerPositioned","Divider","Root","template","palette","backgroundColor","theme","colors","responsiveSize","responsiveMargin","Container","TabsTrack","TrackScrollable","Hidden","TabsHidden","TabWrapper","List","Menu","ul","templateMenu","shadowColor","MenuItem","li","Panel","borderRadius","IconAnimated","Icon","ChevronDown","ChevronUp","ChevronLeft","ChevronRight"],"mappings":"qeAoBA,MAAMA,kBAAqBC,IACxB,CAAC,SAAU,YAAa,WAAY,UAAW,UAAW,UAAW,WAAY,WAAWC,SAASD,GAExG,MAAME,yBAA2BC,wBAAwBJ,mBAEzD,MAAMK,8BAAgCD,wBAAyBH,IAAa,CAAC,gBAAgBC,SAASD,IAE/F,MAAMK,QAAUC,OAAOC,IAAIC,WAAW,CAC3CC,kBAAoBT,IAAa,CAAC,UAAUC,SAASD,KACrDQ,WAAA,CAAAE,YAAA,mBAAAC,YAAA,oBAFqBL,CAErB,CAAA,mFAAA,0BAAA,IAKWM,MAAMC,QAEdC,GACDA,EAAMC,QACN,wEAOG,MAAMC,aAAeV,OAAOC,IAAIC,WAAgC,CACrEC,kBAAoBT,IAAa,CAAC,SAASC,SAASD,KACpDQ,WAAA,CAAAE,YAAA,wBAAAC,YAAA,oBAF0BL,CAE1B,CAAA,sDAAA,IAIGQ,GAAU,2CACyBA,EAAMG,OAAQ,GAAM,0CAwBrD,MAAMC,OAASZ,OAAOC,IAAIC,WAAiD,CAChFC,kBAAoBT,IAAa,CAAC,SAASC,SAASD,KACpDQ,WAAA,CAAAE,YAAA,kBAAAC,YAAA,oBAFoBL,CAEpB,CAAA,+GAAA,IAAA,IAQGQ,GAAWA,EAAMG,MAAQ,YAAc,WACvCH,GACDA,EAAMC,QACN,kFAQG,MAAMI,MAAQb,OAAOC,IAAIC,WAAuD,CACrFC,kBAAmBV,oBACnBS,WAAA,CAAAE,YAAA,iBAAAC,YAAA,oBAFmBL,CAEnB,CAAA,mFAAA,MAAA,IAKWM,MAAMC,QAEfO,kBAGG,MAAMC,kBAAoBf,OAAOgB,SAASd,WAA+C,CAC9FC,kBAAmBV,oBACnBS,WAAA,CAAAE,YAAA,6BAAAC,YAAA,oBAF+BL,CAE/B,CAAA,oCAAA,IAKEc,kBAGG,MAAMG,KAAOjB,OAAOC,IAAIC,WAA+B,CAC5DC,kBAAmBP,2BACnBM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,oBAFkBL,CAElB,CAAA,0EAAA,MAAA,MAAA,4FAAA,iBAAA,IAAA,eAAA,IAAA,IAAA,IAMGQ,IACDU,MAxEmE,eAEjEnB,qCAFYoB,EAwEL,CACPC,gBAAiBZ,EAAMW,QAAQC,iBAAmBZ,EAAMa,MAAMC,OAAO,uBAtE3CF,8BAE1BV,sBACAA,8BACOS,EAAQC,0BAPHD,OA4EZT,aACAK,kBAKAF,MAGAD,OAAUb,QAIZwB,eACAC,iBACAV,wBAGSW,UAAYzB,OAAOC,IAAGC,WAAA,CAAAE,YAAA,qBAAAC,YAAA,oBAAVL,CAAU,CAAA,6FAQtB0B,UAAY1B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,qBAAAC,YAAA,oBAAVL,CAAU,CAAA,gHAStB2B,gBAAkB3B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,2BAAAC,YAAA,oBAAVL,CAAU,CAAA,6EAAA,qMAK5BM,MAAMC,eAeNqB,OAAS5B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,kBAAAC,YAAA,oBAAVL,CAAU,CAAA,2HAYnB6B,WAAa7B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,sBAAAC,YAAA,qBAAVL,CAAU,CAAA,6EAAA,uBAKvBM,MAAMC,eAINuB,WAAa9B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,sBAAAC,YAAA,qBAAVL,CAAU,CAAA,4DAMvB+B,KAAO/B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,gBAAAC,YAAA,qBAAVL,CAAU,CAAA,2JAavB,MAAMgC,KAAOhC,OAAOiC,GAAG/B,WAK3B,CACDC,kBAAoBT,IAAa,CAAC,WAAWC,SAASD,KACtDQ,WAAA,CAAAE,YAAA,gBAAAC,YAAA,qBAPkBL,CAOlB,CAAA,oIAAA,4BAAA,IAQWM,MAAMC,QAKdC,IACD0B,MArLkD,0BAAhCf,EAqLL,CACXC,gBAAiBZ,EAAMW,QAAQC,iBAAmBZ,EAAMa,MAAMC,OAAO,qBACrEa,YAAa3B,EAAMW,QAAQgB,aAAe3B,EAAMa,MAAMC,OAAO,sBAtLrCF,gDACDD,EAAQgB,iBAFfhB,cA2LTiB,SAAWpC,OAAOqC,GAAEnC,WAAA,CAAAE,YAAA,oBAAAC,YAAA,qBAATL,CAAS,CAAA,sFAAA,2BAKZM,MAAMC,SAOpB,MAAM+B,MAAQtC,OAAOC,IAAIC,WAAoC,CAClEC,kBAAmBL,gCACnBI,WAAA,CAAAE,YAAA,iBAAAC,YAAA,qBAFmBL,CAEnB,CAAA,yBAAA,IAAA,IAAA,IAAA,IAGGQ,GAAU,wBACMA,EAAM+B,wBAGtB/B,GA3MmD,yBA6MjCA,EAAMW,QAAQC,iBAAmBZ,EAAMa,MAAMC,OAAO,0BAGvEC,eACAC,kBAGG,MAAMgB,aAAexC,OAAOyC,MAAKvC,WAAA,CAAAE,YAAA,wBAAAC,YAAA,qBAAZL,CAAY,CAAA,6HAQjC,MAAM0C,YAAc1C,OAAO2C,WAAUzC,WAAA,CAAAE,YAAA,uBAAAC,YAAA,qBAAjBL,CAAiB,CAAA,kDAKrC,MAAM4C,YAAc5C,OAAO2C,WAAUzC,WAAA,CAAAE,YAAA,uBAAAC,YAAA,qBAAjBL,CAAiB,CAAA,sDAKrC,MAAM6C,aAAe7C,OAAO2C,WAAUzC,WAAA,CAAAE,YAAA,wBAAAC,YAAA,qBAAjBL,CAAiB,CAAA"}