@synerise/ds-context-selector 0.8.6 → 0.10.1

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 (6) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/README.md +22 -19
  3. package/dist/ContextSelector.js +6 -3
  4. package/dist/ContextSelector.types.d.ts +7 -4
  5. package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js +18 -2
  6. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,44 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.10.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.10.0...@synerise/ds-context-selector@0.10.1) (2022-01-17)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-context-selector
9
+
10
+
11
+
12
+
13
+
14
+ # [0.10.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.9.0...@synerise/ds-context-selector@0.10.0) (2022-01-13)
15
+
16
+
17
+ ### Features
18
+
19
+ * **context-selector:** allows to override some dropdown props ([fc46516](https://github.com/Synerise/synerise-design/commit/fc46516549872f96c13fe7aded8cbff1c7d5db0d))
20
+
21
+
22
+
23
+
24
+
25
+ # [0.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.8.7...@synerise/ds-context-selector@0.9.0) (2022-01-04)
26
+
27
+
28
+ ### Features
29
+
30
+ * **context-selector:** adds menuItemHeight prop ([373dfc4](https://github.com/Synerise/synerise-design/commit/373dfc4e510fd4c21222d541579923ff6c96cab4))
31
+
32
+
33
+
34
+
35
+
36
+ ## [0.8.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.8.6...@synerise/ds-context-selector@0.8.7) (2021-12-29)
37
+
38
+ **Note:** Version bump only for package @synerise/ds-context-selector
39
+
40
+
41
+
42
+
43
+
6
44
  ## [0.8.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.8.5...@synerise/ds-context-selector@0.8.6) (2021-12-22)
7
45
 
8
46
  **Note:** Version bump only for package @synerise/ds-context-selector
package/README.md CHANGED
@@ -84,25 +84,28 @@ import ContextSelector from '@synerise/ds-context-selector'
84
84
 
85
85
  ## API
86
86
 
87
- | Property | Description | Type | Default |
88
- | --- | --- | --- | --- |
89
- | groups | Groups of items | ContextGroup[] | [] |
90
- | items | Array of items | ContextItem[] | [] |
91
- | onSelectItem | Callback called when user selects item | (item: ContextItem \ ContextGroup \ undefined) => void | - |
92
- | opened | Whether if dropdown should opens from outside of component | boolean | false |
93
- | texts | Translations object | ContextSelectorTexts | - |
94
- | selectedItem | Selected item | ContextItem \ undefined | undefined |
95
- | addMode | If true trigger doesn't change style when value is set | ContextItem \ undefined | undefined |
96
- | customTriggerComponent | Add custom trigger | React.ReactNode | undefined |
97
- | trigger | Add custom trigger to modal | 'click' \ 'hover' \ 'contextMenu' | 'click |
98
- | menuItemHeight | Set component Menu.Item height | 'large' \ 'default' | - |
99
- | dropdownWrapperStyles | Apply custom styles to dropdown wrapper | CSSProperties \ undefined | - |
100
- | onClickOutsideEvents | Overwrite default events for document listener | HandledEventsType[] \ undefined | - |
101
- | onClickOutside | Callback called when user click outside dropdown | () => void \ undefined | - |
102
- | onSearch | Callback called when user enter any char in search input | (query: string) => void | - |
103
- | onFetchData | Callback called when user scrolls to the end of dropdown list | () => void | - |
104
- | hasMoreItems | Whether if onFetchData should be called | boolean | - |
105
- | getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement | null) => HTMLElement; | - |
87
+ | Property | Description | Type | Default |
88
+ | --- | --- | --- | --- |
89
+ | groups | Groups of items | ContextGroup[] | [] |
90
+ | items | Array of items | ContextItem[] | [] |
91
+ | menuItemHeight | Size of single menu item | ItemSize.LARGE \ ItemSize.DEFAULT | ItemSize.DEFAULT |
92
+ | onSelectItem | Callback called when user selects item | (item: ContextItem \ ContextGroup \ undefined) => void | - |
93
+ | opened | Whether if dropdown should opens from outside of component | boolean | false |
94
+ | texts | Translations object | ContextSelectorTexts | - |
95
+ | selectedItem | Selected item | ContextItem \ undefined | undefined |
96
+ | addMode | If true trigger doesn't change style when value is set | ContextItem \ undefined | undefined |
97
+ | customTriggerComponent | Add custom trigger | React.ReactNode | undefined |
98
+ | trigger | Add custom trigger to modal | 'click' \ 'hover' \ 'contextMenu' | 'click |
99
+ | menuItemHeight | Set component Menu.Item height | 'large' \ 'default' | - |
100
+ | dropdownWrapperStyles | Apply custom styles to dropdown wrapper | CSSProperties \ undefined | - |
101
+ | onClickOutsideEvents | Overwrite default events for document listener | HandledEventsType[] \ undefined | - |
102
+ | onClickOutside | Callback called when user click outside dropdown | () => void \ undefined | - |
103
+ | onSearch | Callback called when user enter any char in search input | (query: string) => void | - |
104
+ | onFetchData | Callback called when user scrolls to the end of dropdown list | () => void | - |
105
+ | hasMoreItems | Whether if onFetchData should be called | boolean | - |
106
+ | getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement \ null) => HTMLElement; | - |
107
+ | dropdownProps | Limited part of props for dropdown on ContextSelector component | Omit<DropdownProps, 'trigger' 'getPopupContainer' 'onVisibleChange' 'visible' 'overlay'> | - |
108
+
106
109
 
107
110
 
108
111
  ### ContextGroup
package/dist/ContextSelector.js CHANGED
@@ -1,3 +1,5 @@
1
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
1
3
  import * as React from 'react';
2
4
  import Button from '@synerise/ds-button';
3
5
  import Icon, { AngleDownS, Add3M } from '@synerise/ds-icon';
@@ -29,7 +31,8 @@ var ContextSelector = function ContextSelector(_ref) {
29
31
  onActivate = _ref.onActivate,
30
32
  onOpen = _ref.onOpen,
31
33
  getPopupContainerOverride = _ref.getPopupContainerOverride,
32
- type = _ref.type;
34
+ type = _ref.type,
35
+ dropdownProps = _ref.dropdownProps;
33
36
 
34
37
  var _React$useState = React.useState(false),
35
38
  dropdownVisible = _React$useState[0],
@@ -84,7 +87,7 @@ var ContextSelector = function ContextSelector(_ref) {
84
87
  }, [onActivate]);
85
88
  return /*#__PURE__*/React.createElement("div", {
86
89
  "data-popup-container": true
87
- }, /*#__PURE__*/React.createElement(Dropdown, {
90
+ }, /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
88
91
  getPopupContainer: getPopupContainerOverride || getPopupContainer,
89
92
  onVisibleChange: onDropdownVisibilityChange,
90
93
  trigger: trigger,
@@ -107,7 +110,7 @@ var ContextSelector = function ContextSelector(_ref) {
107
110
  hasMoreItems: hasMoreItems,
108
111
  onFetchData: onFetchData
109
112
  })
110
- }, customTriggerComponent != null ? customTriggerComponent : triggerButton));
113
+ }), customTriggerComponent != null ? customTriggerComponent : triggerButton));
111
114
  };
