@synerise/ds-icon-picker 1.6.14 → 1.6.16

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.6.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon-picker@1.6.15...@synerise/ds-icon-picker@1.6.16) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-icon-picker
+
+## [1.6.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon-picker@1.6.14...@synerise/ds-icon-picker@1.6.15) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-icon-picker
+
 ## [1.6.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon-picker@1.6.13...@synerise/ds-icon-picker@1.6.14) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-icon-picker

package/README.md

@@ -47,9 +47,9 @@ import IconPicker from '@synerise/ds-icon-picker'
 | noResultMsg  | Node displayed when no items matches searched query | ReactNode                                       | -       |
 | onSelect     | Action on icon select                               | OnSelectType                                    | -       |
 | placeholder  | Input placeholder                                   | string                                          | -       |
-| trigger      | Trigger type                                        | `['click', 'hover']`             | []      |
-| onClear      | Action on icon delete                               | OnSelectType                                    | -       |
-| selectedIcon | Icon Node                                           | ReactElement                                    | -       |
-| clearTooltip | tooltip text                                        | string                                          | -       |
+| trigger      | Trigger type, e.g. `['click']`                      | PopoverTriggerType[]                            | -       |
+| onClear      | Action on icon delete                               | () => void                                      | -       |
+| selectedIcon | Icon Node                                           | ReactNode                                       | -       |
+| clearTooltip | tooltip text                                        | ReactNode                                       | -       |
 
 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.const.js

@@ -1,2 +1,6 @@
-export var ITEMS_PER_ROW = 6;
-export var ELEMENT_HEIGHT = 32;
+const ITEMS_PER_ROW = 6;
+const ELEMENT_HEIGHT = 32;
+export {
+  ELEMENT_HEIGHT,
+  ITEMS_PER_ROW
+};

package/dist/IconPicker.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type IconPickerProps, type SourceType } from './IconPicker.types';
+import { default as React } from 'react';
+import { IconPickerProps, SourceType } from './IconPicker.types';
 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

