@synerise/ds-utils 0.29.0 → 0.29.2
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/CHANGELOG.md +22 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +1 -0
- package/dist/types/types.d.ts +2 -0
- package/dist/useSearchResults/index.d.ts +2 -0
- package/dist/useSearchResults/index.js +2 -0
- package/dist/useSearchResults/search.utils.d.ts +5 -0
- package/dist/useSearchResults/search.utils.js +18 -0
- package/dist/useSearchResults/useSearchResults.d.ts +17 -0
- package/dist/useSearchResults/useSearchResults.js +64 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.29.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.29.1...@synerise/ds-utils@0.29.2) (2024-09-13)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **table:** allow htmlattributes on cell divs ([f4cf677](https://github.com/synerise/synerise-design/commit/f4cf6773add2a4e8ce62dc83d42ae93f2c8d27b0))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.29.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.29.0...@synerise/ds-utils@0.29.1) (2024-09-11)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* **context-selector:** updated search logic ([dfadc02](https://github.com/synerise/synerise-design/commit/dfadc02928651905f31c58a374d48368b8375eb3))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
# [0.29.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.28.2...@synerise/ds-utils@0.29.0) (2024-09-03)
|
|
7
29
|
|
|
8
30
|
|
package/dist/index.d.ts
CHANGED
|
@@ -14,9 +14,10 @@ export { default as usePrevious } from './usePrevious/usePrevious';
|
|
|
14
14
|
export { default as useElementInView } from './useElementInView/useElementInView';
|
|
15
15
|
export { default as useOverscrollBlock } from './useOverscrollBlock/useOverscrollBlock';
|
|
16
16
|
export { default as useResizeToFit } from './useResizeToFit/useResizeToFit';
|
|
17
|
+
export * from './useSearchResults';
|
|
17
18
|
export * from './omitKeys/omitKeys';
|
|
18
19
|
export * from './useTraceUpdate';
|
|
19
20
|
export * from './getPopupContainer';
|
|
20
21
|
export declare const NOOP: () => void;
|
|
21
22
|
export type { HandledEventsType } from './useOnClickOutside/useOnClickOutside';
|
|
22
|
-
export type { LiteralStringUnion } from './types/types';
|
|
23
|
+
export type { LiteralStringUnion, WithHTMLAttributes } from './types/types';
|
package/dist/index.js
CHANGED
|
@@ -14,6 +14,7 @@ export { default as usePrevious } from './usePrevious/usePrevious';
|
|
|
14
14
|
export { default as useElementInView } from './useElementInView/useElementInView';
|
|
15
15
|
export { default as useOverscrollBlock } from './useOverscrollBlock/useOverscrollBlock';
|
|
16
16
|
export { default as useResizeToFit } from './useResizeToFit/useResizeToFit';
|
|
17
|
+
export * from './useSearchResults';
|
|
17
18
|
export * from './omitKeys/omitKeys';
|
|
18
19
|
export * from './useTraceUpdate';
|
|
19
20
|
export * from './getPopupContainer';
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
1
2
|
/**
|
|
2
3
|
* Allows creating a literal string union type with auto-completion in IDEs
|
|
3
4
|
*/
|
|
4
5
|
export type LiteralStringUnion<T extends string> = T | (string & {});
|
|
6
|
+
export type WithHTMLAttributes<ElementType extends HTMLElement, BaseType> = BaseType & Omit<HTMLAttributes<ElementType>, keyof BaseType>;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ReactText } from 'react';
|
|
2
|
+
import { BaseGroupType } from './useSearchResults';
|
|
3
|
+
export declare const isItemInGroup: <GroupType extends BaseGroupType<GroupType>>(groupId?: ReactText, currentGroup?: GroupType | undefined) => boolean;
|
|
4
|
+
export declare const getActiveTabGroup: <GroupType extends BaseGroupType<GroupType>>(tabIndex: number, groups?: GroupType[] | undefined) => GroupType | undefined;
|
|
5
|
+
export declare const getGroupName: <GroupType extends BaseGroupType<GroupType>>(groupId: ReactText, groups: BaseGroupType<GroupType>[]) => string | undefined;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export var isItemInGroup = function isItemInGroup(groupId, currentGroup) {
|
|
2
|
+
if (!currentGroup || !groupId) return true;
|
|
3
|
+
return currentGroup.subGroups ? (currentGroup == null ? void 0 : currentGroup.subGroups.findIndex(function (group) {
|
|
4
|
+
return group.id === groupId;
|
|
5
|
+
})) > -1 : groupId === currentGroup.id;
|
|
6
|
+
};
|
|
7
|
+
export var getActiveTabGroup = function getActiveTabGroup(tabIndex, groups) {
|
|
8
|
+
return groups && groups[tabIndex];
|
|
9
|
+
};
|
|
10
|
+
export var getGroupName = function getGroupName(groupId, groups) {
|
|
11
|
+
var _groups$flatMap$find;
|
|
12
|
+
|
|
13
|
+
return (_groups$flatMap$find = groups.flatMap(function (group) {
|
|
14
|
+
return group.subGroups ? group.subGroups : group;
|
|
15
|
+
}).find(function (group) {
|
|
16
|
+
return group.id === groupId;
|
|
17
|
+
})) == null ? void 0 : _groups$flatMap$find.name;
|
|
18
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ReactText } from 'react';
|
|
2
|
+
export type BaseItemType = {
|
|
3
|
+
id: ReactText | null;
|
|
4
|
+
groupId?: ReactText;
|
|
5
|
+
subtitle?: string;
|
|
6
|
+
name: string;
|
|
7
|
+
};
|
|
8
|
+
export type BaseGroupType<SubGroupType> = {
|
|
9
|
+
id: ReactText;
|
|
10
|
+
name: string;
|
|
11
|
+
subGroups?: SubGroupType[];
|
|
12
|
+
};
|
|
13
|
+
export declare const useSearchResults: <ItemType extends BaseItemType, GroupType extends BaseGroupType<GroupType>, GroupedListItemType>(items: ItemType[], groups: GroupType[], activeTab: number, groupByGroupName: (items: ItemType[], max?: number) => GroupedListItemType[], activeGroup?: GroupType | undefined, searchQuery?: string, maxSearchResultsInGroup?: number) => {
|
|
14
|
+
searchResults: GroupedListItemType[];
|
|
15
|
+
getActiveTabGroup: <GroupType_1 extends BaseGroupType<GroupType_1>>(tabIndex: number, groups?: GroupType_1[] | undefined) => GroupType_1 | undefined;
|
|
16
|
+
getGroupName: <GroupType_2 extends BaseGroupType<GroupType_2>>(groupId: ReactText, groups: BaseGroupType<GroupType_2>[]) => string | undefined;
|
|
17
|
+
};
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
4
|
+
|
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
|
|
7
|
+
import { useMemo } from 'react';
|
|
8
|
+
import { getActiveTabGroup, getGroupName, isItemInGroup } from './search.utils';
|
|
9
|
+
export var useSearchResults = function useSearchResults(items, groups, activeTab, groupByGroupName, activeGroup, searchQuery, maxSearchResultsInGroup) {
|
|
10
|
+
var showGroupedResults = useMemo(function () {
|
|
11
|
+
var _getActiveTabGroup;
|
|
12
|
+
|
|
13
|
+
return activeTab && !activeGroup ? Boolean((_getActiveTabGroup = getActiveTabGroup(activeTab, groups)) == null ? void 0 : _getActiveTabGroup.subGroups) : Boolean(activeTab === 0 && !activeGroup);
|
|
14
|
+
}, [activeTab, activeGroup, groups]);
|
|
15
|
+
var groupOrder = useMemo(function () {
|
|
16
|
+
return groups.flatMap(function (group) {
|
|
17
|
+
return group.subGroups ? group.subGroups.map(function (subgroup) {
|
|
18
|
+
return subgroup.id;
|
|
19
|
+
}) : group.id;
|
|
20
|
+
});
|
|
21
|
+
}, [groups]);
|
|
22
|
+
var searchResults = useMemo(function () {
|
|
23
|
+
if (!searchQuery) return [];
|
|
24
|
+
var result = [];
|
|
25
|
+
var itemsNumber = items.length;
|
|
26
|
+
|
|
27
|
+
for (var i = 0; i < itemsNumber; i += 1) {
|
|
28
|
+
var item = items[i];
|
|
29
|
+
var itemInTab = !activeTab || isItemInGroup(item.groupId, getActiveTabGroup(activeTab, groups));
|
|
30
|
+
var itemInGroup = !activeGroup || item.groupId === activeGroup.id;
|
|
31
|
+
|
|
32
|
+
if (itemInGroup && itemInTab) {
|
|
33
|
+
var _item$name, _item$subtitle;
|
|
34
|
+
|
|
35
|
+
var searchQueryInLowerCase = searchQuery.toLowerCase();
|
|
36
|
+
var isMatchingName = (_item$name = item.name) == null ? void 0 : _item$name.toLowerCase().includes(searchQueryInLowerCase);
|
|
37
|
+
var isMatchingSubtitle = (_item$subtitle = item.subtitle) == null ? void 0 : _item$subtitle.toLowerCase().includes(searchQueryInLowerCase);
|
|
38
|
+
var matching = !searchQuery || isMatchingName || isMatchingSubtitle;
|
|
39
|
+
|
|
40
|
+
if (matching) {
|
|
41
|
+
result.push(_objectSpread({
|
|
42
|
+
groupName: showGroupedResults && item.groupId ? getGroupName(item.groupId, groups) : undefined
|
|
43
|
+
}, item));
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
if (groupOrder && groupOrder.length) {
|
|
49
|
+
result.sort(function (a, b) {
|
|
50
|
+
return a.groupId !== undefined && b.groupId !== undefined ? groupOrder.indexOf(a.groupId) - groupOrder.indexOf(b.groupId) : 0;
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
return result;
|
|
55
|
+
}, [activeGroup, activeTab, groupOrder, groups, items, searchQuery, showGroupedResults]);
|
|
56
|
+
var groupedSearchResults = useMemo(function () {
|
|
57
|
+
return groupByGroupName(searchResults, showGroupedResults ? maxSearchResultsInGroup : undefined);
|
|
58
|
+
}, [groupByGroupName, searchResults, showGroupedResults, maxSearchResultsInGroup]);
|
|
59
|
+
return {
|
|
60
|
+
searchResults: groupedSearchResults,
|
|
61
|
+
getActiveTabGroup: getActiveTabGroup,
|
|
62
|
+
getGroupName: getGroupName
|
|
63
|
+
};
|
|
64
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-utils",
|
|
3
|
-
"version": "0.29.
|
|
3
|
+
"version": "0.29.2",
|
|
4
4
|
"description": "Utils UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"react": ">=16.9.0 <= 17.0.2",
|
|
41
41
|
"styled-components": "5.0.1"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "6f3231e4a9e0720ffee61b748488cecd590da6e6"
|
|
44
44
|
}
|