@synerise/ds-icon-picker 1.3.6 → 1.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +512 -1849
  2. package/README.md +11 -12
  3. package/dist/IconPicker.d.ts +1 -1
  4. package/dist/IconPicker.js +3 -3
  5. package/dist/IconPicker.types.d.ts +1 -1
  6. package/dist/components/List/List.js +5 -5
  7. package/dist/components/ListItem/ListItem.d.ts +3 -3
  8. package/dist/components/ListItem/ListItem.js +3 -4
  9. package/dist/components/Overlay/Overlay.d.ts +2 -2
  10. package/dist/components/Overlay/Overlay.js +1 -1
  11. package/dist/components/RowItem.d.ts +3 -3
  12. package/dist/components/RowItem.js +2 -3
  13. package/dist/hooks/useGroupItems.d.ts +1 -1
  14. package/dist/hooks/useIconSourceLoader.d.ts +1 -1
  15. package/dist/hooks/useIconSourceLoader.js +1 -1
  16. package/dist/utils/prepareItems.d.ts +1 -1
  17. package/dist/utils/typeguards.utils.d.ts +1 -1
  18. package/package.json +9 -9
package/README.md CHANGED
@@ -40,17 +40,16 @@ import IconPicker from '@synerise/ds-icon-picker'
40
40
 
41
41
  ## API
42
42
 
43
- | Property | Description | Type | Default |
44
- | ----------- | --------------------------------------------------- | ----------------------------------------------- | ------- |
45
- | button | Button Node | ReactElement | - |
46
- | data | Icons list source | 'design-system' / 'font-awesome' / DataSource[] | - |
47
- | noResultMsg | Node displayed when no items matches searched query | ReactNode | - |
48
- | onSelect | Action on icon select | OnSelectType | - |
49
- | placeholder | Input placeholder | string | - |
50
- | trigger | Trigger type | `['click', 'hover', 'contextMenu']` | [] |
51
- | onClear | Action on icon delete | OnSelectType | - |
52
- | selectedIcon| Icon Node | ReactElement | - |
53
- | clearTooltip| tooltip text | string | - |
54
-
43
+ | Property | Description | Type | Default |
44
+ | ------------ | --------------------------------------------------- | ----------------------------------------------- | ------- |
45
+ | button | Button Node | ReactElement | - |
46
+ | data | Icons list source | 'design-system' / 'font-awesome' / DataSource[] | - |
47
+ | noResultMsg | Node displayed when no items matches searched query | ReactNode | - |
48
+ | onSelect | Action on icon select | OnSelectType | - |
49
+ | placeholder | Input placeholder | string | - |
50
+ | trigger | Trigger type | `['click', 'hover', 'contextMenu']` | [] |
51
+ | onClear | Action on icon delete | OnSelectType | - |
52
+ | selectedIcon | Icon Node | ReactElement | - |
53
+ | clearTooltip | tooltip text | string | - |
55
54
 
56
55
  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 CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
- import { IconPickerProps, SourceType } from './IconPicker.types';
2
+ import { type IconPickerProps, type SourceType } from './IconPicker.types';
3
3
  declare const IconPicker: <IconSource extends SourceType>({ button, data, onSelect, trigger, placeholder, noResultMsg, onClear, selectedIcon, clearTooltip, }: IconPickerProps<IconSource>) => React.JSX.Element;
4
4
  export default IconPicker;
package/dist/IconPicker.js CHANGED
@@ -1,11 +1,11 @@
1
1
  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); }
2
2
  import React, { useEffect, useRef, useState } from 'react';
3
- import Dropdown from '@synerise/ds-dropdown';
4
- import { useOnClickOutside } from '@synerise/ds-utils';
5
3
  import Button from '@synerise/ds-button';
6
- import Icon, { AddM, Close3S } from '@synerise/ds-icon';
7
4
  import ButtonGroup from '@synerise/ds-button-group';
5
+ import Dropdown from '@synerise/ds-dropdown';
6
+ import Icon, { AddM, Close3S } from '@synerise/ds-icon';
8
7
  import Tooltip from '@synerise/ds-tooltip';
8
+ import { useOnClickOutside } from '@synerise/ds-utils';
9
9
  import * as S from './IconPicker.styles';
10
10
  import Overlay from './components/Overlay/Overlay';
11
11
  import { useIconSourceLoader } from './hooks/useIconSourceLoader';
package/dist/IconPicker.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
2
1
  import type { CSSProperties, ReactElement, ReactNode } from 'react';