@@ -1,114 +1,73 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useEffect, useRef, useState } from 'react';
-import Button from '@synerise/ds-button';
-import ButtonGroup from '@synerise/ds-button-group';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { AddM, Close3S } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import { useOnClickOutside } from '@synerise/ds-utils';
-import * as S from './IconPicker.styles';
-import Overlay from './components/Overlay/Overlay';
-import { useIconSourceLoader } from './hooks/useIconSourceLoader';
-import { matchesSearchQuery } from './utils/matchesSearchQuery';
-var IconPicker = function IconPicker(_ref) {
-  var button = _ref.button,
-    data = _ref.data,
-    onSelect = _ref.onSelect,
-    trigger = _ref.trigger,
-    placeholder = _ref.placeholder,
-    noResultMsg = _ref.noResultMsg,
-    onClear = _ref.onClear,
-    selectedIcon = _ref.selectedIcon,
-    clearTooltip = _ref.clearTooltip;
-  var items = useIconSourceLoader(data);
-  var _useState = useState(items),
-    filteredItems = _useState[0],
-    setFilteredItems = _useState[1];
-  var _useState2 = useState(''),
-    searchQuery = _useState2[0],
-    setSearchQuery = _useState2[1];
-  var _useState3 = useState(false),
-    isOpen = _useState3[0],
-    setOpen = _useState3[1];
-  var _useState4 = useState(false),
-    focus = _useState4[0],
-    setFocus = _useState4[1];
-  var ref = useRef(null);
-  useEffect(function () {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import Button from "@synerise/ds-button";
+import ButtonGroup from "@synerise/ds-button-group";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { AddM, Close3S } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { useOnClickOutside } from "@synerise/ds-utils";
+import { ClearIcon, Overlay } from "./IconPicker.styles.js";
+import Overlay$1 from "./components/Overlay/Overlay.js";
+import { useIconSourceLoader } from "./hooks/useIconSourceLoader.js";
+import { matchesSearchQuery } from "./utils/matchesSearchQuery.js";
+const IconPicker = ({
+  button,
+  data,
+  onSelect,
+  trigger,
+  placeholder,
+  noResultMsg,
+  onClear,
+  selectedIcon,
+  clearTooltip
+}) => {
+  const items = useIconSourceLoader(data);
+  const [filteredItems, setFilteredItems] = useState(items);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isOpen, setOpen] = useState(false);
+  const [focus, setFocus] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
     if (searchQuery) {
-      var groups = items.map(function (group) {
-        var matching = group.items.filter(function (icon) {
-          return icon.keywords && matchesSearchQuery(icon.keywords, searchQuery);
-        });
-        return _extends({}, group, {
+      const groups = items.map((group) => {
+        const matching = group.items.filter((icon) => icon.keywords && matchesSearchQuery(icon.keywords, searchQuery));
+        return {
+          ...group,
           items: matching
-        });
-      }).filter(function (group) {
-        return group.items.length;
-      });
+        };
+      }).filter((group) => group.items.length);
       setFilteredItems(groups);
       return;
     }
     setFilteredItems(items);
   }, [searchQuery, items]);
-  useOnClickOutside(ref, function () {
+  useOnClickOutside(ref, () => {
     setOpen(false);
-    setSearchQuery('');
+    setSearchQuery("");
   });
-  var onClearInput = function onClearInput() {
-    setSearchQuery('');
+  const onClearInput = () => {
+    setSearchQuery("");
   };
-  var toggleOpen = function toggleOpen(newState) {
+  const toggleOpen = (newState) => {
     setOpen(newState);
     setFocus(newState);
   };
-  var handleSelect = function handleSelect(value) {
+  const handleSelect = (value) => {
     toggleOpen(false);
     onSelect(value);
   };
-  return /*#__PURE__*/React.createElement(Dropdown, {
-    open: isOpen,
-    onOpenChange: toggleOpen,
-    trigger: trigger,
-    placement: "bottomRight",
-    size: "auto",
-    asChild: false,
-    popoverProps: {
-      testId: 'icon-picker'
-    },
-    overlay: /*#__PURE__*/React.createElement(S.Overlay, {
-      ref: ref
-    }, /*#__PURE__*/React.createElement(Overlay, {
-      value: searchQuery,
-      onSearchChange: setSearchQuery,
-      onClearInput: onClearInput,
-      placeholder: placeholder,
-      data: filteredItems,
-      onSelect: handleSelect,
-      focus: focus,
-      noResultMsg: noResultMsg
-    }))
-  }, 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() {
+  return /* @__PURE__ */ jsx(Dropdown, { open: isOpen, onOpenChange: toggleOpen, trigger, placement: "bottomRight", size: "auto", asChild: false, popoverProps: {
+    testId: "icon-picker"
+  }, overlay: /* @__PURE__ */ jsx(Overlay, { ref, children: /* @__PURE__ */ jsx(Overlay$1, { value: searchQuery, onSearchChange: setSearchQuery, onClearInput, placeholder, data: filteredItems, onSelect: handleSelect, focus, noResultMsg }) }), children: button || (!selectedIcon ? /* @__PURE__ */ jsxs(Button, { type: "secondary", mode: "icon-label", children: [
+    /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AddM, {}) }),
+    "Choose icon"
+  ] }) : /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx(Button, { 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)
-  }))))));
+    }, mode: "single-icon", type: "secondary", children: /* @__PURE__ */ jsx(Icon, { component: selectedIcon }) }),
+    /* @__PURE__ */ jsx(Button, { mode: "single-icon", type: "secondary", onClick: onClear, children: /* @__PURE__ */ jsx(Tooltip, { title: clearTooltip, children: /* @__PURE__ */ jsx(ClearIcon, { component: /* @__PURE__ */ jsx(Close3S, {}) }) }) })
+  ] })) });
+};
+export {
+  IconPicker as default
 };
-export default IconPicker;

package/dist/IconPicker.styles.d.ts