112
115
 
113
116
  export default ContextSelector;
package/dist/ContextSelector.types.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import { CSSProperties } from 'react';
3
3
  import { HandledEventsType } from '@synerise/ds-utils';
4
+ import { ItemSize } from '@synerise/ds-menu';
5
+ import { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
4
6
  export declare type ContextTexts = {
5
7
  buttonLabel: string;
6
8
  searchPlaceholder: string;
@@ -47,7 +49,7 @@ export declare type ContextProps = {
47
49
  loading?: boolean;
48
50
  customTriggerComponent?: React.ReactNode;
49
51
  trigger?: ('click' | 'hover' | 'contextMenu')[];
50
- menuItemHeight?: 'large' | 'default';
52
+ menuItemHeight?: ItemSize;
51
53
  dropdownWrapperStyles?: CSSProperties;
52
54
  onClickOutsideEvents?: HandledEventsType[];
53
55
  onClickOutside?: () => void;
@@ -56,6 +58,7 @@ export declare type ContextProps = {
56
58
  onOpen?: () => void;
57
59
  hasMoreItems?: boolean;
58
60
  type?: 'default' | 'attribute' | 'event';
61
+ dropdownProps?: Omit<DropdownProps, 'trigger' | 'getPopupContainer' | 'onVisibleChange' | 'visible' | 'overlay'>;
59
62
  };
60
63
  export declare type ContextDropdownProps = {
61
64
  setDropdownVisible: (show: boolean) => void;
@@ -67,7 +70,7 @@ export declare type ContextDropdownProps = {
67
70
  onSetGroup?: (val: ContextItem | ContextGroup) => void;
68
71
  visible?: boolean;
69
72
  loading?: boolean;
70
- menuItemHeight?: 'large' | 'default';
73
+ menuItemHeight?: ItemSize;
71
74
  dropdownWrapperStyles?: CSSProperties;
72
75
  onClickOutsideEvents?: HandledEventsType[];
73
76
  onClickOutside?: () => void;
@@ -84,7 +87,7 @@ export declare type ContextSelectorDropdownItemProps = {
84
87
  select: (item: ContextItem | ContextGroup) => void;
85
88
  selected?: boolean;
86
89
  className: string;
87
- menuItemHeight?: 'large' | 'default';
90
+ menuItemHeight?: ItemSize;
88
91
  style?: React.CSSProperties;
89
92
  };
90
93
  export declare type ListItem = {
@@ -92,7 +95,7 @@ export declare type ListItem = {
92
95
  item: ContextItem | ContextGroup;
93
96
  searchQuery: string;
94
97
  select: (item: ContextItem | ContextGroup) => void;
95
- menuItemHeight?: 'large' | 'default';
98
+ menuItemHeight?: ItemSize;
96
99
  selected?: boolean;
97
100
  clearSearch?: () => void;
98
101
  hideDropdown?: () => void;
package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js CHANGED
@@ -1,3 +1,5 @@
1
+ var _ITEM_SIZE;
2
+
1
3
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
4
 
3
5
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -16,10 +18,12 @@ import Scrollbar from '@synerise/ds-scrollbar';
16
18
  import Loader from '@synerise/ds-loader';
17
19
  import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
18
20
  import { v4 as uuid } from 'uuid';
19
- import { FixedSizeList as List } from 'react-window';
21
+ import { VariableSizeList as List } from 'react-window';
22
+ import { ItemSize } from '@synerise/ds-menu';
20
23
  import * as S from '../ContextSelector.styles';
21
24
  import ContextSelectorDropdownItem from './ContextSelectorDropdownItem';
22
25
  var NO_GROUP_NAME = 'NO_GROUP_NAME';
26
+ var ITEM_SIZE = (_ITEM_SIZE = {}, _ITEM_SIZE[ItemSize.LARGE] = 50, _ITEM_SIZE[ItemSize.DEFAULT] = 32, _ITEM_SIZE.title = 32, _ITEM_SIZE);
23
27
 
24
28
  function isListTitle(element) {
25
29
  return element.title !== undefined;
@@ -201,6 +205,12 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
201
205
 
202
206
  return groupByGroupName(items);
203
207
  }, [activeGroup, activeTab, currentTabItems, groupByGroupName, groups, hasSubgroups, items, onSearch, searchQuery, searchResults]);
208
+ React.useEffect(function () {
209
+ var _listRef$current;
210
+
211
+ // eslint-disable-next-line no-unused-expressions
212
+ (_listRef$current = listRef.current) == null ? void 0 : _listRef$current.resetAfterIndex(0, false);
213
+ }, [activeItems, listRef]);
204
214
  var handleSearch = React.useCallback(function (val) {
205
215
  setSearchQuery(val);
206
216
  onSearch && onSearch(val);
@@ -229,6 +239,12 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
229
239
  }
230
240
  };
231
241
 
242
+ var getItemSize = function getItemSize(index) {
243
+ var item = activeItems[index];
244
+ if (isListTitle(item)) return ITEM_SIZE.title;
245
+ return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[ItemSize.DEFAULT];
246
+ };
247
+
232
248
  return /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
233
249
  style: _objectSpread({
234
250
  width: '300px'
@@ -284,7 +300,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
284
300
  width: "100%",
285
301
  height: 300,
286
302
  itemCount: activeItems.length,
287
- itemSize: 32,
303
+ itemSize: getItemSize,
288
304
  style: listStyle,
289
305
  ref: listRef
290
306
  }, function (_ref3) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-context-selector",
3
- "version": "0.8.6",
3
+ "version": "0.10.1",
4
4
  "description": "ContextSelector UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -26,20 +26,20 @@
26
26
  "test:watch": "npm run test -- --watchAll",
27
27
  "types": "tsc --noEmit"
28
28
  },
29
- "gitHead": "a89cd14cdbe25b06949b3b9763e58a080111c160",
29
+ "gitHead": "56c08eca6e2a1e41b8a39e28a9ec657ac1bdec83",
30
30
  "sideEffects": [
31
31
  "dist/style/*",
32
32
  "*.less"
33
33
  ],
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
- "@synerise/ds-button": "^0.16.3",
37
- "@synerise/ds-dropdown": "^0.17.5",
38
- "@synerise/ds-icon": "^0.46.2",
39
- "@synerise/ds-menu": "^0.11.4",
40
- "@synerise/ds-result": "^0.6.3",
41
- "@synerise/ds-scrollbar": "^0.4.2",
42
- "@synerise/ds-tabs": "^0.12.6",
36
+ "@synerise/ds-button": "^0.16.4",
37
+ "@synerise/ds-dropdown": "^0.17.7",
38
+ "@synerise/ds-icon": "^0.47.0",
39
+ "@synerise/ds-menu": "^0.12.1",
40
+ "@synerise/ds-result": "^0.6.4",
41
+ "@synerise/ds-scrollbar": "^0.4.3",
42
+ "@synerise/ds-tabs": "^0.13.1",
43
43
  "@synerise/ds-utils": "^0.19.0",
44
44
  "classnames": "^2.2.6",
45
45
  "react-window": "1.8.5"