@salutejs/plasma-new-hope 0.118.0-canary.1344.10280312887.0 → 0.118.1-canary.1333.10283987438.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (222) hide show
  1. package/cjs/components/Accordion/Accordion.tokens.js +0 -1
  2. package/cjs/components/Accordion/Accordion.tokens.js.map +1 -1
  3. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  4. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
  5. package/cjs/components/Modal/Modal.js +3 -1
  6. package/cjs/components/Modal/Modal.js.map +1 -1
  7. package/cjs/components/Tabs/tokens.js +5 -2
  8. package/cjs/components/Tabs/tokens.js.map +1 -1
  9. package/cjs/components/Tabs/ui/TabItem/TabItem.css +1 -1
  10. package/cjs/components/Tabs/ui/TabItem/TabItem.js +14 -2
  11. package/cjs/components/Tabs/ui/TabItem/TabItem.js.map +1 -1
  12. package/cjs/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
  13. package/cjs/components/Tabs/ui/TabItem/variations/_view/base.js.map +1 -1
  14. package/cjs/components/Tabs/ui/TabItem/variations/_view/base_7pcxtm.css +1 -0
  15. package/cjs/components/Tabs/ui/Tabs/Tabs.css +6 -6
  16. package/cjs/components/Tabs/ui/Tabs/Tabs.js +57 -8
  17. package/cjs/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
  18. package/cjs/components/Tabs/ui/Tabs/Tabs.styles.js +7 -7
  19. package/cjs/components/Tabs/ui/Tabs/Tabs.styles.js.map +1 -1
  20. package/{es/components/Tabs/ui/Tabs/Tabs.styles_1b8qt33.css → cjs/components/Tabs/ui/Tabs/Tabs.styles_z4dnzh.css} +2 -2
  21. package/cjs/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
  22. package/cjs/components/Tabs/ui/Tabs/variations/_stretch/base.js.map +1 -1
  23. package/{es/components/Tabs/ui/Tabs/variations/_stretch/base_176tz0n.css → cjs/components/Tabs/ui/Tabs/variations/_stretch/base_1c7lnrm.css} +1 -1
  24. package/cjs/components/Tabs/ui/Tabs/variations/_view/base.js +1 -1
  25. package/{es/components/Tabs/ui/Tabs/variations/_view/base_4xkt26.css → cjs/components/Tabs/ui/Tabs/variations/_view/base_aij3sf.css} +1 -1
  26. package/cjs/hooks/useFocusTrap.js +97 -0
  27. package/cjs/hooks/useFocusTrap.js.map +1 -0
  28. package/cjs/index.css +7 -7
  29. package/cjs/index.js +2 -0
  30. package/cjs/index.js.map +1 -1
  31. package/cjs/utils/focusManager.js +56 -0
  32. package/cjs/utils/focusManager.js.map +1 -0
  33. package/cjs/utils/scopeTab.js +37 -0
  34. package/cjs/utils/scopeTab.js.map +1 -0
  35. package/cjs/utils/tabbable.js +51 -0
  36. package/cjs/utils/tabbable.js.map +1 -0
  37. package/emotion/cjs/components/Accordion/Accordion.tokens.js +0 -1
  38. package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  39. package/emotion/cjs/components/Modal/Modal.js +4 -3
  40. package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx +89 -3
  41. package/emotion/cjs/components/Tabs/tokens.js +5 -2
  42. package/emotion/cjs/components/Tabs/ui/TabItem/TabItem.js +14 -2
  43. package/emotion/cjs/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
  44. package/emotion/cjs/components/Tabs/ui/Tabs/Tabs.js +57 -8
  45. package/emotion/cjs/components/Tabs/ui/Tabs/Tabs.styles.js +8 -16
  46. package/emotion/cjs/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
  47. package/emotion/cjs/components/Tabs/ui/Tabs/variations/_view/tokens.json +1 -1
  48. package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +6 -6
  49. package/emotion/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +113 -1
  50. package/emotion/cjs/examples/plasma_b2c/components/Tabs/TabItem.config.js +15 -15
  51. package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.config.js +16 -17
  52. package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +238 -197
  53. package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +8 -8
  54. package/emotion/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +113 -1
  55. package/emotion/cjs/examples/plasma_web/components/Tabs/TabItem.config.js +15 -15
  56. package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.config.js +16 -17
  57. package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +238 -197
  58. package/emotion/cjs/hooks/index.js +7 -0
  59. package/emotion/cjs/hooks/useFocusTrap.js +95 -0
  60. package/emotion/cjs/utils/focusManager.js +60 -0
  61. package/emotion/cjs/utils/scopeTab.js +35 -0
  62. package/emotion/cjs/utils/tabbable.js +46 -0
  63. package/emotion/cjs/utils/useFocusTrap.js +95 -0
  64. package/emotion/es/components/Accordion/Accordion.tokens.js +0 -1
  65. package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  66. package/emotion/es/components/Modal/Modal.js +3 -2
  67. package/emotion/es/components/Tabs/Tabs.template-doc.mdx +89 -3
  68. package/emotion/es/components/Tabs/tokens.js +5 -2
  69. package/emotion/es/components/Tabs/ui/TabItem/TabItem.js +14 -2
  70. package/emotion/es/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
  71. package/emotion/es/components/Tabs/ui/Tabs/Tabs.js +58 -9
  72. package/emotion/es/components/Tabs/ui/Tabs/Tabs.styles.js +9 -17
  73. package/emotion/es/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
  74. package/emotion/es/components/Tabs/ui/Tabs/variations/_view/tokens.json +1 -1
  75. package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +6 -6
  76. package/emotion/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +113 -1
  77. package/emotion/es/examples/plasma_b2c/components/Tabs/TabItem.config.js +15 -15
  78. package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.config.js +16 -17
  79. package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +238 -197
  80. package/emotion/es/examples/plasma_web/components/Accordion/Accordion.config.js +8 -8
  81. package/emotion/es/examples/plasma_web/components/Modal/Modal.stories.tsx +113 -1
  82. package/emotion/es/examples/plasma_web/components/Tabs/TabItem.config.js +15 -15
  83. package/emotion/es/examples/plasma_web/components/Tabs/Tabs.config.js +16 -17
  84. package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +238 -197
  85. package/emotion/es/hooks/index.js +1 -0
  86. package/emotion/es/hooks/useFocusTrap.js +90 -0
  87. package/emotion/es/utils/focusManager.js +55 -0
  88. package/emotion/es/utils/scopeTab.js +30 -0
  89. package/emotion/es/utils/tabbable.js +40 -0
  90. package/emotion/es/utils/useFocusTrap.js +90 -0
  91. package/es/components/Accordion/Accordion.tokens.js +0 -1
  92. package/es/components/Accordion/Accordion.tokens.js.map +1 -1
  93. package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  94. package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
  95. package/es/components/Modal/Modal.js +4 -2
  96. package/es/components/Modal/Modal.js.map +1 -1
  97. package/es/components/Tabs/tokens.js +5 -2
  98. package/es/components/Tabs/tokens.js.map +1 -1
  99. package/es/components/Tabs/ui/TabItem/TabItem.css +1 -1
  100. package/es/components/Tabs/ui/TabItem/TabItem.js +14 -2
  101. package/es/components/Tabs/ui/TabItem/TabItem.js.map +1 -1
  102. package/es/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
  103. package/es/components/Tabs/ui/TabItem/variations/_view/base.js.map +1 -1
  104. package/es/components/Tabs/ui/TabItem/variations/_view/base_7pcxtm.css +1 -0
  105. package/es/components/Tabs/ui/Tabs/Tabs.css +6 -6
  106. package/es/components/Tabs/ui/Tabs/Tabs.js +58 -9
  107. package/es/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
  108. package/es/components/Tabs/ui/Tabs/Tabs.styles.js +7 -7
  109. package/es/components/Tabs/ui/Tabs/Tabs.styles.js.map +1 -1
  110. package/{cjs/components/Tabs/ui/Tabs/Tabs.styles_1b8qt33.css → es/components/Tabs/ui/Tabs/Tabs.styles_z4dnzh.css} +2 -2
  111. package/es/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
  112. package/es/components/Tabs/ui/Tabs/variations/_stretch/base.js.map +1 -1
  113. package/{cjs/components/Tabs/ui/Tabs/variations/_stretch/base_176tz0n.css → es/components/Tabs/ui/Tabs/variations/_stretch/base_1c7lnrm.css} +1 -1
  114. package/es/components/Tabs/ui/Tabs/variations/_view/base.js +1 -1
  115. package/{cjs/components/Tabs/ui/Tabs/variations/_view/base_4xkt26.css → es/components/Tabs/ui/Tabs/variations/_view/base_aij3sf.css} +1 -1
  116. package/es/hooks/useFocusTrap.js +93 -0
  117. package/es/hooks/useFocusTrap.js.map +1 -0
  118. package/es/index.css +7 -7
  119. package/es/index.js +1 -0
  120. package/es/index.js.map +1 -1
  121. package/es/utils/focusManager.js +52 -0
  122. package/es/utils/focusManager.js.map +1 -0
  123. package/es/utils/scopeTab.js +33 -0
  124. package/es/utils/scopeTab.js.map +1 -0
  125. package/es/utils/tabbable.js +43 -0
  126. package/es/utils/tabbable.js.map +1 -0
  127. package/package.json +4 -4
  128. package/styled-components/cjs/components/Accordion/Accordion.tokens.js +0 -1
  129. package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  130. package/styled-components/cjs/components/Modal/Modal.js +4 -3
  131. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +89 -3
  132. package/styled-components/cjs/components/Tabs/tokens.js +5 -2
  133. package/styled-components/cjs/components/Tabs/ui/TabItem/TabItem.js +14 -2
  134. package/styled-components/cjs/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
  135. package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.js +57 -8
  136. package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.styles.js +2 -2
  137. package/styled-components/cjs/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
  138. package/styled-components/cjs/components/Tabs/ui/Tabs/variations/_view/tokens.json +1 -1
  139. package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +2 -2
  140. package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +113 -1
  141. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/TabItem.config.js +8 -8
  142. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.config.js +4 -5
  143. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +238 -197
  144. package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +2 -2
  145. package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +113 -1
  146. package/styled-components/cjs/examples/plasma_web/components/Tabs/TabItem.config.js +8 -8
  147. package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.config.js +4 -5
  148. package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +238 -197
  149. package/styled-components/cjs/hooks/index.js +7 -0
  150. package/styled-components/cjs/hooks/useFocusTrap.js +95 -0
  151. package/styled-components/cjs/utils/focusManager.js +60 -0
  152. package/styled-components/cjs/utils/scopeTab.js +35 -0
  153. package/styled-components/cjs/utils/tabbable.js +46 -0
  154. package/styled-components/cjs/utils/useFocusTrap.js +95 -0
  155. package/styled-components/es/components/Accordion/Accordion.tokens.js +0 -1
  156. package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  157. package/styled-components/es/components/Modal/Modal.js +3 -2
  158. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +89 -3
  159. package/styled-components/es/components/Tabs/tokens.js +5 -2
  160. package/styled-components/es/components/Tabs/ui/TabItem/TabItem.js +14 -2
  161. package/styled-components/es/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
  162. package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js +58 -9
  163. package/styled-components/es/components/Tabs/ui/Tabs/Tabs.styles.js +3 -3
  164. package/styled-components/es/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
  165. package/styled-components/es/components/Tabs/ui/Tabs/variations/_view/tokens.json +1 -1
  166. package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +2 -2
  167. package/styled-components/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +113 -1
  168. package/styled-components/es/examples/plasma_b2c/components/Tabs/TabItem.config.js +8 -8
  169. package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.config.js +4 -5
  170. package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +238 -197
  171. package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.config.js +2 -2
  172. package/styled-components/es/examples/plasma_web/components/Modal/Modal.stories.tsx +113 -1
  173. package/styled-components/es/examples/plasma_web/components/Tabs/TabItem.config.js +8 -8
  174. package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.config.js +4 -5
  175. package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +238 -197
  176. package/styled-components/es/hooks/index.js +1 -0
  177. package/styled-components/es/hooks/useFocusTrap.js +90 -0
  178. package/styled-components/es/utils/focusManager.js +55 -0
  179. package/styled-components/es/utils/scopeTab.js +30 -0
  180. package/styled-components/es/utils/tabbable.js +40 -0
  181. package/styled-components/es/utils/useFocusTrap.js +90 -0
  182. package/types/components/Accordion/Accordion.tokens.d.ts +0 -1
  183. package/types/components/Accordion/Accordion.tokens.d.ts.map +1 -1
  184. package/types/components/Modal/Modal.d.ts.map +1 -1
  185. package/types/components/Tabs/tokens.d.ts +3 -0
  186. package/types/components/Tabs/tokens.d.ts.map +1 -1
  187. package/types/components/Tabs/ui/TabItem/TabItem.d.ts.map +1 -1
  188. package/types/components/Tabs/ui/TabItem/variations/_view/base.d.ts.map +1 -1
  189. package/types/components/Tabs/ui/Tabs/Tabs.d.ts +4 -2
  190. package/types/components/Tabs/ui/Tabs/Tabs.d.ts.map +1 -1
  191. package/types/components/Tabs/ui/Tabs/Tabs.styles.d.ts.map +1 -1
  192. package/types/components/Tabs/ui/Tabs/Tabs.types.d.ts +12 -5
  193. package/types/components/Tabs/ui/Tabs/Tabs.types.d.ts.map +1 -1
  194. package/types/components/Tabs/ui/Tabs/variations/_stretch/base.d.ts.map +1 -1
  195. package/types/examples/plasma_b2c/components/Accordion/Accordion.config.d.ts.map +1 -1
  196. package/types/examples/plasma_b2c/components/Tabs/TabItem.config.d.ts.map +1 -1
  197. package/types/examples/plasma_b2c/components/Tabs/Tabs.config.d.ts +0 -1
  198. package/types/examples/plasma_b2c/components/Tabs/Tabs.config.d.ts.map +1 -1
  199. package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts +2 -1
  200. package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts.map +1 -1
  201. package/types/examples/plasma_web/components/Accordion/Accordion.config.d.ts.map +1 -1
  202. package/types/examples/plasma_web/components/Tabs/TabItem.config.d.ts.map +1 -1
  203. package/types/examples/plasma_web/components/Tabs/Tabs.config.d.ts +0 -1
  204. package/types/examples/plasma_web/components/Tabs/Tabs.config.d.ts.map +1 -1
  205. package/types/examples/plasma_web/components/Tabs/Tabs.d.ts +2 -1
  206. package/types/examples/plasma_web/components/Tabs/Tabs.d.ts.map +1 -1
  207. package/types/examples/sds_engineer/components/Tabs/Tabs.d.ts +2 -1
  208. package/types/examples/sds_engineer/components/Tabs/Tabs.d.ts.map +1 -1
  209. package/types/hooks/index.d.ts +1 -0
  210. package/types/hooks/index.d.ts.map +1 -1
  211. package/types/hooks/useFocusTrap.d.ts +6 -0
  212. package/types/hooks/useFocusTrap.d.ts.map +1 -0
  213. package/types/utils/focusManager.d.ts +15 -0
  214. package/types/utils/focusManager.d.ts.map +1 -0
  215. package/types/utils/scopeTab.d.ts +7 -0
  216. package/types/utils/scopeTab.d.ts.map +1 -0
  217. package/types/utils/tabbable.d.ts +6 -0
  218. package/types/utils/tabbable.d.ts.map +1 -0
  219. package/types/utils/useFocusTrap.d.ts +6 -0
  220. package/types/utils/useFocusTrap.d.ts.map +1 -0
  221. package/cjs/components/Tabs/ui/TabItem/variations/_view/base_q8xs21.css +0 -1
  222. package/es/components/Tabs/ui/TabItem/variations/_view/base_q8xs21.css +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef, KeyboardEvent } from 'react';\nimport type { MutableRefObject } from 'react';\nimport { animatedScrollToX, safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';\nimport { classes, tokens } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { TabItemRefs, TabsContext } from '../../TabsContext';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\n\nenum Keys {\n end = 35,\n home = 36,\n left = 37,\n right = 39,\n}\n\nexport const tabsRoot = (Root: RootProps<HTMLDivElement, TabsProps>) =>\n forwardRef<HTMLDivElement, TabsProps>((props, outerRef) => {\n const {\n id,\n stretch = false,\n disabled = false,\n size,\n view,\n children,\n pilled,\n index,\n className,\n ...rest\n } = props;\n\n const [firstItemVisible, setFirstItemVisible] = useState(true);\n const [lastItemVisible, setLastItemVisible] = useState(true);\n\n const refs = useMemo(() => new TabItemRefs(index), []);\n\n const uniqId = safeUseId();\n const tabsId = id || uniqId;\n\n const isFilled = view === 'filled'; // outer padding is only for filled view\n const pilledAttr = view !== 'clear' && pilled;\n const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n\n const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;\n const hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;\n const hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;\n\n const scrollRef = useRef<HTMLElement | null>(null);\n const trackRef = useRef<HTMLElement | null>(null);\n\n const onPrev = useCallback(() => {\n !disabled &&\n scrollRef.current &&\n animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft - scrollRef.current.offsetWidth / 2);\n }, [disabled, scrollRef]);\n\n const onNext = useCallback(() => {\n !disabled &&\n scrollRef.current &&\n animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft + scrollRef.current.offsetWidth / 2);\n }, [disabled, scrollRef]);\n\n const PreviousButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Предыдущий таб\"\n onClick={onPrev}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n isFilled={isFilled}\n isLeftArrow\n >\n <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onPrev, disabled, isFilled],\n );\n\n const NextButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Следующий таб\"\n onClick={onNext}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n isFilled={isFilled}\n >\n <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onNext, disabled, isFilled],\n );\n\n const handleScroll = useCallback(\n (event: React.UIEvent<HTMLElement>): void => {\n event.stopPropagation();\n const maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;\n\n setFirstItemVisible(event.currentTarget.scrollLeft <= 0);\n setLastItemVisible(event.currentTarget.scrollLeft >= maxScrollLeft);\n },\n [setFirstItemVisible, setLastItemVisible],\n );\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (index === undefined) {\n return;\n }\n\n const minIndex = 0;\n const maxIndex = refs.items.length - 1;\n let nextIndex: number;\n\n switch (event.keyCode) {\n case Keys.end:\n nextIndex = maxIndex;\n break;\n case Keys.left:\n nextIndex = index > minIndex ? index - 1 : index;\n break;\n case Keys.right:\n nextIndex = index < maxIndex ? index + 1 : index;\n break;\n case Keys.home:\n nextIndex = minIndex;\n break;\n default:\n return;\n }\n\n if (nextIndex !== index) {\n event.preventDefault();\n refs.items[nextIndex].current?.focus();\n refs.items[nextIndex].current?.scrollIntoView({\n block: 'center',\n inline: 'center',\n behavior: 'smooth',\n });\n }\n },\n [index],\n );\n\n useEffect(() => {\n setLastItemVisible(scrollRef.current?.scrollWidth === scrollRef.current?.clientWidth);\n }, []);\n\n return (\n <TabsContext.Provider value={refs}>\n <Root\n view={view}\n role=\"tablist\"\n size={size}\n pilled={pilled}\n id={tabsId}\n ref={outerRef}\n disabled={disabled}\n className={cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className)}\n onKeyDown={onKeyDown}\n {...rest}\n >\n {!firstItemVisible && PreviousButton}\n <StyledContentWrapper\n ref={scrollRef as MutableRefObject<HTMLDivElement | null>}\n onScroll={handleScroll}\n >\n <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>\n {children}\n </StyledContent>\n </StyledContentWrapper>\n {!lastItemVisible && NextButton}\n </Root>\n </TabsContext.Provider>\n );\n });\n\nexport const tabsConfig = {\n name: 'Tabs',\n tag: 'div',\n layout: tabsRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n stretch: {\n css: stretchCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n },\n },\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n};\n"],"names":["Keys","tabsRoot","Root","forwardRef","props","outerRef","id","_props$stretch","stretch","_props$disabled","disabled","size","view","children","pilled","index","className","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","firstItemVisible","setFirstItemVisible","_useState3","_useState4","lastItemVisible","setLastItemVisible","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","isFilled","pilledAttr","pilledClass","classes","tabsPilled","undefined","stretchClass","tabsStretch","hasLeftArrowClass","tabsHasLeftArrow","hasRightArrowClass","tabsHasRightArrow","scrollRef","useRef","trackRef","onPrev","useCallback","current","animatedScrollToX","scrollLeft","offsetWidth","onNext","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","isLeftArrow","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","handleScroll","event","stopPropagation","maxScrollLeft","currentTarget","scrollWidth","clientWidth","onKeyDown","minIndex","maxIndex","items","length","nextIndex","keyCode","end","left","right","home","_refs$items$nextIndex","_refs$items$nextIndex2","preventDefault","focus","scrollIntoView","block","inline","behavior","useEffect","_scrollRef$current","_scrollRef$current2","TabsContext","Provider","value","_extends","role","ref","cx","StyledContentWrapper","onScroll","StyledContent","tabsConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","stretchCSS","pilledCSS","defaults"],"mappings":"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"}
1
+ {"version":3,"file":"Tabs.js","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef, KeyboardEvent } from 'react';\nimport type { MutableRefObject } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';\nimport { classes, tokens } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { TabItemRefs, TabsContext } from '../../TabsContext';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\n\nenum Keys {\n end = 35,\n home = 36,\n left = 37,\n right = 39,\n}\n\nexport const tabsRoot = (Root: RootProps<HTMLDivElement, TabsProps>) =>\n forwardRef<HTMLDivElement, TabsProps>((props, outerRef) => {\n const {\n id,\n stretch = false,\n disabled = false,\n clip = 'scroll',\n size,\n view,\n children,\n pilled = false,\n index,\n className,\n ...rest\n } = props;\n const [firstItemVisible, setFirstItemVisible] = useState(true);\n const [lastItemVisible, setLastItemVisible] = useState(true);\n\n const refs = useMemo(() => new TabItemRefs(index), []);\n\n const uniqId = safeUseId();\n const tabsId = id || uniqId;\n\n const isFilled = view === 'filled'; // outer padding is only for filled view\n const pilledAttr = view !== 'clear' && pilled;\n const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n\n const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;\n const hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;\n const hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;\n const clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;\n const clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;\n\n const scrollRef = useRef<HTMLElement | null>(null);\n const trackRef = useRef<HTMLElement | null>(null);\n const leftArrowRef = useRef<HTMLButtonElement | null>(null);\n\n const onPrev = useCallback(() => {\n if (disabled || !scrollRef.current) {\n return;\n }\n\n const scrollLeft = Math.round(scrollRef.current.scrollLeft);\n const firstOverflowingTab = refs.items\n .slice()\n .reverse()\n .find((item: MutableRefObject<HTMLElement | null>) => {\n if (!item.current || item.current.offsetLeft === undefined) {\n return;\n }\n const tabStartX = item.current.offsetLeft;\n\n return tabStartX < scrollLeft;\n });\n\n firstOverflowingTab?.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n }, [disabled, scrollRef, refs]);\n\n const onNext = useCallback(() => {\n if (disabled || !scrollRef.current) {\n return;\n }\n\n const scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);\n const lastOverflowingTab = refs.items.find((item: MutableRefObject<HTMLElement | null>) => {\n if (!item.current || item.current.offsetLeft === undefined) {\n return;\n }\n const tabEndX = item.current.offsetLeft + item.current.offsetWidth;\n\n return tabEndX > scrollRight;\n });\n\n lastOverflowingTab?.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n }, [disabled, scrollRef, refs]);\n\n const PreviousButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Предыдущий таб\"\n onClick={onPrev}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n isFilled={isFilled}\n ref={leftArrowRef}\n isLeftArrow\n >\n <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onPrev, disabled, isFilled],\n );\n\n const NextButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Следующий таб\"\n onClick={onNext}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n isFilled={isFilled}\n >\n <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onNext, disabled, isFilled],\n );\n\n const handleScroll = useCallback(\n (event: React.UIEvent<HTMLElement>): void => {\n event.stopPropagation();\n const maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;\n const scrollLeft = Math.round(event.currentTarget.scrollLeft);\n\n setFirstItemVisible(scrollLeft <= 0);\n setLastItemVisible(scrollLeft >= maxScrollLeft);\n },\n [setFirstItemVisible, setLastItemVisible],\n );\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (index === undefined) {\n return;\n }\n\n const minIndex = 0;\n const maxIndex = refs.items.length - 1;\n let nextIndex: number;\n\n switch (event.keyCode) {\n case Keys.end:\n nextIndex = maxIndex;\n break;\n case Keys.left:\n nextIndex = index > minIndex ? index - 1 : index;\n break;\n case Keys.right:\n nextIndex = index < maxIndex ? index + 1 : index;\n break;\n case Keys.home:\n nextIndex = minIndex;\n break;\n default:\n return;\n }\n\n if (nextIndex !== index) {\n event.preventDefault();\n refs.items[nextIndex].current?.focus();\n refs.items[nextIndex].current?.scrollIntoView({\n block: 'center',\n inline: 'center',\n behavior: 'smooth',\n });\n }\n },\n [index],\n );\n\n useEffect(() => {\n setLastItemVisible(scrollRef.current?.scrollWidth === scrollRef.current?.clientWidth);\n }, []);\n\n // Этот хук компенсирует появление левой стрелки при прокрутке\n useEffect(() => {\n if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {\n return;\n }\n\n scrollRef.current.scrollTo({\n left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth),\n });\n }, [firstItemVisible, scrollRef, leftArrowRef]);\n\n return (\n <TabsContext.Provider value={refs}>\n <Root\n view={view}\n role=\"tablist\"\n size={size}\n pilled={pilled}\n id={tabsId}\n ref={outerRef}\n disabled={disabled}\n className={cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className)}\n onKeyDown={onKeyDown}\n {...rest}\n >\n {!firstItemVisible && PreviousButton}\n <StyledContentWrapper\n className={cx(clipScrollClass, clipShowAllClass)}\n ref={scrollRef as MutableRefObject<HTMLDivElement | null>}\n onScroll={handleScroll}\n >\n <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>\n {children}\n </StyledContent>\n </StyledContentWrapper>\n {!lastItemVisible && NextButton}\n </Root>\n </TabsContext.Provider>\n );\n });\n\nexport const tabsConfig = {\n name: 'Tabs',\n tag: 'div',\n layout: tabsRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n stretch: {\n css: stretchCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n },\n },\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n};\n"],"names":["Keys","tabsRoot","Root","forwardRef","props","outerRef","id","_props$stretch","stretch","_props$disabled","disabled","_props$clip","clip","size","view","children","_props$pilled","pilled","index","className","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","firstItemVisible","setFirstItemVisible","_useState3","_useState4","lastItemVisible","setLastItemVisible","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","isFilled","pilledAttr","pilledClass","classes","tabsPilled","undefined","stretchClass","tabsStretch","hasLeftArrowClass","tabsHasLeftArrow","hasRightArrowClass","tabsHasRightArrow","clipScrollClass","tabsClipScroll","clipShowAllClass","tabsClipShowAll","scrollRef","useRef","trackRef","leftArrowRef","onPrev","useCallback","_firstOverflowingTab$","current","scrollLeft","Math","round","firstOverflowingTab","items","slice","reverse","find","item","offsetLeft","tabStartX","scrollIntoView","block","inline","onNext","_lastOverflowingTab$c","scrollRight","clientWidth","lastOverflowingTab","tabEndX","offsetWidth","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","ref","isLeftArrow","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","handleScroll","event","stopPropagation","maxScrollLeft","currentTarget","scrollWidth","onKeyDown","minIndex","maxIndex","length","nextIndex","keyCode","end","left","right","home","_refs$items$nextIndex","_refs$items$nextIndex2","preventDefault","focus","behavior","useEffect","_scrollRef$current","_scrollRef$current2","scrollTo","TabsContext","Provider","value","_extends","role","cx","StyledContentWrapper","onScroll","StyledContent","tabsConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","stretchCSS","pilledCSS","defaults"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import './Tabs.styles_1b8qt33.css';
1
+ import './Tabs.styles_z4dnzh.css';
2
2
  'use strict';
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
@@ -17,19 +17,19 @@ var StyledContentWrapper = /*#__PURE__*/react.styled('div')({
17
17
  "class": "sh5e38r",
18
18
  propsAsIs: false
19
19
  });
20
- var _exp2 = function _exp2() {
20
+ var _exp4 = function _exp4() {
21
21
  return function (_ref) {
22
22
  var isFilled = _ref.isFilled;
23
23
  return isFilled ? "var(".concat(tokens.tokens.arrowOuterPadding, ")") : '';
24
24
  };
25
25
  };
26
- var _exp3 = function _exp3() {
26
+ var _exp5 = function _exp5() {
27
27
  return function (_ref2) {
28
28
  var isLeftArrow = _ref2.isLeftArrow;
29
29
  return isLeftArrow ? "var(".concat(tokens.tokens.arrowInnerPadding, ")") : 'var(--plasma_private-outer-padding)';
30
30
  };
31
31
  };
32
- var _exp4 = function _exp4() {
32
+ var _exp6 = function _exp6() {
33
33
  return function (_ref3) {
34
34
  var isLeftArrow = _ref3.isLeftArrow;
35
35
  return isLeftArrow ? 'var(--plasma_private-outer-padding)' : "var(".concat(tokens.tokens.arrowInnerPadding, ")");
@@ -40,9 +40,9 @@ var StyledArrow = /*#__PURE__*/react.styled('button')({
40
40
  "class": "s1ekwj92",
41
41
  propsAsIs: false,
42
42
  vars: {
43
- "s1ekwj92-0": [/*#__PURE__*/_exp2()],
44
- "s1ekwj92-1": [/*#__PURE__*/_exp3()],
45
- "s1ekwj92-2": [/*#__PURE__*/_exp4()]
43
+ "s1ekwj92-0": [/*#__PURE__*/_exp4()],
44
+ "s1ekwj92-1": [/*#__PURE__*/_exp5()],
45
+ "s1ekwj92-2": [/*#__PURE__*/_exp6()]
46
46
  }
47
47
  });
48
48
 
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.styles.js","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { tokens } from '../../tokens';\n\nexport const base = css`\n display: flex;\n align-items: center;\n position: relative;\n`;\n\nexport const StyledContent = styled.div`\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledContentWrapper = styled.div`\n /* allows correctly display outline focus on tabs item */\n margin: -0.125rem;\n padding: 0.25rem;\n\n box-sizing: content-box;\n overflow: scroll;\n position: relative;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n\n overscroll-behavior: contain;\n`;\n\nexport const StyledArrow = styled.button<{ isLeftArrow?: boolean; isFilled?: boolean }>`\n display: flex;\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0;\n outline: none;\n\n ${addFocus({\n outlineSize: '0.063rem',\n outlineOffset: '-0.125rem',\n outlineColor: `var(${tokens.outlineFocusColor})`,\n outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n })};\n\n &[disabled] {\n cursor: not-allowed;\n }\n\n --plasma_private-outer-padding: ${({ isFilled }) => (isFilled ? `var(${tokens.arrowOuterPadding})` : '')};\n\n padding-right: ${({ isLeftArrow }) =>\n isLeftArrow ? `var(${tokens.arrowInnerPadding})` : 'var(--plasma_private-outer-padding)'};\n padding-left: ${({ isLeftArrow }) =>\n isLeftArrow ? 'var(--plasma_private-outer-padding)' : `var(${tokens.arrowInnerPadding})`};\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","_exp2","_ref","isFilled","concat","tokens","arrowOuterPadding","_exp3","_ref2","isLeftArrow","arrowInnerPadding","_exp4","_ref3","StyledArrow","vars"],"mappings":";;;;;;;AAMO,IAAMA,IAAI,GAIhB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAmBzC,EAAA;AAAC,IAAAE,KAAA,GApCgBA,SAoChBA,KAAAA,GAAA;AAAA,EAAA,OAqBoC,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,QAAAA,GAAAA,IAAAA,CAAAA,QAAAA,CAAAA;IAAAA,OAAgBA,QAAQ,UAAAC,MAAA,CAAUC,aAAM,CAACC,iBAAkB,SAAK,EAAG,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GAzD1FA,SAyD0FA,KAAAA,GAAA;AAAA,EAAA,OAEvF,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,WAAAA,GAAAA,KAAAA,CAAAA,WAAAA,CAAAA;IAAAA,OAChBA,WAAW,UAAAL,MAAA,CAAUC,aAAM,CAACK,iBAAkB,SAAK,qCAAqC,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GA5D9EA,SA4D8EA,KAAAA,GAAA;AAAA,EAAA,OAC5E,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGH,WAAAA,GAAAA,KAAAA,CAAAA,WAAAA,CAAAA;IAAAA,OACfA,WAAW,GAAG,qCAAqC,GAAA,MAAA,CAAAL,MAAA,CAAUC,aAAM,CAACK,iBAAkB,EAAE,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAxBzF,IAAMG,WAAW,gBAAGjB,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAe,EAAAA,IAAA,EAAA;AAAA,IAAA,YAAA,EAAA,cAmBKb,KAAsE,EAAA,CAAA;AAAA,IAAA,YAAA,EAAA,cAEvFM,KAC2E,EAAA,CAAA;AAAA,IAAA,YAAA,EAAA,cAC5EI,KAC4E,EAAA,CAAA;AAAA,GAAA;AAAA,CAC/F;;;;;;;"}
1
+ {"version":3,"file":"Tabs.styles.js","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { classes, tokens } from '../../tokens';\n\nexport const base = css`\n display: flex;\n gap: 0.125rem;\n align-items: center;\n position: relative;\n`;\n\nexport const StyledContent = styled.div`\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledContentWrapper = styled.div`\n /* allows correctly display outline focus on tabs item */\n margin: -0.125rem;\n padding: 0.25rem;\n\n box-sizing: content-box;\n position: relative;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n\n &.${classes.tabsClipScroll} {\n overflow: scroll;\n scroll-padding: 0.25rem;\n overscroll-behavior: contain;\n\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n &.${classes.tabsClipShowAll} {\n overflow: visible;\n }\n`;\n\nexport const StyledArrow = styled.button<{ isLeftArrow?: boolean; isFilled?: boolean }>`\n display: flex;\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0;\n outline: none;\n\n ${addFocus({\n outlineSize: '0.063rem',\n outlineOffset: '-0.125rem',\n outlineColor: `var(${tokens.outlineFocusColor})`,\n outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n })};\n\n &[disabled] {\n cursor: not-allowed;\n }\n\n --plasma_private-outer-padding: ${({ isFilled }) => (isFilled ? `var(${tokens.arrowOuterPadding})` : '')};\n\n padding-right: ${({ isLeftArrow }) =>\n isLeftArrow ? `var(${tokens.arrowInnerPadding})` : 'var(--plasma_private-outer-padding)'};\n padding-left: ${({ isLeftArrow }) =>\n isLeftArrow ? 'var(--plasma_private-outer-padding)' : `var(${tokens.arrowInnerPadding})`};\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","_exp4","_ref","isFilled","concat","tokens","arrowOuterPadding","_exp5","_ref2","isLeftArrow","arrowInnerPadding","_exp6","_ref3","StyledArrow","vars"],"mappings":";;;;;;;AAMO,IAAMA,IAAI,GAKhB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA0BzC,EAAA;AAAC,IAAAE,KAAA,GA5CgBA,SA4ChBA,KAAAA,GAAA;AAAA,EAAA,OAqBoC,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,QAAAA,GAAAA,IAAAA,CAAAA,QAAAA,CAAAA;IAAAA,OAAgBA,QAAQ,UAAAC,MAAA,CAAUC,aAAM,CAACC,iBAAkB,SAAK,EAAG,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GAjE1FA,SAiE0FA,KAAAA,GAAA;AAAA,EAAA,OAEvF,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,WAAAA,GAAAA,KAAAA,CAAAA,WAAAA,CAAAA;IAAAA,OAChBA,WAAW,UAAAL,MAAA,CAAUC,aAAM,CAACK,iBAAkB,SAAK,qCAAqC,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GApE9EA,SAoE8EA,KAAAA,GAAA;AAAA,EAAA,OAC5E,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGH,WAAAA,GAAAA,KAAAA,CAAAA,WAAAA,CAAAA;IAAAA,OACfA,WAAW,GAAG,qCAAqC,GAAA,MAAA,CAAAL,MAAA,CAAUC,aAAM,CAACK,iBAAkB,EAAE,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAxBzF,IAAMG,WAAW,gBAAGjB,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAe,EAAAA,IAAA,EAAA;AAAA,IAAA,YAAA,EAAA,cAmBKb,KAAsE,EAAA,CAAA;AAAA,IAAA,YAAA,EAAA,cAEvFM,KAC2E,EAAA,CAAA;AAAA,IAAA,YAAA,EAAA,cAC5EI,KAC4E,EAAA,CAAA;AAAA,GAAA;AAAA,CAC/F;;;;;;;"}
@@ -1,4 +1,4 @@
1
- .bu8v92r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}
1
+ .bu8v92r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0.125rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}
2
2
  .s8qwlso{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
3
- .sh5e38r{margin:-0.125rem;padding:0.25rem;box-sizing:content-box;overflow:scroll;position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.sh5e38r::-webkit-scrollbar{display:none;}
3
+ .sh5e38r{margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.sh5e38r.tabs-clip-scroll{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.sh5e38r.tabs-clip-scroll::-webkit-scrollbar{display:none;}.sh5e38r.tabs-clip-show-all{overflow:visible;}
4
4
  .s1ekwj92{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;--plasma_private-outer-padding:var(--s1ekwj92-0);padding-right:var(--s1ekwj92-1);padding-left:var(--s1ekwj92-2);}.s1ekwj92::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.s1ekwj92.focus-visible:focus::before,.s1ekwj92[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.s1ekwj92[disabled]{cursor:not-allowed;}
@@ -1,4 +1,4 @@
1
- import './base_176tz0n.css';
1
+ import './base_1c7lnrm.css';
2
2
  'use strict';
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
@@ -1 +1 @@
1
- {"version":3,"file":"base.js","sources":["../../../../../../../src/components/Tabs/ui/Tabs/variations/_stretch/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes } from '../../../../tokens';\nimport { StyledContent, StyledContentWrapper } from '../../Tabs.styles';\n\nexport const base = css`\n &.${classes.tabsStretch} {\n width: 100%;\n\n ${StyledContentWrapper}, ${StyledContent}, ${StyledContent} > button {\n width: 100%;\n }\n }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAQhB;;;;"}
1
+ {"version":3,"file":"base.js","sources":["../../../../../../../src/components/Tabs/ui/Tabs/variations/_stretch/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes } from '../../../../tokens';\nimport { StyledContent, StyledContentWrapper } from '../../Tabs.styles';\n\nexport const base = css`\n &.${classes.tabsStretch} {\n width: 100%;\n\n ${StyledContentWrapper}, ${StyledContent}, ${StyledContent} > button {\n width: 100%;\n margin-left: 0;\n }\n }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAShB;;;;"}
@@ -1 +1 @@
1
- .be36ynn.tabs-stretched{width:100%;}.be36ynn.tabs-stretched .sh5e38r,.be36ynn.tabs-stretched .s8qwlso,.be36ynn.tabs-stretched .s8qwlso > button{width:100%;}
1
+ .be36ynn.tabs-stretched{width:100%;}.be36ynn.tabs-stretched .sh5e38r,.be36ynn.tabs-stretched .s8qwlso,.be36ynn.tabs-stretched .s8qwlso > button{width:100%;margin-left:0;}
@@ -1,4 +1,4 @@
1
- import './base_4xkt26.css';
1
+ import './base_aij3sf.css';
2
2
  'use strict';
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
@@ -1 +1 @@
1
- .b1mh5p08{background-color:var(--plasma-tabs-backgorund-color);}.b1mh5p08::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(--plasma-tabs-divider-color);height:var(--plasma-tabs-divider-height);border-radius:var(--plasma-tabs-divider-border-radius);}.b1mh5p08.tabs-has-left-arrow::after{left:1.5rem;}.b1mh5p08.tabs-has-right-arrow::after{right:1.5rem;}
1
+ .b1mh5p08{background-color:var(--plasma-tabs-background-color);}.b1mh5p08::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(--plasma-tabs-divider-color);height:var(--plasma-tabs-divider-height);border-radius:var(--plasma-tabs-divider-border-radius);}.b1mh5p08.tabs-has-left-arrow::after{left:1.5rem;}.b1mh5p08.tabs-has-right-arrow::after{right:1.5rem;}
@@ -0,0 +1,97 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var focusManager$1 = require('../utils/focusManager.js');
7
+ var tabbable = require('../utils/tabbable.js');
8
+ var scopeTab = require('../utils/scopeTab.js');
9
+
10
+ // Находим элемент для фокуса
11
+ var getFocusElement = function getFocusElement(node, firstFocusSelector) {
12
+ var focusElement = null;
13
+ if (firstFocusSelector) {
14
+ if (typeof firstFocusSelector === 'string') {
15
+ focusElement = node.querySelector(firstFocusSelector);
16
+ } else if (firstFocusSelector.current) {
17
+ focusElement = firstFocusSelector.current;
18
+ }
19
+ }
20
+ if (!focusElement) {
21
+ var children = Array.from(node.querySelectorAll(tabbable.focusSelector));
22
+ focusElement = children.find(function (el) {
23
+ return tabbable.isTabble(el);
24
+ }) || null;
25
+ }
26
+
27
+ // Если ничего не нашлось, то может ли сама нода быть под фокусом
28
+ if (!focusElement && tabbable.isFocusable(node)) {
29
+ focusElement = node;
30
+ }
31
+ return focusElement;
32
+ };
33
+ var processNode = function processNode(node, firstFocusSelector, ref) {
34
+ if (ref !== null && ref !== void 0 && ref.current) {
35
+ ref.current.removeEventListener('animationend', function () {
36
+ processNode(node, firstFocusSelector, ref);
37
+ });
38
+ }
39
+ var focusElement = getFocusElement(node, firstFocusSelector);
40
+ if (focusElement) {
41
+ focusElement.focus();
42
+ }
43
+ };
44
+ var focusManager = /*#__PURE__*/new focusManager$1.FocusManager();
45
+
46
+ /**
47
+ * Захватывает фокус внутри DOM node.
48
+ * */
49
+ var useFocusTrap = function useFocusTrap() {
50
+ var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
51
+ var firstFocusSelector = arguments.length > 1 ? arguments[1] : undefined;
52
+ var focusAfterNode = arguments.length > 2 ? arguments[2] : undefined;
53
+ var focusAfterAnimation = arguments.length > 3 ? arguments[3] : undefined;
54
+ var ref = React.useRef();
55
+ var setRef = React.useCallback(function (node) {
56
+ if (ref.current) {
57
+ focusManager.teardownScopedFocus();
58
+ focusManager.returnFocus();
59
+ }
60
+ if (active && node) {
61
+ focusManager.setupScopedFocus(node);
62
+ focusManager.markForFocusAfter(focusAfterNode);
63
+
64
+ // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
65
+ setTimeout(function () {
66
+ if (ref !== null && ref !== void 0 && ref.current && node.ownerDocument && focusAfterAnimation) {
67
+ ref.current.addEventListener('animationend', function () {
68
+ processNode(node, firstFocusSelector, ref);
69
+ });
70
+ } else if (node.ownerDocument) {
71
+ processNode(node, firstFocusSelector);
72
+ }
73
+ });
74
+ ref.current = node;
75
+ return;
76
+ }
77
+ ref.current = null;
78
+ }, [active, firstFocusSelector]);
79
+ React.useEffect(function () {
80
+ if (!active) {
81
+ return;
82
+ }
83
+ var handleKeyDown = function handleKeyDown(event) {
84
+ if (event.key === 'Tab' && ref.current) {
85
+ scopeTab.scopeTab(ref.current, event);
86
+ }
87
+ };
88
+ document.addEventListener('keydown', handleKeyDown);
89
+ return function () {
90
+ document.removeEventListener('keydown', handleKeyDown);
91
+ };
92
+ }, [active]);
93
+ return setRef;
94
+ };
95
+
96
+ exports.useFocusTrap = useFocusTrap;
97
+ //# sourceMappingURL=useFocusTrap.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nimport { FocusManager } from '../utils/focusManager';\nimport { focusSelector, isFocusable, isTabble } from '../utils/tabbable';\nimport { scopeTab } from '../utils/scopeTab';\n\n// Находим элемент для фокуса\nconst getFocusElement = (\n node: HTMLElement,\n firstFocusSelector?: string | React.RefObject<HTMLElement>,\n): HTMLElement | null => {\n let focusElement: HTMLElement | null = null;\n if (firstFocusSelector) {\n if (typeof firstFocusSelector === 'string') {\n focusElement = node.querySelector(firstFocusSelector);\n } else if (firstFocusSelector.current) {\n focusElement = firstFocusSelector.current;\n }\n }\n\n if (!focusElement) {\n const children = Array.from<HTMLElement>(node.querySelectorAll(focusSelector));\n focusElement = children.find((el) => isTabble(el)) || null;\n }\n\n // Если ничего не нашлось, то может ли сама нода быть под фокусом\n if (!focusElement && isFocusable(node)) {\n focusElement = node;\n }\n\n return focusElement;\n};\n\nconst processNode = (\n node: HTMLElement,\n firstFocusSelector?: string | React.RefObject<HTMLElement>,\n ref?: React.MutableRefObject<HTMLElement | null | undefined>,\n) => {\n if (ref?.current) {\n ref.current.removeEventListener('animationend', () => {\n processNode(node, firstFocusSelector, ref);\n });\n }\n const focusElement = getFocusElement(node, firstFocusSelector);\n\n if (focusElement) {\n focusElement.focus();\n }\n};\n\nconst focusManager = new FocusManager();\n\n/**\n * Захватывает фокус внутри DOM node.\n * */\nexport const useFocusTrap = (\n active = true,\n firstFocusSelector?: string | React.RefObject<HTMLElement>,\n focusAfterNode?: React.RefObject<HTMLElement>,\n focusAfterAnimation?: boolean,\n): ((instance: HTMLElement | null) => void) => {\n const ref = useRef<HTMLElement | null>();\n\n const setRef = useCallback(\n (node: HTMLElement | null) => {\n if (ref.current) {\n focusManager.teardownScopedFocus();\n focusManager.returnFocus();\n }\n\n if (active && node) {\n focusManager.setupScopedFocus(node);\n focusManager.markForFocusAfter(focusAfterNode);\n\n // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (ref?.current && node.ownerDocument && focusAfterAnimation) {\n ref.current.addEventListener('animationend', () => {\n processNode(node, firstFocusSelector, ref);\n });\n } else if (node.ownerDocument) {\n processNode(node, firstFocusSelector);\n }\n });\n\n ref.current = node;\n return;\n }\n\n ref.current = null;\n },\n [active, firstFocusSelector],\n );\n\n useEffect(() => {\n if (!active) {\n return;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && ref.current) {\n scopeTab(ref.current, event);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [active]);\n\n return setRef;\n};\n"],"names":["getFocusElement","node","firstFocusSelector","focusElement","querySelector","current","children","Array","from","querySelectorAll","focusSelector","find","el","isTabble","isFocusable","processNode","ref","removeEventListener","focus","focusManager","FocusManager","useFocusTrap","active","arguments","length","undefined","focusAfterNode","focusAfterAnimation","useRef","setRef","useCallback","teardownScopedFocus","returnFocus","setupScopedFocus","markForFocusAfter","setTimeout","ownerDocument","addEventListener","useEffect","handleKeyDown","event","key","scopeTab","document"],"mappings":"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"}
package/cjs/index.css CHANGED
@@ -165,20 +165,20 @@
165
165
 
166
166
  .base_iw773q_b12fajph__34b9af5a{width:var(--plasma-tabs-width);height:var(--plasma-tabs-height);--plasma_private-outline-radius:var(--plasma-tabs-border-radius);border-radius:var(--plasma-tabs-border-radius);}
167
167
 
168
- .base_4xkt26_b1mh5p08__45365c21{background-color:var(--plasma-tabs-backgorund-color);}.base_4xkt26_b1mh5p08__45365c21::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(--plasma-tabs-divider-color);height:var(--plasma-tabs-divider-height);border-radius:var(--plasma-tabs-divider-border-radius);}.base_4xkt26_b1mh5p08__45365c21.base_4xkt26_tabsHasLeftArrow__45365c21::after{left:1.5rem;}.base_4xkt26_b1mh5p08__45365c21.base_4xkt26_tabsHasRightArrow__45365c21::after{right:1.5rem;}
168
+ .base_aij3sf_b1mh5p08__d6b8b2c3{background-color:var(--plasma-tabs-background-color);}.base_aij3sf_b1mh5p08__d6b8b2c3::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(--plasma-tabs-divider-color);height:var(--plasma-tabs-divider-height);border-radius:var(--plasma-tabs-divider-border-radius);}.base_aij3sf_b1mh5p08__d6b8b2c3.base_aij3sf_tabsHasLeftArrow__d6b8b2c3::after{left:1.5rem;}.base_aij3sf_b1mh5p08__d6b8b2c3.base_aij3sf_tabsHasRightArrow__d6b8b2c3::after{right:1.5rem;}
169
169
 
170
170
  .base_1i8tr9c_b1lwejhw__63d2542b{opacity:var(--plasma-tabs-disabled-opacity);}
171
171
 
172
172
  .base_1ujjl52_b1aa8x3y__dbe55f93.base_1ujjl52_tabsPilled__dbe55f93{--plasma_private-outline-radius:var(--plasma-tabs-pilled-border-radius);border-radius:var(--plasma-tabs-pilled-border-radius);}
173
173
 
174
- .base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac{width:100%;}.base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac .base_176tz0n_sh5e38r__f15737ac,.base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac .base_176tz0n_s8qwlso__f15737ac,.base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac .base_176tz0n_s8qwlso__f15737ac > button{width:100%;}
174
+ .base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea{width:100%;}.base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea .base_1c7lnrm_sh5e38r__a2a07cea,.base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea .base_1c7lnrm_s8qwlso__a2a07cea,.base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea .base_1c7lnrm_s8qwlso__a2a07cea > button{width:100%;margin-left:0;}
175
175
 
176
- .Tabs_styles_1b8qt33_bu8v92r__719988cb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}
177
- .Tabs_styles_1b8qt33_s8qwlso__719988cb{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
178
- .Tabs_styles_1b8qt33_sh5e38r__719988cb{margin:-0.125rem;padding:0.25rem;box-sizing:content-box;overflow:scroll;position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.Tabs_styles_1b8qt33_sh5e38r__719988cb::-webkit-scrollbar{display:none;}
179
- .Tabs_styles_1b8qt33_s1ekwj92__719988cb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;--plasma_private-outer-padding:var(--s1ekwj92-0);padding-right:var(--s1ekwj92-1);padding-left:var(--s1ekwj92-2);}.Tabs_styles_1b8qt33_s1ekwj92__719988cb::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Tabs_styles_1b8qt33_s1ekwj92__719988cb.Tabs_styles_1b8qt33_focusVisible__719988cb:focus::before,.Tabs_styles_1b8qt33_s1ekwj92__719988cb[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.Tabs_styles_1b8qt33_s1ekwj92__719988cb[disabled]{cursor:not-allowed;}
176
+ .Tabs_styles_z4dnzh_bu8v92r__3f447f56{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0.125rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}
177
+ .Tabs_styles_z4dnzh_s8qwlso__3f447f56{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
178
+ .Tabs_styles_z4dnzh_sh5e38r__3f447f56{margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Tabs_styles_z4dnzh_sh5e38r__3f447f56.Tabs_styles_z4dnzh_tabsClipScroll__3f447f56{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.Tabs_styles_z4dnzh_sh5e38r__3f447f56.Tabs_styles_z4dnzh_tabsClipScroll__3f447f56::-webkit-scrollbar{display:none;}.Tabs_styles_z4dnzh_sh5e38r__3f447f56.Tabs_styles_z4dnzh_tabsClipShowAll__3f447f56{overflow:visible;}
179
+ .Tabs_styles_z4dnzh_s1ekwj92__3f447f56{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;--plasma_private-outer-padding:var(--s1ekwj92-0);padding-right:var(--s1ekwj92-1);padding-left:var(--s1ekwj92-2);}.Tabs_styles_z4dnzh_s1ekwj92__3f447f56::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Tabs_styles_z4dnzh_s1ekwj92__3f447f56.Tabs_styles_z4dnzh_focusVisible__3f447f56:focus::before,.Tabs_styles_z4dnzh_s1ekwj92__3f447f56[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.Tabs_styles_z4dnzh_s1ekwj92__3f447f56[disabled]{cursor:not-allowed;}
180
180
 
181
- .base_q8xs21_b5uyjxl__66eab5c4{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.base_q8xs21_b5uyjxl__66eab5c4:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.base_q8xs21_b5uyjxl__66eab5c4:hover .base_q8xs21_r265xop__66eab5c4{color:var(--plasma-tab-item-hover-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_tabItemAnimated__66eab5c4{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4 .base_q8xs21_r265xop__66eab5c4{color:var(--plasma-tab-item-selected-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4 .base_q8xs21_r265xop__66eab5c4:hover{color:var(--plasma-tab-item-selected-hover-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:1px;}
181
+ .base_7pcxtm_b5uyjxl__b67ab7ce{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.base_7pcxtm_b5uyjxl__b67ab7ce:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.base_7pcxtm_b5uyjxl__b67ab7ce:hover .base_7pcxtm_r265xop__b67ab7ce{color:var(--plasma-tab-item-hover-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce:active{color:var(--plasma-tab-item-color-active);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_tabItemAnimated__b67ab7ce{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce .base_7pcxtm_r265xop__b67ab7ce{color:var(--plasma-tab-item-selected-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce .base_7pcxtm_r265xop__b67ab7ce:hover{color:var(--plasma-tab-item-selected-hover-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:1px;}
182
182
 
183
183
  .base_1d7e3fp_bvmpqz9__8fd7c45d{font-family:var(--plasma-tab-item-font-family);font-size:var(--plasma-tab-item-font-size);font-style:var(--plasma-tab-item-font-style);font-weight:var(--plasma-tab-item-font-weight);-webkit-letter-spacing:var(--plasma-tab-item-letter-spacing);-moz-letter-spacing:var(--plasma-tab-item-letter-spacing);-ms-letter-spacing:var(--plasma-tab-item-letter-spacing);letter-spacing:var(--plasma-tab-item-letter-spacing);line-height:var(--plasma-tab-item-lineheight);--plasma_private-outline-radius:var(--plasma-tab-item-border-radius);border-radius:var(--plasma-tab-item-border-radius);width:var(--plasma-tab-item-width);height:var(--plasma-tab-item-height);}
184
184
 
package/cjs/index.js CHANGED
@@ -15,6 +15,7 @@ var applySkeletonGradient = require('./mixins/applySkeletonGradient.js');
15
15
  var applyDisabled = require('./mixins/applyDisabled.js');
16
16
  var index = require('./engines/index.js');
17
17
  var useUniqId = require('./hooks/useUniqId.js');
18
+ var useFocusTrap = require('./hooks/useFocusTrap.js');
18
19
  var usePreviousValue = require('./hooks/usePreviousValue.js');
19
20
  var useForceUpdate = require('./hooks/useForceUpdate.js');
20
21
  var useDidMountEffect = require('./hooks/useDidMountEffect.js');
@@ -269,6 +270,7 @@ exports.getSkeletonColor = applySkeletonGradient.getSkeletonColor;
269
270
  exports.applyDisabled = applyDisabled.applyDisabled;
270
271
  exports.css = index.css;
271
272
  exports.useUniqId = useUniqId.useUniqId;
273
+ exports.useFocusTrap = useFocusTrap.useFocusTrap;
272
274
  exports.usePreviousValue = usePreviousValue.usePreviousValue;
273
275
  exports.useForceUpdate = useForceUpdate.useForceUpdate;
274
276
  exports.useDidMountEffect = useDidMountEffect.useDidMountEffect;
package/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,56 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
6
+ var tabbable = require('./tabbable.js');
7
+
8
+ /**
9
+ * Менеджер фокуса при открытии и закрытии нод при использовании focus-trap.
10
+ * Также необходим, чтобы фокус всегда должен находиться внутри необходимой ноды.
11
+ * */
12
+ var FocusManager = /*#__PURE__*/_rollupPluginBabelHelpers.createClass(function FocusManager() {
13
+ var _this = this;
14
+ _rollupPluginBabelHelpers.classCallCheck(this, FocusManager);
15
+ // массив с элементами, которые нужно зафокусить после анмаунта
16
+ _rollupPluginBabelHelpers.defineProperty(this, "focusAfterElements", []);
17
+ // массив с trap нодами
18
+ _rollupPluginBabelHelpers.defineProperty(this, "focusNodes", []);
19
+ _rollupPluginBabelHelpers.defineProperty(this, "handleFocus", function () {
20
+ // Фокус всегда должен находиться внутри необходимой ноды
21
+ var focusNode = _this.focusNodes[_this.focusNodes.length - 1];
22
+ if (!focusNode || focusNode.contains(document.activeElement)) {
23
+ return;
24
+ }
25
+
26
+ // Выделяем первый tabbable элемент
27
+ var el = tabbable.findTabbableDescendants(focusNode)[0] || focusNode;
28
+ el.focus();
29
+ });
30
+ // добавление на фокус после анмаунта
31
+ _rollupPluginBabelHelpers.defineProperty(this, "markForFocusAfter", function (focusAfterNode) {
32
+ var node = focusAfterNode && focusAfterNode.current ? focusAfterNode.current : document.activeElement;
33
+ _this.focusAfterElements.push(node);
34
+ });
35
+ // фокус на необходимый элемент
36
+ _rollupPluginBabelHelpers.defineProperty(this, "returnFocus", function () {
37
+ var _this$focusAfterEleme;
38
+ var toFocus = (_this$focusAfterEleme = _this.focusAfterElements.pop()) !== null && _this$focusAfterEleme !== void 0 ? _this$focusAfterEleme : null;
39
+ if (toFocus) {
40
+ toFocus.focus();
41
+ }
42
+ });
43
+ // при маунте ноды
44
+ _rollupPluginBabelHelpers.defineProperty(this, "setupScopedFocus", function (element) {
45
+ _this.focusNodes.push(element);
46
+ document.addEventListener('focusin', _this.handleFocus, true);
47
+ });
48
+ // при анмаунте
49
+ _rollupPluginBabelHelpers.defineProperty(this, "teardownScopedFocus", function () {
50
+ _this.focusNodes.pop();
51
+ document.removeEventListener('focusin', _this.handleFocus);
52
+ });
53
+ });
54
+
55
+ exports.FocusManager = FocusManager;
56
+ //# sourceMappingURL=focusManager.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"focusManager.js","sources":["../../src/utils/focusManager.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\n/**\n * Менеджер фокуса при открытии и закрытии нод при использовании focus-trap.\n * Также необходим, чтобы фокус всегда должен находиться внутри необходимой ноды.\n * */\nexport class FocusManager {\n // массив с элементами, которые нужно зафокусить после анмаунта\n private focusAfterElements: Array<HTMLElement> = [];\n\n // массив с trap нодами\n private focusNodes: Array<HTMLElement> = [];\n\n private handleFocus = () => {\n // Фокус всегда должен находиться внутри необходимой ноды\n const focusNode = this.focusNodes[this.focusNodes.length - 1];\n\n if (!focusNode || focusNode.contains(document.activeElement)) {\n return;\n }\n\n // Выделяем первый tabbable элемент\n const el = findTabbableDescendants(focusNode)[0] || focusNode;\n el.focus();\n };\n\n // добавление на фокус после анмаунта\n public markForFocusAfter = (focusAfterNode?: React.RefObject<HTMLElement>) => {\n const node =\n focusAfterNode && focusAfterNode.current ? focusAfterNode.current : (document.activeElement as HTMLElement);\n this.focusAfterElements.push(node);\n };\n\n // фокус на необходимый элемент\n public returnFocus = () => {\n const toFocus = this.focusAfterElements.pop() ?? null;\n if (toFocus) {\n toFocus.focus();\n }\n };\n\n // при маунте ноды\n public setupScopedFocus = (element: HTMLElement) => {\n this.focusNodes.push(element);\n document.addEventListener('focusin', this.handleFocus, true);\n };\n\n // при анмаунте\n public teardownScopedFocus = () => {\n this.focusNodes.pop();\n document.removeEventListener('focusin', this.handleFocus);\n };\n}\n"],"names":["FocusManager","_createClass","_this","_classCallCheck","_defineProperty","focusNode","focusNodes","length","contains","document","activeElement","el","findTabbableDescendants","focus","focusAfterNode","node","current","focusAfterElements","push","_this$focusAfterEleme","toFocus","pop","element","addEventListener","handleFocus","removeEventListener"],"mappings":";;;;;;;AAEA;AACA;AACA;AACA;AACA,IAAaA,YAAY,gBAAAC,qCAAA,CAAA,SAAAD,YAAA,GAAA;AAAA,EAAA,IAAAE,KAAA,GAAA,IAAA,CAAA;AAAAC,EAAAA,wCAAA,OAAAH,YAAA,CAAA,CAAA;AACrB;AAAAI,EAAAA,wCAAA,6BACiD,EAAE,CAAA,CAAA;AAEnD;AAAAA,EAAAA,wCAAA,qBACyC,EAAE,CAAA,CAAA;AAAAA,EAAAA,wCAAA,sBAErB,YAAM;AACxB;AACA,IAAA,IAAMC,SAAS,GAAGH,KAAI,CAACI,UAAU,CAACJ,KAAI,CAACI,UAAU,CAACC,MAAM,GAAG,CAAC,CAAC,CAAA;IAE7D,IAAI,CAACF,SAAS,IAAIA,SAAS,CAACG,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC,EAAE;AAC1D,MAAA,OAAA;AACJ,KAAA;;AAEA;IACA,IAAMC,EAAE,GAAGC,gCAAuB,CAACP,SAAS,CAAC,CAAC,CAAC,CAAC,IAAIA,SAAS,CAAA;IAC7DM,EAAE,CAACE,KAAK,EAAE,CAAA;GACb,CAAA,CAAA;AAED;EAAAT,wCAAA,CAAA,IAAA,EAAA,mBAAA,EAC2B,UAACU,cAA6C,EAAK;AAC1E,IAAA,IAAMC,IAAI,GACND,cAAc,IAAIA,cAAc,CAACE,OAAO,GAAGF,cAAc,CAACE,OAAO,GAAIP,QAAQ,CAACC,aAA6B,CAAA;AAC/GR,IAAAA,KAAI,CAACe,kBAAkB,CAACC,IAAI,CAACH,IAAI,CAAC,CAAA;GACrC,CAAA,CAAA;AAED;AAAAX,EAAAA,wCAAA,sBACqB,YAAM;AAAA,IAAA,IAAAe,qBAAA,CAAA;AACvB,IAAA,IAAMC,OAAO,GAAAD,CAAAA,qBAAA,GAAGjB,KAAI,CAACe,kBAAkB,CAACI,GAAG,EAAE,MAAAF,IAAAA,IAAAA,qBAAA,KAAAA,KAAAA,CAAAA,GAAAA,qBAAA,GAAI,IAAI,CAAA;AACrD,IAAA,IAAIC,OAAO,EAAE;MACTA,OAAO,CAACP,KAAK,EAAE,CAAA;AACnB,KAAA;GACH,CAAA,CAAA;AAED;EAAAT,wCAAA,CAAA,IAAA,EAAA,kBAAA,EAC0B,UAACkB,OAAoB,EAAK;AAChDpB,IAAAA,KAAI,CAACI,UAAU,CAACY,IAAI,CAACI,OAAO,CAAC,CAAA;IAC7Bb,QAAQ,CAACc,gBAAgB,CAAC,SAAS,EAAErB,KAAI,CAACsB,WAAW,EAAE,IAAI,CAAC,CAAA;GAC/D,CAAA,CAAA;AAED;AAAApB,EAAAA,wCAAA,8BAC6B,YAAM;AAC/BF,IAAAA,KAAI,CAACI,UAAU,CAACe,GAAG,EAAE,CAAA;IACrBZ,QAAQ,CAACgB,mBAAmB,CAAC,SAAS,EAAEvB,KAAI,CAACsB,WAAW,CAAC,CAAA;GAC5D,CAAA,CAAA;AAAA,CAAA;;;;"}
@@ -0,0 +1,37 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tabbable = require('./tabbable.js');
6
+
7
+ /**
8
+ * Управлление фокусом лишь внутри ноды через tab
9
+ * @param node
10
+ * @param event
11
+ */
12
+ var scopeTab = function scopeTab(node, event) {
13
+ var tabbable$1 = tabbable.findTabbableDescendants(node);
14
+ if (!tabbable$1.length) {
15
+ event.preventDefault();
16
+ return;
17
+ }
18
+
19
+ // смотрим, является ли элемент крайним - первый или последним
20
+ var finalTabbable = tabbable$1[event.shiftKey ? 0 : tabbable$1.length - 1];
21
+ var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
22
+
23
+ // если не является, то передаем обработку таба самому браузеру
24
+ if (!leavingFinalTabbable) {
25
+ return;
26
+ }
27
+
28
+ // иначе зацкливаемся
29
+ event.preventDefault();
30
+ var target = tabbable$1[event.shiftKey ? tabbable$1.length - 1 : 0];
31
+ if (target) {
32
+ target.focus();
33
+ }
34
+ };
35
+
36
+ exports.scopeTab = scopeTab;
37
+ //# sourceMappingURL=scopeTab.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scopeTab.js","sources":["../../src/utils/scopeTab.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\n/**\n * Управлление фокусом лишь внутри ноды через tab\n * @param node\n * @param event\n */\nexport const scopeTab = (node: HTMLElement, event: KeyboardEvent) => {\n const tabbable = findTabbableDescendants(node);\n if (!tabbable.length) {\n event.preventDefault();\n return;\n }\n\n // смотрим, является ли элемент крайним - первый или последним\n const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];\n const leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;\n\n // если не является, то передаем обработку таба самому браузеру\n if (!leavingFinalTabbable) {\n return;\n }\n\n // иначе зацкливаемся\n event.preventDefault();\n const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];\n if (target) {\n target.focus();\n }\n};\n"],"names":["scopeTab","node","event","tabbable","findTabbableDescendants","length","preventDefault","finalTabbable","shiftKey","leavingFinalTabbable","document","activeElement","target","focus"],"mappings":";;;;;;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,IAAiB,EAAEC,KAAoB,EAAK;AACjE,EAAA,IAAMC,UAAQ,GAAGC,gCAAuB,CAACH,IAAI,CAAC,CAAA;AAC9C,EAAA,IAAI,CAACE,UAAQ,CAACE,MAAM,EAAE;IAClBH,KAAK,CAACI,cAAc,EAAE,CAAA;AACtB,IAAA,OAAA;AACJ,GAAA;;AAEA;AACA,EAAA,IAAMC,aAAa,GAAGJ,UAAQ,CAACD,KAAK,CAACM,QAAQ,GAAG,CAAC,GAAGL,UAAQ,CAACE,MAAM,GAAG,CAAC,CAAC,CAAA;AACxE,EAAA,IAAMI,oBAAoB,GAAGF,aAAa,KAAKG,QAAQ,CAACC,aAAa,IAAIV,IAAI,KAAKS,QAAQ,CAACC,aAAa,CAAA;;AAExG;EACA,IAAI,CAACF,oBAAoB,EAAE;AACvB,IAAA,OAAA;AACJ,GAAA;;AAEA;EACAP,KAAK,CAACI,cAAc,EAAE,CAAA;AACtB,EAAA,IAAMM,MAAM,GAAGT,UAAQ,CAACD,KAAK,CAACM,QAAQ,GAAGL,UAAQ,CAACE,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AACjE,EAAA,IAAIO,MAAM,EAAE;IACRA,MAAM,CAACC,KAAK,EAAE,CAAA;AAClB,GAAA;AACJ;;;;"}
@@ -0,0 +1,51 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tabbableNode = /input|select|textarea|button|object/;
6
+ var focusSelector = /*#__PURE__*/['input', 'select', 'textarea', 'a', 'button', 'object', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
7
+ var isHidden = function isHidden(el) {
8
+ return el.offsetWidth <= 0 && el.offsetHeight <= 0 || el.style.display === 'none' || el.style.visibility === 'hidden' || el.style.opacity === '0';
9
+ };
10
+ var isVisible = function isVisible(element, parentContainer) {
11
+ var parentElement = element;
12
+ while (parentElement) {
13
+ if (parentElement === parentContainer || parentElement === document.body) {
14
+ break;
15
+ }
16
+ if (isHidden(parentElement)) {
17
+ return false;
18
+ }
19
+ parentElement = parentElement.parentNode;
20
+ }
21
+ return true;
22
+ };
23
+ var getElementTabIndex = function getElementTabIndex(element) {
24
+ var tabIndex = element.getAttribute('tabindex');
25
+ return tabIndex === null ? NaN : parseInt(tabIndex, 10);
26
+ };
27
+ var isFocusable = function isFocusable(element, parentContainer) {
28
+ var nodeName = element.nodeName.toLowerCase();
29
+ var isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));
30
+ var res = tabbableNode.test(nodeName) && !element.disabled || (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);
31
+ return Boolean(res) && isVisible(element, parentContainer);
32
+ };
33
+ var isTabble = function isTabble(element, parentContainer) {
34
+ var tabIndex = getElementTabIndex(element);
35
+ var isTabIndexNaN = Number.isNaN(tabIndex);
36
+ return (isTabIndexNaN || tabIndex >= 0) && isFocusable(element, parentContainer);
37
+ };
38
+
39
+ // Все элементы внутри данной ноды, до которых можно добраться табом
40
+ var findTabbableDescendants = function findTabbableDescendants(element) {
41
+ return Array.from(element.querySelectorAll(focusSelector)).filter(function (el) {
42
+ return isTabble(el, element);
43
+ });
44
+ };
45
+
46
+ exports.findTabbableDescendants = findTabbableDescendants;
47
+ exports.focusSelector = focusSelector;
48
+ exports.isFocusable = isFocusable;
49
+ exports.isTabble = isTabble;
50
+ exports.isVisible = isVisible;
51
+ //# sourceMappingURL=tabbable.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tabbable.js","sources":["../../src/utils/tabbable.ts"],"sourcesContent":["const tabbableNode = /input|select|textarea|button|object/;\n\nexport const focusSelector = [\n 'input',\n 'select',\n 'textarea',\n 'a',\n 'button',\n 'object',\n '[tabindex]',\n 'audio[controls]',\n 'video[controls]',\n '[contenteditable]:not([contenteditable=\"false\"])',\n].join(',');\n\nconst isHidden = (el: HTMLElement) => {\n return (\n (el.offsetWidth <= 0 && el.offsetHeight <= 0) ||\n el.style.display === 'none' ||\n el.style.visibility === 'hidden' ||\n el.style.opacity === '0'\n );\n};\n\nexport const isVisible = (element: HTMLElement, parentContainer?: HTMLElement): boolean => {\n let parentElement: HTMLElement = element;\n\n while (parentElement) {\n if (parentElement === parentContainer || parentElement === document.body) {\n break;\n }\n\n if (isHidden(parentElement)) {\n return false;\n }\n\n parentElement = parentElement.parentNode as HTMLElement;\n }\n\n return true;\n};\n\nconst getElementTabIndex = (element: HTMLElement): number => {\n const tabIndex = element.getAttribute('tabindex');\n\n return tabIndex === null ? NaN : parseInt(tabIndex as string, 10);\n};\n\nexport const isFocusable = (element: HTMLElement, parentContainer?: HTMLElement): boolean => {\n const nodeName = element.nodeName.toLowerCase();\n const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));\n const res =\n (tabbableNode.test(nodeName) && !(element as HTMLSelectElement).disabled) ||\n (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);\n\n return Boolean(res) && isVisible(element, parentContainer);\n};\n\nexport const isTabble = (element: HTMLElement, parentContainer?: HTMLElement): boolean => {\n const tabIndex = getElementTabIndex(element);\n const isTabIndexNaN = Number.isNaN(tabIndex);\n return (isTabIndexNaN || tabIndex >= 0) && isFocusable(element, parentContainer);\n};\n\n// Все элементы внутри данной ноды, до которых можно добраться табом\nexport const findTabbableDescendants = (element: HTMLElement): Array<HTMLElement> => {\n return Array.from(element.querySelectorAll<HTMLElement>(focusSelector)).filter((el) => isTabble(el, element));\n};\n"],"names":["tabbableNode","focusSelector","join","isHidden","el","offsetWidth","offsetHeight","style","display","visibility","opacity","isVisible","element","parentContainer","parentElement","document","body","parentNode","getElementTabIndex","tabIndex","getAttribute","NaN","parseInt","isFocusable","nodeName","toLowerCase","isTabIndexNotNaN","Number","isNaN","res","test","disabled","HTMLAnchorElement","href","Boolean","isTabble","isTabIndexNaN","findTabbableDescendants","Array","from","querySelectorAll","filter"],"mappings":";;;;AAAA,IAAMA,YAAY,GAAG,qCAAqC,CAAA;AAE7CC,IAAAA,aAAa,gBAAG,CACzB,OAAO,EACP,QAAQ,EACR,UAAU,EACV,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,kDAAkD,CACrD,CAACC,IAAI,CAAC,GAAG,EAAC;AAEX,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,EAAe,EAAK;AAClC,EAAA,OACKA,EAAE,CAACC,WAAW,IAAI,CAAC,IAAID,EAAE,CAACE,YAAY,IAAI,CAAC,IAC5CF,EAAE,CAACG,KAAK,CAACC,OAAO,KAAK,MAAM,IAC3BJ,EAAE,CAACG,KAAK,CAACE,UAAU,KAAK,QAAQ,IAChCL,EAAE,CAACG,KAAK,CAACG,OAAO,KAAK,GAAG,CAAA;AAEhC,CAAC,CAAA;AAEM,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAoB,EAAEC,eAA6B,EAAc;EACvF,IAAIC,aAA0B,GAAGF,OAAO,CAAA;AAExC,EAAA,OAAOE,aAAa,EAAE;IAClB,IAAIA,aAAa,KAAKD,eAAe,IAAIC,aAAa,KAAKC,QAAQ,CAACC,IAAI,EAAE;AACtE,MAAA,MAAA;AACJ,KAAA;AAEA,IAAA,IAAIb,QAAQ,CAACW,aAAa,CAAC,EAAE;AACzB,MAAA,OAAO,KAAK,CAAA;AAChB,KAAA;IAEAA,aAAa,GAAGA,aAAa,CAACG,UAAyB,CAAA;AAC3D,GAAA;AAEA,EAAA,OAAO,IAAI,CAAA;AACf,EAAC;AAED,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIN,OAAoB,EAAa;AACzD,EAAA,IAAMO,QAAQ,GAAGP,OAAO,CAACQ,YAAY,CAAC,UAAU,CAAC,CAAA;EAEjD,OAAOD,QAAQ,KAAK,IAAI,GAAGE,GAAG,GAAGC,QAAQ,CAACH,QAAQ,EAAY,EAAE,CAAC,CAAA;AACrE,CAAC,CAAA;AAEM,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAIX,OAAoB,EAAEC,eAA6B,EAAc;EACzF,IAAMW,QAAQ,GAAGZ,OAAO,CAACY,QAAQ,CAACC,WAAW,EAAE,CAAA;EAC/C,IAAMC,gBAAgB,GAAG,CAACC,MAAM,CAACC,KAAK,CAACV,kBAAkB,CAACN,OAAO,CAAC,CAAC,CAAA;EACnE,IAAMiB,GAAG,GACJ7B,YAAY,CAAC8B,IAAI,CAACN,QAAQ,CAAC,IAAI,CAAEZ,OAAO,CAAuBmB,QAAQ,KACvEnB,OAAO,YAAYoB,iBAAiB,GAAGpB,OAAO,CAACqB,IAAI,IAAIP,gBAAgB,GAAGA,gBAAgB,CAAC,CAAA;EAEhG,OAAOQ,OAAO,CAACL,GAAG,CAAC,IAAIlB,SAAS,CAACC,OAAO,EAAEC,eAAe,CAAC,CAAA;AAC9D,EAAC;AAEM,IAAMsB,QAAQ,GAAG,SAAXA,QAAQA,CAAIvB,OAAoB,EAAEC,eAA6B,EAAc;AACtF,EAAA,IAAMM,QAAQ,GAAGD,kBAAkB,CAACN,OAAO,CAAC,CAAA;AAC5C,EAAA,IAAMwB,aAAa,GAAGT,MAAM,CAACC,KAAK,CAACT,QAAQ,CAAC,CAAA;AAC5C,EAAA,OAAO,CAACiB,aAAa,IAAIjB,QAAQ,IAAI,CAAC,KAAKI,WAAW,CAACX,OAAO,EAAEC,eAAe,CAAC,CAAA;AACpF,EAAC;;AAED;IACawB,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAIzB,OAAoB,EAAyB;AACjF,EAAA,OAAO0B,KAAK,CAACC,IAAI,CAAC3B,OAAO,CAAC4B,gBAAgB,CAAcvC,aAAa,CAAC,CAAC,CAACwC,MAAM,CAAC,UAACrC,EAAE,EAAA;AAAA,IAAA,OAAK+B,QAAQ,CAAC/B,EAAE,EAAEQ,OAAO,CAAC,CAAA;GAAC,CAAA,CAAA;AACjH;;;;;;;;"}
@@ -29,7 +29,6 @@ var tokens = exports.tokens = {
29
29
  accordionItemFocus: '--plasma-accordion-item-focus',
30
30
  accordionItemBorder: '--plasma-accordion-item-border',
31
31
  accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
32
- accordionItemIconColor: '--plasma-accordion-item-color-icon',
33
32
  accordionItemTitleColor: '--plasma-accordion-item-title-color',
34
33
  accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
35
34
  accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',
@@ -24,6 +24,6 @@ var StyledAccordionContentLeft = exports.StyledAccordionContentLeft = /*#__PURE_
24
24
  var StyledAccordionTitle = exports.StyledAccordionTitle = /*#__PURE__*/_styledComponents["default"].div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n color: var(", ");\n font-family: var(", ");\n font-size: var(", ");\n font-weight: var(", ");\n font-style: var(", ");\n letter-spacing: var(", ");\n line-height: var(", ");\n text-align: left;\n"])), _Accordion.tokens.accordionItemTitleColor, _Accordion.tokens.accordionItemTitleFontFamily, _Accordion.tokens.accordionItemTitleFontSize, _Accordion.tokens.accordionItemTitleFontWeight, _Accordion.tokens.accordionItemTitleFontStyle, _Accordion.tokens.accordionItemTitleLetterSpacing, _Accordion.tokens.accordionItemTitleLineHeight);
25
25
  var StyledAccordionBodyAnimate = exports.StyledAccordionBodyAnimate = /*#__PURE__*/_styledComponents["default"].div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.2s ease-out;\n overflow: hidden;\n\n &.", " {\n grid-template-rows: 1fr;\n padding-bottom: var(", ");\n\n &.", " {\n transition: 0.2s;\n transform: rotate(0deg);\n }\n }\n"])), _Accordion.classes.accordionItemShowBody, _Accordion.tokens.accordionItemPaddingVertical, _Accordion.classes.accordionPlusAnimationElement);
26
26
  var StyledAccordionBody = exports.StyledAccordionBody = /*#__PURE__*/_styledComponents["default"].div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n color: var(", ");\n font-family: var(", ");\n font-size: var(", ");\n font-weight: var(", ");\n font-style: var(", ");\n letter-spacing: var(", ");\n line-height: var(", ");\n overflow: hidden;\n padding-right: var(", ");\n padding-left: var(", ");\n text-align: left;\n"])), _Accordion.tokens.accordionItemTextColor, _Accordion.tokens.accordionItemTextFontFamily, _Accordion.tokens.accordionItemTextFontSize, _Accordion.tokens.accordionItemTextFontWeight, _Accordion.tokens.accordionItemTextFontStyle, _Accordion.tokens.accordionItemTextLetterSpacing, _Accordion.tokens.accordionItemTextLineHeight, _Accordion.tokens.accordionItemPaddingHorizontal, _Accordion.tokens.accordionItemPaddingHorizontalLeft);
27
- var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconChevronDownFill)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n pointer-events: none;\n user-select: none;\n color: var(", ");\n"])), _Accordion.tokens.accordionItemIconColor);
28
- var StyledMinus = exports.StyledMinus = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconMinus)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n pointer-events: none;\n user-select: none;\n color: var(", ");\n display: flex;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n\n &.", " {\n transition: 0.2s;\n transform: rotate(90deg);\n }\n\n &.", " {\n transition: 0.2s;\n transform: rotate(0deg);\n }\n"])), _Accordion.tokens.accordionItemIconColor, _Accordion.classes.accordionPlusAnimationElement, _Accordion.classes.accordionItemShowBody);
27
+ var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconChevronDownFill)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n pointer-events: none;\n user-select: none;\n color: var(", ");\n"])), _Accordion.tokens.accordionItemTextColor);
28
+ var StyledMinus = exports.StyledMinus = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconMinus)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n pointer-events: none;\n user-select: none;\n color: var(", ");\n display: flex;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n\n &.", " {\n transition: 0.2s;\n transform: rotate(90deg);\n }\n\n &.", " {\n transition: 0.2s;\n transform: rotate(0deg);\n }\n"])), _Accordion.tokens.accordionItemTextColor, _Accordion.classes.accordionPlusAnimationElement, _Accordion.classes.accordionItemShowBody);
29
29
  var StyledPlus = exports.StyledPlus = /*#__PURE__*/_styledComponents["default"].div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n"])));