@synerise/ds-context-selector 0.12.0 → 0.12.3

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 +32 -0
  2. package/README.md +21 -21
  3. package/dist/ContextSelector.js +6 -2
  4. package/dist/ContextSelector.styles.js +1 -1
  5. package/dist/ContextSelector.types.d.ts +1 -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,38 @@
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.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.12.2...@synerise/ds-context-selector@0.12.3) (2022-06-29)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-context-selector
9
+
10
+
11
+
12
+
13
+
14
+ ## [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)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **context-selector:** focus only if dropdown active (nested elements) ([d365962](https://github.com/Synerise/synerise-design/commit/d36596265af7a3ccef7da0c779c4d26e9b545958))
20
+ * **context-selector:** pass all dropdown-item props to child Menu.Item ([4b8dc8e](https://github.com/Synerise/synerise-design/commit/4b8dc8ec7520f09e78018365fac7c87b0dde4578))
21
+ * **filter:** fixes closing info-card when clicking on it ([91eed3b](https://github.com/Synerise/synerise-design/commit/91eed3b7a5392c04ed618c9f7265608d6c39655e))
22
+
23
+
24
+
25
+
26
+
27
+ ## [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)
28
+
29
+
30
+ ### Bug Fixes
31
+
32
+ * **context-selector:** fixes auto height of dropdown list ([4a6b1fb](https://github.com/Synerise/synerise-design/commit/4a6b1fbddc28ddee46751afacb63617f6d341395))
33
+
34
+
35
+
36
+
37
+
6
38
  # [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)
7
39
 
8
40
 
package/README.md CHANGED
@@ -84,29 +84,29 @@ import ContextSelector from '@synerise/ds-context-selector'
84
84
 
85
85
  ## API
86
86
 
87
- | --- | --- | --- | --- |
88
- | addMode | If true trigger doesn't change style when value is set | ContextItem \ undefined | undefined |
89
- | customTriggerComponent | Add custom trigger | React.ReactNode | undefined |
90
- | dropdownProps | Limited part of props for dropdown on ContextSelector component | Omit<DropdownProps, 'trigger' 'getPopupContainer' 'onVisibleChange' 'visible' 'overlay'> | - |
91
- | dropdownWrapperStyles | Apply custom styles to dropdown wrapper | CSSProperties \ undefined | - |
92
- | getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement \ null) => HTMLElement; | - |
93
- | groups | Groups of items | ContextGroup[] | [] |
94
- | hasMoreItems | Whether if onFetchData should be called | boolean | - |
95
- | items | Array of items | ContextItem[] | [] |
96
- | menuItemHeight | Set component Menu.Item height | 'large' \ 'default' | - |
97
- | menuItemHeight | Size of single menu item | ItemSize.LARGE \ ItemSize.DEFAULT | ItemSize.DEFAULT |
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 | - |
98
105
  | onActivate | Callback called when user opens dropdown | (fieldType: string) => void | - |
99
- | onClickOutside | Callback called when user click outside dropdown | () => void \ undefined | - |
100
- | onClickOutsideEvents | Overwrite default events for document listener | HandledEventsType[] \ undefined | - |
101
106
  | onDeactivate | Callback called when user closes dropdown | () => void | - |
102
- | onFetchData | Callback called when user scrolls to the end of dropdown list | () => void | - |
103
- | onSearch | Callback called when user enter any char in search input | (query: string) => void | - |
104
- | onSelectItem | Callback called when user selects item | (item: ContextItem \ ContextGroup \ undefined) => void | - |
105
- | opened | Whether if dropdown should opens from outside of component | boolean | false |
106
- | Property | Description | Type | Default |
107
- | selectedItem | Selected item | ContextItem \ undefined | undefined |
108
- | texts | Translations object | ContextSelectorTexts | - |
109
- | trigger | Add custom trigger to modal | 'click' \ 'hover' \ 'contextMenu' | 'click |
107
+ | hasMoreItems | Whether if onFetchData should be called | boolean | - |
108
+ | getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement | null) => HTMLElement; | - |
109
+ | dropdownProps | Limited part of props for dropdown on ContextSelector component | Omit<DropdownProps, 'trigger' 'getPopupContainer' 'onVisibleChange' 'visible' 'overlay'> | - |
110
110
 
111
111
 
112
112
  ### ContextGroup
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,
@@ -36,10 +37,13 @@ var ContextSelector = function ContextSelector(_ref) {
36
37
  type = _ref.type,
37
38
  dropdownProps = _ref.dropdownProps;
38
39
 
39
- var _React$useState = React.useState(false),
40
+ var _React$useState = React.useState(defaultDropdownVisibility != null ? defaultDropdownVisibility : false),
40
41
  dropdownVisible = _React$useState[0],
41
42
  setDropdownVisible = _React$useState[1];
42
43
 
44
+ React.useEffect(function () {
45
+ setDropdownVisible(defaultDropdownVisibility != null ? defaultDropdownVisibility : false);
46
+ }, [defaultDropdownVisibility]);
43
47
  var handleChange = React.useCallback(function (val) {
44
48
  setDropdownVisible(false);
45
49
  onSelectItem(val);
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,6 +36,7 @@ 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;
41
42
  onDeactivate?: () => void;
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.12.0",
3
+ "version": "0.12.3",
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": "4a658911645846d1e329609ba9db06a7bc64962b",
29
+ "gitHead": "3df224bc0e56a55beaa9df7e0dcfbda4c04631ad",
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.17",
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.15.0",
40
40
  "@synerise/ds-result": "^0.6.9",
41
41
  "@synerise/ds-scrollbar": "^0.4.7",
42
- "@synerise/ds-tabs": "^0.13.11",
42
+ "@synerise/ds-tabs": "^0.13.13",
43
43
  "@synerise/ds-utils": "^0.19.0",
44
44
  "classnames": "^2.2.6",
45
45
  "react-window": "1.8.5"