@synerise/ds-icon-picker 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon-picker@1.1.2...@synerise/ds-icon-picker@1.2.0) (2025-04-16)
+
+
+### Features
+
+* **icon-picker:** add font-awesome icons ([410af61](https://github.com/Synerise/synerise-design/commit/410af613d20ac65ad244cbaa823abdc9fb3dfaf2))
+
+
+
+
+
 ## [1.1.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon-picker@1.1.1...@synerise/ds-icon-picker@1.1.2) (2025-04-02)
 
 **Note:** Version bump only for package @synerise/ds-icon-picker

package/README.md

@@ -13,6 +13,18 @@ or
 yarn add @synerise/ds-icon-picker
 ```
 
+If you intend to use font-awesome icon you also need to have these packages installed, as they are not included in this package:
+
+```json
+{
+  "@fortawesome/react-fontawesome": "^0.2.2",
+  "@fortawesome/fontawesome-svg-core": "^6",
+  "@fortawesome/free-brands-svg-icons": "^6",
+  "@fortawesome/free-regular-svg-icons": "^6",
+  "@fortawesome/free-solid-svg-icons": "^6"
+}
+```
+
 ## Usage
 
 ```
@@ -28,11 +40,13 @@ import IconPicker from '@synerise/ds-icon-picker'
 
 ## API
 
-| Property    | Description                                         | Type                                | Default |
-| ----------- | --------------------------------------------------- | ----------------------------------- | ------- |
-| button      | Button Node                                         | React.ReactElement                  | -       |
-| data        | Icon list                                           | FilterElement[]                     | -       |
-| noResultMsg | Node displayed when no items matches searched query | React.ReactNode                     | -       |
-| onSelect    | Action on icon select                               | (val: React.ReactNode) => void      | -       |
-| placeholder | Input placeholder                                   | string                              | -       |
-| trigger     | Trigger type                                        | `['click', 'hover', 'contextMenu']` | []      |
+| Property    | Description                                         | Type                                            | Default |
+| ----------- | --------------------------------------------------- | ----------------------------------------------- | ------- |
+| button      | Button Node                                         | ReactElement                                    | -       |
+| data        | Icons list source                                   | 'design-system' / 'font-awesome' / DataSource[] | -       |
+| 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', 'contextMenu']`             | []      |
+
+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.d.ts

@@ -0,0 +1,2 @@
+export declare const ITEMS_PER_ROW = 6;
+export declare const ELEMENT_HEIGHT = 32;

package/dist/IconPicker.const.js

@@ -0,0 +1,2 @@
+export var ITEMS_PER_ROW = 6;
+export var ELEMENT_HEIGHT = 32;

package/dist/IconPicker.d.ts

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

package/dist/IconPicker.js

@@ -1,21 +1,25 @@
-import React, { useRef, useState } from 'react';
+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 Dropdown from '@synerise/ds-dropdown';
 import { useOnClickOutside } from '@synerise/ds-utils';
 import * as S from './IconPicker.styles';
-import Overlay from './Overlay/Overlay';
+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,
+    onSelect = _ref.onSelect,
     trigger = _ref.trigger,
     placeholder = _ref.placeholder,
     noResultMsg = _ref.noResultMsg;
-  var _useState = useState(data),
-    filteredData = _useState[0],
-    setFilteredData = _useState[1];
+  var items = useIconSourceLoader(data);
+  var _useState = useState(items),
+    filteredItems = _useState[0],
+    setFilteredItems = _useState[1];
   var _useState2 = useState(''),
-    value = _useState2[0],
-    setValue = _useState2[1];
+    searchQuery = _useState2[0],
+    setSearchQuery = _useState2[1];
   var _useState3 = useState(false),
     isOpen = _useState3[0],
     setOpen = _useState3[1];
@@ -23,24 +27,38 @@ var IconPicker = function IconPicker(_ref) {
     focus = _useState4[0],
     setFocus = _useState4[1];
   var ref = useRef(null);
-  var filter = function filter(searchTerm) {
-    setValue(searchTerm);
-    var _final = data.filter(function (item) {
-      return item.category.toLowerCase().includes(searchTerm.toLowerCase());
-    });
-    setFilteredData(_final);
-  };
+  useEffect(function () {
+    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, {
+          items: matching
+        });
+      }).filter(function (group) {
+        return group.items.length;
+      });
+      setFilteredItems(groups);
+      return;
+    }
+    setFilteredItems(items);
+  }, [searchQuery, items]);
   useOnClickOutside(ref, function () {
     setOpen(false);
+    setSearchQuery('');
   });
   var onClearInput = function onClearInput() {
-    setValue('');
-    setFilteredData(data);
+    setSearchQuery('');
   };
   var toggleOpen = function toggleOpen(newState) {
     setOpen(newState);
     setFocus(newState);
   };
