@synerise/ds-context-selector 0.25.14 → 0.25.15

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 (7) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +11 -8
  3. package/dist/ContextSelector.js +5 -3
  4. package/dist/ContextSelector.types.d.ts +8 -5
  5. package/dist/hooks/useTexts.d.ts +2 -0
  6. package/dist/hooks/useTexts.js +46 -0
  7. package/package.json +15 -15
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.25.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.25.14...@synerise/ds-context-selector@0.25.15) (2024-11-21)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **context-selector:** make texts optional prop ([44279cf](https://github.com/Synerise/synerise-design/commit/44279cf859db1d3a9ea4ac0fc6e927423fb63407))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.25.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.25.13...@synerise/ds-context-selector@0.25.14) (2024-11-12)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-context-selector
package/README.md CHANGED
@@ -89,7 +89,7 @@ import ContextSelector from '@synerise/ds-context-selector'
89
89
  | onSelectItem | Callback called when user selects item | (item: ContextItem \ ContextGroup \ undefined) => void | - |
90
90
  | defaultDropdownVisibility | default visibility of dropdown | boolean | false |
91
91
  | opened | Whether if dropdown should opens from outside of component | boolean | false |
92
- | texts | Translations object | ContextSelectorTexts | - |
92
+ | texts | Translations object | ContextTexts | - |
93
93
  | selectedItem | Selected item | ContextItem \ undefined | undefined |
94
94
  | addMode | If true trigger doesn't change style when value is set | ContextItem \ undefined | undefined |
95
95
  | customTriggerComponent | Add custom trigger | React.ReactNode | undefined |
@@ -139,11 +139,14 @@ import ContextSelector from '@synerise/ds-context-selector'
139
139
  | customSuffix | Use custom suffix instead of default 'check' icon | React.ReactNode | - |
140
140
 
141
141
 
142
- ### ContextSelectorTexts
142
+ ### ContextTexts
143
+ | Property | Description | Type | Default |
144
+ |----------------------|-------------------------------------------|-----------|--------------|
145
+ | buttonLabel | Button label | ReactNode | 'Choose' |
146
+ | noResults | No results info | ReactNode | 'No results' |
147
+ | searchPlaceholder | Search box placeholder | string | 'Search' |
148
+ | showMore | Show more button label | ReactNode | 'Show more' |
149
+ | recentItemsGroupName | Dropdown section title for recent results | string | 'Recent' |
150
+ | allItemsGroupName | Dropdown section title for all results | string | 'All' |
143
151
 
144
- | Property | Description | Type | Default |
145
- | --- | --- | --- | --- |
146
- | buttonLabel | Button label | string \ React.ReactNode | 'Choose' |
147
- | noResults | No results info | string \ React.ReactNode | 'No results' |
148
- | searchPlaceholder | Search box placeholder | string | 'Search' |
149
-
152
+
package/dist/ContextSelector.js CHANGED
@@ -20,6 +20,7 @@ import { getPopupContainer } from '@synerise/ds-utils';
20
20
  import ContextSelectorDropdown from './ContextSelectorDropdown/ContextSelectorDropdown';
21
21
  import { ItemWrapper, ErrorWrapper } from './ContextSelector.styles';
22
22
  import { DROPDOWN_HEIGHT, DROPDOWN_HEIGHT_BELOW_THRESHOLD, DROPDOWN_HEIGHT_THRESHOLD } from './constants';
23
+ import { useTexts } from './hooks/useTexts';
23
24
 
24
25
  var ContextSelector = function ContextSelector(_ref) {
25
26
  var defaultDropdownVisibility = _ref.defaultDropdownVisibility,
@@ -57,6 +58,7 @@ var ContextSelector = function ContextSelector(_ref) {
57
58
  readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
58
59
  getMenuEntryProps = _ref.getMenuEntryProps,
59
60
  dropdownDimensionsConfig = _ref.dropdownDimensionsConfig;
61
+ var allTexts = useTexts(texts);
60
62
 
61
63
  var _useState = useState(defaultDropdownVisibility != null ? defaultDropdownVisibility : false),
62
64
  dropdownVisible = _useState[0],
@@ -114,7 +116,7 @@ var ContextSelector = function ContextSelector(_ref) {
114
116
  setDropdownVisible(true);
115
117
  }, [onOpen]);
116
118
  var triggerButton = useMemo(function () {
117
- var buttonLabel = texts.buttonLabel;
119
+ var buttonLabel = allTexts.buttonLabel;
118
120
  var hasError = Boolean(errorText);
119
121
  return addMode && !selectedItem ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
120
122
  error: hasError,
@@ -162,7 +164,7 @@ var ContextSelector = function ContextSelector(_ref) {
162
164
  } : undefined
163
165
  }, getMenuEntryProps == null ? void 0 : getMenuEntryProps(selectedItem))]
164
166
  });
