@consta/uikit 4.28.1 → 4.29.0
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.
- package/__internal__/src/components/AutoCompleteCanary/helpers.d.ts +1 -1
- package/__internal__/src/components/AvatarGroup/helpers.d.ts +1 -1
- package/__internal__/src/components/BadgeGroup/types.d.ts +3 -2
- package/__internal__/src/components/BadgeGroup/types.js.map +1 -1
- package/__internal__/src/components/BookmarkTabsCanary/BookmarkTabs.css +1 -1
- package/__internal__/src/components/BookmarkTabsCanary/BookmarkTabsCanary.js +1 -1
- package/__internal__/src/components/BookmarkTabsCanary/BookmarkTabsCanary.js.map +1 -1
- package/__internal__/src/components/BookmarkTabsCanary/BookmarkTabsTab/BookmarkTabsTab.css +1 -1
- package/__internal__/src/components/BookmarkTabsCanary/BookmarkTabsTab/BookmarkTabsTab.js +1 -1
- package/__internal__/src/components/BookmarkTabsCanary/BookmarkTabsTab/BookmarkTabsTab.js.map +1 -1
- package/__internal__/src/components/BookmarkTabsCanary/helper.d.ts +1 -1
- package/__internal__/src/components/BookmarkTabsCanary/types.d.ts +10 -7
- package/__internal__/src/components/BookmarkTabsCanary/types.js.map +1 -1
- package/__internal__/src/components/Button/Button.css +1 -1
- package/__internal__/src/components/Button/Button.d.ts +1 -0
- package/__internal__/src/components/Button/Button.js +1 -1
- package/__internal__/src/components/Button/Button.js.map +1 -1
- package/__internal__/src/components/ChipsCanary/types.d.ts +3 -2
- package/__internal__/src/components/ChipsCanary/types.js.map +1 -1
- package/__internal__/src/components/ChoiceGroup/helper.d.ts +1 -1
- package/__internal__/src/components/CollapseGroup/helpers.d.ts +2 -2
- package/__internal__/src/components/Combobox/helpers.d.ts +2 -2
- package/__internal__/src/components/ComboboxCanary/helpers.d.ts +2 -2
- package/__internal__/src/components/ContextMenu/ContextMenuLevel/ContextMenuLevel.js.map +1 -1
- package/__internal__/src/components/ContextMenu/helpers.d.ts +4 -4
- package/__internal__/src/components/ContextMenu/types.d.ts +7 -6
- package/__internal__/src/components/ContextMenu/types.js.map +1 -1
- package/__internal__/src/components/ContextMenuDeprecated/helpers.d.ts +5 -4
- package/__internal__/src/components/ContextMenuDeprecated/helpers.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/DatePickerFieldTypeDate.d.ts +2 -2
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime.d.ts +2 -2
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/DatePickerFieldTypeMonth.d.ts +2 -2
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.d.ts +2 -2
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.d.ts +2 -2
- package/__internal__/src/components/FileField/FileField.d.ts +2 -1
- package/__internal__/src/components/FileField/FileField.js.map +1 -1
- package/__internal__/src/components/Header/Logo/HeaderLogo.d.ts +3 -2
- package/__internal__/src/components/Header/Logo/HeaderLogo.js.map +1 -1
- package/__internal__/src/components/ListCanary/ListItem/ListItem.js +1 -1
- package/__internal__/src/components/ListCanary/ListItem/ListItem.js.map +1 -1
- package/__internal__/src/components/ListCanary/types.d.ts +5 -4
- package/__internal__/src/components/ListCanary/types.js.map +1 -1
- package/__internal__/src/components/ProgressStepBar/helpers.d.ts +2 -2
- package/__internal__/src/components/Select/helpers.d.ts +2 -2
- package/__internal__/src/components/SelectCanary/helpers.d.ts +2 -2
- package/__internal__/src/components/Sidebar/Sidebar.d.ts +2 -2
- package/__internal__/src/components/Sidebar/Sidebar.js.map +1 -1
- package/__internal__/src/components/SnackBar/helper.d.ts +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js.map +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/useFittingItems.d.ts +4 -3
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/useFittingItems.js +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/useFittingItems.js.map +1 -1
- package/__internal__/src/components/Tabs/FitModeScrollWrapper/TabsFitModeScrollWrapper.js +1 -1
- package/__internal__/src/components/Tabs/FitModeScrollWrapper/TabsFitModeScrollWrapper.js.map +1 -1
- package/__internal__/src/components/Tabs/Line/TabsLine.d.ts +1 -0
- package/__internal__/src/components/Tabs/Line/TabsLine.js +1 -1
- package/__internal__/src/components/Tabs/Line/TabsLine.js.map +1 -1
- package/__internal__/src/components/Tabs/Tabs.js +1 -1
- package/__internal__/src/components/Tabs/Tabs.js.map +1 -1
- package/__internal__/src/components/Tabs/types.d.ts +7 -5
- package/__internal__/src/components/Tabs/types.js.map +1 -1
- package/__internal__/src/components/Tag/Tag.d.ts +3 -2
- package/__internal__/src/components/Tag/Tag.js.map +1 -1
- package/__internal__/src/components/TagBase/TagBase.d.ts +1 -1
- package/__internal__/src/components/UserSelect/helpers.d.ts +2 -2
- package/__internal__/src/components/UserSelectCanary/helpers.d.ts +2 -2
- package/__internal__/src/utils/types/AsTags.d.ts +3 -0
- package/__internal__/src/utils/types/AsTags.js +2 -0
- package/__internal__/src/utils/types/AsTags.js.map +1 -0
- package/__internal__/src/utils/types/PropsWithAsAttributes.d.ts +6 -5
- package/__internal__/src/utils/types/PropsWithAsAttributes.js.map +1 -1
- package/__internal__/src/utils/types/PropsWithJsxAttributes.d.ts +2 -1
- package/__internal__/src/utils/types/PropsWithJsxAttributes.js.map +1 -1
- package/package.json +1 -1
|
@@ -105,7 +105,7 @@ export declare function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITE
|
|
|
105
105
|
getItemContent?: PropGetItemContent<ITEM> | undefined;
|
|
106
106
|
getItemStatus?: PropGetItemStatus<ITEM> | undefined;
|
|
107
107
|
getItemOnClick?: PropGetItemOnClick<ITEM> | undefined;
|
|
108
|
-
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "size" | "
|
|
108
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "size" | "getItemLabel" | "getItemStatus" | "direction" | "onItemClick" | "getItemOnClick" | "getItemContent" | "steps" | "activeStepIndex" | "getItemLineStatus" | "getItemTooltipContent" | "getItemPoint" | "getItemProgress"> & React.RefAttributes<HTMLDivElement> & (ITEM extends {
|
|
109
109
|
label: string | undefined;
|
|
110
110
|
} ? {} : {
|
|
111
111
|
getItemLabel: PropGetItemLabel<ITEM>;
|
|
@@ -119,6 +119,6 @@ export declare function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITE
|
|
|
119
119
|
getItemLineStatus: PropGetItemLineStatus<DefaultItem> | PropGetItemLineStatus<ITEM>;
|
|
120
120
|
getItemOnClick: PropGetItemOnClick<DefaultItem> | PropGetItemOnClick<ITEM>;
|
|
121
121
|
};
|
|
122
|
-
export declare const getItemPosition: (index: number, lendth: number) => "
|
|
122
|
+
export declare const getItemPosition: (index: number, lendth: number) => "start" | "center" | "end";
|
|
123
123
|
export declare const getLineSize: (container: React.RefObject<HTMLElement>, activeElement: React.RefObject<HTMLElement>, direction: PropDirection) => number;
|
|
124
124
|
export declare const calculateLines: (refs: React.RefObject<HTMLElement>[], direction: PropDirection) => number[];
|
|
@@ -94,8 +94,8 @@ export declare function withDefaultGetters<ITEM, GROUP>(props: SelectProps<ITEM,
|
|
|
94
94
|
e: React.SyntheticEvent<Element, Event>;
|
|
95
95
|
}) => void;
|
|
96
96
|
disabled?: boolean | undefined;
|
|
97
|
-
form?: "default" | "
|
|
98
|
-
dropdownForm?: "default" | "
|
|
97
|
+
form?: "default" | "defaultClear" | "defaultBrick" | "brick" | "brickDefault" | "brickClear" | "brickRound" | "round" | "roundClear" | "roundBrick" | "clearRound" | "clearDefault" | "clearBrick" | "clearClear" | undefined;
|
|
98
|
+
dropdownForm?: "default" | "brick" | "round" | undefined;
|
|
99
99
|
size?: "m" | "s" | "xs" | "l" | undefined;
|
|
100
100
|
view?: "default" | "clear" | undefined;
|
|
101
101
|
status?: "alert" | "warning" | "success" | undefined;
|
|
@@ -96,8 +96,8 @@ export declare function withDefaultGetters<ITEM, GROUP>(props: SelectProps<ITEM,
|
|
|
96
96
|
e: React.SyntheticEvent<Element, Event>;
|
|
97
97
|
}) => void;
|
|
98
98
|
disabled?: boolean | undefined;
|
|
99
|
-
form?: "default" | "
|
|
100
|
-
dropdownForm?: "default" | "
|
|
99
|
+
form?: "default" | "defaultClear" | "defaultBrick" | "brick" | "brickDefault" | "brickClear" | "brickRound" | "round" | "roundClear" | "roundBrick" | "clearRound" | "clearDefault" | "clearBrick" | "clearClear" | undefined;
|
|
100
|
+
dropdownForm?: "default" | "brick" | "round" | undefined;
|
|
101
101
|
size?: "m" | "s" | "xs" | "l" | undefined;
|
|
102
102
|
view?: "default" | "clear" | undefined;
|
|
103
103
|
status?: "alert" | "warning" | "success" | undefined;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import './Sidebar.css';
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import { AsTagAttribute } from "../../utils/types/AsTags";
|
|
3
4
|
import { PropsWithHTMLAttributes } from "../../utils/types/PropsWithHTMLAttributes";
|
|
4
|
-
declare type DivProps = JSX.IntrinsicElements['div'];
|
|
5
5
|
declare const sidebarPropPosition: readonly ["right", "bottom", "left", "top"];
|
|
6
6
|
declare type SidebarPropPosition = typeof sidebarPropPosition[number];
|
|
7
7
|
export declare const sidebarPropSize: readonly ["s", "m", "l", "full", "1/2", "1/3", "1/4", "2/3", "3/4"];
|
|
@@ -31,7 +31,7 @@ declare type SidebarActionsProps = {
|
|
|
31
31
|
export declare const cnSidebar: import("@bem-react/classname").ClassNameFormatter;
|
|
32
32
|
declare const SidebarContent: React.FC<SidebarContentProps>;
|
|
33
33
|
declare const SidebarActions: React.FC<SidebarActionsProps>;
|
|
34
|
-
interface SidebarComponent extends React.FC<SidebarProps>,
|
|
34
|
+
interface SidebarComponent extends React.FC<SidebarProps>, AsTagAttribute<'div'> {
|
|
35
35
|
Content: typeof SidebarContent;
|
|
36
36
|
Actions: typeof SidebarActions;
|
|
37
37
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","names":["React","useEffect","useRef","Transition","PortalWithTheme","usePortalContext","useTheme","useClickOutside","useGlobalKeys","cn","sidebarPropPosition","sidebarPropPositionDefault","sidebarPropSize","sidebarPropSizeDefault","cnSidebar","SidebarContent","className","children","rest","SidebarActions","ContextConsumer","onClickOutside","ignoreClicksInsideRefs","refs","isActive","handler","Sidebar","props","isOpen","onClose","onOpen","hasOverlay","onEsc","position","size","container","window","document","body","style","rootClassName","afterClose","otherProps","ref","portalRef","theme","Escape","e","animate","zIndex","Content","Actions"],"sources":["../../../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import './Sidebar.css';\n\nimport React, { useEffect, useRef } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport {\n PortalWithTheme,\n usePortalContext,\n} from '##/components/PortalWithTheme';\nimport { useTheme } from '##/components/Theme/Theme';\nimport { useClickOutside } from '##/hooks/useClickOutside';\nimport { useGlobalKeys } from '##/hooks/useGlobalKeys';\nimport { cn } from '##/utils/bem';\nimport {
|
|
1
|
+
{"version":3,"file":"Sidebar.js","names":["React","useEffect","useRef","Transition","PortalWithTheme","usePortalContext","useTheme","useClickOutside","useGlobalKeys","cn","sidebarPropPosition","sidebarPropPositionDefault","sidebarPropSize","sidebarPropSizeDefault","cnSidebar","SidebarContent","className","children","rest","SidebarActions","ContextConsumer","onClickOutside","ignoreClicksInsideRefs","refs","isActive","handler","Sidebar","props","isOpen","onClose","onOpen","hasOverlay","onEsc","position","size","container","window","document","body","style","rootClassName","afterClose","otherProps","ref","portalRef","theme","Escape","e","animate","zIndex","Content","Actions"],"sources":["../../../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import './Sidebar.css';\n\nimport React, { useEffect, useRef } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport {\n PortalWithTheme,\n usePortalContext,\n} from '##/components/PortalWithTheme';\nimport { useTheme } from '##/components/Theme/Theme';\nimport { useClickOutside } from '##/hooks/useClickOutside';\nimport { useGlobalKeys } from '##/hooks/useGlobalKeys';\nimport { cn } from '##/utils/bem';\nimport { AsTagAttribute } from '##/utils/types/AsTags';\nimport { PropsWithHTMLAttributes } from '##/utils/types/PropsWithHTMLAttributes';\n\nconst sidebarPropPosition = ['right', 'bottom', 'left', 'top'] as const;\ntype SidebarPropPosition = typeof sidebarPropPosition[number];\nconst sidebarPropPositionDefault: SidebarPropPosition = sidebarPropPosition[0];\n\nexport const sidebarPropSize = [\n 's',\n 'm',\n 'l',\n 'full',\n '1/2',\n '1/3',\n '1/4',\n '2/3',\n '3/4',\n] as const;\n\nexport type SidebarPropSize = typeof sidebarPropSize[number];\nconst sidebarPropSizeDefault: SidebarPropSize = sidebarPropSize[1];\n\ntype SidebarProps = PropsWithHTMLAttributes<\n {\n isOpen?: boolean;\n onClose?: () => void;\n onOpen?: () => void;\n hasOverlay?: boolean;\n onClickOutside?: (event: MouseEvent) => void;\n onEsc?: (event: KeyboardEvent) => void;\n position?: SidebarPropPosition;\n size?: SidebarPropSize;\n rootClassName?: string;\n children?: React.ReactNode;\n container?: HTMLDivElement | undefined;\n afterClose?: () => void;\n },\n HTMLDivElement\n>;\n\ntype SidebarContentProps = {\n className?: string;\n children: React.ReactNode;\n};\n\ntype SidebarActionsProps = {\n className?: string;\n children: React.ReactNode;\n};\n\nexport const cnSidebar = cn('Sidebar');\n\nconst SidebarContent: React.FC<SidebarContentProps> = ({\n className,\n children,\n ...rest\n}) => (\n <div className={cnSidebar('Content', null, [className])} {...rest}>\n {children}\n </div>\n);\n\nconst SidebarActions: React.FC<SidebarActionsProps> = ({\n className,\n children,\n ...rest\n}) => (\n <div className={cnSidebar('Actions', null, [className])} {...rest}>\n {children}\n </div>\n);\n\nconst ContextConsumer: React.FC<{\n onClickOutside?: (event: MouseEvent) => void;\n ignoreClicksInsideRefs?: ReadonlyArray<React.RefObject<HTMLElement>>;\n children: React.ReactNode;\n}> = ({ onClickOutside, children, ignoreClicksInsideRefs }) => {\n const { refs } = usePortalContext();\n\n useClickOutside({\n isActive: !!onClickOutside,\n ignoreClicksInsideRefs: [\n ...(ignoreClicksInsideRefs || []),\n ...(refs || []),\n ],\n handler: onClickOutside,\n });\n\n return children as React.ReactElement;\n};\n\ninterface SidebarComponent\n extends React.FC<SidebarProps>,\n AsTagAttribute<'div'> {\n Content: typeof SidebarContent;\n Actions: typeof SidebarActions;\n}\n\nexport const Sidebar: SidebarComponent = (props) => {\n const {\n isOpen,\n onClose,\n onOpen,\n hasOverlay = true,\n onClickOutside,\n onEsc,\n position = sidebarPropPositionDefault,\n size = sidebarPropSizeDefault,\n className,\n children,\n container = window.document.body,\n style,\n rootClassName,\n afterClose,\n ...otherProps\n } = props;\n\n const ref = useRef<HTMLDivElement | null>(null);\n\n const portalRef = useRef<HTMLDivElement>(null);\n\n const { theme } = useTheme();\n\n useEffect(() => {\n if (isOpen) {\n onOpen?.();\n } else {\n onClose?.();\n }\n }, [isOpen]);\n\n useGlobalKeys({\n Escape: (e) => isOpen && onEsc && onEsc(e),\n });\n\n return (\n <Transition\n in={isOpen}\n unmountOnExit\n timeout={240}\n nodeRef={portalRef}\n onExiting={afterClose}\n >\n {(animate) => (\n <PortalWithTheme\n preset={theme}\n ref={portalRef}\n container={container}\n className={cnSidebar({ position, hasOverlay }, [rootClassName])}\n style={\n typeof style?.zIndex === 'number'\n ? { zIndex: style.zIndex }\n : undefined\n }\n >\n {hasOverlay && (\n <div\n className={cnSidebar('Overlay', { animate })}\n aria-label=\"Overlay\"\n />\n )}\n <div\n {...otherProps}\n style={{\n ...style,\n zIndex: undefined,\n }}\n className={cnSidebar('Window', { size, position, animate }, [\n className,\n ])}\n ref={ref}\n >\n <ContextConsumer\n onClickOutside={onClickOutside}\n ignoreClicksInsideRefs={[ref]}\n >\n {children}\n </ContextConsumer>\n </div>\n </PortalWithTheme>\n )}\n </Transition>\n );\n};\n\nSidebar.Content = SidebarContent;\nSidebar.Actions = SidebarActions;\n"],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@ export declare const withDefaultGetters: (props: SnackBarProps) => {
|
|
|
12
12
|
getItemOnAutoClose: SnackBarPropGetItemOnAutoClose<SnackBarItemDefault>;
|
|
13
13
|
items: SnackBarItemDefault[];
|
|
14
14
|
children?: undefined;
|
|
15
|
-
form?: "default" | "
|
|
15
|
+
form?: "default" | "brick" | "round" | undefined;
|
|
16
16
|
onItemClose?: ((item: SnackBarItemDefault) => void) | undefined;
|
|
17
17
|
onItemAutoClose?: ((item: SnackBarItemDefault) => void) | undefined;
|
|
18
18
|
defaultChecked?: boolean | undefined;
|
package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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=useFittingItems({tabsDimensions:c,containerRef:j,moreItemsRef:k}),m=
|
|
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
2
|
//# sourceMappingURL=TabsFitModeDropdownWrapper.js.map
|
package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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","containerRef","isItemHidden","hiddenItems","filter","_item","idx","maxTabHeight","useMemo","length","Math","max","map","tabRef","current","offsetHeight","
|
|
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,11 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TabDimensions } from '../types';
|
|
3
|
-
export declare const useFittingItems: ({ tabsDimensions, containerRef, moreItemsRef, }: {
|
|
3
|
+
export declare const useFittingItems: ({ tabsDimensions, containerRef, moreItemsRef, activeIndex, }: {
|
|
4
4
|
tabsDimensions: TabDimensions[];
|
|
5
5
|
containerRef: React.RefObject<HTMLElement>;
|
|
6
6
|
moreItemsRef: React.RefObject<HTMLElement>;
|
|
7
|
+
activeIndex?: number | undefined;
|
|
7
8
|
}) => {
|
|
8
|
-
|
|
9
|
+
visibleIndexes: number[];
|
|
9
10
|
isItemHidden: (idx: number) => boolean;
|
|
10
11
|
};
|
|
11
|
-
export declare const
|
|
12
|
+
export declare const getFittingItems: (tabsDimensions: TabDimensions[], totalWidth: number, moreItemsWidth: number, activeIndex?: number) => number[];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import React
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import React,{useMemo}from"react";import{useComponentSize}from"../../../hooks/useComponentSize/useComponentSize";export var useFittingItems=function(a){var b=a.tabsDimensions,c=a.containerRef,d=a.moreItemsRef,e=a.activeIndex,f=useComponentSize(c),g=f.width,h=useComponentSize(d),i=h.width,j=useMemo(function(){return getFittingItems(b,g,i,e)},[b,g,i,e]);return{visibleIndexes:j,isItemHidden:React.useCallback(function(a){return!j.includes(a)},[j])}};export var getFittingItems=function(a,b,c,d){if(!b)return Array.from({length:a.length}).map(function(a,b){return b});var e,f="number"==typeof d&&-1<d?a[d].size+a[d].gap:0,g=[],h=_createForOfIteratorHelper(a.entries());try{for(h.s();!(e=h.n()).done;){var i=_slicedToArray(e.value,2),j=i[0],k=i[1];if(j!==d){var l=j===a.length-1;if(f+=k.size+(l?0:k.gap),f+c>b)return d&&!g.includes(d)&&g.push(d),g;g.push(j)}else g.push(d)}}catch(a){h.e(a)}finally{h.f()}return Array.from({length:a.length}).map(function(a,b){return b})};
|
|
2
2
|
//# sourceMappingURL=useFittingItems.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFittingItems.js","names":["React","
|
|
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 +1,2 @@
|
|
|
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({getTabClassName:function getTabClassName(a){return cnTabsFitModeScrollWrapper("Tab",{noMargin:a===c.length-1})}})))};
|
|
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
2
|
//# sourceMappingURL=TabsFitModeScrollWrapper.js.map
|
package/__internal__/src/components/Tabs/FitModeScrollWrapper/TabsFitModeScrollWrapper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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","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 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
|
+
{"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,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import"./TabsLine.css";import React
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import"./TabsLine.css";import React,{useMemo}from"react";import{cn}from"../../../utils/bem";var cnTabsLine=cn("TabsLine");export var TabsBorderLine=function(a){var b=a.linePosition;return React.createElement(TabsLine,{type:"border",linePosition:b,size:"100%"})};export var TabsRunningLine=function(a){var b,c,d=a.linePosition,e=a.activeTabIdx,f=a.tabsDimensions,g=a.visibleIndexes,h=null!==(b=null===(c=f[e])||void 0===c?void 0:c.size)&&void 0!==b?b:0,i=useMemo(function(){return f.reduce(function(b,a,c){return b+(null!==g&&void 0!==g&&g.includes(c)&&c<e?a.size+a.gap:0)},0)},[f,g,e]);return React.createElement(TabsLine,{type:"running",linePosition:d,size:h,offset:i})};var TabsLine=function(a){var b,c=a.type,d=a.linePosition,e=a.size,f=a.offset,g=void 0===f?"0px":f;return React.createElement("div",{className:cnTabsLine({type:c,position:d}),style:(b={},_defineProperty(b,"--line-length",formatCSSValue(e)),_defineProperty(b,"--line-offset",formatCSSValue(g)),b)})},formatCSSValue=function(a){return"number"==typeof a?"".concat(a,"px"):a};
|
|
2
2
|
//# sourceMappingURL=TabsLine.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsLine.js","names":["React","
|
|
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,2 +1,2 @@
|
|
|
1
|
-
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["item","attributes"],_excluded2=["size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemAs","getItemAttributes","getItemRef","getItemLabel","onChange","iconSize","renderItem","getItemLeftIcon","getItemLeftSide","getItemRightIcon","getItemRightSide","getItemDisabled","disabled"];import"./Tabs.css";import React,{forwardRef}from"react";import{useRefs}from"../../hooks/useRefs";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{useResizeObserved}from"../../hooks/useResizeObserved/useResizeObserved";import{cn}from"../../utils/bem";import{getTabsDirection,getTabsWrapper,withDefaultGetters}from"./helpers";import{TabsBorderLine,TabsRunningLine}from"./Line/TabsLine";import{TabsTab}from"./Tab/TabsTab";import{tabsDefaultFitMode,tabsDefaultLinePosition,tabsDefaultSize,tabsDefaultView}from"./types";export var cnTabs=cn("Tabs");function renderItemDefault(a){var b=a.item,c=a.attributes,d=void 0===c?{}:c,e=_objectWithoutProperties(a,_excluded);return React.createElement(TabsTab,Object.assign({},d,e))}var TabsRender=function(a,b){var c=withDefaultGetters(a),d=c.size,e=void 0===d?tabsDefaultSize:d,f=c.className,g=c.items,h=c.view,i=void 0===h?tabsDefaultView:h,j=c.value,k=c.linePosition,l=void 0===k?tabsDefaultLinePosition:k,m=c.fitMode,n=void 0===m?tabsDefaultFitMode:m,o=c.onlyIcon,p=c.getItemIcon,q=c.getItemAs,r=c.getItemAttributes,s=c.getItemRef,t=c.getItemLabel,u=c.onChange,v=c.iconSize,w=c.renderItem,x=void 0===w?renderItemDefault:w,y=c.getItemLeftIcon,z=c.getItemLeftSide,A=c.getItemRightIcon,B=c.getItemRightSide,C=c.getItemDisabled,D=c.disabled,E=_objectWithoutProperties(c,_excluded2),F=useChoiceGroup({value:j||null,getKey:t,callBack:u,multiple:!1}),G=F.getOnChange,H=F.getChecked,I=getTabsDirection(l),J="vertical"===I,K=useRefs(g.length,[g,n,J]),L=useResizeObserved(K,function(a){var b;return{size:null!==(b=null===a||void 0===a?void 0:a[J?"offsetHeight":"offsetWidth"])&&void 0!==b?b:0,gap:a?parseInt(getComputedStyle(a)[J?"marginBottom":"marginRight"],10):0}}),M=g.findIndex(H),N=function(a,b,c){return x({item:a,onChange:function(){null===b||void 0===b?void 0:b(),G(a).apply(void 0,arguments)},checked:H(a),label:t(a).toString(),icon:p(a),leftIcon:y(a),rightIcon:A(a),leftSide:z(a),rightSide:B(a),disabled:D||C(a),onlyIcon:o,size:e,iconSize:v,renderInDropdown:c,as:q(a)||"button",tabRef:s(a),attributes:r(a)})},O=getTabsWrapper(I,n);return React.createElement("div",Object.assign({className:cnTabs({size:e,view:i,direction:I},[f]),ref:b},E),React.createElement(O,{tabRefs:K,tabsDimensions:L,renderItem:N,renderItemsList:function renderItemsList(a){var b=a.withRunningLine,c=a.getTabClassName;return React.createElement("div",{className:cnTabs("List",{direction:I,linePosition:l})},g.map(function(a,b){return React.createElement("div",{ref:K[b],key:t(a),className:cnTabs("Tab",{direction:I},[null===
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["item","attributes","as"],_excluded2=["size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemAs","getItemAttributes","getItemRef","getItemLabel","onChange","iconSize","renderItem","getItemLeftIcon","getItemLeftSide","getItemRightIcon","getItemRightSide","getItemDisabled","disabled"];import"./Tabs.css";import React,{forwardRef}from"react";import{useRefs}from"../../hooks/useRefs";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{useResizeObserved}from"../../hooks/useResizeObserved/useResizeObserved";import{cn}from"../../utils/bem";import{getTabsDirection,getTabsWrapper,withDefaultGetters}from"./helpers";import{TabsBorderLine,TabsRunningLine}from"./Line/TabsLine";import{TabsTab}from"./Tab/TabsTab";import{tabsDefaultFitMode,tabsDefaultLinePosition,tabsDefaultSize,tabsDefaultView}from"./types";export var cnTabs=cn("Tabs");function renderItemDefault(a){var b=a.item,c=a.attributes,d=void 0===c?{}:c,e=a.as,f=_objectWithoutProperties(a,_excluded);return React.createElement(TabsTab,Object.assign({},d,f,{as:e}))}var TabsRender=function(a,b){var c=withDefaultGetters(a),d=c.size,e=void 0===d?tabsDefaultSize:d,f=c.className,g=c.items,h=c.view,i=void 0===h?tabsDefaultView:h,j=c.value,k=c.linePosition,l=void 0===k?tabsDefaultLinePosition:k,m=c.fitMode,n=void 0===m?tabsDefaultFitMode:m,o=c.onlyIcon,p=c.getItemIcon,q=c.getItemAs,r=c.getItemAttributes,s=c.getItemRef,t=c.getItemLabel,u=c.onChange,v=c.iconSize,w=c.renderItem,x=void 0===w?renderItemDefault:w,y=c.getItemLeftIcon,z=c.getItemLeftSide,A=c.getItemRightIcon,B=c.getItemRightSide,C=c.getItemDisabled,D=c.disabled,E=_objectWithoutProperties(c,_excluded2),F=useChoiceGroup({value:j||null,getKey:t,callBack:u,multiple:!1}),G=F.getOnChange,H=F.getChecked,I=getTabsDirection(l),J="vertical"===I,K=useRefs(g.length,[g,n,J]),L=useResizeObserved(K,function(a){var b;return{size:null!==(b=null===a||void 0===a?void 0:a[J?"offsetHeight":"offsetWidth"])&&void 0!==b?b:0,gap:a?parseInt(getComputedStyle(a)[J?"marginBottom":"marginRight"],10):0}}),M=g.findIndex(H),N=function(a,b,c){return x({item:a,onChange:function(){null===b||void 0===b?void 0:b(),G(a).apply(void 0,arguments)},checked:H(a),label:t(a).toString(),icon:p(a),leftIcon:y(a),rightIcon:A(a),leftSide:z(a),rightSide:B(a),disabled:D||C(a),onlyIcon:o,size:e,iconSize:v,renderInDropdown:c,as:q(a)||"button",tabRef:s(a),attributes:r(a)})},O=getTabsWrapper(I,n);return React.createElement("div",Object.assign({className:cnTabs({size:e,view:i,direction:I},[f]),ref:b},E),React.createElement(O,{tabRefs:K,tabsDimensions:L,renderItem:N,renderItemsList:function renderItemsList(a){var b=a.withRunningLine,c=a.visibleIndexes,d=a.getTabClassName;return React.createElement("div",{className:cnTabs("List",{direction:I,linePosition:l})},g.map(function(a,b){return React.createElement("div",{ref:K[b],key:t(a),className:cnTabs("Tab",{direction:I},[null===d||void 0===d?void 0:d(b)])},N(a))}),(!(void 0!==b)||b)&&!D&&React.createElement(TabsRunningLine,{visibleIndexes:c,linePosition:l,tabsDimensions:L,activeTabIdx:M}))},getItemLabel:t,getItemChecked:H,items:g,size:e}),"bordered"===i&&React.createElement(TabsBorderLine,{linePosition:l}))};export var Tabs=forwardRef(TabsRender);export*from"./types";
|
|
2
2
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","names":["React","forwardRef","useRefs","useChoiceGroup","useResizeObserved","cn","getTabsDirection","getTabsWrapper","withDefaultGetters","TabsBorderLine","TabsRunningLine","TabsTab","tabsDefaultFitMode","tabsDefaultLinePosition","tabsDefaultSize","tabsDefaultView","cnTabs","renderItemDefault","props","item","attributes","otherProps","TabsRender","ref","size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemAs","getItemAttributes","getItemRef","getItemLabel","onChange","iconSize","renderItem","renderItemProp","getItemLeftIcon","getItemLeftSide","getItemRightIcon","getItemRightSide","getItemDisabled","disabled","getKey","callBack","multiple","getOnChange","getChecked","tabsDirection","isVertical","tabRefs","length","tabsDimensions","el","gap","parseInt","getComputedStyle","activeTabIdx","findIndex","onClick","renderInDropdown","checked","label","toString","icon","leftIcon","rightIcon","leftSide","rightSide","as","tabRef","Wrapper","direction","renderItemsList","withRunningLine","getTabClassName","map","idx","Tabs"],"sources":["../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import './Tabs.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { useRefs } from '##/hooks/useRefs';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { useResizeObserved } from '../../hooks/useResizeObserved/useResizeObserved';\nimport { cn } from '../../utils/bem';\nimport {\n getTabsDirection,\n getTabsWrapper,\n withDefaultGetters,\n} from './helpers';\nimport { TabsBorderLine, TabsRunningLine } from './Line/TabsLine';\nimport { TabsTab } from './Tab/TabsTab';\nimport {\n RenderItemProps,\n RenderItemsListProp,\n TabDimensions,\n TabsComponent,\n tabsDefaultFitMode,\n tabsDefaultLinePosition,\n tabsDefaultSize,\n tabsDefaultView,\n TabsProps,\n} from './types';\n\nexport const cnTabs = cn('Tabs');\n\nfunction renderItemDefault<ITEM>(\n props: RenderItemProps<ITEM>,\n): React.ReactElement {\n const { item, attributes = {}, ...otherProps } = props;\n return <TabsTab {...attributes} {...otherProps} />;\n}\n\nconst TabsRender = (props: TabsProps, ref: React.Ref<HTMLDivElement>) => {\n const {\n size = tabsDefaultSize,\n className,\n items,\n view = tabsDefaultView,\n value,\n linePosition = tabsDefaultLinePosition,\n fitMode = tabsDefaultFitMode,\n onlyIcon,\n getItemIcon,\n getItemAs,\n getItemAttributes,\n getItemRef,\n getItemLabel,\n onChange,\n iconSize,\n renderItem: renderItemProp = renderItemDefault,\n getItemLeftIcon,\n getItemLeftSide,\n getItemRightIcon,\n getItemRightSide,\n getItemDisabled,\n disabled,\n ...otherProps\n } = withDefaultGetters(props);\n\n const { getOnChange, getChecked } = useChoiceGroup({\n value: value || null,\n getKey: getItemLabel,\n callBack: onChange,\n multiple: false,\n });\n\n const tabsDirection = getTabsDirection(linePosition);\n const isVertical = tabsDirection === 'vertical';\n const tabRefs = useRefs<HTMLDivElement>(items.length, [\n items,\n fitMode,\n isVertical,\n ]);\n\n const tabsDimensions = useResizeObserved(\n tabRefs,\n (el): TabDimensions => ({\n size: el?.[isVertical ? 'offsetHeight' : 'offsetWidth'] ?? 0,\n gap: el\n ? parseInt(\n getComputedStyle(el)[isVertical ? 'marginBottom' : 'marginRight'],\n 10,\n )\n : 0,\n }),\n );\n\n const activeTabIdx = items.findIndex(getChecked);\n\n const renderItem = (\n item: typeof items[number],\n onClick?: () => void,\n renderInDropdown?: boolean,\n ) =>\n renderItemProp({\n item,\n onChange: (...args) => {\n onClick?.();\n getOnChange(item)(...args);\n },\n checked: getChecked(item),\n label: getItemLabel(item).toString(),\n icon: getItemIcon(item),\n leftIcon: getItemLeftIcon(item),\n rightIcon: getItemRightIcon(item),\n leftSide: getItemLeftSide(item),\n rightSide: getItemRightSide(item),\n disabled: disabled || getItemDisabled(item),\n onlyIcon,\n size,\n iconSize,\n renderInDropdown,\n as: getItemAs(item) || 'button',\n tabRef: getItemRef(item),\n attributes: getItemAttributes(item),\n });\n\n const renderItemsList: RenderItemsListProp = ({\n withRunningLine = true,\n getTabClassName,\n }) => (\n <div className={cnTabs('List', { direction: tabsDirection, linePosition })}>\n {items.map((item, idx) => (\n <div\n ref={tabRefs[idx]}\n key={getItemLabel(item)}\n className={cnTabs('Tab', { direction: tabsDirection }, [\n getTabClassName?.(idx),\n ])}\n >\n {renderItem(item)}\n </div>\n ))}\n {withRunningLine && !disabled && (\n <TabsRunningLine\n linePosition={linePosition}\n tabsDimensions={tabsDimensions}\n activeTabIdx={activeTabIdx}\n />\n )}\n </div>\n );\n\n const Wrapper = getTabsWrapper(tabsDirection, fitMode);\n\n return (\n <div\n className={cnTabs({ size, view, direction: tabsDirection }, [className])}\n ref={ref}\n {...otherProps}\n >\n <Wrapper\n tabRefs={tabRefs}\n tabsDimensions={tabsDimensions}\n renderItem={renderItem}\n renderItemsList={renderItemsList}\n getItemLabel={getItemLabel}\n getItemChecked={getChecked}\n items={items}\n size={size}\n />\n {view === 'bordered' && <TabsBorderLine linePosition={linePosition} />}\n </div>\n );\n};\n\nexport const Tabs = forwardRef(TabsRender) as TabsComponent;\n\nexport * from './types';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tabs.js","names":["React","forwardRef","useRefs","useChoiceGroup","useResizeObserved","cn","getTabsDirection","getTabsWrapper","withDefaultGetters","TabsBorderLine","TabsRunningLine","TabsTab","tabsDefaultFitMode","tabsDefaultLinePosition","tabsDefaultSize","tabsDefaultView","cnTabs","renderItemDefault","props","item","attributes","as","otherProps","TabsRender","ref","size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemAs","getItemAttributes","getItemRef","getItemLabel","onChange","iconSize","renderItem","renderItemProp","getItemLeftIcon","getItemLeftSide","getItemRightIcon","getItemRightSide","getItemDisabled","disabled","getKey","callBack","multiple","getOnChange","getChecked","tabsDirection","isVertical","tabRefs","length","tabsDimensions","el","gap","parseInt","getComputedStyle","activeTabIdx","findIndex","onClick","renderInDropdown","checked","label","toString","icon","leftIcon","rightIcon","leftSide","rightSide","tabRef","Wrapper","direction","renderItemsList","withRunningLine","visibleIndexes","getTabClassName","map","idx","Tabs"],"sources":["../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import './Tabs.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { useRefs } from '##/hooks/useRefs';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { useResizeObserved } from '../../hooks/useResizeObserved/useResizeObserved';\nimport { cn } from '../../utils/bem';\nimport {\n getTabsDirection,\n getTabsWrapper,\n withDefaultGetters,\n} from './helpers';\nimport { TabsBorderLine, TabsRunningLine } from './Line/TabsLine';\nimport { TabsTab } from './Tab/TabsTab';\nimport {\n RenderItemProps,\n RenderItemsListProp,\n TabDimensions,\n TabsComponent,\n tabsDefaultFitMode,\n tabsDefaultLinePosition,\n tabsDefaultSize,\n tabsDefaultView,\n TabsProps,\n} from './types';\n\nexport const cnTabs = cn('Tabs');\n\nfunction renderItemDefault<ITEM>(\n props: RenderItemProps<ITEM>,\n): React.ReactElement {\n const { item, attributes = {}, as, ...otherProps } = props;\n return <TabsTab {...attributes} {...otherProps} as={as} />;\n}\n\nconst TabsRender = (props: TabsProps, ref: React.Ref<HTMLDivElement>) => {\n const {\n size = tabsDefaultSize,\n className,\n items,\n view = tabsDefaultView,\n value,\n linePosition = tabsDefaultLinePosition,\n fitMode = tabsDefaultFitMode,\n onlyIcon,\n getItemIcon,\n getItemAs,\n getItemAttributes,\n getItemRef,\n getItemLabel,\n onChange,\n iconSize,\n renderItem: renderItemProp = renderItemDefault,\n getItemLeftIcon,\n getItemLeftSide,\n getItemRightIcon,\n getItemRightSide,\n getItemDisabled,\n disabled,\n ...otherProps\n } = withDefaultGetters(props);\n\n const { getOnChange, getChecked } = useChoiceGroup({\n value: value || null,\n getKey: getItemLabel,\n callBack: onChange,\n multiple: false,\n });\n\n const tabsDirection = getTabsDirection(linePosition);\n const isVertical = tabsDirection === 'vertical';\n const tabRefs = useRefs<HTMLDivElement>(items.length, [\n items,\n fitMode,\n isVertical,\n ]);\n\n const tabsDimensions = useResizeObserved(\n tabRefs,\n (el): TabDimensions => ({\n size: el?.[isVertical ? 'offsetHeight' : 'offsetWidth'] ?? 0,\n gap: el\n ? parseInt(\n getComputedStyle(el)[isVertical ? 'marginBottom' : 'marginRight'],\n 10,\n )\n : 0,\n }),\n );\n\n const activeTabIdx = items.findIndex(getChecked);\n\n const renderItem = (\n item: typeof items[number],\n onClick?: () => void,\n renderInDropdown?: boolean,\n ) =>\n renderItemProp({\n item,\n onChange: (...args) => {\n onClick?.();\n getOnChange(item)(...args);\n },\n checked: getChecked(item),\n label: getItemLabel(item).toString(),\n icon: getItemIcon(item),\n leftIcon: getItemLeftIcon(item),\n rightIcon: getItemRightIcon(item),\n leftSide: getItemLeftSide(item),\n rightSide: getItemRightSide(item),\n disabled: disabled || getItemDisabled(item),\n onlyIcon,\n size,\n iconSize,\n renderInDropdown,\n as: getItemAs(item) || 'button',\n tabRef: getItemRef(item),\n attributes: getItemAttributes(item),\n });\n\n const renderItemsList: RenderItemsListProp = ({\n withRunningLine = true,\n visibleIndexes,\n getTabClassName,\n }) => (\n <div className={cnTabs('List', { direction: tabsDirection, linePosition })}>\n {items.map((item, idx) => (\n <div\n ref={tabRefs[idx]}\n key={getItemLabel(item)}\n className={cnTabs('Tab', { direction: tabsDirection }, [\n getTabClassName?.(idx),\n ])}\n >\n {renderItem(item)}\n </div>\n ))}\n {withRunningLine && !disabled && (\n <TabsRunningLine\n visibleIndexes={visibleIndexes}\n linePosition={linePosition}\n tabsDimensions={tabsDimensions}\n activeTabIdx={activeTabIdx}\n />\n )}\n </div>\n );\n\n const Wrapper = getTabsWrapper(tabsDirection, fitMode);\n\n return (\n <div\n className={cnTabs({ size, view, direction: tabsDirection }, [className])}\n ref={ref}\n {...otherProps}\n >\n <Wrapper\n tabRefs={tabRefs}\n tabsDimensions={tabsDimensions}\n renderItem={renderItem}\n renderItemsList={renderItemsList}\n getItemLabel={getItemLabel}\n getItemChecked={getChecked}\n items={items}\n size={size}\n />\n {view === 'bordered' && <TabsBorderLine linePosition={linePosition} />}\n </div>\n );\n};\n\nexport const Tabs = forwardRef(TabsRender) as TabsComponent;\n\nexport * from './types';\n"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { IconComponent, IconPropSize } from '@consta/icons/Icon';
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import { AsAttributes, AsTags } from "../../utils/types/AsTags";
|
|
3
4
|
import { PropsWithAsAttributes } from "../../utils/types/PropsWithAsAttributes";
|
|
4
5
|
import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
|
|
5
6
|
export declare type TabDimensions = {
|
|
@@ -13,9 +14,9 @@ export declare type TabsItemDefault = {
|
|
|
13
14
|
rightSide?: React.ReactNode;
|
|
14
15
|
leftSide?: React.ReactNode;
|
|
15
16
|
disabled?: boolean;
|
|
16
|
-
as?:
|
|
17
|
+
as?: AsTags;
|
|
17
18
|
ref?: React.RefObject<HTMLElement>;
|
|
18
|
-
attributes?:
|
|
19
|
+
attributes?: AsAttributes;
|
|
19
20
|
/**
|
|
20
21
|
* @deprecated since version 4.11.0 use leftIcon
|
|
21
22
|
*/
|
|
@@ -37,7 +38,7 @@ export declare type TabsPropGetItemLabel<ITEM> = (item: ITEM) => string | number
|
|
|
37
38
|
export declare type TabsPropGetItemChecked<ITEM> = (item: ITEM) => boolean | undefined;
|
|
38
39
|
export declare type TabsPropGetItemIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
|
|
39
40
|
export declare type TabsPropGetItemSide<ITEM> = (item: ITEM) => React.ReactNode | undefined;
|
|
40
|
-
export declare type TabsPropGetItemAs<ITEM> = (item: ITEM) =>
|
|
41
|
+
export declare type TabsPropGetItemAs<ITEM> = (item: ITEM) => AsTags | undefined;
|
|
41
42
|
export declare type TabsPropGetItemAttributes<ITEM> = (item: ITEM) => TabsItemDefault['attributes'];
|
|
42
43
|
export declare type TabsPropGetItemRef<ITEM> = (item: ITEM) => React.RefObject<HTMLElement> | undefined;
|
|
43
44
|
export declare type TabsPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;
|
|
@@ -103,7 +104,7 @@ export declare type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesA
|
|
|
103
104
|
getItemLabel: TabsPropGetItemLabel<ITEM>;
|
|
104
105
|
});
|
|
105
106
|
export declare type TabsComponent = <ITEM>(props: TabsProps<ITEM>) => React.ReactElement | null;
|
|
106
|
-
export declare type TabsTabProps<AS extends
|
|
107
|
+
export declare type TabsTabProps<AS extends AsTags = 'button'> = PropsWithAsAttributes<{
|
|
107
108
|
onChange: React.MouseEventHandler;
|
|
108
109
|
checked: boolean;
|
|
109
110
|
size: TabsPropSize;
|
|
@@ -114,7 +115,7 @@ export declare type TabsTabProps<AS extends keyof JSX.IntrinsicElements = 'butto
|
|
|
114
115
|
tabRef?: React.RefObject<HTMLElement>;
|
|
115
116
|
renderInDropdown?: boolean;
|
|
116
117
|
} & Omit<TabsItemDefault, 'label' | 'ref' | 'attributes'>, AS>;
|
|
117
|
-
export declare type TabsTabComponent = <AS extends
|
|
118
|
+
export declare type TabsTabComponent = <AS extends AsTags = 'button'>(props: TabsTabProps<AS>) => React.ReactElement | null;
|
|
118
119
|
export declare type TabsMoreItemsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<{
|
|
119
120
|
items: ITEM[];
|
|
120
121
|
renderItem: (item: ITEM, onClick: () => void, renderInDropdown?: boolean) => React.ReactNode;
|
|
@@ -125,6 +126,7 @@ export declare type TabsMoreItemsProps<ITEM = TabsItemDefault> = PropsWithHTMLAt
|
|
|
125
126
|
} & React.RefAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
126
127
|
export declare type TabsMoreItemsComponent = <ITEM>(props: TabsMoreItemsProps<ITEM>) => React.ReactElement | null;
|
|
127
128
|
export declare type RenderItemsListProp = (props: {
|
|
129
|
+
visibleIndexes?: number[];
|
|
128
130
|
withRunningLine?: boolean;
|
|
129
131
|
getTabClassName?: (idx: number) => string | undefined;
|
|
130
132
|
}) => React.ReactNode;
|
|
@@ -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 { 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?:
|
|
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,5 +1,6 @@
|
|
|
1
1
|
import { IconComponent, IconProps } from '@consta/icons/Icon';
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import { AsTagAttribute, AsTags } from "../../utils/types/AsTags";
|
|
3
4
|
import { TagBase } from '../TagBase/TagBase';
|
|
4
5
|
declare type TagBaseProps = React.ComponentProps<typeof TagBase>;
|
|
5
6
|
export declare const tagPropMode: readonly ["button", "check", "cancel", "link", "info"];
|
|
@@ -50,14 +51,14 @@ declare type PropsWithModeInfo = CommonProps & {
|
|
|
50
51
|
onChange?: never;
|
|
51
52
|
checked?: never;
|
|
52
53
|
};
|
|
53
|
-
declare type Props<ROLE extends TagPropMode = 'button'> = ROLE extends 'button' ? PropsWithModeButton & Omit<
|
|
54
|
+
declare type Props<ROLE extends TagPropMode = 'button'> = ROLE extends 'button' ? PropsWithModeButton & Omit<AsTagAttribute<'button'>, keyof PropsWithModeButton> : {} & ROLE extends 'check' ? PropsWithModeCheck & Omit<AsTagAttribute<'button'>, keyof PropsWithModeCheck> : {} & ROLE extends 'cancel' ? PropsWithModeCancel & Omit<AsTagAttribute<'span'>, keyof PropsWithModeCancel> : {} & ROLE extends 'link' ? PropsWithModeLink & Omit<AsTagAttribute<'a'>, keyof PropsWithModeLink> : {} & ROLE extends 'info' ? PropsWithModeInfo & Omit<AsTagAttribute<'span'>, keyof PropsWithModeInfo> : {};
|
|
54
55
|
declare type TagComponent = <ROLE extends TagPropMode>(props: Props<ROLE> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
|
|
55
56
|
export declare function getParams(mode: TagPropMode, checked?: PropsWithModeCheck['checked'], onClick?: React.MouseEventHandler, onChange?: PropsWithModeCheck['onChange'], onCancel?: PropsWithModeCancel['onCancel']): {
|
|
56
57
|
view?: TagBaseProps['view'];
|
|
57
58
|
onClick?: TagBaseProps['onClick'];
|
|
58
59
|
onCancel?: TagBaseProps['onCancel'];
|
|
59
60
|
withAction?: TagBaseProps['withAction'];
|
|
60
|
-
as:
|
|
61
|
+
as: AsTags;
|
|
61
62
|
};
|
|
62
63
|
export declare const COMPONENT_NAME: "Tag";
|
|
63
64
|
export declare const Tag: TagComponent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","names":["React","forwardRef","useRef","useForkRef","usePropsHandler","TagBase","tagPropMode","tagPropModeDefault","getParams","mode","checked","onClick","onChange","onCancel","view","as","withAction","e","COMPONENT_NAME","TagRenter","props","ref","tagRef","otherProps","params","Tag"],"sources":["../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { IconComponent, IconProps } from '@consta/icons/Icon';\nimport React, { forwardRef, useRef } from 'react';\n\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { TagBase } from '../TagBase/TagBase';\n\ntype TagBaseProps = React.ComponentProps<typeof TagBase>;\n\nexport const tagPropMode = [\n 'button',\n 'check',\n 'cancel',\n 'link',\n 'info',\n] as const;\nexport const tagPropModeDefault = tagPropMode[0];\ntype TagPropMode = typeof tagPropMode[number];\n\ntype CommonProps = {\n size?: TagBaseProps['size'];\n label: TagBaseProps['label'];\n group?: TagBaseProps['group'];\n icon?: IconComponent;\n iconSize?: IconProps['size'];\n children?: never;\n};\n\ntype PropsWithModeButton = CommonProps & {\n mode?: 'button';\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n checked?: never;\n onChange?: never;\n onCancel?: never;\n};\n\ntype PropsWithModeLink = CommonProps & {\n mode: 'link';\n checked?: never;\n onChange?: never;\n onCancel?: never;\n};\n\ntype PropsWithModeCheck = CommonProps & {\n mode: 'check';\n onChange: ({\n e,\n checked,\n }: {\n e?: React.MouseEvent;\n checked: boolean;\n }) => void;\n checked: boolean;\n onClick?: never;\n onCancel?: never;\n};\n\ntype PropsWithModeCancel = CommonProps & {\n mode: 'cancel';\n onCancel: React.MouseEventHandler<HTMLButtonElement>;\n onClick?: never;\n onChange?: never;\n checked?: never;\n};\n\ntype PropsWithModeInfo = CommonProps & {\n mode: 'info';\n onCancel?: never;\n onClick?: never;\n onChange?: never;\n checked?: never;\n};\n\ntype Props<ROLE extends TagPropMode = 'button'> = ROLE extends 'button'\n ? PropsWithModeButton &\n Omit<
|
|
1
|
+
{"version":3,"file":"Tag.js","names":["React","forwardRef","useRef","useForkRef","usePropsHandler","TagBase","tagPropMode","tagPropModeDefault","getParams","mode","checked","onClick","onChange","onCancel","view","as","withAction","e","COMPONENT_NAME","TagRenter","props","ref","tagRef","otherProps","params","Tag"],"sources":["../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { IconComponent, IconProps } from '@consta/icons/Icon';\nimport React, { forwardRef, useRef } from 'react';\n\nimport { AsTagAttribute, AsTags } from '##/utils/types/AsTags';\n\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { TagBase } from '../TagBase/TagBase';\n\ntype TagBaseProps = React.ComponentProps<typeof TagBase>;\n\nexport const tagPropMode = [\n 'button',\n 'check',\n 'cancel',\n 'link',\n 'info',\n] as const;\nexport const tagPropModeDefault = tagPropMode[0];\ntype TagPropMode = typeof tagPropMode[number];\n\ntype CommonProps = {\n size?: TagBaseProps['size'];\n label: TagBaseProps['label'];\n group?: TagBaseProps['group'];\n icon?: IconComponent;\n iconSize?: IconProps['size'];\n children?: never;\n};\n\ntype PropsWithModeButton = CommonProps & {\n mode?: 'button';\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n checked?: never;\n onChange?: never;\n onCancel?: never;\n};\n\ntype PropsWithModeLink = CommonProps & {\n mode: 'link';\n checked?: never;\n onChange?: never;\n onCancel?: never;\n};\n\ntype PropsWithModeCheck = CommonProps & {\n mode: 'check';\n onChange: ({\n e,\n checked,\n }: {\n e?: React.MouseEvent;\n checked: boolean;\n }) => void;\n checked: boolean;\n onClick?: never;\n onCancel?: never;\n};\n\ntype PropsWithModeCancel = CommonProps & {\n mode: 'cancel';\n onCancel: React.MouseEventHandler<HTMLButtonElement>;\n onClick?: never;\n onChange?: never;\n checked?: never;\n};\n\ntype PropsWithModeInfo = CommonProps & {\n mode: 'info';\n onCancel?: never;\n onClick?: never;\n onChange?: never;\n checked?: never;\n};\n\ntype Props<ROLE extends TagPropMode = 'button'> = ROLE extends 'button'\n ? PropsWithModeButton &\n Omit<AsTagAttribute<'button'>, keyof PropsWithModeButton>\n : {} & ROLE extends 'check'\n ? PropsWithModeCheck &\n Omit<AsTagAttribute<'button'>, keyof PropsWithModeCheck>\n : {} & ROLE extends 'cancel'\n ? PropsWithModeCancel &\n Omit<AsTagAttribute<'span'>, keyof PropsWithModeCancel>\n : {} & ROLE extends 'link'\n ? PropsWithModeLink & Omit<AsTagAttribute<'a'>, keyof PropsWithModeLink>\n : {} & ROLE extends 'info'\n ? PropsWithModeInfo & Omit<AsTagAttribute<'span'>, keyof PropsWithModeInfo>\n : {};\n\ntype TagRender = <ROLE extends TagPropMode>(\n props: Props<ROLE>,\n ref: React.Ref<HTMLElement>,\n) => React.ReactElement | null;\n\ntype TagComponent = <ROLE extends TagPropMode>(\n props: Props<ROLE> & React.RefAttributes<HTMLElement>,\n) => React.ReactElement | null;\n\nexport function getParams(\n mode: TagPropMode,\n checked?: PropsWithModeCheck['checked'],\n onClick?: React.MouseEventHandler,\n onChange?: PropsWithModeCheck['onChange'],\n onCancel?: PropsWithModeCancel['onCancel'],\n): {\n view?: TagBaseProps['view'];\n onClick?: TagBaseProps['onClick'];\n onCancel?: TagBaseProps['onCancel'];\n withAction?: TagBaseProps['withAction'];\n as: AsTags;\n} {\n switch (mode) {\n case 'button':\n return {\n view: 'filled',\n onClick,\n as: 'button',\n withAction: true,\n };\n case 'link':\n return {\n view: 'filled',\n onClick,\n as: 'a',\n withAction: true,\n };\n case 'check':\n return {\n view: checked ? 'filled' : 'stroked',\n onClick:\n typeof onChange === 'function'\n ? (e: React.MouseEvent) => onChange({ e, checked: !checked })\n : undefined,\n as: 'button',\n withAction: true,\n };\n case 'cancel':\n return {\n view: 'filled',\n onCancel,\n as: 'span',\n };\n case 'info':\n return {\n view: 'filled',\n as: 'span',\n };\n }\n}\n\nexport const COMPONENT_NAME = 'Tag' as const;\n\nconst TagRenter: TagRender = (props, ref) => {\n const tagRef = useRef<HTMLDivElement>(null);\n const {\n mode = tagPropModeDefault,\n onChange,\n checked,\n onCancel,\n onClick,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, tagRef);\n const params = getParams(mode, checked, onClick, onChange, onCancel);\n\n return (\n <TagBase {...otherProps} {...params} ref={useForkRef([ref, tagRef])} />\n );\n};\n\nexport const Tag = forwardRef(TagRenter) as TagComponent;\n"],"mappings":"sJACA,MAAOA,MAAP,EAAgBC,UAAhB,CAA4BC,MAA5B,KAA0C,OAA1C,CAIA,OAASC,UAAT,yCACA,OAASC,eAAT,2CACA,OAASC,OAAT,0BAIA,MAAO,IAAMC,YAAW,CAAG,CACzB,QADyB,CAEzB,OAFyB,CAGzB,QAHyB,CAIzB,MAJyB,CAKzB,MALyB,CAApB,CAOP,MAAO,IAAMC,mBAAkB,CAAGD,WAAW,CAAC,CAAD,CAAtC,CAiFP,MAAO,SAASE,UAAT,CACLC,CADK,CAELC,CAFK,CAGLC,CAHK,CAILC,CAJK,CAKLC,CALK,CAYL,OAEO,QAFP,GACQJ,CADR,CAGW,CACLK,IAAI,CAAE,QADD,CAELH,OAAO,CAAPA,CAFK,CAGLI,EAAE,CAAE,QAHC,CAILC,UAAU,GAJL,CAHX,CASO,MATP,GACQP,CADR,CAUW,CACLK,IAAI,CAAE,QADD,CAELH,OAAO,CAAPA,CAFK,CAGLI,EAAE,CAAE,GAHC,CAILC,UAAU,GAJL,CAVX,CAgBO,OAhBP,GACQP,CADR,CAiBW,CACLK,IAAI,CAAEJ,CAAO,CAAG,QAAH,CAAc,SADtB,CAELC,OAAO,CACe,UAApB,QAAOC,EAAP,CACI,SAACK,CAAD,QAAyBL,EAAQ,CAAC,CAAEK,CAAC,CAADA,CAAF,CAAKP,OAAO,CAAE,CAACA,CAAf,CAAD,CAAjC,CADJ,OAHG,CAMLK,EAAE,CAAE,QANC,CAOLC,UAAU,GAPL,CAjBX,CA0BO,QA1BP,GACQP,CADR,CA2BW,CACLK,IAAI,CAAE,QADD,CAELD,QAAQ,CAARA,CAFK,CAGLE,EAAE,CAAE,MAHC,CA3BX,CAgCO,MAhCP,GACQN,CADR,CAiCW,CACLK,IAAI,CAAE,QADD,CAELC,EAAE,CAAE,MAFC,CAjCX,OAsCD,CAED,MAAO,IAAMG,eAAc,CAAG,KAAvB,CAEP,GAAMC,UAAoB,CAAG,SAACC,CAAD,CAAQC,CAAR,CAAgB,IACrCC,EAAM,CAAGpB,MAAM,CAAiB,IAAjB,CADsB,GASvCE,eAAe,CAACc,cAAD,CAAiBE,CAAjB,CAAwBE,CAAxB,CATwB,KAGzCb,IAHyC,CAGzCA,CAHyC,YAGlCF,kBAHkC,GAIzCK,CAJyC,GAIzCA,QAJyC,CAKzCF,CALyC,GAKzCA,OALyC,CAMzCG,CANyC,GAMzCA,QANyC,CAOzCF,CAPyC,GAOzCA,OAPyC,CAQtCY,CARsC,uCAUrCC,CAAM,CAAGhB,SAAS,CAACC,CAAD,CAAOC,CAAP,CAAgBC,CAAhB,CAAyBC,CAAzB,CAAmCC,CAAnC,CAVmB,CAY3C,MACE,qBAAC,OAAD,kBAAaU,CAAb,CAA6BC,CAA7B,EAAqC,GAAG,CAAErB,UAAU,CAAC,CAACkB,CAAD,CAAMC,CAAN,CAAD,CAApD,GAEH,CAfD,CAiBA,MAAO,IAAMG,IAAG,CAAGxB,UAAU,CAACkB,SAAD,CAAtB"}
|