+  var handleSelect = function handleSelect(value) {
+    toggleOpen(false);
+    onSelect(value);
+  };
   return /*#__PURE__*/React.createElement(Dropdown, {
     visible: isOpen,
     onVisibleChange: toggleOpen,
@@ -49,17 +67,12 @@ var IconPicker = function IconPicker(_ref) {
     overlay: /*#__PURE__*/React.createElement(S.Overlay, {
       ref: ref
     }, /*#__PURE__*/React.createElement(Overlay, {
-      value: value,
-      onSearchChange: function onSearchChange(val) {
-        return filter(val);
-      },
+      value: searchQuery,
+      onSearchChange: setSearchQuery,
       onClearInput: onClearInput,
       placeholder: placeholder,
-      data: filteredData,
-      onSelect: function onSelect(val) {
-        toggleOpen(false);
-        _onSelect(val);
-      },
+      data: filteredItems,
+      onSelect: handleSelect,
       focus: focus,
       noResultMsg: noResultMsg
     }))

package/dist/IconPicker.styles.d.ts

@@ -1,10 +1,19 @@
+import { FixedSizeList } from 'react-window';
 export declare const List: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ListItem: import("styled-components").StyledComponent<"div", 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, {
+    listHeight: number;
+}, never>;
 export declare const Overlay: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Title: import("styled-components").StyledComponent<"div", 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 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>;

package/dist/IconPicker.styles.js

@@ -1,3 +1,4 @@
+import { FixedSizeList } from 'react-window';
 import styled from 'styled-components';
 export var List = styled.div.withConfig({
   displayName: "IconPickerstyles__List",
@@ -6,14 +7,22 @@ export var List = styled.div.withConfig({
 export var ListItem = styled.div.withConfig({
   displayName: "IconPickerstyles__ListItem",
   componentId: "sc-iun0xm-1"
-})(["width:16.666%;display:flex;justify-content:center;margin-bottom:8px;button{transition-duration:0s;}"]);
+})(["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"
 })(["padding:6px;"]);
+export var VirtualList = styled(FixedSizeList).withConfig({
+  displayName: "IconPickerstyles__VirtualList",
+  componentId: "sc-iun0xm-3"
+})(["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-3"
+  componentId: "sc-iun0xm-4"
 })(["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) {
@@ -25,27 +34,35 @@ export var Overlay = styled.span.withConfig({
 }, OverlayWrapper);
 export var Title = styled.div.withConfig({
   displayName: "IconPickerstyles__Title",
-  componentId: "sc-iun0xm-4"
-})(["font-size:10px;line-height:1.6;font-weight:500;text-transform:uppercase;color:", ";padding:0 4px 8px 4px;"], function (props) {
+  componentId: "sc-iun0xm-5"
+})(["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({
   displayName: "IconPickerstyles__FontIcon",
-  componentId: "sc-iun0xm-5"
+  componentId: "sc-iun0xm-6"
 })(["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-6"
+  componentId: "sc-iun0xm-7"
 })(["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-7"
+  componentId: "sc-iun0xm-8"
 })(["min-height:206px;display:flex;justify-content:center;"]);
 export var Icon = styled.div.withConfig({
   displayName: "IconPickerstyles__Icon",
-  componentId: "sc-iun0xm-8"
+  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;"]);
 export var Content = styled.div.withConfig({
   displayName: "IconPickerstyles__Content",
-  componentId: "sc-iun0xm-9"
-})(["margin-top:42px;p{margin-top:16px;font-size:14px;line-height:1.43;text-align:center;}"]);
+  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({
+  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%;"]);

package/dist/IconPicker.types.d.ts

@@ -1,16 +1,50 @@
-import type { ReactElement, ReactNode } from 'react';
-export type FilterItem = {
+import type { IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+export type FilterItem<ValueType extends FAValue | ReactNode> = {
+    keywords?: string;
+    value: ValueType;
     item: ReactNode;
 };
-export type FilterElement = {
-    category: string;
-    items: FilterItem[];
+export type FilterElement<ValueType extends FAValue | ReactNode = ReactNode> = Category & {
+    items: FilterItem<ValueType>[];
 };
-export type IconPickerProps = {
+export type DataSource = Category & {
+    items: {
+        item: ReactNode;
+        value?: ReactNode;
+        keywords?: string;
+    }[];
+};
+export type Category = {
+    category: ReactNode;
+};
+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 GroupedFilterElement<Source extends SourceType> = Category[] | FilterItem<ValueTypeForSource<Source>>[];
+export type FASource = 'font-awesome';
+export type DSSource = 'design-system';
+export type SourceType = FASource | DSSource | DataSource[];
+export type IconPickerProps<Source extends SourceType> = {
     button: ReactElement;
-    data: FilterElement[];
-    onSelect: (val: ReactNode) => void;
+    data: Source;
+    onSelect: SelectItemHandler<Source>;
     trigger: ('click' | 'hover' | 'contextMenu')[];
     placeholder: string;
-    noResultMsg?: string | ReactElement;
+    noResultMsg?: ReactNode;
+};
+export type ListItemData<Source extends SourceType> = {
+    elementSize: number;
+    itemsPerRow: number;
+    items: GroupedFilterElement<Source>[];
+} & Pick<ListProps<Source>, 'onSelect'>;
+export type ListProps<Source extends SourceType> = {
+    data: FilterElement<ValueTypeForSource<Source>>[];
+    onSelect: SelectItemHandler<Source>;
+    noResultMsg?: ReactNode;
+};
+export type RowItemProps<Source extends SourceType> = {
+    data: ListItemData<Source>;
+    index: number;
+    style: CSSProperties;
 };

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { 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

@@ -0,0 +1,51 @@
+import React, { useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Scrollbar from '@synerise/ds-scrollbar';
+import Icon, { SearchNoResultsM } from '@synerise/ds-icon';
+import { useTheme } from '@synerise/ds-core';
+import { createItemData } from '../../utils/createItemData';
+import { useGroupItems } from '../../hooks/useGroupItems';
+import { RowItem } from '../RowItem';
+import * as S from '../../IconPicker.styles';
+import { ELEMENT_HEIGHT, ITEMS_PER_ROW } from '../../IconPicker.const';
+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 scrollBarRef = useRef(null);
+  var handleScroll = function handleScroll(_ref2) {
+    var currentTarget = _ref2.currentTarget;
+    var scrollTop = currentTarget.scrollTop;
+    if (listRef.current) {
+      listRef.current.scrollTo(scrollTop);
+    }
+  };
+  var itemData = createItemData(groupedData, ELEMENT_HEIGHT, onSelect, ITEMS_PER_ROW);
+  return /*#__PURE__*/React.createElement(Scrollbar, {
+    ref: scrollBarRef,
+    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.Icon, 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);
+  }));
+};
+export default List;

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

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

package/dist/{ListItem → components/ListItem}/ListItem.js

@@ -1,25 +1,28 @@
 import React from 'react';
 import Button from '@synerise/ds-button';
-import * as S from '../IconPicker.styles';
+import * as S from '../../IconPicker.styles';
 var ListItem = function ListItem(_ref) {
   var element = _ref.element,
     index = _ref.index,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    itemsPerRow = _ref.itemsPerRow;
   var selectIcon = function selectIcon() {
-    onSelect(element.item);
+    onSelect(element.value);
   };
-  return /*#__PURE__*/React.createElement(S.ListItem, null, typeof element.item !== 'string' && element.item.type.name === 'Avatar' ?
+  return /*#__PURE__*/React.createElement(S.ListItem, {
+    itemsPerRow: itemsPerRow
+  }, typeof element.item !== 'string' && element.item.type.name === 'Avatar' ?
   /*#__PURE__*/
   // eslint-disable-line
   React.createElement(S.IconTrigger, {
     onMouseUp: selectIcon,
-    "data-testid": "icon" + index
+    "data-testid": "icon-" + index
   }, element.item) : /*#__PURE__*/React.createElement(Button, {
     type: "ghost",
-    mode: "single-icon"
+    mode: "single-icon",
+    onClick: selectIcon
   }, /*#__PURE__*/React.createElement(S.IconTrigger, {
-    onMouseUp: selectIcon,
-    "data-testid": "icon" + index
+    "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))));

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

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

package/dist/components/Overlay/Overlay.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { OverlayType } from './Overlay.types';
+import { SourceType } from '../../IconPicker.types';
+declare const Overlay: <Source extends SourceType>({ value, onSearchChange, onClearInput, placeholder, onSelect, data, focus, noResultMsg, }: OverlayType<Source>) => React.JSX.Element;
+export default Overlay;

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

@@ -0,0 +1,9 @@
+import type { FilterElement, IconPickerProps, SelectItemHandler, SourceType, ValueTypeForSource } from '../../IconPicker.types';
+export type OverlayType<Source extends SourceType> = Pick<IconPickerProps<Source>, 'noResultMsg' | 'placeholder'> & {
+    value: string;
+    data: FilterElement<ValueTypeForSource<Source>>[];
+    onSelect: SelectItemHandler<Source>;
+    onSearchChange: (value: string) => void;
+    onClearInput?: () => void;
+    focus: boolean;
+};

package/dist/components/RowItem.d.ts

@@ -0,0 +1,3 @@
+import React, { ReactElement } from 'react';
+import { RowItemProps, SourceType } from '../IconPicker.types';
+export declare const RowItem: React.MemoExoticComponent<(<Source extends SourceType>({ data, index, style }: RowItemProps<Source>) => ReactElement)>;

package/dist/components/RowItem.js

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+import { areEqual } from 'react-window';
+import ListItem from './ListItem/ListItem';
+import * as S from '../IconPicker.styles';
+import { isCategories } from '../utils/typeguards.utils';
+export var RowItem = /*#__PURE__*/memo(function (_ref) {
+  var data = _ref.data,
+    index = _ref.index,
+    style = _ref.style;
+  var elementSize = data.elementSize,
+    itemsPerRow = data.itemsPerRow,
+    onSelect = data.onSelect,
+    items = data.items;
+  var rowItems = items[index];
+  return /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(S.ListRow, null, isCategories(rowItems) ? /*#__PURE__*/React.createElement(S.Title, {
+    elementSize: elementSize + "px"
+  }, rowItems[0].category) : rowItems.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(ListItem, {
+      key: i,
+      element: item,
+      itemsPerRow: itemsPerRow,
+      onSelect: onSelect,
+      index: i
+    }) // eslint-disable-line react/no-array-index-key
+    ;
+  })));
+}, areEqual);

package/dist/hooks/useGroupItems.d.ts

@@ -0,0 +1,2 @@
+import { FilterElement, GroupedFilterElement, SourceType, ValueTypeForSource } from '../IconPicker.types';
+export declare const useGroupItems: <Source extends SourceType>(data: FilterElement<ValueTypeForSource<Source>>[], itemsPerRow: number) => GroupedFilterElement<Source>[];

package/dist/hooks/useGroupItems.js

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+export var useGroupItems = function useGroupItems(data, itemsPerRow) {
+  var groupedData = useMemo(function () {
+    return data.reduce(function (flatItemsAndCategories, group) {
+      var category = group.category,
+        items = group.items;
+      flatItemsAndCategories.push([{
+        category: category
+      }]);
+      var groupItemsLength = items.length;
+      var rowCount = Math.ceil(groupItemsLength / itemsPerRow);
+      for (var i = 0; i < rowCount; i += 1) {
+        var rowItems = [];
+        for (var j = 0; j < itemsPerRow; j += 1) {
+          var idx = itemsPerRow * i + j;
+          if (idx < groupItemsLength) {
+            rowItems.push(items[idx]);
+          }
+        }
+        flatItemsAndCategories.push(rowItems);
+      }
+      return flatItemsAndCategories;
+    }, []);
+  }, [data, itemsPerRow]);
+  return groupedData;
+};

package/dist/hooks/useIconSourceLoader.d.ts

@@ -0,0 +1,2 @@
+import { SourceType, FilterElement, ValueTypeForSource } from '../IconPicker.types';
+export declare const useIconSourceLoader: <Source extends SourceType>(data: SourceType) => FilterElement<ValueTypeForSource<Source>>[];

package/dist/hooks/useIconSourceLoader.js

@@ -0,0 +1,106 @@
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+import React, { useCallback, useState } from 'react';
+import Icon, { medium } from '@synerise/ds-icon';
+import { isDSSourceType, isFASourceType } from '../utils/typeguards.utils';
+import { loadFontAwesome } from '../utils/loadFontAwesome';
+import { prepareItems } from '../utils/prepareItems';
+export var useIconSourceLoader = function useIconSourceLoader(data) {
+  var _useState = useState([]),
+    items = _useState[0],
+    setItems = _useState[1];
+  var loadedItems = useCallback(function () {
+    if (!items.length) {
+      var loadFAIcons = /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var _yield$loadFontAwesom, fas, fab, far, icon, FontAwesomeIcon;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return loadFontAwesome();
+              case 2:
+                _yield$loadFontAwesom = _context.sent;
+                fas = _yield$loadFontAwesom.fas;
+                fab = _yield$loadFontAwesom.fab;
+                far = _yield$loadFontAwesom.far;
+                icon = _yield$loadFontAwesom.icon;
+                FontAwesomeIcon = _yield$loadFontAwesom.FontAwesomeIcon;
+                setItems([{
+                  category: 'Solid',
+                  items: Object.values(fas).map(function (iconData) {
+                    return {
+                      keywords: iconData.iconName,
+                      item: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+                        icon: icon(iconData),
+                        key: iconData.iconName
+                      }),
+                      value: [iconData.prefix, iconData.iconName]
+                    };
+                  })
+                }, {
+                  category: 'Brands',
+                  items: Object.values(fab).map(function (iconData) {
+                    return {
+                      keywords: iconData.iconName,
+                      item: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+                        icon: icon(iconData),
+                        key: iconData.iconName
+                      }),
+                      value: [iconData.prefix, iconData.iconName]
+                    };
+                  })
+                }, {
+                  category: 'Regular',
+                  items: Object.values(far).map(function (iconData) {
+                    return {
+                      keywords: iconData.iconName,
+                      item: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+                        icon: icon(iconData),
+                        key: iconData.iconName
+                      }),
+                      value: [iconData.prefix, iconData.iconName]
+                    };
+                  })
+                }]);
+              case 9:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function loadFAIcons() {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      if (isDSSourceType(data)) {
+        var iconItems = Object.entries(medium).map(function (_ref2) {
+          var name = _ref2[0],
+            Component = _ref2[1];
+          return {
+            keywords: name,
+            item: /*#__PURE__*/React.createElement(Icon, {
+              component: /*#__PURE__*/React.createElement(Component, null)
+            }),
+            value: /*#__PURE__*/React.createElement(Icon, {
+              component: /*#__PURE__*/React.createElement(Component, null)
+            })
+          };
+        });
+        setItems([{
+          category: 'DS Icons',
+          items: iconItems
+        }]);
+        return;
+      }
+      if (isFASourceType(data)) {
+        loadFAIcons();
+        return;
+      }
+      setItems(prepareItems(data));
+    }
+  }, [data, items.length]);
+  loadedItems();
+  return items;
+};

package/dist/index.d.ts

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

package/dist/utils/createItemData.d.ts

@@ -0,0 +1,2 @@
+import type { ListItemData, SourceType } from '../IconPicker.types';
+export declare const createItemData: <Source extends SourceType>(items: import("../IconPicker.types").GroupedFilterElement<Source>[], elementSize: number, onSelect: import("../IconPicker.types").SelectItemHandler<Source>, itemsPerRow: number) => ListItemData<Source>;

package/dist/utils/createItemData.js

@@ -0,0 +1,9 @@
+import memoize from 'memoize-one';
+export var createItemData = memoize(function (items, elementSize, onSelect, itemsPerRow) {
+  return {
+    items: items,
+    elementSize: elementSize,
+    onSelect: onSelect,
+    itemsPerRow: itemsPerRow
+  };
+});

package/dist/utils/loadFontAwesome.d.ts

@@ -0,0 +1,7 @@
+export declare const loadFontAwesome: () => Promise<{
+    fas: import("@fortawesome/fontawesome-common-types").IconPack;
+    icon: typeof import("@fortawesome/fontawesome-svg-core").icon;
+    fab: import("@fortawesome/fontawesome-common-types").IconPack;
+    far: import("@fortawesome/fontawesome-common-types").IconPack;
+    FontAwesomeIcon: typeof import("@fortawesome/react-fontawesome").FontAwesomeIcon;
+}>;

package/dist/utils/loadFontAwesome.js

@@ -0,0 +1,41 @@
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+export var loadFontAwesome = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var core, solid, brands, regular, component, loaded, _loaded$, library, icon, fas, fab, far, FontAwesomeIcon;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          core = import('@fortawesome/fontawesome-svg-core');
+          solid = import('@fortawesome/free-solid-svg-icons');
+          brands = import('@fortawesome/free-brands-svg-icons');
+          regular = import('@fortawesome/free-regular-svg-icons');
+          component = import('@fortawesome/react-fontawesome');
+          _context.next = 7;
+          return Promise.all([core, solid, brands, regular, component]);
+        case 7:
+          loaded = _context.sent;
+          _loaded$ = loaded[0], library = _loaded$.library, icon = _loaded$.icon;
+          fas = loaded[1].fas;
+          fab = loaded[2].fab;
+          far = loaded[3].far;
+          FontAwesomeIcon = loaded[4].FontAwesomeIcon;
+          library.add(fas, fab, far);
+          return _context.abrupt("return", {
+            fas: fas,
+            icon: icon,
+            fab: fab,
+            far: far,
+            FontAwesomeIcon: FontAwesomeIcon
+          });
+        case 15:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function loadFontAwesome() {
+    return _ref.apply(this, arguments);
+  };
+}();

package/dist/utils/matchesSearchQuery.d.ts

@@ -0,0 +1 @@
+export declare const matchesSearchQuery: (text: string, searchQuery: string) => boolean;

package/dist/utils/matchesSearchQuery.js

@@ -0,0 +1,3 @@
+export var matchesSearchQuery = function matchesSearchQuery(text, searchQuery) {
+  return text.toLowerCase().includes(searchQuery.toLowerCase());
+};

package/dist/utils/prepareItems.d.ts

@@ -0,0 +1,2 @@
+import { DataSource, FilterElement, ValueTypeForSource } from '../IconPicker.types';
+export declare const prepareItems: (data: DataSource[]) => FilterElement<ValueTypeForSource<DataSource[]>>[];

package/dist/utils/prepareItems.js

@@ -0,0 +1,12 @@
+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); }
+export var prepareItems = function prepareItems(data) {
+  return data.map(function (group) {
+    return _extends({}, group, {
+      items: group.items.map(function (item) {
+        return _extends({}, item, {
+          value: item.value === undefined ? item.item : item.value
+        });
+      })
+    });
+  });
+};

package/dist/utils/typeguards.utils.d.ts

@@ -0,0 +1,5 @@
+import { SourceType, DataSource, GroupedFilterElement, Category } from '../IconPicker.types';
+export declare const isFASourceType: (data: SourceType) => data is "font-awesome";
+export declare const isDSSourceType: (data: SourceType) => data is "design-system";
+export declare const isData: (data: SourceType) => data is DataSource[];
+export declare const isCategories: <Source extends SourceType>(element: GroupedFilterElement<Source>) => element is Category[];

package/dist/utils/typeguards.utils.js

@@ -0,0 +1,12 @@
+export var isFASourceType = function isFASourceType(data) {
+  return data === 'font-awesome';
+};
+export var isDSSourceType = function isDSSourceType(data) {
+  return data === 'design-system';
+};
+export var isData = function isData(data) {
+  return Array.isArray(data);
+};
+export var isCategories = function isCategories(element) {
+  return !!('category' in element[0] && element[0].category);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-icon-picker",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "IconPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -31,18 +31,24 @@
   "sideEffects": false,
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.1.3",
-    "@synerise/ds-dropdown": "^1.0.4",
-    "@synerise/ds-icon": "^1.3.0",
-    "@synerise/ds-scrollbar": "^1.0.4",
+    "@synerise/ds-button": "^1.1.4",
+    "@synerise/ds-dropdown": "^1.0.5",
+    "@synerise/ds-icon": "^1.4.0",
+    "@synerise/ds-scrollbar": "^1.0.5",
     "@synerise/ds-utils": "^1.0.1",
-    "unicode-emoji-utils": "^1.2.0"
+    "memoize-one": "^5.1.1",
+    "react-window": "^1.8.11"
   },
   "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6",
+    "@fortawesome/free-brands-svg-icons": "^6",
+    "@fortawesome/free-regular-svg-icons": "^6",
+    "@fortawesome/free-solid-svg-icons": "^6",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "dc78b03be09e793ec84f1dafc59c5616e77f1196"
+  "gitHead": "6735f9babfeef53122f54ca86cba5f581e8870d9"
 }

package/dist/List/List.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ListProps } from './List.types';
-declare const List: React.FC<ListProps>;
-export default List;

package/dist/List/List.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import Scrollbar from '@synerise/ds-scrollbar';
-import { FormattedMessage } from 'react-intl';
-import Icon, { SearchNoResultsM } from '@synerise/ds-icon';
-import { theme } from '@synerise/ds-core';
-import ListItem from '../ListItem/ListItem';
-import * as S from '../IconPicker.styles';
-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;
-  return /*#__PURE__*/React.createElement(Scrollbar, {
-    maxHeight: 330
-  }, !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, {
-    component: /*#__PURE__*/React.createElement(SearchNoResultsM, null),
-    color: theme.palette['grey-600']
-  })), /*#__PURE__*/React.createElement("p", null, noResultMsg)))) : data.map(function (list) {
-    return !!list.items.length && /*#__PURE__*/React.createElement(S.OverlayWrapper, {
-      key: list.category
-    }, list.category && /*#__PURE__*/React.createElement(S.Title, null, list.category), /*#__PURE__*/React.createElement(S.List, null, list.items.map(function (el, i) {
-      return /*#__PURE__*/React.createElement(ListItem, {
-        key: i,
-        element: el,
-        onSelect: onSelect,
-        index: i
-      }) // eslint-disable-line react/no-array-index-key
-      ;
-    })));
-  }));
-};
-export default List;

package/dist/List/List.types.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { FilterElement } from '../IconPicker.types';
-export type ListProps = {
-    data: FilterElement[];
-    onSelect: (value: React.ReactNode) => void;
-    noResultMsg?: string | React.ReactNode;
-};

package/dist/List/List.types.js

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

package/dist/ListItem/ListItem.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ListItemProps } from './ListItem.types';
-declare const ListItem: ({ element, index, onSelect }: ListItemProps) => React.JSX.Element;
-export default ListItem;

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { FilterItem } from '../IconPicker.types';
-export type ListItemProps = {
-    element: FilterItem;
-    index: number;
-    onSelect: (value: React.ReactNode) => void;
-};

package/dist/Overlay/Overlay.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { OverlayType } from './Overlay.types';
-declare const Overlay: ({ value, onSearchChange, onClearInput, placeholder, onSelect, data, focus, noResultMsg, }: OverlayType) => React.JSX.Element;
-export default Overlay;

package/dist/Overlay/Overlay.types.d.ts

@@ -1,7 +0,0 @@
-import type { IconPickerProps } from '../IconPicker.types';
-export type OverlayType = Pick<IconPickerProps, 'data' | 'noResultMsg' | 'placeholder' | 'onSelect'> & {
-    value: string;
-    onSearchChange: (value: string) => void;
-    onClearInput?: () => void;
-    focus: boolean;
-};