@@ -1,20 +1,20 @@
-import { FixedSizeList } from 'react-window';
-export declare const List: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ClearIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const ListItem: import("styled-components").StyledComponent<"div", any, {
+import { FixedSizeList } from '../../../../config/vitest/__mocks__/reactWindowMock.js';
+export declare const List: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ClearIcon: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<import('@synerise/ds-icon').BaseIconProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const ListItem: import('styled-components').StyledComponent<"div", any, {
     itemsPerRow: number;
 }, never>;
-export declare const OverlayWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VirtualList: import("styled-components").StyledComponent<typeof FixedSizeList, any, {
+export declare const OverlayWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const VirtualList: import('styled-components').StyledComponent<typeof FixedSizeList, any, {
     listHeight: number;
 }, never>;
-export declare const Overlay: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Title: import("styled-components").StyledComponent<"div", any, {
+export declare const Overlay: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Title: import('styled-components').StyledComponent<"div", any, {
     elementSize: string;
 }, never>;
-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 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>;
+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 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,77 +1,74 @@
-import { FixedSizeList } from 'react-window';
-import styled from 'styled-components';
-import Icon from '@synerise/ds-icon';
-export var List = styled.div.withConfig({
+import { FixedSizeList } from "react-window";
+import styled from "styled-components";
+import Icon from "@synerise/ds-icon";
+const List = /* @__PURE__ */ styled.div.withConfig({
   displayName: "IconPickerstyles__List",
   componentId: "sc-iun0xm-0"
 })(["display:flex;flex-wrap:wrap;"]);
-export var ClearIcon = styled(Icon).withConfig({
+const ClearIcon = /* @__PURE__ */ 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({
+})(["&&&&&,&&&&&:hover{svg{color:", ";fill:", ";}}"], (props) => props.theme.palette["red-600"], (props) => props.theme.palette["red-600"]);
+const ListItem = /* @__PURE__ */ styled.div.withConfig({
   displayName: "IconPickerstyles__ListItem",
   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({
+})(["display:flex;width:", "%;align-items:center;justify-content:center;button{transition-duration:0s;}"], (props) => 100 / props.itemsPerRow);
+const OverlayWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "IconPickerstyles__OverlayWrapper",
   componentId: "sc-iun0xm-3"
 })(["padding:6px;"]);
-export var VirtualList = styled(FixedSizeList).withConfig({
+const VirtualList = /* @__PURE__ */ styled(FixedSizeList).withConfig({
   displayName: "IconPickerstyles__VirtualList",
   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({
+})(["max-height:", "px;height:auto !important;overflow-x:unset !important;overflow-y:unset !important;"], (props) => props.listHeight);
+const Overlay = /* @__PURE__ */ styled.span.withConfig({
   displayName: "IconPickerstyles__Overlay",
   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) {
-  var theme = _ref.theme;
-  return theme.palette.white;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette['grey-300'];
-}, OverlayWrapper);
-export var Title = styled.div.withConfig({
+})(["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;}"], (props) => props.theme.palette.white, OverlayWrapper, ({
+  theme
+}) => theme.palette.white, ({
+  theme
+}) => theme.palette["grey-300"], OverlayWrapper);
+const Title = /* @__PURE__ */ styled.div.withConfig({
   displayName: "IconPickerstyles__Title",
   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) {
-  return props.elementSize;
-}, function (props) {
-  return props.elementSize;
-});
-export var FontIcon = styled.div.withConfig({
+})(["font-size:10px;line-height:1.6;font-weight:500;text-transform:uppercase;color:", ";padding:0 12px;flex-basis:100%;height:", ";line-height:", ";"], (props) => props.theme.palette["grey-500"], (props) => props.elementSize, (props) => props.elementSize);
+const FontIcon = /* @__PURE__ */ styled.div.withConfig({
   displayName: "IconPickerstyles__FontIcon",
   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({
+const IconTrigger = /* @__PURE__ */ styled.div.withConfig({
   displayName: "IconPickerstyles__IconTrigger",
   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({
+const NoResults = /* @__PURE__ */ styled.div.withConfig({
   displayName: "IconPickerstyles__NoResults",
   componentId: "sc-iun0xm-9"
 })(["min-height:206px;display:flex;justify-content:center;"]);
-export var Content = styled.div.withConfig({
+const Content = /* @__PURE__ */ styled.div.withConfig({
   displayName: "IconPickerstyles__Content",
   componentId: "sc-iun0xm-10"
 })(["margin-top:42px;p{margin-top:16px;font-size:14px;line-height:1.43;text-align:center;}"]);
-export var ListRow = styled.div.withConfig({
+const ListRow = /* @__PURE__ */ 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%;"]);
-export var NoResultIcon = styled.div.withConfig({
+const NoResultIcon = /* @__PURE__ */ 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;"]);
+})(["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;"]);
+export {
+  ClearIcon,
+  Content,
+  FontIcon,
+  IconTrigger,
+  List,
+  ListItem,
+  ListRow,
+  NoResultIcon,
+  NoResults,
+  Overlay,
+  OverlayWrapper,
+  Title,
+  VirtualList
+};

package/dist/IconPicker.types.d.ts

@@ -1,6 +1,6 @@
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
-import type { IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
-import { type PopoverTriggerType } from '@synerise/ds-popover';
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
+import { PopoverTriggerType } from '@synerise/ds-popover';
 export type FilterItem<ValueType extends FAValue | ReactNode> = {
     keywords?: string;
     value: ValueType;

package/dist/IconPicker.types.js

@@ -1 +1 @@
-export {};
+

package/dist/_virtual/preload-helper.js

@@ -0,0 +1,57 @@
+const scriptRel = "modulepreload";
+const assetsURL = function(dep) {
+  return "/" + dep;
+};
+const seen = {};
+const __vitePreload = function preload(baseModule, deps, importerUrl) {
+  let promise = Promise.resolve();
+  if (deps && deps.length > 0) {
+    let allSettled = function(promises$2) {
+      return Promise.all(promises$2.map((p) => Promise.resolve(p).then((value$1) => ({
+        status: "fulfilled",
+        value: value$1
+      }), (reason) => ({
+        status: "rejected",
+        reason
+      }))));
+    };
+    document.getElementsByTagName("link");
+    const cspNonceMeta = document.querySelector("meta[property=csp-nonce]");
+    const cspNonce = cspNonceMeta?.nonce || cspNonceMeta?.getAttribute("nonce");
+    promise = allSettled(deps.map((dep) => {
+      dep = assetsURL(dep);
+      if (dep in seen) return;
+      seen[dep] = true;
+      const isCss = dep.endsWith(".css");
+      const cssSelector = isCss ? '[rel="stylesheet"]' : "";
+      if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) return;
+      const link = document.createElement("link");
+      link.rel = isCss ? "stylesheet" : scriptRel;
+      if (!isCss) link.as = "script";
+      link.crossOrigin = "";
+      link.href = dep;
+      if (cspNonce) link.setAttribute("nonce", cspNonce);
+      document.head.appendChild(link);
+      if (isCss) return new Promise((res, rej) => {
+        link.addEventListener("load", res);
+        link.addEventListener("error", () => rej(/* @__PURE__ */ new Error(`Unable to preload CSS for ${dep}`)));
+      });
+    }));
+  }
+  function handlePreloadError(err$2) {
+    const e$1 = new Event("vite:preloadError", { cancelable: true });
+    e$1.payload = err$2;
+    window.dispatchEvent(e$1);
+    if (!e$1.defaultPrevented) throw err$2;
+  }
+  return promise.then((res) => {
+    for (const item of res || []) {
+      if (item.status !== "rejected") continue;
+      handlePreloadError(item.reason);
+    }
+    return baseModule().catch(handlePreloadError);
+  });
+};
+export {
+  __vitePreload
+};

package/dist/components/List/List.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { ListProps, SourceType } from '../../IconPicker.types';
+import { default as React } from 'react';
+import { ListProps, SourceType } from '../../IconPicker.types';
 declare const List: <Source extends SourceType>({ data, onSelect, noResultMsg, }: ListProps<Source>) => React.JSX.Element;
 export default List;

package/dist/components/List/List.js

@@ -1,49 +1,38 @@
-import React, { useRef } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { SearchNoResultsM } from '@synerise/ds-icon';
-import Scrollbar from '@synerise/ds-scrollbar';
-import { ELEMENT_HEIGHT, ITEMS_PER_ROW } from '../../IconPicker.const';
-import * as S from '../../IconPicker.styles';
-import { useGroupItems } from '../../hooks/useGroupItems';
-import { createItemData } from '../../utils/createItemData';
-import { RowItem } from '../RowItem';
-var List = function List(_ref) {
-  var data = _ref.data,
-    onSelect = _ref.onSelect,
-    _ref$noResultMsg = _ref.noResultMsg,
-    noResultMsg = _ref$noResultMsg === void 0 ? /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.ICON-PICKER.NO-RESULTS"
-    }) : _ref$noResultMsg;
-  var theme = useTheme();
-  var groupedData = useGroupItems(data, ITEMS_PER_ROW);
-  var listRef = useRef(null);
-  var handleScroll = function handleScroll(_ref2) {
-    var currentTarget = _ref2.currentTarget;
-    var scrollTop = currentTarget.scrollTop;
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { FormattedMessage } from "react-intl";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { SearchNoResultsM } from "@synerise/ds-icon";
+import Scrollbar from "@synerise/ds-scrollbar";
+import { ITEMS_PER_ROW, ELEMENT_HEIGHT } from "../../IconPicker.const.js";
+import { OverlayWrapper, NoResults, Content, NoResultIcon, VirtualList } from "../../IconPicker.styles.js";
+import { useGroupItems } from "../../hooks/useGroupItems.js";
+import { createItemData } from "../../utils/createItemData.js";
+import { RowItem } from "../RowItem.js";
+const List = ({
+  data,
+  onSelect,
+  noResultMsg = /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.ICON-PICKER.NO-RESULTS" })
+}) => {
+  const theme = useTheme();
+  const groupedData = useGroupItems(data, ITEMS_PER_ROW);
+  const listRef = useRef(null);
+  const handleScroll = ({
+    currentTarget
+  }) => {
+    const {
+      scrollTop
+    } = currentTarget;
     if (listRef.current) {
       listRef.current.scrollTo(scrollTop);
     }
   };
-  var itemData = createItemData(groupedData, ELEMENT_HEIGHT, onSelect, ITEMS_PER_ROW);
-  return /*#__PURE__*/React.createElement(Scrollbar, {
-    absolute: true,
-    "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.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, {
-    listHeight: 330,
-    ref: listRef,
-    height: 330,
-    itemCount: groupedData.length,
-    itemData: itemData,
-    itemSize: ELEMENT_HEIGHT,
-    width: "100%"
-  }, function (props) {
-    return /*#__PURE__*/React.createElement(RowItem, props);
-  }));
+  const itemData = createItemData(groupedData, ELEMENT_HEIGHT, onSelect, ITEMS_PER_ROW);
+  return /* @__PURE__ */ jsx(Scrollbar, { absolute: true, "data-testid": "icon-list", maxHeight: 330, onScroll: handleScroll, children: !data.length ? /* @__PURE__ */ jsx(OverlayWrapper, { children: /* @__PURE__ */ jsx(NoResults, { children: /* @__PURE__ */ jsxs(Content, { children: [
+    /* @__PURE__ */ jsx(NoResultIcon, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchNoResultsM, {}), color: theme.palette["grey-600"] }) }),
+    /* @__PURE__ */ jsx("p", { children: noResultMsg })
+  ] }) }) }) : /* @__PURE__ */ jsx(VirtualList, { listHeight: 330, ref: listRef, height: 330, itemCount: groupedData.length, itemData, itemSize: ELEMENT_HEIGHT, width: "100%", children: (props) => /* @__PURE__ */ jsx(RowItem, { ...props }) }) });
+};
+export {
+  List as default
 };
-export default List;

package/dist/components/ListItem/ListItem.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type SourceType } from '../../IconPicker.types';
-import { type ListItemProps } from './ListItem.types';
+import { default as React } from 'react';
+import { SourceType } from '../../IconPicker.types';
+import { ListItemProps } from './ListItem.types';
 declare const ListItem: <Source extends SourceType>({ element, index, onSelect, itemsPerRow, }: ListItemProps<Source>) => React.JSX.Element;
 export default ListItem;

package/dist/components/ListItem/ListItem.js

@@ -1,32 +1,19 @@
-import React from 'react';
-import Button from '@synerise/ds-button';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from '../../IconPicker.styles';
-var ListItem = function ListItem(_ref) {
-  var element = _ref.element,
-    index = _ref.index,
-    onSelect = _ref.onSelect,
-    itemsPerRow = _ref.itemsPerRow;
-  var selectIcon = function selectIcon() {
+import { jsx } from "react/jsx-runtime";
+import Button from "@synerise/ds-button";
+import Tooltip from "@synerise/ds-tooltip";
+import { ListItem as ListItem$1, IconTrigger, FontIcon } from "../../IconPicker.styles.js";
+const ListItem = ({
+  element,
+  index,
+  onSelect,
+  itemsPerRow
+}) => {
+  const selectIcon = () => {
     onSelect(element.value);
   };
-  return /*#__PURE__*/React.createElement(S.ListItem, {
-    itemsPerRow: itemsPerRow
-  }, typeof element.item !== 'string' &&
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  element.item.type.name === 'Avatar' ? /*#__PURE__*/React.createElement(S.IconTrigger, {
-    onMouseUp: selectIcon,
-    "data-testid": "icon-" + index
-  }, element.item) : /*#__PURE__*/React.createElement(Tooltip, {
-    title: element.keywords
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    mode: "single-icon",
-    onClick: selectIcon
-  }, /*#__PURE__*/React.createElement(S.IconTrigger, {
-    "data-testid": "icon-" + index
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "icon-wrapper"
-  }, typeof element.item === 'string' ? /*#__PURE__*/React.createElement(S.FontIcon, null, element.item) : element.item)))));
+  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 }) }) }) }) });
+};
+export {
+  ListItem as default
 };
-export default ListItem;

package/dist/components/ListItem/ListItem.types.d.ts

@@ -1,4 +1,4 @@
-import type { FilterItem, ListProps, SourceType, ValueTypeForSource } from '../../IconPicker.types';
+import { FilterItem, ListProps, SourceType, ValueTypeForSource } from '../../IconPicker.types';
 export type ListItemProps<Source extends SourceType> = {
     element: FilterItem<ValueTypeForSource<Source>>;
     index: number;

package/dist/components/ListItem/ListItem.types.js

@@ -1 +1 @@
-export {};
+