2
+ import type { IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
3
3
  export type FilterItem<ValueType extends FAValue | ReactNode> = {
4
4
  keywords?: string;
5
5
  value: ValueType;
package/dist/components/List/List.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import React, { useRef } from 'react';
2
2
  import { FormattedMessage } from 'react-intl';
3
- import Scrollbar from '@synerise/ds-scrollbar';
4
- import Icon, { SearchNoResultsM } from '@synerise/ds-icon';
5
3
  import { useTheme } from '@synerise/ds-core';
6
- import { createItemData } from '../../utils/createItemData';
4
+ import Icon, { SearchNoResultsM } from '@synerise/ds-icon';
5
+ import Scrollbar from '@synerise/ds-scrollbar';
6
+ import { ELEMENT_HEIGHT, ITEMS_PER_ROW } from '../../IconPicker.const';
7
+ import * as S from '../../IconPicker.styles';
7
8
  import { useGroupItems } from '../../hooks/useGroupItems';
9
+ import { createItemData } from '../../utils/createItemData';
8
10
  import { RowItem } from '../RowItem';
9
- import * as S from '../../IconPicker.styles';
10
- import { ELEMENT_HEIGHT, ITEMS_PER_ROW } from '../../IconPicker.const';
11
11
  var List = function List(_ref) {
12
12
  var data = _ref.data,
13
13
  onSelect = _ref.onSelect,
package/dist/components/ListItem/ListItem.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { ListItemProps } from './ListItem.types';
3
- import { SourceType } from '../../IconPicker.types';
4
- declare const ListItem: <Source extends SourceType>({ element, index, onSelect, itemsPerRow }: ListItemProps<Source>) => React.JSX.Element;
2
+ import { type SourceType } from '../../IconPicker.types';
3
+ import { type ListItemProps } from './ListItem.types';
4
+ declare const ListItem: <Source extends SourceType>({ element, index, onSelect, itemsPerRow, }: ListItemProps<Source>) => React.JSX.Element;
5
5
  export default ListItem;
package/dist/components/ListItem/ListItem.js CHANGED
@@ -11,10 +11,9 @@ var ListItem = function ListItem(_ref) {
11
11
  };
12
12
  return /*#__PURE__*/React.createElement(S.ListItem, {
13
13
  itemsPerRow: itemsPerRow
14
- }, typeof element.item !== 'string' && element.item.type.name === 'Avatar' ?
15
- /*#__PURE__*/
16
- // eslint-disable-line
17
- React.createElement(S.IconTrigger, {
14
+ }, typeof element.item !== 'string' &&
15
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
16
+ element.item.type.name === 'Avatar' ? /*#__PURE__*/React.createElement(S.IconTrigger, {
18
17
  onMouseUp: selectIcon,
19
18
  "data-testid": "icon-" + index
20
19
  }, element.item) : /*#__PURE__*/React.createElement(Button, {
package/dist/components/Overlay/Overlay.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { OverlayType } from './Overlay.types';
3
- import { SourceType } from '../../IconPicker.types';
2
+ import { type SourceType } from '../../IconPicker.types';
3
+ import { type OverlayType } from './Overlay.types';
4
4
  declare const Overlay: <Source extends SourceType>({ value, onSearchChange, onClearInput, placeholder, onSelect, data, focus, noResultMsg, }: OverlayType<Source>) => React.JSX.Element;
5
5
  export default Overlay;
package/dist/components/Overlay/Overlay.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
- import Icon, { SearchM } from '@synerise/ds-icon';
3
2
  import { useTheme } from '@synerise/ds-core';
4
3
  import Dropdown from '@synerise/ds-dropdown';
4
+ import Icon, { SearchM } from '@synerise/ds-icon';
5
5
  import List from '../List/List';
6
6
  var Overlay = function Overlay(_ref) {
7
7
  var value = _ref.value,
package/dist/components/RowItem.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import React, { ReactElement } from 'react';
2
- import { RowItemProps, SourceType } from '../IconPicker.types';
3
- export declare const RowItem: React.MemoExoticComponent<(<Source extends SourceType>({ data, index, style }: RowItemProps<Source>) => ReactElement)>;
1
+ import React, { type ReactElement } from 'react';
2
+ import { type RowItemProps, type SourceType } from '../IconPicker.types';
3
+ export declare const RowItem: React.MemoExoticComponent<(<Source extends SourceType>({ data, index, style, }: RowItemProps<Source>) => ReactElement)>;
package/dist/components/RowItem.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React, { memo } from 'react';
2
2
  import { areEqual } from 'react-window';
3
- import ListItem from './ListItem/ListItem';
4
3
  import * as S from '../IconPicker.styles';
5
4
  import { isCategories } from '../utils/typeguards.utils';
5
+ import ListItem from './ListItem/ListItem';
6
6
  export var RowItem = /*#__PURE__*/memo(function (_ref) {
7
7
  var data = _ref.data,
8
8
  index = _ref.index,
@@ -23,7 +23,6 @@ export var RowItem = /*#__PURE__*/memo(function (_ref) {
23
23
  itemsPerRow: itemsPerRow,
24
24
  onSelect: onSelect,
25
25
  index: i
26
- }) // eslint-disable-line react/no-array-index-key
27
- ;
26
+ });
28
27
  })));
29
28
  }, areEqual);
package/dist/hooks/useGroupItems.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { FilterElement, GroupedFilterElement, SourceType, ValueTypeForSource } from '../IconPicker.types';
1
+ import { type FilterElement, type GroupedFilterElement, type SourceType, type ValueTypeForSource } from '../IconPicker.types';
2
2
  export declare const useGroupItems: <Source extends SourceType>(data: FilterElement<ValueTypeForSource<Source>>[], itemsPerRow: number) => GroupedFilterElement<Source>[];
package/dist/hooks/useIconSourceLoader.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { SourceType, FilterElement, ValueTypeForSource } from '../IconPicker.types';
1
+ import { type FilterElement, type SourceType, type ValueTypeForSource } from '../IconPicker.types';
2
2
  export declare const useIconSourceLoader: <Source extends SourceType>(data: SourceType) => FilterElement<ValueTypeForSource<Source>>[];
package/dist/hooks/useIconSourceLoader.js CHANGED
@@ -3,9 +3,9 @@ function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.
3
3
  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); }); }; }
