@infomaximum/ui-kit 0.12.12 → 0.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/dist/components/BaseSelect/BaseSelect.d.ts +5 -0
  2. package/dist/components/BaseSelect/BaseSelect.js +360 -0
  3. package/dist/components/{Select/Select.styles.d.ts → BaseSelect/BaseSelect.styles.d.ts} +20 -4
  4. package/dist/components/{Select/Select.styles.js → BaseSelect/BaseSelect.styles.js} +23 -10
  5. package/dist/components/BaseSelect/BaseSelect.types.d.ts +99 -0
  6. package/dist/components/BaseSelect/BaseSelect.utils.d.ts +8 -0
  7. package/dist/components/BaseSelect/BaseSelect.utils.js +39 -0
  8. package/dist/components/BaseSelect/components/BaseSelectOptionList/BaseSelectOptionList.types.d.ts +11 -0
  9. package/dist/components/BaseSelect/components/SelectOptionList/SelectOptionList.d.ts +4 -0
  10. package/dist/components/BaseSelect/components/SelectOptionList/SelectOptionList.js +120 -0
  11. package/dist/components/{Select → BaseSelect}/components/SelectOptionList/SelectOptionList.styles.d.ts +13 -4
  12. package/dist/components/{Select → BaseSelect}/components/SelectOptionList/SelectOptionList.styles.js +13 -7
  13. package/dist/components/BaseSelect/components/SelectOptionList/SelectOptionList.types.d.ts +20 -0
  14. package/dist/components/BaseSelect/components/SelectTag/SelectTag.d.ts +4 -0
  15. package/dist/components/{Select → BaseSelect}/components/SelectTag/SelectTag.js +9 -5
  16. package/dist/components/BaseSelect/components/SelectTag/SelectTag.styles.d.ts +16 -0
  17. package/dist/components/{Select → BaseSelect}/components/SelectTag/SelectTag.styles.js +13 -3
  18. package/dist/components/BaseSelect/components/SelectTag/SelectTag.types.d.ts +11 -0
  19. package/dist/components/BaseSelect/contexts/BaseSelectContext.d.ts +33 -0
  20. package/dist/components/BaseSelect/contexts/BaseSelectContext.js +8 -0
  21. package/dist/components/BaseSelect/hooks/useCurrentValue.d.ts +7 -0
  22. package/dist/components/{Select → BaseSelect}/hooks/useCurrentValue.js +15 -0
  23. package/dist/components/BaseSelect/hooks/useDefaultCurrentValue.d.ts +2 -0
  24. package/dist/components/{Select → BaseSelect}/hooks/useDefaultCurrentValue.js +1 -1
  25. package/dist/components/BaseSelect/hooks/useDefaultSelectIndex.d.ts +2 -0
  26. package/dist/components/BaseSelect/hooks/useHideElements.d.ts +6 -0
  27. package/dist/components/{Select → BaseSelect}/hooks/useHideElements.js +11 -3
  28. package/dist/components/BaseSelect/hooks/useSearch.d.ts +10 -0
  29. package/dist/components/{Select → BaseSelect}/hooks/useSearch.js +4 -16
  30. package/dist/components/Checkbox/Checkbox.js +12 -8
  31. package/dist/components/Checkbox/Checkbox.utils.d.ts +2 -0
  32. package/dist/components/Checkbox/Checkbox.utils.js +5 -0
  33. package/dist/components/Checkbox/index.d.ts +1 -0
  34. package/dist/components/Input/Input.d.ts +2 -2
  35. package/dist/components/Input/Input.js +35 -10
  36. package/dist/components/Input/Input.styles.d.ts +7 -0
  37. package/dist/components/Input/Input.styles.js +9 -5
  38. package/dist/components/Input/Input.types.d.ts +16 -6
  39. package/dist/components/Input/components/InputPassword/InputPassword.d.ts +2 -1
  40. package/dist/components/Input/components/InputTextArea/InputTextArea.d.ts +2 -2
  41. package/dist/components/Input/components/InputTextArea/InputTextArea.js +27 -5
  42. package/dist/components/Input/components/InputTextArea/InputTextArea.types.d.ts +10 -2
  43. package/dist/components/Input/index.d.ts +3 -1
  44. package/dist/components/Select/Select.d.ts +2 -2
  45. package/dist/components/Select/Select.js +39 -281
  46. package/dist/components/Select/Select.types.d.ts +6 -85
  47. package/dist/components/Select/Select.utils.d.ts +1 -9
  48. package/dist/components/Select/Select.utils.js +1 -46
  49. package/dist/components/Select/components/SelectOption/SelectOption.js +20 -23
  50. package/dist/components/Select/components/SelectOption/SelectOption.styles.js +1 -1
  51. package/dist/components/Select/components/SelectOption/SelectOption.types.d.ts +13 -15
  52. package/dist/components/Select/hooks/useKeyControl.d.ts +7 -3
  53. package/dist/components/Select/hooks/useKeyControl.js +48 -13
  54. package/dist/components/TreeSelect/TreeSelect.d.ts +3 -0
  55. package/dist/components/TreeSelect/TreeSelect.js +189 -0
  56. package/dist/components/TreeSelect/TreeSelect.tokens.d.ts +30 -0
  57. package/dist/components/TreeSelect/TreeSelect.tokens.js +31 -0
  58. package/dist/components/TreeSelect/TreeSelect.types.d.ts +69 -0
  59. package/dist/components/TreeSelect/TreeSelect.utils.d.ts +13 -0
  60. package/dist/components/TreeSelect/TreeSelect.utils.js +192 -0
  61. package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.d.ts +3 -0
  62. package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.js +117 -0
  63. package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.styles.d.ts +83 -0
  64. package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.styles.js +111 -0
  65. package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.types.d.ts +27 -0
  66. package/dist/components/TreeSelect/contexts/treeSelectContext.d.ts +14 -0
  67. package/dist/components/TreeSelect/contexts/treeSelectContext.js +5 -0
  68. package/dist/components/TreeSelect/forStories/dataForExamples.d.ts +32 -0
  69. package/dist/components/TreeSelect/hooks/useAsyncLoading.d.ts +8 -0
  70. package/dist/components/TreeSelect/hooks/useAsyncLoading.js +39 -0
  71. package/dist/components/TreeSelect/hooks/useElementSizesController.d.ts +6 -0
  72. package/dist/components/TreeSelect/hooks/useElementSizesController.js +21 -0
  73. package/dist/components/TreeSelect/hooks/useExtendController.d.ts +19 -0
  74. package/dist/components/TreeSelect/hooks/useExtendController.js +65 -0
  75. package/dist/components/TreeSelect/hooks/useKeyControl.d.ts +11 -0
  76. package/dist/components/TreeSelect/hooks/useKeyControl.js +75 -0
  77. package/dist/components/TreeSelect/hooks/useTreeCheckable.d.ts +6 -0
  78. package/dist/components/TreeSelect/hooks/useTreeCheckable.js +56 -0
  79. package/dist/components/TreeSelect/hooks/useTreeData.d.ts +8 -0
  80. package/dist/components/TreeSelect/hooks/useTreeData.js +33 -0
  81. package/dist/components/TreeSelect/index.d.ts +2 -0
  82. package/dist/index.d.ts +5 -4
  83. package/dist/index.js +4 -0
  84. package/package.json +1 -1
  85. package/dist/components/Select/components/SelectOptionList/SelectOptionList.d.ts +0 -3
  86. package/dist/components/Select/components/SelectOptionList/SelectOptionList.js +0 -139
  87. package/dist/components/Select/components/SelectOptionList/SelectOptionList.types.d.ts +0 -42
  88. package/dist/components/Select/components/SelectOptionList/SelectOptionList.utils.d.ts +0 -1
  89. package/dist/components/Select/components/SelectOptionList/SelectOptionList.utils.js +0 -4
  90. package/dist/components/Select/components/SelectTag/SelectTag.d.ts +0 -3
  91. package/dist/components/Select/components/SelectTag/SelectTag.styles.d.ts +0 -8
  92. package/dist/components/Select/components/SelectTag/SelectTag.types.d.ts +0 -10
  93. package/dist/components/Select/hooks/useCurrentValue.d.ts +0 -8
  94. package/dist/components/Select/hooks/useDefaultCurrentValue.d.ts +0 -3
  95. package/dist/components/Select/hooks/useDefaultSelectIndex.d.ts +0 -2
  96. package/dist/components/Select/hooks/useDefaultSelectIndex.js +0 -17
  97. package/dist/components/Select/hooks/useHideElements.d.ts +0 -5
  98. package/dist/components/Select/hooks/useSearch.d.ts +0 -11
  99. /package/dist/components/{Select/Select.tokens.d.ts → BaseSelect/BaseSelect.tokens.d.ts} +0 -0
  100. /package/dist/components/{Select/Select.tokens.js → BaseSelect/BaseSelect.tokens.js} +0 -0
  101. /package/dist/components/{Select → BaseSelect}/components/TagPlaceholder/TagPlaceholder.d.ts +0 -0
  102. /package/dist/components/{Select → BaseSelect}/components/TagPlaceholder/TagPlaceholder.js +0 -0
  103. /package/dist/components/{Select → BaseSelect}/components/TagPlaceholder/TagPlaceholder.styles.d.ts +0 -0
  104. /package/dist/components/{Select → BaseSelect}/components/TagPlaceholder/TagPlaceholder.styles.js +0 -0
  105. /package/dist/components/{Select → BaseSelect}/components/TagPlaceholder/TagPlaceholder.types.d.ts +0 -0
