@synerise/ds-context-selector 0.11.0 → 0.12.2

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 (8) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/README.md +22 -21
  3. package/dist/ContextSelector.js +17 -5
  4. package/dist/ContextSelector.styles.js +1 -1
  5. package/dist/ContextSelector.types.d.ts +2 -0
  6. package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js +32 -17
  7. package/dist/ContextSelectorDropdown/ContextSelectorDropdownItem.js +13 -2
  8. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,42 @@
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.12.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.12.1...@synerise/ds-context-selector@0.12.2) (2022-06-15)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **context-selector:** focus only if dropdown active (nested elements) ([d365962](https://github.com/Synerise/synerise-design/commit/d36596265af7a3ccef7da0c779c4d26e9b545958))
12
+ * **context-selector:** pass all dropdown-item props to child Menu.Item ([4b8dc8e](https://github.com/Synerise/synerise-design/commit/4b8dc8ec7520f09e78018365fac7c87b0dde4578))
13
+ * **filter:** fixes closing info-card when clicking on it ([91eed3b](https://github.com/Synerise/synerise-design/commit/91eed3b7a5392c04ed618c9f7265608d6c39655e))
14
+
15
+
16
+
17
+
18
+
19
+ ## [0.12.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.12.0...@synerise/ds-context-selector@0.12.1) (2022-04-29)
20
+
21
+
22
+ ### Bug Fixes
23
+
24
+ * **context-selector:** fixes auto height of dropdown list ([4a6b1fb](https://github.com/Synerise/synerise-design/commit/4a6b1fbddc28ddee46751afacb63617f6d341395))
25
+
26
+
27
+
28
+
29
+
30
+ # [0.12.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.11.0...@synerise/ds-context-selector@0.12.0) (2022-04-29)
31
+
32
+
33
+ ### Features
34
+
35
+ * **context-selector:** adds default trigger value ([006e307](https://github.com/Synerise/synerise-design/commit/006e3079e8d557c6312c525370c53ad41ddcba9a))
36
+ * **context-selector:** adds onDeactivate prop, updates Readme.md ([ace0ac7](https://github.com/Synerise/synerise-design/commit/ace0ac7f2e6ec9e4adad51dc430af7e7fa4bb097))
37
+
38
+
39
+
40
+
41
+
6
42
  # [0.11.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.10.10...@synerise/ds-context-selector@0.11.0) (2022-04-05)
7
43
 
8
44
 
package/README.md CHANGED
@@ -84,30 +84,31 @@ 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
- | 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; | - |
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
+ | defaultDropdownVisibility | default visibility of dropdown | boolean | false |
94
+ | opened | Whether if dropdown should opens from outside of component | boolean | false |
95
+ | texts | Translations object | ContextSelectorTexts | - |
96
+ | selectedItem | Selected item | ContextItem \ undefined | undefined |
97
+ | addMode | If true trigger doesn't change style when value is set | ContextItem \ undefined | undefined |
98
+ | customTriggerComponent | Add custom trigger | React.ReactNode | undefined |
99
+ | trigger | Add custom trigger to modal | 'click' \ 'hover' \ 'contextMenu' | 'click |
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
+ | onActivate | Callback called when user opens dropdown | (fieldType: string) => void | - |
106
+ | onDeactivate | Callback called when user closes dropdown | () => void | - |
107
+ | hasMoreItems | Whether if onFetchData should be called | boolean | - |
108
+ | getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement | null) => HTMLElement; | - |
107
109
  | dropdownProps | Limited part of props for dropdown on ContextSelector component | Omit<DropdownProps, 'trigger' 'getPopupContainer' 'onVisibleChange' 'visible' 'overlay'> | - |
108
110
 
109
111
 
110
-
111
112
  ### ContextGroup
112
113
 
113
114
  | Property | Description | Type | Default |
package/dist/ContextSelector.js CHANGED
@@ -10,7 +10,8 @@ import ContextSelectorDropdown from './ContextSelectorDropdown/ContextSelectorDr
10
10
  import { ItemWrapper } from './ContextSelector.styles';
11
11
 
12
12
  var ContextSelector = function ContextSelector(_ref) {
13
- var selectedItem = _ref.selectedItem,
13
+ var defaultDropdownVisibility = _ref.defaultDropdownVisibility,
14
+ selectedItem = _ref.selectedItem,
14
15
  onSelectItem = _ref.onSelectItem,
15
16
  onSetGroup = _ref.onSetGroup,
16
17
  groups = _ref.groups,
@@ -20,7 +21,8 @@ var ContextSelector = function ContextSelector(_ref) {
20
21
  addMode = _ref.addMode,
21
22
  loading = _ref.loading,
22
23
  customTriggerComponent = _ref.customTriggerComponent,
23
- trigger = _ref.trigger,
24
+ _ref$trigger = _ref.trigger,
25
+ trigger = _ref$trigger === void 0 ? ['click'] : _ref$trigger,
24
26
  menuItemHeight = _ref.menuItemHeight,
25
27
  dropdownWrapperStyles = _ref.dropdownWrapperStyles,
26
28
  onClickOutsideEvents = _ref.onClickOutsideEvents,
@@ -29,15 +31,19 @@ var ContextSelector = function ContextSelector(_ref) {
29
31
  hasMoreItems = _ref.hasMoreItems,
30
32
  onFetchData = _ref.onFetchData,
31
33
  onActivate = _ref.onActivate,
34
+ onDeactivate = _ref.onDeactivate,
32
35
  onOpen = _ref.onOpen,
33
36
  getPopupContainerOverride = _ref.getPopupContainerOverride,
34
37
  type = _ref.type,
35
38
  dropdownProps = _ref.dropdownProps;
36
39
 
37
- var _React$useState = React.useState(false),
40
+ var _React$useState = React.useState(defaultDropdownVisibility != null ? defaultDropdownVisibility : false),
38
41
  dropdownVisible = _React$useState[0],
39
42
  setDropdownVisible = _React$useState[1];
40
43
 
44
+ React.useEffect(function () {
45
+ setDropdownVisible(defaultDropdownVisibility != null ? defaultDropdownVisibility : false);
46
+ }, [defaultDropdownVisibility]);
41
47
  var handleChange = React.useCallback(function (val) {
42
48
  setDropdownVisible(false);
43
49
  onSelectItem(val);
@@ -83,8 +89,14 @@ var ContextSelector = function ContextSelector(_ref) {
83
89
  }));
84
90
  }, [addMode, handleClick, texts, triggerColor, triggerMode, selectedItem]);
85
91
  var onDropdownVisibilityChange = React.useCallback(function (value) {
86
- return value && onActivate && onActivate('');
87
- }, [onActivate]);
92
+ if (value) {
93
+ onActivate && onActivate('');
94
+ setDropdownVisible(true);
95
+ } else {
96
+ onDeactivate && onDeactivate();
97
+ setDropdownVisible(false);
98
+ }
99
+ }, [onActivate, onDeactivate]);
88
100
  return /*#__PURE__*/React.createElement("div", {
89
101
  "data-popup-container": true
90
102
  }, /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
package/dist/ContextSelector.styles.js CHANGED
@@ -11,7 +11,7 @@ export var ContentPlaceholder = styled.div.withConfig({
11
11
  export var ItemsList = styled(Menu).withConfig({
12
12
  displayName: "ContextSelectorstyles__ItemsList",
13
13
  componentId: "sc-1tuu6xk-2"
14
- })(["width:100%;"]);
14
+ })(["width:100%;.ds-context-selector-list{height:auto !important;max-height:300px;}"]);
15
15
  export var SearchResult = styled.span.withConfig({
16
16
  displayName: "ContextSelectorstyles__SearchResult",
17
17
  componentId: "sc-1tuu6xk-3"
package/dist/ContextSelector.types.d.ts CHANGED
@@ -36,8 +36,10 @@ export declare type ContextItemsInSubGroup = ContextItem & {
36
36
  isGroup?: boolean;
37
37
  };
38
38
  export declare type ContextProps = {
39
+ defaultDropdownVisibility?: boolean;
39
40
  selectedItem?: ContextItem | undefined;
40
41
  onActivate?: (fieldType: string) => void;
42
+ onDeactivate?: () => void;
41
43
  onSelectItem: (item: ContextItem | ContextGroup | undefined) => void;
42
44
  groups: ContextGroup[];
43
45
  items: ContextItem[];
package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js CHANGED
@@ -12,7 +12,7 @@ import * as React from 'react';
12
12
  import Dropdown from '@synerise/ds-dropdown';
13
13
  import Icon, { SearchM } from '@synerise/ds-icon';
14
14
  import Tabs from '@synerise/ds-tabs';
15
- import { focusWithArrowKeys, useOnClickOutside } from '@synerise/ds-utils';
15
+ import { focusWithArrowKeys, getClosest, useOnClickOutside } from '@synerise/ds-utils';
16
16
  import Result from '@synerise/ds-result';
17
17
  import Scrollbar from '@synerise/ds-scrollbar';
18
18
  import Loader from '@synerise/ds-loader';
@@ -59,21 +59,25 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
59
59
  }, [groups]);
60
60
  var overlayRef = React.useRef(null);
61
61
 
62
- var _React$useState = React.useState(''),
63
- searchQuery = _React$useState[0],
64
- setSearchQuery = _React$useState[1];
62
+ var _React$useState = React.useState(),
63
+ searchInputHandle = _React$useState[0],
64
+ setSearchInputHandle = _React$useState[1];
65
65
 
66
- var _React$useState2 = React.useState(defaultTab),
67
- activeTab = _React$useState2[0],
68
- setActiveTab = _React$useState2[1];
66
+ var _React$useState2 = React.useState(''),
67
+ searchQuery = _React$useState2[0],
68
+ setSearchQuery = _React$useState2[1];
69
69
 
70
- var _React$useState3 = React.useState(undefined),
71
- activeGroup = _React$useState3[0],
72
- setActiveGroup = _React$useState3[1];
70
+ var _React$useState3 = React.useState(defaultTab),
71
+ activeTab = _React$useState3[0],
72
+ setActiveTab = _React$useState3[1];
73
73
 
74
- var _React$useState4 = React.useState(true),
75
- searchInputCanBeFocused = _React$useState4[0],
76
- setSearchInputFocus = _React$useState4[1];
74
+ var _React$useState4 = React.useState(undefined),
75
+ activeGroup = _React$useState4[0],
76
+ setActiveGroup = _React$useState4[1];
77
+
78
+ var _React$useState5 = React.useState(true),
79
+ searchInputCanBeFocused = _React$useState5[0],
80
+ setSearchInputFocus = _React$useState5[1];
77
81
 
78
82
  var classNames = React.useMemo(function () {
79
83
  return "ds-context-item ds-context-item-" + uuid();
@@ -82,9 +86,11 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
82
86
  onSetGroup && onSetGroup(item);
83
87
  setActiveGroup(item);
84
88
  }, [onSetGroup]);
85
- useOnClickOutside(overlayRef, function () {
86
- onClickOutside && onClickOutside();
87
- setDropdownVisible(false);
89
+ useOnClickOutside(overlayRef, function (event) {
90
+ if (getClosest(event.target, '.ds-info-card') === null) {
91
+ onClickOutside && onClickOutside();
92
+ setDropdownVisible(false);
93
+ }
88
94
  }, onClickOutsideEvents);
89
95
  var clearSearch = React.useCallback(function () {
90
96
  setSearchQuery('');
@@ -251,7 +257,12 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
251
257
  }, dropdownWrapperStyles),
252
258
  ref: overlayRef,
253
259
  onKeyDown: function onKeyDown(e) {
254
- setSearchInputFocus(false);
260
+ var _document;
261
+
262
+ if (((_document = document) == null ? void 0 : _document.activeElement) === (searchInputHandle == null ? void 0 : searchInputHandle.current)) {
263
+ setSearchInputFocus(false);
264
+ }
265
+
255
266
  searchQuery && focusWithArrowKeys(e, classNames.split(' ')[1], function () {
256
267
  setSearchInputFocus(true);
257
268
  });
@@ -266,6 +277,9 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
266
277
  value: searchQuery,
267
278
  autofocus: !searchQuery || searchInputCanBeFocused,
268
279
  autofocusDelay: 50,
280
+ handleInputRef: function handleInputRef(e) {
281
+ return setSearchInputHandle(e);
282
+ },
269
283
  iconLeft: /*#__PURE__*/React.createElement(Icon, {
270
284
  component: /*#__PURE__*/React.createElement(SearchM, null),
271
285
  color: theme.palette['grey-600']
@@ -297,6 +311,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
297
311
  onYReachEnd: onFetchData,
298
312
  onScroll: handleScroll
299
313
  }, /*#__PURE__*/React.createElement(List, {
314
+ className: "ds-context-selector-list",
300
315
  key: "list-" + activeGroup + "-" + activeTab,
301
316
  width: "100%",
302
317
  height: 300,
package/dist/ContextSelectorDropdown/ContextSelectorDropdownItem.js CHANGED
@@ -1,3 +1,9 @@
1
+ var _excluded = ["id", "icon"];
2
+
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); }
4
+
5
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
6
+
1
7
  import * as React from 'react';
2
8
  import Icon, { CheckS } from '@synerise/ds-icon';
3
9
  import Menu from '@synerise/ds-menu';
@@ -13,7 +19,12 @@ var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
13
19
  className = _ref.className,
14
20
  menuItemHeight = _ref.menuItemHeight,
15
21
  style = _ref.style;
16
- return /*#__PURE__*/React.createElement(Menu.Item, {
22
+
23
+ var id = item.id,
24
+ _ = item.icon,
25
+ itemProps = _objectWithoutPropertiesLoose(item, _excluded);
26
+
27
+ return /*#__PURE__*/React.createElement(Menu.Item, _extends({
17
28
  style: style,
18
29
  className: className,
19
30
  key: item.name + item.id,
@@ -32,7 +43,7 @@ var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
32
43
  },
33
44
  size: menuItemHeight,
34
45
  description: item.description
35
- }, item.name);
46
+ }, itemProps), item.name);
36
47
  };
37
48
 
38
49
  export default ContextSelectorDropdownItem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-context-selector",
3
- "version": "0.11.0",
3
+ "version": "0.12.2",
4
4
  "description": "ContextSelector UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -26,7 +26,7 @@
26
26
  "test:watch": "npm run test -- --watchAll",
27
27
  "types": "tsc --noEmit"
28
28
  },
29
- "gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0",
29
+ "gitHead": "d787395998e479858cb58f6d56555e4c51fe45d5",
30
30
  "sideEffects": [
31
31
  "dist/style/*",
32
32
  "*.less"
@@ -34,12 +34,12 @@
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
36
  "@synerise/ds-button": "^0.17.2",
37
- "@synerise/ds-dropdown": "^0.17.16",
37
+ "@synerise/ds-dropdown": "^0.17.18",
38
38
  "@synerise/ds-icon": "^0.49.0",
39
- "@synerise/ds-menu": "^0.13.2",
39
+ "@synerise/ds-menu": "^0.14.0",
40
40
  "@synerise/ds-result": "^0.6.9",
41
41
  "@synerise/ds-scrollbar": "^0.4.7",
42
- "@synerise/ds-tabs": "^0.13.10",
42
+ "@synerise/ds-tabs": "^0.13.12",
43
43
  "@synerise/ds-utils": "^0.19.0",
44
44
  "classnames": "^2.2.6",
45
45
  "react-window": "1.8.5"