@synerise/ds-context-selector 1.1.14 → 1.1.16

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.
package/README.md CHANGED
@@ -6,6 +6,7 @@ title: ContextSelector
6
6
  ContextSelector UI Component
7
7
 
8
8
  ## Installation
9
+
9
10
  ```
10
11
  npm i @synerise/ds-context-selector
11
12
  or
@@ -13,6 +14,7 @@ yarn add @synerise/ds-context-selector
13
14
  ```
14
15
 
15
16
  ## Usage
17
+
16
18
  ```
17
19
  import ContextSelector from '@synerise/ds-context-selector'
18
20
 
@@ -81,40 +83,38 @@ import ContextSelector from '@synerise/ds-context-selector'
81
83
 
82
84
  ## API
83
85
 
84
- | Property | Description | Type | Default |
85
- |---------------------------|------------------------------------------------------------------|------------------------------------------------------------------------------------------|-----------------------|
86
- | groups | Groups of items | ContextGroup[] | [] |
87
- | items | Array of items | ContextItem[] | [] |
88
- | menuItemHeight | Size of single menu item | ItemSize.LARGE \ ItemSize.DEFAULT | ItemSize.DEFAULT |
89
- | onSelectItem | Callback called when user selects item | (item: ContextItem \ ContextGroup \ undefined) => void | - |
90
- | defaultDropdownVisibility | default visibility of dropdown | boolean | false |
91
- | opened | Whether if dropdown should opens from outside of component | boolean | false |
92
- | texts | Translations object | ContextTexts | - |
93
- | selectedItem | Selected item | ContextItem \ undefined | undefined |
94
- | addMode | If true trigger doesn't change style when value is set | ContextItem \ undefined | undefined |
95
- | customTriggerComponent | Add custom trigger | React.ReactNode | undefined |
96
- | trigger | Add custom trigger to modal | 'click' \ 'hover' \ 'contextMenu' | 'click |
97
- | getMenuEntryProps | Configure tooltip (information-card by default) | (arg: ParameterValueType) => MenuItemProps \ undefined | undefined |
98
- | dropdownWrapperStyles | Apply custom styles to dropdown wrapper | CSSProperties \ undefined | - |
99
- | onClickOutsideEvents | Overwrite default events for document listener | HandledEventsType[] \ undefined | - |
100
- | onClickOutside | Callback called when user click outside dropdown | () => void \ undefined | - |
101
- | onSearch | Callback called when user enter any char in search input | (query: string) => void | - |
102
- | hideSearchField | Whether to hide the search field in the dropdown | boolean | false |
103
- | onFetchData | Callback called when user scrolls to the end of dropdown list | () => void | - |
104
- | onActivate | Callback called when user opens dropdown | (fieldType: string) => void | - |
105
- | onDeactivate | Callback called when user closes dropdown | () => void | - |
106
- | hasMoreItems | Whether if onFetchData should be called | boolean | - |
107
- | getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement \ null) => HTMLElement; | |
108
- | dropdownProps | Limited part of props for dropdown on ContextSelector component | Omit<DropdownProps, 'trigger' 'getPopupContainer' 'onVisibleChange' 'visible' 'overlay'> | - |
109
- | errorText | Error message to display below component | ReactNode | - |
110
- | isError | Render trigger with error styles, even if errorText is empty | boolean | - |
111
-
112
-
86
+ | Property | Description | Type | Default |
87
+ | ------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------- |
88
+ | groups | Groups of items | ContextGroup[] | [] |
89
+ | items | Array of items | ContextItem[] | [] |
90
+ | menuItemHeight | Size of single menu item | ItemSize.LARGE \ ItemSize.DEFAULT | ItemSize.DEFAULT |
91
+ | onSelectItem | Callback called when user selects item | (item: ContextItem \ ContextGroup \ undefined) => void | - |
92
+ | defaultDropdownVisibility | default visibility of dropdown | boolean | false |
93
+ | opened | Whether if dropdown should opens from outside of component | boolean | false |
94
+ | texts | Translations object | ContextTexts | - |
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
+ | getMenuEntryProps | Configure tooltip (information-card by default) | (arg: ParameterValueType) => MenuItemProps \ undefined | undefined |
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
+ | hideSearchField | Whether to hide the search field in the dropdown | boolean | false |
105
+ | onFetchData | Callback called when user scrolls to the end of dropdown list | () => void | - |
106
+ | onActivate | Callback called when user opens dropdown | (fieldType: string) => void | - |
107
+ | onDeactivate | Callback called when user closes dropdown | () => void | - |
108
+ | hasMoreItems | Whether if onFetchData should be called | boolean | - |
109
+ | getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement \ null) => HTMLElement; | |
110
+ | dropdownProps | Limited part of props for dropdown on ContextSelector component | Omit<DropdownProps, 'trigger' 'getPopupContainer' 'onVisibleChange' 'visible' 'overlay'> | - |
111
+ | errorText | Error message to display below component | ReactNode | - |
112
+ | isError | Render trigger with error styles, even if errorText is empty | boolean | - |
113
113
 
114
114
  ### ContextGroup
115
115
 
116
116
  | Property | Description | Type | Default |
117
- | --- | --- | --- | --- |
117
+ | ------------- | ---------------------------------------------------------------- | --------------- | ------- |
118
118
  | defaultGroup | Whether if this group is default | boolean | false |
119
119
  | icon | Icon of group | React.ReactNode | - |
120
120
  | id | Id of group | React.ReactText | - |
@@ -126,11 +126,10 @@ import ContextSelector from '@synerise/ds-context-selector'
126
126
  | description | Set menu item description ( recommended to use with 'large' size | React.ReactNode | - |
127
127
  | customSuffix | Use custom suffix instead of default 'check' icon | React.ReactNode | - |
128
128
 
129
-
130
129
  ### ContextItem
131
130
 
132
131
  | Property | Description | Type | Default |
133
- | --- | --- | --- | --- |
132
+ | ------------- | ---------------------------------------------------------------- | --------------- | ------- |
134
133
  | groupId | Id of group | React.ReactText | - |
135
134
  | groupName | Name of group | string | - |
136
135
  | icon | Icon of item | React.ReactNode | - |
@@ -141,15 +140,13 @@ import ContextSelector from '@synerise/ds-context-selector'
141
140
  | description | Set menu item description ( recommended to use with 'large' size | React.ReactNode | - |
142
141
  | customSuffix | Use custom suffix instead of default 'check' icon | React.ReactNode | - |
143
142
 
144
-
145
143
  ### ContextTexts
144
+
146
145
  | Property | Description | Type | Default |
147
- |----------------------|-------------------------------------------|-----------|--------------|
146
+ | -------------------- | ----------------------------------------- | --------- | ------------ |
148
147
  | buttonLabel | Button label | ReactNode | 'Choose' |
149
148
  | noResults | No results info | ReactNode | 'No results' |
150
149
  | searchPlaceholder | Search box placeholder | string | 'Search' |
151
150
  | showMore | Show more button label | ReactNode | 'Show more' |
152
151
  | recentItemsGroupName | Dropdown section title for recent results | string | 'Recent' |
153
152
  | allItemsGroupName | Dropdown section title for all results | string | 'All' |
154
-
155
-
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
- import { ContextProps } from './ContextSelector.types';
2
+ import { type ContextProps } from './ContextSelector.types';
3
3
  declare const ContextSelector: ({ defaultDropdownVisibility, selectedItem, onSelectItem, onSetGroup, groups, items, recentItems, texts, opened, addMode, loading, customTriggerComponent, trigger, menuItemHeight, dropdownWrapperStyles, onClickOutsideEvents, onClickOutside, onSearch, hideSearchField, hasMoreItems, onFetchData, onActivate, onDeactivate, onOpen, getPopupContainerOverride, type, dropdownProps, disabled, errorText, isError, readOnly, getMenuEntryProps, dropdownDimensionsConfig, }: ContextProps) => React.JSX.Element;
4
4
  export default ContextSelector;
@@ -1,13 +1,13 @@
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, { useCallback, useEffect, useMemo, useState } from 'react';
3
3
  import Button from '@synerise/ds-button';
4
- import Icon, { Add3M, AngleDownS } from '@synerise/ds-icon';
5
- import Menu from '@synerise/ds-menu';
6
4
  import Dropdown from '@synerise/ds-dropdown';
5
+ import Icon, { Add3M, AngleDownS } from '@synerise/ds-icon';
7
6
  import InformationCard from '@synerise/ds-information-card';
7
+ import Menu from '@synerise/ds-menu';
8
8
  import { getPopupContainer } from '@synerise/ds-utils';
9
+ import { ErrorWrapper, ItemWrapper } from './ContextSelector.styles';
9
10
  import ContextSelectorDropdown from './ContextSelectorDropdown/ContextSelectorDropdown';
10
- import { ItemWrapper, ErrorWrapper } from './ContextSelector.styles';
11
11
  import { DROPDOWN_HEIGHT, DROPDOWN_HEIGHT_BELOW_THRESHOLD, DROPDOWN_HEIGHT_THRESHOLD } from './constants';
12
12
  import { useTexts } from './hooks/useTexts';
13
13
  var ContextSelector = function ContextSelector(_ref) {
@@ -91,7 +91,9 @@ var ContextSelector = function ContextSelector(_ref) {
91
91
  return readOnly ? 'simple' : 'label-icon';
92
92
  }, [selectedItem, readOnly]);
93
93
  var triggerColor = useMemo(function () {
94
- if (!selectedItem) return 'blue';
94
+ if (!selectedItem) {
95
+ return 'blue';
96
+ }
95
97
  return type === 'event' ? 'cyan' : 'green';
96
98
  }, [selectedItem, type]);
97
99
  var handleClick = useCallback(function () {
@@ -157,7 +159,9 @@ var ContextSelector = function ContextSelector(_ref) {
157
159
  setDropdownVisible(false);
158
160
  }
159
161
  }, [onActivate, onDeactivate]);
160
- if (readOnly) return /*#__PURE__*/React.createElement(React.Fragment, null, customTriggerComponent != null ? customTriggerComponent : triggerButton);
162
+ if (readOnly) {
163
+ return /*#__PURE__*/React.createElement(React.Fragment, null, customTriggerComponent != null ? customTriggerComponent : triggerButton);
164
+ }
161
165
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
162
166
  "data-popup-container": true
163
167
  }, /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
@@ -10,6 +10,6 @@ export declare const Title: import("styled-components").StyledComponent<"div", a
10
10
  export declare const ItemWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
11
11
  export declare const ShowMoreItem: import("styled-components").StyledComponent<"div", any, {}, never>;
12
12
  export declare const ErrorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
13
- export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className }: import("@synerise/ds-skeleton").SkeletonProps) => import("react").JSX.Element, any, {
13
+ export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import("@synerise/ds-skeleton").SkeletonProps) => import("react").JSX.Element, any, {
14
14
  contentHeight?: number | undefined;
15
15
  }, never>;
@@ -1,9 +1,9 @@
1
1
  import type { CSSProperties, ReactNode, ReactText } from 'react';
2
- import type { HandledEventsType } from '@synerise/ds-utils';
3
2
  import type { DropdownProps } from '@synerise/ds-dropdown';
4
3
  import type { FactorsProps } from '@synerise/ds-factors';
5
4
  import type { InformationCardProps } from '@synerise/ds-information-card';
6
- import type { ListItemProps, ItemSize } from '@synerise/ds-list-item';
5
+ import type { ItemSize, ListItemProps } from '@synerise/ds-list-item';
6
+ import type { HandledEventsType } from '@synerise/ds-utils';
7
7
  export type ContextTexts = {
8
8
  buttonLabel: ReactNode;
9
9
  searchPlaceholder: string;
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
- import { ContextDropdownProps } from '../ContextSelector.types';
2
+ import { type ContextDropdownProps } from '../ContextSelector.types';
3
3
  declare const ContextSelectorDropdown: ({ texts, setSelected, onSetGroup, groups, items, recentItems, setDropdownVisible, value, visible, hideSearchField, loading, menuItemHeight, dropdownWrapperStyles, onClickOutsideEvents, onClickOutside, onSearch, onFetchData, hasMoreItems, outerHeight, maxSearchResultsInGroup, }: ContextDropdownProps) => React.JSX.Element;
4
4
  export default ContextSelectorDropdown;
@@ -1,20 +1,20 @@
1
1
  var _ITEM_SIZE;
2
2
  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); }
3
3
  import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
- import { v4 as uuid } from 'uuid';
5
4
  import { VariableSizeList } from 'react-window';
5
+ import { v4 as uuid } from 'uuid';
6
+ import { theme } from '@synerise/ds-core';
7
+ import Divider from '@synerise/ds-divider';
6
8
  import Dropdown from '@synerise/ds-dropdown';
7
9
  import Icon, { ArrowRightCircleM, SearchM } from '@synerise/ds-icon';
8
- import Tabs from '@synerise/ds-tabs';
9
- import { focusWithArrowKeys, getClosest, useOnClickOutside, useSearchResults, getActiveTabGroup, getGroupName } from '@synerise/ds-utils';
10
+ import { itemSizes } from '@synerise/ds-list-item';
10
11
  import Result from '@synerise/ds-result';
11
12
  import Scrollbar from '@synerise/ds-scrollbar';
12
- import Divider from '@synerise/ds-divider';
13
- import { theme } from '@synerise/ds-core';
14
- import { itemSizes } from '@synerise/ds-list-item';
13
+ import Tabs from '@synerise/ds-tabs';
14
+ import { focusWithArrowKeys, getActiveTabGroup, getClosest, getGroupName, useOnClickOutside, useSearchResults } from '@synerise/ds-utils';
15
15
  import * as S from '../ContextSelector.styles';
16
+ import { DROPDOWN_HEIGHT, NO_GROUP_NAME, SEARCH_HEIGHT, SUBGROUP_HEADER_HEIGHT, TABS_HEIGHT } from '../constants';
16
17
  import ContextSelectorDropdownItem from './ContextSelectorDropdownItem';
17
- import { NO_GROUP_NAME, DROPDOWN_HEIGHT, TABS_HEIGHT, SUBGROUP_HEADER_HEIGHT, SEARCH_HEIGHT } from '../constants';
18
18
  import { isGroup, isListTitle } from './utils';
19
19
  var ITEM_SIZE = (_ITEM_SIZE = {}, _ITEM_SIZE[itemSizes.LARGE] = 50, _ITEM_SIZE[itemSizes.DEFAULT] = 32, _ITEM_SIZE.title = 32, _ITEM_SIZE.divider = 16, _ITEM_SIZE);
20
20
  function isDivider(element) {
@@ -114,7 +114,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
114
114
  var groupedItems = {};
115
115
  for (var i = 0; i < itemsNumber; i += 1) {
116
116
  var item = dropdownItems[i];
117
- // @ts-ignore
117
+ // @ts-expect-error Property 'groupName' does not exist on type 'ContextGroup
118
118
  var groupName = item.groupName || NO_GROUP_NAME;
119
119
  var group = groupedItems[groupName] || [];
120
120
  group.push(item);
@@ -225,7 +225,6 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
225
225
  }, [onSearch, searchQuery, hasSubgroups, activeGroup, activeTab, groups, groupByGroupName, items, searchResults, currentTabItems == null ? void 0 : currentTabItems.subGroups, currentTabItems == null ? void 0 : currentTabItems.id, recentItems, texts.recentItemsGroupName, texts.allItemsGroupName]);
226
226
  useEffect(function () {
227
227
  var _listRef$current;
228
- // eslint-disable-next-line no-unused-expressions
229
228
  (_listRef$current = listRef.current) == null || _listRef$current.resetAfterIndex(0, false);
230
229
  }, [activeItems, listRef]);
231
230
  var handleSearch = useCallback(function (val) {
@@ -257,8 +256,12 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
257
256
  };
258
257
  var getItemSize = function getItemSize(index) {
259
258
  var item = activeItems[index];
260
- if (isListTitle(item)) return ITEM_SIZE.title;
261
- if (isDivider(item)) return ITEM_SIZE.divider;
259
+ if (isListTitle(item)) {
260
+ return ITEM_SIZE.title;
261
+ }
262
+ if (isDivider(item)) {
263
+ return ITEM_SIZE.divider;
264
+ }
262
265
  return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[itemSizes.DEFAULT];
263
266
  };
264
267
  var dropdownContentHeight = useMemo(function () {
@@ -297,9 +300,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
297
300
  value: searchQuery,
298
301
  autofocus: !searchQuery || searchInputCanBeFocused,
299
302
  autofocusDelay: 50,
300
- handleInputRef: function handleInputRef(ref) {
301
- return setSearchInputHandle(ref);
302
- },
303
+ handleInputRef: setSearchInputHandle,
303
304
  iconLeft: /*#__PURE__*/React.createElement(Icon, {
304
305
  component: /*#__PURE__*/React.createElement(SearchM, null),
305
306
  color: theme.palette['grey-600']
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
- import { ContextSelectorDropdownItemProps } from '../ContextSelector.types';
2
+ import { type ContextSelectorDropdownItemProps } from '../ContextSelector.types';
3
3
  declare const ContextSelectorDropdownItem: ({ item, clearSearch, searchQuery, hideDropdown, select, selected, className, menuItemHeight, style, label, }: ContextSelectorDropdownItemProps) => React.JSX.Element;
4
4
  export default ContextSelectorDropdownItem;
@@ -2,9 +2,9 @@ var _excluded = ["id", "icon"];
2
2
  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); }
3
3
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
4
4
  import React from 'react';
5
+ import { theme } from '@synerise/ds-core';
5
6
  import Icon, { CheckS } from '@synerise/ds-icon';
6
7
  import ListItem from '@synerise/ds-list-item';
7
- import { theme } from '@synerise/ds-core';
8
8
  var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
9
9
  var item = _ref.item,
10
10
  clearSearch = _ref.clearSearch,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-context-selector",
3
- "version": "1.1.14",
3
+ "version": "1.1.16",
4
4
  "description": "ContextSelector UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -28,26 +28,26 @@
28
28
  "types": "tsc --noEmit",
29
29
  "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
30
30
  },
31
- "gitHead": "f2713cd35cfe22f63a159f05144585834897a132",
31
+ "gitHead": "4512641033ba3581a3df208143c547fcfed45895",
32
32
  "sideEffects": [
33
33
  "dist/style/*",
34
34
  "*.less"
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-button": "^1.4.0",
39
- "@synerise/ds-divider": "^1.0.11",
40
- "@synerise/ds-dropdown": "^1.0.13",
41
- "@synerise/ds-factors": "^1.3.0",
42
- "@synerise/ds-icon": "^1.5.3",
43
- "@synerise/ds-information-card": "^1.0.16",
44
- "@synerise/ds-list-item": "^1.0.11",
45
- "@synerise/ds-menu": "^1.0.12",
46
- "@synerise/ds-result": "^1.0.12",
47
- "@synerise/ds-scrollbar": "^1.1.0",
48
- "@synerise/ds-skeleton": "^1.0.12",
49
- "@synerise/ds-tabs": "^1.0.14",
50
- "@synerise/ds-utils": "^1.3.0",
38
+ "@synerise/ds-button": "^1.4.2",
39
+ "@synerise/ds-divider": "^1.0.13",
40
+ "@synerise/ds-dropdown": "^1.0.15",
41
+ "@synerise/ds-factors": "^1.3.2",
42
+ "@synerise/ds-icon": "^1.5.4",
43
+ "@synerise/ds-information-card": "^1.0.18",
44
+ "@synerise/ds-list-item": "^1.0.13",
45
+ "@synerise/ds-menu": "^1.0.14",
46
+ "@synerise/ds-result": "^1.0.14",
47
+ "@synerise/ds-scrollbar": "^1.1.2",
48
+ "@synerise/ds-skeleton": "^1.0.14",
49
+ "@synerise/ds-tabs": "^1.0.16",
50
+ "@synerise/ds-utils": "^1.3.1",
51
51
  "react-window": "1.8.5",
52
52
  "uuid": "^8.3.2"
53
53
  },