@@ -0,0 +1,111 @@
1
+ import { getTreeSelectTokens } from "../../TreeSelect.tokens.js";
2
+ const getColor = (treeSelectTokens, selected, disabled, treeCheckable) => {
3
+ if (disabled) {
4
+ return treeSelectTokens.treeSelectOptionTextDisabled;
5
+ }
6
+ if (treeCheckable) {
7
+ return treeSelectTokens.treeSelectOptionText;
8
+ }
9
+ if (selected) {
10
+ return treeSelectTokens.treeSelectOptionTextSelected;
11
+ }
12
+ return treeSelectTokens.treeSelectOptionText;
13
+ };
14
+ const getTreeSelectOptionStyle = ({
15
+ disabled,
16
+ loading,
17
+ selected,
18
+ isSelecting,
19
+ treeCheckable,
20
+ isLastNode
21
+ }) => {
22
+ return {
23
+ wrapper: () => ({
24
+ display: "flex",
25
+ flexDirection: "column"
26
+ }),
27
+ header: (theme) => {
28
+ const treeSelectTokens = getTreeSelectTokens(theme);
29
+ const lastNodePadding = theme.iconS + treeSelectTokens.treeSelectSwitcherPadding * 2 + treeSelectTokens.treeSelectNodeGap;
30
+ return {
31
+ display: "flex",
32
+ alignItems: "center",
33
+ width: "100%",
34
+ height: theme.controlHeightM,
35
+ gap: treeSelectTokens.treeSelectNodeGap,
36
+ boxSizing: "border-box",
37
+ paddingLeft: isLastNode ? lastNodePadding : 0
38
+ };
39
+ },
40
+ switcher: (theme) => {
41
+ const treeSelectTokens = getTreeSelectTokens(theme);
42
+ return {
43
+ fontSize: theme.iconS,
44
+ padding: treeSelectTokens.treeSelectSwitcherPadding,
45
+ display: "inline-flex",
46
+ alignItems: "center",
47
+ borderRadius: theme.borderRadiusM,
48
+ color: loading ? treeSelectTokens.treeSelectTextDisabled : treeSelectTokens.treeSelectOptionText,
49
+ cursor: disabled ? "not-allowed" : "pointer",
50
+ ":hover, :focus, focus-visible": {
51
+ background: disabled ? "unset" : treeSelectTokens.treeSelectOptionBgHover,
52
+ outline: "none"
53
+ }
54
+ };
55
+ },
56
+ item: (theme) => {
57
+ const treeSelectTokens = getTreeSelectTokens(theme);
58
+ return {
59
+ display: "flex",
60
+ alignItems: "center",
61
+ width: "100%",
62
+ padding: `${treeSelectTokens.treeSelectOptionPaddingVertical}px ${treeSelectTokens.treeSelectOptionPaddingHorizontal}px`,
63
+ color: getColor(treeSelectTokens, selected, disabled, treeCheckable),
64
+ boxSizing: "border-box",
65
+ flexWrap: "nowrap",
66
+ transition: `background .2s, color .2s`,
67
+ cursor: disabled ? "not-allowed" : "pointer",
68
+ borderRadius: theme.borderRadiusM,
69
+ background: isSelecting ? treeSelectTokens.treeSelectOptionBgHover : "unset",
70
+ ":hover, :focus, focus-visible": {
71
+ background: disabled ? "unset" : treeSelectTokens.treeSelectOptionBgHover,
72
+ outline: "none"
73
+ }
74
+ };
75
+ },
76
+ content: (theme) => {
77
+ return {
78
+ display: "inline-flex",
79
+ gap: theme.marginXS,
80
+ width: selected ? `calc(100% - ${theme.marginXS + theme.iconM}px)` : "100%",
81
+ flex: "1 1 auto",
82
+ flexWrap: "nowrap"
83
+ };
84
+ },
85
+ icon: (theme) => ({
86
+ fontSize: theme.iconM,
87
+ display: "flex",
88
+ justifyContent: "center",
89
+ alignItems: "center"
90
+ }),
91
+ text: (theme) => ({
92
+ display: "inline-block",
93
+ overflow: "hidden",
94
+ whiteSpace: "nowrap",
95
+ textOverflow: "ellipsis",
96
+ width: "100%",
97
+ ...theme.typography.body2
98
+ }),
99
+ children: (theme) => {
100
+ const treeSelectTokens = getTreeSelectTokens(theme);
101
+ return {
102
+ display: "flex",
103
+ flexDirection: "column",
104
+ paddingLeft: treeSelectTokens.treeSelectNodeIndent
105
+ };
106
+ }
107
+ };
108
+ };
109
+ export {
110
+ getTreeSelectOptionStyle
111
+ };
@@ -0,0 +1,27 @@
1
+ import { Interpolation } from '@emotion/react';
2
+ import { BaseSelectOptionInterface } from 'components/BaseSelect/BaseSelect.types';
3
+ import { TreeSelectNodeValue } from 'components/TreeSelect/TreeSelect.types';
4
+ import { Theme } from 'themes';
5
+ export interface TreeSelectNodeStyles {
6
+ wrapper?: () => Interpolation;
7
+ header?: (theme: Theme) => Interpolation;
8
+ switcher?: (theme: Theme) => Interpolation;
9
+ item?: (theme: Theme) => Interpolation;
10
+ content?: (theme: Theme) => Interpolation;
11
+ text?: (theme: Theme) => Interpolation;
12
+ icon?: (theme: Theme) => Interpolation;
13
+ children?: (theme: Theme) => Interpolation;
14
+ }
15
+ export interface TreeNode extends BaseSelectOptionInterface<TreeSelectNodeValue> {
16
+ checkable?: boolean;
17
+ disableCheckbox?: boolean;
18
+ leaf?: boolean;
19
+ key: string;
20
+ selectable?: boolean;
21
+ children?: TreeNode[];
22
+ }
23
+ export interface TreeSelectOptionProps extends TreeNode {
24
+ index: number;
25
+ itemKey: string;
26
+ styles?: TreeSelectNodeStyles;
27
+ }
@@ -0,0 +1,14 @@
1
+ import { NodeData, ShowCheckedStrategyType } from '../TreeSelect.types';
2
+ export interface TreeSelectContextShape {
3
+ nodeDataMap: Map<string, NodeData>;
4
+ treeCheckable: boolean;
5
+ showCheckedStrategy: ShowCheckedStrategyType;
6
+ expandedKeys: string[];
7
+ loadingKeys: string[];
8
+ isAsyncLoading: boolean;
9
+ getCurrentSelectingKey: () => string | null;
10
+ onSwitcherClick: (key: string) => void;
11
+ changeElementSize: (index: number, newSize: number) => void;
12
+ onCheckableClick: (nodeKey: string) => void;
13
+ }
14
+ export declare const treeSelectContext: import('react').Context<TreeSelectContextShape>;
@@ -0,0 +1,5 @@
1
+ import { createContext } from "react";
2
+ const treeSelectContext = createContext({});
3
+ export {
4
+ treeSelectContext
5
+ };
@@ -0,0 +1,32 @@
1
+ import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
2
+ export declare const treeData: ({
3
+ value: string;
4
+ title: string;
5
+ key: string;
6
+ children: {
7
+ value: string;
8
+ title: string;
9
+ key: string;
10
+ children: {
11
+ value: string;
12
+ title: string;
13
+ key: string;
14
+ }[];
15
+ }[];
16
+ } | {
17
+ value: string;
18
+ title: string;
19
+ key: string;
20
+ children: {
21
+ value: string;
22
+ title: string;
23
+ key: string;
24
+ }[];
25
+ })[];
26
+ export declare const baseLoadingData: {
27
+ value: string;
28
+ title: string;
29
+ key: string;
30
+ children: never[];
31
+ }[];
32
+ export declare const loadData: (node: TreeNode) => Promise<TreeNode[]>;
@@ -0,0 +1,8 @@
1
+ import { Dispatch, SetStateAction } from 'react';
2
+ import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
3
+ import { NodeData } from '../TreeSelect.types';
4
+ export declare const useAsyncLoading: (treeLoadedKeys: string[], nodeDataMap: Map<string, NodeData>, setAsyncTreeData: Dispatch<SetStateAction<TreeNode[]>>, loadData: ((node: TreeNode) => Promise<TreeNode[]>) | undefined) => {
5
+ loadingKeys: string[];
6
+ loadedKeys: string[];
7
+ loadChildrenNodes: (node: TreeNode) => Promise<void>;
8
+ };
@@ -0,0 +1,39 @@
1
+ import { useState, useCallback } from "react";
2
+ import { isUndefined } from "lodash-es";
3
+ import { addChildrenNodesToTree } from "../TreeSelect.utils.js";
4
+ const useAsyncLoading = (treeLoadedKeys, nodeDataMap, setAsyncTreeData, loadData) => {
5
+ const [loadedKeys, setLoadedKeys] = useState(treeLoadedKeys);
6
+ const [loadingKeys, setLoadingKeys] = useState([]);
7
+ const addToLoadingKeys = useCallback((key) => {
8
+ setLoadingKeys((prev) => [...prev, key]);
9
+ }, []);
10
+ const removeFromLoadingKey = useCallback((key) => {
11
+ setLoadingKeys((prev) => prev.filter((item) => item !== key));
12
+ }, []);
13
+ const loadChildrenNodes = useCallback(async (node) => {
14
+ const {
15
+ key
16
+ } = node;
17
+ if (isUndefined(loadData) || loadedKeys.includes(key) || loadingKeys.includes(key)) {
18
+ return;
19
+ }
20
+ try {
21
+ addToLoadingKeys(node.key);
22
+ const childrenNodes = await loadData(node);
23
+ setAsyncTreeData((prev) => addChildrenNodesToTree(prev, childrenNodes, key, nodeDataMap) ?? prev);
24
+ setLoadedKeys((prev) => [...prev, node.key]);
25
+ } catch (e) {
26
+ console.error(e);
27
+ } finally {
28
+ removeFromLoadingKey(node.key);
29
+ }
30
+ }, [addToLoadingKeys, loadData, loadedKeys, loadingKeys, nodeDataMap, removeFromLoadingKey, setAsyncTreeData]);
31
+ return {
32
+ loadingKeys,
33
+ loadedKeys,
34
+ loadChildrenNodes
35
+ };
36
+ };
37
+ export {
38
+ useAsyncLoading
39
+ };
@@ -0,0 +1,6 @@
1
+ import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
2
+ export declare const DEFAULT_ELEMENT_SIZE = 28;
3
+ export declare const useElementSizesController: (treeData: TreeNode[]) => {
4
+ elementSizes: number[];
5
+ changeElementSize: (index: number, newSize: number) => void;
6
+ };
@@ -0,0 +1,21 @@
1
+ import { useState, useCallback } from "react";
2
+ const DEFAULT_ELEMENT_SIZE = 28;
3
+ const useElementSizesController = (treeData) => {
4
+ const defaultValue = treeData.map(() => DEFAULT_ELEMENT_SIZE);
5
+ const [elementSizes, setElementSizes] = useState(defaultValue);
6
+ const changeElementSize = useCallback((index, newSize) => {
7
+ setElementSizes((prev) => {
8
+ const newSizes = [...prev];
9
+ newSizes.splice(index, 1, newSize);
10
+ return newSizes;
11
+ });
12
+ }, []);
13
+ return {
14
+ elementSizes,
15
+ changeElementSize
16
+ };
17
+ };
18
+ export {
19
+ DEFAULT_ELEMENT_SIZE,
20
+ useElementSizesController
21
+ };
@@ -0,0 +1,19 @@
1
+ import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
2
+ interface UseExtendControllerProps {
3
+ allParentKeys: string[];
4
+ treeDefaultExpandAll: boolean;
5
+ treeDefaultExpandedKeys: string[];
6
+ treeExpandedKeys?: string[];
7
+ treeNodeMap: Map<string, TreeNode>;
8
+ onTreeExpand?: (expandedKeys: string[]) => void;
9
+ onExpandSwitcherClick?: (nodeKey: string) => void;
10
+ loadChildrenNodes: (node: TreeNode) => Promise<void>;
11
+ loadData: ((node: TreeNode) => Promise<TreeNode[]>) | undefined;
12
+ onSearch: ((searchValue: string) => void) | undefined;
13
+ }
14
+ export declare const useExtendController: ({ allParentKeys, treeDefaultExpandAll, treeDefaultExpandedKeys, treeExpandedKeys, treeNodeMap, onTreeExpand, onExpandSwitcherClick, loadChildrenNodes, loadData, onSearch, }: UseExtendControllerProps) => {
15
+ expandedKeys: string[];
16
+ onSwitcherClick: (key: string) => void;
17
+ handleExpandSearch: (searchValue: string) => void;
18
+ };
19
+ export {};
@@ -0,0 +1,65 @@
1
+ import { isFunction, isUndefined } from "lodash-es";
2
+ import { useState, useRef, useEffect, useCallback } from "react";
3
+ const useExtendController = ({
4
+ allParentKeys,
5
+ treeDefaultExpandAll,
6
+ treeDefaultExpandedKeys,
7
+ treeExpandedKeys,
8
+ treeNodeMap,
9
+ onTreeExpand,
10
+ onExpandSwitcherClick,
11
+ loadChildrenNodes,
12
+ loadData,
13
+ onSearch
14
+ }) => {
15
+ const [isSearching, setIsSearching] = useState(false);
16
+ const defaultExpand = treeDefaultExpandAll || isSearching ? allParentKeys : treeDefaultExpandedKeys;
17
+ const [localExpandedKeys, setExpandedKeys] = useState(defaultExpand);
18
+ const expandedKeys = treeExpandedKeys ?? localExpandedKeys;
19
+ const hasComponentMount = useRef(false);
20
+ useEffect(() => {
21
+ if (!hasComponentMount.current) {
22
+ hasComponentMount.current = true;
23
+ return;
24
+ }
25
+ onTreeExpand == null ? void 0 : onTreeExpand(localExpandedKeys);
26
+ }, [localExpandedKeys, onTreeExpand]);
27
+ const handleExpandSearch = useCallback((searchValue) => {
28
+ onSearch == null ? void 0 : onSearch(searchValue);
29
+ if (searchValue.length > 0) {
30
+ if (!isSearching) {
31
+ setIsSearching(true);
32
+ }
33
+ return;
34
+ }
35
+ if (isSearching) {
36
+ setIsSearching(false);
37
+ }
38
+ }, [isSearching, onSearch]);
39
+ const handleSwitcherClick = useCallback((key) => {
40
+ onExpandSwitcherClick == null ? void 0 : onExpandSwitcherClick(key);
41
+ if (isFunction(loadData)) {
42
+ const node = treeNodeMap.get(key);
43
+ if (node) {
44
+ loadChildrenNodes(node);
45
+ }
46
+ }
47
+ if (!isUndefined(treeExpandedKeys)) {
48
+ return;
49
+ }
50
+ setExpandedKeys((prev) => {
51
+ if (prev.includes(key)) {
52
+ return prev.filter((item) => item !== key);
53
+ }
54
+ return [...prev, key];
55
+ });
56
+ }, [loadChildrenNodes, loadData, onExpandSwitcherClick, treeExpandedKeys, treeNodeMap]);
57
+ return {
58
+ expandedKeys,
59
+ onSwitcherClick: handleSwitcherClick,
60
+ handleExpandSearch
61
+ };
62
+ };
63
+ export {
64
+ useExtendController
65
+ };
@@ -0,0 +1,11 @@
1
+ import { KeyboardEvent } from 'react';
2
+ import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
3
+ export declare const useKeyControl: (treeData: TreeNode[], expandedKeys: string[], treeNodeMap: Map<string, TreeNode>, onDropdownVisibleChange: (() => void) | undefined, onChange: ((selectedKeys: string[], treeNode: TreeNode[]) => void) | undefined, onSearch: ((searchValue: string) => void) | undefined) => {
4
+ currentSelectingIndex: number;
5
+ isKeyControl: boolean;
6
+ onKeyControl: (e: KeyboardEvent) => void;
7
+ handleDropdownVisibleChange: () => void;
8
+ handleChange: (selectedKeys: string[], treeNode: TreeNode[]) => void;
9
+ handleSearch: (searchValue: string) => void;
10
+ getCurrentSelectingKey: () => string | null;
11
+ };
@@ -0,0 +1,75 @@
1
+ import { useMemo, useState, useCallback } from "react";
2
+ import { isNull } from "lodash-es";
3
+ import { flattenedNodes, getNextOption } from "../TreeSelect.utils.js";
4
+ const useKeyControl = (treeData, expandedKeys, treeNodeMap, onDropdownVisibleChange, onChange, onSearch) => {
5
+ const flattenedTreeDataKeys = useMemo(() => {
6
+ return flattenedNodes(treeData, expandedKeys);
7
+ }, [expandedKeys, treeData]);
8
+ const [currentStartingPosition, setCurrentStartingPosition] = useState(0);
9
+ const [currentSelectingIndex, setCurrentSelectingIndex] = useState(0);
10
+ const [isKeyControl, setIsControl] = useState(false);
11
+ const getCurrentSelectingKey = useCallback(() => {
12
+ if (!isKeyControl) {
13
+ return null;
14
+ }
15
+ return flattenedTreeDataKeys[currentSelectingIndex];
16
+ }, [currentSelectingIndex, flattenedTreeDataKeys, isKeyControl]);
17
+ const setNextIndex = useCallback((nextItemIndex) => {
18
+ if (isNull(nextItemIndex)) {
19
+ return;
20
+ }
21
+ setCurrentSelectingIndex(nextItemIndex);
22
+ }, []);
23
+ const onKeyControl = useCallback((e) => {
24
+ if (e.key === "ArrowDown") {
25
+ if (!isKeyControl) {
26
+ setIsControl(true);
27
+ return;
28
+ }
29
+ const nextItemIndex = getNextOption(currentSelectingIndex, flattenedTreeDataKeys, treeNodeMap);
30
+ setNextIndex(nextItemIndex);
31
+ }
32
+ if (e.key === "ArrowUp") {
33
+ if (!isKeyControl) {
34
+ setIsControl(true);
35
+ return;
36
+ }
37
+ const nextItemIndex = getNextOption(currentSelectingIndex, flattenedTreeDataKeys, treeNodeMap, true);
38
+ setNextIndex(nextItemIndex);
39
+ }
40
+ }, [currentSelectingIndex, flattenedTreeDataKeys, isKeyControl, setNextIndex, treeNodeMap]);
41
+ const handleSearch = useCallback((searchValue) => {
42
+ onSearch == null ? void 0 : onSearch(searchValue);
43
+ setCurrentStartingPosition(0);
44
+ setCurrentSelectingIndex(0);
45
+ }, [onSearch]);
46
+ const handleDropdownVisibleChange = useCallback(() => {
47
+ onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange();
48
+ setIsControl(false);
49
+ setCurrentSelectingIndex(currentStartingPosition);
50
+ }, [currentStartingPosition, onDropdownVisibleChange, setCurrentSelectingIndex]);
51
+ const handleChange = useCallback((selectedKeys, treeNode) => {
52
+ onChange == null ? void 0 : onChange(selectedKeys, treeNode);
53
+ const lastSelectedKeyIndex = selectedKeys.length - 1;
54
+ if (lastSelectedKeyIndex < 0) {
55
+ setCurrentStartingPosition(0);
56
+ return;
57
+ }
58
+ const lastSelectedKey = selectedKeys[lastSelectedKeyIndex];
59
+ const lastValueOptionIndex = flattenedTreeDataKeys.findIndex((key) => key === lastSelectedKey);
60
+ const newStartingIndex = lastValueOptionIndex === -1 ? 0 : lastValueOptionIndex;
61
+ setCurrentStartingPosition(newStartingIndex);
62
+ }, [flattenedTreeDataKeys, onChange]);
63
+ return {
64
+ currentSelectingIndex,
65
+ isKeyControl,
66
+ onKeyControl,
67
+ handleDropdownVisibleChange,
68
+ handleChange,
69
+ handleSearch,
70
+ getCurrentSelectingKey
71
+ };
72
+ };
73
+ export {
74
+ useKeyControl
75
+ };
@@ -0,0 +1,6 @@
1
+ import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
2
+ import { NodeData, ShowCheckedStrategyType } from '../TreeSelect.types';
3
+ export declare const useTreeCheckable: (nodeDataMap: Map<string, NodeData>, treeNodeMap: Map<string, TreeNode>, showCheckedStrategy: ShowCheckedStrategyType, isAsyncLoading: boolean, onDeselect?: ((nodeKey: string) => void) | undefined) => {
4
+ checkedKeys: string[];
5
+ onCheckableClick: (nodeKey: string) => void;
6
+ };
@@ -0,0 +1,56 @@
1
+ import { getAddedParentKeys, isSelectedByChildStrategy, isSelectedByParentAndAllStrategy } from "../TreeSelect.utils.js";
2
+ import { useState, useCallback } from "react";
3
+ const useTreeCheckable = (nodeDataMap, treeNodeMap, showCheckedStrategy, isAsyncLoading, onDeselect) => {
4
+ const [checkedKeys, setCheckedKeys] = useState([]);
5
+ const addNodeKeys = useCallback((key) => {
6
+ if (Array.isArray(key)) {
7
+ setCheckedKeys((prev) => {
8
+ const newValueSet = /* @__PURE__ */ new Set([...prev, ...key]);
9
+ return Array.from(newValueSet);
10
+ });
11
+ return;
12
+ }
13
+ setCheckedKeys((prev) => [...prev, key]);
14
+ }, []);
15
+ const deleteNodeKeys = useCallback((removeKey) => {
16
+ if (Array.isArray(removeKey)) {
17
+ setCheckedKeys((prev) => prev.filter((value) => !removeKey.includes(value)));
18
+ return;
19
+ }
20
+ setCheckedKeys((prev) => prev.filter((key) => key !== removeKey));
21
+ onDeselect == null ? void 0 : onDeselect(removeKey);
22
+ }, [onDeselect]);
23
+ const removeNodes = useCallback((nodeData) => {
24
+ const removedNodeKeys = [...nodeData.childrenKeys, nodeData.key, ...nodeData.parentKeys];
25
+ deleteNodeKeys(removedNodeKeys);
26
+ }, [deleteNodeKeys]);
27
+ const addNodes = useCallback((nodeData) => {
28
+ const addedParentKeys = getAddedParentKeys(nodeData.parentKey, nodeData, nodeDataMap, checkedKeys);
29
+ addNodeKeys([...addedParentKeys, nodeData.key, ...nodeData.childrenKeys]);
30
+ }, [addNodeKeys, checkedKeys, nodeDataMap]);
31
+ const handleCheckableClick = useCallback((nodeKey) => {
32
+ const node = treeNodeMap.get(nodeKey);
33
+ const nodeData = nodeDataMap.get(nodeKey);
34
+ if (!nodeData || !node) {
35
+ return;
36
+ }
37
+ const {
38
+ leaf,
39
+ children
40
+ } = node;
41
+ const isLastNode = leaf || !children || (children == null ? void 0 : children.length) === 0 && !isAsyncLoading;
42
+ const selected = showCheckedStrategy === "child" ? isSelectedByChildStrategy(node, checkedKeys, isLastNode) : isSelectedByParentAndAllStrategy(node, checkedKeys);
43
+ if (selected) {
44
+ removeNodes(nodeData);
45
+ return;
46
+ }
47
+ addNodes(nodeData);
48
+ }, [addNodes, checkedKeys, isAsyncLoading, nodeDataMap, removeNodes, showCheckedStrategy, treeNodeMap]);
49
+ return {
50
+ checkedKeys,
51
+ onCheckableClick: handleCheckableClick
52
+ };
53
+ };
54
+ export {
55
+ useTreeCheckable
56
+ };
@@ -0,0 +1,8 @@
1
+ import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
2
+ import { NodeData } from '../TreeSelect.types';
3
+ export declare const useNodeDataMap: (treeData: TreeNode[]) => {
4
+ nodeDataMap: Map<string, NodeData>;
5
+ treeNodeMap: Map<string, TreeNode>;
6
+ leafChildrenKeys: string[];
7
+ allParentKeys: string[];
8
+ };
@@ -0,0 +1,33 @@
1
+ import { useMemo } from "react";
2
+ import { getNodeData, getAllParentKeys, ROOT_NODE } from "../TreeSelect.utils.js";
3
+ const useNodeDataMap = (treeData) => {
4
+ const {
5
+ nodeDataMap,
6
+ treeNodeMap,
7
+ leafChildrenKeys,
8
+ allParentKeys
9
+ } = useMemo(() => {
10
+ const treeNodeMap2 = /* @__PURE__ */ new Map();
11
+ const nodeDataMap2 = /* @__PURE__ */ new Map();
12
+ const leafChildrenKeys2 = treeData.reduce((acc, treeNode) => {
13
+ const nodeData = getNodeData(treeNode, ROOT_NODE, [], nodeDataMap2, treeNodeMap2);
14
+ return [...acc, ...nodeData.leafChildrenKeys];
15
+ }, []);
16
+ const allParentKeys2 = getAllParentKeys(treeData);
17
+ return {
18
+ nodeDataMap: nodeDataMap2,
19
+ treeNodeMap: treeNodeMap2,
20
+ leafChildrenKeys: leafChildrenKeys2,
21
+ allParentKeys: allParentKeys2
22
+ };
23
+ }, [treeData]);
24
+ return {
25
+ nodeDataMap,
26
+ treeNodeMap,
27
+ leafChildrenKeys,
28
+ allParentKeys
29
+ };
30
+ };
31
+ export {
32
+ useNodeDataMap
33
+ };
@@ -0,0 +1,2 @@
1
+ export { TreeSelect } from './TreeSelect';
2
+ export type { TreeSelectProps } from './TreeSelect.types';
package/dist/index.d.ts CHANGED
@@ -10,12 +10,11 @@ export { Button } from './components/Button';
10
10
  export type { ButtonProps } from './components/Button';