165
- }, [texts, addMode, selectedItem, disabled, readOnly, handleClick, triggerColor, triggerMode, getPopupContainerOverride, errorText, getMenuEntryProps]);
167
+ }, [allTexts, addMode, selectedItem, disabled, readOnly, handleClick, triggerColor, triggerMode, getPopupContainerOverride, errorText, getMenuEntryProps]);
166
168
  var onDropdownVisibilityChange = useCallback(function (value) {
167
169
  if (value) {
168
170
  onActivate && onActivate('');
@@ -188,7 +190,7 @@ var ContextSelector = function ContextSelector(_ref) {
188
190
  groups: groups,
189
191
  items: items,
190
192
  recentItems: recentItems,
191
- texts: texts,
193
+ texts: allTexts,
192
194
  visible: dropdownVisible,
193
195
  loading: loading,
194
196
  menuItemHeight: menuItemHeight,
package/dist/ContextSelector.types.d.ts CHANGED
@@ -5,11 +5,14 @@ import type { FactorsProps } from '@synerise/ds-factors';
5
5
  import type { InformationCardProps } from '@synerise/ds-information-card';
6
6
  import type { ListItemProps, ItemSize } from '@synerise/ds-list-item';
7
7
  export type ContextTexts = {
8
- buttonLabel: string;
8
+ buttonLabel: ReactNode;
9
9
  searchPlaceholder: string;
10
- loadingResults: string;
11
- noResults: string;
12
- showMore: string;
10
+ /**
11
+ * @deprecated - Skeleton is displayed instead
12
+ */
13
+ loadingResults?: string;
14
+ noResults: ReactNode;
15
+ showMore: ReactNode;
13
16
  recentItemsGroupName: string;
14
17
  allItemsGroupName: string;
15
18
  };
@@ -55,7 +58,7 @@ export type ContextProps = {
55
58
  groups: ContextGroup[];
56
59
  items: ContextItem[];
57
60
  recentItems?: ContextItem[];
58
- texts: ContextTexts;
61
+ texts?: Partial<ContextTexts>;
59
62
  getPopupContainerOverride?: (trigger: HTMLElement | null) => HTMLElement;
60
63
  onSetGroup?: (item: ContextItem | ContextGroup | undefined) => void;
61
64
  opened?: boolean;
package/dist/hooks/useTexts.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { ContextTexts } from '../ContextSelector.types';
2
+ export declare const useTexts: (defaultTexts?: Partial<ContextTexts>) => ContextTexts;
package/dist/hooks/useTexts.js ADDED
@@ -0,0 +1,46 @@
1
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
2
+
3
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
+
5
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
+
7
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
8
+
9
+ function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
10
+
11
+ import { useMemo } from 'react';
12
+ import { useIntl } from 'react-intl';
13
+ export var useTexts = function useTexts(defaultTexts) {
14
+ var _useIntl = useIntl(),
15
+ formatMessage = _useIntl.formatMessage;
16
+
17
+ var texts = useMemo(function () {
18
+ return _objectSpread({
19
+ buttonLabel: formatMessage({
20
+ id: 'DS.CONTEXT-SELECTOR.BUTTON_LABEL',
21
+ defaultMessage: 'Choose'
22
+ }),
23
+ searchPlaceholder: formatMessage({
24
+ id: 'DS.CONTEXT-SELECTOR.SEARCH_PLACEHOLDER',
25
+ defaultMessage: 'Search'
26
+ }),
27
+ noResults: formatMessage({
28
+ id: 'DS.CONTEXT-SELECTOR.NO_RESULTS',
29
+ defaultMessage: 'No results'
30
+ }),
31
+ showMore: formatMessage({
32
+ id: 'DS.CONTEXT-SELECTOR.SHOW_MORE',
33
+ defaultMessage: 'Show more'
34
+ }),
35
+ recentItemsGroupName: formatMessage({
36
+ id: 'DS.CONTEXT-SELECTOR.RECENT',
37
+ defaultMessage: 'Recent'
38
+ }),
39
+ allItemsGroupName: formatMessage({
40
+ id: 'DS.CONTEXT-SELECTOR.ALL',
41
+ defaultMessage: 'All'
42
+ })
43
+ }, defaultTexts);
44
+ }, [defaultTexts, formatMessage]);
45
+ return texts;
46
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-context-selector",
3
- "version": "0.25.14",
3
+ "version": "0.25.15",
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": "8d26191fc0475407e0691b9b183761ad3cd7c87d",
31
+ "gitHead": "05f083c767e2cec3c2f91c9475aee89852a77d6c",
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": "^0.21.18",
39
- "@synerise/ds-divider": "^0.7.14",
40
- "@synerise/ds-dropdown": "^0.18.23",
41
- "@synerise/ds-factors": "^0.27.1",
42
- "@synerise/ds-icon": "^0.66.4",
43
- "@synerise/ds-information-card": "^0.6.1",
44
- "@synerise/ds-list-item": "^0.4.18",
45
- "@synerise/ds-menu": "^0.20.5",
46
- "@synerise/ds-result": "^0.7.13",
47
- "@synerise/ds-scrollbar": "^0.11.18",
48
- "@synerise/ds-skeleton": "^0.6.17",
49
- "@synerise/ds-tabs": "^0.17.6",
50
- "@synerise/ds-utils": "^0.31.1",
38
+ "@synerise/ds-button": "^0.21.19",
39
+ "@synerise/ds-divider": "^0.7.15",
40
+ "@synerise/ds-dropdown": "^0.18.24",
41
+ "@synerise/ds-factors": "^0.27.2",
42
+ "@synerise/ds-icon": "^0.67.0",
43
+ "@synerise/ds-information-card": "^0.6.2",
44
+ "@synerise/ds-list-item": "^0.4.19",
45
+ "@synerise/ds-menu": "^0.20.6",
46
+ "@synerise/ds-result": "^0.7.14",
47
+ "@synerise/ds-scrollbar": "^0.11.19",
48
+ "@synerise/ds-skeleton": "^0.6.18",
49
+ "@synerise/ds-tabs": "^0.17.7",
50
+ "@synerise/ds-utils": "^0.31.2",
51
51
  "react-window": "1.8.5",
52
52
  "uuid": "^8.3.2"
53
53
  },