@consta/uikit 4.32.0 → 4.33.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/AttachmentCanary/index.d.ts +1 -0
  2. package/AttachmentCanary/index.js +1 -0
  3. package/PaginationCanary/index.d.ts +1 -0
  4. package/PaginationCanary/index.js +1 -0
  5. package/__internal__/src/components/AttachmentCanary/Attachment.css +1 -0
  6. package/__internal__/src/components/AttachmentCanary/AttachmentCanary.d.ts +5 -0
  7. package/__internal__/src/components/AttachmentCanary/AttachmentCanary.js +2 -0
  8. package/__internal__/src/components/AttachmentCanary/AttachmentCanary.js.map +1 -0
  9. package/__internal__/src/components/AttachmentCanary/index.d.ts +1 -0
  10. package/__internal__/src/components/AttachmentCanary/index.js +2 -0
  11. package/__internal__/src/components/AttachmentCanary/index.js.map +1 -0
  12. package/__internal__/src/components/AttachmentCanary/types.d.ts +22 -0
  13. package/__internal__/src/components/AttachmentCanary/types.js +2 -0
  14. package/__internal__/src/components/AttachmentCanary/types.js.map +1 -0
  15. package/__internal__/src/components/CheckboxGroup/CheckboxGroup.js +1 -1
  16. package/__internal__/src/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
  17. package/__internal__/src/components/CheckboxGroup/helper.d.ts +1 -0
  18. package/__internal__/src/components/CheckboxGroup/types.d.ts +13 -9
  19. package/__internal__/src/components/CheckboxGroup/types.js +1 -1
  20. package/__internal__/src/components/CheckboxGroup/types.js.map +1 -1
  21. package/__internal__/src/components/ChoiceGroup/types.d.ts +3 -3
  22. package/__internal__/src/components/ChoiceGroup/types.js.map +1 -1
  23. package/__internal__/src/components/ChoiceGroupDeprecated/ChoiceGroupDeprecated.d.ts +3 -3
  24. package/__internal__/src/components/ChoiceGroupDeprecated/ChoiceGroupDeprecated.js.map +1 -1
  25. package/__internal__/src/components/DateTime/helpers/getHandleSelectDate.d.ts +3 -3
  26. package/__internal__/src/components/DateTime/helpers/getHandleSelectDate.js.map +1 -1
  27. package/__internal__/src/components/DateTime/helpers/types.d.ts +4 -4
  28. package/__internal__/src/components/DateTime/helpers/types.js.map +1 -1
  29. package/__internal__/src/components/DragNDropField/DragNDropFieldTooltip/DragNDropFieldTooltip.js +1 -1
  30. package/__internal__/src/components/DragNDropField/DragNDropFieldTooltip/DragNDropFieldTooltip.js.map +1 -1
  31. package/__internal__/src/components/PaginationCanary/Pagination.css +1 -0
  32. package/__internal__/src/components/PaginationCanary/PaginationArrow/PaginationArrow.css +1 -0
  33. package/__internal__/src/components/PaginationCanary/PaginationArrow/PaginationArrow.d.ts +11 -0
  34. package/__internal__/src/components/PaginationCanary/PaginationArrow/PaginationArrow.js +2 -0
  35. package/__internal__/src/components/PaginationCanary/PaginationArrow/PaginationArrow.js.map +1 -0
  36. package/__internal__/src/components/PaginationCanary/PaginationArrow/index.d.ts +1 -0
  37. package/__internal__/src/components/PaginationCanary/PaginationArrow/index.js +2 -0
  38. package/__internal__/src/components/PaginationCanary/PaginationArrow/index.js.map +1 -0
  39. package/__internal__/src/components/PaginationCanary/PaginationBase/PaginationBase.css +1 -0
  40. package/__internal__/src/components/PaginationCanary/PaginationBase/PaginationBase.d.ts +3 -0
  41. package/__internal__/src/components/PaginationCanary/PaginationBase/PaginationBase.js +2 -0
  42. package/__internal__/src/components/PaginationCanary/PaginationBase/PaginationBase.js.map +1 -0
  43. package/__internal__/src/components/PaginationCanary/PaginationBase/index.d.ts +1 -0
  44. package/__internal__/src/components/PaginationCanary/PaginationBase/index.js +2 -0
  45. package/__internal__/src/components/PaginationCanary/PaginationBase/index.js.map +1 -0
  46. package/__internal__/src/components/PaginationCanary/PaginationCanary.d.ts +3 -0
  47. package/__internal__/src/components/PaginationCanary/PaginationCanary.js +2 -0
  48. package/__internal__/src/components/PaginationCanary/PaginationCanary.js.map +1 -0
  49. package/__internal__/src/components/PaginationCanary/PaginationItem/PaginationItem.css +1 -0
  50. package/__internal__/src/components/PaginationCanary/PaginationItem/PaginationItem.d.ts +3 -0
  51. package/__internal__/src/components/PaginationCanary/PaginationItem/PaginationItem.js +2 -0
  52. package/__internal__/src/components/PaginationCanary/PaginationItem/PaginationItem.js.map +1 -0
  53. package/__internal__/src/components/PaginationCanary/PaginationItem/index.d.ts +1 -0
  54. package/__internal__/src/components/PaginationCanary/PaginationItem/index.js +2 -0
  55. package/__internal__/src/components/PaginationCanary/PaginationItem/index.js.map +1 -0
  56. package/__internal__/src/components/PaginationCanary/PaginationList/PaginationList.css +1 -0
  57. package/__internal__/src/components/PaginationCanary/PaginationList/PaginationList.d.ts +3 -0
  58. package/__internal__/src/components/PaginationCanary/PaginationList/PaginationList.js +2 -0
  59. package/__internal__/src/components/PaginationCanary/PaginationList/PaginationList.js.map +1 -0
  60. package/__internal__/src/components/PaginationCanary/PaginationList/index.d.ts +1 -0
  61. package/__internal__/src/components/PaginationCanary/PaginationList/index.js +2 -0
  62. package/__internal__/src/components/PaginationCanary/PaginationList/index.js.map +1 -0
  63. package/__internal__/src/components/PaginationCanary/PaginationNumberInput/PaginationNumberInput.css +1 -0
  64. package/__internal__/src/components/PaginationCanary/PaginationNumberInput/PaginationNumberInput.d.ts +10 -0
  65. package/__internal__/src/components/PaginationCanary/PaginationNumberInput/PaginationNumberInput.js +2 -0
  66. package/__internal__/src/components/PaginationCanary/PaginationNumberInput/PaginationNumberInput.js.map +1 -0
  67. package/__internal__/src/components/PaginationCanary/PaginationNumberInput/index.d.ts +1 -0
  68. package/__internal__/src/components/PaginationCanary/PaginationNumberInput/index.js +2 -0
  69. package/__internal__/src/components/PaginationCanary/PaginationNumberInput/index.js.map +1 -0
  70. package/__internal__/src/components/PaginationCanary/helpers.d.ts +560 -0
  71. package/__internal__/src/components/PaginationCanary/helpers.js +2 -0
  72. package/__internal__/src/components/PaginationCanary/helpers.js.map +1 -0
  73. package/__internal__/src/components/PaginationCanary/index.d.ts +2 -0
  74. package/__internal__/src/components/PaginationCanary/index.js +2 -0
  75. package/__internal__/src/components/PaginationCanary/index.js.map +1 -0
  76. package/__internal__/src/components/PaginationCanary/types.d.ts +148 -0
  77. package/__internal__/src/components/PaginationCanary/types.js +2 -0
  78. package/__internal__/src/components/PaginationCanary/types.js.map +1 -0
  79. package/__internal__/src/components/PaginationCanary/usePaginationItems.d.ts +19 -0
  80. package/__internal__/src/components/PaginationCanary/usePaginationItems.js +2 -0
  81. package/__internal__/src/components/PaginationCanary/usePaginationItems.js.map +1 -0
  82. package/__internal__/src/components/PaginationCanary/usePaginationKeys.d.ts +10 -0
  83. package/__internal__/src/components/PaginationCanary/usePaginationKeys.js +2 -0
  84. package/__internal__/src/components/PaginationCanary/usePaginationKeys.js.map +1 -0
  85. package/__internal__/src/components/Tabs/Tabs.js +1 -1
  86. package/__internal__/src/components/Tabs/Tabs.js.map +1 -1
  87. package/__internal__/src/components/Tabs/{FitModeDropdownWrapper → TabsFitModeDropdownWrapper}/TabsFitModeDropdownWrapper.d.ts +1 -1
  88. package/__internal__/src/components/Tabs/TabsFitModeDropdownWrapper/TabsFitModeDropdownWrapper.js +2 -0
  89. package/__internal__/src/components/Tabs/TabsFitModeDropdownWrapper/TabsFitModeDropdownWrapper.js.map +1 -0
  90. package/__internal__/src/components/Tabs/TabsFitModeDropdownWrapper/useFittingItems.js.map +1 -0
  91. package/__internal__/src/components/Tabs/TabsFitModeScrollWrapper/TabsFitModeScrollWrapper.js +2 -0
  92. package/__internal__/src/components/Tabs/TabsFitModeScrollWrapper/TabsFitModeScrollWrapper.js.map +1 -0
  93. package/__internal__/src/components/Tabs/TabsFitModeScrollWrapper/__test__/helpers.test.js.map +1 -0
  94. package/__internal__/src/components/Tabs/TabsLine/TabsLine.js.map +1 -0
  95. package/__internal__/src/components/Tabs/TabsListWrapper/TabsListWrapper.d.ts +2 -0
  96. package/__internal__/src/components/Tabs/TabsListWrapper/TabsListWrapper.js +2 -0
  97. package/__internal__/src/components/Tabs/TabsListWrapper/TabsListWrapper.js.map +1 -0
  98. package/__internal__/src/components/Tabs/TabsListWrapper/index.d.ts +1 -0
  99. package/__internal__/src/components/Tabs/TabsListWrapper/index.js +2 -0
  100. package/__internal__/src/components/Tabs/TabsListWrapper/index.js.map +1 -0
  101. package/__internal__/src/components/Tabs/TabsMoreItems/TabsMoreItems.css +1 -0
  102. package/__internal__/src/components/Tabs/TabsMoreItems/TabsMoreItems.js +2 -0
  103. package/__internal__/src/components/Tabs/TabsMoreItems/TabsMoreItems.js.map +1 -0
  104. package/__internal__/src/components/Tabs/TabsTab/TabsTab.js.map +1 -0
  105. package/__internal__/src/components/Tabs/helpers.d.ts +329 -329
  106. package/__internal__/src/components/Tabs/helpers.js +1 -1
  107. package/__internal__/src/components/Tabs/helpers.js.map +1 -1
  108. package/__internal__/src/components/Tabs/index.d.ts +1 -1
  109. package/__internal__/src/components/Tabs/index.js +1 -1
  110. package/__internal__/src/components/Tabs/index.js.map +1 -1
  111. package/__internal__/src/components/Tabs/types.d.ts +3 -2
  112. package/__internal__/src/components/Tabs/types.js.map +1 -1
  113. package/__internal__/src/hooks/useHideElementsInLineCanary/useHideElementsInLineCanary.js +1 -1
  114. package/__internal__/src/hooks/useHideElementsInLineCanary/useHideElementsInLineCanary.js.map +1 -1
  115. package/package.json +1 -1
  116. package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js +0 -2
  117. package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js.map +0 -1
  118. package/__internal__/src/components/Tabs/FitModeDropdownWrapper/useFittingItems.js.map +0 -1
  119. package/__internal__/src/components/Tabs/FitModeScrollWrapper/TabsFitModeScrollWrapper.js +0 -2
  120. package/__internal__/src/components/Tabs/FitModeScrollWrapper/TabsFitModeScrollWrapper.js.map +0 -1
  121. package/__internal__/src/components/Tabs/FitModeScrollWrapper/__test__/helpers.test.js.map +0 -1
  122. package/__internal__/src/components/Tabs/Line/TabsLine.js.map +0 -1
  123. package/__internal__/src/components/Tabs/MoreItems/TabsMoreItems.css +0 -1
  124. package/__internal__/src/components/Tabs/MoreItems/TabsMoreItems.js +0 -2
  125. package/__internal__/src/components/Tabs/MoreItems/TabsMoreItems.js.map +0 -1
  126. package/__internal__/src/components/Tabs/Tab/TabsTab.js.map +0 -1
  127. /package/__internal__/src/components/Tabs/{FitModeDropdownWrapper → TabsFitModeDropdownWrapper}/TabsFitModeDropdownWrapper.css +0 -0
  128. /package/__internal__/src/components/Tabs/{FitModeDropdownWrapper → TabsFitModeDropdownWrapper}/useFittingItems.d.ts +0 -0
  129. /package/__internal__/src/components/Tabs/{FitModeDropdownWrapper → TabsFitModeDropdownWrapper}/useFittingItems.js +0 -0
  130. /package/__internal__/src/components/Tabs/{FitModeScrollWrapper → TabsFitModeScrollWrapper}/TabsFitModeScrollWrapper.css +0 -0
  131. /package/__internal__/src/components/Tabs/{FitModeScrollWrapper → TabsFitModeScrollWrapper}/TabsFitModeScrollWrapper.d.ts +0 -0
  132. /package/__internal__/src/components/Tabs/{FitModeScrollWrapper → TabsFitModeScrollWrapper}/__test__/helpers.test.d.ts +0 -0
  133. /package/__internal__/src/components/Tabs/{FitModeScrollWrapper → TabsFitModeScrollWrapper}/__test__/helpers.test.js +0 -0
  134. /package/__internal__/src/components/Tabs/{Line → TabsLine}/TabsLine.css +0 -0
  135. /package/__internal__/src/components/Tabs/{Line → TabsLine}/TabsLine.d.ts +0 -0
  136. /package/__internal__/src/components/Tabs/{Line → TabsLine}/TabsLine.js +0 -0
  137. /package/__internal__/src/components/Tabs/{MoreItems → TabsMoreItems}/TabsMoreItems.d.ts +0 -0
  138. /package/__internal__/src/components/Tabs/{Tab → TabsTab}/TabsTab.css +0 -0
  139. /package/__internal__/src/components/Tabs/{Tab → TabsTab}/TabsTab.d.ts +0 -0
  140. /package/__internal__/src/components/Tabs/{Tab → TabsTab}/TabsTab.js +0 -0