11
11
  export { Switch } from './components/Switch';
12
12
  export type { SwitchProps } from './components/Switch';
13
- export { Checkbox } from './components/Checkbox';
14
- export type { CheckboxProps, CheckboxChangeEvent } from './components/Checkbox';
15
- export type { CheckboxGroupProps } from './components/Checkbox';
13
+ export { Checkbox, isCheckboxChangeEvent } from './components/Checkbox';
14
+ export type { CheckboxProps, CheckboxChangeEvent, CheckboxGroupProps } from './components/Checkbox';
16
15
  export { Select } from './components/Select';
17
16
  export type { SelectProps } from './components/Select';
18
- export { type InputProps, Input } from './components/Input';
17
+ export { type TextAreaProps, type TextAreaRef, type InputProps, type InputRef, type PasswordProps, Input, } from './components/Input';
19
18
  export { type InputNumberProps, InputNumber, inputNumberWrapperClassName, } from './components/InputNumber';
20
19
  export { type RadioChangeEvent, type RadioGroupProps, type RadioProps, Radio, } from './components/Radio';
21
20
  export { Alert } from './components/Alert';
@@ -44,3 +43,5 @@ export { ConfigProvider, useConfig, type Locale } from './components/ConfigProvi
44
43
  export type { PickerLocale, RangePickerProps } from './components/InternalPicker';
