@salutejs/plasma-new-hope 0.335.0-canary.2196.17375511532.0 → 0.335.0-canary.2197.17377664818.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/cjs/components/Autocomplete/Autocomplete.js +6 -1
- package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
- package/cjs/components/Autocomplete/ui/VirtualList/VirtualList.js +13 -43
- package/cjs/components/Autocomplete/ui/VirtualList/VirtualList.js.map +1 -1
- package/cjs/components/Carousel/CarouselNew/Carousel.js +3 -4
- package/cjs/components/Carousel/CarouselNew/Carousel.js.map +1 -1
- package/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js +1 -6
- package/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.js +34 -18
- package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +2 -3
- package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +11 -5
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.js +13 -43
- package/cjs/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.js.map +1 -1
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +1 -3
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +2 -5
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.js +2 -4
- package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/cjs/components/Popup/ClientOnlyPortal.js +2 -15
- package/cjs/components/Popup/ClientOnlyPortal.js.map +1 -1
- package/cjs/components/Popup/PopupContext.js +5 -26
- package/cjs/components/Popup/PopupContext.js.map +1 -1
- package/cjs/components/Select/Select.js +4 -3
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/Select.styles.js +2 -3
- package/cjs/components/Select/Select.styles.js.map +1 -1
- package/cjs/components/Select/ui/Inner/Inner.js +11 -5
- package/cjs/components/Select/ui/Inner/Inner.js.map +1 -1
- package/cjs/components/Select/ui/VirtualList/VirtualList.js +13 -43
- package/cjs/components/Select/ui/VirtualList/VirtualList.js.map +1 -1
- package/emotion/cjs/components/Autocomplete/Autocomplete.js +8 -1
- package/emotion/cjs/components/Autocomplete/ui/VirtualList/VirtualList.js +16 -84
- package/emotion/cjs/components/Carousel/CarouselNew/Carousel.js +2 -2
- package/emotion/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js +1 -6
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +48 -28
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +15 -15
- package/emotion/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +50 -9
- package/emotion/cjs/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.js +16 -84
- package/emotion/cjs/components/Combobox/ComboboxNew/utils/index.js +0 -4
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +1 -3
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +3 -5
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +2 -4
- package/emotion/cjs/components/Popup/ClientOnlyPortal.js +2 -14
- package/emotion/cjs/components/Popup/PopupContext.js +6 -25
- package/emotion/cjs/components/Select/Select.js +4 -2
- package/emotion/cjs/components/Select/Select.styles.js +7 -7
- package/emotion/cjs/components/Select/ui/Inner/Inner.js +50 -9
- package/emotion/cjs/components/Select/ui/VirtualList/VirtualList.js +16 -84
- package/emotion/cjs/examples/components/Combobox/Combobox.js +15 -0
- package/emotion/es/components/Autocomplete/Autocomplete.js +9 -2
- package/emotion/es/components/Autocomplete/ui/VirtualList/VirtualList.js +13 -45
- package/emotion/es/components/Carousel/CarouselNew/Carousel.js +2 -2
- package/emotion/es/components/Carousel/CarouselNew/hooks/useCarousel.js +1 -6
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +34 -14
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.styles.js +15 -15
- package/emotion/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +11 -6
- package/emotion/es/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.js +13 -45
- package/emotion/es/components/Combobox/ComboboxNew/utils/index.js +0 -1
- package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +1 -3
- package/emotion/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +3 -5
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +2 -4
- package/emotion/es/components/Popup/ClientOnlyPortal.js +2 -14
- package/emotion/es/components/Popup/PopupContext.js +6 -25
- package/emotion/es/components/Select/Select.js +4 -2
- package/emotion/es/components/Select/Select.styles.js +7 -7
- package/emotion/es/components/Select/ui/Inner/Inner.js +11 -6
- package/emotion/es/components/Select/ui/VirtualList/VirtualList.js +13 -45
- package/es/components/Autocomplete/Autocomplete.js +7 -2
- package/es/components/Autocomplete/Autocomplete.js.map +1 -1
- package/es/components/Autocomplete/ui/VirtualList/VirtualList.js +13 -44
- package/es/components/Autocomplete/ui/VirtualList/VirtualList.js.map +1 -1
- package/es/components/Carousel/CarouselNew/Carousel.js +4 -5
- package/es/components/Carousel/CarouselNew/Carousel.js.map +1 -1
- package/es/components/Carousel/CarouselNew/hooks/useCarousel.js +1 -6
- package/es/components/Carousel/CarouselNew/hooks/useCarousel.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.js +34 -18
- package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.styles.js +2 -3
- package/es/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +12 -6
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.js +13 -44
- package/es/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.js.map +1 -1
- package/es/components/DatePicker/RangeDate/RangeDate.js +1 -3
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +2 -5
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.js +2 -4
- package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/es/components/Popup/ClientOnlyPortal.js +2 -15
- package/es/components/Popup/ClientOnlyPortal.js.map +1 -1
- package/es/components/Popup/PopupContext.js +5 -26
- package/es/components/Popup/PopupContext.js.map +1 -1
- package/es/components/Select/Select.js +4 -3
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/Select.styles.js +2 -3
- package/es/components/Select/Select.styles.js.map +1 -1
- package/es/components/Select/ui/Inner/Inner.js +12 -6
- package/es/components/Select/ui/Inner/Inner.js.map +1 -1
- package/es/components/Select/ui/VirtualList/VirtualList.js +13 -44
- package/es/components/Select/ui/VirtualList/VirtualList.js.map +1 -1
- package/package.json +3 -2
- package/styled-components/cjs/components/Autocomplete/Autocomplete.js +8 -1
- package/styled-components/cjs/components/Autocomplete/ui/VirtualList/VirtualList.js +16 -84
- package/styled-components/cjs/components/Carousel/CarouselNew/Carousel.js +2 -2
- package/styled-components/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js +1 -6
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +48 -28
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +8 -8
- package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +50 -9
- package/styled-components/cjs/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.js +16 -84
- package/styled-components/cjs/components/Combobox/ComboboxNew/utils/index.js +0 -4
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +1 -3
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +3 -5
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +2 -4
- package/styled-components/cjs/components/Popup/ClientOnlyPortal.js +2 -14
- package/styled-components/cjs/components/Popup/PopupContext.js +6 -25
- package/styled-components/cjs/components/Select/Select.js +4 -2
- package/styled-components/cjs/components/Select/Select.styles.js +4 -4
- package/styled-components/cjs/components/Select/ui/Inner/Inner.js +50 -9
- package/styled-components/cjs/components/Select/ui/VirtualList/VirtualList.js +16 -84
- package/styled-components/es/components/Autocomplete/Autocomplete.js +9 -2
- package/styled-components/es/components/Autocomplete/ui/VirtualList/VirtualList.js +13 -45
- package/styled-components/es/components/Carousel/CarouselNew/Carousel.js +2 -2
- package/styled-components/es/components/Carousel/CarouselNew/hooks/useCarousel.js +1 -6
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +34 -14
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.styles.js +8 -8
- package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +11 -6
- package/styled-components/es/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.js +13 -45
- package/styled-components/es/components/Combobox/ComboboxNew/utils/index.js +0 -1
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +1 -3
- package/styled-components/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +3 -5
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +2 -4
- package/styled-components/es/components/Popup/ClientOnlyPortal.js +2 -14
- package/styled-components/es/components/Popup/PopupContext.js +6 -25
- package/styled-components/es/components/Select/Select.js +4 -2
- package/styled-components/es/components/Select/Select.styles.js +4 -4
- package/styled-components/es/components/Select/ui/Inner/Inner.js +11 -6
- package/styled-components/es/components/Select/ui/VirtualList/VirtualList.js +13 -45
- package/styled-components/es/examples/components/Combobox/Combobox.js +0 -7
- package/types/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/components/Autocomplete/Autocomplete.types.d.ts +17 -17
- package/types/components/Autocomplete/Autocomplete.types.d.ts.map +1 -1
- package/types/components/Autocomplete/ui/VirtualList/VirtualList.d.ts +1 -1
- package/types/components/Autocomplete/ui/VirtualList/VirtualList.d.ts.map +1 -1
- package/types/components/Carousel/CarouselNew/Carousel.d.ts.map +1 -1
- package/types/components/Carousel/CarouselNew/Carousel.types.d.ts +0 -5
- package/types/components/Carousel/CarouselNew/Carousel.types.d.ts.map +1 -1
- package/types/components/Carousel/CarouselNew/hooks/useCarousel.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts +0 -1
- package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +7 -7
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Inner/Inner.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Inner/Inner.type.d.ts +2 -1
- package/types/components/Combobox/ComboboxNew/ui/Inner/Inner.type.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.d.ts +6 -2
- package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.d.ts +1 -1
- package/types/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/utils/index.d.ts +0 -1
- package/types/components/Combobox/ComboboxNew/utils/index.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.d.ts +1 -1
- package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts +0 -4
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts.map +1 -1
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +18 -18
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts.map +1 -1
- package/types/components/Popup/ClientOnlyPortal.d.ts +0 -1
- package/types/components/Popup/ClientOnlyPortal.d.ts.map +1 -1
- package/types/components/Popup/PopupContext.d.ts +1 -5
- package/types/components/Popup/PopupContext.d.ts.map +1 -1
- package/types/components/Select/Select.d.ts.map +1 -1
- package/types/components/Select/Select.styles.d.ts +0 -1
- package/types/components/Select/Select.styles.d.ts.map +1 -1
- package/types/components/Select/Select.types.d.ts +14 -14
- package/types/components/Select/Select.types.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/Inner.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/Inner.type.d.ts +2 -1
- package/types/components/Select/ui/Inner/Inner.type.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts +11 -3
- package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts.map +1 -1
- package/types/components/Select/ui/VirtualList/VirtualList.d.ts +1 -1
- package/types/components/Select/ui/VirtualList/VirtualList.d.ts.map +1 -1
- package/types/components/Table/ui/HeadCell/ui/Filter/Filter.styles.d.ts +18 -18
- package/types/components/Table/ui/HeadCell/ui/Filter/Filter.styles.d.ts.map +1 -1
- package/types/examples/components/Autocomplete/Autocomplete.d.ts +40 -40
- package/types/examples/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/examples/components/Combobox/Combobox.d.ts +48 -48
- package/types/examples/components/Combobox/Combobox.d.ts.map +1 -1
- package/types/examples/components/Select/Select.d.ts +18 -18
- package/types/examples/components/Select/Select.d.ts.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/utils/getTextValue.js +0 -24
- package/cjs/components/Combobox/ComboboxNew/utils/getTextValue.js.map +0 -1
- package/emotion/cjs/components/Combobox/ComboboxNew/utils/getTextValue.js +0 -25
- package/emotion/es/components/Combobox/ComboboxNew/utils/getTextValue.js +0 -16
- package/es/components/Combobox/ComboboxNew/utils/getTextValue.js +0 -20
- package/es/components/Combobox/ComboboxNew/utils/getTextValue.js.map +0 -1
- package/styled-components/cjs/components/Combobox/ComboboxNew/utils/getTextValue.js +0 -25
- package/styled-components/es/components/Combobox/ComboboxNew/utils/getTextValue.js +0 -16
- package/types/components/Combobox/ComboboxNew/utils/getTextValue.d.ts +0 -4
- package/types/components/Combobox/ComboboxNew/utils/getTextValue.d.ts.map +0 -1
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { useRef } from 'react';
|
2
2
|
import { ListWrapper, Ul } from '../../Select.styles.js';
|
3
3
|
import { FloatingPopover } from '../../FloatingPopover.js';
|
4
4
|
import { Item } from './ui/Item/Item.js';
|
@@ -11,7 +11,8 @@ var Inner = function Inner(_ref) {
|
|
11
11
|
path = _ref.path,
|
12
12
|
dispatchPath = _ref.dispatchPath,
|
13
13
|
index = _ref.index,
|
14
|
-
listWidth = _ref.listWidth
|
14
|
+
listWidth = _ref.listWidth,
|
15
|
+
portal = _ref.portal;
|
15
16
|
var handleToggle = function handleToggle(opened) {
|
16
17
|
if (opened) {
|
17
18
|
dispatchPath({
|
@@ -26,6 +27,7 @@ var Inner = function Inner(_ref) {
|
|
26
27
|
});
|
27
28
|
}
|
28
29
|
};
|
30
|
+
var listWrapperRef = useRef(null);
|
29
31
|
var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
|
30
32
|
var treeId = safeUseId();
|
31
33
|
var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
|
@@ -46,13 +48,16 @@ var Inner = function Inner(_ref) {
|
|
46
48
|
ariaLevel: nextLevel,
|
47
49
|
ariaLabel: item.label
|
48
50
|
}),
|
49
|
-
isInner: true
|
51
|
+
isInner: true,
|
52
|
+
portal: portal
|
50
53
|
}, /*#__PURE__*/React.createElement(ListWrapper, {
|
51
|
-
listWidth: listWidth
|
54
|
+
listWidth: listWidth,
|
55
|
+
ref: listWrapperRef
|
52
56
|
}, /*#__PURE__*/React.createElement(Ul, {
|
53
57
|
role: "group",
|
54
58
|
id: listId,
|
55
|
-
virtual: false
|
59
|
+
virtual: false,
|
60
|
+
listMaxHeight: item === null || item === void 0 ? void 0 : item.listMaxHeight
|
56
61
|
}, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.map(function (innerItem, innerIndex) {
|
57
62
|
return /*#__PURE__*/React.createElement(Inner, {
|
58
63
|
key: "".concat(innerIndex, "/").concat(currentLevel),
|
@@ -61,7 +66,8 @@ var Inner = function Inner(_ref) {
|
|
61
66
|
path: path,
|
62
67
|
dispatchPath: dispatchPath,
|
63
68
|
index: innerIndex,
|
64
|
-
listWidth: listWidth
|
69
|
+
listWidth: listWidth,
|
70
|
+
portal: listWrapperRef
|
65
71
|
});
|
66
72
|
}))));
|
67
73
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Inner.js","sources":["../../../../../src/components/Select/ui/Inner/Inner.tsx"],"sourcesContent":["import React from 'react';\nimport type { FC } from 'react';\nimport { isEmpty, safeUseId } from 'src/utils';\n\nimport { Ul, ListWrapper } from '../../Select.styles';\nimport { FloatingPopover } from '../../FloatingPopover';\n\nimport type { MergedDropdownNodeTransformed } from './ui/Item/Item.types';\nimport { Item } from './ui/Item/Item';\nimport { InnerProps } from './Inner.type';\n\nexport const Inner: FC<InnerProps> = ({ item, currentLevel, path, dispatchPath, index, listWidth }) => {\n const handleToggle = (opened: boolean): void => {\n if (opened) {\n dispatchPath({ type: 'changed_on_level', value: item.value.toString(), level: currentLevel + 1 });\n } else {\n dispatchPath({ type: 'cut_by_level', level: currentLevel + 1 });\n }\n };\n\n const isCurrentListOpen = path[currentLevel + 1] === item.value.toString();\n\n const treeId = safeUseId();\n const listId = `${treeId}_tree_level_${currentLevel + 2}`;\n const nextLevel = currentLevel + 1;\n\n if (!isEmpty(item?.items)) {\n return (\n <FloatingPopover\n placement={item?.placement || 'right'}\n opened={isCurrentListOpen}\n onToggle={handleToggle}\n target={\n <Item\n item={item}\n path={path}\n currentLevel={currentLevel}\n index={index}\n ariaControls={listId}\n ariaExpanded={isCurrentListOpen}\n ariaLevel={nextLevel}\n ariaLabel={item.label}\n />\n }\n isInner\n >\n <ListWrapper listWidth={listWidth}>\n <Ul role=\"group\" id={listId} virtual={false}>\n {item.items?.map((innerItem: MergedDropdownNodeTransformed, innerIndex: number) => (\n <Inner\n key={`${innerIndex}/${currentLevel}`}\n item={innerItem}\n currentLevel={nextLevel}\n path={path}\n dispatchPath={dispatchPath}\n index={innerIndex}\n listWidth={listWidth}\n />\n ))}\n </Ul>\n </ListWrapper>\n </FloatingPopover>\n );\n }\n\n return <Item item={item} path={path} index={index} currentLevel={currentLevel} ariaLevel={nextLevel} />;\n};\n"],"names":["Inner","_ref","item","currentLevel","path","dispatchPath","index","listWidth","handleToggle","opened","type","value","toString","level","isCurrentListOpen","treeId","safeUseId","listId","concat","nextLevel","isEmpty","items","_item$items","React","createElement","FloatingPopover","placement","onToggle","target","Item","ariaControls","ariaExpanded","ariaLevel","ariaLabel","label","isInner","ListWrapper","Ul","role","id","virtual","map","innerItem","innerIndex","key"],"mappings":";;;;;;;IAWaA,KAAqB,GAAG,SAAxBA,KAAqBA,CAAAC,IAAA,
|
1
|
+
{"version":3,"file":"Inner.js","sources":["../../../../../src/components/Select/ui/Inner/Inner.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport type { FC } from 'react';\nimport { isEmpty, safeUseId } from 'src/utils';\n\nimport { Ul, ListWrapper } from '../../Select.styles';\nimport { FloatingPopover } from '../../FloatingPopover';\n\nimport type { MergedDropdownNodeTransformed } from './ui/Item/Item.types';\nimport { Item } from './ui/Item/Item';\nimport { InnerProps } from './Inner.type';\n\nexport const Inner: FC<InnerProps> = ({ item, currentLevel, path, dispatchPath, index, listWidth, portal }) => {\n const handleToggle = (opened: boolean): void => {\n if (opened) {\n dispatchPath({ type: 'changed_on_level', value: item.value.toString(), level: currentLevel + 1 });\n } else {\n dispatchPath({ type: 'cut_by_level', level: currentLevel + 1 });\n }\n };\n\n const listWrapperRef = useRef<HTMLDivElement>(null);\n\n const isCurrentListOpen = path[currentLevel + 1] === item.value.toString();\n\n const treeId = safeUseId();\n const listId = `${treeId}_tree_level_${currentLevel + 2}`;\n const nextLevel = currentLevel + 1;\n\n if (!isEmpty(item?.items)) {\n return (\n <FloatingPopover\n placement={item?.placement || 'right'}\n opened={isCurrentListOpen}\n onToggle={handleToggle}\n target={\n <Item\n item={item}\n path={path}\n currentLevel={currentLevel}\n index={index}\n ariaControls={listId}\n ariaExpanded={isCurrentListOpen}\n ariaLevel={nextLevel}\n ariaLabel={item.label}\n />\n }\n isInner\n portal={portal}\n >\n <ListWrapper listWidth={listWidth} ref={listWrapperRef}>\n <Ul role=\"group\" id={listId} virtual={false} listMaxHeight={item?.listMaxHeight}>\n {item.items?.map((innerItem: MergedDropdownNodeTransformed, innerIndex: number) => (\n <Inner\n key={`${innerIndex}/${currentLevel}`}\n item={innerItem}\n currentLevel={nextLevel}\n path={path}\n dispatchPath={dispatchPath}\n index={innerIndex}\n listWidth={listWidth}\n portal={listWrapperRef}\n />\n ))}\n </Ul>\n </ListWrapper>\n </FloatingPopover>\n );\n }\n\n return <Item item={item} path={path} index={index} currentLevel={currentLevel} ariaLevel={nextLevel} />;\n};\n"],"names":["Inner","_ref","item","currentLevel","path","dispatchPath","index","listWidth","portal","handleToggle","opened","type","value","toString","level","listWrapperRef","useRef","isCurrentListOpen","treeId","safeUseId","listId","concat","nextLevel","isEmpty","items","_item$items","React","createElement","FloatingPopover","placement","onToggle","target","Item","ariaControls","ariaExpanded","ariaLevel","ariaLabel","label","isInner","ListWrapper","ref","Ul","role","id","virtual","listMaxHeight","map","innerItem","innerIndex","key"],"mappings":"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"}
|
@@ -1,59 +1,28 @@
|
|
1
|
-
import React
|
2
|
-
import
|
1
|
+
import React from 'react';
|
2
|
+
import List from 'rc-virtual-list';
|
3
3
|
import { getHeightAsNumber } from '../../../../utils/getHeightAsNumber.js';
|
4
4
|
import { Item } from '../Inner/ui/Item/Item.js';
|
5
5
|
|
6
6
|
var VirtualList = function VirtualList(_ref) {
|
7
|
-
var _virtualItems$0$start, _virtualItems$;
|
8
7
|
var items = _ref.items,
|
9
8
|
listMaxHeight = _ref.listMaxHeight,
|
10
9
|
onScroll = _ref.onScroll;
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
estimateSize: function estimateSize() {
|
18
|
-
return 48;
|
19
|
-
}
|
20
|
-
});
|
21
|
-
var virtualItems = virtualizer.getVirtualItems();
|
22
|
-
return /*#__PURE__*/React.createElement("div", {
|
23
|
-
ref: parentRef,
|
24
|
-
style: {
|
25
|
-
height: 'auto',
|
26
|
-
maxHeight: getHeightAsNumber(listMaxHeight),
|
27
|
-
overflowY: 'auto'
|
28
|
-
},
|
10
|
+
return /*#__PURE__*/React.createElement(List, {
|
11
|
+
data: items,
|
12
|
+
height: getHeightAsNumber(listMaxHeight),
|
13
|
+
fullHeight: false,
|
14
|
+
itemHeight: 100,
|
15
|
+
itemKey: "id",
|
29
16
|
onScroll: onScroll
|
30
|
-
},
|
31
|
-
|
32
|
-
|
33
|
-
width: '100%',
|
34
|
-
position: 'relative'
|
35
|
-
}
|
36
|
-
}, /*#__PURE__*/React.createElement("div", {
|
37
|
-
style: {
|
38
|
-
position: 'absolute',
|
39
|
-
top: 0,
|
40
|
-
left: 0,
|
41
|
-
width: '100%',
|
42
|
-
transform: "translateY(".concat((_virtualItems$0$start = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.start) !== null && _virtualItems$0$start !== void 0 ? _virtualItems$0$start : 0, "px)")
|
43
|
-
}
|
44
|
-
}, virtualItems.map(function (virtualRow) {
|
45
|
-
return /*#__PURE__*/React.createElement("div", {
|
46
|
-
key: virtualRow.key,
|
47
|
-
"data-index": virtualRow.index,
|
48
|
-
ref: virtualizer.measureElement
|
49
|
-
}, /*#__PURE__*/React.createElement(Item, {
|
50
|
-
item: items[virtualRow.index],
|
17
|
+
}, function (item, index, props) {
|
18
|
+
return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(Item, {
|
19
|
+
item: item,
|
51
20
|
path: ['root'],
|
52
21
|
currentLevel: 0,
|
53
|
-
index:
|
22
|
+
index: index,
|
54
23
|
ariaLevel: 1
|
55
24
|
}));
|
56
|
-
})
|
25
|
+
});
|
57
26
|
};
|
58
27
|
|
59
28
|
export { VirtualList };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"VirtualList.js","sources":["../../../../../src/components/Select/ui/VirtualList/VirtualList.tsx"],"sourcesContent":["import React, {
|
1
|
+
{"version":3,"file":"VirtualList.js","sources":["../../../../../src/components/Select/ui/VirtualList/VirtualList.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport List from 'rc-virtual-list';\nimport { getHeightAsNumber } from 'src/utils';\n\nimport type { MergedDropdownNodeTransformed } from '../Inner/ui/Item/Item.types';\nimport { Item } from '../Inner/ui';\n\ninterface Props {\n items: MergedDropdownNodeTransformed[];\n listMaxHeight?: CSSProperties['height'];\n onScroll?: (e: React.UIEvent<HTMLUListElement>) => void;\n}\n\nexport const VirtualList: React.FC<Props> = ({ items, listMaxHeight, onScroll }) => (\n <List\n data={items}\n height={getHeightAsNumber(listMaxHeight)}\n fullHeight={false}\n itemHeight={100}\n itemKey=\"id\"\n onScroll={onScroll}\n >\n {(item, index, props) => (\n <div {...props}>\n <Item item={item} path={['root']} currentLevel={0} index={index} ariaLevel={1} />\n </div>\n )}\n </List>\n);\n"],"names":["VirtualList","_ref","items","listMaxHeight","onScroll","React","createElement","List","data","height","getHeightAsNumber","fullHeight","itemHeight","itemKey","item","index","props","Item","path","currentLevel","ariaLevel"],"mappings":";;;;;IAaaA,WAA4B,GAAG,SAA/BA,WAA4BA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,aAAa,GAAAF,IAAA,CAAbE,aAAa;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ,CAAA;AAAA,EAAA,oBACzEC,KAAA,CAAAC,aAAA,CAACC,IAAI,EAAA;AACDC,IAAAA,IAAI,EAAEN,KAAM;AACZO,IAAAA,MAAM,EAAEC,iBAAiB,CAACP,aAAa,CAAE;AACzCQ,IAAAA,UAAU,EAAE,KAAM;AAClBC,IAAAA,UAAU,EAAE,GAAI;AAChBC,IAAAA,OAAO,EAAC,IAAI;AACZT,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,EAElB,UAACU,IAAI,EAAEC,KAAK,EAAEC,KAAK,EAAA;IAAA,oBAChBX,KAAA,CAAAC,aAAA,CAASU,KAAAA,EAAAA,KAAK,eACVX,KAAA,CAAAC,aAAA,CAACW,IAAI,EAAA;AAACH,MAAAA,IAAI,EAAEA,IAAK;MAACI,IAAI,EAAE,CAAC,MAAM,CAAE;AAACC,MAAAA,YAAY,EAAE,CAAE;AAACJ,MAAAA,KAAK,EAAEA,KAAM;AAACK,MAAAA,SAAS,EAAE,CAAA;AAAE,KAAE,CAC/E,CAAC,CAAA;AAAA,GAER,CAAC,CAAA;AAAA;;;;"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.335.0-canary.
|
3
|
+
"version": "0.335.0-canary.2197.17377664818.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -127,6 +127,7 @@
|
|
127
127
|
"lodash.chunk": "4.2.0",
|
128
128
|
"lodash.throttle": "4.1.1",
|
129
129
|
"rc-tree": "5.11.0",
|
130
|
+
"rc-virtual-list": "3.18.1",
|
130
131
|
"re-resizable": "6.10.3",
|
131
132
|
"react-draggable": "4.5.0",
|
132
133
|
"react-hot-toast": "2.5.2",
|
@@ -137,5 +138,5 @@
|
|
137
138
|
"sideEffects": [
|
138
139
|
"*.css"
|
139
140
|
],
|
140
|
-
"gitHead": "
|
141
|
+
"gitHead": "821811e043c8f2c43fb8a19a113390750a4eec2c"
|
141
142
|
}
|
@@ -207,7 +207,7 @@ var autocompleteRoot = function(Root) {
|
|
207
207
|
"_offset"
|
208
208
|
]);
|
209
209
|
var _useReducer = _sliced_to_array((0, _react.useReducer)(_focusedReducer.focusedReducer, null), 2), focused = _useReducer[0], dispatchFocused = _useReducer[1];
|
210
|
-
var _useState = _sliced_to_array((0, _react.useState)(
|
210
|
+
var _useState = _sliced_to_array((0, _react.useState)(''), 2), innerValue = _useState[0], setInnerValue = _useState[1];
|
211
211
|
var _useState1 = _sliced_to_array((0, _react.useState)(false), 2), isOpen = _useState1[0], setIsOpen = _useState1[1];
|
212
212
|
var listId = (0, _utils.safeUseId)();
|
213
213
|
var value = outerValue !== null && outerValue !== void 0 ? outerValue : innerValue;
|
@@ -263,6 +263,13 @@ var autocompleteRoot = function(Root) {
|
|
263
263
|
}, [
|
264
264
|
value
|
265
265
|
]);
|
266
|
+
(0, _react.useLayoutEffect)(function() {
|
267
|
+
if (defaultValue) {
|
268
|
+
setInnerValue(defaultValue);
|
269
|
+
}
|
270
|
+
}, [
|
271
|
+
defaultValue
|
272
|
+
]);
|
266
273
|
return /*#__PURE__*/ _react.default.createElement(Root, {
|
267
274
|
view: view,
|
268
275
|
size: size,
|
@@ -8,99 +8,31 @@ Object.defineProperty(exports, "VirtualList", {
|
|
8
8
|
return VirtualList;
|
9
9
|
}
|
10
10
|
});
|
11
|
-
var _react = /*#__PURE__*/
|
12
|
-
var
|
11
|
+
var _react = /*#__PURE__*/ _interop_require_default(require("react"));
|
12
|
+
var _rcvirtuallist = /*#__PURE__*/ _interop_require_default(require("rc-virtual-list"));
|
13
13
|
var _utils = require("../../../../utils");
|
14
14
|
var _SuggestionItem = require("../SuggestionItem/SuggestionItem");
|
15
|
-
function
|
16
|
-
|
17
|
-
|
18
|
-
var cacheNodeInterop = new WeakMap();
|
19
|
-
return (_getRequireWildcardCache = function(nodeInterop) {
|
20
|
-
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
21
|
-
})(nodeInterop);
|
22
|
-
}
|
23
|
-
function _interop_require_wildcard(obj, nodeInterop) {
|
24
|
-
if (!nodeInterop && obj && obj.__esModule) {
|
25
|
-
return obj;
|
26
|
-
}
|
27
|
-
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
28
|
-
return {
|
29
|
-
default: obj
|
30
|
-
};
|
31
|
-
}
|
32
|
-
var cache = _getRequireWildcardCache(nodeInterop);
|
33
|
-
if (cache && cache.has(obj)) {
|
34
|
-
return cache.get(obj);
|
35
|
-
}
|
36
|
-
var newObj = {
|
37
|
-
__proto__: null
|
15
|
+
function _interop_require_default(obj) {
|
16
|
+
return obj && obj.__esModule ? obj : {
|
17
|
+
default: obj
|
38
18
|
};
|
39
|
-
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
40
|
-
for(var key in obj){
|
41
|
-
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
42
|
-
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
43
|
-
if (desc && (desc.get || desc.set)) {
|
44
|
-
Object.defineProperty(newObj, key, desc);
|
45
|
-
} else {
|
46
|
-
newObj[key] = obj[key];
|
47
|
-
}
|
48
|
-
}
|
49
|
-
}
|
50
|
-
newObj.default = obj;
|
51
|
-
if (cache) {
|
52
|
-
cache.set(obj, newObj);
|
53
|
-
}
|
54
|
-
return newObj;
|
55
19
|
}
|
56
20
|
var VirtualList = function(param) {
|
57
21
|
var items = param.items, onClick = param.onClick, listId = param.listId, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll, renderItem = param.renderItem;
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
},
|
65
|
-
estimateSize: function() {
|
66
|
-
return 48;
|
67
|
-
}
|
68
|
-
});
|
69
|
-
var virtualItems = virtualizer.getVirtualItems();
|
70
|
-
var _virtualItems__start;
|
71
|
-
return /*#__PURE__*/ _react.default.createElement("div", {
|
72
|
-
ref: parentRef,
|
73
|
-
style: {
|
74
|
-
height: 'auto',
|
75
|
-
maxHeight: (0, _utils.getHeightAsNumber)(listMaxHeight),
|
76
|
-
overflowY: 'auto'
|
77
|
-
},
|
22
|
+
return /*#__PURE__*/ _react.default.createElement(_rcvirtuallist.default, {
|
23
|
+
data: items,
|
24
|
+
height: (0, _utils.getHeightAsNumber)(listMaxHeight),
|
25
|
+
fullHeight: false,
|
26
|
+
itemHeight: 100,
|
27
|
+
itemKey: "id",
|
78
28
|
onScroll: onScroll
|
79
|
-
},
|
80
|
-
|
81
|
-
|
82
|
-
width: '100%',
|
83
|
-
position: 'relative'
|
84
|
-
}
|
85
|
-
}, /*#__PURE__*/ _react.default.createElement("div", {
|
86
|
-
style: {
|
87
|
-
position: 'absolute',
|
88
|
-
top: 0,
|
89
|
-
left: 0,
|
90
|
-
width: '100%',
|
91
|
-
transform: "translateY(".concat((_virtualItems__start = (_virtualItems_ = virtualItems[0]) === null || _virtualItems_ === void 0 ? void 0 : _virtualItems_.start) !== null && _virtualItems__start !== void 0 ? _virtualItems__start : 0, "px)")
|
92
|
-
}
|
93
|
-
}, virtualItems.map(function(virtualRow) {
|
94
|
-
return /*#__PURE__*/ _react.default.createElement("div", {
|
95
|
-
key: virtualRow.key,
|
96
|
-
"data-index": virtualRow.index,
|
97
|
-
ref: virtualizer.measureElement
|
98
|
-
}, /*#__PURE__*/ _react.default.createElement(_SuggestionItem.SuggestionItem, {
|
99
|
-
item: items[virtualRow.index],
|
29
|
+
}, function(item, index, props) {
|
30
|
+
return /*#__PURE__*/ _react.default.createElement("div", props, /*#__PURE__*/ _react.default.createElement(_SuggestionItem.SuggestionItem, {
|
31
|
+
item: item,
|
100
32
|
onClick: onClick,
|
101
|
-
id: "".concat(listId, "/").concat(
|
33
|
+
id: "".concat(listId, "/").concat(index),
|
102
34
|
focused: false,
|
103
35
|
renderItem: renderItem
|
104
36
|
}));
|
105
|
-
})
|
37
|
+
});
|
106
38
|
};
|
@@ -116,9 +116,9 @@ var VISIBLE_DOTS_DEFAULT = 10;
|
|
116
116
|
var DOTS_CENTERED_DEFAULT = false;
|
117
117
|
var carouselNewRoot = function(Root) {
|
118
118
|
return /*#__PURE__*/ (0, _react.forwardRef)(function(param, ref) {
|
119
|
-
var view = param.view, size = param.size, _param_scrollAlign = param.scrollAlign, scrollAlign = _param_scrollAlign === void 0 ? 'start' : _param_scrollAlign, children = param.children, _param_controlArrowsDisabled = param.controlArrowsDisabled, controlArrowsDisabled = _param_controlArrowsDisabled === void 0 ? false : _param_controlArrowsDisabled, paginationOptions = param.paginationOptions, _param_gap = param.gap, gap = _param_gap === void 0 ? '20px' : _param_gap, className = param.className, style = param.style
|
119
|
+
var view = param.view, size = param.size, _param_scrollAlign = param.scrollAlign, scrollAlign = _param_scrollAlign === void 0 ? 'start' : _param_scrollAlign, children = param.children, _param_controlArrowsDisabled = param.controlArrowsDisabled, controlArrowsDisabled = _param_controlArrowsDisabled === void 0 ? false : _param_controlArrowsDisabled, paginationOptions = param.paginationOptions, _param_gap = param.gap, gap = _param_gap === void 0 ? '20px' : _param_gap, className = param.className, style = param.style;
|
120
|
+
var _useState = _sliced_to_array((0, _react.useState)(0), 2), index = _useState[0], setIndex = _useState[1];
|
120
121
|
var slidesAmount = _react.Children.count(children);
|
121
|
-
var _useState = _sliced_to_array((0, _react.useState)(defaultIndex && defaultIndex >= 0 ? Math.min(slidesAmount - 1, defaultIndex) : 0), 2), index = _useState[0], setIndex = _useState[1];
|
122
122
|
var handleClickLeft = function() {
|
123
123
|
setIndex(Math.max(0, index - 1));
|
124
124
|
};
|
@@ -50,7 +50,6 @@ var useCarousel = function(param) {
|
|
50
50
|
var index = param.index, scrollAlign = param.scrollAlign;
|
51
51
|
var scrollRef = (0, _react.useRef)(null);
|
52
52
|
var trackRef = (0, _react.useRef)(null);
|
53
|
-
var isFirstRender = (0, _react.useRef)(true);
|
54
53
|
// Прокрутка до нужной позиции индекса, если индекс изменился.
|
55
54
|
(0, _react.useEffect)(function() {
|
56
55
|
if (!scrollRef.current || !trackRef.current) {
|
@@ -66,13 +65,9 @@ var useCarousel = function(param) {
|
|
66
65
|
scrollAlign: scrollAlign
|
67
66
|
});
|
68
67
|
scrollRef.current.scrollTo({
|
69
|
-
left: pos
|
70
|
-
behavior: isFirstRender.current ? 'instant' : 'smooth'
|
68
|
+
left: pos
|
71
69
|
});
|
72
70
|
}
|
73
|
-
if (isFirstRender.current) {
|
74
|
-
isFirstRender.current = false;
|
75
|
-
}
|
76
71
|
}, [
|
77
72
|
index
|
78
73
|
]);
|
@@ -19,12 +19,13 @@ _export(exports, {
|
|
19
19
|
var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
20
20
|
var _plasmacore = require("@salutejs/plasma-core");
|
21
21
|
var _utils = require("../../../utils");
|
22
|
+
var _utils1 = require("../../../utils");
|
22
23
|
var _hooks = require("../../../hooks");
|
23
|
-
var
|
24
|
+
var _utils2 = require("../../Select/utils");
|
24
25
|
var _Comboboxtokens = require("./Combobox.tokens");
|
25
26
|
var _FloatingPopover = require("./FloatingPopover");
|
26
27
|
var _useKeyboardNavigation = require("./hooks/useKeyboardNavigation");
|
27
|
-
var
|
28
|
+
var _utils3 = require("./utils");
|
28
29
|
var _ui = require("./ui");
|
29
30
|
var _reducers = require("./reducers");
|
30
31
|
var _getPathMaps = require("./hooks/getPathMaps");
|
@@ -217,7 +218,7 @@ function _unsupported_iterable_to_array(o, minLen) {
|
|
217
218
|
}
|
218
219
|
var comboboxRoot = function(Root) {
|
219
220
|
return /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
|
220
|
-
var _getItemByFocused;
|
221
|
+
var _valueToItemMap_get, _getItemByFocused;
|
221
222
|
var name = props.name, multiple = props.multiple, outerValue = props.value, outerOnChange = props.onChange, defaultValue = props.defaultValue, isTargetAmount = props.isTargetAmount, targetAmount = props.targetAmount, items = props.items, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom-start' : _props_placement, label = props.label, placeholder = props.placeholder, helperText = props.helperText, contentLeft = props.contentLeft, textBefore = props.textBefore, textAfter = props.textAfter, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, portal = props.portal, renderItem = props.renderItem, view = props.view, size = props.size, labelPlacement = props.labelPlacement, keepPlaceholder = props.keepPlaceholder, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_alwaysOpened = props.alwaysOpened, alwaysOpened = _props_alwaysOpened === void 0 ? false : _props_alwaysOpened, filter = props.filter, outerCloseAfterSelect = props.closeAfterSelect, renderValue = props.renderValue, zIndex = props.zIndex, beforeList = props.beforeList, afterList = props.afterList, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, hintView = props.hintView, hintSize = props.hintSize, emptyStateDescription = props.emptyStateDescription, onChangeValue = props.onChangeValue, onScroll = props.onScroll, onToggle = props.onToggle, // @ts-ignore
|
222
223
|
_offset = props._offset, rest = _object_without_properties(props, [
|
223
224
|
"name",
|
@@ -265,7 +266,7 @@ var comboboxRoot = function(Root) {
|
|
265
266
|
"_offset"
|
266
267
|
]);
|
267
268
|
var transformedItems = (0, _react.useMemo)(function() {
|
268
|
-
return (0,
|
269
|
+
return (0, _utils3.initialItemsTransform)(items || []);
|
269
270
|
}, [
|
270
271
|
items
|
271
272
|
]);
|
@@ -275,15 +276,17 @@ var comboboxRoot = function(Root) {
|
|
275
276
|
}, [
|
276
277
|
items
|
277
278
|
]), 3), valueToCheckedMap = _useMemo[0], valueToItemMap = _useMemo[1], labelToItemMap = _useMemo[2];
|
278
|
-
var _useState = _sliced_to_array((0, _react.useState)((0
|
279
|
+
var _useState = _sliced_to_array((0, _react.useState)(multiple || Array.isArray(outerValue) ? '' : ((_valueToItemMap_get = valueToItemMap.get(outerValue)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || (outerValue === null || outerValue === void 0 ? void 0 : outerValue.toString()) || ''), 2), textValue = _useState[0], setTextValue = _useState[1];
|
279
280
|
var _useState1 = _sliced_to_array((0, _react.useState)(multiple ? [] : ''), 2), internalValue = _useState1[0], setInternalValue = _useState1[1];
|
280
281
|
var value = outerValue !== null && outerValue !== undefined ? outerValue : internalValue;
|
281
282
|
var inputRef = (0, _react.useRef)(null);
|
282
283
|
var floatingPopoverRef = (0, _react.useRef)(null);
|
283
284
|
var inputForkRef = (0, _plasmacore.useForkRef)(inputRef, ref);
|
284
285
|
var treeId = (0, _utils.safeUseId)();
|
286
|
+
var listWrapperRef = (0, _react.useRef)(null);
|
285
287
|
var filteredItems = (0, _react.useMemo)(function() {
|
286
|
-
|
288
|
+
var _valueToItemMap_get;
|
289
|
+
return (0, _utils3.filterItems)(transformedItems, textValue, ((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || value, filter);
|
287
290
|
}, [
|
288
291
|
transformedItems,
|
289
292
|
textValue,
|
@@ -320,19 +323,30 @@ var comboboxRoot = function(Root) {
|
|
320
323
|
if (onToggle) {
|
321
324
|
onToggle(false);
|
322
325
|
}
|
323
|
-
//
|
324
|
-
|
326
|
+
// Проверяем, отличается ли значение в инпуте от выбранного value после закрытия дропдауна.
|
327
|
+
// Если изменилось, то возвращаем label выбранного айтема.
|
328
|
+
// Если нет выбранного элемента, то стираем значение инпута.
|
329
|
+
if (textValue !== value) {
|
330
|
+
if ((0, _utils1.isEmpty)(value)) {
|
331
|
+
setTextValue('');
|
332
|
+
} else if (multiple) {
|
333
|
+
setTextValue('');
|
334
|
+
} else {
|
335
|
+
var _valueToItemMap_get;
|
336
|
+
setTextValue(((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || value || '');
|
337
|
+
}
|
338
|
+
}
|
325
339
|
}, floatingPopoverRef);
|
326
340
|
// Эта функция срабатывает при изменении Combobox и
|
327
341
|
// при изменении нативного Select для формы (срабатывает только после изменения internalValue и рендера).
|
328
342
|
var onChange = function(newValue, item) {
|
329
343
|
// Условие для отправки изменений наружу
|
330
344
|
if (props.onChange) {
|
331
|
-
// Условие для
|
345
|
+
// Условие для отправки если комбобокс используется без формы.
|
332
346
|
if (!props.name && (typeof newValue === 'string' || Array.isArray(newValue))) {
|
333
347
|
props.onChange(newValue, item || null);
|
334
348
|
}
|
335
|
-
// Условие для
|
349
|
+
// Условие для отправки если комбобокс используется с формой.
|
336
350
|
if (props.name && (typeof newValue === "undefined" ? "undefined" : _type_of(newValue)) === 'object' && !Array.isArray(newValue)) {
|
337
351
|
props.onChange(newValue);
|
338
352
|
}
|
@@ -391,7 +405,7 @@ var comboboxRoot = function(Root) {
|
|
391
405
|
resultValues.splice(index, 1);
|
392
406
|
}
|
393
407
|
});
|
394
|
-
var removedItemValue = (0,
|
408
|
+
var removedItemValue = (0, _utils3.getRemovedElement)(value, resultValues, isTargetAmount);
|
395
409
|
onChange(resultValues, removedItemValue ? valueToItemMap.get(removedItemValue) || {
|
396
410
|
value: removedItemValue,
|
397
411
|
label: removedItemValue.toString()
|
@@ -401,7 +415,7 @@ var comboboxRoot = function(Root) {
|
|
401
415
|
var _labelToItemMap_get;
|
402
416
|
return ((_labelToItemMap_get = labelToItemMap.get(chipLabel)) === null || _labelToItemMap_get === void 0 ? void 0 : _labelToItemMap_get.value) || chipLabel;
|
403
417
|
});
|
404
|
-
var removedItemValue1 = (0,
|
418
|
+
var removedItemValue1 = (0, _utils3.getRemovedElement)(value, newValues, isTargetAmount);
|
405
419
|
onChange(newValues, removedItemValue1 ? valueToItemMap.get(removedItemValue1) || {
|
406
420
|
value: removedItemValue1,
|
407
421
|
label: removedItemValue1.toString()
|
@@ -437,12 +451,12 @@ var comboboxRoot = function(Root) {
|
|
437
451
|
var checkedCopy = new Map(checked);
|
438
452
|
if (!checkedCopy.get(item.value)) {
|
439
453
|
checkedCopy.set(item.value, true);
|
440
|
-
(0,
|
454
|
+
(0, _utils3.updateDescendants)(item, checkedCopy, true, valueToItemMap);
|
441
455
|
} else {
|
442
456
|
checkedCopy.set(item.value, false);
|
443
|
-
(0,
|
457
|
+
(0, _utils3.updateDescendants)(item, checkedCopy, false);
|
444
458
|
}
|
445
|
-
(0,
|
459
|
+
(0, _utils3.updateAncestors)(item, checkedCopy);
|
446
460
|
var newValues = [];
|
447
461
|
valueToItemMap.forEach(function(item, key) {
|
448
462
|
if (checkedCopy.get(key)) {
|
@@ -471,7 +485,7 @@ var comboboxRoot = function(Root) {
|
|
471
485
|
};
|
472
486
|
// Обработчик клика по айтему выпадающего списка
|
473
487
|
var handleItemClick = function(item, e) {
|
474
|
-
if (!(0,
|
488
|
+
if (!(0, _utils1.isEmpty)(item === null || item === void 0 ? void 0 : item.items)) {
|
475
489
|
return;
|
476
490
|
}
|
477
491
|
if (multiple) {
|
@@ -517,7 +531,7 @@ var comboboxRoot = function(Root) {
|
|
517
531
|
return [];
|
518
532
|
};
|
519
533
|
var handlePressDown = function(item, e) {
|
520
|
-
if ((0,
|
534
|
+
if ((0, _utils1.isEmpty)(item.items)) {
|
521
535
|
handleItemClick(item, e);
|
522
536
|
} else if (multiple) {
|
523
537
|
handleCheckboxChange(item);
|
@@ -548,14 +562,14 @@ var comboboxRoot = function(Root) {
|
|
548
562
|
checkedCopy.forEach(function(_, key) {
|
549
563
|
checkedCopy.set(key, false);
|
550
564
|
});
|
551
|
-
if (!(0,
|
565
|
+
if (!(0, _utils1.isEmpty)(value)) {
|
552
566
|
if (Array.isArray(value)) {
|
553
567
|
value.forEach(function(val) {
|
554
568
|
// Только если value находится в items, т.к. value может и не существовать в items.
|
555
569
|
if (valueToItemMap.has(val)) {
|
556
570
|
checkedCopy.set(val, true);
|
557
|
-
(0,
|
558
|
-
(0,
|
571
|
+
(0, _utils3.updateDescendants)(valueToItemMap.get(val), checkedCopy, true);
|
572
|
+
(0, _utils3.updateAncestors)(valueToItemMap.get(val), checkedCopy);
|
559
573
|
}
|
560
574
|
});
|
561
575
|
} else {
|
@@ -563,11 +577,15 @@ var comboboxRoot = function(Root) {
|
|
563
577
|
// eslint-disable-next-line no-lonely-if
|
564
578
|
if (valueToItemMap.has(value)) {
|
565
579
|
checkedCopy.set(value, 'done');
|
566
|
-
(0,
|
580
|
+
(0, _utils3.updateSingleAncestors)(valueToItemMap.get(value), checkedCopy, 'dot');
|
567
581
|
}
|
568
582
|
}
|
569
583
|
}
|
570
584
|
setChecked(checkedCopy);
|
585
|
+
if (!multiple && textValue === value && valueToItemMap.has(value)) {
|
586
|
+
var _valueToItemMap_get;
|
587
|
+
setTextValue(((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || '');
|
588
|
+
}
|
571
589
|
// В deps мы кладем именно outerValue и internalValue, а не просто value.
|
572
590
|
// Т.к. вначале нужно отфильтровать и провалидировать outerValue и результат положить в переменную.
|
573
591
|
// А переменную, содержащую сложные типы данных, нельзя помещать в deps.
|
@@ -577,8 +595,9 @@ var comboboxRoot = function(Root) {
|
|
577
595
|
items
|
578
596
|
]);
|
579
597
|
// При изменении value нужно возвращать значение в инпуте к исходному.
|
580
|
-
(0,
|
581
|
-
|
598
|
+
(0, _react.useLayoutEffect)(function() {
|
599
|
+
var _valueToItemMap_get;
|
600
|
+
setTextValue(multiple ? '' : ((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || (value === null || value === void 0 ? void 0 : value.toString()) || '');
|
582
601
|
}, [
|
583
602
|
outerValue,
|
584
603
|
internalValue
|
@@ -649,7 +668,7 @@ var comboboxRoot = function(Root) {
|
|
649
668
|
onClick: handleClickArrow
|
650
669
|
}, /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.StyledArrow, {
|
651
670
|
color: "inherit",
|
652
|
-
size: (0,
|
671
|
+
size: (0, _utils2.sizeToIconSize)(size),
|
653
672
|
className: withArrowInverse
|
654
673
|
})),
|
655
674
|
textBefore: textBefore,
|
@@ -662,7 +681,7 @@ var comboboxRoot = function(Root) {
|
|
662
681
|
"aria-autocomplete": "list",
|
663
682
|
"aria-controls": "".concat(treeId, "_tree_level_1"),
|
664
683
|
"aria-expanded": isCurrentListOpen,
|
665
|
-
"aria-activedescendant": activeDescendantItemValue ? (0,
|
684
|
+
"aria-activedescendant": activeDescendantItemValue ? (0, _utils3.getItemId)(treeId, activeDescendantItemValue) : '',
|
666
685
|
labelPlacement: labelPlacement,
|
667
686
|
keepPlaceholder: keepPlaceholder
|
668
687
|
}, multiple ? {
|
@@ -685,6 +704,7 @@ var comboboxRoot = function(Root) {
|
|
685
704
|
readOnly: readOnly,
|
686
705
|
name: name
|
687
706
|
}, /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.ListWrapper, {
|
707
|
+
ref: listWrapperRef,
|
688
708
|
listWidth: listWidth
|
689
709
|
}, /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.Ul, {
|
690
710
|
role: "tree",
|
@@ -693,9 +713,8 @@ var comboboxRoot = function(Root) {
|
|
693
713
|
listMaxHeight: listMaxHeight || listHeight,
|
694
714
|
ref: targetRef,
|
695
715
|
virtual: virtual,
|
696
|
-
listOverflow: listOverflow,
|
697
716
|
onScroll: virtual ? undefined : onScroll
|
698
|
-
}, beforeList, (0,
|
717
|
+
}, beforeList, (0, _utils1.isEmpty)(filteredItems) ? /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.StyledEmptyState, {
|
699
718
|
className: _Comboboxtokens.classes.emptyStateWrapper,
|
700
719
|
size: size,
|
701
720
|
description: emptyStateDescription || 'Ничего не найдено'
|
@@ -715,7 +734,8 @@ var comboboxRoot = function(Root) {
|
|
715
734
|
path: path,
|
716
735
|
dispatchPath: dispatchPath,
|
717
736
|
index: index,
|
718
|
-
listWidth: listWidth
|
737
|
+
listWidth: listWidth,
|
738
|
+
portal: listWrapperRef
|
719
739
|
});
|
720
740
|
})), afterList)))))));
|
721
741
|
});
|