@synerise/ds-icon-picker 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon-picker@1.3.0...@synerise/ds-icon-picker@1.3.1) (2025-05-26)
+
+**Note:** Version bump only for package @synerise/ds-icon-picker
+
+
+
+
+
 # [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon-picker@1.2.2...@synerise/ds-icon-picker@1.3.0) (2025-05-19)
 
 

package/README.md

@@ -48,5 +48,9 @@ import IconPicker from '@synerise/ds-icon-picker'
 | onSelect    | Action on icon select                               | OnSelectType                                    | -       |
 | placeholder | Input placeholder                                   | string                                          | -       |
 | trigger     | Trigger type                                        | `['click', 'hover', 'contextMenu']`             | []      |
+| onClear     | Action on icon delete                               | OnSelectType                                    | -       |
+| selectedIcon| Icon Node                                           | ReactElement                                    | -       |
+| clearTooltip| tooltip text                                        | string                                          | -       |
+
 
 OnSelectType depends on the icon list source. For `design-system` or plain items provided as `DataSource[]` it is `(item: ReactNode) => void;`. For `font-awesome` it is `(item: [IconPrefix, IconName]) => void;`. See FontAwesome docs on how to use the IconPrefix and IconName to display an icon.

package/dist/IconPicker.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IconPickerProps, SourceType } from './IconPicker.types';
-declare const IconPicker: <IconSource extends SourceType>({ button, data, onSelect, trigger, placeholder, noResultMsg, }: IconPickerProps<IconSource>) => React.JSX.Element;
+declare const IconPicker: <IconSource extends SourceType>({ button, data, onSelect, trigger, placeholder, noResultMsg, onClear, selectedIcon, clearTooltip, }: IconPickerProps<IconSource>) => React.JSX.Element;
 export default IconPicker;

package/dist/IconPicker.js

@@ -2,6 +2,10 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useEffect, useRef, useState } from 'react';
 import Dropdown from '@synerise/ds-dropdown';
 import { useOnClickOutside } from '@synerise/ds-utils';
+import Button from '@synerise/ds-button';
+import Icon, { AddM, Close3S } from '@synerise/ds-icon';
+import ButtonGroup from '@synerise/ds-button-group';
+import Tooltip from '@synerise/ds-tooltip';
 import * as S from './IconPicker.styles';
 import Overlay from './components/Overlay/Overlay';
 import { useIconSourceLoader } from './hooks/useIconSourceLoader';
@@ -12,7 +16,10 @@ var IconPicker = function IconPicker(_ref) {
     onSelect = _ref.onSelect,
     trigger = _ref.trigger,
     placeholder = _ref.placeholder,
-    noResultMsg = _ref.noResultMsg;
+    noResultMsg = _ref.noResultMsg,
+    onClear = _ref.onClear,
+    selectedIcon = _ref.selectedIcon,
+    clearTooltip = _ref.clearTooltip;
   var items = useIconSourceLoader(data);
   var _useState = useState(items),
     filteredItems = _useState[0],
@@ -76,6 +83,27 @@ var IconPicker = function IconPicker(_ref) {
       focus: focus,
       noResultMsg: noResultMsg
     }))
-  }, button);
+  }, button || (!selectedIcon ? /*#__PURE__*/React.createElement(Button, {
+    type: "secondary",
+    mode: "icon-label"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(AddM, null)
+  }), "Choose icon") : /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      setOpen(!isOpen);
+    },
+    mode: "single-icon",
+    type: "secondary"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: selectedIcon
+  })), /*#__PURE__*/React.createElement(Button, {
+    mode: "single-icon",
+    type: "secondary",
+    onClick: onClear
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: clearTooltip
+  }, /*#__PURE__*/React.createElement(S.ClearIcon, {
+    component: /*#__PURE__*/React.createElement(Close3S, null)
+  }))))));
 };
 export default IconPicker;

package/dist/IconPicker.styles.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import { FixedSizeList } from 'react-window';
 export declare const List: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ClearIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
 export declare const ListItem: import("styled-components").StyledComponent<"div", any, {
     itemsPerRow: number;
 }, never>;
