@synerise/ds-icon-picker 1.6.26 → 1.7.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.
- package/CHANGELOG.md +10 -0
- package/dist/IconPicker.js +2 -2
- package/dist/IconPicker.types.d.ts +9 -1
- package/dist/components/ListItem/ListItem.js +1 -1
- package/dist/hooks/useIconSourceLoader.js +20 -21
- package/dist/index.d.ts +1 -1
- package/dist/utils/prepareItems.js +6 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
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
|
+
## [1.7.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon-picker@1.7.0...@synerise/ds-icon-picker@1.7.1) (2026-05-15)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-icon-picker
|
|
9
|
+
|
|
10
|
+
# [1.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon-picker@1.6.26...@synerise/ds-icon-picker@1.7.0) (2026-05-13)
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
- **icon-picker:** pass icon metadata to onSelect ([5803275](https://github.com/Synerise/synerise-design/commit/5803275384fde95dc03bafd64a8596fab0d69ed7))
|
|
15
|
+
|
|
6
16
|
## [1.6.26](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon-picker@1.6.25...@synerise/ds-icon-picker@1.6.26) (2026-05-11)
|
|
7
17
|
|
|
8
18
|
**Note:** Version bump only for package @synerise/ds-icon-picker
|
package/dist/IconPicker.js
CHANGED
|
@@ -52,9 +52,9 @@ const IconPicker = ({
|
|
|
52
52
|
setOpen(newState);
|
|
53
53
|
setFocus(newState);
|
|
54
54
|
};
|
|
55
|
-
const handleSelect = (value) => {
|
|
55
|
+
const handleSelect = (value, metadata) => {
|
|
56
56
|
toggleOpen(false);
|
|
57
|
-
onSelect(value);
|
|
57
|
+
onSelect(value, metadata);
|
|
58
58
|
};
|
|
59
59
|
return /* @__PURE__ */ jsx(Dropdown, { open: isOpen, onOpenChange: toggleOpen, trigger, placement: "bottomRight", size: "auto", asChild: false, popoverProps: {
|
|
60
60
|
testId: "icon-picker"
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import { CSSProperties, ReactElement, ReactNode } from 'react';
|
|
2
2
|
import { IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
|
|
3
3
|
import { PopoverTriggerType } from '@synerise/ds-popover';
|
|
4
|
+
export type IconMetadata = {
|
|
5
|
+
name?: string;
|
|
6
|
+
keywords?: string;
|
|
7
|
+
category?: ReactNode;
|
|
8
|
+
prefix?: IconPrefix;
|
|
9
|
+
};
|
|
4
10
|
export type FilterItem<ValueType extends FAValue | ReactNode> = {
|
|
5
11
|
keywords?: string;
|
|
6
12
|
value: ValueType;
|
|
7
13
|
item: ReactNode;
|
|
14
|
+
metadata?: IconMetadata;
|
|
8
15
|
};
|
|
9
16
|
export type FilterElement<ValueType extends FAValue | ReactNode = ReactNode> = Category & {
|
|
10
17
|
items: FilterItem<ValueType>[];
|
|
@@ -14,6 +21,7 @@ export type DataSource = Category & {
|
|
|
14
21
|
item: ReactNode;
|
|
15
22
|
value?: ReactNode;
|
|
16
23
|
keywords?: string;
|
|
24
|
+
name?: string;
|
|
17
25
|
}[];
|
|
18
26
|
};
|
|
19
27
|
export type Category = {
|
|
@@ -21,7 +29,7 @@ export type Category = {
|
|
|
21
29
|
};
|
|
22
30
|
export type FAValue = [IconPrefix, IconName];
|
|
23
31
|
export type ValueTypeForSource<Source extends SourceType> = Source extends FASource ? FAValue : ReactNode;
|
|
24
|
-
export type SelectItemHandler<Source extends SourceType> = (
|
|
32
|
+
export type SelectItemHandler<Source extends SourceType> = (value: ValueTypeForSource<Source>, metadata: IconMetadata) => void;
|
|
25
33
|
export type GroupedFilterElement<Source extends SourceType> = Category[] | FilterItem<ValueTypeForSource<Source>>[];
|
|
26
34
|
export type FASource = 'font-awesome';
|
|
27
35
|
export type DSSource = 'design-system';
|
|
@@ -9,7 +9,7 @@ const ListItem = ({
|
|
|
9
9
|
itemsPerRow
|
|
10
10
|
}) => {
|
|
11
11
|
const selectIcon = () => {
|
|
12
|
-
onSelect(element.value);
|
|
12
|
+
onSelect(element.value, element.metadata ?? {});
|
|
13
13
|
};
|
|
14
14
|
return /* @__PURE__ */ jsx(ListItem$1, { itemsPerRow, children: typeof element.item !== "string" && // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
15
15
|
element.item.type.name === "Avatar" ? /* @__PURE__ */ jsx(IconTrigger, { onMouseUp: selectIcon, "data-testid": `icon-${index}`, children: element.item }) : /* @__PURE__ */ jsx(Tooltip, { title: element.keywords, children: /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", onClick: selectIcon, children: /* @__PURE__ */ jsx(IconTrigger, { "data-testid": `icon-${index}`, children: /* @__PURE__ */ jsx("div", { className: "icon-wrapper", children: typeof element.item === "string" ? /* @__PURE__ */ jsx(FontIcon, { children: element.item }) : element.item }) }) }) }) });
|
|
@@ -17,37 +17,36 @@ const useIconSourceLoader = (data) => {
|
|
|
17
17
|
icon,
|
|
18
18
|
FontAwesomeIcon
|
|
19
19
|
} = await loadFontAwesome();
|
|
20
|
-
|
|
21
|
-
category
|
|
22
|
-
items: Object.values(
|
|
23
|
-
keywords: iconData.iconName,
|
|
24
|
-
item: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: icon(iconData) }, iconData.iconName),
|
|
25
|
-
value: [iconData.prefix, iconData.iconName]
|
|
26
|
-
}))
|
|
27
|
-
}, {
|
|
28
|
-
category: "Brands",
|
|
29
|
-
items: Object.values(fab).map((iconData) => ({
|
|
20
|
+
const buildFAItems = (category, iconSet) => ({
|
|
21
|
+
category,
|
|
22
|
+
items: Object.values(iconSet).map((iconData) => ({
|
|
30
23
|
keywords: iconData.iconName,
|
|
31
24
|
item: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: icon(iconData) }, iconData.iconName),
|
|
32
|
-
value: [iconData.prefix, iconData.iconName]
|
|
25
|
+
value: [iconData.prefix, iconData.iconName],
|
|
26
|
+
metadata: {
|
|
27
|
+
name: iconData.iconName,
|
|
28
|
+
keywords: iconData.iconName,
|
|
29
|
+
category,
|
|
30
|
+
prefix: iconData.prefix
|
|
31
|
+
}
|
|
33
32
|
}))
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
items: Object.values(far).map((iconData) => ({
|
|
37
|
-
keywords: iconData.iconName,
|
|
38
|
-
item: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: icon(iconData) }, iconData.iconName),
|
|
39
|
-
value: [iconData.prefix, iconData.iconName]
|
|
40
|
-
}))
|
|
41
|
-
}]);
|
|
33
|
+
});
|
|
34
|
+
setItems([buildFAItems("Solid", fas), buildFAItems("Brands", fab), buildFAItems("Regular", far)]);
|
|
42
35
|
};
|
|
43
36
|
if (isDSSourceType(data)) {
|
|
37
|
+
const category = "DS Icons";
|
|
44
38
|
const iconItems = Object.entries(medium).map(([name, Component]) => ({
|
|
45
39
|
keywords: name,
|
|
46
40
|
item: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Component, {}) }),
|
|
47
|
-
value: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Component, {}) })
|
|
41
|
+
value: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Component, {}) }),
|
|
42
|
+
metadata: {
|
|
43
|
+
name,
|
|
44
|
+
keywords: name,
|
|
45
|
+
category
|
|
46
|
+
}
|
|
48
47
|
}));
|
|
49
48
|
setItems([{
|
|
50
|
-
category
|
|
49
|
+
category,
|
|
51
50
|
items: iconItems
|
|
52
51
|
}]);
|
|
53
52
|
return;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default } from './IconPicker';
|
|
2
|
-
export type { FilterElement, FilterItem, DataSource, IconPickerProps, SourceType, FASource, FAValue, DSSource, } from './IconPicker.types';
|
|
2
|
+
export type { FilterElement, FilterItem, DataSource, IconMetadata, IconPickerProps, SourceType, FASource, FAValue, DSSource, } from './IconPicker.types';
|
|
@@ -4,7 +4,12 @@ const prepareItems = (data) => {
|
|
|
4
4
|
items: group.items.map((item) => {
|
|
5
5
|
return {
|
|
6
6
|
...item,
|
|
7
|
-
value: item.value === void 0 ? item.item : item.value
|
|
7
|
+
value: item.value === void 0 ? item.item : item.value,
|
|
8
|
+
metadata: {
|
|
9
|
+
name: item.name,
|
|
10
|
+
keywords: item.keywords,
|
|
11
|
+
category: group.category
|
|
12
|
+
}
|
|
8
13
|
};
|
|
9
14
|
})
|
|
10
15
|
}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-icon-picker",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.1",
|
|
4
4
|
"description": "IconPicker UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -38,13 +38,13 @@
|
|
|
38
38
|
"sideEffects": false,
|
|
39
39
|
"types": "dist/index.d.ts",
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@synerise/ds-button": "^1.5.
|
|
42
|
-
"@synerise/ds-button-group": "^1.1.
|
|
43
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
44
|
-
"@synerise/ds-icon": "^1.
|
|
41
|
+
"@synerise/ds-button": "^1.5.29",
|
|
42
|
+
"@synerise/ds-button-group": "^1.1.54",
|
|
43
|
+
"@synerise/ds-dropdown": "^1.3.12",
|
|
44
|
+
"@synerise/ds-icon": "^1.18.0",
|
|
45
45
|
"@synerise/ds-popover": "^1.5.5",
|
|
46
|
-
"@synerise/ds-scrollbar": "^1.3.
|
|
47
|
-
"@synerise/ds-tooltip": "^1.4.
|
|
46
|
+
"@synerise/ds-scrollbar": "^1.3.5",
|
|
47
|
+
"@synerise/ds-tooltip": "^1.4.19",
|
|
48
48
|
"@synerise/ds-utils": "^1.8.1",
|
|
49
49
|
"memoize-one": "^5.1.1",
|
|
50
50
|
"react-window": "^1.8.11"
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"styled-components": "^5.3.3",
|
|
62
62
|
"vitest": "4"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "ef14a62702ad420add6ad1c56da88df1f70a1bb8"
|
|
65
65
|
}
|