@@ -1,2 +1,2 @@
1
- import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React from"react";import{TabsFitModeDropdownWrapper}from"./FitModeDropdownWrapper/TabsFitModeDropdownWrapper";import{TabsFitModeScrollWrapper}from"./FitModeScrollWrapper/TabsFitModeScrollWrapper";export var getTabsDirection=function(a){return"left"===a||"right"===a?"vertical":"horizontal"};export var getTabsWidth=function(a){return a.reduce(function(a,b){return a+b.size+b.gap},0)};export var getTabsWrapper=function(a,b){return"vertical"===a?OnlyListWrapper:"scroll"===b?TabsFitModeScrollWrapper:TabsFitModeDropdownWrapper};var defaultGetItemLabel=function(a){return a.label},defaultGetItemIcon=function(a){return a.icon},defaultGetItemLeftIcon=function(a){return a.leftIcon},defaultGetItemRightIcon=function(a){return a.rightIcon},defaultGetItemLeftSide=function(a){return a.leftSide},defaultGetItemRightSide=function(a){return a.rightSide},defaultGetItemDisable=function(a){return a.disabled},defaultGetItemAs=function(a){return a.as},defaultGetItemAttributes=function(a){return a.attributes},defaultGetItemRef=function(a){return a.ref};export var withDefaultGetters=function(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemIcon:a.getItemIcon||defaultGetItemIcon,getItemLeftIcon:a.getItemLeftIcon||defaultGetItemLeftIcon,getItemRightIcon:a.getItemRightIcon||defaultGetItemRightIcon,getItemLeftSide:a.getItemLeftSide||defaultGetItemLeftSide,getItemRightSide:a.getItemRightSide||defaultGetItemRightSide,getItemDisabled:a.getItemDisabled||defaultGetItemDisable,getItemAs:a.getItemAs||defaultGetItemAs,getItemAttributes:a.getItemAttributes||defaultGetItemAttributes,getItemRef:a.getItemRef||defaultGetItemRef})};var OnlyListWrapper=function(a){var b=a.renderItemsList;return React.createElement(React.Fragment,null,b({}))};export var getVisibleTabsRange=function(a){for(var b,c,d=a.tabsDimensions,e=a.containerWidth,f=a.containerPaddingLeft,g=a.scrollLeft,h=null,i=null,j=g,k=0;k<d.length;k++){var l=getTabsWidth(d.slice(0,k)),m=f+l,n=m>=j;n&&null===h&&(h=k);var o=m+d[k].size,p=o<=j+e;p&&(i=k)}return h=null!==(b=h)&&void 0!==b?b:0,i=Math.max(h,null!==(c=i)&&void 0!==c?c:0),[h,i]};
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{TabsFitModeDropdownWrapper}from"./TabsFitModeDropdownWrapper/TabsFitModeDropdownWrapper";import{TabsFitModeScrollWrapper}from"./TabsFitModeScrollWrapper/TabsFitModeScrollWrapper";import{TabsListWrapper}from"./TabsListWrapper";export var getTabsDirection=function(a){return"left"===a||"right"===a?"vertical":"horizontal"};export var getTabsWidth=function(a){return a.reduce(function(a,b){return a+b.size+b.gap},0)};export var getTabsWrapper=function(a,b){return"vertical"===a?TabsListWrapper:"scroll"===b?TabsFitModeScrollWrapper:TabsFitModeDropdownWrapper};var defaultGetItemLabel=function(a){return a.label},defaultGetItemIcon=function(a){return a.icon},defaultGetItemLeftIcon=function(a){return a.leftIcon},defaultGetItemRightIcon=function(a){return a.rightIcon},defaultGetItemLeftSide=function(a){return a.leftSide},defaultGetItemRightSide=function(a){return a.rightSide},defaultGetItemDisable=function(a){return a.disabled},defaultGetItemAs=function(a){return a.as},defaultGetItemAttributes=function(a){return a.attributes},defaultGetItemRef=function(a){return a.ref};export var withDefaultGetters=function(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemIcon:a.getItemIcon||defaultGetItemIcon,getItemLeftIcon:a.getItemLeftIcon||defaultGetItemLeftIcon,getItemRightIcon:a.getItemRightIcon||defaultGetItemRightIcon,getItemLeftSide:a.getItemLeftSide||defaultGetItemLeftSide,getItemRightSide:a.getItemRightSide||defaultGetItemRightSide,getItemDisabled:a.getItemDisabled||defaultGetItemDisable,getItemAs:a.getItemAs||defaultGetItemAs,getItemAttributes:a.getItemAttributes||defaultGetItemAttributes,getItemRef:a.getItemRef||defaultGetItemRef})};export var getVisibleTabsRange=function(a){for(var b,c,d=a.tabsDimensions,e=a.containerWidth,f=a.containerPaddingLeft,g=a.scrollLeft,h=null,i=null,j=g,k=0;k<d.length;k++){var l=getTabsWidth(d.slice(0,k)),m=f+l,n=m>=j;n&&null===h&&(h=k);var o=m+d[k].size,p=o<=j+e;p&&(i=k)}return h=null!==(b=h)&&void 0!==b?b:0,i=Math.max(h,null!==(c=i)&&void 0!==c?c:0),[h,i]};
2
2
  //# sourceMappingURL=helpers.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"helpers.js","names":["React","TabsFitModeDropdownWrapper","TabsFitModeScrollWrapper","getTabsDirection","linePosition","getTabsWidth","tabsDimensions","reduce","acc","td","size","gap","getTabsWrapper","tabsDirection","fitMode","OnlyListWrapper","defaultGetItemLabel","item","label","defaultGetItemIcon","icon","defaultGetItemLeftIcon","leftIcon","defaultGetItemRightIcon","rightIcon","defaultGetItemLeftSide","leftSide","defaultGetItemRightSide","rightSide","defaultGetItemDisable","disabled","defaultGetItemAs","as","defaultGetItemAttributes","attributes","defaultGetItemRef","ref","withDefaultGetters","props","getItemLabel","getItemIcon","getItemLeftIcon","getItemRightIcon","getItemLeftSide","getItemRightSide","getItemDisabled","getItemAs","getItemAttributes","getItemRef","renderItemsList","getVisibleTabsRange","containerWidth","containerPaddingLeft","scrollLeft","firstVisibleTabIdx","lastVisibleTabIdx","containerLeftSide","idx","length","previousTabsWidth","slice","tabElLeftSide","isTabLeftSideVisible","tabElRightSide","isTabRightSideVisible","Math","max"],"sources":["../../../../../src/components/Tabs/helpers.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TabsFitModeDropdownWrapper } from './FitModeDropdownWrapper/TabsFitModeDropdownWrapper';\nimport { TabsFitModeScrollWrapper } from './FitModeScrollWrapper/TabsFitModeScrollWrapper';\nimport {\n TabDimensions,\n TabsDirection,\n TabsFitModeWrapperProps,\n TabsItemDefault,\n TabsPropFitMode,\n TabsPropGetItemAs,\n TabsPropGetItemAttributes,\n TabsPropGetItemDisabled,\n TabsPropGetItemIcon,\n TabsPropGetItemLabel,\n TabsPropGetItemRef,\n TabsPropGetItemSide,\n TabsPropLinePosition,\n TabsProps,\n} from './types';\n\nexport const getTabsDirection = (\n linePosition: TabsPropLinePosition,\n): TabsDirection =>\n linePosition === 'left' || linePosition === 'right'\n ? 'vertical'\n : 'horizontal';\n\nexport const getTabsWidth = (tabsDimensions: TabDimensions[]): number =>\n tabsDimensions.reduce((acc, td) => acc + td.size + td.gap, 0);\n\nexport const getTabsWrapper = (\n tabsDirection: TabsDirection,\n fitMode: TabsPropFitMode,\n) => {\n if (tabsDirection === 'vertical') {\n return OnlyListWrapper;\n }\n\n return fitMode === 'scroll'\n ? TabsFitModeScrollWrapper\n : TabsFitModeDropdownWrapper;\n};\n\nconst defaultGetItemLabel: TabsPropGetItemLabel<TabsItemDefault> = (item) =>\n item.label;\nconst defaultGetItemIcon: TabsPropGetItemIcon<TabsItemDefault> = (item) =>\n item.icon;\nconst defaultGetItemLeftIcon: TabsPropGetItemIcon<TabsItemDefault> = (item) =>\n item.leftIcon;\nconst defaultGetItemRightIcon: TabsPropGetItemIcon<TabsItemDefault> = (item) =>\n item.rightIcon;\nconst defaultGetItemLeftSide: TabsPropGetItemSide<TabsItemDefault> = (item) =>\n item.leftSide;\nconst defaultGetItemRightSide: TabsPropGetItemSide<TabsItemDefault> = (item) =>\n item.rightSide;\nconst defaultGetItemDisable: TabsPropGetItemDisabled<TabsItemDefault> = (\n item,\n) => item.disabled;\nconst defaultGetItemAs: TabsPropGetItemAs<TabsItemDefault> = (item) => item.as;\nconst defaultGetItemAttributes: TabsPropGetItemAttributes<TabsItemDefault> = (\n item,\n) => item.attributes;\nconst defaultGetItemRef: TabsPropGetItemRef<TabsItemDefault> = (item) =>\n item.ref;\n\nexport const withDefaultGetters = (props: TabsProps) => {\n return {\n ...props,\n getItemLabel: props.getItemLabel || defaultGetItemLabel,\n getItemIcon: props.getItemIcon || defaultGetItemIcon,\n getItemLeftIcon: props.getItemLeftIcon || defaultGetItemLeftIcon,\n getItemRightIcon: props.getItemRightIcon || defaultGetItemRightIcon,\n getItemLeftSide: props.getItemLeftSide || defaultGetItemLeftSide,\n getItemRightSide: props.getItemRightSide || defaultGetItemRightSide,\n getItemDisabled: props.getItemDisabled || defaultGetItemDisable,\n getItemAs: props.getItemAs || defaultGetItemAs,\n getItemAttributes: props.getItemAttributes || defaultGetItemAttributes,\n getItemRef: props.getItemRef || defaultGetItemRef,\n };\n};\n\nconst OnlyListWrapper = <ITEM,>({\n renderItemsList,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => (\n <>{renderItemsList({})}</>\n);\n\nexport const getVisibleTabsRange = ({\n tabsDimensions,\n containerWidth,\n containerPaddingLeft,\n scrollLeft,\n}: {\n tabsDimensions: TabDimensions[];\n containerWidth: number;\n containerPaddingLeft: number;\n scrollLeft: number;\n}): [number, number] => {\n let firstVisibleTabIdx = null;\n let lastVisibleTabIdx = null;\n\n const containerLeftSide = scrollLeft;\n const containerRightSide = containerLeftSide + containerWidth;\n\n for (let idx = 0; idx < tabsDimensions.length; idx++) {\n const previousTabsWidth = getTabsWidth(tabsDimensions.slice(0, idx));\n const tabElLeftSide = containerPaddingLeft + previousTabsWidth;\n const isTabLeftSideVisible = tabElLeftSide >= containerLeftSide;\n if (isTabLeftSideVisible && firstVisibleTabIdx === null) {\n firstVisibleTabIdx = idx;\n }\n\n const tabElRightSide = tabElLeftSide + tabsDimensions[idx].size;\n const isTabRightSideVisible = tabElRightSide <= containerRightSide;\n if (isTabRightSideVisible) {\n lastVisibleTabIdx = idx;\n }\n }\n\n firstVisibleTabIdx = firstVisibleTabIdx ?? 0;\n lastVisibleTabIdx = Math.max(firstVisibleTabIdx, lastVisibleTabIdx ?? 0);\n\n return [firstVisibleTabIdx, lastVisibleTabIdx];\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"helpers.js","names":["TabsFitModeDropdownWrapper","TabsFitModeScrollWrapper","TabsListWrapper","getTabsDirection","linePosition","getTabsWidth","tabsDimensions","reduce","acc","td","size","gap","getTabsWrapper","tabsDirection","fitMode","defaultGetItemLabel","item","label","defaultGetItemIcon","icon","defaultGetItemLeftIcon","leftIcon","defaultGetItemRightIcon","rightIcon","defaultGetItemLeftSide","leftSide","defaultGetItemRightSide","rightSide","defaultGetItemDisable","disabled","defaultGetItemAs","as","defaultGetItemAttributes","attributes","defaultGetItemRef","ref","withDefaultGetters","props","getItemLabel","getItemIcon","getItemLeftIcon","getItemRightIcon","getItemLeftSide","getItemRightSide","getItemDisabled","getItemAs","getItemAttributes","getItemRef","getVisibleTabsRange","containerWidth","containerPaddingLeft","scrollLeft","firstVisibleTabIdx","lastVisibleTabIdx","containerLeftSide","idx","length","previousTabsWidth","slice","tabElLeftSide","isTabLeftSideVisible","tabElRightSide","isTabRightSideVisible","Math","max"],"sources":["../../../../../src/components/Tabs/helpers.tsx"],"sourcesContent":["import { TabsFitModeDropdownWrapper } from './TabsFitModeDropdownWrapper/TabsFitModeDropdownWrapper';\nimport { TabsFitModeScrollWrapper } from './TabsFitModeScrollWrapper/TabsFitModeScrollWrapper';\nimport { TabsListWrapper } from './TabsListWrapper';\nimport {\n TabDimensions,\n TabsDirection,\n TabsItemDefault,\n TabsPropFitMode,\n TabsPropGetItemAs,\n TabsPropGetItemAttributes,\n TabsPropGetItemDisabled,\n TabsPropGetItemIcon,\n TabsPropGetItemLabel,\n TabsPropGetItemRef,\n TabsPropGetItemSide,\n TabsPropLinePosition,\n TabsProps,\n} from './types';\n\nexport const getTabsDirection = (\n linePosition: TabsPropLinePosition,\n): TabsDirection =>\n linePosition === 'left' || linePosition === 'right'\n ? 'vertical'\n : 'horizontal';\n\nexport const getTabsWidth = (tabsDimensions: TabDimensions[]): number =>\n tabsDimensions.reduce((acc, td) => acc + td.size + td.gap, 0);\n\nexport const getTabsWrapper = (\n tabsDirection: TabsDirection,\n fitMode: TabsPropFitMode,\n) => {\n if (tabsDirection === 'vertical') {\n return TabsListWrapper;\n }\n\n return fitMode === 'scroll'\n ? TabsFitModeScrollWrapper\n : TabsFitModeDropdownWrapper;\n};\n\nconst defaultGetItemLabel: TabsPropGetItemLabel<TabsItemDefault> = (item) =>\n item.label;\nconst defaultGetItemIcon: TabsPropGetItemIcon<TabsItemDefault> = (item) =>\n item.icon;\nconst defaultGetItemLeftIcon: TabsPropGetItemIcon<TabsItemDefault> = (item) =>\n item.leftIcon;\nconst defaultGetItemRightIcon: TabsPropGetItemIcon<TabsItemDefault> = (item) =>\n item.rightIcon;\nconst defaultGetItemLeftSide: TabsPropGetItemSide<TabsItemDefault> = (item) =>\n item.leftSide;\nconst defaultGetItemRightSide: TabsPropGetItemSide<TabsItemDefault> = (item) =>\n item.rightSide;\nconst defaultGetItemDisable: TabsPropGetItemDisabled<TabsItemDefault> = (\n item,\n) => item.disabled;\nconst defaultGetItemAs: TabsPropGetItemAs<TabsItemDefault> = (item) => item.as;\nconst defaultGetItemAttributes: TabsPropGetItemAttributes<TabsItemDefault> = (\n item,\n) => item.attributes;\nconst defaultGetItemRef: TabsPropGetItemRef<TabsItemDefault> = (item) =>\n item.ref;\n\nexport const withDefaultGetters = (props: TabsProps) => {\n return {\n ...props,\n getItemLabel: props.getItemLabel || defaultGetItemLabel,\n getItemIcon: props.getItemIcon || defaultGetItemIcon,\n getItemLeftIcon: props.getItemLeftIcon || defaultGetItemLeftIcon,\n getItemRightIcon: props.getItemRightIcon || defaultGetItemRightIcon,\n getItemLeftSide: props.getItemLeftSide || defaultGetItemLeftSide,\n getItemRightSide: props.getItemRightSide || defaultGetItemRightSide,\n getItemDisabled: props.getItemDisabled || defaultGetItemDisable,\n getItemAs: props.getItemAs || defaultGetItemAs,\n getItemAttributes: props.getItemAttributes || defaultGetItemAttributes,\n getItemRef: props.getItemRef || defaultGetItemRef,\n };\n};\n\nexport const getVisibleTabsRange = ({\n tabsDimensions,\n containerWidth,\n containerPaddingLeft,\n scrollLeft,\n}: {\n tabsDimensions: TabDimensions[];\n containerWidth: number;\n containerPaddingLeft: number;\n scrollLeft: number;\n}): [number, number] => {\n let firstVisibleTabIdx = null;\n let lastVisibleTabIdx = null;\n\n const containerLeftSide = scrollLeft;\n const containerRightSide = containerLeftSide + containerWidth;\n\n for (let idx = 0; idx < tabsDimensions.length; idx++) {\n const previousTabsWidth = getTabsWidth(tabsDimensions.slice(0, idx));\n const tabElLeftSide = containerPaddingLeft + previousTabsWidth;\n const isTabLeftSideVisible = tabElLeftSide >= containerLeftSide;\n if (isTabLeftSideVisible && firstVisibleTabIdx === null) {\n firstVisibleTabIdx = idx;\n }\n\n const tabElRightSide = tabElLeftSide + tabsDimensions[idx].size;\n const isTabRightSideVisible = tabElRightSide <= containerRightSide;\n if (isTabRightSideVisible) {\n lastVisibleTabIdx = idx;\n }\n }\n\n firstVisibleTabIdx = firstVisibleTabIdx ?? 0;\n lastVisibleTabIdx = Math.max(firstVisibleTabIdx, lastVisibleTabIdx ?? 0);\n\n return [firstVisibleTabIdx, lastVisibleTabIdx];\n};\n"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