@@ -14,6 +16,6 @@ export declare const Title: import("styled-components").StyledComponent<"div", a
 export declare const FontIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IconTrigger: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NoResults: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Icon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ListRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NoResultIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/IconPicker.styles.js

@@ -1,28 +1,37 @@
 import { FixedSizeList } from 'react-window';
 import styled from 'styled-components';
+import Icon from '@synerise/ds-icon';
 export var List = styled.div.withConfig({
   displayName: "IconPickerstyles__List",
   componentId: "sc-iun0xm-0"
 })(["display:flex;flex-wrap:wrap;"]);
+export var ClearIcon = styled(Icon).withConfig({
+  displayName: "IconPickerstyles__ClearIcon",
+  componentId: "sc-iun0xm-1"
+})(["&&&&&,&&&&&:hover{svg{color:", ";fill:", ";}}"], function (props) {
+  return props.theme.palette['red-600'];
+}, function (props) {
+  return props.theme.palette['red-600'];
+});
 export var ListItem = styled.div.withConfig({
   displayName: "IconPickerstyles__ListItem",
-  componentId: "sc-iun0xm-1"
+  componentId: "sc-iun0xm-2"
 })(["display:flex;width:", "%;align-items:center;justify-content:center;button{transition-duration:0s;}"], function (props) {
   return 100 / props.itemsPerRow;
 });
 export var OverlayWrapper = styled.div.withConfig({
   displayName: "IconPickerstyles__OverlayWrapper",
-  componentId: "sc-iun0xm-2"
+  componentId: "sc-iun0xm-3"
 })(["padding:6px;"]);
 export var VirtualList = styled(FixedSizeList).withConfig({
   displayName: "IconPickerstyles__VirtualList",
-  componentId: "sc-iun0xm-3"
+  componentId: "sc-iun0xm-4"
 })(["max-height:", "px;height:auto !important;overflow-x:unset !important;overflow-y:unset !important;"], function (props) {
   return props.listHeight;
 });
 export var Overlay = styled.span.withConfig({
   displayName: "IconPickerstyles__Overlay",
-  componentId: "sc-iun0xm-4"
+  componentId: "sc-iun0xm-5"
 })(["width:250px;background-color:", ";position:relative;display:block;border-radius:3px;", ":not(:last-child){&::after{content:'';display:flex;width:calc(100% - 6px);height:1px;background-image:linear-gradient( to right,", " 40%,", " 100%,transparent 0% );background-position:0 bottom;background-size:4px 1px;background-repeat:repeat-x;margin:4px auto 0;}}", ":first-child{padding-top:16px;}"], function (props) {
   return props.theme.palette.white;
 }, OverlayWrapper, function (_ref) {
@@ -34,7 +43,7 @@ export var Overlay = styled.span.withConfig({
 }, OverlayWrapper);
 export var Title = styled.div.withConfig({
   displayName: "IconPickerstyles__Title",
-  componentId: "sc-iun0xm-5"
+  componentId: "sc-iun0xm-6"
 })(["font-size:10px;line-height:1.6;font-weight:500;text-transform:uppercase;color:", ";padding:0 12px;flex-basis:100%;height:", ";line-height:", ";"], function (props) {
   return props.theme.palette['grey-500'];
 }, function (props) {
@@ -44,20 +53,16 @@ export var Title = styled.div.withConfig({
 });
 export var FontIcon = styled.div.withConfig({
   displayName: "IconPickerstyles__FontIcon",
-  componentId: "sc-iun0xm-6"
+  componentId: "sc-iun0xm-7"
 })(["font-family:'apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol';font-size:18px;line-height:35px;"]);
 export var IconTrigger = styled.div.withConfig({
   displayName: "IconPickerstyles__IconTrigger",
-  componentId: "sc-iun0xm-7"
+  componentId: "sc-iun0xm-8"
 })(["display:inline-block;cursor:pointer;&&&{.icon-wrapper{display:flex;pointer-events:none;svg{fill:currentColor;}}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:144dpi){letter-spacing:-0.2em;}"]);
 export var NoResults = styled.div.withConfig({
   displayName: "IconPickerstyles__NoResults",
-  componentId: "sc-iun0xm-8"
-})(["min-height:206px;display:flex;justify-content:center;"]);
-export var Icon = styled.div.withConfig({
-  displayName: "IconPickerstyles__Icon",
   componentId: "sc-iun0xm-9"
-})(["width:40px;height:40px;background:rgba(148,158,166,0.05);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;"]);
+})(["min-height:206px;display:flex;justify-content:center;"]);
 export var Content = styled.div.withConfig({
   displayName: "IconPickerstyles__Content",
   componentId: "sc-iun0xm-10"
@@ -65,4 +70,8 @@ export var Content = styled.div.withConfig({
 export var ListRow = styled.div.withConfig({
   displayName: "IconPickerstyles__ListRow",
   componentId: "sc-iun0xm-11"
-})(["display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;box-sizing:border-box;width:100%;height:100%;max-width:100%;"]);
+})(["display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;box-sizing:border-box;width:100%;height:100%;max-width:100%;"]);
+export var NoResultIcon = styled.div.withConfig({
+  displayName: "IconPickerstyles__NoResultIcon",
+  componentId: "sc-iun0xm-12"
+})(["width:40px;height:40px;background:rgba(148,158,166,0.05);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;"]);

package/dist/IconPicker.types.d.ts

@@ -32,6 +32,9 @@ export type IconPickerProps<Source extends SourceType> = {
     trigger: ('click' | 'hover' | 'contextMenu')[];
     placeholder: string;
     noResultMsg?: ReactNode;
+    selectedIcon?: ReactNode;
+    onClear?: () => void;
+    clearTooltip?: ReactNode;
 };
 export type ListItemData<Source extends SourceType> = {
     elementSize: number;

package/dist/components/List/List.js

@@ -31,7 +31,7 @@ var List = function List(_ref) {
     "data-testid": "icon-list",
     maxHeight: 330,
     onScroll: handleScroll
-  }, !data.length ? /*#__PURE__*/React.createElement(S.OverlayWrapper, null, /*#__PURE__*/React.createElement(S.NoResults, null, /*#__PURE__*/React.createElement(S.Content, null, /*#__PURE__*/React.createElement(S.Icon, null, /*#__PURE__*/React.createElement(Icon, {
+  }, !data.length ? /*#__PURE__*/React.createElement(S.OverlayWrapper, null, /*#__PURE__*/React.createElement(S.NoResults, null, /*#__PURE__*/React.createElement(S.Content, null, /*#__PURE__*/React.createElement(S.NoResultIcon, null, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(SearchNoResultsM, null),
     color: theme.palette['grey-600']
   })), /*#__PURE__*/React.createElement("p", null, noResultMsg)))) : /*#__PURE__*/React.createElement(S.VirtualList, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-icon-picker",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "IconPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -31,11 +31,13 @@
   "sideEffects": false,
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.3.0",
-    "@synerise/ds-dropdown": "^1.0.8",
-    "@synerise/ds-icon": "^1.5.0",
-    "@synerise/ds-scrollbar": "^1.0.8",
-    "@synerise/ds-utils": "^1.1.0",
+    "@synerise/ds-button": "^1.3.1",
+    "@synerise/ds-button-group": "^1.1.1",
+    "@synerise/ds-dropdown": "^1.0.9",
+    "@synerise/ds-icon": "^1.5.1",
+    "@synerise/ds-scrollbar": "^1.0.9",
+    "@synerise/ds-tooltip": "^1.1.8",
+    "@synerise/ds-utils": "^1.1.1",
     "memoize-one": "^5.1.1",
     "react-window": "^1.8.11"
   },
@@ -50,5 +52,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8aa16b27c86c97e3ac774d92561ab0a03176c439"
+  "gitHead": "9e9cc54e3690b4d51323f91c81b3b79305984da6"
 }