@synerise/ds-icon-picker 1.6.26 → 1.7.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+### Features
+
+- **icon-picker:** pass icon metadata to onSelect ([5803275](https://github.com/Synerise/synerise-design/commit/5803275384fde95dc03bafd64a8596fab0d69ed7))
+
 ## [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)
 
 **Note:** Version bump only for package @synerise/ds-icon-picker

package/dist/IconPicker.js

@@ -52,9 +52,9 @@ const IconPicker = ({
     setOpen(newState);
     setFocus(newState);
   };
-  const handleSelect = (value) => {
+  const handleSelect = (value, metadata) => {
     toggleOpen(false);
-    onSelect(value);
+    onSelect(value, metadata);
   };
   return /* @__PURE__ */ jsx(Dropdown, { open: isOpen, onOpenChange: toggleOpen, trigger, placement: "bottomRight", size: "auto", asChild: false, popoverProps: {
     testId: "icon-picker"

package/dist/IconPicker.types.d.ts

@@ -1,10 +1,17 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
 import { PopoverTriggerType } from '@synerise/ds-popover';
+export type IconMetadata = {
+    name?: string;
+    keywords?: string;
+    category?: ReactNode;
+    prefix?: IconPrefix;
+};
 export type FilterItem<ValueType extends FAValue | ReactNode> = {
     keywords?: string;
     value: ValueType;
     item: ReactNode;
+    metadata?: IconMetadata;
 };
 export type FilterElement<ValueType extends FAValue | ReactNode = ReactNode> = Category & {
     items: FilterItem<ValueType>[];
@@ -14,6 +21,7 @@ export type DataSource = Category & {
         item: ReactNode;
         value?: ReactNode;
         keywords?: string;
+        name?: string;
     }[];
 };
 export type Category = {
@@ -21,7 +29,7 @@ export type Category = {
 };
 export type FAValue = [IconPrefix, IconName];
 export type ValueTypeForSource<Source extends SourceType> = Source extends FASource ? FAValue : ReactNode;
-export type SelectItemHandler<Source extends SourceType> = (prop: ValueTypeForSource<Source>) => void;
+export type SelectItemHandler<Source extends SourceType> = (value: ValueTypeForSource<Source>, metadata: IconMetadata) => void;
 export type GroupedFilterElement<Source extends SourceType> = Category[] | FilterItem<ValueTypeForSource<Source>>[];
 export type FASource = 'font-awesome';
 export type DSSource = 'design-system';

package/dist/components/ListItem/ListItem.js

@@ -9,7 +9,7 @@ const ListItem = ({
   itemsPerRow
 }) => {
   const selectIcon = () => {
-    onSelect(element.value);
+    onSelect(element.value, element.metadata ?? {});
   };
   return /* @__PURE__ */ jsx(ListItem$1, { itemsPerRow, children: typeof element.item !== "string" && // eslint-disable-next-line @typescript-eslint/no-explicit-any
   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 }) }) }) }) });

package/dist/hooks/useIconSourceLoader.js

@@ -17,37 +17,36 @@ const useIconSourceLoader = (data) => {
           icon,
           FontAwesomeIcon
         } = await loadFontAwesome();
-        setItems([{
-          category: "Solid",
-          items: Object.values(fas).map((iconData) => ({
-            keywords: iconData.iconName,
-            item: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: icon(iconData) }, iconData.iconName),
-            value: [iconData.prefix, iconData.iconName]
-          }))
-        }, {
-          category: "Brands",
-          items: Object.values(fab).map((iconData) => ({
+        const buildFAItems = (category, iconSet) => ({
+          category,
+          items: Object.values(iconSet).map((iconData) => ({
             keywords: iconData.iconName,
             item: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: icon(iconData) }, iconData.iconName),
-            value: [iconData.prefix, iconData.iconName]
+            value: [iconData.prefix, iconData.iconName],
+            metadata: {
+              name: iconData.iconName,
+              keywords: iconData.iconName,
+              category,
+              prefix: iconData.prefix
+            }
           }))
-        }, {
-          category: "Regular",
-          items: Object.values(far).map((iconData) => ({
-            keywords: iconData.iconName,
-            item: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: icon(iconData) }, iconData.iconName),
-            value: [iconData.prefix, iconData.iconName]
-          }))
-        }]);
+        });
+        setItems([buildFAItems("Solid", fas), buildFAItems("Brands", fab), buildFAItems("Regular", far)]);
       };
       if (isDSSourceType(data)) {
+        const category = "DS Icons";
         const iconItems = Object.entries(medium).map(([name, Component]) => ({
           keywords: name,
           item: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Component, {}) }),
-          value: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Component, {}) })
+          value: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Component, {}) }),
+          metadata: {
+            name,
+            keywords: name,
+            category
+          }
         }));
         setItems([{
-          category: "DS Icons",
+          category,
           items: iconItems
         }]);
         return;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './IconPicker';
-export type { FilterElement, FilterItem, DataSource, IconPickerProps, SourceType, FASource, FAValue, DSSource, } from './IconPicker.types';
+export type { FilterElement, FilterItem, DataSource, IconMetadata, IconPickerProps, SourceType, FASource, FAValue, DSSource, } from './IconPicker.types';

package/dist/utils/prepareItems.js

@@ -4,7 +4,12 @@ const prepareItems = (data) => {
     items: group.items.map((item) => {
       return {
         ...item,
-        value: item.value === void 0 ? item.item : item.value
+        value: item.value === void 0 ? item.item : item.value,
+        metadata: {
+          name: item.name,
+          keywords: item.keywords,
+          category: group.category
+        }
       };
     })
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-icon-picker",
-  "version": "1.6.26",
+  "version": "1.7.0",
   "description": "IconPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -38,13 +38,13 @@
   "sideEffects": false,
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.27",
-    "@synerise/ds-button-group": "^1.1.52",
-    "@synerise/ds-dropdown": "^1.3.11",
-    "@synerise/ds-icon": "^1.17.3",
+    "@synerise/ds-button": "^1.5.28",
+    "@synerise/ds-button-group": "^1.1.53",
+    "@synerise/ds-dropdown": "^1.3.12",
+    "@synerise/ds-icon": "^1.18.0",
     "@synerise/ds-popover": "^1.5.5",
-    "@synerise/ds-scrollbar": "^1.3.4",
-    "@synerise/ds-tooltip": "^1.4.18",
+    "@synerise/ds-scrollbar": "^1.3.5",
+    "@synerise/ds-tooltip": "^1.4.19",
     "@synerise/ds-utils": "^1.8.1",
     "memoize-one": "^5.1.1",
     "react-window": "^1.8.11"
@@ -61,5 +61,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "0418fb6d3b67c35d3c8bacfe53ce01528c6b6153"
+  "gitHead": "1132c21afce924c3e3b8e75e2ebd5e7b5db69bd2"
 }