45
44
  export { type FormProps, type FormItemProps, Form } from './components/Form';
46
45
  export { type PopconfirmProps, Popconfirm } from './components/Popconfirm';
46
+ export { TreeSelect } from './components/TreeSelect';
47
+ export type { TreeSelectProps } from './components/TreeSelect';
package/dist/index.js CHANGED
@@ -7,6 +7,7 @@ import { useTheme } from "./hooks/useTheme/useTheme.js";
7
7
  import { LoadingOutlined } from "./icons/icons/LoadingOutlined.js";
8
8
  import { Button } from "./components/Button/Button.js";
9
9
  import { Switch } from "./components/Switch/Switch.js";
10
+ import { isCheckboxChangeEvent } from "./components/Checkbox/Checkbox.utils.js";
10
11
  import { Select } from "./components/Select/Select.js";
11
12
  import { Input } from "./components/Input/Input.js";
12
13
  import { InputNumber } from "./components/InputNumber/InputNumber.js";
@@ -30,6 +31,7 @@ import { ConfigProvider } from "./components/ConfigProvider/ConfigProvider.js";
30
31
  import { useConfig } from "./components/ConfigProvider/hooks/useConfig/useConfig.js";
31
32
  import { Form } from "./components/Form/Form.js";
32
33
  import { Popconfirm } from "./components/Popconfirm/Popconfirm.js";
34
+ import { TreeSelect } from "./components/TreeSelect/TreeSelect.js";
33
35
  export {
34
36
  Alert,
35
37
  Avatar,
@@ -54,9 +56,11 @@ export {
54
56
  ThemeProvider,
55
57
  TimePicker,
56
58
  Tooltip,
59
+ TreeSelect,
57
60
  Upload,
58
61
  avatarColors,
59
62
  inputNumberWrapperClassName,
63
+ isCheckboxChangeEvent,
60
64
  message,
61
65
  messagesHolder,
62
66
  themeMap,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@infomaximum/ui-kit",
3
3
  "license": "Apache-2.0",
4
- "version": "0.12.12",
4
+ "version": "0.13.1",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -1,3 +0,0 @@
1
- import { FC } from 'react';
2
- import { SelectOptionListProps } from './SelectOptionList.types';
3
- export declare const SelectOptionList: FC<SelectOptionListProps>;