4
4
  import React, { useCallback, useState } from 'react';
5
5
  import Icon, { medium } from '@synerise/ds-icon';
6
- import { isDSSourceType, isFASourceType } from '../utils/typeguards.utils';
7
6
  import { loadFontAwesome } from '../utils/loadFontAwesome';
8
7
  import { prepareItems } from '../utils/prepareItems';
8
+ import { isDSSourceType, isFASourceType } from '../utils/typeguards.utils';
9
9
  export var useIconSourceLoader = function useIconSourceLoader(data) {
10
10
  var _useState = useState([]),
11
11
  items = _useState[0],
package/dist/utils/prepareItems.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { DataSource, FilterElement, ValueTypeForSource } from '../IconPicker.types';
1
+ import { type DataSource, type FilterElement, type ValueTypeForSource } from '../IconPicker.types';
2
2
  export declare const prepareItems: (data: DataSource[]) => FilterElement<ValueTypeForSource<DataSource[]>>[];
package/dist/utils/typeguards.utils.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SourceType, DataSource, GroupedFilterElement, Category } from '../IconPicker.types';
1
+ import { type Category, type DataSource, type GroupedFilterElement, type SourceType } from '../IconPicker.types';
2
2
  export declare const isFASourceType: (data: SourceType) => data is "font-awesome";
3
3
  export declare const isDSSourceType: (data: SourceType) => data is "design-system";
4
4
  export declare const isData: (data: SourceType) => data is DataSource[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-icon-picker",
3
- "version": "1.3.6",
3
+ "version": "1.3.8",
4
4
  "description": "IconPicker UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -31,13 +31,13 @@
31
31
  "sideEffects": false,
32
32
  "types": "dist/index.d.ts",
33
33
  "dependencies": {
34
- "@synerise/ds-button": "^1.4.0",
35
- "@synerise/ds-button-group": "^1.1.4",
36
- "@synerise/ds-dropdown": "^1.0.13",
37
- "@synerise/ds-icon": "^1.5.3",
38
- "@synerise/ds-scrollbar": "^1.1.0",
39
- "@synerise/ds-tooltip": "^1.1.10",
40
- "@synerise/ds-utils": "^1.3.0",
34
+ "@synerise/ds-button": "^1.4.2",
35
+ "@synerise/ds-button-group": "^1.1.6",
36
+ "@synerise/ds-dropdown": "^1.0.15",
37
+ "@synerise/ds-icon": "^1.5.4",
38
+ "@synerise/ds-scrollbar": "^1.1.2",
39
+ "@synerise/ds-tooltip": "^1.1.12",
40
+ "@synerise/ds-utils": "^1.3.1",
41
41
  "memoize-one": "^5.1.1",
42
42
  "react-window": "^1.8.11"
43
43
  },
@@ -52,5 +52,5 @@
52
52
  "react-intl": ">=3.12.0 <= 6.8",
53
53
  "styled-components": "^5.3.3"
54
54
  },
55
- "gitHead": "f2713cd35cfe22f63a159f05144585834897a132"
55
+ "gitHead": "4512641033ba3581a3df208143c547fcfed45895"
56
56
  }