1
  export * from './Tabs';
2
- export * from './Tab/TabsTab';
2
+ export * from './TabsTab/TabsTab';
@@ -1,2 +1,2 @@
1
- export*from"./Tabs";export*from"./Tab/TabsTab";
1
+ export*from"./Tabs";export*from"./TabsTab/TabsTab";
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Tabs/index.ts"],"sourcesContent":["export * from './Tabs';\nexport * from './Tab/TabsTab';\n"],"mappings":"AAAA,oBACA"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Tabs/index.ts"],"sourcesContent":["export * from './Tabs';\nexport * from './TabsTab/TabsTab';\n"],"mappings":"AAAA,oBACA"}
@@ -43,7 +43,7 @@ export declare type TabsPropGetItemAttributes<ITEM> = (item: ITEM) => TabsItemDe
43
43
  export declare type TabsPropGetItemRef<ITEM> = (item: ITEM) => React.RefObject<HTMLElement> | undefined;
44
44
  export declare type TabsPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;
45
45
  export declare type TabsPropOnChange<ITEM> = (props: {
46
- e: React.MouseEvent;
46
+ e: React.MouseEvent | React.KeyboardEvent;
47
47
  value: ITEM;
48
48
  }) => void;
49
49
  export declare type RenderItemProps<ITEM> = {
@@ -65,6 +65,7 @@ export declare type TabsFitModeWrapperProps<ITEM> = {
65
65
  getItemChecked: TabsPropGetItemChecked<ITEM>;
66
66
  renderItem: (item: ITEM) => React.ReactNode;
67
67
  renderItemsList: RenderItemsListProp;
68
+ onChange: TabsPropOnChange<ITEM>;
68
69
  tabRefs: Array<React.RefObject<HTMLElement>>;
69
70
  size: TabsPropSize;
70
71
  };
@@ -120,7 +121,7 @@ export declare type TabsMoreItemsProps<ITEM = TabsItemDefault> = PropsWithHTMLAt
120
121
  items: ITEM[];
121
122
  renderItem: (item: ITEM, onClick: () => void, renderInDropdown?: boolean) => React.ReactNode;
122
123
  getItemLabel: TabsPropGetItemLabel<ITEM>;
123
- getItemChecked: TabsPropGetItemChecked<ITEM>;
124
+ onChange: TabsPropOnChange<ITEM>;
124
125
  height: number;
125
126
  size: TabsPropSize;
126
127
  } & React.RefAttributes<HTMLDivElement>, HTMLDivElement>;
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","names":["tabsSizes","tabsDefaultSize","tabsViews","tabsDefaultView","tabsLinePositions","tabsDefaultLinePosition","tabsFitModes","tabsDefaultFitMode"],"sources":["../../../../../src/components/Tabs/types.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { AsAttributes, AsTags } from '##/utils/types/AsTags';\nimport { PropsWithAsAttributes } from '##/utils/types/PropsWithAsAttributes';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport type TabDimensions = {\n size: number;\n gap: number;\n};\n\nexport type TabsItemDefault = {\n label: string | number;\n leftIcon?: IconComponent;\n rightIcon?: IconComponent;\n rightSide?: React.ReactNode;\n leftSide?: React.ReactNode;\n disabled?: boolean;\n as?: AsTags;\n ref?: React.RefObject<HTMLElement>;\n attributes?: AsAttributes;\n\n /**\n * @deprecated since version 4.11.0 use leftIcon\n */\n icon?: IconComponent;\n};\n\nexport const tabsSizes = ['m', 's', 'xs'] as const;\nexport type TabsPropSize = typeof tabsSizes[number];\nexport const tabsDefaultSize: TabsPropSize = tabsSizes[0];\n\nexport const tabsViews = ['bordered', 'clear'] as const;\nexport type TabsPropView = typeof tabsViews[number];\nexport const tabsDefaultView: TabsPropView = tabsViews[0];\n\nexport const tabsLinePositions = ['bottom', 'top', 'left', 'right'] as const;\nexport type TabsPropLinePosition = typeof tabsLinePositions[number];\nexport const tabsDefaultLinePosition: TabsPropLinePosition = 'bottom';\n\nexport const tabsFitModes = ['scroll', 'dropdown'] as const;\nexport type TabsPropFitMode = typeof tabsFitModes[number];\nexport const tabsDefaultFitMode: TabsPropFitMode = 'dropdown';\n\nexport type TabsPropGetItemLabel<ITEM> = (item: ITEM) => string | number;\nexport type TabsPropGetItemChecked<ITEM> = (item: ITEM) => boolean | undefined;\nexport type TabsPropGetItemIcon<ITEM> = (\n item: ITEM,\n) => IconComponent | undefined;\nexport type TabsPropGetItemSide<ITEM> = (\n item: ITEM,\n) => React.ReactNode | undefined;\n\nexport type TabsPropGetItemAs<ITEM> = (item: ITEM) => AsTags | undefined;\nexport type TabsPropGetItemAttributes<ITEM> = (\n item: ITEM,\n) => TabsItemDefault['attributes'];\nexport type TabsPropGetItemRef<ITEM> = (\n item: ITEM,\n) => React.RefObject<HTMLElement> | undefined;\n\nexport type TabsPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type TabsPropOnChange<ITEM> = (props: {\n e: React.MouseEvent;\n value: ITEM;\n}) => void;\n\nexport type RenderItemProps<ITEM> = {\n item: ITEM;\n onChange: React.MouseEventHandler;\n checked: boolean;\n size: TabsPropSize;\n iconSize?: IconPropSize;\n onlyIcon?: boolean;\n label: string;\n tabRef?: React.RefObject<HTMLElement>;\n renderInDropdown?: boolean;\n} & Omit<TabsItemDefault, 'label' | 'ref'>;\n\nexport type RenderItem<ITEM> = (\n props: RenderItemProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type TabsFitModeWrapperProps<ITEM> = {\n items: ITEM[];\n tabsDimensions: TabDimensions[];\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n getItemChecked: TabsPropGetItemChecked<ITEM>;\n renderItem: (item: ITEM) => React.ReactNode;\n renderItemsList: RenderItemsListProp;\n tabRefs: Array<React.RefObject<HTMLElement>>;\n size: TabsPropSize;\n};\n\nexport type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<\n {\n size?: TabsPropSize;\n onlyIcon?: boolean;\n view?: TabsPropView;\n iconSize?: IconPropSize;\n items: ITEM[];\n value?: ITEM | null;\n getItemLabel?: TabsPropGetItemLabel<ITEM>;\n getItemLeftIcon?: TabsPropGetItemIcon<ITEM>;\n getItemRightIcon?: TabsPropGetItemIcon<ITEM>;\n getItemLeftSide?: TabsPropGetItemSide<ITEM>;\n getItemRightSide?: TabsPropGetItemSide<ITEM>;\n getItemDisabled?: TabsPropGetItemDisabled<ITEM>;\n getItemAs?: TabsPropGetItemAs<ITEM>;\n getItemAttributes?: TabsPropGetItemAttributes<ITEM>;\n getItemRef?: TabsPropGetItemRef<ITEM>;\n children?: never;\n onChange: TabsPropOnChange<ITEM>;\n renderItem?: RenderItem<ITEM>;\n disabled?: boolean;\n\n /**\n * @deprecated since version 4.11.0 use getItemLeftIcon\n */\n getItemIcon?: TabsPropGetItemIcon<ITEM>;\n } & (\n | {\n linePosition?: Extract<TabsPropLinePosition, 'bottom' | 'top'>;\n fitMode?: 'dropdown' | 'scroll';\n }\n | {\n linePosition: Extract<TabsPropLinePosition, 'left' | 'right'>;\n fitMode?: never;\n }\n ),\n HTMLDivElement\n> &\n (ITEM extends { label: TabsItemDefault['label'] }\n ? {}\n : {\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n });\n\nexport type TabsComponent = <ITEM>(\n props: TabsProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type TabsTabProps<AS extends AsTags = 'button'> = PropsWithAsAttributes<\n {\n onChange: React.MouseEventHandler;\n checked: boolean;\n size: TabsPropSize;\n iconSize?: IconPropSize;\n onlyIcon?: boolean;\n className?: string;\n label: string;\n tabRef?: React.RefObject<HTMLElement>;\n renderInDropdown?: boolean;\n } & Omit<TabsItemDefault, 'label' | 'ref' | 'attributes'>,\n AS\n>;\n\nexport type TabsTabComponent = <AS extends AsTags = 'button'>(\n props: TabsTabProps<AS>,\n) => React.ReactElement | null;\n\nexport type TabsMoreItemsProps<ITEM = TabsItemDefault> =\n PropsWithHTMLAttributesAndRef<\n {\n items: ITEM[];\n renderItem: (\n item: ITEM,\n onClick: () => void,\n renderInDropdown?: boolean,\n ) => React.ReactNode;\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n getItemChecked: TabsPropGetItemChecked<ITEM>;\n height: number;\n size: TabsPropSize;\n } & React.RefAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n\nexport type TabsMoreItemsComponent = <ITEM>(\n props: TabsMoreItemsProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type RenderItemsListProp = (props: {\n visibleIndexes?: number[];\n withRunningLine?: boolean;\n getTabClassName?: (idx: number) => string | undefined;\n}) => React.ReactNode;\n\nexport type TabsDirection = 'horizontal' | 'vertical';\n"],"mappings":"AA8BA,MAAO,IAAMA,UAAS,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,IAAX,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,UAAS,CAAG,CAAC,UAAD,CAAa,OAAb,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,kBAAiB,CAAG,CAAC,QAAD,CAAW,KAAX,CAAkB,MAAlB,CAA0B,OAA1B,CAA1B,CAEP,MAAO,IAAMC,wBAA6C,CAAG,QAAtD,CAEP,MAAO,IAAMC,aAAY,CAAG,CAAC,QAAD,CAAW,UAAX,CAArB,CAEP,MAAO,IAAMC,mBAAmC,CAAG,UAA5C"}
1
+ {"version":3,"file":"types.js","names":["tabsSizes","tabsDefaultSize","tabsViews","tabsDefaultView","tabsLinePositions","tabsDefaultLinePosition","tabsFitModes","tabsDefaultFitMode"],"sources":["../../../../../src/components/Tabs/types.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { AsAttributes, AsTags } from '##/utils/types/AsTags';\nimport { PropsWithAsAttributes } from '##/utils/types/PropsWithAsAttributes';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport type TabDimensions = {\n size: number;\n gap: number;\n};\n\nexport type TabsItemDefault = {\n label: string | number;\n leftIcon?: IconComponent;\n rightIcon?: IconComponent;\n rightSide?: React.ReactNode;\n leftSide?: React.ReactNode;\n disabled?: boolean;\n as?: AsTags;\n ref?: React.RefObject<HTMLElement>;\n attributes?: AsAttributes;\n\n /**\n * @deprecated since version 4.11.0 use leftIcon\n */\n icon?: IconComponent;\n};\n\nexport const tabsSizes = ['m', 's', 'xs'] as const;\nexport type TabsPropSize = typeof tabsSizes[number];\nexport const tabsDefaultSize: TabsPropSize = tabsSizes[0];\n\nexport const tabsViews = ['bordered', 'clear'] as const;\nexport type TabsPropView = typeof tabsViews[number];\nexport const tabsDefaultView: TabsPropView = tabsViews[0];\n\nexport const tabsLinePositions = ['bottom', 'top', 'left', 'right'] as const;\nexport type TabsPropLinePosition = typeof tabsLinePositions[number];\nexport const tabsDefaultLinePosition: TabsPropLinePosition = 'bottom';\n\nexport const tabsFitModes = ['scroll', 'dropdown'] as const;\nexport type TabsPropFitMode = typeof tabsFitModes[number];\nexport const tabsDefaultFitMode: TabsPropFitMode = 'dropdown';\n\nexport type TabsPropGetItemLabel<ITEM> = (item: ITEM) => string | number;\nexport type TabsPropGetItemChecked<ITEM> = (item: ITEM) => boolean | undefined;\nexport type TabsPropGetItemIcon<ITEM> = (\n item: ITEM,\n) => IconComponent | undefined;\nexport type TabsPropGetItemSide<ITEM> = (\n item: ITEM,\n) => React.ReactNode | undefined;\n\nexport type TabsPropGetItemAs<ITEM> = (item: ITEM) => AsTags | undefined;\nexport type TabsPropGetItemAttributes<ITEM> = (\n item: ITEM,\n) => TabsItemDefault['attributes'];\nexport type TabsPropGetItemRef<ITEM> = (\n item: ITEM,\n) => React.RefObject<HTMLElement> | undefined;\n\nexport type TabsPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type TabsPropOnChange<ITEM> = (props: {\n e: React.MouseEvent | React.KeyboardEvent;\n value: ITEM;\n}) => void;\n\nexport type RenderItemProps<ITEM> = {\n item: ITEM;\n onChange: React.MouseEventHandler;\n checked: boolean;\n size: TabsPropSize;\n iconSize?: IconPropSize;\n onlyIcon?: boolean;\n label: string;\n tabRef?: React.RefObject<HTMLElement>;\n renderInDropdown?: boolean;\n} & Omit<TabsItemDefault, 'label' | 'ref'>;\n\nexport type RenderItem<ITEM> = (\n props: RenderItemProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type TabsFitModeWrapperProps<ITEM> = {\n items: ITEM[];\n tabsDimensions: TabDimensions[];\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n getItemChecked: TabsPropGetItemChecked<ITEM>;\n renderItem: (item: ITEM) => React.ReactNode;\n renderItemsList: RenderItemsListProp;\n onChange: TabsPropOnChange<ITEM>;\n tabRefs: Array<React.RefObject<HTMLElement>>;\n size: TabsPropSize;\n};\n\nexport type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<\n {\n size?: TabsPropSize;\n onlyIcon?: boolean;\n view?: TabsPropView;\n iconSize?: IconPropSize;\n items: ITEM[];\n value?: ITEM | null;\n getItemLabel?: TabsPropGetItemLabel<ITEM>;\n getItemLeftIcon?: TabsPropGetItemIcon<ITEM>;\n getItemRightIcon?: TabsPropGetItemIcon<ITEM>;\n getItemLeftSide?: TabsPropGetItemSide<ITEM>;\n getItemRightSide?: TabsPropGetItemSide<ITEM>;\n getItemDisabled?: TabsPropGetItemDisabled<ITEM>;\n getItemAs?: TabsPropGetItemAs<ITEM>;\n getItemAttributes?: TabsPropGetItemAttributes<ITEM>;\n getItemRef?: TabsPropGetItemRef<ITEM>;\n children?: never;\n onChange: TabsPropOnChange<ITEM>;\n renderItem?: RenderItem<ITEM>;\n disabled?: boolean;\n\n /**\n * @deprecated since version 4.11.0 use getItemLeftIcon\n */\n getItemIcon?: TabsPropGetItemIcon<ITEM>;\n } & (\n | {\n linePosition?: Extract<TabsPropLinePosition, 'bottom' | 'top'>;\n fitMode?: 'dropdown' | 'scroll';\n }\n | {\n linePosition: Extract<TabsPropLinePosition, 'left' | 'right'>;\n fitMode?: never;\n }\n ),\n HTMLDivElement\n> &\n (ITEM extends { label: TabsItemDefault['label'] }\n ? {}\n : {\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n });\n\nexport type TabsComponent = <ITEM>(\n props: TabsProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type TabsTabProps<AS extends AsTags = 'button'> = PropsWithAsAttributes<\n {\n onChange: React.MouseEventHandler;\n checked: boolean;\n size: TabsPropSize;\n iconSize?: IconPropSize;\n onlyIcon?: boolean;\n className?: string;\n label: string;\n tabRef?: React.RefObject<HTMLElement>;\n renderInDropdown?: boolean;\n } & Omit<TabsItemDefault, 'label' | 'ref' | 'attributes'>,\n AS\n>;\n\nexport type TabsTabComponent = <AS extends AsTags = 'button'>(\n props: TabsTabProps<AS>,\n) => React.ReactElement | null;\n\nexport type TabsMoreItemsProps<ITEM = TabsItemDefault> =\n PropsWithHTMLAttributesAndRef<\n {\n items: ITEM[];\n renderItem: (\n item: ITEM,\n onClick: () => void,\n renderInDropdown?: boolean,\n ) => React.ReactNode;\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n onChange: TabsPropOnChange<ITEM>;\n height: number;\n size: TabsPropSize;\n } & React.RefAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n\nexport type TabsMoreItemsComponent = <ITEM>(\n props: TabsMoreItemsProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type RenderItemsListProp = (props: {\n visibleIndexes?: number[];\n withRunningLine?: boolean;\n getTabClassName?: (idx: number) => string | undefined;\n}) => React.ReactNode;\n\nexport type TabsDirection = 'horizontal' | 'vertical';\n"],"mappings":"AA8BA,MAAO,IAAMA,UAAS,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,IAAX,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,UAAS,CAAG,CAAC,UAAD,CAAa,OAAb,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,kBAAiB,CAAG,CAAC,QAAD,CAAW,KAAX,CAAkB,MAAlB,CAA0B,OAA1B,CAA1B,CAEP,MAAO,IAAMC,wBAA6C,CAAG,QAAtD,CAEP,MAAO,IAAMC,aAAY,CAAG,CAAC,QAAD,CAAW,UAAX,CAArB,CAEP,MAAO,IAAMC,mBAAmC,CAAG,UAA5C"}
@@ -1,2 +1,2 @@
1
- import{useRef}from"react";import{useComponentSize}from"../useComponentSize";import{useRefs}from"../useRefs";import{useResizeObserved}from"../useResizeObserved";var createMap=function(a,b){return Array(a).fill(null).map(function(a,c){return c!==b})},calcElementsVisibleSize=function(a,b){for(var c=0,d=0;d<b.length;d++)c+=b[d]?a[d]:0;return c};export var useHideElementsInLine=function(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:a-1,c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:0,d=3<arguments.length&&arguments[3]!==void 0?arguments[3]:[],e=useRefs(a,d),f=useRef(null),g=useComponentSize(f).width,h=useResizeObserved(e,function(a){if(a){console.log(a.offsetWidth);var b=getComputedStyle(a),c=b.marginRight,d=b.marginLeft;return parseInt(c,10)+parseInt(d,10)+a.offsetWidth}return 0}),i=createMap(a,b);console.log(h,g);for(var j=function(a){if(h[a]&&a!==b){var d=calcElementsVisibleSize(h,i);d+c>g&&(i[a]=!1,i[b]=!0)}},k=0;k<h.length;k++)j(b-k),j(b+k);return{visibleMap:i,elementsRefs:e,parentRef:f,elementsSizes:h,parentSize:g}};
1
+ import{useRef}from"react";import{useComponentSize}from"../useComponentSize";import{useRefs}from"../useRefs";import{useResizeObserved}from"../useResizeObserved";var createMap=function(a,b){return Array(a).fill(null).map(function(a,c){return c!==b})},calcElementsVisibleSize=function(a,b){for(var c=0,d=0;d<b.length;d++)c+=b[d]?a[d]:0;return c};export var useHideElementsInLine=function(a){for(var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:a-1,c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:0,d=3<arguments.length&&arguments[3]!==void 0?arguments[3]:[],e=useRefs(a,d),f=useRef(null),g=useComponentSize(f).width,h=useResizeObserved(e,function(a){if(a){var b=getComputedStyle(a),c=b.marginRight,d=b.marginLeft;return parseInt(c,10)+parseInt(d,10)+a.offsetWidth}return 0}),i=createMap(a,b),j=function(a){if(h[a]&&a!==b){var d=calcElementsVisibleSize(h,i);d+c>g&&(i[a]=!1,i[b]=!0)}},k=0;k<h.length;k++)j(b-k),j(b+k);return{visibleMap:i,elementsRefs:e,parentRef:f,elementsSizes:h,parentSize:g}};
2
2
  //# sourceMappingURL=useHideElementsInLineCanary.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useHideElementsInLineCanary.js","names":["useRef","useComponentSize","useRefs","useResizeObserved","createMap","length","moreIndex","Array","fill","map","_","index","calcElementsVisibleSize","elementsSizes","sum","useHideElementsInLine","busy","deps","elementsRefs","parentRef","parentSize","width","el","console","log","offsetWidth","getComputedStyle","marginRight","marginLeft","parseInt","hideByIndex","elementsSize","visibleMap"],"sources":["../../../../../src/hooks/useHideElementsInLineCanary/useHideElementsInLineCanary.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport { useComponentSize } from '##/hooks/useComponentSize';\nimport { useRefs } from '##/hooks/useRefs';\nimport { useResizeObserved } from '##/hooks/useResizeObserved';\n\nconst createMap = (length: number, moreIndex: number) =>\n new Array(length).fill(null).map((_, index) => index !== moreIndex);\n\nconst calcElementsVisibleSize = (elementsSizes: number[], map: boolean[]) => {\n let sum = 0;\n for (let index = 0; index < map.length; index++) {\n sum += map[index] ? elementsSizes[index] : 0;\n }\n return sum;\n};\n\nexport const useHideElementsInLine = <\n ELEMENT extends HTMLElement = HTMLDivElement,\n PARENT extends HTMLElement = HTMLDivElement,\n>(\n length: number,\n moreIndex = length - 1,\n busy = 0,\n deps: unknown[] = [],\n) => {\n const elementsRefs = useRefs<ELEMENT>(length, deps);\n const parentRef = useRef<PARENT>(null);\n const parentSize = useComponentSize(parentRef).width;\n const elementsSizes = useResizeObserved(elementsRefs, (el) => {\n if (el) {\n console.log(el.offsetWidth);\n const { marginRight, marginLeft } = getComputedStyle(el);\n return (\n parseInt(marginRight, 10) + parseInt(marginLeft, 10) + el.offsetWidth\n );\n }\n\n return 0;\n });\n\n const map = createMap(length, moreIndex);\n\n console.log(elementsSizes, parentSize);\n\n const hideByIndex = (index: number) => {\n if (!elementsSizes[index] || index === moreIndex) {\n return;\n }\n\n const elementsSize = calcElementsVisibleSize(elementsSizes, map);\n\n if (elementsSize + busy > parentSize) {\n map[index] = false;\n map[moreIndex] = true;\n }\n };\n\n for (let index = 0; index < elementsSizes.length; index++) {\n // Скрываем элемент слева от `more`\n hideByIndex(moreIndex - index);\n // Скрываем элемент справа от `more`\n hideByIndex(moreIndex + index);\n }\n\n return {\n visibleMap: map,\n elementsRefs,\n parentRef,\n elementsSizes,\n parentSize,\n };\n};\n"],"mappings":"AAAA,OAASA,MAAT,KAAuB,OAAvB,CAEA,OAASC,gBAAT,2BACA,OAASC,OAAT,kBACA,OAASC,iBAAT,4B,GAEMC,UAAS,CAAG,SAACC,CAAD,CAAiBC,CAAjB,QACZC,MAAJ,CAAUF,CAAV,EAAkBG,IAAlB,CAAuB,IAAvB,EAA6BC,GAA7B,CAAiC,SAACC,CAAD,CAAIC,CAAJ,QAAcA,EAAK,GAAKL,CAAxB,CAAjC,CADgB,C,CAGZM,uBAAuB,CAAG,SAACC,CAAD,CAA0BJ,CAA1B,CAA6C,CAE3E,OADIK,EAAG,CAAG,CACV,CAASH,CAAK,CAAG,CAAjB,CAAoBA,CAAK,CAAGF,CAAG,CAACJ,MAAhC,CAAwCM,CAAK,EAA7C,CACEG,CAAG,EAAIL,CAAG,CAACE,CAAD,CAAH,CAAaE,CAAa,CAACF,CAAD,CAA1B,CAAoC,CAA3C,CAEF,MAAOG,EACR,C,CAED,MAAO,IAAMC,sBAAqB,CAAG,SAInCV,CAJmC,CAQhC,IAHHC,EAGG,wDAHSD,CAAM,CAAG,CAGlB,CAFHW,CAEG,wDAFI,CAEJ,CADHC,CACG,wDADe,EACf,CACGC,CAAY,CAAGhB,OAAO,CAAUG,CAAV,CAAkBY,CAAlB,CADzB,CAEGE,CAAS,CAAGnB,MAAM,CAAS,IAAT,CAFrB,CAGGoB,CAAU,CAAGnB,gBAAgB,CAACkB,CAAD,CAAhB,CAA4BE,KAH5C,CAIGR,CAAa,CAAGV,iBAAiB,CAACe,CAAD,CAAe,SAACI,CAAD,CAAQ,CAC5D,GAAIA,CAAJ,CAAQ,CACNC,OAAO,CAACC,GAAR,CAAYF,CAAE,CAACG,WAAf,CADM,CAEN,MAAoCC,gBAAgB,CAACJ,CAAD,CAApD,CAAQK,CAAR,GAAQA,WAAR,CAAqBC,CAArB,GAAqBA,UAArB,CACA,MACEC,SAAQ,CAACF,CAAD,CAAc,EAAd,CAAR,CAA4BE,QAAQ,CAACD,CAAD,CAAa,EAAb,CAApC,CAAuDN,CAAE,CAACG,WAE7D,CAED,MAAO,EACR,CAVsC,CAJpC,CAgBGhB,CAAG,CAAGL,SAAS,CAACC,CAAD,CAASC,CAAT,CAhBlB,CAkBHiB,OAAO,CAACC,GAAR,CAAYX,CAAZ,CAA2BO,CAA3B,CAlBG,CAiCH,OAbMU,EAAW,CAAG,SAACnB,CAAD,CAAmB,CACrC,GAAKE,CAAa,CAACF,CAAD,CAAd,EAAyBA,CAAK,GAAKL,CAAvC,EAIA,GAAMyB,EAAY,CAAGnB,uBAAuB,CAACC,CAAD,CAAgBJ,CAAhB,CAA5C,CAEIsB,CAAY,CAAGf,CAAf,CAAsBI,CAN1B,GAOEX,CAAG,CAACE,CAAD,CAAH,GAPF,CAQEF,CAAG,CAACH,CAAD,CAAH,GARF,EAUD,CAED,CAASK,CAAK,CAAG,CAAjB,CAAoBA,CAAK,CAAGE,CAAa,CAACR,MAA1C,CAAkDM,CAAK,EAAvD,CAEEmB,CAAW,CAACxB,CAAS,CAAGK,CAAb,CAFb,CAIEmB,CAAW,CAACxB,CAAS,CAAGK,CAAb,CAJb,CAOA,MAAO,CACLqB,UAAU,CAAEvB,CADP,CAELS,YAAY,CAAZA,CAFK,CAGLC,SAAS,CAATA,CAHK,CAILN,aAAa,CAAbA,CAJK,CAKLO,UAAU,CAAVA,CALK,CAOR,CAvDM"}
1
+ {"version":3,"file":"useHideElementsInLineCanary.js","names":["useRef","useComponentSize","useRefs","useResizeObserved","createMap","length","moreIndex","Array","fill","map","_","index","calcElementsVisibleSize","elementsSizes","sum","useHideElementsInLine","busy","deps","elementsRefs","parentRef","parentSize","width","el","getComputedStyle","marginRight","marginLeft","parseInt","offsetWidth","hideByIndex","elementsSize","visibleMap"],"sources":["../../../../../src/hooks/useHideElementsInLineCanary/useHideElementsInLineCanary.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport { useComponentSize } from '##/hooks/useComponentSize';\nimport { useRefs } from '##/hooks/useRefs';\nimport { useResizeObserved } from '##/hooks/useResizeObserved';\n\nconst createMap = (length: number, moreIndex: number) =>\n new Array(length).fill(null).map((_, index) => index !== moreIndex);\n\nconst calcElementsVisibleSize = (elementsSizes: number[], map: boolean[]) => {\n let sum = 0;\n for (let index = 0; index < map.length; index++) {\n sum += map[index] ? elementsSizes[index] : 0;\n }\n return sum;\n};\n\nexport const useHideElementsInLine = <\n ELEMENT extends HTMLElement = HTMLDivElement,\n PARENT extends HTMLElement = HTMLDivElement,\n>(\n length: number,\n moreIndex = length - 1,\n busy = 0,\n deps: unknown[] = [],\n) => {\n const elementsRefs = useRefs<ELEMENT>(length, deps);\n const parentRef = useRef<PARENT>(null);\n const parentSize = useComponentSize(parentRef).width;\n const elementsSizes = useResizeObserved(elementsRefs, (el) => {\n if (el) {\n const { marginRight, marginLeft } = getComputedStyle(el);\n return (\n parseInt(marginRight, 10) + parseInt(marginLeft, 10) + el.offsetWidth\n );\n }\n\n return 0;\n });\n\n const map = createMap(length, moreIndex);\n\n const hideByIndex = (index: number) => {\n if (!elementsSizes[index] || index === moreIndex) {\n return;\n }\n\n const elementsSize = calcElementsVisibleSize(elementsSizes, map);\n\n if (elementsSize + busy > parentSize) {\n map[index] = false;\n map[moreIndex] = true;\n }\n };\n\n for (let index = 0; index < elementsSizes.length; index++) {\n // Скрываем элемент слева от `more`\n hideByIndex(moreIndex - index);\n // Скрываем элемент справа от `more`\n hideByIndex(moreIndex + index);\n }\n\n return {\n visibleMap: map,\n elementsRefs,\n parentRef,\n elementsSizes,\n parentSize,\n };\n};\n"],"mappings":"AAAA,OAASA,MAAT,KAAuB,OAAvB,CAEA,OAASC,gBAAT,2BACA,OAASC,OAAT,kBACA,OAASC,iBAAT,4B,GAEMC,UAAS,CAAG,SAACC,CAAD,CAAiBC,CAAjB,QACZC,MAAJ,CAAUF,CAAV,EAAkBG,IAAlB,CAAuB,IAAvB,EAA6BC,GAA7B,CAAiC,SAACC,CAAD,CAAIC,CAAJ,QAAcA,EAAK,GAAKL,CAAxB,CAAjC,CADgB,C,CAGZM,uBAAuB,CAAG,SAACC,CAAD,CAA0BJ,CAA1B,CAA6C,CAE3E,OADIK,EAAG,CAAG,CACV,CAASH,CAAK,CAAG,CAAjB,CAAoBA,CAAK,CAAGF,CAAG,CAACJ,MAAhC,CAAwCM,CAAK,EAA7C,CACEG,CAAG,EAAIL,CAAG,CAACE,CAAD,CAAH,CAAaE,CAAa,CAACF,CAAD,CAA1B,CAAoC,CAA3C,CAEF,MAAOG,EACR,C,CAED,MAAO,IAAMC,sBAAqB,CAAG,SAInCV,CAJmC,CAQhC,CA8BH,OAjCAC,EAiCA,wDAjCYD,CAAM,CAAG,CAiCrB,CAhCAW,CAgCA,wDAhCO,CAgCP,CA/BAC,CA+BA,wDA/BkB,EA+BlB,CA7BMC,CAAY,CAAGhB,OAAO,CAAUG,CAAV,CAAkBY,CAAlB,CA6B5B,CA5BME,CAAS,CAAGnB,MAAM,CAAS,IAAT,CA4BxB,CA3BMoB,CAAU,CAAGnB,gBAAgB,CAACkB,CAAD,CAAhB,CAA4BE,KA2B/C,CA1BMR,CAAa,CAAGV,iBAAiB,CAACe,CAAD,CAAe,SAACI,CAAD,CAAQ,CAC5D,GAAIA,CAAJ,CAAQ,CACN,MAAoCC,gBAAgB,CAACD,CAAD,CAApD,CAAQE,CAAR,GAAQA,WAAR,CAAqBC,CAArB,GAAqBA,UAArB,CACA,MACEC,SAAQ,CAACF,CAAD,CAAc,EAAd,CAAR,CAA4BE,QAAQ,CAACD,CAAD,CAAa,EAAb,CAApC,CAAuDH,CAAE,CAACK,WAE7D,CAED,MAAO,EACR,CATsC,CA0BvC,CAfMlB,CAAG,CAAGL,SAAS,CAACC,CAAD,CAASC,CAAT,CAerB,CAbMsB,CAAW,CAAG,SAACjB,CAAD,CAAmB,CACrC,GAAKE,CAAa,CAACF,CAAD,CAAd,EAAyBA,CAAK,GAAKL,CAAvC,EAIA,GAAMuB,EAAY,CAAGjB,uBAAuB,CAACC,CAAD,CAAgBJ,CAAhB,CAA5C,CAEIoB,CAAY,CAAGb,CAAf,CAAsBI,CAN1B,GAOEX,CAAG,CAACE,CAAD,CAAH,GAPF,CAQEF,CAAG,CAACH,CAAD,CAAH,GARF,EAUD,CAED,CAASK,CAAK,CAAG,CAAjB,CAAoBA,CAAK,CAAGE,CAAa,CAACR,MAA1C,CAAkDM,CAAK,EAAvD,CAEEiB,CAAW,CAACtB,CAAS,CAAGK,CAAb,CAFb,CAIEiB,CAAW,CAACtB,CAAS,CAAGK,CAAb,CAJb,CAOA,MAAO,CACLmB,UAAU,CAAErB,CADP,CAELS,YAAY,CAAZA,CAFK,CAGLC,SAAS,CAATA,CAHK,CAILN,aAAa,CAAbA,CAJK,CAKLO,UAAU,CAAVA,CALK,CAOR,CApDM"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@consta/uikit",
3
- "version": "4.32.0",
3
+ "version": "4.33.1",
4
4
  "keywords": [
5
5
  "ui-kit",
6
6
  "design-system",
@@ -1,2 +0,0 @@
1
- import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import"./TabsFitModeDropdownWrapper.css";import React from"react";import{cn}from"../../../utils/bem";import{getTabsWidth}from"../helpers";import{TabsMoreItems}from"../MoreItems/TabsMoreItems";import{useFittingItems}from"./useFittingItems";var cnTabsFitModeDropdownWrapper=cn("TabsFitModeDropdownWrapper");export var TabsFitModeDropdownWrapper=function(a){var b=a.items,c=a.tabsDimensions,d=a.tabRefs,e=a.getItemLabel,f=a.getItemChecked,g=a.renderItem,h=a.renderItemsList,i=a.size,j=React.useRef(null),k=React.useRef(null),l=b.findIndex(f),m=useFittingItems({tabsDimensions:c,containerRef:j,moreItemsRef:k,activeIndex:l}),n=m.visibleIndexes,o=m.isItemHidden,p=b.filter(function(a,b){return o(b)}),q=React.useMemo(function(){return d.length?Math.max.apply(Math,_toConsumableArray(d.map(function(a){var b,c;return null!==(b=null===(c=a.current)||void 0===c?void 0:c.offsetHeight)&&void 0!==b?b:0}))):0},[c]),r=getTabsWidth(c.filter(function(a,b){return!o(b)}));return React.createElement("div",{ref:j,className:cnTabsFitModeDropdownWrapper(),style:{height:q}},React.createElement("div",{className:cnTabsFitModeDropdownWrapper("Tabs")},h({visibleIndexes:n,withRunningLine:!0,getTabClassName:function getTabClassName(a){return cnTabsFitModeDropdownWrapper("Tab",{hidden:o(a)})}})),React.createElement("div",{ref:k,className:cnTabsFitModeDropdownWrapper("MoreItems",{hidden:!p.length}),style:{left:p.length?r:void 0}},React.createElement(TabsMoreItems,{items:p,renderItem:g,getItemLabel:e,getItemChecked:f,height:q,size:i})))};
2
- //# sourceMappingURL=TabsFitModeDropdownWrapper.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabsFitModeDropdownWrapper.js","names":["React","cn","getTabsWidth","TabsMoreItems","useFittingItems","cnTabsFitModeDropdownWrapper","TabsFitModeDropdownWrapper","items","tabsDimensions","tabRefs","getItemLabel","getItemChecked","renderItem","renderItemsList","size","ref","useRef","moreItemsRef","activeIndex","findIndex","containerRef","visibleIndexes","isItemHidden","hiddenItems","filter","_item","idx","maxTabHeight","useMemo","length","Math","max","map","tabRef","current","offsetHeight","visibleTabsWidth","_td","height","withRunningLine","getTabClassName","hidden","left"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.tsx"],"sourcesContent":["import './TabsFitModeDropdownWrapper.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getTabsWidth } from '../helpers';\nimport { TabsMoreItems } from '../MoreItems/TabsMoreItems';\nimport { TabsFitModeWrapperProps } from '../types';\nimport { useFittingItems } from './useFittingItems';\n\nconst cnTabsFitModeDropdownWrapper = cn('TabsFitModeDropdownWrapper');\n\nexport const TabsFitModeDropdownWrapper = <ITEM,>({\n items,\n tabsDimensions,\n tabRefs,\n getItemLabel,\n getItemChecked,\n renderItem,\n renderItemsList,\n size,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => {\n const ref = React.useRef<HTMLDivElement>(null);\n const moreItemsRef = React.useRef<HTMLDivElement>(null);\n\n const activeIndex = items.findIndex(getItemChecked);\n\n const { visibleIndexes, isItemHidden } = useFittingItems({\n tabsDimensions,\n containerRef: ref,\n moreItemsRef,\n activeIndex,\n });\n\n const hiddenItems = items.filter((_item, idx) => isItemHidden(idx));\n const maxTabHeight: number = React.useMemo(() => {\n if (!tabRefs.length) {\n return 0;\n }\n return Math.max(\n ...tabRefs.map((tabRef) => tabRef.current?.offsetHeight ?? 0),\n );\n }, [tabsDimensions]);\n\n const visibleTabsWidth = getTabsWidth(\n tabsDimensions.filter((_td, idx) => !isItemHidden(idx)),\n );\n\n return (\n <div\n ref={ref}\n className={cnTabsFitModeDropdownWrapper()}\n style={{ height: maxTabHeight }}\n >\n <div className={cnTabsFitModeDropdownWrapper('Tabs')}>\n {renderItemsList({\n visibleIndexes,\n withRunningLine: true,\n getTabClassName: (idx) =>\n cnTabsFitModeDropdownWrapper('Tab', { hidden: isItemHidden(idx) }),\n })}\n </div>\n <div\n ref={moreItemsRef}\n className={cnTabsFitModeDropdownWrapper('MoreItems', {\n hidden: !hiddenItems.length,\n })}\n style={{\n /* В Safari скрытые табы с абсолютом продолжают растягивать контейнер,\n поэтому приходится позиционировать кнопку абсолютом */\n left: hiddenItems.length ? visibleTabsWidth : undefined,\n }}\n >\n <TabsMoreItems\n items={hiddenItems}\n renderItem={renderItem}\n getItemLabel={getItemLabel}\n getItemChecked={getItemChecked}\n height={maxTabHeight}\n size={size}\n />\n </div>\n </div>\n );\n};\n"],"mappings":"yEAAA,yCAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,YAAT,kBACA,OAASC,aAAT,kCAEA,OAASC,eAAT,yBAEA,GAAMC,6BAA4B,CAAGJ,EAAE,CAAC,4BAAD,CAAvC,CAEA,MAAO,IAAMK,2BAA0B,CAAG,WASsB,IAR9DC,EAQ8D,GAR9DA,KAQ8D,CAP9DC,CAO8D,GAP9DA,cAO8D,CAN9DC,CAM8D,GAN9DA,OAM8D,CAL9DC,CAK8D,GAL9DA,YAK8D,CAJ9DC,CAI8D,GAJ9DA,cAI8D,CAH9DC,CAG8D,GAH9DA,UAG8D,CAF9DC,CAE8D,GAF9DA,eAE8D,CAD9DC,CAC8D,GAD9DA,IAC8D,CACxDC,CAAG,CAAGf,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CADkD,CAExDC,CAAY,CAAGjB,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CAFyC,CAIxDE,CAAW,CAAGX,CAAK,CAACY,SAAN,CAAgBR,CAAhB,CAJ0C,GAMrBP,eAAe,CAAC,CACvDI,cAAc,CAAdA,CADuD,CAEvDY,YAAY,CAAEL,CAFyC,CAGvDE,YAAY,CAAZA,CAHuD,CAIvDC,WAAW,CAAXA,CAJuD,CAAD,CANM,CAMtDG,CANsD,GAMtDA,cANsD,CAMtCC,CANsC,GAMtCA,YANsC,CAaxDC,CAAW,CAAGhB,CAAK,CAACiB,MAAN,CAAa,SAACC,CAAD,CAAQC,CAAR,QAAgBJ,EAAY,CAACI,CAAD,CAA5B,CAAb,CAb0C,CAcxDC,CAAoB,CAAG3B,KAAK,CAAC4B,OAAN,CAAc,UAAM,OAC1CnB,EAAO,CAACoB,MADkC,CAIxCC,IAAI,CAACC,GAAL,OAAAD,IAAI,oBACNrB,CAAO,CAACuB,GAAR,CAAY,SAACC,CAAD,qCAAYA,CAAM,CAACC,OAAnB,qBAAY,EAAgBC,YAA5B,gBAA4C,CAA5C,CAAZ,CADM,EAJoC,CAEtC,CAKV,CAP4B,CAO1B,CAAC3B,CAAD,CAP0B,CAdiC,CAuBxD4B,CAAgB,CAAGlC,YAAY,CACnCM,CAAc,CAACgB,MAAf,CAAsB,SAACa,CAAD,CAAMX,CAAN,QAAc,CAACJ,CAAY,CAACI,CAAD,CAA3B,CAAtB,CADmC,CAvByB,CA2B9D,MACE,4BACE,GAAG,CAAEX,CADP,CAEE,SAAS,CAAEV,4BAA4B,EAFzC,CAGE,KAAK,CAAE,CAAEiC,MAAM,CAAEX,CAAV,CAHT,EAKE,2BAAK,SAAS,CAAEtB,4BAA4B,CAAC,MAAD,CAA5C,EACGQ,CAAe,CAAC,CACfQ,cAAc,CAAdA,CADe,CAEfkB,eAAe,GAFA,CAGfC,eAAe,CAAE,yBAACd,CAAD,QACfrB,6BAA4B,CAAC,KAAD,CAAQ,CAAEoC,MAAM,CAAEnB,CAAY,CAACI,CAAD,CAAtB,CAAR,CADb,CAHF,CAAD,CADlB,CALF,CAaE,2BACE,GAAG,CAAET,CADP,CAEE,SAAS,CAAEZ,4BAA4B,CAAC,WAAD,CAAc,CACnDoC,MAAM,CAAE,CAAClB,CAAW,CAACM,MAD8B,CAAd,CAFzC,CAKE,KAAK,CAAE,CAGLa,IAAI,CAAEnB,CAAW,CAACM,MAAZ,CAAqBO,CAArB,OAHD,CALT,EAWE,oBAAC,aAAD,EACE,KAAK,CAAEb,CADT,CAEE,UAAU,CAAEX,CAFd,CAGE,YAAY,CAAEF,CAHhB,CAIE,cAAc,CAAEC,CAJlB,CAKE,MAAM,CAAEgB,CALV,CAME,IAAI,CAAEb,CANR,EAXF,CAbF,CAmCH,CAxEM"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useFittingItems.js","names":["React","useMemo","useComponentSize","useFittingItems","tabsDimensions","containerRef","moreItemsRef","activeIndex","containerWidth","width","moreItemsWidth","visibleIndexes","getFittingItems","isItemHidden","useCallback","idx","includes","totalWidth","Array","from","length","map","_el","index","size","gap","arr","entries","tabDimensions","isLastItem","push"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/useFittingItems.ts"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { useComponentSize } from '../../../hooks/useComponentSize/useComponentSize';\nimport { TabDimensions } from '../types';\n\nexport const useFittingItems = ({\n tabsDimensions,\n containerRef,\n moreItemsRef,\n activeIndex,\n}: {\n tabsDimensions: TabDimensions[];\n containerRef: React.RefObject<HTMLElement>;\n moreItemsRef: React.RefObject<HTMLElement>;\n activeIndex?: number;\n}): {\n visibleIndexes: number[];\n isItemHidden: (idx: number) => boolean;\n} => {\n const { width: containerWidth } = useComponentSize(containerRef);\n const { width: moreItemsWidth } = useComponentSize(moreItemsRef);\n\n const visibleIndexes = useMemo(\n () =>\n getFittingItems(\n tabsDimensions,\n containerWidth,\n moreItemsWidth,\n activeIndex,\n ),\n [tabsDimensions, containerWidth, moreItemsWidth, activeIndex],\n );\n\n return {\n visibleIndexes,\n isItemHidden: React.useCallback(\n (idx) => !visibleIndexes.includes(idx),\n [visibleIndexes],\n ),\n };\n};\n\nexport const getFittingItems = (\n tabsDimensions: TabDimensions[],\n totalWidth: number,\n moreItemsWidth: number,\n activeIndex?: number,\n): number[] => {\n if (!totalWidth) {\n return Array.from<number>({ length: tabsDimensions.length }).map(\n (_el, index) => index,\n );\n }\n let width =\n typeof activeIndex === 'number' && activeIndex > -1\n ? tabsDimensions[activeIndex].size + tabsDimensions[activeIndex].gap\n : 0;\n const arr: number[] = [];\n for (const [idx, tabDimensions] of tabsDimensions.entries()) {\n if (idx !== activeIndex) {\n const isLastItem = idx === tabsDimensions.length - 1;\n width += tabDimensions.size + (isLastItem ? 0 : tabDimensions.gap);\n if (width + moreItemsWidth > totalWidth) {\n if (activeIndex && !arr.includes(activeIndex)) {\n arr.push(activeIndex);\n }\n return arr;\n }\n arr.push(idx);\n } else {\n arr.push(activeIndex);\n }\n }\n\n return Array.from<number>({ length: tabsDimensions.length }).map(\n (_el, index) => index,\n );\n};\n"],"mappings":"stCAAA,MAAOA,MAAP,EAAgBC,OAAhB,KAA+B,OAA/B,CAEA,OAASC,gBAAT,wDAGA,MAAO,IAAMC,gBAAe,CAAG,WAa1B,IAZHC,EAYG,GAZHA,cAYG,CAXHC,CAWG,GAXHA,YAWG,CAVHC,CAUG,GAVHA,YAUG,CATHC,CASG,GATHA,WASG,GAC+BL,gBAAgB,CAACG,CAAD,CAD/C,CACYG,CADZ,GACKC,KADL,GAE+BP,gBAAgB,CAACI,CAAD,CAF/C,CAEYI,CAFZ,GAEKD,KAFL,CAIGE,CAAc,CAAGV,OAAO,CAC5B,iBACEW,gBAAe,CACbR,CADa,CAEbI,CAFa,CAGbE,CAHa,CAIbH,CAJa,CADjB,CAD4B,CAQ5B,CAACH,CAAD,CAAiBI,CAAjB,CAAiCE,CAAjC,CAAiDH,CAAjD,CAR4B,CAJ3B,CAeH,MAAO,CACLI,cAAc,CAAdA,CADK,CAELE,YAAY,CAAEb,KAAK,CAACc,WAAN,CACZ,SAACC,CAAD,QAAS,CAACJ,CAAc,CAACK,QAAf,CAAwBD,CAAxB,CAAV,CADY,CAEZ,CAACJ,CAAD,CAFY,CAFT,CAOR,CAnCM,CAqCP,MAAO,IAAMC,gBAAe,CAAG,SAC7BR,CAD6B,CAE7Ba,CAF6B,CAG7BP,CAH6B,CAI7BH,CAJ6B,CAKhB,CACb,GAAI,CAACU,CAAL,CACE,MAAOC,MAAK,CAACC,IAAN,CAAmB,CAAEC,MAAM,CAAEhB,CAAc,CAACgB,MAAzB,CAAnB,EAAsDC,GAAtD,CACL,SAACC,CAAD,CAAMC,CAAN,QAAgBA,EAAhB,CADK,CAAP,CAFW,MAMTd,CAAK,CACgB,QAAvB,QAAOF,EAAP,EAAiD,CAAC,CAAf,CAAAA,CAAnC,CACIH,CAAc,CAACG,CAAD,CAAd,CAA4BiB,IAA5B,CAAmCpB,CAAc,CAACG,CAAD,CAAd,CAA4BkB,GADnE,CAEI,CATO,CAUPC,CAAa,CAAG,EAVT,8BAWsBtB,CAAc,CAACuB,OAAf,EAXtB,MAWb,2BAA6D,iCAAjDZ,CAAiD,MAA5Ca,CAA4C,MAC3D,GAAIb,CAAG,GAAKR,CAAZ,CAAyB,CACvB,GAAMsB,EAAU,CAAGd,CAAG,GAAKX,CAAc,CAACgB,MAAf,CAAwB,CAAnD,CAEA,GADAX,CAAK,EAAImB,CAAa,CAACJ,IAAd,EAAsBK,CAAU,CAAG,CAAH,CAAOD,CAAa,CAACH,GAArD,CACT,CAAIhB,CAAK,CAAGC,CAAR,CAAyBO,CAA7B,CAIE,MAHIV,EAAW,EAAI,CAACmB,CAAG,CAACV,QAAJ,CAAaT,CAAb,CAGpB,EAFEmB,CAAG,CAACI,IAAJ,CAASvB,CAAT,CAEF,CAAOmB,CAAP,CAEFA,CAAG,CAACI,IAAJ,CAASf,CAAT,CACD,CAVD,IAWEW,EAAG,CAACI,IAAJ,CAASvB,CAAT,CAEH,CAzBY,+BA2Bb,MAAOW,MAAK,CAACC,IAAN,CAAmB,CAAEC,MAAM,CAAEhB,CAAc,CAACgB,MAAzB,CAAnB,EAAsDC,GAAtD,CACL,SAACC,CAAD,CAAMC,CAAN,QAAgBA,EAAhB,CADK,CAGR,CAnCM"}
@@ -1,2 +0,0 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"./TabsFitModeScrollWrapper.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React from"react";import{useResizeObserved}from"../../../hooks/useResizeObserved/useResizeObserved";import{useScrollPosition}from"../../../hooks/useScrollPosition/useScrollPosition";import{cn}from"../../../utils/bem";import{Button}from"../../Button/Button";import{getTabsWidth,getVisibleTabsRange}from"../helpers";var cnTabsFitModeScrollWrapper=cn("TabsFitModeScrollWrapper");export var TabsFitModeScrollWrapper=function(a){var b=a.tabsDimensions,c=a.items,d=a.renderItemsList,e=a.getItemChecked,f=React.useRef(null),g=useResizeObserved(React.useMemo(function(){return[f]},[f]),function(a){var b;return{isScrollable:a&&a.scrollWidth>a.offsetWidth,width:null!==(b=null===a||void 0===a?void 0:a.offsetWidth)&&void 0!==b?b:0,paddingLeft:a?parseInt(getComputedStyle(a).paddingLeft,10):0}}),h=_slicedToArray(g,1),i=h[0],j=i.isScrollable,k=i.width,l=i.paddingLeft,m=useScrollPosition(f.current),n=m.scrollLeft,o=getVisibleTabsRange({tabsDimensions:b,containerWidth:k,containerPaddingLeft:l,scrollLeft:n}),p=_slicedToArray(o,2),q=p[0],r=p[1],s=function(a){if(!(a>=q&&a<=r)){var c,d=getTabsWidth(b.slice(0,a));null===(c=f.current)||void 0===c?void 0:c.scrollTo({left:d,behavior:"smooth"})}},t=function(){s(q-1)},u=function(){s(r+1)},v=c.findIndex(e);return React.useEffect(function(){j&&s(v)},[v,j]),React.createElement("div",{className:cnTabsFitModeScrollWrapper()},j&&React.createElement(React.Fragment,null,["prev","next"].map(function(a){return React.createElement(Button,{key:a,view:"clear",type:"button",size:"xs",onlyIcon:!0,disabled:"prev"===a?0===q:r===c.length-1,iconLeft:"prev"===a?IconArrowLeft:IconArrowRight,className:cnTabsFitModeScrollWrapper("Button",{to:a}),onClick:"prev"===a?t:u})})),React.createElement("div",{className:cnTabsFitModeScrollWrapper("Content"),ref:f},d({visibleIndexes:Array.from(Array(c.length).keys()),getTabClassName:function getTabClassName(a){return cnTabsFitModeScrollWrapper("Tab",{noMargin:a===c.length-1})}})))};
2
- //# sourceMappingURL=TabsFitModeScrollWrapper.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabsFitModeScrollWrapper.js","names":["IconArrowLeft","IconArrowRight","React","useResizeObserved","useScrollPosition","cn","Button","getTabsWidth","getVisibleTabsRange","cnTabsFitModeScrollWrapper","TabsFitModeScrollWrapper","tabsDimensions","items","renderItemsList","getItemChecked","scrollContainerRef","useRef","useMemo","el","isScrollable","scrollWidth","offsetWidth","width","paddingLeft","parseInt","getComputedStyle","containerWidth","containerPaddingLeft","current","scrollLeft","firstVisibleTabIdx","lastVisibleTabIdx","scrollTabIntoView","idx","previousTabsWidth","slice","scrollTo","left","behavior","scrollPrev","scrollNext","checkedTabIdx","findIndex","useEffect","map","buttonTo","length","to","visibleIndexes","Array","from","keys","getTabClassName","noMargin"],"sources":["../../../../../../src/components/Tabs/FitModeScrollWrapper/TabsFitModeScrollWrapper.tsx"],"sourcesContent":["import './TabsFitModeScrollWrapper.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React from 'react';\n\nimport { useResizeObserved } from '../../../hooks/useResizeObserved/useResizeObserved';\nimport { useScrollPosition } from '../../../hooks/useScrollPosition/useScrollPosition';\nimport { cn } from '../../../utils/bem';\nimport { Button } from '../../Button/Button';\nimport { getTabsWidth, getVisibleTabsRange } from '../helpers';\nimport { TabsFitModeWrapperProps } from '../types';\n\nconst cnTabsFitModeScrollWrapper = cn('TabsFitModeScrollWrapper');\n\nexport const TabsFitModeScrollWrapper = <ITEM,>({\n tabsDimensions,\n items,\n renderItemsList,\n getItemChecked,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => {\n const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n const [\n { isScrollable, width: containerWidth, paddingLeft: containerPaddingLeft },\n ] = useResizeObserved(\n React.useMemo(() => [scrollContainerRef], [scrollContainerRef]),\n (el) => ({\n isScrollable: el && el.scrollWidth > el.offsetWidth,\n width: el?.offsetWidth ?? 0,\n paddingLeft: el ? parseInt(getComputedStyle(el).paddingLeft, 10) : 0,\n }),\n );\n const { scrollLeft } = useScrollPosition(scrollContainerRef.current);\n\n const [firstVisibleTabIdx, lastVisibleTabIdx] = getVisibleTabsRange({\n tabsDimensions,\n containerWidth,\n containerPaddingLeft,\n scrollLeft,\n });\n\n const scrollTabIntoView = (idx: number) => {\n const tabIsVisible = idx >= firstVisibleTabIdx && idx <= lastVisibleTabIdx;\n\n if (!tabIsVisible) {\n const previousTabsWidth = getTabsWidth(tabsDimensions.slice(0, idx));\n scrollContainerRef.current?.scrollTo({\n left: previousTabsWidth,\n behavior: 'smooth',\n });\n }\n };\n\n const scrollPrev = () => {\n scrollTabIntoView(firstVisibleTabIdx - 1);\n };\n\n const scrollNext = () => {\n scrollTabIntoView(lastVisibleTabIdx + 1);\n };\n\n // Подскролливаем к выбранному табу\n const checkedTabIdx = items.findIndex(getItemChecked);\n React.useEffect(() => {\n if (isScrollable) {\n scrollTabIntoView(checkedTabIdx);\n }\n }, [checkedTabIdx, isScrollable]);\n\n return (\n <div className={cnTabsFitModeScrollWrapper()}>\n {isScrollable && (\n <>\n {(['prev', 'next'] as const).map((buttonTo) => (\n <Button\n key={buttonTo}\n view=\"clear\"\n type=\"button\"\n size=\"xs\"\n onlyIcon\n disabled={\n buttonTo === 'prev'\n ? firstVisibleTabIdx === 0\n : lastVisibleTabIdx === items.length - 1\n }\n iconLeft={buttonTo === 'prev' ? IconArrowLeft : IconArrowRight}\n className={cnTabsFitModeScrollWrapper('Button', { to: buttonTo })}\n onClick={buttonTo === 'prev' ? scrollPrev : scrollNext}\n />\n ))}\n </>\n )}\n <div\n className={cnTabsFitModeScrollWrapper('Content')}\n ref={scrollContainerRef}\n >\n {renderItemsList({\n visibleIndexes: Array.from(Array(items.length).keys()),\n getTabClassName: (idx) =>\n cnTabsFitModeScrollWrapper('Tab', {\n noMargin: idx === items.length - 1,\n }),\n })}\n </div>\n </div>\n );\n};\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"helpers.test.js","names":["getVisibleTabsRange","describe","tabsDimensions","size","gap","it","expect","containerWidth","scrollLeft","containerPaddingLeft","toEqual"],"sources":["../../../../../../../src/components/Tabs/FitModeScrollWrapper/__test__/helpers.test.ts"],"sourcesContent":["import { getVisibleTabsRange } from '../../helpers';\nimport { TabDimensions } from '../../types';\n\ndescribe('getVisibleTabsRange', () => {\n const tabsDimensions: TabDimensions[] = [\n {\n size: 100,\n gap: 10,\n },\n {\n size: 100,\n gap: 10,\n },\n {\n size: 100,\n gap: 0,\n },\n ];\n\n it('возвращает все табы, если все вмещаются', () => {\n expect(\n getVisibleTabsRange({\n tabsDimensions,\n containerWidth: 330,\n scrollLeft: 0,\n containerPaddingLeft: 10,\n }),\n ).toEqual([0, 2]);\n });\n\n it('возвращает все табы, если проскроллили только паддинг', () => {\n expect(\n getVisibleTabsRange({\n tabsDimensions,\n containerWidth: 320,\n scrollLeft: 10,\n containerPaddingLeft: 10,\n }),\n ).toEqual([0, 2]);\n });\n\n it('возвращает все табы, кроме последнего, если последний не вместился полностью', () => {\n expect(\n getVisibleTabsRange({\n tabsDimensions,\n containerWidth: 329,\n scrollLeft: 0,\n containerPaddingLeft: 10,\n }),\n ).toEqual([0, 1]);\n });\n\n it('возвращает все табы, кроме первого, если первый не виден полностью из-за скролла', () => {\n expect(\n getVisibleTabsRange({\n tabsDimensions,\n containerWidth: 319,\n scrollLeft: 11,\n containerPaddingLeft: 10,\n }),\n ).toEqual([1, 2]);\n });\n\n it('возвращает только средний таб, если первый и последний не видны полностью', () => {\n expect(\n getVisibleTabsRange({\n tabsDimensions,\n containerWidth: 318,\n scrollLeft: 11,\n containerPaddingLeft: 10,\n }),\n ).toEqual([1, 1]);\n });\n\n it('возвращает только средний таб, даже если он не влез полностью, но виден его левый край', () => {\n expect(\n getVisibleTabsRange({\n tabsDimensions,\n containerWidth: 50,\n scrollLeft: 110,\n containerPaddingLeft: 10,\n }),\n ).toEqual([1, 1]);\n });\n\n it('возвращает только первый таб, если ничего не влезает', () => {\n expect(\n getVisibleTabsRange({\n tabsDimensions,\n containerWidth: 10,\n scrollLeft: 0,\n containerPaddingLeft: 10,\n }),\n ).toEqual([0, 0]);\n });\n});\n"],"mappings":"AAAA,OAASA,mBAAT,qBAGAC,QAAQ,CAAC,qBAAD,CAAwB,UAAM,CACpC,GAAMC,EAA+B,CAAG,CACtC,CACEC,IAAI,CAAE,GADR,CAEEC,GAAG,CAAE,EAFP,CADsC,CAKtC,CACED,IAAI,CAAE,GADR,CAEEC,GAAG,CAAE,EAFP,CALsC,CAStC,CACED,IAAI,CAAE,GADR,CAEEC,GAAG,CAAE,CAFP,CATsC,CAAxC,CAeAC,EAAE,CAAC,8MAAD,CAA4C,UAAM,CAClDC,MAAM,CACJN,mBAAmB,CAAC,CAClBE,cAAc,CAAdA,CADkB,CAElBK,cAAc,CAAE,GAFE,CAGlBC,UAAU,CAAE,CAHM,CAIlBC,oBAAoB,CAAE,EAJJ,CAAD,CADf,CAAN,CAOEC,OAPF,CAOU,CAAC,CAAD,CAAI,CAAJ,CAPV,CAQD,CATC,CAhBkC,CA2BpCL,EAAE,CAAC,6RAAD,CAA0D,UAAM,CAChEC,MAAM,CACJN,mBAAmB,CAAC,CAClBE,cAAc,CAAdA,CADkB,CAElBK,cAAc,CAAE,GAFE,CAGlBC,UAAU,CAAE,EAHM,CAIlBC,oBAAoB,CAAE,EAJJ,CAAD,CADf,CAAN,CAOEC,OAPF,CAOU,CAAC,CAAD,CAAI,CAAJ,CAPV,CAQD,CATC,CA3BkC,CAsCpCL,EAAE,CAAC,mZAAD,CAAiF,UAAM,CACvFC,MAAM,CACJN,mBAAmB,CAAC,CAClBE,cAAc,CAAdA,CADkB,CAElBK,cAAc,CAAE,GAFE,CAGlBC,UAAU,CAAE,CAHM,CAIlBC,oBAAoB,CAAE,EAJJ,CAAD,CADf,CAAN,CAOEC,OAPF,CAOU,CAAC,CAAD,CAAI,CAAJ,CAPV,CAQD,CATC,CAtCkC,CAiDpCL,EAAE,CAAC,4ZAAD,CAAqF,UAAM,CAC3FC,MAAM,CACJN,mBAAmB,CAAC,CAClBE,cAAc,CAAdA,CADkB,CAElBK,cAAc,CAAE,GAFE,CAGlBC,UAAU,CAAE,EAHM,CAIlBC,oBAAoB,CAAE,EAJJ,CAAD,CADf,CAAN,CAOEC,OAPF,CAOU,CAAC,CAAD,CAAI,CAAJ,CAPV,CAQD,CATC,CAjDkC,CA4DpCL,EAAE,CAAC,iYAAD,CAA8E,UAAM,CACpFC,MAAM,CACJN,mBAAmB,CAAC,CAClBE,cAAc,CAAdA,CADkB,CAElBK,cAAc,CAAE,GAFE,CAGlBC,UAAU,CAAE,EAHM,CAIlBC,oBAAoB,CAAE,EAJJ,CAAD,CADf,CAAN,CAOEC,OAPF,CAOU,CAAC,CAAD,CAAI,CAAJ,CAPV,CAQD,CATC,CA5DkC,CAuEpCL,EAAE,CAAC,sbAAD,CAA2F,UAAM,CACjGC,MAAM,CACJN,mBAAmB,CAAC,CAClBE,cAAc,CAAdA,CADkB,CAElBK,cAAc,CAAE,EAFE,CAGlBC,UAAU,CAAE,GAHM,CAIlBC,oBAAoB,CAAE,EAJJ,CAAD,CADf,CAAN,CAOEC,OAPF,CAOU,CAAC,CAAD,CAAI,CAAJ,CAPV,CAQD,CATC,CAvEkC,CAkFpCL,EAAE,CAAC,kRAAD,CAAyD,UAAM,CAC/DC,MAAM,CACJN,mBAAmB,CAAC,CAClBE,cAAc,CAAdA,CADkB,CAElBK,cAAc,CAAE,EAFE,CAGlBC,UAAU,CAAE,CAHM,CAIlBC,oBAAoB,CAAE,EAJJ,CAAD,CADf,CAAN,CAOEC,OAPF,CAOU,CAAC,CAAD,CAAI,CAAJ,CAPV,CAQD,CATC,CAUH,CA5FO,C"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabsLine.js","names":["React","useMemo","cn","cnTabsLine","TabsBorderLine","linePosition","TabsRunningLine","activeTabIdx","tabsDimensions","visibleIndexes","size","offset","reduce","a","v","index","includes","gap","TabsLine","type","position","formatCSSValue","n"],"sources":["../../../../../../src/components/Tabs/Line/TabsLine.tsx"],"sourcesContent":["import './TabsLine.css';\n\nimport React, { useMemo } from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { TabDimensions, TabsPropLinePosition } from '../types';\n\nconst cnTabsLine = cn('TabsLine');\n\nexport const TabsBorderLine: React.FC<{\n linePosition: TabsPropLinePosition;\n}> = ({ linePosition }) => {\n return <TabsLine type=\"border\" linePosition={linePosition} size=\"100%\" />;\n};\n\nexport const TabsRunningLine: React.FC<{\n linePosition: TabsPropLinePosition;\n activeTabIdx: number;\n visibleIndexes?: number[];\n tabsDimensions: TabDimensions[];\n}> = ({ linePosition, activeTabIdx, tabsDimensions, visibleIndexes }) => {\n const size = tabsDimensions[activeTabIdx]?.size ?? 0;\n\n const offset = useMemo(\n () =>\n tabsDimensions.reduce(\n (a, v, index) =>\n a +\n (visibleIndexes?.includes(index) && index < activeTabIdx\n ? v.size + v.gap\n : 0),\n 0,\n ),\n [tabsDimensions, visibleIndexes, activeTabIdx],\n );\n\n return (\n <TabsLine\n type=\"running\"\n linePosition={linePosition}\n size={size}\n offset={offset}\n />\n );\n};\n\nconst TabsLine: React.FC<{\n type: 'border' | 'running';\n linePosition: TabsPropLinePosition;\n size: number | string;\n offset?: number | string;\n}> = ({ type, linePosition, size, offset = '0px' }) => (\n <div\n className={cnTabsLine({ type, position: linePosition })}\n style={{\n ['--line-length' as string]: formatCSSValue(size),\n ['--line-offset' as string]: formatCSSValue(offset),\n }}\n />\n);\n\nconst formatCSSValue = (n: number | string) =>\n typeof n === 'number' ? `${n}px` : n;\n"],"mappings":"mEAAA,uBAEA,MAAOA,MAAP,EAAgBC,OAAhB,KAA+B,OAA/B,CAEA,OAASC,EAAT,0BAGA,GAAMC,WAAU,CAAGD,EAAE,CAAC,UAAD,CAArB,CAEA,MAAO,IAAME,eAEX,CAAG,WAAsB,IAAnBC,EAAmB,GAAnBA,YAAmB,CACzB,MAAO,qBAAC,QAAD,EAAU,IAAI,CAAC,QAAf,CAAwB,YAAY,CAAEA,CAAtC,CAAoD,IAAI,CAAC,MAAzD,EACR,CAJM,CAMP,MAAO,IAAMC,gBAKX,CAAG,WAAoE,SAAjED,CAAiE,GAAjEA,YAAiE,CAAnDE,CAAmD,GAAnDA,YAAmD,CAArCC,CAAqC,GAArCA,cAAqC,CAArBC,CAAqB,GAArBA,cAAqB,CACjEC,CAAI,qBAAGF,CAAc,CAACD,CAAD,CAAjB,qBAAG,EAA8BG,IAAjC,gBAAyC,CADoB,CAGjEC,CAAM,CAAGV,OAAO,CACpB,iBACEO,EAAc,CAACI,MAAf,CACE,SAACC,CAAD,CAAIC,CAAJ,CAAOC,CAAP,QACEF,EAAC,EACA,OAAAJ,CAAc,WAAdA,CAAA,EAAAA,CAAc,CAAEO,QAAhB,CAAyBD,CAAzB,GAAmCA,CAAK,CAAGR,CAA3C,CACGO,CAAC,CAACJ,IAAF,CAASI,CAAC,CAACG,GADd,CAEG,CAHH,CADH,CADF,CAME,CANF,CADF,CADoB,CAUpB,CAACT,CAAD,CAAiBC,CAAjB,CAAiCF,CAAjC,CAVoB,CAHiD,CAgBvE,MACE,qBAAC,QAAD,EACE,IAAI,CAAC,SADP,CAEE,YAAY,CAAEF,CAFhB,CAGE,IAAI,CAAEK,CAHR,CAIE,MAAM,CAAEC,CAJV,EAOH,CA7BM,C,GA+BDO,SAKJ,CAAG,kBAAGC,CAAH,GAAGA,IAAH,CAASd,CAAT,GAASA,YAAT,CAAuBK,CAAvB,GAAuBA,IAAvB,KAA6BC,MAA7B,CAA6BA,CAA7B,YAAsC,KAAtC,SACH,4BACE,SAAS,CAAER,UAAU,CAAC,CAAEgB,IAAI,CAAJA,CAAF,CAAQC,QAAQ,CAAEf,CAAlB,CAAD,CADvB,CAEE,KAAK,yBACF,eADE,CAC0BgB,cAAc,CAACX,CAAD,CADxC,oBAEF,eAFE,CAE0BW,cAAc,CAACV,CAAD,CAFxC,IAFP,EADG,C,CAUCU,cAAc,CAAG,SAACC,CAAD,QACR,QAAb,QAAOA,EAAP,WAA2BA,CAA3B,OAAmCA,CADd,C"}
@@ -1 +0,0 @@
1
- .TabsMoreItems-Button{align-items:center;display:flex}.TabsMoreItems-Content{white-space:nowrap}.TabsMoreItems-Item{padding:0 var(--space-s)}.TabsMoreItems-Item_active{position:relative}.TabsMoreItems-Item_active:before{background:var(--color-bg-brand);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.TabsMoreItems-Item>*{width:100%}
@@ -1,2 +0,0 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"./TabsMoreItems.css";import{IconMeatball}from"@consta/icons/IconMeatball";import FocusTrap from"focus-trap-react";import React,{forwardRef,useEffect,useRef,useState}from"react";import{Transition}from"react-transition-group";import{Button}from"../../Button";import{ListBox}from"../../ListCanary";import{Popover}from"../../Popover/Popover";import{useFlag}from"../../../hooks/useFlag";import{useForkRef}from"../../../hooks/useForkRef";import{animateTimeout,cnMixPopoverAnimate}from"../../../mixs/MixPopoverAnimate";import{cn}from"../../../utils/bem";var cnTabsMoreItems=cn("TabsMoreItems"),TabsMoreItemsRender=function(a,b){var c=a.items,d=a.renderItem,e=a.getItemLabel,f=a.getItemChecked,g=a.height,h=a.size,i=useFlag(!1),j=_slicedToArray(i,2),k=j[0],l=j[1],m=useRef(null),n=useRef(null),o=useState("downStartLeft"),p=_slicedToArray(o,2),q=p[0],r=p[1];return useEffect(function(){0===c.length&&l.off()},[c]),React.createElement(React.Fragment,null,React.createElement("div",{ref:useForkRef([b,m]),className:cnTabsMoreItems("Button"),style:{height:g}},React.createElement(Button,{size:"xs",type:"button",view:"ghost",onlyIcon:!0,iconLeft:IconMeatball,onClick:l.toggle})),React.createElement(Transition,{in:k,unmountOnExit:!0,nodeRef:n,timeout:animateTimeout},function(a){var b;return React.createElement(Popover,{anchorRef:m,offset:-1,ref:n,direction:"downStartRight",spareDirection:"downStartLeft",className:cnTabsMoreItems("Popover",[cnMixPopoverAnimate({animate:a,direction:q})]),onSetDirection:r,possibleDirections:["downStartRight","downStartLeft","upStartRight","upStartLeft","downCenter","upCenter"]},React.createElement(FocusTrap,{focusTrapOptions:{fallbackFocus:null!==(b=m.current)&&void 0!==b?b:void 0,clickOutsideDeactivates:function clickOutsideDeactivates(a){var b,c=null===(b=m.current)||void 0===b?void 0:b.contains(a.target);return!c},allowOutsideClick:!0,onDeactivate:l.off}},React.createElement(ListBox,{shadow:!0,border:!0,size:h,form:"default",className:cnTabsMoreItems("Content")},c.map(function(a){return React.createElement("div",{key:e(a),className:cnTabsMoreItems("Item",{active:f(a)})},d(a,l.off,!0))}))))}))};export var TabsMoreItems=forwardRef(TabsMoreItemsRender);
2
- //# sourceMappingURL=TabsMoreItems.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabsMoreItems.js","names":["IconMeatball","FocusTrap","React","forwardRef","useEffect","useRef","useState","Transition","Button","ListBox","Popover","useFlag","useForkRef","animateTimeout","cnMixPopoverAnimate","cn","cnTabsMoreItems","TabsMoreItemsRender","props","ref","items","renderItem","getItemLabel","getItemChecked","height","size","open","setOpen","buttonRef","popoverRef","direction","setDirection","length","off","toggle","animate","fallbackFocus","current","clickOutsideDeactivates","e","isClickInsideButton","contains","target","allowOutsideClick","onDeactivate","map","item","active","TabsMoreItems"],"sources":["../../../../../../src/components/Tabs/MoreItems/TabsMoreItems.tsx"],"sourcesContent":["import './TabsMoreItems.css';\n\nimport { IconMeatball } from '@consta/icons/IconMeatball';\nimport FocusTrap from 'focus-trap-react';\nimport React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport { Button } from '##/components/Button';\nimport { ListBox } from '##/components/ListCanary';\nimport { Direction, Popover } from '##/components/Popover/Popover';\nimport { useFlag } from '##/hooks/useFlag';\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { animateTimeout, cnMixPopoverAnimate } from '##/mixs/MixPopoverAnimate';\nimport { cn } from '##/utils/bem';\n\nimport { TabsMoreItemsComponent, TabsMoreItemsProps } from '../types';\n\nconst cnTabsMoreItems = cn('TabsMoreItems');\n\nconst TabsMoreItemsRender = (\n props: TabsMoreItemsProps,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const { items, renderItem, getItemLabel, getItemChecked, height, size } =\n props;\n const [open, setOpen] = useFlag(false);\n const buttonRef = useRef<HTMLDivElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const [direction, setDirection] = useState<Direction>('downStartLeft');\n\n useEffect(() => {\n items.length === 0 && setOpen.off();\n }, [items]);\n\n return (\n <>\n <div\n ref={useForkRef([ref, buttonRef])}\n className={cnTabsMoreItems('Button')}\n style={{ height }}\n >\n <Button\n size=\"xs\"\n type=\"button\"\n view=\"ghost\"\n onlyIcon\n iconLeft={IconMeatball}\n onClick={setOpen.toggle}\n />\n </div>\n <Transition\n in={open}\n unmountOnExit\n nodeRef={popoverRef}\n timeout={animateTimeout}\n >\n {(animate) => (\n <Popover\n anchorRef={buttonRef}\n offset={-1}\n ref={popoverRef}\n direction=\"downStartRight\"\n spareDirection=\"downStartLeft\"\n className={cnTabsMoreItems('Popover', [\n cnMixPopoverAnimate({ animate, direction }),\n ])}\n onSetDirection={setDirection}\n possibleDirections={[\n 'downStartRight',\n 'downStartLeft',\n 'upStartRight',\n 'upStartLeft',\n 'downCenter',\n 'upCenter',\n ]}\n >\n <FocusTrap\n focusTrapOptions={{\n fallbackFocus: buttonRef.current ?? undefined,\n clickOutsideDeactivates: (e) => {\n const isClickInsideButton = buttonRef.current?.contains(\n e.target as Node,\n );\n return !isClickInsideButton;\n },\n allowOutsideClick: true,\n onDeactivate: setOpen.off,\n }}\n >\n <ListBox\n shadow\n border\n size={size}\n form=\"default\"\n className={cnTabsMoreItems('Content')}\n >\n {items.map((item) => (\n <div\n key={getItemLabel(item)}\n className={cnTabsMoreItems('Item', {\n active: getItemChecked(item),\n })}\n >\n {renderItem(item, setOpen.off, true)}\n </div>\n ))}\n </ListBox>\n </FocusTrap>\n </Popover>\n )}\n </Transition>\n </>\n );\n};\n\nexport const TabsMoreItems = forwardRef(\n TabsMoreItemsRender,\n) as TabsMoreItemsComponent;\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabsTab.js","names":["React","forwardRef","ListItem","mapItemVerticalPadding","useForkRef","cnMixFocus","cn","cnTabsTab","TabsTabRender","props","ref","label","onChange","checked","size","onlyIcon","icon","iconSize","leftIcon","leftSide","tabRef","className","as","Tag","rightIcon","rightSide","disabled","renderInDropdown","otherProps","currentRef","before","toString","pV","TabsTab"],"sources":["../../../../../../src/components/Tabs/Tab/TabsTab.tsx"],"sourcesContent":["import './TabsTab.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { ListItem, mapItemVerticalPadding } from '##/components/ListCanary';\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { cnMixFocus } from '##/mixs/MixFocus';\nimport { cn } from '##/utils/bem';\n\nimport { TabsTabComponent, TabsTabProps } from '../types';\n\nexport const cnTabsTab = cn('TabsTab');\n\nconst TabsTabRender = (\n props: TabsTabProps,\n ref: React.Ref<HTMLButtonElement>,\n) => {\n const {\n label,\n onChange,\n checked,\n size,\n onlyIcon,\n icon,\n iconSize,\n leftIcon,\n leftSide,\n tabRef,\n className,\n as: Tag = 'button',\n rightIcon,\n rightSide,\n disabled,\n renderInDropdown,\n ...otherProps\n } = props;\n\n const currentRef = useForkRef([ref, tabRef]);\n\n return (\n <ListItem\n as={Tag}\n className={cnTabsTab({ checked, onlyIcon, renderInDropdown, disabled }, [\n !disabled ? cnMixFocus({ before: true }) : undefined,\n className,\n ])}\n role=\"tab\"\n type=\"button\"\n tabIndex={disabled ? -1 : undefined}\n ref={currentRef}\n title={onlyIcon ? label.toString() : undefined}\n label={onlyIcon ? undefined : label.toString()}\n onClick={checked ? undefined : onChange}\n leftIcon={onlyIcon ? leftIcon || icon || rightIcon : leftIcon || icon}\n leftSide={onlyIcon ? undefined : leftSide}\n rightIcon={onlyIcon ? undefined : rightIcon}\n rightSide={onlyIcon ? undefined : rightSide}\n iconSize={iconSize}\n disabled={disabled}\n size={size}\n space={{\n pV: mapItemVerticalPadding ? mapItemVerticalPadding[size] : 'xs',\n }}\n {...otherProps}\n />\n );\n};\n\nexport const TabsTab = forwardRef(TabsTabRender) as TabsTabComponent;\n"],"mappings":"4QAAA,sBAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,QAAT,CAAmBC,sBAAnB,wBACA,OAASC,UAAT,iCACA,OAASC,UAAT,8BACA,OAASC,EAAT,0BAIA,MAAO,IAAMC,UAAS,CAAGD,EAAE,CAAC,SAAD,CAApB,CAEP,GAAME,cAAa,CAAG,SACpBC,CADoB,CAEpBC,CAFoB,CAGjB,IAEDC,EAFC,CAmBCF,CAnBD,CAEDE,KAFC,CAGDC,CAHC,CAmBCH,CAnBD,CAGDG,QAHC,CAIDC,CAJC,CAmBCJ,CAnBD,CAIDI,OAJC,CAKDC,CALC,CAmBCL,CAnBD,CAKDK,IALC,CAMDC,CANC,CAmBCN,CAnBD,CAMDM,QANC,CAODC,CAPC,CAmBCP,CAnBD,CAODO,IAPC,CAQDC,CARC,CAmBCR,CAnBD,CAQDQ,QARC,CASDC,CATC,CAmBCT,CAnBD,CASDS,QATC,CAUDC,CAVC,CAmBCV,CAnBD,CAUDU,QAVC,CAWDC,CAXC,CAmBCX,CAnBD,CAWDW,MAXC,CAYDC,CAZC,CAmBCZ,CAnBD,CAYDY,SAZC,GAmBCZ,CAnBD,CAaDa,EAbC,CAaGC,CAbH,YAaS,QAbT,GAcDC,CAdC,CAmBCf,CAnBD,CAcDe,SAdC,CAeDC,CAfC,CAmBChB,CAnBD,CAeDgB,SAfC,CAgBDC,CAhBC,CAmBCjB,CAnBD,CAgBDiB,QAhBC,CAiBDC,CAjBC,CAmBClB,CAnBD,CAiBDkB,gBAjBC,CAkBEC,CAlBF,0BAmBCnB,CAnBD,YAqBGoB,CAAU,CAAGzB,UAAU,CAAC,CAACM,CAAD,CAAMU,CAAN,CAAD,CArB1B,CAuBH,MACE,qBAAC,QAAD,gBACE,EAAE,CAAEG,CADN,CAEE,SAAS,CAAEhB,SAAS,CAAC,CAAEM,OAAO,CAAPA,CAAF,CAAWE,QAAQ,CAARA,CAAX,CAAqBY,gBAAgB,CAAhBA,CAArB,CAAuCD,QAAQ,CAARA,CAAvC,CAAD,CAAoD,CACrEA,CAAD,QAAYrB,UAAU,CAAC,CAAEyB,MAAM,GAAR,CAAD,CADgD,CAEtET,CAFsE,CAApD,CAFtB,CAME,IAAI,CAAC,KANP,CAOE,IAAI,CAAC,QAPP,CAQE,QAAQ,CAAEK,CAAQ,CAAG,CAAC,CAAJ,OARpB,CASE,GAAG,CAAEG,CATP,CAUE,KAAK,CAAEd,CAAQ,CAAGJ,CAAK,CAACoB,QAAN,EAAH,OAVjB,CAWE,KAAK,CAAEhB,CAAQ,QAAeJ,CAAK,CAACoB,QAAN,EAXhC,CAYE,OAAO,CAAElB,CAAO,QAAeD,CAZjC,CAaE,QAAQ,CAAEG,CAAQ,CAAGG,CAAQ,EAAIF,CAAZ,EAAoBQ,CAAvB,CAAmCN,CAAQ,EAAIF,CAbnE,CAcE,QAAQ,CAAED,CAAQ,QAAeI,CAdnC,CAeE,SAAS,CAAEJ,CAAQ,QAAeS,CAfpC,CAgBE,SAAS,CAAET,CAAQ,QAAeU,CAhBpC,CAiBE,QAAQ,CAAER,CAjBZ,CAkBE,QAAQ,CAAES,CAlBZ,CAmBE,IAAI,CAAEZ,CAnBR,CAoBE,KAAK,CAAE,CACLkB,EAAE,CAAE7B,sBAAsB,CAAGA,sBAAsB,CAACW,CAAD,CAAzB,CAAkC,IADvD,CApBT,EAuBMc,CAvBN,EA0BH,CArDD,CAuDA,MAAO,IAAMK,QAAO,CAAGhC,UAAU,CAACO,aAAD,CAA1B"}